rsence-pre 2.1.0.1.pre

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

@@ -0,0 +1,89 @@
+
+.button_control,
+.button_edge_left,
+.button_center,
+.button_edge_right,
+.button_label,
+.button_antiselect {
+  position: absolute;
+  top: 0px; height: 24px;
+}
+
+.button_control {
+  left: 0px; right: 0px;
+  cursor: pointer;
+}
+.disabled .button_control {
+  cursor: default;
+}
+
+.button_edge_left,
+.button_center,
+.button_edge_right {
+  background-repeat: repeat-x;
+  background-image: #{this.getCssFilePath('button_parts1.png')};
+}
+
+.button_edge_left {
+  left: 0px; width: 24px;
+  background-position: 0px 0px;
+}
+.disabled > .button_control > .button_edge_left {
+  background-position: 0px -144px;
+}
+.enabled > .button_control:hover > .button_edge_left {
+  background-position: 0px -48px;
+}
+.enabled > .button_control:active > .button_edge_left {
+  background-position: 0px -96px;
+}
+
+.button_edge_right {
+  right: 0px; width: 24px;
+  background-position: -24px 0px;
+}
+.disabled > .button_control > .button_edge_right {
+  background-position: -24px -144px;
+}
+.enabled > .button_control:hover > .button_edge_right {
+  background-position: -24px -48px;
+}
+.enabled > .button_control:active > .button_edge_right {
+  background-position: -24px -96px;
+}
+
+.button_center {
+  left: 24px; right: 24px;
+  background-position: 0px -24px;
+}
+.disabled > .button_control > .button_center {
+  background-position: 0px -168px;
+}
+.enabled > .button_control:hover > .button_center {
+  background-position: 0px -72px;
+}
+.enabled > .button_control:active > .button_center {
+  background-position: 0px -120px;
+}
+
+.button_label {
+  left: 6px; right: 6px; top: 2px;
+  height: 20px; line-height: 21px;
+  text-align: center; vertical-align: middle;
+  font-family: Arial, sans-serif;
+  font-size: 12px; font-weight: bold;
+  color: #333;
+}
+.disabled > .button_control > .button_label {
+  color: #999;
+}
+.enabled > .button_control:hover > .button_label {
+  color: #000;
+}
+.enabled > .button_control:active > .button_label {
+  color: #000;
+}
+
+.button_antiselect {
+  left: 0px; right: 0px;
+}

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

@@ -0,0 +1,7 @@
+<div class="button_control" id="control#{_ID}">
+  <div class="button_edge_left"></div>
+  <div class="button_center"></div>
+  <div class="button_edge_right"></div>
+  <div class="button_label" id="label#{_ID}">#{this.label}</div>
+  <div class="button_antiselect"></div>
+</div>

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

@@ -0,0 +1,89 @@
+
+.button_control,
+.button_edge_left,
+.button_center,
+.button_edge_right,
+.button_label,
+.button_antiselect {
+  position: absolute;
+  top: 0px; height: 24px;
+}
+
+.button_control {
+  left: 0px; right: 0px;
+  cursor: pointer;
+}
+.disabled .button_control {
+  cursor: default;
+}
+
+.button_edge_left,
+.button_center,
+.button_edge_right {
+  background-repeat: repeat-x;
+  background-image: #{this.getCssFilePath('button_parts1.png')};
+}
+
+.button_edge_left {
+  left: 0px; width: 24px;
+  background-position: 0px 0px;
+}
+.disabled > .button_control > .button_edge_left {
+  background-position: 0px -144px;
+}
+.enabled > .button_control:hover > .button_edge_left {
+  background-position: 0px -48px;
+}
+.enabled > .button_control:active > .button_edge_left {
+  background-position: 0px -96px;
+}
+
+.button_edge_right {
+  right: 0px; width: 24px;
+  background-position: -24px 0px;
+}
+.disabled > .button_control > .button_edge_right {
+  background-position: -24px -144px;
+}
+.enabled > .button_control:hover > .button_edge_right {
+  background-position: -24px -48px;
+}
+.enabled > .button_control:active > .button_edge_right {
+  background-position: -24px -96px;
+}
+
+.button_center {
+  left: 24px; right: 24px;
+  background-position: 0px -24px;
+}
+.disabled > .button_control > .button_center {
+  background-position: 0px -168px;
+}
+.enabled > .button_control:hover > .button_center {
+  background-position: 0px -72px;
+}
+.enabled > .button_control:active > .button_center {
+  background-position: 0px -120px;
+}
+
+.button_label {
+  left: 6px; right: 6px; top: 2px;
+  height: 20px; line-height: 21px;
+  text-align: center; vertical-align: middle;
+  font-family: Arial, sans-serif;
+  font-size: 12px; font-weight: bold;
+  color: #333;
+}
+.disabled > .button_control > .button_label {
+  color: #999;
+}
+.enabled > .button_control:hover > .button_label {
+  color: #000;
+}
+.enabled > .button_control:active > .button_label {
+  color: #000;
+}
+
+.button_antiselect {
+  left: 0px; right: 0px;
+}

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

@@ -0,0 +1,7 @@
+<div class="button_control" id="control#{_ID}">
+  <div class="button_edge_left"></div>
+  <div class="button_center"></div>
+  <div class="button_edge_right"></div>
+  <div class="button_label" id="label#{_ID}">#{this.label}</div>
+  <div class="button_antiselect"></div>
+</div>

