1/******/ (function() { // webpackBootstrap 2/******/ var __webpack_modules__ = ({ 3
4/***/ "./lib/drag_events.js": 5/*!****************************!*\ 6 !*** ./lib/drag_events.js ***! 7 \****************************/ 8/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 9 10"use strict"; 11__webpack_require__.r(__webpack_exports__); 12/* harmony import */ var _uf_functions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./uf-functions.js */ "./lib/uf-functions.js"); 13const { 14 assign 15} = Object; 16 17class DragEvents { 18 constructor(props) { 19 if (!props.element) return; 20 this.props = props; 21 const exampleProps = { 22 element: false, 23 // html element 24 click: false, 25 dragging: false, 26 vectors: ['x'], 27 // array // [ 'x', 'y', 'z' ] 28 affectParent: false, 29 wheel: false, 30 infinite: false, 31 // fill elements for infinite loop 32 33 friction: 1, 34 // number 35 animate: false, 36 steps: true, 37 // working on it 38 animating: { 39 x: .5 40 } // object // number negative or positive depands on vector 41 }; 42 43 this.setState = this.setState.bind(this); 44 this.updateState = this.updateState.bind(this); 45 this.init = this.init.bind(this); 46 this.render = this.render.bind(this); 47 this.fillElements = this.fillElements.bind(this); 48 this.focusElement = this.focusElement.bind(this); 49 this.focusOutElement = this.focusOutElement.bind(this); 50 this.blockClickReset = this.blockClickReset.bind(this); 51 this.blockClickOnMove = this.blockClickOnMove.bind(this); 52 this.onTouchStart = this.onTouchStart.bind(this); 53 this.onTouchMove = this.onTouchMove.bind(this); 54 this.onTouchEnd = this.onTouchEnd.bind(this); 55 this.setTransition = this.setTransition.bind(this); 56 this.setAnimation = this.setAnimation.bind(this); 57 this.wheel = this.wheel.bind(this); 58 this.wheelStart = this.wheelStart.bind(this); 59 this.wheelAct = this.wheelAct.bind(this); 60 this.wheelEnd = this.wheelEnd.bind(this); 61 this.checkScrollPosition = this.checkScrollPosition.bind(this); 62 const { 63 element, 64 vectors, 65 borders 66 } = this.props; 67 this.parent = element.parentNode; 68 this.children = [...element.children]; 69 this.vectorsLength = vectors.length; 70 this.coreChildrenSizes = [...this.children].map(child => { 71 return { 72 x: child.offsetWidth, 73 y: child.offsetHeight 74 }; 75 }); 76 this.coreChildrenSize = { 77 x: undefined, 78 y: undefined, 79 z: undefined 80 }; 81 vectors.map(v => this.coreChildrenSize[v] = this.coreChildrenSizes.reduce((sum, elem) => sum + elem[v], 0)); 82 const childrenSizes = this.coreChildrenSizes; 83 const childrenSize = { 84 x: undefined, 85 y: undefined, 86 z: undefined 87 }; 88 vectors.map(v => childrenSize[v] = childrenSizes.reduce((sum, elem) => sum + elem[v], 0)); 89 const childrenPositions = [...this.children].map((child, i) => { 90 return { 91 x: 0, 92 y: 0, 93 z: 0 94 }; 95 }); 96 childrenPositions.forEach((child, i) => vectors.map(v => childrenPositions[i][v] = childrenSizes[i][v] - childrenSizes[i][v] * (i + 1))); 97 this.state = { 98 event: undefined, 99 eventProps: undefined, 100 target: undefined, 101 wheel_marker: true, 102 wheel_counter: 0, 103 wheel_delta: undefined, 104 wheel_vector: undefined, 105 movingDetected: undefined, 106 clickDetecting: undefined, 107 breakingAnimationMoves: [], 108 draggingReady: true, 109 dragstart: undefined, 110 cursorStartPosition: { 111 x: 0, 112 y: 0, 113 z: 0 114 }, 115 lastPoint: undefined, 116 lastTime: undefined, 117 moveTime: undefined, 118 cursorMovePosition: { 119 x: 0, 120 y: 0, 121 z: 0 122 }, 123 moving: undefined, 124 movingFromStart: undefined, 125 averangeSpeed: undefined, 126 direction: { 127 x: 0, 128 y: 0, 129 z: 0 130 }, 131 elementSize: { 132 x: element.offsetWidth, 133 y: element.offsetHeight, 134 z: 0 135 }, 136 parentSize: { 137 x: this.parent.offsetWidth, 138 y: this.parent.offsetHeight, 139 z: 0 140 }, 141 onMovePosition: { 142 x: 0, 143 y: 0, 144 z: 0 145 }, 146 moveGoalPosition: { 147 x: 0, 148 y: 0, 149 z: 0 150 }, 151 elementPosition: { 152 x: 0, 153 y: 0, 154 z: 0 155 }, 156 elementPositionInfinite: { 157 x: 0, 158 y: 0, 159 z: 0 160 }, 161 elementPositionTemporary: { 162 x: 0, 163 y: 0, 164 z: 0 165 }, 166 timeOut: undefined, 167 animationTimeOut: undefined, 168 moveTimeOut: undefined, 169 lastTouchMoves: undefined, 170 movingStop: undefined, 171 v0: { 172 x: 0, 173 y: 0, 174 z: 0 175 }, 176 t: { 177 x: undefined, 178 y: undefined, 179 z: undefined 180 }, 181 S: { 182 x: 0, 183 y: 0, 184 z: 0 185 }, 186 childrenSizes: childrenSizes, 187 childrenPositions: childrenPositions, 188 childrenSize: childrenSize, 189 clonedElements: { 190 x: [], 191 y: [], 192 z: [] 193 }, 194 fillElementsCount: { 195 x: 0, 196 y: 0, 197 z: 0 198 } // for log information 199 }; 200 201 this.init(); 202 } 203 setState(props) { 204 assign(this.state, props); 205 this.render(this.cb); 206 } 207 updateState(props) { 208 assign(this.state, props); 209 } 210 init() { 211 const { 212 element, 213 dragging, 214 wheel, 215 affectParent, 216 infinite, 217 animating, 218 vectors 219 } = this.props; 220 this.updateState({ 221 event: 'init' 222 }); 223 this.checkScrollPosition(); 224 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(window, 'scroll', this.checkScrollPosition, false); 225 if (affectParent) { 226 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(this.parent, 'mouseover', this.focusElement, false); // needed on site refresh 227 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(this.parent, 'mouseenter', this.focusElement, false); 228 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(this.parent, 'touchstart', this.focusElement, false); 229 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(this.parent, 'mouseleave', this.focusOutElement, false); 230 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(this.parent, 'touchend', this.focusOutElement, false); 231 } else { 232 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(element, 'mouseenter', this.focusElement, false); 233 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(element, 'touchstart', this.focusElement, false); 234 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(element, 'mouseleave', this.focusOutElement, false); 235 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(element, 'touchend', this.focusOutElement, false); 236 } 237 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'touchstart', this.blockClickReset, false); 238 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'touchmove', this.blockClickOnMove, false); 239 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'mousedown', this.blockClickReset, false); 240 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'mousemove', this.blockClickOnMove, false); 241 if (dragging) { 242 if (affectParent) { 243 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(this.parent, 'mousedown', this.onTouchStart, false); 244 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(this.parent, 'touchstart', this.onTouchStart, false); 245 } else { 246 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(element, 'mousedown', this.onTouchStart, false); 247 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(element, 'touchstart', this.onTouchStart, false); 248 } 249 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'mousemove', this.onTouchMove, false); 250 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'touchmove', this.onTouchMove, false); 251 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'touchend', this.onTouchEnd, false); 252 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, 'mouseup', this.onTouchEnd, false); 253 } 254 if (wheel) { 255 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(document, _uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.mouseWheel, this.wheel, false); 256 } 257 const loadEvents = event => { 258 const { 259 childrenSize 260 } = this.state; 261 this.updateState({ 262 childrenSizes: this.children.map(child => ({ 263 x: child.offset().width, 264 y: child.offset().height 265 })), 266 childrenPositions: this.children.map((child, i) => ({ 267 x: child.offset().width - child.offset().width * (i + 1), 268 y: child.offset().height - child.offset().height * (i + 1) 269 })) 270 }); 271 vectors.map(v => childrenSize[v] = this.state.childrenSizes.reduce((sum, elem) => sum + elem[v], 0)); 272 this.updateState({ 273 childrenSize 274 }); 275 if (infinite) this.fillElements(this.state.elementPosition); 276 }; 277 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(window, 'load', e => { 278 setTimeout(() => { 279 this.setState({ 280 event: 'load', 281 eventProps: e 282 }); 283 loadEvents('load'); 284 animating && (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.isObject)(animating) && this.setAnimation(animating); 285 }, 1000); 286 }, false); 287 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.addEventListener)(window, 'resize', e => { 288 loadEvents('resize'); 289 this.setState({ 290 elementSize: { 291 x: element.offsetWidth, 292 y: element.offsetHeight, 293 z: 0 294 }, 295 parentSize: { 296 x: this.parent.offsetWidth, 297 y: this.parent.offsetHeight, 298 z: 0 299 }, 300 event: 'resize', 301 eventProps: e 302 }); 303 }, false); 304 } 305 checkScrollPosition() { 306 const { 307 animating 308 } = this.props; 309 const { 310 animationTimeOut 311 } = this.state; 312 animationTimeOut && (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimationFrame)(animationTimeOut); 313 (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.elementInWindow)(this.props.element) && animating && (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.isObject)(animating) && this.setAnimation(animating); 314 } 315 focusElement(e) { 316 this.props.element.addAttr('active_drag', true); 317 } 318 focusOutElement(e) { 319 this.props.element.rmAttr('active_drag'); 320 } 321 blockClickReset() { 322 this.updateState({ 323 movingDetected: false 324 }); 325 setTimeout(() => this.updateState({ 326 clickDetecting: true 327 }), 50); 328 } 329 blockClickOnMove() { 330 if (this.state.clickDetecting) this.updateState({ 331 movingDetected: true, 332 clickDetecting: false 333 }); 334 } 335 onTouchStart(e) { 336 const { 337 element, 338 vectors 339 } = this.props; 340 const { 341 draggingReady, 342 timeOut, 343 elementPosition, 344 animationTimeOut 345 } = this.state; 346 animationTimeOut && (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimationFrame)(animationTimeOut); // stop animations on 347 348 if (!draggingReady) return; 349 if (!element.hasAttr('active_drag')) return; 350 if (e.type.indexOf('mouse') > -1) (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.preventEventDefaults)(e); 351 timeOut && (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimationFrame)(timeOut); // reset touchend animations 352 353 this.updateState({ 354 dragstart: true, 355 lastTime: { 356 x: Date.now(), 357 y: Date.now() 358 }, 359 moveTime: { 360 x: 0, 361 y: 0, 362 z: 0 363 }, 364 cursorStartPosition: (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.checkCursor)(e), 365 cursorMovePosition: (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.checkCursor)(e), 366 lastPoint: (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.checkCursor)(e), 367 moving: { 368 x: 0, 369 y: 0, 370 z: 0 371 }, 372 movingFromStart: { 373 x: 0, 374 y: 0, 375 z: 0 376 }, 377 averangeSpeed: 0, 378 direction: { 379 x: 0, 380 y: 0, 381 z: 0 382 }, 383 lastTouchMoves: [], 384 elementPositionTemporary: assign({}, elementPosition) 385 }); 386 } 387 onTouchMove(e) { 388 const { 389 vectors 390 } = this.props; 391 const { 392 vectorsLength 393 } = this; 394 const { 395 dragstart, 396 lastTime, 397 moveTime, 398 cursorStartPosition, 399 lastPoint, 400 direction, 401 lastTouchMoves, 402 moving, 403 movingFromStart, 404 moveTimeOut, 405 onMovePosition, 406 elementPosition, 407 elementPositionInfinite, 408 elementPositionTemporary, 409 elementSize, 410 parentSize, 411 childrenSize 412 } = this.state; 413 if (dragstart) { 414 moveTimeOut && (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimationFrame)(moveTimeOut); // reset 415
416 const cursorPos = (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.checkCursor)(e); 417 this.updateState({ 418 movingStop: true 419 }); 420 vectors.map(v => { 421 moveTime[v] = Date.now() - lastTime[v]; 422 moving[v] = cursorPos[v] - lastPoint[v]; // make moving averange from last 5 steps (?) 423 424 movingFromStart[v] = cursorPos[v] - cursorStartPosition[v]; 425 movingFromStart[v] < 0 ? direction[v] = 1 : movingFromStart[v] > 0 ? direction[v] = -1 : direction[v] = 0; 426 lastTime[v] = Date.now(); 427 lastPoint[v] = cursorPos[v]; 428 }); 429 this.updateState({ 430 direction, 431 moveTime, 432 moving, 433 lastTime, 434 lastPoint 435 }); 436 let movingDiagonal = 0; 437 switch (vectorsLength) { 438 case 1: 439 movingDiagonal = Math.floor(moving[vectors[0]]); 440 break; 441 case 2: 442 movingDiagonal = Math.floor(Math.sqrt(Math.pow(Math.floor(moving[vectors[0]]), 2) + Math.pow(Math.floor(moving[vectors[1]]), 2))); // a2 + b2 = c2 443 break; 444 // case 3 : 445 // // xy a2 + b2 = c2 than xz a2 + b2 = c2 than xyz Math.sqrt( c2 ) * 2 + Math.sqrt( c2 ) * 2 = d2 446 // break; 447 } 448 449 const detectMoveSpeed = () => { 450 lastTouchMoves.push(movingDiagonal); 451 if (lastTouchMoves.length > 3) lastTouchMoves.shift(); 452 let averangeSpeedLocal = 0; 453 lastTouchMoves.map(val => { 454 averangeSpeedLocal = averangeSpeedLocal + val; 455 }); 456 this.updateState({ 457 averangeSpeed: Math.abs(averangeSpeedLocal) / 3 458 }); 459 if (this.state.averangeSpeed < 1) this.updateState({ 460 movingStop: true 461 }); 462 if (this.state.movingStop) { 463 return; 464 } else { 465 this.updateState({ 466 moveTimeOut: (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.requestAnimationFrame)(detectMoveSpeed) 467 }); 468 } 469 }; 470 if (this.state.movingStop) { 471 this.updateState({ 472 movingStop: false 473 }); 474 detectMoveSpeed(0); 475 } 476 477 // touch moving 478 vectors.map(v => { 479 onMovePosition[v] = cursorPos[v] - this.state.cursorStartPosition[v]; 480 elementPosition[v] = elementPositionTemporary[v] + onMovePosition[v]; 481 elementPositionInfinite[v] = elementPosition[v] % childrenSize[v] - childrenSize[v]; 482 }); 483 484 // setState moving vals 485 this.setState({ 486 cursorMovePosition: cursorPos, 487 elementPosition, 488 elementPositionInfinite, 489 onMovePosition, 490 event: 'touchmove', 491 eventProps: e 492 }); 493 } 494 } 495 onTouchEnd(e) { 496 const { 497 vectors, 498 animate 499 } = this.props; 500 let { 501 friction 502 } = this.props; 503 if (!friction) friction = 1; 504 const { 505 vectorsLength 506 } = this; 507 const { 508 dragstart, 509 averangeSpeed, 510 moveTime, 511 cursorMovePosition, 512 cursorStartPosition, 513 onMovePosition, 514 elementPosition, 515 moveTimeOut, 516 direction, 517 v0, 518 S, 519 t, 520 movingDetected 521 } = this.state; 522 if (dragstart) { 523 if (moveTimeOut) (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimationFrame)(moveTimeOut); 524 vectors.map(v => { 525 onMovePosition[v] = cursorMovePosition[v] - cursorStartPosition[v]; 526 if (!(averangeSpeed === 0 || moveTime[v] === 0)) { 527 v0[v] = Math.floor(Math.abs(averangeSpeed / moveTime[v]) * 1000); 528 t[v] = v0[v] / friction; 529 S[v] = Math.floor(friction * Math.pow(t[v], 2) / 2 / 1000); 530 } 531 }); 532 this.updateState({ 533 dragstart: false, 534 v0, 535 S, 536 t 537 }); 538 let currentMove = { 539 x: 0, 540 y: 0, 541 z: 0 542 }, 543 moveGoalPosition = { 544 x: 0, 545 y: 0, 546 z: 0 547 }, 548 stepValue = { 549 x: 0, 550 y: 0, 551 z: 0 552 }, 553 frames = 0; 554 let timeAverage = 0; 555 switch (vectorsLength) { 556 case 1: 557 timeAverage = Math.floor(t[vectors[0]]); 558 break; 559 case 2: 560 timeAverage = Math.floor(Math.sqrt(Math.pow(Math.floor(t[vectors[0]]), 2) + Math.pow(Math.floor(t[vectors[1]]), 2))); // a2 + b2 = c2 561 break; 562 // case 3 : 563 // // xy a2 + b2 = c2 than xz a2 + b2 = c2 than xyz Math.sqrt( c2 ) * 2 + Math.sqrt( c2 ) * 2 = d2 564 // break; 565 } 566 567 vectors.map(v => { 568 frames = Math.floor(timeAverage * 60 * .001); // time in ms / 1000 * fps 569 stepValue[v] = Math.floor(S[v] / frames); 570 }); 571 let breakingAnimationMoves = new Array(); 572 for (let currentFrame = 1; currentFrame <= frames; currentFrame++) { 573 vectors.map(v => { 574 currentMove[v] = Math.floor(stepValue[v] / frames * (frames - currentFrame)); 575 if (direction[v] === -1) moveGoalPosition[v] = moveGoalPosition[v] + currentMove[v]; 576 if (direction[v] === 1) moveGoalPosition[v] = moveGoalPosition[v] - currentMove[v]; 577 }); 578 breakingAnimationMoves.push(assign({}, moveGoalPosition)); 579 } 580 if (!movingDetected) { 581 this.setState({ 582 breakingAnimationMoves, 583 moveGoalPosition, 584 onMovePosition, 585 elementPositionTemporary: assign({}, elementPosition), 586 event: 'click', 587 eventProps: e 588 }); 589 } else { 590 this.setState({ 591 breakingAnimationMoves, 592 moveGoalPosition, 593 onMovePosition, 594 elementPositionTemporary: assign({}, elementPosition), 595 event: 'touchend', 596 eventProps: e 597 }); 598 if (animate) this.setTransition(breakingAnimationMoves); 599 } 600 } 601 } 602 fillElements(position) { 603 const { 604 children 605 } = this; 606 const { 607 element, 608 vectors 609 } = this.props; 610 const { 611 parentSize, 612 childrenSize 613 } = this.state; 614 const setClonedElements = { 615 x: [], 616 y: [], 617 z: [] 618 }; 619 const count = { 620 x: undefined, 621 y: undefined, 622 z: undefined 623 }; 624 vectors.map(v => { 625 // how many elements add on left side, how many on right side 626 count[v] = Math.abs(Math.ceil((parentSize[v] + position[v]) / childrenSize[v]) + Math.
626ceil((parentSize[v] - position[v]) / childrenSize[v])) + 1; 627 const renderMultipled = (amount, multipled) => { 628 amount = amount - 1; 629 if (amount > 0) { 630 multipled = multipled.concat(children); 631 return renderMultipled(amount, multipled); 632 } else { 633 return multipled; 634 } 635 }; 636 setClonedElements[v] = renderMultipled(count[v], children); 637 this.setState({ 638 clonedElements: setClonedElements, 639 fillElementsCount: count 640 }); 641 element.innerHTML = ''; 642 children.map(child => element.appendChild(child)); 643 // console.log( '< --- break --- >' ) 644 this.state.clonedElements[v].map((child, index) => { 645 const cloned = document.createElement('div'); 646 [...child.children].forEach(child => cloned.innerHTML = child.outerHTML); 647 [...child.attributes].map(attribute => cloned.setAttribute(attribute.name, attribute.value)); 648 cloned.setAttribute('key', index); 649 element.appendChild(cloned); 650 }); 651 // console.log( '< --- end --- >' ) 652 }); 653 } 654 655 setTransition(moves) { 656 const { 657 vectors, 658 animating 659 } = this.props; 660 const { 661 onMovePosition, 662 elementPosition, 663 elementPositionInfinite, 664 childrenSize 665 } = this.state; 666 let i = 0, 667 position = moves[i], 668 frames = moves.length; 669 const onMovePositionTemporary = { 670 x: 0, 671 y: 0, 672 z: 0 673 }; 674 const elementPositionTemporary = { 675 x: 0, 676 y: 0, 677 z: 0 678 }; 679 vectors.map(v => { 680 onMovePositionTemporary[v] = onMovePosition[v]; 681 elementPositionTemporary[v] = elementPosition[v]; 682 }); 683 const animate = () => { 684 if (i < frames) { 685 position = moves[i]; 686 i++; 687 } else { 688 animating && (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.isObject)(animating) && this.setAnimation(animating); 689 return; // end animation 690 } 691 692 vectors.map(v => { 693 onMovePosition[v] = onMovePositionTemporary[v] + position[v]; 694 elementPosition[v] = elementPositionTemporary[v] + position[v]; 695 elementPositionInfinite[v] = (elementPositionTemporary[v] + position[v]) % childrenSize[v] - childrenSize[v]; 696 }); 697 this.setState({ 698 timeOut: (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.requestAnimationFrame)(animate), 699 onMovePosition, 700 elementPosition, 701 elementPositionInfinite, 702 event: 'animate', 703 eventProps: undefined 704 }); 705 }; 706 animate(); 707 } 708 setAnimation(animating) { 709 const { 710 infinite, 711 vectors 712 } = this.props; 713 if (!animating || !infinite) return; 714 const animate = e => { 715 const { 716 elementPosition, 717 elementPositionInfinite, 718 childrenSize 719 } = this.state; 720 vectors.map(v => { 721 elementPosition[v] = elementPosition[v] - animating[v]; 722 elementPositionInfinite[v] = (elementPositionInfinite[v] - animating[v]) % childrenSize[v] - childrenSize[v]; 723 }); 724 this.setState({ 725 elementPosition, 726 elementPositionInfinite, 727 animationTimeOut: (0,_uf_functions_js__WEBPACK_IMPORTED_MODULE_0__.requestAnimationFrame)(animate), 728 event: 'animate', 729 eventProps: undefined 730 }); 731 }; 732 animate(); 733 } 734 wheel(e) { 735 if (!this.props.element.hasAttr('active_drag')) return; 736 this.updateState({ 737 wheel_counter: this.state.wheel_counter + 1 738 }); 739 if (this.state.wheel_marker) this.wheelStart(e); 740 return false; 741 } 742 wheelStart(e) { 743 this.updateState({ 744 wheel_marker: false 745 }); 746 this.wheelAct(e); 747 e = e || window.event; 748 if (this.props.element.contains(e.target)) { 749 let delta = 0, 750 vector; 751 752 // chrome 753 if (e.wheelDelta) { 754 if (0 < Math.abs(e.wheelDeltaX)) { 755 delta = e.wheelDeltaX; 756 vector = 'x'; 757 } else if (0 < Math.abs(e.wheelDeltaY)) { 758 delta = e.wheelDeltaY; 759 vector = 'y'; 760 } 761 } 762 763 // firefox 764 if (e.detail) { 765 if (e.axis == 1) { 766 delta = e.detail * -1; 767 vector = 'x'; 768 } else if (e.axis == 2) { 769 delta = e.detail * -1; 770 vector = 'y'; 771 } 772 } 773 this.setState({ 774 wheel_delta: delta, 775 wheel_vector: vector, 776 event: 'wheel', 777 eventProps: e 778 }); 779 } 780 } 781 wheelAct(e) { 782 const { 783 wheel_counter 784 } = this.state; 785 const checkCounter = wheel_counter; 786 setTimeout(() =>
786 checkCounter == wheel_counter ? this.wheelEnd(e) : this.wheelAct(e), 250); 787 } 788 wheelEnd() { 789 this.updateState({ 790 wheel_marker: true, 791 wheel_counter: 0 792 }); 793 } 794 render(cb) { 795 if (!cb || !this.props || !this.props.element) return; 796 this.cb = cb; 797 cb(this); 798 } 799} 800/* harmony default export */ __webpack_exports__["default"] = (DragEvents); 801 802// infinite 3d elements are putted on axis x+y, same as cursor you can move only on axis x+y 803// you can rotate a ball in 3d on flat floor 804 805// 3d moving elements its real axis x+y+z 806 807// add steps 808// what about sizing elements and row 809// fixes - ondrag in different direction than vectors, stop moving 810 811/***/ }), 812
vendor: 2,798 bytes, lines 813-901
813/***/ "./lib/mu-functions.js": 814/*!*****************************!*\ 815 !*** ./lib/mu-functions.js ***! 816 \*****************************/ 817/***/ (function() { 818 819if (!Array.from) { 820 Array.from = function () { 821 var toStr = Object.prototype.toString; 822 var isCallable = function (fn) { 823 return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; 824 }; 825 var toInteger = function (value) { 826 var number = Number(value); 827 if (isNaN(number)) { 828 return 0; 829 } 830 if (number === 0 || !isFinite(number)) { 831 return number; 832 } 833 return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); 834 }; 835 var maxSafeInteger = Math.pow(2, 53) - 1; 836 var toLength = function (value) { 837 var len = toInteger(value); 838 return Math.min(Math.max(len, 0), maxSafeInteger); 839 }; 840 841 // The length property of the from method is 1. 842 return function from(arrayLike /*, mapFn, thisArg */) { 843 // 1. Let C be the this value. 844 var C = this; 845 846 // 2. Let items be ToObject(arrayLike). 847 var items = Object(arrayLike); 848 849 // 3. ReturnIfAbrupt(items). 850 if (arrayLike == null) { 851 throw new TypeError("Array.from requires an array-like object - not null or undefined"); 852 } 853 854 // 4. If mapfn is undefined, then let mapping be false. 855 var mapFn = arguments.length > 1 ? arguments[1] : void undefined; 856 var T; 857 if (typeof mapFn !== 'undefined') { 858 // 5. else 859 // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. 860 if (!isCallable(mapFn)) { 861 throw new TypeError('Array.from: when provided, the second argument must be a function'); 862 } 863 864 // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. 865 if (arguments.length > 2) { 866 T = arguments[2]; 867 } 868 } 869 870 // 10. Let lenValue be Get(items, "length"). 871 // 11. Let len be ToLength(lenValue). 872 var len = toLength(items.length); 873 874 // 13. If IsConstructor(C) is true, then 875 // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len. 876 // 14. a. Else, Let A be ArrayCreate(len). 877 var A = isCallable(C) ? Object(new C(len)) : new Array(len); 878 879 // 16. Let k be 0. 880 var k = 0; 881 // 17. Repeat, while k < len… (also steps a - h) 882 var kValue; 883 while (k < len) { 884 kValue = items[k]; 885 if (mapFn) { 886 A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); 887 } else { 888 A[k] = kValue; 889 } 890 k += 1; 891 } 892 // 18. Let putStatus be Put(A, "length", len, true). 893 A.length = len; 894 // 20. Return A. 895 return A; 896 }; 897 }(); 898} 899 900/***/ }), 901
902/***/ "./lib/uf-functions.js": 903/*!*****************************!*\ 904 !*** ./lib/uf-functions.js ***! 905 \*****************************/ 906/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 907 908"use strict"; 909__webpack_require__.r(__webpack_exports__); 910/* harmony export */ __webpack_require__.d(__webpack_exports__, { 911/* harmony export */ addEventListener: function() { return /* binding */ addEventListener; }, 912/* harmony export */ cancelAnimationFrame: function() { return /* binding */ cancelAnimationFrame; }, 913/* harmony export */ checkCursor: function() { return /* binding */ checkCursor; }, 914/* harmony export */ elementInWindow: function() { return /* binding */ elementInWindow; }, 915/* harmony export */ isObject: function() { return /* binding */ isObject; }, 916/* harmony export */ isString: function() { return /* binding */ isString; }, 917/* harmony export */ mouseWheel: function() { return /* binding */ mouseWheel; }, 918/* harmony export */ preventEventDefaults: function() { return /* binding */ preventEventDefaults; }, 919/* harmony export */ requestAnimationFrame: function() { return /* binding */ requestAnimationFrame; } 920/* harmony export */ }); 921/* harmony import */ var _mu_functions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mu-functions.js */ "./lib/mu-functions.js"); 922/* harmony import */ var _mu_functions_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_mu_functions_js__WEBPACK_IMPORTED_MODULE_0__); 923// 924// turbofunctions() v 3.0 925// 926 927 928const isString = value => typeof value === 'string' || value instanceof String; 929const isObject = obj => obj !== null && typeof obj === 'object' && !Array.isArray(obj); 930function preventEventDefaults(e) { 931 if (!e) { 932 e = window.event; 933 } 934 if (e.preventDefault) { 935 e.preventDefault(); 936 } 937 e.returnValue = false; 938} 939 940// getSTP() == Scroll from Top Position 941function getSTP() { 942 var d = document.documentElement, 943 st = (window.pageYOffset || d.scrollTop) - (d.clientTop || 0); 944 return parseInt(st); 945} 946const requestAnimationFrame = f => { 947 return window.requestAnimationFrame(f) || window.mozRequestAnimationFrame(f) || window.webkitRequestAnimationFrame(f) || window.msRequestAnimationFrame(f) || function (f) { 948 return setTimeout(f, 1000 / 60); 949 }; 950}; 951const cancelAnimationFrame = f => { 952 return window.cancelAnimationFrame(f) || 953 // window.webkitCancelAnimationFrame(f) || 954 // window.webkitCancelRequestAnimationFrame(f) || 955 // window.mozCancelAnimationFrame(f) || 956 function (f) { 957 clearTimeout(f); 958 }; 959}; 960const mouseWheel = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel'; 961const addEventListener = (element, type, callback) => { 962 if (element.addEventListener) { 963 element.addEventListener(type, callback, false); 964 } else if (element.attachEvent) { 965 element.attachEvent('on' + type, callback); 966 } 967}; 968Element.prototype.setProperty = function (property, value) { 969 this.style.setProperty('-webkit-' + property, value); 970 this.style.setProperty('-moz-' + property, value); 971 this.style.setProperty('-ms-' + property, value); 972 this.style.setProperty('-o-' + property, value); 973 this.style.setProperty(property, value); 974 return this; 975}; 976Element.prototype.removeProperty = function (property) { 977 this.style.removeProperty('-webkit-' + property); 978 this.style.removeProperty('-moz-' + property); 979 this.style.removeProperty('-ms-' + property); 980 this.style.removeProperty('-o-' + property); 981 this.style.removeProperty(property); 982 return this; 983}; 984const transform = (element, prop) => { 985 element.style.transform = prop; 986 element.style.OTransform = prop; // Opera 987 element.style.msTransform = prop; // IE 9 988 element.style.MozTransform = prop; // Firefox 989 element.style.WebkitTransform = prop; // Safari and Chrome 990}; 991 992Element.prototype.transform = function (prop) { 993 return transform(this, prop); 994}; 995const checkCursor = e => { 996 if (e.type == 'mousedown') { 997 var e = e; 998 } else if (e.touches) { 999 var e = e.touches[0]; 1000 } 1001 return { 1002 x: e.clientX, 1003 y: e.clientY 1004 }; 1005}; 1006 1007// document.getElementById('single_content').offset().top 1008Element.prototype.offset = function () { 1009 var _t, top, left, height, width, obj; 1010 _t = this.getBoundingClientRect(); 1011 top = getSTP() + _t.top; 1012 left = _t.left; 1013 height = _t.height; 1014 width = _t.width; 1015 obj = { 1016 'top': parseInt(top), 1017 'left': parseInt(left), 1018 'width': parseInt(width), 1019 'height': parseInt(height) 1020 }; 1021 return obj; 1022}; 1023 1024// String.concatString(newString) 1025String.prototype.concatString = function (value) { 1026 if (!value) return this;
1027 if (typeof value === 'number' || 'boolean') value = String(value); 1028 if (value.length == 0) return this; 1029 var c = this, 1030 attr, 1031 attr_l, 1032 add_value, 1033 add_value_l, 1034 c_new = '', 1035 space; 1036 if (!c || c.length === 0) { 1037 c_new = value; 1038 } else { 1039 attr = c.split(' '); 1040 attr_l = attr.length; 1041 add_value = value.split(' '); 1042 add_value_l = add_value.length; 1043 for (var i = 0; i < attr_l; i++) { 1044 for (var a = 0; a < add_value_l; a++) { 1045 if (attr[i] === add_value[a]) { 1046 attr.splice(i, 1); 1047 // return 1048 } 1049 } 1050 } 1051 1052 attr = attr.concat(add_value); 1053 attr_l = attr.length; 1054 for (var i = 0; i < attr_l; i++) { 1055 space = ' '; 1056 if (i === attr_l - 1) space = ''; 1057 c_new += attr[i] + space; 1058 } 1059 } 1060 return c_new; 1061}; 1062String.prototype.removeFrom = function (value) { 1063 if (!value) return ''; 1064 if (!isString(value)) console.error('String.removeFrom( attribute shuld be a string )'); 1065 const c = this; 1066 let c_new = '', 1067 filteredList; 1068 if (!c || c.length === 0) { 1069 c_new = value; 1070 } else { 1071 let list = value.split(' '), 1072 rmList = c.split(' '); 1073 filteredList = list.filter(elem => rmList.filter(rmElem => elem.indexOf(rmElem) == -1 && elem).length > 0); 1074 } 1075 c_new = filteredList.join(' '); 1076 return c_new; 1077}; 1078 1079// element.hasAttr('class', 'active') 1080// will not add indexed value cuz its already indexed, make array 1081Element.prototype.hasAttr = function (attribute, thisValue) { 1082 var c = this.getAttribute(attribute); 1083 if (c) { 1084 if (!thisValue && thisValue !== false) { 1085 return true; 1086 } else if (typeof thisValue === 'boolean') { 1087 return thisValue; 1088 } else { 1089 thisValue = String(thisValue); 1090 var arr = c.split(' '), 1091 arr_l = arr.length; 1092 thisValue = thisValue.replace(/\s+/g, ''); 1093 for (var i = 0; i < arr_l; i++) { 1094 if (thisValue, arr[i] === thisValue) { 1095 return true; 1096 } else if (i == arr_l - 1) { 1097 return false; 1098 } 1099 } 1100 } 1101 } else { 1102 return false; 1103 } 1104}; 1105 1106// element.addAttr('attrname', 'attrvalue') 1107// no style support 1108Element.prototype.addAttr = function (attribute, thisValue = false) { 1109 if (typeof thisValue === 'number' || 'boolean') thisValue = thisValue.toString(); 1110 var c = this.getAttribute(attribute), 1111 attr, 1112 attr_l, 1113 add_value, 1114 add_value_l, 1115 c_new = '', 1116 space; 1117 if (!c || c.length === 0) { 1118 this.setAttribute(attribute, thisValue); 1119 } else { 1120 attr = c.split(' '); 1121 attr_l = attr.length; 1122 add_value = thisValue.split(' '); 1123 add_value_l = add_value.length; 1124 for (var i = 0; i < attr_l; i++) { 1125 for (var a = 0; a < add_value_l; a++) { 1126 if (attr[i] === add_value[a]) { 1127 // attr.splice(i, 1); 1128 return; 1129 } 1130 } 1131 } 1132 attr = attr.concat(add_value); 1133 attr_l = attr.length; 1134 for (var i = 0; i < attr_l; i++) { 1135 space = ' '; 1136 if (i === attr_l - 1) space = ''; 1137 c_new += attr[i] + space; 1138 } 1139 // console.log( 1140 // attr, '\n', 1141 // add_value, '\n', 1142 // c_new 1143 // ); 1144 1145 this.setAttribute(attribute, ''); 1146 if (c_new) this.setAttribute(attribute, c_new); 1147 } 1148 return this; 1149}; 1150 1151// element.rmAttr('attrname', 'attrvalue attrvalue2 attrvalue3') 1152Element.prototype.rmAttr = function (attribute, thisValue) { 1153 var c = this.getAttribute(attribute), 1154 attrArr, 1155 attrArrLen, 1156 rmValueArr, 1157 c_new = ''; 1158 if (c) { 1159 if (!thisValue) { 1160 this.removeAttribute(attribute); 1161 } else { 1162 let spliced = false; 1163 attrArr = c.split(' '); 1164 rmValueArr = thisValue.split(' '); 1165 attrArr.map((attr, i) => { 1166 rmValueArr.map(value => { 1167 if (attr === value) { 1168 attrArr.splice(i, 1); 1169 spliced = true; 1170 } 1171 }); 1172 }); 1173 if (!spliced) return; 1174 attrArrLen = attrArr.length; 1175 attrArr.map((attr, i) => { 1176 c_new += attr + `${i === attrArrLen - 1 ? '' : ' '}`; 1177 }); 1178 this.setAttribute(attribute, ''); 1179 if (c_new) this.setAttribute(attribute, c_new); 1180 } 1181 } else { 1182 this.removeAttribute(attribute); 1183 } 1184 return this; 1185}; 1186 1187// element.addClass('classvalue') 1188Element.prototype.addClass = function (thisValue) { 1189 this.addAttr('class', thisValue); 1190 return this; 1191}; 1192 1193// element.rmClass('classvalue') 1194Element.prototype.rmClass = function (thisValue) { 1195 this.rmAttr('class', thisValue); 1196 return this; 1197}; 1198 1199// element.getClosest('.class') 1200Element.prototype.getClosest = function (selector) { 1201 let elem = this; 1202 while (elem) { 1203 if (elem === document.documentElement) return false;
1204 if (elem.parentNode.querySelector(selector)) return elem; 1205 elem = elem.parentNode; 1206 } 1207 return false; 1208}; 1209const elementInWindow = element => { 1210 return getSTP() + window.innerHeight > parseInt(element.offset().top) && getSTP() + window.innerHeight < parseInt(element.offset().top) + window.innerHeight + parseInt(element.offsetHeight); 1211}; 1212 1213 1214/***/ })
vendor: 3,665 bytes, lines 1214-1302
1214 1215 1216/******/ }); 1217/************************************************************************/ 1218/******/ // The module cache 1219/******/ var __webpack_module_cache__ = {}; 1220/******/ 1221/******/ // The require function 1222/******/ function __webpack_require__(moduleId) { 1223/******/ // Check if module is in cache 1224/******/ var cachedModule = __webpack_module_cache__[moduleId]; 1225/******/ if (cachedModule !== undefined) { 1226/******/ return cachedModule.exports; 1227/******/ } 1228/******/ // Create a new module (and put it into the cache) 1229/******/ var module = __webpack_module_cache__[moduleId] = { 1230/******/ // no module.id needed 1231/******/ // no module.loaded needed 1232/******/ exports: {} 1233/******/ }; 1234/******/ 1235/******/ // Execute the module function 1236/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 1237/******/ 1238/******/ // Return the exports of the module 1239/******/ return module.exports; 1240/******/ } 1241/******/ 1242/************************************************************************/ 1243/******/ /* webpack/runtime/compat get default export */ 1244/******/ !function() { 1245/******/ // getDefaultExport function for compatibility with non-harmony modules 1246/******/ __webpack_require__.n = function(module) { 1247/******/ var getter = module && module.__esModule ? 1248/******/ function() { return module['default']; } : 1249/******/ function() { return module; }; 1250/******/ __webpack_require__.d(getter, { a: getter }); 1251/******/ return getter; 1252/******/ }; 1253/******/ }(); 1254/******/ 1255/******/ /* webpack/runtime/define property getters */ 1256/******/ !function() { 1257/******/ // define getter functions for harmony exports 1258/******/ __webpack_require__.d = function(exports, definition) { 1259/******/ for(var key in definition) { 1260/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 1261/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 1262/******/ } 1263/******/ } 1264/******/ }; 1265/******/ }(); 1266/******/ 1267/******/ /* webpack/runtime/hasOwnProperty shorthand */ 1268/******/ !function() { 1269/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } 1270/******/ }(); 1271/******/ 1272/******/ /* webpack/runtime/make namespace object */ 1273/******/ !function() { 1274/******/ // define __esModule on exports 1275/******/ __webpack_require__.r = function(exports) { 1276/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 1277/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 1278/******/ } 1279/******/ Object.defineProperty(exports, '__esModule', { value: true }); 1280/******/ }; 1281/******/ }(); 1282/******/ 1283/************************************************************************/ 1284var __webpack_exports__ = {}; 1285// This entry need to be wrapped in an IIFE because it need to be in strict mode. 1286!function() { 1287"use strict"; 1288/*!**********************************!*\ 1289 !*** ./src/tabs/front-script.js ***! 1290 \**********************************/ 1291__webpack_require__.r(__webpack_exports__); 1292/* harmony import */ var _lib_drag_events_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/drag_events.js */ "./lib/drag_events.js"); 1293Element.prototype.setProperty = function (property, value) { 1294 this.style.setProperty('-webkit-' + property, value); 1295 this.style.setProperty('-moz-' + property, value); 1296 this.style.setProperty('-ms-' + property, value); 1297 this.style.setProperty('-o-' + property, value); 1298 this.style.setProperty(property, value); 1299 return this; 1300}; 1301 1302const tabsContainers = document.querySelectorAll('.pp-tabs--container');
1303Array.from(tabsContainers).forEach(tabsContainer => { 1304 // const bgColor = tabsContainer.getAttribute('data-bg'); 1305 1306 const tabsContent = tabsContainer.querySelector('.pp-tabs--content'); 1307 const tabsContentChildren = tabsContent.children; 1308 const element = tabsContainer.querySelector('.pp-tabs--navigation'); 1309 const elementChildren = element.children; 1310 new _lib_drag_events_js__WEBPACK_IMPORTED_MODULE_0__["default"]({ 1311 element: element, 1312 click: true, 1313 dragging: true, 1314 vectors: ['x'], 1315 affectParent: true, 1316 wheel: true, 1317 friction: 3, 1318 animate: true 1319 }).render(attributes => { 1320 const { 1321 props, 1322 parent, 1323 state, 1324 updateState, 1325 setTransition 1326 } = attributes; 1327 const { 1328 element 1329 } = props; 1330 const { 1331 cursorMovePosition, 1332 elementSize, 1333 parentSize, 1334 event, 1335 eventProps, 1336 wheel_delta, 1337 elementPosition 1338 } = state; 1339 const tabClick = target => { 1340 Array.from(elementChildren).map((tab, i) => { 1341 if (target === tab || target.getClosest('.pp-tabs--tab') === tab) { 1342 // Array.from(elementChildren).map( tab => tab.classList.remove('pp-tabs--tab__active').classList.remove(bgColor) ) 1343 Array.from(elementChildren).map(tab => tab.classList.remove('pp-tabs--tab__active')); 1344 Array.from(tabsContentChildren).map(contentTab => contentTab.classList.remove('pp-tabs--tab-content__active')); 1345 1346 // tab.classList.add('pp-tabs--tab__active').classList.add(bgColor) 1347 tab.classList.add('pp-tabs--tab__active'); 1348 tabsContentChildren[i].classList.add('pp-tabs--tab-content__active'); 1349 const dataAnchor = tab.getAttribute('data-anchor'); 1350 if (dataAnchor) window.location.hash = dataAnchor; 1351 } 1352 }); 1353 }; 1354 if (event === 'init') { 1355 Array.from(elementChildren).map(tab => window.location.hash.substring(1) === tab.getAttribute('data-anchor') && tabClick(tab)); 1356 1357 // set active tab position 1358 // 1359 } 1360 1361 if (event === 'click') tabClick(eventProps.target); 1362 1363 // not sided tabs 1364 const hasSided = tabsContainer.hasAttr('class', 'pp-tabs--sided'); 1365 if (hasSided && window.innerWidth > 768) return; 1366 if (parentSize['x'] >= elementSize['x']) { 1367 // reset slider state when not allowed to move 1368 parent.classList.remove('has-movable'); 1369 updateState({ 1370 elementPosition: { 1371 x: 0 1372 } 1373 }); 1374 return; 1375 } 1376 let leftMargin, rightMargin; 1377 if (event === 'touchmove' || event === 'touchend' || event === 'animate' || event === 'click' || event === 'load' || event === 'resize') { 1378 leftMargin = 0; 1379 rightMargin = parentSize['x'] - elementSize['x']; 1380 attributes.state.elementPosition['x'] >= leftMargin ? parent.classList.add('x-start') : parent.classList.remove('x-start'); 1381 attributes.state.elementPosition['x'] <= rightMargin ? parent.classList.add('x-end') : parent.classList.remove('x-end'); 1382 if (parentSize['x'] <= elementSize['x']) { 1383 parent.classList.add('has-movable'); 1384 if (attributes.state.elementPosition['x'] >= leftMargin) updateState({ 1385 elementPosition: { 1386 x: leftMargin 1387 } 1388 }); 1389 if (attributes.state.elementPosition['x'] <= rightMargin) updateState({ 1390 elementPosition: { 1391 x: rightMargin 1392 } 1393 }); 1394 } else { 1395 parent.classList.remove('has-movable'); 1396 1397 // reset slider state when not allowed to move 1398 updateState({ 1399 elementPosition: { 1400 x: 0 1401 } 1402 }); 1403 } 1404 } 1405 1406 // moving arrows left / right 1407 if (event === 'click' && eventProps) { 1408 const targetClassName = eventProps.target.getAttribute('class'); 1409 if (targetClassName === 'pp-tabs--navigation__arrow-right') { 1410 Array.from(elementChildren).map((tab, i) => { 1411 if (i === elementChildren.length - 1) { 1412 let moves = []; 1413 for (let i = 0; i < 1; i = i + .1) { 1414 if (state.elementPosition['x'] - tab.offsetWidth + tab.offsetWidth * i > rightMargin) { 1415 moves.push({ 1416 x: -tab.offsetWidth * i, 1417 y: 0, 1418 z: 0 1419 }); 1420 } else { 1421 moves.push({ 1422 x: 0, 1423 y: 0, 1424 z: 0 1425 }); 1426 } 1427 } 1428 setTransition(moves); 1429 } 1430 }); 1431 } 1432 if (targetClassName === 'pp-tabs--navigation__arrow-left') { 1433 Array.from(elementChildren).map((tab, i) => { 1434 if (i === elementChildren.length - 1) { 1435 let moves = []; 1436 for (let i = 0; i < 1; i = i + .1) { 1437 if (state.elementPosition['x'] - tab.offsetWidth + tab.offsetWidth * i < leftMargin) { 1438 moves.push({ 1439 x: tab.offsetWidth * i, 1440 y: 0, 1441 z: 0 1442 }); 1443 } else { 1444 moves.push({ 1445 x: 0, 1446 y: 0, 1447 z: 0 1448 }); 1449 } 1450 } 1451 setTransition(moves); 1452 } 1453 }); 1454 } 1455 } 1456 element.setProperty('transform', `translate3d(${attributes.state.elementPosition['x'] || 0}px, ${attributes.state.elementPosition['y'] || 0}px, ${attributes.state.elementPosition['z'] || 0}px)`); 1457 }); 1458}); 1459}(); 1460/******/ })() 1461;
1462//# sourceMappingURL=front-script.js.map
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.