From 51ed23519a478f7ab76b8d44b4cf87171cdb8be8 Mon Sep 17 00:00:00 2001
From: Steffen Pegenau <steffen.pegenau@hrz.tu-darmstadt.de>
Date: Mon, 18 Jul 2016 11:42:30 +0200
Subject: [PATCH] MDL-55200 question type ddmarker: Display coordinates on
 image

To make the creation of dropzones easier, the mouse coordinates are shown.
---
 .../moodle-qtype_ddmarker-form-debug.js       | 23 +++++++++++++++----
 .../moodle-qtype_ddmarker-form-min.js         |  2 +-
 .../moodle-qtype_ddmarker-form.js             | 23 +++++++++++++++----
 .../type/ddmarker/yui/src/form/js/form.js     | 23 +++++++++++++++----
 4 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js
index 13d6512bf2eee..4d60ffac64ba5 100644
--- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js
+++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-debug.js
@@ -32,10 +32,14 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         var tn = Y.one(this.get('topnode'));
         tn.one('div.fcontainer').append(
                 '<div class="ddarea">' +
-                    '<div class="markertexts"></div>' +
-                    '<div class="droparea"></div>' +
-                    '<div class="dropzones"></div>' +
-                    '<div class="grid"></div>' +
+                '<div class="markertexts"></div>' +
+                '<div class="droparea"></div>' +
+                '<div class="dropzones"></div>' +
+                '<ul class="pager">' +
+                '<li><span id="xcoordpreview">X = </span></li>' +
+                '<li><span id="ycoordpreview">Y = </span></li>' +
+                '</ul>' +
+                '<div class="grid"></div>' +
                 '</div>');
         this.doc = this.doc_structure(this);
         this.stop_selector_events();
@@ -44,6 +48,15 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         Y.later(500, this, this.update_drop_zones, [pendingid], true);
         Y.after(this.load_bg_image, M.form_filepicker, 'callback', this);
         this.load_bg_image();
