rsence-pre 2.1.0.1.pre

data/js/controls/stepper/stepper.js

@@ -0,0 +1,213 @@
+/*   RSence
+ *   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
+  ** HStepper is a control unit made of two adjacent buttons with up and down arrows 
+  ** to select the previous or next of a set of contiguous values. 
+  ** Normally, a HStepper instance works in combination with a HTextControl or a HStringView instance.
+  **
+  ** = Instance Variables
+  ** +minValue+::         The smallest allowed value
+  ** +maxValue+::         The biggest allowed value
+  ** +stepSize+::         Amount of to step, defaults to +/- 1
+  ** +repeatInterval+::   Interval in milliseconds for repeat
+  ** +wrapAround+::       Boolean to control wrap-around behaviour
+  ***/
+
+var//RSence.Controls
+HStepper = HControl.extend({
+  
+  componentName: "stepper",
+  
+  defaultEvents: {
+    mouseDown: true,
+    keyDown: true,
+    mouseWheel: true
+  },
+  
+  controlDefaults: (HControlDefaults.extend({
+    minValue: 0,
+    maxValue: 100,
+    stepSize: 1,
+    repeatInterval: 200,
+    wrapAround: false
+  })),
+  
+  /** Setter for wrap-around behaviour
+    **/
+  setWrapAround: function(_on){
+    this.options.wrapAround = _on;
+  },
+  
+  // -- Makes sure the value is in its boundaries and either wrap-around
+  // to min/max or revert to the current value ++
+  _checkValueBoundaries: function(_value){
+    
+    // -- checks for boundaries ++
+    var _this     = this,
+        _options  = _this.options,
+        _minVal   = _options.minValue,
+        _maxVal   = _options.maxValue,
+        _tooSmall = _value<_minVal,
+        _tooBig   = _value>_maxVal,
+        _overflow = ( _tooSmall || _tooBig );
+    
+    // -- The value is ok, just return it as it is ++
+    if (!_overflow) {
+      return _value;
+    }
+    
+    
+    /// -- Handle the overflow condition: ++
+    
+    // -- Wrap around uses min/max as new value as either is reached ++
+    if (_options.wrapAround) {
+      if (_tooSmall) {
+        return _maxVal;
+      }
+      else {
+        return _minVal;
+      }
+    }
+    // -- Any other condition means we just revert the changes ++
+    else {
+      return _this.value;
+    }
+    
+  },
+  
+/** Adds the step size to the value
+  **/
+  stepUp: function(){
+    this.setValue(
+      this._checkValueBoundaries(
+        this.value + this.options.stepSize
+      )
+    );
+  },
+  
+/** Subtracts the step size from the value
+  **/
+  stepDown: function(){
+    this.setValue(
+      this._checkValueBoundaries(
+        this.value - this.options.stepSize
+      )
+    );
+  },
+  
+  // -- Returns an action string for the setInterval in _setRepeatInterval ++
+  _repeatIntervalStr: function( _up ){
+    return [
+      'HSystem.views[',
+      this.viewId,
+      '].step',
+      (_up?'Up':'Down'),
+      '();'
+    ].join('');
+  },
+  
+  // -- Background-offset of the state images up/down,
+  // overrideable in the html template ++
+  bgStateUp: '0px -23px',
+  bgStateDown: '0px -46px',
+  
+  // enables the up/down effect in the image based on the _up boolean (true means up, false means down)
+  _bgStateOn: function( _up ){
+    ELEM.setStyle(this.markupElemIds.state,'background-position',_up?this.bgStateUp:this.bgStateDown);
+  },
+  
+  // reverts the up/down effect
+  _bgStateOff: function(){
+    ELEM.setStyle(this.markupElemIds.state,'background-position','');
+  },
+  
+  // Starts the repeating stepping up or down (when the mouse button or a arrow key is down)
+  _setRepeatInterval: function( _up ){
+    var _this    = this,
+        _options = _this.options;
+    _this._bgStateOn( _up );
+    if (_up) {
+      _this.stepUp();
+      _this._repeatInterval = setInterval( _this._repeatIntervalStr(1), _options.repeatInterval );
+    }
+    else {
+      _this.stepDown();
+      _this._repeatInterval = setInterval( _this._repeatIntervalStr(0), _options.repeatInterval );
+    }
+  },
+  
+  // Stops the repeating stepping up or down enabled in _setRepeatInterval
+  _clearRepeatInterval: function(){
+    this._bgStateOff();
+    clearInterval( this._repeatInterval );
+  },
+  
+  /** Checks where the mouseDown happened and adjusts the stepper up/down based on that
+    **/
+  mouseDown: function( x, y ){
+    this.setMouseUp(true);
+    this._setRepeatInterval(  ( y - ELEM.getVisiblePosition( this.elemId )[1] ) <= 11  );
+  },
+  
+  /** Stops the repeating stepping, when the mouse button goes up
+    **/
+  mouseUp: function(){
+    this._clearRepeatInterval();
+  },
+  
+  /** Stops the repeating stepping, when the control becomes inactive
+    **/
+  blur: function(){
+    this._clearRepeatInterval();
+  },
+  
+/** adjusts stepping up/down based on the arrow key pressed.
+  * up and right arrow keys steps the value up, down and left steps the value down
+  **/
+  keyDown: function( _keyCode ) {
+    this.setKeyUp(true);
+    var _keyDown  = (_keyCode === Event.KEY_DOWN),
+        _keyUp    = (_keyCode === Event.KEY_UP),
+        _keyLeft  = (_keyCode === Event.KEY_LEFT),
+        _keyRight = (_keyCode === Event.KEY_RIGHT),
+        _arrowKey = (_keyDown || _keyUp || _keyLeft || _keyRight);
+    if (_arrowKey) {
+      this._setRepeatInterval( (_keyUp || _keyRight) );
+    }
+    else if (_keyCode === Event.KEY_HOME) {
+      this.setValue(this.options.minValue);
+    }
+    else if (_keyCode === Event.KEY_END) {
+      this.setValue(this.options.maxValue);
+    }
+    // Page up and page down keys act just like arrow up/down.
+    else if (_keyCode === Event.KEY_PAGEUP) {
+      this._setRepeatInterval( 1 );
+    }
+    else if (_keyCode === Event.KEY_PAGEDOWN) {
+      this._setRepeatInterval( 0 );
+    }
+  },
+  
+/** stops the repeating when a key goes up
+  **/
+  keyUp: function(){
+    this._clearRepeatInterval();
+  },
+  
+/** steps the value up/down based on the mouse scroll wheel
+  **/
+  mouseWheel: function(_delta) {
+    (_delta>0)?this.stepUp():this.stepDown();
+  }
+  
+  
+});
+
+

data/js/controls/stepper/themes/default/stepper.css

@@ -0,0 +1,14 @@
+.stepper_state {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 15px;
+ height: 23px;
+ background-position: 0px 0px;
+ background-repeat: no-repeat;
+ background-image: #{this.getCssFilePath('stepper.png')};
+}
+
+.disabled .stepper_state {
+  background-position: 0px -69px;
+}

data/js/controls/stepper/themes/default/stepper.html

@@ -0,0 +1,2 @@
+<div class="stepper_state" id="state#{_ID}"></div>
+${this.bgStateUp='0px -23px';this.bgStateDown='0px -46px';}

data/js/controls/stringview/stringview.js

@@ -0,0 +1,49 @@
+/*   RSence
+ *   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
+  ** HStringView is a view component that represents a non-editable line of text. 
+  ** Commonly, stringview is used as a label to control elements 
+  ** that do not have implicit labels (text fields, checkboxes and radio buttons, and menus). 
+  ** Some form controls automatically have labels associated with them (press buttons) 
+  ** while most do not have (text fields, checkboxes and radio buttons, and sliders etc.).  
+  **
+  ** = Instance variables
+  ** +type+::   '[HStringView]'
+  ** +value+::  The string that this string view displays when drawn.
+  ***/
+var//RSence.Controls
+HStringView = HControl.extend({
+
+  componentName: "stringview",
+  
+/** = Description
+  * setStyle function
+  *
+  **/
+  setStyle: function(_name, _value, _cacheOverride) {
+    if (!this['markupElemIds']||!this.markupElemIds['value']) {
+      return this;
+    }
+    ELEM.setStyle(this.markupElemIds.value, _name, _value, _cacheOverride);
+    return this;
+  },
+  
+/** = Description
+  * refreshLable function
+  *
+  **/
+  refreshLabel: function() {
+    if(this.markupElemIds) {
+      if(this.markupElemIds.value) {
+        ELEM.setAttr(this.markupElemIds.value, 'title', this.label);
+      }
+    }
+  }
+});
+

