@knowark/componarkjs 1.7.3 → 1.7.5

package/lib/base/utils/helpers.test.js

@@ -17,8 +17,8 @@ describe('Helpers', () => {
   it('does not allow invalid attribute', () => {
     const element = document.createElement('div')
     element.innerHTML = /* html */`
-	    <button listen ark-on-click="myMethod"></button>
-	  `
+      <button listen ark-on-click="myMethod"></button>
+    `
 
     listen(element)
 
@@ -41,8 +41,8 @@ describe('Helpers', () => {
   it('It does not allow to execute undeclared methods.', () => {
     const element = document.createElement('div')
     element.innerHTML = /* html */`
-	    <button listen on-click="myMethod"></button>
-	  `
+      <button listen on-click="myMethod"></button>
+    `
 
     listen(element)
 
@@ -52,10 +52,10 @@ describe('Helpers', () => {
 
   it('can listen events', () => {
     const element = document.createElement('div')
-    element['binding'] = 'listen'
+    element.binding = 'listen'
     element.innerHTML = /* html */`
-	    <button listen on-click="myMethod"></button>
-	  `
+      <button listen on-click="myMethod"></button>
+    `
     // @ts-ignore
     element.myMethod = function () {
       element.setAttribute('clicked-element', '')
@@ -69,10 +69,10 @@ describe('Helpers', () => {
 
   it('ignores missing methods when listening', () => {
     const element = document.createElement('div')
-    element['binding'] = 'listen'
+    element.binding = 'listen'
     element.innerHTML = /* html */`
-	    <button listen on-click="missing"></button>
-	  `
+      <button listen on-click="missing"></button>
+    `
     // @ts-ignore
     element.myMethod = function () {
       element.setAttribute('clicked-element', '')
@@ -121,7 +121,7 @@ describe('Helpers', () => {
   })
 
   it('gets an object properties by a given path', () => {
-    const object = {state: {data: {value: 25}}, data: 13}
+    const object = { state: { data: { value: 25 } }, data: 13 }
 
     let value = get(object, 'data')
 
@@ -144,10 +144,10 @@ describe('Helpers', () => {
     const classes = {
       [`background-${background}`]: background,
       [`color-${color}`]: color,
-      [`shadow-${shadow}`]: shadow,
+      [`shadow-${shadow}`]: shadow
     }
 
-    let result = keys(classes)
+    const result = keys(classes)
 
     expect(result).toEqual('background-primary shadow-small')
   })

package/lib/base/utils/uuid.js

@@ -2,8 +2,8 @@
 export function uuid () {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
     /[xy]/g, function (c) {
-    var r = (Math.random() * 16) | 0
-    var v = c === 'x' ? r : (r & 0x3) | 0x8
-    return v.toString(16)
-  })
+      const r = (Math.random() * 16) | 0
+      const v = c === 'x' ? r : (r & 0x3) | 0x8
+      return v.toString(16)
+    })
 }

package/lib/components/audio/components/audio.js

@@ -13,7 +13,7 @@ export class Audio extends Component {
     return super.init()
   }
 
-  reflectedProperties() {
+  reflectedProperties () {
     return ['status']
   }
 
@@ -49,13 +49,13 @@ export class Audio extends Component {
     event.stopPropagation()
     this.status = 'recording'
     this.render()
-    const options = {audio: true}
+    const options = { audio: true }
     const navigator = this.global.navigator
     const stream = await navigator.mediaDevices.getUserMedia(options)
 
     this.recorder = new this.global.MediaRecorder(stream)
     this.recorder.addEventListener('dataavailable', this._onData.bind(this))
-    this.timerId = this._time()     
+    this.timerId = this._time()
     this.recorder.start()
   }
 
@@ -79,7 +79,7 @@ export class Audio extends Component {
 
   _time () {
     let count = 0
-    return  setInterval(() => {
+    return setInterval(() => {
       count += 1
       const seconds = count % 60
       const minutes = Math.trunc(count / 60)
@@ -92,9 +92,9 @@ export class Audio extends Component {
   }
 
   /** @param {any} event */
-  _onData(event) {
+  _onData (event) {
     const audio = this.select('.ark-audio__audio')
-    audio['src'] = this.global.URL.createObjectURL(event.data)
+    audio.src = this.global.URL.createObjectURL(event.data)
     const reader = new this.global.FileReader()
     reader.readAsDataURL(event.data)
     reader.onloadend = () => { this.dataURL = reader.result }

package/lib/components/audio/components/audio.test.js

@@ -14,16 +14,15 @@ const mockGlobal = {
     this.start = () => {}
     this.addEventListener = (type, callback) => {}
     this.stop = () => {}
-    this.stream = {getTracks: () => [{stop: () => null}]}
+    this.stream = { getTracks: () => [{ stop: () => null }] }
   },
   FileReader: function () {
     const self = this
     this.readAsDataURL = (data) => setTimeout(
-      () => self['onloadend'](), 1000)
+      () => self.onloadend(), 1000)
     this.result = 'base64::data::result'
-
   },
-  URL: {createObjectURL: (data) => 'mock://data/url'}
+  URL: { createObjectURL: (data) => 'mock://data/url' }
 }
 
 describe('Audio', () => {
@@ -52,7 +51,7 @@ describe('Audio', () => {
       <ark-audio></ark-audio>
     `
     const audio = container.querySelector('ark-audio')
-    audio.init({global: mockGlobal})
+    audio.init({ global: mockGlobal })
 
     expect(audio.status).toEqual('idle')
     await audio.start(new Event('click'))
@@ -65,7 +64,7 @@ describe('Audio', () => {
       <ark-audio></ark-audio>
     `
     const audio = container.querySelector('ark-audio')
-    audio.init({global: mockGlobal})
+    audio.init({ global: mockGlobal })
 
     expect(audio.status).toEqual('idle')
     await audio.start(new Event('click'))
@@ -79,7 +78,7 @@ describe('Audio', () => {
       <ark-audio></ark-audio>
     `
     const audio = container.querySelector('ark-audio')
-    audio.init({global: mockGlobal})
+    audio.init({ global: mockGlobal })
 
     expect(audio.status).toEqual('idle')
     await audio.start(new Event('click'))
@@ -96,7 +95,7 @@ describe('Audio', () => {
       <ark-audio></ark-audio>
     `
     const audio = container.querySelector('ark-audio')
-    audio.init({global: mockGlobal})
+    audio.init({ global: mockGlobal })
 
     await audio.start(new Event('click'))
     jest.runOnlyPendingTimers()
@@ -112,12 +111,14 @@ describe('Audio', () => {
       <ark-audio></ark-audio>
     `
     const audio = container.querySelector('ark-audio')
-    audio.init({global: mockGlobal})
+    audio.init({ global: mockGlobal })
 
     await audio.start(new Event('click'))
     audio.stop(new Event('click'))
 
-    audio._onData({data: new Blob(['Hello'], {type: 'text/plain'})})
+    audio._onData({
+      data: new globalThis.Blob(['Hello'], { type: 'text/plain' })
+    })
     jest.runOnlyPendingTimers()
 
     expect(audio.dataURL).toEqual('base64::data::result')

package/lib/components/audio/styles/ark.css.js

@@ -80,4 +80,4 @@ const css = String.raw; export default css`
   text-align: center;
   align-items: center;
 }
-`
+`

package/lib/components/camera/components/camera.test.js

@@ -4,8 +4,8 @@ const mockGlobal = () => ({
   navigator: {
     mediaDevices: {
       __stops: 0,
-      async getUserMedia(_options) {
-        return { getTracks: () => [{stop: () => {this.__stops += 1}}] }
+      async getUserMedia (_options) {
+        return { getTracks: () => [{ stop: () => { this.__stops += 1 } }] }
       }
     }
   }
@@ -55,7 +55,7 @@ describe('Camera', () => {
       <ark-camera></ark-camera>
     `
     const camera = container.querySelector('ark-camera')
-    camera.init({global: mockGlobal()})
+    camera.init({ global: mockGlobal() })
 
     await camera.start()
 
@@ -68,7 +68,7 @@ describe('Camera', () => {
     `
     const camera = container.querySelector('ark-camera')
     const global = mockGlobal()
-    camera.init({global: global})
+    camera.init({ global })
 
     await camera.start()
 
@@ -83,7 +83,7 @@ describe('Camera', () => {
     `
     const camera = container.querySelector('ark-camera')
     const global = mockGlobal()
-    camera.init({global: global})
+    camera.init({ global })
 
     await camera.setCameraOrientation('environment')
 
@@ -95,7 +95,7 @@ describe('Camera', () => {
       <ark-camera></ark-camera>
     `
     const camera = container.querySelector('ark-camera')
-    camera.init({global: mockGlobal()})
+    camera.init({ global: mockGlobal() })
 
     const data = camera.dataURL()
 

package/lib/components/camera/styles/ark.css.js

@@ -14,4 +14,4 @@ const css = String.raw; export default css`
 .ark-camera__video {
   transform: rotateY(180deg);
 }
-`
+`

package/lib/components/camera/styles/index.js

@@ -1,2 +1,2 @@
 import styles from './ark.css.js'
-export default styles
+export default styles

package/lib/components/capture/components/capture.js

@@ -4,7 +4,7 @@ const tag = 'ark-capture'
 export class Capture extends Component {
   constructor () {
     super()
-    const type = this['receive'] || 'emit'
+    const type = this.receive || 'emit'
     this.addEventListener(type, this.handle.bind(this))
   }
 
@@ -24,7 +24,7 @@ export class Capture extends Component {
   }
 
   render () {
-    const outputTemplate  = this._pop(':scope > template')?.innerHTML
+    const outputTemplate = this._pop(':scope > template')?.innerHTML
     this.template = (
       outputTemplate ? this._format(outputTemplate) : this.template)
 

package/lib/components/capture/components/capture.test.js

@@ -12,7 +12,7 @@ describe('Capture', () => {
     container.remove()
     container = null
   })
-  
+
   it('can be instantiated', () => {
     container.innerHTML = `
     <ark-capture></ark-capture>

package/lib/components/droparea/components/droparea-preview.js

@@ -4,18 +4,18 @@ import './droparea.js'
 const tag = 'ark-droparea-preview'
 
 export class DropareaPreview extends Component {
-  init(_context = {}) {
+  init (_context = {}) {
     return super.init()
   }
 
-  render() {
+  render () {
     this.content = /* html */ `
          <ul data-preview-list class="ark-droparea-preview__list drag-sort-enable"></ul>
         `
     return super.render()
   }
 
-  previewFile(file) {
+  previewFile (file) {
     const blobUrl = URL.createObjectURL(file)
     const fileType = file.type.split('/')[0]
     const previewZone = this.select('[data-preview-list]')
@@ -43,7 +43,7 @@ export class DropareaPreview extends Component {
     }
   }
 
-  toggleVisibility() {
+  toggleVisibility () {
     const previewZone = this.select('[data-preview-list]')
     this.files.length !== 0
       ? (previewZone.style.display = 'grid')
@@ -52,31 +52,31 @@ export class DropareaPreview extends Component {
 
   /* DragSort Functionality */
 
-  enableDragSort(listClass) {
+  enableDragSort (listClass) {
     const sortableLists = this.getElementsByClassName(listClass)
     Array.prototype.map.call(sortableLists, (list) => {
       this.enableDragList(list)
     })
   }
 
-  enableDragList(list) {
+  enableDragList (list) {
     Array.prototype.map.call(list.children, (item) => {
       this.enableDragItem(item)
     })
   }
 
-  enableDragItem(item) {
+  enableDragItem (item) {
     item.setAttribute('draggable', true)
     item.addEventListener('drag', this.handleDrag.bind(this, item))
     item.addEventListener('dragend', this.handleDrop, false)
   }
 
   /* istanbul ignore next */
-  handleDrag(item, event) {
-    const selectedItem = item,
-      list = selectedItem.parentNode,
-      x = event.clientX,
-      y = event.clientY
+  handleDrag (item, event) {
+    const selectedItem = item
+    const list = selectedItem.parentNode
+    const x = event.clientX
+    const y = event.clientY
 
     selectedItem.classList.add('drag-sort-active')
     let swapItem =
@@ -85,25 +85,26 @@ export class DropareaPreview extends Component {
         : document.elementFromPoint(x, y)
     if (list === swapItem.parentNode) {
       swapItem = (
-        swapItem !== selectedItem.nextSibling ?
-        swapItem : swapItem.nextSibling)
+        swapItem !== selectedItem.nextSibling
+          ? swapItem
+          : swapItem.nextSibling)
       list.insertBefore(selectedItem, swapItem)
     }
   }
 
-  handleDrop(item) {
+  handleDrop (item) {
     const droparea = item.target.closest('ark-droparea')
     droparea.preview.createNewFileList()
     item.target.classList.remove('drag-sort-active')
     droparea.preview.dispatchAlterEvent()
   }
-  /*----------------------------------------------------*/
+  /* ---------------------------------------------------- */
 
-  dispatchAlterEvent() {
+  dispatchAlterEvent () {
     this.emit('alter', this.mediaList)
   }
 
-  createNewFileList() {
+  createNewFileList () {
     const nodeList = this.querySelectorAll('li')
     const newList = []
     nodeList.forEach((item, index) => {
@@ -113,13 +114,13 @@ export class DropareaPreview extends Component {
     this.droparea.fileList = newList
   }
 
-  fileExists(file) {
+  fileExists (file) {
     const present = this.files.some((item) => item.name === file.name)
     return present
   }
 
-  removeFile(file, event) {
-    let element = event.target
+  removeFile (file, event) {
+    const element = event.target
     const fileIndex = this.droparea.fileList.indexOf(file)
     this.droparea.fileList.splice(fileIndex, 1)
     element.parentNode.remove()
@@ -130,28 +131,28 @@ export class DropareaPreview extends Component {
     this.dispatchAlterEvent()
   }
 
-  fileIndex(file) {
+  fileIndex (file) {
     return this.droparea.fileList.indexOf(file)
   }
 
-  get droparea() {
+  get droparea () {
     return this.closest('.ark-droparea')
   }
 
-  get mediaList() {
+  get mediaList () {
     const mediaList = []
     this.droparea.fileList.map((file) => {
       mediaList.push({
         name: file.name,
         type: file.type,
         size: file.size,
-        url: URL.createObjectURL(file),
+        url: URL.createObjectURL(file)
       })
     })
     return mediaList
   }
 
-  get files() {
+  get files () {
     return this.droparea.fileList
   }
 }

package/lib/components/droparea/components/droparea-preview.test.js

@@ -4,7 +4,7 @@ import './droparea-preview.js'
 describe('Droparea', () => {
   const createBubbledEvent = (type, props = {}) => {
     const event = new Event(type, {
-      bubbles: true,
+      bubbles: true
     })
     Object.assign(event, props)
     return event
@@ -43,17 +43,17 @@ describe('Droparea', () => {
     const preview = droparea.querySelector('[data-preview-list]')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['image'], 'Doggy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const dropEvent = createBubbledEvent('drop', {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     dropZone.dispatchEvent(dropEvent)
@@ -70,17 +70,17 @@ describe('Droparea', () => {
     const preview = droparea.querySelector('[data-preview-list]')
     const dropZone = droparea.querySelector('.ark-droparea__form')
     const myFile = new File(['image'], 'Doggy.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png',
+      type: 'image/png'
     })
     const dropEvent = createBubbledEvent('drop', {
       clientX: 0,
       clientY: 1,
       dataTransfer: {
-        files: [myFile, myFile2],
-      },
+        files: [myFile, myFile2]
+      }
     })
 
     dropZone.dispatchEvent(dropEvent)

package/lib/components/droparea/components/droparea.js

@@ -5,7 +5,7 @@ import styles from '../styles/index.js'
 const tag = 'ark-droparea'
 
 export class Droparea extends Component {
-  init(context = {}) {
+  init (context = {}) {
     this.fileList = []
     this.contextFiles = context.contextFiles || this.contextFiles || []
     this.accept = context.accept || this.accept
@@ -14,7 +14,7 @@ export class Droparea extends Component {
     return super.init()
   }
 
-  render() {
+  render () {
     this.content = /* html */ `
     <form class="${tag}__form">
       <div class="${tag}__header">
@@ -34,11 +34,11 @@ export class Droparea extends Component {
     return super.render()
   }
 
-  reflectedProperties() {
+  reflectedProperties () {
     return ['size', 'accept', 'maxSize', 'title']
   }
 
-  async load() {
+  async load () {
     this.dragDropEvents.forEach((eventName) => {
       this.addEventListener(eventName, this.preventDefaults, false)
     })
@@ -61,40 +61,40 @@ export class Droparea extends Component {
     }
   }
 
-  openInput(event) {
+  openInput (event) {
     event.stopPropagation()
     const input = this.select('[data-input]')
     input.click()
   }
 
-  preventDefaults(event) {
+  preventDefaults (event) {
     event.preventDefault()
     event.stopPropagation()
   }
 
-  highlight(event) {
+  highlight (event) {
     this.dropZone.classList.add('highlight')
   }
 
-  unhighlight(event) {
+  unhighlight (event) {
     this.dropZone.classList.remove('highlight')
   }
 
-  handleDrop(event) {
+  handleDrop (event) {
     event.stopPropagation()
-    let data = event.dataTransfer
-    let files = data.files
+    const data = event.dataTransfer
+    const files = data.files
     this.handleFiles(files)
   }
 
-  onChange(event) {
+  onChange (event) {
     event.stopPropagation()
     const input = event.target
     const files = input.files
     this.handleFiles(files)
   }
 
-  handleFiles(files) {
+  handleFiles (files) {
     if (this.single) {
       files = [files[0]]
       if (
@@ -111,7 +111,7 @@ export class Droparea extends Component {
       files = [...files]
       if (!files.includes(undefined) && this.validate(files)) {
         files.forEach((file) => {
-          /*istanbul ignore else*/
+          /* istanbul ignore else */
           if (!this.preview.fileExists(file) && this.maxSizeValidate(file)) {
             this.fileList.push(file)
             this.preview.previewFile(file)
@@ -122,7 +122,7 @@ export class Droparea extends Component {
     this.preview.dispatchAlterEvent()
   }
 
-  validate(fileList) {
+  validate (fileList) {
     if (!this.accept || this.accept.length === 0) return true
     const acceptList = this.accept.split(',').map(
       (s) => s.trim().toLowerCase())
@@ -132,7 +132,7 @@ export class Droparea extends Component {
     const hasText = acceptList.indexOf('text') >= 0
 
     for (let i = 0, len = fileList.length; i < len; ++i) {
-      let ext = '' + fileList[i].name.split('.').pop().toLowerCase()
+      const ext = '' + fileList[i].name.split('.').pop().toLowerCase()
       if (acceptList.indexOf(ext) >= 0) continue
       if (hasAudio && fileList[i].type.split('/')[0] === 'audio') continue
       if (hasVideo && fileList[i].type.split('/')[0] === 'video') continue
@@ -149,15 +149,15 @@ export class Droparea extends Component {
     return true
   }
 
-  get dropZone() {
+  get dropZone () {
     return this.select('.ark-droparea__form')
   }
 
-  get preview() {
+  get preview () {
     return this.select('ark-droparea-preview')
   }
 
-  get mediaList() {
+  get mediaList () {
     return this.preview.mediaList
   }
 }