viewlet 0.0.1

data/.gitignore

@@ -0,0 +1,5 @@
+*.gem
+.bundle
+.DS_Store
+Gemfile.lock
+pkg/*

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in viewlet.gemspec
+gemspec

data/MIT.LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2012 Dmitriy Kalinin
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,206 @@
+## Goals
+
+* to ease creation of view components
+
+  Problem: Most likely your site has few similar view structures that
+  are repeated throughout the site (e.g. *list* of members, groups, etc.).
+  One solution is to refactor such code into a shared partial
+  (may be `_list_section.html.haml`) and pass customization options
+  via locals hash; however, with this approach it can become quite
+  challenging/inelegant to apply customizations.
+
+* to organize HTML/JS/CSS files based on a feature rather than file type
+
+  Problem: As soon as you start extracting reusable view components
+  from your pages it becomes weird to have HTML/CSS/JS component files
+  spread out in three different directories. Turning your component into a
+  gem remedies that problem since gems can have separate `assets`
+  directory; however, I don't see a benefit in making every single
+  component into a gem, especially when it's application specific.
+
+## Installation
+
+```ruby
+gem "viewlet", :git => "https://github.com/cppforlife/viewlet.git"
+```
+
+## Usage
+
+Let's say we have `GroupsController#show` that lists group members.
+Here is how `show.html.haml` could look:
+
+```haml
+%h1= "Group: #{@group.name}"
+%p= @group.description
+
+= viewlet(:list_section) do |s|
+  - s.heading "Group members"
+  - s.empty_description "No members in this group"
+
+  - s.collapse_button false
+  - s.add_button do
+    = link_to "Invite Members", new_group_member_path(@group)
+
+  - s.items @group.members
+
+  - s.row_title do |member|
+    .name= member.name
+    .summary= member.summary
+
+  - s.row_details do |member|
+    = render :partial => "some_other_partial", :locals => {:member => member}
+```
+
+Now let's define list_section viewlet. Viewlets live in `app/viewlets`
+and each one must have at least `<name>.html.haml`.
+
+In `app/viewlets/list_section/list_section.html.haml`:
+
+```haml
+.list_section
+  %h2
+    = heading
+
+    - if add_button
+      %small= add_button
+
+    - if collapse_button
+      %small.collapse_button= link_to "Collapse", "#"
+
+  - if items.empty?
+    - # outputs value regardless being defined as an argument-less block or a plain value
+    %p= empty_description
+
+  - else
+    %ul
+      - items.each do |item|
+        %li{:class => cycle("odd", "even", :name => :list_section)}
+          .left= list_section.row_title(item)
+
+          - # alternative way of capturing block's content
+          .right= capture(item, &row_details)
+```
+
+All viewlet options (heading, add_button, etc.) set in `show.html.haml`
+become available in `list_section.html.haml` as local variables. None of
+those options are special and you can make up as many as you want.
+
+Note: If there aren't CSS or JS files you want to keep next to your viewlet
+HTML file you don't need to create a directory for each viewlet; simply
+put them in `app/viewlets` e.g. `app/viewlets/list_section.html.haml`.
+
+### CSS & JS
+
+You can also add other types of files to `app/viewlets/list_section/`.
+Idea here is that your viewlet is self-contained and
+encapsulates all needed parts - HTML, CSS, and JS.
+
+In `app/viewlets/list_section/plugin.css.scss`:
+
+```scss
+.list_section {
+  width: 300px;
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    border: 1px solid #ccc;
+    margin-bottom: -1px;
+    padding: 10px;
+    list-style-type: none;
+    overflow: hidden;
+  }
+
+  .left {
+    float: left;
+  }
+
+  .right {
+    float: right;
+  }
+}
+```
+
+To include list_section viewlet CSS in your application add
+
+    *= require list_section/plugin
+
+to your `application.css`
+
+In `app/viewlets/list_section/plugin.js`:
+
+```javascript
+// Probably define listSection() jQuery plugin
+```
+
+To include list_section viewlet JS in your application add
+
+```javascript
+//= require list_section/plugin
+```
+
+to your `application.js`
+
+## Misc
+
+* Let's say we decide to make our list_section viewlet use
+third-party list re-ordering library (e.g. `orderable-list.js`).
+You can add `orderable-list.js` javascript file to
+`app/viewlets/list_section` and require it from `plugin.js`:
+
+```javascript
+//= require ./orderable-list
+```
+
+* Let's say our `plugin.js` defined jQuery plugin `listSection`
+so that in our `application.js` we can do something like this:
+
+```javascript
+$(document).ready(function(){
+  $(".list_section").listSection();
+});
+```
+
+This is fine; however, that means that our component is not
+really functional until we add that javascript piece somewhere.
+Alternatively you can put it right after HTML so everytime
+list_section is rendered it will be automatically initialized.
+
+For example in `list_section.html.haml`:
+
+```haml
+.list_section{:id => unique_id}
+  %h2= heading
+  ...
+
+- unless defined?(no_script)
+  :javascript
+    $(document).ready(function(){
+      $("##{unique_id}").listSection();
+    });
+```
+
+Every viewlet has a predefined local variable `unique_id`
+that could be used as HTML id.
+
+* It's trivial to subclass `Viewlet::Base` to add new functionality.
+`class_name` option lets you set custom viewlet class:
+
+```haml
+= viewlet(:list_section, :class_name => "CustomListSectionViewlet") do
+  ...
+```
+
+* You do not have to pass in block to `viewlet`:
+
+```haml
+= viewlet(:password_strength)
+```
+
+## Todo
+
+* come up with a better name for main files - *plugin* doesn't sound that good
+* `lib/viewlets/` as fallback viewlet lookup path
+* automatically load custom Viewlet::Base subclass from `some_viewlet/plugin.rb`

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/examples/bootstrap_tabs/bootstrap_tabs.html.haml

@@ -0,0 +1,17 @@
+.tabbable{:id => unique_id}
+  %ul.nav.nav-tabs
+    - tabs.each_with_index do |tab, i|
+      %li{:class => ("active" if i == 0)}
+        = link_to tab, "#tab#{i}"
+
+  .tab-content
+    - tabs.each_with_index do |tab, i|
+      .tab-pane{:id => "tab#{i}", :class => ("active" if i == 0)}
+        %h1= tab
+        = send(tab.underscore)
+
+- unless defined?(no_script)
+  javascript:
+    $(document).ready(function(){
+      $("##{unique_id}").tab();
+    });

data/examples/bootstrap_tabs/plugin.js

@@ -0,0 +1 @@
+// http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js

data/examples/bootstrap_tabs/usage.html.haml

@@ -0,0 +1,8 @@
+= viewlet(:bootstrap_tabs) do |t|
+  - t.tabs %w(Movies Books)
+
+  - t.movies do
+    %p Bunch of movies
+
+  - t.books do
+    %p Bunch of books

data/lib/viewlet/base.rb

@@ -0,0 +1,48 @@
+require "viewlet/template"
+
+module Viewlet
+  class Base
+    def initialize(name, view)
+      @name = name
+      @view = view
+      @variables = {
+        @name.to_sym => self,
+        :unique_id => "viewlet_#{rand(36**20).to_s(36)}"
+      }
+    end
+
+    def render
+      Template.find(@name.to_s).render(@view, @variables)
+    end
+
+    private
+
+    def method_missing(method, *args, &block)
+      is_write_op = if @variables[method].is_a?(Proc)
+        block.present?
+      else
+        args.any? || block.present?
+      end
+
+      send("_#{is_write_op ? :write : :read}_variable", method, *args, &block)
+    end
+
+    def _read_variable(name, *args, &block)
+      if @variables[name].is_a?(Proc)
+        @view.capture(*args, &@variables[name])
+      else
+        @variables[name]
+      end
+    end
+
+    def _write_variable(name, *args, &block)
+      @variables[name] = if block
+        # HAML changes argument-less block {|| } into block {|*a| }
+        # which makes block.arity to be -1 instead of just 0
+        block.arity == -1 ? @view.capture(&block) : block
+      else
+        args.first
+      end
+    end
+  end
+end

data/lib/viewlet/helpers.rb

@@ -0,0 +1,15 @@
+module Viewlet
+  module Helpers
+    def viewlet(name, options={}, &block)
+      klass = options[:class_name].try(:constantize) || Base
+      viewlet = klass.new(name, self)
+
+      case block.arity
+        when 0 then block.call
+        when 1 then block.call(viewlet)
+      end if block_given?
+
+      viewlet.render
+    end
+  end
+end

data/lib/viewlet/railtie.rb

@@ -0,0 +1,11 @@
+module Viewlet
+  class Railtie < ::Rails::Railtie
+    initializer "viewlets.view_helpers" do
+      ActionView::Base.send :include, Viewlet::Helpers
+    end
+
+    config.to_prepare do |app|
+      Rails.application.config.assets.paths << Rails.root.join("app", "viewlets")
+    end
+  end
+end

data/lib/viewlet/template.rb

@@ -0,0 +1,31 @@
+module Viewlet
+  class Template
+    def self.find(name)
+      args = [name, "", false, {:locale => [:en], :formats => [:html], :handlers => [:erb, :haml]}, nil]
+      template = path_resolver.find_all(*args).first ||
+        raise(ActionView::MissingTemplate.new([path_resolver], *args))
+
+      # Cannot refresh template because it will try to use
+      # view's lookup context which will not include app/viewlets dir
+      template.virtual_path = nil
+
+      new(template)
+    end
+
+    def initialize(template)
+      @template = template
+    end
+
+    def render(view, variables={})
+      @template.locals = variables.keys
+      @template.render(view, variables)
+    end
+
+    private
+
+    def self.path_resolver
+      ActionView::FileSystemResolver.new \
+        Rails.root.join("app/viewlets"), "{:action/,}:action{.:locale,}{.:formats,}{.:handlers,}"
+    end
+  end
+end

data/lib/viewlet/version.rb

@@ -0,0 +1,3 @@
+module Viewlet
+  VERSION = "0.0.1"
+end

data/lib/viewlet.rb

@@ -0,0 +1,7 @@
+require "viewlet/version"
+require "viewlet/base"
+require "viewlet/helpers"
+require "viewlet/railtie"
+
+module Viewlet
+end

data/viewlet.gemspec

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "viewlet/version"
+
+Gem::Specification.new do |s|
+  s.name        = "viewlet"
+  s.version     = Viewlet::VERSION
+  s.authors     = ["Dmitriy Kalinin"]
+  s.email       = ["cppforlife@gmail.com"]
+  s.homepage    = "https://github.com/cppforlife/viewlet"
+  s.summary     = "Rails view components"
+  s.description = s.summary
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  # specify any dependencies here; for example:
+  # s.add_development_dependency "rspec"
+  # s.add_runtime_dependency "rest-client"
+end

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification 
+name: viewlet
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: false
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Dmitriy Kalinin
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-07-20 00:00:00 -07:00
+default_executable: 
+dependencies: []
+
+description: Rails view components
+email: 
+- cppforlife@gmail.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- MIT.LICENSE
+- README.md
+- Rakefile
+- examples/bootstrap_tabs/bootstrap_tabs.html.haml
+- examples/bootstrap_tabs/plugin.js
+- examples/bootstrap_tabs/usage.html.haml
+- lib/viewlet.rb
+- lib/viewlet/base.rb
+- lib/viewlet/helpers.rb
+- lib/viewlet/railtie.rb
+- lib/viewlet/template.rb
+- lib/viewlet/version.rb
+- viewlet.gemspec
+has_rdoc: true
+homepage: https://github.com/cppforlife/viewlet
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.7
+signing_key: 
+specification_version: 3
+summary: Rails view components
+test_files: []
+