{"id":230195,"date":"2022-11-20T19:56:00","date_gmt":"2022-11-20T16:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230195"},"modified":"2022-11-09T20:32:46","modified_gmt":"2022-11-09T17:32:46","slug":"pikavinkki-selaimen-laajennuspeittokuvien-piilottamiseen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/pikavinkki-selaimen-laajennuspeittokuvien-piilottamiseen\/","title":{"rendered":"Pikavinkki selaimen laajennuspeittokuvien piilottamiseen"},"content":{"rendered":"\n<p>Kokemukseni mukaan useimmat selainlaajennuspeittokuvat k\u00e4ytt\u00e4v\u00e4t taustaa, jonka tyyppi on <strong>data:image\/svg+xml<\/strong>. Lis\u00e4ksi jokainen n\u00e4ist\u00e4 peittokuvista k\u00e4ytt\u00e4\u00e4 sis\u00e4isi\u00e4 tyylej\u00e4 (ei ulkoisia tyylisivuja) painikkeidensa hahmontamiseen (tai mit\u00e4 tahansa ohjaimia, joita ne valitsevat render\u00f6id\u00e4kseen).<\/p>\n<p>T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voimme k\u00e4ytt\u00e4\u00e4 joitain JavaScript-tekniikoita l\u00f6yt\u00e4\u00e4ksemme elementtej\u00e4, joilla on n\u00e4m\u00e4 attribuutit, ja vaihtaa sitten niiden n\u00e4kyvyytt\u00e4.<\/p>\n<p>Mutta ensinn\u00e4kin, miksi meid\u00e4n pit\u00e4isi edes piilottaa niit\u00e4?<\/p>\n<h2>Selaimen laajennuspeittokuvien piilottaminen<\/h2>\n<p>Yleisesti ottaen aina kun n\u00e4m\u00e4 peittokuvat ovat esill\u00e4, se on tallennettava johonkin kirjanmerkkipalveluun, olipa se sitten Pinterest, Buffer, Pocket tai jokin muu.<\/p>\n<h3>Asiaankuuluvat k\u00e4ytt\u00f6tapaukset<\/h3>\n<p>Lis\u00e4ksi, ainakin siin\u00e4 tapauksessa, josta puhun, ne render\u00f6id\u00e4\u00e4n aina, kun kohdistin kulkee kuvan p\u00e4\u00e4ll\u00e4. Mutta ent\u00e4 jos emme halua sen tapahtuvan.<\/p>\n<p>Esimerkki:<\/p>\n<ul>\n<li>Ehk\u00e4 kehittelemme laajennusta, joka laukaisee peittokuvansa, ja haluamme piilottaa muut ponnahdusikkunat.<\/li>\n<li>Tai ehk\u00e4 k\u00e4ynnist\u00e4mme toisen ponnahdusikkunan, joka sis\u00e4lt\u00e4\u00e4 kuvia, emmek\u00e4 halua peittokuvien n\u00e4kyv\u00e4n n\u00e4iss\u00e4 kuvissa.<\/li>\n<\/ul>\n<p>Joka tapauksessa t\u00e4ss\u00e4 on yksi tapa piilottaa peittokuvat tarpeidesi mukaan.<\/p>\n<h3>Prosessi<\/h3>\n<p>Koska WordPress sis\u00e4lt\u00e4\u00e4 oletuksena jQueryn, aion k\u00e4ytt\u00e4\u00e4 sit\u00e4 kirjastona. Mutta t\u00e4t\u00e4 voidaan yht\u00e4 helposti k\u00e4ytt\u00e4\u00e4 etsim\u00e4ll\u00e4 kaikki elementit tietyll\u00e4 luokan nimell\u00e4 ja iteroimalla niit\u00e4 (jos valitset vanilja-JavaScriptin).<\/p>\n<p>Ensin haluamme aloittaa <strong>body<\/strong> &#8211; elementist\u00e4 ja sitten tarkastella esimerkiksi kaikkia <strong>span<\/strong> &#8211; elementtej\u00e4 (koska ne ovat yleens\u00e4 suosituimpia elementtej\u00e4 \u2013 j\u00e4lleen vain minun kokemukseni mukaan \u2013 ja <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">valmistautua toistamaan niit\u00e4<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>Seuraavaksi haluamme tarkistaa, onko <strong>data:image\/svg+xml<\/strong> tekstin sis\u00e4isess\u00e4 tyylim\u00e4\u00e4ritteess\u00e4. Ja jos se l\u00f6ytyy, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">muuta elementin n\u00e4kyvyytt\u00e4<\/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>Jos haluat muuttaa elementin n\u00e4kyvyytt\u00e4, sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 toinen lauseke, joka poistaa <strong>piilotetun<\/strong> arvon tarvittaessa. Jos haluat tehd\u00e4 niin, voit helposti <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lis\u00e4t\u00e4 t\u00e4m\u00e4n<\/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>Lopullinen funktio voi n\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4lt\u00e4<\/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>Sitten sinun tarvitsee vain soittaa <code>hideExtensions();<\/code>tarvittaessa.<\/p>\n<h2>Sana suorituskyvyst\u00e4<\/h2>\n<p>Koska skannaamme DOM:n elementtien osajoukkoa, t\u00e4st\u00e4 voi tulla pieni suorituskykyongelma varsinkin jos yhden tyypin elementtej\u00e4 on paljon.<\/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>T\u00e4ss\u00e4 on nopea vinkki selainlaajennusten peittokuvien, kuten Pinterestin, Bufferin ja muiden JavaScripti\u00e4 k\u00e4ytt\u00e4vien piilottamiseen.<\/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":[730,895,834,843],"tags":[1166],"class_list":["post-230195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-5","category-koodi","category-opas-aloittelijoille","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230195"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230195\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}