@es-labs/jslib 0.0.1

package/web/util.js

@@ -0,0 +1,126 @@
+/**
+ * Downloads data as a file
+ * @param {*} content - file content to be downloaded
+ * @param {string} filename - name of file to be downloaded
+ * @param {string} type - MIME type, default is 'text/csv;charset=utf-8;' 
+ */
+// improved download function
+const downloadData = (content, filename, type = 'text/csv;charset=utf-8;') => {
+  const blob = new Blob([content], { type })
+  // IE11 & Edge
+  if (navigator.msSaveBlob) {
+    // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
+    navigator.msSaveBlob(blob, filename)
+  } else {
+    // In FF link must be added to DOM to be clicked
+    const link = document.createElement('a')
+    link.href = window.URL.createObjectURL(blob)
+    // link.setAttribute('href', 'data;text/csv;charset=utf-8,' + encodeURIComponent(SOME_CSV_DATA)) // previous way of doing
+    link.setAttribute('download', filename)
+    document.body.appendChild(link)
+    link.click() // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
+    document.body.removeChild(link)
+  }
+}
+
+/**
+ * call function only after a delay ms has passed
+ * @param {function} fn - function to debounce
+ * @param {Number} delay - milliseconds to delay
+ * @returns {function} -  return debounced function
+ *
+ * Sample Usage
+ * searchIdDom.addEventListener('input', debounce(makeApiFetch, 1000))
+ * Application - Debouncing an input type event handler. (like our search input example), a scroll event handler.
+*/
+const debounce = (fn, delay) => {
+  let timeoutTimerId = null // Declare a variable called 'timeoutTimerId' to store the timer ID
+  return (...args) => {  // Return an anonymous function that takes in any number of arguments
+    clearTimeout(timeoutTimerId) // Clear the previous timer to prevent the execution of 'fn'
+    timeoutTimerId = setTimeout(() => fn(...args), delay) // Set a new timer that will execute 'fn' after the specified delay
+  }
+}
+
+/**
+ * call function only X times in Y ms
+ * @param {function} fn - function to throttle
+ * @param {Number} wait - time to measure the number of calls
+ * @returns {function} -  return throttled function/s
+ *
+ * Sample Usage
+ * const myHandler = (event) => {...do some stuf...}
+ * myMouseDomElement.addEventListener("mousemove", throttle(myHandler, 1000));
+ * Application - Throttling an API call, button click so we can’t spam click, touch/move mouse event handler.
+*/
+const throttle = (fn, wait) => {
+  let time = Date.now()
+  return function () {
+    if (time + wait - Date.now() < 0) {
+      fn()
+      time = Date.now()
+    }
+  }
+}
+
+// https://www.samanthaming.com/tidbits/94-how-to-check-if-object-is-empty/
+/**
+ * check if object is empty, also false if not object
+ * @param {any} value - time to measure the number of calls
+ * @returns {boolean} -  true if empty object, false otherwise
+*/
+const emptyObject = (value) => value && Object.keys(value).length === 0 && value.constructor === Object 
+
+const isEmail = (email) => {
+  // return /[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/.test(email)
+  return /[\w\d-]+@[\w\d-]+\.[\w\d-]+/.test(email)
+}
+
+// universal end-of-line splitter
+// .split(/\r?\n/)
+
+// https://stackoverflow.com/questions/8847766/how-to-convert-json-to-csv-format-and-store-in-a-variable
+const jsonToCsv = (items) => {
+  const replacer = (key, value) => value === null ? '' : value // specify how you want to handle null values here
+  const header = Object.keys(items[0])
+  return [
+    header.join(','), // header row first
+    ...items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','))
+  ].join('\r\n')
+}
+
+/**
+ * convert object to query string
+ * @param {object} obj 
+ * @returns 
+ */
+const objectToQueryString = (obj) =>
+  Object.keys(obj)
+    .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
+    .join('&')
+
+const rebaseString = (str, from, to) => Buffer.from(str, from).toString(to) // base64, utf8
+
+// NOSONAR
+// Description: traverse a JSON object and transform the nodes. object will be mutated
+//
+// Usage:
+// let testObj = [
+//   1, 2, [3, { 'a': 5, 'b': [6, 7, { 'c': 8}] }], { 'd': 9}
+// ]
+// const testFn = (x) => typeof x === 'number' ? x * 2 : x
+// traverseJson(testObj, testFn)
+// console.log(testObj)
+//
+const traverseJson = (json, fn, parent = null, key = null) => {
+  if (typeof json === 'object') {
+    if (Array.isArray(json)) {
+      json.forEach((item, index) => traverseJson(item, fn, json, index))
+    } else if (json.constructor === Object) {
+      for (const k in json) traverseJson(json[k], fn, json, k)
+    }
+  } else {
+    if (typeof parent === 'object' && key !== null) parent[key] = fn(json)
+  }
+}
+
+export { debounce, downloadData, emptyObject, isEmail, jsonToCsv, objectToQueryString, rebaseString, throttle, traverseJson }

package/web/web-cam.js

