Merge pull request #24 from msteudtn/version-0.6-BMBF-PTF-APx

Version 0.6 bmbf ptf a px

data/definition.js

@@ -319,7 +319,7 @@ var design = ["default.css","buttons-colors-on.css", "progressbar.css"];
 	********************************************************************
 
 	var addons = ["extras/addon_results_textfilter_by_button.js"]
-	var addons = ["extras/addon_results_textfilter_by_button.js", "extras/addon_check_iframe_resize.js", "extras/addon_whats_your_favorite_party.js"]
+	var addons = ["extras/addon_results_textfilter_by_button.js", "extras/addon_check_iframe_resize_same_domain.js", "extras/addon_whats_your_favorite_party.js"]
 	var addons = []
 	var addons = ["my_folder/my_file.js"]	
 

extras/addon_check_iframe_resize_cross_domain.js

@@ -0,0 +1,74 @@
+/*
+// EINSTELLUNGEN / SETTINGS
+// http://www.mat-o-wahl.de
+
+* Hauptseite / Main page
+	<script src="https://mat-o-wahl.de/iframe/extras/addon_check_iframe_resize_cross_domain.js"></script>
+	[...]
+	<iframe id="myIframe" src="https://meineSeite.de/mat-o-wahl/index.html" style="min-width:100%;" loading="lazy"></iframe>
+	
+	<script>
+		window.onload = function() {
+			fnMatoWahlCrossDomainEventListener("myIframe");
+		}
+	</script>
+
+* Mat-o-Wahl/Data/Definition.js
+
+ 
+
+// FUNKTION / FUNCTION
+
+* WENN der Mat-o-Wahl als <iframe> eingebunden wurde, prüft das Skript, 
+  ob sich die Höhe ändert und ändert auch die Höhe des Frames.
+  
+* IF the Mat-o-Wahl was included as a <iframe>, this script checks the height
+  and adapts it to the current height
+
+  
+// EINSCHRÄNKUNGEN / LIMITATIONS
+
+* Bitte prüfen ob nicht schon eine CSS height existiert.
+  Ein   style="width:100%"   im <iframe> könnte hilfreich sein.
+  Der Mat-o-Wahl nutzt die Bootstrap CONTAINER-FLUID-class. Es könnte zu unschönen Rändern auf dem Smartphone kommen.
+  Das Skript dafür gedacht, wenn Mat-o-Wahl und die Hauptseite mit <iframe> auf UNTERSCHIEDLICHEN Domains liegen.
+  Die Höhe geht nicht wieder zurück.
+   
+* Check your CSS on the <iframe> if you have "height" already.
+  A   style="width:100%"   in the <iframe> might be useful.
+  Mat-o-Wahl uses the Bootstrap CONTAINER-FLUID-class. There might be an ugly gap on the left and right side on small screens (phones)
+  The script is intended for a setting where Mat-o-Wahl and the <iframe>-main page are on DIFFERENT domains.
+  The height doesn't go back down.  
+
+
+// Verwandte Links / Related links
+* Github issue: https://github.com/msteudtn/Mat-O-Wahl/issues/13
+* Original source: https://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript
+
+*/
+
+
+function fnMatoWahlCrossDomainEventListener(iFrameID) {
+
+	window.addEventListener('message', function(ereignis) {
+	  var meinIframe = document.getElementById(iFrameID);
+	  var eventName = ereignis.data[0];
+	  var data = ereignis.data[1];
+	  switch(eventName) {
+	 case 'setHeight':
+	meinIframe.height = data
+	break;
+	  }
+	}, false);
+
+}
+
+
+window.onload = function() {
+	window.setInterval(resizeCrossDomain, 1500)
+	}
+
+function resizeCrossDomain() {
+  var height = document.getElementsByTagName("html")[0].scrollHeight;
+  parent.postMessage(["setHeight", height], "*"); 
+}

extras/addon_check_iframe_resize.js → extras/addon_check_iframe_resize_same_domain.js

@@ -3,18 +3,25 @@
 // http://www.mat-o-wahl.de
 
 // FUNKTION / FUNCTION
+
 * WENN der Mat-o-Wahl als <iframe> eingebunden wurde, prüft das Skript, 
-  ob sich die Höhe ändert und ändert auch die Höhe des Frames.
+  ob sich die Höhe ändert und ändert (dynamisch) auch die Höhe des Frames.
+
 * IF the Mat-o-Wahl was included as a <iframe>, this script checks the height
   and adapts it to the current height
   
 // EINSCHRÄNKUNGEN / LIMITATIONS