data/js/controls/stringview/themes/default/stringview.css

@@ -0,0 +1,8 @@
+.stringview {
+  color: #333;
+  padding: 1px;
+  font-size: 12px;
+  font-family: Arial, sans-serif;
+  overflow-y: visible;
+}
+

data/js/controls/stringview/themes/default/stringview.html

@@ -0,0 +1 @@
+<div class="stringview" id="value#{_ID}" title="#{this.label}"></div>

data/js/controls/tab/tab.js

@@ -0,0 +1,280 @@
+/*   RSence
+ *   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
+  ** HTabView
+  **
+  **
+  ***/
+var//RSence.Controls
+HTabView = HView.extend({
+/** = Description
+  * draw function
+  *
+  **/
+  draw: function(){
+    var _isDrawn = this.drawn;
+    this.base();
+    if(!_isDrawn){
+      var i=0,_styles = [
+        ['overflow','auto']
+      ];
+      for(i;i<_styles.length;i++){
+        this.setStyle(_styles[i][0],_styles[i][1]);
+      }
+      this.hide();
+    }
+  }
+});
+
+/** = Description
+  * HTab
+  *
+  **/
+var//RSence.Controls
+HTab = HControl.extend({
+  componentName: "tab",
+  refreshOnValueChange: true,
+  refreshOnLabelChange: false,
+  
+  controlDefaults: (HControlDefaults.extend({
+    constructor: function(_ctrl){
+      this.tabInit(_ctrl);
+    },
+    tabInit: function(_ctrl){
+      _ctrl.tabs = [];
+      _ctrl.tabLabels = [];
+      _ctrl.tabLabelBounds = [];
+      _ctrl.tabLabelStrings = [];
+    }
+  })),
+  
+  rightmostPx: 0,
+  selectIdx: -1,
+  
+  // overridden in the template
+  tabLabelHeight: 20,
+  
+  // overridden in the template
+  tabLabelLeftEdge: 4,
+  
+  // overridden in the template
+  tabLabelRightEdge: 4,
+  
+  // overridden in the template
+  fontStyle: 'font-family:Arial,sans-serif;font-size:13px;',
+  
+  tabLabelHTMLPrefix1: '<div class="edge-left"></div><div class="tablabel" style="width:',
+  tabLabelHTMLPrefix2: 'px">',
+  tabLabelHTMLSuffix: '</div><div class="edge-right"></div>',
+  tabLabelParentElem: 'label',
+  tabLabelElementTagName: 'div',
+  tabLabelAlign: 'left',
+  tabLabelFillBg: false,
+  tabTriggerLink: true,
+  tabLabelNoHTMLPrefix: false,
+  
+/** = Description
+  * refreshValue function
+  *
+  **/
+  refreshValue: function(){
+    var _value = this.value;
+    if(typeof _value === 'number'){
+      var _index = parseInt(_value,10);
+      if(_index<this.tabs.length){
+        if(_index!==this.selectIdx){
+          this.selectTab(_index);
+        }
+      }
+    }
+  },
+  
+/** = Description
+  * Sets label for the tab.
+  *
+  * = Parameters
+  * +_label+::  Label for the tab
+  *
+  **/
+  setLabel: function(_label){
+    this.label = _label;
+  },
+  
+/** = Description
+  * selectTab function
+  *
+  * = Parameters
+  * +_tabIdx+::
+  *
+  **/
+  selectTab: function(_tabIdx){
+    if(_tabIdx instanceof HTabView){
+      _tabIdx = _tabIdx.tabIndex;
+    }
+    if(this.selectIdx!==-1){
+      var _tabSelectElemId = this.tabLabels[this.selectIdx],
+          _tabSelectViewId = this.tabs[this.selectIdx];
+      ELEM.removeClassName(_tabSelectElemId,'item-fg');
+      ELEM.addClassName(_tabSelectElemId,'item-bg');
+      HSystem.views[_tabSelectViewId].hide();
+    }
+    if(_tabIdx!==-1){
+      var _tabLabelElemId = this.tabLabels[_tabIdx],
+          _tabViewId = this.tabs[_tabIdx];
+      ELEM.removeClassName(_tabLabelElemId,'item-bg');
+      ELEM.addClassName(_tabLabelElemId,'item-fg');
+      HSystem.views[_tabViewId].show();
+    }
+    this.selectIdx = _tabIdx;
+    this.setValue(_tabIdx);
+  },
+  
+/** = Description
+  * addTab function
+  *
+  * = Parameters
+  * +_tabLabel+::
+  * +_doSelect+::
+  *
+  **/
+  addTab: function(_tabLabel,_doSelect,_viewClass){
+    var _tabIdx=this.tabs.length,
+        _tabLabelHTML = '',
+        _labelTextWidth = this.stringWidth( _tabLabel, null, 0, this.fontStyle ),
+        _labelWidth = _labelTextWidth+this.tabLabelLeftEdge+this.tabLabelRightEdge,
+        _tab = HTabView.nu( [0,this.tabLabelHeight,null,null,0,0] ,this),
+        _tabLabelElemId = ELEM.make(this.markupElemIds[this.tabLabelParentElem],this.tabLabelElementTagName);
+    _tabIdx = this.tabs.length;
+    if(this.tabLabelNoHTMLPrefix){
+      _tabLabelHTML = _tabLabel;
+    }
+    else {
+      _tabLabelHTML = this.tabLabelHTMLPrefix1+_labelTextWidth+this.tabLabelHTMLPrefix2+_tabLabel+this.tabLabelHTMLSuffix;
+    }
+    _tab.hide();
+    ELEM.addClassName(_tabLabelElemId,'item-bg');
+    ELEM.setStyle(_tabLabelElemId,'width',_labelWidth+'px');
+    ELEM.setStyle(_tabLabelElemId,this.tabLabelAlign,this.rightmostPx+'px');
+    ELEM.setHTML(_tabLabelElemId,_tabLabelHTML);
+    this.tabLabelStrings.push(_tabLabel);
+    if(this.tabTriggerLink&&this.tabLabelElementTagName==='a'){
+      ELEM.setAttr(_tabLabelElemId,'href','javascript:HSystem.views['+this.viewId+'].selectTab('+_tabIdx+');');
+    }
+    else if (this.tabTriggerLink && !(BROWSER_TYPE.ie7 || BROWSER_TYPE.ie6)){
+      ELEM.setAttr(_tabLabelElemId,'onclick','HSystem.views['+this.viewId+'].selectTab('+_tabIdx+');');
+    }
+    else {
+      this.tabTriggerLink = false;
+      this.setClick(true);
+      this.tabLabelBounds.push([this.rightmostPx,this.rightmostPx+_labelWidth]);
+    }
+    this.rightmostPx+=_labelWidth;
+    if(this.tabLabelAlign === 'right'){
+      ELEM.setStyle(this.markupElemIds[this.tabLabelParentElem],'width',this.rightmostPx+'px');
+    }
+    else if (this.tabLabelFillBg) {
+      ELEM.setStyle(this.markupElemIds.state,'left',this.rightmostPx+'px');
+    }
+    this.tabs.push(_tab.viewId);
+    this.tabLabels.push(_tabLabelElemId);
+    _tab.tabIndex = _tabIdx;
+    if(_doSelect || (this.value === _tabIdx)){
+      this.selectTab(_tabIdx);
+    }
+    return _tab;
+  },
+  
+/** = Description
+  * click function
+  *
+  * = Parameters
+  * +_x+::
+  * +_y+::
+  *
+  **/
+  click: function(_x,_y){
+    if(this.tabTriggerLink){
+      this.setClickable(false);
+      return;
+    }
+    _x -= this.pageX();
+    _y -= this.pageY();
+    if(_y<=this.tabLabelHeight){
+      if (this.tabLabelAlign === 'right') {
+        _x = this.rect.width - _x;
+      }
+      if(_x<=this.rightmostPx){
+        var i=0,_labelBounds;
+        for(i;i<this.tabLabelBounds.length;i++){
+          _labelBounds = this.tabLabelBounds[i];
+          if(_x<_labelBounds[1] && _x>=_labelBounds[0]){
+            this.selectTab(i);
+            return;
+          }
+        }
+      }
+      
+    }
+  },
+  
+/** = Description
+  * removeTab function
+  *
+  * = Parameters
+  * +_tabIdx+::
+  *
+  **/
+  removeTab: function(_tabIdx){
+    var _selIdx = this.selectIdx,
+        _tabViewId = this.tabs[_tabIdx],
+        _tabLabelElemId = this.tabViews[_tabIdx];
+    this.tabs.splice(_tabIdx,1);
+    this.tabLabels.splice(_tabIdx,1);
+    this.tabLabelBounds.splice(_tabIdx,1);
+    this.tabLabelStrings.splice(_tabIdx,1);
+    if(_tabIdx===_selIdx){
+      this.selectIdx=-1;
+      if(_tabIdx===0&&this.tabs.length===0){
+        this.selectTab(-1);
+      }
+      else if(_tabIdx===(this.tabs.length-1)){
+        this.selectTab(_tabIdx-1);
+      }
+      else{
+        this.selectTab(_tabIdx);
+      }
+    }
+    else if(_tabIdx<_selIdx){
+      this.selectIdx--;
+    }
+    ELEM.del(_tabLabelElemId);
+    HSystem.views[_tabViewId].die();
+  }
+});
+
+/** = Description
+  * HTabItem is a wrapper for creating tabs as subviews when using JSONRenderer.
+  * rect is ignored
+  * parent is the HTab instance
+  * options may contain the following:
+  * select: true|false, passed on to addTab
+  * label: true|false, passed on to addTab
+  *
+  * = Returns 
+  * a new HTabView instance returned by addTab
+  *
+  **/
+var//RSence.Controls
+HTabItem = {
+  nu: function(_rect, _parent, _options){
+    return _parent.addTab( _options.label, _options.select );
+  }
+};
+
+

