Padloper (ProcessWire Modul)

2018-03-15T20:29:08Z

149.172.225.28: /* Lokalisierung */

Padloper ist ein ProcessWire Pro Modul ( kostenpflichtig ) für die Umsetzung von eCommerce.

* [[:File:PaymentInvoice-master.zip]] Invoice Modul
* [[:File:PaymentModule-master.zip]] Payment Modul
* [[:File:padloper3-1.zip]] Padloper Modul
* [[:File:padloper-1_1_2.zip]] Padloper Modul (alte Version)

== Kurzanleitung ==
=== Installation ===
* Upload PaymentModule into ''/site/modules/PaymentModule'' and install it through ProcessWire admin
* Upload PaymentInvoice into ''/site/modules/PaymentInvoice'' and install it through ProcessWire admin
* Install core module "'''ProFields: Page Table'''" if not already installed
* Upload Padloper into ''/site/modules/Padloper/'' and install PadLoper modules through ProcessWire admin (please note that there is separate distro for PW 3.0)
Auf die Rechte achten wenn was nicht gefunden wird. Im Payment Module kann bei Choose active payment modules noch nichts ausgewählt werden solange nicht die erforderlichen anderen Module installiert sind. Kann man aber auch im Nachgang machen. Eventuell in anderer Reichenfolge installieren ( Todo -> Test)
=== Shopping Cart Setup ===

There are very little configuration when using Padloper. PadCart is responsible for most common store and products settings, like currency and stock management.

* Go to '''Modules => PadCart => Settings'''
* Choose '''pad_price''' as Price Field
* Since we don't manage any stock, check the "Allow negative stock".
* Choose "basic-page" template as Product template
* Feel free to fill other fields too if you want.
* Go to Modules => PaymentModule => Settings and setup Invoice as an active payment module

=== Einzelprodukt Template ===
Wir erstellen ein Template für ein einzelnes Produkt. Es kann jedes Template genutzt werden. Voraussetzung ist lediglich ein float oder integer field, welches Padloper für den Preis nutzen kann.

* Füge das Feld pad_price zum Template hinzu (Das Feld muß ein float oder decimal type sein, kann aber auch andere Namen haben (s.o.))
* Lege ein paar Produktseiten an und gib Preise in das Feld ein.
* Füge einen Add to Cart Button in deinem Template ein:

$content .= $modules->get("PadRender")->addToCart();
NOTE: If you are NOT using delayed output in your template files, then the required code is:
echo $modules->get("PadRender")->addToCart();

