Logo Hardware.com.br
Emerson Zotelli
Emerson Zote... Novo Membro Registrado
3 Mensagens 0 Curtidas

Auxilio com JavaScript/Html -- Barra de acessibilidade visual

#1 Por Emerson Zote... 09/11/2017 - 16:50
Caros boa tarde,

É um imenso prazer fazer parte do grupo, e por ser novo por aqui peço auxilio caso tenha aberto esse tópico na seção errada! frown.png

Estou fazendo parte de um projeto, onde será criado um DVD de aprendizado infantil (primeiro ano) e nesse projeto implantamos uma barra de acessibilidade.
A barra esta funcionando muito bem, porem percebemos que ao navegar entre paginas do HTML o carregamento da pagina faz com que pisque levemente (mas que nos preocupa por conta de crianças que podem ter ataques epiléticos).

Gostaria do auxilio de vocês para uma solução.

- Tentei:
Usar Async/Await (para deixar assíncrono).
Funcionou no nosso servidor, mas em um DVD que gravamos ele não funcionou.

Valeu galera! wink.png

<div class="topo">

        <!-- Barra de acessibilidade -->

        <div class="barraAcessivel" role="menubar" aria-label="Barra de Acessibilidade">

            <div class="container largura_fixa">

                <div class="row">

                    <ul class="pull-left hidden-xs hidden-sm" aria-label="Navegação pela página">

                        <li role="menuitem"><a accesskey="1" href="#conteudo" title="Ir para o conteúdo"><span lang="pt-br">Ir para o conteúdo</span> <span>[1]</span></a></li>

                        <li role="menuitem"><a accesskey="2" href="#menuPrincipal" title="Ir para o menu"><span lang="pt-br">Ir para o menu</span> <span>[2]</span></a></li>

                    </ul>

                    <ul class="pull-right" aria-label="Controles de acessibilidade do site">

                        <li role="menuitem" class="closeContrast"><a href="acessibilidade.html" title="Acessar a página de acessibilidade" class="pgacessibilidade"><span lang="pt-br">Acessibilidade<span></a></li>

                        <li role="menuitem" class="zoomButtons"><a href="#" title="Ampliar tela" class="zoomIn gm5zoom"><span lang="pt-br">A+<span></a></li>

                        <li role="menuitem" class="zoomButtons closeContrast"><a href="#" title="Reduzir tela" class="zoomOut gm5zoom"><span lang="pt-br">A-<span></a></li>

                        <li role="menuitem" class="contraste">

                            <a href="#" title="Contraste" class="contraste" aria-haspopup="true"><span lang="pt-br">Contraste<span></a>

                            <div class="dautoniveis closed" aria-label="submenu">

                                <ul>

                                    <li><a href="#" title="Preto, branco e amarelo" data-nivel="amarelopreto"><span lang="pt-br">Preto, branco e amarelo<span></a></li>

                                    <li><a href="#" title="Contraste aumentado" data-nivel="altocontraste"><span lang="pt-br">Contraste aumentado<span></a></li>

                                    <li><a href="#" title="Monocromático" data-nivel="monocromatico"><span lang="pt-br">Monocromático<span></a></li>

                                    <li><a href="#" title="Escala de cinza invertida" data-nivel="cinzainvertida"><span lang="pt-br">Escala de cinza invertida<span></a></li>

                                    <li><a href="#" title="Cor invertida" data-nivel="corinvertida"><span lang="pt-br">Cor invertida<span></a></li>

                                    <li><a href="#" title="Cores originais" data-nivel="normal"><span lang="pt-br">Cores originais<span></a></li>

                                </ul>

                            </div>

                        </li>

                    </ul>

                    <div class="clearfix"></div>

                </div>

            </div>

        </div><!-- / -->

    </div>

    <div class="container-fluid fundo_geral">
acessibilidade-visual-deficientevisual barra boa caros projeto html acessibilidade auxilio javascript
esquiloesperto
esquiloesper... Cyber Highlander Moderador
7.1K Mensagens 2.2K Curtidas
#2 Por esquiloesper...
09/11/2017 - 18:00
Quando no DVD nenhum recurso é consumido do servidor, estou certo?
Se todo o conteúdo estiver presente no DVD então este é o motivo das "piscadas", por causa da atualização da página provocada pela abertura dos hiperlinks.

A marcação Html está correta; Por isso mostre o Javascript: provavelmente o mesmo arquivo ou seção que utilizou para adicionar as requisições em Ajax assíncrono.

Percebi também que está presente o framework Booststrap. É bom verificar se os scripts JS dele não interferem diretamente, inclusive.
– Só é difícil enquanto estiver oculto! cool.png
Use a pesquisa


rolleyes.png  Navegar é preciso, viver... também.  smile.png
Emerson Zotelli
Emerson Zote... Novo Membro Registrado
3 Mensagens 0 Curtidas
#3 Por Emerson Zote...
13/11/2017 - 10:15
esquiloesperto disse:


Isso mesmo esquiloesperto, ao navegar nos links ele apresenta essa piscadela. Eles sempre estarão no DVD, dessa forma não tem como solucionar essas piscadas?

Verifiquei o script do bootstrap e não estão em conflito.

O código para aplicação da acessibilidade estão divididos nas seguintes categorias:

Para aplicação dos filtros:

