MDL-50919 tags: new UI for managing tags
[moodle.git] / lib / amd / src / tag.js
CommitLineData
8e355853
MG
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/>.
15
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 */
25define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str', 'core/config'],
26 function($, ajax, templates, notification, str, cfg) {
27 return /** @alias module:core/tag */ {
28
29 /**
30 * Initialises handlers for AJAX methods.
31 *
32 * @method init
33 */
34 init_manage_page: function() {
35
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 };
45
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;
53
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 });
69
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;
77
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 });
101
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 });
118
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 });
139
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');
151
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 }]); };
170
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 };
181
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});