IMPORTANT

FM Design will be closing soon, please click here for more information.

Latest topics
» Forum Closure
by T.C. Yesterday at 19:54

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Yesterday at 19:12

» Asking about some plugin for Forumotion
by Dr Jay Yesterday at 19:10

» [GAME] Countdown from 200,000
by SLGray Sat 09 Dec 2017, 17:49

» [GAME] Count to One Million!
by SLGray Sat 09 Dec 2017, 17:49

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

» Support Forums and Social Networks
by SLGray Mon 04 Dec 2017, 22:38

» Browsers & Updates
by Wolfuryo Mon 04 Dec 2017, 15:20

» Logo/Favicon
by Mr_Grande Mon 04 Dec 2017, 09:55

» Broadcasting Duo
by brandon_g Sun 03 Dec 2017, 11:01

» IconSkouliki Graphics
by skouliki Thu 30 Nov 2017, 07:59

Recent Tutorials
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Similar Topics suggestions while typing

View previous topic View next topic Go down

avatar
Flerex
New Member
Title :
Gender : Male
Posts : 3
Points : 160
Reputation : 5
Language : English, Galician, Spanish
Browser : Browser : Safari Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://flerex.tumblr.com

PostFlerex on Thu 27 Jul 2017, 13:10

I bring you guys a new plugin for your Forumotion forum. This code shows a list of similar topics while the user is writing the title of a new one. It's perfect for support forums where the user hardly ever search before posting, which ends up in a lot of repeated questions. The result would be the following:


Just like all my plugins, I put customization above all, so every user can adapt the code as much as possible to their forums. This plugin comes with a lot of settings (many of them for advanced users). These settings let you make the plugin compatible with your template modifications effortlessly. It is also possible to make the plugin compatible with ANY Forumotion version with a few changes (although it only supports phpBB3 by default).

Installation


Setting up the plugin is very simple. Edit the overall_header template and search for:


Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>

Add after:

Code:
<script src="https://gitcdn.xyz/repo/Flerex/cdn/master/fm/similar-topics.js" type="text/javascript"></script>

Now, add the following CSS code to your forum:

Code:
#similarTopics {
    width: 500px;
    background: #E1EBF2;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0 0 10em;
}

#similarTopics,
#similarTopics .spinner,
#similarTopics .topic-container,
#similarTopics .similarTopics-title {
    display: none;
}

#similarTopics.visible,
#similarTopics .spinner.visible,
#similarTopics .similarTopics-title.visible,
#similarTopics .topic-container.visible {
    display: block;
}

#similarTopics .topic {
    display: flex;
    border-bottom: 1px solid white;
    padding: 5px 0;
    margin: 5px 0;
}

#similarTopics .topic:last-child {
    border-bottom: none;
}

#similarTopics .topic-data {
    flex: 1;
}

#similarTopics .topic-flags {
    align-items: center;
    margin-right: 10px;
    position: relative;
}

#similarTopics .topic-icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: transparent 50% 50% no-repeat;
}

#similarTopics .similarTopics-title {
    border-bottom: 1px solid #0076b1;
    color: #0076b1;
    font-size: .9em;
    margin: .5em 0;
    text-transform: uppercase;
}

#similarTopics .topic-status {
    width: 27px;
    height: 27px;
    background: transparent 0 0 no-repeat;
}

Then, add the following JS code and set it to be shown in all pages:

Code:
!function() {

    const settings = {
        forums : [1,2,3,4,5,6,7],
        searchIn : '-1',
        maxTopics : 5,
    };


    location.pathname == '/post' &&
    location.search.indexOf('&mode=newtopic') > -1 &&
    (settings.forums === true || settings.forums.some(id => location.search.indexOf(`?f=${id}`) > -1)) &&
    $(function() {
        FLRX.similarTopics.init(settings);
    });

}();

If you pay attention, at the beginning of the code there're some lines between brackets in the const settings definition. There is where you will be able to add the settings (those that are there by default are just random settings I give as an example).

Documentation


Coming up next I bring you the documentation of the plugin, where you can find all different settings you can use to customize the plugin. Be aware that all settings must follow this syntax:

Code:
setting: value,

So if you have more than one setting, the beggining of the script should look like:

Code:
const settings = {
    setting1: value,
    setting2: value,
    setting3: value,
};

Notice: Using a setting with its default value has no effect at all (you can take it away).

The different settings are the ones that follow:


  • forums



    Every forum where the new functionality will be available. A forum is represented by its ID (you can find it in its URL). The IDs will be placed between brackets, separated by comma. For example:

    Code:
    forums: [1, 2, 3, 4, 5],

    Special cases:
    • []: Disables the plugin in every forum (very counterproductive)
      Code:
      forums: [],


    Default value:
    Code:
    forums: [],

  • searchIn


    The forum or category where the search will take place. To identify the forum or category, their ID will be used, preceded by the letter f in case it's a forum or c in case it is a category, all quoted. For example, to search in the category with ID 2, you would use:

    Code:
    searchIn: 'c2',

    There exist special values:


    • false: Search in the same forum where the topic is being created.
    • '-1': Search everywhere


    Default value:
    Code:
    searchIn: false,

  • maxTopics


    Maximum amount of topics that will be shown. Due to implementation issues, the maximum number of topics to be shown will be the number of topics per page that Forumotion sets. It's still being studied how to allow a bigger number without affecting the performance.

    Example:

    Code:
    maxTopics : 10,

    Default value:
    Code:
    maxTopics : 5,

  • triggerWhenWriting


    Enable or disable the functionality while typing. Disable this setting will imply that the topics list will be shown when the text field is not focused anymore.

    Example:

    Code:
    triggerWhenWriting : false,

    Default value:
    Code:
    triggerWhenWriting : true,

  • hideAtFocusout

    Hide the topic list when the text field is not focused anymore.

    Preconditions:

    • The triggerWhenWriting setting must have as value "true"


    Example:

    Code:
    hideAtFocusout : true,

    Default value:
    Code:
    hideAtFocusout : false,


  • autocomplete


    Enable or disable autofill (browser suggestions) in the title's text field, i.e., setting the input's autocomplete attribute to either on or off.

    It can take true as value to enable this functionality or false to disable it.

    Example:

    Code:
    autocomplete : true,

    Default value:
    Code:
    autocomplete : false,

  • wordMinLength


    Minimum number of characters of a word to be used in the search query. Take into account that due to limitations of Forumotion, using a value less than 4 will take no effect.

    The value must be an integer number between 4 (included) and infinity (i.e. the maximum number of characters allowed by Forumotion in the query).

    Example:

    Code:
    wordMinLength : 5,

    Default value:
    Code:
    wordMinLength : 4,



The following settings are meant to be used by advanced users. It's neccesary some basic knowledge of JS and HTML:

