├── .gitignore
├── assets
    ├── logo.jpg
    ├── demo-pic.jpeg
    └── context-menu.png
├── src
    ├── angel-styles.min.css
    ├── angel-styles.css
    ├── angelfire.min.js
    └── angelfire.js
├── LICENSE
├── demo
    ├── index.html
    └── app.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/assets/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rish-16/Angelfire/HEAD/assets/logo.jpg


--------------------------------------------------------------------------------
/assets/demo-pic.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rish-16/Angelfire/HEAD/assets/demo-pic.jpeg


--------------------------------------------------------------------------------
/assets/context-menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rish-16/Angelfire/HEAD/assets/context-menu.png


--------------------------------------------------------------------------------
/src/angel-styles.min.css:
--------------------------------------------------------------------------------
1 | .menu{font-family:Avenir Next,Arial,Helvetica,sans-serif;min-width:150px;width:auto;z-index:1000;box-shadow:1px 1px 5px rgba(0,0,0,.2);position:fixed;display:none;background-color:#fff;border-radius:7px;overflow:hidden}.menu-options{list-style:none;padding:5px 0;z-index:1}.menu-option{font-weight:500;z-index:1;font-size:14px;padding:10px 0 10px 20px;cursor:pointer}.menu-option:hover{background:rgba(0,0,0,.2);transition:.5s}


--------------------------------------------------------------------------------
/src/angel-styles.css:
--------------------------------------------------------------------------------
 1 | .menu {
 2 | 	font-family: Avenir Next, Arial, Helvetica, sans-serif;
 3 |     min-width: 150px;
 4 |     width: auto;
 5 |     z-index: 1000;
 6 |     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
 7 |     position: fixed;
 8 |     display: none;
 9 |     background-color: white;
10 |     border-radius: 7px;
11 |     overflow: hidden;
12 | }
13 | 
14 | .menu-options {
15 | 	list-style: none;
16 | 	padding: 5px 0;
17 | 	z-index: 1;
18 | }
19 | 
20 | .menu-option {
21 | 	font-weight: 500;
22 | 	z-index: 1;
23 | 	font-size: 14px;
24 | 	padding: 10px 0 10px 20px;
25 | 	cursor: pointer;
26 | }
27 | 
28 | .menu-option:hover {
29 | 	background: rgba(0, 0, 0, 0.2);
30 | 	transition: 0.5s;
31 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Rishabh Anand
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 		<title>Angelfire | Demo</title>
 7 | 		
 8 | 		<!-- import Angelfire assets first -->
 9 | 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rish-16/Angelfire/src/angel-styles.min.css">
10 | 		<script src="https://cdn.jsdelivr.net/gh/rish-16/Angelfire/src/angelfire.min.js"></script>
11 | 		
12 | 		<!-- add other imports next -->
13 | 		<script src="app.js"></script>
14 | 	</head>
15 | 	
16 | 	<style>
17 | 		html, body {
18 | 			font-family: Avenir Next, Arial, Helvetica, sans-serif;
19 | 		}
20 | 		
21 | 		#text {
22 | 			font-size: 16px;
23 | 		}
24 | 		
25 | 		#prof-pic {
26 | 			width: 80px;
27 | 			height: 80px;
28 | 			border-radius: 100px;
29 | 			margin: 20px;
30 | 			border: 1px solid black;
31 | 			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
32 | 		}
33 | 	</style>
34 | 	
35 | 	<body>
36 | 		<p>Right click the image and text below:</p>
37 | 		<img id="prof-pic" src="https://twitter.com/rishabh16_/photo" alt="img">
38 | 		
39 | 		<br>
40 | 		
41 | 		<p id="text">This is some text</p>
42 | 	</body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", () => {
 2 | 	console.log("App loaded")
 3 | 	
 4 | 	var img = document.getElementById("prof-pic")
 5 | 	const text = document.getElementById("text")
 6 | 	
 7 | 	var angelfire = new Angelfire()
 8 | 	
 9 | 	var config = {
10 | 		"options": [
11 | 		{
12 | 			"name": "Profile",
13 | 			"event": function() {
14 | 				alert("Profile clicked!")
15 | 			},
16 | 			"styles": {
17 | 				"color": "royalblue"
18 | 			},
19 | 			"onHover": {
20 | 				"opacity": 0.5,
21 | 				"background": "none",
22 | 				"transition": "0.5s",
23 | 			}
24 | 		},
25 | 		{
26 | 			"name": "New Post",
27 | 			"event": function() {
28 | 				alert("New Post clicked!")
29 | 			}
30 | 		},
31 | 		{
32 | 			"name": "Settings",
33 | 			"event": function() {
34 | 				alert("Settings clicked!")
35 | 			}
36 | 		}
37 | 		],
38 | 	}
39 | 	
40 | 	var config2 = {
41 | 		"options": [
42 | 		{
43 | 			"name": "Copy",
44 | 			"event": function() {
45 | 				alert("Copy text")
46 | 			}
47 | 		},
48 | 		{
49 | 			"name": "Delete",
50 | 			"event": function() {
51 | 				alert("Delete text")
52 | 			}
53 | 		},
54 | 		{
55 | 			"name": "Colour",
56 | 			"event": function() {
57 | 				alert("Choose colour")
58 | 			}
59 | 		},
60 | 		{
61 | 			"name": "Duplicate",
62 | 			"event": function() {
63 | 				alert("Duplicate text")
64 | 			}
65 | 		}
66 | 		]
67 | 	}
68 | 	
69 | 	angelfire.addMenu(img, config)
70 | 	angelfire.addMenu(text, config2)
71 | })


