The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Latest tutorials widget!

View previous topic View next topic Go down

Latest tutorials widget!

Post by JScript on June 22nd 2015, 8:29 pm

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

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Latest tutorials widget!

Post by Zzbaivong on June 22nd 2015, 9:23 pm

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
Forumember

Posts : 95
Reputation : 46
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Latest tutorials widget!

Post by JScript on June 22nd 2015, 9:40 pm

@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

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Latest tutorials widget!

Post by Van-Helsing on July 2nd 2015, 2:29 am

Hello JScript,
Nice code and it is very useful.


Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: Latest tutorials widget!

Post by darki on July 19th 2015, 4:05 pm

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
Forumember

Posts : 254
Reputation : 10
Language : German, english

http://schiggysboard.com

Back to top Go down

Re: Latest tutorials widget!

Post by Luffy on July 28th 2015, 12:12 am

@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.






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Latest tutorials widget!

Post by H.A.SS.A.N on August 1st 2015, 2:34 pm

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

H.A.SS.A.N
Forumember

Posts : 77
Reputation : 1
Language : Arabic

http://www.deve-net.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum