@creaditor/social-editor-web-component

Social Editor Component

Usage

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

const socialEditor = document.createElement("cdtr-social-editor");
socialEditor.items = [
  {
    id: 0,
    url: "instagram.com",
    style: {},
    fgColor: "",
    bgColor: "",
  },
  {
    id: 1,
    url: "twitter.com",
    style: {},
    fgColor: "",
    bgColor: "",
  },
];

socialEditor.translates = {
  add: "Add new",
};
socialEditor.onRemove = (item) => {
  const cloned = socialEditor.items;
  cloned.splice(cloned.indexOf(item), 1);
  socialEditor.items = cloned;
};
socialEditor.onAdd = (newItem) => {
  const cloned = socialEditor.items;
  newItem.url = "facebook.com";
  cloned.push(newItem);
  socialEditor.items = cloned;
};
socialEditor.onSort = (sortable) => {
  socialEditor.items = sortable;
};
socialEditor.onClickOutside = (event) => {
  const cloned = socialEditor.items;
  cloned.forEach((item) => (item.selected = false));
  socialEditor.items = JSON.parse(JSON.stringify(cloned));
};
socialEditor.onSelect = (icon) => {
  const coneArr = [...socialEditor.items];
  coneArr.forEach((item) => (item.selected = false));
  const selectedItem = coneArr.find((item) => item.id === icon.id);
  selectedItem.selected = true;
  socialEditor.items = coneArr;
};

Build

npm run build

Publish

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