a786dca647f2f4b6382c0f9015bff51c56094c2e
[moodle.git] / question / type / ddimageortext / yui / src / form / js / form.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  * This is the question editing form code.
18  */
19 var DDIMAGEORTEXTFORMNAME = 'moodle-qtype_ddimageortext-form';
20 var DDIMAGEORTEXT_FORM = function() {
21     DDIMAGEORTEXT_FORM.superclass.constructor.apply(this, arguments);
22 };
24 Y.extend(DDIMAGEORTEXT_FORM, M.qtype_ddimageortext.dd_base_class, {
25     pendingid: '',
26     fp : null,
28     initializer : function() {
29         this.pendingid = 'qtype_ddimageortext-form-' + Math.random().toString(36).slice(2); // Random string.
30         M.util.js_pending(this.pendingid);
31         this.fp = this.file_pickers();
32         var tn = Y.one(this.get('topnode'));
33         tn.one('div.fcontainer').append('<div class="ddarea"><div class="droparea"></div><div class="dragitems"></div>' +
34                 '<div class="dropzones"></div></div>');
35         this.doc = this.doc_structure(this);
36         this.draw_dd_area();
37     },
39     draw_dd_area : function() {
40         var bgimageurl = this.fp.file('bgimage').href;
41         this.stop_selector_events();
42         this.set_options_for_drag_item_selectors();
43         if (bgimageurl !== null) {
44             this.doc.load_bg_img(bgimageurl);
45             this.load_drag_homes();
47             var drop = new Y.DD.Drop({
48                 node: this.doc.bg_img()
49             });
50             //Listen for a drop:hit on the background image
51             drop.on('drop:hit', function(e) {
52                 e.drag.get('node').setData('gooddrop', true);
53             });
55             this.afterimageloaddone = false;
56             this.doc.bg_img().on('load', this.constrain_image_size, this, 'bgimage');
57             this.doc.drag_item_homes()
58                                     .on('load', this.constrain_image_size, this, 'dragimage');
59             this.doc.bg_img().after('load', this.poll_for_image_load, this,
60                                                     true, 0, this.after_all_images_loaded);
61             this.doc.drag_item_homes() .after('load', this.poll_for_image_load, this,
62                                                     true, 0, this.after_all_images_loaded);
63         } else {
64             this.setup_form_events();
65         }
66         this.update_visibility_of_file_pickers();
67     },
69     after_all_images_loaded : function () {
70         this.update_padding_sizes_all();
71         this.update_drag_instances();
72         this.reposition_drags_for_form();
73         this.set_options_for_drag_item_selectors();
74         this.setup_form_events();
75         Y.later(500, this, this.reposition_drags_for_form, [], true);
76     },
78     constrain_image_size : function (e, imagetype) {
79         var maxsize = this.get('maxsizes')[imagetype];
80         var reduceby = Math.max(e.target.get('width') / maxsize.width,
81                                 e.target.get('height') / maxsize.height);
82         if (reduceby > 1) {
83             e.target.set('width', Math.floor(e.target.get('width') / reduceby));
84         }
85         e.target.addClass('constrained');
86         e.target.detach('load', this.constrain_image_size);
87     },
89     load_drag_homes : function () {
90         // Set up drag items homes.
91         for (var i = 0; i < this.form.get_form_value('noitems', []); i++) {
92             this.load_drag_home(i);
93         }
94     },
96     load_drag_home : function (dragitemno) {
97         var url = null;
98         if ('image' === this.form.get_form_value('drags', [dragitemno, 'dragitemtype'])) {
99             url = this.fp.file(this.form.to_name_with_index('dragitem', [dragitemno])).href;
100         }
101         this.doc.add_or_update_drag_item_home(dragitemno, url,
102                 this.form.get_form_value('draglabel', [dragitemno]),
103                 this.form.get_form_value('drags', [dragitemno, 'draggroup']));
104     },
106     update_drag_instances : function () {
107         // Set up drop zones.
108         for (var i = 0; i < this.form.get_form_value('nodropzone', []); i++) {
109             var dragitemno = this.form.get_form_value('drops', [i, 'choice']);
110             if (dragitemno !== '0' && (this.doc.drag_item(i) === null)) {
111                 var drag = this.doc.clone_new_drag_item(i, dragitemno - 1);
112                 if (drag !== null) {
113                     this.doc.draggable_for_form(drag);
114                 }
115             }
116         }
117     },
118     set_options_for_drag_item_selectors : function () {
119         var dragitemsoptions = {0: ''};
120         for (var i = 0; i < this.form.get_form_value('noitems', []); i++) {
121             var label = this.form.get_form_value('draglabel', [i]);
122             var file = this.fp.file(this.form.to_name_with_index('dragitem', [i]));
123             if ('image' === this.form.get_form_value('drags', [i, 'dragitemtype'])
124                                                                     && file.name !== null) {
125                 dragitemsoptions[i + 1] = (i + 1) + '. ' + label + ' (' + file.name + ')';
126             } else if (label !== '') {
127                 dragitemsoptions[i + 1] = (i + 1) + '. ' + label;
128             }
129         }
130         for (i = 0; i < this.form.get_form_value('nodropzone', []); i++) {
131             var selector = Y.one('#id_drops_' + i + '_choice');
132             var selectedvalue = selector.get('value');
133             selector.all('option').remove(true);
134             for (var value in dragitemsoptions) {
135                 value = + value;
136                 var option = '<option value="' + value + '">' + dragitemsoptions[value] + '</option>';
137                 selector.append(option);
138                 var optionnode = selector.one('option[value="' + value + '"]');
139                 if (value === + selectedvalue) {
140                     optionnode.set('selected', true);
141                 } else {
142                     if (value !== 0) { // No item option is always selectable.
143                         var cbel = Y.one('#id_drags_' + (value - 1) + '_infinite');
144                         if (cbel && !cbel.get('checked')) {
145                             Y.all('fieldset#id_dropzoneheader select').some(function (selector) {
146                                 if (Number(selector.get('value')) === value) {
147                                     optionnode.set('disabled', true);
148                                     return true; // Stop looping.
149                                 }
150                                 return false;
151                             }, this);
152                         }
153                     }
154                 }
155             }
156         }
157     },
159     stop_selector_events : function () {
160         Y.all('fieldset#id_dropzoneheader select').detachAll();
161     },
163     setup_form_events : function () {
164         // Events triggered by changes to form data.
166         // X and y coordinates.
167         Y.all('fieldset#id_dropzoneheader input').on('blur', function (e) {
168             var name = e.target.getAttribute('name');
169             var draginstanceno = this.form.from_name_with_index(name).indexes[0];
170             var fromform = [this.form.get_form_value('drops', [draginstanceno, 'xleft']),
171                             this.form.get_form_value('drops', [draginstanceno, 'ytop'])];
172             var constrainedxy = this.constrain_xy(draginstanceno, fromform);
173             this.form.set_form_value('drops', [draginstanceno, 'xleft'], constrainedxy[0]);
174             this.form.set_form_value('drops', [draginstanceno, 'ytop'], constrainedxy[1]);
175         }, this);
177         // Change in selected item.
178         Y.all('fieldset#id_dropzoneheader select').on('change', function (e) {
179             var name = e.target.getAttribute('name');
180             var draginstanceno = this.form.from_name_with_index(name).indexes[0];
181             var old = this.doc.drag_item(draginstanceno);
182             if (old !== null) {
183                 old.remove(true);
184             }
185             this.draw_dd_area();
186         }, this);
188         for (var i = 0; i < this.form.get_form_value('noitems', []); i++) {
189             // Change to group selector.
190             Y.all('#fgroup_id_drags_' + i + ' select.draggroup').on(
191                     'change', function () {
192                 this.doc.drag_items().remove(true);
193                 this.draw_dd_area();
194             }, this);
195             Y.all('#fgroup_id_drags_' + i + ' select.dragitemtype').on(
196                     'change', function () {
197                 this.doc.drag_items().remove(true);
198                 this.draw_dd_area();
199             }, this);
200             Y.all('fieldset#draggableitemheader_' + i + ' input[type="text"]')
201                                 .on('blur', this.set_options_for_drag_item_selectors, this);
202             // Change to infinite checkbox.
203             Y.all('fieldset#draggableitemheader_' + i + ' input[type="checkbox"]')
204                                 .on('change', this.set_options_for_drag_item_selectors, this);
205         }
206         // Event on file picker new file selection.
207         Y.after(function (e) {
208             var name = this.fp.name(e.id);
209             if (name !== 'bgimage') {
210                 this.doc.drag_items().remove(true);
211             }
212             this.draw_dd_area();
213         }, M.form_filepicker, 'callback', this);
214     },
216     update_visibility_of_file_pickers : function() {
217         for (var i = 0; i < this.form.get_form_value('noitems', []); i++) {
218             if ('image' === this.form.get_form_value('drags', [i, 'dragitemtype'])) {
219                 Y.one('input#id_dragitem_' + i).get('parentNode').get('parentNode')
220                             .setStyle('display', 'block');
221             } else {
222                 Y.one('input#id_dragitem_' + i).get('parentNode').get('parentNode')
223                             .setStyle('display', 'none');
224             }
225         }
226     },
228     reposition_drags_for_form : function() {
229         this.doc.drag_items().each(function (drag) {
230             var draginstanceno = drag.getData('draginstanceno');
231             this.reposition_drag_for_form(draginstanceno);
232         }, this);
233     },
235     reposition_drag_for_form : function (draginstanceno) {
236         var drag = this.doc.drag_item(draginstanceno);
237         if (null !== drag && !drag.hasClass('yui3-dd-dragging')) {
238             var fromform = [this.form.get_form_value('drops', [draginstanceno, 'xleft']),
239                             this.form.get_form_value('drops', [draginstanceno, 'ytop'])];
240             if (fromform[0] === '' && fromform[1] === '') {
241                 var dragitemno = drag.getData('dragitemno');
242                 drag.setXY(this.doc.drag_item_home(dragitemno).getXY());
243             } else {
244                 drag.setXY(this.convert_to_window_xy(fromform));
245             }
246         }
247     },
248     set_drag_xy : function (draginstanceno, xy) {
249         xy = this.constrain_xy(draginstanceno, this.convert_to_bg_img_xy(xy));
250         this.form.set_form_value('drops', [draginstanceno, 'xleft'], Math.round(xy[0]));
251         this.form.set_form_value('drops', [draginstanceno, 'ytop'], Math.round(xy[1]));
252     },
253     reset_drag_xy : function (draginstanceno) {
254         this.form.set_form_value('drops', [draginstanceno, 'xleft'], '');
255         this.form.set_form_value('drops', [draginstanceno, 'ytop'], '');
256     },
258     //make sure xy value is not out of bounds of bg image
259     constrain_xy : function (draginstanceno, bgimgxy) {
260         var drag = this.doc.drag_item(draginstanceno);
261         var xleftconstrained =
262             Math.min(bgimgxy[0], this.doc.bg_img().get('width') - drag.get('offsetWidth'));
263         var ytopconstrained =
264             Math.min(bgimgxy[1], this.doc.bg_img().get('height') - drag.get('offsetHeight'));
265         xleftconstrained = Math.max(xleftconstrained, 0);
266         ytopconstrained = Math.max(ytopconstrained, 0);
267         return [xleftconstrained, ytopconstrained];
268     },
269     convert_to_bg_img_xy : function (windowxy) {
270         return [Number(windowxy[0]) - this.doc.bg_img().getX() - 1,
271                 Number(windowxy[1]) - this.doc.bg_img().getY() - 1];
272     },
274     /**
275      * Low level operations on form.
276      */
277     form : {
278         to_name_with_index : function(name, indexes) {
279             var indexstring = name;
280             for (var i = 0; i < indexes.length; i++) {
281                 indexstring = indexstring + '[' + indexes[i] + ']';
282             }
283             return indexstring;
284         },
285         get_el : function (name, indexes) {
286             var form = document.getElementById('mform1');
287             return form.elements[this.to_name_with_index(name, indexes)];
288         },
289         get_form_value : function(name, indexes) {
290             var el = this.get_el(name, indexes);
291             if (el.type === 'checkbox') {
292                 return el.checked;
293             } else {
294                 return el.value;
295             }
296         },
297         set_form_value : function(name, indexes, value) {
298             var el = this.get_el(name, indexes);
299             if (el.type === 'checkbox') {
300                 el.checked = value;
301             } else {
302                 el.value = value;
303             }
304         },
305         from_name_with_index : function(name) {
306             var toreturn = {};
307             toreturn.indexes = [];
308             var bracket = name.indexOf('[');
309             toreturn.name = name.substring(0, bracket);
310             while (bracket !== -1) {
311                 var end = name.indexOf(']', bracket + 1);
312                 toreturn.indexes.push(name.substring(bracket + 1, end));
313                 bracket = name.indexOf('[', end + 1);
314             }
315             return toreturn;
316         }
317     },
319     file_pickers : function () {
320         var draftitemidstoname;
321         var nametoparentnode;
322         if (draftitemidstoname === undefined) {
323             draftitemidstoname = {};
324             nametoparentnode = {};
325             var filepickers = Y.all('form.mform input.filepickerhidden');
326             filepickers.each(function(filepicker) {
327                 draftitemidstoname[filepicker.get('value')] = filepicker.get('name');
328                 nametoparentnode[filepicker.get('name')] = filepicker.get('parentNode');
329             }, this);
330         }
331         var toreturn = {
332             file : function (name) {
333                 var parentnode = nametoparentnode[name];
334                 var fileanchor = parentnode.one('div.filepicker-filelist a');
335                 if (fileanchor) {
336                     return {href : fileanchor.get('href'), name : fileanchor.get('innerHTML')};
337                 } else {
338                     return {href : null, name : null};
339                 }
340             },
341             name : function (draftitemid) {
342                 return draftitemidstoname[draftitemid];
343             }
344         };
345         return toreturn;
346     }
347 }, {NAME : DDIMAGEORTEXTFORMNAME, ATTRS : {maxsizes:{value:null}}});
348 M.qtype_ddimageortext = M.qtype_ddimageortext || {};
349 M.qtype_ddimageortext.init_form = function(config) {
350     return new DDIMAGEORTEXT_FORM(config);
351 };