rsence 2.0.0.0.pre

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

@@ -0,0 +1,42 @@
+.timesheet_item,
+.timesheet_item_middle,
+.timesheet_item_label,
+.timesheet_item_resize_top,
+.timesheet_item_move,
+.timesheet_item_resize_bottom {
+  position: absolute;
+  left: 0px; right: 0px;
+}
+.timesheet_item {
+  top: 0px; bottom: 0px;
+  border: 1px solid #c00;
+  background-color: #c66;
+  opacity: 0.75;
+}
+.active .timesheet_item {
+  opacity: 1.0;
+}
+.timesheet_item_middle {
+  top: 50%; height: 0px;
+  overflow: visible;
+}
+.timesheet_item_label {
+  top: -6px; height: 12px;
+  font-size: 12px;
+  text-align: center;
+  color: #333;
+  opacity: 1;
+  font-family: Arial, sans-serif;
+}
+.timesheet_item_resize_top {
+  top: 0px; height: 3px;
+  cursor: n-resize;
+}
+.timesheet_item_move {
+  top: 3px; bottom: 3px;
+  cursor: move;
+}
+.timesheet_item_resize_bottom {
+  bottom: 0px; height: 3px;
+  cursor: s-resize;
+}

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

@@ -0,0 +1,8 @@
+<div class="timesheet_item">
+  <div class="timesheet_item_middle">
+    <div class="timesheet_item_label" id="label#{_ID}">#{this.label}</div>
+  </div>
+  <div class="timesheet_item_resize_top"></div>
+  <div class="timesheet_item_resize_bottom"></div>
+  <div class="timesheet_item_move" id="subview#{_ID}"></div>
+</div>

data/js/controls/datetime/timesheet_item/timesheet_item.js

