'use strict';
(function () {
const screenSelector = document.querySelector('#screen-selector');
const valueField = document.querySelector('#value');
const incrementButton = document.querySelector('#increment');
const counter = document.querySelector('#counter');
const counterBtn = document.querySelector('#countBtn');
const textField = document.querySelector('#textField');
const custom = document.querySelector('#custom');
const counterIncrement = document.querySelector('#counter_increment');
valueField.setAttribute('value', 0);
screenSelector.addEventListener('change', (event) => {
const enabled = event.target.value === 'counter';
valueField.disabled = !enabled;
incrementButton.disabled = !enabled;
switch (event.target.value) {
case 'counter':
counter.classList.remove('hide');
textField.classList.add('hide');
custom.classList.add('hide');
break;
case 'textField':
counter.classList.add('hide');
textField.classList.remove('hide');
custom.classList.add('hide');
break;
case 'custom':
counter.classList.add('hide');
textField.classList.add('hide');
custom.classList.remove('hide');
break;
default:
break;
}
});
incrementButton.addEventListener('click', (event) => {
let value = valueField.getAttribute('value');
valueField.setAttribute('value', ++value);
counterBtn.innerHTML = value;
});
counterIncrement.addEventListener('click', (event) => {
let value = valueField.getAttribute('value');
valueField.setAttribute('value', ++value);
counterBtn.innerHTML = value;
});
function makeExpandingArea(el) {
let timer = null;
const setStyle = function (elInner, auto) {
const parentHeight = elInner.parentElement.clientHeight;
if (parentHeight === 0) {
return;
}
if (auto) {
elInner.style.height = 'auto';
}
elInner.style.cssText = `height: ${elInner.scrollHeight}px;max-height: ${
parentHeight - 20
}px;`;
if (elInner.scrollHeight > parentHeight) {
elInner.style.cssText += 'overflow-y: scroll;';
}
};
const delayedResize = function (elInner) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
setStyle(elInner);
}, 200);
};
if (el.addEventListener) {
el.addEventListener(
'input',
() => {
setStyle(el, 1);
},
false
);
setStyle(el);
} else if (el.attachEvent) {
el.attachEvent('onpropertychange', () => {
setStyle(el);
});
setStyle(el);
}
if (window.VBArray && window.addEventListener) {
el.attachEvent('onkeydown', () => {
const key = window.event.keyCode;
if (key === 8 || key === 46) {
delayedResize(el);
}
});
el.attachEvent('oncut', () => {
delayedResize(el);
});
}
}
function exeTextLine(obj) {
if (obj === '') {
const textareaList = document.getElementsByClassName('my-text-area');
for (let i = 0; i < textareaList.length; i++) {
makeExpandingArea(textareaList[i]);
}
} else {
makeExpandingArea(obj);
}
}
exeTextLine('');
})();
function customerOnInput(value) {
const customerInput = document.getElementById('customerInput');
customerInput.innerHTML = value.length;
}
function resetCustomerInput(e) {
e.target.previousElementSibling.value = '';
e.target.parentElement.previousElementSibling.children[1].children[0].innerHTML = 0;
}