nidorx/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #Mensagem Compatibilidade IE

Simples funcionalidade para exibir mensagem bloqueante quando o navegador é o IE.

  
## browsers-bg.png

      
    Raw
  

              browsers-bg.png
            
          
## ie_compatibilidade.png

      
    Raw
  

              ie_compatibilidade.png
            
          
## index.html
<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Pagina Vazia</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#00bcd4">
        <style>
            *,
            *:before,
            *:after {
                box-sizing: inherit;
            }

            html {
                font-size: 15px;
                line-height: 1.5;
                font-family: 'Helvetica', 'Arial', sans-serif;
                font-weight: normal;
                color: rgba(0, 0, 0, 0.87);
            }

            a {
                color: #039be5;
                text-decoration: none;
            }

            #aviso-ie-container {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 10000;
                overflow: hidden;
                overflow-y: auto;
                background-color: #eee;
            }

            .aviso-ie {
                text-align: center;
                padding: 0;
                display: block;
                margin: 40px auto 0;
            }

            .aviso-ie-dialog {
                max-width: 600px;
                display: inline-block;
                vertical-align: middle;
                border: 1px solid #ccc;
                text-align: center;
                background: #fff;
            }

            .aviso-ie-content {
                border: 0;
                border-radius: 0;
            }

            .aviso-ie-header {
                border: 0;
                padding: 0;
                position: relative;
                color: #fff;
                background-color: #0277bd;
                height: 64px;
                line-height: 64px;
                font-size: 16px;
                font-weight: bold;
            }

            .aviso-ie-header #logo-projeto {
                float: left;
                height: 100%;
            }


            .aviso-ie-content p {
                padding: 0;
            }

            .aviso-ie-content .secao-compativeis {
                border-top: 1px dashed #ddd;
                padding-top: 15px;
            }

            .aviso-ie-body .lista-navegador li {
                display: inline-block;
            }


            .aviso-ie-body .icone-navegador {
                width: 150px;
                height: auto;
                text-align: center;
                font-size: 12px;
                font-weight: 700;
                display: inline-block;
            }

            .aviso-ie-body .icone-navegador span {
                background: url(./browsers-bg.png) no-repeat;
                background-size: auto 100px;
                position: relative;
                width: 100px;
                height: 100px;
                display: block;
                margin: 0 auto 10px;
            }

            .aviso-ie-body .icone-navegador.chrome span {
                background-position: 0 0;
            }

            .aviso-ie-body .icone-navegador.firefox span {
                background-position: -100px 0;
            }

            .aviso-ie-body .icone-navegador.ie span {
                background-position: -200px 0;
            }
        </style>
    </head>

    <body>
    <app-root id="app-root"></app-root>

    <!--Mensagem de aviso de incompatibilidade quando usado no Internet Explorer-->
    <div id="aviso-ie-container" style="display: none">
        <div class="aviso-ie">
            <div class="aviso-ie-dialog">
                <div class="aviso-ie-content">
                    <div class="aviso-ie-header">
                        <div id="logo-projeto" class="valign-wrapper">
                            <img class="valign" src="assets/img/logo_projeto.png" style="margin-left: 10px;" alt="${PROJETO}">
                        </div>
                        Aviso de compatibilidade do navegador
                    </div>
                    <div class="aviso-ie-body">
                        <div>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="icone-navegador ie">
                                                <span></span>
                                            </div>
                                        </td>
                                        <td>
                                            <strong><b>O Internet Explorer não é compatível com o ${PROJETO}</b></strong>
                                            <p>
                                                O <strong>Internet Explorer</strong> possui falhas em ferramentas do HTML5,
                                                afetando na exibição dos componentes de interface necessários para o funcionamento
                                                do <strong>${PROJETO}</strong>.
                                            </p>
                                            <p>
                                                Por favor, considere migrar para outro navegador.
                                            </p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="secao-compativeis">
                            <strong><b>O ${PROJETO} funciona nos seguintes navegadores:</b></strong>
                            <ul class="lista-navegador">
                                <li>
                                    <a href="https://www.google.com/chrome/browser/desktop/" class="icone-navegador chrome" target="_blank">
                                        <span></span>
                                        Google Chrome
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.mozilla.org/pt-BR/firefox/new/" class="icone-navegador firefox" target="_blank">
                                        <span></span>
                                        Mozilla Firefox
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            //event listener: DOM ready
            function addLoadEvent(func) {
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = func;
                } else {
                    window.onload = function () {
                        if (oldonload) {
                            oldonload();
                        }
                        func();
                    }
                }
            }

            //call plugin function after DOM ready
            addLoadEvent(function () {
                // https://stackoverflow.com/a/44929931
                // Get IE or Edge browser version
                var version = detectIE();

                if (version !== false || true) {
                    document.getElementById('aviso-ie-container').style.display = 'block';
                    document.getElementById('app-root').style.display = 'none';
                }

                /**
                 * detect IE
                 * returns version of IE or false, if browser is not Internet Explorer
                 */
                function detectIE() {
                    var ua = window.navigator.userAgent;
                    var msie = ua.indexOf('MSIE ');
                    if (msie > 0) {
                        // IE 10 or older => return version number
                        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
                    }

                    var trident = ua.indexOf('Trident/');
                    if (trident > 0) {
                        // IE 11 => return version number
                        var rv = ua.indexOf('rv:');
                        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
                    }

                    var edge = ua.indexOf('Edge/');
                    if (edge > 0) {
                        // Edge (IE 12+) => return version number
                        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
                    }

                    // other browser
                    return false;
                }
            });
        })();
    </script>
