Add an indexedDB file storage example: image-reference-collector (#224)

* new example: image-reference-collector (indexedDB file storage demo)

* fix: added missing deps, updated all npm dependencies and webpack config to v.2

* chore: Renamed the example to store-collected-images

* chore: Removed from utils/image-store any direct call to the UI code

* move example built using webpack into its own subdir

* tweak browser action title

* added plain webextension example (without webpack build step)

* added README.md file to plain webextension example

* small changed based on the review comments

* fixed typo in store-collected-images example (webpack-based version)

* Remove React from the store-collected-images (plain webextension version)

* Fix eslint errors on store-collected-images example (both versions)

* Fix some typos in the README files

store-collected-images/webextension-plain/utils/handle-window-drag-and-drop.js

@@ -0,0 +1,14 @@
+/* exported preventWindowDragAndDrop */
+
+"use strict";
+
+function preventWindowDragAndDrop() {
+  function preventDefault(ev) {
+    ev.preventDefault();
+    return true;
+  }
+
+  window.ondragover = preventDefault;
+  window.ondragend = preventDefault;
+  window.ondrop = preventDefault;
+}

store-collected-images/webextension-plain/utils/image-store.js

@@ -0,0 +1,37 @@
+/* global IDBFiles */
+/* exported saveCollectedBlobs, loadStoredImages, removeStoredImages */
+
+"use strict";
+
+async function saveCollectedBlobs(collectionName, collectedBlobs) {
+  const storedImages = await IDBFiles.getFileStorage({name: "stored-images"});
+
+  for (const item of collectedBlobs) {
+    await storedImages.put(`${collectionName}/${item.uuid}`, item.blob);
+  }
+}
+
+async function loadStoredImages(filter) {
+  const imagesStore = await IDBFiles.getFileStorage({name: "stored-images"});
+
+  let listOptions = filter ? {includes: filter} : undefined;
+  const imagesList = await imagesStore.list(listOptions);
+
+  let storedImages = [];
+
+  for (const storedName of imagesList) {
+    const blob = await imagesStore.get(storedName);
+
+    storedImages.push({storedName, blobUrl: URL.createObjectURL(blob)});
+  }
+
+  return storedImages;
+}
+
+async function removeStoredImages(storedImages) {
+  const imagesStore = await IDBFiles.getFileStorage({name: "stored-images"});
+  for (const storedImage of storedImages) {
+    URL.revokeObjectURL(storedImage.blobUrl);
+    await imagesStore.remove(storedImage.storedName);
+  }
+}