From b8e164cc1037d421deaed4753828b863f4a6c0ce Mon Sep 17 00:00:00 2001 From: Ari Date: Wed, 3 Jul 2019 12:58:28 -0700 Subject: [PATCH 01/11] Remove radio button controls --- src/index.html | 44 -------------------------------------------- 1 file changed, 44 deletions(-) diff --git a/src/index.html b/src/index.html index 1450e0556..2ae92f175 100644 --- a/src/index.html +++ b/src/index.html @@ -42,50 +42,6 @@

CC License Chooser

Confused? Check out the "Need Help?" section just below!


-

Changes to the options below will affect the license choice to the right.


From 95ea28a8fedc0ff5e782e87618a6901c36292fe4 Mon Sep 17 00:00:00 2001 From: Ari Date: Fri, 5 Jul 2019 14:25:14 -0700 Subject: [PATCH 02/11] Add commercial uses icon --- src/index.html | 52 ++++++++++----------------------- src/scripts/choose-a-license.js | 4 +-- src/styles/styles.css | 28 ++++++++++++++++++ 3 files changed, 45 insertions(+), 39 deletions(-) diff --git a/src/index.html b/src/index.html index 2ae92f175..29aa793fb 100644 --- a/src/index.html +++ b/src/index.html @@ -42,6 +42,7 @@

CC License Chooser

Confused? Check out the "Need Help?" section just below!


+

Changes to the options below will affect the license choice to the right.



@@ -161,23 +154,9 @@

-
-
- - - -
-
-

-

- - -
-

-
-
+ +


@@ -189,15 +168,14 @@

-

Selected Example

- - -

Unselected Example

- + +



-
--> +

Changes to the options below will affect the license choice to the right.



@@ -186,19 +85,34 @@



-
- +
+ To change the selected license, click or tap the icons below +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
From 23dacc0f71ca28a53bd7a4aac9de66fadd2f689a Mon Sep 17 00:00:00 2001 From: Ari Date: Wed, 10 Jul 2019 11:28:26 -0700 Subject: [PATCH 05/11] Add chooser icon descriptions --- src/index.html | 46 ++++++++++++++++++++++++++------- src/scripts/choose-a-license.js | 1 + src/styles/styles.css | 21 +++++++++++---- 3 files changed, 54 insertions(+), 14 deletions(-) diff --git a/src/index.html b/src/index.html index 11d7e9fc9..e3fb244ee 100644 --- a/src/index.html +++ b/src/index.html @@ -18,10 +18,7 @@ - +

@@ -89,8 +86,8 @@

To change the selected license, click or tap the icons below
-
-
+
+
@@ -98,19 +95,50 @@

-
+ Commercial Uses Not Allowed +

+ You let others copy, distribute, display, perform, + and (unless you have chosen NoDerivatives) modify + and use your work for any purpose other than + commercially, unless they get your permission first. +

+
+
+
+
+
-
+ Modifying Not Allowed +

+ You let others copy, distribute, display, and perform, + and modify your work, as long as they distribute any + modified work, they must get your permission first. +

+
+
+
+
+
- +
+
+ Distributed on Same Terms +

+ You let others copy, distribute, perform, and modify + your work, as long as they distribute any modified + work on the same terms. If they want to distribute + modified works under other terms, they must get + your permission first. +

