Skip to content

Commit 1231476

Browse files
possumbilitiespossumbilities
authored
add rough sketch of behavior to build from
1 parent f54373a commit 1231476

File tree

3 files changed

+311
-4
lines changed

3 files changed

+311
-4
lines changed

‎src/index.html

+211-1
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,222 @@ <h2>Our Work Relies On You!</h2>
9090

9191
<h1>Choose a License for Your Work</h1>
9292

93+
<p>Follow the steps to select the appropriate license for your work. <br /> This site does not store any information.</p>
94+
95+
9396
</header>
9497

9598

9699
<div class="content">
97100

98-
<p>[form here]</p>
101+
102+
103+
<form id="license-chooser">
104+
105+
<ol>
106+
107+
<li>
108+
<fieldset id="do-you-know-which-license-you-need">
109+
<legend>Do you know which license you need?</legend>
110+
<!-- <legend>Choose a License</legend> -->
111+
112+
113+
<div>
114+
<input type="radio" id="yes-choose" name="choose" value="yes" checked />
115+
<label for="yes-choose">Yes</label>
116+
</div>
117+
118+
<div>
119+
<input type="radio" id="no-choose" name="choose" value="no" />
120+
<label for="no-choose">No</label>
121+
</div>
122+
<!--
123+
<div>
124+
<input type="radio" id="choose" name="choose" value="choose" />
125+
<label for="choose">Choose</label>
126+
</div>
127+
128+
<div>
129+
<input type="radio" id="help" name="help" value="help" />
130+
<label for="help">Help me choose</label>
131+
</div> -->
132+
</fieldset>
133+
</li>
134+
135+
<li>
136+
<fieldset id="which-license-do-you-need">
137+
<!-- <legend>Choose a License</legend> -->
138+
<legend>Which license do you need?</legend>
139+
140+
<label for="license">License</label>
141+
<select name="license" id="license">
142+
<option value="cc-0">CC0 1.0</option>
143+
<option value="cc-by" selected>CC-BY 4.0</option>
144+
<option value="cc-by-sa">CC-BY-SA 4.0</option>
145+
<option value="cc-by-nd">CC-BY-ND 4.0</option>
146+
<option value="cc-by-nc">CC-BY-NC 4.0</option>
147+
<option value="cc-by-nc-sa">CC-BY-NC-SA 4.0</option>
148+
<option value="cc-by-nc-nd">CC-BY-NC-ND 4.0</option>
149+
</select>
150+
151+
<!-- <p>OR</p>
152+
153+
<div></div>
154+
<input type="checkbox" id="help" name="help" value="help" />
155+
<label for="help">Help me choose</label>
156+
</div> -->
157+
158+
</fieldset>
159+
</li>
160+
161+
<li>
162+
<fieldset id="require-attribution">
163+
<legend>Attribution?</legend>
164+
165+
<div>
166+
<input type="radio" id="yes-attribution" name="attribution" value="yes" checked />
167+
<label for="yes-attribution">Yes</label>
168+
</div>
169+
170+
<div>
171+
<input type="radio" id="no-attribution" name="attribution" value="no" />
172+
<label for="no-attribution">No</label>
173+
</div>
174+
175+
</fieldset>
176+
</li>
177+
178+
179+
<li>
180+
<fieldset id="allow-commercial-use">
181+
<legend>Commercial Use?</legend>
182+
183+
<div>
184+
<input type="radio" id="yes-commercial" name="commercial" value="yes" />
185+
<label for="yes-commercial">Yes</label>
186+
</div>
187+
188+
<div>
189+
<input type="radio" id="no-commercial" name="commercial" value="no" />
190+
<label for="no-commercial">No</label>
191+
</div>
192+
193+
</fieldset>
194+
</li>
195+
196+
<li>
197+
<fieldset id="allow-derivatives">
198+
<legend>Derivative Works?</legend>
199+
200+
<div>
201+
<input type="radio" id="yes-derivatives" name="derivatives" value="yes" />
202+
<label for="yes-derivatives">Yes</label>
203+
</div>
204+
205+
<div>
206+
<input type="radio" id="no-derivatives" name="derivatives" value="no" />
207+
<label for="no-derivatives">No</label>
208+
</div>
209+
210+
</fieldset>
211+
</li>
212+
213+
<li>
214+
<fieldset id="share-alike">
215+
<legend>Sharing Requirements?</legend>
216+
217+
<div>
218+
<input type="radio" id="yes-sharing-requirements" name="sharing-requirements" value="yes" />
219+
<label for="yes-sharing-requirements">Yes</label>
220+
</div>
221+
222+
<div>
223+
<input type="radio" id="no-sharing-requirements" name="sharing-requirements" value="no" />
224+
<label for="sharing-requirements">No</label>
225+
</div>
226+
227+
</fieldset>
228+
</li>
229+
230+
<!-- <hr /> -->
231+
232+
<li>
233+
<fieldset id="waive-your-copyright">
234+
<legend>Waive your copyright</legend>
235+
236+
<div>
237+
<input type="checkbox" id="waive" name="waive" value="waive" />
238+
<label for="waive">I hereby waive all copyright and related or neighboring rights together with all associated claims and causes of action with respect to this work to the extent possible under the law.</label>
239+
</div>
240+
241+
<div>
242+
<input type="checkbox" id="read" name="read" value="read" />
243+
<label for="read">I have read and understand the terms and intended legal effect of CC0, and hereby voluntarily elect to apply it to this work.</label>
244+
</div>
245+
246+
</fieldset>
247+
</li>
248+
249+
<li>
250+
<fieldset id="confirmation">
251+
<legend>Confirm that CC Licensing is appropriate</legend>
252+
253+
<div>
254+
<input type="checkbox" id="ownership" name="ownership" value="ownership" />
255+
<label for="ownership">I own or have authority to license the work.</label>
256+
</div>
257+
258+
<div>
259+
<input type="checkbox" id="read" name="read" value="read" />
260+
<label for="read">I have read and understand the terms of the license.</label>
261+
</div>
262+
263+
<div>
264+
<input type="checkbox" id="revocation" name="revocation" value="revocation" />
265+
<label for="revocation">I understand that CC licensing is not revocable.</label>
266+
</div>
267+
268+
</fieldset>
269+
</li>
270+
271+
<!-- <hr /> -->
272+
273+
<li>
274+
<fieldset id="attribution-details">
275+
<legend>Attribution details (optional)</legend>
276+
277+
<div>
278+
<label for="title">Title of work</label>
279+
<input type="text" id="title" name="title" value="title" />
280+
</div>
281+
282+
<div>
283+
<label for="creator">Creator of work</label>
284+
<input type="text" id="creator" name="creator" value="creator" />
285+
</div>
286+
287+
<div>
288+
<label for="work-link">Link to work</label>
289+
<input type="text" id="work-link" name="work-link" value="work link" />
290+
</div>
291+
292+
<div>
293+
<label for="creator-link">Title of work</label>
294+
<input type="text" id="creator-link" name="creator-link" value="creator link" />
295+
</div>
296+
297+
</fieldset>
298+
</li>
299+
300+
</ol>
301+
</form>
302+
303+
<!-- <button>submit</button> -->
304+
305+
<aside>
306+
<p>[license recommendation info here]</p>
307+
<p>[attribution info here]</p>
308+
</aside>
99309

