Stackedit/public/res/extensions/welcomeTour.js

130 lines
5.8 KiB
JavaScript
Raw Normal View History

2013-09-03 10:37:59 +00:00
define([
2013-10-19 16:37:16 +00:00
'underscore',
'jquery',
2013-11-05 23:03:38 +00:00
'storage',
2013-10-19 16:37:16 +00:00
'classes/Extension',
'bootstrap-tour'
2013-11-07 23:10:38 +00:00
], function(_, $, storage, Extension, Tour) {
2013-09-03 10:37:59 +00:00
2013-10-19 16:37:16 +00:00
var welcomeTour = new Extension('welcomeTour', 'Welcome tour', false, true);
2014-02-02 21:00:05 +00:00
var eventMgr;
welcomeTour.onEventMgrCreated = function(eventMgrParam) {
eventMgr = eventMgrParam;
};
2013-09-03 10:37:59 +00:00
welcomeTour.onReady = function() {
var tour = new Tour({
2013-10-19 16:37:16 +00:00
keyboard: false,
2013-09-03 10:37:59 +00:00
storage: {
getItem: function() {
},
setItem: function() {
},
removeItem: function() {
}
},
2013-11-07 23:10:38 +00:00
onEnd: function() {
2013-11-05 23:03:38 +00:00
storage.welcomeTour = 'done';
var tooltip = $('.button-markdown-syntax').parent().tooltip({
html: true,
container: $('.extension-preview-buttons'),
placement: 'bottom',
trigger: 'manual',
title: 'Need help with Markdown syntax?'
}).tooltip('show').addClass('info-tooltip');
tooltip.one('click', function() {
tooltip.tooltip('hide').removeClass('info-tooltip');
});
setTimeout(function() {
tooltip.tooltip('hide').removeClass('info-tooltip');
2014-01-13 01:39:28 +00:00
}, 15000);
2013-09-03 10:37:59 +00:00
},
template: [
2013-10-19 16:37:16 +00:00
'<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(""),
2013-09-03 10:37:59 +00:00
});
tour.addSteps([
{
2013-10-19 16:37:16 +00:00
element: '.navbar-inner',
title: 'Welcome to StackEdit!',
content: [
'<i class="icon-lock pull-left"></i>',
2013-10-20 14:00:08 +00:00
'<p><strong>You are using the new secured platform.</strong> If you want to recover your documents from the old platform <a target="_blank" href="http://benweet.github.io/stackedit/recovery.html">click here</a>.</p>',
2013-10-19 16:37:16 +00:00
'Please click <code>Next</code> to take a quick tour.'
].join(""),
placement: 'bottom',
2013-09-03 10:37:59 +00:00
},
{
2013-12-01 15:43:46 +00:00
element: '.navbar-inner > .nav .action-create-file, .navbar .right-buttons-dropdown > .nav > .btn:not(:hidden)',
2013-10-19 16:37:16 +00:00
title: 'New document',
content: 'Click the <i class="icon-file"></i> <code>New document</code> button to create a new document.',
placement: 'left',
2013-09-03 10:37:59 +00:00
reflex: true,
},
{
2013-10-19 16:37:16 +00:00
element: '.document-panel .collapse-button',
title: 'Toggle document',
2013-09-03 10:37:59 +00:00
content: [
2013-10-19 16:37:16 +00:00
'<p>Click the <i class="icon-folder-open"></i> <code>Select document</code> button to switch to another document.</p>',
2013-11-30 01:40:26 +00:00
'Use <code>Ctrl+[</code> and <code>Ctrl+]</code> shortcuts to toggle quickly.'
2013-10-19 16:37:16 +00:00
].join(""),
placement: 'left',
2013-09-03 10:37:59 +00:00
reflex: true,
},
{
2013-10-19 16:37:16 +00:00
element: '.menu-panel .collapse-button',
title: 'Menu',
2013-09-03 10:37:59 +00:00
content: [
2013-10-19 16:37:16 +00:00
'<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',
2013-09-03 10:37:59 +00:00
reflex: true,
},
{
2013-12-01 15:43:46 +00:00
element: '.navbar-inner > .nav .button-synchronize, .navbar .right-buttons-dropdown > .nav > .btn:not(:hidden)',
2013-10-19 16:37:16 +00:00
title: 'Synchronize',
2013-11-30 01:40:26 +00:00
content: '<p>Once imported or exported, use the <i class="icon-refresh"></i> <code>Synchronize</code> button to force the synchronization</p>This is done automatically every 3 minutes.',
2013-12-01 15:43:46 +00:00
placement: 'left',
2013-10-06 14:34:40 +00:00
reflex: true,
},
{
2013-12-01 15:43:46 +00:00
element: '.navbar-inner > .nav .button-publish, .navbar .right-buttons-dropdown > .nav > .btn:not(:hidden)',
2013-11-30 01:40:26 +00:00
title: 'Update publication',
content: 'Once published, use the <i class="icon-share"></i> <code>Publish</code> button to update the publication.',
2013-12-01 15:43:46 +00:00
placement: 'left',
2013-09-03 10:37:59 +00:00
reflex: true,
},
2013-11-20 21:47:18 +00:00
{
element: '.navbar-inner',
title: 'Happy StackWriting!',
content: [
2014-02-02 21:00:05 +00:00
'<p>Enjoy, and don\'t forget to rate <b>StackEdit</b> on <a target="_blank" href="https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg/reviews">Chrome Web Store</a>...</p>',
2014-02-02 22:00:28 +00:00
'<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://stackedit.io" data-text="Great #markdown editor!" data-via="stackedit" data-size="large"></a>',
2013-11-20 21:47:18 +00:00
].join(""),
placement: 'bottom',
2014-02-02 21:00:05 +00:00
onShown: function() {
eventMgr.onTweet();
}
2013-11-20 21:47:18 +00:00
},
2013-09-03 10:37:59 +00:00
]);
2013-11-05 23:03:38 +00:00
if(!_.has(storage, 'welcomeTour')) {
2013-09-03 10:37:59 +00:00
tour.start();
}
$('.action-welcome-tour').click(function() {
tour.restart();
});
};
return welcomeTour;
});