Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2018, 15:59
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Добавление background-X
Всем привет.
Ребята, помогите составить скрипт.
Нужно при помощи инпутов задать блоку background-image и другие свойства.
Т.е., при вводе ссылки в 1 поле, в блоке #back появляется картинка, которая корректируется при помощи полей, расположенных ниже.
Как правильно составить скрипт? Думал сделать выведение через value, но не уверен, что получится. Знаний js пока не хватает.
Набросал разметку в песочнице https://jsfiddle.net/Lbqfp9g7/
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2018, 16:46
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Для начала - только url.
Можно попробовать этот: "https://javascript.ru/cat/list/donkey.gif"

<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

label,
ul,
p {
  margin-bottom: 0;
}

.back_flex ul li {
  list-style: none;
  display: inline-block;
}

.back_flex {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.back_flex p {
  margin-right: 15px;
}

#backpx {
  width: 50px;
}

#back {
  width: 267px;
  height: 267px;
  background-color: rgb(0, 0, 0);
  display: flex;
  position: relative;
}
</style>
<div class='container p-3'>
  <div class='row align-items-center'>

    <div class='col-lg-6'>

      <div class='back_flex'>
        <p>background-image:</p>
        <ul>
          <li>url(<input type='text' id=''>);</li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-repeat:</p>
        <ul>
          <li><label><input type='radio' name='repeat' id='' checked>no-repeat;</label></li>
          <li><label><input type='radio' name='repeat' id=''>repeat;</label></li>
          <li><label><input type='radio' name='repeat' id=''>repeat-x;</label></li>
          <li><label><input type='radio' name='repeat' id=''>repeat-y;</label></li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-position: </p>
        <ul>
          <li>Left <label><input id='backpx' type='number' min='0' max='100' id=''>%</label></li>
          <li>Top <label><input id='backpx' type='number' min='0' max='100' id=''>%</label></li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-size: </p>
        <ul>
          <li><label><input id='backpx' type='number' id=''>px</label></li>
          <li><label><input type='radio' id='' name='size'>cover</label></li>
          <li><label><input type='radio' id='' name='size'>repeat</label></li>
          <li><label><input type='radio' id='' name='size'>no-repeat</label></li>
        </ul>
      </div>

    </div>

    <div class='col-lg-6'>
      <div id='back'></div>
    </div>

  </div>
</div>
<script>
document.querySelector('input[type=text]').onchange = function() {
    document.querySelector('#back').style.backgroundImage = 'url(' + this.value + ')';
}
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2018, 17:00
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

<div class='container p-3'>
<style>* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

label,
ul,
p {
  margin-bottom: 0;
}

.back_flex ul li {
  list-style: none;
  display: inline-block;
}

.back_flex {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.back_flex p {
  margin-right: 15px;
}

#backpx {
  width: 50px;
}

#back {
  width: 267px;
  height: 267px;
  background-color: rgb(0, 0, 0);
  display: flex;
  position: relative;
}
</style>
  <div class='row align-items-center'>

    <div class='col-lg-6'>

      <div class='back_flex'>
        <p>background-image:</p>
        <ul>
          <li>url(<input type='text' name="backgroundImage">);</li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-repeat:</p>
        <ul>
          <li><label><input type='radio' name='backgroundRepeat' value="no-repeat" checked>no-repeat;</label></li>
          <li><label><input type='radio' name='backgroundRepeat' value="repeat">repeat;</label></li>
          <li><label><input type='radio' name='backgroundRepeat' value="repeat-x">repeat-x;</label></li>
          <li><label><input type='radio' name='backgroundRepeat' value="repeat-y">repeat-y;</label></li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-position: </p>
        <ul>
          <li><label>Left <input type='text' name="backgroundPositionLeft"></label></li>
          <li><label>Top <input type='text' name="backgroundPositionTop"></label></li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-size: </p>
        <ul>
          <li><label><input type='text' name="backgroundSize"></label></li>
          <li><label><input type='radio' name="backgroundSize" value='cover'>cover</label></li>
          <li><label><input type='radio' name="backgroundSize" value='repeat'>repeat</label></li>
          <li><label><input type='radio' name="backgroundSize" value='no-repeat'>no-repeat</label></li>
        </ul>
      </div>

    </div>

    <div class='col-lg-6'>
      <div id='back'></div>
    </div>

  </div>
</div>
<script>
(function() {
  const container = document.getElementById('back');
  const inputList = [].slice.call(document.querySelectorAll('input'));
  const index = inputList.reduce(function(res, item) {
      if (item.name in res) {
          if (res[item.name] instanceof Array)
              res[item.name].push(item);
          else
              (res[item.name] = [res[item.name]]).push(item);
      } else
          res[item.name] = item;

      return res;
  }, {});


  inputList.forEach(function(node) {
      const IS_RADIO = node.type === 'radio';

      node.addEventListener(IS_RADIO ? 'change' : 'input', function() {
          let value;
          if (this.name.indexOf('backgroundPosition') === 0) {
              return container.style.backgroundPosition =
                  index.backgroundPositionLeft.value +
                  index.backgroundPositionTop.value;
          } else if (this.name === 'backgroundSize') {
              value = index[this.name].filter(function(node) {
                  return node.type === 'text';
              }).shift().getAttribute('value');
              if (!value || value.trim().length) {
                  value = index[this.name].filter(function(node) {
                      return node.type !== 'text' && node.checked;
                  });
                  if (!value.length)
                      return;

                  value = value.shift().getAttribute('value');
              };
          } else if (this.name === 'backgroundImage')
              value = 'url(' + this.value + ')';
          else
              value = this.value;

          container.style[this.name] = value;
      });
  });
})()
</script>

