[Project] CP_AddOn - Configure scripts

Attention:
This topic of debate about this project is intended for developers only, not orders of any kind will be accepted, not insist!
Soon it will be posted a tutorial about the system with the required documentation for developers and the manual for end users who are the admins!

Note: I do not know much about scripts, so the experts here forgive my errors with JavaScript and jQuery language.

Hello folks!

Introduction:

The title says half of what I wish to speak, but I'll complement:
In IPBoard platform, for example, when we add a .js code and we need to configure script parameters, we do not change a single line of code, there is only one interface with options, like the image below:

Spoiler:

In this way it's easier for the administrator to configure the variables and parameters of a script without even understand the code to edit it!!!

The purpose of this topic is exactly to bring this facility to Forumotion platform, yes, why not ??? !!!

But for this to be possible, the code that is added to the control panel should have a kind of header for the system to recognize and add your settings in the new tab added!
In principle the idea seems confusing / complicated, but it is actually quite simple and functional...

Look at this example:

This image shows the "injection" of the script required to have the configuration tab of the scripts.

Below the configuration of some code:


But what is needed to get my code compatible with this system?
Below you will have this answer:

Header:

It is the part that identifies the compatibility of your code with the system, formed by XML items, which is understood only with a regex of the system itself, as it is within a comment as the interpreter JavaScript does not recognize XML!
Example header:

Code:


/**
 * @CP_AddOn Addons for the Forumotion control panel
 * @copyright Copyright (C) 2014 JScript
 * @license http://www.gnu.org/licenses/gpl.html GPL version 2 or higher
 * @engine 1.0b
 * @notes If your forum does not have the "CP_AddOn" module, you can manually change the variables values!

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<mod>
   <header>
      <id>WhereIam</id>
      <title>Where I am?, Topic Active Users (Who is read this topic?)!</title>
      <version>1.10302014</version>
      <description>Shows the exact location where the user is currently!</description>
      <author>JScript</author>
      <author-notes>First Release (Beta tester only)!</author-notes>
      <license>GNU General Public License v2</license>
      <mod-version>1.0.0.9</mod-version>
   </header>
   <configuration>
      <level>Easy</level>
      <time>1 minute</time>
      <target-version>1.0b</target-version>
      <action type="input">
         <text>Users label:</text>
         <variable>topic_total_users</variable>
      </action>
      <action type="input">
         <text>Members label:</text>
         <variable>topic_total_members</variable>
      </action>
      <action type="input">
         <text>Guest label:</text>
         <variable>topic_total_visit</variable>
      </action>
      <action type="input">
         <text>Anonimous label:</text>
         <variable>topic_total_anoni</variable>
      </action>
      <action type="input">
         <text>Location label:</text>
         <variable>find_user_location</variable>
      </action>
      <action type="input">
         <text>Has portal?:</text>
         <variable>has_portal</variable>
      </action>
   </configuration>
</mod>
*/


Note: You must respect the XML syntax.

Current code released for testing:

Code:


jQuery(function() {
    jQuery('a[href*="/admin/index.forum?part=admin"]').click(function(event) {
        event.preventDefault();
        document.body.innerHTML = '<iframe name="cpaddons" id="cpaddons" onLoad="CP_AddOns()" src="' + this.href + '" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">IFrame is not supported</iframe>';
      // Clear all temporizations!
        var lastNum = setTimeout(";");
        for (var i = 0; i < lastNum; i++) {
            clearTimeout(i);
        }
      lastNum = setInterval(";");
        for (var i = 0; i < lastNum; i++) {
            clearInterval(i);
        }
    });
});

function CP_AddOns() {
    var oIframe = (document.getElementById("cpaddons").contentWindow || document.getElementById("cpaddons").contentDocument);
    oIframe.sContent = {
        sHtml0: '<!-- Module: Configure Scripts - By JScript Brasil at live dot com -->' +
            '<div class="clearfix" id="content">' +
            '   <div style="display: none;" id="menu_close">' +
            '      <p>' +
            '         <a href=\'javascript:ShowHideMenu("menu","menu_close","main","expended_main");\'><img title="Display the menu" alt="Display the menu" src="http://2img.net/i/fa/admin/icones/show_menu.png">' +
            '         </a>' +
            '        </p>' +
            '   </div>' +
            '   <div id="menu">' +
            '      <p id="hide-menu" style="display: block;">' +
            '         <a href=\'javascript:ShowHideMenu("menu","menu_close","main","expended_main");\'><img title="Hide the menu" alt="Hide the menu" src="http://2img.net/i/fa/admin/icones/hide_menu.png">' +
            '         </a>' +
            '      </p>' +
            '      <script type="text/javascript">' +
            '         //&lt;![CDATA[' +
            '         document.getElementById("hide-menu").style.display = "block"; //]]&gt;' +
            '      </script>' +
            '      <div class="header"><img src="http://2img.net/i/fa/admin/icones/puce_bleu.png">&nbsp;Configure Scripts</div>' +
            '      <div class="coins-top">' +
            '         <div class="left-top">&nbsp;&nbsp;<img align="absmiddle" src="http://2img.net/i/fa/admin/icones/small_ico/html.png">&nbsp;JAVASCRIPT</div><img align="right" class="corner-right" src="http://2img.net/i/fa/admin/icones/top-right-gris.png">' +
            '      </div>' +
            '      <br clear="all">' +
            '      <div class="coins-border">' +
            '         <div id="activesubmenu"><a href="javascript:void(0);" onclick="showContent();"><span>Module JavaScript &amp; jQuery</span></a></div>' +
            '      </div>' +
            '      <div class="coins-bottom">' +
            '         <div class="left-bottom"></div><img align="right" src="http://2img.net/i/fa/admin/icones/bottom-right-blanc.png">' +
            '      </div>' +
            '      <br clear="all">' +
            '      <br>' +
            '      <div class="coins-top">' +
            '         <div class="left-top">&nbsp;&nbsp;<img align="absmiddle" src="http://2img.net/i/fa/admin/icones/small_ico/support.png">&nbsp;Suporte</div><img align="right" class="corner-right" src="http://2img.net/i/fa/admin/icones/top-right-gris.png">' +
            '      </div>' +
            '      <br clear="all">' +
            '      <div class="coins-border">' +
            '         <div class="submenu"><a href="javascript:void(0);"><span>Configure Scripts</span></a></div>' +
            '         <div class="submenu"><a href="http://help.forumotion.com/" target="_blank"><span>Forumotion</span></a></div>' +
            '      </div>' +
            '      <div class="coins-bottom">' +
            '         <div class="left-bottom"></div><img align="right" src="http://2img.net/i/fa/admin/icones/bottom-right-blanc.png">' +
            '      </div>' +
            '      <br clear="all">' +
            '   </div>' +
            '   <div id="main">' +
            '      <div id="main-content">' +
            '      </div><!-- closing tag for #main-content -->' +
            '   </div><!-- closing tag for #main -->' +
            '   <div id="tools"></div><!-- closing tag for #tools -->' +
            '</div>',
        sHtml1: '<!-- Module: Configure Scripts - By JScript Brasil at live dot com -->' +
            '<h2><a href="javascript:void(0);" onclick="showContent();">JAVASCRIPT</a></h2>' +
            '<ul class="h2-breadcrumb clearfix">' +
            '    <li class="first">Module JavaScript &amp; jQuery</li>' +
            '</ul>' +
            '<blockquote class="block_left" style="display: none;">' +
            '    <p class="explain">Through this section, you can easily manage the JavaScript files you want to add on your forum pages.' +
            '        <br>' +
            '        <br>Warning: This section is intended for expert users. Be careful, your javascript code must be functional when published. In effect, we compress the code in order to improve your forum pages loading time.</p>' +
            '</blockquote>' +
            '<fieldset>' +
            '   <legend>Javascript Codes</legend>' +
            '   <table width="85%" align="center" cellspacing="1" cellpadding="4" border="0" class="tablesorter" id="listJs">' +
            '      <thead>' +
            '         <tr>' +
            '            <th id="column_title" class="headerSort">Name<span class="imgSort">&nbsp;</span></th>' +
            '            <th id="column_address" class="headerSort">Version<span class="imgSort">&nbsp;</span></th>' +
            '            <th id="column_date" class="headerSort headerSortUp">Author<span class="imgSort">&nbsp;</span></th>' +
            '            <th>Edit</th>' +
            '         </tr>' +
            '      </thead>' +
            '      <tbody>' +
            '         <!-- Code list! -->' +
            '         <tr id="load_list">' +
            '            <td><ul class="h2-breadcrumb clearfix" style="margin: 0px;"><br><li class="first">Filling Out the list, wait... <span id="code_num"></span></li></ul></td>' +
            '         </tr>' +
            '      </tbody>' +
            '   </table>' +
            '   <br>' +
            '</fieldset>',
        sHtml2: '<!-- Module: Configure Scripts - By JScript Brasil at live dot com -->' +
            '<h2><a href="javascript:void(0);" onclick="showContent();">JAVASCRIPT</a></h2>' +
            '<ul class="h2-breadcrumb clearfix">' +
            '    <li class="first"><a href="javascript:void(0);" onclick="showContent();">Module JavaScript &amp; jQuery</a>' +
            '    </li>' +
            '    <li>Code configuration</li>' +
            '</ul>' +
            '<blockquote class="block_left" style="margin: 5px;">' +
            '    <p class="explain" id="description"></p>' +
            '</blockquote>' +
            '<br>' +
            '<fieldset id="placement"></fieldset>' +
            '<fieldset id="config">' +
            '   <legend>Configurations</legend>' +
            '</fieldset>'
    };

    script = oIframe.document.createElement("script");
    script.type = "text/javascript";
    script.innerHTML =
        'TID = jQuery(\'a[href^="/admin/index.forum?tid="]\').attr("href").split("=")[1];' +
        'jQuery(function() {' +
        '   jQuery("#tabs ul").append(\'<li class="jsconfig"><a href="javascript:void(0);" onclick="showContent();"><span>Configure Scripts</span></a></li>\');' +
        '});' +
      'function showContent() {' +
        '   jQuery("#activetab").removeAttr("id");' +
        '   jQuery("li.jsconfig").attr("id", "activetab");' +
        '   jQuery("#wrapper").html(sContent.sHtml0);' +
        '   jQuery("#main-content").html(sContent.sHtml1);' +
        '   var whait_msg = jQuery("#load_list"),' +
        '      code_num = jQuery("#code_num");' +
        '   jQuery.ajax({' +
        '      url: "/admin/index.forum?part=modules&sub=html&mode=js&extended_admin=1&tid=" + TID,' +
        '      type: "get",' +
        '      async: true,' +
        '      dataType: "html",' +
        '      success: function (response, status, xhr) {' +
        '         if (xhr.status == 200) {' +
        '            var response = jQuery(response),' +
        '               oTarget = response.find("#listJs tbody:first tr"),' +
        '               ilen = oTarget.length,' +
        '               index = 0,' +
      '               count = ilen,' +
        '               last_update = response.find("#listJs tbody:first tr:first td:eq(2) > span").text(),' +
        '               saved_update = sessionStorage.getItem("listJs_update");' +
        '            if (saved_update == last_update) {' +
        '               jQuery("#listJs tbody").html(sessionStorage.getItem("listJs_html"));' +
        '               return false;' +
        '            }' +
        '            code_num.text(count);' +
        '            for (; index < ilen; index++) {' +
        '               var oThis = jQuery(oTarget[index]),' +
        '                  sHref = oThis.find(\'a[href^="/admin"]\').attr("href");' +
      '               (function(index, sHref) {' +
        '                  setTimeout(function() {' +
        '                     jQuery.ajax({' +
        '                        url: sHref,' +
        '                        type: "get",' +
        '                        async: true,' +
        '                        dataType: "html",' +
        '                        success: function (response, status, xhr) {' +
        '                           if (xhr.status == 200) {' +
        '                              var js_content = jQuery(response).find("#js_content").val(),' +
        '                                 aXML = /(?:<mod>([\\s\\S]*?)<[/]mod>)/.exec(js_content);' +
        '                              if (aXML !== null) {' +
        '                                 aXML = jQuery.parseXML(aXML[0]),' +
        '                                    tr =' +
        '                                    \'<tr>\' +' +
        '                                       \'<td class="row1">\' + jQuery(aXML).find("id").text() + \'</td>\' +' +
        '                                       \'<td class="row1">\' + jQuery(aXML).find("version").text() + \'</td>\' +' +
        '                                       \'<td class="row1 url_ltr">\' + jQuery(aXML).find("author").text() + \'</td>\' +' +
        '                                       \'<td align="center" class="row1">\' +' +
        '                                          \'<a href="javascript:void(0);" onClick="CP_AddOns_Edit(&quot;\' + encodeURIComponent(response) + \'&quot;);"><img title="" alt="" src="http://2img.net/i/fa/admin/icones/editer.png"></a>\' +' +
        '                                       \'</td>\' +' +
        '                                    \'</tr>\';' +
        '                                 jQuery("#listJs tbody").append(tr);' +
        '                              }' +
        '                           }' +
        '                        }' +
        '                     });' +
        '                     code_num.text(count--);' +
        '                  }, index * 200);' +
      '               }(index, sHref));' +
        '            }' +
      '            setTimeout(function() {' +
        '               if (jQuery("#listJs tbody tr").length == 1) {' +
        '                  whait_msg.find("li").text("There is no scripts compatible with the system or with the current version!");' +
      '                  sessionStorage.setItem("listJs_update", 0);' +
        '               } else {' +
      '                  whait_msg.hide();' +
        '                  sessionStorage.setItem("listJs_update", last_update);' +
        '                  sessionStorage.setItem("listJs_html", jQuery("#listJs tbody").html());' +
      '               }' +
      '            }, index * 300);' +
        '         }' +
        '      }' +
        '   });' +
      '}' +
        'function CP_AddOns_Edit(response) {' +
        '   jQuery("#main-content").html(sContent.sHtml2);' +
        '   response = jQuery(decodeURIComponent(response));' +
        '   var js_content = response.find("#js_content").val(),' +
        '      aXML = /(?:<mod>([\\s\\S]*?)<[/]mod>)/.exec(js_content);' +
        '   jQuery("#placement").html(response.find("#formenvoi fieldset").html());' +
        '   try {' +
        '      aXML = jQuery(jQuery.parseXML(aXML[0]));' +
      '      jQuery("#description").html(aXML.find("id").text() + "<br>Description: " + aXML.find("description").text());' +
        '      var oTarget = aXML.find("action");' +
        '      oTarget.each(function () {' +
        '         var oThis = jQuery(this),' +
        '            xVariable = oThis.find("variable").text();' +
        '         if (xVariable) {' +
        '            var patt = new RegExp("(?:" + xVariable + "\\\\s*=\\\\s*([\\\\s\\\\S]*?);)", "g");' +
        '            var xValue = patt.exec(js_content);' +
        '            if (xValue !== null) {' +
        //'               console.log("Variable: " + xVariable + "\\nValue: " + xValue[1]);' +
        '               var dl =' +
        '                  \'<dl><dt><label>\' + oThis.find("text").text() + \'</label></dt>\' +' +
        '                     \'<dd><input type="text" name="\' + xVariable + \'" data-last=\' + xValue[1] + \' size="\' + xValue[1].length + \'" maxlength="\' + (xValue[1].length * 2) + \'" value=\' + xValue[1] + \'> </dd>\' +' +
        '                  \'</dl>\';' +
        '               jQuery("#config").append(dl);' +
        '            }' +
        '         }' +
        '      });' +
        '      jQuery("#config").append(\'<div class="DIV_BTNS"><input id="js_save" type="submit" value="Save" name="submit" class="icon_ok"></div>\');' +
      '      $("#js_save").click(function() {' +
      '         var oTarget = jQuery("#config dl dd input"),' +
      '            ilen = oTarget.length,' +
      '            index = 0;' +
      '         for (; index < ilen; index++) {' +
      '            var oThis = jQuery(oTarget[index]),' +
      '               js_search = new RegExp("(" + oThis.attr("name") + "\\\\s*=\\\\s*)([\\\\u0022\\\\u0027]|)(?:[\\\\s\\\\S]*?)([\\\\u0022\\\\u0027]|);", "g");' +
      '               js_replace = oThis.val();' +
      '            js_content = js_content.replace(js_search, "$1$2" + js_replace + "$3;");' +
      '         }' +
      '         var oTarget = jQuery("#placement input[name=\'js_placement[]\']"),' +
      '            ilen = oTarget.length,' +
      '            index = 0,' +
      '            ID = response.find("#formenvoi input[name=\'page\']").val(),' +
      '            js_placement = [];' +
      '         for (; index < ilen; index++) {' +
      '            var oThis = jQuery(oTarget[index]);' +
      '            if (oThis.is(":checked")) {' +
      '               js_placement.push(oThis.val());' +
      '            }' +
      '         }' +
      '         jQuery.post("/admin/index.forum?part=modules&sub=html&mode=js_edit&id=" + ID + "&extended_admin=1&tid=" + TID, {' +
      '            title: jQuery("#placement input[name=\'title\']").val(),' +
      '            js_placement: js_placement,' +
      '            type: 0,' +
      '            page: ID,' +
      '            content: js_content,' +
      '            mode: "save",' +
      '            submit: 1' +
      '         }).done(function() {' +
      '            jQuery("#main-content").html(\'<div class="successbox"><center><h3>Information</h3></center><p>Your JavaScript code has been changed.<br><br><a href="javascript:void(0);" onclick="showContent();">Click here to go back to CP_AddOn.</a></p></div>\')' +
      '         }).fail(function() {' +
      '            jQuery("#main-content").html(\'<div class="errorbox"><center><h3>Error</h3></center><p>You must fill in the required fields.</p></div>\')' +
      '         });' +
      '      });' +
        '      if ($("#js_placement_all").is(":checked")) {' +
        '         $("#js_placement_index").attr({' +
        '            checked: false,' +
        '            disabled: true' +
        '         });' +
        '         $("#js_placement_portal").attr({' +
        '            checked: false,' +
        '            disabled: true' +
        '         });' +
        '         $("#js_placement_viewforum").attr({' +
        '            checked: false,' +
        '            disabled: true' +
        '         });' +
        '         $("#js_placement_viewtopic").attr({' +
        '            checked: false,' +
        '            disabled: true' +
        '         });' +
        '         $("#js_placement_gallery").attr({' +
        '            checked: false,' +
        '            disabled: true' +
        '         });' +
        '      }' +
        '      $("#js_placement_all").click(function() {' +
        '         if ($(this).is(":checked")) {' +
        '            $("#js_placement_index").attr({' +
        '               checked: false,' +
        '               disabled: true' +
        '            });' +
        '            $("#js_placement_portal").attr({' +
        '               checked: false,' +
        '               disabled: true' +
        '            });' +
        '            $("#js_placement_viewforum").attr({' +
        '               checked: false,' +
        '               disabled: true' +
        '            });' +
        '            $("#js_placement_viewtopic").attr({' +
        '               checked: false,' +
        '               disabled: true' +
        '            });' +
        '            $("#js_placement_gallery").attr({' +
        '               checked: false,' +
        '               disabled: true' +
        '            });' +
        '         } else {' +
        '            $("#js_placement_index").attr("disabled", false);' +
        '            $("#js_placement_portal").attr("disabled", false);' +
        '            $("#js_placement_viewforum").attr("disabled", false);' +
        '            $("#js_placement_viewtopic").attr("disabled", false);' +
        '            $("#js_placement_gallery").attr("disabled", false);' +
        '         }' +
        '      });' +
        '   } catch (e) {' +
        '      console.log(e);' +
        '   }' +
        '}';
    oIframe.document.getElementsByTagName("head")[0].appendChild(script);
};


Simply create a new JavaScript with placement on all pages, so the control panel link will be intercepted and thus the code goes into action on the panel!

---

Module: Installer scripts!

This module aims to automate the process of manually add scripts in JavaScript section !!!
You can install a .zip file downloaded on the local computer and my code extracts the zip content and install according to the instructions in it!
In this way the script is automatically created in the JavaScript section, with the name and placement already set the installer file.

The installer XML that is inside the zip will support search and replace, search and add after or before in templates, thus eliminates the manual editing of them!

Well that's it and those who wish and be able to contribute more ideas and code to further implement the project, feel free to help.

---

If you wish to see a code compatible with this system, add the code below with placement on all pages:

Code:


/**
 * @CP_AddOn Addons for the Forumotion control panel
 * @copyright Copyright (C) 2014 JScript
 * @license http://www.gnu.org/licenses/gpl.html GPL version 2 or higher
 * @engine 1.0b
 * @notes If your forum does not have the "CP_AddOn" module, you can manually change the variables values!

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<mod>
   <header>
      <id>WhereIam</id>
      <title>Where I am?, Topic Active Users (Who is read this topic?)!</title>
      <version>1.10302014</version>
      <description>Shows the exact location where the user is currently!</description>
      <author>JScript</author>
      <author-notes>First Release (Beta tester only)!</author-notes>
      <license>GNU General Public License v2</license>
      <mod-version>1.0.0.9</mod-version>
   </header>
   <configuration>
      <level>Easy</level>
      <time>1 minute</time>
      <target-version>1.0b</target-version>
      <action type="input">
         <text>Users label:</text>
         <variable>topic_total_users</variable>
      </action>
      <action type="input">
         <text>Members label:</text>
         <variable>topic_total_members</variable>
      </action>
      <action type="input">
         <text>Guest label:</text>
         <variable>topic_total_visit</variable>
      </action>
      <action type="input">
         <text>Anonimous label:</text>
         <variable>topic_total_anoni</variable>
      </action>
      <action type="input">
         <text>Location label:</text>
         <variable>find_user_location</variable>
      </action>
      <action type="input">
         <text>Has portal?:</text>
         <variable>has_portal</variable>
      </action>
   </configuration>
</mod>
*/
// User variables **************************************************************************************
// #### If your forum does not have the "CP_AddOn" module, you can manually change the values. ####
topic_total_users = 'user(s) are reading this topic';
topic_total_members = 'members';
topic_total_visit = 'guests and';
topic_total_anoni = 'anonymous users';
find_user_location = "Getting the user's location, wait...";
has_portal = 1; // #### If your forum does not have a "Portal", change the value to 0! ####
// ******************************************************************************************************

// System variables!
USERNAME = '';
USER_ID = 0;
//USERAVATAR = '';
SUPERMOD = 0;
TID = 0;
ACTION = 'add_field'; // 'configuration';
//
jQuery(function() {
    if (location.pathname.indexOf('/u') !== -1) {
        jQuery('dt:contains("WhereIam")').closest('dl').remove();
    } else if (location.pathname.indexOf('editprofile' !== -1)) {
      jQuery('label:contains("WhereIam"), span:contains("WhereIam"), dt:contains("WhereIam")').closest('dl, tr').remove();
    }
    if (_userdata.session_logged_in) {
        USERNAME = _userdata.username;
        USER_ID = _userdata.user_id;
        // USERAVATAR = jQuery(_userdata.avatar).attr('src');
        SUPERMOD = _userdata.user_level; // Is Admin/Mod ?
        TID = jQuery('a[href*="tid="]').attr('href').split('tid=')[1].split('&')[0]; //Get the var {TID}
    }
    // console.clear();
    console.log("/**************************************************************************");
    console.log("* Module: 'Where I am?' and 'Topic Active Users (Who is read this topic?)'!");
    console.log("* Description: Shows the exact location where the user is currently.");
    console.log("* Author: Made and Optimizations by JScript - 2013/07/12, 2014/10/13");
    console.log("* Version: First Release (Beta tester only)!");
    console.log("/**************************************************************************");
    console.log('USERNAME: ' + USERNAME);
    console.log("USER_ID: " + USER_ID);
    console.log("TID: " + TID);

    var oWereIam = {
        pathname: location.pathname,
        total_users: 0,
        oSubForum: '',
        oTarget: 0,
      sIndex: '/forum',
        oHtml: {
         phpbb2: '<!-- ACTIVE USERS -->' +
            '<tr>' +
            '    <td colspan="2" style="margin:0; padding: 0;">' +
            '        <table width="100%" cellspacing="0" cellpadding="0" border="0">' +
            '            <tbody>' +
            '                <tr>' +
            '                    <td id="user-stats" class="gensmall" width="75%" valign="top" style="padding: 0px 10px 0.6em;">' +
            '                    </td>' +
            '                </tr>' +
            '            </tbody>' +
            '        </table>' +
            '    </td>' +
            '</tr>',
         phpbb3: '#### Has a very bad structure that becomes hard to define the html! ####',
            punbb: '<!-- ACTIVE USERS -->' +
                '<div class="main" id="active_users">' +
                '   <div class="main-content">' +
                '      <div id="user-stats"  style="padding: 0.6em 1em;">' +
                '      </div>' +
                '   </div>' +
                '</div>',
         invision: '<!-- ACTIVE USERS -->' +
            '<div class="borderwrap" id="active_users" style="margin-bottom: 5px;">' +
            '    <div class="bar clearfix">' +
            '        <div class="left rtl-inversion-left" id="user-stats">' +
            '        </div>' +
            '    </div>' +
            '</div>',
         content: '<!-- CONTENT -->' +
                '<h4><strong><span id="topic_total_users">0</span> ' + topic_total_users + '</strong></h4>' +
                '<p class="statistics_brief desc">' +
                '   <span id="topic_total_members">0</span> ' + topic_total_members + ', ' +
                '   <span id="topic_total_visit">0</span> ' + topic_total_visit + ' ' +
                '   <span id="topic_total_anoni">0</span> ' + topic_total_anoni +
                '</p><br>' +
                '<ul id="topic_list_users" class="ipsList_inline" style="padding-left: 0px ! important;"></ul>'
        }
    };

    if (_userdata.session_logged_in) {
        WhereIam() // Where I am?
    }

    if (oWereIam.pathname.indexOf('/t') !== -1) {
      /* Forum versions! */
      var phpBB2 = jQuery('#content-container table.forumline:last tbody > tr:eq(1)');
      var phpBB3 = jQuery('#main-content > div.h3:last');
      var punbb = jQuery('#pun-info');
      var invision = jQuery('#main-content .borderwrap:last');

      if (phpBB2.length) {
         jQuery(oWereIam.oHtml.phpbb2).insertBefore(phpBB2);
      } else if(phpBB3.length) {
         jQuery(oWereIam.oHtml.punbb).insertBefore(phpBB3);
      } else if(punbb.length) {
         jQuery(oWereIam.oHtml.punbb).insertBefore(punbb);
      } else if(invision.length) {
         jQuery(oWereIam.oHtml.invision).insertBefore(invision);
      };
      jQuery('#user-stats').html(oWereIam.oHtml.content);

      if (!has_portal) oWereIam.sIndex = '/';

        oWereIam.oSubForum = jQuery('.pun-crumbs.noprint a.nav[href^="/f"], #navstrip a.nav[href^="/f"], .pathname-box:first a.nav[href^="/f"], span.nav a.nav[href^="/f"]').attr('href');
        try {
            jQuery.get(oWereIam.oSubForum, function(data) {
            oWereIam.oTarget = jQuery('#stats > a, #info_open td[colspan="2"]:not(.catBottom) .gensmall a, #main-content > a[href^="/u"], .activeusers-box .row1 a', data);

            }).always(function() {
                if (oWereIam.oTarget.length !== 0) {
                    var guest = Math.floor(Math.random() * (5 - 0));
                    jQuery('#topic_total_visit').text(guest);
                    searchActiveUsers(oWereIam.oTarget, 0, oWereIam.oTarget.length, 0, guest);
                }
            });
        } catch (e) {
         // console.log(e);
        }
    }

    function searchActiveUsers(oTarget, start, len, index, guest) {
        if (index > 10) {
            return false
        }
        var oThis = jQuery(oTarget[index]),
            sHref = oThis.attr('href'),
            $JScript;

        if ((sHref !== undefined) || (sHref.length !== 0)) {
            var user_name = '<a href="' + sHref + '">' + oThis.html() + '</a>';

            jQuery.get(sHref, function(data) {
                var Field_Text = jQuery('dt:contains("WhereIam")', data).closest('dl').find('div.field_uneditable').text();

                try {
                    $JScript = JSON.parse(Field_Text.replace(/'/g, '"'));
                } catch (e) {
                    // console.log(e);
                }
                console.log(Field_Text);
            }).always(function() {
                try {
                    if ($JScript.path.url == oWereIam.pathname) {
                        if (oWereIam.total_users == 0) {
                            $('#topic_list_users').html('');
                            $('#topic_list_users').append(user_name);
                        } else {
                            $('#topic_list_users').append(', ' + user_name);
                        }
                        oWereIam.total_users++;
                        $('#topic_total_users').text(oWereIam.total_users + guest);
                        $('#topic_total_members').text(oWereIam.total_users);
                    }
                } catch (e) {
                    // console.log(e);
                }
                index++;
                try {
                    searchActiveUsers(oTarget, start, len, index, guest);
                } catch (e) {
                    // console.log(e);
                }
            });
        }
    }
});

function WhereIam() {
    jQuery.ajaxSetup({
        async: false
    });
    jQuery.get('/profile?mode=editprofile', function(data) {
        var found = 1;
      var Profile_Field_ID = jQuery('label:contains("WhereIam"), span:contains("WhereIam"), dt:contains("WhereIam")', data).closest('dl, tr').find('textarea').attr('id');

        console.log("Profile_Field_ID: " + Profile_Field_ID);

        if ((Profile_Field_ID == undefined) && (SUPERMOD == 1)) {
            jQuery.post("/admin/index.forum?part=users_groups&sub=users&mode=avatar_profil2&extended_admin=1&tid=" + TID, { /* <- Parameters! */
                /* Post action */
                action: ACTION,
                id: 0,
                type: 0,
                action: 'configuration_final',
                list_type_field: 2,
                field_name: 'WhereIam',
                field_desc: 'Where I am? - Made and Optimizations by JScript - 2013/07/12, 2014/10/13',
                field_oblig: 0,
                field_display_profil: 1,
                list_field_type_view: 0,
                list_auth_field_modo: 1,
                list_auth_field_himself: 1,
                list_field_view: -1,
                list_separator: 0,
                field_type_2_lng_max: 15000,
                submit: 1,
                field_type_11_max_before: 14,
                field_type_11_max_after: 6
            }).done(function() {
                console.log('Add profile field done!');
                jQuery.get('/profile?mode=editprofile', function(data) {
                    Profile_Field_ID = jQuery('label:contains("WhereIam"), span:contains("WhereIam"), dt:contains("WhereIam")', data).closest('dl, tr').find('textarea').attr('id');
                }).fail(function() {
                    console.log('Failed to get field Profile_Field_ID!');
                    found = 0;
                });
            }).fail(function() {
                console.log('Add profile field Fail!');
                found = 0;
            });
        }
        if (found) {
            var sTitle = jQuery('.pun-crumbs:first p strong:last').text();
            if ((sTitle == 'undefined') || (sTitle == '')) sTitle = location.pathname;

            var now = new Date;
            var $JScript = {
                appInfo: {
                    module: 'Where I am?',
                    description: 'Shows the exact location where the user is currently.',
                    author: 'JScript',
                    version: '1.00',
                    release: '2014/10/13'
                },
                userInfo: {
                    oscpu: navigator.oscpu,
                    appName: navigator.appName,
                    language: navigator.language,
                    userAgent: navigator.userAgent
                },
                path: {
                    title: sTitle,
                    url: location.pathname,
                    param: location.search,
                    state: '0',
                    time: now.getHours() + ":" + now.getMinutes(),
                    date: now.getDate() + "/" + now.getMonth() + "/" + now.getFullYear()
                }
            };

            jQuery.post("/ajax_profile.forum?jsoncallback=?", {
                id: Profile_Field_ID.substring(16, Profile_Field_ID.length),
                user: USER_ID,
                active: "1",
                content: '[["' + Profile_Field_ID + '", "' + JSON.stringify($JScript).replace(/"/g, "'") + '"]]',
                tid: TID
            }, function(data) {
                console.log("OK: ajax_profile, userID = " + USER_ID);
            }, "json").fail(function() {
                console.log("error: ajax_profile, userID = " + USER_ID);
            });
        }
    }).done(function() {
        // Done!!!
    }).fail(function() {
        console.log('Failed to get field Profile_Field_ID');
    });
    jQuery.ajaxSetup({
        async: true
    });
}


This code shows you who is reading a topic!

JS

If you wish to submit a tutorial, read this thread: https://help.forumotion.com/t61209-how-to-submit-a-tutorial

Ramdaman wrote:If you wish to submit a tutorial, read this thread: https://help.forumotion.com/t61209-how-to-submit-a-tutorial

I've noticed that you have not read the topic from the title!

This is not a tutorial, but a project that still will become a tutorial.

JS

That was the first thing I read. However, this is a step by step process on how to install a JavaScript to modify your ACP, otherwise known as a tutorial.

Alright buddy, I've seen that you could not understand the magnitude of the project!

Do what you want with this topic and thank you for your attention,

JS

No, I do see the magnitude thereof. I like it too, as I've added it on my forum.

This project will open a lot of opportunities for the Forumotion developers, with this we will able to develop a lot of new codes with amazing purposes.

We can do new skins to the admin panel, auto install scripts, change user infos without going to the panel, i can't imagine how much things we can do o.O

That's amazing, congratulations for you dear JScript, this will be a great project, as always...

Best regards;

This is indeed a really good proposal. If this get's through i would love to test it. Although i do not want to give it a try now as i am quite worried that after i see the result i will want it on my board also. So i will be waiting for this tutorial to go in the list of tutorials and grab it and place it on my board.

JScript i love the fabulous ideas you come up with. Never give it up man! great job!

Thanks for this topic. If by somehow i can help i would be glad to do it..

Hello all,
Jscript keep good working man. It seems its a great project.

Thanks to all the for beautiful encouraging words!

MrMind wrote:If by somehow i can help i would be glad to do it..

With what you wish to contribute, either with codes, with translations of the documentation that I'll post...

This project will be very similar to this: https://www.phpbb.com/mods/

JS

I do not believe we are allowed to modify the administration panel.  We should wait until Buttercup replies.

SLGray wrote:I do not believe we are allowed to modify the administration panel.  We should wait until Buttercup replies.

But I do not modified in their structure itself!

I just added one more item in which will help everyone, especially those who know nothing about scripts!

Since my code or any other non interfere with the functional structure of the control panel!
Would be tantamount to prohibit this my other code that adds the avatar and the complete edition of messages on the ChatBox, including deleting messages, something that does not exist in the original chatbox's code.

For those who do not believe in the imagem above, try adding the code below with placement in the index and will be pleased to have the avatar and edit your own posts in ChatBox:

Spoiler:

I think you should re-read the topic to understand this...

Hopefully Buttercup read and understand the magnitude of the project which in no way interferes with the control panel itself.

JS

I think it's fine. He's using an Iframe to inject new content into the document. It's a good idea, since you cannot directly add new content to the AP unless you're using an addon for your browser.

It looks interesting, when I get time I'll test it out.

Keep it up.

It doesn't work, it adds the page but the options do nothing.

@Ange Tuteur
Thank you!!!

Ramdaman wrote:It doesn't work, it adds the page but the options do nothing.

Show me the possible error in your browser console! What browser do you use?

You added the code of tests?


Thanks for your replies!

JS

it worked for me

Hello,
Is there a way to have an auto-login function in this chatbox?

APE wrote:it worked for me

Thanks for your feedback!

Black-Shadow wrote:Hello,
Is there a way to have an auto-login function in this chatbox?

Are you referring to what I posted in this link: https://help.forumotion.com/t137122-project-cp_addon-configure-scripts#925984 ???
I think so, in this case the topic here is not to request for help! I made it clear when I created the topic!

Open a topic in the correct area and you will have your answers ok?

JS

Hello JScript! Its nice to see you active here in English Forumotion Support. Your contribution in bringing IPB stuffs and features on forumotion makes me recognize you before. I don't know if you still remember me... but anyway, keep up the good work. Your own way of improvising these codes and making it possible here in FM really amaze me. I'll support your projects 'til its completion. 

@Mark
Hello, I remember you yeah! Thank you for your encouraging words,

---

I made an alteration in the reading of the code list, is now faster and even then we do not have the "Request Limit"!

Link: https://help.forumotion.com/t137122-project-cp_addon-configure-scripts

JS

Hello,
Thats good Jscript if it doesn't reaches the request limit.

This looks wonderful!
I added the code given in the first post (at the end) and the script is working for me!  (though even when I'm visiting the topic it says 0 reading, which is kinda awkward)

I don't understand how I get the new looking control panel thing though, do I need to add something in my templates?
Would like to know.

You add the current JavaScript code released for testing.

When I tested it, it took sometime for the new tab to appear.

SLGray wrote:When I tested it, it took sometime for the new tab to appear.

Hello, this is due to the fact that my code works only when the ACP is fully loaded!

JS

Even when the page was fully loaded, it took awhile to appear.

@SLGray
But you refer to tab or the code list?

The tab appears for me almost instantaneously, less than 1 second!

Ok, in this case, let me know a few things:

1- Browser including the version;
2- operating system used;
3- speed of your connection.

Thanks for the information,

JS

1.  Firefox 34.0
2.  Windows XP
3.  Downstream:  512   Upstream:  252

My analysis:

SLGray wrote:1. Firefox 34.0 <- Ok, so is Irrelevant!
2. Windows XP <- Old, but ok and irrelevant
3. Downstream: 512 <- Good, but relevant in this case!

Upstream: 252 [b]<- Irelevant in this case.

My is:

1- Firefox 33.1.1
2- Windows 8.1 Pro
3- Downstream: 17663 kbps

So I think that is your Downstream.

But tell me if it takes more than 2 seconds ok?

Thanks again,

JS

The longest was one minute.

SLGray wrote:The longest was one minute.

Wow!!!
But you refer to tab or the code list?

Could you give me the browser console log?

JS