Stackedit/res/extensions/welcomeTour.js

89 lines
3.6 KiB
JavaScript
Raw Normal View History

2013-09-03 10:37:59 +00:00
define([
"jquery",
"classes/Extension",
"bootstrap-tour"
], function($, Extension) {
var welcomeTour = new Extension("welcomeTour", "Welcome tour", false, true);
welcomeTour.onReady = function() {
var tour = new Tour({
storage: {
getItem: function() {
},
setItem: function() {
},
removeItem: function() {
}
},
onEnd: function(tour) {
localStorage.welcomeTour = "done";
},
template: [
"<div class='popover tour'>",
" <div class='arrow'></div>",
" <h3 class='popover-title'></h3>",
" <div class='popover-content'></div>",
" <nav class='popover-navigation'>",
" <button class='btn btn-primary' data-role='next'>Next</button>",
" <button class='btn btn-default' data-role='end'>Got it!</button>",
" </nav>",
"</div>"
].join('')
});
tour.addSteps([
{
2013-09-03 21:51:39 +00:00
element: ".navbar-inner",
2013-09-12 23:25:25 +00:00
title: "Welcome to StackEdit",
2013-09-03 23:36:42 +00:00
content: "Please click <code>Next</code> to take a quick tour.",
2013-09-03 10:37:59 +00:00
placement: "bottom",
},
{
element: ".navbar .action-create-file",
title: "New document",
content: "Click the <i class='icon-file'></i> <code>New document</code> button to create a new document.",
2013-09-12 23:25:25 +00:00
placement: "bottom",
2013-09-03 10:37:59 +00:00
reflex: true,
},
{
element: ".document-panel .collapse-button",
title: "Toggle document",
content: [
"<p>Click the <i class='icon-folder-open'></i> <code>Select document</code> button to switch to another document.</p>",
"<b>NOTE: </b>Use <code>Ctrl+[</code> and <code>Ctrl+]</code> shortcuts to toggle quickly."
].join(''),
placement: "left",
reflex: true,
},
{
element: ".menu-panel .collapse-button",
title: "Menu",
content: [
"<p>Use the <i class='icon-provider-stackedit'></i> menu to synchronize your document on <i class='icon-provider-gdrive'></i> <code>Google Drive</code> or <i class='icon-provider-dropbox'></i> <code>Dropbox</code>.</p>",
"Use also this menu to publish your document on <i class='icon-provider-github'></i> <code>GitHub</code>, <i class='icon-provider-blogger'></i> <code>Blogger</code>..."
].join(''),
placement: "right",
reflex: true,
},
{
element: "#extension-buttons button:first",
title: "Synchronize/publish",
content: [
"<p>Once imported/exported, use the <i class='icon-refresh'></i> <code>Synchronize</code> button to force the synchronization (this is done automatically every 3 minutes).</p>",
"Use also the <i class='icon-share'></i> <code>Publish</code> button to update your publications."
].join(''),
placement: "bottom",
reflex: true,
},
]);
if(!_.has(localStorage, 'welcomeTour')) {
tour.start();
}
$('.action-welcome-tour').click(function() {
tour.restart();
});
};
return welcomeTour;
});