Library for material design toasts

I wrote a small JavaScript library for material design toasts (notifications). Here's the GitHub repo.

I'd like to know what my mistakes are and how I can correct them. The code works correctly and was linted with jshint, but I'd like to know more about the code's level of quality. I'm interested in notes on readability and performance.

```
(function () {

function MadtarasToast() {
var localToastConfig = {
'duration': 5000,
'style': {}
};
var currentToast;

function show(toastConfig) {
var currentToastId;

// delete currentToast if it exist
if (currentToast) {
deleteCurrentToast();
}

// creating currentToast
currentToast = document.createElement('div');
///currentToastId = 'madtaras-toast' + guid();
currentToast.id = 'madtaras-toast' + guid();
currentToastId = currentToast.id;
currentToast.className = 'madtaras-toast __singleline';

// choosing styles depending on number of symbols in toast
if (toastConfig.actionInnerText) {
var numOfSymbolsInToast = toastConfig.innerText.length +
toastConfig.actionInnerText.length;
currentToast.classList.add(numOfSymbolsInToast ' + toastConfig.innerText + '');
if (toastConfig.actionInnerText && toastConfig.actionCallback) {
currentToast.insertAdjacentHTML('beforeend',
'' +
toastConfig.actionInnerText + '');
currentToast.querySelector('#madtaras-toast_action-btn').
addEventListener('click', function () {
hide(currentToastId);
toastConfig.actionCallback();
});
}

// applying styles from localToastConfig
for ( var styleProperty in localToastConfig.style ) {
if ( localToastConfig.style.hasOwnProperty(styleProperty) ) {
currentToast.style[styleProperty] = localToastConfig.style[stylePr

I think you should work on splitting things up into even smaller functions.

Especially the parts in show where you start getting into the HTML.

// choosing styles depending on number of symbols in toast
    if (toastConfig.actionInnerText) {
        var numOfSymbolsInToast = toastConfig.innerText.length +
          toastConfig.actionInnerText.length;
        currentToast.classList.add(numOfSymbolsInToast < 76 ?
          '__singleline' : '__multiline' );
    } else {
        currentToast.classList.add(toastConfig.innerText.length < 83 ?
          '__singleline' : '__multiline' );
    }

That can be a function determineLineCardinality, where you determine singleline or multiline. Maybe it doesn't even add to the class list, it just gives you the class name.

// inserting message
    currentToast.insertAdjacentHTML('afterbegin',
      '' + toastConfig.innerText + '');
    if (toastConfig.actionInnerText && toastConfig.actionCallback) {
        currentToast.insertAdjacentHTML('beforeend',
          '' +
          toastConfig.actionInnerText + '');
        currentToast.querySelector('#madtaras-toast_action-btn').
          addEventListener('click', function () {
              hide(currentToastId);
              toastConfig.actionCallback();
          });
    }

That can be a function insertToastMessage and insertToastButton.

// applying styles from localToastConfig
    for ( var styleProperty in localToastConfig.style ) {
        if ( localToastConfig.style.hasOwnProperty(styleProperty) ) {
            currentToast.style[styleProperty] = localToastConfig.style[styleProperty];
        }
    }

This... it's kind of a separate function, but it's only so big because you have to do some filtering. I guess it can stay.

for ( var styleProperty in properties.style ) {
            if ( properties.style.hasOwnProperty(styleProperty) ) {
                localToastConfig.style[styleProperty] = properties.style[styleProperty];
            }
        }

But maybe you'd benefit from writing some abstract function which "overwritesExistingValues"? You're doing the same thing twice already...

Lastly, back over here...

currentToast.classList.add(numOfSymbolsInToast < 76 ?
          '__singleline' : '__multiline' );
    } else {
        currentToast.classList.add(toastConfig.innerText.length < 83 ?
          '__singleline' : '__multiline' );

You have these "magic numbers", where apparently, as values 76 or 83, is some character limit. Maybe you should define this as "toastSingleLineLimit", and check against that? How did you even get to this symbol count? Do you use a monospace font? What if my text is "mmmmmmmmmm", or "iiiiiiiiii"? Then a non-monospace font may end up multilining too soon or too late. Consider finding another way to deal with the issue, if possible.

StackExchange Code Review Q#107502, answer score: 3