root / drupal7 / sites / all / themes / corolla / scripts / media_queries.js @ 87dbc3bf
| 1 |
/**
|
|---|---|
| 2 |
* @file
|
| 3 |
* Fire callbacks for media query breakpoints
|
| 4 |
*
|
| 5 |
* To use this file enable the OnMediaQuery.js polyfill in your subthemes
|
| 6 |
* appearance settings - this will load the required plugin and this file.
|
| 7 |
*
|
| 8 |
* This allows you to write context (media query) specific JS without hard
|
| 9 |
* coding the media queries, aka like matchMedia. Each context matches the
|
| 10 |
* media queries you set in theme settings (by adding the font-family
|
| 11 |
* declarations to the responsive layout CSS).
|
| 12 |
*
|
| 13 |
* SEE: https://github.com/JoshBarr/js-media-queries (really, go look, lots of
|
| 14 |
* useful documentation available).
|
| 15 |
*
|
| 16 |
* IMPORTANT: do not rename or move this file, or change the directory name!
|
| 17 |
*/
|
| 18 |
var queries = [
|
| 19 |
// README! The following are examples, remove what you don't need!
|
| 20 |
|
| 21 |
|
| 22 |
// Smartphone
|
| 23 |
{
|
| 24 |
context: ['smartphone_portrait', 'smartphone_landscape'], |
| 25 |
call_in_each_context: false, |
| 26 |
callback: function() { |
| 27 |
// Debug
|
| 28 |
console.log('smartphone');
|
| 29 |
} |
| 30 |
}, |
| 31 |
// portrait only
|
| 32 |
{
|
| 33 |
context: 'smartphone_portrait', |
| 34 |
callback: function() { |
| 35 |
// Debug
|
| 36 |
console.log('smartphone portrait');
|
| 37 |
} |
| 38 |
}, |
| 39 |
// landscape only
|
| 40 |
{
|
| 41 |
context: 'smartphone_landscape', |
| 42 |
callback: function() { |
| 43 |
// Debug
|
| 44 |
console.log('smartphone_landscape ');
|
| 45 |
} |
| 46 |
}, |
| 47 |
|
| 48 |
|
| 49 |
// Tablet
|
| 50 |
{
|
| 51 |
context: ['tablet_portrait', 'tablet_landscape'], |
| 52 |
call_in_each_context: false, |
| 53 |
callback: function() { |
| 54 |
// Debug
|
| 55 |
console.log('tablet');
|
| 56 |
} |
| 57 |
}, |
| 58 |
// portrait only
|
| 59 |
{
|
| 60 |
context: 'tablet_portrait', |
| 61 |
callback: function() { |
| 62 |
// Debug
|
| 63 |
console.log('tablet_portrait');
|
| 64 |
} |
| 65 |
}, |
| 66 |
// landscape only
|
| 67 |
{
|
| 68 |
context: 'tablet_landscape', |
| 69 |
callback: function() { |
| 70 |
// Debug
|
| 71 |
console.log('tablet_landscape');
|
| 72 |
} |
| 73 |
}, |
| 74 |
|
| 75 |
|
| 76 |
// Standard desktop context
|
| 77 |
{
|
| 78 |
context: 'standard', |
| 79 |
callback: function() { |
| 80 |
// Debug
|
| 81 |
console.log('standard desktop');
|
| 82 |
} |
| 83 |
}, |
| 84 |
]; |
| 85 |
|
| 86 |
// Go!
|
| 87 |
MQ.init(queries); |