Split Layout mit vier Slides

[Castordesigns]

Ich versuche, eine Navigation mit vier Slides zu generieren.

Hier geht es zu meiner Testseite (inklusive Code): http://jsfiddle.net/n9z2nppr/4/

Basiert habe ich mein Testcase auf dieser Vorlage.
Während die erste (linke) Slide und die letzte (rechte) Slide funktionieren, funktioniert das Schliessen der Slides bei den inneren Slides nicht wie gewünscht: Die Klassen .open-innerleft und .open-innerright werde nicht zurückgesetzt, wenn die Slides geschlossen werden.

Dies scheint mit diesme Codeschnipsel zu tun zu haben, das für genau zwei Slides gecodet ist:

// back to intro
        // after transition ends:
        var onEndTransFn = function () {
            this.removeEventListener(transEndEventName, onEndTransFn);
            classie.add(splitlayout, 'reset-layout');
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        },
        backToIntro = function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var dir = classie.has(ev.target, 'back-left') ? 'left' : 'right',
                page = dir === 'right' ? pageRight : pageLeft;
            classie.remove(splitlayout, 'open-' + dir);
            classie.add(splitlayout, 'close-' + dir);
            page.addEventListener(transEndEventName, onEndTransFn);
        };

Wie muss ich das Script anpassen, dass die inneren Slides auch funktionieren?
Herzlichen Dank im Voraus

 

[Duddle]

Die ursprüngliche Logik prüft ob das <div> zum schließen eine bestimmte Klasse hat. Es gibt aber nur Pfeile für links und rechts, also kann das Script dort nur zwischen zwei Alternativen unterscheiden - du brauchst vier. Ich habe mal die Funktion angepasst, dass sie woanders schaut:

backToIntro = function (ev) {
  ev.preventDefault();
  ev.stopPropagation();
  if(classie.has(splitlayout, 'open-innerleft')){
  var dir = 'innerleft';
  var page = pageinnerLeft;
  }
  if(classie.has(splitlayout, 'open-innerright')){
  var dir = 'innerright';
  var page = pageinnerRight;
  }
  if(classie.has(splitlayout, 'open-left')){
  var dir = 'left';
  var page = pageLeft;
  }
  if(classie.has(splitlayout, 'open-right')){
  var dir = 'right';
  var page = pageRight;
  }
  classie.remove(splitlayout, 'open-' + dir);
  classie.add(splitlayout, 'close-' + dir);
  page.addEventListener(transEndEventName, onEndTransFn);
  };

Das funktioniert auch im JSFiddle im Firefox. Ich musste auch das CSS anpassen:

.open-right .back-right, .open-left .back-left, .open-inner-right .back-right, .open-inner-left .back-left {
    visibility: visible;
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    pointer-events: auto;
}

Hier muss "open-inner-right" "open-innerright" heißen, respektive für "left", sonst wird der zurück-Pfeil nicht sichtbar. Auch muss er wohl noch irgendwo verschoben werden, da er sonst überdeckt wird. Anklickbar ist er aber.


Duddle

 

[Castordesigns]

Wunderbar. Herzlichen Dank. Überdeckt war der Pfeil nicht, jedoch war die Farbe unvorteilhaft, weshalb ich die CSS nochmals erweitern musste:

.open-innerright .back-right {
    right: 12.5%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
}

.open-innerleft .back-left {
    left: 12.5%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    color: #191919;
}

Hast Du noch eine Idee, weshalb bei geöffneter Slide «Contact» am linken Rand noch irgendwas hervorschaut?