Bubble color picker

Bubble color picker.markdown

Bubble color picker

I've been playing around with logic to create a color picker. Hope you all like it!

Forked from Lewi Hussey's Pen Bubble color picker.

A Pen by Cezar Sá Espinola on CodePen.

License.

index.html

<div class="color-picker"></div>

script.js

/*

	Bubble color picker
	By @Lewitje

	Have fun with it!

*/

var colorPicker = (function() {

	var config = {
		baseColors: [
			[46, 204, 113],
			[52, 152, 219],
			[155, 89, 182],
			[52, 73, 94],
			[241, 196, 15],
			[230, 126, 34],
			[231, 76, 60],
			[180, 180, 180]
		],
		lightModifier: 20,
		darkModifier: 0,
		transitionDuration: 200,
		transitionDelay: 25,
		variationTotal: 10
	};

	var state = {
		activeColor: [0, 0, 0]
	};

	function init() {
		createColorPicker(function() {
			appendBaseColors();
		});

		addEventListeners();

		setFirstColorActive(function() {
			setFirstModifiedColorActive();
		});
	}

	function setActiveBaseColor(el) {
		$('.color.active').removeClass('active');
		el.addClass('active');
	}

	function setActiveColor(el) {
		$('.color-var.active').removeClass('active');
		el.addClass('active');
		state.activeColor = el.data('color').split(',');
	}

	function addEventListeners() {
		$('body').on('click', '.color', function() {
			var color = $(this).data('color').split(',');
			setActiveBaseColor($(this));

			hideVariations(function() {
				createVariations(color, function() {
					setDelays(function() {
						showVariations();
					});
				});
			});
		});

		$('body').on('click', '.color-var', function() {
			setActiveColor($(this));
			setBackgroundColor();
		});
	}

	function setFirstColorActive(callback) {
		$('.color').eq(1).trigger('click');
		callback();
	}

	function setFirstModifiedColorActive() {
		setTimeout(function() {
			$('.color-var').eq(7).trigger('click');
		}, 500);
	}

	function createColorPicker(callback) {
		$('.color-picker').append('<div class="base-colors"></div>');
		$('.color-picker').append('<div class="varied-colors"></div>');
		$('.color-picker').append('<div class="active-color"></div>');
		$('.color-picker').append('<div class="color-history"></div>');

		callback();
	}

	function appendBaseColors() {
		for (i = 0; i < config.baseColors.length; i++) {
			$('.base-colors').append('<div class="color" data-color="' + config.baseColors[i].join() + '" style="background-color: rgb(' + config.baseColors[i].join() + ');"></div>');
		}
	};

	function setBackgroundColor() {
		$('body').css({
			'background-color': 'rgb(' + state.activeColor + ')'
		});
	}

	function createVariations(color, callback) {
		$('.varied-colors').html('');

		for (var i = 0; i < config.variationTotal; i++) {
			var newColor = [];

			for (var x = 0; x < color.length; x++) {
				var modifiedColor = (Number(color[x]) - 100) + (config.lightModifier * i);

				if (modifiedColor <= 0) {
					modifiedColor = 0;
				} else if (modifiedColor >= 255) {
					modifiedColor = 255;
				}

				newColor.push(modifiedColor);
			}
			var extraClass = "";
			if (newColor[0] > 220 && newColor[1] > 220 && newColor[2] > 220) {
				extraClass = "light";
			}

			$('.varied-colors').append('<div data-color="' + newColor + '" class="color-var ' + extraClass + '" style="background-color: rgb(' + newColor + ');"></div>');
		}

		callback();
	}

	function setDelays(callback) {
		$('.color-var').each(function(x) {
			$(this).css({
				'transition': 'transform ' + (config.transitionDuration / 1000) + 's ' + ((config.transitionDelay / 1000) * x) + 's'
			});
		});

		callback();
	}

	function showVariations() {
		setTimeout(function() {
			$('.color-var').addClass('visible');
		}, (config.transitionDelay * config.variationTotal));
	}

	function hideVariations(callback) {
		$('.color-var').removeClass('visible').removeClass('active');

		setTimeout(function() {
			callback();
		}, (config.transitionDelay * config.variationTotal));
	}

	return {
		init: init
	};

}());

colorPicker.init();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

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

body{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	transition: all 1s;
	font-family: sans-serif;
}

.color-picker{
	width: 100%;
	background-color: white;
	padding: 40px 0;
}

.base-colors,
.varied-colors{
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.color,
.color-var{
	float: left;
	border-radius: 50%;
	cursor: pointer;
}

.color{
	transition: all .2s;
	width: 25px;
	height: 25px;
	margin: 20px;
	
	&.active{
		transform: scale(1.3, 1.3);
	}
}

.color-var{
	transform: scale(0, 0);
	width: 40px;
	height: 40px;
	margin: 10px;
	
	&.visible{
		transform: scale(1, 1);
	}
	
	&.active{
		transform: scale(1.3, 1.3);
	}
	
	&.light{
		border: 1px solid #ccc;
	}
}

footer{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	color: white;
	text-align: center;
	
	a{
		color: white;
		text-decoration: none;
	}
}