Skip to content

Instantly share code, notes, and snippets.

@giventofly
Created June 30, 2022 20:17
Show Gist options
  • Save giventofly/b3cfaa926d5a1449db14309b27933905 to your computer and use it in GitHub Desktop.
Save giventofly/b3cfaa926d5a1449db14309b27933905 to your computer and use it in GitHub Desktop.
Auto expand contract textarea
//calculates using newlines
//*** text area grow */
const calcNewLines = (value) => {
let numberOfLineBreaks = (value.match(/\n/g) || []).length;
// min-height + lines x line-height + padding + border
//let newHeight = 34 + numberOfLineBreaks * 20 + 12 + 2;
let newHeight = 34 + numberOfLineBreaks * 24 + 12 + 2;
if (!numberOfLineBreaks) {
newHeight = 36;
}
return newHeight;
};
const makeAreaGreatAgain = (e) => {
e.target.style.height = calcNewLines(e.target.value) + "px";
};
#deckcode {
resize: none;
height: auto;
//width: 400px;
//min-height: 100px;
//padding: 5px;
//font-size: 14px;
overflow: hidden;
font-size: 16px;
//box-sizing: border-box;
width: 100%;
padding: 6px 6px 6px 12px;
}
.import-deck-block {
margin-left: auto;
display: inline-flex;
justify-content: flex-end;
align-items: center;
//margin-left: 12px;
//flex-grow: 1;
width: 100%;
margin: 12px auto;
button {
margin-right: 0;
margin-left: 12px;
color: $text-color;
//padding-left: 12px;
// padding-right: 12px;
font-weight: 700;
text-transform: uppercase;
img {
pointer-events: none;
}
}
<div class="import-deck-block">
<textarea type="text" id="deckcode" placeholder="Deck code" autofocus class="autoExpand" rows="1" data-min-rows="1"></textarea>
<button class="icon import-deck-code" data-url="'.get_home_url().'/deck-builder">
<img src="'.get_stylesheet_directory_uri().'/assets/media/icons/import.svg" alt="">
</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment