A more functional and better looking site for Steem Ultimate Editor!

tngflx(63)

Published in

#utopian-io

Words

435

Reading

2 min

Listen

Play

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

Improvement over the last version

#1 : Integration with steemconnect

Instead of prompting user copy and paste, users can now login via steemconnect. Steemconnect login form is in popup form, so you don't have to leave your workspace while it is logging in. Steemconnect will also auto logout in case of idling for over 20 minutes. This is done by such code :

$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
        idleTime = idleTime + 1;
    if (idleTime > 19) { // 20 minutes
        Signout();
    }
}

Steemconnect in popup form! P/s : I believe this is the first ever workable popup for steemconnect :P Most of developers prefer a full page login which is not nice to take you away from what you're doing.

#2 : Tags are automatically categorized on spacing

Tags are now easier to remove or type instead of leaving it all in one long line of strings. And tags will have a red border if it's left empty to be posted. It also check for your title. Do notice it doesn't check for payout type. Cause the default type will be 50/50 sbd steempower.

Codes that made it happen :

//Check tags field and payout type if it's filled
function checkDraft() {
    $('.bootstrap-tagsinput').on('click', function () {
        $('.bootstrap-tagsinput').removeClass('warning');
    });

    $('#title').on('click', function (event) {
        $('#title').removeClass('warning');
    });

    if (tags === null && title !== '') {
        alert('Tags field cannot be left blank');
        $('.bootstrap-tagsinput').addClass('warning');
        return false;
    } else if (title === '' && tags !== null) {
        alert('Please specify a title')
        $('#title').addClass('warning');
        return false;
    } else if (tags === null && title == '') {
        alert('You might as well don\'t make a post. Kidding. Please check your title and tags')
        $('.bootstrap-tagsinput').addClass('warning');
        $('#title').addClass('warning');
        return false;
    } else {
        return true;
    }
}

Tags Demonstration :

#3 : Drafts are autosaved to Localstorage

You don't have to worry about your draft disappeared when you refresh your page. It happened to me when I try to use busy.org editor. It was a painful experience. Auto save draft is a must for a blog editor. Draft are saved in a json readable format, so I implemented a json extension which will trim all the whitespace found in key and value field without compromising the json format.

function savDraft() {
    updateContent();

    const data = {
        author: author,
        title: title,
        body: draft,
        footer: footer,
        permlink: tags
    }

    //JSON extension 
    JSON.extn = {

        format: '\t',

        replacer: function (key, value) {
            function trim(text) {
                var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                text = (text == null)
                    ? ""
                    : (text + "").replace(rtrim, "");
                return text;
            }
            return typeof this[key] === "string" ? trim(value) : value;
        },
        stringify: function (obj, replacer, space) {
            return JSON.stringify(obj, replacer, space);
        }, 

        trimedStringify: function (obj) {
            return this.stringify(obj, this.replacer);
        },
    }
    //Saving data to localstorage
    localStorage.setItem("draft", JSON.extn.trimedStringify(data, null, 0));
    //console.log("Saved draft")
}