Created markdown export button

_layouts/rule.html

@@ -42,6 +42,15 @@ layout: default
 .button:hover .tooltiptext {
     visibility: visible;
   }
+.pushButton {
+  border: 1px solid gray;
+  color: gray;
+  background-color: white;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  font-size: 1.2em;
+}
 .icons {
     /* icons are from https://github.com/tabler/tabler-icons */
     margin: 0 5px 0 0;
@@ -61,28 +70,18 @@ layout: default
 #editToggle {
   float: right;
   clear: both;
-  border: 1px solid gray;
-  color: gray;
-  background-color: white;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  font-size: 1.2em;
 }
 #toggleDisplayMode {
-  clear: both;
-  border: 1px solid gray;
-  color: gray;
-  background-color: white;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  font-size: 1.2em;
   margin: 0 0 10px 0;
 }
 #basicstructure {
   font-size: 1.3em;
 }
+#attribution {
+    font-family: serif;
+    font-size: .8em;
+    text-align: right;
+}
 </style>
 
 <script>
@@ -148,6 +147,7 @@ layout: default
           classDisplayAll("post-header","none");
           classDisplayAll("explanatory","none");
           classDisplayAll("site-footer","none");
+          document.getElementById("attribution").style.display = "block";
           document.getElementById("toggleDisplayMode").innerHTML = "Edit";
           displayMode = true;
       } else {
@@ -156,10 +156,44 @@ layout: default
           classDisplayAll("post-header","block");
           classDisplayAll("explanatory","block");
           classDisplayAll("site-footer","block");
+          document.getElementById("attribution").style.display = "none";
           document.getElementById("toggleDisplayMode").innerHTML = "Display";
           displayMode = false;
       }
   }
+
+  function textOutput() {
+      var filename = 'CommunityRule.txt';
+      var content = '# CommunityRule: ' + document.getElementById('name').innerHTML + '\n\n';
+      var elements = document.getElementsByClassName('output');
+      for (var i = 1; i < elements.length; i++) {
+          if (elements[i].innerHTML != '') {
+              if (elements[i].classList.contains("subhead")) {
+                  content += '## ';
+              }
+              content += elements[i].innerHTML + '\n\n';
+          }
+      }
+      content += '---\n\nCreated with [CommunityRule](http://communityrule.info) under a [Creative Commons Attribution-ShareAlike license](http://creativecommons.org/licenses/by-sa/4.0/).';
+      content = content.replace(/(<([^>]+)>)/ig,''); // strips stray tags
+      // Starting here, see https://stackoverflow.com/a/33542499
+      var blob = new Blob([content], {type: 'text/plain'});
+      if(window.navigator.msSaveOrOpenBlob) {
+          window.navigator.msSaveBlob(blob, filename);
+      }
+      else{
+          var elem = window.document.createElement('a');
+          elem.href = window.URL.createObjectURL(blob);
+          elem.download = filename;
+          document.body.appendChild(elem);
+          elem.click();
+          document.body.removeChild(elem);
+          URL.revokeObjectURL();
+      }
+      var myFile = new Blob([fileContent], {type: 'text/plain'});
+      window.URL = window.URL || window.webkitURL; document.getElementById('download').setAttribute('href',window.URL.createObjectURL(myFile));
+      document.getElementById('download').setAttribute('download', fileName);
+  }
   
 </script>
 
@@ -171,7 +205,8 @@ layout: default
     </h1>
 
 
-  <button id="editToggle" onclick="toggleEditMode()">Preview</button>
+    <button class="pushButton" id="editToggle" onclick="toggleEditMode()">
+      Preview</button>
 
   <div class="post-content">    
     {{ content }}
@@ -183,12 +218,12 @@ layout: default
 
   <span class="question">What is the community’s name?</span>
 
-  <h1 contenteditable="true" class="editable" id="name">{{ page.community-name }}</h1>
+  <h1 contenteditable="true" class="editable output" id="name">{{ page.community-name }}</h1>
 
   <h2 id="basics">
     <img src="{% link assets/tabler_icons/info-circle.svg %}"
          class="icons" />
-    Basics
+    <span class="subhead output">Basics</span>
     <button onclick="toggleVisible('s1')" class="button"> + </button>
   </h2>
   <div class="section" id="s1" style="display:none">
@@ -197,46 +232,46 @@ layout: default
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/federation/">federation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/friendship/">friendship</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/membership/">membership</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/multicameralism/">multicameralism</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ritual/">ritual</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/separation_of_powers/">separation of powers</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/stake_weight/">stake weight</a></span>
     </div>
-    <p contenteditable="true" class="editable" id="basicstructure">{{ page.structure }}</p>
+    <p contenteditable="true" class="editable output" id="basicstructure">{{ page.structure }}</p>
 
     <span class="question">What is the community’s mission?</span>
-    <p contenteditable="true" class="editable">{{ page.mission }}</p>
+    <p contenteditable="true" class="editable output">{{ page.mission }}</p>
 
     <span class="question">What core values does it hold?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/solidarity/">solidarity</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/transparency/">transparency</a></span>
     </div>
