203 lines
4.7 KiB
JavaScript
203 lines
4.7 KiB
JavaScript
mexui.Entity.StyleableEntity = function(styles)
|
|
{
|
|
this.styles = styles;
|
|
|
|
this.shown = true;
|
|
//this.hovered = false;
|
|
|
|
this.transitions = {}; // string controlPartName => Transition transition
|
|
|
|
/*
|
|
this.transitionDelayTimer = null;
|
|
this.transitionStartTime = 0;
|
|
this.transitionEndTime = 0;
|
|
this.transitionIsProcessing = false;
|
|
this.transitionIsReverting = false;
|
|
this.transitionProgressReached = 0.0;
|
|
*/
|
|
};
|
|
|
|
// default styles
|
|
mexui.Entity.StyleableEntity.globalDefaultStyles = {
|
|
all:
|
|
{
|
|
textFont: 'Arial',
|
|
textSize: 14.0,
|
|
textAlign: 0.0,
|
|
textIndent: 5,
|
|
textColour: toColour(0, 0, 0, 255),
|
|
|
|
backgroundColour: toColour(255, 255, 255, 255),
|
|
|
|
lineWeight: 1
|
|
}
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.defaultStyles = mexui.util.linkGlobalStyles(mexui.Entity.StyleableEntity.globalDefaultStyles, {
|
|
main:
|
|
{
|
|
backgroundColour: toColour(255, 255, 255, 255),
|
|
borderColour: 'none',
|
|
textColour: toColour(0, 0, 0, 255),
|
|
|
|
hover:
|
|
{
|
|
backgroundColour: toColour(220, 220, 220, 255),
|
|
borderColour: 'none',
|
|
textColour: toColour(0, 0, 0, 255)
|
|
}/*,
|
|
|
|
focus:
|
|
{
|
|
borderColour: toColour(255, 128, 0, 230),
|
|
textColour: toColour(0, 0, 0, 255)
|
|
}
|
|
*/
|
|
}
|
|
});
|
|
|
|
// model
|
|
mexui.Entity.StyleableEntity.prototype.linkControlStyles = function(controlName, styles)
|
|
{
|
|
return mexui.util.linkStyles(mexui.Control[controlName].defaultStyles, styles);
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.linkComponentStyles = function(componentName, styles)
|
|
{
|
|
return mexui.util.linkStyles(mexui.Component[componentName].defaultStyles, styles);
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.linkEntryStyles = function(entryName, styles)
|
|
{
|
|
return mexui.util.linkStyles(mexui.Entry[entryName].defaultStyles, styles);
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.isFocused = function()
|
|
{
|
|
return this == mexui.focusedControl;
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.isHovered = function()
|
|
{
|
|
//return this.hovered;
|
|
return this == mexui.hoveredComponent;
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.getStyles = function(controlPartName)
|
|
{
|
|
var isFocused = this.isFocused();
|
|
var isHovered = this.isHovered();
|
|
var styles = this.styles[controlPartName];
|
|
|
|
var transition = this.getTransition(controlPartName);
|
|
|
|
if(transition.isProcessing())
|
|
{
|
|
return mexui.util.getTransitionStyles(styles, ['hover'], transition.getMainToPseudoProgress());
|
|
}
|
|
|
|
if(isHovered)
|
|
{
|
|
return mexui.util.mergeStyles(styles, ['hover']);
|
|
}
|
|
|
|
return styles;
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.getEntryStyles = function(data)
|
|
{
|
|
var styles = {};
|
|
|
|
for(var i in data)
|
|
{
|
|
var baseStyles = data[i][0].getStyles(data[i][1]);
|
|
|
|
for(var k in baseStyles)
|
|
{
|
|
if(baseStyles.hasOwnProperty(k) && styles[k] === undefined)
|
|
{
|
|
styles[k] = baseStyles[k];
|
|
}
|
|
}
|
|
}
|
|
|
|
for(var i in data)
|
|
{
|
|
var baseStyles = data[i][0].getStyles(data[i][1]);
|
|
|
|
for(var k in baseStyles)
|
|
{
|
|
if(styles[k] === undefined)
|
|
{
|
|
styles[k] = baseStyles[k];
|
|
}
|
|
}
|
|
}
|
|
|
|
return styles;
|
|
};
|
|
|
|
// custom events
|
|
mexui.Entity.StyleableEntity.prototype.onMouseEnter = function()
|
|
{
|
|
var controlParts = this.getControlPartsWithTransition();
|
|
for(var i in controlParts)
|
|
{
|
|
var transition = this.getTransition(controlParts[i]);
|
|
|
|
var delay = this.getTransitionDelayStyle(controlParts[i]);
|
|
var time = this.getTransitionTimeStyle(controlParts[i]);
|
|
|
|
transition.onMouseEnter(delay, time);
|
|
}
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.onMouseExit = function()
|
|
{
|
|
var controlParts = this.getControlPartsWithTransition();
|
|
for(var i in controlParts)
|
|
{
|
|
var transition = this.getTransition(controlParts[i]);
|
|
|
|
transition.onMouseExit();
|
|
}
|
|
};
|
|
|
|
// transitions
|
|
mexui.Entity.StyleableEntity.prototype.getTransition = function(controlPartName)
|
|
{
|
|
if(!this.transitions[controlPartName])
|
|
this.transitions[controlPartName] = new mexui.Entity.Transition;
|
|
return this.transitions[controlPartName];
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.getControlPartsWithTransition = function()
|
|
{
|
|
var controlParts = [];
|
|
for(var k in this.styles)
|
|
{
|
|
if(this.styles[k].hover && (this.styles[k].hover.transitionTime != null || this.styles[k].hover.transitionDelay != null))
|
|
{
|
|
controlParts.push(k);
|
|
}
|
|
}
|
|
return controlParts;
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.getTransitionDelayStyle = function(controlPartName)
|
|
{
|
|
if(this.styles[controlPartName].hover.transitionDelay != null)
|
|
return this.styles[controlPartName].hover.transitionDelay;
|
|
else
|
|
return mexui.Entity.Transition.defaultTransitionDelay;
|
|
};
|
|
|
|
mexui.Entity.StyleableEntity.prototype.getTransitionTimeStyle = function(controlPartName)
|
|
{
|
|
if(this.styles[controlPartName].hover.transitionTime != null)
|
|
return this.styles[controlPartName].hover.transitionTime;
|
|
else
|
|
return mexui.Entity.Transition.defaultTransitionTime;
|
|
};
|
|
|