Embedding fixes

okfde · Nov 29, 2016 · 3ded278 · 3ded278
1 parent 5e4dc0d
commit 3ded278
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 13 deletions.
diff --git a/_config.yml b/_config.yml
@@ -148,6 +148,9 @@ t:
   embed:
     en: Embed
     de: Einbetten
+  withdetails:
+    en: with details
+    de: mit Details
   fullscreen:
     en: Fullscreen
     de: Vollbild
@@ -561,12 +564,12 @@ t:
                         </details>
                         <details>
                             <summary>Sind die Visualisierungen und der Code der OKF von anderen Akteuren nutzbar?</summary>
-                            <p>2030 Watch ist ein Open Source Projekt und der Software Code f&uuml;r das ganze Projekt ist <a href="https://www.github.com/okfde/2030watch.de">auf Github frei verf&uuml;gbar</a>. Alle, die interessiert sind, k&ouml;nnen die Software frei nutzen und f&uuml;r ihre Zwecke ver&auml;ndern oder weiterentwickeln. Mittelfristig wird die OKF auch die einzelnen Visualisierungen embeddable machen, so dass beispielsweise der L&auml;ndervergleich oder die Visualisierung f&uuml;r einen Indikator von Interessierten in ihre Webseiten integriert werden kann.</p>
+                            <p>2030 Watch ist ein Open Source Projekt und der Software Code f&uuml;r das ganze Projekt ist <a href="https://www.github.com/okfde/2030watch.de">auf Github frei verf&uuml;gbar</a>. Alle, die interessiert sind, k&ouml;nnen die Software frei nutzen und f&uuml;r ihre Zwecke ver&auml;ndern oder weiterentwickeln. Die einzelne Visualisierungen sind auch embeddable, so dass beispielsweise der L&auml;ndervergleich oder die Visualisierung f&uuml;r einen Indikator von Interessierten in ihre Webseiten integriert werden kann.</p>
                         </details>
                         <details>
                             <summary>Was sind Datenpaten?</summary>
                             <p>Datenpaten sind zivilgesellschaftliche Organisationen oder wissenschaftliche Institutionen, die zu einem SDG Unterziel &uuml;ber gro&szlig;e Expertise verf&uuml;gen und ein Interesse daran haben, dass es f&uuml;r die Erreichung dieses Unterziels eine transparente Erfolgskontrolle gibt. Die Rolle von Datenpaten in 2030 Watch ist es, einen oder mehrere Indikatoren vorzuschlagen und mit der OKF abzustimmen. Sobald ein Indikator entschieden ist, legen die Datenpaten einen Zielwert fest, der f&uuml;r diesen Indikator bis 2030 erreicht werden sollte. Die Datenpaten legen auch die f&uuml;nf Bewertungsstufen von sehr gut bis sehr schlecht fest und begr&uuml;nden ihre Bewertungsmethode. Dar&uuml;ber hinaus stellen sie die Daten f&uuml;r &ldquo;ihren&rdquo; Indikator zur Verf&uuml;gung, die h&ouml;chstens einmal im Jahr aktualisiert werden sollen.</p>
-                            <p>Auf der Webseite werden die Datenpaten mit ihrem Logo, Kontaktinformationen, Links und Kurzportrait pr&auml;sentiert. Sobald die Visualisierungen von 2030 Watch embeddable sind, k&ouml;nnen Datenpaten diese Visualisierungen auch f&uuml;r ihre eigenen Zwecke nutzen.</p>
+                            <p>Auf der Webseite werden die Datenpaten mit ihrem Logo, Kontaktinformationen, Links und Kurzportrait pr&auml;sentiert. Datenpaten k&ouml;nnen auch die Visualisierungen f&uuml;r ihre eigenen Zwecke nutzen.</p>
                             <p>Eine Datenpatenschaft erm&ouml;glicht es zivilgesellschaftlichen Organisationen und wissenschaftlichen Instituten die Umsetzung &ldquo;ihres&rdquo; Unterziels zu f&ouml;rdern, ohne dabei alle Indikatoren auf 2030 Watch gutzuhei&szlig;en. Damit wird die &Uuml;bernahme politischer Verantwortung f&uuml;r die Erfolgskontrolle dezentralisiert und - so die Hoffnung der OKF - erleichtert.</p>
                             <p>Datenpaten unterzeichnen mit der OKF f&uuml;r mindestens ein Jahr ein Memorandum of Understanding ab, um die Zusammenarbeit zu dokumentieren.</p>
                         </details>
