Lightbox dreht die Karte um

[horstmann]

Guten Tag , ich habe puzzle für die Schule gemacht. Ich habe nur ein Problem Bei umdrehen die Karte und drücken auf Lightbox , nach der Eröffnung des Bildes , wenn ich das Bild schließe , dreht die Karte sich wieder um. Wie kann das unterbinden ? Die Karte sollte sich nicht umdrehen, damit die Leute sehen was die schon umgedreht haben. Also so wie auf dem Bild ist.

[Rolf B]

Hallo horstmann,

ich verstehe nicht so richtig was Du meinst, aber ich vermute, dass Dich das classList.toggle("flipped") im main.js stört. Die toggle-Methode schaltet das Vorhandensein der flipped-Klasse hin und her. Ist sie nicht da, wird sie hinzugefügt. Ist sie da, wird sie entfernt.

Ich nehme an, du möchtest sie nur hinzufügen und wenn sie schon da ist, da lassen und nicht wieder entfernen?

Hier findest Du die Antwort: Methoden der DOMTokenList (das ist das Objekt, das die classList realisiert).

Rolf

[horstmann]

Danke sehr. Noch eine Frage: mit "add" ist es so, das es lässt sich nicht mehr zurück umdrehen. Wenn ich möchte das ich die Möglichkeit noch habe mit Maus klick es doch um zu drehen und nicht wie bis jetzt war nach klick auf Lightbox, wurde dann automatisch umgedreht. wie kann man das Lösen ?

[Tabellenkalk]

Hallo,

Wenn ich möchte das ich die Möglichkeit noch habe mit Maus klick es doch um zu drehen und nicht wie bis jetzt war nach klick auf Lightbox, wurde dann automatisch umgedreht.

Zitat 657

Gruß
Kalk

[Rolf B]

Hallo horstmann,

das ist dein HTML - pro Feld. Das UIKit macht daraus eine Card-Ansicht mit 2-6 Feldern pro Zeile und verwendet dafür Flexbox. Ich würde annehmen, dass das ohne UiKit und mit einem selbstgemachten display:grid deutlich eleganter ginge, aber vermutlich überfordere ich Dich damit.

<div class="card-flip">
   <div class="uk-card uk-card-default uk-card-hover card">

      <div class="front uk-background-cover uk-height-small height-medium " style="background-image: url(img/csg-logo-200.png);">
      </div>
      <div class="back card-face uk-background-cover uk-height-small height-medium  " style="background-image: url(img/white_300.png);">
        <div uk-lightbox="animation: fade">
          <a class="uk-button uk-position-bottom-center uk-text-emphasis uk-button-default " href="img/platzhalter_ny_1200.png" data-caption="Happy NY">Lightbox</a>
        </div>
      </div>
    </div>
  </div>
</div>

Was Du - vom Markup her - tun solltest, ist aufräumen.

• Die Klasse "card" scheint nicht benutzt zu werden.
• Hintergrundbilder per style-Attribut? Du hast doch eh eigenes CSS, warum setzt Du das background-image nicht dort?
• Klasse card-face, für display:block. Unnötig, ein div hat diese Eigenschaft ohnehin. Du hast davor noch .card-face.back stehen, da müsste das .card-face dann entfernt werden, wenn .card-face verschwindet
• Klasse card - die verwendest Du gar nicht (und hast sie auf einigen uk-card auch vergessen)
• Das card-flip div? Ich würde annehmen, dass Du margin:10px auch auf .uk-card legen und auf dieses div dann völlig verzichten kannst. Ausprobiert habe ich es nicht, es ist mir jetzt zu lästig deinen Sourcecode zusammenzusaugen.
• Klassen height-medium und uk-height-small auf den Vorder- und Rückseiten: Ich würde behaupten, dass Du die nicht brauchst. Setze in der media-Query die Höhe direkt für uk-card. Du kannst dann allerdings keinen Bezug auf die uk-height... Klassen des UIKit nehmen, aber ich denke, das ist auch nicht nötig. Die div-Kinder von uk-card sollten dann height:100% bekommen.
• die Klasse uk-background-cover bringt die Eigenschaften background-size:cover, background-repeat:no-repeat und background-position:50% 50% mit. Die drei kannst Du auch direkt an dein eigene style-Regel für die div-Kinder von uk-card kleben und musst dein Markup nicht mit Klassen vollmüllen, die rein zur Layout-Steuerung da sind. Sowas ist eigentlich keine gute Praxis, auch wenn die "CSS Frameworks" einen damit vollschmeißen.
• Ich wollte mich schon über das <a> Element für die Bilder aufregen, aber (a) gibt UIKit das für die Lightbox so vor und (b) ist der Link der Fallback für den Fall dass JavaScript aus ist. Also: ok.

Ich hätte also an Zusatz-CSS:

