Latest topics - AwesomeBB

Go down

Latest topics - AwesomeBB Empty Latest topics - AwesomeBB

Post by pedxz on 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

Male Posts : 310
Reputation : 83
Language : Português
Location : Forumeiros

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 mpelmmc on 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 : 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 August 30th 2018, 12:13 am

Awesome @pedxz Yes
TonnyKamper
TonnyKamper
Forumember

Female Posts : 637
Reputation : 53
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 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 on 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 on 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

Male Posts : 310
Reputation : 83
Language : Português
Location : Forumeiros

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

2 years and still working, Good job buddy!






BlackScorpion
BlackScorpion
Graphic Designer
Graphic Designer

Male Posts : 6534
Reputation : 891
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 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 : 131
Reputation : 29
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 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

Male Posts : 310
Reputation : 83
Language : Português
Location : Forumeiros

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 mSyx on 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 : 131
Reputation : 29
Language : French & English
Location : France

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

pedxz likes this post

Back to top Go down

Back to top


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