Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

converting __defineGetter__ to defineProperty for IE9 compatibility.

  • Loading branch information...
commit 74c0939f6c40059d06233061d4a543ac33392cfc 1 parent 9847459
Stephen Braitsch authored
View
2  local/header.php
@@ -8,7 +8,7 @@ function linkto($n){ global $root; echo $root.$n;}
<head>
<meta charset="utf-8">
<title>JS3 is a fast and lightweight drawing and animation library for the HTML5 JavaScript Canvas</title>
- <meta name="description" content="A lightweight port of the AS3 TweenLite library for the JavaScript Canvas">
+ <meta name="description" content="A fast and lightweight drawing and animation library for the HTML5 JavaScript Canvas">
<meta name="author" content="Stephen Braitsch">
<link href=<?php linkto('/vendor/bootstrap.min.css')?> rel="stylesheet">
<link href="http://yandex.st/highlightjs/6.1/styles/github.min.css" rel="stylesheet" >
View
BIN  src/.DS_Store
Binary file not shown
View
118 src/JS3.js
@@ -1,7 +1,7 @@
/**
* JS3 - A Drawing & Tweening API for the JavaScript Canvas
- * Version : 0.2.3
+ * Version : 0.2.4
* Documentation : http://js3.quietless.com/
*
* Copyright 2012 Stephen Braitsch :: @braitsch
@@ -27,22 +27,22 @@ function JS3(cnvs)
var _drawClean = true;
var _background = '#ffffff';
var _winTitle = 'My Canvas';
- var _clickInt = 0;
+ var _clickInt = 0;
var _downObj, _overObj, _dragObj, _stageEnter;
// public getters & setters //
- this.__defineGetter__("width", function() { return _width;});
- this.__defineGetter__("height", function() { return _height;});
- this.__defineGetter__("numChildren", function() { return _children.length;});
- this.__defineGetter__("position", function() {
+ Object.defineProperty(this, "width", {get: function() {return _width;}});
+ Object.defineProperty(this, "height", {get: function() {return _height;}});
+ Object.defineProperty(this, "numChildren", {get: function() {return _children.length;}});
+ Object.defineProperty(this, "position", {get: function() {
var x = 0; var y = 0; var e = _canvas;
while( e != null ) { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; }
- return {x:x, y:y};});
- this.__defineSetter__("drawClean", function(b) { _drawClean = b;});
- this.__defineSetter__("background", function(b) { _background = b; drawBackground();});
- this.__defineSetter__("windowTitle", function(s) { _winTitle = s;});
- this.__defineSetter__("interactive", function(b) { b ? addMouseEvents() : remMouseEvents(); });
+ return {x:x, y:y};}});
+ Object.defineProperty(this, "drawClean", {set: function(b) { _drawClean = b;}});
+ Object.defineProperty(this, "background", {set: function(b) { _background = b; drawBackground();}});
+ Object.defineProperty(this, "windowTitle", {set: function(s) { _winTitle = s;}});
+ Object.defineProperty(this, "interactive", {set: function(b) { b ? addMouseEvents() : remMouseEvents();}});
JS3setStageEvents(this);
// display list management //
@@ -138,6 +138,19 @@ function JS3(cnvs)
_downObj = _overObj;
onMouseEvent(_overObj, 'mouseDown');
}
+ // var onMU = function(e)
+ // {
+ // if (_dragObj){
+ // onMouseEvent(_dragObj, 'dragComplete'); _dragObj = _downObj = undefined;
+ // } else{
+ // if (_clickInt){
+ // clearInterval(_clickInt); _clickInt = null; onDoubleClick();
+ // } else{
+ // _clickInt = setTimeout(function(){ _clickInt = null; onSingleClick(); }, 200);
+ // }
+ // }
+ // onMouseEvent(_overObj, 'mouseUp');
+ // }
var onMU = function(e)
{
if (_dragObj){
@@ -148,7 +161,7 @@ function JS3(cnvs)
_clickInt = n;
}
onMouseEvent(_overObj, 'mouseUp');
- }
+ }
var onMM = function(e)
{
getMousePosition(e);
@@ -549,7 +562,6 @@ function JS3Text(o)
function JS3Image(o)
{
- JS3getBaseProps(this);
JS3getImageProps(this);
this.update = JS3.drawImage;
this.fill = this.stroke = false;
@@ -558,12 +570,12 @@ function JS3Image(o)
function JS3getBaseProps(o)
{
- o.__defineGetter__("size", function() { return o._size;});
- o.__defineSetter__("size", function(n) { o._size=o.width=o.height=n;});
- o.__defineGetter__("width", function() { return o._width;});
- o.__defineSetter__("width", function(n) { o._width=n; o.pts=[];});
- o.__defineGetter__("height", function() { return o._height;});
- o.__defineSetter__("height", function(n) { o._height=n; o.pts=[];});
+ Object.defineProperty(o, "size", { get: function() { return o._size;},
+ set: function(n) { o._size=o.width=o.height=n;}});
+ Object.defineProperty(o, "width", { get: function() { return o._width;},
+ set: function(n) { o._width=n; o.pts=[];}});
+ Object.defineProperty(o, "height", { get: function() { return o._height;},
+ set: function(n) { o._height=n; o.pts=[];}});
o.x=o.y=o.rotation=0; o._size=25; o.fillColor='#ddd'; o.strokeColor='#ccc'; o.fill=o.stroke=true;o.alpha=o.scaleX=o.scaleY=o.fillAlpha=o.strokeAlpha=1; o.strokeWidth=2;
JS3setObjEvents(o);
}
@@ -571,28 +583,30 @@ function JS3getBaseProps(o)
function JS3getLineProps(o)
{
o.capStyle='butt'; o.x1=o.y1=o.cx=o.cy=o.x2=o.y2=0;
- o.__defineSetter__("color", function(s) { o.strokeColor=s;});
- o.__defineSetter__("thickness", function(s) { o.strokeWidth=s;});
+ Object.defineProperty(o,"color", { set: function(s) { o.strokeColor=s;}});
+ Object.defineProperty(o,"thickness",{ set: function(s) { o.strokeWidth=s;}});
}
function JS3getPolyProps(o)
{
o.pts = [];
- o.__defineSetter__("x1", function(n) { o.pts[0] = n;});
- o.__defineSetter__("y1", function(n) { o.pts[1] = n;});
- o.__defineSetter__("x2", function(n) { o.pts[2] = n;});
- o.__defineSetter__("y2", function(n) { o.pts[3] = n;});
- o.__defineSetter__("x3", function(n) { o.pts[4] = n;});
- o.__defineSetter__("y3", function(n) { o.pts[5] = n;});
+ Object.defineProperty(o, "x1", { set: function(n) { o.pts[0] = n;}});
+ Object.defineProperty(o, "y1", { set: function(n) { o.pts[1] = n;}});
+ Object.defineProperty(o, "x2", { set: function(n) { o.pts[2] = n;}});
+ Object.defineProperty(o, "y2", { set: function(n) { o.pts[3] = n;}});
+ Object.defineProperty(o, "x3", { set: function(n) { o.pts[4] = n;}});
+ Object.defineProperty(o, "y3", { set: function(n) { o.pts[5] = n;}});
}
function JS3getImageProps(o)
{
o.image = new Image();
- o.__defineSetter__("src", function(s) { o.image.src=s;});
- o.__defineSetter__("ready", function(f) { o.image.onload=f;});
- o.__defineGetter__("width", function() { return o.image.width;});
- o.__defineGetter__("height", function() { return o.image.height;});
+ Object.defineProperty(o, "src", { set: function(s) { o.image.src=s;}});
+ Object.defineProperty(o, "ready", { set: function(f) { o.image.onload=f;}});
+ Object.defineProperty(o, "width", { get: function() { return o.image.width;}});
+ Object.defineProperty(o, "height", { get: function() { return o.image.height;}});
+ o.x=o.y=o.rotation=0; o.fillColor='#ddd'; o.strokeColor='#ccc'; o.fill=o.stroke=true;o.alpha=o.scaleX=o.scaleY=o.fillAlpha=o.strokeAlpha=1; o.strokeWidth=2;
+ JS3setObjEvents(o);
}
function JS3getTextProps(o)
@@ -614,27 +628,27 @@ function JS3getTextHeight(o)
function JS3setObjEvents(o)
{
- o.__defineSetter__("click", function(f) { o._click=f; o.enabled=true;});
- o.__defineSetter__("dclick", function(f) { o._doubleClick=f; o.enabled=true;});
- o.__defineSetter__("up", function(f) { o._mouseUp=f; o.enabled=true;});
- o.__defineSetter__("down", function(f) { o._mouseDown=f; o.enabled=true;});
- o.__defineSetter__("over", function(f) { o._mouseOver=f; o.enabled=true;});
- o.__defineSetter__("out", function(f) { o._mouseOut=f; o.enabled=true;});
- o.__defineGetter__("draggable", function() { return o._draggable;});
- o.__defineSetter__("draggable", function(b) { o._draggable=b; if (b==true) o.enabled=true;});
- o.__defineSetter__("dragStart", function(f) { o._dragStart=f;o.draggable=true;});
- o.__defineSetter__("dragChange", function(f) { o._dragChange=f;o.draggable=true;});
- o.__defineSetter__("dragComplete", function(f) { o._dragComplete=f;o.draggable=true;});
+ Object.defineProperty(o, "click", { set: function(f) { o._click=f; o.enabled=true;}});
+ Object.defineProperty(o, "dclick", { set: function(f) { o._doubleClick=f; o.enabled=true;}});
+ Object.defineProperty(o, "up", { set: function(f) { o._mouseUp=f; o.enabled=true;}});
+ Object.defineProperty(o, "down", { set: function(f) { o._mouseDown=f; o.enabled=true;}});
+ Object.defineProperty(o, "over", { set: function(f) { o._mouseOver=f; o.enabled=true;}});
+ Object.defineProperty(o, "out", { set: function(f) { o._mouseOut=f; o.enabled=true;}});
+ Object.defineProperty(o, "draggable", { get: function( ) { return o._draggable;},
+ set: function(b) { o._draggable=b; if (b==true) o.enabled=true;}});
+ Object.defineProperty(o, "dragStart", { set: function(f) { o._dragStart=f;o.draggable=true;}});
+ Object.defineProperty(o, "dragChange", { set: function(f) { o._dragChange=f;o.draggable=true;}});
+ Object.defineProperty(o, "dragComplete",{ set: function(f) { o._dragComplete=f;o.draggable=true;}});
}
function JS3setStageEvents(o)
{
- o.__defineSetter__("click", function(f) { o._click=f;});
- o.__defineSetter__("dclick", function(f) { o._doubleClick=f;});
- o.__defineSetter__("up", function(f) { o._mouseUp=f;});
- o.__defineSetter__("down", function(f) { o._mouseDown=f;});
- o.__defineSetter__("move", function(f) { o._mouseMove=f;});
- o.__defineSetter__("enter", function(f) { o._stageEnter=f;});
- o.__defineSetter__("leave", function(f) { o._stageLeave=f;});
+ Object.defineProperty(o, "click", { set: function(f) { o._click=f; }});
+ Object.defineProperty(o, "dclick", { set: function(f) { o._doubleClick=f; }});
+ Object.defineProperty(o, "up", { set: function(f) { o._mouseUp=f; }});
+ Object.defineProperty(o, "down", { set: function(f) { o._mouseDown=f; }});
+ Object.defineProperty(o, "move", { set: function(f) { o._mouseMove=f; }});
+ Object.defineProperty(o, "enter", { set: function(f) { o._stageEnter=f; }});
+ Object.defineProperty(o, "leave", { set: function(f) { o._stageLeave=f; }});
}
function JS3Event(type, target, owner, x, y)
@@ -667,9 +681,9 @@ function JS3Runner(func, delay, repeat, onComp)
this.r = repeat;
this.o = onComp;
this.t = Date.now();
- this.__defineSetter__("delay", function(n) { this.d=n;});
- this.__defineSetter__("onComplete", function(f) { this.o=f;});
- this.__defineSetter__("repeatCount", function(n) { this.r=n;});
+ Object.defineProperty(this, "delay", { set: function(n) { this.d=n; }});
+ Object.defineProperty(this, "onComplete", { set: function(f) { this.o=f; }});
+ Object.defineProperty(this, "repeatCount", { set: function(n) { this.r=n; }});
}
function JS3Trace(m) { try{ console.log(m); } catch(e){ return; }}
View
3  test.html
@@ -22,7 +22,8 @@
c2.fillColor = '#9C0C0C';
c2.x = 45;
c2.y = 35;
- c1.enabled = true;
+ c2.enabled = true;
+ c2.draggable = true;
stage.addChild(c2);
function onEvent(o)
{
View
25 tweening/index.php
@@ -5,7 +5,7 @@
<div id="header">
<h1>Tweening</h1>
<p>Tweening in JS3 is based on the familiar syntax of the popular <a href='http://www.greensock.com/tweenlite/'>Tweenlite ActionScript library.</a><hr>
- There are two ways to animate in JS3.<br>You can use <a class='anchor' href='#basic-tweening'>Tweens</a> to move individual objects or group objects together inside functions using <a class='anchor' href='#animating-timers'>Timers</a>.</p>
+ There are two ways to animate in JS3.<br>You can use <a class='anchor' href='#basic-tweening'>Tweens</a> to move individual objects or group objects together inside functions called <a class='anchor' href='#animating-runners'>Runners</a>.</p>
<hr>
</div>
@@ -43,11 +43,11 @@
<p>For a full list of the properties and callbacks you can pass to the Tween function, visit the <a href=<?php linkto('/api#api-tweening')?>>API section.</a></p><hr>
<!-- timed-frames -->
- <div id="animating-timers">
- <h2>Animating with Timers</h2>
- <p>You can manually control how often the canvas redraws itself by using the <strong><u>run</u></strong> method.<br>
-This method takes two arguments, a function to call and how often to call it in seconds.<br>
-The snippet below draws a circle and moves it ten pixels to the right every time 1/4 of a second.</p>
+ <div id="animating-runners">
+ <h2>Animating with Runners</h2>
+ <p>A second and more powerful way to animate is by using Runners which are just functions that execute on a timed delay.<br>
+ Simply pass a function to the stage <strong><u>run</u></strong> method and specify how often to call it in seconds.<br>
+ The snippet below draws a circle and moves it ten pixels to the right every time 1/4 of a second.</p>
<pre><code>
var c = new JS3Circle();
function update()
@@ -61,7 +61,7 @@ function update()
<canvas id="x5" width='898' height='100'></canvas>
<button id='x5-btn' class='btn btn-primary'>Start Updating</button>
<div class="clearfix"><hr></div>
- <p>You can also specify how many times the <strong><u>run</u></strong> method should call the function you passed to it.<br>
+ <p>You can also specify how many times to call the function you passed to the <strong><u>run</u></strong> method.<br>
The snippet below moves the circle fifty pixels to the right every time 1/2 second. It does this 5 times and then stops.</p>
<pre><code>
var c = new JS3Circle();
@@ -77,7 +77,7 @@ function update()
<button id='x6-btn' class='btn btn-primary'>Start Updating</button>
</div>
<div class="clearfix"><hr></div>
- <p>Note you can also pass a fourth argument to <strong><u>run</u></strong> specifying a callback to execute when all calls to run's update function have completed.<br>
+ <p>Optionally you can also pass a fourth argument to <strong><u>run</u></strong> specifying a callback to execute when all calls to run's update function have completed.<br>
The following snippet calls the update function every 1/2 second, fives times and then executes the callback "onUpdateComplete".
</p>
<pre><code>
@@ -91,11 +91,18 @@ function onUpdateComplete()
}
stage.run(update, .5, 5, onUpdateComplete);
</code></pre>
-<p>Lastly, calling <strong><u>run</u></strong> with just an update function and no other arguments will execute "update" on every frame tick, similar to the AS3 <a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html#ENTER_FRAME' target='blank'>OnEnterFrame.</a><br>
+<p><strong>Quick Tip :</strong> Calling <strong><u>run</u></strong> with just an update function and no other arguments will execute "update" on every frame tick, similar to the AS3 <a href='http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/Event.html#ENTER_FRAME' target='blank'>OnEnterFrame.</a><br>
At any time if you'd like to stop calling the function you passed to <strong><u>run</u></strong> simply pass the function to <strong><u>stop</u></strong></p>
<pre><code>
stage.stop(update);
</code></pre>
+ <p>The <strong><u>run</u></strong> method returns a JS3RunnerObject with the following properties that you can change at any time :</p>
+
+ <pre><code class='javascript'>
+ delay : Number // how often to call the runner function in seconds
+ repeatCount : Number // total number of times to call the runner function
+ onComplete : Function // callback to execute when all calls to the runner function have completed
+ </code></pre>
<div class="clearfix"><hr></div>
<!-- simple-example -->
Please sign in to comment.
Something went wrong with that request. Please try again.