doohoyi/chatty-pub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stripped the polls and rewrote to regular messages

Browse source
This commit is contained in:
Heerko 2021-07-01 23:11:07 +02:00
parent 864bd0aaa7
commit 56ae8babd7
6 changed files with 109 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
front/src/App.vue
View file

@ -74,14 +74,7 @@ export default {
}); });
api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => { api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => {
console.log("messages!",result) this.$store.commit("setRules", result);
this.$store.commit(
"setRules",
result
// result.messages
// .filter((m) => m.content.match(/\/poll/gm))
// .map((m) => this.toCSS(m))
);
}); });
api.zulip.listen(this.zulipClient); api.zulip.listen(this.zulipClient);

6
front/src/components/Content/Message.vue
View file

@ -18,9 +18,9 @@ export default {
content() { content() {
let url = process.env.VUE_APP_ZULIP_site; let url = process.env.VUE_APP_ZULIP_site;
let m = this.message.content.replace("\n", "<br/>"); let m = this.message.content.replace("\n", "<br/>");
m = m.replaceAll('src="','src="' + url); m = m.replaceAll('src="', 'src="' + url);
m = m.replaceAll('href="/','href="' + url + "/"); m = m.replaceAll('href="/', 'href="' + url + "/");
return m return m;
}, },
classes() { classes() {
return this.message.reactions.map((r) => "u" + r.emoji_code); return this.message.reactions.map((r) => "u" + r.emoji_code);

24
front/src/components/Rules/Rule.vue
View file

@ -6,33 +6,29 @@
></vue3-markdown-it> ></vue3-markdown-it>
</span> --> </span> -->
<code class="rule"> <code class="rule">
<p>{{ rule.className }} {</p> <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
<p <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
v-for="dec in rule.rules"
:key="dec.text"
> &nbsp; {{ dec.text }}</p>
<p>}</p> <p>}</p>
</code> </code>
</template> </template>
<script> <script>
import emoji from "../../mixins/emoji";
export default { export default {
name: 'Rule', name: "Rule",
props: [ mixins: [emoji],
'rule' props: ["rule"],
],
computed: { computed: {
rawJSON() { rawJSON() {
return '```json\n' + JSON.stringify(this.rule, null, 2) + '\n```' return "```json\n" + JSON.stringify(this.rule, null, 2) + "\n```";
}, },
} },
} };
</script> </script>
<style> <style>
.rule p { .rule p {
margin: 0; margin: 0;
} }
</style> </style>

46
front/src/components/Rules/Styles.vue
View file

@ -1,55 +1,49 @@
<script> <script>
import emoji from "../../mixins/emoji";
export default { export default {
name: "Styles", name: "Styles",
mixins: [emoji],
computed: { computed: {
rules() { rules() {
return this.$store.state.rules; return this.$store.state.rules;
}, },
}, },
data: function(){ data: function () {
return { return {
el: null, el: null,
} };
}, },
methods: { methods: {
generateStyleRules() { generateStyleRules() {
let styles = ""; let styles = "";
this.rules.map((r)=>{ this.rules.map((r) => {
styles += r.className styles += r.className;
if( this.containsEmoji(r.className)){ if (this.containsEmoji(r.className)) {
styles += ", .u" + this.toEmojiCode(r.className) styles += ", .u" + this.toEmojiCode(r.className);
} }
styles += "{" styles += "{";
r.rules.map((s)=>{ r.rules.map((s) => {
styles += s.text; styles += s;
}) });
styles += "}" styles += "}";
}) });
return styles; return styles;
}, },
insertStyleElement() { insertStyleElement() {
var style = document.createElement('style'); var style = document.createElement("style");
style.innerText = this.generateStyleRules(); style.innerText = this.generateStyleRules();
return style 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) { mounted: function () {
return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
},
},
mounted: function() {
this.el = document.head.appendChild(this.insertStyleElement()); this.el = document.head.appendChild(this.insertStyleElement());
}, },
watch: { watch: {
rules() { rules() {
let style = this.insertStyleElement(); let style = this.insertStyleElement();
this.el.parentNode.replaceChild(style, this.el); this.el.parentNode.replaceChild(style, this.el);
} },
} },
}; };
</script> </script>

56
front/src/mixins/emoji.js
View file

@ -1,34 +1,40 @@
let toUTF16 = (codePoint) => { // let toUTF16 = (codePoint) => {
var TEN_BITS = parseInt("1111111111", 2); // var TEN_BITS = parseInt("1111111111", 2);
if (codePoint <= 0xffff) { // if (codePoint <= 0xffff) {
return u(codePoint); // return u(codePoint);
} // }
codePoint -= 0x10000; // codePoint -= 0x10000;
// Shift right to get to most significant 10 bits // // Shift right to get to most significant 10 bits
var leadSurrogate = 0xd800 + (codePoint >> 10); // var leadSurrogate = 0xd800 + (codePoint >> 10);
// Mask to get least significant 10 bits // // Mask to get least significant 10 bits
var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS); // var tailSurrogate = 0xdc00 + (codePoint & TEN_BITS);
return u(leadSurrogate) + (tailSurrogate); // return u(leadSurrogate) + (tailSurrogate);
} // }
let u = (codeUnit) => { // let u = (codeUnit) => {
return "\\u" + codeUnit.toString(16).toUpperCase(); // return "\\u" + codeUnit.toString(16).toUpperCase();
} // }
export default { export default {
methods: { methods: {
// toEmojiCode: (emoji) => {
// console.log(emoji);
// emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
// },
toEmojiCode: (emoji) => { toEmojiCode: (emoji) => {
emoji.replace(/\p{Emoji}/gu, function (m) { console.log(emoji);
toUTF16(m.codePointAt(0)); return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
});
console.log(emoji)
return emoji;
}, },
// toEmojiCode: (emoji) => {
// console.log(emoji)
// emoji.replace(/\p{Emoji}/gu, function (m) {
// toUTF16(m.codePointAt(0));
// });
// console.log(emoji)
// return emoji;
// },
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
},
} }
} }

92
front/src/store/index.js
View file

@ -1,53 +1,37 @@
/*eslint no-unused-vars: "off"*/
/*eslint no-undef: "off"*/
import { createStore } from 'vuex' import { createStore } from 'vuex'
import emoji from "../mixins/emoji"; import emoji from "../mixins/emoji";
import { stripHtml } from "string-strip-html";
let toCSS = (poll) => { var EmojiConvertor = require('emoji-js');
var emojiConv = new EmojiConvertor();
let toCSS = (message) => {
let className = "", let className = "",
emoji_code = "", emoji_code = "",
options = [], rules = [];
rules = [],
subs = poll.submessages.map((s) => JSON.parse(s.content)); // let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
subs.forEach((sub) => { let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
if (sub.widget_type && sub.widget_type == "poll") { let content = stripHtml(message.content).result;
className = sub.extra_data.question; let results = content.matchAll(regex);
results = Array.from(results);
if (results.length > 0) {
className = emojiConv.replace_colons(results[0]['groups']['selector']);
if (emoji.methods.containsEmoji(className)) {
emoji_code = emoji.methods.toEmojiCode(className); 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);
} }
}); rules = results[0]['groups']['props'].split("\n");
} rules = rules.filter((rule) => validateRule(rule))
} 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 }; return { className, emoji_code, rules };
}
return null;
} }
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) => { let validateRule = (rule) => {
return rule.text.match(/.+:.+;/gm); return rule.match(/.+:.+;/gm);
} }
export default createStore({ export default createStore({
@ -55,35 +39,39 @@ export default createStore({
strict: process.env.NODE_ENV !== 'production', strict: process.env.NODE_ENV !== 'production',
state: { state: {
isMobile : false, isMobile: false,
streams : [], streams: [],
contents : {}, contents: {},
rules : [], rules: [],
pubStr: 'pub-', pubStr: 'pub-',
}, },
mutations: { mutations: {
setMobile : (state, mobile) => state.isMobile = mobile, setMobile: (state, mobile) => state.isMobile = mobile,
setStreams : (state, streams) => state.streams = streams, setStreams: (state, streams) => state.streams = streams,
setContents : (state, messages) => state.contents = messages, setContents: (state, messages) => state.contents = messages,
setRules: (state, messages) => { setRules: (state, messages) => {
state.rules = messages.messages // console.log(messages)
.filter((m) => m.content.match(/\/poll/gm)) state.rules = messages.messages.reduce((acc, cur) => {
.map((m) => toCSS(m)) let rule = toCSS(cur);
if (rule !== null) {
acc.push(rule);
}
return acc
}, [])
}, },
selectTag : (state, tag) => state.selectedTag = tag, selectTag: (state, tag) => state.selectedTag = tag,
}, },
actions: { actions: {
}, },
getters: { getters: {
filteredResources: state => ( state filteredResources: state => (state
.resources .resources
.filter(r => ( .filter(r => (
r.tags.indexOf(state.selectedTag > -1) r.tags.indexOf(state.selectedTag > -1)
)) ))
) )
} }