Skip to content

Commit 9d8ceae

Browse files
possumbilitiespossumbilities
authored
Merge pull request #565 from creativecommons/add-tabs
improve formats UX (markup and styling), add `details/summary` to mediums and formats
2 parents b434890 + 270dae1 commit 9d8ceae

File tree

3 files changed

+249
-34
lines changed

3 files changed

+249
-34
lines changed

‎src/index.html‎

Lines changed: 85 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
</head>
1616

17-
<body>
17+
<body class="chooser-page">
1818
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>
1919

2020
<header>
@@ -220,8 +220,8 @@ <h1>Choose a License for Your Work</h1>
220220
</div>
221221

222222
<div>
223-
<input type="radio" id="no-sharing-requirements" name="sharing-requirements" value="no" />
224-
<label for="sharing-requirements">No</label>
223+
<input type="radio" id="no-sharing-requirements" name="no-sharing-requirements" value="no" />
224+
<label for="no-sharing-requirements">No</label>
225225
</div>
226226

227227
</fieldset>
@@ -300,6 +300,23 @@ <h1>Choose a License for Your Work</h1>
300300
<input type="text" id="work-creation-year" name="work-creation-year" value="1999" />
301301
</div>
302302

303+
<div id="tool-rec-details">
304+
305+
<hr />
306+
307+
<div>
308+
<label for="tool-title">Title of recommended tool (read only)</label>
309+
<input type="text" id="tool-title" name="tool-title" value="recommended tool title" readonly="true" />
310+
</div>
311+
312+
<div>
313+
<label for="tool-url">URL of recommended tool (read only)</label>
314+
<input type="text" id="tool-url" name="tool-url" value="https://creativecommons.org/licenses/by/4.0/" readonly="true" />
315+
</div>
316+
317+
</div>
318+
319+
303320
</fieldset>
304321
</li>
305322

@@ -310,7 +327,7 @@ <h1>Choose a License for Your Work</h1>
310327

311328
<aside>
312329
<div id="tool-recommendation">
313-
<h2>Recommended</h2>
330+
<h2>Recommended Choice</h2>
314331

315332
<article class="tool">
316333

@@ -347,29 +364,70 @@ <h2>Mark Your Work</h2>
347364
<p>Choose the kind of work to get appropriate license code or public domain marking.</p>
348365
</header>
349366

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-
<h4>Rich Text</h4>
354-
<p>[contextually formatted mark here]</p>
355-
356-
<h4>HTML</h4>
357-
<p>[contextually formatted mark here]</p>
358-
359-
<h4>XMP</h4>
360-
<p>[contextually formatted mark here]</p> -->
361-
362-
<h3>Print Work or Media</h3>
363-
<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>
364-
365-
<h4>Plain Text</h4>
366-
<p class="plain-text mark">[contextually formatted mark here]</p>
367-
368-
<footer>
369-
<p>[toggle: (license abbreviation) | (full license name)]</p>
370-
<button>Copy</button>
371-
<button>Download</button>
372-
</footer>
367+
<details class="medium">
368+
369+
<summary>Website</summary>
370+
371+
<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>
372+
373+
<article>
374+
<details class="format">
375+
<summary>Rich Text</summary>
376+
377+
<p class="rich-text mark">[contextually formatted mark here]</p>
378+
379+
<footer>
380+
<div>
381+
<input type="checkbox" id="rich-text-full-name" name="rich-text-full-name" value="rich-text-full-name" />
382+
<label for="rich-text-full-name">full tool name</label>
383+
</div>
384+
<button id="copy-rich-text-mark">Copy</button>
385+
</footer>
386+
</details>
387+
</article>
388+
389+
<article>
390+
<details class="format">
391+
<summary>HTML</summary>
392+
393+
<p class="html mark">[contextually formatted mark here]</p>
394+
395+
<footer>
396+
<div>
397+
<input type="checkbox" id="html-full-name" name="html-full-name" value="html-full-name" />
398+
<label for="html-full-name">full tool name</label>
399+
</div>
400+
<button id="copy-html-mark">Copy</button>
401+
</footer>
402+
</details>
403+
</article>
404+
405+
<!-- <h4>XMP</h4>
406+
<p>[contextually formatted mark here]</p> -->
407+
408+
</details>
409+
410+
<details class="medium">
411+
<summary>Print Work or Media</summary>
412+
413+
<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>
414+
415+
<article>
416+
<details class="format">
417+
<summary>Plain Text</summary>
418+
419+
<p class="plain-text mark">[contextually formatted mark here]</p>
420+
421+
<footer>
422+
<div>
423+
<input type="checkbox" id="plain-text-full-name" name="plain-text-full-name" value="plain-text-full-name" />
424+
<label for="plain-text-full-name">full tool name</label>
425+
</div>
426+
<button id="copy-plain-text-mark">Copy</button>
427+
</footer>
428+
</details>
429+
</article>
430+
</details>
373431

