mirror of
https://github.com/IfcOpenShell/IfcOpenShell.git
synced 2026-08-10 09:48:32 +00:00
IDS webapp with some basic read/write functionality
This commit is contained in:
Dion Moult
@@ -77,13 +77,16 @@ class Facet:
|
||||
templates = self.requirement_templates
|
||||
|
||||
for template in templates:
|
||||
total_variables = len(template) - len(template.replace("{", ""))
|
||||
total_replacements = 0
|
||||
for key in self.parameters:
|
||||
key = key.replace("@", "")
|
||||
value = getattr(self, key)
|
||||
key_variable = "{" + key + "}"
|
||||
if value is not None and key_variable in template:
|
||||
template = template.replace(key_variable, str(value))
|
||||
if "{" not in template:
|
||||
total_replacements += 1
|
||||
if total_replacements == total_variables:
|
||||
return template
|
||||
|
||||
def to_ids_value(self, parameter):
|
||||
@@ -574,7 +577,7 @@ class Restriction:
|
||||
|
||||
def __str__(self):
|
||||
if self.type == "enumeration":
|
||||
msg = "one of '%s'" % "' or '".join(self.options)
|
||||
return "one of '%s'" % "' or '".join(self.options)
|
||||
elif self.type == "bounds":
|
||||
bounds = {
|
||||
"minInclusive": "larger or equal ",
|
||||
@@ -582,15 +585,14 @@ class Restriction:
|
||||
"minExclusive": "larger than ",
|
||||
"maxExclusive": "smaller than ",
|
||||
}
|
||||
msg = "of value %s" % ", and ".join([bounds[x] + str(self.options[x]) for x in self.options])
|
||||
return "of value %s" % ", and ".join([bounds[x] + str(self.options[x]) for x in self.options])
|
||||
elif self.type == "length":
|
||||
msg = "with %s letters" % " and ".join(self.options)
|
||||
return "%s letters long" % " and ".join(self.options)
|
||||
elif self.type == "pattern":
|
||||
msg = "with pattern '%s'" % self.options
|
||||
return "the pattern '%s'" % self.options
|
||||
# TODO add fractionDigits
|
||||
# TODO add totalDigits
|
||||
# TODO add whiteSpace
|
||||
return msg
|
||||
|
||||
|
||||
class Result:
|
||||
|
||||
@@ -0,0 +1,869 @@
|
||||
"use strict";
|
||||
|
||||
feather.replace()
|
||||
|
||||
var ns = 'http://standards.buildingsmart.org/IDS';
|
||||
var xs = 'http://www.w3.org/2001/XMLSchema';
|
||||
|
||||
class IDSContainer extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.ids = null;
|
||||
this.containerId = crypto.randomUUID();
|
||||
}
|
||||
}
|
||||
|
||||
class IDSInfo extends HTMLElement {
|
||||
load(idsElement) {
|
||||
this.idsElement = idsElement;
|
||||
var idsInfoElements = this.getElementsByTagName('ids-info-element');
|
||||
for (var i=0; i<idsInfoElements.length; i++) {
|
||||
var name = idsInfoElements[i].attributes['name'].value;
|
||||
idsInfoElements[i].load(idsElement, idsElement.getElementsByTagNameNS(ns, name)[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class IDSInfoElement extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.contentEditable = true;
|
||||
this.addEventListener('input', this.input);
|
||||
this.addEventListener('blur', this.blur);
|
||||
this.defaultValue = this.textContent;
|
||||
if (this.defaultValue == 'date()') {
|
||||
this.defaultValue = new Date().toISOString().split('T')[0];
|
||||
this.textContent = this.defaultValue;
|
||||
}
|
||||
this.title = this.attributes['name'].value.replace(/^\w/, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
load(idsParentElement, idsElement) {
|
||||
this.idsElement = idsElement;
|
||||
this.idsParentElement = idsParentElement;
|
||||
if (idsElement) {
|
||||
this.textContent = idsElement.textContent;
|
||||
}
|
||||
this.idsElement ? this.classList.remove('null') : this.classList.add('null');
|
||||
this.validate() ? this.classList.remove('error') : this.classList.add('error');
|
||||
}
|
||||
|
||||
input(e) {
|
||||
if ( ! this.idsElement && this.textContent) {
|
||||
this.add();
|
||||
}
|
||||
this.idsElement ? this.idsElement.textContent = this.textContent : null;
|
||||
this.idsElement ? this.classList.remove('null') : this.classList.add('null');
|
||||
this.validate() ? this.classList.remove('error') : this.classList.add('error');
|
||||
}
|
||||
|
||||
blur(e) {
|
||||
if (this.idsElement && ( ! this.textContent)) {
|
||||
this.remove();
|
||||
}
|
||||
if ( ! this.textContent) {
|
||||
this.textContent = this.defaultValue;
|
||||
}
|
||||
this.idsElement ? this.classList.remove('null') : this.classList.add('null');
|
||||
this.validate() ? this.classList.remove('error') : this.classList.add('error');
|
||||
}
|
||||
|
||||
validate() {
|
||||
if (this.attributes['name'].value == 'author') {
|
||||
return this.textContent.match(new RegExp('[^@]+@[^\.]+\..+')) != null;
|
||||
} else if (this.attributes['name'].value == 'date') {
|
||||
return this.textContent.match(new RegExp('[0-9]{4}-[0-9]{2}-[0-9]{2}')) != null;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
add() {
|
||||
var container = this.closest('ids-container');
|
||||
this.idsElement = container.ids.createElementNS(ns, this.attributes["name"].value);
|
||||
this.idsElement.textContent = this.textContent;
|
||||
this.idsParentElement.appendChild(this.idsElement);
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.idsParentElement.removeChild(this.idsElement);
|
||||
this.idsElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecRemove extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.addEventListener('click', this.click);
|
||||
}
|
||||
|
||||
click(e) {
|
||||
var specs = this.closest('ids-specs');
|
||||
var spec = this.closest('ids-spec');
|
||||
specs.idsElement.removeChild(spec.idsElement);
|
||||
specs.idsElement.dispatchEvent(new Event('ids-spec-remove'));
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecMove extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.direction = this.attributes['direction'].value;
|
||||
this.addEventListener('click', this.click);
|
||||
}
|
||||
|
||||
load(idsElement) {
|
||||
var self = this;
|
||||
this.idsElement = idsElement;
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
var index = Array.prototype.indexOf.call(this.idsElement.parentElement.children, this.idsElement);
|
||||
if (index == 0 && this.direction == 'up') {
|
||||
this.classList.add('hidden');
|
||||
} else if (index == this.idsElement.parentElement.children.length - 1 && this.direction == 'down') {
|
||||
this.classList.add('hidden');
|
||||
} else {
|
||||
this.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
click(e) {
|
||||
if (this.direction == "up") {
|
||||
this.idsElement.parentElement.insertBefore(this.idsElement, this.idsElement.previousElementSibling);
|
||||
} else if (this.direction == "down") {
|
||||
var nextNextSibling = this.idsElement.nextElementSibling.nextElementSibling;
|
||||
this.idsElement.parentElement.insertBefore(this.idsElement, nextNextSibling);
|
||||
}
|
||||
this.idsElement.parentElement.dispatchEvent(new Event('ids-spec-move'));
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecAdd extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.addEventListener('click', this.click);
|
||||
}
|
||||
|
||||
click(e) {
|
||||
var specs = this.closest('ids-specs');
|
||||
var spec = this.closest('ids-spec');
|
||||
|
||||
var container = this.closest('ids-container');
|
||||
var newSpec = container.ids.createElementNS(ns, "specification");
|
||||
var newApplicability = container.ids.createElementNS(ns, "applicability");
|
||||
var newRequirements = container.ids.createElementNS(ns, "requirements");
|
||||
|
||||
specs.idsElement.insertBefore(newSpec, spec.idsElement.nextElementSibling);
|
||||
newSpec.appendChild(newApplicability);
|
||||
newSpec.appendChild(newRequirements);
|
||||
specs.idsElement.dispatchEvent(new Event('ids-spec-add'));
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecHandle extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.addEventListener('dragstart', this.dragstart);
|
||||
this.addEventListener('dragend', this.dragend);
|
||||
}
|
||||
|
||||
dragstart(e) {
|
||||
var snippet = this.getElementsByClassName('snippet')[0];
|
||||
snippet.style.left = e.clientX + 'px';
|
||||
snippet.style.top = e.clientY + 'px';
|
||||
var dropzones = document.getElementsByTagName('ids-spec');
|
||||
for (var i=0; i<dropzones.length; i++) {
|
||||
dropzones[i].classList.add('dropzone');
|
||||
}
|
||||
snippet.classList.remove('hidden');
|
||||
this.closest('ids-spec').style.opacity = '0.3';
|
||||
}
|
||||
|
||||
dragend(e) {
|
||||
var snippet = this.getElementsByClassName('snippet')[0];
|
||||
snippet.classList.add('hidden');
|
||||
this.closest('ids-spec').style.opacity = '1';
|
||||
var dropzones = document.getElementsByTagName('ids-spec');
|
||||
for (var i=0; i<dropzones.length; i++) {
|
||||
dropzones[i].classList.remove('dropzone');
|
||||
dropzones[i].classList.remove('dragover');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecCounter extends HTMLElement {
|
||||
connectedCallback() {
|
||||
var spec = this.closest('ids-spec');
|
||||
var index = Array.prototype.indexOf.call(spec.parentElement.children, spec);
|
||||
this.textContent = index;
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecAnchor extends HTMLElement {
|
||||
connectedCallback() {
|
||||
var spec = this.closest('ids-spec');
|
||||
var index = Array.prototype.indexOf.call(spec.parentElement.children, spec);
|
||||
var container = this.closest('ids-container');
|
||||
var a = this.getElementsByTagName('a')[0];
|
||||
a.setAttribute('href', '#' + container.containerId + '-' + index);
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecTarget extends HTMLElement {
|
||||
connectedCallback() {
|
||||
var spec = this.closest('ids-spec');
|
||||
var index = Array.prototype.indexOf.call(spec.parentElement.children, spec);
|
||||
var container = this.closest('ids-container');
|
||||
var a = document.createElement("a");
|
||||
a.setAttribute('id', container.containerId + '-' + index);
|
||||
this.appendChild(a);
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecAttribute extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.name = this.attributes['name'].value;
|
||||
if ( ! this.attributes['readonly']) {
|
||||
this.contentEditable = true;
|
||||
this.addEventListener('input', this.input);
|
||||
this.addEventListener('blur', this.blur);
|
||||
}
|
||||
this.defaultValue = this.textContent;
|
||||
}
|
||||
|
||||
load(idsElement) {
|
||||
var self = this;
|
||||
this.idsElement = idsElement;
|
||||
this.idsElement.addEventListener('ids-spec-attribute-' + this.name, function() { self.render(); });
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.idsAttribute = this.idsElement.attributes[this.name];
|
||||
if (this.idsAttribute) {
|
||||
if (this.textContent != this.idsAttribute.value) {
|
||||
this.textContent = this.idsAttribute.value;
|
||||
}
|
||||
}
|
||||
this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
|
||||
if ( ! this.textContent) {
|
||||
this.textContent = this.defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
input(e) {
|
||||
if ( ! this.idsAttribute && this.textContent) {
|
||||
this.add();
|
||||
}
|
||||
if (this.idsAttribute && ! this.textContent) {
|
||||
this.remove();
|
||||
}
|
||||
if (this.idsAttribute) {
|
||||
this.idsAttribute.value = this.textContent;
|
||||
}
|
||||
this.idsElement.dispatchEvent(new Event('ids-spec-attribute-' + this.name));
|
||||
}
|
||||
|
||||
blur(e) {
|
||||
if (this.idsAttribute && ! this.textContent) {
|
||||
this.remove();
|
||||
this.idsElement.dispatchEvent(new Event('ids-spec-attribute-' + this.name));
|
||||
}
|
||||
}
|
||||
|
||||
add() {
|
||||
this.idsElement.setAttribute(this.attributes['name'].value, this.textContent);
|
||||
this.idsAttribute = this.idsElement.attributes[this.attributes['name'].value];
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.idsElement.attributes.removeNamedItem(this.attributes['name'].value);
|
||||
this.idsAttribute = null;
|
||||
}
|
||||
}
|
||||
|
||||
class IDSFacets extends HTMLElement {
|
||||
load(idsElement) {
|
||||
var self = this;
|
||||
this.idsElement = idsElement;
|
||||
this.idsElement.addEventListener('ids-facet-remove', function() { self.render(); });
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
var template = this.getElementsByTagName('template')[0];
|
||||
|
||||
var children = [];
|
||||
for (var i=0; i<this.children.length; i++) {
|
||||
if (this.children[i] != template) {
|
||||
children.push(this.children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i=0; i<children.length; i++) {
|
||||
this.removeChild(children[i]);
|
||||
}
|
||||
|
||||
var facets = this.idsElement.children;
|
||||
for (var i=0; i<facets.length; i++) {
|
||||
this.appendChild(template.content.cloneNode(true));
|
||||
var facet = this.children[this.children.length-1];
|
||||
var facetElements = facet.getElementsByTagName('ids-facet');
|
||||
for (var j=0; j<facetElements.length; j++) {
|
||||
facetElements[j].load(facets[i]);
|
||||
}
|
||||
var facetInstructionsElements = facet.getElementsByTagName('ids-facet-instructions');
|
||||
for (var j=0; j<facetInstructionsElements.length; j++) {
|
||||
facetInstructionsElements[j].load(facets[i]);
|
||||
}
|
||||
}
|
||||
feather.replace();
|
||||
}
|
||||
}
|
||||
|
||||
class IDSFacetInstructions extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.contentEditable = true;
|
||||
this.defaultValue = this.textContent;
|
||||
this.addEventListener('input', this.input);
|
||||
this.addEventListener('blur', this.blur);
|
||||
}
|
||||
|
||||
load(idsElement) {
|
||||
this.idsElement = idsElement;
|
||||
this.idsAttribute = this.idsElement.attributes['instructions']
|
||||
if (this.idsAttribute) {
|
||||
this.textContent = this.idsAttribute.value;
|
||||
}
|
||||
this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
|
||||
}
|
||||
|
||||
input(e) {
|
||||
if ( ! this.idsAttribute && this.textContent) {
|
||||
this.add();
|
||||
}
|
||||
this.idsAttribute ? this.idsAttribute.value = this.textContent : null;
|
||||
this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
|
||||
}
|
||||
|
||||
blur(e) {
|
||||
if (this.idsAttribute && ! this.textContent) {
|
||||
this.remove();
|
||||
}
|
||||
if ( ! this.textContent) {
|
||||
this.textContent = this.defaultValue;
|
||||
}
|
||||
this.idsAttribute ? this.classList.remove('null') : this.classList.add('null');
|
||||
}
|
||||
|
||||
add() {
|
||||
this.idsElement.setAttribute('instructions', this.textContent);
|
||||
this.idsAttribute = this.idsElement.attributes['instructions'];
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.idsElement.attributes.removeNamedItem('instructions');
|
||||
this.idsAttribute = null;
|
||||
}
|
||||
}
|
||||
|
||||
class IDSFacetRemove extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.addEventListener('click', this.click);
|
||||
}
|
||||
|
||||
click(e) {
|
||||
var idsElement = this.closest('div').getElementsByTagName('ids-facet')[0].idsElement;
|
||||
var parentElement = idsElement.parentElement;
|
||||
parentElement.removeChild(idsElement);
|
||||
parentElement.dispatchEvent(new Event('ids-facet-remove'));
|
||||
}
|
||||
}
|
||||
|
||||
class IDSFacet extends HTMLElement {
|
||||
load(idsElement) {
|
||||
this.idsElement = idsElement;
|
||||
this.type = this.attributes['type'].value;
|
||||
this.params = [];
|
||||
if (this.idsElement.localName == 'entity') {
|
||||
this.loadEntity();
|
||||
} else if (this.idsElement.localName == 'attribute') {
|
||||
this.loadAttribute()
|
||||
} else if (this.idsElement.localName == 'classification') {
|
||||
this.loadClassification();
|
||||
} else if (this.idsElement.localName == 'property') {
|
||||
this.loadProperty();
|
||||
} else if (this.idsElement.localName == 'material') {
|
||||
this.loadMaterial();
|
||||
} else if (this.idsElement.localName == 'partOf') {
|
||||
this.loadPartOf();
|
||||
}
|
||||
|
||||
var paramElements = this.getElementsByTagName('ids-param');
|
||||
for (var i=0; i<paramElements.length; i++) {
|
||||
paramElements[i].load(this.params[i]);
|
||||
}
|
||||
}
|
||||
|
||||
renderTemplate(templates, parameters) {
|
||||
for (var i=0; i<templates.length; i++) {
|
||||
var hasKeys = true;
|
||||
for (var key in parameters) {
|
||||
if (templates[i].indexOf('{' + key + '}') == -1) {
|
||||
hasKeys = false;
|
||||
break;
|
||||
} else {
|
||||
templates[i] = templates[i].replace('{' + key + '}', parameters[key]);
|
||||
}
|
||||
}
|
||||
if (hasKeys) {
|
||||
return templates[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadEntity() {
|
||||
if (this.type == 'applicability') {
|
||||
var templates = [
|
||||
'All {name} data',
|
||||
'All {name} data of type {type}',
|
||||
'All {name} data having a type of either {typeEnumeration}',
|
||||
];
|
||||
} else if (this.type == 'requirement') {
|
||||
var templates = [
|
||||
'Shall be {name} data',
|
||||
'Shall be {name} data of type {type}',
|
||||
'Shall be {name} data with a type of either {typeEnumeration}',
|
||||
];
|
||||
}
|
||||
|
||||
var parameters = {};
|
||||
|
||||
var name = this.idsElement.getElementsByTagNameNS(ns, 'name')[0];
|
||||
var value = this.getIdsValue(name);
|
||||
if (value.type == 'simpleValue') {
|
||||
var content = this.capitalise(value.content.toLowerCase().replace('ifc', ''))
|
||||
parameters.name = '<ids-param filter="entityName">' + content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
var predefinedTypes = this.idsElement.getElementsByTagNameNS(ns, 'predefinedType');
|
||||
if (predefinedTypes.length) {
|
||||
value = this.getIdsValue(predefinedTypes[0]);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.type = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'enumeration') {
|
||||
parameters.typeEnumeration = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
}
|
||||
|
||||
this.innerHTML = this.renderTemplate(templates, parameters);
|
||||
}
|
||||
|
||||
loadAttribute() {
|
||||
if (this.type == 'applicability') {
|
||||
var templates = [
|
||||
'Data where the {name} is provided',
|
||||
'Data where the {name} is {value}',
|
||||
'Data where the {name} follows the convention of {valuePattern}',
|
||||
'Data where the {name} is either {valueEnumeration}',
|
||||
];
|
||||
} else if (this.type == 'requirement') {
|
||||
var templates = [
|
||||
'The {name} shall be provided',
|
||||
'The {name} shall be {value}',
|
||||
'The {name} shall follow the convention of {valuePattern}',
|
||||
'The {name} shall be either {valueEnumeration}'
|
||||
];
|
||||
}
|
||||
|
||||
var parameters = {};
|
||||
|
||||
var name = this.idsElement.getElementsByTagNameNS(ns, 'name')[0];
|
||||
var value = this.getIdsValue(name);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.name = '<ids-param filter="attributeName">' + this.sentence(value.content) + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
var values = this.idsElement.getElementsByTagNameNS(ns, 'value');
|
||||
if (values.length) {
|
||||
value = this.getIdsValue(values[0]);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.value = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'pattern') {
|
||||
parameters.valuePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'enumeration') {
|
||||
parameters.valueEnumeration = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
}
|
||||
|
||||
this.innerHTML = this.renderTemplate(templates, parameters);
|
||||
}
|
||||
|
||||
loadClassification() {
|
||||
if (this.type == 'applicability') {
|
||||
var templates = [
|
||||
'Data classified using {system}',
|
||||
'Data classified as {reference}',
|
||||
'Data classified following the convention of {referencePattern}',
|
||||
'Data having a {system} reference of {reference}',
|
||||
'Data having a {system} reference following the convention of {referencePattern}',
|
||||
];
|
||||
} else if (this.type == 'requirement') {
|
||||
var templates = [
|
||||
'Shall be classified using {system}',
|
||||
'Shall be classified as {reference}',
|
||||
'Shall be classified following the convention of {referencePattern}',
|
||||
'Shall have a {system} reference of {reference}',
|
||||
'Shall have a {system} reference following the convention of {referencePattern}',
|
||||
];
|
||||
}
|
||||
|
||||
var parameters = {};
|
||||
|
||||
var value;
|
||||
var systems = this.idsElement.getElementsByTagNameNS(ns, 'system');
|
||||
if (systems.length) {
|
||||
value = this.getIdsValue(systems[0]);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.system = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
}
|
||||
var references = this.idsElement.getElementsByTagNameNS(ns, 'value');
|
||||
if (references.length) {
|
||||
value = this.getIdsValue(references[0]);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.reference = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'pattern') {
|
||||
parameters.referencePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
}
|
||||
|
||||
this.innerHTML = this.renderTemplate(templates, parameters);
|
||||
}
|
||||
|
||||
loadProperty() {
|
||||
if (this.type == 'applicability') {
|
||||
var templates = [
|
||||
'Elements with {name} data in the dataset {pset}',
|
||||
'Elements with {name} data of {value} in the dataset {pset}',
|
||||
'Elements with {name} data following the convention of {valuePattern} in the dataset {pset}',
|
||||
'Elements with {name} data with either {valueEnumeration} in the dataset {pset}',
|
||||
];
|
||||
} else if (this.type == 'requirement') {
|
||||
var templates = [
|
||||
'{name} data shall be provided in the dataset {pset}',
|
||||
'{name} data shall be {value} and in the dataset {pset}',
|
||||
'{name} data shall follow the convention of {valuePattern} and in the dataset {pset}',
|
||||
'{name} data shall be one of {valueEnumeration} and in the dataset {pset}',
|
||||
];
|
||||
}
|
||||
|
||||
var parameters = {};
|
||||
|
||||
var name = this.idsElement.getElementsByTagNameNS(ns, 'name')[0];
|
||||
var value = this.getIdsValue(name);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.name = '<ids-param filter="propertyName">' + this.sentence(value.content) + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
|
||||
var values = this.idsElement.getElementsByTagNameNS(ns, 'value');
|
||||
if (values.length) {
|
||||
value = this.getIdsValue(values[0]);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.value = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'pattern') {
|
||||
parameters.valuePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'enumeration') {
|
||||
parameters.valueEnumeration = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
}
|
||||
|
||||
var propertySet = this.idsElement.getElementsByTagNameNS(ns, 'propertySet')[0];
|
||||
value = this.getIdsValue(propertySet);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.pset = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
|
||||
this.innerHTML = this.renderTemplate(templates, parameters);
|
||||
}
|
||||
|
||||
loadMaterial() {
|
||||
if (this.type == 'applicability') {
|
||||
var templates = [
|
||||
'All data with a {value} material',
|
||||
'All data with a material of either {valueEnumeration}',
|
||||
'All data with a material',
|
||||
];
|
||||
} else if (this.type == 'requirement') {
|
||||
var templates = [
|
||||
'Shall shall have a material of {value}',
|
||||
'Shall have a material of either {valueEnumeration}',
|
||||
'Shall have a material',
|
||||
];
|
||||
}
|
||||
|
||||
var parameters = {};
|
||||
|
||||
var value;
|
||||
var values = this.idsElement.getElementsByTagNameNS(ns, 'value');
|
||||
if (values.length) {
|
||||
value = this.getIdsValue(values[0]);
|
||||
if (value.type == 'simpleValue') {
|
||||
parameters.value = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'pattern') {
|
||||
parameters.valuePattern = '<ids-param class="pattern">' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
} else if (value.type == 'enumeration') {
|
||||
parameters.valueEnumeration = '<ids-param>' + value.content + '</ids-param>';
|
||||
this.params.push(value.param);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.innerHTML = this.renderTemplate(templates, parameters);
|
||||
}
|
||||
|
||||
loadPartOf() {
|
||||
var templates = ['Must be part of a {entity}']
|
||||
|
||||
var parameters = {};
|
||||
|
||||
var content = this.capitalise(this.idsElement.attributes['entity'].value.toLowerCase().replace('ifc', ''))
|
||||
parameters.entity = '<ids-param filter="entityName">' + content + '</ids-param>';
|
||||
this.params.push(this.idsElement);
|
||||
|
||||
this.innerHTML = this.renderTemplate(templates, parameters);
|
||||
}
|
||||
|
||||
getIdsValue(element) {
|
||||
var simpleValues = element.getElementsByTagNameNS(ns, 'simpleValue');
|
||||
if (simpleValues.length) {
|
||||
return {type: 'simpleValue', param: simpleValues[0], content: simpleValues[0].textContent}
|
||||
}
|
||||
var restriction = element.getElementsByTagNameNS(xs, 'restriction')[0];
|
||||
var patterns = restriction.getElementsByTagNameNS(xs, 'pattern');
|
||||
if (patterns.length) {
|
||||
return {type: 'pattern', param: patterns[0], content: patterns[0].attributes['value'].value}
|
||||
}
|
||||
var enumerations = restriction.getElementsByTagNameNS(xs, 'enumeration');
|
||||
if (enumerations.length) {
|
||||
var values = [];
|
||||
for (var i=0; i<enumerations.length; i++) {
|
||||
values.push(enumerations[i].attributes['value'].value);
|
||||
}
|
||||
return {type: 'enumeration', param: restriction, content: values.join(' or ')}
|
||||
}
|
||||
}
|
||||
|
||||
capitalise(text) {
|
||||
return text.toLowerCase().replace(/^\w/, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
sentence(text) {
|
||||
// E.g. ElevationOfSSLRelative --> Elevation Of S S L Relative
|
||||
var words = text.match(/([A-Z]?[^A-Z]*)/g).slice(0,-1);
|
||||
var mergedWords = [];
|
||||
var mergedWord = '';
|
||||
for (var i=0; i<words.length; i++) {
|
||||
if (words[i].length == 1) {
|
||||
mergedWord += words[i];
|
||||
if (i == words.length-1) {
|
||||
mergedWords.push(mergedWord);
|
||||
}
|
||||
} else {
|
||||
if (mergedWord.length) {
|
||||
mergedWords.push(mergedWord);
|
||||
mergedWord = '';
|
||||
}
|
||||
mergedWords.push(words[i]);
|
||||
}
|
||||
}
|
||||
// E.g. Elevation Of S S L Relative --> Elevation Of SSL Relative
|
||||
return mergedWords.join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
class IDSParam extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.contentEditable = true;
|
||||
this.addEventListener('input', this.input);
|
||||
this.filter = this.attributes['filter'] ? this.attributes['filter'].value : null;
|
||||
}
|
||||
|
||||
load(idsElement) {
|
||||
this.idsElement = idsElement;
|
||||
}
|
||||
|
||||
input(e) {
|
||||
if (this.filter == 'entityName') {
|
||||
this.idsElement.textContent = 'IFC' + this.textContent.toUpperCase();
|
||||
} else if (this.filter == 'attributeName' || this.filter == 'propertyName') {
|
||||
this.idsElement.textContent = this.textContent.replace(/\s+/g, '');
|
||||
} else {
|
||||
this.idsElement.textContent = this.textContent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpecs extends HTMLElement {
|
||||
load(idsElement) {
|
||||
var self = this;
|
||||
this.idsElement = idsElement;
|
||||
this.idsElement.addEventListener('ids-spec-remove', function() { self.render(); });
|
||||
this.idsElement.addEventListener('ids-spec-add', function() { self.render(); });
|
||||
this.idsElement.addEventListener('ids-spec-move', function() { self.render(); });
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
var template = this.getElementsByTagName('template')[0];
|
||||
|
||||
var children = [];
|
||||
for (var i=0; i<this.children.length; i++) {
|
||||
if (this.children[i] != template) {
|
||||
children.push(this.children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i=0; i<children.length; i++) {
|
||||
this.removeChild(children[i]);
|
||||
}
|
||||
|
||||
var idsSpecs = this.idsElement.getElementsByTagNameNS(ns, 'specification');
|
||||
for (var i=0; i<idsSpecs.length; i++) {
|
||||
this.appendChild(template.content.cloneNode(true));
|
||||
var spec = this.children[this.children.length-1];
|
||||
spec.load(idsSpecs[i]);
|
||||
}
|
||||
feather.replace();
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSpec extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.addEventListener('dragenter', this.dragenter);
|
||||
this.addEventListener('dragover', this.dragover);
|
||||
this.addEventListener('drop', this.drop);
|
||||
}
|
||||
|
||||
dragenter(e) {
|
||||
if (e.target.classList.contains('dropzone')) {
|
||||
var dropzones = document.getElementsByTagName('ids-spec');
|
||||
for (var i=0; i<dropzones.length; i++) {
|
||||
dropzones[i].classList.remove('dragover');
|
||||
}
|
||||
e.target.classList.add('dragover');
|
||||
}
|
||||
}
|
||||
|
||||
load(idsElement) {
|
||||
var self = this;
|
||||
this.idsElement = idsElement;
|
||||
|
||||
var children = this.getElementsByTagName('ids-spec-attribute');
|
||||
for (var i=0; i<children.length; i++) {
|
||||
children[i].load(idsElement);
|
||||
}
|
||||
|
||||
var children = this.getElementsByTagName('ids-facets');
|
||||
for (var i=0; i<children.length; i++) {
|
||||
children[i].load(idsElement.getElementsByTagNameNS(ns, children[i].attributes['name'].value)[0]);
|
||||
}
|
||||
|
||||
var children = this.getElementsByTagName('ids-spec-move');
|
||||
for (var i=0; i<children.length; i++) {
|
||||
children[i].load(idsElement);
|
||||
}
|
||||
}
|
||||
|
||||
dragover(e) {
|
||||
// The HTML draggable API is terrible.
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
drop(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
class IDSLoader extends HTMLElement {
|
||||
connectedCallback() {
|
||||
var self = this;
|
||||
this.addEventListener('click', this.launchFileBrowser);
|
||||
}
|
||||
|
||||
launchFileBrowser(accept, callback) {
|
||||
var inputElement = document.createElement("input");
|
||||
inputElement.idsLoader = this;
|
||||
inputElement.type = "file";
|
||||
inputElement.accept = '.xml';
|
||||
inputElement.multiple = false;
|
||||
inputElement.addEventListener("change", this.loadFile)
|
||||
inputElement.dispatchEvent(new MouseEvent("click"));
|
||||
}
|
||||
|
||||
loadFile(e) {
|
||||
var self = this.idsLoader;
|
||||
var read = new FileReader();
|
||||
read.readAsBinaryString(this.files[0]);
|
||||
read.onloadend = function() {
|
||||
var parser = new DOMParser();
|
||||
var xml = parser.parseFromString(read.result, "text/xml")
|
||||
var container = self.closest('ids-container')
|
||||
container.ids = xml;
|
||||
container.idsElement = xml;
|
||||
window.xxx = xml; // TODO
|
||||
self.loadSpecs(container);
|
||||
}
|
||||
}
|
||||
|
||||
loadSpecs(container) {
|
||||
container.getElementsByTagName('ids-info')[0].load(container.ids.getElementsByTagNameNS(ns, 'info')[0]);
|
||||
var specsElements = container.getElementsByTagName('ids-specs');
|
||||
for (var i=0; i<specsElements.length; i++) {
|
||||
var specs = specsElements[i];
|
||||
specs.load(container.ids.getElementsByTagNameNS(ns, 'specifications')[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class IDSSave extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.addEventListener('click', this.click);
|
||||
}
|
||||
|
||||
click() {
|
||||
var xmlString = new XMLSerializer().serializeToString(this.closest('ids-container').ids);
|
||||
console.log(xmlString);
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('ids-container', IDSContainer);
|
||||
window.customElements.define('ids-loader', IDSLoader);
|
||||
window.customElements.define('ids-save', IDSSave);
|
||||
window.customElements.define('ids-info', IDSInfo);
|
||||
window.customElements.define('ids-info-element', IDSInfoElement);
|
||||
window.customElements.define('ids-specs', IDSSpecs);
|
||||
window.customElements.define('ids-spec', IDSSpec);
|
||||
window.customElements.define('ids-spec-handle', IDSSpecHandle);
|
||||
window.customElements.define('ids-spec-remove', IDSSpecRemove);
|
||||
window.customElements.define('ids-spec-move', IDSSpecMove);
|
||||
window.customElements.define('ids-spec-add', IDSSpecAdd);
|
||||
window.customElements.define('ids-spec-attribute', IDSSpecAttribute);
|
||||
window.customElements.define('ids-spec-counter', IDSSpecCounter);
|
||||
window.customElements.define('ids-spec-anchor', IDSSpecAnchor);
|
||||
window.customElements.define('ids-spec-target', IDSSpecTarget);
|
||||
window.customElements.define('ids-facets', IDSFacets);
|
||||
window.customElements.define('ids-facet', IDSFacet);
|
||||
window.customElements.define('ids-facet-remove', IDSFacetRemove);
|
||||
window.customElements.define('ids-facet-instructions', IDSFacetInstructions);
|
||||
window.customElements.define('ids-param', IDSParam);
|
||||
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>IfcTester</title>
|
||||
<meta name="description" content="{{meta_description}}">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="author" href="{{baseurl}}humans.txt">
|
||||
<link rel="shortcut icon" href="{{baseurl}}assets/images/favicon.png">
|
||||
<link rel="apple-touch-icon" href="{{baseurl}}images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="{{baseurl}}images/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="{{baseurl}}images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="{{baseurl}}images/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="{{baseurl}}images/apple-touch-icon-144x144.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nova+Mono&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="normalize.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!--<script src="{{baseurl}}assets/js/vendor/modernizr-2.6.2.min.js"></script>-->
|
||||
</head>
|
||||
<body>
|
||||
<ifc-tester>
|
||||
<header>
|
||||
IfcTester
|
||||
<a href="#"><i data-feather="plus"></i>New Spec</a>
|
||||
<span>
|
||||
<a href="#"><i data-feather="settings"></i>Settings</a>
|
||||
<a href="#"><i data-feather="help-circle"></i>Heeeelllp!</a>
|
||||
</span>
|
||||
</header>
|
||||
<ids-container>
|
||||
<div class="ids">
|
||||
<div style="position: relative;">
|
||||
<div class="ids-controls">
|
||||
<ids-loader>
|
||||
<a href="#">
|
||||
<i data-feather="upload"></i> LOAD
|
||||
</a>
|
||||
</ids-loader>
|
||||
<ids-save>
|
||||
<a href="#">
|
||||
<i data-feather="download"></i> SAVE
|
||||
</a>
|
||||
</ids-save>
|
||||
<a href="#">
|
||||
<i data-feather="play"></i> AUDIT MODEL
|
||||
</a>
|
||||
<span>
|
||||
<a href="#">
|
||||
<i data-feather="x"></i> CLOSE
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<ids-info>
|
||||
<h1><ids-info-element name="title">My information requirements</ids-info-element></h1>
|
||||
<p>
|
||||
<i data-feather="mail"></i>
|
||||
<ids-info-element name="author">john@doe.com</ids-info-element>
|
||||
<i data-feather="tag"></i>
|
||||
<ids-info-element name="version">1.0.0</ids-info-element>
|
||||
<i data-feather="calendar"></i>
|
||||
<ids-info-element name="date">date()</ids-info-element>
|
||||
<i data-feather="crosshair"></i>
|
||||
<ids-info-element name="milestone">Construction</ids-info-element>
|
||||
</p>
|
||||
<p>
|
||||
<ids-info-element name="description">
|
||||
An example suite of OpenBIM requirements for data quality audits
|
||||
</ids-info-element>
|
||||
</p>
|
||||
<p>
|
||||
© <ids-info-element name="copyright">Company Inc.</ids-info-element>
|
||||
</p>
|
||||
</ids-info>
|
||||
<ids-specs>
|
||||
<template>
|
||||
<ids-spec>
|
||||
<ids-spec-target></ids-spec-target>
|
||||
<h2>
|
||||
<a href="#"><i data-feather="play"></i></a>
|
||||
<ids-spec-handle class="draggable" draggable="true">
|
||||
<i data-feather="move"></i>
|
||||
<div class="snippet hidden">Move specification</div>
|
||||
</ids-spec-handle>
|
||||
<ids-spec-remove>
|
||||
<i data-feather="x"></i>
|
||||
</ids-spec-remove>
|
||||
<ids-spec-attribute name="name">Requirement name</ids-spec-attribute>
|
||||
</h2>
|
||||
<div class="spec-contents">
|
||||
<p class="spec-description">
|
||||
<ids-spec-attribute name="description">
|
||||
Describe why the requirement is important to the project.
|
||||
</ids-spec-attribute>
|
||||
</p>
|
||||
<p>
|
||||
<ids-spec-attribute name="instructions">
|
||||
Provide instructions on who is responsible and how to achieve it.
|
||||
</ids-spec-attribute>
|
||||
</p>
|
||||
<h3>
|
||||
<span class="controls">
|
||||
<ids-facet-add>
|
||||
<i data-feather="plus"></i>
|
||||
</ids-facet-add>
|
||||
</span>
|
||||
Applies to:
|
||||
</h3>
|
||||
<ids-facets name="applicability">
|
||||
<template>
|
||||
<div class="facet">
|
||||
<span class="facet-controls">
|
||||
<ids-facet-remove>
|
||||
<i data-feather="x"></i>
|
||||
</ids-facet-remove>
|
||||
</span>
|
||||
<ids-facet type="applicability"></ids-facet>
|
||||
</div>
|
||||
</template>
|
||||
</ids-facets>
|
||||
<h3>
|
||||
<span class="controls">
|
||||
<ids-facet-add>
|
||||
<i data-feather="plus"></i>
|
||||
</ids-facet-add>
|
||||
</span>
|
||||
Requirements:
|
||||
</h3>
|
||||
<ids-facets name="requirements">
|
||||
<template>
|
||||
<div class="facet">
|
||||
<span class="facet-controls">
|
||||
<ids-facet-remove>
|
||||
<i data-feather="x"></i>
|
||||
</ids-facet-remove>
|
||||
</span>
|
||||
<ids-facet type="requirement"></ids-facet>
|
||||
<ids-facet-instructions class="requirement-instructions" title="Instructions">
|
||||
Optionally write instructions about how to achieve this requirement.
|
||||
</ids-facet-instructions>
|
||||
</div>
|
||||
</template>
|
||||
</ids-facets>
|
||||
</div>
|
||||
<div class="divider">
|
||||
<span class="placeholder">
|
||||
<i data-feather="align-justify"></i>
|
||||
</span>
|
||||
<span class="controls">
|
||||
<ids-spec-add>
|
||||
<i data-feather="plus"></i>
|
||||
</ids-spec-add>
|
||||
<ids-spec-move direction="down">
|
||||
<i data-feather="chevron-down"></i>
|
||||
</ids-spec-move>
|
||||
<ids-spec-move direction="up">
|
||||
<i data-feather="chevron-up"></i>
|
||||
</ids-spec-move>
|
||||
</span>
|
||||
</div>
|
||||
<ids-spec>
|
||||
</template>
|
||||
</ids-specs>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ids-specs>
|
||||
<template>
|
||||
<ids-spec>
|
||||
<ids-spec-counter></ids-spec-counter>
|
||||
<ids-spec-anchor>
|
||||
<a href="#ids-spec-target">
|
||||
<ids-spec-attribute name="name" readonly>Requirement name</ids-spec-attribute>
|
||||
</a>
|
||||
</ids-spec-anchor>
|
||||
</ids-spec>
|
||||
</template>
|
||||
</ids-specs>
|
||||
</nav>
|
||||
</ids-container>
|
||||
</ifc-tester>
|
||||
<script src="https://unpkg.com/feather-icons"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="{{baseurl}}assets/js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+349
@@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
:root {
|
||||
--green: #ccd5ae;
|
||||
--red: #f08080;
|
||||
--blue: #5aa9e6;
|
||||
--light-blue: #7fc8f8;
|
||||
--highlight: #faedcd;
|
||||
--fg: #444;
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
height: calc(100% - 40px);
|
||||
font-size: 0.8rem;
|
||||
background-color: #FFF;
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: var(--fg);
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
header {
|
||||
background-color: #333;
|
||||
color: var(--blue);
|
||||
font-family: 'Nova Mono', monospace;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
header a {
|
||||
text-decoration: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header a:hover {
|
||||
color: white;
|
||||
}
|
||||
header svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
header span {
|
||||
float: right;
|
||||
}
|
||||
* {
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
h3 {
|
||||
font-family: 'Nova Mono', monospace;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
color: #ccc;
|
||||
}
|
||||
a {
|
||||
color: #5aa9e6;
|
||||
}
|
||||
a:hover {
|
||||
color: #7fc8f8;
|
||||
}
|
||||
.ids {
|
||||
width: 700px;
|
||||
height: calc(100%);
|
||||
overflow: scroll;
|
||||
float: left;
|
||||
background-color: #f9f9f9;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||
}
|
||||
.ids-controls {
|
||||
font-family: 'Nova Mono', monospace;
|
||||
background-color: #f9f9f9;
|
||||
background-color: #eee;
|
||||
padding: 10px;
|
||||
/*box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;*/
|
||||
}
|
||||
.ids-controls span {
|
||||
float: right;
|
||||
}
|
||||
.ids-controls:hover a {
|
||||
opacity: 1;
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
.ids-controls ids-loader a {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.ids-controls a {
|
||||
margin-left: 10px;
|
||||
font-size: 0.8rem;
|
||||
/*
|
||||
opacity: 0.4;
|
||||
transition: 0.3s ease-in;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--blue);
|
||||
padding: 10px;
|
||||
*/
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ids-controls a svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
}
|
||||
.divider {
|
||||
margin-top: -10px;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
.dragover {
|
||||
background-color: var(--blue) !important;
|
||||
}
|
||||
.dropzone {
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
ids-spec .controls ids-facet-add {
|
||||
position: absolute;
|
||||
margin-left: -30px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
ids-spec .controls {
|
||||
display: none;
|
||||
}
|
||||
ids-spec:hover .placeholder {
|
||||
display: none;
|
||||
}
|
||||
ids-spec:hover .controls {
|
||||
display: inline;
|
||||
}
|
||||
ids-spec:hover ids-spec-add:hover svg {
|
||||
color: var(--blue);
|
||||
cursor: pointer;
|
||||
}
|
||||
ids-spec:hover ids-spec-move:hover svg {
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.divider svg {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 27px;
|
||||
background-color: #f9f9f9;
|
||||
padding: 10px;
|
||||
}
|
||||
ids-spec {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
ids-spec h2 a, .spec h2 a {
|
||||
display: none;
|
||||
}
|
||||
ids-spec:hover h2 a, .spec:hover h2 a {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-left: -30px;
|
||||
margin-top: -3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
ids-spec .draggable {
|
||||
display: none;
|
||||
}
|
||||
ids-spec ids-spec-remove {
|
||||
display: none;
|
||||
}
|
||||
ids-spec:hover ids-spec-remove {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-left: -30px;
|
||||
margin-top: 57px;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
}
|
||||
ids-spec:hover ids-spec-remove:hover {
|
||||
color: var(--red);
|
||||
}
|
||||
ids-spec:hover .draggable:hover {
|
||||
color: var(--fg);
|
||||
}
|
||||
ids-spec:hover .draggable {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-left: -30px;
|
||||
margin-top: 27px;
|
||||
cursor: grab;
|
||||
color: #aaa;
|
||||
}
|
||||
ids-spec ids-spec-handle .snippet {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
background-color: var(--blue);
|
||||
padding: 5px;
|
||||
color: #f9f9f9;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
font-family: 'Nova Mono', monospace;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.spec-contents {
|
||||
margin-left: 30px;
|
||||
max-height: 9999px;
|
||||
}
|
||||
.spec-description {
|
||||
font-weight: bold;
|
||||
}
|
||||
.facet .facet-controls {
|
||||
display: none;
|
||||
}
|
||||
.facet:hover .facet-controls {
|
||||
display: inline;
|
||||
}
|
||||
.facet:hover .facet-controls ids-facet-remove {
|
||||
color: #aaa;
|
||||
position: absolute;
|
||||
margin-top: -3px;
|
||||
margin-left: -30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.facet:hover .facet-controls ids-facet-remove:hover svg {
|
||||
color: var(--red);
|
||||
}
|
||||
.facet {
|
||||
padding-left: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.facet .requirement-instructions.null {
|
||||
display: none;
|
||||
}
|
||||
.facet:hover .requirement-instructions.null {
|
||||
display: block;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #e0e0e0;
|
||||
color: #aaa;
|
||||
/*box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;*/
|
||||
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.requirement-instructions {
|
||||
display: block;
|
||||
margin-left: 30px;
|
||||
margin-top: 5px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.pattern {
|
||||
font-family: 'Nova Mono', monospace;
|
||||
border-bottom: 1px dotted #555;
|
||||
background-color: #faedcd;
|
||||
cursor: help;
|
||||
font-family: monospace;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 250px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
bottom: -5px;
|
||||
position: relative;
|
||||
}
|
||||
.result-icon {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-left: -30px;
|
||||
margin-top: -2px;
|
||||
cursor: help;
|
||||
}
|
||||
.result-icon.pass {
|
||||
color: var(--green);
|
||||
}
|
||||
.result-icon.fail {
|
||||
color: var(--red);
|
||||
}
|
||||
.result-icon:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.error {
|
||||
color: var(--red);
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
.null {
|
||||
/*opacity: 0.4;*/
|
||||
color: #ccc;
|
||||
transition: 0.3s ease-out;
|
||||
}
|
||||
.null:hover {
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
[contenteditable] {
|
||||
outline: 0px solid transparent;
|
||||
}
|
||||
*[contentEditable="true"] {
|
||||
/*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
*[contentEditable="true"]:hover {
|
||||
outline: 1px solid var(--blue);
|
||||
outline-offset: 2px;
|
||||
display: inline-block;
|
||||
/*background-color: rgba(0, 0, 0, 0.1);*/
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
*[contentEditable="true"]:focus {
|
||||
background-color: var(--light-blue);
|
||||
outline: 0px;
|
||||
padding: 5px;
|
||||
margin: -5px;
|
||||
display: inline-block;
|
||||
cursor: text;
|
||||
}
|
||||
ids-info {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
ids-info p {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
ids-info svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
ids-info-element[ids-tag="description"] {
|
||||
font-style: italic;
|
||||
}
|
||||
ids-param {
|
||||
font-style: italic;
|
||||
}
|
||||
ids-facet {
|
||||
display: block;
|
||||
}
|
||||
nav {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 200px;
|
||||
/*background-color: #fafafa;*/
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
/*
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
|
||||
*/
|
||||
/*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
nav ids-spec {
|
||||
padding-left: 0px;
|
||||
border-bottom: 1px dashed #ccc;
|
||||
padding: 15px;
|
||||
display: block;
|
||||
}
|
||||
Reference in New Issue
Block a user