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; });