File alloy-ui/src/aui-scheduler/js/aui-scheduler-event-recorder.js
/**
* The Scheduler Component
*
* @module aui-scheduler
* @submodule aui-scheduler-event-recorder
*/
var Lang = A.Lang,
isObject = Lang.isObject,
isString = Lang.isString,
isUndefined = Lang.isUndefined,
_serialize = A.IO.prototype._serialize,
DateMath = A.DataType.DateMath,
getCN = A.getClassName,
CSS_FORM_CONTROL = getCN('form', 'control'),
CSS_SCHEDULER_EVENT = getCN('scheduler-event'),
CSS_SCHEDULER_EVENT_RECORDER = getCN('scheduler-event', 'recorder'),
CSS_SCHEDULER_EVENT_RECORDER_CONTENT = getCN('scheduler-event', 'recorder', 'content'),
CSS_SCHEDULER_EVENT_RECORDER_POP_OVER = getCN('scheduler-event', 'recorder', 'popover'),
TPL_FORM = '<form class="' + 'scheduler-event-recorder-form' + '" id="schedulerEventRecorderForm"></form>',
TPL_BODY_CONTENT = '<input type="hidden" name="startDate" value="{startDate}" />' +
'<input type="hidden" name="endDate" value="{endDate}" />' +
'<label class="' + 'scheduler-event-recorder-date' + '">{date}</label>',
TPL_HEADER_CONTENT = '<input class="' + [CSS_SCHEDULER_EVENT_RECORDER_CONTENT, CSS_FORM_CONTROL]
.join(' ') + '" name="content" value="{content}" />';
/**
* A base class for `SchedulerEventRecorder`.
*
* @class A.SchedulerEventRecorder
* @extends A.SchedulerEvent
* @param {Object} config Object literal specifying widget configuration
* properties.
* @constructor
*/
var SchedulerEventRecorder = A.Component.create({
/**
* Static property provides a string to identify the class.
*
* @property NAME
* @type {String}
* @static
*/
NAME: 'scheduler-event-recorder',
/**
* Static property used to define the default attribute
* configuration for the `SchedulerEventRecorder`.
*
* @property ATTRS
* @type {Object}
* @static
*/
ATTRS: {
/**
* Determines whether a new event will take place all day. When enabled,
* the event will not contain 24-hour clock date inputs.
*
* @attribute allDay
* @default false
* @type {Boolean}
*/
allDay: {
value: false
},
/**
* Determines the content of this Scheduler event recorder's body
* section.
*
* @attribute content
*/
content: {},
/**
* Contains the duration of an `event` in minutes.
*
* @attribute duration
* @default 60
* @type {Number}
*/
duration: {
value: 60
},
/**
* Contains the default date format for an `event`.
*
* @attribute dateFormat
* @default '%a, %B %d,'
* @type {String}
*/
dateFormat: {
validator: isString,
value: '%a, %B %d'
},
/**
* A scheduler `event` is the wrapper object that contains an `event`
* title, start and end times and a description.
*
* @attribute event
*/
event: {},
/**
* Contains the scheduler event recorder's `popover` instance.
*
* @attribute popover
* @type {Object}
*/
popover: {
setter: '_setPopover',
validator: isObject,
value: {}
},
/**
* Collection of strings used to label elements of the UI.
* This attribute defaults to `{}` unless the attribute is set.
* When this attribute is set, the passed value merges with a
* pseudo-default collection of strings.
*
* @attribute strings
* @default {}
* @type {Object}
*/
strings: {
value: {},
setter: function(val) {
return A.merge({
'delete': 'Delete',
'description-hint': 'e.g., Dinner at Brian\'s',
cancel: 'Cancel',
description: 'Description',
edit: 'Edit',
save: 'Save',
when: 'When'
},
val || {}
);
},
validator: isObject
},
/**
* Contains the `SchedulerEventRecorder`'s body template.
*
* @attribute bodyTemplate
* @default ''
* @type {String}
*/
bodyTemplate: {
value: TPL_BODY_CONTENT
},
/**
* Contains the `SchedulerEventRecorder`'s header template.
*
* @attribute headerTemplate
* @type {String}
*/
headerTemplate: {
value: TPL_HEADER_CONTENT
}
},
/**
* Static property used to define which component it extends.
*
* @property EXTENDS
* @type {Object}
* @static
*/
EXTENDS: A.SchedulerEvent,
prototype: {
/**
* Construction logic executed during `SchedulerEventRecorder`
* instantiation. Lifecycle.
*
* @method initializer
* @protected
*/
initializer: function() {
var instance = this;
instance.get('node').addClass(CSS_SCHEDULER_EVENT_RECORDER);
instance.publish('cancel', {
defaultFn: instance._defCancelEventFn
});
instance.publish('delete', {
defaultFn: instance._defDeleteEventFn
});
instance.publish('edit', {
defaultFn: instance._defEditEventFn
});
instance.publish('save', {
defaultFn: instance._defSaveEventFn
});
instance.after('eventChange', instance._afterEventChange);
instance.after('schedulerChange', instance._afterSchedulerChange);
instance.popover = new A.Popover(instance.get('popover'));
instance.popover.after('visibleChange', A.bind(instance._afterPopoverVisibleChange, instance));
},
/**
* Gets the content node belonging to the `popover`.
*
* @method getContentNode
* @return {Node} The content `Node` reference.
*/
getContentNode: function() {
var instance = this;
var popoverBB = instance.popover.get('boundingBox');
return popoverBB.one('.' + CSS_SCHEDULER_EVENT_RECORDER_CONTENT);
},
/**
* Returns the formatted date including start and end hours if the event
* is not `allDay`.
*
* @method getFormattedDate
* @return {String} Formated date including start and end hours if the
* event is not `allDay`.
*/
getFormattedDate: function() {
var instance = this,
evt = (instance.get('event') || instance),
endDate = evt.get('endDate'),
startDate = evt.get('startDate'),
formattedDate = evt._formatDate(startDate, instance.get('dateFormat'));
if (evt.get('allDay')) {
return formattedDate;
}
formattedDate = formattedDate.concat(',');
var scheduler = evt.get('scheduler'),
fmtHourFn = (scheduler.get('activeView').get('isoTime') ? DateMath.toIsoTimeString : DateMath.toUsTimeString);
return [formattedDate, fmtHourFn(startDate), '-', fmtHourFn(endDate)].join(' ');
},
/**
* Returns this Scheduler event recorder's `content`, and dates.
*
* @method getTemplateData
* @return {Object} Copy of this events `content`, `date`, `endDate` and
* `startDate`.
*/
getTemplateData: function() {
var instance = this,
strings = instance.get('strings'),
evt = instance.get('event') || instance,
content = evt.get('content');
if (isUndefined(content)) {
content = strings['description-hint'];
}
return {
content: content,
date: instance.getFormattedDate(),
endDate: evt.get('endDate').getTime(),
startDate: evt.get('startDate').getTime()
};
},
/**
* Returns an updated event and also merges in any additional attributes
* passed in as `optAttrMap`.
*
* @method getUpdatedSchedulerEvent
* @param {Object} optAttrMap (optional) Attributes map.
* @return {Object} schedulerEvent (optional) Attributes map.
*/
getUpdatedSchedulerEvent: function(optAttrMap) {
var instance = this,
schedulerEvent = instance.get('event'),
options = {
silent: !schedulerEvent
},
formValues = instance.serializeForm();
if (!schedulerEvent) {
schedulerEvent = instance.clone();
}
schedulerEvent.set('scheduler', instance.get('scheduler'), {
silent: true
});
schedulerEvent.setAttrs(A.merge(formValues, optAttrMap), options);
return schedulerEvent;
},
/**
* Hides this Scheduler event recorder's `popover` component.
*
* @method hidePopover
*/
hidePopover: function() {
var instance = this;
instance.popover.hide();
},
/**
* Loads template data into the Scheduler event recorder's form.
*
* @method populateForm
*/
populateForm: function() {
var instance = this,
bodyTemplate = instance.get('bodyTemplate'),
headerTemplate = instance.get('headerTemplate'),
templateData = instance.getTemplateData();
instance.popover.setStdModContent('body', A.Lang.sub(bodyTemplate, templateData));
instance.popover.setStdModContent('header', A.Lang.sub(headerTemplate, templateData));
instance.popover.addToolbar(instance._getFooterToolbar(), 'footer');
},
/**
* Converts this event recorder's form node object to a string.
*
* @method serializeForm
* @return {String} A stringified copy of this event recorder's form.
*/
serializeForm: function() {
var instance = this;
return A.QueryString.parse(_serialize(instance.formNode.getDOM()));
},
/**
* Hides this Scheduler event recorder's `popover` component.
*
* @method showPopover
*/
showPopover: function(node) {
var instance = this,
event = instance.get('event');
if (!instance.popover.get('rendered')) {
instance._renderPopover();
}
if (!node) {
if (event) {
node = event.get('node');
}
else {
node = instance.get('node');
}
}
if (A.Lang.isNodeList(node)) {
node = node.item(0);
}
var align = instance.popover.get('align');
instance.popover.set('align', {
node: node,
points: align.points
});
instance.popover.show();
},
/**
* Handles `event` events.
*
* @method _afterEventChange
* @param {EventFacade} event
* @protected
*/
_afterEventChange: function() {
var instance = this;
instance.populateForm();
},
/**
* Handles `popoverVisible` events.
*
* @method _afterPopoverVisibleChange
* @param {EventFacade} event
* @protected
*/
_afterPopoverVisibleChange: function(event) {
var instance = this;
if (event.newVal) {
instance.populateForm();
if (!instance.get('event')) {
var contentNode = instance.getContentNode();
if (contentNode) {
setTimeout(function() {
contentNode.selectText();
}, 0);
}
}
}
else {
instance.set('event', null, {
silent: true
});
instance.get('node').remove();
}
},
/**
* Handles `scheduler` events.
*
* @method _afterSchedulerChange
* @param {EventFacade} event
* @protected
*/
_afterSchedulerChange: function(event) {
var instance = this;
var scheduler = event.newVal;
var schedulerBB = scheduler.get('boundingBox');
schedulerBB.delegate('click', A.bind(instance._onClickSchedulerEvent, instance), '.' +
CSS_SCHEDULER_EVENT);
},
/**
* Handles `cancel` events.
*
* @method _defCancelEventFn
* @param {EventFacade} event
* @protected
*/
_defCancelEventFn: function() {
var instance = this;
instance.get('node').remove();
instance.hidePopover();
},
/**
* Handles `delete` events.
*
* @method _defDeleteEventFn
* @param {EventFacade} event
* @protected
*/
_defDeleteEventFn: function() {
var instance = this;
var scheduler = instance.get('scheduler');
scheduler.removeEvents(instance.get('event'));
instance.hidePopover();
scheduler.syncEventsUI();
},
/**
* Handles `edit` events.
*
* @method _defEditEventFn
* @param {EventFacade} event
* @protected
*/
_defEditEventFn: function() {
var instance = this;
var scheduler = instance.get('scheduler');
instance.hidePopover();
scheduler.syncEventsUI();
},
/**
* Handles `save` events.
*
* @method _defSaveEventFn
* @param {EventFacade} event
* @protected
*/
_defSaveEventFn: function(event) {
var instance = this;
var scheduler = instance.get('scheduler');
scheduler.addEvents(event.newSchedulerEvent);
instance.hidePopover();
scheduler.syncEventsUI();
},
/**
* Returns the `toolbar` belonging to the event recorder `footer`.
*
* @method _getFooterToolbar
* @protected
* @return {Array} Footer toolbar
*/
_getFooterToolbar: function() {
var instance = this,
event = instance.get('event'),
strings = instance.get('strings'),
children = [
{
label: strings.save,
on: {
click: A.bind(instance._handleSaveEvent, instance)
}
},
{
label: strings.cancel,
on: {
click: A.bind(instance._handleCancelEvent, instance)
}
}
];
if (event) {
children.push({
label: strings['delete'],
on: {
click: A.bind(instance._handleDeleteEvent, instance)
}
});
}
return [children];
},
/**
* Handles `cancel` events.
*
* @method _handleCancelEvent
* @param {EventFacade} event
* @protected
*/
_handleCancelEvent: function(event) {
var instance = this;
instance.fire('cancel');
if (event.domEvent) {
event.domEvent.preventDefault();
}
event.preventDefault();
},
/**
* Handles `clickOutSide` events.
*
* @method _handleClickOutSide
* @param {EventFacade} event
* @protected
*/
_handleClickOutSide: function() {
var instance = this;
instance.fire('cancel');
},
/**
* Handles `delete` events.
*
* @method _handleDeleteEvent
* @param {EventFacade} event
* @protected
*/
_handleDeleteEvent: function(event) {
var instance = this;
instance.fire('delete', {
schedulerEvent: instance.get('event')
});
if (event.domEvent) {
event.domEvent.preventDefault();
}
event.preventDefault();
},
/**
* Handles `escape` events.
*
* @method _handleEscapeEvent
* @param {EventFacade} event
* @protected
*/
_handleEscapeEvent: function(event) {
var instance = this;
if (instance.popover.get('rendered') && (event.keyCode === A.Event.KeyMap.ESC)) {
instance.fire('cancel');
event.preventDefault();
}
},
/**
* Handles `save` events.
*
* @method _handleSaveEvent
* @param {EventFacade} event
* @protected
*/
_handleSaveEvent: function(event) {
var instance = this,
eventName = instance.get('event') ? 'edit' : 'save';
instance.fire(eventName, {
newSchedulerEvent: instance.getUpdatedSchedulerEvent()
});
if (event.domEvent) {
event.domEvent.preventDefault();
}
event.preventDefault();
},
/**
* Handles `click` event on the scheduler.
*
* @method _onClickSchedulerEvent
* @param {EventFacade} event
* @protected
*/
_onClickSchedulerEvent: function(event) {
var instance = this;
var evt = event.currentTarget.getData('scheduler-event');
if (evt) {
instance.set('event', evt, {
silent: true
});
instance.showPopover(event.currentTarget);
instance.get('node').remove();
}
},
/**
* Handles `submitForm` events.
*
* @method _onSubmitForm
* @param {EventFacade} event
* @protected
*/
_onSubmitForm: function(event) {
var instance = this;
instance._handleSaveEvent(event);
},
/**
* Renders this `EventRecorder`'s `popover` component.
*
* @method _renderPopover
* @protected
*/
_renderPopover: function() {
var instance = this,
scheduler = instance.get('scheduler'),
schedulerBB = scheduler.get('boundingBox');
instance.popover.render(schedulerBB);
instance.formNode = A.Node.create(TPL_FORM);
instance.formNode.on('submit', A.bind(instance._onSubmitForm, instance));
instance.popover.get('boundingBox').addClass(CSS_SCHEDULER_EVENT_RECORDER_POP_OVER);
instance.popover.get('contentBox').wrap(instance.formNode);
schedulerBB.on('clickoutside', A.bind(instance._handleClickOutSide, instance));
},
/**
* Replaces this `SchedulerEventRecorder`'s `popover` component with the
* given 'popover' value.
*
* @method _renderPopover
* @protected
* @param {Object} val The new `popover`.
* @return {Object} The new `popover` value merged some default popover
* configuration properties.
*/
_setPopover: function(val) {
var instance = this;
return A.merge({
align: {
points: [A.WidgetPositionAlign.BC, A.WidgetPositionAlign.TC]
},
bodyContent: TPL_BODY_CONTENT,
constrain: true,
headerContent: TPL_HEADER_CONTENT,
preventOverlap: true,
position: 'top',
toolbars: {
footer: instance._getFooterToolbar()
},
visible: false,
zIndex: 500
},
val
);
}
}
});
A.SchedulerEventRecorder = SchedulerEventRecorder;