User:Subh83/JavaScriptTools/utilsMenu.js

/****************************************************
* 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 );
});

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.