HImageCarousel [1034425]

// also supports youtube, which we could remove
// from https://codepen.io/pierrinho/pen/vNLGMa
sclass HImageCarousel {
  new L<Slide> slides;
  
  record Slide(S imgIDOrURL, S html) {
    S html() { ret html; }
    
    *(S *imgIDOrURL, S title, S text) {
      html = htmlCombine_new(
        h2(title),
        p(text));
    }
  }
  
  S jsLibs() {
    ret hjs("https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js")
      + hjs("https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js")
      + hjs("https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js");
  }
  
  JS js() { ret JS(mlsUnindent([[
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        playerVars: { 'rel': 0, 'autoplay': 1, 'controls': 0,'autohide':1,'showinfo': 0, 'wmode':'opaque' },
        videoId: 'QjlFqgRbICY',
        //suggestedQuality: 'hd720',
        events: {
          'onReady': onPlayerReady}
      });
    }
    
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      event.target.mute();
      event.target.setPlaybackQuality('hd720');
      //$(".video").fitVids();
      
      $('.video i').on('click',function() {
        if ($('.video').hasClass('on')) {
          event.target.mute();
          $('.video').removeClass('on');
        } else {
          event.target.unMute();
          $('.video').addClass('on');
        }
      });
      
    }
    
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.BUFFERING) {
            event.target.setPlaybackQuality('hd720');
        }
    }
    
    $(document).ready(function() {
      
      var time = 7; // time in seconds
    
      var $progressBar,
          $bar, 
          $elem, 
          isPause, 
          tick,
          percentTime;
    
      //Init the carousel
      $("#owl-example").owlCarousel({
        items: 1,
        slideSpeed : 500,
        paginationSpeed : 500,
        singleItem : true,
        afterInit: progressBar,
        afterMove : moved,
        startDragging : pauseOnDragging
      });
    
      //Init progressBar where elem is $("#owl-demo")
      function progressBar(elem){
    
        $elem = elem;
        // building playing slideshow
        buildButtons();
        
        $('.columns:last-child').on('click',function() {
          if ($('#owl-example .slide-' + $(this).data('slide')).hasClass('open')) {
            //isPause = false;
            $('#owl-example .slide-' + $(this).data('slide')).removeClass('open');
          } else {
            //isPause = true;
            $('#owl-example .slide-' + $(this).data('slide')).addClass('open');
          }
        });
          
        $('.fa-pause').on('click',function() {
          isPause = false;
          $(this).fadeOut(0);
          $('.fa-play').fadeIn();
        });
        
        $('.fa-play').on('click',function() {
          isPause = true;
          $(this).fadeOut(0);
          $('.fa-pause').fadeIn();
        });
        
        setTimeout(function(){
          $('.slide-1 .columns:last-child').trigger('click');
        }, 1000); 
        
        //build progress bar elements
        buildProgressBar();
        //start counting
        start();
      }
    
      //create div#progressBar and div#bar then prepend to $("#owl-demo")
      function buildProgressBar(){
        $progressBar = $("<div>",{
          id:"progressBar"
        });
        $bar = $("<div>",{
          id:"bar"
        });
        $progressBar.append($bar).prependTo($elem);
      }
      
      function buildButtons() {
        $buttonPause = $("<i>",{
          class:"fa fa-pause"
        });
        $buttonPlay = $("<i>",{
          class:"fa fa-play"
        });
        $buttonPause.prependTo($elem);
        $buttonPlay.prependTo($elem);
      }
    
      function start() {  
        //reset timer
        percentTime = 0;
        isPause = false;
        //run interval every 0.01 second
        tick = setInterval(interval, 10);
      };
    
      function interval() {
        if(isPause === false){
          percentTime += 1 / time;
          $bar.css({
            width: percentTime+"%"
          });
          //if percentTime is equal or greater than 100
          if(percentTime >= 100){
            //slide to next item 
            $elem.trigger('owl.next')
          }
        }
      }
    
      //pause while dragging 
      function pauseOnDragging(){
        isPause = true;
      }
    
      //moved callback
      function moved(){
        
        if (isPause == false) {
          //clear interval
          clearTimeout(tick);
          //start again
          start();
          //player.pauseVideo();
        }
        
      }
    
      //uncomment this to make pause on mouseover 
      // $elem.on('mouseover',function(){
      //   isPause = true;
      // })
      // $elem.on('mouseout',function(){
      //   isPause = false;
      // })
         
    });
  ]])); }
  
  CSS css() { ret CSS(mlsUnindent([[
    #bar {
      width: 0%;
      max-width: 100%;
      height: 6px;
      background-color: #F9DC09;
    }
    
    #progressBar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      background-color: white;
      z-index: 1;
    }
    
    .fa-play,
    .fa-pause {
      position: absolute;
      bottom: 3px;
      left: 0;
      padding: 20px;
      cursor: pointer;
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.6);
      z-index: 100;
    }
    .fa-play:hover,
    .fa-pause:hover {
      color: white;
    }
    
    .fa-pause {
      display: none;
    }
    
    .owl-carousel {
      position: relative;
      margin: 0 auto;
      padding: 0;
      border: 0;
      height: 100vh;
      overflow: hidden;
    }
    .owl-carousel .slide {
      position: relative;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    /*.owl-carousel .slide img {
      width: 100%;
    }*/
    .owl-carousel .slide .video i {
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
      cursor: pointer;
      font-size: 3rem;
      color: rgba(255, 255, 255, 0.6);
      z-index: 100;
    }
    .owl-carousel .slide .video i.fa-volume-off {
      display: block;
    }
    .owl-carousel .slide .video i.fa-volume-up {
      display: none;
    }
    .owl-carousel .slide .video i:hover {
      color: white;
    }
    .owl-carousel .slide .video.on i.fa-volume-off {
      display: none;
    }
    .owl-carousel .slide .video.on i.fa-volume-up {
      display: block;
    }
    .owl-carousel .slide .row {
      position: relative;
      max-width: 100%;
      width: 100%;
    }
    .owl-carousel .slide .row .columns {
      padding: 0;
    }
    .owl-carousel .slide .row .columns:first-child {
      width: 97%;
      -moz-transition-property: all;
      -o-transition-property: all;
      -webkit-transition-property: all;
      transition-property: all;
      -moz-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -moz-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      -webkit-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
    }
    .owl-carousel .slide .row .columns:last-child {
      position: absolute;
      top: 0;
      left: 97%;
      overflow: hidden;
      float: none;
      height: 100%;
      padding: 60px;
      background-color: white;
      -moz-transition-property: all;
      -o-transition-property: all;
      -webkit-transition-property: all;
      transition-property: all;
      -moz-transition-duration: 0.3s;
      -o-transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -moz-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      -webkit-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
    }
    .owl-carousel .slide .row .columns:last-child i {
      position: absolute;
      display: block;
      top: 8px;
      left: 8px;
      cursor: pointer;
      padding: 10px;
    }
    .owl-carousel .slide .row .columns:last-child i.fa-times {
      display: none;
    }
    .owl-carousel .slide .row .columns:last-child i.fa-long-arrow-left {
      display: block;
    }
    .owl-carousel .slide.open .row .columns:first-child {
      width: 80%;
    }
    .owl-carousel .slide.open .row .columns:first-child.wrap-video {
      width: 97%;
    }
    .owl-carousel .slide.open .row .columns:last-child {
      width: 40%;
      left: 60%;
    }
    .owl-carousel .slide.open .row .columns:last-child i.fa-times {
      display: block;
    }
    .owl-carousel .slide.open .row .columns:last-child i.fa-long-arrow-left {
      display: none;
    }
    
    .owl-theme .owl-controls {
      position: absolute;
      left: 45px;
      bottom: 15px;
      text-align: left;
    }
    
    .owl-theme .owl-controls .owl-page span {
      background-color: white;
    }
    
    .fluid-width-video-wrapper {
      width: 100%;
      position: relative;
      padding: 0;
    }
    
    .fluid-width-video-wrapper iframe,
    .fluid-width-video-wrapper object,
    .fluid-width-video-wrapper embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  ]])); }
  
  S cssLibs() {
    ret hcss("https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css")
      + hcss("https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css")
      + hcss("https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css")
      + hcss("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css");
  }
  
  S headStuff() { ret htmlCombine_new(cssLibs(), css(), jsLibs(), js()); }
  
  S html() {
    new LS slidesHtml;
    
    for i over slides: {
      var slide = slides.get(i);
      int index = i+1;
      slidesHtml.add(
        div_inv(class := "slide slide-" + index + (index == 1 ? "" : " open"),
          div_inv(class :="row", htmlCombine_new(
            div_inv(class := "columns",
              himg(slide.imgIDOrURL)
            ),
            div_inv(class := "columns", "data-slide" := index, htmlCombine_new(
              fulltag i("", class := "fa fa-times"),
              fulltag i("", class := "fa fa-long-arrow-left"),
              slide.html()
            ))
          ))
      ));
    }
    
    ret div_inv(id := "owl-example", class := "owl-carousel",
      htmlCombine_new(slidesHtml));
  }
  
  void add aka addSlide(Slide slide) { slides.add(slide); }
}

