rsence 2.0.0.0.pre

data/js/controls/datetime/calendar/themes/default/calendar.css

@@ -0,0 +1,108 @@
+.calendar_control {
+  position: absolute;
+  left: 0px; top: 0px; right: 1px; bottom: 1px;
+  border: 1px solid #999;
+}
+.calendar_head {
+  position: absolute;
+  left: 0px; top: 0px; right: 0px; height: 20px;
+}
+.calendar_head_prev_month,
+.calendar_head_next_month {
+  position: absolute;
+  top: 2px; width: 16px; height: 16px;
+  font-size: 0; line-height: 0;
+  line-height: 20px;
+  cursor: pointer;
+  background-image: #{this.getCssFilePath('calendar_arrows.png')};
+}
+.calendar_head_prev_month {
+  background-position: 0px 0px;
+  left: 2px;
+}
+.calendar_head_next_month {
+  background-position: -16px 0px;
+  right: 2px;
+}
+.calendar_head_prev_month:hover {
+  background-position: 0px -16px;
+}
+.calendar_head_next_month:hover {
+  background-position: -16px -16px;
+}
+.calendar_head_prev_month:active,
+.calendar_head_next_month:active {
+  background-color: #fff;
+}
+.calender_head_month_year {
+  position: absolute;
+  top: 0px; left: 20px; right: 20px; height: 20px;
+  color: #000;
+  font-family: Arial, sans-serif;
+  font-weight: bold;
+  font-size: 13px;
+  line-height: 20px;
+  vertical-align: middle;
+  text-align: center;
+}
+.calendar_weekdays {
+  position: absolute;
+  top: 20px; left: 0px; right: 0px; height: 15px;
+}
+.calendar_weekdays div {
+  position: absolute;
+  top: 0px; height: 15px; width: 25px;
+  color: #000;
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  line-height: 15px;
+  vertical-align: middle;
+  text-align: center;
+}
+.calendar_weeks {
+  position: absolute;
+  top: 34px; left: 0px; right: 2px; bottom: 2px;
+}
+.calendar_weeks_week_row {
+  position: absolute;
+  left: 0px; right: 0px;
+}
+.calendar_weeks_week_col_no,
+.calendar_weeks_week_col_sel,
+.calendar_weeks_week_col_wk,
+.calendar_weeks_week_col_yes {
+  position: absolute;
+  text-decoration: none;
+  top: 0px;
+  font-family: Arial, sans-serif;
+  font-size: 15px;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+.calendar_weeks_week_col_wk {
+  color: #000;
+  cursor: default;
+}
+.calendar_weeks_week_col_no {
+  color: #666;
+  border-left: 1px solid #999;
+  border-top: 1px solid #999;
+}
+.calendar_weeks_week_col_no:hover {
+  background-color: #fff;
+  color: #000;
+}
+.calendar_weeks_week_col_yes,
+.calendar_weeks_week_col_sel {
+  color: #000;
+  background-color: #ddd;
+  font-weight: bold;
+  border-left: 1px solid #666;
+  border-top: 1px solid #666;
+}
+.calendar_weeks_week_col_sel,
+.calendar_weeks_week_col_yes:hover {
+  background-color: #fff;
+}
+

data/js/controls/datetime/calendar/themes/default/calendar.html

@@ -0,0 +1,9 @@
+<div class="calendar_control" id="control#{_ID}">
+  <div class="calendar_head">
+    <div class="calendar_head_prev_month" onclick="HSystem.views[#{this.viewId}].prevMonth();"></div>
+    <div class="calender_head_month_year" id="state#{_ID}"></div>
+    <div class="calendar_head_next_month" onclick="HSystem.views[#{this.viewId}].nextMonth();"></div>
+  </div>
+  <div class="calendar_weekdays" id="label#{_ID}"></div>
+  <div class="calendar_weeks" id="value#{_ID}"></div>
+</div>

data/js/controls/datetime/datetimevalue/datetimevalue.js

@@ -0,0 +1,246 @@
+/*   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
+  ** Auxiliary class for time handling.
+  ***/
+HDateTime = HClass.extend({
+  msWeek: 604800000,
+  msDay: 86400000,
+  msHour: 3600000,
+  msMinute: 60000,
+  months_localized: [
+    'January', 'February', 'March', 'April', 'May', 'June', 'July',
+    'August', 'September', 'October', 'November', 'December'
+  ],
+  
+/** = Description
+  * Returns month name of the given date.
+  *
+  * = Parameters
+  * +_date+:: Date to return month name from.
+  *
+  * = Returns
+  * Month name
+  *
+  **/
+  monthName: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    return this.months_localized[_date.getUTCMonth()];
+  },
+  
+/** = Description
+  * Returns week number for date given as input.
+  *
+  * = Parameters
+  * +_date+:: Date to return week number from.
+  *
+  * = Returns
+  * Number of the week.
+  *
+  **/
+  week: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    var _firstDateOfYear = this.firstDateOfYear(_date),
+        _firstWeekOfYear = this.firstDateOfWeek(_firstDateOfYear);
+    if(_firstWeekOfYear.getUTCDate()<=28){
+      _firstWeekOfYear = new Date(_firstWeekOfYear.getTime()+this.msWeek-this.tzMs(_firstWeekOfYear));
+    }
+    var _week = Math.ceil(
+      ( ( ( _date.getTime() - _firstWeekOfYear - this.tzMs(_date) ) / this.msDay ) + _firstDateOfYear.getUTCDay() + 1 ) / 7
+    );
+    if((_week === 53) && (this.firstDateOfWeek(this.lastDateOfYear(_date)).getUTCDate() > 28 )){
+      _week = 1;
+    }
+    return _week;
+  },
+
+/** = Description
+  * Returns day of the month for the date given as input.
+  *
+  * = Parameters
+  * +_date+:: Date to return day of the month.
+  * 
+  * = Returns
+  * Day of the month
+  *
+  **/
+  mday: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    return _date.getUTCDate();
+  },
+
+/** = Description
+  * Returns month number for the date given as input.
+  * Note that months are numbered from 0 to 11.
+  *
+  * = Parameters
+  * +_date+:: Date to return month number from.
+  *
+  * = Returns
+  * Number of the month 0 (January) to 11 (December).
+  *
+  **/
+  month: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    return _date.getUTCMonth();
+  },
+
+/** = Description
+  * Returns year for given date.
+  *
+  * = Parameters
+  * +_date+:: Date to return year from.
+  *
+  * = Returns
+  * Year
+  *
+  **/
+  year: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    return _date.getUTCFullYear();
+  },
+
+/** = Description
+  * Returns the timezone offset in milliseconds.
+  *
+  * = Parameters
+  * +_date+:: The date to get timezone offset from.
+  *
+  * = Returns
+  * Timezone offset in milliseconds.
+  *
+  **/
+  tzMs: function(_date){
+    return _date.getTimezoneOffset()*this.msMinute;
+  },
+
+/** = Description
+  * Returns a Date instance for epoch given in seconds.
+  *
+  * = Parameters
+  * +epoch_seconds+:: Point of time given in seconds 
+  *                   since 1 January 1970 00:00:00 UTC.
+  *
+  * = Returns
+  * Date object
+  *
+  **/
+  date: function(epoch_seconds){
+    epoch_seconds = (typeof epoch_seconds === 'number')?epoch_seconds:this.value;
+    var _date = new Date(epoch_seconds*1000);
+    return _date;
+  },
+
+/** = Description
+  * Returns a Date object with first millisecond of the year.
+  *
+  * = Parameters
+  * +_date+:: The date to get the first millisecond of the same year.
+  *
+  * = Returns
+  * The Date object for the first millisecond of the year
+  *
+  **/
+  firstDateOfYear: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    var _date1 = new Date( _date.getUTCFullYear(), 0, 1 ),
+        _date2 = new Date( _date1.getTime() - this.tzMs(_date1) );
+    return _date2;
+  },
+
+/** = Description
+  * Get last millisecond of the input given date's year as a Date object.
+  *
+  * = Parameters
+  * +_date+:: The last millisecond of the year on the date given.
+  *
+  * = Returns
+  * Last millisecond of the year as a Date object.
+  *
+  **/
+  lastDateOfYear: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    var _date1 = new Date( new Date( _date.getUTCFullYear()+1, 0, 1 ) - 1 ),
+        _date2 = new Date( _date1.getTime() - this.tzMs(_date1) );
+    return _date2;
+  },
+
+/** = Description
+  * Returns the first millisecond of the input given date's month.
+  *
+  * = Parameters
+  * +_date+:: The date to get the first millisecond of the month
+  *
+  * = Returns
+  * The first millisecond on the given date's month as a Date object.
+  *
+  **/
+  firstDateOfMonth: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    var _date1 = new Date( _date.getUTCFullYear(), _date.getUTCMonth(), 1 ),
+        _date2 = new Date( _date1.getTime() - this.tzMs(_date1) );
+    return _date2;
+  },
+
+/** = Description
+  * Returns the last millisecond of the input given date's month.
+  *
+  * = Parameters
+  * +_date+:: The date to get the last millisecond of the month.
+  *
+  * = Returns
+  * The last millisecond of the given date's month as a Date object.
+  *
+  **/
+  lastDateOfMonth: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    var _date1 = new Date( new Date( _date.getUTCFullYear(), _date.getUTCMonth()+1, 1 ) - 1 ),
+        _date2 = new Date( _date1.getTime() - this.tzMs(_date1) );
+    return _date2;
+  },
+
+/** = Description
+  * Returns the first millisecond when the week starts for date given as input.
+  *
+  * = Parameters
+  * +_date+:: The date to get the first millisecond.
+  *
+  * = Returns
+  * Date for the first millisecond of the week.
+  *
+  **/
+  firstDateOfWeek: function(_date){
+    _date = (_date instanceof Date)?_date:this.date();
+    var _wday = _date.getUTCDay();
+    if(_wday===0){
+      _wday = 7;
+    }
+    var _dateMs = ((_wday-1)*this.msDay),
+        _date1 = new Date( _date.getTime() - _dateMs ),
+        _date2 = new Date( _date1.getTime() );
+    return _date2;
+  },
+
+/** = Description
+  * Returns the last millisecond of the week for the given date.
+  *
+  * = Parameters
+  * +_date+:: The date to get the last millisecond
+  *
+  * = Returns
+  * The last millisecond of the week as a Date object.
+  *
+  **/
+  lastDateOfWeek: function(_date){
+    var _firstDateOfWeek = this.firstDateOfWeek(_date),
+        _lastDateOfWeek = new Date( _firstDateOfWeek.getTime() + this.msWeek - this.msDay - 1 );
+    return _lastDateOfWeek;
+  }
+});

