Merge pull request #639 from nasa-gibs/module-loaders-tour

Enable tour features
nasa-gibs · Jan 3, 2018 · e5dcbdf · e5dcbdf
2 parents 13f087b + cc0fc12
commit e5dcbdf
Show file tree

Hide file tree

Showing 8 changed files with 450 additions and 1,326 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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://[email protected]/nasa-gibs/joyride.git",
     "jscrollpane": "^2.0.22",
     "lodash": "4.15.0",
     "mobiscroll-jquery": "^3.2.6",

diff --git a/web/css/main.css b/web/css/main.css
@@ -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");

diff --git a/web/css/tour.css b/web/css/tour.css
@@ -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;
@@ -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 {
@@ -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;
 }
@@ -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 {
@@ -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;
+}
diff --git a/web/js/feedback.js b/web/js/feedback.js
@@ -7,7 +7,7 @@
 
 import util from './util/util';
 
-export const feedbackModal = (function () {
+export default (function () {
   var self = {};
   var feedbackInit = false;
 

diff --git a/web/js/main.js b/web/js/main.js
@@ -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);

diff --git a/web/js/tour.js b/web/js/tour.js
@@ -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) {
@@ -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>'
@@ -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();
       }
     };
@@ -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>'