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