Skip to content

Sjohn21/Menu-Editor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Menu Editor

Vanilla Javascript Menu Editor Library (made with Typescript).

Install

Via NPM

npm install @davicotico/menu-editor

Via CDN

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/davicotico/Menu-Editor@1.1.0/dist/styles.min.css">

<!-- and the javascript file -->
<script src="https://cdn.jsdelivr.net/gh/davicotico/Menu-Editor@1.1.0/dist/menu-editor.min.js"></script>
<script>
	var menuEditor = new MenuEditor('element-id', { maxLevel: 3 });
</script>

How to use

Imports

import '@davicotico/menu-editor/lib/css/styles.css';
import { MenuEditor } from '@davicotico/menu-editor';

Creating the object

HTML

<div id="element-id"></div>

Javascript

const menuEditor = new MenuEditor('element-id', { maxLevel: 3 });

Setting the Events

menuEditor.onClickDelete((event) => {
	if (confirm('Do you want to delete the item ' + event.item.getDataset().text)) {
		event.item.remove(); // remove the item
	}
});

menuEditor.onClickEdit((event) => {
	let itemData = event.item.getDataset();
	console.log(itemData);
	menuEditor.edit(event.item); // set the item in edit mode
});

Setting the data

The data

var nestedData = [
	{
	"text": "Home",
	"href": "/home",
	"tooltip": "Go to home page",
	"icon": "fa-solid fa-house",
	"children": []
	},
	{
	"text": "About Us",
	"href": "/about",
	"tooltip": "Learn more about our company",
	"icon": "fa-solid fa-address-card",
	"children": []
	},
	{
	"text": "Services",
	"href": "/services",
	"tooltip": "Discover the services we offer",
	"icon": "fa-solid fa-gear",
	"children": [
		{
		"text": "Service 1",
		"href": "/services/1",
		"tooltip": "Details for Service 1",
		"icon": "cog",
		"children": []
		},
		{
		"text": "Service 2",
		"href": "/services/2",
		"tooltip": "Details for Service 2",
		"icon": "cog",
		"children": []
		}
	]
	}
];

The method:

menuEditor.setArray(nestedData);

Mount the menu editor

menuEditor.mount();

Add a new item

let newItem = {
    text: txtText.value, // required
    href: txtHref.value, // required
    icon: txtIcon.value, // required
    tooltip: txtTooltip.value, // required
    something: "Something" // custom attributes are optional
};
menuEditor.add(newItem);

Update an item

The menu editor must have an item in edit mode. See onClickEdit event in Events section

let data = {
	text: txtText.value,
	href: txtHref.value,
	icon: txtIcon.value,
	tooltip: txtTooltip.value,
};
menuEditor.update(data);

Output

let output = menuEditor.getString();
console.log(output);

Remove all items

menuEditor.empty();

Changelog

v1.1.0

  • New feature: maxLevel option (zero-based value, where zero indicates the first level of the nested menu).
  • Improvements in the layout of items and buttons.

v1.0.0

  • First release

About

Vanilla Javascript Menu Editor (made with Typescript)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 74.5%
  • TypeScript 24.4%
  • SCSS 1.1%