@@ -0,0 +1,182 @@
+// FRONTEND ONLY
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+body {
+  background-color: #F0F0F0;
+}
+.container{
+  position: relative;
+  width: 320px;
+  height: 240px;
+}
+.container>.button2 {
+  background: url('http://cdn1.iconfinder.com/data/icons/iconslandplayer/PNG/64x64/CircleBlue/Play1Pressed.png') center center no-repeat;
+  height: 64px;
+  left: 50%;
+  margin: -32px 0 0 -32px;
+  position: absolute;
+  top: 50%;
+  width: 64px;
+  z-index: 1; 
+}
+
+.container>slot>.button {
+  top: 5%;
+  right: 5%;
+  position: absolute;
+  z-index: 1; 
+}
+
+::slotted(button) {
+  top: var(--vcxwc-web-cam-top, 25%);
+  right: var(--vcxwc-web-cam-top, 25%);
+  position: absolute;
+  z-index: 1; 
+}
+
+#video {
+  background-color: #000000;
+}
+#snap {
+  display: block;
+}
+#unsnap {
+  display: none;
+}
+
+</style>
+<div class="container">
+  <video id="video" width="320" height="240" autoplay></video>
+  <slot name="button-snap">
+    <button class="button" id="snap">Take Photo</button>
+  </slot>
+  <slot name="button-unsnap">
+    <button class="button" id="unsnap">Start Camera</button>
+  </slot>
+</div>
+`
+
+class WebCam extends HTMLElement {
+  constructor() {
+    super()
+    const shadowRoot = this.attachShadow({ mode: 'open' })
+    shadowRoot.appendChild(template.content.cloneNode(true))
+
+    this.capture = this.capture.bind(this) // bind callback function
+    // captures: []
+
+    this.slotNode = {
+      ['button-snap']: this.shadowRoot.querySelector('#snap'),
+      ['button-unsnap']: this.shadowRoot.querySelector('#unsnap')
+    }
+
+    const slots = this.shadowRoot.querySelectorAll('slot')
+    // console.log(slots)
+    const slotMap = {}
+    slots.forEach((slot) => {
+      slotMap[slot.name] = slot
+      slot.addEventListener('slotchange', (e) => {
+        if (this.slotNode[slot.name]) {
+          const nodes = slot.assignedNodes()
+          const btnNode = nodes[0]
+          this.slotNode[slot.name].removeEventListener('click', this.capture)
+          this.slotNode[slot.name] = btnNode
+          if (slot.name === 'button-snap') this.slotNode[slot.name].style.display = 'block'
+          if (slot.name === 'button-unsnap') this.slotNode[slot.name].style.display = 'none'
+          this.slotNode[slot.name].addEventListener('click', this.capture)
+        }
+      })
+    })
+    console.log(slotMap)
+  }
+
+  static get observedAttributes() {
+    return ['show']
+  }
+
+  // getter and setter for property - show
+  get show() {
+    return this.hasAttribute('show')
+  }
+
+  set show(value) {
+    value ? this.setAttribute('show', '') : this.removeAttribute('show')
+  }
+
+  // added to the DOM
+  connectedCallback() {
+    console.log('connected')
+
+    console.log('width', this.getAttribute('width'))
+    console.log('height', this.getAttribute('height'))
+    this.width = this.getAttribute('width') || 320
+    this.height = this.getAttribute('height') || 240
+
+    this.slotNode['button-snap'].addEventListener('click', this.capture)
+    this.slotNode['button-unsnap'].addEventListener('click', this.capture)
+
+    const containerEl = this.shadowRoot.querySelector('.container')
+    containerEl.style.width = this.width + 'px'
+    containerEl.style.height = this.height + 'px'
+    // console.log('containerEl', containerEl)
+
+    const videoEl = this.shadowRoot.querySelector('#video')
+    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+      // console.log('xxxx', window.URL.createObjectURL)
+      navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
+        try {
+          videoEl.srcObject = stream
+        } catch (e) {
+          videoEl.src = window.URL.createObjectURL(stream)
+        }
+        videoEl.play()
+      })
+    }
+    videoEl.setAttribute('width', this.width)
+    videoEl.setAttribute('height', this.height)
+
+    this.captureMode = true
+  }
+
+  // attributeChangedCallback(name, oldVal, newVal) {} // attribute changed
+  // adoptedCallback() {} // moved into a new document
+
+  // removed from the DOM
+  disconnectedCallback() {
+    this.slotNode['button-snap'].removeEventListener('click', this.capture)
+    this.slotNode['button-unsnap'].removeEventListener('click', this.capture)
+  }
+
+  capture() {
+    console.log('capture event')
+    const videoEl = this.shadowRoot.querySelector('#video')
+    if (this.captureMode) {
+      const scale = 1
+      const canvas = document.createElement('canvas')
+      canvas.width = videoEl.clientWidth * scale
+      canvas.height = videoEl.clientHeight * scale
+      canvas.getContext('2d').drawImage(videoEl, 0, 0, canvas.width, canvas.height)
+      videoEl.pause()
+
+      // console.log('videoEl', canvas.toDataURL('image/png'))
+      this.slotNode['button-snap'].style.display = 'none'
+      this.slotNode['button-unsnap'].style.display = 'block'
+
+      const event = new CustomEvent('snap', {
+        detail: canvas.toDataURL('image/png')
+      })
+      this.dispatchEvent(event)
+
+      this.captureMode = false
+    } else {
+      videoEl.play()
+      this.captureMode = true
+      this.slotNode['button-snap'].style.display = 'block'
+      this.slotNode['button-unsnap'].style.display = 'none'
+      // set image data back to empty
+    }
+  }
+}
+
+customElements.define('vcxwc-web-cam', WebCam)