@knowark/componarkjs 1.7.3

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

@@ -0,0 +1,17 @@
+const css = String.raw; export default css`
+.ark-camera {
+  display: grid;
+  width: fit-content;
+  height: fit-content;
+  overflow: hidden;
+  user-select: none;
+}
+
+.ark-camera__canvas {
+  display: none;
+}
+
+.ark-camera__video {
+  transform: rotateY(180deg);
+}
+`

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

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

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

@@ -0,0 +1,54 @@
+import { Component } from '../../../base/component/index.js'
+
+const tag = 'ark-capture'
+export class Capture extends Component {
+  constructor () {
+    super()
+    const type = this['receive'] || 'emit'
+    this.addEventListener(type, this.handle.bind(this))
+  }
+
+  reflectedProperties () {
+    return ['receive']
+  }
+
+  /** @param {Object} context */
+  init (context = {}) {
+    const data = JSON.parse(this._pop(':scope > data')?.textContent || null)
+    this.source = /** @type {object} */ (
+      context.source) || data || this.source || {}
+    this.template = context.template || this.template || (
+      (data) => `${JSON.stringify(data)}`)
+
+    return super.init()
+  }
+
+  render () {
+    const outputTemplate  = this._pop(':scope > template')?.innerHTML
+    this.template = (
+      outputTemplate ? this._format(outputTemplate) : this.template)
+
+    const output = this.querySelector(':scope > output')
+    if (this.template && output) {
+      output.innerHTML = this.template(this.source)
+    }
+
+    return super.render()
+  }
+
+  handle (event) {
+    const source = event.detail
+    this.init({ source }).render()
+  }
+
+  _format (template) {
+    return (data) => Function(`return \`${template}\``).call(data)
+  }
+
+  _pop (selector) {
+    const element = this.querySelector(selector)
+    element?.remove()
+    return element
+  }
+}
+Component.define(tag, Capture)

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

@@ -0,0 +1,112 @@
+import './capture.js'
+
+describe('Capture', () => {
+  let container = null
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+  
+  it('can be instantiated', () => {
+    container.innerHTML = `
+    <ark-capture></ark-capture>
+    `
+
+    const capture = container.querySelector('ark-capture')
+    expect(capture).toEqual(capture.init())
+  })
+
+  it('renders the given data detail', () => {
+    container.innerHTML = `
+    <ark-capture>
+      <data>
+        {
+          "name": "John Doe",
+          "job": "Programmer"
+        }
+      </data>
+      <output></output>
+    </ark-capture>
+    `
+
+    const capture = container.querySelector('ark-capture')
+    const output = capture.querySelector('output')
+
+    expect(capture.children.length).toEqual(1)
+    expect(output.innerHTML).toContain('John Doe')
+    expect(output.innerHTML).toContain('Programmer')
+  })
+
+  it('renders json data on the given template on the given output', () => {
+    container.innerHTML = `
+    <ark-capture>
+      <data>
+        {
+          "name": "John Doe",
+          "job": "Programmer"
+        }
+      </data>
+      <template>
+        <div id="output">
+          <strong>\${this.name}</strong>
+          <strong>\${this.job}</strong>
+        </div>
+      </template>
+      <output></output>
+    </ark-capture>
+    `
+
+    const capture = container.querySelector('ark-capture')
+    const output = capture.querySelector('output')
+
+    expect(capture.children.length).toEqual(1)
+    expect(output.children[0].innerHTML).toContain('John Doe')
+    expect(output.children[0].innerHTML).toContain('Programmer')
+  })
+
+  it('captures specific custom events and renders its details', () => {
+    container.innerHTML = `
+    <ark-capture receive="custom">
+      <template>
+        <div id="output">
+          <strong>\${this.name}</strong>
+          <strong>\${this.job}</strong>
+        </div>
+      </template>
+      <output></output>
+      <p>Adjoint Element</p>
+    </ark-capture>
+    `
+
+    const capture = container.querySelector('ark-capture')
+    const output = capture.querySelector('output')
+
+    capture.dispatchEvent(new CustomEvent('custom', {
+      bubbles: true,
+      detail: {
+        name: 'Richard Roe', job: 'Analyst'
+      }
+    }))
+
+    expect(capture.children.length).toEqual(2)
+    expect(output.children[0].innerHTML).toContain('Richard Roe')
+    expect(output.children[0].innerHTML).toContain('Analyst')
+
+    capture.dispatchEvent(new CustomEvent('custom', {
+      bubbles: true,
+      detail: {
+        name: 'Megan More', job: 'Manager'
+      }
+    }))
+
+    expect(capture.children.length).toEqual(2)
+    expect(output.children[0].innerHTML).toContain('Megan More')
+    expect(output.children[0].innerHTML).toContain('Manager')
+  })
+})

