Skip to content
This repository has been archived by the owner on Aug 10, 2023. It is now read-only.

Commit

Permalink
added the "placeholder" feature
Browse files Browse the repository at this point in the history
  • Loading branch information
Erwin Heldy G committed Sep 7, 2020
1 parent 8051771 commit ce866b9
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 8 deletions.
2 changes: 1 addition & 1 deletion dist/css/tagin.css.map
View file

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@ <h5>Basic</h5>
</div>
</div>

<div class="card mb-5 shadow border-0">
<div class="card-body">
<h5>Placeholder</h5>
<p class="text-muted font-size-sm">
Set placeholder using <code>data-placeholder</code> attribute.<br>
</p>
<input type="text" name="tags" class="form-control tagin" value="red,green,blue" data-placeholder="Add a color... (then press comma)">
</div>
</div>

<div class="card mb-5 shadow border-0">
<div class="card-body">
<h5>Custom Separator</h5>
Expand Down
10 changes: 7 additions & 3 deletions dist/js/tagin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ function tagin(el, option = {}) {
const defaultSeparator = ','
const defaultDuplicate = 'false'
const defaultTransform = input => input
const defaultPlaceholder = ''
const separator = el.dataset.separator || option.separator || defaultSeparator
const duplicate = el.dataset.duplicate || option.duplicate || defaultDuplicate
const transform = eval(el.dataset.transform) || option.transform || defaultTransform
const placeholder = el.dataset.placeholder || option.placeholder || defaultPlaceholder

const templateTag = value => `<span class="${classTag}">${value}<span class="${classRemove}"></span></span>`

Expand All @@ -21,7 +23,7 @@ function tagin(el, option = {}) {
; (function () {
const className = classWrapper + ' ' + el.className.replace(classElement, '').trim()
const tags = getValue().trim() === '' ? '' : getValues().map(templateTag).join('')
const template = `<div class="${className}">${tags}<input type="text" class="${classInput}"></div>`
const template = `<div class="${className}">${tags}<input type="text" class="${classInput}" placeholder="${placeholder}"></div>`
el.insertAdjacentHTML('afterend', template) // insert template after element
})()

Expand Down Expand Up @@ -57,7 +59,6 @@ function tagin(el, option = {}) {

// Adding tag
input.addEventListener('input', () => {
autowidth()
const value = transform(input.value.replace(new RegExp(escapeRegex(separator), 'g'), '').trim())
if (value === '') { input.value = '' }
if (input.value.includes(separator)) {
Expand All @@ -70,12 +71,15 @@ function tagin(el, option = {}) {
input.value = ''
input.removeAttribute('style')
}
autowidth()
})
autowidth()

function autowidth() {
const fakeEl = document.createElement('div')
fakeEl.classList.add(classInput, classInputHidden)
fakeEl.innerHTML = input.value.replace(/ /g, '&nbsp;')
const string = input.value || input.getAttribute('placeholder') || ''
fakeEl.innerHTML = string.replace(/ /g, '&nbsp;')
document.body.appendChild(fakeEl)
input.style.setProperty('width', Math.ceil(window.getComputedStyle(fakeEl).width.replace('px', '')) + 1 + 'px')
fakeEl.remove()
Expand Down
2 changes: 1 addition & 1 deletion dist/js/tagin.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 7 additions & 3 deletions js/tagin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ function tagin(el, option = {}) {
const defaultSeparator = ','
const defaultDuplicate = 'false'
const defaultTransform = input => input
const defaultPlaceholder = ''
const separator = el.dataset.separator || option.separator || defaultSeparator
const duplicate = el.dataset.duplicate || option.duplicate || defaultDuplicate
const transform = eval(el.dataset.transform) || option.transform || defaultTransform
const placeholder = el.dataset.placeholder || option.placeholder || defaultPlaceholder

const templateTag = value => `<span class="${classTag}">${value}<span class="${classRemove}"></span></span>`

Expand All @@ -21,7 +23,7 @@ function tagin(el, option = {}) {
; (function () {
const className = classWrapper + ' ' + el.className.replace(classElement, '').trim()
const tags = getValue().trim() === '' ? '' : getValues().map(templateTag).join('')
const template = `<div class="${className}">${tags}<input type="text" class="${classInput}"></div>`
const template = `<div class="${className}">${tags}<input type="text" class="${classInput}" placeholder="${placeholder}"></div>`
el.insertAdjacentHTML('afterend', template) // insert template after element
})()

Expand Down Expand Up @@ -57,7 +59,6 @@ function tagin(el, option = {}) {

// Adding tag
input.addEventListener('input', () => {
autowidth()
const value = transform(input.value.replace(new RegExp(escapeRegex(separator), 'g'), '').trim())
if (value === '') { input.value = '' }
if (input.value.includes(separator)) {
Expand All @@ -70,12 +71,15 @@ function tagin(el, option = {}) {
input.value = ''
input.removeAttribute('style')
}
autowidth()
})
autowidth()

function autowidth() {
const fakeEl = document.createElement('div')
fakeEl.classList.add(classInput, classInputHidden)
fakeEl.innerHTML = input.value.replace(/ /g, '&nbsp;')
const string = input.value || input.getAttribute('placeholder') || ''
fakeEl.innerHTML = string.replace(/ /g, '&nbsp;')
document.body.appendChild(fakeEl)
input.style.setProperty('width', Math.ceil(window.getComputedStyle(fakeEl).width.replace('px', '')) + 1 + 'px')
fakeEl.remove()
Expand Down

0 comments on commit ce866b9

Please sign in to comment.