Jetzt sollte ma einen "Add cart" button in den Seiten sehen. Im Moment sieht man nur in der URL, dass ein Produkt hinzugefügt wurde:
www.yourstore.com/about/?addedProduct=1001 (where 1001 is your product's page id)
Man kann diese Info nutzen um eine "product added to the cart" Message auszugeben

Wenn man das Formular per AJAX ausgibt bekommt man die selben Parameter per JSON

=== Warenkorb Template ===
* Lege eine Seite für den Warenkorb an der Warenkorb wird mit folgendem Code ausgegeben.
$content .= $modules->get("PadRender")->editCart();
Es stehen sofort Möglichkeiten zum Bearbeiten zur Verfügung

=== Checkout Template ===
Der Einfachheit halber hier nur Rechnung.

* Shipping Fixed Modul installieren und Konfiguration ausfüllen
* Neues Template für den Checkout erstellen z.B. checkout.php
* Im Template müssen url Segments erlaubt sein
* Checkout Code hinterlegen

<syntaxhighlight lang="php">
$checkout = $modules->get("PadOnePageCheckout");
// $checkout = $modules->get("PadCheckout"); // This is the old one, use above for most streamlined checkout
$checkout->setShippingModule("ShippingFixed"); // This means that all orders will use this specific shipping module
$content = $checkout->render(); // Again, just echo this if you are not using delayed output
</syntaxhighlight>
* Seite mit diesem Template anlegen.

Nach dem Einkauf, kann man die Bestellungen unter
Admin > Setup => Padloper Orders ansehen oder bearbeiten.

=== Customizing ===
Die meisten Teile von Padloper lassen sich durch eigene Templates modifizieren. Man kopiert sich die benötigten Templates von
site/modules/Padloper/templates/ *
nach
site/templates/padloper/*
und kann sie dort bearbeiten. Die Kopien in diesem Verzeichnis haben beim rendern Vorrang.

=== Kundeninformationen einstellen ===
Go into
templates => padorder.
Now all the fields that are inside pad_customer and pad_customer_END are fields that we are asking from customer. You can move and edit those things freely by clicking their name in the list. Feel free to add some totally custom fields into the mix also and removing the things you don't need. But please, do keep the email address, so that your store can send emails to your customers about the order process. Please note that if you use some of the more exotic fieldtypes, you might need their css&js files in your checkout template.

== Lokalisierung ==
Über das Language Modul kann automatisch ein Index angelegt werden. Wenn man alles übersetzt hat, kann man die Übersetzung exportieren.

Padloper (ProcessWire Modul)

2018-03-15T20:17:53Z

149.172.225.28:

Padloper ist ein ProcessWire Pro Modul ( kostenpflichtig ) für die Umsetzung von eCommerce.

* [[:File:PaymentInvoice-master.zip]] Invoice Modul
* [[:File:PaymentModule-master.zip]] Payment Modul
* [[:File:padloper3-1.zip]] Padloper Modul
* [[:File:padloper-1_1_2.zip]] Padloper Modul (alte Version)

== Kurzanleitung ==
=== Installation ===
* Upload PaymentModule into ''/site/modules/PaymentModule'' and install it through ProcessWire admin
* Upload PaymentInvoice into ''/site/modules/PaymentInvoice'' and install it through ProcessWire admin
* Install core module "'''ProFields: Page Table'''" if not already installed
* Upload Padloper into ''/site/modules/Padloper/'' and install PadLoper modules through ProcessWire admin (please note that there is separate distro for PW 3.0)
Auf die Rechte achten wenn was nicht gefunden wird. Im Payment Module kann bei Choose active payment modules noch nichts ausgewählt werden solange nicht die erforderlichen anderen Module installiert sind. Kann man aber auch im Nachgang machen. Eventuell in anderer Reichenfolge installieren ( Todo -> Test)
=== Shopping Cart Setup ===

There are very little configuration when using Padloper. PadCart is responsible for most common store and products settings, like currency and stock management.

* Go to '''Modules => PadCart => Settings'''
* Choose '''pad_price''' as Price Field
* Since we don't manage any stock, check the "Allow negative stock".
* Choose "basic-page" template as Product template
* Feel free to fill other fields too if you want.
* Go to Modules => PaymentModule => Settings and setup Invoice as an active payment module

=== Einzelprodukt Template ===
Wir erstellen ein Template für ein einzelnes Produkt. Es kann jedes Template genutzt werden. Voraussetzung ist lediglich ein float oder integer field, welches Padloper für den Preis nutzen kann.

* Füge das Feld pad_price zum Template hinzu (Das Feld muß ein float oder decimal type sein, kann aber auch andere Namen haben (s.o.))
* Lege ein paar Produktseiten an und gib Preise in das Feld ein.
* Füge einen Add to Cart Button in deinem Template ein:

$content .= $modules->get("PadRender")->addToCart();
NOTE: If you are NOT using delayed output in your template files, then the required code is:
echo $modules->get("PadRender")->addToCart();

Jetzt sollte ma einen "Add cart" button in den Seiten sehen. Im Moment sieht man nur in der URL, dass ein Produkt hinzugefügt wurde:
www.yourstore.com/about/?addedProduct=1001 (where 1001 is your product's page id)
Man kann diese Info nutzen um eine "product added to the cart" Message auszugeben

Wenn man das Formular per AJAX ausgibt bekommt man die selben Parameter per JSON

=== Warenkorb Template ===
* Lege eine Seite für den Warenkorb an der Warenkorb wird mit folgendem Code ausgegeben.
$content .= $modules->get("PadRender")->editCart();
Es stehen sofort Möglichkeiten zum Bearbeiten zur Verfügung

=== Checkout Template ===
Der Einfachheit halber hier nur Rechnung.

* Shipping Fixed Modul installieren und Konfiguration ausfüllen
* Neues Template für den Checkout erstellen z.B. checkout.php
* Im Template müssen url Segments erlaubt sein
* Checkout Code hinterlegen

<syntaxhighlight lang="php">
$checkout = $modules->get("PadOnePageCheckout");
// $checkout = $modules->get("PadCheckout"); // This is the old one, use above for most streamlined checkout
$checkout->setShippingModule("ShippingFixed"); // This means that all orders will use this specific shipping module
$content = $checkout->render(); // Again, just echo this if you are not using delayed output
</syntaxhighlight>
* Seite mit diesem Template anlegen.

Nach dem Einkauf, kann man die Bestellungen unter
Admin > Setup => Padloper Orders ansehen oder bearbeiten.

=== Customizing ===
Die meisten Teile von Padloper lassen sich durch eigene Templates modifizieren. Man kopiert sich die benötigten Templates von
site/modules/Padloper/templates/ *
nach
site/templates/padloper/*
und kann sie dort bearbeiten. Die Kopien in diesem Verzeichnis haben beim rendern Vorrang.

=== Kundeninformationen einstellen ===
Go into
templates => padorder.
Now all the fields that are inside pad_customer and pad_customer_END are fields that we are asking from customer. You can move and edit those things freely by clicking their name in the list. Feel free to add some totally custom fields into the mix also and removing the things you don't need. But please, do keep the email address, so that your store can send emails to your customers about the order process. Please note that if you use some of the more exotic fieldtypes, you might need their css&js files in your checkout template.

== Lokalisierung ==

Padloper (ProcessWire Modul)

2018-03-15T20:14:12Z

149.172.225.28: /* Checkout Process */

Padloper ist ein ProcessWire Pro Modul ( kostenpflichtig ) für die Umsetzung von eCommerce.

* [[:File:PaymentInvoice-master.zip]] Invoice Modul
* [[:File:PaymentModule-master.zip]] Payment Modul
* [[:File:padloper3-1.zip]] Padloper Modul
* [[:File:padloper-1_1_2.zip]] Padloper Modul (alte Version)

== Kurzanleitung ==
=== Installation ===
* Upload PaymentModule into ''/site/modules/PaymentModule'' and install it through ProcessWire admin
* Upload PaymentInvoice into ''/site/modules/PaymentInvoice'' and install it through ProcessWire admin
* Install core module "'''ProFields: Page Table'''" if not already installed
* Upload Padloper into ''/site/modules/Padloper/'' and install PadLoper modules through ProcessWire admin (please note that there is separate distro for PW 3.0)
Auf die Rechte achten wenn was nicht gefunden wird. Im Payment Module kann bei Choose active payment modules noch nichts ausgewählt werden solange nicht die erforderlichen anderen Module installiert sind. Kann man aber auch im Nachgang machen. Eventuell in anderer Reichenfolge installieren ( Todo -> Test)
=== Shopping Cart Setup ===

There are very little configuration when using Padloper. PadCart is responsible for most common store and products settings, like currency and stock management.

* Go to '''Modules => PadCart => Settings'''
* Choose '''pad_price''' as Price Field
* Since we don't manage any stock, check the "Allow negative stock".
* Choose "basic-page" template as Product template
* Feel free to fill other fields too if you want.
* Go to Modules => PaymentModule => Settings and setup Invoice as an active payment module

=== Einzelprodukt Template ===
Wir erstellen ein Template für ein einzelnes Produkt. Es kann jedes Template genutzt werden. Voraussetzung ist lediglich ein float oder integer field, welches Padloper für den Preis nutzen kann.

* Füge das Feld pad_price zum Template hinzu (Das Feld muß ein float oder decimal type sein, kann aber auch andere Namen haben (s.o.))
* Lege ein paar Produktseiten an und gib Preise in das Feld ein.
* Füge einen Add to Cart Button in deinem Template ein:

$content .= $modules->get("PadRender")->addToCart();
NOTE: If you are NOT using delayed output in your template files, then the required code is:
echo $modules->get("PadRender")->addToCart();

Jetzt sollte ma einen "Add cart" button in den Seiten sehen. Im Moment sieht man nur in der URL, dass ein Produkt hinzugefügt wurde:
www.yourstore.com/about/?addedProduct=1001 (where 1001 is your product's page id)
Man kann diese Info nutzen um eine "product added to the cart" Message auszugeben

Wenn man das Formular per AJAX ausgibt bekommt man die selben Parameter per JSON

=== Warenkorb Template ===
* Lege eine Seite für den Warenkorb an der Warenkorb wird mit folgendem Code ausgegeben.
$content .= $modules->get("PadRender")->editCart();
Es stehen sofort Möglichkeiten zum Bearbeiten zur Verfügung

=== Checkout Template ===
Der Einfachheit halber hier nur Rechnung.

* Shipping Fixed Modul installieren und Konfiguration ausfüllen
* Neues Template für den Checkout erstellen z.B. checkout.php
* Im Template müssen url Segments erlaubt sein
* Checkout Code hinterlegen

<syntaxhighlight lang="php">
$checkout = $modules->get("PadOnePageCheckout");
// $checkout = $modules->get("PadCheckout"); // This is the old one, use above for most streamlined checkout
$checkout->setShippingModule("ShippingFixed"); // This means that all orders will use this specific shipping module
$content = $checkout->render(); // Again, just echo this if you are not using delayed output
</syntaxhighlight>
* Seite mit diesem Template anlegen.

Nach dem Einkauf, kann man die Bestellungen unter
Admin > Setup => Padloper Orders ansehen oder bearbeiten.

=== Customizing ===
Die meisten Teile von Padloper lassen sich durch eigene Templates modifizieren. Man kopiert sich die benötigten Templates von
site/modules/Padloper/templates/ *
nach
site/templates/padloper/*
und kann sie dort bearbeiten. Die Kopien in diesem Verzeichnis haben beim rendern Vorrang.

=== Kundeninformationen einstellen ===
Go into
templates => padorder.
Now all the fields that are inside pad_customer and pad_customer_END are fields that we are asking from customer. You can move and edit those things freely by clicking their name in the list. Feel free to add some totally custom fields into the mix also and removing the things you don't need. But please, do keep the email address, so that your store can send emails to your customers about the order process. Please note that if you use some of the more exotic fieldtypes, you might need their css&js files in your checkout template.

Padloper (ProcessWire Modul)

2018-03-15T20:01:28Z

149.172.225.28: /* Kurzanleitung */

Padloper (ProcessWire Modul)

2018-03-15T19:29:59Z

149.172.225.28: /* Product Template */

Padloper (ProcessWire Modul)

2018-03-15T19:14:48Z

149.172.225.28: /* Kurzanleitung */

Padloper (ProcessWire Modul)

2018-03-15T16:00:05Z

149.172.225.28: Die Seite wurde neu angelegt: „Padloper ist ein ProcessWire Pro Modul ( kostenpflichtig ) für die Umsetzung von eCommerce. == Installation ==“

Padloper ist ein ProcessWire Pro Modul ( kostenpflichtig ) für die Umsetzung von eCommerce.

== Installation ==

PayPal App erstellen

2018-03-15T15:58:52Z

149.172.225.28: Die Seite wurde neu angelegt: „== Einführung == PayPal bietet verschiedene Möglichkeiten eigene PayPal Zahlungsmöglichkeiten auf deiner Website zu realisieren. Inzwischen läuft Zugriff…“

== Einführung ==
PayPal bietet verschiedene Möglichkeiten eigene PayPal Zahlungsmöglichkeiten auf deiner Website zu realisieren.
Inzwischen läuft Zugriff über APIs über einen ausgelagerten Service (Braintree)
* Express Checkout -> Paypal Button. Die einfachste Lösung für ein paar Produkte.
* Braintree Direct (End-to-end payment solution via web oder app). API Steuerung
** Eigenes Branding
** Control Panel mit reporting Funktionen
** Zusätzliche Sicherheitstools (Fraud Prodection, Option für 3D Secure)
** Eventbasierte Hooks Möglich
* Invoicing (Rechnungstellung)
* Marketplaces (für Commerce Plattformen)
* Payout (Geld an viele auszahlen)

== Braintree Direct Zahlung realisieren ==
=== Einfaches Beispiel über die Braintree Sandbox ===
* Paypal Account einrichten
* auf developer.paypal.com Braintree wählen, dort findet man einen Link um sich einen Braintree Account zuzulegen. sandbox.braintreegateway.com/
TODO

Paypal

2018-03-15T14:03:34Z

149.172.225.28:

== Verkaufsmöglichkeiten ==
=== Einzelbutton ===
https://www.paypal.com/de/cgi-bin/webscr?cmd=_singleitem-intro-outside

=== PayPal API ===
[[PayPal App erstellen]]

Sassify (ProcessWire Modul)

2018-03-12T18:13:55Z

149.172.225.28:

Beispiel zum Einrichten

CSS Folder Path
/Users/stephanschlegel/www/04-CMS/ProcessWire/03-Sites/Materialize-01/site/templates/vendors/materialize/css/

CSS Folder URL
http://localhost/www/04-CMS/ProcessWire/03-Sites/Materialize-01/site/templates/vendors/materialize/css/

Compiled CSS File Name
materialize.css

SCSS Folder Path
/Users/stephanschlegel/www/04-CMS/ProcessWire/03-Sites/Materialize-01/site/templates/vendors/materialize/sass/

SCSS Entry File Name
materialize.scss
Achtung manchmal kann Sassify sein eigenes File nicht überschreiben. Daher vorm neu Erstellen einfach das alte Zielfile löschen.
Es gibt keine Fehlermeldung in diesem Fall. Wenn er das File erzeugt dauert es allerdings etwas, daher ist es verdächtig wenn es zu schnell geht.

Sassify (ProcessWire Modul)

2018-03-12T18:13:41Z

149.172.225.28: Die Seite wurde neu angelegt: „Beispiel zum Einrichten CSS Folder Path /Users/stephanschlegel/www/04-CMS/ProcessWire/03-Sites/Materialize-01/site/templates/vendors/materialize/css/ CSS Fo…“

Beispiel zum Einrichten

CSS Folder Path
/Users/stephanschlegel/www/04-CMS/ProcessWire/03-Sites/Materialize-01/site/templates/vendors/materialize/css/

CSS Folder URL
http://localhost/www/04-CMS/ProcessWire/03-Sites/Materialize-01/site/templates/vendors/materialize/css/

Compiled CSS F�ile Name
materialize.css

SCSS Folder Path
/Users/stephanschlegel/www/04-CMS/ProcessWire/03-Sites/Materialize-01/site/templates/vendors/materialize/sass/

SCSS Entry File Name
materialize.scss
Achtung manchmal kann Sassify sein eigenes File nicht überschreiben. Daher vorm neu Erstellen einfach das alte Zielfile löschen.
Es gibt keine Fehlermeldung in diesem Fall. Wenn er das File erzeugt dauert es allerdings etwas, daher ist es verdächtig wenn es zu schnell geht.

Launchpad Remote Scripts

2018-03-11T16:17:34Z

149.172.225.28:

== Links ==
[[Ableton Live]]
== Launchpad 95 Einleitung ==
Super nützliches Tool mit Drum Step Sequencer mode to edit midi clips, a medodic step sequencer, and Device Controller mode to edit any parameter of any instrument, effect or device on any track of your arrangement, and finally an Instrument Mode providing a tighter integration with Live.

'''Fügt 2 weitere Modi zum User 1 Button hinzu.'''

1. - hellblau '''Instrument Controller''' (entweder Drumrack Layout oder Notenlayout je nachdem was man für ein Instrument gewählt hat. Außerdem kann man verschiedene Skalen, Rootnotes, etc. wählen und die Aufnahme steuern.

2. violett '''Device Controller''' Hier kann man auf Parameter der aktuellen Geräte zugreifen.

''' Fügt zwei Sequenzer zum User 2 Button hinzu '''

1. Step Sequenzer (mit zwei Untermodi: Normal und Combined)

2. Melodic Sequencer

Wird ausgepackt und in den Midi Remote Script Ordner von Ableton gepackt. Im Prinzip handelt es sich um eine Reihe Python Scripts. Danach kann es in den Midi Settings ausgewählt werden.
* http://motscousus.com/stuff/2011-07_Novation_Launchpad_Ableton_Live_Scripts/
* [[:File:Launchpad95.zip]]

== Install ==
[[File:Launchpad95-Install.png|800px]]

== Instrument Mode ==
Normalerweise kann man im Usermode Noten für Drums oder Instrumente eingeben. Wenn man den Midi Ausgang wieder auf das Launchpad legt auch mit visuellem Feedback.

[[File:Launchpad95-Instrument.jpg|800px]]

=== Device Controller ===
[[File:Launchpad95-Device-Controller.jpg|800px]]

== Sequenzer (User Mode 2) ==
Der User Mode 2 Button wechselt zwischen dem Drum Step Sequenzer und dem Melodischen Sequenzer.

=== Drum Step Sequenzer ===
* Normal:
[[File:Launchpad95-Drum-Step-Sequenzer.jpg|800px]]

=== Melodic Step Sequenzer ===
[[File:Launchpad95-Melodic-Step-Sequenzer.jpg|800px]]

=== Other Modes ===
[[File:Launchpad95-Other-Modes.jpg|800px]]

== Launchpad Pro95 ==
Wie Launchpad 95 aber für das Pro.

[[File:Launchpad Pro95.zip]]

[[File:Launchpad Pro95.png]]

Launchpad Remote Scripts

2018-03-11T16:05:15Z

149.172.225.28: /* Drum Step Sequenzer */

== Links ==
[[Ableton Live]]
== Launchpad 95 ==
Super nützliches Tool mit Drum Step Sequencer mode to edit midi clips, a medodic step sequencer, and Device Controller mode to edit any parameter of any instrument, effect or device on any track of your arrangement, and finally an Instrument Mode providing a tighter integration with Live.

Wird ausgepackt und in den Midi Remote Script Ordner von Ableton gepackt. Im Prinzip handelt es sich um eine Reihe Python Scripts. Danach kann es in den Midi Settings ausgewählt werden.
* http://motscousus.com/stuff/2011-07_Novation_Launchpad_Ableton_Live_Scripts/
* [[:File:Launchpad95.zip]]
=== Install ===
[[File:Launchpad95-Install.png|800px]]
=== Instrument Mode ===
Normalerweise kann man im Usermode Noten für Drums oder Instrumente eingeben. Wenn man den Midi Ausgang wieder auf das Launchpad legt auch mit visuellem Feedback.

Fügt 2 weitere Modi zum User 1 Button hinzu.

1. - hellblau '''Instrumenten Modus''' (entweder Drumrack Layout oder Notenlayout je nachdem was man für ein Instrument gewählt hat. Außerdem kann man verschiedene Skalen wählen.

2. violett '''Device Mode''' Hier kann man auf Parameter der aktuellen Geräte zugreifen.

[[File:Launchpad95-Instrument.jpg|800px]]

== Sequenzer (User Mode 2) ==
Der User Mode 2 Button wechselt zwischen dem Drum Step Sequenzer und dem Melodischen Sequenzer.

=== Drum Step Sequenzer ===
[[File:Launchpad95-Drum-Step-Sequenzer.jpg|800px]]

=== Melodic Step Sequenzer ===
[[File:Launchpad95-Melodic-Step-Sequenzer.jpg|800px]]
=== Device Controller ===
[[File:Launchpad95-Device-Controller.jpg|800px]]
=== Other Modes ===
[[File:Launchpad95-Other-Modes.jpg|800px]]

== Launchpad Pro95 ==
Wie Launchpad 95 aber für das Pro.

[[File:Launchpad Pro95.zip]]

[[File:Launchpad Pro95.png]]

Launchpad Remote Scripts

2018-03-11T16:02:49Z

149.172.225.28: /* Instrument Mode */

== Links ==
[[Ableton Live]]
== Launchpad 95 ==
Super nützliches Tool mit Drum Step Sequencer mode to edit midi clips, a medodic step sequencer, and Device Controller mode to edit any parameter of any instrument, effect or device on any track of your arrangement, and finally an Instrument Mode providing a tighter integration with Live.

Wird ausgepackt und in den Midi Remote Script Ordner von Ableton gepackt. Im Prinzip handelt es sich um eine Reihe Python Scripts. Danach kann es in den Midi Settings ausgewählt werden.
* http://motscousus.com/stuff/2011-07_Novation_Launchpad_Ableton_Live_Scripts/
* [[:File:Launchpad95.zip]]
=== Install ===
[[File:Launchpad95-Install.png|800px]]
=== Instrument Mode ===
Normalerweise kann man im Usermode Noten für Drums oder Instrumente eingeben. Wenn man den Midi Ausgang wieder auf das Launchpad legt auch mit visuellem Feedback.

Fügt 2 weitere Modi zum User 1 Button hinzu.

1. - hellblau '''Instrumenten Modus''' (entweder Drumrack Layout oder Notenlayout je nachdem was man für ein Instrument gewählt hat. Außerdem kann man verschiedene Skalen wählen.

2. violett '''Device Mode''' Hier kann man auf Parameter der aktuellen Geräte zugreifen.

[[File:Launchpad95-Instrument.jpg|800px]]

=== Drum Step Sequenzer ===
[[File:Launchpad95-Drum-Step-Sequenzer.jpg|800px]]
=== Melodic Step Sequenzer ===
[[File:Launchpad95-Melodic-Step-Sequenzer.jpg|800px]]
=== Device Controller ===
[[File:Launchpad95-Device-Controller.jpg|800px]]
=== Other Modes ===
[[File:Launchpad95-Other-Modes.jpg|800px]]

== Launchpad Pro95 ==
Wie Launchpad 95 aber für das Pro.

[[File:Launchpad Pro95.zip]]

[[File:Launchpad Pro95.png]]

CSS - Selectors / Selektoren

2018-03-07T10:55:20Z

149.172.225.28:

== Links ==
Gute Übersicht mit Bildern: https://www.mediaevent.de/css/css-selektor-kontextselektor.html
== Arten von Selektoren ==
=== Nachfahre / Descendant Selector ===
Inneres Element muß aber nicht direkt folgen
div p
<pre>
div
--span
----p
</pre>

=== Kind / Child Selector ===
Inneres Element muß direktes Kind sein, also kein Enkel. Muß aber nicht direkt im Code folgen.
div>table
<pre>
div
--p
--table
aber nicht
div
--span
----table
</pre>

=== Nachbar / Adjacent Selector ===
Muß direkt folgen

h5+p
<pre>
h5
p
aber nicht
h5
span
p
</pre>

=== Indirekter Nachbar ===
Alle folgenden
h5~p
<pre>
h5
p
ul
p
</pre>

== CSS3 Pseudo Selektoren ==
https://www.mediaevent.de/css/css3-selektor-pseudo.html

CSS - Selectors / Selektoren

2018-03-07T10:50:39Z

149.172.225.28: Die Seite wurde neu angelegt: „ == Arten von Selektoren == === Nachfahre / Descendant Selector === Inneres Element muß aber nicht direkt folgen div p <pre> div --span ----p </pre> === Kin…“

== Arten von Selektoren ==
=== Nachfahre / Descendant Selector ===
Inneres Element muß aber nicht direkt folgen
div p
<pre>
div
--span
----p
</pre>

=== Kind / Child Selector ===
Inneres Element muß direktes Kind sein, also kein Enkel. Muß aber nicht direkt im Code folgen.
div>table
<pre>
div
--p
--table
aber nicht
div
--span
----table
</pre>

=== Nachbar / Adjacent Selector ===
Muß direkt folgen

h5+p
<pre>
h5
p
aber nicht
h5
span
p
</pre>

=== Indirekter Nachbar ===
Alle folgenden
h5-p
<pre>
h5
p
p
</pre>

JavaScript - Match Height

2018-03-06T17:48:43Z

149.172.225.28: /* Doku */

== Links ==
[[jQuery - Equalize Plugin]] - wie MatchHeight aber kann auch mehrere Zeilen in responsiven Layouts handeln, indem es checkt ob die Spalten auf der gleichen Höhe beginnen.
== jQuery - MatchHeight ==
https://github.com/liabru/jquery-match-height

Etwas ausgereifter als Equal Heights aber auch etwas größer. Allerdings sehr zuverlässig.
=== Source ===
jquery.matchHeight-min.js
<syntaxhighlight lang="javascript">
/*
* jquery-match-height 0.7.2 by @liabru
* http://brm.io/jquery-match-height/
* License MIT
*/
!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"undefined"!=typeof module&&module.exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){var e=-1,o=-1,n=function(t){return parseFloat(t)||0},a=function(e){var o=1,a=t(e),i=null,r=[];return a.each(function(){var e=t(this),a=e.offset().top-n(e.css("margin-top")),s=r.length>0?r[r.length-1]:null;null===s?r.push(e):Math.floor(Math.abs(i-a))<=o?r[r.length-1]=s.add(e):r.push(e),i=a}),r},i=function(e){var o={
byRow:!0,property:"height",target:null,remove:!1};return"object"==typeof e?t.extend(o,e):("boolean"==typeof e?o.byRow=e:"remove"===e&&(o.remove=!0),o)},r=t.fn.matchHeight=function(e){var o=i(e);if(o.remove){var n=this;return this.css(o.property,""),t.each(r._groups,function(t,e){e.elements=e.elements.not(n)}),this}return this.length<=1&&!o.target?this:(r._groups.push({elements:this,options:o}),r._apply(this,o),this)};r.version="0.7.2",r._groups=[],r._throttle=80,r._maintainScroll=!1,r._beforeUpdate=null,
r._afterUpdate=null,r._rows=a,r._parse=n,r._parseOptions=i,r._apply=function(e,o){var s=i(o),h=t(e),l=[h],c=t(window).scrollTop(),p=t("html").outerHeight(!0),u=h.parents().filter(":hidden");return u.each(function(){var e=t(this);e.data("style-cache",e.attr("style"))}),u.css("display","block"),s.byRow&&!s.target&&(h.each(function(){var e=t(this),o=e.css("display");"inline-block"!==o&&"flex"!==o&&"inline-flex"!==o&&(o="block"),e.data("style-cache",e.attr("style")),e.css({display:o,"padding-top":"0",
"padding-bottom":"0","margin-top":"0","margin-bottom":"0","border-top-width":"0","border-bottom-width":"0",height:"100px",overflow:"hidden"})}),l=a(h),h.each(function(){var e=t(this);e.attr("style",e.data("style-cache")||"")})),t.each(l,function(e,o){var a=t(o),i=0;if(s.target)i=s.target.outerHeight(!1);else{if(s.byRow&&a.length<=1)return void a.css(s.property,"");a.each(function(){var e=t(this),o=e.attr("style"),n=e.css("display");"inline-block"!==n&&"flex"!==n&&"inline-flex"!==n&&(n="block");var a={
display:n};a[s.property]="",e.css(a),e.outerHeight(!1)>i&&(i=e.outerHeight(!1)),o?e.attr("style",o):e.css("display","")})}a.each(function(){var e=t(this),o=0;s.target&&e.is(s.target)||("border-box"!==e.css("box-sizing")&&(o+=n(e.css("border-top-width"))+n(e.css("border-bottom-width")),o+=n(e.css("padding-top"))+n(e.css("padding-bottom"))),e.css(s.property,i-o+"px"))})}),u.each(function(){var e=t(this);e.attr("style",e.data("style-cache")||null)}),r._maintainScroll&&t(window).scrollTop(c/p*t("html").outerHeight(!0)),
this},r._applyDataApi=function(){var e={};t("[data-match-height], [data-mh]").each(function(){var o=t(this),n=o.attr("data-mh")||o.attr("data-match-height");n in e?e[n]=e[n].add(o):e[n]=o}),t.each(e,function(){this.matchHeight(!0)})};var s=function(e){r._beforeUpdate&&r._beforeUpdate(e,r._groups),t.each(r._groups,function(){r._apply(this.elements,this.options)}),r._afterUpdate&&r._afterUpdate(e,r._groups)};r._update=function(n,a){if(a&&"resize"===a.type){var i=t(window).width();if(i===e)return;e=i;
}n?o===-1&&(o=setTimeout(function(){s(a),o=-1},r._throttle)):s(a)},t(r._applyDataApi);var h=t.fn.on?"on":"bind";t(window)[h]("load",function(t){r._update(!1,t)}),t(window)[h]("resize orientationchange",function(t){r._update(!0,t)})});
</syntaxhighlight>
'''jquery.matchHeight.js'''
<syntaxhighlight lang="javascript">
/**
* jquery-match-height master by @liabru
* http://brm.io/jquery-match-height/
* License: MIT
*/

;(function(factory) { // eslint-disable-line no-extra-semi
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof module !== 'undefined' && module.exports) {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Global
factory(jQuery);
}
})(function($) {
/*
* internal
*/

var _previousResizeWidth = -1,
_updateTimeout = -1;

/*
* _parse
* value parse utility function
*/

var _parse = function(value) {
// parse value and convert NaN to 0
return parseFloat(value) || 0;
};

/*
* _rows
* utility function returns array of jQuery selections representing each row
* (as displayed after float wrapping applied by browser)
*/

var _rows = function(elements) {
var tolerance = 1,
$elements = $(elements),
lastTop = null,
rows = [];

// group elements by their top position
$elements.each(function(){
var $that = $(this),
top = $that.offset().top - _parse($that.css('margin-top')),
lastRow = rows.length > 0 ? rows[rows.length - 1] : null;

if (lastRow === null) {
// first item on the row, so just push it
rows.push($that);
} else {
// if the row top is the same, add to the row group
if (Math.floor(Math.abs(lastTop - top)) <= tolerance) {
rows[rows.length - 1] = lastRow.add($that);
} else {
// otherwise start a new row group
rows.push($that);
}
}

// keep track of the last row top
lastTop = top;
});

return rows;
};

/*
* _parseOptions
* handle plugin options
*/

var _parseOptions = function(options) {
var opts = {
byRow: true,
property: 'height',
target: null,
remove: false
};

if (typeof options === 'object') {
return $.extend(opts, options);
}

if (typeof options === 'boolean') {
opts.byRow = options;
} else if (options === 'remove') {
opts.remove = true;
}

return opts;
};

/*
* matchHeight
* plugin definition
*/

var matchHeight = $.fn.matchHeight = function(options) {
var opts = _parseOptions(options);

// handle remove
if (opts.remove) {
var that = this;

// remove fixed height from all selected elements
this.css(opts.property, '');

// remove selected elements from all groups
$.each(matchHeight._groups, function(key, group) {
group.elements = group.elements.not(that);
});

// TODO: cleanup empty groups

return this;
}

if (this.length <= 1 && !opts.target) {
return this;
}

// keep track of this group so we can re-apply later on load and resize events
matchHeight._groups.push({
elements: this,
options: opts
});

// match each element's height to the tallest element in the selection
matchHeight._apply(this, opts);

return this;
};

/*
* plugin global options
*/

matchHeight.version = 'master';
matchHeight._groups = [];
matchHeight._throttle = 80;
matchHeight._maintainScroll = false;
matchHeight._beforeUpdate = null;
matchHeight._afterUpdate = null;
matchHeight._rows = _rows;
matchHeight._parse = _parse;
matchHeight._parseOptions = _parseOptions;

/*
* matchHeight._apply
* apply matchHeight to given elements
*/

matchHeight._apply = function(elements, options) {
var opts = _parseOptions(options),
$elements = $(elements),
rows = [$elements];

// take note of scroll position
var scrollTop = $(window).scrollTop(),
htmlHeight = $('html').outerHeight(true);

// get hidden parents
var $hiddenParents = $elements.parents().filter(':hidden');

// cache the original inline style
$hiddenParents.each(function() {
var $that = $(this);
$that.data('style-cache', $that.attr('style'));
});

// temporarily must force hidden parents visible
$hiddenParents.css('display', 'block');

// get rows if using byRow, otherwise assume one row
if (opts.byRow && !opts.target) {

// must first force an arbitrary equal height so floating elements break evenly
$elements.each(function() {
var $that = $(this),
display = $that.css('display');

// temporarily force a usable display value
if (display !== 'inline-block' && display !== 'flex' && display !== 'inline-flex') {
display = 'block';
}

// cache the original inline style
$that.data('style-cache', $that.attr('style'));

$that.css({
'display': display,
'padding-top': '0',
'padding-bottom': '0',
'margin-top': '0',
'margin-bottom': '0',
'border-top-width': '0',
'border-bottom-width': '0',
'height': '100px',
'overflow': 'hidden'
});
});

// get the array of rows (based on element top position)
rows = _rows($elements);

// revert original inline styles
$elements.each(function() {
var $that = $(this);
$that.attr('style', $that.data('style-cache') || '');
});
}

$.each(rows, function(key, row) {
var $row = $(row),
targetHeight = 0;

if (!opts.target) {
// skip apply to rows with only one item
if (opts.byRow && $row.length <= 1) {
$row.css(opts.property, '');
return;
}

// iterate the row and find the max height
$row.each(function(){
var $that = $(this),
style = $that.attr('style'),
display = $that.css('display');

// temporarily force a usable display value
if (display !== 'inline-block' && display !== 'flex' && display !== 'inline-flex') {
display = 'block';
}

// ensure we get the correct actual height (and not a previously set height value)
var css = { 'display': display };
css[opts.property] = '';
$that.css(css);

// find the max height (including padding, but not margin)
if ($that.outerHeight(false) > targetHeight) {
targetHeight = $that.outerHeight(false);
}

// revert styles
if (style) {
$that.attr('style', style);
} else {
$that.css('display', '');
}
});
} else {
// if target set, use the height of the target element
targetHeight = opts.target.outerHeight(false);
}

// iterate the row and apply the height to all elements
$row.each(function(){
var $that = $(this),
verticalPadding = 0;

// don't apply to a target
if (opts.target && $that.is(opts.target)) {
return;
}

// handle padding and border correctly (required when not using border-box)
if ($that.css('box-sizing') !== 'border-box') {
verticalPadding += _parse($that.css('border-top-width')) + _parse($that.css('border-bottom-width'));
verticalPadding += _parse($that.css('padding-top')) + _parse($that.css('padding-bottom'));
}

// set the height (accounting for padding and border)
$that.css(opts.property, (targetHeight - verticalPadding) + 'px');
});
});

// revert hidden parents
$hiddenParents.each(function() {
var $that = $(this);
$that.attr('style', $that.data('style-cache') || null);
});

// restore scroll position if enabled
if (matchHeight._maintainScroll) {
$(window).scrollTop((scrollTop / htmlHeight) * $('html').outerHeight(true));
}

return this;
};

/*
* matchHeight._applyDataApi
* applies matchHeight to all elements with a data-match-height attribute
*/

matchHeight._applyDataApi = function() {
var groups = {};

// generate groups by their groupId set by elements using data-match-height
$('[data-match-height], [data-mh]').each(function() {
var $this = $(this),
groupId = $this.attr('data-mh') || $this.attr('data-match-height');

if (groupId in groups) {
groups[groupId] = groups[groupId].add($this);
} else {
groups[groupId] = $this;
}
});

// apply matchHeight to each group
$.each(groups, function() {
this.matchHeight(true);
});
};

/*
* matchHeight._update
* updates matchHeight on all current groups with their correct options
*/

var _update = function(event) {
if (matchHeight._beforeUpdate) {
matchHeight._beforeUpdate(event, matchHeight._groups);
}

$.each(matchHeight._groups, function() {
matchHeight._apply(this.elements, this.options);
});

if (matchHeight._afterUpdate) {
matchHeight._afterUpdate(event, matchHeight._groups);
}
};

matchHeight._update = function(throttle, event) {
// prevent update if fired from a resize event
// where the viewport width hasn't actually changed
// fixes an event looping bug in IE8
if (event && event.type === 'resize') {
var windowWidth = $(window).width();
if (windowWidth === _previousResizeWidth) {
return;
}
_previousResizeWidth = windowWidth;
}

// throttle updates
if (!throttle) {
_update(event);
} else if (_updateTimeout === -1) {
_updateTimeout = setTimeout(function() {
_update(event);
_updateTimeout = -1;
}, matchHeight._throttle);
}
};

/*
* bind events
*/

// apply on DOM ready event
$(matchHeight._applyDataApi);

// use on or bind where supported
var on = $.fn.on ? 'on' : 'bind';

// update heights on load and resize events
$(window)[on]('load', function(event) {
matchHeight._update(false, event);
});

// throttled update heights on resize events
$(window)[on]('resize orientationchange', function(event) {
matchHeight._update(true, event);
});

});
</syntaxhighlight>

===Doku===
<pre>

<script src="jquery.matchHeight.js" type="text/javascript"></script>
You can also install using the package managers Bower and NPM.

bower install matchheight
npm install jquery-match-height
Usage

$(function() {
$('.item').matchHeight(options);
});
Where options is an optional parameter.
See below for a description of the available options and defaults.

The above example will set all selected elements with the class item to the height of the tallest.
If the items are on multiple rows, the items of each row will be set to the tallest of that row (see byRow option).

Call this on the DOM ready event (the plugin will automatically update on window load).
See the included test.html for many working examples.

Also see the Data API below for a simple, alternative inline usage.

Options

The default options are:

{
byRow: true,
property: 'height',
target: null,
remove: false
}
Where:

byRow is true or false to enable row detection
property is the CSS property name to set (e.g. 'height' or 'min-height')
target is an optional element to use instead of the element with maximum height
remove is true or false to remove previous bindings instead of applying new ones
Data API

Use the data attribute data-mh="group-name" where group-name is an arbitrary string to identify which elements should be considered as a group.

<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>
All elements with the same group name will be set to the same height when the page is loaded, regardless of their position in the DOM, without any extra code required.

Note that byRow will be enabled when using the data API, if you don't want this (or require other options) then use the alternative method above.

Advanced Usage

There are some additional functions and properties you should know about:

Manually trigger an update

$.fn.matchHeight._update()
If you need to manually trigger an update of all currently set groups, for example if you've modified some content.

Row detection

You can toggle row detection by setting the byRow option, which defaults to true.
It's also possible to use the row detection function at any time:

$.fn.matchHeight._rows($('.item'));
Which will return an array of element selections for each row, see this thread for more information and an example.

Remove bindings

$('.item').matchHeight({ remove: true });
This will remove all bindings for the selected elements, from all groups.

Custom target element

$(function() {
$('.item').matchHeight({
target: $('.sidebar')
});
});
Will set all selected elements to the height of the first item with class sidebar.

Custom property

$('.item').matchHeight({ property: 'min-height' });
This will set the min-height property instead of the height property.

Callback events

Since matchHeight automatically handles updating the layout after certain window events, you can supply functions as global callbacks if you need to be notified:

$.fn.matchHeight._beforeUpdate = function(event, groups) {
// do something before any updates are applied
}

$.fn.matchHeight._afterUpdate = function(event, groups) {
// do something after all updates are applied
}
Where event a jQuery event object (e.g. load, resize, orientationchange) and groups is a reference to $.fn.matchHeight._groups (see below).

Manually apply match height

$.fn.matchHeight._apply(elements, options)
Use the apply function directly if you wish to avoid the automatic update functionality.

Throttling resize updates

$.fn.matchHeight._throttle = 80;
By default, the _update method is throttled to execute at a maximum rate of once every 80ms. Decreasing the above _throttle property will update your layout quicker, appearing smoother during resize, at the expense of performance. If you experience lagging or freezing during resize, you should increase the _throttle property.

Maintain scroll position

$.fn.matchHeight._maintainScroll = true;
Under certain conditions where the size of the page is dynamically changing, such as during resize or when adding new elements, browser bugs cause the page scroll position to change unexpectedly.

If you are observing this behaviour, use the above line to automatically attempt to force scroll position to be maintained (approximately). This is a global setting and by default it is false.

Accessing current group bindings

$.fn.matchHeight._groups
The array that contains all element groups that have had matchHeight applied. Used internally for automatically updating on resize events, but you may modify this array if you need to manually access any groups (e.g. if you're deleting elements).

Tests

Open test/page/test.html in your browser to run unit tests via the jasmine test runner.

If you wish to contribute functionality to this project, you are encouraged to add new tests following the same conventions.

Run gulp test to run unit tests on multiple browsers and multiple resolutions, automatically through selenium.

Run gulp test:cloud to test on even more browsers via a cloud service (you will need to create a file called test/conf/private.conf.js with your cloud credentials that looks like this:

exports.config = {
user: 'username',
key: 'key'
};
Cloud browser testing for this project is provided by BrowserStack (which is free for open source).

Known limitations

CSS transitions and animations are not supported

You should ensure that there are no transitions or other animations that will delay the height changes of the elements you are matching, including any transition: all rules. Otherwise the plugin will produce unexpected results, as animations can't be accounted for.

Delayed webfonts may cause incorrect height

Some browsers do not wait for webfonts to load before firing the window load event, so if the font loads too slowly the plugin may produce unexpected results.

If this is a problem, you should call _update once your font has loaded by using something like the webfontloader script.

Content changes require a manual update

If you change the content inside an element that has had matchHeight applied, then you must manually call $.fn.matchHeight._update() afterwards. This will update of all currently set equal heights groups.

Also note that previous matchHeight bindings do not apply to new elements, even if they match the selector used. In this case you must remove the old bindings and add new ones, see this comment.
</pre>
=== Beispiel Baum und Garten ===
Etwas komplexer wegen der automatisierung im TYPO3

<syntaxhighlight lang="javascript">
/***** Equal Height / Match Height******/
function equalCards(){
// apply matchHeight to each card
$('.row:not(.row .row)').each(function() {
$(this).find('.card.mh').matchHeight({
byRow: 1
});
});
}

function equalCols(){
// apply your matchHeight on DOM ready (they will be automatically re-applied on load or resize)
// get settings
var byRow = $('body').hasClass('row');

// apply matchHeight to each .eq in equal-height (only direct ancestor)
$('.equal-height').each(function() {
$(this).children('.eq').matchHeight({
byRow: byRow
});
});
// test property
/*$('.property-items .item').matchHeight({
property: 'min-height'
});*/
}

(function() {
/* matchHeight */
$(function() {
$('body').animate(equalCards(),equalCols());
//$('body').animate(equalCols());
});
})();
</syntaxhighlight>

== jQuery - Equal Heights ==
<syntaxhighlight lang="javascript">
/*
/* * @Copyright (c) 2013 James Stoddern - info@jamesstoddern.net
* web:jamesstoddern.net
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*
* How to use it:
*
* If you have a series of floated columns, which you wish to make the same height, give them all the same
* class, and then run the plugin. It will determine the tallest div, and equalise the height of the rest
*
* $('.selector').equalHeights();
*
*
*/

(function( $ ) {
$.fn.equalHeights = function() {
var tallestElement = 0;
var startRow = 0;
var elements = new Array();
var $currentElement;
var topPosition = 0;

this.each(function() {

$currentElement = $(this);
topPostion = $currentElement.position().top;

if (startRow != topPostion) {
for (currentDiv = 0 ; currentDiv < elements.length ; currentDiv++) {
elements[currentDiv].height(tallestElement);
}

elements.length = 0;
startRow = topPostion;
tallestElement = $currentElement.height();
elements.push($currentElement);

} else {
elements.push($currentElement);
tallestElement = (tallestElement < $currentElement.height()) ? ($currentElement.height()) : (tallestElement);

}

for (currentDiv = 0 ; currentDiv < elements.length ; currentDiv++) {
elements[currentDiv].height(tallestElement);
}

});

};
}) ( jQuery );
</syntaxhighlight>

Parallax Effekt selbst gemacht

2018-03-06T16:16:36Z

149.172.225.28: /* JavaScript */

Wenig Code, effektiv, jQuery

https://www.taniarascia.com/parallax-scroll-effect/

== CSS ==
<syntaxhighlight lang="css">
.parallax-container {
position: relative;
height: 500px;
}
.parallax {
position: absolute;
height: 200%;
width: 100%;
z-index: -1;
}
.content {
background: #fff;
height: 600px /* This height is only for
demonstration purposes since I have no content.
It's not necessary for the code to work. */
}
</syntaxhighlight>
'''.parallax-container'''
* legt die Höhe fest
* position relativ ermöglicht Kontrolle über das absolut positionierte Kindelement.

'''.parallax'''
* Inner div enthält Background Image
* Absolut positioniert (siehe oben)
* Höhe kann variieren
* Breite muß definiert werden 100% since the element is now absolute. Finally, a
* negative z-index -> image remains contained to the height of parallax-container.

'''Content'''
All HTML layout elements have a transparent background by default. If you choose to use parallax, simply setting your background color on the body element won’t be enough anymore – you’ll have to place all of your non-parallax content inside of elements with a background color. I’m going to create a .content class that simply has a background color so that my content will always appear over the parallax image.

== HTML ==
Putting it Together
*top and bottom empty section damit man scrollen kann.

<syntaxhighlight lang="html5">
<section class="content"></section>

<section class="parallax-container">
<div class="parallax" style="background: url(image.jpg) center center / cover no-repeat;"></div>
</section>

<section class="content"></section>
</syntaxhighlight>

*On the .parallax div, I edit the style attribute and add a background image.
*The background image will be horizontally and vertically centered in the div, cover the entire div, and not repeat.
* Kommentar: Verbesserung wäre ein Schwerpunkt

== JavaScript ==
* We’re going to '''create a variable for the parallax class, and count all instances''' using .length.
* Next, we’ll '''create a scroll function'''.
* Let the browser know that we’re going to do an animation with requestAnimationFrame.
* Create a for loop, capturing each parallax element in currentElement, and how much has been scrolled with scrolled.
* Finally, multiply how much has been scrolled with a negative pixel value, and apply that to the transform: translate3D of the CSS of the individual parallax element.

<syntaxhighlight lang="javascript">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

var parallaxElements = $('.parallax'),
parallaxQuantity = parallaxElements.length;

$(window).on('scroll', function () {
window.requestAnimationFrame(function () {
for (var i = 0; i < parallaxQuantity; i++) {
var currentElement = parallaxElements.eq(i);
var scrolled = $(window).scrollTop();
currentElement.css({
'transform': 'translate3d(0,' + scrolled * -0.3 + 'px, 0)'
});
}
});
});
</syntaxhighlight>
I’m not a fan of including parallax on mobile, so I would '''add an if statement on the jQuery and a @media query on the CSS to only allow parallax after a certain screen width'''.

Parallax Effekt selbst gemacht

2018-03-06T16:15:39Z

149.172.225.28: Die Seite wurde neu angelegt: „Wenig Code, effektiv, jQuery https://www.taniarascia.com/parallax-scroll-effect/ == CSS == <syntaxhighlight lang="css"> .parallax-container { position: rel…“

Wenig Code, effektiv, jQuery

https://www.taniarascia.com/parallax-scroll-effect/

== CSS ==
<syntaxhighlight lang="css">
.parallax-container {
position: relative;
height: 500px;
}
.parallax {
position: absolute;
height: 200%;
width: 100%;
z-index: -1;
}
.content {
background: #fff;
height: 600px /* This height is only for
demonstration purposes since I have no content.
It's not necessary for the code to work. */
}
</syntaxhighlight>
'''.parallax-container'''
* legt die Höhe fest
* position relativ ermöglicht Kontrolle über das absolut positionierte Kindelement.

'''.parallax'''
* Inner div enthält Background Image
* Absolut positioniert (siehe oben)
* Höhe kann variieren
* Breite muß definiert werden 100% since the element is now absolute. Finally, a
* negative z-index -> image remains contained to the height of parallax-container.

'''Content'''
All HTML layout elements have a transparent background by default. If you choose to use parallax, simply setting your background color on the body element won’t be enough anymore – you’ll have to place all of your non-parallax content inside of elements with a background color. I’m going to create a .content class that simply has a background color so that my content will always appear over the parallax image.

== HTML ==
Putting it Together
*top and bottom empty section damit man scrollen kann.

<syntaxhighlight lang="html5">
<section class="content"></section>

<section class="parallax-container">
<div class="parallax" style="background: url(image.jpg) center center / cover no-repeat;"></div>
</section>

<section class="content"></section>
</syntaxhighlight>

*On the .parallax div, I edit the style attribute and add a background image.
*The background image will be horizontally and vertically centered in the div, cover the entire div, and not repeat.
* Kommentar: Verbesserung wäre ein Schwerpunkt

== JavaScript ==
* We’re going to '''create a variable for the parallax class, and count all instances''' using .length.
* Next, we’ll '''create a scroll function'''.
* Let the browser know that we’re going to do an animation with requestAnimationFrame.
* Create a for loop, capturing each parallax element in currentElement, and how much has been scrolled with scrolled.
* Finally, multiply how much has been scrolled with a negative pixel value, and apply that to the transform: translate3D of the CSS of the individual parallax element.

<syntaxhighlight lang="javascript">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

var parallaxElements = $('.parallax'),
parallaxQuantity = parallaxElements.length;

$(window).on('scroll', function () {
window.requestAnimationFrame(function () {
for (var i = 0; i < parallaxQuantity; i++) {
var currentElement = parallaxElements.eq(i);
var scrolled = $(window).scrollTop();
currentElement.css({
'transform': 'translate3d(0,' + scrolled * -0.3 + 'px, 0)'
});
}
});
});

I’m not a fan of including parallax on mobile, so I would '''add an if statement on the jQuery and a @media query on the CSS to only allow parallax after a certain screen width'''.

JavaScript - Plugins

2018-03-06T15:58:19Z

149.172.225.28: /* Parallax */

Libraries Skripte und Plugins für JavaScript, sortiert nach Kategorien
== Links ==
http://www.jqueryscript.net/

== Images Loaded ==
Testen ob alle Bilder geladen sind, um dann weitere Funktionen auzuführen.

[[JavaScript - Images Loaded]]
== Events ==
=== Gesture Recognition ===
[[JavaScript - hammer.js Webapp Touch Gestures]]

== Animation ==
=== CreateJS ===
Tools für Animation und Interaktion

http://createjs.com

=== jQuery Appear ===
[[jQuery Appear - Plugin]] - Events wenn Elemente im Viewport auftauchen / verschwinden

=== jQuery Easing ===
Easing Kurven für Animationen [[jQuery Easing - Plugin]]

=== Simple Text Rotator ===

<syntaxhighlight lang="javascript">
// Simple Text Rotator
!function(e){var t={animation:"dissolve",separator:",",speed:2e3};e.fn.textrotator=function(n){var r=e.extend({},t,n);return this.each(function(){var t=e(this);var n=[];e.each(t.text().split(r.separator),function(e,t){n.push(t)});t.text(n[0]);var i=function(){switch(r.animation){case"dissolve":t.animate({textShadowBlur:20,opacity:0},500,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).animate({textShadowBlur:0,opacity:1},500)});break;case"flip":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip").show().css({"-webkit-transform":" rotateY(-180deg)","-moz-transform":" rotateY(-180deg)","-o-transform":" rotateY(-180deg)",transform:" rotateY(-180deg)"});break;case"flipUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip up").show().css({"-webkit-transform":" rotateX(-180deg)","-moz-transform":" rotateX(-180deg)","-o-transform":" rotateX(-180deg)",transform:" rotateX(-180deg)"});break;case"flipCube":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube").show().css({"-webkit-transform":" rotateY(180deg)","-moz-transform":" rotateY(180deg)","-o-transform":" rotateY(180deg)",transform:" rotateY(180deg)"});break;case"flipCubeUp":if(t.find(".back").length>0){t.html(t.find(".back").html())}var i=t.text();var s=e.inArray(i,n);if(s+1==n.length)s=-1;t.html("");e("<span class='front'>"+i+"</span>").appendTo(t);e("<span class='back'>"+n[s+1]+"</span>").appendTo(t);t.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube up").show().css({"-webkit-transform":" rotateX(180deg)","-moz-transform":" rotateX(180deg)","-o-transform":" rotateX(180deg)",transform:" rotateX(180deg)"});break;case"spin":if(t.find(".rotating").length>0){t.html(t.find(".rotating").html())}s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.wrapInner("<span class='rotating spin' />").find(".rotating").hide().text(n[s+1]).show().css({"-webkit-transform":" rotate(0) scale(1)","-moz-transform":"rotate(0) scale(1)","-o-transform":"rotate(0) scale(1)",transform:"rotate(0) scale(1)"});break;case"fade":t.fadeOut(r.speed,function(){s=e.inArray(t.text(),n);if(s+1==n.length)s=-1;t.text(n[s+1]).fadeIn(r.speed)});break}};setInterval(i,r.speed)})}}(window.jQuery)

</syntaxhighlight>

=== Wow Reveal Animations ===
Kostenpflichtig für kommerzielle Seiten. Developer Lizenz ca 99$. Enthalten z.B. bei angelajochum.de. Kann kostenlos geladen werden zum testen.

https://github.com/matthieua/WOW

http://mynameismatthieu.com/WOW/index.html

=== Flippy Text Effekt ===
https://github.com/yemM/flippy

Verwendet in Hera Template

== Navigation ==
=== Pushy ===
Gutes Mobiles Off-Canvas Menu

[[Pushy Menu]]
=== Meanmenu ===
Verwandelt ein Normales verschachteltes Menu in ein gut zu bediendendes Mobiles Menu.

[[Meanmenu.js - jQuery Plugin]] (1.x,2.x)

=== jQuery Mobile Menu ===
Mobiles Dropdownmenü aus ul Liste

[[jQuery Mobile Menu - Plugin]]

== Parallax ==
=== Parallax selbst gemacht ===
[[Parallax Effekt selbst gemacht]]

=== jquery-parallax (jQuery) ===
Einfach und effektiv.

[[jquery-parallax]]

=== Stellar.js ===
http://markdalgleish.com/projects/stellar.js/

http://markdalgleish.com/projects/stellar.js/docs/

<syntaxhighlight lang="javascript">
/*! Stellar.js v0.6.2 | Copyright 2014, Mark Dalgleish | http://markdalgleish.com/projects/stellar.js | http://markdalgleish.mit-license.org */
!function(a,b,c,d){function e(b,c){this.element=b,this.options=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var f="stellar",g={scrollProperty:"scroll",positionProperty:"position",horizontalScrolling:!0,verticalScrolling:!0,horizontalOffset:0,verticalOffset:0,responsive:!1,parallaxBackgrounds:!0,parallaxElements:!0,hideDistantElements:!0,hideElement:function(a){a.hide()},showElement:function(a){a.show()}},h={scroll:{getLeft:function(a){return a.scrollLeft()},setLeft:function(a,b){a.scrollLeft(b)},getTop:function(a){return a.scrollTop()},setTop:function(a,b){a.scrollTop(b)}},position:{getLeft:function(a){return-1*parseInt(a.css("left"),10)},getTop:function(a){return-1*parseInt(a.css("top"),10)}},margin:{getLeft:function(a){return-1*parseInt(a.css("margin-left"),10)},getTop:function(a){return-1*parseInt(a.css("margin-top"),10)}},transform:{getLeft:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[4],10):0},getTop:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[5],10):0}}},i={position:{setLeft:function(a,b){a.css("left",b)},setTop:function(a,b){a.css("top",b)}},transform:{setPosition:function(a,b,c,d,e){a[0].style[k]="translate3d("+(b-c)+"px, "+(d-e)+"px, 0)"}}},j=function(){var b,c=/^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,d=a("script")[0].style,e="";for(b in d)if(c.test(b)){e=b.match(c)[0];break}return"WebkitOpacity"in d&&(e="Webkit"),"KhtmlOpacity"in d&&(e="Khtml"),function(a){return e+(e.length>0?a.charAt(0).toUpperCase()+a.slice(1):a)}}(),k=j("transform"),l=a("<div />",{style:"background:#fff"}).css("background-position-x")!==d,m=l?function(a,b,c){a.css({"background-position-x":b,"background-position-y":c})}:function(a,b,c){a.css("background-position",b+" "+c)},n=l?function(a){return[a.css("background-position-x"),a.css("background-position-y")]}:function(a){return a.css("background-position").split(" ")},o=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame||b.oRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,1e3/60)};e.prototype={init:function(){this.options.name=f+"_"+Math.floor(1e9*Math.random()),this._defineElements(),this._defineGetters(),this._defineSetters(),this._handleWindowLoadAndResize(),this._detectViewport(),this.refresh({firstLoad:!0}),"scroll"===this.options.scrollProperty?this._handleScrollEvent():this._startAnimationLoop()},_defineElements:function(){this.element===c.body&&(this.element=b),this.$scrollElement=a(this.element),this.$element=this.element===b?a("body"):this.$scrollElement,this.$viewportElement=this.options.viewportElement!==d?a(this.options.viewportElement):this.$scrollElement[0]===b||"scroll"===this.options.scrollProperty?this.$scrollElement:this.$scrollElement.parent()},_defineGetters:function(){var a=this,b=h[a.options.scrollProperty];this._getScrollLeft=function(){return b.getLeft(a.$scrollElement)},this._getScrollTop=function(){return b.getTop(a.$scrollElement)}},_defineSetters:function(){var b=this,c=h[b.options.scrollProperty],d=i[b.options.positionProperty],e=c.setLeft,f=c.setTop;this._setScrollLeft="function"==typeof e?function(a){e(b.$scrollElement,a)}:a.noop,this._setScrollTop="function"==typeof f?function(a){f(b.$scrollElement,a)}:a.noop,this._setPosition=d.setPosition||function(a,c,e,f,g){b.options.horizontalScrolling&&d.setLeft(a,c,e),b.options.verticalScrolling&&d.setTop(a,f,g)}},_handleWindowLoadAndResize:function(){var c=this,d=a(b);c.options.responsive&&d.bind("load."+this.name,function(){c.refresh()}),d.bind("resize."+this.name,function(){c._detectViewport(),c.options.responsive&&c.refresh()})},refresh:function(c){var d=this,e=d._getScrollLeft(),f=d._getScrollTop();c&&c.firstLoad||this._reset(),this._setScrollLeft(0),this._setScrollTop(0),this._setOffsets(),this._findParticles(),this._findBackgrounds(),c&&c.firstLoad&&/WebKit/.test(navigator.userAgent)&&a(b).load(function(){var a=d._getScrollLeft(),b=d._getScrollTop();d._setScrollLeft(a+1),d._setScrollTop(b+1),d._setScrollLeft(a),d._setScrollTop(b)}),this._setScrollLeft(e),this._setScrollTop(f)},_detectViewport:function(){var a=this.$viewportElement.offset(),b=null!==a&&a!==d;this.viewportWidth=this.$viewportElement.width(),this.viewportHeight=this.$viewportElement.height(),this.viewportOffsetTop=b?a.top:0,this.viewportOffsetLeft=b?a.left:0},_findParticles:function(){{var b=this;this._getScrollLeft(),this._getScrollTop()}if(this.particles!==d)for(var c=this.particles.length-1;c>=0;c--)this.particles[c].$element.data("stellar-elementIsActive",d);this.particles=[],this.options.parallaxElements&&this.$element.find("[data-stellar-ratio]").each(function(){var c,e,f,g,h,i,j,k,l,m=a(this),n=0,o=0,p=0,q=0;if(m.data("stellar-elementIsActive")){if(m.data("stellar-elementIsActive")!==this)return}else m.data("stellar-elementIsActive",this);b.options.showElement(m),m.data("stellar-startingLeft")?(m.css("left",m.data("stellar-startingLeft")),m.css("top",m.data("stellar-startingTop"))):(m.data("stellar-startingLeft",m.css("left")),m.data("stellar-startingTop",m.css("top"))),f=m.position().left,g=m.position().top,h="auto"===m.css("margin-left")?0:parseInt(m.css("margin-left"),10),i="auto"===m.css("margin-top")?0:parseInt(m.css("margin-top"),10),k=m.offset().left-h,l=m.offset().top-i,m.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(n=p,o=q,j=b,!1):(p+=b.position().left,void(q+=b.position().top))}),c=m.data("stellar-horizontal-offset")!==d?m.data("stellar-horizontal-offset"):j!==d&&j.data("stellar-horizontal-offset")!==d?j.data("stellar-horizontal-offset"):b.horizontalOffset,e=m.data("stellar-vertical-offset")!==d?m.data("stellar-vertical-offset"):j!==d&&j.data("stellar-vertical-offset")!==d?j.data("stellar-vertical-offset"):b.verticalOffset,b.particles.push({$element:m,$offsetParent:j,isFixed:"fixed"===m.css("position"),horizontalOffset:c,verticalOffset:e,startingPositionLeft:f,startingPositionTop:g,startingOffsetLeft:k,startingOffsetTop:l,parentOffsetLeft:n,parentOffsetTop:o,stellarRatio:m.data("stellar-ratio")!==d?m.data("stellar-ratio"):1,width:m.outerWidth(!0),height:m.outerHeight(!0),isHidden:!1})})},_findBackgrounds:function(){var b,c=this,e=this._getScrollLeft(),f=this._getScrollTop();this.backgrounds=[],this.options.parallaxBackgrounds&&(b=this.$element.find("[data-stellar-background-ratio]"),this.$element.data("stellar-background-ratio")&&(b=b.add(this.$element)),b.each(function(){var b,g,h,i,j,k,l,o=a(this),p=n(o),q=0,r=0,s=0,t=0;if(o.data("stellar-backgroundIsActive")){if(o.data("stellar-backgroundIsActive")!==this)return}else o.data("stellar-backgroundIsActive",this);o.data("stellar-backgroundStartingLeft")?m(o,o.data("stellar-backgroundStartingLeft"),o.data("stellar-backgroundStartingTop")):(o.data("stellar-backgroundStartingLeft",p[0]),o.data("stellar-backgroundStartingTop",p[1])),h="auto"===o.css("margin-left")?0:parseInt(o.css("margin-left"),10),i="auto"===o.css("margin-top")?0:parseInt(o.css("margin-top"),10),j=o.offset().left-h-e,k=o.offset().top-i-f,o.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(q=s,r=t,l=b,!1):(s+=b.position().left,void(t+=b.position().top))}),b=o.data("stellar-horizontal-offset")!==d?o.data("stellar-horizontal-offset"):l!==d&&l.data("stellar-horizontal-offset")!==d?l.data("stellar-horizontal-offset"):c.horizontalOffset,g=o.data("stellar-vertical-offset")!==d?o.data("stellar-vertical-offset"):l!==d&&l.data("stellar-vertical-offset")!==d?l.data("stellar-vertical-offset"):c.verticalOffset,c.backgrounds.push({$element:o,$offsetParent:l,isFixed:"fixed"===o.css("background-attachment"),horizontalOffset:b,verticalOffset:g,startingValueLeft:p[0],startingValueTop:p[1],startingBackgroundPositionLeft:isNaN(parseInt(p[0],10))?0:parseInt(p[0],10),startingBackgroundPositionTop:isNaN(parseInt(p[1],10))?0:parseInt(p[1],10),startingPositionLeft:o.position().left,startingPositionTop:o.position().top,startingOffsetLeft:j,startingOffsetTop:k,parentOffsetLeft:q,parentOffsetTop:r,stellarRatio:o.data("stellar-background-ratio")===d?1:o.data("stellar-background-ratio")})}))},_reset:function(){var a,b,c,d,e;for(e=this.particles.length-1;e>=0;e--)a=this.particles[e],b=a.$element.data("stellar-startingLeft"),c=a.$element.data("stellar-startingTop"),this._setPosition(a.$element,b,b,c,c),this.options.showElement(a.$element),a.$element.data("stellar-startingLeft",null).data("stellar-elementIsActive",null).data("stellar-backgroundIsActive",null);for(e=this.backgrounds.length-1;e>=0;e--)d=this.backgrounds[e],d.$element.data("stellar-backgroundStartingLeft",null).data("stellar-backgroundStartingTop",null),m(d.$element,d.startingValueLeft,d.startingValueTop)},destroy:function(){this._reset(),this.$scrollElement.unbind("resize."+this.name).unbind("scroll."+this.name),this._animationLoop=a.noop,a(b).unbind("load."+this.name).unbind("resize."+this.name)},_setOffsets:function(){var c=this,d=a(b);d.unbind("resize.horizontal-"+this.name).unbind("resize.vertical-"+this.name),"function"==typeof this.options.horizontalOffset?(this.horizontalOffset=this.options.horizontalOffset(),d.bind("resize.horizontal-"+this.name,function(){c.horizontalOffset=c.options.horizontalOffset()})):this.horizontalOffset=this.options.horizontalOffset,"function"==typeof this.options.verticalOffset?(this.verticalOffset=this.options.verticalOffset(),d.bind("resize.vertical-"+this.name,function(){c.verticalOffset=c.options.verticalOffset()})):this.verticalOffset=this.options.verticalOffset},_repositionElements:function(){var a,b,c,d,e,f,g,h,i,j,k=this._getScrollLeft(),l=this._getScrollTop(),n=!0,o=!0;if(this.currentScrollLeft!==k||this.currentScrollTop!==l||this.currentWidth!==this.viewportWidth||this.currentHeight!==this.viewportHeight){for(this.currentScrollLeft=k,this.currentScrollTop=l,this.currentWidth=this.viewportWidth,this.currentHeight=this.viewportHeight,j=this.particles.length-1;j>=0;j--)a=this.particles[j],b=a.isFixed?1:0,this.options.horizontalScrolling?(f=(k+a.horizontalOffset+this.viewportOffsetLeft+a.startingPositionLeft-a.startingOffsetLeft+a.parentOffsetLeft)*-(a.stellarRatio+b-1)+a.startingPositionLeft,h=f-a.startingPositionLeft+a.startingOffsetLeft):(f=a.startingPositionLeft,h=a.startingOffsetLeft),this.options.verticalScrolling?(g=(l+a.verticalOffset+this.viewportOffsetTop+a.startingPositionTop-a.startingOffsetTop+a.parentOffsetTop)*-(a.stellarRatio+b-1)+a.startingPositionTop,i=g-a.startingPositionTop+a.startingOffsetTop):(g=a.startingPositionTop,i=a.startingOffsetTop),this.options.hideDistantElements&&(o=!this.options.horizontalScrolling||h+a.width>(a.isFixed?0:k)&&h<(a.isFixed?0:k)+this.viewportWidth+this.viewportOffsetLeft,n=!this.options.verticalScrolling||i+a.height>(a.isFixed?0:l)&&i<(a.isFixed?0:l)+this.viewportHeight+this.viewportOffsetTop),o&&n?(a.isHidden&&(this.options.showElement(a.$element),a.isHidden=!1),this._setPosition(a.$element,f,a.startingPositionLeft,g,a.startingPositionTop)):a.isHidden||(this.options.hideElement(a.$element),a.isHidden=!0);for(j=this.backgrounds.length-1;j>=0;j--)c=this.backgrounds[j],b=c.isFixed?0:1,d=this.options.horizontalScrolling?(k+c.horizontalOffset-this.viewportOffsetLeft-c.startingOffsetLeft+c.parentOffsetLeft-c.startingBackgroundPositionLeft)*(b-c.stellarRatio)+"px":c.startingValueLeft,e=this.options.verticalScrolling?(l+c.verticalOffset-this.viewportOffsetTop-c.startingOffsetTop+c.parentOffsetTop-c.startingBackgroundPositionTop)*(b-c.stellarRatio)+"px":c.startingValueTop,m(c.$element,d,e)}},_handleScrollEvent:function(){var a=this,b=!1,c=function(){a._repositionElements(),b=!1},d=function(){b||(o(c),b=!0)};this.$scrollElement.bind("scroll."+this.name,d),d()},_startAnimationLoop:function(){var a=this;this._animationLoop=function(){o(a._animationLoop),a._repositionElements()},this._animationLoop()}},a.fn[f]=function(b){var c=arguments;return b===d||"object"==typeof b?this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))}):"string"==typeof b&&"_"!==b[0]&&"init"!==b?this.each(function(){var d=a.data(this,"plugin_"+f);d instanceof e&&"function"==typeof d[b]&&d[b].apply(d,Array.prototype.slice.call(c,1)),"destroy"===b&&a.data(this,"plugin_"+f,null)}):void 0},a[f]=function(){var c=a(b);return c.stellar.apply(c,Array.prototype.slice.call(arguments,0))},a[f].scrollProperty=h,a[f].positionProperty=i,b.Stellar=e}(jQuery,this,document);

