Custom netteForms.js - show alert messages for Nette Framework

custom.netteForms.css

.form-alert {
	position: relative;
	top: 0;
	left: 0;
	z-index: 1010;
	max-width: 276px;
	padding: 1px;
	text-align: left;
	white-space: normal;
	color: #b94a48;
	background-color: #f2dede;
	border: 1px solid #aaa;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
}

.form-alert.top {
	margin-top: -10px;
}

.form-alert.right {
	margin-left: 10px;
}

.form-alert.bottom {
	margin-top: 10px;
}

.form-alert.left {
	margin-left: -10px;
}

.form-alert-content {
	padding: 9px 14px;
}

.form-alert .arrow,
.form-alert .arrow:after {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}

.form-alert .arrow {
	border-width: 11px;
}

.form-alert .arrow:after {
	border-width: 10px;
	content: "";
}

.form-alert.top .arrow {
	bottom: -11px;
	left: 25px;
	margin-left: -11px;
	border-top-color: #F2DEDE;
	border-top-color: rgba(0, 0, 0, 0.40);
	border-bottom-width: 0;
}

.form-alert.top .arrow:after {
	bottom: 1px;
	margin-left: -10px;
	border-top-color: #f2dede;
	border-bottom-width: 0;
}

.form-alert.right .arrow {
	top: 50%;
	left: -11px;
	margin-top: -11px;
	border-right-color: #F2DEDE;
	border-right-color: rgba(0, 0, 0, 0.40);
	border-left-width: 0;
}

.form-alert.right .arrow:after {
	bottom: -10px;
	left: 1px;
	border-right-color: #f2dede;
	border-left-width: 0;
}

.form-alert.bottom .arrow {
	top: -11px;
	left: 25px;
	margin-left: -11px;
	border-bottom-color: #F2DEDE;
	border-bottom-color: rgba(0, 0, 0, 0.40);
	border-top-width: 0;
}

.form-alert.bottom .arrow:after {
	top: 1px;
	margin-left: -10px;
	border-bottom-color: #f2dede;
	border-top-width: 0;
}

.form-alert.left .arrow {
	top: 50%;
	right: -11px;
	margin-top: -11px;
	border-left-color: #f2dede;
	border-left-color: rgba(0, 0, 0, 0.40);
	border-right-width: 0;
}

.form-alert.left .arrow:after {
	right: 1px;
	bottom: -10px;
	border-left-color: #f2dede;
	border-right-width: 0;
}

custom.netteForms.js

/**
 * alertMessagesNetteForms
 *
 * @param options
 * @constructor
 */
function alertMessagesNetteForms(options) {
    var that = this;

    this.options = {
        hideOnKeyPress: true,       // default: true
        hideOnMouseUp: true,        // default: true
        messageClass: 'form-alert', //default: 'form-alert'
        position: 'bottom',         // default: bottom;  top|bottom|right|left
        maxWidth: 276               // default: 276
    };

    this.element = null;
    this.elementForm = null;
    this.options = $.extend({}, this.options, options);

    Nette.addError = function (elem, message) {
        if (elem.focus) {
            elem.focus();
        }
        that.element = $('#' + elem.id);
        that.elementForm = that.element.closest('form');

        that.reset();

        that.render(message);

        that.hideOnAction();
    };

    this.getParams = function () {
        this.params = {
            position: that.options.position,
            maxWidth: that.options.maxWidth
        };
        var params = that.element.data('alert');
        if (params != undefined) {
            if (params.position || params.maxWidth) {
                if (params.position) {
                    this.params.position = params.position;
                }
                if (params.maxWidth) {
                    this.params.maxWidth = params.maxWidth;
                }
            }
            else if ($.inArray(params, ['top', 'right', 'bottom', 'left']) != '-1') {
                this.params.position = params;
            }
        }
    };

    this.hideOnAction = function () {
        if (that.options.hideOnKeyPress) {
            $(window).keypress(function (e) {
                that.reset();
            });
        }
        if (that.options.hideOnMouseUp) {
            $(window).mouseup(function (e) {
                that.reset();
            });
        }
    };

    this.reset = function () {
        if (that.elementForm != null) {
            formObj = '#' + that.elementForm.attr('id');
            if ($(formObj + ' .' + that.options.messageClass)) {
                $(formObj + ' .' + that.options.messageClass).remove();
            }
        }
    };

    /**
     *
     * @param message
     */
    this.render = function (message) {
        that.getParams();
        var messageBox = $('<div>')
            .html('<div class="arrow"></div>')
            .append('<div class="' + that.options.messageClass + '-content">' + message + '</div>')
            .addClass(that.options.messageClass)
            .addClass(that.params.position)
            .css({
                'position': 'absolute',
                maxWidth: that.params.maxWidth + 'px'
            });
        that.element.parent().append(messageBox);
        var positionBox = that.getPosition(messageBox);
        messageBox.css({
            'top': positionBox.top,
            'left': positionBox.left
        });

    };

    /**
     *
     * @returns {{top: number, left: number}}
     */
    this.getPosition = function (messageBox) {
        var elemObjPosition = that.element.position();
        var messageBoxPosition = {
            'top': 0,
            'left': 0
        };
        if (that.params.position == 'bottom') {
            messageBoxPosition = {
                'top': parseFloat(elemObjPosition.top + that.element.outerHeight()) + 'px',
                'left': parseFloat(elemObjPosition.left) + 'px'
            };
        } else if (that.params.position == 'right') {
            messageBoxPosition = {
                'top': parseFloat(elemObjPosition.top + (that.element.outerHeight() / 2) - (messageBox.outerHeight() / 2)) + 'px',
                'left': parseFloat(elemObjPosition.left + that.element.outerWidth()) + 'px'
            };
        } else if (that.params.position == 'left') {
            messageBoxPosition = {
                'top': parseFloat(elemObjPosition.top + (that.element.outerHeight() / 2) - (messageBox.outerHeight() / 2)) + 'px',
                'left': parseFloat(elemObjPosition.left - messageBox.outerWidth()) + 'px'
            };
        } else if (that.params.position == 'top') {
            messageBoxPosition = {
                'top': parseFloat(elemObjPosition.top - messageBox.outerHeight()) + 'px',
                'left': parseFloat(elemObjPosition.left) + 'px'
            };
        }
        return messageBoxPosition;
    }
}

example.latte

{form $form}
		{input name}
		<div class="form-alert bottom" n:if="$input->error">
				<div class="arrow"></div>
				<div class="form-alert-content">{$input->error}</div>
		</div>
		{input surname}
		<div class="form-alert bottom" n:if="$input->error">
				<div class="arrow"></div>
				<div class="form-alert-content">{$input->error}</div>
		</div>
{/form}

example.php

$form = new Form();
$form->addText('name', 'Meno')
		->setAttribute('data-alert', json_encode(array('position' => 'right', 'maxWidth' => '300')))
		->setRequired('Please insert name');

		$form->addText('surname', 'Surname')
			->setAttribute('data-alert', 'top')
			->setRequired('Please insert surname');

init.js

/**
 * 1. alternative
 * Option of insert different parameters
 */ 
alertMessagesNetteForms({
    hideOnKeyPress: true,
    hideOnMouseUp: true,
    messageClass: 'form-alert',
    position: 'right',         
    maxWidth: 276  
});

/**
 * 2. alternative
 * Connection with nette.ajax.js
 */ 
$.nette.ext({
    load: function () {
        alertMessagesNetteForms({
            hideOnKeyPress: true,
            hideOnMouseUp: false
        });
    }
});