This repository has been archived by the owner on Feb 17, 2021. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
change to utils.removeClasses, changed callback naming convention
- Loading branch information
Gordon Koo
committed
Aug 1, 2012
1 parent
8ba4005
commit 1ec5eea
Showing
3 changed files
with
158 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,107 +1,108 @@ | ||
| var tour = { | ||
| id: 'hello-hopscotch', | ||
| steps: [ | ||
| { | ||
| title: 'Welcome to the Hopscotch Demo Page!', | ||
| content: 'Hey there! Welcome to the Hopscotch Demo Page! Please excuse our dust; this is still a work in progress. To proceed, click the next button below. (And as you do, watch the title of the page turn red!!!)', | ||
| targetId: 'subheading', | ||
| orientation: 'bottom', | ||
| arrowOffset: 30, | ||
| nextCallback: function() { | ||
| document.getElementById('pageTitle').style.color = '#f00'; | ||
| } | ||
| }, | ||
| { | ||
| title: 'Debug controls', | ||
| content: 'Here are the debug controls. They\'re pretty self-explanatory: start a tour, end a tour, clear the tour cookie (if you want the tour to forget what step you are on).', | ||
| targetId: 'debug', | ||
| orientation: 'left', | ||
| width: 320, | ||
| height: 480, | ||
| prevCallback: function() { | ||
| document.getElementById('pageTitle').style.color = '#000'; | ||
| } | ||
| }, | ||
| { | ||
| title: 'Mission district', | ||
| content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!', | ||
| targetId: 'mission', | ||
| orientation: 'top', | ||
| xOffset: 100, | ||
| arrowOffset: 100 | ||
| }, | ||
| { | ||
| title: 'Multi-page test', | ||
| content: 'Are you ready? We\'re going to try hopping to another page and then back!!! Where we\'re going, we won\'t need roads... (Please click this link.)', | ||
| targetId: 'secpagelink', | ||
| orientation: 'bottom', | ||
| showNextButton: false, | ||
| multiPage: true | ||
| }, | ||
| { | ||
| title: 'Polar bears', | ||
| content: 'We made it!! Polar bears are very interesting creatures.', | ||
| targetId: 'polarbears', | ||
| orientation: 'right', | ||
| showPrevButton: false | ||
| }, | ||
| { | ||
| title: 'Returning to the first page', | ||
| content: 'Time to go back home... Please click this link to return to the first page.', | ||
| targetId: 'firstpagelink', | ||
| orientation: 'bottom', | ||
| showNextButton: false, | ||
| showPrevButton: false, | ||
| multiPage: true // this indicates that next step will be on a different page | ||
| }, | ||
| { | ||
| title: 'Cool wave', | ||
| content: 'This is a colorful wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.', | ||
| targetId: 'wave', | ||
| orientation: 'bottom', | ||
| width: 500, | ||
| xOffset: -50, | ||
| arrowOffset: 400, | ||
| showPrevButton: false | ||
| }, | ||
| { | ||
| title: 'Python decorator', | ||
| content: 'Whoa, did you notice that the page just scrolled? If you didn\'t, you aren\'t very observant. (Or you have a very tall monitor)', | ||
| targetId: 'python', | ||
| orientation: 'top', | ||
| xOffset: 200 | ||
| } | ||
| ], | ||
| animate: false, | ||
| //smoothScroll: false, | ||
| //showCloseButton: false, | ||
| showPrevButton: true, | ||
| showNextButton: true, | ||
| arrowWidth: 20, | ||
| scrollDuration: 500, | ||
| allNextCallback: function(step, idx) { | ||
| var newLi, | ||
| list = document.getElementById('my-list'); | ||
| if (list) { | ||
| newLi = document.createElement('li'); | ||
| newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)'; | ||
| list.appendChild(newLi); | ||
| } | ||
| }, | ||
| /* to be implemented: | ||
| doneCallback: function() { | ||
| }, | ||
| */ | ||
| i18n: { | ||
| nextBtn: 'Forward', | ||
| prevBtn: 'Backward', | ||
| stepNums: [ | ||
| '一', | ||
| '二', | ||
| '三', | ||
| '四', | ||
| '五', | ||
| '六' | ||
| ] | ||
| id: 'hello-hopscotch', | ||
| steps: [ | ||
| { | ||
| title: 'Welcome to the Hopscotch Demo Page!', | ||
| content: 'Hey there! Welcome to the Hopscotch Demo Page! Please excuse our dust; this is still a work in progress. To proceed, click the next button below. (And as you do, watch the title of the page turn red!!!)', | ||
| targetId: 'subheading', | ||
| orientation: 'bottom', | ||
| arrowOffset: 30, | ||
| onNext: function() { | ||
| document.getElementById('pageTitle').style.color = '#f00'; | ||
| } | ||
| }; | ||
| }, | ||
| { | ||
| title: 'Debug controls', | ||
| content: 'Here are the debug controls. They\'re pretty self-explanatory: start a tour, end a tour, clear the tour cookie (if you want the tour to forget what step you are on).', | ||
| targetId: 'debug', | ||
| orientation: 'left', | ||
| width: 320, | ||
| height: 480, | ||
| onPrev: function() { | ||
| document.getElementById('pageTitle').style.color = '#000'; | ||
| } | ||
| }, | ||
| { | ||
| title: 'Mission district', | ||
| content: 'Some sort of sound heat map in the mission? Did you notice that this bubble isn\'t completely aligned with this image? That\'s because I\'m using xOffset and yOffset options, which are available if you need to make slight positioning adjustments! Hopscotch has never been more fun!', | ||
| targetId: 'mission', | ||
| orientation: 'top', | ||
| xOffset: 100, | ||
| arrowOffset: 100 | ||
| }, | ||
| { | ||
| title: 'Multi-page test', | ||
| content: 'Are you ready? We\'re going to try hopping to another page and then back!!! Where we\'re going, we won\'t need roads... (Please click this link.)', | ||
| targetId: 'secpagelink', | ||
| orientation: 'bottom', | ||
| showNextButton: false, | ||
| multiPage: true | ||
| }, | ||
| { | ||
| title: 'Polar bears', | ||
| content: 'We made it!! Polar bears are very interesting creatures.', | ||
| targetId: 'polarbears', | ||
| orientation: 'right', | ||
| showPrevButton: false | ||
| }, | ||
| { | ||
| title: 'Returning to the first page', | ||
| content: 'Time to go back home... Please click this link to return to the first page.', | ||
| targetId: 'firstpagelink', | ||
| orientation: 'bottom', | ||
| showNextButton: false, | ||
| showPrevButton: false, | ||
| multiPage: true // this indicates that next step will be on a different page | ||
| }, | ||
| { | ||
| title: 'Cool wave', | ||
| content: 'This is a colorful wave. Here is the the <a href="http://imgur.com/s632o" target="_new">page</a> where I found it.', | ||
| targetId: 'wave', | ||
| orientation: 'bottom', | ||
| width: 500, | ||
| xOffset: -50, | ||
| arrowOffset: 400, | ||
| showPrevButton: false | ||
| }, | ||
| { | ||
| title: 'Python decorator', | ||
| content: 'Whoa, did you notice that the page just scrolled? If you didn\'t, you aren\'t very observant. (Or you have a very tall monitor)', | ||
| targetId: 'python', | ||
| orientation: 'top', | ||
| xOffset: 200 | ||
| } | ||
| ], | ||
| animate: false, | ||
| //smoothScroll: false, | ||
| //showCloseButton: false, | ||
| showPrevButton: true, | ||
| showNextButton: true, | ||
| arrowWidth: 20, | ||
| scrollDuration: 500, | ||
| cookieName: 'li_hs', | ||
| onNext: function(step, idx) { | ||
| var newLi, | ||
| list = document.getElementById('my-list'); | ||
| if (list) { | ||
| newLi = document.createElement('li'); | ||
| newLi.innerHTML = 'going from step ' + (idx + 1) + ' to step ' + (idx+2) + '. (can use this callback for tracking)'; | ||
| list.appendChild(newLi); | ||
| } | ||
| }, | ||
| /* to be implemented: | ||
| onDone: function() { | ||
| }, | ||
| */ | ||
| i18n: { | ||
| nextBtn: 'Forward', | ||
| prevBtn: 'Backward', | ||
| stepNums: [ | ||
| '一', | ||
| '二', | ||
| '三', | ||
| '四', | ||
| '五', | ||
| '六' | ||
| ] | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters