/* globals prodcat */
var JSBoot = JSBoot || {};
(function($, Drupal, window) {
var SkuRotatorManager = function(container, imageRoot, productId, skuList) {
this.$container = $(container);
this.imageRoot = imageRoot;
this.productId = productId;
this.skuList = skuList || [];
this.skuHash = {};
this.interval = null;
this.currentSkuIndex = 0;
this.productData = prodcat.data.getProduct(productId);
this.initDom();
};
SkuRotatorManager.prototype.initDom = function() {
var self = this;
var $container = this.$container;
this.$skuName = $container.find('.brand-story-multi__text__body');
this.$modelImage = $container.find('.brand-story-multi__image--1');
this.$swatchImage = $container.find('.brand-story-multi__image--2');
this.$productImage = $container.find('.brand-story-multi__image--3');
var productData = this.productData;
if (this.skuList.length === 0) {
$.each(productData.skus, function(i, sku) {
self.skuList.push(sku.SKU_ID);
self.skuHash[sku.SKU_ID] = sku;
});
}
var skuNameClones = [];
var modelImageClones = [];
var swatchImageClones = [];
var productImageClones = [];
$.each(this.skuList, function(i, skuId) {
var sku = self.skuHash[skuId];
var $skuNameClone = self.$skuName.clone();
$skuNameClone.html(sku.SHADENAME);
$skuNameClone.attr('data-sku-id', skuId);
$skuNameClone.addClass('inactive');
skuNameClones.push($skuNameClone);
var $modelClone = self.cloneAndLazyLoadImage(self.$modelImage, 'lip-balm-square', skuId);
var $swatchClone = self.cloneAndLazyLoadImage(self.$swatchImage, 'lip-balm-swatch', skuId);
var $productClone = self.cloneAndLazyLoadImage(self.$productImage, 'lip-balm-product', skuId);
modelImageClones.push($modelClone);
swatchImageClones.push($swatchClone);
productImageClones.push($productClone);
});
window.requestAnimationFrame(function() {
self.$skuName.after(skuNameClones);
self.$modelImage.after(modelImageClones);
self.$swatchImage.after(swatchImageClones);
self.$productImage.after(productImageClones);
// eh requery
self.$skuName = $container.find('.brand-story-multi__text__body');
self.$modelImage = $container.find('.brand-story-multi__image--1');
self.$swatchImage = $container.find('.brand-story-multi__image--2');
self.$productImage = $container.find('.brand-story-multi__image--3');
self.afterSetup();
});
};
SkuRotatorManager.prototype.afterSetup = function() {
this.startReactor();
};
SkuRotatorManager.prototype.startReactor = function() {
if (this.interval) {
return;
}
var self = this;
this.interval = window.setInterval(function() {
self.next();
}, 1700);
};
SkuRotatorManager.prototype.next = function() {
this.currentSkuIndex++;
if (this.currentSkuIndex >= this.skuList.length) {
this.currentSkuIndex = 0;
}
var currentSkuId = this.skuList[this.currentSkuIndex];
this.showSku(currentSkuId);
};
SkuRotatorManager.prototype.cloneAndLazyLoadImage = function($image, imagePrefix, skuId) {
var $imageClone = $image.clone();
$imageClone.addClass('inactive');
$imageClone.attr('data-sku-id', skuId);
var imageSrc = this.imageRoot + imagePrefix + '--' + skuId + '.png';
$imageClone.find('img').removeClass('lazyload');
$imageClone.find('img').removeClass('lazyloaded');
$imageClone.find('img').removeClass('lazyloading');
$imageClone.find('img').removeAttr('src');
$imageClone.find('img').attr('data-src', imageSrc);
$imageClone.find('source').removeAttr('srcset');
$imageClone.find('source').attr('data-srcset', imageSrc);
$imageClone.find('img').addClass('lazyload');
return $imageClone;
};
SkuRotatorManager.prototype.showSku = function(skuId) {
var self = this;
window.requestAnimationFrame(function() {
var skuSelector = '[data-sku-id="' + skuId + '"]';
self.$skuName.not(skuSelector).addClass('inactive');
self.$modelImage.not(skuSelector).addClass('inactive');
self.$swatchImage.not(skuSelector).addClass('inactive');
self.$productImage.not(skuSelector).addClass('inactive');
self.$skuName.filter(skuSelector).removeClass('inactive');
self.$modelImage.filter(skuSelector).removeClass('inactive');
self.$swatchImage.filter(skuSelector).removeClass('inactive');
self.$productImage.filter(skuSelector).removeClass('inactive');
});
};
Drupal.behaviors.rotatingLipBalm = {
attach: function(context, options) {
// Hey who doesnt love a crap system where product data is inited via
// drupal behaviors.
var $skuRotatorContainer = $('.js-multi-sku-rotator', context);
$(function() {
// Hard coded to lip balm for now.
var PRODUCT_ID = 'PROD75354';
var imageRoot = '/media/export/cms/hydra-light/';
$skuRotatorContainer.each(function(i, obj) {
var manager = new SkuRotatorManager(obj, imageRoot, PRODUCT_ID);
console.log(manager);
window.skuRotatorManager = manager;
});
});
},
};
})(jQuery, Drupal, window);

collection hydra-light pour les lèvres
décuple
l’hydratation
l’hydratation
exfoliant, nourrissant, lissant.
Les lèvres sont incroyablement lisses, souples et volumineuses. Elles ne font pas que créer la lumière, elles la possèdent.
produits
à propos
NOUVEAUTÉS
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
Merci !




NOUVEAUTÉS
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
Merci !
NOUVEAUTÉS
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
17,00 €
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
Merci !
Spray



collection hydra-light pour les lèvres
NOUVEAUTÉS
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
17,00 €
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
Merci !
NOUVEAUTÉS
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
16,00 €
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
Merci !
NOUVEAUTÉS
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
13,00 €
- Rupture de stock
- Prochainement
- Inactif
- Épuisé
- Plus que quelques articles !
Merci !