Add selected and drag classes to elements

davidjerleke · Apr 10, 2019 · 607b2a9 · 607b2a9
1 parent 2f1eba4
commit 607b2a9
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 40 deletions.
diff --git a/docs/assets/style.css b/docs/assets/style.css
diff --git a/docs/index.html b/docs/index.html
@@ -502,9 +502,6 @@ <h4 class="feature__heading">Startindex</h4>
 
         var onInit = function() {
           var index = embla.getSelectedIndex()
-          if (options.draggable !== false) {
-            view.classList.add('draggable')
-          }
           dots[index].classList.add('embla__dot--selected')
         }
         var onSelect = function() {
@@ -514,17 +511,9 @@ <h4 class="feature__heading">Startindex</h4>
             .classList.remove('embla__dot--selected')
           dots[index].classList.add('embla__dot--selected')
         }
-        var onDragStart = function() {
-          view.classList.add('is-dragging')
-        }
-        var onDragEnd = function() {
-          view.classList.remove('is-dragging')
-        }
 
         embla.on('init', onInit)
         embla.on('select', onSelect)
-        embla.on('dragStart', onDragStart)
-        embla.on('dragEnd', onDragEnd)
         nextBtn.addEventListener('click', embla.next, false)
         prevBtn.addEventListener('click', embla.previous, false)
 

diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/scss/_embla.scss b/docs/scss/_embla.scss
@@ -8,7 +8,7 @@
   overflow: hidden;
   position: relative;
 
-  &.draggable {
+  &.is-draggable {
     cursor: move;
     cursor: grab;
   }

diff --git a/src/components/options.ts b/src/components/options.ts
@@ -2,27 +2,36 @@ export type Alignments = 'start' | 'center' | 'end'
 
 export type Options = {
   align: Alignments
-  container: string
+  containerSelector: string
   draggable: boolean
+  draggableClass: string
+  draggingClass: string
   loop: boolean
+  selectedClass: string
   speed: number
   startIndex: number
 }
 
 export type UserOptions = {
   align?: Alignments
-  container?: string
+  containerSelector?: string
   draggable?: boolean
+  draggableClass?: string
+  draggingClass?: string
   loop?: boolean
+  selectedClass?: string
   speed?: number
   startIndex?: number
 }
 
 export const defaultOptions = Object.freeze({
   align: 'center',
-  container: '*',
+  containerSelector: '*',
   draggable: true,
+  draggableClass: 'is-draggable',
+  draggingClass: 'is-dragging',
   loop: false,
+  selectedClass: 'is-selected',
   speed: 10,
   startIndex: 0,
 })