с помощью turbolinks в меню Responsive отображается мобильная страница при загрузке страницы и рабочий стол при последующих загрузках turbolink - PullRequest
Новая
       22

с помощью turbolinks в меню Responsive отображается мобильная страница при загрузке страницы и рабочий стол при последующих загрузках turbolink

0 голосов
/ 19 июня 2019

Адаптивное меню Foundation 6 показывает мобильную версию при начальной загрузке / обновлении страницы и не является "отзывчивым".Когда Turbolinks загружает страницу, появляется соответствующее меню, и оно «отзывчиво».«отзывчивый» означает, что Javascript переключается между меню.

Это очень странно, потому что обычная проблема Turbolinks противоположна, когда она работает при начальной загрузке страницы, но не при последующих.Все остальные Javascript, относящиеся к Foundation 6, например модалы, работают независимо от способа загрузки страницы.

Я только что перешел на обновленную версию rails 5.2.Я был на 5.2.1, веб-пакере 3.5 и фундаменте 6.5.0-rc.4.Все заработало как положено.Turbolinks не изменил версии.

Сейчас я использую Foundation 6.5.3, Rails 5.2.3, Webpack 4.34.0, Stimulus 1.1.1 и Turbolinks 5.2.0.Никаких дополнительных Gems кроме необходимых Rails и зависимостей не используется.Я пробовал Foundation 6.5.3, 6.5.2, 6.5.1, 6.5.0, 6.5.0-rc.4, 6.4.3.Кажется, ни один из них не возвращается к нормальному поведению.

Я пытался изменить порядок файлов моего пакета Webpack application.js для загрузки модулей и инициализации основания.Я попытался инициализировать Фонд в функции инициализации контроллера стимула.Я попытался прикрепить слушателя с Jquery и без него.Я отказываюсь пробовать встроенный скрипт в конце HTML-кода и разрешаю использовать unsafe-inline в моем CSP.Я пробовал CSS решения, без эффекта.Я пробовал возиться с атрибутами data-show-for, а также с классами видимости html, но это тоже не помогло.Я попытался добавить и удалить родительские элементы, без изменений.В консоли браузера нет ошибок.Добавление «ready» к слушателю для «turbolinks: load» ничего не делает.Я искал других слушателей Turbolinks, чтобы попробовать, но не нашел ничего, что имело бы смысл.Я попытался инициализировать его за пределами и в дополнение к турболинкам: загрузить прослушиватель, и он все еще не работает, однако ошибки появляются на этот раз в консоли show foundation, которая инициализируется дважды.(Попытка инициализировать отзывчивое переключение на элементе, который уже имеет плагин Foundation.)

Я включил все соответствующие файлы, чтобы воссоздать эту проблему, к сожалению, у меня нет живого сайта, который можно было бы разместить намомент. 

rails new foundationtestsite -T -d postgresql -S --webpack=stimulus --skip-listen

package.json (пух удален) 

{
  ...,
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "actioncable": "^5.2.3",
    "activestorage": "^5.2.3",
    "foundation-sites": "^6.5.3",
    "jquery": "^3.4.1",
    "rails-ujs": "^5.2.3",
    "stimulus": "^1.1.1",
    "turbolinks": "^5.2.0",
    "webpack": "^4.34.0",
    "what-input": "^5.2.3"
  },
  ...
}

application.js (запись / файл в пачке) 

import $ from 'jquery'
import jQuery from 'jquery'
import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import cable from 'actioncable';

// import "controllers"
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /.js$/)

// Turbolinks
application.load(definitionsFromContext(context))
Turbolinks.start()

// images
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

// style sheets
import '../stylesheets/application.scss';

// foundation sites 6
import foundation from 'foundation-sites';
import '../javascripts/foundation_startup.js';

foundation_startup.js 

import $ from 'jquery'
import jQuery from 'jquery'
import 'rails-ujs'
import 'foundation-sites'
$(document).on('turbolinks:load', function(){
    $(function(){ $(document).foundation() })
});

html из части меню (отображается как первый элемент тела) 

<div data-controller="menu" data-target="menu.menu" class="cell shrink header medium-cell-block-container">

  <div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="medium" data-target="menu.titleBar">
    <button class="menu-icon" type="button" data-toggle="example-animated-menu"></button>
    <div class="title-bar-title">Menu</div>
  </div>

  <div class="top-bar" id="example-animated-menu" data-target="menu.topBar">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li><%= link_to "Home", root_path%></li>
      </ul>
    </div>
  </div>

</div>
...