CommunityRuleFrontend/_includes/vue-rule-script.html

<div id="app">
    <div class="app-wrapper" :class="{'is-preview':preview}">
        <div class="editor" 
            v-if="!preview && !legacy" 
            v-cloak
            v-on:change="this.handleStateUpdate()"
        >
            <div class="controls">
                <vue-button class="primary is-large" @click="clickPreview" :icon="icons.view">Preview</vue-button>
            </div>
            <div class="details">
                <div class="label-group">
                    <label class="label" for="">
                        <span>What is the community's name?</span>
                        <input type="text" v-model="computedState.rule.name" @change="state.rule.ruleID = slugify(computedState.rule.name)">
                    </label>
                    <label class="label">
                        <span>Icon:</span>
                        <div class="dropdown">
                            <label v-for="(icon, iconName, idx) in ruleIcons" :key="idx"
                                :class="{ selected: computedState.rule.icon == icon }">
                                <input type="radio" id="" :selected="computedState.rule.icon == icon" :value="icon" v-model="computedState.rule.icon">
                                <div><img :src="icon" :alt="iconName"></div>
                            </label>
                            <label class="default">
                                <div><img :src="icons.blank"></div>
                            </label>
                        </div>
                    </label>
                </div>
                <label class="label" for="">
                    <span>Summarize its structure:</span>
                    <textarea v-model="computedState.rule.summary"></textarea>
                </label>
            </div>
            <div class="rule__modules" :class="{ target: holding }">
                <label class="label" for="" v-if="computedState.rule.name"><icon :icon="computedState.rule.icon"></icon>[[computedState.rule.name]]</label>
                <div
                    class="modules__dropzone modules__grid"
                    :data-module-id="computedState.rule.ruleID"
                    .module="computedState.rule"
                    @drop.prevent="dropOnRule" @dragenter.prevent @dragover.prevent
                >
                    <div v-if="computedState.rule.modules.length < 1">Drag rules from the library below here, or create your own.</div>
                    <module
                        v-for="module in computedState.rule.modules"
                        :key="module"
                        @click="handleClickEditModule"
                        :module="module"
                        draggable="true"
                        @dragstart="rearrangeModule"
                    ></module>
                </div>
            </div>
            <div class="module-editor__wrapper">
                <div class="module-editor">
                    <module
                        class="module-editor__label"
                        hide-submodules
                        :module="computedState.editor.module"
                        draggable="false"
                        v-if="computedState.editor.module.name"
                    ></module>
                    <div class="module-editor__right">
                        <vue-button class="success" :icon="icons.plus" @click="clickAddModule" v-if="!moduleContains(computedState.editor.module) && computedState.editor.module && computedState.editor.module.name">Add</vue-button>
                        <vue-button class="danger" :icon="icons.minus" @click="clickRemoveModule" v-if="moduleContains(computedState.editor.module)">Remove</vue-button>
                    </div>
                    <div class="module-editor__fields">
                        <div class="label-group">
                            <label class="label">
                                <span>Module name:</span>
                                <input class="input-stack" type="text" v-model="computedState.editor.module.name" @change="computedState.editor.module.moduleID = slugify(computedState.editor.module.name)">
                            </label>
                            <label class="label">
                                <span>Icon:</span>
                                <div class="dropdown">
                                    <label v-for="(icon, iconName, idx) in moduleIcons" :key="idx" :class="{ selected: computedState.editor.module.icon == icon }">
                                        <input type="radio" id="" :selected="computedState.editor.module.icon == icon" :value="icon" v-model="computedState.editor.module.icon">
                                        <div><img :src="icon" :alt="iconName"></div>
                                    </label>
                                    <label class="default"><div><img :src="icons.blank"></div></label>
                                </div>
                            </label>
                        </div>
                        <label class="label">
                            <span>Module Summary:</span>
                            <textarea v-model="computedState.editor.module.summary"></textarea>
                        </label>

                        <label class="label configs">
                          <table>
                            <tr v-for="(value, key) in computedState.editor.module.config">
                              <td>[[key]]</td>
                              <td><input type="text"
                                    v-model="computedState.editor.module.config[key]" /></td>
                              <td style="vertical-align: initial">
                                <span class="config-button"
                                        @click="removeConfig([[key]])">
                                  <img :src="icons.minus" alt="Remove">
                                </span>
                              </td>
                            </tr>
                            <tr >
                              <td><input id="newConfigKey"
                                         type="text"
                                         value="Configuration" /></td>
                              <td>
                                <input id="newConfigValue"
                                         type="text"
                                         value="Value" /></td>
                              <td style="vertical-align: initial">
                                <span class="config-button"
                                        @click="addConfig">
                                  <img :src="icons.plus" alt="Add">
                                </span>
                              </td>
                            </tr>
                          </table>
                        </label>
                        
                        <!-- Working on custom module library

                            <div class="label-group">
                            <label class="label">
                                <span>Module ID:</span>
                                <input type="text" v-model="computedState.editor.module.moduleID">
                            </label>
                            <label class="label">
                                <span>Type:</span>
                                <input type="text" v-model="computedState.editor.module.type">
                            </label>
                        </div>
                        <div class="modules__grid" v-if="computedState.editor.module.modules">
                            <module
                                v-for="(module, idx) in computedState.editor.module.modules"
                                :key="idx"
                                @click="handleClickEditModule"
                                :module="module"
                            ></module>
                        </div>
                        <label for="">
                            <vue-button @click="saveEditor">Save</vue-button>
                        </label>
                        <label for="" v-if="customModules.includes(computedState.editor.module)">
                            <vue-button @click="deleteModule(computedState.editor.module)">Delete</vue-button>
                        </label> -->
                    </div>
                </div>
                <div class="label-group is-mobile">
                    <div class="module" @click="newCustomModule">
                      <span class="plus"><img :src="icons.plus" alt="Add"></span>
                      Create Custom Module
                    </div>
                    <div class="module-editor__empty">
                        <small>Or click a module to start editing it.</small>
                    </div>
                </div>
            </div>
            <div class="modules">
                <div class="tabs">
                    <div class="tab__control" v-for="(type, name) in moduleTypes" :key="name" @click="moduleLibrary = name" :class="{ active: moduleLibrary == name}">
                        <img :src="type.icon" :alt="name"><span class="tab__control-name">[[ name ]]</span>
                    </div>
                </div>
                <div class="tab__pane">
                    <div class="modules__type" v-for="(type, name) in moduleTypes" :key="name" v-show="moduleLibrary == name" :test="name">
                        <p>[[ type.question ]]</p>
                        <div class="modules__grid">
                            <module
                                v-for="(module, index) in getModulesByType(name)"
                                :key="index"
                                :module="module"
                                @click="handleClickCopyModule"
                                has-grain
                                draggable="true"
                                @dragstart="startDragModule"
                            ></module>
                        </div>
                    </div>
                </div>
            </div>
            <div class="creator">
                <label class="label" for="">
                    <span><img src="/assets/tabler_icons/pencil.svg"> Created By</span>
                    <input type="text" v-model="computedState.rule.creator.name" placeholder="your name">
                </label>
                <label class="label" for="">
                    <span><img src="/assets/tabler_icons/globe.svg"> Creator URL</span>
                    <input type="text" v-model="computedState.rule.creator.url" placeholder="https://yourwebsite.org">
                </label>
            </div>
        </div>
        
        <div class="rule" v-show="preview" v-if="!legacy">
            <div class="controls">
                <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit" v-if="!view">Edit</vue-button>
            </div>
            <h1><icon :icon="computedState.rule.icon" v-if="computedState.rule.icon"></icon> [[computedState.rule.name]]</h1>
            <p>[[computedState.rule.summary]]</p>
            <div class="modules__grid" :data-module-id="computedState.rule.ruleID" .module="computedState.rule">
                <module-display
                    v-for="module in computedState.rule.modules"
                    :key="module"
                    :module="module"
                ></module-display>
            </div>
            <ul class="module-list">
                <module-list v-for="(module, index) in computedState.rule.modules" :key="index" :module="module" v-if="computedState.rule.modules"></module-list>
            </ul>
            <div class="rule__creator" v-if="computedState.rule.creator.name">
                Created By
                <img src="/assets/tabler_icons/pencil.svg">
                <span v-if="computedState.rule.creator.url"><a :href="computedState.rule.creator.url">[[computedState.rule.creator.name]]</a></span>
                <span v-else>[[computedState.rule.creator.name]]</span>
            </div>
        </div>
        <div class="rule legacy" v-if="legacy && preview">
            <h1>[[computedState.rule.name]]</h1>
            <p>[[computedState.rule.summary]]</p>
            <div id="rule-builder" class="rulebuilder">
                <div id="module-input" class="rulebuilder_input modules__grid" v-html="computedState.rule.modules">
                </div>
                <div id="builder-field" class="rulebuilder_list">
                </div>
            </div>
            <div v-html="computedState.rule.rulewriter"></div>
            <div class="lineage" v-if="computedState.rule.lineage" v-html="computedState.rule.lineage"></div>
            <div class="rule__creator" v-if="computedState.rule.creatorName">
                Created By
                <img src="/assets/tabler_icons/pencil.svg">
                <span v-if="computedState.rule.creatorUrl"><a :href="computedState.rule.creatorUrl">[[computedState.rule.creatorName]]</a></span>
                <span v-else>[[computedState.rule.creatorName]]</span>
            </div>
        </div>
        <div class="btn-group" v-if="!legacy && !view">
            <vue-button class="primary is-large" @click="handleClickPublish" :icon="icons.publish" :loading="publishing">Publish</vue-button>
            <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
            <vue-button class="is-large" @click="handleClickImport" :icon="icons.upload">Import <div class="btn-cover">coming soon!</div></vue-button>
        </div>
        <div class="btn-group" v-if="view && !legacy">
            <vue-button class="primary is-large" @click="clickPreview" :icon="icons.fork">Fork &amp; Edit</vue-button>
            <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
        </div>
    </div>

    <div id="rule-export" v-show="false" v-if="!legacy">
        <h1>[[computedState.rule.name]]</h1>
        <p>[[computedState.rule.summary]]</p>
        <ul class="module-list">
            <module-list v-for="(module, index) in computedState.rule.modules" :key="index" :module="module" v-if="computedState.rule.modules" hide-icon></module-list>
        </ul>
        <hr>
        <h2>Created By</h2>
        <p v-if="computedState.rule.creator.url"><a :href="computedState.rule.creator.url">[[computedState.rule.creator.name]]</a></p>
        <p v-else>[[computedState.rule.creator.name]]</p>
    </div>
