dropdown.js

'use strict';

var $ = require('zepto');
var extend = require('lodash/object/extend');
var bind = require('lodash/function/bind');
var fastclick = require('fastclick');
var mediator = require('../helpers/mediator');
var EventEmitter = require('events').EventEmitter;
var MQ = require('../ui/base');

var Dropdown = function (options) {
    if (!options || !options.$toggle || !options.$content) {
        throw new Error('Arguments are missing');
    }

    this.defaults = {
        $toggle: null,
        $content: null,
        activeClass: 'is-active',
        modalClass: 'Modal',
        modalActiveClass: 'is-modalOpen',
        modalClassModifier: 'transparent'
    };

    this.options = extend({}, this.defaults, options);
    this.$body = $('body');
    this.isActive = false;

    this.createModal();
    this.bindEvents();
    this.setAriaExpanded(false);
};

// Extend EventEmitter
Dropdown.prototype = Object.create(EventEmitter.prototype);

Dropdown.prototype.createModal = function () {
    var classes = [this.options.modalClass, this.options.modalClass + '--' + this.options.modalClassModifier];
    this.$modal = $('<div />', { 'class': classes.join(' ') });
    this.$body.append(this.$modal);
};

Dropdown.prototype.bindEvents = function () {
    this.options.$toggle.on('click', bind(this.onToggleClicked, this));
    this.$modal.on('click', bind(this.close, this));

    mediator.on('scrollTo:click', bind(this.close, this));

    fastclick(this.options.$toggle[0]);

    MQ.addQuery({
        context: ['small', 'medium'],
        match: bind(this.close, this)
    });
};

Dropdown.prototype.onToggleClicked = function (event) {
    event.preventDefault();
    this.isActive ? this.close() : this.open();
};


Dropdown.prototype.open = function () {
    $.each([this.options.$toggle, this.options.$content], bind(function (index, el) {
        el.addClass(this.options.activeClass);
    }, this));

    this.setAriaExpanded(true);
    this.$modal.addClass(this.options.modalActiveClass);
    this.isActive = true;

    this.emit('open');
};

Dropdown.prototype.close = function () {
    $.each([this.options.$toggle, this.options.$content], bind(function (index, el) {
        el.removeClass(this.options.activeClass);
    }, this));

    this.setAriaExpanded(false);
    this.$modal.removeClass(this.options.modalActiveClass);
    this.isActive = false;
};

Dropdown.prototype.setAriaExpanded = function (isExpanded) {
    $.each([this.options.$toggle, this.options.$content], function (index, el) {
        el.attr('aria-expanded', isExpanded);
    });
};

module.exports = Dropdown;