OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave a

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
lck
Posts: 2009
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by lck » Thu Apr 28, 2016 1:55 pm

cmb wrote:Auch hier kann, denke ich, nur eine Lösung für viele, aber eben nicht für alle Anwendungsfälle vorbereitet werden. Wer da speziellere Wünsche hat, dem stehen ja auch noch manuelle Wege ohne Onepage-Plugin zur Verfügung.
Wow, da hat Gert ja meine Idee von 2014 für OnePage aufgegriffen und erweitert. Gefällt mir. Eventuell werde ich ja als Ideengeber erwähnt :)
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmb
Posts: 13341
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by cmb » Thu Apr 28, 2016 2:21 pm

manu wrote:Vor rund einem Jahr hatte ich das Ziel, ein Onepage Template ab der Stange in CMSimple_XH zu integrieren. Ein Bootstrap Template mit all den Gimmicks, die scheints so gefragt sind: onepage.pixolution.ch.
Sehr gelungen!
manu wrote:Meine Meinung dazu ist: CMSimple_XH sollte den Inhalt so flexibel wie möglich und nur soviel wie nötig ausliefern, damit möglichst universell mit Templates (und deren Frameworks) gearbeitet werden kann, d.h. ein plugin und evtl. ein minimales (Beispiel-)Template.
Na, da würde doch mein Vorschlag "Komplexe Variante: flexible Seitenstruktur (und Menüstruktur?) ganz ohne vorgegebenes JS" gut passen. Nur kann und will ich die "Simple Variante: weitgehend fest vorgegebene Struktur (so wie derzeit) mit JS out-of-the-box" nicht einfach aufgeben, allein schon weil es bereits Templates gibt, die dann mit einer neuen Onepage_XH Version nicht mehr richtig funktionieren würden.

Aber ich denke, beides anzubieten ist nur wenig Mehraufwand für mich, und bringt den meisten Anwendern den größten Nutzen.
lck wrote:Wow, da hat Gert ja meine Idee von 2014 für OnePage aufgegriffen und erweitert. Gefällt mir. Eventuell werde ich ja als Ideengeber erwähnt :)
Es ist aber auch denkbar, dass Gert diesen Post/Thread und Deine Demo nie gesehen hat. :)

Auf jeden Fall sehr interessant, den alten Thread noch mal zu überfliegen, und zu sehen wie das Onepage-Plugin durch viele gute Vorschläge und ein bisschen Hartnäckigkeit (ich musste mich da wohl erst überzeugen lassen) geboren wurde. Und da gibt's ja auch noch meine Infinite-Demo. :o
lck wrote:'onepage_page_inner' finde ich passend, das weiß man gleich welcher Bereich gemeint ist.
Super! Danke für die Rückmeldung.
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 3368
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by frase » Thu Apr 28, 2016 2:28 pm

lck wrote: Wow, da hat Gert ja meine Idee von 2014 für OnePage aufgegriffen und erweitert. :)
... und das nichtmal schlecht. Viele Wege führen nach Rom.

Und ob er's gelesen hat oder nicht, oder einer von euch - im Quellcode hat er einen <div> mit Klasse ".cmsimple_onepage_inner"
Wir erfinden mehrere Räder.

:D

lck
Posts: 2009
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by lck » Thu Apr 28, 2016 6:48 pm

cmb wrote:Es ist aber auch denkbar, dass Gert diesen Post/Thread und Deine Demo nie gesehen hat.
Das ist natürlich gut möglich.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 3212
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by Holger » Thu Apr 28, 2016 10:54 pm

cmb wrote:Meine Grundidee bei Onepage_XH war und ist, Templatedesignern und Webmastern ein Tool zu geben, mit dem sie relativ leicht einen Onepager erstellen können. Zu so einem Onepager gehört aber irgendwie immer auch JS Unterstützung: das weiche Scrollen, der dynamische Toplink, und, finde ich eigentlich wichtig, auch wenn noch nicht verfügbar, die dynamische Anpassung der Menüstruktur bzgl. sdoc(s). Je fester ich die Seitenstruktur vorgebe, umso weniger Designer können damit was anfangen (bzw. müssen Hacken). Je flexibler die Seitenstruktur anpassbar ist, umso weniger JS-Gimmicks kann ich (mit vertretbarem Aufwand) anbieten, und nicht jeder Designer wird eigenes JS einbringen können und/oder wollen.

