为第 3 方 jquery 插件添加参数，例如 swiper

Question

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

我用 apostophe-assets 加载例如 swiper 库：

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

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

// 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 插件将停止工作，管理员需要手动重新加载页面。

我现在发现与我之前的问题相关，您已经在 apostrophe open museum 中集成了 swiper here。

      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
        }
      });

我想要类似的东西，但管理员应该能够选择 'loop' 之类的参数。所以我需要将这些参数映射到我的字段中：

// 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 插件服务器端并从相应的 index.js 文件映射附加参数，这对我的情况非常有用，我认为应该很容易被其他 jquery 插件初始化也是如此。

为第 3 方 jquery 插件添加参数，例如 swiper

add parameters for 3rd party jquery plugins like swiper

apostrophe-cms