Neil Patrick's Mansion

    vue-layout-builder

    1.0.13 • Public • Published

    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
    

    Keywords

    none

    Install

    npm i vue-layout-builder

    DownloadsWeekly Downloads

    47

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    4.11 MB

    Total Files

    80

    Last publish

    Collaborators

    • andrewbeng89
    • krisimmig
    • mgrsskls
    • mlnmln
    • mmatull