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

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

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

Post by Holger » Mon Apr 25, 2016 10:59 pm

[Abgetrennt von hier: http://cmsimpleforum.com/viewtopic.php? ... =20#p52250]

Hallo Ludwig,
lck wrote:wollte mal nachfragen, ob du Zeit hattest dich damit zu beschäftigen.
Ich finde, OnePage_XH ist eine tolle Erweiterung für CMSimple_XH, kein anderer CMSimple-Klone kann ähnliches vorweisen. Wäre schade, wenn dieses Plugin an einem Scroll-Script scheitern würde :(
Fände ich auch schade!

Ja, ich habe des für den einen Fall mit jQuery gelöst. Aber nach der von Frank gestarteten Diskussion konnte ich jetzt die selben Probleme / Schwachpunkte feststellen. Die in seiner Demo und in der Diskussion genannten Ideen bzw. Lösungen habe ich dann gleich versucht zu berücksichtigen. Dafür musste ich aber ein paar Änderungen am Code des OnePage-Plugins machen.

Das JS ist ziemlich simpel:

Code: Select all

$(document).ready(function(){
    
    //Smooth-Scroll für alle Links die mit "#" beginnen
    //$('a[href^="#"]').on('click',function (e) {
    //NEIN. Besser mit expliziter Klasse "scrollTo" direkt in li() generiert!
    $('a.scrollTo').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 300, 'swing', function () {
            //Hashes an URL anhängen? Eventuell optional?
            window.location.hash = target;
        });
    });
    
    //Top-Link ein- / ausblenden
    //oder besser mit Wechsel der CSS-Klassen wie bisher?
    $(window).scroll(function(){
        if ($(this).scrollTop() > 300) {
            $('#onepage_toplink').fadeIn();
        } else {
            $('#onepage_toplink').fadeOut();
        }
    });
    //Smooth-Scroll bei Klick auf ID
    $('#onepage_toplink').click(function(){
        $('html, body').animate({scrollTop : 0}, 500);
        return false;
    });

}); 
(ok, die Variablen aus der Konfiguration werden noch nicht berücksichtigt)

Smooth-Scrolling zu IDs wird jetzt nur angewendet, wenn der Link die Klasse "scrollTo" enthält. Der Code für den Top-Link verwendet derzeit keine Klassen zum verstecken bzw. anzeigen des Links. Das könnte man aber noch ändern (ein einfaches toggleClass() ), falls die alte Variante besser geeignet ist.
Das JS wird im Edit-Modus nicht geladen, so gibt es keine Probleme bei der Bearbeitung der Seiten. Allerdings muss der Top-Link dann initial per CSS versteckt sein, da er ansonsten evtl. über dem Editor angezeigt wird.

Änderungen in Li.php
- renderAnchorStartTag($i) liefert jetzt links mit der Klasse "scrollTo"

Code: Select all

function renderAnchorStartTag($i)
    {
        //HI $x = $this->shallOpenInNewWindow($i) ? '" target="_blank' : '';
        $x = $this->shallOpenInNewWindow($i) ? '" target="_blank' : '" class="scrollTo';
        return $this->anchor($this->ta[$i], $x);
    }
- function anchor($i, $x): außer im Edit-Modus ist der Pfad ist jetzt nicht mehr in Menü-Links enthalten (nur #Seite statt /pfad/#seite)

Code: Select all

protected function anchor($i, $x)
    {
        global $sn, $u, $cf, $edit, $plugin_cf;

        //HI $html = '<a href="' . $sn;
        $html = '<a href="';
        if (XH_ADM && !$edit) {
            //HI $html .=  '?' . $u[$i];
            $html .= $sn . '?' . $u[$i];
        }
        $html .= (XH_ADM && $edit) ? '?' : '#';
        if (isset($u[$i])) {
            if ($plugin_cf['onepage']['url_numeric'] && !(XH_ADM && $edit)) {
                $html .= $i;
            } else {
                $html .= $u[$i];
            }
        }
        $html .= $x . '">';
        return $html;
    }
}
Änderungen in Controller.php:
in dispatch(): JS im Edit-Mode erst überhaupt nicht laden...

Code: Select all

public static function dispatch()
    {
        global $edit, $plugin_cf;
        
        if (!$edit) //HI
            self::emitJavaScript();
        if (XH_ADM) {
            if ($edit) {
                $template = trim($plugin_cf['onepage']['admin_template']);
                if ($template != '') {
                    self::setTemplate($template);
                }
            }
            if (function_exists('XH_registerStandardPluginMenuItems')) {
                XH_registerStandardPluginMenuItems(false);
            }
            if (self::isAdministrationRequested()) {
                self::handleAdministration();
            }
        }
    }
