Форум

madeas · #1 (**permalink**) 29.05.2018, 16:04

Здравствуйте!
Помогите, пожалуйста, исправить. В js не разбираюсь, но кое-что смог собрать...

Два вопроса:
1. можно ли сократить содержимое js?
2. как отобразить выбранные параметры в результатах textarea?

Рабочий пример:
https://jsfiddle.net/nqpc3m2u/22/

madeas · #2 (**permalink**) 29.05.2018, 17:40

Немного улучшил https://jsfiddle.net/nqpc3m2u/29/
но все равно не выводит параметры в поле.

рони · #3 (**permalink**) 29.05.2018, 18:30

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>

madeas · #4 (**permalink**) 29.05.2018, 20:29

рони,
идея была практически в этом, да, но не совсем. Я хотел попробовать прикрепить генератор к тому, то уже имею, но конструкция становится слишком сложной для меня.
В скрипте не хватает произвольного класса и строк -webkit-box-shadow и -moz-box-shadow. Их можно как-нибудь прикрепить?

И еще вопрос, связанный с тем что чуть выше. У меня есть в наличии 53 класса. Можно сделать так, чтобы скрипт сам создавал новый класс, т.е. таким образом:

.boxshadow-54 {
-webkit-box-shadow:;
-moz-box-shadow:;
box-shadow:;
}

или любой произвольный номер от 54 до 99?

рони · #5 (**permalink**) 29.05.2018, 20:44

Сообщение от madeas

В скрипте не хватает произвольного класса и строк -webkit-box-shadow и -moz-box-shadow. Их можно как-нибудь прикрепить?

что мешает продолжить строку 153?

Сообщение от madeas

Можно сделать так, чтобы скрипт сам создавал новый класс, т.е. таким образом:

можно но алгоритм не достаточен, когда создать, какой номер сформировать

madeas · #6 (**permalink**) 29.05.2018, 20:55

рони,
да, у меня пока знаний не хватает на все скобки и переносы строк. пока ищу решение в интернете. до сих пор удивлен, как вообще двигаюсь вперед. Без вас бы не справился.

создать класс можно по умолчанию, номер любой. Наверное, будет лучше, если я смогу сам задавать класс, генерируемый пользователями.
Вроде такого

result.value = '.bshadow-54'  + '{' +
				'-webkit-box-shadow:' + ${shadow} \n${color} + ';' +
				'-moz-box-shadow:' + ${shadow} \n${color} + ';' +
				'box-shadow:' + ${shadow} \n${color} + ';}';
			}

madeas · #7 (**permalink**) 29.05.2018, 21:10

Настроил, спасибо.

result.value = '.bShadow-46{\n' + `-webkit-box-shadow: ${shadow} ${color}` + ';\n' + `-moz-box-shadow: ${shadow} ${color}` + ';\n' + `box-shadow: ${shadow} ${color}` + '}';

рони · #8 (**permalink**) 29.05.2018, 21:17

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>

рони · #9 (**permalink**) 30.05.2018, 10:14

madeas,
Opacity зачем?

madeas · #10 (**permalink**) 30.05.2018, 17:49

рони,
оно уже не нужно) изначально это была альтернатива rgba, но позже в нем пропала необходимость. Получилось вот так вот. Думаю, будет полезная штука https://madeas.github.io/box-shadows#gen
Однако, есть сомнения в необходимости создания класса с числом.
Нужен взгляд со стороны.
Люди используют коллекцию + создают свои классы, но в случае, если коллекция увеличится, то классы будут сбиты... Как быть, пока не решил. Хотя, я сомневаюсь, что классов будет больше 60... иначе это будет хрень, а не коллекция. Так что, наверное, можно оставить генератор в том виде, в каком он есть.

Форум

Справочник

Discord чат

Курсы javascript