diff --git a/code/DrawPolygonField.php b/code/DrawPolygonField.php
index a65fb72..eb9e547 100644
--- 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 .= "";
+ $imgStr .= "";
+ $numUp++;
}
}
- $content .= "
Preview
Click in the region below to start defining a area
".$imgStr."
";
+ $content .= "
Preview
Click in the region below to start defining a area
".$imgStr."
";
return $content;
}
diff --git a/css/drawpolygonfield.css b/css/drawpolygonfield.css
index d5211c2..7aa0f0e 100644
--- 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;
}
\ No newline at end of file
diff --git a/javascript/drawpolygonfield.js b/javascript/drawpolygonfield.js
index 40e480b..c1d63be 100644
--- a/javascript/drawpolygonfield.js
+++ b/javascript/drawpolygonfield.js
@@ -1,10 +1,30 @@
-//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},
@@ -12,7 +32,7 @@ function drawInit(){
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())
@@ -20,8 +40,8 @@ function drawInit(){
}
- 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();
});
}
+
//});
\ No newline at end of file