diff --git a/.eslintrc.js b/.eslintrc.js
index 797c92c..d8a3216 100644
--- a/.eslintrc.js
+++ b/.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',
},
};
diff --git a/@types/global.d.ts b/@types/global.d.ts
deleted file mode 100644
index df29429..0000000
--- a/@types/global.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * * Update the interface for the global object (if required)
- */
-interface Window {}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f7e38d8..30af272 100644
--- a/CONTRIBUTING.md
+++ b/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.
diff --git a/README.md b/README.md
index 719b514..cb50af4 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,159 @@
-`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
+
+```
+
+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 (2)
+
+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): 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)
diff --git a/demo/index.html b/demo/index.html
index a70efe3..05e77fe 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,13 +3,75 @@
- Demo library framework
+ Vanilla Context Menu Demo
+
+