From d609f8caa245d136f28365f6292dbc549eed23a3 Mon Sep 17 00:00:00 2001
From: Heerko <heerko@swummoq.net>
Date: Thu, 1 Jul 2021 12:59:35 +0200
Subject: [PATCH 1/2] Move styles to inline stylesheet

---
 front/src/App.vue                        | 43 ++++++++++++++++--
 front/src/components/Content/Message.vue |  2 +-
 front/src/components/Rules/Styles.vue    | 55 ++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 front/src/components/Rules/Styles.vue

diff --git a/front/src/App.vue b/front/src/App.vue
index 2b98f27..73490eb 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -1,5 +1,7 @@
 <template>
   <div id="app" :class="{ mobile: isMobile }">
+    <Styles />
+
     <!-- <header>
       <code>Zulip URL: {{ api.zulip.config.realm }}</code>
     </header> -->
@@ -16,10 +18,13 @@
 <script>
 import { mapState } from "vuex";
 import api from "./api";
+import Styles from "./components/Rules/Styles.vue";
 
 export default {
   name: "App",
-  components: {},
+  components: {
+    Styles,
+  },
   data() {
     return {
       api: api,
@@ -125,8 +130,40 @@ export default {
       return { text, weight };
     },
 
-    toEmojiCode: (emoji) =>
-      emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16)),
+    toEmojiCode: (emoji) => {
+      console.log(emoji);
+      emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
+    },
+
+    // toEmojiCode: (emoji) => {
+    //   var t = this;
+    //   emoji.replace(/\p{Emoji}/gu, function (m) {
+    //     console.log(m, t.toUTF16);
+    //     this.toUTF16(m.codePointAt(0));
+    //   });
+    //   return emoji;
+    // },
+
+    toUTF16: (codePoint) => {
+      var TEN_BITS = parseInt("1111111111", 2);
+
+      if (codePoint <= 0xffff) {
+        return this.u(codePoint);
+      }
+      codePoint -= 0x10000;
+
+      // Shift right to get to most significant 10 bits
+      var leadSurrogate = 0xd800 + (codePoint >> 10);
+
+      // Mask to get least significant 10 bits
+      var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
+
+      return this.u(leadSurrogate) + this.u(tailSurrogate);
+    },
+
+    u: (codeUnit) => {
+      return "\\u" + codeUnit.toString(16).toUpperCase();
+    },
 
     // minimal validation. rules have to contain a colon and semicolon
     validateRule: (rule) => { 
diff --git a/front/src/components/Content/Message.vue b/front/src/components/Content/Message.vue
index ebbdd30..57ecde4 100644
--- a/front/src/components/Content/Message.vue
+++ b/front/src/components/Content/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :class="classes" :style="styles">
+  <span :class="classes" :x-style="styles">
     <!-- {{ $md.renderInline(content) }} -->
     <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
   </span>
diff --git a/front/src/components/Rules/Styles.vue b/front/src/components/Rules/Styles.vue
new file mode 100644
index 0000000..65485bb
--- /dev/null
+++ b/front/src/components/Rules/Styles.vue
@@ -0,0 +1,55 @@
+<script>
+export default {
+  name: "Styles",
+  computed: {
+    rules() {
+      return this.$store.state.rules;
+    },
+  },
+  data: function(){
+    return {
+      el: null,
+    }
+  },
+  methods: {
+    generateStyleRules() {
+      let styles = "";
+      this.rules.map((r)=>{
+        styles  += r.className
+        if( this.containsEmoji(r.className)){
+          styles += ", .u" + this.toEmojiCode(r.className)
+        }
+        styles += "{"
+        r.rules.map((s)=>{
+          styles += s.text;
+        })
+        styles += "}"
+      })
+      return styles;
+    },
+    insertStyleElement() {
+      var style = document.createElement('style');
+      style.innerText = this.generateStyleRules();
+      return style
+    },
+    containsEmoji(str) {
+      // Regular expression to match emoji
+      const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi;
+      return regexExp.test(str); // true
+    },
+    toEmojiCode(emoji) {
+      return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
+    },
+
+  },
+  mounted: function() {
+    this.el = document.head.appendChild(this.insertStyleElement());
+  },
+  watch: {
+    rules() {
+      let style = this.insertStyleElement();
+      this.el.parentNode.replaceChild(style, this.el);
+    }
+  }
+};
+</script>
\ No newline at end of file

From 864bd0aaa7f717a0a07b731ef7cf8b6b40412307 Mon Sep 17 00:00:00 2001
From: Heerko <heerko@swummoq.net>
Date: Thu, 1 Jul 2021 13:53:46 +0200
Subject: [PATCH 2/2] moved emoji parsing to store

---
 front/src/App.vue         | 91 ++-------------------------------------
 front/src/mixins/emoji.js | 34 +++++++++++++++
 front/src/store/index.js  | 56 +++++++++++++++++++++++-
 3 files changed, 93 insertions(+), 88 deletions(-)
 create mode 100644 front/src/mixins/emoji.js

diff --git a/front/src/App.vue b/front/src/App.vue
index 73490eb..b1e09ff 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -77,98 +77,15 @@ export default {
         console.log("messages!",result)
         this.$store.commit(
           "setRules",
-          result.messages
-            .filter((m) => m.content.match(/\/poll/gm))
-            .map((m) => this.toCSS(m))
+          result
+          // result.messages
+          //   .filter((m) => m.content.match(/\/poll/gm))
+          //   .map((m) => this.toCSS(m))
         );
       });
 
       api.zulip.listen(this.zulipClient);
     },
