rsence 2.1.11 → 2.2.0

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

@@ -3,40 +3,71 @@
 .timesheet_item_label,
 .timesheet_item_resize_top,
 .timesheet_item_move,
+.timesheet_item_time,
+.timesheet_item_icons,
 .timesheet_item_resize_bottom {
   position: absolute;
   left: 0px; right: 0px;
 }
 .timesheet_item {
   top: 0px; bottom: 0px;
-  border: 1px solid #c00;
-  background-color: #c66;
+  border: 1px solid #ccc;
+  border-radius: 7px;
   opacity: 0.75;
 }
-.active .timesheet_item {
-  opacity: 1.0;
+.timesheet_item_time,
+.timesheet_item_label {
+  font-size: 12px;
+  color: #333;
+  font-family: Helvetica, Arial, sans-serif;
+}
+.timesheet_item_time {
+  top: 0px; height: 12px; line-height: 12px;
+  text-indent: 4px; padding-top: 2px;
+  font-weight: bold;
+}
+.active > .timesheet_item .timesheet_item_time {
+  border-radius: 7px 7px 0 0;
+  border-bottom: 1px solid #000;
+/*  opacity: 0.2;*/
+}
+.active > .timesheet_item {
+  border-color: #000;
+  opacity: 1;
 }
 .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;
+  top: -6px; height: 12px;
 }
 .timesheet_item_resize_top {
-  top: 0px; height: 3px;
+  top: 0px; height: 6px;
   cursor: n-resize;
 }
 .timesheet_item_move {
-  top: 3px; bottom: 3px;
+  top: 6px; bottom: 6px;
   cursor: move;
 }
 .timesheet_item_resize_bottom {
-  bottom: 0px; height: 3px;
+  bottom: 0px; height: 6px;
   cursor: s-resize;
 }
