Carregar AddThis (ou semelhante) quando um ponto de interrupção de consulta de mídia for atendido

Freqüentemente, no Design Responsivo, alguém deseja carregar a funcionalidade para certas larguras de viewport. Pode ser que você queira presumir que os usuários de desktop têm mais largura de banda e manter a carga mais leve para janelas de exibição menores. Pode ser que você tenha alguns botões e funcionalidades ocultas no layout até que uma consulta de mídia os torne visíveis. Seja qual for o motivo, descobri que essa é uma ótima maneira de carregar conteúdo e funcionalidade quando certas condições são atendidas.

Em CSS, aplicamos um “rótulo” ao corpo dentro de uma consulta de mídia.

O CSS

@media (min-width: 36em ) {

body
:after {
content
: 'load-addthis';
display
: none;
}
}

Gosto de nomear o rótulo de acordo com a função que desejo executar. Desta forma, é muito transparente o que o CSS está controlando.

Agora, com JS, “ouvimos” esse rótulo. Quando esse rótulo está presente, nós o usamos para disparar um evento. Lembre-se de que esses eventos serão avaliados sempre que a janela for redimensionada, portanto, para evitar que esses eventos sejam disparados mais de uma vez por atualização da página, primeiro definimos a variável a ser verificada.

O JS

/* onresize handler that waits until a window resize event has stopped before firing – doesn't fire extraneously */
function on_resize(c,t){ onresize=function(){ clearTimeout(t);t = setTimeout(c,100)}; return c };

/* Check these so we dont load the same things twice */
addthis_loaded
= false;

/* Load content progressively. Must remember to also load them for IE 7 and 8, since they do not support media queries or the getComputedStyle function */
on_resize
(function() {

/* "Watch" the content of the body:after element. Will change as media queries fire. */
mq_tag
= window.getComputedStyle(document.body,':after').getPropertyValue('content');
//console.log( "media query tag=" + mq_tag );

/* Load AddThis features for larger screens */
if ( mq_tag.indexOf("load-addthis") !=-1 && addthis_loaded == false ) {
/* We could also check to see if the target div was empty: !$.trim( $('#addthis').html() ).length */

var add_this_html =
'<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_compact"></a></div>';

$
("#addthis").html(add_this_html);
$
.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=XXX',
function(){
addthis
.init(); //callback function for script loading
});

addthis_loaded
= true;
//console.log( "! load-addthis has fired" );
}

})(); // the magic extra () makes this function fire on page load

A parte legal é que esse código – – basicamente diz “se essa string de texto aparecer em qualquer lugar no rótulo da consulta de mídia atual”. Isso significa que o conteúdo desse “rótulo” pode acionar mais de um evento.mq_tag.indexOf("load-addthis") !=-1

Por exemplo, no primeiro ponto de interrupção, fazemos dois eventos. Na segunda, fazemos um novo evento e repetimos o anterior. O mesmo com o terceiro:

@media (max-width: 48em) {

body
:after {
content
: 'action1 action2';
display
: none;
}
}

@media (min-width: 48em) and (max-width: 60em) {

body
:after {
content
: 'action2 action3';
display
: none;
}
}

@media (min-width: 60em) {

body
:after {
content
: 'action3 action4';
display
: none;
}
}

Desta forma, nosso CSS pode controlar eventos JS com consultas de mídia. As dimensões da janela de visualização permanecem no CSS e os eventos permanecem no JS. Projetos responsivos podem se tornar muito mais responsáveis ​​e leves para janelas de visualização variáveis ​​com esse método.