Upgrade to Bootstrap 3

js/extensions/documentManager.js

@@ -108,8 +108,6 @@ define([
             delete folderList[folderDesc.folderIndex];
         });
         eventMgr.onFoldersChanged();
-
-        refreshManager();
     }
 
     var liMoveElt = undefined;
@@ -232,11 +230,10 @@ define([
                 var fileDesc = fileSystem[parentElt.data('fileIndex')];
                 if(name && folderDesc && name != folderDesc.name) {
                     folderDesc.name = name;
-                    refreshManager();
+                    eventMgr.onFoldersChanged();
                 }
                 else if(name && fileDesc && name != fileDesc.title) {
                     fileDesc.title = name;
-                    refreshManager();
                     eventMgr.onTitleChanged(fileDesc);
                 }
                 else {
@@ -286,6 +283,7 @@ define([
     documentManager.onSyncRemoved = refreshManager;
     documentManager.onNewPublishSuccess = refreshManager;
     documentManager.onPublishRemoved = refreshManager;
+    documentManager.onFoldersChanged = refreshManager;
 
     documentManager.onReady = function() {
         modalElt = document.querySelector('.modal-document-manager');
@@ -318,12 +316,11 @@ define([
             // Add the index to the folder list
             utils.appendIndexToArray("folder.list", folderIndex);
             folderList[folderIndex] = folderDesc;
-
+            eventMgr.onFoldersChanged();
-            refreshManager();
 
             // Edit the name when folder has just been created
             var renameButtonElt = $(modalElt.querySelector('[data-folder-index="' + folderIndex + '"] .button-rename')).click();
-            modalElt.scrollTop = modalElt.scrollTop + renameButtonElt.offset().top - 50;
+            modalElt.scrollTop += renameButtonElt.offset().top - 50;
         });
 
         // Selection dropdown menu actions
@@ -390,8 +387,6 @@ define([
                     });
                     eventMgr.onFoldersChanged();
 
-                    refreshManager();
-
                     $(modalElt.querySelectorAll('.document-list')).removeClass('hide');
                     $(modalElt.querySelectorAll('.choose-folder, .select-folder-list')).addClass('hide');
                 });

js/extensions/documentPanel.js

@@ -41,6 +41,9 @@ define([
 
     var panelElt = undefined;
     var documentListElt = undefined;
+    var $documentListElt = undefined;
+    var documentListFilteredElt = undefined;
+    var $documentListFilteredElt = undefined;
     var refreshPanel = function() {
 
         // List orphan documents
@@ -78,7 +81,19 @@ define([
         });
 
         documentListElt.innerHTML = documentListHtml;
+        
+        // Create filtered list
+        var documentListFilteredHtml = _.chain(fileSystem).sortBy(function(fileDesc) {
+            return fileDesc.title.toLowerCase();
+        }).reduce(function(result, fileDesc) {
+            return result + '<li>' + _.template(documentEltTmpl, {
+                fileDesc: fileDesc,
+            }) + '</li>';
+        }, '').value();
+        documentListFilteredHtml = '<ul class="nav">' + documentListFilteredHtml + '</ul>';
 
+        documentListFilteredElt.innerHTML = documentListFilteredHtml;
+        
         // Add click listeners
         _.each(documentListElt.querySelectorAll('.file'), function(fileElt) {
             fileElt = $(fileElt);
@@ -107,37 +122,73 @@ define([
     documentPanel.onFoldersChanged = refreshPanel;
 
     // Filter for search input in file selector
-    function filterFileSelector(filter) {
+    var panelContentElt = undefined;
-        var liList = $(".file-selector > li");
+    var previousFilterValue = '';
-        liList.show();
+    function filterFiles(filterValue) {
-        if(filter) {
+        if(filterValue == previousFilterValue) {
-            var words = filter.toLowerCase().split(/\s+/);
+            return;
-            liList.each(function() {
-                var fileTitle = $(this).text().toLowerCase();
-                if(_.some(words, function(word) {
-                    return fileTitle.indexOf(word) === -1;
-                })) {
-                    $(this).hide();
-                }
-            });
         }
+        previousFilterValue = filterValue;
+        
+        // Scroll to top
+        panelContentElt.scrollTop = 0;
+
+        if(!filterValue) {
+            $documentListFilteredElt.addClass('hide');
+            $documentListElt.removeClass('hide');
+            return;
+        }
+        var wordList = filterValue.toLowerCase().split(/\s+/);
+        _.each(documentListFilteredElt.querySelectorAll('.file'), function(fileElt) {
+            var $fileElt = $(fileElt);
+            var fileTitle = $fileElt.text().toLowerCase();
+            $fileElt.toggle(!_.some(wordList, function(word) {
+                return fileTitle.indexOf(word) === -1;
+            }));
+        });
+        $documentListFilteredElt.removeClass('hide');
+        $documentListElt.addClass('hide');
     }
 
     documentPanel.onReady = function() {
         panelElt = document.querySelector('.document-panel');
-        documentListElt = panelElt.querySelector('.list-group');
+        panelContentElt = panelElt.querySelector('.panel-content');
-
+        documentListElt = panelElt.querySelector('.document-list');
+        $documentListElt = $(documentListElt);
+        documentListFilteredElt = panelElt.querySelector('.document-list-filtered');
+        $documentListFilteredElt = $(documentListFilteredElt);
+        
         // Open current folder before opening
         $(panelElt).on('show.bs.collapse', function(e) {
-            var folderDesc = selectedFileDesc.folder;
+            if(e.target === panelElt) {
-            if(e.target === panelElt && folderDesc !== undefined) {
+                var folderDesc = selectedFileDesc.folder;
-                $(panelElt.querySelector('.file-list.' + folderDesc.folderIndex.replace('.', ''))).collapse('show');
+                if(folderDesc !== undefined) {
+                    $(panelElt.querySelector('.file-list.' + folderDesc.folderIndex.replace('.', ''))).collapse('show');
+                }
             }
         }).on('shown.bs.collapse', function(e) {
-            // Scroll to the active file
             if(e.target === panelElt) {
+                // Unset the filter
+                $filterInputElt.val('');
+                filterFiles('');
+                
+                // Scroll to the active file
+                panelContentElt.scrollTop += documentListElt.querySelector('.file.active').getBoundingClientRect().top - 100;
             }
         });
+        
+        // Search bar input change
+        var $filterInputElt = $(panelElt.querySelector('.search-bar .form-control'));
+        $filterInputElt.bind("propertychange keyup input paste", function() {
+            filterFiles($filterInputElt.val());
+        });
+        
+        // Clear button
+        $(panelElt.querySelector('.search-bar .close')).click(function() {
+            $filterInputElt.val('');
+            filterFiles('');
+            $filterInputElt.focus();
+        });
     };
 
     return documentPanel;

js/html/bodyIndex.html

@@ -141,17 +141,21 @@
 		data-target=".document-panel" title="Select document">
 		<i class="icon-folder-open"></i> <i class="icon-right-dir"></i>
 	</button>
-	<div class="panel-content">
+	<div class="search-bar clearfix">
 		<div class="input-group">
 			<span class="input-group-addon"><i class="icon-search"></i></span><input
 				type="text" class="form-control"></input>
+				<button type="button" class="close" title="clear">&times;</button>
 			<div class="input-group-btn">
 				<a data-toggle="modal" data-target=".modal-document-manager"
 					class="btn btn-default" title="Manage documents"><i
 					class="icon-layers"></i></a>
 			</div>
 		</div>
+	</div>
+	<div class="panel-content">
 		<div class="list-group document-list"></div>
+		<div class="list-group document-list-filtered hide"></div>
 	</div>
 </div>
 

js/styles/default.less

@@ -5,7 +5,7 @@
 @text-light: #888;
 @error-border: #ff8661;
 @menu-panel-width: 280px;
-@document-panel-width: 330px;
+@document-panel-width: 350px;
 @panel-bg: @bg-navbar-hover;
 @folder-color: #555;
 @transparent: fade(#000, 0%);
@@ -270,7 +270,6 @@ body {
 // Common style 
 .menu-panel, .document-panel {
 	display: block;
-	background-color: @panel-bg;
 	position: absolute;
 	height: 100%;
 	z-index: 10;
@@ -281,8 +280,6 @@ body {
     	font-size: 18px;
 	}
 	.panel-content {
-		padding-top: 6px;
-		padding-bottom: 25px;
 		overflow: auto;
 		height: 100%;
 		a > i {
@@ -293,6 +290,7 @@ body {
 }
 
 .menu-panel {
+	background-color: @panel-bg;
 	width: @menu-panel-width !important;
 	margin-left: (-@menu-panel-width - 32);
 	-webkit-transition: margin-left 0.35s ease;
@@ -313,6 +311,8 @@ body {
 		z-index: -1;
 	}
 	.panel-content {
+		padding-top: 6px;
+		padding-bottom: 25px;
 		border-right: 5px solid @preview-bg-light;
 		.nav {
 			margin-bottom: 20px;
@@ -321,6 +321,7 @@ body {
 }
 
 .document-panel {
+	background-color: @list-group-bg;
 	right: 0;
 	width: @document-panel-width !important;
 	margin-right: (-@document-panel-width - 32);
@@ -349,11 +350,27 @@ body {
 		.icon-layers {
 			font-size: 135%;
 		}	
-		.input-group {
-			background-color: @list-group-bg;
-			padding: 15px 5px 15px 20px;
-		}		
 	}
+	.search-bar {
+		position: absolute;
+		background-color: @panel-bg;
+		margin: -10px 25px 0;
+		padding: 20px 5px 10px 20px;
+		z-index: 3;
+		border: 1px solid #e8e8e8;
+		border-top: 0;
+		border-radius: 6px;
+		.form-control {
+			padding: 8px 30px 8px 12px;
+		}
+		.close {
+		    position: absolute;
+		    line-height: 10px;
+		    margin-left: -30px;
+		    margin-top: 5px;
+		    padding: 8px;			
+		}
+	}		
 	.list-group-item {
 		margin: 0;
 	}
@@ -363,10 +380,15 @@ body {
 		font-size: 15px;
 		border-bottom-color: @modal-content-separator-color;
 	}
-	.list-group .nav {
+	.list-group {
-		border: 0;
+		padding-top: 70px;
-		margin: 0 20px 20px;
+		padding-bottom: 30px;
-	}
+		margin: 0;
+		.nav {
+			border: 0;
+			margin: 0 20px 20px;
+		}		
+	} 
 }
 
 // Dropdown document selector