MDL-50919 tags: new UI for managing tags
[moodle.git] / 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  * @package    core_tag
21  * @copyright  2015 Marina Glancy
22  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23  * @since      3.0
24  */
25 define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str', 'core/config'],
26         function($, ajax, templates, notification, str, cfg) {
27     return /** @alias module:core/tag */ {
29         /**
30          * Initialises handlers for AJAX methods.
31          *
32          * @method init
33          */
34         init_manage_page: function() {
36             var update_modified = function(el) {
37                 var row = el.closest('tr').get(0);
38                 if (row) {
39                     var td = $(row).find('td.col-timemodified').get(0);
40                     str.get_string('now').done(function(s) {
41                         $(td).html(s);
42                     });
43                 }
44             };
46             // Click handler for changing tag type.
47             $('.tag-management-table').delegate('.tagtype', 'click', function(e) {
48                 e.preventDefault();
49                 var target = $( this ),
50                     tagid = target.attr('data-id'),
51                     currentvalue = target.attr('data-value'),
52                     official = (currentvalue === "1") ? 0 : 1;
54                 ajax.call([{
55                     methodname: 'core_tag_update_tags',
56                     args: { tags : [ { id : tagid , official : official } ] },
57                     done: function(data) {
58                         if (data.tags[0] !== undefined) {
59                             templates.render('core_tag/tagtype', data.tags[0]).done(function(html) {
60                                 update_modified(target);
61                                 var parent = target.parent();
62                                 target.replaceWith(html);
63                                 parent.find('.tagtype').get(0).focus();
64                             });
65                         }
66                     }
67                 }]);
68             });
70             // Click handler for flagging/resetting tag flag.
71             $('.tag-management-table').delegate('.tagflag', 'click', function(e) {
72                 e.preventDefault();
73                 var target = $( this ),
74                     tagid = target.attr('data-id'),
75                     currentvalue = target.attr('data-value'),
76                     flag = (currentvalue === "0") ? 1 : 0;
78                 ajax.call([{
79                     methodname: 'core_tag_update_tags',
80                     args: { tags : [ { id : tagid , flag : flag } ] },
81                     done: function(data) {
82                         if (data.tags[0] !== undefined) {
83                             var row = target.closest('tr').get(0);
84                             if (row) {
85                                 if (data.tags[0].flag) {
86                                     $(row).addClass('flagged-tag');
87                                 } else {
88                                     $(row).removeClass('flagged-tag');
89                                 }
90                             }
91                             templates.render('core_tag/tagflag', data.tags[0]).done(function(html) {
92                                 update_modified(target);
93                                 var parent = target.parent();
94                                 target.replaceWith(html);
95                                 parent.find('.tagflag').get(0).focus();
96                             });
97                         }
98                     }
99                 }]);
100             });
102             // Confirmation for single tag delete link.
103             $('.tag-management-table').delegate('a.tagdelete', 'click', function(e) {
104                 e.preventDefault();
105                 var href = $(this).attr('href');
106                 str.get_strings([
107                         {key : 'delete'},
108                         {key : 'confirmdeletetag', component : 'tag'},
109                         {key : 'yes'},
110                         {key : 'no'},
111                     ]).done(function(s) {
112                         notification.confirm(s[0], s[1], s[2], s[3], function() {
113                             window.location.href = href;
114                         });
115                     }
116                 );
117             });
119             // Confirmation for bulk tag delete button.
120             $("#tag-management-delete").click(function(e){
121                 var form = $(this).closest('form').get(0),
122                     cnt = $(form).find("input[type=checkbox]:checked").length;
123                 if (!cnt) {
124                     return false;
125                 }
126                 e.preventDefault();
127                 str.get_strings([
128                         {key : 'delete'},
129                         {key : 'confirmdeletetags', component : 'tag'},
130                         {key : 'yes'},
131                         {key : 'no'},
132                     ]).done(function(s) {
133                         notification.confirm(s[0], s[1], s[2], s[3], function() {
134                             form.submit();
135                         });
136                     }
137                 );
138             });
140             // Edit tag name.
141             $('.tag-management-table').delegate('.tagnameedit', 'click keypress', function(e) {
142                 if (e.type === 'keypress' && e.keyCode !== 13) {
143                     return;
144                 }
145                 e.stopImmediatePropagation();
146                 e.preventDefault();
147                 var target = $(this),
148                     tdelement = $( target.closest('td').get(0) ),
149                     inputelement = $( tdelement.find('input').get(0) ),
150                     tagid = target.attr('data-id');
152                 var change_name = function(tagid, newname) {
153                     ajax.call([{
154                         methodname: 'core_tag_update_tags',
155                         args: { tags : [ { id : tagid , rawname : newname } ] },
156                         done: function(data) {
157                             if (data.tags[0] !== undefined) {
158                                 templates.render('core_tag/tagname', data.tags[0]).done(function(html) {
159                                     update_modified(tdelement);
160                                     tdelement.html(html);
161                                     $(tdelement.find('.tagnameedit').get(0)).focus();
162                                 });
163                             } else if (data.warnings[0] !== undefined) {
164                                 str.get_string('error').done(function(s) {
165                                     notification.alert(s, data.warnings[0].message);
166                                 });
167                             }
168                         }
169                     }]); };
171                 var turn_editing_off = function() {
172                     $('.tag-management-table td.tageditingon').each(function() {
173                         var td = $( this ),
174                             input = $( td.find('input').get(0) );
175                         input.off();
176                         td.removeClass('tageditingon');
177                         // Reset input value to the one that was there before editing.
178                         input.val(td.attr('data-value'));
179                     });
180                 };
182                 // Turn editing on for the current element and register handler for Enter/Esc keys.
183                 turn_editing_off();
184                 tdelement.addClass('tageditingon');
185                 tdelement.attr('data-value', inputelement.val());
186                 inputelement.select();
187                 inputelement.on('keypress focusout', function(e) {
188                     if (cfg.behatsiterunning && e.type === 'focusout') {
189                         // Behat triggers focusout too often.
190                         return;
191                     }
192                     if (e.type === 'keypress' && e.keyCode === 13) {
193                         change_name(tagid, inputelement.val());
194                         turn_editing_off();
195                     }
196                     if ((e.type === 'keypress' && e.keyCode === 27) || e.type === 'focusout') {
197                         turn_editing_off();
198                     }
199                 });
200             });
201         }
202     };
203 });