Initial testing of module block authoring

README.md

@@ -12,4 +12,4 @@ To contribute governance templates, copy create.md at _create/[template_name].md
 
 Propose edits to existing governance templates at _create/[template_name].md.
 
-Most of CommunityRule's interactive features occur at _layouts/rule.html.
+Most of CommunityRule's interactive features occur at _layouts/rule.html. The Module data is located at _data/modules.csv.

_data/modules.csv

@@ -0,0 +1,55 @@
+name,id,description, url
+Approval voting,approval_voting,,https://democraticmediums.info/mediums/approval_voting/
+Audit,audit,,https://democraticmediums.info/mediums/audit/
+Board,board,,https://democraticmediums.info/mediums/board/
+Bureaucracy,bureaucracy,,https://democraticmediums.info/mediums/bureaucracy/
+Canvassing,canvassing,,https://democraticmediums.info/mediums/canvassing/
+Caucus,caucus,,https://democraticmediums.info/mediums/caucus/
+Coalition,coalition,,https://democraticmediums.info/mediums/coalition/
+Condorcet,condorcet,,https://democraticmediums.info/mediums/condorcet/
+Consensus process,consensus,,https://democraticmediums.info/mediums/consensus/
+Constitution,constitution,,https://democraticmediums.info/mediums/constitution/
+Continuous voting,continuous_voting,,https://democraticmediums.info/mediums/continuous_voting/
+Debate,debate,,https://democraticmediums.info/mediums/debate/
+Delegation,delegation,,https://democraticmediums.info/mediums/delegation/
+Disapproval voting,disapproval_voting,,https://democraticmediums.info/mediums/disapproval_voting/
+Do-ocracy,do-ocracy,,https://democraticmediums.info/mediums/do-ocracy/
+Eloquence,eloquence,,https://democraticmediums.info/mediums/eloquence/
+Exclusion,exclusion,,https://democraticmediums.info/mediums/exclusion/
+Fact Finding,fact_finding,,https://democraticmediums.info/mediums/fact_finding/
+Federation,federation,,https://democraticmediums.info/mediums/federation/
+Friendship,friendship,,https://democraticmediums.info/mediums/friendship/
+Holographic consensus,holographic_consensus,,https://democraticmediums.info/mediums/holographic_consensus/
+Judiciary,judiciary,,https://democraticmediums.info/mediums/judiciary/
+Lazy consensus,lazy_consensus,,https://democraticmediums.info/mediums/lazy_consensus/
+Lobbying,lobbying,,https://democraticmediums.info/mediums/lobbying/
+Lottery voting,lottery_voting,,https://democraticmediums.info/mediums/lottery_voting/
+Majority voting,majority_voting,,https://democraticmediums.info/mediums/majority_voting/
+Membership,membership,,https://democraticmediums.info/mediums/membership/
+Multicameralism,multicameralism,,https://democraticmediums.info/mediums/multicameralism/
+Ownership,ownership,,https://democraticmediums.info/mediums/ownership/
+Petition,petition,,https://democraticmediums.info/mediums/petition/
+Platform,platform,,https://democraticmediums.info/mediums/platform/
+Polling,polling,,https://democraticmediums.info/mediums/polling/
+Precedent,precedent,,https://democraticmediums.info/mediums/precedent/
+Proof of work,proof_of_work,,https://democraticmediums.info/mediums/proof_of_work/
+Proportional representation,proportional_representation,,https://democraticmediums.info/mediums/proportional_representation/
+Quadratic voting,quadratic_voting,,https://democraticmediums.info/mediums/quadratic_voting/
+Range voting,range_voting,,https://democraticmediums.info/mediums/range_voting/
+Ranked choice,ranked_choice,,https://democraticmediums.info/mediums/ranked_choice/
+Recess,recess,,https://democraticmediums.info/mediums/recess/
+Referendum,referendum,,https://democraticmediums.info/mediums/referendum/
+Refusal,refusal,,https://democraticmediums.info/mediums/refusal/
+Representation,representation,,https://democraticmediums.info/mediums/representation/
+Reputation,reputation,,https://democraticmediums.info/mediums/reputation/
+Restorative justice,restorative_justice,,https://democraticmediums.info/mediums/restorative_justice/
+Ritual,ritual,,https://democraticmediums.info/mediums/ritual/
+Rough consensus,rough_consensus,,https://democraticmediums.info/mediums/rough_consensus/
+Secrecy,secrecy,,https://democraticmediums.info/mediums/secrecy/
+Secret ballot,secret_ballot,,https://democraticmediums.info/mediums/secret_ballot/
+Separation of powers,separation_of_powers,,https://democraticmediums.info/mediums/separation_of_powers/
+Solidarity,solidarity,,https://democraticmediums.info/mediums/solidarity/
+Sortition,sortition,,https://democraticmediums.info/mediums/sortition/
+Stake weight,stake_weight,,https://democraticmediums.info/mediums/stake_weight/
+Term limits,term_limit,,https://democraticmediums.info/mediums/term_limit/
+Transparency,transparency,,https://democraticmediums.info/mediums/transparency/

