Stackedit/public/res/extensions/documentPanel.js

189 lines
7.0 KiB
JavaScript
Raw Normal View History

2013-08-12 00:10:37 +00:00
define([
"jquery",
"underscore",
"utils",
"classes/Extension",
"folderList",
"fileSystem",
], function($, _, utils, Extension, folderList, fileSystem) {
var documentPanel = new Extension("documentPanel", 'Document Panel');
2013-11-07 23:10:38 +00:00
var fileMgr;
2013-08-12 00:10:37 +00:00
documentPanel.onFileMgrCreated = function(fileMgrParameter) {
fileMgr = fileMgrParameter;
};
var folderEltTmpl = [
2013-08-13 00:03:38 +00:00
'<a href="#"',
' class="list-group-item folder clearfix"',
' data-folder-index="<%= folderDesc.folderIndex %>"',
' data-toggle="collapse"',
2014-04-14 00:21:06 +00:00
' data-target=".file-list.<%= id %>">',
2013-08-13 00:03:38 +00:00
' <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>'
2013-08-12 00:10:37 +00:00
].join('');
var documentEltTmpl = [
2013-08-13 00:03:38 +00:00
'<a href="#"',
' class="list-group-item file<%= fileDesc === selectedFileDesc ? " active" : "" %>"',
2014-04-14 00:21:06 +00:00
' data-file-index="<%= fileDesc.fileIndex %>">',
2013-08-13 00:03:38 +00:00
' <%= fileDesc.composeTitle() %>',
'</a>',
2013-08-12 00:10:37 +00:00
].join('');
2013-11-07 23:10:38 +00:00
var panelElt;
var documentListElt;
var $documentListElt;
var documentListFilteredElt;
var $documentListFilteredElt;
var selectedFileDesc;
2013-12-02 00:09:39 +00:00
var refreshPanel = _.debounce(function() {
2013-08-12 00:10:37 +00:00
// List orphan documents
var orphanDocumentList = _.filter(fileSystem, function(fileDesc) {
return fileDesc.folder === undefined;
});
// Add orphan documents
var documentListHtml = _.chain(orphanDocumentList).sortBy(function(fileDesc) {
return fileDesc.title.toLowerCase();
}).reduce(function(result, fileDesc) {
return result + '<li>' + _.template(documentEltTmpl, {
fileDesc: fileDesc,
2013-08-26 11:47:31 +00:00
selectedFileDesc: selectedFileDesc
2013-08-12 00:10:37 +00:00
}) + '</li>';
}, '').value();
2013-08-12 22:08:22 +00:00
documentListHtml = documentListHtml && '<ul class="nav">' + documentListHtml + '</ul>';
2013-08-13 00:03:38 +00:00
2013-08-12 00:10:37 +00:00
// Build directories
_.chain(folderList).sortBy(function(folderDesc) {
return folderDesc.name.toLowerCase();
}).each(function(folderDesc) {
var fileListHtml = _.chain(folderDesc.fileList).sortBy(function(fileDesc) {
return fileDesc.title.toLowerCase();
}).reduce(function(result, fileDesc) {
2013-08-12 22:08:22 +00:00
return result + '<li>' + _.template(documentEltTmpl, {
2013-08-12 00:10:37 +00:00
fileDesc: fileDesc,
2013-08-26 11:47:31 +00:00
selectedFileDesc: selectedFileDesc
2013-08-12 22:08:22 +00:00
}) + '</li>';
2013-08-12 00:10:37 +00:00
}, '').value();
2013-08-12 22:08:22 +00:00
fileListHtml = fileListHtml && '<ul class="nav">' + fileListHtml + '</ul>';
2013-08-12 00:10:37 +00:00
documentListHtml += _.template(folderEltTmpl, {
folderDesc: folderDesc,
fileListHtml: fileListHtml,
id: folderDesc.folderIndex.replace('.', '')
});
});
documentListElt.innerHTML = documentListHtml;
2014-04-14 00:21:06 +00:00
2013-08-13 23:30:50 +00:00
// 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,
2013-08-26 11:47:31 +00:00
selectedFileDesc: selectedFileDesc
2013-08-13 23:30:50 +00:00
}) + '</li>';
}, '').value();
documentListFilteredHtml = '<ul class="nav">' + documentListFilteredHtml + '</ul>';
2013-08-13 00:03:38 +00:00
2013-08-13 23:30:50 +00:00
documentListFilteredElt.innerHTML = documentListFilteredHtml;
2014-04-14 00:21:06 +00:00
2013-08-12 00:10:37 +00:00
// Add click listeners
_.each(panelElt.querySelectorAll('.file'), function(fileElt) {
2013-08-22 00:19:59 +00:00
var $fileElt = $(fileElt);
2013-11-07 23:10:38 +00:00
$fileElt.click(function() {
2013-08-22 00:19:59 +00:00
var fileDesc = fileSystem[$fileElt.data('fileIndex')];
2013-08-12 00:10:37 +00:00
if(fileDesc && fileDesc !== selectedFileDesc) {
fileMgr.selectFile(fileDesc);
}
});
});
2013-12-02 00:09:39 +00:00
}, 50);
2013-08-12 00:10:37 +00:00
documentPanel.onFileSelected = function(fileDesc) {
selectedFileDesc = fileDesc;
refreshPanel();
};
documentPanel.onFileCreated = refreshPanel;
documentPanel.onFileDeleted = refreshPanel;
documentPanel.onTitleChanged = refreshPanel;
documentPanel.onSyncExportSuccess = refreshPanel;
documentPanel.onSyncRemoved = refreshPanel;
documentPanel.onNewPublishSuccess = refreshPanel;
documentPanel.onPublishRemoved = refreshPanel;
documentPanel.onFoldersChanged = refreshPanel;
// Filter for search input in file selector
2013-11-07 23:10:38 +00:00
var panelContentElt;
2013-08-13 23:30:50 +00:00
var previousFilterValue = '';
function filterFiles(filterValue) {
if(filterValue == previousFilterValue) {
return;
2013-08-12 00:10:37 +00:00
}
2013-08-13 23:30:50 +00:00
previousFilterValue = filterValue;
2014-04-14 00:21:06 +00:00
2013-08-13 23:30:50 +00:00
// 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');
2013-08-12 00:10:37 +00:00
}
documentPanel.onReady = function() {
panelElt = document.querySelector('.document-panel');
2013-08-13 23:30:50 +00:00
panelContentElt = panelElt.querySelector('.panel-content');
documentListElt = panelElt.querySelector('.document-list');
$documentListElt = $(documentListElt);
documentListFilteredElt = panelElt.querySelector('.document-list-filtered');
$documentListFilteredElt = $(documentListFilteredElt);
2014-04-14 00:21:06 +00:00
2013-08-12 22:08:22 +00:00
// Open current folder before opening
$(panelElt).on('show.layout.toggle', function() {
var folderDesc = selectedFileDesc.folder;
if(folderDesc !== undefined) {
$(panelElt.querySelector('.file-list.' + folderDesc.folderIndex.replace('.', ''))).collapse('show');
2013-08-13 00:03:38 +00:00
}
}).on('shown.layout.toggle', function() {
// Scroll to the active file
var activeElt = documentListElt.querySelector('.file.active');
activeElt && (panelContentElt.scrollTop += activeElt.getBoundingClientRect().top - 240);
}).on('hidden.layout.toggle', function() {
// Unset the filter
$filterInputElt.val('');
filterFiles('');
2013-08-12 22:08:22 +00:00
});
2014-04-14 00:21:06 +00:00
2013-08-13 23:30:50 +00:00
// Search bar input change
var $filterInputElt = $(panelElt.querySelector('.search-bar .form-control'));
$filterInputElt.bind("propertychange keyup input paste", function() {
filterFiles($filterInputElt.val());
});
2013-08-12 00:10:37 +00:00
};
return documentPanel;
2014-04-14 00:21:06 +00:00
});