Browse code

avoid rendering template on page load

devnewton authored on 12/01/2018 13:29:12
Showing 3 changed files
... ...
@@ -15,5 +15,5 @@ define("TAAB_BACKEND_MAX_POSTS", 200);
15 15
 define("TAAB_MAX_POST_LENGTH", 512);
16 16
 define("TAAB_MAX_LOGIN_LENGTH", 32);
17 17
 define("TAAB_MAX_INFO_LENGTH", 32);
18
-define("TAAB_DEV", true)
18
+define("TAAB_DEV", false)
19 19
 ?>
... ...
@@ -8,24 +8,29 @@
8 8
         <link rel="stylesheet" href="css/taab.css">
9 9
     </head>
10 10
     <body class="c-text">
11
-        <main id="taab-coincoin" class="o-container o-container--super u-window-box--tiny" v-on:click="clicked" v-on:mouseover="mouseEntered" v-on:mouseout="mouseLeaved">
12
-            <form class="c-input-group" v-on:submit.prevent="post" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autofocus>
13
-                <div v-if="room" class="c-button">#{{ room }}</div>
14
-                <div class="o-field">
15
-                    <input v-model="message" ref="message" name="message" placeholder="message or command (/nick, /join)" class="c-field" spellcheck="true">
16
-                </div>
17
-                <button type="submit" class="c-button c-button--info">Post</button>
18
-            </form>
19
-            <transition-group name="posts" tag="div">
20
-                <template v-for="post of posts">
21
-                    <article v-bind:key="post.id">
22
-                        <time v-bind:title="post.time">{{ post.time.substr(11) }}</time>
23
-                        <cite v-bind:title="post.info">{{ post.login || post.info }}</cite>
24
-                        <p v-html="post.message"></p>
25
-                    </article>
26
-                </template>
27
-            </transition-group>
28
-        </main>
11
+        <div id="taab-app">
12
+            <taab-coincoin></taab-coincoin>
13
+        </div>
14
+        <template id="taab-coincoin">
15
+            <main class="o-container o-container--super u-window-box--tiny" v-on:click="clicked" v-on:mouseover="mouseEntered" v-on:mouseout="mouseLeaved">
16
+                <form class="c-input-group" v-on:submit.prevent="post" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autofocus>
17
+                    <div v-if="room" class="c-button">#{{ room }}</div>
18
+                    <div class="o-field">
19
+                        <input v-model="message" ref="message" name="message" placeholder="message or command (/nick, /join)" class="c-field" spellcheck="true">
20
+                    </div>
21
+                    <button type="submit" class="c-button c-button--info">Post</button>
22
+                </form>
23
+                <transition-group name="posts" tag="div">
24
+                    <template v-for="post of posts">
25
+                        <article v-bind:key="post.id">
26
+                            <time v-bind:title="post.time">{{ post.time.substr(11) }}</time>
27
+                            <cite v-bind:title="post.info">{{ post.login || post.info }}</cite>
28
+                            <p v-html="post.message"></p>
29
+                        </article>
30
+                    </template>
31
+                </transition-group>
32
+            </main>
33
+        </template>
29 34
         <footer class="o-container o-container--xsmall u-pillar-box--xsmall u-xsmall">Discussion powered by <a href="https://github.com/devnewton/taab">taab</a></footer>
30 35
         <?php if (TAAB_DEV): ?>
31 36
             <script src="js/vue-dev.js" defer></script>
... ...
@@ -11,12 +11,14 @@ document.addEventListener('DOMContentLoaded', function () {
11 11
         }
12 12
     }
13 13
 
14
-    new Vue({
15
-        el: '#taab-coincoin',
16
-        data: {
17
-            room: hashToRoom(),
18
-            message: "",
19
-            posts: []
14
+    Vue.component("taab-coincoin", {
15
+        template: '#taab-coincoin',
16
+        data: function () {
17
+            return {
18
+                room: hashToRoom(),
19
+                message: "",
20
+                posts: []
21
+            };
20 22
         },
21 23
         methods: {
22 24
             post: function (e) {
... ...
@@ -185,4 +187,8 @@ document.addEventListener('DOMContentLoaded', function () {
185 187
         }
186 188
     });
187 189
 
190
+    new Vue({
191
+        el: '#taab-app',
192
+    })
193
+
188 194
 });
189 195
\ No newline at end of file