1 2;(function ($, w, d, h, b) { 3 window.aiosSliderInstances = []; 4 var playerInstance = []; 5 var app = { 6 playCustomVideo: function ($slider, options, splide, $currentSlide) { 7 var isAutoplay = options.autoplay; 8 var {Autoplay} = splide.Components; 9 var type = $currentSlide.attr('data-slide-type'); 10 var speed = options.speed; 11 var slides = splide.Components.Elements.slides; 12 13 if ( 14 type == 'html5-video' && 15 isAutoplay == true 16 ) { 17 var $videoContainer = $currentSlide.find('.aios-slider-custom-video'); 18 var $video = $videoContainer.find('video'); 19 20 // pause autoplay 21 Autoplay.pause(); 22 splide.autoplayWasPausedByVideo = true; 23 24 var playPromise = $video[0].play(); 25 playPromise 26 .then(function (e) { 27 // adds is-playing class if successfully plays 28 $slider.addClass('is-playing'); 29 $currentSlide.addClass('video-played-once'); 30 }) 31 .catch(function (e) { 32 // handle click event if autoplay doesn't work due to policies 33 $videoContainer 34 .find('button')[0] 35 .click(); 36 37 // adds is-playing class if successfully plays 38 $slider.addClass('is-playing'); 39 }); 40 41 // replay video if slides == 1 42 // we'll loop the video seamlessly 43 if (slides.length === 1) { 44 // play before it ends 45 $video.on('ended', function () { 46 $video[0].currentTime = 0; 47 $video[0].play(); 48 }); 49 } 50 // proceed next slide after video ended 51 else { 52 $video.one('ended', function () { 53 $slider.removeClass('is-playing'); 54 splide.go('>'); 55 }); 56 } 57 } 58 }, 59 splide: function () { 60 var $sliders = $('.aios-slider.aios-slider-template-default .aios-slider-splide'); 61 $.each($sliders, function (index, slider) { 62 var $slider = $(slider); 63 var options = JSON.parse($slider.attr('data-splide')); 64 var isAutoplay = options.autoplay; 65 66 var splide = new Splide($slider[0]); 67 splide.autoplayWasPausedByVideo = false; 68 69 // pause custom html5 video before move 70 splide.on('move', function (newIndex, prevIndex, destIndex) { 71 var slides = splide.Components.Elements.slides; 72 var $prevSlide = $(slides[prevIndex]); 73 var type = $prevSlide.attr('data-slide-type'); 74 var $video = $prevSlide.find('video'); 75 76 if ( 77 type == 'html5-video' && 78 $video.length > 0 && 79 $video[0].paused == false 80 ) { 81 $video[0].pause(); 82 $slider.removeClass('is-playing'); 83 } 84 }); 85 86 // resume autoplay after slide move if it was paused by video slide 87 splide.on('moved', function (newIndex) { 88 var slides = splide.Components.Elements.slides; 89 var $currentSlide = $(slides[newIndex]); 90 var $video = $currentSlide.find('video'); 91 92 // resume autoplay function 93 if ( 94 splide.autoplayWasPausedByVideo == true && 95 $video.length < 1 96 ) { 97 var {Autoplay} = splide.Components; 98 99 Autoplay.play(); 100 splide.autoplayWasPausedByVideo = false;
101 } 102 }); 103 104 // will stop autoplay if next slide uses video extension 105 splide.on('video:play', function (player) { 106 var {Autoplay} = splide.Components; 107 var $currentSlide = $(splide.Components.Elements.slides[splide.index]); 108 var type = $currentSlide.attr('data-slide-type'); 109 110 if ( 111 $currentSlide.hasClass('splide__slide--has-video') == true && 112 Autoplay.isPaused() == false && 113 isAutoplay == true && 114 splide.Components.Slides.getLength() > 1 115 ) { 116 Autoplay.pause(); 117 splide.autoplayWasPausedByVideo = true; 118 } 119 120 // add class if video played once 121 $currentSlide.addClass('video-played-once'); 122 123 // for player instance 124 if (!$currentSlide.hasClass('player-initialized')) { 125 $currentSlide.addClass('player-initialized'); 126 127 // for youtube 128 if (type == 'youtube') { 129 playerInstance[splide.index] = player.player.player; 130 } 131 132 // for vimeo 133 if (type == 'vimeo') { 134 playerInstance[splide.index] = new Vimeo.Player($currentSlide.find('.splide__video iframe')[0]); 135 } 136 } 137 }); 138 139 // video ended go to next slide if autoplay is true 140 splide.on('video:ended', function (player) { 141 var $currentSlide = $(splide.Components.Elements.slides[splide.index]); 142 143 // go to next slide after video plays/ends 144 if ( 145 isAutoplay == true && 146 splide.Components.Slides.getLength() > 1 147 ) { 148 splide.go('>'); 149 } 150 151 // resume autoplay if avaible 152 if (splide.autoplayWasPausedByVideo == true) { 153 var {Autoplay} = splide.Components; 154 155 Autoplay.play(); 156 splide.autoplayWasPausedByVideo = false; 157 } 158 159 // set play button to visible after video ended if autoplay is disabled 160 if ( 161 isAutoplay == false && 162 typeof player == 'object' && 163 typeof player.slide == 'object' && 164 $(player.slide).find('.splide__video__play').is(':visible') == false 165 ) { 166 $(player.slide).find('.splide__video__play').show(); 167 } 168 }); 169 170 splide.on('mounted', function () { 171 var {Autoplay} = splide.Components; 172 var $currentSlide = $(splide.Components.Elements.slides[splide.index]); 173 174 // video element poster 175 setTimeout(function () { 176 $.each(splide.Components.Elements.slides, function (i, v) { 177 var $slide = $(v); 178 179 if ($slide.hasClass('splide__slide--has-video')) { 180 var $target = $slide.find('.splide__video__wrapper div video'); 181 $target.prop('poster', $slide.attr('data-splide-poster')); 182 } 183 }); 184 185 // remove video play on splide click 186 if ($slider.hasClass('autoplay-enable')) { 187 $slider.find('.splide__video, .aios-slider-img, .aios-slider-tagline, .aios-slider-volume').on('click.onVideoClick click', function (e) { 188 e.stopImmediatePropagation(); 189 }); 190 } 191 }, 200); 192 }); 193 194 // for tagline animation and video functions 195 splide.on('mounted moved', function () { 196 var $currentSlide = $(splide.Components.Elements.slides[splide.index]);
197 var type = $currentSlide.attr('data-slide-type'); 198 var slides = splide.Components.Elements.slides; 199 var index = $currentSlide.attr('data-slide-number'); 200 201 $slider 202 .find('.splide__slide') 203 .not($currentSlide) 204 .find('.aios-slider-tagline') 205 .removeClass('tagline-active'); 206 207 // for tagline 208 $currentSlide 209 .find('.aios-slider-tagline') 210 .addClass('tagline-active'); 211 212 // video on load 213 if ( 214 $slider.hasClass('video-on-load') && 215 !$currentSlide.hasClass('video-played-once') 216 ) { 217 var $currentVideo = $currentSlide.find('video'); 218 var $newVideo = $(` 219 <video preload="none" poster="${$currentVideo.attr('data-poster')}" muted playsinline> 220 <source src="${$currentVideo.attr('data-src')}" type="video/mp4"> 221 </video> 222 `); 223 224 if (index === '1') { 225 // remove old video, prepend new video 226 // then play on users scroll/mousemove/touchmove 227 $(w).one('scroll mousemove touchmove', function() { 228 // old 229 $currentVideo.remove(); 230 231 // new 232 $newVideo 233 .prependTo($currentSlide.find('.aios-slider-custom-video')) 234 .hide() 235 .fadeIn(); 236 237 // html5 video autoplay 238 app.playCustomVideo($slider, options, splide, $currentSlide); 239 }); 240 } 241 else { 242 // old 243 $currentVideo.remove(); 244 245 // new 246 $newVideo 247 .prependTo($currentSlide.find('.aios-slider-custom-video')) 248 .hide() 249 .fadeIn(); 250 251 // html5 video autoplay 252 app.playCustomVideo($slider, options, splide, $currentSlide); 253 } 254 } 255 else { 256 // html5 video autoplay 257 app.playCustomVideo($slider, options, splide, $currentSlide); 258 } 259 }); 260 261 // mount splide with extensions 262 splide.mount(w.splide.Extensions || null); 263 264 // refresh splide if type == loop 265 if (options.type == 'loop') splide.refresh(); 266 267 // add splide instance on global variables so that it can be easily access outside plugin 268 window.aiosSliderInstances[$slider.closest('.aios-slider').attr('id')] = splide; 269 }); 270 }, 271 video: function () { 272 // custom html5 video button 273 var $targets = $('.aios-slider.aios-slider-template-default .aios-slider-custom-video button, .aios-slider.aios-slider-template-default .aios-slider-custom-video video'); 274 $targets.on('click', function (e) { 275 var $this = $(this); 276 var $parent = $this.closest('.aios-slider-custom-video'); 277 var $splide = $this.closest('.aios-slider .splide'); 278 var $button = $parent.find('button'); 279 var $video = $parent.find('video'); 280 281 // clicked on button 282 if ($this.prop('tagName') == 'BUTTON') { 283 $video[0].play(); 284 $splide.addClass('is-playing'); 285 } 286 287 // clicked on video 288 if ($this.prop('tagName') == 'VIDEO') { 289 // play 290 if ($video[0].paused == true) { 291 $video[0].play(); 292 $splide.addClass('is-playing'); 293 } 294 // pause 295 else { 296 $video[0].pause(); 297 $splide.removeClass('is-playing'); 298 } 299 } 300 }); 301 302 // volume 303 $('.aios-slider.aios-slider-template-default .aios-slider-volume').on('click', function (e) { 304 e.preventDefault(); 305 e.stopImmediatePropagation(); 306 307 var $this = $(this); 308 var $parent = $this.closest('.splide__slide');
309 var type = $parent.attr('data-slide-type'); 310 var index = $parent.attr('data-slide-number'); 311 var player = playerInstance[index - 1]; 312 var $video = ''; 313 314 if (type == 'html5-video') { 315 $video = $parent.find('.aios-slider-custom-video'); 316 } 317 else { 318 $video = $this.next('.splide__video'); 319 } 320 321 var fnIconChange = function (icon) { 322 if (icon == 'on') { 323 $this 324 .addClass('volume-on') 325 .find('.ai-font-mute') 326 .addClass('ai-font-volume-a') 327 .removeClass('ai-font-mute'); 328 } 329 330 if (icon == 'off') { 331 $this 332 .removeClass('volume-on') 333 .find('.ai-font-volume-a') 334 .addClass('ai-font-mute') 335 .removeClass('ai-font-volume-a'); 336 } 337 } 338 339 if ($this.hasClass('volume-on')) { 340 // youtube player 341 if (type == 'youtube') { 342 player.mute(); 343 } 344 345 // vimeo player 346 if (type == 'vimeo') { 347 player.setVolume(0); 348 } 349 350 // html5 player 351 if (type == 'html5-video') { 352 $video.find('video')[0].muted = true; 353 } 354 355 fnIconChange('off'); 356 } 357 else { 358 // youtube player 359 if (type == 'youtube') { 360 player.unMute(); 361 } 362 363 // vimeo player 364 if (type == 'vimeo') { 365 player.setVolume(1); 366 } 367 368 // html5 player 369 if (type == 'html5-video') { 370 $video.find('video')[0].muted = false; 371 } 372 373 fnIconChange('on'); 374 } 375 }); 376 }, 377 init: function () { 378 this.splide(); 379 this.video(); 380 } 381 } 382 383 $(d).on('DOMContentLoaded', function () { 384 app.init(); 385 }); 386})(jQuery, window, document, 'html', 'body');
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.