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,22 +3,26 @@
templates['defs.html'] = template({"1":function(container,depth0,helpers,partials,data) {
var stack1;
return "<div class=\"yomichan-def\">\n"
+ ((stack1 = container.invokePartial(partials["term.html"],depth0,{"name":"term.html","data":data,"indent":" ","helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
+ " "
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 = 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 : "")
+ "\n</div>\n";
+ "\n </div>\n";
},"2":function(container,depth0,helpers,partials,data) {
return "<br>";
},"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});
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;
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)))
+ "<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)))
@ -26,10 +30,15 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
},"3":function(container,depth0,helpers,partials,data) {
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)))
+ "</div>\n";
},"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>"
+ container.escapeExpression(container.lambda(depth0, depth0))
+ "</li>\n";
@ -37,8 +46,10 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
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 : "")
+ "\n<div class=\"yomichan-def-glossary\">\n <ol>\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 : "")
+ "\n"
+ ((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";
},"useData":true});
})();

View File

@ -16,35 +16,16 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
.yomichan-popup {
iframe.yomichan-popup {
all: initial;
background-color: #fff;
border: 1px solid #999;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
color: #000;
font-family: sans-serif;
font-size: 12pt;
max-height: 300px;
max-width: 500px;
min-width: 200px;
height: 300px;
width: 500px;
resize: both;
overflow-y: auto;
padding: 14px;
position: fixed;
visibility: hidden;
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.options = null;
this.popup = document.createElement('div');
this.popup = document.createElement('iframe');
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);
chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
@ -109,8 +107,8 @@ class Client {
this.hidePopup();
} else {
range.setEnd(range.endContainer, range.startOffset + length);
renderText({defs: results}, 'defs.html', (html) => {
this.popup.innerHTML = html;
renderText({defs: results, root: chrome.extension.getURL('fg')}, 'defs.html', (html) => {
this.popup.setAttribute('srcdoc', html);
this.showPopup(range);
});
}

View File

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

View File

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

View File

@ -1,10 +1,16 @@
{{#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}}
<div class="yomichan-def-expression">{{expression}}</div>
<div class="expression">{{expression}}</div>
{{/if}}
<div class="yomichan-def-glossary">
<div class="rules">
{{#if rules}}
{{rules}}
{{/if}}
</div>
<div class="glossary">
<ol>
{{#each glossary}}
<li>{{.}}</li>