-    <p contenteditable="true" class="editable">{{ page.values }}</p>
+    <p contenteditable="true" class="editable output">{{ page.values }}</p>
   
     <span class="question">What are the basic rights that this Rule guarantees?</span>
-    <p contenteditable="true" class="editable">{{ page.rights }}</p>
+    <p contenteditable="true" class="editable output">{{ page.rights }}</p>
 
   </div><!--hiding section s1-->
 
   <h2 id="participants">
     <img src="{% link assets/tabler_icons/user.svg %}"
          class="icons" />
-    Participants
+    <span class="subhead output">Participants</span>
     <button onclick="toggleVisible('s2')" class="button"> + </button>
   </h2>
   <div class="section" id="s2" style="display:none">
 
     <span class="question">How does someone become a member?</span>
-    <p contenteditable="true" class="editable">{{ page.membership }}</p>
+    <p contenteditable="true" class="editable output">{{ page.membership }}</p>
   
     <span class="question">How are members suspended or removed?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/friendship/">friendship</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/reputation/">reputation</a></span>
     </div>
   
-    <p contenteditable="true" class="editable">{{ page.removal }}</p>
+    <p contenteditable="true" class="editable output">{{ page.removal }}</p>
 
   </div><!--hiding section s2-->
   
   <h2 id="policies">
     <img src="{% link assets/tabler_icons/news.svg %}"
          class="icons" />
-    Policies
+    <span class="subhead output">Policies</span>
     <button onclick="toggleVisible('s3')" class="button"> + </button>
   </h2>
   <div class="section" id="s3" style="display:none">
@@ -245,55 +280,62 @@ layout: default
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/holographic_consensus/">holographic consensus</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/referendum/">referendum</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a></span>
     </div>
-    <p contenteditable="true" class="editable">{{ page.decision }}</p>
+    <p contenteditable="true" class="editable output">{{ page.decision }}</p>
   
     <span class="question">Where do community members deliberate about potential policies?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/caucus/">caucus</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/coalition/">coalition</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/debate/">debate</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lobbying/">lobbying</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/recess/">recess</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/transparency/">transparency</a></span>
     </div>
-    <p contenteditable="true" class="editable">{{ page.deliberation }}</p>
+    <p contenteditable="true" class="editable output">{{ page.deliberation }}</p>
 
     <span class="question">How are policies implemented?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lazy_consensus/">lazy consensus</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/restorative_justice/">restorative justice</a></span>
     </div>
-    <p contenteditable="true" class="editable">{{ page.implementation }}</p>
+    <p contenteditable="true" class="editable output">{{ page.implementation }}</p>
   
     <span class="question">Who oversees the implementation of policies?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/judiciary/">jury</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/precedent/">precedent</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/refusal/">refusal</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/rough_consensus/">rough consensus</a></span>
     </div>
-    <p contenteditable="true" class="editable">{{ page.oversight }}</p>
+    <p contenteditable="true" class="editable output">{{ page.oversight }}</p>
   
     <span class="question">What limits are there on member roles and policies?</span>
     <div class="button">Modules
       <span class="tooltiptext"><a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/fact_finding/">fact-finding</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ranked_choice/">ranked choice</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/reputation/">reputation</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a>, <a target="_blank" href="https://medlabboulder.gitlab.io/democraticmediums/mediums/term_limit/">term limits</a></span>
   </div>
   
-  <p contenteditable="true" class="editable">{{ page.limits }}</p>
+  <p contenteditable="true" class="editable output">{{ page.limits }}</p>
 
   </div><!--hiding section s3-->
   
   <h2 id="evolution">
     <img src="{% link assets/tabler_icons/adjustments.svg %}"
          class="icons" />
-    Evolution
+    <span class="subhead output">Evolution</span>
     <button onclick="toggleVisible('s4')" class="button"> + </button>
   </h2>
   <div class="section" id="s4" style="display:none">
 
     <span class="question">Where do we maintain our policies and records?</span>
-    <p contenteditable="true" class="editable">{{ page.records }}</p>
+    <p contenteditable="true" class="editable output">{{ page.records }}</p>
 
     <span class="question">How can this Rule be modified?</span>
-    <p contenteditable="true" class="editable">{{ page.modification }}</p>
+    <p contenteditable="true" class="editable output">{{ page.modification }}</p>
 
   </div><!--hiding section s4-->
+
+  <div id="attribution" style="display:none;">
+    <br />
+    <p>Created with <a href="http://communityrule.info">CommunityRule</a><br />
+        <a href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons BY-SA</a></p>
+  </div>
   
   </div><!--#rulebox-->
 
-  <p class="explanatory">When you're finished, use the button below and print, copy/paste, or save your Rule to where your community can keep track of it and edit it in the future.</p>
+  <p class="explanatory">When you're finished, use the buttons below to print, copy/paste, or save your Rule to where your community can keep track of it and edit it in the future.</p>
+  
+  <button class="pushButton" id="toggleDisplayMode" onclick="toggleDisplayMode()">Display</button>
+  <button class="pushButton" onclick="textOutput()">Markdown</button>
   
-  <button id="toggleDisplayMode" onclick="toggleDisplayMode()">Display</button>
-    
 </article>