@@ -697,12 +700,12 @@ t:
                         </details>
                         <details>
                             <summary>Are the visualisations and the code for 2030 Watch open? </summary>
-                            <p>2030 Watch is an open source project and the code for the project is <a href="https://www.github.com/okfde/2030watch.de">freely available on Github</a>. Everybody can use the code for their own purpose at no cost. In the mid term the project will also provide widgets to embed the visualisations like the country comparison on other websites.</p>
+                            <p>2030 Watch is an open source project and the code for the project is <a href="https://www.github.com/okfde/2030watch.de">freely available on Github</a>. Everybody can use the code for their own purpose at no cost. The visualisations like the country comparison can also be embedded on other websites.</p>
                         </details>
                         <details>
                             <summary>What are data partners?</summary>
                             <p>Data partners are civil society organisations or research institutes with a lot of expertise on a specific SDG target and with an interest in a transparent monitoring of the implementation of this target. The role of data partners in 2030 Watch is to propose one or several indicators in consultation with the OKF. As soon as an indicator is chosen, the data partners determine the target value and the thresholds for the 5 rating categories. This decision is supported by arguments and evidence. The data partners also provide 2030 Watch with the data for their adopted indicator in machine readable formats once a year or every other year depending on data availability.</p>
-                            <p>On the 2030 Watch website the data partners are presented with logo, contact information, short portrait and links. As soon as embeddable visualisations are available data partners can use these widgets on their own websites. A data partnership enables civil society organisations or research institutes to promote &ldquo;their&rdquo; target without having to endorse all indicators on 2030 Watch. Political responsibility is thus decentralised and our hope is that it is also facilitated through this approach. Data partners sign a Memorandum of Understanding for 1 year to document the collaboration.</p>
+                            <p>On the 2030 Watch website the data partners are presented with logo, contact information, short portrait and links. Data partners can use the visualisations on their own websites. A data partnership enables civil society organisations or research institutes to promote &ldquo;their&rdquo; target without having to endorse all indicators on 2030 Watch. Political responsibility is thus decentralised and our hope is that it is also facilitated through this approach. Data partners sign a Memorandum of Understanding for 1 year to document the collaboration.</p>
                         </details>
                         <details>
                             <summary>What is the scientific advisory board?</summary>

diff --git a/_includes/js.html b/_includes/js.html
@@ -25,7 +25,7 @@
     {% if page.page == "methodik" %}
         <script src="/static/js/frameworks/details-element-polyfill.js"></script> 
     {% endif %}   
-    {% if page.page == "einzelindikatoren" or page.page == "einzelindikatoren_map" or page.page == "einzelindikatoren_embed" %}
+    {% if page.page contains "einzelindikatoren" %}
         <script src="/static/js/frameworks/underscore.js"></script>  
         <script src="/static/js/misc.js"></script> 
         <script>

diff --git a/_includes/snippets/embed.html b/_includes/snippets/embed.html
@@ -4,8 +4,14 @@
     {% assign share_url = include.url | prepend: site.url %}
 {% endif %}
 <p class="text-{% if include.align %}{{ include.align }}{% else %}right{% endif %}">
