js/foundation/view/view.js in rsence-pre-2.2.0.38 vs js/foundation/view/view.js in rsence-pre-2.2.2.0

- old
+ new

@@ -297,11 +297,10 @@ * of 200 and a minimum height of 100 (based on the parent's dimensions): * [ 23, 75, 200, 100, 23, 75 ] * **/ constructor: function(_rect, _parent, _options) { - if( !_options ){ _options = {}; } if(!this.isinherited){ _options = (this.viewDefaults.extend(_options)).nu(this); @@ -540,10 +539,12 @@ * other element types. * ++ **/ _makeElem: function(_parentElemId){ this.elemId = ELEM.make(_parentElemId,'div'); + ELEM.setAttr( this.elemId, 'view_id', this.viewId ); + ELEM.setAttr( this.elemId, 'elem_id', this.elemId ); }, /** -- * = Description * The _setCSS method does the initial styling of the element. @@ -612,14 +613,14 @@ * = Returns * +self+ * **/ drawRect: function() { - if(!this.rect.isValid){ + if(!this.rect.isValid && !this.isProduction){ console.log('invalid rect:',this.rect);//,ELEM.get(this.elemId)); } - if(!this.parent){ + if(!this.parent && !this.isProduction){ console.log('no parent:',ELEM.get(this.elemId)); } if (this.parent && this.rect.isValid) { var i = 0, @@ -654,11 +655,13 @@ if( i < 6 && _value !== _auto ){ _value += 'px'; } ELEM.setStyle(_elemId,_key,_value,true); } - (this.drawn === false) && _this._updateZIndex(); + if(this.drawn === false){ + _this._updateZIndex(); + } if ( _this._cachedLeft !== _rect.left || _this._cachedTop !== _rect.top) { _this.invalidatePositionCache(); _this._cachedLeft = _rect.left; _this._cachedTop = _rect.top; @@ -695,18 +698,24 @@ * * = Returns * +self+ * **/ + _ieNoThrough: null, draw: function() { var _isDrawn = this.drawn; this.drawRect(); if(!_isDrawn){ this.firstDraw(); if(this['componentName']!==undefined){ this.drawMarkup(); } + else if(BROWSER_TYPE.ie && this._ieNoThrough === null){ + this._ieNoThrough = ELEM.make( this.elemId ); + ELEM.setCSS( this._ieNoThrough, 'position:absolute;left:0;top:0;bottom:0;right:0;background-color:#ffffff;font-size:0;line-height:0' ); + ELEM.setStyle( this._ieNoThrough, 'opacity', 0.01 ); + } this.drawSubviews(); if(this.options.style){ this.setStyles( this.options.style ); } if(this.options.html){ @@ -750,11 +759,11 @@ } else { _themeName = HThemeManager.currentTheme; } _markup = HThemeManager.getMarkup( _themeName, this.componentName, this.themePath ); - if(_markup === false){ + if(_markup === false && !this.isProduction){ console.log('Warning: Markup template for "'+this.componentName+'" using theme "'+_themeName+'" not loaded.'); } this.markup = _markup; return (_markup !== false); }, @@ -834,11 +843,11 @@ } for( var i=0, _reFrom, _reTo, _reArr = this._escapeHTMLArr; i < _reArr.length; i++ ){ _reFrom = _reArr[i][0]; _reTo = _reArr[i][1]; _html = _html.replace( _reFrom, _reTo ); - } + } return _html; }, _escapeHTMLArr: [ [ new RegExp( /&/gmi ), '&amp;' ], [ new RegExp( />/gmi ), '&gt;' ], @@ -879,22 +888,23 @@ } if(this.parent.elemId === 0){ var _winSize = ELEM.windowSize(), _docSize = ELEM.getScrollSize(0); + // console.log('winSize:',JSON.stringify(_winSize),', docSize:',JSON.stringify(_docSize)); if( _docSize[0] > _winSize[0] || _docSize[1] > _winSize[1] ){ - _docSize = _winSize; + _winSize = _docSize; } return [ _winSize[0], _winSize[1] ]; } else { var _rect = this.parent.rect, _width, // = _rect.width, _height, // = _rect.height; _parentElemId = ( this.parent.markupElemIds && this.parent.markupElemIds.subview ) ? this.parent.markupElemIds.subview : this.parent.elemId; - if (this.parent.flexLeft && this.parent.flexRight){ + if (this.parent.flexLeft && this.parent.flexRight){ _width = parseInt( ELEM.getStyle( _parentElemId, 'width', true ), 10 ); } else { _width = _rect.width; } @@ -915,17 +925,27 @@ return [ 0, 0, _parentSize[0], _parentSize[1] ]; }, minWidth: 0, setMinWidth: function(_minWidth){ - this.minWidth = _minWidth; - ELEM.setStyle( this.elemId, 'min-width', this.minWidth+'px', true); + if( typeof _minWidth === 'number' ){ + this.minWidth = _minWidth; + ELEM.setStyle( this.elemId, 'min-width', this.minWidth+'px', true); + } + else if ( !this.isProduction) { + console.log('warning: setMinWidth( '+(typeof _minWidth)+' '+_minWidth+' ) should be a number; value ignored!'); + } }, minHeight: 0, setMinHeight: function(_minHeight){ - this.minHeight = _minHeight; - ELEM.setStyle( this.elemId, 'min-height', this.minHeight+'px', true); + if( typeof _minHeight === 'number' ){ + this.minHeight = _minHeight; + ELEM.setStyle( this.elemId, 'min-height', this.minHeight+'px', true); + } + else if ( !this.isProduction) { + console.log('warning: setMinHeight( '+(typeof _minHeight)+' '+_minHeight+' ) should be a number; value ignored!'); + } }, /** = Description * Replaces the rect of the component with a new HRect instance and * then refreshes the display. @@ -961,75 +981,131 @@ _validRightOffset = (typeof _rightOffset === 'number'), _validBottomOffset = (typeof _bottomOffset === 'number'), _validWidth = (typeof _width === 'number'), _validHeight = (typeof _height === 'number'), _right, - _bottom; + _bottom, + _parentSize, + _parentWidth, + _parentHeight; if(_arrLen === 6){ - var - _parentSize = this.parentSize(), - _parentWidth = _parentSize[0], + _parentSize = this.parentSize(); + _parentWidth = _parentSize[0]; _parentHeight = _parentSize[1]; } - if( (!_validLeftOffset && !_validRightOffset) || - (!_validTopOffset && !_validBottomOffset) ){ - console.log(_throwPrefix + '(left or top) and (top or bottom) must be specified.'); + if( !this.isProduction ){ + 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.'); + } } - 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); - if(_validLeftOffset && _validWidth && !_validRightOffset){ _right = _leftOffset + _width; } else if(!_validLeftOffset && _validWidth && _validRightOffset){ _right = _parentWidth-_validRightOffset; _leftOffset = _right-_width; + this.setMinWidth( _width ); } else if(_validLeftOffset && _validRightOffset){ _right = _parentWidth - _rightOffset; - _validWidth && this.setMinWidth( _width ); - _right = _parentWidth - _rightOffset; + if( _validWidth ){ + this.setMinWidth( _width ); + if( _parentWidth - _leftOffset < _width ){ + if( !this.isProduction ){ + console.log('warning: the minWidth('+ + _width+ + ') is less than available width('+ + (_parentWidth-_leftOffset-_rightOffset)+ + '); right ('+_right+') yields to: '+_leftOffset+_width+'!'); + } + _right = _leftOffset+_width; + } + } + else if ( _right < _leftOffset ) { + if( !this.isProduction ){ + console.log('warning: there is not enough width ('+ + _parentWidth+') to fit flexRightOffset ('+ + _rightOffset+ + ') and left ('+ + _leftOffset+ + '). right yields to ('+ + _leftOffset+') and flexRightOffset yields to ('+ + (_parentWidth-_leftOffset)+')!'); + } + _rightOffset = _parentWidth-_leftOffset; + _right = _leftOffset; + } } if(_validTopOffset && _validHeight && !_validBottomOffset){ _bottom = _topOffset + _height; } else if(!_validTopOffset && _validHeight && _validBottomOffset){ _bottom = _parentHeight-_validBottomOffset; _topOffset = _bottom-_height; + this.setMinHeight( _height ); } else if(_validTopOffset && _validBottomOffset){ _bottom = _parentHeight - _bottomOffset; - _validHeight && this.setMinHeight( _height ); - _bottom = _parentHeight - _bottomOffset; + if( _validHeight ){ + this.setMinHeight( _height ); + if( _parentHeight - _topOffset < _height ){ + if( !this.isProduction ){ + console.log('warning: the minHeight('+ + _height+ + ') is less than available height('+ + (_parentHeight-_topOffset-_bottom)+ + '). bottom('+_bottom+') yields: '+(_topOffset + _height)+'!'); + } + _bottom = _topOffset + _height; + } + } + else if ( _bottom < _topOffset ) { + if( !this.isProduction ){ + console.log('warning: there is not enough height ('+ + _parentHeight+') to fit flexBottomOffset ('+ + _bottom+ + ') and bottom ('+ + _bottomOffset+ + ') bottom yields to ('+ + _topOffset+') and flexBottomOffset yields to ('+ + (_parentHeight-_topOffset)+')!'); + } + _bottomOffset = _parentHeight-_topOffset; + _bottom = _topOffset; + } } if( _leftOffset > _right ){ _right = _leftOffset; } if( _topOffset > _bottom ){ _bottom = _topOffset; } + this.setMinWidth(this.minWidth); + this.setMinHeight(this.minHeight); + this.setFlexLeft(_validLeftOffset,_leftOffset); + this.setFlexTop(_validTopOffset,_topOffset); + this.setFlexRight(_validRightOffset,_rightOffset); + this.setFlexBottom(_validBottomOffset,_bottomOffset); this.rect = HRect.nu(_leftOffset,_topOffset,_right,_bottom); - - if(!this.rect.isValid){ + if(!this.rect.isValid && !this.isProduction){ console.log('---------------------------------------------'); console.log('invalid rect:', this.rect.left, ',', this.rect.top, ',', this.rect.width, ',', this.rect.height, ',', this.rect.right, ',', this.rect.bottom ); console.log(' parent size:', this.parentSize() ); console.log(' rect array:', _rect ); console.log('---------------------------------------------'); } } - else { + else if (!this.isProduction){ console.log(_throwPrefix + 'the length has to be either 4 or 6.'); } } else { this.rect = _rect; @@ -1065,11 +1141,11 @@ this.setStylesArray(_styles); } else if(_stylesObjType==='h'){ this.setStylesHash(_styles); } - else { + else if (!this.isProduction){ console.log('HView#setStyles: Invalid data, expected array or hash; type: '+h+', data:',_styles); } return this; }, @@ -1126,14 +1202,14 @@ * +self+ * **/ setStyleOfPart: function(_partName, _name, _value, _force) { if (!this['markupElemIds']){ - console.log('Warning, setStyleOfPart: no markupElemIds'); + !this.isProduction && console.log('Warning, setStyleOfPart: no markupElemIds'); } else if (this.markupElemIds[_partName]===undefined) { - console.log('Warning, setStyleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + !this.isProduction && console.log('Warning, setStyleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); } else { ELEM.setStyle(this.markupElemIds[_partName], _name, _value, _force); } return this; @@ -1151,11 +1227,11 @@ * The style of a specified markup element. * **/ styleOfPart: function(_partName, _name, _force) { if (this.markupElemIds[_partName]===undefined) { - console.log('Warning, styleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + !this.isProduction && console.log('Warning, styleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); return ''; } return ELEM.getStyle(this.markupElemIds[_partName], _name, _force); }, @@ -1171,11 +1247,11 @@ * +self+ * **/ setMarkupOfPart: function( _partName, _value ) { if (this.markupElemIds[_partName]===undefined) { - console.log('Warning, setMarkupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + !this.isProduction && console.log('Warning, setMarkupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); } else { ELEM.setHTML( this.markupElemIds[_partName], _value ); } return this; @@ -1192,55 +1268,91 @@ * The markup of a specified markup element. * **/ markupOfPart: function(_partName) { if (this.markupElemIds[_partName]===undefined) { - console.log('Warning, markupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + !this.isProduction && console.log('Warning, markupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); return ''; } return ELEM.getHTML(this.markupElemIds[_partName]); }, /** = Description + * Sets a element attribute of the view's cell. + * + * = Parameters + * +_key+:: The attribute key to set. + * +_value+:: Value for markup element. + * +_force+:: Optional force switch, defaults to false + * + * = Returns + * +self+ + * + **/ + setAttr: function( _key, _value, _force ){ + ELEM.setAttr( this.elemId, _key, _value, _force ); + return this; + }, + +/** = Description + * Gets a element attribute of the view's cell. + * + * = Parameters + * +_key+:: The attribute key to get. + * +_force+:: Optional force switch, defaults to false + * + * = Returns + * The attribute value. + * + **/ + attr: function( _key, _force ){ + return ELEM.getAttr( this.elemId, _key, _force ); + }, + +/** = Description * Sets a element attribute of a specified markup element that has been bound to this * view. * * = Parameters * +_partName+:: The identifier of the markup element. + * +_key+:: The attribute key to set * +_value+:: Value for markup element. + * +_force+:: Optional force switch, defaults to false * * = Returns * +self+ * **/ - setAttrOfPart: function( _partName, _value, _force ) { + setAttrOfPart: function( _partName, _key, _value, _force ) { if (this.markupElemIds[_partName]===undefined) { - console.log('Warning, setAttrOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + !this.isProduction && console.log('Warning, setAttrOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); } else { - ELEM.setAttr( this.markupElemIds[_partName], _value, _force ); + ELEM.setAttr( this.markupElemIds[_partName], _key, _value, _force ); } return this; }, /** = Description * Returns a element attribute of a specified markup element that has been bound to this * view. * * = Parameters * +_partName+:: The identifier of the markup element. + * +_key+:: The attribute key to get. + * +_force+:: Optional force switch, defaults to false * * = Returns * The attribute of a specified markup element. * **/ - attrOfPart: function(_partName, _force) { + attrOfPart: function(_partName, _key, _force) { if (this.markupElemIds[_partName]===undefined) { - console.log('Warning, attrOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + !this.isProduction && console.log('Warning, attrOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); return ''; } - return ELEM.getAttr(this.markupElemIds[_partName], _force); + return ELEM.getAttr(this.markupElemIds[_partName], _key, _force); }, /** = Description * Returns a element itself of a specified markup element that has been bound to this * view. @@ -1252,11 +1364,11 @@ * The element of a specified markup element. * **/ elemOfPart: function(_partName) { if (this.markupElemIds[_partName]===undefined) { - console.log('Warning, elemOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + !this.isProduction && console.log('Warning, elemOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); return ''; } return ELEM.get( this.markupElemIds[_partName] ); }, @@ -1347,11 +1459,11 @@ this.hide(); this.drawn = false; this.stopAnimation(); // Delete the children first. var _childViewId, i; - if(!this.views){ + if(!this.views && !this.isProduction){ console.log('HView#die: no subviews for component name: ',this.componentName,', self:',this); } while (this.views.length !== 0) { _childViewId = this.views[0]; this.destroyView(_childViewId); @@ -1364,28 +1476,31 @@ ELEM.del(this._domElementBindings.pop()); } // this._domElementBindings = []; } + if( this._ieNoThrough !== null ){ + ELEM.del( this._ieNoThrough ); + } // 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(); - } - }, + // 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]; @@ -1870,11 +1985,13 @@ * +self+ * **/ invalidatePositionCache: function() { for(var i=0; i<this.views.length; i++) { - HSystem.views[this.views[i]]['invalidatePositionCache'] && HSystem.views[this.views[i]].invalidatePositionCache(); + if( typeof HSystem.views[this.views[i]]['invalidatePositionCache'] === 'function' ){ + HSystem.views[this.views[i]].invalidatePositionCache(); + } } return this; }, @@ -1981,9 +2098,45 @@ else { return _default; } } return _default; + }, + + isParentOf: function( _obj ){ + if( !_obj ){ + return false; + } + if( typeof _obj['hasAncestor'] === 'function' ){ + if( _obj.parents.indexOf( this ) !== -1 ){ + return true; + } + } + return false; + }, + + isChildOf: function( _obj ){ + if( !_obj ){ + return false; + } + if( typeof _obj['isParentOf'] === 'function' ){ + return _obj.isParentOf( this ); + } + return false; + }, + + isSiblingOf: function( _obj ){ + if( !_obj ){ + return false; + } + if( typeof _obj['parents'] === 'object' && _obj.parents instanceof Array ){ + if( _obj.parents.length !== this.parents.length ){ + return false; + } + var i = this.parents.length-1; + return _obj.parents[i] === this.parents[i]; + } + return false; } });