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>
            <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>
                        <div v-if="!edit">
                            <input type="text" v-model="rule.name" @change="rule.ruleID = slugify(rule.name)">
                        </div>
                        <div v-else>
                            <!-- <input type="text" v-model="rule.name" readonly> -->
                            [[rule.name]]
                        </div>
                    </label>
                    <label class="label">
                        <span>Icon:</span>
                        <div class="dropdown">
                            <label v-for="(icon, iconName, idx) in ruleIcons" :key="idx"
                                :class="{ selected: rule.icon == icon }">
                                <input type="radio" id="" :selected="rule.icon == icon" :value="icon"
                                    v-model="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="rule.summary"></textarea>
                </label>
            </div>
            <div class="rule__modules" :class="{ target: holding }">
                <label class="label" for="" v-if="rule.name">
                    <icon :icon="rule.icon"></icon>[[rule.name]]
                </label>
                <div class="modules__dropzone modules__grid" :data-module-id="rule.ruleID" .module="rule"
                    @drop.prevent="dropOnRule" @dragenter.prevent @dragover.prevent>
                    <div v-if="rule.modules.length < 1">Drag rules from the library below here, or create your own.
                    </div>
                    <module v-for="module in rule.modules" :key="module" @click="handleClickEditModule" :module="module"
                        draggable="true" @dragstart="rearrangeModule"></module>
                </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 any module in categories like culture/decision/process/struture to start editing
                        it.</small>
                </div>
            </div>

            <div class="module-editor__wrapper">
                <div class="module-editor">
                    <module class="module-editor__label" hide-submodules :module="editor.module" draggable="false"
                        v-if="editor.module.name"></module>

                    <div class="module-editor__fields">
                        <div class="label-group">
                            <label class="label">
                                <span>Module name:</span>
                                <input class="input-stack" type="text" v-model="editor.module.name"
                                    @change="editor.module.moduleID = slugify(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: editor.module.icon == icon }">
                                        <input type="radio" id="" :selected="editor.module.icon == icon" :value="icon"
                                            v-model="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="editor.module.summary"></textarea>
                        </label>

                        <label class="label configs">
                            <table>
                                <tr v-for="(value, key) in editor.module.config">
                                    <td>[[key]]</td>
                                    <td><input type="text" v-model="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="editor.module.moduleID">
                            </label>
                            <label class="label">
                                <span>Type:</span>
                                <input type="text" v-model="editor.module.type">
                            </label>
                        </div>
                        <div class="modules__grid" v-if="editor.module.modules">
                            <module
                                v-for="(module, idx) in 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(editor.module)">
                            <vue-button @click="deleteModule(editor.module)">Delete</vue-button>
                        </label> -->
                    </div>
                </div>
                <div>
                    <vue-button class="success" :icon="icons.plus" @click="clickAddModule"
                        v-if="!moduleContains(editor.module) && editor.module">Add</vue-button>
                    <vue-button class="danger" :icon="icons.minus" @click="clickRemoveModule"
                        v-if="moduleContains(editor.module)">Remove</vue-button>
                </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="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="rule.creator.url" placeholder="https://yourwebsite.org">
                </label>
            </div>
        </div>

        <div class="rule" v-show="preview" v-if="!legacy">
            <div v-if="rule.deleted !== 1">
                <div class="controls">
                    <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit"
                        v-if="!view">Edit</vue-button>
                </div>
                <h1>
                    <icon :icon="rule.icon" v-if="rule.icon"></icon> [[rule.name]]
                </h1>
                <p>[[rule.summary]]</p>
                <div class="modules__grid" :data-module-id="rule.ruleID" .module="rule">
                    <module-display v-for="module in rule.modules" :key="module" :module="module"></module-display>
                </div>
                <ul class="module-list">
                    <module-list v-for="(module, index) in rule.modules" :key="index" :module="module"
                        v-if="rule.modules"></module-list>
                </ul>
                <div class="rule__creator" v-if="rule.creator.name">
                    Created By
                    <img src="/assets/tabler_icons/pencil.svg">
                    <span v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></span>
                    <span v-else>[[rule.creator.name]]</span>
                </div>
                <div v-if="rule.forked==1" class="rule__creator">
                    Fork History:
                    <!-- <div style="white-space: normal;">
                    <div v-for="ruleId1 in rule.edit_history" :key="ruleId1"
                        style="display: inline-block; margin-right: 10px;">
                        <a :href="getRuleLink(ruleId1)">[[
                            getRuleName(ruleId1) ]]</a>
                        <icon :icon="icons.arrow"></icon>
                    </div>
                </div> -->
                    <div v-for="(ruleId1, index) in rule.edit_history" :key="ruleId1" style="display: inline-block;">
                        <a :href="getRuleLink(ruleId1)"> [[ getRuleName(ruleId1) ]]</a>&nbsp;&nbsp;
                        <icon v-if="index < rule.edit_history.length - 1" :icon="icons.arrow"></icon>
                    </div>
                </div>
            </div>
            <div v-else>
                <p>This Rule is deleted by owner</p>

            </div>
        </div>
        <div class="rule legacy" v-if="legacy && preview">
            <h1>[[rule.name]]</h1>
            <p>[[rule.summary]]</p>
            <div id="rule-builder" class="rulebuilder">
                <div id="module-input" class="rulebuilder_input modules__grid" v-html="rule.modules">
                </div>
                <div id="builder-field" class="rulebuilder_list">
                </div>
            </div>
            <div v-html="rule.rulewriter"></div>
            <div class="lineage" v-if="rule.lineage" v-html="rule.lineage"></div>
            <div class="rule__creator" v-if="rule.creatorName">
                Created By
                <img src="/assets/tabler_icons/pencil.svg">
                <span v-if="rule.creatorUrl"><a :href="rule.creatorUrl">[[rule.creatorName]]</a></span>
                <span v-else>[[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 v-if="edit" class="primary is-large" @click="handleClickPublish" :icon="icons.edit"
                :loading="publishing">Edit</vue-button>
            <vue-button v-else 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 v-if="rule.deleted !== 1">
            <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="primary is-large" v-if="isOwner" @click="clickPreviewEdit" :icon="icons.edit">Edit
                </vue-button>
                <vue-button class="primary is-large" v-if="isAdmin" @click="clickDelete" :icon="icons.delete">Delete
                </vue-button>
                <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
            </div>
        </div>
    </div>

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