qs.defineNS('app.event'); (function () { 'use strict'; app.event.Form = function () { this.construct.apply(this, arguments); }; app.event.Form.prototype.construct = function (options) { this.eventNS = 'eventForm'; this.options = $.extend({ requestUrl: undefined, formId: undefined, attendeeNodeId: undefined, maxAttendeeCount: undefined, /** @type {null|String} Optional, used at user end */ loginBlockId: undefined, memberButtonsBlockId: undefined }, options); this.formNode = $('#' + this.options.formId).required(); this.attendeeNode = this.formNode.find('#' + this.options.attendeeNodeId).required(); this.initEvents(); if (null == this.options.loginBlockId || 0 === $('#' + this.options.loginBlockId).length) { this.formNode.show(); } return this; }; app.event.Form.prototype.initEvents = function () { if (this.options.loginBlockId) { $('a[data-register-nonmember]').on('click.' + this.eventNS, _.bind(this.onRegisterNonMemberClick, this)); } this.formNode.find('[data-action="add"]').on('click.' + this.eventNS, _.bind(this.onAddAttendeeClick, this)); this.formNode.find('[data-attendee]').each(_.bind(function (idx, node) { this.initAttendeeForm($(node)); }, this)); this.refreshControls(); return this; }; app.event.Form.prototype.onRegisterNonMemberClick = function (e) { e.preventDefault(); $('#' + this.options.loginBlockId).hide(); $('#' + this.options.memberButtonsBlockId).show(); $('#' + this.options.formId).show().find('input[value="nonmember"]:first').prop('checked', true).trigger('change'); return null; }; app.event.Form.prototype.onAddAttendeeClick = function (e) { e.preventDefault(); var attendeeForms = this.attendeeNode.find('[data-attendee]'), formsCount = +attendeeForms.size(), lastIndex = +attendeeForms.last().data('attendee'); if (formsCount >= this.options.maxAttendeeCount) { alert('Only ' + this.options.maxAttendeeCount + ' additional attendees allowed!'); return null; } qs.ajax(this.options.requestUrl, { action: 'renderAttendee', lastIndex: lastIndex }).done(_.bind(this.onRenderAttendeeResponse, this)); return null; }; /** * @param {Object} response * @param {String} response.formHtml * @param {Number} response.formIndex * @param {String} response.evalData */ app.event.Form.prototype.onRenderAttendeeResponse = function (response) { var form, formHtml = _.str.trim(response.formHtml); if (formHtml) { form = $(formHtml); this.attendeeNode.append(form); this.initAttendeeForm(form); this.refreshControls(); if (response.evalData) { $.globalEval(response.evalData); } } return this; }; app.event.Form.prototype.initAttendeeForm = function (form) { form.find('[data-action="delete"]').bind('click', _.bind(this.onDeleteAttendeeClick, this)); return this; }; app.event.Form.prototype.refreshControls = function () { var deleteButtons = this.attendeeNode.find('[data-action="delete"]'); if (1 === deleteButtons.length) { deleteButtons.eq(0).parent().hide(); } else { deleteButtons.parent().show(); } var attendeeList = this.attendeeNode.find('[data-attendee]'); attendeeList.eq(0).find('[data-attend-type]').prop('disabled', false); attendeeList.slice(1).find('[data-attend-type]') .filter('[value="other"]').prop('checked', true) .andSelf().filter('[value="myself"]').prop('disabled', true) .andSelf().change(); return this; }; app.event.Form.prototype.onDeleteAttendeeClick = function (e) { e.preventDefault(); if (!confirm('Do you really want to delete this attendee?')) { return; } var block = $(e.currentTarget).closest('[data-attendee]'), index = +block.data('attendee'); if (1 < this.attendeeNode.find('[data-attendee]').length) { block.remove(); this.refreshControls(); } else { block.find('input[type="text"][name^="attendee[' + index + ']"]').val(''); } }; })();