+
 * Bitte prüfen ob nicht schon eine CSS height existiert.
   Ein   style="width:100%"   im <iframe> könnte hilfreich sein.
-  Der Mat-o-Wahl nutzt die Bootstrap CONTAINER-FLUID-class. Es könnte zu unschönen Rändern kommen.   
+  Der Mat-o-Wahl nutzt die Bootstrap CONTAINER-FLUID-class. Es könnte zu unschönen Rändern auf dem Smartphone kommen.
+  Das Skript funktioniert nur, wenn Mat-o-Wahl und die Hauptseite mit <iframe> auf der gleichen Domain liegen.
+   
 * Check your CSS on the <iframe> if you have "height" already.
   A   style="width:100%"   in the <iframe> might be useful.
   Mat-o-Wahl uses the Bootstrap CONTAINER-FLUID-class. There might be an ugly gap on the left and right side on small screens (phones)
+  The script only works, if Mat-o-Wahl and the <iframe>-main page are on the same domain. 
+
 
 // Verwandte Links / Related links
 * Github issue: https://github.com/msteudtn/Mat-O-Wahl/issues/13

i18n/i18n_de.js

@@ -2,11 +2,11 @@
 
 // Buttons
 var TEXT_START = "Los geht's!"
-var TEXT_VOTING_PRO = "[✔] Stimme zu"
-var TEXT_VOTING_NEUTRAL = "[◯] Egal/Weiß nicht"
-var TEXT_VOTING_CONTRA = "[✖] Stimme nicht zu"
-var TEXT_VOTING_SKIP = "[↷] Überspringen"
-var TEXT_VOTING_DOUBLE = "[x2] Pers. wichtiges Thema"
+var TEXT_VOTING_PRO = "Stimme zu"
+var TEXT_VOTING_NEUTRAL = "Egal/Weiß nicht"
+var TEXT_VOTING_CONTRA = "Stimme nicht zu"
+var TEXT_VOTING_SKIP = "Überspringen"
+var TEXT_VOTING_DOUBLE = "Doppelt gewichten"
 
 // Statistic
 var TEXT_ALLOW_STATISTIC = "Anonyme Auswertung (Wahlprognose) erlauben. Siehe <a href='"+imprintPrivacyUrl+"' target='_blank'>Datenschutzerklärung</a>."

i18n/i18n_en.js

@@ -2,17 +2,17 @@
 
 // Buttons
 var TEXT_START = "Let's start"
-var TEXT_VOTING_PRO = "[✔] Agree"
-var TEXT_VOTING_NEUTRAL = "[◯] No opinion"
-var TEXT_VOTING_CONTRA = "[✖] Disagree"
-var TEXT_VOTING_SKIP = "[↷] Skip (don't count)"
-var TEXT_VOTING_DOUBLE = "[x2] Very important to me"
+var TEXT_VOTING_PRO = "Agree"
+var TEXT_VOTING_NEUTRAL = "No opinion"
+var TEXT_VOTING_CONTRA = "Disagree"
+var TEXT_VOTING_SKIP = "Skip (don't count)"
+var TEXT_VOTING_DOUBLE = "Very important to me"
 
 // Statistic
 var TEXT_ALLOW_STATISTIC = "Allow anonymous analytics (prognosis)? See <a href='"+imprintPrivacyUrl+"' target='_blank'>privacy statement</a>."
 
 // Footer
-var TEXT_IMPRINT = "[ยง] Legal Notice"
+var TEXT_IMPRINT = "[§] Legal Notice"
 var TEXT_RESTART = "[&#x21BB;] Restart questionnaire"
 
 // Results

index.html

@@ -141,6 +141,10 @@ <h2>Unter&uuml;berschrift <br /> Second headline</h2>
 		<section id="sectionVotingButtons">
 
 			<div class="row">
