Created
September 16, 2016 15:49
-
-
Save pavelgordon/1895332306f6e924c1bc00ffb18c534d to your computer and use it in GitHub Desktop.
what the fuck
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
| @media screen and (max-width:1000px) { | |
| #hilfeButton + td, #barrierefreiheitButton + td{ | |
| display: none; | |
| } | |
| #impressumButton + td{ | |
| display: none; | |
| } | |
| } |
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
| Ext.namespace('Custom.config'); | |
| /** | |
| * The Configparser is responsible for: | |
| * | |
| * 1. loading the json-config-file into the application | |
| * 2. parsing the json-file into a javascript object | |
| * (while already transforming values for tileSize, extent and layer-attributes into | |
| * their respective objects) | |
| * 3. rendering the application: | |
| * the parsed json is used to create the different sections of the application through | |
| * the parsing-methods provided in Custom.config.Map and Custom.config.modules. The returned | |
| * objects are then embedded into the layout and rendered. | |
| * | |
| * @param {String} url The location (relative or absolute) of the JSON-config-file | |
| */ | |
| Custom.config.ConfigParser = function (url) { | |
| this.url = url; | |
| }; | |
| /** | |
| * Loads the config-file via an XML-HTTP-Request and triggers the parseResponse-method if the | |
| * request was successful. In case of an error the handleFailure-method is called. | |
| */ | |
| Custom.config.ConfigParser.prototype.load = function () { | |
| var request = Ext.Ajax.request({ | |
| method: 'GET', | |
| url: this.url, | |
| success: this.parseResponse, | |
| failure: this.handleFailure, | |
| scope: this | |
| }); | |
| }; | |
| /** | |
| * @private | |
| * Shows an error-message to indicate that the loading of the Config-file failed | |
| */ | |
| Custom.config.ConfigParser.prototype.handleFailure = function (a, b, c) { | |
| alert("Loading the json-config failed! \n Please check the URL.") | |
| }; | |
| /** | |
| * @private | |
| * Parses the json-String into a JSON-object. Values for some nodes are directly | |
| * converted into their respective object-types through the reviver-method of the | |
| * parser. The reviver-method is called for each value with the key and the value | |
| * as parameters and the returned object of this method replaces the value | |
| * (e.g. for the tileSize-key a OpenLayers.Size-object is generated by the | |
| * createTileSize-method). | |
| * | |
| * After parsing the doRender-method is called. | |
| * | |
| * @param {Object} response The response-object of the XML-HTTP-request | |
| */ | |
| Custom.config.ConfigParser.prototype.parseResponse = function (response) { | |
| var that = this; | |
| /* | |
| * Definition of the keys which´s values shall be transformed | |
| * and the method that shall be used for the transformation | |
| */ | |
| var parseableKeys = { | |
| baseLayers: function (value) { | |
| return that.createLayers(value); | |
| }, | |
| tileSize: function (value) { | |
| return that.createTileSize(value); | |
| }, | |
| tileOrigin: function (value) { | |
| return that.createLonLat(value); | |
| }, | |
| projection: function (value) { | |
| return that.createProjection(value); | |
| }, | |
| maxExtent: function (value) { | |
| return that.createBounds(value); | |
| }, | |
| initialExtent: function (value) { | |
| return that.createBounds(value); | |
| } | |
| }; | |
| // the reviver-method for the JSON-parser | |
| var parseConfigKeys = function (key, value) { | |
| if (key in parseableKeys) { | |
| return parseableKeys[key](value); | |
| } | |
| return value; | |
| }; | |
| var jsonConfig = JSON.parse(response.responseText, parseConfigKeys); | |
| this.doRender(jsonConfig); | |
| }; | |
| // ==================================================================== | |
| // = Transform-Methods | |
| // ==================================================================== | |
| //Methods for transforming certain values in the JSON-Config-File into | |
| //specific Objects (e.g. into layer-objects) | |
| /** | |
| * @private | |
| * Transforms a value for the tile-size into a OpenLayers.Size-object | |
| * | |
| * @param {Integer} value The pixel-size of the tiles | |
| * @return {OpenLayers.Size} (if value shouldn´t be a number, only the value | |
| * is returned) | |
| */ | |
| Custom.config.ConfigParser.prototype.createTileSize = function (value) { | |
| if (typeof value == "number") { | |
| return new OpenLayers.Size(value, value) | |
| } | |
| return value; | |
| }; | |
| /** | |
| * @private | |
| * Transforms a coordinate-pair into a OpenLayers.LonLat-object | |
| * | |
| * @param {Object} value Object containing the Lon and Lat-value, for example: | |
| * <pre><code> {lon: 123414, lat: 125634}</code></pre> | |
| * @return {OpenLayers.LonLat} (if the value doesn´t match the required format | |
| * only the value is returned) | |
| */ | |
| Custom.config.ConfigParser.prototype.createLonLat = function (value) { | |
| if (typeof value.lon != "undefined" && typeof value.lat != "undefined") { | |
| return new OpenLayers.LonLat(value.lon, value.lat); | |
| } else if (typeof value === "string" && value.split(",").length === 2) { | |
| return new OpenLayers.LonLat(value.split(",")[0], value.split(",")[1]); | |
| } else { | |
| return value; | |
| } | |
| }; | |
| /** | |
| * @private | |
| * Transforms a EPSG-coordinate-string into a OpenLayers.Projection-object | |
| * | |
| * @param {String} value The EPSG-string (e.g. "EPSG:4326") | |
| * @return {OpenLayers.Projection} (if the value isn´t a String only the value is returned) | |
| */ | |
| Custom.config.ConfigParser.prototype.createProjection = function (value) { | |
| if (typeof value == "string") { | |
| return new OpenLayers.Projection(value); | |
| } | |
| return value; | |
| }; | |
| /** | |
| * @private | |
| * Transform a array of coordinates into a OpenLayers.Bounds object | |
| * | |
| * @param {Number[]} value Array of the coordinates defining the bounds | |
| * (in the order: left,bottom,right,top) | |
| * @return {OpenLayers.Bounds} (if the value doesn´t match the required format only | |
| * the value is returned) | |
| */ | |
| Custom.config.ConfigParser.prototype.createBounds = function (value) { | |
| if (typeof value == "object" && value.length && value.length == 4) { | |
| return OpenLayers.Bounds.fromArray(value); | |
| } else if (typeof value === "string" && value.split(",").length === 4) { | |
| var coords = value.split(","); | |
| return new OpenLayers.Bounds(coords[0], coords[1], coords[2], coords[3]); | |
| } else { | |
| return value; | |
| } | |
| }; | |
| /** | |
| * @private | |
| * loops through the array of layer-configs and triggers the | |
| * create-layer-method for each of them. The created layers are | |
| * saved in-place (i.e. in the JSON-object) | |
| * @param {Object} value The array of layerconfigs | |
| */ | |
| Custom.config.ConfigParser.prototype.createLayers = function (value) { | |
| if (typeof value == "object" && value.length) { | |
| for (var i = 0; i < value.length; i++) { | |
| if (value[i].url && value[i].title && value[i].layer) { | |
| value[i] = this.createLayer(value[i], true); | |
| } | |
| } | |
| } | |
| return value; | |
| }; | |
| /** | |
| * @private | |
| * creates an OpenLayers-layerobject based on a layer-config from the JSON | |
| * @param {Object} value The layer-configuration | |
| * @return {OpenLayers.Layer.ArcGISCache} layerObject | |
| */ | |
| Custom.config.ConfigParser.prototype.createLayer = function (value, isBaseLayer) { | |
| if (value.wmsUrl) { | |
| // Basiskarte | |
| var layerObject = new OpenLayers.Layer.ArcGISCache(value.title, value.url, { | |
| layers: value.layer, | |
| transparent: true, | |
| //Rausgenommen, TD, 05.03.2015: wms: value.wmsUrl, | |
| port: value.portForWMSLayer, | |
| tileSize: value.tileSize ? value.tileSize : null, | |
| tileOrigin: value.tileOrigin ? value.tileOrigin : null, | |
| projection: value.projection ? value.projection : null, | |
| transitionEffect: value.transitionEffect ? value.transitionEffect : 'resize', | |
| isBaseLayer: isBaseLayer ? isBaseLayer : true | |
| }); | |
| } else { | |
| // Orthophotos | |
| var layerObject = new OpenLayers.Layer.WMS(value.title, value.url, { | |
| layers: value.layer, | |
| format: 'image/jpeg' | |
| }, { | |
| projection: value.projection ? value.projection : null, | |
| tileSize: value.tileSize ? value.tileSize : null, | |
| tileOrigin: value.tileOrigin ? value.tileOrigin : null, | |
| transitionEffect: value.transitionEffect ? value.transitionEffect : 'resize', | |
| isBaseLayer: isBaseLayer ? isBaseLayer : false | |
| }); | |
| } | |
| if (typeof layerObject != "undefined") { | |
| return layerObject; | |
| } | |
| return value; | |
| }; | |
| // ==================================================================== | |
| // = Render-method | |
| // ==================================================================== | |
| /** | |
| * @private | |
| * after parsing the JSON (including transformations), the layout is created | |
| * based on this configuration. This includes: | |
| * | |
| * - creation of mapObject and mapPanel | |
| * - creation of the modules (= Panels in the westPanel) | |
| * - creation of the toolbar-items | |
| * - creation of the layout-containers (westPanel, centerPanel, viewport) | |
| * | |
| * Links to the created items are saved in the refs-object (while the refs | |
| * are saved in every layout-item) | |
| * @param {Object} jsonConfig The parsed JSON | |
| */ | |
| Custom.config.ConfigParser.prototype.doRender = function (jsonConfig) { | |
| /* | |
| * setting up the refs-object that will be filled with references to all relevant | |
| * parts of the application. Elements that need to have access to those parts are | |
| * equiped with a reference to the refs-object. | |
| */ | |
| var refs = {}; | |
| // saving reference to the jsonConfig | |
| refs.jsonConfig = jsonConfig; | |
| // make it available in Customs | |
| Custom.jsonConfig = jsonConfig; | |
| // creating the config-interface | |
| refs.configInterface = new Custom.config.ConfigInterface(refs); | |
| // creating mapObject and mapPanel | |
| var mapObject = Custom.config.Map.createMapObject(jsonConfig.map.mapSettings); | |
| var mapPanel = Custom.config.Map.createMapPanel(jsonConfig.map.mapSettings, mapObject); | |
| refs.mapObject = mapObject; | |
| refs.mapPanel = mapPanel; | |
| // creating the map-toolbar | |
| var mapToolbar = []; | |
| if (jsonConfig.map.toolbar) { | |
| var tbItemsArray = Custom.config.Map.createToolbarItems(jsonConfig.map.toolbar, refs); | |
| //empty bottom toolbar | |
| var tb = new Ext.Toolbar({ | |
| autoHeight: true | |
| }); | |
| //create panel with 2 toolbars | |
| mapToolbar = new Ext.Panel({ | |
| // items: tbItemsArray, | |
| id: 'tlb_pane', | |
| tbar: tbItemsArray, | |
| bbar: tb | |
| }) | |
| } | |
| var moduleArray = Custom.config.Modules.createModules(jsonConfig.modules, refs); | |
| // ================================================================== | |
| // = Layout-Panels = | |
| // ================================================================== | |
| // prepare refs for saving references to layout-panels | |
| refs.layout = {}; | |
| refs.layout.mapToolbar = mapToolbar; | |
| // container for making the map fill the rest of the space in the vbox-layout | |
| var mapContainer = new Ext.Container({ | |
| layout: 'fit', | |
| items: mapPanel, | |
| flex: 1 | |
| }); | |
| /* | |
| * Westpanel using the Ext.ux.PortalColumn-class which allows changing the order | |
| * of Panels insided via drag-and-drop | |
| */ | |
| var westPanel = new Ext.ux.PortalColumn({ | |
| columnWidth: 1, | |
| items: moduleArray | |
| }); | |
| refs.layout.westPanel = westPanel; | |
| /* | |
| * Proxy | |
| */ | |
| if (jsonConfig.general.proxy && jsonConfig.general.proxy.url && jsonConfig.general.proxy.url != "") { | |
| OpenLayers.ProxyHost = jsonConfig.general.proxy.url; | |
| } | |
| /* | |
| * Creating logo for the application if it was defined in the config-script | |
| */ | |
| if (jsonConfig.general && jsonConfig.general.logo && jsonConfig.general.logo.displayLogo === true) { | |
| var logoConf = jsonConfig.general.logo; | |
| var imgHeight = logoConf.height ? logoConf.height : 35; | |
| var logoContainer = new Ext.Container({ | |
| style: { | |
| padding: '2px', | |
| textAlign: 'center' | |
| }, | |
| html: "<img src='" + logoConf.logoSrc + "' height='" + imgHeight + "'/>", | |
| width: '100%', | |
| height: logoConf.height ? (logoConf.height + 4) : 39 | |
| }) | |
| } | |
| /* | |
| * Container for the elements in the westpanel | |
| */ | |
| var westPanelContainer = new Ext.ux.Portal({ | |
| region: 'west', | |
| width: 300, | |
| minWidth: 200, | |
| collapsible: true, | |
| split: true, | |
| autoScroll: true, | |
| items: [westPanel], | |
| tbar: logoContainer ? logoContainer : null, | |
| bbar: [{ | |
| text: "Alle minimieren", | |
| id: 'alleminimieren', | |
| refs: refs, | |
| handler: function () { | |
| var modules = this.refs.modules; | |
| for (var module in modules) { | |
| modules[module].collapse(); | |
| } | |
| } | |
| }, { | |
| text: "Alle maximieren", | |
| id: 'allemaximieren', | |
| refs: refs, | |
| handler: function () { | |
| var modules = this.refs.modules; | |
| for (var module in modules) { | |
| modules[module].expand(); | |
| } | |
| } | |
| }] | |
| }); | |
| refs.layout.westPanelContainer = westPanelContainer; | |
| /* | |
| * CenterPanel: Container for the mapPanel and toolbar(s) | |
| */ | |
| var centerPanel = new Ext.Panel({ | |
| autoDestroy: false, | |
| layout: { | |
| type: 'vbox', | |
| align: 'stretch' | |
| }, | |
| region: 'center', | |
| items: [mapToolbar, mapContainer], | |
| hideBorders: true | |
| }); | |
| refs.layout.centerPanel = centerPanel; | |
| /* | |
| * The viewport containing all elements visible on intial load | |
| */ | |
| refs.layout.viewport = new Ext.Viewport({ | |
| layout: "fit", | |
| hideBorders: true, | |
| items: { | |
| layout: "border", | |
| // deferredRender : false, | |
| items: [westPanelContainer, centerPanel] | |
| } | |
| }); | |
| /* | |
| * this two zoom-actions seem to be necessary for the map to display | |
| * correctly | |
| */ | |
| mapPanel.map.zoomIn(); | |
| mapPanel.map.zoomOut(); | |
| /** | |
| * finally we detect potential URL parameters and zoom to specific | |
| * object geometries by their id. | |
| * | |
| * we will show a loadingmask and load all asynctreenodes in the beginning | |
| * as this is required for toggling layers automatically on and off after | |
| * reacting on url parameters. Otherwise, the nodes and layers would not exist | |
| * in the beginning, only after user has actively requested them by click on | |
| * the matching folder in the tree | |
| */ | |
| var loadMask = new Ext.LoadMask(Ext.getBody(), {msg: "Bitte warten, Themen werden abgerufen..."}); | |
| loadMask.show(); | |
| /** | |
| * function will handle given url params in order to zoom to an specfic | |
| * object on map, highlight it and activate the corresponding layer | |
| */ | |
| var handleUrlParams = function () { | |
| var params = OpenLayers.Util.getParameters(), | |
| mapPanel = GeoExt.MapPanel.guess(), | |
| map = mapPanel.map, | |
| urlKeys = [], | |
| urlVals = [], | |
| filterLayer; | |
| Ext.iterate(params, function (k, v) { | |
| var matchInConfigFound = false; | |
| Ext.iterate(jsonConfig.map.featureFilterAttribute2LayerMapping, | |
| function (configKey, configValue) { | |
| if (configKey === k) { | |
| matchInConfigFound = true; | |
| return false; | |
| } | |
| }); | |
| if (matchInConfigFound) { | |
| urlKeys.push(k); | |
| urlVals.push(v); | |
| } else { | |
| Ext.Msg.alert("Fehler", "Es wurde ein Filter übergeben, aber " + | |
| "kein passender Layer mit der zugeordneten Eigenschaft gefunden!"); | |
| } | |
| }); | |
| if (urlKeys.length === 1) { | |
| // handling a single filter parameter. | |
| // this can be potential any layer, so we will check the property | |
| // name against the jsonConfig.map.featureFilterAttribute2LayerMapping | |
| // to identify the correct layer | |
| var urlFilterProperty = urlKeys[0], | |
| layerName = jsonConfig.map.featureFilterAttribute2LayerMapping[urlFilterProperty], | |
| tree = Ext.getCmp('layertree'), | |
| root = tree.getRootNode(), | |
| layer, | |
| node; | |
| root.cascade(function (n) { | |
| if (n.attributes.text === layerName) { | |
| node = n; | |
| layer = n.attributes.layer; | |
| } | |
| }); | |
| if (!Ext.isEmpty(layer) && !Ext.isEmpty(node)) { | |
| // make the layer visible | |
| if (!layer.map) { | |
| map.addLayer(layer); | |
| } | |
| node.ui.toggleCheck(true); | |
| // setup the filter url | |
| // example url: http://ds90101a.applrs.de.tmo:8399/arcgis/rest/services/telekomgeometrien/MapServer/1/query?where=kvz_id%3D%2722863A142%27&f=pjson&maxAllowableOffset=5000 | |
| var baseUrl = layer.wms ? layer.wms : layer.url, | |
| fid = urlVals[0], | |
| filterProperty = urlKeys[0], | |
| layerId = (layer.params && layer.params.LAYERS && | |
| layer.params.LAYERS.indexOf("show:") > -1) ? | |
| layer.params.LAYERS.split("show:")[1] : null, | |
| maxAllowableOffset = jsonConfig.map.featureFilterMaxAllowableOffset ? | |
| jsonConfig.map.featureFilterMaxAllowableOffset : | |
| (map.getExtent().right - map.getExtent().left) / map.getCurrentSize().w; | |
| // removing potential "export" path in URL | |
| if (baseUrl.indexOf("/export") > -1) { | |
| baseUrl = baseUrl.replace("/export", ""); | |
| } | |
| url = baseUrl + "/" + layerId + "/query?where=" + | |
| filterProperty + "%3D%27" + fid + "%27" + | |
| "&f=pjson&maxAllowableOffset=" + maxAllowableOffset; | |
| // register listener on mappanel to zoom to feature | |
| mapPanel.on('featureFromArcGisServerArrived', Custom.zoomToAndHighlightFeature, this, {single: true}); | |
| // request the feature | |
| Custom.getFeatureFromArcGisServer(url, true); | |
| } else { | |
| Ext.Msg.alert("Fehler", "Es konnte kein Layer mit dem Namen " + layerName + " gefunden werden!"); | |
| } | |
| } else if (urlKeys.length > 1) { | |
| Ext.Msg.alert("Fehler", "Es wurden mehrere URL-Parameter zum Zoomen auf ein " + | |
| "Objekt übergeben, aber es kann nur auf ein Objekt eines Themas " + | |
| "gezoomt werden!"); | |
| } | |
| }; | |
| /** | |
| * starting a delayed task to have the viewport already rendered and the | |
| * loadmask shown before expanding the roots childnodes | |
| */ | |
| var expandNodesTask = new Ext.util.DelayedTask(function () { | |
| var layerTree = Ext.getCmp('layertree'), | |
| root = layerTree.getRootNode(); | |
| root.expandChildNodes(); | |
| }); | |
| expandNodesTask.delay(1000); | |
| /** | |
| * checking the treestate regularly to detect when all async layernodes have | |
| * been loaded to continue with filtering | |
| */ | |
| var checkTreeStateTask = { | |
| run: function () { | |
| var layerTree = Ext.getCmp('layertree'), | |
| root = layerTree.getRootNode(), | |
| expectedRenderedCount = root.childNodes.length, | |
| renderedNodes = 0; | |
| root.eachChild(function (asyncNode) { | |
| if (asyncNode.loaded) { | |
| renderedNodes++; | |
| } | |
| }); | |
| if (renderedNodes === expectedRenderedCount) { | |
| root.collapse(); | |
| loadMask.hide(); | |
| Ext.TaskMgr.stopAll(); | |
| handleUrlParams(); | |
| } | |
| }, | |
| interval: 1000 | |
| }; | |
| Ext.TaskMgr.start(checkTreeStateTask); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment