User:Subh83/JavaScriptTools/utilsMenu.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/****************************************************
* Created by Subhrajit Bhattacharya [[User:Subh83]] *
* Licensed under GNU-GPL v3.0                       *
*****************************************************/
var UserSubh83_utilsMenu = true;

if (typeof(FloatingMenusStyleFile)=='undefined') var FloatingMenusStyleFile = "User:Subh83/JavaScriptTools/Menus.css";

if (typeof(UserSubh83_utilsDOMdynamics)=='undefined') importScript("User:Subh83/JavaScriptTools/utilsDOMdynamics.js");

// Include the style sheet
if (typeof(UserSubh83_MenuStylesheetIncluded)=='undefined'){
    var floatingmenusylefile = document.createElement("link");
    floatingmenusylefile.setAttribute("rel", "stylesheet");
    floatingmenusylefile.setAttribute("type", "text/css");
    floatingmenusylefile.setAttribute("href", (wgServer+wgScript)+"?action=raw&ctype=text/css&title="+FloatingMenusStyleFile);
    if (typeof(floatingmenusylefile)!='undefined')
        document.getElementsByTagName("head")[0].appendChild(floatingmenusylefile);
    UserSubh83_MenuStylesheetIncluded = true;
}

// ================================================================
/*** Pop-up utils ***/

function ShowHTMLinPopup(theHTML) {
    var popwindow = window.open('','popwindow','height=200,width=150');
    var popdoc = popwindow.document;
    popdoc.write(theHTML);
    popdoc.close();
}

// ================================================================
/*** CSS floating menu utils ***/

function CreateFloatingMovableMenuFromList(wikitext, params) {
    var wikitext = wikitext.replace(/[\n\r]+/g, "\n");
    var menuHeadings = wikitext.match(/\n+\s*=\s*.*?\s*=\s*\n+/g);
    var menuContents = wikitext.split(/\n+\s*=\s*.*?\s*=\s*\n+/g);

    var menuHeadingsTexts = new Array();
    var menuHeadingsItems = new Array();
    var MenuGroups = new Array();
    for (var i=0; i<menuHeadings.length; i++) {
        menuHeadingsTexts[i] = menuHeadings[i].replace(/\s*=\s*/g, "");
        menuHeadingsItems[i] = params.divID+"_sub"+i + " ("+menuHeadingsTexts[i]+")";
        MenuGroups[i] = new Array();
        MenuGroups[i] = menuContents[i+1].split(/\s*\n\s*/);
    }

    var retElems = new Array();
    // Create main panel
    retElems[0] = CreateFloatingPanel(params.divID, menuHeadingsItems, params.title, "ToggleElementDisplay", "floatingpanel", "block");
    var mainPanel = document.getElementById(params.divID);
    // Create sub-menus
    for (var k=menuHeadingsItems.length-1; k>=0; k--) {
        retElems[menuHeadingsItems.length-k] = CreateFloatingPanel(params.divID+"_sub"+k, MenuGroups[k], menuHeadingsTexts[k], 
                                                   params.itemClickHandler, "floatingmenu", 
                                                       "none", {x: ((mainPanel.offsetWidth)+'px'), y: ((10+k*50)+'px')} );
    }

    for (var k=0; k<menuHeadingsItems.length; k++) {
        retElems[k+1].onmouseover = function() { this.style.zIndex = 10001; };
        retElems[k+1].onmouseout = function() { this.style.zIndex = 10000; };
    }

    return retElems;
}

function CreateFloatingPanel(divID, itemgroups, panelheading, itemClickCallbackS, styleclass, disp, pos) {
    // Creates a floating panel with linked items. The items are given IDs divID+'_item'+i
    if (typeof(styleclass)=='undefined') styleclass="floatingpanel";
    if (typeof(disp)=='undefined') disp = "none";
    if (typeof(pos)=='undefined') pos = {x: '0px', y: '0px'};

    // Create div
    var floatingpanel = document.createElement("div");
    floatingpanel.setAttribute("id", divID);
    var theBody = document.getElementsByTagName("body")[0];
    theBody.insertBefore(floatingpanel, theBody.childNodes[0]);

    // Add content
    var theHTML = "<div class=\""+styleclass+"\" >";
    // top bar
    theHTML += "<div class=\"topbar\" " + 
               "onMouseDown=\"MenuDragDrop.divid='"+divID+"'; this.style.cursor='move';\" " + 
               "onMouseUp=\"MenuDragDrop.divid=''; this.style.cursor='auto';\">" + 
               "[<a href=\"javascript:void(0);\" onClick=\"document.getElementById('"+divID+"').style.display='none';\"> X </a>] " + 
               "[<a href=\"javascript:void(0);\" onClick=\"dis=ToggleElementDisplay('"+divID+"_itemS'); this.innerHTML=[' ↓ ',' ↑ '][dis];\"> ↑ </a>] " + 
               "<span class=\"panelheading\">"+panelheading+"</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>";

    // Add items
    theHTML += "<div id=\""+divID+"_itemS\"\>";
    for (var i=0; i<itemgroups.length; i++) {
        theHTML += "<div class=\"itemgroup\">";

        if (itemgroups[i]=="----") {
            theHTML += "<hr/></div>";
            continue;
        }
        else if (itemgroups[i]=="") {
            theHTML += "</div>";
            continue;
        } 
        else {
            items = itemgroups[i].split(/\s+\|\|\s+/);
            for (var j=0; j<items.length; j++) {
                itemtext = items[j].match(/\s+\(.*?\)/);
                if (itemtext) itemtext=itemtext[0].replace(/[()]/g, "");
                else itemtext=items[j];
                itemval = items[j].match(/^[^()]*/)[0];
                itemval = itemval.replace(/'/g, "\\'").replace(/"/g, "\\\"").replace(/^\s*|\s*$/g, "");
                theHTML += "<div class=\"item\"><a href=\"javascript:void(0);\" onClick=\""+itemClickCallbackS+"('"+itemval+"');\">"+itemtext+"</a></div>";
            }
        }

        theHTML += "</div>";
    }

    theHTML += "</div></div>";
    floatingpanel.innerHTML = theHTML;
    floatingpanel.style.display = disp;

    // Positioning and floating properties
    floatingpanel.style.position = "fixed";
    floatingpanel.style.left = pos.x;
    floatingpanel.style.pixelLeft = pos.x;
    floatingpanel.style.top = pos.y;
    floatingpanel.style.pixelTop = pos.y;
    floatingpanel.style.zIndex = "10000";

    return floatingpanel;
}

// Drag-drop helper function
var MenuDragDrop = { divid: "", 
                     xStartMouse: -1, yStartMouse: -1,
                     xStartDiv: -1, yStartDiv: -1 };
function OnMouseMoveOnDocumentForMenu(e) {
    if (MenuDragDrop.divid != "") {
        var theDiv = document.getElementById(MenuDragDrop.divid);
        if (MenuDragDrop.xStartMouse >= 0 && MenuDragDrop.yStartMouse >= 0) {
            theDiv.style.left = (MenuDragDrop.xStartDiv + parseInt(e.screenX) - MenuDragDrop.xStartMouse) + 'px';
            theDiv.style.pixelLeft = theDiv.style.left;
            theDiv.style.top = (MenuDragDrop.yStartDiv + parseInt(e.screenY) - MenuDragDrop.yStartMouse) + 'px';
            theDiv.style.pixelTop = theDiv.style.top;
        }
        else {
            MenuDragDrop.xStartMouse = parseInt(e.screenX);
            MenuDragDrop.yStartMouse = parseInt(e.screenY);
            MenuDragDrop.xStartDiv = parseInt( theDiv.style.left ? theDiv.style.left : theDiv.style.pixelLeft );
            MenuDragDrop.yStartDiv = parseInt( theDiv.style.top ? theDiv.style.top : theDiv.style.pixelTop );
        }
    }
    else {
        MenuDragDrop.xStartMouse = -1;
        MenuDragDrop.yStartMouse = -1;
    }
}

$( function () {
    AppendHandlerToEvent( "document.onmousemove", OnMouseMoveOnDocumentForMenu );
});