X-Git-Url: https://dev.renevier.net/gitweb.cgi?a=blobdiff_plain;ds=sidebyside;f=js%2Fadmin.js;h=36c74069397145bde8909b5116ea1d529a62c6fc;hb=1eff14d093d541d9858f73ffca042de5a2bf3ea5;hp=0709878efef7476b55ea339c6e93b5166df4bdd3;hpb=7282fabcfef34ef95b8c6bd414f34d77037451e1;p=syp.git
diff --git a/js/admin.js b/js/admin.js
index 0709878..36c7406 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -1,177 +1,76 @@
/* Copyright (c) 2009 Arnaud Renevier, Inc, published under the modified BSD
* license. */
-OpenLayers.Control.SelectDragFeature =
- OpenLayers.Class (OpenLayers.Control.SelectFeature, {
-
- lastPixel: null,
- dragFeature: null,
-
- startPixel : null,
+// drag feature with tolerance
+OpenLayers.Control.SypDragFeature = OpenLayers.Class (OpenLayers.Control.DragFeature, {
+ startPixel: null,
+ dragStart: null,
pixelTolerance : 0,
timeTolerance: 300,
- dragStart: null,
-
- onComplete: function (feature, pixel) {},
- onCancel: function (feature, pixel) {},
-
- initialize: function (layers, options) {
- var callbacks = {
- over: this.overFeature,
- out: this.outFeature
- };
- this.callbacks = OpenLayers.Util.extend(callbacks, this.callbacks);
-
- OpenLayers.Control.SelectFeature.prototype.initialize.apply(this,
- arguments);
-
- var handlers = {
- drag: new OpenLayers.Handler.Drag(
- this, OpenLayers.Util.extend({
- down: this.downFeature,
- move: this.moveFeature,
- up: this.upFeature,
- out: this.cancel,
- done: this.doneDragging
- })
- )
- };
- this.handlers = OpenLayers.Util.extend(handlers, this.handlers);
- },
-
- doneDragging: function (pixel) {
- var passesTimeTolerance =
- (new Date ()).getTime () > this.dragStart + this.timeTolerance;
- var xDiff = this.startPixel.x - pixel.x;
- var yDiff = this.startPixel.y - pixel.y;
- var passesPixelTolerance = Math.sqrt(Math.pow(xDiff,2) + Math.pow(yDiff,2))
- > this.pixelTolerance;
- if(passesTimeTolerance && passesPixelTolerance){
- this.onComplete(this.dragFeature, pixel);
- } else {
- var res = this.map.getResolution ();
- this.dragFeature.geometry.move(res * (this.startPixel.x - pixel.x),
- res * (pixel.y - this.startPixel.y));
- this.onCancel(this.dragFeature,pixel);
- }
-
- this.layer.drawFeature(this.dragFeature, "select");
- },
- cancel: function () {
- this.handlers.drag.deactivate ();
- this.over = false;
+ downFeature: function(pixel) {
+ OpenLayers.Control.DragFeature.prototype.downFeature.apply(this, arguments);
+ this.dragStart = (new Date()).getTime();
+ this.startPixel = pixel;
},
- clickFeature: function (feature) {
- OpenLayers.Control.SelectFeature.prototype.clickFeature.apply(this,
- arguments);
- if (Admin.Utils.indexOf(this.layer.selectedFeatures, feature) == -1) {
- this.dragDisable ();
+ doneDragging: function(pixel) {
+ OpenLayers.Control.DragFeature.prototype.doneDragging.apply(this, arguments);
+ // Check tolerance.
+ var passesTimeTolerance =
+ (new Date()).getTime() > this.dragStart + this.timeTolerance;
+
+ var xDiff = this.startPixel.x - pixel.x;
+ var yDiff = this.startPixel.y - pixel.y;
+
+ var passesPixelTolerance =
+ Math.sqrt(Math.pow(xDiff,2) + Math.pow(yDiff,2)) > this.pixelTolerance;
+
+ if(passesTimeTolerance && passesPixelTolerance){
+ this.onComplete(this.feature, pixel);
+ } else {
+ var feature = this.feature;
+ var res = this.map.getResolution();
+ this.feature.geometry.move(res * (this.startPixel.x - this.lastPixel.x),
+ res * (this.lastPixel.y - this.startPixel.y));
+ this.layer.drawFeature(this.feature);
}
+ this.layer.drawFeature(this.feature, "select");
},
- upFeature: function (pixel) {
- },
-
- moveFeature: function (pixel) {
- if (Admin.Utils.indexOf(this.layer.selectedFeatures,
- this.dragFeature) != -1) {
- var res = this.map.getResolution ();
- this.dragFeature.geometry.move(res * (pixel.x - this.lastPixel.x),
- res * (this.lastPixel.y - pixel.y));
- this.layer.drawFeature(this.dragFeature, "temporary");
- this.lastPixel = pixel;
- }
- },
-
- downFeature: function (pixel) {
- this.handlers.feature.down = pixel;
-
- if (Admin.Utils.indexOf(this.layer.selectedFeatures,
- this.dragFeature) != -1) {
- this.dragStart = (new Date ()).getTime ();
- this.startPixel = pixel;
- this.lastPixel = pixel;
- }
- },
-
- deactivate: function () {
- this.dragDisable ();
- return OpenLayers.Control.SelectFeature.prototype.deactivate.apply(
- this, arguments
- );
+ moveFeature: function(pixel) {
+ OpenLayers.Control.DragFeature.prototype.moveFeature.apply(this, arguments);
+ this.layer.drawFeature(this.feature, "temporary");
},
overFeature: function (feature) {
- if (Admin.Utils.indexOf(this.layer.selectedFeatures, feature) != -1) {
- this.dragEnable(feature);
- }
- OpenLayers.Control.SelectFeature.prototype.overFeature.apply(this,
- arguments);
- },
-
- outFeature: function (feature) {
- this.dragDisable ();
- OpenLayers.Control.SelectFeature.prototype.outFeature.apply(this,
- arguments);
- },
-
- select: function (feature) {
- this.dragEnable(feature);
- OpenLayers.Control.SelectFeature.prototype.select.apply(this,
- arguments);
- },
-
- dragDisable: function () {
- this.over = false;
- if(!this.handlers.drag.dragging) {
- this.handlers.drag.deactivate ();
- OpenLayers.Element.removeClass(
- this.map.viewPortDiv, this.displayClass + "Over"
- );
- this.dragFeature = null;
- }
- },
-
- dragEnable: function (feature) {
- if(!this.handlers.drag.dragging) {
- this.dragFeature = feature;
- this.handlers.drag.activate ();
- this.over = true;
- OpenLayers.Element.addClass(this.map.viewPortDiv, this.displayClass + "Over");
- } else {
- if(this.dragFeature.id == feature.id) {
- this.over = true;
- } else {
- this.over = false;
- }
+ // can only drag and drop currently selected feature
+ if (feature != Admin.currentFeature) {
+ return;
}
+ OpenLayers.Control.DragFeature.prototype.overFeature.apply(this, arguments);
},
- setMap: function (map) {
- this.handlers.drag.setMap(map);
- OpenLayers.Control.SelectFeature.prototype.setMap.apply(this, arguments);
- },
-
- CLASS_NAME: "OpenLayers.Control.SelectDragFeature"
+ CLASS_NAME: "OpenLayers.Control.SypDragFeature"
});
var Admin = {
- Settings: {
- MARKER_ICON: "openlayers/img/marker-blue.png",
- MARKER_ICON_HEIGHT: 25,
- MARKER_SELECT_ICON: "openlayers/img/marker-green.png",
- MARKER_SELECT_ICON_HEIGHT: 25,
- MARKER_TEMPORARY_ICON: "openlayers/img/marker-gold.png",
- MARKER_TEMPORARY_ICON_HEIGHT: 25
+ Markers: {
+ ICON: "media/marker-normal.png",
+ SELECT_ICON: "media/marker-selected.png",
+ TEMPORARY_ICON: "media/marker-temp.png",
+ HEIGHT: 25
},
map: null,
baseLayer: null,
dataLayer: null,
- selectControl: null,
- clickControl: null,
+ selFeatureControl: null,
+ moveFeatureControl: null,
+ addFeatureControl: null,
+
+ currentFeature: null,
+ currentFeatureLocation: null,
init: function () {
this.map = new OpenLayers.Map ("map", {
@@ -184,385 +83,293 @@ var Admin = {
});
this.baseLayer = this.createBaseLayer ();
- this.dataLayer = this.createDataLayer ();
- this.map.addLayers([this.baseLayer, this.dataLayer]);
-
- this.selectControl = this.createSelectDragControl ();
- this.map.addControl(this.selectControl);
- this.selectControl.activate ();
-
- this.clickControl = this.createClickControl ();
- this.map.addControl(this.clickControl);
-
- var centerBounds = new OpenLayers.Bounds ();
-
- var mapProj = this.map.getProjectionObject();
- var sypOrigProj = new OpenLayers.Projection("EPSG:4326");
-
- var bottomLeft = new OpenLayers.LonLat(sypOrig[0],sypOrig[1]);
- bottomLeft = bottomLeft.transform(sypOrigProj, mapProj);
- var topRight = new OpenLayers.LonLat(sypOrig[2],sypOrig[3])
- topRight = topRight.transform(sypOrigProj, mapProj);
+ this.map.addLayer(this.baseLayer);
+
+ this.map.setCenter(new OpenLayers.LonLat(0, 0), 0);
+ if (sypSettings.loggedUser) {
+ this.dataLayer = this.createDataLayer (sypSettings.loggedUser);
+ this.map.addLayer(this.dataLayer);
+ this.reset();
+ }
+ },
- centerBounds.extend(bottomLeft);
- centerBounds.extend(topRight);
- this.map.zoomToExtent(centerBounds);
+ reset: function() {
+ this.addFeatureControl.deactivate();
+ this.moveFeatureControl.deactivate();
+ this.selFeatureControl.activate();
+ this.checkForFeatures();
+ $("#newfeature_button").show().val(SypStrings.AddItem);
+ $("#newfeature_button").unbind("click").click(function () {
+ Admin.addNewFeature();
+ });
},
createBaseLayer: function () {
return new OpenLayers.Layer.OSM("OSM");
},
- createDataLayer: function () {
+ createDataLayer: function (user) {
var styleMap = new OpenLayers.StyleMap (
{"default": {
- externalGraphic: this.Settings.MARKER_ICON,
- graphicHeight: this.Settings.MARKER_ICON_HEIGHT
- || 32
+ externalGraphic: this.Markers.ICON,
+ graphicHeight: this.Markers.HEIGHT || 32
},
"temporary": {
- externalGraphic: this.Settings.MARKER_TEMPORARY_ICON,
- graphicHeight: this.Settings.MARKER_TEMPORARY_ICON_HEIGHT
- || 32
+ externalGraphic: this.Markers.TEMPORARY_ICON,
+ graphicHeight: this.Markers.HEIGHT || 32
},
"select": {
- externalGraphic: this.Settings.MARKER_SELECT_ICON,
- graphicHeight: this.Settings.MARKER_SELECT_ICON_HEIGHT
- || 32
+ externalGraphic: this.Markers.SELECT_ICON,
+ graphicHeight: this.Markers.HEIGHT || 32
}});
- var layer = new OpenLayers.Layer.GML("KML", "items.php",
+ var layer = new OpenLayers.Layer.GML("KML", "items.php?from_user=" + encodeURIComponent(user),
{
styleMap: styleMap,
format: OpenLayers.Format.KML,
projection: this.map.displayProjection,
eventListeners: { scope: this,
- loadend: this.checkForFeatures,
- featureremoved: this.checkForFeatures,
- featureadded: this.checkForFeatures
+ loadend: this.dataLayerEndLoad
}
});
+ // controls
+ this.selFeatureControl = this.createSelectFeatureControl(layer)
+ this.map.addControl(this.selFeatureControl);
+ this.moveFeatureControl = this.createMoveFeatureControl(layer)
+ this.map.addControl(this.moveFeatureControl);
+ this.addFeatureControl = this.createNewfeatureControl();
+ this.map.addControl(this.addFeatureControl);
+
return layer;
},
- createSelectDragControl: function () {
- var control = new OpenLayers.Control.SelectDragFeature(
- this.dataLayer, {
- onSelect: this.onFeatureSelect,
- onUnselect: this.onFeatureUnselect,
- onComplete: OpenLayers.Function.bind(this.onDragComplete.action,
- this.onDragComplete),
- toggle: true,
- clickout: false
- });
+ createMoveFeatureControl: function (layer) {
+ var control = new OpenLayers.Control.SypDragFeature(
+ layer, {
+ });
return control;
},
- checkForFeatures: function () {
- var features = this.dataLayer.features;
- if (features.length == 0) {
- $("#modify_howto").css("visibility", "hidden");
- } else {
- $("#modify_howto").css("visibility", "visible");
- }
+ createSelectFeatureControl: function (layer) {
+ var control = new OpenLayers.Control.SelectFeature(
+ layer, {
+ onSelect: OpenLayers.Function.bind(this.onFeatureSelect, this)
+ });
+ return control;
},
- createClickControl: function () {
+ createNewfeatureControl: function () {
var control = new OpenLayers.Control ();
- var handler = new OpenLayers.Handler.Click(control, {});
+ var handler = new OpenLayers.Handler.Click(control, {
+ 'click': OpenLayers.Function.bind(FeatureMgr.add, FeatureMgr)
+ });
control.handler = handler;
return control;
},
- addMarkerNewImage: function (imgurl) {
- return function (evt) {
- FeatureMgr.itemDeleter.lock(imgurl);
- var pos = this.map.getLonLatFromViewPortPx(evt.xy);
- var point = new OpenLayers.Geometry.Point(pos.lon, pos.lat);
- var desc = '';
- var feature = new OpenLayers.Feature.Vector(point, {
- name: '',
- description: desc
- });
- Admin.dataLayer.addFeatures([feature]);
- Admin.selectControl.activate ();
-
- // When adding a feature and then selecting it, we set render style
- // to "default" and right after, we set it to "select". When
- // rendering backend is SVG, that triggers a modification of href
- // attribute right after having inserted image with a different
- // href. Unfortunately, webkit does not like that (see
- // webkit#26392). That's why we need to wrap selection in a
- // timeout.
- var renderer = Admin.dataLayer.renderer;
- if (renderer && renderer.CLASS_NAME == "OpenLayers.Renderer.SVG") {
- window.setTimeout(function () {
- Admin.selectControl.select(feature);
- Admin.saveFeature(feature);
- } ,0);
- } else {
- Admin.selectControl.select(feature);
- Admin.saveFeature(feature);
- }
- $("#addphoto_button").val("ajouter une autre image");
+ onFeatureSelect: function (feature) {
+ this.showEditor(feature);
+ FeatureMgr.reset();
+ this.selFeatureControl.deactivate();
+ this.moveFeatureControl.activate();
+ },
+
+ closeEditor: function() {
+ if ($("#editor").css("display") == "none") {
+ return;
+ }
+ if (this.currentFeature && this.currentFeature.layer) {
+ this.selFeatureControl.unselect(this.currentFeature);
}
+ this.currentFeature = null;
+ this.currentFeatureLocation = null;
+ $("#img").removeAttr('src');
+ $("#img").parent().html($("#img").parent().html());
+ $("#img").parent().show();
+ $("#title, #description").val("");
+ $("#editor").hide();
+ // do it once before hidding and once after hidding to work in all cases
+ $("#title, #description").val("");
+ $("#image_file").parent().html($("#image_file").parent().html());
+ $(document).unbind("keydown");
+ this.checkForFeatures();
+ this.reset();
},
- onFeatureSelect: function (feature) {
- Admin.closeNewimage();
+ showEditor: function (feature) {
+ $("#newfeature_button").hide();
+ userMgr.close();
- $("#img").attr('src', '');
+ if (feature.fid) {
+ $("#delete").show();
+ } else {
+ $("#delete").hide();
+ }
+ $(document).unbind("keydown").keydown(function(e) {
+ if (e.keyCode == 27) {
+ Admin.cancelCurrentFeature()
+ e.preventDefault();
+ }
+ });
+ this.currentFeature = feature;
+ this.currentFeatureLocation = new OpenLayers.Pixel(feature.geometry.x, feature.geometry.y);
$("#editor").show();
- $("#features_success").css("visibility", "hidden");
-
- // we use the real onclick method otherwise: jquery method would not
- // execute because of input.change method
- $("#deletephoto_button").get(0).onclick = function () {
- Admin.clearChangeTimeouts();
- var imgurl = $("#img").attr("src");
- Admin.deleteFeature(feature, imgurl);
- };
-
- $("#title_input").val(feature.attributes.name);
-
+ $("#instructions").text(SypStrings.DragDropHowto);
+ $("#title").val(feature.attributes.name);
var fullDesc = $(feature.attributes.description).parent();
- $("#desc_input").val(fullDesc.find('p').text());
- $("#img").attr('src', fullDesc.find('img').attr('src'));
+ $("#description").val(fullDesc.find('p').text());
+ var src = fullDesc.find('img').attr('src');
+ if (src) {
+ $("#img").parent().show();
+ $("#img").attr('src', src);
+ $("#image_file").parent().hide();
+ $("#image_delete").show();
+ } else {
+ $("#img").parent().hide();
+ $("#image_file").parent().show();
+ $("#image_delete").hide();
+ }
+ $("#title").select().focus();
+ },
- $(".input").each(function () {
- this.curVal = this.value;
- });
+ dataLayerEndLoad: function() {
+ // only set zoom extent once
+ this.dataLayer.events.unregister('loadend', this, this.dataLayerEndLoad);
+ this.dataLayer.events.register('loadend', this, this.checkForFeatures);
- // Change event happens if an input has change if we leave that field.
- // But we want data to be saved even if user does not blur input field
- // (for example, he types something in the box and then does not touch
- // it's computer). So, every 60 seconds, we check if value of input
- // has changed. More precisely, every 60 seconds, we wait 3 seconds to
- // see if input value is still changing and if not, it probably means
- // user is not modifying data anymore. In that case, we save.
+ if (!this.checkForFeatures()) {
+ return;
+ }
- $(".input").focus(function (evt) {
- var self = this;
- this.curVal = this.value;
- this.checkTimer = window.setInterval(function () {
- if (self.value != self.curVal) {
- $("#features_success").css("visibility", "hidden");
- var newVal = self.value;
- this.saveTimeout = window.setTimeout(function () {
- if (self.value == newVal) {
- self.curVal = self.value;
- Admin.saveFeature(feature);
- }
- }, 3 * 1000);
- }
- }, 6 * 1000);
- })
-
- $(".input").blur(function (evt) {
- if (this.checkTimer) {
- window.clearInterval(this.checkTimer);
- this.checkTimer = null;
- }
- if (this.saveTimeout) {
- window.clearTimeout(this.saveTimeout);
- this.saveTimeout = null;
- }
- });
+ var map = this.map;
+ var orig = this.Utils.mbr (this.dataLayer);
+ var centerBounds = new OpenLayers.Bounds();
- $(".input").change(function (evt) {
- if (this.curVal != this.value) {
- $("#features_success").css("visibility", "hidden");
- this.curVal = this.value;
- Admin.saveFeature(feature);
- }
- });
+ var mapProj = map.getProjectionObject();
+ var sypOrigProj = new OpenLayers.Projection("EPSG:4326");
- $("#title_input").blur()
- $("#title_input").focus()
- $("#title_input").select()
+ var bottomLeft = new OpenLayers.LonLat(orig[0],orig[1]);
+ bottomLeft = bottomLeft.transform(sypOrigProj, mapProj);
+ var topRight = new OpenLayers.LonLat(orig[2],orig[3])
+ topRight = topRight.transform(sypOrigProj, mapProj);
- $("#dragdrop_howto").css("visibility", "visible");
+ centerBounds.extend(bottomLeft);
+ centerBounds.extend(topRight);
+ map.zoomToExtent(centerBounds);
},
- onFeatureUnselect: function (feature) {
- Admin.closeEditor();
- $("#features_connect_error").hide();
- $("#deletephoto_button").get(0).onclick = null;
-
- // if user unselects feature, save modifications without waiting
- var needsSaving = Admin.onDragComplete.timeout ? true: false;
- $(".input").each(function () {
- if (this.value != this.curVal) {
- needsSaving = true;
- }
- if (this.checkTimer) {
- window.clearInterval(this.checkTimer);
- this.checkTimer = null;
- }
- if (this.saveTimeout) {
- window.clearTimeout(this.saveTimeout);
- this.saveTimeout = null;
- }
- });
-
- if (needsSaving) {
- $("#features_success").css("visibility", "hidden");
- Admin.saveFeature(feature);
+ checkForFeatures: function () {
+ var features = this.dataLayer.features;
+ if (features.length != 0) {
+ $("#instructions").text(SypStrings.SelectHowto);
}
-
- window.clearTimeout(Admin.onDragComplete.timeout);
- Admin.onDragComplete.timeout = null;
+ return !!features.length;
},
addNewFeature: function () {
- this.selectControl.unselectAll();
- $("#features_success").css("visibility", "hidden");
- $("#features_connect_error").hide();
- $("#addphoto_button").attr("disabled", "disabled");
- $("#newimage").show();
- $("#file_form").show();
- $("#file_form").get(0).reset();
- $("#newimage_input").change(function () {
- $("#newimage_error").hide();
- if (OpenLayers.Util.getBrowserName() == "msie") {
- if ($("#file_form").find('input[type="submit"]').length == 0) {
- $("#file_form").append(
- '
" + - this.Utils.escapeHTML(description) + - "
" + - "" + Admin.Utils.escapeHTML(description) + "
" + + "