Widget:Twentytwenty: Unterschied zwischen den Versionen

Aktuelle Version vom 29. September 2024, 18:20 Uhr

Das widget Twentytwenty stellt technisch die eigentliche Slider-Implementierung bereit und kann auch ohne die Vorlage:ImageSlider verwendet werden.

Die Implementierung des Widgets ist denkbar trivial. Folgende Dinge werden vom Widget getan um den Slider zu realisieren:

Laden von jQuery, jquery.event.move und jquery.twentytwenty.js.
Bereitstellung der benötigten CSS Styles.
Ausführen des jquery-TwentyTwenty-Plugins wie in der Dokumentation beschrieben.

Verwendung

{{#widget:twentytwenty|Bild1={{filepath:Bild1}}|Bild2={{filepath:Bild2}}|width=auto}}

Offene Punkte

Momentan wird jQuery's $.getScript Funktion genutzt um die benötigten weiteren Plugins zu laden. Dies geschieht momentan nicht sequenziell und ist daher langsam. In Zukunft sollten alle benötigten Scripte gleichzeitig geladen werden.
Moment werden die CSS-Syteles direkt eingebunden. Diese müssen jeden mal aktualisiert werden, wenn das TwentyTwenty-Plugin auf dem Server aktualisiert wird. In Zukunft sollte auch die dazugehörige CSS Datei einmalig, dynamisch geladen werden.
Momentan werden die Scripte sowie die CSS-Styles mehrfach geladen, wenn auf einer Seite das widget mehrfach eingebunden ist. In Zukunft sollten MediaWiki's Ressource-Loader genutzt werden um benötigte JavaScript- und CSS-Dateien nur einmalig pro Seite zu laden.
Das Laden der benötigten Scripte ist scheinbar ziemlich buggy. So kann es bei einigen Browser dazu kommen, dass der Slider gar nicht geladen wird. Ein setTimeout hat hier geholfen konnte das Problem aber nicht beheben. *Das Gesamte Widget sollte technisch überarbeitet werden und auf moderne Funktionalitäten von MediaWiki zurückgreifen. Leider sind diese nicht sehr verständlich dokumentiert.*

@@ Zeile 1: / Zeile 1: @@
 <noinclude>__NOTOC__
-TwentyTwenty-Image Widget
+Das widget ''Twentytwenty'' stellt technisch die eigentliche Slider-Implementierung bereit und kann auch ohne die [[#Vorlage ImageSlider|Vorlage:ImageSlider]] verwendet werden.
+Die Implementierung des Widgets ist denkbar trivial. Folgende Dinge werden vom Widget getan um den Slider zu realisieren:
+# Laden von [https://jquery.com/ jQuery], [https://plugins.jquery.com/event.move/ jquery.event.move] und [https://github.com/zurb/twentytwenty jquery.twentytwenty.js].
+# Bereitstellung der benötigten [https://github.com/zurb/twentytwenty/blob/master/css/twentytwenty.css CSS Styles].
+# Ausführen des jquery-TwentyTwenty-Plugins wie in der [https://github.com/zurb/twentytwenty?tab=readme-ov-file#multiple-instances Dokumentation beschrieben].
+== Verwendung ==
+<code><nowiki>
+{{#widget:twentytwenty|Bild1={{filepath:Bild1}}|Bild2={{filepath:Bild2}}|width=auto}}
+</nowiki></code>
+== Offene Punkte ==
+* Momentan wird jQuery's ''$.getScript'' Funktion genutzt um die benötigten weiteren Plugins zu laden. Dies geschieht momentan nicht sequenziell und ist daher langsam. In Zukunft sollten alle benötigten Scripte gleichzeitig geladen werden.
+* Moment werden die CSS-Syteles direkt eingebunden. Diese müssen jeden mal aktualisiert werden, wenn das TwentyTwenty-Plugin auf dem Server aktualisiert wird. In Zukunft sollte auch die dazugehörige CSS Datei einmalig, dynamisch geladen werden.
+* Momentan werden die Scripte sowie die CSS-Styles mehrfach geladen, wenn auf einer Seite das widget mehrfach eingebunden ist. In Zukunft sollten MediaWiki's Ressource-Loader genutzt werden um benötigte JavaScript- und CSS-Dateien nur einmalig pro Seite zu laden.
+* Das Laden der benötigten Scripte ist scheinbar ziemlich buggy. So kann es bei einigen Browser dazu kommen, dass der Slider gar nicht geladen wird. Ein ''setTimeout'' hat hier geholfen konnte das Problem aber nicht beheben. *Das Gesamte Widget sollte technisch überarbeitet werden und auf moderne Funktionalitäten von MediaWiki zurückgreifen. Leider sind diese nicht sehr verständlich dokumentiert.*
 </noinclude>
 <includeonly><style>
-.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+.twentytwenty-horizontal .twentytwenty-handle:before,
+.twentytwenty-horizontal .twentytwenty-handle:after,
+.twentytwenty-vertical .twentytwenty-handle:before,
+.twentytwenty-vertical .twentytwenty-handle:after {
 	content: " ";
 	display: block;
@@ Zeile 11: / Zeile 32: @@
 	-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
 	-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-	box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
+	box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+}
-.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
+.twentytwenty-horizontal .twentytwenty-handle:before,
+.twentytwenty-horizontal .twentytwenty-handle:after {
 	width: 3px;
 	height: 9999px;
 	left: 50%;
-	margin-left: -1.5px; }
+	margin-left: -1.5px;
+}
-.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
+.twentytwenty-vertical .twentytwenty-handle:before,
+.twentytwenty-vertical .twentytwenty-handle:after {
 	width: 9999px;
 	height: 3px;
 	top: 50%;
-	margin-top: -1.5px; }
+	margin-top: -1.5px;
+ }
-.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+.twentytwenty-before-label,
+.twentytwenty-after-label,
+.twentytwenty-overlay {
 	position: absolute;
 	top: 0;
@@ Zeile 31: / Zeile 56: @@
 	height: 100%; }
-.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
+.twentytwenty-before-label,
+.twentytwenty-after-label,
+.twentytwenty-overlay {
 	-webkit-transition-duration: 0.5s;
 	-moz-transition-duration: 0.5s;
-	transition-duration: 0.5s; }
+	transition-duration: 0.5s;
+}
-.twentytwenty-before-label, .twentytwenty-after-label {
+.twentytwenty-before-label,
+.twentytwenty-after-label {
 	-webkit-transition-property: opacity;
 	-moz-transition-property: opacity;
-	transition-property: opacity; }
+	transition-property: opacity;
+}
-.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+.twentytwenty-before-label:before,
+.twentytwenty-after-label:before {
 	color: white;
 	font-size: 13px;
-	letter-spacing: 0.1em; }
+	letter-spacing: 0.1em;
+}
-.twentytwenty-before-label:before, .twentytwenty-after-label:before {
+.twentytwenty-before-label:before,
+.twentytwenty-after-label:before {
 	position: absolute;
 	background: rgba(255, 255, 255, 0.2);
@@ Zeile 53: / Zeile 83: @@
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
-	border-radius: 2px; }
+	border-radius: 2px;
+}
-.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
+.twentytwenty-horizontal .twentytwenty-before-label:before,
+.twentytwenty-horizontal .twentytwenty-after-label:before {
 	top: 50%;
-	margin-top: -19px; }
+	margin-top: -19px;
+}
-.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
+.twentytwenty-vertical .twentytwenty-before-label:before,
+.twentytwenty-vertical .twentytwenty-after-label:before {
 	left: 50%;
 	margin-left: -45px;
 	text-align: center;
-	width: 90px; }
+	width: 90px;
+}
-.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
+.twentytwenty-left-arrow,
+.twentytwenty-right-arrow,
+.twentytwenty-up-arrow,
+.twentytwenty-down-arrow {
 	width: 0;
 	height: 0;
 	border: 6px inset transparent;
-	position: absolute; }
+	position: absolute;
+}
-.twentytwenty-left-arrow, .twentytwenty-right-arrow {
+.twentytwenty-left-arrow,
+.twentytwenty-right-arrow {
 	top: 50%;
-	margin-top: -6px; }
+	margin-top: -6px;
+}
-.twentytwenty-up-arrow, .twentytwenty-down-arrow {
+.twentytwenty-up-arrow,
+.twentytwenty-down-arrow {
 	left: 50%;
-	margin-left: -6px; }
+	margin-left: -6px;
+}
 .twentytwenty-container {
 	-webkit-box-sizing: content-box;
@@ Zeile 88: / Zeile 125: @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
-	-ms-user-select: none; }
+	-ms-user-select: none;
-	.twentytwenty-container img {
+}
-		max-width: 100%;
+.twentytwenty-container img {
-		position: absolute;
+	max-width: 100%;
-		top: 0;
+	position: absolute;
-		display: block; }
+	top: 0;
-	.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
+	display: block;
-		background: rgba(0, 0, 0, 0); }
+}
-		.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+.twentytwenty-container.active .twentytwenty-overlay,
-		.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+.twentytwenty-container.active :hover.twentytwenty-overlay {
-		.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+	background: rgba(0, 0, 0, 0);
-			opacity: 0; }
+}
-	.twentytwenty-container * {
+.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
-		-webkit-box-sizing: content-box;
+.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
-		-moz-box-sizing: content-box;
+.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
-		box-sizing: content-box; }
+.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
+	opacity: 0;
+}
+.twentytwenty-container * {
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
 .twentytwenty-before-label {
-	opacity: 0; }
+	opacity: 0;
-	.twentytwenty-before-label:before {
+}
-		content: attr(data-content); }
+.twentytwenty-before-label:before {
+	content: attr(data-content);
+}
 .twentytwenty-after-label {
-	opacity: 0; }
+	opacity: 0;
-	.twentytwenty-after-label:before {
+}
-		content: attr(data-content); }
+.twentytwenty-after-label:before {
+	content: attr(data-content);
+}
 .twentytwenty-horizontal .twentytwenty-before-label:before {
-	left: 10px; }
+	left: 10px;
+}
 .twentytwenty-horizontal .twentytwenty-after-label:before {
-	right: 10px; }
+	right: 10px;
+}
 .twentytwenty-vertical .twentytwenty-before-label:before {
-	top: 10px; }
+	top: 10px;
+}
 .twentytwenty-vertical .twentytwenty-after-label:before {
-	bottom: 10px; }
+	bottom: 10px;
+}
 .twentytwenty-overlay {
 	-webkit-transition-property: background;
@@ Zeile 132: / Zeile 177: @@
 	transition-property: background;
 	background: rgba(0, 0, 0, 0);
-	z-index: 25; }
+	z-index: 25;
-	.twentytwenty-overlay:hover {
+}
-		background: rgba(0, 0, 0, 0.5); }
+.twentytwenty-overlay:hover {
-		.twentytwenty-overlay:hover .twentytwenty-after-label {
+	background: rgba(0, 0, 0, 0.5);
-			opacity: 1; }
+}
-		.twentytwenty-overlay:hover .twentytwenty-before-label {
+.twentytwenty-overlay:hover .twentytwenty-after-label {
-			opacity: 1; }
+	opacity: 1;
+}
+.twentytwenty-overlay:hover .twentytwenty-before-label {
+	opacity: 1;
+}
 .twentytwenty-before {
-	z-index: 20; }
+	z-index: 20;
+}
 .twentytwenty-after {
-	z-index: 10; }
+	z-index: 10;
+}
 .twentytwenty-handle {
 	height: 38px;
@@ Zeile 162: / Zeile 210: @@
 	box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
 	z-index: 40;
-	cursor: pointer; }
+	cursor: pointer;
+}
 .twentytwenty-horizontal .twentytwenty-handle:before {
 	bottom: 50%;
@@ Zeile 169: / Zeile 217: @@
 	-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
 	-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-	box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+	box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+}
 .twentytwenty-horizontal .twentytwenty-handle:after {
 	top: 50%;
@@ Zeile 175: / Zeile 224: @@
 	-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
 	-moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-	box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+	box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+}
 .twentytwenty-vertical .twentytwenty-handle:before {
 	left: 50%;
@@ Zeile 182: / Zeile 231: @@
 	-webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
 	-moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-	box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+	box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+}
 .twentytwenty-vertical .twentytwenty-handle:after {
 	right: 50%;
@@ Zeile 188: / Zeile 238: @@
 	-webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
 	-moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-	box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
+	box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
+}
 .twentytwenty-left-arrow {
 	border-right: 6px solid white;
 	left: 50%;
-	margin-left: -17px; }
+	margin-left: -17px;
+}
 .twentytwenty-right-arrow {
 	border-left: 6px solid white;
 	right: 50%;
-	margin-right: -17px; }
+	margin-right: -17px;
+}
 .twentytwenty-up-arrow {
 	border-bottom: 6px solid white;
 	top: 50%;
-	margin-top: -17px; }
+	margin-top: -17px;
+}
 .twentytwenty-down-arrow {
 	border-top: 6px solid white;
 	bottom: 50%;
-	margin-bottom: -17px; }
+	margin-bottom: -17px;
- </style>
+}
- <div class="twentytwenty-container">
+</style><!--
+--><div class="twentytwenty-container">
      <img class="Bild1" src="<!--{$Bild1|escape:'html'}-->" width="<!--{$width}-->" />
      <img class="Bild2" src="<!--{$Bild2|escape:'html'}-->" width="<!--{$width}-->" />
-</div>
+</div><!--
-<script>
+--><script src="https://www.fuerthwiki.de/wiki/resources/lib/jquery/jquery.js" type="text/javascript"></script><!--
-    RLQ.push(function(){
+--><script>
-      $(function(){
+RLQ.push(function(){
-        $.getScript( "https://fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.event.move.js", function( data, textStatus, jqxhr ) {
+  setTimeout(function(){
-          $.getScript( "https://fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.twentytwenty.js", function( data, textStatus, jqxhr ) {
+      $.getScript( "https://www.fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.event.move.js", function( data, textStatus, jqxhr ) {
-            console.log("initializing ImageSlider");
+        $.getScript( "https://www.fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.twentytwenty.js", function( data, textStatus, jqxhr ) {
-            $('.twentytwenty-container').twentytwenty({
+          $('.twentytwenty-container').twentytwenty({
-              no_overlay: true
+            no_overlay: true
-            });
            });
          });
        });
-    });
+  }, 100);
+});
 </script></includeonly>