为 swiper 等 3rd 方 jquery 插件添加参数

Question

我正在使用一些 3rd 方 jquery 插件，在某些情况下，我需要单独初始化插件，以便为它们提供一些额外的参数，如上所示。

我使用撇号资产加载例如 swiper 库：

// lib/modules/apostrophe-assets/index.js
  scripts: [
    ...
    { name: 'vendor/swiper-bundle.min' },
    ...

所以脚本会被加载到带有撇号资产链的正文中，这很好。我在我的 widget.html 中使用 script 标签分别初始化页面上的每个 swiper 插件并添加一些额外的参数，管理员在小部件设置中选择。

// lib/modules/swiper-widgets/views/widget.html

<div class="swiper-container {{ data.widget._id }}">
  <div class="swiper-wrapper">

    {% for swiper in data.widget.swipers %}
    <div class="swiper-slide">
      {{ apos.area(swiper, 'swiper', {
        edit: false,
        widgets: {
          'card': {
            size: 'one-half',
            sizesAttr: '(max-width:600px) 50vw, 40vw',
            noHeight: true,
            focalPoint: true
          },
          'texts': {},
          'video': {}
        }
      }) }}
    </div>
    {% endfor %}

  </div>
</div>

<script type="text/javascript">
  window.addEventListener('load', function () {
    var swiper{{ data.widget._id }} = new Swiper('.{{ data.widget._id }}', {
      loop: {{ data.widget.loop }},
      speed: {{ data.widget.speed }},
      {% if data.widget.autoplay %}
        autoplay: {
          delay: {{ data.widget.delay }},
          disableOnInteraction: {{ data.widget.disableOnInteraction }},
        },
      {% endif %}
    });
  });
</script>

没问题。

但是您知道我需要将我的 var 包装在 window.addEventListener('load', function () 中，以等待正文中的脚本加载完毕。 这对管理员来说并不是很满意，因为如果他们更改了这个小部件的一些参数，swiper 插件就会停止工作，管理员需要手动重新加载页面。

我现在发现与我之前的问题有关，您已经在撇号开放博物馆here 中集成了 swiper。

      var imageSwiper = new Swiper($widget.find('[data-slideshow]')[0], {
        loop: true,
        autoHeight: true,
        slideToClickedSlide: false,
        threshold: 10,
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        pagination: {
          clickable: false
        }
      });

我想要一些类似的东西，但管理员应该能够选择像“循环”这样的参数。所以我需要将这些参数与我拥有的字段进行映射：

// lib/modules/swiper-widgets/index.js
        ...
        {
            name: 'loop',
            label: 'Loop Swiper',
            type: 'boolean',
            help: 'Activate loop for swiper (default: No)',
            def: false
        },
        {
            name: 'speed',
            label: 'Swipe Speed',
            type: 'range',
            help: 'Choose speed of transition between swpipes (format: ms, default: 300)',
            min: 100,
            max: 2000,
            step: 100,
            def: 300
        },
        ...

Answer 1

我想出了这个解决方案：

// lib/modules/swiper-widgets/public/js/always.js

apos.define('swiper-widgets', {
  extend: 'apostrophe-widgets',
  construct: function(self, options) {
    self.play = function($widget, data, options) {
      // Notice we never use a global CSS selector - we always
      // "find" inside $widget. Swiper uses the DOM directly, so use
      // [0] to get from the jQuery object to the DOM element
      var swiper = new Swiper($widget.find('.swiper-container')[0], {
        loop: data.loop,
        speed: data.speed,
        autoHeight: data.autoHeight,
        effect: data.effect,
        cubeEffect: {
          shadow: false,
        },
        keyboard: {
          enabled: true
        },
      });


    };
  }
});

这很好用，但如果你使用 lean: true 这将不起作用，所以我也添加了以下文件：

// lib/modules/sections-widgets/public/js/lean.js

apos.utils.widgetPlayers['swiper'] = function(el, data, options) {
  // Utilize the provided `data` (properties of the widget)
  // and `options` (options passed to the singleton or area for
  // this widget) to enhance `el`, a DOM element representing the widget
  var swiper = new Swiper(el.querySelector('.swiper-container'), {
    loop: data.loop,
    speed: data.speed,
    autoHeight: data.autoHeight,
    effect: data.effect,
    cubeEffect: {
      shadow: false,
    },
    autoplay: data.autoplay,
    delay: data.delay,
    disableOnInteraction: data.disableOnInteraction,
    keyboard: {
      enabled: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
};

此外，我必须将以下行添加到lib/modules/swiper-widgets/index.js

...
  construct: function(self, options) {
    if (self.apos.assets.options.lean) {
      if (self.options.player) {
        self.pushAsset('script', 'lean', { when: 'lean' });
      }
    } else {
      self.pushAsset('script', 'always', { when: 'always' });
    }
  }

当然还有app.js:

...
    'swiper-widgets':{
      player: true
    },
...

这使您能够初始化外部 jquery 插件 servserside 并从相应的 index.js 文件映射其他参数，这对我的情况非常有用，我认为应该很容易被其他 jquery 插件初始化采用。