Mit den Änderungen scheint mir die Sache deutlich flexibler und mit weniger potentiellen Inkompatibilitäten zu anderen Tools zu sein.

LG
Holger

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by cmb » Tue Apr 26, 2016 9:02 am

Holger wrote:[…]
Mit den Änderungen scheint mir die Sache deutlich flexibler und mit weniger potentiellen Inkompatibilitäten zu anderen Tools zu sein.
Zunächst mal vielen Dank für die Ausarbeitung, Holger. Und ja, zumindest die Verwendung einer eigenen Klasse `scrollTo` ist wohl sehr sinnvoll. Unsicher bin ich mittlerweile, ob die Onepager JavaScript erfordern sollen und können. Ursprünglich hatte ich Onepage_XH so konzipiert, dass die Site auch ohne JS funktioniert, was schon nicht ganz ohne war, aber mit diesen Änderungen würde das wohl nicht mehr möglich sein (oder noch schwieriger zu realisieren). Umgekehrt könnte man den Code wohl noch vereinfachen, wenn JS vorausgesetzt werden kann.

Ich selbst finde es eigentlich furchtbar, wenn ich JS deaktiviere und auf eine Site komme, wo dann nichts funktioniert (bisweilen nicht einmal irgendwas dargestellt wird), aber da bin ich wohl ein Ausnahmefall. Soll ich also Onepage_XH ändern, so dass JavaScript erfordert wird? Was meint Ihr?

Prinzipiell ist es auch denkbar, das ganze so zu konzipieren, dass einem Besucher ohne JS eine alternative Darstellung durch ein anderes Template angeboten wird. Zumindest falls dann ein Cookie gesetzt wird (rechtlich nicht ganz ohne; könnte aber durch explizites Opt-In sauber umgesetzt werden), ließe sich das wohl leicht machen. Und vielleicht geht es auch ohne Cookie.

Programmiertechnische Anmerkung: bei solchem Code wird mir schwindelig. Wird Zeit für einen Frühjahrsputz.
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Tue Apr 26, 2016 9:32 am

cmb wrote:Zunächst mal vielen Dank für die Ausarbeitung, Holger.
Gerne.
cmb wrote:Unsicher bin ich mittlerweile, ob die Onepager JavaScript erfordern sollen und können.
Hmm, ich habe es jetzt nicht wirklich getestet, aber meiner Meinung nach sollte die Seite auch ohne die paar Zeile jQuery laufen. Nur eben nicht "smooth". Teste es doch mal. Generiert werden doch ganz normal funktionierende Menü-Links mit einer ID im href. Vielleicht muss beim Top-Link noch nachgebessert werden (z.B. sichtbar, wenn kein JS aktiv usw.)?
cmb wrote:Programmiertechnische Anmerkung: bei solchem Code wird mir schwindelig. Wird Zeit für einen Frühjahrsputz.
Da hab' ich noch deutlich schlimmere Sachen im Repertoire. Für so viel putzen genügt das ganze Frühjahr nicht...

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by cmb » Tue Apr 26, 2016 10:15 am

Holger wrote:
cmb wrote:Unsicher bin ich mittlerweile, ob die Onepager JavaScript erfordern sollen und können.
Hmm, ich habe es jetzt nicht wirklich getestet, aber meiner Meinung nach sollte die Seite auch ohne die paar Zeile jQuery laufen. Nur eben nicht "smooth". Teste es doch mal.
Mach ich bei Gelegenheit. Aber zumindest das fehlende $sn dürfte u.U. Probleme machen.
Holger wrote:
cmb wrote:Programmiertechnische Anmerkung: bei solchem Code wird mir schwindelig. Wird Zeit für einen Frühjahrsputz.
Da hab' ich noch deutlich schlimmere Sachen im Repertoire. Für so viel putzen genügt das ganze Frühjahr nicht...
Ja, leider…
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Tue Apr 26, 2016 10:22 am

cmb wrote:Aber zumindest das fehlende $sn dürfte u.U. Probleme machen.
Das braucht es nur im Edit-Mode -- und da ist es ja nach wie vor vorhanden.
cmb wrote:Mach ich bei Gelegenheit.
Mach' Dir keinen Stress. Ich hab's ja fertig vorliegen und schau' nachher mal nach.

LG
Holger

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by frase » Tue Apr 26, 2016 11:10 am

Hallo Ludwig, hallo Holger, hallo Christoph,

hier ist der Frank. Mir war so, als hätte jemand meinen Namen erwähnt :mrgreen:

Alles sehr interessant, was ihr hier so diskutiert. Schade, dass ich nur durch Zufall das Thema fand.

Wie ich das so sehe, gibt es jetzt schon mindestens drei Versionen des Onepage-Plugins. Christophs Original, Holgers mit Änderungen und meine - wobei ich bei meiner sogar soweit ging, dass ich das Plugin umbenannte um Verwechslungen zu vermeiden. (Christoph weiß Bescheid)

