diff --git a/asset/drag.js b/asset/drag.js
new file mode 100644
index 000000000..f4bbda911
--- /dev/null
+++ b/asset/drag.js
@@ -0,0 +1,60 @@
+
+var Drag = Nuclear.createAction({
+ install: function () {
+ var option = this.option;
+ this.currentPosition = { x: 0, y: 0 };
+ this.moveElement = typeof option.moveElement === "string" ? document.querySelector(option.moveElement) : option.moveElement;
+ this.dragElement = typeof option.dragElement === "string" ? document.querySelector(option.dragElement) : option.dragElement;
+ Nuclear.css(this.moveElement, "position", "absolute");
+ Nuclear.css(this.dragElement, "cursor", option.cursor || "move");
+
+ Nuclear.addEvent(this.dragElement, "mousedown", this._mousedown.bind(this));
+
+ if (Nuclear.css(this.moveElement, "top") === "auto") Nuclear.css(this.moveElement, "top", "0px");
+ if (Nuclear.css(this.moveElement, "left") === "auto") Nuclear.css(this.moveElement, "left", "0px");
+
+ this._docMove = this._mousemove.bind(this);
+ this._docUp = this._mouseup.bind(this);
+ this.stopped = false;
+ },
+ _mousedown: function (evt) {
+ this.currentPosition.x = evt.pageX;
+ this.currentPosition.y = evt.pageY;
+ Nuclear.addEvent(document, "mousemove", this._docMove);
+ Nuclear.addEvent(document, "mouseup", this._docUp);
+ evt.stopDrag = function () {
+
+ this.stopped = true;
+ }.bind(this);
+ if (this.option.start) {
+ this.option.start(evt);
+ }
+ },
+ _mousemove: function (evt) {
+ if (this.stopped) return;
+ var dx = evt.pageX - this.currentPosition.x;
+ var dy = evt.pageY - this.currentPosition.y;
+ if (this.option.direction) {
+ if (this.option.direction.toUpperCase() == "X") dy = 0;
+ if (this.option.direction.toUpperCase() == "Y") dx = 0;
+ }
+ Nuclear.css(this.moveElement, "left", (parseInt(Nuclear.css(this.moveElement, "left")) + dx) + "px");
+ Nuclear.css(this.moveElement, "top", (parseInt(Nuclear.css(this.moveElement, "top")) + dy) + "px");
+ if (this.option.move) {
+ this.option.move(evt);
+ }
+ this.currentPosition.x = evt.pageX;
+ this.currentPosition.y = evt.pageY;
+ evt.preventDefault();
+
+ },
+ _mouseup: function (evt) {
+ Nuclear.removeEvent(document, "mousemove", this._docMove);
+ Nuclear.removeEvent(document, "mouseup", this._docUp);
+ if (this.option.end) {
+ this.option.end(evt);
+ }
+ this.stopped = false;
+
+ }
+})
\ No newline at end of file
diff --git a/asset/layout.js b/asset/layout.js
new file mode 100644
index 000000000..164a53be5
--- /dev/null
+++ b/asset/layout.js
@@ -0,0 +1,511 @@
+///
+var Layout =Nuclear.createAction({
+ install:function(){
+ var option = Nuclear.merge({
+ topHeight: 50,
+ topResize: true,
+ leftWidth: 180,
+ leftResize: true,
+ rightWidth: 80,
+ rightResize: true,
+ bottomHeight: 50,
+ bottomResize: true,
+ intervalSize: 10,
+ minDistance: 40,
+ togglerSize: 20,
+ container: "body"
+ }, this.option);
+ this.option = option;
+ this.parent = document.querySelector(option.container);
+ if (option.container === "body") {
+ this.viewport = Nuclear.getViewport();
+ this.parent.style.height = this.viewport.height + "px";
+ } else {
+ this.viewport = {};
+ this.viewport.width = parseInt(Nuclear.css(this.parent, "width"))
+ this.viewport.height = parseInt(Nuclear.css(this.parent, "height"))
+ }
+ Nuclear.css(this.parent, "margin", "0");
+ Nuclear.css(this.parent, "padding", "0");
+ Nuclear.css(this.parent, "overflow", "hidden");
+ if (Nuclear.css(this.parent, "position") === "static") {
+ Nuclear.css(this.parent, "position", "relative");
+ }
+ this.top = this.parent.querySelector(".nuclear-layout-top");
+ this.bottom = this.parent.querySelector(".nuclear-layout-bottom");
+ this.left = this.parent.querySelector(".nuclear-layout-left");
+ this.right = this.parent.querySelector(".nuclear-layout-right");
+ this.center = this.parent.querySelector(".nuclear-layout-center");
+
+ this.topInterval = document.createElement("div");
+ Nuclear.addClass(this.topInterval, "nuclear-layout-topInterval");
+ this.bottomInterval = document.createElement("div");
+ Nuclear.addClass(this.bottomInterval, "nuclear-layout-bottomInterval");
+ this.leftInterval = document.createElement("div");
+ Nuclear.addClass(this.leftInterval, "nuclear-layout-leftInterval");
+ this.rightInterval = document.createElement("div");
+ Nuclear.addClass(this.rightInterval, "nuclear-layout-rightInterval");
+ this.parent.appendChild(this.topInterval);
+ this.parent.appendChild(this.leftInterval);
+ this.parent.appendChild(this.rightInterval);
+ this.parent.appendChild(this.bottomInterval);
+
+ Nuclear.css(this.rightInterval, "overflow", "hidden");
+ Nuclear.css(this.leftInterval, "overflow", "hidden");
+ Nuclear.css(this.bottomInterval, "overflow", "hidden");
+ Nuclear.css(this.topInterval, "overflow", "hidden");
+
+ this.topToggler = document.createElement("div");
+ Nuclear.addClass(this.topToggler, "nuclear-layout-topToggler");
+ this.topInterval.appendChild(this.topToggler);
+ this.bottomToggler = document.createElement("div");
+ Nuclear.addClass(this.bottomToggler, "nuclear-layout-bottomToggler");
+ this.bottomInterval.appendChild(this.bottomToggler);
+ this.leftToggler = document.createElement("div");
+ this.leftInterval.appendChild(this.leftToggler);
+ Nuclear.addClass(this.leftToggler, "nuclear-layout-leftToggler");
+ this.rightToggler = document.createElement("div");
+ this.rightInterval.appendChild(this.rightToggler);
+ Nuclear.addClass(this.rightToggler, "nuclear-layout-rightToggler");
+
+ this.absolute(this.top, this.bottom, this.left, this.right, this.center, this.topInterval, this.bottomInterval, this.leftInterval, this.rightInterval, this.topToggler, this.bottomToggler, this.leftToggler, this.rightToggler);
+
+
+
+
+
+ Nuclear.css(this.topToggler, "cursor", "pointer");
+ Nuclear.css(this.bottomToggler, "cursor", "pointer");
+ Nuclear.css(this.leftToggler, "cursor", "pointer");
+ Nuclear.css(this.rightToggler, "cursor", "pointer");
+ Nuclear.css(this.topToggler, "width", option.togglerSize + "px");
+ Nuclear.css(this.bottomToggler, "width", option.togglerSize + "px");
+ Nuclear.css(this.leftToggler, "height", option.togglerSize + "px");
+ Nuclear.css(this.rightToggler, "height", option.togglerSize + "px");
+ Nuclear.css(this.topToggler, "height", option.intervalSize + "px");
+ Nuclear.css(this.bottomToggler, "height", option.intervalSize + "px");
+ Nuclear.css(this.leftToggler, "width", option.intervalSize + "px");
+ Nuclear.css(this.rightToggler, "width", option.intervalSize + "px");
+ //Nuclear.addEvent(this.topToggler, "click", this.topToggle.bind(this));
+ //Nuclear.addEvent(this.bottomToggler, "click", this.bottomToggle.bind(this));
+ //Nuclear.addEvent(this.leftToggler, "click", this.leftToggle.bind(this));
+ //Nuclear.addEvent(this.rightToggler, "click", this.rightToggle.bind(this));
+
+ this.bakOption = [option.topHeight, option.rightWidth, option.bottomHeight, option.leftWidth, option.intervalSize];
+
+
+
+
+ var self = this;
+ self.toggleFlag = true;
+ if (option.topHeight > 0) {
+ if (option.topResize) {
+ new Drag({
+ dragElement: this.topInterval,
+ moveElement: this.topInterval,
+ direction: "y",
+ cursor: "n-resize",
+ start: function (evt) {
+ if (self.top.style.display == "none") {
+ self.topToggle();
+ evt.stopDrag();
+ return;
+ }
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-topToggler")) {
+ self.toggleFlag = true;
+
+ }
+ Nuclear.css(self.topInterval, "backgroundColor", "rgba(222,222,222,.5)");
+ },
+ move: function () {
+ self.toggleFlag = false;
+ },
+ end: function (evt) {
+ var top = parseInt(Nuclear.css(self.topInterval, "top"));
+ if (top < option.minDistance) {
+ Nuclear.css(self.topInterval, "top", option.minDistance + "px");
+ }
+ if (top > self.viewport.height - option.minDistance) {
+ Nuclear.css(self.topInterval, "top", (self.viewport.height - option.minDistance) + "px");
+ }
+ var maxTop = parseInt(Nuclear.css(self.bottomInterval, "top")) - option.minDistance;
+ if (top > maxTop) {
+ Nuclear.css(self.topInterval, "top", maxTop + "px");
+ }
+
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-topToggler") && self.toggleFlag) {
+ self.topToggle();
+ } else {
+
+ self.option.topHeight = parseInt(Nuclear.css(self.topInterval, "top"));
+
+ self.bakOption[0] = self.option.topHeight;
+ Nuclear.css(self.topInterval, "backgroundColor", "rgba(0,0,0,0)");
+ self.reFlow();
+ }
+ }
+ })
+ } else {
+ Nuclear.addEvent(this.topToggler, "click", this.topToggle.bind(this));
+ }
+ } else {
+ this.topInterval.style.display = "none";
+ this.hideTop = true;
+ Nuclear.css(this.top, "display", "none")
+ Nuclear.css(this.topToggler, "display", "none")
+ }
+
+ if (option.bottomHeight > 0) {
+ if (option.bottomResize) {
+ new Drag({
+ dragElement: this.bottomInterval,
+ moveElement: this.bottomInterval,
+ direction: "y",
+ cursor: "n-resize",
+ start: function (evt) {
+ if (self.bottom.style.display == "none") {
+ self.bottomToggle();
+ evt.stopDrag();
+ return;
+ }
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-bottomToggler")) {
+ self.toggleFlag = true;
+ }
+ Nuclear.css(self.bottomInterval, "backgroundColor", "rgba(222,222,222,.5)");
+ },
+ move: function () {
+ self.toggleFlag = false;
+ },
+ end: function (evt) {
+ var top = parseInt(Nuclear.css(self.bottomInterval, "top"));
+ if (top < option.minDistance) {
+ Nuclear.css(self.bottomInterval, "top", option.minDistance + "px");
+ }
+ if (top > self.viewport.height - option.minDistance ) {
+
+ Nuclear.css(self.bottomInterval, "top", (self.viewport.height-option.minDistance) + "px");
+ }
+ var minTop = parseInt(Nuclear.css(self.topInterval, "top")) + option.minDistance;
+ if (top < minTop) {
+
+ Nuclear.css(self.bottomInterval, "top", minTop + "px");
+ }
+
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-bottomToggler") && self.toggleFlag) {
+
+ self.bottomToggle();
+ } else {
+ Nuclear.css(self.bottomInterval, "backgroundColor", "rgba(0,0,0,0)");
+ self.option.bottomHeight = self.viewport.height - parseInt(Nuclear.css(self.bottomInterval, "top")) - self.option.intervalSize;
+ self.bakOption[2] = self.option.bottomHeight;
+ self.reFlow();
+ }
+ }
+ })
+ } else {
+ Nuclear.addEvent(this.bottomToggler, "click", this.bottomToggle.bind(this));
+ }
+ } else {
+ this.bottomInterval.style.display = "none";
+ this.hideBottom = true;
+ Nuclear.css(this.bottom, "display", "none")
+ Nuclear.css(this.bottomToggler, "display", "none")
+ }
+
+
+ if (option.leftWidth > 0) {
+ if (option.leftResize) {
+ new Drag({
+ dragElement: this.leftInterval,
+ moveElement: this.leftInterval,
+ direction: "x",
+ cursor: "e-resize",
+ start: function (evt) {
+ if (self.left.style.display == "none") {
+ self.leftToggle();
+ evt.stopDrag();
+ return;
+ }
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-leftToggler")) {
+ self.toggleFlag = true;
+ }
+ Nuclear.css(self.leftInterval, "backgroundColor", "rgba(222,222,222,.5)");
+ },
+ move: function () {
+ self.toggleFlag = false;
+ },
+ end: function (evt) {
+ var left = parseInt(Nuclear.css(self.leftInterval, "left"));
+ if (left > self.viewport.width - 1) {
+ Nuclear.css(self.leftInterval, "left", (self.viewport.width - option.minDistance) + "px");
+ }
+ if (left < option.minDistance) {
+ Nuclear.css(self.leftInterval, "left", option.minDistance + "px");
+ }
+ var maxLeft = parseInt(Nuclear.css(self.rightInterval, "left")) - option.minDistance;
+ if (left > maxLeft) {
+
+ Nuclear.css(self.leftInterval, "left", maxLeft + "px");
+ }
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-leftToggler") && self.toggleFlag) {
+
+ self.leftToggle();
+ } else {
+ Nuclear.css(self.leftInterval, "backgroundColor", "rgba(0,0,0,0)");
+ self.option.leftWidth = parseInt(Nuclear.css(self.leftInterval, "left"));
+ self.bakOption[3] = self.option.leftWidth;
+ self.reFlow();
+ }
+ }
+ })
+ } else {
+ Nuclear.addEvent(this.leftToggler, "click", this.leftToggle.bind(this));
+ }
+ } else {
+ this.leftInterval.style.display = "none";
+ this.hideLeft = true;
+ Nuclear.css(this.left, "display", "none")
+ Nuclear.css(this.leftToggler, "display", "none")
+ }
+ if (option.rightWidth > 0) {
+ if (option.rightResize) {
+ new Drag({
+ dragElement: this.rightInterval,
+ moveElement: this.rightInterval,
+ direction: "x",
+ cursor: "e-resize",
+ start: function (evt) {
+ if (self.right.style.display == "none") {
+ self.rightToggle();
+ evt.stopDrag();
+ return;
+ }
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-rightToggler")) {
+ self.toggleFlag = true;
+ }
+ Nuclear.css(self.rightInterval, "backgroundColor", "rgba(222,222,222,.5)");
+ },
+ move: function () {
+ self.toggleFlag = false;
+ },
+ end: function (evt) {
+ var left = parseInt(Nuclear.css(self.rightInterval, "left"));
+ if (left < option.minDistance) {
+ Nuclear.css(self.rightInterval, "left", option.minDistance + "px");
+ }
+ if (left > self.viewport.width - option.minDistance) {
+ Nuclear.css(self.rightInterval, "left", (self.viewport.width -option.minDistance) + "px");
+ }
+ var minLeft = parseInt(Nuclear.css(self.leftInterval, "left")) + option.minDistance;
+ if (left < minLeft) {
+
+ Nuclear.css(self.rightInterval, "left", minLeft + "px");
+ }
+ var obj = obj = evt.srcElement ? evt.srcElement : evt.target;
+ if (Nuclear.hasClass(obj, "nuclear-layout-rightToggler") && self.toggleFlag) {
+
+ self.rightToggle();
+ } else {
+ Nuclear.css(self.rightInterval, "backgroundColor", "rgba(0,0,0,0)");
+ self.option.rightWidth = self.viewport.width - parseInt(Nuclear.css(self.rightInterval, "left")) - self.option.intervalSize;
+ self.bakOption[1] = self.option.rightWidth;
+ self.reFlow();
+ }
+ }
+ })
+ } else {
+ Nuclear.addEvent(this.rightToggler, "click", this.rightToggle.bind(this));
+ }
+ } else {
+ this.rightInterval.style.display = "none";
+ this.hideRight = true;
+ Nuclear.css(this.right, "display", "none")
+ Nuclear.css(this.rightToggler, "display", "none")
+ }
+ //var self = this;
+ //setTimeout(function () {
+
+ // Nuclear.css(self.parent, "display", "block");
+ //}, 1000)
+
+ Nuclear.css(this.topToggler, "backgroundColor", "#ccc");
+ Nuclear.css(this.bottomToggler, "backgroundColor", "#ccc");
+ Nuclear.css(this.leftToggler, "backgroundColor", "#ccc");
+ Nuclear.css(this.rightToggler, "backgroundColor", "#ccc");
+ Nuclear.css(this.center, "overflow", "auto");
+ if (option.container === "body") {
+ Nuclear.addEvent(window, "resize", this.wResize.bind(this));
+ }
+ this.reFlow()
+ },
+ absolute: function () {
+ for (var i = 0, len = arguments.length; i < len; i++) {
+
+ Nuclear.css(arguments[i], "position", "absolute");
+ }
+ },
+ wResize: function () {
+ this.viewport = Nuclear.getViewport();
+ this.parent.style.height = this.viewport.height + "px";
+ this.reFlow();
+ },
+ topToggle: function (evt) {
+ var option = this.option;
+ if (Nuclear.css(this.top, "display") !== "none") {
+ option.topHeight = 0;
+ Nuclear.css(this.top, "display", "none");
+ if (option.topResize) Nuclear.css(this.topInterval, "cursor", "pointer");
+
+ } else {
+ option.topHeight = this.bakOption[0];
+ Nuclear.css(this.top, "display", "block");
+ if (option.topResize) Nuclear.css(this.topInterval, "cursor", "n-resize");
+ }
+
+ this.reFlow();
+
+ },
+ bottomToggle: function (evt) {
+ var option = this.option;
+ if (Nuclear.css(this.bottom, "display") !== "none") {
+ option.bottomHeight = 0;
+ Nuclear.css(this.bottom, "display", "none");
+ if (option.bottomResize) Nuclear.css(this.bottomInterval, "cursor", "pointer");
+ } else {
+ option.bottomHeight = this.bakOption[2];
+ Nuclear.css(this.bottom, "display", "block");
+ if (option.bottomResize) Nuclear.css(this.bottomInterval, "cursor", "n-resize");
+
+ }
+
+ this.reFlow();
+
+ },
+
+ leftToggle: function (evt) {
+ var option = this.option;
+ if (Nuclear.css(this.left, "display") !== "none") {
+ option.leftWidth = 0;
+ Nuclear.css(this.left, "display", "none");
+ if (option.leftResize) Nuclear.css(this.leftInterval, "cursor", "pointer");
+ } else {
+ option.leftWidth = this.bakOption[3];
+ Nuclear.css(this.left, "display", "block");
+ if (option.leftResize) Nuclear.css(this.leftInterval, "cursor", "e-resize");
+ }
+
+ this.reFlow();
+
+ },
+ rightToggle: function (evt) {
+ var option = this.option;
+ if (Nuclear.css(this.right, "display") !== "none") {
+ option.rightWidth = 0;
+ Nuclear.css(this.right, "display", "none");
+ if (option.rightResize) Nuclear.css(this.rightInterval, "cursor", "pointer");
+ } else {
+ option.rightWidth = this.bakOption[1];
+ Nuclear.css(this.right, "display", "block");
+ if (option.rightResize) Nuclear.css(this.rightInterval, "cursor", "e-resize");
+ }
+
+ this.reFlow();
+
+ },
+
+ reFlow: function () {
+ var option = this.option;
+ var top = option.topHeight, right = option.rightWidth, bottom = option.bottomHeight, left = option.leftWidth, interval = option.intervalSize, vw = this.viewport.width, vh = this.viewport.height;
+ var middleHeight = vh - top - bottom - interval - interval;
+
+
+ Nuclear.css(this.topToggler, "left", vw / 2 - option.togglerSize / 2 + "px");
+ Nuclear.css(this.bottomToggler, "left", vw / 2 - option.togglerSize / 2 + "px");
+
+ Nuclear.css(this.leftToggler, "top", middleHeight / 2 - option.togglerSize / 2 + "px");
+ Nuclear.css(this.rightToggler, "top", middleHeight / 2 - option.togglerSize / 2 + "px");
+
+
+
+ Nuclear.css(this.top, "height", top + "px");
+ Nuclear.css(this.top, "width", vw + "px");
+ Nuclear.css(this.left, "width", left + "px");
+ Nuclear.css(this.left, "top", top + interval + "px");
+ Nuclear.css(this.right, "width", right + "px");
+ Nuclear.css(this.right, "top", top + interval + "px");
+ Nuclear.css(this.right, "right", 0);
+ Nuclear.css(this.bottom, "height", bottom + "px");
+ Nuclear.css(this.bottom, "bottom", 0);
+ Nuclear.css(this.bottom, "width", vw + "px");
+
+
+ if (this.hideLeft) {
+ if (this.hideRight) {
+ Nuclear.css(this.center, "width", vw + "px");
+
+ } else {
+ Nuclear.css(this.center, "width", (vw - right - interval) + "px");
+ }
+
+ Nuclear.css(this.center, "left", left + "px");
+ } else {
+ if (this.hideRight) {
+ Nuclear.css(this.center, "width", (vw - left - interval) + "px");
+ } else {
+ Nuclear.css(this.center, "width", (vw - left - right - interval - interval) + "px");
+
+ }
+ Nuclear.css(this.center, "left", left + interval + "px");
+ }
+
+
+ if (this.hideTop) {
+ Nuclear.css(this.center, "top", "0px");
+ if (this.hideBottom) {
+ Nuclear.css(this.center, "height", (middleHeight + interval + interval) + "px");
+ } else {
+ Nuclear.css(this.center, "height", (middleHeight + interval) + "px");
+ }
+
+
+ } else {
+ Nuclear.css(this.center, "top", top + interval + "px");
+ if (this.hideBottom) {
+ Nuclear.css(this.center, "height", middleHeight + interval + "px");
+ } else {
+
+ Nuclear.css(this.center, "height", middleHeight + "px");
+ }
+ }
+ Nuclear.css(this.right, "height", middleHeight + "px");
+ Nuclear.css(this.left, "height", middleHeight + "px");
+ Nuclear.css(this.topInterval, "height", interval + "px");
+ Nuclear.css(this.topInterval, "width", vw + "px");
+ Nuclear.css(this.topInterval, "top", top + "px");
+ //Nuclear.css(this.topInterval, "backgroundColor", "red");
+
+ Nuclear.css(this.bottomInterval, "height", interval + "px");
+ Nuclear.css(this.bottomInterval, "width", vw + "px");
+ Nuclear.css(this.bottomInterval, "top", vh - bottom - interval + "px");
+ //Nuclear.css(this.bottomInterval, "backgroundColor", "rgba(111,111,111,.3)");
+
+ Nuclear.css(this.leftInterval, "height", middleHeight + "px");
+ Nuclear.css(this.leftInterval, "width", interval + "px");
+ Nuclear.css(this.leftInterval, "top", top + interval + "px");
+ Nuclear.css(this.leftInterval, "left", left + "px");
+
+ Nuclear.css(this.rightInterval, "height", middleHeight + "px");
+ Nuclear.css(this.rightInterval, "width", interval + "px");
+ Nuclear.css(this.rightInterval, "top", top + interval + "px");
+ Nuclear.css(this.rightInterval, "left", vw - right - interval + "px");
+
+
+ }
+})
\ No newline at end of file
diff --git a/example/layout.html b/example/layout.html
new file mode 100644
index 000000000..76015e877
--- /dev/null
+++ b/example/layout.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
top
+
bottom
+
left
+
right
+
center
+
+
+
+
+
+
+
+
+
+
+