1 2var Slider = function(args) { 3 // "blur","row" 4 if(args.mode) { this.mode = args.mode; } 5 else { this.mode = "row"; } 6 // horizontal/vertical 7 if(args.orientation) { this.orientation = args.orientation; } 8 else {this.orientation = "h"} 9 // to next slide 10 if(args.direction) { 11 this.direction = args.direction; 12 } else if(this.mode == "row") { 13 this.direction = "left"; 14 if(this.orientation == "v"){ 15 this.direction = "up"; 16 } 17 } else if(this.mode == "blur") { 18 this.direction = "left" 19 } 20 //this.box = document.getElementById(args.boxId); 21 this.box = args.box; 22 this.slideBox = document.createElement("div"); 23 this.slideBox.setAttribute("class","slidebox"); 24 this.box.appendChild(this.slideBox); 25 26 this.w = this.box.offsetWidth; 27 this.h = this.box.offsetHeight; 28 29 this.containerWidth = this.slideBox.offsetWidth; 30 this.containerHeight = this.slideBox.offsetHeight; 31 32 var self = this; 33 34 this.resizeObserver = new ResizeObserver((entries) => { 35 // for (var entry of entries){ 36 // console.log(entry); 37 // } 38 self.getContentMaxHeight(); 39 }); 40 41 this.btnPrev = new Svgbutton({box:self.box, svgId:"svgprev", class:"slidebtn"}); 42 this.btnNext = new Svgbutton({box:self.box, svgId:"svgnext", class:"slidebtn"}); 43 this.btnPrev.classList.add("slideprev") 44 this.btnNext.classList.add("slidenext") 45 this.externalButtons = []; 46 // this.box.appendChild(this.btnPrev); 47 // this.box.appendChild(this.btnNext); 48 49 /* 50 this.btnPrev.style.position = this.btnNext.style.position = "absolute"; 51 this.btnPrev.style.zIndex = this.btnNext.style.zIndex = 100; 52 this.btnPrev.style.width = this.btnNext.style.width = "30px"; 53 this.btnPrev.style.height = this.btnNext.style.height = "40px"; 54 this.btnPrev.style.top = this.btnNext.style.top = (this.containerHeight/2 - 20)+"px"; 55 this.btnPrev.style.left = "5px"; 56 this.btnNext.style.right = "5px";*/ 57 58 59 this.btnNext.addEventListener("click",function(){ 60 self.next(); 61 }); 62 this.btnPrev.addEventListener("click",function(){ 63 self.prev(); 64 }); 65 66 this.slides = []; 67 68 this.setActiveId(0); // Index des aktiven Slides, prevId, nextId 69 var touchX = 0, touchY = 0; 70 var distX = 0, distY = 0; 71 var expDistX = 0, expDistY = 0; 72 this.miniBox = document.createElement("div"); 73 this.box.appendChild(this.miniBox); 74 this.miniBox.setAttribute("class","minibox"); 75 this.minis = []; 76 this.anlauf = 5; 77 78 79 this.slideBox.addEventListener("touchstart", function(e) { 80 e.stopPropagation(); 81 if(self.slides.length > 1) { 82 touchX = Math.round(e.changedTouches[0].clientX); 83 touchY = Math.round(e.changedTouches[0].clientY); 84 distX = 0; distY = 0; 85 expDistX = 0; expDistY = 0; 86 var transtxt = "none"; 87 for(var i = 0, il = self.slides.length; i < il; i+= 1){ 88 self.slides[i].style.transition = transtxt; 89 } 90 91 } 92 }); 93 this.slideBox.addEventListener("touchmove", function(e) { 94 e.stopPropagation(); 95 if(self.orientation == "h"){ 96 var w = self.containerWidth; 97 distX = e.changedTouches[0].clientX - touchX; 98 expDistX = (distX * distX) / (w/2); 99 if(expDistX > self.anlauf && Math.abs(distX) > Math.abs(distY) * 1.4) { 100 expDistX -= self.anlauf; 101 if(expDistX > w) { 102 expDistX = w; 103 } 104 if(distX < 0) { 105 expDistX = -expDistX; 106 } 107 self.doSlide(expDistX); 108 } 109 } else if(self.orientation == "v"){ 110 var h = self.containerHeight; 111 distY = e.changedTouches[0].clientY - touchY; 112 expDistY = (distY * distY) / (h/2); 113 if(expDistY > self.anlauf && Math.abs(distY) > Math.abs(distX) * 1.4) { 114 expDistY -= self.anlauf; 115 if(expDistY > h) { 116 expDistY = h; 117 } 118 if(distY < 0) { 119 expDistY = -expDistY; 120 } 121 self.doSlide(expDistY); 122 } 123 } 124 }); 125 this.slideBox.addEventListener("touchend", function(e) { 126 e.stopPropagation(); 127 if(self.orientation == "h"){ 128 var w = self.containerWidth; 129 if (Math.abs(distX) > self.anlauf) { 130 if (Math.abs(distX) < (50+w/6)) { 131 self.autoSlide("back"); 132 } else { 133 self.autoSlide("out"); 134 } 135 } 136 } else { 137 var h = self.box.offsetHeight; 138 if (Math.abs(distY) > self.anlauf) { 139 if (Math.abs(distY) < (50+h/6)) { 140 self.autoSlide("back"); 141 } else { 142 self.autoSlide("out"); 143 } 144 } 145 } 146 }); 147}; 148Slider.prototype.prev = function() { 149 if(this.activeId > 0){ 150 this.callSlide(this.activeId - 1); 151 } else { 152 this.callSlide(this.slides.length - 1); 153 } 154}; 155Slider.prototype.next = function() { 156 if(this.activeId < this.slides.length - 1){ 157 this.callSlide(this.activeId + 1); 158 } else { 159 this.callSlide(0); 160 } 161}; 162Slider.prototype.activateMini = function() { 163 if(this.activeMini) { 164 this.activeMini.classList.remove("activeMini"); 165 } 166 var am = this.minis[this.activeId]; 167 am.classList.add("activeMini");
168 this.activeMini = am; 169}; 170Slider.prototype.addSlide = function() { 171 var w = this.containerWidth; 172 var h = this.containerHeight; 173 var slide = document.createElement("div"); 174 this.slideBox.appendChild(slide); 175 this.slides.push(slide); 176 var i = this.slides.length-1; 177 slide.index = i; 178 slide.setAttribute("class","slide"); 179 slide.setAttribute("id","slide"+i); 180 this.setActiveId(this.activeId); 181 182 if(this.mode == "blur"){ 183 slide.style.left = "0"; 184 slide.style.zIndex = 15-i; 185 } else if(this.direction == "left"){ 186 slide.style.left = (i * w)+"px"; 187 } else if(this.direction == "right"){ 188 slide.style.left = (-i * w)+"px"; 189 } else if(this.direction == "up"){ 190 slide.style.top = (i * h)+"px"; 191 } else if(this.direction == "down"){ 192 slide.style.top = (-i * h)+"px"; 193 } 194 slide.mini = this.addMini(); 195 196 return slide; 197}; 198Slider.prototype.addContentToSlide = function(slideId, contentDiv) { 199 var slide = this.slides[slideId] 200 slide.appendChild(contentDiv); 201 slide.contentDiv = contentDiv; // ### // ### // ### // ### 202 slideClearDiv = document.createElement("div"); 203 slideClearDiv.style.clear = "both"; 204 contentDiv.appendChild(slideClearDiv); 205 this.resizeObserver.observe(slide.contentDiv); 206}; 207Slider.prototype.addMini = function() { 208 var mini = document.createElement("div"); 209 this.miniBox.appendChild(mini); 210 this.minis.push(mini); 211 mini.setAttribute("class","mini"); 212 this.activateMini(); 213 mini.index = this.minis.length - 1; 214 this.resize(); 215 216 var self = this; 217 218 mini.addEventListener("touchstart",function(e){ 219 e.stopPropagation(); 220 self.resetPositions(); 221 }); 222 mini.addEventListener("mousedown",function(e){ 223 e.stopPropagation(); 224 self.resetPositions(); 225 }); 226 mini.addEventListener("touchend",function(e){ 227 e.stopPropagation(); 228 self.callSlide(this.index); 229 }); 230 mini.addEventListener("mouseup",function(e){ 231 e.stopPropagation(); 232 self.callSlide(this.index); 233 }); 234 235 return mini; 236}; 237Slider.prototype.resize = function() { 238 this.w = this.box.offsetWidth; 239 this.h = this.box.offsetHeight; 240 this.containerWidth = this.slideBox.offsetWidth; 241 this.containerHeight = this.slideBox.offsetHeight; 242 /* 243 for(var i = 0, il = this.minis.length; i < il; i += 1) { 244 if(window.innerWidth < 1.3 * window.innerHeight) { 245 this.minis[i].style.width = 80/il+"%"; // 100*0.8*il 246 this.minis[i].style.removeProperty("height"); 247 this.minis[i].style.margin = 10/il+"%"; 248 } else { 249 //this.minis[i].style.width = 90+"%"; // 100*0.8*il 250 this.minis[i].style.removeProperty("width"); 251 this.minis[i].style.height = (this.miniBox.offsetHeight/il)*0.8+"px"; 252 this.minis[i].style.margin = "0 5% "+(this.miniBox.offsetHeight/il)*0.2+"px 5%"; 253 } 254 } 255 */ 256 this.callSlide(this.activeId); 257}; 258Slider.prototype.getContentMaxHeight = function(){ 259 var maxHeight = 0; 260 for(var i = 0, il = this.slides.length; i < il; i += 1){ 261 if(this.slides[i].contentDiv.offsetHeight > maxHeight){ 262 maxHeight = this.slides[i].contentDiv.offsetHeight; 263 } 264 } 265 this.box.style.height = (maxHeight + 60) + "px"; 266 return maxHeight; 267}; 268Slider.prototype.removeSlides = function() { 269 var len = this.slides.length; 270 if(len == 0) { 271 return true; 272 } 273 var imax = len-1; 274 for(var i = imax; i >= 0; i -= 1) { 275 //this.slides[i].task = undefined; 276 this.slideBox.removeChild(this.slides[i]); 277 } 278 this.slides = []; 279 this.removeMinis(); 280 this.setActiveId(0); 281}; 282Slider.prototype.removeMinis = function() { 283 this.activeMini = undefined; 284 var imax = this.minis.length-1; 285 for(var i = imax; i >= 0; i -= 1) { 286 this.miniBox.removeChild(this.minis[i]); 287 } 288 this.minis = []; 289}; 290Slider.prototype.removeEffects = function() { 291 for(var i = 0, il = this.slides.length; i < il; i += 1) { 292 this.slides[i].style.filter = "none"; 293 this.slides[i].style.transform = "none"; 294 this.slides[i].style.transition = "none"; 295 } 296}; 297Slider.prototype.doSlide = function(d){ 298 //monitor(d); 299 if(this.slides.length > 1) { 300 //var w = this.w; 301 //var h = this.h; 302 var w = this.containerWidth; 303 var h = this.containerHeight; 304 var actSlide = this.slides[this.activeId]; 305 var nextSlide = this.slides[this.nextId]; 306 var prevSlide = this.slides[this.prevId]; 307 if(this.mode == "blur") { 308 var blur = 0; 309 //var scale = 1; 310 if(this.direction == "left"){ 311 312 if(d > 0 && this.activeId > 0) { 313 prevSlide.style.left = (d-w)+"px"; 314 blur = (8 / w) * d; // d/30; 315 if(blur > 5) blur = 5; 316 actSlide.style.filter = "blur("+blur+"px)"; 317 //scale = 1 - d / ( w * 3); 318 //actSlide.style.transform = "scale("+scale+")"; 319 } else if (d < 0 && this.activeId < this.slides.length-1) { 320 actSlide.style.left = d+"px"; 321 blur = 7 + (8 / w) * d; // d negativ! // 5-(-d/20); 322 if(blur > 0) { 323 nextSlide.style.filter = "blur("+blur+"px)"; 324 } else { 325 nextSlide.style.filter = "none"; 326 } 327 //scale = 0.7 - d / ( w * 2); 328 //if(scale > 1) scale = 1; 329 //nextSlide.style.transform = "scale("+scale+")"; 330 } else { 331 if(this.activeId > 0) prevSlide.style.left = (d-w)+"px"; 332 actSlide.style.left = "0"; 333 actSlide.style.filter = "none"; 334 } 335 336 } else if(this.direction == "right"){ 337 338 if(d < 0 && this.activeId > 0) { 339 prevSlide.style.left = (d+w)+"px"; 340 blur = (8 / w) * -d; // d/30; 341 if(blur > 5) blur = 5; 342 actSlide.style.filter = "blur("+blur+"px)"; 343 } else if (d > 0 && this.activeId < this.slides.length-1) { 344 actSlide.style.left = d+"px"; 345 blur = 7 + (8 / w) * -d;
346 if(blur > 0) { 347 nextSlide.style.filter = "blur("+blur+"px)"; 348 } else { 349 nextSlide.style.filter = "none"; 350 } 351 } else { 352 if(this.activeId > 0) prevSlide.style.left = (d+w)+"px"; 353 actSlide.style.left = "0"; 354 actSlide.style.filter = "none"; 355 } 356 } 357 } else if(this.mode == "row"){ 358 if(this.direction == "left" || this.direction == "right"){ 359 actSlide.style.left = d+"px"; 360 var nextLeft = d + w; 361 var prevLeft = d - w; 362 if(this.direction == "right"){ 363 nextLeft = d - w; 364 prevLeft = d + w; 365 } 366 nextSlide.style.left = nextLeft+"px"; 367 prevSlide.style.left = prevLeft+"px"; 368 369 } else if(this.direction == "up" || this.direction == "down"){ 370 actSlide.style.top = d+"px"; 371 var nextTop = d + h; 372 var prevTop = d - h; 373 if(this.direction == "down"){ 374 nextTop = d - h; 375 prevTop = d + h; 376 } 377 nextSlide.style.top = nextTop+"px"; 378 prevSlide.style.top = prevTop+"px"; 379 } 380 } 381 } 382}; 383Slider.prototype.autoSlide = function(go) { 384 if(this.slides.length > 1) { 385 var maxId = this.slides.length-1; 386 //var w = this.box.offsetWidth; 387 //var h = this.box.offsetHeight; 388 var w = this.containerWidth; 389 var h = this.containerHeight; 390 391 var slide = this.slides[this.activeId]; 392 var nextslide = this.slides[this.nextId]; 393 var prevslide = this.slides[this.prevId]; 394 var transtxt = "left 0.5s"; 395 // slide.style.transition = transtxt; 396 // nextslide.style.transition = transtxt; 397 // prevslide.style.transition = transtxt; 398 for(var i = 0, il = this.slides.length; i < il; i += 1) { 399 this.slides[i].style.transition = transtxt; 400 } 401 if(go == "back") { 402 this.doSlide(0); 403 } else if(this.mode == "blur" && this.direction == "left" && prevslide.offsetLeft > -w && this.activeId != 0) { // im "blur"-mode zurück bei Slide 0 verhindern 404 this.doSlide(w); 405 this.setActiveId(this.prevId); 406 } else if(this.mode == "blur" && this.direction == "right" && prevslide.offsetLeft < w && this.activeId != 0) { // im "blur"-mode zurück bei Slide 0 verhindern 407 this.doSlide(-w); 408 this.setActiveId(this.prevId); 409 } else if(this.direction == "left"){ 410 if(slide.offsetLeft < 0) { 411 this.doSlide(-w); 412 this.setActiveId(this.nextId); 413 } else if(slide.offsetLeft > 0) { 414 this.doSlide(w); 415 this.setActiveId(this.prevId); 416 } 417 } else if(this.direction == "right"){ 418 if(slide.offsetLeft < 0) { 419 this.doSlide(-w); 420 this.setActiveId(this.prevId); 421 } else if(slide.offsetLeft > 0) { 422 this.doSlide(w); 423 this.setActiveId(this.nextId); 424 } 425 } else if(this.direction == "up"){ 426 if(slide.offsetTop < 0) { 427 this.doSlide(-h); 428 this.setActiveId(this.nextId); 429 } else if(slide.offsetTop > 0) { 430 this.doSlide(h); 431 this.setActiveId(this.prevId); 432 } 433 } else if(this.direction == "down"){ 434 if(slide.offsetTop < 0) { 435 this.doSlide(-h); 436 this.setActiveId(this.prevId); 437 } else if(slide.offsetTop > 0) { 438 this.doSlide(h); 439 this.setActiveId(this.nextId); 440 } 441 } 442 443 this.activateMini(); 444 445 var self = this; 446 if(this.timeoutId != undefined) clearTimeout(this.timeoutId); 447 this.timeoutId = setTimeout(function(){ 448 //self.removeEffects.call(self); 449 for(var i = 0, il = self.slides.length; i < il; i += 1) { 450 self.slides[i].style.transition = "left 0s"; 451 } 452 setTimeout(function(){ 453 self.resetPositions.call(self); 454 },50); 455 },500); 456 457 } 458}; 459Slider.prototype.resetPositions = function() { 460 var self = this; 461 var w = -this.containerWidth; 462 for(var i = 0, il = this.slides.length; i < il; i += 1) { 463 if(this.mode == "row") { 464 if(this.direction == "left"){ 465 this.slides[i].style.left = ((-i + this.activeId) * w) +"px"; 466 } else if(this.direction == "right"){ 467 this.slides[i].style.left = ((i - this.activeId) * w) +"px"; 468 } 469 } 470 } 471 setTimeout(function(){ 472 for(var i = 0, il = self.slides.length; i < il; i += 1) { 473 self.slides[i].style.transition = "left 0.5s"; 474 } 475 },50); 476 return true; 477}; 478Slider.prototype.assignButtons = function(buttons) { 479 var self = this; 480 var btn; 481 for(var i = 0, il = buttons.length; i < il; i += 1){ 482 btn = buttons[i]; 483 btn.classList.add("slideExtBtn"); 484 this.externalButtons.push(btn); 485 this.slides[i].externalButton = btn; 486 if(!btn.slideId){ 487 btn.slideId = i; 488 } 489 btn.addEventListener("click",function(){ 490 self.callSlide(this.slideId); 491 }); 492 } 493 this.styleExtBtns(); 494}; 495Slider.prototype.styleExtBtns = function() { 496 for(var i = 0, il = this.externalButtons.length; i < il; i += 1){ 497 if(i == this.activeId){ 498 this.externalButtons[i].classList.add("active"); 499 } else { 500 this.externalButtons[i].classList.remove("active"); 501 } 502 } 503}; 504Slider.prototype.callSlide = function(id){ 505 var w = -this.containerWidth; 506 if(this.mode == "blur"){ 507 for(var i = 0, il = this.slides.length; i < il; i += 1){ 508 if(this.slides[i].index >= id) { 509 this.slides[i].style.left = "0"; 510 } else { 511 this.slides[i].style.left = w+"px"; 512 } 513 } 514 } else if (this.mode == "row"){ 515 for(var i = 0, il = this.slides.length; i < il; i += 1) { 516 this.slides[i].style.transition = "left 0.5s"; 517 if(this.direction == "left"){ 518 this.slides[i].style.left = ((-i + id) * w) +"px"; 519 } else if(this.direction == "right"){ 520 this.slides[i].style.left = ((i - id) * w) +"px"; 521 } 522 523 } 524 } 525 this.setActiveId(id); 526 this.activateMini(); 527 this.styleExtBtns(); 528}; 529Slider.prototype.setActiveId = function(id){ 530 var len = this.slides.length; 531 if(!id || len <= 1) { 532 this.activeId = 0; 533 } else if(id < len && id > -1) { 534 this.activeId = id; 535 } 536 if(this.activeId > 0) { 537 this.prevId = this.activeId - 1; 538 } else { 539 this.prevId = len - 1; 540 } 541 if(this.activeId < len - 1) { 542 this.nextId = this.activeId + 1; 543 } else { 544 this.nextId = 0; 545 } 546}; 547 548var createImgSliders = function(){ 549 var slider, containerWidth, slide, miniImg, id, isbox; 550 var boxes = document.getElementsByClassName("imageslider"); 551 for(var s = 0, sl = boxes.length; s < sl; s += 1){ 552 id = "imgageslider"+(s+1); 553 isbox = boxes[s]; 554 var images = boxes[s].querySelectorAll("img"); 555 slider = new Slider({ // mode: blur/row 556 box:isbox, 557 mode:"row", 558 orientation:"h", 559 direction:"left" 560 }); 561 containerWidth = slider.containerWidth; 562 563 for(var i = 0, il = images.length; i < il; i += 1){ 564 slide = slider.addSlide(); 565 slide.appendChild(images[i]); 566 slide.slider = slider; 567 images[i].style.height = "100%"; 568 images[i].index = i; 569 images[i].onload=function(){ 570 //console.log("images["+this.index+"].offsetWidth: "+this.offsetWidth); 571 if(this.offsetWidth > containerWidth){ 572 this.style.height = "auto"; 573 this.style.width = "100%"; 574 } 575 } 576 miniImg = new Image(); 577 miniImg.src = images[i].getAttribute("src"); 578 slide.mini.appendChild(miniImg); 579 slide.mini.style.overflow = "hidden"; 580 miniImg.style.position = "absolute"; 581 miniImg.style.height = "100%"; 582 miniImg.index = i; 583 miniImg.box = slide.mini; 584 miniImg.onload=function() { 585 //console.log(this.index+' W:'+this.offsetWidth+', H:'+this.offsetHeight+", slide.mini.offsetWidth: "+this.box.offsetWidth); 586 if(this.width > this.box.offsetWidth){ 587 this.style.left = -( this.box.offsetWidth/this.offsetWidth) / 2 + "%"; 588 } else if(this.width < this.box.offsetWidth){ 589 this.style.height = "auto"; 590 this.style.width = "100%"; 591 this.style.top = ( this.box.offsetHeight - this.offsetHeight) / 2 + "px"; // Firefox sagt miniImg.offsetHeight = 0 :-/ 592 } 593 } 594 } 595 } 596}; 597 598var createContentSliders = function(){ 599 var slider, slide, csbox, slds; 600 var boxes = document.getElementsByClassName("contentslider"); 601 //console.log("boxes.length:"+boxes.length) 602 var sliders = []; 603 for(var s = 0, sl = boxes.length; s < sl; s += 1){ 604 csbox = boxes[s]; 605 if(csbox.getAttribute("id") == null){ 606 csbox.id = "contentslider"+(s+1); 607 csbox.setAttribute("id",csbox.id); 608 }
609 slds = csbox.querySelectorAll("#"+csbox.id+">div"); // erhält verschachtelte divs 610 slider = new Slider({ // mode: blur/row 611 box:csbox, 612 mode:"row", 613 orientation:"h", 614 direction:"left" 615 }); 616 var slideClearDiv; maxHeight = 0; 617 for(var i = 0, il = slds.length; i < il; i += 1){ 618 slide = slider.addSlide(); 619 slider.addContentToSlide(i,slds[i]); 620 // slide.appendChild(slds[i]); 621 // slide.contentDiv = slds[i]; // ### // ### // ### // ### 622 // slideClearDiv = document.createElement("div"); 623 // slideClearDiv.style.clear = "both"; 624 // slds[i].appendChild(slideClearDiv); 625 if(slds[i].offsetHeight > maxHeight){ 626 maxHeight = slds[i].offsetHeight; 627 } 628 } 629 csbox.style.height = (maxHeight + 60) + "px"; 630 sliders.push(slider); 631 } 632 return sliders; 633};
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.