diff --git a/src/scripts.js b/src/scripts.js new file mode 100644 index 00000000..72259845 --- /dev/null +++ b/src/scripts.js @@ -0,0 +1,279 @@ + +// all possible State Path Routes +let rawStatePathRoutes = [ + 'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-0/waive-your-copyright+waive+read/(attribution-details)&license=cc-0', + 'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by/(attribution-details)&license=cc-by', + 'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by-sa/(attribution-details)&license=cc-by-sa', + 'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by-nd/(attribution-details)&license=cc-by-nd', + 'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by-nc/(attribution-details)&license=cc-by-nc', + 'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by-nc-sa/(attribution-details)&license=cc-by-nc-sa', + 'do-you-know-which-license-you-need/yes/which-license-do-you-need/cc-by-nc-nd/(attribution-details)&license=cc-by-nc-nd', + + 'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commercial-use/yes/allow-derivatives/yes/share-alike/no/confirmation+ownership+read+revocation/(attribution-details)&license=cc-by', + 'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commercial-use/yes/allow-derivatives/yes/share-alike/yes/confirmation+ownership+read+revocation/(attribution-details)&license=cc-by-sa', + 'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commercial-use/yes/allow-derivatives/no/confirmation+ownership+read+revocation/(attribution-details)&license=cc-by-nd', + 'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commercial-use/no/allow-derivatives/yes/share-alike/no/confirmation+ownership+read+revocation/(attribution-details)&license=cc-by-nc', + 'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commercial-use/no/allow-derivatives/yes/share-alike/yes/confirmation+ownership+read+revocation/(attribution-details)&license=cc-by-nc-sa', + 'do-you-know-which-license-you-need/no/require-attribution/yes/allow-commercial-use/no/allow-derivatives/no/confirmation+ownership+read+revocation/(attribution-details)&license=cc-by-nc-nd', + 'do-you-know-which-license-you-need/no/require-attribution/no/waive-your-copyright+waive+read/(attribution-details)&license=cc-0' +]; + +// empty state obj +let state = {}; + +// all found fieldsets +const fieldsets = document.querySelectorAll('fieldset'); + +// empty defaults obj +let applyDefaults = {}; + +// set elemnts which need defaults +// on initial page load +applyDefaults.elements = [ + '#require-attribution', + '#allow-commercial-use', + '#allow-derivatives', + '#share-alike', + '#waive-your-copyright', + '#confirmation' +]; + +// function to parse and build state.possibilities +// from rawStatePathRoutes +function setStatePossibilities(state) { + + // create state possibilities from possible licenses with adjoining statePaths + state.possibilities = []; + rawStatePathRoutes.forEach((path, index) => { + + statePath = path.split("&"); + statepath = statePath; + license = statePath[statePath.length - 1].split("="); + license = license[1]; + + regEx = /\(([^)]+)\)/g; + optionals = statePath[0].match(regEx); + + optionals.forEach ((optional) => { + + noOptionalsPath = statePath[0].replace(optional,''); + + }); + + fullPath = statePath[0].replace(/[{()}]/g, '') + '/'; + + if (state.possibilities[license] == undefined) { + state.possibilities[license] = []; + } + state.possibilities[license].push(fullPath); + state.possibilities[license].push(noOptionalsPath); + + }); +} + +// function to establish state.parts +function setStateParts(state) { + state.parts = []; + + // temp defaults + state.parts[0] = 'do-you-know-which-license-you-need/yes/'; + state.parts[1] = 'which-license-do-you-need/cc-by/'; + state.parts[8] = 'attribution-details/'; +} +// function to update state.parts +function updateStateParts(element, index, event, state) { + + state.parts[index] = element.id + '/' + event.target.value + '/'; + + // check if checkbox, with siblings + if (event.target.getAttribute('type') == 'checkbox') { + let checkboxElements = element.querySelectorAll('input[type="checkbox"]'); + let checkboxes = []; + checkboxElements.forEach((checkbox, index) => { + if (checkbox.checked) { + checkboxes[index] = checkbox.value; + } + }); + + + let joinedCheckboxes = checkboxes.filter(Boolean).join('+'); + + state.parts[index] = element.id + '+' + joinedCheckboxes + '/';; + } + + // check if text input + if (event.target.getAttribute('type') == 'text') { + + state.parts[index] = element.id + '/'; + + } + + console.log("state.parts (after change)"); + console.log(state.parts); +} + +// function to combine current tracked +// state.parts into state.current +function setStateCurrent(element, index, state) { + state.parts.forEach((element, i) => { + if (i > index) { + state.parts.splice(i); + } + }); + // [T]: also reset value to nothing each time + + state.current = state.parts.join('') //.slice(0, -1); +} + +// function to set state.props +// including setting state.props.license (if valid) +// or error +function setStateProps(state) { + + state.props = {}; + state.props.license = 'unknown'; + + // check and match possibilities + Object.keys(state.possibilities).forEach((possibility) => { + if(state.possibilities[possibility].includes(state.current)) { + state.props.license = possibility; + console.log('matched'); + } + }); + +} + +// function to render "license recommendation", +// if valid license from state.parts and/or state.current +function renderLicenseRec(state) { + document.querySelector('#license-recommendation header h3').textContent = state.props.license; +} + +// 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'); + }); + } +} + +// 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'); + + console.log("pass one"); + + } + + // 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'); + }); + + //if (state.parts[0] == 'do-you-know-which-license-you-need/no/') { + //document.querySelector('#require-attribution').classList.remove('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'); + //document.querySelector('#confirmation').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'); + + //document.querySelector('#confirmation').classList.remove('disable'); + } + + // tie SA to ND choice + if (state.parts[4] == 'allow-derivatives/no/') { + document.querySelector('#share-alike').classList.add('disable'); + } + +} + +// function to render "mark your work", from attribution fields +// if valid license from state.parts and/or state.current + +// 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) => { + + console.log("something changed!"); + updateStateParts(element, index, event, state); + + setStateCurrent(element, index, state); + console.log("state.current (after change)"); + console.log(state.current); + + setStateProps(state); + console.log("state.props (after change)"); + console.log(state.props); + + renderSteps(applyDefaults, state); + + renderLicenseRec(state); + }); + + }); +} + +// full flow logic +setStateParts(state); +console.log("state.parts (at default)"); +console.log(state.parts); + +setStatePossibilities(state); +console.log("state.possibilities"); +console.log(state.possibilities); + +setDefaults(applyDefaults); +console.log("initial defaults applied"); + +watchFieldsets(fieldsets, state); diff --git a/src/style.css b/src/style.css index 11c6fd69..42228e94 100644 --- a/src/style.css +++ b/src/style.css @@ -74,6 +74,10 @@ dd { margin-left: .2em; } +ol li:has(.disable) { + display: none; +} + .license header { display: flex;