data/js/controls/tab/themes/bright/tab.css

@@ -0,0 +1,76 @@
+/* tab bar */
+.tab_label {
+  position: absolute;
+  top: 0px; left: 0px right: 0px; height: 24px;
+  cursor: pointer;
+}
+
+/* set left and width manually */
+.tab_label .item-fg,
+.tab_label .item-bg {
+  position: absolute;
+  top: 0px; height: 24px;
+  background-repeat: repeat-x;
+}
+.tab_label,
+.tab_label .edge-left,
+.tab_label .edge-right,
+.tab_label .tablabel,
+.tab_label_fill_bg {
+  background-repeat: no-repeat;
+  background-image: #{this.getCssFilePath('tab_parts1.png')};
+}
+.tab_label_fill_bg {
+  position: absolute;
+  top: 0px; left: 0px; right: 0px; height: 24px;
+  background-position: 0px -96px;
+  background-repeat: repeat-x;
+}
+
+.tab_label .edge-left {
+  position: absolute;
+  top: 0px; left: 0px; width: 12px; height: 24px;
+  background-position: 0px 0px;
+}
+.tab_label .item-bg .edge-left {
+  background-position: -24px 0px;
+}
+
+.tab_label .edge-right {
+  position: absolute;
+  top: 0px; right: 0px; width: 9px; height: 24px;
+  background-position: -12px 0px;
+}
+.tab_label .item-bg .edge-right {
+  background-position: -36px 0px;
+}
+
+.tab_label .tablabel {
+  position: absolute;
+  top: 0px; left: 12px; right: 9px; height: 24px;
+  background-position: 0px -24px;
+  background-repeat: repeat-x;
+  vertical-align: middle;
+  text-align: center;
+  color: #000;
+  line-height: 26px;
+  text-align: center; vertical-align: middle;
+  font-family: Arial, sans-serif;
+  font-size: 12px; font-weight: bold;
+  color: #333;
+}
+.tab_label .item-bg .tablabel {
+  background-position: 0px -48px;
+  color: #666;
+}
+
+.tab_bg {
+  position: absolute;
+  top: 24px; left: 0px; right: 0px; bottom: 0px;
+  background-image: #{this.getCssFilePath('tab_border_pattern.png')};
+}
+.tab_fg {
+  position: absolute;
+  top: 0px; left: 1px; right: 1px; bottom: 1px;
+  background-image: #{this.getCssFilePath('tab_bg_color.png')};
+}

data/js/controls/tab/themes/bright/tab.html

@@ -0,0 +1,6 @@
+<div class="tab_bg"    id="bg#{_ID}">
+  <div class="tab_fg"></div>
+</div>
+<div class="tab_label" id="label#{_ID}"></div>
+<div class="tab_label_fill_bg" id="state#{_ID}"></div>
+${this.tabLabelLeftEdge=12;this.tabLabelRightEdge=9;this.tabLabelHeight=24;this.fontStyle='font-size: 12px; font-weight: bold;';this.tabLabelFillBg=true;}