Updates to iconic directive to broadcast when svg injection is completed

Author: soumak77

js/angular/app.js

@@ -4,6 +4,7 @@
   angular.module('application', [
     'ui.router',
     'ngAnimate',
+    'ngSVGAttributes',
 
     //foundation
     'foundation',
@@ -20,15 +21,22 @@
     $urlProvider.otherwise('/');
 
     $locationProvider.html5Mode({
-      enabled:false,
+      enabled:true,
       requireBase: false
     });
-
-    $locationProvider.hashPrefix('!');
   }
+  
+  run.$inject = ['$rootScope', '$location', '$compile'];
 
-  function run() {
+  function run($rootScope, $location, $compile) {
     FastClick.attach(document.body);
+    
+    if ($location.$$html5) {
+      $rootScope.$on('$zfIconicInjected', function(event, injectedElem) {
+        var angElem = angular.element(injectedElem);
+        $compile(angElem.contents())(angElem.scope());
+      });
+    }
   }
 
 })();

js/angular/components/iconic/iconic.js

@@ -21,9 +21,9 @@
     }
   }
 
-  zfIconic.$inject = ['Iconic', 'FoundationApi']
+  zfIconic.$inject = ['Iconic', 'FoundationApi', '$location']
 
-  function zfIconic(iconic, foundationApi) {
+  function zfIconic(iconic, foundationApi, $location) {
     var directive = {
       restrict: 'A',
       template: '<img ng-transclude>',
@@ -52,7 +52,11 @@
           iAttrs.$set('data-src', scope.dynSrc);
         } else {
           // To support expressions on data-src
-          iAttrs.$set('data-src', assetPath + scope.icon + '.svg');
+          if (scope.icon) {
+            iAttrs.$set('data-src', assetPath + scope.icon + '.svg');
+          } else {
+            iAttrs.$set('data-src', iAttrs.src);
+          }
         };
 
         var iconicClass;
@@ -75,7 +79,13 @@
       function postLink(scope, element, attrs) {
         var ico = iconic.getAccess();
 
-        ico.inject(element[0]);
+        ico.inject(element[0], {
+          each: function(injectedElem) {
+            if ($location.$$html5) {
+              scope.$emit('$zfIconicInjected', injectedElem);
+            }
+          }
+        });
 
         foundationApi.subscribe('resize', function() {
           ico.update();

js/angular/vendor/svgDirs.js

@@ -0,0 +1,101 @@
+'use strict';
+
+(function(){
+  var svgDirectives = {};
+
+  angular.forEach([
+      'clipPath',
+      'colorProfile',
+      'src',
+      'cursor',
+      'fill',
+      'filter',
+      'marker',
+      'markerStart',
+      'markerMid',
+      'markerEnd',
+      'mask',
+      'stroke'
+    ],
+    function(attr) {
+      svgDirectives[attr] = [
+          '$rootScope',
+          '$location',
+          '$interpolate',
+          '$sniffer',
+          'urlResolve',
+          'computeSVGAttrValue',
+          'svgAttrExpressions',
+          function(
+              $rootScope,
+              $location,
+              $interpolate,
+              $sniffer,
+              urlResolve,
+              computeSVGAttrValue,
+              svgAttrExpressions) {
+            return {
+              restrict: 'A',
+              link: function(scope, element, attrs) {
+                var initialUrl;
+
+                //Only apply to svg elements to avoid unnecessary observing
+                //Check that is in html5Mode and that history is supported
+                if ((!svgAttrExpressions.SVG_ELEMENT.test(element[0] &&
+                    element[0].toString())) ||
+                  !$location.$$html5 ||
+                  !$sniffer.history) return;
+
+                //Assumes no expressions, since svg is unforgiving of xml violations
+                initialUrl = attrs[attr];
+                attrs.$observe(attr, updateValue);
+                $rootScope.$on('$locationChangeSuccess', updateValue);
+
+                function updateValue () {
+                  var newVal = computeSVGAttrValue(initialUrl);
+                  //Prevent recursive updating
+                  if (newVal && attrs[attr] !== newVal) attrs.$set(attr, newVal);
+                }
+              }
+            };
+          }];
+  });
+
+  angular.module('ngSVGAttributes', []).
+    factory('urlResolve', [function() {
+      //Duplicate of urlResolve & urlParsingNode in angular core
+      var urlParsingNode = document.createElement('a');
+      return function urlResolve(url) {
+        urlParsingNode.setAttribute('href', url);
+        return urlParsingNode;
+      };
+    }]).
+    value('svgAttrExpressions', {
+      FUNC_URI: /^url\((.*)\)$/,
+      SVG_ELEMENT: /SVG[a-zA-Z]*Element/,
+      HASH_PART: /#.*/
+    }).
+    factory('computeSVGAttrValue', [
+                '$location', '$sniffer', 'svgAttrExpressions', 'urlResolve',
+        function($location,   $sniffer,   svgAttrExpressions,   urlResolve) {
+          return function computeSVGAttrValue(url) {
+            var match, fullUrl;
+            if (match = svgAttrExpressions.FUNC_URI.exec(url)) {
+              //hash in html5Mode, forces to be relative to current url instead of base
+              if (match[1].indexOf('#') === 0) {
+                fullUrl = $location.absUrl().
+                  replace(svgAttrExpressions.HASH_PART, '') +
+                  match[1];
+              }
+              //Presumably links to external SVG document
+              else {
+                fullUrl = urlResolve(match[1]);
+              }
+            }
+            return fullUrl ? 'url(' + fullUrl + ')' : null;
+          };
+        }
+      ]
+    ).
+    directive(svgDirectives);
+}());