js/editor.js: separate content-editor component

diff --git a/src/newslash_web/public/js/editor.js b/src/newslash_web/public/js/editor.js
index 684dc1b..bd1cdea 100644 (file)
--- a/src/newslash_web/public/js/editor.js
+++ b/src/newslash_web/public/js/editor.js
@@ -2,24 +2,12 @@
 var editor = {};
 var vm;
 
-editor.run = function run (params) {
-  var data = {
-    item: {
-      title: "",
-      createtime: "",
-      author: "anonymous coward",
-      dept: "",
-      introtext: "",
-      bodytext: "",
-      add_related: "",
-      url: "",
-      mediaurl: "",
-      mediatype: "",
-      email: "",
-      commentstatus: "enabled",
-      display: 1,
-      submissioncopy: 0,
-    },
+editor.run = function run(params) {
+  const props = {
+    item: {},
+  };
+
+  const editor = {
     introtext: "",
     bodytext: "",
     title: "",
@@ -31,7 +19,6 @@ editor.run = function run (params) {
     showSubmit: false,
     message: "",
     action: "preview",
-    type: "",
 
     allowedTags: {
       "a": ["href"],
@@ -46,7 +33,7 @@ editor.run = function run (params) {
     },
   };
 
-  var watch = {
+  const watch = {
     introtext: function (val, oldVal) {
       this.item.introtext = (val.length > 0) ? this.quoteHtml(val) : "";
     },
@@ -58,13 +45,12 @@ editor.run = function run (params) {
     },
   };
 
-  var computed = {};
-  var methods = {
+  const methods = {
     showPreview: function (event) {
       this.action = "preview";
       this.message = "";
-      const url = this.urls[this.type];
-      this.$http.post(url, {item: this.$data.item, action: this.$data.action}).then(
+      const url = this.urls[this.item.type];
+      this.$http.post(url, {item: this.item, action: this.$data.action}).then(
         (response) => { // success
           this.message = "";
           this.previewTitle = response.body.item.title;
@@ -132,13 +118,39 @@ editor.run = function run (params) {
     },
   };
 
+  Vue.component('content-editor', {
+    template: '#content-editor',
+    props: props,
+    data: function () {return editor;},
+    watch: watch,
+    methods: methods,
+  });
+
+  var data = {
+    item: {
+      title: "",
+      createtime: "",
+      author: "anonymous coward",
+      dept: "",
+      introtext: "",
+      bodytext: "",
+      add_related: "",
+      url: "",
+      mediaurl: "",
+      mediatype: "",
+      email: "",
+      commentstatus: "enabled",
+      display: 1,
+      submissioncopy: 0,
+      type: '',
+    },
+  }
+
   const user = params.user || {};
   data.item.author = user.nickname;
-  data.type = params.type;
+  data.item.type = params.type;
 
   vm = new Vue({el: params.el,
                 data: data,
-                computed: computed,
-                watch: watch,
-                methods: methods});
+               });
 };

diff --git a/src/newslash_web/templates/journal/create.html.tt2 b/src/newslash_web/templates/journal/create.html.tt2
index 6493060..0ad9089 100644 (file)
--- a/src/newslash_web/templates/journal/create.html.tt2
+++ b/src/newslash_web/templates/journal/create.html.tt2
@@ -1,74 +1,20 @@
 [% WRAPPER common/layout sidebar=1 vue=1%]
-<div class="main-column">
-  <div class="post submission main-contents">
-    <div id="post-editor">
-      <h2>日記の編集</h2>
-      <div id="post-preview">
-        <div v-html="message" class="message"></div>
-        <h3>プレビュー：</h3>
-        [%-
-        story.title = "";
-        story.content_type = "journal";
-        story.author = user.nickname;
-        story.time = "";
-        story.introtext = "";
-        story.preview = 1;
-        story.commentcount = 0;
-        story.vue_template = 1;
-        -%]
-        [%- INCLUDE common/article hide_more_link=1 -%]
-      </div>
-
-      <form id="post-submission" v-show="showForm">
-        <p class="form-group">
-          <label for="post-title">タイトル：</label>
-          <input id="post-title" type="text" class="form-control" name="title" v-model="title" placeholder="タイトル" />
-        </p>
-        <p class="form-group">
-          <label for="post-introtext">本文：</label>
-          <textarea id="post-introtext" name="introtext" class="form-control" v-model="introtext" placeholder="本文をここに記述してください" ></textarea>
-        </p>
-        <div class="form-inline">
-          <p class="form-group">
-            <label for="post-commentstatus">コメント設定：</label>
-            <select id="post-commentstatus" class="form-control" name="commentstatus" v-model="commentstatus">
-              <option value="disabled">コメント無効</option>
-              <option value="enabled" selected="selected">コメント有効</option>
-              <option value="friends_fof_only">トモダチとそのトモダチ</option>
-              <option value="friends_only">トモダチのみ</option>
-              <option value="logged_in">ログインユーザのみ</option>
-              <option value="no_foe">テキじゃないみんな</option>
-              <option value="no_foe_eof">テキとトモダチのテキ以外</option>
-            </select>
-          </p>
-          <p class="checkbox">
-            <label>
-              <input type="checkbox" id="post-submissioncopy" name="submissioncopy" v-model="submissioncopy" value="1" />
-              日記のコピーをタレコミとして投稿する
-            </label>
-          </p>
-        </div>
-        <p>
-          <button type="submit" class="btn btn-default" v-on:click.prevent="showPreview">投稿確認</button>
-        </p>
-      </form>
 
-      <form id="post-submit" v-show="showSubmit">
-        <p>
-          <button type="submit" class="btn btn-default" v-on:click.prevent="postSubmission">投稿</button>
-          <button type="button" class="btn" v-on:click="leavePreview">戻る</button>
-        </p>
-      </form>
-      
-    </div><!-- #post-form -->
+<script type="text/x-template" id="content-editor">
+[% INCLUDE journal/editor %]
+</script>
 
+<div class="main-column">
+  <div class="post submission main-contents" id="journal-editor">
+    <content-editor :item="item"></content-editor>
+    [%#- INCLUDE journal/editor -%]
   </div>
 </div>
 [%- INCLUDE common/sidebar -%]
 
 <script src="/js/editor.js" ></script>
 <script>
-  editor.run({ type: 'journal', el: '#post-editor', user: user, });
+  editor.run({ type: 'journal', el: '#journal-editor', user: user, });
 </script>
 
 [% END %]

diff --git a/src/newslash_web/templates/journal/editor.html.tt2 b/src/newslash_web/templates/journal/editor.html.tt2
new file mode 100644 (file)
index 0000000..28766cf
--- /dev/null
+++ b/src/newslash_web/templates/journal/editor.html.tt2
@@ -0,0 +1,61 @@
+<div>
+  <h2>日記の編集</h2>
+  <div id="post-preview">
+    <div v-html="message" class="message"></div>
+    <h3>プレビュー：</h3>
+    [%-
+    story.title = "";
+    story.content_type = "journal";
+    story.author = user.nickname;
+    story.time = "";
+    story.introtext = "";
+    story.preview = 1;
+    story.commentcount = 0;
+    story.vue_template = 1;
+    -%]
+    [%- INCLUDE common/article hide_more_link=1 -%]
+  </div>
+
+  <form id="post-submission" v-show="showForm">
+    <p class="form-group">
+      <label for="post-title">タイトル：</label>
+      <input id="post-title" type="text" class="form-control" name="title" v-model="title" placeholder="タイトル" />
+    </p>
+    <p class="form-group">
+      <label for="post-introtext">本文：</label>
+      <textarea id="post-introtext" name="introtext" class="form-control" v-model="introtext" placeholder="本文をここに記述してください" ></textarea>
+    </p>
+    <div class="form-inline">
+      <p class="form-group">
+        <label for="post-commentstatus">コメント設定：</label>
+        <select id="post-commentstatus" class="form-control" name="commentstatus" v-model="commentstatus">
+          <option value="disabled">コメント無効</option>
+          <option value="enabled" selected="selected">コメント有効</option>
+          <option value="friends_fof_only">トモダチとそのトモダチ</option>
+          <option value="friends_only">トモダチのみ</option>
+          <option value="logged_in">ログインユーザのみ</option>
+          <option value="no_foe">テキじゃないみんな</option>
+          <option value="no_foe_eof">テキとトモダチのテキ以外</option>
+        </select>
+      </p>
+      <p class="checkbox">
+        <label>
+          <input type="checkbox" id="post-submissioncopy" name="submissioncopy" v-model="submissioncopy" value="1" />
+          日記のコピーをタレコミとして投稿する
+        </label>
+      </p>
+    </div>
+    <p>
+      <button type="submit" class="btn btn-default" v-on:click.prevent="showPreview">投稿確認</button>
+    </p>
+  </form>
+
+  <form id="post-submit" v-show="showSubmit">
+    <p>
+      <button type="submit" class="btn btn-default" v-on:click.prevent="postSubmission">投稿</button>
+      <button type="button" class="btn" v-on:click="leavePreview">戻る</button>
+    </p>
+  </form>
+  
+</div>
+