[Tutorial] Widget com os 10 últimos tutoriais

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 176d 8h 9m 37s
Mensagens : 693
Reputação : 3
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Qui Set 29, 2016 6:30 pm

Informações:

Autor: JSCript
Versões: Todas as versões
Introdução: Widget com os 10 ultimos tutoriais

Instalação:

Acesse:
Painel de controle -> Módulos -> Portal & Widgets -> Gestão dos widgets
Crie um novo widget com o seguinte código:
Código:
<!--
 * Application: Widget of the last 10 tutorials
 * Description: This application can displays the last tutorials and member avatar of topics.
 * Version: 1.08032014-jq1.9.1 - Sobek (Khnum & Maet)
 * Made and Optimizations by JScript - 2014/03/08
 * View more in: http://punbb.forumeiros.com/forum & http://ajuda.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 -->
 
<div id="insert_widget">Loading...</div>

<script type="text/javascript">
//<![CDATA[
/***
* User Definition Variables
***/
/* Put here your forum number!!! */
var sForumNumber = 16;
/* Put here your widget title!!! */
var sWidgetTitle = 'Os últimos 10 tutoriais'
/* END */

/***
* System Defined Variables - Do not edit if you don't know!
***/
var oConfig = {
        sInfo:
            '<!--' +
            '* Application: Widget of the last 10 tutorials' +
            '* Description: This application can displays the last tutorials and member avatar of topics.' +
            '* Version: 1.08032014-jq1.9.1 - Sobek (Khnum & Maet)' +
            '* Made and Optimizations by JScript - 2014/03/08' +
            '* View more in: http://punbb.forumeiros.com/forum & http://ajuda.forumeiros.com' +
            '* Copyright (c) 2013 JScript <jscriptbrasil at live dot com>' +
            '* This work is free. You can redistribute it and/or modify it' +
            '* under the terms of the WTFPL, Version 2' +
            '-->',        
        sContent:
            '<div id="mod_recent_tutorials" class="main-content _sbcollapsable" style="margin: 0px; height: 213px; max-height: 225px; overflow: auto;">' +
                '<!-- #region recent_topic_row -->' +
                '<ul id="ul_recent_tutorials" class="ipsList_withminiphoto" style="margin: 0px ! important; padding-left: 0px ! important;">' +
                '<!-- content -->' +
                '</ul>' +
                '<!-- #endregion recent_topic_row -->' +
            '</div>',
        sCSS:
            '<style>' +
            '.ipsList_withminiphoto li {' +
              'margin-bottom: 8px;' +
          '}' +
          '.ipsType_smaller, .ipsType_smaller a {' +
              'font-size: 11px !important;' +
          '}' +
          '.ipsUserPhoto.ipsUserPhoto_mini {' +
              'width: 30px;' +
              'height: 30px;' +
              'border: 1px solid rgb(213, 213, 213);' +
              'background: none repeat scroll 0% 0% rgb(255, 255, 255);' +
              'box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);' +
              'padding: 1px;' +
          '}' +
          '.ipsType_small {' +
              'font-size: 12px;' +
          '}' +
            '.desc.ipsType_smaller {' +
                'color: #777777;' +
                'margin: 0;' +
            '}' +
            '.list_content {' +
                'margin-left: 40px;' +
                'word-wrap: break-word;' +
            '.ipsList_withminiphoto {' +
                'list-style: none outside none !important;' +
            '}' +
            '</style>',
        sTarget: '',
        sFound: 'td:eq(2)',
        sCommon: 'a.topictitle',
        sGetIMG: ''
    };
var oHtml = {
        PHPBB2: oConfig.sInfo +
            '<table border="0" cellpadding="0" cellspacing="1" class="forumline" width="100%">' +
                '<tbody>' +
                    '<tr>' +
                        '<td class="catLeft" height="25"><span class="genmed module-title">' + sWidgetTitle + '</span></td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td align="left" class="row1">' + oConfig.sContent +
                        '</td>' +
                    '</tr>' +
                '</tbody>' +
            '</table>',
        PHPBB3: oConfig.sInfo +
            '<div class="module">' +
                '<div class="inner">' +
                    '<span class="corners-top"><span></span></span>' +
                    '<div class="h3">' + sWidgetTitle + '</div>' + oConfig.sContent +
                    '<span class="corners-bottom"><span></span></span>' +
                '</div>' +
            '</div>',
        PUNBB: oConfig.sInfo +
            '<div class="module main">' +
                '<div class="main-head"><h3>' + sWidgetTitle + '</h3></div>' + oConfig.sContent +
            '</div>',
        INVISION: oConfig.sInfo +
            '<div class="module borderwrap">' +
                '<div class="maintitle"><h3>' + sWidgetTitle + '</h3></div>' +
                '<div class="box-content">' + oConfig.sContent + '</div>' +
            '</div>'
 };

