tine20/Calendar/js/DaysViewEventUI.js
Rama main · réplica de lectura del repositorio original.
/*
* Tine 2.0
*
* @license http://www.gnu.org/licenses/agpl.html AGPL Version 3
* @author Cornelius Weiss <c.weiss@metaways.de>
* @copyright Copyright (c) 2007-2016 Metaways Infosystems GmbH (http://www.metaways.de)
*/
Ext.ns('Tine.Calendar');
Tine.Calendar.DaysViewEventUI = Ext.extend(Tine.Calendar.EventUI, {
clearDirty: function() {
Tine.Calendar.DaysViewEventUI.superclass.clearDirty.call(this);
Ext.each(this.getEls(), function(el) {
el.setStyle({'border-left-style': 'solid'});
});
},
/**
* get diff of resizeable
*
* @param {Ext.Resizeable} rz
*/
getRzInfo: function(rz, width, height) {
var rzInfo = {};
var event = rz.event;
var view = event.view;
// NOTE proxy might be gone after resize
var box = rz.proxy.getBox();
var width = width ? width: box.width;
var height = height? height : box.height;
var originalDuration = (event.get('dtend').getTime() - event.get('dtstart').getTime()) / Date.msMINUTE;
if(event.get('is_all_day_event')) {
var dayWidth = Ext.fly(view.wholeDayArea).getWidth() / view.numOfDays;
rzInfo.diff = Math.round((width - rz.originalWidth) / dayWidth);
} else {
rzInfo.diff = view.getHeightMinutes(height - rz.originalHeight);
// neglegt diffs due to borders etc.
rzInfo.diff = Math.ceil(rzInfo.diff/view.timeIncrement) * view.timeIncrement;
}
rzInfo.duration = originalDuration + rzInfo.diff;
if(event.get('is_all_day_event')) {
rzInfo.dtend = event.get('dtend').add(Date.DAY, rzInfo.diff);
} else {
rzInfo.dtend = event.get('dtstart').add(Date.MINUTE, rzInfo.duration);
}
return rzInfo;
},
markDirty: function() {
Tine.Calendar.DaysViewEventUI.superclass.markDirty.call(this);
Ext.each(this.getEls(), function(el) {
el.setStyle({'border-left-style': 'dashed'});
});
},
render: function(view) {
Tine.Calendar.DaysViewEventUI.superclass.render.call(this, view);
this.startColNum = view.getColumnNumber(this.dtStart);
this.endColNum = view.getColumnNumber(this.dtEnd);
// skip dates not in our diplay range
if (this.endColNum < 0 || this.startColNum > view.numOfDays-1) {
return;
}
var registry = this.event.get('is_all_day_event') ? view.parallelWholeDayEventsRegistry : view.parallelScrollerEventsRegistry;
var position = registry.getPosition(this.event);
var maxParallels = registry.getMaxParalles(this.dtStart, this.dtEnd);
if (this.event.get('is_all_day_event')) {
this.renderAllDayEvent(view, maxParallels, position);
} else {
this.renderScrollerEvent(view, maxParallels, position);
}
var ids = Tine.Tinebase.data.Clipboard.getIds('Calendar', 'Event');
if (ids.indexOf(this.event.get('id')) > -1) {
this.markDirty(true);
} else if (this.event.dirty) {
// the event was selected before
this.onSelectedChange(true);
}
this.rendered = true;
},
renderAllDayEvent: function(view, parallels, pos) {
// lcocal COPY!
var extraCls = this.extraCls;
var offsetWidth = Ext.fly(view.wholeDayArea).getWidth();
//var width = Math.round(offsetWidth * (this.dtEnd.getTime() - this.dtStart.getTime()) / (view.numOfDays * Date.msDAY)) -5;
//var left = Math.round(offsetWidth * (this.dtStart.getTime() - view.startDate.getTime()) / (view.numOfDays * Date.msDAY));
var width = Math.floor(1000 * (this.dtEnd.getTime() - this.dtStart.getTime()) / (view.numOfDays * Date.msDAY) -5) /10;
var left = 100 * (this.dtStart.getTime() - view.startDate.getTime()) / (view.numOfDays * Date.msDAY);
if (left < 0) {
width = width + left;
left = 0;
extraCls = extraCls + ' cal-daysviewpanel-event-cropleft';
}
if (left + width > offsetWidth) {
width = offsetWidth - left;
extraCls = extraCls + ' cal-daysviewpanel-event-cropright';
}
var domId = Ext.id() + '-event:' + this.event.get('id');
this.domIds.push(domId);
var eventEl = view.templates.wholeDayEvent.insertFirst(view.wholeDayArea, {
id: domId,
tagsHtml: Tine.Tinebase.common.tagsRenderer(this.event.get('tags')),
summary: this.event.getTitle(),
startTime: this.dtStart.format('H:i'),
extraCls: extraCls,
color: this.colorSet.color,
bgColor: this.colorSet.light,
textColor: this.colorSet.text,
zIndex: 100,
width: width +'%',
height: '15px',
left: left + '%',
top: pos * 18 + 'px',//'1px'
statusIcons: this.statusIcons
}, true);
if (this.event.dirty) {
eventEl.setStyle({'border-left-style': 'dashed'});
eventEl.setOpacity(0.5);
}
if (! (this.endColNum > view.numOfDays) && this.event.get('editGrant') && !view.readOnly) {
this.resizeable = new Ext.Resizable(eventEl, {
handles: 'e',
disableTrackOver: true,
dynamic: true,
//dynamic: !!this.event.isRangeAdd,
widthIncrement: Math.round(offsetWidth / view.numOfDays),
minWidth: Math.round(offsetWidth / view.numOfDays),
listeners: {
scope: view,
resize: view.onEventResize,
beforeresize: view.onBeforeEventResize
}
});
}
//console.log([eventEl.dom, parallels, pos])
},
renderScrollerEvent: function(view, parallels, pos) {
var mainBodyHeight = view.getMainBodyHeight();
for (var currColNum=this.startColNum; currColNum<=this.endColNum; currColNum++) {
if (currColNum < 0 || currColNum >= view.numOfDays) {
continue;
}
var domId = Ext.id() + '-event:' + this.event.get('id'),
extraCls = this.extraCls,
top = view.getTimeOffsetPct(this.dtStart),
height = this.startColNum == this.endColNum ?
view.getTimeHeightPct(this.dtStart, this.dtEnd) :
view.getTimeOffsetPct(this.dtEnd),
isShortEvent = (height * mainBodyHeight/100) < 24;
this.domIds.push(domId);
if (currColNum != this.startColNum) {
top = 0;
extraCls = extraCls + ' cal-daysviewpanel-event-croptop';
}
if (this.endColNum != currColNum) {
height = view.getTimeHeightPct(this.dtStart, this.dtStart.add(Date.DAY, 1));
extraCls = extraCls + ' cal-daysviewpanel-event-cropbottom';
}
var eventEl = view.templates.event.append(view.getDateColumnEl(currColNum), {
id: domId,
summary: isShortEvent ? '' : this.event.getTitle(),
tagsHtml: isShortEvent ? '' : Tine.Tinebase.common.tagsRenderer(this.event.get('tags')),
startTime: isShortEvent ? this.dtStart.format('H:i') + ' ' + this.event.getTitle() : this.dtStart.format('H:i'),
extraCls: extraCls,
color: this.colorSet.color,
bgColor: this.colorSet.light,
textColor: this.colorSet.text,
infoColors: this.createBorderColors(this.infoBarColors),
zIndex: 100,
height: height + '%',
left: Math.round(pos * 90 * 1/parallels) + '%',
width: Math.round(90 * 1/parallels) + '%',
top: top + '%',
statusIcons: this.statusIcons
}, true);
if (this.event.dirty) {
eventEl.setStyle({'border-left-style': 'dashed'});
eventEl.setOpacity(0.5);
}
if (currColNum == this.endColNum && this.event.get('editGrant') && !view.readOnly) {
this.resizeable = new Ext.Resizable(eventEl, {
handles: 's',
disableTrackOver: true,
dynamic: true,
minHeight: view.getTimeOffset(view.timeGranularity),
heightIncrement: view.getTimeOffset(view.timeGranularity),
resizeElement: function() {
return this.proxy.getBox();
},
listeners: {
scope: view,
resize: view.onEventResize,
beforeresize: view.onBeforeEventResize
}
});
}
}
},
createBorderColors: function (colors) {
if(colors.length === 0) {
return 'linear-gradient(to bottom, rgb(210, 210, 210) 0%, rgb(210, 210, 210) 100%)';
}
let out = 'linear-gradient(to bottom';
let pct = 100 / colors.length;
let c = 0;
_.forEach(colors, function (color) {
color = color.replace('#', '');
let r = parseInt(color.substr(0,2), 16),
g = parseInt(color.substr(2,2), 16),
b = parseInt(color.substr(4,2), 16),
rgb = 'rgb('+r+', '+g+', '+b+')';
out += ', '+rgb+' '+(c*pct)+'%';
c++;
out += ', '+rgb+' '+(c*pct)+'%';
});
return out + ')';
},
onSelectedChange: function(state){
Tine.Calendar.MonthViewEventUI.superclass.onSelectedChange.call(this, state);
var style = {
'background-color': state ? this.colorSet.color : this.colorSet.light,
'color': state ? this.colorSet.text: '#000000'
};
Ext.each(this.getEls(), function(el) {
el.setStyle(style);
el.select('div[class^=cal-daysviewpanel-event-header]').setStyle(style);
el.select('.cal-status-icon').each((img) => {
let status = img.dom.className.match(/([-a-zA-Z]+)-(?:black|white)/)[1];
img.removeClass([status + '-black', status + '-white']);
img.addClass(status + (style.color === '#FFFFFF' ? '-white' : '-black'));
});
}, this);
}
});