100310
</div>
101311

‎src/scripts.js

+90-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
let rawStatePathRoutes = [
3-
'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-0/waive-your-copyright+i-hereby-waive+i-have-read/attribution-details&license=cc-0',
3+
'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-0/waive-your-copyright+waive+read/attribution-details&license=cc-0',
44
'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by/attribution-details&license=cc-by',
55
'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by-sa/attribution-details&license=cc-by-sa',
66
'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by-nd/attribution-details&license=cc-by-nd',
@@ -14,7 +14,7 @@ let rawStatePathRoutes = [
1414
'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commerical-use/no/allow-derivatives/yes/share-alike/yes/confirmation+ownership+read+revocation/attribution-details&license=cc-by-nc',
1515
'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commerical-use/no/allow-derivatives/yes/share-alike/no/confirmation+ownership+read+revocation/attribution-details&license=cc-by-nc-sa',
1616
'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commerical-use/no/allow-derivatives/no/confirmation+ownership+read+revocation/attribution-details&license=cc-by-nc-nd',
17-
'do-you-know-which-license-you-need/no/require-attribution/no/waive-your-copyright+i-hereby-waive+i-have-read/attribution-details&license=cc-0'
17+
'do-you-know-which-license-you-need/no/require-attribution/no/waive-your-copyright+waive+read/attribution-details&license=cc-0'
1818
];
1919

2020

@@ -46,3 +46,91 @@ console.log(statePath[11]);
4646
console.log(last[0]);
4747

4848
console.log(license[1]);
49+
50+
51+
52+
53+
document.querySelector('#require-attribution').classList.toggle('disable');
54+
55+
document.querySelector('#allow-commercial-use').classList.toggle('disable');
56+
57+
document.querySelector('#allow-derivatives').classList.toggle('disable');
58+
59+
document.querySelector('#share-alike').classList.toggle('disable');
60+
61+
document.querySelector('#waive-your-copyright').classList.toggle('disable');
62+
63+
document.querySelector('#confirmation').classList.toggle('disable');
64+
65+
66+
67+
// Get the form
68+
const form = document.forms[0];
69+
70+
// Get the form's radio buttons
71+
const helpChoice = form.elements["choose"];
72+
73+
// Choose the "red" option
74+
console.log(helpChoice.value);
75+
76+
const selectElement = document.querySelector("#do-you-know-which-license-you-need");
77+
78+
selectElement.addEventListener("change", (event) => {
79+
console.log(helpChoice.value);
80+
81+
if (helpChoice.value == 'no') {
82+
83+
document.querySelector('#which-license-do-you-need').classList.toggle('disable');
84+
85+
} else {
86+
87+
document.querySelector('#which-license-do-you-need').classList.remove('disable');
88+
}
89+
90+
document.querySelector('#require-attribution').classList.toggle('disable');
91+
92+
document.querySelector('#allow-commercial-use').classList.toggle('disable');
93+
94+
document.querySelector('#allow-derivatives').classList.toggle('disable');
95+
96+
document.querySelector('#share-alike').classList.toggle('disable');
97+
98+
document.querySelector('#confirmation').classList.toggle('disable');
99+
});
100+
101+
102+
const licenseElement = document.querySelector("#which-license-do-you-need");
103+
104+
const licenseChoice = form.elements["license"];
105+
106+
licenseElement.addEventListener("change", (event) => {
107+
console.log(licenseChoice.value);
108+
109+
if (licenseChoice.value == 'cc-0') {
110+
111+
document.querySelector('#waive-your-copyright').classList.toggle('disable');
112+
} else {
113+
114+
document.querySelector('#waive-your-copyright').classList.add('disable');
115+
}
116+
117+
});
118+
119+
const attributionElement = document.querySelector("#require-attribution");
120+
121+
const attributionChoice = form.elements["attribution"];
122+
123+
attributionElement.addEventListener("change", (event) => {
124+
console.log(attributionChoice.value);
125+
126+
document.querySelector('#allow-commercial-use').classList.toggle('disable');
127+
128+
document.querySelector('#allow-derivatives').classList.toggle('disable');
129+
130+
document.querySelector('#share-alike').classList.toggle('disable');
131+
132+
document.querySelector('#waive-your-copyright').classList.remove('disable');
133+
134+
document.querySelector('#confirmation').classList.toggle('disable');
135+
136+
});

‎src/style.css

+10-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
@import 'vocabulary/css/vocabulary.css' layer(vocabulary);
1+
@import 'vocabulary/css/vocabulary.css' layer(vocabulary);
2+
3+
/*
4+
ol li:has(#require-attribution, #allow-commercial-use, #allow-derivatives, #share-alike, #waive-your-copyright, #confirmation) {
5+
display: none;
6+
} */
7+
8+
ol li:has(.disable) {
9+
display: none;
10+
}

0 commit comments

Comments
 (0)