Skip to content

Commit 3d280de

Browse files
possumbilitiespossumbilities
authored
Merge pull request #562 from creativecommons/render-recs
add baseline `templates` for the various licenses, to load dynamically in "rec area" when a matching `license` is found from `state.current`
2 parents 7b2ea44 + 0228eea commit 3d280de

File tree

3 files changed

+315
-11
lines changed

3 files changed

+315
-11
lines changed

‎src/index.html‎

Lines changed: 237 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,9 @@ <h1>Choose a License for Your Work</h1>
138138

139139
<label for="license">License</label>
140140
<select name="license" id="license">
141+
<option value="noselect" selected>&mdash;choose a license&mdash;</option>
141142
<option value="cc-0">CC0 1.0</option>
142-
<option value="cc-by" selected>CC-BY 4.0</option>
143+
<option value="cc-by">CC-BY 4.0</option>
143144
<option value="cc-by-sa">CC-BY-SA 4.0</option>
144145
<option value="cc-by-nd">CC-BY-ND 4.0</option>
145146
<option value="cc-by-nc">CC-BY-NC 4.0</option>
@@ -313,7 +314,7 @@ <h2>Recommended License</h2>
313314

314315
<article class="license">
315316

316-
<header>
317+
<!-- <header>
317318
<h3>CC-BY 4.0</h3>
318319
<span class="license-icons">
319320
<svg>
@@ -335,7 +336,7 @@ <h4>Creative Commons Attribution 4.0 International</h4>
335336
<dd>Credit must be given to you, the creator.</dd>
336337
</dl>
337338
338-
<a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v2">See the License Deed</a>
339+
<a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v2">See the License Deed</a> -->
339340

340341
</article>
341342
</div>
@@ -475,8 +476,239 @@ <h2>Support Our Work</h2>
475476
<script src="scripts.js"></script>
476477

477478

