Elements

Adding Elements

1. Create a new ruby model under app/models/elements/
2. Add a component entry under core/elements/[ELEMENT NAME].yml
3. Create a new view under core/views/elements/[ELEMENT NAME].yml
4. Add cell under app/cells/elements/[ELEMENT NAME]_cell.rb
5. Add cell view under app/cells/elements/[ELEMENT NAME]/show.slim
6. Add entry under core/menus/elements.yml
7. Add a permission entry for corresponding user under core/permissions/

Automation

The first 5 tasks can be performed automatically by running elements generator.

rails g elements element_name --desc 'element_description'

After the generator has been ran import the components into the database by running.

rake components:setup

Add the element to the menu

rake menu:setup

Add the permissions for the element

rake permissions:enable

Restricting Elements to Areas & Components

The elements can be restricted to areas such as header, content, and footer. They can also be restricted to a component such as videos or discussions. To add a restriction edit the core/elements.yml.

In this example the heading element is restricted to the content area in video components.

components:
  elements_heading:
    klass: 'Elements::Heading'
    path: 'elements'
    enabled: true
    restricted:
      areas:
        - content
      components:
        - videos

Rendering Elements on the Front End

On the front end, we're utilizing Cells with a Builder tool. Update app/cells/elements/element_cell.rb and include a new cell-based on the element model we are rendering.

In the following example, we are rendering an Elements::Heading with Elements::Heading cell.

# app/cells/elements/element_cell.rb
module Elements
  class ElementCell < Cell::ViewModel
    include ::Cell::Builder
    builds do |model, options|
      cell_class_name = model.class.to_s+"Cell"
      cell_class_name.classify.constantize
    end
  end
end

# app/cells/elements/heading_cell.rb
module Elements
  class HeadingCell < BaseElementCell
  end
end

// app/cells/elements/heading/show.slim
= h4
  = model.header
  - if model.subheader
    = header 'sub'
      = model.subheader