Magicka

Code Climate Test Coverage Issue Count Gem Version Codacy Badge Inline docs

magicka

Magica helps creating html templates for forms and display data using js applications such as AngulaJS

Current Release: 1.1.0

Next release

Yard Documentation

https://www.rubydoc.info/gems/magicka/1.1.0

Installation

  • Install it
  gem install magicka
  • Or add Magicka to your Gemfile and bundle install:
  gem 'magicka'
  bundle install magicka

Usage

Magicka is used as a helper for erb coding so that each element is paired with an element class, a template and a method in an aggregator.

Different aggregators have the same method so that they render the same element in different ways

example

<!-- new.html.erb -->

<% magicka_form('controller.person') do |form| %>
  <%= render partial: 'person_form', locals: { form: form } %>
<% end %>
<!-- show.html.erb -->

<% magicka_display('controller.person') do |form| %>
  <%= render partial: 'person_form', locals: { form: form } %>
<% end %>
<!-- _person_form.html.erb -->

<%= form.input(:first_name) %>
<%= form.input(:last_name) %>
<%= form.input(:age) %>
<%= form.select(:gender, options: %w[MALE FEMALE] %>

<%= form.only(:form) do %>
  <!-- this block only appears in a form -->
  <%= form.button(ng_click: 'controller.save', text: 'Save') %>
<% end %>

Configuring

In order to use magicka, the helper has to added to the controllers and any custom element needs to added

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  helper Magicka::Helper
end

Including custom elements

Elements can be included by defining attributes that they can be initialized with and that can be passed to the template

config/initializers/magicka.rb

module Magicka
  class MyTextInput < Magicka::Element
    with_attribute_locals :label, :field, :id
  end
end

Magicka::Form.with_element(Magicka::MyTextInput)

templates/form/_my_text_input.html.erb

<div>
  <label for="<%= field %>"><%= label %></label>
  <input type="text" id="<%= id %>" name="field" />
</div>