Skip to content

Merge new chooser design into add-mobile-css branch #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jul 7, 2019
Merged

Merge new chooser design into add-mobile-css branch #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9f1f5a2
Add instructions for building site
Jun 26, 2019
4a5891c
Get basic license card working, currently only cc-by supported
Jun 26, 2019
cba75c2
Revert "Get basic license card working, currently only cc-by supported"
Jun 26, 2019
d91c0a4
Revert "Get basic license card working, currently only cc-by supported"
Jun 26, 2019
9c5de4b
Update icon descriptions text, working on new icon title display meth…
Jun 28, 2019
dc2399f
Merge remote-tracking branch 'origin/master'
Jun 28, 2019
67dd6db
Get basic selected license card system working
Jun 28, 2019
5cbc1d4
Get license icon setting working, license packs still need descriptions
Jun 28, 2019
01b7aab
Merge branch 'master' into chooser-license-properties-card
Jun 28, 2019
b9e1e6e
Add new chosen license designs
Jul 2, 2019
1cf30f9
Add more license descriptions, fix icon explanation title css
Jul 2, 2019
1fd1dca
Cleanup
Jul 2, 2019
387aab4
Some Cleanup
Jul 2, 2019
f4a7e74
Some More Cleanup
Jul 2, 2019
a52ae55
Merge remote-tracking branch 'origin/chooser-license-properties-card'…
Jul 2, 2019
3be60db
Update chooser modals, swap full and short selected license names
Jul 3, 2019
5a0c4f9
Swap share_adapt and license description sections
Jul 3, 2019
36b099f
Merge pull request #14 from creativecommons/chooser-license-propertie…
Jul 3, 2019
8056aeb
Merge branch 'add-mobile-css' into master
Jul 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
# cc-chooser
GSoC 2019 - The new and improved CC license selection tool (in progress)

