puiu91
11/26/2015 - 2:42 PM

Javascript programming like class

Javascript programming like class

// (function (window, document, undefined) {

    'use strict';

    var closeModalButtons = document.querySelectorAll('[ui-role = closeModal]')

    function closeModal() {
        var modal = this.parentNode.parentNode;
        modal.classList.remove('visible');
        rowHighlight.inactive();
    }

    // events
    for (var i = closeModalButtons.length; i--;) {
        (function(i) {
            closeModalButtons[i].addEventListener('click', closeModal, false);
        })(i);
    };

// })(window, document);
/**
 * Modal controller class
 * @return {[type]} [description]
 */
var ModalsController = function() {
  this.editGeocodeModal = document.getElementById('editGeocodeModal')
  this.anotherModal = document.getElementById('editGeocodeModal')

  var constructor = function() {
    this.uiClose()
  }
};

ModalsController.prototype.show = function(modalName) {
  var parent = this

  Object.keys(this).forEach(function(key) {
    if (modalName === key)
      parent[key].classList.add('visible')
  });
};

ModalsController.prototype.hide = function(modalName) {
  var parent = this

  Object.keys(this).forEach(function(key) {
    if (modalName === key)
      parent[key].classList.remove('visible')
  });
};

ModalsController.prototype.uiClose = function() {
  var parent = this

  // here we would need to add the listener to the container of all modals,
  // so that editGeocodeModal would actually be ModalsContainer
  document.getElementById('editGeocodeModal').addEventListener('click', function(e) {

    // check if button was clicked
    if (e.target.nodeName === 'BUTTON') {

        // check if the correct button was clicked
        if (e.target.attributes['ui-role'].textContent === 'closeModal') {

            // get parent modal id
            var parentModalId = e.target.parentNode.parentNode.id

            // close parent modal
            parent.hide(parentModalId)
        };
    };

  }, false);

};

/**
 * How to use
 */
// var ModalsController = new ModalsController();
// ModalsController.show('editGeocodeModal')