vue-rule-script.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <div id="app">
  2. <div class="app-wrapper" :class="{'is-preview':preview}">
  3. <div class="editor" v-if="!preview && !legacy" v-cloak>
  4. <div class="controls">
  5. <vue-button class="primary is-large" @click="clickPreview" :icon="icons.view">Preview</vue-button>
  6. </div>
  7. <div class="details">
  8. <div class="label-group">
  9. <label class="label" for="">
  10. <span>What is the community's name?</span>
  11. <input type="text" v-model="rule.name" @change="rule.ruleID = slugify(rule.name)">
  12. </label>
  13. <label class="label">
  14. <span>Icon:</span>
  15. <div class="dropdown">
  16. <label v-for="(icon, iconName, idx) in ruleIcons" :key="idx"
  17. :class="{ selected: rule.icon == icon }">
  18. <input type="radio" id="" :selected="rule.icon == icon" :value="icon" v-model="rule.icon">
  19. <div><img :src="icon" :alt="iconName"></div>
  20. </label>
  21. <label class="default">
  22. <div><img :src="icons.blank"></div>
  23. </label>
  24. </div>
  25. </label>
  26. </div>
  27. <label class="label" for="">
  28. <span>Summarize its structure:</span>
  29. <textarea v-model="rule.summary"></textarea>
  30. </label>
  31. </div>
  32. <!-- edit mode -->
  33. <div class="rule__modules" :class="{ target: holding }">
  34. <label class="label" for="" v-if="rule.name"><icon style="width: 24px; height: 24px;" :icon="rule.icon"></icon>[[rule.name]]</label>
  35. <div
  36. class="modules__dropzone modules__grid"
  37. :data-module-id="rule.ruleID"
  38. .module="rule"
  39. @drop.prevent="dropOnRule" @dragenter.prevent @dragover.prevent
  40. >
  41. <div v-if="rule.modules.length < 1">Drag rules from the library below here, or create your own.</div>
  42. <module
  43. v-for="module in rule.modules"
  44. :key="module"
  45. @click="handleClickEditModule"
  46. :module="module"
  47. draggable="true"
  48. @dragstart="rearrangeModule"
  49. ></module>
  50. </div>
  51. </div>
  52. <div class="label-group is-mobile">
  53. <div class="module" @click="newCustomModule">
  54. <span class="plus"><img :src="icons.plus" alt="Add"></span>
  55. Create Custom Module
  56. </div>
  57. <div class="module-editor__empty">
  58. <small>Or click any module in categories like culture/decision/process/struture to start editing it.</small>
  59. </div>
  60. </div>
  61. <div class="module-editor__wrapper">
  62. <div class="module-editor">
  63. <module
  64. class="module-editor__label"
  65. hide-submodules
  66. :module="editor.module"
  67. draggable="false"
  68. v-if="editor.module.name"
  69. ></module>
  70. <div class="module-editor__fields">
  71. <div class="label-group">
  72. <label class="label">
  73. <span>Module name:</span>
  74. <input class="input-stack" type="text" v-model="editor.module.name" @change="editor.module.moduleID = slugify(editor.module.name)">
  75. </label>
  76. <label class="label">
  77. <span>Icon:</span>
  78. <div class="dropdown">
  79. <label v-for="(icon, iconName, idx) in moduleIcons" :key="idx" :class="{ selected: editor.module.icon == icon }">
  80. <input type="radio" id="" :selected="editor.module.icon == icon" :value="icon" v-model="editor.module.icon">
  81. <div><img :src="icon" :alt="iconName"></div>
  82. </label>
  83. <label class="default"><div><img :src="icons.blank"></div></label>
  84. </div>
  85. </label>
  86. </div>
  87. <label class="label">
  88. <span>Module Summary:</span>
  89. <textarea v-model="editor.module.summary"></textarea>
  90. </label>
  91. <label class="label configs">
  92. <table>
  93. <tr v-for="(value, key) in editor.module.config">
  94. <td>[[key]]</td>
  95. <td><input type="text"
  96. v-model="editor.module.config[key]" /></td>
  97. <td style="vertical-align: initial">
  98. <span class="config-button"
  99. @click="removeConfig([[key]])">
  100. <img :src="icons.minus" alt="Remove">
  101. </span>
  102. </td>
  103. </tr>
  104. <tr >
  105. <td><input id="newConfigKey"
  106. type="text"
  107. value="Configuration" /></td>
  108. <td>
  109. <input id="newConfigValue"
  110. type="text"
  111. value="Value" /></td>
  112. <td style="vertical-align: initial">
  113. <span class="config-button"
  114. @click="addConfig">
  115. <img :src="icons.plus" alt="Add">
  116. </span>
  117. </td>
  118. </tr>
  119. </table>
  120. </label>
  121. <!-- Working on custom module library
  122. <div class="label-group">
  123. <label class="label">
  124. <span>Module ID:</span>
  125. <input type="text" v-model="editor.module.moduleID">
  126. </label>
  127. <label class="label">
  128. <span>Type:</span>
  129. <input type="text" v-model="editor.module.type">
  130. </label>
  131. </div>
  132. <div class="modules__grid" v-if="editor.module.modules">
  133. <module
  134. v-for="(module, idx) in editor.module.modules"
  135. :key="idx"
  136. @click="handleClickEditModule"
  137. :module="module"
  138. ></module>
  139. </div>
  140. <label for="">
  141. <vue-button @click="saveEditor">Save</vue-button>
  142. </label>
  143. <label for="" v-if="customModules.includes(editor.module)">
  144. <vue-button @click="deleteModule(editor.module)">Delete</vue-button>
  145. </label> -->
  146. </div>
  147. </div>
  148. <div>
  149. <vue-button class="success" :icon="icons.plus" @click="clickAddModule" v-if="!moduleContains(editor.module) && editor.module">Add</vue-button>
  150. <vue-button class="danger" :icon="icons.minus" @click="clickRemoveModule" v-if="moduleContains(editor.module)">Remove</vue-button>
  151. </div>
  152. </div>
  153. <div class="modules">
  154. <div class="tabs">
  155. <div class="tab__control" v-for="(type, name) in moduleTypes" :key="name" @click="moduleLibrary = name" :class="{ active: moduleLibrary == name}">
  156. <img :src="type.icon" :alt="name"><span class="tab__control-name">[[ name ]]</span>
  157. </div>
  158. </div>
  159. <div class="tab__pane">
  160. <div class="modules__type" v-for="(type, name) in moduleTypes" :key="name" v-show="moduleLibrary == name" :test="name">
  161. <p>[[ type.question ]]</p>
  162. <div class="modules__grid">
  163. <module
  164. v-for="(module, index) in getModulesByType(name)"
  165. :key="index"
  166. :module="module"
  167. @click="handleClickCopyModule"
  168. has-grain
  169. draggable="true"
  170. @dragstart="startDragModule"
  171. ></module>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. <div class="creator">
  177. <label class="label" for="">
  178. <span><img src="/assets/tabler_icons/pencil.svg"> Created By</span>
  179. <input type="text" v-model="rule.creator.name" placeholder="your name">
  180. </label>
  181. <label class="label" for="">
  182. <span><img src="/assets/tabler_icons/globe.svg"> Creator URL</span>
  183. <input type="text" v-model="rule.creator.url" placeholder="https://yourwebsite.org">
  184. </label>
  185. </div>
  186. </div>
  187. <!-- <!- preview mode -->
  188. <div class="rule" v-show="preview" v-if="!legacy">
  189. <div class="controls">
  190. <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit" v-if="!view">Edit</vue-button>
  191. </div>
  192. <h1><icon :icon="rule.icon" v-if="rule.icon"></icon> [[ rule.name ]]</h1>
  193. <p v-if="rule.summary">[[ rule.summary ]]</p>
  194. <div class="modules__grid" :data-module-id="rule.ruleID" .module="rule">
  195. <module-display
  196. v-for="module in rule.modules"
  197. :key="module"
  198. :module="module"
  199. ></module-display>
  200. </div>
  201. <ul class="module-list">
  202. <module-list v-for="(module, index) in rule.modules" :key="index" :module="module" v-if="rule.modules"></module-list>
  203. </ul>
  204. <div class="rule__creator" v-if="rule.creator.name">
  205. Created By
  206. <img src="/assets/tabler_icons/pencil.svg">
  207. <span v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></span>
  208. <span v-else>[[rule.creator.name]]</span>
  209. </div>
  210. </div>
  211. <div class="rule legacy" v-if="legacy && preview">
  212. <h1>[[rule.name]]</h1>
  213. <p>[[rule.summary]]</p>
  214. <div id="rule-builder" class="rulebuilder">
  215. <div id="module-input" class="rulebuilder_input modules__grid" v-html="rule.modules">
  216. </div>
  217. <div id="builder-field" class="rulebuilder_list">
  218. </div>
  219. </div>
  220. <div v-html="rule.rulewriter"></div>
  221. <div class="lineage" v-if="rule.lineage" v-html="rule.lineage"></div>
  222. <div class="rule__creator" v-if="rule.creatorName">
  223. Created By
  224. <img src="/assets/tabler_icons/pencil.svg">
  225. <span v-if="rule.creatorUrl"><a :href="rule.creatorUrl">[[rule.creatorName]]</a></span>
  226. <span v-else>[[rule.creatorName]]</span>
  227. </div>
  228. </div>
  229. <div class="btn-group" v-if="!legacy && !view">
  230. <vue-button class="primary is-large" @click="handleClickPublish" :icon="icons.publish" :loading="publishing">Publish</vue-button>
  231. <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
  232. <vue-button class="is-large" @click="handleClickImport" :icon="icons.upload">Import <div class="btn-cover">coming soon!</div></vue-button>
  233. </div>
  234. <div class="btn-group" v-if="view && !legacy">
  235. <vue-button class="primary is-large" @click="clickPreview" :icon="icons.fork">Fork &amp; Edit</vue-button>
  236. <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
  237. </div>
  238. </div>
  239. <div id="rule-export" v-show="false" v-if="!legacy">
  240. <h1>[[ rule.name ]]</h1>
  241. <p v-if="rule.summary">[[ rule.summary ]]</p>
  242. <ul class="module-list">
  243. <module-list v-for="(module, index) in rule.modules" :key="index" :module="module" v-if="rule.modules" hide-icon></module-list>
  244. </ul>
  245. <hr>
  246. <h2>Created By</h2>
  247. <p v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></p>
  248. <p v-else>[[rule.creator.name]]</p>
  249. </div>
  250. </div>
  251. <script src="/assets/js/vue.global.js"></script>
  252. <script src="/assets/DragDropTouch.js"></script>
  253. <script src="https://unpkg.com/stein-js-client"></script>
  254. <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js" defer
  255. integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
  256. crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  257. <script src="https://unpkg.com/turndown/dist/turndown.js" defer></script>
  258. <script>
  259. let global = {};
  260. global.modules = [
  261. {% assign modules_array = site.modules | sort: "type" %}
  262. {% for module in modules_array %}
  263. {
  264. name: "{{ module.title | escape }}",
  265. url: "{{ site.baseurl }}{{ module.permalink }}",
  266. moduleID: "{{ module.slug }}",
  267. icon: "{{ site.data.module_types[module.type].icon | default: 'null'}}",
  268. summary: "{{ module.summary }}",
  269. type: "{{ module.type }}",
  270. content: `{{ module.content | markdownify }}`,
  271. {% if module.config %}
  272. config: {
  273. {% for config in module.config %}
  274. "{{ config[0] }}": "{{ config[1] }}"
  275. {% unless forloop.last %}, {% endunless %}
  276. {% endfor %}
  277. },
  278. {% endif %}
  279. readonly: true,
  280. modules: []
  281. } {% unless forloop.last %}, {% endunless %}
  282. {% endfor %}
  283. ];
  284. // global.url = "{{ site.url }}{{ site.baseurl }}";
  285. global.url = "https://communityrule.info";
  286. global.rule = {{ page.rule | jsonify }};
  287. </script>
  288. <script src="/assets/js/vue.rules.js"></script>