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ähntcmb 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.
OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave a
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
Sehr gelungen!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.
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.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.
Aber ich denke, beides anzubieten ist nur wenig Mehraufwand für mich, und bringt den meisten Anwendern den größten Nutzen.
Es ist aber auch denkbar, dass Gert diesen Post/Thread und Deine Demo nie gesehen hat.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
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.
Super! Danke für die Rückmeldung.lck wrote:'onepage_page_inner' finde ich passend, das weiß man gleich welcher Bereich gemeint ist.
Christoph M. Becker – Plugins for CMSimple_XH
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
... 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.
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
Das ist natürlich gut möglich.cmb wrote:Es ist aber auch denkbar, dass Gert diesen Post/Thread und Deine Demo nie gesehen hat.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
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.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.
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.
Das funktioniert leider nicht mit location.hash, denn der Browser springt sofort zur ID (mich hat gewundert, dass das bei Dir klappt ).cmb wrote: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?Holger wrote: Also aktualisiere ich die URL nach dem Scrollen mittels window.location.hash = target im Callback von animate().
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;
}
}
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>';?>
Den Download habe ich ebenfalls aktualisiert, falls noch jemand Lust zu Spielereien hat.
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
Okay, das haben wir ja schon. Die Konfigoption für den Klassennamen dann aber wieder entfernen? Soll mir recht sein.Holger wrote:Jain . Ich fände es gut, wenn eine vernünftige Struktur vorgegeben wird (meinetwegen wie jetzt von Ludwig vorgeschlagen).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.
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.Holger wrote:Dazu passend dann eine OnePage.js mit etwa dem Umfang von heute.
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.
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: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.
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:Das funktioniert leider nicht mit location.hash, denn der Browser springt sofort zur ID (mich hat gewundert, dass das bei Dir klappt ).cmb wrote: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?Holger wrote: Also aktualisiere ich die URL nach dem Scrollen mittels window.location.hash = target im Callback von animate().
Ich habe das jetzt aber gelöst, indem ich nur die Adresszeile mittels window.location.replace(target) aktualisiere.
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.Holger wrote:In der aktualisierten Demo sieht man im Quelltext das Ergebnis. Ich finde das ungemein flexibel und kann partout das "Wespennest" nicht erkennen .
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
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
Hallo zusammen, Hallo Christoph!
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
Das hatte ich mir in onepage.js schon abgeschaut. Nur habe ich Dösbaddel die falsche Ursprungsposition abgespeichert . Na ja, es funktioniert jetzt auf jeden Fall so.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.
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
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
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?
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?
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
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.
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.
Dem scheint noch nicht so zu sein. Da verändert sich nichts, hab's testweise mal auf 3000 gestellt.Online-Demo - Holger wrote:Die Dauer der Animation wird aus der Plugin-Konfiguration übernommen.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: OnePage mit jQuery [abgetrennt von OP-Template "OP_IHave
Dem schließe ich mich unbedingt an!lck wrote:Gute Arbeit Holger!
Es läuft (fast alles) auch bei mir.
Näheres später.
Schöner Effekt - und nötig! Denn auch beim Scrollen sollen die "active" hervorgehoben werden.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.
Super.
Holger wrote:Die Dauer der Animation wird aus der Plugin-Konfiguration übernommen.
Das stellte ich auch fest. Evtl nur ein Variablenname falsch.lck wrote:Dem scheint noch nicht so zu sein. Da verändert sich nichts, hab's testweise mal auf 3000 gestellt.