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