Latest topics - AwesomeBB

Latest topics - AwesomeBB

We know that the AwesomeBB version is in beta and do not have widgets yet, so I made a simple code so we have a widget - Latest topics.

Author: pedxz
Working forum versions: Only AwesomeBB

Installation

The installation is unique, and can only be done by creating a new javascript. CSS can be modified, and is embedded in Javascript. Please follow the steps below to install the effect on your community.

ACP > Modules > HTML and Javascript > Javascript codes management > Create a new javascript

Placement: In the home page

The code

Old:

Code:

/**
 *  Latest topics - AwesomeBB by Pedxz
 *  Created August 26, 2018 <UP_22.04.2020>
 *  See more: http://ajuda.forumeiros.com
 */
(function($, CSS) {
    'use strict';

    var config = {
        lang: {
            title: 'Latest Topics',
            loading: 'Loading...',
            empty: 'At the moment we are without messages or you are not allowed to see them!'
        },
        icon: 'chat_bubble_outline',
        marquee: {
            active: 1, // 0 = No // 1 = Yes
            pauseOnHover: 'true' // true or false
        },
    };

    $(function() {

        if (_board.tpl_version !== 'awesomebb') return;
        if (!config.lang || !config.icon || !config.marquee) return;

        $('<div>', {
                id: 'block-latest',
                class: 'block-subtle'
            }).html([
                '<i class="material-icons">' + config.icon + '</i>',
                '<div>',
                ' <span class="headline">' + (config.lang.title ? config.lang.title : 'no title defined') + '</span>',
                '  <div' + (config.marquee.active == 1 ? ' style="position: relative;overflow: hidden;">' : '>'),
                '  <div class="' + (config.marquee.active == 1 ? 'block-last-load block-marquee" data-pauseOnHover="' + config.marquee.pauseOnHover + '"' : 'block-last-load"') + '>' + config.lang.loading + '</div>',
                ' </div>',
                '</div>'
            ].join('\n'))
            .insertBefore('#block-online');


        $('#block-latest .block-last-load')
            .load('/latest .block-topics-details');


        $('<style>', {
                'type': 'text/css'
            }).text('.block-last-load:empty::before { content: "' + config.lang.empty + '";}' + CSS.join('\n'))
            .appendTo('head');

    });
}(jQuery, [
    '#block-latest i {',
    ' color: #BF263C;',
    '}',
    '',
    '.block-last-load {' +
    ' margin-left: -.37em;',
    ' margin-right: -.37em;',
    ' height: 300px;',
    ' overflow-y: auto;',
    '}',
    '',
    '.block-last-load a {',
    '  text-decoration: none;',
    '  border: 0!important;',
    '  display: inline;',
    '}',
    '',
    '.block-last-load .block-topics-details {',
    ' padding: 1em;',
    '}',
    '',
    '.block-last-load .block-topics-details:not(:nth-child(2n+1)) {',
    ' background-color: #F5F7FA;',
    '}',
    '',
    '#block-latest h2 {',
    ' font-size: 16px;',
    ' text-overflow: ellipsis;',
    ' overflow: hidden;',
    ' white-space: nowrap;',
    ' width: 100%;',
    '}',
    '',
    '#block-latest .block-topics-author,',
    '#block-latest .block-topics-lastpost img {',
    '  display: none;',
    '}',
    '',
    '#block-latest .block-topics-lastpost,',
    '#block-latest .block-topics-author a {',
    '  display: inline;',
    '}',
    '',
    '.block-marquee {',
    '  overflow: hidden!important;',
    '  animation: marquee 15s linear infinite;',
    ' -webkit-animation: marquee 15s linear infinite;',
    '}',
    '',
    '.block-marquee[data-pauseOnHover="true"]:hover {',
    '    animation-play-state: paused;',
    ' -webkit-animation-play-state: paused;',
    '}',
    '',
    '.block-last-load:empty {',
    '  animation: none;',
    ' -webkit-animation: none;',
    '  padding: 0 1em;',
    '}',
    '',
    '@-webkit-keyframes marquee {',
    '  0%  { -webkit-transform: translate(0, 0); }',
    '  100% { -webkit-transform: translate(-100%, 0); }',
    '}',
    '',
    '@keyframes marquee {',
    '  0%  { -webkit-transform: translate(0, 0); }',
    '  100% { -webkit-transform: translate(0, -100%); }',
    '}',
    '',
    '@-moz-keyframes marquee {',
    '  0% { transform: translate(0, 0); }',
    '  100% { transform: translate(-100%, 0); }',
    '}',
    '',
    '@media only screen and (max-width: 768px) {',
    ' #block-latest {',
    '  margin-top: 20px;',
    ' }',
    '}',
    ''
]));

