diff --git a/demo/kitchen-sink/demo.js b/demo/kitchen-sink/demo.js index 27272d3c4d4..1ca1589d492 100644 --- a/demo/kitchen-sink/demo.js +++ b/demo/kitchen-sink/demo.js @@ -487,11 +487,78 @@ optionsPanelContainer.insertBefore( env.editor.setValue(info, -1); env.editor.setOption("wrap", 80); }}, "Show Browser Info"]], - devUtil.getUI() + devUtil.getUI(), + ["div", {}, + "Open Dialog ", + ["button", {onclick: openTestDialog.bind(null, false)}, "Scale"], + ["button", {onclick: openTestDialog.bind(null, true)}, "Height"] + ] ]), optionsPanelContainer.children[1] ); +function openTestDialog(animateHeight) { + if (window.dialogEditor) + window.dialogEditor.destroy(); + var editor = ace.edit(null, { + value: "test editor", + mode: "ace/mode/javascript" + }); + window.dialogEditor = editor; + + var dialog = dom.buildDom(["div", { + style: "transition: all 1s; position: fixed; z-index: 100000;" + + "background: darkblue; border: solid 1px black; display: flex; flex-direction: column" + }, + ["div", {}, "test dialog"], + editor.container + ], document.body); + editor.container.style.flex = "1"; + if (animateHeight) { + dialog.style.width = "0vw"; + dialog.style.height = "0vh"; + dialog.style.left = "20vw"; + dialog.style.top = "20vh"; + setTimeout(function() { + dialog.style.width = "80vw"; + dialog.style.height = "80vh"; + dialog.style.left = "10vw"; + dialog.style.top = "10vh"; + }, 0); + + } else { + dialog.style.width = "80vw"; + dialog.style.height = "80vh"; + dialog.style.left = "10vw"; + dialog.style.top = "10vh"; + dialog.style.transform = "scale(0)"; + setTimeout(function() { + dialog.style.transform = "scale(1)" + }, 0); + } + function close(e) { + if (!e || !dialog.contains(e.target)) { + if (animateHeight) { + dialog.style.width = "0vw"; + dialog.style.height = "0vh"; + dialog.style.left = "80vw"; + dialog.style.top = "80vh"; + } else { + dialog.style.transform = "scale(0)" + } + window.removeEventListener("mousedown", close); + dialog.addEventListener("transitionend", function() { + dialog.remove(); + editor.destroy(); + }); + } + } + window.addEventListener("mousedown", close); + editor.focus() + editor.commands.bindKey("Esc", function() { close(); }); +} + + require("ace/ext/language_tools"); require("ace/ext/inline_autocomplete"); env.editor.setOptions({ diff --git a/src/css/editor.css.js b/src/css/editor.css.js index 505545fde4f..66150be103a 100644 --- a/src/css/editor.css.js +++ b/src/css/editor.css.js @@ -260,7 +260,6 @@ module.exports = ` .ace_hidpi .ace_content, .ace_hidpi .ace_gutter { contain: strict; - will-change: transform; } .ace_hidpi .ace_text-layer > .ace_line, .ace_hidpi .ace_text-layer > .ace_line_group {