Widget:Twentytwenty: Unterschied zwischen den Versionen

Aus FürthWiki

(update twentytwenty plugin)
K (Dokumentation verbessert)
 
(19 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
<noinclude>__NOTOC__
<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>
</noinclude>
<includeonly>
<includeonly><style>
  <style>
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
content: " ";
content: " ";
display: block;
display: block;
Zeile 12: Zeile 32:
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
-moz-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;
width: 3px;
height: 9999px;
height: 9999px;
left: 50%;
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;
width: 9999px;
height: 3px;
height: 3px;
top: 50%;
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;
position: absolute;
top: 0;
top: 0;
Zeile 32: Zeile 56:
height: 100%; }
height: 100%; }


.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
.twentytwenty-before-label,
.twentytwenty-after-label,  
.twentytwenty-overlay {
-webkit-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-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;
-webkit-transition-property: opacity;
-moz-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;
color: white;
font-size: 13px;
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;
position: absolute;
background: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.2);
Zeile 54: Zeile 83:
-webkit-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-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%;
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%;
left: 50%;
margin-left: -45px;
margin-left: -45px;
text-align: center;
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;
width: 0;
height: 0;
height: 0;
border: 6px inset transparent;
border: 6px inset transparent;
position: absolute; }
position: absolute;  
 
}
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
.twentytwenty-left-arrow,  
.twentytwenty-right-arrow {
top: 50%;
top: 50%;
margin-top: -6px; }
margin-top: -6px;  
 
}
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
.twentytwenty-up-arrow,  
.twentytwenty-down-arrow {
left: 50%;
left: 50%;
margin-left: -6px; }
margin-left: -6px;  
 
}
.twentytwenty-container {
.twentytwenty-container {
-webkit-box-sizing: content-box;
-webkit-box-sizing: content-box;
Zeile 89: Zeile 125:
-webkit-user-select: none;
-webkit-user-select: none;
-moz-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 {
.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 {
.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 {
.twentytwenty-horizontal .twentytwenty-before-label:before {
left: 10px; }
left: 10px;  
 
}
.twentytwenty-horizontal .twentytwenty-after-label:before {
.twentytwenty-horizontal .twentytwenty-after-label:before {
right: 10px; }
right: 10px;  
 
}
.twentytwenty-vertical .twentytwenty-before-label:before {
.twentytwenty-vertical .twentytwenty-before-label:before {
top: 10px; }
top: 10px;  
 
}
.twentytwenty-vertical .twentytwenty-after-label:before {
.twentytwenty-vertical .twentytwenty-after-label:before {
bottom: 10px; }
bottom: 10px;  
 
}
.twentytwenty-overlay {
.twentytwenty-overlay {
-webkit-transition-property: background;
-webkit-transition-property: background;
Zeile 133: Zeile 177:
transition-property: background;
transition-property: background;
background: rgba(0, 0, 0, 0);
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 {
.twentytwenty-before {
z-index: 20; }
z-index: 20;  
 
}
.twentytwenty-after {
.twentytwenty-after {
z-index: 10; }
z-index: 10;  
 
}
.twentytwenty-handle {
.twentytwenty-handle {
height: 38px;
height: 38px;
Zeile 163: Zeile 210:
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;
z-index: 40;
cursor: pointer; }
cursor: pointer;  
 
}
.twentytwenty-horizontal .twentytwenty-handle:before {
.twentytwenty-horizontal .twentytwenty-handle:before {
bottom: 50%;
bottom: 50%;
Zeile 170: Zeile 217:
-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-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);
-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 {
.twentytwenty-horizontal .twentytwenty-handle:after {
top: 50%;
top: 50%;
Zeile 176: Zeile 224:
-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-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);
-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 {
.twentytwenty-vertical .twentytwenty-handle:before {
left: 50%;
left: 50%;
Zeile 183: Zeile 231:
-webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-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);
-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 {
.twentytwenty-vertical .twentytwenty-handle:after {
right: 50%;
right: 50%;
Zeile 189: Zeile 238:
-webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
-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);
-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 {
.twentytwenty-left-arrow {
border-right: 6px solid white;
border-right: 6px solid white;
left: 50%;
left: 50%;
margin-left: -17px; }
margin-left: -17px;  
 
}
.twentytwenty-right-arrow {
.twentytwenty-right-arrow {
border-left: 6px solid white;
border-left: 6px solid white;
right: 50%;
right: 50%;
margin-right: -17px; }
margin-right: -17px;  
 
}
.twentytwenty-up-arrow {
.twentytwenty-up-arrow {
border-bottom: 6px solid white;
border-bottom: 6px solid white;
top: 50%;
top: 50%;
margin-top: -17px; }
margin-top: -17px;  
 
}
.twentytwenty-down-arrow {
.twentytwenty-down-arrow {
border-top: 6px solid white;
border-top: 6px solid white;
bottom: 50%;
bottom: 50%;
margin-bottom: -17px; }
margin-bottom: -17px;  
  </style>
}
 
</style><!--
  <div class="twentytwenty-container">
--><div class="twentytwenty-container">
     <img class="Bild1" src="<!--{$Bild1|escape:'html'}-->" width="<!--{$width}-->" />
     <img class="Bild1" src="<!--{$Bild1|escape:'html'}-->" width="<!--{$width}-->" />
     <img class="Bild2" src="<!--{$Bild2|escape:'html'}-->" width="<!--{$width}-->" />
     <img class="Bild2" src="<!--{$Bild2|escape:'html'}-->" width="<!--{$width}-->" />
  </div>
</div><!--
 
--><script src="https://www.fuerthwiki.de/wiki/resources/lib/jquery/jquery.js" type="text/javascript"></script><!--
  <script>
--><script>
    RLQ.push(function(){
RLQ.push(function(){
      $(function(){  
  setTimeout(function(){  
        $.getScript( "https://fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.event.move.js", function( data, textStatus, jqxhr ) {
      $.getScript( "https://www.fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.event.move.js", function( data, textStatus, jqxhr ) {
          $.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.twentytwenty.js", function( data, textStatus, jqxhr ) {
            console.log("initializing ImageSlider");
          $('.twentytwenty-container').twentytwenty({
            $('.twentytwenty-container').twentytwenty({
            no_overlay: true
              no_overlay: true
          });
            });
        });
        });
      });
      });
  }, 100);
    });
});
  </script>
</script></includeonly>
</includeonly>

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:

  1. Laden von jQuery, jquery.event.move und jquery.twentytwenty.js.
  2. Bereitstellung der benötigten CSS Styles.
  3. 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.*


Abgerufen von „https://www.fuerthwiki.de/wiki/index.php?title=Widget:Twentytwenty&oldid=597403“