4 angular.module('foundation.mediaquery', ['foundation.core'])
6 .factory('FoundationMQInit', FoundationMQInit)
7 .factory('mqHelpers', mqHelpers)
8 .service('FoundationMQ', FoundationMQ)
11 mqInitRun.$inject = ['FoundationMQInit'];
13 function mqInitRun(mqInit) {
17 FoundationMQInit.$inject = ['mqHelpers', 'FoundationApi', 'Utils'];
19 function FoundationMQInit(helpers, foundationApi, u){
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)'
42 helpers.headerHelper(['foundation-mq']);
43 extractedMedia = helpers.getStyle('.foundation-mq', 'font-family');
45 mediaQueries = helpers.parseStyleToObject((extractedMedia));
47 for(var key in mediaQueries) {
48 mediaQueries[key] = 'only screen and (min-width: ' + mediaQueries[key].replace('rem', 'em') + ')';
52 foundationApi.modifySettings({
53 mediaQueries: angular.extend(mediaQueries, namedQueries)
56 window.addEventListener('resize', u.throttle(function() {
57 foundationApi.publish('resize', 'window resized');
64 function mqHelpers() {
67 factory.headerHelper = headerHelper;
68 factory.getStyle = getStyle;
69 factory.parseStyleToObject = parseStyleToObject;
73 function headerHelper(classArray) {
74 var i = classArray.length;
75 var head = angular.element(document.querySelectorAll('head'));
78 head.append('<meta class="' + classArray[i] + '" />');
84 function getStyle(selector, styleName) {
85 var elem = document.querySelectorAll(selector)[0];
86 var style = window.getComputedStyle(elem, null);
88 return style.getPropertyValue('font-family');
91 // https://github.com/sindresorhus/query-string
92 function parseStyleToObject(str) {
95 if (typeof str !== 'string') {
99 str = str.trim().slice(1, -1); // browsers re-quote string style values
105 styleObject = str.split('&').reduce(function(ret, param) {
106 var parts = param.replace(/\+/g, ' ').split('=');
109 key = decodeURIComponent(key);
111 // missing `=` should be `null`:
112 // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
113 val = val === undefined ? null : decodeURIComponent(val);
115 if (!ret.hasOwnProperty(key)) {
117 } else if (Array.isArray(ret[key])) {
120 ret[key] = [ret[key], val];
129 FoundationMQ.$inject = ['FoundationApi'];
131 function FoundationMQ(foundationApi) {
134 service.getMediaQueries = getMediaQueries;
135 service.match = match;
136 service.collectScenariosFromElement = collectScenariosFromElement;
140 function getMediaQueries() {
141 return foundationApi.getSettings().mediaQueries;
144 function match(scenarios) {
145 var count = scenarios.length;
146 var queries = service.getMediaQueries();
152 var rule = scenarios[count].media;
155 mq = matchMedia(queries[rule]);
157 mq = matchMedia(rule);
161 matches.push({ ind: count});
169 // Collects a scenario object and templates from element
170 function collectScenariosFromElement(parentElement) {
174 var elements = parentElement.children();
177 angular.forEach(elements, function(el) {
178 var elem = angular.element(el);
181 //if no source or no html, capture element itself
182 if (!elem.attr('src') || !elem.attr('src').match(/.html$/)) {
184 scenarios[i] = { media: elem.attr('media'), templ: i };
186 scenarios[i] = { media: elem.attr('media'), src: elem.attr('src') };
193 scenarios: scenarios,