-    <small><strong>{{ site.t.embed[site.active_lang] }}:</strong>&nbsp;<span style="font-family: monospace;"><input style="width: 50%;" type="text" autofocus="autofocus" onfocus="this.select();" value="&lt;iframe width=&quot;800&quot; height=&quot;600&quot; src=&quot;{{ site.url }}{{ include.url }}embed[[link_post]]{% if include.params %}?{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;" /></span></small>
-    {% if include.break %}<br>{% endif %}
-    <small><strong>{{ site.t.share[site.active_lang] }}:</strong></small>&nbsp;<a target="_self" title="{{ site.t.sharevis[site.active_lang] }} Twitter" href="https://twitter.com/intent/tweet?text={{ site.t.tweettext[site.active_lang] }}:%20{{ share_url }}{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}&f=f" target="_blank"><i class="fa fa-fw fa-twitter-square"></i></a><a target="_self" title="{{ site.t.sharevis[site.active_lang] }} Facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}" target="_blank"><i class="fa fa-fw fa-facebook-square"></i></a><a target="_self" title="{{ site.t.sharevis[site.active_lang] }} Google Plus" href="https://plus.google.com/share?url={{ share_url }}{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i></a> | <a target="_self" "alt="{{ site.t.fullscreen[site.active_lang] }}" title="{{ site.t.fullscreen[site.active_lang] }}" href="{{ include.url }}embed[[link_post]]/{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}"><i class="fa fa-fw fa-arrows-alt"></i></a>
+    <small><div style="width: 20%; display: inline-block;"><strong>{{ site.t.embed[site.active_lang] }}:</strong>&nbsp;</div><span style="font-family: monospace;"><input style="width: 50%;" type="text" autofocus="autofocus" onfocus="this.select();" value="&lt;iframe width=&quot;800&quot; height=&quot;600&quot; src=&quot;{{ share_url }}embed{% if include.angular %}[[link_post]]{% endif %}{% if include.params %}?{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;" /></span></small>
+
+    {% if include.simpleoption %}
+    <br>
+    <small><div style="width: 20%; display: inline-block;"><strong>{{ site.t.embed[site.active_lang] }} ({{ site.t.withdetails[site.active_lang] }}):</strong>&nbsp;</div><span style="font-family: monospace;"><input style="width: 50%;" type="text" autofocus="autofocus" onfocus="this.select();" value="&lt;iframe width=&quot;800&quot; height=&quot;600&quot; src=&quot;{{ share_url }}embed_details{% if include.angular %}[[link_post]]{% endif %}{% if include.params %}?{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;" /></span></small>
+    {% endif %}
+
+    {% if include.break %}<br>{% else %}&nbsp;&nbsp;{% endif %}
+    <small><strong>{{ site.t.share[site.active_lang] }}:</strong></small>&nbsp;<a target="_self" title="{{ site.t.sharevis[site.active_lang] }} Twitter" href="https://twitter.com/intent/tweet?text={{ site.t.tweettext[site.active_lang] }}:%20{{ share_url }}{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}&f=f" target="_blank"><i class="fa fa-fw fa-twitter-square"></i></a><a target="_self" title="{{ site.t.sharevis[site.active_lang] }} Facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}" target="_blank"><i class="fa fa-fw fa-facebook-square"></i></a><a target="_self" title="{{ site.t.sharevis[site.active_lang] }} Google Plus" href="https://plus.google.com/share?url={{ share_url }}{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i></a> | <a target="_self" "alt="{{ site.t.fullscreen[site.active_lang] }}" title="{{ site.t.fullscreen[site.active_lang] }}" href="{{ include.url }}embed{% if include.angular %}[[link_post]]{% endif %}/{% if include.params %}{{ include.params }}{% endif %}{% if include.angular %}{% if include.params %}&{% else %}?{% endif %}[[dynamic_params]]{% endif %}"><i class="fa fa-fw fa-arrows-alt"></i></a>
 </p>
 
diff --git a/_includes/visualizations/indicator.html b/_includes/visualizations/indicator.html
@@ -3,6 +3,7 @@
 {% else %}
   {% assign chartType = 'bar' %}
 {% endif %}
+{% if chartType == 'map' %}{% assign f_url = page.url | replace: 'index_map/', '' %}{% else %}{% assign f_url = page.url %}{% endif %}
 <div ng-app="SingleIndicatorVizApp" ng-controller="SingleIndicatorCtrl">
     <div class="row">
         <div>
@@ -27,7 +28,7 @@
                                           <span class="caret"></span>
                                         </button>
                                         <ul class="dropdown-menu">
