vue-rule-script.html 15 KB

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