rule.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518
  1. ---
  2. layout: default
  3. # This is where most of the code for CommunityRule lives
  4. # Follow comments below in various sections for further explanation
  5. ---
  6. <script>
  7. // Enter JavaScript-land!
  8. // First, some functions, followed by initialization commands
  9. // toggleVisible(id)
  10. // Toggles the visibility of a given element by given ID
  11. function toggleVisible(id) {
  12. var x = document.getElementById(id);
  13. if (x.style.display === "none") {
  14. x.style.display = "block";
  15. } else {
  16. x.style.display = "none";
  17. }
  18. }
  19. // classDisplayAll(className, value)
  20. // Assigns given display value to all elements with a given className
  21. function classDisplayAll(className, value) {
  22. var elements = document.getElementsByClassName(className);
  23. for (var i = 0; i < elements.length; i++) {
  24. elements[i].style.display = value;
  25. }
  26. }
  27. // toggleEditMode()
  28. // Toggles whether editable fields are editable or not
  29. // and removes editing tools.
  30. function toggleEditMode() {
  31. if (editMode === true) { // switch to preview mode
  32. editMode = false;
  33. classDisplayAll("section","block");
  34. classDisplayAll("button","none");
  35. classDisplayAll("question","none");
  36. var editableFields = document.getElementsByClassName("editable");
  37. // de-editable-ize the editable fields
  38. for (var i = 0; i < editableFields.length; i++) {
  39. editableFields[i].contentEditable = "false";
  40. editableFields[i].style.borderStyle = "none";
  41. // Remove empty fields entirely
  42. var content = editableFields[i].innerHTML;
  43. content = content.replace(/(<([^>]+)>)/ig,''); // strips stray tags
  44. if (content === "") {
  45. editableFields[i].style.display = "none";
  46. }
  47. }
  48. // Remove headers of empty sections
  49. // Inefficient! Might be merged with the above iteration
  50. var sections = document.getElementsByClassName("section");
  51. for (var i = 0; i < sections.length; i++) {
  52. var sectionQuestions = sections[i].getElementsByClassName("editable");
  53. var blanks = 0;
  54. for (var x = 0; x < sectionQuestions.length; x++) {
  55. var content = sectionQuestions[x].innerHTML;
  56. content = content.replace(/(<([^>]+)>)/ig,''); // strips stray tags
  57. if (content == "") { blanks++; }
  58. if (blanks == sectionQuestions.length) {
  59. var headerID = "header-s" + (i + 1);
  60. document.getElementById(headerID).style.display = "none";
  61. }
  62. }
  63. }
  64. // Handle links
  65. // TKTK
  66. // Handle author link
  67. var authorName = document.getElementById("author-text").value;
  68. var authorURL = document.getElementById("author-url").value;
  69. if (authorName != "") {
  70. document.getElementById("authorship-words").style.display = "inline";
  71. if (authorURL != "") { // both author and URL present
  72. document.getElementById("authorship-result").innerHTML = "<a href='" + authorURL +"'>" + authorName + "</a>";
  73. document.getElementById("authorship-result").style.display = "inline";
  74. } else { // only authorName present
  75. document.getElementById("authorship-result").innerHTML = authorName;
  76. document.getElementById("authorship-result").style.display = "inline";
  77. }
  78. } else {
  79. document.getElementById("authorship").style.display = "none";
  80. }
  81. // Finally, change button name
  82. document.getElementById("editToggle").innerHTML = "Customize";
  83. } else { // Switch to editMode
  84. editMode = true;
  85. classDisplayAll("button","block");
  86. classDisplayAll("question","block");
  87. classDisplayAll("editable","block");
  88. classDisplayAll("header","block");
  89. classDisplayAll("section","none");
  90. classDisplayAll("link-text","inline");
  91. classDisplayAll("link-url","inline");
  92. // link handling TKTK
  93. // author handling
  94. document.getElementById("authorship-result").style.display = "none";
  95. document.getElementById("authorship-words").style.display = "none";
  96. document.getElementById("authorship").style.display = "block";
  97. // make all editable fields visible
  98. var editableFields = document.getElementsByClassName("editable");
  99. for (var i = 0; i < editableFields.length; i++) {
  100. editableFields[i].style.borderStyle = "none none dashed none";
  101. editableFields[i].contentEditable = "true";
  102. }
  103. // Change button name
  104. document.getElementById("editToggle").innerHTML = "Preview";
  105. }
  106. }
  107. // toggleDisplayMode()
  108. // toggles full displayMode, the Rule-only display for a published Rule
  109. // first, initialize variable:
  110. var displayMode = false;
  111. function toggleDisplayMode() {
  112. if (displayMode == false) {
  113. editMode = true;
  114. toggleEditMode(); // turns off editMode
  115. classDisplayAll("site-nav","none");
  116. classDisplayAll("post-header","none");
  117. classDisplayAll("site-footer","none");
  118. document.getElementById("attribution").style.display = "block";
  119. document.getElementById("toggleDisplayMode").style.display = "inline-block";
  120. document.getElementById("publishRule").style.display = "none";
  121. document.getElementById("trash").style.display = "inline-block";
  122. displayMode = true;
  123. } else {
  124. toggleEditMode() // turns on editMode
  125. classDisplayAll("site-nav","block");
  126. classDisplayAll("post-header","block");
  127. classDisplayAll("site-footer","block");
  128. document.getElementById("attribution").style.display = "none";
  129. document.getElementById("toggleDisplayMode").style.display = "none";
  130. document.getElementById("publishRule").style.display = "inline-block";
  131. document.getElementById("trash").style.display = "none";
  132. displayMode = false;
  133. }
  134. }
  135. // textOutput()
  136. // Produces Markdown rendition of Rule from Export button
  137. function textOutput() {
  138. var filename = 'GOVERNANCE.md';
  139. // First, add title, whether there is one or not
  140. var content = '# '+ document.getElementById('communityname').innerHTML + '\n\n';
  141. content = content.replace(/(<([^>]+)>)/ig,''); // strips stray tags
  142. // Now, begin adding other elements
  143. var elements = document.getElementsByClassName('output');
  144. for (var i = 1; i < elements.length; i++) {
  145. var thisBit = elements[i].innerHTML;
  146. thisBit = thisBit.replace(/(<([^>]+)>)/ig,''); // strips stray tags
  147. if (thisBit != "") {
  148. if (elements[i].classList.contains("subhead")) {
  149. // Before printing subhead, make sure it's not empty
  150. var i2 = i + 1;
  151. while ((i2 < elements.length) &&
  152. (!(elements[i2].classList.contains("subhead")))) {
  153. if (elements[i2].innerHTML != "") {
  154. // in this case, it's not empty, so print and move on
  155. content += '## ';
  156. content += thisBit + '\n\n';
  157. break;
  158. } else { i2++; }
  159. } // won't print anything if a subhead has only empty children
  160. } else {
  161. // Non-subhead elements can just go ahead and print
  162. content += thisBit + '\n\n';
  163. }
  164. }
  165. }
  166. // Add authorship block
  167. var authorName = document.getElementById("author-text").value;
  168. var authorURL = document.getElementById("author-url").value;
  169. var authorshipBlock = "---\n\nCreated by ";
  170. if (authorName != "") {
  171. if (authorURL != "") { // both author and URL present
  172. authorshipBlock += ("[" + authorName + "](" + authorURL + ")");
  173. } else { // only authorName present
  174. authorshipBlock += authorName;
  175. }
  176. content += (authorshipBlock + "\n");
  177. }
  178. // Add attribution block
  179. content += document.getElementById('attributionMD').innerHTML;
  180. // Starting here, see https://stackoverflow.com/a/33542499
  181. var blob = new Blob([content], {type: 'text/plain'});
  182. if(window.navigator.msSaveOrOpenBlob) {
  183. window.navigator.msSaveBlob(blob, filename);
  184. }
  185. else{
  186. var elem = window.document.createElement('a');
  187. elem.href = window.URL.createObjectURL(blob);
  188. elem.download = filename;
  189. document.body.appendChild(elem);
  190. elem.click();
  191. document.body.removeChild(elem);
  192. URL.revokeObjectURL(); // This needs an arg but I can't figure out what
  193. }
  194. var myFile = new Blob([fileContent], {type: 'text/plain'});
  195. window.URL = window.URL || window.webkitURL; document.getElementById('download').setAttribute('href',window.URL.createObjectURL(myFile));
  196. document.getElementById('download').setAttribute('download', fileName);
  197. }
  198. // BEGIN Publish tools, via SteinHQ.com
  199. // publishRule()
  200. // Publishes existing fields to new page, /create/?rule=[ruleID]
  201. // Opens new page in Display mode
  202. function publishRule() {
  203. var now = new Date();
  204. // Numerical ID for published Rule
  205. var timeID = now.getTime();
  206. // Readable UTC timestamp
  207. var dateTime = now.getUTCFullYear()+'.'+(now.getUTCMonth()+1)+'.'+now.getUTCDate()
  208. +' '+now.getUTCHours()+":"+ now.getUTCMinutes()+":"+now.getUTCSeconds()
  209. + ' UTC';
  210. // TKTK: Check if ruleID exists; while yes, replace and repeat
  211. var rule = [{
  212. ruleID: timeID,
  213. timestamp: dateTime,
  214. }];
  215. var fields = document.getElementsByClassName("editable");
  216. for (var i = 0; i < fields.length; i++) {
  217. var key = fields[i].id;
  218. var value = "";
  219. if (fields[i].nodeName == "INPUT") { // for <input>
  220. value = fields[i].value.replace(/(<([^>]+)>)/ig,"");
  221. } else { // for other fields
  222. value = fields[i].innerHTML.replace(/(<([^>]+)>)/ig,"");
  223. }
  224. rule[0][key] = value;
  225. }
  226. const store = new SteinStore(
  227. "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
  228. );
  229. store.append("rules", rule).then(data => {
  230. window.open("/create/?r=" + timeID, "_self", false);
  231. });
  232. }
  233. // displayRule(ID)
  234. // Displays content based on ID
  235. function displayRule(ID) {
  236. const store = new SteinStore(
  237. "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
  238. );
  239. store.read("rules", { search: { ruleID: ID } }).then(data => {
  240. // only runs when we have the data from Goog:
  241. var rule = data[0];
  242. var fields = document.getElementsByClassName("editable");
  243. for (var i = 0; i < fields.length; i++) {
  244. var key = fields[i].id;
  245. var value = rule[key];
  246. if (typeof value === "undefined") {
  247. value = "";
  248. } else if (key.includes("-")) { // links
  249. document.getElementById(key).value = value;
  250. } else {
  251. document.getElementById(key).innerHTML = value;
  252. }
  253. }
  254. // Publish timestamp to Rule
  255. document.getElementById('dateTime').innerHTML = rule['timestamp'];
  256. // Finish
  257. displayMode = false;
  258. toggleDisplayMode();
  259. document.title = rule['communityname'] + " / CommunityRule";
  260. });
  261. }
  262. // deleteRule()
  263. // A temporary placeholder that sends an email requesting rule deletion
  264. function deleteRule() {
  265. var urlParamz = new URLSearchParams(window.location.search);
  266. var rID = urlParamz.get('r');
  267. window.open("mailto:medlab@colorado.edu?subject=Delete Rule request ("
  268. + rID + ")&body=Please explain your rationale:\n");
  269. }
  270. // END Publish tools
  271. // FINALLY, Page loading
  272. // First, grab the current URL
  273. var urlParams = new URLSearchParams(window.location.search);
  274. // Determine if it is a published Rule
  275. if (urlParams.has('r')) {
  276. // If so, grab the Rule from database and enter displayMode
  277. var rID = urlParams.get('r');
  278. displayRule(rID);
  279. } else {
  280. // Otherwise, open in editMode as default
  281. var editMode = true;
  282. // switch out of editMode in special cases
  283. window.onload = function() {
  284. if ((window.location.href.indexOf("/templates/") != -1) ||
  285. (window.location.href.indexOf("/about/") != -1)) {
  286. toggleEditMode();
  287. }
  288. }
  289. }
  290. </script>
  291. <article class="post">
  292. <header class="post-header">
  293. <h1 class="post-title" id="title">
  294. {{ page.title }}
  295. </h1>
  296. <button class="pushButton" id="editToggle" onclick="toggleEditMode()">
  297. Preview</button>
  298. <div class="post-content">
  299. {{ content }}
  300. </div>
  301. </header>
  302. <div id="rulebox">
  303. <span class="question">What is the community’s name?</span>
  304. <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
  305. <!-- SECTION S1: BASICS -->
  306. <h2 id="header-s1" class="header">
  307. <img src="{% link assets/tabler_icons/info-circle.svg %}"
  308. class="icons" />
  309. <span class="subhead output">Basics</span>
  310. <button onclick="toggleVisible('s1')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
  311. </h2>
  312. <div class="section" id="s1" style="display:none">
  313. <span class="question">What is the basic structure of the community?</span>
  314. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  315. <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>
  316. </div>
  317. <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
  318. <span class="question">What is the community’s mission?</span>
  319. <p contenteditable="true" class="editable output" id="mission">{{ page.mission }}</p>
  320. <span class="question">What core values does the community hold?</span>
  321. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  322. <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>
  323. </div>
  324. <p contenteditable="true" class="editable output" id="values">{{ page.values }}</p>
  325. <span class="question">What is the legal status of the community’s assets and creations?</span>
  326. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  327. <span class="tooltiptext modules"><a target="_blank" class="module" href="https://democraticmediums.info/mediums/ownership/">ownership</a></span>
  328. </div>
  329. <p contenteditable="true" class="editable output" id="legal">{{ page.legal }}</p>
  330. </div><!--hiding section s1-->
  331. <!-- SECTION s2: PARTICIPANTS -->
  332. <h2 id="header-s2" class="header">
  333. <img src="{% link assets/tabler_icons/user.svg %}"
  334. class="icons" />
  335. <span class="subhead output">Participants</span>
  336. <button onclick="toggleVisible('s2')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
  337. </h2>
  338. <div class="section" id="s2" style="display:none">
  339. <span class="question">How does someone become a participant?</span>
  340. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  341. <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>
  342. </div>
  343. <p contenteditable="true" class="editable output" id="membership">{{ page.membership }}</p>
  344. <span class="question">How are participants suspended or removed?</span>
  345. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  346. <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>
  347. </div>
  348. <p contenteditable="true" class="editable output" id="removal">{{ page.removal }}</p>
  349. <span class="question">What special roles can participants hold, and how are roles assigned?</span>
  350. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  351. <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>
  352. </div>
  353. <p contenteditable="true" class="editable output" id="roles">{{ page.roles }}</p>
  354. <span class="question">Are there limits on the terms or powers of participant roles?</span>
  355. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  356. <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>
  357. </div>
  358. <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>
  359. </div><!--hiding section s2-->
  360. <!--SECTION s3: POLICY-->
  361. <h2 id="header-s3" class="header">
  362. <img src="{% link assets/tabler_icons/news.svg %}"
  363. class="icons" />
  364. <span class="subhead output">Policy</span>
  365. <button onclick="toggleVisible('s3')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
  366. </h2>
  367. <div class="section" id="s3" style="display:none">
  368. <span class="question">What basic rights does this Rule guarantee?</span>
  369. <p contenteditable="true" class="editable output" id="rights">{{ page.rights }}</p>
  370. <span class="question">Who has the capacity to decide on policies, and how do they do so?</span>
  371. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  372. <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>
  373. </div>
  374. <p contenteditable="true" class="editable output" id="decision">{{ page.decision }}</p>
  375. <span class="question">How are policies implemented?</span>
  376. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  377. <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>
  378. </div>
  379. <p contenteditable="true" class="editable output" id="implementation">{{ page.implementation }}</p>
  380. <span class="question">How does the community monitor and evaluate its policy implementation? </span>
  381. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  382. <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>
  383. </div>
  384. <p contenteditable="true" class="editable output" id="oversight">{{ page.oversight }}</p>
  385. </div><!--hiding section s3-->
  386. <!-- SECTION s4: PROCESS -->
  387. <h2 id="header-s4" class="header">
  388. <img src="{% link assets/tabler_icons/refresh.svg %}"
  389. class="icons" />
  390. <span class="subhead output">Process</span>
  391. <button onclick="toggleVisible('s4')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
  392. </h2>
  393. <div class="section" id="s4" style="display:none">
  394. <span class="question">Where does the community deliberate about policies and governance?</span>
  395. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  396. <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>
  397. </div>
  398. <p contenteditable="true" class="editable output" id="deliberation">{{ page.deliberation }}</p>
  399. <span class="question">How does the community manage access to administrative accounts and other tools?</span>
  400. <p contenteditable="true" class="editable output" id="access">{{ page.access }}</p>
  401. <span class="question">How does the community manage funds and economic flows?</span>
  402. <p contenteditable="true" class="editable output" id="economics">{{ page.economics }}</p>
  403. <span class="question">How are grievances among participants addressed?</span>
  404. <div class="button"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
  405. <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>
  406. </div>
  407. <p contenteditable="true" class="editable output" id="grievances">{{ page.grievances }}</p>
  408. </div><!--hiding section s4-->
  409. <!-- SECTION s5: EVOLUTION -->
  410. <h2 id="header-s5" class="header">
  411. <img src="{% link assets/tabler_icons/adjustments.svg %}"
  412. class="icons" />
  413. <span class="subhead output">Evolution</span>
  414. <button onclick="toggleVisible('s5')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
  415. </h2>
  416. <div class="section" id="s5" style="display:none">
  417. <span class="question">Where are policies and records kept?</span>
  418. <p contenteditable="true" class="editable output" id="records">{{ page.records }}</p>
  419. <span class="question">How can this Rule be modified?</span>
  420. <p contenteditable="true" class="editable output" id="modification">{{ page.modification }}</p>
  421. </div><!--hiding section s5-->
  422. <div id="authorship" class="linkbox">
  423. <span id="authorship-words">Created by</span>
  424. <input contenteditable="true" class="editable link-text" id="author-text" placeholder="Created by">
  425. <span class="link-divider"><img src="{% link assets/tabler_icons/pencil.svg %}" title="Add link" /></span>
  426. <input contenteditable="true" class="editable link-url" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*">
  427. <span id="authorship-result"></span>
  428. </div>
  429. </div><!--#rulebox-->
  430. <div id="attribution" style="display:none;">
  431. <br />
  432. <p><a href="https://communityrule.info">
  433. <img src="https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %}" alt="CommunityRule derived"></a></p>
  434. <p id="dateTime"></p>
  435. <p>Created with <a href="https://communityrule.info">CommunityRule</a><br />
  436. <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons BY-SA</a></p>
  437. <p><strong>The Publish feature is experimental. Rules may be removed without notice</strong></p>
  438. </div>
  439. <div id="attributionMD" style="display:none;">
  440. ---
  441. [![CommunityRule derived](https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %})](https://communityrule.info)
  442. [Creative Commons BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)</div>
  443. <button class="pushButton" id="publishRule" onclick="publishRule()"
  444. title="Add to the public Library">Publish</button>
  445. <button class="pushButton" id="toggleDisplayMode" onclick="toggleDisplayMode()"
  446. title="Edit this Rule into a new one">Fork</button>
  447. <button class="pushButton" onclick="textOutput()"
  448. title="Download this Rule as a Markdown text file">Export</button>
  449. <button class="pushButton" id="trash" onclick="deleteRule()">
  450. <img src="{% link assets/tabler_icons/trash.svg %}" title="Rule deletion request" />
  451. </button>
  452. <button class="pushButton"
  453. onclick="javascript:location.href='https://www.colorado.edu/lab/medlab/content/communityrule-user-feedback'">
  454. Feedback
  455. </button>
  456. </article>