history API polyfill (draft)

Author: Octane

README.md

@@ -87,6 +87,7 @@ global | `FormData()`<sup>[12](#FormData)</sup>, `Set()`, `Map()`, `WeakSet()`,
 `HTMLScriptElement.prototype` | `.onload()`<sup>[10](#HTMLScriptElement.prototype.onload)</sup>, `.onerror()`<sup>[10](#HTMLScriptElement.prototype.onload)</sup>
 `CSSStyleDeclaration.prototype` | `.getPropertyValue()`, `.removeProperty()`, `.setProperty()`, `.cssFloat`, `.opacity`
 `document` | `.head`, `.createEvent()`<sup>[11](#document.createEvent)</sup>
+`history` | `.pushState()`, `.replaceState()`, `.state`
 `FormData.prototype` | `.append()`
 `Event.prototype`<sup>[13](#Event.prototype)</sup> | `.initEvent()`<sup>[14](#Event.prototype.initEvent)</sup>, `.initUIEvent()`<sup>[14](#Event.prototype.initEvent)</sup>, `.initMouseEvent()`<sup>[14](#Event.prototype.initEvent)</sup>, `.initCustomEvent()`
 `XMLHttpRequest.prototype` | `.send()`<sup>[15](#XMLHttpRequest)</sup>, `.onload()`, `.onerror()`, `.onabort()`, `.addEventListener()`, `.removeEventListener()`, `.dispatchEvent()`

build/file-order.json

@@ -43,6 +43,9 @@
     "polyfill/ltie10/ie8/getcomputedstyle.js",
 
 
+    "polyfill/ltie10/history.js",
+
+
     "lib/namespace.js",
     "lib/is.js",
     "lib/class.js",

changelog.md

@@ -4,6 +4,7 @@
 
  - fix: the settled promise bug
  - fix: a bug with settled promise value changes
+ - new: history API polyfill
 
 ##v0.4.5
 

index.html

@@ -70,6 +70,9 @@ <h1>jsCore</h1>
     <script src="src/polyfill/ltie10/ie8/getcomputedstyle.js"></script>
 
 
+    <script src="src/polyfill/ltie10/history.js"></script>
+
+
     <script src="src/lib/namespace.js"></script>
     <script src="src/lib/is.js"></script>
     <script src="src/lib/class.js"></script>

src/polyfill/ltie10/history.js

@@ -0,0 +1,48 @@
+
+history.pushState || new function () {
+
+    console.log('history polyfill');
+
+    var proto = history.constructor.prototype,
+        loc = window.location,
+        states = {},
+        state = null,
+        skip = {};
+
+    function onPopState() {
+        var event = document.createEvent('CustomEvent');
+        event.initEvent('popstate', false, false);
+        event.state = state;
+        window.dispatchEvent(event);
+    }
+
+    proto.pushState = function (state, title, hash) {
+        if (!hash.startsWith('#')) {
+            hash = '#' + hash;
+        }
+        states[hash] = state;
+        skip[hash] = true;
+        loc.hash = hash;
+    };
+
+    proto.replaceState = function (state, title, hash) {
+        throw Error('history.replaceState not implemented');
+    };
+
+    Object.defineProperty(proto, 'state', {
+        get: function () {
+            return state;
+        }
+    });
+
+    window.addEventListener('hashchange', function (event) {
+        var hash = loc.hash;
+        if (skip[hash]) {
+            delete skip[hash];
+        } else {
+            state = states[hash] || null;
+            onPopState();
+        }
+    });
+
+};

test/test-polyfill.js

@@ -20,8 +20,11 @@ document.addEventListener('DOMContentLoaded', function () {
             });
 
             var event = document.createEvent('MouseEvent');
+            /*todo fix github.com/cubiq/iscroll/issues/501
             event.initMouseEvent('mousemove', true, true, window, 'test',
                                  t, t, t, t, false, false, false, false, 0, null);
+            */
+            event.initEvent('mousemove', true, true);
             document.dispatchEvent(event);
 
         });

test/test.js

@@ -123,9 +123,36 @@ lib.dom.ready().then(function () {
 
     window.requestAnimationFrame(function (t) {
         var event = document.createEvent('MouseEvent');
+        /*todo fix github.com/cubiq/iscroll/issues/501
         event.initMouseEvent('mousemove', true, true, window, 'test',
                              t, t, t, t, false, false, false, false, 0, null);
+        */
+        event.initEvent('mousemove', true, true);
         document.dispatchEvent(event);
     });
 
 });
+
+/*
+window.addEventListener('popstate', function (event) {
+    console.log(JSON.stringify(event.state));
+});
+setTimeout(function () {
+    history.pushState({test: 1}, '', '#test-1');
+    setTimeout(function () {
+        history.pushState({test: 2}, '', '#test-2');
+        setTimeout(function () {
+            history.pushState({test: 3}, '', '#test-2');
+            setTimeout(function () {
+                history.back();
+                setTimeout(function () {
+                    history.back();
+                    setTimeout(function () {
+                        history.back();
+                    }, 100);
+                }, 100);
+            }, 100);
+        }, 100);
+    }, 100);
+}, 100);
+*/