Latest topics - AwesomeBB

+5
CAForum
Mr.Winni
TonnyKamper
mpelmmc
pedxz
9 posters

Go down

Latest topics - AwesomeBB Empty Latest topics - AwesomeBB

Post by pedxz August 29th 2018, 8: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 May 29th 2020, 11:45 am; edited 5 times in total
pedxz
pedxz
Forumember

Posts : 615
Reputation : 132
Language : 🇵🇹

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 August 29th 2018, 5:04 pm

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

Male Posts : 1087
Reputation : 170
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 August 30th 2018, 12:13 am

Awesome @pedxz Yes
TonnyKamper
TonnyKamper
Forumember

Female Posts : 783
Reputation : 69
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 November 18th 2018, 12:46 pm

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 November 26th 2018, 12:33 am

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 May 7th 2020, 3:46 pm

@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

Posts : 615
Reputation : 132
Language : 🇵🇹

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 May 8th 2020, 2:27 am

2 years and still working, Good job buddy!






BlackScorpion
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 6748
Reputation : 906
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 May 28th 2020, 7: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 : 136
Reputation : 39
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 May 29th 2020, 11: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

Posts : 615
Reputation : 132
Language : 🇵🇹

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 May 29th 2020, 12:00 pm

@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 : 136
Reputation : 39
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 October 17th 2020, 8: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 : 6
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 October 28th 2020, 10: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

Posts : 615
Reputation : 132
Language : 🇵🇹

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 plkocev October 31st 2020, 10:35 pm

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

Male Posts : 6
Reputation : 0
Language : English

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

Back to top Go down

Latest topics - AwesomeBB Empty Re: Latest topics - AwesomeBB

Post by SLGray November 1st 2020, 1:49 am

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


Latest topics - AwesomeBB Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 49792
Reputation : 3444
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top


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