+.timesheet_item_icons {
+  top: 0px; height: 16px;
+}
+.timesheet_item_icon {
+  position: absolute;
+  top: 0px; width: 16px; height: 16px;
+  background-position: 0px 0px;
+  background-image: url(#{this.getThemeGfxFile('/timesheet_item_icons.png')});
+}
+
+.locked .timesheet_item_move,
+.locked .timesheet_item_resize_bottom,
+.locked .timesheet_item_resize_top {
+  cursor: pointer;
+}

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

@@ -1,8 +1,10 @@
-<div class="timesheet_item">
+<div class="timesheet_item" id="bg#{_ID}">
+  <div class="timesheet_item_time" id="state#{_ID}"></div>
   <div class="timesheet_item_middle">
     <div class="timesheet_item_label" id="label#{_ID}">#{this.label}</div>
   </div>
+  <div class="timesheet_item_icons" id="icons#{_ID}"></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>
+</div>

data/js/datetime/timesheet_item/timesheet_item.js

@@ -13,296 +13,200 @@ var//RSence.DateTime
 HTimeSheetItem = HControl.extend({
   
   componentName: 'timesheet_item',
-  
-  /* Which mode the component is in. When created by dragging, acts in 'create' mode, otherwise is 'normal'. Can be overridden in options. */
-  dragMode: 'create',
-  
-  /* The previous coordinate. Used to detect double-drag as double-click */
-  prevXY: [0,0],
-  
-  /* The time at the previous coordinate. Used to detect double-drag as double-click. */
-  prevXYTime: 0,
-  
-  defaultEvents: {
-    draggable: true,
-    click: true,
-    doubleClick: true
-  },
+  markupElemNames: ['bg', 'label', 'state', 'icons', 'value', 'subview'],
   
   controlDefaults: HControlDefaults.extend({
-    dragMode: 'create',
-    constructor: function(_ctrl){
-      _ctrl.dragMode = this.dragMode;
-    }
+    displayTime: true
   }),
   
-/** = 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 ) { // doubleClick
-        return true;
-      }
-      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;
-  },
-  
-  doubleClick: function(x,y){
-    if( this.parent['editor'] ){
-      var _editor = this.parent.editor;
-      _editor.setTimeSheetItem(this);
-      _editor.bringToFront();
-      _editor.show();
-      return true;
-    }
-    return false;
-  },
-  
-/** = Description
-  * Label setter function.
-  *
-  * = Parameters
-  * +_label+:: New label
-  *
-  **/
-  setTimeSheetItemLabel: function(_label){
-    this.label = _label;
-    this.refreshLabel();
+  drawIcon: function( _iconOrder, _iconId ){
+    var
+    _iconElemId = ELEM.make( this.markupElemIds.icons, 'div' );
+    ELEM.addClassName( _iconElemId, 'timesheet_item_icon' );
+    ELEM.setStyle( _iconElemId, 'right', ((_iconOrder*16)+_iconOrder)+'px' );
+    ELEM.setStyle( _iconElemId, 'background-position', '0px '+(_iconId*-16)+'px' );
+    return _iconElemId;
   },
   
-/** = 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;
+  clearAllIcons: function(){
+    if(this.icons instanceof Array){
+      for( var i=0; i < this.icons.length; i++ ){
+        ELEM.del( this.icons[i] );
       }
     }
-    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);
+    this.icons = [];
   },
   
-/** = 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 );
+  die: function(){
+    this.clearAllIcons();
+    this.icons = null;
+    this.base();
   },
   
-/** = 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;
+  refreshState: function( _start, _duration ){
+    if(!this.options.displayTime){
+      return;
     }
-    this.rect.setBottom( _bottom );
+    var
+    _startTime = _start || this.value.start,
+    _endTime   = _startTime + ( _duration || this.value.duration ),
+    _locale    = HLocale.dateTime,
+    _stateText = _locale.formatTime( _startTime ) + _locale.strings.rangeDelimitter + _locale.formatTime( _endTime );
+    ELEM.setHTML( this.markupElemIds.state, _stateText );
   },
   
-/** = 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;
+  refreshValue: function(){
+    if ( !(this.value instanceof Object) ){
+      return;
     }
-    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);
+    this.drawRect();
+    if ( this.value.color ) {
+      this.setStyleOfPart( 'bg', 'background-color', this.value.color );
     }
-    else if(this.dragMode === 'resize-top'){
-      this.dragResizeTop(_y);
+    else {
+      this.setStyleOfPart( 'bg', 'background-color', '#999' );
     }
-    else if(this.dragMode === 'resize-bottom'){
-      this.dragResizeBottom(_y);
+    if ( this.value.label ) {
+      this.setLabel( this.value.label );
     }
-    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,
-    _yEquals = (Math.round(this.prevXY[1]/4) === Math.round(y/4));
-    if(_yEquals){ // nothing moved, just return.
-      return true;
-    }
-    if(this.dragMode === 'create'){
-      this.parent.listItemViews.push( this );
-      _value = {};
-      this._setValueTop( _value );
-      this._setValueBottom( _value );
-      this._setValueLabel( _value );
-      if(this.parent['editor']){
-        this.parent.editor.createItem( _value );
-      }
+    if ( this.value.locked ) {
+      ELEM.addClassName( this.elemId, 'locked' );
     }
     else {
-      _value = COMM.Values.clone( this.value );
-      this._setValueTop( _value );
-      this._setValueBottom( _value );
-      if(this.parent['editor']){
-        this.parent.editor.modifyItem( _value );
+      ELEM.removeClassName( this.elemId, 'locked' );
+    }
+    this.refreshState();
+    this.clearAllIcons();
+    if( this.value.icons instanceof Array ){
+      for( var i = 0; i < this.value.icons.length; i++ ){
+        this.icons.push( this.drawIcon( i, this.value.icons[i] ) );
       }
     }
-    this.setValue( _value );
-    this.dragMode = 'normal';
-    return true;
   },
   
-  _setValueTop: function( _value ) {
-    _value['timeBegin'] = this.rect.top/this.parent.pxPerHour;
+  click: function(){
+    this.bringToFront();
   },
   
-  _setValueBottom: function( _value ) {
-    _value['timeEnd'] = this.rect.bottom/this.parent.pxPerHour;
+  doubleClick: function( x, y ){
+    this.bringToFront();
+    var _time = this.parent.pxToTime( y-this.parent.pageY() );
+    this.parent.activateEditor( this );
   },
   
-  _setValueLabel: function( _value ) {
-    _value['label'] = this.label;
+  dragMode: 0, // none
+  _isValueValidForDrag: function(){
+    return (this.value instanceof Object) && (!this.value.locked);
   },
-  
-  _getValueLabel: function( _value ){
-    return _value.label;
-  },
-  
-  _getValueTop: function( _value ){
-    return (_value.timeBegin * this.parent.pxPerHour)+1;
+  startDrag: function( x, y ){
+    this.bringToFront();
+    if( this._isValueValidForDrag() ){
+      var
+      _topY = y-this.pageY(),
+      _bottomY = this.rect.height - _topY,
+      _resizeTop = ( _topY >= 0 && _topY <= 6 ),
+      _resizeBottom = ( _bottomY >= 0 && _bottomY <= 6 ),
+      _move = ( _topY > 6 && _bottomY > 6 );
+      if( _resizeTop ){
+        this.dragMode = 2; // resize-top
+      }
+      else if ( _resizeBottom ){
+        this.dragMode = 3; // resize-bottom
+      }
+      else if ( _move ){
+        this.dragMode = 1; // move
+      }
+      else {
+        this.dragMode = 0; // none
+      }
+      if( this.dragMode === 0 ){
+        this.originY = false;
+      }
+      else {
+        var
+        _originY   = y-this.parent.pageY(),
+        _parentY   = this.parent.pageY(),
+        _originTimeStart = this.value.start,
+        _originTimeEnd   = _originTimeStart + this.value.duration;
+        this.originY = _originY;
+        this.originTopPx = this.rect.top;
+        this.originBottomPx = this.rect.bottom;
+        this.originTimeStart = _originTimeStart;
+        this.originTimeEnd   = _originTimeEnd;
+        this.originDuration  = _originTimeEnd - _originTimeStart;
+        this.dragTimeStart = _originTimeStart;
+        this.dragDuration  = this.originDuration;
+      }
+    }
   },
   
-  _getValueBottom: function( _value ){
-    return (_value.timeEnd * this.parent.pxPerHour)-2;
+  drag: function( x, y ){
+    if( this._isValueValidForDrag() && (this.dragMode !== 0) ){
+      y -= this.parent.pageY();
+      var
+      _movePx    = y - this.originY,
+      _topPx     = this.parent.snapPx( this.originTopPx + _movePx ),
+      _parentY   = this.parent.pageY(),
+      _bottomPx, _minBottomPx, _maxBottomPx, _maxTopPx, _timeStart, _timeEnd, _duration;
+      if( this.dragMode === 1 ){ // move
+        _maxTopPx  = this.parent.timeToPx( this.parent.options.timeEnd ) - this.rect.height;
+        if( _topPx > _maxTopPx ){
+          _topPx = _maxTopPx;
+        }
+        _timeStart = this.parent.pxToTime(_topPx);
+        _duration  = this.originDuration;
+        this.rect.offsetTo( this.rect.left, _topPx );
+        this.drawRect();
+        this.dragTimeStart = _timeStart;
+        this.dragDuration  = _duration;
+      }
+      else if( this.dragMode === 2 ){ // resize-top
+        _maxTopPx  = this.parent.timeToPx( this.originTimeEnd - this.parent.minDuration );
+        if( _topPx > _maxTopPx ){
+          _topPx = _maxTopPx;
+        }
+        _timeStart = this.parent.pxToTime(_topPx);
+        _timeEnd   = this.originTimeEnd;
+        if( (this.rect.bottom - _topPx) < this.parent.options.itemMinHeight ){
+          _topPx = this.rect.bottom - this.parent.options.itemMinHeight;
+        }
+        this.rect.setTop( _topPx );
+        this.drawRect();
+        this.dragTimeStart = _timeStart;
+        this.dragDuration  = _timeEnd - _timeStart;
+      }
+      else if( this.dragMode === 3 ){ // resize-top
+        _minBottomPx  = this.parent.timeToPx( this.originTimeStart + this.parent.minDuration  );
+        _bottomPx     = this.parent.snapPx( this.originBottomPx + _movePx );
+        if( _bottomPx < _minBottomPx ){
+          _bottomPx = _minBottomPx;
+        }
+        _timeStart = this.originTimeStart;
+        _timeEnd   = this.parent.pxToTime(_bottomPx);
+        if( _bottomPx - this.rect.top < this.parent.options.itemMinHeight ){
+          _bottomPx = this.rect.top + this.parent.options.itemMinHeight;
+        }
+        this.rect.setBottom( _bottomPx );
+        this.drawRect();
+        this.dragTimeStart = _timeStart;
+        this.dragDuration  = _timeEnd - _timeStart;
+      }
+      this.refreshState( this.dragTimeStart, this.dragDuration );
+    }
   },
   
-/** = Description
-  * Refreshes the object's label and place on the HTimeSheet.
-  *
-  **/
-  refreshValue: function(){
-    if ( HVM.type(this.value) === 'h' ){
+  endDrag: function( x, y ){
+    if( this._isValueValidForDrag() && (this.dragMode !== 0) ){
       var
-      _label  = this._getValueLabel( this.value ),
-      _top    = this._getValueTop( this.value ),
-      _bottom = this._getValueBottom( this.value ),
-      _minHeight = this.parent.options.itemMinHeight;
-      this.setLabel( _label );
-      if( (_bottom - _top) < _minHeight ){
-        _bottom = _top + _minHeight;
+      _startChanged = ( this.dragTimeStart !== this.originTimeStart ) && ( this.dragTimeStart !== this.value.start ),
+      _durationChanged = ( this.dragDuration !== this.originDuration ) && ( this.dragDuration !== this.value.duration );
+      if( _startChanged || _durationChanged ){
+        if( this.parent['editor'] ){
+          var _modValue = { id: this.value.id, start: this.dragTimeStart, duration: this.dragDuration, label: this.value.label };
+          this.parent.editor.modifyItem( _modValue );
+        }
       }
-      this.rect.setTop( _top );
-      this.rect.setBottom( _bottom );
-      this.drawRect();
     }
   }
+  
 });
-
-