</syntaxhighlight>

=== Scrolly ===
[[JQuery.Scrolly]]

== Lightbox, Gallery & co ==

=== Chocolat ===
Nette responsive Lightbox für Anfänger und Profis

http://chocolat.insipi.de

[[Chocolat Lightbox]]

=== Lightbox ===
Der Klassiker: [[Lightbox jQuery Plugin]]

=== Magnific Popup ===
Galt lange als DER Nachfolger der Lightbox [[Magnific Popup jQuery Plugin]]

== Isotope / Masonry ==
[[JavaScript - Masonry / Isotope]]

== Charts / Counter ==
=== jQuery CountTo ===
<syntaxhighlight lang="javascript">
// jQuery CountTo
!function(t){"use strict";function e(t,e){return t.toFixed(e.decimals)}t.fn.countTo=function(e){return e=e||{},t(this).each(function(){function a(){s+=l,c++,n(s),"function"==typeof o.onUpdate&&o.onUpdate.call(i,s),c>=r&&(f.removeData("countTo"),clearInterval(d.interval),s=o.to,"function"==typeof o.onComplete&&o.onComplete.call(i,s))}function n(t){var e=o.formatter.call(i,t,o);f.text(e)}var o=t.extend({},t.fn.countTo.defaults,{from:t(this).data("from"),to:t(this).data("to"),speed:t(this).data("speed"),refreshInterval:t(this).data("refresh-interval"),decimals:t(this).data("decimals")},e),r=Math.ceil(o.speed/o.refreshInterval),l=(o.to-o.from)/r,i=this,f=t(this),c=0,s=o.from,d=f.data("countTo")||{};f.data("countTo",d),d.interval&&clearInterval(d.interval),d.interval=setInterval(a,o.refreshInterval),n(s)})},t.fn.countTo.defaults={from:0,to:0,speed:1e3,refreshInterval:100,decimals:0,formatter:e,onUpdate:null,onComplete:null}}(jQuery);
</syntaxhighlight>

=== Easy Pie Chart ===
<syntaxhighlight lang="javascript">
/**!
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.6
**/
!function(a,b){"object"==typeof exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],b):b(a.jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(){},onStep:function(){},onStop:function(){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));e.easing="string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?jQuery.easing[e.easing]:d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}});
</syntaxhighlight>

== Audio / Video / MediaPlayer ==
Siehe auch: [[JavaScript - HTML5 Audio]]
https://ourcodeworld.com/articles/read/148/top-7-best-html5-media-player-javascript-plugins

