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

@@ -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.
 
 

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"
 );

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}));
     }
 });

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});
+		}
+	}
+});

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(){

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);