You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
4.1 KiB
JavaScript
140 lines
4.1 KiB
JavaScript
9 years ago
|
'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();
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
};
|