* Plyr (HTML5, YouTube, Vimeo, accessible, lightweight, customisable, responsive, no dependencies) https://github.com/sampotts/plyr
* Video.js (Video, build new from ground in 2010, popular)
* Popcorn.js (HTML5 Event Framework for Filmmakers, Audio Video, Vimeo, YouTube, Soundcloud...)
* Afterglow ( HTML5 Elements, little Effort)
* MediaElement.js (Mimics HTML5, Flash Fallback, Accessible)
* jPlayer (Audio, Video, Skinnable, API
* Projekktor (OpenSource Video/Audio, Flashfallback different output devices)

=== FitVids ===
Embedding Videos from YouTube, Vimeo,...

[[FitVids jQuery Plugin]] https://github.com/davatron5000/FitVids.js

=== Vide - Video Backgrounds ===

<syntaxhighlight lang="javascript">
/*
* Vide - v0.5.1
* Easy as hell jQuery plugin for video backgrounds.
* http://vodkabears.github.io/vide/
*
* Made by Ilya Makarov
* Under MIT License
*/
!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("object"==typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function b(a){var b,c,d,e,f,g,h,i={};for(f=a.replace(/\s*:\s*/g,":").replace(/\s*,\s*/g,",").split(","),h=0,g=f.length;h<g&&(c=f[h],c.search(/^(http|https|ftp):\/\//)===-1&&c.search(":")!==-1);h++)b=c.indexOf(":"),d=c.substring(0,b),e=c.substring(b+1),e||(e=void 0),"string"==typeof e&&(e="true"===e||"false"!==e&&e),"string"==typeof e&&(e=isNaN(e)?e:+e),i[d]=e;return null==d&&null==e?a:i}function c(a){a=""+a;var b,c,d,e=a.split(/\s+/),f="50%",g="50%";for(d=0,b=e.length;d<b;d++)c=e[d],"left"===c?f="0%":"right"===c?f="100%":"top"===c?g="0%":"bottom"===c?g="100%":"center"===c?0===d?f="50%":g="50%":0===d?f=c:g=c;return{x:f,y:g}}function d(b,c){var d=function(){c(this.src)};a('<img src="'+b+'.gif">').on("load",d),a('<img src="'+b+'.jpg">').on("load",d),a('<img src="'+b+'.jpeg">').on("load",d),a('<img src="'+b+'.png">').on("load",d)}function e(c,d,e){if(this.$element=a(c),"string"==typeof d&&(d=b(d)),e?"string"==typeof e&&(e=b(e)):e={},"string"==typeof d)d=d.replace(/\.\w*$/,"");else if("object"==typeof d)for(var f in d)d.hasOwnProperty(f)&&(d[f]=d[f].replace(/\.\w*$/,""));this.settings=a.extend({},g,e),this.path=d;try{this.init()}catch(i){if(i.message!==h)throw i}}var f="vide",g={volume:1,playbackRate:1,muted:!0,loop:!0,autoplay:!0,position:"50% 50%",posterType:"detect",resizing:!0,bgColor:"transparent",className:""},h="Not implemented";e.prototype.init=function(){var b,e,f=this,g=f.path,i=g,j="",k=f.$element,l=f.settings,m=c(l.position),n=l.posterType;e=f.$wrapper=a("<div>").addClass(l.className).css({position:"absolute","z-index":-1,top:0,left:0,bottom:0,right:0,overflow:"hidden","-webkit-background-size":"cover","-moz-background-size":"cover","-o-background-size":"cover","background-size":"cover","background-color":l.bgColor,"background-repeat":"no-repeat","background-position":m.x+" "+m.y}),"object"==typeof g&&(g.poster?i=g.poster:g.mp4?i=g.mp4:g.webm?i=g.webm:g.ogv&&(i=g.ogv)),"detect"===n?d(i,function(a){e.css("background-image","url("+a+")")}):"none"!==n&&e.css("background-image","url("+i+"."+n+")"),"static"===k.css("position")&&k.css("position","relative"),k.prepend(e),"object"==typeof g?(g.mp4&&(j+='<source src="'+g.mp4+'.mp4" type="video/mp4">'),g.webm&&(j+='<source src="'+g.webm+'.webm" type="video/webm">'),g.ogv&&(j+='<source src="'+g.ogv+'.ogv" type="video/ogg">'),b=f.$video=a("<video>"+j+"</video>")):b=f.$video=a('<video><source src="'+g+'.mp4" type="video/mp4"><source src="'+g+'.webm" type="video/webm"><source src="'+g+'.ogv" type="video/ogg"></video>');try{b.prop({autoplay:l.autoplay,loop:l.loop,volume:l.volume,muted:l.muted,defaultMuted:l.muted,playbackRate:l.playbackRate,defaultPlaybackRate:l.playbackRate})}catch(o){throw new Error(h)}b.css({margin:"auto",position:"absolute","z-index":-1,top:m.y,left:m.x,"-webkit-transform":"translate(-"+m.x+", -"+m.y+")","-ms-transform":"translate(-"+m.x+", -"+m.y+")","-moz-transform":"translate(-"+m.x+", -"+m.y+")",transform:"translate(-"+m.x+", -"+m.y+")",visibility:"hidden",opacity:0}).one("canplaythrough.vide",function(){f.resize()}).one("playing.vide",function(){b.css({visibility:"visible",opacity:1}),e.css("background-image","none")}),k.on("resize.vide",function(){l.resizing&&f.resize()}),e.append(b)},e.prototype.getVideoObject=function(){return this.$video[0]},e.prototype.resize=function(){if(this.$video){var a=this.$wrapper,b=this.$video,c=b[0],d=c.videoHeight,e=c.videoWidth,f=a.height(),g=a.width();g/e>f/d?b.css({width:g+2,height:"auto"}):b.css({width:"auto",height:f+2})}},e.prototype.destroy=function(){delete a[f].lookup[this.index],this.$video&&this.$video.off(f),this.$element.off(f).removeData(f),this.$wrapper.remove()},a[f]={lookup:[]},a.fn[f]=function(b,c){var d;return this.each(function(){d=a.data(this,f),d&&d.destroy(),d=new e(this,b,c),d.index=a[f].lookup.push(d)-1,a.data(this,f,d)}),this},a(document).ready(function(){var b=a(window);b.on("resize.vide",function(){for(var b,c=a[f].lookup.length,d=0;d<c;d++)b=a[f].lookup[d],b&&b.settings.resizing&&b.resize()}),b.on("unload.vide",function(){return!1}),a(document).find("[data-vide-bg]").each(function(b,c){var d=a(c),e=d.data("vide-options"),g=d.data("vide-bg");d[f](g,e)})})});

</syntaxhighlight>

=== Vegas Slider ===
Siehe Extra Seite

== Slider & Carousel ==
=== Slick Carousel & Slider ===
Der kann fast alles Slider. Gehört mit Owl Slider zu den vielseitigen.

http://kenwheeler.github.io/slick/

=== Owl Carousel===
[[Owl Carousel - JavaScript Plugin]]

=== Revolution Slider ===
https://revolution.themepunch.com/examples-jquery/

=== FlexSlider ===
[[FlexSlider - JavaScript Plugin]]

=== Vegas Slider ===
Schlichter aber vielseitiger Slider mit schönem KenBurns Effekt und div. Übergängen. Erfordert etwas JS Kenntnisse wenn mehr angepasst werden soll.

[[JavaScript - Vegas Slider]]

=== MultiScroll.js ===
http://alvarotrigo.com/multiScroll

Gegenläufiger Scroller
<syntaxhighlight lang="html5">
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script src="vendors/jquery.easings.min.js"></script>

<script type="text/javascript" src="jquery.multiscroll.js"></script>
</syntaxhighlight>

<syntaxhighlight lang="html5">
<div id="multiscroll">
<div class="ms-left">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
<div class="ms-right">
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
<div class="ms-section">Some section</div>
</div>
</div>
</syntaxhighlight>

== DOM Elemente manipulieren ==
=== Match Heights ===
Spalten in der Länge anpassen. Siehe auch Flex Grid in CSS3

[[Equal Heights]]

[[JavaScript - Match Height]]

=== Fit Viewport ===
==== Viewport Height ====
Element an die Höhe des Viewports anpassen
<syntaxhighlight lang="javascript">
$(document).ready(function(){
$("#hero").height($(window).height());
$(window).resize(function(){
$("#hero").height($(window).height());
});
});
</syntaxhighlight>

== Scrolling ==
Hinweis die meisten Scroll To and ScrollTops lassen sich auch mit einfachen jquery Snippets realisieren.
=== Einfaches jQuery Scroll To Top ===
Mehr brauchts nicht :-) [[Scroll ToTop (jQuery)]]

=== Perfect Scrollbar ===
[[Perfect Scrollbar]]

=== Ariel Fiesler ScrollTo ===
https://github.com/flesler/jquery.scrollTo

Lightweight, cross-browser and highly customizable animated scrolling with jQuery

=== Ariel Fiesler LocalScroll ===
https://github.com/flesler/jquery.localScroll

Animated anchor navigation made easy with jQuery

=== Smooth Scroll ===
Oil for Scrolling - damit ruckelt es nicht so beim Scrollen mit dem Mausrad
<syntaxhighlight lang="javascript">
//
// SmoothScroll for websites v1.4.0 (Balazs Galambosi)
// http://www.smoothscroll.net/
//
// Licensed under the terms of the MIT license.
//
// You may use it in your theme if you credit me.
// It is also free to use on any individual website.
//
// Exception:
// The only restriction is to not publish any
// extension for browsers or native application
// without getting a written permission first.
//
!function(){function e(){z.keyboardSupport&&m("keydown",a)}function t(){if(!A&&document.body){A=!0;var t=document.body,o=document.documentElement,n=window.innerHeight,r=t.scrollHeight;if(B=document.compatMode.indexOf("CSS")>=0?o:t,D=t,e(),top!=self)X=!0;else if(r>n&&(t.offsetHeight<=n||o.offsetHeight<=n)){var a=document.createElement("div");a.style.cssText="position:absolute; z-index:-10000; top:0; left:0; right:0; height:"+B.scrollHeight+"px",document.body.appendChild(a);var i;T=function(){i||(i=setTimeout(function(){L||(a.style.height="0",a.style.height=B.scrollHeight+"px",i=null)},500))},setTimeout(T,10),m("resize",T);var l={attributes:!0,childList:!0,characterData:!1};if(M=new V(T),M.observe(t,l),B.offsetHeight<=n){var c=document.createElement("div");c.style.clear="both",t.appendChild(c)}}z.fixedBackground||L||(t.style.backgroundAttachment="scroll",o.style.backgroundAttachment="scroll")}}function o(){M&&M.disconnect(),h(I,r),h("mousedown",i),h("keydown",a),h("resize",T),h("load",t)}function n(e,t,o){if(p(t,o),1!=z.accelerationMax){var n=Date.now(),r=n-R;if(r<z.accelerationDelta){var a=(1+50/r)/2;a>1&&(a=Math.min(a,z.accelerationMax),t*=a,o*=a)}R=Date.now()}if(q.push({x:t,y:o,lastX:0>t?.99:-.99,lastY:0>o?.99:-.99,start:Date.now()}),!P){var i=e===document.body,l=function(n){for(var r=Date.now(),a=0,c=0,u=0;u<q.length;u++){var d=q[u],s=r-d.start,f=s>=z.animationTime,m=f?1:s/z.animationTime;z.pulseAlgorithm&&(m=x(m));var h=d.x*m-d.lastX>>0,w=d.y*m-d.lastY>>0;a+=h,c+=w,d.lastX+=h,d.lastY+=w,f&&(q.splice(u,1),u--)}i?window.scrollBy(a,c):(a&&(e.scrollLeft+=a),c&&(e.scrollTop+=c)),t||o||(q=[]),q.length?_(l,e,1e3/z.frameRate+1):P=!1};_(l,e,0),P=!0}}function r(e){A||t();var o=e.target,r=u(o);if(!r||e.defaultPrevented||e.ctrlKey)return!0;if(w(D,"embed")||w(o,"embed")&&/\.pdf/i.test(o.src)||w(D,"object"))return!0;var a=-e.wheelDeltaX||e.deltaX||0,i=-e.wheelDeltaY||e.deltaY||0;return K&&(e.wheelDeltaX&&b(e.wheelDeltaX,120)&&(a=-120*(e.wheelDeltaX/Math.abs(e.wheelDeltaX))),e.wheelDeltaY&&b(e.wheelDeltaY,120)&&(i=-120*(e.wheelDeltaY/Math.abs(e.wheelDeltaY)))),a||i||(i=-e.wheelDelta||0),1===e.deltaMode&&(a*=40,i*=40),!z.touchpadSupport&&v(i)?!0:(Math.abs(a)>1.2&&(a*=z.stepSize/120),Math.abs(i)>1.2&&(i*=z.stepSize/120),n(r,a,i),e.preventDefault(),void l())}function a(e){var t=e.target,o=e.ctrlKey||e.altKey||e.metaKey||e.shiftKey&&e.keyCode!==N.spacebar;document.contains(D)||(D=document.activeElement);var r=/^(textarea|select|embed|object)$/i,a=/^(button|submit|radio|checkbox|file|color|image)$/i;if(r.test(t.nodeName)||w(t,"input")&&!a.test(t.type)||w(D,"video")||y(e)||t.isContentEditable||e.defaultPrevented||o)return!0;if((w(t,"button")||w(t,"input")&&a.test(t.type))&&e.keyCode===N.spacebar)return!0;var i,c=0,d=0,s=u(D),f=s.clientHeight;switch(s==document.body&&(f=window.innerHeight),e.keyCode){case N.up:d=-z.arrowScroll;break;case N.down:d=z.arrowScroll;break;case N.spacebar:i=e.shiftKey?1:-1,d=-i*f*.9;break;case N.pageup:d=.9*-f;break;case N.pagedown:d=.9*f;break;case N.home:d=-s.scrollTop;break;case N.end:var m=s.scrollHeight-s.scrollTop-f;d=m>0?m+10:0;break;case N.left:c=-z.arrowScroll;break;case N.right:c=z.arrowScroll;break;default:return!0}n(s,c,d),e.preventDefault(),l()}function i(e){D=e.target}function l(){clearTimeout(E),E=setInterval(function(){F={}},1e3)}function c(e,t){for(var o=e.length;o--;)F[j(e[o])]=t;return t}function u(e){var t=[],o=document.body,n=B.scrollHeight;do{var r=F[j(e)];if(r)return c(t,r);if(t.push(e),n===e.scrollHeight){var a=s(B)&&s(o),i=a||f(B);if(X&&d(B)||!X&&i)return c(t,$())}else if(d(e)&&f(e))return c(t,e)}while(e=e.parentElement)}function d(e){return e.clientHeight+10<e.scrollHeight}function s(e){var t=getComputedStyle(e,"").getPropertyValue("overflow-y");return"hidden"!==t}function f(e){var t=getComputedStyle(e,"").getPropertyValue("overflow-y");return"scroll"===t||"auto"===t}function m(e,t){window.addEventListener(e,t,!1)}function h(e,t){window.removeEventListener(e,t,!1)}function w(e,t){return(e.nodeName||"").toLowerCase()===t.toLowerCase()}function p(e,t){e=e>0?1:-1,t=t>0?1:-1,(Y.x!==e||Y.y!==t)&&(Y.x=e,Y.y=t,q=[],R=0)}function v(e){return e?(O.length||(O=[e,e,e]),e=Math.abs(e),O.push(e),O.shift(),clearTimeout(H),H=setTimeout(function(){window.localStorage&&(localStorage.SS_deltaBuffer=O.join(","))},1e3),!g(120)&&!g(100)):void 0}function b(e,t){return Math.floor(e/t)==e/t}function g(e){return b(O[0],e)&&b(O[1],e)&&b(O[2],e)}function y(e){var t=e.target,o=!1;if(-1!=document.URL.indexOf("www.youtube.com/watch"))do if(o=t.classList&&t.classList.contains("html5-video-controls"))break;while(t=t.parentNode);return o}function S(e){var t,o,n;return e*=z.pulseScale,1>e?t=e-(1-Math.exp(-e)):(o=Math.exp(-1),e-=1,n=1-Math.exp(-e),t=o+n*(1-o)),t*z.pulseNormalize}function x(e){return e>=1?1:0>=e?0:(1==z.pulseNormalize&&(z.pulseNormalize/=S(1)),S(e))}function k(e){for(var t in e)C.hasOwnProperty(t)&&(z[t]=e[t])}var D,M,T,E,H,C={frameRate:150,animationTime:400,stepSize:100,pulseAlgorithm:!0,pulseScale:4,pulseNormalize:1,accelerationDelta:50,accelerationMax:3,keyboardSupport:!0,arrowScroll:50,touchpadSupport:!1,fixedBackground:!0,excluded:""},z=C,L=!1,X=!1,Y={x:0,y:0},A=!1,B=document.documentElement,O=[],K=/^Mac/.test(navigator.platform),N={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},q=[],P=!1,R=Date.now(),j=function(){var e=0;return function(t){return t.uniqueID||(t.uniqueID=e++)}}(),F={};window.localStorage&&localStorage.SS_deltaBuffer&&(O=localStorage.SS_deltaBuffer.split(","));var I,_=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e,t,o){window.setTimeout(e,o||1e3/60)}}(),V=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,$=function(){var e;return function(){if(!e){var t=document.createElement("div");t.style.cssText="height:10000px;width:1px;",document.body.appendChild(t);var o=document.body.scrollTop;document.documentElement.scrollTop;window.scrollBy(0,1),e=document.body.scrollTop!=o?document.body:document.documentElement,window.scrollBy(0,-1),document.body.removeChild(t)}return e}}(),U=window.navigator.userAgent,W=/Edge/.test(U),G=/chrome/i.test(U)&&!W,J=/safari/i.test(U)&&!W,Q=/mobile/i.test(U),Z=(G||J)&&!Q;"onwheel"in document.createElement("div")?I="wheel":"onmousewheel"in document.createElement("div")&&(I="mousewheel"),I&&Z&&(m(I,r),m("mousedown",i),m("load",t)),k.destroy=o,window.SmoothScrollOptions&&k(window.SmoothScrollOptions),"function"==typeof define&&define.amd?define(function(){return k}):"object"==typeof exports?module.exports=k:window.SmoothScroll=k}();

</syntaxhighlight>

== Typography, Fonts, etc==
=== Letter.js ===
Zerpflückt Texte und wrappt Buchstaben / Wörter / Zeilen in durchnummerierte Klassen. Diese kann man dann cool Stylen.

https://github.com/davatron5000/Lettering.js

=== Fittext ===
Responsive Textgrößen in Typographie-Spielereien für Überschriften etc.

http://fittextjs.com/

=== Prism.js ===
Syntaxhighlighter

== Google Maps mit gmaps.js ==
https://hpneo.github.io/gmaps/
Einfache Karte
<syntaxhighlight lang="javascript">
new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333
});
</syntaxhighlight>
Grey Style Karte
<syntaxhighlight lang="javascript">
//Google map
/*global $:false */
var map;
$(document).ready(function(){"use strict";
map = new GMaps({
disableDefaultUI: true,
scrollwheel: false,
el: '#map',
lat: 48.4912812,
lng: 9.2175255
});
map.drawOverlay({
lat: map.getCenter().lat(),
lng: map.getCenter().lng(),
layer: 'overlayLayer',
content: '<div class="overlay"></div>',
verticalAlign: 'center',
horizontalAlign: 'center'
});
var styles = [
{
"featureType": "poi",
"stylers": [
{ "visibility": "on" },
{ "weight": 0.9 },
{ "lightness": 37 },
{ "gamma": 0.62 },
{ "hue": "#ff0000" },
{ "saturation": -93 }
]
},{
"featureType": "poi",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -1 },
{ "color": "#ffffff" },
{ "weight": 0.2 }
]
},{
"featureType": "road",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -98 }
]
},{
"featureType": "landscape",
"stylers": [
{ "hue": "#ff0000" },
{ "saturation": -89 }
]
},{
"featureType": "water",
"stylers": [
{ "hue": "#cfa144" },
{ "weight": 0.4 },
{ "saturation": -38 }
]
}
];

map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});

map.setStyle("map_style");

});
</syntaxhighlight>
<syntaxhighlight lang="javascript">
"use strict";
(function(root, factory) {
if(typeof exports === 'object') {
module.exports = factory();
}
else if(typeof define === 'function' && define.amd) {
define(['jquery', 'googlemaps!'], factory);
}
else {
root.GMaps = factory();
}

}(this, function() {

/*!
* GMaps.js v0.4.25
* http://hpneo.github.com/gmaps/
*
* Copyright 2017, Gustavo Leon
* Released under the MIT License.
*/

var extend_object = function(obj, new_obj) {
var name;

if (obj === new_obj) {
return obj;
}

for (name in new_obj) {
if (new_obj[name] !== undefined) {
obj[name] = new_obj[name];
}
}

return obj;
};

var replace_object = function(obj, replace) {
var name;

if (obj === replace) {
return obj;
}

for (name in replace) {
if (obj[name] != undefined) {
obj[name] = replace[name];
}
}

return obj;
};

var array_map = function(array, callback) {
var original_callback_params = Array.prototype.slice.call(arguments, 2),
array_return = [],
array_length = array.length,
i;

if (Array.prototype.map && array.map === Array.prototype.map) {
array_return = Array.prototype.map.call(array, function(item) {
var callback_params = original_callback_params.slice(0);
callback_params.splice(0, 0, item);

return callback.apply(this, callback_params);
});
}
else {
for (i = 0; i < array_length; i++) {
callback_params = original_callback_params;
callback_params.splice(0, 0, array[i]);
array_return.push(callback.apply(this, callback_params));
}
}

return array_return;
};

var array_flat = function(array) {
var new_array = [],
i;

for (i = 0; i < array.length; i++) {
new_array = new_array.concat(array[i]);
}

return new_array;
};

var coordsToLatLngs = function(coords, useGeoJSON) {
var first_coord = coords[0],
second_coord = coords[1];

if (useGeoJSON) {
first_coord = coords[1];
second_coord = coords[0];
}

return new google.maps.LatLng(first_coord, second_coord);
};

var arrayToLatLng = function(coords, useGeoJSON) {
var i;

for (i = 0; i < coords.length; i++) {
if (!(coords[i] instanceof google.maps.LatLng)) {
if (coords[i].length > 0 && typeof(coords[i][0]) === "object") {
coords[i] = arrayToLatLng(coords[i], useGeoJSON);
}
else {
coords[i] = coordsToLatLngs(coords[i], useGeoJSON);
}
}
}

return coords;
};

var getElementsByClassName = function (class_name, context) {
var element,
_class = class_name.replace('.', '');

if ('jQuery' in this && context) {
element = $("." + _class, context)[0];
} else {
element = document.getElementsByClassName(_class)[0];
}
return element;

};

var getElementById = function(id, context) {
var element,
id = id.replace('#', '');

if ('jQuery' in window && context) {
element = $('#' + id, context)[0];
} else {
element = document.getElementById(id);
};

return element;
};

var findAbsolutePosition = function(obj) {
var curleft = 0,
curtop = 0;

if (obj.getBoundingClientRect) {
var rect = obj.getBoundingClientRect();
var sx = -(window.scrollX ? window.scrollX : window.pageXOffset);
var sy = -(window.scrollY ? window.scrollY : window.pageYOffset);

return [(rect.left - sx), (rect.top - sy)];
}

if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return [curleft, curtop];
};

var GMaps = (function(global) {
"use strict";

var doc = document;
/**
* Creates a new GMaps instance, including a Google Maps map.
* @class GMaps
* @constructs
* @param {object} options - `options` accepts all the [MapOptions](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) and [events](https://developers.google.com/maps/documentation/javascript/reference#Map) listed in the Google Maps API. Also accepts:
* * `lat` (number): Latitude of the map's center
* * `lng` (number): Longitude of the map's center
* * `el` (string or HTMLElement): container where the map will be rendered
* * `markerClusterer` (function): A function to create a marker cluster. You can use MarkerClusterer or MarkerClustererPlus.
*/
var GMaps = function(options) {

if (!(typeof window.google === 'object' && window.google.maps)) {
if (typeof window.console === 'object' && window.console.error) {
console.error('Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js.');
}

return function() {};
}

if (!this) return new GMaps(options);

options.zoom = options.zoom || 15;
options.mapType = options.mapType || 'roadmap';

var valueOrDefault = function(value, defaultValue) {
return value === undefined ? defaultValue : value;
};

var self = this,
i,
events_that_hide_context_menu = [
'bounds_changed', 'center_changed', 'click', 'dblclick', 'drag',
'dragend', 'dragstart', 'idle', 'maptypeid_changed', 'projection_changed',
'resize', 'tilesloaded', 'zoom_changed'
],
events_that_doesnt_hide_context_menu = ['mousemove', 'mouseout', 'mouseover'],
options_to_be_deleted = ['el', 'lat', 'lng', 'mapType', 'width', 'height', 'markerClusterer', 'enableNewStyle'],
identifier = options.el || options.div,
markerClustererFunction = options.markerClusterer,
mapType = google.maps.MapTypeId[options.mapType.toUpperCase()],
map_center = new google.maps.LatLng(options.lat, options.lng),
zoomControl = valueOrDefault(options.zoomControl, true),
zoomControlOpt = options.zoomControlOpt || {
style: 'DEFAULT',
position: 'TOP_LEFT'
},
zoomControlStyle = zoomControlOpt.style || 'DEFAULT',
zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT',
panControl = valueOrDefault(options.panControl, true),
mapTypeControl = valueOrDefault(options.mapTypeControl, true),
scaleControl = valueOrDefault(options.scaleControl, true),
streetViewControl = valueOrDefault(options.streetViewControl, true),
overviewMapControl = valueOrDefault(overviewMapControl, true),
map_options = {},
map_base_options = {
zoom: this.zoom,
center: map_center,
mapTypeId: mapType
},
map_controls_options = {
panControl: panControl,
zoomControl: zoomControl,
zoomControlOptions: {
style: google.maps.ZoomControlStyle[zoomControlStyle],
position: google.maps.ControlPosition[zoomControlPosition]
},
mapTypeControl: mapTypeControl,
scaleControl: scaleControl,
streetViewControl: streetViewControl,
overviewMapControl: overviewMapControl
};

if (typeof(options.el) === 'string' || typeof(options.div) === 'string') {
if (identifier.indexOf("#") > -1) {
/**
* Container element
*
* @type {HTMLElement}
*/
this.el = getElementById(identifier, options.context);
} else {
this.el = getElementsByClassName.apply(this, [identifier, options.context]);
}
} else {
this.el = identifier;
}

if (typeof(this.el) === 'undefined' || this.el === null) {
throw 'No element defined.';
}

window.context_menu = window.context_menu || {};
window.context_menu[self.el.id] = {};

/**
* Collection of custom controls in the map UI
*
* @type {array}
*/
this.controls = [];
/**
* Collection of map's overlays
*
* @type {array}
*/
this.overlays = [];
/**
* Collection of KML/GeoRSS and FusionTable layers
*
* @type {array}
*/
this.layers = [];
/**
* Collection of data layers (See {@link GMaps#addLayer})
*
* @type {object}
*/
this.singleLayers = {};
/**
* Collection of map's markers
*
* @type {array}
*/
this.markers = [];
/**
* Collection of map's lines
*
* @type {array}
*/
this.polylines = [];
/**
* Collection of map's routes requested by {@link GMaps#getRoutes}, {@link GMaps#renderRoute}, {@link GMaps#drawRoute}, {@link GMaps#travelRoute} or {@link GMaps#drawSteppedRoute}
*
* @type {array}
*/
this.routes = [];
/**
* Collection of map's polygons
*
* @type {array}
*/
this.polygons = [];
this.infoWindow = null;
this.overlay_el = null;
/**
* Current map's zoom
*
* @type {number}
*/
this.zoom = options.zoom;
this.registered_events = {};

this.el.style.width = options.width || this.el.scrollWidth || this.el.offsetWidth;
this.el.style.height = options.height || this.el.scrollHeight || this.el.offsetHeight;

google.maps.visualRefresh = options.enableNewStyle;

for (i = 0; i < options_to_be_deleted.length; i++) {
delete options[options_to_be_deleted[i]];
}

if(options.disableDefaultUI != true) {
map_base_options = extend_object(map_base_options, map_controls_options);
}

map_options = extend_object(map_base_options, options);

for (i = 0; i < events_that_hide_context_menu.length; i++) {
delete map_options[events_that_hide_context_menu[i]];
}

for (i = 0; i < events_that_doesnt_hide_context_menu.length; i++) {
delete map_options[events_that_doesnt_hide_context_menu[i]];
}

/**
* Google Maps map instance
*
* @type {google.maps.Map}
*/
this.map = new google.maps.Map(this.el, map_options);

if (markerClustererFunction) {
/**
* Marker Clusterer instance
*
* @type {object}
*/
this.markerClusterer = markerClustererFunction.apply(this, [this.map]);
}

var buildContextMenuHTML = function(control, e) {
var html = '',
options = window.context_menu[self.el.id][control];

for (var i in options){
if (options.hasOwnProperty(i)) {
var option = options[i];

html += '<li><a id="' + control + '_' + i + '" href="#">' + option.title + '</a></li>';
}
}

if (!getElementById('gmaps_context_menu')) return;

var context_menu_element = getElementById('gmaps_context_menu');

context_menu_element.innerHTML = html;

var context_menu_items = context_menu_element.getElementsByTagName('a'),
context_menu_items_count = context_menu_items.length,
i;

for (i = 0; i < context_menu_items_count; i++) {
var context_menu_item = context_menu_items[i];

var assign_menu_item_action = function(ev){
ev.preventDefault();

options[this.id.replace(control + '_', '')].action.apply(self, [e]);
self.hideContextMenu();
};

google.maps.event.clearListeners(context_menu_item, 'click');
google.maps.event.addDomListenerOnce(context_menu_item, 'click', assign_menu_item_action, false);
}

var position = findAbsolutePosition.apply(this, [self.el]),
left = position[0] + e.pixel.x - 15,
top = position[1] + e.pixel.y- 15;

context_menu_element.style.left = left + "px";
context_menu_element.style.top = top + "px";

// context_menu_element.style.display = 'block';
};

this.buildContextMenu = function(control, e) {
if (control === 'marker') {
e.pixel = {};

var overlay = new google.maps.OverlayView();
overlay.setMap(self.map);

overlay.draw = function() {
var projection = overlay.getProjection(),
position = e.marker.getPosition();

e.pixel = projection.fromLatLngToContainerPixel(position);

buildContextMenuHTML(control, e);
};
}
else {
buildContextMenuHTML(control, e);
}

var context_menu_element = getElementById('gmaps_context_menu');

setTimeout(function() {
context_menu_element.style.display = 'block';
}, 0);
};

/**
* Add a context menu for a map or a marker.
*
* @param {object} options - The `options` object should contain:
* * `control` (string): Kind of control the context menu will be attached. Can be "map" or "marker".
* * `options` (array): A collection of context menu items:
* * `title` (string): Item's title shown in the context menu.
* * `name` (string): Item's identifier.
* * `action` (function): Function triggered after selecting the context menu item.
*/
this.setContextMenu = function(options) {
window.context_menu[self.el.id][options.control] = {};

var i,
ul = doc.createElement('ul');

for (i in options.options) {
if (options.options.hasOwnProperty(i)) {
var option = options.options[i];

window.context_menu[self.el.id][options.control][option.name] = {
title: option.title,
action: option.action
};
}
}

ul.id = 'gmaps_context_menu';
ul.style.display = 'none';
ul.style.position = 'absolute';
ul.style.minWidth = '100px';
ul.style.background = 'white';
ul.style.listStyle = 'none';
ul.style.padding = '8px';
ul.style.boxShadow = '2px 2px 6px #ccc';

if (!getElementById('gmaps_context_menu')) {
doc.body.appendChild(ul);
}

var context_menu_element = getElementById('gmaps_context_menu');

google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) {
if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) {
window.setTimeout(function(){
context_menu_element.style.display = 'none';
}, 400);
}
}, false);
};

/**
* Hide the current context menu
*/
this.hideContextMenu = function() {
var context_menu_element = getElementById('gmaps_context_menu');

if (context_menu_element) {
context_menu_element.style.display = 'none';
}
};

var setupListener = function(object, name) {
google.maps.event.addListener(object, name, function(e){
if (e == undefined) {
e = this;
}

options[name].apply(this, [e]);

self.hideContextMenu();
});
};

//google.maps.event.addListener(this.map, 'idle', this.hideContextMenu);
google.maps.event.addListener(this.map, 'zoom_changed', this.hideContextMenu);

for (var ev = 0; ev < events_that_hide_context_menu.length; ev++) {
var name = events_that_hide_context_menu[ev];

if (name in options) {
setupListener(this.map, name);
}
}

for (var ev = 0; ev < events_that_doesnt_hide_context_menu.length; ev++) {
var name = events_that_doesnt_hide_context_menu[ev];

if (name in options) {
setupListener(this.map, name);
}
}

google.maps.event.addListener(this.map, 'rightclick', function(e) {
if (options.rightclick) {
options.rightclick.apply(this, [e]);
}

if(window.context_menu[self.el.id]['map'] != undefined) {
self.buildContextMenu('map', e);
}
});

/**
* Trigger a `resize` event, useful if you need to repaint the current map (for changes in the viewport or display / hide actions).
*/
this.refresh = function() {
google.maps.event.trigger(this.map, 'resize');
};

/**
* Adjust the map zoom to include all the markers added in the map.
*/
this.fitZoom = function() {
var latLngs = [],
markers_length = this.markers.length,
i;

for (i = 0; i < markers_length; i++) {
if(typeof(this.markers[i].visible) === 'boolean' && this.markers[i].visible) {
latLngs.push(this.markers[i].getPosition());
}
}

this.fitLatLngBounds(latLngs);
};

/**
* Adjust the map zoom to include all the coordinates in the `latLngs` array.
*
* @param {array} latLngs - Collection of `google.maps.LatLng` objects.
*/
this.fitLatLngBounds = function(latLngs) {
var total = latLngs.length,
bounds = new google.maps.LatLngBounds(),
i;

for(i = 0; i < total; i++) {
bounds.extend(latLngs[i]);
}

this.map.fitBounds(bounds);
};

/**
* Center the map using the `lat` and `lng` coordinates.
*
* @param {number} lat - Latitude of the coordinate.
* @param {number} lng - Longitude of the coordinate.
* @param {function} [callback] - Callback that will be executed after the map is centered.
*/
this.setCenter = function(lat, lng, callback) {
this.map.panTo(new google.maps.LatLng(lat, lng));

if (callback) {
callback();
}
};

/**
* Return the HTML element container of the map.
*
* @returns {HTMLElement} the element container.
*/
this.getElement = function() {
return this.el;
};

/**
* Increase the map's zoom.
*
* @param {number} [magnitude] - The number of times the map will be zoomed in.
*/
this.zoomIn = function(value) {
value = value || 1;

this.zoom = this.map.getZoom() + value;
this.map.setZoom(this.zoom);
};

/**
* Decrease the map's zoom.
*
* @param {number} [magnitude] - The number of times the map will be zoomed out.
*/
this.zoomOut = function(value) {
value = value || 1;

this.zoom = this.map.getZoom() - value;
this.map.setZoom(this.zoom);
};

var native_methods = [],
method;

for (method in this.map) {
if (typeof(this.map[method]) == 'function' && !this[method]) {
native_methods.push(method);
}
}

for (i = 0; i < native_methods.length; i++) {
(function(gmaps, scope, method_name) {
gmaps[method_name] = function(){
return scope[method_name].apply(scope, arguments);
};
})(this, this.map, native_methods[i]);
}
};

return GMaps;
})(this);

