pat36/JS_PrzestawianiePudelek_03_konkurs.html

## JS_PrzestawianiePudelek_03_konkurs.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Przemieszczanie w lewo </title>
	<meta name="description" content="Wersja prosta.">
</head>

<style>
	.pudelko {
		float:      left;
		width:      120px;
		height:     120px;
		border:     solid 1px blue;
		margin:     2px;
		padding:    1px;
		background: LightYellow;
		overflow:   hidden;
		word-wrap:  break-word;
		font-style: italic;
	}
	.pudelko:first-letter {
		font-weight: bold;
		font-size:   1.5em;
	}
</style>
<body onload="

	var  a = [
		{ szer:100 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ea corrupti molestias dolore? Animi modi minus libero, amet odit iusto sint. Animi aliquam, beatae earum fuga odit obcaecati, fugiat labore.' } ,
		{ szer:160 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit earum officia laudantium ex neque inventore, in quae, obcaecati possimus, voluptatum sed at reprehenderit delectus. Quae, saepe! Autem optio, tempora ipsa.' } ,
		{ szer: 80 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae ea fugit fugiat nemo commodi nihil maxime sapiente perferendis, temporibus, saepe, distinctio cum quos, architecto sint voluptas facilis dignissimos eligendi. Voluptate.' } ,
		{ szer:120 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis dolorem dolores iste facere fugiat molestiae voluptatibus accusantium magni quo voluptates cumque in eligendi sint, placeat soluta sit incidunt explicabo?' } ,
		{ szer:180 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nihil explicabo, asperiores quia nisi aperiam quis vel atque soluta accusamus cupiditate velit consequuntur cum, quae odio corporis unde incidunt veniam.' } ,
	];

	// - utwórz pudełka -
	for( var i in a )
	{	var  pudelko = document.createElement( 'div' );
		document.body.appendChild( pudelko );
		with( pudelko )
		{	className   = 'pudelko';
			style.width = a[ i ].szer + 'px';
			innerText   = a[ i ].tekst.substr( 58 );
			title = 'klik - w lewo, CTRL-klik - w prawo';
			addEventListener( 'click' , WLewo  );
			addEventListener( 'click' , WPrawo );
		}
	}

	// KONKURS
	// 	Ten skrypt nie zawsze przestawia w lewo kliknięte pudełko.
	// 	Pierwszym trzem osobom, które znajdą i naprawią błąd wpiszę 5 na semestr.

	// - przemieść -
	//	     [parent]
	//	     /      \
	//	 [prev]   [target]
	function  WLewo( e )
	{
		if( e.ctrlKey )  return;
		console.log( '==> W lewo  [' , e.target.innerText.substr( 0 , 15 ) , '... ]' );

		/*if( e.target.previousElementSibling )
			e.target.parentNode.insertBefore(
				e.target ,
				e.target.previousElementSibling
			);*/
			if( e.target.previousElementSibling){
					e.target.parentNode.insertBefore(e.target, e.target.previousElementSibling);
				}else{
					e.target.parentNode.insertBefore(e.target, e.target.parentNode.childNodes[e.target.parentNode.childNodes.length]);
				}
	} // WLewo

	// atrapa
	function  WPrawo( e )
	{
		if( !e.ctrlKey )  return;
		console.log( '==> W prawo [' , e.target.innerText.substr( 0 , 15 ) , '... ]' );

		with( e.target.style ) backgroundColor = backgroundColor === 'yellow' ? 'LightYellow' : 'yellow';
	} // WPrawo

	">
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title> Przemieszczanie w lewo </title>
	<meta name="description" content="Wersja prosta.">
	</head>

	<style>
	.pudelko {
	float: left;
	width: 120px;
	height: 120px;
	border: solid 1px blue;
	margin: 2px;
	padding: 1px;
	background: LightYellow;
	overflow: hidden;
	word-wrap: break-word;
	font-style: italic;
	}
	.pudelko:first-letter {
	font-weight: bold;
	font-size: 1.5em;
	}
	</style>
	<body onload="

	var a = [
	{ szer:100 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ea corrupti molestias dolore? Animi modi minus libero, amet odit iusto sint. Animi aliquam, beatae earum fuga odit obcaecati, fugiat labore.' } ,
	{ szer:160 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit earum officia laudantium ex neque inventore, in quae, obcaecati possimus, voluptatum sed at reprehenderit delectus. Quae, saepe! Autem optio, tempora ipsa.' } ,
	{ szer: 80 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae ea fugit fugiat nemo commodi nihil maxime sapiente perferendis, temporibus, saepe, distinctio cum quos, architecto sint voluptas facilis dignissimos eligendi. Voluptate.' } ,
	{ szer:120 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis dolorem dolores iste facere fugiat molestiae voluptatibus accusantium magni quo voluptates cumque in eligendi sint, placeat soluta sit incidunt explicabo?' } ,
	{ szer:180 , tekst:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas nihil explicabo, asperiores quia nisi aperiam quis vel atque soluta accusamus cupiditate velit consequuntur cum, quae odio corporis unde incidunt veniam.' } ,
	];

	// - utwórz pudełka -
	for( var i in a )
	{ var pudelko = document.createElement( 'div' );
	document.body.appendChild( pudelko );
	with( pudelko )
	{ className = 'pudelko';
	style.width = a[ i ].szer + 'px';
	innerText = a[ i ].tekst.substr( 58 );
	title = 'klik - w lewo, CTRL-klik - w prawo';
	addEventListener( 'click' , WLewo );
	addEventListener( 'click' , WPrawo );
	}
	}

	// KONKURS
	// Ten skrypt nie zawsze przestawia w lewo kliknięte pudełko.
	// Pierwszym trzem osobom, które znajdą i naprawią błąd wpiszę 5 na semestr.

	// - przemieść -
	// [parent]
	// / \
	// [prev] [target]
	function WLewo( e )
	{
	if( e.ctrlKey ) return;
	console.log( '==> W lewo [' , e.target.innerText.substr( 0 , 15 ) , '... ]' );

	/*if( e.target.previousElementSibling )
	e.target.parentNode.insertBefore(
	e.target ,
	e.target.previousElementSibling
	);*/
	if( e.target.previousElementSibling){
	e.target.parentNode.insertBefore(e.target, e.target.previousElementSibling);
	}else{
	e.target.parentNode.insertBefore(e.target, e.target.parentNode.childNodes[e.target.parentNode.childNodes.length]);
	}
	} // WLewo

	// atrapa
	function WPrawo( e )
	{
	if( !e.ctrlKey ) return;
	console.log( '==> W prawo [' , e.target.innerText.substr( 0 , 15 ) , '... ]' );

	with( e.target.style ) backgroundColor = backgroundColor === 'yellow' ? 'LightYellow' : 'yellow';
	} // WPrawo

	">
	</body>
	</html>