start implementing store

Author: david-hodgetts

public/evileval.js

@@ -4,21 +4,21 @@ define([], function(){
         // TODO this is not a path, rename
         var jsAnimPath = toDataUri(codeString);
         return loadJsAnimOnCanvasAnim(jsAnimPath, canvasAnim, canvasAnim.animationName);
-    },
+    };
 
-        loadJsAnim = function(jsAnimPath){
-            return new Promise(function(resolve, reject){
-                require([jsAnimPath],
-                        function(animationCode){
-                            resolve(Object.create(animationCode));
-                        },
-                        function(err){
-                            reject(err);
-                        });
-            });
-        },
-        
-    loadJsAnimOnCanvasAnim = function(jsAnimPath, canvasAnim, animationName){
+    var loadJsAnim = function(jsAnimPath){
+        return new Promise(function(resolve, reject){
+            require([jsAnimPath],
+                    function(animationCode){
+                        resolve(Object.create(animationCode));
+                    },
+                    function(err){
+                        reject(err);
+                    });
+        });
+    };
+    
+    var loadJsAnimOnCanvasAnim = function(jsAnimPath, canvasAnim, animationName){
         return loadJsAnim(jsAnimPath)
             .then(function(animationCodeClone){
                 canvasAnim.uri = jsAnimPath;
@@ -29,9 +29,9 @@ define([], function(){
                 }
                 return canvasAnim;
             });
-    },
-        
-    toDataUri = function(jsCode){
+    };
+    
+    var toDataUri = function(jsCode){
         return "data:text/javascript;base64," + btoa(jsCode);
     },
 

public/exquis.js

@@ -10,11 +10,10 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
         cell.context = context;
         cell.hint = createCellDiv("hint", row, col, height, width);
         cell.ui = makeCellUi(row, col, height, width);
-        addCellUiListener(cell.ui); 
         return cell;
     };
 
-    var addCellUiListener = function(cellUi){
+    var addCellUiListeners = function(cellUi, store){
         var childNodes = cellUi.childNodes;
         cellUi.addEventListener("mouseover", function(e){
             for(var i = 0; i < childNodes.length; i++){
@@ -26,7 +25,7 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
                 childNodes[i].style.visibility = "hidden";
             };
         });
-
+        addLoadAnimationHandler(cellUi.id, store); 
     };
 
     var makeCanvasAnimation = function(context){
@@ -125,26 +124,34 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
         return cellDiv;
     };
 
-    var makeIcon = function(classNames){
+    var makeIcon = function(classNames, id){
         var icon = document.createElement('span');
         icon.style.visibility = "hidden";
         icon.style.cursor = "pointer"; 
         icon.className = classNames;
+        if(id){
+            icon.id = id;
+        }
         return icon;
     };
 
+    var loadIconSuffix = "-load-icon"; 
     var makeCellUi = function(row, col, height, width){
         var cellUi = createCellDiv("cellUi", row, col, height, width);
-        var loadAnimationIcon = makeIcon("fa fa-folder-open-o fa-lg");
+        var loadAnimationIcon = makeIcon("fa fa-folder-open-o fa-lg", cellUi.id + loadIconSuffix);
         cellUi.appendChild(loadAnimationIcon);
+        return cellUi;
+    };
+
+    var addLoadAnimationHandler = function(cellUiId, store){
+        var loadAnimationIcon = document.getElementById(cellUiId + loadIconSuffix);
         loadAnimationIcon.addEventListener('click', function(){
-            alert("not today");
-            //TODO load list of animations from store
+            store.loadAnimationList().then(function(fileUris){
+                alert(fileUris);
+            });
             //TODO display list in dialog
             //TODO load animation on canvasAnim
         });
-        
-        return cellUi;
     };
 
     var addHintListeners = function(cells){
@@ -176,7 +183,7 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
                 exquis.editorController.show();
             };
 
-            var editIcon = makeIcon("fa fa-pencil-square-o fa-lg");
+            var editIcon = makeIcon("fa fa-pencil-square-o fa-lg", cell.ui.id + "-edit-icon");
             editIcon.addEventListener('click', edit, false);
             cell.ui.appendChild(editIcon);
         });
@@ -191,18 +198,19 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
         document.addEventListener('click', possiblyHideEditor, true);
     };
 
