New tournament form in progress

view-webapp/src/main/webapp/js/domhelper.js

@@ -1,3 +1,5 @@
+// This small library is meant to be a lightweight replacement of jQuery basic functions.
+
 window.$ = document.querySelectorAll.bind(document);
 Node.prototype.on = window.on = function (eventNames, fn) {
   let events = eventNames.split(' ')
@@ -5,31 +7,51 @@ Node.prototype.on = window.on = function (eventNames, fn) {
     let name = events[i];
     this.addEventListener(name, fn);
   }
+  return this;
 };
 NodeList.prototype.__proto__ = Array.prototype;
 NodeList.prototype.on = NodeList.prototype.addEventListener = function (eventNames, fn) {
   this.forEach(function (elem, i) {
     elem.on(eventNames, fn);
   });
+  return this;
 }
 NodeList.prototype.addClass = function(className) {
   this.forEach(function (elem, i) {
     elem.classList.add(className);
   });
+  return this;
+}
+Element.prototype.addClass = function(className) {
+  this.classList.add(className);
+  return this;
 }
 NodeList.prototype.removeClass = function(className) {
   this.forEach(function (elem, i) {
     elem.classList.remove(className);
   });
+  return this;
+}
+Element.prototype.removeClass = function(className) {
+  this.classList.remove(className);
+  return this;
 }
 NodeList.prototype.toggleClass = function(className) {
   this.forEach(function (elem, i) {
     elem.classList.toggle(className);
   });
+  return this;
+}
+Element.prototype.toggleClass = function(className) {
+  this.classList.toggle(className);
+  return this;
 }
 NodeList.prototype.hasClass = function(className) {
   return this.item(0).classList.contains(className);
 }
+Element.prototype.toggleClass = function(className) {
+  this.classList.contains(className);
+}
 Node.prototype.offset = function() {
   let _x = 0;
   let _y = 0;
@@ -42,21 +64,34 @@ Node.prototype.offset = function() {
   return { top: _y, left: _x };
 }
 NodeList.prototype.offset = function() {
-  this.item(0).offset() // CB TODO review
+  this.item(0).offset();
 }
 Element.prototype.attr = function (key) {
-  return this.attributes[key].value
+  return this.attributes[key].value;
 }
 NodeList.prototype.attr = function(key) {
-  this.item(0).attr(key) // CB TODO review
+  this.item(0).attr(key);
 }
 Element.prototype.data = function (key) {
   return this.attributes[`data-${key}`].value
 }
 NodeList.prototype.data = function(key) {
-  this.item(0).data(key) // CB TODO review
+  this.item(0).data(key);
+}
+NodeList.prototype.show = function(key) {
+  this.item(0).show(key);
+  return this;
+}
+Element.prototype.show = function (key) {
+  this.style.display = 'block';
+}
+NodeList.prototype.hide = function(key) {
+  this.item(0).hide(key);
+  return this;
+}
+Element.prototype.hide = function (key) {
+  this.style.display = 'none';
 }
-
 
 let initFunctions = [];
 function onLoad(fct) {

view-webapp/src/main/webapp/js/main.js

@@ -83,3 +83,39 @@ function exportCSV(filename, content) {
   link.click();
   document.body.removeChild(link);
 }
+
+/* modals */
+
+NodeList.prototype.modal = function(show) {
+  this.item(0).modal(show);
+  return this;
+}
+Element.prototype.modal = function(show) {
+  if (show) {
+    document.body.addClass('dimmed');
+    this.addClass('active');
+  }
+  else {
+    this.removeClass('active');
+    document.body.removeClass('dimmed');
+  }
+  return this;
+}
+
+
+onLoad(() => {
+  /*
+  document.on('click', e => {
+    if (!e.target.closest('.modal')) $('.modal').hide();
+  })
+   */
+  $('i.close.icon').on('click', e => {
+    let modal = e.target.closest('.modal');
+    if (modal) modal.modal(false);
+  });
+  $('.modal .actions .cancel').on('click', e => {
+    e.target.closest('.modal').modal(false);
+  });
+  $('#dimmer').on('click', e => $('.modal').modal(false));
+});
+