-
-
Save mistermboy/2f4dea8010a9e176407a3b335a726d20 to your computer and use it in GitHub Desktop.
YASHE PLaceholder script
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// CodeMirror, copyright (c) by Marijn Haverbeke and others | |
// Distributed under an MIT license: https://codemirror.net/LICENSE | |
(function(mod) { | |
if (typeof exports == "object" && typeof module == "object") // CommonJS | |
mod(require("../../lib/codemirror")); | |
else if (typeof define == "function" && define.amd) // AMD | |
define(["../../lib/codemirror"], mod); | |
else // Plain browser env | |
mod(YASHE); | |
})(function(YASHE) { | |
YASHE.defineOption("placeholder", "", function(cm, val, old) { | |
var prev = old && old != YASHE.Init; | |
if (val && !prev) { | |
cm.on("blur", onBlur); | |
cm.on("change", onChange); | |
cm.on("swapDoc", onChange); | |
YASHE.on(cm.getInputField(), "compositionupdate", cm.state.placeholderCompose = function() { onComposition(cm) }) | |
onChange(cm); | |
} else if (!val && prev) { | |
cm.off("blur", onBlur); | |
cm.off("change", onChange); | |
cm.off("swapDoc", onChange); | |
YASHE.off(cm.getInputField(), "compositionupdate", cm.state.placeholderCompose) | |
clearPlaceholder(cm); | |
var wrapper = cm.getWrapperElement(); | |
wrapper.className = wrapper.className.replace(" CodeMirror-empty", ""); | |
} | |
if (val && !cm.hasFocus()) onBlur(cm); | |
}); | |
function clearPlaceholder(cm) { | |
if (cm.state.placeholder) { | |
cm.state.placeholder.parentNode.removeChild(cm.state.placeholder); | |
cm.state.placeholder = null; | |
} | |
} | |
function setPlaceholder(cm) { | |
clearPlaceholder(cm); | |
var elt = cm.state.placeholder = document.createElement("pre"); | |
elt.style.cssText = "height: 0; overflow: visible"; | |
elt.style.direction = cm.getOption("direction"); | |
elt.className = "CodeMirror-placeholder CodeMirror-line-like"; | |
var placeHolder = cm.getOption("placeholder") | |
if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder) | |
elt.appendChild(placeHolder) | |
cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild); | |
} | |
function onComposition(cm) { | |
setTimeout(function() { | |
var empty = false | |
if (cm.lineCount() == 1) { | |
var input = cm.getInputField() | |
empty = input.nodeName == "TEXTAREA" ? !cm.getLine(0).length | |
: !/[^\u200b]/.test(input.querySelector(".CodeMirror-line").textContent) | |
} | |
if (empty) setPlaceholder(cm) | |
else clearPlaceholder(cm) | |
}, 20) | |
} | |
function onBlur(cm) { | |
if (isEmpty(cm)) setPlaceholder(cm); | |
} | |
function onChange(cm) { | |
var wrapper = cm.getWrapperElement(), empty = isEmpty(cm); | |
wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : ""); | |
if (empty) setPlaceholder(cm); | |
else clearPlaceholder(cm); | |
} | |
function isEmpty(cm) { | |
return (cm.lineCount() === 1) && (cm.getLine(0) === ""); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment