---
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 now = new Date();
// Numerical ID for published Rule
var timeID = now.getTime();
// Readable UTC timestamp
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
var rule = [{
ruleID: timeID,
timestamp: dateTime,
}];
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=" + timeID, "_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;
}
// Publish timestamp to Rule
document.getElementById('dateTime').innerHTML = rule['timestamp'];
// Finish
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 id="dateTime"></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;">
---
[](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>