Skip to content

Commit 8184284

Browse files
author
Ari Madian
authored
Merge pull request #10 from creativecommons/implement-chooser-functionality
[WIP] Add chooser functionality
2 parents ac8f3d8 + fcebb45 commit 8184284

File tree

6 files changed

+226
-43
lines changed

6 files changed

+226
-43
lines changed

‎src/index.html

+24-15
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</header>
2626
<div class="container site-container" id="chooser-app">
2727
<br>
28-
<div class="container" id="education-content">
28+
<div class="container" id="education-content" hidden>
2929
<h1 class="title is-1">[Some Title]</h1>
3030
<div class="columns">
3131
<div class="column is-one-third" id="icons-explanation">
@@ -354,7 +354,7 @@ <h4 class="title is-4">
354354
</label> <br>
355355
</div>
356356
</div>
357-
</div>--><!--
357+
</div>-->
358358
<div class="column" id="chooser-controls-switch">
359359
<p align="center">Changes to the options below will affect the license choice to the right.</p> <br><br>
360360
<div id="license-chooser-allow-adaptations">
@@ -368,15 +368,18 @@ <h4 class="title is-4">
368368
<div class="columns is-gapless">
369369
<div class="field column is-one-fifth">
370370
<label for="allow-adaptations-switch">No</label>
371-
<input id="allow-adaptations-switch" type="checkbox" name="allow-adaptations-switch" class="switch is-thin" checked="checked">
371+
<input id="allow-adaptations-switch" type="checkbox"
372+
name="allow-adaptations-switch" class="switch is-thin"
373+
checked="checked" onchange="switch_callback(this)">
372374
<label for="allow-adaptations-switch">Yes</label>
373375
</div>
374376
<div class="field column is-pulled-left" style="display: inline;">
375377
<p class="control is-pulled-left">
376-
<div class="b-checkbox is-primary" style="display: inline;">
377-
<input id="checkbox" class="styled" checked type="checkbox">
378+
<div class="b-checkbox is-primary" id="sa-checkbox" style="display: inline;">
379+
<input id="checkbox" class="styled is-primary"
380+
type="checkbox" onchange="sa_check_callback(this)">
378381
<label for="checkbox">
379-
SA Checkbox
382+
Yes, but others must share under the same license.
380383
</label>
381384
</div>
382385
</p>
@@ -394,12 +397,14 @@ <h4 class="title is-4">
394397
<div class="control" style="margin-left: 9%; padding-top: 1%;">
395398
<div class="field">
396399
<label for="allow-commercial-switch">No</label>
397-
<input id="allow-commercial-switch" type="checkbox" name="allow-commercial-switch" class="switch is-thin" checked="checked">
400+
<input id="allow-commercial-switch" type="checkbox"
401+
name="allow-commercial-switch" class="switch is-thin"
402+
checked="checked" onchange="switch_callback(this)">
398403
<label for="allow-commercial-switch">Yes</label>
399404
</div>
400405
</div>
401406
</div> <br><br>
402-
</div>-->
407+
</div><!--
403408
<div class="column" id="chooser-controls-images">
404409
<p align="center">Changes to the options below will affect the license choice to the right.</p> <br><br>
405410
<div id="license-chooser-allow-adaptations">
@@ -446,13 +451,17 @@ <h4 class="title is-4">
446451
</div>
447452
</div>
448453
</div> <br><br>
449-
</div>
450-
<div class="column">
451-
<h3 class="title is-3">Your License!</h3>
452-
<p align="center">{{chooser.selected_license}}</p> <br><br>
453-
<div id="license-chooser-icons" align="center">
454-
<img src="assets/cc.svg" class="chooser-license-icon">
455-
</div>
454+
</div>-->
455+
<div class="column" align="center">
456+
<h3 class="title is-3">Your License!</h3> <br><br>
457+
<a v-bind:href="chooser.selected_license_link" align="center">{{chooser.selected_license}}</a> <br>
458+
<p>{{chooser.selected_license_short}}</p> <br>
459+
<span id="license-chooser-icons">
460+
<img src="assets/cc.svg" class="chooser-license-icon" id="cc-logo-icon">
461+
<img src="assets/license-icons/cc-by_icon.svg" class="chooser-license-icon" id="attribution-icon">
462+
<img src="assets/license-icons/cc-nc_icon.svg" class="chooser-license-icon" id="commercial-icon">
463+
<img v-bind:src="'assets/license-icons/' + chooser.icons.nd_sa_src" class="chooser-license-icon" id="adaptations-icon">
464+
</span>
456465
</div>
457466
</div>
458467
</div>

