Die Block Toolbar kann um individuelle Toggle Buttons erweitert werden. Ein Toggle Button aktiviert oder deaktiviert einen bestimmten Wert. So können einfache Einstellungen, die normalerweise als Checkbox in den Block Einstellungen zu finden wären, direkt in der Block Toolbar bedient werden.
Um einen Toggle Button zu erstellen, wird die Eigenschaft controls in der conf.json Datei gesetzt. Hier wird ein Array mit allen Toggle Buttons definiert. So ein Toggle Button könnte z.B. die Darstellung des Blocks von hell auf dunkel wechseln.
{
"controls": [{
"title": "Dunkles Design verwenden",
"type": "toggle",
"name": "darken"
}]
}
{Die Eigenschaften eines Toggle Buttons erfordern mindestens folgende Werte:
- title: Der angezeigte Titel.
- type: Der Typ des Buttons (hier wird der Wert toggle erwartet).
- name: Der Name, unter dem Wert gespeichert wird.
Wenn Sie die De-/aktivierung des Toggle Buttons als Aktion abfangen wollen, können Sie zusätzlich die Eigenschaft event mit einer individuellen Bezeichnung setzen.
Sie können den angezeigten Titel des Toggle Buttons automatisch in Abhängigkeit des Zustands wechseln lassen. Dazu verwenden Sie die Eigenschaft labels. Dieses ist ein Array mit maximal zwei Titeln:
- Erster Titel: wird angezeigt, wenn der Toggle Button deaktiviert ist.
- Zweiter Titel: wird angezeigt, wenn der Toggle Button aktiviert ist.
{
"controls": [{
"type": "toggle",
"name": "darken",
"labels": [
"Dunkles Design verwenden",
"Helles Design verwenden"
]
}]
}
Wenn Sie die Eigenschaft labels verwenden, wird die Eigenschaft title nicht mehr ausgewertet und kann somit auch entfallen.
Wenn Sie kein Icon für den Toggle Button definieren, wird ein Standard Icon verwendet. Um ein Icon zu definieren, verwenden Sie die Eigenschaft appearance. Auch diese Eigenschaft ist ein Array mit maximal zwei Elementen:
- Erstes Element: wird verwendet, wenn der Toggle Button deaktiviert ist.
- Zweites Element: wird verwendet, wenn der Toggle Button aktiviert ist.
In so einem Element können weiter folgende Eigenschaften gesetzt werden:
- icon: die Bezeichnung des zu verwendenden Icons.
- color: die zu verwendende Farbe (z.B. als Hex-Wert).
Für die Icons aller Block Toolbar Buttons wird ein individuelles Icomoon Iconset verwendet. Die Bezeichnungen der verfügbaren Icons werden hier aufgelistet:
| Icon | Bezeichnung |
|---|---|
| 500px | |
| IE | |
| IcoMoon | |
| accessibility | |
| add | |
| address-book | |
| aid-kit | |
| airplane | |
| alarm | |
| amazon | |
| anchor | |
| android | |
| angry | |
| angry2 | |
| appleinc | |
| arrow-down | |
| arrow-down-left | |
| arrow-down-left2 | |
| arrow-down-right | |
| arrow-down-right2 | |
| arrow-down1 | |
| arrow-down2 | |
| arrow-left | |
| arrow-left2 | |
| arrow-right | |
| arrow-right2 | |
| arrow-up | |
| arrow-up-left | |
| arrow-up-left2 | |
| arrow-up-right | |
| arrow-up-right2 | |
| arrow-up1 | |
| arrow-up2 | |
| attachment | |
| audio | |
| backward | |
| backward2 | |
| baffled | |
| baffled2 | |
| barcode | |
| basecamp | |
| behance | |
| behance2 | |
| bell | |
| bin | |
| bin2 | |
| binoculars | |
| blocked | |
| blog | |
| blogger | |
| blogger2 | |
| bold | |
| book | |
| book1 | |
| bookmark | |
| bookmark1 | |
| bookmarks | |
| books | |
| box-add | |
| box-remove | |
| briefcase | |
| brightness-contrast | |
| bubble | |
| bubble2 | |
| bubbles | |
| bubbles1 | |
| bubbles2 | |
| bubbles3 | |
| bubbles4 | |
| bug | |
| bullhorn | |
| calculator | |
| calendar | |
| camera | |
| cancel-circle | |
| cart | |
| checkbox-checked | |
| checkbox-unchecked | |
| checkmark | |
| checkmark2 | |
| chrome | |
| circle-down | |
| circle-left | |
| circle-right | |
| circle-up | |
| clear-formatting | |
| clip | |
| clipboard | |
| clipboard1 | |
| clock | |
| clock2 | |
| cloud | |
| cloud-check | |
| cloud-download | |
| cloud-upload | |
| clubs | |
| codepen | |
| cog | |
| cogs | |
| coin-dollar | |
| coin-euro | |
| coin-pound | |
| coin-yen | |
| command | |
| compass | |
| compass2 | |
| config | |
| confused | |
| confused2 | |
| connection | |
| contrast | |
| cool | |
| cool2 | |
| copy | |
| copy1 | |
| credit-card | |
| crop | |
| cross | |
| crying | |
| crying2 | |
| css3 | |
| ctrl | |
| database | |
| delete | |
| delicious | |
| deviantart | |
| diamonds | |
| dice | |
| display | |
| download | |
| download2 | |
| download3 | |
| drag | |
| drawer | |
| drawer2 | |
| dribbble | |
| drive | |
| dropbox | |
| droplet | |
| droplet1 | |
| duplicate | |
| earth | |
| earth1 | |
| edge | |
| edit | |
| eject | |
| ello | |
| embed | |
| embed2 | |
| enlarge | |
| enlarge2 | |
| enter | |
| envelop | |
| equalizer | |
| equalizer2 | |
| evil | |
| evil2 | |
| exit | |
| expand | |
| eye | |
| eye-blocked | |
| eye-blocked1 | |
| eye-minus | |
| eye-plus | |
| eye1 | |
| eyedropper | |
| facebook2 | |
| feed | |
| file-empty | |
| file-empty1 | |
| file-excel | |
| file-music | |
| file-openoffice | |
| file-pdf | |
| file-picture | |
| file-play | |
| file-text | |
| file-text2 | |
| file-video | |
| file-word | |
| file-zip | |
| files-empty | |
| film | |
| filter | |
| finder | |
| fire | |
| firefox | |
| first | |
| flag | |
| flattr | |
| flickr | |
| flickr2 | |
| flickr3 | |
| flickr4 | |
| floppy-disk | |
| folder | |
| folder-download | |
| folder-minus | |
| folder-open | |
| folder-plus | |
| folder-upload | |
| font | |
| font-size | |
| forward | |
| forward2 | |
| forward3 | |
| foursquare | |
| frustrated | |
| frustrated2 | |
| gift | |
| git | |
| github | |
| glass | |
| glass2 | |
| google-drive | |
| google-plus | |
| google-plus2 | |
| google-plus3 | |
| google2 | |
| google3 | |
| grin | |
| grin2 | |
| hackernews | |
| hammer | |
| hammer2 | |
| hangouts | |
| happy | |
| happy2 | |
| headphones | |
| heart | |
| heart-broken | |
| hipster | |
| hipster2 | |
| history | |
| home | |
| home2 | |
| home3 | |
| hour-glass | |
| html-five | |
| html-five2 | |
| image | |
| images | |
| indent-decrease | |
| indent-increase | |
| infinite | |
| info | |
| insert-template | |
| italic | |
| joomla | |
| key | |
| key2 | |
| keyboard | |
| lab | |
| lanyrd | |
| laptop | |
| last | |
| lastfm | |
| lastfm2 | |
| leaf | |
| library | |
| libreoffice | |
| lifebuoy | |
| ligature | |
| ligature2 | |
| link | |
| linkedin2 | |
| list | |
| list-numbered | |
| list2 | |
| location | |
| location2 | |
| lock | |
| lock1 | |
| loop | |
| loop2 | |
| ltr | |
| magic-wand | |
| magnet | |
| mail2 | |
| mail3 | |
| mail4 | |
| make-group | |
| man | |
| man-woman | |
| map | |
| map2 | |
| menu | |
| menu2 | |
| menu3 | |
| menu4 | |
| meter | |
| meter2 | |
| mic | |
| minus | |
| mobile | |
| mobile2 | |
| move-down | |
| move-up | |
| mug | |
| music | |
| neutral | |
| neutral2 | |
| new-tab | |
| newspaper | |
| next | |
| next2 | |
| notification | |
| npm | |
| office | |
| omega | |
| onedrive | |
| opera | |
| opt | |
| pacman | |
| page-break | |
| pagebreak | |
| paint-format | |
| paragraph-center | |
| paragraph-justify | |
| paragraph-left | |
| paragraph-right | |
| paste | |
| paste1 | |
| pause | |
| pause2 | |
| paypal | |
| pen | |
| pencil | |
| pencil2 | |
| phone | |
| phone-hang-up | |
| pie-chart | |
| pilcrow | |
| pinterest2 | |
| play | |
| play2 | |
| play3 | |
| plus | |
| podcast | |
| point-down | |
| point-left | |
| point-right | |
| point-up | |
| power | |
| power-cord | |
| previous | |
| previous2 | |
| price-tag | |
| price-tags | |
| printer | |
| profile | |
| pushpin | |
| qrcode | |
| question | |
| quill | |
| quotes-left | |
| quotes-right | |
| radio-checked | |
| radio-checked2 | |
| radio-unchecked | |
| ratio | |
| redo | |
| redo2 | |
| remove | |
| renren | |
| replace | |
| reply | |
| reset | |
| restore | |
| road | |
| rocket | |
| rss | |
| rss2 | |
| rtl | |
| sad | |
| sad2 | |
| safari | |
| scissors | |
| scissors1 | |
| search | |
| section | |
| share | |
| share2 | |
| shield | |
| shift | |
| shocked | |
| shocked2 | |
| shrink | |
| shrink2 | |
| shuffle | |
| sigma | |
| sina-weibo | |
| skype | |
| sleepy | |
| sleepy2 | |
| smile | |
| smile2 | |
| sort-alpha-asc | |
| sort-alpha-desc | |
| sort-amount-asc | |
| sort-amount-desc | |
| sort-numberic-desc | |
| sort-numeric-asc | |
| soundcloud | |
| soundcloud2 | |
| spades | |
| spell-check | |
| sphere | |
| spinner | |
| spinner2 | |
| spinner3 | |
| spinner4 | |
| spinner5 | |
| spinner6 | |
| spinner7 | |
| spinner8 | |
| spinner9 | |
| spinner10 | |
| spinner11 | |
| spoon-knife | |
| spotify | |
| stack | |
| stack1 | |
| stackoverflow | |
| star-empty | |
| star-full | |
| star-half | |
| stats-bars | |
| stats-bars2 | |
| stats-dots | |
| steam | |
| steam2 | |
| stop | |
| stop2 | |
| stopwatch | |
| strikethrough | |
| stumbleupon | |
| stumbleupon2 | |
| subscript | |
| subscript2 | |
| sun | |
| superscript | |
| superscript2 | |
| svg | |
| switch | |
| tab | |
| table | |
| table2 | |
| tablet | |
| target | |
| telegram | |
| terminal | |
| text-color | |
| text-height | |
| text-width | |
| ticket | |
| tongue | |
| tongue2 | |
| translate | |
| tree | |
| trello | |
| trophy | |
| truck | |
| tumblr | |
| tumblr2 | |
| tux | |
| tv | |
| twitch | |
| underline | |
| undo | |
| undo2 | |
| ungroup | |
| unlocked | |
| upload | |
| upload2 | |
| upload3 | |
| user | |
| user-check | |
| user-minus | |
| user-plus | |
| user-tie | |
| users | |
| video-camera | |
| vimeo | |
| vimeo2 | |
| vine | |
| vk | |
| volume-decrease | |
| volume-high | |
| volume-increase | |
| volume-low | |
| volume-medium | |
| volume-mute | |
| volume-mute2 | |
| warning | |
| wikipedia | |
| windows | |
| windows8 | |
| wink | |
| wink2 | |
| woman | |
| wondering | |
| wondering2 | |
| wordpress | |
| wrench | |
| xing2 | |
| yahoo | |
| yahoo2 | |
| yelp | |
| youtube | |
| youtube2 | |
| zoom-in | |
| zoom-in1 | |
| zoom-out | |
| zoom-out1 |
Über die Eigenschaften include und exclude können Sie kommasepariert auch eine Liste von Blöcken angeben, für die dieser Toggle Button angezeigt, bzw. nicht angezeigt wird. Standardmäßig wird ein Toggle Button für alle Blöcke angezeigt.
Sie können einen Toggle Button in dieser Form auch direkt einem Block über dessen controls Eigenschaft zuweisen.
Im Block Template oder Block Skript können Sie schließlich über die Variable $extra._toggle abfragen, ob ein Toggle Button de-/aktiviert ist. Diese Variable enthält ein Array mit den Werten zu den Namen aller Toggle Buttons:
{* Smarty Beispiel im Block Template *}
{if $extra._toggle.darken}
...
{/if}
// PHP Beispiel im Block Skript
if ($extra['_toggle']['darken']) {
// ...
}