Added optional author functionality to rule.html and library.html, as well as css

_layouts/library.html

@@ -26,7 +26,12 @@ layout: default
                   title + "</a></h2>\n";
               var structure = rules[i]["structure"];
               if (structure != null) {
-                  libHTML += "<p>" + structure + "</p>\n\n";
+                  libHTML += "<p>" + structure;
+                  var author = rules[i]["author-text"];
+                  if (author != null) {
+                      libHTML += " (" + author + ")";
+                  }
+                  libHTML += "</p>\n\n";
               }
           }
           document.getElementById("libraryList").innerHTML = libHTML;

_layouts/rule.html

@@ -32,7 +32,7 @@ layout: default
   // Toggles whether editable fields are editable or not
   // and removes editing tools.
   function toggleEditMode() {
-      if (editMode === true) {
+      if (editMode === true) { // switch to preview mode
           editMode = false;
           classDisplayAll("section","block");
           classDisplayAll("button","none");
@@ -65,15 +65,40 @@ layout: default
                   }
               }
           }
+          // Handle links
+          // TKTK
+          // Handle author link
+          var authorName = document.getElementById("author-text").value;
+          var authorURL = document.getElementById("author-url").value;
+          if (authorName != "") {
+              document.getElementById("authorship-words").style.display = "inline";
+              if (authorURL != "") { // both author and URL present                
+                  document.getElementById("authorship-result").innerHTML = "<a href='" + authorURL +"'>" + authorName + "</a>";
+                  document.getElementById("authorship-result").style.display = "inline";
+              } else { // only authorName present
+                  document.getElementById("authorship-result").innerHTML = authorName;
+                  document.getElementById("authorship-result").style.display = "inline";
+              }
+          } else {
+              document.getElementById("authorship").style.display = "none";
+          }
           // Finally, change button name
           document.getElementById("editToggle").innerHTML = "Customize";
-      } else {
+      } else { // Switch to editMode
           editMode = true;
           classDisplayAll("button","block");
           classDisplayAll("question","block");
           classDisplayAll("editable","block");
           classDisplayAll("header","block");
           classDisplayAll("section","none");
+          classDisplayAll("link-text","inline");
+          classDisplayAll("link-url","inline");
+          // link handling TKTK
+          // author handling
+          document.getElementById("authorship-result").style.display = "none";
+          document.getElementById("authorship-words").style.display = "none";
+          document.getElementById("authorship").style.display = "block";
+          // make all editable fields visible
           var editableFields = document.getElementsByClassName("editable");
           for (var i = 0; i < editableFields.length; i++) {
               editableFields[i].style.borderStyle = "none none dashed none";
@@ -144,6 +169,19 @@ layout: default
               }
           }
       }
+      // Add authorship block
+      var authorName = document.getElementById("author-text").value;
+      var authorURL = document.getElementById("author-url").value;
+      var authorshipBlock = "---\n\nCreated by ";
+      if (authorName != "") {
+          if (authorURL != "") { // both author and URL present                
+              authorshipBlock += ("[" + authorName + "](" + authorURL + ")");
+          } else { // only authorName present
+              authorshipBlock += authorName;
+          }
+          content += (authorshipBlock + "\n");
+      } 
+      // Add attribution block
       content += document.getElementById('attributionMD').innerHTML;
       // Starting here, see https://stackoverflow.com/a/33542499
       var blob = new Blob([content], {type: 'text/plain'});
@@ -185,7 +223,12 @@ layout: default
       var fields = document.getElementsByClassName("editable");
       for (var i = 0; i < fields.length; i++) {
           var key = fields[i].id;
-          var value = fields[i].innerHTML.replace(/(<([^>]+)>)/ig,"");
+          var value = "";
+          if (fields[i].nodeName == "INPUT") { // for <input>
+              value = fields[i].value.replace(/(<([^>]+)>)/ig,"");
+          } else { // for other fields
+              value = fields[i].innerHTML.replace(/(<([^>]+)>)/ig,"");
+          }
           rule[0][key] = value;
       }
       const store = new SteinStore(
@@ -211,8 +254,11 @@ layout: default
               var value = rule[key];
               if (typeof value === "undefined") {
                   value = "";
+              } else if (key.includes("-")) { // links
+                  document.getElementById(key).value = value;
+              } else {
+                  document.getElementById(key).innerHTML = value;
               }
-              document.getElementById(key).innerHTML = value;
           }
           // Publish timestamp to Rule
           document.getElementById('dateTime').innerHTML = rule['timestamp'];
@@ -425,6 +471,17 @@ layout: default
 
   </div><!--hiding section s5-->
 
+  <div id="authorship" class="linkbox">
+    <span id="authorship-words">Created by</span>
+    <input contenteditable="true" class="editable link-text" id="author-text" placeholder="Created by">
+    <span class="link-divider"><img src="{% link assets/tabler_icons/pencil.svg %}" title="Add link" /></span>
+    <input contenteditable="true" class="editable link-url" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*">
+    <span id="authorship-result"></span>
+  </div>
+  
+  </div><!--#rulebox-->
+
+  
   <div id="attribution" style="display:none;">
     <br />
     <p><a href="https://communityrule.info">
@@ -439,12 +496,9 @@ layout: default
 
 [![CommunityRule derived](https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %})](https://communityrule.info)
 
-Created with [CommunityRule](https://communityrule.info)
-
 [Creative Commons BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)</div>
   
-  </div><!--#rulebox-->
-
+  
   <button class="pushButton" id="publishRule" onclick="publishRule()"
     title="Add to the public Library">Publish</button>
   <button class="pushButton" id="toggleDisplayMode" onclick="toggleDisplayMode()"

_sass/communityrule.scss

@@ -11,7 +11,7 @@
     margin:1.5em 0 1em 0;
 }
 
-.editable { /* All editable fields */
+.editable, input.editable { /* All editable fields */
     padding: 10px 10px 10px 10px;
     min-height: 1.5em;
     font-family: serif;
@@ -76,6 +76,46 @@ These are the major functional buttons*/
     /* icons are from https://github.com/tabler/tabler-icons */
     margin: 0 5px 0 0;
 }
+/* link fields
+Enabling users to add links*/
+.linkbox {
+  position: relative;
+  display: block;
+  border: 1px solid gray;
+  background-color: white;
+  border-radius: 6px;
+  padding: 10px 0px 10px 0px;
+  margin-bottom: 15px;
+  text-align: center;
+}
+.link-text {
+    width: 40%;
+    border-top: 0px;
+    border-right: 0px;
+    border-left: 0px;
+    font-size: 1em;
+}
+.link-divider {
+    margin: 0 20px 0 20px;
+    display: inline;
+}
+.link-url {
+    border-top: 0px;
+    border-right: 0px;
+    border-left: 1px;
+    width: 40%;
+    font-size: 1em;
+}
+#authorship {
+    margin: 40px 0 0 0;
+}
+#authorship-words {
+    display: none;
+}
+#authorship-result {
+    display: none;
+}
+
 /* VARIOUS IDs */
 #rulebox {
     border: 1px solid lightgray;