5202

ein Blog über technische Fragen zu Blogger

Mobile Blogger Vorlage: Wischgesten ausschalten

von

Blogger hat bekanntlich eine mobile Vorlage für Smartphones & Co. im Programm. Auch dort hat sich in letzter Zeit einiges getan, unter anderem wurden Wischgesten eingeführt, um innerhalb eines Posts zu neueren/älteren Posts zu wechseln.

Das Problem ist, diese Wischgesten sind nicht besonders gut implementiert. Bei jeder Berührung, die nicht strikt horizontal ist, wechselt ihr auf der mobilen Vorlage den Post. Das ist ... nervig! Unabhängig von einander haben mich nun verschiedene Blogger gefragt, wie man diese Wischgesten ausschalten kann. Das geht, ist aber nicht ganz trivial ...

Wischgesten

Eine kurze Überlegung vorneweg: Die Wischgesten in der mobilen Vorlage von Blogger werden durch ein touchmove Event in der zentralen widget.js Datei erzeugt, die zwangsweise über den Server von außen eingespielt wird. Ihr könntet diese Datei komplett ausschalten - habt dann aber auch verschieden andere Scripte nicht. Das ist also nur Extremfälle eine Lösung.

Ich habe, als ich über dieses Problem nachdachte, verschiedene andere Sachen ausprobiert, unter anderem, das touchmove Event zu überschreiben oder auf preventdefault [=es macht gar nichts] zu setzen. Das hat mehr oder weniger funktioniert, aber auch Nebeneffekte gehabt, die ich eher ungut fand.

Insgesamt ist die Idee, auf einem Smartphone mit Javascript andere Scripts zu manipulieren, vermutlich keine besonders gute Idee. Ich habe dann eine schlauere Lösung gefunden.

Die Lösung

Was macht das Script bei einer vertikalen Wischgeste? Es lädt ein Link. Was passiert, wenn es diesen Link nicht gibt? Dann macht es gar nichts. Einfachste Lösung ist folglich, die beiden Links aus den Layout zu nehmen.

Damit das funktioniert, müsst ihr zunächst das mobile Layout auf 'benutzerdefiniert' umstellen und zwar im Dashboard unter Vorlage › Mobile Vorlage auswählen. Falls ihr das nicht macht, benützt Blogger eine mobile Standardvorlage, die Serverseitig erzeugt wird.

Unter Vorlage › HTML bearbeiten sucht ihr nun das Blog-Widget Blog1 und dort <b:includable id='mobile-nextprev'>.

Verwechselt das _nicht_ mit <b:includable id='nextprev'>!

Zwischen diesen beiden Tags stehen 22 Zeilen Code:

<b:includable id='mobile-nextprev'>
//Code, den ihr im nächsten Schritt ersetzt
</b:includable>

Ihr _ersetzt_ den Code damit:

  <div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId   &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>
  </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId   &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>
  </b:if>
    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

  </div>
  <div class='clear'/>

Fertig! Ihr speichert den Spass und könnt dann die mobile Vorlage von eurem Blog auf dem Smartphone ausprobieren - wenn alles geklappt hat, gibt es nun keine Wischgesten mehr.

Ich bekomme fürchterliche Fehlermeldungen, was soll ich tun????einself

Falls ihr irgend etwas falsch gemacht habt, bekommt ihr eine Fehlermeldung und könnt nicht speichern. Das macht gar nichts! Schließt einfach das Fenster 'HTML bearbeiten' und fangt von vorne an. Es kann nichts schief gehen - im schlimmsten Fall setzt das Blog-Widget Blog1 zurück, dann habt ihr quasi ein 'neues' Widget.

Fragen, Anmerkungen?

Ist irgendetwas unklar, klappt was nicht? Dann fragt nach :D