npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-layout-builder

v1.0.13

Published

A vue component to arrange page layouts and content provided by an API

Downloads

86

Readme

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