rsence 2.0.0.0.pre

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;}

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

@@ -0,0 +1,77 @@
+/* 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;
+  overflow: hidden;
+  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/default/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-family:Arial,sans-serif;font-size:12px;font-weight:bold;';this.tabLabelFillBg=true;}

data/js/controls/textarea/textarea.js

@@ -0,0 +1,23 @@
+/*   Riassence Framework
+ *   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
+  ** HTextArea is a scrollable multi-line area that displays editable plain
+  ** text.
+  **
+  ** = Instance variables
+  ** +type+::   '[HTextArea]'
+  ** +value+::  The string that is currently held by this object.
+  ***/
+HTextArea = HTextControl.extend({
+  
+  componentName: "textarea"
+
+  
+});
+

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

@@ -0,0 +1,21 @@
+.default .textarea_input {
+  position: absolute;
+  display: block;
+  font-family: Arial, sans-serif;
+  font-size: 13px;
+  color: #000;
+  background-color: transparent;
+  vertical-align: middle;
+  border: 0;
+  left:0px;top:0px;
+  #{(BROWSER_TYPE.firefox||BROWSER_TYPE.ie7||BROWSER_TYPE.ie8||BROWSER_TYPE.opera)?'padding:0;padding-left:2px;width:100% !important;height:100% !important;':BROWSER_TYPE.ie6?'right:2px;bottom:2px;':'padding:2px;right:0px;bottom:0px;width:auto;height:auto;'}
+}
+
+.default .disabled .textarea_input {
+  #{(BROWSER_TYPE.safari||BROWSER_TYPE.chrome)?'color:#ccc;':'color:#999'}
+}
+
+.default .textarea_input_parent {
+  position: absolute;
+  #{(BROWSER_TYPE.firefox||BROWSER_TYPE.ie7||BROWSER_TYPE.ie8||BROWSER_TYPE.opera)?'left:0;padding-left:1px;top:1px;right:3px;bottom:1px;':BROWSER_TYPE.ie?'left:2px;top:1px;right:1px;bottom:1px;':'left:-2px;top:-2px;right:-2px;bottom:-2px;'}
+}

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

@@ -0,0 +1,18 @@
+<div class="textcontrol_bg"></div>
+
+<div class="textcontrol_n"></div>
+<div class="textcontrol_s"></div>
+<div class="textcontrol_w"></div>
+<div class="textcontrol_e"></div>
+
+<div class="textcontrol_nw"></div>
+<div class="textcontrol_ne"></div>
+<div class="textcontrol_se"></div>
+<div class="textcontrol_sw"></div>
+
+<div id="label#{_ID}" title="#{this.label}" class="textarea_input_parent">
+  <textarea class="textarea_input" style="resize:none;" #{this.enabled?'':'disabled'}
+    onfocus="HSystem.views[#{this.viewId}].textFocus();" 
+    onblur="HSystem.views[#{this.viewId}].textBlur();" 
+    id="value#{_ID}">#{this.value}</textarea>
+</div>

data/js/controls/textcontrol/textcontrol.js