‎src/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ var app_state = new Vue({ // eslint-disable-line
44
message: "Hello Vue!",
55
chooser: {
66
selected_license: "[License Name]",
7+
selected_license_short: "[License Short]",
8+
selected_license_link: "",
9+
icons: {
10+
nc_shown: false,
11+
sa_shown: false,
12+
nd_shown: false,
13+
nd_sa_src: "cc-sa_icon.svg",
14+
},
715
inputs: {
816
share_alike: false,
917
allow_adaptations: true,

‎src/scripts/choose-a-license.js

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
function set_license() {
2+
set_license_text()
3+
set_license_icons()
4+
}
5+
6+
function set_license_text() {
7+
/*
8+
var state = app_state.chooser
9+
if (state.inputs.allow_adaptations == null &&
10+
state.inputs.allow_commercial_uses == null) {
11+
state.selected_license = "To Choose a License, Please Make Some Selections Using the Controls to the Left."
12+
} else if (state.inputs.allow_adaptations == null &&
13+
state.inputs.allow_commercial_uses != null) {
14+
state.selected_license = "Please Select Whether or not to Allow Adaptations of Your Work."
15+
}*/
16+
app_state.chooser.selected_license = gen_license_name()
17+
app_state.chooser.selected_license_short = gen_shortened_name()
18+
set_license_link()
19+
}
20+
21+
function set_license_icons() {
22+
var state = app_state.chooser
23+
if (state.inputs.allow_adaptations) {
24+
state.icons.nd_shown = false
25+
state.icons.sa_shown = false
26+
toggle_license_icon("nd-sa", false)
27+
if (state.inputs.share_alike) {
28+
state.icons.sa_shown = true
29+
state.icons.nd_shown = false
30+
state.icons.nd_sa_src = "cc-sa_icon.svg"
31+
toggle_license_icon("nd-sa", true)
32+
}
33+
}
34+
else if (!state.inputs.allow_adaptations) {
35+
state.icons.nd_shown = true
36+
state.icons.sa_shown = false
37+
state.icons.nd_sa_src = "cc-nd_icon.svg"
38+
toggle_license_icon("nd-sa", true)
39+
}
40+
41+
if (state.inputs.allow_commercial_uses) {
42+
state.icons.nc_shown = false
43+
toggle_license_icon("nc", false)
44+
} else {
45+
state.icons.nc_shown = true
46+
toggle_license_icon("nc", true)
47+
}
48+
}
49+
50+
function gen_license_name() {
51+
var state = app_state.chooser
52+
var license_base = "Atribution"
53+
if (!state.inputs.allow_commercial_uses) {
54+
license_base += "-NonCommercial"
55+
}
56+
if (state.inputs.allow_adaptations) {
57+
if (state.inputs.share_alike) {
58+
license_base += "-ShareAlike"
59+
}
60+
}
61+
else if (!state.inputs.allow_adaptations) {
62+
license_base += "-NoDerivatives"
63+
}
64+
license_base += " 4.0 International"
65+
app_state.chooser.selected_license = license_base
66+
return license_base
67+
}
68+
69+
/**
70+
*
71+
* @param {boolean} url_version If the shortened name need to be slugified for a URL
72+
*/
73+
function gen_shortened_name(url_version = false) {
74+
const license = app_state.chooser.selected_license
75+
var short = "CC BY"
76+
if (license.includes("NonCommercial")) {
77+
short += "-NC"
78+
}
79+
if (license.includes("NoDerivatives")) {
80+
short += "-ND"
81+
} else if(license.includes("ShareAlike")) {
82+
short += "-SA"
83+
}
84+
return (url_version ? short.slice(3).toLowerCase() : short += " 4.0")
85+
}
86+
87+
function set_license_link() {
88+
const short_license = gen_shortened_name(true)
89+
var url = "https://creativecommons.org/licenses/{0}/4.0".format(short_license)
90+
app_state.chooser.selected_license_link = url
91+
}
92+
93+
/**
94+
*
95+
* @param {object} check The HTML SA Checkbox object
96+
*/
97+
function sa_check_callback(check) {
98+
console.log("Checkbox Toggled")
99+
app_state.chooser.inputs.share_alike = check.checked
100+
set_license()
101+
}
102+
103+
/**
104+
*
105+
* @param {object} cb The HTML switch object
106+
*/
107+
function switch_callback(cb) {
108+
console.log("Switch Toggled - " + cb.id)
109+
var state = app_state.chooser.inputs
110+
state.selected_license = ""
111+
switch (cb.id) {
112+
case "allow-adaptations-switch":
113+
state.allow_adaptations = cb.checked
114+
if (cb.checked) { // If allow adaptations
115+
console.log("Is Allow Adaptations - " + cb.checked)
116+
state.allow_adaptations = true
117+
show_sa_check()
118+
set_license()
119+
}
120+
else { // If NOT allow adaptations
121+
state.allow_adaptations = false
122+
hide_sa_check()
123+
}
124+
break;
125+
case "allow-commercial-switch":
126+
state.allow_commercial_uses = cb.checked
127+
break;
128+
default:
129+
console.log("Whoops! This function isn't designed to handle that parameter.")
130+
break;
131+
}
132+
set_license()
133+
}
134+
135+
function toggle_license_icon(icon, is_show) {
136+
switch (icon) {
137+
case "nd-sa":
138+
if (!is_show) document.getElementById("adaptations-icon").style.display = "none"
139+
else document.getElementById("adaptations-icon").style.display = "inline"
140+
break;
141+
case "nc":
142+
if (!is_show) document.getElementById("commercial-icon").style.display = "none"
143+
else document.getElementById("commercial-icon").style.display = "inline"
144+
break;
145+
default:
146+
console.log("Whoops! This function isn't designed to handle that parameter.")
147+
break;
148+
}
149+
}
150+
151+
function hide_sa_check() {
152+
console.log("SA Hidden")
153+
document.getElementById("sa-checkbox").style.display = "none"
154+
}
155+
156+
function show_sa_check() {
157+
console.log("SA Shown")
158+
var element = document.getElementById("sa-checkbox")
159+
if (app_state.chooser.inputs.share_alike) {
160+
element.checked = "true"
161+
} else {
162+
element.checked = "false"
163+
}
164+
165+
element.style.display = "block"
166+
}

‎src/scripts/page-controls.js

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import set_license from "../scripts/choose-a-license.js"
2+
13
function spawn_modal(modal_id) {
24
/* Deprecated, but I want to keep it for future reference.
35
app_state.modals.modal_content = app_state.modals.modal_packs[modal_id].content // Update modal content
@@ -24,6 +26,11 @@ function destroy_modal(modal_id) {
2426
element.classList.remove("is-active")
2527
}
2628

29+
function on_page_load() {
30+
set_license()
31+
document.getElementById('sa-checkbox').checked = app_state.chooser.inputs.share_alike
32+
}
33+
2734
function copy_text_to_clipboard() {
2835

2936
}

‎src/scripts/scripts.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
String.prototype.format = function() {
2+
a = this;
3+
for (k in arguments) {
4+
a = a.replace("{" + k + "}", arguments[k])
5+
}
6+
return a
7+
}

‎src/styles/styles.css

+14-28
Original file line numberDiff line numberDiff line change
@@ -23,40 +23,15 @@
2323
display: inline;
2424
}
2525

26-
/* The next three classes were copied from w3schools */
27-
/* Style the button that is used to open and close the collapsible content */
28-
.collapsible {
29-
background-color: #eee;
30-
color: #444;
31-
cursor: pointer;
32-
padding: 18px;
33-
width: 100%;
34-
border: none;
35-
text-align: left;
36-
outline: none;
37-
font-size: 15px;
38-
}
39-
40-
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
41-
.active, .collapsible:hover {
42-
background-color: #ccc;
43-
}
44-
45-
/* Style the collapsible content. Note: hidden by default */
46-
.content {
47-
padding: 0 18px;
48-
display: none;
49-
overflow: hidden;
50-
background-color: #f1f1f1;
51-
}
52-
5326
a.modal-icon {
5427
vertical-align: middle;
5528
display: inline;
5629
}
5730

5831
img.chooser-license-icon {
5932
width: 15%;
33+
margin-right: 1.4%;
34+
display: inline;
6035
}
6136

6237
a.generator-copy-button {
@@ -78,4 +53,15 @@ h2 {
7853

7954
h3 {
8055
text-align: center;
81-
}
56+
}
57+
/*
58+
input[type="checkbox"] {
59+
background: #ef9421;
60+
text-align: center;
61+
}
62+
63+
input[type="checkbox"]:checked {
64+
background: #ef9421;
65+
content: "\2713";
66+
text-align: center;
67+
}*/

0 commit comments

Comments
 (0)