Initial commit

demo/filebrowser-durandal-widget/app/widgets/filebrowser/viewmodel.js

@@ -0,0 +1,147 @@
+define(['durandal/app', 'durandal/composition', 'plugins/http',
+        'jquery', 'knockout', 'knockout.mapping',
+        'perfect.scrollbar',
+        './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.virtualElements.allowedBindings['let'] = true;
+    
+    var ctor = function() {},
+        selected = ko.observable(),
+        showContextMenu = ko.observable(),
+        copied = ko.observable(undefined),
+        folder = ko.observable(ko.mapping.fromJS({children: []})),
+        scrollable = $('#filebrowser');
+
+	ctor.prototype.attached = function() {
+     showContextMenu(false);
+		$('#filebrowser').perfectScrollbar();
+	};
+	
+    ctor.prototype.activate = function(settings) {
+        this.settings = settings;
+		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.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) {
+        $('li > span.select').removeClass('select');
+        $(event.target).toggleClass('select');
+        selected( ko.mapping.fromJS(object) );
+    };
+    
+    /** Context Menu **/
+
+    ctor.prototype.openContextMenu = function(object, event) {
+        // Position du menu, calculer la pos pour eviter sortie du viewport
+        var posX = event.pageX,
+            posY = event.pageY,
+            windowWidth = $(window).width(),
+            windowHeight = $(window).height(),
+            contextMenu = $('#fileBrowserContextMenu'),
+            menuWidth = contextMenu.width(),
+            menuHeight = contextMenu.height();
+
+			posX = Math.min(posX, windowWidth - menuWidth - 15);
+			posY = Math.min(posY, windowHeight - menuHeight - 10);
+
+        // affichage
+        contextMenu.css({
+            left : posX + 'px',
+            top : posY + 'px'
+        });
+
+      
+       showContextMenu(true);
+    };
+	
+    ctor.prototype.openRenamePopup = function(ctor, event) {
+        RenameModal.show(ctor.selected().name()).then(function(response) {
+            if( response !== undefined ) {
+                ctor.selected().name(response);
+            }
+        });
+    };
+
+    ctor.prototype.openDeletePopup = function(ctor, event) {
+        app.showMessage(
+            'Are you sure you want to delete this ' +
+                (ctor.selected().is_folder ? ' folder and all its content' : 'file') + '?',
+            'Delete ' + ctor.selected().name(), [ { text: "Yes", value: "yes" }, { text: "No", value: "no" }]).then( function( dialogResult ) {
+                if( dialogResult === 'yes' ) {
+                    console.log('Deleting', ctor.selected().name());
+                }
+            });
+    };
+
+    ctor.prototype.copy = function(ctor, event) {
+        console.log('Copied', ctor.selected().name());
+        copied( ctor.selected() );
+    };
+
+    ctor.prototype.paste = function(ctor, event) {
+        if( copied() !== undefined ) {
+            console.log('Paste', copied().name(), 'into', ctor.selected().name());
+            copied( undefined );
+        }
+    };
+
+    ctor.prototype.newItem = function(ctor, event) {
+        NewItemModal.show().then(function(response) {
+            if( response !== undefined ) {
+                console.log('New item : ' + response.type + ' - ' + response.name );
+            }
+        });
+    };
+
+   $(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('update');
+   });
+
+    return ctor;
+});