Added notification feature to STEEM ULTIMATE EDITOR!

Repository

https://github.com/tngflx/Steem-UltimateEditor

What is Steem Ultimate Editor?

Steem Ultimate Editor poised to replace markdowns with simple buttons to create a post! Creating post shouldn't be so troublesome and requires a significant amount of time on trial and error. What if I tell you, there's a tool that allows you to just click buttons in order to perform some basic and even advance customization to the style of your post? Let's have a look what Steem Ultimate Editor brought to the table this time after an improvement over the last version. Which you can check out here.

Objectives

• Allow minnows or newcomers to have a more friendly environment to create posts
• Significantly reduce the amount of time taken to create a post
• Beautify your post within clicks!
• Promoting high quality posts with future features such as source checking

Feature for the day : Notifications!

Don't you want to have the latest updates happening on STEEM blockchain while you're working on your amazing post? Don't you love everything just working in one place? Welcome to STEEM ULTIMATE EDITOR! This is the place where you can bring out the most productive side out of yourself! Notification is situated on the left side of window. It will even play notification sound when new message received. Let's have a look!

For demo purposes, I streamed the whole blockchain for my notification. (Which is a lot of notifications, I know..) This is to show each case such as mention, money transfer, comments, upvotes, downvotes are all covered in notifications.

How I implemented it

switch (type) {
            case ('reply'):

                $(templates['src/js/templates/not-reply.hbs']({
                    link: link + `/@${currentAuthUser}/${parent_permlink}/#@${author}/${permlink}`,
                    style: style,
                    avatar: backgroundImage,
                    author: author,
                    timestamp: time,
                    body: `Commented on your post <b>${permlink}</b>`,
                    reply: true
                })).prependTo('.scroller');
                break;

            case ('mention'):
                const { is_root_post } = notification[index];
                //const linkm = `/@${author}/${permlink}`;
        
                $(templates['src/js/templates/not-reply.hbs']({
                    link: link + `/@${author}/${permlink}`,
                    style: style,
                    avatar: backgroundImage,
                    author: author,
                    timestamp: time,
                    body: `Mentioned you in the post <b>${permlink}</b\>`,
                    mention: true
                })).prependTo('.scroller');
                break;

As you can see, the key script here filter the feeds from steem blockchain and categorize it accordingly. Then handlebars is used to render the notification box.

Audio is played each time a new notification arrived as you can hear in the video. If you notice there's other small button in the notification list, stay tune for the next post to find out what's it for! (Which I'm pretty sure many have guess it :) )

Technology Stack

Jquery, HTML, Handlebars, Javascript

Roadmap

• Emojis (checked)
• New banner (checked)
• Chat integration?
• Notifications(checked)
• Find and replace (checked)
  -You name the features :)

How to contribute?

-Contact me personally on discord or comment below!