Do you have audio cassette or reel tapes, MiniDisc, DAT, 8mm/Hi8 video tapes, or VHS tapes
containing live recordings, interviews, or demos? Please see Contributing, or e-mail us.

To discuss Depeche Mode with other fans, please consider joining the official Depeche Mode Discord server or independent fan server Discord for the Masses.
To coordinate site work, we recommend the Depeche Mode Live Editor Discord group.

MediaWiki:Common.js: Difference between revisions

From DM Live - the Depeche Mode live encyclopedia for the masses
Jump to navigationJump to search
No edit summary
No edit summary
Line 27: Line 27:
})(jQuery); // end jQuery
})(jQuery); // end jQuery
     // End of custom navbar
     // End of custom navbar
// Testing
class album-list {
  constructor(el) {
    this.el = el;
    this.hover = false;
    this.calculatePosition();
    this.attachEventsListener();
  }
 
  attachEventsListener() {
    window.addEventListener('mousemove', e => this.onMouseMove(e));
    window.addEventListener('resize', e => this.calculatePosition(e));
  }
 
  calculatePosition() {
    TweenMax.set(this.el, {
      x: 0,
      y: 0,
      scale: 1
    });
    const box = this.el.getBoundingClientRect();
    this.x = box.left + (box.width * 0.5);
    this.y = box.top + (box.height * 0.5);
    this.width = box.width;
    this.height = box.height;
  }
 
  onMouseMove(e) {
    let hover = false;
    let hoverArea = (this.hover ? 0.7 : 0.5);
    let x = e.clientX - this.x;
    let y = e.clientY - this.y;
    let distance = Math.sqrt( x*x + y*y );
    if (distance < (this.width * hoverArea)) {
      hover = true;
        if (!this.hover) {
          this.hover = true;
        }
        this.onHover(e.clientX, e.clientY);
    }
   
    if(!hover && this.hover) {
      this.onLeave();
      this.hover = false;
    }
  }
 
  onHover(x, y) {
    TweenMax.to(this.el, 0.4, {
      x: (x - this.x) * 0.4,
      y: (y - this.y) * 0.4,
      scale: 1.15,
      ease: Power2.easeOut
    });
    this.el.style.zIndex = 10;
  }
  onLeave() {
    TweenMax.to(this.el, 0.7, {
      x: 0,
      y: 0,
      scale: 1,
      ease: Elastic.easeOut.config(1.2, 0.4)
    });
    this.el.style.zIndex = 1;
  }
}
const btn1 = document.querySelector('li:nth-child(1) album-list');
new HoverButton(btn1);

Revision as of 19:54, 5 November 2019

/* <pre> */
/* Any JavaScript here will be loaded for all users on every page load. */

    // Start of custom navbar js
(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery); // end jQuery
    // End of custom navbar
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Common.js&oldid=35083"