Skip to content

Enable tour features #639

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
localjo merged 9 commits into from
Jan 3, 2018
Merged

Enable tour features #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c30d674
Enable tour features
ZachTRice Dec 7, 2017
9a7f1c3
Fix joyride not initating on click and errors related to feedback.js
ZachTRice Dec 8, 2017
6cd8292
Fix tour styles
ZachTRice Dec 13, 2017
54fa7d2
Merge branch 'module-loaders' of https://github.com/nasa-gibs/worldvi…
ZachTRice Dec 19, 2017
ad3509a
Merge branch 'module-loaders' of https://github.com/nasa-gibs/worldvi…
ZachTRice Dec 21, 2017
de3b251
Restore tour pagination and fix styles
ZachTRice Dec 21, 2017
de3c47f
Restore previous buttons to jquery joyride
ZachTRice Jan 2, 2018
a094ee6
Fix page count position, dialog box appearing unexpectedly, nub position
ZachTRice Jan 2, 2018
cc0fc12
Move parameters inside the feedback function and assign to self
ZachTRice Jan 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,086 changes: 29 additions & 1,057 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@
"jquery": "^2.1.4",
"jquery-jcrop": "^0.9.13",
"jquery-ui": "1.10.4",
"jquery.joyride": "^2.2.0",
"jquery.joyride": "git+https://git@github.com/nasa-gibs/joyride.git",
"jscrollpane": "^2.0.22",
"lodash": "4.15.0",
"mobiscroll-jquery": "^3.2.6",
Expand Down
3 changes: 2 additions & 1 deletion web/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* Dependency CSS */
@import url("../../node_modules/font-awesome/css/font-awesome.css");
@import url("../../node_modules/jquery-ui/themes/base/minified/jquery-ui.min.css");
@import url("../../node_modules/jquery-ui/themes/base/jquery-ui.css");
@import url("../../node_modules/jquery-ui/themes/ui-darkness/jquery-ui.css");
@import url("../../node_modules/icheck/skins/square/grey.css");
@import url("../../node_modules/icheck/skins/square/red.css");
@import url("../../node_modules/icheck/skins/line/red.css");
Expand Down
105 changes: 102 additions & 3 deletions web/css/tour.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@
background-color: rgb(175, 181, 196);
}

.joyride-bordered {
border: #808080 solid 1px;
}

.joyride-wide {
width: 450px;
}

.joyride-close-tip {
color: rgba(38, 43, 49, 0.4) !important;
}

.tour h3 {
color: rgb(38, 43, 49);
font: 18px 'Open Sans', sans-serif;
Expand Down Expand Up @@ -139,9 +151,11 @@ button.skipTour:hover {
vertical-align: top;
}

.tour p {
.tour p,
.tour ul {
color: rgb(38, 43, 49);
font: 400 13px/16px 'Open Sans', sans-serif;
margin: 0 0 14px;
}

.joyride-content-wrapper {
Expand Down Expand Up @@ -270,12 +284,61 @@ button.done:hover {

.joyride-tip-guide {
z-index: 293;
background: rgb(175, 181, 196);
padding-bottom: 32px;
width: 350px;
}

.joyride-tip-guide[data-index="0"] {
z-index: 296;
}

.joyride-tip-guide a:hover {
color: #000 !important;
border-bottom: 0;
}

.joyride-tip-guide .joyride-next-tip,
.joyride-tip-guide .joyride-prev-tip {
width: auto;
float: left;
padding: 6px 18px 4px;
font-size: 13px;
border: 1px solid #d7dada;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-align: center;
text-shadow: none;
color: #000;
background-color: #f4f5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f5f5), color-stop(100%, #dfdddd));
background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f4f5f5, endColorstr=#dfdddd);
}

.joyride-tip-guide .joyride-next-tip {
float: right;
}

.joyride-tip-guide .joyride-next-tip:hover,
.joyride-tip-guide .joyride-prev-tip:hover {
border: 1px solid #bfc4c4 !important;
background-color: #d9dddd;
color: #000;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9dddd), color-stop(100%, #c6c3c3));
background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -ms-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#d9dddd, endColorstr=#c6c3c3);
}

table.splash td.splash-info {
vertical-align: top;
}
Expand All @@ -289,9 +352,13 @@ table.splash td.splash-info {
}

p.wv-tour-page-count {
text-align: right;
margin-top: 7px;
font: 400 13px/16px 'Open Sans', sans-serif;
color: #262b31;
text-align: right;
position: absolute;
bottom: 0;
right: 0;
margin: 12px;
}

.wv-tour-visible-icon {
Expand Down Expand Up @@ -363,3 +430,35 @@ p.wv-tour-page-count {
.joyride-nub-border {
pointer-events: none;
}

.joyride-tip-guide span.joyride-nub.top {
border-color: #afb5c4 !important;
border-top-color: transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}

.joyride-tip-guide span.joyride-nub.right {
border-color: #afb5c4 !important;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
}

.joyride-tip-guide span.joyride-nub.bottom {
border-color: #afb5c4 !important;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
border-right-color: transparent !important;
}

.joyride-tip-guide span.joyride-nub.left {
border-color: #afb5c4 !important;
border-top-color: transparent !important;
border-left-color: transparent !important;
border-bottom-color: transparent !important;
}

.joyride-tip-guide.toolbarTip span.joyride-nub.top {
left: 250px;
}
2 changes: 1 addition & 1 deletion web/js/feedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import util from './util/util';

export const feedbackModal = (function () {
export default (function () {
var self = {};
var feedbackInit = false;

Expand Down
2 changes: 1 addition & 1 deletion web/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ window.onload = () => {
// ui.naturalEvents = naturalEventsUI(models, ui, config, naturalEventsRequest(models, ui, config));
}
ui.link = linkUi(models, config);
// ui.tour = Tour(models, ui, config);
ui.tour = tour(models, ui, config);
// ui.info = uiInfo(ui, config);
if (config.features.alert) {
// ui.alert = notificationsUi(ui, config);
Expand Down
15 changes: 7 additions & 8 deletions web/js/tour.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import $ from 'jquery';
import 'jquery-ui/dialog';
import 'jquery.joyride';
import util from './util/util';
import wvui from './ui/ui';
import {GA} from 'worldview-components';
import {GA as googleAnalytics} from 'worldview-components';
import feedbackModal from './feedback';

export default function (models, ui, config) {
Expand Down Expand Up @@ -135,8 +136,7 @@ export default function (models, ui, config) {
.dialog('close');
$('#joyRideTipContent')
.joyride({
adjustForPhone: false,
bordered: true,
autoStart: true,
includepage: true,
template: {
'link': '<a href="#" class="joyride-close-tip">X</a>'
Expand Down Expand Up @@ -169,8 +169,8 @@ export default function (models, ui, config) {
var onStop = function (index, tip, button) {
// console.log(index, tip, button);
setTourState();
GA.event('Tour', 'Click', 'Post Tour View', index + 1);
if (index === 5 && button !== 'previous') {
googleAnalytics.event('Tour', 'Click', 'Post Tour View', index + 1);
if (index === 5 && button === false) {
endTour();
}
};
Expand All @@ -183,11 +183,10 @@ export default function (models, ui, config) {
$('.ui-dialog-content')
.dialog('close');
initTourState();
GA.event('Tour', 'Click', 'Take Tour');
googleAnalytics.event('Tour', 'Click', 'Take Tour');
$('#joyRideTipContent')
.joyride({
adjustForPhone: false,
bordered: true,
autoStart: true,
includepage: true,
template: {
'link': '<a href="#" class="joyride-close-tip">X</a>'
Expand Down
Loading