Changeset 5 for pro-bachkim-filespace

Timestamp:

May 27, 2014 7:27:44 PM (11 years ago)

Author:

dungnv

Message:

 

Location:

pro-bachkim-filespace/violetspace-prototype

Files:

• assets/css/space/style.css (modified) (2 diffs)
• assets/js/filemanager/filemanager.js (modified) (2 diffs)
• assets/js/vsfilemanager.js (modified) (9 diffs)
• getdata.php (modified) (1 diff)
• index.html (modified) (2 diffs)

pro-bachkim-filespace/violetspace-prototype/assets/css/space/style.css

@@ -5 +5 @@
 @import "../font-awesome.min.css";
 @import "../ace.min.css";
+@import "vsgrid.css";
 
 body {
@@ -102 +103 @@
 #treeview-container{
         padding-left: 10px;
-        padding-right: 5px;
+        padding-right: 1px;
         padding-top: 15px;
         border-left: #F5F5F5 20px solid;
         display: block;
-        /*height: 100%;*/
         width: auto;
         overflow-x: hidden;
         overflow-y: auto;
         border-radius: 0 !important;
+}
+
+.ui-resizable-e {
+   background: url("../../images/resize.png") no-repeat scroll center center #F5F5F5;
+   border-left: 1px solid #E5E5E5;
+   border-right: 1px solid #E5E5E5;
+   width: 5px;
 }
 

pro-bachkim-filespace/violetspace-prototype/assets/js/filemanager/filemanager.js

@@ -51 +51 @@
                 var privateTree =  $('#treeview-container').violetTree({
                         script:'getdata.php',
-                        dataSource: 'AJAX',
                         expandEasing: 'easeOutBounce', 
                         collapseEasing: 'easeOutBounce',
@@ -68 +67 @@
                 });
 
