openNG/lib/riot/mixins/dockable-container.js

'use strict';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var elementSize = require("element-size");
var sortDockable = require("./util/sort-dockables");

function px(pixels) {
	return pixels + "px";
}

module.exports = {
	init: function init() {
		var _this = this;

		console.log("foo", this);
		var dockableAPI = {
			isActive: function isActive() {
				return _this.opts.dockableContainer != null;
			},
			stack: [],
			fillElement: null,
			recalculateLayout: function recalculateLayout() {
				dockableAPI.stack.forEach(function (item, i) {
					item.stackIndex = i;
				});

				var orderedStack = dockableAPI.stack.slice().sort(sortDockable);

				var reservedLeft = 0;
				var reservedRight = 0;
				var reservedTop = 0;
				var reservedBottom = 0;

				orderedStack.forEach(function (item) {
					var element = item.tag.root;

					/* We set the positioning to absolute *before* attempting
      * to obtain the element size - this way, we can be sure
      * that the element won't try to stretch to its container.
      * Instead, it'll be auto-sized, which is exactly what we
      * want. */
					element.style.position = "absolute";

					var _elementSize = elementSize(element);

					var _elementSize2 = _slicedToArray(_elementSize, 2);

					var width = _elementSize2[0];
					var height = _elementSize2[1];


					if (item.heightHint != null) {
						height = item.heightHint;
					}

					if (item.widthHint != null) {
						width = item.widthHint;
					}

					// FIXME: Should the following really be errors?
					if ((item.side === "left" || item.side === "right") && width === 0) {
						throw new Error("Cannot horizontally dock an element without a width; you may need to specify a dock-width");
					} else if ((item.side === "top" || item.side === "bottom") && height === 0) {
						throw new Error("Cannot vertically dock an element without a height; you may need to specify a dock-height");
					}

					if (item.side === "left") {
						Object.assign(element.style, {
							left: px(reservedLeft),
							top: px(reservedTop),
							bottom: px(reservedBottom)
						});

						delete element.style.right;

						reservedLeft += width;
					} else if (item.side === "right") {
						Object.assign(element.style, {
							right: px(reservedRight),
							top: px(reservedTop),
							bottom: px(reservedBottom)
						});

						delete element.style.left;

						reservedRight += width;
					} else if (item.side === "top") {
						Object.assign(element.style, {
							left: px(reservedLeft),
							right: px(reservedRight),
							top: px(reservedTop)
						});

						delete element.style.bottom;

						reservedTop += height;
					} else if (item.side === "bottom") {
						Object.assign(element.style, {
							left: px(reservedLeft),
							right: px(reservedRight),
							bottom: px(reservedBottom)
						});

						delete element.style.top;

						reservedBottom += height;
					}

					console.log("reserved", reservedLeft, reservedRight, reservedTop, reservedBottom);
				});

				var item = dockableAPI.fillElement;

				if (item != null) {
					var element = item.root;

					Object.assign(element.style, {
						position: "absolute",
						left: px(reservedLeft),
						right: px(reservedRight),
						top: px(reservedTop),
						bottom: px(reservedBottom)
					});
				}

				console.log("ordered stack", orderedStack);
			}
		};

		this._uikitDockableContainer = dockableAPI;

		this.on("mount", function () {
			console.log("dockable-container mounted");
			if (dockableAPI.isActive()) {
				dockableAPI.recalculateLayout();
			}
		});
	}
};