Last active
December 24, 2016 06:29
-
-
Save monkeyhouse/6fb33437769bcbbe826b0f0a06d27335 to your computer and use it in GitHub Desktop.
Aurelia Icon Attribute
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 {autoinject, bindable, bindingMode} from 'aurelia-framework'; | |
| /*** | |
| * created to : attach custom font-awesome class name to icon | |
| * renders font-awsome class named based on parameters extension and type | |
| * both parameters are required, always | |
| * | |
| * if you only need to bind a signle paremter, use the single value binding approach instead because its cleaner | |
| * http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-attributes/4 | |
| * | |
| * implemented here: | |
| * https://gist.github.com/monkeyhouse/9a747f654c312dd4b18053cb83bcbb36 | |
| ***/ | |
| @autoinject() | |
| export class IconCustomAttribute { | |
| @bindable({ defaultBindingMode: bindingMode.oneTime}) | |
| type; | |
| @bindable({ defaultBindingMode: bindingMode.oneTime}) | |
| extension; | |
| constructor(private element: Element) { } | |
| typeChanged(newValue, oldValue) { | |
| this.setElementClass(); | |
| } | |
| extensionChanged( newValue, oldValue ){ | |
| this.setElementClass(); | |
| } | |
| setElementClass(){ | |
| if ( this.type !== undefined | |
| && this.extension !== undefined){ | |
| let style = IconCustomAttribute.getStyle(this.type, this.extension); | |
| this.element.classList.add( style ); | |
| } | |
| } | |
| static getStyle( type : string, extension : string ) : string { | |
| switch( type ){ | |
| case 'folder': | |
| return 'fa-folder-o'; | |
| // case 'monkeys' | |
| // case 'houses' | |
| case 'file': | |
| switch( extension ){ | |
| case 'jpeg': | |
| case 'jpg': | |
| case 'png': | |
| case 'gif': | |
| return 'fa-file-image-o'; | |
| case 'xls': | |
| case 'xlsx': | |
| return 'fa-file-excel-o'; | |
| case 'doc': | |
| case 'docx': | |
| return 'fa-file-word-o'; | |
| case 'ppt': | |
| case 'pptx': | |
| return 'fa-file-powerpoint-o'; | |
| case 'zip': | |
| case 'rar': | |
| case 'tar': | |
| case 'bz2': | |
| case 'xz': | |
| case 'gz': | |
| return 'fa-file-archive-o'; | |
| case 'mp3': | |
| return 'fa-file-audio-o'; | |
| case 'avi': | |
| case 'mov': | |
| return 'fa-file-video-o'; | |
| case 'php': | |
| case 'html': | |
| case 'css': | |
| return 'fa-file-code-o'; | |
| case 'pdf': | |
| return 'fa-file-pdf-o'; | |
| default: | |
| return 'fa-file-o'; | |
| } | |
| default: | |
| return 'fa-question'; | |
| } | |
| } | |
| } |
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
| <template> | |
| <i class="fa fa-5x" icon="type.bind: 'file'; extension.bind: 'xls'"></i> | |
| </template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment