Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
hyperimage_eoa/src/js/HIEOALoader.js
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
488 lines (418 sloc)
17.5 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| Copyright 2019 bitGilde IT Solutions UG (haftungsbeschränkt) | |
| https://bitgilde.de | |
| @author Jens-Martin Loebel <loebel@bitgilde.de> | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| */ | |
| 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]]; | |
| HI.viewer.setMaxBounds(bounds); | |
| if ( !HI.navimage ) HI.navimage = $('#hinavimage'); | |
| var newView = true; | |
| if ( HI.curView && HI.curView == view ) { | |
| HI.curLayerID = layerID; | |
| newView = false; | |
| } else { | |
| // set up new view | |
| HI.curView = view; | |
| HI.curLayerID = layerID; | |
| HI.layerGroup.clearLayers(); | |
| HI.viewer.spin(true); | |
| 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); | |
| $(HI.navimage).attr('src', HI.base + HI.views[viewID].files[HI.views[viewID].files.length-1].name); | |
| HI.image.on('load', function(e) { | |
| HI.viewer.spin(false); | |
| if ( HI.controls.navigator && HI.controls.navigator.container ) $(HI.controls.navigator.container).show(); | |
| HI.updateNavRect(); | |
| if ( HI.curViewFileIndex > 0 && HI.visible ) { | |
| HI.viewer.spin(true); | |
| HI.curViewFileIndex = HI.curViewFileIndex -1; | |
| HI.image.setUrl(HI.base + HI.curView.files[HI.curViewFileIndex].name); | |
| HI.image.setBounds([[HI.curView.files[HI.curViewFileIndex].height,0], [0,HI.curView.files[HI.curViewFileIndex].width]]); | |
| HI.viewer.setMaxBounds([[HI.curView.files[HI.curViewFileIndex].height,0], [0,HI.curView.files[HI.curViewFileIndex].width]]); | |
| } | |
| }); | |
| HI.image.setBounds(bounds); | |
| HI.viewer.addLayer(HI.image); | |
| } | |
| /* | |
| } else { | |
| HI.image.setUrl(HI.base + HI.views[viewID].files[HI.curViewFileIndex].name); | |
| $(HI.navimage).attr('src', HI.base + HI.curView.files[HI.curView.files.length-1].name); | |
| 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]]; | |
| HI.layerGroup.addLayer(layer.polygon); | |
| $(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; | |
| padding = 2; | |
| 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 = '<h5>'+view.title+'</h5><hr /><p>'+view.caption+'</p>'; | |
| // display list of image links | |
| if ( view.links && view.links.length > 0 ) { | |
| contents += '<strong>Other Versions</strong><ul id="hilinklist">'; | |
| for (var i=0; i < view.links.length; i++ ) { | |
| var id = view.links[i]; | |
| var linkview = HI.views[id]; | |
| contents += "<li>"; | |
| contents += "<a href='#"+id+"'>"+linkview.title+"</a>"; | |
| contents += "</li>"; | |
| } | |
| contents += "</ul>"; | |
| } | |
| // display list of layers | |
| if ( view.layers && Object.keys(view.layers).length > 0 ) { | |
| contents += '<strong>Layers of Interest</strong><ul id="hilayerlist">'; | |
| for (var i=0; i < Object.keys(view.layers).length; i++ ) { | |
| var id = Object.keys(view.layers)[i]; | |
| var layer = view.layers[id]; | |
| contents += "<li>"; | |
| contents += "<a href='#"+id+"'>"+layer.title+"</a>"; | |
| contents += "</li>"; | |
| } | |
| contents += "</ul>"; | |
| } | |
| HI.controls.annotation.setContents(contents); | |
| $('#hilayerlist a').each(function(index,item) { | |
| $(item).click(function(e) { | |
| e.preventDefault(); | |
| // hide other layers | |
| if ( HI.curView.layers && Object.keys(HI.curView.layers).length > 0 ) { | |
| for (var i=0; i < Object.keys(HI.curView.layers).length; i++ ) { | |
| var layer = HI.curView.layers[Object.keys(HI.curView.layers)[i]]; | |
| $(layer.polygon.getElement()).hide(); | |
| } | |
| } | |
| // focus and display link layer | |
| var layerID = $(this).attr('href').substring(1); | |
| HI.curLayerID = layerID; | |
| HI.viewer.fitBounds(HI.curView.layers[layerID].polygon.getBounds()); | |
| $(HI.curView.layers[layerID].polygon.getElement()).fadeIn(); | |
| }); | |
| }); | |
| $('#hilinklist a').each(function(index,item) { | |
| $(item).click(function(e) { | |
| e.preventDefault(); | |
| 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+'],'; | |
| box += '['+bounds.getEast()/HI.curView.width+','+(HI.curView.height-bounds.getNorth())/HI.curView.height+'],'; | |
| 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; | |
| cheight = 100; | |
| var factor = Math.min ( cwidth / HI.curView.width, cheight /HI.curView.height ); | |
| var padding = 2; | |
| var navrect = $('.hinavrect'); | |
| var top = Math.max(0, ((HI.curView.height-HI.viewer.getBounds().getNorth())*factor)+padding); | |
| var left = Math.max(0,(HI.viewer.getBounds().getWest()*factor)+padding); | |
| var bottom = Math.max(0, (HI.curView.height*factor)-((HI.curView.height-HI.viewer.getBounds().getSouth())*factor)-padding); | |
| var right = Math.max(0, (HI.curView.width*factor)-(HI.viewer.getBounds().getEast()*factor)-padding); | |
| navrect.css('top',top+'px'); | |
| 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 () { | |
| // set up DOM elements | |
| if ( $('div.hipopupcontainer').length == 0 ) { | |
| HI.container = document.createElement("div"); | |
| HI.container.className = "hipopupcontainer"; | |
| document.body.appendChild(HI.container); | |
| var viewer = document.createElement("div"); | |
| 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().hide(); | |
| } | |
| // add view layers | |
| $(Object.keys(element.view.layers)).each(function(index, item) { | |
| var layer = element.view.layers[item]; | |
| var polPoints; | |
| if ( typeof(layer.points[0][0]) !== 'number' ) { | |
| polPoints = []; | |
| for (var i=0; i < layer.points.length; i++ ) { | |
| polPoints.push(HI.convertPoints(layer.points[i], element.view.width,element.view.height)); | |
| } | |
| } else polPoints = HI.convertPoints(layer.points, element.view.width,element.view.height); | |
| // add polygon to display | |
| 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); | |
| }); | |
| // 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', { | |
| minZoom: 1, // -Math.min (bounds[1][1] / $("#HIMap").width(), bounds[1][0] / $("#HIMap").height()), | |
| maxZoom: 1, | |
| 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]]; | |
| 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; | |
| cheight = 100; | |
| padding = 2; | |
| 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)); | |
| HI.updateNavRect(); | |
| } | |
| } | |
| } ).on('move', function (ev){ | |
| HI.updateNavRect(); | |
| } ).on('zoomend', function (ev) { | |
| HI.updateNavRect(); | |
| }); | |
| HI.viewer = HIMap; | |
| HI.layerGroup = L.layerGroup(); | |
| HIMap.addLayer(HI.layerGroup); | |
| HI.layerGroup.on('add', function (group) { | |
| $(HI.layerGroup.getLayers()).each(function(index, item) { | |
| $(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)+']'); | |
| if ( HI.clickcounter == 1 ) { | |
| HI.clickcounter = 0; | |
| var bottom = ((HI.curView.height-e.latlng.lat)/HI.curView.height); | |
| 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:'<a href="https://bitgilde.de/de/konzepte/?project=eoa">Yenda (HyperImage) Viewer v1.0</a>',position:'bottomleft'}).addTo(HIMap); | |
| // annotation control | |
| var annotation = L.control.slideMenu('', { | |
| position: 'topleft', | |
| icon: 'fa-info', | |
| menuposition: 'bottomleft', | |
| hidden: true, | |
| height: '200px', | |
| width: '550px', | |
| pxWidth: 550 | |
| }); | |
| HI.controls.annotation = annotation; | |
| annotation.addTo(HIMap); | |
| // annotation control switcher | |
| var annotationcontrol = L.control.custom({ | |
| position: 'topleft', | |
| content : '<a aria-label="Annotation" class="leaflet-control-zoom-in" role="button" title="Annotation"><i data-type="wholepic" style="font-size: 20px;margin-top:3px;margin-left:-2px" class="fas fa-info"></i></a>', | |
| classes : 'leaflet-control leaflet-bar', | |
| style : | |
| { | |
| }, | |
| events: | |
| { | |
| click: function(data) | |
| { | |
| if (HI.controls.annotation.isVisible()) HI.controls.annotation.hideMenu(); | |
| else HI.controls.annotation.showMenu(); | |
| }, | |
| } | |
| }); | |
| 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', | |
| content : '<a id="wholepicbutton" data-type="wholepic" aria-label="Ganzes Bild" href="javascript:void(0);" class="leaflet-control-zoom-in" role="button" title="Ganzes Bild"><i data-type="wholepic" style="font-size: 20px;margin-top:3px;margin-left:-2px" class="far fa-image"></i></a>'+ | |
| '<a id="bestresbutton" data-type="bestres" aria-label="Beste Auflösung" href="javascript:void(0);" role="button" title="Beste Auflösung"><i data-type="bestres" style="font-size: 18px;margin-top:3px;margin-left:0px" class="fas fa-expand-arrows-alt"></i></a>', | |
| classes : 'leaflet-control leaflet-bar', | |
| style : | |
| { | |
| }, | |
| events: | |
| { | |
| click: function(data) | |
| { | |
| switch ( $(data.target).data("type") ) { | |
| case 'wholepic': | |
| bounds = [[HI.curView.height,0], [0,HI.curView.width]]; | |
| HIMap.fitBounds(bounds); | |
| break; | |
| case 'bestres': | |
| HIMap.setZoom(0); | |
| break; | |
| } | |
| }, | |
| } | |
| }); | |
| HI.controls.pic = piccontrol; | |
| piccontrol.addTo(HIMap); | |
| // close control | |
| var closecontrol = L.control.custom({ | |
| position: 'topright', | |
| content : '<a aria-label="Zurück zum Text" href="javascript:void(0)" class="leaflet-control-zoom-in" role="button" title="Zurück zum Text"><i style="color: white;font-size: 20px;margin-top:3px;margin-left:-2px" class="fas fa-times-circle"></i></a>', | |
| classes : 'leaflet-control btn btn-info', | |
| style : | |
| { | |
| boxShadow: '0 1px 5px rgba(0, 0, 0, 0.65)', | |
| borderRadius: '4px', | |
| }, | |
| events: | |
| { | |
| click: function(data) | |
| { | |
| $(HI.container).fadeOut(); | |
| HI.visible = false; | |
| }, | |
| } | |
| }); | |
| HI.controls.close = closecontrol; | |
| closecontrol.addTo(HIMap); | |
| $(document).on("keypress", function (e) { | |
| if ( e.which == 27 ) $(HI.container).fadeOut(); | |
| HI.visible = false; | |
| }); | |
| // navigator control | |
| var navigatorcontrol = L.control.custom({ | |
| position: 'bottomright', | |
| content : '<img id="hinavimage" src="#" alt="Navigator Image" style="height:100px"/><div class="hinavrect"></div><div class="hinavarea" draggable="true"></div>', | |
| classes : 'hinavigator', | |
| style : | |
| { | |
| boxShadow: '0 1px 5px rgba(0, 0, 0, 0.65)', | |
| borderRadius: '4px', | |
| }, | |
| events: | |
| { | |
| click: function(data) { | |
| cwidth = $(HI.viewer.getContainer()).width() - 50; | |
| cheight = 100; | |
| var padding = 2; | |
| var factor = Math.min ( cwidth / HI.curView.width, cheight / HI.curView.height ); | |
| var x = (data.offsetX - padding); | |
| var y = (data.offsetY - padding); | |
| HI.viewer.panTo([HI.curView.height - (y/factor),x/factor]); | |
| HI.updateNavRect(); | |
| $('.hinavigator').is(":visible"); | |
| }, | |
| drag: function(data) { | |
| cwidth = $(HI.viewer.getContainer()).width() - 50; | |
| cheight = 100; | |
| var padding = 2; | |
| var factor = Math.min ( cwidth / HI.curView.width, cheight / HI.curView.height ); | |
| var x = (data.offsetX - padding); | |
| var y = (data.offsetY - padding); | |
| 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); | |
| }, | |
| }; | |
| if(window.attachEvent) { | |
| window.attachEvent('onload', HI.setupHILoader); | |
| } else { | |
| if(window.onload) { | |
| var curronload = window.onload; | |
| var newonload = function(evt) { | |
| curronload(evt); | |
| HI.setupHILoader(); | |
| }; | |
| window.onload = newonload; | |
| } else { | |
| window.onload = HI.setupHILoader; | |
| } | |
| } |