@@ -0,0 +1,247 @@
+/*   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
+  ** Item class to be used with HTimeSheet.
+  ***/
+HTimeSheetItem = HControl.extend({
+  componentName: 'timesheet_item',
+  dragMode: 'create',
+  prevXY: [0,0],
+  prevXYTime: 0,
+  
+/** = Description
+  * Dragging is used to change coordinates.
+  *
+  * = Parameters
+  * +x+:: X coordinate at the start of drag.
+  * +y+:: Y coordinate at the start of drag.
+  *
+  **/
+  startDrag: function(x,y){
+    this.origY = y-this.parent.pageY();
+    if(this.dragMode === 'normal'){
+      var _timeNow = new Date().getTime(),
+          _xEquals = (Math.round(this.prevXY[0]/4) === Math.round(x/4)),
+          _yEquals = (Math.round(this.prevXY[1]/4) === Math.round(y/4)),
+          _noTimeout = ((_timeNow - this.prevXYTime) < 500);
+      if( _xEquals && _yEquals && _noTimeout ) {
+        if( this.parent['editor'] ){
+          var _editor = this.parent.editor;
+          _editor.setTimeSheetItem(this);
+          _editor.bringToFront();
+          _editor.show();
+        }
+      }
+      else {
+        var _diffTop = this.rect.top - this.origY,
+            _diffBottom = this.rect.bottom - this.origY;
+        if(0 >= _diffTop && _diffTop >= -3){
+          this.dragMode = 'resize-top';
+        }
+        else if(0 <= _diffBottom && _diffBottom <= 4){
+          this.dragMode = 'resize-bottom';
+        }
+        else {
+          this.dragMode = 'move';
+          this.moveDiff = this.origY - this.rect.top;
+        }
+        this.bringToFront();
+      }
+    }
+    this.prevXY = [x,y];
+    this.prevXYTime = _timeNow;
+    return true;
+  },
+  
+/** = Description
+  * Label setter function.
+  *
+  * = Parameters
+  * +_label+:: New label
+  *
+  **/
+  setTimeSheetItemLabel: function(_label){
+    this.label = _label;
+    this.refreshLabel();
+  },
+  
+/** = Description
+  * Function used to calculate the right size for a new 
+  * item created by dragging.
+  *
+  * = Parameters
+  * +_y+:: Y coordinate at the start of drag.
+  *
+  **/
+  dragCreate: function(_y){
+    var _negative = (_y < this.origY),
+        _lineHeight = Math.floor(this.parent.pxPerHour/2),
+        _top, _bottom, _diff;
+    if(_negative){
+      var _floorY = Math.floor(_y/_lineHeight)*_lineHeight,
+          _ceilYo = Math.ceil(this.origY/_lineHeight)*_lineHeight;
+      if(_floorY<0){_floorY=0;}
+      _diff = _floorY-_ceilYo;
+      if( _diff <= 0-_lineHeight ){
+        _top = _floorY;
+        _bottom = _ceilYo;
+      }
+      else if( _diff === 0 ){
+        _top = _floorY-_lineHeight;
+        _bottom = _ceilYo;
+      }
+    }
+    else {
+      var _ceilY  = Math.ceil(_y/_lineHeight)*_lineHeight,
+          _floorYo = Math.floor(this.origY/_lineHeight)*_lineHeight;
+      if(_ceilY>(_lineHeight*48)){_ceilY=_lineHeight*48;}
+      _diff = _ceilY-_floorYo;
+      if( _diff >= _lineHeight ){
+        _top = _floorYo;
+        _bottom = _ceilY;
+      }
+      else if( _diff === 0 ){
+        _top = _floorYo;
+        _bottom = _ceilY+_lineHeight;
+      }
+    }
+    this.rect.setTop(_top);
+    this.rect.setBottom(_bottom);
+  },
+  
+/** = Description
+  * Resize top by dragging auxiliary function.
+  *
+  * = Parameters
+  * +_y+:: Y coordinate at the start of drag.
+  **/
+  dragResizeTop: function(_y){
+    var _lineHeight = Math.floor(this.parent.pxPerHour/2),
+        _top = Math.floor( _y/_lineHeight )*_lineHeight;
+    if(_top < 0){ _top = 0; }
+    if(_top+_lineHeight > this.rect.bottom){
+      _top = this.rect.bottom - _lineHeight;
+    }
+    this.rect.setTop( _top );
+  },
+  
+/** = Description
+  * Resize function for resizing the bottom of item.
+  *
+  * = Parameters
+  * +_y+:: Y coordinate at the start of drag.
+  *
+  **/
+  dragResizeBottom: function(_y){
+    var _lineHeight = Math.floor(this.parent.pxPerHour/2),
+        _bottom = Math.floor( _y/_lineHeight )*_lineHeight;
+    if(_bottom > _lineHeight*48){ _bottom = _lineHeight*48; }
+    if(_bottom-_lineHeight < this.rect.top){
+      _bottom = this.rect.top + _lineHeight;
+    }
+    this.rect.setBottom( _bottom );
+  },
+  
+/** = Description
+  * Move function for item by dragging and dropping.
+  *
+  * = Parameters
+  * +_y+:: Y coordinate at the start of drag.
+  *
+  **/
+  dragMove: function(_y){
+    var _lineHeight = Math.floor(this.parent.pxPerHour/2),
+        _top = Math.floor( (0-this.moveDiff+_y)/_lineHeight )*_lineHeight;
+    if(_top<0){_top = 0;}
+    if(_top+this.rect.height>_lineHeight*48){
+      _top = _lineHeight*48 - this.rect.height;
+    }
+    this.rect.offsetTo( this.rect.left, _top );
+  },
+  
+/** = Description
+  * Drag function for item. Decides whether the user wants to create a new
+  * item, resize top, resize bottom or move an existing item.
+  *
+  * = Parameters
+  * +x+:: X coordinate at the start of drag.
+  * +y+:: Y coordinate at the start of drag.
+  *
+  **/
+  drag: function(x,y){
+    var _pageY  = this.parent.pageY(),
+        _y = y - _pageY;
+    if(this.dragMode === 'create'){
+      this.dragCreate(_y);
+    }
+    else if(this.dragMode === 'resize-top'){
+      this.dragResizeTop(_y);
+    }
+    else if(this.dragMode === 'resize-bottom'){
+      this.dragResizeBottom(_y);
+    }
+    else if(this.dragMode === 'move'){
+      this.dragMove(_y);
+    }
+    this.drawRect();
+    return true;
+  },
+  
+/** = Description
+  * Modifies the existing item's coordinates or creates a new one.
+  *
+  * = Parameters
+  * +x+:: X coordinate at the end of drag.
+  * +y+:: Y coordinate at the end of drag.
+  *
+  **/
+  endDrag: function(x,y){
+    var _pxPerHour = Math.floor(this.parent.pxPerHour),
+        _value;
+    if(this.dragMode === 'create'){
+      this.parent.listItemViews.push( this );
+      _value = {
+        'timeBegin': this.rect.top/_pxPerHour,
+        'timeEnd': this.rect.bottom/_pxPerHour,
+        'label': this.label
+      };
+      if(this.parent['editor']){
+        this.parent.editor.createItem( _value );
+      }
+    }
+    else {
+      _value = COMM.Values.clone( this.value );
+      _value['timeBegin'] = this.rect.top/_pxPerHour;
+      _value['timeEnd'] = this.rect.bottom/_pxPerHour;
+      if(this.parent['editor']){
+        this.parent.editor.modifyItem( _value );
+      }
+    }
+    this.setValue( _value );
+    this.dragMode = 'normal';
+    return true;
+  },
+  
+/** = Description
+  * Refreshes the object's label and place on the HTimeSheet.
+  *
+  **/
+  refreshValue: function(){
+    var _value = this.value,
+        _pxPerHour = this.parent.pxPerHour;
+    if((_value instanceof Object) && !(_value instanceof Array)){
+      this.setLabel( _value['label'] );
+      this.rect.setTop( _value['timeBegin'] * _pxPerHour );
+      this.rect.setBottom( _value['timeEnd'] * _pxPerHour );
+      this.drawRect();
+    }
+  }
+});
+
+