+
+        var topnode = Y.one(this.get('topnode'));
+        topnode.one('.grid').on('mousemove', function (e) {
+            var img = topnode.one('.dropbackground');
+            var x = Math.round(Number(e.pageX) - img.getX() - 1);
+            var y = Math.round(Number(e.pageY) - img.getY() - 1);
+            topnode.one('#xcoordpreview').setHTML("X = " + x);
+            topnode.one('#ycoordpreview').setHTML("Y = " + y);
+        });
     },
 
     load_bg_image : function() {
@@ -118,7 +131,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         }
     },
     set_options_for_drag_item_selectors : function () {
-        var dragitemsoptions = {'0': ''};
+        var dragitemsoptions = {0: ''};
         for (var i = 1; i <= this.form.get_form_value('noitems', []); i++) {
             var label = this.get_marker_text(i);
             if (label !== "") {
diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js
index 8247169c3e9a4..41fc7ca0f2710 100644
--- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js
+++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form-min.js
@@ -1 +1 @@
-YUI.add("moodle-qtype_ddmarker-form",function(e,t){var n="moodle-qtype_ddmarker-form",r=function(){r.superclass.constructor.apply(this,arguments)};e.extend(r,M.qtype_ddmarker.dd_base_class,{fp:null,initializer:function(){var t="qtype_ddmarker-form-"+Math.random().toString(36).slice(2);M.util.js_pending(t),this.fp=this.file_pickers();var n=e.one(this.get("topnode"));n.one("div.fcontainer").append('<div class="ddarea"><div class="markertexts"></div><div class="droparea"></div><div class="dropzones"></div><div class="grid"></div></div>'),this.doc=this.doc_structure(this),this.stop_selector_events(),this.set_options_for_drag_item_selectors(),this.setup_form_events(),e.later(500,this,this.update_drop_zones,[t],!0),e.after(this.load_bg_image,M.form_filepicker,"callback",this),this.load_bg_image()},load_bg_image:function(){var t=this.fp.file("bgimage").href;if(t!==null){this.doc.load_bg_img(t);var n=new e.DD.Drop({node:this.doc.bg_img()});n.on("drop:hit",function(e){e.drag.get("node").setData("gooddrop",!0)}),this.afterimageloaddone=!1,this.doc.bg_img().on("load",this.constrain_image_size,this)}},constrain_image_size:function(e){var t=this.get("maxsizes").bgimage,n=Math.max(e.target.get("width")/t.width,e.target.get("height")/t.height);n>1&&e.target.set("width",Math.floor(e.target.get("width")/n)),e.target.addClass("constrained"),e.target.detach("load",this.constrain_image_size)},update_drop_zones:function(t){this.graphics!==null&&this.graphics.destroy(),this.restart_colours(),this.graphics=new e.Graphic({render:"div.ddarea div.dropzones"});var n=this.form.get_form_value("nodropzone",[]);for(var r=0;r<n;r++){var i=this.form.get_form_value("drops",[r,"choice"]),s=this.get_marker_text(i),o=this.form.get_form_value("drops",[r,"shape"]),u=this.get_coords(r),a=this.get_next_colour();e.one("input#id_drops_"+r+"_coords").setStyle("background-color",a),this.draw_drop_zone(r,s,o,u,a,!1)}this.doc.bg_img()&&e.one("div.ddarea .grid").setXY(this.convert_to_window_xy([0,0])).setStyle("width",this.doc.bg_img().get("width")).setStyle("height",this.doc.bg_img().get("height")),M.util.js_complete(t)},get_coords:function(e){var t=this.form.get_form_value("drops",[e,"coords"]);return t.replace(new RegExp("\\s*","g"),"")},get_marker_text:function(e){if(Number(e)!==0){var t=this.form.get_form_value("drags",[e-1,"label"]);return t.replace(new RegExp("^\\s*(.*)\\s*$"),"$1")}return""},set_options_for_drag_item_selectors:function(){var t={0:""};for(var n=1;n<=this.form.get_form_value("noitems",[]);n++){var r=this.get_marker_text(n);r!==""&&(t[n]=e.Escape.html(r))}var i=[],s;for(n=0;n<this.form.get_form_value("nodropzone",[]);n++)s=e.one("#id_drops_"+n+"_choice"),i[n]=Number(s.get("value"));for(n=0;n<this.form.get_form_value("nodropzone",[]);n++){s=e.one("#id_drops_"+n+"_choice"),s.all("option").remove(!0);for(var o in t){o=Number(o);var u='<option value="'+o+'">'+t[o]+"</option>";s.append(u);var a=s.one('option[value="'+o+'"]');if(o===i[n])a.set("selected",!0);else if(o!==0){var f=this.form.get_form_value("drags",[o-1,"noofdrags"]);if(Number(f)!==0)for(var l in i)if(Number(i[l])===o){if(Number(f)===1){a.set("disabled",!0);break}f--}}}}},stop_selector_events:function(){e.all("fieldset#id_dropzoneheader select").detachAll()},setup_form_events:function(){e.all("fieldset#id_draggableitemheader input").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_draggableitemheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_dropzoneheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this)},form:{to_name_with_index:function(e,t){var n=e;for(var r=0;r<t.length;r++)n=n+"["+t[r]+"]";return n},get_el:function(e,t){var n=document.getElementById("mform1");return n.elements[this.to_name_with_index(e,t)]},get_form_value:function(e,t){var n=this.get_el(e,t);return n.type==="checkbox"?n.checked:n.value},set_form_value:function(e,t,n){var r=this.get_el(e,t);r.type==="checkbox"?r.checked=n:r.value=n},from_name_with_index:function(e){var t={};t.indexes=[];var n=e.indexOf("[");t.name=e.substring(0,n);while(n!==-1){var r=e.indexOf("]",n+1);t.indexes.push(e.substring(n+1,r)),n=e.indexOf("[",r+1)}return t}},file_pickers:function(){var t,n;if(t===undefined){t={},n={};var r=e.all("form.mform input.filepickerhidden");r.each(function(e){t[e.get("value")]=e.get("name"),n[e.get("name")]=e.get("parentNode")},this)}var i={file:function(e){var t=n[e],r=t.one("div.filepicker-filelist a");return r?{href:r.get("href"),name:r.get("innerHTML")}:{href:null,name:null}},name:function(e){return t[e]}};return i}},{NAME:n,ATTRS:{maxsizes:{value:null}}}),M.qtype_ddmarker=M.qtype_ddmarker||{},M.qtype_ddmarker.init_form=function(e){return new r(e)}},"@VERSION@",{requires:["moodle-qtype_ddmarker-dd","form_filepicker","graphics","escape"]});
+YUI.add("moodle-qtype_ddmarker-form",function(e,t){var n="moodle-qtype_ddmarker-form",r=function(){r.superclass.constructor.apply(this,arguments)};e.extend(r,M.qtype_ddmarker.dd_base_class,{fp:null,initializer:function(){var t="qtype_ddmarker-form-"+Math.random().toString(36).slice(2);M.util.js_pending(t),this.fp=this.file_pickers();var n=e.one(this.get("topnode"));n.one("div.fcontainer").append('<div class="ddarea"><div class="markertexts"></div><div class="droparea"></div><div class="dropzones"></div><ul class="pager"><li><span id="xcoordpreview">X = </span></li><li><span id="ycoordpreview">Y = </span></li></ul><div class="grid"></div></div>'),this.doc=this.doc_structure(this),this.stop_selector_events(),this.set_options_for_drag_item_selectors(),this.setup_form_events(),e.later(500,this,this.update_drop_zones,[t],!0),e.after(this.load_bg_image,M.form_filepicker,"callback",this),this.load_bg_image();var r=e.one(this.get("topnode"));r.one(".grid").on("mousemove",function(e){var t=r.one(".dropbackground"),n=Math.round(Number(e.pageX)-t.getX()-1),i=Math.round(Number(e.pageY)-t.getY()-1);r.one("#xcoordpreview").setHTML("X = "+n),r.one("#ycoordpreview").setHTML("Y = "+i)})},load_bg_image:function(){var t=this.fp.file("bgimage").href;if(t!==null){this.doc.load_bg_img(t);var n=new e.DD.Drop({node:this.doc.bg_img()});n.on("drop:hit",function(e){e.drag.get("node").setData("gooddrop",!0)}),this.afterimageloaddone=!1,this.doc.bg_img().on("load",this.constrain_image_size,this)}},constrain_image_size:function(e){var t=this.get("maxsizes").bgimage,n=Math.max(e.target.get("width")/t.width,e.target.get("height")/t.height);n>1&&e.target.set("width",Math.floor(e.target.get("width")/n)),e.target.addClass("constrained"),e.target.detach("load",this.constrain_image_size)},update_drop_zones:function(t){this.graphics!==null&&this.graphics.destroy(),this.restart_colours(),this.graphics=new e.Graphic({render:"div.ddarea div.dropzones"});var n=this.form.get_form_value("nodropzone",[]);for(var r=0;r<n;r++){var i=this.form.get_form_value("drops",[r,"choice"]),s=this.get_marker_text(i),o=this.form.get_form_value("drops",[r,"shape"]),u=this.get_coords(r),a=this.get_next_colour();e.one("input#id_drops_"+r+"_coords").setStyle("background-color",a),this.draw_drop_zone(r,s,o,u,a,!1)}this.doc.bg_img()&&e.one("div.ddarea .grid").setXY(this.convert_to_window_xy([0,0])).setStyle("width",this.doc.bg_img().get("width")).setStyle("height",this.doc.bg_img().get("height")),M.util.js_complete(t)},get_coords:function(e){var t=this.form.get_form_value("drops",[e,"coords"]);return t.replace(new RegExp("\\s*","g"),"")},get_marker_text:function(e){if(Number(e)!==0){var t=this.form.get_form_value("drags",[e-1,"label"]);return t.replace(new RegExp("^\\s*(.*)\\s*$"),"$1")}return""},set_options_for_drag_item_selectors:function(){var t={0:""};for(var n=1;n<=this.form.get_form_value("noitems",[]);n++){var r=this.get_marker_text(n);r!==""&&(t[n]=e.Escape.html(r))}var i=[],s;for(n=0;n<this.form.get_form_value("nodropzone",[]);n++)s=e.one("#id_drops_"+n+"_choice"),i[n]=Number(s.get("value"));for(n=0;n<this.form.get_form_value("nodropzone",[]);n++){s=e.one("#id_drops_"+n+"_choice"),s.all("option").remove(!0);for(var o in t){o=Number(o);var u='<option value="'+o+'">'+t[o]+"</option>";s.append(u);var a=s.one('option[value="'+o+'"]');if(o===i[n])a.set("selected",!0);else if(o!==0){var f=this.form.get_form_value("drags",[o-1,"noofdrags"]);if(Number(f)!==0)for(var l in i)if(Number(i[l])===o){if(Number(f)===1){a.set("disabled",!0);break}f--}}}}},stop_selector_events:function(){e.all("fieldset#id_dropzoneheader select").detachAll()},setup_form_events:function(){e.all("fieldset#id_draggableitemheader input").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_draggableitemheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this),e.all("fieldset#id_dropzoneheader select").on("change",function(){this.set_options_for_drag_item_selectors()},this)},form:{to_name_with_index:function(e,t){var n=e;for(var r=0;r<t.length;r++)n=n+"["+t[r]+"]";return n},get_el:function(e,t){var n=document.getElementById("mform1");return n.elements[this.to_name_with_index(e,t)]},get_form_value:function(e,t){var n=this.get_el(e,t);return n.type==="checkbox"?n.checked:n.value},set_form_value:function(e,t,n){var r=this.get_el(e,t);r.type==="checkbox"?r.checked=n:r.value=n},from_name_with_index:function(e){var t={};t.indexes=[];var n=e.indexOf("[");t.name=e.substring(0,n);while(n!==-1){var r=e.indexOf("]",n+1);t.indexes.push(e.substring(n+1,r)),n=e.indexOf("[",r+1)}return t}},file_pickers:function(){var t,n;if(t===undefined){t={},n={};var r=e.all("form.mform input.filepickerhidden");r.each(function(e){t[e.get("value")]=e.get("name"),n[e.get("name")]=e.get("parentNode")},this)}var i={file:function(e){var t=n[e],r=t.one("div.filepicker-filelist a");return r?{href:r.get("href"),name:r.get("innerHTML")}:{href:null,name:null}},name:function(e){return t[e]}};return i}},{NAME:n,ATTRS:{maxsizes:{value:null}}}),M.qtype_ddmarker=M.qtype_ddmarker||{},M.qtype_ddmarker.init_form=function(e){return new r(e)}},"@VERSION@",{requires:["moodle-qtype_ddmarker-dd","form_filepicker","graphics","escape"]});
diff --git a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js
index 13d6512bf2eee..4d60ffac64ba5 100644
--- a/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js
+++ b/question/type/ddmarker/yui/build/moodle-qtype_ddmarker-form/moodle-qtype_ddmarker-form.js
@@ -32,10 +32,14 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         var tn = Y.one(this.get('topnode'));
         tn.one('div.fcontainer').append(
                 '<div class="ddarea">' +
-                    '<div class="markertexts"></div>' +
-                    '<div class="droparea"></div>' +
-                    '<div class="dropzones"></div>' +
-                    '<div class="grid"></div>' +
+                '<div class="markertexts"></div>' +
+                '<div class="droparea"></div>' +
+                '<div class="dropzones"></div>' +
+                '<ul class="pager">' +
+                '<li><span id="xcoordpreview">X = </span></li>' +
+                '<li><span id="ycoordpreview">Y = </span></li>' +
+                '</ul>' +
+                '<div class="grid"></div>' +
                 '</div>');
         this.doc = this.doc_structure(this);
         this.stop_selector_events();
@@ -44,6 +48,15 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         Y.later(500, this, this.update_drop_zones, [pendingid], true);
         Y.after(this.load_bg_image, M.form_filepicker, 'callback', this);
         this.load_bg_image();
+
+        var topnode = Y.one(this.get('topnode'));
+        topnode.one('.grid').on('mousemove', function (e) {
+            var img = topnode.one('.dropbackground');
+            var x = Math.round(Number(e.pageX) - img.getX() - 1);
+            var y = Math.round(Number(e.pageY) - img.getY() - 1);
+            topnode.one('#xcoordpreview').setHTML("X = " + x);
+            topnode.one('#ycoordpreview').setHTML("Y = " + y);
+        });
     },
 
     load_bg_image : function() {
@@ -118,7 +131,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         }
     },
     set_options_for_drag_item_selectors : function () {
-        var dragitemsoptions = {'0': ''};
+        var dragitemsoptions = {0: ''};
         for (var i = 1; i <= this.form.get_form_value('noitems', []); i++) {
             var label = this.get_marker_text(i);
             if (label !== "") {
diff --git a/question/type/ddmarker/yui/src/form/js/form.js b/question/type/ddmarker/yui/src/form/js/form.js
index 339da2fcdc06f..04897cbbe629e 100644
--- a/question/type/ddmarker/yui/src/form/js/form.js
+++ b/question/type/ddmarker/yui/src/form/js/form.js
@@ -30,10 +30,14 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         var tn = Y.one(this.get('topnode'));
         tn.one('div.fcontainer').append(
                 '<div class="ddarea">' +
-                    '<div class="markertexts"></div>' +
-                    '<div class="droparea"></div>' +
-                    '<div class="dropzones"></div>' +
-                    '<div class="grid"></div>' +
+                '<div class="markertexts"></div>' +
+                '<div class="droparea"></div>' +
+                '<div class="dropzones"></div>' +
+                '<ul class="pager">' +
+                '<li><span id="xcoordpreview">X = </span></li>' +
+                '<li><span id="ycoordpreview">Y = </span></li>' +
+                '</ul>' +
+                '<div class="grid"></div>' +
                 '</div>');
         this.doc = this.doc_structure(this);
         this.stop_selector_events();
@@ -42,6 +46,15 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         Y.later(500, this, this.update_drop_zones, [pendingid], true);
         Y.after(this.load_bg_image, M.form_filepicker, 'callback', this);
         this.load_bg_image();
+
+        var topnode = Y.one(this.get('topnode'));
+        topnode.one('.grid').on('mousemove', function (e) {
+            var img = topnode.one('.dropbackground');
+            var x = Math.round(Number(e.pageX) - img.getX() - 1);
+            var y = Math.round(Number(e.pageY) - img.getY() - 1);
+            topnode.one('#xcoordpreview').setHTML("X = " + x);
+            topnode.one('#ycoordpreview').setHTML("Y = " + y);
+        });
     },
 
     load_bg_image : function() {
@@ -116,7 +129,7 @@ Y.extend(DDMARKER_FORM, M.qtype_ddmarker.dd_base_class, {
         }
     },
     set_options_for_drag_item_selectors : function () {
-        var dragitemsoptions = {'0': ''};
+        var dragitemsoptions = {0: ''};
         for (var i = 1; i <= this.form.get_form_value('noitems', []); i++) {
             var label = this.get_marker_text(i);
             if (label !== "") {