infienity 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e14ab0327e7a89967c4449bd94309d1a49517c54edc633c1800bf367c80a2d35
-  data.tar.gz: e1b0898f2c52bf281b3620ecbdc1e311871308e6ca9cf4d2eb09ad1fc864b6d5
+  metadata.gz: cd2ea4ac28e3f022e0ccb9506f9736c75f69d8b527636f5941945204232702f7
+  data.tar.gz: 7fdda8a96b8d6af219bf189af127dc2c32be7382f92dbcf7b464013b5c67939b
 SHA512:
-  metadata.gz: 561b7eb224d49fcf22531db57cac7a33dc4d04b1e919dce22910f85fd6b2e26c56e59e904cc755a6f0b338142db9a98181fef1d83a2786e20a1c4a1bd022f2b1
-  data.tar.gz: c420259d0bb739059bb0bda8b3bb59396b26193c0c36044a03a934d14ce71e915d020eee610f484a398c39eb1169b2bcbdad34194c96a80a8c24a01dcfc43afe
+  metadata.gz: 48be04b7244d1ae386f97a8a7c8a9cf978a74526e464b87f216da74439fdfd567e51ddb8c59a02d99f09bb90734683859a64580aa5064b439bd7f190d04466e9
+  data.tar.gz: eaca0a347d91ba2c1af4b851363e3f10dc848b3542262f35ac602162f062acd2af6f9ce2b7d2ff1bb991f92f4a448d37016f1be4fd52f808332da9d24e00d639

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    infienity (0.1.0)
+    infienity (0.1.1)
       rails
 
 GEM

data/README.md

@@ -1,15 +1,15 @@
 # Infienity
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/infienity`. To experiment with that code, run `bin/console` for an interactive prompt.
+Infienity provides infinity scroll, combined with sort and search via web-socket connection. Since infinity scroll requires continuous calls to request new parts of the data, requesting new data via a permanent web-socket connection should be a cleaner approach than using traditional AJAX calls.
 
-TODO: Delete this and the text above, and describe your gem
+This gem is dependent on [Fie]("https://github.com/raen79/fie"), a gem that makes DOM manipulations through web sockets possible. It works by... (TODO).
 
 ## Installation
 
 Add this line to your application's Gemfile:
-
 ```ruby
 gem 'infienity'
