+ --> diff --git a/src/index.js b/src/index.js index 5a54b6b5e..ff24038e2 100644 --- a/src/index.js +++ b/src/index.js @@ -74,6 +74,14 @@ var app_state = new Vue({ // eslint-disable-line }, chooser: { selected_license: "[License Name]", + selected_license_short: "[License Short]", + selected_license_link: "", + icons: { + nc_shown: false, + sa_shown: false, + nd_shown: false, + nd_sa_src: "cc-sa_icon.svg", + }, inputs: { share_alike: false, allow_adaptations: true, diff --git a/src/scripts/choose-a-license.js b/src/scripts/choose-a-license.js index e69de29bb..fe1bed453 100644 --- a/src/scripts/choose-a-license.js +++ b/src/scripts/choose-a-license.js @@ -0,0 +1,166 @@ +function set_license() { + set_license_text() + set_license_icons() +} + +function set_license_text() { + /* + var state = app_state.chooser + if (state.inputs.allow_adaptations == null && + state.inputs.allow_commercial_uses == null) { + state.selected_license = "To Choose a License, Please Make Some Selections Using the Controls to the Left." + } else if (state.inputs.allow_adaptations == null && + state.inputs.allow_commercial_uses != null) { + state.selected_license = "Please Select Whether or not to Allow Adaptations of Your Work." + }*/ + app_state.chooser.selected_license = gen_license_name() + app_state.chooser.selected_license_short = gen_shortened_name() + set_license_link() +} + +function set_license_icons() { + var state = app_state.chooser + if (state.inputs.allow_adaptations) { + state.icons.nd_shown = false + state.icons.sa_shown = false + toggle_license_icon("nd-sa", false) + if (state.inputs.share_alike) { + state.icons.sa_shown = true + state.icons.nd_shown = false + state.icons.nd_sa_src = "cc-sa_icon.svg" + toggle_license_icon("nd-sa", true) + } + } + else if (!state.inputs.allow_adaptations) { + state.icons.nd_shown = true + state.icons.sa_shown = false + state.icons.nd_sa_src = "cc-nd_icon.svg" + toggle_license_icon("nd-sa", true) + } + + if (state.inputs.allow_commercial_uses) { + state.icons.nc_shown = false + toggle_license_icon("nc", false) + } else { + state.icons.nc_shown = true + toggle_license_icon("nc", true) + } +} + +function gen_license_name() { + var state = app_state.chooser + var license_base = "Atribution" + if (!state.inputs.allow_commercial_uses) { + license_base += "-NonCommercial" + } + if (state.inputs.allow_adaptations) { + if (state.inputs.share_alike) { + license_base += "-ShareAlike" + } + } + else if (!state.inputs.allow_adaptations) { + license_base += "-NoDerivatives" + } + license_base += " 4.0 International" + app_state.chooser.selected_license = license_base + return license_base +} + +/** + * + * @param {boolean} url_version If the shortened name need to be slugified for a URL + */ +function gen_shortened_name(url_version = false) { + const license = app_state.chooser.selected_license + var short = "CC BY" + if (license.includes("NonCommercial")) { + short += "-NC" + } + if (license.includes("NoDerivatives")) { + short += "-ND" + } else if(license.includes("ShareAlike")) { + short += "-SA" + } + return (url_version ? short.slice(3).toLowerCase() : short += " 4.0") +} + +function set_license_link() { + const short_license = gen_shortened_name(true) + var url = "https://creativecommons.org/licenses/{0}/4.0".format(short_license) + app_state.chooser.selected_license_link = url +} + +/** + * + * @param {object} check The HTML SA Checkbox object + */ +function sa_check_callback(check) { + console.log("Checkbox Toggled") + app_state.chooser.inputs.share_alike = check.checked + set_license() +} + +/** + * + * @param {object} cb The HTML switch object + */ +function switch_callback(cb) { + console.log("Switch Toggled - " + cb.id) + var state = app_state.chooser.inputs + 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) + state.allow_adaptations = true + show_sa_check() + set_license() + } + else { // If NOT allow adaptations + state.allow_adaptations = false + hide_sa_check() + } + break; + case "allow-commercial-switch": + state.allow_commercial_uses = cb.checked + break; + default: + console.log("Whoops! This function isn't designed to handle that parameter.") + break; + } + set_license() +} + +function toggle_license_icon(icon, is_show) { + switch (icon) { + case "nd-sa": + if (!is_show) document.getElementById("adaptations-icon").style.display = "none" + else document.getElementById("adaptations-icon").style.display = "inline" + break; + case "nc": + if (!is_show) document.getElementById("commercial-icon").style.display = "none" + else document.getElementById("commercial-icon").style.display = "inline" + break; + default: + console.log("Whoops! This function isn't designed to handle that parameter.") + break; + } +} + +function hide_sa_check() { + console.log("SA Hidden") + document.getElementById("sa-checkbox").style.display = "none" +} + +function show_sa_check() { + console.log("SA Shown") + var element = document.getElementById("sa-checkbox") + if (app_state.chooser.inputs.share_alike) { + element.checked = "true" + } else { + element.checked = "false" + } + + element.style.display = "block" +} \ No newline at end of file diff --git a/src/scripts/page-controls.js b/src/scripts/page-controls.js index f97513706..ec624aeef 100644 --- a/src/scripts/page-controls.js +++ b/src/scripts/page-controls.js @@ -1,3 +1,5 @@ +import set_license from "../scripts/choose-a-license.js" + function spawn_modal(modal_id) { app_state.modals.modal_content = app_state.modals.modal_packs[modal_id].content // Update modal content app_state.modals.modal_title = app_state.modals.modal_packs[modal_id].title // Update modal title @@ -18,6 +20,11 @@ function destroy_modal() { app_state.modals.modal_toggle = "modal" } +function on_page_load() { + set_license() + document.getElementById('sa-checkbox').checked = app_state.chooser.inputs.share_alike +} + function copy_text_to_clipboard() { } \ No newline at end of file diff --git a/src/scripts/scripts.js b/src/scripts/scripts.js index e69de29bb..15219ed3c 100644 --- a/src/scripts/scripts.js +++ b/src/scripts/scripts.js @@ -0,0 +1,7 @@ +String.prototype.format = function() { + a = this; + for (k in arguments) { + a = a.replace("{" + k + "}", arguments[k]) + } + return a +} \ No newline at end of file diff --git a/src/styles/styles.css b/src/styles/styles.css index a9a20b51a..46b2d16d0 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -23,33 +23,6 @@ display: inline; } -/* The next three classes were copied from w3schools */ -/* Style the button that is used to open and close the collapsible content */ -.collapsible { - background-color: #eee; - color: #444; - cursor: pointer; - padding: 18px; - width: 100%; - border: none; - text-align: left; - outline: none; - font-size: 15px; -} - -/* 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) */ -.active, .collapsible:hover { -background-color: #ccc; -} - -/* Style the collapsible content. Note: hidden by default */ -.content { -padding: 0 18px; -display: none; -overflow: hidden; -background-color: #f1f1f1; -} - a.modal-icon { vertical-align: middle; display: inline; @@ -57,6 +30,8 @@ a.modal-icon { img.chooser-license-icon { width: 15%; + margin-right: 1.4%; + display: inline; } a.generator-copy-button { @@ -78,4 +53,15 @@ h2 { h3 { text-align: center; -} \ No newline at end of file +} +/* +input[type="checkbox"] { + background: #ef9421; + text-align: center; +} + +input[type="checkbox"]:checked { + background: #ef9421; + content: "\2713"; + text-align: center; +}*/ \ No newline at end of file