autolayout/src/DOM.js

Apple's Auto Layout and Visual Format Language for javascript (using cassowary constraints)

// Detect the supported transform function.
var transformAttr = (!document || ('transform' in document.documentElement.style)) ? 'transform' : undefined;
transformAttr = transformAttr || (('-webkit-transform' in document.documentElement.style) ? '-webkit-transform' : 'undefined');
transformAttr = transformAttr || (('-moz-transform' in document.documentElement.style) ? '-moz-transform' : 'undefined');
transformAttr = transformAttr || (('-ms-transform' in document.documentElement.style) ? '-ms-transform' : 'undefined');
transformAttr = transformAttr || (('-o-transform' in document.documentElement.style) ? '-o-transform' : 'undefined');

/**
 * DOM
 *
 * @namespace DOM
 */
class DOMLayout {

    /**
     * @class View
     * @param {Object} [options] Configuration options.
     * @param {DOMElement|DOMLayout} [options.width] Initial width of the view.
     * @param {Number} [options.height] Initial height of the view.
     * @param {Number|Object} [options.spacing] Spacing for the view (default: 8), see `setSpacing`.
     * @param {Array} [options.constraints] One or more constraint definitions.
     */
    constructor(options) {
        this._parent = (options && options.parent) ? options.parent : undefined;
        this._view = (options && options.view) ? options.view : undefined;
        this._getElementBySubview = (options && options.getElementBySubview) ? document.getElementBySubview : document.getElementById;
        this._elements = this._elements || {};
    }

    /**
     * Dictionary of `SubView` objects that have been created when adding constraints.
     * @type {Object.SubView}
     */
    get getParentElement() {
        return this._parentElement;
    }

    /**
     * Dictionary of `SubView` objects that have been created when adding constraints.
     * @type {Object.SubView}
     */
    get elements() {
        return this._elements;
    }

    /**
     * Dictionary of `SubView` objects that have been created when adding constraints.
     * @type {Object.SubView}
     */
    /*get view() {
        return this._view;
    }

    reload() {
        this._elements = {};
        for (var key in this._view.subViews) {
            this._elements[key] = document.getElementById(key);
            this._elements[key].className += elements[key].className ? ' abs' : 'abs';
        }
    }

    update() {

    }*/

    /**
     * Set the size and position for a DOM element.
     *
     * The DOM element must have the following CSS styles applied to it:
     * - position: absolute;
     * - padding: 0;
     * - margin: 0;
     *
     * @param {Element} domElement DOM element.
     * @param {Number} left left position.
     * @param {Number} top top position.
     * @param {Number} width width.
     * @param {Number} height height.
     * @return {DOM} this
     */
    static setElementSizeAndPosition(domElement, left, top, width, height) {
        domElement.setAttribute('style', 'width: ' + width + 'px; height: ' + height + 'px; ' + transformAttr + ': translate3d(' + left + 'px, ' + top + 'px, 0px);');
    }

    /*static layout(domElement, view) {
        domElement = domElement || document.body;
        view = view || domElement.getAttribute('vfl');
        if (view) {
            if (!(view instanceof AutoLayout.View)) {
                view = AutoLayout.VisualFormat.parse(view);
            }
            for (var key in view.subViews) {
                view.subViews
            }

        }

        var updateLayout = function() {
            view.setSize(parentElm ? parentElm.clientWidth : window.innerWidth, parentElm ? parentElm.clientHeight : window.innerHeight);
            for (key in view.subViews) {
                var subView = view.subViews[key];
                setAbsoluteSizeAndPosition(elements[key], subView.left, subView.top, subView.width, subView.height);
            }
        };
    }*/

    //static layoutVisualFormat(visual)

    /*static layoutById(view) {
        var elements = {};
        for (var key in view.subViews) {
            elements[key] = document.getElementById(key);
        }
        var updateLayout = function() {
            view.setSize(parentElm ? parentElm.clientWidth : window.innerWidth, parentElm ? parentElm.clientHeight : window.innerHeight);
            for (key in view.subViews) {
                var subView = view.subViews[key];
                setAbsoluteSizeAndPosition(elements[key], subView.left, subView.top, subView.width, subView.height);
            }
        };

    }*/

    /**
     * Lays out the child elements of a parent element absolutely
     * using the visual format language.
     *
     * When the window is resized, the AutoLayout view is re-evaluated
     * and the child elements are resized and repositioned.
     *
     * @param {Element} parentElm Parent DOM element
     * @param {String|Array} visualFormat One or more visual format strings
     */
    /*static map(parentElement, view) {
        var elements = {};
        for (var key in view.subViews) {
            elements[key] = document.getElementById(key);
            elements[key].className += elements[key].className ? ' abs' : 'abs';
        }
        var updateLayout = function() {
            view.setSize(parentElm ? parentElm.clientWidth : window.innerWidth, parentElm ? parentElm.clientHeight : window.innerHeight);
            for (key in view.subViews) {
                var subView = view.subViews[key];
                setAbsoluteSizeAndPosition(elements[key], subView.left, subView.top, subView.width, subView.height);
            }
        };
    }*/
}

export default DOMLayout;