Enabled switching between create and rule modes in rule.html

_layouts/rule.html

@@ -37,11 +37,13 @@ layout: default
   left: 105%;
   }
 .button:hover .tooltiptext {
-  visibility: visible;
+    visibility: visible;
   }
 
-/* set invisibility as default */
-/*#s1 {display:none;}*/
+#editToggle {
+    float: right;
+    clear: both;
+}    
 
 </style>
 
@@ -54,13 +56,64 @@ layout: default
           x.style.display = "none";
       }
   }
+
+  function classDisplayAll(className, value) {
+      var elements = document.getElementsByClassName(className);
+      for (var i = 0; i < elements.length; i++) {
+          elements[i].style.display = value;
+      } 
+  }
+  
+  function toggleEditMode() {
+      if (editMode === true) {
+          editMode = false;
+          //SECTIONS, QUESTIONS, BORDERS, HIDE EMPTIES
+          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.border = "none";
+              if (editableFields[i].innerHTML === "") {
+                  editableFields[i].style.display = "none";
+              }
+          }
+          document.getElementById("title").innerHTML =
+              document.getElementById("title").innerHTML.replace( /Create/g,'Rule') ;
+          document.getElementById("editToggle").innerHTML = "Read Only";
+      } else {
+          editMode = true;
+          //DO CHANGES VIA CLASSES
+          classDisplayAll("section","none");
+          classDisplayAll("button","block");
+          classDisplayAll("question","block");
+          classDisplayAll("editable","block");          
+          var editableFields = document.getElementsByClassName("editable");
+          for (var i = 0; i < editableFields.length; i++) {
+              editableFields[i].style.border = "1px dotted black";
+              editableFields[i].contentEditable = "true";
+          }
+          document.getElementById("title").innerHTML =
+              document.getElementById("title").innerHTML.replace( /Rule/g,'Create') ;
+          document.getElementById("editToggle").innerHTML = "Read/Write";
+      }
+  }
+
+  var editMode = true;
+  window.onload = function() {
+      if (window.location.href.indexOf("/rules/") != -1) {
+          toggleEditMode();
+      }
+  }
+  
 </script>
 
 
 <article class="post">
 
   <header class="post-header">
-    <h1 class="post-title">Create
+    <h1 class="post-title" id="title">Create
       {% if page.title != "Create" %}
       <span style="color:gray;">
         / {{ page.title }}&nbsp;
@@ -69,6 +122,8 @@ layout: default
     </h1>
   </header>
 
+  <button id="editToggle" onclick="toggleEditMode()">Read/Write</button>
+  
   <p>Use the questions below to begin creating your community's Rule. The suggested modules are linked to (in progress) entries at <a href="https://medlabboulder.gitlab.io/democraticmediums/">Democratic Mediums</a>.</p>
 
   <div class="post-content">    
@@ -80,41 +135,36 @@ layout: default
   <p></p>
 
   <span class="question">What is the community’s name?</span>
-  <h1 contenteditable="true" class="editable">
-    {{ page.community-name }}
-  </h1>
+
+  <h1 contenteditable="true" class="editable">{{ page.community-name }}</h1>
 
   <h2 id="purpose">Purpose
     <button onclick="toggleVisible('s1')" class="button"> + </button>
   </h2>
 
-  <div id="s1" style="display:none">
+  <div class="section" id="s1" style="display:none">
   
   <span class="question">What is the community’s mission?</span>
-  <p contenteditable="true" class="editable">
-    {{ page.mission }}
-  </p>
+
+  <p contenteditable="true" class="editable">{{ page.mission }}</p>
 
   <span class="question">What core values does it hold?</span>
   <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/solidarity/">solidarity</a>, <a 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">{{ page.values }}</p>
   
   <span class="question">What is the basic structure of the community?</span>
   <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/federation/">federation</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/friendship/">friendship</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/membership/">membership</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/multicameralism/">multicameralism</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ritual/">ritual</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/separation_of_powers/">separation of powers</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/stake_weight/">stake weight</a></span>
   </div>
-  <p contenteditable="true" class="editable">
-    {{ page.structure }}
-  </p>
+
+  <p contenteditable="true" class="editable">{{ page.structure }}</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">{{ page.rights }}</p>
 
   </div><!--hiding section s1-->
 
@@ -122,21 +172,18 @@ layout: default
     <button onclick="toggleVisible('s2')" class="button"> + </button>
   </h2>
 
-  <div id="s2" style="display:none">
+  <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">{{ page.membership }}</p>
   
   <span class="question">How are members suspended or removed?</span>
   <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/friendship/">friendship</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/reputation/">reputation</a></span>
   </div>
-  <p contenteditable="true" class="editable">
-    {{ page.removal }}
-  </p>
-  <p>Modules: <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a></p>
+  
+  <p contenteditable="true" class="editable">{{ page.removal }}</p>
 
   </div><!--hiding section s2-->
   
@@ -144,47 +191,42 @@ layout: default
     <button onclick="toggleVisible('s3')" class="button"> + </button>
   </h2>
 
-  <div id="s3" style="display:none">
+  <div class="section" id="s3" style="display:none">
   
-  <span class="question">Who has the capacity to decide on our policies, and how do they do so?</span>
-  <div class="button">Modules
-    <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/do-ocracy/">do-ocracy</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/holographic_consensus/">holographic consensus</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/referendum/">referendum</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a></span>
-  </div>
-  <p contenteditable="true" class="editable">
-    {{ page.decision }}
-  </p>
+    <span class="question">Who has the capacity to decide on our policies, and how do they do so?</span>
+    <div class="button">Modules
+      <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/do-ocracy/">do-ocracy</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/holographic_consensus/">holographic consensus</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/referendum/">referendum</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a></span>
+    </div>
+
+    <p contenteditable="true" class="editable">{{ page.decision }}</p>
   
-  <span class="question">Where do stewards and community members deliberate about potential policies?</span>
+    <span class="question">Where do stewards and community members deliberate about potential policies?</span>
   <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/caucus/">caucus</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/coalition/">coalition</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/debate/">debate</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lobbying/">lobbying</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/recess/">recess</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/secrecy/">secrecy</a>, <a 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">{{ page.deliberation }}</p>
 
   <span class="question">How are policies implemented?</span>
   <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/exclusion/">exclusion</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/lazy_consensus/">lazy consensus</a>, <a 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">{{ page.implementation }}</p>
   
   <span class="question">Who oversees the implementation of the agreements?</span>
   <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/board/">board</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/disapproval_voting/">disapproval voting</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/judiciary/">jury</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/precedent/">precedent</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/refusal/">refusal</a>, <a 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">{{ page.oversight }}</p>
   
   <span class="question">How are each of the stewardship roles determined and limited?</span>
   <div class="button">Modules
     <span class="tooltiptext"><a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/fact_finding/">fact-finding</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/ranked_choice/">ranked choice</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/representation/">representation</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/reputation/">reputation</a>, <a href="https://medlabboulder.gitlab.io/democraticmediums/mediums/sortition/">sortition</a>, <a 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">{{ page.limits }}</p>
 
   </div><!--hiding section s3-->
   
@@ -192,17 +234,15 @@ layout: default
     <button onclick="toggleVisible('s4')" class="button"> + </button>
   </h2>
 
-  <div id="s4" style="display:none">
+  <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">{{ 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">{{ page.modification }}</p>
 
   </div><!--hiding section s4-->