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 6 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
89 changes: 87 additions & 2 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 {

@localjo localjo Dec 26, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We didn't have custom .joyride CSS before, and we're including the Joyride stylesheet in this branch already.

We shouldn't have to add custom CSS to our stylesheets to achieve style parity with production. @ZachTRice @Benjaki2 I might have missed something when I included the dependency stylesheets. Maybe the paths aren't correct, or maybe they're in the wrong order or something. Both of you have added dependency styles to stylesheets in your PRs, but I think maybe there's a problem with how I did the CSS originally. Have either of you looked into that?

@ZachTRice ZachTRice Jan 2, 2018 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The version we were using before was modified to add css directly to the plugin. Here is the css blame: https://github.com/nasa-gibs/worldview/blame/master/web/ext/tour/joyride-2.0.3-3/joyride.css

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 @@ -270,12 +282,53 @@ button.done:hover {

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

.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 {
width: auto;
float: right;
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;
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: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 +342,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 +420,31 @@ 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;
}
5 changes: 2 additions & 3 deletions web/js/feedback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@

import util from './util/util';

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

@localjo localjo Jan 2, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why go from a named export to an unnamed default export?

@ZachTRice ZachTRice Jan 2, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed in slack chat; export constant does not work in this case. We can look at changing this to a named function when we do a review. Util functions are setup in a similar manner as this.

var feedbackInit = false;

self.decorate = function ($element) {
Expand All @@ -30,4 +29,4 @@ export const feedbackModal = (function () {
};

return self;
})();
})({});

@localjo localjo Jan 2, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you move self from being defined inside the function to being passed in as a parameter?

@ZachTRice ZachTRice Jan 2, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed in slack chat; export constant does not work in this case. We can look at changing this to a named function when we do a review. Util functions are setup in a similar manner as this.

@localjo localjo Jan 2, 2018

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does a naming the function change how parameters are passed in? Before, you could call this function with no parameters, feedbackModal(), and it would work fine. Now we have to call the function with an empty object for it to work, feedbackModal({}). Why can't we do var self = {} inside the function like it was before?

@ZachTRice ZachTRice Jan 2, 2018

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call, I have made this change and tested it.

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
13 changes: 6 additions & 7 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,7 +169,7 @@ 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);
googleAnalytics.event('Tour', 'Click', 'Post Tour View', index + 1);
if (index === 5 && button !== 'previous') {
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