Marquee Config

Code:

 marquee: {
            active: 0, // 0 = No // 1 = Yes (Activate the topics scrolling)
            pauseOnHover: 'true' // true or false (Pause on hover)
        },

Lang

It was supposed to have added a lang system but we want a lite code, I will leave some translations:

Lang:

Details

If the widget is appearing blank for the guests, go to ACP > Users & Groups > Special Rights and make sure the search option is authorized for the guests.

Thank you so much for sharing @pedxz. This will be indeed very useful

Awesome @pedxz

thank you so much pedxz

Hi,
Thank you for this script however the list of the last subjects is fixed, is it possible to modify the script to have a scrolling of the last subjects?

CAForum wrote:the list of the last subjects is fixed, is it possible to modify the script to have a scrolling of the last subjects?

Indeed took two years to update, I'm sorry

This week I intend to increase this topic (creating multiple widgets by Script)

2 years and still working, Good job buddy!

Feels like a native widget; it's perfect. Thanks !
I'll leave the French translation here:

French

Code:

                title: 'Derniers sujets',
                loading: 'Chargement...',
                empty: "Il n'y aucun message à afficher ou vous n'avez pas les permissions suffisantes pour les voir !"

Had to replace the empty apostrophes with quotation marks due to the language

mSyx wrote:Feels like a native widget; it's perfect. Thanks !
I'll leave the French translation here

Thank you bro (the most important language in FA heheheh)

Had to replace the empty apostrophes with quotation marks due to the language

Yea, but we can replace

Code: '

to

Code: \'

, like:

Code:

                title: 'Derniers sujets',
                loading: 'Chargement...',
                empty: 'Il n\'y aucun message à afficher ou vous n\'avez pas les permissions suffisantes pour les voir !'

pedxz wrote:Thank you bro (the most important language in FA heheheh)

Yea, but we can replace

Code: '

to

Code: \'

, like:

Code:

                title: 'Derniers sujets',
                loading: 'Chargement...',
                empty: 'Il n\'y aucun message à afficher ou vous n\'avez pas les permissions suffisantes pour les voir !'

Oh gosh. I forgot about this escape. Thanks :>

Hi, sorry or necroing your thread, but didn't want to create a new one.
I have applied the code, but when you click on a topic in the widget, it redirects you to the first page of it. Do I change something in the code to make it redirect you to the last posted message?
Also, I've noticed OP posted an updated version of the code here - https://help.forumotion.com/t159214-how-to-add-on-latest-topic-top-poster?highlight=latest+topics
If I use the second code for multiple widgets, how do I get them to appear on the right side of the forum, not the top.
I am using AwesomeBB.
Thanks for the codes.

Hey @plkocev,

Welcome to Forumotion Support Forum!

If I use the second code for multiple widgets, how do I get them to appear on the right side of the forum, not the top.

Sorry for the waiting, if it is to add the widgets in the right side the awesomebb version itself already allows it. Go to Adminstration Panel > Modules > Portal & Widgets > Forum widgets management in "Display forum widgets" mark as "Yes" and move the widgets you want to the right (column 3)

Hi, @pedxz ,
Thanks for the reply.
However it didn't work. I moved like 3 widgets to the right side, but they just don't appear in the forum.
I think those widgets are for the portal and I don't use it. I want them to appear directly at the right side of the forum.

Exactly ir is for the homepage.  Notice the JavaScript is for the homepage (index).