suzanne.soy/whalesong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

trying to figure out issue with animation

Browse Source
This commit is contained in:
Danny Yoo 2011-08-25 16:55:23 -04:00
parent f33b86112a
commit 9f6f35548f
6 changed files with 179 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web-world/examples/attr-animation/attr-animation.rkt Normal file
View File

@ -0,0 +1,33 @@
#lang planet dyoo/whalesong
(require (planet dyoo/whalesong/resource)
(planet dyoo/whalesong/web-world))
(define-resource index.html)
(define-resource style.css)
(define (tick w v)
(modulo (add1 w) 10))
(define (draw w v)
(define base (update-view-attr (view-focus v (format "#~a" w))
"class"
"selectedBlock"))
(define with-left (if (> w 0)
(view-right (update-view-attr (view-left base)
"class"
"offsetBlock"))
base))
(define with-right (if (< w 9)
(view-left (update-view-attr (view-right base)
"class"
"offsetBlock"))
with-left))
with-right)
(big-bang 0
(initial-view index.html)
(on-tick tick 1/2)
(to-draw draw))

23
web-world/examples/attr-animation/index.html Normal file
View File

@ -0,0 +1,23 @@
<html>
<head><title>Animation</title>
<link rel="stylesheet" href="res/style.css"/>
</head>
<body>
<p>
This should be animating:
<hr/>
<div>
<div class="selectedBlock" id="0"></div>
<div class="block" id="1"></div>
<div class="block" id="2"></div>
<div class="block" id="3"></div>
<div class="block" id="4"></div>
<div class="block" id="5"></div>
<div class="block" id="6"></div>
<div class="block" id="7"></div>
<div class="block" id="8"></div>
<div class="block" id="9"></div>
</div>
</p>
</body>
</html>

20
web-world/examples/attr-animation/style.css Normal file
View File

@ -0,0 +1,20 @@
.block {
width : 100px;
height : 100px;
background-color : blue;
display: inline-block;
}
.selectedBlock {
width : 100px;
height : 100px;
background-color: navy;
display: inline-block;
}
.offsetBlock {
width : 100px;
height : 100px;
background-color: teal;
display: inline-block;
}

5
web-world/impl.rkt
View File

@ -27,10 +27,15 @@
->view
view-focus
view-left
view-right
view-up
view-down
view-text
update-view-text
view-attr
update-view-attr
))

85
web-world/js-impl.js
View File

@ -79,10 +79,6 @@
MockView.prototype.act = function(actionForCursor, actionForReal) {
if (arguments.length !== 2) { throw new Error("act: insufficient arguments"); }
// FIXME: this is not enough. We need a way to do the action
// on a copy of the mock. clone is insufficient: we need to
// copy the whole tree, no?
return new MockView(actionForCursor(this.cursor),
this.pendingActions.concat([actionForReal]),
this.nonce);
@ -124,8 +120,6 @@
})
};
MockView.prototype.getAttr = function(name) {
return $(this.cursor.node).attr(name);
};
@ -140,6 +134,47 @@
})
};
MockView.prototype.left = function() {
return this.act(
function(cursor) {
return cursor.left();
},
function(view) {
view.focus = view.focus.prev();
});
};
MockView.prototype.right = function() {
return this.act(
function(cursor) {
return cursor.right();
},
function(view) {
view.focus = view.focus.next();
});
};
MockView.prototype.up = function() {
return this.act(
function(cursor) {
return cursor.up();
},
function(view) {
view.focus = view.focus.parent();
});
};
MockView.prototype.down = function() {
return this.act(
function(cursor) {
return cursor.down();
},
function(view) {
view.focus = view.focus.children(':first');
});
};
//////////////////////////////////////////////////////////////////////
@ -772,6 +807,44 @@
}
});
EXPORTS['view-left'] = makePrimitiveProcedure(
'view-left',
1,
function(MACHINE) {
var view = checkMockView(MACHINE, 'view-left', 0);
return view.left();
});
EXPORTS['view-right'] = makePrimitiveProcedure(
'view-right',
1,
function(MACHINE) {
var view = checkMockView(MACHINE, 'view-right', 0);
return view.right();
});
EXPORTS['view-up'] = makePrimitiveProcedure(
'view-up',
1,
function(MACHINE) {
var view = checkMockView(MACHINE, 'view-up', 0);
return view.up();
});
EXPORTS['view-down'] = makePrimitiveProcedure(
'view-down',
1,
function(MACHINE) {
var view = checkMockView(MACHINE, 'view-down', 0);
return view.down();
});
EXPORTS['view-text'] = makePrimitiveProcedure(
'view-text',
1,

20
web-world/racket-impl.rkt
View File

@ -1,7 +1,10 @@
#lang racket/base
(provide big-bang initial-view stop-when on-tick to-draw
->view view-focus view-text update-view-text
->view
view-focus
view-left view-right view-up view-down
view-text update-view-text
view-attr update-view-attr)
(define (big-bang world . handlers)
@ -33,6 +36,21 @@
(define (view-text v)
(error 'view-text "Please run in JavaScript context."))
(define (view-left v)
(error 'view-left))
(define (view-right v)
(error 'view-right))
(define (view-up v)
(error 'view-up))
(define (view-down v)
(error 'view-down))
(define (update-view-text v text)
(error 'update-view-text "Please run in JavaScript context."))