diff --git a/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_edit.xml b/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_edit.xml
new file mode 100755
index 0000000000000000000000000000000000000000..e8e217c319f957fc0f520ecf18f7425c91ba2940
--- /dev/null
+++ b/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_edit.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+ <update handle="styles"/>
+ <update handle="editor"/>
+ <head>
+ <css src="NicolasBejean_CategoryWidget::css/assign_categories.css" />
+ </head>
+ <body>
+ <referenceContainer name="content">
+ <uiComponent name="categorywidget_categorywidget_form"/>
+ </referenceContainer>
+ </body>
+</page>
diff --git a/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_index.xml b/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_index.xml
new file mode 100755
index 0000000000000000000000000000000000000000..49fc9679d35c69ef3a5aa759b006b95668b3d2b8
--- /dev/null
+++ b/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_index.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+ <body>
+ <referenceBlock name="menu">
+ <action method="setActive">
+ <argument name="itemId" xsi:type="string">NicolasBejean_Base::base</argument>
+ </action>
+ </referenceBlock>
+ <referenceContainer name="content">
+ <uiComponent name="categorywidget_categorywidget_listing"/>
+ </referenceContainer>
+ </body>
+</page>
diff --git a/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_new.xml b/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_new.xml
new file mode 100755
index 0000000000000000000000000000000000000000..233d1bfeb3f1c2677bc2048f2cf10d29fb493a1d
--- /dev/null
+++ b/view/adminhtml/layout/nicolasbejeancategorywidget_categorywidget_new.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+ <update handle="categorywidget_categorywidget_edit"/>
+ <body/>
+</page>
diff --git a/view/adminhtml/templates/categorywidget/edit/assign_categories.phtml b/view/adminhtml/templates/categorywidget/edit/assign_categories.phtml
new file mode 100755
index 0000000000000000000000000000000000000000..3991c8de325a28ebeb0bbbe81b7f685750f1cd3c
--- /dev/null
+++ b/view/adminhtml/templates/categorywidget/edit/assign_categories.phtml
@@ -0,0 +1,119 @@
+<?php
+use \NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\AssignCategories;
+
+/** @var AssignCategories $block */
+$collection = $block->getImagesCollection();
+
+if (empty($block->getRequest()->getParams())) {
+ $slider = array();
+} else {
+ $slider = $block->getSlider($block->getRequest()->getParam('entity_id'));
+}
+?>
+<div class="categorywidget categorywidget-assign-categories">
+ <div class="grid-container">
+ <div class="collection">
+ <p class="categorywidget-title"><?php echo __('Available categories') ?></p>
+ <div id="collectionList" class="categorywidget-list box-shadow" sortable-list="sortable-list">
+ <?php foreach ($collection as $categorie): ?>
+ <div class="categorywidget-list-item box-shadow" sortable-item="sortable-item" data-id="<?php echo $category['id']; ?>">
+ <div class="categorywidget-list-item-content">
+ <p><?php echo $category['alt']; ?></p>
+ <figure>
+ <img src="/pub/media/mediamanager/categorie/<?php echo $category['path']; ?>" width="125" />
+ <figcaption><?php echo $category['path']; ?></figcaption>
+ </figure>
+ </div>
+ <div class="actions">
+ <button class="btn remove"><?php echo __('Remove item') ?></button>
+ </div>
+ </div>
+ <?php endforeach; ?>
+ </div>
+ </div>
+ <div class="slider">
+ <p class="categorywidget-title"><?php echo __('Selected categories') ?></p>
+ <div id="sliderList" class="categorywidget-list box-shadow" sortable-list="sortable-list">
+ <?php foreach ($slider as $categorie): ?>
+ <div class="categorywidget-list-item box-shadow" sortable-item="sortable-item" data-id="<?php echo $category['id']; ?>">
+ <div class="categorywidget-list-item-content">
+ <p><?php echo $category['alt']; ?></p>
+ <figure>
+ <img src="/pub/media/mediamanager/categorie/<?php echo $category['path']; ?>" width="125" />
+ <figcaption><?php echo $category['path']; ?></figcaption>
+ </figure>
+ </div>
+ <div class="actions">
+ <button class="btn remove"><?php echo __('Remove item') ?></button>
+ </div>
+ </div>
+ <?php endforeach; ?>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+ require([
+ 'jquery',
+ 'NicolasBejean_CategoryWidget/js/sortable',
+ 'domReady!'
+ ], function($, Sortable) {
+ 'use strict';
+
+ var sortable = Sortable.create(sliderList, {
+ group: 'shared',
+ /* handle: '.categorywidget-list-item-handle', */
+ animation: 150,
+ store: {
+ /**
+ * Get the order of elements. Called once during initialization.
+ * @param {Sortable} sortable
+ * @returns {Array}
+ */
+ get: function (sortable) {
+ var order = localStorage.getItem(sortable.options.group.name);
+ return order ? order.split('|') : [];
+ },
+
+ /**
+ * Save the order of elements. Called onEnd (when the item is dropped).
+ * @param {Sortable} sortable
+ */
+ set: function (sortable) {
+ var order = sortable.toArray();
+ localStorage.setItem(sortable.options.group.name, order.join('|'));
+
+ $('input[name = "content"]').val(localStorage.getItem(sortable.options.group.name)).change();
+ }
+ }
+ });
+
+ Sortable.create(collectionList, {
+ group: {
+ name: 'shared',
+ pull: 'clone',
+ put: false
+ },
+ /* handle: '.categorywidget-list-item-handle', */
+ animation: 150
+ });
+
+ $('.remove').bind('click touch', function (e) {
+ e.preventDefault();
+
+ var el = e.target;
+ var parent = $(el).closest('.categorywidget-list-item');
+
+ parent.remove();
+
+ var order = sortable.toArray();
+ localStorage.setItem(sortable.options.group.name, order.join('|'));
+ $('input[name="content"]').val(localStorage.getItem(sortable.options.group.name)).change();
+ });
+
+ var order = sortable.toArray();
+ localStorage.setItem(sortable.options.group.name, order.join('|'));
+ $('input[name="content"]').val(localStorage.getItem(sortable.options.group.name)).change();
+ });
+</script>
diff --git a/view/adminhtml/ui_component/categorywidget_categorywidget_form.xml b/view/adminhtml/ui_component/categorywidget_categorywidget_form.xml
new file mode 100755
index 0000000000000000000000000000000000000000..8b53ef2d661906c4e5d34fffe17f40913da38ae9
--- /dev/null
+++ b/view/adminhtml/ui_component/categorywidget_categorywidget_form.xml
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
+ <argument name="data" xsi:type="array">
+ <item name="js_config" xsi:type="array">
+ <item name="provider" xsi:type="string">categorywidget_categorywidget_form.categorywidget_form_data_source</item>
+ </item>
+ <item name="label" xsi:type="string" translate="true">General Information</item>
+ <item name="template" xsi:type="string">templates/form/collapsible</item>
+ </argument>
+ <settings>
+ <buttons>
+ <button name="save" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\SaveButton"/>
+ <button name="saveAndNew" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\SaveAndNewButton"/>
+ <button name="delete" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\DeleteButton"/>
+ <button name="back" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\Edit\BackButton"/>
+ </buttons>
+ <namespace>categorywidget_categorywidget_form</namespace>
+ <dataScope>data</dataScope>
+ <deps>
+ <dep>categorywidget_categorywidget_form.categorywidget_form_data_source</dep>
+ </deps>
+ </settings>
+ <dataSource name="categorywidget_form_data_source">
+ <argument name="data" xsi:type="array">
+ <item name="js_config" xsi:type="array">
+ <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
+ </item>
+ </argument>
+ <settings>
+ <submitUrl path="nicolasbejeancategorywidget/categorywidget/save"/>
+ </settings>
+ <dataProvider class="NicolasBejean\CategoryWidget\Model\CategoryWidget\DataProvider" name="categorywidget_form_data_source">
+ <settings>
+ <requestFieldName>entity_id</requestFieldName>
+ <primaryFieldName>entity_id</primaryFieldName>
+ </settings>
+ </dataProvider>
+ </dataSource>
+ <fieldset name="general" sortOrder="5">
+ <settings>
+ <label/>
+ </settings>
+ <field name="entity_id" formElement="input">
+ <argument name="data" xsi:type="array">
+ <item name="config" xsi:type="array">
+ <item name="source" xsi:type="string">categorywidget</item>
+ </item>
+ </argument>
+ <settings>
+ <dataType>text</dataType>
+ <visible>false</visible>
+ <dataScope>entity_id</dataScope>
+ </settings>
+ </field>
+ <field name="is_active" sortOrder="10" formElement="checkbox">
+ <argument name="data" xsi:type="array">
+ <item name="config" xsi:type="array">
+ <item name="source" xsi:type="string">categorywidget</item>
+ <item name="default" xsi:type="number">1</item>
+ </item>
+ </argument>
+ <settings>
+ <dataType>boolean</dataType>
+ <label translate="true">Enable Image Slider</label>
+ <dataScope>is_active</dataScope>
+ </settings>
+ <formElements>
+ <checkbox>
+ <settings>
+ <valueMap>
+ <map name="false" xsi:type="number">0</map>
+ <map name="true" xsi:type="number">1</map>
+ </valueMap>
+ <prefer>toggle</prefer>
+ </settings>
+ </checkbox>
+ </formElements>
+ </field>
+ <field name="name" sortOrder="20" formElement="input">
+ <argument name="data" xsi:type="array">
+ <item name="config" xsi:type="array">
+ <item name="source" xsi:type="string">categorywidget</item>
+ </item>
+ </argument>
+ <settings>
+ <validation>
+ <rule name="required-entry" xsi:type="boolean">true</rule>
+ </validation>
+ <dataType>text</dataType>
+ <label translate="true">Name</label>
+ <dataScope>name</dataScope>
+ </settings>
+ </field>
+ <field name="identifier" sortOrder="30" formElement="input">
+ <argument name="data" xsi:type="array">
+ <item name="config" xsi:type="array">
+ <item name="source" xsi:type="string">categorywidget</item>
+ </item>
+ </argument>
+ <settings>
+ <validation>
+ <rule name="required-entry" xsi:type="boolean">true</rule>
+ </validation>
+ <dataType>text</dataType>
+ <label translate="true">Identifier</label>
+ <dataScope>identifier</dataScope>
+ </settings>
+ </field>
+ <field name="content" sortOrder="40" formElement="input">
+ <argument name="data" xsi:type="array">
+ <item name="config" xsi:type="array">
+ <item name="source" xsi:type="string">categorywidget</item>
+ </item>
+ </argument>
+ <settings>
+ <validation>
+ <rule name="required-entry" xsi:type="boolean">true</rule>
+ </validation>
+ <dataType>text</dataType>
+ <label translate="true">Content</label>
+ <dataScope>content</dataScope>
+ </settings>
+ </field>
+ </fieldset>
+ <fieldset name="assign_categorie" sortOrder="9">
+ <settings>
+ <collapsible>true</collapsible>
+ <label translate="true">Images in Slider</label>
+ </settings>
+ <container name="assign_categorie_container" sortOrder="160">
+ <htmlContent name="html_content">
+ <block name="gallery" class="NicolasBejean\CategoryWidget\Block\Adminhtml\CategoryWidget\AssignCategories"/>
+ </htmlContent>
+ </container>
+ </fieldset>
+ <fieldset name="store" sortOrder="30">
+ <settings>
+ <collapsible>true</collapsible>
+ <label translate="true">Store</label>
+ </settings>
+ <field name="store_id" sortOrder="10" formElement="multiselect">
+ <argument name="data" xsi:type="array">
+ <item name="config" xsi:type="array">
+ <item name="source" xsi:type="string">categorywidget</item>
+ <item name="default" xsi:type="number">0</item>
+ </item>
+ </argument>
+ <settings>
+ <validation>
+ <rule name="required-entry" xsi:type="boolean">true</rule>
+ </validation>
+ <dataType>int</dataType>
+ <label translate="true">Store View</label>
+ <dataScope>store_id</dataScope>
+ </settings>
+ <formElements>
+ <multiselect>
+ <settings>
+ <options class="NicolasBejean\CategoryWidget\Ui\Component\Listing\Column\CategoryWidget\Options"/>
+ </settings>
+ </multiselect>
+ </formElements>
+ </field>
+ </fieldset>
+</form>
diff --git a/view/adminhtml/ui_component/categorywidget_categorywidget_listing.xml b/view/adminhtml/ui_component/categorywidget_categorywidget_listing.xml
new file mode 100755
index 0000000000000000000000000000000000000000..aeb0e87cee2f1530997597294603312b24d91641
--- /dev/null
+++ b/view/adminhtml/ui_component/categorywidget_categorywidget_listing.xml
@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
+ <argument name="data" xsi:type="array">
+ <item name="js_config" xsi:type="array">
+ <item name="provider" xsi:type="string">categorywidget_categorywidget_listing.categorywidget_categorywidget_listing_data_source</item>
+ </item>
+ </argument>
+ <settings>
+ <buttons>
+ <button name="add">
+ <url path="*/*/new"/>
+ <class>primary</class>
+ <label translate="true">Add New Image Slider</label>
+ </button>
+ </buttons>
+ <spinner>categorywidget_item_columns</spinner>
+ <deps>
+ <dep>categorywidget_categorywidget_listing.categorywidget_categorywidget_listing_data_source</dep>
+ </deps>
+ </settings>
+ <dataSource name="categorywidget_categorywidget_listing_data_source" component="Magento_Ui/js/grid/provider">
+ <settings>
+ <storageConfig>
+ <param name="indexField" xsi:type="string">entity_id</param>
+ </storageConfig>
+ <updateUrl path="mui/index/render"/>
+ </settings>
+ <aclResource>NicolasBejean_CategoryWidget::categorie</aclResource>
+ <dataProvider class="NicolasBejean\CategoryWidget\Ui\Component\DataProvider" name="categorywidget_categorywidget_listing_data_source">
+ <settings>
+ <requestFieldName>id</requestFieldName>
+ <primaryFieldName>entity_id</primaryFieldName>
+ </settings>
+ </dataProvider>
+ </dataSource>
+ <listingToolbar name="listing_top">
+ <settings>
+ <sticky>true</sticky>
+ </settings>
+ <bookmark name="bookmarks"/>
+ <columnsControls name="columns_controls"/>
+ <filterSearch name="fulltext"/>
+ <filters name="listing_filters">
+ <settings>
+ <templates>
+ <filters>
+ <select>
+ <param name="template" xsi:type="string">ui/grid/filters/elements/ui-select</param>
+ <param name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</param>
+ </select>
+ </filters>
+ </templates>
+ </settings>
+ <filterSelect name="store_id" provider="${ $.parentName }">
+ <settings>
+ <captionValue>0</captionValue>
+ <options class="NicolasBejean\CategoryWidget\Ui\Component\Listing\Column\CategoryWidget\Options"/>
+ <label translate="true">Store View</label>
+ <dataScope>store_id</dataScope>
+ <imports>
+ <link name="visible">componentType = column, index = ${ $.index }:visible</link>
+ </imports>
+ </settings>
+ </filterSelect>
+ </filters>
+ <massaction name="listing_massaction">
+ <action name="delete">
+ <settings>
+ <confirm>
+ <message translate="true">Are you sure you wan't to delete selected categorie slider?</message>
+ <title translate="true">Delete categorie slider</title>
+ </confirm>
+ <url path="nicolasbejeancategorywidget/categorywidget/massDelete"/>
+ <type>delete</type>
+ <label translate="true">Delete</label>
+ </settings>
+ </action>
+ <action name="enable">
+ <settings>
+ <confirm>
+ <message translate="true">Are you sure you wan't to enable selected categorie slider?</message>
+ <title translate="true">Enable categorie slider</title>
+ </confirm>
+ <url path="nicolasbejeancategorywidget/categorywidget/massEnable">
+ <param name="status">1</param>
+ </url>
+ <type>enable</type>
+ <label translate="true">Enable</label>
+ </settings>
+ </action>
+ <action name="disable">
+ <settings>
+ <confirm>
+ <message translate="true">Are you sure you wan't to disable selected categorie slider?</message>
+ <title translate="true">Disable categorie slider</title>
+ </confirm>
+ <url path="nicolasbejeancategorywidget/categorywidget/massDisable">
+ <param name="status">0</param>
+ </url>
+ <type>disable</type>
+ <label translate="true">Disable</label>
+ </settings>
+ </action>
+ </massaction>
+ <paging name="listing_paging"/>
+ </listingToolbar>
+ <columns name="categorywidget_item_columns">
+ <settings>
+ <editorConfig>
+ <param name="clientConfig" xsi:type="array">
+ <item name="saveUrl" xsi:type="url" path="nicolasbejeancategorywidget/categorywidget/inlineEdit"/>
+ <item name="validateBeforeSave" xsi:type="boolean">false</item>
+ </param>
+ <param name="indexField" xsi:type="string">entity_id</param>
+ <param name="enabled" xsi:type="boolean">true</param>
+ <param name="selectProvider" xsi:type="string">categorywidget_categorywidget_listing.categorywidget_categorywidget_listing.categorywidget_item_columns.ids</param>
+ </editorConfig>
+ <childDefaults>
+ <param name="fieldAction" xsi:type="array">
+ <item name="provider" xsi:type="string">categorywidget_categorywidget_listing.categorywidget_categorywidget_listing.categorywidget_item_columns_editor</item>
+ <item name="target" xsi:type="string">startEdit</item>
+ <item name="params" xsi:type="array">
+ <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
+ <item name="1" xsi:type="boolean">true</item>
+ </item>
+ </param>
+ </childDefaults>
+ </settings>
+ <selectionsColumn name="ids">
+ <settings>
+ <indexField>entity_id</indexField>
+ </settings>
+ </selectionsColumn>
+ <column name="entity_id">
+ <settings>
+ <filter>textRange</filter>
+ <label translate="true">ID</label>
+ <sorting>asc</sorting>
+ </settings>
+ </column>
+ <column name="identifier">
+ <settings>
+ <filter>text</filter>
+ <editor>
+ <validation>
+ <rule name="required-entry" xsi:type="boolean">true</rule>
+ </validation>
+ <editorType>text</editorType>
+ </editor>
+ <label translate="true">Identifier</label>
+ </settings>
+ </column>
+ <column name="name">
+ <settings>
+ <filter>text</filter>
+ <editor>
+ <validation>
+ <rule name="required-entry" xsi:type="boolean">true</rule>
+ </validation>
+ <editorType>text</editorType>
+ </editor>
+ <label translate="true">Name</label>
+ </settings>
+ </column>
+ <column name="content">
+ <settings>
+ <filter>text</filter>
+ <editor>
+ <validation>
+ <rule name="required-entry" xsi:type="boolean">true</rule>
+ </validation>
+ <editorType>text</editorType>
+ </editor>
+ <label translate="true">Content</label>
+ </settings>
+ </column>
+ <column name="store_id" class="Magento\Store\Ui\Component\Listing\Column\Store">
+ <settings>
+ <label translate="true">Store View</label>
+ <bodyTmpl>ui/grid/cells/html</bodyTmpl>
+ <sortable>false</sortable>
+ </settings>
+ </column>
+ <column name="is_active" component="Magento_Ui/js/grid/columns/select">
+ <settings>
+ <options class="NicolasBejean\CategoryWidget\Model\CategoryWidget\Source\Enabled"/>
+ <filter>select</filter>
+ <editor>
+ <editorType>select</editorType>
+ </editor>
+ <dataType>select</dataType>
+ <label translate="true">Status</label>
+ </settings>
+ </column>
+ <column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
+ <settings>
+ <filter>dateRange</filter>
+ <dataType>date</dataType>
+ <label translate="true">Created</label>
+ </settings>
+ </column>
+ <column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
+ <settings>
+ <filter>dateRange</filter>
+ <dataType>date</dataType>
+ <label translate="true">Modified</label>
+ </settings>
+ </column>
+ <actionsColumn name="actions" class="NicolasBejean\CategoryWidget\Ui\Component\Listing\Column\CategoryWidgetActions">
+ <settings>
+ <indexField>entity_id</indexField>
+ </settings>
+ </actionsColumn>
+ </columns>
+</listing>
diff --git a/view/adminhtml/web/css/assign_categories.css b/view/adminhtml/web/css/assign_categories.css
new file mode 100755
index 0000000000000000000000000000000000000000..cc928ccf82f5a71bb30e40644efc6cc4f141bdde
--- /dev/null
+++ b/view/adminhtml/web/css/assign_categories.css
@@ -0,0 +1,117 @@
+/**
+ * Définition des grilles
+ */
+.categorywidget .grid-container {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ grid-template-rows: 1fr;
+ grid-template-areas: "collection slider";
+}
+
+.categorywidget .collection {
+ grid-area: collection;
+}
+
+.categorywidget .slider {
+ grid-area: slider;
+}
+
+.categorywidget #collectionList {
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-areas: ". .";
+}
+
+.categorywidget #sliderList {
+ grid-template-columns: 1fr;
+ grid-template-areas: ".";
+}
+
+.categorywidget-list {
+ display: grid;
+ grid-template-rows: 1fr;
+}
+
+/**
+ * Définition de la mise en page
+ */
+.categorywidget-title, .categorywidget-list {
+ margin: 0 auto;
+ width: 95%;
+ user-select: none;
+}
+
+.categorywidget-title {
+ padding: .75em 0;
+ text-align: center;
+ font-weight: bold;
+}
+
+.categorywidget-list {
+ min-height: calc(30vh + 20px);
+ background-color: #efefef;
+ border: 1px solid #adadad;
+ border-radius: 1px;
+}
+
+.categorywidget-list-item {
+ background: #fff;
+ margin: 10px;
+ max-height: 30vh;
+}
+
+.categorywidget-list-item:not(:last-child) {
+ margin-bottom: 7px;
+}
+
+.categorywidget-list-item-content {
+ width: 100%;
+ padding: 10px 15px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ text-align: center;
+}
+
+.categorywidget figcaption {
+ font-size: .75em;
+}
+
+/**
+ * Bouton Remove
+ */
+.categorywidget-list-item {
+ position: relative;
+}
+
+.categorywidget-list-item .actions {
+ position: absolute;
+ right: 1vh;
+ bottom: 1vh;
+}
+
+#collectionList .remove {
+ display: none;
+}
+
+#sliderList .remove {
+ display: inline-block;
+}
+
+/**
+ * Détails
+ */
+.categorywidget-list-item {
+ cursor: grab;
+}
+
+.categorywidget-list-item.is-dragging {
+ box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
+ opacity: 0.8;
+ cursor: grabbing;
+}
+
+.categorywidget .box-shadow {
+ transition: box-shadow 200ms ease-out, opacity 200ms ease-out;
+ border-radius: 6px;
+ box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
+}
diff --git a/view/adminhtml/web/js/sortable.js b/view/adminhtml/web/js/sortable.js
new file mode 100644
index 0000000000000000000000000000000000000000..7aa87911f56cc36f6db4276b8e4efba5abd6281a
--- /dev/null
+++ b/view/adminhtml/web/js/sortable.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function I(i){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),e.forEach(function(t){var e,n,o;e=i,o=r[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o})}return i}function l(t,e){if(null==t)return{};var n,o,i=function(t,e){if(null==t)return{};var n,o,i={},r=Object.keys(t);for(o=0;o<r.length;o++)n=r[o],0<=e.indexOf(n)||(i[n]=t[n]);return i}(t,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(o=0;o<r.length;o++)n=r[o],0<=e.indexOf(n)||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}function e(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e<t.length;e++)n[e]=t[e];return n}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function t(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}var w=t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),E=t(/Edge/i),c=t(/firefox/i),s=t(/safari/i)&&!t(/chrome/i)&&!t(/android/i),n=t(/iP(ad|od|hone)/i),i=t(/chrome/i)&&t(/android/i),r={capture:!1,passive:!1};function u(t,e,n){t.addEventListener(e,n,!w&&r)}function d(t,e,n){t.removeEventListener(e,n,!w&&r)}function h(t,e){if(e){if(">"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return!1}return!1}}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"===e[0]?t.parentNode===n&&h(t,e):h(t,e))||o&&t===n)return t;if(t===n)break}while(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode)}var i;return null}var f,p=/\s+/g;function k(t,e,n){if(t&&e)if(t.classList)t.classList[n?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(p," ").replace(" "+e+" "," ");t.className=(o+(n?" "+e:"")).replace(p," ")}}function R(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];e in o||-1!==e.indexOf("webkit")||(e="-webkit-"+e),o[e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform");o&&"none"!==o&&(n=o+" "+n)}while(!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix;return i&&new i(n)}function g(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i<r;i++)n(o[i],i);return o}return[]}function N(){return w?document.documentElement:document.scrollingElement}function X(t,e,n,o,i){if(t.getBoundingClientRect||t===window){var r,a,l,s,c,u,d;if(d=t!==window&&t!==N()?(a=(r=t.getBoundingClientRect()).top,l=r.left,s=r.bottom,c=r.right,u=r.height,r.width):(l=a=0,s=window.innerHeight,c=window.innerWidth,u=window.innerHeight,window.innerWidth),(e||n)&&t!==window&&(i=i||t.parentNode,!w))do{if(i&&i.getBoundingClientRect&&("none"!==R(i,"transform")||n&&"static"!==R(i,"position"))){var h=i.getBoundingClientRect();a-=h.top+parseInt(R(i,"border-top-width")),l-=h.left+parseInt(R(i,"border-left-width")),s=a+r.height,c=l+r.width;break}}while(i=i.parentNode);if(o&&t!==window){var f=v(i||t),p=f&&f.a,g=f&&f.d;f&&(s=(a/=g)+(u/=g),c=(l/=p)+(d/=p))}return{top:a,left:l,bottom:s,right:c,width:d,height:u}}}function Y(t,e,n){for(var o=H(t,!0),i=X(t)[e];o;){var r=X(o)[n];if(!("top"===n||"left"===n?r<=i:i<=r))return o;if(o===N())break;o=H(o,!1)}return!1}function m(t,e,n){for(var o=0,i=0,r=t.children;i<r.length;){if("none"!==r[i].style.display&&r[i]!==Rt.ghost&&r[i]!==Rt.dragged&&P(r[i],n.draggable,t,!1)){if(o===e)return r[i];o++}i++}return null}function B(t,e){for(var n=t.lastElementChild;n&&(n===Rt.ghost||"none"===R(n,"display")||e&&!h(n,e));)n=n.previousElementSibling;return n||null}function F(t,e){var n=0;if(!t||!t.parentNode)return-1;for(;t=t.previousElementSibling;)"TEMPLATE"===t.nodeName.toUpperCase()||t===Rt.clone||e&&!h(t,e)||n++;return n}function b(t){var e=0,n=0,o=N();if(t)do{var i=v(t),r=i.a,a=i.d;e+=t.scrollLeft*r,n+=t.scrollTop*a}while(t!==o&&(t=t.parentNode));return[e,n]}function H(t,e){if(!t||!t.getBoundingClientRect)return N();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=R(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return N();if(o||e)return n;o=!0}}}while(n=n.parentNode);return N()}function y(t,e){return Math.round(t.top)===Math.round(e.top)&&Math.round(t.left)===Math.round(e.left)&&Math.round(t.height)===Math.round(e.height)&&Math.round(t.width)===Math.round(e.width)}function D(e,n){return function(){if(!f){var t=arguments;1===t.length?e.call(this,t[0]):e.apply(this,t),f=setTimeout(function(){f=void 0},n)}}}function L(t,e,n){t.scrollLeft+=e,t.scrollTop+=n}function _(t){var e=window.Polymer,n=window.jQuery||window.Zepto;return e&&e.dom?e.dom(t).cloneNode(!0):n?n(t).clone(!0)[0]:t.cloneNode(!0)}function S(t,e){R(t,"position","absolute"),R(t,"top",e.top),R(t,"left",e.left),R(t,"width",e.width),R(t,"height",e.height)}function C(t){R(t,"position",""),R(t,"top",""),R(t,"left",""),R(t,"width",""),R(t,"height","")}var j="Sortable"+(new Date).getTime();function T(){var e,o=[];return{captureAnimationState:function(){o=[],this.options.animation&&[].slice.call(this.el.children).forEach(function(t){if("none"!==R(t,"display")&&t!==Rt.ghost){o.push({target:t,rect:X(t)});var e=I({},o[o.length-1].rect);if(t.thisAnimationDuration){var n=v(t,!0);n&&(e.top-=n.f,e.left-=n.e)}t.fromRect=e}})},addAnimationState:function(t){o.push(t)},removeAnimationState:function(t){o.splice(function(t,e){for(var n in t)if(t.hasOwnProperty(n))for(var o in e)if(e.hasOwnProperty(o)&&e[o]===t[n][o])return Number(n);return-1}(o,{target:t}),1)},animateAll:function(t){var c=this;if(!this.options.animation)return clearTimeout(e),void("function"==typeof t&&t());var u=!1,d=0;o.forEach(function(t){var e=0,n=t.target,o=n.fromRect,i=X(n),r=n.prevFromRect,a=n.prevToRect,l=t.rect,s=v(n,!0);s&&(i.top-=s.f,i.left-=s.e),n.toRect=i,n.thisAnimationDuration&&y(r,i)&&!y(o,i)&&(l.top-i.top)/(l.left-i.left)==(o.top-i.top)/(o.left-i.left)&&(e=function(t,e,n,o){return Math.sqrt(Math.pow(e.top-t.top,2)+Math.pow(e.left-t.left,2))/Math.sqrt(Math.pow(e.top-n.top,2)+Math.pow(e.left-n.left,2))*o.animation}(l,r,a,c.options)),y(i,o)||(n.prevFromRect=o,n.prevToRect=i,e||(e=c.options.animation),c.animate(n,l,i,e)),e&&(u=!0,d=Math.max(d,e),clearTimeout(n.animationResetTimer),n.animationResetTimer=setTimeout(function(){n.animationTime=0,n.prevFromRect=null,n.fromRect=null,n.prevToRect=null,n.thisAnimationDuration=null},e),n.thisAnimationDuration=e)}),clearTimeout(e),u?e=setTimeout(function(){"function"==typeof t&&t()},d):"function"==typeof t&&t(),o=[]},animate:function(t,e,n,o){if(o){R(t,"transition",""),R(t,"transform","");var i=v(this.el),r=i&&i.a,a=i&&i.d,l=(e.left-n.left)/(r||1),s=(e.top-n.top)/(a||1);t.animatingX=!!l,t.animatingY=!!s,R(t,"transform","translate3d("+l+"px,"+s+"px,0)"),function(t){t.offsetWidth}(t),R(t,"transition","transform "+o+"ms"+(this.options.easing?" "+this.options.easing:"")),R(t,"transform","translate3d(0,0,0)"),"number"==typeof t.animated&&clearTimeout(t.animated),t.animated=setTimeout(function(){R(t,"transition",""),R(t,"transform",""),t.animated=!1,t.animatingX=!1,t.animatingY=!1},o)}}}}var x=[],M={initializeByDefault:!0},O={mount:function(t){for(var e in M)!M.hasOwnProperty(e)||e in t||(t[e]=M[e]);x.push(t)},pluginEvent:function(e,n,o){var t=this;this.eventCanceled=!1,o.cancel=function(){t.eventCanceled=!0};var i=e+"Global";x.forEach(function(t){n[t.pluginName]&&(n[t.pluginName][i]&&n[t.pluginName][i](I({sortable:n},o)),n.options[t.pluginName]&&n[t.pluginName][e]&&n[t.pluginName][e](I({sortable:n},o)))})},initializePlugins:function(o,i,r,t){for(var e in x.forEach(function(t){var e=t.pluginName;if(o.options[e]||t.initializeByDefault){var n=new t(o,i,o.options);n.sortable=o,n.options=o.options,o[e]=n,a(r,n.defaults)}}),o.options)if(o.options.hasOwnProperty(e)){var n=this.modifyOption(o,e,o.options[e]);void 0!==n&&(o.options[e]=n)}},getEventProperties:function(e,n){var o={};return x.forEach(function(t){"function"==typeof t.eventProperties&&a(o,t.eventProperties.call(n[t.pluginName],e))}),o},modifyOption:function(e,n,o){var i;return x.forEach(function(t){e[t.pluginName]&&t.optionListeners&&"function"==typeof t.optionListeners[n]&&(i=t.optionListeners[n].call(e[t.pluginName],o))}),i}};function A(t){var e=t.sortable,n=t.rootEl,o=t.name,i=t.targetEl,r=t.cloneEl,a=t.toEl,l=t.fromEl,s=t.oldIndex,c=t.newIndex,u=t.oldDraggableIndex,d=t.newDraggableIndex,h=t.originalEvent,f=t.putSortable,p=t.extraEventProperties;if(e=e||n&&n[j]){var g,v=e.options,m="on"+o.charAt(0).toUpperCase()+o.substr(1);!window.CustomEvent||w||E?(g=document.createEvent("Event")).initEvent(o,!0,!0):g=new CustomEvent(o,{bubbles:!0,cancelable:!0}),g.to=a||n,g.from=l||n,g.item=i||n,g.clone=r,g.oldIndex=s,g.newIndex=c,g.oldDraggableIndex=u,g.newDraggableIndex=d,g.originalEvent=h,g.pullMode=f?f.lastPutMode:void 0;var b=I({},p,O.getEventProperties(o,e));for(var y in b)g[y]=b[y];n&&n.dispatchEvent(g),v[m]&&v[m].call(e,g)}}function K(t,e,n){var o=2<arguments.length&&void 0!==n?n:{},i=o.evt,r=l(o,["evt"]);O.pluginEvent.bind(Rt)(t,e,I({dragEl:z,parentEl:G,ghostEl:U,rootEl:q,nextEl:V,lastDownEl:Z,cloneEl:Q,cloneHidden:$,dragStarted:dt,putSortable:it,activeSortable:Rt.active,originalEvent:i,oldIndex:J,oldDraggableIndex:et,newIndex:tt,newDraggableIndex:nt,hideGhostForTarget:Nt,unhideGhostForTarget:It,cloneNowHidden:function(){$=!0},cloneNowShown:function(){$=!1},dispatchSortableEvent:function(t){W({sortable:e,name:t,originalEvent:i})}},r))}function W(t){A(I({putSortable:it,cloneEl:Q,targetEl:z,rootEl:q,oldIndex:J,oldDraggableIndex:et,newIndex:tt,newDraggableIndex:nt},t))}var z,G,U,q,V,Z,Q,$,J,tt,et,nt,ot,it,rt,at,lt,st,ct,ut,dt,ht,ft,pt,gt,vt=!1,mt=!1,bt=[],yt=!1,wt=!1,Et=[],Dt=!1,_t=[],St="undefined"!=typeof document,Ct=n,Tt=E||w?"cssFloat":"float",xt=St&&!i&&!n&&"draggable"in document.createElement("div"),Mt=function(){if(St){if(w)return!1;var t=document.createElement("x");return t.style.cssText="pointer-events:auto","auto"===t.style.pointerEvents}}(),Ot=function(t,e){var n=R(t),o=parseInt(n.width)-parseInt(n.paddingLeft)-parseInt(n.paddingRight)-parseInt(n.borderLeftWidth)-parseInt(n.borderRightWidth),i=m(t,0,e),r=m(t,1,e),a=i&&R(i),l=r&&R(r),s=a&&parseInt(a.marginLeft)+parseInt(a.marginRight)+X(i).width,c=l&&parseInt(l.marginLeft)+parseInt(l.marginRight)+X(r).width;if("flex"===n.display)return"column"===n.flexDirection||"column-reverse"===n.flexDirection?"vertical":"horizontal";if("grid"===n.display)return n.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal";if(i&&a.float&&"none"!==a.float){var u="left"===a.float?"left":"right";return!r||"both"!==l.clear&&l.clear!==u?"horizontal":"vertical"}return i&&("block"===a.display||"flex"===a.display||"table"===a.display||"grid"===a.display||o<=s&&"none"===n[Tt]||r&&"none"===n[Tt]&&o<s+c)?"vertical":"horizontal"},At=function(t){function s(a,l){return function(t,e,n,o){var i=t.options.group.name&&e.options.group.name&&t.options.group.name===e.options.group.name;if(null==a&&(l||i))return!0;if(null==a||!1===a)return!1;if(l&&"clone"===a)return a;if("function"==typeof a)return s(a(t,e,n,o),l)(t,e,n,o);var r=(l?t:e).options.group.name;return!0===a||"string"==typeof a&&a===r||a.join&&-1<a.indexOf(r)}}var e={},n=t.group;n&&"object"==o(n)||(n={name:n}),e.name=n.name,e.checkPull=s(n.pull,!0),e.checkPut=s(n.put),e.revertClone=n.revertClone,t.group=e},Nt=function(){!Mt&&U&&R(U,"display","none")},It=function(){!Mt&&U&&R(U,"display","")};St&&document.addEventListener("click",function(t){if(mt)return t.preventDefault(),t.stopPropagation&&t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation(),mt=!1},!0);function Pt(t){if(z){var e=function(r,a){var l;return bt.some(function(t){if(!B(t)){var e=X(t),n=t[j].options.emptyInsertThreshold,o=r>=e.left-n&&r<=e.right+n,i=a>=e.top-n&&a<=e.bottom+n;return n&&o&&i?l=t:void 0}}),l}((t=t.touches?t.touches[0]:t).clientX,t.clientY);if(e){var n={};for(var o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);n.target=n.rootEl=e,n.preventDefault=void 0,n.stopPropagation=void 0,e[j]._onDragOver(n)}}}function kt(t){z&&z.parentNode[j]._isOutsideThisEl(t.target)}function Rt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.el=t,this.options=e=a({},e),t[j]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Ot(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==Rt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var o in O.initializePlugins(this,t,n),n)o in e||(e[o]=n[o]);for(var i in At(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&xt,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?u(t,"pointerdown",this._onTapStart):(u(t,"mousedown",this._onTapStart),u(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(u(t,"dragover",this),u(t,"dragenter",this)),bt.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[]),a(this,T())}function Xt(t,e,n,o,i,r,a,l){var s,c,u=t[j],d=u.options.onMove;return!window.CustomEvent||w||E?(s=document.createEvent("Event")).initEvent("move",!0,!0):s=new CustomEvent("move",{bubbles:!0,cancelable:!0}),s.to=e,s.from=t,s.dragged=n,s.draggedRect=o,s.related=i||e,s.relatedRect=r||X(e),s.willInsertAfter=l,s.originalEvent=a,t.dispatchEvent(s),d&&(c=d.call(u,s,a)),c}function Yt(t){t.draggable=!1}function Bt(){Dt=!1}function Ft(t){for(var e=t.tagName+t.className+t.src+t.href+t.textContent,n=e.length,o=0;n--;)o+=e.charCodeAt(n);return o.toString(36)}function Ht(t){return setTimeout(t,0)}function Lt(t){return clearTimeout(t)}Rt.prototype={constructor:Rt,_isOutsideThisEl:function(t){this.el.contains(t)||t===this.el||(ht=null)},_getDirection:function(t,e){return"function"==typeof this.options.direction?this.options.direction.call(this,t,e,z):this.options.direction},_onTapStart:function(e){if(e.cancelable){var n=this,o=this.el,t=this.options,i=t.preventOnFilter,r=e.type,a=e.touches&&e.touches[0]||e.pointerType&&"touch"===e.pointerType&&e,l=(a||e).target,s=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,c=t.filter;if(function(t){_t.length=0;var e=t.getElementsByTagName("input"),n=e.length;for(;n--;){var o=e[n];o.checked&&_t.push(o)}}(o),!z&&!(/mousedown|pointerdown/.test(r)&&0!==e.button||t.disabled||s.isContentEditable||(l=P(l,t.draggable,o,!1))&&l.animated||Z===l)){if(J=F(l),et=F(l,t.draggable),"function"==typeof c){if(c.call(this,e,l,this))return W({sortable:n,rootEl:s,name:"filter",targetEl:l,toEl:o,fromEl:o}),K("filter",n,{evt:e}),void(i&&e.cancelable&&e.preventDefault())}else if(c&&(c=c.split(",").some(function(t){if(t=P(s,t.trim(),o,!1))return W({sortable:n,rootEl:t,name:"filter",targetEl:l,fromEl:o,toEl:o}),K("filter",n,{evt:e}),!0})))return void(i&&e.cancelable&&e.preventDefault());t.handle&&!P(s,t.handle,o,!1)||this._prepareDragStart(e,a,l)}}},_prepareDragStart:function(t,e,n){var o,i=this,r=i.el,a=i.options,l=r.ownerDocument;if(n&&!z&&n.parentNode===r){var s=X(n);if(q=r,G=(z=n).parentNode,V=z.nextSibling,Z=n,ot=a.group,rt={target:Rt.dragged=z,clientX:(e||t).clientX,clientY:(e||t).clientY},ct=rt.clientX-s.left,ut=rt.clientY-s.top,this._lastX=(e||t).clientX,this._lastY=(e||t).clientY,z.style["will-change"]="all",o=function(){K("delayEnded",i,{evt:t}),Rt.eventCanceled?i._onDrop():(i._disableDelayedDragEvents(),!c&&i.nativeDraggable&&(z.draggable=!0),i._triggerDragStart(t,e),W({sortable:i,name:"choose",originalEvent:t}),k(z,a.chosenClass,!0))},a.ignore.split(",").forEach(function(t){g(z,t.trim(),Yt)}),u(l,"dragover",Pt),u(l,"mousemove",Pt),u(l,"touchmove",Pt),u(l,"mouseup",i._onDrop),u(l,"touchend",i._onDrop),u(l,"touchcancel",i._onDrop),c&&this.nativeDraggable&&(this.options.touchStartThreshold=4,z.draggable=!0),K("delayStart",this,{evt:t}),!a.delay||a.delayOnTouchOnly&&!e||this.nativeDraggable&&(E||w))o();else{if(Rt.eventCanceled)return void this._onDrop();u(l,"mouseup",i._disableDelayedDrag),u(l,"touchend",i._disableDelayedDrag),u(l,"touchcancel",i._disableDelayedDrag),u(l,"mousemove",i._delayedDragTouchMoveHandler),u(l,"touchmove",i._delayedDragTouchMoveHandler),a.supportPointer&&u(l,"pointermove",i._delayedDragTouchMoveHandler),i._dragStartTimer=setTimeout(o,a.delay)}}},_delayedDragTouchMoveHandler:function(t){var e=t.touches?t.touches[0]:t;Math.max(Math.abs(e.clientX-this._lastX),Math.abs(e.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){z&&Yt(z),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;d(t,"mouseup",this._disableDelayedDrag),d(t,"touchend",this._disableDelayedDrag),d(t,"touchcancel",this._disableDelayedDrag),d(t,"mousemove",this._delayedDragTouchMoveHandler),d(t,"touchmove",this._delayedDragTouchMoveHandler),d(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||"touch"==t.pointerType&&t,!this.nativeDraggable||e?this.options.supportPointer?u(document,"pointermove",this._onTouchMove):u(document,e?"touchmove":"mousemove",this._onTouchMove):(u(z,"dragend",this),u(q,"dragstart",this._onDragStart));try{document.selection?Ht(function(){document.selection.empty()}):window.getSelection().removeAllRanges()}catch(t){}},_dragStarted:function(t,e){if(vt=!1,q&&z){K("dragStarted",this,{evt:e}),this.nativeDraggable&&u(document,"dragover",kt);var n=this.options;t||k(z,n.dragClass,!1),k(z,n.ghostClass,!0),Rt.active=this,t&&this._appendGhost(),W({sortable:this,name:"start",originalEvent:e})}else this._nulling()},_emulateDragOver:function(){if(at){this._lastX=at.clientX,this._lastY=at.clientY,Nt();for(var t=document.elementFromPoint(at.clientX,at.clientY),e=t;t&&t.shadowRoot&&(t=t.shadowRoot.elementFromPoint(at.clientX,at.clientY))!==e;)e=t;if(z.parentNode[j]._isOutsideThisEl(t),e)do{if(e[j]){if(e[j]._onDragOver({clientX:at.clientX,clientY:at.clientY,target:t,rootEl:e})&&!this.options.dragoverBubble)break}t=e}while(e=e.parentNode);It()}},_onTouchMove:function(t){if(rt){var e=this.options,n=e.fallbackTolerance,o=e.fallbackOffset,i=t.touches?t.touches[0]:t,r=U&&v(U),a=U&&r&&r.a,l=U&&r&&r.d,s=Ct&>&&b(gt),c=(i.clientX-rt.clientX+o.x)/(a||1)+(s?s[0]-Et[0]:0)/(a||1),u=(i.clientY-rt.clientY+o.y)/(l||1)+(s?s[1]-Et[1]:0)/(l||1);if(!Rt.active&&!vt){if(n&&Math.max(Math.abs(i.clientX-this._lastX),Math.abs(i.clientY-this._lastY))<n)return;this._onDragStart(t,!0)}if(U){r?(r.e+=c-(lt||0),r.f+=u-(st||0)):r={a:1,b:0,c:0,d:1,e:c,f:u};var d="matrix(".concat(r.a,",").concat(r.b,",").concat(r.c,",").concat(r.d,",").concat(r.e,",").concat(r.f,")");R(U,"webkitTransform",d),R(U,"mozTransform",d),R(U,"msTransform",d),R(U,"transform",d),lt=c,st=u,at=i}t.cancelable&&t.preventDefault()}},_appendGhost:function(){if(!U){var t=this.options.fallbackOnBody?document.body:q,e=X(z,!0,Ct,!0,t),n=this.options;if(Ct){for(gt=t;"static"===R(gt,"position")&&"none"===R(gt,"transform")&>!==document;)gt=gt.parentNode;gt!==document.body&>!==document.documentElement?(gt===document&&(gt=N()),e.top+=gt.scrollTop,e.left+=gt.scrollLeft):gt=N(),Et=b(gt)}k(U=z.cloneNode(!0),n.ghostClass,!1),k(U,n.fallbackClass,!0),k(U,n.dragClass,!0),R(U,"transition",""),R(U,"transform",""),R(U,"box-sizing","border-box"),R(U,"margin",0),R(U,"top",e.top),R(U,"left",e.left),R(U,"width",e.width),R(U,"height",e.height),R(U,"opacity","0.8"),R(U,"position",Ct?"absolute":"fixed"),R(U,"zIndex","100000"),R(U,"pointerEvents","none"),Rt.ghost=U,t.appendChild(U),R(U,"transform-origin",ct/parseInt(U.style.width)*100+"% "+ut/parseInt(U.style.height)*100+"%")}},_onDragStart:function(t,e){var n=this,o=t.dataTransfer,i=n.options;K("dragStart",this,{evt:t}),Rt.eventCanceled?this._onDrop():(K("setupClone",this),Rt.eventCanceled||((Q=_(z)).draggable=!1,Q.style["will-change"]="",this._hideClone(),k(Q,this.options.chosenClass,!1),Rt.clone=Q),n.cloneId=Ht(function(){K("clone",n),Rt.eventCanceled||(n.options.removeCloneOnHide||q.insertBefore(Q,z),n._hideClone(),W({sortable:n,name:"clone"}))}),e||k(z,i.dragClass,!0),e?(mt=!0,n._loopId=setInterval(n._emulateDragOver,50)):(d(document,"mouseup",n._onDrop),d(document,"touchend",n._onDrop),d(document,"touchcancel",n._onDrop),o&&(o.effectAllowed="move",i.setData&&i.setData.call(n,o,z)),u(document,"drop",n),R(z,"transform","translateZ(0)")),vt=!0,n._dragStartId=Ht(n._dragStarted.bind(n,e,t)),u(document,"selectstart",n),dt=!0,s&&R(document.body,"user-select","none"))},_onDragOver:function(n){var o,i,r,a,l=this.el,s=n.target,e=this.options,t=e.group,c=Rt.active,u=ot===t,d=e.sort,h=it||c,f=this,p=!1;if(!Dt){if(void 0!==n.preventDefault&&n.cancelable&&n.preventDefault(),s=P(s,e.draggable,l,!0),M("dragOver"),Rt.eventCanceled)return p;if(z.contains(n.target)||s.animated&&s.animatingX&&s.animatingY||f._ignoreWhileAnimating===s)return A(!1);if(mt=!1,c&&!e.disabled&&(u?d||(r=!q.contains(z)):it===this||(this.lastPutMode=ot.checkPull(this,c,z,n))&&t.checkPut(this,c,z,n))){if(a="vertical"===this._getDirection(n,s),o=X(z),M("dragOverValid"),Rt.eventCanceled)return p;if(r)return G=q,O(),this._hideClone(),M("revert"),Rt.eventCanceled||(V?q.insertBefore(z,V):q.appendChild(z)),A(!0);var g=B(l,e.draggable);if(!g||function(t,e,n){var o=X(B(n.el,n.options.draggable));return e?t.clientX>o.right+10||t.clientX<=o.right&&t.clientY>o.bottom&&t.clientX>=o.left:t.clientX>o.right&&t.clientY>o.top||t.clientX<=o.right&&t.clientY>o.bottom+10}(n,a,this)&&!g.animated){if(g===z)return A(!1);if(g&&l===n.target&&(s=g),s&&(i=X(s)),!1!==Xt(q,l,z,o,s,i,n,!!s))return O(),l.appendChild(z),G=l,N(),A(!0)}else if(s.parentNode===l){i=X(s);var v,m,b,y=z.parentNode!==l,w=!function(t,e,n){var o=n?t.left:t.top,i=n?t.right:t.bottom,r=n?t.width:t.height,a=n?e.left:e.top,l=n?e.right:e.bottom,s=n?e.width:e.height;return o===a||i===l||o+r/2===a+s/2}(z.animated&&z.toRect||o,s.animated&&s.toRect||i,a),E=a?"top":"left",D=Y(s,"top","top")||Y(z,"top","top"),_=D?D.scrollTop:void 0;if(ht!==s&&(m=i[E],yt=!1,wt=!w&&e.invertSwap||y),0!==(v=function(t,e,n,o,i,r,a,l){var s=o?t.clientY:t.clientX,c=o?n.height:n.width,u=o?n.top:n.left,d=o?n.bottom:n.right,h=!1;if(!a)if(l&&pt<c*i){if(!yt&&(1===ft?u+c*r/2<s:s<d-c*r/2)&&(yt=!0),yt)h=!0;else if(1===ft?s<u+pt:d-pt<s)return-ft}else if(u+c*(1-i)/2<s&&s<d-c*(1-i)/2)return function(t){return F(z)<F(t)?1:-1}(e);if((h=h||a)&&(s<u+c*r/2||d-c*r/2<s))return u+c/2<s?1:-1;return 0}(n,s,i,a,w?1:e.swapThreshold,null==e.invertedSwapThreshold?e.swapThreshold:e.invertedSwapThreshold,wt,ht===s)))for(var S=F(z);S-=v,(b=G.children[S])&&("none"===R(b,"display")||b===U););if(0===v||b===s)return A(!1);ft=v;var C=(ht=s).nextElementSibling,T=!1,x=Xt(q,l,z,o,s,i,n,T=1===v);if(!1!==x)return 1!==x&&-1!==x||(T=1===x),Dt=!0,setTimeout(Bt,30),O(),T&&!C?l.appendChild(z):s.parentNode.insertBefore(z,T?C:s),D&&L(D,0,_-D.scrollTop),G=z.parentNode,void 0===m||wt||(pt=Math.abs(m-X(s)[E])),N(),A(!0)}if(l.contains(z))return A(!1)}return!1}function M(t,e){K(t,f,I({evt:n,isOwner:u,axis:a?"vertical":"horizontal",revert:r,dragRect:o,targetRect:i,canSort:d,fromSortable:h,target:s,completed:A,onMove:function(t,e){return Xt(q,l,z,o,t,X(t),n,e)},changed:N},e))}function O(){M("dragOverAnimationCapture"),f.captureAnimationState(),f!==h&&h.captureAnimationState()}function A(t){return M("dragOverCompleted",{insertion:t}),t&&(u?c._hideClone():c._showClone(f),f!==h&&(k(z,it?it.options.ghostClass:c.options.ghostClass,!1),k(z,e.ghostClass,!0)),it!==f&&f!==Rt.active?it=f:f===Rt.active&&it&&(it=null),h===f&&(f._ignoreWhileAnimating=s),f.animateAll(function(){M("dragOverAnimationComplete"),f._ignoreWhileAnimating=null}),f!==h&&(h.animateAll(),h._ignoreWhileAnimating=null)),(s===z&&!z.animated||s===l&&!s.animated)&&(ht=null),e.dragoverBubble||n.rootEl||s===document||(z.parentNode[j]._isOutsideThisEl(n.target),t||Pt(n)),!e.dragoverBubble&&n.stopPropagation&&n.stopPropagation(),p=!0}function N(){tt=F(z),nt=F(z,e.draggable),W({sortable:f,name:"change",toEl:l,newIndex:tt,newDraggableIndex:nt,originalEvent:n})}},_ignoreWhileAnimating:null,_offMoveEvents:function(){d(document,"mousemove",this._onTouchMove),d(document,"touchmove",this._onTouchMove),d(document,"pointermove",this._onTouchMove),d(document,"dragover",Pt),d(document,"mousemove",Pt),d(document,"touchmove",Pt)},_offUpEvents:function(){var t=this.el.ownerDocument;d(t,"mouseup",this._onDrop),d(t,"touchend",this._onDrop),d(t,"pointerup",this._onDrop),d(t,"touchcancel",this._onDrop),d(document,"selectstart",this)},_onDrop:function(t){var e=this.el,n=this.options;tt=F(z),nt=F(z,n.draggable),K("drop",this,{evt:t}),G=z&&z.parentNode,tt=F(z),nt=F(z,n.draggable),Rt.eventCanceled||(yt=wt=vt=!1,clearInterval(this._loopId),clearTimeout(this._dragStartTimer),Lt(this.cloneId),Lt(this._dragStartId),this.nativeDraggable&&(d(document,"drop",this),d(e,"dragstart",this._onDragStart)),this._offMoveEvents(),this._offUpEvents(),s&&R(document.body,"user-select",""),t&&(dt&&(t.cancelable&&t.preventDefault(),n.dropBubble||t.stopPropagation()),U&&U.parentNode&&U.parentNode.removeChild(U),(q===G||it&&"clone"!==it.lastPutMode)&&Q&&Q.parentNode&&Q.parentNode.removeChild(Q),z&&(this.nativeDraggable&&d(z,"dragend",this),Yt(z),z.style["will-change"]="",dt&&!vt&&k(z,it?it.options.ghostClass:this.options.ghostClass,!1),k(z,this.options.chosenClass,!1),W({sortable:this,name:"unchoose",toEl:G,newIndex:null,newDraggableIndex:null,originalEvent:t}),q!==G?(0<=tt&&(W({rootEl:G,name:"add",toEl:G,fromEl:q,originalEvent:t}),W({sortable:this,name:"remove",toEl:G,originalEvent:t}),W({rootEl:G,name:"sort",toEl:G,fromEl:q,originalEvent:t}),W({sortable:this,name:"sort",toEl:G,originalEvent:t})),it&&it.save()):tt!==J&&0<=tt&&(W({sortable:this,name:"update",toEl:G,originalEvent:t}),W({sortable:this,name:"sort",toEl:G,originalEvent:t})),Rt.active&&(null!=tt&&-1!==tt||(tt=J,nt=et),W({sortable:this,name:"end",toEl:G,originalEvent:t}),this.save())))),this._nulling()},_nulling:function(){K("nulling",this),q=z=G=U=V=Q=Z=$=rt=at=dt=tt=nt=J=et=ht=ft=it=ot=Rt.dragged=Rt.ghost=Rt.clone=Rt.active=null,_t.forEach(function(t){t.checked=!0}),_t.length=lt=st=0},handleEvent:function(t){switch(t.type){case"drop":case"dragend":this._onDrop(t);break;case"dragenter":case"dragover":z&&(this._onDragOver(t),function(t){t.dataTransfer&&(t.dataTransfer.dropEffect="move");t.cancelable&&t.preventDefault()}(t));break;case"selectstart":t.preventDefault()}},toArray:function(){for(var t,e=[],n=this.el.children,o=0,i=n.length,r=this.options;o<i;o++)P(t=n[o],r.draggable,this.el,!1)&&e.push(t.getAttribute(r.dataIdAttr)||Ft(t));return e},sort:function(t){var o={},i=this.el;this.toArray().forEach(function(t,e){var n=i.children[e];P(n,this.options.draggable,i,!1)&&(o[t]=n)},this),t.forEach(function(t){o[t]&&(i.removeChild(o[t]),i.appendChild(o[t]))})},save:function(){var t=this.options.store;t&&t.set&&t.set(this)},closest:function(t,e){return P(t,e||this.options.draggable,this.el,!1)},option:function(t,e){var n=this.options;if(void 0===e)return n[t];var o=O.modifyOption(this,t,e);n[t]=void 0!==o?o:e,"group"===t&&At(n)},destroy:function(){K("destroy",this);var t=this.el;t[j]=null,d(t,"mousedown",this._onTapStart),d(t,"touchstart",this._onTapStart),d(t,"pointerdown",this._onTapStart),this.nativeDraggable&&(d(t,"dragover",this),d(t,"dragenter",this)),Array.prototype.forEach.call(t.querySelectorAll("[draggable]"),function(t){t.removeAttribute("draggable")}),this._onDrop(),bt.splice(bt.indexOf(this.el),1),this.el=t=null},_hideClone:function(){if(!$){if(K("hideClone",this),Rt.eventCanceled)return;R(Q,"display","none"),this.options.removeCloneOnHide&&Q.parentNode&&Q.parentNode.removeChild(Q),$=!0}},_showClone:function(t){if("clone"===t.lastPutMode){if($){if(K("showClone",this),Rt.eventCanceled)return;q.contains(z)&&!this.options.group.revertClone?q.insertBefore(Q,z):V?q.insertBefore(Q,V):q.appendChild(Q),this.options.group.revertClone&&this.animate(z,Q),R(Q,"display",""),$=!1}}else this._hideClone()}},St&&u(document,"touchmove",function(t){(Rt.active||vt)&&t.cancelable&&t.preventDefault()}),Rt.utils={on:u,off:d,css:R,find:g,is:function(t,e){return!!P(t,e,t,!1)},extend:function(t,e){if(t&&e)for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);return t},throttle:D,closest:P,toggleClass:k,clone:_,index:F,nextTick:Ht,cancelNextTick:Lt,detectDirection:Ot,getChild:m},Rt.get=function(t){return t[j]},Rt.mount=function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];e[0].constructor===Array&&(e=e[0]),e.forEach(function(t){if(!t.prototype||!t.prototype.constructor)throw"Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(t));t.utils&&(Rt.utils=I({},Rt.utils,t.utils)),O.mount(t)})},Rt.create=function(t,e){return new Rt(t,e)};var jt,Kt,Wt,zt,Gt,Ut,qt=[],Vt=!(Rt.version="1.10.1");function Zt(){qt.forEach(function(t){clearInterval(t.pid)}),qt=[]}function Qt(){clearInterval(Ut)}function $t(t){var e=t.originalEvent,n=t.putSortable,o=t.dragEl,i=t.activeSortable,r=t.dispatchSortableEvent,a=t.hideGhostForTarget,l=t.unhideGhostForTarget;if(e){var s=n||i;a();var c=e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e,u=document.elementFromPoint(c.clientX,c.clientY);l(),s&&!s.el.contains(u)&&(r("spill"),this.onSpill({dragEl:o,putSortable:n}))}}var Jt,te=D(function(n,t,e,o){if(t.scroll){var i,r=(n.touches?n.touches[0]:n).clientX,a=(n.touches?n.touches[0]:n).clientY,l=t.scrollSensitivity,s=t.scrollSpeed,c=N(),u=!1;Kt!==e&&(Kt=e,Zt(),jt=t.scroll,i=t.scrollFn,!0===jt&&(jt=H(e,!0)));var d=0,h=jt;do{var f=h,p=X(f),g=p.top,v=p.bottom,m=p.left,b=p.right,y=p.width,w=p.height,E=void 0,D=void 0,_=f.scrollWidth,S=f.scrollHeight,C=R(f),T=f.scrollLeft,x=f.scrollTop;D=f===c?(E=y<_&&("auto"===C.overflowX||"scroll"===C.overflowX||"visible"===C.overflowX),w<S&&("auto"===C.overflowY||"scroll"===C.overflowY||"visible"===C.overflowY)):(E=y<_&&("auto"===C.overflowX||"scroll"===C.overflowX),w<S&&("auto"===C.overflowY||"scroll"===C.overflowY));var M=E&&(Math.abs(b-r)<=l&&T+y<_)-(Math.abs(m-r)<=l&&!!T),O=D&&(Math.abs(v-a)<=l&&x+w<S)-(Math.abs(g-a)<=l&&!!x);if(!qt[d])for(var A=0;A<=d;A++)qt[A]||(qt[A]={});qt[d].vx==M&&qt[d].vy==O&&qt[d].el===f||(qt[d].el=f,qt[d].vx=M,qt[d].vy=O,clearInterval(qt[d].pid),0==M&&0==O||(u=!0,qt[d].pid=setInterval(function(){o&&0===this.layer&&Rt.active._onTouchMove(Gt);var t=qt[this.layer].vy?qt[this.layer].vy*s:0,e=qt[this.layer].vx?qt[this.layer].vx*s:0;"function"==typeof i&&"continue"!==i.call(Rt.dragged.parentNode[j],e,t,n,Gt,qt[this.layer].el)||L(qt[this.layer].el,e,t)}.bind({layer:d}),24))),d++}while(t.bubbleScroll&&h!==c&&(h=H(h,!1)));Vt=u}},30);function ee(){}function ne(){}ee.prototype={startIndex:null,dragStart:function(t){var e=t.oldDraggableIndex;this.startIndex=e},onSpill:function(t){var e=t.dragEl,n=t.putSortable;this.sortable.captureAnimationState(),n&&n.captureAnimationState();var o=m(this.sortable.el,this.startIndex,this.options);o?this.sortable.el.insertBefore(e,o):this.sortable.el.appendChild(e),this.sortable.animateAll(),n&&n.animateAll()},drop:$t},a(ee,{pluginName:"revertOnSpill"}),ne.prototype={onSpill:function(t){var e=t.dragEl,n=t.putSortable||this.sortable;n.captureAnimationState(),e.parentNode&&e.parentNode.removeChild(e),n.animateAll()},drop:$t},a(ne,{pluginName:"removeOnSpill"});var oe,ie,re,ae,le,se=[],ce=[],ue=!1,de=!1,he=!1;function fe(o,i){ce.forEach(function(t,e){var n=i.children[t.sortableIndex+(o?Number(e):0)];n?i.insertBefore(t,n):i.appendChild(t)})}function pe(){se.forEach(function(t){t!==re&&t.parentNode&&t.parentNode.removeChild(t)})}return Rt.mount(new function(){function t(){for(var t in this.defaults={scroll:!0,scrollSensitivity:30,scrollSpeed:10,bubbleScroll:!0},this)"_"===t.charAt(0)&&"function"==typeof this[t]&&(this[t]=this[t].bind(this))}return t.prototype={dragStarted:function(t){var e=t.originalEvent;this.sortable.nativeDraggable?u(document,"dragover",this._handleAutoScroll):this.options.supportPointer?u(document,"pointermove",this._handleFallbackAutoScroll):e.touches?u(document,"touchmove",this._handleFallbackAutoScroll):u(document,"mousemove",this._handleFallbackAutoScroll)},dragOverCompleted:function(t){var e=t.originalEvent;this.options.dragOverBubble||e.rootEl||this._handleAutoScroll(e)},drop:function(){this.sortable.nativeDraggable?d(document,"dragover",this._handleAutoScroll):(d(document,"pointermove",this._handleFallbackAutoScroll),d(document,"touchmove",this._handleFallbackAutoScroll),d(document,"mousemove",this._handleFallbackAutoScroll)),Qt(),Zt(),clearTimeout(f),f=void 0},nulling:function(){Gt=Kt=jt=Vt=Ut=Wt=zt=null,qt.length=0},_handleFallbackAutoScroll:function(t){this._handleAutoScroll(t,!0)},_handleAutoScroll:function(e,n){var o=this,i=(e.touches?e.touches[0]:e).clientX,r=(e.touches?e.touches[0]:e).clientY,t=document.elementFromPoint(i,r);if(Gt=e,n||E||w||s){te(e,this.options,t,n);var a=H(t,!0);!Vt||Ut&&i===Wt&&r===zt||(Ut&&Qt(),Ut=setInterval(function(){var t=H(document.elementFromPoint(i,r),!0);t!==a&&(a=t,Zt()),te(e,o.options,t,n)},10),Wt=i,zt=r)}else{if(!this.options.bubbleScroll||H(t,!0)===N())return void Zt();te(e,this.options,H(t,!1),!1)}}},a(t,{pluginName:"scroll",initializeByDefault:!0})}),Rt.mount(ne,ee),Rt.mount(new function(){function t(){this.defaults={swapClass:"sortable-swap-highlight"}}return t.prototype={dragStart:function(t){var e=t.dragEl;Jt=e},dragOverValid:function(t){var e=t.completed,n=t.target,o=t.onMove,i=t.activeSortable,r=t.changed,a=t.cancel;if(i.options.swap){var l=this.sortable.el,s=this.options;if(n&&n!==l){var c=Jt;Jt=!1!==o(n)?(k(n,s.swapClass,!0),n):null,c&&c!==Jt&&k(c,s.swapClass,!1)}r(),e(!0),a()}},drop:function(t){var e=t.activeSortable,n=t.putSortable,o=t.dragEl,i=n||this.sortable,r=this.options;Jt&&k(Jt,r.swapClass,!1),Jt&&(r.swap||n&&n.options.swap)&&o!==Jt&&(i.captureAnimationState(),i!==e&&e.captureAnimationState(),function(t,e){var n,o,i=t.parentNode,r=e.parentNode;if(!i||!r||i.isEqualNode(e)||r.isEqualNode(t))return;n=F(t),o=F(e),i.isEqualNode(r)&&n<o&&o++;i.insertBefore(e,i.children[n]),r.insertBefore(t,r.children[o])}(o,Jt),i.animateAll(),i!==e&&e.animateAll())},nulling:function(){Jt=null}},a(t,{pluginName:"swap",eventProperties:function(){return{swapItem:Jt}}})}),Rt.mount(new function(){function t(o){for(var t in this)"_"===t.charAt(0)&&"function"==typeof this[t]&&(this[t]=this[t].bind(this));o.options.supportPointer?u(document,"pointerup",this._deselectMultiDrag):(u(document,"mouseup",this._deselectMultiDrag),u(document,"touchend",this._deselectMultiDrag)),u(document,"keydown",this._checkKeyDown),u(document,"keyup",this._checkKeyUp),this.defaults={selectedClass:"sortable-selected",multiDragKey:null,setData:function(t,e){var n="";se.length&&ie===o?se.forEach(function(t,e){n+=(e?", ":"")+t.textContent}):n=e.textContent,t.setData("Text",n)}}}return t.prototype={multiDragKeyDown:!1,isMultiDrag:!1,delayStartGlobal:function(t){var e=t.dragEl;re=e},delayEnded:function(){this.isMultiDrag=~se.indexOf(re)},setupClone:function(t){var e=t.sortable,n=t.cancel;if(this.isMultiDrag){for(var o=0;o<se.length;o++)ce.push(_(se[o])),ce[o].sortableIndex=se[o].sortableIndex,ce[o].draggable=!1,ce[o].style["will-change"]="",k(ce[o],this.options.selectedClass,!1),se[o]===re&&k(ce[o],this.options.chosenClass,!1);e._hideClone(),n()}},clone:function(t){var e=t.sortable,n=t.rootEl,o=t.dispatchSortableEvent,i=t.cancel;this.isMultiDrag&&(this.options.removeCloneOnHide||se.length&&ie===e&&(fe(!0,n),o("clone"),i()))},showClone:function(t){var e=t.cloneNowShown,n=t.rootEl,o=t.cancel;this.isMultiDrag&&(fe(!1,n),ce.forEach(function(t){R(t,"display","")}),e(),le=!1,o())},hideClone:function(t){var e=this,n=(t.sortable,t.cloneNowHidden),o=t.cancel;this.isMultiDrag&&(ce.forEach(function(t){R(t,"display","none"),e.options.removeCloneOnHide&&t.parentNode&&t.parentNode.removeChild(t)}),n(),le=!0,o())},dragStartGlobal:function(t){t.sortable;!this.isMultiDrag&&ie&&ie.multiDrag._deselectMultiDrag(),se.forEach(function(t){t.sortableIndex=F(t)}),se=se.sort(function(t,e){return t.sortableIndex-e.sortableIndex}),he=!0},dragStarted:function(t){var e=this,n=t.sortable;if(this.isMultiDrag){if(this.options.sort&&(n.captureAnimationState(),this.options.animation)){se.forEach(function(t){t!==re&&R(t,"position","absolute")});var o=X(re,!1,!0,!0);se.forEach(function(t){t!==re&&S(t,o)}),ue=de=!0}n.animateAll(function(){ue=de=!1,e.options.animation&&se.forEach(function(t){C(t)}),e.options.sort&&pe()})}},dragOver:function(t){var e=t.target,n=t.completed,o=t.cancel;de&&~se.indexOf(e)&&(n(!1),o())},revert:function(t){var e=t.fromSortable,n=t.rootEl,o=t.sortable,i=t.dragRect;1<se.length&&(se.forEach(function(t){o.addAnimationState({target:t,rect:de?X(t):i}),C(t),t.fromRect=i,e.removeAnimationState(t)}),de=!1,function(o,i){se.forEach(function(t,e){var n=i.children[t.sortableIndex+(o?Number(e):0)];n?i.insertBefore(t,n):i.appendChild(t)})}(!this.options.removeCloneOnHide,n))},dragOverCompleted:function(t){var e=t.sortable,n=t.isOwner,o=t.insertion,i=t.activeSortable,r=t.parentEl,a=t.putSortable,l=this.options;if(o){if(n&&i._hideClone(),ue=!1,l.animation&&1<se.length&&(de||!n&&!i.options.sort&&!a)){var s=X(re,!1,!0,!0);se.forEach(function(t){t!==re&&(S(t,s),r.appendChild(t))}),de=!0}if(!n)if(de||pe(),1<se.length){var c=le;i._showClone(e),i.options.animation&&!le&&c&&ce.forEach(function(t){i.addAnimationState({target:t,rect:ae}),t.fromRect=ae,t.thisAnimationDuration=null})}else i._showClone(e)}},dragOverAnimationCapture:function(t){var e=t.dragRect,n=t.isOwner,o=t.activeSortable;if(se.forEach(function(t){t.thisAnimationDuration=null}),o.options.animation&&!n&&o.multiDrag.isMultiDrag){ae=a({},e);var i=v(re,!0);ae.top-=i.f,ae.left-=i.e}},dragOverAnimationComplete:function(){de&&(de=!1,pe())},drop:function(t){var e=t.originalEvent,n=t.rootEl,o=t.parentEl,i=t.sortable,r=t.dispatchSortableEvent,a=t.oldIndex,l=t.putSortable,s=l||this.sortable;if(e){var c=this.options,u=o.children;if(!he)if(c.multiDragKey&&!this.multiDragKeyDown&&this._deselectMultiDrag(),k(re,c.selectedClass,!~se.indexOf(re)),~se.indexOf(re))se.splice(se.indexOf(re),1),oe=null,A({sortable:i,rootEl:n,name:"deselect",targetEl:re,originalEvt:e});else{if(se.push(re),A({sortable:i,rootEl:n,name:"select",targetEl:re,originalEvt:e}),e.shiftKey&&oe&&i.el.contains(oe)){var d,h,f=F(oe),p=F(re);if(~f&&~p&&f!==p)for(d=f<p?(h=f,p):(h=p,f+1);h<d;h++)~se.indexOf(u[h])||(k(u[h],c.selectedClass,!0),se.push(u[h]),A({sortable:i,rootEl:n,name:"select",targetEl:u[h],originalEvt:e}))}else oe=re;ie=s}if(he&&this.isMultiDrag){if((o[j].options.sort||o!==n)&&1<se.length){var g=X(re),v=F(re,":not(."+this.options.selectedClass+")");if(!ue&&c.animation&&(re.thisAnimationDuration=null),s.captureAnimationState(),!ue&&(c.animation&&(re.fromRect=g,se.forEach(function(t){if(t.thisAnimationDuration=null,t!==re){var e=de?X(t):g;t.fromRect=e,s.addAnimationState({target:t,rect:e})}})),pe(),se.forEach(function(t){u[v]?o.insertBefore(t,u[v]):o.appendChild(t),v++}),a===F(re))){var m=!1;se.forEach(function(t){t.sortableIndex===F(t)||(m=!0)}),m&&r("update")}se.forEach(function(t){C(t)}),s.animateAll()}ie=s}(n===o||l&&"clone"!==l.lastPutMode)&&ce.forEach(function(t){t.parentNode&&t.parentNode.removeChild(t)})}},nullingGlobal:function(){this.isMultiDrag=he=!1,ce.length=0},destroyGlobal:function(){this._deselectMultiDrag(),d(document,"pointerup",this._deselectMultiDrag),d(document,"mouseup",this._deselectMultiDrag),d(document,"touchend",this._deselectMultiDrag),d(document,"keydown",this._checkKeyDown),d(document,"keyup",this._checkKeyUp)},_deselectMultiDrag:function(t){if(!he&&ie===this.sortable&&!(t&&P(t.target,this.options.draggable,this.sortable.el,!1)||t&&0!==t.button))for(;se.length;){var e=se[0];k(e,this.options.selectedClass,!1),se.shift(),A({sortable:this.sortable,rootEl:this.sortable.el,name:"deselect",targetEl:e,originalEvt:t})}},_checkKeyDown:function(t){t.key===this.options.multiDragKey&&(this.multiDragKeyDown=!0)},_checkKeyUp:function(t){t.key===this.options.multiDragKey&&(this.multiDragKeyDown=!1)}},a(t,{pluginName:"multiDrag",utils:{select:function(t){var e=t.parentNode[j];e&&e.options.multiDrag&&!~se.indexOf(t)&&(ie&&ie!==e&&(ie.multiDrag._deselectMultiDrag(),ie=e),k(t,e.options.selectedClass,!0),se.push(t))},deselect:function(t){var e=t.parentNode[j],n=se.indexOf(t);e&&e.options.multiDrag&&~n&&(k(t,e.options.selectedClass,!1),se.splice(n,1))}},eventProperties:function(){var n=this,o=[],i=[];return se.forEach(function(t){var e;o.push({multiDragElement:t,index:t.sortableIndex}),e=de&&t!==re?-1:de?F(t,":not(."+n.options.selectedClass+")"):F(t),i.push({multiDragElement:t,index:e})}),{items:e(se),clones:[].concat(ce),oldIndicies:o,newIndicies:i}},optionListeners:{multiDragKey:function(t){return"ctrl"===(t=t.toLowerCase())?t="Control":1<t.length&&(t=t.charAt(0).toUpperCase()+t.substr(1)),t}}})}),Rt});
\ No newline at end of file
diff --git a/view/frontend/templates/widget/categorywidget/default.phtml b/view/frontend/templates/widget/categorywidget/default.phtml
new file mode 100755
index 0000000000000000000000000000000000000000..c187c7795d6321687f44c3c47d85ddf17bc1373c
--- /dev/null
+++ b/view/frontend/templates/widget/categorywidget/default.phtml
@@ -0,0 +1,87 @@
+<?php
+
+use \NicolasBejean\CategoryWidget\Block\Widget\CategoryWidget;
+
+/** @var CategoryWidget $block */
+$slider = $block->getSlider();
+$sliderContent = $block->getSliderContent($slider->getContent());
+$active = $slider->isActive();
+$activeTitle = $block->getActiveTitle();
+$activeContent = $block->getActiveContent();
+$activeWrapper = $block->getActiveImageWrapper();
+$activeLink = $block->getActiveLink();
+
+if ($active) {
+ $imageCollection = [];
+ $iteration = 0;
+
+ foreach ($sliderContent as $image) {
+ if ($image['is_active']) {
+ $imageCollection[$iteration]['path'] = $block->getResizeImage($image['path'], $block->getWidth(), $block->getHeight());
+ $imageCollection[$iteration]['width'] = $block->getResizedImageWidth($imageCollection[$iteration]['path']);
+ $imageCollection[$iteration]['height'] = $block->getResizedImageHeight($imageCollection[$iteration]['path']);
+ $imageCollection[$iteration]['alt'] = $image['alt'];
+ }
+ $iteration++;
+ }
+}
+?>
+
+<?php if ($active): ?>
+ <?php if ($activeWrapper): ?>
+ <div class="imageslidermanager <?php if ($block->getWrapperCssClasses()): ?><?= /* @noEscape */ $block->getWrapperCssClasses(); ?><?php endif; ?>">
+ <?php endif; ?>
+ <?php if ($activeTitle || $activeContent): ?>
+ <div class="imageslidermanager-title-content <?php if ($block->getWidgetTitleCSS()): ?><?= /* @noEscape */ $block->getWidgetTitleCSS(); ?><?php endif; ?>">
+ <?php if ($activeTitle): ?>
+ <<?= /* @noEscape */ $block->getWidgetTitleTag(); ?>><?= /* @noEscape */ $block->getWidgetTitle() ?></<?= /* @noEscape */ $block->getWidgetTitleTag(); ?>>
+ <?php endif; ?>
+ <?php if ($activeContent): ?>
+ <p class="<?php if ($block->getWidgetContentCSS()): ?><?= /* @noEscape */ $block->getWidgetContentCSS(); ?><?php endif; ?>"><?= /* @noEscape */ $block->getWidgetContent(); ?></p>
+ <?php endif; ?>
+ </div>
+ <?php endif; ?>
+
+ <?php if ($activeLink): ?>
+ <a href="<?= /* @noEscape */ $block->getLinkHref(); ?>" target="<?= /* @noEscape */ $block->getLinkTarget(); ?>">
+ <?php endif; ?>
+
+ <div class="imageslidermanager-imageslider glide hero" style="width: <?= /* @noEscape */ $block->getWidth(); ?>px; height: <?= /* @noEscape */ $block->getHeight(); ?>px;">
+ <div class="glide__track" data-glide-el="track">
+ <ul class="glide__slides">
+ <?php foreach ($imageCollection as $image) : ?>
+ <li class="glide__slide">
+ <img src="<?php echo /* @noEscape */ $image['path']; ?>"
+ <?php if ($block->getCssClasses()): ?>class="<?= /* @noEscape */ $block->getCssClasses(); ?>"<?php endif; ?>
+ alt="<?= /* @noEscape */ $image['alt']; ?>"
+ <?php if ($block->getExtraCss()): ?>style="<?= /* @noEscape */ $block->getExtraCss(); ?>"<?php endif; ?>
+ <?php if ($block->getDataBind()): ?>data-bind="<?= /* @noEscape */ $block->getDataBind(); ?>"<?php endif; ?>
+ width="<?= /* @noEscape */ $image['width']; ?>"
+ height="<?= /* @noEscape */ $image['height']; ?>"
+ />
+ </li>
+ <?php endforeach; ?>
+ </ul>
+ </div>
+ <?php if (count($sliderContent) > 1): ?>
+ <div class="glide__arrows" data-glide-el="controls">
+ <button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
+ <button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
+ </div>
+ <?php endif; ?>
+ </div>
+
+ <?php if ($activeLink): ?>
+ </a>
+ <?php endif; ?>
+ <?php if ($activeWrapper): ?>
+ </div>
+ <?php endif; ?>
+ <?php if (count($sliderContent) > 1): ?>
+ <script>
+ require(['jquery', 'NicolasBejean_CategoryWidget/js/glide', 'domReady!'], function($, Glide){
+ new Glide('.glide').mount();
+ });
+ </script>
+ <?php endif; ?>
+<?php endif; ?>
diff --git a/view/frontend/web/css/glide.core.css b/view/frontend/web/css/glide.core.css
new file mode 100644
index 0000000000000000000000000000000000000000..bbce69c2db7da6db2c406992659cf85f6d923aed
--- /dev/null
+++ b/view/frontend/web/css/glide.core.css
@@ -0,0 +1,44 @@
+.glide {
+ position: relative;
+ width: 100%;
+ box-sizing: border-box; }
+ .glide * {
+ box-sizing: inherit; }
+ .glide__track {
+ overflow: hidden; }
+ .glide__slides {
+ position: relative;
+ width: 100%;
+ list-style: none;
+ backface-visibility: hidden;
+ transform-style: preserve-3d;
+ touch-action: pan-Y;
+ overflow: hidden;
+ padding: 0;
+ white-space: nowrap;
+ display: flex;
+ flex-wrap: nowrap;
+ will-change: transform; }
+ .glide__slides--dragging {
+ user-select: none; }
+ .glide__slide {
+ width: 100%;
+ height: 100%;
+ flex-shrink: 0;
+ white-space: initial;
+ user-select: none;
+ -webkit-touch-callout: none;
+ -webkit-tap-highlight-color: transparent; }
+ .glide__slide a {
+ user-select: none;
+ -webkit-user-drag: none;
+ -moz-user-select: none;
+ -ms-user-select: none; }
+ .glide__arrows {
+ -webkit-touch-callout: none;
+ user-select: none; }
+ .glide__bullets {
+ -webkit-touch-callout: none;
+ user-select: none; }
+ .glide--rtl {
+ direction: rtl; }
diff --git a/view/frontend/web/css/glide.theme.css b/view/frontend/web/css/glide.theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..ec68fe99877c78a9e0354d90785a14517db2e618
--- /dev/null
+++ b/view/frontend/web/css/glide.theme.css
@@ -0,0 +1,70 @@
+.glide__arrow {
+ position: absolute;
+ display: block;
+ top: 50%;
+ z-index: 2;
+ color: white;
+ text-transform: uppercase;
+ padding: 9px 12px;
+ background-color: transparent;
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ border-radius: 4px;
+ box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
+ text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+ opacity: 1;
+ cursor: pointer;
+ transition: opacity 150ms ease, border 300ms ease-in-out;
+ transform: translateY(-50%);
+ line-height: 1; }
+ .glide__arrow:focus {
+ outline: none; }
+ .glide__arrow:hover {
+ border-color: white; }
+ .glide__arrow--left {
+ left: 2em; }
+ .glide__arrow--right {
+ right: 2em; }
+ .glide__arrow--disabled {
+ opacity: 0.33; }
+
+.glide__bullets {
+ position: absolute;
+ z-index: 2;
+ bottom: 2em;
+ left: 50%;
+ display: inline-flex;
+ list-style: none;
+ transform: translateX(-50%); }
+
+.glide__bullet {
+ background-color: rgba(255, 255, 255, 0.5);
+ width: 9px;
+ height: 9px;
+ padding: 0;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ transition: all 300ms ease-in-out;
+ cursor: pointer;
+ line-height: 0;
+ box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
+ margin: 0 0.25em; }
+ .glide__bullet:focus {
+ outline: none; }
+ .glide__bullet:hover, .glide__bullet:focus {
+ border: 2px solid white;
+ background-color: rgba(255, 255, 255, 0.5); }
+ .glide__bullet--active {
+ background-color: white; }
+
+.glide--swipeable {
+ cursor: grab;
+ cursor: -moz-grab;
+ cursor: -webkit-grab; }
+
+.glide--dragging {
+ cursor: grabbing;
+ cursor: -moz-grabbing;
+ cursor: -webkit-grabbing; }
+
+.glide__arrow--prev { left: 0; }
+.glide__arrow--next { right: 0; }
\ No newline at end of file
diff --git a/view/frontend/web/js/glide.js b/view/frontend/web/js/glide.js
new file mode 100644
index 0000000000000000000000000000000000000000..725172a504bb34cbf0288a499aedd542ff64729f
--- /dev/null
+++ b/view/frontend/web/js/glide.js
@@ -0,0 +1,3604 @@
+/*!
+ * Glide.js v3.0.2
+ * (c) 2013-2018 Jędrzej Chałubek <jedrzej.chalubek@gmail.com> (http://jedrzejchalubek.com/)
+ * Released under the MIT License.
+ */
+
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+ typeof define === 'function' && define.amd ? define(factory) :
+ (global.Glide = factory());
+}(this, (function () { 'use strict';
+
+var defaults = {
+ /**
+ * Type of the movement.
+ *
+ * Available types:
+ * `slider` - Rewinds slider to the start/end when it reaches the first or last slide.
+ * `carousel` - Changes slides without starting over when it reaches the first or last slide.
+ *
+ * @type {String}
+ */
+ type: 'slider',
+
+ /**
+ * Start at specific slide number defined with zero-based index.
+ *
+ * @type {Number}
+ */
+ startAt: 0,
+
+ /**
+ * A number of slides visible on the single viewport.
+ *
+ * @type {Number}
+ */
+ perView: 1,
+
+ /**
+ * Focus currently active slide at a specified position in the track.
+ *
+ * Available inputs:
+ * `center` - Current slide will be always focused at the center of a track.
+ * `0,1,2,3...` - Current slide will be focused on the specified zero-based index.
+ *
+ * @type {String|Number}
+ */
+ focusAt: 0,
+
+ /**
+ * A size of the gap added between slides.
+ *
+ * @type {Number}
+ */
+ gap: 10,
+
+ /**
+ * Change slides after a specified interval. Use `false` for turning off autoplay.
+ *
+ * @type {Number|Boolean}
+ */
+ autoplay: false,
+
+ /**
+ * Stop autoplay on mouseover event.
+ *
+ * @type {Boolean}
+ */
+ hoverpause: true,
+
+ /**
+ * Allow for changing slides with left and right keyboard arrows.
+ *
+ * @type {Boolean}
+ */
+ keyboard: true,
+
+ /**
+ * Minimal swipe distance needed to change the slide. Use `false` for turning off a swiping.
+ *
+ * @type {Number|Boolean}
+ */
+ swipeThreshold: 80,
+
+ /**
+ * Minimal mouse drag distance needed to change the slide. Use `false` for turning off a dragging.
+ *
+ * @type {Number|Boolean}
+ */
+ dragThreshold: 120,
+
+ /**
+ * A maximum number of slides to which movement will be made on swiping or dragging. Use `false` for unlimited.
+ *
+ * @type {Number|Boolean}
+ */
+ perTouch: false,
+
+ /**
+ * Moving distance ratio of the slides on a swiping and dragging.
+ *
+ * @type {Number}
+ */
+ touchRatio: 0.5,
+
+ /**
+ * Angle required to activate slides moving on swiping or dragging.
+ *
+ * @type {Number}
+ */
+ touchAngle: 45,
+
+ /**
+ * Duration of the animation in milliseconds.
+ *
+ * @type {Number}
+ */
+ animationDuration: 400,
+
+ /**
+ * Duration of the rewinding animation of the `slider` type in milliseconds.
+ *
+ * @type {Number}
+ */
+ rewindDuration: 800,
+
+ /**
+ * Easing function for the animation.
+ *
+ * @type {String}
+ */
+ animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
+
+ /**
+ * Throttle costly events at most once per every wait milliseconds.
+ *
+ * @type {Number}
+ */
+ throttle: 10,
+
+ /**
+ * Moving direction mode.
+ *
+ * Available inputs:
+ * - 'ltr' - left to right movement,
+ * - 'rtl' - right to left movement.
+ *
+ * @type {String}
+ */
+ direction: 'ltr',
+
+ /**
+ * The distance value of the next and previous viewports which
+ * have to peek in the current view. Accepts number and
+ * pixels as a string. Left and right peeking can be
+ * set up separately with a directions object.
+ *
+ * For example:
+ * `100` - Peek 100px on the both sides.
+ * { before: 100, after: 50 }` - Peek 100px on the left side and 50px on the right side.
+ *
+ * @type {Number|String|Object}
+ */
+ peek: 0,
+
+ /**
+ * Collection of options applied at specified media breakpoints.
+ * For example: display two slides per view under 800px.
+ * `{
+ * '800px': {
+ * perView: 2
+ * }
+ * }`
+ */
+ breakpoints: {},
+
+ /**
+ * Collection of internally used HTML classes.
+ *
+ * @todo Refactor `slider` and `carousel` properties to single `type: { slider: '', carousel: '' }` object
+ * @type {Object}
+ */
+ classes: {
+ direction: {
+ ltr: 'glide--ltr',
+ rtl: 'glide--rtl'
+ },
+ slider: 'glide--slider',
+ carousel: 'glide--carousel',
+ swipeable: 'glide--swipeable',
+ dragging: 'glide--dragging',
+ cloneSlide: 'glide__slide--clone',
+ activeNav: 'glide__bullet--active',
+ activeSlide: 'glide__slide--active',
+ disabledArrow: 'glide__arrow--disabled'
+ }
+};
+
+/**
+ * Outputs warning message to the bowser console.
+ *
+ * @param {String} msg
+ * @return {Void}
+ */
+function warn(msg) {
+ console.error("[Glide warn]: " + msg);
+}
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+ return typeof obj;
+} : function (obj) {
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
+
+
+
+
+
+
+
+
+
+
+var classCallCheck = function (instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
+ }
+};
+
+var createClass = function () {
+ function defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+
+ return function (Constructor, protoProps, staticProps) {
+ if (protoProps) defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) defineProperties(Constructor, staticProps);
+ return Constructor;
+ };
+}();
+
+
+
+
+
+
+
+var _extends = Object.assign || function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
+ }
+ }
+ }
+
+ return target;
+};
+
+var get = function get(object, property, receiver) {
+ if (object === null) object = Function.prototype;
+ var desc = Object.getOwnPropertyDescriptor(object, property);
+
+ if (desc === undefined) {
+ var parent = Object.getPrototypeOf(object);
+
+ if (parent === null) {
+ return undefined;
+ } else {
+ return get(parent, property, receiver);
+ }
+ } else if ("value" in desc) {
+ return desc.value;
+ } else {
+ var getter = desc.get;
+
+ if (getter === undefined) {
+ return undefined;
+ }
+
+ return getter.call(receiver);
+ }
+};
+
+var inherits = function (subClass, superClass) {
+ if (typeof superClass !== "function" && superClass !== null) {
+ throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+ }
+
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ enumerable: false,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+
+
+
+
+
+
+
+
+
+
+
+var possibleConstructorReturn = function (self, call) {
+ if (!self) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+/**
+ * Converts value entered as number
+ * or string to integer value.
+ *
+ * @param {String} value
+ * @returns {Number}
+ */
+function toInt(value) {
+ return parseInt(value);
+}
+
+/**
+ * Indicates whether the specified value is a string.
+ *
+ * @param {*} value
+ * @return {Boolean}
+ */
+function isString(value) {
+ return typeof value === 'string';
+}
+
+/**
+ * Indicates whether the specified value is an object.
+ *
+ * @param {*} value
+ * @return {Boolean}
+ *
+ * @see https://github.com/jashkenas/underscore
+ */
+function isObject(value) {
+ var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
+
+ return type === 'function' || type === 'object' && !!value; // eslint-disable-line no-mixed-operators
+}
+
+/**
+ * Indicates whether the specified value is a number.
+ *
+ * @param {*} value
+ * @return {Boolean}
+ */
+function isNumber(value) {
+ return typeof value === 'number';
+}
+
+/**
+ * Indicates whether the specified value is a function.
+ *
+ * @param {*} value
+ * @return {Boolean}
+ */
+function isFunction(value) {
+ return typeof value === 'function';
+}
+
+/**
+ * Indicates whether the specified value is undefined.
+ *
+ * @param {*} value
+ * @return {Boolean}
+ */
+function isUndefined(value) {
+ return typeof value === 'undefined';
+}
+
+/**
+ * Indicates whether the specified value is an array.
+ *
+ * @param {*} value
+ * @return {Boolean}
+ */
+function isArray(value) {
+ return value.constructor === Array;
+}
+
+/**
+ * Creates and initializes specified collection of extensions.
+ * Each extension receives access to instance of glide and rest of components.
+ *
+ * @param {Object} glide
+ * @param {Object} extensions
+ *
+ * @returns {Object}
+ */
+function mount(glide, extensions, events) {
+ var components = {};
+
+ for (var name in extensions) {
+ if (isFunction(extensions[name])) {
+ components[name] = extensions[name](glide, components, events);
+ } else {
+ warn('Extension must be a function');
+ }
+ }
+
+ for (var _name in components) {
+ if (isFunction(components[_name].mount)) {
+ components[_name].mount();
+ }
+ }
+
+ return components;
+}
+
+/**
+ * Defines getter and setter property on the specified object.
+ *
+ * @param {Object} obj Object where property has to be defined.
+ * @param {String} prop Name of the defined property.
+ * @param {Object} definition Get and set definitions for the property.
+ * @return {Void}
+ */
+function define(obj, prop, definition) {
+ Object.defineProperty(obj, prop, definition);
+}
+
+/**
+ * Sorts aphabetically object keys.
+ *
+ * @param {Object} obj
+ * @return {Object}
+ */
+function sortKeys(obj) {
+ return Object.keys(obj).sort().reduce(function (r, k) {
+ r[k] = obj[k];
+
+ return r[k], r;
+ }, {});
+}
+
+/**
+ * Merges passed settings object with default options.
+ *
+ * @param {Object} defaults
+ * @param {Object} settings
+ * @return {Object}
+ */
+function mergeOptions(defaults, settings) {
+ var options = _extends({}, defaults, settings);
+
+ // `Object.assign` do not deeply merge objects, so we
+ // have to do it manually for every nested object
+ // in options. Although it does not look smart,
+ // it's smaller and faster than some fancy
+ // merging deep-merge algorithm script.
+ if (settings.hasOwnProperty('classes')) {
+ options.classes = _extends({}, defaults.classes, settings.classes);
+
+ if (settings.classes.hasOwnProperty('direction')) {
+ options.classes.direction = _extends({}, defaults.classes.direction, settings.classes.direction);
+ }
+ }
+
+ return options;
+}
+
+var EventsBus = function () {
+ /**
+ * Construct a EventBus instance.
+ *
+ * @param {Object} events
+ */
+ function EventsBus() {
+ var events = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+ classCallCheck(this, EventsBus);
+
+ this.events = events;
+ this.hop = events.hasOwnProperty;
+ }
+
+ /**
+ * Adds listener to the specifed event.
+ *
+ * @param {String|Array} event
+ * @param {Function} handler
+ */
+
+
+ createClass(EventsBus, [{
+ key: 'on',
+ value: function on(event, handler) {
+ if (isArray(event)) {
+ for (var i = 0; i < event.length; i++) {
+ this.on(event[i], handler);
+ }
+ }
+
+ // Create the event's object if not yet created
+ if (!this.hop.call(this.events, event)) {
+ this.events[event] = [];
+ }
+
+ // Add the handler to queue
+ var index = this.events[event].push(handler) - 1;
+
+ // Provide handle back for removal of event
+ return {
+ remove: function remove() {
+ delete this.events[event][index];
+ }
+ };
+ }
+
+ /**
+ * Runs registered handlers for specified event.
+ *
+ * @param {String|Array} event
+ * @param {Object=} context
+ */
+
+ }, {
+ key: 'emit',
+ value: function emit(event, context) {
+ if (isArray(event)) {
+ for (var i = 0; i < event.length; i++) {
+ this.emit(event[i], context);
+ }
+ }
+
+ // If the event doesn't exist, or there's no handlers in queue, just leave
+ if (!this.hop.call(this.events, event)) {
+ return;
+ }
+
+ // Cycle through events queue, fire!
+ this.events[event].forEach(function (item) {
+ item(context || {});
+ });
+ }
+ }]);
+ return EventsBus;
+}();
+
+var Glide$2 = function () {
+ /**
+ * Construct glide.
+ *
+ * @param {String} selector
+ * @param {Object} options
+ */
+ function Glide(selector) {
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+ classCallCheck(this, Glide);
+
+ this._c = {};
+ this._e = new EventsBus();
+
+ this.disabled = false;
+ this.selector = selector;
+ this.settings = mergeOptions(defaults, options);
+ this.index = this.settings.startAt;
+ }
+
+ /**
+ * Initializes glide.
+ *
+ * @param {Object} extensions Collection of extensions to initialize.
+ * @return {Glide}
+ */
+
+
+ createClass(Glide, [{
+ key: 'mount',
+ value: function mount$$1() {
+ var extensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+ this._e.emit('mount.before');
+
+ if (isObject(extensions)) {
+ this._c = mount(this, extensions, this._e);
+ } else {
+ warn('You need to provide a object on `mount()`');
+ }
+
+ this._e.emit('mount.after');
+
+ return this;
+ }
+
+ /**
+ * Updates glide with specified settings.
+ *
+ * @param {Object} settings
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'update',
+ value: function update() {
+ var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+ this.settings = _extends({}, this.settings, settings);
+
+ if (settings.hasOwnProperty('startAt')) {
+ this.index = settings.startAt;
+ }
+
+ this._e.emit('update');
+
+ return this;
+ }
+
+ /**
+ * Change slide with specified pattern. A pattern must be in the special format:
+ * `>` - Move one forward
+ * `<` - Move one backward
+ * `={i}` - Go to {i} zero-based slide (eq. '=1', will go to second slide)
+ * `>>` - Rewinds to end (last slide)
+ * `<<` - Rewinds to start (first slide)
+ *
+ * @param {String} pattern
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'go',
+ value: function go(pattern) {
+ this._c.Run.make(pattern);
+
+ return this;
+ }
+
+ /**
+ * Move track by specified distance.
+ *
+ * @param {String} distance
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'move',
+ value: function move(distance) {
+ this._c.Transition.disable();
+ this._c.Move.make(distance);
+
+ return this;
+ }
+
+ /**
+ * Destroy instance and revert all changes done by this._c.
+ *
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'destroy',
+ value: function destroy() {
+ this._e.emit('destroy');
+
+ return this;
+ }
+
+ /**
+ * Start instance autoplaying.
+ *
+ * @param {Boolean|Number} interval Run autoplaying with passed interval regardless of `autoplay` settings
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'play',
+ value: function play() {
+ var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+ if (interval) {
+ this.settings.autoplay = interval;
+ }
+
+ this._e.emit('play');
+
+ return this;
+ }
+
+ /**
+ * Stop instance autoplaying.
+ *
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'pause',
+ value: function pause() {
+ this._e.emit('pause');
+
+ return this;
+ }
+
+ /**
+ * Sets glide into a idle status.
+ *
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'disable',
+ value: function disable() {
+ this.disabled = true;
+
+ return this;
+ }
+
+ /**
+ * Sets glide into a active status.
+ *
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'enable',
+ value: function enable() {
+ this.disabled = false;
+
+ return this;
+ }
+
+ /**
+ * Adds cuutom event listener with handler.
+ *
+ * @param {String|Array} event
+ * @param {Function} handler
+ * @return {Glide}
+ */
+
+ }, {
+ key: 'on',
+ value: function on(event, handler) {
+ this._e.on(event, handler);
+
+ return this;
+ }
+
+ /**
+ * Checks if glide is a precised type.
+ *
+ * @param {String} name
+ * @return {Boolean}
+ */
+
+ }, {
+ key: 'isType',
+ value: function isType(name) {
+ return this.settings.type === name;
+ }
+
+ /**
+ * Gets value of the core options.
+ *
+ * @return {Object}
+ */
+
+ }, {
+ key: 'settings',
+ get: function get$$1() {
+ return this._o;
+ }
+
+ /**
+ * Sets value of the core options.
+ *
+ * @param {Object} o
+ * @return {Void}
+ */
+ ,
+ set: function set$$1(o) {
+ if (isObject(o)) {
+ this._o = o;
+ } else {
+ warn('Options must be an `object` instance.');
+ }
+ }
+
+ /**
+ * Gets current index of the slider.
+ *
+ * @return {Object}
+ */
+
+ }, {
+ key: 'index',
+ get: function get$$1() {
+ return this._i;
+ }
+
+ /**
+ * Sets current index a slider.
+ *
+ * @return {Object}
+ */
+ ,
+ set: function set$$1(i) {
+ this._i = toInt(i);
+ }
+
+ /**
+ * Gets type name of the slider.
+ *
+ * @return {String}
+ */
+
+ }, {
+ key: 'type',
+ get: function get$$1() {
+ return this.settings.type;
+ }
+
+ /**
+ * Gets value of the idle status.
+ *
+ * @return {Boolean}
+ */
+
+ }, {
+ key: 'disabled',
+ get: function get$$1() {
+ return this._d;
+ }
+
+ /**
+ * Sets value of the idle status.
+ *
+ * @return {Boolean}
+ */
+ ,
+ set: function set$$1(status) {
+ this._d = !!status;
+ }
+ }]);
+ return Glide;
+}();
+
+var Run = function (Glide, Components, Events) {
+ var Run = {
+ /**
+ * Initializes autorunning of the glide.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ this._o = false;
+ },
+
+
+ /**
+ * Makes glides running based on the passed moving schema.
+ *
+ * @param {String} move
+ */
+ make: function make(move) {
+ var _this = this;
+
+ if (!Glide.disabled) {
+ Glide.disable();
+
+ this.move = move;
+
+ Events.emit('run.before', this.move);
+
+ this.calculate();
+
+ Events.emit('run', this.move);
+
+ Components.Transition.after(function () {
+ if (_this.isOffset('<') || _this.isOffset('>')) {
+ _this._o = false;
+
+ Events.emit('run.offset', _this.move);
+ }
+
+ Events.emit('run.after', _this.move);
+
+ Glide.enable();
+ });
+ }
+ },
+
+
+ /**
+ * Calculates current index based on defined move.
+ *
+ * @return {Void}
+ */
+ calculate: function calculate() {
+ var move = this.move,
+ length = this.length;
+ var steps = move.steps,
+ direction = move.direction;
+
+
+ var countableSteps = isNumber(toInt(steps)) && toInt(steps) !== 0;
+
+ switch (direction) {
+ case '>':
+ if (steps === '>') {
+ Glide.index = length;
+ } else if (this.isEnd()) {
+ this._o = true;
+
+ Glide.index = 0;
+
+ Events.emit('run.end', move);
+ } else if (countableSteps) {
+ Glide.index += Math.min(length - Glide.index, -toInt(steps));
+ } else {
+ Glide.index++;
+ }
+ break;
+
+ case '<':
+ if (steps === '<') {
+ Glide.index = 0;
+ } else if (this.isStart()) {
+ this._o = true;
+
+ Glide.index = length;
+
+ Events.emit('run.start', move);
+ } else if (countableSteps) {
+ Glide.index -= Math.min(Glide.index, toInt(steps));
+ } else {
+ Glide.index--;
+ }
+ break;
+
+ case '=':
+ Glide.index = steps;
+ break;
+ }
+ },
+
+
+ /**
+ * Checks if we are on the first slide.
+ *
+ * @return {Boolean}
+ */
+ isStart: function isStart() {
+ return Glide.index === 0;
+ },
+
+
+ /**
+ * Checks if we are on the last slide.
+ *
+ * @return {Boolean}
+ */
+ isEnd: function isEnd() {
+ return Glide.index === this.length;
+ },
+
+
+ /**
+ * Checks if we are making a offset run.
+ *
+ * @param {String} direction
+ * @return {Boolean}
+ */
+ isOffset: function isOffset(direction) {
+ return this._o && this.move.direction === direction;
+ }
+ };
+
+ define(Run, 'move', {
+ /**
+ * Gets value of the move schema.
+ *
+ * @returns {Object}
+ */
+ get: function get() {
+ return this._m;
+ },
+
+
+ /**
+ * Sets value of the move schema.
+ *
+ * @returns {Object}
+ */
+ set: function set(value) {
+ this._m = {
+ direction: value.substr(0, 1),
+ steps: value.substr(1) ? value.substr(1) : 0
+ };
+ }
+ });
+
+ define(Run, 'length', {
+ /**
+ * Gets value of the running distance based
+ * on zero-indexing number of slides.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ return Components.Html.slides.length - 1;
+ }
+ });
+
+ define(Run, 'offset', {
+ /**
+ * Gets status of the offsetting flag.
+ *
+ * @return {Boolean}
+ */
+ get: function get() {
+ return this._o;
+ }
+ });
+
+ return Run;
+};
+
+/**
+ * Returns a current time.
+ *
+ * @return {Number}
+ */
+function now() {
+ return new Date().getTime();
+}
+
+/**
+ * Returns a function, that, when invoked, will only be triggered
+ * at most once during a given window of time.
+ *
+ * @param {Function} func
+ * @param {Number} wait
+ * @param {Object=} options
+ * @return {Function}
+ *
+ * @see https://github.com/jashkenas/underscore
+ */
+function throttle(func, wait, options) {
+ var timeout = void 0,
+ context = void 0,
+ args = void 0,
+ result = void 0;
+ var previous = 0;
+ if (!options) options = {};
+
+ var later = function later() {
+ previous = options.leading === false ? 0 : now();
+ timeout = null;
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ };
+
+ var throttled = function throttled() {
+ var at = now();
+ if (!previous && options.leading === false) previous = at;
+ var remaining = wait - (at - previous);
+ context = this;
+ args = arguments;
+ if (remaining <= 0 || remaining > wait) {
+ if (timeout) {
+ clearTimeout(timeout);
+ timeout = null;
+ }
+ previous = at;
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ } else if (!timeout && options.trailing !== false) {
+ timeout = setTimeout(later, remaining);
+ }
+ return result;
+ };
+
+ throttled.cancel = function () {
+ clearTimeout(timeout);
+ previous = 0;
+ timeout = context = args = null;
+ };
+
+ return throttled;
+}
+
+var MARGIN_TYPE = {
+ ltr: ['marginLeft', 'marginRight'],
+ rtl: ['marginRight', 'marginLeft']
+};
+
+var Gaps = function (Glide, Components, Events) {
+ var Gaps = {
+ /**
+ * Setups gap value based on settings.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ this.value = Glide.settings.gap;
+ },
+
+
+ /**
+ * Applies gaps between slides. First and last
+ * slides do not receive it's edge margins.
+ *
+ * @param {HTMLCollection} slides
+ * @return {Void}
+ */
+ apply: function apply(slides) {
+ for (var i = 0, len = slides.length; i < len; i++) {
+ var style = slides[i].style;
+ var direction = Components.Direction.value;
+
+ if (i !== 0) {
+ style[MARGIN_TYPE[direction][0]] = this.value / 2 + 'px';
+ } else {
+ style[MARGIN_TYPE[direction][0]] = '';
+ }
+
+ if (i !== slides.length - 1) {
+ style[MARGIN_TYPE[direction][1]] = this.value / 2 + 'px';
+ } else {
+ style[MARGIN_TYPE[direction][1]] = '';
+ }
+ }
+ },
+
+
+ /**
+ * Removes gaps from the slides.
+ *
+ * @param {HTMLCollection} slides
+ * @returns {Void}
+ */
+ remove: function remove(slides) {
+ for (var i = 0, len = slides.length; i < len; i++) {
+ var style = slides[i].style;
+
+ style.marginLeft = '';
+ style.marginRight = '';
+ }
+ }
+ };
+
+ define(Gaps, 'value', {
+ /**
+ * Gets value of the gap.
+ *
+ * @returns {Number}
+ */
+ get: function get() {
+ return Gaps._v;
+ },
+
+
+ /**
+ * Sets value of the gap.
+ *
+ * @param {String} value
+ * @return {Void}
+ */
+ set: function set(value) {
+ Gaps._v = toInt(value);
+ }
+ });
+
+ define(Gaps, 'grow', {
+ /**
+ * Gets additional dimentions value caused by gaps.
+ * Used to increase width of the slides wrapper.
+ *
+ * @returns {Number}
+ */
+ get: function get() {
+ return Gaps.value * (Components.Sizes.length - 1);
+ }
+ });
+
+ define(Gaps, 'reductor', {
+ /**
+ * Gets reduction value caused by gaps.
+ * Used to subtract width of the slides.
+ *
+ * @returns {Number}
+ */
+ get: function get() {
+ var perView = Glide.settings.perView;
+
+ return Gaps.value * (perView - 1) / perView;
+ }
+ });
+
+ /**
+ * Remount component:
+ * - on updating via API, to update gap value
+ */
+ Events.on('update', function () {
+ Gaps.mount();
+ });
+
+ /**
+ * Apply calculated gaps:
+ * - after building, so slides (including clones) will receive proper margins
+ * - on updating via API, to recalculate gaps with new options
+ */
+ Events.on(['build.after', 'update'], throttle(function () {
+ Gaps.apply(Components.Html.wrapper.children);
+ }, 30));
+
+ /**
+ * Remove gaps:
+ * - on destroying to bring markup to its inital state
+ */
+ Events.on('destroy', function () {
+ Gaps.remove(Components.Html.wrapper.children);
+ });
+
+ return Gaps;
+};
+
+/**
+ * Finds siblings nodes of the passed node.
+ *
+ * @param {Element} node
+ * @return {Array}
+ */
+function siblings(node) {
+ var n = node.parentNode.firstChild;
+ var matched = [];
+
+ for (; n; n = n.nextSibling) {
+ if (n.nodeType === 1 && n !== node) {
+ matched.push(n);
+ }
+ }
+
+ return matched;
+}
+
+/**
+ * Checks if passed node exist and is a valid element.
+ *
+ * @param {Element} node
+ * @return {Boolean}
+ */
+function exist(node) {
+ if (node && node instanceof window.HTMLElement) {
+ return true;
+ }
+
+ return false;
+}
+
+var TRACK_SELECTOR = '[data-glide-el="track"]';
+
+var Html = function (Glide, Components) {
+ var Html = {
+ /**
+ * Setup slider HTML nodes.
+ *
+ * @param {Glide} glide
+ */
+ mount: function mount() {
+ this.root = Glide.selector;
+ this.track = this.root.querySelector(TRACK_SELECTOR);
+ this.slides = Array.from(this.wrapper.children).filter(function (slide) {
+ return !slide.classList.contains(Glide.settings.classes.cloneSlide);
+ });
+ }
+ };
+
+ define(Html, 'root', {
+ /**
+ * Gets node of the glide main element.
+ *
+ * @return {Object}
+ */
+ get: function get() {
+ return Html._r;
+ },
+
+
+ /**
+ * Sets node of the glide main element.
+ *
+ * @return {Object}
+ */
+ set: function set(root) {
+ if (isString(root)) {
+ root = document.querySelector(root);
+ }
+
+ if (exist(root)) {
+ Html._r = root;
+ } else {
+ warn('Root element must be a existing Html node');
+ }
+ }
+ });
+
+ define(Html, 'track', {
+ /**
+ * Gets node of the glide track with slides.
+ *
+ * @return {Object}
+ */
+ get: function get() {
+ return Html._t;
+ },
+
+
+ /**
+ * Sets node of the glide track with slides.
+ *
+ * @return {Object}
+ */
+ set: function set(tr) {
+ if (exist(tr)) {
+ Html._t = tr;
+ } else {
+ warn('Could not find track element. Please use ' + TRACK_SELECTOR + ' attribute.');
+ }
+ }
+ });
+
+ define(Html, 'wrapper', {
+ /**
+ * Gets node of the slides wrapper.
+ *
+ * @return {Object}
+ */
+ get: function get() {
+ return Html.track.children[0];
+ }
+ });
+
+ return Html;
+};
+
+var Peek = function (Glide, Components, Events) {
+ var Peek = {
+ /**
+ * Setups how much to peek based on settings.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ this.value = Glide.settings.peek;
+ }
+ };
+
+ define(Peek, 'value', {
+ /**
+ * Gets value of the peek.
+ *
+ * @returns {Number|Object}
+ */
+ get: function get() {
+ return Peek._v;
+ },
+
+
+ /**
+ * Sets value of the peek.
+ *
+ * @param {Number|Object} value
+ * @return {Void}
+ */
+ set: function set(value) {
+ if (isObject(value)) {
+ value.before = toInt(value.before);
+ value.after = toInt(value.after);
+ } else {
+ value = toInt(value);
+ }
+
+ Peek._v = value;
+ }
+ });
+
+ define(Peek, 'reductor', {
+ /**
+ * Gets reduction value caused by peek.
+ *
+ * @returns {Number}
+ */
+ get: function get() {
+ var value = Peek.value;
+ var perView = Glide.settings.perView;
+
+ if (isObject(value)) {
+ return value.before / perView + value.after / perView;
+ }
+
+ return value * 2 / perView;
+ }
+ });
+
+ /**
+ * Recalculate peeking sizes on:
+ * - when resizing window to update to proper percents
+ */
+ Events.on(['resize', 'update'], function () {
+ Peek.mount();
+ });
+
+ return Peek;
+};
+
+var Move = function (Glide, Components, Events) {
+ var Move = {
+ /**
+ * Constructs move component.
+ *
+ * @returns {Void}
+ */
+ mount: function mount() {
+ this._o = 0;
+ },
+
+
+ /**
+ * Calculates a movement value based on passed offset and currently active index.
+ *
+ * @param {Number} offset
+ * @return {Void}
+ */
+ make: function make() {
+ var _this = this;
+
+ var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+ this.offset = offset;
+
+ Events.emit('move', {
+ movement: this.value
+ });
+
+ Components.Transition.after(function () {
+ Events.emit('move.after', {
+ movement: _this.value
+ });
+ });
+ }
+ };
+
+ define(Move, 'offset', {
+ /**
+ * Gets an offset value used to modify current translate.
+ *
+ * @return {Object}
+ */
+ get: function get() {
+ return Move._o;
+ },
+
+
+ /**
+ * Sets an offset value used to modify current translate.
+ *
+ * @return {Object}
+ */
+ set: function set(value) {
+ Move._o = !isUndefined(value) ? toInt(value) : 0;
+ }
+ });
+
+ define(Move, 'translate', {
+ /**
+ * Gets a raw movement value.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ return Components.Sizes.slideWidth * Glide.index;
+ }
+ });
+
+ define(Move, 'value', {
+ /**
+ * Gets an actual movement value corrected by offset.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ var offset = this.offset;
+ var translate = this.translate;
+
+ if (Components.Direction.is('rtl')) {
+ return translate + offset;
+ }
+
+ return translate - offset;
+ }
+ });
+
+ /**
+ * Make movement to proper slide on:
+ * - before build, so glide will start at `startAt` index
+ * - on each standard run to move to newly calculated index
+ */
+ Events.on(['build.before', 'run'], function () {
+ Move.make();
+ });
+
+ return Move;
+};
+
+var Sizes = function (Glide, Components, Events) {
+ var Sizes = {
+ /**
+ * Setups dimentions of slides.
+ *
+ * @return {Void}
+ */
+ setupSlides: function setupSlides() {
+ var slides = Components.Html.slides;
+
+ for (var i = 0; i < slides.length; i++) {
+ slides[i].style.width = this.slideWidth + 'px';
+ }
+ },
+
+
+ /**
+ * Setups dimentions of slides wrapper.
+ *
+ * @return {Void}
+ */
+ setupWrapper: function setupWrapper(dimention) {
+ Components.Html.wrapper.style.width = this.wrapperSize + 'px';
+ },
+
+
+ /**
+ * Removes applied styles from HTML elements.
+ *
+ * @returns {Void}
+ */
+ remove: function remove() {
+ var slides = Components.Html.slides;
+
+ for (var i = 0; i < slides.length; i++) {
+ slides[i].style.width = '';
+ }
+
+ Components.Html.wrapper.style.width = '';
+ }
+ };
+
+ define(Sizes, 'length', {
+ /**
+ * Gets count number of the slides.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ return Components.Html.slides.length;
+ }
+ });
+
+ define(Sizes, 'width', {
+ /**
+ * Gets width value of the glide.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ return Components.Html.root.offsetWidth;
+ }
+ });
+
+ define(Sizes, 'wrapperSize', {
+ /**
+ * Gets size of the slides wrapper.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ return Sizes.slideWidth * Sizes.length + Components.Gaps.grow + Components.Clones.grow;
+ }
+ });
+
+ define(Sizes, 'slideWidth', {
+ /**
+ * Gets width value of the single slide.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ return Sizes.width / Glide.settings.perView - Components.Peek.reductor - Components.Gaps.reductor;
+ }
+ });
+
+ /**
+ * Apply calculated glide's dimensions:
+ * - before building, so other dimentions (e.g. translate) will be calculated propertly
+ * - when resizing window to recalculate sildes dimensions
+ * - on updating via API, to calculate dimensions based on new options
+ */
+ Events.on(['build.before', 'resize', 'update'], function () {
+ Sizes.setupSlides();
+ Sizes.setupWrapper();
+ });
+
+ /**
+ * Remove calculated glide's dimensions:
+ * - on destoting to bring markup to its inital state
+ */
+ Events.on('destroy', function () {
+ Sizes.remove();
+ });
+
+ return Sizes;
+};
+
+var Build = function (Glide, Components, Events) {
+ var Build = {
+ /**
+ * Init glide building. Adds classes, sets
+ * dimensions and setups initial state.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ Events.emit('build.before');
+
+ this.typeClass();
+ this.activeClass();
+
+ Events.emit('build.after');
+ },
+
+
+ /**
+ * Adds `type` class to the glide element.
+ *
+ * @return {Void}
+ */
+ typeClass: function typeClass() {
+ Components.Html.root.classList.add(Glide.settings.classes[Glide.settings.type]);
+ },
+
+
+ /**
+ * Sets active class to current slide.
+ *
+ * @return {Void}
+ */
+ activeClass: function activeClass() {
+ var classes = Glide.settings.classes;
+ var slide = Components.Html.slides[Glide.index];
+
+ slide.classList.add(classes.activeSlide);
+
+ siblings(slide).forEach(function (sibling) {
+ sibling.classList.remove(classes.activeSlide);
+ });
+ },
+
+
+ /**
+ * Removes HTML classes applied at building.
+ *
+ * @return {Void}
+ */
+ removeClasses: function removeClasses() {
+ var classes = Glide.settings.classes;
+
+ Components.Html.root.classList.remove(classes[Glide.settings.type]);
+
+ Components.Html.slides.forEach(function (sibling) {
+ sibling.classList.remove(classes.activeSlide);
+ });
+ }
+ };
+
+ /**
+ * Clear building classes:
+ * - on destroying to bring HTML to its initial state
+ * - on updating to remove classes before remounting component
+ */
+ Events.on(['destroy', 'update'], function () {
+ Build.removeClasses();
+ });
+
+ /**
+ * Remount component:
+ * - on resizing of the window to calculate new dimentions
+ * - on updating settings via API
+ */
+ Events.on(['resize', 'update'], function () {
+ Build.mount();
+ });
+
+ /**
+ * Swap active class of current slide:
+ * - after each move to the new index
+ */
+ Events.on('move.after', function () {
+ Build.activeClass();
+ });
+
+ return Build;
+};
+
+var Clones = function (Glide, Components, Events) {
+ var Clones = {
+ /**
+ * Create pattern map and collect slides to be cloned.
+ */
+ mount: function mount() {
+ this.items = [];
+
+ if (Glide.isType('carousel')) {
+ this.pattern = this.map();
+ this.items = this.collect();
+ }
+ },
+
+
+ /**
+ * Generate pattern of the cloning.
+ *
+ * @return {Void}
+ */
+ map: function map() {
+ var pattern = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+ var perView = Glide.settings.perView;
+ var length = Components.Html.slides.length;
+
+ // Repeat creating pattern based on the ratio calculated
+ // by number in `perView` per actual number of slides.
+ for (var r = 0; r < Math.max(1, Math.floor(perView / length)); r++) {
+ // Fill pattern with indexes of slides at the beginning of track.
+ for (var i = 0; i <= length - 1; i++) {
+ pattern.push('' + i);
+ }
+
+ // Fill pattern with indexes of slides from the end of track.
+ for (var _i = length - 1; _i >= 0; _i--) {
+ pattern.unshift('-' + _i);
+ }
+ }
+
+ return pattern;
+ },
+
+
+ /**
+ * Collect clones with pattern.
+ *
+ * @return {Void}
+ */
+ collect: function collect() {
+ var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+ var pattern = this.pattern;
+
+
+ for (var i = 0; i < pattern.length; i++) {
+ var clone = Components.Html.slides[Math.abs(pattern[i])].cloneNode(true);
+
+ clone.classList.add(Glide.settings.classes.cloneSlide);
+
+ items.push(clone);
+ }
+
+ return items;
+ },
+
+
+ /**
+ * Append cloned slides with generated pattern.
+ *
+ * @return {Void}
+ */
+ append: function append() {
+ var items = this.items,
+ pattern = this.pattern;
+
+
+ for (var i = 0; i < items.length; i++) {
+ var item = items[i];
+
+ item.style.width = Components.Sizes.slideWidth + 'px';
+
+ // Append clone if pattern position is positive.
+ // Prepend clone if pattern position is negative.
+ if (pattern[i][0] === '-') {
+ Components.Html.wrapper.insertBefore(item, Components.Html.slides[0]);
+ } else {
+ Components.Html.wrapper.appendChild(item);
+ }
+ }
+ },
+
+
+ /**
+ * Remove all cloned slides.
+ *
+ * @return {Void}
+ */
+ remove: function remove() {
+ var items = this.items;
+
+
+ for (var i = 0; i < items.length; i++) {
+ items[i].remove();
+ }
+ }
+ };
+
+ define(Clones, 'grow', {
+ /**
+ * Gets additional dimentions value caused by clones.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ return (Components.Sizes.slideWidth + Components.Gaps.value) * Clones.items.length;
+ }
+ });
+
+ /**
+ * Append additional slide's clones:
+ * - while glide's type is `carousel`
+ */
+ Events.on('update', function () {
+ Clones.remove();
+ Clones.mount();
+ Clones.append();
+ });
+
+ /**
+ * Append additional slide's clones:
+ * - while glide's type is `carousel`
+ */
+ Events.on('build.before', function () {
+ if (Glide.isType('carousel')) {
+ Clones.append();
+ }
+ });
+
+ /**
+ * Remove clones HTMLElements:
+ * - on destroying, to bring HTML to its initial state
+ */
+ Events.on('destroy', function () {
+ Clones.remove();
+ });
+
+ return Clones;
+};
+
+var EventsBinder = function () {
+ /**
+ * Construct a EventsBinder instance.
+ */
+ function EventsBinder() {
+ var listeners = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+ classCallCheck(this, EventsBinder);
+
+ this.listeners = listeners;
+ }
+
+ /**
+ * Adds events listeners to arrows HTML elements.
+ *
+ * @param {String|Array} events
+ * @param {Element|Window|Document} el
+ * @param {Function} closure
+ * @return {Void}
+ */
+
+
+ createClass(EventsBinder, [{
+ key: 'on',
+ value: function on(events, el, closure) {
+ if (isString(events)) {
+ events = [events];
+ }
+
+ for (var i = 0; i < events.length; i++) {
+ this.listeners[events[i]] = closure;
+
+ el.addEventListener(events[i], this.listeners[events[i]], false);
+ }
+ }
+
+ /**
+ * Removes event listeners from arrows HTML elements.
+ *
+ * @param {String|Array} events
+ * @param {Element|Window|Document} el
+ * @return {Void}
+ */
+
+ }, {
+ key: 'off',
+ value: function off(events, el) {
+ if (isString(events)) {
+ events = [events];
+ }
+
+ for (var i = 0; i < events.length; i++) {
+ el.removeEventListener(events[i], this.listeners[events[i]], false);
+ }
+ }
+
+ /**
+ * Destroy collected listeners.
+ *
+ * @returns {Void}
+ */
+
+ }, {
+ key: 'destroy',
+ value: function destroy() {
+ delete this.listeners;
+ }
+ }]);
+ return EventsBinder;
+}();
+
+var Resize = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ var Resize = {
+ /**
+ * Initializes window bindings.
+ */
+ mount: function mount() {
+ this.bind();
+ },
+
+
+ /**
+ * Binds `rezsize` listener to the window.
+ * It's a costly event, so we are debouncing it.
+ *
+ * @return {Void}
+ */
+ bind: function bind() {
+ Binder.on('resize', window, throttle(function () {
+ Events.emit('resize');
+ }, Glide.settings.throttle));
+ },
+
+
+ /**
+ * Unbinds listeners from the window.
+ *
+ * @return {Void}
+ */
+ unbind: function unbind() {
+ Binder.off('resize', window);
+ }
+ };
+
+ /**
+ * Remove bindings from window:
+ * - on destroying, to remove added EventListener
+ */
+ Events.on('destroy', function () {
+ Resize.unbind();
+ Binder.destroy();
+ });
+
+ return Resize;
+};
+
+var VALID_DIRECTIONS = ['ltr', 'rtl'];
+var FLIPED_MOVEMENTS = {
+ '>': '<',
+ '<': '>',
+ '=': '='
+};
+
+var Direction = function (Glide, Components, Events) {
+ var Direction = {
+ /**
+ * Setups gap value based on settings.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ this.value = Glide.settings.direction;
+ },
+
+
+ /**
+ * Resolves pattern based on direction value
+ *
+ * @param {String} pattern
+ * @returns {String}
+ */
+ resolve: function resolve(pattern) {
+ var token = pattern.slice(0, 1);
+
+ if (this.is('rtl')) {
+ return pattern.split(token).join(FLIPED_MOVEMENTS[token]);
+ }
+
+ return pattern;
+ },
+
+
+ /**
+ * Checks value of direction mode.
+ *
+ * @param {String} direction
+ * @returns {Boolean}
+ */
+ is: function is(direction) {
+ return this.value === direction;
+ },
+
+
+ /**
+ * Applies direction class to the root HTML element.
+ *
+ * @return {Void}
+ */
+ addClass: function addClass() {
+ Components.Html.root.classList.add(Glide.settings.classes.direction[this.value]);
+ },
+
+
+ /**
+ * Removes direction class from the root HTML element.
+ *
+ * @return {Void}
+ */
+ removeClass: function removeClass() {
+ Components.Html.root.classList.remove(Glide.settings.classes.direction[this.value]);
+ }
+ };
+
+ define(Direction, 'value', {
+ /**
+ * Gets value of the direction.
+ *
+ * @returns {Number}
+ */
+ get: function get() {
+ return Direction._v;
+ },
+
+
+ /**
+ * Sets value of the direction.
+ *
+ * @param {String} value
+ * @return {Void}
+ */
+ set: function set(value) {
+ if (VALID_DIRECTIONS.includes(value)) {
+ Direction._v = value;
+ } else {
+ warn('Direction value must be `ltr` or `rtl`');
+ }
+ }
+ });
+
+ /**
+ * Clear direction class:
+ * - on destroy to bring HTML to its initial state
+ * - on update to remove class before reappling bellow
+ */
+ Events.on(['destroy', 'update'], function () {
+ Direction.removeClass();
+ });
+
+ /**
+ * Remount component:
+ * - on update to reflect changes in direction value
+ */
+ Events.on('update', function () {
+ Direction.mount();
+ });
+
+ /**
+ * Apply direction class:
+ * - before building to apply class for the first time
+ * - on updating to reapply direction class that may changed
+ */
+ Events.on(['build.before', 'update'], function () {
+ Direction.addClass();
+ });
+
+ return Direction;
+};
+
+/**
+ * Reflects value of glide movement.
+ *
+ * @param {Object} Glide
+ * @param {Object} Components
+ * @return {Object}
+ */
+var Rtl = function (Glide, Components) {
+ return {
+ /**
+ * Negates the passed translate if glide is in RTL option.
+ *
+ * @param {Number} translate
+ * @return {Number}
+ */
+ modify: function modify(translate) {
+ if (Components.Direction.is('rtl')) {
+ return -translate;
+ }
+
+ return translate;
+ }
+ };
+};
+
+/**
+ * Updates glide movement with a `gap` settings.
+ *
+ * @param {Object} Glide
+ * @param {Object} Components
+ * @return {Object}
+ */
+var Gap = function (Glide, Components) {
+ return {
+ /**
+ * Modifies passed translate value with number in the `gap` settings.
+ *
+ * @param {Number} translate
+ * @return {Number}
+ */
+ modify: function modify(translate) {
+ return translate + Components.Gaps.value * Glide.index;
+ }
+ };
+};
+
+/**
+ * Updates glide movement with width of additional clones width.
+ *
+ * @param {Object} Glide
+ * @param {Object} Components
+ * @return {Object}
+ */
+var Grow = function (Glide, Components) {
+ return {
+ /**
+ * Adds to the passed translate width of the half of clones.
+ *
+ * @param {Number} translate
+ * @return {Number}
+ */
+ modify: function modify(translate) {
+ return translate + Components.Clones.grow / 2;
+ }
+ };
+};
+
+/**
+ * Updates glide movement with a `peek` settings.
+ *
+ * @param {Object} Glide
+ * @param {Object} Components
+ * @return {Object}
+ */
+var Peeking = function (Glide, Components) {
+ return {
+ /**
+ * Modifies passed translate value with a `peek` setting.
+ *
+ * @param {Number} translate
+ * @return {Number}
+ */
+ modify: function modify(translate) {
+ if (Glide.settings.focusAt >= 0) {
+ var peek = Components.Peek.value;
+
+ if (isObject(peek)) {
+ return translate - peek.before;
+ }
+
+ return translate - peek;
+ }
+
+ return translate;
+ }
+ };
+};
+
+/**
+ * Updates glide movement with a `focusAt` settings.
+ *
+ * @param {Object} Glide
+ * @param {Object} Components
+ * @return {Object}
+ */
+var Focusing = function (Glide, Components) {
+ return {
+ /**
+ * Modifies passed translate value with index in the `focusAt` setting.
+ *
+ * @param {Number} translate
+ * @return {Number}
+ */
+ modify: function modify(translate) {
+ var gap = Components.Gaps.value;
+ var width = Components.Sizes.width;
+ var focusAt = Glide.settings.focusAt;
+ var slideWidth = Components.Sizes.slideWidth;
+
+ if (focusAt === 'center') {
+ return translate - (width / 2 - slideWidth / 2);
+ }
+
+ return translate - slideWidth * focusAt - gap * focusAt;
+ }
+ };
+};
+
+/**
+ * Collection of transformers.
+ *
+ * @type {Array}
+ */
+var MUTATORS = [Gap, Grow, Peeking, Focusing,
+// It's important that the Rtl component
+// be last on the list, so it reflects
+// all previous transformations.
+Rtl];
+
+/**
+ * Applies diffrent transformers on translate value.
+ *
+ * @param {Object} Glide
+ * @param {Object} Components
+ * @return {Object}
+ */
+var transformer = function (Glide, Components) {
+ return {
+ /**
+ * Piplines translate value with registered transformers.
+ *
+ * @param {Number} translate
+ * @return {Number}
+ */
+ mutate: function mutate(translate) {
+ for (var i = 0; i < MUTATORS.length; i++) {
+ translate = MUTATORS[i](Glide, Components).modify(translate);
+ }
+
+ return translate;
+ }
+ };
+};
+
+var Translate = function (Glide, Components, Events) {
+ var Translate = {
+ /**
+ * Sets value of translate on HTML element.
+ *
+ * @param {Number} value
+ * @return {Void}
+ */
+ set: function set(value) {
+ var transform = transformer(Glide, Components).mutate(value);
+
+ Components.Html.wrapper.style.transform = 'translate3d(' + -1 * transform + 'px, 0px, 0px)';
+ },
+
+
+ /**
+ * Removes value of translate from HTML element.
+ *
+ * @return {Void}
+ */
+ remove: function remove() {
+ Components.Html.wrapper.style.transform = '';
+ }
+ };
+
+ /**
+ * Set new translate value:
+ * - on move to reflect index change
+ * - on updating via API to reflect possible changes in options
+ */
+ Events.on('move', function (context) {
+ var gap = Components.Gaps.value;
+ var length = Components.Sizes.length;
+ var width = Components.Sizes.slideWidth;
+
+ if (Glide.isType('carousel') && Components.Run.isOffset('<')) {
+ Components.Transition.after(function () {
+ Events.emit('translate.jump');
+
+ Translate.set(width * (length - 1));
+ });
+
+ return Translate.set(-width - gap * length);
+ }
+
+ if (Glide.isType('carousel') && Components.Run.isOffset('>')) {
+ Components.Transition.after(function () {
+ Events.emit('translate.jump');
+
+ Translate.set(0);
+ });
+
+ return Translate.set(width * length + gap * length);
+ }
+
+ return Translate.set(context.movement);
+ });
+
+ /**
+ * Remove translate:
+ * - on destroying to bring markup to its inital state
+ */
+ Events.on('destroy', function () {
+ Translate.remove();
+ });
+
+ return Translate;
+};
+
+var Transition = function (Glide, Components, Events) {
+ /**
+ * Holds inactivity status of transition.
+ * When true transition is not applied.
+ *
+ * @type {Boolean}
+ */
+ var disabled = false;
+
+ var Transition = {
+ /**
+ * Composes string of the CSS transition.
+ *
+ * @param {String} property
+ * @return {String}
+ */
+ compose: function compose(property) {
+ var settings = Glide.settings;
+
+ if (!disabled) {
+ return property + ' ' + this.duration + 'ms ' + settings.animationTimingFunc;
+ }
+
+ return property + ' 0ms ' + settings.animationTimingFunc;
+ },
+
+
+ /**
+ * Sets value of transition on HTML element.
+ *
+ * @param {String=} property
+ * @return {Void}
+ */
+ set: function set() {
+ var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';
+
+ Components.Html.wrapper.style.transition = this.compose(property);
+ },
+
+
+ /**
+ * Removes value of transition from HTML element.
+ *
+ * @return {Void}
+ */
+ remove: function remove() {
+ Components.Html.wrapper.style.transition = '';
+ },
+
+
+ /**
+ * Runs callback after animation.
+ *
+ * @param {Function} callback
+ * @return {Void}
+ */
+ after: function after(callback) {
+ setTimeout(function () {
+ callback();
+ }, this.duration);
+ },
+
+
+ /**
+ * Enable transition.
+ *
+ * @return {Void}
+ */
+ enable: function enable() {
+ disabled = false;
+
+ this.set();
+ },
+
+
+ /**
+ * Disable transition.
+ *
+ * @return {Void}
+ */
+ disable: function disable() {
+ disabled = true;
+
+ this.set();
+ }
+ };
+
+ define(Transition, 'duration', {
+ /**
+ * Gets duration of the transition based
+ * on currently running animation type.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ var settings = Glide.settings;
+
+ if (Glide.isType('slider') && Components.Run.offset) {
+ return settings.rewindDuration;
+ }
+
+ return settings.animationDuration;
+ }
+ });
+
+ /**
+ * Set transition `style` value:
+ * - on each moving, because it may be cleared by offset move
+ */
+ Events.on('move', function () {
+ Transition.set();
+ });
+
+ /**
+ * Disable transition:
+ * - before initial build to avoid transitioning from `0` to `startAt` index
+ * - while resizing window and recalculating dimentions
+ * - on jumping from offset transition at start and end edges in `carousel` type
+ */
+ Events.on(['build.before', 'resize', 'translate.jump'], function () {
+ Transition.disable();
+ });
+
+ /**
+ * Enable transition:
+ * - on each running, because it may be disabled by offset move
+ */
+ Events.on('run', function () {
+ Transition.enable();
+ });
+
+ /**
+ * Remove transition:
+ * - on destroying to bring markup to its inital state
+ */
+ Events.on('destroy', function () {
+ Transition.remove();
+ });
+
+ return Transition;
+};
+
+var START_EVENTS = ['touchstart', 'mousedown'];
+var MOVE_EVENTS = ['touchmove', 'mousemove'];
+var END_EVENTS = ['touchend', 'touchcancel', 'mouseup', 'mouseleave'];
+var MOUSE_EVENTS = ['mousedown', 'mousemove', 'mouseup', 'mouseleave'];
+
+var Swipe = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ var swipeSin = 0;
+ var swipeStartX = 0;
+ var swipeStartY = 0;
+ var disabled = false;
+
+ var Swipe = {
+ /**
+ * Initializes swipe bindings.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ this.bindSwipeStart();
+ },
+
+
+ /**
+ * Handler for `swipestart` event. Calculates entry points of the user's tap.
+ *
+ * @param {Object} event
+ * @return {Void}
+ */
+ start: function start(event) {
+ if (!disabled && !Glide.disabled) {
+ this.disable();
+
+ var swipe = this.touches(event);
+
+ swipeSin = null;
+ swipeStartX = toInt(swipe.pageX);
+ swipeStartY = toInt(swipe.pageY);
+
+ this.bindSwipeMove();
+ this.bindSwipeEnd();
+
+ Events.emit('swipe.start');
+ }
+ },
+
+
+ /**
+ * Handler for `swipemove` event. Calculates user's tap angle and distance.
+ *
+ * @param {Object} event
+ */
+ move: function move(event) {
+ if (!Glide.disabled) {
+ var settings = Glide.settings;
+
+ var swipe = this.touches(event);
+
+ var subExSx = toInt(swipe.pageX) - swipeStartX;
+ var subEySy = toInt(swipe.pageY) - swipeStartY;
+ var powEX = Math.abs(subExSx << 2);
+ var powEY = Math.abs(subEySy << 2);
+ var swipeHypotenuse = Math.sqrt(powEX + powEY);
+ var swipeCathetus = Math.sqrt(powEY);
+
+ swipeSin = Math.asin(swipeCathetus / swipeHypotenuse);
+
+ if (swipeSin * 180 / Math.PI < settings.touchAngle) {
+ Components.Move.make(subExSx * parseFloat(settings.touchRatio));
+ }
+
+ if (swipeSin * 180 / Math.PI < settings.touchAngle) {
+ event.stopPropagation();
+ event.preventDefault();
+
+ Components.Html.root.classList.add(settings.classes.dragging);
+
+ Events.emit('swipe.move');
+ } else {
+ return false;
+ }
+ }
+ },
+
+
+ /**
+ * Handler for `swipeend` event. Finitializes user's tap and decides about glide move.
+ *
+ * @param {Object} event
+ * @return {Void}
+ */
+ end: function end(event) {
+ if (!Glide.disabled) {
+ var settings = Glide.settings;
+
+ var swipe = this.touches(event);
+ var threshold = this.threshold(event);
+
+ var swipeDistance = swipe.pageX - swipeStartX;
+ var swipeDeg = swipeSin * 180 / Math.PI;
+ var steps = Math.round(swipeDistance / Components.Sizes.slideWidth);
+
+ this.enable();
+
+ if (swipeDistance > threshold && swipeDeg < settings.touchAngle) {
+ // While swipe is positive and greater than threshold move backward.
+ if (settings.perTouch) {
+ steps = Math.min(steps, toInt(settings.perTouch));
+ }
+
+ if (Components.Direction.is('rtl')) {
+ steps = -steps;
+ }
+
+ Components.Run.make(Components.Direction.resolve('<' + steps));
+ } else if (swipeDistance < -threshold && swipeDeg < settings.touchAngle) {
+ // While swipe is negative and lower than negative threshold move forward.
+ if (settings.perTouch) {
+ steps = Math.max(steps, -toInt(settings.perTouch));
+ }
+
+ if (Components.Direction.is('rtl')) {
+ steps = -steps;
+ }
+
+ Components.Run.make(Components.Direction.resolve('>' + steps));
+ } else {
+ // While swipe don't reach distance apply previous transform.
+ Components.Move.make();
+ }
+
+ Components.Html.root.classList.remove(settings.classes.dragging);
+
+ this.unbindSwipeMove();
+ this.unbindSwipeEnd();
+
+ Events.emit('swipe.end');
+ }
+ },
+
+
+ /**
+ * Binds swipe's starting event.
+ *
+ * @return {Void}
+ */
+ bindSwipeStart: function bindSwipeStart() {
+ var settings = Glide.settings;
+
+ if (settings.swipeThreshold) {
+ Binder.on(START_EVENTS[0], Components.Html.wrapper, this.start.bind(this));
+ }
+
+ if (settings.dragThreshold) {
+ Binder.on(START_EVENTS[1], Components.Html.wrapper, this.start.bind(this));
+ }
+ },
+
+
+ /**
+ * Unbinds swipe's starting event.
+ *
+ * @return {Void}
+ */
+ unbindSwipeStart: function unbindSwipeStart() {
+ Binder.off(START_EVENTS[0], Components.Html.wrapper);
+ Binder.off(START_EVENTS[1], Components.Html.wrapper);
+ },
+
+
+ /**
+ * Binds swipe's moving event.
+ *
+ * @return {Void}
+ */
+ bindSwipeMove: function bindSwipeMove() {
+ Binder.on(MOVE_EVENTS, Components.Html.wrapper, throttle(this.move.bind(this), Glide.settings.throttle));
+ },
+
+
+ /**
+ * Unbinds swipe's moving event.
+ *
+ * @return {Void}
+ */
+ unbindSwipeMove: function unbindSwipeMove() {
+ Binder.off(MOVE_EVENTS, Components.Html.wrapper);
+ },
+
+
+ /**
+ * Binds swipe's ending event.
+ *
+ * @return {Void}
+ */
+ bindSwipeEnd: function bindSwipeEnd() {
+ Binder.on(END_EVENTS, Components.Html.wrapper, this.end.bind(this));
+ },
+
+
+ /**
+ * Unbinds swipe's ending event.
+ *
+ * @return {Void}
+ */
+ unbindSwipeEnd: function unbindSwipeEnd() {
+ Binder.off(END_EVENTS, Components.Html.wrapper);
+ },
+
+
+ /**
+ * Normalizes event touches points accorting to different types.
+ *
+ * @param {Object} event
+ */
+ touches: function touches(event) {
+ if (MOUSE_EVENTS.includes(event.type)) {
+ return event;
+ }
+
+ return event.touches[0] || event.changedTouches[0];
+ },
+
+
+ /**
+ * Gets value of minimum swipe distance settings based on event type.
+ *
+ * @return {Number}
+ */
+ threshold: function threshold(event) {
+ var settings = Glide.settings;
+
+ if (MOUSE_EVENTS.includes(event.type)) {
+ return settings.dragThreshold;
+ }
+
+ return settings.swipeThreshold;
+ },
+
+
+ /**
+ * Enables swipe event.
+ *
+ * @return {self}
+ */
+ enable: function enable() {
+ disabled = false;
+
+ Components.Transition.enable();
+
+ return this;
+ },
+
+
+ /**
+ * Disables swipe event.
+ *
+ * @return {self}
+ */
+ disable: function disable() {
+ disabled = true;
+
+ Components.Transition.disable();
+
+ return this;
+ }
+ };
+
+ /**
+ * Add component class:
+ * - after initial building
+ */
+ Events.on('build.after', function () {
+ Components.Html.root.classList.add(Glide.settings.classes.swipeable);
+ });
+
+ /**
+ * Remove swiping bindings:
+ * - on destroying, to remove added EventListeners
+ */
+ Events.on('destroy', function () {
+ Swipe.unbindSwipeStart();
+ Swipe.unbindSwipeMove();
+ Swipe.unbindSwipeEnd();
+ Binder.destroy();
+ });
+
+ return Swipe;
+};
+
+var Images = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ var Images = {
+ /**
+ * Binds listener to glide wrapper.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ this.bind();
+ },
+
+
+ /**
+ * Binds `dragstart` event on wrapper to prevent dragging images.
+ *
+ * @return {Void}
+ */
+ bind: function bind() {
+ Binder.on('dragstart', Components.Html.wrapper, this.dragstart);
+ },
+
+
+ /**
+ * Unbinds `dragstart` event on wrapper.
+ *
+ * @return {Void}
+ */
+ unbind: function unbind() {
+ Binder.off('dragstart', Components.Html.wrapper);
+ },
+
+
+ /**
+ * Event handler. Prevents dragging.
+ *
+ * @return {Void}
+ */
+ dragstart: function dragstart(event) {
+ event.preventDefault();
+ }
+ };
+
+ /**
+ * Remove bindings from images:
+ * - on destroying, to remove added EventListeners
+ */
+ Events.on('destroy', function () {
+ Images.unbind();
+ Binder.destroy();
+ });
+
+ return Images;
+};
+
+var Anchors = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ /**
+ * Holds detaching status of anchors.
+ * Prevents detaching of already detached anchors.
+ *
+ * @private
+ * @type {Boolean}
+ */
+ var detached = false;
+
+ /**
+ * Holds preventing status of anchors.
+ * If `true` redirection after click will be disabled.
+ *
+ * @private
+ * @type {Boolean}
+ */
+ var prevented = false;
+
+ var Anchors = {
+ /**
+ * Setups a initial state of anchors component.
+ *
+ * @returns {Void}
+ */
+ mount: function mount() {
+ /**
+ * Holds collection of anchors elements.
+ *
+ * @private
+ * @type {HTMLCollection}
+ */
+ this._a = Components.Html.wrapper.querySelectorAll('a');
+
+ this.bind();
+ },
+
+
+ /**
+ * Binds events to anchors inside a track.
+ *
+ * @return {Void}
+ */
+ bind: function bind() {
+ Binder.on('click', Components.Html.wrapper, this.click);
+ },
+
+
+ /**
+ * Unbinds events attached to anchors inside a track.
+ *
+ * @return {Void}
+ */
+ unbind: function unbind() {
+ Binder.off('click', Components.Html.wrapper);
+ },
+
+
+ /**
+ * Handler for click event. Prevents clicks when glide is in `prevent` status.
+ *
+ * @param {Object} event
+ * @return {Void}
+ */
+ click: function click(event) {
+ event.stopPropagation();
+
+ if (prevented) {
+ event.preventDefault();
+ }
+ },
+
+
+ /**
+ * Detaches anchors click event inside glide.
+ *
+ * @return {self}
+ */
+ detach: function detach() {
+ prevented = true;
+
+ if (!detached) {
+ for (var i = 0; i < this.items.length; i++) {
+ this.items[i].draggable = false;
+
+ this.items[i].dataset.href = this.items[i].getAttribute('href');
+
+ this.items[i].removeAttribute('href');
+ }
+
+ detached = true;
+ }
+
+ return this;
+ },
+
+
+ /**
+ * Attaches anchors click events inside glide.
+ *
+ * @return {self}
+ */
+ attach: function attach() {
+ prevented = false;
+
+ if (detached) {
+ for (var i = 0; i < this.items.length; i++) {
+ this.items[i].draggable = true;
+
+ this.items[i].setAttribute('href', this.items[i].dataset.href);
+
+ delete this.items[i].dataset.href;
+ }
+
+ detached = false;
+ }
+
+ return this;
+ }
+ };
+
+ define(Anchors, 'items', {
+ /**
+ * Gets collection of the arrows HTML elements.
+ *
+ * @return {HTMLElement[]}
+ */
+ get: function get() {
+ return Anchors._a;
+ }
+ });
+
+ /**
+ * Detach anchors inside slides:
+ * - on swiping, so they won't redirect to its `href` attributes
+ */
+ Events.on('swipe.move', function () {
+ Anchors.detach();
+ });
+
+ /**
+ * Attach anchors inside slides:
+ * - after swiping and transitions ends, so they can redirect after click again
+ */
+ Events.on('swipe.end', function () {
+ Components.Transition.after(function () {
+ Anchors.attach();
+ });
+ });
+
+ /**
+ * Unbind anchors inside slides:
+ * - on destroying, to bring anchors to its initial state
+ */
+ Events.on('destroy', function () {
+ Anchors.attach();
+ Anchors.unbind();
+ Binder.destroy();
+ });
+
+ return Anchors;
+};
+
+var NAV_SELECTOR = '[data-glide-el="controls[nav]"]';
+var CONTROLS_SELECTOR = '[data-glide-el^="controls"]';
+
+var Controls = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ var Controls = {
+ /**
+ * Inits arrows. Binds events listeners
+ * to the arrows HTML elements.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ /**
+ * Collection of navigation HTML elements.
+ *
+ * @private
+ * @type {HTMLCollection}
+ */
+ this._n = Components.Html.root.querySelectorAll(NAV_SELECTOR);
+
+ /**
+ * Collection of controls HTML elements.
+ *
+ * @private
+ * @type {HTMLCollection}
+ */
+ this._i = Components.Html.root.querySelectorAll(CONTROLS_SELECTOR);
+
+ this.addBindings();
+ },
+
+
+ /**
+ * Sets active class to current slide.
+ *
+ * @return {Void}
+ */
+ setActive: function setActive() {
+ for (var i = 0; i < this._n.length; i++) {
+ this.addClass(this._n[i].children);
+ }
+ },
+
+
+ /**
+ * Removes active class to current slide.
+ *
+ * @return {Void}
+ */
+ removeActive: function removeActive() {
+ for (var i = 0; i < this._n.length; i++) {
+ this.removeClass(this._n[i].children);
+ }
+ },
+
+
+ /**
+ * Toggles active class on items inside navigation.
+ *
+ * @param {HTMLElement} controls
+ * @return {Void}
+ */
+ addClass: function addClass(controls) {
+ var settings = Glide.settings;
+ var item = controls[Glide.index];
+
+ item.classList.add(settings.classes.activeNav);
+
+ siblings(item).forEach(function (sibling) {
+ sibling.classList.remove(settings.classes.activeNav);
+ });
+ },
+
+
+ /**
+ * Removes active class from active control.
+ *
+ * @param {HTMLElement} controls
+ * @return {Void}
+ */
+ removeClass: function removeClass(controls) {
+ controls[Glide.index].classList.remove(Glide.settings.classes.activeNav);
+ },
+
+
+ /**
+ * Adds handles to the each group of controls.
+ *
+ * @return {Void}
+ */
+ addBindings: function addBindings() {
+ for (var i = 0; i < this._i.length; i++) {
+ this.bind(this._i[i].children);
+ }
+ },
+
+
+ /**
+ * Removes handles from the each group of controls.
+ *
+ * @return {Void}
+ */
+ removeBindings: function removeBindings() {
+ for (var i = 0; i < this._i.length; i++) {
+ this.unbind(this._i[i].children);
+ }
+ },
+
+
+ /**
+ * Binds events to arrows HTML elements.
+ *
+ * @param {HTMLCollection} elements
+ * @return {Void}
+ */
+ bind: function bind(elements) {
+ for (var i = 0; i < elements.length; i++) {
+ Binder.on(['click', 'touchstart'], elements[i], this.click);
+ }
+ },
+
+
+ /**
+ * Unbinds events binded to the arrows HTML elements.
+ *
+ * @param {HTMLCollection} elements
+ * @return {Void}
+ */
+ unbind: function unbind(elements) {
+ for (var i = 0; i < elements.length; i++) {
+ Binder.off(['click', 'touchstart'], elements[i]);
+ }
+ },
+
+
+ /**
+ * Handles `click` event on the arrows HTML elements.
+ * Moves slider in driection precised in
+ * `data-glide-dir` attribute.
+ *
+ * @param {Object} event
+ * @return {Void}
+ */
+ click: function click(event) {
+ event.preventDefault();
+
+ Components.Run.make(Components.Direction.resolve(event.currentTarget.dataset.glideDir));
+ }
+ };
+
+ define(Controls, 'items', {
+ /**
+ * Gets collection of the controls HTML elements.
+ *
+ * @return {HTMLElement[]}
+ */
+ get: function get() {
+ return Controls._i;
+ }
+ });
+
+ /**
+ * Swap active class of current navigation item:
+ * - after mounting to set it to initial index
+ * - after each move to the new index
+ */
+ Events.on(['mount.after', 'move.after'], function () {
+ Controls.setActive();
+ });
+
+ /**
+ * Remove bindings and HTML Classes:
+ * - on destroying, to bring markup to its initial state
+ */
+ Events.on('destroy', function () {
+ Controls.removeBindings();
+ Controls.removeActive();
+ Binder.destroy();
+ });
+
+ return Controls;
+};
+
+var Keyboard = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ var Keyboard = {
+ /**
+ * Binds keyboard events on component mount.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ if (Glide.settings.keyboard) {
+ this.bind();
+ }
+ },
+
+
+ /**
+ * Adds keyboard press events.
+ *
+ * @return {Void}
+ */
+ bind: function bind() {
+ Binder.on('keyup', document, this.press);
+ },
+
+
+ /**
+ * Removes keyboard press events.
+ *
+ * @return {Void}
+ */
+ unbind: function unbind() {
+ Binder.off('keyup', document);
+ },
+
+
+ /**
+ * Handles keyboard's arrows press and moving glide foward and backward.
+ *
+ * @param {Object} event
+ * @return {Void}
+ */
+ press: function press(event) {
+ if (event.keyCode === 39) {
+ Components.Run.make(Components.Direction.resolve('>'));
+ }
+
+ if (event.keyCode === 37) {
+ Components.Run.make(Components.Direction.resolve('<'));
+ }
+ }
+ };
+
+ /**
+ * Remove bindings from keyboard:
+ * - on destroying to remove added events
+ * - on updating to remove events before remounting
+ */
+ Events.on(['destroy', 'update'], function () {
+ Keyboard.unbind();
+ });
+
+ /**
+ * Remount component
+ * - on updating to reflect potential changes in settings
+ */
+ Events.on('update', function () {
+ Keyboard.mount();
+ });
+
+ /**
+ * Destroy binder:
+ * - on destroying to remove listeners
+ */
+ Events.on('destroy', function () {
+ Binder.destroy();
+ });
+
+ return Keyboard;
+};
+
+var Autoplay = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ var Autoplay = {
+ /**
+ * Initializes autoplaying and events.
+ *
+ * @return {Void}
+ */
+ mount: function mount() {
+ this.start();
+
+ if (Glide.settings.hoverpause) {
+ this.bind();
+ }
+ },
+
+
+ /**
+ * Starts autoplaying in configured interval.
+ *
+ * @param {Boolean|Number} force Run autoplaying with passed interval regardless of `autoplay` settings
+ * @return {Void}
+ */
+ start: function start() {
+ var _this = this;
+
+ if (Glide.settings.autoplay) {
+ if (isUndefined(this._i)) {
+ this._i = setInterval(function () {
+ _this.stop();
+
+ Components.Run.make('>');
+
+ _this.start();
+ }, this.time);
+ }
+ }
+ },
+
+
+ /**
+ * Stops autorunning of the glide.
+ *
+ * @return {Void}
+ */
+ stop: function stop() {
+ this._i = clearInterval(this._i);
+ },
+
+
+ /**
+ * Stops autoplaying while mouse is over glide's area.
+ *
+ * @return {Void}
+ */
+ bind: function bind() {
+ var _this2 = this;
+
+ Binder.on('mouseover', Components.Html.root, function () {
+ _this2.stop();
+ });
+
+ Binder.on('mouseout', Components.Html.root, function () {
+ _this2.start();
+ });
+ },
+
+
+ /**
+ * Unbind mouseover events.
+ *
+ * @returns {Void}
+ */
+ unbind: function unbind() {
+ Binder.off(['mouseover', 'mouseout'], Components.Html.root);
+ }
+ };
+
+ define(Autoplay, 'time', {
+ /**
+ * Gets time period value for the autoplay interval. Prioritizes
+ * times in `data-glide-autoplay` attrubutes over options.
+ *
+ * @return {Number}
+ */
+ get: function get() {
+ var autoplay = Components.Html.slides[Glide.index].getAttribute('data-glide-autoplay');
+
+ if (autoplay) {
+ return toInt(autoplay);
+ }
+
+ return toInt(Glide.settings.autoplay);
+ }
+ });
+
+ /**
+ * Stop autoplaying and unbind events:
+ * - on destroying, to clear defined interval
+ * - on updating via API to reset interval that may changed
+ */
+ Events.on(['destroy', 'update'], function () {
+ Autoplay.unbind();
+ });
+
+ /**
+ * Stop autoplaying:
+ * - before each run, to restart autoplaying
+ * - on pausing via API
+ * - on destroying, to clear defined interval
+ * - while starting a swipe
+ * - on updating via API to reset interval that may changed
+ */
+ Events.on(['run.before', 'pause', 'destroy', 'swipe.start', 'update'], function () {
+ Autoplay.stop();
+ });
+
+ /**
+ * Start autoplaying:
+ * - after each run, to restart autoplaying
+ * - on playing via API
+ * - while ending a swipe
+ */
+ Events.on(['run.after', 'play', 'swipe.end'], function () {
+ Autoplay.start();
+ });
+
+ /**
+ * Remount autoplaying:
+ * - on updating via API to reset interval that may changed
+ */
+ Events.on('update', function () {
+ Autoplay.mount();
+ });
+
+ /**
+ * Destroy a binder:
+ * - on destroying glide instance to clearup listeners
+ */
+ Events.on('destroy', function () {
+ Binder.destroy();
+ });
+
+ return Autoplay;
+};
+
+/**
+ * Sorts keys of breakpoint object so they will be ordered from lower to bigger.
+ *
+ * @param {Object} points
+ * @returns {Object}
+ */
+function sortBreakpoints(points) {
+ if (isObject(points)) {
+ return sortKeys(points);
+ } else {
+ warn('Breakpoints option must be an object');
+ }
+
+ return {};
+}
+
+var Breakpoints = function (Glide, Components, Events) {
+ /**
+ * Instance of the binder for DOM Events.
+ *
+ * @type {EventsBinder}
+ */
+ var Binder = new EventsBinder();
+
+ /**
+ * Holds reference to settings.
+ *
+ * @type {Object}
+ */
+ var settings = Glide.settings;
+
+ /**
+ * Holds reference to breakpoints object in settings
+ *
+ * @type {Object}
+ */
+ var points = settings.breakpoints;
+
+ /**
+ * Sort breakpoints from smaller to larger. It is required in order
+ * to proper matching currently active breakpoint settings.
+ */
+ points = sortBreakpoints(points);
+
+ /**
+ * Cache initial settings before overwritting.
+ *
+ * @type {Object}
+ */
+ var defaults = _extends({}, settings);
+
+ var Breakpoints = {
+ /**
+ * Matches settings for currectly matching media breakpoint.
+ *
+ * @param {Object} points
+ * @returns {Object}
+ */
+ match: function match(points) {
+ if (typeof window.matchMedia !== 'undefined') {
+ for (var point in points) {
+ if (points.hasOwnProperty(point)) {
+ if (window.matchMedia('(max-width: ' + point + 'px)').matches) {
+ return points[point];
+ }
+ }
+ }
+ }
+
+ return defaults;
+ }
+ };
+
+ /**
+ * Overwrite instance settings with currently matching breakpoint settings.
+ * This happens right after component initialization.
+ */
+ _extends(settings, Breakpoints.match(points));
+
+ /**
+ * Update glide with settings of matched brekpoint:
+ * - window resize to update slider
+ */
+ Binder.on('resize', window, throttle(function () {
+ _extends(settings, Breakpoints.match(points));
+ }, Glide.settings.throttle));
+
+ /**
+ * Resort and update default settings:
+ * - on reinit via API, so breakpoint matching will be performed with options
+ */
+ Events.on('update', function () {
+ points = sortBreakpoints(points);
+
+ defaults = _extends({}, settings);
+ });
+
+ /**
+ * Unbind resize listener:
+ * - on destroying, to bring markup to its initial state
+ */
+ Events.on('destroy', function () {
+ Binder.off('resize', window);
+ });
+
+ return Breakpoints;
+};
+
+// Required components
+// Optional components
+var COMPONENTS = {
+ // Required
+ Html: Html,
+ Translate: Translate,
+ Transition: Transition,
+ Direction: Direction,
+ Peek: Peek,
+ Sizes: Sizes,
+ Gaps: Gaps,
+ Move: Move,
+ Clones: Clones,
+ Resize: Resize,
+ Build: Build,
+ Run: Run,
+
+ // Optional
+ Swipe: Swipe,
+ Images: Images,
+ Anchors: Anchors,
+ Controls: Controls,
+ Keyboard: Keyboard,
+ Autoplay: Autoplay,
+ Breakpoints: Breakpoints
+};
+
+var Glide = function (_Core) {
+ inherits(Glide, _Core);
+
+ function Glide() {
+ classCallCheck(this, Glide);
+ return possibleConstructorReturn(this, (Glide.__proto__ || Object.getPrototypeOf(Glide)).apply(this, arguments));
+ }
+
+ createClass(Glide, [{
+ key: 'mount',
+ value: function mount() {
+ var extensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+ return get(Glide.prototype.__proto__ || Object.getPrototypeOf(Glide.prototype), 'mount', this).call(this, _extends({}, COMPONENTS, extensions));
+ }
+ }]);
+ return Glide;
+}(Glide$2);
+
+return Glide;
+
+})));