MDL-62746 tag: Convert YUI modals to AMD modals
[moodle.git] / lib / amd / src / tag.js
index 730e5cf..e6b12f1 100644 (file)
@@ -22,8 +22,8 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  * @since      3.0
  */
-define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str', 'core/yui'],
-        function($, ajax, templates, notification, str, Y) {
+define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str', 'core/modal_factory', 'core/modal_events'],
+        function($, ajax, templates, notification, str, ModalFactory, ModalEvents) {
     return /** @alias module:core/tag */ {
 
         /**
@@ -142,56 +142,61 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str'
                     return;
                 }
                 var tempElement = $("<input type='hidden'/>").attr('name', this.name);
+                var saveButtonText = '';
+                var tagOptions = [];
+                tags.each(function() {
+                    var tagid = $(this).val(),
+                        tagname = $('.inplaceeditable[data-itemtype=tagname][data-itemid=' + tagid + ']').attr('data-value');
+                    tagOptions.push({
+                        id: tagid,
+                        name: tagname
+                    });
+                });
+
                 str.get_strings([
                     {key: 'combineselected', component: 'tag'},
-                    {key: 'selectmaintag', component: 'tag'},
-                    {key: 'continue'},
-                    {key: 'cancel'},
-                ]).done(function(s) {
-                    var el = $('<div><form id="combinetags_form">' +
-                        '<div class="description"></div><div class="form-group options"></div>' +
-                        '<div class="form-group">' +
-                        '   <input type="submit" class="btn btn-primary" id="combinetags_submit"/>' +
-                        '   <input type="button" class="btn btn-secondary" id="combinetags_cancel"/>' +
-                        '</div>' +
-                        '</form></div>');
-                    el.find('.description').html(s[1]);
-                    el.find('#combinetags_submit').attr('value', s[2]);
-                    el.find('#combinetags_cancel').attr('value', s[3]);
-                    var fldset = el.find('.options');
-                    tags.each(function() {
-                        var tagid = $(this).val(),
-                            tagname = $('.inplaceeditable[data-itemtype=tagname][data-itemid=' + tagid + ']').attr('data-value');
-                        var option = '<div class="form-check">' +
-                            '   <input type="radio" class="form-check-input" name="maintag" ' +
-                            '       id="combinetags_maintag_' + tagid + '" value="' + tagid + '"/>' +
-                            '   <label class="form-check-label" for="combinetags_maintag_' + tagid + '">' + tagname + '</label>' +
-                            '</div>';
-                        fldset.append($(option));
+                    {key: 'continue'}
+                ]).then(function(langStrings) {
+                    var modalTitle = langStrings[0];
+                    saveButtonText = langStrings[1];
+                    var templateContext = {
+                        tags: tagOptions
+                    };
+                    return ModalFactory.create({
+                        title: modalTitle,
+                        body: templates.render('core_tag/combine_tags', templateContext),
+                        type: ModalFactory.types.SAVE_CANCEL
                     });
-                    // TODO: MDL-57778 Convert to core/modal.
-                    Y.use('moodle-core-notification-dialogue', function() {
-                        var panel = new M.core.dialogue({
-                            draggable: true,
-                            modal: true,
-                            closeButton: true,
-                            headerContent: s[0],
-                            bodyContent: el.html()
-                        });
-                        panel.show();
-                        $('#combinetags_form input[type=radio]').first().focus().prop('checked', true);
-                        $('#combinetags_form #combinetags_cancel').on('click', function() {
-                            panel.destroy();
-                        });
-                        $('#combinetags_form').on('submit', function() {
-                            tempElement.appendTo(form);
-                            var maintag = $('input[name=maintag]:checked', '#combinetags_form').val();
-                            $("<input type='hidden'/>").attr('name', 'maintag').attr('value', maintag).appendTo(form);
-                            form.submit();
-                            return false;
-                        });
+                }).then(function(modal) {
+                    modal.setSaveButtonText(saveButtonText);
+
+                    // Handle save event.
+                    modal.getRoot().on(ModalEvents.save, function(e) {
+                        e.preventDefault();
+
+                        // Append this temp element in the form in the tags list, not the form in the modal. Confusing, right?!?
+                        tempElement.appendTo(form);
+                        // Get the selected tag from the modal.
+                        var maintag = $('input[name=maintag]:checked', '#combinetags_form').val();
+                        // Append this in the tags list form.
+                        $("<input type='hidden'/>").attr('name', 'maintag').attr('value', maintag).appendTo(form);
+                        // Submit the tags list form.
+                        form.submit();
                     });
-                });
+
+                    // Handle hidden event.
+                    modal.getRoot().on(ModalEvents.hidden, function() {
+                        // Destroy when hidden.
+                        modal.destroy();
+                    });
+
+                    modal.show();
+                    // Tick the first option.
+                    $('#combinetags_form input[type=radio]').first().focus().prop('checked', true);
+
+                    return;
+
+                }).catch(notification.exception);
             });
 
             // When user changes tag name to some name that already exists suggest to combine the tags.
@@ -218,43 +223,69 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str'
             // Form for adding standard tags.
             $('body').on('click', 'a[data-action=addstandardtag]', function(e) {
                 e.preventDefault();
+
+                var saveButtonText = '';
                 str.get_strings([
                     {key: 'addotags', component: 'tag'},
-                    {key: 'inputstandardtags', component: 'tag'},
-                    {key: 'continue'},
-                    {key: 'cancel'},
-                ]).done(function(s) {
-                    var el = $('<div><form id="addtags_form" method="POST">' +
-                        '<input type="hidden" name="action" value="addstandardtag"/>' +
-                        '<input type="hidden" name="sesskey" value="' + M.cfg.sesskey + '"/>' +
-                        '<div class="form-group">' +
-                        '   <label for="id_tagslist">' + s[1] + '</label>' +
-                        '   <input type="text" id="id_tagslist" class="form-control" name="tagslist"/>' +
-                        '</div>' +
-                        '<div class="form-group">' +
-                        '   <input type="submit" class="btn btn-primary" id="addtags_submit"/>' +
-                        '   <input type="button" class="btn btn-secondary" id="addtags_cancel"/>' +
-                        '</div>' +
-                        '</form></div>');
-                    el.find('#addtags_form').attr('action', window.location.href);
-                    el.find('#addtags_submit').attr('value', s[2]);
-                    el.find('#addtags_cancel').attr('value', s[3]);
-                    // TODO: MDL-57778 Convert to core/modal.
-                    Y.use('moodle-core-notification-dialogue', function() {
-                        var panel = new M.core.dialogue({
-                            draggable: true,
-                            modal: true,
-                            closeButton: true,
-                            headerContent: s[0],
-                            bodyContent: el.html()
-                        });
-                        panel.show();
-                        $('#addtags_form input[type=text]').focus();
-                        $('#addtags_form #addtags_cancel').on('click', function() {
-                            panel.destroy();
+                    {key: 'continue'}
+                ]).then(function(langStrings) {
+                    var modalTitle = langStrings[0];
+                    saveButtonText = langStrings[1];
+                    var templateContext = {
+                        actionurl: window.location.href,
+                        sesskey: M.cfg.sesskey
+                    };
+                    return ModalFactory.create({
+                        title: modalTitle,
+                        body: templates.render('core_tag/add_tags', templateContext),
+                        type: ModalFactory.types.SAVE_CANCEL
+                    });
+                }).then(function(modal) {
+                    modal.setSaveButtonText(saveButtonText);
+
+                    // Handle save event.
+                    modal.getRoot().on(ModalEvents.save, function(e) {
+                        var tagsInput = $(e.currentTarget).find('#id_tagslist');
+                        var name = tagsInput.val().trim();
+
+                        // Set the text field's value to the trimmed value.
+                        tagsInput.val(name);
+
+                        // Add submit event listener to the form.
+                        var tagsForm = $('#addtags_form');
+                        tagsForm.on('submit', function(e) {
+                            // Validate the form.
+                            var form = $('#addtags_form');
+                            if (form[0].checkValidity() === false) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }
+                            form.addClass('was-validated');
+
+                            // BS2 compatibility.
+                            $('[data-region="tagslistinput"]').addClass('error');
+                            var errorMessage = $('#id_tagslist_error_message');
+                            errorMessage.removeAttr('hidden');
+                            errorMessage.addClass('help-block');
                         });
+
+                        // Try to submit the form.
+                        tagsForm.submit();
+
+                        return false;
                     });
-                });
+
+                    // Handle hidden event.
+                    modal.getRoot().on(ModalEvents.hidden, function() {
+                        // Destroy when hidden.
+                        modal.destroy();
+                    });
+
+                    modal.show();
+
+                    return;
+
+                }).catch(notification.exception);
             });
         },
 
@@ -292,58 +323,74 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str'
 
             $('body').on('click', '.addtagcoll > a', function(e) {
                 e.preventDefault();
-                var href = $(this).attr('data-url') + '&sesskey=' + M.cfg.sesskey;
-                str.get_strings([
-                        {key: 'addtagcoll', component: 'tag'},
-                        {key: 'name'},
-                        {key: 'searchable', component: 'tag'},
-                        {key: 'create'},
-                        {key: 'cancel'},
-                    ]).done(function(s) {
-                        var el = $('<div><form id="addtagcoll_form">' +
-                            '<div class="form-group">' +
-                            '   <label for="addtagcoll_name"></label> ' +
-                            '   <input id="addtagcoll_name" type="text" class="form-control"/>  ' +
-                            '</div>' +
-                            '<div class="form-group form-check">' +
-                            '   <input id="addtagcoll_searchable" type="checkbox" value="1" checked class="form-check-input"/>' +
-                            '   <label for="addtagcoll_searchable" class="form-check-label"></label>' +
-                            '</div>' +
-                            '<div class="form-group">' +
-                            '   <input type="submit" class="btn btn-primary" id="addtagcoll_submit"/>' +
-                            '   <input type="button" class="btn btn-secondary" id="addtagcoll_cancel"/>' +
-                            '</div>' +
-                            '</form></div>');
-                        el.find('label[for="addtagcoll_name"]').html(s[1]);
-                        el.find('label[for="addtagcoll_searchable"]').html(s[2]);
-                        el.find('#addtagcoll_submit').attr('value', s[3]);
-                        el.find('#addtagcoll_cancel').attr('value', s[4]);
-                        // TODO: MDL-57778 Convert to core/modal.
-                        Y.use('moodle-core-notification-dialogue', function() {
-                            var panel = new M.core.dialogue({
-                                draggable: true,
-                                modal: true,
-                                closeButton: true,
-                                headerContent: s[0],
-                                bodyContent: el.html()
-                            });
-                            panel.show();
-                            $('#addtagcoll_form #addtagcoll_name').focus();
-                            $('#addtagcoll_form #addtagcoll_cancel').on('click', function() {
-                                panel.destroy();
-                            });
-                            $('#addtagcoll_form').on('submit', function() {
-                                var name = $('#addtagcoll_form #addtagcoll_name').val();
-                                var searchable = $('#addtagcoll_form #addtagcoll_searchable').prop('checked') ? 1 : 0;
-                                if (String(name).length > 0) {
-                                    window.location.href = href + "&name=" + encodeURIComponent(name) + "&searchable=" + searchable;
-                                }
-                                return false;
-                            });
-                        });
+                var keys = [
+                    {
+                        key: 'addtagcoll',
+                        component: 'tag'
+                    },
+                    {
+                        key: 'create'
                     }
-                );
+                ];
+
+                var href = $(this).attr('data-url');
+                var saveButtonText = '';
+                str.get_strings(keys).then(function(langStrings) {
+                    var modalTitle = langStrings[0];
+                    saveButtonText = langStrings[1];
+                    var templateContext = {
+                        actionurl: href,
+                        sesskey: M.cfg.sesskey
+                    };
+                    return ModalFactory.create({
+                        title: modalTitle,
+                        body: templates.render('core_tag/add_tag_collection', templateContext),
+                        type: ModalFactory.types.SAVE_CANCEL
+                    });
+                }).then(function(modal) {
+                    modal.setSaveButtonText(saveButtonText);
+
+                    // Handle save event.
+                    modal.getRoot().on(ModalEvents.save, function(e) {
+                        var collectionInput = $(e.currentTarget).find('#addtagcoll_name');
+                        var name = collectionInput.val().trim();
+                        // Set the text field's value to the trimmed value.
+                        collectionInput.val(name);
+
+                        // Add submit event listener to the form.
+                        var form = $('#addtagcoll_form');
+                        form.on('submit', function(e) {
+                            // Validate the form.
+                            if (form[0].checkValidity() === false) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }
+                            form.addClass('was-validated');
+
+                            // BS2 compatibility.
+                            $('[data-region="addtagcoll_nameinput"]').addClass('error');
+                            var errorMessage = $('#id_addtagcoll_name_error_message');
+                            errorMessage.removeAttr('hidden');
+                            errorMessage.addClass('help-block');
+                        });
+
+                        // Try to submit the form.
+                        form.submit();
+
+                        return false;
+                    });
+
+                    // Handle hidden event.
+                    modal.getRoot().on(ModalEvents.hidden, function() {
+                        // Destroy when hidden.
+                        modal.destroy();
+                    });
+
+                    modal.show();
+
+                    return;
 
+                }).catch(notification.exception);
             });
 
             $('body').on('click', '.tag-collections-table .action_delete', function(e) {