_layouts/rule.html

@@ -7,6 +7,34 @@ layout: default
 <script>
   // Enter JavaScript-land!
   // First, some functions, followed by initialization commands
+
+  // Module-related drag-and-drop functions
+  // source: https://www.codecanal.com/html5-drag-and-copy/
+  function allowDrop(ev) {
+      ev.preventDefault();
+  }
+  function drag(ev) {
+      ev.dataTransfer.setData("text", ev.target.id);
+  }
+  function drop(ev) {
+      ev.preventDefault();
+      var target = ev.target;
+      // Prevents dropping into text field
+      if (target.id == "drag-directions") {
+          target = target.parentElement;
+      }
+      // Set up transfer
+      var data = ev.dataTransfer.getData("text");
+      // Iff module is from the menu clone it
+      var module = document.getElementById(data).cloneNode(true);
+      module.id += "-dropped";
+      // display the deletion button
+      module.children[2].style.display = "inline";
+      // pop it in!
+      target.appendChild(module);
+      // be sure the dummy text is gone
+      target.children[0].style.display = "none";
+  }
   
   // toggleVisible(id)
   // Toggles the visibility of a given element by given ID
@@ -208,6 +236,10 @@ layout: default
   // Publishes existing fields to new page, /create/?rule=[ruleID]
   // Opens new page in Display mode
   function publishRule() {
+      // Confirm user knows what they're getting into
+      var r = confirm("Publish to the public Library?");
+      if (r == false) { return; }
+      // Proceed with publication
       var now = new Date();
       // Numerical ID for published Rule
       var timeID = now.getTime();
@@ -320,10 +352,47 @@ layout: default
   </header>
   
   <div id="rulebox">
-    <span class="question">What is the community’s name?</span>
 
+    <span class="question">What is the community’s name?</span>
     <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
 
+    <!-- Modules  -->
+
+    <div ondrop="drop(event)" ondragover="allowDrop(event)"
+         class="modulebox" id="module-input">
+      <span class="question" id="drag-directions">
+        Drag modules from the icon at right</span>
+      
+      <div class="button">
+        <img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
+        <div class="tooltiptext" id="module-menu">
+          <!-- Customizable module -->
+          <span class="module" id="module-custom"
+                draggable="true" ondragstart="drag(event)">
+			<input contenteditable="true" placeholder="Custom..." />
+            <img src="{% link assets/tabler_icons/bulb.svg %}"
+                 draggable="false" />
+		    <a onclick="this.parentNode.remove()" id="delete-module"
+			   style="display:none">
+			  <img src="{% link assets/tabler_icons/x.svg %}" /></a>
+		  </span>
+		  <!-- Load preset modules from _data/modules.csv -->
+		  {% for module in site.data.modules %}
+		  <span class="module fixed" id="module-{{ module.id }}"
+			  draggable="true" ondragstart="drag(event)">
+		    <span>{{ module.name }}</span>
+		  <a target="_blank" href="{{ module.url }}">
+			<img src="{% link assets/tabler_icons/link.svg %}"
+				 draggable="false" /></a>
+		  <a onclick="this.parentNode.remove()" id="delete-module"
+			 style="display:none">
+			<img src="{% link assets/tabler_icons/x.svg %}" /></a>
+		  </span>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  
     <!-- SECTION S1: BASICS -->
     <h2 id="header-s1" class="header">
       <img src="{% link assets/tabler_icons/info-circle.svg %}"
@@ -334,23 +403,15 @@ layout: default
     <div class="section" id="s1" style="display:none">
     
       <span class="question">What is the basic structure of the community?</span>
-      <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-        <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/federation/">federation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/membership/">membership</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/multicameralism/">multicameralism</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/ritual/">ritual</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/separation_of_powers/">separation of powers</a> <a target="_blank" class="module" 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 the community hold?</span>
-      <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-        <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/solidarity/">solidarity</a> <a target="_blank" class="module" 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 is the legal status of the community’s assets and creations?</span>
-      <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-        <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/ownership/">ownership</a></span>
-      </div>
       <p contenteditable="true" class="editable output" id="legal">{{ page.legal }}</p>
       
 
@@ -362,65 +423,42 @@ layout: default
            class="icons" />
       <span class="subhead output">Participants</span>
       <button onclick="toggleVisible('s2')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
-    </h2>
-  
+    </h2>  
     <div class="section" id="s2" style="display:none">
     
-    <span class="question">How does someone become a participant?</span>
-        <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/membership/">membership</a> <a target="_blank" class="module" 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 participants suspended or removed?</span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/reputation/">reputation</a></span>
-    </div>
-    <p contenteditable="true" class="editable output" id="removal">{{ page.removal }}</p>
+      <span class="question">How does someone become a participant?</span>
+      <p contenteditable="true" class="editable output" id="membership">{{ page.membership }}</p>
+      
+      <span class="question">How are participants suspended or removed?</span>
+      <p contenteditable="true" class="editable output" id="removal">{{ page.removal }}</p>
 
-    <span class="question">What special roles can participants hold, and how are roles assigned?</span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/delegation/">delegation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/representation/">representation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/separation_of_powers/">separation of powers</a></span>
-    </div> 
-    <p contenteditable="true" class="editable output" id="roles">{{ page.roles }}</p>
+      <span class="question">What special roles can participants hold, and how are roles assigned?</span>
+      <p contenteditable="true" class="editable output" id="roles">{{ page.roles }}</p>
 
-    <span class="question">Are there limits on the terms or powers of participant roles?</span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/fact_finding/">fact-finding</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/ranked_choice/">ranked choice</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/representation/">representation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/reputation/">reputation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/sortition/">sortition</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/term_limit/">term limits</a></span>
-    </div>
-  <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>
+      <span class="question">Are there limits on the terms or powers of participant roles?</span>
+      <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>
 
-    
-  </div><!--hiding section s2-->
+    </div><!--hiding section s2-->
 
-  <!--SECTION s3: POLICY-->
-  <h2 id="header-s3" class="header">
-    <img src="{% link assets/tabler_icons/news.svg %}"
+    <!--SECTION s3: POLICY-->
+    <h2 id="header-s3" class="header">
+      <img src="{% link assets/tabler_icons/news.svg %}"
          class="icons" />
-    <span class="subhead output">Policy</span>
-    <button onclick="toggleVisible('s3')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
-  </h2>
-  <div class="section" id="s3" style="display:none">
+      <span class="subhead output">Policy</span>
+      <button onclick="toggleVisible('s3')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
+    </h2>
+    <div class="section" id="s3" style="display:none">
 
     <span class="question">What basic rights does this Rule guarantee?</span>
     <p contenteditable="true" class="editable output" id="rights">{{ page.rights }}</p>
     
     <span class="question">Who has the capacity to decide on policies, and how do they do so?</span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/do-ocracy/">do-ocracy</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/holographic_consensus/">holographic consensus</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/quadratic_voting/">quadratic voting</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/referendum/">referendum</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/representation/">representation</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/sortition/">sortition</a></span>
-    </div>
     <p contenteditable="true" class="editable output" id="decision">{{ page.decision }}</p>
   
     <span class="question">How are policies implemented?</span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/exclusion/">exclusion</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/lazy_consensus/">lazy consensus</a> <a target="_blank" class="module" 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">How does the community monitor and evaluate its policy implementation? </span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/board/">board</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/disapproval_voting/">disapproval voting</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/judiciary/">jury</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/precedent/">precedent</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/refusal/">refusal</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/rough_consensus/">rough consensus</a></span>
-    </div>
     <p contenteditable="true" class="editable output" id="oversight">{{ page.oversight }}</p>
     
   </div><!--hiding section s3-->
@@ -435,9 +473,6 @@ layout: default
   <div class="section" id="s4" style="display:none">
 
     <span class="question">Where does the community deliberate about policies and governance?</span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/caucus/">caucus</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/coalition/">coalition</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/board/">board</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/debate/">debate</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/lobbying/">lobbying</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/recess/">recess</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/secrecy/">secrecy</a> <a target="_blank" class="module" 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 does the community manage access to administrative accounts and other tools?</span>
@@ -447,9 +482,6 @@ layout: default
     <p contenteditable="true" class="editable output" id="economics">{{ page.economics }}</p>
     
     <span class="question">How are grievances among participants addressed?</span>
-    <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-      <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/audit/">audit</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/debate/">debate</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/friendship/">friendship</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/restorative_justice/">restorative justice</a> <a target="_blank" class="module" href="https://democraticmediums.info/mediums/recess/">recess</a></span>
-    </div>
     <p contenteditable="true" class="editable output" id="grievances">{{ page.grievances }}</p>
     
   </div><!--hiding section s4-->
@@ -473,15 +505,14 @@ layout: default
 
   <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">
+    <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://.*">
+    <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">

_sass/communityrule.scss

@@ -1,6 +1,17 @@
 /* BEGIN COMMUNITYRULE-SPECIFIC CSS */
 
 /* CLASSES */
+.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;
+}
 .callout-text {
     font-family: serif;
     font-size:2em;
@@ -21,23 +32,18 @@
     color: gray;
 }
 
+
+
 /* Tooltip for Modules
    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;
+#module-menu {
 }
 .button .tooltiptext {
   visibility: hidden;
-  width: 250px;
+  width: 400px;
+  overflow:scroll;
+  height:400px;
   border: 1px solid black;
   background-color: white;
   text-align: center;
@@ -58,6 +64,18 @@
 
 /* Modules */
 
+.modulebox {
+  position: relative;
+  display: block;
+  border: 1px solid lightgray;
+  background-color: white;
+  border-radius: 6px;
+  padding: 10px 10px 10px 10px;
+  margin-bottom: 15px;
+  text-align: center;
+  min-height: 50px;
+}
+  
 .module {
   border: 1px solid gray;
   color: black;
@@ -67,16 +85,13 @@
   padding: 5px;
   margin: 5px;
   display: inline-block;
+  font-size: .8em;
+  cursor: pointer;
 }
 .module:hover {
-    background-color: gray;
-}
-a.module:hover {
-    text-decoration: none;
-    color: white;
+    border-color: gray;
 }
-a.module:visited {
-    color: black;
+.module a:hover {
 }
 
 /* pushButton