-                                          {% if chartType == 'map' %}<li><a class="dropdownlink" target="_self" href="../?id=[[switcher]]">{{ site.t.bars[site.active_lang] }}</a></li>
+                                          {% if chartType == 'map' %}<li><a class="dropdownlink" target="_self" href="./?id=[[switcher]]">{{ site.t.bars[site.active_lang] }}</a></li>
                                           {% else %}<li><a class="dropdownlink" target="_self" href="./index_map?id=[[switcher]]">{{ site.t.map[site.active_lang] }}</a></li>
                                           {% endif %}
                                         </ul>
@@ -44,11 +45,10 @@
                     <div id="highchartsPane" style="margin-bottom:30px; margin-top:30px; width:100%; height:550px;"></div>
                     {% endif %}
                     <p ng-bind="indicator.long_indicator_description.{{ site.active_lang }}.text"></p>
+                    {% include snippets/embed.html url=f_url align='left' simpleoption=true angular=true %}
                 </div>
                 {% if include.page != 'einzelindikatoren_embed' %}
                     <div class="col-md-3">
-                        {% if chartType == 'map' %}{% assign f_url = '' %}{% else %}{% assign f_url = page.url %}{% endif %}
-                        {% include snippets/embed.html url=f_url align='left' break=true angular=true %}
                         <h3 style="text-align: left;">{{ site.t.datasponsor[site.active_lang] }}</h3>
                         <div style="text-align: center;">
                           <div ng-if="!indicator.sponsor" style="position: relative; height: 250px; width: 250px; background: #003a55; border-radius: 20px;">

diff --git a/monitoring/einzelindikatoren/embed_details.html b/monitoring/einzelindikatoren/embed_details.html
@@ -0,0 +1,22 @@
+---
+layout: embeds
+slug: monitoring
+page: einzelindikatoren_embed_details
+js:
+    - frameworks/angular.min
+    - frameworks/d3.min
+    - frameworks/d3.tip
+    - frameworks/underscore
+    - frameworks/jquery.min
+    - frameworks/typeahead
+    - jquery.dynatable
+    - database
+    - singleIndicators
+    - tipsy
+    - indicatorUtils
+---
+<section>
+    <div class="container big-container">
+        {% include visualizations/indicator.html page=page.page %}
+    </div>
+</section>
diff --git a/monitoring/einzelindikatoren/embed_details_map.html b/monitoring/einzelindikatoren/embed_details_map.html
@@ -0,0 +1,23 @@
+---
+layout: embeds
+slug: monitoring
+page: einzelindikatoren_embed_details
+js:
+    - frameworks/angular.min
+    - frameworks/d3.min
+    - frameworks/d3.tip
+    - frameworks/underscore
+    - frameworks/jquery.min
+    - frameworks/typeahead
+    - frameworks/topojson.min
+    - jquery.dynatable
+    - database
+    - singleIndicators
+    - tipsy
+    - indicatorUtils
+---
+<section>
+    <div class="container big-container">
+        {% include visualizations/indicator.html page=page.page viz='map' %}
+    </div>
+</section>
diff --git a/monitoring/index.html b/monitoring/index.html
@@ -27,10 +27,10 @@ <h5 class="text-center">{{ site.t.germanysimplementation[site.active_lang] }} </
                         <p>
                             {{ site.t.longmainviztext[site.active_lang] }} 
                         </p>
-                        {% include snippets/embed.html url=page.url %}
                     </div>
                 </div>
                 {% include visualizations/main_visualization.html %}
+                {% include snippets/embed.html url=page.url %}
             </div>
         </div>
     </div>

diff --git a/monitoring/laendervergleich/index.html b/monitoring/laendervergleich/index.html
@@ -31,10 +31,10 @@ <h2>{{ site.t.countrycomparison[site.active_lang] }}</h2>
 						<p>
 							{{ site.t.countrycompintrotext[site.active_lang] }}
 						</p>
-						{% include snippets/embed.html url=page.url %}
 					</div>
 				</div>
                 {% include visualizations/country_comparison.html %}
+                {% include snippets/embed.html url=page.url %}
             </div>
         </div>
     </div>