Advanced Settings:


  • excludedCharacters


    Regular Expression Object that matchs the ignored characters in the text field.

    Default Value:
    Code:
    excludedCharacters : new RegExp(/[.,\/#!$%\^&\*¿?!¡;:{}\\=\-_`~"«“‘’”»()\[\]]/, 'g'),

  • dom


    Customizable object used to modify the way the DOM is read. Very useful in case you have modified your templates and you're experiencing incompatibilities.

    You can see all possible modifications in the "Default Value" section, that would correspond to the default structure of a phpBB3 forum. Adapting these settings to any other version should be easy. In order to make the adaptation simpler, all relations between elements are strictly parental (i.e. there's no possibility that any of the DOM idenfiers of this object represent the same object, only a parent, grandparent, child or grandchild). If you have trouble understanding this you can just ask. I'll be glad to answer any question.

    It is not necessary to use all properties of the object, only those that you want to modify.

    Default value:
    Code:
    dom : {

                /* Search page */
                topicscontainer : '.forabg',
                topic          : 'dd.dterm',
                infocontainer  : '.span-tab',
                titlelink      : '.topictitle',
                userlink        : 'a[href^="/u"]',
                forumlink      : 'a[href^="/f"]',
                topicicon      : 'dl.icon',

                /* structure */
                visible        : 'visible',

                /* posting page */
                titleinput      : '#postingbox input[name="subject"]',
                inputcontainer  : 'dl',

                /* created elements */
                maincontainer  : $('<div />', { id : 'similarTopics' }),
                similartopiccont : $('<div />', { class : 'topic-container' }),
                loadingelm      : $('<div />', { class : 'spinner' })
                                    .append($('<div/>', { class:'double-bounce1' }))
                                    .append($('<div/>', { class:'double-bounce2' })),
                topicelmcont    : $('<div />', { class: 'topic' }),
                topicelmtitle  : $('<div />', { class: 'topic-title' }),
                topicdatacont  : $('<div />', { class: 'topic-data' }),
                topicflags      : $('<div />', { class: 'topic-flags' }),
                topiciconcont  : $('<div />', { class: 'topic-icon' }),
                topicstatus    : $('<div />', { class: 'topic-status' }),
                topicelminfo    : $('<div />', { class: 'topic-info' }),
                topicauthor    : $('<span />', { class: 'topic-author', text: 'por ' }),
                topicforum      : $('<span />', { class: 'topic-forum', text: ' en ' }),
                similarstitle  : $('<h4 />', { class: 'similarTopics-title', text: 'Quizás te interese...' }),

            },



More...

  • This code uses a CDN, which lets me update and improve the code so you always have the latest version, which would be the most secure and efficient. There's nothing to worry about, every new version will be backwards-compatible.

  • The browser support of this plugin follows my support rules to browsers: only the current and current and current-1 versions of the most popular browsers will be supported (Chrome, Firefox, Safari, Edge and derivates). I will not support any Internet Explorer version (as the browser itself has reached end of life) and any other old browser. This doesn't mean that the plugin won't work in these browsers, it could. It just means that I will not correct any bug in these and that you should think about switching your browser ASAP lol.

  • If you find any bug in any of the supported browsers previously mentioned, I'd appreciate if you let me know.

  • Moreover, if you have any suggestion or idea to any possible feature that could be added, just say it, I don't bite... much.
avatar
Wolfuryo

Gender : Male
Posts : 252
Points : 1264
Reputation : 80
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostWolfuryo on Thu 27 Jul 2017, 14:52

Hi,

Amazing plugin, thanks for sharing with us.

I think it would be better to add the script from the cdn using $.getScript, then doing everything else in a callback. Not necessary better, but easier for some people to use the code on their forum. Anyway, it seems to work pretty good on my phpBB3 forum.

Just curious, you wrote the js(I mean this one:https://gitcdn.xyz/repo/Flerex/cdn/master/fm/similar-topics.js) yourself in this way or you are using some sort of program to make it like that? It'd take me at least an hour to understand what it does lol
avatar
Flerex
New Member
Title :
Gender : Male
Posts : 3
Points : 160
Reputation : 5
Language : English, Galician, Spanish
Browser : Browser : Safari Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://flerex.tumblr.com

PostFlerex on Thu 27 Jul 2017, 15:16

@Wolfuryo wrote:Hi,

Amazing plugin, thanks for sharing with us.

I think it would be better to add the script from the cdn using $.getScript, then doing everything else in a callback. Not necessary better, but easier for some people to use the code on their forum. Anyway, it seems to work pretty good on my phpBB3 forum.

Just curious, you wrote the js(I mean this one:https://gitcdn.xyz/repo/Flerex/cdn/master/fm/similar-topics.js) yourself in this way or you are using some sort of program to make it like that? It'd take me at least an hour to understand what it does lol

First off, thanks for the feedback!

Actually, there's a lot of thought behind my decision of not using $.getScript. Even though that what you said is true, I always want to make my codes as efficient as possible, even if that makes their installation a little bit more complex. Adding a line to a template shouldn't be difficult tho. If I use $.getScript, I would have to first wait for jQuery to be loaded to be able to load the plugin. That wouldn't make the plugin very responsive. It's the little details that I like to pay atention to. In general, there's no reason to use $.getScript unless you explicitly want the script not to be loaded before the page itself or to use some kind of callback that needs to if the script loaded successfully.

I did and I didn't write that script. I wrote the original source code, but I compressed it in order to make it load faster (by reducing its filesize). I want everything to be as efficient as possible. If you want to know which tool I use to compress my codes, is Packer. It's a very nice compressor, you should give it a try!

Best regards.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4715
Points : 9616
Reputation : 2344
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 31 Jul 2017, 09:34

Nice work ! This'll definitely come in handy for helping users find similar topics to the one they're creating. Wink

avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2152
Points : 2975
Reputation : 90
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Fri 18 Aug 2017, 21:03

Nice plugin.

I'll test it later and let you know how it works out

avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 18
Posts : 2152
Points : 2975
Reputation : 90
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Fri 29 Sep 2017, 15:09

Finally got around to messing with this and DAMN, it's so fire I love it

@Flerex

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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