jQuery(function () {
    /* Add CSS */
    /*document.head.insertAdjacentHTML('beforeEnd', oConfig.sCSS);*/
    jQuery(oConfig.sCSS).insertBefore('body');

    /* Forum versions! */
    var phpBB2 = jQuery('.bodyline');
    var phpBB3 = jQuery('#wrap');
    var punbb = jQuery('#pun-intro');
    var invision = jQuery('#ipbwrapper');
    
    if (phpBB2.length) {
        jQuery('#insert_widget').html(oHtml.PHPBB2);
        oConfig.sTarget = '.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")';
        oConfig.sGetIMG = ' #emptyidcc .row1.gensmall img:eq(0)';
    } else if(phpBB3.length) {
        jQuery('#insert_widget').html(oHtml.PHPBB3);
        oConfig.sTarget = '.topiclist.topics.bg_none li:not(":empty")';
        oConfig.sFound = 'dd.dterm';
        oConfig.sGetIMG = ' #profile-advanced-right img:eq(0)';
    } else if(punbb.length) {
        jQuery('#insert_widget').html(oHtml.PUNBB);
        oConfig.sTarget = '.statused tr:not(":empty")';
        oConfig.sFound = '.tcl.tdtopics';
        oConfig.sGetIMG = ' #profile-advanced-right .main-content img:first';
    } else if(invision.length) {
        jQuery('#insert_widget').html(oHtml.INVISION);
        oConfig.sTarget = '.borderwrap table.ipbtable tbody tr:not(":empty")';
        oConfig.sGetIMG = ' #profile-advanced-right .box-content.profile.center img:first';
    };
    
    /* Fire event for 'scroll' to show the widget... */
    var elem = document.getElementById("insert_widget");
    if (isInViewPort(elem)) {
        LastTutorials();
    } else {
        jQuery(window).on('scroll.widget', showWidget(elem));
    }
});

/* Function to check if an element is visible in view port */
function isInViewPort(elem) {
 var rect = elem.getBoundingClientRect();

 return (
 rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or jQuery(window).height() */
 rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or jQuery(window).width() */ );
}
/* Start function to show the widget... */
function showWidget(elem) {
 return function() {
        /* Chech if the widget is visible in view port! */
 if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
 jQuery(window).off('scroll.widget');
            
            LastTutorials();
 }
 }
}
/* Widget conent */
function LastTutorials() {
    var oTarget = 0;
    /* First forum link to read info */
    jQuery.get('/f' + sForumNumber + '-', function(data) {
        oTarget = jQuery(oConfig.sTarget, data);
    }).always(function() {
        var i = 0
        oTarget.each(function() {
            if (i == 10) {
                return false;
            }
            var oThis = jQuery(this); /* DOM chached for fast execution! */
            var oFound = oThis.find(oConfig.sFound);
            if (oFound.length) {
                var sTopicTitle = oFound.find(oConfig.sCommon).parent().html();
                var oUserInf = oThis.find('a[href^="/u"]');
                var sAutor = oUserInf.html();
                var sUserUrl = oUserInf.attr('href');
                var sHtml =
                    '<li class="clearfix">' +
                        '<a href="' + sUserUrl + '" class="ipsUserPhotoLink left">' +
                            '<img src="" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini">' +
                        '</a>' +
                        '<div class="list_content">' +
                            '<span class="ipsType_small">' + sTopicTitle + '</span>' +
                            '<p class="desc ipsType_smaller">' +
                                'Criado por <a href="' + sUserUrl + '">' + sAutor + '</a>' +
                            '</p>' +
                        '</div>' +
                    '</li>';
                jQuery('#ul_recent_tutorials').append(sHtml);
            }
            i++
        });

        /* Now, read the member avatar info */
        /* DOM chached for fast execution! */
        oTarget = jQuery('#ul_recent_tutorials > li');
        oTarget.each(function(index) {
            oThis = jQuery(this); /* DOM chached for fast execution! */
            var load_container = oThis.children('a');
            var UserURL = load_container.attr('href');
            var def_img = "http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png"; /* In case request profile errors! */
            var sHtml = '<img src="' + def_img + '" alt="Foto" class="ipsUserPhoto ipsUserPhoto_mini" style="width: 30px; height: 30px; border: 1px solid rgb(213, 213, 213); background: none repeat scroll 0% 0% rgb(255, 255, 255); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); padding: 1px;">';
            /* Gets the avatar saved in local storage (Fastest!)*/
            var UserIMG = sessionStorage.getItem(UserURL);

            /* If avatar alread saved, then no request member profile! */
            if (UserIMG) {
                load_container.children('img').attr('src', UserIMG);
            } else { /* if not, then only request per session!!! */
                load_container.load(UserURL + oConfig.sGetIMG, function() {
                    var imgTag = load_container.children('img');

                    if (imgTag.length == 0) {
                        load_container.append(sHtml); /* Saves the default avatar in local storage */
                        sessionStorage.setItem(UserURL, def_img);
                    } else {
                        imgTag.attr('class', 'ipsUserPhoto ipsUserPhoto_mini');
                        imgTag.css({
                            'width': '30px',
                            'height': '30px',
                            'border': '1px solid rgb(213, 213, 213)',
                            'padding': '1px',
                            'background': 'none repeat scroll 0% 0% rgb(255, 255, 255)',
                            'box-shadow': '0px 2px 2px rgba(0, 0, 0, 0.1)'
                        });
                        /* Saves the member avatar in local storage */
                        sessionStorage.setItem(UserURL, imgTag.attr('src'));
                    }
                });
            }
        });
    });
}
//]]>
</script>
Após colar, pressione o botão Ctrl + F e procure por:
Código:
sForumNumber
Ao encontrar, mude o valor 16 para o número correspondente aos tópicos que deseja que apareça no widget. Ou seja:
/f12- será o número do fórum.



  • Como mudar o nome do widget?
    Basta pressionar Ctrl + F e procurar pela variável sWidgetTitle, e ao lado adicionar o nome do mesmo. Exemplo:
    var sWidgetTitle = 'Os últimos 10 tutoriais em CSS'

  • Algumas considerações finais:
    O código entra em ação somente quando o widget está visível na tela, com isso poupa-se recursos e evita-se o Resquest Limit

  • Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum