Upgrade to Bootstrap 3

2013-08-14 00:30:50 +01:00 · 2013-08-14 00:30:50 +01:00 · 902f857c4e
commit 902f857c4e
parent 05d92e0808
4 changed files with 113 additions and 41 deletions
--- a/js/extensions/documentManager.js
+++ b/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;
-
-            refreshManager();
+            eventMgr.onFoldersChanged();

            // 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');
                });
--- a/js/extensions/documentPanel.js
+++ b/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
@ -79,6 +82,18 @@ 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,36 +122,72 @@ define([
    documentPanel.onFoldersChanged = refreshPanel;

    // Filter for search input in file selector
-    function filterFileSelector(filter) {
-        var liList = $(".file-selector > li");
-        liList.show();
-        if(filter) {
-            var words = filter.toLowerCase().split(/\s+/);
-            liList.each(function() {
-                var fileTitle = $(this).text().toLowerCase();
-                if(_.some(words, function(word) {
+    var panelContentElt = undefined;
+    var previousFilterValue = '';
+    function filterFiles(filterValue) {
+        if(filterValue == previousFilterValue) {
+            return;
+        }
+        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;
-                })) {
-                    $(this).hide();
-                }
+            }));
        });
-        }
+        $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) {
+            if(e.target === panelElt) {
                var folderDesc = selectedFileDesc.folder;
-            if(e.target === panelElt && folderDesc !== undefined) {
+                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) {
            }
+        }).on('shown.bs.collapse', function(e) {
+            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();
        });
    };

--- a/js/html/bodyIndex.html
+++ b/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>

--- a/js/styles/default.less
+++ b/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,9 +350,25 @@ 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 {
@ -363,10 +380,15 @@ body {
 		font-size: 15px;
 		border-bottom-color: @modal-content-separator-color;
 	}
-	.list-group .nav {
+	.list-group {
+		padding-top: 70px;
+		padding-bottom: 30px;
+		margin: 0;
+		.nav {
 			border: 0;
 			margin: 0 20px 20px;
 		}		
+	} 
 }

 // Dropdown document selector