rsence 2.0.0.0.pre

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,47 @@
+/*   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
+  ** Simple checkbox component, toggles the value of
+  ** itself between true and false.
+  ***/
+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:++
+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/datetime/calendar/calendar.js

@@ -0,0 +1,197 @@
+/*   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
+  ** Use HCalendar to display a month calendar that displays days as columns
+  ** and weeks as rows. Its value is a date/time number specified in seconds
+  ** since or before epoch (1970-01-01 00:00:00 UTC).
+  ***/
+HCalendar = HControl.extend({
+  componentName: 'calendar',
+  weekdays_localized: ['Wk','Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
+  defaultEvents: {
+    mouseWheel: true
+  },
+/** = Description
+  * Calls HCalendar#nextMonth or HCalendar#prevMonth based on delta 
+  * of mouseWheel. 
+  *
+  **/
+  mouseWheel: function(_delta){
+    if ( _delta < 0 ) {
+      this.nextMonth();
+    }
+    else {
+      this.prevMonth();
+    }
+  },
+
+/** = Description
+  * Refreshes weekdays.
+  *
+  **/
+  refreshLabel: function(){
+    if(!this['markupElemIds']){
+      return;
+    }
+    var _weekdays_localized = this.weekdays_localized,
+        _weekdays_width = Math.floor(this.rect.width/_weekdays_localized.length),
+        _weekdays_html = [],
+        i = 0,
+        _weekdays_html_pre = ['<div style="width:'+_weekdays_width+'px;left:','px">'],
+        _weekdays_html_suf = '</div>';
+    for(;i<_weekdays_localized.length;i++){
+      _weekdays_html.push([
+        _weekdays_html_pre.join(i*_weekdays_width),
+        _weekdays_localized[i],
+        _weekdays_html_suf
+      ].join('') );
+    }
+    ELEM.setHTML(this.markupElemIds.label, _weekdays_html.join(''));
+  },
+
+/** = Description
+  * Checks the date range for the month which the date given as input belongs.
+  * 
+  * = Parameters
+  * +_date+:: A Date instance to check date range from
+  *
+  * = Returns
+  * Array of [0] first week's date and [1] last week's date.
+  *
+  **/
+  calendarDateRange: function(_date){
+    var _date_begin = this.firstDateOfMonth(_date),
+        _date_end = this.lastDateOfMonth(_date),
+        _firstWeeksDate = this.firstDateOfWeek(_date_begin),
+        _lastWeeksDate  = this.lastDateOfWeek(_date_end),
+        _week_begin = this.week(_firstWeeksDate),
+        _week_end = this.week(_lastWeeksDate),
+        _weeks = _week_end-_week_begin;
+    if((_weeks===5) && (_firstWeeksDate.getDate() !== 1)){
+      _lastWeeksDate = new Date( _lastWeeksDate.getTime() + this.msWeek );
+    }
+    else if((_weeks===5) && (_firstWeeksDate.getDate() === 1)){
+      _firstWeeksDate = new Date( _firstWeeksDate.getTime() - this.msWeek );
+    }
+    else if(_weeks===4){
+      _firstWeeksDate = new Date( _firstWeeksDate.getTime() - this.msWeek );
+      _lastWeeksDate = new Date( _lastWeeksDate.getTime() + this.msWeek );
+    }
+    return [
+      _firstWeeksDate,
+      _lastWeeksDate
+    ];
+  },
+
+/** = Description
+  * Refreshes the calendar.
+  *
+  **/
+  refreshValue: function(){
+    var _date = this.date();
+    this.drawCalendar(_date);
+  },
+
+/** = Description
+  * Draws the next month on calendar.
+  *
+  **/
+  nextMonth: function(){
+    var _date = new Date( this.viewMonth[0], this.viewMonth[1]+1, 1 );
+    this.drawCalendar( new Date(_date.getTime() - this.tzMs(_date)) );
+  },
+
+/** = Description
+  * Draws the previous month on calendar.
+  *
+  **/
+  prevMonth: function(){
+    var _date = new Date( this.viewMonth[0], this.viewMonth[1]-1, 1 );
+    this.drawCalendar( new Date(_date.getTime() - this.tzMs(_date)) );
+  },
+  viewMonth: [1970,0],
+
+/** = Description
+  * Draws the calendar with the date open given as input.
+  *
+  * = Parameters
+  * +_date+:: The date on which calendar UI is opened at.
+  *
+  **/
+  drawCalendar: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    var _calendarDateRange = this.calendarDateRange(_date),
+        _monthFirst = this.firstDateOfMonth(_date),
+        _monthLast = this.lastDateOfMonth(_date),
+        _firstDate = _calendarDateRange[0],
+        _lastDate = _calendarDateRange[1],
+        _column_count = this.weekdays_localized.length,
+        _column_width = Math.floor((this.rect.width-1)/_column_count),
+        _row_height = Math.floor((this.rect.height-1-35)/6),
+        _week_html_pre = ['<div class="calendar_weeks_week_row" style="width:'+(this.rect.width-3)+'px;height:'+_row_height+'px;top:','px">'],
+        _week_html_suf = '</div>',
+        _col_html_pre = ['<a href="javascript:void(HSystem.views['+this.viewId+'].setValue(','));" class="calendar_weeks_week_col','" style="width:'+_column_width+'px;height:'+_row_height+'px;line-height:'+_row_height+'px;left:','px">'],
+        _col_html_suf = '</a>',
+        _col_week_pre = '<div class="calendar_weeks_week_col_wk" style="width:'+_column_width+'px;height:'+_row_height+'px;line-height:'+_row_height+'px;left:0px">',
+        _col_week_suf = '</div>',
+        _month_html = [],
+        _week_html,
+        _col_html,
+        _row = 0,
+        _col,
+        _colMs,
+        _colSecs,
+        _colDate,
+        _extraCssClass;
+    for(; _row<6; _row++){
+      _week_html = [];
+      for(_col = 0; _col<8; _col++){
+        _colDate = new Date(_firstDate.getTime()+((_row*this.msWeek)+((_col-1)*this.msDay)));
+        _colMs = _colDate.getTime();
+        if(_col===0){
+          _col_html = [
+            _col_week_pre,
+            this.week(_colDate),
+            _col_week_suf
+          ].join('');
+        }
+        else {
+          _colSecs = Math.round(_colMs/1000);
+          if((this.value >= _colSecs) && (this.value < (_colSecs+86400))){
+            _extraCssClass = '_'+'sel';
+          }
+          else{
+            _extraCssClass = (_colDate<_monthFirst || _colDate > _monthLast)?'_'+'no':'_'+'yes';
+          }
+          _col_html = [
+            _col_html_pre[0],
+            _colSecs,
+            _col_html_pre[1],
+            _extraCssClass,
+            _col_html_pre[2],
+            (_col*_column_width),
+            _col_html_pre[3],
+            this.mday(_colDate),
+            _col_html_suf
+          ].join('');
+        }
+        _week_html.push(_col_html);
+      }
+      _month_html.push([
+        _week_html_pre.join(_row*_row_height),
+        _week_html.join(''),
+        _week_html_suf
+      ].join('') );
+    }
+    ELEM.setHTML(this.markupElemIds.value, _month_html.join(''));
+    ELEM.setHTML(this.markupElemIds.state, this.monthName(_date)+'&nbsp;'+this.year(_date));
+    this.viewMonth = [_monthFirst.getUTCFullYear(),_monthFirst.getUTCMonth()];
+  }
+});
+HCalendar.implement(HDateTime);