diff --git a/app/main.js b/app/main.js index 23656f6..a358874 100644 --- a/app/main.js +++ b/app/main.js @@ -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', - 'perfect.scrollbar' : '../lib/perfect-scrollbar/js/perfect-scrollbar.jquery', - 'highlightjs' : '../lib/highlightjs/highlight.pack' + 'jquery' : '../lib/jquery/jquery.min', + 'perfect.scrollbar' : '../lib/perfect-scrollbar/js/perfect-scrollbar.jquery', + 'highlightjs' : '../lib/highlightjs/highlight.pack' }, shim: { 'knockout.mapping': { diff --git a/app/shell.html b/app/shell.html index 3052ed0..00cfda9 100644 --- a/app/shell.html +++ b/app/shell.html @@ -1,15 +1,34 @@
-
\ No newline at end of file diff --git a/app/shell.js b/app/shell.js index e7a553b..7c43e0f 100644 --- a/app/shell.js +++ b/app/shell.js @@ -1,26 +1,26 @@ -define(['durandal/app', 'knockout', 'highlightjs'], function (app, ko) { - var type = ko.observable(), - content = ko.observable(); - - var sub = app.on('filebrowser:open_file').then(function(message) { - type(message.type); - if( message.type === "json" ) { - content(ko.utils.stringifyJson(message.content)); - } else { - content(message.content); - } - hljs.highlightBlock($('#editor')[0]); - }, this); - - - return { - attached: function () { - hljs.configure({ - tabReplace: ' ' - }); +define(['durandal/app', 'knockout', 'highlightjs'], function (app, ko) { + var type = ko.observable(), + content = ko.observable(); + + var sub = app.on('filebrowser:open_file').then(function(message) { + type(message.type); + if( message.type === "json" ) { + content(ko.utils.stringifyJson(message.content)); + } else { + content(message.content); + } + hljs.highlightBlock($('#editor')[0]); + }, this); + + + return { + attached: function () { + hljs.configure({ + tabReplace: ' ' + }); hljs.initHighlighting(); - }, - type: type, + }, + type: type, content: content }; }); \ No newline at end of file diff --git a/app/widgets/filebrowser/view.html b/app/widgets/filebrowser/view.html index 35da6d4..5099563 100644 --- a/app/widgets/filebrowser/view.html +++ b/app/widgets/filebrowser/view.html @@ -1,29 +1,32 @@ -
- - - +
+ + + - - Loading workspace... + @@ -31,16 +34,23 @@ +
\ No newline at end of file diff --git a/app/widgets/filebrowser/viewmodel.js b/app/widgets/filebrowser/viewmodel.js index e2faf78..8bac7c7 100644 --- a/app/widgets/filebrowser/viewmodel.js +++ b/app/widgets/filebrowser/viewmodel.js @@ -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; }); \ No newline at end of file diff --git a/bower.json b/bower.json index e7f5370..3324afc 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,5 @@ { - "name": "filebrowser-durandal-widget", + "name": "filebrowser-durandal-widget", "version": "0.0.1-SNAPSHOT", "dependencies" : { "durandal" : "~2.1.0", @@ -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" } } \ No newline at end of file diff --git a/data/filesystem.json b/data/filesystem.json index fdbfbed..d5ba135 100644 --- a/data/filesystem.json +++ b/data/filesystem.json @@ -3,89 +3,89 @@ "name":"workspace", "type":"folder", "children":[ - { - "uuid":"app", - "name":"app", - "type":"folder", - "children":[ - { - "uuid":"widgets", - "name":"widgets", - "type":"folder", - "children":[ - { - "uuid":"filebrowser", - "name":"filebrowser", - "type":"folder", - "children": [ - { - "name":"newItemModal.html", - "uuid":"newItemModalhtml", - "type":"code", - "extra":"html", - "path": "/app/widgets/filebrowser/newItemModal.html" - }, - { - "name":"newItemModal.js", - "uuid":"newItemModaljs", - "type":"code", - "extra":"javascript", - "path": "/app/widgets/filebrowser/newItemModal.js" - }, - { - "name":"renameModal.html", - "uuid":"renameModalhtml", - "type":"code", - "extra":"html", - "path": "/app/widgets/filebrowser/renameModal.html" - }, - { - "name":"renameModal.js", - "uuid":"renameModaljs", - "type":"code", - "extra":"javascript", - "path": "/app/widgets/filebrowser/renameModal.js" - }, - { - "name":"view.html", - "uuid":"viewhtml", - "type":"code", - "extra":"html", - "path": "/app/widgets/filebrowser/view.html" - }, - { - "name":"viewmodel.js", - "uuid":"viewmodeljs", - "type":"code", - "extra":"javascript", - "path": "/app/widgets/filebrowser/viewmodel.js" - } - ] - } - ] - }, - { - "name":"main.js", - "uuid":"mainjs", - "type":"code", - "extra":"javascript", - "path": "/app/main.js" - }, - { - "name":"shell.html", - "uuid":"shellhtml", - "type":"code", - "extra":"html", - "path": "/app/shell.html" - }, - { - "name":"shell.js", - "uuid":"shelljs", - "type":"code", - "extra":"javascript", - "path": "/app/shell.js" - } - ] + { + "uuid":"app", + "name":"app", + "type":"folder", + "children":[ + { + "uuid":"widgets", + "name":"widgets", + "type":"folder", + "children":[ + { + "uuid":"filebrowser", + "name":"filebrowser", + "type":"folder", + "children": [ + { + "name":"newItemModal.html", + "uuid":"newItemModalhtml", + "type":"code", + "extra":"html", + "path": "/app/widgets/filebrowser/newItemModal.html" + }, + { + "name":"newItemModal.js", + "uuid":"newItemModaljs", + "type":"code", + "extra":"javascript", + "path": "/app/widgets/filebrowser/newItemModal.js" + }, + { + "name":"renameModal.html", + "uuid":"renameModalhtml", + "type":"code", + "extra":"html", + "path": "/app/widgets/filebrowser/renameModal.html" + }, + { + "name":"renameModal.js", + "uuid":"renameModaljs", + "type":"code", + "extra":"javascript", + "path": "/app/widgets/filebrowser/renameModal.js" + }, + { + "name":"view.html", + "uuid":"viewhtml", + "type":"code", + "extra":"html", + "path": "/app/widgets/filebrowser/view.html" + }, + { + "name":"viewmodel.js", + "uuid":"viewmodeljs", + "type":"code", + "extra":"javascript", + "path": "/app/widgets/filebrowser/viewmodel.js" + } + ] + } + ] + }, + { + "name":"main.js", + "uuid":"mainjs", + "type":"code", + "extra":"javascript", + "path": "/app/main.js" + }, + { + "name":"shell.html", + "uuid":"shellhtml", + "type":"code", + "extra":"html", + "path": "/app/shell.html" + }, + { + "name":"shell.js", + "uuid":"shelljs", + "type":"code", + "extra":"javascript", + "path": "/app/shell.js" + } + ] }, { "uuid":"data", @@ -96,52 +96,59 @@ "name":"filesystem.json", "uuid":"filesystemjson", "type":"code", - "extra":"json", + "extra":"json", "path": "/data/filesystem.json" } ] - }, - { - "uuid": "style", - "name": "style", - "type": "folder", - "children": [ - { - "name": "filebrowser.less", - "uuid": "filebrowserless", - "type": "code", - "extra": "less", - "path": "/style/filebrowser.less" - }, - { - "name": "starterkit.css", - "uuid": "starterkitcss", - "type": "code", - "extra": "less", - "path": "/style/starterkit.css" - } - ] - }, - { + }, + { + "uuid": "style", + "name": "style", + "type": "folder", + "children": [ + { + "name": "filebrowser.less", + "uuid": "filebrowserless", + "type": "code", + "extra": "less", + "path": "/style/filebrowser.less" + }, + { + "name": "global.less", + "uuid": "globalless", + "type": "code", + "extra": "less", + "path": "/style/global.less" + }, + { + "name": "starterkit.css", + "uuid": "starterkitcss", + "type": "code", + "extra": "less", + "path": "/style/starterkit.css" + } + ] + }, + { "uuid": "bowerrc", "name": ".bowerrc", - "type": "code", - "extra": "json", - "path": "/.bowerrc" + "type": "code", + "extra": "json", + "path": "/.bowerrc" }, - { + { "uuid": "bowerjson", "name": "bower.json", - "type": "code", - "extra": "json", - "path": "/bower.json" + "type": "code", + "extra": "json", + "path": "/bower.json" }, - { + { "uuid": "indexhtml", "name": "index.html", - "type": "code", - "extra": "html", - "path": "/index.html" + "type": "code", + "extra": "html", + "path": "/index.html" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 222b6cb..0c37a0e 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,9 @@ - - + + + + + + \ No newline at end of file diff --git a/style/filebrowser.less b/style/filebrowser.less index a5c16bb..94a704a 100644 --- a/style/filebrowser.less +++ b/style/filebrowser.less @@ -1,8 +1,7 @@ @import "../lib/lesshat/build/lesshat.less"; -.filebrowser { +#filebrowser { max-height: 500px; - position: relative; @@ -10,8 +9,6 @@ white-space: nowrap; } -//http://codepen.io/joshnh/pen/Hkqxu -//http://codepen.io/tevko/pen/DdsnK .folder { & > label { @@ -50,9 +47,10 @@ ul { }; #fileBrowserContextMenu { - position: absolute; -} - -.validationMessage { - color: red; + position: fixed; + z-index: 9999; +} + +.validationMessage { + color: red; } \ No newline at end of file diff --git a/style/global.less b/style/global.less new file mode 100644 index 0000000..95cf96c --- /dev/null +++ b/style/global.less @@ -0,0 +1,9 @@ +body { + padding-bottom: 100px; +} + +#editor { + position: relative; + + overflow: hidden; +} \ No newline at end of file