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
(Undo revision 52871 by Majora101 (talk))
Tag: Undo
 
(13 intermediate revisions by the same user not shown)
Line 28: Line 28:
     // End of custom navbar
     // End of custom navbar


// Testing
// Collapsible menus...
$(function() {
  var b = $("#toggle-button");
  var w = $("#toggle");
  var l = $("#toggle-content");
 
  w.height(l.outerHeight(true));


class album-list {
   b.click(function() {
   constructor(el) {
    this.el = el;
    this.hover = false;
    this.calculatePosition();
    this.attachEventsListener();
  }
    
    
  attachEventsListener() {
    if(w.hasClass('open')) {
    window.addEventListener('mousemove', e => this.onMouseMove(e));
      w.removeClass('open');
    window.addEventListener('resize', e => this.calculatePosition(e));
      w.height(0);
  }
     } else {
 
      w.addClass('open');
  calculatePosition() {
      w.height(l.outerHeight(true));
    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);

Latest revision as of 23:44, 29 March 2024

/* <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

// Collapsible menus...
$(function() {
  var b = $("#toggle-button");
  var w = $("#toggle");
  var l = $("#toggle-content");
  
  w.height(l.outerHeight(true));

  b.click(function() {
  
    if(w.hasClass('open')) {
      w.removeClass('open');
      w.height(0);
    } else {
      w.addClass('open');
      w.height(l.outerHeight(true));
    }
  
  });
});
Retrieved from "https://dmlive.wiki/w/index.php?title=MediaWiki:Common.js&oldid=53011"