Simplify pushstate usage for transitions

Author: pixelhandler

src/application/cache.ts

@@ -12,7 +12,6 @@ const cache: Cache = {
   archivesJson: null,
   detailJson: {},
   details: {},
-  currentState: null,
   cache: {},
 };
 

src/application/listeners.ts

@@ -10,15 +10,15 @@ export function setupColumnControlListener(): void {
 }
 
 export function teardownEventListeners(): void {
-  var anchors = document.querySelectorAll('a.js-nav');
-  for (var i = 0; i < anchors.length; i++) {
+  const anchors = document.querySelectorAll('a.js-nav');
+  for (let i = 0; i < anchors.length; i++) {
     anchors[i].removeEventListener('click', clickHandler);
   }
 }
 
 export function setupEventListeners(): void {
-  var anchors = document.querySelectorAll('a.js-nav');
-  for (var i = 0; i < anchors.length; i++) {
+  const anchors = document.querySelectorAll('a.js-nav');
+  for (let i = 0; i < anchors.length; i++) {
     anchors[i].addEventListener('click', clickHandler);
   }
 }
@@ -30,10 +30,9 @@ export function setupFormListeners(): void {
 export function setupHistoryListener(): void {
   window.onpopstate = function(evt) {
     const state: State = evt.state;
-    if (state && cache.currentState.url !== state.url) {
-      transitionTo(state, false, false);
-    } else if (state) {
-      window.history.go(-1);
+    if (!state) {
+      return;
     }
+    transitionTo(state, false);
   };
 }

src/application/render.ts

@@ -18,44 +18,46 @@ import TagsComponent from '../components/tags';
 
 import postsRepo from '../repositories/posts';
 import tagsRepo from '../repositories/tags';
+import Url from '../utils/url';
 
-declare var Promise: any;
+declare let Promise: any;
 
 export function render(state: State, title: string, url: string): Promise<any> {
   const promise: Promise<any> = new Promise(function(resolve: any) {
     teardownEventListeners();
+    const _url = Url(url);
     window.scroll(0, 0);
-    if (!location.search) {
+    if (!_url.search) {
       SearchComponent.resetForm();
     }
-    if (location.search && location.search.match(routes.search)) {
-      SearchComponent.render(location.search.slice(1).split('search=')[1])
+    if (_url.search && _url.search.match(routes.search)) {
+      SearchComponent.render(_url.search.slice(1).split('search=')[1])
       .then(resolve);
-    } else if (location.pathname === '/') {
+    } else if (_url.pathname === '/') {
       postsRepo.getPosts().then(function(posts: Array<Record>) {
         ExcerptsComponent.render(posts);
         resolve();
       });
-    } else if (location.pathname.match(routes.about)) {
+    } else if (_url.pathname.match(routes.about)) {
       AboutComponent.render();
       resolve();
-    } else if (location.pathname.match(routes.archive)) {
+    } else if (_url.pathname.match(routes.archive)) {
       postsRepo.getArchives().then(ArchivesComponent.render);
       resolve();
-    } else if (location.pathname.match(routes.tags)) {
+    } else if (_url.pathname.match(routes.tags)) {
       tagsRepo.getTags().then(function(tags: Array<Record>) {
         TagsComponent.render(tags);
         resolve();
       });
-    } else if (location.pathname.match(routes.tag)) {
-      tagsRepo.getTag(location.pathname.split('/')[2]).then(function (tag: Record) {
+    } else if (_url.pathname.match(routes.tag)) {
+      tagsRepo.getTag(_url.pathname.split('/')[2]).then(function (tag: Record) {
         postsRepo.getPostsByTag(tag).then(function(posts: Array<Record>) {
           TagComponent.render(tag, posts);
           resolve();
         });
       });
-    } else if (location.pathname.match(routes.post)) {
-      var slug = location.pathname.split('/')[2];
+    } else if (_url.pathname.match(routes.post)) {
+      const slug = _url.pathname.split('/')[2];
       postsRepo.getPostBySlug(slug).then(function() {
         postsRepo.loadPost(slug, function(post: Record) {
           PostComponent.render(post);

src/application/start.ts

@@ -20,7 +20,7 @@ export default function start(): Promise<any> {
       });
       const url = location.toString();
       const state: State = { page: url, title: url, url: url };
-      transitionTo(state, false, true);
+      transitionTo(state);
     });
   });
 }

src/application/transition.ts

@@ -22,22 +22,13 @@ const finishLoading: ()=>void =
     }, 100);
   };
 
-const transitionTo: (state: State, replace?: any, push?: any)=>Promise<any> =
-  function (state, replace?, push?) {
+const transitionTo: (state: State, push?: boolean)=>Promise<any> =
+  function (state: State, push?: boolean) {
     startLoading();
-    if (replace === null || replace === undefined || !!replace) {
-      history.replaceState(state, state.title, state.url);
-    }
     return render(state, state.title, state.url).then(function() {
       finishLoading();
-      if (push === null || push === undefined || !!push) {
-        const currentState: State = history.state;
-        if (currentState !== state) {
-          setTimeout(function(_state: State) {
-            history.pushState(_state, _state.title, _state.url);
-            cache.currentState = _state;
-          }, 250, state);
-        }
+      if (push === undefined || push === null || !!push) {
+        history.pushState(state, state.title, state.url);
       }
     });
   };

src/components/archives.ts

@@ -3,7 +3,7 @@ import Post from '../types/post';
 import constants from '../utils/constants';
 import cloneTemplate from '../utils/clone-template';
 // import * as moment from 'moment';
-declare var moment: any;
+declare let moment: any;
 
 const render: (p: Array<Record>)=>void =
   function (posts: Array<Record>): void {

src/components/post.ts

@@ -5,7 +5,7 @@ import constants from '../utils/constants';
 import cloneTemplate from '../utils/clone-template';
 import markdown from '../utils/markdown';
 // import * as moment from 'moment';
-declare var moment: any;
+declare let moment: any;
 
 const render: (p: Record)=>void =
   function (post: Record): void {

src/components/search.ts

@@ -10,7 +10,7 @@ const resetForm: ()=>void =
     input.value = '';
   };
 
-declare var Promise: any;
+declare let Promise: any;
 
 const render: (q: string)=>Promise<any> =
   function (query: string): Promise<any> {

src/interfaces/cache.ts

@@ -17,7 +17,6 @@ interface Cache {
   archivesJson: string | null,
   detailJson: cacheRecord,
   details: cacheRecord,
-  currentState: State,
   cache: cacheRecord,
 }
 

src/interfaces/url.ts

@@ -0,0 +1,7 @@
+interface Url {
+  search: string,
+  pathname: string,
+  [index:string]: any,
+}
+
+export default Url;