{"id":5,"date":"2019-03-21T12:08:33","date_gmt":"2019-03-21T12:08:33","guid":{"rendered":"https:\/\/agripedia.ch\/jahresbericht2018\/?page_id=5"},"modified":"2020-02-03T12:07:14","modified_gmt":"2020-02-03T10:07:14","slug":"projekte","status":"publish","type":"page","link":"https:\/\/agripedia.ch\/jahresbericht2018\/projekte\/","title":{"rendered":"Projekte"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" id=\"agri-jb-project-content\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:calc( 1100px + 0px );margin-left: calc(-0px \/ 2 );margin-right: calc(-0px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:0px;--awb-margin-bottom-large:20px;--awb-spacing-left-large:0px;--awb-width-medium:100%;--awb-spacing-right-medium:0px;--awb-spacing-left-medium:0px;--awb-width-small:100%;--awb-spacing-right-small:0px;--awb-spacing-left-small:0px;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><h2>AGRIDEA-Projekte im l\u00e4ndlichen Raum \u2013 eine Auswahl<\/h2>\n<\/div><div id=\"agri-jb-viz-container\">\n    <img decoding=\"async\" id=\"agri-jb-viz-map\" src=\"https:\/\/agripedia.ch\/jahresbericht2018\/wp-content\/uploads\/sites\/12\/2019\/04\/Poster_Web.png\" alt=\"Grafik: L\u00e4ndlicher Raum\" \/>\n<\/div>\n\n<script type=\"text\/javascript\" charset=\"utf-8\">\n\t\t\n\n\t\t\/\/ converts the CSV file into a javascript object\n\t\tfunction readCSV(txt){\n\t\t    \n\t\t    var lines = txt.split(\"\\r\\n\"),\n\t\t        keys = lines[0].split(\";\"),\n\t\t        rows = getRows(lines.slice(1,lines.length-1), \";\"),\n\t\t        items = [];\n\t\t    \n\t\t    for(var i=0; i < rows.length; i++){\n\t\t        var item = {};\n\t\t        \n\t\t        for(var j = 0; j < rows[i].length; j++){\n\t\t            item[keys[j]] = rows[i][j];\n\t\t            };\n\t\t        items.push(item);\n\t\t        };\n\t\t        \n\t\t    return items;\n\t\t};\n\t\t    \n\t\t\/\/ helper function for readCSV() that splits the rows of the CSV file\n\t\tfunction getRows(listOfRows){\n\t\t    var rows = []\n\t\t    for(var i=0; i < listOfRows.length; i++){\n\t\t        rows.push(listOfRows[i].split(\";\"));\n\t\t        };\n\t\t    return rows;\n\t\t};\n\n\n\t\tfunction loadJSON(callback) {   \n\n\t\t    var xobj = new XMLHttpRequest();\n\t\t        xobj.overrideMimeType(\"txt\/csv\");\n\t\t    xobj.open(\"GET\", \"\/jahresbericht2018\/wp-content\/uploads\/sites\/12\/2019\/05\/Projekte_Jahresbericht_D-5.csv\", true);\n\t\t    xobj.onreadystatechange = function () {\n\t\t          if (xobj.readyState == 4 && xobj.status == \"200\") {\n\t\t            \/\/ Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode\n\t\t            callback(xobj.responseText);\n\t\t          }\n\t\t    };\n\t\t    xobj.send(null);\n\t\t }\n\n\t\tfunction bindMarkers(projects){\n\t\t\tvar container = document.getElementById(\"agri-jb-viz-container\"),\n\t\t\t\tmap = document.getElementById(\"agri-jb-viz-map\"),\n\t\t\t\tmapCoords = offset(map),\n\t\t\t\tgroup = document.createElement(\"div\");\n\t\t\tgroup.setAttribute(\"id\", \"agri-jb-viz-popup-group\");\n\n\t\t\t\/\/ Add event listener to image\n\t\t\taddEvent(map, \"click\", closePopup);\n\n\t\t\t\n\t\t\/\/ Set markers and popups\n\t\t\tfor (var i = 0; i < projects.length; i++) {\n\n\t\t\t\tvar marker = document.createElement(\"span\"), \n\t\t\t\t    \/\/ Computing x, y coordinates with regard to actual image size. 100% image size = 1000px : 732px.\n\t\t\t\t    \/\/ -7px marker radius (see css class .agri-jb-viz-marker)\n\t\t\t\t    x = parseInt(projects[i].x) * (mapCoords.width \/ 1000) + map.offsetLeft - 7,\n\t\t\t\t    y =  parseInt(projects[i].y) * ((732 \/ 1000) * (mapCoords.width \/ 732)) + map.offsetTop - 7,\n\t\t\t\t    markerCoords = {\"x\": x, \"y\": y},\n\t\t\t\t\tinfobox = document.createElement(\"p\"),\n\t\t\t\t\tboxTitle = document.createElement(\"span\"),\n\t\t\t\t\tdiv = document.createElement(\"div\"),\n\t\t\t\t\tid = i.toString(),\n\t\t\t\t\tstyle = \"left:\" + markerCoords.x + \"px;top:\" + markerCoords.y + \"px;\";\n\n\t\t\t\t\/\/ marker span attributes\n\t\t\t\tmarker.setAttribute(\"class\", \"agri-jb-viz-popup\");\n\t\t\t\tmarker.classList.add(\"agri-jb-viz-marker\");\n\t\t\t\tmarker.setAttribute(\"id\", projects[i].id);\n\t\t\t\tmarker.setAttribute(\"style\", style);\n\t\t\t\t\/\/ append span marker to div agri-jb-viz-container\n\t\t\t\tgroup.appendChild(marker);\n\n\t\t\t\t\/\/ span boxTitle attributes\n\t\t\t\tboxTitle.innerHTML = projects[i].project_title;\n\t\t\t\tboxTitle.setAttribute(\"class\", \"agri-jb-viz-projekttitel\");\n\n\n\t\t\t\t\/\/ span infobox attributes \n\t\t\t\tinfobox.innerHTML = projects[i].description + \" <a class='agri-jb-viz-popuplink' target='_blank' href='\" + projects[i].link + \"'><strong>Weiter lesen...<\/strong><\/a>\";\n\t\t\t\tinfobox.setAttribute(\"class\", \"agri-jb-viz-infobox\");\n\t\t\t\tinfobox.classList.add(\"agri-jb-viz-infobox-collapse\");\n\t\t\t\t\/\/infobox.setAttribute(\"id\", id);\n\n\n\t\t\t\t\/\/ div popup attributes\n\t\t\t\tdiv.setAttribute(\"agri-jb-viz-marker-id\", projects[i].id);\n\t\t\t\t\/\/div.setAttribute(\"agri-jb-viz-infobox-id\", id);\n\t\t\t\tdiv.setAttribute(\"id\", id);\n\t\t\t\tdiv.setAttribute(\"class\", \"agri-jb-viz-popup-div\");\n\t\t\t\t\/\/div.setAttribute(\"style\", style);\n\n\t\t\t\t\/\/ append elements to div popup\n\t\t\t\tdiv.appendChild(boxTitle);\n\t\t\t\tdiv.appendChild(infobox);\n\n\t\t\t\t\/\/ Insert span\n\t\t\t\tgroup.appendChild(div);\n\n\t\t\/\/ Add event listeners\n\t\t\t\taddEvent(div, \"click\", function(){\n\t\t\t\t\tclosePopup();\n\t\t\t\t\tvar markerId = this.getAttribute(\"agri-jb-viz-marker-id\"),\n\t\t\t\t\t\t\/\/infoboxId = this.getAttribute(\"agri-jb-viz-infobox-id\"),\n\t\t\t\t\t\tpopupId = this.getAttribute(\"id\");\n\t\t\t\t\tresizeMarker(markerId);\n\t\t\t\t\topenPopup(popupId);\n\t\t\t\t});\n\n\t\t\t\taddEvent(marker, \"click\", function(){\n\t\t\t\t\tclosePopup();\n\t\t\t\t\tvar markerId = this.getAttribute(\"id\"),\n\t\t\t\t\t\tpopups = document.getElementsByClassName(\"agri-jb-viz-popup-div\");\n\n\t\t\t\t\tfor (var i = 0; i < popups.length; i++) {\n\t\t\t\t\t\tif(popups[i].getAttribute(\"agri-jb-viz-marker-id\") == markerId){\n\t\t\t\t\t\t\tvar popupId = popups[i].getAttribute(\"id\");\n\t\t\t\t\t\t\topenPopup(popupId);\n\t\t\t\t\t\t\tresizeMarker(markerId);\n\t\t\t\t\t\t};\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t\t\n\t\t\t};\n\n\t\t\tcontainer.appendChild(group);\n\t\t\tif(getScreenSize().w > 600){\n\t\t\t\tpopupSetup();\n\t\t\t};\n\n\t\t};\n\n\t\tfunction resizeMarker(id) {\n\t\t\tvar marker = document.getElementById(id);\n\t\t\tmarker.classList.add(\"agri-jb-viz-highlight-marker\");\n\t\t}\n\n\t\tfunction openPopup(id) {\n\t\t\tvar popup = document.getElementById(id),\n\t\t\t\tinfobox = popup.lastChild;\n\t\t\tinfobox.classList.remove(\"agri-jb-viz-infobox-collapse\");\n\t\t\tpopup.classList.add(\"agri-jb-viz-popup-div-show\");\n\t\t\tsetPosition(id);\n\t\t\tif (getScreenSize().w < 600) {\n\t\t\t\twindow.location.hash = \"#\" + id;\n\t\t\t};\n\t\t};\n\n\t\tfunction closePopup() {\n\t\t\tvar infoboxes = document.getElementsByClassName(\"agri-jb-viz-infobox\"),\n\t\t\t\tpopup = document.getElementsByClassName(\"agri-jb-viz-popup-div-show\")[0];\n\n\t\t\tif (popup != null) {\n\t\t\t\tvar markerId = popup.getAttribute(\"agri-jb-viz-marker-id\"),\n\t\t\t\t\tmarker = document.getElementById(markerId);\n\t\t\t\tmarker.classList.remove(\"agri-jb-viz-highlight-marker\");\n\t\t\t\tpopup.classList.remove(\"agri-jb-viz-popup-div-show\");\n\n\t\t\t};\n\n\t\t\tfor (var i = 0; i < infoboxes.length; i++) {\n\t\t\t\tvar classAttr = infoboxes[i].getAttribute(\"class\");\n\t\t\t\tif(classAttr.indexOf(\"agri-jb-viz-infobox-collapse\") == -1){\n\t\t\t\t\tvar popupId = infoboxes[i].parentNode.getAttribute(\"id\");\n\t\t\t\t\tinfoboxes[i].classList.add(\"agri-jb-viz-infobox-collapse\");\n\t\t\t\t\tsetPosition(popupId);\n\t\t\t\t};\n\t\t\t};\n\n\t\t};\n\n\t\tfunction popupOrientation(el, ref) {\n\t\t\tvar elCoords = el.getBoundingClientRect();\n\t\t\tif (ref.offsetTop > 300) {\n\t\t\t\t\/\/ above marker\n\t\t\t    var top = ref.offsetTop - elCoords.height - 7,\n\t\t\t    \tclass_ = \"agri-jb-viz-popuptext-top\";\n\t\t\t};\n            if (ref.offsetTop <= 300) {\n            \t\/\/ below marker\n            \tvar top = ref.offsetTop + 14 + 7,\n            \t\tclass_ = \"agri-jb-viz-popuptext-bottom\";\n            };\n            var left = ref.offsetLeft - elCoords.width \/ 2 + 2,\n            \tstyle = \"top: \" + top + \"px; left: \" + left + \"px;\";\n            return {\"style\": style, \"class_\": class_};\n\t\t};\n\n\t\tfunction popupSetup(){\n\t\t\t\/\/ Initial postition and style of popup divs\n\t\t\tvar popupDivs = document.getElementsByClassName(\"agri-jb-viz-popup-div\"),\n\t\t\t\tinfobox = document.getElementsByClassName(\"agri-jb-viz-infobox\");\n\n\t\t\tfor (var i = 0; i < popupDivs.length; i++) {\n\n\t\t\t\tvar popupId = popupDivs[i].getAttribute(\"id\"),\n\t\t\t\t\tmarkerId = popupDivs[i].getAttribute(\"agri-jb-viz-marker-id\"),\n\t\t\t\t\tmarker = document.getElementById(markerId),\n\t\t\t\t\tpopupPos = popupOrientation(popupDivs[i], marker);\n\t\t\t\t\n\t\t\t\tpopupDivs[i].classList.add(popupPos.class_);\n\t\t\t\tsetPosition(popupId);\n\t\t\t};\n\n\t\t};\n\n\t\tfunction setPosition(id){\n\t\t\t\/\/ Sets position of the popup div with regard to\n\t\t\t\/\/ its actual width and heights\n\t\t\tif (getScreenSize().w > 600) {\n\t\t\t\t\tvar popup = document.getElementById(id),\n\t\t\t\t\t\tpopupClass = popup.getAttribute(\"class\"),\n\t\t\t\t\t    markerId = popup.getAttribute(\"agri-jb-viz-marker-id\"),\n\t\t\t\t\t    marker = document.getElementById(markerId);\n\t\t\t\t\tpopupDims = popupOrientation(popup, marker);\n\t\t\t\t\tpopup.setAttribute(\"style\", popupDims.style);\n\t\t\t};\n\t\t};\n\n\t\tfunction offset(el) {\n\t\t    var rect = el.getBoundingClientRect(),\n\t\t        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,\n\t\t        scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n\t\t    return { \"y\": rect.top + scrollTop, \"x\": rect.left + scrollLeft, \"width\": rect.width, \"height\": rect.height};\n\t\t};\n\n\t\tfunction resetMarkers(){\n\t\t\tdocument.getElementById(\"agri-jb-viz-popup-group\").remove();\n\t\t\tinit();\n\t\t};\n\n\t\tfunction resetPosition(){\n\t\t\tvar popupDivs = document.getElementsByClassName(\"agri-jb-viz-popup-div\");\n\t\t\tfor (var i = 0; i < popupDivs.length; i++) {\n\t\t\t\tpopupDivs[i].removeAttribute(\"style\");\n\t\t\t}\n\t\t}\n\n\t\tfunction getScreenSize(){\n\t\t\tvar w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),\n\t\t\t\th = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n\t\t\treturn {\"w\": w, \"h\": h};\n\t\t};\n\n\n\t\tfunction viewportChange(){\n\t\t\tvar w = getScreenSize().w;\n\t\t\tif (cachedWidth != w){\n\t\t\t\tresetMarkers();\n\t\t\t\tcachedWidth = w;\n\t\t\t\tif (w < 600){\n\t\t\t\t\tresetPosition();\n\t\t\t\t};\n\t\t\t};\t\t\t\n\t\t};\n\n\n\t\tfunction addEvent(object, type, callback) {\n\t\t    if (object == null || typeof(object) == \"undefined\") return;\n\t\t    if (object.addEventListener) {\n\t\t        object.addEventListener(type, callback, false);\n\t\t    } else if (object.attachEvent) {\n\t\t        object.attachEvent(\"on\" + type, callback);\n\t\t    } else {\n\t\t        object[\"on\" + type] = callback;\n\t\t    }\n\t\t};\n\n\t\tfunction init() {\n\t\t\tloadJSON(function(response) {\n\t\t\t\tvar projects = readCSV(response);\n\t\t\t\tbindMarkers(projects);\n\t\t\t\t\/\/popupSetup();\n\t\t\t});\n\t\t};\n\n\t\t\/\/ Run\n\t\tinit();\n\n\t\t\/\/ Monitor resize events\n\t\tvar cachedWidth = getScreenSize().w;\n\t\taddEvent(window, \"resize\", viewportChange);\n\n\n<\/script>\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_sb_is_suggestion_mode":false,"_sb_show_suggestion_boards":false,"_sb_show_comment_boards":false,"_sb_suggestion_history":"","_sb_update_block_changes":"","inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":22,"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":1086,"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/pages\/5\/revisions\/1086"}],"wp:attachment":[{"href":"https:\/\/agripedia.ch\/jahresbericht2018\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}