all files / app/main/components/material-docs/demo/ demoInclude.js

16.28% Statements 7/43
0% Branches 0/6
6.25% Functions 1/16
16.28% Lines 7/43
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140                                                                                                                                                                                                                                                                          
(function ()
{
    'use strict';
 
    angular
        .module('app.components.material-docs')
        .directive('demoInclude', demoInclude)
 
    function demoInclude($q, $http, $compile, $templateCache, $timeout)
    {
        return {
            restrict: 'E',
            link    : postLink
        };
 
        function postLink(scope, element, attr)
        {
            var demoContainer;
 
            // Interpret the expression given as `demo-include files="something"`
            var files = scope.$eval(attr.files) || {};
            var ngModule = scope.$eval(attr.module) || '';
 
            $timeout(handleDemoIndexFile);
 
            /**
             * Fetch the index file, and if it contains its own ngModule
             * then bootstrap a new angular app with that ngModule. Otherwise, compile
             * the demo into the current ng-app.
             */
            function handleDemoIndexFile()
            {
                files.index.contentsPromise.then(function (contents)
                {
                    demoContainer = angular.element(
                        '<div class="demo-content ' + ngModule + '">'
                    );
 
                    var isStandalone = !!ngModule;
                    var demoScope;
                    var demoCompileService;
                    if ( isStandalone )
                    {
                        angular.bootstrap(demoContainer[0], [ngModule]);
                        demoScope = demoContainer.scope();
                        demoCompileService = demoContainer.injector().get('$compile');
 
                        scope.$on('$destroy', function ()
                        {
                            demoScope.$destroy();
                        });
 
                    }
                    else
                    {
                        demoScope = scope.$new();
                        demoCompileService = $compile;
                    }
 
                    // Once everything is loaded, put the demo into the DOM
                    $q.all([
                        handleDemoStyles(),
                        handleDemoTemplates()
                    ]).finally(function ()
                    {
 
                        demoScope.$evalAsync(function ()
                        {
                            element.append(demoContainer);
                            demoContainer.html(contents);
                            demoCompileService(demoContainer.contents())(demoScope);
                        });
 
 
                    });
                });
 
            }
 
 
            /**
             * Fetch the demo styles, and append them to the DOM.
             */
            function handleDemoStyles()
            {
                return $q.all(files.css.map(function (file)
                    {
                        return file.contentsPromise;
                    }))
                    .then(function (styles)
                    {
                        styles = styles.join('\n'); //join styles as one string
 
                        var styleElement = angular.element('<style>' + styles + '</style>');
                        document.body.appendChild(styleElement[0]);
 
                        scope.$on('$destroy', function ()
                        {
                            styleElement.remove();
                        });
                    });
 
            }
 
            /**
             * Fetch the templates for this demo, and put the templates into
             * the demo app's templateCache, with a url that allows the demo apps
             * to reference their templates local to the demo index file.
             *
             * For example, make it so the dialog demo can reference templateUrl
             * 'my-dialog.tmpl.html' instead of having to reference the url
             * 'generated/material.components.dialog/demo/demo1/my-dialog.tmpl.html'.
             */
            function handleDemoTemplates()
            {
 
                return $q.all(files.html.map(function (file)
                {
 
                    return file.contentsPromise.then(function (contents)
                    {
                        // Get the $templateCache instance that goes with the demo's specific ng-app.
                        var demoTemplateCache = demoContainer.injector().get('$templateCache');
                        demoTemplateCache.put(file.name, contents);
 
                        scope.$on('$destroy', function ()
                        {
                            demoTemplateCache.remove(file.name);
                        });
 
                    });
 
                }));
 
            }
 
        }
 
    }
})();