478-
<template id="license">
479-
<!-- placeholder for swapping out content later with JS -->
479+
<template id="cc-0" class="license">
480+
<header>
481+
<h3>CC0 1.0</h3>
482+
<span class="license-icons">
483+
<svg>
484+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
485+
</svg>
486+
<svg>
487+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-zero"></use>
488+
</svg>
489+
</span>
490+
<h4>CC0 1.0 Universal</h4>
491+
</header>
492+
493+
<div class="description">
494+
<p>By marking the work with a CC0 public domain dedication, the creator is giving up their copyright and allowing reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.</p>
495+
</div>
496+
497+
<dl class="conditions-definitions">
498+
<dt class="icon-attach cc-zero">CC0</dt>
499+
<dd>This work has been marked as dedicated to the public domain.</dd>
500+
</dl>
501+
502+
<a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v2">See the License Deed</a>
503+
</template>
504+
505+
<template id="cc-by" class="license">
506+
<header>
507+
<h3>CC-BY 4.0</h3>
508+
<span class="license-icons">
509+
<svg>
510+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
511+
</svg>
512+
<svg>
513+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
514+
</svg>
515+
</span>
516+
<h4>Creative Commons Attribution 4.0 International</h4>
517+
</header>
518+
519+
<div class="description">
520+
<p>This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.</p>
521+
</div>
522+
523+
<dl class="conditions-definitions">
524+
<dt class="icon-attach cc-by">BY</dt>
525+
<dd>Credit must be given to you, the creator.</dd>
526+
</dl>
527+
528+
<a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v2">See the License Deed</a>
529+
</template>
530+
531+
<template id="cc-by-sa" class="license">
532+
<header>
533+
<h3>CC BY-SA 4.0</h3>
534+
<span class="license-icons">
535+
<svg>
536+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
537+
</svg>
538+
<svg>
539+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
540+
</svg>
541+
<svg>
542+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-sa"></use>
543+
</svg>
544+
</span>
545+
<h4>Creative Commons Attribution-ShareAlike 4.0 International</h4>
546+
</header>
547+
548+
<div class="description">
549+
<p>This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes. If others remix, adapt, or build upon the material, they must license the modified material under identical terms.</p>
550+
</div>
551+
552+
<dl class="conditions-definitions">
553+
<dt class="icon-attach cc-by">BY</dt>
554+
<dd>Credit must be given to you, the creator.</dd>
555+
556+
<dt class="icon-attach cc-sa">SA</dt>
557+
<dd>Adaptations must be shared under the same terms.</dd>
558+
</dl>
559+
560+
<a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v2">See the License Deed</a>
561+
</template>
562+
563+
<template id="cc-by-nd" class="license">
564+
<header>
565+
<h3>CC BY-ND 4.0</h3>
566+
<span class="license-icons">
567+
<svg>
568+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
569+
</svg>
570+
<svg>
571+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
572+
</svg>
573+
<svg>
574+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-nd"></use>
575+
</svg>
576+
</span>
577+
<h4>Creative Commons Attribution-NoDerivatives 4.0 International</h4>
578+
</header>
579+
580+
<div class="description">
581+
<p>This license requires that reusers give credit to the creator. It allows reusers to copy and distribute the material in any medium or format in unadapted form only, even for commercial purposes.</p>
582+
</div>
583+
584+
<dl class="conditions-definitions">
585+
<dt class="icon-attach cc-by">BY</dt>
586+
<dd>Credit must be given to you, the creator.</dd>
587+
588+
<dt class="icon-attach cc-nd">ND</dt>
589+
<dd>No derivatives or adaptations of your work are permitted.</dd>
590+
</dl>
591+
592+
<a href="https://creativecommons.org/licenses/by-nd/4.0/?ref=chooser-v2">See the License Deed</a>
593+
</template>
594+
595+
<template id="cc-by-nc" class="license">
596+
<header>
597+
<h3>CC BY-NC 4.0</h3>
598+
<span class="license-icons">
599+
<svg>
600+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
601+
</svg>
602+
<svg>
603+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
604+
</svg>
605+
<svg>
606+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-nc"></use>
607+
</svg>
608+
</span>
609+
<h4>Creative Commons Attribution-NonCommercial 4.0 International</h4>
610+
</header>
611+
612+
<div class="description">
613+
<p>This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only.</p>
614+
</div>
615+
616+
<dl class="conditions-definitions">
617+
<dt class="icon-attach cc-by">BY</dt>
618+
<dd>Credit must be given to you, the creator.</dd>
619+
620+
<dt class="icon-attach cc-nc">NC</dt>
621+
<dd>
622+
Only noncommercial use of your work is permitted.
623+
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
624+
</dd>
625+
626+
627+
</dl>
628+
629+
<a href="https://creativecommons.org/licenses/by-nc/4.0/?ref=chooser-v2">See the License Deed</a>
630+
</template>
631+
632+
<template id="cc-by-nc-sa" class="license">
633+
<header>
634+
<h3>CC BY-NC-SA 4.0</h3>
635+
<span class="license-icons">
636+
<svg>
637+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
638+
</svg>
639+
<svg>
640+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
641+
</svg>
642+
<svg>
643+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-nc"></use>
644+
</svg>
645+
<svg>
646+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-sa"></use>
647+
</svg>
648+
</span>
649+
<h4>Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</h4>
650+
</header>
651+
652+
<div class="description">
653+
<p>This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. If others modify or adapt the material, they must license the modified material under identical terms.</p>
654+
</div>
655+
656+
<dl class="conditions-definitions">
657+
<dt class="icon-attach cc-by">BY</dt>
658+
<dd>Credit must be given to you, the creator.</dd>
659+
660+
<dt class="icon-attach cc-nc">NC</dt>
661+
<dd>
662+
Only noncommercial use of your work is permitted.
663+
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
664+
</dd>
665+
666+
<dt class="icon-attach cc-sa">SA</dt>
667+
<dd>Adaptations must be shared under the same terms.</dd>
668+
</dl>
669+
670+
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v2">See the License Deed</a>
671+
</template>
672+
673+
<template id="cc-by-nc-nd" class="license">
674+
<header>
675+
<h3>CC BY-NC-ND 4.0</h3>
676+
<span class="license-icons">
677+
<svg>
678+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-logo"></use>
679+
</svg>
680+
<svg>
681+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-by"></use>
682+
</svg>
683+
<svg>
684+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-nc"></use>
685+
</svg>
686+
<svg>
687+
<use href="vocabulary/svg/cc/icons/cc-icons.svg#cc-nd"></use>
688+
</svg>
689+
</span>
690+
<h4>Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</h4>
691+
</header>
692+
693+
<div class="description">
694+
<p>This license requires that reusers give credit to the creator. It allows reusers to copy and distribute the material in any medium or format in unadapted form and for noncommercial purposes only.</p>
695+
</div>
696+
697+
<dl class="conditions-definitions">
698+
<dt class="icon-attach cc-by">BY</dt>
699+
<dd>Credit must be given to you, the creator.</dd>
700+
701+
<dt class="icon-attach cc-nc">NC</dt>
702+
<dd>
703+
Only noncommercial use of your work is permitted.
704+
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
705+
</dd>
706+
707+
<dt class="icon-attach cc-nd">ND</dt>
708+
<dd>No derivatives or adaptations of your work are permitted.</dd>
709+
</dl>
710+
711+
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v2">See the License Deed</a>
480712
</template>
481713

482714
</body>

‎src/scripts.js‎

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function setStateParts(state) {
7777

7878
// temp defaults
7979
state.parts[0] = 'do-you-know-which-license-you-need/yes/';
80-
state.parts[1] = 'which-license-do-you-need/cc-by/';
80+
//state.parts[1] = 'which-license-do-you-need/cc-by/';
8181
state.parts[8] = 'attribution-details/';
8282
}
8383
// function to update state.parts
@@ -120,15 +120,14 @@ function setStateCurrent(element, index, state) {
120120
state.parts.splice(i);
121121
}
122122
});
123-
// [T]: also reset value to nothing each time
124-
123+
125124
state.current = state.parts.join('') //.slice(0, -1);
126125
}
127126

128127
// function to set state.props
129128
// including setting state.props.license (if valid)
130129
// or error
131-
function setStateProps(state) {
130+
function setStateProps(index, state) {
132131

133132
state.props = {};
134133
state.props.license = 'unknown';
@@ -141,12 +140,63 @@ function setStateProps(state) {
141140
}
142141
});
143142

143+
state.props.cursor = index;
144+
console.log('cursor at:');
145+
console.log(index);
146+
147+
}
148+
149+
// function to reset values beyond current fieldset
150+
// [T] this could potentially do with a refactor
151+
// check for input type, and them perform
152+
// contextual resets to universal defaults
153+
// unchecked for radio/checkbox, noselect for
154+
// selection dropdown, etc.
155+
function clearStepsAfterCursor(fieldsets, state) {
156+
fieldsets.forEach((element, index) => {
157+
if (index > state.props.cursor) {
158+
159+
if (index == 1) {
160+
element.querySelector("#license").value = "noselect";
161+
}
162+
163+
// if (index = 8) {
164+
165+
// }
166+
167+
if (index != 1 | index != 8) {
168+
console.log('clear at:');
169+
console.log(index);
170+
171+
let inputs = element.querySelectorAll('input');
172+
inputs.forEach((input, i) => {
173+
input.checked = false;
174+
console.log('uncheck!');
175+
});
176+
}
177+
}
178+
});
144179
}
145180

146181
// function to render "license recommendation",
147182
// if valid license from state.parts and/or state.current
148183
function renderLicenseRec(state) {
149-
document.querySelector('#license-recommendation header h3').textContent = state.props.license;
184+
// document.querySelector('#license-recommendation header h3').textContent = state.props.license;
185+
186+
if (state.props.license != 'unknown' ) {
187+
document.querySelector('#license-recommendation').classList.remove('disable');
188+
189+
let license = state.props.license;
190+
let template = document.getElementById(license);
191+
let templateContent = template.content.cloneNode(true);
192+
document.querySelector('#license-recommendation .license').textContent = '';
193+
document.querySelector('#license-recommendation .license').appendChild(templateContent);
194+
console.log('license set to: ' + license);
195+
}
196+
else if (state.props.license == 'unknown') {
197+
document.querySelector('#license-recommendation').classList.add('disable');
198+
document.querySelector('#license-recommendation .license').textContent = '';
199+
}
150200
}
151201

152202
// function to set default UX states on Steps
@@ -163,6 +213,8 @@ function setDefaults(applyDefaults) {
163213
document.querySelector(element).classList.add('disable');
164214
});
165215
}
216+
217+
document.querySelector('#license-recommendation').classList.add('disable');
166218
}
167219

168220
// stepper logic here for what parts of form are
@@ -252,10 +304,15 @@ function watchFieldsets(fieldsets, state) {
252304
console.log("state.current (after change)");
253305
console.log(state.current);
254306

255-
setStateProps(state);
307+
setStateProps(index, state);
256308
console.log("state.props (after change)");
257309
console.log(state.props);
258310

311+
// [T]: also reset values beyond current changed fieldset to nothing each time
312+
//element.checked = false;
313+
//console.log('reset values beyond current fieldset to nothing');
314+
clearStepsAfterCursor(fieldsets, state);
315+
259316
renderSteps(applyDefaults, state);
260317

261318
renderLicenseRec(state);

0 commit comments

Comments
 (0)