+gem 'fie' # dependency, use your preferred version
 ```
 
 And then execute:
@@ -20,15 +20,162 @@ Or install it yourself as:
 
     $ gem install infienity
 
+Add Infienity's javascript in your project, by adding the following lines into `app/assets/javascripts/application.js`:
+
+```ruby
+# just before require_tree
+//= require fie
+//= require infienity
+```
+
+As Infienity is dependent on Fie, you will have to follow the regular [Fie setup]("https://github.com/raen79/fie"), which also includes setting up Redis.
+
 ## Usage
+For both infinity scroll, searching and sorting you will need to perform the following steps:
 
-TODO: Write usage instructions here
+Add the following line in the model you want to perform the actions on:
+```ruby
+extend Infienity::Model
+```
+
+Create a commander for your model (for front-end manipulation). The commander should be correspondant to the controller of your model (path: `app/commanders/[name]_commander).
+```ruby
+class HomeCommander < Fie::Commander
+  extend Infienity::Commander
+  commander_assigns :users # model name in this format
+end
+```
+
+In your controller method, you will need to assign some variables, which will hold the state. you must declare all of them in order for the infinity scroll to work:
+```ruby
+@index = 0
+@per_page = 10 # choose your preferred amount
+```
+
+### Pagination
+
+In your controller method, perform the pagination of the infinity scroll like so:
+```ruby
+@users = User.paginate
+```
+
+In your view, for each data entry, wrap it up in a span, with the following class and custom attribute. `infienity-model` should include your model name, in plural.
+Example:
+```ruby
+<% @users.each do |u| %>
+    <span class="paginate" infienity-model="users">
+        Name: <%= u.full_name %> <br/>
+        Username: <%= u.username %>
+    </span>
+<% end %>
+```
+
+### Search
+
+In your controller method, add the following variables, in order to hold the state:
+```ruby
+@search_attribute = 'username'
+@search_string = ''
+```
+
+In your view, you can use this predefined layout:
+```ruby
+<%= render template: 'layouts/search', locals: { assign: "users", search_string: @search_string } %>
+```
+
+Or use html in this manner:
+```html
+<input type="text" name="search_string" value="<%= @search_string %>" fie-keyup="filter_users" > </input>
+```
+Note: be careful to put the correct assign for `fie-keyup` attribute
+
+### Sort
+
+In your controller method, add the following variables, in order to hold the state:
+```ruby
+@sorting_dropdown_options =
+    {
+    "Username (A-Z)" => [:username, :asc],
+    "Username (Z-A)" => [:username, :desc],
+    "Date (Asc)" => [:created_at, :asc],
+    "Date (Desc)" => [:created_at, :desc]
+    }
+@selected_dropdown_option = "Username (A-Z)"
+```
+- The keys in the `@sorting_dropdown_options` are the values the user is going to see.
+- The first value in `@sorting_dropdown_options` is the model attruibute, and the second is always `:asc` or `:desc`.
+- The `@selected_dropdown_option` must correspond to one of the keys stated in `@sorting_dropdown_options`
+
+If you use a custom dropdown using `<li>` elements, you can use this template:
+```ruby
+<%= render
+  template: 'layouts/sort',
+  locals:
+    {
+      dropdown_options: @sorting_dropdown_options,
+      current_option: @selected_dropdown_option,
+      assign: "users"
+    }
+%>
+```
+
+Or for a basic `<select>` dropdown:
+```ruby
+<%= render
+  template: 'layouts/sort_select',
+  locals: {
+    dropdown_options: @sorting_dropdown_options,
+    current_option: @selected_dropdown_option,
+    assign: "users"
+  }
+%>
+```
+
+Or use html in this manner:
+```html
+<div class="dropdown">
+    <button type="button" data-toggle="dropdown"> <%= @selected_dropdown_option %>
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+        <% @selected_dropdown_option.each do |key,val| %>
+            <li fie-click="sort_users" fie-parameters= "<%= { sort: {key => val} }.to_json %>"> <%= key %> </li>
+        <% end %>
+    </ul>
+</div>
+```
+Note: be careful to put the correct assign for `fie-click` attribute
+
+### Template options
+
+To style the html in the templates, add the `options` hash inside the locals hash, in this manner:
+```ruby
+<%= render
+  template: 'layouts/sort',
+  locals:
+    {
+      dropdown_options: @sorting_dropdown_options,
+      current_option: @selected_dropdown_option,
+      assign: "users",
+      options: { class: "btn btn-primary dropdown-toggle" }
+    }
+%>
+```
+
+Supported options:
+- `:id`
+- `:class`
+- `:name`
 
 ## Development
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+Your first step is to run `npm install` within the root folder in order to install the relevant NodeJS packages.
+
+To work on the JavaScript, begin by running `npm run build`. This will start a watcher that will automatically transpile your ES6 within the `ib/javascripts` folder into a bundle within `vendor/javascripts/infienity.js` using webpacker.
+
+The Ruby files can be found within `lib/infienity` and their development is the same as in any other gem.
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+Please add tests if you add new features or resolve bugs.
 
 ## Contributing
 

data/infienity.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |spec|
   spec.email         = ["ioana.sbob@gmail.com"]
 
   spec.summary       = %q{summary}
-  spec.description   = %q{description}
+  spec.description   = %q{Infinity scroll, search and sort via web socket connection.}
   spec.homepage      = "https://github.com/ioanabob/infienity"
   spec.license       = "MIT"
 

data/lib/infienity/version.rb

@@ -1,3 +1,3 @@
 module Infienity
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/lib/layouts/search.html.erb

@@ -1 +1,8 @@
-<input type="text" name="search_string" value="<%= search_string %>" fie-keyup="filter_<%= assign %>" > </input>
+<input
+  type="text"
+  class="<%= options[:class] %>"
+  id="<%= options[:id] %>"
+  name="search_string <%= options[:name] %>"
+  value="<%= search_string %>"
+  fie-keyup="filter_<%= assign %>" >
+</input>

data/lib/layouts/sort_select.html.erb

@@ -1,4 +1,10 @@
-<select fie-change="sort_select_<%= assign %>">
+<select
+  class="<%= options[:class] %>"
+  id="<%= options[:id] %>"
+  name="<%= options[:name] %>"
+  value="<%= search_string %>"
+  fie-keyup="filter_<%= assign %>" >
+  fie-change="sort_select_<%= assign %>">
   <% dropdown_options.each do |key,val| %>
     <option value="<%= {key => val}.to_json %>"> <%= key %> </option>
   <% end %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: infienity
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Ioana Surdu-Bob
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-12-17 00:00:00.000000000 Z
+date: 2018-12-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -66,7 +66,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: description
+description: Infinity scroll, search and sort via web socket connection.
 email:
 - ioana.sbob@gmail.com
 executables: []
@@ -94,7 +94,7 @@ files:
 - lib/infienity/view.rb
 - lib/javascripts/infienity.js
 - lib/layouts/search.html.erb
-- lib/layouts/sort_li.html.erb
+- lib/layouts/sort.html.erb
 - lib/layouts/sort_select.html.erb
 - package-lock.json
 - package.json