Switch to handlebars for templating

This commit is contained in:
Alex Yatskov 2016-03-27 20:00:41 -07:00
parent 2bdb576378
commit a9fcc0cde6
9 changed files with 54 additions and 26 deletions

2
build_tmpl.sh Executable file
View File

@ -0,0 +1,2 @@
#!/bin/sh
handlebars -m util/tmpl/* -f ext/bg/templates.js

View File

@ -29,6 +29,10 @@ function findKanji(text, callback) {
sendMessage('findKanji', {text: text}, callback);
}
function renderTemplate(data, template, callback) {
sendMessage('renderTemplate', {data: data, template: template}, callback);
}
function getState(callback) {
sendMessage('getState', null, callback);
}

View File

@ -1,7 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<body>
<script src="lib/handlebars.min.js"></script>
<script src="lib/jquery-2.2.2.min.js"></script>
<script src="bg/templates.js"></script>
<script src="bg/dictionary.js"></script>
<script src="bg/deinflector.js"></script>
<script src="bg/translator.js"></script>

1
ext/bg/templates.js Normal file
View File

@ -0,0 +1 @@
!function(){var a=Handlebars.template,n=Handlebars.templates=Handlebars.templates||{};n["defs.html"]=a({1:function(a,n,s,e,l){var r,i=null!=n?n:{},o=s.helperMissing,p="function",t=a.escapeExpression;return'<div class="yomichan-def">\n <span class="yomichan-def-expression">'+t((r=null!=(r=s.expression||(null!=n?n.expression:n))?r:o,typeof r===p?r.call(i,{name:"expression",hash:{},data:l}):r))+'</span>\n <span class="yomichan-def-reading">'+t((r=null!=(r=s.reading||(null!=n?n.reading:n))?r:o,typeof r===p?r.call(i,{name:"reading",hash:{},data:l}):r))+'</span>\n <span class="yomichan-def-glossary">'+t((r=null!=(r=s.glossary||(null!=n?n.glossary:n))?r:o,typeof r===p?r.call(i,{name:"glossary",hash:{},data:l}):r))+"</span>\n</div>\n"},compiler:[7,">= 4.0.0"],main:function(a,n,s,e,l){var r;return null!=(r=s.each.call(null!=n?n:{},null!=n?n.defs:n,{name:"each",hash:{},fn:a.program(1,l,0),inverse:a.noop,data:l}))?r:""},useData:!0})}();

View File

@ -19,7 +19,6 @@
class Yomichan {
constructor() {
this.translator = new Translator();
this.res = {
rules: 'bg/data/rules.json',
edict: 'bg/data/edict.json',
@ -27,6 +26,7 @@ class Yomichan {
kanjidic: 'bg/data/kanjidic.json'
};
this.translator = new Translator();
this.updateState('disabled');
chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
@ -36,9 +36,10 @@ class Yomichan {
onMessage(request, sender, callback) {
const {action, data} = request;
const handler = {
findKanji: ({text}) => this.translator.onFindKanji(text),
findTerm: ({text}) => this.translator.findTerm(text),
getState: () => this.state
findKanji: ({text}) => this.translator.onFindKanji(text),
findTerm: ({text}) => this.translator.findTerm(text),
getState: () => this.state,
renderTemplate: ({data, template}) => Handlebars.templates[template](data)
}[action];
if (handler !== null) {

View File

@ -53,8 +53,10 @@ class Client {
this.hidePopup();
} else {
range.setEnd(range.endContainer, range.startOffset + length);
this.popup.html(renderDefs(results.slice(0, 5)));
this.showPopup(range);
renderTemplate({defs: results.slice(0, 5)}, 'defs.html', (html) => {
this.popup.html(html);
this.showPopup(range);
});
}
});
}

29
ext/lib/handlebars.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -68,23 +68,3 @@ function getPopupPositionForRange(popup, range, offset) {
return {x: posX, y: posY};
}
function renderDefs(terms) {
const outputs = [];
for (let term of terms) {
outputs.push(renderDef(term));
}
return outputs.join('');
}
function renderDef(term) {
return `
<div class="yomichan-def">
<span class="yomichan-def-expression">${term.expression}</span>
<span class="yomichan-def-rules">${term.rules.join('&nbsp;&lt;&nbsp;')}</span>
<span class="yomichan-def-reading">${term.reading}</span>
<span class="yomichan-def-glossary">${term.glossary}</span>
</div>
`;
}

7
util/tmpl/defs.html Normal file
View File

@ -0,0 +1,7 @@
{{#each defs}}
<div class="yomichan-def">
<span class="yomichan-def-expression">{{expression}}</span>
<span class="yomichan-def-reading">{{reading}}</span>
<span class="yomichan-def-glossary">{{glossary}}</span>
</div>
{{/each}}