Febbweiss/filebrowser-durandal-widget
1
0
Fork 0
mirror of https://github.com/Febbweiss/filebrowser-durandal-widget.git synced 2026-03-04 22:25:43 +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

14
app/main.js
View File

@@ -1,15 +1,15 @@
requirejs.config({
paths: {
'text' : '../lib/requirejs-text/text',
'durandal' : '../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout' : '../lib/knockout.js/knockout',
'text' : '../lib/requirejs-text/text',
'durandal' : '../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout' : '../lib/knockout.js/knockout',
'knockout.mapping' : '../lib/bower-knockout-mapping/dist/knockout.mapping.min',
'knockout.validation' : '../lib/knockout-validation/dist/knockout.validation.min',
'jquery' : '../lib/jquery/jquery.min',
'jquery' : '../lib/jquery/jquery.min',
'perfect.scrollbar' : '../lib/perfect-scrollbar/js/perfect-scrollbar.jquery',
'highlightjs' : '../lib/highlightjs/highlight.pack'
'highlightjs' : '../lib/highlightjs/highlight.pack'
},
shim: {
'knockout.mapping': {

25
app/shell.html
View File

@@ -1,15 +1,34 @@
<div class="row-fluid">
<aside class="col-md-3" id="filebrowser">
<aside class="col-sm-2 col-md-2">
<div data-bind="widget: {kind:'filebrowser'}"></div>
</aside>
<main class="col-md-6" id="main">
<main class="col-sm-10 col-md-6" id="main">
<pre data-bind="visible: content">
<code data-bind="attr: {css: type}, text: content" id="editor"></code>
</pre>
<span class="text-center" data-bind="visible: !content()">Open file to view it.</span>
</main>
<aside class="col-md-3" id="helpPane">
<aside class="col-sd-12 col-md-4" id="helpPane">
<h2>Welcome to the filebrowser Durandal widget demo</h2>
<p>
This <a href="" target="_blank">Durandal</a> widget allows to display a folder tree and add some actions to manipulate this items.
<ul>
<li>A clic on a file or folder selects it. Multiple select is possible holding the <kbd>Ctrl</kbd> key</li>
<li>A double-clic opens / closes a folder</li>
<li>A double-clic displays the file content in the editor</li>
<li>
A right-clic opens a context menu with different options :
<ul>
<li>Rename the item</li>
<li>Copy the selected item(s)</li>
<li>Paste the selected item(s)</li>
<li>Create an item (in a folder)</li>
<li>Delete an item (and its components)</li>
</ul>
</li>
</ul>
</p>
</aside>
</div>

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

@@ -1,29 +1,32 @@
<div id="filebrowser" class="filebrowser">
<!-- ko if: folder() -->
<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>
<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 }"/>
<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>

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

@@ -17,56 +17,61 @@ define(['durandal/app', 'durandal/composition', 'plugins/http',
};
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) );
// Position du menu, calculer la pos pour eviter sortie du viewport
var posX = event.pageX,
posY = event.pageY,
@@ -76,16 +81,17 @@ 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) {
@@ -127,14 +133,14 @@ 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;

8
bower.json
View File

@@ -7,9 +7,9 @@
"bower-knockout-mapping" : "~2.5.0",
"perfect-scrollbar" : "~0.6.0",
"bootstrap" : "~3.3.4",
"fontawesome" : "~4.3.0",
"less.js" : "~2.4.0",
"lesshat" : "~3.0.2",
"highlightjs" : "~8.4.0"
"fontawesome" : "~4.3.0",
"less.js" : "~2.4.0",
"lesshat" : "~3.0.2",
"highlightjs" : "~8.4.0"
}
}

7
data/filesystem.json
View File

@@ -113,6 +113,13 @@
"extra": "less",
"path": "/style/filebrowser.less"
},
{
"name": "global.less",
"uuid": "globalless",
"type": "code",
"extra": "less",
"path": "/style/global.less"
},
{
"name": "starterkit.css",
"uuid": "starterkitcss",

8
index.html
View File

@@ -6,8 +6,8 @@
<link rel="stylesheet" href="lib/durandal/css/durandal.css"/>
<link rel="stylesheet" href="lib/perfect-scrollbar/css/perfect-scrollbar.css" />
<link rel="stylesheet" href="lib/highlightjs/styles/github.css" />
<link rel="stylesheet" href="style/starterkit.css" />
<link rel="stylesheet/less" href="style/global.less" />
<link rel="stylesheet/less" href="style/filebrowser.less" />
<script>
@@ -33,6 +33,12 @@
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
Footer
</div>
</nav>
<script src="lib/requirejs/require.js" data-main="app/main"></script>
</body>

8
style/filebrowser.less
View File

@@ -1,17 +1,14 @@
@import "../lib/lesshat/build/lesshat.less";
.filebrowser {
#filebrowser {
max-height: 500px;
position: relative;
overflow: hidden;
white-space: nowrap;
}
//http://codepen.io/joshnh/pen/Hkqxu
//http://codepen.io/tevko/pen/DdsnK
.folder {
& > label {
@@ -50,7 +47,8 @@ ul {
};
#fileBrowserContextMenu {
position: absolute;
position: fixed;
z-index: 9999;
}
.validationMessage {

9
style/global.less Normal file
View File

@@ -0,0 +1,9 @@
body {
padding-bottom: 100px;
}
#editor {
position: relative;
overflow: hidden;
}