data/js/controls/checkbox/checkbox.js

@@ -0,0 +1,49 @@
+/*   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
+  ** Simple checkbox component, toggles the value of
+  ** itself between true and false.
+  ***/
+var//RSence.Controls
+HCheckbox = HButton.extend({
+  componentName: 'checkbox',
+  
+  defaultEvents: {
+    click: true
+  },
+  
+/** Toggles the value checked / unchecked.
+  **/
+  click: function(){
+    this.setValue(!this.value);
+  },
+/** SetStyle function for HCheckBox
+  **/
+  setStyle: function(_name,_value,_bypass){
+    this.setStyleOfPart('label',_name,_value,_bypass);
+  },
+  
+/**Toggles the checked/unchecked css-class status 
+  according to the trueness of the value.**/
+  refreshValue: function(){
+    if(this.markupElemIds.control){
+      if(this.value){
+        this.toggleCSSClass(this.markupElemIds.control, 'checked', true);
+        this.toggleCSSClass(this.markupElemIds.control, 'unchecked', false);
+      }
+      else{
+        this.toggleCSSClass(this.markupElemIds.control, 'checked', false);
+        this.toggleCSSClass(this.markupElemIds.control, 'unchecked', true);
+      }
+    }
+  }
+});
+//-- Alias for some users:++
+var//RSence.Controls
+HCheckBox = HCheckbox;

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

@@ -0,0 +1,69 @@
+.checkbox_control,
+.checkbox_state,
+.checkbox_label,
+.checkbox_antiselect {
+  position: absolute; height: 24px;
+}
+.checkbox_control {
+  left: 0px; top: 0px; right: 0px;
+  cursor: pointer;
+}
+#{BROWSER_TYPE.ie6?'.disabled .checkbox_control':'.disabled > .checkbox_control'} {
+  cursor: default;
+}
+.checkbox_state {
+  left: 0px; top: 0px; width: 24px;
+  background-repeat: no-repeat;
+  background-position: -24px 0px;
+  background-image: #{this.getCssFilePath('checkbox_parts1.png')};
+}
+
+#{BROWSER_TYPE.ie6?'.enabled .unchecked .checkbox_state':'.enabled > .unchecked > .checkbox_state'} {
+  background-position: -24px 0px;
+}
+#{BROWSER_TYPE.ie6?'.enabled .unchecked:hover .checkbox_state':'.enabled > .unchecked:hover > .checkbox_state'} {
+  background-position: -24px -24px;
+}
+#{BROWSER_TYPE.ie6?'.enabled .unchecked:active .checkbox_state':'.enabled > .unchecked:active > .checkbox_state'} {
+  background-position: -24px -48px;
+}
+
+#{BROWSER_TYPE.ie6?'.enabled .checked .checkbox_state':'.enabled > .checked > .checkbox_state'} {
+  background-position: 0px 0px;
+}
+#{BROWSER_TYPE.ie6?'.enabled .checked:hover .checkbox_state':'.enabled > .checked:hover > .checkbox_state'} {
+  background-position: 0px -24px;
+}
+#{BROWSER_TYPE.ie6?'.enabled .checked:active .checkbox_state':'.enabled > .checked:active > .checkbox_state'} {
+  background-position: 0px -48px;
+}
+
+#{BROWSER_TYPE.ie6?'.disabled .unchecked .checkbox_state':'.disabled > .unchecked > .checkbox_state'} {
+  background-position: -24px -72px;
+}
+#{BROWSER_TYPE.ie6?'.disabled .checked .checkbox_state':'.disabled > .checked > .checkbox_state'} {
+  background-position: 0px -72px;
+}
+
+.checkbox_label {
+  left: 24px; right: 0px; top: 2px;
+  height: 20px; line-height: 21px;
+  text-align: left; vertical-align: middle;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  color: #333;
+}
+#{BROWSER_TYPE.ie6?'.disabled .checkbox_control .checkbox_label':'.disabled > .checkbox_control > .checkbox_label'} {
+  color: #999;
+}
+#{BROWSER_TYPE.ie6?'.enabled .checkbox_control:hover .checkbox_label':'.enabled > .checkbox_control:hover > .checkbox_label'} {
+  color: #000;
+}
+#{BROWSER_TYPE.ie6?'.enabled .checkbox_control:active .checkbox_label':'.enabled > .checkbox_control:active > .checkbox_label'} {
+  color: #000;
+}
+
+.checkbox_antiselect {
+  left: 0px; top: 0px; right: 0px;
+}
+

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

@@ -0,0 +1,5 @@
+<div class="checkbox_control#{this.value?' checked':' unchecked'}" id="control#{_ID}">
+  <div class="checkbox_state" id="state#{_ID}"></div>
+  <div class="checkbox_label" id="label#{_ID}">#{this.label}</div>
+  <div class="checkbox_antiselect"></div>
+</div>

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

@@ -0,0 +1,63 @@
+/*   RSence
+ *   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.
+  ***/
+
+var//RSence.Controls
+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,37 @@
+/*   RSence
+ *   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.
+  ***/
+
+var//RSence.Controls
+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,84 @@
+/*   RSence
+ *   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.
+  **
+  ***/
+var//RSence.Controls
+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>