https://www.pflanzenforschung.de/application/themes/plant/js/script.js

1$(window).load(function() {
2	
3	// first sync after loading > when all is rendered
4	startsyncing();
5	
6});
7$(document).ready(function() {
8
9
10	// auto grow on textareas
11	autoGrowTextAreas();
12	// count chars validator
13	CountCharsValidator();
14
15    
16	// tooltip
17	$('[data-toggle="tooltip"]').tooltip({
18		html: true /*,
19		title: function () { return $(this).find('toolhtml').html(); } */
20	});
21	
22	$(window).resize(function() {
23		startsyncing();
24	});
25	
26	$('.blueimp-gallery .description, .blueimp-gallery .slide .slide-content').click(function(e) {
27	    //e.preventDefault();
28	    var elemt = $(this).closest('.blueimp-gallery').find('.description');
29	    //console.log(elemt);
30	    if(!elemt.hasClass('off')) {
31		    elemt.attr('data-text', elemt.text());
32		    elemt.text('').addClass('off');
33	    }
34	    else {
35		    elemt.text( elemt.attr('data-text') ).removeClass('off');
36	    }
37	    
38    });
39    
40    /*$('.blueimp-gallery').click(function(e) {
41	    //console.log(e.toElement);
42	    var elt = $(this).find('.description');
43	    setTimeout(function(){
44		    //console.log(elt);
45		    if(elt.text()=='' && elt.hasClass('off')) {
46			    // fine
47		    }
48		    else if(elt.text()!='' && elt.hasClass('off')) {
49			    elt.removeClass('off');
50			}
51		}, 100);
52    });*/
53    
54    $(".main img.unveil-img").unveil(0, function() {
55		$(this).load(function() {
56			this.style.opacity = 1;
57		});
58	});
59	
60	$('a[href="#top"]').click(function() {
61	    $('html, body').animate({
62        	scrollTop:$('#top').offset().top-0
63	    },'slow');
64	    
65    });
66    var $topper = $('.topper');
67	var $win = $(window).scroll(function() {
68	    if($win.scrollTop() > 400) {
69	        if(!$topper.is(':visible')) {
70	            $topper.stop(true, true).fadeIn();
71	        }
72	    } else {
73	        if(!$topper.is(':animated')) {
74	            $topper.stop(true, true).fadeOut();
75	        }
76	    }
77	});
78    
79	
80	
81	
82	
83});
84
85// height sync
86// using: the class 'height-sync' always to the element with background-color
87function startsyncing() {
88	
89	// new build
90	if($('.height-sync').length) {
91		
92		// reset setted heights
93		//$('.height-sync .height-sync-target').css('height', 'auto');
94		
95		// mark the container (rows)
96		$('.row > .height-sync').each(function(key, val) {
97			// mark parent row
98			var row = $(this).closest('.row');
99			//console.log(row);
100			if(!row.hasClass('area-sync')) row.addClass('area-sync');
101		});
102	}
103}
104
105
106/**
107 * Calculate the masonry
108 *
109 * Calculate the average of heights of masonry-bricks and then
110 * set it as the height of the masonry element.
111 *
112 * @since 12212018
113 * @author Rahul Arora
114 * @param grid			 Object	The Masonry Element 
115 * @param gridCell	 Object	The Masonry bricks
116 * @param gridGutter Integer The Vertical Space between bricks 
117 * @param dGridCol	 Integer Number of columns on big screens
118 * @param tGridCol	 Integer Number of columns on medium-sized screens
119 * @param mGridCol	 Integer Number of columns on small screens
120 */
121function masonry(grid, gridCell, gridGutter, cols_lg, cols_md, cols_sm, cols_xs, cols_xxs) {
122	var g = document.querySelector(grid),
123		gc = document.querySelectorAll(gridCell),
124		gcLength = gc.length, // Total number of cells in the masonry
125		gHeight = 0, // Initial height of our masonry
126		i; // Loop counter
127		
128		//console.log(gcLength);
129	
130	// Calculate the net height of all the cells in the masonry
131	for(i=0; i<gcLength; ++i) {
132		gHeight+=gc[i].offsetHeight+parseInt(gridGutter);
133		// show height
134		//$(gc[i]).find('h3').text(gHeight);
135		//console.log(gc[i]);
136	}
137	
138	/*
139	 * Calculate and set the masonry height based on the columns
140	 * provided for big, medium, and small screen devices.
141	 */
142	var w_w = window.innerWidth;
143	 
144	if(w_w >= 1200) {
145		g.style.height = gHeight/cols_lg + (gHeight/(gcLength+1) / 2) + 80 + "px"; // Toddy +80
146	} 
147	else if(w_w < 1200 && w_w >= 992) {
148		g.style.height = gHeight/cols_md + (gHeight/(gcLength+1) / 2) + 80 + "px"; // Toddy +80
149	}
150	else if(w_w < 992 && w_w >= 768) {
151		g.style.height = gHeight/cols_sm + (gHeight/(gcLength+1) / 2) + "px";
152	}
153	else if(w_w < 768 && w_w >= 481) {
154		g.style.height = gHeight/cols_xs + (gHeight/(gcLength+1) / 2) + "px";
155	}
156	else {
157		g.style.height = gHeight/cols_xxs + gHeight/(gcLength+1) + "px";
158	}
159}
160
161/**
162 * Reform the masonry
163 *
164 * Rebuild the masonry grid on every resize and load event after making sure 
165 * all the images in the grid are completely loaded.
166 */
167
168if($('.masonry').length) {
169
170	["resize", "load"].forEach(function(event) {
171		// Follow below steps every time the window is loaded or resized
172		window.addEventListener(event, function() {
173			
174			// Check if all the images finished loading
175			//imagesLoaded( document.querySelector('.masonry'), function() {
176				/*
177				 * A maonsry grid with 8px gutter, with 3 columns on desktop,
178				 * 2 on tablet, and 1 column on mobile devices.
179				 */
180				masonry(".masonry", ".masonry-brick", 8, 4, 4, 3, 2, 1);
181				
182				setTimeout(function() {
183					masonry(".masonry", ".masonry-brick", 8, 4, 4, 3, 2, 1);
184				}, 1000);
185			//});
186		});
187	});
188
189}
190
191/**
192 * auto grow function for text-areas with wrappers (".grow-textarea")
193 */
194function autoGrowTextAreas () {
195	try {
196		const growers = document.querySelectorAll(".grow-textarea");

197		if (growers) {
198			growers.forEach((grower) => {
199				const textarea = grower.querySelector("textarea");
200				textarea.addEventListener("input", autosize);
201			});
202		}
203		function autosize(){
204			let el = this;
205			setTimeout(function(){
206				el.style.height = 'auto';
207				//el.style.cssText = 'height:auto; padding:0; ';
208				//el.style.cssText = 'height:auto; padding:0; transition: height ease 1s;';
209				let scroll_height = parseInt(el.scrollHeight) + 22;
210				el.style.height = scroll_height + 'px';
211				//el.style.cssText = 'height:' + scroll_height + 'px; min-height:35px;';
212			},0);
213		}
214	} catch (e) {
215		console.log('%c grow-textarea: oops... something went wrong','color: pink', e);
216	}
217}
218
219
220/** CountCharsValidator
221 * __cc_label
222 * __cc_display_chars
223 * __cc_textarea_wrapper textarea
224 *
225 */
226function CountCharsValidator () {
227	try {
228		// run through all classes (.count-chars-wrapper)
229		// and pick label, display_chars and textarea with correct classname
230		// if all exists create new ccv object
231		const all_count_chars = document.querySelectorAll('.count-chars-wrapper');
232		if (all_count_chars) {
233			all_count_chars.forEach((count_char) => {
234				let label = count_char.querySelector(".__cc_label");
235				let display_chars = count_char.querySelector(".__cc_display_chars");
236				let ta = count_char.querySelector(".__cc_textarea_wrapper textarea");
237				if(label && ta && display_chars)
238					new Count_chars_validator(ta, label, display_chars, "text-red");
239			});
240		}
241	} catch (e) {
242		console.log('%c CountCharsValidator: oops... something went wrong','color: pink', e);
243	}
244
245}