diff --git a/src/js/HIEOALoader.js b/src/js/HIEOALoader.js index 4fa9060..dba9c13 100644 --- a/src/js/HIEOALoader.js +++ b/src/js/HIEOALoader.js @@ -20,18 +20,18 @@ var HI = { clickcounter :0, // DEBUG views: {}, base: null, - - + + loadHIView: function (viewID, layerID = null ) { var view = HI.views[viewID]; - + if (!view) return; - - bounds = [[view.height,0], [0,view.width]]; + + bounds = [[view.height,0], [0,view.width]]; HI.viewer.setMaxBounds(bounds); - + if ( !HI.navimage ) HI.navimage = $('#hinavimage'); - + var newView = true; if ( HI.curView && HI.curView == view ) { HI.curLayerID = layerID; @@ -45,7 +45,7 @@ var HI = { HI.curViewFileIndex = view.files.length-1; if ( HI.controls.navigator && HI.controls.navigator.container ) $(HI.controls.navigator.container).hide(); } - + if ( newView ) { if (!(typeof HI.image === 'undefined')) HI.viewer.removeLayer(HI.image); HI.image = L.imageOverlay(HI.base + HI.views[viewID].files[HI.curViewFileIndex].name, bounds); @@ -63,7 +63,7 @@ var HI = { } }); HI.image.setBounds(bounds); - HI.viewer.addLayer(HI.image); + HI.viewer.addLayer(HI.image); } /* @@ -73,7 +73,7 @@ var HI = { HI.image.setBounds(bounds); } */ - + if ( view.layers && Object.keys(view.layers).length > 0 ) { for (var i=0; i < Object.keys(view.layers).length; i++ ) { var layer = view.layers[Object.keys(view.layers)[i]]; @@ -81,11 +81,11 @@ var HI = { $(layer.polygon.getElement()).hide(); } } - + $(HI.container).fadeIn(); HI.visible = true; HI.viewer.setMinZoom( -Math.ceil(Math.min (bounds[1][1] / $(HI.container).width(), bounds[0][0] / $(HI.container).height())) ); - + // calculate navigator image dimensions cwidth = $(HI.viewer.getContainer()).width() - 50; cheight = 100; @@ -93,16 +93,16 @@ var HI = { factor = Math.min ( cwidth / HI.curView.width, cheight /HI.curView.height ); $(HI.navimage).css('height', HI.curView.height * factor); $('.hinavigator').css('height', Math.min ((HI.curView.height * factor) + (padding * 2),104)); - - + + if ( layerID != null ) { HI.viewer.fitBounds(view.layers[layerID].polygon.getBounds()); $(view.layers[layerID].polygon.getElement()).fadeIn(); } else HI.viewer.fitBounds(bounds); - - + + var contents = '
'+view.title+'

'+view.caption+'

'; - + // display list of image links if ( view.links && view.links.length > 0 ) { contents += 'Other Versions"; } - + HI.controls.annotation.setContents(contents); $('#hilayerlist a').each(function(index,item) { $(item).click(function(e) { @@ -140,7 +140,7 @@ var HI = { $(layer.polygon.getElement()).hide(); } } - + // focus and display link layer var layerID = $(this).attr('href').substring(1); HI.curLayerID = layerID; @@ -151,14 +151,14 @@ var HI = { $('#hilinklist a').each(function(index,item) { $(item).click(function(e) { e.preventDefault(); - HI.loadHIView($(this).attr('href').substring(1), $(this).data("hilayer")); + HI.loadHIView($(this).attr('href').substring(1), $(this).data("hilayer")); }); - }); - + }); + // DEBUG $(Object.keys(HI.curView.layers)).each(function(index, item) { var layer = HI.curView.layers[item]; - + // DEBUG var box = '['; var bounds = layer.polygon.getBounds(); box += '['+bounds.getWest()/HI.curView.width+','+(HI.curView.height-bounds.getNorth())/HI.curView.height+'],'; @@ -166,16 +166,16 @@ var HI = { box += '['+bounds.getEast()/HI.curView.width+','+(HI.curView.height-bounds.getSouth())/HI.curView.height+'],'; box += '['+bounds.getWest()/HI.curView.width+','+(HI.curView.height-bounds.getSouth())/HI.curView.height+']]'; }); - - + + }, - + convertPoints: function(points, width, height) { var converted = []; for (var i=0; i < points.length; i++) converted.push( [ height-(points[i][1]*height), points[i][0]*width ] ); return converted; }, - + updateNavRect: function() { if ( !HI.curView || !HI.visible ) return; cwidth = $(HI.viewer.getContainer()).width() - 50; @@ -192,14 +192,14 @@ var HI = { navrect.css('left',left+'px'); navrect.css('bottom',bottom+'px'); navrect.css('right',right+'px'); - + // dynamically show and hide navigator control is necessary if ( top == 0 && bottom == 0 && left == 0 && right == 0 ) { if ( $(HI.controls.navigator.container).is(":visible") ) $(HI.controls.navigator.container).hide(); } else { if ( ! $(HI.controls.navigator.container).is(":visible") ) $(HI.controls.navigator.container).fadeIn(); } - + }, setupHILoader: function () { @@ -212,22 +212,22 @@ var HI = { viewer.id = "HIViewer"; viewer.className = "EOAViewer"; HI.container.appendChild(viewer); - + } else HI.container = $('div.hipopupcontainer')[0]; - + HI.curView = null; - + // TODO gather config data from all document elements with hi data // build config and element index $('[data-hielement]').each(function(index, element) { if (HI.base == null) HI.base = $(this).attr("src").substring(0,$(this).attr("src").lastIndexOf('/')+1); var element = JSON.parse(atob($(this).data('hielement'))); HI.views[element.view.id] = element.view; - + if ( element.view.hide ) { $(this).parent().parent().parent().hide(); } - + // add view layers $(Object.keys(element.view.layers)).each(function(index, item) { var layer = element.view.layers[item]; @@ -242,21 +242,21 @@ var HI = { layer.polygon = L.polygon(polPoints, {color: layer.color, fillOpacity:0}); }); }); - + // load config HI.config = JSON.parse(atob($('[data-hiconfig]').data('hiconfig'))); // TODO error handling // set trigger for HI Elements $('[data-hielement]').click(function(element) { element.preventDefault(); - HI.loadHIView(JSON.parse(atob($(this).data('hielement'))).view.id); + HI.loadHIView(JSON.parse(atob($(this).data('hielement'))).view.id); }); // set trigger for HI links $('.HILink').click(function(element) { element.preventDefault(); HI.loadHIView($(this).attr('href').substring(1), $(this).data("hilayer")); }); - + // DEBUG var HIMap = L.map('HIViewer', { @@ -265,10 +265,10 @@ var HI = { zoomControl: false, attributionControl: false, crs: L.CRS.Simple, - + }).on('resize', function(ev) { if (HI.curView != null) { - bounds = [[HI.curView.height,0], [0,HI.curView.width]]; + bounds = [[HI.curView.height,0], [0,HI.curView.width]]; HI.viewer.setMinZoom( -Math.ceil(Math.min (bounds[1][1] / $(HI.container).width(), bounds[0][0] / $(HI.container).height())) ); if ( HI.visible ) { cwidth = $(HI.viewer.getContainer()).width() - 50; @@ -280,8 +280,8 @@ var HI = { HI.updateNavRect(); } } - } ).on('move', function (ev){ - HI.updateNavRect(); + } ).on('move', function (ev){ + HI.updateNavRect(); } ).on('zoomend', function (ev) { HI.updateNavRect(); }); @@ -293,7 +293,7 @@ var HI = { $(item.getElement()).hide(); }); }); - + // DEBUG HIMap.on('click', function(e) { // console.log('['+(e.latlng.lng/HI.curView.width)+','+((HI.curView.height-e.latlng.lat)/HI.curView.height)+']'); @@ -303,22 +303,22 @@ var HI = { var right = (e.latlng.lng/HI.curView.width); var bounds = [ [HI.curView.height-(HI.rect[1]*HI.curView.height),HI.rect[0]*HI.curView.width] , [HI.curView.height-(bottom*HI.curView.height), right*HI.curView.width] ]; // L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(HI.viewer); - + console.log('--> ['+ '['+HI.rect[0]+','+HI.rect[1]+'],'+'['+right+','+HI.rect[1]+'],'+'['+right+','+bottom+'],'+'['+HI.rect[0]+','+bottom+']' +']'); - + } else { HI.rect = [(e.latlng.lng/HI.curView.width), ((HI.curView.height-e.latlng.lat)/HI.curView.height)]; HI.clickcounter = 1; } - + }); - - + + HI.controls = {}; - + // attribution control L.control.attribution({prefix:'Yenda (HyperImage) Viewer v1.0',position:'bottomleft'}).addTo(HIMap); - + // annotation control var annotation = L.control.slideMenu('', { position: 'topleft', @@ -331,7 +331,7 @@ var HI = { }); HI.controls.annotation = annotation; annotation.addTo(HIMap); - + // annotation control switcher var annotationcontrol = L.control.custom({ position: 'topleft', @@ -351,11 +351,11 @@ var HI = { }); HI.controls.annotationcontrol = annotationcontrol; annotationcontrol.addTo(HIMap); - - + + // zoom control HIMap.addControl(L.control.zoom({ zoomInTitle: 'Heranzoomen', zoomOutTitle: 'Herauszoomen' })); - + // image zoom control var piccontrol = L.control.custom({ position: 'topleft', @@ -371,7 +371,7 @@ var HI = { { switch ( $(data.target).data("type") ) { case 'wholepic': - bounds = [[HI.curView.height,0], [0,HI.curView.width]]; + bounds = [[HI.curView.height,0], [0,HI.curView.width]]; HIMap.fitBounds(bounds); break; case 'bestres': @@ -383,7 +383,7 @@ var HI = { }); HI.controls.pic = piccontrol; piccontrol.addTo(HIMap); - + // close control var closecontrol = L.control.custom({ position: 'topright', @@ -409,7 +409,7 @@ var HI = { if ( e.which == 27 ) $(HI.container).fadeOut(); HI.visible = false; }); - + // navigator control var navigatorcontrol = L.control.custom({ @@ -444,31 +444,31 @@ var HI = { HI.viewer.panTo([HI.curView.height - (y/factor),x/factor]); HI.updateNavRect(); } - + } }); - - + + HI.controls.navigator = navigatorcontrol; navigatorcontrol.addTo(HIMap); - + $('.hinavarea').on('mouseenter', function(ev) { $(HI.controls.navigator.getContainer()).css('opacity',1.0); }); $('.hinavarea').on('mouseleave', function(ev) { $(HI.controls.navigator.getContainer()).css('opacity',0.7); }); - + // follow link in hash on startup var hash = window.location.hash.substring(1); if ( hash.length > 0 ) HI.loadHIView(hash); - + console.log(HI.config); - + }, - - - + + + }; @@ -486,4 +486,3 @@ if(window.attachEvent) { window.onload = HI.setupHILoader; } } -