diff --git a/code-input.js b/code-input.js index 0d9d646..491183a 100644 --- a/code-input.js +++ b/code-input.js @@ -561,13 +561,15 @@ var codeInput = { /** * If the color attribute has been defined on the - * code-input element by external code, return true. + * code-input element by external code, run the callback + * provided. * Otherwise, make the aspects the color affects * (placeholder and caret colour) be the base colour - * of the highlighted text, for best contrast, and - * return false. + * of the highlighted text, for best contrast. */ - isColorOverridenSyncIfNot() { + syncIfColorNotOverridden(callbackIfOverridden=function() {}) { + if(this.checkingColorOverridden) return; + this.checkingColorOverridden = true; const oldTransition = this.style.transition; this.style.transition = "unset"; window.requestAnimationFrame(() => { @@ -578,20 +580,28 @@ var codeInput = { if(getComputedStyle(this).color == "rgb(255, 255, 255)") { // Definitely not overriden this.internalStyle.removeProperty("--code-input_no-override-color"); + console.log(this, "Autoadapt; " + oldTransition); this.style.transition = oldTransition; const highlightedTextColor = getComputedStyle(this.getStyledHighlightingElement()).color; this.internalStyle.setProperty("--code-input_highlight-text-color", highlightedTextColor); this.internalStyle.setProperty("--code-input_default-caret-color", highlightedTextColor); - return false; + this.checkingColorOverridden = false; + } else { + this.style.transition = oldTransition; + this.checkingColorOverridden = false; + callbackIfOverridden(); } + } else { + this.style.transition = oldTransition; + this.checkingColorOverridden = false; + callbackIfOverridden(); } this.internalStyle.removeProperty("--code-input_no-override-color"); + console.log(this, "No autoadapt; " + oldTransition); this.style.transition = oldTransition; }); - - return true; } /** @@ -603,11 +613,11 @@ var codeInput = { */ syncColorCompletely() { // color of code-input element - if(this.isColorOverridenSyncIfNot()) { + this.syncIfColorNotOverridden(() => { // color overriden this.internalStyle.removeProperty("--code-input_highlight-text-color"); this.internalStyle.setProperty("--code-input_default-caret-color", getComputedStyle(this).color); - } + }); } @@ -847,7 +857,6 @@ var codeInput = { resizeObserver.observe(this); - // Add internal style as non-externally-overridable alternative to style attribute for e.g. syncing color this.classList.add("code-input_styles_" + codeInput.stylesheetI); const stylesheet = document.createElement("style"); stylesheet.innerHTML = "code-input.code-input_styles_" + codeInput.stylesheetI + " {}"; @@ -858,7 +867,7 @@ var codeInput = { // Synchronise colors const preColorChangeCallback = (evt) => { if(evt.propertyName == "color") { - this.isColorOverridenSyncIfNot(); + this.syncIfColorNotOverridden(); } }; this.preElement.addEventListener("transitionend", preColorChangeCallback);