Created
June 22, 2017 16:24
-
-
Save jbalsas/d9964de3659102017317c4249c88c9be to your computer and use it in GitHub Desktop.
A Lexicon Dropdown using metal-dropdown
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import core from 'metal/src/core'; | |
| import MetalDropdown from 'metal-dropdown'; | |
| import Soy from 'metal-soy'; | |
| import templates from './LexiconDropdown.soy'; | |
| /** | |
| * Implementation of the Lexicon Dropdown. | |
| * @see {@link http://liferay.github.io/lexicon/content/dropdowns/|Lexicon Definition} | |
| */ | |
| class LexiconDropdown extends MetalDropdown { | |
| } | |
| /** | |
| * State definition. | |
| * @type {!Object} | |
| * @static | |
| */ | |
| LexiconDropdown.STATE = { | |
| /** | |
| * CSS class (or list of classes) for styling the icon's main container. | |
| * @type {array} | |
| */ | |
| items: { | |
| validator: core.isArray | |
| } | |
| }; | |
| Soy.register(LexiconDropdown, templates); | |
| export default LexiconDropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {namespace LexiconDropdown} | |
| /** | |
| * This renders an icon element based on the lexicon icon definition | |
| * found at http://liferay.github.io/lexicon/content/dropdowns/ | |
| * | |
| * @param? alignedPosition | |
| * @param? classMap | |
| * @param? elementClasses | |
| * @param? expanded | |
| * @param items | |
| * @param? position | |
| * @param? positionClassOnMenu | |
| */ | |
| {template .render} | |
| {let $dropdownTrigger kind="html"} | |
| {call .trigger data="all" /} | |
| {/let} | |
| {call Dropdown.render data="all"} | |
| {param header: $dropdownTrigger /} | |
| {param body kind="html"} | |
| {call .dropdownItems data="all"} | |
| {param items: $items /} | |
| {/call} | |
| {/param} | |
| {param alignedPosition: $alignedPosition /} | |
| {param classMap: $classMap /} | |
| {param elementClasses: $elementClasses ?: 'dropdown' /} | |
| {param expanded: $expanded /} | |
| {param position: $position /} | |
| {param positionClassOnMenu: $positionClassOnMenu /} | |
| {/call} | |
| {/template} | |
| /** | |
| * | |
| * @param? expanded | |
| * @param? triggerCssClass | |
| * @param? triggerElement | |
| * @param? triggerLabel | |
| */ | |
| {template .trigger} | |
| {let $triggerAttributes kind="attributes"} | |
| aria-expanded="{$expanded}" | |
| class="dropdown-toggle{$triggerCssClass ? ' ' + $triggerCssClass : ''}" | |
| data-onclick="toggle" | |
| href="javascript:;" | |
| type="button" | |
| {/let} | |
| {let $triggerContent kind="html"} | |
| {$triggerLabel}<span class="icon-caret-down"></span> | |
| {/let} | |
| {if $triggerElement == 'a'} | |
| <a {$triggerAttributes}> | |
| {$triggerContent} | |
| </a> | |
| {else} | |
| <button {$triggerAttributes}> | |
| {$triggerContent} | |
| </button> | |
| {/if} | |
| {/template} | |
| /** | |
| * | |
| * @param items | |
| */ | |
| {template .dropdownItems} | |
| {if $items} | |
| {foreach $item in $items} | |
| {delcall LexiconDropdown.Item variant="$item.type" data="all" } | |
| {param item: $item /} | |
| {/delcall} | |
| {/foreach} | |
| {/if} | |
| {/template} | |
| /** | |
| * | |
| * @param item | |
| */ | |
| {deltemplate LexiconDropdown.Item} | |
| <li class="{$item.active ? 'active' : ''}{$item.disabled ? 'disabled' : ''}{$item.cssClass ? ' ' + $item.cssClass : ''}"> | |
| <a class="{$item.linkCssClass ?: ''}" href="{$item.href}">{$item.label}</a> | |
| </li> | |
| {/deltemplate} | |
| /** | |
| * | |
| * @param item | |
| */ | |
| {deltemplate LexiconDropdown.Item variant="'divider'"} | |
| <li class="divider{$item.cssClass ? ' ' + $item.cssClass : ''}" role="presentation"></li> | |
| {/deltemplate} | |
| /** | |
| * | |
| * @param item | |
| */ | |
| {deltemplate LexiconDropdown.Item variant="'header'"} | |
| <li class="dropdown-header{$item.cssClass ? ' ' + $item.cssClass : ''}" role="presentation">{$item.label}</li> | |
| {/deltemplate} | |
| /** | |
| * | |
| * @param item | |
| */ | |
| {deltemplate LexiconDropdown.Item variant="'scroller'"} | |
| <li> | |
| <ul class="inline-scroller"> | |
| {call .dropdownItems data="all"} | |
| {param items: $item.items /} | |
| {/call} | |
| </ul> | |
| </li> | |
| {/deltemplate} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment