Switch to iframe

This commit is contained in:
Alex Yatskov 2016-04-14 20:36:00 -07:00
parent ba3e0c6532
commit 5f74c473ce
7 changed files with 88 additions and 50 deletions

View File

@ -3,7 +3,7 @@
templates['defs.html'] = template({"1":function(container,depth0,helpers,partials,data) { templates['defs.html'] = template({"1":function(container,depth0,helpers,partials,data) {
var stack1; var stack1;
return "<div class=\"yomichan-def\">\n" return " <div class=\"definition\">\n"
+ ((stack1 = container.invokePartial(partials["term.html"],depth0,{"name":"term.html","data":data,"indent":" ","helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "") + ((stack1 = container.invokePartial(partials["term.html"],depth0,{"name":"term.html","data":data,"indent":" ","helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
+ " " + " "
+ ((stack1 = helpers.unless.call(depth0 != null ? depth0 : {},(data && data.last),{"name":"unless","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + ((stack1 = helpers.unless.call(depth0 != null ? depth0 : {},(data && data.last),{"name":"unless","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
@ -11,14 +11,18 @@ templates['defs.html'] = template({"1":function(container,depth0,helpers,partial
},"2":function(container,depth0,helpers,partials,data) { },"2":function(container,depth0,helpers,partials,data) {
return "<br>"; return "<br>";
},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var stack1; var stack1, helper, alias1=depth0 != null ? depth0 : {};
return ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.defs : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : ""); return "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n <title></title>\n <link rel=\"stylesheet\" href=\""
+ container.escapeExpression(((helper = (helper = helpers.root || (depth0 != null ? depth0.root : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"root","hash":{},"data":data}) : helper)))
+ "/css/popup.css\">\n </head>\n <body>\n"
+ ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.defs : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ " </body>\n</html>\n";
},"usePartial":true,"useData":true}); },"usePartial":true,"useData":true});
templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data) { templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data) {
var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression; var helper, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
return "<div class=\"yomichan-def-expression\"><ruby>" return "<div class=\"expression\"><ruby>"
+ alias4(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"expression","hash":{},"data":data}) : helper))) + alias4(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"expression","hash":{},"data":data}) : helper)))
+ "<rt>" + "<rt>"
+ alias4(((helper = (helper = helpers.reading || (depth0 != null ? depth0.reading : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"reading","hash":{},"data":data}) : helper))) + alias4(((helper = (helper = helpers.reading || (depth0 != null ? depth0.reading : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"reading","hash":{},"data":data}) : helper)))
@ -26,10 +30,15 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
},"3":function(container,depth0,helpers,partials,data) { },"3":function(container,depth0,helpers,partials,data) {
var helper; var helper;
return "<div class=\"yomichan-def-expression\">" return "<div class=\"expression\">"
+ container.escapeExpression(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"expression","hash":{},"data":data}) : helper))) + container.escapeExpression(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"expression","hash":{},"data":data}) : helper)))
+ "</div>\n"; + "</div>\n";
},"5":function(container,depth0,helpers,partials,data) { },"5":function(container,depth0,helpers,partials,data) {
var helper;
return container.escapeExpression(((helper = (helper = helpers.rules || (depth0 != null ? depth0.rules : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"rules","hash":{},"data":data}) : helper)))
+ "\n";
},"7":function(container,depth0,helpers,partials,data) {
return " <li>" return " <li>"
+ container.escapeExpression(container.lambda(depth0, depth0)) + container.escapeExpression(container.lambda(depth0, depth0))
+ "</li>\n"; + "</li>\n";
@ -37,8 +46,10 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
var stack1, alias1=depth0 != null ? depth0 : {}; var stack1, alias1=depth0 != null ? depth0 : {};
return ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reading : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data})) != null ? stack1 : "") return ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reading : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data})) != null ? stack1 : "")
+ "\n<div class=\"yomichan-def-glossary\">\n <ol>\n" + "\n"
+ ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.rules : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ "\n<div class=\"glossary\">\n <ol>\n"
+ ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ " </ol>\n</div>\n"; + " </ol>\n</div>\n";
},"useData":true}); },"useData":true});
})(); })();

View File

@ -16,35 +16,16 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.yomichan-popup { iframe.yomichan-popup {
all: initial; all: initial;
background-color: #fff; background-color: #fff;
border: 1px solid #999; border: 1px solid #999;
box-shadow: 0 0 10px rgba(0, 0, 0, .5); box-shadow: 0 0 10px rgba(0, 0, 0, .5);
color: #000; height: 300px;
font-family: sans-serif; width: 500px;
font-size: 12pt; resize: both;
max-height: 300px;
max-width: 500px;
min-width: 200px;
overflow-y: auto; overflow-y: auto;
padding: 14px;
position: fixed; position: fixed;
visibility: hidden; visibility: hidden;
z-index: 256; z-index: 256;
} }
.yomichan-popup ol {
padding-left: 1.2em;
}
.yomichan-def-expression {
font-family: serif;
font-size: 18pt;
}
.yomichan-def-glossary {
clear: both;
font-size: 12pt;
padding-top: 0.8em;
}

31
ext/fg/css/popup.css Normal file
View File

@ -0,0 +1,31 @@
/*
* Copyright (C) 2016 Alex Yatskov <alex@foosoft.net>
* Author: Alex Yatskov <alex@foosoft.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
body {
font-family: sans-serif;
font-size: 12pt;
}
.expression {
font-family: serif;
font-size: 18pt;
}
.glossary {
font-size: 12pt;
}

View File

@ -25,10 +25,8 @@ class Client {
this.enabled = false; this.enabled = false;
this.options = null; this.options = null;
this.popup = document.createElement('div'); this.popup = document.createElement('iframe');
this.popup.classList.add('yomichan-popup'); this.popup.classList.add('yomichan-popup');
this.popup.addEventListener('mousedown', (e) => e.stopPropagation());
this.popup.addEventListener('scroll', (e) => e.stopPropagation());
document.body.appendChild(this.popup); document.body.appendChild(this.popup);
chrome.runtime.onMessage.addListener(this.onMessage.bind(this)); chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
@ -109,8 +107,8 @@ class Client {
this.hidePopup(); this.hidePopup();
} else { } else {
range.setEnd(range.endContainer, range.startOffset + length); range.setEnd(range.endContainer, range.startOffset + length);
renderText({defs: results}, 'defs.html', (html) => { renderText({defs: results, root: chrome.extension.getURL('fg')}, 'defs.html', (html) => {
this.popup.innerHTML = html; this.popup.setAttribute('srcdoc', html);
this.showPopup(range); this.showPopup(range);
}); });
} }

View File

@ -20,6 +20,7 @@
"background": {"page": "bg/background.html"}, "background": {"page": "bg/background.html"},
"options_page": "bg/options.html", "options_page": "bg/options.html",
"permissions": ["storage"], "permissions": ["storage"],
"web_accessible_resources": ["fg/css/popup.css"],
"content_scripts": [{ "content_scripts": [{
"matches": ["*://*/*"], "matches": ["*://*/*"],

View File

@ -1,6 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="{{root}}/css/popup.css">
</head>
<body>
{{#each defs}} {{#each defs}}
<div class="yomichan-def"> <div class="definition">
{{> term.html}} {{> term.html}}
{{#unless @last}}<br>{{/unless}} {{#unless @last}}<br>{{/unless}}
</div> </div>
{{/each}} {{/each}}
</body>
</html>

View File

@ -1,10 +1,16 @@
{{#if reading}} {{#if reading}}
<div class="yomichan-def-expression"><ruby>{{expression}}<rt>{{reading}}</rt></ruby></div> <div class="expression"><ruby>{{expression}}<rt>{{reading}}</rt></ruby></div>
{{else}} {{else}}
<div class="yomichan-def-expression">{{expression}}</div> <div class="expression">{{expression}}</div>
{{/if}} {{/if}}
<div class="yomichan-def-glossary"> <div class="rules">
{{#if rules}}
{{rules}}
{{/if}}
</div>
<div class="glossary">
<ol> <ol>
{{#each glossary}} {{#each glossary}}
<li>{{.}}</li> <li>{{.}}</li>