8530fb0126bd93327fc37fdffe42da271d0037bf
[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             M.util.js_complete(this.pendingid);
66         }
67         this.update_visibility_of_file_pickers();
68     },
70     after_all_images_loaded : function () {
71         this.update_padding_sizes_all();
72         this.update_drag_instances();
73         this.reposition_drags_for_form();
74         this.set_options_for_drag_item_selectors();
75         this.setup_form_events();
76         Y.later(500, this, this.reposition_drags_for_form, [], true);
77     },
79     constrain_image_size : function (e, imagetype) {
80         var maxsize = this.get('maxsizes')[imagetype];
81         var reduceby = Math.max(e.target.get('width') / maxsize.width,
82                                 e.target.get('height') / maxsize.height);
83         if (reduceby > 1) {
84             e.target.set('width', Math.floor(e.target.get('width') / reduceby));
85         }
86         e.target.addClass('constrained');
87         e.target.detach('load', this.constrain_image_size);
88     },
90     load_drag_homes : function () {
91         // Set up drag items homes.
92         for (var i = 0; i < this.form.get_form_value('noitems', []); i++) {
93             this.load_drag_home(i);
94         }
95     },
97     load_drag_home : function (dragitemno) {
98         var url = null;
99         if ('image' === this.form.get_form_value('drags', [dragitemno, 'dragitemtype'])) {
100             url = this.fp.file(this.form.to_name_with_index('dragitem', [dragitemno])).href;
101         }
102         this.doc.add_or_update_drag_item_home(dragitemno, url,
103                 this.form.get_form_value('draglabel', [dragitemno]),
104                 this.form.get_form_value('drags', [dragitemno, 'draggroup']));
105     },
107     update_drag_instances : function () {
108         // Set up drop zones.
109         for (var i = 0; i < this.form.get_form_value('nodropzone', []); i++) {
110             var dragitemno = this.form.get_form_value('drops', [i, 'choice']);
111             if (dragitemno !== '0' && (this.doc.drag_item(i) === null)) {
112                 var drag = this.doc.clone_new_drag_item(i, dragitemno - 1);
113                 if (drag !== null) {
114                     this.doc.draggable_for_form(drag);
115                 }
116             }
117         }
118     },
119     set_options_for_drag_item_selectors : function () {
120         var dragitemsoptions = {0: ''};
121         for (var i = 0; i < this.form.get_form_value('noitems', []); i++) {
122             var label = this.form.get_form_value('draglabel', [i]);
123             var file = this.fp.file(this.form.to_name_with_index('dragitem', [i]));
124             if ('image' === this.form.get_form_value('drags', [i, 'dragitemtype'])
125                                                                     && file.name !== null) {
126                 dragitemsoptions[i + 1] = (i + 1) + '. ' + label + ' (' + file.name + ')';
127             } else if (label !== '') {
128                 dragitemsoptions[i + 1] = (i + 1) + '. ' + label;
129             }
130         }
131         for (i = 0; i < this.form.get_form_value('nodropzone', []); i++) {
132             var selector = Y.one('#id_drops_' + i + '_choice');
133             var selectedvalue = selector.get('value');
134             selector.all('option').remove(true);
135             for (var value in dragitemsoptions) {
136                 value = + value;
137                 var option = '<option value="' + value + '">' + dragitemsoptions[value] + '</option>';
138                 selector.append(option);
139                 var optionnode = selector.one('option[value="' + value + '"]');
140                 if (value === + selectedvalue) {
141                     optionnode.set('selected', true);
142                 } else {
143                     if (value !== 0) { // No item option is always selectable.
144                         var cbel = Y.one('#id_drags_' + (value - 1) + '_infinite');
145                         if (cbel && !cbel.get('checked')) {
146                             if (this.check_dropzone_for_selected_value(value)) {
147                                 optionnode.set('disabled', true);
148                             }
149                         }
150                     }
151                 }
152             }
153         }
154     },
156     stop_selector_events : function () {
157         Y.all('fieldset#id_dropzoneheader select').detachAll();
158     },
160     check_dropzone_for_selected_value: function(value) {
161         return Y.all('fieldset#id_dropzoneheader select').some(function(selectNode) {
162             return Number(selectNode.get('value')) === value;
163         });
164     },
166     setup_form_events : function () {
167         // Events triggered by changes to form data.
169         // X and y coordinates.
170         Y.all('fieldset#id_dropzoneheader input').on('blur', function (e) {
171             var name = e.target.getAttribute('name');
172             var draginstanceno = this.form.from_name_with_index(name).indexes[0];
173             var fromform = [this.form.get_form_value('drops', [draginstanceno, 'xleft']),
174                             this.form.get_form_value('drops', [draginstanceno, 'ytop'])];
175             var constrainedxy = this.constrain_xy(draginstanceno, fromform);
176             this.form.set_form_value('drops', [draginstanceno, 'xleft'], constrainedxy[0]);
177             this.form.set_form_value('drops', [draginstanceno, 'ytop'], constrainedxy[1]);
178         }, this);
180         // Change in selected item.
181         Y.all('fieldset#id_dropzoneheader select').on('change', function (e) {
182             var name = e.target.getAttribute('name');
183             var draginstanceno = this.form.from_name_with_index(name).indexes[0];
184             var old = this.doc.drag_item(draginstanceno);
185             if (old !== null) {
186                 old.remove(true);
187             }
188             this.draw_dd_area();
189         }, this);
191         for (var i = 0; i < this.form.get_form_value('noitems', []); i++) {
192             // Change to group selector.
193             Y.all('#fgroup_id_drags_' + i + ' select.draggroup').on('change', this.clear_dd_area, this);
194             Y.all('#fgroup_id_drags_' + i + ' select.dragitemtype').on('change', this.clear_dd_area, this);
195             Y.all('fieldset#draggableitemheader_' + i + ' input[type="text"]')
196                                 .on('blur', this.set_options_for_drag_item_selectors, this);
197             // Change to infinite checkbox.
198             Y.all('fieldset#draggableitemheader_' + i + ' input[type="checkbox"]')
199                                 .on('change', this.set_options_for_drag_item_selectors, this);
200         }
201         // Event on file picker new file selection.
202         Y.after(function (e) {
203             var name = this.fp.name(e.id);
204             if (name !== 'bgimage') {
205                 this.doc.drag_items().remove(true);
206             }
207             this.draw_dd_area();
208         }, M.form_filepicker, 'callback', this);
209     },
211     clear_dd_area: function() {
212         this.doc.drag_items().remove(true);
213         this.draw_dd_area();
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         M.util.js_complete(this.pendingid);
234     },
236     reposition_drag_for_form : function (draginstanceno) {
237         var drag = this.doc.drag_item(draginstanceno);
238         if (null !== drag && !drag.hasClass('yui3-dd-dragging')) {
239             var fromform = [this.form.get_form_value('drops', [draginstanceno, 'xleft']),
240                             this.form.get_form_value('drops', [draginstanceno, 'ytop'])];
241             if (fromform[0] === '' && fromform[1] === '') {
242                 var dragitemno = drag.getData('dragitemno');
243                 drag.setXY(this.doc.drag_item_home(dragitemno).getXY());
244             } else {
245                 drag.setXY(this.convert_to_window_xy(fromform));
246             }
247         }
248     },
249     set_drag_xy : function (draginstanceno, xy) {
250         xy = this.constrain_xy(draginstanceno, this.convert_to_bg_img_xy(xy));
251         this.form.set_form_value('drops', [draginstanceno, 'xleft'], Math.round(xy[0]));
252         this.form.set_form_value('drops', [draginstanceno, 'ytop'], Math.round(xy[1]));
253     },
254     reset_drag_xy : function (draginstanceno) {
255         this.form.set_form_value('drops', [draginstanceno, 'xleft'], '');
256         this.form.set_form_value('drops', [draginstanceno, 'ytop'], '');
257     },
259     //make sure xy value is not out of bounds of bg image
260     constrain_xy : function (draginstanceno, bgimgxy) {
261         var drag = this.doc.drag_item(draginstanceno);
262         var xleftconstrained =
263             Math.min(bgimgxy[0], this.doc.bg_img().get('width') - drag.get('offsetWidth'));
264         var ytopconstrained =
265             Math.min(bgimgxy[1], this.doc.bg_img().get('height') - drag.get('offsetHeight'));
266         xleftconstrained = Math.max(xleftconstrained, 0);
267         ytopconstrained = Math.max(ytopconstrained, 0);
268         return [xleftconstrained, ytopconstrained];
269     },
270     convert_to_bg_img_xy : function (windowxy) {
271         return [Number(windowxy[0]) - this.doc.bg_img().getX() - 1,
272                 Number(windowxy[1]) - this.doc.bg_img().getY() - 1];
273     },
275     /**
276      * Low level operations on form.
277      */
278     form : {
279         to_name_with_index : function(name, indexes) {
280             var indexstring = name;
281             for (var i = 0; i < indexes.length; i++) {
282                 indexstring = indexstring + '[' + indexes[i] + ']';
283             }
284             return indexstring;
285         },
286         get_el : function (name, indexes) {
287             var form = document.getElementById('mform1');
288             return form.elements[this.to_name_with_index(name, indexes)];
289         },
290         get_form_value : function(name, indexes) {
291             var el = this.get_el(name, indexes);
292             if (el.type === 'checkbox') {
293                 return el.checked;
294             } else {
295                 return el.value;
296             }
297         },
298         set_form_value : function(name, indexes, value) {
299             var el = this.get_el(name, indexes);
300             if (el.type === 'checkbox') {
301                 el.checked = value;
302             } else {
303                 el.value = value;
304             }
305         },
306         from_name_with_index : function(name) {
307             var toreturn = {};
308             toreturn.indexes = [];
309             var bracket = name.indexOf('[');
310             toreturn.name = name.substring(0, bracket);
311             while (bracket !== -1) {
312                 var end = name.indexOf(']', bracket + 1);
313                 toreturn.indexes.push(name.substring(bracket + 1, end));
314                 bracket = name.indexOf('[', end + 1);
315             }
316             return toreturn;
317         }
318     },
320     file_pickers : function () {
321         var draftitemidstoname;
322         var nametoparentnode;
323         if (draftitemidstoname === undefined) {
324             draftitemidstoname = {};
325             nametoparentnode = {};
326             var filepickers = Y.all('form.mform input.filepickerhidden');
327             filepickers.each(function(filepicker) {
328                 draftitemidstoname[filepicker.get('value')] = filepicker.get('name');
329                 nametoparentnode[filepicker.get('name')] = filepicker.get('parentNode');
330             }, this);
331         }
332         var toreturn = {
333             file : function (name) {
334                 var parentnode = nametoparentnode[name];
335                 var fileanchor = parentnode.one('div.filepicker-filelist a');
336                 if (fileanchor) {
337                     return {href : fileanchor.get('href'), name : fileanchor.get('innerHTML')};
338                 } else {
339                     return {href : null, name : null};
340                 }
341             },
342             name : function (draftitemid) {
343                 return draftitemidstoname[draftitemid];
344             }
345         };
346         return toreturn;
347     }
348 }, {NAME : DDIMAGEORTEXTFORMNAME, ATTRS : {maxsizes:{value:null}}});
349 M.qtype_ddimageortext = M.qtype_ddimageortext || {};
350 M.qtype_ddimageortext.init_form = function(config) {
351     return new DDIMAGEORTEXT_FORM(config);
352 };