afm-client/bower_components/foundation-apps/js/angular/components/iconic/iconic.js

   1 (function () {
   2   'use strict';
   3
   4   angular.module('foundation.iconic', [])
   5     .provider('Iconic', Iconic)
   6     .directive('zfIconic', zfIconic)
   7   ;
   8
   9   // iconic wrapper
  10   function Iconic() {
  11     // default path
  12     var assetPath = 'assets/img/iconic/';
  13
  14     /**
  15      * Sets the path used to locate the iconic SVG files
  16      * @param {string} path - the base path used to locate the iconic SVG files
  17      */
  18     this.setAssetPath = function (path) {
  19       assetPath = angular.isString(path) ? path : assetPath;
  20     };
  21
  22     /**
  23      * Service implementation
  24      * @returns {{}}
  25      */
  26     this.$get = function () {
  27       var iconicObject = new IconicJS();
  28
  29       var service = {
  30         getAccess: getAccess,
  31         getAssetPath: getAssetPath
  32       };
  33
  34       return service;
  35
  36       /**
  37        *
  38        * @returns {Window.IconicJS}
  39        */
  40       function getAccess() {
  41         return iconicObject;
  42       }
  43
  44       /**
  45        *
  46        * @returns {string}
  47        */
  48       function getAssetPath() {
  49         return assetPath;
  50       }
  51     };
  52   }
  53
  54   zfIconic.$inject = ['Iconic', 'FoundationApi', '$compile'];
  55
  56   function zfIconic(iconic, foundationApi, $compile) {
  57     var directive = {
  58       restrict: 'A',
  59       template: '<img ng-transclude>',
  60       transclude: true,
  61       replace: true,
  62       scope: {
  63         dynSrc: '=?',
  64         dynIcon: '=?',
  65         size: '@?',
  66         icon: '@',
  67         iconDir: '@?'
  68       },
  69       compile: compile
  70     };
  71
  72     return directive;
  73
  74     function compile() {
  75       var contents, assetPath;
  76
  77       return {
  78         pre: preLink,
  79         post: postLink
  80       };
  81
  82       function preLink(scope, element, attrs) {
  83
  84         if (scope.iconDir) {
  85           // path set via attribute
  86           assetPath = scope.iconDir;
  87         } else {
  88           // default path
  89           assetPath = iconic.getAssetPath();
  90         }
  91         // make sure ends with /
  92         if (assetPath.charAt(assetPath.length - 1) !== '/') {
  93           assetPath += '/';
  94         }
  95
  96         if (scope.dynSrc) {
  97           attrs.$set('data-src', scope.dynSrc);
  98         } else if (scope.dynIcon) {
  99           attrs.$set('data-src', assetPath + scope.dynIcon + '.svg');
 100         } else {
 101           if (scope.icon) {
 102             attrs.$set('data-src', assetPath + scope.icon + '.svg');
 103           } else {
 104             // To support expressions on data-src
 105             attrs.$set('data-src', attrs.src);
 106           }
 107         }
 108
 109         // check if size already added as class
 110         if (!element.hasClass('iconic-sm') && !element.hasClass('iconic-md') && !element.hasClass('iconic-lg')) {
 111           var iconicClass;
 112           switch (scope.size) {
 113             case 'small':
 114               iconicClass = 'iconic-sm';
 115               break;
 116             case 'medium':
 117               iconicClass = 'iconic-md';
 118               break;
 119             case 'large':
 120               iconicClass = 'iconic-lg';
 121               break;
 122             default:
 123               iconicClass = 'iconic-fluid';
 124           }
 125           element.addClass(iconicClass);
 126         }
 127
 128         // save contents of un-inject html, to use for dynamic re-injection
 129         contents = element[0].outerHTML;
 130       }
 131
 132       function postLink(scope, element, attrs) {
 133         var svgElement, ico = iconic.getAccess();
 134
 135         injectSvg(element[0]);
 136
 137         foundationApi.subscribe('resize', function () {
 138           // only run update on current element
 139           ico.update(element[0]);
 140         });
 141
 142         // handle dynamic updating of src
 143         if (scope.dynSrc) {
 144           scope.$watch('dynSrc', function (newVal, oldVal) {
 145             if (newVal && newVal !== oldVal) {
 146               reinjectSvg(scope.dynSrc);
 147             }
 148           });
 149         }
 150         // handle dynamic updating of icon
 151         if (scope.dynIcon) {
 152           scope.$watch('dynIcon', function (newVal, oldVal) {
 153             if (newVal && newVal !== oldVal) {
 154               reinjectSvg(assetPath + scope.dynIcon + '.svg');
 155             }
 156           });
 157         }
 158
 159         function reinjectSvg(newSrc) {
 160           if (svgElement) {
 161             // set html
 162             svgElement.empty();
 163             svgElement.append(angular.element(contents));
 164
 165             // set new source
 166             svgElement.attr('data-src', newSrc);
 167
 168             // reinject
 169             injectSvg(svgElement[0]);
 170           }
 171         }
 172
 173         function injectSvg(element) {
 174           ico.inject(element, {
 175             each: function (injectedElem) {
 176               // compile injected svg
 177               var angElem = angular.element(injectedElem);
 178               svgElement = $compile(angElem)(angElem.scope());
 179             }
 180           });
 181         }
 182       }
 183     }
 184   }
 185
 186 })();