Skip to content

Commit

Permalink
Merge branch 'master' into release
Browse files Browse the repository at this point in the history
  • Loading branch information
@electric-el
electric-el committed Jul 26, 2022
2 parents a505402 + f08d289 commit a7e6fb0
Show file tree
Hide file tree
Showing 10 changed files with 190 additions and 51 deletions.
2 changes: 1 addition & 1 deletion patterns/04-pages-00-homepage/04-pages-00-homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</head>
<body class="">
<a id="nav" href="../02-components-region/02-components-region.html"><p><em>Component</em></p>
</a> <p><button id="toggler">Toggler</button></p>
</a> <p><button id="toggler">Toggle</button></p>

<!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
<script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
Expand Down
2 changes: 1 addition & 1 deletion patterns/04-pages-00-homepage/04-pages-00-homepage.markup-only.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<a id="nav" href="../02-components-region/02-components-region.html"><p><em>Component</em></p>
</a> <p><button id="toggler">Toggler</button></p>
</a> <p><button id="toggler">Toggle</button></p>

2 changes: 1 addition & 1 deletion patterns/04-pages-00-homepage/04-pages-00-homepage.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ content_key: nav_content
---
content_key: toggler_content
---
<button id="toggler">Toggler</button>
<button id="toggler">Toggle</button>
90 changes: 65 additions & 25 deletions scripts/classes/requerio-inspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,52 +43,72 @@ export default class RequerioInspector {
});
}

buildClickableHtmlAndTextContent(key, value) {
let htmlString = `<span class="clickable sg-code-tree-requerio-key">${key}:</span> `;
htmlString += '<ul class="sg-code-tree-requerio sg-code-tree-requerio-branch sg-code-tree-requerio-value">';
htmlString += '<li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf">';
htmlString += `<span class="sg-code-tree-requerio-value">${window.he.encode(value)}</span>`;
htmlString += '</li></ul>';

return htmlString;
}

buildHtml(state) {
let html = '<ul id="sg-code-tree-requerio-trunk" class="sg-code-tree-requerio">';
html += this.buildTree(state);
html += '</ul>';
let htmlString = '<ul id="sg-code-tree-requerio-trunk" class="sg-code-tree-requerio">';
htmlString += this.buildTree(state);
htmlString += '</ul>';

return html;
return htmlString;
}

buildTree(branch) {
let html = '';
let htmlString = '';

for (const key of Object.keys(branch)) {
html += '<li class="sg-code-tree-requerio sg-code-tree-requerio-node';
htmlString += '<li class="sg-code-tree-requerio sg-code-tree-requerio-node';

// Cannot use instanceof Object on state properties.
if (branch[key] && typeof branch[key] === 'object') {
if (Object.keys(branch[key]).length) {
html += ` sg-code-tree-requerio-branch"><span class="clickable sg-code-tree-requerio-key">${key}:</span> `;
html += '<ul class="sg-code-tree-requerio sg-code-tree-requerio-branch sg-code-tree-requerio-value">';
html += this.buildTree(branch[key]);
html += '</ul>';
htmlString += ' sg-code-tree-requerio-branch">';
htmlString += `<span class="clickable sg-code-tree-requerio-key">${key}:</span> `;
htmlString += '<ul class="sg-code-tree-requerio sg-code-tree-requerio-branch sg-code-tree-requerio-value">';
htmlString += this.buildTree(branch[key]);
htmlString += '</ul>';
}
else {
if (Array.isArray(branch[key])) {
html += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
htmlString += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
'<span class="sg-code-tree-requerio-value">[]</span>';
}
else {
html += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
htmlString += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
'<span class="sg-code-tree-requerio-value">{}</span>';
}
}
}
else if (typeof branch[key] === 'string') {
html += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
`<span class="sg-code-tree-requerio-value">"${window.he.encode(branch[key])}"</span>`;
switch (key) {
case 'html':
case 'textContent':
htmlString += ' sg-code-tree-requerio-branch">';
htmlString += this.buildClickableHtmlAndTextContent(key, branch[key]);

break;
default:
htmlString += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
`<span class="sg-code-tree-requerio-value">"${window.he.encode(branch[key])}"</span>`;
}
}
else {
html += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
htmlString += ` sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">${key}:</span> ` +
`<span class="sg-code-tree-requerio-value">${branch[key]}</span>`;
}

html += '</li>';
htmlString += '</li>';
}

return html;
return htmlString;
}

