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
---

{% include rule-scripts.html %}

<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" class="rulebox">

    <span class="prompt">What is the community’s name?</span>
    <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>

    <span class="prompt">Summarize its structure:</span>
    <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
    
    <!-- RuleBuilder -->
    <div id="rule-builder" class="rulebuilder">
      <div id="module-input" class="rulebuilder_input"
           ondrop="drop(event)" ondragover="allowDrop(event)">
        <span class="prompt" id="drag-directions">Browse modules from below and drag them here.</span>
      </div>

      <div id="builder-field" class="rulebuilder_list">
      </div>
      
      <div id="module-menu" class="rulebuilder_modules">
        
		    <!-- Load preset modules from _modules/ -->
        {% assign modules_array = site.modules | sort: "type" %}
        {% assign last_type = "" %}
        {% for module in modules_array %}
        {% if module.layout == "module" %}
        {% if module.type != last_type %}
        {% if last_type != "" %}</div>{% endif %} 
        <div class="module-type-header">
          <img src="{{ site.baseurl }}/{{ site.data.module_types[module.type].icon }}" />
        {{ module.type }}
          <button onclick="toggleVisible('module-type-{{ module.type }}')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
        </div>
        <p class="module-questions">{{ site.data.module_types[module.type].question }}</p>
        <div id="module-type-{{ module.type }}" class="module-type" style="display: none;">
          {% endif %}
          {% assign last_type = module.type %}
		      <span class="module" id="module-{{ module.title | slugify }}"
            draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
            <span id="module-name" title="{{ module.summary }}">{{ module.title }}</span>
            <a target="_blank" href="{{ module.url }}" class="module-info">
              <img title="More info" draggable="false" class="module-logo"
                src="{% link assets/tabler_icons/info-circle.svg %}" /></a>
            <a onclick="this.parentNode.remove()" class="delete-module">
            <img src="{% link assets/tabler_icons/x.svg %}" /></a>
          </span>
        {% endif %}
        {% endfor %}
        </div>

        <div class="module-type-header">
        <img src="{% link assets/tabler_icons/bulb.svg %}" />
        Custom Module
        </div>
        <p class="module-questions">Create your own module.</p>
        <div id="module-custom-container" class="module-type">
          <!-- Customizable module -->
          <span class="module module-custom" id="module-custom"
                draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
            <img class="module-info" src="{% link assets/tabler_icons/grid-dots.svg %}" draggable="false" />
            <input contenteditable="true" draggable="false" placeholder="Custom module..."/>
            <img src="{% link assets/tabler_icons/bulb.svg %}"
                draggable="false" />
            <a onclick="this.parentNode.remove()" class="delete-module">
            <img src="{% link assets/tabler_icons/x.svg %}" /></a>
          </span>
        </div>
      </div><!-- END module-menu -->
    </div><!-- END RuleBuilder -->

    <div id="rulewriter-box">
      <span class="prompt"></span>
      <p id="rulewriter" contenteditable="true" class="editable output"></p>
    </div>

    <div class="metadata_input">
      <p class="prompt"><img src="{% link assets/tabler_icons/pencil.svg %}" /> Created by</p>
      <input contenteditable="true" class="editable" id="author-text" placeholder="Creator Name" />
      
      <p class="prompt"><img src="{% link assets/tabler_icons/globe.svg %}" /> Creator URL</p>
      <input contenteditable="true" class="editable" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*" />
    </div>
  
    <div id="authorship" class="linkbox metadata_display">
      <span>Created by</span>
      <span class="link-divider"><img src="{% link assets/tabler_icons/pencil.svg %}" title="Add link" /></span>
      <span id="authorship-result" class="linkbox_result"></span>
    </div>
  
  </div><!--#rulebox-->

  <div id="lineage">
    <img src="{% link assets/tabler_icons/file.svg %}" title="Derivation lineage" />
    <span id="lineage-list"></span>
  </div>


  <button class="pushButton" id="publishRule" onclick="publishRule()"
        title="Add to the public Library">Publish</button>
  <button class="pushButton" id="fork" onclick="fork()"
        title="Edit this Rule into a new one">Fork</button>
  <button class="pushButton" id="discuss-button" onclick="toggleVisible('discuss')"
        title="Discuss this Rule with others">Discuss</button>
  <button class="pushButton" onclick="textOutput()"
        title="Download this Rule as a Markdown text file">Export</button>
  <button class="pushButton" id="trash" onclick="deleteRule()">
    <img src="{% link assets/tabler_icons/trash.svg %}" title="Rule deletion request" />
  </button>

  <div id="discuss" style="display:none;">
    <button onclick="toggleVisible('discuss')" class="button chevrons" style="display:block;"><img src="{% link assets/tabler_icons/chevrons-up.svg %}" title="Hide" /></button>
    <p>Comment function in development! Thanks for your patience.</p>
    <!--
    <script defer
            src="https://comment.medlab.host/js/commento.js"
            data-no-fonts="true"
            >
    </script>
    <div id="commento"></div>
    -->
  </div>
  
  <div id="attribution" style="display:none;">
    <br />
    <p><a href="https://communityrule.info">
        <img src="https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %}" alt="CommunityRule derived"></a></p>
    <p id="dateTime"></p>
    <p>Created with <a href="https://communityrule.info">CommunityRule</a>,
      <a href="https://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](https://communityrule.info{% link assets/CommunityRule-derived-000000.svg %})](https://communityrule.info)   
[Creative Commons BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)
</div>


</article>