1/** 2 * Plasma Slider 3 * Company: Aazz Tech 4 * Develoepr: Syed Galib Ahmed 5 * Version: 1.0 6 * Initial Release: 1 February, 2020 7 * */ 8 9(function() { 10 this.PlasmaSlider = function( args ) { 11 // Defaults 12 this.options = { 13 containerID: null, 14 width: 16, 15 height: 9, 16 images: [], 17 backgroundSize: 'cover', 18 blurBackground: true, 19 backgroundColor: 'gainsboro', 20 thumbnailBackgroundColor: '#fff', 21 showThumbnails: true, 22 rtl: false, 23 }; 24 25 // Data 26 this.container = null; 27 28 // extendDefaults 29 this.extendDefaults = function() { 30 this.options = syncData(this.options, args); 31 }; 32 33 // init 34 this.init = function() { 35 // Extend Defaults 36 this.extendDefaults(); 37 38 // Set Container 39 var id = this.options.containerID; 40 var containerElm = document.getElementById(id); 41 if (!containerElm) { 42 return; 43 } 44 this.container = containerElm; 45 46 if ( hasClass(this.container, 'is-initialized') ) { 47 return; 48 } 49 50 addClass(this.container, 'is-initialized'); 51 52 // Get Markup Options 53 this.getMarkupOptions(); 54 55 // Prepare DOM 56 this.prepareDOM(); 57 58 // Attach Events 59 this.attachEvents(); 60 }; 61 62 // getMarkupOptions 63 this.getMarkupOptions = function() { 64 if ( !this.container ) { return; } 65 66 // Extend Settings Data 67 var width = this.container.getAttribute('data-width'); 68 if ( width && isPositiveNumber(width)) { 69 this.options.width = isPositiveNumber(width); 70 } 71 72 var height = this.container.getAttribute('data-height'); 73 if ( height && isPositiveNumber(height)) { 74 this.options.height = isPositiveNumber(height); 75 } 76 77 var show_thumbnails = this.container.getAttribute('data-show-thumbnails'); 78 if ( show_thumbnails && isBoolean(show_thumbnails) !== null ) { 79 this.options.showThumbnails = isBoolean(show_thumbnails); 80 } 81 82 var rtl = this.container.getAttribute('data-rtl'); 83 if ( rtl && isBoolean(rtl) !== null ) { 84 this.options.rtl = isBoolean(rtl); 85 } 86 87 var background_size = this.container.getAttribute('data-background-size'); 88 if ( background_size ) { 89 this.options.backgroundSize = background_size; 90 } 91 92 var blur_background = this.container.getAttribute('data-blur-background'); 93 if ( blur_background && isBoolean(blur_background) !== null ) { 94 this.options.blurBackground = isBoolean(blur_background); 95 } 96 97 var background_color = this.container.getAttribute('data-background-color'); 98 if ( background_color ) { 99 this.options.backgroundColor = background_color; 100 } 101 102 var thumbnail_background_color = this.container.getAttribute('data-thumbnail-background-color'); 103 if ( thumbnail_background_color ) { 104 this.options.thumbnailBackgroundColor = thumbnail_background_color; 105 } 106 107 // Extend Image Data 108 var images_data = this.container.querySelectorAll('.plasmaSliderImageItem'); 109 if ( images_data && images_data.length ) { 110 var image_list = []; 111 forEach( images_data, function( image ) { 112 var src = image.getAttribute('data-src'); 113 var alt = image.getAttribute('data-alt'); 114 var data = {}; 115 if ( src ) { 116 data.src = ( src ) ? src : ''; 117 data.alt = ( alt ) ? alt : ''; 118 image_list.push(data); 119 } 120 }); 121 122 if ( image_list.length ) { 123 this.options.images = image_list; 124 } 125 126 } 127 }; 128 129 // prepareDOM 130 this.prepareDOM = function() { 131 if ( !this.container ) { return; } 132 133 this.container.innerHTML = ''; 134 addClass(this.container, 'plasmaSlider'); 135 136 // Slider Body Elm 137 var body_elm = createElementWithClass('plasmaSlider__body'); 138 139 var ratio_width = this.options.width; 140 var ratio_height = this.options.height; 141 var padding_top = (ratio_height / ratio_width) * 100; 142 body_elm.setAttribute('style', 'padding-top: ' + padding_top + '%'); 143 144 if ( this.options.images.length > 1 ) { 145 // Slider Right Control 146 var right_control = createDOMSliderRightControl(); 147 body_elm.appendChild(right_control); 148 149 // Slider Left Control 150 var left_control = createDOMSliderLeftControl(); 151 body_elm.appendChild(left_control); 152 } 153 154 155 // Slider Contents 156 var contents = createDOMSliderContents(this); 157 body_elm.appendChild(contents); 158 159 this.container.appendChild(body_elm); 160 161 if ( this.options.showThumbnails && this.options.images.length > 1 ) { 162 // Slider Footer 163 var footer = createDOMSliderfooter(this); 164 this.container.appendChild(footer); 165 } 166 167 }; 168 169 // attachEvents 170 this.attachEvents = function() { 171 if ( !this.container ) { return; } 172 var self = this; 173 174 // Navigation Events 175 var arrow_btn = this.container.querySelectorAll( 176 '.plasmaSlider__arrowBtn' 177 ); 178 179 if ( arrow_btn && arrow_btn.length ) {
180 forEach( arrow_btn, function(btn) { 181 btn.addEventListener('click', function(e) { 182 var class_name = e.target.className; 183 var target = ( class_name === 'plasmaSliderSkin' ) ? e.target.parentElement : e.target; 184 self.handleArrowEvent( target ); 185 }); 186 }) 187 } 188 189 if ( this.options.showThumbnails ) { 190 var thumbnail_items = this.container.querySelectorAll('.plasmaSlider__thumbnailListItem'); 191 if ( thumbnail_items && thumbnail_items.length ) { 192 forEach( thumbnail_items, function(thumbnail_item) { 193 thumbnail_item.addEventListener('click', function(e) { 194 self.handleThumbnailEvent( e.target.parentElement ); 195 }); 196 }); 197 } 198 } 199 200 }; 201 202 // handleArrowEvent 203 this.handleArrowEvent = function( target_elm ) { 204 var self = this; 205 var target = target_elm; 206 var direction = target.getAttribute('data-direction'); 207 208 var current_item_elm = self.container.querySelectorAll( 209 '.plasmaSlider__contentsWrap .plasmaSlider__sliderItem.active' 210 ); 211 var current_index = indexOf(current_item_elm[0]); 212 if ( current_index === null || current_index < 0) { return; } 213 214 var next_index = ( direction === 'right' ) ? current_index + 1 : current_index - 1; 215 if ( this.options.rtl ) { 216 next_index = ( direction === 'right' ) ? current_index - 1 : current_index + 1; 217 } 218 this.changeSlideTo(next_index); 219 }; 220 221 // handleThumbnailEvent 222 this.handleThumbnailEvent = function ( target_elm ) { 223 var get_index = indexOf(target_elm); 224 this.changeSlideTo(get_index); 225 }; 226 227 // changeSlideTo 228 this.changeSlideTo = function( next_index ) { 229 var total_items = this.options.images.length - 1; 230 next_index = ( next_index < 0 ) ? total_items : next_index; 231 next_index = ( next_index > total_items ) ? 0 : next_index; 232 233 var width_style = 'width: '+ ((total_items + 1) * 100) +'%;'; 234 var left = ( next_index === 0 ) ? 'left: ' : 'left: -'; 235 if ( this.options.rtl ) { 236 left = ( next_index === 0 ) ? 'right: ' : 'right: -'; 237 } 238 var style = width_style + left + (next_index * 100) + '%;' 239 240 var contents_wrap = this.container.querySelectorAll('.plasmaSlider__contentsWrap'); 241 contents_wrap[0].setAttribute('style', style); 242 243 var current_item_elm = this.container.querySelectorAll( 244 '.plasmaSlider__contentsWrap .plasmaSlider__sliderItem.active' 245 ); 246 247 removeClass(current_item_elm[0], 'active'); 248 var next_item = contents_wrap[0].children.item(next_index); 249 addClass(next_item, 'active'); 250 251 this.updateNavigation(next_index); 252 }; 253 254 // updateNavigation 255 this.updateNavigation = function( next_index ) { 256 if ( this.options.showThumbnails ) { 257 // Update Thumbnail List Navivation 258 var thumbnail_list_items = this.container.querySelectorAll( 259 '.plasmaSlider__thumbnailList .plasmaSlider__thumbnailListItem' 260 ); 261 262 if ( thumbnail_list_items && thumbnail_list_items.length ) { 263 forEach( thumbnail_list_items, function(list_item, index) { 264 removeClass(list_item, 'active'); 265 266 if ( index === next_index ) { 267 addClass( list_item, 'active' ); 268 } 269 }); 270 271 // Update Scroll Position 272 var thumbnail_list = thumbnail_list_items[0].parentElement; 273 var thumbnail_list_width = thumbnail_list.clientWidth; 274 var scrollLeftMax = thumbnail_list.scrollLeftMax; 275 276 var thumbnail_next_item_offset = thumbnail_list_items[next_index].offsetLeft; 277 var thumbnail_next_item_width = thumbnail_list_items[next_index].offsetWidth; 278 279 var scroll_left = thumbnail_next_item_offset; 280 var scroll_left_w = scroll_left + thumbnail_next_item_width; 281 scroll_left = ( scroll_left > scrollLeftMax ) ? scrollLeftMax : scroll_left; 282 scroll_left = ( scroll_left < 0 ) ? 0 : scroll_left; 283 284 var current_visible_offset_start = thumbnail_list.scrollLeft; 285 var current_visible_offset_end = current_visible_offset_start + thumbnail_list_width; 286 287 if ( scroll_left < current_visible_offset_start || scroll_left_w > current_visible_offset_end ) { 288 thumbnail_list.scrollLeft = scroll_left; 289 } 290 } 291 } 292 } 293 }; 294 295 296 // ----------------------- 297 // Helpers 298 // ----------------------- 299 // createDOMSliderContents 300 function createDOMSliderContents( self ) { 301 var contents = createElementWithClass('plasmaSlider__contents'); 302 var contents_wrap = createElementWithClass('plasmaSlider__contentsWrap'); 303 304 if ( Array.isArray(self.options.images) && self.options.images.length ) { 305 var width_value = (self.options.images.length) * 100; 306 var width = 'width: '+ width_value + '%;'; 307 var style = width; 308 309 contents_wrap.setAttribute('style', style); 310 var images = self.options.images; 311
312 forEach(images, function(image, index) { 313 var active = ( index === 0 ) ? true : false; 314 var slider_item = createDOMSliderItem({ 315 src: ( 'src' in image) ? image.src : '', 316 alt: ( 'alt' in image) ? image.alt : '', 317 active: active, 318 }, self); 319 contents_wrap.appendChild(slider_item); 320 }); 321 } 322 323 contents.appendChild(contents_wrap); 324 return contents; 325 } 326 327 // createDOMSliderItem 328 function createDOMSliderItem( args, self ) { 329 var opt = { src: '', alt: '', active: false }; 330 opt = syncData(opt, args); 331 332 var active_class = ( opt.active ) ? ' active' : ''; 333 var slider_item = createElementWithClass('plasmaSlider__sliderItem' + active_class); 334 var background_size = self.options.backgroundSize; 335 var slider_item_bg = createElementWithClass('plasmaSlider__bg'); 336 var background_color = self.options.backgroundColor; 337 slider_item_bg.setAttribute('style', 'background-color: ' + background_color +';' ); 338 339 if ( 'contain' === self.options.backgroundSize && self.options.blurBackground ) { 340 var slider_item_img_back = createElementWithClass('plasmaSlider__bgImgBlur', 'img'); 341 slider_item_img_back.src = opt.src; 342 slider_item_bg.appendChild(slider_item_img_back); 343 } 344 345 346 var slider_item_img_front = createElementWithClass('plasmaSlider__bgImg plasmaSlider__' + background_size, 'img'); 347 slider_item_img_front.src = opt.src; 348 slider_item_img_front.alt = opt.alt; 349 slider_item_bg.appendChild(slider_item_img_front); 350 351 slider_item.appendChild(slider_item_bg); 352 353 return slider_item; 354 } 355 356 function createDOMSliderfooter( self ) { 357 var footer = createElementWithClass('plasmaSlider__footer'); 358 359 if ( !(Array.isArray(self.options.images) ) ) { 360 return footer; 361 } 362 363 var thumbnailList = createElementWithClass('plasmaSlider__thumbnailList'); 364 if ( self.options.thumbnailBackgroundColor.length ) { 365 var style = 'background-color: ' + self.options.thumbnailBackgroundColor; 366 thumbnailList.setAttribute( 'style', style ); 367 } 368 forEach(self.options.images, function(image, index) { 369 var _class_name = 'plasmaSlider__thumbnailListItem'; 370 var active_class = ( index === 0 ) ? _class_name + ' active' : _class_name; 371 var class_name = active_class; 372 373 var thumbnailListItem = createElementWithClass(class_name); 374 var thumbnailListItemImg = createElementWithClass('plasmaSlider__thumbnailListItemImg', 'img'); 375 376 thumbnailListItemImg.src = ( 'src' in image ) ? image.src : ''; 377 thumbnailListItemImg.alt = ( 'alt' in image ) ? image.alt : 'Thumbnail Image'; 378 379 thumbnailListItem.appendChild(thumbnailListItemImg); 380 thumbnailList.appendChild(thumbnailListItem); 381 }); 382 383 footer.appendChild(thumbnailList); 384 return footer; 385 } 386 387 // createDOMSliderRightControl 388 function createDOMSliderRightControl() { 389 var control_right = createElementWithClass('plasmaSlider__controlRight'); 390 391 var control_right_arrow_btn = createElementWithClass( 392 'plasmaSlider__arrowBtn arrowBtn--right', 393 'button', 394 '<span class="plasmaSliderIcon psi-angle-right"></span><span class="plasmaSliderSkin"></span>' 395 ); 396 control_right_arrow_btn.setAttribute('type', 'button'); 397 control_right_arrow_btn.setAttribute('data-direction', 'right'); 398 control_right.appendChild(control_right_arrow_btn); 399 400 return control_right; 401 } 402 403 // createDOMSliderLeftControl 404 function createDOMSliderLeftControl() { 405 var control_left = createElementWithClass('plasmaSlider__controlLeft'); 406 var control_left_arrow_btn = createElementWithClass( 407 'plasmaSlider__arrowBtn arrowBtn--left', 408 'button', 409 '<span class="plasmaSliderIcon psi-angle-left"></span><span class="plasmaSliderSkin"></span>' 410 ); 411 control_left_arrow_btn.setAttribute('type', 'button'); 412 control_left_arrow_btn.setAttribute('data-direction', 'left'); 413 control_left.appendChild(control_left_arrow_btn); 414 415 return control_left; 416 } 417 418 // syncData 419 function syncData( default_data, new_data ) { 420 if (!new_data) { 421 return default_data; 422 } 423 424 if (new_data && typeof new_data !== "object") { 425 return defaults; 426 } 427 428 var property; 429 for (property in new_data) { 430 if (default_data.hasOwnProperty(property)) { 431 default_data[property] = new_data[property]; 432 } 433 } 434 return default_data; 435 } 436 437 // isPositiveNumber 438 function isPositiveNumber( data ) { 439 var data_is_valid = false;
440 441 if ( typeof data === 'string' ) { 442 var has_non_digit = data.match(/[^\d]/); 443 var chk = (!has_non_digit) ? parseInt(data) : null; 444 data_is_valid = (chk && chk > 0) ? true : false; 445 data = (data_is_valid) ? chk : data; 446 } 447 448 if ( typeof data === 'number' ) { 449 data = ( data < 1 ) ? false : data; 450 data_is_valid = ( data ) ? true : false; 451 } 452 453 return ( data_is_valid ) ? data : false; 454 } 455 456 // isBoolean 457 function isBoolean( data ) { 458 var value = null; 459 if ( data ) { 460 switch (data) { 461 case '0': 462 value = false; 463 break; 464 case 'false': 465 value = false; 466 break; 467 case '1': 468 value = true; 469 break; 470 case 'true': 471 value = true; 472 break; 473 } 474 } 475 476 return value; 477 } 478 479 // createElementWithClass 480 function createElementWithClass(class_name, elm, child) { 481 class_name = ( typeof class_name === 'undefined' ) ? "" : class_name; 482 elm = ( typeof elm === 'undefined' ) ? "div" : elm; 483 child = ( typeof child === 'undefined' ) ? "" : child; 484 485 var element = document.createElement(elm); 486 addClass(element, class_name); 487 488 element.innerHTML = child; 489 return element; 490 } 491 492 // addClass 493 function addClass(element, class_name) { 494 if ( !(typeof element === 'object' && 'className' in element) ) { return; } 495 496 var arr = element.className.split(" "); 497 if (arr.indexOf(class_name) == -1) { 498 element.className += " " + class_name; 499 element.className = element.className.trim(); 500 } 501 } 502 503 // removeClass 504 function removeClass(element, class_name) { 505 if (!element) { 506 return; 507 } 508 var regExp = new RegExp(class_name, "g"); 509 element.className = element.className.replace(regExp, ""); 510 element.className = element.className.trim(); 511 } 512 513 // hasClass 514 function hasClass(element, class_name) { 515 if (!element) { 516 return; 517 } 518 var regExp = new RegExp(class_name, "g"); 519 var match = element.className.match(regExp); 520 521 return match; 522 } 523 524 // indexOf 525 function indexOf( elm ) { 526 if ( !elm ) { return null; } 527 if ( !('parentElement' in elm && elm.parentElement) ) { return null; } 528 529 var parent = elm.parentElement.children; 530 var index = [].slice.call(parent).indexOf(elm); 531 return index; 532 } 533 534 // forEach 535 function forEach(array, cb) { 536 for (var i = 0; i < array.length; i++) { 537 cb(array[i], i); 538 } 539 } 540})();
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.