Fixed #1 & moved demo to docs

m-thalmann · Oct 2, 2020 · 414e86b · 414e86b
1 parent 8780cc4
commit 414e86b
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ContextmenuJS is a simple JavaScript library, to display custom contextmenus (right-click).
 
-**Demo:** https://prod.thalmann.it/contextmenujs/demo.html
+**Demo:** https://m-thalmann.github.io/contextmenujs/
 
 ## Navigation
 - [Installation](#installation)
@@ -199,4 +199,4 @@ var menu = new ContextMenu(
 
 ### Output:
 
-![contextmenuJs example](demo/example.gif)
+![contextmenuJs example](docs/example.gif)
diff --git a/_config.yml b/_config.yml
diff --git a/contextmenu.css b/contextmenu.css
@@ -86,7 +86,8 @@
 }
 
 .cm_container.cm_border_right > ul ul{
-  left: -100%;
+  left: unset;
+  right: 100%;
 }
 
 .cm_container.cm_border_bottom > ul ul{

diff --git a/contextmenu.min.css b/contextmenu.min.css
diff --git a/demo/example.gif → docs/example.gif b/demo/example.gif → docs/example.gif
diff --git a/demo/index.html → docs/index.html b/demo/index.html → docs/index.html
@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>ContextmenuJS - Demo Page</title>
 
-	<link rel="stylesheet" href="../contextmenu.css" />
+	<link rel="stylesheet" href="../contextmenu.css" id="theme_style" />
 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
 	<script src="../contextmenu.js"></script>
 
@@ -54,6 +54,18 @@
 				menu.display(e);
 			});
 		});
+
+		const themes = {
+			default: '../contextmenu.css',
+			light: '../themes/contextmenu_light.css',
+			dark: '../themes/contextmenu_dark.css',
+		};
+
+		function changeTheme(e){
+			if(Object.keys(themes).indexOf(e.value) === -1) return;
+
+			document.getElementById('theme_style').href = themes[e.value];
+		}
 	</script>
 
 	<style>
@@ -111,6 +123,15 @@ <h1>ContextMenu Test</h1>
 	</header>
 
 	<main>
+		<p style="margin-top: 0">
+			<span>Theme: </span>
+			<select onchange="changeTheme(this)">
+				<option value="default">Default</option>
+				<option value="light">Light</option>
+				<option value="dark">Dark</option>
+			</select>
+		</p>
+
 		<div id="cmenu">
 			Right-click this blue box
 		</div>

diff --git a/themes/contextmenu_dark.css b/themes/contextmenu_dark.css
@@ -87,7 +87,8 @@
 }
 
 .cm_container.cm_border_right > ul ul{
-  left: -100%;
+  left: unset;
+  right: 100%;
 }
 
 .cm_container.cm_border_bottom > ul ul{

diff --git a/themes/contextmenu_dark.min.css b/themes/contextmenu_dark.min.css
diff --git a/themes/contextmenu_light.css b/themes/contextmenu_light.css
@@ -86,7 +86,8 @@
 }
 
 .cm_container.cm_border_right > ul ul{
-  left: -100%;
+  left: unset;
+  right: 100%;
 }
 
 .cm_container.cm_border_bottom > ul ul{

diff --git a/themes/contextmenu_light.min.css b/themes/contextmenu_light.min.css