Was haltet ihr davon, wenn wir unsere Erfahrungen und Wünsche (Plugin betreffend) zusammentragen und sie dann dem Christoph ordentlich verpackt erfurchtsvoll vor die Füße legen?

Vielleicht ist dazu gar ein neues Thema im Forum nötig. Man müsste nämlich auch mal prinzipiell die Anforderungen an einen Onepager klären. Das verzettelt sich sonst zu sehr.

Die JavaScript-Frage stellt Christoph völlig zu Recht. Mein Argument: Onepager sind EyeCatcher und nur in speziellen Fällen sinnvoll. Wer eine richtige Website mit 'ner Menge Inhalt betreiben will, sollte keinen Onepager verwenden. Googled man nach "html5 responsive template" findet man 'ne Menge solcher Dinger. Komischerweise haben die fast alle die gleiche Struktur (Kleinunternehmen) und verwenden alle 'ne Menge Scripte. Es sind also immer irgendwelche (billigen) Effects nötig.
JQuery kann einem da viel Arbeit abnehmen.

Leider kann ich nicht viel programmiertechnisches Knoffhoff beitragen. Gerade habe ich mein Problem mit internen Ankerzielen gelöst. Fragt mich mal wie. Weiß nicht.
Von meiner speziellen Spielwiese werdet ihr sicher nichts lernen können, vielleicht nur, wie man es NICHT macht.
Falls es weiterhilft: Ich könnte ein Zip von meinem Experiment machen, inkl. Demo-Inhalt, Plugins und Template und irgendjemandem per Mail rüberschieben. Ungepackt sind es mehr als 20MB. Also Platz sollte im Postfach sein.

Vielleicht kann Christoph die verschiedenen Ansätze irgendwie zusammenführen?

Sorry, für's Einmischen.

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Tue Apr 26, 2016 12:12 pm

Hallo Frank,
frase wrote:Alles sehr interessant, was ihr hier so diskutiert. Schade, dass ich nur durch Zufall das Thema fand.
Ich war drauf und dran Dich kurzfristig auf den Thread aufmerksam zu machen. Zumal ich in Deiner Demo ja die Anregungen für die Änderungen oben gefunden habe.
frase wrote:Wie ich das so sehe, gibt es jetzt schon mindestens drei Versionen des Onepage-Plugins. Christophs Original, Holgers mit Änderungen und meine - wobei ich bei meiner sogar soweit ging, dass ich das Plugin umbenannte um Verwechslungen zu vermeiden. (Christoph weiß Bescheid)

Was haltet ihr davon, wenn wir unsere Erfahrungen und Wünsche (Plugin betreffend) zusammentragen und sie dann dem Christoph ordentlich verpackt erfurchtsvoll vor die Füße legen?
Gute Idee. Zumindest könnte man Christoph Pull-Requests auf GitHub vorschlagen. Falls die Änderungen gut sind, kann er sie so zumindest leicht übernehmen.
frase wrote:Vielleicht ist dazu gar ein neues Thema im Forum nötig. Man müsste nämlich auch mal prinzipiell die Anforderungen an einen Onepager klären. Das verzettelt sich sonst zu sehr.
Ja. Finde ich gut. Warten wir ab, was Ludwig dazu sagt. Er hat sicher auch noch einige Sachen in der Warteschleife.
frase wrote:Die JavaScript-Frage stellt Christoph völlig zu Recht.
Darüber herrschen hier sehr unterschiedliche Meinungen. Gut also, wenn das "Grundwerkzeug" auch ohne JS läuft.
frase wrote:Gerade habe ich mein Problem mit internen Ankerzielen gelöst. Fragt mich mal wie. Weiß nicht.
Gestern Nacht habe ich mal kurz danach geschaut: zumindest zu dem Zeitpunkt war im DOM der Seite keine ID enthalten, die der Link hätte anspringen können.
frase wrote:Falls es weiterhilft: Ich könnte ein Zip von meinem Experiment machen, inkl. Demo-Inhalt, Plugins und Template und irgendjemandem per Mail rüberschieben. Ungepackt sind es mehr als 20MB. Also Platz sollte im Postfach sein.
Ob es hilft, weiß ich nicht. Aber mich persönlich würden einige Dinge, die Du dort realisiert hast, doch schon sehr stark interessieren. Und, BTW, es schaut echt super aus!
frase wrote:Sorry, für's Einmischen.
Ganz im Gegenteil!

LG
Holger

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by cmb » Tue Apr 26, 2016 12:43 pm

