Stripped the polls and rewrote to regular messages
This commit is contained in:
Heerko
parent
864bd0aaa7
commit
56ae8babd7
6 changed files with 109 additions and 132 deletions
|
|
@ -74,14 +74,7 @@ export default {
|
|||
});
|
||||
|
||||
api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => {
|
||||
console.log("messages!",result)
|
||||
this.$store.commit(
|
||||
"setRules",
|
||||
result
|
||||
// result.messages
|
||||
// .filter((m) => m.content.match(/\/poll/gm))
|
||||
// .map((m) => this.toCSS(m))
|
||||
);
|
||||
this.$store.commit("setRules", result);
|
||||
});
|
||||
|
||||
api.zulip.listen(this.zulipClient);
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ export default {
|
|||
content() {
|
||||
let url = process.env.VUE_APP_ZULIP_site;
|
||||
let m = this.message.content.replace("\n", "<br/>");
|
||||
m = m.replaceAll('src="','src="' + url);
|
||||
m = m.replaceAll('href="/','href="' + url + "/");
|
||||
return m
|
||||
m = m.replaceAll('src="', 'src="' + url);
|
||||
m = m.replaceAll('href="/', 'href="' + url + "/");
|
||||
return m;
|
||||
},
|
||||
classes() {
|
||||
return this.message.reactions.map((r) => "u" + r.emoji_code);
|
||||
|
|
|
|||
|
|
@ -6,33 +6,29 @@
|
|||
></vue3-markdown-it>
|
||||
</span> -->
|
||||
<code class="rule">
|
||||
<p>{{ rule.className }} {</p>
|
||||
<p
|
||||
v-for="dec in rule.rules"
|
||||
:key="dec.text"
|
||||
> {{ dec.text }}</p>
|
||||
<p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
|
||||
<p v-for="dec in rule.rules" :key="dec"> {{ dec }}</p>
|
||||
<p>}</p>
|
||||
</code>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emoji from "../../mixins/emoji";
|
||||
|
||||
export default {
|
||||
name: 'Rule',
|
||||
props: [
|
||||
'rule'
|
||||
],
|
||||
name: "Rule",
|
||||
mixins: [emoji],
|
||||
props: ["rule"],
|
||||
computed: {
|
||||
rawJSON() {
|
||||
return '```json\n' + JSON.stringify(this.rule, null, 2) + '\n```'
|
||||
return "```json\n" + JSON.stringify(this.rule, null, 2) + "\n```";
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.rule p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,55 +1,49 @@
|
|||
<script>
|
||||
import emoji from "../../mixins/emoji";
|
||||
|
||||
export default {
|
||||
name: "Styles",
|
||||
mixins: [emoji],
|
||||
computed: {
|
||||
rules() {
|
||||
return this.$store.state.rules;
|
||||
},
|
||||
},
|
||||
data: function(){
|
||||
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)
|
||||
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 += "}"
|
||||
})
|
||||
styles += "{";
|
||||
r.rules.map((s) => {
|
||||
styles += s;
|
||||
});
|
||||
styles += "}";
|
||||
});
|
||||
return styles;
|
||||
},
|
||||
insertStyleElement() {
|
||||
var style = document.createElement('style');
|
||||
var style = document.createElement("style");
|
||||
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) {
|
||||
return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
|
||||
},
|
||||
|
||||
},
|
||||
mounted: function() {
|
||||
mounted: function () {
|
||||
this.el = document.head.appendChild(this.insertStyleElement());
|
||||
},
|
||||
watch: {
|
||||
rules() {
|
||||
let style = this.insertStyleElement();
|
||||
this.el.parentNode.replaceChild(style, this.el);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,34 +1,40 @@
|
|||
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 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();
|
||||
}
|
||||
// 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;
|
||||
console.log(emoji);
|
||||
return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
|
||||
},
|
||||
|
||||
// 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
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +1,37 @@
|
|||
/*eslint no-unused-vars: "off"*/
|
||||
/*eslint no-undef: "off"*/
|
||||
|
||||
import { createStore } from 'vuex'
|
||||
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 = "",
|
||||
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;
|
||||
rules = [];
|
||||
|
||||
// let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
|
||||
let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
|
||||
let content = stripHtml(message.content).result;
|
||||
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);
|
||||
// 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 };
|
||||
rules = results[0]['groups']['props'].split("\n");
|
||||
rules = rules.filter((rule) => validateRule(rule))
|
||||
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) => {
|
||||
return rule.text.match(/.+:.+;/gm);
|
||||
return rule.match(/.+:.+;/gm);
|
||||
}
|
||||
|
||||
export default createStore({
|
||||
|
|
@ -55,35 +39,39 @@ export default createStore({
|
|||
strict: process.env.NODE_ENV !== 'production',
|
||||
|
||||
state: {
|
||||
isMobile : false,
|
||||
streams : [],
|
||||
contents : {},
|
||||
rules : [],
|
||||
isMobile: false,
|
||||
streams: [],
|
||||
contents: {},
|
||||
rules: [],
|
||||
pubStr: 'pub-',
|
||||
},
|
||||
|
||||
mutations: {
|
||||
setMobile : (state, mobile) => state.isMobile = mobile,
|
||||
setStreams : (state, streams) => state.streams = streams,
|
||||
setContents : (state, messages) => state.contents = messages,
|
||||
setMobile: (state, mobile) => state.isMobile = mobile,
|
||||
setStreams: (state, streams) => state.streams = streams,
|
||||
setContents: (state, messages) => state.contents = messages,
|
||||
setRules: (state, messages) => {
|
||||
state.rules = messages.messages
|
||||
.filter((m) => m.content.match(/\/poll/gm))
|
||||
.map((m) => toCSS(m))
|
||||
// console.log(messages)
|
||||
state.rules = messages.messages.reduce((acc, cur) => {
|
||||
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: {
|
||||
},
|
||||
|
||||
getters: {
|
||||
filteredResources: state => ( state
|
||||
filteredResources: state => (state
|
||||
.resources
|
||||
.filter(r => (
|
||||
r.tags.indexOf(state.selectedTag > -1)
|
||||
))
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue