aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2016-04-14 20:36:00 -0700
committerAlex Yatskov <alex@foosoft.net>2016-04-14 20:36:00 -0700
commit5f74c473cef4564ad2040d9211f70b4f0ac048f1 (patch)
treefc1edf0dede7b783eb0de5b4eece24ba13e6ec43
parentba3e0c65327bae982001d2d2f83ece2650ae3687 (diff)
Switch to iframe
Diffstat
-rw-r--r--ext/bg/js/templates.js31
-rw-r--r--ext/fg/css/client.css27
-rw-r--r--ext/fg/css/popup.css31
-rw-r--r--ext/fg/js/client.js8
-rw-r--r--ext/manifest.json7
-rw-r--r--util/tmpl/defs.html22
-rw-r--r--util/tmpl/term.html12
7 files changed, 88 insertions, 50 deletions
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index ff146290..dfe52cd5 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -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});
})(); \ No newline at end of file
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index d62839a4..e55ce2fd 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -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;
-}
diff --git a/ext/fg/css/popup.css b/ext/fg/css/popup.css
new file mode 100644
index 00000000..3eba23ee
--- /dev/null
+++ b/ext/fg/css/popup.css
@@ -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;
+}
diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js
index 20838e10..ea18e41f 100644
--- a/ext/fg/js/client.js
+++ b/ext/fg/js/client.js
@@ -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);
});
}
diff --git a/ext/manifest.json b/ext/manifest.json
index 11d00e5d..e5b21268 100644
--- a/ext/manifest.json
+++ b/ext/manifest.json
@@ -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": ["*://*/*"],
diff --git a/util/tmpl/defs.html b/util/tmpl/defs.html
index 2fcc4ea9..ebbb7f82 100644
--- a/util/tmpl/defs.html
+++ b/util/tmpl/defs.html
@@ -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>
diff --git a/util/tmpl/term.html b/util/tmpl/term.html
index 56854499..bd414f26 100644
--- a/util/tmpl/term.html
+++ b/util/tmpl/term.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>