Socket
Socket
Sign inDemoInstall

text-fields

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

text-fields - npm Package Compare versions

Comparing version 1.1.7 to 1.2.0

154

dist/index.js

@@ -11,92 +11,78 @@ function $parcel$defineInteropFlag(a) {

$parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
const $4fa36e821943b400$var$notched = `
<div class="notched-outline">
<div class="notched-outline__leading"></div>
<div class="notched-outline__notch"></div>
<div class="notched-outline__trailing"></div>
</div>
`;
const $4fa36e821943b400$var$notch = document.querySelector(".notched-outline__notch");
const $4fa36e821943b400$var$customizeLabel = (textField)=>{
const label = textField.previousElementSibling;
if (!$4fa36e821943b400$var$notch) return;
textField.parentElement.insertAdjacentHTML("afterbegin", $4fa36e821943b400$var$notched);
textField.parentElement.querySelector(".notched-outline__notch").appendChild(label);
};
const $4fa36e821943b400$var$handleInput = (input, classList, label, style)=>{
if (input && label) {
if (input.disabled) classList.add("input--disabled");
if (input.required) label.classList.add("floating-label--required");
if (input.value.trim().length > 0) {
classList.add("input--filled");
style.width = (label.clientWidth + 13) * .75 + "px";
}
input.addEventListener("focus", ()=>{
classList.add("input--focused");
style.width = (label.clientWidth + 13) * .75 + "px";
});
input.addEventListener("blur", ()=>{
classList.remove("input--focused");
if (input.value.trim().length <= 0 && label) style.width = "auto";
});
input.addEventListener("input", ()=>{
input.value.trim().length > 0 ? classList.add("input--filled") : classList.remove("input--filled");
});
class $4fa36e821943b400$export$2e2bcd8739ae039 {
constructor(){
this.notches = [];
this.labels = document.querySelectorAll(".floating-label");
this.wrap();
this.handleFields();
}
};
const $4fa36e821943b400$var$handleTextarea = (textarea, classList, label, style)=>{
if (textarea && label) {
if (textarea.disabled) classList.add("textarea--disabled");
if (textarea.required) label.classList.add("floating-label--required");
if (textarea.value.trim().length > 0) {
classList.add("textarea--filled");
style.width = (label.clientWidth + 13) * .75 + "px";
}
textarea.addEventListener("focus", ()=>{
classList.add("textarea--focused");
style.width = (label.clientWidth + 13) * .75 + "px";
wrap = ()=>{
this.labels.forEach((label)=>{
const notchedOutline = label.closest(".notched-outline");
if (notchedOutline) this.notches.push({
container: notchedOutline.parentNode,
notch: notchedOutline.querySelector(".notched-outline__notch")
});
else {
const notchedOutline = document.createElement("div");
notchedOutline.classList.add("notched-outline");
notchedOutline.innerHTML = `<div class="notched-outline__leading"></div><div class="notched-outline__notch">${label.outerHTML}</div><div class="notched-outline__trailing"></div>`;
label.replaceWith(notchedOutline);
this.notches.push({
container: notchedOutline.parentNode,
notch: notchedOutline.querySelector(".notched-outline__notch")
});
}
});
textarea.addEventListener("blur", ()=>{
classList.remove("textarea--focused");
if (textarea.value.trim().length <= 0 && label) style.width = "auto";
});
textarea.addEventListener("change", ()=>{
textarea.value.trim().length > 0 ? classList.add("textarea--filled") : classList.remove("textarea--filled");
});
textarea.addEventListener("input", ()=>{
if (classList.contains("textarea--auto-resizeable")) {
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
this.update();
};
handleFields = ()=>{
const fields = [
...document.querySelectorAll(".text-field-container input, .text-field-container textarea")
];
fields.forEach((field)=>{
const notchData = this.notches.find((notchData)=>notchData.container.contains(field));
if (!notchData) return;
const { container: container , notch: notch } = notchData;
const label = notch.querySelector(".floating-label");
const fieldType = field instanceof HTMLTextAreaElement;
if (field.disabled) container.classList.add(fieldType ? "textarea--disabled" : "input--disabled");
if (field.required) label.classList.add("floating-label--required");
if (field.value.trim().length > 0) {
container.classList.add(fieldType ? "textarea--filled" : "input--filled");
notch.style.width = this.getNotchWidth(notch);
}
field.addEventListener("focus", ()=>{
container.classList.add(fieldType ? "textarea--focused" : "input--focused");
notch.style.width = this.getNotchWidth(notch);
});
field.addEventListener("blur", ()=>{
container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
if (field.value.trim().length <= 0) notch.style.width = "auto";
});
field.addEventListener("change", ()=>{
this.toggleFilledClass(field, container, fieldType);
});
if (fieldType && container.classList.contains("textarea--auto-resizeable")) field.addEventListener("input", ()=>{
field.style.height = "auto";
field.style.height = `${field.scrollHeight}px`;
});
else field.addEventListener("input", ()=>{
this.toggleFilledClass(field, container, fieldType);
});
});
}
};
const $4fa36e821943b400$var$input = ()=>{
const inputs = document.querySelectorAll(".input input");
for (let input of inputs){
const label = input.previousElementSibling;
if (!label) return;
$4fa36e821943b400$var$customizeLabel(input);
const { classList: classList } = input.parentNode;
const { style: style } = label.parentNode;
$4fa36e821943b400$var$handleInput(input, classList, label, style);
}
};
const $4fa36e821943b400$var$textarea = ()=>{
const textareas = document.querySelectorAll(".textarea textarea");
for (let textarea of textareas){
const label = textarea.previousElementSibling;
if (!label) return;
$4fa36e821943b400$var$customizeLabel(textarea);
const { classList: classList } = textarea.parentNode;
const { style: style } = label.parentNode;
$4fa36e821943b400$var$handleTextarea(textarea, classList, label, style);
}
};
var $4fa36e821943b400$export$2e2bcd8739ae039 = {
input: $4fa36e821943b400$var$input,
textarea: $4fa36e821943b400$var$textarea
};
};
update = ()=>{
this.inputs = document.querySelectorAll(".text-field-container input, .text-field-container textarea");
};
toggleFilledClass = (field, container, fieldType)=>{
field.value.trim().length > 0 ? container.classList.add(fieldType ? "textarea--filled" : "input--filled") : container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
};
getNotchWidth = (notch)=>{
const label = notch.querySelector(".floating-label");
return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * .75}px` : "auto";
};
}
//# sourceMappingURL=index.js.map

154

dist/index.module.js

@@ -1,89 +0,75 @@

const $cf838c15c8b009ba$var$notched = `
<div class="notched-outline">
<div class="notched-outline__leading"></div>
<div class="notched-outline__notch"></div>
<div class="notched-outline__trailing"></div>
</div>
`;
const $cf838c15c8b009ba$var$notch = document.querySelector(".notched-outline__notch");
const $cf838c15c8b009ba$var$customizeLabel = (textField)=>{
const label = textField.previousElementSibling;
if (!$cf838c15c8b009ba$var$notch) return;
textField.parentElement.insertAdjacentHTML("afterbegin", $cf838c15c8b009ba$var$notched);
textField.parentElement.querySelector(".notched-outline__notch").appendChild(label);
};
const $cf838c15c8b009ba$var$handleInput = (input, classList, label, style)=>{
if (input && label) {
if (input.disabled) classList.add("input--disabled");
if (input.required) label.classList.add("floating-label--required");
if (input.value.trim().length > 0) {
classList.add("input--filled");
style.width = (label.clientWidth + 13) * .75 + "px";
}
input.addEventListener("focus", ()=>{
classList.add("input--focused");
style.width = (label.clientWidth + 13) * .75 + "px";
});
input.addEventListener("blur", ()=>{
classList.remove("input--focused");
if (input.value.trim().length <= 0 && label) style.width = "auto";
});
input.addEventListener("input", ()=>{
input.value.trim().length > 0 ? classList.add("input--filled") : classList.remove("input--filled");
});
class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
constructor(){
this.notches = [];
this.labels = document.querySelectorAll(".floating-label");
this.wrap();
this.handleFields();
}
};
const $cf838c15c8b009ba$var$handleTextarea = (textarea, classList, label, style)=>{
if (textarea && label) {
if (textarea.disabled) classList.add("textarea--disabled");
if (textarea.required) label.classList.add("floating-label--required");
if (textarea.value.trim().length > 0) {
classList.add("textarea--filled");
style.width = (label.clientWidth + 13) * .75 + "px";
}
textarea.addEventListener("focus", ()=>{
classList.add("textarea--focused");
style.width = (label.clientWidth + 13) * .75 + "px";
wrap = ()=>{
this.labels.forEach((label)=>{
const notchedOutline = label.closest(".notched-outline");
if (notchedOutline) this.notches.push({
container: notchedOutline.parentNode,
notch: notchedOutline.querySelector(".notched-outline__notch")
});
else {
const notchedOutline = document.createElement("div");
notchedOutline.classList.add("notched-outline");
notchedOutline.innerHTML = `<div class="notched-outline__leading"></div><div class="notched-outline__notch">${label.outerHTML}</div><div class="notched-outline__trailing"></div>`;
label.replaceWith(notchedOutline);
this.notches.push({
container: notchedOutline.parentNode,
notch: notchedOutline.querySelector(".notched-outline__notch")
});
}
});
textarea.addEventListener("blur", ()=>{
classList.remove("textarea--focused");
if (textarea.value.trim().length <= 0 && label) style.width = "auto";
});
textarea.addEventListener("change", ()=>{
textarea.value.trim().length > 0 ? classList.add("textarea--filled") : classList.remove("textarea--filled");
});
textarea.addEventListener("input", ()=>{
if (classList.contains("textarea--auto-resizeable")) {
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
this.update();
};
handleFields = ()=>{
const fields = [
...document.querySelectorAll(".text-field-container input, .text-field-container textarea")
];
fields.forEach((field)=>{
const notchData = this.notches.find((notchData)=>notchData.container.contains(field));
if (!notchData) return;
const { container: container , notch: notch } = notchData;
const label = notch.querySelector(".floating-label");
const fieldType = field instanceof HTMLTextAreaElement;
if (field.disabled) container.classList.add(fieldType ? "textarea--disabled" : "input--disabled");
if (field.required) label.classList.add("floating-label--required");
if (field.value.trim().length > 0) {
container.classList.add(fieldType ? "textarea--filled" : "input--filled");
notch.style.width = this.getNotchWidth(notch);
}
field.addEventListener("focus", ()=>{
container.classList.add(fieldType ? "textarea--focused" : "input--focused");
notch.style.width = this.getNotchWidth(notch);
});
field.addEventListener("blur", ()=>{
container.classList.remove(fieldType ? "textarea--focused" : "input--focused");
if (field.value.trim().length <= 0) notch.style.width = "auto";
});
field.addEventListener("change", ()=>{
this.toggleFilledClass(field, container, fieldType);
});
if (fieldType && container.classList.contains("textarea--auto-resizeable")) field.addEventListener("input", ()=>{
field.style.height = "auto";
field.style.height = `${field.scrollHeight}px`;
});
else field.addEventListener("input", ()=>{
this.toggleFilledClass(field, container, fieldType);
});
});
}
};
const $cf838c15c8b009ba$var$input = ()=>{
const inputs = document.querySelectorAll(".input input");
for (let input of inputs){
const label = input.previousElementSibling;
if (!label) return;
$cf838c15c8b009ba$var$customizeLabel(input);
const { classList: classList } = input.parentNode;
const { style: style } = label.parentNode;
$cf838c15c8b009ba$var$handleInput(input, classList, label, style);
}
};
const $cf838c15c8b009ba$var$textarea = ()=>{
const textareas = document.querySelectorAll(".textarea textarea");
for (let textarea of textareas){
const label = textarea.previousElementSibling;
if (!label) return;
$cf838c15c8b009ba$var$customizeLabel(textarea);
const { classList: classList } = textarea.parentNode;
const { style: style } = label.parentNode;
$cf838c15c8b009ba$var$handleTextarea(textarea, classList, label, style);
}
};
var $cf838c15c8b009ba$export$2e2bcd8739ae039 = {
input: $cf838c15c8b009ba$var$input,
textarea: $cf838c15c8b009ba$var$textarea
};
};
update = ()=>{
this.inputs = document.querySelectorAll(".text-field-container input, .text-field-container textarea");
};
toggleFilledClass = (field, container, fieldType)=>{
field.value.trim().length > 0 ? container.classList.add(fieldType ? "textarea--filled" : "input--filled") : container.classList.remove(fieldType ? "textarea--filled" : "input--filled");
};
getNotchWidth = (notch)=>{
const label = notch.querySelector(".floating-label");
return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * .75}px` : "auto";
};
}

@@ -90,0 +76,0 @@

6

package.json
{
"name": "text-fields",
"version": "1.1.7",
"version": "1.2.0",
"description": "Input, textarea, material, vanilla",

@@ -34,4 +34,4 @@ "author": "ux-ui.pro",

"devDependencies": {
"@parcel/transformer-sass": "2.9.2",
"parcel": "^2.9.2"
"@parcel/transformer-sass": "~2.9.2",
"parcel": "~2.9.2"
},

@@ -38,0 +38,0 @@ "keywords": [

3

README.md

@@ -28,4 +28,3 @@ <div align="center">

```javascript
TextField.input()
TextField.textarea()
const textFields = new TextFields()
```

@@ -32,0 +31,0 @@ <br>

181

src/index.js

@@ -1,131 +0,104 @@

const notched = `
<div class="notched-outline">
<div class="notched-outline__leading"></div>
<div class="notched-outline__notch"></div>
<div class="notched-outline__trailing"></div>
</div>
`
export default class TextFields {
constructor() {
this.notches = []
this.labels = document.querySelectorAll('.floating-label')
this.wrap()
this.handleFields()
}
const notch = document.querySelector('.notched-outline__notch')
wrap = () => {
this.labels.forEach(label => {
const notchedOutline = label.closest('.notched-outline')
const customizeLabel = (textField) => {
const label = textField.previousElementSibling
if (notchedOutline) {
this.notches.push({
container: notchedOutline.parentNode,
notch: notchedOutline.querySelector('.notched-outline__notch')
})
} else {
const notchedOutline = document.createElement('div')
if(!notch) return
notchedOutline.classList.add('notched-outline')
notchedOutline.innerHTML = `<div class="notched-outline__leading"></div><div class="notched-outline__notch">${label.outerHTML}</div><div class="notched-outline__trailing"></div>`
label.replaceWith(notchedOutline)
textField.parentElement.insertAdjacentHTML('afterbegin', notched)
this.notches.push({
container: notchedOutline.parentNode,
notch: notchedOutline.querySelector('.notched-outline__notch')
})
}
})
textField.parentElement
.querySelector('.notched-outline__notch')
.appendChild(label)
}
this.update()
}
const handleInput = (input, classList, label, style) => {
if (input && label) {
if (input.disabled) {
classList.add('input--disabled')
}
handleFields = () => {
const fields = [...document.querySelectorAll('.text-field-container input, .text-field-container textarea')]
if (input.required) {
label.classList.add('floating-label--required')
}
fields.forEach(field => {
const notchData = this.notches.find(notchData => notchData.container.contains(field))
if (input.value.trim().length > 0) {
classList.add('input--filled')
style.width = ((label.clientWidth + 13) * .75) + 'px'
}
if (!notchData) return
input.addEventListener('focus', () => {
classList.add('input--focused')
style.width = ((label.clientWidth + 13) * .75) + 'px'
})
const { container, notch } = notchData
const label = notch.querySelector('.floating-label')
const fieldType = field instanceof HTMLTextAreaElement
input.addEventListener('blur', () => {
classList.remove('input--focused')
if (field.disabled) {
container.classList.add(fieldType ? 'textarea--disabled' : 'input--disabled')
}
if (input.value.trim().length <= 0 && label) {
style.width = 'auto'
if (field.required) {
label.classList.add('floating-label--required')
}
})
input.addEventListener('input', () => {
(input.value.trim().length > 0) ? classList.add('input--filled') : classList.remove('input--filled')
})
}
}
if (field.value.trim().length > 0) {
container.classList.add(fieldType ? 'textarea--filled' : 'input--filled')
notch.style.width = this.getNotchWidth(notch)
}
const handleTextarea = (textarea, classList, label, style) => {
if (textarea && label) {
if (textarea.disabled) {
classList.add('textarea--disabled')
}
field.addEventListener('focus', () => {
container.classList.add(fieldType ? 'textarea--focused' : 'input--focused')
notch.style.width = this.getNotchWidth(notch)
})
if (textarea.required) {
label.classList.add('floating-label--required')
}
field.addEventListener('blur', () => {
container.classList.remove(fieldType ? 'textarea--focused' : 'input--focused')
if (textarea.value.trim().length > 0) {
classList.add('textarea--filled')
style.width = ((label.clientWidth + 13) * .75) + 'px'
}
if (field.value.trim().length <= 0) {
notch.style.width = 'auto'
}
})
textarea.addEventListener('focus', () => {
classList.add('textarea--focused')
style.width = ((label.clientWidth + 13) * .75) + 'px'
})
field.addEventListener('change', () => {
this.toggleFilledClass(field, container, fieldType)
})
textarea.addEventListener('blur', () => {
classList.remove('textarea--focused')
if (textarea.value.trim().length <= 0 && label) {
style.width = 'auto'
if (fieldType && container.classList.contains('textarea--auto-resizeable')) {
field.addEventListener('input', () => {
field.style.height = 'auto'
field.style.height = `${field.scrollHeight}px`
})
} else {
field.addEventListener('input', () => {
this.toggleFilledClass(field, container, fieldType)
})
}
})
}
textarea.addEventListener('change', () => {
(textarea.value.trim().length > 0) ? classList.add('textarea--filled') : classList.remove('textarea--filled')
})
textarea.addEventListener('input', () => {
if (classList.contains('textarea--auto-resizeable')) {
textarea.style.height = 'auto'
textarea.style.height = (textarea.scrollHeight) + 'px'
}
})
update = () => {
this.inputs = document.querySelectorAll('.text-field-container input, .text-field-container textarea')
}
}
const input = () => {
const inputs = document.querySelectorAll('.input input')
for (let input of inputs) {
const label = input.previousElementSibling
if (!label) return
customizeLabel(input)
const { classList } = input.parentNode
const { style } = label.parentNode
handleInput(input, classList, label, style)
toggleFilledClass = (field, container, fieldType) => {
field.value.trim().length > 0
? container.classList.add(fieldType ? 'textarea--filled' : 'input--filled')
: container.classList.remove(fieldType ? 'textarea--filled' : 'input--filled')
}
}
const textarea = () => {
const textareas = document.querySelectorAll('.textarea textarea')
for (let textarea of textareas) {
const label = textarea.previousElementSibling
if (!label) return
customizeLabel(textarea)
const { classList } = textarea.parentNode
const { style } = label.parentNode
handleTextarea(textarea, classList, label, style)
getNotchWidth = (notch) => {
const label = notch.querySelector('.floating-label')
return label ? `${(parseFloat(getComputedStyle(label).width) + 13) * .75}px` : 'auto'
}
}
export default {
input,
textarea
}
dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.module.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc