CommunityRuleFrontend/_layouts/rule.html

---
layout: default
# This is where most of the code for CommunityRule lives
# Follow comments below in various sections for further explanation
---

<style type="text/css">
/* CLASSES */
.editable { /* All editable fields */
    padding: 10px 10px 10px 10px;
    min-height: 1.5em;
    font-family: serif;
    border-bottom: 1px dashed gray;
}
.question {
    color: gray;
}

/* TOOLTIP
   https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right 
   This could bear substantial improvement. */
.button {
  position: relative;
  display: inline-block;
  float: right;
  border: 1px solid gray;
  color: gray;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  padding: 0 5px 0 5px;
}
.button .tooltiptext {
  visibility: hidden;
  width: 250px;
  border: 1px solid black;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  right: 100%;
}
.button:hover {
    background-color: lightgray;
}
.button:hover .tooltiptext {
    visibility: visible;
}
/* pushButton
These are the major functional buttons*/
.pushButton {
  border: 1px solid gray;
  color: gray;
  background-color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  font-size: 1.2em;
}
.pushButton:hover {
    background-color: lightgray;
}
.plus { /* The maximize/minimize button */
    font-size: 1em;
}
.icons {
    /* icons are from https://github.com/tabler/tabler-icons */
    margin: 0 5px 0 0;
}
/* Various IDs */
#rulebox {
    border: 1px solid lightgray;
    padding: 20px;
    margin: 20px 0 30px 0;
}
#rulebox h2 {
    font-family: serif;
}
#communityname {
    font-weight: bold;
}
#editToggle {
  float: right;
  clear: both;
}
#toggleDisplayMode {
    margin: 0 0 10px 0;
    display: none;
}
#publishRule {
  margin: 0 0 10px 0;
}
#structure {
  font-size: 1.3em;
}
#attribution {
    font-family: serif;
    font-size: .8em;
    text-align: right;
}
</style>

<script>
  // Enter JavaScript-land!
  // First, some functions, followed by initialization commands
  
  // toggleVisible(id)
  // Toggles the visibility of a given element by given ID
  function toggleVisible(id) {
      var x = document.getElementById(id);
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }

  // classDisplayAll(className, value)
  // Assigns given display value to all elements with a given className
  function classDisplayAll(className, value) {
      var elements = document.getElementsByClassName(className);
      for (var i = 0; i < elements.length; i++) {
          elements[i].style.display = value;
      } 
  }

  // toggleEditMode()
  // Toggles whether editable fields are editable or not
  // and removes editing tools.
  function toggleEditMode() {
      if (editMode === true) {
          editMode = false;
          classDisplayAll("section","block");
          classDisplayAll("button","none");
          classDisplayAll("question","none");
          var editableFields = document.getElementsByClassName("editable");  
          for (var i = 0; i < editableFields.length; i++) {
              editableFields[i].contentEditable = "false";
              editableFields[i].style.borderStyle = "none";
              if (editableFields[i].innerHTML === "") {
                  editableFields[i].style.display = "none";
              }
          }
          document.getElementById("editToggle").innerHTML = "Customize";
      } else {
          editMode = true;
          classDisplayAll("button","block");
          classDisplayAll("question","block");
          classDisplayAll("editable","block");          
          classDisplayAll("section","none");
          var editableFields = document.getElementsByClassName("editable");
          for (var i = 0; i < editableFields.length; i++) {
              editableFields[i].style.borderStyle = "none none dashed none";
              editableFields[i].contentEditable = "true";
          }
          document.getElementById("editToggle").innerHTML = "Preview";
      }
  }

  // toggleDisplayMode()
  // toggles full displayMode, the Rule-only display for a published Rule
  // first, initialize variable:
  var displayMode = false;
  function toggleDisplayMode() {
      if (displayMode == false) {
          editMode = true;
          toggleEditMode(); // turns off editMode
          classDisplayAll("site-nav","none");
          classDisplayAll("post-header","none");
          classDisplayAll("site-footer","none");
          document.getElementById("attribution").style.display = "block";
          document.getElementById("toggleDisplayMode").style.display = "inline-block";
          document.getElementById("publishRule").style.display = "none";
          displayMode = true;
      } else {
          toggleEditMode() // turns on editMode
          classDisplayAll("site-nav","block");
          classDisplayAll("post-header","block");
          classDisplayAll("site-footer","block");
          document.getElementById("attribution").style.display = "none";
          document.getElementById("toggleDisplayMode").style.display = "none";
          document.getElementById("publishRule").style.display = "inline-block";
          displayMode = false;
      }
  }

  // textOutput()
  // Produces Markdown rendition of Rule
  function textOutput() {
      var filename = 'CommunityRule.txt';
      var content = '# CommunityRule: ' + document.getElementById('communityname').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 += document.getElementById('attributionMD').innerHTML;
      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);
  }

  // BEGIN Publish tools, via SteinHQ.com

  // publishRule()
  // Publishes existing fields to new page, /create/?rule=[ruleID]
  // Opens new page in Display mode
  function publishRule() {
      var time = new Date();
      var timestamp = time.getTime();
      // TKTK: Check if ruleID exists; while yes, replace and repeat
      var rule = [{
          ruleID: timestamp,
          timestamp: time.toISOString(),
      }];
      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,"");
          rule[0][key] = value;
      }
      const store = new SteinStore(
          "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
      );
      store.append("rules", rule).then(data => {
          window.open("/create/?r=" + timestamp, "_self", false);
      });
  }

  // displayRule(ID)
  // Displays content based on ID
  function displayRule(ID) {
      const store = new SteinStore(
          "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
      );     
      store.read("rules", { search: { ruleID: ID } }).then(data => {
          // only runs when we have the data from Goog:
          var rule = data[0];
          var fields = document.getElementsByClassName("editable");
          for (var i = 0; i < fields.length; i++) {
              var key = fields[i].id;
              var value = rule[key];
              if (typeof value === "undefined") {
                  value = "";
              }
              document.getElementById(key).innerHTML = value;
          }
          displayMode = false;
          toggleDisplayMode();
          document.title = rule['communityname'] + " / CommunityRule";
      });
  }
  // END Publish tools
  
  // FINALLY, Page loading
  // First, grab the current URL
  var urlParams = new URLSearchParams(window.location.search);
  // Determine if it is a published Rule
  if (urlParams.has('r')) {
      // If so, grab the Rule from database and enter displayMode
      var rID = urlParams.get('r');
      displayRule(rID);
  } else {
      // Otherwise, open in editMode as default
      var editMode = true;
      // switch out of editMode in special cases
      window.onload = function() {
          if ((window.location.href.indexOf("/templates/") != -1) ||
              (window.location.href.indexOf("/about/") != -1)) {
              toggleEditMode();
          }
      }
  }  
</script>


<article class="post">

  <header class="post-header">
    <h1 class="post-title" id="title">      
        {{ page.title }}
    </h1>


    <button class="pushButton" id="editToggle" onclick="toggleEditMode()">
      Preview</button>

  <div class="post-content">    
    {{ content }}
  </div>

  </header>
  
  <div id="rulebox">

  <span class="question">What is the community’s name?</span>

  <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>

  <h2 id="basics">
    <img src="{% link assets/tabler_icons/info-circle.svg %}"
         class="icons" />
    <span class="subhead output">Basics</span>
    <button onclick="toggleVisible('s1')" class="button plus"> + </button>
  </h2>
  <div class="section" id="s1" style="display:none">
  
    <span class="question">What is the basic structure of the community?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/federation/">federation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/membership/">membership</a>, <a target="_blank" href="https://democraticmediums.info/mediums/multicameralism/">multicameralism</a>, <a target="_blank" href="https://democraticmediums.info/mediums/ritual/">ritual</a>, <a target="_blank" href="https://democraticmediums.info/mediums/separation_of_powers/">separation of powers</a>, <a target="_blank" href="https://democraticmediums.info/mediums/stake_weight/">stake weight</a></span>
    </div>
    <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>

    <span class="question">What is the community’s mission?</span>
    <p contenteditable="true" class="editable output" id="mission">{{ 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://democraticmediums.info/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/solidarity/">solidarity</a>, <a target="_blank" href="https://democraticmediums.info/mediums/transparency/">transparency</a></span>
    </div>
    <p contenteditable="true" class="editable output" id="values">{{ page.values }}</p>
  
    <span class="question">What are the basic rights that this Rule guarantees?</span>
    <p contenteditable="true" class="editable output" id="rights">{{ page.rights }}</p>

  </div><!--hiding section s1-->

  <h2 id="participants">
    <img src="{% link assets/tabler_icons/user.svg %}"
         class="icons" />
    <span class="subhead output">Participants</span>
    <button onclick="toggleVisible('s2')" class="button plus"> + </button>
  </h2>
  <div class="section" id="s2" style="display:none">

    <span class="question">How does someone become a member?</span>
        <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/membership/">membership</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a></span>
    </div>

    <p contenteditable="true" class="editable output" id="membership">{{ 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://democraticmediums.info/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://democraticmediums.info/mediums/friendship/">friendship</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a></span>
    </div>
  
    <p contenteditable="true" class="editable output" id="removal">{{ page.removal }}</p>

  </div><!--hiding section s2-->
  
  <h2 id="policies">
    <img src="{% link assets/tabler_icons/news.svg %}"
         class="icons" />
    <span class="subhead output">Policies</span>
    <button onclick="toggleVisible('s3')" class="button plus"> + </button>
  </h2>
  <div class="section" id="s3" style="display:none">
 
    <span class="question">Who has the capacity to decide on policies, and how do they do so?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/holographic_consensus/">holographic consensus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/referendum/">referendum</a>, <a target="_blank" href="https://democraticmediums.info/mediums/representation/">representation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/sortition/">sortition</a></span>
    </div>
    <p contenteditable="true" class="editable output" id="decision">{{ 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://democraticmediums.info/mediums/caucus/">caucus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/coalition/">coalition</a>, <a target="_blank" href="https://democraticmediums.info/mediums/board/">board</a>, <a target="_blank" href="https://democraticmediums.info/mediums/debate/">debate</a>, <a target="_blank" href="https://democraticmediums.info/mediums/lobbying/">lobbying</a>, <a target="_blank" href="https://democraticmediums.info/mediums/recess/">recess</a>, <a target="_blank" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a>, <a target="_blank" href="https://democraticmediums.info/mediums/transparency/">transparency</a></span>
    </div>
    <p contenteditable="true" class="editable output" id="deliberation">{{ page.deliberation }}</p>

    <span class="question">How are policies implemented?</span>
    <div class="button">Modules
      <span class="tooltiptext"><a target="_blank" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a>, <a target="_blank" href="https://democraticmediums.info/mediums/lazy_consensus/">lazy consensus</a>, <a target="_blank" href="https://democraticmediums.info/mediums/restorative_justice/">restorative justice</a></span>
    </div>
    <p contenteditable="true" class="editable output" id="implementation">{{ 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://democraticmediums.info/mediums/board/">board</a>, <a target="_blank" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a>, <a target="_blank" href="https://democraticmediums.info/mediums/judiciary/">jury</a>, <a target="_blank" href="https://democraticmediums.info/mediums/precedent/">precedent</a>, <a target="_blank" href="https://democraticmediums.info/mediums/refusal/">refusal</a>, <a target="_blank" href="https://democraticmediums.info/mediums/rough_consensus/">rough consensus</a></span>
    </div>
    <p contenteditable="true" class="editable output" id="oversight">{{ 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://democraticmediums.info/mediums/fact_finding/">fact-finding</a>, <a target="_blank" href="https://democraticmediums.info/mediums/ranked_choice/">ranked choice</a>, <a target="_blank" href="https://democraticmediums.info/mediums/representation/">representation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/reputation/">reputation</a>, <a target="_blank" href="https://democraticmediums.info/mediums/sortition/">sortition</a>, <a target="_blank" href="https://democraticmediums.info/mediums/term_limit/">term limits</a></span>
  </div>
  
  <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>

  </div><!--hiding section s3-->
  
  <h2 id="evolution">
    <img src="{% link assets/tabler_icons/adjustments.svg %}"
         class="icons" />
    <span class="subhead output">Evolution</span>
    <button onclick="toggleVisible('s4')" class="button plus"> + </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 output" id="records">{{ page.records }}</p>

    <span class="question">How can this Rule be modified?</span>
    <p contenteditable="true" class="editable output" id="modification">{{ page.modification }}</p>

  </div><!--hiding section s4-->

  <div id="attribution" style="display:none;">
    <br />
    <p><a href="http://communityrule.info">
        <img src="https://img.shields.io/badge/CommunityRule-derived-000000" alt="CommunityRule derived"></a></p>
    <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>
    <p><strong>The Publish feature is experimental. Rules may be removed without notice</strong></p>
  </div>
  <div id="attributionMD" style="display:none;">
---

[![CommunityRule derived]({% link assets/CommunityRule-derived-000000.svg %})](http://communityrule.info)

Created with [CommunityRule](http://communityrule.info)
[Creative Commons BY-SA](http://creativecommons.org/licenses/by-sa/4.0/).
  </div>
  
  </div><!--#rulebox-->

  <button class="pushButton" id="publishRule" onclick="publishRule()">Publish</button>
  <button class="pushButton" id="toggleDisplayMode" onclick="toggleDisplayMode()">Fork</button>
  <button class="pushButton" onclick="textOutput()">Markdown</button>
  
</article>