Merge pull request #3 from GeorgianStan/0.x

0.x

.eslintrc.js

@@ -8,8 +8,6 @@ module.exports = {
   extends: [
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'prettier/@typescript-eslint',
   ],
   root: true,
   env: {
@@ -21,5 +19,6 @@ module.exports = {
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
   },
 };

CONTRIBUTING.md

@@ -34,19 +34,18 @@ It should :
 - be prefixed with one of the following tags
   - wip(work in progress): partial implementation
   - fix : bug fix
-  - feat or feature : new or updated feature
+  - feat or feature : new feature
+  - update: updated features but no breaking changes in the API
   - doc or docs : documentation updates
   - BREAKING : if commit is a breaking change
   - refactor : code refactoring (no functional change)
   - test : tests and CI updates
   - chore : updates for toolchain(webpack rules, update/upgrade dependencies and so on)
+  - release : updates in the version number
+  - demo: updates in the demo file
 
 _example_: **git commit -m "feat,test: functionality to do X was implemented and tested"**
 
-## Tests
-
-Before pushing the updates, be sure to test them with at least one of the following `unit` or `integration`.
-
-You can use the following commands: `npm test`, `npm test:watch`, `npm test:cov`
+## Code linting
 
 Before publishing, please lint the code using the `npm run lint` command.

README.md

@@ -9,4 +9,159 @@
     <a href="https://david-dm.org/georgianstan/vanilla-context-menu" title="dependencies status"><img src="https://status.david-dm.org/gh/georgianstan/vanilla-context-menu.svg"/></a>
 </div>
 
-`vanilla-context-menu` - easily create context menus using Vanilla JavaScript and integrate them in any web application
+`vanilla-context-menu` - easily create context-menus using Vanilla JavaScript and integrate them in any web application
+
+## Installation
+
+### Browser CDN
+
+```html
+<script src="https://unpkg.com/vanilla-context-menu@1.0.0/dist/vanilla-context-menu.js"></script>
+```
+
+Where `@1.0.0` is the version that you want to use.
+
+Then anywhere in your JavaScript code you can access the library with `window.VanillaContextMenu` or simply `VanillaContextMenu`.
+
+### Via NPM
+
+```bash
+npm i vanilla-context-menu
+```
+
+Then anywhere in your code.
+
+```javascript
+import VanillaContextMenu from 'vanilla-context-menu-test';
+```
+
+## How to use it
+
+```javascript
+new VanillaContextMenu({
+  scope: document.querySelector('main'),
+  menuItems: [
+    {
+      label: 'Copy',
+      callback: () => {
+        // ? your code here
+      },
+    },
+    'hr',
+    {
+      label: 'Paste',
+      callback: pasteFunction,
+    },
+  ],
+});
+```
+
+## Configuration options
+
+```typescript
+VanillaContextMenu(configurableOptions: ConfigurableOptions):VanillaContextMenu
+```
+
+**ConfigurableOptions**
+
+|       Option        | Required |        Type        |  Default  |                                                                    Description                                                                    |
+| :-----------------: | :------: | :----------------: | :-------: | :-----------------------------------------------------------------------------------------------------------------------------------------------: |
+|        scope        | **yes**  |    HTMLElement     | undefined |                                   The HTML element on which you want to bind the `contextmenu` event listener.                                    |
+|      menuItems      | **yes**  |     MenuItem[]     | undefined |                                                              Menu items to be built.                                                              |
+|     customClass     |    no    |       string       | undefined |                                             A custom CSS class that can be added to the context menu                                              |
+|  customThemeClass   |    no    |       string       | undefined |            A custom CSS class that can be added to the context menu theme. A value for this property will exclude the `theme` option.             |
+| preventCloseOnClick |    no    |      boolean       |   false   |                          If this variable is `true`, then the context menu will not close when its elements are clicked.                          |
+| transitionDuration  |    no    |       number       |    200    |                        Duration of the context menu transition. Set this value to 0 if you want to disable the animation.                         |
+|        theme        |    no    | 'black' \| 'white' |   black   | By default, the library provides two themes for the context menu: `black` and `white`. You can use this option to choose the one you want to use. |
+
+**MenuItem**
+
+```typescript
+type MenuItem = MenuOption | 'hr';
+```
+
+**MenuOption**
+| Option | Required | Type | Default | Description |
+|:-------------------:|:--------:|:---------:|:---------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| label | **yes** | string | undefined | Menu option label. |
+| callback | **yes** | () => any | undefined | Callback to be executed. |
+| preventCloseOnClick | no | boolean | false | If this variable is `true`, then the context menu will not close when this menu option is clicked. A value set for this option, either `true` or `false` will override the global one. |
+
+## API <sub style='font-size:15px'>(2)</sub>
+
+The following methods and properties are available through the class instance.
+
+```ts
+const myContextMenu = new VanillaContextMenu(...)
+```
+
+(1)
+
+```ts
+off(): void
+```
+
+This method will remove all event listeners that have been registered for the context-menu.
+
+**!** It should be called when you want to deactivate the context menu or when the container item has been removed from the DOM.
+
+(2)
+
+```ts
+updateOptions(configurableOptions: Partial<ConfigurableOptions>): void
+```
+
+## Examples
+
+### Define your own theme
+
+```scss
+.context-menu-orange-theme {
+  background: #d35400;
+
+  hr {
+    background-color: #eee;
+  }
+
+  // ? text color for each item
+  & > *:not(hr) {
+    color: #eee;
+
+    &:hover {
+      background: #e67e22;
+    }
+  }
+}
+```
+
+### Define your own CSS class for styling
+
+```css
+.custom-context-menu-cls {
+  width: 150px;
+  font-family: 'Roboto', sans-serif; /* DEFAULT -- font-family: 'Open Sans', sans-serif; */
+}
+```
+
+```ts
+const myContextMenu = new window.VanillaContextMenu({
+  scope: ...,
+  menuItems: [...],
+  customThemeClass: 'context-menu-orange-theme',
+  customClass: 'custom-context-menu-cls',
+});
+```
+
+You can check the `demo` file for more examples from [demo/index.html](https://github.com/GeorgianStan/vanilla-context-menu/blob/master/demo/index.html).
+
+## Contributing
+
+Pull requests and stars are always welcome. Please check the [guidelines](https://github.com/GeorgianStan/vanilla-context-menu/blob/master/CONTRIBUTING.md).
+
+## Stay in touch
+
+[Discussions page](https://github.com/GeorgianStan/vanilla-context-menu/discussions)
+
+## License
+
+This project is licensed under the [MIT License](https://github.com/GeorgianStan/vanilla-context-menu/blob/master/LICENSE)

demo/index.html

@@ -3,13 +3,75 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Demo library framework</title>
+    <title>Vanilla Context Menu Demo</title>
 
     <script src="../dist/vanilla-context-menu.js"></script>
+    <style>
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+      }
+
+      main {
+        border: 2px solid blueviolet;
+        width: 500px;
+        height: 500px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        position: relative;
+      }
+
+      .context-menu-orange-theme {
+        background: #d35400;
+      }
+      .context-menu-orange-theme hr {
+        background-color: #eee;
+      }
+
+      .context-menu-orange-theme > *:not(hr) {
+        color: #eee;
+      }
+      .context-menu-orange-theme > *:not(hr):hover {
+        background: #e67e22;
+      }
+
+      .custom-context-menu-cls {
+        width: 150px;
+        font-family: 'Roboto', sans-serif;
+      }
+    </style>
   </head>
   <body>
+    <main></main>
     <script>
-      new window.VanillaContextMenu();
+      function myFunction() {
+        console.log('called from myFunction');
+      }
+
+      const myContextMenu = new window.VanillaContextMenu({
+        scope: document.querySelector('main'),
+        menuItems: [
+          {
+            label: 'Option 1',
+            callback: () => {
+              console.log('Option 1 was clicked');
+            },
+          },
+          'hr',
+          {
+            label: 'Option 2',
+            callback: myFunction,
+            preventCloseOnClick: false,
+          },
+        ],
+        customThemeClass: 'context-menu-orange-theme',
+        customClass: 'custom-context-menu-cls',
+        preventCloseOnClick: true,
+      });
     </script>
   </body>
 </html>