diff --git a/main.js b/main.js index 025dfe0..36f0ff0 100644 --- a/main.js +++ b/main.js @@ -31,8 +31,8 @@ settings.addHandler(panel.toggle.bind(panel)); let clear = new Button("blank"); clear.addHandler(canvas.clear.bind(canvas)); -let downloadButton = new Button("download"); -downloadButton.addHandler(download); +let downloadButton = new Button("download", true); +downloadButton.element.download = "fantasy.png"; window.addEventListener("resize", onWindowResize, false); @@ -95,6 +95,8 @@ function paint() { let shape = factory.createRandomShape(); canvas.draw(shape); } + + downloadButton.element.href = canvas.getData(); } function adjustButtons(width) { @@ -106,11 +108,4 @@ function adjustButtons(width) { settings.setPosition(c + hc + ws, 25); clear.setPosition(2 * c + hc + ws, 25); downloadButton.setPosition(3 * c + hc + ws, 25); -} - -function download() { - let data = canvas.getData(); - let prev = window.location.href; - window.location.href = data.replace("image/png", "image/octet-stream"); - window.location.href = prev; } \ No newline at end of file diff --git a/style.css b/style.css index 57bfa9a..024f536 100644 --- a/style.css +++ b/style.css @@ -9,7 +9,7 @@ body { box-sizing: border-box; } -button { +.button { z-index: 2; overflow: hidden; background-color: #00b6ff; @@ -28,7 +28,7 @@ button { transition: background-color 0.2s; } -button:hover { +.button:hover { background-color: #2eceff; } diff --git a/ui/button.js b/ui/button.js index 33c77a9..3221d48 100644 --- a/ui/button.js +++ b/ui/button.js @@ -1,10 +1,19 @@ import UI from "./ui.js"; class Button extends UI { - constructor(image) { - super(document.createElement("button"), Button.width, Button.height); + constructor(image, isRef) { + isRef = isRef !== false; + let element; + if (isRef) { + element = document.createElement("a"); + element.href = "#"; + } else { + element = document.createElement("button"); + } + super(element, Button.width, Button.height); this.element.classList.add("shadow"); + this.element.classList.add("button"); this.element.style.backgroundImage = "url(images/" + image + ".svg)"; this._boundClick = this._onClick.bind(this); this.element.addEventListener("click", this._boundClick, false);