diff options
| -rw-r--r-- | modules/watermark/helpers/watermark.php | 3 | ||||
| -rw-r--r-- | modules/watermark/js/watermark.js | 97 | ||||
| -rw-r--r-- | modules/watermark/views/watermark_position.html.php | 4 |
3 files changed, 100 insertions, 4 deletions
diff --git a/modules/watermark/helpers/watermark.php b/modules/watermark/helpers/watermark.php index ce2d5e0b..9fb03ecd 100644 --- a/modules/watermark/helpers/watermark.php +++ b/modules/watermark/helpers/watermark.php @@ -29,8 +29,7 @@ class watermark_Core { public static function get_watermark_postion_form($position="southeast") { $form = new Forge("admin/watermark/position", "", "post"); $group = $form->group("watermark_position")->label(_("Update Position")); - $group->hidden("original_position")->value($position); - $group->dropdown("new_position")->label(_("Watermark Position")) + $group->dropdown("position")->label(_("Watermark Position")) ->options(array("northwest", "north", "northeast", "west", "center", "east", "southwest", "south", "southeast")) diff --git a/modules/watermark/js/watermark.js b/modules/watermark/js/watermark.js index 3c7ca252..d7070ddf 100644 --- a/modules/watermark/js/watermark.js +++ b/modules/watermark/js/watermark.js @@ -11,7 +11,72 @@ function ajaxify_watermark_add_form() { }); } +var locations = { + areas: {}, + names: ["northwest", "north", "northeast", + "west", "center", "east", + "southwest", "south", "southeast"], + nameIndex: function(name) { + for (var row=0; row < 3; row++) { + for (var col=0; col < 3; col++) { + var index = row * 3 + col; + if (this.names[index] == name) { + return index; + } + } + } + }, + getArea: function(x, y) { + for (var row=0; row < 3; row++) { + for (var col=0; col < 3; col++) { + var name = this.names[row * 3 + col]; + var area = this.areas[name]; + var check = area.top <= y && y < area.bottom && area.left <= x && x < area.right; + if (check) { + return name; + } + } + } + }, + getDimension: function (area) { + return this.areas[area]; + } +}; + + + +locations.areas["northeast"] = {}; +locations.areas["north"] = {}; +locations.areas["northwest"] = {}; +locations.areas["east"] = {}; +locations.areas["center"] = {}; +locations.areas["west"] = {}; +locations.areas["southeast"] = {}; +locations.areas["south"] = {}; +locations.areas["southwest"] = {}; + +function calculateAreas(target) { + var cell_height = $(target).attr("offsetHeight") / 3; + var cell_width = $(target).attr("offsetWidth") / 3; + + var top = $(target).attr("offsetTop"); + for (var row=0; row < 3; row++) { + var left = $(target).attr("offsetLeft"); + for (var col=0; col < 3; col++) { + var name = locations.names[row * 3 + col]; + locations.areas[name] = { + top: top, + left: left, + right: left + cell_width, + bottom: top + cell_height}; + left += cell_width; + } + top += cell_height; + } +} + function watermark_dialog_initialize() { + // Adjust the size of the dialog to accomodate the image content var container = $("#gDialog").parent().parent(); var container_height = $(container).attr("offsetHeight"); var container_width = $(container).attr("offsetWidth"); @@ -25,4 +90,36 @@ function watermark_dialog_initialize() { container.css("width", width + "px"); container.css("top", ((document.height - height) / 2) + "px"); container.css("left", ((document.width - width) / 2) + "px"); + + $("#gTargetImage").droppable({ + accept: "div", + greedy: true, + hoverClass: "droppable-hover", + drop: function(ev, ui) { + var areaname = locations.getArea(ui.position.left, ui.position.top); + positionWatermark(areaname); + $("#position").val(locations.nameIndex(areaname)); + } + }); + + $("#gWaterMark").draggable({ + helper: 'clone', + containment: "#gTargetImage", + opacity: .6, + }); + + $("#position").change(function() { + positionWatermark($("option:selected", this).text()); + }); + + calculateAreas($("#gTargetImage")); + var dropdown = $("#position"); + positionWatermark($("option:selected", dropdown).text()); +} + +function positionWatermark(area) { + var region = locations.getDimension(area); + + $("#gWaterMark").css("top", region.top + "px"); + $("#gWaterMark").css("left", region.left + "px"); } diff --git a/modules/watermark/views/watermark_position.html.php b/modules/watermark/views/watermark_position.html.php index 821a8335..89fd4a50 100644 --- a/modules/watermark/views/watermark_position.html.php +++ b/modules/watermark/views/watermark_position.html.php @@ -3,10 +3,10 @@ $("#gDialog").ready(watermark_dialog_initialize); </script> <div id="gWatermarkAdmin"> - <div id="gTarget" class="droppable"> + <div id="gTarget"> <img id="gTargetImage" src="<?= $sample_image ?>"></img> <div id="gWaterMark" style="float:none;z-index:1005;position:absolute;top:100px"> - <img id ="gWaterMarkImage" src="<?= $watermark_image ?>" class="draggable" + <img id ="gWaterMarkImage" src="<?= $watermark_image ?>" width="<?= $watermark_width ?>" height="<?= $watermark_height ?>" /> </div> </div> |