From e684cf9ae2a3099ab307c06bf10c4ddce2e23bb8 Mon Sep 17 00:00:00 2001
From: lehtint6 <teemu.t.lehtinen@aalto.fi>
Date: Sat, 28 Mar 2020 19:32:37 +0200
Subject: [PATCH] Add support for displaying keyboards and live html
---
static/webdev-editor.css | 28 ++++++++++++++++++++++++++++
static/webdev-execute.js | 13 +++++++++++++
2 files changed, 41 insertions(+)
diff --git a/static/webdev-editor.css b/static/webdev-editor.css
index cac9d6b..de856ce 100644
--- a/static/webdev-editor.css
+++ b/static/webdev-editor.css
@@ -40,6 +40,12 @@ body.execute ul#display > li.error {
body.execute ul#display > li.error::before {
content: "тип ";
}
+body.execute textarea.show-code {
+ display: block;
+ width: 98%;
+ margin: 0 auto;
+}
+
body.execute button {
border: 1px solid silver;
border-radius: 0.5em;
@@ -51,3 +57,25 @@ body.execute button {
font-size: 90%;
font-weight: bold;
}
+
+body.execute .tone-keyboard {
+ text-align: center;
+ padding-top: 20px;
+}
+body.execute .tone-keyboard button {
+ width: 50px;
+ height: 120px;
+ padding: 2px;
+ background-color: #F0F0F0;
+}
+body.execute .tone-keyboard button.black {
+ height: 100px;
+ transform: translate(0, -20px);
+ background-color: #333;
+ color: #FFF;
+ border-color: #000;
+}
+body.execute .tone-keyboard button.last-played {
+ border-left-width: 10px;
+ border-top-width: 3px;
+}
diff --git a/static/webdev-execute.js b/static/webdev-execute.js
index 51e8e1b..03f5a6c 100644
--- a/static/webdev-execute.js
+++ b/static/webdev-execute.js
@@ -1,6 +1,7 @@
var display = (function () {
var element = undefined;
+ var code = undefined;
function addLine(html, cls, args) {
if (element === undefined) {
@@ -31,6 +32,18 @@ var display = (function () {
},
err: function (html) {
addLine(html, 'error text-danger');
+ },
+ showCode: function (id) {
+ let element = document.getElementById(id);
+ if (code === undefined) {
+ code = document.createElement('textarea');
+ code.classList.add('show-code');
+ code.disabled = true;
+ document.body.insertBefore(code, element);
+ }
+ code.style.height = null;
+ code.textContent = element.outerHTML;
+ code.style.height = code.scrollHeight + 3 + 'px';
}
};
})();
--
GitLab