X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fapp-framework-demo.git;a=blobdiff_plain;f=afb-client%2Fbower_components%2Ffoundation-apps%2Fjs%2Fangular%2Fservices%2Ffoundation.mediaquery.js;fp=afb-client%2Fbower_components%2Ffoundation-apps%2Fjs%2Fangular%2Fservices%2Ffoundation.mediaquery.js;h=12715f6599d0e068bd20737ef8a7a533a01f7cbd;hp=0000000000000000000000000000000000000000;hb=5b1e6cc132f44262a873fa8296a2a3e1017b0278;hpb=f7d2f9ac4168ee5064580c666d508667a73cefc0 diff --git a/afb-client/bower_components/foundation-apps/js/angular/services/foundation.mediaquery.js b/afb-client/bower_components/foundation-apps/js/angular/services/foundation.mediaquery.js new file mode 100644 index 0000000..12715f6 --- /dev/null +++ b/afb-client/bower_components/foundation-apps/js/angular/services/foundation.mediaquery.js @@ -0,0 +1,198 @@ +(function() { + 'use strict'; + + angular.module('foundation.mediaquery', ['foundation.core']) + .run(mqInitRun) + .factory('FoundationMQInit', FoundationMQInit) + .factory('mqHelpers', mqHelpers) + .service('FoundationMQ', FoundationMQ) + ; + + mqInitRun.$inject = ['FoundationMQInit']; + + function mqInitRun(mqInit) { + mqInit.init(); + } + + FoundationMQInit.$inject = ['mqHelpers', 'FoundationApi', 'Utils']; + + function FoundationMQInit(helpers, foundationApi, u){ + var factory = {}; + var namedQueries = { + 'default' : 'only screen', + landscape : 'only screen and (orientation: landscape)', + portrait : 'only screen and (orientation: portrait)', + retina : 'only screen and (-webkit-min-device-pixel-ratio: 2),' + + 'only screen and (min--moz-device-pixel-ratio: 2),' + + 'only screen and (-o-min-device-pixel-ratio: 2/1),' + + 'only screen and (min-device-pixel-ratio: 2),' + + 'only screen and (min-resolution: 192dpi),' + + 'only screen and (min-resolution: 2dppx)' + }; + + factory.init = init; + + return factory; + + function init() { + var mediaQueries; + var extractedMedia; + var mediaObject; + + helpers.headerHelper(['foundation-mq']); + extractedMedia = helpers.getStyle('.foundation-mq', 'font-family'); + + mediaQueries = helpers.parseStyleToObject((extractedMedia)); + + for(var key in mediaQueries) { + mediaQueries[key] = 'only screen and (min-width: ' + mediaQueries[key].replace('rem', 'em') + ')'; + } + + + foundationApi.modifySettings({ + mediaQueries: angular.extend(mediaQueries, namedQueries) + }); + + window.addEventListener('resize', u.throttle(function() { + foundationApi.publish('resize', 'window resized'); + }, 50)); + + } + } + + + function mqHelpers() { + var factory = {}; + + factory.headerHelper = headerHelper; + factory.getStyle = getStyle; + factory.parseStyleToObject = parseStyleToObject; + + return factory; + + function headerHelper(classArray) { + var i = classArray.length; + var head = angular.element(document.querySelectorAll('head')); + + while(i--) { + head.append(''); + } + + return; + } + + function getStyle(selector, styleName) { + var elem = document.querySelectorAll(selector)[0]; + var style = window.getComputedStyle(elem, null); + + return style.getPropertyValue('font-family'); + } + + // https://github.com/sindresorhus/query-string + function parseStyleToObject(str) { + var styleObject = {}; + + if (typeof str !== 'string') { + return styleObject; + } + + str = str.trim().slice(1, -1); // browsers re-quote string style values + + if (!str) { + return styleObject; + } + + styleObject = str.split('&').reduce(function(ret, param) { + var parts = param.replace(/\+/g, ' ').split('='); + var key = parts[0]; + var val = parts[1]; + key = decodeURIComponent(key); + + // missing `=` should be `null`: + // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters + val = val === undefined ? null : decodeURIComponent(val); + + if (!ret.hasOwnProperty(key)) { + ret[key] = val; + } else if (Array.isArray(ret[key])) { + ret[key].push(val); + } else { + ret[key] = [ret[key], val]; + } + return ret; + }, {}); + + return styleObject; + } + } + + FoundationMQ.$inject = ['FoundationApi']; + + function FoundationMQ(foundationApi) { + var service = []; + + service.getMediaQueries = getMediaQueries; + service.match = match; + service.collectScenariosFromElement = collectScenariosFromElement; + + return service; + + function getMediaQueries() { + return foundationApi.getSettings().mediaQueries; + } + + function match(scenarios) { + var count = scenarios.length; + var queries = service.getMediaQueries(); + var matches = []; + + if (count > 0) { + while (count--) { + var mq; + var rule = scenarios[count].media; + + if (queries[rule]) { + mq = matchMedia(queries[rule]); + } else { + mq = matchMedia(rule); + } + + if (mq.matches) { + matches.push({ ind: count}); + } + } + } + + return matches; + } + + // Collects a scenario object and templates from element + function collectScenariosFromElement(parentElement) { + var scenarios = []; + var templates = []; + + var elements = parentElement.children(); + var i = 0; + + angular.forEach(elements, function(el) { + var elem = angular.element(el); + + + //if no source or no html, capture element itself + if (!elem.attr('src') || !elem.attr('src').match(/.html$/)) { + templates[i] = elem; + scenarios[i] = { media: elem.attr('media'), templ: i }; + } else { + scenarios[i] = { media: elem.attr('media'), src: elem.attr('src') }; + } + + i++; + }); + + return { + scenarios: scenarios, + templates: templates + }; + } + } +})();