[TUTORIAL] Widget com os 10 últimos tutoriais
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1 • Compartilhe
[TUTORIAL] Widget com os 10 últimos tutoriais
Widget com os 10 últimos tutoriais |
Este código mostra os tópicos do respectivo fórum, já com o avatar do autor da mensagem.
--> Tutoriais, dicas e astúcias <--
Widget com os 10 últimos tutoriais
Widget com os 10 últimos tutoriais
1º - Aplicação do código no Widget:
Painel de controle (Avançado) >> Módulos >> Portal & Widgets >> Gestão dos widgets (fórum/portal) >> Novo widget personalizado
Nome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle. |
Utilizar um table type: - Nesta opção, deverá ser marcado o "Não". |
Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente. |
Fonte do widget: - Neste campo, Devemos inserir o código trabalhamos no 3º Passo. |
Salvar: - Para que o widget apareça corretamente, este box deve ser acionado, após as devidas modificações. |
2º - Código a ser usado:
Em seguida, basta colar 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>
- Código:
sForumNumber
/f22- será o número do fórum.Exemplo escreveu:https://ajuda.forumeiros.com/f22-
- 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:
© Fórum dos Fóruns & JScript
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Widget com os 10 últimos tutoriais |
Tópicos semelhantes
» Nova atualização das listas & widget "Os últimos 10 tutoriais"
» [TUTORIAL] Widget "Últimos membros conectados"
» Alterar "últimos 10 tutoriais" para um único tópico
» Modificação widget 10 tutoriais
» Widget últimos assuntos
» [TUTORIAL] Widget "Últimos membros conectados"
» Alterar "últimos 10 tutoriais" para um único tópico
» Modificação widget 10 tutoriais
» Widget últimos assuntos
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos