vue-rule-script.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  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="module-editor__wrapper">
  52. <div class="module-editor">
  53. <module
  54. class="module-editor__label"
  55. hide-submodules
  56. :module="editor.module"
  57. draggable="false"
  58. v-if="editor.module.name"
  59. ></module>
  60. <div class="module-editor__right">
  61. <vue-button class="success" :icon="icons.plus" @click="clickAddModule" v-if="!moduleContains(editor.module) && editor.module && editor.module.name">Add</vue-button>
  62. <vue-button class="danger" :icon="icons.minus" @click="clickRemoveModule" v-if="moduleContains(editor.module)">Remove</vue-button>
  63. </div>
  64. <div class="module-editor__fields">
  65. <div class="label-group">
  66. <label class="label">
  67. <span>Module name:</span>
  68. <input class="input-stack" type="text" v-model="editor.module.name" @change="editor.module.moduleID = slugify(editor.module.name)">
  69. </label>
  70. <label class="label">
  71. <span>Icon:</span>
  72. <div class="dropdown">
  73. <label v-for="(icon, iconName, idx) in moduleIcons" :key="idx" :class="{ selected: editor.module.icon == icon }">
  74. <input type="radio" id="" :selected="editor.module.icon == icon" :value="icon" v-model="editor.module.icon">
  75. <div><img :src="icon" :alt="iconName"></div>
  76. </label>
  77. <label class="default"><div><img :src="icons.blank"></div></label>
  78. </div>
  79. </label>
  80. </div>
  81. <label class="label">
  82. <span>Module Summary:</span>
  83. <textarea v-model="editor.module.summary"></textarea>
  84. </label>
  85. <!-- <div class="label-group">
  86. <label class="label">
  87. <span>Module ID:</span>
  88. <input type="text" v-model="editor.module.moduleID">
  89. </label>
  90. <label class="label">
  91. <span>Type:</span>
  92. <input type="text" v-model="editor.module.type">
  93. </label>
  94. </div>
  95. <div class="modules__grid" v-if="editor.module.modules">
  96. <module
  97. v-for="(module, idx) in editor.module.modules"
  98. :key="idx"
  99. @click="handleClickEditModule"
  100. :module="module"
  101. ></module>
  102. </div>
  103. <label for="">
  104. <vue-button @click="saveEditor">Save</vue-button>
  105. </label>
  106. <label for="" v-if="customModules.includes(editor.module)">
  107. <vue-button @click="deleteModule(editor.module)">Delete</vue-button>
  108. </label> -->
  109. </div>
  110. </div>
  111. <div class="label-group">
  112. <div class="module" @click="newCustomModule">
  113. Create Custom Module
  114. <span class="plus"><img :src="icons.plus" alt="Add"></span>
  115. </div>
  116. <div class="module-editor__empty">
  117. Or click a module to start editing it.
  118. </div>
  119. </div>
  120. </div>
  121. <div class="modules">
  122. <div class="tabs">
  123. <div class="tab__control" v-for="(type, name) in moduleTypes" :key="name" @click="moduleLibrary = name" :class="{ active: moduleLibrary == name}">
  124. <img :src="type.icon" :alt="name">[[ name ]]
  125. </div>
  126. </div>
  127. <div class="tab__pane">
  128. <div class="modules__type" v-for="(type, name) in moduleTypes" :key="name" v-show="moduleLibrary == name" :test="name">
  129. <p>[[ type.question ]]</p>
  130. <div class="modules__grid">
  131. <module
  132. v-for="(module, index) in getModulesByType(name)"
  133. :key="index"
  134. :module="module"
  135. @click="handleClickCopyModule"
  136. has-grain
  137. draggable="true"
  138. @dragstart="startDragModule"
  139. ></module>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <div class="creator">
  145. <label class="label" for="">
  146. <span><img src="/assets/tabler_icons/pencil.svg"> Created By</span>
  147. <input type="text" v-model="rule.creator.name" placeholder="your name">
  148. </label>
  149. <label class="label" for="">
  150. <span><img src="/assets/tabler_icons/globe.svg"> Creator URL</span>
  151. <input type="text" v-model="rule.creator.url" placeholder="https://yourwebsite.org">
  152. </label>
  153. </div>
  154. </div>
  155. <div class="rule" v-show="preview" v-if="!legacy">
  156. <div class="controls">
  157. <vue-button class="primary is-large" @click="clickPreview" :icon="icons.edit" v-if="!view">Edit</vue-button>
  158. </div>
  159. <h1><icon :icon="rule.icon" v-if="rule.icon"></icon> [[rule.name]]</h1>
  160. <p>[[rule.summary]]</p>
  161. <div class="modules__grid" :data-module-id="rule.ruleID" .module="rule">
  162. <module-display
  163. v-for="module in rule.modules"
  164. :key="module"
  165. :module="module"
  166. ></module-display>
  167. </div>
  168. <ul class="module-list">
  169. <module-list v-for="(module, index) in rule.modules" :key="index" :module="module" v-if="rule.modules"></module-list>
  170. </ul>
  171. <div class="rule__creator" v-if="rule.creator.name">
  172. Created By
  173. <img src="/assets/tabler_icons/pencil.svg">
  174. <span v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></span>
  175. <span v-else>[[rule.creator.name]]</span>
  176. </div>
  177. </div>
  178. <div class="rule legacy" v-if="legacy && preview">
  179. <h1>[[rule.name]]</h1>
  180. <p>[[rule.summary]]</p>
  181. <div id="rule-builder" class="rulebuilder">
  182. <div id="module-input" class="rulebuilder_input modules__grid" v-html="rule.modules">
  183. </div>
  184. <div id="builder-field" class="rulebuilder_list">
  185. </div>
  186. </div>
  187. <div v-html="rule.rulewriter"></div>
  188. <div class="lineage" v-if="rule.lineage" v-html="rule.lineage"></div>
  189. <div class="rule__creator" v-if="rule.creatorName">
  190. Created By
  191. <img src="/assets/tabler_icons/pencil.svg">
  192. <span v-if="rule.creatorUrl"><a :href="rule.creatorUrl">[[rule.creatorName]]</a></span>
  193. <span v-else>[[rule.creatorName]]</span>
  194. </div>
  195. </div>
  196. <div class="btn-group" v-if="!legacy && !view">
  197. <vue-button class="primary is-large" @click="handleClickPublish" :icon="icons.publish" :loading="publishing">Publish</vue-button>
  198. <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
  199. <vue-button class="is-large" @click="handleClickExport" :icon="icons.export">Export</vue-button>
  200. <vue-button class="is-large" @click="handleClickPublish" :icon="icons.upload">Import <div class="btn-cover">coming soon!</div></vue-button>
  201. </div>
  202. <div class="btn-group" v-if="view && !legacy">
  203. <vue-button class="primary is-large" @click="clickPreview" :icon="icons.fork">Fork &amp; Edit</vue-button>
  204. <vue-button class="is-large" @click="handleClickDownload" :icon="icons.download">Download</vue-button>
  205. </div>
  206. </div>
  207. <div id="rule-export" v-show="false" v-if="!legacy">
  208. <h1>[[rule.name]]</h1>
  209. <p>[[rule.summary]]</p>
  210. <ul class="module-list">
  211. <module-list v-for="(module, index) in rule.modules" :key="index" :module="module" v-if="rule.modules" hide-icon></module-list>
  212. </ul>
  213. <hr>
  214. <h2>Created By</h2>
  215. <p v-if="rule.creator.url"><a :href="rule.creator.url">[[rule.creator.name]]</a></p>
  216. <p v-else>[[rule.creator.name]]</p>
  217. </div>
  218. </div>
  219. <script src="/assets/js/vue.global.js"></script>
  220. <script src="/assets/DragDropTouch.js"></script>
  221. <script src="https://unpkg.com/stein-js-client"></script>
  222. <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js" defer
  223. integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
  224. crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  225. <script src="https://unpkg.com/turndown/dist/turndown.js" defer></script>
  226. <script>
  227. let global = {};
  228. global.modules = [
  229. {% assign modules_array = site.modules | sort: "type" %}
  230. {% for module in modules_array %}
  231. {
  232. name: "{{ module.title | escape }}",
  233. url: "{{ site.baseurl }}{{ module.permalink }}",
  234. moduleID: "{{ module.slug }}",
  235. icon: "{{ site.data.module_types[module.type].icon | default: 'null'}}",
  236. summary: "{{ module.summary }}",
  237. type: "{{ module.type }}",
  238. content: `{{ module.content | markdownify }}`,
  239. readonly: true,
  240. modules: []
  241. } {% unless forloop.last %}, {% endunless %}
  242. {% endfor %}
  243. ];
  244. // global.url = "{{ site.url }}{{ site.baseurl }}";
  245. global.url = "https://communityrule.info";
  246. global.rule = {{ page.rule | jsonify }};
  247. </script>
  248. <script src="/assets/js/vue.rules.js"></script>