store: limit number of shown files

one/static/cloud.js

@@ -71,14 +71,16 @@ $(function(){
     var Model=function(){
         var self=this;
         self.files=ko.observableArray();
+        self.allFiles=[];
         self.notInRoot=ko.observable(false);
+        self.fileLimit=5;
         self.jumpUp=function(){
             var s=self.currentPath();
             self.currentPath(s.substr(0,s.substr(0,s.length-1).lastIndexOf('/')+1));
             loadFolder(self.currentPath());
         }
         var loadFolder=function(path){
-            console.log('loadFolder');
+            self.fileLimit=5;
             $.ajax({
                 type: 'POST',
                 data: 'path='+path,
@@ -94,11 +96,20 @@ $(function(){
         }
         var loadFolderDone=function(data){
             self.notInRoot(self.currentPath().lastIndexOf('/') !== 0);
+            self.files([]);
+            self.allFiles=data;
             var viewData=[];
+            var added=0;
             for(var i in data){
-                var d=data[i];
-                if(data[i].TYPE === 'D'){
-                    viewData[i]={
+                added++;
+                if(added<6)
+                    addFile(data[i]);
+            }
+        }
+        var addFile=function(d){
+            var viewData;
+            if(d.TYPE === 'D'){
+                viewData={
                     originalName: d.NAME,
                     name: d.NAME.length>30?(d.NAME.substr(0,27)+'...'):d.NAME,
                     size: 'katalógus',
@@ -111,10 +122,10 @@ $(function(){
                     }
                 };
             } else {
-                    viewData[i]={
+                viewData={
                     originalName: d.NAME,
                     name: d.NAME.length>30?(d.NAME.substr(0,27)+'...'):d.NAME,
-                        size: data[i].SIZE+'K',
+                    size: d.SIZE+'K',
                     type: 'fájl',
                     mTime: d.MTIME,
                     getTypeClass: 'name filetype-text',
@@ -122,11 +133,20 @@ $(function(){
                     }
                 };
             }
+            self.files.push(viewData);
         }
-            self.files(viewData);
+        self.fadeIn=function(e){
+            console.log(e,arguments);
+            $(e).hide().slideDown(500);
         }
         self.currentPath=ko.observable('/');
-
+        self.showMore=function(){
+            for(var i=self.fileLimit;i<self.fileLimit+5;i++){
+                if(self.allFiles[i] === undefined) break;
+                addFile(self.allFiles[i]);
+            }
+            self.fileLimit+=5;
+        }
         self.download=function(item){
             $.ajax({
                 type: 'POST',

one/templates/home.html

@@ -203,7 +203,13 @@
                         <div class="clear"></div>
                     </div>
                 </li>
-                <!-- ko foreach: files -->
+                <li class="wm small real" data-bind="visible: files().length == 0">
+                    <div class="summary">
+                        <div class="name">Nincs megjeleníthető fájl.</div>
+                        <div class="clear"></div>
+                    </div>
+                </li>
+                <!-- ko foreach: {data:files,afterAdd:fadeIn} -->
                 <li class="wm real">
                     <div class="summary" data-bind="click: clickHandler">
                         <div class="name" data-bind="text: name, attr: {class: getTypeClass}"></div>
@@ -231,13 +237,10 @@
                     </div>
                 </li>
                 <!-- /ko -->
-                <li class="file-details wm" id="load-more-files">
-                    <div class="summary">
+                <li class="file-details wm" id="load-more-files" data-bind="visible: (files().length>0 && files().length != allFiles.length)">
+                    <div class="summary" data-bind="click: showMore">
                         <div class="name filetype-more">
-                            Mutasd a régebbi fájlokat!
-                        </div>
-                        <div class="actions" style="text-align: right; display: none">
-                            <img src="/static/load-4.gif" alt="loading" />
+                            Mutass több fájlt!
                         </div>
                         <div class="clear"></div>
                     </div>