374432
</div>
375433

‎src/scripts.js‎

Lines changed: 71 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -172,14 +172,15 @@ function setStateProps(index, state) {
172172
setStatePropsAttribution(state);
173173
}
174174

175+
175176
// isolated function to just set the attribution
176177
// subset of state.props (for use other places)
177178
function setStatePropsAttribution(state) {
178-
state.props.attribution.title = document.querySelector('#attribution-details #title').value;
179-
state.props.attribution.creator = document.querySelector('#attribution-details #creator').value;
180-
state.props.attribution.workLink = document.querySelector('#attribution-details #work-link').value;
181-
state.props.attribution.creatorLink = document.querySelector('#attribution-details #creator-link').value;
182-
state.props.attribution.workCreationYear = document.querySelector('#attribution-details #work-creation-year').value;
179+
state.props.attribution.title = document.querySelector('#attribution-details #title').value.replace(/(<([^>]+)>)/gi, "");
180+
state.props.attribution.creator = document.querySelector('#attribution-details #creator').value.replace(/(<([^>]+)>)/gi, "");
181+
state.props.attribution.workLink = document.querySelector('#attribution-details #work-link').value.replace(/(<([^>]+)>)/gi, "");
182+
state.props.attribution.creatorLink = document.querySelector('#attribution-details #creator-link').value.replace(/(<([^>]+)>)/gi, "");
183+
state.props.attribution.workCreationYear = document.querySelector('#attribution-details #work-creation-year').value.replace(/(<([^>]+)>)/gi, "");
183184
}
184185

