{"id":230147,"date":"2022-11-20T20:10:00","date_gmt":"2022-11-20T17:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230147"},"modified":"2022-11-09T20:18:42","modified_gmt":"2022-11-09T17:18:42","slug":"uma-dica-rapida-para-ocultar-as-sobreposicoes-de-extensao-do-navegador","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/uma-dica-rapida-para-ocultar-as-sobreposicoes-de-extensao-do-navegador\/","title":{"rendered":"Uma dica r\u00e1pida para ocultar as sobreposi\u00e7\u00f5es de extens\u00e3o do navegador"},"content":{"rendered":"\n<p>Na minha experi\u00eancia, a maioria das sobreposi\u00e7\u00f5es de extens\u00e3o do navegador usa um plano de fundo com o tipo de <strong>data:image\/svg+xml<\/strong>. Al\u00e9m disso, cada uma dessas sobreposi\u00e7\u00f5es usa estilos embutidos (em vez de folhas de estilo externas) para renderizar seus bot\u00f5es (ou quaisquer controles que estejam optando por renderizar).<\/p>\n<p>Isso significa que podemos usar algumas t\u00e9cnicas de JavaScript para encontrar elementos com esses atributos e, em seguida, alternar sua visibilidade.<\/p>\n<p>Mas primeiro, por que nos importar\u00edamos em escond\u00ea-los?<\/p>\n<h2>Ocultar sobreposi\u00e7\u00f5es de extens\u00e3o do navegador<\/h2>\n<p>De um modo geral, sempre que essas sobreposi\u00e7\u00f5es est\u00e3o em exibi\u00e7\u00e3o, \u00e9 para salvar em algum servi\u00e7o de favoritos, seja Pinterest, Buffer, Pocket ou qualquer outro.<\/p>\n<h3>Casos de uso relevantes<\/h3>\n<p>Al\u00e9m disso, pelo menos no caso de que estou falando, eles renderizam sempre que o cursor passa sobre uma imagem. Mas e se n\u00e3o quisermos que isso aconte\u00e7a.<\/p>\n<p>Caso em quest\u00e3o:<\/p>\n<ul>\n<li>Talvez estejamos trabalhando em um plugin que acionar\u00e1 sua sobreposi\u00e7\u00e3o e queremos ocultar outros pop-ups.<\/li>\n<li>Ou talvez acionemos outro pop-up que contenha imagens e n\u00e3o queremos que as sobreposi\u00e7\u00f5es apare\u00e7am nessas imagens.<\/li>\n<\/ul>\n<p>Seja qual for o caso, aqui est\u00e1 uma maneira de ocultar as sobreposi\u00e7\u00f5es, dependendo de suas necessidades.<\/p>\n<h3>O processo<\/h3>\n<p>Como o WordPress inclui jQuery por padr\u00e3o, vou us\u00e1-lo como a biblioteca de escolha. Mas isso pode ser facilmente usado encontrando todos os elementos por um nome de classe especificado e iterando por eles (se voc\u00ea optar por usar JavaScript vanilla).<\/p>\n<p>Primeiro, queremos come\u00e7ar com o\u00a0 elemento <strong>body<\/strong> e, em seguida, examinar, digamos, todos os\u00a0 elementos <strong>span<\/strong> (j\u00e1 que esses tendem a ser os elementos mais populares &#8211; novamente, apenas na minha experi\u00eancia &#8211; e <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nos preparar para iterar por eles<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>Em seguida, queremos verificar a presen\u00e7a de <strong>data:image\/svg+xml<\/strong> no atributo de estilo embutido. E, se for encontrado, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">altere a visibilidade do elemento<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n  if ('hidden' !== $(this).css('visibility')) {\n    $(this).css('visibility', 'hidden');\n  }\n}<\/code><\/pre>\n<p>Se voc\u00ea quiser alternar a visibilidade do elemento, precisar\u00e1 configurar uma segunda cl\u00e1usula que remover\u00e1 o\u00a0 valor <strong>oculto<\/strong> quando necess\u00e1rio. Se voc\u00ea quiser fazer isso, pode <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">adicionar facilmente isso<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n    if ('hidden' !== $(this).css('visibility')) {\n        $(this).css('visibility', 'hidden');\n    }\n} else {\n    $(this).css('visibility', 'visible');\n}<\/code><\/pre>\n<p>A fun\u00e7\u00e3o final pode ser algo <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">assim<\/a> :<\/p>\n<pre><code>var hideExtensions = function() {\n\n  $('body')\n      .children('span')\n      .each(function() {\n          if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n              if ('hidden' !== $(this).css('visibility')) {\n                  $(this).css('visibility', 'hidden');\n              }\n          } else {\n              $(this).css('visibility', 'visible');\n          }\n      });\n};\n<\/code><\/pre>\n<p>Ent\u00e3o voc\u00ea s\u00f3 precisa ligar <code>hideExtensions();<\/code>quando necess\u00e1rio.<\/p>\n<h2>Uma palavra sobre desempenho<\/h2>\n<p>Como estamos verificando um subconjunto de elementos no DOM, isso pode se tornar um problema de desempenho, especialmente se houver muitos elementos de um \u00fanico tipo.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aqui est\u00e1 uma dica r\u00e1pida para ocultar sobreposi\u00e7\u00f5es de extens\u00e3o do navegador, como Pinterest, Buffer e outros usando JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":165108,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,837,733,846],"tags":[1170],"class_list":["post-230147","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-guia-para-iniciantes","category-javascript-8","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230147"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230147\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}