kit/assets/align/align.js

kit.PluginManager.register('align',function() {

    var AlignClass = function(){

        var Align = function()
        {
            this.reset();
            this.node = null;
            this.parentNode = null;
            this.offsetHorizontal = 0;
            this.offsetVertical = 0;
            this.offset = 0;
        };

        /**
         * @param node HTMLElement
         * @return {Align}
         */
        Align.prototype.setNode = function(node){
            this.node = node;
            return this;
        };
        /**
         * @param node HTMLElement
         * @return {Align}
         */
        Align.prototype.setParentNode = function(node){
            this.parentNode = node;
            return this;
        };
        /**
         * @return {Align}
         */
        Align.prototype.reset = function(hor = true, vert = true){
            if(hor) {
                this.right = {applicability: 0, valid: false};
                this.left = {applicability: 0, valid: false};
            }
            if(vert) {
                this.top = {applicability: 0, valid: false};
                this.bottom = {applicability: 0, valid: false};
            }
            return this;
        };

        Align.prototype.getContentSizes = function() {
            return {
                InnerWidth: window.innerWidth,
                InnerHeight: window.innerHeight,
            };
        };

        /**
         * @param top bool
         * @param inner bool
         * @return {Align}
         */
        Align.prototype.setVertical = function(top = false, inner = false){
            var contentSizes = this.getContentSizes();
            this.reset(false, true);

            if(top){
                !this.calcTop(contentSizes, inner) && this.calcBottom(contentSizes, inner);
            } else {
                !this.calcBottom(contentSizes, inner) && this.calcTop(contentSizes, inner);
            }

            if(!this.top.valid && !this.bottom.valid) {
                if(this.top.applicability > this.bottom.applicability || contentSizes.InnerHeight < this.node.offsetHeight) {
                    this.calcTop(contentSizes, inner, true);
                } else {
                    this.calcBottom(contentSizes, inner, true);
                }
            }

            return this;
        };
        Align.prototype.calcTop = function (contentSizes, inner, extra = false) {
            var top, offset;

            this.node.setAttribute('data-kit-align-vertical','top');
            offset = this.offsetVertical || this.offset;

            if(inner) {
                top = 0 - this.node.offsetHeight + this.parentNode.offsetHeight - this.parentNode.clientTop - offset;
            } else {
                top = 0 - this.parentNode.clientTop - this.node.offsetHeight + this.node.clientTop - offset;
            }

            this.node.style.top = '' + top + 'px';
            this.node.style.bottom = 'unset';

            if(extra) {
                this.checkTop(contentSizes);
                this.node.style.top = (top - this.top.applicability) + 'px';
                return false;
            }
            return this.checkTop(contentSizes);
        };
        Align.prototype.calcBottom = function (contentSizes, inner, extra = false) {

            var top, offset;
            this.node.setAttribute('data-kit-align-vertical','bottom');
            offset = this.offsetVertical || this.offset;

            if(inner) {
                top = 0 - this.parentNode.clientTop + offset;
            } else {
                top = this.parentNode.offsetHeight - this.parentNode.clientTop + offset;
            }

            this.node.style.top = '' + top + 'px';
            this.node.style.bottom = 'unset';

            if(extra) {
                this.checkBottom(contentSizes);
                this.node.style.top = (top + this.bottom.applicability) + 'px';
                return false;
            }
            return this.checkBottom(contentSizes);
        };
        Align.prototype.checkTop = function (contentSizes) {
            var b = this.node.getBoundingClientRect();
            this.top.applicability = b.top - 0;
            this.top.valid = b.top >= 0;
            return this.top.valid;
        };
        Align.prototype.checkBottom = function (contentSizes) {
            var b = this.node.getBoundingClientRect();
            this.bottom.applicability = contentSizes.InnerHeight - (b.top + b.height);
            this.bottom.valid = contentSizes.InnerHeight >= (b.top + b.height);
            return this.bottom.valid;
        };

        /**
         * @param right bool
         * @param inner bool
         * @return {Align}
         */
        Align.prototype.setHorizontal = function(right = true, inner = false){
            var contentSizes = this.getContentSizes();
            this.reset(true, false);

            if(right){
                !this.calcRight(contentSizes, inner) && this.calcLeft(contentSizes, inner);
            } else {
                !this.calcLeft(contentSizes, inner) && this.calcRight(contentSizes, inner);
            }

            if(!this.left.valid && !this.right.valid) {
                if(this.left.applicability > this.right.applicability || contentSizes.InnerWidth < this.node.offsetWidth) {
                    this.calcLeft(contentSizes, inner, true);
                } else {
                    this.calcRight(contentSizes, inner, true)
                }
            }

            return this;
        };
        Align.prototype.calcLeft = function (contentSizes, inner, extra = false) {
            var left, offset;

            this.node.setAttribute('data-kit-align-horizontal','left');
            offset = this.offsetHorizontal || this.offset;

            if(inner) {
                left = 0 - this.node.offsetWidth + this.parentNode.offsetWidth - this.parentNode.clientLeft - offset;
            } else {
                left = 0 - this.parentNode.clientLeft - this.node.offsetWidth + this.node.clientLeft - offset;
            }

            this.node.style.left = '' + left + 'px';
            this.node.style.right = 'unset';

            if(extra) {
                this.checkLeft(contentSizes);
                this.node.style.left = (left - this.left.applicability) + 'px';
                return false;
            }
            return this.checkLeft(contentSizes);
        };
        Align.prototype.calcRight = function (contentSizes, inner, extra = false) {
            var left, offset;
            this.node.setAttribute('data-kit-align-horizontal','right');
            offset = this.offsetHorizontal || this.offset;

            if(inner) {
                left = 0 - this.parentNode.clientLeft + offset;
            } else {
                left = this.parentNode.offsetWidth - this.parentNode.clientLeft + offset;
            }

            this.node.style.left = '' + left + 'px';
            this.node.style.right = 'unset';

            if(extra) {
                this.checkRight(contentSizes);
                this.node.style.left = (left + this.right.applicability) + 'px';
                return false;
            }
            return this.checkRight(contentSizes);
        };
        Align.prototype.checkLeft = function (contentSizes) {
            var b = this.node.getBoundingClientRect();
            this.left.applicability = b.left - 0;
            this.left.valid = b.left >= 0;
            return this.left.valid;
        };
        Align.prototype.checkRight = function (contentSizes) {
            var b = this.node.getBoundingClientRect();
            this.right.applicability = contentSizes.InnerWidth - (b.left + b.width);
            this.right.valid = contentSizes.InnerWidth >= (b.left + b.width);
            return this.right.valid;
        };
        return Align;
    }();

    this.Class = AlignClass;
    return this;
});