ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
269 lines (254 loc) • 8.25 kB
JavaScript
/**
_enyo.LeftRightArranger_ is an [enyo.Arranger](#enyo.Arranger) that displays
the active control and some of the previous and next controls. The active
control is centered horizontally in the container, and the previous and next
controls are laid out to the left and right, respectively.
Transitions between arrangements are handled by sliding the new control in
from the right and sliding the active control out to the left.
For more information, see the documentation on
[Arrangers](building-apps/layout/arrangers.html) in the Enyo Developer Guide.
*/
enyo.kind({
name: "enyo.LeftRightArranger",
kind: "Arranger",
//* The margin width (i.e., how much of the previous and next controls
//* are visible) in pixels
margin: 40,
//* @protected
axisSize: "width",
offAxisSize: "height",
axisPosition: "left",
constructor: enyo.inherit(function(sup) {
return function() {
sup.apply(this, arguments);
this.margin = this.container.margin != null ? this.container.margin : this.margin;
};
}),
size: function() {
var c$ = this.container.getPanels();
var port = this.containerBounds[this.axisSize];
var box = port - this.margin -this.margin;
for (var i=0, b, c; (c=c$[i]); i++) {
b = {};
b[this.axisSize] = box;
b[this.offAxisSize] = "100%";
c.setBounds(b);
}
},
start: enyo.inherit(function(sup) {
return function() {
sup.apply(this, arguments);
var s = this.container.fromIndex;
var f = this.container.toIndex;
var c$ = this.getOrderedControls(f);
var o = Math.floor(c$.length/2);
for (var i=0, c; (c=c$[i]); i++) {
if (s > f){
if (i == (c$.length - o)){
c.applyStyle("z-index", 0);
} else {
c.applyStyle("z-index", 1);
}
} else {
if (i == (c$.length-1 - o)){
c.applyStyle("z-index", 0);
} else {
c.applyStyle("z-index", 1);
}
}
}
};
}),
arrange: function(inC, inIndex) {
var i,c,b;
if (this.container.getPanels().length==1){
b = {};
b[this.axisPosition] = this.margin;
this.arrangeControl(this.container.getPanels()[0], b);
return;
}
var o = Math.floor(this.container.getPanels().length/2);
var c$ = this.getOrderedControls(Math.floor(inIndex)-o);
var box = this.containerBounds[this.axisSize] - this.margin -this.margin;
var e = this.margin - box * o;
for (i=0; (c=c$[i]); i++) {
b = {};
b[this.axisPosition] = e;
this.arrangeControl(c, b);
e += box;
}
},
calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
if (this.container.getPanels().length==1){
return 0;
}
var i = Math.abs(inI0 % this.c$.length);
//enyo.log(inI0, inI1);
return inA0[i][this.axisPosition] - inA1[i][this.axisPosition];
},
destroy: enyo.inherit(function(sup) {
return function() {
var c$ = this.container.getPanels();
for (var i=0, c; (c=c$[i]); i++) {
enyo.Arranger.positionControl(c, {left: null, top: null});
enyo.Arranger.opacifyControl(c, 1);
c.applyStyle("left", null);
c.applyStyle("top", null);
c.applyStyle("height", null);
c.applyStyle("width", null);
}
sup.apply(this, arguments);
};
})
});
//* @public
/**
_enyo.TopBottomArranger_ is an [enyo.Arranger](#enyo.Arranger) that displays
the active control and some of the previous and next controls. The active
control is centered vertically in the container, and the previous and next
controls are laid out above and below, respectively.
Transitions between arrangements are handled by sliding the new control in
from the bottom and sliding the active control out the top.
For more information, see the documentation on
[Arrangers](building-apps/layout/arrangers.html) in the Enyo Developer Guide.
*/
enyo.kind({
name: "enyo.TopBottomArranger",
kind: "LeftRightArranger",
//* Property of the drag event used to calculate the amount a drag moves
//* the layout
dragProp: "ddy",
//* Property of the drag event used to calculate the direction of a drag
dragDirectionProp: "yDirection",
//* Property of the drag event used to calculate whether a drag should occur
canDragProp: "vertical",
//* @protected
axisSize: "height",
offAxisSize: "width",
axisPosition: "top"
});
//* @public
/**
_enyo.SpiralArranger_ is an [enyo.Arranger](#enyo.Arranger) that arranges
controls in a spiral. The active control is positioned on top and the other
controls are laid out in a spiral pattern below.
Transitions between arrangements are handled by rotating the new control up
from below and rotating the active control down to the end of the spiral.
For more information, see the documentation on
[Arrangers](building-apps/layout/arrangers.html) in the Enyo Developer Guide.
*/
enyo.kind({
name: "enyo.SpiralArranger",
kind: "Arranger",
//* Always go through incremental arrangements when transitioning
incrementalPoints: true,
//* The amount of space between successive controls
inc: 20,
//* @protected
size: function() {
var c$ = this.container.getPanels();
var b = this.containerBounds;
var w = this.controlWidth = b.width/3;
var h = this.controlHeight = b.height/3;
for (var i=0, c; (c=c$[i]); i++) {
c.setBounds({width: w, height: h});
}
},
arrange: function(inC, inName) {
var s = this.inc;
for (var i=0, l=inC.length, c; (c=inC[i]); i++) {
var x = Math.cos(i/l * 2*Math.PI) * i * s + this.controlWidth;
var y = Math.sin(i/l * 2*Math.PI) * i * s + this.controlHeight;
this.arrangeControl(c, {left: x, top: y});
}
},
start: enyo.inherit(function(sup) {
return function() {
sup.apply(this, arguments);
var c$ = this.getOrderedControls(this.container.toIndex);
for (var i=0, c; (c=c$[i]); i++) {
c.applyStyle("z-index", c$.length - i);
}
};
}),
calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
return this.controlWidth;
},
destroy: enyo.inherit(function(sup) {
return function() {
var c$ = this.container.getPanels();
for (var i=0, c; (c=c$[i]); i++) {
c.applyStyle("z-index", null);
enyo.Arranger.positionControl(c, {left: null, top: null});
c.applyStyle("left", null);
c.applyStyle("top", null);
c.applyStyle("height", null);
c.applyStyle("width", null);
}
sup.apply(this, arguments);
};
})
});
//* @public
/**
_enyo.GridArranger_ is an [enyo.Arranger](#enyo.Arranger) that arranges
controls in a grid. The active control is positioned at the top-left of the
grid and the other controls are laid out from left to right and then from
top to bottom.
Transitions between arrangements are handled by moving the active control to
the end of the grid and shifting the other controls to the left, or by
moving it up to the previous row, to fill the space.
For more information, see the documentation on
[Arrangers](building-apps/layout/arrangers.html) in the Enyo Developer Guide.
*/
enyo.kind({
name: "enyo.GridArranger",
kind: "Arranger",
//* Always go through incremental arrangements when transitioning
incrementalPoints: true,
//* @public
//* Column width
colWidth: 100,
//* Column height
colHeight: 100,
//* @protected
size: function() {
var c$ = this.container.getPanels();
var w=this.colWidth, h=this.colHeight;
for (var i=0, c; (c=c$[i]); i++) {
c.setBounds({width: w, height: h});
}
},
arrange: function(inC, inIndex) {
var w=this.colWidth, h=this.colHeight;
var cols = Math.max(1, Math.floor(this.containerBounds.width / w));
var c;
for (var y=0, i=0; i<inC.length; y++) {
for (var x=0; (x<cols) && (c=inC[i]); x++, i++) {
this.arrangeControl(c, {left: w*x, top: h*y});
}
}
},
flowControl: enyo.inherit(function(sup) {
return function(inControl, inA) {
sup.apply(this, arguments);
enyo.Arranger.opacifyControl(inControl, inA.top % this.colHeight !== 0 ? 0.25 : 1);
};
}),
calcArrangementDifference: function(inI0, inA0, inI1, inA1) {
return this.colWidth;
},
destroy: enyo.inherit(function(sup) {
return function() {
var c$ = this.container.getPanels();
for (var i=0, c; (c=c$[i]); i++) {
enyo.Arranger.positionControl(c, {left: null, top: null});
c.applyStyle("left", null);
c.applyStyle("top", null);
c.applyStyle("height", null);
c.applyStyle("width", null);
}
sup.apply(this, arguments);
};
})
});