package/lib/components/capture/index.js

@@ -0,0 +1 @@
+export { Capture } from './components/capture.js'

package/lib/components/droparea/README.md

@@ -0,0 +1,51 @@
+DROPAREA
+--------
+
+The ``ark-droparea`` is an easy to use drag & drop component, that allows the user to upload multiple or single files,
+defining the limit of size and the specific extension of the files.
+
+
+Examples
+========
+
+**Default droparea, multiple files**
+
+``` html
+
+    <ark-droparea></ark-droparea>
+```
+
+**Single file droparea, use the single atribute**
+
+``` html
+
+    <ark-droparea single></ark-droparea>
+```
+
+**With the attributes accept and max-size specified in megabytes**
+
+``` html
+    <ark-droparea accept="jpg, png, gif" max-size="10" ></ark-droparea>
+```
+
+
+
+Attributes
+----------
+
+|   Name   |  Type   |  Default   |                                                                             Description                                                                             |
+| :------: | :-----: | :--------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|  single  | boolean | (multiple) |                                     Limits the number of files to a single one, if not set, recieves multiple files by default                                      |
+| max-size | string  | (no limit) |                                                             Specifies the size of the file in megabytes                                                             |
+|  accept  | string  |   (any)    | Indicates the type of files, with values separated by commas: (png, jpeg, gif, etc.). It's also possible to specify general file types: (image, video, text, audio) |
+
+Properties
+----------
+
+|   Name    |  Type   |  Default   |                                                                             Description                                                                             |
+| :-------: | :-----: | :--------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|  single   | boolean | (multiple) |                                     Limits the number of files to a single one, if not set, recieves multiple files by default                                      |
+|  maxSize  | string  | (no limit) |                                                               Specifies the size of the file in bytes                                                               |
+|  accept   | string  |   (any)    | Indicates the type of files, with values separated by commas: (png, jpeg, gif, etc.), It's also possible to specify general file types: (image, video, text, audio) |
+| fileList  | string  |     -      |                                                                  Returns the list of files droped                                                                   |
+| mediaList | string  |     -      |                                                                   Returns a list of media objects                                                                   |

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

