Mercurial > hg > digilib-old
changeset 996:0b63093d598e
cssPrefix works now.
| author | robcast |
|---|---|
| date | Fri, 10 Feb 2012 12:47:17 +0100 |
| parents | 76cffbaf0083 |
| children | bc969618c42f |
| files | webapp/src/main/webapp/jquery/digilib.html webapp/src/main/webapp/jquery/jquery.digilib.arrows.js webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js webapp/src/main/webapp/jquery/jquery.digilib.buttons.js webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.marks.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js |
| diffstat | 8 files changed, 126 insertions(+), 109 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/digilib.html Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/digilib.html Fri Feb 10 12:47:17 2012 +0100 @@ -28,7 +28,7 @@ interactionMode : 'fullscreen', showRegionNumbers : true }; - var $div = $('div.digilib'); + var $div = $('div#digilib'); $div.digilib(opts); }); @@ -36,7 +36,7 @@ </head> <body> - <div id="digilib" class="digilib"> + <div id="digilib"> <p>digilib doesn't work! Please switch on Javascript or notify the server administrator!</p> <img src="http://digilib.berlios.de/images/digilib-logo-big.png" /> </div>
--- a/webapp/src/main/webapp/jquery/jquery.digilib.arrows.js Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.arrows.js Fri Feb 10 12:47:17 2012 +0100 @@ -148,6 +148,7 @@ var $elem = data.$elem; var settings = data.settings; var mode = settings.interactionMode; + var cssPrefix = settings.cssPrefix; var imagePath = settings.buttonSettings[mode].imagePath; // make relative imagePath absolute if (imagePath.charAt(0) !== '/' && imagePath.substring(0, 3) !== 'http') { @@ -159,14 +160,14 @@ var tooltip = buttonConfig.tooltip; var icon = imagePath + buttonConfig.icon; // construct the button html - var $button = $('<div class="keep"><a href=""><img class="button" src="' + icon + '"/></a></div>'); + var $button = $('<div class="'+cssPrefix+'keep"><a href=""><img class="'+cssPrefix+'button" src="' + icon + '"/></a></div>'); if (!show) { $button.hide(); } $div.append($button); // add attributes and bindings $button.attr('title', tooltip); - $button.addClass('arrow-' + buttonName); + $button.addClass(cssPrefix+'arrow-' + buttonName); // create handler for the buttons on the div (necessary for horizontal // scroll arrows) $div.on('click.digilib', function(evt) { @@ -184,6 +185,7 @@ var setupZoomArrows = function(data) { var $elem = data.$elem; var settings = data.settings; + var cssPrefix = settings.cssPrefix; var show = settings.showZoomArrows; console.log('zoom arrows:', show); if (!show) @@ -196,19 +198,21 @@ return; } // wrap scaler img in table - data.$scaler.wrap('<table class="scalertable"><tbody><tr class="midrow"><td/></tr></tbody></table>'); + data.$scaler.wrap('<table class="'+cssPrefix+'scalertable"><tbody><tr class="'+cssPrefix+'midrow"><td/></tr></tbody></table>'); // middle row with img has three elements - data.$scaler.parent().before('<td class="arrow left" valign="middle"/>').after('<td class="arrow right" valign="middle"/>'); + data.$scaler.parent().before('<td class="'+cssPrefix+'arrow '+cssPrefix+'left" valign="middle"/>') + .after('<td class="'+cssPrefix+'arrow '+cssPrefix+'right" valign="middle"/>'); // first and last row has only one - var $table = $elem.find('table.scalertable'); - $table.find('tr.midrow').before('<tr class="firstrow"><td colspan="3" class="arrow up" align="center"/></tr>').after( - '<tr class="lasttrow"><td colspan="3" class="arrow down" align="center"/></tr>'); + var $table = $elem.find('table.'+cssPrefix+'scalertable'); + $table.find('tr.'+cssPrefix+'midrow') + .before('<tr class="'+cssPrefix+'firstrow"><td colspan="3" class="'+cssPrefix+'arrow '+cssPrefix+'up" align="center"/></tr>') + .after('<tr class="'+cssPrefix+'lasttrow"><td colspan="3" class="'+cssPrefix+'arrow '+cssPrefix+'down" align="center"/></tr>'); // add arrow buttons var ar = {}; - ar.$up = createButton(data, $table.find('td.up'), 'up', digilib.fn.canMove(data, 0, -1)); - ar.$down = createButton(data, $table.find('td.down'), 'down', digilib.fn.canMove(data, 0, 1)); - ar.$left = createButton(data, $table.find('td.left'), 'left', digilib.fn.canMove(data, -1, 0)); - ar.$right = createButton(data, $table.find('td.right'), 'right', digilib.fn.canMove(data, 1, 0)); + ar.$up = createButton(data, $table.find('td.'+cssPrefix+'up'), 'up', digilib.fn.canMove(data, 0, -1)); + ar.$down = createButton(data, $table.find('td.'+cssPrefix+'down'), 'down', digilib.fn.canMove(data, 0, 1)); + ar.$left = createButton(data, $table.find('td.'+cssPrefix+'left'), 'left', digilib.fn.canMove(data, -1, 0)); + ar.$right = createButton(data, $table.find('td.'+cssPrefix+'right'), 'right', digilib.fn.canMove(data, 1, 0)); data.arrows = ar; };
--- a/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js Fri Feb 10 12:47:17 2012 +0100 @@ -130,13 +130,14 @@ // creates HTML structure for the bird's eye view in elem var setupBirdDiv = function (data) { + var cssPrefix = data.settings.cssPrefix; var $elem = data.$elem; // the bird's eye div - var $birdDiv = $('<div class="birdview" style="display:none"/>'); + var $birdDiv = $('<div class="'+cssPrefix+'birdview" style="display:none"/>'); // the detail indicator frame - var $birdZoom = $('<div class="birdzoom" style="display:none; background-color:transparent;"/>'); + var $birdZoom = $('<div class="'+cssPrefix+'birdzoom" style="display:none; background-color:transparent;"/>'); // the small image - var $birdImg = $('<img class="birdimg"/>'); + var $birdImg = $('<img class="'+cssPrefix+'birdimg"/>'); data.$birdDiv = $birdDiv; data.$birdZoom = $birdZoom; data.$birdImg = $birdImg; @@ -232,6 +233,7 @@ // bird's eye view zoom area click and drag handler var setupBirdDrag = function(data) { + var cssPrefix = data.settings.cssPrefix; var $birdImg = data.$birdImg; var $birdZoom = data.$birdZoom; var $document = $(document); @@ -247,7 +249,7 @@ birdImgRect = geom.rectangle($birdImg); birdZoomRect = geom.rectangle($birdZoom); newRect = null; - data.$elem.find(".overlay").hide(); // hide all overlays (marks/regions) + data.$elem.find('.'+cssPrefix+'overlay').hide(); // hide all overlays (marks/regions) $document.on("mousemove.dlBirdMove", birdZoomMove); $document.on("mouseup.dlBirdMove", birdZoomEndDrag); return false; @@ -262,8 +264,8 @@ newRect.addPosition(delta); newRect.stayInside(birdImgRect); // acount for border width - newRect.addPosition({x : -bw, y : -bw}); - newRect.adjustDiv($birdZoom); + /* newRect.addPosition({x : -bw, y : -bw}); + newRect.adjustDiv($birdZoom); */ // reflect birdview zoom position in scaler image var area = data.birdTrafo.invtransform(newRect); $(data).trigger('changeZoomArea', area); @@ -281,7 +283,7 @@ birdZoomMove(evt); } // ugly, but needed to prevent double border width compensation - newRect.addPosition({x : bw, y : bw}); + /* newRect.addPosition({x : bw, y : bw}); */ var newArea = data.birdTrafo.invtransform(newRect); data.zoomArea = newArea; digilib.fn.redisplay(data);
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js Fri Feb 10 12:47:17 2012 +0100 @@ -5,11 +5,11 @@ (function($) { // plugin object with digilib data - var digilib; + var digilib = null; // the functions made available by digilib - var fn; + var fn = null; // affine geometry plugin - var geom; + var geom = null; var buttons = { reference : { @@ -223,9 +223,9 @@ // shows Calibration Div showCalibrationDiv : function (data) { var $elem = data.$elem; - var settings = data.settings; - var $calDiv = $('#calibration'); - var $input = $('#calibration-input'); + var cssPrefix = data.settings.cssPrefix; + var $calDiv = $elem.find('.'+cssPrefix+'calibration'); + var $input = $elem.find('.'+cssPrefix+'calibration-input'); $calDiv.fadeIn(); $input.focus(); }, @@ -233,28 +233,24 @@ // shows ScaleModeSelector showScaleModeSelector : function (data) { var $elem = data.$elem; - var $div = $("#scalemode"); - if ($div.is(":visible")) { + var cssPrefix = data.settings.cssPrefix; + var $div = $elem.find('div#'+cssPrefix+'scalemode'); + if ($div.is(':visible')) { $div.fadeOut(); return; } // select current mode var mode = data.scaleMode; $div.find('option').each(function () { - $this = $(this); - if ($this.attr('name') == mode) { - $this.prop('selected', true); - } else { - $this.prop('selected', false); - } + $(this).prop('selected', $(this).attr('name') == mode); }); - var $button = $elem.find('div.button-scale'); + var $button = $elem.find('div.'+cssPrefix+'button-scale'); var buttonRect = geom.rectangle($button); - var divRect = geom.rectangle($div); $('body').on("click.scalemode", function(event) { $div.fadeOut(); }); $div.fadeIn(); + var divRect = geom.rectangle($div); $div.offset({ left : Math.abs(buttonRect.x - divRect.width - 4), top : buttonRect.y + 4 @@ -283,7 +279,7 @@ // plugin initialization var init = function (data) { console.debug('initialising buttons plugin. data:', data); - // adjust insets + // add insets data.currentInsets['buttons'] = getInsets(data); // install event handler var $data = $(data); @@ -470,38 +466,39 @@ var setupCalibrationDiv = function (data) { var $elem = data.$elem; var settings = data.settings; + var cssPrefix = settings.cssPrefix; var html = '\ - <div id="calibration" class="calibration">\ - <div class="ruler">\ - <div class="cm">Please enter the length of this scale on your screen</div>\ + <div id="'+cssPrefix+'calibration" class="'+cssPrefix+'calibration">\ + <div class="'+cssPrefix+'ruler">\ + <div class="'+cssPrefix+'cm">Please enter the length of this scale on your screen</div>\ <div>\ - <input id="calibration-input" size="5"/> cm\ - <button class="calibration-button" id="calibrationOk">OK</button>\ - <button class="calibration-button" id="calibrationCancel">Cancel</button>\ + <input id="'+cssPrefix+'calibration-input" size="5"/> cm\ + <button class="'+cssPrefix+'calibration-button" id="'+cssPrefix+'calibrationOk">OK</button>\ + <button class="'+cssPrefix+'calibration-button" id="'+cssPrefix+'calibrationCancel">Cancel</button>\ </div>\ - <div class="calibration-error">Please enter a numeric value like this: 12.3</div>\ + <div class="'+cssPrefix+'calibration-error">Please enter a numeric value like this: 12.3</div>\ </div>\ </div>'; var $calDiv = $(html); $elem.append($calDiv); - var $input = $calDiv.find("input"); - var $ok = $calDiv.find("#calibrationOk"); + var $input = $calDiv.find('input'); + var $ok = $calDiv.find('#'+cssPrefix+'calibrationOk'); var $cancel = $calDiv.find("#calibrationCancel"); data.calibrationDiv = $calDiv; - data.calibrationErrorDiv = $calDiv.find("div.calibration-error"); + data.calibrationErrorDiv = $calDiv.find('div.'+cssPrefix+'calibration-error'); data.calibrationInput = $input; centerOnScreen(data, $calDiv); var handler = function(event) { var _data = data; - if (event.keyCode == 27 || event.target.id == 'calibrationCancel') { + if (event.keyCode == 27 || event.target.id == cssPrefix+'calibrationCancel') { $calDiv.fadeOut(); return false; } - if (event.keyCode == 13 || event.target.id == 'calibrationOk') { + if (event.keyCode == 13 || event.target.id == cssPrefix+'calibrationOk') { changeCalibration(_data); return false; } - _data.calibrationInput.removeClass('error'); + _data.calibrationInput.removeClass(cssPrefix+'error'); }; $ok.on("click", handler); $cancel.on("click", handler); @@ -513,17 +510,18 @@ var setupScaleModeDiv = function (data) { var $elem = data.$elem; var settings = data.settings; + var cssPrefix = settings.cssPrefix; var currentMode = digilib.fn.getScaleMode(data); - var $scaleModeDiv = $('<div id="scalemode" style="display:none; z-index:9999; position:absolute"/>'); + var $scaleModeDiv = $('<div id="'+cssPrefix+'scalemode" style="display:none; z-index:9999; position:absolute"/>'); data.scaleModeDiv = $scaleModeDiv; - var $scaleModeSelect = $('<select class="scalemode" />'); + var $scaleModeSelect = $('<select class="'+cssPrefix+'scalemode" />'); $elem.append($scaleModeDiv); $scaleModeDiv.append($scaleModeSelect); for (var i = 0; i < modes.length; i++) { var mode = modes[i]; - var select = (mode.name == currentMode) ? ' select="select"' : ''; + var selected = (mode.name == currentMode) ? ' selected="selected"' : ''; $scaleModeSelect.append($('<option name="' - + mode.name + '"' + select + '>' + + mode.name + '"' + selected + '>' + mode.label + '</option>')); } $scaleModeDiv.on("click.scalemode", function(event) { @@ -557,17 +555,20 @@ var dpi = fn.cropFloat(w / parseFloat(cm) * 2.54); console.debug('width', w, 'cm', cm, 'input dpi:', dpi); if(!fn.isNumber(dpi)) { - $input.addClass('error'); + $input.addClass(data.settings.cssPrefix+'error'); return; } digilib.actions.calibrate(data, dpi); $calDiv.fadeOut(); }; - // creates HTML structure for a single button + /** + * creates HTML structure for a single button + */ var createButton = function (data, $div, buttonName) { var $elem = data.$elem; var settings = data.settings; + var cssPrefix = settings.cssPrefix; var mode = settings.interactionMode; var imagePath = settings.buttonSettings[mode].imagePath; // make relative imagePath absolute @@ -580,15 +581,15 @@ var tooltip = buttonConfig.tooltip; var icon = imagePath + buttonConfig.icon; // construct the button html - var $button = $('<div class="button"></div>'); + var $button = $('<div class="'+cssPrefix+'button"></div>'); var $a = $('<a href=""/>'); - var $img = $('<img class="button"/>'); + var $img = $('<img class="'+cssPrefix+'button"/>'); $div.append($button); $button.append($a); $a.append($img); // add attributes and bindings $button.attr('title', tooltip); - $button.addClass('button-' + buttonName); + $button.addClass(cssPrefix+'button-'+buttonName); $img.attr('src', icon); // create handler for the buttons $button.on('click.digilib', (function () { @@ -616,6 +617,7 @@ var $elem = data.$elem; var settings = data.settings; var mode = settings.interactionMode; + var cssPrefix = settings.cssPrefix; var buttonSettings = settings.buttonSettings[mode]; var buttonGroup = buttonSettings.buttonSets[buttonSetIdx]; if (buttonGroup == null) { @@ -623,7 +625,7 @@ return; } // button divs are marked with class "keep" - var $buttonsDiv = $('<div class="keep buttons"/>'); + var $buttonsDiv = $('<div class="'+cssPrefix+'keep '+cssPrefix+'buttons"/>'); var buttonNames = buttonSettings[buttonGroup]; for (var i = 0; i < buttonNames.length; i++) { var buttonName = buttonNames[i]; @@ -649,12 +651,13 @@ // display more (or less) button sets var showButtons = function (data, more, setIdx, animated) { var atime = animated ? 'fast': 0; + var cssPrefix = data.settings.cssPrefix; // get button width from settings var mode = data.settings.interactionMode; var btnWidth = data.settings.buttonSettings[mode].buttonSetWidth; if (more) { // add set - var $otherSets = data.$elem.find('div.buttons:visible'); + var $otherSets = data.$elem.find('div.'+cssPrefix+'buttons:visible'); var $set; if (data.$buttonSets && data.$buttonSets[setIdx]) { // set exists @@ -681,7 +684,7 @@ // hide last set $set.hide(); // take remaining sets and move right - var $otherSets = data.$elem.find('div.buttons:visible'); + var $otherSets = data.$elem.find('div.'+cssPrefix+'buttons:visible'); $otherSets.animate({right : '-='+btnWidth+'px'}, atime); } return true; @@ -689,14 +692,15 @@ // check for buttons to highlight TODO: improve this! var highlightButtons = function (data, name, on) { - var $buttons = data.$elem.find('div.buttons:visible'); // include hidden? + var cssPrefix = data.settings.cssPrefix; + var $buttons = data.$elem.find('div.'+cssPrefix+'buttons:visible'); // include hidden? // add a class for highlighted button var highlight = function (name, on) { - var $button = $buttons.find('div.button-' + name); + var $button = $buttons.find('div.'+cssPrefix+'button-' + name); if (on) { - $button.addClass('button-on'); + $button.addClass(cssPrefix+'button-on'); } else { - $button.removeClass('button-on'); + $button.removeClass(cssPrefix+'button-on'); } }; if (name != null) {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Fri Feb 10 12:47:17 2012 +0100 @@ -215,7 +215,7 @@ } /* special definitions for fullscreen */ -div.dl-digilib.dl_fullscreen div.dl-buttons { +div.dl-digilib.dl-fullscreen div.dl-buttons { position: fixed; right: 0px; top: 0px; @@ -224,28 +224,28 @@ z-index: 200; } -div.dl-digilib.dl_fullscreen div.dl-buttons div.dl-button:hover { +div.dl-digilib.dl-fullscreen div.dl-buttons div.dl-button:hover { background-image: url('img/fullscreen/corona.png'); background-repeat: no-repeat; } -div.dl-digilib.dl_fullscreen div.dl-button-on { +div.dl-digilib.dl-fullscreen div.dl-button-on { background-image: url('img/fullscreen/whitedisc.png'); background-repeat: no-repeat; } -div.dl-digilib.dl_fullscreen div.dl-birdview { +div.dl-digilib.dl-fullscreen div.dl-birdview { position: fixed; bottom: 8px; right: 48px; } /* special definitions for embedded */ -div.dl-digilib.dl_embedded { +div.dl-digilib.dl-embedded { position: relative; } -div.dl-digilib.dl_embedded div.dl-buttons { +div.dl-digilib.dl-embedded div.dl-buttons { position: absolute; right: 0px; top: 0px; @@ -255,15 +255,15 @@ z-index: 100; } -div.dl-digilib.dl_embedded div.dl-buttons div.dl-button:hover { +div.dl-digilib.dl-embedded div.dl-buttons div.dl-button:hover { background-color: black; } -div.dl-digilib.dl_embedded div.dl-button-on { +div.dl-digilib.dl-embedded div.dl-button-on { background-color: darkgreen; } -div.dl-digilib.dl_embedded div.dl-birdview { +div.dl-digilib.dl-embedded div.dl-birdview { position: absolute; bottom: 0px; right: 0px;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Fri Feb 10 12:47:17 2012 +0100 @@ -38,7 +38,7 @@ var defaults = { // version of this script - 'version' : 'jquery.digilib.js 2.1.4a1', + 'version' : 'jquery.digilib.js 2.1.4b1', // logo url 'logoUrl' : 'img/digilib-logo-text1.png', // homepage url (behind logo) @@ -897,7 +897,8 @@ var setupScalerDiv = function (data) { var settings = data.settings; var $elem = data.$elem; - $elem.addClass('digilib'); + var cssPrefix = settings.cssPrefix; + $elem.addClass(cssPrefix+'digilib'); var $img; var scalerUrl; if (settings.interactionMode === 'fullscreen') { @@ -937,7 +938,7 @@ } } // create new inner html, keeping buttons and content marked with "keep" class - $elem.contents(":not(.keep)").remove(); + $elem.contents(':not(.'+cssPrefix+'keep)').remove(); var $scaler = $('<div class="'+cssPrefix+'scaler"/>'); // scaler should be the first child element? $elem.prepend($scaler); @@ -960,10 +961,10 @@ var setupAboutDiv = function (data) { var $elem = data.$elem; var settings = data.settings; - var $aboutDiv = $('<div class="'+cssPrefix+'about" style="display:none"/>'); + var $aboutDiv = $('<div class="'+settings.cssPrefix+'about" style="display:none"/>'); var $header = $('<p>Digilib Image Viewer</p>'); var $link = $('<a/>'); - var $logo = $('<img class="'+cssPrefix+'logo" title="digilib"/>'); + var $logo = $('<img class="'+settings.cssPrefix+'logo" title="digilib"/>'); var $content = $('<p/>'); $elem.append($aboutDiv); $aboutDiv.append($header); @@ -1120,7 +1121,7 @@ console.debug("handleChangeZoomArea:", newZa); var data = this; // hide all overlays (marks/regions) - data.$elem.find('.'+cssPrefix+'overlay').hide(); + data.$elem.find('.'+data.settings.cssPrefix+'overlay').hide(); setPreviewBg(data, newZa); }; @@ -1152,7 +1153,7 @@ $elem = data.$elem; $scaler = data.$scaler; var pt1, pt2; - var $zoomDiv = $('<div class="'+cssPrefix+'zoomrect" style="display:none"/>'); + var $zoomDiv = $('<div class="'+data.settings.cssPrefix+'zoomrect" style="display:none"/>'); $elem.append($zoomDiv); // $zoomDiv.css(data.settings.zoomrectStyle); var picRect = geom.rectangle($scaler); @@ -1527,7 +1528,7 @@ if (customConsole) { var logFunction = function(type) { return function(){ - var $debug = $('#debug'); // debug div + var $debug = $('#'+defaults.cssPrefix+'debug'); // debug div if (!$debug) return; var args = Array.prototype.slice.call(arguments); var argtext = args.join(' ');
--- a/webapp/src/main/webapp/jquery/jquery.digilib.marks.js Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.marks.js Fri Feb 10 12:47:17 2012 +0100 @@ -81,7 +81,9 @@ var handleUpdate = function(evt) { console.debug("marks: handleUpdate"); var data = this; - renderMarks(data); + if (data.marks != null && data.marks.length > 0) { + renderMarks(data); + } }; /** @@ -141,20 +143,20 @@ var renderMarks = function(data) { if (data.marks == null || data.$img == null || data.imgTrafo == null) return; - console.debug("renderMarks: img=", data.$img, " imgtrafo=", data.imgTrafo); + var cssPrefix = data.settings.cssPrefix; var $elem = data.$elem; var marks = data.marks; + console.debug("renderMarks: marks="+marks); // clear marks - $elem.find('div.mark').remove(); + $elem.find('div.'+cssPrefix+'mark').remove(); for ( var i = 0; i < marks.length; i++) { var mark = marks[i]; if (data.zoomArea.containsPosition(mark)) { var mpos = data.imgTrafo.transform(mark); console.debug("renderMarks: pos=", mpos); // create mark - var html = '<div class="mark overlay">' + (i + 1) + '</div>'; + var html = '<div class="'+cssPrefix+'mark '+cssPrefix+'overlay">' + (i + 1) + '</div>'; var $mark = $(html); - $mark.attr("id", "digilib-mark-" + (i + 1)); $elem.append($mark); mpos.adjustDiv($mark); }
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Feb 10 10:27:50 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Feb 10 12:47:17 2012 +0100 @@ -8,13 +8,11 @@ (function($) { // the digilib object - var digilib; + var digilib = null; // the functions made available by digilib - var fn; + var fn = null; // affine geometry plugin - var geom; - - var FULL_AREA; + var geom = null; var ID_PREFIX = "digilib-region-"; @@ -68,6 +66,7 @@ alert("Please turn on regions visibility!"); return; } + var cssPrefix = data.settings.cssPrefix; var $elem = data.$elem; var $body = $('body'); var bodyRect = geom.rectangle($body); @@ -75,7 +74,7 @@ var scalerRect = geom.rectangle($scaler); var pt1, pt2; // overlay prevents other elements from reacting to mouse events - var $overlay = $('<div class="digilib-overlay" style="position:absolute"/>'); + var $overlay = $('<div class="'+cssPrefix+'overlay" style="position:absolute"/>'); $body.append($overlay); bodyRect.adjustDiv($overlay); var $regionDiv = addRegionDiv(data, data.regions.length); @@ -179,16 +178,17 @@ // clickable header var regionInfoHeader = function (data) { - var $infoDiv = $('<div class="infoheader"/>'); - var $h01 = $('<div class="infobutton">HTML</div>'); - var $h02 = $('<div class="infobutton">SVG</div>'); - var $h03 = $('<div class="infobutton">Digilib</div>'); - var $h04 = $('<div class="infobutton">X</div>'); + var cssPrefix = data.settings.cssPrefix; + var $infoDiv = $('<div class="'+cssPrefix+'infoheader"/>'); + var $h01 = $('<div class="'+cssPrefix+'infobutton">HTML</div>'); + var $h02 = $('<div class="'+cssPrefix+'infobutton">SVG</div>'); + var $h03 = $('<div class="'+cssPrefix+'infobutton">Digilib</div>'); + var $h04 = $('<div class="'+cssPrefix+'infobutton">X</div>'); var bind = function($div, name) { $div.on('click.regioninfo', function () { var $top = $(this).parent().parent(); - $top.find('.info').hide(); - $top.find('.' + name).show(); + $top.find('.'+cssPrefix+'info').hide(); + $top.find('.'+cssPrefix+ name).show(); }); }; bind($h01, 'html'); @@ -208,8 +208,9 @@ // html for later insertion var regionInfoHTML = function (data) { - var $infoDiv = $('<div class="info html"/>'); - $infoDiv.append($('<div/>').text('<div class="keep regioncontent">')); + var cssPrefix = data.settings.cssPrefix; + var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'html"/>'); + $infoDiv.append($('<div/>').text('<div class="'+cssPrefix+'keep '+cssPrefix+'regioncontent">')); $.each(data.regions, function(index, r) { var area = [ fn.cropFloatStr(r.x), @@ -224,7 +225,8 @@ // SVG-style var regionInfoSVG = function (data) { - var $infoDiv = $('<div class="info svgattr"/>'); + var cssPrefix = data.settings.cssPrefix; + var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'svgattr"/>'); $.each(data.regions, function(index, r) { var area = [ fn.cropFloatStr(r.x), @@ -238,7 +240,8 @@ // digilib-style var regionInfoDigilib = function (data) { - var $infoDiv = $('<div class="info digilib"/>'); + var cssPrefix = data.settings.cssPrefix; + var $infoDiv = $('<div class="'+cssPrefix+'info '+cssPrefix+'digilib"/>'); $.each(data.regions, function(index, r) { var area = r.toString(); $infoDiv.append($('<div/>').text(area)); @@ -258,14 +261,15 @@ // add a region to data.$elem var addRegionDiv = function (data, index, attributes) { + var cssPrefix = data.settings.cssPrefix; var nr = index + 1; // we count regions from 1 // create a digilib URL for this detail var url = attributes ? attributes.href : getRegionUrl(data, index); - var $regionDiv = $('<div class="region overlay" style="display:none"/>'); + var $regionDiv = $('<div class="'+cssPrefix+'region '+cssPrefix+'overlay" style="display:none"/>'); $regionDiv.attr("id", ID_PREFIX + nr); data.$elem.append($regionDiv); if (data.settings.showRegionNumbers) { - var $regionLink = $('<a class="regionnumber"/>'); + var $regionLink = $('<a class="'+cssPrefix+'regionnumber"/>'); if (attributes) $regionLink.attr(attributes); $regionLink.text(nr); $regionDiv.append($regionLink); @@ -461,7 +465,6 @@ fn = digilib.fn; // import geometry classes geom = fn.geometry; - FULL_AREA = geom.rectangle(0,0,1,1); // add defaults, actions, buttons $.extend(digilib.defaults, defaults); $.extend(digilib.actions, actions); @@ -472,10 +475,11 @@ var init = function (data) { console.debug('initialising regions plugin. data:', data); var $elem = data.$elem; + var cssPrefix = data.settings.cssPrefix; // regions array data.regions = []; // regions div - var $html = $('<div class="keep regionHTML"/>'); + var $html = $('<div class="'+cssPrefix+'keep '+cssPrefix+'regionHTML"/>'); $elem.append($html); data.$htmlDiv = $html; // install event handler