vmario
/
doodle3d-client
mirror of https://github.com/Doodle3D/doodle3d-client.git
0
0
Fork 0
Code Issues Releases Wiki Activity

updated intro Tour behavior

This commit is contained in:
Adriaan Wormgoor 2013-10-23 17:01:59 +02:00
parent 7daa661f3c
commit 3058ef5c79
4 changed files with 256 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

246
js_src/Help.js
View File

@ -4,6 +4,7 @@ function GrandTour(_name) {
console.log("GrandTour"); console.log("GrandTour");
this.tour = ""; this.tour = "";
this.name = _name; this.name = _name;
this.active = false;
var self = this; var self = this;
this.init = function() { this.init = function() {
@ -20,17 +21,18 @@ function GrandTour(_name) {
'nubPosition': 'auto', // override on a per tooltip bases 'nubPosition': 'auto', // override on a per tooltip bases
'scrollSpeed': 300, // Page scrolling speed in ms 'scrollSpeed': 300, // Page scrolling speed in ms
// 'timer': 2000, // 0 = off, all other numbers = time(ms) // 'timer': 2000, // 0 = off, all other numbers = time(ms)
'startTimerOnClick': true, // true/false to start timer on first click // 'startTimerOnClick': true, // true/false to start timer on first click
'nextButton': true, // true/false for next button visibility 'nextButton': true, // true/false for next button visibility
'tipAnimation': 'fade', // 'pop' or 'fade' in each tip 'tipAnimation': 'fade', // 'pop' or 'fade' in each tip
'pauseAfter': [], // array of indexes where to pause the tour after // 'pauseAfter': [], // array of indexes where to pause the tour after
'tipAnimationFadeSpeed': 250, // if 'fade'- speed in ms of transition 'tipAnimationFadeSpeed': 350, // if 'fade'- speed in ms of transition
// 'cookieMonster': true, // true/false for whether cookies are used // 'cookieMonster': true, // true/false for whether cookies are used
// 'cookieDomain': false, // set to false or yoursite.com // 'cookieDomain': false, // set to false or yoursite.com
// 'cookieName': 'Doodle3DFirstTime', // choose your own cookie name // 'cookieName': 'Doodle3DFirstTime', // choose your own cookie name
// 'localStorage': true, // // 'localStorage': true, //
// 'localStorageKey': 'Doodle3DFirstTime', // choose your own cookie name // 'localStorageKey': 'Doodle3DFirstTime', // choose your own cookie name
'preRideCallback' : self.preRideCallback, 'preRideCallback' : self.preRideCallback,
'preStepCallback': self.preStepCallback, // A method to call before each step
'postStepCallback': self.postStepCallback, // A method to call after each step 'postStepCallback': self.postStepCallback, // A method to call after each step
'postRideCallback': self.postRideCallback // a method to call once the tour closes 'postRideCallback': self.postRideCallback // a method to call once the tour closes
}); });
@ -40,41 +42,126 @@ function GrandTour(_name) {
this.preRideCallback = function(index, tip) { this.preRideCallback = function(index, tip) {
console.log("GrandTour >> f:preRideCallback() >> index: " + index); console.log("GrandTour >> f:preRideCallback() >> index: " + index);
if ($.cookie("Doodle3DFirstTime") == "ridden" && index == 0) { if (index == 0 && $.cookie("Doodle3DFirstTime") == "ridden") {
console.log("we've been here before..."); console.log("GrandTour >> f:preRideCallback() >> we've been here before...");
// $(this).joyride('set_li', false, 1);
if ($.cookie("grandTourFinished")) {
// grand tour was previously finished (eh.. is that useful?)
// executing this 3 times because there doesn't seem to be a 'go to step X' method
// $(this).joyride('set_li', false);
$(this).joyride('set_li', false);
$(this).joyride('set_li', false);
} else {
$(this).joyride('set_li', false);
}
} }
if ($.cookie("Doodle3DFirstTime") == 'ridden') {
console.log("we've been here before..."); // bring up all the elements
$(this).joyride('set_li', false); thermometer.show();
} progressbar.show();
// if ($.cookie("Doodle3DFirstTime") == 'ridden') {
// console.log("we've been here before...");
// $(this).joyride('set_li', false, 4);
// }
// if (index == 0) { // if (index == 0) {
// console.log("...yeah"); // console.log("...yeah");
// $(this).joyride('set_li', false, 1); // $(this).joyride('set_li', false, 1);
// } // }
}; };
this.preStepCallback = function(index, tip) {
console.log("GrandTour >> f:preStepCallback() >> index: " + index);
var dataset = $(this)[0].$li[0].dataset;
if (dataset.action != undefined) {
console.log(" THERE'S AN ACTION!");
switch (dataset.action) {
case "sayHello":
console.log(" action: sayHello");
break;
case "showMessage":
console.log(" action: showMessage");
message.set("Just a notification...", Message.NOTICE);
message.show();
break;
case "showProgressBar":
console.log(" action: showProgressBar");
progressbar.show();
break;
case "showThermometer":
console.log(" action: showThermometer");
thermometer.show();
break;
}
}
};
this.postStepCallback = function(index, tip) { this.postStepCallback = function(index, tip) {
console.log("GrandTour >> f:postStepCallback() >> index: " + index); console.log("GrandTour >> f:postStepCallback() >> index: " + index);
var dataset = $(this)[0].$li[0].dataset;
if (dataset.action != undefined) {
console.log(" THERE *WAS* AN ACTION!");
switch (dataset.action) {
case "sayHello":
console.log(" action: sayHello");
break;
case "showMessage":
console.log(" action: showMessage");
// message.hide();
break;
case "showProgressBar":
console.log(" action: showProgressBar");
// progressbar.hide();
break;
case "showThermometer":
console.log(" action: showThermometer");
// thermometer.hide();
break;
}
}
}; };
this.postRideCallback = function(index, tip) { this.postRideCallback = function(index, tip) {
console.log("GrandTour >> f:postRideCallback() >> index: " + index); // console.log("GrandTour >> f:postRideCallback() >> index: " + index + ", self.active: " + self.active);
// console.log("GrandTour >> f:postRideCallback() >> this: " , self);
self.active = false;
$(document).trigger(helpTours.TOURFINISHED, self.name); $(document).trigger(helpTours.TOURFINISHED, self.name);
// hide the elements which were summoned for the purposes of the tour
thermometer.hide();
progressbar.hide();
message.hide();
// after seeing the grand tour for the first time ever, set cookie 'Doodle3DFirstTime' to true
if (!$.cookie("Doodle3DFirstTime")) {
$.cookie("Doodle3DFirstTime", 'ridden', { expires: 365, domain: false, path: '/' });
}
if (index < $(this)[0].$tip_content.length - 1) { if (index < $(this)[0].$tip_content.length - 1) {
console.log("doPostRideCallback >> ENDED BEFORE END"); console.log("GrandTour >> f:postRideCallback() >> tour terminated before its true end");
helpTours.startTour(helpTours.INFOREMINDER); // tour wasn't finished
// tour was ended prematurely. For only the first few visits, nag the user about being able to revisit the tour..
if (parseInt($.cookie("Doodle3DVisitCounter")) < helpTours.numTimesToShowNagPopup) {
helpTours.startTour(helpTours.INFOREMINDER, helpTours);
}
// infoReminderTour.start(); // infoReminderTour.start();
} else { } else {
console.log("doPostRideCallback >> this is the end my friend..."); // tour was finished
console.log("GrandTour >> f:postRideCallback() >> tour ended at its true end");
// we should be at the end... // we should be at the end...
$.cookie("Doodle3DFirstTime", 'ridden', { expires: 365, domain: false, path: '/' }); if (!$.cookie("grandTourFinished") && parseInt($.cookie("Doodle3DVisitCounter")) < helpTours.numTimesToShowNagPopup) {
helpTours.startTour(helpTours.INFOREMINDER, helpTours);
}
$.cookie("grandTourFinished", 'yes', { expires: 365, domain: false, path: '/' });
} }
}; };
this.start = function() { this.start = function() {
console.log("GrandTour >> f:start()"); console.log("GrandTour >> f:start() >> this: " , this);
this.active = true;
$(window).joyride('restart'); $(window).joyride('restart');
// self.tour(); // self.tour();
}; };
@ -85,6 +172,7 @@ function InfoReminderTour(_name) {
console.log("InfoReminderTour"); console.log("InfoReminderTour");
this.tour = ""; this.tour = "";
this.name = _name; this.name = _name;
this.active = false;
var self = this; var self = this;
this.init = function(callback) { this.init = function(callback) {
@ -97,12 +185,12 @@ function InfoReminderTour(_name) {
expose: true, expose: true,
'tipAdjustmentX': 15, 'tipAdjustmentX': 15,
'tipAdjustmentY': 15, 'tipAdjustmentY': 15,
'tipLocation': 'left', // 'top' or 'bottom' in relation to parent 'tipLocation': 'bottom', // 'top' or 'bottom' in relation to parent
'nubPosition': 'auto', // override on a per tooltip bases 'nubPosition': 'auto', // override on a per tooltip bases
'scrollSpeed': 300, // Page scrolling speed in ms 'scrollSpeed': 300, // Page scrolling speed in ms
'nextButton': true, // true/false for next button visibility 'nextButton': true, // true/false for next button visibility
'tipAnimation': 'fade', // 'pop' or 'fade' in each tip 'tipAnimation': 'fade', // 'pop' or 'fade' in each tip
'tipAnimationFadeSpeed': 250, // if 'fade'- speed in ms of transition 'tipAnimationFadeSpeed': 350, // if 'fade'- speed in ms of transition
'preRideCallback' : self.preRideCallback, 'preRideCallback' : self.preRideCallback,
'postStepCallback': self.postStepCallback, // A method to call after each step 'postStepCallback': self.postStepCallback, // A method to call after each step
'postRideCallback': self.postRideCallback // a method to call once the tour closes 'postRideCallback': self.postRideCallback // a method to call once the tour closes
@ -120,11 +208,13 @@ function InfoReminderTour(_name) {
}; };
this.postRideCallback = function(index, tip) { this.postRideCallback = function(index, tip) {
console.log("InfoReminderTour >> f:postRideCallback() >> index: " + index + ", tip: " , tip); console.log("InfoReminderTour >> f:postRideCallback() >> index: " + index + ", tip: " , tip);
this.active = false;
$(document).trigger(helpTours.TOURFINISHED, self.name); $(document).trigger(helpTours.TOURFINISHED, self.name);
}; };
this.start = function() { this.start = function() {
console.log("InfoReminderTour >> f:start()"); console.log("InfoReminderTour >> f:start()");
this.active = true;
$(window).joyride('restart'); $(window).joyride('restart');
// self.tour(); // self.tour();
}; };
@ -133,26 +223,31 @@ function InfoReminderTour(_name) {
function initHelp() { function initHelp() {
console.log("f:initHelp()"); console.log("f:initHelp()");
// track number of visits of this user
if ($.cookie("Doodle3DVisitCounter") == null) {
$.cookie("Doodle3DVisitCounter", '0');
} else {
$.cookie("Doodle3DVisitCounter", parseInt($.cookie("Doodle3DVisitCounter")) + 1);
}
// load the html file which describes the tour contents
// grandTour = new GrandTour();
// infoReminderTour = new InfoReminderTour();
// first call inits the tour
// joyride2();
$("#helpContainer").load("helpcontent.html", function() { $("#helpContainer").load("helpcontent.html", function() {
console.log("helpContent loaded"); console.log("helpContent loaded");
helpTours = new HelpTours();
helpTours.init();
// grandTour.init(); helpTours = new HelpTours();
//// infoReminderTour.init();
// helpTours.init( function () {
// if ($.cookie("Doodle3DFirstTime") != "ridden") {
// console.log("intro tour has not been given yet > let's go!"); // only trigger starttour if user is seeing Doodle3D for the first time
// setTimeout(grandTour.start, 1000); if ($.cookie("Doodle3DFirstTime") != "ridden") {
// } console.log("initHelp >> intro tour has not been given yet > let's go!");
setTimeout(helpTours.startTour, 750, helpTours.tours.grandTour, helpTours);
} else if (parseInt($.cookie("Doodle3DVisitCounter")) < helpTours.numTimesToShowNagPopup) {
console.log("initHelp >> Doodle3DFirstTime cookie is set, Doodle3DVisitCounter is < 4");
// remind user of our nifty tour
setTimeout(helpTours.startTour, 750, helpTours.tours.infoReminderTour, helpTours);
}
});
}); });
} }
@ -161,64 +256,97 @@ var helpTours;
function HelpTours() { function HelpTours() {
console.log("HelpTours"); console.log("HelpTours");
this.numTimesToShowNagPopup = 4;
this.WELCOMETOUR = "welcometour"; this.WELCOMETOUR = "welcometour";
this.INFOREMINDER = "inforeminder"; this.INFOREMINDER = "inforeminder";
this.TOURFINISHED = "tourfinished"; this.TOURFINISHED = "tourfinished";
this.tours = {
'grandTour' : this.WELCOMETOUR,
'infoReminderTour' : this.INFOREMINDER
};
this.currActiveTour = "";
this.tourActive = false; this.tourActive = false;
var self = this; var self = this;
this.init = function() { this.init = function(callback) {
console.log("HelpTours >> f:init"); console.log("HelpTours >> f:init >> self: " + self);
$(document).on(this.TOURFINISHED, this.tourEnded); $(document).on(this.TOURFINISHED, this.tourEnded);
grandTour = new GrandTour(this.WELCOMETOUR); grandTour = new GrandTour(this.WELCOMETOUR);
infoReminderTour = new InfoReminderTour(this.INFOREMINDER); infoReminderTour = new InfoReminderTour(this.INFOREMINDER);
if ($.cookie("Doodle3DFirstTime") != "ridden") { // this.tours["grandTour"] = self.WELCOMETOUR;
console.log("HelpTours >> f:init >> intro tour has not been given yet > let's go! (this.WELCOMETOUR = " + this.WELCOMETOUR + ")"); // this.tours["infoReminderTour "]= self.INFOREMINDER;
setTimeout(this.startTour, 1000, this.WELCOMETOUR); console.log("HelpTours >> f:init >> this.tours: " , this.tours);
}
if (callback != undefined) callback();
}; };
this.startTour = function(which) { this.startTour = function(which, scope) {
console.log("HelpTours >> f:startTour >> target to start: '" + which); if (scope == undefined) scope = this;
// console.log("HelpTours >> f:startTour >> scope: " , scope);
// console.log("HelpTours >> f:startTour >> currActiveTour: " , scope.currActiveTour.name);
// console.log("HelpTours >> f:startTour >> currActiveTour.active: " , scope.currActiveTour.active);
// console.log("HelpTours >> f:startTour >> target to start: '" + which);
switch (which) { switch (which) {
case self.WELCOMETOUR: case scope.WELCOMETOUR:
// do welcometour // do welcometour
console.log("HelpTours >> f:startTour >> case this.WELCOMETOUR >> self.tourActive = " + self.tourActive); // console.log("HelpTours >> f:startTour >> case this.WELCOMETOUR >> scope.tourActive = " + scope.tourActive);
if (this.tourActive) { console.log("HelpTours >> f:startTour >> case this.WELCOMETOUR");
$(window).joyride('end'); if (scope.tourActive) {
this.tourActive = false; if (scope.currActiveTour.active == true) {
$(window).joyride('end');
scope.currActiveTour = undefined;
}
scope.tourActive = false;
} }
$(window).joyride('destroy'); $(window).joyride('destroy');
grandTour.init(); // var self = this;
grandTour.start(); grandTour.init();
this.tourActive = true; setTimeout(function(scp) {
grandTour.start();
scp.currActiveTour = grandTour;
scp.tourActive = true;
}, 250, scope);
// $(window).joyride('restart'); // $(window).joyride('restart');
break; break;
case self.INFOREMINDER: case self.INFOREMINDER:
// do info reminder // do info reminder
console.log("HelpTours >> f:startTour >> case self.INFOREMINDER >> self.tourActive = " + self.tourActive); // console.log("HelpTours >> f:startTour >> case self.INFOREMINDER >> scope.tourActive = " + scope.tourActive);
if (this.tourActive) { console.log("HelpTours >> f:startTour >> case self.INFOREMINDER");
$(window).joyride('end'); if (scope.tourActive) {
this.tourActive = false; // console.log(" killing previous joyride... ");
if (scope.currActiveTour.active == true) {
$(window).joyride('end');
scope.currActiveTour = undefined;
}
// console.log(" setting tourActive to false....");
scope.tourActive = false;
// console.log(" scope.tourActive: " + scope.tourActive);
} }
$(window).joyride('destroy'); $(window).joyride('destroy');
infoReminderTour.init(); // var self = this;
infoReminderTour.start(); infoReminderTour.init();
this.tourActive = true; setTimeout(function(scp) {
infoReminderTour.start();
scp.currActiveTour = infoReminderTour;
scp.tourActive = true;
}, 250, scope);
break; break;
} }
} }
this.tourEnded = function(e, n) { this.tourEnded = function(e, n) {
console.log("HelpTours >> f:tourEnded >> name: " + n); console.log("HelpTours >> f:tourEnded >> this.tourActive: " + self.tourActive + ", name: " + n);
this.tourActive = false; self.tourActive = false;
} }
} }

1
js_src/main.js
View File

@ -23,7 +23,6 @@ var showOrHide = false;
$(function() { $(function() {
console.log("ready"); console.log("ready");
//TODO give this a more logical place in code //TODO give this a more logical place in code
if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1"); if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");

48
less/help_joyride-2.1.less
View File

@ -1,11 +1,8 @@
/* Artfully masterminded by ZURB */ //@helpBlue: #2470E2;
body { @darkBlue: #013;
/*position: relative;*/ @helpBlue: #1B76FF;
} @helpFullBlue: rgb(0,85,214);
@helpDarkBlue: darken(desaturate(@helpBlue, 25%), 35%);
//#joyRideTipContent { display: none; }
//
//.joyRideTipContent { display: none; }
/* Default styles for the container */ /* Default styles for the container */
.joyride-tip-guide { .joyride-tip-guide {
@ -13,7 +10,8 @@ body {
// background: #000; // background: #000;
background: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.92);
display: none; display: none;
color: #222; color: @darkBlue;
// color: rgb(0,99,255);
width: 300px; width: 300px;
z-index: 101; z-index: 101;
top: 0; /* keeps the page from scrolling when calculating position */ top: 0; /* keeps the page from scrolling when calculating position */
@ -21,7 +19,9 @@ body {
// font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif; // font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", Helvetica, Arial, Lucida, sans-serif;
font-weight: normal; font-weight: normal;
border-radius: 10px; border-radius: 10px;
border: 3px solid #5FCE4F; // border: 3px solid #5FCE4F;
// border: 3px solid #374952;
border: 3px solid @helpFullBlue;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
} }
@ -64,7 +64,8 @@ body {
and override the top,left,right colors below. and override the top,left,right colors below.
*/ */
// border-color: #000; // border-color: #000;
border-color: rgba(67, 216, 20, 1.0); // border-color: rgba(67, 216, 20, 1.0) !important;
border-color: @helpFullBlue !important;
// border-color: rgba(0,0,0,0.8); // border-color: rgba(0,0,0,0.8);
border-top-color: transparent !important; border-top-color: transparent !important;
border-left-color: transparent !important; border-left-color: transparent !important;
@ -83,7 +84,8 @@ body {
and override the bottom,left,right colors below. and override the bottom,left,right colors below.
*/ */
// border-color: #000; // border-color: #000;
border-color: rgba(67, 216, 20, 1.0) !important; // border-color: rgba(67, 216, 20, 1.0) !important;
border-color: @helpFullBlue !important;
// border-color: rgba(0,0,0,0.8) !important; // border-color: rgba(0,0,0,0.8) !important;
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
border-left-color: transparent !important; border-left-color: transparent !important;
@ -95,7 +97,8 @@ body {
.joyride-tip-guide span.joyride-nub.right { .joyride-tip-guide span.joyride-nub.right {
// border-color: #000; // border-color: #000;
border-color: rgba(67, 216, 20, 1.0) !important; // border-color: rgba(67, 216, 20, 1.0) !important;
border-color: @helpFullBlue !important;
// border-color: rgba(0,0,0,0.8) !important; // border-color: rgba(0,0,0,0.8) !important;
border-top-color: transparent !important; border-top-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;
@ -109,7 +112,8 @@ body {
.joyride-tip-guide span.joyride-nub.left { .joyride-tip-guide span.joyride-nub.left {
// border-color: #000; // border-color: #000;
border-color: rgba(67, 216, 20, 1.0) !important; // border-color: rgba(67, 216, 20, 1.0) !important;
border-color: @helpFullBlue !important;
// border-color: rgba(0,0,0,0.8) !important; // border-color: rgba(0,0,0,0.8) !important;
border-top-color: transparent !important; border-top-color: transparent !important;
border-left-color: transparent !important; border-left-color: transparent !important;
@ -122,8 +126,8 @@ body {
} }
.joyride-tip-guide span.joyride-nub.top-right { .joyride-tip-guide span.joyride-nub.top-right {
border-color: #000; // border-color: #000;
border-color: rgba(0,0,0,0.8); border-color: @helpFullBlue;
border-top-color: transparent !important; border-top-color: transparent !important;
border-left-color: transparent !important; border-left-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;
@ -143,7 +147,8 @@ body {
line-height: 1.25; line-height: 1.25;
margin: 0; margin: 0;
font-weight: bold; font-weight: bold;
color: #2DDF34; // color: #2DDF34;
color: @helpFullBlue;
// color: #fff; // color: #fff;
} }
} }
@ -160,12 +165,15 @@ body {
line-height: 18px; line-height: 18px;
} }
.joyride-tip-guide a { .joyride-tip-guide a {
color: rgb(255,255,255); // color: rgb(255,255,255);
color: @helpFullBlue;
text-decoration: none; text-decoration: none;
border-bottom: dotted 1px rgba(255,255,255,0.6); // border-bottom: dotted 1px rgba(255,255,255,0.6);
border-bottom: dotted 1px lighten(@helpFullBlue, 20%);
} }
.joyride-tip-guide a:hover { .joyride-tip-guide a:hover {
color: rgba(255,255,255,0.8); // color: rgba(255,255,255,0.8);
color: lighten(@helpFullBlue, 20%);
border-bottom: none; border-bottom: none;
} }

47
www/helpcontent.html
View File

@ -16,30 +16,58 @@
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p> <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
<p><a href="#">linkme beautiful</a>.</p> <p><a href="#">linkme beautiful</a>.</p>
</li> </li>
<li data-class="btnsPrevNext" data-button="Next" data-options="tipLocation:right" data-action="sayHello">
<h2>previous and next</h2>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li>
<li data-class="btnSave" data-button="Next" data-options="tipLocation:right"> <li data-class="btnSave" data-button="Next" data-options="tipLocation:right">
<h2>Save</h2> <h2>Save</h2>
<p>Get the details right by styling Joyride with a custom stylesheet!</p> <p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li> </li>
<li data-button="Next">
<h2>Modal</h2>
<p>It works as a modal too!</p>
</li>
<li data-class="btnOops" data-button="Next" data-options="tipLocation:right"> <li data-class="btnOops" data-button="Next" data-options="tipLocation:right">
<h2>Oops</h2> <h2>Oops</h2>
<p>It works right aligned.</p> <p>It works right aligned.</p>
</li> </li>
<li data-button="Next">
<h2>Now for the right panel</h2>
<p>It works as a modal too!</p>
</li>
<li data-class="rightpanel" data-button="Next" data-options="tipLocation:left"> <li data-class="rightpanel" data-button="Next" data-options="tipLocation:left">
<h2>Print</h2> <h2>Right Panel</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>It works with classes, and only on the first visible element with that class.</p>
</li> </li>
<li data-class="btnPrint" data-button="Next" data-options="tipLocation:left"> <li data-class="btnPrint" data-button="Next" data-options="tipLocation:left">
<h2>Print</h2> <h2>Print</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>It works with classes, and only on the first visible element with that class.</p>
</li> </li>
<li data-class="btnStop" data-button="Close" data-options="tipLocation:left"> <li data-class="btnStop" data-button="Next" data-options="tipLocation:left">
<h2>Stop</h2> <h2>Stop</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>It works with classes, and only on the first visible element with that class.</p>
</li> </li>
<li data-id="progressbarCanvasContainer" data-button="Next" data-options="tipLocation:left" data-action="showProgressBar">
<h2>progressguage</h2>
<p>It works with classes, and only on the first visible element with that class.</p>
</li>
<li data-id="thermometerContainer" data-button="Next" data-options="tipLocation:left" data-action="showThermometer">
<h2>Thermometer</h2>
<p>It works with classes, and only on the first visible element with that class.</p>
</li>
<li data-button="Show me" data-action="showMessage">
<h2>Status messages</h2>
<p>Status messages can inform you about the connection between Doodle3D and your 3D printer</p>
</li>
<li data-id="message" data-button="OK" data-options="tipLocation:bottom">
<h2>Status messages</h2>
<p>Status messages can inform you about the connection between Doodle3D and your 3D printer</p>
</li>
<li data-button="Finish">
<h2>That was the tour</h2>
<p>You're now ready to start using Doodle3d!</p>
</li>
<!--<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">-->
<!--<h2>Reminder</h2>-->
<!--<p>You can always find this tour in the info window.</p>-->
<!--</li>-->
</ol> </ol>
<ol id="help_InfoReminder"> <ol id="help_InfoReminder">
@ -49,6 +77,13 @@
</li> </li>
</ol> </ol>
<ol id="help_grandTourFinishedInfoReminder">
<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">
<h2>Reminder</h2>
<p>You can always find this tour in the info window.</p>
</li>
</ol>
<!-- Tip Content --> <!-- Tip Content -->
<!--<ol id="joyrideTour">--> <!--<ol id="joyrideTour">-->