GMaps.prototype.createControl = function(options) {
var control = document.createElement('div');

control.style.cursor = 'pointer';

if (options.disableDefaultStyles !== true) {
control.style.fontFamily = 'Roboto, Arial, sans-serif';
control.style.fontSize = '11px';
control.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
}

for (var option in options.style) {
control.style[option] = options.style[option];
}

if (options.id) {
control.id = options.id;
}

if (options.title) {
control.title = options.title;
}

if (options.classes) {
control.className = options.classes;
}

if (options.content) {
if (typeof options.content === 'string') {
control.innerHTML = options.content;
}
else if (options.content instanceof HTMLElement) {
control.appendChild(options.content);
}
}

if (options.position) {
control.position = google.maps.ControlPosition[options.position.toUpperCase()];
}

for (var ev in options.events) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(){
options.events[name].apply(this, [this]);
});
})(control, ev);
}

control.index = 1;

return control;
};

/**
* Add a custom control to the map UI.
*
* @param {object} options - The `options` object should contain:
* * `style` (object): The keys and values of this object should be valid CSS properties and values.
* * `id` (string): The HTML id for the custom control.
* * `classes` (string): A string containing all the HTML classes for the custom control.
* * `content` (string or HTML element): The content of the custom control.
* * `position` (string): Any valid [`google.maps.ControlPosition`](https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning) value, in lower or upper case.
* * `events` (object): The keys of this object should be valid DOM events. The values should be functions.
* * `disableDefaultStyles` (boolean): If false, removes the default styles for the controls like font (family and size), and box shadow.
* @returns {HTMLElement}
*/
GMaps.prototype.addControl = function(options) {
var control = this.createControl(options);

this.controls.push(control);
this.map.controls[control.position].push(control);

return control;
};

/**
* Remove a control from the map. `control` should be a control returned by `addControl()`.
*
* @param {HTMLElement} control - One of the controls returned by `addControl()`.
* @returns {HTMLElement} the removed control.
*/
GMaps.prototype.removeControl = function(control) {
var position = null,
i;

for (i = 0; i < this.controls.length; i++) {
if (this.controls[i] == control) {
position = this.controls[i].position;
this.controls.splice(i, 1);
}
}

if (position) {
for (i = 0; i < this.map.controls.length; i++) {
var controlsForPosition = this.map.controls[control.position];

if (controlsForPosition.getAt(i) == control) {
controlsForPosition.removeAt(i);

break;
}
}
}

return control;
};

GMaps.prototype.createMarker = function(options) {
if (options.lat == undefined && options.lng == undefined && options.position == undefined) {
throw 'No latitude or longitude defined.';
}

var self = this,
details = options.details,
fences = options.fences,
outside = options.outside,
base_options = {
position: new google.maps.LatLng(options.lat, options.lng),
map: null
},
marker_options = extend_object(base_options, options);

delete marker_options.lat;
delete marker_options.lng;
delete marker_options.fences;
delete marker_options.outside;

var marker = new google.maps.Marker(marker_options);

marker.fences = fences;

if (options.infoWindow) {
marker.infoWindow = new google.maps.InfoWindow(options.infoWindow);

var info_window_events = ['closeclick', 'content_changed', 'domready', 'position_changed', 'zindex_changed'];

for (var ev = 0; ev < info_window_events.length; ev++) {
(function(object, name) {
if (options.infoWindow[name]) {
google.maps.event.addListener(object, name, function(e){
options.infoWindow[name].apply(this, [e]);
});
}
})(marker.infoWindow, info_window_events[ev]);
}
}

var marker_events = ['animation_changed', 'clickable_changed', 'cursor_changed', 'draggable_changed', 'flat_changed', 'icon_changed', 'position_changed', 'shadow_changed', 'shape_changed', 'title_changed', 'visible_changed', 'zindex_changed'];

var marker_events_with_mouse = ['dblclick', 'drag', 'dragend', 'dragstart', 'mousedown', 'mouseout', 'mouseover', 'mouseup'];

for (var ev = 0; ev < marker_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this, [this]);
});
}
})(marker, marker_events[ev]);
}

for (var ev = 0; ev < marker_events_with_mouse.length; ev++) {
(function(map, object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(me){
if(!me.pixel){
me.pixel = map.getProjection().fromLatLngToPoint(me.latLng)
}

options[name].apply(this, [me]);
});
}
})(this.map, marker, marker_events_with_mouse[ev]);
}

google.maps.event.addListener(marker, 'click', function() {
this.details = details;

if (options.click) {
options.click.apply(this, [this]);
}

if (marker.infoWindow) {
self.hideInfoWindows();
marker.infoWindow.open(self.map, marker);
}
});

google.maps.event.addListener(marker, 'rightclick', function(e) {
e.marker = this;

if (options.rightclick) {
options.rightclick.apply(this, [e]);
}

if (window.context_menu[self.el.id]['marker'] != undefined) {
self.buildContextMenu('marker', e);
}
});

if (marker.fences) {
google.maps.event.addListener(marker, 'dragend', function() {
self.checkMarkerGeofence(marker, function(m, f) {
outside(m, f);
});
});
}

return marker;
};

GMaps.prototype.addMarker = function(options) {
var marker;
if(options.hasOwnProperty('gm_accessors_')) {
// Native google.maps.Marker object
marker = options;
}
else {
if ((options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) || options.position) {
marker = this.createMarker(options);
}
else {
throw 'No latitude or longitude defined.';
}
}

marker.setMap(this.map);

if(this.markerClusterer) {
this.markerClusterer.addMarker(marker);
}

this.markers.push(marker);

GMaps.fire('marker_added', marker, this);

return marker;
};

GMaps.prototype.addMarkers = function(array) {
for (var i = 0, marker; marker=array[i]; i++) {
this.addMarker(marker);
}

return this.markers;
};

GMaps.prototype.hideInfoWindows = function() {
for (var i = 0, marker; marker = this.markers[i]; i++){
if (marker.infoWindow) {
marker.infoWindow.close();
}
}
};

GMaps.prototype.removeMarker = function(marker) {
for (var i = 0; i < this.markers.length; i++) {
if (this.markers[i] === marker) {
this.markers[i].setMap(null);
this.markers.splice(i, 1);

if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}

GMaps.fire('marker_removed', marker, this);

break;
}
}

return marker;
};

GMaps.prototype.removeMarkers = function (collection) {
var new_markers = [];

if (typeof collection == 'undefined') {
for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
marker.setMap(null);

GMaps.fire('marker_removed', marker, this);
}

if(this.markerClusterer && this.markerClusterer.clearMarkers) {
this.markerClusterer.clearMarkers();
}

this.markers = new_markers;
}
else {
for (var i = 0; i < collection.length; i++) {
var index = this.markers.indexOf(collection[i]);

if (index > -1) {
var marker = this.markers[index];
marker.setMap(null);

if(this.markerClusterer) {
this.markerClusterer.removeMarker(marker);
}

GMaps.fire('marker_removed', marker, this);
}
}

for (var i = 0; i < this.markers.length; i++) {
var marker = this.markers[i];
if (marker.getMap() != null) {
new_markers.push(marker);
}
}

this.markers = new_markers;
}
};

GMaps.prototype.drawOverlay = function(options) {
var overlay = new google.maps.OverlayView(),
auto_show = true;

overlay.setMap(this.map);

if (options.auto_show != null) {
auto_show = options.auto_show;
}

overlay.onAdd = function() {
var el = document.createElement('div');

el.style.borderStyle = "none";
el.style.borderWidth = "0px";
el.style.position = "absolute";
el.style.zIndex = 100;
el.innerHTML = options.content;

overlay.el = el;

if (!options.layer) {
options.layer = 'overlayLayer';
}

var panes = this.getPanes(),
overlayLayer = panes[options.layer],
stop_overlay_events = ['contextmenu', 'DOMMouseScroll', 'dblclick', 'mousedown'];

overlayLayer.appendChild(el);

for (var ev = 0; ev < stop_overlay_events.length; ev++) {
(function(object, name) {
google.maps.event.addDomListener(object, name, function(e){
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1 && document.all) {
e.cancelBubble = true;
e.returnValue = false;
}
else {
e.stopPropagation();
}
});
})(el, stop_overlay_events[ev]);
}

if (options.click) {
panes.overlayMouseTarget.appendChild(overlay.el);
google.maps.event.addDomListener(overlay.el, 'click', function() {
options.click.apply(overlay, [overlay]);
});
}

google.maps.event.trigger(this, 'ready');
};

overlay.draw = function() {
var projection = this.getProjection(),
pixel = projection.fromLatLngToDivPixel(new google.maps.LatLng(options.lat, options.lng));

options.horizontalOffset = options.horizontalOffset || 0;
options.verticalOffset = options.verticalOffset || 0;

var el = overlay.el,
content = el.children[0],
content_height = content.clientHeight,
content_width = content.clientWidth;

switch (options.verticalAlign) {
case 'top':
el.style.top = (pixel.y - content_height + options.verticalOffset) + 'px';
break;
default:
case 'middle':
el.style.top = (pixel.y - (content_height / 2) + options.verticalOffset) + 'px';
break;
case 'bottom':
el.style.top = (pixel.y + options.verticalOffset) + 'px';
break;
}

switch (options.horizontalAlign) {
case 'left':
el.style.left = (pixel.x - content_width + options.horizontalOffset) + 'px';
break;
default:
case 'center':
el.style.left = (pixel.x - (content_width / 2) + options.horizontalOffset) + 'px';
break;
case 'right':
el.style.left = (pixel.x + options.horizontalOffset) + 'px';
break;
}

el.style.display = auto_show ? 'block' : 'none';

if (!auto_show) {
options.show.apply(this, [el]);
}
};

overlay.onRemove = function() {
var el = overlay.el;

if (options.remove) {
options.remove.apply(this, [el]);
}
else {
overlay.el.parentNode.removeChild(overlay.el);
overlay.el = null;
}
};

this.overlays.push(overlay);
return overlay;
};

GMaps.prototype.removeOverlay = function(overlay) {
for (var i = 0; i < this.overlays.length; i++) {
if (this.overlays[i] === overlay) {
this.overlays[i].setMap(null);
this.overlays.splice(i, 1);

break;
}
}
};

GMaps.prototype.removeOverlays = function() {
for (var i = 0, item; item = this.overlays[i]; i++) {
item.setMap(null);
}

this.overlays = [];
};

GMaps.prototype.drawPolyline = function(options) {
var path = [],
points = options.path;

if (points.length) {
if (points[0][0] === undefined) {
path = points;
}
else {
for (var i = 0, latlng; latlng = points[i]; i++) {
path.push(new google.maps.LatLng(latlng[0], latlng[1]));
}
}
}

var polyline_options = {
map: this.map,
path: path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight,
geodesic: options.geodesic,
clickable: true,
editable: false,
visible: true
};

if (options.hasOwnProperty("clickable")) {
polyline_options.clickable = options.clickable;
}

if (options.hasOwnProperty("editable")) {
polyline_options.editable = options.editable;
}

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

if (options.hasOwnProperty("zIndex")) {
polyline_options.zIndex = options.zIndex;
}

var polyline = new google.maps.Polyline(polyline_options);

var polyline_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polyline_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polyline, polyline_events[ev]);
}

this.polylines.push(polyline);

GMaps.fire('polyline_added', polyline, this);

return polyline;
};

GMaps.prototype.removePolyline = function(polyline) {
for (var i = 0; i < this.polylines.length; i++) {
if (this.polylines[i] === polyline) {
this.polylines[i].setMap(null);
this.polylines.splice(i, 1);

GMaps.fire('polyline_removed', polyline, this);

break;
}
}
};

GMaps.prototype.removePolylines = function() {
for (var i = 0, item; item = this.polylines[i]; i++) {
item.setMap(null);
}

this.polylines = [];
};

GMaps.prototype.drawCircle = function(options) {
options = extend_object({
map: this.map,
center: new google.maps.LatLng(options.lat, options.lng)
}, options);

delete options.lat;
delete options.lng;

var polygon = new google.maps.Circle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}

this.polygons.push(polygon);

return polygon;
};

GMaps.prototype.drawRectangle = function(options) {
options = extend_object({
map: this.map
}, options);

var latLngBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(options.bounds[0][0], options.bounds[0][1]),
new google.maps.LatLng(options.bounds[1][0], options.bounds[1][1])
);

options.bounds = latLngBounds;

var polygon = new google.maps.Rectangle(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}

this.polygons.push(polygon);

return polygon;
};

GMaps.prototype.drawPolygon = function(options) {
var useGeoJSON = false;

if(options.hasOwnProperty("useGeoJSON")) {
useGeoJSON = options.useGeoJSON;
}

delete options.useGeoJSON;

options = extend_object({
map: this.map
}, options);

if (useGeoJSON == false) {
options.paths = [options.paths.slice(0)];
}

if (options.paths.length > 0) {
if (options.paths[0].length > 0) {
options.paths = array_flat(array_map(options.paths, arrayToLatLng, useGeoJSON));
}
}

var polygon = new google.maps.Polygon(options),
polygon_events = ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'rightclick'];

for (var ev = 0; ev < polygon_events.length; ev++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(e){
options[name].apply(this, [e]);
});
}
})(polygon, polygon_events[ev]);
}

this.polygons.push(polygon);

GMaps.fire('polygon_added', polygon, this);

return polygon;
};

GMaps.prototype.removePolygon = function(polygon) {
for (var i = 0; i < this.polygons.length; i++) {
if (this.polygons[i] === polygon) {
this.polygons[i].setMap(null);
this.polygons.splice(i, 1);

GMaps.fire('polygon_removed', polygon, this);

break;
}
}
};

GMaps.prototype.removePolygons = function() {
for (var i = 0, item; item = this.polygons[i]; i++) {
item.setMap(null);
}

this.polygons = [];
};

GMaps.prototype.getFromFusionTables = function(options) {
var events = options.events;

delete options.events;

var fusion_tables_options = options,
layer = new google.maps.FusionTablesLayer(fusion_tables_options);

for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}

this.layers.push(layer);

return layer;
};

GMaps.prototype.loadFromFusionTables = function(options) {
var layer = this.getFromFusionTables(options);
layer.setMap(this.map);

return layer;
};

GMaps.prototype.getFromKML = function(options) {
var url = options.url,
events = options.events;

delete options.url;
delete options.events;

var kml_options = options,
layer = new google.maps.KmlLayer(url, kml_options);

for (var ev in events) {
(function(object, name) {
google.maps.event.addListener(object, name, function(e) {
events[name].apply(this, [e]);
});
})(layer, ev);
}

this.layers.push(layer);

return layer;
};

GMaps.prototype.loadFromKML = function(options) {
var layer = this.getFromKML(options);
layer.setMap(this.map);

return layer;
};

GMaps.prototype.addLayer = function(layerName, options) {
//var default_layers = ['weather', 'clouds', 'traffic', 'transit', 'bicycling', 'panoramio', 'places'];
options = options || {};
var layer;

switch(layerName) {
case 'weather': this.singleLayers.weather = layer = new google.maps.weather.WeatherLayer();
break;
case 'clouds': this.singleLayers.clouds = layer = new google.maps.weather.CloudLayer();
break;
case 'traffic': this.singleLayers.traffic = layer = new google.maps.TrafficLayer();
break;
case 'transit': this.singleLayers.transit = layer = new google.maps.TransitLayer();
break;
case 'bicycling': this.singleLayers.bicycling = layer = new google.maps.BicyclingLayer();
break;
case 'panoramio':
this.singleLayers.panoramio = layer = new google.maps.panoramio.PanoramioLayer();
layer.setTag(options.filter);
delete options.filter;

//click event
if (options.click) {
google.maps.event.addListener(layer, 'click', function(event) {
options.click(event);
delete options.click;
});
}
break;
case 'places':
this.singleLayers.places = layer = new google.maps.places.PlacesService(this.map);

//search, nearbySearch, radarSearch callback, Both are the same
if (options.search || options.nearbySearch || options.radarSearch) {
var placeSearchRequest = {
bounds : options.bounds || null,
keyword : options.keyword || null,
location : options.location || null,
name : options.name || null,
radius : options.radius || null,
rankBy : options.rankBy || null,
types : options.types || null
};

if (options.radarSearch) {
layer.radarSearch(placeSearchRequest, options.radarSearch);
}

if (options.search) {
layer.search(placeSearchRequest, options.search);
}

if (options.nearbySearch) {
layer.nearbySearch(placeSearchRequest, options.nearbySearch);
}
}

//textSearch callback
if (options.textSearch) {
var textSearchRequest = {
bounds : options.bounds || null,
location : options.location || null,
query : options.query || null,
radius : options.radius || null
};

layer.textSearch(textSearchRequest, options.textSearch);
}
break;
}

if (layer !== undefined) {
if (typeof layer.setOptions == 'function') {
layer.setOptions(options);
}
if (typeof layer.setMap == 'function') {
layer.setMap(this.map);
}

return layer;
}
};

GMaps.prototype.removeLayer = function(layer) {
if (typeof(layer) == "string" && this.singleLayers[layer] !== undefined) {
this.singleLayers[layer].setMap(null);

delete this.singleLayers[layer];
}
else {
for (var i = 0; i < this.layers.length; i++) {
if (this.layers[i] === layer) {
this.layers[i].setMap(null);
this.layers.splice(i, 1);

break;
}
}
}
};

var travelMode, unitSystem;

GMaps.prototype.getRoutes = function(options) {
switch (options.travelMode) {
case 'bicycling':
travelMode = google.maps.TravelMode.BICYCLING;
break;
case 'transit':
travelMode = google.maps.TravelMode.TRANSIT;
break;
case 'driving':
travelMode = google.maps.TravelMode.DRIVING;
break;
default:
travelMode = google.maps.TravelMode.WALKING;
break;
}

if (options.unitSystem === 'imperial') {
unitSystem = google.maps.UnitSystem.IMPERIAL;
}
else {
unitSystem = google.maps.UnitSystem.METRIC;
}

var base_options = {
avoidHighways: false,
avoidTolls: false,
optimizeWaypoints: false,
waypoints: []
},
request_options = extend_object(base_options, options);

request_options.origin = /string/.test(typeof options.origin) ? options.origin : new google.maps.LatLng(options.origin[0], options.origin[1]);
request_options.destination = /string/.test(typeof options.destination) ? options.destination : new google.maps.LatLng(options.destination[0], options.destination[1]);
request_options.travelMode = travelMode;
request_options.unitSystem = unitSystem;

delete request_options.callback;
delete request_options.error;

var self = this,
routes = [],
service = new google.maps.DirectionsService();

service.route(request_options, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
for (var r in result.routes) {
if (result.routes.hasOwnProperty(r)) {
routes.push(result.routes[r]);
}
}

if (options.callback) {
options.callback(routes, result, status);
}
}
else {
if (options.error) {
options.error(result, status);
}
}
});
};

GMaps.prototype.removeRoutes = function() {
this.routes.length = 0;
};

GMaps.prototype.getElevations = function(options) {
options = extend_object({
locations: [],
path : false,
samples : 256
}, options);

if (options.locations.length > 0) {
if (options.locations[0].length > 0) {
options.locations = array_flat(array_map([options.locations], arrayToLatLng, false));
}
}

var callback = options.callback;
delete options.callback;

var service = new google.maps.ElevationService();

//location request
if (!options.path) {
delete options.path;
delete options.samples;

service.getElevationForLocations(options, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
//path request
} else {
var pathRequest = {
path : options.locations,
samples : options.samples
};

service.getElevationAlongPath(pathRequest, function(result, status) {
if (callback && typeof(callback) === "function") {
callback(result, status);
}
});
}
};

GMaps.prototype.cleanRoute = GMaps.prototype.removePolylines;

GMaps.prototype.renderRoute = function(options, renderOptions) {
var self = this,
panel = ((typeof renderOptions.panel === 'string') ? document.getElementById(renderOptions.panel.replace('#', '')) : renderOptions.panel),
display;

renderOptions.panel = panel;
renderOptions = extend_object({
map: this.map
}, renderOptions);
display = new google.maps.DirectionsRenderer(renderOptions);

this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints: options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
avoidHighways: options.avoidHighways,
avoidTolls: options.avoidTolls,
optimizeWaypoints: options.optimizeWaypoints,
callback: function(routes, response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
}
}
});
};

GMaps.prototype.drawRoute = function(options) {
var self = this;

this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints: options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
avoidHighways: options.avoidHighways,
avoidTolls: options.avoidTolls,
optimizeWaypoints: options.optimizeWaypoints,
callback: function(routes) {
if (routes.length > 0) {
var polyline_options = {
path: routes[routes.length - 1].overview_path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

self.drawPolyline(polyline_options);

if (options.callback) {
options.callback(routes[routes.length - 1]);
}
}
}
});
};

GMaps.prototype.travelRoute = function(options) {
if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
unitSystem: options.unitSystem,
error: options.error,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}

//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
options.step(step, (route.legs[0].steps.length - 1));
}
}
}

//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
options.step(step);
}
}
}
};

GMaps.prototype.drawSteppedRoute = function(options) {
var self = this;

if (options.origin && options.destination) {
this.getRoutes({
origin: options.origin,
destination: options.destination,
travelMode: options.travelMode,
waypoints : options.waypoints,
error: options.error,
callback: function(e) {
//start callback
if (e.length > 0 && options.start) {
options.start(e[e.length - 1]);
}

//step callback
if (e.length > 0 && options.step) {
var route = e[e.length - 1];
if (route.legs.length > 0) {
var steps = route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
var polyline_options = {
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

self.drawPolyline(polyline_options);
options.step(step, (route.legs[0].steps.length - 1));
}
}
}

//end callback
if (e.length > 0 && options.end) {
options.end(e[e.length - 1]);
}
}
});
}
else if (options.route) {
if (options.route.legs.length > 0) {
var steps = options.route.legs[0].steps;
for (var i = 0, step; step = steps[i]; i++) {
step.step_number = i;
var polyline_options = {
path: step.path,
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

self.drawPolyline(polyline_options);
options.step(step);
}
}
}
};

GMaps.Route = function(options) {
this.origin = options.origin;
this.destination = options.destination;
this.waypoints = options.waypoints;

this.map = options.map;
this.route = options.route;
this.step_count = 0;
this.steps = this.route.legs[0].steps;
this.steps_length = this.steps.length;

var polyline_options = {
path: new google.maps.MVCArray(),
strokeColor: options.strokeColor,
strokeOpacity: options.strokeOpacity,
strokeWeight: options.strokeWeight
};

if (options.hasOwnProperty("icons")) {
polyline_options.icons = options.icons;
}

this.polyline = this.map.drawPolyline(polyline_options).getPath();
};

GMaps.Route.prototype.getRoute = function(options) {
var self = this;

this.map.getRoutes({
origin : this.origin,
destination : this.destination,
travelMode : options.travelMode,
waypoints : this.waypoints || [],
error: options.error,
callback : function() {
self.route = e[0];

if (options.callback) {
options.callback.call(self);
}
}
});
};

GMaps.Route.prototype.back = function() {
if (this.step_count > 0) {
this.step_count--;
var path = this.route.legs[0].steps[this.step_count].path;

for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.pop();
}
}
}
};

GMaps.Route.prototype.forward = function() {
if (this.step_count < this.steps_length) {
var path = this.route.legs[0].steps[this.step_count].path;

for (var p in path){
if (path.hasOwnProperty(p)){
this.polyline.push(path[p]);
}
}
this.step_count++;
}
};

GMaps.prototype.checkGeofence = function(lat, lng, fence) {
return fence.containsLatLng(new google.maps.LatLng(lat, lng));
};

GMaps.prototype.checkMarkerGeofence = function(marker, outside_callback) {
if (marker.fences) {
for (var i = 0, fence; fence = marker.fences[i]; i++) {
var pos = marker.getPosition();
if (!this.checkGeofence(pos.lat(), pos.lng(), fence)) {
outside_callback(marker, fence);
}
}
}
};

GMaps.prototype.toImage = function(options) {
var options = options || {},
static_map_options = {};

static_map_options['size'] = options['size'] || [this.el.clientWidth, this.el.clientHeight];
static_map_options['lat'] = this.getCenter().lat();
static_map_options['lng'] = this.getCenter().lng();

if (this.markers.length > 0) {
static_map_options['markers'] = [];

for (var i = 0; i < this.markers.length; i++) {
static_map_options['markers'].push({
lat: this.markers[i].getPosition().lat(),
lng: this.markers[i].getPosition().lng()
});
}
}

if (this.polylines.length > 0) {
var polyline = this.polylines[0];

static_map_options['polyline'] = {};
static_map_options['polyline']['path'] = google.maps.geometry.encoding.encodePath(polyline.getPath());
static_map_options['polyline']['strokeColor'] = polyline.strokeColor
static_map_options['polyline']['strokeOpacity'] = polyline.strokeOpacity
static_map_options['polyline']['strokeWeight'] = polyline.strokeWeight
}

return GMaps.staticMapURL(static_map_options);
};

