110 lines
No EOL
4.8 KiB
HTML
110 lines
No EOL
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JS menus</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/main.js"></script>
|
|
</head>
|
|
<body>
|
|
<button onclick="showContextMenu(this, [{'value': 'gwagwa', 'function': dissmissContextMenu},{'value': 'gwagwa', 'function': dissmissContextMenu}])">Show menu</button>
|
|
<button onclick="imageActions(this)">Image actions</button>
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
function imageActions(obj) {
|
|
var link = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor"><path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path></svg>'
|
|
var download = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor"><path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path></svg>';
|
|
var edit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor"><path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path></svg>';
|
|
var trash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor"><path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path></svg>';
|
|
|
|
showContextMenu(obj, [
|
|
{
|
|
'value': 'title',
|
|
'text': 'Image actions',
|
|
},
|
|
{
|
|
'value': 'Copy Link',
|
|
'icon': link,
|
|
'function': dissmissContextMenu
|
|
},
|
|
{
|
|
'value': 'Download',
|
|
'icon': download,
|
|
'function': dissmissContextMenu
|
|
},
|
|
{
|
|
'value': 'divider',
|
|
},
|
|
{
|
|
'value': 'Edit',
|
|
'icon': edit,
|
|
'function': dissmissContextMenu,
|
|
'type': 'critical'
|
|
},
|
|
{
|
|
'value': 'Delete',
|
|
'icon': trash,
|
|
'function': dissmissContextMenu,
|
|
'type': 'critical'
|
|
},
|
|
{
|
|
'value': 'divider',
|
|
},
|
|
{
|
|
'value': 'Edit',
|
|
'icon': edit,
|
|
'function': dissmissContextMenu,
|
|
'type': 'warning'
|
|
},
|
|
{
|
|
'value': 'Delete',
|
|
'icon': trash,
|
|
'function': dissmissContextMenu,
|
|
'type': 'warning'
|
|
},
|
|
{
|
|
'value': 'divider',
|
|
},
|
|
{
|
|
'value': 'Edit',
|
|
'icon': edit,
|
|
'function': dissmissContextMenu,
|
|
'type': 'success'
|
|
},
|
|
{
|
|
'value': 'Delete',
|
|
'icon': trash,
|
|
'function': dissmissContextMenu,
|
|
'type': 'success'
|
|
},
|
|
{
|
|
'value': 'divider',
|
|
},
|
|
{
|
|
'value': 'Edit',
|
|
'icon': edit,
|
|
'function': dissmissContextMenu,
|
|
'type': 'info'
|
|
},
|
|
{
|
|
'value': 'Delete',
|
|
'icon': trash,
|
|
'function': dissmissContextMenu,
|
|
'type': 'info'
|
|
},
|
|
{
|
|
'value': 'divider',
|
|
},
|
|
{
|
|
'value': 'gwagwa',
|
|
'function': dissmissContextMenu
|
|
}
|
|
],
|
|
)
|
|
};
|
|
|
|
</script> |