{"id":49,"date":"2024-10-29T13:30:01","date_gmt":"2024-10-29T13:30:01","guid":{"rendered":"https:\/\/sunny-project.eu\/?page_id=49"},"modified":"2024-11-04T12:34:29","modified_gmt":"2024-11-04T12:34:29","slug":"demo-sites","status":"publish","type":"page","link":"https:\/\/sunny-project.eu\/fr\/demo-sites\/","title":{"rendered":"Sites de d\u00e9monstration"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;||0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; text_text_color=&#8221;#47BD93&#8243; background_color=&#8221;#E2F2E9&#8243; custom_padding=&#8221;0.3rem|0.7rem|0.2rem|0.7rem|false|true&#8221; custom_css_main_element=&#8221;width:max-content;||margin-inline:auto;&#8221; border_radii=&#8221;on|5px|5px|5px|5px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\"badge\">DEMO SITES<\/p>\n<p>[\/et_pb_text][et_pb_text module_id=&#8221;home-hero-title&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1 class=\"section-title\" style=\"text-align: center;\">DEMO SITES MAP<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; disabled_on=&#8221;on|on|off&#8221; sticky_enabled=&#8221;0&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n    <section id=\"world-map\">\r\n        <div id=\"map\"><\/div>\r\n        <div id=\"demo-site-cards\"><\/div> <!-- Placeholder for cards -->\r\n        \r\n        <div class=\"legend\">\r\n                            <div class=\"demo-site-legend demo-site-uganda\">\r\n                    <span class=\"demo-site-color\"><\/span>\r\n                    <span class=\"demo-site-name\">Demo site Uganda<\/span>\r\n                <\/div>\r\n                            <div class=\"demo-site-legend demo-site-rwanda\">\r\n                    <span class=\"demo-site-color\"><\/span>\r\n                    <span class=\"demo-site-name\">Demo site Rwanda<\/span>\r\n                <\/div>\r\n                    <\/div>\r\n    <\/section>\r\n\r\n  <script>\r\n\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    var width = 960, height = 500;\r\n\r\n    var projection = d3.geoMercator()\r\n        .center([20, 0]) \/\/ Center on Africa: longitude = 20, latitude = 0\r\n        .scale(350)      \/\/ Adjust the scale to zoom into Africa\r\n        .translate([width \/ 2, height \/ 2]);\r\n\r\n    var path = d3.geoPath().projection(projection);\r\n\r\n    var svg = d3.select(\"#map\").append(\"svg\")\r\n        .attr(\"width\", width)\r\n        .attr(\"height\", height);\r\n\r\n    var mapGroup = svg.append(\"g\"); \/\/ Group for map paths\r\n    var pinsGroup = svg.append(\"g\"); \/\/ Separate group for pins\r\n\r\n    \/\/ Load and display the world map in mapGroup\r\n    d3.json(\"https:\/\/d3js.org\/world-110m.v1.json\").then(function (world) {\r\n        mapGroup.append(\"path\")\r\n            .datum(topojson.feature(world, world.objects.countries))\r\n            .attr(\"d\", path)\r\n            .attr(\"stroke\", \"#C3A181\")\r\n            .attr(\"fill\", \"#E5D4C5\")\r\n            .attr(\"stroke-width\", \"0.4\");\r\n    });\r\n\r\n    \/\/ Custom color array (20 distinct colors)\r\n    var colorScale = d3.scaleOrdinal([\r\n        \"#1f77b4\", \"#ff7f0e\", \"#2ca02c\", \"#d62728\", \"#9467bd\",\r\n        \"#8c564b\", \"#e377c2\", \"#7f7f7f\", \"#bcbd22\", \"#17becf\",\r\n        \"#393b79\", \"#637939\", \"#8c6d31\", \"#843c39\", \"#7b4173\",\r\n        \"#a55194\", \"#ce6dbd\", \"#de9ed6\", \"#c5b0d5\", \"#e7969c\"\r\n    ]);\r\n\r\n    \/\/ Fetch demo site data and create pins in pinsGroup\r\n    d3.json(\"\/wp-json\/demo-sites\/v1\/list\").then(function (demo_sites) {\r\n        pinsGroup.selectAll(\".pin\")\r\n            .data(demo_sites)\r\n            .enter().append(\"circle\")\r\n            .attr(\"r\", 5)\r\n            .attr(\"class\", function (d) { \r\n                return \"pin \" + d.name.normalize('NFD').replace(\/[\\u0300-\\u036f]\/g, \"\").replace(\/\\s+\/g, '-').toLowerCase(); \r\n            }) \/\/ Normalize name to create valid class\r\n            .attr(\"fill\", function (d, i) {\r\n                var color = colorScale(i % 20); \/\/ Use D3 color scale to assign color, cycling through the array\r\n                var legendElement = document.querySelector(\".legend .\" + d.name.normalize('NFD').replace(\/[\\u0300-\\u036f]\/g, \"\").replace(\/\\s+\/g, '-').toLowerCase() + \" .demo-site-color\");\r\n                if (legendElement) {\r\n                    legendElement.style.backgroundColor = color;\r\n                } else {\r\n                    console.warn(\"Legend element for \" + d.name + \" not found.\");\r\n                }\r\n                return color;\r\n            })\r\n            .attr(\"transform\", function (d) {\r\n                return \"translate(\" + projection([d.latitude, d.longitude]) + \")\";\r\n            })\r\n            .on(\"click\", function (event, d) {\r\n                pinsGroup.selectAll(\".pin\").attr(\"opened\", null); \/\/ Remove the opened attribute from all pins\r\n                pinsGroup.selectAll(\".line-to-card\").remove(); \/\/ Remove any previous lines\r\n\r\n                d3.select(this).attr(\"opened\", true); \/\/ Mark the clicked pin as opened\r\n                showDemoSiteCard(d, this); \/\/ Pass the data and the pin element\r\n            });\r\n    });\r\n\r\n    \/\/ D3 Zoom Functionality\r\n    var zoom = d3.zoom()\r\n        .scaleExtent([1, 8]) \/\/ Limit the zoom scale between 1x and 8x\r\n        .on(\"zoom\", function (event) {\r\n            svg.selectAll(\"g\").attr(\"transform\", event.transform); \/\/ Apply the zoom and pan to both groups\r\n            updateCardPositions(); \/\/ Update card positions during zoom\/pan\r\n        });\r\n\r\n    svg.call(zoom); \/\/ Attach the zoom functionality to the SVG element\r\n\r\n    \/\/ Function to show demo site card\r\n    function showDemoSiteCard(data, pin) {\r\n        var cardContainer = document.getElementById('demo-site-cards');\r\n        cardContainer.innerHTML = ''; \/\/ Clear any existing cards\r\n\r\n        var card = document.createElement('div');\r\n        card.className = 'demo-site-card';\r\n        card.innerHTML = `\r\n            <div class=\"demo-site-card-content\">\r\n                <div class=\"demo-site-card-header\">\r\n                    <img decoding=\"async\" src=\"${data.featured_image}\" alt=\"${data.name}\" class=\"demo-site-logo\">\r\n                    <h3 class=\"demo-site-title\">${data.name}<\/h3>\r\n                    <button class=\"close-card\">&times;<\/button>\r\n                <\/div>\r\n                <p class=\"demo-site-excerpt\">${data.excerpt}<\/p>\r\n                <a href=\"${data.permalink}\" class=\"read-more\">Read More<\/a>\r\n            <\/div>\r\n        `;\r\n\r\n        cardContainer.appendChild(card);\r\n        updateCardPosition(pin, card);\r\n        \r\n        var pinColor = d3.select(pin).attr(\"fill\");\r\n        card.style.border = `2px solid ${pinColor}`;\r\n\r\n        document.querySelector('.close-card').addEventListener('click', function () {\r\n            cardContainer.innerHTML = ''; \/\/ Close the card\r\n            pinsGroup.selectAll(\".line-to-card\").remove(); \/\/ Remove the line when the card is closed\r\n        });\r\n\r\n        drawLineToCard(pin, card, pinColor);\r\n    }\r\n\r\n    function drawLineToCard(pin, card, color) {\r\n        var pinPosition = d3.select(pin).attr(\"transform\");\r\n        var coordinates = pinPosition.match(\/translate\\(([^,]+),([^)]+)\\)\/);\r\n        if (coordinates) {\r\n            var pinX = parseFloat(coordinates[1]);\r\n            var pinY = parseFloat(coordinates[2]);\r\n\r\n            var cardRect = card.getBoundingClientRect();\r\n            var svgRect = svg.node().getBoundingClientRect();\r\n            var cardX = cardRect.left + (cardRect.width \/ 2) - svgRect.left;\r\n            var cardY = cardRect.top - svgRect.top;\r\n\r\n            pinsGroup.append(\"line\")\r\n                .attr(\"class\", \"line-to-card\")\r\n                .attr(\"x1\", pinX)\r\n                .attr(\"y1\", pinY)\r\n                .attr(\"x2\", cardX)\r\n                .attr(\"y2\", cardY)\r\n                .attr(\"stroke\", color)\r\n                .attr(\"stroke-width\", 2);\r\n        }\r\n    }\r\n\r\n    function updateCardPosition(pin, card) {\r\n        var pinPosition = d3.select(pin).attr(\"transform\");\r\n        var coordinates = pinPosition.match(\/translate\\(([^,]+),([^)]+)\\)\/);\r\n        if (coordinates) {\r\n            var pinX = parseFloat(coordinates[1]);\r\n            var pinY = parseFloat(coordinates[2]);\r\n\r\n            card.style.left = `${pinX \/ 1.4}px`;\r\n            card.style.top = `${pinY - 205}px`;\r\n        }\r\n    }\r\n\r\n    function updateCardPositions() {\r\n        var cardContainer = document.getElementById('demo-site-cards');\r\n        var card = cardContainer.querySelector('.demo-site-card');\r\n        if (card) {\r\n            var pin = pinsGroup.selectAll('.pin[opened=true]').node();\r\n            if (pin) {\r\n                updateCardPosition(pin, card);\r\n            }\r\n        }\r\n    }\r\n});\r\n\r\n\r\n  <\/script>\r\n\r\n    <style>\r\n        .pin {\r\n            cursor: pointer;\r\n        }\r\n\r\n        .pin[opened=\"true\"]::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 2.5px;\r\n            width: 2px;\r\n            height: calc(20px, 5vh, 100px);\r\n            background: #AD7B4D;\r\n        }\r\n    .demo-site-card {\r\n        position: absolute;\r\n        background: #FCFCFC;\r\n        border-radius: 8px;\r\n        box-shadow: 0 0 70px rgba(0, 0, 0, 0.15);\r\n        padding: 15px;\r\n        color: #01160D;\r\n        z-index: 9999;\r\n        width: 300px;\r\n    }\r\n    .demo-site-card-content {\r\n        position: relative;\r\n    }\r\n    .demo-site-card-header {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    .demo-site-logo {\r\n        width: 50px;\r\n        height: 50px;\r\n        object-fit: contain;\r\n    }\r\n    .demo-site-title {\r\n        flex-grow: 1;\r\n        margin-left: 10px;\r\n        color:#01160D !important;\r\n        padding-bottom: unset !important;\r\n        font-size: 1.2rem;\r\n    }\r\n    .close-card {\r\n        background: none;\r\n        border: none;\r\n        color: #db0202;\r\n        font-size: 1.5rem;\r\n        cursor: pointer;\r\n        position: absolute;\r\n        top: -0.7rem;\r\n        right: -0.5rem;\r\n    }\r\n    .demo-site-excerpt {\r\n        margin: 10px 0;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n    .read-more {\r\n        display: inline-block;\r\n        background: #47BD93;\r\n        color: #FCFCFC;\r\n        padding: 2px 10px;\r\n        text-decoration: none;\r\n        border-radius: 50px;\r\n        font-size: .9rem;\r\n    }\r\n\r\n    .legend {\r\n        margin-top: 20px;\r\n        position: absolute;\r\n        top: 0rem;\r\n        right: 0rem;\r\n       \r\n    }\r\n\r\n    .legend .demo-site-legend {\r\n        display: flex;\r\n        align-items: center;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .legend .demo-site-color {\r\n        width: 30px;\r\n        height: 15px;\r\n        display: inline-block;\r\n        margin-right: 10px;\r\n        border-radius: 20px;\r\n    }\r\n    <\/style>\r\n\r\n    \n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; width=&#8221;90%&#8221; width_last_edited=&#8221;on|phone&#8221; sticky_enabled=&#8221;0&#8243; width_tablet=&#8221;90%&#8221; width_phone=&#8221;90%&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class='demo-sites-cards-container'>                 <div class=\"card-bg-color\">\r\n                    <div class=\"image-box\">\r\n                                        <img decoding=\"async\" src=\"https:\/\/sunny-project.eu\/wp-content\/uploads\/2024\/10\/Picture_no-reflection.jpg\" alt=\"Demo site Uganda\">\r\n                    <\/div>\r\n                    <div class=\"text-content\">\r\n                        <h3>Demo site Uganda<\/h3>\r\n                        <p class=\"paragraph my\">\r\n                        Bidibidi Refugee Settlement and surroundings \u2013 Uganda Context: The 250 km2 Bidibidi Refugee Settlement is located since 2016\u2026                        <\/p>\r\n                        <div class=\"flex-sb\">\r\n                            <a href=\"https:\/\/sunny-project.eu\/fr\/demo-site\/demo-site-uganda\/\" class=\"btn read-more-btn\">Read More<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                             <div class=\"card-bg-color\">\r\n                    <div class=\"image-box\">\r\n                                        <img decoding=\"async\" src=\"https:\/\/sunny-project.eu\/wp-content\/uploads\/2024\/10\/20231109_151257-scaled.jpg\" alt=\"Demo site Rwanda\">\r\n                    <\/div>\r\n                    <div class=\"text-content\">\r\n                        <h3>Demo site Rwanda<\/h3>\r\n                        <p class=\"paragraph my\">\r\n                        Mahama Refugee Camp &#8211; Rwanda Contexte: The Mahama Refugee Camp, located in Rwanda&#8217;s Eastern Province since 2015, houses\u2026                        <\/p>\r\n                        <div class=\"flex-sb\">\r\n                            <a href=\"https:\/\/sunny-project.eu\/fr\/demo-site\/demo-site-rwanda\/\" class=\"btn read-more-btn\">Read More<\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n            <\/div>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;||0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; text_text_color=&#8221;#47BD93&#8243; background_color=&#8221;#E2F2E9&#8243; custom_padding=&#8221;0.3rem|0.7rem|0.2rem|0.7rem|false|true&#8221; custom_css_main_element=&#8221;width:max-content;||margin-inline:auto;&#8221; border_radii=&#8221;on|5px|5px|5px|5px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;] DEMO SITES [\/et_pb_text][et_pb_text module_id=&#8221;home-hero-title&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;] DEMO SITES MAP [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; disabled_on=&#8221;on|on|off&#8221; sticky_enabled=&#8221;0&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;] [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; width=&#8221;90%&#8221; width_last_edited=&#8221;on|phone&#8221; sticky_enabled=&#8221;0&#8243; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:divi\/placeholder \/-->","_et_gb_content_width":"","footnotes":""},"class_list":["post-49","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":13,"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":432,"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/pages\/49\/revisions\/432"}],"wp:attachment":[{"href":"https:\/\/sunny-project.eu\/fr\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}