indexDB.js

// @flow
/* eslint array-callback-return: "error" */
/* eslint block-scoped-var: "error" */
/* eslint no-implied-eval: "error" */
/* eslint comma-style: ["error", "first"] */
/* eslint max-len: ["error", 80] */
/* eslint max-params: ["error", 3] */
/* eslint-env es6 */
/* eslint newline-per-chained-call: ["error", { "ignoreChainWithDepth": 1 }] */
/* eslint operator-linebreak: [2, "before"] */
// developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

window.document.querySelectorAll('div#productlistcontainer ul li')
  .forEach((elt, index) => {
   const nE = elt
      .getClientRects()
      .map(({bottom, top, y}) => ({bottom, top, y}))
    console.log(elt, index, nE)
  })

window.document.querySelector('#activecolumns').value
window.document.querySelectorAll('div#productlistcontainer ul li')
  .forEach((elt, index) => {
    console.log(
      elt
        .getClientRects()
        .map(({bottom, top, y}) => console.log(bottom, top, y, top - bottom))
    )
    console.log(elt, index)
  })
// https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
// https://pub.scotch.io/@VasilyStrelyaev/how-to-use-page-model-pattern-in-end-to-end-web-testing
// https://github.com/Reactive-Extensions/RxJS
// You should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB
  || window.mozIndexedDB
  || window.webkitIndexedDB
  || window.msIndexedDB

// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction
  || window.webkitIDBTransaction
  || window.msIDBTransaction

window.IDBKeyRange = window.IDBKeyRange
  || window.webkitIDBKeyRange
  || window.msIDBKeyRange
// Mozilla has never prefixed these objects, so we don't need window.mozIDB*.

if (window.indexedDB) {
  // This is what our customer data looks like.
  const customerData = [
    { 'ssn': '444-44-4444'
      , 'name': 'Bill'
      , 'age': 35
      , 'email': '[email protected]'
    }
    , { 'ssn': '555-55-5555'
      , 'name': 'Donna'
      , 'age': 32
      , 'email': '[email protected]'
    }
  ]

  const dbName = 'dbName'
  const dbReq = window.indexedDB.open(dbName)

  dbReq.onerror = event => {
    window.console.error(`${dbName} onerror`, event)
  } // Do something with request.errorCode.

  dbReq.onupgradeneeded = ({target}) => {
    const db = target.result

    // Autoincrement.
    const objStore = db.createObjectStore(
      'objStore'
      , {'autoIncrement': true}
    )

    objStore.transaction.oncomplete = ({target}) => {
      window.console.log(`${dbName} objStore oncomplete`, target)
      const customerobjStore = db
         .transaction(['objStore'], 'readwrite')
         .objectStore('objStore')

      // The added records will be:
      // key: 1 => value 'Bill'
      // key: 2 => value 'Donna'
      customerData.map(({name}) => customerobjStore.add(name))
    }
  }
}