recurseStatesAndDom(stateBranchBefore, stateBranchNow, domChildren, level) {
Expand All @@ -107,17 +127,37 @@ export default class RequerioInspector {

if (!nowValue || typeof nowValue === 'string' || typeof nowValue === 'number') {
// Always rewrite the DOM for non-objects and non-arrays.
domChildren[i].classList.remove('sg-code-tree-requerio-branch');
domChildren[i].classList.add('sg-code-tree-requerio-leaf');

if (typeof nowValue === 'string') {
domChildren[i].innerHTML = `<span class="sg-code-tree-requerio-key">${nowKey}:</span> ` +
`<span class="sg-code-tree-requerio-value">"${window.he.encode(nowValue)}"</span>`;
switch (nowKey) {
case 'html':
case 'textContent':
domChildren[i].innerHTML = this.buildClickableHtmlAndTextContent(nowKey, nowValue);

domChildren[i].classList.remove('sg-code-tree-requerio-leaf');
domChildren[i].classList.add('sg-code-tree-requerio-branch');
/* istanbul ignore next */
domChildren[i].children[0].addEventListener('click', () => {
this.toggleExpandableBranch(domChildren[i]);
});

break;
default: {
// Declaring const and wrapping in braces because putting the regex in backticks breaks vim highlighting.
const nowValueEscaped = nowValue.replace(/"/g, '\\"');
domChildren[i].innerHTML = `<span class="sg-code-tree-requerio-key">${nowKey}:</span> ` +
`<span class="sg-code-tree-requerio-value">"${window.he.encode(nowValueEscaped)}"</span>`;

domChildren[i].classList.remove('sg-code-tree-requerio-branch');
domChildren[i].classList.add('sg-code-tree-requerio-leaf');
}
}
}
else {
domChildren[i].innerHTML = `<span class="sg-code-tree-requerio-key">${nowKey}:</span> ` +
`<span class="sg-code-tree-requerio-value">${nowValue}</span>`;

domChildren[i].classList.remove('sg-code-tree-requerio-branch');
domChildren[i].classList.add('sg-code-tree-requerio-leaf');
}
}
// Cannot use instanceof Object on state properties.
Expand Down Expand Up @@ -162,9 +202,6 @@ export default class RequerioInspector {
}
// Rewrite the DOM for empty objects and arrays.
else {
domChildren[i].classList.remove('sg-code-tree-requerio-branch');
domChildren[i].classList.add('sg-code-tree-requerio-leaf');

if (Array.isArray(nowValue)) {
domChildren[i].innerHTML = `<span class="sg-code-tree-requerio-key">${nowKey}:</span> ` +
'<span class="sg-code-tree-requerio-value">[]</span>';
Expand All @@ -173,6 +210,9 @@ export default class RequerioInspector {
domChildren[i].innerHTML = `<span class="sg-code-tree-requerio-key">${nowKey}:</span> ` +
'<span class="sg-code-tree-requerio-value">{}</span>';
}

domChildren[i].classList.remove('sg-code-tree-requerio-branch');
domChildren[i].classList.add('sg-code-tree-requerio-leaf');
}
}
}
Expand Down
14 changes: 11 additions & 3 deletions scripts/listeners/requerio-inspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,16 @@ export default class RequerioInspector {

setInterval(() => {
if (this.codeViewer.codeActive && this.codeViewer.tabActive === 'requerio') {
if (!this.stoked) {
let patternStoreStateNow;

if (this.stoked) {
patternStoreStateNow = requerioP.store.getState();

for (const organism of Object.keys(patternStoreStateNow)) {
requerioP.$orgs[organism].updateMeasurements(patternStoreStateNow[organism]);
}
}
else {
for (const patternOrgKey of Object.keys(requerioP.$orgs)) {
const patternOrg = requerioP.$orgs[patternOrgKey];

Expand All @@ -242,10 +251,9 @@ export default class RequerioInspector {
}

this.stoked = true;
patternStoreStateNow = requerioP.store.getState();
}

const patternStoreStateNow = requerioP.store.getState();

if (patternStoreStateBefore !== patternStoreStateNow) {
this.requerioInspector.recurseStatesAndDom(
patternStoreStateBefore,
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/pattern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ content_key: nav_content
---
content_key: toggler_content
---
&lt;button id="toggler"&gt;Toggler&lt;/button&gt;
&lt;button id="toggler"&gt;Toggle&lt;/button&gt;
</code></pre>
<button id="sg-code-btn-markdown-edit" class="sg-code-btn" title="Edit this pattern's Markdown content">Edit</button>
`);
Expand Down
12 changes: 6 additions & 6 deletions test/fixtures/requerio-inspector.out
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
<ul class="sg-code-tree-requerio sg-code-tree-requerio-branch sg-code-tree-requerio-value"><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">0:</span>
<span class="sg-code-tree-requerio-value">"sg-code-pane"</span></li></ul></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">css:</span>
<span class="sg-code-tree-requerio-value">{}</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">data:</span>
<span class="sg-code-tree-requerio-value">{}</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">html:</span>
<span class="sg-code-tree-requerio-value">"
<span class="sg-code-tree-requerio-value">{}</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-branch"><span class="clickable sg-code-tree-requerio-key">html:</span>
<ul class="sg-code-tree-requerio sg-code-tree-requerio-branch sg-code-tree-requerio-value"><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-value">
<ul id="sg-code-tree-requerio-help" class="sg-code-tree-requerio">
<li class="sg-code-tree-requerio sg-code-tree-requerio-branch">
<span class="clickable">How to dispatch actions in your browser's Developer Tools:</span>
Expand All @@ -50,15 +50,15 @@
</ul>
</li>
</ul>
"</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">innerWidth:</span>
</span></li></ul></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">innerWidth:</span>
<span class="sg-code-tree-requerio-value">null</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">innerHeight:</span>
<span class="sg-code-tree-requerio-value">null</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">outerWidth:</span>
<span class="sg-code-tree-requerio-value">null</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">outerHeight:</span>
<span class="sg-code-tree-requerio-value">null</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">prop:</span>
<span class="sg-code-tree-requerio-value">{}</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">scrollLeft:</span>
<span class="sg-code-tree-requerio-value">0</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">scrollTop:</span>
<span class="sg-code-tree-requerio-value">0</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">textContent:</span>
<span class="sg-code-tree-requerio-value">"
<span class="sg-code-tree-requerio-value">0</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-branch"><span class="clickable sg-code-tree-requerio-key">textContent:</span>
<ul class="sg-code-tree-requerio sg-code-tree-requerio-branch sg-code-tree-requerio-value"><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-value">


How to dispatch actions in your browser's Developer Tools:
Expand All @@ -75,7 +75,7 @@



"</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">width:</span>
</span></li></ul></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">width:</span>
<span class="sg-code-tree-requerio-value">null</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-leaf"><span class="sg-code-tree-requerio-key">height:</span>
<span class="sg-code-tree-requerio-value">null</span></li><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-branch"><span class="clickable sg-code-tree-requerio-key">$members:</span>
<ul class="sg-code-tree-requerio sg-code-tree-requerio-branch sg-code-tree-requerio-value"><li class="sg-code-tree-requerio sg-code-tree-requerio-node sg-code-tree-requerio-branch"><span class="clickable sg-code-tree-requerio-key">0:</span>
Expand Down
Loading

0 comments on commit a7e6fb0

Please sign in to comment.