Skip to content

Commit 70dd378

Browse files
possumbilitiespossumbilities
authored
setup baseline expand/collapse styling and scripts, with semantic markup adjustments to compensate
1 parent 4fa2216 commit 70dd378

File tree

3 files changed

+88
-50
lines changed

3 files changed

+88
-50
lines changed

‎src/index.html‎

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -347,62 +347,75 @@ <h2>Mark Your Work</h2>
347347
<p>Choose the kind of work to get appropriate license code or public domain marking.</p>
348348
</header>
349349

350-
<h3>Website</h3>
351-
<p>If you are licensing or marking one work, paste the code next to it. If you are licensing or marking the whole page or blog, you can paste the code at the bottom of the page.</p>
352-
353-
<article>
354-
<h4><button>Rich Text</button></h4>
355-
356-
<div class="panel">
357-
<p class="rich-text mark">[contextually formatted mark here]</p>
358-
359-
<footer>
360-
<div>
361-
<input type="checkbox" id="rich-text-full-name" name="rich-text-full-name" value="rich-text-full-name" />
362-
<label for="rich-text-full-name">full tool name</label>
363-
</div>
364-
<button id="copy-rich-text-mark">Copy</button>
365-
</footer>
366-
</div>
367-
</article>
368-
369-
<article>
370-
<h4><button>HTML</button></h4>
371-
372-
<div class="panel">
373-
<p class="html mark">[contextually formatted mark here]</p>
350+
<section>
351+
352+
<h3><button class="expandPanel">Website</button></h3>
353+
354+
<div class="panel">
355+
<p>If you are licensing or marking one work, paste the code next to it. If you are licensing or marking the whole page or blog, you can paste the code at the bottom of the page.</p>
356+
357+
<article>
358+
<h4><button class="expandPanel">Rich Text</button></h4>
359+
360+
<div class="panel">
361+
<p class="rich-text mark">[contextually formatted mark here]</p>
362+
363+
<footer>
364+
<div>
365+
<input type="checkbox" id="rich-text-full-name" name="rich-text-full-name" value="rich-text-full-name" />
366+
<label for="rich-text-full-name">full tool name</label>
367+
</div>
368+
<button id="copy-rich-text-mark">Copy</button>
369+
</footer>
370+
</div>
371+
</article>
372+
373+
<article>
374+
<h4><button class="expandPanel">HTML</button></h4>
375+
376+
<div class="panel">
377+
<p class="html mark">[contextually formatted mark here]</p>
378+
379+
<footer>
380+
<div>
381+
<input type="checkbox" id="html-full-name" name="html-full-name" value="html-full-name" />
382+
<label for="html-full-name">full tool name</label>
383+
</div>
384+
<button id="copy-html-mark">Copy</button>
385+
</footer>
386+
</div>
387+
</article>
388+
389+
<!-- <h4>XMP</h4>
390+
<p>[contextually formatted mark here]</p> -->
391+
</div>
374392

375-
<footer>
376-
<div>
377-
<input type="checkbox" id="html-full-name" name="html-full-name" value="html-full-name" />
378-
<label for="html-full-name">full tool name</label>
379-
</div>
380-
<button id="copy-html-mark">Copy</button>
381-
</footer>
382-
</div>
383-
</article>
393+
</section>
394+
395+
<section>
384396

385-
<!-- <h4>XMP</h4>
386-
<p>[contextually formatted mark here]</p> -->
397+
<h3><button class="expandPanel">Print Work or Media</button></h3>
387398

388-
<h3>Print Work or Media</h3>
389-
<p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>
399+
<div class="panel">
400+
<p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>
390401

391-
<article>
392-
<h4><button>Plain Text</button></h4>
402+
<article>
403+
<h4><button class="expandPanel">Plain Text</button></h4>
393404

394-
<div class="panel">
395-
<p class="plain-text mark">[contextually formatted mark here]</p>
405+
<div class="panel">
406+
<p class="plain-text mark">[contextually formatted mark here]</p>
396407

397-
<footer>
398-
<div>
399-
<input type="checkbox" id="plain-text-full-name" name="plain-text-full-name" value="plain-text-full-name" />
400-
<label for="plain-text-full-name">full tool name</label>
401-
</div>
402-
<button id="copy-plain-text-mark">Copy</button>
403-
</footer>
404-
</div>
405-
</article>
408+
<footer>
409+
<div>
410+
<input type="checkbox" id="plain-text-full-name" name="plain-text-full-name" value="plain-text-full-name" />
411+
<label for="plain-text-full-name">full tool name</label>
412+
</div>
413+
<button id="copy-plain-text-mark">Copy</button>
414+
</footer>
415+
</div>
416+
</article>
417+
</div>
418+
</section>
406419

407420
</div>
408421

‎src/scripts.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -550,3 +550,19 @@ console.log("initial defaults applied");
550550

551551
watchFieldsets(fieldsets, state);
552552
watchAttributionDetails(fieldsets, state);
553+
554+
555+
556+
// rough panel expansion test
557+
let expandButtons = document.querySelectorAll('button.expandPanel');
558+
559+
expandButtons.forEach((element, index) => {
560+
element.addEventListener("click", (event) => {
561+
562+
parent = event.target.parentNode.parentNode;
563+
parent.querySelector('.panel').classList.toggle('expand');
564+
console.log('expanded!');
565+
566+
});
567+
});
568+

‎src/style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,12 @@ ol li:has(.disable) {
125125
.help {
126126
display: none;
127127
}
128+
129+
130+
.panel {
131+
display: none;
132+
}
133+
134+
.panel.expand {
135+
display: initial;
136+
}

0 commit comments

Comments
 (0)