+                $('#btnCopy').click (function(){
+                        privateTree.copy();
+                });
+
                 /**
                 END - For Directory Tree

pro-bachkim-filespace/violetspace-prototype/assets/js/vsfilemanager.js

@@ -7 +7 @@
                         if( o.homeDirNameDisplay == undefined ) o.homeDirNameDisplay = 'Home';
                         if( o.script == undefined ) o.script = null;
-                        if( o.dataSource == undefined ) o.dataSource = 'AJAX'; //'LOADED' 
-                        if( o.data == undefined ) o.data = null;
                         if( o.container == undefined ) o.container = $(this);
                         if( o.dirIDprefix == undefined ) o.dirIDprefix = 'vsdir_';
@@ -18 +16 @@
 
                         // PRIVATE methods
+                        var sendCommand = function (p) {
+                                if( p.postdata == undefined ) p.postdata = null;
+                                if( p.callbackSuccess == undefined ) p.callbackSuccess = null;
+                                if( p.callbackDone == undefined ) p.callbackDone = null;
+                                if( p.callbackFail == undefined ) p.callbackFail = null;
+                                if( p.callbackAlways == undefined ) p.callbackAlways = null;
+
+                                if (o.script != null) {
+                                        $.post(o.script, p.postdata, function (data){
+                                                if (data) {
+                                                        parseData = $.parseJSON(data);
+                                                }
+
+                                                if (p.callbackSuccess != null) {
+                                                        p.callbackSuccess(parseData);
+                                                }
+
+                                        }).done(function() {if (p.callbackDone != null)p.callbackDone(this);}).fail(function() {if (p.callbackFail != null)p.callbackFail(this);}).always(function() {if (p.callbackAlways != null)p.callbackAlways(this);});
+                                }
+                        }
+
                         var loadTree = function () {
-                                if (o.dataSource == 'AJAX') {
-                                        $.post(o.script, 
-                                                function(data){
-                                                        if (!data) return;
-                                                        var parsedData = $.parseJSON(data);
-                                                        o.data = parsedData;
-                                                        renderTree ();
-                                                }
-                                        ).done(function() {}).fail(function() {}).always(function() {});
-                                }                               
-                        };
-
-                        var renderTree = function  () {
+                                sendCommand ({postdata:null,callbackSuccess:renderTree});
+                        };
+
+                        var renderTree = function  (parseData) {
                                 var homeNode = createNode({
                                         id:0,
@@ -38 +48 @@
 
                                 selectDir($(homeNode).find('> A'));
-
-                                if (o.data != null) {
-                                        for (var i = 0; i < o.data.length ; i++) {
+                                if (parseData != null) {
+                                        for (var i = 0; i < parseData.length ; i++) {
                                                 var node = createNode ({
-                                                        id: o.data[i].id,
-                                                        name: o.data[i].name,
-                                                        curentNode: $('#' + o.dirIDprefix + o.data[i].parentID).find('> A'),
-                                                        hidden: (o.data[i].parentID > 0) ? true : false
+                                                        id: parseData[i].id,
+                                                        name: parseData[i].name,
+                                                        curentNode: $('#' + o.dirIDprefix + parseData[i].parentID).find('> A'),
+                                                        hidden: (parseData[i].parentID > 0) ? true : false
                                                 })
                                         };
@@ -87 +96 @@
                         //END - Create a node of Tree
 
-                        var deleteNode = function (n) {
-                                if (!$(n).parent().hasClass('home'))
-                                        $(n).remove();
+                        var deleteNode = function (parsedData) {
+                                if (parsedData.isSuccess == false) return false;
+                                if (!$('#' + o.dirIDprefix + parsedData.id).hasClass('home'))
+                                        $('#' + o.dirIDprefix + parsedData.id).parent().remove();
                         }
 
@@ -139 +149 @@
 
                         this.createDir = function(c) {
-
                                 var cid = $(c).parent().attr('id');
                                 var pid = cid.substring(o.dirIDprefix.length, cid.length);
@@ -145 +154 @@
                                 var dirName = prompt("Please enter new directory name", "");
 
-                                $.post(o.script,{action:"create_dir",parentID:pid,name:dirName}, function (data) {
-                                        if (!data) return;
-                                        var parsedData = $.parseJSON(data);
-
-                                        createNode({
-                                                id: parsedData.id,
-                                                name: parsedData.name,
-                                                curentNode: c,
-                                                hidden: false,
-                                                //customEvent: {eventName: "click", eventTrigger: function(o){alert('This click!')}}
-                                        });
+                                sendCommand({
+                                        postdata:{action:"create_dir",parentID:pid,name:dirName},
+                                        callbackSuccess: function (parsedData) {createNode({
+                                                                                id: parsedData.id,
+                                                                                name: parsedData.name,
+                                                                                curentNode: c,
+                                                                                hidden: false,});
+                                                                        }
                                 });
                         }
@@ -164 +170 @@
                                 var confirmChild = true;
 
+                                var cid = $(c).parent().attr('id');
+                                var pid = cid.substring(o.dirIDprefix.length, cid.length);
+
                                 if (isHome(c)) return;
 
@@ -171 +180 @@
                                         confirmChild = confirm('This node has childs, you still want to delete it?');
 
-                                if (confirmDel && confirmChild) deleteNode(c);
-
+                                if (confirmDel && confirmChild) {
+                                        var postdata = {action:"delete_dir",id:pid}
+                                        sendCommand({
+                                                postdata:postdata,
+                                                callbackSuccess: function (parsedData) {deleteNode(parsedData)}
+                                        });
+                                }       
+                        }
+
+                        this.copy = function () {
+                                alert ('copy');
+                        }
+
+                        this.paste = function () {
+                                alert ('paste');
                         }
 
@@ -181 +203 @@
                         return this.initialize();
                 },
+
+                violetGrid: function (o) {
+                        if( o.container == undefined ) o.container = $(this);
+                        if( o.defaultViewMode == undefined ) o.defaultViewMode = 'thumbnail';//or 'list'
+
+                        if( o.directoryContent == undefined ) o.directoryContent = null;
+
+                }
         });
 

pro-bachkim-filespace/violetspace-prototype/getdata.php

@@ -28 +28 @@
                 echo json_encode($aryNewDir);
         }
+        else if ($_POST['action'] == 'delete_dir') {
+                $aryDelDir = array('id' => $_POST['id'], 'isSuccess' => true);
+                echo json_encode($aryDelDir);
+        }
 }
 else {

pro-bachkim-filespace/violetspace-prototype/index.html

@@ -37 +37 @@
                                 <button id="btnNewFolder" class="btn btn-success" title="Tạo thư mục mới"><i class="icon-folder-close"></i></button>
                                 <button id="btnDel" class="btn btn-success" title="Xóa"><i class="icon-eraser"></i></button>
-                                <button class="btn btn-success" title="Sao chép"><i class="icon-copy"></i></button>
-                                <button class="btn btn-success" title="Cắt"><i class="icon-cut"></i></button>
-                                <button class="btn btn-success" title="Dán"><i class="icon-paste"></i></button>
+                                <button id="btnCopy" class="btn btn-success" title="Sao chép"><i class="icon-copy"></i></button>
+                                <button id="btnCut"class="btn btn-success" title="Cắt"><i class="icon-cut"></i></button>
+                                <button id="btnPaste"class="btn btn-success" title="Dán"><i class="icon-paste"></i></button>
                         </div>
                         <div class="btn-group">
@@ -60 +60 @@
             
             <div id="directory-content-view-container">
-                        <div id="file-container">
+                        <div id="file-container" class="vsgrid">
+                                <div class="vscell">
+                                        <div class="selector">
+                                                <div class="icon-directory"></div>
+                                        </div>
+                                        <div class="file-name">Dir 1</div>
+                                </div>
 
+                                <div class="vscell">
+                                        <div class="selector">
+                                                <div class="icon-directory"></div>
+                                        </div>
+                                        <div class="file-name">Dir 2</div>
+                                </div>
+
+                                <div class="vscell">
+                                        <div class="selector">
+                                                <div class="icon-directory"></div>
+                                        </div>
+                                        <div class="file-name">Dir 3</div>
+                                </div>
+
+                                <div class="vscell">
+                                        <div class="selector">
+                                                <div class="icon-text"></div>
+                                        </div>
+                                        <div class="file-name">File 1</div>
+                                </div>
+
+                                <div class="vscell">
+                                        <div class="selector">
+                                                <div class="icon-text"></div>
+                                        </div>
+                                        <div class="file-name">File 2</div>
+                                </div>
+
+                                <div class="vscell">
+                                        <div class="selector">
+                                                <div class="icon-text"></div>
+                                        </div>
+                                        <div class="file-name">File 3</div>
+                                </div>
+
+                                <div class="vscell">
+                                        <div class="selector">
+                                                <div class="icon-text"></div>
+                                        </div>
+                                        <div class="file-name">File 4</div>
+                                </div>
                         </div>
             </div>