</body>

</html>
	<!doctype html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Pagina Vazia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#00bcd4">
	<style>
	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	html {
	font-size: 15px;
	line-height: 1.5;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.87);
	}

	a {
	color: #039be5;
	text-decoration: none;
	}

	#aviso-ie-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	overflow: hidden;
	overflow-y: auto;
	background-color: #eee;
	}

	.aviso-ie {
	text-align: center;
	padding: 0;
	display: block;
	margin: 40px auto 0;
	}

	.aviso-ie-dialog {
	max-width: 600px;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid #ccc;
	text-align: center;
	background: #fff;
	}

	.aviso-ie-content {
	border: 0;
	border-radius: 0;
	}

	.aviso-ie-header {
	border: 0;
	padding: 0;
	position: relative;
	color: #fff;
	background-color: #0277bd;
	height: 64px;
	line-height: 64px;
	font-size: 16px;
	font-weight: bold;
	}

	.aviso-ie-header #logo-projeto {
	float: left;
	height: 100%;
	}


	.aviso-ie-content p {
	padding: 0;
	}

	.aviso-ie-content .secao-compativeis {
	border-top: 1px dashed #ddd;
	padding-top: 15px;
	}

	.aviso-ie-body .lista-navegador li {
	display: inline-block;
	}


	.aviso-ie-body .icone-navegador {
	width: 150px;
	height: auto;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	display: inline-block;
	}

	.aviso-ie-body .icone-navegador span {
	background: url(./browsers-bg.png) no-repeat;
	background-size: auto 100px;
	position: relative;
	width: 100px;
	height: 100px;
	display: block;
	margin: 0 auto 10px;
	}

	.aviso-ie-body .icone-navegador.chrome span {
	background-position: 0 0;
	}

	.aviso-ie-body .icone-navegador.firefox span {
	background-position: -100px 0;
	}

	.aviso-ie-body .icone-navegador.ie span {
	background-position: -200px 0;
	}
	</style>
	</head>

	<body>
	<app-root id="app-root"></app-root>

	<!--Mensagem de aviso de incompatibilidade quando usado no Internet Explorer-->
	<div id="aviso-ie-container" style="display: none">
	<div class="aviso-ie">
	<div class="aviso-ie-dialog">
	<div class="aviso-ie-content">
	<div class="aviso-ie-header">
	<div id="logo-projeto" class="valign-wrapper">
	<img class="valign" src="assets/img/logo_projeto.png" style="margin-left: 10px;" alt="${PROJETO}">
	</div>
	Aviso de compatibilidade do navegador
	</div>
	<div class="aviso-ie-body">
	<div>
	<table>
	<tbody>
	<tr>
	<td>
	<div class="icone-navegador ie">
	<span></span>
	</div>
	</td>
	<td>
	<strong><b>O Internet Explorer não é compatível com o ${PROJETO}</b></strong>
	<p>
	O <strong>Internet Explorer</strong> possui falhas em ferramentas do HTML5,
	afetando na exibição dos componentes de interface necessários para o funcionamento
	do <strong>${PROJETO}</strong>.
	</p>
	<p>
	Por favor, considere migrar para outro navegador.
	</p>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="secao-compativeis">
	<strong><b>O ${PROJETO} funciona nos seguintes navegadores:</b></strong>
	<ul class="lista-navegador">
	<li>
	<a href="https://www.google.com/chrome/browser/desktop/" class="icone-navegador chrome" target="_blank">
	<span></span>
	Google Chrome
	</a>
	</li>
	<li>
	<a href="https://www.mozilla.org/pt-BR/firefox/new/" class="icone-navegador firefox" target="_blank">
	<span></span>
	Mozilla Firefox
	</a>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	(function () {
	//event listener: DOM ready
	function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
	window.onload = func;
	} else {
	window.onload = function () {
	if (oldonload) {
	oldonload();
	}
	func();
	}
	}
	}

	//call plugin function after DOM ready
	addLoadEvent(function () {
	// https://stackoverflow.com/a/44929931
	// Get IE or Edge browser version
	var version = detectIE();

	if (version !== false \|\| true) {
	document.getElementById('aviso-ie-container').style.display = 'block';
	document.getElementById('app-root').style.display = 'none';
	}

	/**
	* detect IE
	* returns version of IE or false, if browser is not Internet Explorer
	*/
	function detectIE() {
	var ua = window.navigator.userAgent;
	var msie = ua.indexOf('MSIE ');
	if (msie > 0) {
	// IE 10 or older => return version number
	return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
	}

	var trident = ua.indexOf('Trident/');
	if (trident > 0) {
	// IE 11 => return version number
	var rv = ua.indexOf('rv:');
	return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
	}

	var edge = ua.indexOf('Edge/');
	if (edge > 0) {
	// Edge (IE 12+) => return version number
	return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
	}

	// other browser
	return false;
	}
	});
	})();
	</script>
	</body>

	</html>
No results found