https://whiteblock.org/js/block/gallery_touchslider.1731456694.js

1/*
2
3	type	:	gallery
4	type2	:	premium
5	mode	:	 
6	feature	:	
7	overlap	:	0
8	folder	:	800
9	name	:	pGallery01
10
11	<input class="gjs" type="hidden" data-js="touchslider" data-js-code="1" data-js-selector=".ts-row">
12*/
13const Touchslider1_MathUtils = {
14	lineEq: (y2, y1, x2, x1, currentVal) => {
15		// y = mx + b 
16		var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
17		return m * currentVal + b;
18	},
19	lerp: (a, b, n) => (1 - n) * a + n * b,
20	getRandomFloat: (min, max) => (Math.random() * (max - min) + min).toFixed(2)
21};
22
23let Touchslider1 = class {
24	constructor(gTarget) { this.gjs_load(gTarget); }
25	gjs_check(gTarget) {
26        if($(gTarget).closest('.reorderBlock').length > 0)  elDefaultClass = 'reorderBlock';
27        else elDefaultClass = (isELVIEW) ? 'el_viewblock' : 'element';
28
29		if( !$(gTarget).closest('.'+elDefaultClass).find('input.gjs').length ||
30			$(gTarget).closest('.'+elDefaultClass).find('.gjs[data-js="touchslider"][data-js-code="1"][data-js-selector]').length == 0 
31		) return false;
32		else return true;
33	}
34	gjs_load(gTarget) {
35		if(this.gjs_check(gTarget) === false) return false;
36
37		this.winsize;
38
39		var w = 0, h = 0;
40		if(typeof window.innerWidth == 'number') {
41			//Non-IE
42			w = window.innerWidth;
43			h = window.innerHeight;
44		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
45			//IE 6+ in 'standards compliant mode'
46			w = document.documentElement.clientWidth;
47			h = document.documentElement.clientHeight;
48		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
49			//IE 4 compatible
50			w = document.body.clientWidth;
51			h = document.body.clientHeight;
52		}
53
54		if (document.querySelector('.dsgn-body').classList.contains('sidebar')) w -= 260;
55
56		this.DOM = { el: gTarget };
57		this.DOM.elname = $(gTarget).closest('.'+elDefaultClass).attr('data-name');
58
59		var gseq = $(gTarget).closest('.'+elDefaultClass).attr('data-id'),
60			drag_position = 0;
61
62		if(typeof gseq != 'undefined') {
63			var tmpEL = $(gTarget).closest('.'+elDefaultClass).clone();
64
65			var gactiveslider = (typeof $.cookie('gallery-touchslider1-' + gseq) != 'undefined') ? $.cookie('gallery-touchslider1-' + gseq) : null;
66			if(gactiveslider !== null) {
67				drag_position = Number(gactiveslider);
68				setLoadmoreGalleryJS('touchslider1',gseq,false);
69            } else {
70				$(tmpEL).find('.draggable').removeAttr('style');
71            }
72
73			$(gTarget).closest('.'+elDefaultClass).after(tmpEL).show();
74			$(gTarget).closest('.'+elDefaultClass).remove();
75			var g_name = $('.'+this.DOM.elname).attr('data-name'),
76				selector = $('.'+this.DOM.elname).find('.gjs').attr('data-js-selector');
77
78			this.DOM.el = document.querySelector('.'+g_name+' '+selector);
79		}
80
81		const calcWinsize = () => this.winsize = {width: w, height: h};
82		calcWinsize();
83		window.addEventListener('resize', calcWinsize);
84
85		this.mousepos = {x: this.winsize.width/2, y: this.winsize.height/2};
86		window.addEventListener('mousemove', ev => this.mousepos = this.getMousePos(ev));
87
88		this.DOM.slider = this.DOM.el.querySelector('.slider');
89		this.items = [];
90		[...this.DOM.slider.querySelectorAll('.grid')].forEach(item => this.items.push(new Touchslider1_Item(item)));
91
92
93		// The draggable container
94		this.DOM.draggable = this.DOM.el.querySelector('.draggable');
95		// The width of the draggable container (also the slider container)
96		this.draggableWidth = this.DOM.draggable.offsetWidth;
97		// The total amount that we can drag the draggable container, so that both the first and last image stay next to the viewport boundary (left and right respectively)
98		this.maxDrag = this.draggableWidth < this.winsize.width ? 0 : this.draggableWidth - this.winsize.width;
99
100		if(drag_position > this.maxDrag) drag_position = this.maxDrag;
101		if(drag_position < -1 * this.maxDrag) drag_position = -1 * this.maxDrag;
102
103		// The current amount (in pixels) that was dragged
104		this.dragPosition = drag_position;
105
106		// Initialize the Draggabilly
107		this.draggie = new Draggabilly(this.DOM.draggable, { axis: 'x' });
108
109		this.init();
110		this.initEvents();
111	}
112    gjs_destroy() {
113        if(typeof this.DOM == 'undefined') return false;

114
115		$(this.DOM.el).find('.draggable, .slider[data-loop="true"]').removeAttr('style');
116        if(typeof this.draggie != 'undefined') this.draggie.destroy();
117    }
118	getMousePos(e) {
119		let posx = 0;
120		let posy = 0;
121		if (!e) e = window.event;
122		if (e.pageX || e.pageY) {
123			posx = e.pageX;
124			posy = e.pageY;
125		}
126		else if (e.clientX || e.clientY) 	{
127			posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
128			posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
129		}
130		return { x : posx, y : posy }
131	}
132	init() {
133		this.renderedStyles = {
134			position: {previous: this.dragPosition, current: this.dragPosition},
135			scale: {previous: 1, current: 1},
136			imgScale: {previous: 1, current: 1},
137			opacity: {previous: 1, current: 1},
138		};
139
140		this.render = () => {
141			this.renderId = undefined;
142
143			for (const key in this.renderedStyles ) {
144				this.renderedStyles[key].previous = Touchslider1_MathUtils.lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, 0.1);
145			}
146
147			TweenMax.set(this.DOM.slider, {x: this.renderedStyles.position.previous});
148			for (const item of this.items) {
149				TweenMax.set(item.DOM.el, {scale: this.renderedStyles.scale.previous, opacity: this.renderedStyles.opacity.previous});
150				TweenMax.set(item.DOM.image, {scale: this.renderedStyles.imgScale.previous});
151			}
152
153			if ( !this.renderId ) {
154				this.renderId = requestAnimationFrame(() => this.render());  
155			}
156		};
157		this.renderId = requestAnimationFrame(() => this.render());
158	}
159	initEvents() {
160		this.onDragStart = (e) => {
161			// console.log('onDragStart');
162			// if($(this.DOM.slider).is('.empty')) console.log('.empty');
163
164			this.renderedStyles.scale.current = 0.8;
165			this.renderedStyles.imgScale.current = 1.6;
166			this.renderedStyles.opacity.current = 0.3;
167		};
168
169		this.onDragMove = (event, pointer, moveVector) => {
170			// console.log('onDragMove');
171			// if($(this.DOM.slider).is('.empty')) console.log('.empty');
172
173			// The possible range for the drag is draggie.position.x = [-maxDrag,0 ]
174			if ( this.draggie.position.x >= 0 ) {
175				// the max we will be able to drag is winsize.width/2
176				this.dragPosition = Touchslider1_MathUtils.lineEq(0.5*this.winsize.width,0, this.winsize.width, 0, this.draggie.position.x);
177			}
178			else if ( this.draggie.position.x < -1*this.maxDrag ) {
179				// the max we will be able to drag is winsize.width/2
180				this.dragPosition = Touchslider1_MathUtils.lineEq(0.5*this.winsize.width,0, this.maxDrag+this.winsize.width, this.maxDrag, this.draggie.position.x);
181			}
182			else {
183				this.dragPosition = this.draggie.position.x;
184			}
185			this.renderedStyles.position.current = this.dragPosition;
186
187			this.mousepos = this.getMousePos(event);
188		};
189
190		this.onDragEnd = (e) => {
191			// console.log('onDragEnd');
192			// if($(this.DOM.slider).is('.empty')) console.log('.empty');
193
194			// reset draggable if out of bounds.
195			if ( this.draggie.position.x > 0 ) {
196				this.dragPosition = 0;
197				this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
198			}
199			else if ( this.draggie.position.x < -1*this.maxDrag ) {
200				this.dragPosition = -1*this.maxDrag;
201				this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
202			}
203			this.renderedStyles.position.current = this.dragPosition;
204			this.renderedStyles.scale.current = 1;
205			this.renderedStyles.imgScale.current = 1;
206			this.renderedStyles.opacity.current = 1;
207		};
208
209		this.draggie.on('pointerDown', this.onDragStart);
210		this.draggie.on('dragMove', this.onDragMove);
211		this.draggie.on('pointerUp', this.onDragEnd);
212
213		window.addEventListener('resize', (e) => {
214			// console.log('resize');
215			// if($(this.DOM.slider).is('.empty')) console.log('.empty');
216
217			this.maxDrag = this.draggableWidth < this.winsize.width ? 0 : this.draggableWidth - this.winsize.width;
218			if ( Math.abs(this.dragPosition) + this.winsize.width > this.draggableWidth ) {
219				const diff = Math.abs(this.dragPosition) + this.winsize.width - this.draggableWidth;
220				// reset dragPosition
221				this.dragPosition = this.dragPosition+diff;
222				this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
223			}
224		});
225	}
226};
227
228let Touchslider1_Item = class {
229	constructor(gItem) {
230		if( !$(gItem).closest('.'+elDefaultClass).find('input.gjs').length ||
231			$(gItem).closest('.'+elDefaultClass).find('.gjs[data-js="touchslider"][data-js-code="1"][data-js-selector]').length == 0
232		) return false;

233
234		this.DOM = { el: gItem };
235		this.DOM.image = this.DOM.el.querySelector('.g-img');
236		this.DOM.title = this.DOM.el.querySelector('h5.figure');
237		this.DOM.caption = this.DOM.el.querySelector('p.figure.caption');
238		this.DOM.comment = this.DOM.el.querySelector('.figure.comment');
239		// this.DOM.brand = this.DOM.el.querySelector('.figure.brand');
240		this.DOM.price = this.DOM.el.querySelector('.figure.price');
241		this.DOM.review = this.DOM.el.querySelector('.figure.review');
242	}
243};