Added rule lineage derivation breadcrumbs

_layouts/rule.html

@@ -370,6 +370,9 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           document.getElementById("trash").style.display = "none";
           displayMode = false;
       }
+      if (document.getElementById("lineage-list").innerHTML != "") {
+          document.getElementById("lineage").style.display = "block";
+      }
   }
 
   // textOutput()
@@ -462,7 +465,7 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
       var dateTime = now.getUTCFullYear()+'.'+(now.getUTCMonth()+1)+'.'+now.getUTCDate()
           +' '+now.getUTCHours()+":"+ now.getUTCMinutes()+":"+now.getUTCSeconds()
           + ' UTC';
-      // TKTK: Check if ruleID exists; while yes, replace and repeat
+      // Check if ruleID exists; while yes, replace and repeat
       var rule = [{
           ruleID: timeID,
           timestamp: dateTime,
@@ -486,6 +489,11 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           }
           rule[0][key] = value;
       }
+      // add to lineage (if it is a fork)
+      if (rID) {
+          rule[0]["lineage"] = document.getElementById("lineage-list").innerHTML;
+      }
+      // add to database
       const store = new SteinStore(
           "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
       );
@@ -494,6 +502,24 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
       });
   }
 
+  // addLineage
+  // Adds the current page to the lineage
+  function addLineage() {
+      var communityname = document.getElementById("communityname").innerHTML;
+      var newLineage = " < " + '<a href="/create/?r=' + rID + '">'
+          + communityname + '</a>';
+      var oldLineage = document.getElementById("lineage-list").innerHTML;
+      document.getElementById("lineage-list").innerHTML = newLineage + oldLineage;
+  }
+
+  // fork()
+  // Forks the current Rule and updates the derivation lineage
+  function fork() {
+      document.getElementById("lineage").style.display = "block";
+      addLineage();
+      toggleDisplayMode();
+  }
+  
   // displayRule(ID)
   // Displays content based on ID
   function displayRule(ID) {
@@ -530,6 +556,14 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           }
           // Add Builder content
           document.getElementById("module-input").innerHTML = rule["modules"];
+          // Add lineage
+          var lineage = rule["lineage"];
+          if (typeof lineage === "undefined") {
+              document.getElementById("lineage-list").innerHTML = "";
+          } else {
+              document.getElementById("lineage-list").innerHTML = lineage;
+              document.getElementById("lineage").display = "block";
+          }
           // Publish timestamp to Rule
           document.getElementById('dateTime').innerHTML = rule['timestamp'];
           // Finish
@@ -657,7 +691,7 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
         {% endif %}
         {% endfor %}
       </div>
-    </div>  
+    </div>
   </div>
   <!-- END RuleBuilder -->
 
@@ -674,36 +708,42 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
     <span id="authorship-result"></span>
   </div>
   
-  </div><!--#rulebox-->
- 
-  <div id="attribution" style="display:none;">
-    <br />
-    <p><a href="https://communityrule.info">
-        <img src="https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %}" alt="CommunityRule derived"></a></p>
-    <p id="dateTime"></p>
-    <p>Created with <a href="https://communityrule.info">CommunityRule</a><br />
-      <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons BY-SA</a></p>
-    <p><strong>The Publish feature is experimental. Rules may be removed without notice</strong></p>
-  </div>
-  <div id="attributionMD" style="display:none;">
----
+</div><!--#rulebox-->
+
+<div id="lineage">
+  <img src="{% link assets/tabler_icons/file.svg %}" title="Derivation lineage" />
+  <span id="lineage-list"></span>
+</div>
+
+
+<button class="pushButton" id="publishRule" onclick="publishRule()"
+        title="Add to the public Library">Publish</button>
+<button class="pushButton" id="toggleDisplayMode" onclick="fork()"
+        title="Edit this Rule into a new one">Fork</button>
+<button class="pushButton" onclick="textOutput()"
+        title="Download this Rule as a Markdown text file">Export</button>
+<button class="pushButton" id="trash" onclick="deleteRule()">
+  <img src="{% link assets/tabler_icons/trash.svg %}" title="Rule deletion request" />
+</button>
+<button class="pushButton"
+        onclick="javascript:location.href='https://www.colorado.edu/lab/medlab/content/communityrule-user-feedback'">
+  Feedback
+</button>
+
+<div id="attribution" style="display:none;">
+  <br />
+  <p><a href="https://communityrule.info">
+      <img src="https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %}" alt="CommunityRule derived"></a></p>
+  <p id="dateTime"></p>
+  <p>Created with <a href="https://communityrule.info">CommunityRule</a>,
+    <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons BY-SA</a></p>
+  <p><strong>The Publish feature is experimental. Rules may be removed without notice</strong></p>
+</div>
+<div id="attributionMD" style="display:none;">---
 
 [![CommunityRule derived](https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %})](https://communityrule.info)
 
 [Creative Commons BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)</div>
-  
-  <button class="pushButton" id="publishRule" onclick="publishRule()"
-    title="Add to the public Library">Publish</button>
-  <button class="pushButton" id="toggleDisplayMode" onclick="toggleDisplayMode()"
-    title="Edit this Rule into a new one">Fork</button>
-  <button class="pushButton" onclick="textOutput()"
-    title="Download this Rule as a Markdown text file">Export</button>
-  <button class="pushButton" id="trash" onclick="deleteRule()">
-    <img src="{% link assets/tabler_icons/trash.svg %}" title="Rule deletion request" />
-  </button>
-  <button class="pushButton"
-          onclick="javascript:location.href='https://www.colorado.edu/lab/medlab/content/communityrule-user-feedback'">
-    Feedback
-  </button>
+
 
 </article>

_sass/communityrule.scss

@@ -258,7 +258,11 @@ Enabling users to add links*/
     display: none;
 }
 #publishRule {
-  margin: 0 0 10px 0;
+    margin: 0 0 10px 0;
+}
+#lineage {
+    margin: 0 0 20px 0;
+    display: none;
 }
 #attribution {
     font-family: serif;