, depending on the desired
* animation result. When a point is passed, the view is moved in
* that position. When a rect is passed, the view can also be resized
* with or without moving to different coordinates.
*
* +_duration+:: _optional_ The duration of the animation in milliseconds. The
* default duration is 500 ms.
*
* +_fps+:: _optional_ The frame rate for the animation. The default fps is 50.
*
* = Returns:
* +self+
*
* = Usage:
* HView.extend({
* onAnimationEnd: function(){
* this.die();
* }
* }).nu(
* [ 0, 0, 300, 300 ],
* HApplication.nu()
* ).setStyle(
* 'background-color', 'red'
* ).animateTo(
* HRect.nu( 300, 300, 500, 500 )
* );
*
**/
animateTo: function(_obj, _duration, _fps) {
if(!this.drawn){
return this;
}
// Redirect the method call to _animateTo(HRect).
if(_obj instanceof HPoint) {
var _rect = new HRect(_obj, _obj);
_rect.setSize(this.rect.width, this.rect.height);
this._animateTo(_rect, _duration);
}
else if(_obj instanceof HRect) {
this._animateTo(_obj, _duration);
}
else {
throw "Wrong argument type.";
}
return this;
},
/** = Description
* Stops the current animation for this view. If the view is not being
* animated, this method has no effect. The onAnimationEnd event on the view
* gets called when the animation finishes (reaches the end position/size), but
* onAnimationCancel gets called when this method is called while the animation
* is still in action.
*
*/
stopAnimation: function() {
if (this._animateInterval) {
// Stop the animation interval only if it has been set.
window.clearInterval(this._animateInterval);
this._animateInterval = null;
// Update the rect after the new position and size have been reached.
var _left = parseInt(this.style('left'), 10),
_top = parseInt(this.style('top'), 10),
_width = parseInt(this.style('width'), 10),
_height = parseInt(this.style('height'), 10);
this.rect.set(_left, _top, _left + _width, _top + _height);
this.drawRect();
if (this._animationDone) {
this.onAnimationEnd();
}
else {
this.onAnimationCancel();
}
}
return this;
},
// --Private method.++
// --Starts the animation with the target _rect.++
_animateTo: function(_rect, _duration, _fps) {
if (null === _duration || undefined === _duration) {
_duration = 500; // default duration is half second
}
if (null === _fps || undefined === _fps || _fps < 1) {
_fps = 50; // default fps
}
if (!this._animateInterval) {
this._animationDone = false;
this.onAnimationStart();
var _startTime = new Date().getTime();
var _that = this;
this._animateInterval = window.setInterval(
function() {
if(!_that){
return;
}
_that._animateStep({
startTime: _startTime,
duration: _duration,
// Linear transition effect.
transition: function(t, b, c, d) { return c * t / d + b; },
props: [{
prop: 'left',
from: _that.rect.left,
to: _rect.left,
unit: 'px'
},{
prop: 'top',
from: _that.rect.top,
to: _rect.top,
unit: 'px'
},{
prop: 'width',
from: _that.rect.width,
to: _rect.width,
unit: 'px'
},{
prop: 'height',
from: _that.rect.height,
to: _rect.height,
unit: 'px'
}]
});
}, Math.round(1000 / _fps)
);
}
return this;
},
// --Private method.++
// --Moves the view for one step. This gets called repeatedly when the animation++
// --is happening.++
_animateStep: function(_obj) {
var _time = new Date().getTime(), i;
if (_time < _obj.startTime + _obj.duration) {
var _cTime = _time - _obj.startTime;
// Handle all the defined properties.
for (i = 0; i < _obj.props.length; i++) {
var _from = _obj.props[i].from;
var _to = _obj.props[i].to;
if (_from !== _to) {
// The value of the property at this time.
var _propNow = _obj.transition(_cTime, _from, (_to - _from),
_obj.duration);
ELEM.setStyle(this.elemId,_obj.props[i].prop, _propNow + _obj.props[i].unit);
}
}
} else {
// Animation is done, clear the interval and finalize the animation.
for (i = 0; i < _obj.props.length; i++) {
ELEM.setStyle(this.elemId,_obj.props[i].prop,
_obj.props[i].to + _obj.props[i].unit);
}
this._animationDone = true;
this.stopAnimation();
}
return this;
},
/** = Description
* Extend the onAnimationStart method, if you want to do something special
* when this view starts animating.
*
* = Usage:
* HView.extend({
* onAnimationStart: function() {
* this.setStyle('background-color','green')
* },
* onAnimationEnd: function() {
* this.setStyle('background-color','grey')}
* }).nu(
* [0,0,300,300],
* HApplication.nu()
* ).setStyle(
* 'background-color','blue'
* ).animateTo(
* HRect.nu(
* 300,300,700,700
* )
* );
*
**/
onAnimationStart: function() {
},
/** Extend the onAnimationEnd method, if you want to do something special
* when an animation on this view is finished.
**/
onAnimationEnd: function() {
},
/** Extend this method if functionality is desired upon cancellation of animation.
**/
onAnimationCancel: function() {
}
});/* Riassence Framework
* Copyright 2006 Riassence Inc.
* http://riassence.com/
*
* You should have received a copy of the GNU General Public License along
* with this software package. If not, contact licensing@riassence.com
*/
/*** = Description
** HView is the foundation class for all views. HView is useful for
** any type of view and control grouping. It is designed for easy extension
** and it's the foundation for HControl and all other controls.
**
** The major differences between HView and HControl is that HView handles
** only visual representation and structurization. In addition to HView's
** features, HControl handles labels, values, events, states and such.
** However, HControl is more complex, so use HView instead whenever you don't
** need the additional features of HControl. HView implements the HMarkupView
** interface for template-related task.
**
** = Usage
** var myAppInstance = HApplication.nu();
** var rect1 = [10, 10, 100, 100];
** var myViewInstance = HView.nu( rect1, myAppInstance );
** var myViewInstance.setStyle('background-color','#ffcc00');
** var rect2 = [10, 10, 70, 70];
** var mySubView1 = HView.nu( rect2, myViewIntance );
** var rect3 [20, 20, 50, 50];
** var mySubView2 = HView.nu( rect3, mySubView1 );
**
***/
HView = HClass.extend({
/** Component specific theme path.
**/
themePath: null,
/** True, if the component using absolute positioning.
* False, if the component is using relative positioning.
**/
isAbsolute: true,
/** True, if the coordinates are right-aligned.
* False, if the coordinates are left-aligned.
* Uses flexRightOffset if true. Defined with 6-item arrays
* for the _rect parameter of setRect or the constructor.
* Can be set directly using the setFlexRight method.
**/
flexRight: false,
/** True, if the coordinates are left-aligned.
* False, if the coordinates are right-aligned.
* Uses the X-coordinate of rect, if true.
* Disabled using 6-item arrays with null x-coordinate
* for the _rect parameter of setRect or the constructor.
* Can be set directly using the setFlexLeft method.
**/
flexLeft: true,
/** True, if the coordinates are top-aligned.
* False, if the coordinates are bottom-aligned.
* Uses the Y-coordinate of rect, if true.
* Disabled using 6-item arrays with null x-coordinate
* for the _rect parameter of setRect or the constructor.
* Can be set directly using the setFlexTop method.
**/
flexTop: true,
/** True, if the coordinates are bottom-aligned.
* False, if the coordinates are top-aligned.
* Uses flexBottomOffset if true. Defined with 6-item arrays
* for the _rect parameter of setRect or the constructor.
* Can be set directly using the setFlexRight method.
**/
flexBottom: false,
/** The amount of pixels to offset from the right edge when
* flexRight is true. Defined with 6-item arrays
* for the _rect parameter of setRect or the constructor.
* Can be set directly using the setFlexRight method.
**/
flexRightOffset: 0,
/** The amount of pixels to offset from the bottom edge when
* flexBottom is true.Defined with 6-item arrays
* for the _rect parameter of setRect or the constructor.
* Can be set directly using the setFlexBottom method.
**/
flexBottomOffset: 0,
/** The componentBehaviour array tells other classes what to
* expect of the component's API and visual behaviour.
* The first index is 'view' by default for all classes
* inherited from HView.
**/
componentBehaviour: ['view'],
/** The drawn flag is false before the component is visually
* drawn, it's true after it's drawn.
**/
drawn: false,
/** The theme the component is constructed with. By default,
* uses the HThemeManager.currentTheme specified at the time
* of construction.
**/
theme: null,
/** The preserveTheme flag prevents the view from being redrawn
* if HThemeManager.currentTheme is changed after the view
* has been drawn. Is true, if theme has been set.
**/
preserveTheme: false,
/** The optimizeWidthOnRefresh flag, when enabled, allows
* automatic width calculation for components that support
* that feature.
**/
optimizeWidthOnRefresh: true,
/** The parent is the +_parent+ supplied to the constructor.
* This is a complete object reference to the parent's namespace.
**/
parent: null,
/** The parents is an array containing parent instances up to
* the root controller level. The root controller is almost
* always an instance of HApplication.
**/
parents: null,
/** The viewId is the unique ID (serial number) of this view.
* This means the view can be looked up globally based on its
* id by using the +HSystem.views+ array.
**/
viewId: null,
/** The appId is the unique ID (serial number) of the app process
* acting as the root controller of the view tree of which this
* view is a member.
* This means the app can be looked up globally based on this
* id by using the +HSystem.apps+ array.
**/
appId: null,
/** The app is the reference of the app process acting as
* the root controller of the view tree of which this view is a
* member.
* This is a complete object reference to the app's namespace.
**/
app: null,
/** The views array contains a list of subviews of this view
* by id. To access the object reference, use the +HSystem.views+
* array with the id.
**/
views: null,
/** The viewsZOrder array contains a list of subviews ordered by
* zIndex. To change the order, use the bringToFront,
* sendToBack, bringForwards, sendBackwards, bringToFrontOf and
* sentToBackOf methods.
**/
viewsZOrder: null,
/** The isHidden flog reflects the visibility of the view.
**/
isHidden: true,
/** The +HRect+ instance bound to +self+ using the +constructor+ or +setRect+.
**/
rect: null,
/** = Description
* Constructs the logic part of a HView.
* The view still needs to be drawn on screen. To do that, call draw after
* subcomponents of the view are initialized.
*
* = Parameters
* +_rect+:: An instance of +HRect+, defines the position and size of views.
* It can be also defined with an array, see below.
* +_parent+:: The parent instance this instance will be contained within.
* A valid parent can be another HView compatible instance,
* an HApplication instance, a HControl or a similar extended
* HView instance. The origin of the +_rect+ is the same as the
* parent's offset. For HApplication instances, the web browser's
* window's left top corner is the origin.
*
* == The +_rect+ dimensions as arrays
* Instead of an instance of +HRect+, dimensions can also be supplied as arrays.
* The array length must be either 4 or 6. If the length is 4, the dimensions are
* specified as follows: +[ x, y, width, height ]+. Note that this is different
* from the construction parameters of +HRect+ that takes the coordinates as two
* points, like: +( left, top, right, bottom )+.
* Arrays with 6 items are a bit more complex (and powerful) as they can specify
* the flexible offsets too.
*
* === The array indexes for a +_rect+ configured as an 4-item array:
* Always left/top aligned, all items must be specified.
* Index:: Description
* +0+:: The X-coordinate (measured from the parent's left edge)
* +1+:: The Y-coordinate (measured from the parent's top edge)
* +2+:: The width.
* +3+:: The height.
*
* === The array indexes a +_rect+ configured as an 6-item array:
* Can be any configuration of left/top/right/bottom alignment and supports
* flexible widths. At least 4 items must be specified.
* Index:: Description
* +0+:: The left-aligned X-coordinate or +null+ if the view is
* right-aligned and using a right-aligned X-coordinate at
* index +4+ as well as the width specified at index +2+.
* +1+:: The top-aligned Y-coordinate or +null+ if the view is
* bottom-aligned and using a right-aligned X-coordinate at
* index +5+ as well as the height specified at index +3+.
* +2+:: The width, if only one X-coordinate specifies the
* position (at indexes +0+ or +4+).
* If both X-coordinates (at indexes +0+ and +4+) are
* specified, the width can be specified with a +null+ for
* automatic (flexible) width. If the width is specified,
* it's used as the minimum width.
* +3+:: The height, if only one Y-coordinate specifies the
* position (at indexes +1+ or +5+).
* If both Y-coordinates (at indexes +1+ and +5+) are
* specified, the height can be specified with a +null+ for
* automatic (flexible) height. if the height is specified,
* it's used as the minimum height.
* +4+:: The right-aligned X-coordinate or +null+ if the view is
* left-aligned and using a left-aligned X-coordinate at
* index +0+ as well as the width specified at index +2+.
* +5+:: The bottom-aligned Y-coordinate or +null+ if the view is
* top-aligned and using a top-aligned X-coordinate at
* index +1+ as well as the height specified at index +3+.
* == Usage examples of +_rect+:
* Specified as two instances of +HPoint+,
* x: 23, y: 75, width: 200, height: 100:
* HRect.nu( HPoint.nu( 23, 75 ), HPoint.nu( 223, 175 ) )
*
* The same as above, but without +HPoint+ instances:
* HRect.nu( 23, 75, 223, 175 )
*
* The same as above, but with an array as the constructor
* parameter for +HRect+:
* HRect.nu( [ 23, 75, 223, 175 ] )
*
* The same as above, but with an array instead of a +HRect+ instance:
* [ 23, 75, 200, 100 ]
*
* The same as above, but with a 6-item array:
* [ 23, 75, 200, 100, null, null ]
*
* The same as above, but aligned to the right instead of left:
* [ null, 75, 200, 100, 23, null ]
*
* The same as above, but aligned to the right/bottom edges:
* [ null, null, 200, 100, 23, 75 ]
*
* The same as above, but aligned to the left/bottom edges:
* [ 23, null, 200, 100, null, 75 ]
*
* Flexible width (based on the parent's dimensions):
* [ 23, 75, null, 100, 23, null ]
*
* Flexible height (based on the parent's dimensions):
* [ 23, 75, 200, null, null, 75 ]
*
* Flexible width and height (based on the parent's dimensions):
* [ 23, 75, null, null, 23, 75 ]
*
* Flexible width and height, but limited to a minimum width
* of 200 and a minimum height of 100 (based on the parent's dimensions):
* [ 23, 75, 200, 100, 23, 75 ]
*
**/
constructor: function(_rect, _parent) {
// Moved these to the top to ensure safe theming operation
if(!this.theme){
this.theme = HThemeManager.currentTheme;
this.preserveTheme = false;
}
else {
this.preserveTheme = true;
}
// adds the parentClass as a "super" object
this.parent = _parent;
this.viewId = this.parent.addView(this);
// the parent addView method adds this.parents
this.appId = this.parent.appId;
this.app = HSystem.apps[this.appId];
// subview-ids, index of HView-derived objects that are found in HSystem.views[viewId]
this.views = [];
// Subviews in Z order.
this.viewsZOrder = [];
// Keep the view (and its subviews) hidden until its drawn.
this._createElement();
// Set the geometry
this.setRect(_rect);
this._cachedLeft = _rect.left;
this._cachedTop = _rect.top;
// Additional DOM element bindings are saved into this array so they can be
// deleted from the element manager when the view gets destroyed.
this._domElementBindings = [];
if(!this.isinherited) {
this.draw();
this.show();
}
},
/** = Description
* When the +_flag+ is true, the view will be aligned to the right.
* The +_px+ offset defines how many pixels from the parent's right
* edge the right edge of this view will be. If both setFlexRight
* and setFlexLeft are set, the width is flexible.
* Use the constructor or setRect instead of calling this method
* directly.
*
* = Parameters
* +_flag+:: Boolean flag (true/false). Enables
* right-alignment when true.
* +_px+:: The amount of pixels to offset from the right
* edge of the parent's right edge.
*
* = Returns
* +self+
**/
setFlexRight: function(_flag,_px){
if(_flag===undefined){_flag=true;}
this.flexRight = _flag;
if(_px===undefined){_px=0;}
this.flexRightOffset = _px;
return this;
},
/** = Description
* When the +_flag+ is true, the view will be aligned to the left (default).
* The +_px+ offset defines how many pixels from the parent's left
* edge the left edge of this view will be. If both setFlexLeft
* and setFlexRight are set, the width is flexible.
* Use the constructor or setRect instead of calling this method
* directly.
*
* = Parameters
* +_flag+:: Boolean flag (true/false). Enables
* left-alignment when true.
* +_px+:: The amount of pixels to offset from the left
* edge of the parent's left edge.
*
* = Returns
* +self+
**/
setFlexLeft: function(_flag,_px){
if(_flag===undefined){_flag=true;}
this.flexLeft = _flag;
if((_px || _px === 0) && this.rect){
this.rect.setLeft(_px);
}
return this;
},
/** = Description
* When the +_flag+ is true, the view will be aligned to the top (default).
* The +_px+ offset defines how many pixels from the parent's top
* edge the top edge of this view will be. If both setFlexTop
* and setFlexBottom are set, the height is flexible.
* Use the constructor or setRect instead of calling this method
* directly.
*
* = Parameters
* +_flag+:: Boolean flag (true/false). Enables
* top-alignment when true.
* +_px+:: The amount of pixels to offset from the top
* edge of the parent's top edge.
*
* = Returns
* +self+
**/
setFlexTop: function(_flag,_px){
if(_flag===undefined){_flag=true;}
this.flexTop = _flag;
if((_px || _px === 0) && this.rect){
this.rect.setTop(_px);
}
return this;
},
/** = Description
* When the +_flag+ is true, the view will be aligned to the bottom.
* The +_px+ offset defines how many pixels from the parent's bottom
* edge the bottom edge of this view will be. If both setFlexBottom
* and setFlexTop are set, the height is flexible.
* Use the constructor or setRect instead of calling this method
* directly.
*
* = Parameters
* +_flag+:: Boolean flag (true/false). Enables
* bottom-alignment when true.
* +_px+:: The amount of pixels to offset from the bottom
* edge of the parent's bottom edge.
*
* = Returns
* +self+
**/
setFlexBottom: function(_flag,_px){
if(_flag===undefined){_flag=true;}
this.flexBottom = _flag;
if(_px===undefined){_px=0;}
this.flexBottomOffset = _px;
return this;
},
/** = Description
* The +_flag+ enables or disables the absolute positioning mode.
* (It's enabled by default). If absolute positioning mode is
* off, the coordinate system has little or no effect.
*
* = Parameters
* +_flag+:: Boolean flag (true/false). Enables
* absolute positioning when true.
* Enables relative positioning when false.
*
* = Returns
* +self+
**/
setAbsolute: function(_flag){
if(_flag===undefined){_flag=true;}
this.isAbsolute = _flag;
return this;
},
/** = Description
* The +_flag+ enables or disables the relative positioning mode.
* (It's disabled by default). If relative positioning mode is
* on, the coordinate system has little or no effect.
*
* = Parameters
* +_flag+:: Boolean flag (true/false). Enables
* absolute relative when true.
* Enables absolute positioning when false.
*
* = Returns
* +self+
**/
setRelative: function(_flag){
if(_flag===undefined){_flag=true;}
this.isAbsolute = (!_flag);
return this;
},
/** = Description
* Used by html theme templates to get the theme-specific full image path.
*
* = Returns
* The full path of the theme-specific gfx path as a string.
**/
getThemeGfxPath: function() {
var _themeName;
if( this.preserveTheme ){
_themeName = this.theme;
} else {
_themeName = HThemeManager.currentTheme;
}
return HThemeManager._componentGfxPath( _themeName, this.componentName, this.themePath );
},
/** = Description
* Used by html theme templates to get the theme-specific full path
* of the _fileName given.
*
* = Returns
* The full path of the file.
**/
getThemeGfxFile: function( _fileName ) {
if( this.preserveTheme ){
_themeName = this.theme;
} else {
_themeName = HThemeManager.currentTheme;
}
return HThemeManager._componentGfxFile( _themeName, this.componentName, this.themePath, _fileName );
},
/** --
* = Description
* The _makeElem method does the ELEM.make call to create
* the element of the component. It assigns the elemId.
* It's a separate method to ease creating component that require
* other element types.
* ++
**/
_makeElem: function(_parentElemId){
this.elemId = ELEM.make(_parentElemId,'div');
},
/** --
* = Description
* The _setCSS method does the initial styling of the element.
* It's a separate method to ease creating component that require
* other initial styles.
* ++
**/
_setCSS: function(_additional){
var _cssStyle = 'display:none;overflow:hidden;visibility:hidden;';
if(this.isAbsolute){
_cssStyle += 'position:absolute;';
} else {
_cssStyle += 'position:relative;';
}
_cssStyle += _additional;
ELEM.setCSS(this.elemId,_cssStyle);
},
/** --
* = Description
* The _getParentElemId method returns the ELEM ID of the parent.
* ++
**/
_getParentElemId: function(){
var _parentElemId;
// if the parent does not have an element:
if(this.parent.elemId === undefined) {
_parentElemId = 0;
}
// if a subview element is defined in the template, use it:
else if(this.parent.markupElemIds&&this.parent.markupElemIds['subview']){
_parentElemId = this.parent.markupElemIds['subview'];
}
// otherwise, use main elemId
else {
_parentElemId = this.parent.elemId;
}
return _parentElemId;
},
/** --
* = Description
* The _createElement method calls the methods required to initialize the
* main DOM element of the view.
* ++
**/
_createElement: function() {
if(!this.elemId) {
this._makeElem(this._getParentElemId());
this._setCSS('');
// Theme name == CSS class name
if(this.preserveTheme){
ELEM.addClassName( this.elemId, this.theme );
}
else {
ELEM.addClassName( this.elemId, HThemeManager.currentTheme );
}
}
},
/** = Description
* The +drawRect+ method refreshes the dimensions of the view.
* It needs to be called to affect changes in the rect.
* It enables the drawn flag.
*
* = Returns
* +self+
*
**/
drawRect: function() {
if (this.parent && this.rect.isValid) {
var _this = this,
_elemId = _this.elemId,
_styl = ELEM.setStyle,
_rect = _this.rect;
_styl( _elemId, 'left', _this.flexLeft?(_rect.left+'px'):'auto', true);
_styl( _elemId, 'top', _this.flexTop?(_rect.top+'px'):'auto', true);
_styl( _elemId, 'right', _this.flexRight?(_this.flexRightOffset+'px'):'auto', true);
_styl( _elemId, 'bottom', _this.flexBottom?(_this.flexBottomOffset+'px'):'auto', true);
_styl( _elemId, 'width', (_this.flexLeft&&_this.flexRight)?'auto':(_rect.width+'px'), true);
_styl( _elemId, 'height', (_this.flexTop&&_this.flexBottom)?'auto':(_rect.height+'px'), true);
if(_this.flexLeft&&_this.flexRight){
_styl( _elemId, 'min-width', _rect.width+'px', true);
}
if(_this.flexTop&&_this.flexBottom){
_styl( _elemId, 'min-height', _rect.height+'px', true);
}
// Show the rectangle once it gets created, unless visibility was set to
// hidden in the constructor.
if(undefined === _this.isHidden || _this.isHidden === false) {
_styl( _elemId, 'visibility', 'inherit', true);
}
_styl( _elemId, 'display', 'block', true);
_this._updateZIndex();
if (_this._cachedLeft !== _rect.left || _this._cachedTop !== _rect.top) {
_this.invalidatePositionCache();
_this._cachedLeft = _rect.left;
_this._cachedTop = _rect.top;
}
_this.drawn = true;
}
return this;
},
/** --
* This method updates the z-index property of the children of self.
* It's essentially a wrapper for HSystem.updateZIndexOfChildren passed
* with the viewId of self.
* ++
**/
_updateZIndex: function() {
HSystem.updateZIndexOfChildren(this.viewId);
},
/** --
* This method updates the z-index property of the siblings of self.
* It's essentially a wrapper for HSystem.updateZIndexOfChildren passed
* with the parent's viewId of self.
* ++
**/
_updateZIndexAllSiblings: function() {
HSystem.updateZIndexOfChildren(this.parent.viewId);
},
/** = Description
* The higher level draw wrapper for drawRect, drawMarkup and drawSubviews.
* Finally calls refresh.
*
* = Returns
* +self+
*
**/
draw: function() {
var _isDrawn = this.drawn;
this.drawRect();
if(!_isDrawn){
if(this['componentName']!==undefined){
this.drawMarkup();
}
this.drawSubviews();
}
this.refresh();
return this;
},
/** = Description
* Called once, when the layout of the view is initially drawn.
* Doesn't do anything by itself, but provides an extension point for making
* subviews.
*
**/
drawSubviews: function(){
},
/** --
* Loads the markup from theme manager. If this.preserveTheme is set to true,
* the this.theme is used for loading the markup. Otherwise the currently
* active theme is used.
* ++
**/
_loadMarkup: function() {
var _themeName, _markup;
if (this.preserveTheme) {
_themeName = this.theme;
}
else {
_themeName = HThemeManager.currentTheme;
}
_markup = HThemeManager.getMarkup( _themeName, this.componentName, this.themePath );
if(_markup === false){
console.log('Warning: Markup template for "'+this.componentName+'" using theme "'+_themeName+'" not loaded.');
}
this.markup = _markup;
return (_markup !== false);
},
/** = Description
* Replaces the contents of the view's DOM element with html from the theme specific html file.
*
* = Returns
* +self+
**/
markupElemNames: ['bg', 'label', 'state', 'control', 'value', 'subview'],
drawMarkup: function() {
ELEM.setStyle(this.elemId, 'display', 'none', true);
// continue processing from here on:
var _markupStatus = this._loadMarkup();
this.bindMarkupVariables();
ELEM.setHTML(this.elemId, this.markup);
this.markupElemIds = {};
for(var i=0; i < this.markupElemNames.length; i++ ) {
var _partName = this.markupElemNames[ i ],
_elemName = _partName + this.elemId,
_htmlIdMatch = ' id="' + _elemName + '"';
if( this.markup.indexOf( _htmlIdMatch ) !== -1 ) {
this.markupElemIds[ _partName ] = this.bindDomElement( _elemName );
}
}
ELEM.setStyle(this.elemId, 'display', 'block' );
return this;
},
/** = Description
* Replaces the contents of the view's DOM element with custom html.
*
* = Parameters
* +_html+:: The HTML (string-formatted) to replace the content with.
*
* = Returns
* +self+
*
**/
setHTML: function( _html ) {
ELEM.setHTML( this.elemId, _html );
return this;
},
/** = Description
*
* This method should be extended in order to redraw only specific parts. The
* base implementation calls optimizeWidth when optimizeWidthOnRefresh is set
* to true.
*
* = Returns
* +self+
*
**/
refresh: function() {
if(this.drawn) {
// this.drawn is checked here so the rectangle doesn't get drawn by the
// constructor when setRect() is initially called.
this.drawRect();
}
if(this.optimizeWidthOnRefresh) {
this.optimizeWidth();
}
return this;
},
/** = Description
* Replaces the rect of the component with a new HRect instance and
* then refreshes the display.
*
* = Parameters
* +_rect+:: The new HRect instance to replace the old rect instance with.
* +_rect+:: Array format, see HView#constructor for further details.
*
* = Returns
* +self+
*
**/
setRect: function(_rect) {
if (this.rect) {
this.rect.release(this);
}
if(_rect instanceof Array){
var _arrLen = _rect.length,
_throwPrefix = 'HView.setRect: If the HRect instance is replaced by an array, ';
if((_arrLen === 4) || (_arrLen === 6)){
var _leftOffset = _rect[0],
_topOffset = _rect[1],
_width = _rect[2],
_height = _rect[3],
_rightOffset = ((_arrLen === 6)?_rect[4]:null),
_bottomOffset = ((_arrLen === 6)?_rect[5]:null),
_validLeftOffset = (typeof _leftOffset === 'number'),
_validTopOffset = (typeof _topOffset === 'number'),
_validRightOffset = (typeof _rightOffset === 'number'),
_validBottomOffset = (typeof _bottomOffset === 'number'),
_validWidth = (typeof _width === 'number'),
_validHeight = (typeof _height === 'number'),
_right,
_bottom;
if( (!_validLeftOffset && !_validRightOffset) ||
(!_validTopOffset && !_validBottomOffset) ){
console.log(_throwPrefix + '(left or top) and (top or bottom) must be specified.');
}
else if( (!_validWidth && !(_validLeftOffset && _validRightOffset)) ||
(!_validHeight && !(_validTopOffset && _validBottomOffset)) ){
console.log(_throwPrefix + 'the (height or width) must be specified unless both (left and top) or (top and bottom) are specified.');
}
this.setFlexLeft(_validLeftOffset,_leftOffset);
this.setFlexTop(_validTopOffset,_topOffset);
this.setFlexRight(_validRightOffset,_rightOffset);
this.setFlexBottom(_validBottomOffset,_bottomOffset);
// default, makes a correct rect
if(_validLeftOffset && _validWidth && !_validRightOffset){
_right = _leftOffset + _width;
}
// can't be entirely correct rect unless parent size is calculated
else if(!_validLeftOffset && _validWidth && _validRightOffset){
_leftOffset = 0;
_right = _width;
}
// can't be entirely correct rect unless parent size is calculated
else if(_validLeftOffset && !_validWidth && _validRightOffset){
_right = _leftOffset + _rightOffset;
}
// use minimum width based on the height information given
else if(_validLeftOffset && _validWidth && _validRightOffset){
_right = _leftOffset + _width;
}
// default, makes a correct rect
if(_validTopOffset && _validHeight && !_validBottomOffset){
_bottom = _topOffset + _height;
}
// can't be entirely correct rect unless parent size is calculated
else if(!_validTopOffset && _validHeight && _validBottomOffset){
_topOffset = 0;
_bottom = _height;
}
// can't be entirely correct rect unless parent size is calculated
else if(_validTopOffset && !_validHeight && _validBottomOffset){
_bottom = _topOffset + _bottomOffset;
}
// use minimum height based on the height information given
else if(_validTopOffset && _validHeight && _validBottomOffset){
_bottom = _topOffset + _height;
}
this.rect = HRect.nu(_leftOffset,_topOffset,_right,_bottom);
}
else {
console.log(_throwPrefix + 'the length has to be either 4 or 6.');
}
}
else {
this.rect = _rect;
}
this.rect.bind(this);
this.refresh();
return this;
},
/** = Description
* Sets any arbitary style of the main DOM element of the component.
* Utilizes Element Manager's drawing queue/cache to perform the action.
*
* = Parameters
* +_name+:: The style name (css syntax, eg. 'background-color')
* +_value+:: The style value (css syntax, eg. 'rgb(255,0,0)')
* +_cacheOverride+:: Cache override flag.
*
* = Returns
* +self+
*
**/
setStyle: function(_name, _value, _cacheOverride) {
if (this.elemId) {
ELEM.setStyle(this.elemId, _name, _value, _cacheOverride);
}
return this;
},
/** = Description
* Returns a style of the main DOM element of the component.
* Utilizes +ELEM+ cache to perform the action.
*
* = Parameters
* +_name+:: The style name (css syntax, eg. 'background-color')
*
* = Returns
* The style property value (css syntax, eg. 'rgb(255,0,0)')
*
**/
style: function(_name) {
if (this.elemId) {
return ELEM.getStyle(this.elemId, _name);
}
return '';
},
/** = Description
* Sets a style for a specified markup element that has been bound to this
* view.
*
* = Parameters
* +_partName+:: The identifier of the markup element.
* +_name+:: The style name
* +_value+:: The style value
*
* = Returns
* +self+
*
**/
setStyleOfPart: function(_partName, _name, _value, _cacheOverride) {
if (!this.markupElemIds[_partName]) {
console.log('Warning, setStyleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
}
else {
ELEM.setStyle(this.markupElemIds[_partName], _name, _value, _cacheOverride);
}
return this;
},
/** = Description
* Returns a style of a specified markup element that has been bound to this
* view.
*
* = Parameters
* +_partName+:: The identifier of the markup element.
* +_name+:: The style name
*
* = Returns
* The style of a specified markup element.
*
**/
styleOfPart: function(_partName, _name) {
if (!this.markupElemIds[_partName]) {
console.log('Warning, styleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
return '';
}
return ELEM.getStyle(this.markupElemIds[_partName], _name);
},
/** = Description
* Sets a style of a specified markup element that has been bound to this
* view.
*
* = Parameters
* +_partName+:: The identifier of the markup element.
* +_value+:: Value for markup element.
*
* = Returns
* +self+
*
**/
setMarkupOfPart: function( _partName, _value ) {
if (!this.markupElemIds[_partName]) {
console.log('Warning, setMarkupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
}
else {
ELEM.setHTML( this.markupElemIds[_partName], _value );
}
return this;
},
/** = Description
* Returns a style of a specified markup element that has been bound to this
* view.
*
* = Parameters
* +_partName+:: The identifier of the markup element.
*
* = Returns
* The style of a specified markup element.
*
**/
markupOfPart: function(_partName) {
if (!this.markupElemIds[_partName]) {
console.log('Warning, markupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
return '';
}
return ELEM.getHTML(this.markupElemIds[_partName]);
},
/** = Description
* Hides the component's main DOM element (and its children).
*
* = Returns
* +self+
*
**/
hide: function() {
if(!this.isHidden) {
var _setStyl = ELEM.setStyle,
_elemId = this.elemId;
_setStyl(_elemId,'visibility', 'hidden');
_setStyl(_elemId,'display', 'none');
this.isHidden = true;
}
return this;
},
/** = Description
* Restores the visibility of the component's main DOM element (and its children).
*
* = Return
* +self+
*
**/
show: function() {
if(this.isHidden) {
var _setStyl = ELEM.setStyle,
_elemId = this.elemId;
_setStyl(_elemId,'visibility', 'inherit');
_setStyl(_elemId,'display', 'block');
this.isHidden = false;
}
return this;
},
/** = Description
* Toggles between hide and show.
*
* = Returns
* +self+
*
**/
toggle: function() {
if(this.isHidden) {
this.show();
} else {
this.hide();
}
return this;
},
/** = Description
* Call this if you need to remove a component from its parent's views array without
* destroying the DOM element itself, making it in effect a view without parent.
* Useful, for example, for moving a view from one parent component to another.
*
* = Returns
* +self+
*
**/
remove: function() {
if( this.parent ) {
var _viewZIdx = this.parent.viewsZOrder.indexOf(this.viewId),
_viewPIdx = this.parent.views.indexOf(this.viewId);
this.parent.views.splice(_viewPIdx,1);
HSystem.delView(this.viewId);
this.parent.viewsZOrder.splice( _viewZIdx, 1 );
var _sysUpdateZIndexOfChildrenBufferIndex = HSystem._updateZIndexOfChildrenBuffer.indexOf( this.viewId );
if(_sysUpdateZIndexOfChildrenBufferIndex !== -1){
HSystem._updateZIndexOfChildrenBuffer.splice( _sysUpdateZIndexOfChildrenBufferIndex, 1 );
}
this._updateZIndexAllSiblings();
this.parent = null;
this.parents = [];
}
return this;
},
/** = Description
* Deletes the component and all its children.
* Should normally be called from the parent.
*
**/
die: function() {
// hide self, makes destruction seem faster
this.hide();
this.drawn = false;
this.stopAnimation();
// Delete the children first.
var _childViewId, i;
while (this.views.length !== 0) {
_childViewId = this.views[0];
this.destroyView(_childViewId);
}
// Remove this object's bindings, except the DOM element.
this.remove();
// Remove the DOM element bindings.
for ( i = 0; i < this._domElementBindings.length; i++) {
ELEM.del(this._domElementBindings[i]);
}
this._domElementBindings = [];
// Remove the DOM object itself
ELEM.del(this.elemId);
this.rect = null;
var _this = this;
for( i in _this ){
_this[i] = null;
delete _this[i];
}
},
/** Recursive idle poller. Should be extended if functionality is desired.
**/
onIdle: function() {
for(var i = 0; i < this.views.length; i++) {
HSystem.views[this.views[i]].onIdle();
}
},
/** Used by addView to build a parents array of parent classes.
**/
buildParents: function(_viewId){
var _view = HSystem.views[_viewId];
_view.parent = this;
_view.parents = [];
for(var _parentNum = 0; _parentNum < this.parents.length; _parentNum++) {
_view.parents.push(this.parents[_parentNum]);
}
_view.parents.push(this);
},
/** = Description
* Adds a sub-view/component to the view. Called from inside the
* HView#constructor and should be automatic for all components that accept
* the 'parent' parameter, usually the second argument, after the HRect. May
* also be used to attach a freely floating component (removed with remove)
* to another component.
*
* = Parameter
* +_view+:: Usually this inside HView derivate components.
*
* = Returns
* The view id.
*
**/
addView: function(_view) {
var _viewId = HSystem.addView(_view);
this.views.push(_viewId);
this.buildParents(_viewId);
this.viewsZOrder.push(_viewId);
return _viewId;
},
/** = Description
* Call this if you need to remove a child view from this view without
* destroying its element, making it in effect a view without parent.
* Useful, for example, for moving a view from one parent component to another.
*
* = Parameters
* +_viewId+:: The parent-specific view id. Actually an array index.
*
* = Returns
* +self+
*
**/
removeView: function(_viewId) {
HSystem.views[_viewId].remove();
return this;
},
/** = Description
* Call this if you need to remove a child view from this view, destroying its
* child elements recursively and removing all DOM elements too.
*
* = Parameters
* +_viewId+:: The parent-specific view id. Actually an array index.
*
* = Returns
* +self+
**/
destroyView: function(_viewId) {
HSystem.views[_viewId].die();
return this;
},
/** = Description
* Returns bounds rectangle that defines the size and coordinate system
* of the component. This should be identical to the rectangle used in
* constructing the object, unless it has been changed after construction.
*
* = Returns
* A new instance with identical values to this component's rect.
*
**/
bounds: function() {
// Could be cached.
var _bounds = new HRect(this.rect);
_bounds.right -= _bounds.left;
_bounds.left = 0;
_bounds.bottom -= _bounds.top;
_bounds.top = 0;
return _bounds;
},
/** = Description
* This method resizes the view, without moving its left and top sides.
* It adds horizontal coordinate units to the width and vertical units to
* the height of the view.
* Since a View's frame rectangle must be aligned on screen pixels, only
* integral values should be passed to this method. Values with
* fractional components will be rounded to the nearest whole integer.
* If the View is attached to a window, this method causes its parent view
* to be updated, so the View is immediately displayed in its new size. If it
* doesn't have a parent or isn't attached to a window, this method
* merely alter its frame and bounds rectangle.
*
* = Parameters
* +_horizonal+:: Horizonal units to add to the width (negative units subtract)
* +_vertical+:: Vertical units to add to the height (negative units subtract)
*
* = Returns
* +self+
*
**/
resizeBy: function(_horizontal, _vertical) {
var _rect = this.rect;
_rect.right += _horizontal;
_rect.bottom += _vertical;
_rect.updateSecondaryValues();
this.drawRect();
return this;
},
/** = Description
* This method makes the view width units wide
* and height units high. This method adjust the right and bottom
* components of the frame rectangle accordingly.
* Since a View's frame rectangle must be aligned on screen pixels, only
* integral values should be passed to this method. Values with
* fractional components will be rounded to the nearest whole integer.
* If the View is attached to a window, this method causes its parent view
* to be updated, so the View is immediately displayed in its new size. If it
* doesn't have a parent or isn't attached to a window, this method
* merely alter its frame and bounds rectangle.
*
* = Parameters
* +_width+:: The new width of the view.
* +_height+:: The new height of the view.
*
* = Returns
* +self+
*
**/
resizeTo: function(_width, _height) {
var _rect = this.rect;
_rect.right = _rect.left + _width;
_rect.bottom = _rect.top + _height;
_rect.updateSecondaryValues();
this.drawRect();
return this;
},
/** = Descripion
* This method moves the view to a new coordinate. It adjusts the
* left and top components of the frame rectangle accordingly.
* Since a View's frame rectangle must be aligned on screen pixels, only
* integral values should be passed to this method. Values with
* fractional components will be rounded to the nearest whole integer.
* If the View is attached to a window, this method causes its parent view
* to be updated, so the View is immediately displayed in its new size. If it
* doesn't have a parent or isn't attached to a window, this method
* merely alter its frame and bounds rectangle.
*
* = Parameters
* +_x+:: The new x-coordinate of the view.
* +_y+:: The new y-coordinate of the view.
*
* +_point+:: The new coordinate point of the view.
*
* = Returns
* +self+
*
**/
offsetTo: function() {
this.rect.offsetTo.apply(this.rect, arguments);
this.drawRect();
return this;
},
/** = Description
* Alias method for offsetTo.
*
* = Returns
* +self+
*
**/
moveTo: function() {
this.offsetTo.apply(this, arguments);
return this;
},
/** = Description
* This method re-positions the view without changing its size.
* It adds horizontal coordinate units to the x coordinate and vertical
* units to the y coordinate of the view.
* Since a View's frame rectangle must be aligned on screen pixels, only
* integral values should be passed to this method. Values with
* fractional components will be rounded to the nearest whole integer.
* If the View is attached to a window, this method causes its parent view
* to be updated, so the View is immediately displayed in its new size. If it
* doesn't have a parent or isn't attached to a window, this method
* merely alter its frame and bounds rectangle.
*
* = Parameters
* +_horizonal+:: Horizonal units to change the x coordinate (negative units subtract)
* +_vertical+:: Vertical units to add to change the y coordinate (negative units subtract)
*
* = Returns
* +self+
*
**/
offsetBy: function(_horizontal, _vertical) {
this.rect.offsetBy(_horizontal, _vertical);
this.drawRect();
return this;
},
/** = Description
* Alias method for offsetBy.
*
* = Returns
* +self+
*
**/
moveBy: function() {
this.offsetBy.apply(this, arguments);
return this;
},
/** = Description
* Brings the view to the front by changing its Z-Index.
*
* = Returns
* +self+
*
**/
bringToFront: function() {
if (this.parent) {
var _index = this.zIndex();
this.parent.viewsZOrder.splice(_index, 1);
this.parent.viewsZOrder.push(this.viewId);
this._updateZIndexAllSiblings();
}
return this;
},
/** = Description
* Brings itself to the front of the given view by changing its Z-Index.
* Only works on sibling views.
*
* = Parameters
* +_view+:: The view to bring to the front of.
*
* = Returns
* +self+
*
**/
bringToFrontOf: function(_view){
if(this.parent.viewId === _view.parent.viewId){
this.parent.viewsZOrder.splice( this.zIndex(), 1 ); // removes selfs index from the array
this.parent.viewsZOrder.splice( _view.zIndex()+1, 0, this.viewId); // sets itself in front of to _view
this._updateZIndexAllSiblings();
}
return this;
},
/** = Description
* Sends itself to the back of the given view by changing its Z-Index.
* Only works on sibling views.
*
* = Parameters
* +_view+:: The view to send to the back of.
*
* = Returns
* +self+
*
**/
sendToBackOf: function(_view){
if(this.parent.viewId === _view.parent.viewId){
this.parent.viewsZOrder.splice( this.zIndex(), 1 ); // removes selfs index from the array
this.parent.viewsZOrder.splice( _view.zIndex(), 0, this.viewId); // sets itself in back of to _view
this._updateZIndexAllSiblings();
}
return this;
},
/** = Description
* Sends itself one step backward by changing its Z-Index.
*
* = Returns
* +self+
*
**/
sendBackward: function(){
var _index = this.zIndex();
if(_index!==0){
this.parent.viewsZOrder.splice( _index, 1 ); // removes selfs index from the array
this.parent.viewsZOrder.splice( _index-1, 0, this.viewId); // moves selfs position to one step less than where it was
this._updateZIndexAllSiblings();
}
return this;
},
/** = Description
* Brings itself one step forward by changing its Z-Index.
*
* = Returns
* +self+
*
**/
bringForward: function(){
var _index = this.zIndex();
if(_index!==this.parent.viewsZOrder.length-1){
this.parent.viewsZOrder.splice( _index, 1 ); // removes selfs index from the array
this.parent.viewsZOrder.splice( _index+1, 0, this.viewId); // moves selfs position to one step more than it was
this._updateZIndexAllSiblings();
}
return this;
},
/** = Description
* Sends the view to the back by changing its Z-Index.
*
* = Returns
* +self+
*
**/
sendToBack: function() {
if (this.parent) {
var _index = this.zIndex();
this.parent.viewsZOrder.splice(_index, 1); // removes this index from the arr
this.parent.viewsZOrder.splice(0, 0, this.viewId); // unshifts viewId
this._updateZIndexAllSiblings();
}
return this;
},
/** = Description
* Use this method to get the Z-Index of itself.
*
* = Returns
* The current Z-Index value.
*
**/
zIndex: function() {
if (!this.parent) {
return -1;
}
// Returns the z-order of this item as seen by the parent.
return this.parent.viewsZOrder.indexOf(this.viewId);
},
/** = Description
* Measures the characters encoded in length bytes of the string - or,
* if no length is specified, the entire string up to the null character,
* '0', which terminates it. The return value totals the width of all the
* characters in coordinate units; it's the length of the baseline required
* to draw the string.
*
* = Parameters
* +_string+:: The string to measure.
* +_length+:: Optional, How many characters to count.
* +_elemId+:: Optional, The element ID where the temporary string is created
* in.
* +_wrap+:: Optional boolean value, wrap whitespaces?
* +_extraCss+:: Optional, extra css to add.
*
* = Returns
* The width in pixels required to draw a string in the font.
*
**/
stringSize: function(_string, _length, _elemId, _wrap, _extraCss) {
if (_length || _length === 0) {
_string = _string.substring(0, _length);
}
if (!_elemId && _elemId !== 0) {
_elemId = 0; //this.elemId;
}
if (!_extraCss) {
_extraCss = '';
}
if (!_wrap){
_extraCss += 'white-space:nowrap;';
}
var _stringElem = ELEM.make(_elemId);
ELEM.setCSS(_stringElem, "visibility:hidden;position:absolute;"+_extraCss);
ELEM.setHTML(_stringElem, _string);
ELEM.flushLoop();
var _visibleSize=ELEM.getVisibleSize(_stringElem);
ELEM.del(_stringElem);
return _visibleSize;
},
/** Returns the string width
**/
stringWidth: function(_string, _length, _elemId, _extraCss){
return this.stringSize(_string, _length, _elemId, false, _extraCss)[0];
},
/** Returns the string height.
**/
stringHeight: function(_string, _length, _elemId, _extraCss){
return this.stringSize(_string, _length, _elemId, true, _extraCss)[1];
},
/** Returns the X coordinate that has the scrolled position calculated.
**/
pageX: function() {
var _x = 0,
_elem = this;
while(_elem) {
if(_elem.elemId && _elem.rect) {
_x += ELEM.get(_elem.elemId).offsetLeft;
_x -= ELEM.get(_elem.elemId).scrollLeft;
}
if(_elem.markupElemIds&&_elem.markupElemIds.subview){
_x += ELEM.get(_elem.markupElemIds.subview).offsetLeft;
_x -= ELEM.get(_elem.markupElemIds.subview).scrollLeft;
}
_elem = _elem.parent;
}
return _x;
},
/** Returns the Y coordinate that has the scrolled position calculated.
**/
pageY: function() {
var _y = 0,
_elem = this;
while(_elem) {
if(_elem.elemId && _elem.rect) {
_y += ELEM.get(_elem.elemId).offsetTop;
_y -= ELEM.get(_elem.elemId).scrollTop;
}
if(_elem.markupElemIds&&_elem.markupElemIds.subview){
_y += ELEM.get(_elem.markupElemIds.subview).offsetTop;
_y -= ELEM.get(_elem.markupElemIds.subview).scrollTop;
}
_elem = _elem.parent;
}
return _y;
},
/** Returns the HPoint that has the scrolled position calculated.
**/
pageLocation: function() {
return new HPoint(this.pageX(), this.pageY());
},
/** = Description
* An abstract method that derived classes may implement, if they are able to
* resize themselves so that their content fits nicely inside.
*
**/
optimizeWidth: function() {
},
/** = Description
* Invalidates event manager's element position cache for this view and its
* subviews. Actual functionality is implemented in HControl.
*
* = Returns
* +self+
*
**/
invalidatePositionCache: function() {
for(var i=0; i -1) {
ELEM.del(_elementId);
this._domElementBindings.splice(_indexOfElementId, 1);
}
}
});
HView.implement(HMarkupView);
HView.implement(HMorphAnimation);
/* Riassence Framework
* Copyright 2006 Riassence Inc.
* http://riassence.com/
*
* You should have received a copy of the GNU General Public License along
* with this software package. If not, contact licensing@riassence.com
*/
/*** = Description
** Automatic event responder. Defines what events HControl listens to
** and actions to be taken.
**
** = Event handler methods
** Pre-defined event handler methods, extend these in your subclass.
**
** +focus+:: Called when the component gets focus
** +blur+:: Called when the component loses focus
** +mouseDown+:: Called when the mouse button is pushed down
** +mouseUp+:: Called when the mouse button is released
** +mouseWheel+:: Called when the mouse wheel is used
** +startDrag+:: Called when the mouse button
** is pressed (and item is draggable).
** +endDrag+:: Called when the mouse button
** is released (and item is draggable).
** +drag+:: Called when the mouse is moved and mouse button
** is down (and item is draggable).
** +drop+:: Called when a draggable item is released
** on the droppable.
** +startHover+:: Called when a draggable item is moved
** over the droppable.
** +endHover+:: Called when a draggable item is moved out
** of the droppable.
** +keyDown+:: Called when the user presses a key, and
** the control is active.
** +keyUp+:: Called when the user releases a key, and
** the control is active.
** +textEnter+:: Called when the user releases a key regardless
** if the control is active or not.
** +gainedActiveStatus+:: Called when the component gets activated.
** +lostActiveStatus+:: Called when the component gets deactivated.
***/
HEventResponder = HClass.extend({
/** = Description
* The event responder interface for +HControl+.
* Registers the events defined by boolean properties of
* the events object to the control instance. The event manager
* handles the event mapping and abstraction itself.
* NOTE startDrag vs mouseDown and endDrag vs mouseUp events
* conflict, if both are set simultaneously.
*
* = Parameters
* +_events+:: A +{ event: state }+ Object structure, sets events based on the
* keys and the flag. All states are Booleans (true or false).
* A true state means the event listening for the event is
* enabled and a false state means the event listening is disabled.
* See the Event Types below:
*
* == Event States
* Event State:: Description
* +mouseMove+:: The global +mouseMove+ event state. The component receives
* this event regardless if it's focused or not. The event
* responder method for it is +mouseMove+ and it receives the
* absolute x and y coordinates of the mouse pointer when the
* mouse cursor position changes. Can also be toggled
* separately by using the +setMouseMove+ method.
* +textEnter+:: The global +textEnter+ event state. The component receives
* this event regardless if it's focused or not. The event
* responder method for it is +textEnter+ and it receives a
* every time a key on the keyboard is pressed. Can also
* be toggled separately by using the +setTextEnter+ method.
* +click+:: The local +click+ event state. The component receives
* this event only if it's focused. The event responder
* method for it is +click+ and it receives the absolute x
* and y coordinates of the mouse pointer as well as which
* mouse button was used to trigger the event. Can also be
* toggled separately by using the +setClickable+ method.
* +mouseDown+:: The local +mouseDown+ event state. The component receives
* this event only if it's focused. The event responder
* method for it is +mouseDown+ and it receives the absolute x
* and y coordinates of the mouse pointer as well as which
* mouse button was used to trigger the event. Can also be
* toggled separately by using the +setMouseDown+ method.
* +mouseUp+:: The local +mouseUp+ event state. The component receives
* this event only if it's focused. The event responder
* method for it is +mouseUp+ and it receives the absolute x
* and y coordinates of the mouse pointer as well as which
* mouse button was used to trigger the event. Can also be
* toggled separately by using the +setMouseUp+ method.
* +mouseWheel+:: The local +mouseWheel+ event state. The component receives
* this event only if it's focused. The event responder
* method for it is +mouseWheel+ and it receives the delta of
* the amount of the mouse scroll wheel was rolled: a floating
* point number, larger or smaller than 0, depending on the
* direction the scroll wheel was rolled. Can also be
* toggled separately by using the +setMouseWheel+ method.
* +draggable+:: The local +draggable+ event states. The component receives
* these events only if it's focused. The event responders
* methods are +startDrag+, +drag+ and +endDrag+. The events
* receive the mouse cursor coordinates.
* Can also be toggled separately by using the +setDraggable+
* method.
* +droppable+:: The local +droppable+ event states. The component receives
* this event only if another component is dragged (hovered)
* or dropped with the area of this component as the target.
* The event responders method for it are +hoverStart+,
* +drop+ and +hoverEnd+.
* Can also be toggled separately by using the
* +setDroppable+ method.
* +keyDown+:: The local +keyDown+ event state. The component receives
* this event only if it's focused. The event responder
* method for it is +keyDown+ and it receives the ascii key
* code whenever a keyboard key is pressed. Can also be
* toggled separately by using the +setKeyDown+ method.
* +keyUp+:: The local +keyUp+ event state. The component receives
* this event only if it's focused. The event responder
* method for it is +keyUp+ and it receives the ascii key
* code whenever a keyboard key is released. Can also be
* toggled separately by using the +setKeyUp+ method.
*
* = Usage
* HControl.new(
* [0,0,100,20],
* HApplication.nu()
* ).setEvents({
* mouseUp: true,
* mouseDown: true
* });
*
* = Returns
* +self+
*
**/
setEvents: function(_events) {
if(!this.events) {
this.events = HClass.extend({
mouseMove: false,
mouseDown: false,
mouseUp: false,
draggable: false,
droppable: false,
keyDown: false,
keyUp: false,
mouseWheel: false,
textEnter: false,
click: false
}).nu();
}
if(_events) {
this.events.extend( _events );
}
this.events.ctrl = this;
EVENT.focusOptions[this.elemId] = this.events;
var _mmoveStatus = this.events.mouseMove,
_mmoveIndex = EVENT.coordListeners.indexOf(this.elemId);
if (_mmoveStatus && (_mmoveIndex===-1)){
EVENT.coordListeners.push(this.elemId);
}
else if ((!_mmoveStatus) && (_mmoveIndex!==-1)){
EVENT.coordListeners.splice(_mmoveIndex,1);
}
return this;
},
/** = Description
* Alternative flag setter for the mouseMove event type. If set to true,
* starts listening to mouseDown events when the component has focus.
*
* = Parameters
* +_flag+:: Set the mouseDown event listening on/off (true/false) for
* the component instance.
*
* = Returns
* +self+
*
**/
setMouseMove: function(_flag) {
this.events.mouseMove = _flag;
this.setEvents();
return this;
},
/** = Description
* Alternative flag setter for the click event type. If set to true,
* starts listening to click events when the component has focus.
*
* = Parameters
* +_flag+:: Set the click event listening on/off (true/false) for
* the component instance.
*
* = Returns
* +self+
*
**/
setClickable: function(_flag) {
this.events.click = _flag;
this.setEvents();
return this;
},
/** = Description
* Registers or releases event listening for mouseDown events depending on
* the value of the flag argument.
*
* = Parameters
* +_flag+:: Set the mouseDown event listening on/off (true/false) for
* the component instance.
*
* = Returns
* +self+
*
**/
setMouseDown: function(_flag) {
this.events.mouseDown = _flag;
this.setEvents();
return this;
},
/** = Description
* Registers or releases event listening for mouseUp events depending on the
* value of the flag argument.
*
* = Parameters
* +_flag+:: Set the mouseUp event listening on/off (true/false) for
* the component instance.
*
* = Returns
* +self+
*
**/
setMouseUp: function(_flag) {
this.events.mouseUp = _flag;
this.setEvents();
return this;
},
/** = Description
* Alternative flag setter for the mouseWheel event type. If set to true,
* starts listening to mouseWheel events when the component has focus.
*
* = Parameters
* +_flag+:: Set the mouseWheel event listening on/off (true/false) for
* the component instance.
*
* = Returns
* +self+
*
**/
setMouseWheel: function(_flag) {
this.events.mouseWheel = _flag;
this.setEvents();
return this;
},
/** = Description
* Registers or releases event listening for startDrag, drag and
* endDrag -events depending on the value of the flag argument.
*
* = Parameters
* +_flag+:: Set the startDrag, drag and endDrag event listening
* on/off (true/false) for the component instance.
*
* = Returns
* +self+
*
**/
setDraggable: function(_flag) {
this.events.draggable = _flag;
this.setEvents();
return this;
},
/** = Description
* Registers or releases event listening for startHover, drop and
* endHover -events depending on the value of the flag argument.
*
* = Parameters
* +_flag+:: Set the startHover, drop and endHover event listening
* on/off (true/false) for the component instance.
*
* = Returns
* +self+
*
**/
setDroppable: function(_flag) {
this.events.droppable = _flag;
this.setEvents();
return this;
},
/** = Description
* Registers or releases event listening for keyDown events depending on the
* value of the flag argument.
*
* = Parameters
* +_flag+:: Set the keyDown event listening on/off (true/false) for
* the component instance.
*
* = Returns
* +self+
*
**/
setKeyDown: function(_flag) {
this.events.keyDown = _flag;
this.setEvents();
return this;
},
/** = Description
* Registers or releases event listening for keyUp events depending on
* the value of the flag argument.
*
* = Parameters
* +_flag+:: Set the keyUp event listening on/off (true/false) for
* the component instance.
*
* = Returns
* +self+
*
**/
setKeyUp: function(_flag) {
this.events.keyUp = _flag;
this.setEvents();
return this;
},
/** = Description
* Registers or releases event listening for textEnter events
* depending on the value of the flag argument.
*
* = Returns
* +self+
*
**/
setTextEnter: function(_flag) {
this.events.textEnter = _flag;
this.setEvents();
return this;
},
/** Same as +setClickable+
**/
setClick: function(_flag) {
return this.setClickable(_flag);
},
/** = Description
* Default focus event responder method. Does nothing by default.
* Called when the component gets focus.
*
**/
focus: function() {},
/** = Description
* Default blur event responder method. Does nothing by default.
* Called when the component loses focus.
*
**/
blur: function() {},
/** = Description
* Default gainedActiveStatus event responder method. Does nothing by default.
* Called when the component gains active status; both focused and clicked.
*
* = Parameters
* +_lastActiveControl+:: A reference to the control that was active
* before this control became active. Can
* be null if there was no active control.
*
**/
gainedActiveStatus: function(_lastActiveControl) {
if ( (HSystem.windowFocusBehaviour === 1) && ( this.parents.length > 2 ) ) {
if ( this.parents[2].componentBehaviour.indexOf('window') !== -1 ) {
this.parents[2].gainedActiveStatus();
}
}
},
// A low-level handler for active status, don't extend this.
_gainedActiveStatus: function(_lastActiveControl) {
if(this.enabled) {
this.toggleCSSClass(this.elemId, HControl.CSS_ACTIVE, true);
}
this.gainedActiveStatus(_lastActiveControl);
},
/** = Description
* Default lostActiveStatus event responder method. Does nothing by default.
* Called when the component loses active status; another component was
* focused and clicked.
*
* = Parameters
* +_newActiveControl+:: A reference to the control that became the currently
* active control. Can be null if there is no active
* control.
*
**/
lostActiveStatus: function(_newActiveControl) {
},
// --A low-level handler for lost active status, don't extend this.++
_lostActiveStatus: function(_newActiveControl) {
if(this.enabled) {
this.toggleCSSClass(this.elemId, HControl.CSS_ACTIVE, false);
}
this.lostActiveStatus(_newActiveControl);
},
/** = Description
* Default mouseMove event responder method. Does nothing by default.
* Called whenever the mouse cursor is moved regardless if the
* component is active or has focus.
*
* = Parameters
* +x+:: The horizontal coordinate units (px) of the mouse cursor position.
* +y+:: The vertical coordinate units (px) of the mouse cursor position.
*
**/
mouseMove: function(x,y) {},
/** = Description
* Default click event responder method. Does nothing by default.
*
* = Parameters
* +x+:: The horizontal coordinate units (px) of the
* mouse cursor position.
* +y+:: The vertical coordinate units (px) of the
* mouse cursor position.
* +_isRightButton+:: Boolean flag; true if the right(context) mouse
* button is pressed.
*
**/
click: function(x,y,_isRightButton){},
/** = Description
* Default mouseDown event responder method. Does nothing by default.
*
* = Parameters
* +x+:: The horizontal coordinate units (px) of the
* mouse cursor position.
* +y+:: The vertical coordinate units (px) of the
* mouse cursor position.
* +_isRightButton+:: Boolean flag; true if the right(context) mouse
* button is pressed.
*
**/
mouseDown: function(x,y,_isRightButton) {},
/** = Description
* Default mouseDown event responder method. Does nothing by default.
*
* = Parameters
* +x+:: The horizontal coordinate units (px) of the
* mouse cursor position.
* +y+:: The vertical coordinate units (px) of the
* mouse cursor position.
* +_isRightButton+:: Boolean flag; true if the right(context) mouse
* button is pressed.
*
**/
mouseUp: function(x,y,_isRightButton) {},
/** = Description
* Default mouseWheel event responder method. Does nothing by default.
*
* = Parameters
* +_delta+:: Scrolling delta, the wheel angle change. If delta is positive,
* wheel was scrolled up. Otherwise, it was scrolled down.
*
**/
mouseWheel: function(_delta) {},
/** = Description
* Default startDrag event responder method. Sets internal flags by default.
* This is the preferred method to extend if you want to do something
* when a drag event starts. If you extend, remember to call +this.base();+
*
* = Parameters
* +x+:: The horizontal coordinate units (px) of the mouse cursor position.
* +y+:: The vertical coordinate units (px) of the mouse cursor position.
*
**/
startDrag: function(x, y) {},
/** = Description
* Default drag event responder method. Does nothing by default.
* This is the preferred method to extend while a drag method is ongoing.
* Called whenever the mouse cursor moves and a drag event has been started.
*
* = Parameters
* +x+:: The horizontal coordinate units (px) of the mouse cursor position.
* +y+:: The vertical coordinate units (px) of the mouse cursor position.
*
**/
drag: function(x,y){
this.doDrag(x,y);
},
doDrag: function(x, y) {},
/** = Description
* Default endDrag event responder method. Sets internal flags by default.
* This is the preferred method to extend if you want to do something
* when a drag event ends. If you extend, remember to call +this.base();+
*
* = Parameters
* +x+:: The horizontal coordinate units (px) of the mouse cursor position.
* +y+:: The vertical coordinate units (px) of the mouse cursor position.
*
**/
endDrag: function(x, y) {
this.invalidatePositionCache();
},
/** = Description
* Default drop event responder method. Does nothing by default.
* Extend the drop method, if you want to do something
* when this instance is the target of another instance's endDrag event.
* Called when a dragged component instance is dropped on the target instance.
*
* = Parameters
* +obj+:: The dragged component object.
*
**/
drop: function(obj) {
this.onDrop(obj);
},
onDrop: function(obj) {},
/** = Description
* Default startHover event responder method. Does nothing by default.
* Extend the startHover method, if you want to do something
* when this instance is the target of another instance's drag event.
* Called when a dragged component instance is dragged over
* the target instance.
*
* = Parameters
* +obj+:: The dragged component object.
*
**/
startHover: function(obj) {
this.onHoverStart(obj);
},
onHoverStart: function(obj) {},
/** = Description
* Default endHover event responder method. Does nothing by default.
* Extend the endHover method, if you want to do something
* when this instance is no longer the target of another instance's
* drag event. Called when a dragged component instance is dragged
* away from the target instance.
*
* = Parameters
* +obj+:: The dragged component object.
*
**/
endHover: function(obj) {
this.onHoverEnd(obj);
},
onHoverEnd: function(obj) {},
/** = Description
* Default keyDown event responder method. Does nothing by default.
* Extend the keyDown method, if you want to do something
* when a key is pressed and the component is active.
*
* = Parameters
* +_keycode+:: The ascii key code of the key that was pressed.
*
**/
keyDown: function(_keycode) {},
/** = Description
* Default keyUp event responder method. Does nothing by default.
* Extend the keyUp method, if you want to do something
* when a key is released and the component is active.
*
* = Parameters
* +_keycode+:: The ascii key code of the key that was released.
*
**/
keyUp: function(_keycode) {},
/** = Description
* Default textEnter event responder method. Does nothing by default.
* Extend the textEnter method, if you want to do something
* when a key is released regardless if the component is active,
* has focus or not.
*
* = Parameters
* +_keycode+:: The ascii key code of the key that was released.
*
**/
textEnter: function() {},
/** -- DON'T TOUCH _mouseOver, IT IS A LOW-LEVEL HANDLER, use focus() instead ++ **/
_mouseOver: function(e) {
if (!Event.element) {
return;
}
var _that = Event.element(e);
while(_that && _that.ctrl === undefined) {
_that = _that.parentNode;
}
if (!_that) {
return;
}
var _this = _that.ctrl;
EVENT.focus(_this);
Event.stop(e);
},
/** -- DON'T TOUCH _mouseOut, IT IS A LOW-LEVEL HANDLER, use blur() instead ++ **/
_mouseOut: function(e) {
if (!Event.element) {
return;
}
var _that = Event.element(e);
while(_that && _that.ctrl === undefined) {
_that = _that.parentNode;
}
if (!_that) {
return;
}
var _this = _that.owner;
EVENT.blur(_this);
Event.stop(e);
},
/** = Description
* Forces retrieving this control's DOM element position directly rather than
* using the cached version when the position is needed by +EVENT+.
* Child controls are invalidated recursively by +HView+.
*
* = Returns
* +self+
*
**/
invalidatePositionCache: function() {
this.base();
EVENT.coordCacheFlush(this.elemId);
return this;
}
});/* Riassence Framework
* Copyright 2006 Riassence Inc.
* http://riassence.com/
*
* You should have received a copy of the GNU General Public License along
* with this software package. If not, contact licensing@riassence.com
*/
/*** = Description
** Defines a minimal +HValue+ responder interface.
** It's implemented by default by +HControl+.
***/
HValueResponder = HClass.extend({
/** = Description
* Binds an HValue compatible instance to the component's valueObj. Also
* calls +setValue+. It should not be called from user code, instead
* use the +HValue+ instance method +bind+.
*
* = Parameter
* +_aValueObj+:: The HValue instance object to bind.
*
* = Returns
* +self+
*
**/
setValueObj: function(_valueObj) {
this.valueObj = _valueObj;
this.setValue(_valueObj.value);
return this;
},
/** = Description
* Checks, if the value given as parameter differs from +value+.
*
* = Parameters
* +_value+:: The value to be tested.
*
* = Returns
* A boolean true (different) or false (same).
*
**/
valueDiffers: function(_value){
return (COMM.Values.encode(_value) !== COMM.Values.encode(this.value));
},
/** = Description
* Assigns the object a new value.
* Extend it, if your component needs to do validation of the new value.
* For +HControl+ instances, extend HControl#refreshValue to do something when
* the +value+ has been set.
*
* = Parameter
* +_value+:: The new value. Allowed values depend on the component type
* and other usage of the bound +HValue+ instance +self.valueObj+.
*
* = Returns
* +self+
*
**/
setValue: function(_value) {
if(_value !== undefined && this['valueObj'] && this.valueDiffers(_value)) {
var _valueManager = COMM.Values;
this.value = _value;
if( _valueManager._builtins.indexOf( _valueManager.type(_value) ) === -1 ){
this.valueObj.set( _valueManager.clone( _value ) );
}
else {
this.valueObj.set( _value );
}
(this['refresh'] !== undefined) && (typeof this.refresh === 'function') && this.refresh();
}
return this;
}
});/* Riassence Framework
* Copyright 2006 Riassence Inc.
* http://riassence.com/
*
* You should have received a copy of the GNU General Public License along
* with this software package. If not, contact licensing@riassence.com
*/
/*** = Description
** A HDummyValue is just a placeholder for HValue values. HDummyValue
** is a light-weight alternative that doesn't implement any actual HValue
** functionality, but implements the essential methods and keeps the HControl
** content when an actual HValue instance isn't bound.
** It's the default valueObj type for components not bound to real HValue instances.
***/
HDummyValue = HClass.extend({
/** = Description
* HDummyValue is initialized just like a real HValue.
*
* = Parameters
* +_id+:: Any string or integer, just a placeholder for HValue.id
* +_value+:: Any valid js object, just as for HValue.value
*
**/
constructor: function(_id, _value) {
this.id = _id;
this.value = _value;
},
/** Sets a new instance payload value.
**/
set: function(_value) {
this.value = _value;
},
/** Returns the instance payload value.
**/
get: function() {
return this.value;
},
/** Binds HControl, does actually nothing.
**/
bind: function( _theObj ){},
/** Unbinds (releases) HControl, does actually nothing.
**/
unbind: function( _theObj ){}
});
/* Riassence Framework
* Copyright 2006 Riassence Inc.
* http://riassence.com/
*
* You should have received a copy of the GNU General Public License along
* with this software package. If not, contact licensing@riassence.com
*/
/*** = Description
** Define default setting here. Will be used, when no or invalid constructor
** options are supplied.
***/
HControlDefaults = HClass.extend({
/** The default label. A label is the "visual value" of a component that
* operates on a "hidden" value.
**/
label: "",
/** The default initial visibility of the component.
**/
visible: true,
/** The default initial event responders to register to a component.
* By default no events are enabled.
**/
events: null,
constructor: function(){
if(!this.events){
this.events = {};
}
},
/** The default initial value of the component.
**/
value: 0,
/** The default initial enabled state of the component.
**/
enabled: true,
/** The default initial active state of the component.
**/
active: false,
/** The default initial minimum value of the component.
**/
minValue: -2147483648,
/** The default initial maximum value of the component.
**/
maxValue: 2147483648
});
// Alias for backwards-compatibility.
HComponentDefaults = HControlDefaults;
/* Riassence Framework
* Copyright 2006 Riassence Inc.
* http://riassence.com/
*
* You should have received a copy of the GNU General Public License along
* with this software package. If not, contact licensing@riassence.com
*/
/** = Description
* The foundation class for all active visual components that
* implement events and values.
*
* Extend +HControl+ to suit your needs. See any component
* for extension reference.
*
**/
HControl = HView.extend({
/** Component behaviour includes 'view' and 'control' as a default.
**/
componentBehaviour: ['view','control'],
/** A flag: when true, calls the +refreshValue+ method whenever
* +self.value+ is changed.
**/
refreshOnValueChange: true,
/** A flag: when true, calls the +refreshLabel+ method whenever
* +self.label+ is changed.
**/
refreshOnLabelChange: true,
/** The visual value of a component, usually a String. See setLabel.
**/
label: null,
/** The event object structure that specifies which events to listen to.
**/
events: null,
/** The enabled/disabled flag. See setEnabled.
**/
enabled: null,
/** The current value of a component. See setValue.
**/
value: null,
/** The current HValue compatible object. Do not set directly.
* Holds reference to the bound HValue instance.
* Set with HValue.bind.
**/
valueObj: null,
/** The minimum numeric value allowed, when the component
* utilizes value ranges. See setValueRange
**/
minValue: null,
/** The maximum allowed value, when the component
* utilizes value ranges. See setValueRange
**/
maxValue: null,
/** A boolean value that shows whether this control is currently
* active or not. Control gets active when the user clicks on it.
**/
active: null,
/** An reference to the options block given as the constructor
* parameter _options.
**/
options: null,
/** -- Use this object to specify class-specific default settings. ++
* The controlDefaults is a HControlDefaults object that is extended
* in the constructor with the options block given. The format of
* it is an Object.
**/
controlDefaults: HControlDefaults,
/** = Description
* The constructor of HControl implements the same model as HView,
* but accepts a third parameter: the options object, that contain
* optional properties, like the value, label and events.
*
* = Parameters
* +_rect+:: An instance of +HRect+, defines the position and size of views.
* It can be also defined with an array, see below.
* +_parent+:: The parent instance this instance will be contained within.
* A valid parent can be another HView compatible instance,
* an HApplication instance, a HControl or a similar extended
* HView instance. The origin of the +_rect+ is the same as the
* parent's offset. For HApplication instances, the web browser's
* window's left top corner is the origin.
* +_options+:: Optional, all other parameters as object attributes.
* Defaults to an instance of +HControlDefaults+, see controlDefaults
*
* == The +_rect+ dimensions as arrays
* Instead of an instance of +HRect+, dimensions can also be supplied as arrays.
* The array length must be either 4 or 6. If the length is 4, the dimensions are
* specified as follows: +[ x, y, width, height ]+. Note that this is different
* from the construction parameters of +HRect+ that takes the coordinates as two
* points, like: +( left, top, right, bottom )+.
* Arrays with 6 items are a bit more complex (and powerful) as they can specify
* the flexible offsets too.
*
* === The array indexes for a +_rect+ configured as an 4-item array:
* Always left/top aligned, all items must be specified.
* Index:: Description
* +0+:: The X-coordinate (measured from the parent's left edge)
* +1+:: The Y-coordinate (measured from the parent's top edge)
* +2+:: The width.
* +3+:: The height.
*
* === The array indexes a +_rect+ configured as an 6-item array:
* Can be any configuration of left/top/right/bottom alignment and supports
* flexible widths. At least 4 items must be specified.
* Index:: Description
* +0+:: The left-aligned X-coordinate or +null+ if the view is
* right-aligned and using a right-aligned X-coordinate at
* index +4+ as well as the width specified at index +2+.
* +1+:: The top-aligned Y-coordinate or +null+ if the view is
* bottom-aligned and using a right-aligned X-coordinate at
* index +5+ as well as the height specified at index +3+.
* +2+:: The width, if only one X-coordinate specifies the
* position (at indexes +0+ or +4+).
* If both X-coordinates (at indexes +0+ and +4+) are
* specified, the width can be specified with a +null+ for
* automatic (flexible) width. If the width is specified,
* it's used as the minimum width.
* +3+:: The height, if only one Y-coordinate specifies the
* position (at indexes +1+ or +5+).
* If both Y-coordinates (at indexes +1+ and +5+) are
* specified, the height can be specified with a +null+ for
* automatic (flexible) height. if the height is specified,
* it's used as the minimum height.
* +4+:: The right-aligned X-coordinate or +null+ if the view is
* left-aligned and using a left-aligned X-coordinate at
* index +0+ as well as the width specified at index +2+.
* +5+:: The bottom-aligned Y-coordinate or +null+ if the view is
* top-aligned and using a top-aligned X-coordinate at
* index +1+ as well as the height specified at index +3+.
* == Usage examples of +_rect+:
* Specified as two instances of +HPoint+,
* x: 23, y: 75, width: 200, height: 100:
* HRect.nu( HPoint.nu( 23, 75 ), HPoint.nu( 223, 175 ) )
*
* The same as above, but without +HPoint+ instances:
* HRect.nu( 23, 75, 223, 175 )
*
* The same as above, but with an array as the constructor
* parameter for +HRect+:
* HRect.nu( [ 23, 75, 223, 175 ] )
*
* The same as above, but with an array instead of a +HRect+ instance:
* [ 23, 75, 200, 100 ]
*
* The same as above, but with a 6-item array:
* [ 23, 75, 200, 100, null, null ]
*
* The same as above, but aligned to the right instead of left:
* [ null, 75, 200, 100, 23, null ]
*
* The same as above, but aligned to the right/bottom edges:
* [ null, null, 200, 100, 23, 75 ]
*
* The same as above, but aligned to the left/bottom edges:
* [ 23, null, 200, 100, null, 75 ]
*
* Flexible width (based on the parent's dimensions):
* [ 23, 75, null, 100, 23, null ]
*
* Flexible height (based on the parent's dimensions):
* [ 23, 75, 200, null, null, 75 ]
*
* Flexible width and height (based on the parent's dimensions):
* [ 23, 75, null, null, 23, 75 ]
*
* Flexible width and height, but limited to a minimum width
* of 200 and a minimum height of 100 (based on the parent's dimensions):
* [ 23, 75, 200, 100, 23, 75 ]
*
* == The +_options+ Object, all options are optional and default to what's
* defined in +controlDefaults+.
* Key:: Description
* +value+:: The initial value of the component. It's type and meaning
* differs between components.
* +valueObj+:: An HValue instance to bind immediately. The value of the
* HValue instance overrides the +value+ option.
* +label+:: The label of the component. It's usually a text (or html)
* String. Its meaning differs between components.
* See +setLabel+ and +refreshLabel+
* +visible+:: A Boolean value defining the initial visibility of the
* component. A true value means visible and false means
* hidden.
* +events+:: An Object containing the events to listen to.
* See setEvents and EVENT
* +enabled+:: A Boolean value defining the initial enabled -state
* of the component. Set to false to initially disable the
* component. See setEnabled
* +active+:: A Boolean value defining the initial active (clicked
* or focused) state of the component.
* +minValue+:: A Number for components utilizing value ranges.
* See setValueRange
* +maxValue+:: A Number for components utilizing value ranges.
* See setValueRange
*
*
**/
constructor: function(_rect, _parent, _options) {
if(!_options) {
_options = {};
}
var _this = this;
_options = (_this.controlDefaults.extend(_options)).nu(this);
_this.options = _options;
if(_this.isinherited) {
_this.base(_rect, _parent);
}
else {
_this.isinherited = true;
_this.base(_rect, _parent);
_this.isinherited = false;
}
var _isValueRange = (_options.minValue || _options.maxValue),
_label = _options.label,
_events = _options.events;
if(_options.visible) {
_this.show();
}
else {
_this.hide();
}
if(_isValueRange) {
_this.minValue = _options.minValue;
_this.maxValue = _options.maxValue;
}
_this.setLabel(_label);
_this.setEvents(_events);
_this.setEnabled(_options.enabled);
if(_options.valueObj){
_options.valueObj.bind(_this);
}
else if(!_this.valueObj) {
_this.valueObj = HDummyValue.nu();
}
if((_this.value===null)&&(_options.value!==undefined)) {
_this.setValue(_options.value);
}
if(_isValueRange) {
_this.setValueRange(this.value, _options.minValue, _options.maxValue);
}
if(!_this.isinherited) {
_this.draw();
}
},
/** = Description
* The destructor of +HControl+ instances.
* Releases events and values before passing through to the base HView.die.
* Extend it, you you allocate new instance members that need to be
* deallocated upon destruction.
*
**/
die: function() {
var _this = this;
if(_this.valueObj){
_this.valueObj.unbind(_this);
_this.valueObj = null;
}
EVENT.unreg(_this);
_this.base();
},
/** = Description
* Sets the label on a control component: the text that's displayed in
* HControl extensions. Visual functionality is implemented in component
* theme templates and refreshLabel method extensions.
*
* Avoid extending directly, extend +refreshLabel+ instead.
*
* = Parameters
* +_label+:: The text the component should display.
*
* = Returns
* +self+
*
**/
setLabel: function(_label) {
var _this = this,
_differs = (_label !== _this.label);
if(_differs){
_this.label = _label;
_this.options.label = _label;
_this.refresh();
}
return this;
},
/** = Description
* Enables the HControl instance, if the enabled flag is true, and disables
* it if enabled is false. A disabled HControl won't respond events.
* Component themes reflect the disabled state typically with
* a dimmer appearance.
*
* = Parameters
* +_flag+:: Boolean; true enables, false disables.
*
* = Returns
* +this+
*
**/
setEnabled: function(_flag) {
var _this = this,
_elemId = this.elemId,
_sysViews = HSystem.views,
i = 0,
_views = _this.views,
_viewsLen = _views.length;
// Enable/disable the children first.
for (; i < _viewsLen; i++) {
_sysViews[_views[i]].setEnabled(_flag);
}
if (_this.enabled === _flag) {
// No change in enabled status, do nothing.
return this;
}
_this.enabled = _flag;
if(_flag) {
EVENT.reg(_this, _this.events);
}
else {
EVENT.unreg(this);
}
// Toggle the CSS class: enabled/disabled
_this.toggleCSSClass(_elemId, HControl.CSS_ENABLED, _flag);
_this.toggleCSSClass(_elemId, HControl.CSS_DISABLED, !_flag);
return this;
},
/** = Description
* Assigns the object a new value range. Used for sliders, steppers etc. Calls
* setValue with the value given.
*
* = Parameters
* +_value+:: The new value to be set to the component's
* HValue compatible instance.
*
* +_minValue+:: The new minimum value limit. See minValue.
*
* +_maxValue+:: The new maximum value limit. See maxValue.
*
* = Returns
* +self+
*
**/
setValueRange: function(_value, _minValue, _maxValue) {
this.minValue = _minValue;
this.maxValue = _maxValue;
_value = (_value < _minValue) ? _minValue : _value;
_value = (_value > _maxValue) ? _maxValue : _value;
this.setValue(_value);
return this;
},
/** = Description
* Called when the +self.value+ has been changed. By default
* tries to update the value element defined in the theme of
* the component. Of course, the HControl itself doesn't
* define a theme, so without a theme doesn't do anything.
*
* = Returns
* +self+
*
**/
refreshValue: function(){
if(this.markupElemIds){
if(this.markupElemIds['value']){
ELEM.setHTML(this.markupElemIds.value,this.value);
}
}
return this;
},
/** = Description
* Called when the +self.label+ has been changed. By default
* tries to update the label element defined in the theme of
* the component. Of course, the HControl itself doesn't
* define a theme, so without a theme doesn't do anything.
*
* = Returns
* +self+
*
**/
refreshLabel: function(){
if(this.markupElemIds){
if(this.markupElemIds['label']){
ELEM.setHTML(this.markupElemIds.label,this.label);
}
}
return this;
},
/** = Description
* Called mostly internally whenever a property change requires usually visual
* action. It's called by methods like setLabel and setValue.
* Extends HView.refresh. The boolean properties refreshOnValueChange and
* refreshOnLabelChange control whether refreshValue or refreshLabel
* should be called. It's used as-is in most components. If you implement
* your class extension with properties similar to value or label,
* you are advised to extend the refresh method.
*
* = Returns
* +self+
*
**/
refresh: function(){
this.base();
if(this.drawn){
if(this.refreshOnValueChange){
this.refreshValue();
}
if(this.refreshOnLabelChange){
this.refreshLabel();
}
}
return this;
}
},
{
// The CSS class name to set when the component is disabled
CSS_DISABLED: "disabled",
// The CSS class name to set when the component is enabled
CSS_ENABLED: "enabled",
// The CSS class name to set when the component is active (clicked/focused)
CSS_ACTIVE: "active"
});
HControl.implement( HValueResponder );
HControl.implement( HEventResponder );
/* Riassence Framework
* Copyright 2008 Riassence Inc.
* http://riassence.com/
*
* You should have received a copy of the GNU General Public License along
* with this software package. If not, contact licensing@riassence.com
*/
/*** = Description
** The +HControl+ extension that defines a draggable and
** resizable foundation container view.
**
** It's used like a HControl, but contains pre-defined active areas
** for resizing and moving its view. The resizable areas are defined
** by the edges (only horizontal or vertical resizability) and corners
** (both horizontal and vertical resizability). The rest triggers
** the movable area.
**
** The droppable events are enabled by default and
** a lot more constructor options can be defined: see +controlDefaults+
**
**
***/
HDynControl = HControl.extend({
componentBehaviour: ['view','control','window'],
preserveTheme: true,
/** = Description
* In addition to the standard HControl#constructor options,
* the following properties can be set:
*
* Key:: Description
* +minX+:: The minimum X-coordinate allowed to be dragged or resized to.
* Defaults to +0+.
* +minY+:: The minimum Y-coordinate allowed to be dragged or resized to.
* Defaults to +0+.
* +maxX+:: The maximum X-coordinate allowed to be dragged or resized to.
* Defaults to the browser window width.
* +maxY+:: The maximum Y-coordinate allowed to be dragged or resized to.
* Defaults to the browser window height.
* +minSize+:: An array containing exactly two values: +[ width, height ]+.
* Defines the minimum size allowed for resizing.
* Defaults to +[ 24, 54 ]+
* +maxSize+:: An array containing exactly two values: +[ width, height ]+.
* Defines the maximum size allowed for resizing.
* Defaults to the browser window size.
* +resizeW+:: The size of the west (left) resizable edge. Defaults to +1+.
* +resizeE+:: The size of the east (right) resizable edge. Defaults to +1+.
* +resizeN+:: The size of the north (top) resizable edge. Defaults to +1+.
* +resizeS+:: The size of the south (bottom) resizable edge. Default to +1+.
* +resizeNW+:: The size of the north-west (left top) resizable corner.
* Defaults to +[ 1, 1 ]+
* +resizeNE+:: The size of the north-east (right top) resizable corner.
* Defaults to +[ 1, 1 ]+
* +resizeSW+:: The size of the south-west (left bottom) resizable corner.
* Defaults to +[ 1, 1 ]+
* +resizeSE+:: The size of the south-east (right bottom) resizable corner.
* Defaults to +[ 1, 1 ]+
* +noResize+:: A flag (when true) disables all resizing and only allows
* moving.
*
**/
controlDefaults: (HControlDefaults.extend({
constructor: function(_ctrl){
var _winSize = ELEM.windowSize(),
_winWidth = _winSize[0],
_winHeight = _winSize[1];
if(!this.minSize){
this.minSize = [24,54];
}
if(!this.maxSize){
this.maxSize = _winSize;
}
if(!this.maxX){
this.maxX = _winWidth-this.minSize[0];
}
if(!this.maxY){
this.maxY = _winHeight-this.minSize[1];
}
if(!this.events){
this.events = {
draggable: true
};
}
if(!this.resizeNW){
this.resizeNW = [ 1, 1 ];
}
if(!this.resizeNE){
this.resizeNE = [ 1, 1 ];
}
if(!this.resizeSW){
this.resizeSW = [ 1, 1 ];
}
if(!this.resizeSE){
this.resizeSE = [ 1, 1 ];
}
},
minX: 0,
minY: 0,
maxX: null,
maxY: null,
minSize: null,
maxSize: null,
resizeW: 1,
resizeE: 1,
resizeN: 1,
resizeS: 1,
resizeNW: null,
resizeNE: null,
resizeSW: null,
resizeSE: null,
noResize: false
})),
draw: function(){
this.base();
this._initActionFns();
this._initActionFlag();
},
/* Method for checking the change is within the limits */
_checkConstraints: function(_leftChange,_topChange){
var _this = this, _rect = _this.rect,
_options = _this.options,
_dw, _dh;
if(_rect.width < _options.minSize[0]){
_dw=0-(_options.minSize[0]-_rect.width);
_rect.setWidth( _options.minSize[0]);
if(_leftChange){
_rect.offsetBy( _dw, 0 );
}
}
else if(_rect.width > _options.maxSize[0]){
_dw=0-(_options.maxSize[0]-_rect.width);
_rect.setWidth( _options.maxSize[0]);
if(_leftChange){
_rect.offsetBy( _dw, 0 );
}
}
if(_rect.height < _options.minSize[1]){
_dh=0-(_options.minSize[1]-_rect.height);
_rect.setHeight(_options.minSize[1]);
if(_topChange){
_rect.offsetBy( 0, _dh );
}
}
else if(_rect.height > _options.maxSize[1]){
_dh=0-(_options.maxSize[1]-_rect.height);
_rect.setHeight(_options.maxSize[1]);
if(_topChange){
_rect.offsetBy( 0, _dh );
}
}
if(_rect.left < _options.minX){
_rect.offsetTo( _options.minX, _rect.top );
}
else if(_rect.left > _options.maxX){
_rect.offsetTo( _options.maxX, _rect.top );
}
if(_rect.top < _options.minY){
_rect.offsetTo( _rect.left, _options.minY );
}
else if(_rect.top > _options.maxY){
_rect.offsetTo( _rect.left, _options.maxY );
}
_this.drawRect();
},
/* Method for returning the coordinate difference as a HPoint instance */
_diffPoint: function(x,y){
return this._startPoint.subtract(x,y);
},
/** = Description
* Sub-event method responder when the north-west (left-top) corner is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeNW: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setLeftTop(_this._startRect.leftTop.subtract(_dp));
_this._checkConstraints(1,1);
},
/** = Description
* Sub-event method responder when the north-east (right-top) corner is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeNE: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setRightTop(_this._startRect.rightTop.subtract(_dp));
_this._checkConstraints(0,1);
},
/** = Description
* Sub-event method responder when the south-west (left-bottom) corner is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeSW: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setLeftBottom(_this._startRect.leftBottom.subtract(_dp));
_this._checkConstraints(1,0);
},
/** = Description
* Sub-event method responder when the south-east (right-bottom) corner is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeSE: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setRightBottom(_this._startRect.rightBottom.subtract(_dp));
_this._checkConstraints(0,0);
},
/** = Description
* Sub-event method responder when the west (left) edge is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeW: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setLeft(_this._startRect.left-_dp.x);
_this._checkConstraints(1,0);
},
/** = Description
* Sub-event method responder when the east (right) edge is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeE: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setRight(_this._startRect.right-_dp.x);
_this._checkConstraints(0,0);
},
/** = Description
* Sub-event method responder when the north (top) edge is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeN: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setTop(_this._startRect.top-_dp.y);
_this._checkConstraints(0,1);
},
/** = Description
* Sub-event method responder when the south (bottom) edge is being
* moved to resize the view.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynResizeS: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.setBottom(_this._startRect.bottom-_dp.y);
_this._checkConstraints(0,0);
},
/** = Description
* Sub-event method responder when moving the offset of the view.
* This is called when no resize areas are triggered.
*
* By default calculates the dimensions and checks the constraints.
*
* = Parameters
* +_this+:: The instance of the class it belongs to (+self+).
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
**/
dynDrag: function(_this,x,y){
var _dp = _this._diffPoint(x,y);
_this.rect.offsetTo(_this._startRect.leftTop.subtract(_dp));
_this._checkConstraints(1,1);
},
/* Method to initialize the rules */
_initActionFns: function(){
this._actionFns = [];
this._actionCrsr = [
'nw-resize', 'ne-resize', 'sw-resize', 'se-resize',
'w-resize', 'e-resize', 'n-resize', 's-resize', 'move'
];
var i, _this = this,
_resizeNW=0,_resizeNE=1,_resizeSW=2,_resizeSE=3,
_resizeW =4, _resizeE=5, _resizeN=6, _resizeS=7, _drag=8,
_actionFns=this._actionFns;
_actionFns[_resizeNW] = _this.dynResizeNW;
_actionFns[_resizeNE] = _this.dynResizeNE;
_actionFns[_resizeSW] = _this.dynResizeSW;
_actionFns[_resizeSE] = _this.dynResizeSE;
_actionFns[_resizeW] = _this.dynResizeW;
_actionFns[_resizeE] = _this.dynResizeE;
_actionFns[_resizeN] = _this.dynResizeN;
_actionFns[_resizeS] = _this.dynResizeS;
_actionFns[_drag] = _this.dynDrag;
},
/** Calculates the rectangles for all the active areas.
**/
makeRectRules: function(){
var _opts=this.options, _rect=this.rect;
return [
// corners:
[0,0,_opts.resizeNW[0],_opts.resizeNW[1]], // NW
[_rect.width-_opts.resizeNE[0],0,_rect.width,_opts.resizeNE[1]], // NE
[0,_rect.height-_opts.resizeSW[1],_opts.resizeSW[0],_rect.height], // SW
[_rect.width-_opts.resizeSE[0],_rect.height-_opts.resizeSE[1],_rect.width,_rect.height], // SE
// borders:
[0,_opts.resizeN,_opts.resizeW,_rect.height-_opts.resizeS], // W
[_rect.width-_opts.resizeE,_opts.resizeN,_rect.width,_rect.height-_opts.resizeS], // E
[_opts.resizeW,0,_rect.width-_opts.resizeE,_opts.resizeN], // N
[_opts.resizeW,_rect.height-_opts.resizeS,_rect.width-_opts.resizeE,_rect.height], // S
// drag-area:
[_opts.resizeW,_opts.resizeN,_rect.width-_opts.resizeE,_rect.height-_opts.resizeS]
];
},
/* Method used for initializing the action flags. */
_initActionFlag: function(){
this._actionFlag = -1;
this._actionRects = [];
var i=0,_rr,_rectRules = this.makeRectRules();
for(;i<9;i++){
_rr = _rectRules[i];
this._actionRects.push( HRect.nu(_rr[0],_rr[1],_rr[2],_rr[3]) );
}
},
/* Method used to detect the action flags. Also sets the cursor. */
_detectActionFlag: function(){
var i,
_actionPoint = this._startPoint.subtract(this.rect.left,this.rect.top),
_actionRects = this._actionRects;
if(this.options.noResize && _actionRects[8].contains(_actionPoint)){
this._actionFlag = 8;
this.setStyle('cursor',this._actionCrsr[8]);
return;
}
for(i=0;i!==9;i++){
if(_actionRects[i].contains(_actionPoint)){
this._actionFlag=i;
this.setStyle('cursor',this._actionCrsr[i]);
return;
}
}
},
/** = Description
* Event method responder that decides and initializes
* a resize or move operation on the drag events.
*
* = Parameters
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
* +_isRightButton+:: A flag that is true when right (or context) clicking.
*
* = Returns
* +true+
*
**/
startDrag: function(x,y,_isRightButton){
var _parent = this.parent;
if(_parent.elemId){
x-=_parent.pageX();
y-=_parent.pageY();
}
this._startPoint = new HPoint(x,y);
this._startRect = new HRect( this.rect );
this._detectActionFlag();
if(this._actionFlag!==-1){
this._actionFns[this._actionFlag](this,x,y);
}
return true; // prevents text selection
},
/** = Description
* Event method responder that performs a resize or move recalculation
* and redraw call when dragging one of the corners or edges to resize or
* any other area to move.
*
* = Parameters
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
*
* = Returns
* +true+
*
**/
drag: function(x,y){
var _parent = this.parent;
if(_parent.elemId){
x-=_parent.pageX();
y-=_parent.pageY();
}
if(this._actionFlag!==-1){
this._actionFns[this._actionFlag](this,x,y);
}
return true; // prevents text selection
},
/** = Description
* Event method responder that ends a resize or move operation.
* Also restores the mouse cursor.
*
* = Parameters
* +x+:: The current x coordinate of the mouse cursor.
* +y+:: The current y coordinate of the mouse cursor.
* +_isRightButton+:: A flag that is true when right (or context) clicking.
*
* = Returns
* +true+
*
**/
endDrag: function(x,y,_isRightButton){
this.base();
var _parent = this.parent;
if(_parent.elemId){
x-=_parent.pageX();
y-=_parent.pageY();
}
if(this._actionFlag!==-1){
this._actionFns[this._actionFlag](this,x,y);
}
this.setStyle('cursor','default');
this._initActionFlag();
return true; // prevents text selection
}
});