Widget:Twentytwenty: Unterschied zwischen den Versionen

Aus FürthWiki
Zur Navigation springen Zur Suche springen
K
K (Dokumentation verbessert)
 
(31 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
<!doctype html>
+
<noinclude>__NOTOC__
−
<html>
+
Das widget ''Twentytwenty'' stellt technisch die eigentliche Slider-Implementierung bereit und kann auch ohne die [[#Vorlage ImageSlider|Vorlage:ImageSlider]] verwendet werden.
−
<head>
+
 
−
  <meta charset="utf-8">
+
Die Implementierung des Widgets ist denkbar trivial. Folgende Dinge werden vom Widget getan um den Slider zu realisieren:
−
  <style>
+
# Laden von [https://jquery.com/ jQuery], [https://plugins.jquery.com/event.move/ jquery.event.move] und [https://github.com/zurb/twentytwenty jquery.twentytwenty.js].
−
  .twentytwenty-wrapper {
+
# Bereitstellung der benötigten [https://github.com/zurb/twentytwenty/blob/master/css/twentytwenty.css CSS Styles].
−
    -webkit-touch-callout: none; /* iOS Safari */
+
# Ausführen des jquery-TwentyTwenty-Plugins wie in der [https://github.com/zurb/twentytwenty?tab=readme-ov-file#multiple-instances Dokumentation beschrieben].
−
      -webkit-user-select: none; /* Safari */
+
 
−
      -khtml-user-select: none; /* Konqueror HTML */
+
== Verwendung ==
−
        -moz-user-select: none; /* Firefox */
+
 
−
          -ms-user-select: none; /* Internet Explorer/Edge */
+
<code><nowiki>
−
              user-select: none; /* Non-prefixed version, currently
+
{{#widget:twentytwenty|Bild1={{filepath:Bild1}}|Bild2={{filepath:Bild2}}|width=auto}}
−
                                    supported by Chrome and Opera */
+
</nowiki></code>
−
  }
+
 
−
  .twentytwenty-overlay {
+
== Offene Punkte ==
−
    display: none;
+
 
−
  }
+
* 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.
−
  </style>
+
* 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.
−
<!-- <script src="//fuerthwiki.de/wiki/resources/lib/jquery/jquery.js"></script> -->
+
* 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.
−
<!-- <script src="//fuerthwiki.de/wiki/resources/lib/twentytwenty/jquery.twentytwenty.min.js"></script> -->
+
* 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.*
−
  <script>
+
</noinclude>
−
  $(function(){
+
<includeonly><style>
−
    $('.twentytwenty-container').twentytwenty();
+
.twentytwenty-horizontal .twentytwenty-handle:before,
−
  });
+
.twentytwenty-horizontal .twentytwenty-handle:after,
−
  </script>
+
.twentytwenty-vertical .twentytwenty-handle:before,
−
</head>
+
.twentytwenty-vertical .twentytwenty-handle:after {
−
<body>
+
content: " ";
−
  <div class="twentytwenty-container">
+
display: block;
−
     <img src="<!--{$Bild1}-->" />
+
background: white;
−
     <img src="<!--{$Bild2}-->" />
+
position: absolute;
−
  </div>
+
z-index: 30;
−
</body>
+
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
−
</html>
+
-moz-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 {
 +
width: 3px;
 +
height: 9999px;
 +
left: 50%;
 +
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%; }
 +
 
 +
.twentytwenty-before-label,
 +
.twentytwenty-after-label,
 +
.twentytwenty-overlay {
 +
-webkit-transition-duration: 0.5s;
 +
-moz-transition-duration: 0.5s;
 +
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>

Aktuelle Version vom 29. September 2024, 19: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“