185186
// function to reset values beyond current fieldset
@@ -238,7 +239,6 @@ function renderToolRec(state) {
238239
// render specifically the mark formats subsections
239240
function renderMarkingFormats(state) {
240241

241-
242242
if (state.props.tool != 'unknown' ) {}
243243

244244
setStatePropsAttribution(state);
@@ -260,6 +260,10 @@ function renderMarkingFormats(state) {
260260
//let mark = attribution.title + ' © ' + attribution.workCreationYear + ' by ' + attribution.creator + ' is ' + type + ' ' + state.props.toolShort + '. To view a copy of this license, visit ' + state.props.toolURL;
261261
//document.querySelector('#mark-your-work .plain-text.mark').textContent = mark;
262262

263+
264+
// set contents of plain text mark
265+
// TODO: reverse use of <template> since it has limits on tokenization capacity, even if
266+
// it allows more dev readability.
263267
let template = document.getElementById('plain-text');
264268
let templateContent = template.content.cloneNode(true);
265269
document.querySelector('#mark-your-work .plain-text.mark').textContent = '';
@@ -290,6 +294,50 @@ function renderMarkingFormats(state) {
290294

291295
//templateContent.textContent = parseTokens("year", attribution.workCreationYear, templateContent.textContent);
292296
//document.querySelector('#mark-your-work .plain-text.mark').appendChild(templateContent);
297+
298+
// set contents of rich text mark
299+
let ccSVG = '<svg><use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use></svg>';
300+
let bySVG = '<svg><use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use></svg>';
301+
let saSVG = '<svg><use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-sa"></use></svg>';
302+
let ncSVG = '<svg><use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-nc"></use></svg>';
303+
let ndSVG = '<svg><use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-nd"></use></svg>';
304+
let zeroSVG = '<svg><use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-zero"></use></svg>';
305+
306+
const currentTool = state.props.tool;
307+
switch (currentTool) {
308+
case 'cc-0':
309+
ccIconSet = ccSVG + zeroSVG;
310+
break;
311+
case 'cc-by':
312+
ccIconSet = ccSVG + bySVG;
313+
break;
314+
case 'cc-by-sa':
315+
ccIconSet = ccSVG + bySVG + saSVG;
316+
break;
317+
case 'cc-by-nd':
318+
ccIconSet = ccSVG + bySVG + ndSVG;
319+
break;
320+
case 'cc-by-nc':
321+
ccIconSet = ccSVG + bySVG + ncSVG;
322+
break;
323+
case 'cc-by-nc-sa':
324+
ccIconSet = ccSVG + bySVG + ncSVG + saSVG;
325+
break;
326+
case 'cc-by-nc-nd':
327+
ccIconSet = ccSVG + bySVG + ncSVG + ndSVG;
328+
break;
329+
default:
330+
currentTool = '';
331+
}
332+
333+
let richTextMark = attribution.title + ' © ' + attribution.workCreationYear + ' by ' + attribution.creator + ' is ' + typeAsVerb + ' ' + '<a href="' + state.props.toolURL + '">' + state.props.toolShort + '</a>' + ccIconSet;
334+
document.querySelector('#mark-your-work .rich-text.mark').innerHTML = richTextMark;
335+
336+
337+
// set contents of HTML mark
338+
defaultHTML = '<p xmlns:cc="http://creativecommons.org/ns#">This work is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0<img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt=""><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt=""></a></p>';
339+
let htmlMark = '<textarea readonly="true">' + defaultHTML + '</textarea>';
340+
document.querySelector('#mark-your-work .html.mark').innerHTML = htmlMark;
293341
}
294342

295343

@@ -359,6 +407,7 @@ function setDefaults(applyDefaults) {
359407

360408
document.querySelector('#tool-recommendation').classList.add('disable');
361409
document.querySelector('#mark-your-work').classList.add('disable');
410+
document.querySelector('#tool-rec-details').classList.add('hide');
362411
}
363412

364413
// stepper logic here for what parts of form are
@@ -502,3 +551,19 @@ console.log("initial defaults applied");
502551

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

‎src/style.css‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@ ol li:has(.disable) {
8282
display: none;
8383
}
8484

85+
.hide {
86+
display: none;
87+
}
88+
8589
.tool header {
8690
display: flex;
8791
flex-wrap: wrap;
@@ -106,11 +110,99 @@ ol li:has(.disable) {
106110
.content {
107111
display: grid;
108112
gap: 2em;
109-
grid-template-columns: 1fr 1fr;
113+
grid-template-columns: 1fr 2fr;
114+
}
115+
116+
.mark svg {
117+
display: inline;
118+
/* font-size: 1em; */
119+
width: 1.3em;
120+
height: 1.3em;
121+
}
122+
123+
.mark svg:first-of-type {
124+
margin-left: .5em;
125+
}
126+
127+
.tool-rec-details input {
128+
color: lightgray;
129+
}
130+
131+
#tool-recommendation p {
132+
font-size: 1.4em;
133+
}
134+
135+
#mark-your-work p {
136+
font-size: 1.4em;
137+
}
138+
139+
details {
140+
font-family: 'Source Sans Pro';
141+
142+
border: 2px solid var(--vocabulary-neutral-color-lighter-gray);
143+
border-radius: 5px;
144+
}
145+
146+
details details {
147+
margin: 1em;
148+
}
149+
150+
details.medium {
151+
margin-bottom: 1em;
152+
}
153+
154+
details.medium:open > summary {
155+
/* margin-bottom: 1em; */
156+
}
157+
158+
details summary {
159+
padding: .2em .5em;
160+
161+
background: var(--vocabulary-neutral-color-lighter-gray);
162+
font-size: 1.6em;
163+
}
164+
165+
details.format summary {
166+
font-size: 1.3em;
167+
}
168+
169+
170+
summary:hover {
171+
cursor: pointer;
172+
}
173+
174+
summary::marker {
175+
font-size: .8em;
176+
}
177+
178+
details p {
179+
padding: 0 1em;
180+
181+
font-size: 1em;
182+
}
183+
184+
body.chooser-page .content {
185+
grid-column: 3 / 10;
186+
187+
}
188+
189+
@media (max-width: 705px) {
190+
.content {
191+
display: block;
192+
}
110193
}
111194

112195

113196
/* debug styles */
114197
.help {
115198
display: none;
116199
}
200+
201+
202+
.panel {
203+
display: none;
204+
}
205+
206+
.panel.expand {
207+
display: initial;
208+
}

0 commit comments

Comments
 (0)