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')