@@ -0,0 +1,159 @@
+import { Component } from '../../../base/component/index.js'
+import './droparea.js'
+// @ts-ignore
+const tag = 'ark-droparea-preview'
+
+export class DropareaPreview extends Component {
+  init(_context = {}) {
+    return super.init()
+  }
+
+  render() {
+    this.content = /* html */ `
+         <ul data-preview-list class="ark-droparea-preview__list drag-sort-enable"></ul>
+        `
+    return super.render()
+  }
+
+  previewFile(file) {
+    const blobUrl = URL.createObjectURL(file)
+    const fileType = file.type.split('/')[0]
+    const previewZone = this.select('[data-preview-list]')
+    const picture = document.createElement('li')
+    picture.className = 'ark-droparea-preview__frame'
+    const removeButton = document.createElement('button')
+    removeButton.innerText = '⨯'
+    removeButton.className = 'ark-droparea__remove'
+
+    if (fileType != 'image') {
+      picture.innerHTML = `<p>${file.name}</p>`
+      picture.setAttribute('data', `${blobUrl}`)
+    } else {
+      picture.style.backgroundImage = `url('${blobUrl}')`
+    }
+
+    removeButton.addEventListener('click', this.removeFile.bind(this, file))
+    picture.appendChild(removeButton)
+    previewZone.appendChild(picture)
+    this.toggleVisibility()
+
+    if (!this.droparea.hasAttribute('single')) {
+      picture.setAttribute('index', this.fileIndex(file))
+      this.enableDragSort('drag-sort-enable')
+    }
+  }
+
+  toggleVisibility() {
+    const previewZone = this.select('[data-preview-list]')
+    this.files.length !== 0
+      ? (previewZone.style.display = 'grid')
+      : (previewZone.style.display = 'none')
+  }
+
+  /* DragSort Functionality */
+
+  enableDragSort(listClass) {
+    const sortableLists = this.getElementsByClassName(listClass)
+    Array.prototype.map.call(sortableLists, (list) => {
+      this.enableDragList(list)
+    })
+  }
+
+  enableDragList(list) {
+    Array.prototype.map.call(list.children, (item) => {
+      this.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
+
+    selectedItem.classList.add('drag-sort-active')
+    let swapItem =
+      document.elementFromPoint(x, y) === null
+        ? selectedItem
+        : document.elementFromPoint(x, y)
+    if (list === swapItem.parentNode) {
+      swapItem = (
+        swapItem !== selectedItem.nextSibling ?
+        swapItem : swapItem.nextSibling)
+      list.insertBefore(selectedItem, swapItem)
+    }
+  }
+
+  handleDrop(item) {
+    const droparea = item.target.closest('ark-droparea')
+    droparea.preview.createNewFileList()
+    item.target.classList.remove('drag-sort-active')
+    droparea.preview.dispatchAlterEvent()
+  }
+  /*----------------------------------------------------*/
+
+  dispatchAlterEvent() {
+    this.emit('alter', this.mediaList)
+  }
+
+  createNewFileList() {
+    const nodeList = this.querySelectorAll('li')
+    const newList = []
+    nodeList.forEach((item, index) => {
+      newList.push(this.droparea.fileList[item.getAttribute('index')])
+      item.setAttribute('index', index)
+    })
+    this.droparea.fileList = newList
+  }
+
+  fileExists(file) {
+    const present = this.files.some((item) => item.name === file.name)
+    return present
+  }
+
+  removeFile(file, event) {
+    let element = event.target
+    const fileIndex = this.droparea.fileList.indexOf(file)
+    this.droparea.fileList.splice(fileIndex, 1)
+    element.parentNode.remove()
+    this.selectAll('li').forEach((item, index) =>
+      item.setAttribute('index', index)
+    )
+    this.toggleVisibility()
+    this.dispatchAlterEvent()
+  }
+
+  fileIndex(file) {
+    return this.droparea.fileList.indexOf(file)
+  }
+
+  get droparea() {
+    return this.closest('.ark-droparea')
+  }
+
+  get mediaList() {
+    const mediaList = []
+    this.droparea.fileList.map((file) => {
+      mediaList.push({
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        url: URL.createObjectURL(file),
+      })
+    })
+    return mediaList
+  }
+
+  get files() {
+    return this.droparea.fileList
+  }
+}
+
+Component.define(tag, DropareaPreview)

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

@@ -0,0 +1,105 @@
+import { jest } from '@jest/globals'
+import './droparea-preview.js'
+
+describe('Droparea', () => {
+  const createBubbledEvent = (type, props = {}) => {
+    const event = new Event(type, {
+      bubbles: true,
+    })
+    Object.assign(event, props)
+    return event
+  }
+
+  global.URL.createObjectURL = jest.fn()
+  global.document.elementFromPoint = jest.fn()
+
+  let container = null
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+    const droparea = container.querySelector('ark-droparea')
+    const preview = droparea.querySelector('ark-droparea-preview')
+    expect(preview).toBe(preview.init())
+  })
+
+  it('Item can be removed', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-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',
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png',
+    })
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    dropZone.dispatchEvent(dropEvent)
+    preview.querySelector('button').click()
+    preview.querySelector('button').click()
+  })
+
+  it('Can drag previews and sort a new list', () => {
+    container.innerHTML = /* html */ `
+            <ark-droparea></ark-droparea>
+        `
+
+    const droparea = container.querySelector('ark-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',
+    })
+    const myFile2 = new File(['image'], 'Scooby.png', {
+      type: 'image/png',
+    })
+    const dropEvent = createBubbledEvent('drop', {
+      clientX: 0,
+      clientY: 1,
+      dataTransfer: {
+        files: [myFile, myFile2],
+      },
+    })
+
+    dropZone.dispatchEvent(dropEvent)
+
+    preview.handleDrag = jest.fn()
+
+    const getThumbnails = () =>
+      Array.from(preview.querySelectorAll('.ark-droparea-preview__frame'))
+
+    const thumbnails = getThumbnails()
+
+    const startingNode = thumbnails[0]
+    const endingNode = thumbnails[1]
+
+    startingNode.dispatchEvent(
+      createBubbledEvent('dragstart', { clientX: 0, clientY: 0 })
+    )
+    endingNode.dispatchEvent(
+      createBubbledEvent('dragend', { clientX: 0, clientY: 1 })
+    )
+  })
+})

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

