view.js in rsence-pre-2.3.0.17

- old
+ new

@@ -12,20 +12,19 @@
   ** 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 myViewInstance = HView.nu( rect1, myAppInstance, { style: { backgroundColor: '#fc0' } } );
   **  var rect2 = [10, 10, 70, 70];
-  **  var mySubView1 = HView.nu( rect2, myViewIntance );
-  **  var rect3 [20, 20, 50, 50];
-  **  var mySubView2 = HView.nu( rect3, mySubView1 );
+  **  var mySubView1 = HView.nu( rect2, myViewInstance, { style: { backgroundColor: '#cfc' } } );
+  **  var rect3 = [20, 20, 50, 50];
+  **  var mySubView2 = HView.nu( rect3, mySubView1, { style: { backgroundColor: '#000' } } );
   **
 ***/
 var//RSence.Foundation
-HView = HClass.extend({
+HView = UtilMethods.extend({
 
   isView: true,  // attribute to check if the object is a view
   isCtrl: false, // attribute to check for if the object is a control
   
 /** Component specific theme path.
@@ -127,11 +126,11 @@
   * that feature.
   **/
   optimizeWidthOnRefresh: true,
   
 /** The parent is the +_parent+ supplied to the constructor.
-  * This is a complete object reference to the parent's namespace.
+  * This is a complete object reference to the parent's name-space.
   **/
   parent: null,
   
 /** The parents is an array containing parent instances up to
   * the root controller level. The root controller is almost
@@ -154,21 +153,21 @@
   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.
+  * This is a complete object reference to the app's name-space.
   **/
   app: null,
   
-/** The views array contains a list of subviews of this view
+/** The views array contains a list of sub-views 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
+/** The viewsZOrder array contains a list of sub-views ordered by
   * zIndex. To change the order, use the bringToFront,
   * sendToBack, bringForwards, sendBackwards, bringToFrontOf and
   * sentToBackOf methods.
   **/
   viewsZOrder: null,
@@ -329,17 +328,17 @@
     // 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]
+    // sub-view ids, index of HView-derived objects that are found in HSystem.views[viewId]
     this.views = [];
     
-    // Subviews in Z order.
+    // Sub-views in Z order.
     this.viewsZOrder = [];
     
-    // Keep the view (and its subviews) hidden until its drawn.
+    // Keep the view (and its sub-views) hidden until its drawn.
     this._createElement();
     
     // Set the geometry
     this.setRect(_rect);
     
@@ -729,21 +728,21 @@
         this.setStyles( this.options.style );
       }
       if(this.options.html){
         this.setHTML(this.options.html);
       }
-      // Extended draw for components to define/extend.
+      // Extended draw for components to define / extend.
       // This is preferred over drawSubviews, when defining
       // parts of a complex component.
       if(typeof this.extDraw === 'function'){
         this.extDraw();
       }
-      // Extended draw for the purpose of drawing subviews.
+      // Extended draw for the purpose of drawing sub-views.
       if(typeof this.drawSubviews === 'function'){
         this.drawSubviews();
       }
-      // if options contain a subviews function, call it with the namespace of self
+      // if options contain a sub-views function, call it with the name-space of self
       if(this.options.subviews && typeof this.options.subviews == 'function'){
         this.options.subviews.call( this );
       }
       // for external testing purposes, a custom className can be defined:
       if(this.options.testClassName){
@@ -766,11 +765,11 @@
   },
   
 /** = 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.
+  * sub-views.
   *
   **/
   drawSubviews: function(){
   },
   
@@ -1142,12 +1141,12 @@
     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.
+  * Sets any arbitrary 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.
@@ -1162,11 +1161,11 @@
     }
     return this;
   },
   
   setStyles: function(_styles){
-    var _stylesObjType = COMM.Values.type(_styles);
+    var _stylesObjType = this.typeChr(_styles);
     if(_stylesObjType==='a'){
       this.setStylesArray(_styles);
     }
     else if(_stylesObjType==='h'){
       this.setStylesHash(_styles);
@@ -1254,11 +1253,14 @@
   * = Returns
   * The style of a specified markup element.
   *
   **/
   styleOfPart: function(_partName, _name, _force) {
-    if (this.markupElemIds[_partName]===undefined) {
+    if (!this['markupElemIds']){
+      !this.isProduction && console.log('Warning, styleOfPart: no markupElemIds');
+    }
+    else if (this.markupElemIds[_partName]===undefined) {
       !this.isProduction && console.log('Warning, styleOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
       return '';
     }
     return ELEM.getStyle(this.markupElemIds[_partName], _name, _force);
   },
@@ -1274,11 +1276,14 @@
   * = Returns
   * +self+
   *
   **/
   setMarkupOfPart: function( _partName, _value ) {
-    if (this.markupElemIds[_partName]===undefined) {
+    if (!this['markupElemIds']){
+      !this.isProduction && console.log('Warning, setMarkupOfPart: no markupElemIds');
+    }
+    else if (this.markupElemIds[_partName]===undefined) {
       !this.isProduction && console.log('Warning, setMarkupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
     }
     else {
       ELEM.setHTML( this.markupElemIds[_partName], _value );
     }
@@ -1295,11 +1300,14 @@
   * = Returns
   * The markup of a specified markup element.
   *
   **/
   markupOfPart: function(_partName) {
-    if (this.markupElemIds[_partName]===undefined) {
+    if (!this['markupElemIds']){
+      !this.isProduction && console.log('Warning, markupOfPart: no markupElemIds');
+    }
+    else if (this.markupElemIds[_partName]===undefined) {
       !this.isProduction && console.log('Warning, markupOfPart: partName "'+_partName+'" does not exist for viewId '+this.viewId+'.');
       return '';
     }
     return ELEM.getHTML(this.markupElemIds[_partName]);
   },
@@ -1488,11 +1496,11 @@
     this.drawn = false;
     this.stopAnimation();
     // Delete the children first.
     var _childViewId, i;
     if(!this.views && !this.isProduction){
-      console.log('HView#die: no subviews for component name: ',this.componentName,', self:',this);
+      console.log('HView#die: no sub-views for component name: ',this.componentName,', self:',this);
     }
     while (this.views && this.views.length !== 0) {
       _childViewId = this.views[0];
       this.destroyView(_childViewId);
     }
@@ -1520,11 +1528,11 @@
     }
   },
 
 /** = Description
   * A convenience method to call #die after 10ms using a setTimeout.
-  * Use this method, if destroying self or destroying from a subview.
+  * Use this method, if destroying self or destroying from a sub-view.
   *
   **/
   dieSoon: function(){
     var _this = this;
     setTimeout(function(){_this.die();},10);
@@ -1549,11 +1557,11 @@
     }
     _view.parents.push(this);
   },
   
 /** = Description
-  * Adds a sub-view/component to the view. Called from inside the 
+  * 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.
   *
@@ -1636,11 +1644,11 @@
   * 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)
+  * +_horizonal+:: Horizontal units to add to the width (negative units subtract)
   * +_vertical+::  Vertical units to add to the height (negative units subtract)
   *
   * = Returns
   * +self+
   *
@@ -1681,11 +1689,11 @@
     _rect.updateSecondaryValues();
     this.drawRect();
     return this;
   },
 
-/** = Descripion
+/** = Description
   * 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.
@@ -1733,11 +1741,11 @@
   * 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)
+  * +_horizonal+::  Horizontal units to change the x coordinate (negative units subtract)
   * +_vertical+::   Vertical units to add to change the y coordinate (negative units subtract)
   *
   * = Returns
   * +self+
   *
@@ -1861,11 +1869,11 @@
   **/
   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.parent.viewsZOrder.splice(0, 0, this.viewId); // un-shifts viewId
       this._updateZIndexAllSiblings();
     }
     return this;
   },
 
@@ -1894,11 +1902,11 @@
   * = 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?
+  * +_wrap+::     Optional boolean value, wrap white-space?
   * +_extraCss+:: Optional, extra css to add.
   *
   * = Returns
   * The width in pixels required to draw a string in the font.
   *
@@ -1915,14 +1923,16 @@
     }
     if (!_wrap){
       _extraCss += 'white-space:nowrap;';
     }
     
-    var _stringElem = ELEM.make(_elemId,'span');
+    var
+    _stringParent = ELEM.make(_elemId,'div'),
+    _stringElem = ELEM.make(_stringParent,'span');
     ELEM.setCSS(_stringElem, "visibility:hidden;"+_extraCss);
     ELEM.setHTML(_stringElem, _string);
     var _visibleSize=ELEM.getSize(_stringElem);
-    ELEM.del(_stringElem);
+    ELEM.del(_stringElem); ELEM.del(_stringParent);
     return [_visibleSize[0]+_visibleSize[0]%2,_visibleSize[1]+_visibleSize[1]%2];
   },
   
 /** Returns the string width
   **/