@websy/websy-designs 1.1.0 → 1.1.3

package/dist/websy-designs.debug.js

@@ -22,6 +22,7 @@
   APIService
   ButtonGroup
   WebsyUtils
+  WebsyCarousel
   Pager
 */ 
 
@@ -197,6 +198,189 @@ class ButtonGroup {
   }
 }
 
+/* global */
+
+class WebsyCarousel {
+  constructor (elementId, options) {
+    const DEFAULTS = {
+      currentFrame: 0,
+      frameDuration: 4000,
+      showFrameSelector: true,
+      showPrevNext: true      
+    }
+    this.playTimeoutFn = null
+    this.options = Object.assign({}, DEFAULTS, options)
+    if (!elementId) {
+      console.log('No element Id provided')
+    }
+    const el = document.getElementById(elementId)
+    if (el) {
+      this.elementId = elementId
+      el.addEventListener('click', this.handleClick.bind(this))
+      this.render()
+    }
+  }
+  handleClick (event) {
+    if (event.target.classList.contains('websy-next-arrow')) {
+      this.next()
+    } 
+    if (event.target.classList.contains('websy-prev-arrow')) {
+      this.prev()
+    }
+    if (event.target.classList.contains('websy-progress-btn' || 'websy-progress-btn-active')) {
+      const index = +event.target.getAttribute('data-index')
+      let prevFrameIndex = this.options.currentFrame 
+      this.options.currentFrame = index
+      this.showFrame(prevFrameIndex, index)
+    }
+  }
+  next () {
+    this.pause()
+    let prevFrameIndex = this.options.currentFrame 
+    if (this.options.currentFrame === this.options.frames.length - 1) {
+      this.options.currentFrame = 0
+    } 
+    else {
+      this.options.currentFrame++
+    }
+    this.showFrame(prevFrameIndex, this.options.currentFrame)
+    // this.play()
+    // document.getElementById(`${this.elementId}_frame_${this.options.currentFrame}`)
+    //   .style.transform = `translateX(-100%)`
+    // if (`${this.options.currentFrame === this.options.frames.length - 1}`) {
+    //   document.getElementById`${this.elementId}_frame_${this.options.currentFrame}`.style.transform = `translateX('-100%')`
+    // }
+  }
+  pause () {
+    if (this.playTimeoutFn) {
+      clearTimeout(this.playTimeoutFn)
+    }
+  }
+  play () {
+    this.playTimeoutFn = setTimeout(() => {
+      let prevFrameIndex = this.options.currentFrame 
+      if (this.options.currentFrame === this.options.frames.length - 1) {
+        this.options.currentFrame = 0
+      } 
+      else {
+        this.options.currentFrame++
+      }
+      this.showFrame(prevFrameIndex, this.options.currentFrame)
+      this.play()
+    }, this.options.frameDuration)
+  }
+  prev () {
+    this.pause()
+    let prevFrameIndex = this.options.currentFrame 
+    if (this.options.currentFrame === 0) {
+      this.options.currentFrame = this.options.frames.length - 1
+    } 
+    else {
+      this.options.currentFrame--
+    }
+    this.showFrame(prevFrameIndex, this.options.currentFrame)
+    // this.play()
+    // document.getElementById(`${this.elementId}_frame_${this.options.currentFrame}`)
+    //   .style.transform = `translateX(100%)`
+  }
+
+  render (options) {
+    this.options = Object.assign({}, this.options, options)
+    this.resize()
+  }
+
+  resize () {
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      let html = `
+      <div class="websy-carousel">
+        ` 
+      this.options.frames.forEach((frame, frameIndex) => {
+        html += `
+        <div id="${this.elementId}_frame_${frameIndex}" class="websy-frame-container animate" style="transform: translateX(${frameIndex === 0 ? '0' : '100%'})">
+        `
+        frame.images.forEach(image => {
+          html += `
+          <div style="${image.style || 'position: absolute; width: 100%; height: 100%; top: 0; left: 0;'} background-image: url('${image.url}')" class="${image.classes || ''} websy-carousel-image">
+          </div>
+        `
+        })
+        frame.text && frame.text.forEach(text => {
+          html += `
+          <div style="${text.style || 'position: absolute; width: 100%; height: 100%; top: 0; left: 0;'}" class="${text.classes || ''} websy-carousel-image">
+          ${text.html}
+          </div>
+        `
+        })
+        html += `</div>`
+      })
+      if (this.options.showFrameSelector === true) {
+        html += `<div class="websy-btn-parent">`
+        this.options.frames.forEach((frame, frameIndex) => {
+          html += `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-index="${frameIndex}" id="${this.elementId}_selector_${frameIndex}" 
+            class="websy-progress-btn ${this.options.currentFrame === frameIndex ? 'websy-progress-btn-active' : ''}">
+          <title>Ellipse</title><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+          </svg>
+          `
+        })
+        html += `</div>`
+      } 
+      if (this.options.showPrevNext === true) {
+        html += `
+      <svg xmlns="http://www.w3.org/2000/svg" class="websy-prev-arrow"
+      viewBox="0 0 512 512">
+      <title>Caret Back</title>
+      <path d="M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z"/>
+      </svg>
+      </div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="websy-next-arrow">
+      <title>Caret Forward</title>
+      <path d="M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"/>
+      </svg>
+      `
+      }
+      html += `
+      </div>
+      `
+      el.innerHTML = html
+    }
+    // this.play()
+    // this.showFrameSelector()
+  }
+
+  showFrame (prevFrameIndex, currFrameIndex) {  
+    let prevTranslateX = prevFrameIndex > currFrameIndex ? '100%' : '-100%'
+    let nextTranslateX = prevFrameIndex < currFrameIndex ? '100%' : '-100%'
+    if (currFrameIndex === 0 && prevFrameIndex === this.options.frames.length - 1) {
+      prevTranslateX = '-100%'
+      nextTranslateX = '100%'
+    }
+    else if (prevFrameIndex === 0 && currFrameIndex === this.options.frames.length - 1) {
+      prevTranslateX = '100%'
+      nextTranslateX = '-100%'
+    }      
+    const prevF = document.getElementById(
+      `${this.elementId}_frame_${prevFrameIndex}`)        
+    prevF.style.transform = `translateX(${prevTranslateX})`
+    const btnInactive = document.getElementById(`${this.elementId}_selector_${prevFrameIndex}`)
+    btnInactive.classList.remove('websy-progress-btn-active')    
+    const newF = document.getElementById(`${this.elementId}_frame_${currFrameIndex}`)    
+    newF.classList.remove('animate')
+    newF.style.transform = `translateX(${nextTranslateX})`      
+    setTimeout(() => {
+      newF.classList.add('animate')
+      newF.style.transform = 'translateX(0%)'
+    }, 100)
+
+    const btnActive = document.getElementById(`${this.elementId}_selector_${currFrameIndex}`)
+    btnActive.classList.add('websy-progress-btn-active')    
+  }
+
+  // showFrameSelector () {
+  // }
+}
+
 class WebsyDatePicker {
   constructor (elementId, options) {
     this.oneDay = 1000 * 60 * 60 * 24
@@ -828,12 +1012,13 @@ class WebsyDropdown {
       const headerLabel = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
       const headerValue = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
       let html = `
-        <div class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''}'>
+        <div id='${this.elementId}_container' class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''} ${this.options.style}'>
           <div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
+            <svg class='search' width="20" height="20" viewBox="0 0 512 512"><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>
             <span id='${this.elementId}_headerLabel' class='websy-dropdown-header-label'>${this.options.label}</span>
             <span data-info='${headerLabel}' class='websy-dropdown-header-value' id='${this.elementId}_selectedItems'>${headerLabel}</span>
             <input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
-            <svg class='arrow' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
+            <svg class='arrow' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>            
       `
       if (this.options.allowClear === true) {
         html += `
@@ -928,6 +1113,10 @@ class WebsyDropdown {
     else if (event.target.classList.contains('clear')) {
       this.clearSelected()
     }
+    else if (event.target.classList.contains('search')) {
+      const el = document.getElementById(`${this.elementId}_container`)
+      el.classList.toggle('search-open')
+    }
   }
   handleKeyUp (event) {
     if (event.target.classList.contains('websy-dropdown-search')) {
@@ -3616,6 +3805,9 @@ class WebsyTable2 {
             }
             if (c.backgroundColor) {
               style += `background-color: ${c.backgroundColor}; `
+              if (!c.color) {
+                style += `color: ${WebsyDesigns.Utils.getLightDark(c.backgroundColor)}; `  
+              }
             }
             if (c.color) {
               style += `color: ${c.color}; `
@@ -3910,16 +4102,18 @@ class WebsyTable2 {
     }).join('') + '</tr>'
     const headEl = document.getElementById(`${this.elementId}_head`)
     headEl.innerHTML = headHTML
-    let dropdownHTML = ``
-    this.options.columns.forEach((c, i) => {
-      if (c.searchable && c.searchField) {
-        dropdownHTML += `
-          <div id="${this.elementId}_columnSearch_${i}" class="websy-modal-dropdown"></div>
-        `
-      }
-    })
     const dropdownEl = document.getElementById(`${this.elementId}_dropdownContainer`)
-    dropdownEl.innerHTML = dropdownHTML
+    if (dropdownEl.innerHTML === '') {
+      let dropdownHTML = ``
+      this.options.columns.forEach((c, i) => {
+        if (c.searchable && c.searchField) {      
+          dropdownHTML += `
+            <div id="${this.elementId}_columnSearch_${i}" class="websy-modal-dropdown"></div>
+          `
+        }
+      })    
+      dropdownEl.innerHTML = dropdownHTML 
+    }    
     // const colGroupEl = document.getElementById(`${this.elementId}_cols`)
     // colGroupEl.innerHTML = colGroupHTML
     // let footHTML = '<tr>' + this.options.columns.map((c, i) => {