Febbweiss/filebrowser-durandal-widget
1
0
Fork 0
mirror of https://github.com/Febbweiss/filebrowser-durandal-widget.git synced 2026-03-05 06:35:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

add context menu management

Browse Source
This commit is contained in:
Anonymous
2015-06-23 13:17:05 +00:00
parent a6634c4207
commit 3975981fce
10 changed files with 307 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/widgets/filebrowser/view.html
View File

@@ -1,29 +1,32 @@
<div id="filebrowser" class="filebrowser">
<!-- ko if: folder() -->
<!-- ko let: { loopRoot: $data } -->
<ul data-bind="template: { name: 'tree-template', foreach: folder().children() }" class="tree-file"></ul>
<div id="filebrowser">
<!-- ko if: folder() -->
<!-- ko let: { loopRoot: $data } -->
<ul data-bind="template: { name: 'tree-template', foreach: folder().children() }" class="tree-file"></ul>
<!-- /ko -->
<!-- /ko -->
<span data-bind="visible: !folder()" class="text-center">Loading workspace...</span>
<!-- /ko -->
<script id="tree-template" type="text/html">
<!-- ko if: $data.type() === "folder" -->
<li class="folder">
<i class="fa fa-folder-o" data-bind="attr: {id: 'icon_folder_' + $data.uuid()}"></i>
<span data-bind="text: $data.name, event: { dblclick: loopRoot.openFolder, contextmenu: loopRoot.openContextMenu, click: loopRoot.select }"/>
<li class="folder">
<span data-bind="event: { contextmenu: loopRoot.openContextMenu, dblclick: loopRoot.open, click: loopRoot.select }">
<i class="fa fa-folder-o" data-bind="attr: {id: 'icon_folder_' + $data.uuid()}"></i>
<!-- ko text: $data.name --><!-- /ko -->
</span>
<input type="checkbox" data-bind="attr: {id: $data.uuid}" />
<ul data-bind="template: { name: 'tree-template', foreach: $data.children }"></ul>
</li>
<!-- /ko -->
<!--ko if: $data.type() !== "folder"-->
<li data-bind="attr: {'data-id': $data.uuid, 'data-filetype': $data.type()}" class="file">
<li data-bind="attr: {'data-id': $data.uuid, 'data-filetype': $data.type()},
event: { contextmenu: loopRoot.openContextMenu, dblclick: loopRoot.open, click: loopRoot.select }"
class="file">
<!--ko ifnot: $data.type -->
<i data-bind="attr: {class: 'fa fa-file-o'}"></i>
<i data-bind="attr: {class: 'fa fa-file-o'}"></i>
<!-- /ko -->
<!--ko if: $data.type -->
<i data-bind="attr: {class: 'fa fa-file-' + $data.type() + '-o', title: $data.type()}"></i>
<i data-bind="attr: {class: 'fa fa-file-' + $data.type() + '-o', title: $data.type()}"></i>
<!-- /ko -->
<span data-bind="text: $data.name, event: { dblclick: loopRoot.openFile, contextmenu: loopRoot.openContextMenu, click: loopRoot.select }, attr: {'data-extra': $data.extra ? $data.extra : ''}"></span>
<span data-bind="text: $data.name, attr: {'data-extra': $data.extra ? $data.extra : ''}"></span>
</li>
<!-- /ko -->
</script>
@@ -31,16 +34,23 @@
<!-- Context menu -->
<div id="fileBrowserContextMenu" class="dropdown open" data-bind="visible: showContextMenu" tabindex="1">
<ul class="dropdown-menu" role="menu" aria-labelledby="contextMenu">
<!-- ko if: selected() != undefined && !selected().extra -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-bind="click: newItem">New ...</a></li>
<!-- /ko -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-bind="click: openRenamePopup">Rename</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-bind="click: copy">Copy</a></li>
<!-- ko if: selected() != undefined && !selected().extra -->
<li role="presentation" data-bind="css: { 'disabled': !hasCopied()}"><a role="menuitem" tabindex="-1" href="#" data-bind="click: paste">Paste</a></li>
<!-- /ko -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-bind="click: openDeletePopup">Delete</a></li>
<li data-bind="visible: hasSelectedFolder()" >
<a role="menuitem" tabindex="-1" href="#" data-bind="click: newItem">New ...</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#" data-bind="click: openRenamePopup">Rename</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#" data-bind="click: copy">Copy</a>
</li>
<li data-bind="css: { 'disabled': !hasCopied()}, visible: hasSelectedFolder()">
<a role="menuitem" tabindex="-1" href="#" data-bind="click: paste">Paste</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#" data-bind="click: openDeletePopup">Delete</a>
</li>
</ul>
</div>
<!-- End of Context menu -->
</div>

116
app/widgets/filebrowser/viewmodel.js
View File

