diff --git a/static/webdev-editor.css b/static/webdev-editor.css index cac9d6bfdc4f1144a975861b142571d2bd8f7912..de856ce9b93522b8b903b4fe972ae5061a6f7549 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 51e8e1b8ede6f18668040c8fc949bcf8d6e590f7..03f5a6cce4225751ba659853a1da82a676735e1a 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'; } }; })();