Skip to content

Commit

Permalink
fix: 🐛 Make sure spacing is including children again
Browse files Browse the repository at this point in the history
  • Loading branch information
@phun-ky
phun-ky committed Nov 18, 2024
1 parent 1d925c6 commit 749e1b1
Show file tree
Hide file tree
Showing 2 changed files with 232 additions and 1 deletion.
219 changes: 219 additions & 0 deletions dev/spacing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
rel="stylesheet"
type="text/css"
/>
<link
async
href="https://codepen.io/phun-ky/pen/BagVPoR.css"
rel="stylesheet"
type="text/css"
/>
<link href="/speccer.css" rel="stylesheet" type="text/css" />
<link
async
Expand Down Expand Up @@ -214,6 +220,219 @@ <h1 class="ph">Spacing</h1>
</div> -->
</div>
</section>
<section class="ph section">
<div
class="ph container"
style="
padding-top: 5rem;
padding-bottom: 5rem;
display: flex;
justify-content: center;
align-items: center;
"
>
<div
class="ph popover-test"
style="margin: 0"
data-speccer="spacing bound"
>
<h3 class="ph">Settings</h3>
<div class="ph image-meta">
<img
src="https://picsum.photos/100/100"
alt=""
class="ph thumbnail"
/>
<input
type="text"
class="ph"
value="Camellia by Jinjin Sun"
style="
border: none;
border-bottom: 1pt solid var(--gray-3);
font-size: 0.875rem;
padding-bottom: 5px;
width: 100%;
max-width: none;
border-radius: 0;
margin: 0;
height: auto;
background-color: transparent;
color: var(--gray-2);
"
/>
</div>
<div
class="ph settings"
style="display: flex; margin-bottom: 8px"
>
<input
type="text"
class="ph non-editable"
style="
height: auto;
background-color: transparent;
border: none;
margin: 0;
padding: 0;
color: var(--gray-1);
"
value="23 x 32 in"
/>
<button
type="button"
class="ph button tertiary"
style="
border-radius: 0;
font-size: 16px;
font-weight: 500;
color: #4a9afb;
background-color: transparent;
padding: 0;
margin-left: auto;
flex-shrink: 0;
"
>
Change
</button>
</div>
<div class="ph iconsettings">
<span class="ph setting-name">Flip</span
><span class="ph iconsetting"
><svg
style="transform: rotate(-90deg)"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
>
<path
fill="currentColor"
d="m1 1 5 6 4.94-6zm4.94 9L1 16h10zm-2.82 5 2.83-3.44 3 3.44zM10 8h1v1h-1zm2 0h1v1h-1zM8 8h1v1H8zM6 8h1v1H6zM4 8h1v1H4zM2 8h1v1H2zM0 8h1v1H0z"
/>
<path
fill="currentColor"
d="M15 8.47a4.8 4.8 0 0 1-1.879 3.632L12 11v3h3l-1.18-1.18A5.76 5.76 0 0 0 16 8.478V8.47a6.06 6.06 0 0 0-2.884-4.905l-.596.805a5.1 5.1 0 0 1 2.479 4.087z"
/></svg></span
><span class="ph iconsetting"
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
fill="currentColor"
d="m1 1 5 6 4.94-6zm4.94 9L1 16h10zm-2.82 5 2.83-3.44 3 3.44zM10 8h1v1h-1zm2 0h1v1h-1zM8 8h1v1H8zM6 8h1v1H6zM4 8h1v1H4zM2 8h1v1H2zM0 8h1v1H0z"
/>
<path
fill="currentColor"
d="M15 8.47a4.8 4.8 0 0 1-1.879 3.632L12 11v3h3l-1.18-1.18A5.76 5.76 0 0 0 16 8.478V8.47a6.06 6.06 0 0 0-2.884-4.905l-.596.805a5.1 5.1 0 0 1 2.479 4.087z"
/>
</svg>
</span>
<span class="ph setting-name">Rotate</span>
<span class="ph iconsetting"
><svg
style="transform: rotate(90deg) scale(-1, 1)"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
>
<path
fill="currentColor"
d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"
/>
<path
fill="currentColor"
d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3"
/></svg></span
><span class="ph iconsetting"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
>
<path
fill="currentColor"
d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32m-44 402H188V494h440z"
/>
<path
fill="currentColor"
d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3"
/>
</svg>
</span>
</div>
<hr class="ph full" />
<h4 class="ph">View settings</h4>
<div class="ph toggle-controls" style="margin-bottom: 1rem">
<input id="id3" type="checkbox" class="ph toggle" value="a" />
<label for="id3" class="ph">Rotation snapping</label>
</div>
<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin-bottom: 1.5rem;
"
>
<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
grid-gap: 0.5rem;
align-items: center;
"
>
<input type="radio" class="ph" />
<label class="ph">30°</label>
</div>

<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
grid-gap: 0.5rem;
align-items: center;
"
>
<input type="radio" checked class="ph" />
<label class="ph">45°</label>
</div>

<div
class="ph"
style="
display: flex;
flex-wrap: nowrap;
grid-gap: 0.5rem;
align-items: center;
"
>
<input type="radio" class="ph" />
<label class="ph">90°</label>
</div>
</div>
<div class="ph toggle-controls">
<input id="id1" type="checkbox" class="ph toggle" value="a" />
<label for="id1" class="ph">Touch shortcut</label>
</div>
<div class="ph toggle-controls">
<input id="id2" type="checkbox" class="ph toggle" value="a" />
<label for="id2" class="ph">Artboard preview</label>
</div>
<hr class="ph full" />
<button type="button" class="ph button secondary app-settings">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -256 1792 1792"
>
<path
fill="currentColor"
d="M1145.492 645.424q0-106-75-181t-181-75q-106 0-181 75t-75 181q0 106 75 181t181 75q106 0 181-75t75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"
/>
</svg>
App settings
</button>
</div>
</div>
</section>
<section
class="ph section"
style="margin-top: 7rem; margin-bottom: 7rem"
Expand Down
14 changes: 13 additions & 1 deletion src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const speccer = () => {
removeAll('.ph-speccer.speccer');

const spacingElements = document.querySelectorAll(
`[${SPECCER_DATA_ATTRIBUTE}^="${SPECCER_FEATURE_SPACING}"],[${SPECCER_DATA_ATTRIBUTE}^="${SPECCER_FEATURE_SPACING}"] *:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody)`
`[${SPECCER_DATA_ATTRIBUTE}^="${SPECCER_FEATURE_SPACING}"]`
);
const measureElements = document.querySelectorAll(
`[${SPECCER_DATA_ATTRIBUTE}^="${SPECCER_FEATURE_MEASURE}"]`
Expand All @@ -117,6 +117,18 @@ const speccer = () => {
}
for (const el of spacingElements) {
spacingElement(el as HTMLElement);

if(el.hasChildNodes()){
const _child_spacing_elements = el.querySelectorAll('*:not(td):not(tr):not(th):not(tfoot):not(thead):not(tbody):not([data-speccer])');
const _areas_string: string = el.getAttribute('data-speccer') || '';

if(_child_spacing_elements && _child_spacing_elements.length){
for (const childEl of _child_spacing_elements) {
childEl.setAttribute('data-speccer',_areas_string);
spacingElement(childEl as HTMLElement);
}
}
}
}
for (const el of measureElements) {
measureElement(el as HTMLElement);
Expand Down

0 comments on commit 749e1b1

Please sign in to comment.