@@ -4,69 +4,74 @@ define(['durandal/app', 'durandal/composition', 'plugins/http',
'./renameModal', './newItemModal'],
function(app, composition,http, $, ko, ko_mapping, perfectScrollbar, RenameModal, NewItemModal) {
ko.mapping = ko_mapping;
ko.bindingHandlers['let'] = {
'init': function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// Make a modified binding context, with extra properties, and apply it to descendant elements
var innerContext = bindingContext.extend(valueAccessor());
ko.applyBindingsToDescendants(innerContext, element);
return { controlsDescendantBindings: true };
}
};
ko.mapping = ko_mapping;
ko.bindingHandlers['let'] = {
'init': function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// Make a modified binding context, with extra properties, and apply it to descendant elements
var innerContext = bindingContext.extend(valueAccessor());
ko.applyBindingsToDescendants(innerContext, element);
return { controlsDescendantBindings: true };
}
};
ko.virtualElements.allowedBindings['let'] = true;
var ctor = function() { },
selected = ko.observableArray(),
showContextMenu = ko.observable(false),
var ctor = function() {},
selected = ko.observable(),
showContextMenu = ko.observable(),
copied = ko.observable(undefined),
folder = ko.observable(ko.mapping.fromJS({children: []})),
scrollable = $('#filebrowser'),
cachedData;
scrollable = $('#filebrowser');
ctor.prototype.attached = function() {
showContextMenu(false);
$('#filebrowser').perfectScrollbar();
};
ctor.prototype.activate = function(settings) {
this.settings = settings;
this.selected = selected;
this.hasCopied = ko.computed( function() {
return copied() !== undefined;
});
this.showContextMenu = showContextMenu;
this.folder = folder;
scrollable.perfectScrollbar();
this.selected = selected;
this.folder = folder;
this.showContextMenu = showContextMenu;
this.hasSelectedFolder = ko.computed(function() {
return selected() != undefined && selected().type === 'folder';
});
this.hasCopied = ko.computed( function() {
return copied() !== undefined;
});
};
ctor.prototype.openFile = function(object, event) {
var type = arguments[0].extra();
http.get(arguments[0].path()).then(function(response) {
app.trigger('filebrowser:open_file', {
type: type,
content: response
});
});
};
ctor.prototype.open = function(object,event) {
console.log('Opening', object);
if( object.type() === 'folder' ) {
var id = object.uuid(),
checkbox = $('input[type=checkbox][id=' + id + ']');
checkbox.prop('checked', !checkbox.prop('checked'));
$('#icon_folder_' + id).toggleClass('fa-folder-o').toggleClass('fa-folder-open-o');
$('#filebrowser').perfectScrollbar('update');
} else {
var type = object.extra();
http.get(object.path()).then(function(response) {
app.trigger('filebrowser:open_file', {
type: type,
content: response
});
});
}
};
ctor.prototype.select = function(object, event) {
if( !event.ctrlKey ) {
$('li > span.select').removeClass('select');
selected.removeAll();
}
$('li > span.select').removeClass('select');
$(event.target).toggleClass('select');
selected.push( ko.mapping.fromJS(object) );
};
ctor.prototype.openFolder = function(event) {
var id = arguments[0].uuid();
console.log('openFolder', id);
$('input[type=checkbox][id=' + id + ']').click();
$('#icon_folder_' + id).toggleClass('fa-folder-o').toggleClass('fa-folder-open-o');
$('#filebrowser').perfectScrollbar('update');
selected( ko.mapping.fromJS(object) );
};
/** Context Menu **/
ctor.prototype.openContextMenu = function(object, event) {
console.log('openContextMenu');
selected( ko.mapping.fromJS(object) );
ctor.prototype.openContextMenu = function(object, event) {
// Position du menu, calculer la pos pour eviter sortie du viewport
var posX = event.pageX,
posY = event.pageY,
@@ -76,18 +81,19 @@ define(['durandal/app', 'durandal/composition', 'plugins/http',
menuWidth = contextMenu.width(),
menuHeight = contextMenu.height();
posX = Math.min(posX - 45, windowWidth - menuWidth - 15);
posY = Math.min(posY - 80, windowHeight - menuHeight - 10);
posX = Math.min(posX, windowWidth - menuWidth - 15);
posY = Math.min(posY, windowHeight - menuHeight - 10);
// display
// affichage
contextMenu.css({
left : posX + 'px',
top : posY + 'px'
});
showContextMenu(true);
showContextMenu(true);
};
ctor.prototype.openRenamePopup = function(ctor, event) {
RenameModal.show(ctor.selected().name()).then(function(response) {
if( response !== undefined ) {
@@ -127,15 +133,15 @@ define(['durandal/app', 'durandal/composition', 'plugins/http',
});
};
$(document).on('click', function() {
$(document).on('click', function() {
showContextMenu(false);
});
/** End of Context Menu */
http.get('/data/filesystem.json').then(function(response) {
folder(ko.mapping.fromJS(response));
$('#filebrowser').perfectScrollbar();
$('#filebrowser').perfectScrollbar('update');
});
return ctor;
});