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