+				<div class="col">
+					<button type="button" id="votingDouble" onclick="fnChangeVotingDouble()" class="btn btn-outline-dark btn-lg btn-block">[x2] Important</button>
+				</div>
+
 				<div class="col">
 					<button type="button" id="votingPro" class="btn btn-success btn-lg btn-block">[&#x2714;] Pro</button>
 				</div>
@@ -157,12 +161,9 @@ <h2>Unter&uuml;berschrift <br /> Second headline</h2>
 				<div class="w-100"></div>
 
 				<div class="col">
-					<button type="button" id="votingSkip" class="btn btn-secondary btn-lg btn-block">[&#x21B7;] Skip</button>
+					<button type="button" id="votingSkip" class="btn btn-secondary btn float-right">[&#x21B7;] Skip</button>
 				</div>
 
-				<div class="col">
-					<button type="button" id="votingDouble" onclick="fnChangeVotingDouble()" class="btn btn-outline-dark btn-lg btn-block">[x2] Important</button>
-				</div>
 			</div> 
 
 		</section>
@@ -172,10 +173,10 @@ <h2>Unter&uuml;berschrift <br /> Second headline</h2>
 
 	<nav id="sectionNavigation">	
 
-		<div class="row">
+		<div class="row fixed-top" style="width: inherit; top: 0%; left: 50%; transform: translateX(-50%); visibility: hidden; display: none;"> 
 			<div class="col">
 
-				<div class="progress">
+				<div class="progress" style="height: 2px;">
 					<div class="progress-bar" id="progress-bar" style="width:10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
 				</div>
 

quicktest.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
   <title>Mat-O-Wahl - Test</title>
   <meta charset="utf-8">

results.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
   <title>Mat-O-Wahl</title>
   <meta charset="utf-8">

system/changelog.md

@@ -3,9 +3,8 @@
 ## To Do (einfach)
 
 - Ueberlegung zum Aendern der Lizenz von GPL zu AGPL - https://de.wikipedia.org/wiki/GNU_Affero_General_Public_License
-- Pruefen: Unterschiede beim Einlesen von MAC-Dateien zu WIN oder *IX-Dateien?
+- Pruefen: Unterschiede beim Einlesen von CSV-Dateien zwischen Windows, Mac und Unix?
 - Hilfe-PDF aktualisieren
-- QUICKTEST aktualisieren
 
 
 ## To Do (etwas komplizierter)
@@ -24,22 +23,34 @@
 - Technik: Update Bootstrap to latest version
 - Design: jumpToQuestion-Tabelle unter den Fragen: per Bootstrap-Gridsystem automatisch skalieren
 - Design: jumpToQuestion-Tabelle unter den Fragen: Alternative Ansicht: Keine Nummerierung (Mat-o-Wahl), sondern Punkte und Sterne (Wahl-o-Mat)
-- Technik: Include Videos in questions or party-answers
-- Technik: Add Instagram Button (and maybe some more Social Media)
+- Technik: Include videos in questions or party-answers
+- Technik: Add Instagram Button (and maybe some more Social Media) ... or outsource via https://github.com/heiseonline/shariff
 
 
 ## To Do (Bugfixes)
 
 - Technik: if you skip questions, you can't change it later in the "resultsLongTable". GENERAL.JS -> fnToggleSelfPosition()
-- Technik: if DEFINITION.JS / "var statsRecord = 0" the slide-button is still visible -> remove!
-- Technik: Addon_Results_Textfilter only works on "old" table "#resultsByThesis" but not yet on "#resultsByParty" (new since v.0.6)
 
 
 ## Versions:
 
+### 0.6.0.20210605-BMBF-PTF-APx
 
-### 0.6.0.2021xxxx-BMBF-PTF-AP4
-- To Do: UX improvements
+- **NEW:** EXTRAS/ADDON_CHECK_IFRAME_RESIZE_SAME_DOMAIN.JS
+- **NEW:** EXTRAS/ADDON_CHECK_IFRAME_RESIZE_CROSS_DOMAIN.JS
+  - https://github.com/msteudtn/Mat-O-Wahl/issues/13 - iframe mit variabler Höhe ermöglichen
+  - include Mat-o-Wahl via iframe in an existing site 
+  - can be on the same domain or a different domain   
+  - currently two separate scripts. But should be included into one script eventually
+
+
+### 0.6.0.20210514-BMBF-PTF-AP4
+
+- UX improvements
+  - i18n 
+    - **Removed the icons** (like [x] [o]) from the buttons. Site looks "quieter", now. 
+    - **Re-arranged the order of the buttons** and put "count twice" in front, so people can click it before.
+    - Progress bar is hidden now. Progress is already shown in the table with the numbers below the questions.
 
 
 ### 0.6.0.2021xxxx-BMBF-PTF-AP3

system/general.js

@@ -3,7 +3,7 @@
 // License: GPL 3
 // Mathias Steudtner http://www.medienvilla.com
 
-var version = "0.6.0.20210423-BMBF-PTF-AP2"
+var version = "0.6.0.20210605-BMBF-PTF-APx"
 
 // Globale Variablen
 var arQuestionsShort = new Array();	// Kurzform der Fragen: Atomkraft, Flughafenausbau, ...