Latest tutorials widget!

Hello!
I made a code more than a year ago for my forum, but if you want to test...

First you must create a new widget as shown in the following image:


Here's the code:

Code:


<!--
 * 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
 * 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="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 -->
        <div></br></br>Loading...</div>
    </ul>
    <!-- #endregion recent_topic_row -->
</div>

<script type="text/javascript">
//<![CDATA[
/***
* User Definition Variables
***/
/* Put here your forum number!!! */
var sForumNumber = 1;
/* END */

/***
* System Defined Variables - Do not edit if you don't know!
***/
var oConfig = {
        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: ''
    };

jQuery(function () {
    /* Add CSS */
    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) {
        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) {
        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) {
        oConfig.sTarget = '.statused tr:not(":empty")';
        oConfig.sFound = '.tcl.tdtopics';
        oConfig.sGetIMG = ' #profile-advanced-right .main-content img:first';
    } else if(invision.length) {
        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("ul_recent_tutorials");
    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 $(window).height() */
   rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(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() {
        jQuery('#ul_recent_tutorials').html('');
        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>


Note: In the above code, change the value of the variable "sForumNumber" by their corresponding sub forum where tutorials are!

Result:


Well, I know that the code needs a lot of improvement, feel free to modify it...

JS

I think you can use mod_news, unfortunately it does not provide the user avatar.
I see that you are abusing javascript to insert CSS, while it can be inserted manually into the widget.

Zzbaivong wrote:(...)I see that you are abusing javascript to insert CSS, while it can be inserted manually into the widget.

Today I know that, but this code was made on the second month I took my first steps in web programming!

I knew nothing, although I'm still not knowing...

JScript wrote:Well, I know that the code needs a lot of improvement, feel free to modify it...

Anyway, many thanks for the tips!

JS

Hello JScript,
Nice code and it is very useful.

I want that the announcements and stickys don't appear. How to do? With the following?
.forumbg:not(.forumbg.announcement)
If yes, where I will have to add it?

darki wrote:I want that the announcements and stickys don't appear. How to do? With the following?
.forumbg:not(.forumbg.announcement)
If yes, where I will have to add it?

@darki the recent topic system is made from the company as it is. When you post anything it will show there. So you cannot remove it from the widget.

hello >> @JScript 
can I put the first image of tutorial Instead of user avater ??
thank u ,

This will no longer be supported by JScript: https://help.forumotion.com/t151137-in-memory-of-jscript-joao-carlos.