4 angular.module('foundation.iconic', [])
5 .provider('Iconic', Iconic)
6 .directive('zfIconic', zfIconic)
12 var assetPath = 'assets/img/iconic/';
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
18 this.setAssetPath = function (path) {
19 assetPath = angular.isString(path) ? path : assetPath;
23 * Service implementation
26 this.$get = function () {
27 var iconicObject = new IconicJS();
31 getAssetPath: getAssetPath
38 * @returns {Window.IconicJS}
40 function getAccess() {
48 function getAssetPath() {
54 zfIconic.$inject = ['Iconic', 'FoundationApi', '$compile'];
56 function zfIconic(iconic, foundationApi, $compile) {
59 template: '<img ng-transclude>',
75 var contents, assetPath;
82 function preLink(scope, element, attrs) {
85 // path set via attribute
86 assetPath = scope.iconDir;
89 assetPath = iconic.getAssetPath();
91 // make sure ends with /
92 if (assetPath.charAt(assetPath.length - 1) !== '/') {
97 attrs.$set('data-src', scope.dynSrc);
98 } else if (scope.dynIcon) {
99 attrs.$set('data-src', assetPath + scope.dynIcon + '.svg');
102 attrs.$set('data-src', assetPath + scope.icon + '.svg');
104 // To support expressions on data-src
105 attrs.$set('data-src', attrs.src);
109 // check if size already added as class
110 if (!element.hasClass('iconic-sm') && !element.hasClass('iconic-md') && !element.hasClass('iconic-lg')) {
112 switch (scope.size) {
114 iconicClass = 'iconic-sm';
117 iconicClass = 'iconic-md';
120 iconicClass = 'iconic-lg';
123 iconicClass = 'iconic-fluid';
125 element.addClass(iconicClass);
128 // save contents of un-inject html, to use for dynamic re-injection
129 contents = element[0].outerHTML;
132 function postLink(scope, element, attrs) {
133 var svgElement, ico = iconic.getAccess();
135 injectSvg(element[0]);
137 foundationApi.subscribe('resize', function () {
138 // only run update on current element
139 ico.update(element[0]);
142 // handle dynamic updating of src
144 scope.$watch('dynSrc', function (newVal, oldVal) {
145 if (newVal && newVal !== oldVal) {
146 reinjectSvg(scope.dynSrc);
150 // handle dynamic updating of icon
152 scope.$watch('dynIcon', function (newVal, oldVal) {
153 if (newVal && newVal !== oldVal) {
154 reinjectSvg(assetPath + scope.dynIcon + '.svg');
159 function reinjectSvg(newSrc) {
163 svgElement.append(angular.element(contents));
166 svgElement.attr('data-src', newSrc);
169 injectSvg(svgElement[0]);
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());