Wenn ich Dich richtig verstehe, dann wünschst Du Dir eigentlich ein Onepage_XH, dass völlige Flexibilität bietet, dabei aber ggf. keinerlei eingebaute JS-Features mitbringen muss (also eigentlich reines PHP). Auch manus Wünsche gehen in diese Richtung.
Jain ;) . Ich fände es gut, wenn eine vernünftige Struktur vorgegeben wird (meinetwegen wie jetzt von Ludwig vorgeschlagen). Dazu passend dann eine OnePage.js mit etwa dem Umfang von heute.
Zusätzlich dazu die Möglichkeit das Plugin ausschließlich als "Content-Lieferant" zu verwenden, in gewissem Umfang meine eigene HTML-Struktur zu verwenden und die, u.U. dann nicht mehr funktionierende, onepage.js zu ersetzen.
Im Prinzip also manus Vorschlag. Ich bin mir sicher, dass man dadurch alternative Frameworks oder vorgefertigte Templates deutlich einfacher nutzbar machen kann.
cmb wrote:
Holger wrote: Also aktualisiere ich die URL nach dem Scrollen mittels window.location.hash = target im Callback von animate().
Im onepage.js habe ich das gerade anders herum gemacht: erst die location ändern, und dann scrollen. Vielleicht auch für die jQuery-Variante eine Möglichkeit?
Das funktioniert leider nicht mit location.hash, denn der Browser springt sofort zur ID (mich hat gewundert, dass das bei Dir klappt :? ).
Ich habe das jetzt aber gelöst, indem ich nur die Adresszeile mittels window.location.replace(target) aktualisiere.

Jedenfalls funktioniert jetzt das Scrollen auch mit dem Menü-Toggle per CSS:target aus Ludwigs Template.

Neben diesem Bugfix habe ich interessehalber auch mal folgendes getestet:

in Controller.php

Code: Select all

public static function getContent()
    {
        global $s, $o, $hc, $c, $u, $edit, $plugin_cf, $onepage_structure;

        if (!($edit && XH_ADM) && $s > -1) {
            if (!isset($onepage_structure)) {
                //Default-Struktur definieren
                $onepage_structure = '<div id="%s" class="onepage_page">%s</div>';
            }
            $contents = '';
            $oldS = $s;
            foreach ($hc as $i) {
                $s = $i;
                $url = $plugin_cf['onepage']['url_numeric']
                    ? $i
                    : XH_hsc(urldecode($u[$i]));
                $contents .= sprintf(
                    $onepage_structure,
                    $url, evaluate_scripting($c[$i])
                );
            }
            $s = $oldS;
            return $o . preg_replace('/#CMSimple (.*?)#/is', '', $contents);
        } else {
            return $o;
        }
    }
...um mich dann im Template auszutoben:

Code: Select all

<?php $onepage_structure = '<div class="onepage_page_outer"><div id="%s" class="onepage_page container"><div class="onepage_page_inner">%s</div></div></div>';?>
In der aktualisierten Demo sieht man im Quelltext das Ergebnis. Ich finde das ungemein flexibel und kann partout das "Wespennest" nicht erkennen ;) .
Den Download habe ich ebenfalls aktualisiert, falls noch jemand Lust zu Spielereien hat.

cmb
Posts: 13341
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by cmb » Fri Apr 29, 2016 10:14 am