frase wrote:Was haltet ihr davon, wenn wir unsere Erfahrungen und Wünsche (Plugin betreffend) zusammentragen und sie dann dem Christoph ordentlich verpackt erfurchtsvoll vor die Füße legen?
Alles zusammenzutragen ist auf jeden Fall sinnvoll, aber ehrfurchtsvoll vor die Füße legen wäre übertrieben. :)

Ich habe aber ohnehin schon versucht, wenigstens alles was bisher konkret vorgeschlagen bzw. gemeldet wurde, im Issue-Tracker zu vermerken. Wer will, kann da gerne mal drüber schauen und ggf. Kommentare posten. Und natürlich sind Pull-Requests willkommen.
frase wrote:Vielleicht kann Christoph die verschiedenen Ansätze irgendwie zusammenführen?
Das würde ich gerne. Falls es nun gar nicht möglich sein sollte, dann gäbe es auch die Möglichkeit das Github-Repo zu forken – so besteht zumindest die Möglichkeit, dass ein Fork später aktuell gehalten werden kann (ist mit Git-Kenntnissen wesentlich einfacher, als das manuell zu machen).
frase wrote:JQuery kann einem da viel Arbeit abnehmen.
Ja, kann es, vor allem durch vorhandene Plugins. Allerdings mag ich persönlich jQuery gar nicht: die API finde ich unmöglich – warum wird "alles" (Selektion, Konstruktion, Initialisierung, und was weiß ich nicht noch alles) als eine einzige Konstruktor-Funktion angeboten, die dann auch noch einen sehr eigenartigen Namen hat? Und den Overhead, der durch das selbst gebaute Event-Listener-System entsteht, mag ich auch nicht. Früher war dieses System wichtig, aber heute habe ich Zweifel daran. Aber ohne die API zu ändern, wird jQuery dabei bleiben müssen.

Aber egal, ich kann es ja so machen, dass der Anwender selbst auswählen kann, ob er nun eine jQuery-Variante verwenden will, oder eben natives JS.
frase wrote:Falls es weiterhilft: Ich könnte ein Zip von meinem Experiment machen, inkl. Demo-Inhalt, Plugins und Template und irgendjemandem per Mail rüberschieben. Ungepackt sind es mehr als 20MB. Also Platz sollte im Postfach sein.
Du kannst es mir gerne schicken (bin aber nichts sicher ob 20MB durchgehen; glaube aber schon). Alternativ könntest Du es natürlich auch irgendwo im Web zum Download anbieten.

Ich sehe gerade, dass Holger in der Zwischenzeit gepostet hat – da brauche ich erst mal nichts mehr weiter zu schreiben. :)

Na ja, eins noch: Franks Kontaktformular und die Anmerkungen dazu sind gut – da gibt es mit dem Standardformular schon ein paar Probleme. Zumindest falls JS verfügbar ist, könnte man das Standardformular aber auch per Ajax versenden, was auch allgemein (nicht nur für Onepager) ganz sinnvoll sein könnte (v.a. wenn das Formular per Pluginaufruf eingebunden wird, und es recht weit unten auf der Seite steht). Ist auf jeden Fall eleganter als eine Anchor-basierte Lösung.
Christoph M. Becker – Plugins for CMSimple_XH

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by Holger » Tue Apr 26, 2016 1:09 pm

cmb wrote:Allerdings mag ich persönlich jQuery gar nicht
Mit nativem Javascript konnte ich das eigentliche Problem des Threads nicht lösen. Das mag an meinen wirklich begrenzten JS-Kenntnissen liegen.
Trotzdem schreit der ganze moderne Scroll-Kram ja nach einer jQuery-Lösung -- besonders wenn es um gute Browserkompatibilität geht.

LG
Holger

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

Re: OnePage-Template "OP_IHaveADream" (responsive)

Post by frase » Tue Apr 26, 2016 2:19 pm

Hm, an wen und wohin schicke ich denn nun :?:
Na ja, ich muss sowieso vorher noch ein paar Leichen rauslöschen. Das wird dann frühestens morgen.
(Um meinen Quellcode zu lesen, sollte man psychisch gefestigt sein.)

Wir sollten auf jeden Fall noch Ludwigs Meinung hören.
Trotzdem schreit der ganze moderne Scroll-Kram ja nach einer jQuery-Lösung
und nicht nur der. Ich zahle auch nicht gerne Steuern, aber es hilft Ärger zu vermeiden und macht es leichter ;)

Auf normalen CMSimple-Seiten kann ich auch anders (richardglahn.de). Geht zur Not auch völlig ohne Javascript oder modernen Schnickschnack - falls gewünscht (wie ebenda). Natürlich is was drin (Accordion) - aber funktzt eben auch ohne.

Vorschlag: Javascript bzw. jQuery für Onepage wird als erstes festgeklopft. Schon wegen des Scrollings. Und nicht wegen einiger Vorlieben, sonder wegen Notwendigkeit.

Post Reply