--------------------------------------------------------------------------------
/src/angelfire.min.js:
--------------------------------------------------------------------------------
1 | function makeid(length){var result='';var characters='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';var charactersLength=characters.length;for(var i=0;i<length;i++){result+=characters.charAt(Math.floor(Math.random()*charactersLength))}return result}var Angelfire=function(){};Angelfire.prototype.addMenu=function(element,config){var styleContainer=document.getElementsByTagName('style')[0];var menu=document.createElement("div");menu.className="menu";var menuVisible=false;var ul=document.createElement("ul");ul.className="menu-options";const toggleMenu=function(command){menu.style.display=command==="show"?"block":"none"};const setPosition=function({top,left}){menu.style.left=`${left}px`;menu.style.top=`${top}px`;toggleMenu('show')};var allOptions=config["options"];var name;var func;for(var i=0;i<allOptions.length;i++){name=allOptions[i]["name"];func=allOptions[i]['event'];var li=document.createElement("li");li.className="menu-option";li.textContent=name;li.addEventListener("click",func);var liID=makeid(5);li.id=liID;if(allOptions[i]['styles']!=undefined){var liStyles=allOptions[i]['styles'];for(key in liStyles){styleContainer.innerHTML+=`.menu.menu-options#${liID}{${key}:${liStyles[key]}}`}}if(allOptions[i]['onHover']!=undefined){var liHover=allOptions[i]['onHover'];var hoverString="";for(key in liHover){hoverString+=`${key}:${liHover[key]};\n`}styleContainer.innerHTML+=`#${liID}:hover{${hoverString}}`}ul.appendChild(li)}element.addEventListener("contextmenu",function(e){e.preventDefault();const origin={left:e.pageX,top:e.pageY};setPosition(origin);menuVisible=true;window.addEventListener("click",function(e){if(menuVisible){toggleMenu("hide")}})});menu.appendChild(ul);var styles=config["menu-styles"];for(key in styles){styleContainer.innerHTML+=`.menu{${key}:${styles[key]}}`}document.body.appendChild(menu)}