-
-    toCSS(poll) {
-      let className = "",
-        emoji_code = "",
-        options = [],
-        rules = [],
-        subs = poll.submessages.map((s) => JSON.parse(s.content));
-      subs.forEach((sub) => {
-        if (sub.widget_type && sub.widget_type == "poll") {
-          className = sub.extra_data.question;
-          emoji_code = this.toEmojiCode(className);
-          // console.log(emoji_code);
-          options = sub.extra_data.options;
-          if (options) {
-            options.forEach((option) => {
-              let r = this.constructRule(option, options, subs);
-              if (this.validateRule(r)) {
-                rules.push(r);
-              }
-            });
-          }
-        } else if (sub.type && sub.type == "new_option") {
-          let r = this.constructRule(sub.option, options, subs);
-          if (this.validateRule(r)) {
-            rules.push(r);
-          }
-        }
-      });
-      return { className, emoji_code, rules };
-    },
-
-    constructRule(option, options, subs) {
-      const text = option,
-        votes = subs.filter(
-          (s) =>
-            s.type == "vote" &&
-            s.key.replace("canned,", "") == options.indexOf(option)
-        ),
-        weight =
-          votes.length > 0
-            ? votes.map((s) => s.vote).reduce((a, b) => a + b)
-            : 0;
-      return { text, weight };
-    },
-
-    toEmojiCode: (emoji) => {
-      console.log(emoji);
-      emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
-    },
-
-    // toEmojiCode: (emoji) => {
-    //   var t = this;
-    //   emoji.replace(/\p{Emoji}/gu, function (m) {
-    //     console.log(m, t.toUTF16);
-    //     this.toUTF16(m.codePointAt(0));
-    //   });
-    //   return emoji;
-    // },
-
-    toUTF16: (codePoint) => {
-      var TEN_BITS = parseInt("1111111111", 2);
-
-      if (codePoint <= 0xffff) {
-        return this.u(codePoint);
-      }
-      codePoint -= 0x10000;
-
-      // Shift right to get to most significant 10 bits
-      var leadSurrogate = 0xd800 + (codePoint >> 10);
-
-      // Mask to get least significant 10 bits
-      var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
-
-      return this.u(leadSurrogate) + this.u(tailSurrogate);
-    },
-
-    u: (codeUnit) => {
-      return "\\u" + codeUnit.toString(16).toUpperCase();
-    },
-
-    // minimal validation. rules have to contain a colon and semicolon
-    validateRule: (rule) => { 
-      return rule.text.match(/.+:.+;/gm);
-    },
   },
 };
 </script>
