-
Notifications
You must be signed in to change notification settings - Fork 0
/
object-media-queries.js
69 lines (51 loc) · 1.87 KB
/
object-media-queries.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// this script does assign different
// classes to single DOM objects, to
// achieve more flexibility while
// styling using stylesheets
// create function to assign object querie classes
function queryClasses (options = {}) {
// set default parameters
let defaults = {
selector: '.fluid',
className: 'size',
classSeperator: '-'
};
// overwrite default parameters if custom options are assigned
let actual = Object.assign({}, defaults, options)
// store querie objects in array
const objects = Array.from(document.querySelectorAll(actual.selector))
// create and validate class names
function validateClasses(target, size, w) {
// check if size is >= window.width
// if true, add className
target.classList.toggle( actual.className + actual.classSeperator + size, w >= size )
// console.log(target, size, w)
}
// create function to assign classes
function assignClasses(target) {
// get current object width
var w = target.offsetWidth;
// get all required sizes as array
const sizesArray = JSON.parse(target.dataset.sizes)
// loop through each size individually
var arrayLength = sizesArray.length;
for (var i = 0; i < arrayLength; i++) {
validateClasses(target, sizesArray[i], w)
}
}
// create an array of all object querie
for (var i = 0, len = objects.length; i < len; i++) {
assignClasses(objects[i]);
}
// log the finished process
// console.log('Classes have been assigned')
}
// wait for DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function(event) {
// assign classes on load
queryClasses()
// listen to resize events
window.onresize = function(event) {
queryClasses()
}
})