From e33440db7ee4c7c32011fb44756f9a3d765bc5ea Mon Sep 17 00:00:00 2001
From: choj <jerome@allella.fr>
Date: Tue, 12 May 2020 21:59:56 +0200
Subject: [PATCH] characters menu bubble or not bubble !

---
 src/components/CharactersMenu.vue | 83 +++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/components/CharactersMenu.vue

diff --git a/src/components/CharactersMenu.vue b/src/components/CharactersMenu.vue
new file mode 100644
index 0000000..ea89568
--- /dev/null
+++ b/src/components/CharactersMenu.vue
@@ -0,0 +1,83 @@
+<template>
+
+        <div @hide="hideLinkMenu" class="menubar char-menubar">
+
+            <div v-bind:key="opt.label" v-for="opt in environment.getCharacterOptions()" class="dropdown">
+                <button class="dropbtn border-left">{{opt.label|capitalize}}</button>
+                <div class="dropdown-content">
+                    <a v-for="style in opt.styles" v-bind:key="style.label">
+                        <button
+                                class="menubar__button"
+                                :class="{ 'is-active': slots.isActive.customstyle({ type: style.class }) }"
+                                @click="slots.commands.customstyle({ type: style.class })">
+                            {{style.label | capitalize}}
+                        </button>
+                    </a>
+                </div>
+            </div>
+
+
+            <form class="menububble__form" v-if="linkMenuIsActive"
+                  @submit.prevent="setLinkUrl(slots.commands.link, linkUrl)">
+                <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://"
+                       ref="linkInput" @keydown.esc="hideLinkMenu"/>
+                <button class="menububble__button" @click="setLinkUrl(slots.commands.link, null)" type="button">
+                    Supprimer le lien
+                </button>
+            </form>
+
+            <template v-else>
+                <button id="link__button"
+                        class="menububble__button"
+                        @click="showLinkMenu(slots.getMarkAttrs('link'))"
+                        :class="{ 'is-active': slots.isActive.link() }"
+                >
+                    <span>{{ slots.isActive.link() ? 'Modifier le lien' : 'Lien'}}</span>
+                </button>
+            </template>
+        </div>
+
+</template>
+
+<script>
+
+
+    export default {
+        props: ["slots","environment"],
+        components: {},
+        data() {
+            return {
+                linkUrl: null,
+                linkMenuIsActive: false,
+            }
+        },
+        beforeDestroy() {
+
+        },
+
+        mounted() {
+
+        },
+
+        methods: {
+
+            showLinkMenu(attrs) {
+                this.linkUrl = attrs.href
+                this.linkMenuIsActive = true
+                this.$nextTick(() => {
+                    this.$refs.linkInput.focus()
+                })
+            },
+            hideLinkMenu() {
+                this.linkUrl = null
+                this.linkMenuIsActive = false
+            },
+            setLinkUrl(command, url) {
+                command({href: url})
+                this.hideLinkMenu()
+            },
+
+        }
+    }
+</script>
+