turbo-scroll 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 23360c1f88090467e027eea7b95d0e26124eaf84a88a6b61d92ff4383e5c7547
-  data.tar.gz: 1c530abf7d4c18357db082d3c537ccc11304d9a25b18a38566b9df52762f67c1
+  metadata.gz: 795c13de80b15a25b9b37dcd9944855ac52c8b5270b0acfce62a959feddb5bec
+  data.tar.gz: 758a95cedc0db75a01c2619bc0eae553bc94afdabd514333c04d547942952cc4
 SHA512:
-  metadata.gz: 5655f6dfb6f34dd1811713562de9c19bf0af16acdd3a2e10d1652e9eea90d42f2bc5139eacabf130a91fa06ff7e4a577408c4739426e7059d200deb3494946bb
-  data.tar.gz: da875aded8920791a105d033078d89c394acc08fb5fc056049256cb3707fd3fc0cd1d9849cb8e09136da2640c7262b1bc2d675384e5731c9d5e0f71f152ced50
+  metadata.gz: 8353ba4300980c23841f3ea261b871fe33f26a9766a4b6ba5892c876b8c6c57d5f321a012b5965d40f4b5f5a07292cdb20ac55b278ab455b4b2d998301ab4763
+  data.tar.gz: 0d2c3b2866a548b54b2cf79c8cc8b1953f1b4f399b7599f72b2f37e481f331ac63d1db7e6bd2d29b9ed40893cb0af3b2715736063e13d536c387bf549d8bc7cf

data/README.md

@@ -3,6 +3,17 @@
 TurboScroll is a minimalistic gem that provides infinite scrolling for Rails based applications
 using Turbo.
 
