fantazer
3/15/2016 - 8:34 PM

Increment

Button + [ 1 ] -

mixin incr(state)
  .incr(class= state ? 'incr--one' : '')
    .incr__minus.incr__nav
      +icon("minus","icon")
    .incr__val
      span=state ? 1 : 0
      .incr__val-coner
    .incr__plus.incr__nav
      +icon("plus","icon")

.incr-btn
	.incr-btn__el.btn--md.btn--light В корзину
	.incr-btn-wrap
		+incr(1)
// incr
.incr
	f()
	position relative
.incr__nav
	flex(mid)
	tr(all)
	size 40px
	border 1px solid #dddddd
	background white
	round()
	.icon
		size 14px
		fill $gray
		tr()
	&:hover
		cp()
		border 1px solid $mark
		.icon
			fill $mark
	&:active
		background-color darken($mark,10)
.incr__val
	flex(mid)
	background white
	position relative
	tr(all)
	padding: 0 15px
	span
		outline: none
		user-select: none

// Переключение с кнопки на инкремент
.incr-btn
	.incr-btn-wrap
		display: none
.incr-btn--active
	.incr-btn__el
		display: none
	.incr-btn-wrap
		display: block

// incr === end
// incr
var incrEl= {}
$('.incr__nav').click(function(){
	incrEl.parent = $(this).closest(".incr");
	incrEl.value = parseInt($(this).closest(".incr").find('.incr__val span').html());
	incrEl.state = $(this).closest(".incr").find('.incr__val span')
});

$('.incr__minus').click(function () {
	--incrEl.value;
	if(incrEl.parent.hasClass("incr--one")){
			incrEl.value = incrEl.value < 1 ? 1 : incrEl.value
	}
	incrEl.value = incrEl.value < 1 ? 0 : incrEl.value
	incrEl.state.html(incrEl.value);
});

$('.incr__plus').click(function () {
	++incrEl.value;
	incrEl.value = incrEl.value > 100 ? 100 : incrEl.value;
	incrEl.state.html(incrEl.value);
});

// Переключение с кнопки на инкремент
// increment btn
$('.incr-btn__el').click(function(){
	$(this).closest(".incr-btn").addClass('incr-btn--active');
});
$('.incr-btn .incr__minus').click(function () {
	incrEl.value === 1 ? $(this).closest(".incr-btn").removeClass("incr-btn--active") : ''
})
// increment btn === end

// incr === end