fix bad JS loading ... had to hard code ID's

nimeso · Aug 16, 2014 · d7affdc · d7affdc
1 parent 5e51acb
commit d7affdc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 16 deletions.
diff --git a/code/DrawPolygonField.php b/code/DrawPolygonField.php
@@ -14,21 +14,24 @@ public function __construct($name, $title = "", $value = "", $width = 1140, $hei
 
 	public function Field($properties = array()) {
 
-		Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js');
+		//Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js');
 		$jsvars = array(
 			"Name" => $this->name
 		);
-		Requirements::javascriptTemplate("drawpolygonfield/javascript/drawpolygonfield.js", $jsvars);
+		Requirements::javascript("drawpolygonfield/javascript/drawpolygonfield.js", $jsvars);
 		Requirements::css("drawpolygonfield/css/drawpolygonfield.css");
+
 		$content = parent::Field();
 
 		$imgStr = "";
 		if(count($this->baseImages) > 0){
+			$numUp = 0;
 			foreach ($this->baseImages as $baseImage) {
-				$imgStr .= "<img src='".$baseImage->URL."'/>";
+				$imgStr .= "<img class='level_".$numUp."' src='".$baseImage->URL."'/>";
+				$numUp++;
 			}
 		}
-		$content .= "<hr><h4>Preview</h4><p>Click in the region below to start defining a area</p><div class='stacked-images'>".$imgStr."<canvas id='".$this->name."PolyCanvas' width=".$this->width." height=".$this->height."></canvas></div><div class='PolyActions'><button id='clearpoly' class='btn'>Clear Canvas</button></div><hr><script>drawInit();</script>";
+		$content .= "<hr><h4>Preview</h4><p>Click in the region below to start defining a area</p><div class='stacked-images'>".$imgStr."<canvas id='".$this->name."PolyCanvas' width=".$this->width." height=".$this->height."></canvas></div><div class='PolyActions'><button id='clearpoly' class='btn'>Clear Canvas</button></div><hr>";
 
 		return $content;
 	}

diff --git a/css/drawpolygonfield.css b/css/drawpolygonfield.css
@@ -6,6 +6,7 @@
 	position: relative;
 	border: 1px solid #666;
 	cursor: crosshair;
+	overflow: hidden;
 }
 
 .stacked-images img{
@@ -29,4 +30,8 @@
 
 .drawHitAreaField .fieldgroup-field{
 	clear: both;	
+}
+
+.stacked-images img.level_0{
+	margin-left: -420px;
 }
diff --git a/javascript/drawpolygonfield.js b/javascript/drawpolygonfield.js
@@ -1,27 +1,47 @@
-//jQuery( document ).ready(function() {
-function drawInit(){
-		console.log("yes");
+jQuery(function($) {
+	console.log("jquery loaded");
+	if($.entwine){
+		$.entwine('ss', function($) {
+			$('#PointsPolyCanvas').entwine({
+				onmatch: function() {
+					console.log("onmatch");
+					drawInit();
+				}
+			});
+
+			$('#PointsPolyCanvas').entwine({
+				redraw: function() {
+					console.log("onredraw");
+					drawInit();
+				}
+			});
+		});
+	}
 
-        var canvas = document.getElementById("$NamePolyCanvas"),
+});
+
+function drawInit(){
+
+        var canvas = document.getElementById("PointsPolyCanvas"),
             ctx = canvas.getContext("2d"),
-            offset = jQuery("#$NamePolyCanvas").offset(),
+            offset = jQuery("#PointsPolyCanvas").offset(),
             storedLines = [],
             polyLines = [],
             start = {x: 0, y: 0},
             radius = 4,
             canDraw = true;
 
         function canvasPosition(e) {
-        	console.log(jQuery(".cms-content-fields").scrollTop());
+        	//console.log(jQuery(".cms-content-fields").scrollTop());
             return {
                 x: parseInt(e.clientX - offset.left),
                 y: parseInt(e.clientY - offset.top + jQuery(".cms-content-fields").scrollTop())
             };
         }
 
 
-        if(jQuery("input#Form_ItemEditForm_$Name").val()){
-        	var orgPointsStr = jQuery("input#Form_ItemEditForm_$Name").val();
+        if(jQuery("input#Form_ItemEditForm_Points").val()){
+        	var orgPointsStr = jQuery("input#Form_ItemEditForm_Points").val();
         	var orgPointsRaw = orgPointsStr.split(",");
         	var orgPoints = orgPointsRaw.filter(function(v){return v!==''});
 
@@ -44,8 +64,10 @@ function drawInit(){
         	draw();
         }
 
-        jQuery("#$NamePolyCanvas").mousedown(function (e) {
+        jQuery("#PointsPolyCanvas").mousedown(function (e) {
+        	console.log("mouse down");
         	if(canDraw){
+        		console.log("mouse down and can draw");
 	            var pos = canvasPosition(e);
 	            if (hitStartCircle(pos)) {
 	                polyLines.push(storedLines);
@@ -57,7 +79,7 @@ function drawInit(){
 	                storedLines.push(pos);
 	                update(pos);
 	            }
-	            var input = jQuery("input#Form_ItemEditForm_$Name");
+	            var input = jQuery("input#Form_ItemEditForm_Points");
 	            var orgVal = input.val();
 	            input.val(orgVal+pos.x+","+pos.y+",");
         	}
@@ -69,7 +91,7 @@ function drawInit(){
         // Draw completed polylines
         function draw() {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
-            console.log(polyLines);
+           // console.log(polyLines);
             jQuery.each(polyLines, function (idx, polyLine) {
                 fillPolyline(polyLine);
             });
@@ -127,9 +149,10 @@ function drawInit(){
 
         jQuery("#clearpoly").live("click",function () {
             polyLines = [];
-            jQuery("input#Form_ItemEditForm_$Name").val("");
+            jQuery("input#Form_ItemEditForm_Points").val("");
             canDraw = true;
             draw();
         });
 }
+
 //});