[Mapbender-commits] r2530 - in branches/beck_dev/mapbender:
http/php lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Sun Jun 22 15:31:26 EDT 2008
Author: christoph
Date: 2008-06-22 15:31:26 -0400 (Sun, 22 Jun 2008)
New Revision: 2530
Added:
branches/beck_dev/mapbender/lib/alignButton.js
branches/beck_dev/mapbender/lib/draggableButton.js
branches/beck_dev/mapbender/lib/resizableButton.js
branches/beck_dev/mapbender/lib/saveButton.js
branches/beck_dev/mapbender/lib/selectableButton.js
Modified:
branches/beck_dev/mapbender/http/php/mod_editApplication.php
branches/beck_dev/mapbender/lib/buttonNew.js
Log:
refactoring and debugging
Modified: branches/beck_dev/mapbender/http/php/mod_editApplication.php
===================================================================
--- branches/beck_dev/mapbender/http/php/mod_editApplication.php 2008-06-22 12:26:21 UTC (rev 2529)
+++ branches/beck_dev/mapbender/http/php/mod_editApplication.php 2008-06-22 19:31:26 UTC (rev 2530)
@@ -65,385 +65,99 @@
<?php
include("../../lib/event.js");
include("../../lib/buttonNew.js");
+ include("../../lib/draggableButton.js");
+ include("../../lib/selectableButton.js");
+ include("../../lib/resizableButton.js");
+ include("../../lib/alignButton.js");
+ include("../../lib/saveButton.js");
echo "var editApplicationId = '" . $editApplicationId . "';";
?>
-
- var grid = [7,7];
-
- var $selection = null;
-
- $(function() {
- //
- // create the toolbox
- //
- var controlPopup;
- controlPopup = new mb_popup({
- left:300,
- top:300,
- width:180,
- height:80,
- html:"<div id='controls'></div>",
- title:"Toolbox"
- });
- var toolbox = new ButtonGroup("controls");
-
- //
- // add tools to the toolbox
- //
-
- // select tool
- var selectButton = new Button({
- on:"../img/button_blink_red/selArea_on.png",
- over:"../img/button_blink_red/selArea_over.png",
- off:"../img/button_blink_red/selArea_off.png"
- });
- toolbox.add({
- button:selectButton,
- type:"toggle"
- });
-
- // drag tool
- var dragButton = new Button({
- on:"../img/button_blink_red/pan_on.png",
- over:"../img/button_blink_red/pan_over.png",
- off:"../img/button_blink_red/pan_off.png"
- });
- toolbox.add({
- button:dragButton,
- type:"toggle"
- });
-
- // resize tool
- var resizeButton = new Button({
- on:"../img/button_blink_red/select_rectangle_on.png",
- over:"../img/button_blink_red/select_rectangle_over.png",
- off:"../img/button_blink_red/select_rectangle_off.png"
- });
- toolbox.add({
- button:resizeButton,
- type:"toggle"
- });
-
- // save tool
- var saveButton = new Button({
- on:"../img/button_blink_red/wmc_save_on.png",
- over:"../img/button_blink_red/wmc_save_over.png",
- off:"../img/button_blink_red/wmc_save_off.png",
- });
- toolbox.add({
- button:saveButton
- });
-
- //align top
- alignTopButton = new Button({
- on:"../img/button_blink_red/up_on.png",
- over:"../img/button_blink_red/up_on.png",
- off:"../img/button_blink_red/up_off.png"
- });
- toolbox.add({
- button:alignTopButton,
- type:"singular"
- });
-
- //align left
- alignLeftButton = new Button({
- on:"../img/button_blink_red/back_on.png",
- over:"../img/button_blink_red/back_on.png",
- off:"../img/button_blink_red/back_off.png"
- });
- toolbox.add({
- button:alignLeftButton,
- type:"singular"
- });
-
- //align bottom
- alignBottomButton = new Button({
- on:"../img/button_blink_red/down_on.png",
- over:"../img/button_blink_red/down_on.png",
- off:"../img/button_blink_red/down_off.png"
- });
- toolbox.add({
- button:alignBottomButton,
- type:"singular"
- });
-
- //align right
- alignRightButton = new Button({
- on:"../img/button_blink_red/forward_on.png",
- over:"../img/button_blink_red/forward_on.png",
- off:"../img/button_blink_red/forward_off.png"
- });
- toolbox.add({
- button:alignRightButton,
- type:"singular"
- });
-
- //
- // add functionality to the buttons
- //
-
- selectButton.registerPush(function () {
- makeSelectable(selectButton.triggerStop);
- });
- selectButton.registerRelease(removeSelectable);
-
- dragButton.registerPush(makeDraggable);
- dragButton.registerStop(removeDraggable);
-
- resizeButton.registerPush(removeSelectable);
- resizeButton.registerPush(makeResizable);
- resizeButton.registerStop(removeResizable);
-
- saveButton.registerPush(function () {
- updateDatabase(saveButton.triggerStop);
- });
-
- alignTopButton.registerPush(function () {
- align({
- align:"top"
- });
- });
- alignLeftButton.registerPush(function () {
- align({
- align:"left"
- });
- });
- alignBottomButton.registerPush(function () {
- align({
- align:"bottom"
- });
- });
- alignRightButton.registerPush(function () {
- align({
- align:"right"
- });
- });
-
- //
- // display the toolbox
- //
- controlPopup.show();
-
+$(function() {
+ //
+ // create the toolbox
+ //
+ var controlPopup;
+ controlPopup = new mb_popup({
+ left:300,
+ top:300,
+ width:180,
+ height:80,
+ html:"<div id='controls'></div>",
+ title:"Toolbox"
});
+ var toolbox = new ButtonGroup("controls");
//
- // button functionality
+ // add tools to the toolbox
//
- /**
- * Aligns the selected buttons to top, left, bottom or right.
- */
- function align(options) {
- console.log("align at %s", options.align);
- if ($(".ui-selected").size() < 2) {
- console.log("no selection, no align");
- return false;
- }
-
- var minX, minY, maxX, maxY;
- $(".ui-selected").each(function() {
- var currentMinX = parseInt(this.style.left);
- if ((!minX && minX !== 0 ) || currentMinX < minX) {
- minX = currentMinX;
- }
-
- var currentMinY = parseInt(this.style.top);
- if ((!minY && minY !== 0 ) || currentMinY < minY) {
- minY = currentMinY;
- }
-
- var currentMaxX = parseInt(this.style.left) + parseInt(this.style.width);
- if ((!maxX && maxX !== 0) || currentMaxX > maxX) {
- maxX = currentMaxX;
- }
-
- var currentMaxY = parseInt(this.style.top) + parseInt(this.style.height);
- if ((!maxY && maxY !== 0) || currentMaxY > maxY) {
- maxY = currentMaxY;
- }
- });
-
- if (options.align == "top") {
- $(".ui-selected").each(function() {
- this.style.top = minY + "px";
- });
- }
- else if (options.align == "left") {
- $(".ui-selected").each(function() {
- this.style.left = minX + "px";
- });
- }
- else if (options.align == "bottom") {
- $(".ui-selected").each(function() {
- var newY = maxY - parseInt(this.style.height);
- this.style.top = newY + "px";
- });
- }
- else if (options.align == "right") {
- $(".ui-selected").each(function() {
- var newX = maxX - parseInt(this.style.width);
- this.style.left = newX + "px";
- });
- }
- }
+ // select tool
+ var selectButton = new Button(Selectable.buttonParameters);
+ toolbox.add(selectButton);
- /**
- * Makes the current selection (or else, each element
- * individually) draggable
- */
- function makeDraggable () {
- if ($selection !== null) {
- $selection.draggable({
- grid:grid
- });
- }
- else {
- $(".collection").children().draggable({
- grid:grid,
- });
- }
- }
+ // drag tool
+ var dragButton = new Button(Draggable.buttonParameters);
+ toolbox.add(dragButton);
- /**
- * Removes the draggable property from all elements
- */
- function removeDraggable () {
- $(".collection").children().draggable("destroy");
- }
+ // resize tool
+ var resizeButton = new Button(Resizable.buttonParameters);
+ toolbox.add(resizeButton);
- /**
- * Makes all elements given by the selector selectable.
- */
- function makeSelectable(callback) {
- // if a selection has been made, remove it
- if ($(".ui-selected").size() > 0) {
- removeSelectable();
- }
+ // save tool
+ var saveButton = new Button(Save.buttonParameters);
+ toolbox.add(saveButton);
+
+ //align top
+ alignTopButton = new Button(Align.top.buttonParameters);
+ toolbox.add(alignTopButton);
+
+ //align left
+ alignLeftButton = new Button(Align.left.buttonParameters);
+ toolbox.add(alignLeftButton);
+
+ //align bottom
+ alignBottomButton = new Button(Align.bottom.buttonParameters);
+ toolbox.add(alignBottomButton);
+
+ //align right
+ alignRightButton = new Button(Align.right.buttonParameters);
+ toolbox.add(alignRightButton);
+
+ //
+ // add functionality to the buttons
+ //
- $all = $(".collection");
- $all.selectable({
- selecting:function() {
- $(".ui-selecting").removeClass("div-border");
- },
- unselecting:function() {
- $(".ui-selectee").addClass("div-border");
- $(".ui-selecting").removeClass("div-border");
- },
- stop:function() {
- var minX, minY;
- $(".ui-selected").each(function() {
- var currentLeft = parseInt(this.style.left);
- if ((!minX && minX !== 0) || currentLeft < minX) {
- minX = currentLeft;
- }
- var currentTop = parseInt(this.style.top);
- if ((!minY && minY !== 0) || currentTop < minY) {
- minY = currentTop;
- }
- });
-
- var $div = $("<div></div>");
- $div.css("position", "absolute");
- $div.css("top", minY);
- $div.css("left", minX);
+ selectButton.registerPush(Selectable.makeSelectable);
+ selectButton.registerRelease(Selectable.removeSelection);
- $(".ui-selected").each(function() {
- var newX = parseInt(this.style.left) - minX;
- var newY = parseInt(this.style.top) - minY;
+ dragButton.registerPush(Draggable.makeDraggable);
+ dragButton.registerStop(Draggable.removeDraggable);
- $clone = $(this).clone();
- $clone.css("position", "absolute");
- $clone.css("top", newY + "px");
- $clone.css("left", newX + "px");
+ resizeButton.registerPush(Selectable.removeSelection);
+ resizeButton.registerPush(Resizable.makeResizable);
+ resizeButton.registerStop(Resizable.removeResizable);
- $div.append($clone);
- $(this).remove();
- });
-
- $div.appendTo($(".collection"));
- $selection = $div;
- $all.selectable("destroy");
- if (typeof(callback) == "function") {
- callback();
- }
- }
- });
- }
-
- /**
- * Removes the selectable property from all selected elements
- */
- function removeSelectable () {
- if ($selection !== null) {
- var divX, divY;
- $selection.each(function() {
- divX = parseInt(this.style.left);
- divY = parseInt(this.style.top);
- });
- $selection.children().each(function() {
- var newX = parseInt(this.style.left) + divX;
- var newY = parseInt(this.style.top) + divY;
- this.style.left = newX + "px";
- this.style.top = newY + "px";
- $(this).removeClass("ui-selectee");
- $(this).removeClass("ui-selected");
- $(this).addClass("div-border");
- $clone = $(this).clone();
- $(".collection").append($clone);
- });
- $selection.remove();
- $selection = null;
- }
- }
+ saveButton.registerPush(function () {
+ Save.updateDatabase(saveButton.triggerStop);
+ });
+ alignTopButton.registerPush(Align.top.align);
+ alignLeftButton.registerPush(Align.left.align);
+ alignBottomButton.registerPush(Align.bottom.align);
+ alignRightButton.registerPush(Align.right.align);
- function makeResizable () {
- var selector = ".collection > div";
- $all = $(selector);
- $all.resizable();
- }
-
- function removeResizable () {
- var selector = ".collection > div";
- $all = $(selector);
- $all.resizable("destroy");
- }
-
- function updateDatabase (callback) {
- var data = [];
- $(".collection").children().each(function() {
- data.push({
- id:this.id,
- top:parseInt(this.style.top),
- left:parseInt(this.style.left),
- width:parseInt(this.style.width),
- height:parseInt(this.style.height)
- });
- });
- var queryObj = {
- command:"update",
- parameters:{
- applicationId:editApplicationId,
- data:data
- }
- };
- $.post("mod_editApplication_server.php", {
- queryObj:$.toJSON(queryObj)
- }, function (json, status) {
- var replyObj = eval('(' + json + ')');
- alert(replyObj.success);
- callback();
- });
- }
+ //
+ // display the toolbox
+ //
+ controlPopup.show();
+
+});
+
</script>
-
</head>
-
<?php
-
-
$pattern = "/sessionID/";
$sql = "SELECT fkey_gui_id,e_id,e_pos,e_public,e_comment,gettext($1, e_title) as e_title, e_element,";
@@ -529,7 +243,6 @@
else {
echo "</div>";
}
-
}
}
$i++;
Added: branches/beck_dev/mapbender/lib/alignButton.js
===================================================================
--- branches/beck_dev/mapbender/lib/alignButton.js (rev 0)
+++ branches/beck_dev/mapbender/lib/alignButton.js 2008-06-22 19:31:26 UTC (rev 2530)
@@ -0,0 +1,99 @@
+var Align = {
+ top : {
+ buttonParameters : {
+ on:"../img/button_blink_red/up_on.png",
+ over:"../img/button_blink_red/up_on.png",
+ off:"../img/button_blink_red/up_off.png",
+ type:"singular"
+ },
+ align : function () {
+ if ($(".ui-selected").size() < 2) {
+ return false;
+ }
+ var minY;
+ $(".ui-selected").each(function() {
+ var currentMinY = parseInt(this.style.top);
+ if ((!minY && minY !== 0 ) || currentMinY < minY) {
+ minY = currentMinY;
+ }
+ });
+ $(".ui-selected").each(function() {
+ this.style.top = minY + "px";
+ });
+ }
+ },
+ left : {
+ buttonParameters : {
+ on:"../img/button_blink_red/back_on.png",
+ over:"../img/button_blink_red/back_on.png",
+ off:"../img/button_blink_red/back_off.png",
+ type:"singular"
+ },
+ align : function () {
+ if ($(".ui-selected").size() < 2) {
+ return false;
+ }
+ var minX;
+ $(".ui-selected").each(function() {
+ var currentMinX = parseInt(this.style.left);
+ if ((!minX && minX !== 0 ) || currentMinX < minX) {
+ minX = currentMinX;
+ }
+ });
+
+ $(".ui-selected").each(function() {
+ this.style.left = minX + "px";
+ });
+ }
+ },
+ bottom : {
+ buttonParameters : {
+ on:"../img/button_blink_red/down_on.png",
+ over:"../img/button_blink_red/down_on.png",
+ off:"../img/button_blink_red/down_off.png",
+ type:"singular"
+ },
+ align : function () {
+ if ($(".ui-selected").size() < 2) {
+ return false;
+ }
+ var maxY;
+ $(".ui-selected").each(function() {
+ var currentMaxY = parseInt(this.style.top) + parseInt(this.style.height);
+ if ((!maxY && maxY !== 0) || currentMaxY > maxY) {
+ maxY = currentMaxY;
+ }
+ });
+
+ $(".ui-selected").each(function() {
+ var newY = maxY - parseInt(this.style.height);
+ this.style.top = newY + "px";
+ });
+ }
+ },
+ right : {
+ buttonParameters : {
+ on:"../img/button_blink_red/forward_on.png",
+ over:"../img/button_blink_red/forward_on.png",
+ off:"../img/button_blink_red/forward_off.png",
+ type:"singular"
+ },
+ align : function () {
+ if ($(".ui-selected").size() < 2) {
+ return false;
+ }
+ var maxX;
+ $(".ui-selected").each(function() {
+ var currentMaxX = parseInt(this.style.left) + parseInt(this.style.width);
+ if ((!maxX && maxX !== 0) || currentMaxX > maxX) {
+ maxX = currentMaxX;
+ }
+ });
+
+ $(".ui-selected").each(function() {
+ var newX = maxX - parseInt(this.style.width);
+ this.style.left = newX + "px";
+ });
+ }
+ }
+}
\ No newline at end of file
Modified: branches/beck_dev/mapbender/lib/buttonNew.js
===================================================================
--- branches/beck_dev/mapbender/lib/buttonNew.js 2008-06-22 12:26:21 UTC (rev 2529)
+++ branches/beck_dev/mapbender/lib/buttonNew.js 2008-06-22 19:31:26 UTC (rev 2530)
@@ -6,20 +6,19 @@
var buttonArray = [];
var node = "#" + nodeId;
- this.add = function (options) {
- var button = options.button;
+ this.add = function (button) {
if (!button.constructor == "Button") {
console.log("not a button, but a %s", button.constructor);
return false;
}
- if (options.type == "toggle") {
+ if (button.type == "toggle") {
for (var i = 0; i < buttonArray.length; i++) {
var currentButton = buttonArray[i];
currentButton.registerPush(button.triggerStop);
button.registerPush(currentButton.triggerStop);
}
}
- else if (options.type == "singular") {
+ else if (button.type == "singular") {
button.registerPush(button.triggerStop);
}
buttonArray.push(button);
@@ -118,6 +117,7 @@
var srcOn = (options.on) ? options.on : null;
var srcOff = (options.off) ? options.off : null;
var srcOver = (options.over) ? options.over : null;
+ this.type = (options.type) ? options.type : "default";
var $node = $("<img style='padding:5px' src='" + srcOff + "'/>");
var isOn = false;
@@ -125,10 +125,5 @@
$node.click(function() {
(!isOn) ? push.trigger() : release.trigger();
});
-
- // append this button to a given DOM node
- if (options.appendTo) {
- $(options.appendTo).append($node);
- }
}
Added: branches/beck_dev/mapbender/lib/draggableButton.js
===================================================================
--- branches/beck_dev/mapbender/lib/draggableButton.js (rev 0)
+++ branches/beck_dev/mapbender/lib/draggableButton.js 2008-06-22 19:31:26 UTC (rev 2530)
@@ -0,0 +1,98 @@
+var Draggable = {
+ buttonParameters : {
+ on:"../img/button_blink_red/pan_on.png",
+ over:"../img/button_blink_red/pan_over.png",
+ off:"../img/button_blink_red/pan_off.png",
+ type:"toggle"
+ },
+ grid : [7,7],
+ makeDraggable : function() {
+
+ var $selection = $(".ui-selected");
+ if ($selection.size() > 0) {
+
+ // if elements have been selected, we want to drag
+ // them together, not individually. So we move these
+ // elements into a new div tag, and make that tag
+ // draggable
+
+ Draggable.moveSelectionToDiv();
+
+ $(".div-draggable").draggable({
+ grid:Draggable.grid
+ });
+ }
+ else {
+ $(".collection").children().draggable({
+ grid:Draggable.grid
+ });
+ }
+ },
+ removeDraggable : function () {
+ if ($(".ui-selected").size() > 0) {
+ Draggable.moveSelectionFromDiv();
+ }
+ $(".collection").children().draggable("destroy");
+ },
+ moveSelectionFromDiv : function () {
+ var divX, divY;
+ var $draggableDiv = $(".div-draggable");
+ $draggableDiv.each(function() {
+ divX = parseInt(this.style.left);
+ divY = parseInt(this.style.top);
+ });
+ $draggableDiv.children().each(function() {
+ var newX = parseInt(this.style.left) + divX;
+ var newY = parseInt(this.style.top) + divY;
+ this.style.left = newX + "px";
+ this.style.top = newY + "px";
+ $(this).removeClass("ui-selectee");
+ $(this).removeClass("ui-selected");
+ $(this).addClass("div-border");
+ $clone = $(this).clone();
+ $(".collection").append($clone);
+ });
+ $draggableDiv.remove();
+ },
+ moveSelectionToDiv : function () {
+ // first, put all selected elements inside a
+ // single div tag; then, make that div tag
+ // draggable
+
+ // the coordinates of the new div tag need
+ // to be computed first
+ var minX, minY;
+ $(".ui-selected").each(function() {
+ var currentLeft = parseInt(this.style.left);
+ if ((!minX && minX !== 0) || currentLeft < minX) {
+ minX = currentLeft;
+ }
+ var currentTop = parseInt(this.style.top);
+ if ((!minY && minY !== 0) || currentTop < minY) {
+ minY = currentTop;
+ }
+ });
+
+ var $div = $("<div class='div-draggable'></div>");
+ $div.css("position", "absolute");
+ $div.css("top", minY);
+ $div.css("left", minX);
+
+ // to move the selected nodes, we clone them and attach
+ // them to the new div. the old tags are removed
+ $(".ui-selected").each(function() {
+ var newX = parseInt(this.style.left) - minX;
+ var newY = parseInt(this.style.top) - minY;
+
+ $clone = $(this).clone();
+ $clone.css("position", "absolute");
+ $clone.css("top", newY + "px");
+ $clone.css("left", newX + "px");
+
+ $div.append($clone);
+ $(this).remove();
+ });
+
+ $div.appendTo($(".collection"));
+ }
+}
Added: branches/beck_dev/mapbender/lib/resizableButton.js
===================================================================
--- branches/beck_dev/mapbender/lib/resizableButton.js (rev 0)
+++ branches/beck_dev/mapbender/lib/resizableButton.js 2008-06-22 19:31:26 UTC (rev 2530)
@@ -0,0 +1,18 @@
+var Resizable = {
+ buttonParameters : {
+ on:"../img/button_blink_red/select_rectangle_on.png",
+ over:"../img/button_blink_red/select_rectangle_over.png",
+ off:"../img/button_blink_red/select_rectangle_off.png",
+ type:"toggle"
+ },
+ makeResizable : function () {
+ var selector = ".collection > div";
+ $all = $(selector);
+ $all.resizable();
+ },
+ removeResizable : function () {
+ var selector = ".collection > div";
+ $all = $(selector);
+ $all.resizable("destroy");
+ }
+};
Added: branches/beck_dev/mapbender/lib/saveButton.js
===================================================================
--- branches/beck_dev/mapbender/lib/saveButton.js (rev 0)
+++ branches/beck_dev/mapbender/lib/saveButton.js 2008-06-22 19:31:26 UTC (rev 2530)
@@ -0,0 +1,34 @@
+var Save = {
+ buttonParameters : {
+ on:"../img/button_blink_red/wmc_save_on.png",
+ over:"../img/button_blink_red/wmc_save_over.png",
+ off:"../img/button_blink_red/wmc_save_off.png",
+ type:"toggle"
+ },
+ updateDatabase : function (callback) {
+ var data = [];
+ $(".collection").children().each(function() {
+ data.push({
+ id:this.id,
+ top:parseInt(this.style.top),
+ left:parseInt(this.style.left),
+ width:parseInt(this.style.width),
+ height:parseInt(this.style.height)
+ });
+ });
+ var queryObj = {
+ command:"update",
+ parameters:{
+ applicationId:editApplicationId,
+ data:data
+ }
+ };
+ $.post("mod_editApplication_server.php", {
+ queryObj:$.toJSON(queryObj)
+ }, function (json, status) {
+ var replyObj = eval('(' + json + ')');
+ alert(replyObj.success);
+ callback();
+ });
+ }
+};
Added: branches/beck_dev/mapbender/lib/selectableButton.js
===================================================================
--- branches/beck_dev/mapbender/lib/selectableButton.js (rev 0)
+++ branches/beck_dev/mapbender/lib/selectableButton.js 2008-06-22 19:31:26 UTC (rev 2530)
@@ -0,0 +1,32 @@
+var Selectable = {
+ buttonParameters : {
+ on:"../img/button_blink_red/selArea_on.png",
+ over:"../img/button_blink_red/selArea_over.png",
+ off:"../img/button_blink_red/selArea_off.png",
+ type:"toggle"
+ },
+ makeSelectable : function () {
+ // if a selection has been made, remove it
+ if ($(".ui-selected").size() > 0) {
+ Selectable.removeSelection();
+ }
+
+ $all = $(".collection");
+ $all.selectable({
+ selecting:function() {
+ $(".ui-selecting").removeClass("div-border");
+ },
+ unselecting:function() {
+ $(".ui-selectee").addClass("div-border");
+ $(".ui-selecting").removeClass("div-border");
+ }
+ });
+ },
+ removeSelection : function () {
+ $(".ui-selected").addClass("div-border");
+ $(".collection").selectable("destroy");
+ $(".ui-selected").removeClass("ui-selected");
+ $(".ui-selectee").removeClass("ui-selectee");
+ $(".ui-selectable").removeClass("ui-selectable");
+ }
+}
\ No newline at end of file
More information about the Mapbender_commits
mailing list