Skip to content
This repository was archived by the owner on Apr 27, 2020. It is now read-only.

Commit b8ec6bf

Browse files
DanielJDufourDanielJDufour
committed
update json schema web component with css for dropdown logic and mobile details view
1 parent c692f45 commit b8ec6bf

File tree

4 files changed

+112
-28
lines changed

4 files changed

+112
-28
lines changed

‎dist/json-schema.js‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
8383
}, {
8484
key: "getDetails",
8585
value: function getDetails() {
86-
return "\n <div id=\"mobile-details\">\n <table>\n <thead>\n <tr>\n <th id='mobile-data-type-column'>Data Type</th>\n <th class='mobile-description-column'>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"mobile-data-type\">".concat(this.selectedDataType, "</td>\n <td class=\"mobile-description\">").concat(this.selectedDescription, "</td>\n </tr>\n <tr>\n <td class=\"back\" onclick=\"document.getElementById('").concat(this.id, "').hideDetails()\">\n <div id=\"back-arrow\" class=\"arrow-left\"></div>\n <div class=\"field-name-text\">back</div>\n </td>\n <td></td>\n </tr>\n </tbody>\n </table>\n </div>\n ");
86+
return "\n <div id=\"mobile-details\">\n <table>\n <thead>\n <tr>\n <th id='mobile-data-type-column'>Data Type</th>\n <th class='mobile-description-column'>Description</th>\n </tr>\n </thead>\n <tbody>\n <tr style=\"background-color: ".concat(this.selectedBackgroundColor, "\">\n <td class=\"mobile-data-type\">").concat(this.selectedDataType, "</td>\n <td class=\"mobile-description\">").concat(this.selectedDescription, "</td>\n </tr>\n <tr>\n <td class=\"back\" onclick=\"document.getElementById('").concat(this.id, "').hideDetails()\">\n <div id=\"back-arrow\" class=\"arrow-left\"></div>\n <div class=\"field-name-text\">back</div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n ");
8787
}
8888
}, {
8989
key: "getDescription",
@@ -113,9 +113,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
113113
key: "getDropDown",
114114
value: function getDropDown(status) {
115115
if (status === 'collapsed') {
116-
return "<div class='dropdown' onclick=\"document.getElementById('".concat(this.id, "').toggleDropDown(event)\"><div class=\"arrow-up\"></div></div>");
116+
return "<div class='dropdown' status=".concat(status, " onclick=\"document.getElementById('").concat(this.id, "').toggleDropDown(event)\"><div class=\"arrow-up-or-down\"></div></div>");
117117
} else if (status === 'expanded') {
118-
return "<div class='dropdown' onclick=\"document.getElementById('".concat(this.id, "').toggleDropDown(event)\"><div class=\"arrow-down\"></div></div>");
118+
return "<div class='dropdown' status=".concat(status, " onclick=\"document.getElementById('").concat(this.id, "').toggleDropDown(event)\"><div class=\"arrow-up-or-down\"></div></div>");
119119
} else {
120120
return "<div class=\"dropdown\"></div>";
121121
}
@@ -133,11 +133,11 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
133133
}, {
134134
key: "showDetails",
135135
value: function showDetails(rowID) {
136-
console.log("starting showDetails with", rowID);
137136
const row = document.getElementById(rowID);
138137
this.setAttribute("details", "true");
139138
this.selectedDataType = row.querySelector(".data-type").textContent.trim();
140139
this.selectedDescription = row.querySelector(".description").textContent.trim();
140+
this.selectedBackgroundColor = window.getComputedStyle(row).backgroundColor;
141141
this.updateDetails();
142142
}
143143
}, {
@@ -153,7 +153,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
153153
const items = value.items,
154154
properties = value.properties,
155155
type = value.type;
156-
const description = this.getDescription(value);
156+
const description = this.prettify(this.getDescription(value));
157157
const required = this.getRequired(value);
158158
const hasDropDown = this.hasDropDown(value);
159159
let trClasses = [];
@@ -221,8 +221,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
221221
key: "getStyle",
222222
value: function getStyle() {
223223
const arrowSize = '8px';
224+
const borderColor = 'lightgray';
224225
const id = this.id;
225-
return "\n <style>\n json-schema[hide-optional-fields='true'] tr.optional {\n display: none;\n }\n\n #".concat(id, " > div {\n background: white;\n padding: 15px;\n position: relative;\n }\n\n #").concat(id, " .desktop-and-mobile-views {\n overflow: hidden;\n position: relative;\n }\n\n #").concat(id, " input {\n height: 20px;\n width: 20px;\n vertical-align: sub;\n }\n\n #").concat(id, " [class*=arrow-] {\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n #").concat(id, " .arrow-down {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-left {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-right {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-left: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " th {\n background: #323A45;\n color: white;\n padding: .75rem 2rem;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " th {\n font-size: 1.1em;\n padding: .75rem .2rem;\n }\n }\n\n #").concat(id, " table {\n border-collapse: collapse;\n border-spacing:0;\n width: 100%;\n }\n\n #").concat(id, " td {\n border-bottom: 1px solid lightgray;\n border-left: 1px solid lightgray;\n border-right: 1px solid lightgray;\n padding: 10px;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " td {\n padding: 5px;\n }\n }\n\n #").concat(id, " td div, #").concat(id, " td span {\n }\n\n #").concat(id, " .field-name-column {\n width: 35%;\n }\n\n #").concat(id, " .data-type-column {\n width: 15%;\n }\n\n #").concat(id, " .dropdown {\n display: inline-block;\n padding-left: .25rem;\n width: 2rem;\n }\n\n #").concat(id, " .data-type, #").concat(id, " .mobile-data-type {\n text-align: center;\n }\n\n #").concat(id, " .field-name-text {\n display: inline-block;\n }\n\n #").concat(id, " tr.first {\n background: #F0F5FB;\n }\n\n #").concat(id, " tr.optional td {\n color: rgb(153, 0, 51);\n }\n\n #").concat(id, " .details {\n display: none;\n }\n\n #").concat(id, " #mobile-details {\n background: white;\n display: block;\n height: 100%;\n position: absolute;\n transition: 2s;\n transform: translateX(-600px);\n width: 100%;\n }\n\n /* mobile view */\n @media screen and (max-width: 600px) {\n #").concat(id, " th.data-type-column,\n #").concat(id, " th.description-column,\n #").concat(id, " td.data-type,\n #").concat(id, " td.description\n {\n display: none;\n }\n\n #").concat(id, " .details {\n color: black;\n cursor: pointer;\n display: inline-block;\n float: right;\n }\n\n #").concat(id, " .details-text {\n display: inline-block;\n margin-right: 5px;\n }\n\n #").concat(id, " .details-arrow, #").concat(id, " #back-arrow {\n display: inline-block;\n vertical-align: top;\n }\n\n #").concat(id, " #back-arrow {\n margin-right: 5px;\n }\n\n #").concat(id, "[details=true] #mobile-details {\n transition: 2s;\n transform: translateX(0);\n }\n\n #").concat(id, " .dropdown {\n padding-left: .15rem;\n width: 1rem;\n }\n }\n\n #").concat(id, " td.back {\n cursor: pointer;\n text-align: center;\n }\n\n #").concat(id, " td.back > div {\n display: inline-block;\n }\n\n #").concat(id, " td.back:hover {\n background: #323A45;\n color: white;\n }\n\n #").concat(id, " td.back:hover .arrow-left {\n border-right-color: white;\n }\n\n #mobile-data-type-column {\n min-width: 75px;\n }\n </style>");
226+
return "\n <style>\n json-schema[hide-optional-fields='true'] tr.optional {\n display: none;\n }\n\n #".concat(id, " > div {\n background: white;\n padding: 15px;\n position: relative;\n }\n\n #").concat(id, " .desktop-and-mobile-views {\n position: relative;\n }\n\n #").concat(id, " input {\n height: 20px;\n width: 20px;\n vertical-align: sub;\n }\n\n #").concat(id, " [class*=arrow-] {\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n #").concat(id, " .arrow-up {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-down {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-left {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " .arrow-right {\n border-top: ").concat(arrowSize, " solid transparent;\n border-bottom: ").concat(arrowSize, " solid transparent;\n border-left: ").concat(arrowSize, " solid #000;\n }\n\n #").concat(id, " th {\n background: #323A45;\n border-bottom: 1px solid ").concat(borderColor, ";\n border-left: 1px solid ").concat(borderColor, ";\n border-right: 1px solid ").concat(borderColor, ";\n box-sizing: border-box;\n color: white;\n padding: .75rem 2rem;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " th {\n font-size: 1.1em;\n padding: .75rem .2rem;\n }\n }\n\n #").concat(id, " table {\n border-collapse: collapse;\n border-spacing:0;\n width: 100%;\n }\n\n #").concat(id, " td {\n border-bottom: 1px solid ").concat(borderColor, ";\n border-left: 1px solid ").concat(borderColor, ";\n border-right: 1px solid ").concat(borderColor, ";\n box-sizing: border-box;\n padding: 10px;\n }\n\n @media screen and (max-width: 500px) {\n #").concat(id, " td {\n padding: 5px;\n }\n }\n\n #").concat(id, " td div, #").concat(id, " td span {\n }\n\n #").concat(id, " .field-name-column {\n width: 35%;\n }\n\n #").concat(id, " .data-type-column {\n width: 15%;\n }\n\n #").concat(id, " .dropdown {\n display: inline-block;\n padding-left: .25rem;\n width: 2rem;\n }\n\n #").concat(id, " .dropdown[status=expanded] > div {\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n border-top: ").concat(arrowSize, " solid black;\n }\n\n #").concat(id, " .dropdown[status=collapsed] > div {\n border-bottom: ").concat(arrowSize, " solid black;\n border-left: ").concat(arrowSize, " solid transparent;\n border-right: ").concat(arrowSize, " solid transparent;\n }\n\n #").concat(id, " .data-type, #").concat(id, " .mobile-data-type {\n text-align: center;\n }\n\n #").concat(id, " .field-name-text {\n display: inline-block;\n }\n\n #").concat(id, " tr.first {\n background: #F0F5FB;\n }\n\n #").concat(id, " tr.optional td {\n color: rgb(153, 0, 51);\n }\n\n #").concat(id, " .details {\n display: none;\n }\n\n #").concat(id, " #mobile-details {\n display: none;\n }\n\n /* mobile view */\n @media screen and (max-width: 600px) {\n #").concat(id, " th.data-type-column,\n #").concat(id, " th.description-column,\n #").concat(id, " td.data-type,\n #").concat(id, " td.description\n {\n display: none;\n }\n\n #").concat(id, " .details {\n color: black;\n cursor: pointer;\n display: inline-block;\n float: right;\n }\n\n #").concat(id, " .details-text {\n display: inline-block;\n margin-right: 5px;\n }\n\n #").concat(id, " .details-arrow, #").concat(id, " #back-arrow {\n display: inline-block;\n vertical-align: top;\n }\n\n #").concat(id, " #back-arrow {\n margin-right: 5px;\n }\n\n #").concat(id, " #mobile-details {\n background: white;\n bottom: 0;\n display: block;\n height: 100%;\n left: 0;\n overflow: hidden;\n position: absolute;\n right: 0;\n transition: .25s ease;\n width: 0;\n }\n\n #").concat(id, ":not([details=true]) #mobile-details {\n width: 0;\n }\n\n #").concat(id, "[details=true] #mobile-details {\n width: 100%;\n }\n\n #").concat(id, " .dropdown {\n padding-left: .15rem;\n width: 1rem;\n }\n }\n\n #").concat(id, " td.back {\n border: none;\n cursor: pointer;\n padding-bottom: 15px;\n padding-top: 15px;\n text-align: center;\n }\n\n #").concat(id, " td.back > div {\n display: inline-block;\n }\n\n #").concat(id, " td.back:hover {\n background: #323A45;\n color: white;\n }\n\n #").concat(id, " td.back:hover .arrow-left {\n border-right-color: white;\n }\n\n #mobile-data-type-column {\n min-width: 75px;\n }\n </style>");
226227
}
227228
}, {
228229
key: "hasDropDown",
@@ -234,7 +235,10 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
234235
key: "toggleDropDown",
235236
value: function toggleDropDown(event) {
236237
const target = event.target;
237-
const row = event.target.parentElement.parentElement.parentElement; // iterate down rows setting display none to all until hit one with indent equal or less than current
238+
const row = event.target.parentElement.parentElement.parentElement;
239+
const dropdownDiv = target.parentElement;
240+
const status = dropdownDiv.getAttribute('status');
241+
if (status === 'collapsed') dropdownDiv.setAttribute('status', 'expanded');else if (status === 'expanded') dropdownDiv.setAttribute('status', 'collapsed'); // iterate down rows setting display none to all until hit one with indent equal or less than current
238242

239243
const indent = Number(row.getAttribute('indent') || 0);
240244
let sibling = row;
@@ -278,6 +282,27 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
278282
});
279283
}
280284
}
285+
}, {
286+
key: "prettify",
287+
value: function prettify(text) {
288+
text = this.urlify(text); // convert (1) cost: to \n\t(1) <b>cost</b>:
289+
290+
const bulletRegex = /\(\d{1,2}\) [A-Za-z]{1,25}:/g;
291+
return text.replace(bulletRegex, function (match) {
292+
return "<br/>" + match.replace(/[A-Za-z]{1,25}/, function (name) {
293+
return "<b>".concat(name, "</b>");
294+
});
295+
});
296+
} // https://stackoverflow.com/questions/1500260/detect-urls-in-text-with-javascript
297+
298+
}, {
299+
key: "urlify",
300+
value: function urlify(text) {
301+
const urlRegex = /(https?:\/\/[^\s']+)/g;
302+
return text.replace(urlRegex, function (url) {
303+
return "<a href=\"".concat(url, "\" target=\"_blank\">").concat(url, "</a>");
304+
});
305+
}
281306
}], [{
282307
key: "observedAttributes",
283308
get: function () {

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Web Component that Displays a JSON Schema",
55
"main": "index.js",
66
"scripts": {
7-
"build": "./node_modules/.bin/babel src/index.js -o dist/json-schema.js",
7+
"build": "npx babel src/index.js --watch --out-file dist/json-schema.js",
88
"demo": "http-server",
99
"demo-on-server": "sudo PORT=80 http-server",
1010
"update-example-schema": "wget https://raw.githubusercontent.com/GSA/code-gov-data/master/schemas/schema-2.0.0.json -O example-schema.json"

0 commit comments

Comments
 (0)