data/js/controls/datetime/timesheet_item_edit/timesheet_item_edit.js

@@ -0,0 +1,274 @@
+/*   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
+  ** Editor control for HTimeSheet. Editor can access the HTimeSheetItems 
+  ** on HTimeSheet.
+  ***/
+
+HTimeSheetEditor = HControl.extend({
+  timeSheetItem: false,
+  createId: 0,
+  
+/** = Description
+  * Selects a HTimeSheetItem to edit.
+  *
+  * = Parameters
+  * +_timeSheetItem+:: A HTimeSheetItem to edit.
+  *
+  **/
+  setTimeSheetItem: function(_timeSheetItem){
+    this.timeSheetItem = _timeSheetItem;
+    this.textField.setValue( _timeSheetItem.label );
+  },
+
+/** = Description
+  * Opens HTimeSheetEditor for the selected HTimeSheetItem.
+  *
+  **/
+  show: function(){
+    if(this.timeSheetItem!==false){
+      var _newRect = HRect.nu(this.timeSheetItem.rect);
+      if(_newRect.height < 40){
+        _newRect.setHeight( 40 );
+      }
+      if(_newRect.width < 200){
+        _newRect.setWidth( 200 );
+      }
+      var _timeSheetItemParentRect = this.timeSheetItem.parent.rect;
+      _newRect.offsetBy( _timeSheetItemParentRect.left, _timeSheetItemParentRect.top );
+      this.setRect( _newRect );
+      this.drawRect();
+    }
+    this.base();
+  },
+  
+/** = Description
+  * Hides the HTimeSheetEditor.
+  *
+  **/
+  hide: function(){
+    this.base();
+  },
+  origParent: null,
+
+/** = Description
+  * Creates a new item.
+  *
+  * = Parameters
+  * +_properties+:: Properties for the new item.
+  *
+  **/
+  createItem: function( _properties ){
+    if(_properties['id'] === undefined){
+      this.createId--;
+      _properties['id'] = this.createId;
+    }
+    var _value = COMM.Values.clone( this.value ),
+        _create = _value['create'],
+        i = 0,
+        _item = false;
+    for(;i<_create.length;i++){
+      if(_create[i]['id'] === _properties['id']){
+        _item = _create[i];
+        break;
+      }
+    }
+    if(!_item){
+      _create.push( _properties );
+    }
+    else {
+      for( var _key in _properties ){
+        _item[_key] = _properties[_key];
+      }
+    }
+    this.setValue( _value );
+  },
+  
+/** = Description
+  * Modifies an item.
+  *
+  * = Parameters
+  * +_properties+:: Properties to change.
+  *
+  **/
+  modifyItem: function( _properties ){
+    if(_properties['id'] < 0){
+      this.createItem( _properties );
+    }
+    else {
+      var _value = COMM.Values.clone( this.value ),
+          _modify = _value['modify'],
+          i = 0,
+          _item = false;
+      for(;i<_modify.length;i++){
+        if(_modify[i]['id'] === _properties['id']){
+          _item = _modify[i];
+          break;
+        }
+      }
+      if(!_item){
+        _modify.push( _properties );
+      }
+      else {
+        for( var _key in _properties ){
+          _item[_key] = _properties[_key];
+        }
+      }
+      this.setValue( _value );
+    }
+  },
+
+/** = Description
+  * Deletes an item with id given as parameter.
+  *
+  * = Parameters
+  * +_itemId+:: Id of an item to be deleted.
+  * 
+  **/
+  deleteItem: function( _itemId ){
+    var _value = COMM.Values.clone( this.value );
+    if(_value['delete'].indexOf( _itemId ) === -1){
+      _value['delete'].push( _itemId );
+      this.setValue( _value );
+    }
+  },
+
+/** = Description
+  * Refreshes the values by iterating through value['response'] and checking
+  * the new values from the response array. 
+  *
+  **/
+  refreshValue: function(){
+    var _value = COMM.Values.clone( this.value ),
+        i = 0,
+        _parent = this.origParent?this.origParent:this.parent,
+        _listItemViews = _parent.listItemViews,
+        _response = _value['response'],
+        _item,
+        _itemValue,
+        _responseItem,
+        j, k;
+    for( ; i < _response.length; i++ ){
+      for( j = 0; j < _listItemViews.length; j++ ){
+        _responseItem = _response[i];
+        _item = _listItemViews[j];
+        if( _item.value['id'] === _responseItem['id'] ){
+          _itemValue = COMM.Values.clone( _item.value );
+          if(_responseItem['modify'] !== undefined){
+            for( k in _responseItem['modify'] ){
+              _itemValue[k] = _responseItem['modify'][k];
+            }
+            _item.setValue( _itemValue );
+          }
+        }
+      }
+    }
+    _value['response'] = [];
+    this.setValue( _value );
+  },
+
+/** = Description
+  * Draws ok, delete and cancel buttons.
+  *
+  **/
+  drawSubviews: function(){
+    this.origParent = this.parent;
+    this.remove();
+    this.origParent.parent.addView( this );
+    ELEM.append( this.elemId, this.parent.elemId );
+    this.textField = HTextArea.nu(
+      [0,0,null,20,0,26],
+      this, {
+        value: ''
+      }
+    );
+    this.delButton = HButton.extend({
+      
+    /** = Description
+      * Click function for delete button. Will call delete function on click
+      * for the current item.
+      *
+      **/
+      click: function(){
+        this.parent.hide();
+        var _sheetItem = this.parent.timeSheetItem;
+        if(_sheetItem!==false){
+          this.parent.deleteItem( _sheetItem.value['id'] );
+          _sheetItem.die();
+          var _parent = this.parent.origParent?this.parent.origParent:this.parent.parent;
+          var _sheetIdx = _parent.listItemViews.indexOf( _sheetItem );
+          _parent.listItemViews.splice( _sheetIdx, 1 );
+          this.parent.timeSheetItem = false;
+        }
+      }
+    }).nu(
+      [2,null,60,24,null,0],
+      this, {
+        label: 'Delete',
+        events: {
+          click: true
+        }
+      }
+    );
+    this.okButton = HButton.extend({
+      
+    /** = Description
+      * Click function for okButton will ok the modifications for the current item.
+      *
+      **/
+      click: function(){
+        this.parent.hide();
+        if(this.parent.timeSheetItem!==false){
+          var _label = this.parent.textField.getTextFieldValue(),
+              _id = this.parent.timeSheetItem.value['id'],
+              _data = this.parent.timeSheetItem.value;
+          _data['label'] = _label;
+          this.parent.modifyItem( _data );
+          this.parent.timeSheetItem.setTimeSheetItemLabel( _label );
+          this.parent.timeSheetItem = false;
+        }
+      }
+    }).nu(
+      [null,null,60,24,2,0],
+      this, {
+        label: 'Save',
+        events: {
+          click: true
+        }
+      }
+    );
+    this.cancelButton = HButton.extend({
+    /** = Description
+      * Click function for cancel button will cancel 
+      * the modifications for the current item.
+      *
+      **/
+      click: function(){
+        this.parent.hide();
+        if(this.timeSheetItem!==false){
+          this.parent.timeSheetItem = false;
+        }
+      }
+    }).nu(
+      [null,null,60,24,66,0],
+      this, {
+        label: 'Cancel',
+        events: {
+          click: true
+        }
+      }
+    );
+    this.textField.setStyle('text-align','center');
+    this.textField.setStyle('line-height','12px');
+    this.textField.setStyle('font-size','12px');
+    this.textField.setStyle('font-family','Arial, sans-serif');
+    this.origParent.setEditor( this );
+  }
+});
+