data/js/controls/datetime/timesheet/themes/default/timesheet.css

@@ -0,0 +1,30 @@
+.timesheet_hours_col {
+  position: absolute;
+  top: 0px; left: 0px; width: 32px;
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  color: #666;
+  vertical-align: middle;
+  text-align: right;
+}
+.timesheet_hours_row {
+  position: absolute;
+  left: 0px; width: 32px;
+}
+.timesheet_lines_col {
+  position: absolute;
+  top: 0px; left: 36px; right: 0px;
+  border-left: 1px solid #aaa;
+  border-bottom: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+}
+.timesheet_lines_row0,
+.timesheet_lines_row1 {
+  position: absolute;
+  left: 0px; right: 0px; height: 1px;
+  line-height: 1px; font-size: 0px;
+  background-color: #ccc;
+}
+.timesheet_lines_row0 {
+  background-color: #aaa;
+}

data/js/controls/datetime/timesheet/themes/default/timesheet.html

@@ -0,0 +1,2 @@
+<div class="timesheet_hours_col" id="label#{_ID}"></div>
+<div class="timesheet_lines_col" id="state#{_ID}"></div>

data/js/controls/datetime/timesheet/timesheet.js

@@ -0,0 +1,182 @@
+/*   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
+  ** HTimesheet is a simple timesheet control. 
+  ***/
+HTimeSheet = HControl.extend({
+  componentName: 'timesheet',
+  pxPerHour: 24,
+  itemOffsetLeft: 36,
+  itemOffsetRight: 0,
+/** = Description
+  * Redraws the timesheet.
+  *
+  **/
+  refresh: function(){
+    if(this.drawn){
+      var _areaHeight = this.rect.height;
+      this.pxPerHour = (_areaHeight-(_areaHeight%48)) / 24;
+      if(this.options['hideLabel']){
+        this.setStyleOfPart( 'label', 'display', 'none' );
+        this.setStyleOfPart( 'state', 'left', '0px' );
+        this.itemOffsetLeft = 0;
+      }
+      else{
+        this.setStyleOfPart( 'label', 'height', (this.pxPerHour*24)+'px' );
+      }
+      this.setStyleOfPart( 'state', 'height', (this.pxPerHour*24)+'px' );
+    }
+    this.base();
+  },
+  
+/** = Description
+  * Refreshes the hour labels.
+  *
+  **/
+  refreshLabel: function(){
+    var hour = 1,
+        hours = [],
+        rowHeight = this.pxPerHour;
+        lineHeight = Math.round(this.pxPerHour/2);
+    for(; hour < 24; hour++){
+      hours.push('<div style="line-height:'+rowHeight+'px;height:'+rowHeight+'px;top:'+Math.round((hour*rowHeight)-lineHeight)+'px" class="timesheet_hours_row">'+hour+':00</div>');
+    }
+    this.markupElemIds && this.markupElemIds.label && ELEM.setHTML(this.markupElemIds.label,hours.join(''));
+    this.refreshState();
+  },
+  
+/** = Description
+  * Refreshes the lines which mark hours and half-hours.
+  *
+  **/
+  refreshState: function(){
+    var line = 0,
+        lines = [],
+        lineHeight = Math.round(this.pxPerHour/2);
+    for(; line < 48; line++){
+      lines.push('<div style="top:'+(line*lineHeight)+'px" class="timesheet_lines_row'+(line%2)+'"></div>');
+    }
+    this.markupElemIds && this.markupElemIds.label && ELEM.setHTML(this.markupElemIds.state,lines.join(''));
+  },
+  dragItem: false,
+  
+/** = Description
+  * Creates an item into timesheet with default label 'New Item'.
+  *
+  * = Parameters
+  * +origY+:: Y coordinate of the new item.
+  *
+  **/
+  createItem: function(origY){
+    var _lineHeight = Math.round(this.pxPerHour/2);
+    origY = Math.floor( origY / _lineHeight )*_lineHeight;
+    var maxY = _lineHeight*48,
+        lineHeight = Math.round(this.pxPerHour/2);
+    if(origY>maxY){
+      origY = maxY;
+    }
+    var item = HTimeSheetItem.nu(
+      this.createItemRect(origY,lineHeight),
+      this, {
+        label: 'New Item',
+        events: {
+          draggable: true
+        }
+      }
+    );
+    this.dragItem = item;
+  },
+  
+/** = Description
+  * Dragging is used to mark items on the timesheet.
+  * 
+  * = Parameters
+  * +x+:: x coordinate of the origin of drag
+  * +y+:: y coordinate of the origin of drag
+  *
+  **/
+  startDrag: function(x,y){
+    this.createItem(y-this.pageY());
+    EVENT.startDragging( this.dragItem );
+  },
+  listItemViews: false,
+  
+/** = Description
+  * Sets the editor given as parameter as the editor of instance.
+  *
+  * = Parameters
+  * +_editor+:: 
+  *
+  **/
+  setEditor: function( _editor ){
+    this.editor = _editor;
+  },
+  
+/** = Description
+  * Returns HRect the size of given parameters and suitable for timesheet.
+  *
+  * = Parameters
+  * +_origY+::      Y coordinate.
+  * +_lineHeight+:: The height of item on time sheet.
+  *
+  **/
+  createItemRect: function(_origY, _lineHeight){
+    var _left = this.itemOffsetLeft,
+        _top = _origY,
+        _right = this.rect.width - this.itemOffsetRight,
+        _bottom = _origY + _lineHeight;
+    return HRect.nu( _left, _top, _right, _bottom );
+  },
+
+/** = Description
+  * Destructor; destroys the editor first and commences inherited die.
+  *
+  **/
+  die: function(){
+    this.editor.die();
+    this.base();
+  },
+  
+/** = Description
+  * Redraws and refreshes the values on timesheet.
+  *
+  **/
+  refreshValue: function(){
+    var _data = this.value, i;
+    if(this.listItemViews === false){
+      this.listItemViews = [];
+    }
+    if(this.listItemViews.length !== 0){
+      for( i=0; i<this.listItemViews.length; i++){
+        this.listItemViews[i].die();
+      }
+      this.listItemViews = [];
+    }
+    if(_data instanceof Array){
+      var _value, _label, _item;
+      for( i=0; i<_data.length; i++){
+        _value = _data[i];
+        _label = _value['label'];
+        _item = HTimeSheetItem.nu(
+          this.createItemRect( 0, 12 ),
+          this, {
+            label: _label,
+            value: _value,
+            events: {
+              draggable: true
+            }
+          }
+        );
+        _item.dragMode = 'normal';
+        this.listItemViews.push( _item );
+      }
+    }
+  }
+});
+