Travelled to 4 computer(s): bhatertpkbcr, ekrmjmnbrukm, mowyntqkapby, mqqgnosmbjvj

Snippet ID:	#1034425
Snippet name:	HImageCarousel
Eternal ID of this version:	#1034425/14
Text MD5:	061c0257cd0dcd54153c564bb805d03f
Author:	stefan
Category:	javax / html
Type:	JavaX fragment (include)
Public (visible to everyone):	Yes
Archived (hidden from active list):	No
Created/modified:	2022-02-07 17:53:47
Source code size:	11601 bytes / 418 lines
Pitched / IR pitched:	No / No
Views / Downloads:	606 / 765
Version history:	13 change(s)
Referenced in:	[show references]

< > BotCompany Repo | #1034425 // HImageCarousel

JavaX fragment (include) [tags: use-pretranspiled]

1	// also supports youtube, which we could remove
2	// from https://codepen.io/pierrinho/pen/vNLGMa
3	sclass HImageCarousel {
4	new L<Slide> slides;
5
6	record Slide(S imgIDOrURL, S html) {
7	S html() { ret html; }
8
9	(S imgIDOrURL, S title, S text) {
10	html = htmlCombine_new(
11	h2(title),
12	p(text));
13	}
14	}
15
16	S jsLibs() {
17	ret hjs("https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js")
18	+ hjs("https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js")
19	+ hjs("https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js");
20	}
21
22	JS js() { ret JS(mlsUnindent([[
23	var tag = document.createElement('script');
24	tag.src = "https://www.youtube.com/player_api";
25	var firstScriptTag = document.getElementsByTagName('script')[0];
26	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
27
28	// 3. This function creates an <iframe> (and YouTube player)
29	// after the API code downloads.
30	var player;
31	function onYouTubePlayerAPIReady() {
32	player = new YT.Player('player', {
33	playerVars: { 'rel': 0, 'autoplay': 1, 'controls': 0,'autohide':1,'showinfo': 0, 'wmode':'opaque' },
34	videoId: 'QjlFqgRbICY',
35	//suggestedQuality: 'hd720',
36	events: {
37	'onReady': onPlayerReady}
38	});
39	}
40
41	// 4. The API will call this function when the video player is ready.
42	function onPlayerReady(event) {
43	event.target.mute();
44	event.target.setPlaybackQuality('hd720');
45	//$(".video").fitVids();
46
47	$('.video i').on('click',function() {
48	if ($('.video').hasClass('on')) {
49	event.target.mute();
50	$('.video').removeClass('on');
51	} else {
52	event.target.unMute();
53	$('.video').addClass('on');
54	}
55	});
56
57	}
58
59	function onPlayerStateChange(event) {
60	if (event.data == YT.PlayerState.BUFFERING) {
61	event.target.setPlaybackQuality('hd720');
62	}
63	}
64
65	$(document).ready(function() {
66
67	var time = 7; // time in seconds
68
69	var $progressBar,
70	$bar,
71	$elem,
72	isPause,
73	tick,
74	percentTime;
75
76	//Init the carousel
77	$("#owl-example").owlCarousel({
78	items: 1,
79	slideSpeed : 500,
80	paginationSpeed : 500,
81	singleItem : true,
82	afterInit: progressBar,
83	afterMove : moved,
84	startDragging : pauseOnDragging
85	});
86
87	//Init progressBar where elem is $("#owl-demo")
88	function progressBar(elem){
89
90	$elem = elem;
91	// building playing slideshow
92	buildButtons();
93
94	$('.columns:last-child').on('click',function() {
95	if ($('#owl-example .slide-' + $(this).data('slide')).hasClass('open')) {
96	//isPause = false;
97	$('#owl-example .slide-' + $(this).data('slide')).removeClass('open');
98	} else {
99	//isPause = true;
100	$('#owl-example .slide-' + $(this).data('slide')).addClass('open');
101	}
102	});
103
104	$('.fa-pause').on('click',function() {
105	isPause = false;
106	$(this).fadeOut(0);
107	$('.fa-play').fadeIn();
108	});
109
110	$('.fa-play').on('click',function() {
111	isPause = true;
112	$(this).fadeOut(0);
113	$('.fa-pause').fadeIn();
114	});
115
116	setTimeout(function(){
117	$('.slide-1 .columns:last-child').trigger('click');
118	}, 1000);
119
120	//build progress bar elements
121	buildProgressBar();
122	//start counting
123	start();
124	}
125
126	//create div#progressBar and div#bar then prepend to $("#owl-demo")
127	function buildProgressBar(){
128	$progressBar = $("<div>",{
129	id:"progressBar"
130	});
131	$bar = $("<div>",{
132	id:"bar"
133	});
134	$progressBar.append($bar).prependTo($elem);
135	}
136
137	function buildButtons() {
138	$buttonPause = $("<i>",{
139	class:"fa fa-pause"
140	});
141	$buttonPlay = $("<i>",{
142	class:"fa fa-play"
143	});
144	$buttonPause.prependTo($elem);
145	$buttonPlay.prependTo($elem);
146	}
147
148	function start() {
149	//reset timer
150	percentTime = 0;
151	isPause = false;
152	//run interval every 0.01 second
153	tick = setInterval(interval, 10);
154	};
155
156	function interval() {
157	if(isPause === false){
158	percentTime += 1 / time;
159	$bar.css({
160	width: percentTime+"%"
161	});
162	//if percentTime is equal or greater than 100
163	if(percentTime >= 100){
164	//slide to next item
165	$elem.trigger('owl.next')
166	}
167	}
168	}
169
170	//pause while dragging
171	function pauseOnDragging(){
172	isPause = true;
173	}
174
175	//moved callback
176	function moved(){
177
178	if (isPause == false) {
179	//clear interval
180	clearTimeout(tick);
181	//start again
182	start();
183	//player.pauseVideo();
184	}
185
186	}
187
188	//uncomment this to make pause on mouseover
189	// $elem.on('mouseover',function(){
190	// isPause = true;
191	// })
192	// $elem.on('mouseout',function(){
193	// isPause = false;
194	// })
195
196	});
197	]])); }
198
199	CSS css() { ret CSS(mlsUnindent([[
200	#bar {
201	width: 0%;
202	max-width: 100%;
203	height: 6px;
204	background-color: #F9DC09;
205	}
206
207	#progressBar {
208	position: absolute;
209	bottom: 0;
210	left: 0;
211	right: 0;
212	width: 100%;
213	background-color: white;
214	z-index: 1;
215	}
216
217	.fa-play,
218	.fa-pause {
219	position: absolute;
220	bottom: 3px;
221	left: 0;
222	padding: 20px;
223	cursor: pointer;
224	font-size: 1.2rem;
225	color: rgba(255, 255, 255, 0.6);
226	z-index: 100;
227	}
228	.fa-play:hover,
229	.fa-pause:hover {
230	color: white;
231	}
232
233	.fa-pause {
234	display: none;
235	}
236
237	.owl-carousel {
238	position: relative;
239	margin: 0 auto;
240	padding: 0;
241	border: 0;
242	height: 100vh;
243	overflow: hidden;
244	}
245	.owl-carousel .slide {
246	position: relative;
247	overflow: hidden;
248	padding: 0;
249	margin: 0;
250	}
251	/*.owl-carousel .slide img {
252	width: 100%;
253	}*/
254	.owl-carousel .slide .video i {
255	position: absolute;
256	top: 0;
257	left: 0;
258	padding: 20px;
259	cursor: pointer;
260	font-size: 3rem;
261	color: rgba(255, 255, 255, 0.6);
262	z-index: 100;
263	}
264	.owl-carousel .slide .video i.fa-volume-off {
265	display: block;
266	}
267	.owl-carousel .slide .video i.fa-volume-up {
268	display: none;
269	}
270	.owl-carousel .slide .video i:hover {
271	color: white;
272	}
273	.owl-carousel .slide .video.on i.fa-volume-off {
274	display: none;
275	}
276	.owl-carousel .slide .video.on i.fa-volume-up {
277	display: block;
278	}
279	.owl-carousel .slide .row {
280	position: relative;
281	max-width: 100%;
282	width: 100%;
283	}
284	.owl-carousel .slide .row .columns {
285	padding: 0;
286	}
287	.owl-carousel .slide .row .columns:first-child {
288	width: 97%;
289	-moz-transition-property: all;
290	-o-transition-property: all;
291	-webkit-transition-property: all;
292	transition-property: all;
293	-moz-transition-duration: 0.3s;
294	-o-transition-duration: 0.3s;
295	-webkit-transition-duration: 0.3s;
296	transition-duration: 0.3s;
297	-moz-transition-timing-function: ease-in-out;
298	-o-transition-timing-function: ease-in-out;
299	-webkit-transition-timing-function: ease-in-out;
300	transition-timing-function: ease-in-out;
301	}
302	.owl-carousel .slide .row .columns:last-child {
303	position: absolute;
304	top: 0;
305	left: 97%;
306	overflow: hidden;
307	float: none;
308	height: 100%;
309	padding: 60px;
310	background-color: white;
311	-moz-transition-property: all;
312	-o-transition-property: all;
313	-webkit-transition-property: all;
314	transition-property: all;
315	-moz-transition-duration: 0.3s;
316	-o-transition-duration: 0.3s;
317	-webkit-transition-duration: 0.3s;
318	transition-duration: 0.3s;
319	-moz-transition-timing-function: ease-in-out;
320	-o-transition-timing-function: ease-in-out;
321	-webkit-transition-timing-function: ease-in-out;
322	transition-timing-function: ease-in-out;
323	}
324	.owl-carousel .slide .row .columns:last-child i {
325	position: absolute;
326	display: block;
327	top: 8px;
328	left: 8px;
329	cursor: pointer;
330	padding: 10px;
331	}
332	.owl-carousel .slide .row .columns:last-child i.fa-times {
333	display: none;
334	}
335	.owl-carousel .slide .row .columns:last-child i.fa-long-arrow-left {
336	display: block;
337	}
338	.owl-carousel .slide.open .row .columns:first-child {
339	width: 80%;
340	}
341	.owl-carousel .slide.open .row .columns:first-child.wrap-video {
342	width: 97%;
343	}
344	.owl-carousel .slide.open .row .columns:last-child {
345	width: 40%;
346	left: 60%;
347	}
348	.owl-carousel .slide.open .row .columns:last-child i.fa-times {
349	display: block;
350	}
351	.owl-carousel .slide.open .row .columns:last-child i.fa-long-arrow-left {
352	display: none;
353	}
354
355	.owl-theme .owl-controls {
356	position: absolute;
357	left: 45px;
358	bottom: 15px;
359	text-align: left;
360	}
361
362	.owl-theme .owl-controls .owl-page span {
363	background-color: white;
364	}
365
366	.fluid-width-video-wrapper {
367	width: 100%;
368	position: relative;
369	padding: 0;
370	}
371
372	.fluid-width-video-wrapper iframe,
373	.fluid-width-video-wrapper object,
374	.fluid-width-video-wrapper embed {
375	position: absolute;
376	top: 0;
377	left: 0;
378	width: 100%;
379	height: 100%;
380	}
381	]])); }
382
383	S cssLibs() {
384	ret hcss("https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css")
385	+ hcss("https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css")
386	+ hcss("https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css")
387	+ hcss("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css");
388	}
389
390	S headStuff() { ret htmlCombine_new(cssLibs(), css(), jsLibs(), js()); }
391
392	S html() {
393	new LS slidesHtml;
394
395	for i over slides: {
396	var slide = slides.get(i);
397	int index = i+1;
398	slidesHtml.add(
399	div_inv(class := "slide slide-" + index + (index == 1 ? "" : " open"),
400	div_inv(class :="row", htmlCombine_new(
401	div_inv(class := "columns",
402	himg(slide.imgIDOrURL)
403	),
404	div_inv(class := "columns", "data-slide" := index, htmlCombine_new(
405	fulltag i("", class := "fa fa-times"),
406	fulltag i("", class := "fa fa-long-arrow-left"),
407	slide.html()
408	))
409	))
410	));
411	}
412
413	ret div_inv(id := "owl-example", class := "owl-carousel",
414	htmlCombine_new(slidesHtml));
415	}
416
417	void add aka addSlide(Slide slide) { slides.add(slide); }
418	}