since it has limits on tokenization capacity, even if
+ // it allows more dev readability.
+ let template = document.getElementById('plain-text');
+ let templateContent = template.content.cloneNode(true);
+ document.querySelector('#mark-your-work .plain-text.mark').textContent = '';
+
+ function parseTokens(name, value, str){
+ return str.replaceAll("{{"+name+"}}", value);
+ }
+
+ let markProps = {};
+ markProps.title = attribution.title;
+ markProps.year = attribution.workCreationYear;
+ markProps.creator = attribution.creator;
+ markProps.type = type;
+ markProps.typeAsVerb = typeAsVerb;
+ markProps.toolShort = state.props.toolShort;
+ markProps.toolLong = state.props.toolLong;
+ markProps.toolURL = state.props.toolURL;
+ markProps.copyright = copyright;
+
+ // set contents of plain text mark
+ plainTextFullName = document.querySelector('#plain-text-full-name').checked;
+
+ if (plainTextFullName == true) {
+ markProps.toolName = state.props.toolLong;
+
+ } else {
+ markProps.toolName = state.props.toolShort;
+ }
+
+ // [T]: could carve out separate sections for different mark formats here
+ // only handles plain text at the moment
+ for (const [key, value] of Object.entries(markProps)) {
+ templateContent.textContent = parseTokens(key, value, templateContent.textContent);
+ }
+ document.querySelector('#mark-your-work .plain-text.mark').appendChild(templateContent);
+
+ // set contents of rich text mark
+ let ccSVG = '
';
+ let bySVG = '
';
+ let saSVG = '
';
+ let ncSVG = '
';
+ let ndSVG = '
';
+ let zeroSVG = '
';
+
+ const currentTool = state.props.tool;
+ switch (currentTool) {
+ case 'cc-0':
+ ccIconSet = ccSVG + zeroSVG;
+ break;
+ case 'cc-by':
+ ccIconSet = ccSVG + bySVG;
+ break;
+ case 'cc-by-sa':
+ ccIconSet = ccSVG + bySVG + saSVG;
+ break;
+ case 'cc-by-nd':
+ ccIconSet = ccSVG + bySVG + ndSVG;
+ break;
+ case 'cc-by-nc':
+ ccIconSet = ccSVG + bySVG + ncSVG;
+ break;
+ case 'cc-by-nc-sa':
+ ccIconSet = ccSVG + bySVG + ncSVG + saSVG;
+ break;
+ case 'cc-by-nc-nd':
+ ccIconSet = ccSVG + bySVG + ncSVG + ndSVG;
+ break;
+ default:
+ currentTool = '';
+ }
+
+ richTextFullName = document.querySelector('#rich-text-full-name').checked;
+
+ if (richTextFullName == true) {
+ markProps.toolName = state.props.toolLong;
+
+ } else {
+ markProps.toolName = state.props.toolShort;
+ }
+
+ let richTextMark = '' + attribution.title + '' + copyright + ' by ' + '' + attribution.creator + '' + ' is ' + typeAsVerb + ' ' + '' + markProps.toolName + '' + ccIconSet;
+ document.querySelector('#mark-your-work .rich-text.mark').innerHTML = richTextMark;
+
+
+ // set contents of HTML mark
+ htmlFullName = document.querySelector('#html-full-name').checked;
+
+ if (htmlFullName == true) {
+ markProps.toolName = state.props.toolLong;
+
+ } else {
+ markProps.toolName = state.props.toolShort;
+ }
+ //defaultHTML = 'This work is licensed under CC BY-SA 4.0
';
+ let htmlMark = '' + attribution.title + '' + copyright + ' by ' + '' + attribution.creator + '' + ' is ' + typeAsVerb + ' ' + '' + markProps.toolName + '' + ccIconSet;
+ document.querySelector('#mark-your-work .html.mark').innerHTML = htmlMark;
+}
+
+
+// function to replace placeholders with values
+// for mark format constriction
+// lots of TODOs here (just for testing)
+// can use this to build out string replacement when
+// swapping in html from a element
+// this will enable, controlling the markup, in markup
+// and then JS is only having to do logic replacement
+// of the token placeholders, rather than storing strings
+// within the JS unnecessarily.
+
+
+// function parseTokens(name, value, str){
+// return str.replaceAll("{{"+name+"}}", value);
+// }
+
+// const mark = 'test {{title}} {{year}} by {{author}}';
+
+// parsedMark = parseTokens("year", "2025", mark);
+// parsedMark = parseTokens("title", "cool work", parsedMark);
+// parsedMark = parseTokens("author", "jane mayer", parsedMark);
+// console.log(parsedMark);
+
+
+
+// function to render "empty area"
+// if no valid tool from state.parts and/or state/current
+function renderEmptyPlaceholder(state) {
+
+ if (state.props.tool == 'unknown' ) {
+ document.querySelector('#empty').classList.remove('disable');
+ }
+
+ else if (state.props.tool != 'unknown') {
+ document.querySelector('#empty').classList.add('disable');
+ }
+
+}
+
+// function to render "mark your work",
+// if valid tool from state.parts and/or state.current
+// if attribution details input(s) filled out
+function renderMarkYourWork(state) {
+ if (state.props.tool != 'unknown' ) {
+ // load attribution details template,
+ // populate from attribution text values
+ document.querySelector('#mark-your-work').classList.remove('disable');
+
+ renderMarkingFormats(state);
+
+ }
+
+ else if (state.props.tool == 'unknown') {
+ document.querySelector('#mark-your-work').classList.add('disable');
+ }
+
+}
+
+// function to set default UX states on Steps
+// set default visibly disabled pathways
+
+function setDefaults(applyDefaults) {
+
+ applyDefaults.elements.forEach((element) => {
+ document.querySelector(element).classList.toggle('disable');
+ });
+
+ if (state.parts[0] == 'do-you-know-which-license-you-need/yes/' ) {
+ applyDefaults.elements.forEach((element) => {
+ document.querySelector(element).classList.add('disable');
+ });
+ }
+
+ document.querySelector('#tool-recommendation').classList.add('disable');
+ document.querySelector('#mark-your-work').classList.add('disable');
+ document.querySelector('#tool-rec-details').classList.add('hide');
+}
+
+// stepper logic here for what parts of form are
+// displayed/hidden, as state.parts and state.current
+// are updated
+function renderSteps(applyDefaults, state) {
+
+ // check if visitor needs help, start help pathways
+ if (state.current == 'do-you-know-which-license-you-need/no/' ) {
+
+ applyDefaults.elements.forEach((element) => {
+ document.querySelector(element).classList.remove('disable');
+ });
+ document.querySelector('#which-license-do-you-need').classList.toggle('disable');
+ document.querySelector('#waive-your-copyright').classList.add('disable');
+
+ }
+
+ // if visitor doesn't need help
+ if (state.current == 'do-you-know-which-license-you-need/yes/' ) {
+
+ applyDefaults.elements.forEach((element) => {
+ document.querySelector(element).classList.add('disable');
+ });
+ document.querySelector('#which-license-do-you-need').classList.toggle('disable');
+ document.querySelector('#waive-your-copyright').classList.add('disable');
+
+ }
+
+ // check if cc0
+ if (state.parts[2] == 'require-attribution/no/' || state.parts[1] == 'which-license-do-you-need/cc-0/' ) {
+
+ applyDefaults.elements.forEach((element) => {
+ document.querySelector(element).classList.add('disable');
+ });
+
+ document.querySelector('#waive-your-copyright').classList.remove('disable');
+
+ } else {
+ document.querySelector('#waive-your-copyright').classList.add('disable');
+ }
+ if (state.parts[2] == 'require-attribution/no/') {
+ document.querySelector('#require-attribution').classList.remove('disable');
+ }
+
+ // walk away from cc-0, reset attribution choice point
+ if (state.parts[2] == 'require-attribution/yes/') {
+ applyDefaults.elements.forEach((element) => {
+ document.querySelector(element).classList.remove('disable');
+ });
+ document.querySelector('#require-attribution').classList.remove('disable');
+ document.querySelector('#waive-your-copyright').classList.add('disable');
+ }
+
+ // tie SA to ND choice
+ if (state.parts[4] == 'allow-derivatives/no/') {
+ document.querySelector('#share-alike').classList.add('disable');
+ }
+
+}
+
+// [T]: function to handle error state
+
+// function to watch for fieldset changes
+function watchFieldsets(fieldsets, state) {
+ fieldsets.forEach((element, index) => {
+
+ // [T]: set defaults here first in state.parts dynamically
+
+ element.addEventListener("change", (event) => {
+
+ updateStateParts(element, index, event, state);
+
+ setStateCurrent(element, index, state);
+
+ setStateProps(index, state);
+
+ // [T]: also reset values beyond current changed fieldset to nothing each time
+ clearStepsAfterCursor(fieldsets, state);
+
+ renderSteps(applyDefaults, state);
+
+ renderEmptyPlaceholder(state);
+
+ renderToolRec(state);
+
+ renderMarkYourWork(state);
+
+ });
+
+ });
+}
+
+function watchAttributionDetails(fieldsets, state) {
+
+ let textFields = fieldsets[8].querySelectorAll('input');
+
+ textFields.forEach((element, index) => {
+
+ element.addEventListener("keyup", (event) => {
+ renderMarkingFormats(state);
+ });
+
+ });
+}
+
+function watchMarkToggles(toggles, state) {
+
+ toggles.forEach((element, index) => {
+
+ element.addEventListener("click", (event) => {
+ renderMarkingFormats(state);
+ });
+
+ });
+}
+
+function watchMarkCopiers(copiers, state) {
+
+ function copyToClipboard (text) {
+ let temp = document.createElement("textarea");
+ document.body.appendChild(temp);
+ temp.value = text;
+ temp.select();
+ document.execCommand("copy");
+ document.body.removeChild(temp);
+ }
+
+ copiers.forEach((element, index) => {
+
+ element.addEventListener("click", (event) => {
+
+ if (element.parentNode.parentNode.querySelector('.mark').value != null) {
+ copyToClipboard(element.parentNode.parentNode.querySelector('.mark').value);
+ } else {
+ copyToClipboard(element.parentNode.parentNode.querySelector('.mark').innerHTML);
+ }
+ });
+
+ });
+}
+
+document.addEventListener("DOMContentLoaded", (event) => {
+ // full flow logic
+ setStateParts(state);
+
+ setStatePossibilities(state);
+
+ setDefaults(applyDefaults);
+
+ setStateProps(0, state);
+
+ watchFieldsets(fieldsets, state);
+ watchAttributionDetails(fieldsets, state);
+ watchMarkToggles(toggles, state);
+ watchMarkCopiers(copiers, state);
+});
+
+// rough panel expansion test
+// let expandButtons = document.querySelectorAll('button.expandPanel');
+
+// expandButtons.forEach((element, index) => {
+// element.addEventListener("click", (event) => {
+
+// parent = event.target.parentNode.parentNode;
+// parent.querySelector('.panel').classList.toggle('expand');
+
+// });
+// });
diff --git a/docs/wp-content/themes/vocabulary-theme/style.css b/docs/wp-content/themes/vocabulary-theme/style.css
index 63b2d987afe..4c5b0f0e1e3 100644
--- a/docs/wp-content/themes/vocabulary-theme/style.css
+++ b/docs/wp-content/themes/vocabulary-theme/style.css
@@ -3,7 +3,7 @@ Theme Name: CC Vocabulary Theme
Author: the Creative Commons team; possumbilities, Timid Robot
Author URI: https://opensource.creativecommons.org/
Description: Theme based on the Vocabulary Design System
-Version: 1.10
+Version: 1.11.1
Requires at least: 5.0
Tested up to: 6.2.2
Requires PHP: 7.0
@@ -12,6 +12,7 @@ License URI: https://github.com/creativecommons/vocabulary-theme/blob/main/LICEN
*/
@import 'vocabulary/css/vocabulary.css' layer(vocabulary);
+@import 'chooser/css/chooser.css' layer(chooser);
/* WordPress specific rules */
@@ -916,6 +917,10 @@ main .content ul, main .content ol {
line-height: 150%;
}
+.chooser-page main .content ul, .chooser-page main .content ol {
+ line-height: 100%;
+}
+
/* Classic Editor TinyMCE WYSIWYG editor image alignment */
/* TODO: port in alignleft and alignright rules here as well? */
main figure:has(img.aligncenter) {