+Why a new gem? Leveraging Turbo we can build a very small and efficient implementation
+for infinite page scrolling without extra dependencies.
+
+It's made to be independent from your choice of pagination.
+You can use the [next-pageable](https://github.com/allcrux/next-pageable) gem, which
+is another minimalistic gem for very basic paging leveraging Rails concerns, to just
+provide the functionality you need for infinite scrolling and avoiding a count query
+on each page request (Your main page might still do a count query but you won't
+be repeating them when requesting next page data behind the scenes.)
+
+
 Underlying it depends on ViewComponent and Slim but these are not forced upon the user.
 
 ## Usage
@@ -12,6 +23,8 @@ Underlying it depends on ViewComponent and Slim but these are not forced upon th
 Make sure your index action responds both to html and turbo_stream
 
 ```
+    @articles = Article.scoped.page(params[:page]) # next-pageable
+
     respond_to do |format|
       format.html
       format.turbo_stream
@@ -27,14 +40,21 @@ At the bottom of your page, add the infinite scrolling loader
 by calling the `turbo_scroll_loader` helper and passing the next page index
 if a next page is present.
 
-You could use the [next_pageable](https://github.com/allcrux/next_pageable) gem
-but one can also use any other pagination gem of choice.
+This gem currently assumes that the page parameter is called `page`, so in
+your controller make sure you use that parameter for selecting
+the records for a given page.
 
-#### Slim Example
+When the loader component becomes visible, it will do 2 things
+
+- append the next page to the #infinite dom id
+- update the loader to load the next page (when present)
 
+#### Slim Example
 
 ```
 #infinite
+  / render your page fragment here in whatever structure you desire
+  / and extract it into a partial or a component to avoid repition, if desired.
   - @articles.each do |article|
     = article
 
@@ -49,15 +69,63 @@ Your turbo_stream response can use the `turbo_scroll_update` helper to
 append the next page content and update the current loader with a
 loader for the next page.
 
-When using the [next_pageable](https://github.com/allcrux/next_pageable) gem
+When using the [next-pageable](https://github.com/allcrux/next-pageable) gem
 the next_page_index is already present on the collection when a next page exists.
 
 ```
 = turbo_scroll_update page: @articles.next_page_index
+  / render your page fragment here in whatever structure you desire
+  / and extract it into a partial or a component to avoid repition, if desired.
   - @articles.each do |article|
     = article
 ```
 
+### An HTML table alternative for table layouts using CSS grids
+
+As HTML is pretty picky on the tags allowed inside 'table', 'tr', 'td', etc you
+can consider using CSS grid as an alternative.
+
+```
+.articles-table {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 8fr) minmax(0, 2fr) minmax(0, 1fr) 3em;
+  max-width: 100%;
+  width: 100%;
+}
+
+.articles-table .col {
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.articles-table .col-striped:nth-child(12n+7),
+.articles-table .col-striped:nth-child(12n+8),
+.articles-table .col-striped:nth-child(12n+9),
+.articles-table .col-striped:nth-child(12n+10),
+.articles-table .col-striped:nth-child(12n+11),
+.articles-table .col-striped:nth-child(12n+12) {
+  background-color: #EEEEEE;
+}
+```
+
+which would go hand in hand with this partial for a record row
+
+```
+.col.col-striped = article.articlenumber
+.col.col-striped = article.barcode
+.col.col-striped = article.description
+.col.col-striped = article.supplier
+.col.col-striped.align-right = article.price.print
+.col.col-striped.align-right
+  a.btn.btn-sm.btn-secondary href=edit_article_path(article)
+    i.bi.bi-pencil
+```
+
+
 ### Using a different DOM ID
 
 In case you want or need to use a different DOM ID you
@@ -84,26 +152,15 @@ index.turbo_stream.slim
     = article
 ```
 
-
-
-### index.
-
 ## Installation
-Add this line to your application's Gemfile:
 
-```ruby
-gem "turbo-scroll"
-```
+Install the gem and add to the application's Gemfile by executing:
 
-And then execute:
-```bash
-$ bundle
-```
+    $ bundle add turbo-scroll
 
-Or install it yourself as:
-```bash
-$ gem install turbo-scroll
-```
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+    $ gem install turbo-scroll
 
 ## License
 

data/Rakefile

@@ -1,3 +1,5 @@
 require "bundler/setup"
 
 require "bundler/gem_tasks"
+
+task default: %i[rubocop]

data/lib/locales/en.yml

@@ -0,0 +1,3 @@
+---
+en:
+  click_here: Click <a href="%{next_page_path}">here<a> to force load the next page.

data/lib/locales/fr.yml

@@ -0,0 +1,3 @@
+---
+fr:
+  click_here: Cliquez <a href="%{next_page_path}">ici<a> pour charger la page suivante.

data/lib/locales/nl.yml

@@ -0,0 +1,3 @@
+---
+nl:
+  click_here: Klik <a href="%{next_page_path}">hier<a> voor de volgende pagina.

data/lib/locales/ro.yml

@@ -0,0 +1,3 @@
+---
+ro:
+  click_here: Faceți clic <a href="%{next_page_path}">aici<a> pentru a încărca pagina următoare.

data/lib/locales/vn.yml

@@ -0,0 +1,3 @@
+---
+fr:
+  click_here: Nhấp vào <a href="%{next_page_path}">đây<a> để tải trang tiếp theo.

data/lib/turbo-scroll/loader.html.slim

@@ -1,3 +1,4 @@
 = turbo_frame_tag :infinite_loader, src: next_page_stream_path, loading: "lazy", target: "_top"
   .page-loading
-    p ==t(".click_here", next_page_path: next_page_path)
+    p == I18n.t(".click_here", next_page_path: next_page_path)
+    = render(TurboScroll::SpinLoader.new(loading_indicator: loading_indicator))

data/lib/turbo-scroll/loader.rb

@@ -5,10 +5,11 @@ require "turbo-rails"
 class TurboScroll::Loader < ViewComponent::Base
   include Turbo::FramesHelper
 
-  attr_reader :page
+  attr_reader :page, :loading_indicator
 
-  def initialize(page:)
+  def initialize(page:, loading_indicator: true)
     @page = page
+    @loading_indicator = loading_indicator
   end
 
   def query_params
@@ -28,4 +29,3 @@ class TurboScroll::Loader < ViewComponent::Base
     page
   end
 end
-

data/lib/turbo-scroll/loader.scss

@@ -1,6 +1,9 @@
 .page-loading {
   height: 15.5em;
   padding-top: 4em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .page-loading p {

data/lib/turbo-scroll/railtie.rb

@@ -3,11 +3,13 @@ module TurboScroll
     initializer "turbo-scrolls.load_components" do
       require_relative "update"
       require_relative "loader"
+      require_relative "spin_loader"
     end
-    initializer "turbo-scrolls.view_helpers" do
+    initializer "turbo-scrolls.view_helpers" do |app|
       ActiveSupport.on_load(:action_view) do
         include TurboScroll::ViewHelpers
       end
+      app.config.i18n.load_path += Dir[File.expand_path(File.join(File.dirname(__FILE__), '../locales', '*.yml')).to_s]
     end
   end
 end

data/lib/turbo-scroll/spin_loader.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "turbo-rails"
+
+class TurboScroll::SpinLoader < ViewComponent::Base
+  attr_reader :loading_indicator
+
+  def initialize(loading_indicator: true)
+    @loading_indicator = loading_indicator
+  end
+
+  def render?
+    loading_indicator
+  end
+end

data/lib/turbo-scroll/spin_loader.slim

@@ -0,0 +1,50 @@
+css:
+  .loader {
+    display: inline-block;
+    position: relative;
+    width: 45px;
+    height: 45px;
+    margin: auto;
+  }
+  .loader div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    margin: 8px 0px;
+    border: 3px solid #00afd4;
+    border-radius: 50%;
+    animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #00afd4 transparent transparent transparent;
+  }
+  .loader div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  .loader div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  .loader div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+  .page-loading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @keyframes loader {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+.loader
+  div
+  div
+  div
+  div

data/lib/turbo-scroll/update.html.slim

@@ -2,4 +2,4 @@
   = content
 
 = turbo_stream.replace(:infinite_loader)
-  = render(TurboScroll::Loader.new(page: page))
+  = render(TurboScroll::Loader.new(page: page, loading_indicator: loading_indicator))

data/lib/turbo-scroll/update.rb

@@ -6,12 +6,11 @@ class TurboScroll::Update < ViewComponent::Base
   include Turbo::FramesHelper
   include Turbo::StreamsHelper
 
-  attr_reader :page
-  attr_reader :infinite_dom_id
+  attr_reader :page, :infinite_dom_id, :loading_indicator
 
-  def initialize(page:, infinite_dom_id: :infinite)
+  def initialize(page:, loading_indicator:, infinite_dom_id: :infinite)
     @page = page
     @infinite_dom_id = infinite_dom_id
+    @loading_indicator = loading_indicator
   end
 end
-

data/lib/turbo-scroll/version.rb

@@ -1,3 +1,3 @@
 module TurboScroll
-  VERSION = "0.1.0"
+  VERSION = "0.1.2"
 end

data/lib/turbo-scroll.rb

@@ -3,12 +3,19 @@ require "turbo-scroll/railtie" if defined?(Rails::Railtie)
 
 module TurboScroll
   module ViewHelpers
-    def turbo_scroll_loader(page:)
-      render(TurboScroll::Loader.new(page: page))
+    def turbo_scroll_loader(page:, loading_indicator: true)
+      render(TurboScroll::Loader.new(page: page, loading_indicator: loading_indicator))
     end
 
-    def turbo_scroll_update(page:, infinite_dom_id: :infinite, &block)
-      render(TurboScroll::Update.new(page: page, infinite_dom_id: infinite_dom_id), &block)
+    def turbo_scroll_update(page:, infinite_dom_id: :infinite, loading_indicator: true, &block)
+      render(
+        TurboScroll::Update.new(
+          page: page,
+          infinite_dom_id: infinite_dom_id,
+          loading_indicator: loading_indicator
+        ),
+        &block
+      )
     end
   end
 end

metadata

@@ -1,72 +1,73 @@
 --- !ruby/object:Gem::Specification
 name: turbo-scroll
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Koen handekyn
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-05 00:00:00.000000000 Z
+date: 2022-08-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '6'
 - !ruby/object:Gem::Dependency
   name: turbo-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '2'
 - !ruby/object:Gem::Dependency
   name: slim
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '4'
-description: Description of TurboScroll.
+description: TurboScroll is a minimalistic gem that provides infinite scrolling for
+  Rails based applications using Turbo.
 email:
 - koen@handekyn.com
 executables: []
@@ -76,12 +77,19 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- lib/locales/en.yml
+- lib/locales/fr.yml
+- lib/locales/nl.yml
+- lib/locales/ro.yml
+- lib/locales/vn.yml
 - lib/tasks/turbo_scroll_tasks.rake
 - lib/turbo-scroll.rb
 - lib/turbo-scroll/loader.html.slim
 - lib/turbo-scroll/loader.rb
 - lib/turbo-scroll/loader.scss
 - lib/turbo-scroll/railtie.rb
+- lib/turbo-scroll/spin_loader.rb
+- lib/turbo-scroll/spin_loader.slim
 - lib/turbo-scroll/update.html.slim
 - lib/turbo-scroll/update.rb
 - lib/turbo-scroll/version.rb
@@ -93,6 +101,7 @@ metadata:
   homepage_uri: https://github.com/allcrux/turbo-scroll
   source_code_uri: https://github.com/allcrux/turbo-scroll
   changelog_uri: https://github.com/allcrux/turbo-scroll/blob/main/CHANGELOG.md
+  rubygems_mfa_required: 'true'
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -111,5 +120,5 @@ requirements: []
 rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
-summary: Summary of TurboScroll.
+summary: Modern infinite page scrolling for Rails.
 test_files: []