github.com/kotovmak/go-admin@v1.1.1/template/installation/assets/src/js/main.js (about) 1 /* 2 Ethereal by HTML5 UP 3 html5up.net | @ajlkn 4 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 */ 6 7 (function($) { 8 9 // Settings. 10 var settings = { 11 12 // Keyboard shortcuts. 13 keyboardShortcuts: { 14 15 // If true, enables scrolling via keyboard shortcuts. 16 enabled: true, 17 18 // Sets the distance to scroll when using the left/right arrow keys. 19 distance: 50 20 21 }, 22 23 // Scroll wheel. 24 scrollWheel: { 25 26 // If true, enables scrolling via the scroll wheel. 27 enabled: true, 28 29 // Sets the scroll wheel factor. (Ideally) a value between 0 and 1 (lower = slower scroll, higher = faster scroll). 30 factor: 1 31 32 }, 33 34 // Scroll zones. 35 scrollZones: { 36 37 // If true, enables scrolling via scroll zones on the left/right edges of the scren. 38 enabled: true, 39 40 // Sets the speed at which the page scrolls when a scroll zone is active (higher = faster scroll, lower = slower scroll). 41 speed: 15 42 43 }, 44 45 // Dragging. 46 dragging: { 47 48 // If true, enables scrolling by dragging the main wrapper with the mouse. 49 enabled: true, 50 51 // Sets the momentum factor. Must be a value between 0 and 1 (lower = less momentum, higher = more momentum, 0 = disable momentum scrolling). 52 momentum: 0.875, 53 54 // Sets the drag threshold (in pixels). 55 threshold: 10 56 57 }, 58 59 // If set to a valid selector , prevents key/mouse events from bubbling from these elements. 60 excludeSelector: 'input:focus, select:focus, textarea:focus, audio, video, iframe', 61 62 // Link scroll speed. 63 linkScrollSpeed: 1000 64 65 }; 66 67 // Skel. 68 skel.breakpoints({ 69 xlarge: '(max-width: 1680px)', 70 large: '(max-width: 1280px)', 71 medium: '(max-width: 980px)', 72 small: '(max-width: 736px)', 73 xsmall: '(max-width: 480px)', 74 xxsmall: '(max-width: 360px)', 75 short: '(min-aspect-ratio: 16/7)', 76 xshort: '(min-aspect-ratio: 16/6)' 77 }); 78 79 // Ready event. 80 $(function() { 81 82 // Vars. 83 var $window = $(window), 84 $document = $(document), 85 $body = $('body'), 86 $html = $('html'), 87 $bodyHtml = $('body,html'), 88 $wrapper = $('#wrapper'); 89 90 // Disable animations/transitions until the page has loaded. 91 $body.addClass('is-loading'); 92 93 $window.on('load', function() { 94 window.setTimeout(function() { 95 $body.removeClass('is-loading'); 96 }, 100); 97 }); 98 99 // Tweaks/fixes. 100 101 // Mobile: Revert to native scrolling. 102 if (skel.vars.mobile) { 103 104 // Disable all scroll-assist features. 105 settings.keyboardShortcuts.enabled = false; 106 settings.scrollWheel.enabled = false; 107 settings.scrollZones.enabled = false; 108 settings.dragging.enabled = false; 109 110 // Re-enable overflow on body. 111 $body.css('overflow-x', 'auto'); 112 113 } 114 115 // IE: Various fixes. 116 if (skel.vars.browser == 'ie') { 117 118 // Enable IE mode. 119 $body.addClass('is-ie'); 120 121 // Page widths. 122 $window 123 .on('load resize', function() { 124 125 // Calculate wrapper width. 126 var w = 0; 127 128 $wrapper.children().each(function() { 129 w += $(this).width(); 130 }); 131 132 // Apply to page. 133 $html.css('width', w + 'px'); 134 135 }); 136 137 } 138 139 // Polyfill: Object fit. 140 if (!skel.canUse('object-fit')) { 141 142 $('.image[data-position]').each(function() { 143 144 var $this = $(this), 145 $img = $this.children('img'); 146 147 // Apply img as background. 148 $this 149 .css('background-image', 'url("' + $img.attr('src') + '")') 150 .css('background-position', $this.data('position')) 151 .css('background-size', 'cover') 152 .css('background-repeat', 'no-repeat'); 153 154 // Hide img. 155 $img 156 .css('opacity', '0'); 157 158 }); 159 160 } 161 162 // Keyboard shortcuts. 163 if (settings.keyboardShortcuts.enabled) 164 (function() { 165 166 $wrapper 167 168 // Prevent keystrokes inside excluded elements from bubbling. 169 .on('keypress keyup keydown', settings.excludeSelector, function(event) { 170 171 // Stop propagation. 172 event.stopPropagation(); 173 174 }); 175 176 $window 177 178 // Keypress event. 179 .on('keydown', function(event) { 180 181 var scrolled = false; 182 183 switch (event.keyCode) { 184 185 // Left arrow. 186 case 37: 187 $document.scrollLeft($document.scrollLeft() - settings.keyboardShortcuts.distance); 188 scrolled = true; 189 break; 190 191 // Right arrow. 192 case 39: 193 $document.scrollLeft($document.scrollLeft() + settings.keyboardShortcuts.distance); 194 scrolled = true; 195 break; 196 197 // Page Up. 198 case 33: 199 $document.scrollLeft($document.scrollLeft() - $window.width() + 100); 200 scrolled = true; 201 break; 202 203 // Page Down, Space. 204 case 34: 205 case 32: 206 $document.scrollLeft($document.scrollLeft() + $window.width() - 100); 207 scrolled = true; 208 break; 209 210 // Home. 211 case 36: 212 $document.scrollLeft(0); 213 scrolled = true; 214 break; 215 216 // End. 217 case 35: 218 $document.scrollLeft($document.width()); 219 scrolled = true; 220 break; 221 222 } 223 224 // Scrolled? 225 if (scrolled) { 226 227 // Prevent default. 228 event.preventDefault(); 229 event.stopPropagation(); 230 231 // Stop link scroll. 232 $bodyHtml.stop(); 233 234 } 235 236 }); 237 238 })(); 239 240 // Scroll wheel. 241 // WARN: broke scroll so, comment it. 禁止了滚轮事件,于是注释它 242 if (false) // (settings.scrollWheel.enabled) 243 (function() { 244 245 // Based on code by @miorel + @pieterv of Facebook (thanks guys :) 246 // github.com/facebook/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js 247 var normalizeWheel = function(event) { 248 249 var pixelStep = 10, 250 lineHeight = 40, 251 pageHeight = 800, 252 sX = 0, 253 sY = 0, 254 pX = 0, 255 pY = 0; 256 257 // Legacy. 258 if ('detail' in event) 259 sY = event.detail; 260 else if ('wheelDelta' in event) 261 sY = event.wheelDelta / -120; 262 else if ('wheelDeltaY' in event) 263 sY = event.wheelDeltaY / -120; 264 265 if ('wheelDeltaX' in event) 266 sX = event.wheelDeltaX / -120; 267 268 // Side scrolling on FF with DOMMouseScroll. 269 if ('axis' in event 270 && event.axis === event.HORIZONTAL_AXIS) { 271 sX = sY; 272 sY = 0; 273 } 274 275 // Calculate. 276 pX = sX * pixelStep; 277 pY = sY * pixelStep; 278 279 if ('deltaY' in event) 280 pY = event.deltaY; 281 282 if ('deltaX' in event) 283 pX = event.deltaX; 284 285 if ((pX || pY) 286 && event.deltaMode) { 287 288 if (event.deltaMode == 1) { 289 pX *= lineHeight; 290 pY *= lineHeight; 291 } 292 else { 293 pX *= pageHeight; 294 pY *= pageHeight; 295 } 296 297 } 298 299 // Fallback if spin cannot be determined. 300 if (pX && !sX) 301 sX = (pX < 1) ? -1 : 1; 302 303 if (pY && !sY) 304 sY = (pY < 1) ? -1 : 1; 305 306 // Return. 307 return { 308 spinX: sX, 309 spinY: sY, 310 pixelX: pX, 311 pixelY: pY 312 }; 313 314 }; 315 316 // Wheel event. 317 $body.on('wheel', function(event) { 318 319 // Disable on <=small. 320 if (skel.breakpoint('small').active) 321 return; 322 323 // Prevent default. 324 event.preventDefault(); 325 event.stopPropagation(); 326 327 // Stop link scroll. 328 $bodyHtml.stop(); 329 330 // Calculate delta, direction. 331 var n = normalizeWheel(event.originalEvent), 332 x = (n.pixelX != 0 ? n.pixelX : n.pixelY), 333 delta = Math.min(Math.abs(x), 150) * settings.scrollWheel.factor, 334 direction = x > 0 ? 1 : -1; 335 336 // Scroll page. 337 $document.scrollLeft($document.scrollLeft() + (delta * direction)); 338 339 }); 340 341 })(); 342 343 344 // Scroll zones. 345 if (settings.scrollZones.enabled) 346 (function() { 347 348 var $left = $('<div class="scrollZone left"></div>'), 349 $right = $('<div class="scrollZone right"></div>'), 350 $zones = $left.add($right), 351 paused = false, 352 intervalId = null, 353 direction, 354 activate = function(d) { 355 356 // Disable on <=small. 357 if (skel.breakpoint('small').active) 358 return; 359 360 // Paused? Bail. 361 if (paused) 362 return; 363 364 // Stop link scroll. 365 $bodyHtml.stop(); 366 367 // Set direction. 368 direction = d; 369 370 // Initialize interval. 371 clearInterval(intervalId); 372 373 intervalId = setInterval(function() { 374 $document.scrollLeft($document.scrollLeft() + (settings.scrollZones.speed * direction)); 375 }, 25); 376 377 }, 378 deactivate = function() { 379 380 // Unpause. 381 paused = false; 382 383 // Clear interval. 384 clearInterval(intervalId); 385 386 }; 387 388 $zones 389 .appendTo($wrapper) 390 .on('mouseleave mousedown', function(event) { 391 deactivate(); 392 }); 393 394 $left 395 .css('left', '0') 396 .on('mouseenter', function(event) { 397 activate(-1); 398 }); 399 400 $right 401 .css('right', '0') 402 .on('mouseenter', function(event) { 403 activate(1); 404 }); 405 406 $wrapper 407 .on('---pauseScrollZone', function(event) { 408 409 // Pause. 410 paused = true; 411 412 // Unpause after delay. 413 setTimeout(function() { 414 paused = false; 415 }, 500); 416 417 }); 418 419 })(); 420 421 // Dragging. 422 if (settings.dragging.enabled) 423 (function() { 424 425 var dragging = false, 426 dragged = false, 427 distance = 0, 428 startScroll, 429 momentumIntervalId, velocityIntervalId, 430 startX, currentX, previousX, 431 velocity, direction; 432 433 $wrapper 434 435 // Prevent image drag and drop. 436 .on('mouseup mousemove mousedown', '.image, img', function(event) { 437 event.preventDefault(); 438 }) 439 440 // Prevent mouse events inside excluded elements from bubbling. 441 .on('mouseup mousemove mousedown', settings.excludeSelector, function(event) { 442 443 // Prevent event from bubbling. 444 event.stopPropagation(); 445 446 // End drag. 447 dragging = false; 448 $wrapper.removeClass('is-dragging'); 449 clearInterval(velocityIntervalId); 450 clearInterval(momentumIntervalId); 451 452 // Pause scroll zone. 453 $wrapper.triggerHandler('---pauseScrollZone'); 454 455 }) 456 457 // Mousedown event. 458 .on('mousedown', function(event) { 459 460 // Disable on <=small. 461 if (skel.breakpoint('small').active) 462 return; 463 464 // Clear momentum interval. 465 clearInterval(momentumIntervalId); 466 467 // Stop link scroll. 468 $bodyHtml.stop(); 469 470 // Start drag. 471 dragging = true; 472 $wrapper.addClass('is-dragging'); 473 474 // Initialize and reset vars. 475 startScroll = $document.scrollLeft(); 476 startX = event.clientX; 477 previousX = startX; 478 currentX = startX; 479 distance = 0; 480 direction = 0; 481 482 // Initialize velocity interval. 483 clearInterval(velocityIntervalId); 484 485 velocityIntervalId = setInterval(function() { 486 487 // Calculate velocity, direction. 488 velocity = Math.abs(currentX - previousX); 489 direction = (currentX > previousX ? -1 : 1); 490 491 // Update previous X. 492 previousX = currentX; 493 494 }, 50); 495 496 }) 497 498 // Mousemove event. 499 .on('mousemove', function(event) { 500 501 // Not dragging? Bail. 502 if (!dragging) 503 return; 504 505 // Velocity. 506 currentX = event.clientX; 507 508 // Scroll page. 509 $document.scrollLeft(startScroll + (startX - currentX)); 510 511 // Update distance. 512 distance = Math.abs(startScroll - $document.scrollLeft()); 513 514 // Distance exceeds threshold? Disable pointer events on all descendents. 515 if (!dragged 516 && distance > settings.dragging.threshold) { 517 518 $wrapper.addClass('is-dragged'); 519 520 dragged = true; 521 522 } 523 524 }) 525 526 // Mouseup/mouseleave event. 527 .on('mouseup mouseleave', function(event) { 528 529 var m; 530 531 // Not dragging? Bail. 532 if (!dragging) 533 return; 534 535 // Dragged? Re-enable pointer events on all descendents. 536 if (dragged) { 537 538 setTimeout(function() { 539 $wrapper.removeClass('is-dragged'); 540 }, 100); 541 542 dragged = false; 543 544 } 545 546 // Distance exceeds threshold? Prevent default. 547 if (distance > settings.dragging.threshold) 548 event.preventDefault(); 549 550 // End drag. 551 dragging = false; 552 $wrapper.removeClass('is-dragging'); 553 clearInterval(velocityIntervalId); 554 clearInterval(momentumIntervalId); 555 556 // Pause scroll zone. 557 $wrapper.triggerHandler('---pauseScrollZone'); 558 559 // Initialize momentum interval. 560 if (settings.dragging.momentum > 0) { 561 562 m = velocity; 563 564 momentumIntervalId = setInterval(function() { 565 566 // Scroll page. 567 $document.scrollLeft($document.scrollLeft() + (m * direction)); 568 569 // Decrease momentum. 570 m = m * settings.dragging.momentum; 571 572 // Negligible momentum? Clear interval and end. 573 if (Math.abs(m) < 1) 574 clearInterval(momentumIntervalId); 575 576 }, 15); 577 578 } 579 580 }); 581 582 })(); 583 584 // Link scroll. 585 $wrapper 586 .on('mousedown mouseup', 'a[href^="#"]', function(event) { 587 588 // Stop propagation. 589 event.stopPropagation(); 590 591 }) 592 .on('click', 'a[href^="#"]', function(event) { 593 594 var $this = $(this), 595 href = $this.attr('href'), 596 $target, x, y; 597 598 // Get target. 599 if (href == '#' 600 || ($target = $(href)).length == 0) 601 return; 602 603 // Prevent default. 604 event.preventDefault(); 605 event.stopPropagation(); 606 607 // Calculate x, y. 608 if (skel.breakpoint('small').active) { 609 610 x = $target.offset().top - (Math.max(0, $window.height() - $target.outerHeight()) / 2); 611 y = { scrollTop: x }; 612 613 } 614 else { 615 616 x = $target.offset().left - (Math.max(0, $window.width() - $target.outerWidth()) / 2); 617 y = { scrollLeft: x }; 618 619 } 620 621 // Scroll. 622 $bodyHtml 623 .stop() 624 .animate( 625 y, 626 settings.linkScrollSpeed, 627 'swing' 628 ); 629 630 }); 631 632 // Gallery. 633 $('.gallery') 634 .on('click', 'a', function(event) { 635 636 var $a = $(this), 637 $gallery = $a.parents('.gallery'), 638 $modal = $gallery.children('.modal'), 639 $modalImg = $modal.find('img'), 640 href = $a.attr('href'); 641 642 // Not an image? Bail. 643 if (!href.match(/\.(jpg|gif|png|mp4)$/)) 644 return; 645 646 // Prevent default. 647 event.preventDefault(); 648 event.stopPropagation(); 649 650 // Locked? Bail. 651 if ($modal[0]._locked) 652 return; 653 654 // Lock. 655 $modal[0]._locked = true; 656 657 // Set src. 658 $modalImg.attr('src', href); 659 660 // Set visible. 661 $modal.addClass('visible'); 662 663 // Focus. 664 $modal.focus(); 665 666 // Delay. 667 setTimeout(function() { 668 669 // Unlock. 670 $modal[0]._locked = false; 671 672 }, 600); 673 674 }) 675 .on('click', '.modal', function(event) { 676 677 var $modal = $(this), 678 $modalImg = $modal.find('img'); 679 680 // Locked? Bail. 681 if ($modal[0]._locked) 682 return; 683 684 // Already hidden? Bail. 685 if (!$modal.hasClass('visible')) 686 return; 687 688 // Stop propagation. 689 event.stopPropagation(); 690 691 // Lock. 692 $modal[0]._locked = true; 693 694 // Clear visible, loaded. 695 $modal 696 .removeClass('loaded') 697 698 // Delay. 699 setTimeout(function() { 700 701 $modal 702 .removeClass('visible') 703 704 // Pause scroll zone. 705 $wrapper.triggerHandler('---pauseScrollZone'); 706 707 setTimeout(function() { 708 709 // Clear src. 710 $modalImg.attr('src', ''); 711 712 // Unlock. 713 $modal[0]._locked = false; 714 715 // Focus. 716 $body.focus(); 717 718 }, 475); 719 720 }, 125); 721 722 }) 723 .on('keypress', '.modal', function(event) { 724 725 var $modal = $(this); 726 727 // Escape? Hide modal. 728 if (event.keyCode == 27) 729 $modal.trigger('click'); 730 731 }) 732 .on('mouseup mousedown mousemove', '.modal', function(event) { 733 734 // Stop propagation. 735 event.stopPropagation(); 736 737 }) 738 .prepend('<div class="modal" tabIndex="-1"><div class="inner"><img src="" /></div></div>') 739 .find('img') 740 .on('load', function(event) { 741 742 var $modalImg = $(this), 743 $modal = $modalImg.parents('.modal'); 744 745 setTimeout(function() { 746 747 // No longer visible? Bail. 748 if (!$modal.hasClass('visible')) 749 return; 750 751 // Set loaded. 752 $modal.addClass('loaded'); 753 754 }, 275); 755 756 }); 757 758 }); 759 760 })(jQuery);