-    var init = function (assName, animUris, makeEditorView, makeEditorController) {
+    var init = function (assName, animUris, makeEditorView, makeEditorController, store) {
         var container = document.getElementById("container"),
             exquis = {};
         exquis.assName = assName;
 
-        //TODO give the code url as argument instead of animCode
-        // canvasAnim should have a method to load the code from the url:
+        //TODO canvasAnim should have a method to load the source code from the url:
         // getSourceCodeString (which reads from the cache of the canvasAnim, or the store)
+        // This becomes necessary when start to have code other than javascript
         exquis.cells = iter2d.map2dArray(animUris,function(animUri,row,col){
             var height = 150,
                 width = 150,
                 cell = makeCell(row, col, height, width);
+            addCellUiListeners(cell.ui, store); 
             cell.canvasAnim = makeCanvasAnimation(cell.context);
             evileval.loadJsAnim(animUri).then(function(animationCodeClone){
                 cell.canvasAnim.setAnimation(animationCodeClone, animUri);

public/main.js

@@ -1,38 +1,17 @@
-
-var makeAnimationPath = function (animName){
-    if(/^https?:\/\//.exec(animName)){
-        return animName;
-    }
-    return "/animations/" + animName + ".js";
-};
-
-var splitarray = function(input, spacing){
-    var output = [];
-    for (var i = 0; i < input.length; i += spacing){
-        output[output.length] = input.slice(i, i + spacing);
-    }
-    return output;
-};
-
-var main = function(net, exquisInit, makeEditorView, makeEditorController, evileval){
+var main = function(net, exquisInit, makeEditorView, makeEditorController, store, iter2d){
     window.onerror = function(message, url, lineNumber){
         //console.log(message +" "+ url +" "+ lineNumber);
     };
     var assemblageName = net.getAssemblageNameFromUrlOrDefaultWithUrlChange();
     net.loadAssemblage(assemblageName)
         .then(function(animationNames){
-            var animNamesList = animationNames.reduce(function(a, b) {
-                return a.concat(b);
-            }),
-                animUris =  animNamesList.map(function(animName){
-                    return  makeAnimationPath(animName);
-                });
-            var animUris2DArray = splitarray(animUris, 3);
+            var animUris2DArray = iter2d.map2dArray(animationNames, net.makeAnimationPath);
             var exquis =  exquisInit(assemblageName, animUris2DArray,
-                                     makeEditorView, makeEditorController);
+                                     makeEditorView, makeEditorController,
+                                     store);
             // this is only for debugging in the console
             window.x = exquis;
         });
 };
 
-require(["net", "exquis", "editorView", "editorController", "evileval", "lib/domReady!"], main);
+require(["net", "exquis", "editorView", "editorController", "nodestore", "iter2d", "lib/domReady!"], main);

public/net.js

@@ -31,10 +31,6 @@ define(["iter2d", "evileval"], function(iter2d, evileval){
         ajax.send(params);
     };
 
-    var makeAnimationFileName = function(animationName){
-        return "/animations/"+animationName + ".js";
-    };
-
     var makeAnimationFileUri = function(animationName){
         return "/animations/"+animationName + ".js";
     };
@@ -111,7 +107,8 @@ define(["iter2d", "evileval"], function(iter2d, evileval){
             getAssemblageNameFromUrlOrDefaultWithUrlChange: getAssemblageNameFromUrlOrDefaultWithUrlChange,
             loadAssemblage: loadAssemblage,
 	    makeAnimationFileUri: makeAnimationFileUri,
-            extractAnimationNameFromUri : extractAnimationNameFromUri, 
+            makeAnimationPath: makeAnimationPath ,
+            extractAnimationNameFromUri: extractAnimationNameFromUri, 
             saveAssemblage: saveAssemblage,
             HTTPgetJSON: HTTPgetJSON,
             HTTPget: HTTPget

public/nodestore.js

@@ -0,0 +1,20 @@
+"use strict";
+/**
+different implementations of the store would save the animation in different places.
+The original url of the animation is independent of the store
+because we want exquis to be able to just display animations from any url.
+The store needs to know where to save an animation based on its url.
+Currently the original url is replaced by a data uri when it is first edited,
+because it's only used to load the code. We need to keep it in order to save it.
+*/
+define(["net", "evileval"], function(net, evileval){
+    //TODO load list of animations from store
+    var loadAnimationList = function(){
+        return net.HTTPgetJSON("/animations/").then(function(files){
+            return files.filter(function(f){
+                return f.match(/\.js$/);
+            });
+	});
+    };
+    return {loadAnimationList: loadAnimationList};
+});