https://instax.co.uk/wp-content/themes/instaxeu/js/product-page.js?ver=20260812

1/*
2Functions
3*/
4
5function product_sticky() {
6	var wndw = $(window),
7		head = $('#header'),
8		hero = $('#product-hero');
9	
10	/*
11	If the page has scrolled further than header height + #product-hero section + 200px:
12	#product-sticky section receives 'stuck' class and becomes fixed
13	*/
14	if ( wndw.scrollTop() >= head.height()+hero.height()+200 ) {
15		$('#product-sticky').addClass('stuck');
16		$('#product-hero .retailer-modal.active').removeClass('active');
17	} else {
18		$('#product-sticky').removeClass('stuck');
19		$('#product-sticky .retailer-modal.active').removeClass('active');
20	}
21}
22
23function back_to_top_mobile() {
24	var wndw = $(window),
25		body = $('body').height();
26	
27	/*
28	If the page has scrolled further than 65% of the total page:
29	#btt-mobile section receives 'visible' class
30	*/
31	if ( wndw.scrollTop() >= body*0.7 ) {
32		$('#btt-mobile').addClass('visible');
33	} else {
34		$('#btt-mobile').removeClass('visible');
35	}
36}
37
38function product_hero() {
39	/*
40	Fits the product name in the hero area to full width
41	*/
42	$('.ph-content .big-text.ph-title').textfill({
43		maxFontPixels: 0,
44		success: function() {
45			product_hero_resize();
46		},
47	});
48}
49
50function product_hero_resize() {
51	/*
52	Calculate positioning for elements in hero area; use after product_hero()
53	*/
54	var heroTitle = $('.ph-content .big-text.ph-title'),
55		heroTitleHeight = $(heroTitle).height();
56		heroSpan = $('.ph-content .big-text.ph-title span'),
57		heroSpanHeight = $(heroSpan).height(),
58		colourTitle = $('.ph-content .product-colour-title'),
59		heroBlurb = $('.ph-content .ph-c-blurb');
60		
61	var heroSpanTop = (heroTitleHeight-heroSpanHeight)*0.333;
62	var heroSpanText = heroSpan.html();
63	
64	$(heroSpan).css({'top': heroSpanTop+'px'});
65	$(colourTitle).css({'top': heroSpanHeight+heroSpanTop+'px', 'opacity': '1'});
66	
67	if( isNotebookWidth() ) {
68		$(heroBlurb).css({'margin-top': ''});
69	} else {
70		if( /[gjpqy]+/.test(heroSpanText) ) {
71			$(heroBlurb).css({'margin-top': '-'+((heroTitleHeight-heroSpanHeight)*0.5)+'px'});
72		} else if( /[Q]+/.test(heroSpanText) ) {
73			$(heroBlurb).css({'margin-top': '-'+((heroTitleHeight-heroSpanHeight)*0.61)+'px'});
74		} else {
75			$(heroBlurb).css({'margin-top': '-'+((heroTitleHeight-heroSpanHeight)*0.666)+'px'});
76		}
77	}
78	
79	$('.ph-content .big-text.ph-title, .ph-content .ph-c-blurb, .ph-c-swatch-container, .ph-c-price, .ph-c-promo-price, .pal-compatible').css('opacity', '1');
80}
81
82function product_hero_scroll() {
83	/*
84	Adds a slight paralax effect to the product name text in the hero area
85	*/
86	var scroll = $(window).scrollTop(),
87		slickNav = $('#slicknav-container').height(),
88		heroImage = $('.ph-content .hero-image'),
89		heroSpan = $('.ph-content .big-text.ph-title span'),
90		colourTitle = $('.ph-content .product-colour-title');
91	
92	if ( scroll > slickNav ) {
93		$(heroImage).css('margin-top', '-'+((scroll-slickNav)*0.10)+'px');
94		//$(heroSpan).css('margin-top', ((scroll-slickNav)*0.15)+'px');
95		//$(colourTitle).css('margin-top', ((scroll-slickNav)*0.15)+'px');
96	} else {
97		$(heroImage).css('margin-top', '');
98		//$(heroSpan).css('margin-top', '');
99		//$(colourTitle).css('margin-top', '');
100	}
101}
102
103function update_hero(thisSwatchItem) {
104	/*
105	Change hero area content dependant on chosen swatch item
106	*/
107	var color = $(thisSwatchItem).data('color'),
108		swatch = $('.swatch-item[data-color='+color+']'),
109		vRetailers = $('.variation-retailers[data-color='+color+']'),
110		pRetailers = $('.product-retailers[data-color='+color+']'),
111		product = $('.ph-c-image-container[data-color='+color+']');
112		
113	$('.ph-c-image-container.current, .swatch-item.current, .variation-retailers.current, .product-retailers.current').removeClass('current');
114	$(swatch).addClass('current');
115	$(vRetailers).addClass('current');
116	$(pRetailers).addClass('current');
117	$(product).addClass('current');
118}
119
120function ph_title_break() {
121	/*
122	Replace space with <br> when on mobile to break product name onto two lines
123	*/
124	if( isMobileWidth() ) {
125		$('.ph-content .big-text.ph-title span').each(function(){
126			if ( $(this).html().toLowerCase().indexOf('<br>') === -1 ) {
127				var text = $(this).html().replace(' ','<br>');
128				$(this).html( text );
129			};
130		});
131	} else {
132		$('.ph-content .big-text.ph-title span').each(function(){
133			var text = $(this).html().replace('<br>',' ');
134			$(this).html( text );
135		});
136	}
137}
138
139function ph_content_height() {
140	/*
141	Dynamic hero area content height on mobile device width
142	*/
143	var heroImgHeight = $('.ph-content .hero-image').height(),
144		heroContent = $('.ph-content .ph-c-wrap');
145		
146	if( isMobileWidth() ) {
147		$(heroContent).css('height', (heroImgHeight+30)+'px');
148	} else {
149		$(heroContent).css('height', '');
150	}
151}
152
153function parallaxX() {
154	/*
155	Feature section 'parallax' effect
156	*/
157	var scroll = $(window).scrollTop(),
158		windowHeight = $(window).height();
159	
160	$('.feature-section-x').each(function(){
161		var fxTitle = $(this).find('.fx-title'),
162			fxImage = $(this).find('.fx-image'),
163			fxTitleHeight = $(fxTitle).outerHeight(),
164			fximageHeight = $(fxImage).outerHeight(),
165			imageContainer = $(this).find('.fx-image-container'),
166			containerTop = $(imageContainer).offset().top;
167		
168		if ( scroll+windowHeight >= containerTop+fxTitleHeight ) {
169			var adjustment = 0, multiplier = 0.6;
170			if( isMobileWidth() ) { adjustment = fximageHeight;	multiplier = 0.3 }
171			
172			if ( scroll+windowHeight <= containerTop+fxTitleHeight+fximageHeight+adjustment ) {
173				margin = Math.round(((scroll+windowHeight)-(containerTop+fxTitleHeight))*multiplier);
174				$(fxTitle).css('margin-bottom', '-'+margin+'px');
175			} else {
176				margin = Math.round(fximageHeight*0.6);
177				$(fxTitle).css('margin-bottom', '-'+margin+'px');
178			};
179		} else {
180			$(fxTitle).css('margin-bottom', '');
181		};
182	});
183}
184
185$(window).on('load resize scroll', function() {
186	parallaxX();
187});
188
189$(window).on('load resize', function() {
190	$('.feature-section-x .fx-title').each(function(){
191		$(this).css('height', 'auto');
192		$(this).css('height', Math.round($(this).outerHeight())+'px');
193	});
194});
195
196function filmPrint() {
197	/*
198	Give the film section title a 'printing' animation
199	*/
200	var scroll = $(window).scrollTop(),
201		windowHeight = $(window).height();
202	
203	$('.film-section').each(function(){
204		var filmTitle = $(this).find('.film-title'),
205			filmTitleHeight = $(filmTitle).outerHeight(),
206			filmTitleTop = $(filmTitle).offset().top,
207			bigText = $(filmTitle).find('.big-text');
208			
209		if ( scroll+windowHeight >= filmTitleTop+filmTitleHeight ) {
210			$(bigText).addClass('print');
211		} else {
212			$(bigText).removeClass('print');
213		};
214	});
215}
216$(window).on('load resize scroll', function() {
217	filmPrint();
218});
219
220function featuresBoxed() {
221	$('.features-boxed__image-wrap').each(function() {
222		var imagePos = $(this).offset().top
223		  , imageHeight = $(this).outerHeight()
224		  , windowTop = $(window).scrollTop()
225		  , windowHeight = $(window).height();
226
227		if (windowTop + windowHeight > imagePos + (imageHeight * 0.5)) {
228			$(this).addClass('fade-active');
229		}
230	});
231}
232
233/*
234Trigger functions
235*/
236$(document).ready(function() {
237    $('#product-hero .current .hero-image').on('load', function() {
238        ph_content_height();
239		ph_title_break();
240		// product_hero();
241    }).each(function() {
242		if(this.complete) $(this).trigger('load');
243	});
244});
245
246$(window).on('load', function() {
247	product_sticky();
248	back_to_top_mobile();
249	product_hero();
250	featuresBoxed();
251});
252
253var winWidth = $(window).width();
254
255$(window).on('resize', function() {
256	ph_content_height();
257	ph_title_break();
258	featuresBoxed();
259	/*
260	Only trigger these functions if the width changes
261	*/
262	if ( $(this).width() !== winWidth ) {
263		winWidth = $(this).width();
264		product_hero();
265	};
266});
267
268$(window).on('scroll', function() {
269	product_sticky();
270	back_to_top_mobile();
271	product_hero_scroll();
272	featuresBoxed();
273});
274
275$('.swatch-item').on('click keypress', function(e){

276	if (e.type != "keypress" || e.keyCode == 13) {
277		update_hero($(this));
278	}
279});
280
281$('#btt-bar, #btt-mobile').on('click', function(){
282	$(window).scrollTop(0);
283});
284
285$('.ss-expand').on('click', function() {
286	$(this).next('.ss-categories').slideToggle();
287	$(this).toggleClass('opened');
288});
289
290/*
291Retailer modal functions
292*/
293
294$('.header-button.buy').on('click keypress', function(e){
295	/*
296	Toggle visibility of retailer modal
297	*/
298	e.stopPropagation();
299	if (e.type != "keypress" || e.keyCode == 13) {
300		var modal = $(this).next('.retailer-modal');
301		$(modal).toggleClass('active');
302	}
303});
304
305$('body').on('click', function(){
306	$('.retailer-modal.active').removeClass('active');
307});
308
309$('.retailer-modal').on('click', function(e){
310   e.stopPropagation();
311});