afm-client/bower_components/foundation-apps/js/angular/services/foundation.mediaquery.js

   1 (function() {
   2   'use strict';
   3
   4   angular.module('foundation.mediaquery', ['foundation.core'])
   5     .run(mqInitRun)
   6     .factory('FoundationMQInit', FoundationMQInit)
   7     .factory('mqHelpers', mqHelpers)
   8     .service('FoundationMQ', FoundationMQ)
   9   ;
  10
  11   mqInitRun.$inject = ['FoundationMQInit'];
  12
  13   function mqInitRun(mqInit) {
  14     mqInit.init();
  15   }
  16
  17   FoundationMQInit.$inject = ['mqHelpers', 'FoundationApi', 'Utils'];
  18
  19   function FoundationMQInit(helpers, foundationApi, u){
  20     var factory = {};
  21     var namedQueries = {
  22       'default' : 'only screen',
  23       landscape : 'only screen and (orientation: landscape)',
  24       portrait : 'only screen and (orientation: portrait)',
  25       retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' +
  26         'only screen and (min--moz-device-pixel-ratio: 2),' +
  27         'only screen and (-o-min-device-pixel-ratio: 2/1),' +
  28         'only screen and (min-device-pixel-ratio: 2),' +
  29         'only screen and (min-resolution: 192dpi),' +
  30         'only screen and (min-resolution: 2dppx)'
  31     };
  32
  33     factory.init = init;
  34
  35     return factory;
  36
  37     function init() {
  38       var mediaQueries;
  39       var extractedMedia;
  40       var mediaObject;
  41
  42       helpers.headerHelper(['foundation-mq']);
  43       extractedMedia = helpers.getStyle('.foundation-mq', 'font-family');
  44
  45       mediaQueries = helpers.parseStyleToObject((extractedMedia));
  46
  47       for(var key in mediaQueries) {
  48         mediaQueries[key] = 'only screen and (min-width: ' + mediaQueries[key].replace('rem', 'em') + ')';
  49       }
  50
  51
  52       foundationApi.modifySettings({
  53         mediaQueries: angular.extend(mediaQueries, namedQueries)
  54       });
  55
  56       window.addEventListener('resize', u.throttle(function() {
  57         foundationApi.publish('resize', 'window resized');
  58       }, 50));
  59
  60     }
  61   }
  62
  63
  64   function mqHelpers() {
  65     var factory = {};
  66
  67     factory.headerHelper = headerHelper;
  68     factory.getStyle = getStyle;
  69     factory.parseStyleToObject = parseStyleToObject;
  70
  71     return factory;
  72
  73     function headerHelper(classArray) {
  74       var i = classArray.length;
  75       var head = angular.element(document.querySelectorAll('head'));
  76
  77       while(i--) {
  78         head.append('<meta class="' + classArray[i] + '" />');
  79       }
  80
  81       return;
  82     }
  83
  84     function getStyle(selector, styleName) {
  85       var elem  = document.querySelectorAll(selector)[0];
  86       var style = window.getComputedStyle(elem, null);
  87
  88       return style.getPropertyValue('font-family');
  89     }
  90
  91       // https://github.com/sindresorhus/query-string
  92     function parseStyleToObject(str) {
  93       var styleObject = {};
  94
  95       if (typeof str !== 'string') {
  96         return styleObject;
  97       }
  98
  99       str = str.trim().slice(1, -1); // browsers re-quote string style values
 100
 101       if (!str) {
 102         return styleObject;
 103       }
 104
 105       styleObject = str.split('&').reduce(function(ret, param) {
 106         var parts = param.replace(/\+/g, ' ').split('=');
 107         var key = parts[0];
 108         var val = parts[1];
 109         key = decodeURIComponent(key);
 110
 111         // missing `=` should be `null`:
 112         // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
 113         val = val === undefined ? null : decodeURIComponent(val);
 114
 115         if (!ret.hasOwnProperty(key)) {
 116           ret[key] = val;
 117         } else if (Array.isArray(ret[key])) {
 118           ret[key].push(val);
 119         } else {
 120           ret[key] = [ret[key], val];
 121         }
 122         return ret;
 123       }, {});
 124
 125       return styleObject;
 126     }
 127   }
 128
 129   FoundationMQ.$inject = ['FoundationApi'];
 130
 131   function FoundationMQ(foundationApi) {
 132     var service = [];
 133
 134     service.getMediaQueries = getMediaQueries;
 135     service.match = match;
 136     service.collectScenariosFromElement = collectScenariosFromElement;
 137
 138     return service;
 139
 140     function getMediaQueries() {
 141       return foundationApi.getSettings().mediaQueries;
 142     }
 143
 144     function match(scenarios) {
 145       var count   = scenarios.length;
 146       var queries = service.getMediaQueries();
 147       var matches = [];
 148
 149       if (count > 0) {
 150         while (count--) {
 151           var mq;
 152           var rule = scenarios[count].media;
 153
 154           if (queries[rule]) {
 155             mq = matchMedia(queries[rule]);
 156           } else {
 157             mq = matchMedia(rule);
 158           }
 159
 160           if (mq.matches) {
 161             matches.push({ ind: count});
 162           }
 163         }
 164       }
 165
 166       return matches;
 167     }
 168
 169     // Collects a scenario object and templates from element
 170     function collectScenariosFromElement(parentElement) {
 171       var scenarios = [];
 172       var templates = [];
 173
 174       var elements = parentElement.children();
 175       var i        = 0;
 176
 177       angular.forEach(elements, function(el) {
 178         var elem = angular.element(el);
 179
 180
 181         //if no source or no html, capture element itself
 182         if (!elem.attr('src') || !elem.attr('src').match(/.html$/)) {
 183           templates[i] = elem;
 184           scenarios[i] = { media: elem.attr('media'), templ: i };
 185         } else {
 186           scenarios[i] = { media: elem.attr('media'), src: elem.attr('src') };
 187         }
 188
 189         i++;
 190       });
 191
 192       return {
 193         scenarios: scenarios,
 194         templates: templates
 195       };
 196     }
 197   }
 198 })();