vue-layout-builder

A vue application (wrapped in a ES6 class) that allows you to arrange custom layouts based on templates provided in a config.

Installation

yarn add vue-layout-builder

Usage

const layoutBuilder = document.getElementById('layoutBuilder');
new LayoutBuilder(layoutBuilder, config);

Config explanation

The saveUrl is used to make a post request to store the current state.

When adding or editing an element, the layout builder calls an external function provided by a CMS.

{
  adapters: {
    callback: Function // function that is called to create or edit elements
  }
}

This function should afterwards call

appInstance.$options.setElement({
  id: Number, // id of the edited or created element
    element: {
      html: String,
      params: Object,
      content_type_group: String,
      name: String
    }
})

sections is an array which stores section objects. These are the main parts of the page. Every key/value pair in the content object represents a block in a section (defined by a slot in the actual layout files). In each of these blocks n elements can be rendered. locked defines if a block is editable or not.

sections: [{
  id: Number, // id of the section
  layout: String, // name of the layout
  content: {
    String: // name of the content block
      [String] // array with the ids of the elements (see: elements)
    },
  locked: Boolean // section is editable or not
}]

content_types holds all types an element can have (e.g. "Image", "Gallery", "Article" etc.). These types need to belong to a group (e.g. "Media elements", "Text elements" etc.). The params object would be send to the cms when adding an element of the given content type.

content_types: [{
  id: Number,
  name: String,
  group: String,
  params: Object
}]

elements is an object holding all available, actually created, elements.

elements: {
  String: {
    html: String,
    params: Object,
    content_type_group: String,
    name: String
  }
}

layouts is an object holding the available layouts the user can choose (e.g. "Two columns", "Three columns")

layouts: {
  String: {
    slots: [String],
    html: String,
    name: String
  }
}

Example config

{
  adapters: {
    callback: window.Drupal.ipe.layout_builder.handle
  },
  saveUrl: "",
  sections: [
    {
      id: 1,
      layout: "LayoutThreeColumns",
      content: {}
    },
    {
      id: 2,
      layout: "LayoutTwoColumns",
      content: {
        "slot1": ["element1", null, "element2"]
      }
    },
    {
      id: 3,
      layout: null,
      content: {}
    },
    {
      id: 4,
      layout: "LayoutTwoColumns",
      content: {
        "slot1": ["element2"],
        "slot2": ["element2", "element3"]
      },
      locked: true
    }
  ],
  content_types: [
    {
      id: 1,
      name: "Image",
      group: "Media elements",
      params: {
        url: ""
      }
    },
    {
      id: 2,
      name: "Media Player",
      group: "Media elements",
      params: {
        url: ""
      }
    },
    {
      id: 3,
      name: "Quote",
      group: "Text elements",
      params: {
        url: ""
      }
    }
  ],
  elements: {
    element1: {
      html: "<img>",
      params: {
        url: ""
      },
      content_type_group: "Media elements",
      name: "Logo"
    },
    element2: {
      html: "<MediaPlayer />",
      params: {
        url: ""
      },
      content_type_group: "Media elements",
      name: "Media player"
    },
    element3: {
      html: "<Pdf />",
      params: {
        url: ""
      },
      content_type_group: "Text elements",
      name: "Pdf"
    }
  },
  layouts: {
    LayoutOneColumn: {
      slots: ["slot1"],
      html:
        "<div class='Row'><div class='Column'><slot name='slot1'></slot></div></div>",
      name: "One column"
    },
    LayoutThreeColumns: {
      slots: ["slot1", "slot2", "slot3"],
      html:
        "<div class='Row'><div class='Column'><slot name='slot1'></slot></div><div class='Column'><slot name='slot2'></slot></div><div class='Column'><slot name='slot3'></slot></div></div>",
      name: "Three columns"
    },
    LayoutTwoColumns: {
      slots: ["slot1", "slot2"],
      html:
        "<div class='Row'><div class='Column'><slot name='slot1'></slot></div><div class='Column'><slot name='slot2'></slot></div></div>",
      name: "Two columns"
    }
  }
}

Contributing

Everything that lives in the public/ folder, should usually be provided by the external cms. What it is in there, is also used for developing the layout builder. Open localhost:8080 after running

yarn start

Before publishing to npm, make sure to run:

yarn build-bundle

Tests

Run tests with

yarn test:unit