Skip to content

Commit

Permalink
Merge pull request #9 from creativecommons/refactor-modal-system
Browse files Browse the repository at this point in the history 
Refactor Modal System
  • Loading branch information
Ari Madian authored Jun 19, 2019
2 parents fad694e + 17d008f commit 8c6e170
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 78 deletions.
198 changes: 193 additions & 5 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,201 @@ <h1 class="title is-1">[Some Title]</h1>

<div class="column is-one-half">
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q1')">What Are Creative Commons Licenses?</a><br>
<div id="modal-q1" class="modal">
<div class="modal-background" onclick="destroy_modal('q1')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">What Are Creative Commons Licenses?</p>
<button class="delete" aria-label="close" onclick="destroy_modal('q1')"></button>
</header>
<section class="modal-card-body">
<p>
The Creative Commons copyright licenses and tools forge a balance inside the tradional
"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. <br><br>

This helps you as a creator, because instead of having to hire a lawer to parse legalese and
create a license for you, you can save time and money, use Creative Commons licenses instead!
</p> <br>
<footer class="modal-card-foot">
<p>
For more information, please see
<a href="https://creativecommons.org/licenses/">About the Licenses</a>.
</p>
</footer>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q3')">How do the Licenses Work?</a><br>
<div id="modal-q3" class="modal">
<div class="modal-background" onclick="destroy_modal('q3')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">How do the Licenses Work?</p>
<button class="delete" aria-label="close" onclick="destroy_modal('q3')"></button>
</header>
<section class="modal-card-body">
<b>License "Layers"</b> <br>
<p>Creative Commons licenses incorporate a unique and innovative "three-layer" design.</p><br>
<ul>
<li>
<b> - Legal Code: </b>
<p>
Each license begins as a traditional legal tool, in the kind of
language and text formats that most lawyers know and love. We
call this the Legal Code layer of each license.
</p>
</li> <br>
<li>
<b> - Human Readable: </b>
<p>
Since most creators, educators, and scientists are not in fact lawyers,
we also make the licenses available in a format that normal people can read --
The Commons Deed (also known as the “human readable” version of the license).
This is a handy reference for licensors and licensees, summarizing some of the
most important terms and conditions. Think of the Commons Deed as a user-friendly
interface to the legal code beneath.
</p>
</li> <br>
<li>
<b> - Machine Readable: </b>
<p>
The final layer of the license design helps out software, from search engines
to office productivity, this software plays an enourmous role
in the creation, copying, and distribution of creative works. To help out this
software, we provide a "Machine Readable" version of the license. <br><br>

We developed a standardized way to describe licenses that software can
understand called <a href="https://wiki.creativecommons.org/Ccrel">CC Rights Expression language</a>
(CC REL) to accomplish this.
</p>
</li> <br>
</ul>
<footer class="modal-card-foot">
<p>
For more information, please see
<a href="https://creativecommons.org/licenses/">About the Licenses</a>.
</p>
</footer>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q5')">Want Public Domain Instead?</a>
<div id="modal-q5" class="modal">
<div class="modal-background" onclick="destroy_modal('q5')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Want Public Domain Instead?</p>
<button class="delete" aria-label="close" onclick="destroy_modal('q5')"></button>
</header>
<section class="modal-card-body">
<p>
Our Public Domain Tools help authors keep and manage their copyright
on terms they choose. Our public domain tools, on the other hand, enable
authors and copyright owners who want to dedicate their works to the
worldwide public domain to do so.
</p>
<footer class="modal-card-foot">
<p>
For more information on CC's public domain tools, please see
<a href="https://creativecommons.org/publicdomain/">Our Public Domain Tools</a>.
</p>
</footer>
</section>
</div>
</div>
</div>
<div class="column is-one-half">
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q2')">Considerations Before Licensing</a><br>
<div id="modal-q2" class="modal">
<div class="modal-background" onclick="destroy_modal('q2')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Considerations Before Licensing</p>
<button class="delete" aria-label="close" onclick="destroy_modal('q2')"></button>
</header>
<section class="modal-card-body">
<p>
There are a number of things you should consider before you apply
a Creative Commons license to your work, or before using Creative
Commons-licened material. <br><br>

