digilib-old: client/digitallibrary/jquery/jquery.digilib.regions.js comparison

comparison client/digitallibrary/jquery/jquery.digilib.regions.js @ 813:1a7b14deae3a jquery

regions plugin works, inclunding event handlers

author	hertzhaft
date	Mon, 21 Feb 2011 01:03:55 +0100
parents	ae8e98c479d5
children	60e8cca7ac81

comparison

equal deleted inserted replaced

-:b484631f37c1
+:1a7b14deae3a
 - backlink mechanism
 - don't write to data.settings?
 */
 (function($) {
+// the digilib object
+var digilib;
 // the data object passed by digilib
 var data;
-var buttons;
+// the functions made available by digilib
 var fn;
-// affine geometry plugin stub
+// affine geometry plugin
 var geom;
 var FULL_AREA;
+var ID_PREFIX = "digilib-region-";
 var buttons = {
 addregion : {
-onclick : "setRegion",
+onclick : "defineRegion",
-tooltip : "set a region",
+tooltip : "define a region",
 icon : "addregion.png"
 },
 delregion : {
 onclick : "removeRegion",
 tooltip : "delete the last region",
 };
 var defaults = {
 // are regions shown?
 'isRegionVisible' : true,
+// are region numbers shown?
+'showRegionNumbers' : false,
 // buttonset of this plugin
 'regionSet' : ['addregion', 'delregion', 'regions', 'regioninfo', 'lessoptions'],
-// array of defined regions
+// url param for regions
-'regions' : []
+'rg' : null,
 };
 var actions = {
 // define a region interactively with two clicked points
-"setRegion" : function(data) {
+"defineRegion" : function(data) {
+if (!data.settings.isRegionVisible) {
+alert("Please turn on regions visibility!");
+return;
+}
 var $elem = data.$elem;
 var $body = $('body');
 var bodyRect = geom.rectangle($body);
 var $scaler = data.$scaler;
 var scalerRect = geom.rectangle($scaler);
 var pt1, pt2;
 // overlay prevents other elements from reacting to mouse events
 var $overlay = $('<div class="digilib-overlay"/>');
 $body.append($overlay);
 bodyRect.adjustDiv($overlay);
-// the region to be defined
+// we count regions from 1
-var $regionDiv = $('<div class="region" style="display:none"/>');
+var $regionDiv = addRegionDiv(data, data.regions.length + 1);
-$elem.append($regionDiv);
 // mousedown handler: start sizing
 var regionStart = function (evt) {
 pt1 = geom.position(evt);
 // setup and show zoom div
 $overlay.unbind("mouseup.dlRegion", regionEnd);
 $overlay.remove();
 // clip region
 clickRect.clipTo(scalerRect);
 clickRect.adjustDiv($regionDiv);
-data.settings.regions.push(clickRect); // TODO: trafo, params
+storeRegion(data, $regionDiv);
 // fn.redisplay(data);
+fn.highlightButtons(data, 'addregion', 0);
+redisplay(data);
 return false;
 };
 // bind start zoom handler
 $overlay.one('mousedown.dlRegion', regionStart);
+fn.highlightButtons(data, 'addregion', 1);
 },
 // remove the last added region
 "removeRegion" : function (data) {
-var $regionDiv = data.settings.regions.pop();
+if (!data.settings.isRegionVisible) {
+alert("Please turn on regions visibility!");
+return;
+}
+var region = data.regions.pop();
+if (region == null) return;
+var $regionDiv = region.$div;
 $regionDiv.remove();
-// fn.redisplay(data);
+redisplay(data);
 },
-// add a region programmatically
+// show/hide regions
-"addRegion" : function(data, pos, url) {
+"toggleRegions" : function (data) {
+var show = !data.settings.isRegionVisible;
+data.settings.isRegionVisible = show;
+fn.highlightButtons(data, 'regions' , show);
+showRegionDivs(data);
+}
+};
+var addRegion = actions.addRegion;
+// store a region div
+var storeRegion = function (data, $regionDiv) {
+var regions = data.regions;
+var rect = geom.rectangle($regionDiv);
+var regionRect = data.imgTrafo.invtransform(rect);
+regionRect.$div = $regionDiv;
+regions.push(regionRect);
+console.debug("regions", data.regions, "regionRect", regionRect);
+};
+// add a region to data.$elem
+var addRegionDiv = function (data, nr) {
+var $regionDiv = $('<div class="region overlay" style="display:none"/>');
+$regionDiv.attr("id", ID_PREFIX + nr);
+data.$elem.append($regionDiv);
+if (data.settings.showRegionNumbers) {
+var $regionNr = $('<div class="regionnumber" />');
+$regionNr.text(nr);
+$regionDiv.append($regionNr);
+}
+return $regionDiv;
+};
+// create a region div from the data.regions collection
+var createRegionDiv = function (data, index) {
+var regions = data.regions;
+if (index > regions.length) return null;
+var region = regions[index];
+var $regionDiv = addRegionDiv(data, index + 1); // we count regions from 1
+region.$div = $regionDiv;
+// TODO store original coords in $regionDiv.data for embedded mode?
+return $regionDiv;
+};
+// create regions
+var createRegionDivs = function (data) {
+for (var i = 0; i < data.regions.length ; i++) {
+createRegionDiv(data, i);
+}
+};
+// show a region on top of the scaler image
+var showRegionDiv = function (data, index) {
+if (!data.imgTrafo) return;
+var $elem = data.$elem;
+var regions = data.regions;
+if (index > regions.length) return;
+var region = regions[index]
+var $regionDiv = region.$div;
+if (!$regionDiv) {
+console.debug("showRegionDiv: region has no $div", region);
+// alert("showRegionDiv: region has no $div to show");
+return;
+}
+var regionRect = region.copy();
+var show = data.settings.isRegionVisible;
+if (show && data.zoomArea.overlapsRect(regionRect)) {
+regionRect.clipTo(data.zoomArea);
+var screenRect = data.imgTrafo.transform(regionRect);
+screenRect.adjustDiv($regionDiv);
+$regionDiv.show();
+} else {
+$regionDiv.hide();
+}
+};
+// show regions
+var showRegionDivs = function (data) {
+for (var i = 0; i < data.regions.length ; i++) {
+showRegionDiv(data, i);
+}
+};
+var unpackRegions = function (data) {
+// create regions from parameters
+var rg = data.settings.rg;
+if (rg == null) return;
+var regions = data.regions;
+var rs = rg.split(",");
+for (var i = 0; i < rs.length; i++) {
+var r = rs[i];
+var pos = r.split("/", 4);
+var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
+regions.push(rect);
 // TODO: backlink mechanism
-if (pos.length === 4) {
+// var url = paramString.match(/http.*$/);
-// TODO: trafo
+}
-var $regionDiv = $('<div class="region" style="display:none"/>');
+};
-$regionDiv.attr("id", "region" + i);
-var regionRect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
+// pack regions array into a parameter string
-regionRect.adjustDiv($regionDiv);
+var packRegions = function (data) {
-if (!data.regions) {
+var regions = data.regions;
-data.regions = [];
+if (!regions.length) return;
-}
+var rg = '';
-data.regions.push($regionDiv);
-}
-}
-};
-var addRegion = actions.addRegion;
-var realizeRegions = function (data) {
-// create regions from parameters
-var settings = data.settings;
-var rg = settings.rg;
-var regions = rg.split(",");
-for (var i = 0; i < regions.length ; i++) {
-var pos = regions.split("/", 4);
-// TODO: backlink mechanism
-var url = paramString.match(/http.*$/);
-addRegion(data, pos, url);
-}
-};
-// display current regions
-var renderRegions = function (data) {
-var regions = data.regions;
 for (var i = 0; i < regions.length; i++) {
-var region = regions[i];
+region = regions[i];
-if (data.zoomArea.containsPosition(region)) {
+if (i) {
-var rpos = data.imgTrafo.transform(region);
+rg += ',';
-console.debug("renderRegions: rpos=", rpos);
+}
-// create region
+rg += [
-var $regionDiv = $('<div class="region" style="display:none"/>');
+fn.cropFloatStr(region.x),
-$regionDiv.attr("id", "region" + data.regions.length);
+fn.cropFloatStr(region.y),
-$elem.append($regionDiv);
+fn.cropFloatStr(region.width),
-rpos.adjustDiv($regionDiv);
+fn.cropFloatStr(region.height)
-}
+].join('/');
 }
-};
+data.settings.rg = rg;
+};
-var serializeRegions = function (data) {
-if (data.regions) {
+var redisplay = function (data) {
-settings.rg = '';
+packRegions(data);
-for (var i = 0; i < data.regions.length; i++) {
+fn.redisplay(data);
-if (i) {
+}
-settings.rg += ',';
-}
-settings.rg +=
-cropFloat(data.regions[i].x).toString() + '/' +
-cropFloat(data.regions[i].y).toString() + '/' +
-cropFloat(data.regions[i].width).toString() + '/' +
-cropFloat(data.regions[i].height).toString();
-}
-}
-};
 var handleSetup = function (evt) {
-console.debug("regions: handleSetup");
 data = this;
-//        if (data.settings.isBirdDivVisible) {
+console.debug("regions: handleSetup", data.settings.rg);
-//            setupBirdDiv(data);
+unpackRegions(data);
-//            data.$birdDiv.show();
+createRegionDivs(data);
-//        }
 };
 var handleUpdate = function (evt) {
-console.debug("regions: handleUpdate");
 data = this;
-//        if (data.settings.isBirdDivVisible) {
+fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible);
-//            renderBirdArea(data);
+showRegionDivs(data);
-//            setupBirdDrag(data);
+console.debug("regions: handleUpdate", data.settings.rg);
-//        }
 };
 var handleRedisplay = function (evt) {
+data = this;
+showRegionDivs(data);
 console.debug("regions: handleRedisplay");
-data = this;
-//        if (data.settings.isBirdDivVisible) {
-//            updateBirdDiv(data);
-//        }
 };
 var handleDragZoom = function (evt, zoomArea) {
 console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
 data = this;
-//        if (data.settings.isBirdDivVisible) {
-//            setBirdZoom(data, zoomArea);
-//        }
 };
 // plugin installation called by digilib on plugin object.
-var install = function(digilib) {
+var install = function(plugin) {
+digilib = plugin;
 console.debug('installing regions plugin. digilib:', digilib);
+fn = digilib.fn;
 // import geometry classes
-geom = digilib.fn.geometry;
+geom = fn.geometry;
 FULL_AREA = geom.rectangle(0,0,1,1);
 // add defaults, actions, buttons
 $.extend(digilib.defaults, defaults);
 $.extend(digilib.actions, actions);
 $.extend(digilib.buttons, buttons);
 var buttonSet = data.settings.regionSet || regionSet;
 // set regionSet to [] or '' for no buttons (when showing regions only)
 if (buttonSet.length && buttonSet.length > 0) {
 buttonSettings['regionSet'] = buttonSet;
 buttonSettings.buttonSets.push('regionSet');
 }
 // install event handler
 $data.bind('setup', handleSetup);
 $data.bind('update', handleUpdate);
 $data.bind('redisplay', handleRedisplay);
 $data.bind('dragZoom', handleDragZoom);
+// regions array
+data.regions = [];
+// add "rg" to digilibParamNames
+data.settings.digilibParamNames.push('rg');
 };
 // plugin object with name and install/init methods
 // shared objects filled by digilib on registration
 var pluginProperties = {