<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script type="text/javascript" src="promifill.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> -->
    <script type="text/javascript">
        //window.Promise = Promifill;
        function reqAsPromise(req) {
            return new Promise(function (resolve, reject) {
                req.onsuccess = function() {
                    resolve(req);
                    Promise.flushQueue && Promise.flushQueue();
                };
                req.onerror = function(e) {
                    reject(new Error("IDB request failed: " + e.target.error.message));
                    Promise.flushQueue && Promise.flushQueue();
                };
            });
        }

        function Storage(databaseName) {
            this._databaseName = databaseName;
            this._database = null;
        }

        Storage.prototype = {
            open: function() {
                const req = window.indexedDB.open(this._databaseName);
                const self = this;
                req.onupgradeneeded = function(ev) {
                    const db = ev.target.result;
                    const oldVersion = ev.oldVersion;
                    self._createStores(db, oldVersion);
                }; 
                return reqAsPromise(req).then(function() {
                    self._database = req.result;
                });
            },
            openTxn: function(mode, storeName) {
                const txn = this._database.transaction([storeName], mode);
                const store = txn.objectStore(storeName);
                return Promise.resolve(store);
            },
            _createStores: function(db) {
                db.createObjectStore("foos", {keyPath: ["id"]});
            }
        };

        function getAll(store) {
            const request = store.openCursor();
            const results = [];
            return new Promise(function(resolve, reject) {
                request.onsuccess = function(event) {
                    const cursor = event.target.result;
                    if(cursor) {
                        results.push(cursor.value);
                        cursor.continue();
                    } else {
                        resolve(results);
                        Promise.flushQueue && Promise.flushQueue();
                    }
                };
                request.onerror = function(e) {
                    reject(new Error("IDB request failed: " + e.target.error.message));
                    Promise.flushQueue && Promise.flushQueue();
                };
            });
        }

        function main() {
            let storage = new Storage("idb-promises");
            let store;
            storage.open().then(function() {
                return storage.openTxn("readwrite", "foos");
            }).then(function(s) {
                store = s;
                store.clear();
                store.add({id: 5, name: "foo"});
                store.add({id: 6, name: "bar"});
                return getAll(store);
            }).then(function(all) {
                console.log("all1", all);
                store.add({id: 7, name: "bazzz"});
                return getAll(store);
            }).then(function(all) {
                console.log("all2", all);
            }).catch(function(err) {
                console.error(err.message + ": " + err.stack);
            });
        }
        main();


        /*
        
        we basically want something like this for IE11/Win7:
            
            return new Promise(function (resolve, reject) {
                req.onsuccess = function() {
                    resolve(req);
                    Promise?.flushQueue();
                };
                req.onerror = function(e) {
                    reject(new Error("IDB request failed: " + e.target.error.message));
                    Promise?.flushQueue();
                };
            });

        we don't have this problem on platforms with a native promise implementation, so we can just have our own (forked) promise polyfill? 
         */
    </script>
</body>
</html>