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>
+<includeonly><style>
-  <style>
+.twentytwenty-horizontal .twentytwenty-handle:before,
-  .twentytwenty-wrapper {
+.twentytwenty-horizontal .twentytwenty-handle:after,
-    -webkit-touch-callout: none; /* iOS Safari */
+.twentytwenty-vertical .twentytwenty-handle:before,
-      -webkit-user-select: none; /* Safari */
+.twentytwenty-vertical .twentytwenty-handle:after {
-       -khtml-user-select: none; /* Konqueror HTML */
+	content: " ";
-         -moz-user-select: none; /* Firefox */
+	display: block;
-          -ms-user-select: none; /* Internet Explorer/Edge */
+	background: white;
-              user-select: none; /* Non-prefixed version, currently
+	position: absolute;
-                                    supported by Chrome and Opera */
+	z-index: 30;
-  }
+	-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-  .twentytwenty-overlay {
+	-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-    display: none;
+	box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-  }
+}
-  </style>
+.twentytwenty-horizontal .twentytwenty-handle:before,
+.twentytwenty-horizontal .twentytwenty-handle:after {
-  <div class="twentytwenty-container">
+	width: 3px;
-    <img src="<!--{$Bild1}-->" />
+	height: 9999px;
-    <img src="<!--{$Bild2}-->" />
+	left: 50%;
-  </div>
+	margin-left: -1.5px;
+}
+.twentytwenty-vertical .twentytwenty-handle:before,
+.twentytwenty-vertical .twentytwenty-handle:after {
+	width: 9999px;
+	height: 3px;
+	top: 50%;
+	margin-top: -1.5px;
+ }
+.twentytwenty-before-label,
+.twentytwenty-after-label,
+.twentytwenty-overlay {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%; }
-  <script>
+.twentytwenty-before-label,
-    RLQ.push(function(){
+.twentytwenty-after-label,
-      $(function(){
+.twentytwenty-overlay {
-        $.getScript( "https://fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.twentytwenty.js", function( data, textStatus, jqxhr ) {
+	-webkit-transition-duration: 0.5s;
-          console.log("initializing ImageSlider");
+	-moz-transition-duration: 0.5s;
-           $('.twentytwenty-container').twentytwenty();
+	transition-duration: 0.5s;
+}
+.twentytwenty-before-label,
+.twentytwenty-after-label {
+	-webkit-transition-property: opacity;
+	-moz-transition-property: opacity;
+	transition-property: opacity;
+}
+.twentytwenty-before-label:before,
+.twentytwenty-after-label:before {
+	color: white;
+	font-size: 13px;
+	letter-spacing: 0.1em;
+}
+.twentytwenty-before-label:before,
+.twentytwenty-after-label:before {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.2);
+	line-height: 38px;
+	padding: 0 20px;
+	-webkit-border-radius: 2px;
+	-moz-border-radius: 2px;
+	border-radius: 2px;
+}
+.twentytwenty-horizontal .twentytwenty-before-label:before,
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+	top: 50%;
+	margin-top: -19px;
+}
+.twentytwenty-vertical .twentytwenty-before-label:before,
+.twentytwenty-vertical .twentytwenty-after-label:before {
+	left: 50%;
+	margin-left: -45px;
+	text-align: center;
+	width: 90px;
+}
+.twentytwenty-left-arrow,
+.twentytwenty-right-arrow,
+.twentytwenty-up-arrow,
+.twentytwenty-down-arrow {
+	width: 0;
+	height: 0;
+	border: 6px inset transparent;
+	position: absolute;
+}
+.twentytwenty-left-arrow,
+.twentytwenty-right-arrow {
+	top: 50%;
+	margin-top: -6px;
+}
+.twentytwenty-up-arrow,
+.twentytwenty-down-arrow {
+	left: 50%;
+	margin-left: -6px;
+}
+.twentytwenty-container {
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+	z-index: 0;
+	overflow: hidden;
+	position: relative;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+.twentytwenty-container img {
+	max-width: 100%;
+	position: absolute;
+	top: 0;
+	display: block;
+}
+.twentytwenty-container.active .twentytwenty-overlay,
+.twentytwenty-container.active :hover.twentytwenty-overlay {
+	background: rgba(0, 0, 0, 0);
+}
+.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
+.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
+.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
+.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;
+}
+.twentytwenty-before-label:before {
+	content: attr(data-content);
+}
+.twentytwenty-after-label {
+	opacity: 0;
+}
+.twentytwenty-after-label:before {
+	content: attr(data-content);
+}
+.twentytwenty-horizontal .twentytwenty-before-label:before {
+	left: 10px;
+}
+.twentytwenty-horizontal .twentytwenty-after-label:before {
+	right: 10px;
+}
+.twentytwenty-vertical .twentytwenty-before-label:before {
+	top: 10px;
+}
+.twentytwenty-vertical .twentytwenty-after-label:before {
+	bottom: 10px;
+}
+.twentytwenty-overlay {
+	-webkit-transition-property: background;
+	-moz-transition-property: background;
+	transition-property: background;
+	background: rgba(0, 0, 0, 0);
+	z-index: 25;
+}
+.twentytwenty-overlay:hover {
+	background: rgba(0, 0, 0, 0.5);
+}
+.twentytwenty-overlay:hover .twentytwenty-after-label {
+	opacity: 1;
+}
+.twentytwenty-overlay:hover .twentytwenty-before-label {
+	opacity: 1;
+}
+.twentytwenty-before {
+	z-index: 20;
+}
+.twentytwenty-after {
+	z-index: 10;
+}
+.twentytwenty-handle {
+	height: 38px;
+	width: 38px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin-left: -22px;
+	margin-top: -22px;
+	border: 3px solid white;
+	-webkit-border-radius: 1000px;
+	-moz-border-radius: 1000px;
+	border-radius: 1000px;
+	-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);
+	z-index: 40;
+	cursor: pointer;
+}
+.twentytwenty-horizontal .twentytwenty-handle:before {
+	bottom: 50%;
+	margin-bottom: 22px;
+	-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);
+}
+.twentytwenty-horizontal .twentytwenty-handle:after {
+	top: 50%;
+	margin-top: 22px;
+	-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);
+}
+.twentytwenty-vertical .twentytwenty-handle:before {
+	left: 50%;
+	margin-left: 22px;
+	-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);
+}
+.twentytwenty-vertical .twentytwenty-handle:after {
+	right: 50%;
+	margin-right: 22px;
+	-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);
+}
+.twentytwenty-left-arrow {
+	border-right: 6px solid white;
+	left: 50%;
+	margin-left: -17px;
+}
+.twentytwenty-right-arrow {
+	border-left: 6px solid white;
+	right: 50%;
+	margin-right: -17px;
+}
+.twentytwenty-up-arrow {
+	border-bottom: 6px solid white;
+	top: 50%;
+	margin-top: -17px;
+}
+.twentytwenty-down-arrow {
+	border-top: 6px solid white;
+	bottom: 50%;
+	margin-bottom: -17px;
+}
+</style><!--
+--><div class="twentytwenty-container">
+    <img class="Bild1" src="<!--{$Bild1|escape:'html'}-->" width="<!--{$width}-->" />
+    <img class="Bild2" src="<!--{$Bild2|escape:'html'}-->" width="<!--{$width}-->" />
+</div><!--
+--><script src="https://www.fuerthwiki.de/wiki/resources/lib/jquery/jquery.js" type="text/javascript"></script><!--
+--><script>
+RLQ.push(function(){
+  setTimeout(function(){
+      $.getScript( "https://www.fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.event.move.js", function( data, textStatus, jqxhr ) {
+        $.getScript( "https://www.fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.twentytwenty.js", function( data, textStatus, jqxhr ) {
+           $('.twentytwenty-container').twentytwenty({
+            no_overlay: true
+          });
          });
        });
-    });
+  }, 100);
-  </script>
+});
-</includeonly>
+</script></includeonly>