feat: Implement a custom common emojiPicker - MEED-9135 - Meeds-io/MPIs#164

crowdin.yml

@@ -352,4 +352,13 @@ files: [
     "escape_special_characters": 0,
     "escape_quotes": 0,
   },
+  {
+    "source": "/webapp/src/main/resources/locale/portlet/EmojiPicker_en.properties",
+    "translation": "%original_path%/%file_name%!_%locale_with_underscore%.%file_extension%",
+    "translation_replace": { YML_CROWDIN_LANGUAGES_ARG },
+    "dest": "hub/social/webapp/EmojiPicker.properties",
+    "update_option": "update_as_unapproved",
+    "escape_special_characters": 0,
+    "escape_quotes": 0,
+ }
 ]

webapp/src/main/resources/locale/portlet/EmojiPicker_en.properties

@@ -0,0 +1,12 @@
+emojiPicker.search.label=Search emojis...
+emojiPicker.category.recent.label=Frequently Used
+emojiPicker.category.smileys-emotion.label=Smileys & Emotion
+emojiPicker.category.people-body.label=People & Body
+emojiPicker.category.animals-nature.label=Animals & Nature
+emojiPicker.category.food-drink.label=Food & Drink
+emojiPicker.category.activities.label=Activities
+emojiPicker.category.travel-places.label=Travel & Places
+emojiPicker.category.objects.label=Objects
+emojiPicker.category.symbols.label=Symbols
+emojiPicker.category.flags.label=Flags
+emojiPicker.category.extras-unicode.label=Unicode Extras

webapp/src/main/resources/locale/portlet/EmojiPicker_fr.properties

@@ -0,0 +1,12 @@
+emojiPicker.search.label=Rechercher des \u00e9mojis...
+emojiPicker.category.recent.label=Utilis\u00e9s fr\u00e9quemment
+emojiPicker.category.smileys-emotion.label=Smileys et \u00e9motions
+emojiPicker.category.people-body.label=Personnes et corps
+emojiPicker.category.animals-nature.label=Animaux et nature
+emojiPicker.category.food-drink.label=Nourriture et boissons
+emojiPicker.category.activities.label=Activit\u00e9s
+emojiPicker.category.travel-places.label=Voyages et lieux
+emojiPicker.category.objects.label=Objets
+emojiPicker.category.symbols.label=Symboles
+emojiPicker.category.flags.label=Drapeaux
+emojiPicker.category.extras-unicode.label=Extras Unicode

webapp/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -3180,4 +3180,28 @@
     </depends>
   </module>
 
+  <module>
+    <name>emojiPicker</name>
+    <load-group>emojisGRP</load-group>
+    <script>
+      <minify>false</minify>
+      <path>/js/emojiPicker.bundle.js</path>
+    </script>
+    <depends>
+      <module>vue</module>
+    </depends>
+    <depends>
+      <module>vuetify</module>
+    </depends>
+    <depends>
+      <module>eXoVueI18n</module>
+    </depends>
+    <depends>
+      <module>commonVueComponents</module>
+    </depends>
+    <depends>
+      <module>extensionRegistry</module>
+    </depends>
+  </module>
+
 </gatein-resources>

webapp/src/main/webapp/vue-apps/emoji-picker/components/EmojiPicker.vue

@@ -0,0 +1,104 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2025 Meeds Association [email protected]
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+
+<template>
+  <v-menu
+    v-model="showPicker"
+    :close-on-content-click="false"
+    :position-x="menuX"
+    :position-y="menuY"
+    content-class="z-index-modal bord pickerMenu border-radius-8 overflow-hidden"
+    :max-height="maxHeight"
+    :max-width="maxWidth"
+    absolute
+    offset-x
+    offset-y>
+    <emoji-picker-list
+      :emojis="emojis"
+      @select-emoji="selectEmoji" />
+  </v-menu>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      emojiPickerPosition: {
+        top: '40px',
+        left: '0px'
+      },
+      showPicker: false,
+      search: '',
+      launcherInstance: null,
+      maxHeight: 450,
+      maxWidth: 308
+    };
+  },
+  created() {
+    document.addEventListener('show-emoji-picker', this.showEmojiPicker);
+    document.addEventListener('mousedown', this.handleClickOutside);
+  },
+  beforeDestroy() {
+    document.removeEventListener('show-emoji-picker', this.showEmojiPicker);
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  },
+  computed: {
+    emojis() {
+      return this.$root.emojiBank;
+    },
+    menuX() {
+      return this.emojiPickerPosition?.left;
+    },
+    menuY() {
+      return this.emojiPickerPosition?.top;
+    }
+  },
+  methods: {
+    handleClickOutside(event) {
+      const menuEl = document.querySelector('.pickerMenu');
+      if (!menuEl?.contains(event.target)) {
+        this.showPicker = false;
+      }
+    },
+    showEmojiPicker(event) {
+      const data = event.detail;
+      this.launcherInstance = data.launcherInstance;
+      const launcherTop = parseFloat(data.top);
+      const launcherLeft = parseFloat(data.left);
+      const menuHeight = this.maxHeight;
+
+      const spaceBelow = window.innerHeight - launcherTop;
+      const showAbove = spaceBelow < menuHeight;
+
+      this.emojiPickerPosition = {
+        top: showAbove ? launcherTop - menuHeight - 45 : launcherTop,
+        left: launcherLeft - (this.maxWidth + 32) / 2
+      };
+      this.showPicker = true;
+    },
+    selectEmoji(emoji) {
+      this.launcherInstance.$emit('select-emoji', emoji);
+      this.$nextTick(() => {
+        this.showPicker = false;
+      });
+    }
+  }
+};
+</script>

webapp/src/main/webapp/vue-apps/emoji-picker/components/EmojiPickerButton.vue

@@ -0,0 +1,64 @@
+<!--
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2025 Meeds Association [email protected]
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+-->
+
+<template>
+  <div class="d-flex my-auto ">
+    <emoji-picker-quick-emojis
+      @select-emoji="selectEmoji" />
+    <v-btn
+      ref="launcher"
+      width="28"
+      height="28"
+      min-width="28"
+      class="pa-0"
+      icon
+      @click="showEmojiPicker">
+      <v-icon
+        size="16"
+        class="icon-default-color">
+        fas fa-plus
+      </v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  methods: {
+    selectEmoji(emoji) {
+      this.$emit('select-emoji', emoji);
+    },
+    showEmojiPicker() {
+      const button = this.$refs.launcher?.$el;
+      if (button) {
+        const rect = button.getBoundingClientRect();
+        document.dispatchEvent(new CustomEvent('show-emoji-picker', {
+          detail: {
+            top: `${rect.bottom + 8}px`,
+            left: `${rect.left}px`,
+            launcherInstance: this
+          }
+        }));
+      }
+    }
+  }
+};
+</script>