https://theatreduvesinet.fr/wp-content/plugins/o3digital_grid/public/js/o3digital_grid-public.js?ver=1.0.0

1(function( $ ) {
2	'use strict';
3
4	/**
5	 * All of the code for your public-facing JavaScript source
6	 * should reside in this file.
7	 *
8	 * Note: It has been assumed you will write jQuery code here, so the
9	 * $ function reference has been prepared for usage within the scope
10	 * of this function.
11	 *
12	 * This enables you to define handlers, for when the DOM is ready:
13	 *
14	 * $(function() {
15	 *
16	 * });
17	 *
18	 * When the window is loaded:
19	 *
20	 * $( window ).load(function() {
21	 *
22	 * });
23	 *
24	 * ...and/or other possibilities.
25	 *
26	 * Ideally, it is not considered best practise to attach more than a
27	 * single DOM-ready or window-load handler for a particular page.
28	 * Although scripts in the WordPress core, Plugins and Themes may be
29	 * practising this, we should strive to set a better example in our own work.
30	 */
31	var Shuffle = window.Shuffle;
32	var Grid = function (element) {
33		this.months = Array.from(document.querySelectorAll('.shuffle_calendar_filter button'));
34		this.categories = Array.from(document.querySelectorAll('.shuffle_filter button'));
35		
36		this.shuffle = new Shuffle(element, {
37		  	  	sizer: '.my-sizer-element',
38			  	isCentered: false,
39				initialSort: "date-event",
40				gutterWidth: "100px", 
41		  });
42		
43		this.filters = {
44			months: [],
45		    categories: [],
46		};
47		
48		this._bindEventListeners();
49		
50	};
51		
52	/**
53	 * Bind event listeners for when the filters change.
54	 */
55	Grid.prototype._bindEventListeners = function () {
56		this._onMonthChange = this._handleMonthChange.bind(this);
57	  	this._onCategoryChange = this._handleCategoryChange.bind(this);
58	
59	  	this.months.forEach(function (button) {
60	    	button.addEventListener('click', this._onMonthChange);
61	  	}, this);
62		
63	
64	  	this.categories.forEach(function (button) {
65	    	button.addEventListener('click', this._onCategoryChange);
66	  	}, this);
67	};
68		
69	/**
70	 * Get the values of each checked input.
71	 * @return {Array.<string>}
72	 */
73	Grid.prototype._getCurrentMonthFilters = function () {
74		
75		return this.months.filter(function (button) {
76			return button.classList.contains('shuffle_calendar_filter_active');
77		}).map(function (button) {
78			return button.getAttribute('data-group');
79		});
80	};
81		
82	/**
83	 * Get the values of each `active` button.
84	 * @return {Array.<string>}
85	*/
86	Grid.prototype._getCurrentCategoryFilters = function () {
87		return this.categories.filter(function (button) {
88			return button.classList.contains('shuffle_filter_active');
89		}).map(function (button) {
90			return button.getAttribute('data-group');
91		});
92	};
93		
94	/**
95	 * A shape input check state changed, update the current filters and filte.r
96	*/
97	Grid.prototype._handleMonthChange = function (evt) {
98		
99		var button = evt.currentTarget;
100		// Treat these buttons like radio buttons where only 1 can be selected.
101		if (button.classList.contains('shuffle_calendar_filter_active')) {
102			button.classList.remove('shuffle_calendar_filter_active');
103		} else {
104			this.months.forEach(function (btn) {
105		    	btn.classList.remove('shuffle_calendar_filter_active');
106		    });
107		
108		    button.classList.add('shuffle_calendar_filter_active');
109		}
110		
111		this.filters.months = this._getCurrentMonthFilters();
112		this.filter();
113	};
114		
115	/**
116	 * A category button was clicked. Update filters and display.
117	 * @param {Event} evt Click event object.
118	 */
119	Grid.prototype._handleCategoryChange = function (evt) {
120		var button = evt.currentTarget;
121		// Treat these buttons like radio buttons where only 1 can be selected.
122		if (button.classList.contains('shuffle_filter_active')) {
123			button.classList.remove('shuffle_filter_active');
124		} else {
125			this.categories.forEach(function (btn) {
126		    	btn.classList.remove('shuffle_filter_active');
127		    });
128		
129		    button.classList.add('shuffle_filter_active');
130		}
131		
132		this.filters.categories = this._getCurrentCategoryFilters();
133		this.filter();
134	};
135		
136	/**
137	* Filter shuffle based on the current state of filters.
138	*/
139	Grid.prototype.filter = function () {
140		if (this.hasActiveFilters()) {
141			this.shuffle.filter(this.itemPassesFilters.bind(this));
142		} else {
143			this.shuffle.filter(Shuffle.ALL_ITEMS);
144		}
145	};
146		
147	/**
148	 * If any of the arrays in the `filters` property have a length of more than zero,
149	 * that means there is an active filter.
150	 * @return {boolean}
151	 */
152	Grid.prototype.hasActiveFilters = function () {
153		return Object.keys(this.filters).some(function (key) {
154			return this.filters[key].length > 0;
155		}, this);
156	};
157		
158	/**
159	 * Determine whether an element passes the current filters.
160	 * @param {Element} element Element to test.
161	 * @return {boolean} Whether it satisfies all current filters.
162	 */
163	Grid.prototype.itemPassesFilters = function (element) {
164		var months = this.filters.months;
165		var categories = this.filters.categories;

166		var month = element.getAttribute('data-month');
167		var category = element.getAttribute('data-category');
168
169		// If there are active shape filters and this shape is not in that array.
170		if(month != null){
171			if (month.length > 0 && !month.includes(months)) {
172				return false;
173			}
174		}
175		// If there are active category filters and this category is not in that array.
176		if(category != null){		  
177			if (categories.length > 0 && !category.includes(categories) ) {
178		    	return false;
179		  	}
180		}
181		
182		return true;
183	};
184		
185	document.addEventListener('DOMContentLoaded', function () {
186		if(document.querySelector('.my_grid') !== null){
187			window.grid = new Grid(document.querySelector('.my_grid'));
188		}
189	});
190
191	function calendar(){
192		var container_width = $(".shuffle_calendar_filter_container").width();
193		var nb_display = Math.floor((container_width - 66)/120);
194		var center_width = nb_display*125;
195		$(".shuffle_calendar_filter_center").width(center_width);
196		
197		var max_offset = (12-nb_display) * 120 * (-1);
198				
199		$(".shuffle_calendar_filter_left").click(
200			function(){
201				var position = $(".shuffle_calendar_filter").position();
202				if(position.left < 0){
203					let offset = (position.left + 120)+"px";
204					$(".shuffle_calendar_filter").css("left", offset);
205				}	
206			}
207		);
208		$(".shuffle_calendar_filter_right").click(
209			function(){
210				var position = $(".shuffle_calendar_filter").position();
211				if(position.left > max_offset){
212					let offset = (position.left - 120)+"px";
213					$(".shuffle_calendar_filter").css("left", offset);
214				}	
215			}
216		);
217	}
218	$( window ).load(function() {		
219		$(".grid_item").hover(
220			function() {
221				$( this ).find(".grid_infos_hover").css("display", "flex");
222				//$( this ).find(".grid_infos").hide();
223				$( this ).find(".grid_infos").css("visibility", "hidden");
224			}, function() {
225				$( this ).find(".grid_infos_hover").hide();
226				//$( this ).find(".grid_infos").show();
227				$( this ).find(".grid_infos").css("visibility", "visible");
228			}
229		);
230		
231		
232		
233		calendar();
234		
235		$(".page-id-19 .page-title h1").click(
236			function() {
237				$(".shuffle_calendar_filter button").each(function( index ) {
238  					$( this ).removeClass("shuffle_calendar_filter_active");
239				});	
240				grid.shuffle.filter(Shuffle.ALL_ITEMS);
241			}
242		);
243		
244		$( window ).resize(function() {
245			console.log("resize");
246			$(".shuffle_calendar_filter").css("left", 0);
247			calendar();
248		});
249		
250	});	
251
252		
253		  		 
254	
255
256	
257
258})( jQuery );