Upgrade to Bootstrap 3

js/core.js

@@ -243,8 +243,10 @@ define([
         $(".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>');
 
-        // 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">');
         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(){
+            else {
                 // 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
+        }).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
+                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
-                    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;
             }
-                });
+            else {
-            }
-        }).on('show.bs.collapse', function(){
                 // 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('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) {

js/extensions/documentPanel.js

@@ -15,14 +15,28 @@ define([
     };
 
     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('');
     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('');
 
     var panelElt = undefined;

js/html/bodyIndex.html

@@ -62,12 +62,10 @@
 				<ul class="nav">
 					<li><a data-toggle="modal"
 						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"
 						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>
 			</div>
 
@@ -90,8 +88,9 @@
 				class="icon-provider-gdrive"></i> Google Drive</a>
 			<div class="sub-menu collapse collapse-sync-gdrive clearfix">
 				<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
 							to Google Drive</a></li>
 				</ul>
@@ -101,14 +100,15 @@
 				class="icon-provider-dropbox"></i> Dropbox</a>
 			<div class="sub-menu collapse collapse-sync-dropbox clearfix">
 				<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
 							to Dropbox</a></li>
 				</ul>
 			</div>
 			<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>
 		</div>
 		<div class=dropdown-header>PUBLISH</div>
@@ -120,17 +120,16 @@
 				</ul>
 			</div>
 			<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>
 		<ul class="nav">
 			<li><a href="#" data-toggle="modal"
 				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"
-				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>
 
 	</div>
@@ -148,7 +147,7 @@
 				type="text" class="form-control"></input>
 			<div class="input-group-btn">
 				<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>
 			</div>
 		</div>

js/publisher.js

@@ -222,15 +222,29 @@ define([
         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() {
-        // 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) {
-            // 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);
-            })));
+            });
-            // Action links (if any)
+            // Click on perform new publication
             $(".action-publish-" + provider.providerId).click(function() {
                 initNewLocation(provider);
             });

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;