Shared with Script Lab

Dropdown - NG1 - FabricJS.yaml

name: Dropdown - NG1 - FabricJS
description: ''
author: WrathOfZombies
host: WEB
api_set: {}
script:
    content: |-
        declare var fabric: any;

        (() => {
            var appModule = angular
                .module('app', [])
                .controller('demoCtrl', function ($scope) {
                    this.label = 'Animal sounds';
                    this.items = [{
                        'key': 'Dog barking'
                    },
                    {
                        'key': 'Lion roaring'
                    },
                    {
                        'key': 'Duck quacking'
                    },
                    {
                        'key': 'Cow mooing'
                    }];

                    this.changed = item => console.log('Selection changed: ', item);
                })
                .directive('dropdown', () => {
                    return <ng.IDirective>{
                        restrict: 'E',
                        scope: {
                            label: '@',
                            items: '=',
                            selected: '=',
                            onChange: '&'
                        },
                        template: `
        <div class="ms-Dropdown" tabindex="0">
          <label class="ms-Label">{{label}}:</label>
          <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
          <select class="ms-Dropdown-select" ng-options="item as item.key for item in items track by $index" ng-model="selected" ng-change="update()"></select>
        </div>`,
                        link: (scope, elem) => {
                            const dropdownElement = elem.find('.ms-Dropdown');
                            const Dropdown = new fabric['Dropdown'](dropdownElement[0]);
                            (scope as any).update = () => {
                                var [selectedElement] = dropdownElement.find('.ms-Dropdown-item.is-selected');
                                if (!selectedElement) return;
                                const selectedItem = (scope as any).items.find(({key}) => {
                                    return key == selectedElement.textContent;
                                });
                                (scope as any).selected = selectedItem;
                                if ((scope as any).onChange) {
                                    (scope as any).onChange({ item: selectedItem });
                                }
                            };
                        }
                    }
                });

            angular.bootstrap(document.body, ['app']);
        })();
    language: typescript
template:
    content: |-
        <div ng-controller="demoCtrl as demo">
            <dropdown label="{{demo.label}}" items="demo.items" selected="demo.selected" on-change="demo.changed(item)"></dropdown>
        </div>
    language: html
style:
    content: "/* Your style goes here */\r\n"
    language: css
libraries: |
    # CSS Libraries
    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

    # NPM libraries
    core-js@2.4.1/client/core.min.js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    office-ui-fabric-js@1.4.0/dist/js/fabric.min.js
    jquery@3.1.1
    angular/angular.js

    # IntelliSense: @types/library or node_modules paths or URL to d.ts files
    @types/core-js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts
    @types/jquery
    @types/angular