rewrite history as a doubly linked list

ext/bg/js/templates.js

@@ -137,17 +137,17 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
   return "<div class=\"term-navigation\">\n    <a href=\"#\" "
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.source : depth0),{"name":"if","hash":{},"fn":container.program(33, data, 0, blockParams, depths),"inverse":container.program(35, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
     + "><img src=\"/mixed/img/source-term.svg\" title=\"Source term (Alt + B)\" alt></a>\n    <a href=\"#\" "
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.history : depth0),{"name":"if","hash":{},"fn":container.program(37, data, 0, blockParams, depths),"inverse":container.program(39, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.next : depth0),{"name":"if","hash":{},"fn":container.program(37, data, 0, blockParams, depths),"inverse":container.program(39, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
-    + "><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"History term (Alt + F)\" alt></a>\n</div>\n"
+    + "><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"Next term (Alt + F)\" alt></a>\n</div>\n"
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(41, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
 },"33":function(container,depth0,helpers,partials,data) {
     return "class=\"source-term\"";
 },"35":function(container,depth0,helpers,partials,data) {
     return "class=\"source-term term-button-fade\"";
 },"37":function(container,depth0,helpers,partials,data) {
-    return "class=\"history-term\"";
+    return "class=\"next-term\"";
 },"39":function(container,depth0,helpers,partials,data) {
-    return "class=\"history-term term-button-fade\"";
+    return "class=\"next-term term-button-fade\"";
 },"41":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
@@ -485,17 +485,17 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
   return "<div class=\"term-navigation\">\n    <a href=\"#\" "
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.source : depth0),{"name":"if","hash":{},"fn":container.program(67, data, 0, blockParams, depths),"inverse":container.program(69, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
     + "><img src=\"/mixed/img/source-term.svg\" title=\"Source term (Alt + B)\" alt></a>\n    <a href=\"#\" "
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.history : depth0),{"name":"if","hash":{},"fn":container.program(71, data, 0, blockParams, depths),"inverse":container.program(73, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.next : depth0),{"name":"if","hash":{},"fn":container.program(71, data, 0, blockParams, depths),"inverse":container.program(73, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
-    + "><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"History term (Alt + F)\" alt></a>\n</div>\n"
+    + "><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"Next term (Alt + F)\" alt></a>\n</div>\n"
     + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(75, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
 },"67":function(container,depth0,helpers,partials,data) {
     return "class=\"source-term\"";
 },"69":function(container,depth0,helpers,partials,data) {
     return "class=\"source-term term-button-fade\"";
 },"71":function(container,depth0,helpers,partials,data) {
-    return "class=\"history-term\"";
+    return "class=\"next-term\"";
 },"73":function(container,depth0,helpers,partials,data) {
-    return "class=\"history-term term-button-fade\"";
+    return "class=\"next-term term-button-fade\"";
 },"75":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 

ext/mixed/js/display.js

@@ -37,8 +37,6 @@ class Display {
         this.eventListenersActive = false;
         this.clickScanPrevent = false;
 
-        this.poppedContextHistory = [];
-
         this.windowScroll = new WindowScroll();
 
         this.setInteractive(true);
@@ -57,31 +55,32 @@ class Display {
         this.sourceTermView();
     }
 
-    onHistoryTermView(e) {
+    onNextTermView(e) {
         e.preventDefault();
-        this.poppedTermView();
+        this.nextTermView();
     }
 
     async onKanjiLookup(e) {
         try {
             e.preventDefault();
             if (!this.context) { return; }
-            this.poppedContextHistory = [];
+            this.context.details.context.next = null;
 
             const link = e.target;
+            const {type, details} = this.context;
             const context = {
                 source: {
-                    type: 'terms',
+                    type,
                     details: {
                         definitions: this.definitions,
-                        context: Object.assign({}, this.context, {
+                        context: Object.assign({}, details.context, {
                             index: this.entryIndexFind(link),
                             scroll: this.windowScroll.y
                         })
                     }
                 },
-                sentence: this.context.sentence,
+                sentence: details.context.sentence,
-                url: this.context.url
+                url: details.context.url
             };
 
             this.windowScroll.toY(0);
@@ -112,7 +111,7 @@ class Display {
     async onTermLookup(e, {disableScroll, selectText, disableHistory}={}) {
         try {
             if (!this.context) { return; }
-            this.poppedContextHistory = [];
+            this.context.details.context.next = null;
             const termLookupResults = await this.termLookup(e);
             if (!termLookupResults) { return; }
             const {textSource, definitions} = termLookupResults;
@@ -120,12 +119,13 @@ class Display {
             const scannedElement = e.target;
             const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
 
+            const {type, details} = this.context;
             const context = {
-                source: disableHistory ? this.context.source : {
+                source: disableHistory ? details.context.source : {
-                    type: 'terms',
+                    type,
                     details: {
                         definitions: this.definitions,
-                        context: Object.assign({}, this.context, {
+                        context: Object.assign({}, details.context, {
                             index: this.entryIndexFind(scannedElement),
                             scroll: this.windowScroll.y
                         })
@@ -133,7 +133,7 @@ class Display {
                 },
                 disableScroll,
                 sentence,
-                url: this.context.url
+                url: details.context.url
             };
 
             this.setContentTerms(definitions, context);
@@ -226,7 +226,7 @@ class Display {
                 this.sourceTermView();
                 e.preventDefault();
             } else if (delta < 0) {
-                this.poppedTermView();
+                this.nextTermView();
                 e.preventDefault();
             }
         }
@@ -310,7 +310,7 @@ class Display {
             this.addEventListeners('.action-play-audio', 'click', this.onAudioPlay.bind(this));
             this.addEventListeners('.kanji-link', 'click', this.onKanjiLookup.bind(this));
             this.addEventListeners('.source-term', 'click', this.onSourceTermView.bind(this));
-            this.addEventListeners('.history-term', 'click', this.onHistoryTermView.bind(this));
+            this.addEventListeners('.next-term', 'click', this.onNextTermView.bind(this));
             if (this.options.scanning.enablePopupSearch) {
                 this.addEventListeners('.glossary-item', 'mouseup', this.onGlossaryMouseUp.bind(this));
                 this.addEventListeners('.glossary-item', 'mousedown', this.onGlossaryMouseDown.bind(this));
@@ -351,7 +351,9 @@ class Display {
 
             if (context.clearHistoryOnce) {
                 delete context.clearHistoryOnce;
-                this.poppedContextHistory = [];
+                if (this.context !== null) {
+                    this.context.details.context.next = null;
+                }
             }
 
             if (context.focus !== false) {
@@ -359,14 +361,16 @@ class Display {
             }
 
             this.definitions = definitions;
-            context.type = 'terms';
+            this.context = {
-            this.context = context;
+                type: 'terms',
+                details: {definitions, context}
+            };
 
             const sequence = ++this.sequence;
             const params = {
                 definitions,
                 source: context.source,
-                history: this.poppedContextHistory.length > 0,
+                next: context.next,
                 addable: options.anki.enable,
                 grouped: options.general.resultOutputMode === 'group',
                 merged: options.general.resultOutputMode === 'merge',
@@ -412,7 +416,9 @@ class Display {
 
             if (context.clearHistoryOnce) {
                 delete context.clearHistoryOnce;
-                this.poppedContextHistory = [];
+                if (this.context !== null) {
+                    this.context.details.context.next = null;
+                }
             }
 
             if (context.focus !== false) {
@@ -420,14 +426,16 @@ class Display {
             }
 
             this.definitions = definitions;
-            context.type = 'kanji';
+            this.context = {
-            this.context = context;
+                type: 'kanji',
+                details: {definitions, context}
+            };
 
             const sequence = ++this.sequence;
             const params = {
                 definitions,
                 source: context.source,
-                history: this.poppedContextHistory.length > 0,
+                next: context.next,
                 addable: options.anki.enable,
                 debug: options.general.debugInfo
             };
@@ -537,27 +545,28 @@ class Display {
     }
 
     sourceTermView() {
-        if (!this.context || !this.context.source) { return; }
+        if (!this.context || !this.context.details.context.source) { return; }
-        this.poppedContextHistory.push({
+        const {type, details} = this.context;
-            type: this.context.type,
+        const sourceContext = details.context.source;
+        sourceContext.details.context.next = {
+            type,
             details: {
                 definitions: this.definitions,
-                context: Object.assign({}, this.context, {
+                context: Object.assign({}, details.context, {
                     index: this.index,
                     scroll: this.windowScroll.y
                 })
             }
-        });
+        };
-        const {details} = this.context.source;
+        this.setContent(sourceContext.type, sourceContext.details);
-        this.setContent(details.context.type, details);
     }
 
-    poppedTermView() {
+    nextTermView() {
-        if (this.poppedContextHistory.length === 0) { return; }
+        if (!this.context.details.context.next) { return; }
-        this.context.index = this.index;
+        this.context.details.context.index = this.index;
-        this.context.scroll = this.windowScroll.y;
+        this.context.details.context.scroll = this.windowScroll.y;
-        const {details} = this.poppedContextHistory.pop();
+        const {type, details} = this.context.details.context.next;
-        this.setContent(details.context.type, details);
+        this.setContent(type, details);
     }
 
     noteTryAdd(mode) {
@@ -835,7 +844,7 @@ Display.onKeyDownHandlers = {
 
     'F': (self, e) => {
         if (e.altKey) {
-            self.poppedTermView();
+            self.nextTermView();
             return true;
         }
         return false;

tmpl/kanji.html

@@ -90,7 +90,7 @@ No data found
 {{#if definitions}}
 <div class="term-navigation">
     <a href="#" {{#if source}}class="source-term"{{else}}class="source-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" title="Source term (Alt + B)" alt></a>
-    <a href="#" {{#if history}}class="history-term"{{else}}class="history-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="History term (Alt + F)" alt></a>
+    <a href="#" {{#if next}}class="next-term"{{else}}class="next-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="Next term (Alt + F)" alt></a>
 </div>
 {{#each definitions}}
 {{#unless @first}}<hr>{{/unless}}

tmpl/terms.html

@@ -128,7 +128,7 @@
 {{#if definitions}}
 <div class="term-navigation">
     <a href="#" {{#if source}}class="source-term"{{else}}class="source-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" title="Source term (Alt + B)" alt></a>
-    <a href="#" {{#if history}}class="history-term"{{else}}class="history-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="History term (Alt + F)" alt></a>
+    <a href="#" {{#if next}}class="next-term"{{else}}class="next-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="Next term (Alt + F)" alt></a>
 </div>
 {{#each definitions}}
 {{#unless @first}}<hr>{{/unless}}