[Mapbender-commits] r2529 - in branches/beck_dev/mapbender:
http/img/button_blink_red http/php lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Sun Jun 22 08:26:21 EDT 2008
Author: christoph
Date: 2008-06-22 08:26:21 -0400 (Sun, 22 Jun 2008)
New Revision: 2529
Added:
branches/beck_dev/mapbender/http/img/button_blink_red/down_off.png
branches/beck_dev/mapbender/http/img/button_blink_red/down_on.png
branches/beck_dev/mapbender/http/img/button_blink_red/up_off.png
branches/beck_dev/mapbender/http/img/button_blink_red/up_on.png
branches/beck_dev/mapbender/lib/buttonNew.js
Modified:
branches/beck_dev/mapbender/http/php/mod_editApplication.php
Log:
added button group and aligning
Added: branches/beck_dev/mapbender/http/img/button_blink_red/down_off.png
===================================================================
(Binary files differ)
Property changes on: branches/beck_dev/mapbender/http/img/button_blink_red/down_off.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/beck_dev/mapbender/http/img/button_blink_red/down_on.png
===================================================================
(Binary files differ)
Property changes on: branches/beck_dev/mapbender/http/img/button_blink_red/down_on.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/beck_dev/mapbender/http/img/button_blink_red/up_off.png
===================================================================
(Binary files differ)
Property changes on: branches/beck_dev/mapbender/http/img/button_blink_red/up_off.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/beck_dev/mapbender/http/img/button_blink_red/up_on.png
===================================================================
(Binary files differ)
Property changes on: branches/beck_dev/mapbender/http/img/button_blink_red/up_on.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: branches/beck_dev/mapbender/http/php/mod_editApplication.php
===================================================================
--- branches/beck_dev/mapbender/http/php/mod_editApplication.php 2008-06-20 17:18:58 UTC (rev 2528)
+++ branches/beck_dev/mapbender/http/php/mod_editApplication.php 2008-06-22 12:26:21 UTC (rev 2529)
@@ -33,17 +33,28 @@
<head>
<style type="text/css">
.ui-selecting {
- background-color: #eee;
+ border-width:thin;
+ border-style:solid;
+ border-color:red;
+ background-color:transparent;
+ font-size:9px;
}
.ui-selected {
- border-width:1px;
+ border-width:thin;
border-style:solid;
- border-color:blue;
- background-color: #E6F7D4;
+ border-color:red;
+ background-color:transparent;
+ font-size:9px;
}
.ui-draggable {
}
-
+.div-border {
+ border-width:thin;
+ border-style:solid;
+ border-color:black;
+ background-color:transparent;
+ font-size:9px;
+}
</style>
<link rel='stylesheet' type='text/css' href='../css/popup.css'>
<script type='text/javascript' src='../extensions/jquery-1.2.6.min.js'></script>
@@ -53,195 +64,239 @@
<script language="JavaScript" type="text/javascript">
<?php
include("../../lib/event.js");
+ include("../../lib/buttonNew.js");
echo "var editApplicationId = '" . $editApplicationId . "';";
?>
- var controlPopup;
- var selectButton;
- var dragButton;
- var saveButton;
- var grid = [12,12];
+ var grid = [7,7];
var $selection = null;
$(function() {
- // make images semitransparent
- $(".collection > img").fadeTo(1, 0.7);
-
+ //
// create the toolbox
+ //
+ var controlPopup;
controlPopup = new mb_popup({
left:300,
top:300,
- width:200,
- height:50,
+ width:180,
+ height:80,
html:"<div id='controls'></div>",
title:"Toolbox"
});
+ var toolbox = new ButtonGroup("controls");
+ //
// add tools to the toolbox
+ //
+
// select tool
- selectButton = new Button({
+ 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",
- appendTo:"#controls",
- startParameters:{
- selector:".collection"
- }
+ off:"../img/button_blink_red/selArea_off.png"
});
+ toolbox.add({
+ button:selectButton,
+ type:"toggle"
+ });
// drag tool
- dragButton = new Button({
+ 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",
- appendTo:"#controls",
+ off:"../img/button_blink_red/pan_off.png"
});
+ toolbox.add({
+ button:dragButton,
+ type:"toggle"
+ });
// resize tool
- resizeButton = new Button({
+ 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",
- appendTo:"#controls",
- startParameters:{
- selector:".collection > div"
- },
- stopParameters:{
- selector:".collection > div"
- },
+ off:"../img/button_blink_red/select_rectangle_off.png"
});
+ toolbox.add({
+ button:resizeButton,
+ type:"toggle"
+ });
// save tool
- saveButton = new Button({
+ 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",
- appendTo:"#controls"
});
- selectButton.registerStart(dragButton.triggerStop);
- selectButton.registerStart(saveButton.triggerStop);
- selectButton.registerStart(resizeButton.triggerStop);
- selectButton.registerStart(makeSelectable);
+ 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
+ //
- dragButton.registerStart(selectButton.triggerStop);
- dragButton.registerStart(saveButton.triggerStop);
- dragButton.registerStart(resizeButton.triggerStop);
- dragButton.registerStart(makeDraggable);
+ selectButton.registerPush(function () {
+ makeSelectable(selectButton.triggerStop);
+ });
+ selectButton.registerRelease(removeSelectable);
+
+ dragButton.registerPush(makeDraggable);
dragButton.registerStop(removeDraggable);
- resizeButton.registerStart(selectButton.triggerStop);
- resizeButton.registerStart(dragButton.triggerStop);
- resizeButton.registerStart(saveButton.triggerStop);
- resizeButton.registerStart(makeResizable);
+ resizeButton.registerPush(removeSelectable);
+ resizeButton.registerPush(makeResizable);
resizeButton.registerStop(removeResizable);
- saveButton.registerStart(selectButton.triggerStop);
- saveButton.registerStart(dragButton.triggerStop);
- saveButton.registerStart(resizeButton.triggerStop);
- saveButton.registerStart(updateDatabase);
+ 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 Button (options) {
- var start = new MapbenderEvent();
- var stop = new MapbenderEvent();
-
- start.register(function() {
- console.log("start: src: %s", srcOn);
- $node.attr("src", srcOn);
- });
-
- stop.register(function() {
- console.log("stop");
- $node.attr("src", srcOff);
- });
-
- this.registerStart = function (func) {
- start.register(func);
- };
-
- this.registerStop = function (func) {
- stop.register(func);
- };
-
- var startParameters = {};
- var stopParameters = {};
-
- if (options.startParameters) {
- startParameters = options.startParameters
+ //
+ // button functionality
+ //
+
+ /**
+ * 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;
}
- startParameters.callback = function () {
- stop.trigger();
- };
-
- if (options.stopParameters) {
- stopParameters = options.stopParameters
- }
- this.triggerStart = function () {
- start.trigger(startParameters);
- };
-
- this.triggerStop = function () {
- stop.trigger(stopParameters);
- };
+ 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 srcOn;
- var srcOff;
- var srcOver;
+ var currentMaxY = parseInt(this.style.top) + parseInt(this.style.height);
+ if ((!maxY && maxY !== 0) || currentMaxY > maxY) {
+ maxY = currentMaxY;
+ }
+ });
- if (options.on) {
- srcOn = options.on;
+ if (options.align == "top") {
+ $(".ui-selected").each(function() {
+ this.style.top = minY + "px";
+ });
}
- if (options.off) {
- srcOff = options.off;
+ else if (options.align == "left") {
+ $(".ui-selected").each(function() {
+ this.style.left = minX + "px";
+ });
}
- if (options.over) {
- srcOver = options.over;
+ else if (options.align == "bottom") {
+ $(".ui-selected").each(function() {
+ var newY = maxY - parseInt(this.style.height);
+ this.style.top = newY + "px";
+ });
}
-
- var $node = $("<img style='padding:5px' src='" + srcOff + "'/>");
- $node.click(function() {
- start.trigger(startParameters);
- });
-
- if (options.appendTo) {
- $(options.appendTo).append($node);
+ else if (options.align == "right") {
+ $(".ui-selected").each(function() {
+ var newX = maxX - parseInt(this.style.width);
+ this.style.left = newX + "px";
+ });
}
}
- function makeDraggable (options) {
- var callback = options.callback;
+ /**
+ * Makes the current selection (or else, each element
+ * individually) draggable
+ */
+ function makeDraggable () {
if ($selection !== null) {
$selection.draggable({
- grid:grid,
- stop:function () {
- var divX;
- var divY;
- $selection.each(function() {
- divX = this.style.left;
- divY = this.style.top;
- });
- $selection.children().each(function() {
- var newX = (parseInt(this.style.left) + parseInt(divX));
- var newY = (parseInt(this.style.top) + parseInt(divY));
- this.style.left = newX + "px";
- this.style.top = newY + "px";
- $(this).removeClass("ui-selectee");
- $(this).removeClass("ui-selected");
- $clone = $(this).clone();
- $(".collection").append($clone);
- });
- $selection.remove();
- $selection = null;
- callback();
- }
+ grid:grid
});
}
else {
@@ -251,48 +306,114 @@
}
}
+ /**
+ * Removes the draggable property from all elements
+ */
function removeDraggable () {
$(".collection").children().draggable("destroy");
}
- function makeSelectable(options) {
- var selector = options.selector;
- var callback = options.callback;
- $all = $(selector);
+ /**
+ * 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();
+ }
+
+ $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 $div = $("<div></div>").appendTo($(".collection"));
+ var minX, minY;
$(".ui-selected").each(function() {
- $clone = $(this).clone()
+ 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);
+
+ $(".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"));
$selection = $div;
$all.selectable("destroy");
- callback();
+ 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;
+ }
+ }
- function makeResizable (options) {
- var selector = options.selector;
- var callback = options.callback;
+
+ function makeResizable () {
+ var selector = ".collection > div";
$all = $(selector);
$all.resizable();
}
- function removeResizable (options) {
- var selector = options.selector;
- var callback = options.callback;
+ function removeResizable () {
+ var selector = ".collection > div";
$all = $(selector);
$all.resizable("destroy");
}
- function updateDatabase (options) {
- var callback = options.callback;
+ function updateDatabase (callback) {
var data = [];
$(".collection").children().each(function() {
- console.log("id: %s (%s)", this.id, this.tagName);
data.push({
id:this.id,
top:parseInt(this.style.top),
@@ -341,18 +462,21 @@
}
else {
if (db_result($res,$i,"e_left") && db_result($res,$i,"e_top")) {
+ //
+ // open tag
+ //
if (db_result($res,$i,"e_closetag") != "iframe" && db_result($res,$i,"e_closetag") != "form" ) {
echo "<".db_result($res,$i,"e_element")." ";
- echo " style = '";
}
else {
echo "<div ";
- echo " style = 'border-width:1px;border-style:solid;border-color:black;background-color:transparent;font-size:9px;";
}
- if (db_result($res,$i,"e_closetag") == "div" ) {
- echo "border-width:1px;border-style:solid;border-color:black;background-color:transparent;font-size:9px;";
- }
- // echo "<div class='wrap' ";
+ echo " class='div-border' ";
+
+ //
+ // style
+ //
+ echo " style = '";
if(db_result($res,$i,"e_left") != "" && db_result($res,$i,"e_top") != ""){
echo "position:absolute;";
echo "left:".db_result($res,$i,"e_left").";";
@@ -362,15 +486,11 @@
echo "width:".db_result($res,$i,"e_width").";";
echo "height:".db_result($res,$i,"e_height").";";
}
- if(db_result($res,$i,"e_z_index") != ""){
-// echo "z-index:".db_result($res,$i,"e_z_index").";";
- }
- if(db_result($res,$i,"e_more_styles") != ""){
-// echo db_result($res,$i,"e_more_styles");
- }
echo "' ";
- // echo "' >";
- // echo "<".db_result($res,$i,"e_element")." ";
+
+ //
+ // attributes
+ //
if(db_result($res,$i,"e_id") != ""){
echo " id='".db_result($res,$i,"e_id")."' ";
echo " name='".db_result($res,$i,"e_id")."' ";
@@ -378,9 +498,6 @@
if (db_result($res,$i,"e_closetag") == "select" ) {
echo " disabled ";
}
- if(db_result($res,$i,"e_attributes") != ""){
- // echo " ".stripslashes(preg_replace($pattern,$replacement,db_result($res,$i,"e_attributes")));
- }
if(db_result($res,$i,"e_title") != ""){
echo " title='".db_result($res,$i,"e_title")."' ";
}
@@ -402,19 +519,15 @@
}
}
echo "' >";
+
if (db_result($res,$i,"e_closetag") == "iframe" || db_result($res,$i,"e_closetag") == "div") {
echo db_result($res,$i,"e_id");
}
- if(db_result($res,$i,"e_content") != ""){
-// echo " ".stripslashes(db_result($res,$i,"e_content"));
+ if (db_result($res,$i,"e_closetag") != "iframe" && db_result($res,$i,"e_closetag") != "form" ) {
+ echo "</".db_result($res,$i,"e_element").">";
}
- if(db_result($res,$i,"e_closetag") != "" && db_result($res,$i,"e_closetag") != "body"){
- if (db_result($res,$i,"e_closetag") != "iframe" ) {
- echo "</".db_result($res,$i,"e_closetag").">";
- }
- else {
- echo "</div>";
- }
+ else {
+ echo "</div>";
}
}
Added: branches/beck_dev/mapbender/lib/buttonNew.js
===================================================================
--- branches/beck_dev/mapbender/lib/buttonNew.js (rev 0)
+++ branches/beck_dev/mapbender/lib/buttonNew.js 2008-06-22 12:26:21 UTC (rev 2529)
@@ -0,0 +1,134 @@
+
+/**
+ * A group of buttons.
+ */
+function ButtonGroup (nodeId) {
+ var buttonArray = [];
+ var node = "#" + nodeId;
+
+ this.add = function (options) {
+ var button = options.button;
+ if (!button.constructor == "Button") {
+ console.log("not a button, but a %s", button.constructor);
+ return false;
+ }
+ if (options.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") {
+ button.registerPush(button.triggerStop);
+ }
+ buttonArray.push(button);
+ $(node).append(button.getNode());
+ }
+}
+
+
+function Button (options) {
+ //
+ // API
+ //
+ this.registerStart = function (func) {
+ start.register(func);
+ };
+
+ this.registerStop = function (func) {
+ stop.register(func);
+ };
+
+ this.registerPush = function (func) {
+ push.register(func);
+ };
+
+ this.registerRelease = function (func) {
+ release.register(func);
+ };
+
+ this.triggerStart = function () {
+ start.trigger();
+ };
+
+ this.triggerStop = function () {
+ stop.trigger();
+ };
+
+ this.triggerPush = function () {
+ push.trigger();
+ };
+
+ this.triggerRelease = function () {
+ release.trigger();
+ };
+
+ this.getNode = function () {
+ return $node;
+ };
+
+ //
+ // constructor
+ //
+ /**
+ * Is triggered if the button is pushed, may
+ * also be triggered by other actions.
+ * Changes the button image source.
+ */
+ var start = new MapbenderEvent();
+ /**
+ * Is triggered if the button is released, may
+ * also be triggered by other actions.
+ * Changes the button image source.
+ */
+ var stop = new MapbenderEvent();
+ /**
+ * Is only called after the button has been
+ * manually pushed by the user.
+ * Triggers "start".
+ */
+ var push = new MapbenderEvent();
+
+ /**
+ * Is only called after the button has been
+ * manually released by the user.
+ * Triggers "stop".
+ */
+ var release = new MapbenderEvent();
+
+ start.register(function() {
+ isOn = true;
+ $node.attr("src", srcOn);
+ });
+
+ stop.register(function() {
+ $node.attr("src", srcOff);
+ isOn = false;
+ });
+
+ push.register(function() {
+ start.trigger();
+ });
+
+ release.register(function() {
+ stop.trigger();
+ });
+
+ var srcOn = (options.on) ? options.on : null;
+ var srcOff = (options.off) ? options.off : null;
+ var srcOver = (options.over) ? options.over : null;
+
+ var $node = $("<img style='padding:5px' src='" + srcOff + "'/>");
+ var isOn = false;
+
+ $node.click(function() {
+ (!isOn) ? push.trigger() : release.trigger();
+ });
+
+ // append this button to a given DOM node
+ if (options.appendTo) {
+ $(options.appendTo).append($node);
+ }
+}
+
More information about the Mapbender_commits
mailing list