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);