Последний раз редактировалось Nexus, 31.07.2018 в 17:12.
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2018, 17:33
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Nexus,
Спасибо. Вообще я предполагал сделать так же, как предложил Dilettante_Pro, но мне кажется, так получилось бы более громоздко.
Dilettante_Pro, спасибо. Я был на верном пути)
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2018, 19:12
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}

	label,
	ul,
	p {
		margin-bottom: 0;
	}

	.back_flex ul li {
		list-style: none;
		display: inline-block;
	}

	.back_flex {
		display: flex;
		align-items: center;
		margin: 15px 0;
	}

	.back_flex p {
		margin-right: 15px;
	}

	#backpx {
		width: 50px;
	}

	#back {
		width: 267px;
		height: 267px;
		background-color: rgb(0, 0, 0);
		display: flex;
		position: relative;
	}
</style>
</head>
<body>
	<div class='container p-3'>
		<div class='row align-items-center'>

			<div class='col-lg-6'>

				<div class='back_flex'>
					<p>background-image:</p>
					<ul>
						<li>url(<input type='text' id='url' value="https://javascript.ru/cat/list/donkey.gif">);</li>
					</ul>
				</div>

				<div class='back_flex'>
					<p>background-repeat:</p>
					<ul>
						<li><label><input type='radio' name='repeat' id='' checked>no-repeat</label></li>
						<li><label><input type='radio' name='repeat' id=''>repeat</label></li>
						<li><label><input type='radio' name='repeat' id=''>repeat-x</label></li>
						<li><label><input type='radio' name='repeat' id=''>repeat-y</label></li>
					</ul>
				</div>

				<div class='back_flex'>
					<p>background-position: </p>
					<ul>
						<li>Left <label><input id='posX' type='number' min='0' max='100' value="0">%</label></li>
						<li>Top <label><input id='posY' type='number' min='0' max='100' value="0">%</label></li>
					</ul>
				</div>

				<div class='back_flex'>
					<p>background-size: </p>
					<ul>
						<li><label><input type='number' id='size' value="30">px</label></li>
						<li><label><input type='checkbox' id='size2' name='size'>cover</label></li>
					</ul>
				</div>

			</div>

			<div class='col-lg-6'>
				<div id='back'></div>
			</div>

		</div>
	</div>
	<script>
		var back = document.querySelector("#back"),
		x = document.querySelector("#posX"),
		y = document.querySelector('#posY'),
		size = document.querySelector('#size'),
		size2 = document.querySelector('#size2');
		(style=()=>{
			back.style.background = `url(${document.querySelector("#url").value}) black ${document.querySelector('[name="repeat"]:checked').parentNode.textContent} ${x.value}% ${y.value}%`;
			back.style.backgroundSize = size2.checked?'cover':size.value+'px';
		})();
		document.querySelectorAll('input').forEach(el=>el.oninput=style);
	</script>
</body>
</html>

Последний раз редактировалось j0hnik, 31.07.2018 в 19:22.
Ответить с цитированием
  #6 (permalink)  
Старый 01.08.2018, 12:31
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

j0hnik,
а можно сделать поля независимыми? Сейчас, когда выбираешь пункты, они не активируются до нажатия на background-size. Т.е. чтобы другие изменения заработали, придется стирать size и писать еще раз.
Ответить с цитированием
  #7 (permalink)  
Старый 01.08.2018, 13:01
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

madeas,
У меня пример j0hnik прекрасно работает в Chrome - изменения срабатывают сразу по любому параметру - и совсем не работает в IE.
Стрелочные функции поддерживают не все браузеры
Ответить с цитированием
  #8 (permalink)  
Старый 01.08.2018, 13:50
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Dilettante_Pro,
тогда хз, в хромиуме приходится обновлять значение других полей, чтобы сработали repeat'ы. Сами по себе они не меняются почему-то.
Ответить с цитированием
  #9 (permalink)  
Старый 01.08.2018, 14:18
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Dilettante_Pro,
похоже это особенность браузера, эх... в фоксе и правда норм работает.
Ответить с цитированием
  #10 (permalink)  
Старый 01.08.2018, 14:20
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от madeas
в хромиуме приходится обновлять значение других полей
Именно в примере j0hnik пост 5 здесь в теме через Посмотреть?
Вообще Chrome поддерживает стрелочные функции с версии 45.0
У меня 67.0.3396.99

Последний раз редактировалось Dilettante_Pro, 01.08.2018 в 14:24.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Арканоид - побитовые операции (замена на условия) Eadweard Events/DOM/Window 8 14.03.2016 16:12
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 20:11
Arcanoid движок SpiriKoN Общие вопросы Javascript 2 24.10.2014 15:44
Кнопка с выпадом текста acquaviva Элементы интерфейса 7 09.07.2013 02:14
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35