appDrop (New) - Let's do it properly

by Farzad Cyrus

HTML

<div class="drop">
  <button class="drop-button">
    Click Me
  </button>
  <div class="drop-container">
    Some Stuff
  </div>
</div>

JavaScript

var app = app || {};

/* @author
 * @
 * @
 * @
 * @
*/
// Show and hide all drops or a single drop by click/hover
// Show and hide all drops or a single drop programatically using drop's public methods as #.drop.show('all') or #.drop.show('#id') and same for hide
// To render the drop container on any DOM element, useful for when you want to show a drop inside a <div></div> that it's overflow is hidden
// To be able to trigger x number of event handlers on either show and hide or both, regardless of click/hover or done programitcally
// To queue events and trigger them all in one go or one by one
// To hide a drop if it mouse was not over that container anymore
// The drop should not show/hide only based on active class, as that could accidently get removed by the developer
// Every drop should have uguid and get stored as data-drop-id

app.drop = function (options) {

    this.options = options;

    this.drop = $(this.dropClass);
    this.button;
    this.container;
    this.close;

    // Classes
    this.dropClass = 'drop'
    this.buttonClass = 'drop-button';
    this.containerClass = 'drop-container';
    this.closeClass = 'drop-close';

    this.activeClass = 'active';

    // Messages
    this.dropMessage = {
        'notValid': 'This is not a valid drop.',
        '': '',
        '': '',
        '': '',
        '': '',
        '': '',
        '': ''
    };

    this.dropHandlers = {
        onShow: [],
        onHide: []
    };

    // Flag
    this.isOnShowActive = false;
    this.isOnHideActive = false;

    this.dropActive = [];
    this.dropInactive = [];

    this.debug = this.options ? this.options.debug : false;

    var self = this;

    // Helper: isActive
    function isActive(drop) {
    }
    // Helper: isRendered
    function isRendered(drop) {
    }
    // Helper: hasEvent
    function hasEvent(drop) {

    }

    // Private: init
    function init() {

        self.drop.each(function (i, e) {
            var drop = $(e),
               ...