* @copyright 2017 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
-define(['jquery', 'core/templates'], function($, Templates) {
+define(['jquery'], function($) {
var SELECTORS = {
- EVENT_TYPE: '[name="eventtype"]',
- EVENT_COURSE_ID: '[name="courseid"]',
EVENT_GROUP_COURSE_ID: '[name="groupcourseid"]',
EVENT_GROUP_ID: '[name="groupid"]',
- FORM_GROUP: '.form-group',
SELECT_OPTION: 'option',
- ADVANCED_ELEMENT: '.fitem.advanced',
- FIELDSET_ADVANCED_ELEMENTS: 'fieldset.containsadvancedelements',
- MORELESS_TOGGLE: '.moreless-actions'
- };
-
- var EVENTS = {
- SHOW_ADVANCED: 'event_form-show-advanced',
- HIDE_ADVANCED: 'event_form-hide-advanced',
- ADVANCED_SHOWN: 'event_form-advanced-shown',
- ADVANCED_HIDDEN: 'event_form-advanced-hidden',
- };
-
- /**
- * Find the old show more / show less toggle added by the mform and destroy it.
- * We are handling the visibility of the advanced fields with the more/less button
- * in the footer of the modal that this form is rendered within.
- *
- * @method destroyOldMoreLessToggle
- * @param {object} formElement The root form element
- */
- var destroyOldMoreLessToggle = function(formElement) {
- formElement.find(SELECTORS.FIELDSET_ADVANCED_ELEMENTS).removeClass('containsadvancedelements');
- var element = formElement.find(SELECTORS.MORELESS_TOGGLE);
- Templates.replaceNode(element, '', '');
- };
-
- /**
- * Find each of the advanced form elements and make them visible.
- *
- * This function triggers the ADVANCED_SHOWN event for any other
- * component to handle (e.g. the event form modal).
- *
- * @method destroyOldMoreLessToggle
- * @param {object} formElement The root form element
- */
- var showAdvancedElements = function(formElement) {
- formElement.find(SELECTORS.ADVANCED_ELEMENT).removeClass('hidden');
- formElement.trigger(EVENTS.ADVANCED_SHOWN);
- };
-
- /**
- * Find each of the advanced form elements and hide them.
- *
- * This function triggers the ADVANCED_HIDDEN event for any other
- * component to handle (e.g. the event form modal).
- *
- * @method hideAdvancedElements
- * @param {object} formElement The root form element
- */
- var hideAdvancedElements = function(formElement) {
- formElement.find(SELECTORS.ADVANCED_ELEMENT).addClass('hidden');
- formElement.trigger(EVENTS.ADVANCED_HIDDEN);
- };
-
- /**
- * Listen for any events telling this module to show or hide it's
- * advanced elements.
- *
- * This function listens for SHOW_ADVANCED and HIDE_ADVANCED.
- *
- * @method listenForShowHideEvents
- * @param {object} formElement The root form element
- */
- var listenForShowHideEvents = function(formElement) {
- formElement.on(EVENTS.SHOW_ADVANCED, function() {
- showAdvancedElements(formElement);
- });
-
- formElement.on(EVENTS.HIDE_ADVANCED, function() {
- hideAdvancedElements(formElement);
- });
};
/**
*
* @method init
* @param {string} formId The value of the form's id attribute
- * @param {bool} hasError If the form has errors rendered form the server.
*/
- var init = function(formId, hasError) {
+ var init = function(formId) {
var formElement = $('#' + formId);
- listenForShowHideEvents(formElement);
- destroyOldMoreLessToggle(formElement);
parseGroupSelect(formElement);
addCourseGroupSelectListeners(formElement);
-
- // If we know that the form has been rendered with server side
- // errors then we need to display all of the elements in the form
- // in case one of those elements has the error.
- if (hasError) {
- showAdvancedElements(formElement);
- } else {
- hideAdvancedElements(formElement);
- }
};
return {
init: init,
- events: EVENTS,
};
});
'core/modal_registry',
'core/fragment',
'core_calendar/events',
- 'core_calendar/repository',
- 'core_calendar/event_form'
+ 'core_calendar/repository'
],
function(
$,
ModalRegistry,
Fragment,
CalendarEvents,
- Repository,
- EventForm
+ Repository
) {
var registered = false;
var SELECTORS = {
- MORELESS_BUTTON: '[data-action="more-less-toggle"]',
SAVE_BUTTON: '[data-action="save"]',
LOADING_ICON_CONTAINER: '[data-region="loading-icon-container"]',
};
this.reloadingBody = false;
this.reloadingTitle = false;
this.saveButton = this.getFooter().find(SELECTORS.SAVE_BUTTON);
- this.moreLessButton = this.getFooter().find(SELECTORS.MORELESS_BUTTON);
};
ModalEventForm.TYPE = 'core_calendar-modal_event_form';
*/
ModalEventForm.prototype.disableButtons = function() {
this.saveButton.prop('disabled', true);
- this.moreLessButton.prop('disabled', true);
};
/**
*/
ModalEventForm.prototype.enableButtons = function() {
this.saveButton.prop('disabled', false);
- this.moreLessButton.prop('disabled', false);
- };
-
- /**
- * Set the more/less button in the footer to the "more"
- * state.
- *
- * @method setMoreButton
- */
- ModalEventForm.prototype.setMoreButton = function() {
- this.moreLessButton.attr('data-collapsed', 'true');
- Str.get_string('more', 'calendar').then(function(string) {
- this.moreLessButton.text(string);
- return;
- }.bind(this));
- };
-
- /**
- * Set the more/less button in the footer to the "less"
- * state.
- *
- * @method setLessButton
- */
- ModalEventForm.prototype.setLessButton = function() {
- this.moreLessButton.attr('data-collapsed', 'false');
- Str.get_string('less', 'calendar').then(function(string) {
- this.moreLessButton.text(string);
- return;
- }.bind(this));
- };
-
- /**
- * Toggle the more/less button in the footer from the current
- * state to it's opposite state.
- *
- * @method toggleMoreLessButton
- */
- ModalEventForm.prototype.toggleMoreLessButton = function() {
- var form = this.getForm();
-
- if (this.moreLessButton.attr('data-collapsed') == 'true') {
- form.trigger(EventForm.events.SHOW_ADVANCED);
- this.setLessButton();
- } else {
- form.trigger(EventForm.events.HIDE_ADVANCED);
- this.setMoreButton();
- }
};
/**
*
* @method reloadBodyContent
* @param {string} formData The serialised form data
- * @param {bool} hasError True if we know the form data is erroneous
* @return {object} A promise resolved with the fragment html and js from
*/
- ModalEventForm.prototype.reloadBodyContent = function(formData, hasError) {
+ ModalEventForm.prototype.reloadBodyContent = function(formData) {
if (this.reloadingBody) {
return this.bodyPromise;
}
args.formdata = formData;
}
- args.haserror = (typeof hasError == 'undefined') ? false : hasError;
-
this.bodyPromise = Fragment.loadFragment('calendar', 'event_form', contextId, args);
this.setBody(this.bodyPromise);
// If there was a server side validation error then
// we need to re-request the rendered form from the server
// in order to display the error for the user.
- return this.reloadBodyContent(formData, true);
+ return this.reloadBodyContent(formData);
} else {
// No problemo! Our work here is done.
this.hide();
e.preventDefault();
e.stopPropagation();
}.bind(this));
-
- // Toggle the state of the more/less button in the footer.
- this.getModal().on(CustomEvents.events.activate, SELECTORS.MORELESS_BUTTON, function(e, data) {
- this.toggleMoreLessButton();
-
- data.originalEvent.preventDefault();
- e.stopPropagation();
- }.bind(this));
-
- // When the event form tells us that the advanced fields are shown
- // then the more/less button should be set to less to allow the user
- // to hide the advanced fields.
- this.getModal().on(EventForm.events.ADVANCED_SHOWN, function() {
- this.setLessButton();
- }.bind(this));
-
- // When the event form tells us that the advanced fields are hidden
- // then the more/less button should be set to more to allow the user
- // to show the advanced fields.
- this.getModal().on(EventForm.events.ADVANCED_HIDDEN, function() {
- this.setMoreButton();
- }.bind(this));
};
// Automatically register with the modal registry the first time this module is imported so that you can create modals
global $PAGE;
$mform = $this->_form;
- $haserror = !empty($this->_customdata['haserror']);
$starttime = isset($this->_customdata['starttime']) ? $this->_customdata['starttime'] : 0;
$eventtypes = calendar_get_all_allowed_types();
$this->add_event_repeat_elements($mform);
// Add the javascript required to enhance this mform.
- // Including the show/hide of advanced elements and the display of the correct select elements for event types.
- $PAGE->requires->js_call_amd('core_calendar/event_form', 'init', [$mform->getAttribute('id'), $haserror]);
+ $PAGE->requires->js_call_amd('core_calendar/event_form', 'init', [$mform->getAttribute('id')]);
}
/**
parse_str(clean_param($args['formdata'], PARAM_TEXT), $data);
}
- if (isset($args['haserror'])) {
- $formoptions['haserror'] = clean_param($args['haserror'], PARAM_BOOL);
- }
-
if ($starttime) {
$formoptions['starttime'] = $starttime;
}
{{< core/modal }}
{{$footer}}
- <button type="button"
- class="btn btn-secondary"
- data-collapsed="true"
- data-action="more-less-toggle">
-
- {{#str}} more, calendar {{/str}}
- </button>
<button type="button"
class="btn btn-primary"
data-context-id="{{contextid}}"