Holger wrote:
cmb wrote:Wenn ich Dich richtig verstehe, dann wünschst Du Dir eigentlich ein Onepage_XH, dass völlige Flexibilität bietet, dabei aber ggf. keinerlei eingebaute JS-Features mitbringen muss (also eigentlich reines PHP). Auch manus Wünsche gehen in diese Richtung.
Jain ;) . Ich fände es gut, wenn eine vernünftige Struktur vorgegeben wird (meinetwegen wie jetzt von Ludwig vorgeschlagen).
Okay, das haben wir ja schon. Die Konfigoption für den Klassennamen dann aber wieder entfernen? Soll mir recht sein.
Holger wrote:Dazu passend dann eine OnePage.js mit etwa dem Umfang von heute.
Damit bin ich eigentlich nicht einverstanden. Zumindest das dynamische Anpassen der Menüs bzgl. .doc(s)/.sdoc(s) gehört dazu, finde ich. Immerhin wird diese Struktur ja auch per PHP so erzeugt, aber ist nach internem "Seitenaufruf"/Scrollen nicht mehr korrekt. Daher macht es derzeit keinen Sinn, .sdoc(s) anders zu stylen als .doc(s), obwohl das eigentlich informativ wäre.

Okay, das funktioniert ohne JS nicht, aber da könnte man ja wiederum dafür sorgen, dass ursprünglich nur .doc(s) ausgeliefert wird, und .sdoc() ausschließlich durch JS verwaltet wird.
Holger wrote:Zusätzlich dazu die Möglichkeit das Plugin ausschließlich als "Content-Lieferant" zu verwenden, in gewissem Umfang meine eigene HTML-Struktur zu verwenden und die, u.U. dann nicht mehr funktionierende, onepage.js zu ersetzen.
Im Prinzip also manus Vorschlag. Ich bin mir sicher, dass man dadurch alternative Frameworks oder vorgefertigte Templates deutlich einfacher nutzbar machen kann.
Ja, das entspricht ja meiner "komplexen Variante" (sollte ich wohl besser "advanced" nennen). Und okay, eigentlich auch kein Problem, dass JS ganz unabhängig von "simple"/"advanced" zu halten, und einfach konfigurierbar zu machen, ob es geladen wird oder nicht (im Fall von onepage.js vs. onepage.jquery.js ist das dann eben eine Auswahl aus 3 Alternativen).
Holger wrote:
cmb wrote:
Holger wrote: Also aktualisiere ich die URL nach dem Scrollen mittels window.location.hash = target im Callback von animate().
Im onepage.js habe ich das gerade anders herum gemacht: erst die location ändern, und dann scrollen. Vielleicht auch für die jQuery-Variante eine Möglichkeit?
Das funktioniert leider nicht mit location.hash, denn der Browser springt sofort zur ID (mich hat gewundert, dass das bei Dir klappt :? ).
Ich habe das jetzt aber gelöst, indem ich nur die Adresszeile mittels window.location.replace(target) aktualisiere.
Letzteres hat halt den Nachteil (falls das einer ist), dass die History nicht mehr "funktioniert". Bezüglich der Änderung von window.location.hash ist es wohl so, dass der Browser erst springt, wenn der Eventhandler vollständig abgearbeitet ist. Basierend auf dieser Annahme[1] kann man die aktuelle Scrollposition speichern, window.location.hash ändern, und dann gleich die alte Scrollposition wieder herstellen. Das ist in onepage.js so gelöst, und scheint auch überall zu funktionieren.
Holger wrote:In der aktualisierten Demo sieht man im Quelltext das Ergebnis. Ich finde das ungemein flexibel und kann partout das "Wespennest" nicht erkennen ;) .
Ja klar, das ist ungemein flexibel und ich habe ja auch nichts dagegen eine solche Möglichkeit anzubieten. Nur wäre es dann aufwendig und fehleranfällig, wenn z.B. die .sdoc(s) Korrektur ins Spiel kommt. Diese richtet sich ja im Zweifel an .onepage_page, was es u.U. gar nicht mehr gibt, oder nicht mehr unbedingt relevant ist. Und den Templatestring per PHP zu parsen halte ich im Allgemeinen eben für problematisch.

