{"id":229462,"date":"2022-11-20T19:54:00","date_gmt":"2022-11-20T16:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229462"},"modified":"2022-11-09T07:11:45","modified_gmt":"2022-11-09T04:11:45","slug":"szybka-wskazowka-dotyczaca-ukrywania-nakladek-rozszerzen-przegladarki","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/szybka-wskazowka-dotyczaca-ukrywania-nakladek-rozszerzen-przegladarki\/","title":{"rendered":"Szybka wskaz\u00f3wka dotycz\u0105ca ukrywania nak\u0142adek rozszerze\u0144 przegl\u0105darki"},"content":{"rendered":"\n<p>Z mojego do\u015bwiadczenia wynika, \u017ce \u200b\u200bwi\u0119kszo\u015b\u0107 nak\u0142adek rozszerze\u0144 przegl\u0105darki u\u017cywa t\u0142a o typie <strong>data:image\/svg+xml<\/strong>. Co wi\u0119cej, ka\u017cda z tych nak\u0142adek u\u017cywa wbudowanych styl\u00f3w (zamiast zewn\u0119trznych arkuszy styl\u00f3w) do renderowania swoich przycisk\u00f3w (lub dowolnych kontrolek, kt\u00f3re chc\u0105 renderowa\u0107).<\/p>\n<p>Oznacza to, \u017ce mo\u017cemy u\u017cy\u0107 niekt\u00f3rych technik JavaScript, aby znale\u017a\u0107 elementy, kt\u00f3re maj\u0105 te atrybuty, a nast\u0119pnie prze\u0142\u0105czy\u0107 ich widoczno\u015b\u0107.<\/p>\n<p>Ale po pierwsze, dlaczego mieliby\u015bmy si\u0119 w og\u00f3le stara\u0107 je ukry\u0107?<\/p>\n<h2>Ukrywanie nak\u0142adek rozszerze\u0144 przegl\u0105darki<\/h2>\n<p>Og\u00f3lnie rzecz bior\u0105c, za ka\u017cdym razem, gdy te nak\u0142adki s\u0105 wy\u015bwietlane, nale\u017cy je zapisa\u0107 w jakiej\u015b us\u0142udze zak\u0142adek, czy to Pinterest, Buffer, Pocket, czy co\u015b innego.<\/p>\n<h3>Odpowiednie przypadki u\u017cycia<\/h3>\n<p>Co wi\u0119cej, przynajmniej w przypadku, o kt\u00f3rym m\u00f3wi\u0119, renderuj\u0105 si\u0119 za ka\u017cdym razem, gdy kursor przesuwa si\u0119 nad obrazem. Ale co, je\u015bli nie chcemy, \u017ceby tak si\u0119 sta\u0142o.<\/p>\n<p>Przyk\u0142adem:<\/p>\n<ul>\n<li>By\u0107 mo\u017ce pracujemy nad wtyczk\u0105, kt\u00f3ra uruchomi swoj\u0105 nak\u0142adk\u0119 i chcemy ukry\u0107 inne wyskakuj\u0105ce okienka.<\/li>\n<li>A mo\u017ce uruchamiamy kolejne wyskakuj\u0105ce okienko zawieraj\u0105ce obrazy i nie chcemy, aby na tych obrazach pojawia\u0142y si\u0119 nak\u0142adki.<\/li>\n<\/ul>\n<p>Niezale\u017cnie od przypadku, oto jeden spos\u00f3b na ukrycie nak\u0142adek w zale\u017cno\u015bci od potrzeb.<\/p>\n<h3>Proces<\/h3>\n<p>Poniewa\u017c WordPress domy\u015blnie zawiera jQuery, b\u0119d\u0119 u\u017cywa\u0142 go jako biblioteki z wyboru. Ale r\u00f3wnie \u0142atwo mo\u017cna to wykorzysta\u0107, znajduj\u0105c wszystkie elementy wed\u0142ug okre\u015blonej nazwy klasy i iteruj\u0105c przez nie (je\u015bli zdecydujesz si\u0119 na u\u017cycie waniliowego JavaScript).<\/p>\n<p>Najpierw chcemy zacz\u0105\u0107 od\u00a0 elementu <strong>cia\u0142a<\/strong>, a nast\u0119pnie przyjrze\u0107 si\u0119, powiedzmy, wszystkim\u00a0 elementom <strong>span<\/strong> (poniewa\u017c s\u0105 to najpopularniejsze elementy \u2013 znowu, tylko z mojego do\u015bwiadczenia \u2013 i <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przygotuj si\u0119 do ich iteracji<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>Nast\u0119pnie chcemy sprawdzi\u0107 obecno\u015b\u0107 <strong>data:image\/svg+xml<\/strong> w atrybucie stylu inline. A je\u015bli zostanie znaleziony, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zmie\u0144 widoczno\u015b\u0107 elementu<\/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>Je\u015bli chcesz prze\u0142\u0105czy\u0107 widoczno\u015b\u0107 elementu, musisz ustawi\u0107 drug\u0105 klauzul\u0119, kt\u00f3ra w razie potrzeby usunie <strong>ukryt\u0105<\/strong> warto\u015b\u0107. Je\u015bli chcesz to zrobi\u0107, mo\u017cesz \u0142atwo <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">doda\u0107 to<\/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>Ostateczna funkcja mo\u017ce wygl\u0105da\u0107 mniej wi\u0119cej <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tak<\/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>Wtedy wystarczy zadzwoni\u0107 <code>hideExtensions();<\/code>w razie potrzeby.<\/p>\n<h2>S\u0142owo o wydajno\u015bci<\/h2>\n<p>Poniewa\u017c skanujemy podzbi\u00f3r element\u00f3w w DOM, mo\u017ce to spowodowa\u0107 pewien problem z wydajno\u015bci\u0105, zw\u0142aszcza je\u015bli istnieje wiele element\u00f3w jednego typu.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oto kr\u00f3tka wskaz\u00f3wka dotycz\u0105ca ukrywania nak\u0142adek rozszerze\u0144 przegl\u0105darki, takich jak Pinterest, Buffer i innych za pomoc\u0105 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":[732,897,836,845],"tags":[1169],"class_list":["post-229462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-7","category-kod","category-przewodnik-dla-poczatkujacych","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229462"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229462\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}