rsence 2.0.0.0.pre

data/js/controls/dialogs/alert_sheet/alert_sheet.js

@@ -0,0 +1,62 @@
+/*   Riassence Framework
+ *   Copyright 2009 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
+  ** HAlertSheet is a simple alert notification control.
+  ***/
+
+HAlertSheet = HSheet.extend({
+
+/** = Description
+  * Refreshes the label of text if this['alertText'] is set.
+  *
+  **/
+  refreshLabel: function(){
+    this.base();
+    if(this['alertText']){
+      this.alertText.setValue( this.label );
+    }
+  },
+  
+/** = Description
+  * Draws the warning text (this.label) as a HStringView and a warning image 
+  * and an alert button.
+  **/
+  drawSubviews: function(){
+    this.icon = HImageView.nu(
+      [ 16, 16, 48, 48 ],
+      this, {
+        value: this.getThemeGfxFile('sheet_warning.png')
+      }
+    );
+    this.alertText = HStringView.nu(
+      [ 80, 16, null, null, 8, 48 ],
+      this, {
+        value: this.label
+      }
+    );
+    this.alertButtons();
+  },
+
+/** = Description
+  * Draws an alert button.
+  *
+  **/
+  alertButtons: function(){
+    this.okButton = HClickValueButton.nu(
+      [ null, null, 60, 23, 8, 8 ],
+      this, {
+        label: 'OK',
+        valueObj: this.valueObj,
+        events: {
+          click: true
+        }
+      }
+    );
+  }
+});

data/js/controls/dialogs/confirm_sheet/confirm_sheet.js

@@ -0,0 +1,36 @@
+/*   Riassence Framework
+ *   Copyright 2009 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
+  ** Simple confirm sheet control. Acts like HAlertSheet but has a cancel 
+  ** button as well.
+  ***/
+
+HConfirmSheet = HAlertSheet.extend({
+/** = Description
+  * Creates a cancel button.
+  *
+  **/
+  alertButtons: function(){
+    this.cancelButton = HClickValueButton.extend({
+      click: function(){
+        this.setValue( -1 );
+      }
+    }).nu(
+      [ null, null, 60, 23, 76, 8 ],
+      this, {
+        label: 'Cancel',
+        valueObj: this.valueObj,
+        events: {
+          click: true
+        }
+      }
+    );
+    this.base();
+  }
+});

data/js/controls/dialogs/sheet/sheet.js

@@ -0,0 +1,83 @@
+/*   Riassence Framework
+ *   Copyright 2009 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
+  ** HSheet is a container component that toggles its visibility
+  ** based on its value. When the value is 0, it's visible, otherwise 
+  ** it's hidden. It expands to fill its parent view, the rect 
+  ** specifies the size of the sheet inside. The sheet is 
+  ** centered. It's practical when combined with button 
+  ** values. Also see HAlertSheet and HConfirmSheet components.
+  **
+  ***/
+HSheet = HControl.extend({
+  componentName: 'sheet',
+
+/** = Description
+  * Shows of hides HSheet depending on the value.
+  * If the value is 0 the HSheet#show() will be called. 
+  * Otherwise HSheet#hide() is called.
+  *
+  **/
+  refreshValue: function(){
+    if(this.value===0){
+      this.show();
+    }
+    else{
+      this.hide();
+    }
+  },
+
+/** = Description
+  * Draws the sheet rectangle once it has been created and 
+  * if it has not been set as hidden by constructor.
+  *
+  * = Returns
+  * +self+
+  
+  **/
+  drawRect: function() {
+    if (this.parent && this.rect.isValid) {
+      var _this = this,
+          _elemId = _this.elemId,
+          _styl = ELEM.setStyle,
+          _rect = _this.rect,
+          _width = _rect.width,
+          _left = 0-Math.floor(_rect.width/2),
+          _height = _rect.height;
+      
+      _styl( _elemId, 'left', '0px', true);
+      _styl( _elemId, 'top', '0px', true);
+      _styl( _elemId, 'right', '0px', true);
+      _styl( _elemId, 'bottom', '0px', true);
+      _styl( _elemId, 'width', 'auto', true);
+      _styl( _elemId, 'height', 'auto', true);
+      _styl( _elemId, 'min-width', _width+'px', true);
+      _styl( _elemId, 'min-height', _height+'px', true);
+      
+      if(_this['markupElemIds']){
+        var _stateId = _this.markupElemIds['state'];
+        _styl( _stateId, 'left', _left+'px', true );
+        _styl( _stateId, 'top', '0px', true );
+        _styl( _stateId, 'width', _width+'px', true );
+        _styl( _stateId, 'height', _height+'px', true );
+      }
+      //-- Show the rectangle once it gets created, unless visibility was set to++
+      //-- hidden in the constructor.++
+      if(undefined === _this.isHidden || _this.isHidden === false) {
+        _styl( _elemId, 'visibility', 'inherit', true);
+      }
+      _styl( _elemId, 'display', 'block', true);
+      _this._updateZIndex();
+      _this.drawn = true;
+    }
+    return this;
+  }
+});
+

