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.