rsence-pre 3.0.0.8 → 3.0.0.9

data/client/js/controls/imageview/imageview.js

@@ -1,16 +1,16 @@
 
 /*** = Description
   ** HImageView is a control unit intended to display images on the screen
-  ** through the HTML <IMG> tag. The HImageView class is a container 
+  ** through the HTML <IMG> tag. The HImageView class is a container
   ** to visualize
-  ** images loaded via URL. It supports scaling via two class methods, 
-  ** scaleToFit and scaleToOriginal. If the image is unable to be loaded, 
+  ** images loaded via URL. It supports scaling via two class methods,
+  ** scaleToFit and scaleToOriginal. If the image is unable to be loaded,
   ** a default blank image will be rendered.
   **
   ***/
 var//RSence.Controls
 HImageView = HControl.extend({
-  
+
   getImgSrc: function(){
     var _value = (this.value!==null)?this.value:(this.options.valueObj?this.options.valueObj.value:this.options.value);
     if (!_value){
@@ -18,12 +18,12 @@ HImageView = HControl.extend({
     }
     return _value;
   },
-  
-  controlDefaults: (HControlDefaults.extend({
+
+  controlDefaults: HControlDefaults.extend({
     scaleToFit: true,
     value: null
-  })),
-  
+  }),
+
   _makeScaleToFit: function(_parentId){
     this.elemId = ELEM.make( _parentId, 'img', {
       attrs: [
@@ -48,10 +48,10 @@ HImageView = HControl.extend({
       this._makeScaleToOriginal(_parentId);
     }
   },
-  
+
 /** = Description
   * Used to refresh HImageView if the this.value is changed.
-  * 
+  *
   **/
   refreshValue: function(){
     var _src = this.getImgSrc();
@@ -67,7 +67,7 @@ HImageView = HControl.extend({
       }
     }
   },
-  
+
 /** = Description
   * Refreshesh the label of HImageView.
   *
@@ -78,7 +78,7 @@ HImageView = HControl.extend({
     }
     ELEM.setAttr(this.elemId,'title',this.label);
   },
-  
+
 /** = Description
   * Changes the size of the image element so that it fits in the rectangle of
   * the view.
@@ -91,8 +91,8 @@ HImageView = HControl.extend({
       this.options.scaleToFit=true;
     }
   },
-  
-  
+
+
 /** = Description
   * Resizes the image element to its original dimesions. If the image is larger
   * than the rectangle of this view, clipping will occur.
@@ -107,5 +107,5 @@ HImageView = HControl.extend({
   }
 
 
-  
+
 });

data/client/js/controls/numerictextcontrol/numerictextcontrol.coffee

@@ -2,27 +2,34 @@
   ## HNumericTextControl is an extension of HTextControl that
   ## validates the input as a number. It supports value ranges.
   ##
-  ## If you need decimal numbers (floating-point), pass the 
+  ## If you need decimal numbers (floating-point), pass the
   ## decimalNumber: true option to the constructor.
   ####
 HNumericTextControl = HTextControl.extend
-  
+
   defaultEvents:
     mouseWheel:  true
-    textEnter:   true
     contextMenu: true
     keyDown:     true
+    textEnter:   false
+    click:       true
+    contextMenu: true
 
   controlDefaults: HTextControl.prototype.controlDefaults.extend
     numberIncrement: 1
     decimalNumber: false
-    decimalPlaces: -1
-    decimalSeparator: '.'
+    decimalPlaces: null
+    decimalSeparator: null
     withStepper: false
-  
+    unit: false
+
+  customOptions: (_options)->
+    _options.decimalSeparator = HLocale.general.decimalSeparator unless _options.decimalSeparatator?
+
   ## Uses the mouseWheel event to step up/down the value.
   mouseWheel: (_delta)->
     _value = @value
+    _value = parseInt(_value,10) if @typeChr(_value) == 's'
     if _delta < 0
       _value = _value-@options.numberIncrement
     else
@@ -43,7 +50,7 @@ HNumericTextControl = HTextControl.extend
   validateNumber: (_value)->
     if @options.decimalNumber
       _value = parseFloat(_value)
-      if @options.decimalPlaces != -1
+      if @options.decimalPlaces != null
         _decPlaces = Math.pow(10,@options.decimalPlaces)
         _value = Math.round(_value*_decPlaces)/_decPlaces
     else
@@ -69,7 +76,7 @@ HNumericTextControl = HTextControl.extend
     @validateNumber( _value )
   valueToField: (_value)->
     _value = @validateNumber(_value)
-    if @options.decimalNumber and @options.decimalPlaces != -1
+    if @options.decimalNumber and @options.decimalPlaces != null
       if _value - Math.round(_value) == 0
         _value = _value+@options.decimalSeparator
         for n in [0...@options.decimalPlaces]
@@ -86,13 +93,15 @@ HNumericTextControl = HTextControl.extend
   ## Extends the validateText method to ensure the
   ## input is a number.
   ###
-  validateText: (_value)-> _value
+  # validateText: (_value)-> _value
 
+  _extraLabelRight: 0
   drawSubviews: ->
     @base()
     @setStyleOfPart('value','textAlign','right')
     if @options.withStepper
-      @setStyleOfPart('label','right','14px')
+      this._extraLabelRight += 14
+      @setStyleOfPart('label','right',this._extraLabelRight+'px')
       _top = Math.round((@rect.height-22)/2)
       @stepper = HStepper.extend(
         refreshValue: ->
@@ -107,3 +116,16 @@ HNumericTextControl = HTextControl.extend
         enabled: @enabled
       )
       @stepper.bringToFront()
+    if @options.unit
+      _unitRect = [null,null,4,@rect.height,4,0]
+      @unitSuffix = HLabel.new(_unitRect,@,
+        pack: true
+        label: @options.unit
+        style:
+          lineHeight: @rect.height+'px'
+          verticalAlign: 'middle'
+      )
+      @_extraLabelRight += @unitSuffix.rect.width
+      @setStyleOfPart('label','right',this._extraLabelRight+'px')
+
+HNumberField = HNumericTextControl

data/client/js/controls/onoffbutton/onoffbutton.coffee

@@ -5,11 +5,11 @@ HOnOffButton = HCheckbox.extend
   controlDefaults: HControlDefaults.extend
     label: 'ON'
     labelOff: 'OFF'
-    constructor: (_ctrl)->
-      if @label instanceof Array
-        @labelOff = @label[1]
-        @label = @label[0]
-      _ctrl.labelOff = @labelOff
+  customOptions: (_options)->
+    if _options.label instanceof Array
+      _options.labelOff = _options.label[1]
+      _options.label = _options.label[0]
+    @labelOff = _options.labelOff
   markupElemNames: [ 'label', 'offlabel', 'control', 'onvalue', 'offvalue' ]
   refreshLabel: ->
     @base()

data/client/js/controls/progress/progressbar/progressbar.js

@@ -1,7 +1,7 @@
 
 /*** = Description
-  ** HProgressBar is a control unit used to convey the progress of a task, 
-  ** such as a download or file transfer. In other words, it is a component 
+  ** HProgressBar is a control unit used to convey the progress of a task,
+  ** such as a download or file transfer. In other words, it is a component
   ** indicating a percentage of a total task has completed.
   **
   ** Use the maxValue to define the point of progress at the end and use value
@@ -11,19 +11,18 @@
 var//RSence.Controls
 HProgressBar = HControl.extend({
   componentName: "progressbar",
-  
+
 /** The amount of pixels the theme insets the width of the progress bar **/
   themeWidthInset: 2,
-  
+
 /** Sets the width of the progress bar when the value changes. **/
   refreshValue: function(){
     if( this.drawn && this.markupElemIds.value ){
-      var _visibleWidth = this.rect.width-this.themeWidthInset,
-          _progressWidth = Math.round(_visibleWidth * this.value);
+      var _progressWidth = Math.round(100 * this.value);
       if(_progressWidth<0){
         _progressWidth = 0;
       }
-      this.setStyleOfPart('value','width',_progressWidth+'px');
+      this.setStyleOfPart('value','width',_progressWidth+'%');
     }
   },
   onIdle: function(){

data/client/js/controls/progress/progressbar/themes/default/progressbar.css

@@ -1,16 +1,16 @@
-.progressbar {
+.default.progressbar {
   cursor: wait;
   position: absolute;
   left: 0px; top: 0px; right: 0px; bottom: 1px;
   border: 1px solid #999;
   background-color: #ccc;
-} 
-.progressbar .progress {
+}
+.default.progressbar > .progress {
   position: absolute;
   left: 0px; top: 0px;
   width: 50px; bottom: 0px;
   background-color: #333;
 }
-.disabled .progressbar {
+.default.progressbar.disabled {
   opacity: 0.75;
 }

data/client/js/controls/progress/progressbar/themes/default/progressbar.html

@@ -1,2 +1 @@
-<div class="progressbar"
-  ><div class="progress" id="value#{ _ID }"></div></div>
+<div class="progress" id="value#{ _ID }"></div>

data/client/js/controls/sliders/slider/slider.js

@@ -1,12 +1,12 @@
 
 /*** = Description
-  ** HSlider is a control unit that enables the user to choose a value in a range of values. 
-  ** Sliders support both dragging the handle and clicking the mouse anywhere on the slider 
-  ** to move the handle towards the mouse, as well as keyboard support 
-  ** after the handle is in active mode. There are two types of sliders: vertical and horizontal. 
-  ** Naturally, sliders are commonly used as colour mixers, volume controls, 
-  ** graphical equalizers and seekers in media applications. 
-  ** A typical slider is a drag-able thumb along vertical or horizontal line. 
+  ** HSlider is a control unit that enables the user to choose a value in a range of values.
+  ** Sliders support both dragging the handle and clicking the mouse anywhere on the slider
+  ** to move the handle towards the mouse, as well as keyboard support
+  ** after the handle is in active mode. There are two types of sliders: vertical and horizontal.
+  ** Naturally, sliders are commonly used as colour mixers, volume controls,
+  ** graphical equalizers and seekers in media applications.
+  ** A typical slider is a drag-able thumb along vertical or horizontal line.
   **
   ** = Instance variables
   ** +minValue+::       The smallest allowed value.
@@ -24,31 +24,31 @@
 ***/
 var//RSence.Controls
 HSlider = HControl.extend({
-  
+
   componentName: "slider",
-  
+
   defaultEvents: {
     draggable: true,
     keyDown: 'repeat',
     keyUp: true,
     mouseWheel: true
   },
-  
-  controlDefaults: (HControlDefaults.extend({
+
+  controlDefaults: HControlDefaults.extend({
     minValue: 0,
     maxValue: 1,
     roundValue: false,
     inverseAxis: false
-  })),
-  
+  }),
+
   refreshOnValueChange: false,
-  
+
   _isVertical: false,
-  
-  
+
+
 /** = Description
   * Sets the current value of the object and moves the slider thumb to the correct position.
-  * 
+  *
   * = Parameters
   * +_value+:: A numeric value to be set to the object.
   *
@@ -71,7 +71,7 @@ HSlider = HControl.extend({
     }
     return this;
   },
-  
+
 /** = Description
   * Draws the rectangle and the markup of this object on the screen.
   *
@@ -84,65 +84,65 @@ HSlider = HControl.extend({
     }
     this.refresh();
   },
-  
-  
+
+
 /** = Description
   * This gets called automatically when the user starts to drag the slider thumb.
   * Extend this method if you want something special to happen when the dragging starts.
-  * 
+  *
   * = Parameters
-  * +_x+:: The X coordinate of the point where the drag started.
-  * +_y+:: The Y coordinate of the point where the drag started.
-  *  
+  * +x+:: The X coordinate of the point where the drag started.
+  * +y+:: The Y coordinate of the point where the drag started.
+  *
   **/
-  startDrag: function(_x,_y){
+  startDrag: function(x,y){
     var _originalPosition = ELEM.getVisiblePosition(this.elemId, true);
     this._originX = _originalPosition[0];
     this._originY = _originalPosition[1];
-    
-    this.drag(_x,_y);
+
+    this.drag(x,y);
   },
-  
-  
+
+
 /** = Description
   * This gets called automatically when the user stops dragging the slider thumb.
   * Extend this method if you want something special to happen when the dragging ends.
-  * 
+  *
   * = Parameters
-  * +_x+:: The X coordinate of the point where the drag ended.
-  * +_y+:: The Y coordinate of the point where the drag ended.
+  * +x+:: The X coordinate of the point where the drag ended.
+  * +y+:: The Y coordinate of the point where the drag ended.
   *
   **/
-  endDrag: function(_x,_y){
-    this.drag(_x,_y);
+  endDrag: function(x,y){
+    this.drag(x,y);
   },
-  
-  
+
+
 /** = Description
   * This gets called periodically while the user drags the slider thumb.
   * Extend this method if you want something special to happen while dragging.
-  * 
+  *
   * = Parameters
-  * +_x+:: The X coordinate of the point where the user is currently dragging.
-  * +_y+:: The Y coordinate of the point where the user is currently dragging.
+  * +x+:: The X coordinate of the point where the user is currently dragging.
+  * +y+:: The Y coordinate of the point where the user is currently dragging.
   *
   **/
-  drag: function(_x,_y){
-    _x -= this._originX;
-    _y -= this._originY;
-    
-    var _rawVal = this._isVertical?_y:_x,
+  drag: function(x,y){
+    x -= this._originX;
+    y -= this._originY;
+
+    var _rawVal = this._isVertical?y:x,
         _value = this._pos2value(_rawVal);
-    
+
     this.setValue(_value);
   },
-  
-  
+
+
 /** = Description
-  * This gets called when the user presses a key down while this control is 
+  * This gets called when the user presses a key down while this control is
   * active. The default behaviour is to move the thumb with arrow keys, page up,
   * page down, home and end.
-  * 
+  *
   * = Parameters
   * +_keycode+:: The keycode of the key that was pressed down.
   *
@@ -173,11 +173,11 @@ HSlider = HControl.extend({
     }
     return true;
   },
-  
-  
+
+
 /** = Description
   * This gets called when the user releases a key while this control is active.
-  * 
+  *
   * = Parameters
   * +_keycode+:: The keycode of the key that was released.
   *
@@ -185,10 +185,10 @@ HSlider = HControl.extend({
   keyUp: function(_keycode) {
     return true;
   },
-  
-  
+
+
 /** = Description
-  * This gets called when the mouse wheel is used and the component 
+  * This gets called when the mouse wheel is used and the component
   * instance has focus.
   *
   * = Parameters
@@ -207,12 +207,12 @@ HSlider = HControl.extend({
     if ( this.options.inverseAxis ) {
       _valueChange = 0 - _valueChange;
     }
-    
+
     var _value = (this.maxValue - this.minValue) * _valueChange;
     this.setValue( this.value + _value);
   },
-  
-  
+
+
   // --private method++
   _moveThumb: function(_valueChange, _rate) {
     if (this.active) {
@@ -221,15 +221,15 @@ HSlider = HControl.extend({
     }
 
   },
-  
+
   thumbSize: 21,
   // -- private method ++
   _initThumb: function() {
     this._thumbElemId = this.markupElemIds.control;
     this.drawThumbPos();
   },
-  
-  
+
+
   // -- private method ++
   _value2px: function() {
     var _pxrange;
@@ -247,8 +247,8 @@ HSlider = HControl.extend({
     _pxvalue = parseInt(_intvalue, 10)+'px';
     return _pxvalue;
   },
-  
-  
+
+
   // -- private method ++
   _pos2value: function(_mousePos) {
     var _pxrange;
@@ -270,20 +270,20 @@ HSlider = HControl.extend({
       return this.minValue + ((_mousePos / _pxrange) * (this.maxValue - this.minValue));
     }
   },
-  
-  
+
+
   // -- private method ++
   drawThumbPos: function() {
     var _whichprop = this._isVertical?'top':'left',
         _propval   = this._value2px();
     ELEM.setStyle(this._thumbElemId,_whichprop,_propval);
-    this.setOrientation(this.options['orientation']||this.prevOrientation);
+    this.setOrientation(this.options.orientation||this.prevOrientation);
   },
-  
+
   prevOrientation: 'c',
-  
+
   orientations: ['n','s','c'],
-  
+
 /** = Description
   * Changes the thumb graphic. Possible orientations by default are
   * north ('n'), south ('s'), west ('w'), east('e') and center ('c').
@@ -301,14 +301,9 @@ HSlider = HControl.extend({
     if(_orientation === this.prevOrientation){
       return;
     }
-    if(this['markupElemIds']===undefined){
-      return;
-    }
-    if(this.markupElemIds['control']===undefined){
-      return;
-    }
-    var _toggleCSS = this.toggleCSSClass,
-        _ctrlId    = this.markupElemIds.control,
+    if(this.markupElemIds===undefined){ return; }
+    if(this.markupElemIds['control']===undefined){ return; }
+    var _ctrlId    = this.markupElemIds.control,
         _orientations = this.orientations,
         _iOrientation = '',
         _cssClassName = '',
@@ -319,9 +314,9 @@ HSlider = HControl.extend({
       _iOrientation = _orientations[i];
       _activeOrientation = (_orientation===_iOrientation);
       _cssClassName = (_orientation==='c')?_componentName+'_'+'thumb':_componentName+'_'+'thumb'+'_'+_iOrientation;
-      _toggleCSS( _ctrlId, _cssClassName, _activeOrientation );
+      this.toggleCSSClass( _ctrlId, _cssClassName, _activeOrientation );
     }
-    
+
     this.prevOrientation = _orientation;
   }
 });