--------------------------------------------------------------------------------
/src/angelfire.js:
--------------------------------------------------------------------------------
  1 | function makeid(length) {
  2 | 	var result = '';
  3 | 	var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  4 | 	var charactersLength = characters.length;
  5 | 	for ( var i = 0; i < length; i++ ) {
  6 | 	   result += characters.charAt(Math.floor(Math.random() * charactersLength));
  7 | 	}
  8 | 	return result;
  9 | }
 10 | 
 11 | var Angelfire = function() {};
 12 | 
 13 | Angelfire.prototype.addMenu = function(element, config) {
 14 | 	var styleContainer = document.getElementsByTagName('style')[0];
 15 | 	
 16 | 	var menu = document.createElement("div");
 17 | 	menu.className = "menu";
 18 | 	var menuVisible = false;
 19 | 	
 20 | 	var ul = document.createElement("ul");
 21 | 	ul.className = "menu-options";
 22 | 	
 23 | 	const toggleMenu = function(command) {
 24 | 		menu.style.display = command === "show" ? "block" : "none";
 25 | 	}
 26 | 	
 27 | 	const setPosition = function({ top, left }) {
 28 | 		menu.style.left = `${left}px`;
 29 | 		menu.style.top = `${top}px`;
 30 | 		toggleMenu('show');
 31 | 	}
 32 | 	
 33 | 	var allOptions = config["options"];
 34 | 	var name;
 35 | 	var func;
 36 | 		
 37 | 	for (var i = 0; i < allOptions.length; i++) {
 38 | 		name = allOptions[i]["name"];
 39 | 		func = allOptions[i]['event'];
 40 | 
 41 | 		var li = document.createElement("li");
 42 | 		li.className = "menu-option";
 43 | 		li.textContent = name;
 44 | 		li.addEventListener("click", func);
 45 | 		var liID = makeid(5);
 46 | 		li.id = liID;
 47 | 		
 48 | 		if (allOptions[i]['styles'] != undefined) {
 49 | 			var liStyles = allOptions[i]['styles'];
 50 | 			for (key in liStyles) {
 51 | 				styleContainer.innerHTML += `
 52 | 					.menu .menu-options #${liID} {
 53 | 						${key}: ${liStyles[key]};
 54 | 					}
 55 | 				`;
 56 | 			}
 57 | 		}
 58 | 		
 59 | 		if (allOptions[i]['onHover'] != undefined) {
 60 | 			var liHover = allOptions[i]['onHover'];
 61 | 			var hoverString = "";
 62 | 			for (key in liHover) {
 63 | 				hoverString += `${key}: ${liHover[key]};\n`;
 64 | 			}
 65 | 			
 66 | 			styleContainer.innerHTML += `
 67 | 				#${liID}:hover {
 68 | 					${hoverString}
 69 | 				}
 70 | 			`;
 71 | 		}
 72 | 		
 73 | 		ul.appendChild(li);
 74 | 	}
 75 | 	
 76 | 	element.addEventListener("contextmenu", function(e) {
 77 | 		e.preventDefault()
 78 | 		const origin = {
 79 | 			left: e.pageX,
 80 | 			top: e.pageY
 81 | 		};
 82 | 		setPosition(origin);
 83 | 		menuVisible = true;
 84 | 		
 85 | 		window.addEventListener("click", function(e) {
 86 | 			if (menuVisible) {toggleMenu("hide")};
 87 | 		})
 88 | 	})
 89 | 	
 90 | 	menu.appendChild(ul);
 91 | 	
 92 | 	var styles = config["menu-styles"];
 93 | 	
 94 | 	for (key in styles) {
 95 | 		styleContainer.innerHTML += `
 96 | 			.menu {
 97 | 				${key}: ${styles[key]};
 98 | 			}
 99 | 		`;
100 | 	}
101 | 	
102 | 	document.body.appendChild(menu);
103 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <img align="center" src="assets/logo.jpg" alt="logo">
  2 | 
  3 | <p align="center">Add custom context menus to any webpage element with minimal coding!!!</p>
  4 | <p align="center"><strong>Made by <a target="blank_" href="http://rish-16.github.io/">Rishabh Anand</a> for <a target="blank_" href="https://openhack.nushackers.org/">NUS Hackers OpenHack 2020</a></strong></p>
  5 | <p align="center">🏆 Winning Submission</p>
  6 | 
  7 | <p align="center">
  8 | 	<img src="https://img.shields.io/badge/size-2.5%20KB-1dd1a1.svg">
  9 | 	<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-1dd1a1.svg"></a>
 10 | </p>
 11 | 
 12 | ---
 13 | 
 14 | ### What is it?
 15 | 
 16 | > `Angelfire` lets you quickly build right-click-enabled context menus and drop-down menus for any element on your webpage.
 17 | 
 18 | Check it out on the [demo page](https://af-demo.netlify.app/).
 19 | 
 20 | **What Are Context Menus?**
 21 | 
 22 | A context menu is what shows up when you right-click something on a webpage. It usually contains actions that can be performed on the selected element.
 23 | 
 24 | <img src="assets/context-menu.png" alt="c-menu" width="300px">
 25 | 
 26 | <br>
 27 | 
 28 | Nowadays, many apps are using context menus to give users additional functionality without adding extra elements to the user interface. With a simple right-click, users have an array of extra options to choose from, improving the user experience by a large margin.
 29 | 
 30 | `Angelfire` lets you *hijack* this context menu and add in your own options instead. Now, you too can add some extra UX touches to your web app!
 31 | 
 32 | ---
 33 | 
 34 | ### Setting Up Angelfire
 35 | 
 36 | To use `Angelfire`, add the CDN links to your `head` tag of your markup:
 37 | 
 38 | ```
 39 | https://cdn.jsdelivr.net/gh/rish-16/Angelfire/src/angel-styles.min.css
 40 | https://cdn.jsdelivr.net/gh/rish-16/Angelfire/src/angelfire.min.js
 41 | ```
 42 | 
 43 | <br>
 44 | 
 45 | ```html
 46 | <head>
 47 | 	<meta charset="UTF-8">
 48 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 49 | 	<title>Page Title</title>
 50 | 	
 51 | 	<!-- Place the Angelfire assets here -->
 52 | 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rish-16/Angelfire/src/angel-styles.min.css">
 53 | 	<script src="https://cdn.jsdelivr.net/gh/rish-16/Angelfire/src/angelfire.min.js"></script>
 54 | 	
 55 | 	<!-- Your other imports -->
 56 | 	<script src="app.js"></script>
 57 | </head>
 58 | ```
 59 | 
 60 | Or, you can download the minified `angelfire.min.js` and `angel-styles.min.css` files from the `src` directory into your project's and import them as local files in your `head` tag.
 61 | 
 62 | > **Note:** Add the `Angelfire` assets before your main JavaScript/CSS code
 63 | 
 64 | ---
 65 | 
 66 | ### Using Angelfire
 67 | 
 68 | To use the library, you need to create a new `Angelfire` instance in your JavaScript code. You'll also need a `config` object containing menu options and associated on-click events:
 69 | 
 70 | ```javascript
 71 | var profPic = document.getElementById("prof-pic") // target element 
 72 | var angelfire = new Angelfire()
 73 | 
 74 | var config = {
 75 | 	"options": [
 76 | 		{
 77 | 			"name": "Profile",
 78 | 			"event": function() {...}
 79 | 		},
 80 | 		{
 81 | 			"name": "New Post",
 82 | 			"event": function() {...}
 83 | 		},
 84 | 		{
 85 | 			"name": "Settings",
 86 | 			"event": function() {...}
 87 | 		}
 88 | 	]
 89 | }
 90 | 
 91 | angelfire.addMenu(profPic, config) // generate context menu for target element
 92 | ```
 93 | 
 94 | It looks something like this:
 95 | 
 96 | <img src="assets/demo-pic.jpeg" width="450px" alt="demo-pic">
 97 | 
 98 | ---
 99 | 
100 | ### Customisability
101 | 
102 | `Angelfire` allows you to create fully-customisable context menus. In your `config` object, you can specify the key `menu-styles`:
103 | 
104 | ```javascript
105 | 
106 | var config = {
107 | 	"options": [...], // menu options
108 | 	"menu-styles": {
109 | 		"background-color": "red",
110 | 		"textColor": "white",
111 | 	}
112 | }
113 | 
114 | ```
115 | 
116 | **Here's a list of all valid `menu-styles` properties you can control:**
117 | 
118 | | Property            | Description               | Default (if any)                                  |
119 | |---------------------|---------------------------|---------------------------------------------------|
120 | | `background-color`  | Background color of menu  | `white`                                           |
121 | | `color`             | Colour of all options     | `black`                                           |
122 | | `border`            | Adjust border around menu | `none`                                            |
123 | | `border-radius`     | Border curvature of menu  | `7px`                                             |
124 | | `width`             | Width of menu             | Minimum `150px`; Auto-adjusting based on content  |
125 | | `box-shadow`        | Shadow under menu         | `1px 1px 5px rgba(0, 0, 0, 0.2)`                  |
126 | 
127 | > **Note:** If you want support for more custom styles, leave an issue!
128 | 
129 | You can also control styles for individual options by adding the `styles` and `onHover` properties to the options in the `config` object:
130 | 
131 | ```javascript
132 | 
133 | var config = {
134 | 	"options": [
135 | 		{
136 | 			"name": "Profile",
137 | 			"event": function() {...},
138 | 			"styles": { // CSS props
139 | 				"color": "royalblue",
140 | 				"background-color": "lightgray"
141 | 			},
142 | 			"onHover": { // on hover event
143 | 				"opacity": 0.5,
144 | 				"color": "gold"
145 | 			}
146 | 		},
147 | 		{
148 | 			"name": "Settings",
149 | 			"event": function() {...},
150 | 			"styles": { // anything you can do with markup text, you can do here!
151 | 				"color": "rebeccapurple",
152 | 				"font-size": "15px",
153 | 				"font-weight": 600
154 | 			}
155 | 		}
156 | 	],
157 | 	"menu-styles": {...}
158 | }
159 | 
160 | ```
161 | 
162 | > **Note:** If you want support for more custom styles, leave an [issue](https://github.com/rish-16/Angelfire/issues)!
163 | 
164 | ---
165 | 
166 | ### TO-DOs
167 | 
168 | There's still a lot to do with the library. Here are some future plans I have with it:
169 | 
170 | - Add sub-menu support
171 | - Key-press option selection
172 | - Add icon/image support for options
173 | - Adding sections in menu
174 | 
175 | ---
176 | 
177 | ### License
178 | 
179 | [MIT](https://github.com/rish-16/Angelfire/blob/master/LICENSE)
180 | 


--------------------------------------------------------------------------------