Skip to content

Commit

Permalink
Added zim Frame module and small fixes (1.4)
Browse files Browse the repository at this point in the history 
Added zim Frame module with Frame class to handle scaling pages in
multiple ways.  Fixed a potentially undeclared stage call in animate
which affects move and pages.  Fixed bug in pages when transitioning
scaled pages.
  • Loading branch information
@danzen
danzen committed Mar 7, 2015
1 parent 5e72690 commit 720c517
Show file tree
Hide file tree
Showing 8 changed files with 790 additions and 80 deletions.
272 changes: 257 additions & 15 deletions zim.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

// ZIM js Interactive Media modules by Dan Zen http://danzen.com (c) 2014
// ZIM js Interactive Media modules by Dan Zen http://danzen.com (c) 2015
// zim.js includes all the basic zim coding modules http://zimjs.com
// free to use - donations welcome of course! http://zimjs.com/donate

Expand Down Expand Up @@ -751,6 +751,7 @@ we draw bounds for demonstration if you pass in a boundsShape shape
--*/
zim.hitTestBounds = function(a, b, boundsShape) {


if (zot(a) || zot(b) || !a.getBounds || !b.getBounds) return;
var boundsCheck = false;
if (boundsShape && boundsShape.graphics) boundsCheck=true;
Expand Down Expand Up @@ -899,15 +900,15 @@ and props for TweenJS tween (see CreateJS documentation) defaults to override:tr
returns target for chaining
--*/
zim.animate = function(target, obj, t, ease, callBack, params, wait, props) {
if (zot(target) || !target.on || zot(obj)) return;
if (zot(target) || !target.on || zot(obj) || !target.getStage()) return;
if (zot(ease)) ease = "quadInOut";
if (zot(wait)) wait = 0;
if (zot(props)) props = {override: true};
createjs.Tween.get(target, props)
.wait(wait)
.to(obj, t, createjs.Ease[ease])
.call(doneAnimating);
var listener = createjs.Ticker.on("tick", stage);
var listener = createjs.Ticker.on("tick", target.getStage());
function doneAnimating() {
if (callBack && typeof callBack === 'function') {(callBack)(params);}
createjs.Ticker.off("tick", listener);
Expand Down Expand Up @@ -1036,6 +1037,19 @@ will not be resized - really just to use while building and then comment it out
return obj;
}


/*--
zim.centerReg = function(obj)
centers the registration point on the bounds - obj must have bounds set
just a convenience function - returns obj for chaining
--*/
zim.centerReg = function(obj) {
if (zot(obj) || !obj.getBounds) {zog("zim create - centerReg(): please provide object with bounds set"); return;}
var oB = obj.getBounds();
obj.regX = oB.width/2;
obj.regY = oB.height/2;
return obj;
}

return zim;
} (zim || {});
Expand Down Expand Up @@ -2831,37 +2845,37 @@ if you want pages within a smaller area - consider using two canvas tags
if (trans == "slide") {
newPage.x = -(slides[dirIndex].x | 0);
newPage.y = -(slides[dirIndex].y | 0);
newPage.cache(0,0,hW+1,hH+1);
currentPage.cache(0,0,hW+1,hH+1);
newPage.cache(0,0,(hW+1)/newPage.scaleX,(hH+1)/newPage.scaleY);
currentPage.cache(0,0,(hW+1)/currentPage.scaleX,(hH+1)/currentPage.scaleY);
that.addChild(newPage);
that.addChild(currentPage);
zim.animate(currentPage, slides[dirIndex], that.speed, null, transEnd, [currentPage, newPage]);
zim.animate(newPage, slides2[dirIndex], that.speed);
} else if (trans == "reveal") {
newPage.cache(0,0,hW+1,hH+1);
currentPage.cache(0,0,hW+1,hH+1);
newPage.cache(0,0,(hW+1)/newPage.scaleX,(hH+1)/newPage.scaleY);
currentPage.cache(0,0,(hW+1)/currentPage.scaleX,(hH+1)/currentPage.scaleY);
that.addChild(newPage); // put destination under current page
that.addChild(currentPage);
zim.animate(currentPage, reveals[dirIndex], that.speed, null, transEnd, [currentPage, newPage]);
} else if (trans == "fade") {
newPage.cache(0,0,hW+1,hH+1);
currentPage.cache(0,0,hW+1,hH+1);
newPage.cache(0,0,(hW+1)/newPage.scaleX,(hH+1)/newPage.scaleY);
currentPage.cache(0,0,(hW+1)/currentPage.scaleX,(hH+1)/currentPage.scaleY);
newPage.alpha = 1;
that.addChild(newPage);
that.addChild(currentPage);
zim.animate(currentPage, {alpha:0}, that.speed, null, transEnd, [currentPage, newPage]);
} else if (trans == "black") {
newPage.cache(0,0,hW+1,hH+1);
currentPage.cache(0,0,hW+1,hH+1);
newPage.cache(0,0,(hW+1)/newPage.scaleX,(hH+1)/newPage.scaleY);
currentPage.cache(0,0,(hW+1)/currentPage.scaleX,(hH+1)/currentPage.scaleY);
newPage.alpha = 1;
that.addChild(newPage);
that.addChild(currentPage);
black.alpha = 0;
that.addChild(black);
zim.animate(black, {alpha:1}, that.speed/2, null, transEndHalf, [black, currentPage, newPage]);
} else if (trans == "white") {
newPage.cache(0,0,hW+1,hH+1);
currentPage.cache(0,0,hW+1,hH+1);
newPage.cache(0,0,(hW+1)/newPage.scaleX,(hH+1)/newPage.scaleY);
currentPage.cache(0,0,(hW+1)/currentPage.scaleX,(hH+1)/currentPage.scaleY);
newPage.alpha = 1;
that.addChild(newPage);
that.addChild(currentPage);
Expand Down Expand Up @@ -3229,11 +3243,11 @@ and in future perhaps OutlineManager
var that = this;
this.items = [];
this.add = function(a) {
that.items.push(a);
that.items.push(a);
}
this.resize = function() {
if (!that) return;
for (var i=0; i<that.items.length; i++) {
for (var i=0; i<that.items.length; i++) {
if (!that.items[i].resize()) that.items.splice(i); // was disposed
}
}
Expand Down Expand Up @@ -4358,5 +4372,233 @@ note: to just hide bounds, you use the B key
}
}

return zim;
} (zim || {});