Also wäre einfache Lösung für die .sdoc(s) Korrektur, einfach nach .onepage_page zu suchen, und das als "Seite" zu intepretieren. Okay. Ein Designer erstellt nun ein Template mit dem vorgegebenen $onepage_structure. Schön die .sdoc(s) gestylt – toll. Dann will er aber die Struktur ändern, und nun passt das mit den .sdoc(s) nicht mehr. WTF? Warum ist das nicht dokumentiert? Und ich habe halt keine Lust, da eine superdetaillierte Doku zu schreiben, die vielleicht keiner liest. Und vielleicht stellt sich irgendwann heraus, dass die .sdoc(s) Korrektur gar nicht an .onepage_page gebunden werden sollte, sondern an den inneren Container. Wäre leicht zu machen, bei einer Standardstruktur vermutlich auch abwärtskompatibel, aber eben eventuell nicht mehr bei einer benutzerdefinierten Struktur. Dann kann ich den Bugfix nicht einfach durchführen, sondern nur falls die Standardstruktur verwendet wird (zusätzliches if – im Einzelfall nicht tragisch, aber kann sich leicht akkumulieren, und alles wird unnötig komplex).

Und wer weiß, welche praktischen Features onepage.js noch so liefern wird? Und wie diese dann mit benutzerdefinierten Strukturen zusammen spielen. Daher würde ich halt auf jeden Fall den JS-Support für benutzerdefinierte Strukturen wenigstens als undefiniert dokumentieren wollen ("klappt oder klappt nicht – und verlasst Euch nicht drauf, dass es bei der nächsten Version nicht anders ist"), oder eben gleich komplett ausschließen.

Vielleicht bin ich da zu paranoid, aber ich habe halt schon zu viele Bugs gesehen, die eigentlich leicht gefixt werden könnten, aber aufgrund des BC Breaks dann nicht gefixt werden können. Und das passiert gerade dann besonders schnell, wenn dem User größtmögliche Flexibilität eingeräumt werden soll.

[1] Diese Annahmen scheint mir gemäß der Spezifikation des HTML5 Processing model korrekt.
Christoph M. Becker – Plugins for CMSimple_XH

Holger
Site Admin
Posts: 3212
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by Holger » Sat May 07, 2016 5:40 pm

Hallo zusammen, Hallo Christoph!
cmb wrote: Letzteres hat halt den Nachteil (falls das einer ist), dass die History nicht mehr "funktioniert". Bezüglich der Änderung von window.location.hash ist es wohl so, dass der Browser erst springt, wenn der Eventhandler vollständig abgearbeitet ist. Basierend auf dieser Annahme[1] kann man die aktuelle Scrollposition speichern, window.location.hash ändern, und dann gleich die alte Scrollposition wieder herstellen. Das ist in onepage.js so gelöst, und scheint auch überall zu funktionieren.
Das hatte ich mir in onepage.js schon abgeschaut. Nur habe ich Dösbaddel die falsche Ursprungsposition abgespeichert :roll: . Na ja, es funktioniert jetzt auf jeden Fall so.

Insgesamt viele Argumente. Ich versuche jetzt noch einmal, die Sache aus meiner Sicht auf den Punkt zu bringen.

- die etablierte Struktur <div id="ID" class="onepage_page"> ... </div> muss erhalten bleiben. Hieran orientieren sich die JS-Funktionen
- im Template sollte die Struktur aber erweiterbar sein
- ebenfalls im Template sollten (per JS) Anpassungen für gängige Dinge wie ein Offset für fix positionierte Header möglich sein
- Auswahlmöglichkeit, welche onepage.js geladen werden soll
- und eigentlich müsste das Template die Möglichkeit bekommen, eine bestimmte, bzw. eine eigens angepasste JS-Datei zu laden

Bezüglich .doc / .sdoc:
IMO hat eine "Onepage" nur die Klassen .doc und .sdoc, da eigentlich nur ein Menü-Level von 1 sinnvoll ist.
Um nun per JS die Klassen dynamisch anzupassen, könnte man sich auch dem schon existierenden Container "ul.menulevel1" bedienen. Das bringt natürlich die Einschränkung, dass nur ein Menü eindeutig angesprochen werden kann. Ich habe das vorerst mal so gemacht.

