diff --git a/indexeddb-api/index.html b/indexeddb-api/index.html index 87cb9388..ca86cb27 100644 --- a/indexeddb-api/index.html +++ b/indexeddb-api/index.html @@ -3,20 +3,11 @@ IndexedDB Example -

IndexedDB Demo: storing blobs, e-publication example

-
-

Works and tested with:

-
-
-
diff --git a/indexeddb-api/main.js b/indexeddb-api/main.js index 8f07dd29..976092bf 100644 --- a/indexeddb-api/main.js +++ b/indexeddb-api/main.js @@ -1,16 +1,4 @@ (function () { - var COMPAT_ENVS = [ - ['Firefox', ">= 16.0"], - ['Google Chrome', - ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"] - ]; - var compat = $('#compat'); - compat.empty(); - compat.append(''); - COMPAT_ENVS.forEach(function(val, idx, array) { - $('#compat-list').append('
  • ' + val[0] + ': ' + val[1] + '
  • '); - }); - const DB_NAME = 'mdn-demo-indexeddb-epublications'; const DB_VERSION = 1; // Use a long long for this value (don't use a float) const DB_STORE_NAME = 'publications'; @@ -83,10 +71,10 @@ if (typeof store == 'undefined') store = getObjectStore(DB_STORE_NAME, 'readonly'); - var pub_msg = $('#pub-msg'); - pub_msg.empty(); - var pub_list = $('#pub-list'); - pub_list.empty(); + var pub_msg = document.querySelector('#pub-msg'); + pub_msg.replaceChildren(); + var pub_list = document.querySelector('#pub-list'); + pub_list.replaceChildren(); // Resetting the iframe so that it doesn't display previous content newViewerFrame(); @@ -97,8 +85,12 @@ // Thus the count text below will be displayed before the actual pub list // (not that it is algorithmically important in this case). req.onsuccess = function(evt) { - pub_msg.append('

    There are ' + evt.target.result + - ' record(s) in the object store.

    '); + var countMessage = document.createElement('p'); + countMessage.append('There are '); + var count = document.createElement('strong'); + count.textContent = evt.target.result; + countMessage.append(count, ' record(s) in the object store.'); + pub_msg.append(countMessage); }; req.onerror = function(evt) { console.error("add error", this.error); @@ -113,23 +105,28 @@ // If the cursor is pointing at something, ask for the data if (cursor) { console.log("displayPubList cursor:", cursor); - req = store.get(cursor.key); + const key = cursor.key; + req = store.get(key); req.onsuccess = function (evt) { var value = evt.target.result; - var list_item = $('
  • ' + - '[' + cursor.key + '] ' + - '(biblioid: ' + value.biblioid + ') ' + - value.title + - '
  • '); + var list_item = document.createElement('li'); + list_item.textContent = '[' + key + '] ' + + '(biblioid: ' + value.biblioid + ') ' + + value.title; if (value.year != null) - list_item.append(' - ' + value.year); + list_item.append(' - ', value.year); if (value.hasOwnProperty('blob') && typeof value.blob != 'undefined') { - var link = $('File'); - link.on('click', function() { return false; }); - link.on('mouseenter', function(evt) { - setInViewer(evt.target.getAttribute('href')); }); + var link = document.createElement('a'); + link.setAttribute('href', key); + link.textContent = 'File'; + link.addEventListener('click', function(evt) { + evt.preventDefault(); + }); + link.addEventListener('mouseenter', function(evt) { + setInViewer(evt.currentTarget.getAttribute('href')); + }); list_item.append(' / '); list_item.append(link); } else { @@ -150,13 +147,19 @@ } function newViewerFrame() { - var viewer = $('#pub-viewer'); - viewer.empty(); - var iframe = $('