From 05d92e0808add306ea4e801b06532fb43790e7c0 Mon Sep 17 00:00:00 2001 From: benweet Date: Tue, 13 Aug 2013 01:03:38 +0100 Subject: [PATCH] Upgrade to Bootstrap 3 --- js/core.js | 81 +++++++++++++++++++--------------- js/extensions/documentPanel.js | 34 +++++++++----- js/html/bodyIndex.html | 31 +++++++------ js/publisher.js | 30 +++++++++---- js/utils.js | 6 ++- 5 files changed, 110 insertions(+), 72 deletions(-) diff --git a/js/core.js b/js/core.js index 80f888d3..f55d5296 100644 --- a/js/core.js +++ b/js/core.js @@ -172,7 +172,7 @@ define([ documentPanelElt.show(); } } - + // Set the preview button visibility var previewButtonsElt = undefined; function setPreviewButtonsVisibility(forceHide) { @@ -242,9 +242,11 @@ define([ $(".ui-layout-toggler-south").addClass("btn btn-info").html(''); $(".ui-layout-toggler-east").addClass("btn btn-info").html(''); var northTogglerElt = $(".ui-layout-toggler-north").addClass("btn btn-info").html(''); - - // We attach the preview buttons to the UI layout resizer in order to have fixed position - // We also move the north toggler to the east or south resizer as the north resizer is very small + + // We attach the preview buttons to the UI layout resizer in order to + // have fixed position + // We also move the north toggler to the east or south resizer as the + // north resizer is very small previewButtonsElt = $('
'); if(settings.layoutOrientation == "horizontal") { $('.ui-layout-resizer-north').append(previewButtonsElt); @@ -449,52 +451,55 @@ define([ e.stopPropagation(); }); - menuPanelElt = $('.menu-panel'); + menuPanelElt = $('.menu-panel').collapse({ + toggle: false + }); var isMenuPanelShown = false; var menuPanelBackdropElt = undefined; - menuPanelElt.on('shown.bs.collapse', function(e) { + menuPanelElt.on('show.bs.collapse', function(e) { if(e.target === menuPanelElt[0]) { isMenuPanelShown = true; - menuPanelBackdropElt = utils.createBackdrop(); + menuPanelBackdropElt = utils.createBackdrop('collapse', '.menu-panel'); 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(){ - // Close all open sub-menus when one submenu opens - menuPanelElt.find('.in').collapse('hide'); - }).on('hidden.bs.collapse', function(e) { - // Close all open sub-menus when menu panel is closed + else { + // Close all open sub-menus when one submenu opens + menuPanelElt.find('.in').collapse('hide'); + } + }).on('hide.bs.collapse', function(e) { 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'); } }); - documentPanelElt = $('.document-panel'); + documentPanelElt = $('.document-panel').collapse({ + toggle: 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]) { isDocumentPanelShown = true; - // Register a click listener when document panel is open - $('body').on('click.hide-document-panel', function(e) { - // If click outside the panel, close the panel and unregister - // the listener - if($(e.target).is('.action-close-panel, .action-close-panel *, :not(.document-panel, .document-panel *)')) { - documentPanelElt.collapse('hide'); - $('body').off('click.hide-document-panel'); - isDocumentPanelShown = false; - } - }); + documentPanelBackdropElt = utils.createBackdrop('collapse', '.document-panel'); + documentPanelElt.addClass('move-to-front'); + } + else { + // Close all open sub-menus when one submenu opens + documentPanelElt.find('.in').collapse('hide'); + } + }).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) { if(e.target === documentPanelElt[0]) { // Close all open sub-menus when menu panel is closed @@ -503,7 +508,11 @@ define([ }); 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 isModalShown = true; _.defer(function(elt) { diff --git a/js/extensions/documentPanel.js b/js/extensions/documentPanel.js index b76c393e..75e7ea3b 100644 --- a/js/extensions/documentPanel.js +++ b/js/extensions/documentPanel.js @@ -15,14 +15,28 @@ define([ }; var folderEltTmpl = [ - '', - '
<%= _.size(folderDesc.fileList) %>
', - ' <%= folderDesc.name %>', - '
<%= fileListHtml %>
' + '', + '
', + ' <%= _.size(folderDesc.fileList) %>', + '
', + ' <%= folderDesc.name %>', + '', + '
', + ' <%= fileListHtml %>', + '
' ].join(''); var documentEltTmpl = [ - '" data-file-index="<%= fileDesc.fileIndex %>">', - '<%= fileDesc.composeTitle() %>', + '"', + ' data-file-index="<%= fileDesc.fileIndex %>"', + ' data-toggle="collapse"', + ' data-target=".document-panel">', + ' <%= fileDesc.composeTitle() %>', + '', ].join(''); var panelElt = undefined; @@ -43,7 +57,7 @@ define([ }) + ''; }, '').value(); documentListHtml = documentListHtml && ''; - + // Build directories _.chain(folderList).sortBy(function(folderDesc) { return folderDesc.name.toLowerCase(); @@ -64,7 +78,7 @@ define([ }); documentListElt.innerHTML = documentListHtml; - + // Add click listeners _.each(documentListElt.querySelectorAll('.file'), function(fileElt) { fileElt = $(fileElt); @@ -112,7 +126,7 @@ define([ documentPanel.onReady = function() { panelElt = document.querySelector('.document-panel'); documentListElt = panelElt.querySelector('.list-group'); - + // Open current folder before opening $(panelElt).on('show.bs.collapse', function(e) { var folderDesc = selectedFileDesc.folder; @@ -122,7 +136,7 @@ define([ }).on('shown.bs.collapse', function(e) { // Scroll to the active file if(e.target === panelElt) { - } + } }); }; diff --git a/js/html/bodyIndex.html b/js/html/bodyIndex.html index 9a6d40d4..7ac188a5 100644 --- a/js/html/bodyIndex.html +++ b/js/html/bodyIndex.html @@ -62,12 +62,10 @@
@@ -90,8 +88,9 @@ class="icon-provider-gdrive"> Google Drive
@@ -101,14 +100,15 @@ class="icon-provider-dropbox"> Dropbox
Manage synchronization
PUBLISH
@@ -120,17 +120,16 @@ Manage publication + class="action-reset-input list-group-item"> + Manage publication @@ -148,7 +147,7 @@ type="text" class="form-control">
diff --git a/js/publisher.js b/js/publisher.js index 93b51abf..57c65d46 100644 --- a/js/publisher.js +++ b/js/publisher.js @@ -99,7 +99,7 @@ define([ // Dequeue a synchronized location var publishAttributes = publishAttributesList.pop(); - + // Format the content var content = getPublishContent(publishFileDesc, publishAttributes, publishHTML); @@ -119,7 +119,7 @@ define([ publishLocation(callback, errorFlag || error); }); } - + // Get the html from the onPreviewFinished callback var previewHtml = undefined; eventMgr.addListener("onPreviewFinished", function(html) { @@ -222,15 +222,29 @@ define([ localStorage[provider.providerId + ".publishPreferences"] = JSON.stringify(publishPreferences); } + var initPublishButtonTmpl = [ + '
  • ', + ' ', + ' <%= provider.providerName %>', + ' ', + '
    • ' + ].join(''); eventMgr.addListener("onReady", function() { - // Add every provider - var publishMenu = $('.collapse-publish-on .nav'); + // Add every provider in the panel menu + 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) { - // Provider's publish button - publishMenu.append($("
  • ").append($(' ' + provider.providerName + '').click(function() { + // Click on open publish dialog + $(publishMenuElt.querySelector('.action-init-publish-' + provider.providerId)).click(function() { initNewLocation(provider); - }))); - // Action links (if any) + }); + // Click on perform new publication $(".action-publish-" + provider.providerId).click(function() { initNewLocation(provider); }); diff --git a/js/utils.js b/js/utils.js index eec55749..3e26b78a 100644 --- a/js/utils.js +++ b/js/utils.js @@ -179,9 +179,11 @@ define([ }; // Create a backdrop and add to the body - utils.createBackdrop = function() { + utils.createBackdrop = function(toggle, target) { var result = crel('div', { - class: 'modal-backdrop' + 'class': 'modal-backdrop', + 'data-toggle': toggle, + 'data-target': target, }); document.body.appendChild(result); return result;