1/* class2context.js
  2creator: Arnau
  3July 2016
  4version: v0.1
  5
  6
  7usage:
  8class2context(
  9  'className',
 10  "title",
 11  [["option1", "functionoption1()"], ["option 2","functionoption2()"]]
 12);
 13*/
 14
 15/* testing this, not necessary
 16$( document ).ready(function() {
 17    $(document).on('contextmenu', function (e) {
 18        //e.preventDefault();
 19        ContextMenus();
 20    });
 21});*/
 22
 23
 24/* MUTATION OBSERVER
 25--detect changes in dom, and re-asign context menus*/
 26// select the target node //MUTATION DOM
 27var target = document.body;
 28var mutNum=0;
 29var observer = new MutationObserver(function(mutations) {
 30	console.log("class2context.js: mutation of dom, num." + mutNum);
 31	mutNum++;
 32    ContextMenus();
 33});
 34// configuration of the observer:
 35var config = { attributes: true, childList: true, characterData: true };
 36// pass in the target node, as well as the observer options
 37observer.observe(target, config);
 38/* </MUTATION OBSERVER */
 39
 40
 41//creates the div where the context menus will place
 42document.body.innerHTML+="<div id='contextMenus'></div>";
 43//
 44
 45function class2context(classgiv, title, options){
 46    classgiv=JSON.parse(JSON.stringify(classgiv));
 47    if(document.getElementById("context"+classgiv))
 48    {
 49        //toastr.success("alreadyExist");
 50    }else{
 51        var aux="";
 52        aux+="<div id='context"+classgiv+"' class='contextMenu'>";
 53        aux+="  <ul class='c2c-dropdown c2c-border' style='display:block;position:static;margin-bottom:5px;'>";
 54        aux+="<div class='contextTitle'>" + title + "</div>";
 55        for(var i=0; i<options.length; i++)
 56        {
 57            //aux+="    <a onmousedown='"+options[i][1]+";' href='javascript:void(0);'>"+options[i][0]+"</a>";
 58            aux+="    <a onmousedown='"+options[i][1]+"; ContextMenus();' href='javascript:void(0);'>"+options[i][0]+"</a>";
 59
 60        }
 61        aux+="  </ul>";
 62        aux+="</div>";
 63        document.getElementById('contextMenus').innerHTML+=aux; //adds the div context menu into the context menus div place
 64    }
 65
 66    for(var i=0; i<document.getElementsByClassName(classgiv).length; i++)
 67    {
 68        classgiv=JSON.parse(JSON.stringify(classgiv));
 69        //toastr.info(document.getElementsByClassName(classgiv)[i].oncontextmenu);
 70        document.getElementsByClassName(classgiv)[i].addEventListener("contextmenu", function(e){
 71            // Avoid the real one
 72            e.preventDefault();
 73            e.stopPropagation();
 74            setTimeout(function(){
 75                //classaux=this.className.split(" ")[0];
 76                document.getElementById('context'+classgiv).style.display='block';
 77                document.getElementById('context'+classgiv).style.left=e.pageX + "px";
 78                document.getElementById('context'+classgiv).style.top=e.pageY + "px";
 79            }, 150);
 80        });
 81
 82        /*document.getElementsByClassName(classgiv)[i].oncontextmenu+= function(e){
 83            // Avoid the real one
 84            e.preventDefault();
 85            setTimeout(function(){
 86                //classaux=this.className.split(" ")[0];
 87                document.getElementById('context'+classgiv).style.display='block';
 88                document.getElementById('context'+classgiv).style.left=e.pageX + "px";
 89                document.getElementById('context'+classgiv).style.top=e.pageY + "px";
 90            }, 150);
 91        };*/
 92    }
 93
 94    document.body.addEventListener("mousedown", function(e){
 95        // Avoid the real one
 96        //e.preventDefault();
 97        if(document.getElementById('context'+classgiv))
 98        {
 99            setTimeout(function(){
100                document.getElementById('context'+classgiv).style.display='none';
101            }, 70);
102            //ContextMenus();
103
104        }
105        return false;
106    }, false);
107
108}