**How do I take a look at the site?**
1. Clone the repo
2. Switch to the branch of your choice
3. Run `npm run build-css`
4. Open ./src/index.html
131 changes: 103 additions & 28 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ <h4 class="title is-4">
<div class="modal-background" onclick="destroy_modal('allow-commercial')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Considerations Before Licensing</p>
<p class="modal-card-title">Allowing Commercial Uses</p>
<button class="delete" aria-label="close" onclick="destroy_modal('allow-commercial')"></button>
</header>
<section class="modal-card-body">
Expand All @@ -174,6 +174,14 @@ <h4 class="title is-4">
only.
</p> <br>
</section>
<footer class="modal-card-foot">
<p>
Curious what qualifies as a Commercial Use? Check out the
<a href="https://wiki.creativecommons.org/wiki/NonCommercial_interpretation">
CC wiki page on interpretation of Commercial Uses.
</a>
</p>
</footer>
</div>
</div>
</span>
Expand Down Expand Up @@ -235,15 +243,47 @@ <h4 class="title is-4">
</div>
</div> <br><br>
</div>-->
<div class="column selected-license" align="center">
<h3 class="title is-3">Your License!</h3>
<!--
<div class="column" align="center">
<h3 class="title is-3">Your License!</h3> <br><br>
<a v-bind:href="chooser.selected_license_link" align="center">{{chooser.selected_license}}</a> <br>
<p>{{chooser.selected_license_short}}</p>
<div id="license-chooser-icons" class="selected-license-icons">
<img src="assets/cc.svg" class="chooser-license-icon" id="cc-logo-icon">
<img src="assets/license-icons/cc-by_icon.svg" class="chooser-license-icon" id="attribution-icon">
<img src="assets/license-icons/cc-nc_icon.svg" class="chooser-license-icon" id="commercial-icon">
<img v-bind:src="'assets/license-icons/' + chooser.icons.nd_sa_src" class="chooser-license-icon" id="adaptations-icon">
</span>
</div>-->
<div class="column">
<div class="card" class="chooser-selected" style="border-radius: 5px">
<header class="card-header">
<h2 class="title is-2 chooser-selected-card-title">
Your License!
</h2>
</header>
<div class="card-content">
<div class="chooser-selected-title">
<span id="selected-license-generated-icons" style="display: inline">
<img src="assets/cc.svg" id="cc-logo-icon">
<img src="assets/license-icons/cc-by_icon.svg" id="attribution-icon">
<img src="assets/license-icons/cc-nc_icon.svg" id="commercial-icon">
<img v-bind:src="'assets/license-icons/' + chooser.icons.nd_sa_src" id="adaptations-icon">
</span>
<div>
<b>{{chooser.selected_license_short}}</b>
<a v-bind:href="chooser.selected_license_link" class="help">{{chooser.selected_license}}</a>
</div>
</div>
<div class="chooser-selected-share_adapt">
<p>{{chooser.selected_license_short_noversion}} attribution means you allow people to</p>
<p id="generated-license-share"><b>Share</b> the material in any medium or format</p>
<p id="generated-license-adapt"><b>Adapt</b> {{chooser.selected_license_adapt}}</p>
</div>
<p class="chooser-selected-description">
{{chooser.selected_license_desc}}
</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -538,47 +578,82 @@ <h1 class="title site-title">Confused? Need Help?</h1>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-by_icon.svg">
Attribution (BY)
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-by_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Attribution Required</b>
<p class="help">(BY)</p>
</div>
</div>
<p>You must attribute the work in the manner specified by the author or licensor.</p>
<p>
All CC licenses require that others who use your work in any way must give
you credit the way you request, but not in a way that suggests you endorse
them or their use. If they want to use your work without giving credit for
endorsement purposes, they must get your permission first.
</p>
</div>
<div class="edu-icons-section">
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-nd_icon.svg">
NoDerivatives (ND)
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-nd_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Modifying Not Allowed</b>
<p class="help">(ND/ NoDerivatives)</p>
</div>
</div>
<p>
You may not create derivatives of the licensed work.
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.
</p>
<p hidden>
The licensor permits others to copy, distribute and transmit only unaltered copies of the work --
not derivative works based on it.</p>
</div>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-sa_icon.svg">
ShareAlike (SA)
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-nc_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Commercial Use Not Allowed</b>
<p class="help">(NC/ NonCommercial)</p>
</div>
</div>
<p>
You may create and distribute derivative works, but only under the same or a compatible license.
<!--
<img src="assets/license-icons/cc-nc_icon.svg">
<div style="display: inline; vertical-align: middle">
<b style="display: inline-block; padding-right: 25%">Commercial Use Not Allowed</b>
<p class="help">help</p>
</div>-->
<p style="margin-bottom: 0%; margin-top: 0px;">
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.
</p>
<p class="help">
Curious what qualifies as a Commercial Use? Check out the
<a href="https://wiki.creativecommons.org/wiki/NonCommercial_interpretation">
CC wiki page on interpretation of Commercial Uses.
</a>
</p>
<p hidden>
The licensor permits others to distribute derivative works, only under the same
license or one compatible with the one that governs the licensor's work.</p>
</div>
<div class="edu-icons-section">
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-nc_icon.svg">
NonCommercial (NC)
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-sa_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Distributed on Same Terms</b>
<p class="help">(SA/ ShareAlike)</p>
</div>
</div>
<p>
The licensor permits others to copy, distribute and transmit the work. In return,
licensees may not use the work for commercial purposes -- unless they get the
licensor's permission.</p>
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.
</p>
</div>
</div>
</div>
Expand Down
61 changes: 61 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ var app_state = new Vue({ // eslint-disable-line
chooser: {
selected_license: "[License Name]",
selected_license_short: "[License Short]",
selected_license_short_noversion: "[License Short NoVersion]",
selected_license_short_slugified: "[Slugified Short]",
selected_license_desc: "[Description]",
selected_license_share: "[Share]",
selected_license_adapt: "[Adapt]",
selected_license_link: "",
icons: {
nc_shown: false,
Expand All @@ -28,6 +33,62 @@ var app_state = new Vue({ // eslint-disable-line
normal_icon: true,
metadata_text: ""
}
},
license_packs: {
"by": {
"description": "As the most accommodating of \
licenses offered, the CC BY license allows others \
to distribute, remix, tweak, and build upon your \
work, even commercially, as long as they credit \
you for the original creation.",
"Adapt": "it for any purpose, even commercially"
},
"by-sa": {
"description": "The CC BY-SA license is realtively \
accommodating. Similar to the CC BY license, BY-SA \
allows others to distribute, remix, tweak, and build \
upon your work, even commercially, as long as they \
credit you for the original creation, and share the \
derivative work under the same license.",
"Adapt": "it for any purpose, even commercially \
(must share under the same license)"
},
"by-nd": {
"description": "The CC BY-ND license begins to become \
less accommodating. BY-ND stipulates that people are \
free to distribute your work, even commercially, \
and must credit you with the original creation, but \
they are not allowed to remix, tweak, or build upon \
your work."
},
"by-nc": {
"description": "The CC BY-NC license begins to become \
less accommodating. BY-NC stipulates that others may \
not use your work for commercial purposes. BY-NC allows \
others to distribute, remix, tweak, and build upon your \
work, as long as they credit you with the original creation.",
"Adapt": "it for any purpose, except commercially",
},
"by-nc-sa": {
"description": "The CC BY-NC-SA license is the second \
least accommodating license that CC offers. BY-NC-SA \
stipulates that others are free to distribute, remix, \
tweak, and build upon your work, as long as they share \
the derivative work under the same license, credit you \
with the original creation, and as long as the work \
is not used for commercial purposes.",
"Adapt": "it for any purpose, except commercially \
(must share under the same license)",
},
"by-nc-nd": {
"description": "The CC BY-NC-ND license is the \
least accommodating license that CC offers. BY-NC-ND \
stipulates that others are free to distribute your \
work, but not for commercial purposes, and that \
others may not remix, tweak, or build upon your \
work. BY-NC-ND also stipulates that others must \
credit you for the original creation.",
},
}
}
});
29 changes: 26 additions & 3 deletions src/scripts/choose-a-license.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
function set_license() {
set_license_text()
set_license_icons()
set_license_info()
}

function set_license_text() {
Expand All @@ -18,6 +19,20 @@ function set_license_text() {
set_license_link()
}

function set_license_info() {
var chooser_state = app_state.chooser
var pack = app_state.license_packs[chooser_state.selected_license_short_slugified]
chooser_state.selected_license_desc = pack["description"]

chooser_state.selected_license_adapt = pack["Adapt"]
if (!pack["Adapt"]) { // If adaptations are not allowed
document.getElementById("generated-license-adapt").style.display = "none"
}
else {
document.getElementById("generated-license-adapt").style.display = "block"
}
}

function set_license_icons() {
var state = app_state.chooser
if (state.inputs.allow_adaptations) {
Expand All @@ -41,7 +56,8 @@ function set_license_icons() {
if (state.inputs.allow_commercial_uses) {
state.icons.nc_shown = false
toggle_license_icon("nc", false)
} else {
}
else {
state.icons.nc_shown = true
toggle_license_icon("nc", true)
}
Expand All @@ -53,6 +69,7 @@ function gen_license_name() {
if (!state.inputs.allow_commercial_uses) {
license_base += "-NonCommercial"
}

if (state.inputs.allow_adaptations) {
if (state.inputs.share_alike) {
license_base += "-ShareAlike"
Expand All @@ -76,16 +93,21 @@ function gen_shortened_name(url_version = false) {
if (license.includes("NonCommercial")) {
short += "-NC"
}

if (license.includes("NoDerivatives")) {
short += "-ND"
} else if(license.includes("ShareAlike")) {
}
else if(license.includes("ShareAlike")) {
short += "-SA"
}
app_state.chooser.selected_license_short_noversion = short
app_state.chooser.selected_license_short_slugified = short.slice(3).toLowerCase()
return (url_version ? short.slice(3).toLowerCase() : short += " 4.0")
}

function set_license_link() {
const short_license = gen_shortened_name(true)
app_state.chooser.selected_license_slugified = short_license
var url = "https://creativecommons.org/licenses/{0}/4.0".format(short_license)
app_state.chooser.selected_license_link = url
}
Expand Down Expand Up @@ -158,7 +180,8 @@ function show_sa_check() {
var element = document.getElementById("sa-checkbox")
if (app_state.chooser.inputs.share_alike) {
element.checked = "true"
} else {
}
else {
element.checked = "false"
}

Expand Down
Loading