🥇 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.

O CSS

O JS

Related Posts