Switch to handlebars for templating
This commit is contained in:
parent
2bdb576378
commit
a9fcc0cde6
2
build_tmpl.sh
Executable file
2
build_tmpl.sh
Executable file
@ -0,0 +1,2 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
handlebars -m util/tmpl/* -f ext/bg/templates.js
|
@ -29,6 +29,10 @@ function findKanji(text, callback) {
|
|||||||
sendMessage('findKanji', {text: text}, callback);
|
sendMessage('findKanji', {text: text}, callback);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderTemplate(data, template, callback) {
|
||||||
|
sendMessage('renderTemplate', {data: data, template: template}, callback);
|
||||||
|
}
|
||||||
|
|
||||||
function getState(callback) {
|
function getState(callback) {
|
||||||
sendMessage('getState', null, callback);
|
sendMessage('getState', null, callback);
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>
|
<body>
|
||||||
|
<script src="lib/handlebars.min.js"></script>
|
||||||
<script src="lib/jquery-2.2.2.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/dictionary.js"></script>
|
||||||
<script src="bg/deinflector.js"></script>
|
<script src="bg/deinflector.js"></script>
|
||||||
<script src="bg/translator.js"></script>
|
<script src="bg/translator.js"></script>
|
||||||
|
1
ext/bg/templates.js
Normal file
1
ext/bg/templates.js
Normal 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})}();
|
@ -19,7 +19,6 @@
|
|||||||
|
|
||||||
class Yomichan {
|
class Yomichan {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.translator = new Translator();
|
|
||||||
this.res = {
|
this.res = {
|
||||||
rules: 'bg/data/rules.json',
|
rules: 'bg/data/rules.json',
|
||||||
edict: 'bg/data/edict.json',
|
edict: 'bg/data/edict.json',
|
||||||
@ -27,6 +26,7 @@ class Yomichan {
|
|||||||
kanjidic: 'bg/data/kanjidic.json'
|
kanjidic: 'bg/data/kanjidic.json'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.translator = new Translator();
|
||||||
this.updateState('disabled');
|
this.updateState('disabled');
|
||||||
|
|
||||||
chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
|
chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
|
||||||
@ -36,9 +36,10 @@ class Yomichan {
|
|||||||
onMessage(request, sender, callback) {
|
onMessage(request, sender, callback) {
|
||||||
const {action, data} = request;
|
const {action, data} = request;
|
||||||
const handler = {
|
const handler = {
|
||||||
findKanji: ({text}) => this.translator.onFindKanji(text),
|
findKanji: ({text}) => this.translator.onFindKanji(text),
|
||||||
findTerm: ({text}) => this.translator.findTerm(text),
|
findTerm: ({text}) => this.translator.findTerm(text),
|
||||||
getState: () => this.state
|
getState: () => this.state,
|
||||||
|
renderTemplate: ({data, template}) => Handlebars.templates[template](data)
|
||||||
}[action];
|
}[action];
|
||||||
|
|
||||||
if (handler !== null) {
|
if (handler !== null) {
|
||||||
|
@ -53,8 +53,10 @@ class Client {
|
|||||||
this.hidePopup();
|
this.hidePopup();
|
||||||
} else {
|
} else {
|
||||||
range.setEnd(range.endContainer, range.startOffset + length);
|
range.setEnd(range.endContainer, range.startOffset + length);
|
||||||
this.popup.html(renderDefs(results.slice(0, 5)));
|
renderTemplate({defs: results.slice(0, 5)}, 'defs.html', (html) => {
|
||||||
this.showPopup(range);
|
this.popup.html(html);
|
||||||
|
this.showPopup(range);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
29
ext/lib/handlebars.min.js
vendored
Normal file
29
ext/lib/handlebars.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
20
ext/util.js
20
ext/util.js
@ -68,23 +68,3 @@ function getPopupPositionForRange(popup, range, offset) {
|
|||||||
|
|
||||||
return {x: posX, y: posY};
|
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(' < ')}</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
7
util/tmpl/defs.html
Normal 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}}
|
Loading…
Reference in New Issue
Block a user