</div>

<script src="/assets/js/vue.global.js"></script>
<script src="/assets/DragDropTouch.js"></script>
<script src="https://unpkg.com/stein-js-client"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js" defer
    integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/turndown/dist/turndown.js" defer></script>

<script>

    let global = {};
    
    global.modules = [
        {% assign modules_array = site.modules | sort: "type" %}
            {% for module in modules_array %}
            {
                name: "{{ module.title | escape }}",
                url: "{{ site.baseurl }}{{ module.permalink }}",
                moduleID: "{{ module.slug }}",
                icon: "{{ site.data.module_types[module.type].icon | default: 'null'}}",
                summary: "{{ module.summary }}",
                type: "{{ module.type }}",
                content: `{{ module.content | markdownify }}`,
                {% if module.config %}
                config: {
                      {% for config in module.config %}
                      "{{ config[0] }}": "{{ config[1] }}"
                      {% unless forloop.last %}, {% endunless %}
                      {% endfor %}
                },
                {% endif %}
                readonly: true,
                modules: []
            } {% unless forloop.last %}, {% endunless %}
        {% endfor %}
    ];

    // global.url = "{{ site.url }}{{ site.baseurl }}";
    global.url = "https://communityrule.info";

    global.rule = {{ page.rule | jsonify }};

</script>
<script src="/assets/js/vue.rules.js"></script>