/*
* Copyright (C) eZ Systems AS. All rights reserved.
* For full copyright and license information view LICENSE file distributed with this source code.
*/
YUI.add('ez-serversideview', function (Y) {
"use strict";
/**
* Provides the generic server side view class
*
* @module ez-serversideview
*/
Y.namespace('eZ');
/**
* The server side view
*
* @namespace eZ
* @class ServerSideView
* @constructor
* @extends eZ.View
*/
Y.eZ.ServerSideView = Y.Base.create('serverSideView', Y.eZ.View, [Y.eZ.Tabs, Y.eZ.SelectionTable], {
events: {
'form input[type="submit"], form button, form input[type="image"]': {
'click': '_trackUsedButton',
},
'form': {
'submit': '_confirmSubmit'
},
},
/**
* Click handler on the buttons in form element. It is used to keep
* which button was used to submit the form. This was introduced to fix
* https://jira.ez.no/browse/EZP-25393 because under MacOS, Safari and
* Firefox do not correctly update document.activeElement, as a result,
* when handling the form submit, the button was lost.
*
* @method _trackUsedButton
* @protected
* @param {EventFacade} e
*/
_trackUsedButton: function (e) {
this._formButton = e.target;
},
/**
* Check if the submit action requires a confirm box,
*
* @method _confirmSubmit
* @protected
* @param {EventFacade} e
*/
_confirmSubmit: function (e) {
var button = this._formButton,
details = '',
container = this.get('container'),
detailsAttr;
if (button && button.hasClass('ez-confirm-action')) {
detailsAttr = button.getAttribute('data-confirmbox-details-selector');
if (container.one(detailsAttr)) {
details = container.one(detailsAttr).get('innerHTML');
}
e.preventDefault();
this.fire('confirmBoxOpen', {
config: {
title: button.getAttribute('data-confirmbox-title'),
details: details,
confirmHandler: Y.bind(function () {
this._submitForm(e, button);
}, this)
},
});
} else {
this._submitForm(e, button);
}
},
/**
* Form handling. The DOM submit is transformed into an application
* level event `submitForm` so that the server side view service can
* handle it.
*
* @method _submitForm
* @protected
* @param {EventFacade} e
* @param {Node} button
*/
_submitForm: function (e, button) {
/**
* Fired when a form is submitted in the browser
*
* @event submitForm
* @param {Node} form the Node object of the submitted form
* @param {Object} formData the serialized form data including the
* used button to validate the form
* @param {Event} originalEvent the original DOM submit event
*/
this.fire('submitForm', {
form: e.target,
formData: this._serializeForm(e.target, button),
originalEvent: e,
});
this._formButton = null;
},
/**
* Serializes the form data so that it can be sent with an AJAX request.
* It also checks which button was used (if any) to include it in the
* data.
*
* @method _serializeForm
* @param {Node} form
* @param {Node} button
* @return {Object} key/value data of the form
*/
_serializeForm: function (form, button) {
var data = {};
if ( this._isSubmitButton(button, form) ) {
data[button.getAttribute('name')] = "";
}
form.get('elements').each(function (field) {
var name = field.getAttribute('name'),
type = field.get('type');
if ( !name ) {
return;
}
/* jshint -W015 */
switch (type) {
case 'button':
case 'reset':
case 'submit':
break;
case 'radio':
case 'checkbox':
if ( field.get('checked') ) {
data[name] = field.get('value');
}
break;
case 'select-multiple':
if ( field.get('selectedIndex') >= 0 ) {
data[name] = [];
field.get('options').each(function (opt) {
if ( opt.get('selected') ) {
data[name].push(opt.get('value'));
}
});
}
break;
default:
// `.get('value')` returns the expected field value for
// inputs, select-one and even textarea.
data[name] = field.get('value');
}
/* jshint +W015 */
});
return data;
},
/**
* Checks whether the given node is a valid submit button for the given
* form.
*
* @method _isSubmitButton
* @protected
* @param {Node} node
* @param {Node} form
* @return {Boolean}
*/
_isSubmitButton: function (node, form) {
var localName, name, type;
if ( !node || !form.contains(node) ) {
return false;
}
name = node.getAttribute('name');
if ( !name ) {
return false;
}
localName = node.get('localName');
type = node.getAttribute('type');
return (
localName === 'button' ||
( localName === 'input' && (type === 'submit' || type === 'image' ) )
);
},
/**
* Initializes the view to make sure the container will get the
* ez-view-serversideview class
*
* @method initializer
*/
initializer: function () {
/**
* References the button used to submit a form, it is updated by
* `_trackUsedButton` as a replacement for `document.activeElement`
* which is not correctly updated by Firefox for OSX or Safari.
* see https://jira.ez.no/browse/EZP-25393
*
* @property _formButton
* @type {Node|null}
*/
this._formButton = null;
this.containerTemplate = '<div class="ez-view-serversideview"/>';
this.on('activeChange', function () {
this.after('htmlChange', this.render);
});
},
/**
* Renders the view in its container. It just puts the html attibute
* content as the content of the view container
*
* @method render
* @return {eZ.ServerSideView} the view it self
*/
render: function () {
this.get('container').setContent(this.get('html'));
return this;
},
/**
* Returns the string to use as the page title
*
* @method getTitle
* @return {String}
*/
getTitle: function () {
return this.get('title');
},
}, {
ATTRS: {
/**
* The title of the view
*
* @attribute title
* @default ""
* @type String
*/
title: {
value: ""
},
/**
* The HTML content of the view
*
* @attribute html
* @default ""
* @type String
*/
html: {
value: ""
},
}
});
});
