bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
bellord
2021-10-30 17:20:26 +03:00
parent 1a29c16bcd
commit cd65398fb0
18 changed files with 855 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/align/align.js
+73 -37
View File
@@ -1,6 +1,8 @@
/** @module align */
kit.PluginManager.register('align',function(module, exports, require) {
var support = require('support');
/**
* @class Rect
* @param node
@@ -200,28 +202,28 @@ kit.PluginManager.register('align',function(module, exports, require) {
direction: {
get: function () {
switch (_this.direction) {
case 'start':
case 'left':
case 'top':
return 'start';
case 'end':
case 'right':
case 'bottom':
return 'end';
default:
return _this.direction;
}
}
},
align: {
get: function () {
switch (_this.align) {
case 'start':
case 'left':
case 'top':
return 'start';
case 'end':
case 'right':
case 'bottom':
return 'end';
default:
return _this.align;
}
}
},
@@ -268,6 +270,23 @@ kit.PluginManager.register('align',function(module, exports, require) {
return getShiftWhenHidingNodeUnderLimiterStart(this.shift + this.applicability);
}.bind(this),
},
/**
* todo: applicability, valid, shiftExtra
*/
center: {
shift: function () {
return - this.nodeMetricsLine.offset / 2 + this.offset[this.map.axisNumber()];
}.bind(this),
applicability: function () {
return this.limiterMetricsLine.end - (this.parentMetricsLine.start + this.nodeMetricsLine.length + this.shift);
}.bind(this),
valid: function () {
return this.limiterMetricsLine.end >= (this.parentMetricsLine.start + this.nodeMetricsLine.length + this.shift);
}.bind(this),
shiftExtra: function () {
return getShiftWhenHidingNodeUnderLimiterStart(this.shift + this.applicability);
}.bind(this),
},
},
align: {
start: {
@@ -275,6 +294,11 @@ kit.PluginManager.register('align',function(module, exports, require) {
return this.nodeMetricsLine.clientStart;
}.bind(this),
},
center: {
shift: function () {
return this.parentMetricsLine.offset / 2 - this.parentMetricsLine.clientStart;
}.bind(this),
},
end: {
shift: function () {
return this.parentMetricsLine.offset - this.parentMetricsLine.clientStart;
@@ -414,9 +438,9 @@ kit.PluginManager.register('align',function(module, exports, require) {
/**
* @param node {HTMLElement}
* @param parentNode {HTMLElement}
* @param limiterNode {HTMLElement}
* @param node {HTMLElement|String}
* @param parentNode {HTMLElement|String}
* @param limiterNode {HTMLElement|String}
* @constructor
*/
var AlignClass = function(node, parentNode, limiterNode = window)
@@ -425,7 +449,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
this.withinTheScreen = true;
this.offset = [0, 0];
this.status = {vertical: {}, horizontal: {},};
this.condition = {vertical: {}, horizontal: {},};
this.setNode(node);
this.setParentNode(parentNode);
@@ -435,29 +459,29 @@ kit.PluginManager.register('align',function(module, exports, require) {
AlignClass.prototype.setNode = function(node){
this.unset();
this.node = node;
this.node = support.getNode(node);
this.reset();
if(node instanceof HTMLElement) {
if(this.node instanceof HTMLElement) {
this.node.kit = this.node.kit || {};
this.node.kit.align = this;
}
if(this.calc) {
this.calc.setNode(this.node);
if(this.__calc) {
this.__calc.setNode(this.node);
}
return this;
};
AlignClass.prototype.setParentNode = function(node){
this.parentNode = node;
if(this.calc) {
this.calc.setParentNode(this.parentNode);
this.parentNode = support.getNode(node);
if(this.__calc) {
this.__calc.setParentNode(this.parentNode);
}
return this;
};
AlignClass.prototype.setLimiterNode = function(node){
this.limiterNode = node;
if(this.calc) {
this.calc.setLimiterNode(this.limiterNode);
this.limiterNode = support.getNode(node) || window;
if(this.__calc) {
this.__calc.setLimiterNode(this.limiterNode);
}
return this;
};
@@ -475,7 +499,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
};
AlignClass.prototype.reset = function(bHorizontal = true, bVertical = true){
if(bHorizontal) {
this.status.horizontal = {};
this.condition.horizontal = {};
if(this.node instanceof HTMLElement) {
this.node.style.left = '';
this.node.style.right = '';
@@ -484,7 +508,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
}
}
if(bVertical) {
this.status.vertical = {};
this.condition.vertical = {};
if(this.node instanceof HTMLElement) {
this.node.style.top = '';
this.node.style.bottom = '';
@@ -492,6 +516,7 @@ kit.PluginManager.register('align',function(module, exports, require) {
this.node.removeAttribute('data-kit-align-vertical-align');
}
}
this.__nodeComputedStyle = undefined;
return this;
};
@@ -510,45 +535,56 @@ kit.PluginManager.register('align',function(module, exports, require) {
return this;
};
AlignClass.prototype.__setAdditionalStyles = function(){
if(!this.__nodeComputedStyle) {
this.__nodeComputedStyle = getComputedStyle(this.node);
}
if(!['absolute', 'relative'].includes(this.__nodeComputedStyle.position)) {
this.node.style.position = 'absolute';
}
};
AlignClass.prototype.setEx = function(axis, direction, align){
this.reset(axis === 'horizontal', axis === 'vertical');
this.status[axis].direction = direction;
this.status[axis].align = align;
this.__setAdditionalStyles();
if(!this.calc) {
this.calc = new AlignCalc(this.node, this.parentNode, this.limiterNode);
this.condition[axis].direction = direction;
this.condition[axis].align = align;
if(!this.__calc) {
this.__calc = new AlignCalc(this.node, this.parentNode, this.limiterNode);
}
this.calc.offset = this.offset;
this.__calc.offset = this.offset;
this.node.setAttribute('data-kit-align-'+axis+'-direction', direction);
this.node.setAttribute('data-kit-align-'+axis+'-align', align);
var defAlignResult = this.calc.updateMetrics().setAxis(axis).setDirection(direction).setAlign(align).calc().getData();
var defAlignResult = this.__calc.updateMetrics().setAxis(axis).setDirection(direction).setAlign(align).calc().getData();
// console.log('defAlignResult', axis, align, direction, defAlignResult);
if(this.changeOfDirection) {
if(!defAlignResult.valid) {
this.node.setAttribute('data-kit-align-'+axis+'-direction', this.getInverse(direction));
this.node.setAttribute('data-kit-align-'+axis+'-align', this.getInverse(align));
var inverseAlignResult = this.calc.updateMetrics().setDirection(this.getInverse(direction)).setAlign(this.getInverse(align)).calc().getData();
// console.log('inverseAlignResult', axis, this.getInverse(align), this.getInverse(direction), inverseAlignResult);
this.status[axis].direction = this.getInverse(direction);
this.status[axis].align = this.getInverse(align);
this.node.setAttribute('data-kit-align-'+axis+'-direction', this.__getInverse(direction));
this.node.setAttribute('data-kit-align-'+axis+'-align', this.__getInverse(align));
var inverseAlignResult = this.__calc.updateMetrics().setDirection(this.__getInverse(direction)).setAlign(this.__getInverse(align)).calc().getData();
// console.log('inverseAlignResult', axis, this.__getInverse(align), this.__getInverse(direction), inverseAlignResult);
this.condition[axis].direction = this.__getInverse(direction);
this.condition[axis].align = this.__getInverse(align);
if(!inverseAlignResult.valid && (defAlignResult.applicability > inverseAlignResult.applicability) ) {
this.node.setAttribute('data-kit-align-'+axis+'-direction', direction);
this.node.setAttribute('data-kit-align-'+axis+'-align', align);
this.status[axis].direction = direction;
this.status[axis].align = align;
this.calc.updateMetrics().setDirection(direction).setAlign(align).calc();
this.condition[axis].direction = direction;
this.condition[axis].align = align;
this.__calc.updateMetrics().setDirection(direction).setAlign(align).calc();
}
}
}
this.calc.render(this.withinTheScreen);
this.__calc.render(this.withinTheScreen);
return this;
};
AlignClass.prototype.getInverse = function(value){
AlignClass.prototype.__getInverse = function(value){
var inverseConfig = {
start: 'end',
left: 'right',