4 angular.module('foundation.interchange', ['foundation.core', 'foundation.mediaquery'])
5 .directive('zfInterchange', zfInterchange)
8 zfInterchange.$inject = [ '$compile', '$http', '$templateCache', 'FoundationApi', 'FoundationMQ'];
10 function zfInterchange($compile, $http, $templateCache, foundationApi, foundationMQ) {
14 transclude: 'element',
19 template: '<div></div>',
25 function link(scope, element, attrs, ctrl, transclude) {
26 var childScope, current, scenarios, innerTemplates;
28 var globalQueries = foundationMQ.getMediaQueries();
31 foundationApi.subscribe('resize', function(msg) {
32 transclude(function(clone, newScope) {
33 if(!scenarios || !innerTemplates) {
34 collectInformation(clone);
37 var ruleMatches = foundationMQ.match(scenarios);
38 var scenario = ruleMatches.length === 0 ? null : scenarios[ruleMatches[0].ind];
40 //this could use some love
41 if(scenario && checkScenario(scenario)) {
45 childScope.$destroy();
49 if(typeof scenario.templ !== 'undefined') {
50 childScope = newScope;
53 var tmp = document.createElement('div');
54 tmp.appendChild(innerTemplates[scenario.templ][0]);
56 element.html(tmp.innerHTML);
57 $compile(element.contents())(childScope);
60 var loader = templateLoader(scenario.src);
61 loader.success(function(html) {
62 childScope = newScope;
65 $compile(element.contents())(childScope);
75 foundationApi.publish('resize', 'initial resize');
77 function templateLoader(templateUrl) {
78 return $http.get(templateUrl, {cache: $templateCache});
81 function collectInformation(el) {
82 var data = foundationMQ.collectScenariosFromElement(el);
84 scenarios = data.scenarios;
85 innerTemplates = data.templates;
88 function checkScenario(scenario) {
89 return !current || current !== scenario;