diff --git a/front/src/mixins/emoji.js b/front/src/mixins/emoji.js
new file mode 100644
index 0000000..97c2177
--- /dev/null
+++ b/front/src/mixins/emoji.js
@@ -0,0 +1,34 @@
+let toUTF16 = (codePoint) => {
+  var TEN_BITS = parseInt("1111111111", 2);
+  if (codePoint <= 0xffff) {
+    return u(codePoint);
+  }
+  codePoint -= 0x10000;
+  // Shift right to get to most significant 10 bits
+  var leadSurrogate = 0xd800 + (codePoint >> 10);
+  // Mask to get least significant 10 bits
+  var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
+  return u(leadSurrogate) + (tailSurrogate);
+}
+
+let u = (codeUnit) => {
+  return "\\u" + codeUnit.toString(16).toUpperCase();
+}
+
+export default {
+  methods: {
+    // toEmojiCode: (emoji) => {
+    //   console.log(emoji);
+    //   emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
+    // },
+    
+    toEmojiCode: (emoji) => {
+      emoji.replace(/\p{Emoji}/gu, function (m) {
+        toUTF16(m.codePointAt(0));
+      });
+      console.log(emoji)
+      return emoji;
+    },
+    
+  }
+}
\ No newline at end of file
diff --git a/front/src/store/index.js b/front/src/store/index.js
index f545766..d336fcd 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -1,4 +1,54 @@
 import { createStore } from 'vuex'
+import emoji from "../mixins/emoji";
+
+let toCSS = (poll) => {
+  let className = "",
+    emoji_code = "",
+    options = [],
+    rules = [],
+    subs = poll.submessages.map((s) => JSON.parse(s.content));
+  subs.forEach((sub) => {
+    if (sub.widget_type && sub.widget_type == "poll") {
+      className = sub.extra_data.question;
+      emoji_code = emoji.methods.toEmojiCode(className);
+      // console.log(emoji_code);
+      options = sub.extra_data.options;
+      if (options) {
+        options.forEach((option) => {
+          let r = constructRule(option, options, subs);
+          if (validateRule(r)) {
+            rules.push(r);
+          }
+        });
+      }
+    } else if (sub.type && sub.type == "new_option") {
+      let r = constructRule(sub.option, options, subs);
+      if (validateRule(r)) {
+        rules.push(r);
+      }
+    }
+  });
+  return { className, emoji_code, rules };
+}
+
+let constructRule = (option, options, subs) => {
+  const text = option,
+    votes = subs.filter(
+      (s) =>
+        s.type == "vote" &&
+        s.key.replace("canned,", "") == options.indexOf(option)
+    ),
+    weight =
+      votes.length > 0
+        ? votes.map((s) => s.vote).reduce((a, b) => a + b)
+        : 0;
+  return { text, weight };
+}
+
+// minimal validation. rules have to contain a colon and semicolon
+let validateRule = (rule) => { 
+  return rule.text.match(/.+:.+;/gm);
+}
 
 export default createStore({
 
@@ -16,7 +66,11 @@ export default createStore({
     setMobile    : (state, mobile)    => state.isMobile  = mobile,
     setStreams   : (state, streams)   => state.streams = streams,
     setContents  : (state, messages)  => state.contents = messages,
-    setRules     : (state, messages)  => state.rules  = messages,
+    setRules: (state, messages) => {
+      state.rules = messages.messages
+          .filter((m) => m.content.match(/\/poll/gm))
+          .map((m) => toCSS(m))
+    },
     selectTag    : (state, tag)       => state.selectedTag = tag,
   },