<a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors">
Considerations for Licensors
</a> - If you are licensing your own work <br>
<a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensees">
Considerations for Licensors
</a> - If you are licensing your own work
</p> <br>
<footer class="modal-card-foot">
<p>
For more information, please see
<a href="https://wiki.creativecommons.org/wiki/Before_Licensing">
the CC wiki's page on Considerations for Licensors and Licensees.
</a>.
</p>
</footer>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q4')">How do I Formally License my Work?</a><br>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q6')">Question 6</a>
<div id="modal-q4" class="modal">
<div class="modal-background" onclick="destroy_modal('q4')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">How do I Formally License my Work?</p>
<button class="delete" aria-label="close" onclick="destroy_modal('q4')"></button>
</header>
<section class="modal-card-body">
<p>
Formally licensing your work is as easy as marking your work
as being CC licensed, along with the specific license it is under.
This mark may be in the form of a watermark, or it may be somewhere
around where your work is hosted or shared. This mark may be as
simple as a bit of text stating the license, or as complex as
embedding the license information on your website. <br><br>

If you are interested in embedding license information on your
website, please see the "Have a Website?" dropdown at the bottom
of this page for help.
</p>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q6')">[Recourse Options?]</a>
<div id="modal-q6" class="modal">
<div class="modal-background" onclick="destroy_modal('q6')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Recourse Options for License Violations</p>
<button class="delete" aria-label="close" onclick="destroy_modal('q6')"></button>
</header>
<section class="modal-card-body">
<p>
There are lots of recourse options!
</p> <br>
<ul>
<li>
<b> - Resolve the Dispute Amicably</b>
<p>
First, we encourage you to contact the alleged violator, and
resolve the dispute amicalbly. Most disagreements are solved
in this manner, and it saves everyone time and money.
</p>
</li> <br>
<li>
<b> - Litigation</b>
<p>
If you determine that the disput cannot be resolved any other
way, you would then identify the alleged violation, contact a
lawyer, and begin building a case.
</p>
</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -329,7 +517,7 @@ <h1 class="title is-2">Have a web page? Embed your license info!</h1>
This is the only modal element in the site, contents are set
based on which button spawns it. Contents and titles can be found
in src/index.js
-->
--><!-- THIS HAS BEEN DEPRECATED, KEPT FOR FUTURE REFERENCE
<div id="modal" v-bind:class="modals.modal_toggle">
<div class="modal-background" onclick="destroy_modal()"></div>
<div class="modal-card">
Expand All @@ -338,10 +526,10 @@ <h1 class="title is-2">Have a web page? Embed your license info!</h1>
<button class="delete" aria-label="close" onclick="destroy_modal()"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
<!-\- Content ... -\->
{{modals.modal_content}}
<!--Will be hidden if no more_info_link defined for the modal in src/index.js-->
<!-\-Will be hidden if no more_info_link defined for the modal in src/index.js-\->
<div id="modal-more-info">
<p>
For more information, please see
Expand All @@ -350,7 +538,7 @@ <h1 class="title is-2">Have a web page? Embed your license info!</h1>
</div>
</section>
</div>
</div>
</div>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="index.js"></script>
Expand Down
70 changes: 0 additions & 70 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,76 +2,6 @@ var app_state = new Vue({ // eslint-disable-line
el: "#chooser-app",
data: {
message: "Hello Vue!",
modal_toggle: "modal",
modals: {
modal_toggle: "modal",
modal_content: "",
modal_title: "",
more_info_url: "",
more_info_text: "",
modal_packs: {
"allow_adaptations": {
"title": "Allowing Adaptations",
"content": "Test 1",
"more_info_url": "",
"more_info_text": ""
},
"allow_commercial": {
"title": "Allowing Commercial Use",
"content": "",
"more_info_url": "",
"more_info_text": ""
},
"selected_license": {
"title": "Selected License",
"content": "",
"more_info_url": "",
"more_info_text": ""
},
"have_a_webpage": {
"title": "",
"content": "",
"more_info_url": "",
"more_info_text": ""
},
"q1": {
"title": "What Are Creative Commons Licenses?",
"content": "",
"more_info_url": "google.com",
"more_info_text": "text"
},
"q2": {
"title": "Considerations Before Licensing",
"content": "",
"more_info_url": "",
"more_info_text": ""
},
"q3": {
"title": "How do the Licenses Work?",
"content": "",
"more_info_url": "",
"more_info_text": ""
},
"q4": {
"title": "How do I Formally License my Work?",
"content": "",
"more_info_url": "",
"more_info_text": ""
},
"q5": {
"title": "Want Public Domain Instead?",
"content": "",
"more_info_url": "",
"more_info_text": ""
},
"q6": {
"title": "",
"content": "",
"more_info_url": "",
"more_info_text": ""
}
}
},
chooser: {
selected_license: "[License Name]",
inputs: {
Expand Down
Loading

0 comments on commit 8c6e170

Please sign in to comment.