Code Monkey home page Code Monkey logo

altered_views's Introduction

altered_views

Synopsis

Everybody is accustomed now to the power and flexibility inheritance gives you in OOP. But when it comes to view life is getting really complex! Let me give you an example.

You have a nice rails engine that provides you with authentication functionality you use throughout your applications. But the login page should really look slightly different in this app and that registration page should carry different logo, name and copyright. The only option you have is to copy those views into the app and redo them. That is it, from this point you’ve lost it, cause any bugs you fixed in the views inside the engine still live in the copied views.

This is where altered_views comes to help. It allows you to inherit the engine’s view and alter only the bits you need referring to them using css selectors.

You view in the engine could look like this:

app/views/user_session/new.html.erb [engine]

<h1 id="login-title">Login:</h1>
<div class="form-container">
<!-- Code to display login box, which I omit -->
</div>
<span class="legal">Some legal nonsence</span>

Now we will alter customizing only required parts. This view goes inside your application.

app/views/user_session/new.html.erb [application]

<%= inherit_view "parent:admin/cataloguer/categories/edit" do %>
  <%= content "#login-title" do %>
    Login into my company's account:
  <% end %>

  <%= append ".legal" do %>
    <p>Exta clause</p>
  <% end %>
<% end %>

Note that the template name in the helper call starts with parent this allow one to render next view hierarchy, e.g. access the view of egine from the application

altered_views support the following DOM modifiers:

  • content — replace the element’s content

  • before — place content before the node

  • after — place content after the node

  • append — content in appended in the end of the element

  • prepend — content in placed as the first child of the element before other content

If you need more complex operations you can refer directly to Nokogiri document by passing an argument to inherit_view clause:

<%= inherit_view "parent:admin/cataloguer/categories/edit" do |doc| %>
# doc is a nokogiri document
<% end %>

Installing

altered_views is available on gemcutter so all you have to do it

gem install altered_views

Then include it in your Gemfile

gem altered_views

Requirements

altered_views was written to extend Rails 3.0 functionality and uses nokogiri — a fast and powerful XML/HTML processing engine.

Known issues

This is the very first version of the gem and might contain bugs.

  • it assumes you are using layouts in your application. If your view contains the whole page — it will cause problems.

  • head section modification is not supported

altered_views's People

Contributors

svyatogor avatar

Stargazers

 avatar

Watchers

 avatar  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.