@creaditor/menu-editor-web-component

Menu editor widget

Usage

Install the component via npm: npm install @creaditor/menu-editor-web-component.

const menuEditor = document.createElement("cdtr-menu-editor");
menuEditor.onLoad = () => {};
menuEditor.items = [
  {
    id: 0,
    text: "Home",
    onClick: {
      url: "instagsssram.com",
    },
    style: {
      fontSize: "1em",
    },
  },
  {
    id: 1,
    text: "About",
    onClick: {
      url: "twitter.com",
    },
    style: {
      color: "red",
      fontFamily: "Arial",
      fontSize: "12px",
    },
  },
];
menuEditor.translates = {
  add: "Add new",
  placeholder: "button text",
  info: "Drag to Move, Click to options",
  remove: "remove1",
};
menuEditor.spacing = "20px";
menuEditor.onChangeText = (text, index, item) => {
  const cloned = JSON.parse(JSON.stringify(menuEditor.items));
  cloned[index].text = text;
  menuEditor.items = cloned;
};
menuEditor.onRemove = (item) => {
  const cloned = menuEditor.items;
  cloned.splice(cloned.indexOf(item), 1);
  menuEditor.items = cloned;
};
menuEditor.onAdd = (newItem) => {
  menuEditor.items.forEach((item) => (item.selected = false));
  newItem.selected = true;
  const cloned = menuEditor.items;
  cloned.unshift(newItem);
  menuEditor.items = cloned;
};
menuEditor.onSort = (sortable) => {
  menuEditor.items = sortable;
};
menuEditor.onClickOutside = (event) => {
  const cloned = menuEditor.items;
  cloned.forEach((item) => (item.selected = false));
  menuEditor.items = JSON.parse(JSON.stringify(cloned));
};
menuEditor.onSelect = (icon) => {
  const coneArr = [...menuEditor.items];
  coneArr.forEach((item) => (item.selected = false));
  const selectedItem = coneArr.find((item) => item.id === icon.id);
  selectedItem.selected = true;
  menuEditor.items = coneArr;
};
menuEditor.onFocus = (item) => {
  // some code
};

menuEditor.onBlur = (item) => {
  // some code
};

Build

npm run build

Publish

• update package.json version
• npm run build
• npm publish