[code=CSS]body {
background: #ffffff;
}
body .barraAcessivel {
font-family-removed: "Arial", sans-serif;
background: #eee;
position: relative;
z-index: 999;
border-bottom: 1px solid #ccc;
}
body .barraAcessivel * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body .barraAcessivel *:before,
body .barraAcessivel *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body .barraAcessivel .clearfix {
clear: both;
}
body .barraAcessivel .pull-left {
float: left !important;
}
body .barraAcessivel .pull-right {
float: right !important;
}
body .barraAcessivel .container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
body .barraAcessivel .container .row {
margin-left: -15px;
margin-right: -15px;
}
body .barraAcessivel ul {
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
body .barraAcessivel ul li {
display: inline-block;
position: relative;
}
body .barraAcessivel ul li a {
display: block;
padding: 0 7px;
line-height: 35px;
font-size-removed: 13px;
color: #555;
}
body .barraAcessivel ul li a.contraste {
padding-left: 30px;
}
body .barraAcessivel ul li a.contraste:before {
content: "";
background-image: url("../images/contraste.png");
background-position: center center;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
position: absolute;
top: 50%;
margin-top: -8px;
margin-left: -20px;
}
body .barraAcessivel ul li a.pgmapadosite {
padding-left: 30px;
}
body .barraAcessivel ul li a.pgmapadosite:before {
content: "";
background-image: url("../images/icon-mapadosite.png");
background-position: center center;
background-repeat: no-repeat;
width: 18px;
height: 16px;
display: inline-block;
position: absolute;
top: 50%;
margin-top: -9px;
margin-left: -24px;
}
body .barraAcessivel ul li a.pglibras {
position: relative;
float: right;
height: 35px;
width: 44px;
padding: 0 7px;
}
body .barraAcessivel ul li a.pglibras:before {
content: "";
background-image: url("../images/icon-libras.png");
background-position: center center;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: relative;
line-height: 30px;
top: 2px;
right: 7px;
padding: 0;
position: absolute;
}
body .barraAcessivel ul li a.pglibras span {
display: none;
}
body .barraAcessivel ul li a.gm5zoom {
font-size-removed: 17px;
font-weight: 700;
padding: 0 10px;
}
body .barraAcessivel ul li a:hover {
text-decoration: underline;
color: inherit;
}
body .barraAcessivel ul li a:focus {
outline: 3px solid rgba(85, 85, 85, 0.7);
text-decoration: none;
color: #000;
}
body .barraAcessivel ul li.lilibras {
float: right;
height: 35px;
width: 44px;
}
body .barraAcessivel .dautoniveis {
position: absolute;
width: 280px;
overflow: hidden;
background: #eee;
transition: all 300ms ease;
}
body .barraAcessivel .dautoniveis.closed {
height: 0;
opacity: 0;
display: none;
}
body .barraAcessivel .dautoniveis.opened {
height: auto;
opacity: 1;
display: block;
}
body .barraAcessivel .dautoniveis ul {
margin: 0;
padding: 0;
overflow: hidden;
display: block;
}
body .barraAcessivel .dautoniveis ul li {
display: block;
overflow: hidden;
}
body .barraAcessivel .dautoniveis ul li a {
border-top: 1px solid #555;
padding: 2px 10px;
color: #555;
font-weight: 600;
}
body .barraAcessivel .dautoniveis ul li a:focus {
outline: 3px solid rgba(85, 85, 85, 0.7);
color: #000000;
}
@media (min-width: 768px) {
body .barraAcessivel .container {
width: 750px;
}
}
@media (min-width: 992px) {
body .barraAcessivel .container {
width: 960px;
}
}
@media (min-width: 1200px) {
body .barraAcessivel .container {
width: 1140px;
}
}
@media (max-width: 992px) {
.barraAcessivel ul li {
float: left;
}
.barraAcessivel ul li a:not(.pglibras, .pgmapadosite):before {
display: none !important;
}
.barraAcessivel ul li a.pglibras,
.barraAcessivel ul li a.pgmapadosite,
.barraAcessivel ul li a.contraste {
height: 35px;
}
.barraAcessivel ul li a.pglibras:before,
.barraAcessivel ul li a.pgmapadosite:before,
.barraAcessivel ul li a.contraste:before {
height: 30px;
}
.barraAcessivel ul li a.pglibras span,
.barraAcessivel ul li a.pgmapadosite span,
.barraAcessivel ul li a.contraste span {
display: none;
}
.barraAcessivel ul li.zoomButtons {
display: none;
}
.barraAcessivel .dautoniveis {
width: 320px;
right: -90px;
}
.barraAcessivel .dautoniveis li {
width: 100%;
}
}
@media (max-width: 991px) and (min-width: 768px) {
.barraAcessivel .hidden-sm {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
.barraAcessivel .dautoniveis {
width: 280px;
right: -81px;
}
}


[/code]

alto contraste:
[code=CSS]html body {
filter: contrast(1.5);
-webkit-filter: contrast("1.5");
}
html body img,
html body iframe,
html body video {
filter: contrast(0.65);
-webkit-filter: contrast(0.65);
}
[/code]

Cinza Invertida:
[code=CSS]html body {
background-color: #000 !important;
filter: invert(100%) grayscale(100%);
-webkit-filter: invert(100%) grayscale(100%);
}
html body a {
text-decoration: underline;
}
html body img,
html body iframe,
html body video,
html body .noFilter {
filter: invert(100%);
-webkit-filter: invert(100%);
}
[/code]

cor invertida:
[code=CSS]html body {
background-color: #000 !important;
filter: invert(100%);
-webkit-filter: invert(100%);
}
html body .noFilter {
filter: invert(100%);
-webkit-filter: invert(100%);
}[/code]

mono cromático:
[code=CSS]html body {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
html body a {
text-decoration: underline;
}
[/code]

Amarelo e preto *(esse não existe filtro, apenas no CSS direto):
[code=CSS]html body {
background: #000000 !important;
background: #000000;
}
html body a:not(.noFilterAP):link,
html body a:not(.noFilterAP):visited,
html body a:not(.noFilterAP):hover {
text-decoration: underline;
color: #ffff00 !important;
background: #000000 !important;
border-color: #ffffff !important;
}
html body a:not(.noFilterAP):link:before,
html body a:not(.noFilterAP):visited:before,
html body a:not(.noFilterAP):hover:before {
color: #ffff00 !important;
}
html body a:not(.noFilterAP):link span,
html body a:not(.noFilterAP):visited span,
html body a:not(.noFilterAP):hover span {
color: #ffff00 !important;
}
html body a:not(.noFilterAP):before {
border-color: #000000 !important;
}
html body p:not(.noFilterAP),
html body b:not(.noFilterAP),
html body li:not(.noFilterAP),
html body ul:not(.noFilterAP),
html body div:not(.noFilterAP),
html body td:not(.noFilterAP),
html body tr:not(.noFilterAP),
html body h1:not(.noFilterAP),
html body h2:not(.noFilterAP),
html body h3:not(.noFilterAP),
html body h4:not(.noFilterAP),
html body h5:not(.noFilterAP),
html body h6:not(.noFilterAP),
html body span:not(.noFilterAP),
html body label:not(.noFilterAP),
html body button:not(.noFilterAP),
html body section:not(.noFilterAP),
html body header:not(.noFilterAP),
html body footer:not(.noFilterAP) {
color: #ffffff !important;
background: #000000;
border-color: #ffffff !important;
}
html body input:not(.noFilterAP),
html body select:not(.noFilterAP) {
color: #ffffff !important;
background: #000000 !important;
border-color: #ffffff !important;
}
html body a:link,
html body a:visited {
text-decoration: underline;
color: #ffff00;
}
html body div:before,
html body h1:before,
html body h2:before,
html body h3:before {
background: transparent;
}
html body div:after,
html body h1:after,
html body h2:after,
html body h3:after {
background: transparent;
}
html body input[type='radio']:empty ~ label:before {
background: #000000 !important;
}
html body input[type='radio']:checked ~ label:before {
background: #ffffff !important;
}
html body div:not([id=""]):not([style^="background-image:url"]),
html body section:not([id=""]):not([style^="background-image:url"]),
html body nav:not([id=""]):not([style^="background-image:url"]) {
background: #000000 !important;
}
html body div:not([id=""]):not([style^="background-image:url"]) input,
html body section:not([id=""]):not([style^="background-image:url"]) input,
html body nav:not([id=""]):not([style^="background-image:url"]) input,
html body div:not([id=""]):not([style^="background-image:url"]) button,
html body section:not([id=""]):not([style^="background-image:url"]) button,
html body nav:not([id=""]):not([style^="background-image:url"]) button {
background: #000000 !important;
}
html body li:hover:not([style^="background-image:url"]) {
background: #000000 !important;
}
[/code]

Muito obrigado pela ajuda.

Minha preocupação são com deficientes visuais que podem possuir transtornos com os "piscas" de navegação, como ações epiléticas ou algo nesse sentido.
Emerson Zotelli
Emerson Zote... Novo Membro Registrado
3 Mensagens 0 Curtidas
#5 Por Emerson Zote...
14/11/2017 - 10:28
esquiloesperto disse:

Perdoe-me.

Estou com tantas tarefas, não percebi.
O js esta assim

jquery.Acessibilidade.js:
[code=JavaScript]// JavaScript jQuery Plugin santillanaAcessibilidade
(function() {

//Definicao do nome do plugin e chamada com opcoes
jQuery.fn.santillanaAcessibilidade = function(options) {

if(navigator.userAgent.indexOf("Chrome") != -1 )
{

$(".barraAcessivel").santillanaAcessibilidadeHTML5();

return true;
}


//Seta os valores default
var defaults = {
nomeCookieFiltro: "BarraAcessibilidadeFiltro",
nomeCookieZoom: "BarraAcessibilidadeZoom",
caminhoCss: "acessibilidade/css/",
zoomEscala: true,
zoomMaximo: 8,
zoomPorcentagem: 25,
elementosMudancaFonte: "h1, h2, h3, h4, h5, h6, p, a, span, label, input, textarea, li, pre",
excluirElementos: ['.nofilter, img'],
excluirElementosAP: ['img'],
}

var options = $.extend(defaults, options);

//Inicializacao do plugin
return this.each(function() {

//
// Objeto principal
//
var obj = jQuery(this);

//
// Verificação se é firefox
//
var isFirefox = false;
if ( navigator.userAgent.match(/Mozzila/) || navigator.userAgent.match(/Firefox/) ){
isFirefox = true;
}

//
// Verificação se é Internet Explorer
//
var isIE = false;
if (navigator.appName == 'Microsoft Internet Explorer' || !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/)) || (typeof $.browser !== "undefined" && $.browser.msie == 1)) {
isIE = true;
}

//
// Opções de exclusao serão incluidos com a classe noFilter
//
options.excluirElementos.forEach(function(item, index) {
$(item).addClass('noFilter');
})

options.excluirElementosAP.forEach(function(item, index) {
$(item).addClass('noFilterAP');
})

var menuContraste = obj.find("ul.pull-right li.contraste");
var fecharMenuContraste = obj.find("ul.pull-right li.closeContrast");
var barra = menuContraste.find("div.dautoniveis");
var screenWidth = $(window).width();
var zoomInBtn = obj.find(".zoomIn");
var zoomOutBtn = obj.find(".zoomOut");

if ( !options.tamanhoConteudo ){
options.tamanhoConteudo = 960;
}

var containerX = obj.find(".container").width();
var scale;

if ( isFirefox ){
$(window).resize(function() {
containerX = obj.find(".container").width();
screenWidth = $(window).width();
setCookie(options.nomeCookieZoom, 1);
zoomOut();
});
}

//
// Verificar o cookie setado para aplicar no body
//
if (document.cookie.indexOf(options.nomeCookieFiltro) > 0) {
if (getCookie(options.nomeCookieFiltro) != "normal") {
var valueCookie = getCookie(options.nomeCookieFiltro);
changeFilter(valueCookie);
}
}

//
// Verificação de cookies
//
if (document.cookie.indexOf(options.nomeCookieZoom) < 0) {
if (!options.zoomEscala) {
setCookie(options.nomeCookieZoom, 0);
} else {
setCookie(options.nomeCookieZoom, 1);
}
}
if (document.cookie.indexOf(options.nomeCookieFiltro) < 0) {
setCookie(options.nomeCookieFiltro, 'normal');
}

// Cria cookie de zoom
if (options.zoomEscala) {
var scale = parseFloat(getCookie(options.nomeCookieZoom));
if ( scale < 1 ) {
setCookie(options.nomeCookieZoom, 1);
scale = 1;
}
} else {
var scale = parseFloat(getCookie(options.nomeCookieZoom));
}

//
// Clique nos níveis de contraste
//
barra.find("a").click(function(event) {
var nivel = $(this).attr("data-nivel");

//Cria o cookie com o filtro selecionado
setCookie(options.nomeCookieFiltro, nivel, 0);

//aplica o filtro chamando o metodo de aplicar filtro
changeFilter(nivel);

if ($(window).width() <= 992) {
barra.removeClass('opened').addClass('closed');
}
return false;
});

//
// Verificação contraste para IE ( Link contraste aplica e remove o contraste amarelo no preto )
//
if ( isIE ) {

var btnContraste = barra.parent().find("a");
barra.remove();

if ( getCookie(options.nomeCookieFiltro) == "amarelopreto" ){
btnContraste.attr("data-nivel","normal");
}else{
btnContraste.attr("data-nivel","amarelopreto");
}

// Botao Contraste aplicando filtro
btnContraste.click(function(event) {

var btn = $(this);
var nivel = $(this).attr("data-nivel");
setCookie(options.nomeCookieFiltro, nivel, 0);
changeFilter(nivel);
if( nivel == "amarelopreto"){
btn.attr("data-nivel","normal");
}else{
btn.attr("data-nivel","amarelopreto");
}
return false;

});

}

//
// Função aplicar filtro
//
function changeFilter(nivel) {
switch (nivel) {
// Caso default
case 'normal':
resetFilter();
break;
// Caso for alto contraste
case 'altocontraste':
resetFilter();
$("head").append('');
break;
// Caso for monocromático
case 'monocromatico':
resetFilter();
$("head").append('');
break;
// Caso for escala de cinza
case 'cinzainvertida':
resetFilter();
$("head").append('');
break;

// Caso de cores invertidas
case 'corinvertida':
resetFilter();
$("head").append('');
break;

// Caso de amarelo no preto
case 'amarelopreto':
resetFilter();
$('iframe').each(function(){
var $urlIfram = $(this).attr('src');
$(this).attr('src',$urlIfram + '?cor=amarelopreto');
});
$("head").append('');
break;
}
}

//
// Funcao resetar filtros
//
function resetFilter() {
$('iframe').each(function(){
var $urlIfram = $(this).attr('src');
$(this).attr('src',$urlIfram.replace('?cor=amarelopreto',''));
});
$('link[id^="santAcess-"]').remove();
}

//
// Adiciona a fonte base ao projeto
//
if (!options.zoomEscala) {
$(options.elementosMudancaFonte).each(function() {
var obj = $(this);
var itemFontSize = obj.css("font-size-removed");
var itemFontSize = itemFontSize.replace("px", "").trim();

var itemLineHeight = obj.css("line-height");
var itemLineHeight = itemLineHeight.replace("px", "").trim();

obj.attr("data-font", itemFontSize);
obj.attr("data-lheight", itemLineHeight);
});
}

//
// Funcao para mudar a fonte
//
function changeFont(zoom, porcentagem) {
if (!porcentagem) {
porcentagem = options.zoomPorcentagem;
}
$(options.elementosMudancaFonte).each(function() {
var obj = $(this);
var itemFontSize = obj.attr("data-font");
var itemLineHeight = obj.attr("data-lheight");

if (zoom == 0) {
var novoTamanho = itemFontSize;
var novoTamanhoLh = itemLineHeight;
} else {
var calculo = Math.floor(parseFloat(porcentagem) * zoom) / 100;
var multiplicador = parseFloat(1.0) + calculo;
var novoTamanho = parseFloat(itemFontSize) * multiplicador;
var novoTamanhoLh = parseFloat(itemLineHeight) * multiplicador;
}

obj.css({
"font-size-removed": novoTamanho + "px",
"line-height": novoTamanhoLh + "px"
});
});
}

//
// Função verifica tela
//
function verify(type) {
if (type == 'in') {
var newSize = containerX * (scale + 0.2);
if (newSize < screenWidth) {
return true;
} else {
return false;
}
}
if (type == 'out') {
var newSize = containerX - (containerX / (scale - 0.2));
if (newSize > 0) {
return true;
} else {
return false;
}
}
}

var currFFZoom = parseFloat(getCookie(options.nomeCookieZoom));
var currIEZoom = ( parseFloat(currFFZoom) ) * 100;
var valid = false;

function plus(){
var step = 0.2;
currFFZoom += step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 20;
currIEZoom += stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
setCookie(options.nomeCookieZoom, currFFZoom);
centralizarZoom();
};
function minus(){
if ( currFFZoom > 1) {
var step = 0.2;
currFFZoom -= step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 20;
currIEZoom -= stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
setCookie(options.nomeCookieZoom, currFFZoom);
centralizarZoom();
}
};

//
// Centralizar no zoom
//
function centralizarZoom(){
$('body').width("100%");
if ( $(".container").outerWidth() > $(".container").outerWidth(true) ){
$('body').width(window.innerWidth);
}else{
$('body').width("100%");
}
var ld = $(document).width() - $('body').width();
var nv = ld / 2;
window.scrollTo( nv, $('body').offset().top);
}

//
// Função zoomIn em escala
//
function zoomIn() {
if (verify('in') == true) {
scale += 0.2;
$('body').css({
'transform': 'scale(' + scale + ',' + scale + ')',
'transformOrigin': '50% 0',
'overflow-x': 'hidden'
});
setCookie(options.nomeCookieZoom, scale);
}
}

//
// Função zoomOut em escala
//
function zoomOut() {
if (verify('out') == true) {
scale -= 0.2;
$('body').css({
'transform': 'scale(' + scale + ',' + scale + ')',
'transformOrigin': '50% 0'
});
} else {
scale = 1;
$('body').css({
'transform': 'scale(' + scale + ',' + scale + ')',
'transformOrigin': '50% 0',
'overflow-x': 'auto'
});
}
setCookie(options.nomeCookieZoom, scale);
}

//
// Clique para zoom
//
zoomInBtn.click(function () {
if (!options.zoomEscala) {
var zoom = parseInt(getCookie(options.nomeCookieZoom)) + 1;
if (zoom < (options.zoomMaximo + 1)) {
changeFont(zoom);
}
if (zoom <= options.zoomMaximo) {
setCookie(options.nomeCookieZoom, zoom);
}
} else {
if ( isFirefox ){
zoomIn();
}else{
plus();
}
}
return false;
});

//
// Clique para zoom
//
zoomOutBtn.click(function() {
if (!options.zoomEscala) {
var zoom = parseInt(getCookie(options.nomeCookieZoom)) - 1;
if (zoom >= 0) {
setCookie(options.nomeCookieZoom, zoom);
changeFont(zoom);
}
} else {
if ( isFirefox ){
if (scale > 1) {
zoomOut();
}
}else{
minus();
}
}
return false;
});

var cookieZoom = getCookie(options.nomeCookieZoom);
if (!options.zoomEscala) {
changeFont(cookieZoom);
} else {
if ( isFirefox ){
if (cookieZoom == 1) {
$('body').css({
'transform': 'scale(' + cookieZoom + ',' + cookieZoom + ')',
'transformOrigin': '50% 0',
'overflow-x': 'auto'
});
} else {
$('body').css({
'transform': 'scale(' + cookieZoom + ',' + cookieZoom + ')',
'transformOrigin': '50% 0',
'overflow-x': 'hidden'
});
}
}else{
var cFF = cookieZoom;
$('body').css('MozTransform','scale(' + cFF + ')');
var cIE = ( parseFloat(cookieZoom) ) * 100;
$('body').css('zoom', ' ' + ( 0.100 + cIE ) - 0.1 + '%');
centralizarZoom();
}
}

//
// Verificação para hover e/ou clique para abrir menu de itens da barra
//
if (screenWidth > 992) {
if (!menuContraste.find('a').hasClass('contrasteOff')) {
menuContraste.find('a').hover(function() {
menuContraste.find('div.dautoniveis').removeClass('closed').addClass('opened');
}, function() {
menuContraste.find('div.dautoniveis').removeClass('opened').addClass('closed');
}).click(function() {
if (barra.hasClass('opened')) {
barra.removeClass('opened').addClass('closed');
} else {
barra.removeClass('closed').addClass('opened');
}
});
}
fecharMenuContraste.find('a').focusin(function() {
barra.removeClass('opened').addClass('closed');
});
} else {
menuContraste.find(' > a').on('click', function() {
if (barra.hasClass('closed')) {
barra.removeClass('closed').addClass('opened');
} else {
barra.removeClass('opened').addClass('closed');
}
});
}

//
// Funcao Set Cookie
//
function setCookie(nome, valor, dias) {
if (!dias) {
dias = 0;
}
if (dias) {
var date = new Date();
date.setTime(date.getTime() + (dias * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = nome + "=" + valor + expires + "; path=/";
}

//
// Funcao Get Cookie
//
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

}); //Fim do processo

}



//Definicao do nome do plugin e chamada com opcoes
jQuery.fn.santillanaAcessibilidadeHTML5 = function(options) {

//Seta os valores default
var defaults = {
nomeCookieFiltro: "BarraAcessibilidadeFiltro",
nomeCookieZoom: "BarraAcessibilidadeZoom",
caminhoCss: "acessibilidade/css/",
zoomEscala: true,
zoomMaximo: 8,
zoomPorcentagem: 25,
elementosMudancaFonte: "h1, h2, h3, h4, h5, h6, p, a, span, label, input, textarea, li, pre",
excluirElementos: ['.nofilter, img'],
excluirElementosAP: ['img'],
}

var options = $.extend(defaults, options);

//Inicializacao do plugin
return this.each(function() {

//
// Objeto principal
//
var obj = jQuery(this);

//
// Verificação se é firefox
//
var isFirefox = false;
if ( navigator.userAgent.match(/Mozzila/) || navigator.userAgent.match(/Firefox/) ){
isFirefox = true;
}

//
// Verificação se é Internet Explorer
//
var isIE = false;
if (navigator.appName == 'Microsoft Internet Explorer' || !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/)) || (typeof $.browser !== "undefined" && $.browser.msie == 1)) {
isIE = true;
}

//
// Opções de exclusao serão incluidos com a classe noFilter
//
options.excluirElementos.forEach(function(item, index) {
$(item).addClass('noFilter');
})

options.excluirElementosAP.forEach(function(item, index) {
$(item).addClass('noFilterAP');
})

var menuContraste = obj.find("ul.pull-right li.contraste");
var fecharMenuContraste = obj.find("ul.pull-right li.closeContrast");
var barra = menuContraste.find("div.dautoniveis");
var screenWidth = $(window).width();
var zoomInBtn = obj.find(".zoomIn");
var zoomOutBtn = obj.find(".zoomOut");

if ( !options.tamanhoConteudo ){
options.tamanhoConteudo = 960;
}

var containerX = obj.find(".container").width();
var scale;

if ( isFirefox ){
$(window).resize(function() {
containerX = obj.find(".container").width();
screenWidth = $(window).width();
localStorage.BarraAcessibilidadeZoom =1;
zoomOut();
});
}

//
// Verificar o cookie setado para aplicar no body
//

if(isNaN(localStorage.BarraAcessibilidadeZoom)){
localStorage.BarraAcessibilidadeZoom = 1;
}


if (localStorage.BarraAcessibilidadeFiltro) {
if (localStorage.BarraAcessibilidadeFiltro != "normal") {
var valueCookie = localStorage.BarraAcessibilidadeFiltro;
changeFilter(valueCookie);
}
}

//
// Verificação de cookies
//
if (localStorage.BarraAcessibilidadeZoom) {
if (!options.zoomEscala) {
localStorage.BarraAcessibilidadeZoom = 0;
} else {
//localStorage.BarraAcessibilidadeZoom = 1;
}
}
if (!localStorage.BarraAcessibilidadeFiltro) {
localStorage.BarraAcessibilidadeFiltro = 'normal';
}

// Cria cookie de zoom
if (options.zoomEscala) {
var scale = parseFloat(Number(localStorage.BarraAcessibilidadeZoom));
if ( scale < 1 ) {
localStorage.BarraAcessibilidadeZoom = 1;
scale = 1;
}
} else {
var scale = parseFloat(Number(localStorage.BarraAcessibilidadeZoom));
}

//
// Clique nos níveis de contraste
//
barra.find("a").click(function(event) {
var nivel = $(this).attr("data-nivel");

//Cria o cookie com o filtro selecionado
localStorage.BarraAcessibilidadeFiltro = nivel;

//aplica o filtro chamando o metodo de aplicar filtro
changeFilter(nivel);

if ($(window).width() <= 992) {
barra.removeClass('opened').addClass('closed');
}
return false;
});

//
// Verificação contraste para IE ( Link contraste aplica e remove o contraste amarelo no preto )
//
if ( isIE ) {

var btnContraste = barra.parent().find("a");
barra.remove();

if ( localStorage.BarraAcessibilidadeFiltro == "amarelopreto" ){
btnContraste.attr("data-nivel","normal");
}else{
btnContraste.attr("data-nivel","amarelopreto");
}

// Botao Contraste aplicando filtro
btnContraste.click(function(event) {

var btn = $(this);
var nivel = $(this).attr("data-nivel");
localStorage.BarraAcessibilidadeFiltro = nivel;
changeFilter(nivel);
if( nivel == "amarelopreto"){
btn.attr("data-nivel","normal");
}else{
btn.attr("data-nivel","amarelopreto");
}
return false;

});

}

//
// Função aplicar filtro
//
function changeFilter(nivel) {
switch (nivel) {
// Caso default
case 'normal':
resetFilter();
break;
// Caso for alto contraste
case 'altocontraste':
resetFilter();
$("head").append('');
break;
// Caso for monocromático
case 'monocromatico':
resetFilter();
$("head").append('');
break;
// Caso for escala de cinza
case 'cinzainvertida':
resetFilter();
$("head").append('');
break;

// Caso de cores invertidas
case 'corinvertida':
resetFilter();
$("head").append('');
break;

// Caso de amarelo no preto
case 'amarelopreto':
resetFilter();
$("head").append('');
$('iframe').each(function(){
var $urlIfram = $(this).attr('src');
$(this).attr('src',$urlIfram + '?cor=amarelopreto');
});
break;
}
}

//
// Funcao resetar filtros
//
function resetFilter() {
$('link[id^="santAcess-"]').remove();
$('iframe').each(function(){
var $urlIfram = $(this).attr('src');
$(this).attr('src',$urlIfram.replace('?cor=amarelopreto',''));
});
}

//
// Adiciona a fonte base ao projeto
//
if (!options.zoomEscala) {
$(options.elementosMudancaFonte).each(function() {
var obj = $(this);
var itemFontSize = obj.css("font-size-removed");
var itemFontSize = itemFontSize.replace("px", "").trim();

var itemLineHeight = obj.css("line-height");
var itemLineHeight = itemLineHeight.replace("px", "").trim();

obj.attr("data-font", itemFontSize);
obj.attr("data-lheight", itemLineHeight);
});
}

//
// Funcao para mudar a fonte
//
function changeFont(zoom, porcentagem) {
if (!porcentagem) {
porcentagem = options.zoomPorcentagem;
}
$(options.elementosMudancaFonte).each(function() {
var obj = $(this);
var itemFontSize = obj.attr("data-font");
var itemLineHeight = obj.attr("data-lheight");

if (zoom == 0) {
var novoTamanho = itemFontSize;
var novoTamanhoLh = itemLineHeight;
} else {
var calculo = Math.floor(parseFloat(porcentagem) * zoom) / 100;
var multiplicador = parseFloat(1.0) + calculo;
var novoTamanho = parseFloat(itemFontSize) * multiplicador;
var novoTamanhoLh = parseFloat(itemLineHeight) * multiplicador;
}

obj.css({
"font-size-removed": novoTamanho + "px",
"line-height": novoTamanhoLh + "px"
});
});
}

//
// Função verifica tela
//
function verify(type) {
if (type == 'in') {
var newSize = containerX * (scale + 0.2);
if (newSize < screenWidth) {
return true;
} else {
return false;
}
}
if (type == 'out') {
var newSize = containerX - (containerX / (scale - 0.2));
if (newSize > 0) {
return true;
} else {
return false;
}
}
}

var currFFZoom = parseFloat(Number(localStorage.BarraAcessibilidadeZoom));
var currIEZoom = ( parseFloat(currFFZoom) ) * 100;
var valid = false;

function plus(){
var step = 0.2;
currFFZoom += step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 20;
currIEZoom += stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
localStorage.BarraAcessibilidadeZoom = currFFZoom;
console.log("291: "+currFFZoom);
centralizarZoom();
};
function minus(){
if ( currFFZoom > 1) {
var step = 0.2;
currFFZoom -= step;
$('body').css('MozTransform','scale(' + currFFZoom + ')');
var stepie = 20;
currIEZoom -= stepie;
$('body').css('zoom', ' ' + currIEZoom + '%');
localStorage.BarraAcessibilidadeZoom = currFFZoom;
centralizarZoom();
}
};

//
// Centralizar no zoom
//
function centralizarZoom(){
$('body').width("100%");
if ( $(".container").outerWidth() > $(".container").outerWidth(true) ){
$('body').width(window.innerWidth);
}else{
$('body').width("100%");
}
var ld = $(document).width() - $('body').width();
var nv = ld / 2;
window.scrollTo( nv, $('body').offset().top);
}

//
// Função zoomIn em escala
//
function zoomIn() {
if (verify('in') == true) {
scale += 0.2;
$('body').css({
'transform': 'scale(' + scale + ',' + scale + ')',
'transformOrigin': '50% 0',
'overflow-x': 'hidden'
});
localStorage.BarraAcessibilidadeZoom = scale;
}
}

//
// Função zoomOut em escala
//
function zoomOut() {
if (verify('out') == true) {
scale -= 0.2;
$('body').css({
'transform': 'scale(' + scale + ',' + scale + ')',
'transformOrigin': '50% 0'
});
} else {
scale = 1;
$('body').css({
'transform': 'scale(' + scale + ',' + scale + ')',
'transformOrigin': '50% 0',
'overflow-x': 'auto'
});
}
localStorage.BarraAcessibilidadeZoom = scale;
}

//
// Clique para zoom
//
zoomInBtn.click(function () {
if (!options.zoomEscala) {
var zoom = parseInt(Number(localStorage.BarraAcessibilidadeZoom)) + 1;
if (zoom < (options.zoomMaximo + 1)) {
changeFont(zoom);
}
if (zoom <= options.zoomMaximo) {
localStorage.BarraAcessibilidadeZoom=zoom;
}
} else {
if ( isFirefox ){
zoomIn();
}else{
plus();
}
}
return false;
});

//
// Clique para zoom
//
zoomOutBtn.click(function() {
if (!options.zoomEscala) {
var zoom = parseInt(Number(localStorage.BarraAcessibilidadeZoom)) - 1;
if (zoom >= 0) {
localStorage.BarraAcessibilidadeZoom = zoom;
changeFont(zoom);
}
} else {
if ( isFirefox ){
if (scale > 1) {
zoomOut();
}
}else{
minus();
}
}
return false;
});

var cookieZoom = Number(localStorage.BarraAcessibilidadeZoom);
if (!options.zoomEscala) {
changeFont(cookieZoom);
} else {
if ( isFirefox ){
if (cookieZoom == 1) {
$('body').css({
'transform': 'scale(' + cookieZoom + ',' + cookieZoom + ')',
'transformOrigin': '50% 0',
'overflow-x': 'auto'
});
} else {
$('body').css({
'transform': 'scale(' + cookieZoom + ',' + cookieZoom + ')',
'transformOrigin': '50% 0',
'overflow-x': 'hidden'
});
}
}else{
console.log("420: "+cookieZoom);
var cFF = cookieZoom;
$('body').css('MozTransform','scale(' + cFF + ')');
var cIE = ( parseFloat(cookieZoom) ) * 100;

$('body').css('zoom', ' ' + ( 0.100 + cIE ) - 0.1 + '%');
centralizarZoom();
}
}

//
// Verificação para hover e/ou clique para abrir menu de itens da barra
//
if (screenWidth > 992) {
if (!menuContraste.find('a').hasClass('contrasteOff')) {
menuContraste.find('a').hover(function() {
menuContraste.find('div.dautoniveis').removeClass('closed').addClass('opened');
}, function() {
menuContraste.find('div.dautoniveis').removeClass('opened').addClass('closed');
}).click(function() {
if (barra.hasClass('opened')) {
barra.removeClass('opened').addClass('closed');
} else {
barra.removeClass('closed').addClass('opened');
}
});
}
fecharMenuContraste.find('a').focusin(function() {
barra.removeClass('opened').addClass('closed');
});
} else {
menuContraste.find(' > a').on('click', function() {
if (barra.hasClass('closed')) {
barra.removeClass('closed').addClass('opened');
} else {
barra.removeClass('opened').addClass('closed');
}
});
}

//
// Funcao Set Cookie
//
function setCookie(nome, valor, dias) {
if (!dias) {
dias = 0;
}
if (dias) {
var date = new Date();
date.setTime(date.getTime() + (dias * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = nome + "=" + valor + expires + "; path=/";
}

//
// Funcao Get Cookie
//
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

}); //Fim do processo

}
})(jQuery);[/code]

jquery.Acessibilidade.min.js:

[code=JavaScript]jQuery, jQuery.fn.santillanaAcessibilidade = function(o) {
var e = {
nomeCookieFiltro: "BarraAcessibilidadeFiltro",
nomeCookieZoom: "BarraAcessibilidadeZoom",
caminhoCss: "css/",
zoomEscala: !0,
zoomMaximo: 8,
zoomPorcentagem: 25,
elementosMudancaFonte: "h1, h2, h3, h4, h5, h6, p, a, span, label, input, textarea, li, pre",
excluirElementos: [".nofilter, img"],
excluirElementosAP: ["img"]
},
o = $.extend(e, o);
return this.each(function() {
function e(e) {
switch (e) {
case "normal":
a();
break;
case "altocontraste":
a(), $("head").append('');
break;
case "monocromatico":
a(), $("head").append('');
break;
case "cinzainvertida":
a(), $("head").append('');
break;
case "corinvertida":
a(), $("head").append('');
break;
case "amarelopreto":
a(), $("head").append('')
}
}

function a() {
$('link[id^="santAcess-"]').remove()
}

function n(e, a) {
a || (a = o.zoomPorcentagem), $(o.elementosMudancaFonte).each(function() {
var o = $(this),
n = o.attr("data-font"),
t = o.attr("data-lheight");
if (0 == e) var i = n,
s = t;
else var r = Math.floor(parseFloat(a) * e) / 100,
c = parseFloat(1) + r,
i = parseFloat(n) * c,
s = parseFloat(t) * c;
o.css({
"font-size-removed": i + "px",
"line-height": s + "px"
})
})
}

function t(o) {
if ("in" == o) return (e = b * (x + .2)) < k;
if ("out" == o) {
var e = b - b / (x - .2);
return e > 0
}
}

function i() {
z += .2, $("body").css("MozTransform", "scale(" + z + ")"), F += 20, $("body").css("zoom", " " + F + "%"), d(o.nomeCookieZoom, z), r()
}

function s() {
z > 1 && (z -= .2, $("body").css("MozTransform", "scale(" + z + ")"), F -= 20, $("body").css("zoom", " " + F + "%"), d(o.nomeCookieZoom, z), r())
}

function r() {
$("body").width("100%"), $(".container").outerWidth() > $(".container").outerWidth(!0) ? $("body").width(window.innerWidth) : $("body").width("100%");
var o = ($(document).width() - $("body").width()) / 2;
window.scrollTo(o, $("body").offset().top)
}

function c() {
1 == t("in") && (x += .2, $("body").css({
transform: "scale(" + x + "," + x + ")",
transformOrigin: "50% 0",
"overflow-x": "hidden"
}), d(o.nomeCookieZoom, x))
}

function l() {
1 == t("out") ? (x -= .2, $("body").css({
transform: "scale(" + x + "," + x + ")",
transformOrigin: "50% 0"
})) : (x = 1, $("body").css({
transform: "scale(" + x + "," + x + ")",
transformOrigin: "50% 0",
"overflow-x": "auto"
})), d(o.nomeCookieZoom, x)
}

function d(o, e, a) {
if (a || (a = 0), a) {
var n = new Date;
n.setTime(n.getTime() + 24 * a * 60 * 60 * 1e3), t = "; expires=" + n.toGMTString()
} else var t = "";
document.cookie = o + "=" + e + t + "; path=/"
}

function m(o) {
for (var e = o + "=", a = decodeURIComponent(document.cookie).split(";"), n = 0; n < a.length; n++) {
for (var t = a[n];
" " == t.charAt(0)wink.png t = t.substring(1);
if (0 == t.indexOf(e)) return t.substring(e.length, t.length)
}
return ""
}
var f = jQuery(this),
h = !1;
(navigator.userAgent.match(/Mozzila/) || navigator.userAgent.match(/Firefox/)) && (h = !0);
var u = !1;
("Microsoft Internet Explorer" == navigator.appName || navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/) || void 0 !== $.browser && 1 == $.browser.msie) && (u = !0), o.excluirElementos.forEach(function(o, e) {
$(o).addClass("noFilter")
}), o.excluirElementosAP.forEach(function(o, e) {
$(o).addClass("noFilterAP")
});
var v = f.find("ul.pull-right li.contraste"),
p = f.find("ul.pull-right li.closeContrast"),
C = v.find("div.dautoniveis"),
k = $(window).width(),
g = f.find(".zoomIn"),
w = f.find(".zoomOut");
o.tamanhoConteudo || (o.tamanhoConteudo = 960);
var b = f.find(".container").width();
if (h && $(window).resize(function() {
b = f.find(".container").width(), k = $(window).width(), d(o.nomeCookieZoom, 1), l()
}), document.cookie.indexOf(o.nomeCookieFiltro) > 0 && "normal" != m(o.nomeCookieFiltro) && e(m(o.nomeCookieFiltro)), document.cookie.indexOf(o.nomeCookieZoom) < 0 && (o.zoomEscala ? d(o.nomeCookieZoom, 1) : d(o.nomeCookieZoom, 0)), document.cookie.indexOf(o.nomeCookieFiltro) < 0 && d(o.nomeCookieFiltro, "normal"), o.zoomEscala)(x = parseFloat(m(o.nomeCookieZoom))) < 1 && (d(o.nomeCookieZoom, 1), x = 1);
else var x = parseFloat(m(o.nomeCookieZoom));
if (C.find("a").click(function(a) {
var n = $(this).attr("data-nivel");
return d(o.nomeCookieFiltro, n, 0), e(n), $(window).width() <= 992 && C.removeClass("opened").addClass("closed"), !1
}), u) {
var y = C.parent().find("a");
C.remove(), "amarelopreto" == m(o.nomeCookieFiltro) ? y.attr("data-nivel", "normal") : y.attr("data-nivel", "amarelopreto"), y.click(function(a) {
var n = $(this),
t = $(this).attr("data-nivel");
return d(o.nomeCookieFiltro, t, 0), e(t), "amarelopreto" == t ? n.attr("data-nivel", "normal") : n.attr("data-nivel", "amarelopreto"), !1
})
}
o.zoomEscala || $(o.elementosMudancaFonte).each(function() {
var o = $(this),
e = (e = o.css("font-size-removed")).replace("px", "").trim(),
a = (a = o.css("line-height")).replace("px", "").trim();
o.attr("data-font", e), o.attr("data-lheight", a)
});
var z = parseFloat(m(o.nomeCookieZoom)),
F = 100 * parseFloat(z);
g.click(function() {
if (o.zoomEscala) h ? c() : i();
else {
var e = parseInt(m(o.nomeCookieZoom)) + 1;
e < o.zoomMaximo + 1 && n(e), e <= o.zoomMaximo && d(o.nomeCookieZoom, e)
}
return !1
}), w.click(function() {
if (o.zoomEscala) h ? x > 1 && l() : s();
else {
var e = parseInt(m(o.nomeCookieZoom)) - 1;
e >= 0 && (d(o.nomeCookieZoom, e), n(e))
}
return !1
});
var Z = m(o.nomeCookieZoom);
if (o.zoomEscala)
if (h) 1 == Z ? $("body").css({
transform: "scale(" + Z + "," + Z + ")",
transformOrigin: "50% 0",
"overflow-x": "auto"
}) : $("body").css({
transform: "scale(" + Z + "," + Z + ")",
transformOrigin: "50% 0",
"overflow-x": "hidden"
});
else {
var A = Z;
$("body").css("MozTransform", "scale(" + A + ")");
var E = 100 * parseFloat(Z);
$("body").css("zoom", " " + (.1 + E) - .1 + "%"), r()
} else n(Z);
k > 992 ? (v.find("a").hasClass("contrasteOff") || v.find("a").hover(function() {
v.find("div.dautoniveis").removeClass("closed").addClass("opened")
}, function() {
v.find("div.dautoniveis").removeClass("opened").addClass("closed")
}).click(function() {
C.hasClass("opened") ? C.removeClass("opened").addClass("closed") : C.removeClass("closed").addClass("opened")
}), p.find("a").focusin(function() {
C.removeClass("opened").addClass("closed")
})) : v.find(" > a").on("click", function() {
C.hasClass("closed") ? C.removeClass("closed").addClass("opened") : C.removeClass("opened").addClass("closed")
})
})
};[/code]
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal