//соханим начальные настройки
var def = Object.assign({}, this.curSet);
// выберем все брейкпоинты из настроек
var query = [];
for (var key in def.media) {
query.push(def.media[key].point);
}
// фукция устанавливает настройки для запуска
function setNewSettigs(mql) {
var newSet = Object.assign({}, def);
for (var key in newSet.media) {
for (var prop in newSet.media[key]) {
if (newSet.media[key][prop] == mql.media) { // вот здесь в IE10+ всегда false
for (var set in newSet.media[key].settings) {
if (set in newSet) {
newSet[set] = newSet.media[key].settings[set];
}
}
}
}
}
return newSet;
}
// функция производит действия при совпадении медиа выражения
function run(mql) {
if (mql.matches) {
this.curSet = Object.assign({}, setNewSettigs(mql));
console.log(this.curSet)
this.start();
console.log(mql.media)
} else {
this.curSet = Object.assign({}, def);
this.start();
}
}
// создадим медиа запросы и повесим обработчики на них
query.forEach(function(item, i, arr) {
var mql = window.matchMedia(arr[i]);
mql.addListener(run.bind(this));
run.call(this, mql);
}, this);
Добрый день, под спойлером код, с помощью которого я хочу перезапускать инициализацию объекта с новыми параметрами ориентируясь на медиа запросы, используя machmedia.
Выглядит создание объекта следующим образом:
var obj = new Obj({
elem: document.querySelector('.CSSClass'),
count: 4,
// это объект с контрольными точками и свойствами которые нужно перезаписать
media: {
point1: {
// контрольная точка
point: 'only screen and (max-width: 768px)',
// перезаписываемые свойства
settings: {
count: 3,
}
},
point2: {
point: 'only screen and (max-width: 480px)',
settings: {
count: 1,
}
},
}
});
И казалось бы все прекрасно работает(за исключением одного нюанса, о нем ниже), но стоило открыть мне IE и увы.... Функция setNewSettigs из кода под спойлером не перезаписывает параметры настроечного объекта на значения из settigs кода выше, причем 9-ка отрабатывает нормально, а вот уже начиная с 10-ки такой казус. Вопрос: Почему так происходит. Кто поможет разобраться?
P.s. А теперь про нюанс о котором выше.
в настройках 2 контрольные токи, на 768рх и 480рх. Параметр count - отвечает за количество отображаемых блоков в текущем экране.
Так вот, когда идет уменьшение экрана все хорошо на 768 отображается 3 блока, на 480 1, но вот когда начинаешь увеличивать окно снова после 480, казалось бы нужно после прохождения порога в 481 отображать 3 блока, так это вписывается в диапазон 768. Но в скрипте стоит запуск с исходными настройками если нет совпадений медиазапросе, как можно сделать так, что бы скрипт запоминал что между выставленными контрольными точками должны применяться настройки большего экрана?
Обновление вопроса.
Потестив код, выяснилось, что не срабатывает условие newSet.media[key][prop] === mql.media и при переборе свойств выражение всегда возвращает false, в следствии чего и не перезаписываются свойства.... Почему себя так ведут иешки 10+ ? Баг или как же правильно сделать?
Для чего нужно это сравнение - когда идет обход объектов внутри параметра media в настройках, сраниваются значение его свойств со значением mql.media который пришел в функцию и если есть совпадение идет перезаписывание свойств из settings, того объекта в котором было совпадение.
mql - это экземпляр window.matchmedia, он создается в цикле по query (последний цикл в коде под спойлером). У него есть свойство media, в котором храниться строка медиа запроса.
newSet.media[key][prop] - здесь проход по свойствам объекта media, которые в свою очередь так же объекты в которых есть свойство point - так же строка для медиа запроса. Так вот как раз и проверяется на совпадение строки из mql.media со строкой из newSet.media[key].point
Ответ
Оказалось при задании настроек я писал:
media: {
point1: {
point: 'only screen and (max-width: 768px)',
settings: {
count: 3,
}
},
point2: {
point: 'only screen and (max-width: 480px)',
settings: {
count: 1,
}
},
}
При создании экземпляра window.matchmedia в его свойство media попадало: 'only screen and (max-width:480px)'. Т.е. между двоеточием и значением нету пробела. Поэтому - то иешки и говорили что они не равны.....
Причем этот пробел убирают только иешки 10+
'only screen and (max-width: 768px)' == 'only screen and (max-width:768px)' // false
Комментариев нет:
Отправить комментарий