GMaps.staticMapURL = function(options){
var parameters = [],
data,
static_root = (location.protocol === 'file:' ? 'http:' : location.protocol ) + '//maps.googleapis.com/maps/api/staticmap';

if (options.url) {
static_root = options.url;
delete options.url;
}

static_root += '?';

var markers = options.markers;

delete options.markers;

if (!markers && options.marker) {
markers = [options.marker];
delete options.marker;
}

var styles = options.styles;

delete options.styles;

var polyline = options.polyline;
delete options.polyline;

/** Map options **/
if (options.center) {
parameters.push('center=' + options.center);
delete options.center;
}
else if (options.address) {
parameters.push('center=' + options.address);
delete options.address;
}
else if (options.lat) {
parameters.push(['center=', options.lat, ',', options.lng].join(''));
delete options.lat;
delete options.lng;
}
else if (options.visible) {
var visible = encodeURI(options.visible.join('|'));
parameters.push('visible=' + visible);
}

var size = options.size;
if (size) {
if (size.join) {
size = size.join('x');
}
delete options.size;
}
else {
size = '630x300';
}
parameters.push('size=' + size);

if (!options.zoom && options.zoom !== false) {
options.zoom = 15;
}

var sensor = options.hasOwnProperty('sensor') ? !!options.sensor : true;
delete options.sensor;
parameters.push('sensor=' + sensor);

for (var param in options) {
if (options.hasOwnProperty(param)) {
parameters.push(param + '=' + options[param]);
}
}

/** Markers **/
if (markers) {
var marker, loc;

for (var i = 0; data = markers[i]; i++) {
marker = [];

if (data.size && data.size !== 'normal') {
marker.push('size:' + data.size);
delete data.size;
}
else if (data.icon) {
marker.push('icon:' + encodeURI(data.icon));
delete data.icon;
}

if (data.color) {
marker.push('color:' + data.color.replace('#', '0x'));
delete data.color;
}

if (data.label) {
marker.push('label:' + data.label[0].toUpperCase());
delete data.label;
}

loc = (data.address ? data.address : data.lat + ',' + data.lng);
delete data.address;
delete data.lat;
delete data.lng;

for(var param in data){
if (data.hasOwnProperty(param)) {
marker.push(param + ':' + data[param]);
}
}

if (marker.length || i === 0) {
marker.push(loc);
marker = marker.join('|');
parameters.push('markers=' + encodeURI(marker));
}
// New marker without styles
else {
marker = parameters.pop() + encodeURI('|' + loc);
parameters.push(marker);
}
}
}

/** Map Styles **/
if (styles) {
for (var i = 0; i < styles.length; i++) {
var styleRule = [];
if (styles[i].featureType){
styleRule.push('feature:' + styles[i].featureType.toLowerCase());
}

if (styles[i].elementType) {
styleRule.push('element:' + styles[i].elementType.toLowerCase());
}

for (var j = 0; j < styles[i].stylers.length; j++) {
for (var p in styles[i].stylers[j]) {
var ruleArg = styles[i].stylers[j][p];
if (p == 'hue' || p == 'color') {
ruleArg = '0x' + ruleArg.substring(1);
}
styleRule.push(p + ':' + ruleArg);
}
}

var rule = styleRule.join('|');
if (rule != '') {
parameters.push('style=' + rule);
}
}
}

/** Polylines **/
function parseColor(color, opacity) {
if (color[0] === '#'){
color = color.replace('#', '0x');

if (opacity) {
opacity = parseFloat(opacity);
opacity = Math.min(1, Math.max(opacity, 0));
if (opacity === 0) {
return '0x00000000';
}
opacity = (opacity * 255).toString(16);
if (opacity.length === 1) {
opacity += opacity;
}

color = color.slice(0,8) + opacity;
}
}
return color;
}

if (polyline) {
data = polyline;
polyline = [];

if (data.strokeWeight) {
polyline.push('weight:' + parseInt(data.strokeWeight, 10));
}

if (data.strokeColor) {
var color = parseColor(data.strokeColor, data.strokeOpacity);
polyline.push('color:' + color);
}

if (data.fillColor) {
var fillcolor = parseColor(data.fillColor, data.fillOpacity);
polyline.push('fillcolor:' + fillcolor);
}

var path = data.path;
if (path.join) {
for (var j=0, pos; pos=path[j]; j++) {
polyline.push(pos.join(','));
}
}
else {
polyline.push('enc:' + path);
}

polyline = polyline.join('|');
parameters.push('path=' + encodeURI(polyline));
}

/** Retina support **/
var dpi = window.devicePixelRatio || 1;
parameters.push('scale=' + dpi);

parameters = parameters.join('&');
return static_root + parameters;
};

GMaps.prototype.addMapType = function(mapTypeId, options) {
if (options.hasOwnProperty("getTileUrl") && typeof(options["getTileUrl"]) == "function") {
options.tileSize = options.tileSize || new google.maps.Size(256, 256);

var mapType = new google.maps.ImageMapType(options);

this.map.mapTypes.set(mapTypeId, mapType);
}
else {
throw "'getTileUrl' function required.";
}
};

GMaps.prototype.addOverlayMapType = function(options) {
if (options.hasOwnProperty("getTile") && typeof(options["getTile"]) == "function") {
var overlayMapTypeIndex = options.index;

delete options.index;

this.map.overlayMapTypes.insertAt(overlayMapTypeIndex, options);
}
else {
throw "'getTile' function required.";
}
};

GMaps.prototype.removeOverlayMapType = function(overlayMapTypeIndex) {
this.map.overlayMapTypes.removeAt(overlayMapTypeIndex);
};

GMaps.prototype.addStyle = function(options) {
var styledMapType = new google.maps.StyledMapType(options.styles, { name: options.styledMapName });

this.map.mapTypes.set(options.mapTypeId, styledMapType);
};

GMaps.prototype.setStyle = function(mapTypeId) {
this.map.setMapTypeId(mapTypeId);
};

GMaps.prototype.createPanorama = function(streetview_options) {
if (!streetview_options.hasOwnProperty('lat') || !streetview_options.hasOwnProperty('lng')) {
streetview_options.lat = this.getCenter().lat();
streetview_options.lng = this.getCenter().lng();
}

this.panorama = GMaps.createPanorama(streetview_options);

this.map.setStreetView(this.panorama);

return this.panorama;
};

GMaps.createPanorama = function(options) {
var el = getElementById(options.el, options.context);

options.position = new google.maps.LatLng(options.lat, options.lng);

delete options.el;
delete options.context;
delete options.lat;
delete options.lng;

var streetview_events = ['closeclick', 'links_changed', 'pano_changed', 'position_changed', 'pov_changed', 'resize', 'visible_changed'],
streetview_options = extend_object({visible : true}, options);

for (var i = 0; i < streetview_events.length; i++) {
delete streetview_options[streetview_events[i]];
}

var panorama = new google.maps.StreetViewPanorama(el, streetview_options);

for (var i = 0; i < streetview_events.length; i++) {
(function(object, name) {
if (options[name]) {
google.maps.event.addListener(object, name, function(){
options[name].apply(this);
});
}
})(panorama, streetview_events[i]);
}

return panorama;
};

GMaps.prototype.on = function(event_name, handler) {
return GMaps.on(event_name, this, handler);
};

GMaps.prototype.off = function(event_name) {
GMaps.off(event_name, this);
};

GMaps.prototype.once = function(event_name, handler) {
return GMaps.once(event_name, this, handler);
};

GMaps.custom_events = ['marker_added', 'marker_removed', 'polyline_added', 'polyline_removed', 'polygon_added', 'polygon_removed', 'geolocated', 'geolocation_failed'];

GMaps.on = function(event_name, object, handler) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
return google.maps.event.addListener(object, event_name, handler);
}
else {
var registered_event = {
handler : handler,
eventName : event_name
};

object.registered_events[event_name] = object.registered_events[event_name] || [];
object.registered_events[event_name].push(registered_event);

return registered_event;
}
};

GMaps.off = function(event_name, object) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
google.maps.event.clearListeners(object, event_name);
}
else {
object.registered_events[event_name] = [];
}
};

GMaps.once = function(event_name, object, handler) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
if(object instanceof GMaps) object = object.map;
return google.maps.event.addListenerOnce(object, event_name, handler);
}
};

GMaps.fire = function(event_name, object, scope) {
if (GMaps.custom_events.indexOf(event_name) == -1) {
google.maps.event.trigger(object, event_name, Array.prototype.slice.apply(arguments).slice(2));
}
else {
if(event_name in scope.registered_events) {
var firing_events = scope.registered_events[event_name];

for(var i = 0; i < firing_events.length; i++) {
(function(handler, scope, object) {
handler.apply(scope, [object]);
})(firing_events[i]['handler'], scope, object);
}
}
}
};

GMaps.geolocate = function(options) {
var complete_callback = options.always || options.complete;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
options.success(position);

if (complete_callback) {
complete_callback();
}
}, function(error) {
options.error(error);

if (complete_callback) {
complete_callback();
}
}, options.options);
}
else {
options.not_supported();

if (complete_callback) {
complete_callback();
}
}
};

GMaps.geocode = function(options) {
this.geocoder = new google.maps.Geocoder();
var callback = options.callback;
if (options.hasOwnProperty('lat') && options.hasOwnProperty('lng')) {
options.latLng = new google.maps.LatLng(options.lat, options.lng);
}

delete options.lat;
delete options.lng;
delete options.callback;

this.geocoder.geocode(options, function(results, status) {
callback(results, status);
});
};

if (typeof window.google === 'object' && window.google.maps) {
//==========================
// Polygon containsLatLng
// https://github.com/tparkin/Google-Maps-Point-in-Polygon
// Poygon getBounds extension - google-maps-extensions
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polygon.prototype.getBounds) {
google.maps.Polygon.prototype.getBounds = function(latLng) {
var bounds = new google.maps.LatLngBounds();
var paths = this.getPaths();
var path;

for (var p = 0; p < paths.getLength(); p++) {
path = paths.getAt(p);
for (var i = 0; i < path.getLength(); i++) {
bounds.extend(path.getAt(i));
}
}

return bounds;
};
}

if (!google.maps.Polygon.prototype.containsLatLng) {
// Polygon containsLatLng - method to determine if a latLng is within a polygon
google.maps.Polygon.prototype.containsLatLng = function(latLng) {
// Exclude points outside of bounds as there is no way they are in the poly
var bounds = this.getBounds();

if (bounds !== null && !bounds.contains(latLng)) {
return false;
}

// Raycast point in polygon method
var inPoly = false;

var numPaths = this.getPaths().getLength();
for (var p = 0; p < numPaths; p++) {
var path = this.getPaths().getAt(p);
var numPoints = path.getLength();
var j = numPoints - 1;

for (var i = 0; i < numPoints; i++) {
var vertex1 = path.getAt(i);
var vertex2 = path.getAt(j);

if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
inPoly = !inPoly;
}
}

j = i;
}
}

return inPoly;
};
}

if (!google.maps.Circle.prototype.containsLatLng) {
google.maps.Circle.prototype.containsLatLng = function(latLng) {
if (google.maps.geometry) {
return google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
}
else {
return true;
}
};
}

google.maps.Rectangle.prototype.containsLatLng = function(latLng) {
return this.getBounds().contains(latLng);
};

google.maps.LatLngBounds.prototype.containsLatLng = function(latLng) {
return this.contains(latLng);
};

google.maps.Marker.prototype.setFences = function(fences) {
this.fences = fences;
};

google.maps.Marker.prototype.addFence = function(fence) {
this.fences.push(fence);
};

google.maps.Marker.prototype.getId = function() {
return this['__gm_id'];
};
}

//==========================
// Array indexOf
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
"use strict";
if (this == null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) {
return -1;
}
var n = 0;
if (arguments.length > 1) {
n = Number(arguments[1]);
if (n != n) { // shortcut for verifying if it's NaN
n = 0;
} else if (n != 0 && n != Infinity && n != -Infinity) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
if (n >= len) {
return -1;
}
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) {
if (k in t && t[k] === searchElement) {
return k;
}
}
return -1;
}
}

return GMaps;
}));</syntaxhighlight>

== Validation ==
approve.js

== Audio ==
howlerjs.com - Cross Plattform Audio

== Browser Fixing ==
[[JavaScript - iOS Orientation Change Fix]]

Typo3 - Rich Text Editor (RTE)

2018-03-06T08:25:57Z

149.172.225.28: /* iFrames im RTE erlauben */

== Snippets ==
=== iFrames im RTE erlauben ===
'''Seiten TS-Config'''
<syntaxhighlight lang="typoscript">
RTE.default.proc.allowTags := addToList(iframe,embed,object,param)
RTE.default.proc.entryHTMLparser_db.allowTags := addToList(iframe,embed,object,param)
RTE.default.proc.allowTagsOutside := addToList(iframe,embed,object,param)

plugin.tt_news.displaySingle.content_stdWrap.parseFunc {
nonTypoTagStdWrap.encapsLines.nonWrappedTag >
allowTags = script, iframe, param, embed, object, a, abbr, acronym, address, blockquote, b, br, caption, center, cite, code, div, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, li, link, ol, p, pre, q, sdfield, span, strike, strong, sub, sup, table, thead, tbody, tfoot, td, th, tr, tt, u, ul
}
plugin.tt_news.general_stdWrap.parseFunc.allowTags := addToList(iframe,embed,object,param,p)
</syntaxhighlight>

'''TypoScript Template Konstanten'''
Achtung alles in eine Zeile schreiben.
<syntaxhighlight lang="typoscript">
styles.content.links.allowTags = b,i,u,a,img,br,div,center,pre,font, hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,h5,h6,address,iframe,object,param,embed
</syntaxhighlight>

=== TYPO3 6.2 Config ===
<pre>
Deprecated property Use instead
disableRightClick contextMenu.disable
disableContextMenu contextMenu.disable
hidePStyleItems buttons.formatblock.removeItems
hideFontFaces buttons.fontstyle.removeItems
fontFace buttons.fontstyle.addItems
hideFontSizes buttons.fontsize.removeItems
classesCharacter buttons.textstyle.tags.span.allowedClasses
classesParagraph buttons.blockstyle.tags.div.allowedClasses
classesTable buttons.blockstyle.tags.table.allowedClasses
classesTD buttons.blockstyle.tags.td.allowedClasses
classesImage buttons.image.properties.class.allowedClasses
classesLinks buttons.link.properties.class.allowedClasses
blindImageOptions buttons.image.options.removeItems
blindLinkOptions buttons.link.options.removeItems
defaultLinkTarget buttons.link.properties.target.default
fontSize buttons.fontsize.addItems
RTE.default.classesAnchor RTE.default.buttons.link.properties.class.allowedClasses
RTE.default.classesAnchor.default.[link-type] RTE.default.buttons.link.[link-type].properties.class.default
mainStyleOverride contentCSS
mainStyleOverride_add.[key] contentCSS
mainStyle_font contentCSS
mainStyle_size contentCSS
mainStyle_color contentCSS
mainStyle_bgcolor contentCSS
inlineStyle.[any-keystring] contentCSS
ignoreMainStyleOverride n.a.
disableTYPO3Browsers buttons.image.TYPO3Browser.disabled and buttons.link.TYPO3Browser.disabled
showTagFreeClasses buttons.blockstyle.showTagFreeClasses and buttons.textstyle.showTagFreeClasses
disablePCexamples buttons.blockstyle.disableStyleOnOptionLabel and buttons.textstyle.disableStyleOnOptionLabel
</pre>
=== CSS für RTE und einige Eigenschaften ===

TS Config
<pre>
RTE.default {

contentCSS = fileadmin/template/rte.css

## Markup options (htmlArea RTE only)
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, o:p, sdfield
removeTagsAndContents = style,script
roteSchrift {
name = Rote Schrift
value = color: #8A0020;
}
graueSchrift {
name = Graue Schrift
value = color: #C0C0C0;
}
grueneSchrift {
name = Grüne Schrift
value = color: #5e912b;
}

proc.allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right, align-justify,
csc-frame-frame1, csc-frame-frame2,
component-items, action-items,
component-items-ordered, action-items-ordered,
roteSchrift, graueSchrift, grueneSchrift
indent
)

classesCharacter = roteSchrift, graueSchrift, grueneSchrift
</pre>

== Weiterführendes ==
Das sieht sehr gut aus -> sehr umfassend und ausführlich erklärt (Datum des Zugriffs 26.1.2010)

http://www.site42.de/Wie-konfiguriert-man-den-RTE-h.58.0.html

== RTE-Konfiguration als Extension laden ==
Todo. Vgl. die Extension Rich Text Editor pre-configuration die bei den Examples steht.

== RTE einrichten ==
'''Hinweis:'''

Ab Version 4 ist der Editor '''HTMLArea''' eingesetzt, den es für frühere Versionen als Extension gibt. Für Typo3 Versionen unter 4 muß die HTMLArea Extension in einer Version kleiner 1.3 installiert werden sonst gibt's eine Fehlermeldung beim Verlinken.

Das Aussehten des RTE, die verfügbaren Optionen und die HTML-Ausgabe läßt sich einstellen.
Über das PageTS Config Feld der Seiten kann man z.B. einzelne Funktionen des RTE für den Seitenbaum abstellen.
=== Alternativer RTE ===
Als alternative bietet sich TinyMCE an. Er ist schlanker als htmlarea und läßt sich meist leichter einstellen. Allerdings bietet er nicht soviele Konfigurationsmöglichkeiten (Stand 2010)

=== RTE Standard CSS Stylesheet anpassen ===
==== Eigenes Stylesheet einbinden ====
Eine eigene Datei funktioniert für die Innerhalb des Texteditors. Um die Styles in den Dropdown-Feldern anzupassen muß man aber TypoScript anwenden (s.u.).
<pre>
RTE.default {
contentCSS = fileadmin/rte_css/css_htmlarea.css
useCSS = 1
}
</pre>

==== Anpassen der Klassen über TypoScript ====
Beispiel:

<pre>
#Klassen hinzufügen
RTE.default.proc.allowedClasses := addToList(error,more-link, info-block, block)
RTE.default.classesParagraph := addToList(error,info-block)
RTE.default.classesCharacter := addToList(block)
RTE.default.classesAnchor := addToList(more-link)

#nicht benoetigte Klassen entfernen
RTE.default.classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
RTE.default.proc.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)
RTE.classes := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)

#Klassen fuer die RTE Auswahlfelder definieren
RTE.classes.error {
name = Error in Red
value = color: #FF0000; font-weight: bold; background-color: #ffff00;
}

RTE.classesAnchor.more-link {
name = Link with an Arrow
value = background: transparent url(../img/arrow.png)no-repeat 0 0; padding:0 0 0 14px;
}
RTE.classesAnchor.info-block {
name = Infoblock with grey background
value = background-color: #ececec;
}

#NEUE CSS KLASSEN HINZUFUEGEN IM RTE
#**********************************************
RTE {
default {
contentCSS = fileadmin/templates/vdi-templates/css/rte.css
showTagFreeClasses = 1
}
}
</pre>

=== RTE HTML-Ausgabe ===
Der RTE formatiert verändert den HTML Code auf verschiedene Weise. Wie er das macht läßt sich beeinflussen. Hier einige nützliche Beispiele:

=== Restriktive RTE-Konfiguration ===

1.Schritt: Nur die Inhaltselemente Text und Text mit Bild sollen mit dem RTE bearbeitet werden.

Im PageTS-Config Feld:
<pre>
RTE.default.disabled=1
RTE.config.tt_content.bodytext.types{
text.disabled = 0
textpic.disabled = 0
}

2. Schritt: Nur noch die Standardformatierung und zwei Spezial formatierungen zur Auswahl lassen:
<pre>
RTE.classes{
highlight{
name = Highlight
value = font:bold; color: red;
}
zitat{
name = Zitat
value=font:italic 15px; margin-left:20px;
}
}
RTE.default.classesCharacter = highlight, zitat
</pre>

3.Schritt: Üver das User TSConfig kann man nun einstellen welche Menüoptionen dem User angezeigt werden.
<pre>
options.RTEkeyList = class, bold, italic, link
</pre>

== Konfigurationsbeispiele ==
== htmlArea ==
Mit der Extension htmlarea steht auch für Mozilla basierte Browser ein Editor zur Verfügung der auf dem bekannten HTMLArea basiert.

Viele der RTE Optionen funktionieren auch in htmlarea, darüber hinaus auch noch einige weitere.

== Konfigurationsbeispiele htmlarea ==

=== Kommentiertes Beispiel ===
Quelle: http://www.typo3-lisardo.de/home/blog-post/2010/09/02/rte-htmlarea-einrichten.html

<pre>
Konfiguration im Page TSconfig
########## Grundeinstellungen ##########
RTE.default{
useCSS=1
ignoreMainStyleOverride=0

# Damit kann die übermäßig große Schriftdarstellung in den Tabellen
# im Firefox korrigiert werden. Ausserdem ist es möglich, die grundlegende
# Darstellung im RTE-Eingabefenster zu konfigurieren: Schrift, Schrifgrößen etc.
mainStyleOverride_add.TD=font-size:12px;
mainStyleOverride_add.H1=font-size:16px;color:#a7b198;
mainStyleOverride_add.H2=font-size:16px;color:#a7b198;

# Überschreiben der Default-Einstellungen zu den erlaubten Tags
proc.allowTags=code,table,tbody,tr,th,td,h1,h2,h3,h4,h5,h6,div,p,br,span,ul,ol,li,pre,blockquote,strong,em,b,i,u,sub,sup,strike,a,link,img,nobr,hr,center,font,tt,q,cite
proc.entryHTMLparser_db.allowTags<RTE.default.proc.allowTags
proc.entryHTMLparser_db.tags.a.fixAttrib.title.unset =1
# das ist nicht unbedingt erforderlich, wenn man in den »Default
# configuration settings« die Option »Typical gewählt hat«. Wenn
# man eine der anderen beiden eingestellt hat, muss man diese Zeile anpassen.

# Welche Buttons sollen im RTE gezeigt werden?
showButtons= *
hideButtons=strikethrough,lefttoright,righttoleft
keepButtonGroupTogether=1

# wenn den Redakteuren eigene Klassen zur Verfügung gestellt werden, müssen
# diese in einem Stylesheet extra dem RTE zur Verfüung gestellt werden.
contentCSS=fileadmin/css/screen/content_rte.css

# nur Klassen mit Tags erlauben. z. B. : p.klasse {border:1px solid #ccc}
showTagFreeClasses=0

# hier wird definiert, welche Klassen den Redakteuren zur
# Verfügung gestellt werden: die vorhandenen Klassen für die
# Zeichenformatierung werden hier ausgeschaltet:
classesCharacter=
# die vorhandenen Klassen zum Formatieren von Absätzen werden
# durch die selbstdefinierten Klassen überschrieben:
classesParagraph=linie_danach,linie_davor,kasten_gruen_hg
# Tipp: wenn die default-Klassen übernommen und nur ergänzt
# werden sollen, dann so schreiben:
# classesParagraph := linie_danach ...

# Klassendefinition für die gesamte Tabelle
classesTable=tabelle01
# Klassendefinition für die einzelnen Zellen
classesTD=zelle01,zelle02
# das kann für tr, thead, tbody ebenfalls gemacht werden

# Jetzt müssen die einzelnen Klassen noch explizit erlaubt werden
proc.allowedClasses=linie_danach,linie_davor,kasten_gruen_hg,tabelle01,zelle01,zelle02

# Schriften erlauben
fontFace=font1,font2

# Farben erlauben
colors=color1,color2
}

############ Achtung!! ###############
# Alle selbstdefinierten Klassen müssen in dem oben eingebundenen
# Stylesheet auch definiert sein!
# Dabei muss beachtet werden, dass Tag-lose Klassen durch showTagFreeClasses = 0
# ausgeschaltet wurden:
# Falsch: .linie_danach {border-bottom: ...}
# Richtig: p.linie_danach {border-bottom: ...}
# Genauso bei den Tabellen.
#######################################

########### Definition der Klassenbezeichnungen für die Redakteure

RTE.classes {
# hier werden die Namen der Klassen »lesbar« gemacht
linie_davor.name=Linie davor
linie_danach.name=Linie danach
kasten_gruen_hg.name=Kasten:grüner HG
kasten_gruen_r.name=Kasten:grüner Rahmen
kasten_info.name=Kasten:Info-Knopf
tabelle01.name=Standard in Blau-Grau
zelle01.name=Zellen blauer Hintergrund
zelle02.name=Zellen ohne Hintergrund
zelle03.name=Zellen grauer Hintergrund

# Wenn man will kann man die Anzeige der Klassen in den Menüs für die
# Redakteure auch noch optisch anpassen:
linie_davor.name=Linie davor
linie_davor.value=border-bottom:1x solid#ff0000
# damit erscheint der Eintrag im Menü schon so formatiert, wie
# später der Absatz. Nötig ist das aber nicht.

}

############# Definition de Schriftmenüs ###########

RTE.fonts {
font1 {
name=Verdana
value=verdana,arial,helvetica,sans-serif
}
font2 {
name=Georgia
value=georgia,times,'times new roman',serif
}
}

########### Definition des Farbmenüs ##############

RTE.colors {
color1 {
name=t3 blau
value=#0000ff
}
color2 {
name=t3 grün
value=#00ff00
}
}

########### Definition der Link-Klassen ##############

RTE.classesAnchor {
externalLink {
class =ext-link
type=url
image=fileadmin/icons/ext-link.gif
}
externalLinkInNewWindow {
class =ext-link2
type=url
image=fileadmin/icons/ext-link2.gif
}
internalLink {
class =int-link
type=page
image=fileadmin/icons/int-link.gif
}
internalLinkInNewWindow {
class =int-link2
type=page
image=fileadmin/icons/int-link2.gif
}
download {
class =download
type=file
image=fileadmin/icons/down.gif
}
mail {
class =mail
type=mail
image=fileadmin/icons/mail.gif
}
}
</pre>
=== Beispielkonfiguration für PageTS mit verschiedenen Möglichkeiten ===
<pre>
###########
### RTE ###
###########
# Klassendefinitionen löschen und neue Klassendefinitionen zulassen
RTE.config.tt_content.bodytext.proc.allowedClasses >

# CSS für die Anzeige im Editor selbst #
RTE.default.contentCSS = fileadmin/templates/css/rte.css

# Sichtbare Buttons #

RTE.default{
# diverse Einstellungen
keepButtonGroupTogether = 1
# Buttons (mit Tabelle)
#showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock,left, right, center, bold, italic, subscript, superscript, orderedlist, unorderedlist, outdent, indent, insertcharacter, link, acronym, chMode, removeformat,table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
# Buttons (ohne Tabellen)
showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock, bold, italic, subscript, superscript, orderedlist, unorderedlist, outdent, indent, insertcharacter, link, chMode, removeformat
#hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste

proc{
# zusätzliche ERLAUBTE TAGS
#allowTags := addToList(blockquote,center,align)
#allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2)
#allowedClasses := addToList(rahmen-blau)
allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center
denyTags = font
HTMLparser_rte.tags.align.protect =1
keepPDIVattribs = align,class,style,id
}
# weitere Klassen hinzufügen / verändern
#classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
#classesParagraph := addToList(rahmen-blau)
}

# Definition der Klassen für die Anzeige im Editor
#RTE.classes {
# csc-frame-frame1 {
# name = blauer Rahmen
# value = font-family:Verdana,Arial,Helvetica,sans-serif;background: #ebeef5;border: 1px dotted #113388;
# }
# csc-frame-frame2 {
# name = gelber Rahmen
# value = font-family:Verdana,Arial,Helvetica,sans-serif;background: #fcf4e9;border: 1px dotted #f3ae00;
# }
#}

</pre>
=== Noch ein kleines Beispiel ===
(Aus seo-24.at)
<pre>
TCEFORM.tt_content.bodytext.RTEfullScreenWidth = 650

RTE.default {
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, sdfield
removeTagsAndContents = style,script

# Buttons die gezeigt/versteckt werden
showButtons = bold, italic, underline, left, center, right, orderedlist, unorderedlist, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, textcolor, bgcolor
hideButtons = textstyletextstylelabel, blockstyle, blockstylelabel, fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste, showhelp, about, insertcharacter, line

# Hält die RTE Icons gegroupt zusammen
keepButtonGroupTogether = 1

# blendet Statusbar in htmlarea aus
showStatusBar = 0

}
</pre>

