From cec8ea6a1e734696f99ad9110b994fe45c47a061 Mon Sep 17 00:00:00 2001 From: Steven Feaster Date: Mon, 4 Jun 2012 09:27:17 -0700 Subject: [PATCH] Removing default panelStack reference No longer automatically adding a reference to the PanelStack when pushing a new component. Up to the app to pass the PanelStack as needed. --- README.md | 4 +- examples/PanelStacking/package.js | 3 +- examples/PanelStacking/source/App.js | 4 +- .../source/CardSlideInOutArranger.js | 44 +++++++++++++++++++ examples/PanelStacking/source/View.js | 11 +++-- source/PanelStack.js | 6 +-- 6 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 examples/PanelStacking/source/CardSlideInOutArranger.js diff --git a/README.md b/README.md index bccb573..7fd1efd 100644 --- a/README.md +++ b/README.md @@ -39,9 +39,7 @@ this.$.panelStack.push(new View({})); AND this.$.panelStack.pop(); - -Additionally you can use this.panelStack directly from any of the pushed components to transition in/out new compents. PanelStack adds a reference to itself to any component that it receives in a push call. The pushed component may then push new components in/out or pop itself out. - + Note that the example uses Onyx, but it isn't required for use of PanelStack. diff --git a/examples/PanelStacking/package.js b/examples/PanelStacking/package.js index abdcdc5..4949392 100644 --- a/examples/PanelStacking/package.js +++ b/examples/PanelStacking/package.js @@ -3,5 +3,6 @@ enyo.depends( "$lib/onyx", "$lib/onyx/source/wip-package.js", "./source/App.js", - "./source/View.js" + "./source/View.js", + "./source/CardSlideInOutArranger.js" ); diff --git a/examples/PanelStacking/source/App.js b/examples/PanelStacking/source/App.js index 50efb05..2174c64 100755 --- a/examples/PanelStacking/source/App.js +++ b/examples/PanelStacking/source/App.js @@ -6,6 +6,8 @@ enyo.kind({ ], create: function() { this.inherited(arguments); - this.$.panelStack.push(new View({number:1})); //create a new component, set its properties & push it onto the stack + //create a new component, set its properties & push it onto the stack + //note that we give the new view a reference to the PanelStack so it can push/pop panels as well + this.$.panelStack.push(new View({panelStack:this.$.panelStack,number:1})); } }); \ No newline at end of file diff --git a/examples/PanelStacking/source/CardSlideInOutArranger.js b/examples/PanelStacking/source/CardSlideInOutArranger.js new file mode 100644 index 0000000..67f81c9 --- /dev/null +++ b/examples/PanelStacking/source/CardSlideInOutArranger.js @@ -0,0 +1,44 @@ +enyo.kind({ + name: "enyo.CardSlideInOutArranger", + kind: "CardArranger", + start: function() { + var c$ = this.container.children; + for (var i=0, c; c=c$[i]; i++) { + c.setShowing(i == this.container.fromIndex || i == this.container.toIndex); + if (c.showing) { + c.resized(); + } + } + var l = this.container.fromIndex; + var i = this.container.toIndex; + this.container.transitionPoints = [ + i + "." + l + ".s", + i + "." + l + ".f" + ] + }, + finish: function() { + this.inherited(arguments); + var c$ = this.container.children; + for (var i=0, c; c=c$[i]; i++) { + c.setShowing(i == this.container.toIndex); + } + }, + arrange: function(inC, inName) { + var p = inName.split("."); + var f = p[0], s= p[1], starting = (p[2] == "s"); + var b = this.containerBounds.width; + for (var i=0, c$=this.container.children, c, b, v; c=c$[i]; i++) { + v = b; + if (s == i) { + v = starting ? 0 : -b; + } + if (f == i) { + v = starting ? b : 0; + } + if (s == i && s == f) { + v = 0; + } + this.arrangeControl(c, {left: (f < s) ? -v : v}); + } + } +}); \ No newline at end of file diff --git a/examples/PanelStacking/source/View.js b/examples/PanelStacking/source/View.js index 7c2c00f..43b0c8e 100644 --- a/examples/PanelStacking/source/View.js +++ b/examples/PanelStacking/source/View.js @@ -1,7 +1,8 @@ enyo.kind({ name: "View", published: { - number: 0 //current view number + panelStack: "", //reference to the containing PanelStack + number: "" //current view number }, components: [ {kind: "FittableRows", classes: "enyo-fit", components: [ @@ -13,7 +14,8 @@ enyo.kind({ {content: "Transitions"}, {kind: "onyx.Menu", components: [ {name: "CardArranger", content: "CardArranger", ontap:"setTransition"}, - {name: "CardSlideInArranger", content: "CardSlideInArranger", ontap:"setTransition"} + {name: "CardSlideInArranger", content: "CardSlideInArranger", ontap:"setTransition"}, + {name: "CardSlideInOutArranger", content: "CardSlideInOutArranger", ontap:"setTransition"} ]} ]} ]}, @@ -25,8 +27,9 @@ enyo.kind({ this.$.viewNumber.setContent(this.number); }, pushPanel: function(){ - var nextView = new View({}); //create a new component - nextView.setNumber(this.number+1); //update the component before pushing it onto the stack + var nextView = new View({}); //create a new component & update it's properties before pushing it onto the stack + nextView.setNumber(this.number+1); + nextView.setPanelStack(this.panelStack); this.panelStack.push(nextView); }, popPanel: function(){ diff --git a/source/PanelStack.js b/source/PanelStack.js index 2857197..51e8c0f 100644 --- a/source/PanelStack.js +++ b/source/PanelStack.js @@ -11,7 +11,7 @@ enyo.kind({ //pulled from Panels.js this.flow(); this.reflow(); - this.setIndex(this.index); + this.setIndex(this.index); //important change - set index to this.index rather than 0 } }); @@ -36,9 +36,7 @@ enyo.kind({ component.owner = pl; pl.addControl(component); - /*give the new component/panel a reference to this PanelStack so it can push/pop panels as well*/ - component.panelStack = this; - + //render the control & update the panels component.render(); pl.reflow(); pl.setIndex(i);