lib/adiwg/mdtranslator/writers/html/sections/html_bodyScript.js in adiwg-mdtranslator-1.4.0 vs lib/adiwg/mdtranslator/writers/html/sections/html_bodyScript.js in adiwg-mdtranslator-2.0.0rc2
- old
+ new
@@ -1,155 +1,280 @@
-if ( typeof L === "object") {
- (function() {
- //forEach Polyfill, Reference: https://goo.gl/hFIfSd
- if (!Array.prototype.forEach) {
- Array.prototype.forEach = function(callback, thisArg) {
- var T, k;
- if (this === null || this === undefined) {
- throw new TypeError(' this is null or not defined');
- }
- var O = Object(this);
- var len = O.length >>> 0;
- if ( typeof callback !== "function") {
- throw new TypeError(callback + ' is not a function');
- }
- if (arguments.length > 1) {
- T = thisArg;
- }
- k = 0;
- while (k < len) {
- var kValue;
- if ( k in O) {
- kValue = O[k];
- callback.call(T, kValue, k, O);
- }
- k++;
- }
- };
- }
- var coordsToLatLng = function(coords) {
- var longitude = coords[0];
- var latitude = coords[1];
- var latlng = L.latLng(latitude, longitude);
+//forEach Polyfill, Reference: https://goo.gl/hFIfSd
+if (!Array.prototype.forEach) {
+ Array.prototype.forEach = function(callback, thisArg) {
+ var T, k;
+ if (this === null || this === undefined) {
+ throw new TypeError(' this is null or not defined');
+ }
+ var O = Object(this);
+ var len = O.length >>> 0;
+ if ( typeof callback !== "function") {
+ throw new TypeError(callback + ' is not a function');
+ }
+ if (arguments.length > 1) {
+ T = thisArg;
+ }
+ k = 0;
+ while (k < len) {
+ var kValue;
+ if ( k in O) {
+ kValue = O[k];
+ callback.call(T, kValue, k, O);
+ }
+ k++;
+ }
+ };
+}
- if (longitude < 0) {
- return latlng.wrap(360, 0);
- } else
- return latlng;
- };
+// open detail panel in the document
+function openDetail(evt) {
+ var href = evt.target.getAttribute("href");
+ href = href.slice(1);
+ var parentNode = document.getElementById(href).parentNode;
+ parentNode.open = true;
+}
- var extentNodeList = document.querySelectorAll('section.extent-section');
- var extents = Array.prototype.slice.call(extentNodeList);
+// open all detail panels in the document
+function openAllDetails() {
+ var arr = document.getElementsByTagName("details");
+ var len = arr.length;
- /*var mqAttr = '<span>Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"></span>';
- var osmAttr = '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
+ for (var i = 0; i < len; i++) {
+ arr[i].open = true;
+ }
+}
- L.TileLayer.OSM = L.TileLayer.extend({
- initialize: function(options) {
- L.TileLayer.prototype.initialize.call(this, 'http://otile{s}.mqcdn.com/tiles/1.0.0/{type}/{z}/{x}/{y}.png', {
- subdomains: '1234',
- type: 'osm',
- attribution: 'Map data ' + osmAttr + ', ' + mqAttr
- });
- }
- });*/
+// close all detail panels in the document
+function closeAllDetails() {
+ var arr = document.getElementsByTagName("details");
+ var len = arr.length;
- var check = function(i, me, bnds) {
- if (i < 3) {
- var resize = me.getSize().x === 0 && me.getContainer().offsetWidth > 0;
+ for (var i = 0; i < len; i++) {
+ arr[i].open = false;
+ }
+}
- me.invalidateSize();
- if (resize) {
- me.fitBounds(bnds);
- } else {
- i++;
- setTimeout(function() {
- check(i, me, bnds);
- }, 100);
- }
+// add event listeners to all anchor buttons in the sideNav
+var navBtnList = document.querySelectorAll('a.navBtn');
+var navBtnArray = Array.prototype.slice.call(navBtnList);
+navBtnArray.forEach(function(btn, btnIdx, btnArr) {
+ btn.addEventListener("click", openDetail, false);
+});
+
+// add event listener to openAllButton
+var elOpen = document.getElementById("openAllButton");
+elOpen.addEventListener("click", openAllDetails, false);
+
+// add event listener to closeAllButton
+var elClose = document.getElementById("closeAllButton");
+elClose.addEventListener("click", closeAllDetails, false);
+
+if ( typeof L === "object") {
+ (function() {
+
+ var westBound;
+ var eastBound;
+
+ var coordsToLatLng = function(coords) {
+ // if computed bounding box spans the antimeridian
+ // add 360 to negative longitudes
+ var longitude = coords[0];
+ if (westBound >= 0 && eastBound < 0) {
+ if (longitude < 0) {
+ longitude += 360;
}
- };
+ }
+ var latitude = coords[1];
+ return L.latLng(latitude, longitude);
+ };
- extents.forEach(function(extent, idx, arr) {
- var map = L.map(extent.querySelector('div.map'));
- var header = extent.querySelector('summary.map-header');
- var geoNodelist = extent.querySelectorAll('div.geojson');
- var geoArray = Array.prototype.slice.call(geoNodelist);
- var geojson = [];
+ var bbox2Poly = function(bbox) {
+ var bboxJson = JSON.parse(bbox.textContent || bbox.innerText);
+ var sw = [ bboxJson.westLongitude, bboxJson.southLatitude ];
+ var nw = [ bboxJson.westLongitude, bboxJson.northLatitude ];
+ var ne = [ bboxJson.eastLongitude, bboxJson.northLatitude ];
+ var se = [ bboxJson.eastLongitude, bboxJson.southLatitude ];
+ var coords = [];
+ coords.push(sw);
+ coords.push(nw);
+ coords.push(ne);
+ coords.push(se);
+ var bboxCoods = [];
+ bboxCoods.push(coords);
+ return bboxCoods;
+ };
- geoArray.forEach(function(geo, geoIdx, geoArr) {
- var json = JSON.parse(geo.textContent || geo.innerText);
- var bbox = json.bbox;
+ // collect all geographicExtents sections in document
+ var geoExtentNodeList = document.querySelectorAll('section.extent-geographic');
+ var geoExtents = Array.prototype.slice.call(geoExtentNodeList);
- if (!json.properties) {
- json.properties = {};
- }
+ var check = function(i, me, bnds) {
+ if (i < 3) {
+ var resize = me.getSize().x === 0 && me.getContainer().offsetWidth > 0;
- if (json.geometry === null && bbox) {
- var bcoor;
+ me.invalidateSize();
+ if (resize) {
+ me.fitBounds(bnds);
+ } else {
+ i++;
+ setTimeout(function() {
+ check(i, me, bnds);
+ }, 100);
+ }
+ }
+ };
- if (!(bbox[0] <= 0 && bbox[2] <= 0) || !(bbox[0] > 0 && bbox[2] > 0)) {
- //bbox crosses the dateline
- var bbox0 = bbox[0] < 0 ? L.latLng(0, bbox[0]).wrap(360,0).lng : bbox[0];
- var bbox2 = bbox[2] < 0 ? L.latLng(0, bbox[2]).wrap(360,0).lng : bbox[2];
- bbox[0] = Math.min(bbox0, bbox2);
- bbox[2] = Math.max(bbox0, bbox2);
- }
+ geoExtents.forEach(function(geoExtent, idx, arr) {
+ // instantiate a leaflet map in the map div
+ var map = L.map(geoExtent.querySelector('div.map'), {noWrap: true});
+ // get a pointer to the map header switch
+ var header = geoExtent.querySelector('summary.map-summary');
+ // get the GeoJSON from the geojson div
+ var geoJsonDiv = geoExtent.querySelector('div.geojson');
+ var geojson = JSON.parse(geoJsonDiv.textContent || geoJsonDiv.innerText);
+ // get the user provided bounding box for the extent - if any
+ var userBBox = geoExtent.querySelector('div.userBBox');
+ if (userBBox) {
+ var userCoords = bbox2Poly(userBBox);
+ var newUserBBox = {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": userCoords
+ },
+ "properties": {
+ "style": {
+ "color": '#f00',
+ "fill": false
+ },
+ "featureName": [
+ "User BBOX"
+ ]
+ }
+ };
+ geojson.push(newUserBBox);
+ }
- bcoor = [[[bbox[2], bbox[3]], [bbox[0], bbox[3]], [bbox[0], bbox[1]], [bbox[2], bbox[1]], [bbox[2], bbox[3]]]];
+ // get the computed bounding box for the extent - always one
+ var computedBBox = geoExtent.querySelector('div.computedBBox');
+ if (computedBBox) {
+ var compCoords = bbox2Poly(computedBBox);
+ var newCompBBox = {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": compCoords
+ },
+ "properties": {
+ "style": {
+ "color": '#0f0',
+ "fill": false
+ },
+ "featureName": [
+ "Computed BBOX"
+ ]
+ }
+ };
+ geojson.push(newCompBBox);
+ westBound = compCoords[0][0][0];
+ eastBound = compCoords[0][2][0];
+ }
- json.geometry = {
- "type": "Polygon",
- "coordinates": bcoor
- };
- json.properties.style = {
- color: '#f00',
- fill: false
- };
- }
+ var pointCnt = 0;
+ var lineStringCnt = 0;
+ var polygonCnt = 0;
+ var geoCollectCnt = 0;
+ var featureCnt = 0;
- json.properties.popup = geo.getAttribute('data-popup');
- geojson.push(json);
- });
+ geojson.forEach(function(geo, geoIdx, geoArr) {
- var geoLayer = L.geoJson(geojson, {
- style: function(feature) {
- return feature.properties.style || {};
- },
- coordsToLatLng: coordsToLatLng,
- onEachFeature: function (feature, layer) {
- layer.bindPopup(feature.properties.popup,{
- closeButton: true
- });
- }
- }).addTo(map);
+ // make sure each geo has a properties object
+ if (!geo.properties) {
+ geo.properties = {};
+ }
- var bnds = geoLayer.getBounds();
+ // add popup information
+ if (geo.type === "Point") {
+ pointCnt += 1;
+ geo.properties.popup = "Point " + pointCnt;
+ }
+ if (geo.type === 'LineString') {
+ lineStringCnt += 1;
+ geo.properties.popup = "LineString " + lineStringCnt;
+ }
+ if (geo.type === 'Polygon') {
+ polygonCnt += 1;
+ geo.properties.popup = "Polygon " + polygonCnt;
+ }
+ if (geo.type === 'GeometryCollection') {
+ geoCollectCnt += 1;
+ geo.properties.popup = "Geometry Collection " + geoCollectCnt;
+ // popup can't find properties on collection objects
+ // placed popup on geometry collection instead
+ // geo.geometries.forEach(function (geoG, geoGIdx, geoGArr) {
+ // geoG.properties = {};
+ // geoG.properties.popup = "Geometry Collection " + geoCollectCnt + " " + geoG.type;
+ // });
+ }
+ if (geo.type === 'Feature') {
+ featureCnt += 1;
+ var featureName;
+ if (geo.properties.featureName !== undefined) {
+ featureName = geo.properties.featureName[0] || geo.id || geo.geometry.type;
+ } else featureName = geo.id || "Feature " + featureCnt + " " + geo.geometry.type;
+ geo.properties.popup = featureName;
+ }
+ if (geo.type === 'FeatureCollection') {
+ geo.features.forEach(function (geoF, geoFIdx, geoFArr) {
+ featureCnt += 1;
+ var featureName;
+ if (geoF.properties.featureName !== undefined) {
+ featureName = geoF.properties.featureName[0] || geoF.id || geoF.geometry.type;
+ } else featureName = geoF.id || "Feature " + featureCnt + " " + geoF.geometry.type;
+ geoF.properties.popup = featureName;
+ });
+ }
- L.DomEvent.addListener(header, 'click', function() {
- var me = this;
- var i = 0;
+ });
- setTimeout(function() {
- check(i, me, bnds);
- }, 100);
+ var geoLayer = L.geoJSON(geojson, {
+ style: function(feature) {
+ return feature.properties.style || {};
+ },
+ coordsToLatLng: coordsToLatLng,
+ onEachFeature: function (feature, layer) {
+ layer.bindPopup(feature.properties.popup,{
+ closeButton: true
+ });
+ }
+ }).addTo(map);
- }, map);
+ var bnds = geoLayer.getBounds();
+ map.fitBounds(bnds);
- L.DomEvent.addListener(L.DomUtil.get('openAllDetails'), 'click', function() {
- var me = this;
- var i = 0;
+ L.DomEvent.addListener(header, 'click', function() {
+ var me = this;
+ var i = 0;
- setTimeout(function() {
- check(i, me, bnds);
- }, 100);
+ setTimeout(function() {
+ check(i, me, bnds);
+ }, 100);
- }, map);
+ }, map);
- map.fitBounds(bnds);
- //map.addLayer(new L.TileLayer.OSM());
- var stamen = new L.StamenTileLayer("terrain");
- map.addLayer(stamen);
- });
- })();
+ L.DomEvent.addListener(L.DomUtil.get('openAllButton'), 'click', function() {
+ var me = this;
+ var i = 0;
+
+ setTimeout(function() {
+ check(i, me, bnds);
+ }, 100);
+
+ }, map);
+
+ // map.addLayer(new L.TileLayer.OSM());
+ var stamen = new L.StamenTileLayer("terrain");
+ map.addLayer(stamen);
+ });
+ })();
}