mirror of
https://github.com/sourcey/spectacle.git
synced 2024-09-11 05:25:36 +03:00
235 lines
6.2 KiB
JavaScript
235 lines
6.2 KiB
JavaScript
'use strict';
|
|
|
|
import $ from 'jquery';
|
|
|
|
// Default set of media queries
|
|
const defaultQueries = {
|
|
'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)'
|
|
};
|
|
|
|
|
|
// matchMedia() polyfill - Test a CSS media type/query in JS.
|
|
// Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license
|
|
let matchMedia = window.matchMedia || (function() {
|
|
'use strict';
|
|
|
|
// For browsers that support matchMedium api such as IE 9 and webkit
|
|
var styleMedia = (window.styleMedia || window.media);
|
|
|
|
// For those that don't support matchMedium
|
|
if (!styleMedia) {
|
|
var style = document.createElement('style'),
|
|
script = document.getElementsByTagName('script')[0],
|
|
info = null;
|
|
|
|
style.type = 'text/css';
|
|
style.id = 'matchmediajs-test';
|
|
|
|
script && script.parentNode && script.parentNode.insertBefore(style, script);
|
|
|
|
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
|
|
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
|
|
|
|
styleMedia = {
|
|
matchMedium(media) {
|
|
var text = `@media ${media}{ #matchmediajs-test { width: 1px; } }`;
|
|
|
|
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
|
|
if (style.styleSheet) {
|
|
style.styleSheet.cssText = text;
|
|
} else {
|
|
style.textContent = text;
|
|
}
|
|
|
|
// Test if media query is true or false
|
|
return info.width === '1px';
|
|
}
|
|
}
|
|
}
|
|
|
|
return function(media) {
|
|
return {
|
|
matches: styleMedia.matchMedium(media || 'all'),
|
|
media: media || 'all'
|
|
};
|
|
}
|
|
})();
|
|
|
|
var MediaQuery = {
|
|
queries: [],
|
|
|
|
current: '',
|
|
|
|
/**
|
|
* Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
|
|
* @function
|
|
* @private
|
|
*/
|
|
_init() {
|
|
var self = this;
|
|
var $meta = $('meta.foundation-mq');
|
|
if(!$meta.length){
|
|
$('<meta class="foundation-mq">').appendTo(document.head);
|
|
}
|
|
|
|
var extractedStyles = $('.foundation-mq').css('font-family');
|
|
var namedQueries;
|
|
|
|
namedQueries = parseStyleToObject(extractedStyles);
|
|
|
|
for (var key in namedQueries) {
|
|
if(namedQueries.hasOwnProperty(key)) {
|
|
self.queries.push({
|
|
name: key,
|
|
value: `only screen and (min-width: ${namedQueries[key]})`
|
|
});
|
|
}
|
|
}
|
|
|
|
this.current = this._getCurrentSize();
|
|
|
|
this._watcher();
|
|
},
|
|
|
|
/**
|
|
* Checks if the screen is at least as wide as a breakpoint.
|
|
* @function
|
|
* @param {String} size - Name of the breakpoint to check.
|
|
* @returns {Boolean} `true` if the breakpoint matches, `false` if it's smaller.
|
|
*/
|
|
atLeast(size) {
|
|
var query = this.get(size);
|
|
|
|
if (query) {
|
|
return matchMedia(query).matches;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Checks if the screen matches to a breakpoint.
|
|
* @function
|
|
* @param {String} size - Name of the breakpoint to check, either 'small only' or 'small'. Omitting 'only' falls back to using atLeast() method.
|
|
* @returns {Boolean} `true` if the breakpoint matches, `false` if it does not.
|
|
*/
|
|
is(size) {
|
|
size = size.trim().split(' ');
|
|
if(size.length > 1 && size[1] === 'only') {
|
|
if(size[0] === this._getCurrentSize()) return true;
|
|
} else {
|
|
return this.atLeast(size[0]);
|
|
}
|
|
return false;
|
|
},
|
|
|
|
/**
|
|
* Gets the media query of a breakpoint.
|
|
* @function
|
|
* @param {String} size - Name of the breakpoint to get.
|
|
* @returns {String|null} - The media query of the breakpoint, or `null` if the breakpoint doesn't exist.
|
|
*/
|
|
get(size) {
|
|
for (var i in this.queries) {
|
|
if(this.queries.hasOwnProperty(i)) {
|
|
var query = this.queries[i];
|
|
if (size === query.name) return query.value;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* Gets the current breakpoint name by testing every breakpoint and returning the last one to match (the biggest one).
|
|
* @function
|
|
* @private
|
|
* @returns {String} Name of the current breakpoint.
|
|
*/
|
|
_getCurrentSize() {
|
|
var matched;
|
|
|
|
for (var i = 0; i < this.queries.length; i++) {
|
|
var query = this.queries[i];
|
|
|
|
if (matchMedia(query.value).matches) {
|
|
matched = query;
|
|
}
|
|
}
|
|
|
|
if (typeof matched === 'object') {
|
|
return matched.name;
|
|
} else {
|
|
return matched;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Activates the breakpoint watcher, which fires an event on the window whenever the breakpoint changes.
|
|
* @function
|
|
* @private
|
|
*/
|
|
_watcher() {
|
|
$(window).off('resize.zf.mediaquery').on('resize.zf.mediaquery', () => {
|
|
var newSize = this._getCurrentSize(), currentSize = this.current;
|
|
|
|
if (newSize !== currentSize) {
|
|
// Change the current media query
|
|
this.current = newSize;
|
|
|
|
// Broadcast the media query change on the window
|
|
$(window).trigger('changed.zf.mediaquery', [newSize, currentSize]);
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
|
|
|
|
// Thank you: 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;
|
|
}
|
|
|
|
export {MediaQuery};
|