TweenMax.js
4 years ago
iscroll.js
4 years ago
isotope.js
4 years ago
jquery-countdown.js
4 years ago
jquery-slimscroll.js
4 years ago
lottie.js
4 years ago
modal.js
4 years ago
premium-addons.js
4 years ago
premium-eq-height.js
4 years ago
premium-maps.js
4 years ago
premium-vscroll.js
4 years ago
prettyPhoto.js
4 years ago
slick.js
4 years ago
typed.js
4 years ago
universal-tilt.js
4 years ago
vticker.js
4 years ago
premium-vscroll.js
866 lines
| 1 | (function ($) { |
| 2 | /****** Premium Vertical Scroll Handler ******/ |
| 3 | var PremiumVerticalScrollHandler = function ($scope, $) { |
| 4 | |
| 5 | var deviceType = elementorFrontend.getCurrentDeviceMode(); |
| 6 | |
| 7 | var hiddenClass = "elementor-hidden-" + deviceType; |
| 8 | |
| 9 | if ("mobile" === deviceType) |
| 10 | hiddenClass = "elementor-hidden-phone"; |
| 11 | |
| 12 | if ($scope.closest("section.elementor-element").hasClass(hiddenClass)) { |
| 13 | return |
| 14 | } |
| 15 | |
| 16 | var $vScrollElem = $scope.find(".premium-vscroll-wrap"), |
| 17 | instance = null, |
| 18 | vScrollSettings = $vScrollElem.data("settings"); |
| 19 | |
| 20 | vScrollSettings.deviceType = deviceType; |
| 21 | |
| 22 | instance = new premiumVerticalScroll($vScrollElem, vScrollSettings); |
| 23 | instance.init(); |
| 24 | |
| 25 | }; |
| 26 | |
| 27 | window.premiumVerticalScroll = function ($selector, settings) { |
| 28 | var self = this, |
| 29 | $window = $(window), |
| 30 | isTouch = 'desktop' !== elementorFrontend.getCurrentDeviceMode(), |
| 31 | $instance = $selector, |
| 32 | checkTemps = $selector.find(".premium-vscroll-sections-wrap") |
| 33 | .length, |
| 34 | $htmlBody = $("html, body"), |
| 35 | $itemsList = $(".premium-vscroll-dot-item", $instance), |
| 36 | $menuItems = $(".premium-vscroll-nav-item", $instance), |
| 37 | defaultSettings = { |
| 38 | speed: 700, |
| 39 | offset: 0, |
| 40 | fullSection: true |
| 41 | }, |
| 42 | settings = $.extend({}, defaultSettings, settings), |
| 43 | sections = {}, |
| 44 | currentSection = null, |
| 45 | isScrolling = false, |
| 46 | inScope = true; |
| 47 | |
| 48 | var touchStartY = 0, |
| 49 | touchEndY = 0; |
| 50 | |
| 51 | jQuery.extend(jQuery.easing, { |
| 52 | easeInOutCirc: function (x, t, b, c, d) { |
| 53 | if ((t /= d / 2) < 1) |
| 54 | return (-c / 2) * (Math.sqrt(1 - t * t) - 1) + b; |
| 55 | return (c / 2) * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; |
| 56 | } |
| 57 | }); |
| 58 | |
| 59 | self.init = function () { |
| 60 | |
| 61 | if (settings.fullTouch || (!isTouch && settings.fullSection)) { |
| 62 | |
| 63 | if (settings.fullCheckOverflow) { |
| 64 | |
| 65 | self.setSectionsOverflow(); |
| 66 | } |
| 67 | } |
| 68 | |
| 69 | self.setSectionsData(); |
| 70 | |
| 71 | $itemsList.on("click.premiumVerticalScroll", self.onNavDotChange); |
| 72 | $menuItems.on("click.premiumVerticalScroll", self.onNavDotChange); |
| 73 | |
| 74 | $itemsList.on("mouseenter.premiumVerticalScroll", self.onNavDotEnter); |
| 75 | |
| 76 | $itemsList.on("mouseleave.premiumVerticalScroll", self.onNavDotLeave); |
| 77 | |
| 78 | if ("desktop" === settings.deviceType) { |
| 79 | $window.on("scroll.premiumVerticalScroll", self.onWheel); |
| 80 | } |
| 81 | |
| 82 | $window.on("resize.premiumVerticalScroll orientationchange.premiumVerticalScroll", self.debounce(50, self.onResize)); |
| 83 | |
| 84 | $window.on("load", function () { |
| 85 | |
| 86 | self.setSectionsData(); |
| 87 | |
| 88 | //Handle Full Section Scroll |
| 89 | if (settings.fullTouch || (!isTouch && settings.fullSection)) |
| 90 | self.sectionsOverflowRefresh(); |
| 91 | |
| 92 | self.checkCurrentActive(); |
| 93 | |
| 94 | }); |
| 95 | |
| 96 | self.keyboardHandler(); |
| 97 | |
| 98 | self.scrollHandler(); |
| 99 | |
| 100 | if (settings.fullSection) { |
| 101 | |
| 102 | self.fullSectionHandler(); |
| 103 | } |
| 104 | |
| 105 | if (settings.animation) { |
| 106 | $instance.find(".premium-vscroll-dots").removeClass("elementor-invisible").addClass("animated " + settings.animation + " animated-" + settings.duration); |
| 107 | } |
| 108 | |
| 109 | |
| 110 | }; |
| 111 | |
| 112 | self.checkCurrentActive = function () { |
| 113 | |
| 114 | var firstSection = Object.keys(sections)[0]; |
| 115 | |
| 116 | //Get first section offset |
| 117 | var firstSectionOffset = sections[firstSection].offset; |
| 118 | |
| 119 | //If page scroll is lower than first section offset, then set current active to 1 |
| 120 | if (firstSectionOffset >= $window.scrollTop() && firstSectionOffset - $window.scrollTop() < 200) { |
| 121 | currentSection = 1; |
| 122 | $itemsList.removeClass("active"); |
| 123 | $($itemsList[0]).addClass("active"); |
| 124 | } |
| 125 | |
| 126 | //If current active section is defined, then show the dots |
| 127 | if (currentSection) |
| 128 | $instance.find(".premium-vscroll-dots").removeClass("premium-vscroll-dots-hide"); |
| 129 | |
| 130 | }; |
| 131 | |
| 132 | self.setSectionsOverflow = function () { |
| 133 | |
| 134 | $itemsList.each(function () { |
| 135 | |
| 136 | var $this = $(this), |
| 137 | sectionId = $this.data("menuanchor"), |
| 138 | $section = $("#" + sectionId), |
| 139 | height = $section.outerHeight(); |
| 140 | |
| 141 | if (height > $window.outerHeight() && height - $window.outerHeight() >= 50) { |
| 142 | |
| 143 | $section.find(".elementor").first().wrapInner("<div id='scroller-" + sectionId + "'></div>"); |
| 144 | |
| 145 | $("#scroller-" + sectionId).slimScroll({ |
| 146 | height: $window.outerHeight(), |
| 147 | railVisible: false |
| 148 | }); |
| 149 | |
| 150 | var iScrollInstance = new IScroll("#scroller-" + sectionId, { |
| 151 | mouseWheel: true, |
| 152 | scrollbars: true, |
| 153 | hideScrollbars: true, |
| 154 | fadeScrollbars: false, |
| 155 | disableMouse: true, |
| 156 | interactiveScrollbars: false |
| 157 | }); |
| 158 | |
| 159 | $("#scroller-" + sectionId).data('iscrollInstance', iScrollInstance); |
| 160 | |
| 161 | setTimeout(function () { |
| 162 | iScrollInstance.refresh(); |
| 163 | }, 1500); |
| 164 | |
| 165 | |
| 166 | } |
| 167 | |
| 168 | }); |
| 169 | }; |
| 170 | |
| 171 | self.sectionsOverflowRefresh = function () { |
| 172 | |
| 173 | $itemsList.each(function () { |
| 174 | var $this = $(this), |
| 175 | sectionId = $this.data("menuanchor"); |
| 176 | |
| 177 | var $section = $("#scroller-" + sectionId); |
| 178 | |
| 179 | var scroller = $section.data('iscrollInstance'); |
| 180 | |
| 181 | if (scroller) { |
| 182 | scroller.refresh(); |
| 183 | } |
| 184 | |
| 185 | }); |
| 186 | |
| 187 | }; |
| 188 | |
| 189 | self.setSectionsData = function () { |
| 190 | |
| 191 | $itemsList.each(function () { |
| 192 | var $this = $(this), |
| 193 | sectionId = $this.data("menuanchor"), |
| 194 | $section = $("#" + sectionId), |
| 195 | height = $section.outerHeight(); |
| 196 | |
| 197 | //Make sure that section exists in the DOM |
| 198 | if ($section[0]) { |
| 199 | |
| 200 | sections[sectionId] = { |
| 201 | selector: $section, |
| 202 | offset: Math.round($section.offset().top), |
| 203 | height: height |
| 204 | }; |
| 205 | } |
| 206 | }); |
| 207 | |
| 208 | }; |
| 209 | |
| 210 | self.fullSectionHandler = function () { |
| 211 | |
| 212 | var vSection = document.getElementById($instance.attr("id")); |
| 213 | |
| 214 | if (!isTouch || !settings.fullTouch) { |
| 215 | |
| 216 | if (checkTemps) { |
| 217 | |
| 218 | document.addEventListener ? |
| 219 | vSection.addEventListener("wheel", self.onWheel, { |
| 220 | passive: false |
| 221 | }) : |
| 222 | vSection.attachEvent("onmousewheel", self.onWheel); |
| 223 | |
| 224 | } else { |
| 225 | |
| 226 | document.addEventListener ? |
| 227 | document.addEventListener("wheel", self.onWheel, { |
| 228 | passive: false |
| 229 | }) : |
| 230 | document.attachEvent("onmousewheel", self.onWheel); |
| 231 | |
| 232 | } |
| 233 | |
| 234 | } else { |
| 235 | document.addEventListener("touchstart", self.onTouchStart); |
| 236 | document.addEventListener("touchmove", self.onTouchMove, { |
| 237 | passive: false |
| 238 | }); |
| 239 | |
| 240 | } |
| 241 | |
| 242 | }; |
| 243 | |
| 244 | self.scrollHandler = function () { |
| 245 | |
| 246 | var index = 0; |
| 247 | |
| 248 | for (var section in sections) { |
| 249 | |
| 250 | var $section = sections[section].selector; |
| 251 | |
| 252 | elementorFrontend.waypoint( |
| 253 | $section, |
| 254 | function () { |
| 255 | |
| 256 | var $this = $(this), |
| 257 | sectionId = $this.attr("id"); |
| 258 | |
| 259 | if (!isScrolling) { |
| 260 | |
| 261 | currentSection = sectionId; |
| 262 | |
| 263 | $itemsList.removeClass("active"); |
| 264 | $menuItems.removeClass("active"); |
| 265 | |
| 266 | $("[data-menuanchor=" + sectionId + "]", $instance).addClass("active"); |
| 267 | |
| 268 | } |
| 269 | }, { |
| 270 | offset: 0 !== index ? "0%" : "-1%", |
| 271 | triggerOnce: false |
| 272 | } |
| 273 | ); |
| 274 | index++; |
| 275 | } |
| 276 | |
| 277 | }; |
| 278 | |
| 279 | self.keyboardHandler = function () { |
| 280 | $(document).keydown(function (event) { |
| 281 | if (38 == event.keyCode) { |
| 282 | self.onKeyUp(event, "up"); |
| 283 | } |
| 284 | |
| 285 | if (40 == event.keyCode) { |
| 286 | self.onKeyUp(event, "down"); |
| 287 | } |
| 288 | }); |
| 289 | }; |
| 290 | |
| 291 | self.isScrolled = function (sectionID, direction) { |
| 292 | |
| 293 | var $section = $("#scroller-" + sectionID); |
| 294 | |
| 295 | var scroller = $section.data('iscrollInstance'); |
| 296 | |
| 297 | if (scroller) { |
| 298 | if ('down' === direction) { |
| 299 | return (0 - scroller.y) + $section.scrollTop() + 1 + $section.innerHeight() >= $section[0].scrollHeight; |
| 300 | } else if ('up' === direction) { |
| 301 | return scroller.y >= 0 && !$section.scrollTop(); |
| 302 | } |
| 303 | |
| 304 | } else { |
| 305 | return true; |
| 306 | } |
| 307 | |
| 308 | }; |
| 309 | |
| 310 | // self.isTouchDevice = function () { |
| 311 | |
| 312 | // var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/), |
| 313 | // isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints)); |
| 314 | |
| 315 | // return isTouchDevice || isTouch; |
| 316 | |
| 317 | // }; |
| 318 | |
| 319 | self.getEventsPage = function (e) { |
| 320 | |
| 321 | var events = []; |
| 322 | |
| 323 | events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY); |
| 324 | events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX); |
| 325 | |
| 326 | if (isTouch && typeof e.touches !== 'undefined') { |
| 327 | events.y = e.touches[0].pageY; |
| 328 | events.x = e.touches[0].pageX; |
| 329 | } |
| 330 | |
| 331 | return events; |
| 332 | |
| 333 | }; |
| 334 | |
| 335 | |
| 336 | self.onTouchStart = function (e) { |
| 337 | |
| 338 | //Prevent page scroll if scrolled down below the last of our sections. |
| 339 | inScope = true; |
| 340 | |
| 341 | var touchEvents = self.getEventsPage(e); |
| 342 | touchStartY = touchEvents.y; |
| 343 | |
| 344 | }; |
| 345 | |
| 346 | self.onTouchMove = function (e) { |
| 347 | |
| 348 | if (inScope) { |
| 349 | self.preventDefault(e); |
| 350 | } |
| 351 | |
| 352 | if (isScrolling) { |
| 353 | self.preventDefault(e); |
| 354 | return false; |
| 355 | } |
| 356 | |
| 357 | var touchEvents = self.getEventsPage(e); |
| 358 | |
| 359 | touchEndY = touchEvents.y; |
| 360 | |
| 361 | var $target = $(e.target), |
| 362 | sectionSelector = checkTemps ? ".premium-vscroll-temp" : ".elementor-top-section", |
| 363 | $section = $target.closest(sectionSelector), |
| 364 | sectionId = $section.attr("id"), |
| 365 | newSectionId = false, |
| 366 | prevSectionId = false, |
| 367 | nextSectionId = false, |
| 368 | direction = false, |
| 369 | windowScrollTop = $window.scrollTop(); |
| 370 | |
| 371 | $(".premium-vscroll-tooltip").hide(); |
| 372 | |
| 373 | if (beforeCheck()) { |
| 374 | |
| 375 | sectionId = self.getFirstSection(sections); |
| 376 | |
| 377 | } |
| 378 | |
| 379 | if (afterCheck()) { |
| 380 | |
| 381 | sectionId = self.getLastSection(sections); |
| 382 | |
| 383 | } |
| 384 | |
| 385 | if (touchStartY > touchEndY) { |
| 386 | |
| 387 | direction = 'down'; |
| 388 | |
| 389 | } else if (touchEndY > touchStartY) { |
| 390 | |
| 391 | direction = 'up'; |
| 392 | |
| 393 | } |
| 394 | |
| 395 | if (sectionId && sections.hasOwnProperty(sectionId)) { |
| 396 | |
| 397 | prevSectionId = self.checkPrevSection(sections, sectionId); |
| 398 | nextSectionId = self.checkNextSection(sections, sectionId); |
| 399 | |
| 400 | if ("up" === direction) { |
| 401 | |
| 402 | if (!nextSectionId && sections[sectionId].offset < windowScrollTop) { |
| 403 | newSectionId = sectionId; |
| 404 | } else { |
| 405 | newSectionId = prevSectionId; |
| 406 | } |
| 407 | } |
| 408 | |
| 409 | if ("down" === direction) { |
| 410 | |
| 411 | if (!prevSectionId && sections[sectionId].offset > windowScrollTop + 5) { |
| 412 | newSectionId = sectionId; |
| 413 | } else { |
| 414 | newSectionId = nextSectionId; |
| 415 | } |
| 416 | } |
| 417 | |
| 418 | if (newSectionId) { |
| 419 | |
| 420 | inScope = true; |
| 421 | |
| 422 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").removeClass("premium-vscroll-dots-hide"); |
| 423 | |
| 424 | if (!self.isScrolled(sectionId, direction)) { |
| 425 | return; |
| 426 | } |
| 427 | if (Math.abs(touchStartY - touchEndY) > (window.innerHeight / 100 * 15)) { |
| 428 | self.onAnchorChange(newSectionId); |
| 429 | } |
| 430 | |
| 431 | } else { |
| 432 | |
| 433 | inScope = false; |
| 434 | |
| 435 | var $lastselector = checkTemps ? $instance : $("#" + sectionId); |
| 436 | |
| 437 | if ("down" === direction) { |
| 438 | |
| 439 | if ($lastselector.offset().top + $lastselector.innerHeight() - $(document).scrollTop() > 600) { |
| 440 | |
| 441 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").addClass("premium-vscroll-dots-hide"); |
| 442 | |
| 443 | } |
| 444 | |
| 445 | } else if ("up" === direction) { |
| 446 | |
| 447 | if ($lastselector.offset().top - $(document).scrollTop() > 200) { |
| 448 | |
| 449 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").addClass("premium-vscroll-dots-hide"); |
| 450 | |
| 451 | } |
| 452 | |
| 453 | } |
| 454 | } |
| 455 | |
| 456 | } else { |
| 457 | inScope = false; |
| 458 | } |
| 459 | |
| 460 | }; |
| 461 | |
| 462 | self.scrollStop = function () { |
| 463 | $htmlBody.stop(true); |
| 464 | }; |
| 465 | |
| 466 | self.checkNextSection = function (object, key) { |
| 467 | var keys = Object.keys(object), |
| 468 | idIndex = keys.indexOf(key), |
| 469 | nextIndex = (idIndex += 1); |
| 470 | |
| 471 | if (nextIndex >= keys.length) { |
| 472 | return false; |
| 473 | } |
| 474 | |
| 475 | var nextKey = keys[nextIndex]; |
| 476 | |
| 477 | return nextKey; |
| 478 | }; |
| 479 | |
| 480 | self.checkPrevSection = function (object, key) { |
| 481 | var keys = Object.keys(object), |
| 482 | idIndex = keys.indexOf(key), |
| 483 | prevIndex = (idIndex -= 1); |
| 484 | |
| 485 | if (0 > idIndex) { |
| 486 | return false; |
| 487 | } |
| 488 | |
| 489 | var prevKey = keys[prevIndex]; |
| 490 | |
| 491 | return prevKey; |
| 492 | }; |
| 493 | |
| 494 | self.debounce = function (threshold, callback) { |
| 495 | var timeout; |
| 496 | |
| 497 | return function debounced($event) { |
| 498 | function delayed() { |
| 499 | callback.call(this, $event); |
| 500 | timeout = null; |
| 501 | } |
| 502 | |
| 503 | if (timeout) { |
| 504 | clearTimeout(timeout); |
| 505 | } |
| 506 | |
| 507 | timeout = setTimeout(delayed, threshold); |
| 508 | }; |
| 509 | }; |
| 510 | |
| 511 | self.visible = function (selector, partial, hidden) { |
| 512 | var s = selector.get(0), |
| 513 | vpHeight = $window.outerHeight(), |
| 514 | clientSize = |
| 515 | hidden === true ? s.offsetWidth * s.offsetHeight : true; |
| 516 | if (typeof s.getBoundingClientRect === "function") { |
| 517 | var rec = s.getBoundingClientRect(); |
| 518 | var tViz = rec.top >= 0 && rec.top < vpHeight, |
| 519 | bViz = rec.bottom > 0 && rec.bottom <= vpHeight, |
| 520 | vVisible = partial ? tViz || bViz : tViz && bViz, |
| 521 | vVisible = |
| 522 | rec.top < 0 && rec.bottom > vpHeight ? true : vVisible; |
| 523 | return clientSize && vVisible; |
| 524 | } else { |
| 525 | var viewTop = 0, |
| 526 | viewBottom = viewTop + vpHeight, |
| 527 | position = $window.position(), |
| 528 | _top = position.top, |
| 529 | _bottom = _top + $window.height(), |
| 530 | compareTop = partial === true ? _bottom : _top, |
| 531 | compareBottom = partial === true ? _top : _bottom; |
| 532 | return ( |
| 533 | !!clientSize && |
| 534 | (compareBottom <= viewBottom && compareTop >= viewTop) |
| 535 | ); |
| 536 | } |
| 537 | }; |
| 538 | |
| 539 | self.onNavDotEnter = function () { |
| 540 | var $this = $(this), |
| 541 | index = $this.data("index"); |
| 542 | |
| 543 | if (settings.tooltips) { |
| 544 | $( |
| 545 | '<div class="premium-vscroll-tooltip"><span>' + |
| 546 | settings.dotsText[index] + |
| 547 | "</span></div>" |
| 548 | ) |
| 549 | .hide() |
| 550 | .appendTo($this) |
| 551 | .fadeIn(200); |
| 552 | } |
| 553 | }; |
| 554 | |
| 555 | self.onNavDotLeave = function () { |
| 556 | $(".premium-vscroll-tooltip").fadeOut(200, function () { |
| 557 | $(this).remove(); |
| 558 | }); |
| 559 | }; |
| 560 | |
| 561 | self.onNavDotChange = function (event) { |
| 562 | var $this = $(this), |
| 563 | index = $this.index(), |
| 564 | sectionId = $this.data("menuanchor"), |
| 565 | offset = null; |
| 566 | |
| 567 | if (!sections.hasOwnProperty(sectionId)) { |
| 568 | return false; |
| 569 | } |
| 570 | |
| 571 | offset = sections[sectionId].offset - settings.offset; |
| 572 | |
| 573 | if (offset < 0) |
| 574 | offset = sections[sectionId].offset; |
| 575 | |
| 576 | if (!isScrolling) { |
| 577 | isScrolling = true; |
| 578 | |
| 579 | currentSection = sectionId; |
| 580 | $menuItems.removeClass("active"); |
| 581 | $itemsList.removeClass("active"); |
| 582 | |
| 583 | if ($this.hasClass("premium-vscroll-nav-item")) { |
| 584 | $($itemsList[index]).addClass("active"); |
| 585 | } else { |
| 586 | $($menuItems[index]).addClass("active"); |
| 587 | } |
| 588 | |
| 589 | $this.addClass("active"); |
| 590 | |
| 591 | $htmlBody |
| 592 | .stop() |
| 593 | .clearQueue() |
| 594 | .animate({ |
| 595 | scrollTop: offset |
| 596 | }, |
| 597 | settings.speed, |
| 598 | "easeInOutCirc", |
| 599 | function () { |
| 600 | isScrolling = false; |
| 601 | } |
| 602 | ); |
| 603 | } |
| 604 | }; |
| 605 | |
| 606 | self.preventDefault = function (event) { |
| 607 | |
| 608 | if (event.preventDefault) { |
| 609 | |
| 610 | event.preventDefault(); |
| 611 | |
| 612 | } else { |
| 613 | |
| 614 | event.returnValue = false; |
| 615 | |
| 616 | } |
| 617 | |
| 618 | }; |
| 619 | |
| 620 | |
| 621 | self.onAnchorChange = function (sectionId) { |
| 622 | |
| 623 | var $this = $("[data-menuanchor=" + sectionId + "]", $instance), |
| 624 | offset = null; |
| 625 | |
| 626 | if (!sections.hasOwnProperty(sectionId)) { |
| 627 | return false; |
| 628 | } |
| 629 | |
| 630 | offset = sections[sectionId].offset - settings.offset; |
| 631 | |
| 632 | if (offset < 0) |
| 633 | offset = sections[sectionId].offset; |
| 634 | |
| 635 | if (!isScrolling) { |
| 636 | isScrolling = true; |
| 637 | |
| 638 | if (settings.addToHistory) { |
| 639 | window.history.pushState(null, null, "#" + sectionId); |
| 640 | } |
| 641 | |
| 642 | currentSection = sectionId; |
| 643 | |
| 644 | $itemsList.removeClass("active"); |
| 645 | $menuItems.removeClass("active"); |
| 646 | |
| 647 | $this.addClass("active"); |
| 648 | |
| 649 | $htmlBody.animate({ |
| 650 | scrollTop: offset |
| 651 | }, |
| 652 | settings.speed, |
| 653 | "easeInOutCirc", |
| 654 | function () { |
| 655 | isScrolling = false; |
| 656 | } |
| 657 | ); |
| 658 | } |
| 659 | }; |
| 660 | |
| 661 | self.onKeyUp = function (event, direction) { |
| 662 | |
| 663 | //If keyboard is triggered before scroll |
| 664 | if (currentSection === 1) { |
| 665 | currentSection = $itemsList.eq(0).data("menuanchor"); |
| 666 | } |
| 667 | |
| 668 | var direction = direction || "up", |
| 669 | nextItem = $(".premium-vscroll-dot-item[data-menuanchor=" + currentSection + "]", $instance).next(), |
| 670 | prevItem = $(".premium-vscroll-dot-item[data-menuanchor=" + currentSection + "]", $instance).prev(); |
| 671 | |
| 672 | event.preventDefault(); |
| 673 | |
| 674 | if (isScrolling) { |
| 675 | return false; |
| 676 | } |
| 677 | |
| 678 | if ("up" === direction) { |
| 679 | if (prevItem[0]) { |
| 680 | prevItem.trigger("click.premiumVerticalScroll"); |
| 681 | } |
| 682 | } |
| 683 | |
| 684 | if ("down" === direction) { |
| 685 | if (nextItem[0]) { |
| 686 | nextItem.trigger("click.premiumVerticalScroll"); |
| 687 | } |
| 688 | } |
| 689 | }; |
| 690 | |
| 691 | self.onScroll = function (event) { |
| 692 | /* On Scroll Event */ |
| 693 | if (isScrolling) { |
| 694 | event.preventDefault(); |
| 695 | } |
| 696 | }; |
| 697 | |
| 698 | function getFirstSection(object) { |
| 699 | return Object.keys(object)[0]; |
| 700 | } |
| 701 | |
| 702 | function getLastSection(object) { |
| 703 | return Object.keys(object)[Object.keys(object).length - 1]; |
| 704 | } |
| 705 | |
| 706 | function getDirection(e) { |
| 707 | e = window.event || e; |
| 708 | var t = Math.max( |
| 709 | -1, |
| 710 | Math.min(1, e.wheelDelta || -e.deltaY || -e.detail) |
| 711 | ); |
| 712 | return t; |
| 713 | } |
| 714 | |
| 715 | self.onWheel = function (event) { |
| 716 | |
| 717 | if (inScope && !isTouch) { |
| 718 | self.preventDefault(event); |
| 719 | } |
| 720 | |
| 721 | if (isScrolling) { |
| 722 | return false; |
| 723 | } |
| 724 | |
| 725 | var $target = $(event.target), |
| 726 | sectionSelector = checkTemps ? ".premium-vscroll-temp" : ".elementor-top-section", |
| 727 | $section = $target.closest(sectionSelector), |
| 728 | sectionId = $section.attr("id"), |
| 729 | $vTarget = self.visible($instance, true, false), |
| 730 | newSectionId = false, |
| 731 | prevSectionId = false, |
| 732 | nextSectionId = false, |
| 733 | delta = getDirection(event), |
| 734 | direction = 0 > delta ? "down" : "up", |
| 735 | windowScrollTop = $window.scrollTop(), |
| 736 | dotIndex = $(".premium-vscroll-dot-item.active").index(); |
| 737 | |
| 738 | if (isTouch) { |
| 739 | |
| 740 | $(".premium-vscroll-tooltip").hide(); |
| 741 | |
| 742 | if (dotIndex === $itemsList.length - 1 && !$vTarget) { |
| 743 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").addClass("premium-vscroll-dots-hide"); |
| 744 | } else if (dotIndex === 0 && !$vTarget) { |
| 745 | if ( |
| 746 | $instance.offset().top - $(document).scrollTop() > |
| 747 | 200 |
| 748 | ) { |
| 749 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").addClass("premium-vscroll-dots-hide"); |
| 750 | } |
| 751 | } else { |
| 752 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").removeClass("premium-vscroll-dots-hide"); |
| 753 | } |
| 754 | } |
| 755 | |
| 756 | if (beforeCheck()) { |
| 757 | sectionId = getFirstSection(sections); |
| 758 | } |
| 759 | |
| 760 | if (afterCheck()) { |
| 761 | sectionId = getLastSection(sections); |
| 762 | } |
| 763 | |
| 764 | if (sectionId && sections.hasOwnProperty(sectionId)) { |
| 765 | |
| 766 | prevSectionId = self.checkPrevSection(sections, sectionId); |
| 767 | nextSectionId = self.checkNextSection(sections, sectionId); |
| 768 | |
| 769 | if ("up" === direction) { |
| 770 | if (!nextSectionId && sections[sectionId].offset < windowScrollTop) { |
| 771 | newSectionId = sectionId; |
| 772 | } else { |
| 773 | newSectionId = prevSectionId; |
| 774 | } |
| 775 | } |
| 776 | |
| 777 | if ("down" === direction) { |
| 778 | if (!prevSectionId && sections[sectionId].offset > windowScrollTop + 5) { |
| 779 | newSectionId = sectionId; |
| 780 | } else { |
| 781 | newSectionId = nextSectionId; |
| 782 | } |
| 783 | } |
| 784 | |
| 785 | |
| 786 | if (newSectionId) { |
| 787 | inScope = true; |
| 788 | if (!self.isScrolled(sectionId, direction) && !isTouch) { |
| 789 | return; |
| 790 | } |
| 791 | |
| 792 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").removeClass("premium-vscroll-dots-hide"); |
| 793 | |
| 794 | self.onAnchorChange(newSectionId); |
| 795 | |
| 796 | } else { |
| 797 | inScope = false; |
| 798 | var $lastselector = checkTemps ? |
| 799 | $instance : |
| 800 | $("#" + sectionId); |
| 801 | if ("down" === direction) { |
| 802 | if ( |
| 803 | $lastselector.offset().top + |
| 804 | $lastselector.innerHeight() - |
| 805 | $(document).scrollTop() > |
| 806 | 600 |
| 807 | ) { |
| 808 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").addClass("premium-vscroll-dots-hide"); |
| 809 | } |
| 810 | } else if ("up" === direction) { |
| 811 | |
| 812 | $instance.find(".premium-vscroll-dots, .premium-vscroll-nav-menu").addClass("premium-vscroll-dots-hide"); |
| 813 | |
| 814 | } |
| 815 | } |
| 816 | } else { |
| 817 | inScope = false; |
| 818 | } |
| 819 | }; |
| 820 | |
| 821 | function beforeCheck() { |
| 822 | var windowScrollTop = $window.scrollTop(), |
| 823 | firstSectionId = getFirstSection(sections), |
| 824 | offset = sections[firstSectionId].offset, |
| 825 | topBorder = windowScrollTop + $window.outerHeight(), |
| 826 | visible = self.visible($instance, true, false); |
| 827 | |
| 828 | if (topBorder > offset) { |
| 829 | return false; |
| 830 | } else if (visible) { |
| 831 | return true; |
| 832 | } |
| 833 | return false; |
| 834 | } |
| 835 | |
| 836 | function afterCheck() { |
| 837 | var windowScrollTop = $window.scrollTop(), |
| 838 | lastSectionId = getLastSection(sections), |
| 839 | bottomBorder = |
| 840 | sections[lastSectionId].offset + |
| 841 | sections[lastSectionId].height, |
| 842 | visible = self.visible($instance, true, false); |
| 843 | |
| 844 | if (windowScrollTop < bottomBorder) { |
| 845 | return false; |
| 846 | } else if (visible) { |
| 847 | return true; |
| 848 | } |
| 849 | |
| 850 | return false; |
| 851 | } |
| 852 | |
| 853 | self.onResize = function () { |
| 854 | self.setSectionsData(); |
| 855 | self.sectionsOverflowRefresh(); |
| 856 | }; |
| 857 | |
| 858 | }; |
| 859 | |
| 860 | $(window).on("elementor/frontend/init", function () { |
| 861 | elementorFrontend.hooks.addAction( |
| 862 | "frontend/element_ready/premium-vscroll.default", |
| 863 | PremiumVerticalScrollHandler |
| 864 | ); |
| 865 | }); |
| 866 | })(jQuery); |