osom-tables 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5fd6cce444e1be672327791d4721d373553335f8
+  data.tar.gz: facda0539d1e13e51ae6844b22d93c2cb814e2cb
+SHA512:
+  metadata.gz: b4524680c19d243df750a93e986406db7de9edb56b4af6b8e07ab2e6327dbf76620a810f807db89e460a9fdc5a769d6efa5208713455c9e61a4beb8f9aefd9a0
+  data.tar.gz: 96141a88e8fe9fe7f22a00ae24587e83bf58efe78d37363fa898184794b8ea38c47a592203ab84507ffee74a18e1ae1c17aac86e0ce1d90e6e978b872dff886e

data/README.md

@@ -0,0 +1,147 @@
+# OsomTables
+
+Ajax tables engine that respects MVC and goes well with the rails way.
+
+## The Merits
+
+1. Rails friendly, relies on partials, scopes, etc.
+2. Respects MVC, views are for views, models are for models
+3. Flexible, you write your views in templates and paint them as you pleased
+4. Unit testable, every moving part is independent and unit-testable
+5. Light footprint, the whole thing is less than 100 lines of JS
+
+
+## Simple Setup
+
+Add this gem to your `Gemfile`
+
+```ruby
+gem 'osom-tables'
+```
+
+Make a partial called `_table.html.haml` in your resource views
+
+```haml
+= osom_table_for @things, any_options do |t|
+
+  = t.head do
+    %th Name
+    %th Size
+
+  = t.body do |thing|
+    %td= thing.name
+    %td= thing.size
+```
+
+Put it into your `index.html.haml` file the usual way
+
+```haml
+%h1 Things
+
+= render 'table'
+```
+
+Add the following thing into your controller
+
+```ruby
+class ThingsController < ApplicationController
+  def index
+    @things = Thing.page(params[:page])
+
+    render partial: 'table', layout: false if request.xhr?
+  end
+end
+```
+
+And finally, add the assets to your `application.js` and `application.css` files the usual way
+
+```js
+ *= require 'osom-tables'
+```
+
+And you're good to go!
+
+
+## Adding Sorting
+
+OsomTables don't enforce any sort of dealing with the sorting, just use your standard scopes.
+The osom-tables will just handle the views and the `params[:order]` for you.
+
+Add the order keys to your `t.head` section like so
+
+```haml
+= osom_table_for @things do |t|
+
+  = t.head do
+    %th{order: 'name'} Name
+    %th{order: 'size'} Size
+
+  = t.body do |thing|
+    %td= thing.name
+    %td= thing.size
+```
+
+This will handle the `params[:order]` automatically, which you can use in your controllers say like that
+
+```ruby
+class ThingsController < ApplicationController
+  def index
+    @things = Thing.page(params[:page]).order_by(params[:order])
+
+    render parital: 'table', layout: false if request.xhr?
+  end
+end
+```
+
+And then in your models, for example like that
+
+```ruby
+class Thing
+  scope :order_by, ->(param) {
+    sort = param.ends_with?('_desc') ? 'DESC' : 'ASC'
+
+    case param.sub('_desc', '')
+    when 'name' then order("name #{sort}")
+    when 'size' then order("size #{sort}")
+    else             scopped     # fallback
+    end
+  }
+end
+```
+
+And don't forget to enjoy the awesomeness of easily unit-testable code!
+
+
+## HTML5 Push State
+
+OsomTables can easily hook you up with the html5 push-state goodness.
+Yes, it's just like `pjax` (whoever come up with this name) only better
+coz it renders only what needs to be rendered.
+
+To switch push state on, just pass the `push: true` option with your table
+
+```haml
+= osom_tables_for @things, push: true do |t|
+  ...
+```
+
+
+## Custom Urls
+
+By default `osom-tables` will use your current url as the base one. But,
+in case you would like to reuse the `_table` partial, in different locations,
+you do so, but specifying the `url: smth_path` option with your tables
+
+```haml
+= osom_tables_for @things, url: other_things_path do |t|
+  ...
+```
+
+## License & Copyright
+
+All code in this repository is released under the terms of the MIT license
+
+Copyright (C) 2013 Nikolay Nemshilov
+
+
+

data/lib/osom-tables.rb

@@ -0,0 +1,6 @@
+#
+# Just a gem hook
+#
+require 'osom_tables'
+require 'osom_tables/helper'
+require 'osom_tables/railtie' if defined?(Rails)

data/lib/osom_tables.rb

@@ -0,0 +1,3 @@
+module OsomTables
+  VERSION = '1.0.0'
+end

data/lib/osom_tables/helper.rb