Damit die Sache nicht einschläft, habe ich mal meine aktuelle Version online gestellt
http://holgerirmler.de/op_jquery/
Dort habe ich versucht, alles etwas besser zu beschrieben. Auch einen Download-Link gibt es wieder.

Vielleicht testet es mal jemand?

LG
Holger

frase
Posts: 3368
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by frase » Sun May 08, 2016 9:00 am

Hi Holger,
gott-oder-wem-auch-immer sei's gedankt, die Sache schläft nicht ein.
Im Moment aber Dank an dich.

Das Ding scheint auf dem richtigen Weg zu sein. Aber zu komplex, um sofort alles zu überschauen.
Ich werde auf jeden Fall die neue Version auch bei mir testen. Leider wird das dauern ... :-(

Was mir jetzt schon auffällt:
Es gibt immer noch viele h1 im Dokument.
Disskusion darüber: http://cmsimpleforum.com/viewtopic.php?f=16&t=10367
Natürlich kann das im Template jeder selbst regeln.
Schön (und anwendersicher) wäre es doch, wenn das Plugin sich darum kümmert - oder?
Wunschtraum:
- Menülevel wird automatisch auf "1" gesetzt.
- Die Ausgabe wird dahingehend manipuliert, dass nur die erste Inhaltsseite h1 bekommt, alle anderen h2.

Doch nochmal: Ich bewundere euch dafür, mit welcher Energie und welchem Können ihr sowas durchzieht.
Hut ab.

Nachtrag: "numeric" - obsolet?

lck
Posts: 2009
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by lck » Sun May 08, 2016 11:48 am

Gute Arbeit Holger!

Läuft auf allen aktuellen Desktop-Browsern, getestet mit IE, Chrome, FF, Opera, Opera 12.17, Safari 4.05, Vivaldi - mobile Browser, Chrome, FF, Opera und Dolphin mit aktiviertem Jetpack.

Super finde ich, dass man nun den jeweils aktiven Link per css hervorheben kann, das fehlte mir seit Langem.
Was mich anfangs etwas irritiert hat ist, wenn man z. B. vom ersten Link auf den letzten Link klickt, durchläuft das "active" sämtliche Links (kurze aktive Markierung). Andererseits näher betrachtet, evtl. ein schöner Effekt.

Die Möglichkeit die Seitenstruktur mit zusätzlichen div's per template.htm zu erweitern, halte ich für sinnvoll. Aber ein zusätzliches äußeres div sollte man nicht verwenden, aus den von dir und Christoph bereits genannten eventuellen Problemen.
Online-Demo - Holger wrote:Die Dauer der Animation wird aus der Plugin-Konfiguration übernommen.
Dem scheint noch nicht so zu sein. Da verändert sich nichts, hab's testweise mal auf 3000 gestellt.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

frase
Posts: 3368
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave

Post by frase » Sun May 08, 2016 12:03 pm

lck wrote:Gute Arbeit Holger!
Dem schließe ich mich unbedingt an!
Es läuft (fast alles) auch bei mir.
Näheres später.
lck wrote:Super finde ich, dass man nun den jeweils aktiven Link per css hervorheben kann, das fehlte mir seit Langem.
Was mich anfangs etwas irritiert hat ist, wenn man z. B. vom ersten Link auf den letzten Link klickt, durchläuft das "active" sämtliche Links (kurze aktive Markierung). Andererseits näher betrachtet, evtl. ein schöner Effekt.
Schöner Effekt - und nötig! Denn auch beim Scrollen sollen die "active" hervorgehoben werden.
Super.
Holger wrote:Die Dauer der Animation wird aus der Plugin-Konfiguration übernommen.
lck wrote:Dem scheint noch nicht so zu sein. Da verändert sich nichts, hab's testweise mal auf 3000 gestellt.
Das stellte ich auch fest. Evtl nur ein Variablenname falsch.

Post Reply