Вывести числа в textarea
Здравствуйте!
Помогите, пожалуйста, исправить. В js не разбираюсь, но кое-что смог собрать... Два вопроса: 1. можно ли сократить содержимое js? 2. как отобразить выбранные параметры в результатах textarea? Рабочий пример: https://jsfiddle.net/nqpc3m2u/22/ |
Немного улучшил https://jsfiddle.net/nqpc3m2u/29/
но все равно не выводит параметры в поле. |
shadow генератор
madeas,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.flex-start {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
input[type=range] {
margin: 0;
padding: 0;
display: inline-block;
-webkit-appearance: none;
background: transparent;
border: 1px solid #eee;
height: 6px;
margin-bottom: 15px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
height: 20px;
width: 10px;
background: #47c9e5;
cursor: pointer;
z-index: 20;
-webkit-appearance: none;
position: relative;
}
.gen {
display: inline-block;
font-weight: bold;
color: #47c9e5;
min-width: 30px;
text-align: center;
}
.op0 {
opacity: 0;
}
.pl-20 {
padding-left: 20px;
min-width: 21%;
}
textarea.result {
position: relative;
display: block;
border-color: #ccc;
border-radius: 6px;
min-width: 200px;
font-family: inherit;
font-size: 1rem;
line-height: inherit;
width: 100%;
min-height: 205px;
padding: 5px;
height: auto;
}
</style>
<title></title>
<style type="text/css">
th.c1 {height: 55px}
</style>
</head>
<body>
<div class="flex-start">
<table>
<thead>
<tr>
<th class="c1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>-100 <input multiple id="range_lr" type="range" min="-100" max="100" step="1" value=
"18"> 100</td>
</tr>
<tr>
<td>-100 <input multiple id="range_tb" type="range" min="-100" max="100" step="1" value=
"18"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_sp" type="range" min="0" max=
"100" step="1" value="51"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_bl" type="range" min="0" max=
"100" step="1" value="24"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_op" type="range" min="0" max=
"1" step="0.1" value="1"> 1</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
<div class="pl-20">
<h3>Result</h3>
<p>Right / Left (<span class="gen" id="res1"></span>)</p>
<p>Top / Bottom (<span class="gen" id="res2"></span>)</p>
<p>Spread (<span class="gen" id="res3"></span>)</p>
<p>Blur (<span class="gen" id="res4"></span>)</p>
<p>Opacity (<span class="gen" id="res5"></span>)</p>
</div>
<div class="pl-20">
<textarea class="result" id="result"></textarea>
</div>
</div><!-- flex-start -->
<input type="range" class="color" min="0" max="255" value="200">R<br>
<input type="range" class="color" min="0" max="255" value="200">G<br>
<input type="range" class="color" min="0" max="255" value="200">B<br>
<input type="range" class="color" min="0" max="1" step="0.1" value="1.0">A<br>
<script>
document.addEventListener('DOMContentLoaded', function() {
var col = document.querySelectorAll('.color');
var data = [];
[].forEach.call(col, function(el, i) {
data[i] = el.value;
el.oninput = e => {
data[i] = el.value;
outData()
}
});
var range = document.querySelectorAll('table [type="range"]'),
gen = document.querySelectorAll('.gen');
[].forEach.call(range, function(el, i) {
gen[i].innerHTML = data[i + col.length] = el.value;
el.oninput = e => {
gen[i].innerHTML = el.value;
data[i + col.length] = el.value;
outData()
}
});
function outData() {
var color = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3]})`,
shadow = `${data[4]}px ${data[5]}px ${data[6]}px ${data[7]}px`,
result = document.querySelector('.result');
result.style.boxShadow = `${shadow} ${color}`;
result.value = `box-shadow: ${shadow} \n${color}`;
}
outData()
});
</script>
</body>
</html>
|
рони,
идея была практически в этом, да, но не совсем. Я хотел попробовать прикрепить генератор к тому, то уже имею, но конструкция становится слишком сложной для меня. В скрипте не хватает произвольного класса и строк -webkit-box-shadow и -moz-box-shadow. Их можно как-нибудь прикрепить? И еще вопрос, связанный с тем что чуть выше. У меня есть в наличии 53 класса. Можно сделать так, чтобы скрипт сам создавал новый класс, т.е. таким образом:
.boxshadow-54 {
-webkit-box-shadow:;
-moz-box-shadow:;
box-shadow:;
}
или любой произвольный номер от 54 до 99? |
Цитата:
Цитата:
|
рони,
да, у меня пока знаний не хватает на все скобки и переносы строк. пока ищу решение в интернете. до сих пор удивлен, как вообще двигаюсь вперед. Без вас бы не справился. создать класс можно по умолчанию, номер любой. Наверное, будет лучше, если я смогу сам задавать класс, генерируемый пользователями. Вроде такого
result.value = '.bshadow-54' + '{' +
'-webkit-box-shadow:' + ${shadow} \n${color} + ';' +
'-moz-box-shadow:' + ${shadow} \n${color} + ';' +
'box-shadow:' + ${shadow} \n${color} + ';}';
}
|
Настроил, спасибо.
result.value = '.bShadow-46{\n' + `-webkit-box-shadow: ${shadow} ${color}` + ';\n' + `-moz-box-shadow: ${shadow} ${color}` + ';\n' + `box-shadow: ${shadow} ${color}` + '}';
|
madeas,
подобрать тень, для сохранения варианта, нажать "save"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.flex-start {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
input[type=range] {
margin: 0;
padding: 0;
display: inline-block;
-webkit-appearance: none;
background: transparent;
border: 1px solid #eee;
height: 6px;
margin-bottom: 15px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
height: 20px;
width: 10px;
background: #47c9e5;
cursor: pointer;
z-index: 20;
-webkit-appearance: none;
position: relative;
}
.gen {
display: inline-block;
font-weight: bold;
color: #47c9e5;
min-width: 30px;
text-align: center;
}
.op0 {
opacity: 0;
}
.pl-20 {
padding-left: 20px;
min-width: 21%;
}
textarea.result {
position: relative;
display: block;
border-color: #ccc;
border-radius: 6px;
min-width: 200px;
font-family: inherit;
font-size: 1rem;
line-height: inherit;
width: 100%;
min-height: 205px;
padding: 5px;
height: auto;
}
th.c1 {height: 55px}
</style>
<title></title>
</head>
<body>
<div class="flex-start">
<table>
<thead>
<tr>
<th class="c1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>-100 <input multiple id="range_lr" type="range" min="-100" max="100" step="1" value=
"18"> 100</td>
</tr>
<tr>
<td>-100 <input multiple id="range_tb" type="range" min="-100" max="100" step="1" value=
"18"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_sp" type="range" min="0" max=
"100" step="1" value="51"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_bl" type="range" min="0" max=
"100" step="1" value="24"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_op" type="range" min="0" max=
"1" step="0.1" value="1"> 1</td>
</tr>
<tr>
<td class="rt"></td>
</tr>
</tbody>
</table>
<div class="pl-20">
<h3>Result</h3>
<p>Right / Left (<span class="gen" id="res1"></span>)</p>
<p>Top / Bottom (<span class="gen" id="res2"></span>)</p>
<p>Spread (<span class="gen" id="res3"></span>)</p>
<p>Blur (<span class="gen" id="res4"></span>)</p>
<p>Opacity (<span class="gen" id="res5"></span>)</p>
</div>
<div class="pl-20">
<textarea class="result" id="result"></textarea>
</div>
</div><!-- flex-start -->
<input type="range" class="color" min="0" max="255" value="200">R<br>
<input type="range" class="color" min="0" max="255" value="200">G<br>
<input type="range" class="color" min="0" max="255" value="200">B<br>
<input type="range" class="color" min="0" max="1" step="0.1" value="1.0">A<br>
<button class="save">save</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
var col = document.querySelectorAll('.color');
var data = [];
[].forEach.call(col, function(el, i) {
data[i] = el.value;
el.oninput = e => {
data[i] = el.value;
outData()
}
});
var range = document.querySelectorAll('table [type="range"]'),
gen = document.querySelectorAll('.gen');
[].forEach.call(range, function(el, i) {
gen[i].innerHTML = data[i + col.length] = el.value;
el.oninput = e => {
gen[i].innerHTML = el.value;
data[i + col.length] = el.value;
outData()
}
});
var out = [],
n = 54,
result = document.querySelector('.result'),
test = "";
function outData() {
var color = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3]})`,
shadow = `${data[4]}px ${data[5]}px ${data[6]}px ${data[7]}px`;
result.style.boxShadow = `${shadow} ${color}`;
test = `.boxshadow-${n} {
-webkit-box-shadow: ${shadow} ${color};
-moz-box-shadow: ${shadow} ${color};
box-shadow:${shadow} ${color};
}
`;
result.value = out.join("")+ test;
result.scrollTop = result.scrollHeight;
}
outData()
document.querySelector('.save').addEventListener('click',
function() {
if (test) {
out.push(test);
n++;
test = "";
result.scrollTop = result.scrollHeight;
}
})
});
</script>
</body>
</html>
|
madeas,
Opacity зачем? |
рони,
оно уже не нужно) изначально это была альтернатива rgba, но позже в нем пропала необходимость. Получилось вот так вот. Думаю, будет полезная штука https://madeas.github.io/box-shadows#gen Однако, есть сомнения в необходимости создания класса с числом. Нужен взгляд со стороны. Люди используют коллекцию + создают свои классы, но в случае, если коллекция увеличится, то классы будут сбиты... Как быть, пока не решил. Хотя, я сомневаюсь, что классов будет больше 60... иначе это будет хрень, а не коллекция. Так что, наверное, можно оставить генератор в том виде, в каком он есть. |
| Часовой пояс GMT +3, время: 17:32. |