This tutorial will help you setup a popup module for your Forumotion forum, such as in the example below.
The popup can be used for anything, such as quick viewing of notification content, searches, and previews.. It'll work on any forum version, save for a few differences in display.
Quick Navigation :
- Installing the Popup
- Installing the Theme
- Installing Plugins
1. Installing the Popup
To install the popup, go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.
Title : FA Popup Placement : In all the pages - Code:
(function() { var version = 0; /* COMPATIBLE FORUM VERSIONS ** 0 : PHPBB2 ** 1 : PHPBB3 ** 2 : PUNBB ** 3 : INVISION */ if (!window.FA) window.FA = {}; if (FA.Popup) { if (window.console) console.warn('FA.Popup has already been initialized.'); return; } FA.Popup = {
lang : { button_close : 'X', default_title : 'Popup', loading : 'Loading...',
error_getPage : 'An error occurred while getting the page. Please try again later.', error_connection : 'A connection error occurred. Please check your internet connection and try again later.' }, active : false, forum : { version : version, content : version ? '#main-content' : '#content-container > table > tbody > tr > td[width="100%"]', pages : ['.gensmall:has(.sprite-arrow_subsilver_left, .sprite-arrow_subsilver_right) a[href^="/"], .nav:has(.sprite-arrow_subsilver_left, .sprite-arrow_subsilver_right) a[href^="/"]', '.pagination:not(strong) span a', '.paging a[href^="/"]', '.pagination a[href^="/"]'][version] }, /* open a new popup window */ open : function(href, title, callback) { if (FA.Popup.active) FA.Popup.close(); // close opened windows var box = document.createElement('DIV'), overlay = document.createElement('DIV'), content = document.createElement('DIV'), close = document.createElement('INPUT');
close.type = 'button'; close.value = FA.Popup.lang.button_close; close.className = 'fa_popup_button fa_popup_close'; close.onclick = FA.Popup.close;
content.id = 'fa_popup_content'; content.innerHTML = '<div class="fa_popup_loading">' + FA.Popup.lang.loading + '</div>'; overlay.id = 'fa_popup_overlay'; overlay.style.zIndex = '99998'; overlay.onclick = FA.Popup.close;
if (FA.Popup.forum.version == 2) box.className += ' pun'; box.id = 'fa_popup'; box.style.zIndex = '99999'; box.innerHTML = '<div class="fa_popup_title">' + (title ? title : FA.Popup.lang.default_title) + '</div>'; box.appendChild(close); box.appendChild(content);
if (href) { $.get(href, function(data) { content.innerHTML = ''; if (callback) callback(data, content); else { var main = $(FA.Popup.forum.content, data)[0]; if (main) { content.appendChild(main);
var page = $(FA.Popup.forum.pages, content); if (page[0]) page.click(FA.Popup.getPage); } } }).fail(function() { content.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_connection + '</div>'; }); } else if (callback) { content.innerHTML = ''; callback(content); }
document.body.style.overflow = 'hidden'; document.body.appendChild(overlay); document.body.appendChild(box); FA.Popup.active = true; }, /* close an opened popup window */ close : function () { var box = document.getElementById('fa_popup'), overlay = document.getElementById('fa_popup_overlay'); box && document.body.removeChild(box); overlay && document.body.removeChild(overlay); document.body.style.overflow = ''; FA.Popup.active = false; },
/* get the page when a pagination link is clicked */ getPage : function() { var content = document.getElementById('fa_popup_content');
$.get(this.href, function(data) { var main = $(FA.Popup.forum.content, data)[0], page;
if (main) { content.scrollTop = 0; content.innerHTML = ''; content.appendChild(main); page = $(FA.Popup.forum.pages, content); if (page[0]) page.click(FA.Popup.getPage); } else { content.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_getPage + '</div>'; } }).fail(function() { content.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_connection + '</div>' ; }); return false; } }; })(); Modifications : This popup is developed for multiple versions, so it's imperative that you fill in the version variable at the top of the script, with the number that corresponds to your forum version !
0 : phpbb2 1 : phpbb3 2 : punbb 3 : invision
Please see the following topic if you do not know your forum version. https://help.forumotion.com/t138414-how-to-identify-your-forum-version#937053
Depending on your language or preferences, you can also change a bit of text on the popup by modifying the lang object. - Code:
lang : { button_close : 'X', default_title : 'Popup', loading : 'Loading...',
error_getPage : 'An error occurred while getting the page. Please try again later.', error_connection : 'A connection error occurred. Please check your internet connection and try again later.' }, This script is essentially the "heart and soul" of the popup. To actually utilize it, you will need to install plugins which can be found later in this tutorial.
2. Installing the Theme
So our popup actually looks like a popup window, you will need to add a bit of CSS to your stylesheet. Go to Administration Panel > Display > Colors > CSS stylesheet and choose the theme you prefer to install.
Light Theme : (Preview) - Code:
#fa_popup_overlay { background-color:#FFF; opacity:0.8; position:fixed; top:0; left:0; right:0; bottom:0; }
#fa_popup { font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; background:#FFF; border-radius:3px; position:fixed; top:50px; left:12%; right:12%; bottom:30px; padding:3px; width:auto; overflow:hidden; box-shadow:0px 3px 10px rgba(34, 25, 25, 0.4); }
#fa_popup_content { border:1px solid #EEE; border-radius:3px; padding:3px; overflow:auto; height:90%; }
.fa_popup_title { color:#333; font-size:12px; font-weight:bold; font-family:"Trebuchet MS", Arial, Verdana, Sans-serif; border-bottom:1px solid #333; margin:8px 0; padding-bottom:2px; }
input.fa_popup_button, a.fa_popup_button { color:#FFF !important; font-size:12px; font-weight:bold; text-indent:0; text-decoration:none !important; background-color:#39C; border:none; border-bottom:2px solid #17A; border-radius:3px; display:inline-block; line-height:20px; padding:0 6px; cursor:pointer; transition:300ms; }
input.fa_popup_close { background-color:#E53; border-color:#C31; min-width:25px; position:absolute; top:2px; right:2px; }
input.fa_popup_button:hover, a.fa_popup_button:hover { background-color:#333; border-color:#111; }
input.fa_popup_button:focus, a.fa_popup_button:active, a.fa_popup_button:focus { background-color:#EB5; border-color:#C93; outline:none; }
.fa_popup_error { color:#966; font-size:12px; background:#FEE; border:1px solid #ECC; border-bottom-width:2px; border-radius:3px; padding:9px 6px; margin:6px; }
.fa_popup_friends { background:#EEE; border:1px solid #DDD; border-bottom-width:2px; border-radius:3px; display:inline-block; padding:3px; margin:3px; float:none; overflow:hidden; }
#fa_popup .add_success { color:#8B5 } #fa_popup .deny_success { color:#E53 } #fa_popup .add_failed { color:#EB5 }
.fa_popup_loading { color:#333; font-size:14px; font-weight:bold; text-align:center; padding:25px; }
.fa_popup_more { text-align:center; margin:3px; clear:both; }
/* data corrections */ #fa_popup_content > td { display:block } #fa_popup.pun tbody.statused span.status { position:static }
Dark Theme : (Preview) - Code:
#fa_popup_overlay { background-color:#333; opacity:0.8; position:fixed; top:0; left:0; right:0; bottom:0; }
#fa_popup { font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; background:#222; border-radius:3px; position:fixed; top:50px; left:12%; right:12%; bottom:30px; padding:3px; width:auto; overflow:hidden; box-shadow:0px 3px 10px rgba(34, 25, 25, 0.4); }
#fa_popup_content { border:1px solid #333; border-radius:3px; padding:3px; overflow:auto; height:90%; }
.fa_popup_title { color:#999; font-size:12px; font-weight:bold; font-family:"Trebuchet MS", Arial, Verdana, Sans-serif; border-bottom:1px solid #999; margin:8px 0; padding-bottom:2px; }
input.fa_popup_button, a.fa_popup_button { color:#FFF !important; font-size:12px; font-weight:bold; text-indent:0; text-decoration:none !important; background-color:#17A; border:none; border-bottom:2px solid #058; border-radius:3px; display:inline-block; line-height:20px; padding:0 6px; cursor:pointer; transition:300ms; }
input.fa_popup_close { background-color:#C31; border-color:#A10; min-width:25px; position:absolute; top:2px; right:2px; }
input.fa_popup_button:hover, a.fa_popup_button:hover { background-color:#666; border-color:#444; }
input.fa_popup_button:focus, a.fa_popup_button:active, a.fa_popup_button:focus { background-color:#C93; border-color:#A91; outline:none; }
.fa_popup_error { color:#300; font-size:12px; background:#966; border:1px solid #855; border-bottom-width:2px; border-radius:3px; padding:9px 6px; margin:6px; }
.fa_popup_friends { background:#444; border:1px solid #333; border-bottom-width:2px; border-radius:3px; display:inline-block; padding:3px; margin:3px; float:none; overflow:hidden; }
#fa_popup .add_success { color:#8B5 } #fa_popup .deny_success { color:#E53 } #fa_popup .add_failed { color:#EB5 }
.fa_popup_loading { color:#999; font-size:14px; font-weight:bold; text-align:center; padding:25px; }
.fa_popup_more { text-align:center; margin:3px; clear:both; }
/* data corrections */ #fa_popup_content > td { display:block } #fa_popup.pun tbody.statused span.status { position:static }
2.1 Modifications and Information
Note : Once the popup is installed it will get data from other pages asynchronously when it's called. If you use JavaScript to make modifications to posts, forums, etc.. there may be differences in the display of the content when displayed in the popup.
You can make corrections to the content displayed in the popup by modifying the elements with CSS. All you need to do is reference #fa_popup as the parent in your selector set. For example, we know many people modify the reputation system on posts with JavaScript, so if you wanted to hide the default vote system in the popup you would write the following css rule : - Code:
#fa_popup .post .vote { display:none } Which sets the display state of the vote system in the popup to "none." There may be more than wanting to hide things, for example you may want to adjust the width of some content in the popup. If you cannot find how to do that you can always ask for our help.
3. Installing Plugins
Now that you have the module and style installed, you're ready to install some plugins ! We've already prepared a few, so feel free to choose the one you want to install.
Quick Navigation :
- Quick Notification Popup
- Search Popup
- Preview Popup
3.1 Quick Notification Popup
This plugin allows you to quickly view notifications you've received simply by clicking on the link !
To install this plugin go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings. 1111111111111111111111111111111111111111111111 Title : Notifications Popup Placement : In all the pages - Code:
$(function() { $(function() { if (!FA.Popup) return; // popup config FA.Popup.notif_config = { PMs: true, VMs: true, Groups: true, Replies: true, Reports: true, Requests: true }; // language config var lang = { viewing_pm: 'Viewing PM from : ', viewing_wall: 'Viewing visitor messages', viewing_reply: 'Viewing reply from : ', viewing_request: 'Viewing friend requests', viewing_group: 'Viewing group', viewing_report: 'Viewing reports', more_pm: 'View all PMs', more_wall: 'Visit your wall', more_reply: 'View the whole topic', more_request: 'View your Friends and Foes', more_group: 'View group', more_report: 'View all reports', friend_added: 'Added', friend_denied: 'Denied', friend_error: 'Error', error_no_pm: '<b>Error :</b> The PM you tried to view could not be found. Please try using the button below to view your entire inbox.', error_no_wall: '<b>Error :</b> Your wall could not be accessed. Please try using the button below to view your wall.', error_no_reply: '<b>Error :</b> The reply you tried to view could not be found. Please try using the button below to view the entire topic.', error_no_requests: '<b>Error :</b> No friend requests could be found. Please try using the button below to view your Friends / Foes list.', error_no_group: '<b>Error :</b> The group you tried to view could not be found. Please try using the button below to access it.', error_no_report: '<b>Error :</b> The report page could not be accessed. Please try using the button below to access it.' }, notif = document.getElementById('notif_list'), i; if (notif) { $(notif).click(function(e) { var node = e.target, store, id, sender, more = document.createElement('DIV'); more.className = 'fa_popup_more'; if (node.tagName == 'A') { id = node.parentNode.parentNode.parentNode.id.slice(1); // notif id store = FA.Notification.getStore(); // notif data sender = store[id].text.from.name; // username of sender // PMs if (/\/privmsg/.test(node.href) && FA.Popup.notif_config.PMs) { FA.Popup.open('/privmsg?folder=inbox&mode=read&p=' + store[id].text.msg_id + '&nid=' + id, FA.Popup.lang.viewing_pm + sender, function(data, popup) { var PM = $('form[action^="/privmsg"]:has(.postbody)', data)[0]; if (PM) popup.appendChild(PM); else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_pm + '</div>'; more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_pm + '</a>'; popup.appendChild(more); }); e.preventDefault(); } // Replies else if (/\/t\d+/.test(node.href) && FA.Popup.notif_config.Replies) { FA.Popup.open(node.href, FA.Popup.lang.viewing_reply + sender, function(data, popup) { var reply = $('.post--' + store[id].text.post.post_id, data)[0]; if (reply) popup.appendChild(reply); else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_reply + '</div>'; if (typeof FA_updatepostLike === "undefined") $.getScript("https://illiweb.com/rs3/31/frm/jquery/likes/FA_Likes.js"); more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_reply + '</a>'; popup.appendChild(more); }); e.preventDefault(); } // Visitor Messages else if (/\/u\d+wall/.test(node.href) && FA.Popup.notif_config.VMs) { FA.Popup.open(node.href, FA.Popup.lang.viewing_wall, function(data, popup) { var wall = $('#profile-advanced-details', data)[0]; if (wall) popup.appendChild(wall); else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_wall + '</div>'; more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_wall + '</a>'; popup.appendChild(more); }); e.preventDefault(); } // Friend requests else if (/page_profil=friendsfoes/.test(node.href) && FA.Popup.notif_config.Requests) { FA.Popup.open(node.href, FA.Popup.lang.viewing_request, function(data, popup) { var request = $((FA.Popup.forum.version == 2 ? '.main-content.frm dd' : '.friends-foes-list') + ':has(a[href^="/profile?deny"])', data); if (request[0]) { $(request).addClass('fa_popup_friends'); // accept / deny requests using AJAX $('a[href^="/profile"]', request).click(function() { var t = this, add = /deny/.test(t.href) ? 0 : 1; $('a[href^="/profile"]', t.parentNode).hide(); // success / error messages $.get(t.href, function() { $(t.parentNode).append('<strong class="' + (add ? 'add' : 'deny') + '_success">' + (add ? FA.Popup.lang.friend_added : FA.Popup.lang.friend_denied) + '</strong>'); }).fail(function() { $(t.parentNode).append('<strong class="add_failed">' + FA.Popup.lang.friend_error + '</strong>'); }); return false; }); $(popup).append(request); } else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_requests + '</div>'; more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_request + '</a>'; popup.appendChild(more); }); e.preventDefault(); } // Group requests else if (/\/g\d+-/.test(node.href) && FA.Popup.notif_config.Groups) { FA.Popup.open(node.href, FA.Popup.lang.viewing_group, function(data, popup) { var group = $('form[name="post"]', data)[0]; if (group) popup.appendChild(group); else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_group + '</div>'; more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_group + '</a>'; popup.appendChild(more); }); e.preventDefault(); } // Reports else if (/\/report/.test(node.href) && FA.Popup.notif_config.Reports) { FA.Popup.open(node.href, FA.Popup.lang.viewing_report, function(data, popup) { var report = $(FA.Popup.forum.content, data)[0]; if (report) popup.appendChild(report); else popup.innerHTML = '<div class="fa_popup_error">' + FA.Popup.lang.error_no_report + '</div>'; more.innerHTML = '<a href="' + node.href + '" class="fa_popup_button">' + FA.Popup.lang.more_report + '</a>'; popup.appendChild(more); }); e.preventDefault(); } } }); for (i in lang) FA.Popup.lang[i] = lang[i]; // add language config to popup object } }) }); Modifications : This plugin is extensive and because of this it also has a lot of customization for you ! If you need to translate or change the wording you can find all the texts inside the lang object.
As for the config you can find that in the FA.Popup.notif_config object. These settings take a boolean value of true or false. ( enabled or disabled ) They determine if the popup should show up for the specified notification type. For example, if you set Requests to false, the following popup would not show up when you click on the "friend request" link, instead you'll be taken to the friends / foes page.
Here's a quick explanation for each setting.
PMs : Enables quick viewing of PM notifications VMs : Enables quick viewing of VM notifications Groups : Enables quick viewing of Group Requests Replies : Enables quick viewing of Watched topic, tagged, hash tag, etc.. replies to topics. Reports : Enables quick viewing of post reports Requests : Enables quick viewing of Friend Requests
Once you've set the config up the way you want, remember to save the script. After that you should now be able to quickly view notifications !
3.2 Search Popup
This plugin allows you to quickly perform searches without ever having to change the page ! You can even switch pages in the popup !
To install this plugin go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.
Title : Search Popup Placement : In all the pages - Code:
$(function() { if (!window.FA.Popup) return; $('form[action^="/search"]').submit(function(e) { var keywords = this.search_keywords; FA.Popup.open('/search?' + $(this).serialize(), 'Searching' + (keywords.value ? ' : ' + keywords.value : '')); keywords.blur(); e.preventDefault(); }); }); Save the script and you should now be able to perform searches quicker than before !
3.3 Preview Popup
This plugin allows you to quickly view message previews without ever having to change the page !
To install this plugin go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.
Title : Preview Popup Placement : "In all the pages" OR if you want it only for quick reply "In the topics" - Code:
$(function() { if (!window.FA.Popup || !document.post || !document.post.message || !document.post.mode) return; document.post.preview.onclick = function(e) { var mode = document.post.mode.value; if ($.sceditor) document.post.message.value = $(document.post.message).sceditor('instance').val(); FA.Popup.open('', 'Preview', function(popup) { popup.innerHTML = '<div class="fa_popup_loading">Loading preview...</div>'; $.post(mode == 'post' ? '/privmsg' : '/post', $(document.post).serialize() + '&preview=1', function(data) { var preview = $(['.postbody', mode == 'post' ? '.post' : '#preview', '.main-content.topic', '#preview'][FA.Popup.forum.version], data)[0]; popup.innerHTML = ''; if (preview) { var content = document.createElement('DIV'); content.className = 'fa_popup_preview'; content.appendChild(preview); popup.appendChild(content); } }); }); e.preventDefault(); } }); Save the script and you should now be able to quickly view your message previews !
|