caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to Bootstrap 3

Browse Source
This commit is contained in:
benweet 2013-08-13 01:03:38 +01:00
parent 9b77eafa83
commit 05d92e0808
5 changed files with 110 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
js/core.js
View File

@ -172,7 +172,7 @@ define([
documentPanelElt.show(); documentPanelElt.show();
} }
} }
// Set the preview button visibility // Set the preview button visibility
var previewButtonsElt = undefined; var previewButtonsElt = undefined;
function setPreviewButtonsVisibility(forceHide) { function setPreviewButtonsVisibility(forceHide) {
@ -242,9 +242,11 @@ define([
$(".ui-layout-toggler-south").addClass("btn btn-info").html('<i class="icon-none"></i>'); $(".ui-layout-toggler-south").addClass("btn btn-info").html('<i class="icon-none"></i>');
$(".ui-layout-toggler-east").addClass("btn btn-info").html('<i class="icon-none"></i>'); $(".ui-layout-toggler-east").addClass("btn btn-info").html('<i class="icon-none"></i>');
var northTogglerElt = $(".ui-layout-toggler-north").addClass("btn btn-info").html('<i class="icon-none"></i>'); var northTogglerElt = $(".ui-layout-toggler-north").addClass("btn btn-info").html('<i class="icon-none"></i>');
// We attach the preview buttons to the UI layout resizer in order to have fixed position // We attach the preview buttons to the UI layout resizer in order to
// We also move the north toggler to the east or south resizer as the north resizer is very small // have fixed position
// We also move the north toggler to the east or south resizer as the
// north resizer is very small
previewButtonsElt = $('<div class="extension-preview-buttons">'); previewButtonsElt = $('<div class="extension-preview-buttons">');
if(settings.layoutOrientation == "horizontal") { if(settings.layoutOrientation == "horizontal") {
$('.ui-layout-resizer-north').append(previewButtonsElt); $('.ui-layout-resizer-north').append(previewButtonsElt);
@ -449,52 +451,55 @@ define([
e.stopPropagation(); e.stopPropagation();
}); });
menuPanelElt = $('.menu-panel'); menuPanelElt = $('.menu-panel').collapse({
toggle: false
});
var isMenuPanelShown = false; var isMenuPanelShown = false;
var menuPanelBackdropElt = undefined; var menuPanelBackdropElt = undefined;
menuPanelElt.on('shown.bs.collapse', function(e) { menuPanelElt.on('show.bs.collapse', function(e) {
if(e.target === menuPanelElt[0]) { if(e.target === menuPanelElt[0]) {
isMenuPanelShown = true; isMenuPanelShown = true;
menuPanelBackdropElt = utils.createBackdrop(); menuPanelBackdropElt = utils.createBackdrop('collapse', '.menu-panel');
menuPanelElt.addClass('move-to-front'); menuPanelElt.addClass('move-to-front');
// Register a click listener when menu panel is open
var closePanelElt = menuPanelElt.find('.action-close-panel').add(menuPanelBackdropElt);
closePanelElt.on('click.hide-menu-panel', function(e) {
// Unregister the listener
$('body').off('click.hide-menu-panel');
menuPanelElt.collapse('hide');
isMenuPanelShown = false;
});
} }
}).on('show.bs.collapse', function(){ else {
// Close all open sub-menus when one submenu opens // Close all open sub-menus when one submenu opens
menuPanelElt.find('.in').collapse('hide'); menuPanelElt.find('.in').collapse('hide');
}).on('hidden.bs.collapse', function(e) { }
// Close all open sub-menus when menu panel is closed }).on('hide.bs.collapse', function(e) {
if(e.target === menuPanelElt[0]) { if(e.target === menuPanelElt[0]) {
isMenuPanelShown = false;
menuPanelBackdropElt.remove();
menuPanelElt.removeClass('move-to-front');
}
}).on('hidden.bs.collapse', function(e) {
if(e.target === menuPanelElt[0]) {
// Close all open sub-menus when menu panel is closed
menuPanelElt.find('.in').collapse('hide'); menuPanelElt.find('.in').collapse('hide');
} }
}); });
documentPanelElt = $('.document-panel'); documentPanelElt = $('.document-panel').collapse({
toggle: false
});
var isDocumentPanelShown = false; var isDocumentPanelShown = false;
documentPanelElt.on('shown.bs.collapse', function(e) { var documentPanelBackdropElt = undefined;
documentPanelElt.on('show.bs.collapse', function(e) {
if(e.target === documentPanelElt[0]) { if(e.target === documentPanelElt[0]) {
isDocumentPanelShown = true; isDocumentPanelShown = true;
// Register a click listener when document panel is open documentPanelBackdropElt = utils.createBackdrop('collapse', '.document-panel');
$('body').on('click.hide-document-panel', function(e) { documentPanelElt.addClass('move-to-front');
// If click outside the panel, close the panel and unregister }
// the listener else {
if($(e.target).is('.action-close-panel, .action-close-panel *, :not(.document-panel, .document-panel *)')) { // Close all open sub-menus when one submenu opens
documentPanelElt.collapse('hide'); documentPanelElt.find('.in').collapse('hide');
$('body').off('click.hide-document-panel'); }
isDocumentPanelShown = false; }).on('hide.bs.collapse', function(e) {
} if(e.target === documentPanelElt[0]) {
}); isDocumentPanelShown = false;
documentPanelBackdropElt.remove();
documentPanelElt.removeClass('move-to-front');
} }
}).on('show.bs.collapse', function(){
// Close all open sub-menus when one submenu opens
documentPanelElt.find('.in').collapse('hide');
}).on('hidden.bs.collapse', function(e) { }).on('hidden.bs.collapse', function(e) {
if(e.target === documentPanelElt[0]) { if(e.target === documentPanelElt[0]) {
// Close all open sub-menus when menu panel is closed // Close all open sub-menus when menu panel is closed
@ -503,7 +508,11 @@ define([
}); });
var isModalShown = false; var isModalShown = false;
$('.modal').on('shown.bs.modal', function() { $('.modal').on('show.bs.modal', function() {
// Close panel if open
menuPanelElt.collapse('hide');
documentPanelElt.collapse('hide');
}).on('shown.bs.modal', function() {
// Focus on the first input when modal opens // Focus on the first input when modal opens
isModalShown = true; isModalShown = true;
_.defer(function(elt) { _.defer(function(elt) {

34
js/extensions/documentPanel.js
View File

@ -15,14 +15,28 @@ define([
}; };
var folderEltTmpl = [ var folderEltTmpl = [
'<a href="#" class="list-group-item folder clearfix" data-folder-index="<%= folderDesc.folderIndex %>" data-toggle="collapse" data-target=".document-panel .file-list.<%= id %>">', '<a href="#"',
'<div class="pull-right file-count"><%= _.size(folderDesc.fileList) %></div>', ' class="list-group-item folder clearfix"',
'<i class="icon-folder"></i> <%= folderDesc.name %></a>', ' data-folder-index="<%= folderDesc.folderIndex %>"',
'<div class="file-list collapse <%= id %> clearfix"><%= fileListHtml %></div>' ' data-toggle="collapse"',
' data-target=".document-panel .file-list.<%= id %>">',
' <div class="pull-right file-count">',
' <%= _.size(folderDesc.fileList) %>',
' </div>',
' <i class="icon-folder"></i> <%= folderDesc.name %>',
'</a>',
'<div class="file-list collapse <%= id %> clearfix">',
' <%= fileListHtml %>',
'</div>'
].join(''); ].join('');
var documentEltTmpl = [ var documentEltTmpl = [
'<a href="#" class="list-group-item file action-close-panel<%= fileDesc === selectedFileDesc ? " active" : "" %>" data-file-index="<%= fileDesc.fileIndex %>">', '<a href="#"',
'<%= fileDesc.composeTitle() %></a>', ' class="list-group-item file<%= fileDesc === selectedFileDesc ? " active" : "" %>"',
' data-file-index="<%= fileDesc.fileIndex %>"',
' data-toggle="collapse"',
' data-target=".document-panel">',
' <%= fileDesc.composeTitle() %>',
'</a>',
].join(''); ].join('');
var panelElt = undefined; var panelElt = undefined;
@ -43,7 +57,7 @@ define([
}) + '</li>'; }) + '</li>';
}, '').value(); }, '').value();
documentListHtml = documentListHtml && '<ul class="nav">' + documentListHtml + '</ul>'; documentListHtml = documentListHtml && '<ul class="nav">' + documentListHtml + '</ul>';
// Build directories // Build directories
_.chain(folderList).sortBy(function(folderDesc) { _.chain(folderList).sortBy(function(folderDesc) {
return folderDesc.name.toLowerCase(); return folderDesc.name.toLowerCase();
@ -64,7 +78,7 @@ define([
}); });
documentListElt.innerHTML = documentListHtml; documentListElt.innerHTML = documentListHtml;
// Add click listeners // Add click listeners
_.each(documentListElt.querySelectorAll('.file'), function(fileElt) { _.each(documentListElt.querySelectorAll('.file'), function(fileElt) {
fileElt = $(fileElt); fileElt = $(fileElt);
@ -112,7 +126,7 @@ define([
documentPanel.onReady = function() { documentPanel.onReady = function() {
panelElt = document.querySelector('.document-panel'); panelElt = document.querySelector('.document-panel');
documentListElt = panelElt.querySelector('.list-group'); documentListElt = panelElt.querySelector('.list-group');
// Open current folder before opening // Open current folder before opening
$(panelElt).on('show.bs.collapse', function(e) { $(panelElt).on('show.bs.collapse', function(e) {
var folderDesc = selectedFileDesc.folder; var folderDesc = selectedFileDesc.folder;
@ -122,7 +136,7 @@ define([
}).on('shown.bs.collapse', function(e) { }).on('shown.bs.collapse', function(e) {
// Scroll to the active file // Scroll to the active file
if(e.target === panelElt) { if(e.target === panelElt) {
} }
}); });
}; };

31
js/html/bodyIndex.html
View File

@ -62,12 +62,10 @@
<ul class="nav"> <ul class="nav">
<li><a data-toggle="modal" <li><a data-toggle="modal"
data-target=".modal-import-harddrive-markdown" data-target=".modal-import-harddrive-markdown"
class="action-reset-input action-close-panel" href="#">Import class="action-reset-input" href="#">Import from hard drive</a></li>
from hard drive</a></li>
<li><a data-toggle="modal" <li><a data-toggle="modal"
data-target=".modal-import-harddrive-html" data-target=".modal-import-harddrive-html"
class="action-reset-input action-close-panel" href="#">Convert class="action-reset-input" href="#">Convert HTML to Markdown</a></li>
HTML to Markdown</a></li>
</ul> </ul>
</div> </div>
@ -90,8 +88,9 @@
class="icon-provider-gdrive"></i> Google Drive</a> class="icon-provider-gdrive"></i> Google Drive</a>
<div class="sub-menu collapse collapse-sync-gdrive clearfix"> <div class="sub-menu collapse collapse-sync-gdrive clearfix">
<ul class="nav"> <ul class="nav">
<li><a href="#" class="action-sync-import-gdrive">Import <li><a href="#" class="action-sync-import-gdrive"
from Google Drive</a></li> data-toggle="collapse" data-target=".menu-panel">Import from
Google Drive</a></li>
<li><a href="#" class="action-sync-export-dialog-gdrive">Export <li><a href="#" class="action-sync-export-dialog-gdrive">Export
to Google Drive</a></li> to Google Drive</a></li>
</ul> </ul>
@ -101,14 +100,15 @@
class="icon-provider-dropbox"></i> Dropbox</a> class="icon-provider-dropbox"></i> Dropbox</a>
<div class="sub-menu collapse collapse-sync-dropbox clearfix"> <div class="sub-menu collapse collapse-sync-dropbox clearfix">
<ul class="nav"> <ul class="nav">
<li><a class="action-sync-import-dropbox" href="#">Import <li><a class="action-sync-import-dropbox" href="#"
from Dropbox</a></li> data-toggle="collapse" data-target=".menu-panel">Import from
Dropbox</a></li>
<li><a href="#" class="action-sync-export-dialog-dropbox">Export <li><a href="#" class="action-sync-export-dialog-dropbox">Export
to Dropbox</a></li> to Dropbox</a></li>
</ul> </ul>
</div> </div>
<a href="#" data-toggle="modal" data-target=".modal-manage-sync" <a href="#" data-toggle="modal" data-target=".modal-manage-sync"
class="action-reset-input list-group-item action-close-panel"><i class="action-reset-input list-group-item"><i
class="icon-refresh"></i> Manage synchronization</a> class="icon-refresh"></i> Manage synchronization</a>
</div> </div>
<div class=dropdown-header>PUBLISH</div> <div class=dropdown-header>PUBLISH</div>
@ -120,17 +120,16 @@
</ul> </ul>
</div> </div>
<a href="#" data-toggle="modal" data-target=".modal-manage-publish" <a href="#" data-toggle="modal" data-target=".modal-manage-publish"
class="action-reset-input list-group-item action-close-panel"><i class="action-reset-input list-group-item"><i class="icon-share"></i>
class="icon-share"></i> Manage publication</a> Manage publication</a>
</div> </div>
<ul class="nav"> <ul class="nav">
<li><a href="#" data-toggle="modal" <li><a href="#" data-toggle="modal"
data-target=".modal-settings" data-target=".modal-settings"
class="action-load-settings list-group-item action-close-panel"><i class="action-load-settings list-group-item"><i class="icon-cog"></i>
class="icon-cog"></i> Settings</a></li> Settings</a></li>
<li><a href="#" data-toggle="modal" data-target=".modal-about" <li><a href="#" data-toggle="modal" data-target=".modal-about"
class="list-group-item action-close-panel"><i class="list-group-item"><i class="icon-help-circled"></i> About</a></li>
class="icon-help-circled"></i> About</a></li>
</ul> </ul>
</div> </div>
@ -148,7 +147,7 @@
type="text" class="form-control"></input> type="text" class="form-control"></input>
<div class="input-group-btn"> <div class="input-group-btn">
<a data-toggle="modal" data-target=".modal-document-manager" <a data-toggle="modal" data-target=".modal-document-manager"
class="btn btn-default action-close-panel" title="Manage documents"><i class="btn btn-default" title="Manage documents"><i
class="icon-layers"></i></a> class="icon-layers"></i></a>
</div> </div>
</div> </div>

30
js/publisher.js
View File

@ -99,7 +99,7 @@ define([
// Dequeue a synchronized location // Dequeue a synchronized location
var publishAttributes = publishAttributesList.pop(); var publishAttributes = publishAttributesList.pop();
// Format the content // Format the content
var content = getPublishContent(publishFileDesc, publishAttributes, publishHTML); var content = getPublishContent(publishFileDesc, publishAttributes, publishHTML);
@ -119,7 +119,7 @@ define([
publishLocation(callback, errorFlag || error); publishLocation(callback, errorFlag || error);
}); });
} }
// Get the html from the onPreviewFinished callback // Get the html from the onPreviewFinished callback
var previewHtml = undefined; var previewHtml = undefined;
eventMgr.addListener("onPreviewFinished", function(html) { eventMgr.addListener("onPreviewFinished", function(html) {
@ -222,15 +222,29 @@ define([
localStorage[provider.providerId + ".publishPreferences"] = JSON.stringify(publishPreferences); localStorage[provider.providerId + ".publishPreferences"] = JSON.stringify(publishPreferences);
} }
var initPublishButtonTmpl = [
'<li>',
' <a href="#"',
' class="action-init-publish-<%= provider.providerId %>">',
' <i class="icon-provider-<%= provider.providerId %>"></i> <%= provider.providerName %>',
' </a>',
'</li>'
].join('');
eventMgr.addListener("onReady", function() { eventMgr.addListener("onReady", function() {
// Add every provider // Add every provider in the panel menu
var publishMenu = $('.collapse-publish-on .nav'); var publishMenuElt = document.querySelector('.menu-panel .collapse-publish-on .nav');
var publishMenuHtml = _.reduce(providerMap, function(result, provider) {
return result + _.template(initPublishButtonTmpl, {
provider: provider
});
}, '');
publishMenuElt.innerHTML = publishMenuHtml;
_.each(providerMap, function(provider) { _.each(providerMap, function(provider) {
// Provider's publish button // Click on open publish dialog
publishMenu.append($("<li>").append($('<a href="#" class="action-close-panel"><i class="icon-provider-' + provider.providerId + '"></i> ' + provider.providerName + '</a>').click(function() { $(publishMenuElt.querySelector('.action-init-publish-' + provider.providerId)).click(function() {
initNewLocation(provider); initNewLocation(provider);
}))); });
// Action links (if any) // Click on perform new publication
$(".action-publish-" + provider.providerId).click(function() { $(".action-publish-" + provider.providerId).click(function() {
initNewLocation(provider); initNewLocation(provider);
}); });

6
js/utils.js
View File

@ -179,9 +179,11 @@ define([
}; };
// Create a backdrop and add to the body // Create a backdrop and add to the body
utils.createBackdrop = function() { utils.createBackdrop = function(toggle, target) {
var result = crel('div', { var result = crel('div', {
class: 'modal-backdrop' 'class': 'modal-backdrop',
'data-toggle': toggle,
'data-target': target,
}); });
document.body.appendChild(result); document.body.appendChild(result);
return result; return result;