@@ -0,0 +1,372 @@
+/*   Riassence Framework
+ *   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
+  ** HTextControl is a control unit that represents an editable input 
+  ** line of text. Commonly, textcontrol is used as a single text field in 
+  ** the request forms. HTextControl view or theme can be changed; the 
+  ** default_theme is used by default.
+  **
+  ** = Instance variables
+  ** +type+::   '[HTextControl]'
+  ** +value+::  The string that is currently held by this object.
+  ***/
+HTextControl = HControl.extend({
+  
+  componentName: "textcontrol",
+  
+  defaultEvents: {
+    textEnter: true
+  },
+  
+  controlDefaults: (HControlDefaults.extend({
+    refreshOnBlur: true,
+    refreshOnInput: true
+  })),
+  
+/** = Description
+  * The refreshLabel method sets the title property of the text
+  * field, essentially creating a tooltip using the label.
+  *
+  **/
+  refreshLabel: function(){
+    if(this['markupElemIds']!==undefined){
+      if(this.markupElemIds['label']!==undefined){
+        ELEM.setAttr(this.markupElemIds.label,'title',this.label);
+      }
+    }
+  },
+
+//   drawSubviews: function(){
+//     if(this['markupElemIds']!==undefined && this.markupElemIds['value']!==undefined) {
+//       // this.adjustInputStyle();
+//     }
+//     this.setEnabled(this.enabled);
+//   },
+//   
+// /** = Description
+//   * Tweaks the input element to fit the match the size properly
+//   * in different browsers. Can't be done reliably by using just
+//   * the theme css, because some browsers are broken
+//   * regarding styling of input elements.
+//   *
+//   **/
+//   adjustInputStyle: function(){
+//     var _input  = this.markupElemIds.value,
+//         _label  = this.markupElemIds.label;
+//     if(BROWSER_TYPE.firefox){
+//       if(this.componentName === 'textarea'){
+//         ELEM.setStyle(_input,'padding-top','0px');
+//       }
+//       else {
+//         ELEM.setStyle(_input,'margin-top','1px');
+//       }
+//       ELEM.setStyle(_input,'padding-left','0px');
+//       ELEM.setStyle(_label,'left','2px');
+//       ELEM.setStyle(_label,'top','0px');
+//       ELEM.setStyle(_label,'right','2px');
+//       ELEM.setStyle(_label,'bottom','2px');
+//     }
+//     else if(BROWSER_TYPE.ie){
+//       ELEM.flushLoop();
+//       var _size   = ELEM.getVisibleSize( this.elemId ),
+//           _width  = _size[0],
+//           _height = _size[1];
+//       ELEM.setStyle(_input,'left','2px');
+//       ELEM.setStyle(_input,'top','1px');
+//       ELEM.setStyle(_input,'padding-top','0px');
+//       ELEM.setStyle(_input,'padding-left','0px');
+//       ELEM.setStyle(_input,'padding-right','8px');
+//       ELEM.setStyle(_input,'padding-bottom','0px');
+//       ELEM.setStyle(_input,'width',(_width-10)+'px');
+//       ELEM.setStyle(_input,'height',(_height-2)+'px');
+//       ELEM.setStyle(_label,'left','0px');
+//       ELEM.setStyle(_label,'top','0px');
+//       ELEM.setStyle(_label,'right','0px');
+//       ELEM.setStyle(_label,'bottom','0px');
+//     }
+//   },
+  
+  setStyle: function(_name, _value, _cacheOverride) {
+    if (!this['markupElemIds']||!this.markupElemIds['value']) {
+      return;
+    }
+    this.setStyleOfPart('value', _name, _value, _cacheOverride);
+  },
+  
+  setEnabled: function(_flag) {
+    this.base(_flag);
+    if(this['markupElemIds'] && this.markupElemIds.value) {
+      ELEM.get(this.markupElemIds.value).disabled = !this.enabled;
+    }
+  },
+  
+/** This flag is true, when the text input field has focus.
+  **/
+  hasTextFocus: false,
+
+/** = Description
+  * Special event for text entry components.
+  * Called when the input field gains focus.
+  *
+  **/
+  textFocus: function(){
+    this.hasTextFocus = true;
+    return true;
+  },
+
+/** = Description
+  * Special event for text entry components.
+  * Called when the input field loses focus.
+  *
+  **/
+  textBlur: function(){
+    this.hasTextFocus = false;
+    if(this.options.refreshOnBlur){
+      this.refreshValue();
+    }
+    return true;
+  },
+
+/** = Description
+  * refreshValue function
+  *
+  *
+  **/
+  refreshValue: function(){
+    this.setTextFieldValue( this.value );
+  },
+
+/** = Description
+  * Placeholder method for validation of the value.
+  *
+  **/
+  validateText: function(_value){
+    return _value;
+  },
+  
+/** = Description
+  * Returns the input element or null, if no input element created (yet).
+  *
+  **/
+  getInputElement: function(){
+    if( this.markupElemIds && this.markupElemIds.value ){
+      return ELEM.get(this.markupElemIds.value);
+    }
+    return null;
+  },
+  
+/** = Description
+  * Returns the value of the input element.
+  *
+  **/
+  getTextFieldValue: function(){
+    var _inputElement = this.getInputElement();
+    if( _inputElement === null ){
+      return '';
+    }
+    return _inputElement.value;
+  },
+  
+/** = Description
+  * Sets the value of the input element.
+  *
+  * = Parameters
+  * +_value+::  The value to set.
+  *
+  **/
+  setTextFieldValue: function(_value){
+    var _inputElement = this.getInputElement(),
+        _selectionRange = this.getSelectionRange();
+    if( _inputElement === null ){
+      return;
+    }
+    if( _inputElement.value !== String(_value) ){
+      _inputElement.value = _value;
+    }
+    this.setSelectionRange( _selectionRange[0], _selectionRange[1] );
+  },
+  
+  // returns a random number prefixed and suffixed with '---'
+  _randomMarker: function(){
+    return '---'+Math.round((1+Math.random())*10000)+'---';
+  },
+  
+/** = Description
+  * Returns the selection (or text cursor position) of the input element
+  * as an +Array+ like +[ startOffset, endOffset ]+.
+  *
+  **/
+  getSelectionRange: function(){
+    var _inputElement = this.getInputElement();
+    if( _inputElement === null || this.hasTextFocus === false ){
+      return [ 0, 0 ];
+    }
+    if(document.selection){
+      // Internet Explorer
+      
+      var
+      
+      // create a range object
+      _range = document.selection.createRange(),
+      
+      // original range text
+      _rangeText = _range.text,
+      _rangeLength = _rangeText.length,
+      
+      // make a copy of the text and replace \r\n with \n
+      _origValue = _inputElement.value.replace(/\r\n/g, "\n"),
+      
+      _markerValue,
+      _markerLength,
+      _markerIndex,
+      
+      // create random marker to replace the text with
+      _marker = this._randomMarker();
+      
+      // re-generate marker if it's found in the text.
+      while( _origValue.indexOf( _marker ) !== -1){
+        _marker = this._randomMarker();
+      }
+      
+      _markerLength = _marker.length;
+      
+      // temporarily set the text of the selection to the unique marker
+      _range.text = _marker;
+      
+      _markerValue = _inputElement.value.replace(/\r\n/g, "\n");
+      
+      _range.text = _rangeText;
+      
+      _markerIndex = _markerValue.indexOf( _marker );
+      
+      return [
+        _markerIndex,
+        _markerIndex + _rangeLength
+      ];
+    }
+    else if (_inputElement.selectionStart){
+      // Mozilla - Gecko
+      return [
+        _inputElement.selectionStart,
+        _inputElement.selectionEnd
+      ];
+    }
+    else {
+      // no support
+      return [ 0, 0 ];
+    }
+  },
+  
+/** = Description
+  * Sets the selection (or text cursor position) of the input element.
+  *
+  * = Parameters
+  * +_selectionStart+::   The start of the selection (or an Array containing
+  *                       both start and end offset, see below).
+  * +_selectionEnd+::     The end offset of the selection.
+  *
+  * = Note
+  * - +_selectionStart+ can also be given as an +Array+
+  *   like +[ startOffset, endOffset ]+.
+  * - If the +_selectionEnd+ is omitted, no selection is made; the text 
+  *   cursor is positioned at the startOffset instead.
+  **/
+  setSelectionRange: function( _selectionStart, _selectionEnd ){
+    if( _selectionStart instanceof Array ){
+      _selectionEnd = _selectionStart[1];
+      _selectionStart = _selectionStart[0];
+    }
+    if( _selectionEnd === undefined ){
+      _selectionEnd = _selectionStart;
+    }
+    var _inputElement = this.getInputElement();
+    if( _inputElement === null || this.hasTextFocus === false ){
+      return;
+    }
+    if(_inputElement.createTextRange){
+      // Internet Explorer
+      var _range = _inputElement.createTextRange();
+      _range.move( 'character', _selectionStart, _selectionEnd );
+      _range.select();
+    }
+    else if (_inputElement.selectionStart){
+      // Mozilla - Gecko
+      _inputElement.setSelectionRange( _selectionStart, _selectionEnd );
+    }
+  },
+  
+/** = Description
+  * Receives the +textEnter+ event to update the value
+  * based on what's (potentially) entered in the text input field.
+  *
+  **/
+  textEnter: function(){
+    this.setValue(
+      this.validateText(
+        this.getTextFieldValue()
+      )
+    );
+    if(this.options.refreshOnInput){
+      this.refreshValue();
+    }
+    return false;
+  }
+  
+});
+
+/** = Description
+  * 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 
+  * decimalNumber: true option to the constructor.
+  **/
+HNumericTextControl = HTextControl.extend({
+  
+  defaultEvents: {
+    mouseWheel: true,
+    textEnter: true
+  },
+  
+/** Uses the mouseWheel event to step up/down the value.
+  **/
+  mouseWheel: function(_delta){
+    var _value = this.value;
+    _value = _value-((_delta<0)?1:-1);
+    this.setValue(Math.round(this.validateText(_value)));
+  },
+
+/** = Description
+  * Extends the validateText method to ensure the
+  * input is a number.
+  *
+  **/
+  validateText: function(_value){
+    if(this.options.decimalNumber){
+      _value = parseFloat(_value);
+    }
+    else{
+      _value = parseInt(_value,10);
+    }
+    if(isNaN(_value)){
+      _value = this.value;
+    }
+    if(_value>this.options.maxValue){
+      _value = this.options.maxValue;
+    }
+    else if(_value<this.options.minValue){
+      _value = this.options.minValue;
+    }
+    return _value;
+  }
+
+});
+
+
+