lib/amd/src/tag.js

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * AJAX helper for the tag management page.
  18.  *
  19.  * @module     core/tag
  20.  * @copyright  2015 Marina Glancy
  21.  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  * @since      3.0
  23.  */
  24. define([
  25.     'jquery',
  26.     'core/ajax',
  27.     'core/templates',
  28.     'core/notification',
  29.     'core/str',
  30.     'core/modal_factory',
  31.     'core/modal_events',
  32.     'core/pending',
  33. ], function(
  34.     $,
  35.     ajax,
  36.     templates,
  37.     notification,
  38.     str,
  39.     ModalFactory,
  40.     ModalEvents,
  41.     Pending
  42. ) {
  43.     return /** @alias module:core/tag */ {
  45.         /**
  46.          * Initialises tag index page.
  47.          *
  48.          * @method initTagindexPage
  49.          */
  50.         initTagindexPage: function() {
  51.             // Click handler for changing tag type.
  52.             $('body').delegate('.tagarea[data-ta] a[data-quickload=1]', 'click', function(e) {
  53.                 var pendingPromise = new Pending('core/tag:initTagindexPage');
  55.                 e.preventDefault();
  56.                 var target = $(this);
  57.                 var query = target[0].search.replace(/^\?/, '');
  58.                 var tagarea = target.closest('.tagarea[data-ta]');
  59.                 var args = query.split('&').reduce(function(s, c) {
  60.                       var t = c.split('=');
  61.                       s[t[0]] = decodeURIComponent(t[1]);
  62.                       return s;
  63.                     }, {});
  65.                 ajax.call([{
  66.                     methodname: 'core_tag_get_tagindex',
  67.                     args: {tagindex: args}
  68.                 }])[0]
  69.                 .then(function(data) {
  70.                     return templates.render('core_tag/index', data);
  71.                 })
  72.                 .then(function(html, js) {
  73.                     templates.replaceNode(tagarea, html, js);
  74.                     return;
  75.                 })
  76.                 .always(pendingPromise.resolve)
  77.                 .catch(notification.exception);
  78.             });
  79.         },
  81.         /**
  82.          * Initialises tag management page.
  83.          *
  84.          * @method initManagePage
  85.          */
  86.         initManagePage: function() {
  87.             // Set cell 'time modified' to 'now' when any of the element is updated in this row.
  88.             $('body').on('updated', '[data-inplaceeditable]', function(e) {
  89.                 var pendingPromise = new Pending('core/tag:initManagePage');
  91.                 str.get_strings([
  92.                     {
  93.                         key: 'selecttag',
  94.                         component: 'core_tag',
  95.                     },
  96.                     {
  97.                         key: 'now',
  98.                         component: 'core',
  99.                     },
  100.                 ])
  101.                 .then(function(result) {
  102.                     $('label[for="tagselect' + e.ajaxreturn.itemid + '"]').html(result[0]);
  103.                     $(e.target).closest('tr').find('td.col-timemodified').html(result[1]);
  105.                     return;
  106.                 })
  107.                 .always(pendingPromise.resolve)
  108.                 .catch(notification.exception);
  110.                 if (e.ajaxreturn.itemtype === 'tagflag') {
  111.                     var row = $(e.target).closest('tr');
  112.                     if (e.ajaxreturn.value === '0') {
  113.                         row.removeClass('table-warning');
  114.                     } else {
  115.                         row.addClass('table-warning');
  116.                     }
  117.                 }
  118.             });
  120.             // Confirmation for single tag delete link.
  121.             $('.tag-management-table').delegate('a.tagdelete', 'click', function(e) {
  122.                 var pendingPromise = new Pending('core/tag:tagdelete');
  124.                 e.preventDefault();
  125.                 var href = $(this).attr('href');
  126.                 str.get_strings([
  127.                     {key: 'delete', component: 'core'},
  128.                     {key: 'confirmdeletetag', component: 'tag'},
  129.                     {key: 'yes', component: 'core'},
  130.                     {key: 'no', component: 'core'},
  131.                 ])
  132.                 .then(function(s) {
  133.                     return notification.confirm(s[0], s[1], s[2], s[3], function() {
  134.                         window.location.href = href;
  135.                     });
  136.                 })
  137.                 .always(pendingPromise.resolve)
  138.                 .catch(notification.exception);
  139.             });
  141.             // Confirmation for bulk tag delete button.
  142.             $("#tag-management-delete").click(function(e) {
  143.                 var form = $(this).closest('form').get(0);
  145.                 var cnt = $(form).find("input[data-togglegroup='tags-manage'][data-toggle='slave']:checked").length;
  146.                 if (!cnt) {
  147.                     return;
  148.                 }
  150.                 var pendingPromise = new Pending('core/tag:tag-management-delete');
  151.                 var tempElement = $("<input type='hidden'/>").attr('name', this.name);
  152.                 e.preventDefault();
  153.                 str.get_strings([
  154.                     {key: 'delete', component: 'core'},
  155.                     {key: 'confirmdeletetags', component: 'tag'},
  156.                     {key: 'yes', component: 'core'},
  157.                     {key: 'no', component: 'core'},
  158.                 ])
  159.                 .then(function(s) {
  160.                     return notification.confirm(s[0], s[1], s[2], s[3], function() {
  161.                         tempElement.appendTo(form);
  162.                         form.submit();
  163.                     });
  164.                 })
  165.                 .always(pendingPromise.resolve)
  166.                 .catch(notification.exception);
  167.             });
  169.             // Confirmation for bulk tag combine button.
  170.             $("#tag-management-combine").click(function(e) {
  171.                 var pendingPromise = new Pending('core/tag:tag-management-combine');
  173.                 e.preventDefault();
  174.                 var form = $(this).closest('form').get(0);
  175.                 var tags = $(form).find("input[data-togglegroup='tags-manage'][data-toggle='slave']:checked");
  177.                 if (tags.length <= 1) {
  178.                     str.get_strings([
  179.                         {key: 'combineselected', component: 'tag'},
  180.                         {key: 'selectmultipletags', component: 'tag'},
  181.                         {key: 'ok'},
  182.                     ])
  183.                     .then(function(s) {
  184.                         return notification.alert(s[0], s[1], s[2]);
  185.                     })
  186.                     .always(pendingPromise.resolve)
  187.                     .catch(notification.exception);
  189.                     return;
  190.                 }
  192.                 var tempElement = $("<input type='hidden'/>").attr('name', this.name);
  193.                 var saveButtonText = '';
  194.                 var tagOptions = [];
  195.                 tags.each(function() {
  196.                     var tagid = $(this).val(),
  197.                         tagname = $('.inplaceeditable[data-itemtype=tagname][data-itemid=' + tagid + ']').attr('data-value');
  198.                     tagOptions.push({
  199.                         id: tagid,
  200.                         name: tagname
  201.                     });
  202.                 });
  204.                 str.get_strings([
  205.                     {key: 'combineselected', component: 'tag'},
  206.                     {key: 'continue', component: 'core'}
  207.                 ])
  208.                 .then(function(langStrings) {
  209.                     var modalTitle = langStrings[0];
  210.                     saveButtonText = langStrings[1];
  211.                     var templateContext = {
  212.                         tags: tagOptions
  213.                     };
  214.                     return ModalFactory.create({
  215.                         title: modalTitle,
  216.                         body: templates.render('core_tag/combine_tags', templateContext),
  217.                         type: ModalFactory.types.SAVE_CANCEL
  218.                     });
  219.                 })
  220.                 .then(function(modal) {
  221.                     modal.setSaveButtonText(saveButtonText);
  223.                     return modal;
  224.                 })
  225.                 .then(function(modal) {
  227.                     // Handle save event.
  228.                     modal.getRoot().on(ModalEvents.save, function(e) {
  229.                         e.preventDefault();
  231.                         // Append this temp element in the form in the tags list, not the form in the modal. Confusing, right?!?
  232.                         tempElement.appendTo(form);
  233.                         // Get the selected tag from the modal.
  234.                         var maintag = $('input[name=maintag]:checked', '#combinetags_form').val();
  235.                         // Append this in the tags list form.
  236.                         $("<input type='hidden'/>").attr('name', 'maintag').attr('value', maintag).appendTo(form);
  237.                         // Submit the tags list form.
  238.                         form.submit();
  239.                     });
  241.                     // Handle hidden event.
  242.                     modal.getRoot().on(ModalEvents.hidden, function() {
  243.                         // Destroy when hidden.
  244.                         modal.destroy();
  245.                     });
  247.                     modal.show();
  248.                     // Tick the first option.
  249.                     $('#combinetags_form input[type=radio]').first().focus().prop('checked', true);
  251.                     return;
  253.                 })
  254.                 .always(pendingPromise.resolve)
  255.                 .catch(notification.exception);
  256.             });
  258.             // When user changes tag name to some name that already exists suggest to combine the tags.
  259.             $('body').on('updatefailed', '[data-inplaceeditable][data-itemtype=tagname]', function(e) {
  260.                 var exception = e.exception; // The exception object returned by the callback.
  261.                 var newvalue = e.newvalue; // The value that user tried to udpated the element to.
  262.                 var tagid = $(e.target).attr('data-itemid');
  263.                 if (exception.errorcode === 'namesalreadybeeingused') {
  264.                     var pendingPromise = new Pending('core/tag:updatefailed');
  266.                     e.preventDefault(); // This will prevent default error dialogue.
  267.                     str.get_strings([
  268.                         {key: 'confirm', component: 'core'},
  269.                         {key: 'nameuseddocombine', component: 'tag'},
  270.                         {key: 'yes', component: 'core'},
  271.                         {key: 'cancel', component: 'core'},
  272.                     ])
  273.                     .then(function(s) {
  274.                         return notification.confirm(s[0], s[1], s[2], s[3], function() {
  275.                             window.location.href = window.location.href + "&newname=" + encodeURIComponent(newvalue) +
  276.                                 "&tagid=" + encodeURIComponent(tagid) +
  277.                                 '&action=renamecombine&sesskey=' + M.cfg.sesskey;
  278.                         });
  279.                     })
  280.                     .always(pendingPromise.resolve)
  281.                     .catch(notification.exception);
  282.                 }
  283.             });
  285.             // Form for adding standard tags.
  286.             $('body').on('click', 'a[data-action=addstandardtag]', function(e) {
  287.                 var pendingPromise = new Pending('core/tag:addstandardtag');
  288.                 e.preventDefault();
  290.                 return ModalFactory.create({
  291.                     title: str.get_string('addotags', 'tag'),
  292.                     body: templates.render('core_tag/add_tags', {
  293.                         actionurl: window.location.href,
  294.                         sesskey: M.cfg.sesskey
  295.                     }),
  296.                     type: ModalFactory.types.SAVE_CANCEL
  297.                 })
  298.                 .then(function(modal) {
  299.                     modal.setSaveButtonText(str.get_string('continue', 'core'));
  301.                     // Handle save event.
  302.                     modal.getRoot().on(ModalEvents.save, function(e) {
  303.                         var tagsInput = $(e.currentTarget).find('#id_tagslist');
  304.                         var name = tagsInput.val().trim();
  306.                         // Set the text field's value to the trimmed value.
  307.                         tagsInput.val(name);
  309.                         // Add submit event listener to the form.
  310.                         var tagsForm = $('#addtags_form');
  311.                         tagsForm.on('submit', function(e) {
  312.                             // Validate the form.
  313.                             var form = $('#addtags_form');
  314.                             if (form[0].checkValidity() === false) {
  315.                                 e.preventDefault();
  316.                                 e.stopPropagation();
  317.                             }
  318.                             form.addClass('was-validated');
  320.                             // BS2 compatibility.
  321.                             $('[data-region="tagslistinput"]').addClass('error');
  322.                             var errorMessage = $('#id_tagslist_error_message');
  323.                             errorMessage.removeAttr('hidden');
  324.                             errorMessage.addClass('help-block');
  325.                         });
  327.                         // Try to submit the form.
  328.                         tagsForm.submit();
  330.                         return false;
  331.                     });
  333.                     // Handle hidden event.
  334.                     modal.getRoot().on(ModalEvents.hidden, function() {
  335.                         // Destroy when hidden.
  336.                         modal.destroy();
  337.                     });
  339.                     modal.show();
  341.                     return;
  343.                 })
  344.                 .always(pendingPromise.resolve)
  345.                 .catch(notification.exception);
  346.             });
  347.         },
  349.         /**
  350.          * Initialises tag collection management page.
  351.          *
  352.          * @method initManageCollectionsPage
  353.          */
  354.         initManageCollectionsPage: function() {
  355.             $('body').on('updated', '[data-inplaceeditable]', function(e) {
  356.                 var pendingPromise = new Pending('core/tag:initManageCollectionsPage-updated');
  358.                 var ajaxreturn = e.ajaxreturn,
  359.                     areaid, collid, isenabled;
  360.                 if (ajaxreturn.component === 'core_tag' && ajaxreturn.itemtype === 'tagareaenable') {
  361.                     areaid = $(this).attr('data-itemid');
  362.                     $(".tag-collections-table ul[data-collectionid] li[data-areaid=" + areaid + "]").hide();
  363.                     isenabled = ajaxreturn.value;
  364.                     if (isenabled === '1') {
  365.                         $(this).closest('tr').removeClass('dimmed_text');
  366.                         collid = $(this).closest('tr').find('[data-itemtype="tagareacollection"]').attr("data-value");
  367.                         $(".tag-collections-table ul[data-collectionid=" + collid + "] li[data-areaid=" + areaid + "]").show();
  368.                     } else {
  369.                         $(this).closest('tr').addClass('dimmed_text');
  370.                     }
  371.                 }
  372.                 if (ajaxreturn.component === 'core_tag' && ajaxreturn.itemtype === 'tagareacollection') {
  373.                     areaid = $(this).attr('data-itemid');
  374.                     $(".tag-collections-table ul[data-collectionid] li[data-areaid=" + areaid + "]").hide();
  375.                     collid = $(this).attr('data-value');
  376.                     isenabled = $(this).closest('tr').find('[data-itemtype="tagareaenable"]').attr("data-value");
  377.                     if (isenabled === "1") {
  378.                         $(".tag-collections-table ul[data-collectionid=" + collid + "] li[data-areaid=" + areaid + "]").show();
  379.                     }
  380.                 }
  382.                 pendingPromise.resolve();
  383.             });
  385.             $('body').on('click', '.addtagcoll > a', function(e) {
  386.                 var pendingPromise = new Pending('core/tag:initManageCollectionsPage-addtagcoll');
  388.                 e.preventDefault();
  389.                 var keys = [
  390.                     {
  391.                         key: 'addtagcoll',
  392.                         component: 'tag'
  393.                     },
  394.                     {
  395.                         key: 'create',
  396.                         component: 'core'
  397.                     }
  398.                 ];
  400.                 var href = $(this).attr('data-url');
  401.                 var saveButtonText = '';
  402.                 str.get_strings(keys)
  403.                 .then(function(langStrings) {
  404.                     var modalTitle = langStrings[0];
  405.                     saveButtonText = langStrings[1];
  406.                     var templateContext = {
  407.                         actionurl: href,
  408.                         sesskey: M.cfg.sesskey
  409.                     };
  410.                     return ModalFactory.create({
  411.                         title: modalTitle,
  412.                         body: templates.render('core_tag/add_tag_collection', templateContext),
  413.                         type: ModalFactory.types.SAVE_CANCEL
  414.                     });
  415.                 })
  416.                 .then(function(modal) {
  417.                     modal.setSaveButtonText(saveButtonText);
  419.                     // Handle save event.
  420.                     modal.getRoot().on(ModalEvents.save, function(e) {
  421.                         var collectionInput = $(e.currentTarget).find('#addtagcoll_name');
  422.                         var name = collectionInput.val().trim();
  423.                         // Set the text field's value to the trimmed value.
  424.                         collectionInput.val(name);
  426.                         // Add submit event listener to the form.
  427.                         var form = $('#addtagcoll_form');
  428.                         form.on('submit', function(e) {
  429.                             // Validate the form.
  430.                             if (form[0].checkValidity() === false) {
  431.                                 e.preventDefault();
  432.                                 e.stopPropagation();
  433.                             }
  434.                             form.addClass('was-validated');
  436.                             // BS2 compatibility.
  437.                             $('[data-region="addtagcoll_nameinput"]').addClass('error');
  438.                             var errorMessage = $('#id_addtagcoll_name_error_message');
  439.                             errorMessage.removeAttr('hidden');
  440.                             errorMessage.addClass('help-block');
  441.                         });
  443.                         // Try to submit the form.
  444.                         form.submit();
  446.                         return false;
  447.                     });
  449.                     // Handle hidden event.
  450.                     modal.getRoot().on(ModalEvents.hidden, function() {
  451.                         // Destroy when hidden.
  452.                         modal.destroy();
  453.                     });
  455.                     modal.show();
  457.                     return modal;
  459.                 })
  460.                 .always(pendingPromise.resolve)
  461.                 .catch(notification.exception);
  462.             });
  464.             $('body').on('click', '.tag-collections-table .action_delete', function(e) {
  465.                 var pendingPromise = new Pending('core/tag:initManageCollectionsPage-action_delete');
  467.                 e.preventDefault();
  468.                 var href = $(this).attr('data-url') + '&sesskey=' + M.cfg.sesskey;
  469.                 str.get_strings([
  470.                     {key: 'delete'},
  471.                     {key: 'suredeletecoll', component: 'tag', param: $(this).attr('data-collname')},
  472.                     {key: 'yes'},
  473.                     {key: 'no'},
  474.                 ])
  475.                 .then(function(s) {
  476.                     return notification.confirm(s[0], s[1], s[2], s[3], function() {
  477.                         window.location.href = href;
  478.                     });
  479.                 })
  480.                 .always(pendingPromise.resolve)
  481.                 .catch(notification.exception);
  482.             });
  483.         }
  484.     };
  485. });