Added notification feature to STEEM ULTIMATE EDITOR!

in #utopian-io2 years ago (edited)

Repository


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

What is Steem Ultimate Editor?


ultedtlogosmall.png

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!

Sort:  

Oh, hey hey hey!
Could we have like a different set of notification buttons?

Like one notification for upvotes received,
one for comments received,
etc.

It's hard to look at notifications, if all individual upvotes pop-up into the same notification feed as comments, etc.! :P

Well if you noticed the top notification bar, theres some word :) that feature already considered. Just not yet fully implemented.

Thank you for your contribution.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Hey @tngflx
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.17
TRX 0.03
JST 0.021
BTC 17032.02
ETH 515.95
SBD 1.13