55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<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> |