[Tutorial] Widget grupos

Informações:
Autor: Ange Tuteur
Funcionalidade: Todas as versões

Painel de Controle ☛ Modulos ☛ Portal & Widgets ☛ Gestão dos widgets do fórum

Código:

<!--
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
 --><style type="text/css">#fa_group_panel { font-size:12px; font-family:arial, sans-serif; }
#fa_group_panel > div { margin:10px 3px; }
#fa_group_panel select { width:100%; }
#fa_group_memberships a { display:block; }
#fa_group_join dl { text-align:center; }
#fa_group_join dt { display:none; }
#fa_group_join dd { margin:0; }
.fa_group_title { font-weight:bold; color:#369; border-bottom:1px solid #369; padding-bottom:3px; margin:3px 0; }
.fa_group_button { color:#69C; background:transparent; border:1px solid #69C; border-radius:3px; padding:3px 6px; width:100%; }
.fa_group_button:hover { color:#FFF; background:#69C; }</style>
<div id="fa_group_panel">
  
 <div id="fa_group_status">
    <noscript><span style="color:#F00">Erro : Por favor habilite o javascript usado no widget</span></noscript>  
 </div>
  
 <div id="fa_group_memberships">
 </div>
  
 <div id="fa_group_join">
 </div>
</div>
  <script type="text/javascript">
(function() {
  var cache_time = 1*60*60*1000,
 
      lang = {
              join : 'Entrar no grupo',
        memberships : 'Grupo de Membros',
            loading : 'Buscando dados do grupo ...',
              error : 'Não parece haver grupos para participar ou visitar.'
      },
 
      panel = document.getElementById('fa_group_panel'),
      status = document.getElementById('fa_group_status'),
      storage = window.localStorage;
 
  /* check if group data is already storage */
  if (storage && storage['faGroupData_u' + _userdata.user_id] && storage['faGroupData_exp_u' + _userdata.user_id] > +new Date - cache_time) {
    panel.innerHTML = storage['faGroupData_u' + _userdata.user_id];
  } else {
    status.innerHTML = lang.loading;
 
    /* get group data via AJAX */
    jQuery.get('/groups?change_version=prosilver', function(d) {
      var node = [
            document.getElementById('fa_group_memberships'),
            document.getElementById('fa_group_join')
          ];
 
          frag = document.createDocumentFragment(),
 
          join = jQuery('form:has(select[name="g"])', d)[0],
          membership = jQuery('.noList a[href^="/g"]', d),
          i = 0,
          j = membership.length;
 
      status.innerHTML = '';
 
      /* if the member has group memberships */
      if (j) {
        node[0].innerHTML = '<div class="fa_group_title">' + lang.memberships + '</div>';
 
        for (; i < j; i++) {
          membership[i].href = membership[i].href.replace(/\?change_version=prosilver/, '');
          frag.appendChild(membership[i]);
        }
 
        node[0].appendChild(frag);
      }
 
      /* if the member has groups left to join */
      if (join) {
        join.action = '/groups';
        jQuery('input[name="tt"]', join).remove();
        jQuery('input[type="submit"]', join).attr('class', 'fa_group_button');
        node[1].innerHTML = '<div class="fa_group_title">' + lang.join + '</div>';
        node[1].appendChild(join);
      }
 
      if (!j && !join) {
        status.innerHTML = lang.error;
      }
 
      if (storage) {
        storage['faGroupData_u' + _userdata.user_id] = panel.innerHTML;
        storage['faGroupData_exp_u' + _userdata.user_id] = +new Date;
      }
    });
  }
}());
</script>