data/js/controls/dialogs/sheet/themes/default/sheet.css

@@ -0,0 +1,64 @@
+.sheet_bg,
+.sheet_body,
+.sheet_dimmer,
+.sheet_center,
+.sheet_content,
+.sheet_body_edge_left,
+.sheet_body_edge_right,
+.sheet_body_corner_left,
+.sheet_body_corner_right,
+.sheet_body_edge_bottom,
+.sheet_subview {
+  position: absolute;
+  display: block;
+  overflow: hidden;
+  cursor: inherit;
+  background-repeat: no-repeat;
+}
+.sheet_dimmer {
+  top: 0px; left: 0px; right: 0px; bottom: 0px;
+  background-repeat: repeat;
+  background-image: #{this.getCssFilePath('sheet_dim.png')};
+}
+.sheet_center {
+  top: 0px; left: 50%; overflow: visible; width: 0px; height: 0px;
+}
+.sheet_bg {
+  left: 24px; top: 0px; right: 24px; bottom: 24px;
+  background-repeat: repeat;
+  background-image: #{this.getCssFilePath('sheet_bg.png')};
+}
+.sheet_body {
+  left: 0px; top: 0px; right: 0px; bottom: 0px;
+}
+.sheet_body * {
+  background-image: #{this.getCssFilePath('sheet_parts1.png')};
+}
+.sheet_body_edge_left {
+  left: 0px; top: 0px; bottom: 24px; width: 24px;
+  background-repeat: repeat-y;
+  background-position: -48px 0px;
+}
+.sheet_body_edge_right {
+  right: 0px; top: 0px; bottom: 24px; width: 24px;
+  background-repeat: repeat-y;
+  background-position: -72px 0px;
+}
+.sheet_body_corner_left {
+  left: 0px; bottom: 0px; height: 24px; width: 24px;
+  background-position: 0px 0px;
+}
+.sheet_body_corner_right {
+  right: 0px; bottom: 0px; height: 24px; width: 24px;
+  background-position: -24px 0px;
+}
+.sheet_body_edge_bottom {
+  left: 24px; bottom: 0px; right: 24px; height: 24px;
+  background-repeat: repeat-x;
+  background-position: 0px 0px;
+  background-image: #{this.getCssFilePath('sheet_parts2.png')};
+}
+.sheet_subview {
+  left: 2px; top: 0px; right: 2px; bottom: 2px;
+}
+

data/js/controls/dialogs/sheet/themes/default/sheet.html

@@ -0,0 +1,14 @@
+<div class="sheet_dimmer"></div>
+<div class="sheet_center">
+  <div class="sheet_content" id="state#{_ID}">
+    <div class="sheet_bg"></div>
+    <div class="sheet_body">
+      <div class="sheet_body_edge_left"></div>
+      <div class="sheet_body_edge_right"></div>
+      <div class="sheet_body_edge_bottom"></div>
+      <div class="sheet_body_corner_left"></div>
+      <div class="sheet_body_corner_right"></div>
+    </div>
+    <div class="sheet_subview" id="subview#{_ID}"></div>
+  </div>
+</div>

data/js/controls/imageview/imageview.js

@@ -0,0 +1,108 @@
+/*   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
+  ** HImageView is a control unit intended to display images on the screen
+  ** 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, 
+  ** a default blank image will be rendered.
+  **
+  ***/
+HImageView = HControl.extend({
+  
+  controlDefaults: (HControlDefaults.extend({
+    scaleToFit: true,
+    value: null,
+    constructor: function(_ctrl){
+      if(this.value===null){
+        // default to a blank image
+        this.value = _ctrl.getThemeGfxPath() + "/blank.gif";
+      }
+    }
+  })),
+  
+  _makeScaleToFit: function(_parentId){
+    var _value = (this.value!==null)?this.value:(this.options.valueObj?this.options.valueObj.value:this.options.value);
+    this.elemId = ELEM.make(_parentId,'img');
+    ELEM.setAttr(this.elemId,'src',_value);
+    ELEM.setAttr(this.elemId,'alt',this.label);
+    ELEM.setAttr(this.elemId,'title',this.label);
+  },
+  _makeScaleToOriginal: function(_parentId){
+    var _value = (this.value!==null)?this.value:(this.options.valueObj?this.options.valueObj.value:this.options.value);
+    this.elemId = ELEM.make(_parentId,'div');
+    ELEM.setStyle(this.elemId,'background-image','url('+_value+')');
+    ELEM.setStyle(this.elemId,'background-position','0px 0px');
+    ELEM.setStyle(this.elemId,'background-repeat','no-repeat');
+    ELEM.setAttr(this.elemId,'title',this.label);
+  },
+  _makeElem: function(_parentId){
+    if(this.options.scaleToFit){
+      this._makeScaleToFit(_parentId);
+    }
+    else {
+      this._makeScaleToOriginal(_parentId);
+    }
+  },
+  
+/** = Description
+  * Used to refresh HImageView if the this.value is changed.
+  * 
+  **/
+  refreshValue: function(){
+    if(this.options.scaleToFit){
+      ELEM.setAttr(this.elemId,'src',this.value);
+    }
+    else{
+      ELEM.setStyle(this.elemId,'background-image','url('+this.value+')');
+    }
+  },
+  
+/** = Description
+  * Refreshesh the label of HImageView.
+  *
+  **/
+  refreshLabel: function(){
+    if(this.options.scaleToFit){
+      ELEM.setAttr(this.elemId,'alt',this.label);
+    }
+    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.
+  *
+  **/
+  scaleToFit: function() {
+    if(!this.options.scaleToFit){
+      ELEM.del(this.elemId);
+      this._makeScaleToFit(this._getParentElemId());
+      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.
+  *
+  **/
+  scaleToOriginal: function() {
+    if(this.options.scaleToFit){
+      ELEM.del(this.elemId);
+      this._makeScaleToOriginal(this._getParentElemId());
+      this.options.scaleToFit=false;
+    }
+  }
+
+
+  
+});

data/js/controls/lists/checkboxlist/checkboxlist.js

@@ -0,0 +1,170 @@
+/*   Riassence Framework
+ *   Copyright 2009 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
+  ** This class is still at experimental phase.
+  ** Please assume that the API _will_ change later. 
+  ** HCheckboxList is a combined list of HCheckboxes.
+  **
+  ***/
+HCheckboxList = HControl.extend({
+  
+/** = Description
+  * Draws borders with 1px and sets 'overflow' to 'auto'.
+  *
+  **/
+  drawSubviews: function(){
+    this.setStyle('border','1px solid #999');
+    this.setStyle('overflow','auto');
+  },
+  listItems: [],
+  listItemViews: [],
+  ListCheckbox: HCheckbox.extend({
+
+/** = Description
+  * Adds listValues to the parent if they are true otherwise deletes them.
+  *
+  **/
+    refreshValue: function(){
+      this.base();
+      if(this.value === true){
+        this.parent.addItem( this.options.listValue );
+      }
+      else{
+        this.parent.delItem( this.options.listValue );
+      }
+    }
+  }),
+
+/** = Description
+  * Checks if +_listValue+ can be found from the values. Adds the value
+  * if it can't be found.
+  * 
+  * = Parameters
+  * +_listValue+:: listValue to add.
+  *
+  **/
+  addItem: function( _listValue ){
+    if(this.value.indexOf(_listValue) === -1){
+      var _newValue = [], i = 0;
+      for( ; i < this.value.length; i++ ){
+        _newValue.push( this.value[i] );
+      }
+      _newValue.push( _listValue );
+      this.setValue( _newValue );
+    }
+  },
+  
+/** = Description
+  * Checks if the item can be found from this.value and deletes it
+  * in case it can be found.
+  *
+  * = Parameters
+  * +_listValue+:: A listValue to delete.
+  *
+  **/
+  delItem: function( _listValue ){
+    var _listIndex = this.value.indexOf(_listValue);
+    if(_listIndex !== -1){
+      var _newValue = [], i = 0;
+      for( ; i < this.value.length; i++ ){
+        if(this.value[i] !== _listValue){
+          _newValue.push( this.value[i] );
+        }
+      }
+      this.setValue( _newValue );
+    }
+  },
+  
+/** = Description
+  * Setter function for listItems and listImetViews. Destroys 
+  * the old ListCheckboxes before creating the new ones based on the
+  * listItems given as an parameter.
+  * 
+  * = Parameters
+  * +_listItems+:: listItems is an array-packed array, where each index in the
+  *                surrounding array contains a [ value, label ] pair.
+  *                The value is mapped to the value of the HRadiobuttonList
+  *                instance when its HRadiobutton instance is selected.
+  *
+  **/
+  setListItems: function(_listItems){
+    var _listItem,
+        _value,
+        _label,
+        _checked,
+        _checkbox,
+        i = 0;
+    for ( ; i < this.listItemViews.length; i++ ) {
+      try {
+        this.listItemViews[i].die();
+      }
+      catch(e) {
+        console.log('HCheckboxList, setListItems item destruction error: ',e);
+      }
+    }
+    this.listItems = _listItems;
+    this.listItemViews = [];
+    for ( i = 0 ; i < _listItems.length; i++ ){
+      _listItem = _listItems[i];
+      _value = _listItem[0];
+      _label = _listItem[1];
+      _checked = (this.value.indexOf( _value ) !== -1);
+      _checkbox = this.ListCheckbox.nu(
+        [ 4, (i*23)+4, null, 23, 4, null ],
+        this, {
+          label: _label,
+          value: _checked,
+          listValue: _value
+        }
+      );
+      this.listItemViews[i] = _checkbox;
+    }
+    this.refreshValue();
+  },
+  
+/** = Description
+  * Sets listItems and ListItemViews to null and calls 
+  * the inherited destructor.
+  *
+  **/
+  die: function(){
+    this.listItems = null;
+    this.listItemViews = null;
+    this.base();
+  },
+
+/** = Description
+  * Checks whether there are listItemViews and if there are, 
+  * refreshes their state.
+  *
+  * = Returns
+  * +self+
+  * 
+  **/
+  refreshValue: function(){
+    if(this.listItemViews.length === 0){
+      return this;
+    }
+    var _value = this.value,
+        _listItems = this.listItems,
+        _listItemValue,
+        _selectedItems = [],
+        i = 0,
+        _isSelected;
+    for( ; i < _listItems.length; i++ ){
+      _listItemValue = _listItems[i][0];
+      _isSelected = (_value.indexOf( _listItemValue ) !== -1);
+      this.listItemViews[i].setValue( _isSelected );
+      if(_isSelected){
+        _selectedItems.push( _listItemValue );
+      }
+    }
+    return this;
+  }
+});