@@ -0,0 +1,91 @@
+module OsomTables::Helper
+
+  def osom_table_for(items, options={}, &block)
+    push     = options[:push] == true and options.delete(:push)
+    url      = options[:url]   || request.fullpath and options.delete(:url)
+    search   = options[:search] == true and options.delete(:search)
+    paginate = options[:paginate] || {} and options.delete(:paginate)
+    url      = url.gsub(/(\?|&)osom_tables_cache_killa=[^&]*?/, '')
+
+    options[:data] ||= {}
+    options[:data][:url]  = url
+    options[:data][:push] = true if push
+
+    content_tag :div, class: 'osom-table' do
+      osom_tables_search(url, search) +
+
+      content_tag(:table, options) {
+        content_tag(:caption, image_tag('osom-tables-spinner.gif', alt: nil), class: 'locker') +
+        capture(Table.new(self, items), &block)
+      } +
+
+      osom_tables_pagination(items, url, paginate)
+    end
+  end
+
+  def osom_tables_search(url, search)
+    ''.html_safe if ! search
+  end
+
+  def osom_tables_pagination(items, url, options)
+    if respond_to?(:paginate) # kaminari
+      options[:params] = Rails.application.routes.recognize_path(url, method: :get).merge(options[:params] || {})
+      paginate(items, options)
+    elsif respond_to?(:will_paginate)
+      will_paginate items, options
+    else
+      ''.html_safe
+    end
+  end
+
+  #
+  # The thing that we yield into the block
+  #
+  class Table
+    def initialize(context, items)
+      @context = context
+      @items   = items
+    end
+
+    def head(&block)
+      head_row = @context.content_tag :tr, &block
+
+      while m = head_row.match(/<th(.*?) (order=("|')(.+?)\3)(.*?)>/)
+        m   = m.to_a
+        key = m[4]
+        css = 'sortable'
+        css << ' asc'  if @context.params[:order] == key
+        css << ' desc' if @context.params[:order] == key + '_desc'
+
+        [1,5].each do |i|
+          if mc = m[i].match(/ class=("|')(.+)\1/)
+            m[i] = m[i].gsub(mc[0], '')
+            css = "#{mc[2]} #{css}"
+          end
+        end
+
+        head_row.gsub! m[0], "<th#{m[1]} class='#{css}' data-#{m[2]}#{m[5]}>"
+      end
+
+      @context.content_tag :thead, head_row.html_safe
+    end
+
+    def body(&block)
+      @context.content_tag :tbody do
+        @items.map do |item|
+          if defined?(ActiveRecord) && item.is_a?(ActiveRecord::Base)
+            @context.content_tag_for(:tr, item){ yield(item) }
+          else
+            @context.content_tag(:tr){ yield(item) }
+          end
+        end.join("\n").html_safe
+      end
+    end
+
+    def foot(&block)
+      @context.content_tag :tfoot do
+        @context.content_tag :tr, &block
+      end
+    end
+  end
+end

data/lib/osom_tables/railtie.rb

@@ -0,0 +1,16 @@
+class OsomTables::Railtie < Rails::Railtie
+  initializer "osom_tables.view_helpers" do
+    ActionView::Base.send :include, OsomTables::Helper
+  end
+
+  initializer "osom_tables.configure_rails_initialization" do
+    ActionController::Base.instance_eval do
+      before_filter do
+        params.delete(:osom_tables_cache_killa)
+      end
+    end
+  end
+end
+
+class OsomTables::Engine < Rails::Engine
+end

data/vendor/assets/javascripts/osom-tables.js

@@ -0,0 +1,104 @@
+/**
+ * The OsomTables scriptery
+ *
+ * Copyright (C) 2013 Nikolay Nemshilov
+ */
+(function($) {
+
+  if (!$) { return console.log("No jQuery? Osom!"); }
+
+  $(document).on('click', '.osom-table .pagination a', function(e) {
+    e.preventDefault();
+    load_table($(this).closest('.osom-table'), this.getAttribute('href'));
+  });
+
+  $(document).on('click', '.osom-table th[data-order]', function(e) {
+    var order = $(this).data('order'), asc = $(this).hasClass('asc');
+
+    load_table($(this).closest('.osom-table'), build_url(
+      $(this).closest('table').data('url'), {
+        order: order + (asc ? '_desc' : ''), page: 1
+      }
+    ));
+  });
+
+  $(window).on('popstate', function(e) {
+    var state = e.originalEvent.state;
+    if (state && state.url) {
+      if (current_table && current_table.find('table').data('push')) {
+        load_table(current_table, state.url, true);
+      } else {
+        document.location.href = state.url;
+      }
+    }
+  });
+
+  var current_table = null;
+
+  function load_table(container, url, no_push) {
+    current_table = container.addClass('loading');
+    actual_table  = container.find('table');
+
+    actual_table.trigger('osom-table:request');
+
+    if (history.pushState && !no_push && actual_table.data('push')) {
+      history.pushState({url: url}, 'osom-table', url);
+      url = build_url(url, {osom_tables_cache_killa: true});
+    }
+
+    $.ajax(url, {
+      success: function(new_content) {
+        container.html(new_content);
+      },
+      complete: function() {
+        container.removeClass('loading');
+        actual_table.trigger('osom-table:loaded');
+      }
+    });
+  };
+
+  /**
+   * Rebuilds the url with the extra prams
+   */
+  function build_url(url, params) {
+    var path, args; path = parse_url(url);
+    args = path[1]; path = path[0];
+
+    for (var key in params) {
+      args[key] = params[key];
+    }
+
+    return path + "?" + $.param(args);
+  }
+
+  /**
+   * Parsing the arguments out of the url query
+   */
+  function parse_url(url) {
+    var path, query, args={}, list, key, value;
+    path = url.split("?"); query = path[1]; path = path[0];
+
+    if (query) {
+      for (var i=0, list = query.split('&'); i < list.length; i++) {
+        key   = list[i].split('=');
+        value = key[1]; key = key[0];
+
+        key   = decodeURIComponent(key);
+        value = decodeURIComponent((value||'').replace(/\+/g, ' '));
+
+        if (key.substr(-2) === "[]") {
+          if (args[key]) {
+            args[key].push(value)
+          } else {
+            args[key] = [value]
+          }
+        } else {
+          args[key] = value
+        }
+      }
+    }
+
+    return [path, args];
+  }
+
+})(jQuery);

data/vendor/assets/stylesheets/osom-tables.css.scss

@@ -0,0 +1,88 @@
+/**
+ * Some stock styling for the osom-tables
+ * to provide nice locker/spinner to highlight
+ * the tables loading process
+ *
+ * Copyright (C) 2013 Nikolay Nemshilov
+ */
+.osom-table {
+
+  table {
+    position: relative;
+
+    .locker {
+      display:          none;
+      position:         absolute;
+      z-index:          9999;
+      left:             0;
+      top:              0;
+      width:            100%;
+      height:           100%;
+      background-color: #eee;
+      text-align:       center;
+      border-radius:   .25em;
+      opacity:         .6;
+
+      img {
+        position:         relative;
+        top:              40%;
+        height:           25%;
+        width:            auto;
+        max-height:       5em;
+        max-width:        5em;
+        padding:          1em;
+        background-color: #fff;
+        border-radius:    1em;
+      }
+    }
+
+    thead th.sortable {
+      cursor:              pointer;
+      transition:          background-color .25s ease-in-out;
+      -o-transition:       background-color .25s ease-in-out;
+      -ms-transition:      background-color .25s ease-in-out;
+      -moz-transition:     background-color .25s ease-in-out;
+      -webkit-transition:  background-color .25s ease-in-out;
+
+      &:hover, &.asc, &.desc {
+        background-color: #efd;
+
+        &:after {
+          opacity: 1;
+        }
+      }
+
+      &:after {
+        content: '\25BE';
+        display: block;
+        float:   right;
+        opacity: .5;
+        vertical-align: middle;
+      }
+
+      &.desc:after {
+        transform:         rotate(180deg);
+        -o-transform:      rotate(180deg);
+        -ms-transform:     rotate(180deg);
+        -moz-transform:    rotate(180deg);
+        -webkit-transform: rotate(180deg);
+      }
+    }
+  }
+
+  &.loading {
+    table {
+      th, td {
+        -webkit-filter: blur(1.5px);
+        -moz-filter:    blur(1.5px);
+        -ms-filter:     blur(1.5px);
+        -o-filter:      blur(1.5px);
+        filter:         blur(1.5px);
+      }
+
+      .locker {
+        display: block;
+      }
+    }
+  }
+}

metadata

@@ -0,0 +1,51 @@
+--- !ruby/object:Gem::Specification
+name: osom-tables
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Nikolay Nemshilov
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-06-09 00:00:00.000000000 Z
+dependencies: []
+description: Fancy ajax tables engine that fits rails infrastructure
+email: nemshilov@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/osom-tables.rb
+- lib/osom_tables/helper.rb
+- lib/osom_tables/railtie.rb
+- lib/osom_tables.rb
+- vendor/assets/images/osom-tables-spinner.gif
+- vendor/assets/javascripts/osom-tables.js
+- vendor/assets/stylesheets/osom-tables.css.scss
+- README.md
+homepage: http://github.com/MadRabbit/osom-tables
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.2
+signing_key: 
+specification_version: 4
+summary: Fancy ajax tables in true rails style
+test_files: []