client/js/datetime/timesheet/timesheet.js in rsence-pre-3.0.0.8 vs client/js/datetime/timesheet/timesheet.js in rsence-pre-3.0.0.9
- old
+ new
@@ -6,26 +6,25 @@
};
var//RSence.DateTime
HTimeSheet = HControl.extend({
-
+
debug: false,
-
- localeStrings: HLocale.components.HTimeSheet.strings,
+
componentName: 'timesheet',
markupElemNames: [
'label', 'value', 'timeline'
],
-
+
defaultEvents: {
draggable: true,
click: true,
doubleClick: true,
resize: true
},
-
+
controlDefaults: HControlDefaults.extend({
timeStart: 0, // 1970-01-01 00:00:00
timeEnd: 86399, // 1970-01-01 23:59:59
tzOffset: 0, // timezone offset in seconds; eg: 7200 => UTC+2
itemMinHeight: 16,
@@ -42,57 +41,62 @@
allowClickCreate: false,
iconImage: 'timesheet_item_icons.png',
allowDoubleClickCreate: true,
minDragSize: 5, // minimum amount of pixels dragged required for accepting a drag
hourOffsetTop: -4, // Theme settings; don't enter in options
- constructor: function( _ctrl ){
- if( this.defaultLabel === undefined ){
- this.defaultLabel = _ctrl.localeStrings.newItemLabel;
- }
+ dummyValue: {
+ label: '',
+ start: 0,
+ color: '#000000'
}
}),
-
+
+ customOptions: function( _options ){
+ this.localeStrings = HLocale.components.HTimeSheet.strings;
+ if( _options.defaultLabel === undefined ){ _options.defaultLabel = this.localeStrings.newItemLabel; }
+ },
+
themeSettings: function( _itemOffsetLeft, _itemOffsetTop, _itemOffsetRight, _itemOffsetBottom, _hourOffsetTop ){
if( this.options.hideHours ){
ELEM.addClassName( this.elemId, 'nohours' );
this.options.itemOffsetLeft = 0;
}
else if( _itemOffsetLeft !== undefined ) {
- this.options.itemOffsetLeft = _itemOffsetLeft;
+ this.options.itemOffsetLeft = _itemOffsetLeft;
}
if( _itemOffsetTop !== undefined ) {
- this.options.itemOffsetTop = _itemOffsetTop;
+ this.options.itemOffsetTop = _itemOffsetTop;
}
if( _itemOffsetRight !== undefined ) {
- this.options.itemOffsetRight = _itemOffsetRight;
+ this.options.itemOffsetRight = _itemOffsetRight;
}
if( _itemOffsetBottom !== undefined ) {
- this.options.itemOffsetBottom = _itemOffsetBottom;
+ this.options.itemOffsetBottom = _itemOffsetBottom;
}
if( _hourOffsetTop !== undefined ) {
- this.options.hourOffsetTop = _hourOffsetTop;
+ this.options.hourOffsetTop = _hourOffsetTop;
}
},
-
+
autoLabel: function(){
var
_locale = HLocale.dateTime,
_label = _locale[this.options.autoLabelFn]( this.options.timeStart, this.options.autoLabelFnOptions );
if( this.label !== _label ){
this.label = _label;
this.refreshLabel();
}
},
-
+
clearHours: function(){
for( var i = 0; i < this.hourItems.length; i++ ){
ELEM.del( this.hourItems[i] );
}
},
-
+
drawHours: function(){
-
+
var
_parentElemId = this.markupElemIds.timeline,
_dateStart = new Date( this.options.timeStart * 1000 ),
_dateEnd = new Date( this.options.timeEnd * 1000 ),
_hourStart = _dateStart.getUTCHours(),
@@ -112,15 +116,15 @@
_lineTop,
i,
_pxPerNotch = _pxPerHour / _notchesPerHour,
_notchItem,
_notchTop;
-
+
ELEM.setStyle( _parentElemId, 'visibility', 'hidden', true );
-
+
ELEM.setStyle( this.markupElemIds.value, 'bottom', _bottomPos+'px' );
-
+
if( this['hourItems'] !== undefined ){
this.clearHours();
}
this.itemOptions = {
notchHeight: _pxPerNotch,
@@ -150,44 +154,44 @@
_notchTop = Math.round(_lineTop + (_pxPerNotch*i));
ELEM.setStyle( _notchItem, 'top', _notchTop+'px' );
this.hourItems.push( _notchItem );
}
}
-
+
ELEM.setStyle( this.markupElemIds.timeline, 'visibility', 'inherit' );
-
+
},
-
+
// extra hook for refreshing; updates label and hours before doing common things
refresh: function(){
if( this.drawn ){
if( this.options.autoLabel ){
this.autoLabel();
}
this.drawHours();
}
this.base();
},
-
+
// set the timezone offset (in seconds)
setTzOffset: function( _tzOffset ){
this.options.tzOffset = _tzOffset;
this.refresh();
},
-
+
// set the start timestamp of the timesheet
setTimeStart: function( _timeStart ){
this.options.timeStart = _timeStart;
this.refresh();
},
-
+
// set the end timestamp of the timesheet
setTimeEnd: function( _timeEnd ){
this.options.timeEnd = _timeEnd;
this.refresh();
},
-
+
// sets the range of timestams of the timesheet
setTimeRange: function( _timeRange ){
if( (_timeRange instanceof Array) && (_timeRange.length === 2) ){
this.setTimeStart( _timeRange[0] );
this.setTimeEnd( _timeRange[1] );
@@ -199,11 +203,11 @@
){
this.setTimeStart( _timeRange.timeStart );
this.setTimeEnd( _timeRange.timeEnd );
}
},
-
+
// sets the timestamp of the timesheet
setDate: function( _date ){
var
_range = (this.options.timeEnd - this.options.timeStart),
_newTimeRange = [
@@ -211,25 +215,19 @@
_date + _range
];
this.setTimeRange( _newTimeRange );
this.refresh();
},
-
+
// draw decorations
drawSubviews: function(){
this.drawHours();
var
_options = this.options,
_minDuration = Math.round(3600/_options.notchesPerHour),
- _dummyValue = {
- // id: 'new',
- label: '',
- start: 0,
- duration: _minDuration,
- // locked: false,
- color: '#cc0000'
- };
+ _dummyValue = HVM.clone( this.options.dummyValue );
+ _dummyValue['duration'] = _minDuration;
this.dragPreviewRect = this.rectFromValue({start:_options.timeStart,duration:_minDuration});
this.minDuration = _minDuration;
this.dragPreview = HTimeSheetItem.nu(
this.dragPreviewRect,
this, {
@@ -239,11 +237,11 @@
displayTime: this.options.itemDisplayTime
}
);
this.dragPreview.setStyleOfPart('state','color','#fff');
},
-
+
// event listener for clicks, simulates double clicks in case of not double click aware browser
click: function( x, y, b ){
var
prevClickTime = false,
notCreated = !this.clickCreated && !this.doubleClickCreated && !this.dragCreated;
@@ -281,11 +279,11 @@
this.clickCreated = false;
this.doubleClickCreated = false;
this.prevClickTime = false;
}
},
-
+
// creates an item on click
clickCreate: function(x,y){
var
_startTime = this.pxToTime( y-this.pageY() ),
_endTime = _startTime + this.minDuration;
@@ -297,11 +295,11 @@
}
else {
this.dragPreview.hide();
}
},
-
+
// event listener for double clicks
doubleClick: function(x,y){
this.prevClickTime = false;
this.doubleClickCreated = false;
var notCreated = !this.clickCreated && !this.doubleClickCreated && !this.doubleClickSimCreated && !this.dragCreated;
@@ -318,11 +316,11 @@
// console.log('no double click create');
this.clickCreated = false;
}
this.doubleClickSimCreated = false;
},
-
+
// update the preview area
refreshDragPreview: function( _startTime, _endTime ){
this.dragPreviewRect.setTop( this.timeToPx( _startTime, true ) );
this.dragPreviewRect.setBottom( this.timeToPx( _endTime, true ) );
if( this.dragPreviewRect.height < this.options.itemMinHeight ){
@@ -331,22 +329,22 @@
this.dragPreview.drawRect();
this.dragPreview.value.start = _startTime;
this.dragPreview.value.duration = _endTime - _startTime;
this.dragPreview.refreshValue();
},
-
+
// drag & drop event listeners, used for dragging new timesheet items
startDrag: function( x, y, b ){
// console.log('st');
this._startDragY = y;
this.startDragTime = this.pxToTime( y-this.pageY() );
this.refreshDragPreview( this.startDragTime, this.startDragTime + this.minDuration );
this.dragPreview.bringToFront();
this.dragPreview.show();
return true;
},
-
+
drag: function( x, y, b ){
// console.log('dr');
var
_dragTime = this.pxToTime( y-this.pageY() ),
_startTime,
@@ -360,11 +358,11 @@
_startTime = this.startDragTime;
}
this.refreshDragPreview( _startTime, _endTime );
return true;
},
-
+
endDrag: function( x, y, b ){
// console.log('ed');
var
_dragTime = this.pxToTime( y-this.pageY() ),
_minDistanceSatisfied = Math.abs( this._startDragY - y ) >= this.options.minDragSize;
@@ -390,11 +388,11 @@
this.click( x, y, b );
return true;
}
return false;
},
-
+
// a resize triggers refresh, of which the important part is refreshValue, which triggers redraw of the time sheet items
resize: function(){
this.base();
this.refresh();
},
@@ -435,16 +433,16 @@
_editor.show();
return true;
}
return false;
},
-
+
/** = Description
* Sets the editor given as parameter as the editor of instance.
*
* = Parameters
- * +_editor+::
+ * +_editor+::
*
**/
setEditor: function( _editor ){
this.editor = _editor;
},
@@ -456,11 +454,11 @@
die: function(){
this.editor && this.editor.die();
this.editor = null;
this.base();
},
-
+
// converts pixels to time
pxToTime: function( _px, _noSnap ){
var
_options = this.options,
_timeStart = _options.timeStart,
@@ -485,27 +483,27 @@
return Math.round( _timeSecs );
},
// converts time to pixels
timeToPx: function( _time, _snap ){
-
+
if( _snap ){
_time = this.snapTime( _time );
}
-
+
var
_options = this.options,
_timeStart = _options.timeStart,
_timeEnd = _options.timeEnd;
-
+
if( _time < _timeStart ){
_time = _timeStart;
}
if( _time > _timeEnd ){
_time = _timeEnd;
}
-
+
var
_timeRange = _timeEnd - _timeStart,
_itemOptions = this.itemOptions,
_top = _itemOptions.offsetTop,
_height = _itemOptions.height,
@@ -565,11 +563,11 @@
return _item;
},
// calls createTimeSheetItem with each value of the timesheet value array
drawTimeSheetItems: function(){
-
+
var
_data = this.value,
i = 0,
_value,
_item,
@@ -633,26 +631,26 @@
_findOverlapCount: function( _items ){
var
_overlaps = [],
_testRects = this._getTestRects( _items ),
i,j;
-
+
for( i = 0; i < _items.length; i++){
_overlaps[i] = 0;
}
-
+
for( i = 0; i < _items.length - 1; i++ ){
for( j = i + 1; j < _items.length; j++ ){
if( _items[i].rect.intersects( _testRects[j] ) ){
_overlaps[i] += 1;
_overlaps[j] += 1;
}
}
}
return Math.max.apply( Math, _overlaps );
},
-
+
_getTestRects: function( _items ){
var _rects = [];
for( var i = 0; i < _items.length; i++){
_rects[i] = HRect.nu( _items[i].rect );
_rects[i].insetBy( 1, 1 );
@@ -706,11 +704,11 @@
_optimalColAndLength,
_col,
_colWidth,
_overlaps,
_testRects;
-
+
// No overlapping; nothing to do
if( _overlapCount === 0 ){
return false;
}
@@ -830,11 +828,11 @@
/** = Description
* Redraws and refreshes the values on timesheet.
*
**/
refreshValue: function(){
-
+
if(!this.itemOptions){
return;
}
// optimization that ensures the rect and previous value are different before redrawing
@@ -848,7 +846,7 @@
this.dragPreview.hide();
this._prevSum = _shaSum;
this.drawTimeline();
}
}
-
+
});