Switch to iframe
This commit is contained in:
parent
ba3e0c6532
commit
5f74c473ce
@ -3,22 +3,26 @@
|
||||
templates['defs.html'] = template({"1":function(container,depth0,helpers,partials,data) {
|
||||
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 = 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});
|
||||
})();
|
||||
@ -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
31
ext/fg/css/popup.css
Normal 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;
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"background": {"page": "bg/background.html"},
|
||||
"options_page": "bg/options.html",
|
||||
"permissions": ["storage"],
|
||||
"web_accessible_resources": ["fg/css/popup.css"],
|
||||
|
||||
"content_scripts": [{
|
||||
"matches": ["*://*/*"],
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
{{#each defs}}
|
||||
<div class="yomichan-def">
|
||||
<!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}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user