inkwell_timelines 1.0.0

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2013 Sergey Sokolov
+
+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,187 @@
+# Inkwell Timelines
+
+Inkwell Timelines provides simple way to create timelines with autoload content while scrolling with ability to transmit the additional parameters.
+It allows you to place timeline blocks on the pages - one block per page. 
+
+Each block can consist of several timelines (Blog and Favorite timelines on the screenshot).
+
+Each timeline can consist of several types objects (Posts and Comments on the screenshot) with different templates to form them.
+
+Timeline can consist of selectors ( category selector on the screenshot) to customize received data (for example, you can get timeline with only one category's items).
+
+Timelines autoload next items when it is scrolled to the end.
+
+![Inkwell Timelines](https://github.com/salkar/inkwell_timelines/blob/master/test/screen/main.png?raw=true)
+
+## Installation
+
+Put in `Gemfile`:
+
+```ruby
+gem 'inkwell_timelines', :git => 'https://github.com/salkar/inkwell_timelines.git'
+```
+
+After it do `bundle install`
+
+Create `inkwell_timelines.rb` file in `config/initializers` and put in it your settings:
+
+```ruby
+module InkwellTimelines
+  class Engine < Rails::Engine
+    # Pixels count between current scroll position and page's end at which the autoload start
+    config.load_distance = 150 
+    config.autoload_path = 'timeline/get/' # Autoload controller path
+    # Optional. If defined all partials will be searched here
+    config.partials_dir = 'your path to partials' 
+    config.timeline_blocks = [ 
+        { # First timelines block
+            :id => 'timelines_block', # Block id
+            :timelines => [ 
+                {
+                    :id => 'blogline', # First timeline id
+                    :name => 'Blog', # First timeline displayed name
+                    :active => true, # Defines which timeline is active at first load
+                    :data_get => ->(options = {}) { # Lambda which get data for form this timeline
+                      user = User.find options[:user_id]
+                      # Function that return array of objects (for example - posts and comments in dummy app)
+                      user.blogline options 
+                    },
+                    # Array of params (of options in :data_get) saved on client side and sent to server on autoload
+                    :transferred_params => [:user_id], 
+                    # Add selector to customize received data (sampling by Category on the screenshot)
+                    :multi_selectors => [  
+                        {
+                            :id => 'category', # Selector id
+                            :name => 'Category', # Selector displayed name (see screenshot)
+                            :data_get => ->(options = {}) { # Lambda which get objects for form selector
+                              Category.where(:owner_id => options[:user_id], :owner_type => 'u')
+                            }
+
+                        }
+                    ]
+                },
+                {
+                    :id => 'favoriteline', # Second timeline id
+                    :name => 'Favorite', # Second timeline displayed name
+                    :data_get => ->(options = {}) { # Lambda which get data for form this timeline
+                      user = User.find options[:user_id]
+                      user.favoriteline options
+                    },
+                    # Transferred through client params (timeline owner in this case)
+                    :transferred_params => [:user_id] 
+                }
+            ]
+        }
+    ]
+  end
+end
+```
+
+Next, add ` //= require inkwell_timelines` to your js assets (for example - to application.js) and `*= require inkwell_timelines` to your stylesheets assets (for example - to application.css).
+
+*Notice: if you want to modify CSS or JS you can add your modified files and not add default styles/js*
+
+Default partials are located inside the gem - [here](https://github.com/salkar/inkwell_timelines/tree/master/app/views/default_partials).
+You can change this directory to your adding `config.partials_dir = 'your path to partials'` parameter in your `inkwell_timelines.rb` file.
+
+By default, there are 5 partials in this gem (you can change all of them):
+
+```ruby
+_comment.html.erb # Partial for timeline item for comment object
+_multi_selector.html.erb # Partial for selector
+_multi_selector_items.html.erb # Support partial for selector
+_post.html.erb # Partial for post item for comment object
+_tab_menu.html.erb # Partial for timelines block menu
+```
+
+If there are other objects except posts and comments - add partials for them.
+
+## Usage
+
+To form the timeline block for the first showing add into your view:
+```ruby
+<%= inkwell_timelines_tag(block_id, options = {} %>
+```
+For example:
+```ruby
+<%= inkwell_timelines_tag('timelines_block', 
+                          :user_id => User.where(:nick => 'Pushkin').first.id, 
+                          :for_user => current_user) %>
+```
+
+*Notice: config for this block should be*
+
+To on autoload feature create controller for it, add it in the `routes`, add its route to timeline config. For example:
+
+* add `controllers/timeline_controller.rb`
+```ruby
+class TimelineController < ApplicationController
+  def show
+  end
+end
+```
+
+* add route for it - 
+```ruby
+match "/timeline/get" => "timeline#show"
+```
+
+* add its route to timelines config:
+```ruby
+config.autoload_path = 'timeline/get/'
+```
+
+Next, add to created controller:
+```ruby
+@options = inkwell_timelines_get_params(request.body, :additional options => {})
+```
+
+`inkwell_timelines_get_params` forms options for autoload timeline part generation.
+Additional options needs to merge stored on the server with transferred from client options. 
+You may want to save some options on the server for security reasons (for example - `current_user` should not be sent to the client because there it can be changed).
+
+Here you can check the options that came with the client.
+
+At the end of autoload controller method add 
+```ruby
+render :layout => false
+```
+
+Example:
+
+```ruby
+class TimelineController < ApplicationController
+  def show
+    @options = inkwell_timelines_get_params(request.body, :for_user => current_user)
+
+    #Here you can check came from js options. For exapmle:
+    user = User.find @options[:user_id]
+    raise "current user has no permissions to see #{user.nick} timeline" unless current_user.can_see_timeline user
+
+    render :layout => false
+  end
+end
+```
+
+After it create view file for autoload method in controller (in our cases - `views/timeline/show.html.erb`) and add to it 
+```ruby
+<%= inkwell_timelines_autoload_tag(@options) %>
+```
+
+## Sample
+
+Sample located [here](https://github.com/salkar/inkwell_timelines/tree/master/test/dummy).
+To run it:
+```bash
+$ cd inkwell_timelines/test/dummy
+$ bundle install
+$ rake db:create
+$ rake db:migrate
+$ rake db:seed
+$ rails s
+```
+And go to `http://0.0.0.0:3000/` in your browser after it.
+
+## License
+
+Inkwell is Copyright © 2013 Sergey Sokolov. It is free software, and may be redistributed under the terms specified in the MIT-LICENSE file.

data/Rakefile

@@ -0,0 +1,40 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'InkwellTimelines'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/app/assets/javascripts/inkwell_timelines/index.js.erb

@@ -0,0 +1,17 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require_tree .
+
+

data/app/assets/javascripts/inkwell_timelines/inkwell_multi_selector.js

@@ -0,0 +1,216 @@
+var inkwell_multi_selector = {
+    popup_shown: false,
+    current_state: null,
+
+    state_changed: $.Event('state_changed'),
+
+    show_popup: function (action_obj) {
+        this.popup_shown = true;
+        this.current_state = $(action_obj.parent().children('.current_state')[0]).children().text();
+        action_obj.addClass('on');
+        action_obj.find('.dropdown').show();
+    },
+
+    hide_popup: function (action_obj) {
+        if (this.popup_shown) {
+            if (!action_obj) {
+                var dropdown = $('.inkwell_multi_selector .dropdown:visible');
+                action_obj = dropdown.closest('.inkwell_multi_selector .action');
+            }
+            this.popup_shown = false;
+            action_obj.removeClass('on');
+            action_obj.find('.dropdown').hide();
+            if (inkwell_multi_selector.has_changes(action_obj)) {
+                $($(action_obj).closest('.inkwell_multi_selector')).trigger(this.state_changed);
+            }
+        }
+    },
+
+    has_changes: function (action_obj) {
+        result = ($(action_obj.parent().children('.current_state')[0]).children().text() != this.current_state);
+        current_state = null;
+        return result;
+    },
+
+    uncheck_upper_checkboxes: function (next_parent, state_panel, selector_name) {
+        var checkboxes = $(next_parent).children('.checked.checkbox_with_label');
+        if (checkboxes.length == 0) return;
+        $(checkboxes).each(function () {
+            $(state_panel).children('#inkwell_' + selector_name + '_state_' + inkwell_multi_selector.get_id_from_attr_id($(this).attr('id'))).remove();
+        });
+        $(checkboxes).removeClass('checked');
+
+        if (next_parent.hasClass('nested')) {
+            var same_level_divs = next_parent.parent().children('.nested');
+            $(same_level_divs).each(function () {
+                var checked_checkbox = $(this).children('.checked');
+                if (checked_checkbox.length != 0) {
+                    var id = inkwell_multi_selector.get_id_from_attr_id($(checked_checkbox).attr('id'));
+                    inkwell_multi_selector.add_state(state_panel, selector_name, id, checked_checkbox.text());
+                }
+
+            });
+        }
+
+        inkwell_multi_selector.uncheck_upper_checkboxes(next_parent.parent(), state_panel, selector_name);
+    },
+
+    uncheck_tree: function (checkbox) {
+        checkbox.parent().find('.checked').removeClass('checked');
+    },
+
+    action_click_handler: function (action, event) {
+        if ($(event.target).hasClass('dropdown') || $(event.target).closest('.inkwell_multi_selector .dropdown').length != 0) return;
+        inkwell_multi_selector.popup_shown ?
+            inkwell_multi_selector.hide_popup(action) :
+            inkwell_multi_selector.show_popup(action);
+    },
+
+    get_children_checkboxes: function (checkbox, all_levels) {
+        var result = [];
+        var child_divs = checkbox.parent().children('.nested');
+        child_divs.each(function () {
+            if (all_levels) result = $.merge(result, $(this).find('.checkbox_with_label'))
+            else result.push($(this).children('.checkbox_with_label')[0]);
+        });
+        return result;
+    },
+
+    uncheck_checkbox: function (checkbox) {
+        var selector = checkbox.closest('.inkwell_multi_selector');
+        var state_panel = selector.children('.current_state')[0];
+        var selector_name = inkwell_multi_selector.get_selector_name(selector);
+
+        $(checkbox).removeClass('checked');
+        inkwell_multi_selector.change_state_on_uncheck($(checkbox), state_panel, selector_name);
+        inkwell_multi_selector.uncheck_upper_checkboxes($(checkbox).parents(':eq(1)'), state_panel, selector_name);
+    },
+
+    add_state: function (state_panel, selector_name, id, text) {
+        $(state_panel).append(' <span id="inkwell_' + selector_name + '_state_' + id + '">' + text + '</span>');
+    },
+
+    change_state_on_uncheck: function (checkbox, state_panel, selector_name) {
+        var id = inkwell_multi_selector.get_id_from_attr_id(checkbox.attr('id'));
+
+        $(state_panel).children('#inkwell_' + selector_name + '_state_' + id).remove();
+
+        var child_checkboxes = inkwell_multi_selector.get_children_checkboxes(checkbox, false);
+        $(child_checkboxes).each(function () {
+            $(state_panel).append(' <span id="inkwell_' + selector_name + '_state_' + inkwell_multi_selector.get_id_from_attr_id($(this).attr('id')) + '">' + $(this).text() + '</span>');
+        });
+
+        var same_level_divs = checkbox.parents(':eq(1)').children('.nested');
+        $(same_level_divs).each(function () {
+            var checked_checkbox = $(this).children('.checked');
+            if (checked_checkbox.length != 0) {
+                var id = inkwell_multi_selector.get_id_from_attr_id($(checked_checkbox).attr('id'));
+                inkwell_multi_selector.add_state(state_panel, selector_name, id, checked_checkbox.text());
+            }
+
+        });
+    },
+
+    top_checked_checkboxes_ids: function (selector) {
+        var result = [];
+        selector.children('.current_state').children('span').each(function () {
+            var splitted_id = $(this).attr('id').split('_');
+            result.push(splitted_id[splitted_id.length - 1]);
+        });
+        return result;
+    },
+
+    is_all_checked: function (selector) {
+        var first_level_divs = selector.find('.dropdown').children('div');
+        var result = true;
+        first_level_divs.each(function () {
+            if (!result) return;
+            if (!$(this).children('.checkbox_with_label').hasClass('checked')) {
+                result = false;
+            }
+        });
+        return result;
+    },
+
+    change_state_on_check: function (checkbox) {
+        var selector = checkbox.closest('.inkwell_multi_selector');
+        var state_panel = selector.children('.current_state')[0];
+        var selector_name = inkwell_multi_selector.get_selector_name(selector);
+
+        var child_checkboxes = inkwell_multi_selector.get_children_checkboxes(checkbox, true);
+        $(child_checkboxes).each(function () {
+            $(state_panel).children('#inkwell_' + selector_name + '_state_' + inkwell_multi_selector.get_id_from_attr_id($(this).attr('id'))).remove();
+        });
+
+        var id = inkwell_multi_selector.get_id_from_attr_id(checkbox.attr('id'));
+        $(state_panel).append(' <span id="inkwell_' + selector_name + '_state_' + id + '">' + checkbox.text() + '</span>');
+    },
+
+    get_id_from_attr_id: function (attr_id) {
+        var splitted_id = attr_id.split('_');
+        return splitted_id[splitted_id.length - 1];
+    },
+
+    get_selector_name: function (selector) {
+        return selector.attr('id').replace('inkwell_', '');
+    },
+
+    state_click_handler: function (state_item) {
+        this.current_state = $(state_item).parent().children().text();
+        var selector = state_item.closest('.inkwell_multi_selector');
+        var dropdown = selector.find('.dropdown');
+        var selector_name = inkwell_multi_selector.get_selector_name(selector);
+
+        var state_items = state_item.parent().children('span');
+        $(state_items).each(function () {
+            var attr_id = $(this).attr('id');
+            if (attr_id != state_item.attr('id')) {
+                var id = inkwell_multi_selector.get_id_from_attr_id(attr_id);
+                var checkbox = dropdown.find('#inkwell_' + selector_name + '_checkbox_' + id);
+                inkwell_multi_selector.uncheck_tree(checkbox);
+                $(this).remove();
+            }
+        });
+
+        if ($(state_item).parent().children().text() != this.current_state) {
+
+            $(selector).trigger(this.state_changed);
+        }
+        current_state = null;
+    }
+
+};
+
+$(document).ready(function () {
+    $('.inkwell_timelines').on('click', '.inkwell_multi_selector .action', function (event) {
+        inkwell_multi_selector.action_click_handler($(this), event);
+    });
+
+    $(document).on('click', function (event) {
+        if (!inkwell_multi_selector.popup_shown) return;
+        if ($(event.target).closest('.inkwell_multi_selector .action').length == 0) inkwell_multi_selector.hide_popup();
+    });
+
+    $('.inkwell_timelines').on('click', '.inkwell_multi_selector .checkbox_with_label', function () {
+        if ($(this).hasClass('checked')) {
+            inkwell_multi_selector.uncheck_checkbox($(this));
+        } else {
+            inkwell_multi_selector.change_state_on_check($(this));
+            $(this).parent().find('.checkbox_with_label').addClass('checked');
+        }
+    });
+
+    $('.inkwell_timelines').on('click', '.inkwell_multi_selector .collapsed', function () {
+        $(this).removeClass('collapsed').addClass('expanded');
+        $(this).parent().children('.nested').show();
+    });
+
+    $('.inkwell_timelines').on('click', '.inkwell_multi_selector .expanded', function () {
+        $(this).removeClass('expanded').addClass('collapsed');
+        $(this).parent().children('.nested').hide();
+    });
+
+    $('.inkwell_timelines').on('click', '.inkwell_multi_selector .current_state span', function() {
+        inkwell_multi_selector.state_click_handler($(this));
+    });
+});