I had to do some maintenance programming on a legacy software recently.
Most of the system's logic is done with Java and PL SQL.
The Java creates some special kind of XML. These XML is then displayed in the browser. JavaScript is used as a link between does XML-views and the backend Java.
The views consist of large forms and I thought it is a pity that the functionalities offered by HTML5 aren't available.
In HTML5 label elements can be attached to input elements. So that if you click the label the input element gets the focus.
For more info please see here: http://stackoverflow.com/questions/3681601/what-is-the-for-attribute-for-in-an-html-tag
So I had the idea for a "polyfill".
Can't show the original code. But I made this demo:
window.addEventListener('DOMContentLoaded', function() {
"use strict";
// Only few elements receive attributes.
// Sometimes IDs are used. Classes are rare.
// Mostly name-attributes are found.
let statusCheckboxes = document.querySelectorAll(
'[name="project-status"], ' +
'[name="evaluation-status"], ' +
'[name="invoice-status"]');
statusCheckboxes = Array.from(statusCheckboxes);
statusCheckboxes.forEach(function(statusCheckbox) {
statusCheckbox.nextElementSibling.addEventListener('click', function() {
// Because of the lack of IDs / classes one has to use methods like
// "previousElementSibling", "next ..." a lot to get access to
// the elements.
this.previousElementSibling.checked = !this.previousElementSibling.checked ? true : false;
});
});
});
html,
body {
height: 100%
}
body {
background: -webkit-linear-gradient(45deg, #fff, #cdcdcd);
background: linear-gradient(45deg, #fff, #cdcdcd)
}
.wrap-fieldsets {
width: 800px;
margin: 50px auto
}
.fieldset-project-group {
border-radius: 6px;
margin-bottom: 25px
}
p:first-of-type {
margin-bottom: 30px;
text-align: center;
font-size: 1.2rem;
color: #404040
}
.checkbox-with-label span {
display: inline-block
}
.fieldset-legend,
.checkbox-with-label span {
text-transform: uppercase;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif
}
.fieldset-legend {
font-weight: 800;
margin: 0 5px 8px 10px;
font-size: 1.1rem;
letter-spacing: 1.1px;
width: 150px
}
.checkbox-with-label span {
width: 80px
}
.checkbox-with-label {
color: #404040;
display: inline-block;
margin-right: 30px;
font-weight: 500;
letter-spacing: 1px
}
.checkbox-with-label input[type=checkbox] {
position: relative;
bottom: 2px
}
<div class="wrap-fieldsets">
<p><b>Click on the labels to check / uncheck the boxes.</b>
</p>
<fieldset class="fieldset-project-group">
<legend class="fieldset-legend">Status</legend>
<div class="project-group stati">
<div class="checkbox-with-label">
<input type="checkbox" name="project-status" value="1">
<span>Alpha</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="project-status" value="2">
<span>Beta</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="project-status" value="3">
<span>Gamma</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="project-status" value="3">
<span>Delta</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="project-status" value="3">
<span>Epsilon</span>
</div>
</div>
</fieldset>
<fieldset class="fieldset-project-group">
<legend class="fieldset-legend">Evaluation</legend>
<div class="project-group evaluation">
<div class="checkbox-with-label">
<input type="checkbox" name="evaluation-status" value="1">
<span>Red</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="evaluation-status" value="2">
<span>Blue</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="evaluation-status" value="3">
<span>Green</span>
</div>
</div>
</fieldset>
<fieldset class="fieldset-project-group">
<legend class="fieldset-legend">Invoice</legend>
<div class="project-group evaluation">
<div class="checkbox-with-label">
<input type="checkbox" name="invoice-status" value="1">
<span>Open</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="invoice-status" value="2">
<span>Written</span>
</div>
<div class="checkbox-with-label">
<input type="checkbox" name="invoice-status" value="3">
<span>Payed</span>
</div>
</div>
</fieldset>
</div>
Additionally: My uncompiled Sass code ...
$altColor: lighten(black, 25%);
html, body {
height: 100%;
}
body {
background: linear-gradient(45deg, lighten(grey, 50%), lighten(grey, 30%));
}
.wrap-fieldsets {
width: 800px;
margin: 50px auto;
}
.fieldset-project-group {
border-radius: 6px;
margin-bottom: 25px;
}
p:first-of-type {
margin-bottom: 30px;
text-align: center;
font-size: 1.2rem;
color: $altColor;
}
.checkbox-with-label span {
display: inline-block;
}
.fieldset-legend, .checkbox-with-label span {
text-transform: uppercase;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Geneva, Verdana, sans-serif;
}
.fieldset-legend {
font-weight: 800;
margin: 0 5px 8px 10px;
font-size: 1.1rem;
letter-spacing: 1.1px;
width: 150px;
}
.checkbox-with-label span {
width: 80px;
}
.checkbox-with-label {
color: $altColor;
display: inline-block;
margin-right: 30px;
font-weight: 500;
letter-spacing: 1px;
}
.checkbox-with-label input[type=checkbox] {
position: relative;
bottom: 2px;
}
Should I show them my programming idea or forget about it?
Perhaps using something else to polyfill the described functionality?
Are there ways to improve my current implementation?
Any hints and comments are appreciated.
