79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
import KUTE from '../core/globals.js'
|
|
import {defaultValues,Components} from '../core/objects.js'
|
|
import {trueDimension} from '../util/util.js'
|
|
import {getStyleForProperty} from '../core/process.js'
|
|
import {numbers} from '../core/interpolate.js'
|
|
|
|
// Component Properties
|
|
const boxModelProperties = ['top', 'left', 'width', 'height', 'right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
|
|
'padding', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight',
|
|
'margin', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
|
|
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth']
|
|
const boxModelValues = {}
|
|
boxModelProperties.map(x => boxModelValues[x] = 0);
|
|
|
|
// Component Functions
|
|
export function boxModelOnStart(tweenProp){
|
|
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
|
|
KUTE[tweenProp] = (elem, a, b, v) => {
|
|
elem.style[tweenProp] = `${v > 0.99 || v < 0.01 ? ((numbers(a,b,v)*10)>>0)/10 : (numbers(a,b,v) ) >> 0}px`;
|
|
// elem.style[tweenProp] = `${(numbers(a,b,v) ) >> 0}px`;
|
|
}
|
|
}
|
|
}
|
|
export function getBoxModel(tweenProp){
|
|
return getStyleForProperty(this.element,tweenProp) || defaultValues[tweenProp];
|
|
}
|
|
export function prepareBoxModel(tweenProp,value){
|
|
const boxValue = trueDimension(value), offsetProp = tweenProp === 'height' ? 'offsetHeight' : 'offsetWidth';
|
|
return boxValue.u === '%' ? boxValue.v * this.element[offsetProp] / 100 : boxValue.v;
|
|
}
|
|
const boxPropsOnStart = {}
|
|
boxModelProperties.map(x => boxPropsOnStart[x] = boxModelOnStart );
|
|
|
|
// All Component Functions
|
|
const boxModelFunctions = {
|
|
prepareStart: getBoxModel,
|
|
prepareProperty: prepareBoxModel,
|
|
onStart: boxPropsOnStart
|
|
}
|
|
|
|
// Component Base Props
|
|
const baseBoxProps = ['top','left','width','height']
|
|
const baseBoxPropsValues = {top:0,left:0,width:0,height:0}
|
|
const baseBoxOnStart = {}
|
|
baseBoxProps.map(x=>baseBoxOnStart[x] = boxModelOnStart)
|
|
|
|
// Component Base
|
|
export const baseBoxModelOps = {
|
|
component: 'boxModelProps',
|
|
category: 'boxModel',
|
|
properties: baseBoxProps,
|
|
// defaultValues: baseBoxPropsValues,
|
|
Interpolate: {numbers},
|
|
functions: {onStart: baseBoxOnStart}
|
|
}
|
|
|
|
// Component Essential
|
|
export const essentialBoxModelOps = {
|
|
component: 'boxModelProps',
|
|
category: 'boxModel',
|
|
properties: ['top','left','width','height'],
|
|
defaultValues: baseBoxPropsValues,
|
|
Interpolate: {numbers},
|
|
functions: boxModelFunctions,
|
|
Util:{trueDimension}
|
|
}
|
|
|
|
// Component Full Component
|
|
export const boxModelOps = {
|
|
component: 'boxModelProps',
|
|
category: 'boxModel',
|
|
properties: boxModelProperties,
|
|
defaultValues: boxModelValues,
|
|
Interpolate: {numbers},
|
|
functions: boxModelFunctions
|
|
}
|
|
|
|
Components.BoxModelProperties = boxModelOps
|