js/foundation/view/view.js in rsence-2.1.11 vs js/foundation/view/view.js in rsence-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); @@ -623,11 +622,10 @@ if (this.parent && this.rect.isValid) { var i = 0, _this = this, _elemId = _this.elemId, - _styl = ELEM.setStyle, _rect = _this.rect, _auto = 'auto', _left = _this.flexLeft?_rect.left:_auto, _top = _this.flexTop?_rect.top:_auto, _right = _this.flexRight?_this.flexRightOffset:_auto, @@ -653,13 +651,15 @@ _key = _styles[i][0]; _value = _styles[i][1]; if( i < 6 && _value !== _auto ){ _value += 'px'; } - _styl(_elemId,_key,_value,true); + 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; @@ -696,18 +696,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){ @@ -835,11 +841,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;' ], @@ -873,21 +879,30 @@ }, /** Gets the size of the parent. If the parent is the document body, uses the browser window size. **/ parentSize: function(){ + if(!this.parent){ + return [ 0, 0 ]; + } if(this.parent.elemId === 0){ - var _winSize = ELEM.windowSize(); + 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] ){ + _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; } @@ -954,15 +969,17 @@ _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) ){ @@ -985,11 +1002,13 @@ _right = _parentWidth-_validRightOffset; _leftOffset = _right-_width; } else if(_validLeftOffset && _validRightOffset){ _right = _parentWidth - _rightOffset; - _validWidth && this.setMinWidth( _width ); + if( _validWidth ){ + this.setMinWidth( _width ); + } _right = _parentWidth - _rightOffset; } if(_validTopOffset && _validHeight && !_validBottomOffset){ _bottom = _topOffset + _height; @@ -998,15 +1017,22 @@ _bottom = _parentHeight-_validBottomOffset; _topOffset = _bottom-_height; } else if(_validTopOffset && _validBottomOffset){ _bottom = _parentHeight - _bottomOffset; - _validHeight && this.setMinHeight( _height ); + if( _validHeight ){ + this.setMinHeight( _height ); + } _bottom = _parentHeight - _bottomOffset; } + if( _leftOffset > _right ){ + _right = _leftOffset; + } + if( _topOffset > _bottom ){ + _bottom = _topOffset; + } this.rect = HRect.nu(_leftOffset,_topOffset,_right,_bottom); - if(!this.rect.isValid){ 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 ); @@ -1111,19 +1137,19 @@ * * = Returns * +self+ * **/ - setStyleOfPart: function(_partName, _name, _value, _cacheOverride) { + setStyleOfPart: function(_partName, _name, _value, _force) { if (!this['markupElemIds']){ 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+'.'); } else { - ELEM.setStyle(this.markupElemIds[_partName], _name, _value, _cacheOverride); + ELEM.setStyle(this.markupElemIds[_partName], _name, _value, _force); } return this; }, /** = Description @@ -1136,16 +1162,16 @@ * * = Returns * The style of a specified markup element. * **/ - styleOfPart: function(_partName, _name) { + styleOfPart: function(_partName, _name, _force) { if (this.markupElemIds[_partName]===undefined) { console.log('Warning, styleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); return ''; } - return ELEM.getStyle(this.markupElemIds[_partName], _name); + return ELEM.getStyle(this.markupElemIds[_partName], _name, _force); }, /** = Description * Sets a style of a specified markup element that has been bound to this * view. @@ -1174,22 +1200,82 @@ * * = Parameters * +_partName+:: The identifier of the markup element. * * = Returns - * The style of a specified markup element. + * 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+'.'); return ''; } return ELEM.getHTML(this.markupElemIds[_partName]); }, + +/** = 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. + * +_value+:: Value for markup element. + * + * = Returns + * +self+ + * + **/ + setAttrOfPart: function( _partName, _value, _force ) { + if (this.markupElemIds[_partName]===undefined) { + console.log('Warning, setAttrOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + } + else { + ELEM.setAttr( this.markupElemIds[_partName], _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. + * + * = Returns + * The attribute of a specified markup element. + * + **/ + attrOfPart: function(_partName, _force) { + if (this.markupElemIds[_partName]===undefined) { + console.log('Warning, attrOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.'); + return ''; + } + return ELEM.getAttr(this.markupElemIds[_partName], _force); + }, /** = Description + * Returns a element itself of a specified markup element that has been bound to this + * view. + * + * = Parameters + * +_partName+:: The identifier of the markup element. + * + * = Returns + * 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+'.'); + return ''; + } + return ELEM.get( this.markupElemIds[_partName] ); + }, + +/** = Description * Hides the component's main DOM element (and its children). * * = Returns * +self+ * @@ -1291,28 +1377,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]; @@ -1359,11 +1448,11 @@ * = Returns * +self+ * **/ removeView: function(_viewId) { - HSystem.views[_viewId].remove(); + this.app.removeView( _viewId ); // no reason to duplicate this functionality here return this; }, /** = Description * Call this if you need to remove a child view from this view, destroying its @@ -1797,11 +1886,13 @@ * +self+ * **/ invalidatePositionCache: function() { for(var i=0; i<this.views.length; i++) { - HSystem.views[this.views[i]].invalidatePositionCache(); + if( typeof HSystem.views[this.views[i]]['invalidatePositionCache'] === 'function' ){ + HSystem.views[this.views[i]].invalidatePositionCache(); + } } return this; }, @@ -1841,9 +1932,112 @@ var _indexOfElementId = this._domElementBindings.indexOf(_elementId); if (_indexOfElementId > -1) { ELEM.del(_elementId); this._domElementBindings.splice(_indexOfElementId, 1); } + }, + + +/** = Description + * Finds a string from the locale of the component. + * The attrPath is a string or array to find an object. + * For instance, if a component has a structure like this defined: + * HLocale.components.FooComponent = { + * strings: { + * defaultLabel: 'Default Label', + * otherLabel: 'Other Label', + * } + * }; + * + * To get the defaultLabel, call getLocaleString like this: + * this.getLocaleString( 'FooComponent', 'strings.defaultLabel' ); + * ..or: + * this.getLocaleString( 'FooComponent', ['strings','defaultLabel'] ); + * ..or: + * this.getLocaleString( 'FooComponent.strings.defaultLabel' ); + * + * = Parameters + * +_componentClassName+:: The name of the item in HLocale.components + * +_attrPath+:: The object path to the string. String or Array. + * +_default+:: The default object to return if nothing matched. + * + **/ + getLocaleString: function( _componentClassName, _attrPath, _default ){ + if( _default === undefined ){ + _default = ''; + } + var + _searchTarget = HLocale.components[_componentClassName], + i = 0, + _key; + if( _searchTarget === undefined && (typeof _componentClassName === 'string') ){ + _searchTarget = HLocale.components; + _attrPath = _componentClassName; + _default = _attrPath; + } + if( typeof _attrPath === 'string' ){ + if( _attrPath.indexOf( '.' ) > 0 ){ + _attrPath = _attrPath.split('.'); + } + else { + _attrPath = [ _attrPath ]; + } + } + if( _searchTarget[ _attrPath[0] ] === undefined ){ + _searchTarget = HLocale; + } + if( _searchTarget[ _attrPath[0] ] === undefined ){ + return _default; + } + for( ; i < _attrPath.length; i++ ){ + _key = _attrPath[i]; + if( typeof _searchTarget[_key] === 'object' ){ + _searchTarget = _searchTarget[_key]; + } + else if( typeof _searchTarget[_key] === 'string' ){ + return _searchTarget[_key]; + } + 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; } });