Skip to content

Instantly share code, notes, and snippets.

@roykolak
Created April 21, 2010 14:13
Show Gist options
  • Save roykolak/373852 to your computer and use it in GitHub Desktop.
Save roykolak/373852 to your computer and use it in GitHub Desktop.
(function($){
jQuery.fn.mouseyDialog = function() {
// Classic Class Structure (note: no var, it's exposed for TDD)
MouseyDialog = function(element) {
// Constructor
}
MouseyDialog.prototype = {
sweetMethod: function() {
// Code
},
sweetMethodAgain: function() {
// Code
},
}
// jQuery Distribution
return this.each(function() {
new MouseyDialog(this);
}
}
})(jQuery);
@mdbiscan
Copy link

(function($){
jQuery.fn.mouseyDialog = function() {
// Classic Class Structure (note: no var, it's exposed for TDD)
MouseyDialog = function(anchor) {
this.anchor = $(anchor);
this.dialog = $(this.anchor.attr('href'));
this.button = $('close');

  this.setup();
  this.bindEvents();
};

MouseyDialog.prototype = {
  openDialog: function(x, y) {
    this.dialog.css({top:y, left:x}).fadeIn(250, function() {
      $(this).addClass('visible');
    });
  },
  closeDialog: function() {
    this.dialog.fadeOut(250, function() {
      $(this).removeClass('visible');
    });
  },
  setup: function() {
    this.button
      .appendTo(this.dialog);

    this.dialog
      .hide()
      .css({position:'absolute'})
      .addClass('mouseyDialog')
      .appendTo('body'); 
  },
  bindEvents: function() {
    var that = this;
    // Custom event
    this.anchor.bind('toggleDialog', function(event, x, y) {
      if(that.dialog.hasClass('visible')) {
        that.closeDialog();
      } else {
        that.openDialog(x, y);
      }
    });

    // Events
    this.anchor.click(function(mouse) {
      var x = mouse.pageX+10;
      var y = mouse.pageY+10;

      $(this).trigger('toggleDialog', [x, y]);
      return false;
    });
    this.button.click(function() {
      that.anchor.trigger('toggleDialog');
      return false; 
    });

    // Prevents the dialog from being closed when clicking inside it
    this.dialog.click(function(event) {
      event.stopPropagation();
    });
    // Closes the dialog when clicking outside of it
    $(document).click(function(event) {
      if(event.target != this) {
        if(that.dialog.hasClass('visible')) {
          that.closeDialog();
          event.preventDefault();
        }
      } 
    });
  }
};

// jQuery Distribution
return this.each(function() {
  new MouseyDialog(this);
});

};
})(jQuery);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment