jxycms
9/27/2018 - 2:04 AM

Validation Popup

Validation Popup
content_copyfile_download
in jquery-extension.js

(function ($) {
    function _hideValidator(thisObj, defTimeOut) {
        defTimeOut = (defTimeOut || 1000);
        setTimeout(function () {
            var obj = $('#' + thisObj.attr('data-validator'));
            //console.log(obj);
            var removeContainer = function () {
                obj.remove();
                thisObj.removeAttr('data-validator');
                thisObj.removeAttr('data-type');
                thisObj.removeAttr('data-direction');
                thisObj.removeAttr('data-distance');
                if (typeof validatorInterval !== 'undefined')
                    clearInterval(validatorInterval);
            };
            var type = thisObj.attr('data-type');
            var direction = thisObj.attr('data-direction');
            var distance = thisObj.attr('data-distance');
            if (type === 'confirm' && (direction === 'left' || direction === 'right'))
                obj.fadeOut(200);
            else
                obj.hide({ effect: 'drop', direction: direction, duration: 500, easing: 'easeInBack', complete: removeContainer, distance: distance });
            $('.modal-background').remove();
        }, defTimeOut);
    }
    //$.expr[':'].reallyVisible = function (node, idx) {

    //    while (true) {

    //        // should be faster than $(node).css()
    //        var css = document.defaultView.getComputedStyle(node, null);

    //        if (css.opacity == 0 || css.visibility == 'hidden')
    //            return false;

    //        node = node.parentNode;

    //        if (!node || node === document)
    //            break;
    //    }

    //    return true;
    //};
    $.fn.showValidator = function (message, type, position, isStayOut, isStayAlive, finishTime, confirmCallback, confirmTheme, confirmOptions) {
        if (typeof this !== 'undefined') {
            finishTime = finishTime || 3000;
            var thisObj = $(this);
            type = $.trim((type || 'error').toLowerCase());
            if (type !== 'error' && type !== 'success' && type !== 'warning' && type !== 'confirm')
                type = 'error';
            position = $.trim((position || 'right').toLowerCase());
            if (position !== 'top' && position !== 'right' && position !== 'bottom' && position !== 'left')
                position = 'right';
            isStayOut = (isStayOut || false);
            isStayAlive = (isStayAlive || false);
            if (thisObj.prop('tagName').toLowerCase() !== 'input') {
                isStayAlive = false;
            }
            var direction = 'right';
            var containerName = 'validatorContainer-' + $(this).attr('id');
            var container = $('#' + containerName);
            var htmlConfirm = '';
            if (type === 'confirm') {
                confirmCallback = (confirmCallback || '');
                var callbackFunction = containerName.replace('-', '_') + '_callback';
                window[callbackFunction] = confirmCallback;

                confirmOptions = (confirmOptions || ['Yes', 'No']);
                htmlConfirm = '<br /><div style="text-align:middle; padding-top: 10px;">';
                for (i = 0; i < confirmOptions.length; i++) {
                    htmlConfirm += '<div class="button button-light button-tiny validator-confirm" data-callback="' + callbackFunction + '" data-origin="' + thisObj.attr('id') + '">' + confirmOptions[i] + '</div>&nbsp;&nbsp;';
                }
                htmlConfirm = htmlConfirm.slice(0, -12) + '</div>';
                confirmTheme = (confirmTheme || 'dark');
                if (confirmTheme !== 'dark' && confirmTheme !== 'light')
                    confirmTheme = 'dark';
                modalBackground = $('<div class="modal-background ' + confirmTheme + '"></div>');
                isStayAlive = true;
                $('body').append(modalBackground);
            }
            container = $('<div id="' + containerName + '" class="validator-container"><div class="validator-new">' + message + htmlConfirm + '</div></div');
            //if ($('#' + containerName).length > 0)
            //    $('.validator-container').remove();
            $('body').append(container);
            thisObj.attr('data-validator', containerName);
            var validator = $('#' + containerName + ' > .validator-new');
            switch (type) {
                case 'error':
                    validator.addClass('validator-red');
                    break;
                case 'success':
                    validator.addClass('validator-green');
                    break;
                case 'warning':
                    validator.addClass('validator-orange');
                    break;
                case 'confirm':
                    validator.addClass('validator-red');
                    break;
            }
            var distance = '';
            //$(element).stop(true, true).not(':visible').css('display', 'block').css('opacity', 0).css('left', parseFloat($(element).css('left')) - 10 + 'px').animate({ left: '+=10', opacity: 1 }, 500, 'easeOutExpo', function () {
            //    $(element).delay(2000).fadeOut(200);
            var easing = 'easeOutBounce';
            switch (position) {
                case 'top':
                    direction = 'up';
                    validator.outerWidth($(this).outerWidth());
                    container.css('left', $(this).offset().left);
                    if (isStayOut)
                        container.css('top', $(this).offset().top - container.outerHeight() - 8);
                    else
                        container.css('top', $(this).offset().top - container.outerHeight() + 1);
                    easing = 'easeOutElastic';
                    break;
                case 'bottom':
                    direction = 'down';
                    validator.outerWidth($(this).outerWidth());
                    container.css('left', $(this).offset().left);
                    if (isStayOut)
                        container.css('top', $(this).offset().top + $(this).outerHeight() + 8);
                    else
                        container.css('top', $(this).offset().top + $(this).outerHeight() - 1);
                    distance = '10px';
                    easing = 'easeOutElastic';
                    break;
                case 'left':
                    direction = 'left';
                    validator.outerWidth(container.outerWidth() + 16);
                    if (isStayOut)
                        container.css('left', $(this).offset().left - container.outerWidth() - 8);
                    else
                        container.css('left', $(this).offset().left - container.outerWidth() + 1);
                    //container.css('top', $(this).offset().top);
                    container.css('top', $(this).offset().top + (($(this).outerHeight() - container.outerHeight()) / 2));
                    break;
                default:
                    validator.outerWidth(container.outerWidth() + 16);
                    if (thisObj.attr('type') === 'file')
                        container.css('left', $(this).offset().left + 190);
                    else if (isStayOut)
                        container.css('left', $(this).offset().left + $(this).outerWidth() + 8);
                    else
                        container.css('left', $(this).offset().left + $(this).outerWidth() - 1);
                    container.css('top', $(this).offset().top + (($(this).outerHeight() - container.outerHeight()) / 2));
                    distance = '50px';
            }
            thisObj.attr('data-type', type);
            thisObj.attr('data-direction', direction);
            thisObj.attr('data-distance', distance);
            var removeContainer = function () {
                clearInterval(validatorInterval);
                thisObj.removeAttr('data-validator');
                thisObj.removeAttr('data-type');
                thisObj.removeAttr('data-direction');
                thisObj.removeAttr('data-distance');
                container.remove();
            };
            var timer = finishTime + $('.validator-container:visible').length * 200;

            validator.addClass('validator-' + position);
            if (type === 'confirm' && (direction === 'left' || direction === 'right'))
                if (direction === 'left')
                    container.css('display', 'block').css('left', parseFloat(container.css('left')) - 10 + 'px').animate({ left: '+=10', opacity: 1 }, 500, 'easeOutExpo');
                else
                    container.css('display', 'block').css('left', parseFloat(container.css('left')) + 10 + 'px').animate({ left: '-=10', opacity: 1 }, 500, 'easeOutExpo');
            else
                container.show({ effect: 'drop', direction: direction, duration: 1000, easing: easing, distance: distance });

            var validatorInterval = setInterval(function () {
                // Remove validators, if trigger object is missingc:\ddprojects\ddmainwebsite\dev\dickerdata.domain\common\
                $('.validator-container').each(function () {
                    var target = $(this).attr('id');
                    if (!$('[data-validator="' + target + '"]').is(':visible')) {
                        clearInterval(validatorInterval);
                        $(this).remove();
                    }
                });
            }, 100);
            if (!isStayAlive) {
                setTimeout(function () {
                    if (container.is(':visible'))
                        if (type === 'confirm' && (direction === 'left' || direction === 'right'))
                            container.fadeOut(200);
                        else
                            container.hide({ effect: 'drop', direction: direction, duration: 500, easing: 'easeInBack', complete: removeContainer, distance: distance });
                }, timer);
            }
        }
    };

    $.fn.hideValidator = function (defTimeOut) {
        var thisObj = $(this);
        _hideValidator(thisObj, defTimeOut);
    };

    $(function () {
        $(document).on('click', '.validator-confirm', function () {
            var callback = $(this).attr('data-callback');
            _hideValidator($('#' + $(this).attr('data-origin')), 0);
            window[callback]($(this).text());
        });
        $(document).on('click', 'input[data-validator]', function () {
            _hideValidator($(this));
        });

        $(document).on('keypress', 'input[data-validator]', function () {
            _hideValidator($(this));
        });
    });
})($);
Validation popup css
content_copyfile_download
/*#region Validator */
.validator-container {
    display: none;
    position: absolute;
    z-index: 9030;
    background: transparent;
}

.validator-new {
    font-size: 12px;
    position: relative;
    padding: 8px;
    text-align: center;
    max-width: 200px;
}

    .validator-new.validator-red {
        color: white;
        background: #CA1845;
        border: 1px solid #A01B3C;
    }

    .validator-new.validator-green {
        color: white;
        background: #459A45;
        border: 1px solid #2B5E2B;
    }

    .validator-new.validator-dark {
        color: white;
        background-color: #343535;
        border: 1px solid #2B5E2B;
    }

    .validator-new.validator-light {
        color: black;
        background-color: #E7E6E3;
        border: 1px solid #2B5E2B;
    }

    .validator-new:before, .validator-new:after {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        border: solid transparent;
        pointer-events: none;
    }

    .validator-new.validator-top:before, .validator-new.validator-top:after {
        top: 100%;
        left: 50%;
    }

    .validator-new.validator-right:before, .validator-new.validator-right:after {
        right: 100%;
        top: 50%;
    }

    .validator-new.validator-bottom:before, .validator-new.validator-bottom:after {
        bottom: 100%;
        left: 50%;
    }

    .validator-new.validator-left:before, .validator-new.validator-left:after {
        left: 100%;
        top: 50%;
    }

    .validator-new.validator-top:after, .validator-new.validator-right:after, .validator-new.validator-bottom:after, .validator-new.validator-left:after {
        border-width: 7px;
    }

    .validator-new.validator-top:after, .validator-new.validator-bottom:after {
        margin-left: -7px;
    }

    .validator-new.validator-right:after, .validator-new.validator-left:after {
        margin-top: -7px;
    }

    .validator-new.validator-red:after {
        border-color: rgba(202, 24, 69, 0);
    }

    .validator-new.validator-red.validator-top:after {
        border-top-color: #CA1845;
    }

    .validator-new.validator-red.validator-right:after {
        border-right-color: #CA1845;
    }

    .validator-new.validator-red.validator-bottom:after {
        border-bottom-color: #CA1845;
    }

    .validator-new.validator-red.validator-left:after {
        border-left-color: #CA1845;
    }

    .validator-new.validator-green:after {
        border-color: rgba(69, 154, 69, 0);
    }

    .validator-new.validator-green.validator-top:after {
        border-top-color: #459A45;
    }

    .validator-new.validator-green.validator-right:after {
        border-right-color: #459A45;
    }

    .validator-new.validator-green.validator-bottom:after {
        border-bottom-color: #459A45;
    }

    .validator-new.validator-green.validator-left:after {
        border-left-color: #459A45;
    }

    .validator-new.validator-dark:after {
        border-color: rgba(52, 53, 53, 0);
    }

    .validator-new.validator-dark.validator-top:after {
        border-top-color: #343535;
    }

    .validator-new.validator-dark.validator-right:after {
        border-right-color: #343535;
    }

    .validator-new.validator-dark.validator-bottom:after {
        border-bottom-color: #343535;
    }

    .validator-new.validator-dark.validator-left:after {
        border-left-color: #343535;
    }

    .validator-new.validator-light:after {
        border-color: rgba(231, 230, 227, 0);
    }

    .validator-new.validator-light.validator-top:after {
        border-top-color: #E7E6E3;
    }

    .validator-new.validator-light.validator-right:after {
        border-right-color: #E7E6E3;
    }

    .validator-new.validator-light.validator-bottom:after {
        border-bottom-color: #E7E6E3;
    }

    .validator-new.validator-light.validator-left:after {
        border-left-color: #E7E6E3;
    }

    .validator-new.validator-top:before, .validator-new.validator-right:before, .validator-new.validator-bottom:before, .validator-new.validator-left:before {
        border-width: 8px;
    }

    .validator-new.validator-top:before, .validator-new.validator-bottom:before {
        margin-left: -8px;
    }

    .validator-new.validator-right:before, .validator-new.validator-left:before {
        margin-top: -8px;
    }

    .validator-new.validator-red:before {
        border-color: rgba(160, 27, 60, 0);
    }

    .validator-new.validator-red.validator-top:before {
        border-top-color: #A01B3C;
    }

    .validator-new.validator-red.validator-right:before {
        border-right-color: #A01B3C;
    }

    .validator-new.validator-red.validator-bottom:before {
        border-bottom-color: #A01B3C;
    }

    .validator-new.validator-red.validator-left:before {
        border-left-color: #A01B3C;
    }

    .validator-new.validator-green:before {
        border-color: rgba(50, 109, 50, 0);
    }

    .validator-new.validator-green.validator-top:before {
        border-top-color: #326D32;
    }

    .validator-new.validator-green.validator-right:before {
        border-right-color: #326D32;
    }

    .validator-new.validator-green.validator-bottom:before {
        border-bottom-color: #326D32;
    }

    .validator-new.validator-green.validator-left:before {
        border-left-color: #326D32;
    }
/*#endregion*/
Validation popup reference
content_copyfile_download
<script src="//code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha384-Dziy8F2VlJQLMShA6FHWNul/veM9bCkRUaLqr199K94ntO5QUrLJBEbYegdSkkqX" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" integrity="sha384-Nlo8b0yiGl7Dn+BgLn4mxhIIBU6We7aeeiulNCjHdUv/eKHx59s3anfSUjExbDxn" crossorigin="anonymous">
<script src="../../wwwroot/js/jquery-extension.js"></script>

reference them in angular-cli file to make this pop up work

npm install jquery-ui-dist

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/jquery-ui/themes/base/all.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/jquery-ui-dist/jquery-ui.js",
  "../../wwwroot/js/jquery-extension.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
apply in angular
content_copyfile_download
1. in service file

/// <reference path="../../../node_modules/@types/jquery/index.d.ts" />
/// <reference path="../../../node_modules/@types/jqueryui/index.d.ts" />
/// <reference path="./jquery.extension.d.ts" />

declare var jquery: any;
declare var $: any;

showValidator = (
    selector: string,
    message: string,
    position: 'top' | 'right' | 'bottom' | 'left',
    messageType: 'success' | 'error' | 'confirm' | 'warning',
    isStayOut: boolean = false,
    isStayAlive: boolean = false,
    finishTime?: number,
    confirmCallback?: Function,
    confirmOptions?: string[],
    confirmTheme?: string
) => {
    $(selector).showValidator(message, messageType, position, isStayOut, isStayAlive, finishTime, confirmCallback, confirmTheme, confirmOptions);
}

showError = (
    selector: string,
    message: string,
    position: 'top' | 'right' | 'bottom' | 'left',
) => {
    this.showValidator(selector, message, position, 'error', true, true);
}

showSuccess = (
    selector: string,
    message: string,
    position: 'top' | 'right' | 'bottom' | 'left',
) => {
    this.showValidator(selector, message, position, 'success', true, false);
}

2. in jquery.extension.d.ts

/// <reference types="jquery" />

interface JQuery {

      showValidator(message: string, tp: string, position: string, isStayOut?: boolean, isStayAlive?: boolean, finishTime?: number,
            confirmCallback?: Function, confirmTheme?: string, confirmOptions?: string[]): void;
      
}