Git Product home page Git Product logo

helpers's Introduction

Hanami::Helpers

View helpers for Ruby applications

Status

Gem Version Build Status Coverage Code Climate Dependencies Inline Docs

Contact

Rubies

Hanami::Helpers supports Ruby (MRI) 2.3+ and JRuby 9.1.5.0+

Installation

Add this line to your application's Gemfile:

gem 'hanami-helpers'

And then execute:

$ bundle

Or install it yourself as:

$ gem install hanami-helpers

Usage

Hanami::Helpers offers a set of utilities to enrich web views.

HTML helper

HTML5 markup generator (#html).

View:

module Users
  class Show
    include Hanami::Helpers

    def sidebar
      html.aside(id: 'sidebar') do
        p "Languages", class: 'title'

        ul do
          li "Italian"
          li "English"
        end
      end
    end
  end
end

Template:

<%= sidebar %>

Output:

<aside id="sidebar">
  <p class="title">Languages</p>

  <ul>
    <li>Italian</li>
    <li>English</li>
  </ul>
</aside>

Form Helper

Form generator for HTML5 (#form_for)

Template Usage

Template:

<%=
  form_for :book, routes.books_path do
    text_field :title

    submit 'Create'
  end
%>

Output:

<form action="/books" method="POST" accept-charset="utf-8" id="book-form">
  <input type="text" name="book[title]" id="book-id" value="">
  <button type="submit">Create</button>
</form>

View Usage

View:

module Books
  class New
    include Hanami::Helpers

    def form
      form_for :book, routes.books_path do
        text_field :title

        submit 'Create'
      end
    end
  end
end

Template:

<%= form %>

Output:

<form action="/books" method="POST" accept-charset="utf-8" id="book-form">
  <input type="text" name="book[title]" id="book-id" value="">
  <button type="submit">Create</button>
</form>

Reuse Code

Views:

module Books
  class New
    include Hanami::Helpers

    def form
      Form.new(:book, routes.books_path)
    end

    def submit_label
      'Create'
    end
  end

  class Edit
    include Hanami::Helpers

    def form
      Form.new(:book, routes.book_path(id: book.id), {book: book}, {method: :patch})
    end

    def submit_label
      'Update'
    end
  end
end

Templates:

# books/new.html.erb
<%= render partial: 'books/form' %>
# books/edit.html.erb
<%= render partial: 'books/form' %>
# books/_form.html.erb
<%=
  form_for form, class: 'form-horizontal' do
    text_field :title

    submit submit_label
  end
%>

Output for new:

<form action="/books" method="POST" accept-charset="utf-8" id="book-form">
  <input type="text" name="book[title]" id="book-id" value="">
  <button type="submit">Create</button>
</form>

Output for edit:

<form action="/books/23" method="POST" accept-charset="utf-8" id="book-form">
  <input type="hidden" name="_method" value="PATCH">
  <input type="text" name="book[title]" id="book-id" value="TDD">
  <button type="submit">Update</button>
</form>

Escape helper

HTML (#h), HTML attribute (#ha) and URL (#hu) escape helpers.

View:

module Users
  class Show
    include Hanami::Helpers

    def home_page_link
      %(<a href="#{ hu(user.home_page_url) }" title="#{ ha(user.name} }'s website">#{ h(user.website_name) }</a>)
    end

    def code_snippet
      raw user.code_snippet
    end
  end
end

Template:

<%= home_page_link %>
<%= code_snippet %>

Output:

<a href="https://example.org" title="Maria's website">My Blog</a>
<code>puts "Hello, World!"</code>

Routing Helper

Hanami and Hanami::Router integration (#routes).

View:

module Home
  class Index
    include Hanami::Helpers

    def link_to_home
      %(<a href="#{ routes.home_path }">Home</a>)
    end
  end
end

Template:

<%= link_to_home %>

Output:

<a href="/">Home</a>

Number Formatting Helper

Format numbers (#format_number).

View:

module Home
  class Index
    include Hanami::Helpers

    def visitors_count
      format_number '1000'
    end
  end
end

Template:

<p><%= visitors_count %></p>

Output:

<p>1,000</p>

Philosophy

All the Hanami helpers are modules to include.

Most of the time they inject private methods. This restriction prevents helper methods to be used on the outside (eg. in a template).

We want to encourage developers to use meaningful and simple APIs in their templates.

Bad style example

module Users
  class Show
    include Hanami::Helpers
  end
end
<%= format_number user.followers_count %>

This style increases the complexity of the template and it makes testing hard.

Good style example

module Users
  class Show
    include Hanami::Helpers

    def followers_count
      format_number user.followers_count
    end
  end
end
<%= followers_count %>

This simplifies the markup. In order to test the value that will be printed becomes easier: Users::Show#followers_count.

Versioning

Hanami::Helpers uses Semantic Versioning 2.0.0

Contributing

  1. Fork it ( https://github.com/hanami/helpers/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

Copyright

Copyright ยฉ 2014-2016 Luca Guidi โ€“ Released under MIT License

This project was formerly known as Lotus (lotus-helpers).

helpers's People

Contributors

alfonsouceda avatar artofhuman avatar awochna avatar cllns avatar davydovanton avatar deepj avatar hoksilato avatar jc00ke avatar jodosha avatar josemotanet avatar kasumionlyway avatar khaiql avatar killthekitten avatar lucasallan avatar myabc avatar pragtob avatar qcam avatar sebastjan-hribar avatar skyriser avatar titeiko avatar tomkadwill avatar vyper avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.