arnaucube/class2context
1
0
Fork 0
mirror of https://github.com/arnaucube/class2context.git synced 2026-02-07 19:26:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
arnaucode
2017-04-17 21:54:47 +02:00
parent af171bf75f
commit cbc1a7d10c
24 changed files with 226 additions and 10043 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
demo/class2context.css Executable file
View File

@@ -0,0 +1,40 @@
.c2c-dropdown{
}
.c2c-dropdown{
display:block;
z-index:10000;
border-radius: 7px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
cursor:auto;
color:#000;
background-color:#fff;
display:none;
position:absolute;
min-width:160px;
margin:0;
padding:0
}
.c2c-dropdown a{
padding:6px 16px;
display:block;
text-decoration: none;
color: #000000;
font-size: 14px;
}
.c2c-dropdown a:hover{
background-color:#ccc
}
.c2c-border{border:1px solid #ccc!important}
.contextMenu {
position: absolute;
display:none;
z-index: 10000;
}
.contextTitle{
padding:6px 16px;
font-weight: bold;
color: #5E5E5E;
}

119
demo/class2context.js Executable file
View File

@@ -0,0 +1,119 @@
/* class2context.js
creator: Arnau
July 2016
version: v0.1
usage:
class2context(
'className',
"title",
[["option1", "functionoption1()"], ["option 2","functionoption2()"]]
);
*/
/* testing this, not necessary */
var cmCallNum=0;
$( document ).ready(function() {
$(document).on('contextmenu', function (e) {
//e.preventDefault();
/*//testing only
console.log('ContextMenus() called, num.' + cmCallNum);
cmCallNum++;*/
ContextMenus();
});
$(document).on('click', function (e) {
//e.preventDefault();
/*//testing only
console.log('ContextMenus() called, num.' + cmCallNum);
cmCallNum++;*/
ContextMenus();
});
});
/* MUTATION OBSERVER
--detect changes in dom, and re-asign context menus*/
// select the target node //MUTATION DOM
var target = document.body;
var mutNum=0;
var observer = new MutationObserver(function(mutations) {
console.log("class2context.js: mutation of dom, num." + mutNum);
mutNum++;
ContextMenus();
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
/* </MUTATION OBSERVER */
//creates the div where the context menus will place
document.body.innerHTML+="<div id='contextMenus'></div>";
//
function class2context(classgiv, title, options){
classgiv=JSON.parse(JSON.stringify(classgiv));
if(document.getElementById("context"+classgiv))
{
//toastr.success("alreadyExist");
}else{
var aux="";
aux+="<div id='context"+classgiv+"' class='contextMenu'>";
aux+=" <ul class='c2c-dropdown c2c-border' style='display:block;position:static;margin-bottom:5px;'>";
aux+="<div class='contextTitle'>" + title + "</div>";
for(var i=0; i<options.length; i++)
{
//aux+=" <a onmousedown='"+options[i][1]+";' href='javascript:void(0);'>"+options[i][0]+"</a>";
aux+=" <a onmousedown='"+options[i][1]+"; ContextMenus();' href='javascript:void(0);'>"+options[i][0]+"</a>";
}
aux+=" </ul>";
aux+="</div>";
document.getElementById('contextMenus').innerHTML+=aux; //adds the div context menu into the context menus div place
}
for(var i=0; i<document.getElementsByClassName(classgiv).length; i++)
{
classgiv=JSON.parse(JSON.stringify(classgiv));
//toastr.info(document.getElementsByClassName(classgiv)[i].oncontextmenu);
document.getElementsByClassName(classgiv)[i].addEventListener("contextmenu", function(e){
// Avoid the real one
e.preventDefault();
e.stopPropagation();
setTimeout(function(){
//classaux=this.className.split(" ")[0];
document.getElementById('context'+classgiv).style.display='block';
document.getElementById('context'+classgiv).style.left=e.pageX + "px";
document.getElementById('context'+classgiv).style.top=e.pageY + "px";
}, 150);
});
/*document.getElementsByClassName(classgiv)[i].oncontextmenu+= function(e){
// Avoid the real one
e.preventDefault();
setTimeout(function(){
//classaux=this.className.split(" ")[0];
document.getElementById('context'+classgiv).style.display='block';
document.getElementById('context'+classgiv).style.left=e.pageX + "px";
document.getElementById('context'+classgiv).style.top=e.pageY + "px";
}, 150);
};*/
}
document.body.addEventListener("mousedown", function(e){
// Avoid the real one
//e.preventDefault();
if(document.getElementById('context'+classgiv))
{
setTimeout(function(){
document.getElementById('context'+classgiv).style.display='none';
}, 70);
//ContextMenus();
}
return false;
}, false);
}

BIN
demo/class2context.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

194
demo/index.html Executable file
View File

@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
<title>demo class2context.js</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="shortcut icon" href="class2context.png">
<link rel='StyleSheet' type='text/css' href='class2context.css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body{
font-family: 'Roboto', sans-serif;
/*font-size: 48px;*/
}
.box1{
width: 200px;
height: 300px;
margin: 15px;
display: inline-block;
/*border: 2px solid #000000;*/
border-radius: 5px;
text-align: left;
vertical-align: middle;
padding: 20px;
}
.box1:hover{
box-shadow: 0 5px 10px #BEF7F2;
}
.box2{
width: 600px;
min-height: 300px;
margin: 15px;
margin-left:auto;
margin-right: auto;
display: block;
border-radius: 5px;
text-align: left;
vertical-align: middle;
padding: 20px;
}
.box3{
width: 600px;
margin: 15px;
margin-left:auto;
margin-right: auto;
display: block;
border-radius: 5px;
text-align: left;
vertical-align: middle;
padding: 20px;
}
.centralBox{
text-align: center;
width: 100%;
margin: 0 auto;
}
.codeFont{
color: #DAE8E8;
}
.heightMainBox{
height: 200px;
}
.mainimg{
width: 100px;
display: inline-block;
transition: all .5s;
top:0;
vertical-align:top;
}
.mainimg:hover{
width:150px;
transition: all .2s;
}
</style>
</head>
<body onload="">
<div class='container'>
<div class="classHeader centralBox">
<h1><img src='class2context.png' width='100px' />class2context.js</div>
</div>
<br><br>
<div class='centralBox heightMainBox'>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Configurable!">
<img src='http://image.flaticon.com/icons/svg/167/167516.svg' class='mainimg' />
</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="High performance!">
<img src='http://image.flaticon.com/icons/svg/167/167479.svg' class='mainimg' />
</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Permits increment functionallities!">
<img src='http://image.flaticon.com/icons/svg/167/167486.svg' class='mainimg' />
</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Multiple platform!">
<img src='http://image.flaticon.com/icons/svg/167/167488.svg' class='mainimg' />
</a>
</div>
<div class='centralBox'>
<div class='class1 box3' style='background: #769ba3;' >
- github: <a href="https://github.com/arnaucode/class2context" target="_blank">- Github repo</a><br>
- install: 'bower install class2context --save'<br>
- referenced in: <a href="http://www.cssscript.com/lightweight-context-menu-library-class2context-js/" target="_blank">http://www.cssscript.com/lightweight-context-menu-library-class2context-js/</a>
</div>
<div class='class1 box1' style='background: #0FA3B1;'>
<h4>A</h4>
This is a demo
<br>
Just need to include the files:
<ul>
<li>class2context.js</li>
<li>class2context.css</li>
</ul>
</div>
<div class='class2 box1' style='background: #FF9B42;'>
<h4>Get started!</h4>
Right click over me!
<div class='classSub2 box1' style='background: #5797CC; width: 130px; height: 180px!important;'>
element inside element with diferent class
</div>
</div>
<div class='class3 box1' style='background: #8BC34A;'>
<h4>Use</h4>
when html is charged, call the function
</div>
<div class='class4 box2' style='background: #9375A3;'>
<h4>Usage</h4>
when html is charged, call the function:<br>
<div class='codeFont'>
<b>class2context</b>(
<br> 'className',
<br> "title",
<br> [["option1", "functionoption1()"], ["option 2","functionoption2()"]]
<br>);
</div>
</div>
</div>
</div>
<br><br><br><br>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='class2context.js'></script>
<script>
array=[["<img src='http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png' width='25px' /> A1", "function1()"], ["<img src='http://icons.iconarchive.com/icons/dakirby309/simply-styled/32/Autodesk-Alias-Design-icon.png' width='25px' /> A2","function2()"]];
class2context('class1', "titleA", array);
class2context('class3', "titleC", [["<img src='http://icons.iconarchive.com/icons/iynque/flurry-extras-8/32/123D-Design-icon.png' width='25px' /> C1", "function1()"], ["<img src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-draw-brush-icon.png' width='25px' /> C3","function3()"]]);
class2context('class2', "titleB", [["<img src='http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/32/3d-material-drop-tool-icon.png' width='25px' /> B2", "function2()"], ["<img src='http://icons.iconarchive.com/icons/iynque/ios7-style/32/Design-Briefs-icon.png' width='25px' /> B3","function3()"]]);
class2context("classHeader", "titleTableMenu", [["header function 1", "function1()"], ["header function 2", "function2()"]]);
class2context('class4',"title",[["option1", "function1()"], ["option 2","function2()"]]);
class2context('mainimg', "Image context menu", [["<img src='http://icons.iconarchive.com/icons/iynque/flurry-extras-8/32/123D-Design-icon.png' width='25px' /> C1", "function1()"], ["<img src='http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-draw-brush-icon.png' width='25px' /> C3","function3()"]]);
class2context('classSub2', "sub element context inside other element", [["<img src='http://icons.iconarchive.com/icons/iynque/flurry-extras-8/32/123D-Design-icon.png' width='25px' /> C1", "function1()"]]);
function function1(){
alert("function 1 clicked");
}
function function2(){
alert("function 2 clicked");
}
function function3(){
alert("function 3 clicked");
}
function ContextMenus(){
console.log("context menu called");
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>