@@ -0,0 +1,165 @@
+import { Component } from '../../../base/component/index.js'
+import './droparea-preview.js'
+import styles from '../styles/index.js'
+// @ts-ignore
+const tag = 'ark-droparea'
+
+export class Droparea extends Component {
+  init(context = {}) {
+    this.fileList = []
+    this.contextFiles = context.contextFiles || this.contextFiles || []
+    this.accept = context.accept || this.accept
+    this.single = this.hasAttribute('single')
+    this.maxSize = context.maxSize || this.maxSize || ''
+    return super.init()
+  }
+
+  render() {
+    this.content = /* html */ `
+    <form class="${tag}__form">
+      <div class="${tag}__header">
+        <div class="${tag}__open">${this.title || 'Upload'}</div>
+        <input id="fileElement"class="${tag}__input" type="file" 
+          data-input multiple />
+      </div>
+      <ark-droparea-preview></ark-droparea-preview>
+    </form>
+    `
+    this.dragDropEvents = ['dragenter', 'dragover', 'dragleave', 'drop']
+    this.dragEvents = this.dragDropEvents.slice(0, 2)
+    this.dropEvents = this.dragDropEvents.slice(2)
+    this._input = this.select('.ark-droparea__input')
+    this.openButton = this.select('.ark-droparea__open')
+
+    return super.render()
+  }
+
+  reflectedProperties() {
+    return ['size', 'accept', 'maxSize', 'title']
+  }
+
+  async load() {
+    this.dragDropEvents.forEach((eventName) => {
+      this.addEventListener(eventName, this.preventDefaults, false)
+    })
+
+    this.dragEvents.forEach((eventName) => {
+      this.addEventListener(eventName, this.highlight, false)
+    })
+
+    this.dropEvents.forEach((eventName) => {
+      this.addEventListener(eventName, this.unhighlight, false)
+    })
+
+    this.addEventListener('drop', this.handleDrop, false)
+    this._input.addEventListener('change', this.onChange.bind(this))
+    this.openButton.addEventListener('click', this.openInput.bind(this))
+
+    /* istanbul ignore else */
+    if (this.contextFiles) {
+      await this.handleFiles(this.contextFiles)
+    }
+  }
+
+  openInput(event) {
+    event.stopPropagation()
+    const input = this.select('[data-input]')
+    input.click()
+  }
+
+  preventDefaults(event) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  highlight(event) {
+    this.dropZone.classList.add('highlight')
+  }
+
+  unhighlight(event) {
+    this.dropZone.classList.remove('highlight')
+  }
+
+  handleDrop(event) {
+    event.stopPropagation()
+    let data = event.dataTransfer
+    let files = data.files
+    this.handleFiles(files)
+  }
+
+  onChange(event) {
+    event.stopPropagation()
+    const input = event.target
+    const files = input.files
+    this.handleFiles(files)
+  }
+
+  handleFiles(files) {
+    if (this.single) {
+      files = [files[0]]
+      if (
+        files[0] != undefined &&
+        this.validate(files) &&
+        !this.preview.fileExists(files[0]) &&
+        this.maxSizeValidate(files[0])
+      ) {
+        this.fileList[0] = files[0]
+        this.preview.querySelector('[data-preview-list]').innerHTML = ''
+        this.preview.previewFile(files[0])
+      }
+    } else {
+      files = [...files]
+      if (!files.includes(undefined) && this.validate(files)) {
+        files.forEach((file) => {
+          /*istanbul ignore else*/
+          if (!this.preview.fileExists(file) && this.maxSizeValidate(file)) {
+            this.fileList.push(file)
+            this.preview.previewFile(file)
+          }
+        })
+      }
+    }
+    this.preview.dispatchAlterEvent()
+  }
+
+  validate(fileList) {
+    if (!this.accept || this.accept.length === 0) return true
+    const acceptList = this.accept.split(',').map(
+      (s) => s.trim().toLowerCase())
+    const hasAudio = acceptList.indexOf('audio') >= 0
+    const hasVideo = acceptList.indexOf('video') >= 0
+    const hasImage = acceptList.indexOf('image') >= 0
+    const hasText = acceptList.indexOf('text') >= 0
+
+    for (let i = 0, len = fileList.length; i < len; ++i) {
+      let 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
+      if (hasImage && fileList[i].type.split('/')[0] === 'image') continue
+      if (hasText && fileList[i].type.split('/')[0] === 'text') continue
+
+      return false
+    }
+
+    return true
+  }
+
+  maxSizeValidate (file) {
+    return true
+  }
+
+  get dropZone() {
+    return this.select('.ark-droparea__form')
+  }
+
+  get preview() {
+    return this.select('ark-droparea-preview')
+  }
+
+  get mediaList() {
+    return this.preview.mediaList
+  }
+}
+
+Component.define(tag, Droparea, styles)