+
diff --git a/src/scripts/choose-a-license.js b/src/scripts/choose-a-license.js index f11bab3ff..cc0a7d68a 100644 --- a/src/scripts/choose-a-license.js +++ b/src/scripts/choose-a-license.js @@ -118,6 +118,7 @@ function set_license_link() { */ function sa_check_callback(check) { console.log("Checkbox Toggled") + console.log(check.checked) app_state.chooser.inputs.share_alike = check.checked set_license() } diff --git a/src/styles/styles.css b/src/styles/styles.css index 1f8a2fcce..3835dc259 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -116,12 +116,13 @@ h3 { input[type=checkbox].css-checkbox{ display: none; } .css-label { - padding-left: 20px; display: flex; height: 55px; + padding: 20px 50px 20px 20px; background-image: url(../assets/license-icons/cc-nd-icon.svg); background-repeat: no-repeat; background-size: contain; + cursor: pointer; opacity: 1; filter: alpha(opacity=100); } @@ -142,18 +143,28 @@ input[type=checkbox].css-checkbox:checked + label.css-label.is-commercial { } .css-label.is-sa { - background-image: url(../assets/license-icons/cc-sa_icon.svg) + background-image: url(../assets/license-icons/cc-sa_icon.svg); + opacity: 0.4; + filter: alpha(opacity=40); /* msie */ } input[type=checkbox].css-checkbox:checked + label.css-label.is-sa { - background-image: url(../assets/license-icons/cc-sa_icon.svg) + background-image: url(../assets/license-icons/cc-sa_icon.svg); + opacity: 1; + filter: alpha(opacity=100); } .chooser-selected-title img { vertical-align: middle; width: 42px; - opacity: 0.7; - filter: alpha(opacity=70); /* msie */ + opacity: 1; + filter: alpha(opacity=100); /* msie */ +} + +#control-icon-container { + margin-left: 9%; + padding-top: 1%; + display: inline; } /* From 72450a5e230197e5805b2bafb91ba0ec02136e8f Mon Sep 17 00:00:00 2001 From: Ari Date: Wed, 10 Jul 2019 11:34:07 -0700 Subject: [PATCH 06/11] Get SA toggle working properly --- src/index.html | 12 +++++++----- src/styles/styles.css | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/index.html b/src/index.html index e3fb244ee..a101003d9 100644 --- a/src/index.html +++ b/src/index.html @@ -18,7 +18,9 @@ - +

@@ -121,12 +123,12 @@

-
+
-
+
- + onchange="sa_check_callback(this)" name="sa-checkbox"> +
diff --git a/src/styles/styles.css b/src/styles/styles.css index 3835dc259..fbc018552 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -144,7 +144,7 @@ input[type=checkbox].css-checkbox:checked + label.css-label.is-commercial { .css-label.is-sa { background-image: url(../assets/license-icons/cc-sa_icon.svg); - opacity: 0.4; + opacity: .4; filter: alpha(opacity=40); /* msie */ } From 42dd0a70b90296ff9180c6f9997211dcf6d5c885 Mon Sep 17 00:00:00 2001 From: Ari Date: Wed, 10 Jul 2019 11:39:20 -0700 Subject: [PATCH 07/11] Get SA display toggling working --- src/index.html | 36 +++++++++++++++++---------------- src/scripts/choose-a-license.js | 4 ++-- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/index.html b/src/index.html index a101003d9..004d392f6 100644 --- a/src/index.html +++ b/src/index.html @@ -123,25 +123,27 @@

-
-
-
- - +
+
+
+
+ + +
+
+
+ Distributed on Same Terms +

+ You let others copy, distribute, perform, and modify + your work, as long as they distribute any modified + work on the same terms. If they want to distribute + modified works under other terms, they must get + your permission first. +

-
- Distributed on Same Terms -

- You let others copy, distribute, perform, and modify - your work, as long as they distribute any modified - work on the same terms. If they want to distribute - modified works under other terms, they must get - your permission first. -

-
-
+
diff --git a/src/scripts/choose-a-license.js b/src/scripts/choose-a-license.js index cc0a7d68a..0f0fad599 100644 --- a/src/scripts/choose-a-license.js +++ b/src/scripts/choose-a-license.js @@ -173,12 +173,12 @@ function toggle_license_icon(icon, is_show) { function hide_sa_check() { console.log("SA Hidden") - document.getElementById("sa-control").style.display = "none" + document.getElementById("sa-control-container").style.display = "none" } function show_sa_check() { console.log("SA Shown") - var element = document.getElementById("sa-control") + var element = document.getElementById("sa-control-container") if (app_state.chooser.inputs.share_alike) { element.checked = "true" } From 02d095682e3601487555d31fe8990a3ee985118b Mon Sep 17 00:00:00 2001 From: Ari Date: Wed, 10 Jul 2019 11:56:03 -0700 Subject: [PATCH 08/11] Add hover shading to icons --- src/index.html | 6 +++--- src/styles/styles.css | 20 ++++++++++++++++++-- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index 004d392f6..15ff560e9 100644 --- a/src/index.html +++ b/src/index.html @@ -111,7 +111,7 @@

- +

@@ -125,14 +125,14 @@

-
+
-
+
Distributed on Same Terms

You let others copy, distribute, perform, and modify diff --git a/src/styles/styles.css b/src/styles/styles.css index fbc018552..da324e2f4 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -119,7 +119,6 @@ input[type=checkbox].css-checkbox{ display: none; } display: flex; height: 55px; padding: 20px 50px 20px 20px; - background-image: url(../assets/license-icons/cc-nd-icon.svg); background-repeat: no-repeat; background-size: contain; cursor: pointer; @@ -129,11 +128,28 @@ input[type=checkbox].css-checkbox{ display: none; } input[type=checkbox].css-checkbox:checked + label.css-label { background-position: 0 0; - background-image: url(../assets/license-icons/cc-nd-icon.svg); opacity: 0.4; filter: alpha(opacity=40); /* msie */ } +input[type=checkbox].css-checkbox:hover + label.css-label { + opacity: .5; + filter: alpha(opacity=50); +} + +input[type=checkbox].css-checkbox:checked + label.css-label:hover { + opacity: 1; + filter: alpha(opacity=100); +} + +.css-label.is-adaptations { + background-image: url(../assets/license-icons/cc-nd-icon.svg); +} + +input[type=checkbox].css-checkbox:checked + label.css-label.css-label.is-adaptations { + background-image: url(../assets/license-icons/cc-nd-icon.svg); +} + .css-label.is-commercial { background-image: url(../assets/license-icons/cc-nc_icon.svg) } From 7c7af67f2ab937389518041aeb953bd326499924 Mon Sep 17 00:00:00 2001 From: Ari Date: Wed, 10 Jul 2019 12:43:53 -0700 Subject: [PATCH 09/11] Fix broken CSS, Fix broken chooser logic --- src/index.html | 11 ++++------- src/scripts/choose-a-license.js | 10 ++++------ src/styles/styles.css | 28 +++++++++++++--------------- 3 files changed, 21 insertions(+), 28 deletions(-) diff --git a/src/index.html b/src/index.html index 15ff560e9..8db135570 100644 --- a/src/index.html +++ b/src/index.html @@ -18,9 +18,7 @@ - +


@@ -91,8 +89,7 @@

+ onchange="switch_callback(this)" name="allow-commercial-switch">
@@ -110,8 +107,8 @@

- + onchange="switch_callback(this)" name="allow-adaptations-switch"> +
diff --git a/src/scripts/choose-a-license.js b/src/scripts/choose-a-license.js index 0f0fad599..a9aefae1b 100644 --- a/src/scripts/choose-a-license.js +++ b/src/scripts/choose-a-license.js @@ -119,7 +119,7 @@ function set_license_link() { function sa_check_callback(check) { console.log("Checkbox Toggled") console.log(check.checked) - app_state.chooser.inputs.share_alike = check.checked + app_state.chooser.inputs.share_alike = !app_state.chooser.inputs.share_alike set_license() } @@ -133,12 +133,10 @@ function switch_callback(cb) { state.selected_license = "" switch (cb.id) { case "allow-adaptations-switch": - state.allow_adaptations = cb.checked - if (cb.checked) { // If allow adaptations - console.log("Is Allow Adaptations - " + cb.checked) + if (!cb.checked) { // If allow adaptations + console.log("Is Allow Adaptations - " + !cb.checked) state.allow_adaptations = true show_sa_check() - set_license() } else { // If NOT allow adaptations state.allow_adaptations = false @@ -146,7 +144,7 @@ function switch_callback(cb) { } break; case "allow-commercial-switch": - state.allow_commercial_uses = cb.checked + state.allow_commercial_uses = !state.allow_commercial_uses break; default: console.log("Whoops! This function isn't designed to handle that parameter.") diff --git a/src/styles/styles.css b/src/styles/styles.css index da324e2f4..c49acc855 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -122,32 +122,30 @@ input[type=checkbox].css-checkbox{ display: none; } background-repeat: no-repeat; background-size: contain; cursor: pointer; - opacity: 1; - filter: alpha(opacity=100); + opacity: 0.4; + filter: alpha(opacity=40); /* msie */ } -input[type=checkbox].css-checkbox:checked + label.css-label { +.css-checkbox:checked + .css-label { background-position: 0 0; - opacity: 0.4; - filter: alpha(opacity=40); /* msie */ + opacity: 1; + filter: alpha(opacity=100); /* msie */ } -input[type=checkbox].css-checkbox:hover + label.css-label { +.css-checkbox:hover + .css-label { opacity: .5; filter: alpha(opacity=50); } -input[type=checkbox].css-checkbox:checked + label.css-label:hover { - opacity: 1; - filter: alpha(opacity=100); -} .css-label.is-adaptations { background-image: url(../assets/license-icons/cc-nd-icon.svg); } -input[type=checkbox].css-checkbox:checked + label.css-label.css-label.is-adaptations { +input[type=checkbox].css-checkbox:checked + label.css-label.is-adaptations { background-image: url(../assets/license-icons/cc-nd-icon.svg); + opacity: 1; + filter: alpha(opacity=100); /* msie */ } .css-label.is-commercial { @@ -155,19 +153,19 @@ input[type=checkbox].css-checkbox:checked + label.css-label.css-label.is-adaptat } input[type=checkbox].css-checkbox:checked + label.css-label.is-commercial { - background-image: url(../assets/license-icons/cc-nc_icon.svg) + background-image: url(../assets/license-icons/cc-nc_icon.svg); + opacity: 1; + filter: alpha(opacity=100); /* msie */ } .css-label.is-sa { background-image: url(../assets/license-icons/cc-sa_icon.svg); - opacity: .4; - filter: alpha(opacity=40); /* msie */ } input[type=checkbox].css-checkbox:checked + label.css-label.is-sa { background-image: url(../assets/license-icons/cc-sa_icon.svg); opacity: 1; - filter: alpha(opacity=100); + filter: alpha(opacity=100); /* msie */ } .chooser-selected-title img { From 820b2d9e0c1248dd50a20d13a6da5d14b5ba9454 Mon Sep 17 00:00:00 2001 From: Ari Date: Wed, 17 Jul 2019 13:09:38 -0700 Subject: [PATCH 10/11] Cleanup --- src/index.html | 54 +++++--------------------------------------------- 1 file changed, 5 insertions(+), 49 deletions(-) diff --git a/src/index.html b/src/index.html index 8db135570..82067858c 100644 --- a/src/index.html +++ b/src/index.html @@ -26,10 +26,10 @@

CC License Chooser

-
+
Tip: You can click any icons you see to get more information! -

+

Have a work you want to license with the Creative Commons plaform,
@@ -39,52 +39,8 @@

CC License Chooser

Confused? Check out the "Need Help?" section just below!


-
- To change the selected license, click or tap the icons below + To change the selected license, click the icons below.
@@ -192,12 +148,12 @@

Confused? Need Help?

- The Creative Commons copyright licenses and tools forge a balance inside the tradional + The Creative Commons copyright licenses and tools forge a balance inside the traditional "all rights reserved" setting that copyright law creates. Our licenses and tools give everyone from individual creators to large companies a simple, standardized way to grant copyright permissions to their creative work.

- This helps you as a creator, because instead of having to hire a lawer to parse legalese and + This helps you as a creator, because instead of having to hire a lawyer to parse legalese and create a license for you, you can save time and money, use Creative Commons licenses instead!