Включение адаптивных стилей скриптом в теме на Drupal 8

Главные вкладки

Аватар пользователя Гарик Гарик 18 марта 2017 в 17:03

Привет!

Пытаюсь натянуть готовую тему на Друпал 8.

Столкнулся с проблемой. Скрипт должен адаптивно переопределять стили. Скрип Друпалом цепляется, но адаптивного переопределение стилей не происходит:

(function($){skel.init({reset:'full',breakpoints:{global:{href:'css/style.css',containers:1400,grid:{gutters:['2em',0]}},xlarge:{media:'(max-width: 1680px)',href:'css/style-xlarge.css',containers:1200},large:{media:'(max-width: 1280px)',href:'css/style-large.css',containers:960,grid:{gutters:['1.5em',0]},viewport:{scalable:false}},medium:{media:'(max-width: 980px)',href:'css/style-medium.css',containers:'90%'},small:{media:'(max-width: 736px)',href:'css/style-small.css',containers:'90%!'},xsmall:{media:'(max-width: 480px)',href:'css/style-xsmall.css'}},plugins:{layers:{config:{mode:'transform'},navPanel:{animation:'pushY',breakpoints:'medium',clickToHide:true,hidden:true,html:'<div data-action="navList" data-args="nav"></div>',maxHeight:'65%',orientation:'vertical',position:'top-left',side:'top',swipeToHide:false,width:'100%'},navButton:{breakpoints:'medium',height:'4em',html:'<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span>',position:'top-right',side:'top',width:'6em'}}}});$(function(){var $window=$(window),$body=$('body');$body.addClass('is-loading');$window.on('load',function(){window.setTimeout(function(){$body.removeClass('is-loading');},0);});var $form=$('form');if($form.length>0){if(skel.vars.IEVersion<10){$.fn.n33_formerize=function(){var _fakes=new Array(),_form=$(this);_form.find('input[type=text],textarea').each(function(){var e=$(this);if(e.val()==''||e.val()==e.attr('placeholder')){e.addClass('formerize-placeholder');e.val(e.attr('placeholder'));}}).blur(function(){var e=$(this);if(e.attr('name').match(/_fakeformerizefield$/))return;if(e.val()==''){e.addClass('formerize-placeholder');e.val(e.attr('placeholder'));}}).focus(function(){var e=$(this);if(e.attr('name').match(/_fakeformerizefield$/))return;if(e.val()==e.attr('placeholder')){e.removeClass('formerize-placeholder');e.val('');}});_form.find('input[type=password]').each(function(){var e=$(this);var x=$($('<div>').append(e.clone()).remove().html().replace(/type="password"/i,'type="text"').replace(/type=password/i,'type=text'));if(e.attr('id')!='')x.attr('id',e.attr('id')+'_fakeformerizefield');if(e.attr('name')!='')x.attr('name',e.attr('name')+'_fakeformerizefield');x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e);if(e.val()=='')e.hide();else x.hide();e.blur(function(event){event.preventDefault();var e=$(this);var x=e.parent().find('input[name='+ e.attr('name')+'_fakeformerizefield]');if(e.val()==''){e.hide();x.show();}});x.focus(function(event){event.preventDefault();var x=$(this);var e=x.parent().find('input[name='+ x.attr('name').replace('_fakeformerizefield','')+']');x.hide();e.show().focus();});x.keypress(function(event){event.preventDefault();x.val('');});});_form.submit(function(){$(this).find('input[type=text],input[type=password],textarea').each(function(event){var e=$(this);if(e.attr('name').match(/_fakeformerizefield$/))e.attr('name','');if(e.val()==e.attr('placeholder')){e.removeClass('formerize-placeholder');e.val('');}});}).bind("reset",function(event){event.preventDefault();$(this).find('select').val($('option:first').val());$(this).find('input,textarea').each(function(){var e=$(this);var x;e.removeClass('formerize-placeholder');switch(this.type){case'submit':case'reset':break;case'password':e.val(e.attr('defaultValue'));x=e.parent().find('input[name='+ e.attr('name')+'_fakeformerizefield]');if(e.val()==''){e.hide();x.show();}else{e.show();x.hide();}break;case'checkbox':case'radio':e.attr('checked',e.attr('defaultValue'));break;case'text':case'textarea':e.val(e.attr('defaultValue'));if(e.val()==''){e.addClass('formerize-placeholder');e.val(e.attr('placeholder'));}break;default:e.val(e.attr('defaultValue'));break;}});window.setTimeout(function(){for(x in _fakes)_fakes[x].trigger('formerize_sync');},10);});return _form;};$form.n33_formerize();}}
$('#nav > ul').dropotron({alignment:'center',hideDelay:350});if(skel.vars.IEVersion<9){$('.wrapper.split .secondary > section').each(function(i){$(this).addClass((i+ 1)%2==0?'even':'odd');});}});})(jQuery);

Если все стили включить в libraries.yml, то просто на любую ширину экрана включается какой-нибудь один стиль:

global-styling:
  version: VERSION
  css:
    theme:
      css/skel.css: {}
      css/style-xlarge.css: {}
      css/style-large.css: {}
      css/style-medium.css: {}
      css/style-small.css: {}
      css/style-xsmall.css: {}
      css/style.css: {}
  js:
      js/jquery.min.js: {}
      js/jquery.dropotron.min.js: {}
      js/skel.min.js: {}
      js/skel-layers.min.js: {}
      js/init.js: {}

Пути к стилям в скрипте менял на themes/моятема/css -- не помогает.

Есть идеи?

Комментарии

Аватар пользователя Гарик Гарик 20 марта 2017 в 19:43

Всё-таки дело, похоже, было в путях и кэше. На главной всё заработало как надо.

Но странно, на остальных -- нет. Хотя пробовал делать html.html.twig и page.html.twig полностью идентичными html--front.html.twig и page--front.html.twig.

Аватар пользователя Гарик Гарик 21 марта 2017 в 14:21

Решено. Пути и кэш. Скрипт почему-то сам не обновляется при очистке кэша, надо открыть в браузере и обновить. Поменял themes/моятема/css на /themes/моятема/css -- заработали все страницы.