corect naming in markup, add logic for all three mark toggles

Author: possumbilities

src/index.html

@@ -819,7 +819,7 @@ <h4>Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</
     <p>{{title}} {{copyright}} by {{creator}} is {{typeAsVerb}} {{toolName}}. To view a copy of this {{type}}, visit {{toolURL}}</p>
 </template>
 
-<template id="plain-text-generic-mark" class="mark">
+<template id="plain-text-generic" class="mark">
     <p>This work is {{typeAsVerb}} {{toolName}}. To view a copy of this {{type}}, visit {{toolURL}}</p>
 </template>
 

src/scripts.js

@@ -275,8 +275,19 @@ function renderMarkingFormats(state) {
     // set contents of plain text mark
     // [T]: reverse use of <template> 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);
+
+    // determine if generic mark is toggled.
+    plainTextGenericMark = document.querySelector('#plain-text-generic-mark').checked;
+
+    if (plainTextGenericMark == true) {
+        template = document.getElementById('plain-text-generic');
+        console.log('plain text generic mark true');
+    } else {
+        template = document.getElementById('plain-text');
+        console.log('plain text generic mark false');
+    }
+
+    templateContent = template.content.cloneNode(true);
     document.querySelector('#mark-your-work .plain-text.mark').textContent = '';
 
     function parseTokens(name, value, str){
@@ -302,15 +313,6 @@ function renderMarkingFormats(state) {
     } else {
         markProps.toolName = state.props.toolShort;
     }
-
-    // determine if generic mark is toggled.
-    plainTextGenericMark = document.querySelector('#plain-text-generic-mark').checked;
-
-    if (plainTextGenericMark == true) {
-        console.log('plain text generic mark true');
-    } else {
-        console.log('plain text generic mark false');
-    }
 
     // [T]: could carve out separate sections for different mark formats here
     // only handles plain text at the moment
@@ -363,7 +365,17 @@ function renderMarkingFormats(state) {
         markProps.toolName = state.props.toolShort;
     }
 
-    let richTextMark = '<a href="' + attribution.workLink + '">' + attribution.title + '</a>' + copyright + ' by ' + '<a href="' + attribution.creatorLink + '">' + attribution.creator + '</a>' + ' is ' + typeAsVerb  + ' ' + '<a href="' + state.props.toolURL + '">' + markProps.toolName + '</a>' + ccIconSet;
+    // determine if generic mark is toggled.
+    richTextGenericMark = document.querySelector('#rich-text-generic-mark').checked;
+
+    if (richTextGenericMark == true) {
+        richTextMark = 'This work' + ' is ' + typeAsVerb  + ' ' + '<a href="' + state.props.toolURL + '">' + markProps.toolName + '</a>' + ccIconSet;
+        console.log('plain text generic mark true');
+    } else {
+        richTextMark = '<a href="' + attribution.workLink + '">' + attribution.title + '</a>' + copyright + ' by ' + '<a href="' + attribution.creatorLink + '">' + attribution.creator + '</a>' + ' is ' + typeAsVerb  + ' ' + '<a href="' + state.props.toolURL + '">' + markProps.toolName + '</a>' + ccIconSet;
+        console.log('plain text generic mark false');
+    }
+
     document.querySelector('#mark-your-work .rich-text.mark').innerHTML = richTextMark;
 
 
@@ -376,8 +388,19 @@ function renderMarkingFormats(state) {
     } else {
         markProps.toolName = state.props.toolShort;
     }
+
+    // determine if generic mark is toggled.
+    htmlGenericMark = document.querySelector('#html-generic-mark').checked;
+
+    if (htmlGenericMark == true) {
+        htmlMark = 'This work' + ' is ' + typeAsVerb  + ' ' + '<a href="' + state.props.toolURL + '">' + markProps.toolName + '</a>' + ccIconSet;
+        console.log('plain text generic mark true');
+    } else {
+        htmlMark = '<a href="' + attribution.workLink + '">' + attribution.title + '</a>' + copyright + ' by ' + '<a href="' + attribution.creatorLink + '">' + attribution.creator + '</a>' + ' is ' + typeAsVerb  + ' ' + '<a href="' + state.props.toolURL + '">' + markProps.toolName + '</a>' + ccIconSet;
+        console.log('plain text generic mark false');
+    }
+
     //defaultHTML = '<p xmlns:cc="http://creativecommons.org/ns#">This work is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0<img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt=""><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt=""><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt=""></a></p>';
-    let htmlMark = '<a href="' + attribution.workLink + '">' + attribution.title + '</a>' + copyright + ' by ' + '<a href="' + attribution.creatorLink + '">' + attribution.creator + '</a>' + ' is ' + typeAsVerb  + ' ' + '<a href="' + state.props.toolURL + '">' + markProps.toolName + '</a>' + ccIconSet;
     document.querySelector('#mark-your-work .html.mark').innerHTML = htmlMark;
 }