{"id":229603,"date":"2022-11-20T20:02:00","date_gmt":"2022-11-20T17:02:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229603"},"modified":"2022-11-09T08:40:00","modified_gmt":"2022-11-09T05:40:00","slug":"kiire-naepunaeide-brauseri-laienduse-uelekatete-peitmiseks","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kiire-naepunaeide-brauseri-laienduse-uelekatete-peitmiseks\/","title":{"rendered":"Kiire n\u00e4pun\u00e4ide brauseri laienduse \u00fclekatete peitmiseks"},"content":{"rendered":"\n<p>Minu kogemuse kohaselt kasutab enamik brauseri laiendite \u00fclekatteid tausta <strong>andmete t\u00fc\u00fcbiga:image\/svg+xml<\/strong>. Lisaks kasutavad k\u00f5ik need \u00fclekatted oma nuppude (v\u00f5i mis tahes juhtelementide renderdamiseks) renderdamiseks sisemisi stiile (mitte v\u00e4liseid laaditabeleid).<\/p>\n<p>See t\u00e4hendab, et saame kasutada m\u00f5ningaid JavaScripti tehnikaid, et leida nende atribuutidega elemente ja seej\u00e4rel muuta nende n\u00e4htavust.<\/p>\n<p>Aga k\u00f5igepealt, miks me peaksime neid isegi varjama?<\/p>\n<h2>Brauseri laienduse \u00fclekatete peitmine<\/h2>\n<p>\u00dcldiselt, kui need \u00fclekatted kuvatakse, tuleb see salvestada m\u00f5nda j\u00e4rjehoidjateenusesse, olgu see siis Pinterest, puhver, tasku v\u00f5i midagi muud.<\/p>\n<h3>Asjakohased kasutusjuhtumid<\/h3>\n<p>Veelgi enam, v\u00e4hemalt sel juhul, millest ma r\u00e4\u00e4gin, renderdatakse need alati, kui kursor liigub \u00fcle pildi. Aga mis siis, kui me ei taha, et see juhtuks.<\/p>\n<p>Juhtum:<\/p>\n<ul>\n<li>V\u00f5ib-olla t\u00f6\u00f6tame pistikprogrammi kallal, mis k\u00e4ivitab selle \u00fclekatte, ja tahame peita muud h\u00fcpikaknad.<\/li>\n<li>V\u00f5i k\u00e4ivitame teise h\u00fcpikakna, mis sisaldab pilte, ja me ei taha, et nendel piltidel ilmuksid \u00fclekatted.<\/li>\n<\/ul>\n<p>Igal juhul on siin \u00fcks v\u00f5imalus kattekihtide peitmiseks vastavalt teie vajadustele.<\/p>\n<h3>Protsess<\/h3>\n<p>Kuna WordPress sisaldab vaikimisi jQueryt, kasutan seda valitud raamatukoguna. Kuid seda saab sama lihtsalt kasutada, leides k\u00f5ik elemendid kindlaksm\u00e4\u00e4ratud klassinime j\u00e4rgi ja korrates neid l\u00e4bi (kui otsustate kasutada vanilje JavaScripti).<\/p>\n<p>Esiteks tahame alustada <strong>kehaelemendist<\/strong> ja seej\u00e4rel vaadata n\u00e4iteks k\u00f5iki <strong>ulatuvaid<\/strong> elemente (kuna need on tavaliselt k\u00f5ige populaarsemad elemendid \u2013 j\u00e4llegi, minu kogemuse p\u00f5hjal \u2013 ja <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">valmistuda nende l\u00e4bimiseks<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>J\u00e4rgmisena tahame kontrollida\u00a0 atribuudi <strong>data:image\/svg+xml<\/strong> olemasolu tekstisiseses stiiliatribuudis. Ja kui see leitakse, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">muutke elemendi n\u00e4htavust<\/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>Kui soovite elemendi n\u00e4htavust sisse l\u00fclitada, peate seadistama teise klausli, mis vajadusel <strong>peidetud<\/strong> v\u00e4\u00e4rtuse eemaldab. Kui soovite seda teha, saate h\u00f5lpsalt <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lisada selle<\/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>L\u00f5plik funktsioon v\u00f5ib v\u00e4lja n\u00e4ha umbes <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">selline<\/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>Siis tuleb lihtsalt vajadusel helistada <code>hideExtensions();<\/code>.<\/p>\n<h2>S\u00f5na esituse kohta<\/h2>\n<p>Kuna me skannime DOM-is elementide alamhulka, v\u00f5ib see muutuda j\u00f5udlusprobleemiks, eriti kui \u00fchte t\u00fc\u00fcpi elemente on palju.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Siin on kiire n\u00e4pun\u00e4ide JavaScripti kasutavate brauserilaiendite \u00fclekatete (nt Pinterest, Buffer ja teised) peitmiseks.<\/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":[729,833,894,842],"tags":[1165],"class_list":["post-229603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-4","category-juhend-algajatele","category-kood","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229603"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229603\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}