Stackedit/public/res/extensions/documentManager.js

411 lines
17 KiB
JavaScript
Raw Normal View History

2013-08-11 00:52:27 +00:00
define([
"jquery",
"underscore",
2013-11-05 23:03:38 +00:00
"constants",
2013-08-11 00:52:27 +00:00
"utils",
2013-11-05 23:03:38 +00:00
"storage",
2013-08-11 00:52:27 +00:00
"classes/Extension",
"classes/FolderDescriptor",
2013-08-12 00:10:26 +00:00
"folderList",
2014-09-09 23:37:21 +00:00
"fileSystem"
2013-11-05 23:03:38 +00:00
], function($, _, constants, utils, storage, Extension, FolderDescriptor, folderList, fileSystem) {
2013-08-11 00:52:27 +00:00
var documentManager = new Extension("documentManager", 'Document Manager', false, true);
2013-11-07 23:10:38 +00:00
var fileMgr;
2013-08-11 00:52:27 +00:00
documentManager.onFileMgrCreated = function(fileMgrParameter) {
fileMgr = fileMgrParameter;
};
2013-11-07 23:10:38 +00:00
var eventMgr;
2013-08-11 00:52:27 +00:00
documentManager.onEventMgrCreated = function(eventMgrParameter) {
eventMgr = eventMgrParameter;
};
var folderEltTmpl = [
2013-08-12 22:08:22 +00:00
'<a href="#" class="list-group-item folder clearfix" data-folder-index="<%= folderDesc.folderIndex %>" data-toggle="collapse" data-target=".modal-document-manager .file-list.<%= id %>">',
2013-08-11 00:52:27 +00:00
'<label class="checkbox" title="Select"><input type="checkbox"></label>',
2013-08-12 00:10:26 +00:00
'<button class="btn btn-default button-delete" title="Delete"><i class="icon-trash"></i></button>',
2013-08-11 00:52:27 +00:00
'<button class="btn btn-default button-rename" title="Rename"><i class="icon-pencil"></i></button>',
2013-08-11 01:23:29 +00:00
'<div class="pull-right file-count"><%= _.size(folderDesc.fileList) %></div>',
2013-08-11 00:52:27 +00:00
'<div class="name"><i class="icon-folder"></i> ',
'<%= folderDesc.name %></div>',
'<input type="text" class="input-rename form-control hide"></a>',
2013-08-12 22:08:22 +00:00
'<div class="file-list collapse <%= id %> clearfix"><%= fileListHtml %></div>'
2013-08-11 00:52:27 +00:00
].join('');
2013-08-12 00:10:26 +00:00
var documentEltTmpl = [
2013-08-11 01:23:29 +00:00
'<li class="list-group-item file clearfix" data-file-index="<%= fileDesc.fileIndex %>">',
2013-08-11 00:52:27 +00:00
'<label class="checkbox" title="Select"><input type="checkbox"></label>',
2013-08-12 00:10:26 +00:00
'<button class="btn btn-default button-delete" title="Delete"><i class="icon-trash"></i></button>',
2013-08-11 00:52:27 +00:00
'<button class="btn btn-default button-rename" title="Rename"><i class="icon-pencil"></i></button>',
'<div class="name"><%= fileDesc.composeTitle() %></div>',
2014-09-09 23:37:21 +00:00
'<input type="text" class="input-rename form-control hide"></li>'
2013-08-11 00:52:27 +00:00
].join('');
2013-08-12 00:10:26 +00:00
var selectFolderEltTmpl = [
'<a href="#" class="list-group-item folder clearfix" data-folder-index="<%= folderDesc.folderIndex %>">',
'<div class="pull-right file-count"><%= _.size(folderDesc.fileList) %></div>',
'<div class="name"><i class="icon-forward"></i> ',
2014-09-09 23:37:21 +00:00
'<%= folderDesc.name %></div></a>'
2013-08-12 00:10:26 +00:00
].join('');
var selectedDocumentEltTmpl = [
'<li class="list-group-item file clearfix">',
2014-09-09 23:37:21 +00:00
'<div class="name"><%= fileDesc.composeTitle() %></div></li>'
2013-08-12 00:10:26 +00:00
].join('');
2013-11-07 23:10:38 +00:00
var isVisible;
var modalElt;
var documentListElt;
2013-08-12 00:10:26 +00:00
var selectedDocumentList = [];
var selectedFolderList = [];
function doSelect() {
selectedFolderList = [];
selectedDocumentList = [];
_.each(documentListElt.querySelectorAll('input[type="checkbox"]:checked'), function(checkboxElt) {
2013-08-22 00:19:59 +00:00
var $parentElt = $(checkboxElt.parentNode.parentNode);
var folderDesc = folderList[$parentElt.data('folderIndex')];
var fileDesc = fileSystem[$parentElt.data('fileIndex')];
2013-08-12 00:10:26 +00:00
if(folderDesc !== undefined) {
selectedFolderList.push(folderDesc);
}
else if(fileDesc !== undefined) {
selectedDocumentList.push(fileDesc);
}
});
}
2013-08-11 00:52:27 +00:00
2013-11-07 23:10:38 +00:00
var selectedDocumentListElt;
2013-08-12 00:10:26 +00:00
function doDeleteConfirmation() {
// Don't ask user confirmation if we delete only folders
if(_.size(selectedDocumentList) === 0) {
doDelete();
return;
}
2013-08-11 00:52:27 +00:00
2013-08-12 00:10:26 +00:00
// Build the selected document list
var selectedDocumentListHtml = _.chain(selectedDocumentList).sortBy(function(fileDesc) {
return fileDesc.title.toLowerCase();
}).reduce(function(result, fileDesc) {
return result + _.template(selectedDocumentEltTmpl, {
2014-09-09 23:37:21 +00:00
fileDesc: fileDesc
2013-08-12 00:10:26 +00:00
});
}, '').value();
2013-08-15 23:17:16 +00:00
selectedDocumentListElt.innerHTML = '<ul class="file-list nav">' + selectedDocumentListHtml + '</ul>';
2013-08-12 00:10:26 +00:00
// Ask user confirmation
$(modalElt.querySelectorAll('.document-list')).addClass('hide');
$(modalElt.querySelectorAll('.confirm-delete, .selected-document-list')).removeClass('hide');
}
function doDelete() {
// Delete files
_.each(selectedDocumentList, function(fileDesc) {
fileDesc.folder && fileDesc.folder.removeFile(fileDesc);
fileMgr.deleteFile(fileDesc);
});
// Delete folders
_.each(selectedFolderList, function(folderDesc) {
utils.removeIndexFromArray("folder.list", folderDesc.folderIndex);
delete folderList[folderDesc.folderIndex];
});
eventMgr.onFoldersChanged();
}
2013-11-07 23:10:38 +00:00
var $liMoveElt;
var $liDeleteElt;
2014-04-23 23:12:21 +00:00
var doActiveButtons = _.debounce(function() {
2013-08-12 00:10:26 +00:00
doSelect();
2013-08-22 00:19:59 +00:00
$liMoveElt.toggleClass('disabled', _.size(folderList) === 0 || _.size(selectedDocumentList) === 0);
$liDeleteElt.toggleClass('disabled', _.size(selectedFolderList) === 0 && _.size(selectedDocumentList) === 0);
2014-04-23 23:12:21 +00:00
}, 50);
2013-08-12 00:10:26 +00:00
2013-11-07 23:10:38 +00:00
var orphanDocumentList;
var $documentCountElt;
var $folderCountElt;
2013-12-02 00:09:39 +00:00
var refreshManager = _.debounce(function() {
2013-08-12 00:10:26 +00:00
if(isVisible === false) {
return;
}
doActiveButtons();
// Refresh file/folder counters
2013-08-22 00:19:59 +00:00
$documentCountElt.text(_.size(fileSystem));
$folderCountElt.text(_.size(folderList) + 1);
2013-08-12 00:10:26 +00:00
// List orphan documents
orphanDocumentList = _.filter(fileSystem, function(fileDesc) {
2013-08-11 00:52:27 +00:00
return fileDesc.folder === undefined;
2013-08-12 00:10:26 +00:00
});
// Root folder
var documentListHtml = [
2013-12-27 00:01:17 +00:00
'<a href="#" class="list-group-item folder root-folder clearfix" data-toggle="collapse" data-target=".modal-document-manager .file-list.root-folder">',
2013-08-12 00:10:26 +00:00
'<label class="checkbox" title="Select"><input type="checkbox"></label>',
'<div class="pull-right file-count">',
_.size(orphanDocumentList),
'</div>',
'<div class="name"><i class="icon-folder"></i> ',
2014-09-09 23:37:21 +00:00
'ROOT folder</div></a>'
2013-08-12 00:10:26 +00:00
].join('');
// Add orphan documents
2013-08-12 22:08:22 +00:00
var orphanListHtml = _.chain(orphanDocumentList).sortBy(function(fileDesc) {
2013-08-11 00:52:27 +00:00
return fileDesc.title.toLowerCase();
}).reduce(function(result, fileDesc) {
2013-08-12 00:10:26 +00:00
return result + _.template(documentEltTmpl, {
2014-09-09 23:37:21 +00:00
fileDesc: fileDesc
2013-08-11 00:52:27 +00:00
});
2013-08-12 22:08:22 +00:00
}, '').value();
orphanListHtml = orphanListHtml && '<ul class="nav">' + orphanListHtml + '</ul>';
documentListHtml += '<div class="file-list collapse root-folder clearfix">' + orphanListHtml + '</div>';
2013-08-11 00:52:27 +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 00:10:26 +00:00
return result + _.template(documentEltTmpl, {
2014-09-09 23:37:21 +00:00
fileDesc: fileDesc
2013-08-12 00:10:26 +00:00
});
2013-08-11 00:52:27 +00:00
}, '').value();
2013-08-12 22:08:22 +00:00
fileListHtml = fileListHtml && '<ul class="nav">' + fileListHtml + '</ul>';
2013-08-11 00:52:27 +00:00
documentListHtml += _.template(folderEltTmpl, {
folderDesc: folderDesc,
fileListHtml: fileListHtml,
id: folderDesc.folderIndex.replace('.', '')
});
});
documentListElt.innerHTML = documentListHtml;
2013-12-02 00:09:39 +00:00
}, 50);
2013-08-12 00:10:26 +00:00
documentManager.onFileCreated = refreshManager;
documentManager.onFileDeleted = refreshManager;
documentManager.onSyncExportSuccess = refreshManager;
documentManager.onSyncRemoved = refreshManager;
documentManager.onNewPublishSuccess = refreshManager;
documentManager.onPublishRemoved = refreshManager;
2013-08-13 23:30:50 +00:00
documentManager.onFoldersChanged = refreshManager;
2013-08-12 00:10:26 +00:00
2014-01-13 01:39:28 +00:00
documentManager.onTitleChanged = function(fileDesc) {
if(isVisible === false) {
return;
}
$(documentListElt).find('[data-file-index="' + fileDesc.fileIndex + '"] .name').html(fileDesc.composeTitle()).removeClass('hide');
$(documentListElt.querySelectorAll('.input-rename')).addClass('hide');
};
2013-08-11 00:52:27 +00:00
documentManager.onReady = function() {
2013-08-12 00:10:26 +00:00
modalElt = document.querySelector('.modal-document-manager');
2013-08-11 00:52:27 +00:00
documentListElt = modalElt.querySelector('.list-group.document-list');
2013-08-22 00:19:59 +00:00
$documentCountElt = $(modalElt.querySelectorAll('.document-count'));
$folderCountElt = $(modalElt.querySelectorAll('.folder-count'));
2013-08-12 00:10:26 +00:00
selectedDocumentListElt = modalElt.querySelector('.list-group.selected-document-list');
var selectFolderListElt = modalElt.querySelector('.list-group.select-folder-list');
// Only refresh manager if visible (costly)
$(modalElt).on('show.bs.modal', function() {
isVisible = true;
refreshManager();
2014-01-13 01:39:28 +00:00
// Open root folder
setTimeout(function() {
$(documentListElt.querySelectorAll('.root-folder')).click();
}, 250);
2013-08-12 00:10:26 +00:00
}).on('hide.bs.modal', function() {
isVisible = false;
2014-01-13 01:39:28 +00:00
documentListElt.innerHTML = '';
2013-08-12 00:10:26 +00:00
});
2013-08-11 00:52:27 +00:00
2013-08-12 00:10:26 +00:00
// Create folder action
$(modalElt.querySelectorAll('.action-create-folder')).click(function() {
2013-11-07 23:10:38 +00:00
var folderIndex;
2013-08-11 00:52:27 +00:00
do {
2014-09-09 23:37:21 +00:00
folderIndex = "folder." + utils.id();
2013-08-11 00:52:27 +00:00
} while (_.has(folderList, folderIndex));
2013-11-05 23:03:38 +00:00
storage[folderIndex + ".name"] = constants.DEFAULT_FOLDER_NAME;
2013-08-11 00:52:27 +00:00
// Create the folder descriptor
2013-11-05 23:03:38 +00:00
var folderDesc = new FolderDescriptor(folderIndex, constants.DEFAULT_FOLDER_NAME);
2013-08-11 00:52:27 +00:00
// Add the index to the folder list
utils.appendIndexToArray("folder.list", folderIndex);
folderList[folderIndex] = folderDesc;
2013-08-13 23:30:50 +00:00
eventMgr.onFoldersChanged();
2013-08-12 00:10:26 +00:00
// Edit the name when folder has just been created
2014-01-13 01:39:28 +00:00
setTimeout(function() {
var renameButtonElt = $(modalElt.querySelector('[data-folder-index="' + folderIndex + '"] .button-rename')).click();
modalElt.scrollTop += renameButtonElt.offset().top - 50;
}, 60);
2013-08-12 00:10:26 +00:00
});
// Selection dropdown menu actions
$(modalElt.querySelectorAll('.action-select-all')).click(function() {
2014-08-10 23:47:04 +00:00
$(documentListElt.querySelectorAll('.folder input[type="checkbox"]')).prop('checked', true).change();
2013-08-12 00:10:26 +00:00
});
$(modalElt.querySelectorAll('.action-unselect-all')).click(function() {
2014-08-10 23:47:04 +00:00
$(documentListElt.querySelectorAll('.folder input[type="checkbox"]')).prop('checked', false).change();
2013-08-11 00:52:27 +00:00
});
2013-08-12 00:10:26 +00:00
// Delete selection actions
2013-08-22 00:19:59 +00:00
var $aDeleteElt = $(modalElt.querySelectorAll('.action-delete-items')).click(function() {
if($liDeleteElt.hasClass('disabled')) {
2013-08-12 00:10:26 +00:00
return;
}
doSelect();
doDeleteConfirmation();
});
2013-08-22 00:19:59 +00:00
$liDeleteElt = $aDeleteElt.parent();
2013-08-12 00:10:26 +00:00
// Delete confirmation actions
$(modalElt.querySelectorAll('.action-delete-items-confirm')).click(function() {
doDelete();
$(modalElt.querySelectorAll('.document-list')).removeClass('hide');
$(modalElt.querySelectorAll('.confirm-delete, .selected-document-list')).addClass('hide');
});
// Move selection actions
2013-08-22 00:19:59 +00:00
var $aMoveElt = $(modalElt.querySelectorAll('.action-move-items')).click(function() {
if($liMoveElt.hasClass('disabled')) {
2013-08-12 00:10:26 +00:00
return;
}
doSelect();
// Build the destination folder list
var selectFolderListHtml = [
'<a href="#" class="list-group-item folder clearfix">',
'<div class="pull-right file-count">',
_.size(orphanDocumentList),
'</div>',
'<div class="name"><i class="icon-forward"></i> ',
2014-09-09 23:37:21 +00:00
'ROOT folder</div></a>'
2013-08-12 00:10:26 +00:00
].join('');
selectFolderListHtml += _.chain(folderList).sortBy(function(folderDesc) {
return folderDesc.name.toLowerCase();
}).reduce(function(result, folderDesc) {
return result + _.template(selectFolderEltTmpl, {
2014-09-09 23:37:21 +00:00
folderDesc: folderDesc
2013-08-12 00:10:26 +00:00
});
}, '').value();
selectFolderListElt.innerHTML = selectFolderListHtml;
// Set selection event listeners
_.each(selectFolderListElt.querySelectorAll('.folder'), function(folderElt) {
folderElt = $(folderElt);
folderElt.click(function() {
var folderDesc = folderList[folderElt.data('folderIndex')];
_.each(selectedDocumentList, function(fileDesc) {
fileDesc.folder && fileDesc.folder.removeFile(fileDesc);
folderDesc && folderDesc.addFile(fileDesc);
});
eventMgr.onFoldersChanged();
$(modalElt.querySelectorAll('.document-list')).removeClass('hide');
$(modalElt.querySelectorAll('.choose-folder, .select-folder-list')).addClass('hide');
});
});
// Ask user for destination folder
$(modalElt.querySelectorAll('.document-list')).addClass('hide');
$(modalElt.querySelectorAll('.choose-folder, .select-folder-list')).removeClass('hide');
});
2013-08-22 00:19:59 +00:00
$liMoveElt = $aMoveElt.parent();
2013-08-12 00:10:26 +00:00
// Cancel button
$(modalElt.querySelectorAll('.action-cancel')).click(function() {
$(modalElt.querySelectorAll('.document-list')).removeClass('hide');
$(modalElt.querySelectorAll('.confirm-delete, .choose-folder, .selected-document-list, .select-folder-list')).addClass('hide');
});
2014-04-23 23:12:21 +00:00
$(documentListElt).on('click', '.button-delete', function(evt) {
evt.stopPropagation();
var $buttonElt = $(this);
var $parentElt = $buttonElt.parent();
var folderDesc = folderList[$parentElt.data('folderIndex')];
var fileDesc = fileSystem[$parentElt.data('fileIndex')];
selectedDocumentList = [];
selectedFolderList = [];
if(folderDesc) {
selectedFolderList.push(folderDesc);
selectedDocumentList = folderDesc.fileList;
}
else if(fileDesc) {
selectedDocumentList.push(fileDesc);
}
doDeleteConfirmation();
}).on('click', '.button-rename', function(evt) {
evt.stopPropagation();
var $parentElt = $(this.parentNode);
var name;
var folderDesc = folderList[$parentElt.data('folderIndex')];
var fileDesc = fileSystem[$parentElt.data('fileIndex')];
if(folderDesc) {
name = folderDesc.name;
}
else if(fileDesc) {
name = fileDesc.title;
}
$parentElt.find('.name').addClass('hide');
$parentElt.find('.input-rename').removeClass('hide').val(name)[0].select();
}).on('blur keyup', '.input-rename', function(evt) {
var $inputElt = $(this);
function rename() {
var parentElt = $inputElt.parent();
var name = $.trim($inputElt.val());
var folderDesc = folderList[parentElt.data('folderIndex')];
var fileDesc = fileSystem[parentElt.data('fileIndex')];
if(name && folderDesc && name != folderDesc.name) {
folderDesc.name = name;
eventMgr.onFoldersChanged();
}
else if(name && fileDesc && name != fileDesc.title) {
fileDesc.title = name;
eventMgr.onTitleChanged(fileDesc);
}
else {
$inputElt.addClass('hide');
parentElt.find('.name').removeClass('hide');
}
}
// Blur event
if(evt.keyCode === undefined) {
rename();
}
// Enter key event
else if(evt.keyCode == 13) {
rename();
evt.stopPropagation();
}
// Escape key event
else if(evt.keyCode == 27) {
$inputElt.val('');
rename();
evt.stopPropagation();
}
}).on('click', '.file .checkbox', function(evt) {
evt.stopPropagation();
}).on('change', '.file .checkbox input', function() {
$(this).parents('.file-list').prev().find('.checkbox input').prop('checked', false);
doActiveButtons();
}).on('click', '.folder .checkbox', function(evt) {
evt.stopPropagation();
}).on('change', '.folder .checkbox input', function() {
$(this).parents('.folder').next().find('.checkbox input').prop('checked', this.checked);
doActiveButtons();
});
2013-08-11 00:52:27 +00:00
};
return documentManager;
});