Latest topics - AwesomeBB

Go down

Latest topics - AwesomeBB Empty Latest topics - AwesomeBB

Post by pedxz on Wed Aug 29, 2018 2:39 am

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 <1.0>
 *  See more: http://ajuda.forumeiros.com
*/
$(function() {
 
    var title = 'Latest Topics', empty = 'At the moment we are without messages or you are not allowed to see them!', last = $('<div>', {
        id: 'block-latest',
        class: 'block-subtle'
    }).append(
        ' <i class="material-icons">chat_bubble_outline</i>' +
        ' <div>' +
        ' <span class="headline">' + title + '</span>' +
        ' <div class="block-last-load"></div>' +
        ' </div>'
    );
 
    if (_board.tpl_version !== 'awesomebb') return;
 
    $(last).insertBefore('#block-online');
 
    $('#block-latest .block-last-load').load('/latest .block-topics-details');
 
    $('head').append(
        '<style type="text/css">' +
        '.block-last-load:empty::before {' +
        ' content: "'+ empty +'";' +
        '}'+
        '#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;' +
        '}' +
        '@media only screen and (max-width: 768px) {' +
        ' #block-latest {' +
        '  margin-top: 20px;' +
        ' }' +
        '}' +
        '</style>'
    );
 
});

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:
ENGLISH (default)
Code:
                title: 'Latest Topics',
                loading: 'Loading...',
                empty: 'At the moment we are without messages or you are not allowed to see them!'


Portuguese
Code:
                title: 'Últimos Assuntos',
                loading: 'Carregando...',
                empty: ' No momento estamos sem tópicos para poderes ver ou não têm permissão para vê-los!'

Romanian
Code:
              title: 'Ultimele Subiecte',
                loading: 'Încărcare...',
                empty: 'Nu există mesaje în acest moment sau nu sunteți autorizat să le vizualizați!'

Dutch
Code:
                title: 'Laatste Onderwerpen',
                loading: 'Geladen...',
                empty: 'Op dit moment hebben we geen berichten of je hebt niet voldoende rechten om dit te kunnen zien!'

Italian
Code:
              title: 'Ultimi Argomenti',
              loading: 'Caricamento in corso...',
              empty: 'Al momento non ci sono messaggi o non ti è permesso vederli!'   


Greek
Code:
              title: 'Πρόσφατα Θέματα',
              loading: 'φόρτωση θεμάτων...',
              empty: 'Αυτή την στιγμή είμαστε  χωρίς μηνύματα ή δεν επιτρέπεται να τα δείτε '

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 !'


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.



Last edited by pedxz on Fri May 29, 2020 5:45 am; edited 5 times in total
pedxz
pedxz
Forumember

Other / Decline to state Posts : 375
Reputation : 103
Language : Português

View user profile https://www.forumotion.com/create-forum/modernbb

TonnyKamper likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by mpelmmc on Wed Aug 29, 2018 11:04 am

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

Male Posts : 1084
Reputation : 169
Language : English and Spanish

View user profile https://help.forumotion.com/

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by TonnyKamper on Wed Aug 29, 2018 6:13 pm

Awesome @pedxz Yes
TonnyKamper
TonnyKamper
Forumember

Female Posts : 675
Reputation : 58
Language : Dutch/English
Location : The Netherlands

View user profile http://www.nederlandheelt.nl/forum

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by Mr.Winni on Sun Nov 18, 2018 6:46 am

thank you so much pedxz Latest topics - AwesomeBB 1f60d
Mr.Winni
Mr.Winni
New Member

Male Posts : 22
Reputation : 4
Language : Vietnamese, English, Chinese
Location : Viet Nam

View user profile http://dntg.forumotion.com

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by CAForum on Sun Nov 25, 2018 6:33 pm

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
CAForum
Forumember

Male Posts : 33
Reputation : 4
Language : Français
Location : Paris

View user profile https://lesforums.caforum.fr/

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by pedxz on Thu May 07, 2020 9:46 am

@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) Glasses
pedxz
pedxz
Forumember

Other / Decline to state Posts : 375
Reputation : 103
Language : Português

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by BlackScorpion on Thu May 07, 2020 8:27 pm

2 years and still working, Good job buddy!






BlackScorpion
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 6597
Reputation : 894
Language : English
Location : USA

View user profile https://help.forumotion.com/f6-graphic-design-section

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by mSyx on Thu May 28, 2020 1:49 pm

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
mSyx
Forumember

Male Posts : 131
Reputation : 33
Language : French & English
Location : France

View user profile https://help.forumotion.com/

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by pedxz on Fri May 29, 2020 5:44 am

@mSyx wrote:Feels like a native widget; it's perfect. Thanks !
I'll leave the French translation here
Thank you bro :wouhou: (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
pedxz
Forumember

Other / Decline to state Posts : 375
Reputation : 103
Language : Português

View user profile https://www.forumotion.com/create-forum/modernbb

TonnyKamper likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by mSyx on Fri May 29, 2020 6:00 am

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

Latest topics - AwesomeBB Giphy-8

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 :>
mSyx
mSyx
Forumember

Male Posts : 131
Reputation : 33
Language : French & English
Location : France

View user profile https://help.forumotion.com/

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by plkocev on Sat Oct 17, 2020 2:14 pm

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.
avatar
plkocev
New Member

Male Posts : 5
Reputation : 0
Language : English

View user profile http://bgworld.forumotion.com

pedxz likes this post

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by pedxz on Wed Oct 28, 2020 5:50 am

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)
pedxz
pedxz
Forumember

Other / Decline to state Posts : 375
Reputation : 103
Language : Português

View user profile https://www.forumotion.com/create-forum/modernbb

TonnyKamper likes this post

Back to top Go down

Back to top


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