diff --git a/website/src/global.js b/website/src/global.js
index 7424d29c..4b256314 100644
--- a/website/src/global.js
+++ b/website/src/global.js
@@ -8,38 +8,86 @@ else {
require("./focus-within-polyfill")("focus-within");
const dl = require("./dl");
-// setTimeout(() => {
-// fn.changeToView("loading-view");
-// }, 100);
-
const urlBar = document.querySelector(".url input");
-document.addEventListener("click", (e) => {
- if (e.target.classList.contains("format")) {
- document.querySelector(`button.${lastFormat}`).classList.remove("checked");
- e.target.classList.add("checked")
- lastFormat = e.target.attributes["data-format"].value;
- localStorage.setItem("lastFormat", lastFormat);
- dl.init(urlBar.value, lastFormat);
+// focus url bar on paste
+document.addEventListener("paste", (e) => {
+ if (
+ !document.activeElement ||
+ !document.activeElement.classList ||
+ !document.activeElement.classList.contains("url-bar")
+ ) {
+ urlBar.focus();
+ }
+});
+// focus url bar on keypress
+document.addEventListener("keypress", (e) => {
+ if (e.which != 13) { //enter
+ urlBar.focus();
}
});
-
document.addEventListener("keydown", (e) => {
if (
- e.which != 13 && // enter
- e.which != 9 && // tab
- e.which != 32 && // space
- e.which != 16 // shift
+ e.which == 37 || // arrow left
+ e.which == 38 || // arrow up
+ e.which == 39 || // arrow right
+ e.which == 40 || // arrow down
+ e.which == 46 || // delete
+ e.which == 8 // backspace
) {
urlBar.focus();
}
- if (e.target.classList.contains("url-bar")) {
- if (e.which != 13) return; // enter
+});
+
+// press enter to download
+document.addEventListener("keydown", (e) => {
+ if (e.which == 13) {
+ if (
+ e.target.classList.contains("url-bar") ||
+ document.activeElement.nodeName == "BODY"
+ ) {
+ if (e.which != 13) return; // enter
+ dl.init(urlBar.value, lastFormat);
+ }
+ }
+});
+
+
+// press button to download
+document.addEventListener("click", (e) => {
+ if (e.target.classList.contains("format")) {
+ document.querySelector(`button.${lastFormat}`).classList.remove("checked");
+ e.target.classList.add("checked")
+ lastFormat = e.target.attributes["data-format"].value;
+ localStorage.setItem("lastFormat", lastFormat);
dl.init(urlBar.value, lastFormat);
}
});
+// document.addEventListener("keydown", (e) => {
+// if (
+// e.which != 13 && // enter
+// e.which != 9 && // tab
+// e.which != 32 && // space
+// e.which != 16 // shift
+// ) {
+// urlBar.focus();
+// }
+// if (e.target.classList.contains("url-bar")) {
+// if (e.which != 13) return; // enter
+// dl.init(urlBar.value, lastFormat);
+// }
+// });
+
+
+
+// press X to go back to format-selection
+document.addEventListener("click", (e) => {
+ if (e.target.classList.contains("go-back-on-click")) {
+ fn.changeToView("format-selection");
+ }
+});
const isChrome = !!window.chrome && !!window.chrome.webstore;
if (isChrome) {
@@ -47,21 +95,21 @@ if (isChrome) {
const extLink = "https://chrome.google.com/webstore/detail/ofojemljpdnbfmjenigkncgofkcoacag";
const extensionDiv = document.querySelector(".extension.chrome");
const extensionTooltip = document.querySelector(".extension.chrome .extension-tooltip");
- const svg = extensionDiv.querySelector("svg");
+ const svg = extensionDiv.querySelector(".svg");
svg.addEventListener("mouseenter", () => {
- console.log("ant");
extensionTooltip.classList.add("visible");
});
extensionDiv.addEventListener("mouseleave", () => {
- console.log("leaf");
extensionTooltip.classList.remove("visible");
});
- svg.addEventListener("click", () => {
- chrome.webstore.install(extLink, function(suc) {
- console.log(suc);
- }, function(err) {
- console.log(err);
- });
+ document.addEventListener("click", (e) => {
+ if (e.target.classList.contains("chrome-icon")) {
+ chrome.webstore.install(extLink, function(suc) {
+ console.log(suc);
+ }, function(err) {
+ console.log(err);
+ });
+ }
});
extensionDiv.classList.add("visible");
diff --git a/website/src/global.sass b/website/src/global.sass
index 3bb342e8..99472d7a 100644
--- a/website/src/global.sass
+++ b/website/src/global.sass
@@ -145,12 +145,18 @@ body
text-align: center
margin: 0px
padding: 2px
+ .svg
+ display: block
+ margin: auto
+ background-position: center
+ background-repeat: no-repeat
+ background-size: 48px 48px
+ width: 48px
+ height: 48px
+ cursor: pointer
.error-view
- svg
- display: block
- margin: auto
- width: 48px
- height: 48px
+ .svg
+ background-image: url('data:image/svg+xml;utf8,')
.spacer
height: 10px
p.error-message
@@ -160,8 +166,9 @@ body
color: rgba(#FFFFFF, 0.8)
font-size: 15px
.success-view
- width: 48px
- height: 48px
+ .svg
+ background-image: url('data:image/svg+xml;utf8,')
+
=cliackable($color, $base-opacity: 0, $scalePercent: 1)
@@ -220,15 +227,15 @@ body
margin: 10px
&.visible
display: flex
- svg
+ .svg
+ background-image: url('data:image/svg+xml;utf8,')
+ background-position: center
+ background-repeat: no-repeat
+ background-size: 24px 24px
width: 24px
height: 24px
padding: 10px
cursor: pointer
- user-select: none
- // &:hover + .extension-tooltip
- // opacity: 1
- // transform: translateX(0px) scale(1)
.extension-tooltip
transition: $transition-28 all
pointer-events: none
@@ -239,6 +246,7 @@ body
padding: 9px 16px
margin: 8px 10px
position: relative
+ font-size: 15px
&.visible
opacity: 1
transform: translateX(0px) scale(1)
diff --git a/website/src/index.pug b/website/src/index.pug
index d14eae08..597edb07 100644
--- a/website/src/index.pug
+++ b/website/src/index.pug
@@ -40,23 +40,14 @@ html
p.title Title
p.uploader Uploader
.success-view
- svg(fill="#FFFFFF", viewbox="0 0 24 24", xmlns="http://www.w3.org/2000/svg")
- path(d="M0 0h24v24H0z", fill="none")
- path(d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z")
+ .svg.success-icon
.error-view
- svg(fill="#FFFFFF", viewbox="0 0 24 24", xmlns="http://www.w3.org/2000/svg")
- path(d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z")
- path(d="M0 0h24v24H0z", fill="none")
+ .svg.error-icon.go-back-on-click
.spacer
p.error-message Error unknown or whatever
p.error-code Code: 29-f3
.extension.chrome
- svg#Layer_1(xmlns="http://www.w3.org/2000/svg", xmlns:xlink="http://www.w3.org/1999/xlink", version="1.1", x="0px", y="0px", viewbox="0 0 305 305", style="enable-background:new 0 0 305 305;", xml:space="preserve")
- g#XMLID_16_
- path#XMLID_17_(d="M95.506,152.511c0,31.426,25.567,56.991,56.994,56.991c31.425,0,56.99-25.566,56.99-56.991 c0-31.426-25.565-56.993-56.99-56.993C121.073,95.518,95.506,121.085,95.506,152.511z", fill="#FFFFFF")
- path#XMLID_18_(d="M283.733,77.281c0.444-0.781,0.436-1.74-0.023-2.513c-13.275-22.358-32.167-41.086-54.633-54.159 C205.922,7.134,179.441,0.012,152.5,0.012c-46.625,0-90.077,20.924-119.215,57.407c-0.643,0.804-0.727,1.919-0.212,2.81 l42.93,74.355c0.45,0.78,1.28,1.25,2.164,1.25c0.112,0,0.226-0.008,0.339-0.023c1.006-0.137,1.829-0.869,2.083-1.852 c8.465-32.799,38.036-55.706,71.911-55.706c2.102,0,4.273,0.096,6.455,0.282c0.071,0.007,0.143,0.01,0.214,0.01H281.56 C282.459,78.545,283.289,78.063,283.733,77.281z", fill="#FFFFFF")
- path#XMLID_19_(d="M175.035,224.936c-0.621-0.803-1.663-1.148-2.646-0.876c-6.457,1.798-13.148,2.709-19.889,2.709 c-28.641,0-55.038-16.798-67.251-42.794c-0.03-0.064-0.063-0.126-0.098-0.188L23.911,77.719c-0.446-0.775-1.272-1.25-2.165-1.25 c-0.004,0-0.009,0-0.013,0c-0.898,0.005-1.725,0.49-2.165,1.272C6.767,100.456,0,126.311,0,152.511 c0,36.755,13.26,72.258,37.337,99.969c23.838,27.435,56.656,45.49,92.411,50.84c0.124,0.019,0.248,0.027,0.371,0.027 c0.883,0,1.713-0.47,2.164-1.25l42.941-74.378C175.732,226.839,175.657,225.739,175.035,224.936z", fill="#FFFFFF")
- path#XMLID_20_(d="M292.175,95.226h-85.974c-1.016,0-1.931,0.615-2.314,1.555c-0.384,0.94-0.161,2.02,0.564,2.73 c14.385,14.102,22.307,32.924,22.307,53c0,15.198-4.586,29.824-13.263,42.298c-0.04,0.058-0.077,0.117-0.112,0.178l-61.346,106.252 c-0.449,0.778-0.446,1.737,0.007,2.513c0.449,0.767,1.271,1.237,2.158,1.237c0.009,0,0.019,0,0.028,0 c40.37-0.45,78.253-16.511,106.669-45.222C289.338,231.032,305,192.941,305,152.511c0-19.217-3.532-37.956-10.498-55.698 C294.126,95.855,293.203,95.226,292.175,95.226z", fill="#FFFFFF")
+ .svg.chrome-icon
.extension-tooltip
| Install the Chrome extension. Easily download from
| any page by clicking the extension icon, or configure