Emoji mention theme component

مكون السمة
1

This is a simple component that will automatically add an emoji (or other text, if you’d like) to a @mention in a post

40%20AM

Github repo: https://github.com/awesomerobot/discourse-emoji-mention

Installing a theme or theme component

How to

To configure it, add items to the list in the format of @username, emoji (You can copy and paste emoji from https://getemoji.com/ or https://emojipedia.org/)

41%20AM
41%20AM690×107 15.3 KB

There’s also an option to show the emoji after the mention, instead of before.

That’s all it does!

29 إعجابًا
2

Would be possible to use this with custom emojis?
As we provide support from our community, it would be nice to add our logo before mentioning one of the staff

إعجاب واحد (1)
3

Not using the current structure because the setting uses unicode for emojis.

إعجاب واحد (1)
4

Mmm, and maybe it could be changed? :sweat_smile:

5

This component is kind of a super basic template on finding content in a post and appending something to it. There’s probably a way to grab existing emojis, but I don’t know it off the top of my head.

What would work is replacing the header.html file in the component with this, which would just append an image after a mention instead (that image could be a little logo).

<script type="text/discourse-plugin" version="0.8.18">
    $.expr[":"].contains = $.expr.createPseudo(function(arg) { // make case insensitive
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    }); 
    
    let emoji = {};
    
    settings.username_emoji.split('|').forEach(pair => {
        let split = pair.split(",");
        emoji[split[0].toLowerCase()] = split[1];
    });
    
    $.each(emoji, function (key, value){
        api.decorateCooked($elem => $elem.find("a.mention:contains(" + key + ")").append("<img src='" + value + "'>").addClass("with-image"));
    });
    
</script>

Using a setting like this

20%20PM
Screen Shot 2018-07-26 at 11.06.20 PM.png1294×146 16.5 KB

11 إعجابًا
6

أنا حقًا أحب هذا المفهوم!

شيئان يتبادران إلى الذهن، لست متأكدًا مما إذا كان ذلك ممكنًا حاليًا ولكن ما أود الحصول عليه:

  1. القدرة على استخدام هذا للإشارات الجماعية؟ لقد جربتها للتو لمجموعة المسؤولين الخاصة بي ولكنها لم تبدو وكأنها تعمل.

  2. القدرة للمستخدم على اختيار الرموز التعبيرية الخاصة به في تفضيلاته ثم ستظهر في كل مرة يتم فيها الإشارة إليه. ربما يمكن أن يكون أيضًا ميزة إضافية لمنحها للمستخدمين الأكثر تفاعلاً في مستويات ثقة أعلى.

تعديل:

  1. القدرة على استخدام هذا للإشارات الجماعية؟ لقد جربتها للتو لمجموعة المسؤولين الخاصة بي ولكنها لم تبدو وكأنها تعمل.

لقد اكتشفت كيفية القيام بذلك ولكنني لا أعرف كيفية تقديم طلب سحب (PR) لذلك سأنشر الكود أدناه في الوقت الحالي:

common.scss يضيف .mention-group:after و .mention-group:before

@if $show-after-mention == "true" {
  .mention:after,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
} @else {
  .mention:before,
  .mention-group:after {
    content: attr(data-emoji);
    display: inline;
  }
}

header.html يضيف هذا في النهاية:

$.each(emoji, function(key, value) {
  api.decorateCooked($elem =>
    $elem
      .find("a.mention-group:contains(" + key + ")")
      .attr("data-emoji", value)
      .addClass("with-emoji")
  );
});
إعجاب واحد (1)
7

أردت أيضًا القدرة على استخدام ملفات SVG مخصصة كأيقونة بجوار الإشارة، وهو أمر رأيته في Guilded للموظفين وأردت أن يكون لدي هناك ولكني لم أستطع الحصول عليه - سبب آخر يجعلني أحب Discourse كثيرًا هو أنني أستطيع بالفعل اختراق شيء قد يعمل بدلاً من الأمل والانتظار حتى يضيفه المطورون.

لذلك قمت بإنشاء الحل التالي. إنه ليس مضمونًا بأي حال من الأحوال، ربما يتطلب ملف SVG الذي تقوم بتحميله أن يكون له متغير SCSS يبدأ بـ svg ومع ذلك يبدو أنه يعمل بما يكفي بالنسبة لي الآن :slight_smile:

إذا أراد شخص ما أخذ هذا الكود وتطويره، ودمجه لجعله أكثر روعة، فسأكون ممتنًا!

الأشياء المحتملة للتحسين

  1. جعله يعمل لجميع أيقونات SVG، مما يعني جميع أيقونات Discourse وجميع الأيقونات التي تم تحميلها لا تبدأ بـ svg.
  2. تنظيف الكود.
  3. تحسين التصميم، حيث قمت بتجميع CSS بطريقة ما ليعمل وقد لا يعمل في جميع الحالات.

بغض النظر، إليك مثال على إشارة مع استخدامي للأيقونة المخصصة التي لدي للدفاع العاطفي كأيقونة إشارة للموظفين:

image

إليك الكود الذي أضفته:

header.html

  // إضافة أيقونات SVG كخيار، طالما أنها مدرجة في الأصول وتم تحميلها
  // ينشئ كائنًا لجميع الأصول ويتكرر للعثور على الروابط التي تحتوي على سمة data-emoji
  // تساوي اسم متغير الأصل ثم يضيف عنوان URL لها

  // تحويل الكائن إلى مصفوفة مفاتيح
  const keys = Object.keys(settings.theme_uploads);

  // طباعة جميع المفاتيح
  console.log(keys);

  // التكرار فوق الكائن
  keys.forEach((key, index) => {
      console.log(`${key}: ${settings.theme_uploads[key]}`);
      api.decorateCooked($elem => {
        var url = settings.theme_uploads[key];
        console.log("key: " + key);
        console.log("index: " + index);
        console.log("url: " + url);
        console.log(JSON.stringify(settings.theme_uploads));
        $elem
          .find("a[data-emoji^='" + key + "']")
          .css("--svg-icon", "url('" + url + "')");
        }
      );    
  });

common.scss

@if $show-after-mention == "true" {
  [data-emoji^="svg"]:after {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
} @else {
  [data-emoji^="svg"]:before {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
}

هذا يتطلب منك أيضًا:

  1. إنشاء مجلد /assets
  2. إضافة ملفات svg في مجلد /assets، مثل /assets/esd-heart.svg
  3. تحديث ملف about.json للربط بتلك الأصول بشيء مثل:
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
إعجاب واحد (1)
8

هل هناك أي طريقة ليظهر الرمز التعبيري للمستخدم المختار فقط؟ إذا كان لديك مستخدم باسم Taylor و TaylorLife، فإن الرمز التعبيري يظهر لكليهما