===Eigene Tags verwenden===
<pre>
RTE.default.proc.allowTags = list-of-allowed-tags
RTE.default.proc.HTMLparser_rte.tags.mycustomtag.protect =1
</pre>
where
list-of-allowed-tags is the list of all allowed tags, including your custom tag, and
mycustomtag is the name of your tag.
===Klasse für Tabellen ändern===
«Typo3 always replaces the class I selected in the RTE for a table with the class "contenttable". Do you have an idea how to switch that off?»
Assuming that you have installed extension CSS Styled Content (css_styled_content), add the following line in your TS template Setup field:
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >

The contenttable class will then be added only if no class is specified for the table.
=== diverses ===
==== eigene Klassen ====
<pre>
RTE {
classes {
Infobox {
name = Infobox
value = eigenschaften
}
}

default {
classesParagraph = Infobox
contentCSS = fileadmin/templates/version1/css/style.css
classesCharacter = Infobox
proc.allowedClasses (
Infobox, ...
)
}
}
</pre>

== Probleme und Lösungen ==
=== RTE speichert keine Attribute ===
Symptome: Wenn man im RTE target _blank angibt wird dieses nicht gespeichert und taucht nicht im HTML Code auf.

Abhilfe: Die Attribute müssen erlaubt sein. Dies kann man z.B. im PageTS einstellen:

<pre>
entryHTMLparser_db {
tags {
a.allowedAttribs = id, title, dir, lang, xml:lang, class, href, rel, hreflang, target, nofollow
}
}
</pre>

=== JavaScript Bug mit htmlarea und Firefox 2.0.0.3 ===
Der Editor lädt nicht in der oben genannten Version von Firefox. Das liegt an einem Filter von htmlarea der dafür sorgen soll das die richtigen Routinen verwendet werden. Dieser erkennt die 0.0.3 Signatur falsch (den User Agent String).
Der neue String heißt:
Mozilla/5.0 (Windows; U; Windows NT 5.0; de; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
das 1.3 verwechselt htmlarea mit dem IE für Mac

Workaround: eine schnelle Lösung ist den Firefox mit einer anderen Signatur auszustatten:
Sie können den User Agent String in Firefox direkt ändern. Rufen Sie dazu in der Adresszeile auf:

about:config

Im Anzeigebereich erscheinen die Firefox-Einstellungen. Klicken Sie hier auf die rechte Maustaste um das Kontextmenü zu öffnen und wählen Sie neu - String aus.

Als Einstellungsname tragen Sie:

general.useragent.override

ein. Als Wert tragen Sie beispielsweise ein (am Besten copy&paste):

Mozilla/5.0 (Windows; U; Windows NT 5.0; de; rv:1.8.1.2pre) Gecko/20070111 Firefox/2.0.0.2

Diese Einstellungen sind sofort wirksam (kein Neustart erforderlich). Falls Sie in Typo3 angemeldet waren, müssen Sie sich erneut anmelden.

Um diesen User Agent Sting zu verwenden, wählen Sie ihn bitte aus dem Menü aus:
Extras - User Agent Switcher - Firefox 2.0.0.2
Löschen Sie noch bitte den Cache von Firefox:
Extras - Einstellungen - Erweitert - Netzwerk - Cache - Jetzt löschen

Nun sollte der RTE in Typo3 wieder funktionieren.
=== htmlarea - Eigene Tags verwenden ===
In der Standard - Einstellung werden eigene Tags verworfen. So kann man das verhindern:
### Allow Custom Tags ###
RTE.default.proc.allowTags = list-of-allowed-tags
RTE.default.proc.HTMLparser_rte.tags.mycustomtag.protect =1
Wobei ''list-of-allowed-tags'' eine Kommaseparierte Liste der erlaubten Tags enthält und ''mycustomtag'' den betreffenden neuen Tag schützt.

=== htmlarea - Bilder lassen sich nicht speichern ===
Das "Problem" liegt darin dass htmlarea standardmässig so
konfiguriert ist:

## REMOVE IMG TAGS
entryHTMLparser_db.tags.img.allowedAttribs = 0
entryHTMLparser_db.tags.img.rmTagIfNoAttrib = 1

Damit werden beim Speichern in typo3 also zuerst alle Attribute
aus dem Image-Tag entfernt und schließlich der gesamte Tag auch
noch, weil er ja kein Attribut mehr enthält.

Ohne Häcken im Extension-Manager tut es also auch

## SAVE IMG TAGS
entryHTMLparser_db.tags.img.allowedAttribs = alt,class,style,src,title
entryHTMLparser_db.tags.img.rmTagIfNoAttrib = 1

Vor allem das Attribut src ist wichtig ;-)

===htmlarea - Fehlermeldung wenn Bilder im Frontend angezeigt werden sollen===
Bei Versionen unter Typo3 4.0 eine niedrigere Version von htmlarea verwenden (1.1.3 oder evt. 1.1.6)

=== Hide Buttons - Show Buttons ===
showButtons
hideButtons
list of id-strings
Note: In the case of htmlArea RTE, available buttons are: blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, bold, italic, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, orderedlist, unorderedlist, outdent, indent, textcolor, bgcolor, textindicator, emoticon, insertcharacter, line, link, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge

Note: In the case of htmlArea RTE, if extension sr_static_info is not installed, the spellcheck button is not enabled.

Note:In the case of htmlArea RTE, the following elements will always be shown: undo redo, about.

Note: In the case of htmlArea RTE, buttons user and acronym are never available in the front end.

Note: In the case of htmlArea RTE, button Acronym is not currently available in IE.

Typo3 - Rich Text Editor (RTE)

2018-03-06T08:25:29Z

149.172.225.28: /* Snippets */

== Snippets ==
=== iFrames im RTE erlauben ===
'''Seiten TS-Config'''
<syntaxhighlight lang="typoscript">
RTE.default.proc.allowTags := addToList(iframe,embed,object,param)
RTE.default.proc.entryHTMLparser_db.allowTags := addToList(iframe,embed,object,param)
RTE.default.proc.allowTagsOutside := addToList(iframe,embed,object,param)

plugin.tt_news.displaySingle.content_stdWrap.parseFunc {
nonTypoTagStdWrap.encapsLines.nonWrappedTag >
allowTags = script, iframe, param, embed, object, a, abbr, acronym, address, blockquote, b, br, caption, center, cite, code, div, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, li, link, ol, p, pre, q, sdfield, span, strike, strong, sub, sup, table, thead, tbody, tfoot, td, th, tr, tt, u, ul
}
plugin.tt_news.general_stdWrap.parseFunc.allowTags := addToList(iframe,embed,object,param,p)
</syntaxhighlight>

'''TypoScript Template Konstanten'''
Achtung alles in eine Zeile schreiben.
<syntaxhighlight lang="typoscript">
styles.content.links.allowTags = b,i,u,a,img,br,div,center,pre,font, hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,del,ins,span, h1,h2,h3,h4,h5,h6,address,iframe,object,param,embed
</syntaxhighlight>
=== TYPO3 6.2 Config ===
<pre>
Deprecated property Use instead
disableRightClick contextMenu.disable
disableContextMenu contextMenu.disable
hidePStyleItems buttons.formatblock.removeItems
hideFontFaces buttons.fontstyle.removeItems
fontFace buttons.fontstyle.addItems
hideFontSizes buttons.fontsize.removeItems
classesCharacter buttons.textstyle.tags.span.allowedClasses
classesParagraph buttons.blockstyle.tags.div.allowedClasses
classesTable buttons.blockstyle.tags.table.allowedClasses
classesTD buttons.blockstyle.tags.td.allowedClasses
classesImage buttons.image.properties.class.allowedClasses
classesLinks buttons.link.properties.class.allowedClasses
blindImageOptions buttons.image.options.removeItems
blindLinkOptions buttons.link.options.removeItems
defaultLinkTarget buttons.link.properties.target.default
fontSize buttons.fontsize.addItems
RTE.default.classesAnchor RTE.default.buttons.link.properties.class.allowedClasses
RTE.default.classesAnchor.default.[link-type] RTE.default.buttons.link.[link-type].properties.class.default
mainStyleOverride contentCSS
mainStyleOverride_add.[key] contentCSS
mainStyle_font contentCSS
mainStyle_size contentCSS
mainStyle_color contentCSS
mainStyle_bgcolor contentCSS
inlineStyle.[any-keystring] contentCSS
ignoreMainStyleOverride n.a.
disableTYPO3Browsers buttons.image.TYPO3Browser.disabled and buttons.link.TYPO3Browser.disabled
showTagFreeClasses buttons.blockstyle.showTagFreeClasses and buttons.textstyle.showTagFreeClasses
disablePCexamples buttons.blockstyle.disableStyleOnOptionLabel and buttons.textstyle.disableStyleOnOptionLabel
</pre>
=== CSS für RTE und einige Eigenschaften ===

TS Config
<pre>
RTE.default {

contentCSS = fileadmin/template/rte.css

## Markup options (htmlArea RTE only)
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, o:p, sdfield
removeTagsAndContents = style,script
roteSchrift {
name = Rote Schrift
value = color: #8A0020;
}
graueSchrift {
name = Graue Schrift
value = color: #C0C0C0;
}
grueneSchrift {
name = Grüne Schrift
value = color: #5e912b;
}

proc.allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right, align-justify,
csc-frame-frame1, csc-frame-frame2,
component-items, action-items,
component-items-ordered, action-items-ordered,
roteSchrift, graueSchrift, grueneSchrift
indent
)

classesCharacter = roteSchrift, graueSchrift, grueneSchrift
</pre>

== Weiterführendes ==
Das sieht sehr gut aus -> sehr umfassend und ausführlich erklärt (Datum des Zugriffs 26.1.2010)

http://www.site42.de/Wie-konfiguriert-man-den-RTE-h.58.0.html

== RTE-Konfiguration als Extension laden ==
Todo. Vgl. die Extension Rich Text Editor pre-configuration die bei den Examples steht.

== RTE einrichten ==
'''Hinweis:'''

Ab Version 4 ist der Editor '''HTMLArea''' eingesetzt, den es für frühere Versionen als Extension gibt. Für Typo3 Versionen unter 4 muß die HTMLArea Extension in einer Version kleiner 1.3 installiert werden sonst gibt's eine Fehlermeldung beim Verlinken.

Das Aussehten des RTE, die verfügbaren Optionen und die HTML-Ausgabe läßt sich einstellen.
Über das PageTS Config Feld der Seiten kann man z.B. einzelne Funktionen des RTE für den Seitenbaum abstellen.
=== Alternativer RTE ===
Als alternative bietet sich TinyMCE an. Er ist schlanker als htmlarea und läßt sich meist leichter einstellen. Allerdings bietet er nicht soviele Konfigurationsmöglichkeiten (Stand 2010)

=== RTE Standard CSS Stylesheet anpassen ===
==== Eigenes Stylesheet einbinden ====
Eine eigene Datei funktioniert für die Innerhalb des Texteditors. Um die Styles in den Dropdown-Feldern anzupassen muß man aber TypoScript anwenden (s.u.).
<pre>
RTE.default {
contentCSS = fileadmin/rte_css/css_htmlarea.css
useCSS = 1
}
</pre>

==== Anpassen der Klassen über TypoScript ====
Beispiel:

<pre>
#Klassen hinzufügen
RTE.default.proc.allowedClasses := addToList(error,more-link, info-block, block)
RTE.default.classesParagraph := addToList(error,info-block)
RTE.default.classesCharacter := addToList(block)
RTE.default.classesAnchor := addToList(more-link)

#nicht benoetigte Klassen entfernen
RTE.default.classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
RTE.default.proc.allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)
RTE.classes := removeFromList(csc-frame-frame1, csc-frame-frame2, important, name-of-person, detail)

#Klassen fuer die RTE Auswahlfelder definieren
RTE.classes.error {
name = Error in Red
value = color: #FF0000; font-weight: bold; background-color: #ffff00;
}

RTE.classesAnchor.more-link {
name = Link with an Arrow
value = background: transparent url(../img/arrow.png)no-repeat 0 0; padding:0 0 0 14px;
}
RTE.classesAnchor.info-block {
name = Infoblock with grey background
value = background-color: #ececec;
}

#NEUE CSS KLASSEN HINZUFUEGEN IM RTE
#**********************************************
RTE {
default {
contentCSS = fileadmin/templates/vdi-templates/css/rte.css
showTagFreeClasses = 1
}
}
</pre>

=== RTE HTML-Ausgabe ===
Der RTE formatiert verändert den HTML Code auf verschiedene Weise. Wie er das macht läßt sich beeinflussen. Hier einige nützliche Beispiele:

=== Restriktive RTE-Konfiguration ===

1.Schritt: Nur die Inhaltselemente Text und Text mit Bild sollen mit dem RTE bearbeitet werden.

Im PageTS-Config Feld:
<pre>
RTE.default.disabled=1
RTE.config.tt_content.bodytext.types{
text.disabled = 0
textpic.disabled = 0
}

2. Schritt: Nur noch die Standardformatierung und zwei Spezial formatierungen zur Auswahl lassen:
<pre>
RTE.classes{
highlight{
name = Highlight
value = font:bold; color: red;
}
zitat{
name = Zitat
value=font:italic 15px; margin-left:20px;
}
}
RTE.default.classesCharacter = highlight, zitat
</pre>

3.Schritt: Üver das User TSConfig kann man nun einstellen welche Menüoptionen dem User angezeigt werden.
<pre>
options.RTEkeyList = class, bold, italic, link
</pre>

== Konfigurationsbeispiele ==
== htmlArea ==
Mit der Extension htmlarea steht auch für Mozilla basierte Browser ein Editor zur Verfügung der auf dem bekannten HTMLArea basiert.

Viele der RTE Optionen funktionieren auch in htmlarea, darüber hinaus auch noch einige weitere.

== Konfigurationsbeispiele htmlarea ==

=== Kommentiertes Beispiel ===
Quelle: http://www.typo3-lisardo.de/home/blog-post/2010/09/02/rte-htmlarea-einrichten.html

<pre>
Konfiguration im Page TSconfig
########## Grundeinstellungen ##########
RTE.default{
useCSS=1
ignoreMainStyleOverride=0

# Damit kann die übermäßig große Schriftdarstellung in den Tabellen
# im Firefox korrigiert werden. Ausserdem ist es möglich, die grundlegende
# Darstellung im RTE-Eingabefenster zu konfigurieren: Schrift, Schrifgrößen etc.
mainStyleOverride_add.TD=font-size:12px;
mainStyleOverride_add.H1=font-size:16px;color:#a7b198;
mainStyleOverride_add.H2=font-size:16px;color:#a7b198;

# Überschreiben der Default-Einstellungen zu den erlaubten Tags
proc.allowTags=code,table,tbody,tr,th,td,h1,h2,h3,h4,h5,h6,div,p,br,span,ul,ol,li,pre,blockquote,strong,em,b,i,u,sub,sup,strike,a,link,img,nobr,hr,center,font,tt,q,cite
proc.entryHTMLparser_db.allowTags<RTE.default.proc.allowTags
proc.entryHTMLparser_db.tags.a.fixAttrib.title.unset =1
# das ist nicht unbedingt erforderlich, wenn man in den »Default
# configuration settings« die Option »Typical gewählt hat«. Wenn
# man eine der anderen beiden eingestellt hat, muss man diese Zeile anpassen.

# Welche Buttons sollen im RTE gezeigt werden?
showButtons= *
hideButtons=strikethrough,lefttoright,righttoleft
keepButtonGroupTogether=1

# wenn den Redakteuren eigene Klassen zur Verfügung gestellt werden, müssen
# diese in einem Stylesheet extra dem RTE zur Verfüung gestellt werden.
contentCSS=fileadmin/css/screen/content_rte.css

# nur Klassen mit Tags erlauben. z. B. : p.klasse {border:1px solid #ccc}
showTagFreeClasses=0

# hier wird definiert, welche Klassen den Redakteuren zur
# Verfügung gestellt werden: die vorhandenen Klassen für die
# Zeichenformatierung werden hier ausgeschaltet:
classesCharacter=
# die vorhandenen Klassen zum Formatieren von Absätzen werden
# durch die selbstdefinierten Klassen überschrieben:
classesParagraph=linie_danach,linie_davor,kasten_gruen_hg
# Tipp: wenn die default-Klassen übernommen und nur ergänzt
# werden sollen, dann so schreiben:
# classesParagraph := linie_danach ...

# Klassendefinition für die gesamte Tabelle
classesTable=tabelle01
# Klassendefinition für die einzelnen Zellen
classesTD=zelle01,zelle02
# das kann für tr, thead, tbody ebenfalls gemacht werden

# Jetzt müssen die einzelnen Klassen noch explizit erlaubt werden
proc.allowedClasses=linie_danach,linie_davor,kasten_gruen_hg,tabelle01,zelle01,zelle02

# Schriften erlauben
fontFace=font1,font2

# Farben erlauben
colors=color1,color2
}

############ Achtung!! ###############
# Alle selbstdefinierten Klassen müssen in dem oben eingebundenen
# Stylesheet auch definiert sein!
# Dabei muss beachtet werden, dass Tag-lose Klassen durch showTagFreeClasses = 0
# ausgeschaltet wurden:
# Falsch: .linie_danach {border-bottom: ...}
# Richtig: p.linie_danach {border-bottom: ...}
# Genauso bei den Tabellen.
#######################################

########### Definition der Klassenbezeichnungen für die Redakteure

RTE.classes {
# hier werden die Namen der Klassen »lesbar« gemacht
linie_davor.name=Linie davor
linie_danach.name=Linie danach
kasten_gruen_hg.name=Kasten:grüner HG
kasten_gruen_r.name=Kasten:grüner Rahmen
kasten_info.name=Kasten:Info-Knopf
tabelle01.name=Standard in Blau-Grau
zelle01.name=Zellen blauer Hintergrund
zelle02.name=Zellen ohne Hintergrund
zelle03.name=Zellen grauer Hintergrund

# Wenn man will kann man die Anzeige der Klassen in den Menüs für die
# Redakteure auch noch optisch anpassen:
linie_davor.name=Linie davor
linie_davor.value=border-bottom:1x solid#ff0000
# damit erscheint der Eintrag im Menü schon so formatiert, wie
# später der Absatz. Nötig ist das aber nicht.

}

############# Definition de Schriftmenüs ###########

RTE.fonts {
font1 {
name=Verdana
value=verdana,arial,helvetica,sans-serif
}
font2 {
name=Georgia
value=georgia,times,'times new roman',serif
}
}

########### Definition des Farbmenüs ##############

RTE.colors {
color1 {
name=t3 blau
value=#0000ff
}
color2 {
name=t3 grün
value=#00ff00
}
}

########### Definition der Link-Klassen ##############

RTE.classesAnchor {
externalLink {
class =ext-link
type=url
image=fileadmin/icons/ext-link.gif
}
externalLinkInNewWindow {
class =ext-link2
type=url
image=fileadmin/icons/ext-link2.gif
}
internalLink {
class =int-link
type=page
image=fileadmin/icons/int-link.gif
}
internalLinkInNewWindow {
class =int-link2
type=page
image=fileadmin/icons/int-link2.gif
}
download {
class =download
type=file
image=fileadmin/icons/down.gif
}
mail {
class =mail
type=mail
image=fileadmin/icons/mail.gif
}
}
</pre>
=== Beispielkonfiguration für PageTS mit verschiedenen Möglichkeiten ===
<pre>
###########
### RTE ###
###########
# Klassendefinitionen löschen und neue Klassendefinitionen zulassen
RTE.config.tt_content.bodytext.proc.allowedClasses >

# CSS für die Anzeige im Editor selbst #
RTE.default.contentCSS = fileadmin/templates/css/rte.css

# Sichtbare Buttons #

RTE.default{
# diverse Einstellungen
keepButtonGroupTogether = 1
# Buttons (mit Tabelle)
#showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock,left, right, center, bold, italic, subscript, superscript, orderedlist, unorderedlist, outdent, indent, insertcharacter, link, acronym, chMode, removeformat,table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
# Buttons (ohne Tabellen)
showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock, bold, italic, subscript, superscript, orderedlist, unorderedlist, outdent, indent, insertcharacter, link, chMode, removeformat
#hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste

proc{
# zusätzliche ERLAUBTE TAGS
#allowTags := addToList(blockquote,center,align)
#allowedClasses := removeFromList(csc-frame-frame1, csc-frame-frame2)
#allowedClasses := addToList(rahmen-blau)
allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center
denyTags = font
HTMLparser_rte.tags.align.protect =1
keepPDIVattribs = align,class,style,id
}
# weitere Klassen hinzufügen / verändern
#classesParagraph := removeFromList(csc-frame-frame1, csc-frame-frame2)
#classesParagraph := addToList(rahmen-blau)
}

# Definition der Klassen für die Anzeige im Editor
#RTE.classes {
# csc-frame-frame1 {
# name = blauer Rahmen
# value = font-family:Verdana,Arial,Helvetica,sans-serif;background: #ebeef5;border: 1px dotted #113388;
# }
# csc-frame-frame2 {
# name = gelber Rahmen
# value = font-family:Verdana,Arial,Helvetica,sans-serif;background: #fcf4e9;border: 1px dotted #f3ae00;
# }
#}

</pre>
=== Noch ein kleines Beispiel ===
(Aus seo-24.at)
<pre>
TCEFORM.tt_content.bodytext.RTEfullScreenWidth = 650

RTE.default {
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, sdfield
removeTagsAndContents = style,script

# Buttons die gezeigt/versteckt werden
showButtons = bold, italic, underline, left, center, right, orderedlist, unorderedlist, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, textcolor, bgcolor
hideButtons = textstyletextstylelabel, blockstyle, blockstylelabel, fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste, showhelp, about, insertcharacter, line

# Hält die RTE Icons gegroupt zusammen
keepButtonGroupTogether = 1

# blendet Statusbar in htmlarea aus
showStatusBar = 0

}
</pre>

===Eigene Tags verwenden===
<pre>
RTE.default.proc.allowTags = list-of-allowed-tags
RTE.default.proc.HTMLparser_rte.tags.mycustomtag.protect =1
</pre>
where
list-of-allowed-tags is the list of all allowed tags, including your custom tag, and
mycustomtag is the name of your tag.
===Klasse für Tabellen ändern===
«Typo3 always replaces the class I selected in the RTE for a table with the class "contenttable". Do you have an idea how to switch that off?»
Assuming that you have installed extension CSS Styled Content (css_styled_content), add the following line in your TS template Setup field:
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >

The contenttable class will then be added only if no class is specified for the table.
=== diverses ===
==== eigene Klassen ====
<pre>
RTE {
classes {
Infobox {
name = Infobox
value = eigenschaften
}
}

default {
classesParagraph = Infobox
contentCSS = fileadmin/templates/version1/css/style.css
classesCharacter = Infobox
proc.allowedClasses (
Infobox, ...
)
}
}
</pre>

== Probleme und Lösungen ==
=== RTE speichert keine Attribute ===
Symptome: Wenn man im RTE target _blank angibt wird dieses nicht gespeichert und taucht nicht im HTML Code auf.

Abhilfe: Die Attribute müssen erlaubt sein. Dies kann man z.B. im PageTS einstellen:

<pre>
entryHTMLparser_db {
tags {
a.allowedAttribs = id, title, dir, lang, xml:lang, class, href, rel, hreflang, target, nofollow
}
}
</pre>

=== JavaScript Bug mit htmlarea und Firefox 2.0.0.3 ===
Der Editor lädt nicht in der oben genannten Version von Firefox. Das liegt an einem Filter von htmlarea der dafür sorgen soll das die richtigen Routinen verwendet werden. Dieser erkennt die 0.0.3 Signatur falsch (den User Agent String).
Der neue String heißt:
Mozilla/5.0 (Windows; U; Windows NT 5.0; de; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
das 1.3 verwechselt htmlarea mit dem IE für Mac

Workaround: eine schnelle Lösung ist den Firefox mit einer anderen Signatur auszustatten:
Sie können den User Agent String in Firefox direkt ändern. Rufen Sie dazu in der Adresszeile auf:

about:config

Im Anzeigebereich erscheinen die Firefox-Einstellungen. Klicken Sie hier auf die rechte Maustaste um das Kontextmenü zu öffnen und wählen Sie neu - String aus.

Als Einstellungsname tragen Sie:

general.useragent.override

ein. Als Wert tragen Sie beispielsweise ein (am Besten copy&paste):

Mozilla/5.0 (Windows; U; Windows NT 5.0; de; rv:1.8.1.2pre) Gecko/20070111 Firefox/2.0.0.2

Diese Einstellungen sind sofort wirksam (kein Neustart erforderlich). Falls Sie in Typo3 angemeldet waren, müssen Sie sich erneut anmelden.

Um diesen User Agent Sting zu verwenden, wählen Sie ihn bitte aus dem Menü aus:
Extras - User Agent Switcher - Firefox 2.0.0.2
Löschen Sie noch bitte den Cache von Firefox:
Extras - Einstellungen - Erweitert - Netzwerk - Cache - Jetzt löschen

Nun sollte der RTE in Typo3 wieder funktionieren.
=== htmlarea - Eigene Tags verwenden ===
In der Standard - Einstellung werden eigene Tags verworfen. So kann man das verhindern:
### Allow Custom Tags ###
RTE.default.proc.allowTags = list-of-allowed-tags
RTE.default.proc.HTMLparser_rte.tags.mycustomtag.protect =1
Wobei ''list-of-allowed-tags'' eine Kommaseparierte Liste der erlaubten Tags enthält und ''mycustomtag'' den betreffenden neuen Tag schützt.

=== htmlarea - Bilder lassen sich nicht speichern ===
Das "Problem" liegt darin dass htmlarea standardmässig so
konfiguriert ist:

## REMOVE IMG TAGS
entryHTMLparser_db.tags.img.allowedAttribs = 0
entryHTMLparser_db.tags.img.rmTagIfNoAttrib = 1

Damit werden beim Speichern in typo3 also zuerst alle Attribute
aus dem Image-Tag entfernt und schließlich der gesamte Tag auch
noch, weil er ja kein Attribut mehr enthält.

Ohne Häcken im Extension-Manager tut es also auch

## SAVE IMG TAGS
entryHTMLparser_db.tags.img.allowedAttribs = alt,class,style,src,title
entryHTMLparser_db.tags.img.rmTagIfNoAttrib = 1

Vor allem das Attribut src ist wichtig ;-)

===htmlarea - Fehlermeldung wenn Bilder im Frontend angezeigt werden sollen===
Bei Versionen unter Typo3 4.0 eine niedrigere Version von htmlarea verwenden (1.1.3 oder evt. 1.1.6)

=== Hide Buttons - Show Buttons ===
showButtons
hideButtons
list of id-strings
Note: In the case of htmlArea RTE, available buttons are: blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, bold, italic, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, orderedlist, unorderedlist, outdent, indent, textcolor, bgcolor, textindicator, emoticon, insertcharacter, line, link, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge

Note: In the case of htmlArea RTE, if extension sr_static_info is not installed, the spellcheck button is not enabled.

Note:In the case of htmlArea RTE, the following elements will always be shown: undo redo, about.

Note: In the case of htmlArea RTE, buttons user and acronym are never available in the front end.

Note: In the case of htmlArea RTE, button Acronym is not currently available in IE.

2018-02-27T08:22:13Z

149.172.225.28: /* Selektoren und Filter */

== MarkupSimpleNavigation ==
Bekanntestes Navigation Modul http://modules.processwire.com/modules/markup-simple-navigation/
== Quickstart ==
nav-simpleTreeMenu.inc
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// needs Plugin MarkupSimpleNavigation
// use $treeMenu = $modules->get("MarkupSimpleNavigation");
// load module in _init.php or heren like...
$treeMenu = $modules->get("MarkupSimpleNavigation");
$options = array(
'parent_class' => 'parent',
'current_class' => 'current',
'has_children_class' => 'has_children',
'levels' => true,
'levels_prefix' => 'level-',
'max_levels' => null,
'firstlast' => false,
'collapsed' => true,
'show_root' => true,
'selector' => '',
'selector_field' => 'nav_selector',
'outer_tpl' => '<ul class="sf-menu">||</ul>',
'inner_tpl' => '<ul>||</ul>',
'list_tpl' => '<li%s>||</li>',
'list_field_class' => '',
'item_tpl' => '<a href="{url}">{title}</a>',
'item_current_tpl' => '<a href="{url}">{title}</a>',
'xtemplates' => '',
'xitem_tpl' => '<a href="{url}">{title}</a>',
'xitem_current_tpl' => '<span>{title}</span>',
'date_format' => 'd.m.Y',
'code_formatting' => false,
'debug' => false
);
?>


<div class="nav">
<nav>
<?php

echo $treeMenu->render($options);

?>
</nav>
</div>

</syntaxhighlight>

== Nur einen Level rendern ==
Top root menu
<pre>
// default root is "/"
echo $treeMenu->render(array("max_levels" => 1));
</pre>
Submenu
<pre>
$root = $page->rootParent; // top root parent of current page
echo $treeMenu->render(array("max_levels" => 1), null, $root);
</pre>

== Funktionen und Anwendung ==
render($options, $page, $rootPage)
* $options, is an array of options
* $page, is a page object for the current page
* $rootPage, is a page object for the root of the menu

=== Default options ===
<syntaxhighlight lang="php">
$options = array(
'parent_class' => 'parent',
'current_class' => 'current',
'has_children_class' => 'has_children',
'levels' => true,
'levels_prefix' => 'level-',
'max_levels' => null,
'firstlast' => false,
'collapsed' => false,
'show_root' => false,
'selector' => '',
'selector_field' => 'nav_selector',
'outer_tpl' => '<ul>||</ul>',
'inner_tpl' => '<ul>||</ul>',
'list_tpl' => '<li%s>||</li>',
'list_field_class' => '',
'item_tpl' => '<a href="{url}">{title}</a>',
'item_current_tpl' => '<a href="{url}">{title}</a>',
'xtemplates' => '',
'xitem_tpl' => '<a href="{url}">{title}</a>',
'xitem_current_tpl' => '<span>{title}</span>',
'date_format' => 'Y/m/d',
'code_formatting' => false,
'debug' => false
);
echo $treeMenu->render($options);
</syntaxhighlight>
Same with comments
<syntaxhighlight lang="php">
$options = array(
'parent_class' => 'parent',
// overwrite class name for current parent levels

'current_class' => 'current',
// overwrite current class

'has_children_class' => 'has_children',
// overwrite class name for entries with children

'levels' => true,
// wether to output "level-1, level-2, ..." as css class in links

'levels_prefix' => 'level-',
// prefix string that will be used for level class

'max_levels' => null,
// set the max level rendered

'firstlast' => false,
// puts last,first class to link items

'collapsed' => false,
// if you want to auto-collapse the tree you set this to true

'show_root' => false,
// set this to true if you want to rootPage to get prepended to the menu

'selector' => '',
// define custom PW selector, you may sanitize values from user input

'selector_field' => 'nav_selector',
// string (default 'nav_selector') define custom PW selector by using a property or field on a page. Use this setting if you want to overwrite the default nav_selector

'outer_tpl' => '<ul>||</ul>',
// template string for the outer most wrapper. || will contain entries

'inner_tpl' => '<ul>||</ul>',
// template string for inner wrappers. || will contain entries

'list_tpl' => '<li%s>||</li>',
// template string for the items. || will contain entries, %s will replaced with class="..." string

'list_field_class' => '', // string (default '') add custom classes to each list_tpl using tags like {field} i.e. {template} p_{id}

'item_tpl' => '<a href="{url}">{title}</a>',
// template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple)

'item_current_tpl' => '<a href="{url}">{title}</a>',
// template string for the active inner items.

'xtemplates' => '',
// specify one or more templates separated with a pipe | to use the xitem_tpl and xitem_current_tpl markup

'xitem_tpl' => '<a href="{url}">{title}</a>',
// same as 'item_tpl' but for xtemplates pages, can be used to define placeholders

'xitem_current_tpl' => '<span>{title}</span>',
// same as 'item_current_tpl' but for xtemplates pages

'date_format' => 'Y/m/d',
// default date formatting for Datetime fields and native created/modified

'code_formatting' => false,
// enable or disable code indentations and newslines in markup output

'debug' => false,
// show some inline information about rendertime and selectors used as html comments

);
echo $treeMenu->render($options);
</syntaxhighlight>
== More Examples ==
=== Aktive Seite oder Root Seite überschreiben ===

If you want to overwrite starting point for the root page to be another page you could do it like this:

$rootPage = $pages->get("/en/"); // or any other page that has subpages
echo $treeMenu->render(null, null, $rootPage); // null at first is to not have to specify options, just use default

'''Or to even overwrite the current active page'''

$currentPage = $pages->get(1242);
$rootPage = $pages->get("/en/");
echo $treeMenu->render(null, $currentPage, $rootPage);

=== Menü aus definierten Seiten ===
Dazu übergibt man ein PageArray statt einer einzelnen Seite.

'''Build a menu using a PageArray instead of a single root page'''

Define a PageArray as the root page argument. Instead of a root it will take the PageArray as the first level entries. This can be used to '''build a menu from a page select field for example'''.

Assuming you have a page field "navigation_entries" on your home root page:
$entries = $pages->get("/")->navigation_entries;
echo $treeMenu->render(null, null, $entries);

=== Dynamische Variable in der Navigation ===
Z.B. Feldnamen
'inner_tpl' => "<ul id='{name}' class='drop-down'>||</ul>",

=== Selektoren und Filter ===
Man kann die Menüpunkte z.B. anhand von einem Backend-Feld oder Templates Filtern. Man kann sogar für einzelne Level Filter vergeben.

<pre>
$pages->get(1001)->my_selector = "template=projects";

$options = array(
"selector_level1" => "template=ressort",
"selector_level2" => "start=0, limit=10",
"selector_level3" => "template=news|events, sort=-created",
"selector_field" => "my_selector"
);

echo $nav->render($options);
</pre>

==== Beispiel - Menüauswahl ====
Todo Funktionalität genauer checken
<syntaxhighlight lang="php">
$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
$homepage->my_selector = "menus.id=1";
$options = array(
//...
'max_levels' => 3,
'show_root' => true,
'selector' => '',
'selector_field' => 'my_selector',
'selector_level2' => 'menus.id=1',
'selector_level3' => 'menus.id=1',
'selector_level4' => 'menus.id=1'

);
$menu = $treeMenu->render($options);
</syntaxhighlight>

Processwire Module: MarkupSimpleNavigation

2018-02-26T18:46:14Z

149.172.225.28: /* More Examples */

ProcessWire - Navigation Snippets

2018-02-26T18:23:36Z

149.172.225.28:

== TODO Seite aufräumen ==
== Siehe auch ==
[[Processwire Module: MarkupSimpleNavigation]]

== Navigation in Pagewire - Einführung ==
=== Navigationstypen allgemein ===
Es gibt verschiedene '''Typen von Navigationen'''. In Processwire hat man ein '''Pages Objekt''', indem auch Zugriff auf Kind- und Elternseiten möglich sind. Es bildet also immer die Sitestruktur ab. Daher übergibt man an die unten aufgeführten Funktionen entweder die Homepage oder die aktuelle Seite.

Unter dem Aspekt auf welcher Seite man sich befindet kann man unterscheiden zwischen:
* '''absolute Navigation''' normalerweise ausgehend von der Rootseite. diese ist dann auf allen Seiten gleich.
** z.B. alle Seiten des ersten Levels stehen in der Hauptnavigation egal auf welcher Seite ich im Moment bin
** z.B. verschachtelte Liste mit 2 oder mehr Leveln für Dropdown Navigationen wie Superfish, Megamenüs (mit zusätzlichen Infos...) oder Bootstrap Navigationen.
** Sitemap
* '''Navigation relativ zur Seite''' Diese kann sich von Seite zu Seite unterscheiden.
** Alle '''Seiten der aktuellen Ebene''' (oft kombiniert mit Breadcrumb / Hier-bin-ich) )
** Hauptebene '''und''' aktueller Level
** Alle Ebenen '''bis zur aktuellen Seite + deren Unterseiten''' falls vorhanden.
In letzten Fall könnte man auch Varianten bauen in denen eine Verschachtelte Liste erzeugt wird aber nur bestimmte Teile absolut Positioniert angezeigt werden und andere versteckt werden. Manchmal möchte man bestimmte Level aber auch an anderer Position zeigen (z.B. Sidebar)
In der Praxis hat man in der Regel
* Mindestens eine Hauptnavigation mit allen Seiten der 1. Ebene oder eine Hauptnavigation mit mehreren Ebenen für Dropdown Navigationen, mobile Navigation oder auch Sitemapartige Navigationen für den Footer (oft mit kleinen Beschreibungen).
* Eine Metanavigation mit Service Seiten wie Kontakt, Impressum etc. oft ist diese im Footer.

=== Unterschiede zwischen Verstecken, Veröffentlichen, Sperren ===
In Processwire sind diese Begriffe mit Userrechten verknüpft. Eine unveröffentlichte Seite kann also durchaus im Frontend aufgerufen werden (es sei denn man regelt das anders.) Vielmehr geht es darum das man User Rollen so gestalten kann, dass man z.B. einem User nur erlaubt unveröffentlichte Seiten zu editieren.

Denoch gibt es auch ein paar weitere Unterschiede.

Gesperrt -> Man kann die Seite nicht zum Editieren aufrufen. Über die Url kann Sie aufgerufen werden.

Unpublished -> Die Seite kann sobald sie gespeichert ist auch aufgerufen werden, WENN der User berechtigt ist. Nicht für Guest User (der normale Viewer)

TODO checken ob die Tabelle so für nicht angemeldete User stimmt.
{| class="wikitable"
|-
! !! Im Menü ($pages->find) !! Über URL ($pages->get)
|-
| Unpublished / Unveröffentlicht || Nein || Nur User mit passenden Rechten
|-
| Hidden / Versteckt || Nein || Ja
|-
| Locked / Gesperrt || Ja || Ja
|-
| Trash || Nein || Nein
|}
==== Seiten auf unveröffentlicht stellen ====
https://processwire.com/talk/topic/29-how-to-unpublish-a-page-without-deleting-it/

Was soll man tun wenn man eine Seite tatsächlich nicht mehr anzeigen will, sie aber noch nicht wegwerfen will?
Ryan schlägt folgendes vor:
* Mülleimer
* Remove Guest Role
*

== Basics ==

=== Page Level ===
In which level in page tree we are?
$level = count($page->parents);

=== Link to Subpage und Platzhalter (Spacer) ===
Kann man gut für Superfish Menüs etc. benutzen. Bildet das Verhalten von Shortcuts und Spacern aus TYPO3 nach.

Anpassung der renderNavTree() Funktion von Ryan Cramer. Options Field Installieren und als globales Feld "navigation_type" mit den Optionen
<pre>
1=normal|Normal
2=doNotLink|Do not link
3=linkToFirstChild|Link to first childpage
</pre>
konfigurieren. Dann Funktion etwa so anpassen:
<pre>
...
// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$navigation_type = $item->navigation_type->id;
switch ( $navigation_type ) {
case 2: // do not link
$out .= "<span class='spacer'>$item->title</span>";
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= "<a href='$item->url'>$item->title</a>";
break;
}
...
</pre>

=== Redirect (301) ===
==== Redirect zu erster Unterseite ====
https://processwire.com/talk/topic/15-how-do-i-create-a-page-that-redirects-to-its-first-child/

Field ''redirects_to_first_child'' erstellen und im Template einfügen.
<syntaxhighlight lang="php">
<?php
if($page->numChildren && $page->redirects_to_first_child)
$session->redirect($page->child()->url);
?>
</syntaxhighlight>
Erzeugt 301 Weiterleitung

Anderer Ansatz wäre evtl. den Link bei der Menügenerierung direkt zu generieren. finde ich persönlich besser siehe ''Link to subpage und Platzhalter'' Beispiel. Allerdings sollte man dann vielleicht die Seite trotzdem per 301 Weiterleiten, falls die URL mal direkt aufgerufen wird oder bei Google gelistet ist.

==== Redirect zu anderer Seite in der Navigation ====
https://processwire.com/talk/topic/762-howto-menu-item-that-links-to-another-page/

1. Create a new field and call it 'redirect_url' or something like that, and use the 'URL' fieldtype.

2. Add that field to your template where you'd want to use it, or create a new template just for the purpose, like a template named 'redirect'.

3. Edit the page that you want to be a symlink and populate the 'redirect_url' field with the URL you want it to redirect to.

4. In your nav-generation code that links to the pages, do something like this:

<syntaxhighlight lang="php">
<?php
$url = $subpage->get("redirect_url|url"); // use redirect_url if there, otherwise use url
echo "<a href='$url'>{$subpage->title}</a>";
</syntaxhighlight>
5. You might also want to add this to your template that has the 'redirect_url' field: just in case there's anything linking to it directly. That way it'll send people to the right place either way:

<?php
if($page->redirect_url) $session->redirect($page->redirect_url);

=== Breadcrumb ===
<pre>

<div class='breadcrumbs'><?php
// breadcrumbs are the current page's parents
foreach($page->parents() as $item) {
echo "<span><a href='$item->url'>$item->title</a></span> ";
}
// optionally output the current page as the last item
echo "<span>$page->title</span> ";
?></div>
</pre>

=== One Level Navigation Bar ===
[[ProcessWire - One Level Navigation]]
=== Nächste Seite / Next Page Navigation ===
<syntaxhighlight lang="php">
if($page->next->id){
$next = '
<div class="next">
<i>Next:</i> 
<a class="ajax-link" name="'.$page->next->title.'" href="'. $page->next->url .'">
'. $page->next->title .'<span class="fa fa-arrow-right"><span>
</a>
</div>';
}
</syntaxhighlight>

=== Zurück zur Elternseite ===
<syntaxhighlight lang="php">
<div class="back"><a href="'.$page->parent()->url.'">zurück</a></div>
</syntaxhighlight>

=== Kindseiten mit $page->children ===
<?=$page->children?>
Output
5723,4958,5937

Beispiel
<syntaxhighlight lang="php">
<ul>
<?php
foreach($page->children as $child)
echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
?> 
</ul>
</syntaxhighlight>
Ergebnis:
<pre>
<ul> 
<li><a href='/about/contact/'>Contact Us</a></li>
<li><a href='/about/press/'>Press Releases</a></li>
<li><a href='/about/staff/'>Our Staff</a></li> 
</ul>
</pre>
=== Children Tree ===
<syntaxhighlight lang="php">
function listChildrenTree($children, $current, $w) {

echo "<ul>";

foreach($children as $page) {

$class = '';
if($page === $current || $current->parents->slice(1)->has($page) ) {
$class = "class='on' style='font-weight:bold'";
}

$rootid = $w->pages->get("/")->id;

echo "<li><a href='{$page->url}' $class>";
if($page->id == $rootid) echo "<img src='" . $w->config->urls->templates . "styles/images/home.png' width='24' height='28' alt='' />";
echo "{$page->title}</a> ";

if($page->numChildren && $page->id != $rootid) listChildrenTree($page->children, $current, $w);

echo "</li>";
}
echo "</ul>";
}

$children = $pages->get("/")->children();
$children->prepend($pages->get("/"));

listChildrenTree($children, $page, $wire);
</syntaxhighlight>

== Bootstrap Navigation ==
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
// Markup to use wicht navigation_type field (normal=1, no-link=2,subpage=3)
?>

<?php

// bundle up the first level pages and prepend the root home page
$homepage = $pages->get(1);
$pa = $homepage->children;
$pa = $pa->prepend($homepage);

// Set the ball rolling...
$myMenu = renderChildrenOf($pa);
$wrapper = '
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Menü</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
</div>
</div>
</div>';
$myMenu = wrap($myMenu,$wrapper);
echo $myMenu;

/*
Navigation for ProcessWire using the Bootstrap 2.2.2 markup
This menu was written by Soma based on work by NetCarver and a bit thrown in by Joss
Bootstrap 3 update by Damienov, with multi level dropdown support fix
*/
function renderChildrenOf($pa, $output = '', $level = 0)
{
$output = '';
$level++;

foreach ($pa as $child) {
$atoggle = '';
$class = '';

if ($child->numChildren && count($child->parents) == 1) {
$class .= 'dropdown';
$atoggle .= ' class="dropdown-toggle" data-toggle="dropdown"';
} else if ($child->numChildren && count($child->parents) > 1 ) {
$class .= 'dropdown-submenu';
$atoggle .= ' class="dropdown-toggle"';
} else if ($child->numChildren && $child->id != 1) {
$class .= 'dropdown-menu';
}

// Makes the current page and it's top level parent add an active class
$class .= ($child === wire("page") || $child === wire("page")->rootParent) ? " active" : '';
$class = strlen($class) ? " class='" . trim($class) . "'" : '';

if ($child->numChildren && count($child->parents) == 1) {
// Add Caret if have children
$output .= "<li$class><a href='$child->url'$atoggle>$child->title <b class='caret'></b></a>";
} else if ($child->numChildren && count($child->parents) > 1) {
$output .= "<li$class><a tabindex='-1' href='$child->url'$atoggle>$child->title</a>";
} else {
$output .= "<li$class><a href='$child->url'$atoggle>$child->title</a>";
}

// If this child is itself a parent and not the root page, then render it's children in their own menu too...
if ($child->numChildren && $child->id != 1) {
$output .= renderChildrenOf($child->children, $output, $level);
}
$output .= '</li>';
}
$outerclass = ($level == 1) ? "nav navbar-nav" : 'dropdown-menu';
return "<ul class='$outerclass'>$output</ul>";
}

?>
</syntaxhighlight>

== Modul: MarkupSimpleNavigation==
[[Processwire Modul - MarkupSimpleNavigation]]

== Weitere Menübeispiele ==
=== Standard Tree Navigation ===
Für viele Zwecke ausreichend und leicht anpassbar, die klassische verschachtelte Liste.

=== Menüauswahl Hauptmenü / Metamenü / Footer-Navigation ===
Beispiel 1
Backend Feld menus anlegen Options:

1=Main Menu
2=Meta Menu

topnav.inc
<syntaxhighlight lang="php">
$pa = $homepage->and($homepage->children("menus.id=1"));//only if main menu is checked
$options = array('level' => '1', 'ulClass' => 'sf-menu', 'liClass' => '');
echo "<div>".renderNavTreeType($pa, $maxDepth = 1, $fieldNames = '', $options)."</div>";
</syntaxhighlight>

'''Beispiel 2 (älter)'''

Checkbox anlegen (footer_nav), und dann das Seitenarray etwa so modifizieren.
<pre>
$footer_nav = $pages->find("parent=1, footer_checkbox=1");
$main_nav = $pages->find("parent=1, footer_checkbox!=1");
</pre>

=== Zweispaltige Navigation aus Kindseiten ===
Verbesserungsvorschlag: Anstatt if lieber zwei for Schleifen -> bessere Performance
<syntaxhighlight lang="php">
// Childrens
$n = count($page->children);
$m = ceil($n/2);
$c = 0;

// NAVIGATION & SLIDER Items
$listItem = '';
$navList = '';
$col1 = '<ul class="nav-list col1">';
$col2 = '<ul class="nav-list col2">';
foreach ($page->children as $item) {
if($item->id == $page->rootParent->id) {
$listItem = '<li class="current">';
} else {
$listItem = '<li>';
}
$listItem .= '<a class="ajax-link" href="'.$item->url.'">'.$item->title.'</a></li>';
($c < $m) ? $col1 .= $listItem : $col2 .= $listItem;
$c++;
}
$col1 .= '</ul>';
$col1 .= '</ul>';
$navList = $col1.$col2;
</syntaxhighlight>

=== Pushy Menu ===
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
* Assumes there is a field navigation_type to decide how a list item is
* rendered
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param array $options extra options for classes configuration etc.
* @return string
*
*/
function renderPushyMenu($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => '', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
//if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) {
// BUTTON instead of Link
$out .= '<li class="pushy-submenu"><button>'.$item->title.'</button>';
}else{
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// A ITEM
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
}
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>

== Do not link / link to subpage ==
Zusätzliches Feld (Options) im Backend mit Namen navigation_type

Beispiel
<syntaxhighlight lang="php">
/**
* Given a group of pages, render a <ul> navigation tree
* If there is a field navigation_type the vals have following meaning
* 1 = Normal
* 2 = Do not link
* 3 = Link to subpage
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTreeType($items, $maxDepth = 0, $fieldNames = '', $options = array('level' => 0, 'ulClass' => 'nav', 'liClass' => '', 'aClass' => '') ) {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';
$c = 0;
$liClasses = array();
$ulClasses = array();
$level = 0;
$liClass = '';
$ulClass = '';

if(!empty($options['level'])) $level = $options['level'];
if(!empty($options['ulClass'])) {
$ulClasses[] = $options['ulClass'];
$ulClass = $options['ulClass'];
}

if(!empty($options['liClass'])) {
$liClasses[] = $options['liClass'];
$liClass = $options['liClass'];
}

// cycle through all the items
foreach($items as $item) {
//$level = count($page->parents);
// LI ITEM
$classes = $liClasses;
if($item->id == wire('page')->id) $classes[] = 'cur';
if($item->hasChildren) $classes[] = 'has_children';
$classes[] = 'level-'.$level;
$out .= '<li class="'.implode($classes,' ').'">';
unset($classes);

// markup for the link
$navigation_type = $item->navigation_type->id;
$classes = $liClasses;
switch ( $navigation_type ) {
case 2: // do not link
$out .= '<span class="spacer">'.$item->title.'</span>';
break;
case 3: // link to subpage
if( $item->hasChildren() ){
$out .= '<a href="'.$item->child->url.'" class="ajax-link">'.$item->title.'</a>';
}else{
$out .= "<span class='spacer'>$item->title</span>";
}
break;
default:
$out .= '<a href="'.$item->url.'" class="ajax-link">'.$item->title.'</a>';
break;
}
unset($classes);
// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
//if($class == 'nav') $class = 'nav nav-tree';
$nextLevelOptions = array('level' => $level+1, 'ulClass' => '', 'liClass' => $liClass);
$out .= renderNavTreeType($item->children, $maxDepth-1, $fieldNames, $nextLevelOptions);
}

// close the list item
$out .= "</li>\n";
}

// if output was generated above, wrap it in a <ul>

if($out) $out = "\n".'<ul class="'.implode($ulClasses,' ').'">'."\n".$out.'</ul>'."\n";

// return the markup we generated above
return $out;
}
</syntaxhighlight>

== Beispiele für Funktionen (z.B. in _func.php)==
'''Beispiele für Funktionen die Navigationen erzeugen. '''
=== One Level ===
==== Original ProcessWire Demo Beispiel ====

=== Nested List ausgehend von einer Seite (meistens Homepage) ===
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

/**
* Given a group of pages, render a one level navbar
*
* @param array|PageArray $items
* @return string
*
*/
function renderNavMain($pa,$pageId){
if($pa instanceof Page) $pa = array($pa);
$out = '<nav class="menu menu--ferdinand"><ul class="nav navbar-nav menu__list">';
foreach($pa as $item) {
if($item->id == $pageId) {
$out .= "<li class=\"menu__item menu__item--current cur\">";
} else {
$out .= "<li class=\"menu__item\">";
}
// if template isotope-parent add first isotope-child name as hash
if($item->template->name == 'isotope-parent'){
$out .= '<a class="menu__link" href="'.$item->url.'#'.$item->child->name.'">'.$item->title.'</a></li>';
}else $out .= '<a class="menu__link" href="'.$item->url.'">'.$item->title.'</a></li>';
}
$out .= "</ul></nav>";
return $out;
}

function renderNavIsotope($pa){
if($pa instanceof Page) $pa = array($pa);
$out = '<ul class="submenu">';
foreach($pa as $item){
$out .= '<li><a href="#'.$item->name.'" class="isotope-link">'.$item->title.'</a></li>';
}
$out .= "</ul>";
return $out;
}

/**
* Given a group of pages, render a simple <ul> navigation
*
* This is here to demonstrate an example of a simple shared function.
* Usage is completely optional.
*
* @param PageArray $items
* @return string
*
*/
function renderNav(PageArray $items) {

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// render markup for each navigation item as an <li>
if($item->id == wire('page')->id) {
// if current item is the same as the page being viewed, add a "current" class to it
$out .= "<li class='current'>";
} else {
// otherwise just a regular list item
$out .= "<li>";
}

// markup for the link
$out .= "<a href='$item->url'>$item->title</a> ";

// if the item has summary text, include that too
if($item->summary) $out .= "<div class='summary'>$item->summary</div>";

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='nav'>$out</ul>\n";

// return the markup we generated above
return $out;
}

/**
* Given a group of pages, render a <ul> navigation tree
*
* This is here to demonstrate an example of a more intermediate level
* shared function and usage is completely optional. This is very similar to
* the renderNav() function above except that it can output more than one
* level of navigation (recursively) and can include other fields in the output.
*
* @param array|PageArray $items
* @param int $maxDepth How many levels of navigation below current should it go?
* @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
* @param string $class CSS class name for containing <ul>
* @return string
*
*/
function renderNavTree($items, $maxDepth = 0, $fieldNames = '', $class = 'nav') {

// if we were given a single Page rather than a group of them, we'll pretend they
// gave us a group of them (a group/array of 1)
if($items instanceof Page) $items = array($items);

// $out is where we store the markup we are creating in this function
$out = '';

// cycle through all the items
foreach($items as $item) {

// markup for the list item...
// if current item is the same as the page being viewed, add a "current" class to it
$out .= $item->id == wire('page')->id ? "<li class='current'>" : "<li>";

// markup for the link
$out .= "<a href='$item->url'>$item->title</a>";

// if there are extra field names specified, render markup for each one in a <div>
// having a class name the same as the field name
if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
$value = $item->get($fieldName);
if($value) $out .= " <div class='$fieldName'>$value</div>";
}

// if the item has children and we're allowed to output tree navigation (maxDepth)
// then call this same function again for the item's children
if($item->hasChildren() && $maxDepth) {
if($class == 'nav') $class = 'nav nav-tree';
$out .= renderNavTree($item->children, $maxDepth-1, $fieldNames, $class);
}

// close the list item
$out .= "</li>";
}

// if output was generated above, wrap it in a <ul>
if($out) $out = "<ul class='$class'>$out</ul>\n";

// return the markup we generated above
return $out;
}

</syntaxhighlight>