Skip to content

GitLab

Commit 99135041 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

done with gui mockup

parent c563c1ee
Expand all Hide whitespace changes
Inline Side-by-side
dist/leaflet-itracer-control.css 0 → 100644
View file @ 99135041
.itracer-control .chevron-title {
border: 1px solid #ddd;
border-radius: 0px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
margin-bottom: 2px;
}
.itracer-control .uk-button.uk-active {
box-shadow: inset 0 0 5px rgba(0,0,0,.05);
background-color: #ddd;
font-weight: 600;
}
.itracer-control .irs-from {
background-color: #ddd;
color: black;
}
.itracer-control .irs-to {
background-color: #ddd;
color: black;
}
.itracer-control .irs-slider.from {
display: none;
}
.itracer-control .irs-slider.to {
display: none;
}
.itracer-control .next-enabled {
box-shadow: inset 0 0 5px rgba(0,0,0,.05);
text-shadow: 0 -1px 0 rgba(0,0,0,.1);
background-color: #8cc14c;
color: #fff;
}
.itracer-control .irs-disabled {
opacity: 1;
}
.itracer-control .uk-dropdown-small {
min-width: 100px
}
.itracer-control .uk-autocomplete {
width: 100px
}
.itracer-control .form-label {
display: inline-block;
padding-right: 5px;
}
.itracer-control .badge-neutral {
background: lightgray;
}
.itracer-control .percentage {
width: 65px;
}
.itracer-control .title {
padding-left: 5px;
}
.itracer-control .chevron-icon {
float: right;
margin-top: 4px;
margin-right: 3px;
}
.itracer-control .select {
display: inline-block;
margin-left: 3px;
}
.itracer-control .acc-content {
padding-top: 0px;
padding-bottom: 15px;
}
.introjs-helperLayer {
background-color: rgba(255,255,255,0);
}
.introjs-prevbutton {
display: none;
}
.itracer-control .legend-text {
display: inline-block;
position: relative;
left: 5px;
}
.itracer-control .legend-box {
display: inline-block;
top: 1px;
position: relative;
}
dist/leaflet-itracer-control.js 0 → 100644
View file @ 99135041
/// <reference path="def/uikit.d.ts" />
/// <reference path="def/leaflet.d.ts" />
/// <reference path="def/moment.d.ts" />
/// <reference path="def/leaflet-forcing-boundary.d.ts" />
/// <reference path="def/reqwest.d.ts" />
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var ITLocation = (function (_super) {
__extends(ITLocation, _super);
function ITLocation(id, parentDiv, lang, langData, map, forcing) {
var _this = this;
var options = {};
var initials = 'it';
options['single'] = false;
options['multiple'] = false;
options['line'] = false;
options['circle'] = true;
options['polygon'] = true;
options['initials'] = initials;
_this = _super.call(this, id, 'Specify location', parentDiv, lang, langData, map, forcing, options) || this;
var fieldset = L.DomUtil.create('fieldset', 'uk-margin-top', _this.locationForm);
var surfacevolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
surfacevolumeRowDiv.id = 'guideos9';
surfacevolumeRowDiv.guideFn = function () {
_this.validate();
};
_super.prototype.addLabelDiv.call(_this, surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
var surfacevolumeDiv = L.DomUtil.create('div', '', surfacevolumeRowDiv);
surfacevolumeDiv.setAttribute('data-uk-button-radio', '');
var surfacevolumeButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', surfacevolumeDiv);
var surfacevolumebuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', surfacevolumeButtonGrid);
surfacevolumeButtonGrid.id = 'guidefo5';
var surfacevolumeButtonGroup = L.DomUtil.create('div', 'uk-button-group', surfacevolumebuttonsDiv);
_this.surfaceButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.surfaceButton.textContent = 'Flat Layer';
_this.volumeButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.volumeButton.textContent = 'Volume';
var depthSurfaceRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
var depthSurfaceDiv = L.DomUtil.create('div', ' uk-width-1-1', depthSurfaceRowDiv);
_this.depthSurfaceInput = L.DomUtil.create('input', 'uk-width-1-4', depthSurfaceDiv);
_this.depthSurfaceInput.type = 'number';
_this.depthSurfaceInput.value = '0';
_this.depthSurfaceInput.step = '10';
_this.depthSurfaceInput.min = '0';
_this.depthSurfaceInput.onsubmit = function () { };
var depthVolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
var depthVolumeDiv = L.DomUtil.create('div', ' uk-width-1-1', depthVolumeRowDiv);
_this.depthVolumeMinInput = L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
_this.depthVolumeMinInput.type = 'number';
_this.depthVolumeMinInput.value = '0';
_this.depthVolumeMinInput.step = '10';
_this.depthVolumeMinInput.min = '0';
var separator = L.DomUtil.create('span', '', depthVolumeDiv);
separator.textContent = ' - ';
_this.depthVolumeMaxInput = L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
_this.depthVolumeMaxInput.type = 'number';
_this.depthVolumeMaxInput.value = '0';
_this.depthVolumeMaxInput.step = '10';
_this.depthVolumeMaxInput.min = '0';
_this.depthVolumeMinInput.onchange = function () {
var minDepth = parseFloat(_this.depthVolumeMinInput.value);
var maxDepth = parseFloat(_this.depthVolumeMaxInput.value);
if (minDepth < 0)
_this.depthVolumeMinInput.value = '0';
if (minDepth > maxDepth)
_this.depthVolumeMaxInput.value = _this.depthVolumeMinInput.value;
_this.validate();
};
_this.depthVolumeMaxInput.onchange = function () {
var minDepth = parseFloat(_this.depthVolumeMinInput.value);
var maxDepth = parseFloat(_this.depthVolumeMaxInput.value);
if (maxDepth < 0)
_this.depthVolumeMaxInput.value = '0';
if (maxDepth < minDepth)
_this.depthVolumeMinInput.value = _this.depthVolumeMaxInput.value;
if (maxDepth > parseFloat(_this.depthVolumeMaxInput.max))
_this.depthVolumeMaxInput.value = _this.depthVolumeMaxInput.max;
_this.validate();
};
_this.depthSurfaceInput.onchange = function () {
var depth = parseFloat(_this.depthSurfaceInput.value);
if (depth < 0)
_this.depthSurfaceInput.value = '0';
if (depth > parseFloat(_this.depthSurfaceInput.max))
_this.depthSurfaceInput.value = _this.depthSurfaceInput.max;
_this.validate();
};
_this.surfaceButton.onclick = function () {
depthSurfaceRowDiv.style.display = '';
depthVolumeRowDiv.style.display = 'none';
_this.depthSurfaceInput.value = '0';
_this.isVolume = false;
_this.validate();
_this.fireChangeFn(_this);
};
_this.volumeButton.onclick = function () {
depthVolumeRowDiv.style.display = '';
depthSurfaceRowDiv.style.display = 'none';
_this.depthVolumeMinInput.value = '0';
_this.depthVolumeMaxInput.value = '0';
if (_this.positionMaxDepth > 0)
_this.depthVolumeMaxInput.value = _this.positionMaxDepth;
_this.isVolume = true;
_this.validate();
_this.fireChangeFn(_this);
};
UIkit.ready(function () {
_this.defaults();
});
return _this;
}
ITLocation.prototype.defaults = function () {
_super.prototype.defaults.call(this);
if (document.body.contains(this.surfaceButton) && this.surfaceButton.style.display != 'none')
this.surfaceButton.click();
};
ITLocation.prototype.mandatoryTxt = function () {
return _super.prototype.mandatoryTxt.call(this) + '<p>Flat layer depth or Volume needs to be specified. Volume from and to depth cannot be equal </p>. ';
};
ITLocation.prototype.validate = function () {
this.status = false;
STWkit.AccordionCard.enableNext(this.nextButton, false);
if (this.isVolume) {
var minDepth = parseFloat(this.depthVolumeMinInput.value);
var maxDepth = parseFloat(this.depthVolumeMaxInput.value);
if (this.positionMaxDepth > 0) {
if (maxDepth == 0) {
this.depthVolumeMaxInput.value = this.positionMaxDepth;
this.depthVolumeMaxInput.max = this.positionMaxDepth;
maxDepth = this.positionMaxDepth;
}
if (minDepth > this.positionMaxDepth) {
this.depthVolumeMinInput.value = '0';
minDepth = 0;
}
if (maxDepth > this.positionMaxDepth) {
this.depthVolumeMaxInput.value = this.positionMaxDepth;
maxDepth = this.positionMaxDepth;
}
}
if (maxDepth > minDepth) {
_super.prototype.validate.call(this);
}
}
else {
var depth = parseFloat(this.depthSurfaceInput.value);
if (this.positionMaxDepth > 0) {
this.depthSurfaceInput.max = this.positionMaxDepth;
if (depth > this.positionMaxDepth) {
this.depthSurfaceInput.value = this.positionMaxDepth;
depth = this.positionMaxDepth;
}
if (depth <= this.positionMaxDepth) {
_super.prototype.validate.call(this);
}
}
}
};
ITLocation.prototype.show = function () {
_super.prototype.show.call(this);
};
ITLocation.prototype.hide = function () {
_super.prototype.hide.call(this);
};
ITLocation.prototype.populateCard = function (geojson) {
_super.prototype.populateCard.call(this, geojson);
};
ITLocation.prototype.populateData = function (geojson) {
_super.prototype.populateData.call(this, geojson);
};
ITLocation.prototype.clear = function () {
_super.prototype.clear.call(this);
this.depthSurfaceInput.value = '0';
this.depthVolumeMaxInput.value = '0';
this.depthVolumeMinInput.value = '0';
};
return ITLocation;
}(STWkit.LocationCard));
var ITSpreading = (function (_super) {
__extends(ITSpreading, _super);
function ITSpreading(id, title, parentDiv, lang, map) {
var _this = this;
var distributionDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, title, parentDiv, distributionDiv) || this;
var self = _this;
var form = L.DomUtil.create('form', 'uk-form uk-form-stacked', distributionDiv);
form.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
function addOption(parent, value, txt) {
var option = L.DomUtil.create('option', '', parent);
option.value = value;
option.textContent = txt;
}
var fieldset = L.DomUtil.create('fieldset', '', form);
var spreadingRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
spreadingRowDiv.id = 'guideos9';
spreadingRowDiv.guideFn = function () {
validate();
};
_super.prototype.addLabelDiv.call(_this, spreadingRowDiv, "Spreading method", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
var spreadingDiv = L.DomUtil.create('div', 'uk-margin-bottom', spreadingRowDiv);
spreadingDiv.setAttribute('data-uk-button-radio', '');
var spreadingButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', spreadingDiv);
var spreadingbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', spreadingButtonGrid);
spreadingButtonGrid.id = 'guidefo5';
var spreadingButtonGroup = L.DomUtil.create('div', 'uk-button-group', spreadingbuttonsDiv);
self.spreading2DButton = L.DomUtil.create('button', 'uk-button uk-button-small', spreadingButtonGroup);
self.spreading2DButton.textContent = 'Constant depth';
self.spreading3DButton = L.DomUtil.create('button', 'uk-button uk-button-small', spreadingButtonGroup);
self.spreading3DButton.textContent = 'Three-dimensional';
function validate() {
self.status = true;
STWkit.AccordionCard.enableNext(self.nextButton, true);
(self.oncallback && self.oncallback());
}
;
_this.spreading3DButton.onclick = function () {
validate();
};
_this.spreading2DButton.onclick = function () {
validate();
};
var clearDiv = L.DomUtil.create('div', 'uk-clearfix', fieldset);
var clearButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
clearButton.textContent = 'Clear';
clearButton.onclick = function () {
self.clear();
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos10';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
};
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.nextButton.onclick = function () {
if (!STWkit.AccordionCard.isEnabled(self.nextButton)) {
STWkit.AccordionCard.warningMsg('Mandatory fields missing', 'Specify a valid <b>amount</b> and <b>duration</b>.');
return;
}
(self.oncallback && self.oncallback(true));
};
UIkit.ready(function () {
self.defaults();
});
return _this;
}
ITSpreading.prototype.defaults = function () {
var self = this;
};
ITSpreading.prototype.changeFn = function (changeCard) {
var self = this;
if (typeof changeCard.isVolume !== 'undefined') {
self.isVolume = changeCard.isVolume;
self.spreading2DButton.disabled = false;
self.spreading2DButton.click();
if (self.isVolume) {
self.spreading2DButton.disabled = true;
self.spreading3DButton.click();
}
}
};
ITSpreading.prototype.populateCard = function (geojson) {
var self = this;
var simulation = geojson.features[0].properties.simulation;
self.amountInput.value = simulation.amount;
var amountevt = document.createEvent('Event');
amountevt.initEvent("change", true, true);
self.amountInput.dispatchEvent(amountevt);
self.amountSelect.value = simulation.amountUnit;
self.spreadingInput.value = simulation.duration;
var durationevt = document.createEvent('Event');
durationevt.initEvent("change", true, true);
self.spreadingInput.dispatchEvent(durationevt);
self.durationSelect.value = simulation.durationUnit;
};
ITSpreading.prototype.populateData = function (geojson) {
var self = this;
geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
geojson.features[0].properties["simulation"]["duration"] = self.spreadingInput.value;
geojson.features[0].properties["simulation"]["durationUnit"] = self.durationSelect.options[self.durationSelect.selectedIndex].value;
};
ITSpreading.prototype.clear = function () {
var self = this;
_super.prototype.clear.call(this);
self.amountInput.value = '';
self.spreadingInput.value = '';
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.status = false;
(self.oncallback && self.oncallback());
};
return ITSpreading;
}(STWkit.AccordionCard));
//# sourceMappingURL=leaflet-itracer-cards.js.map
/// <reference path="def/uikit.d.ts" />
/// <reference path="def/leaflet.d.ts" />
/// <reference path="def/introJs.d.ts" />
/// <reference path="def/stwkit.d.ts" />
/// <reference path="def/moment.d.ts" />
/// <reference path="def/reqwest.d.ts" />
/// <reference path="leaflet-itracer-cards.ts" />
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var L;
(function (L) {
var Control;
(function (Control) {
var InstantTracer = (function (_super) {
__extends(InstantTracer, _super);
function InstantTracer(options) {
var _this = _super.call(this, options) || this;
_this.type = 'point';
_this.subtype = 'instant';
_this.name = 'itracer';
_this.initials = 'it';
return _this;
}
InstantTracer.prototype.setup = function (map) {
var _this = this;
var self = this;
this.container = L.DomUtil.create('div', self.name + '-control');
this.accordionDiv = L.DomUtil.create('div', 'uk-accordion', this.container);
var locationid = self.initials + 'locationCard';
self.cardMap[locationid] = new ITLocation(locationid, this.accordionDiv, self.lang, self.langData, map, self.forcing);
self.cardMap[locationid].show();
var periodid = self.initials + 'periodCard';
self.cardMap[periodid] = new STWkit.PeriodCard(periodid, 'Simulation period', this.accordionDiv, self.lang, map, self.domain, self.forcingmodel);
var spreadingid = self.initials + 'distributionCard';
self.cardMap[spreadingid] = new ITSpreading(spreadingid, 'Spreading', this.accordionDiv, self.lang, map);
self.cardMap[locationid].addChangeFnListener(self.cardMap[spreadingid]);
_super.prototype.setup.call(this, map);
var chain = [];
chain[locationid] = periodid;
chain[periodid] = spreadingid;
chain[spreadingid] = '';
self.cardMap[locationid].oncallback = function (gonext) {
_super.prototype.callback.call(_this, chain, locationid, gonext);
};
self.cardMap[periodid].oncallback = function (gonext) {
_super.prototype.callback.call(_this, chain, periodid, gonext);
};
self.cardMap[spreadingid].oncallback = function (gonext) {
_super.prototype.callback.call(_this, chain, spreadingid, gonext);
};
};
InstantTracer.prototype.ready = function (name) {
_super.prototype.ready.call(this, name);
};
InstantTracer.prototype.clear = function () {
_super.prototype.clear.call(this);
};
InstantTracer.prototype.show = function () {
};
InstantTracer.prototype.hide = function () {
this.clear();
};
return InstantTracer;
}(STWkit.CardControl));
Control.InstantTracer = InstantTracer;
})(Control = L.Control || (L.Control = {}));
})(L || (L = {}));
//# sourceMappingURL=leaflet-itracer-control.js.map
\ No newline at end of file
src/leaflet-itracer-cards.js
View file @ 99135041
......@@ -30,9 +30,9 @@ var ITLocation = (function (_super) {
var surfacevolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
surfacevolumeRowDiv.id = 'guideos9';
surfacevolumeRowDiv.guideFn = function () {
validate();
_this.validate();
};
_super.prototype.addLabelDiv.call(_this, surfacevolumeRowDiv, "Surface/Volume", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
var surfacevolumeDiv = L.DomUtil.create('div', '', surfacevolumeRowDiv);
surfacevolumeDiv.setAttribute('data-uk-button-radio', '');
var surfacevolumeButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', surfacevolumeDiv);
......@@ -40,7 +40,7 @@ var ITLocation = (function (_super) {
surfacevolumeButtonGrid.id = 'guidefo5';
var surfacevolumeButtonGroup = L.DomUtil.create('div', 'uk-button-group', surfacevolumebuttonsDiv);
_this.surfaceButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.surfaceButton.textContent = 'Surface';
_this.surfaceButton.textContent = 'Flat Layer';
_this.volumeButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.volumeButton.textContent = 'Volume';
var depthSurfaceRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
......@@ -51,8 +51,9 @@ var ITLocation = (function (_super) {
_this.depthSurfaceInput.value = '0';
_this.depthSurfaceInput.step = '10';
_this.depthSurfaceInput.min = '0';
_this.depthSurfaceInput.onsubmit = function () { };
var depthVolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth range [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
var depthVolumeDiv = L.DomUtil.create('div', ' uk-width-1-1', depthVolumeRowDiv);
_this.depthVolumeMinInput = L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
_this.depthVolumeMinInput.type = 'number';
......@@ -66,30 +67,104 @@ var ITLocation = (function (_super) {
_this.depthVolumeMaxInput.value = '0';
_this.depthVolumeMaxInput.step = '10';
_this.depthVolumeMaxInput.min = '0';
_this.depthVolumeMinInput.onchange = function () { if (parseFloat(_this.depthVolumeMinInput.value) < 0)
_this.depthVolumeMinInput.value = '0'; };
_this.depthVolumeMaxInput.onchange = function () { if (parseFloat(_this.depthVolumeMaxInput.value) < 0)
_this.depthVolumeMaxInput.value = '0'; };
_this.depthSurfaceInput.onchange = function () { if (parseFloat(_this.depthSurfaceInput.value) < 0)
_this.depthSurfaceInput.value = '0'; };
_this.depthVolumeMinInput.onchange = function () {
var minDepth = parseFloat(_this.depthVolumeMinInput.value);
var maxDepth = parseFloat(_this.depthVolumeMaxInput.value);
if (minDepth < 0)
_this.depthVolumeMinInput.value = '0';
if (minDepth > maxDepth)
_this.depthVolumeMaxInput.value = _this.depthVolumeMinInput.value;
_this.validate();
};
_this.depthVolumeMaxInput.onchange = function () {
var minDepth = parseFloat(_this.depthVolumeMinInput.value);
var maxDepth = parseFloat(_this.depthVolumeMaxInput.value);
if (maxDepth < 0)
_this.depthVolumeMaxInput.value = '0';
if (maxDepth < minDepth)
_this.depthVolumeMinInput.value = _this.depthVolumeMaxInput.value;
if (maxDepth > parseFloat(_this.depthVolumeMaxInput.max))
_this.depthVolumeMaxInput.value = _this.depthVolumeMaxInput.max;
_this.validate();
};
_this.depthSurfaceInput.onchange = function () {
var depth = parseFloat(_this.depthSurfaceInput.value);
if (depth < 0)
_this.depthSurfaceInput.value = '0';
if (depth > parseFloat(_this.depthSurfaceInput.max))
_this.depthSurfaceInput.value = _this.depthSurfaceInput.max;
_this.validate();
};
_this.surfaceButton.onclick = function () {
depthSurfaceRowDiv.style.display = '';
depthVolumeRowDiv.style.display = 'none';
_this.depthSurfaceInput.value = '0';
_this.isVolume = false;
_this.validate();
_this.fireChangeFn(_this);
};
_this.volumeButton.onclick = function () {