Skip to content

Commit 3efd4b8

Browse files
david-hodgettsdavid-hodgetts
committed
implemented load animation on cell.ui
1 parent 1e88253 commit 3efd4b8

File tree

4 files changed

+71
-38
lines changed

4 files changed

+71
-38
lines changed

‎public/editorController.js

+11-7
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ define(['ui', 'net', 'evileval'], function(ui, net, evileval){
33
var makeAssemblageController = function(exquis){
44
var controller = {
55
load: function(){
6-
var pickAssemblage = function(e){
7-
var chosenAssemblage = e.target.textContent;
6+
var pickAssemblage = function(chosenAssemblage){
87
document.location = "/assemblage/" + chosenAssemblage;
98
};
109

@@ -14,7 +13,7 @@ define(['ui', 'net', 'evileval'], function(ui, net, evileval){
1413
}).map(function(f){
1514
return f.replace(/\.json$/, "");
1615
});
17-
ui.populateNamePicker("choose assemblage", files, pickAssemblage);
16+
ui.populateNamePicker("choose assemblage", files).then(pickAssemblage);
1817
});
1918
},
2019
save: function(){
@@ -23,6 +22,9 @@ define(['ui', 'net', 'evileval'], function(ui, net, evileval){
2322
saveAs: function(){
2423
return ui.buildPrompt("enter file name")
2524
.then(function(fileName){
25+
if(fileName == null){
26+
throw "filename is null";
27+
}
2628
net.saveAssemblage(fileName, exquis.assemblage());
2729
exquis.assName = fileName;
2830
history.pushState({},"...", fileName);
@@ -40,9 +42,8 @@ define(['ui', 'net', 'evileval'], function(ui, net, evileval){
4042

4143
var controller = {
4244
load: function(){
43-
var pickAnimation = function(e){
44-
var chosenAnimationName = e.target.textContent,
45-
canvasAnim = exquis.targetCell.canvasAnim;
45+
var pickAnimation = function(chosenAnimationName){
46+
var canvasAnim = exquis.targetCell.canvasAnim;
4647
canvasAnim.uri = net.makeAnimationFileUri(chosenAnimationName);
4748
updateWithCanvasAnim(canvasAnim, chosenAnimationName);
4849
};
@@ -54,7 +55,7 @@ define(['ui', 'net', 'evileval'], function(ui, net, evileval){
5455
}).map(function(f){
5556
return f.replace(/\.js$/, "");
5657
});
57-
ui.populateNamePicker("choose animation", files, pickAnimation);
58+
ui.populateNamePicker("choose animation", files).then(pickAnimation);
5859
});
5960
},
6061

@@ -64,6 +65,9 @@ define(['ui', 'net', 'evileval'], function(ui, net, evileval){
6465
saveAs: function(){
6566
return ui.buildPrompt("enter file name")
6667
.then(function(fileName){
68+
if(fileName == null){
69+
throw "filename is null";
70+
}
6771
net.saveAnimation(exquis.targetCell.canvasAnim, null, fileName);
6872
exquis.targetCell.canvasAnim.animationName = fileName;
6973
return fileName;

‎public/exquis.js

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use strict";
22

3-
define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, evileval, net){
3+
define(["iter2d", "csshelper", "evileval", "net", "ui"], function(iter2d, csshelper, evileval, net, ui){
44

55

66
var makeCell = function(row, col, height, width){
@@ -13,7 +13,7 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
1313
return cell;
1414
};
1515

16-
var addCellUiListeners = function(cellUi, store){
16+
var addCellUiListeners = function(cellUi, canvasAnim, store){
1717
var childNodes = cellUi.childNodes;
1818
cellUi.addEventListener("mouseover", function(e){
1919
for(var i = 0; i < childNodes.length; i++){
@@ -25,7 +25,7 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
2525
childNodes[i].style.visibility = "hidden";
2626
};
2727
});
28-
addLoadAnimationHandler(cellUi.id, store);
28+
addLoadAnimationHandler(cellUi.id, canvasAnim, store);
2929
};
3030

3131
var makeCanvasAnimation = function(context){
@@ -143,14 +143,19 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
143143
return cellUi;
144144
};
145145

146-
var addLoadAnimationHandler = function(cellUiId, store){
146+
var addLoadAnimationHandler = function(cellUiId, canvasAnim, store){
147147
var loadAnimationIcon = document.getElementById(cellUiId + loadIconSuffix);
148148
loadAnimationIcon.addEventListener('click', function(){
149149
store.loadAnimationList().then(function(fileUris){
150-
alert(fileUris);
150+
var names = fileUris.map(store.uriToAnimationName);
151+
return ui.populateNamePicker("choose animation", names);
152+
}).then(function(fileName){
153+
var fileUri = store.animationNameToUri(fileName);
154+
evileval.loadJsAnim(fileUri).then(function(animationCodeClone){
155+
canvasAnim.setAnimation(animationCodeClone, fileUri);
156+
});
151157
});
152-
//TODO display list in dialog
153-
//TODO load animation on canvasAnim
158+
154159
});
155160
};
156161

@@ -210,8 +215,8 @@ define(["iter2d", "csshelper", "evileval", "net"], function(iter2d, csshelper, e
210215
var height = 150,
211216
width = 150,
212217
cell = makeCell(row, col, height, width);
213-
addCellUiListeners(cell.ui, store);
214218
cell.canvasAnim = makeCanvasAnimation(cell.context);
219+
addCellUiListeners(cell.ui, cell.canvasAnim, store);
215220
evileval.loadJsAnim(animUri).then(function(animationCodeClone){
216221
cell.canvasAnim.setAnimation(animationCodeClone, animUri);
217222
});

‎public/nodestore.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,25 @@ Currently the original url is replaced by a data uri when it is first edited,
88
because it's only used to load the code. We need to keep it in order to save it.
99
*/
1010
define(["net", "evileval"], function(net, evileval){
11-
//TODO load list of animations from store
11+
var animationNameToUri = function(animationName){
12+
return "/animations/"+animationName + ".js";
13+
};
14+
15+
var uriToAnimationName = function(uri){
16+
var match = uri.match(/([^\/]+)\.js/);
17+
return match ? match[1] : uri;
18+
};
19+
1220
var loadAnimationList = function(){
1321
return net.HTTPgetJSON("/animations/").then(function(files){
1422
return files.filter(function(f){
1523
return f.match(/\.js$/);
24+
}).map(function(storeFileUri){
25+
return "/animations/" + storeFileUri;
1626
});
1727
});
1828
};
19-
return {loadAnimationList: loadAnimationList};
29+
return {loadAnimationList: loadAnimationList,
30+
uriToAnimationName: uriToAnimationName,
31+
animationNameToUri: animationNameToUri };
2032
});

‎public/ui.js

+33-21
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ define(["csshelper"], function( csshelper){
77
dialogTitle = document.getElementById("dialog_title"),
88
dialogFooter = document.getElementById("dialog_footer");
99

10-
var makeCancelButton = function(modalScreen){
10+
var makeCancelButton = function(){
1111
var cancelButton = document.createElement("button");
1212
cancelButton.textContent = "cancel";
1313
csshelper.addClass(cancelButton, "btn");
@@ -45,35 +45,47 @@ define(["csshelper"], function( csshelper){
4545
showDialog(false);
4646
});
4747
buttonRow.appendChild(okButton);
48-
buttonRow.appendChild(makeCancelButton(modalScreen));
48+
var cancelButton = makeCancelButton();
49+
cancelButton.addEventListener('click', function(){
50+
resolve(null);
51+
});
52+
buttonRow.appendChild(cancelButton);
4953
showDialog(true);
5054
input.focus();
5155

5256
});
5357
};
5458

55-
var populateNamePicker = function(title, names, clickHandler){
56-
dialogTitle.innerHTML = title;
57-
dialogContent.innerHTML = "";
58-
dialogFooter.innerHTML = "";
59-
60-
var list = document.createElement("ul");
61-
dialogContent.appendChild(list);
59+
var populateNamePicker = function(title, names){
60+
return new Promise(function(resolve, reject){
61+
62+
dialogTitle.innerHTML = title;
63+
dialogContent.innerHTML = "";
64+
dialogFooter.innerHTML = "";
65+
66+
var list = document.createElement("ul");
67+
dialogContent.appendChild(list);
6268

63-
for(var i = 0; i < names.length; ++i){
64-
var item = document.createElement("li");
65-
item.textContent = names[i];
66-
item.id = names[i];
67-
item.addEventListener('click', function(e){
68-
clickHandler(e);
69-
showDialog(false);
69+
for(var i = 0; i < names.length; ++i){
70+
var item = document.createElement("li");
71+
item.textContent = names[i];
72+
item.id = names[i];
73+
item.addEventListener('click', function(e){
74+
showDialog(false);
75+
resolve(e.target.textContent);
76+
});
77+
78+
list.appendChild(item);
79+
}
80+
81+
var cancelButton = makeCancelButton();
82+
cancelButton.addEventListener('click', function(){
83+
resolve(null);
7084
});
71-
72-
list.appendChild(item);
73-
}
85+
dialogFooter.appendChild(cancelButton);
7486

75-
dialogFooter.appendChild(makeCancelButton(modalScreen));
76-
showDialog(true);
87+
showDialog(true);
88+
});
7789
};
7890

7991
var setKeyHandler = function(handler){

0 commit comments

Comments
 (0)