//////////////// ZIM FRAME //////////////

// zimframe.js provides code to help you set up your coding environment

var zim = function(zim) {

if (zon) zog("ZIM FRAME Module");

/*--
zim.Frame = function(scaling, width, height, rollover, touch, scrollTop)
Frame class
extends a createjs EventDispatcher
var frame = new zim.Frame(parameters);
creates your canvas and stage
Frame lets you decide how you want your stage to scale
It also provides events for resizing and orientation change
as well as a way to remake the canvas if necessary
PARAMETERS
scaling can have values as follows with full being the default
"none" sets canvas and stage to dimensions and does not scale if window changes
"fit" sets canvas and stage to dimensions and scales to fit inside window size
"outside" sets canvas and stage to dimensions and scales to fit outside window size
"full" sets canvas and stage to window size (canvas is actually set to screen size)
width and height - will set both the exact canvas and stage size when scaling is set to none
they will set the stage width and height when set to fit or outside (the canvas is then scaled)
this is handy because all your dimensions are set to start
width and height are ignored when scaling is set to full as these are set to the window width and height
rollover - activates rollovers and is set to true by default
touch - activates touch on mobile and is set to true by default
scrollTop - activates scrolling on older apple devices to hide the url bar and defaults to true
PROPERTIES
stage - read only reference to the createjs stage - to change run remakeCanvas()
stageW - read only reference to the stage width - to change run remakeCanvas()
stageH - read only reference to the stage height - to change run remakeCanvas()
zil - reference to zil events that stop canvas from shifting
METHODS
remakeCanvas(width, height) - removes old canvas and makes a new one and a new stage
will have to set your local stage, stageW and stageH variables again
dispose() - only removes canvas, resize listener and stage
--*/
zim.Frame = function(scaling, width, height, rollover, touch, scrollTop) {
function makeFrame() {

if (zot(scaling)) scaling = "full";
if (zot(width)) width = 500;
if (zot(height)) height = 500;
if (zot(rollover)) rollover = true;
if (zot(touch)) touch = true;
if (zot(scrollTop)) scrollTop = true;

var that = this;
var stageW = width; // ignored if scaling is full
var stageH = height;
var largest; // automatically set
var appOrientation; // watch out - orientation keyword is used by apple - sigh
var lastOrientation; // used to detect orientation change
var stage;
var appReady = false; // check variable - set true when ready ;-) (watch - "ready" is reserved)

window.addEventListener('load', init);
if (scaling != "none") window.addEventListener('resize', sizeCanvas);

function init() {

makeCanvas();
makeStage();

// for older mobile - pan hides the location bar
if (scrollTop) {setTimeout(function() {window.scrollTo(0, 0);}, 100);}

that.dispatchEvent("ready");

if (scaling=="full") {
appReady = true;
fullResize();
}
}

function makeStage() {
if (scaling != "none") sizeCanvas();
if (scaling == "full") {that.zil = zil();} // keep canvas still (from arrows, scrollwheel, etc.)
stage = new createjs.Stage("myCanvas");
stage.setBounds(0, 0, stageW, stageH);
if (rollover) stage.enableMouseOver(10); // if you need mouse rollover
if (touch) createjs.Touch.enable(stage,true); // added for mobile
}

function fullResize() {
if (!appReady) return;
that.dispatchEvent("resize");
}

function sizeCanvas() {
var can = zid("myCanvas");
var w = zim.windowWidth();
var h = zim.windowHeight();
var newW; var newH;

appOrientation = that.orientation = (w > h) ? "horizontal" : "vertical";
if (appOrientation != lastOrientation) { // new orientation
lastOrientation = appOrientation;
that.dispatchEvent("orientation");
}
if (!can) return;

if (scaling == "fit") {
// scales canvas to fit dimensions inside screen
if (w/h >= stageW/stageH) {
newH = h;
newW = newH*stageW/stageH;
} else {
newW = w;
newH = newW*stageH/stageW;
}
} else if (scaling == "outside") {
// scales canvas so screen inside dimensions
document.body.style.overflow = "hidden";
if (w/h >= stageW/stageH) {
newW = w;
newH = newW*stageH/stageW;
} else {
newH = h;
newW = newH*stageW/stageH;
}
} else if (scaling == "full") {
// does not scale canvas but sets width and height to screen
document.body.style.overflow = "hidden";
can.style.left = can.style.top = "0px";
stageW = w;
stageH = h;
if (stage) stage.setBounds(0,0,stageW,stageH);
fullResize();
return;
}

can.style.width = newW + "px";
can.style.height = newH + "px";
// horizontal center
can.style.left = ((w-newW)/2) + "px";
// vertical center
can.style.top = ((h-newH)/2) + "px";
}

function makeCanvas() {
// note the width and height of a canvas
// are separate from from the width and height styles
// so beware of unintentionally stretching the canvas with styles

var canvas = document.createElement("canvas");
canvas.setAttribute("id", "myCanvas");
largest = Math.max(window.innerWidth, screen.width, window.innerHeight, screen.height);
// does not work on iOS6 in full screen if loading from icon unless keep canvas at device size
// thank you apple for this and many other days of hell
if (scaling == "full") {
canvas.setAttribute("width", largest);
canvas.setAttribute("height", largest);
} else {
canvas.setAttribute("width", stageW);
canvas.setAttribute("height", stageH);
}
document.body.appendChild(canvas);
}

Object.defineProperty(that, 'stage', {
get: function() {
return stage;
},
set: function(s) {
zog("zim.Frame(): stage is read only - see remakeCanvas(), perhaps");
}
});

Object.defineProperty(that, 'stageW', {
get: function() {
return stageW;
},
set: function(w) {
zog("zim.Frame(): stageW is read only - see remakeCanvas(), perhaps");
}
});

Object.defineProperty(that, 'stageH', {
get: function() {
return stageH;
},
set: function(h) {
zog("zim.Frame(): stageH is read only - see remakeCanvas(), perhaps");
}
});

this.remakeCanvas = function(width, height) {
if (scaling == "full") return;
if (zot(width)) width = stageW;
if (zot(height)) height = stageH;
if (zid("myCanvas")) zid("myCanvas").parentNode.removeChild(zid("myCanvas"));
stageW = width;
stageH = height;
makeCanvas();
makeStage();
}

this.dispose = function() {
window.removeEventListener('resize', sizeCanvas);
stage.removeAllChildren();
stage.removeAllEventListeners();
if (zid("myCanvas")) zid("myCanvas").parentNode.removeChild(zid("myCanvas"));
stage = null;
that = null;
}

}
// note the actual class is wrapped in a function
// because createjs might not have existed at load time
makeFrame.prototype = new createjs.EventDispatcher();
makeFrame.prototype.constructor = zim.Frame;
return new makeFrame();
}

return zim;
} (zim || {});
6 changes: 3 additions & 3 deletions zim.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 720c517

Please sign in to comment.