.uk-card > div {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.uk-card .front {
   background-image: url(img/csg-logo-200.png);
}
.uk-card .back {
   background-image: url(img/white_300.png);
}

Das ">" im Selektor ".uk-card > div" bedeutet: beziehe Dich nur auf die div, die direkte Kinder des uk-card Elements sind.

<div class="uk-card uk-card-default uk-card-hover">
  <div class="front">
  </div>
  <div class="back">
    <div uk-lightbox="animation: fade">
      <a class="uk-button uk-position-bottom-center uk-text-emphasis uk-button-default " href="img/platzhalter_ny_1200.png" data-caption="Happy NY">Lightbox</a>
    </div>
  </div>
</div>

Nun zum Klicken. Du registrierst deine Eventhandler auf allen uk-card Elementen und reagierst dann auf Klicks. Zum einen ist das prinzipiell falsch. DIVs sind keine interaktiven Elemente. Versuche mal, ohne Maus (und Touchscreen) eins deiner Kärtchen zu flippen. Geht nicht. Weil ein div nicht per Tastatur annavigiert werden kann.

Buttons sind interaktiv, und <a> Elemente sind interaktiv. Du erlebst auch prompt die Folgen, was passiert, wenn man interaktive Elemente schachtelt: Sie stören sich gegenseitig. Der Klick ins <a> Element blubbert im DOM nach oben (Event bubbling) und gelangt zu deinem div. Deshalb reagiert dein div auf den Klick, der eigentlich dem a Element galt

Was tun? Das Schachteln interaktiver Inhalte ist in den Inhaltsmodellen von HTML nicht vorgesehen. Genau genommen ist es verboten, dass ein <a> Element oder ein <button> Element interaktive Elemente enthalten.

Die richtige Lösung wäre also, wenn Du dein front-div durch einen Button ersetzt. Den kannst Du so stylen, dass er als Button erstmal nicht erkennbar ist, aber den Fokus-Outline solltst Du nicht entfernen. Dein back-div ist komplizierter. Das lightbox-Element positioniert sind selbst, aber du müsstest noch einen Button hineinlegen, der das div füllt. Analog zu front. Das lightbox-Element darf kein Kind-Element des Button sein.

Im click-Eventhandler kannst Du dann abfragen, ob einer deiner Buttons geklickt wurde. Dazu schreib ich nachher noch was - ich muss jetzt erstmal weg vom PC.

Rolf

[Rolf B]

Hallo horstmann,

so, habe noch etwas Zeit gehabt und etwas zu UIKit gelernt 😀

Und ich habe deine Seite mal in ein Fiddle geclont. Mein Vorschlag oben, der den HTML Rahmen für die Zellen darstellt, reicht aus. Dabei hab ich auch gleich einen Bug in jsFiddle entdeckt und gemeldet: so lange URLs, wie Du sie für Google Maps übertragen willst, zerreißen das Fiddle Layout. Man muss in den Settings "wrap lines" einschalten...

Ein height:100% an den direkten Kindern von uk-card ist nicht nötig, dafür hast Du uk-grid-match gesetzt. Sorry - UIKit war mir bis heute unbekannt.

Die -webkit- Prefixe in den CSS Regeln brauchst Du nicht mehr. Die dadurch angesprochenen Brower beherrschen diese Funktionen seit mehreren Jahren ohne Präfix. Du kannst sowas auf caniuse.com überprüfen.

Jetzt weiß ich auch, warum Du das card-flip div eingezogen hast - ohne das beißt sich deine Flipperei mit dem UIKit-Grid. Das UIKit ist da ziemlich umständlich, sie fummeln mit Margins und Paddings herum, nur um einen Zwischenraum zwischen die Cards zu bekommen. Mit display:grid und einem einfachen gap wäre das alles viel leichter. Aber dann müsstest Du vom UIKit weg und alles selbst machen.

Dann bin ich meinem Button-Vorschlag nachgegangen. Nicht so trivial; vor allem dein opacity:0.1 für die Front-Seite macht es schwer, den Button-Fokus zu erkennen. Ich würde Dir empfehlen, das CSG-Logo mit einem Grafikprogramm zu bearbeiten und damit die Transparenz herzustellen, so dass der Button selbst nicht transparent sein muss. Eine CSS Eigenschaft "background-opacity" würde es vereinfachen, aber die gibt es nicht. Ich habe mir jetzt mit einem absolut positionierten ::after Element im Button beholfen. Absolut deshalb, weil der Button einen unsichtbaren Text "Öffnen" enthält, der von einem Screenreader vorgelesen würde. Ich weiß natürlich nicht, ob man diese Seite für Nichtsehende irgendwie nutzbar machen kann, aber ein Button braucht einen Text.

Nachdem man draufgeklickt hat, ist die Card geflippt und der Button versteckt. Damit ist auch keine sichtbare Buttonfokussierung mehr da. D.h. man muss im Click-Event auch den Umschaltbutton der "anderen Seite" aktivieren.

Aber schön ist das noch alles nicht - hier ist mein aktueller Bastelstand. Er verwendet CSS Grid statt uk-grid, das ist deutlich weniger Gefummel für die Grid-Darstellung.

https://jsfiddle.net/Rolf_b/35fmqkte/1/

Wenn Du bei UK-Grid bleiben und die Button-Spielerei nicht haben willst - hier nur kurz und bündig: Frage, ähnlich wie ich das in flipCard mache, den tagName des eventTarget ab. Nur wenn es DIV ist schalte den flipped-Status um. Aber wie gesagt: Interaktiv gefummelte divs sind nicht das, wofür HTML gemacht ist.

Rolf