turbo-scroll 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32d21797cebb4fe6b6f5dc02130949f2d83ba899d1d30d41bbcc1e90cca76a02
-  data.tar.gz: 334e100f9fa988dc2bac5467470d6a33634e00ccfafd488b4a61a6d8e6000983
+  metadata.gz: e965fd74ecaa27efa5443fd7c585381a5e10a03c1b30ae5ab3ded35bd658ccdc
+  data.tar.gz: 991df0ca43b6e75535a7994b51fc68b01773e1d420bda91cf847f65a8f88213f
 SHA512:
-  metadata.gz: aeb2e54b0e4777b84053e154be686cba079ae7278661128c1bc34d8bab4d1b3cd910d2d1d4ca0d5c17d2b69c2e06f2dedf21934276638f13a4088a109ad7570c
-  data.tar.gz: eea9623e8f432b508fb7dd7e236c620cc414a0f016a41928a0c30bd82b3e7e950866c1ed75a351eb9a739e268e24c2858436ec11e0e321a9264e83e78d41214e
+  metadata.gz: e8e69ff2b35a7f55edbd879cad95f5ed25a73b0d0a173bc5e18de0e8e6979dc8aaa834acc2e971799fac4a41bbedc072fa6ee9ab05411a2cbb963bb3e2266de4
+  data.tar.gz: 43a7739af26ba8aa9ed34661150906186be692447723b0b7462ef43144a70cc8cad2e6f2af92936f17bcf8c239801dcd3f32e01787f3b1f3854c0446459a90db

data/README.md

@@ -35,13 +35,33 @@ end
 
 ### index.html.erb|slim
 
-In your index page, make sure you have a DOM element with ID `infinite`
+The simplest is to use the `turbo_scroll_auto` helper and
+nest inside your initial infinite content. This will wrap the
+content with an element with id #infinite that will be
+used to append new content to for infinite scrolling.
+
+
+```slim
+= turbo_scroll_auto page: @articles.next_page_index
+  - @articles.each do |article|
+    = article
+```
+
+Alternatively, in your index page, make sure you have a DOM element with ID `infinite`
 and render inside of it your initial page content.
 
 At the bottom of your page, add the infinite scrolling loader
-by calling the `turbo_scroll_loader` helper and passing the next page index
+by calling the `turbo_scroll_auto` helper and passing the next page index
 if a next page is present.
 
+```slim
+#infinite
+  - @articles.each do |article|
+    = article
+
+= turbo_scroll_auto page: @articles.next_page_index
+```
+
 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.
@@ -51,23 +71,11 @@ 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
-
-```slim
-#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
-
-= turbo_scroll_loader(page: @articles.next_page_index)
-```
-
 If you want to use a different ID, you'll have to pass it on in turbo_stream response.
 
 ### index.turbo_stream.erb|slim
 
-Your turbo_stream response can use the `turbo_scroll_update` helper to
+Your turbo_stream response can use the `turbo_scroll_auto_stream` helper to
 append the next page content and update the current loader with a
 loader for the next page.
 
@@ -75,27 +83,43 @@ 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.
 
 ```slim
-= 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.
+= turbo_scroll_auto_stream page: @articles.next_page_index
   - @articles.each do |article|
     = article
 ```
 
+### More variant (no auto loading, just simple 'more' loading)
+
+```slim
+= turbo_scroll_more page: @articles.next_page_index
+  = render(Articles::Row.with_collection(@articles))
+```
+
+Your turbo_stream response can use the `turbo_scroll_more_stream` helper to
+append the next page content and update the current more loader with a
+more loader for the next page.
+
+articles\index.turbo_stream.slim
+
+```slim
+= turbo_scroll_more_stream page: @articles.next_page_index
+  = render Articles::Row.with_collection(@articles)
+```
+
 ### 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.
 
 ```css
-.articles-table {
+.article.row {
   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 {
+.article.row .col {
   height: 2.75rem;
   display: flex;
   align-items: center;
@@ -104,34 +128,43 @@ can consider using CSS grid as an alternative.
   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) {
+.article.row .col-head {
+  font-weight: bolder;
+}
+
+.article.row .col-filter {
+  padding-left: 0rem;
+  padding-right: 0rem;
+}
+
+.article.row .align-right {
+  justify-content: right;
+}
+
+.article.row.striped:nth-child(2n+1) {
   background-color: #EEEEEE;
 }
 ```
 
 which would go hand in hand with this partial for a record row
 
-```css
-.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
+```slim
+.article.row.striped
+  .col = article.articlenumber
+  .col = article.barcode
+  .col = article.description
+  .col = article.supplier
+  .col.align-right = article.price.print
+  .col.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
-can pass it on as an extra param to the `turbo_scroll_update` helper.
+can pass it on as an extra param to the `turbo_scroll_auto_stream` helper.
 
 The below example illustrates this for the case where your
 DOM ID is `#scroll`.
@@ -139,17 +172,15 @@ DOM ID is `#scroll`.
 index.html.slim
 
 ```slim
-#scroll
+= turbo_scroll_auto page: @articles.next_page_index, id: :scroll
   - @articles.each do |article|
     = article
-
-= turbo_scroll_loader(page: @articles.next_page_index)
 ```
 
 index.turbo_stream.slim
 
 ```slim
-= turbo_scroll_update page: @articles.next_page_index, infinite_dom_id: :scroll
+= turbo_scroll_auto_stream page: @articles.next_page_index, infinite_dom_id: :scroll
   - @articles.each do |article|
     = article
 ```

data/lib/locales/en.yml

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

data/lib/locales/fr.yml

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

data/lib/locales/nl.yml

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

data/lib/locales/ro.yml

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

data/lib/locales/vn.yml

@@ -1,3 +1,4 @@
 ---
 vn:
   click_here: Nhấp vào <a href="%{next_page_path}">đây</a> để tải trang tiếp theo.
+  more: Xem thêm

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

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

data/lib/turbo-scroll/auto.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "turbo-rails"
+
+class TurboScroll::Auto < ViewComponent::Base
+  include Turbo::FramesHelper
+
+  attr_reader :page, :loader_dom_id, :loading_indicator
+
+  def initialize(page:, loader_dom_id: :loader, loading_indicator: true)
+    @page = page
+    @loader_dom_id = loader_dom_id
+    @loading_indicator = loading_indicator
+  end
+
+  def query_params
+    @query_params ||=
+      request.query_parameters.except(:page, :raw, :format)
+  end
+
+  def next_page_path
+    url_for(page: page, **query_params)
+  end
+
+  def next_page_stream_path
+    url_for(format: :turbo_stream, page: page, **query_params)
+  end
+
+  def render?
+    page
+  end
+end

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

@@ -0,0 +1,7 @@
+= turbo_stream.append(infinite_dom_id)
+  = content
+
+= turbo_stream.replace(loader_dom_id)
+  = render(TurboScroll::Auto.new(page: page, \
+                                 loader_dom_id: loader_dom_id, \
+                                 loading_indicator: loading_indicator))

data/lib/turbo-scroll/auto_stream.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "turbo-rails"
+
+class TurboScroll::AutoStream < ViewComponent::Base
+  include Turbo::FramesHelper
+  include Turbo::StreamsHelper
+
+  attr_reader :page, :loader_dom_id, :infinite_dom_id, :loading_indicator
+
+  def initialize(page:, loader_dom_id: :loader, loading_indicator:, infinite_dom_id: :infinite)
+    @page = page
+    @infinite_dom_id = infinite_dom_id
+    @loading_indicator = loading_indicator
+    @loader_dom_id = loader_dom_id
+  end
+end

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

@@ -0,0 +1,12 @@
+turbo-frame id=loader_dom_id
+  a.more href=next_page_path onclick="more('#{next_page_stream_path}')" =I18n.t(".more")
+
+  javascript:
+    function more(url) {
+      event.preventDefault();
+      fetch(url)
+        .then(response => response.text())
+        .then(html => Turbo.renderStreamMessage(html))
+        .catch(error => console.warn('Something went wrong.', error));
+    }
+

data/lib/turbo-scroll/{loader.rb → more.rb}

@@ -2,14 +2,14 @@
 
 require "turbo-rails"
 
-class TurboScroll::Loader < ViewComponent::Base
+class TurboScroll::More < ViewComponent::Base
   include Turbo::FramesHelper
 
-  attr_reader :page, :loading_indicator
+  attr_reader :page, :loader_dom_id
 
-  def initialize(page:, loading_indicator: true)
+  def initialize(page:, loader_dom_id: :loader)
     @page = page
-    @loading_indicator = loading_indicator
+    @loader_dom_id = loader_dom_id
   end
 
   def query_params

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

@@ -0,0 +1,5 @@
+= turbo_stream.append(infinite_dom_id)
+  = content
+
+= turbo_stream.replace(loader_dom_id)
+  = render(TurboScroll::More.new(page: page, loader_dom_id: loader_dom_id))

data/lib/turbo-scroll/more_stream.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "turbo-rails"
+
+class TurboScroll::MoreStream < ViewComponent::Base
+  include Turbo::FramesHelper
+  include Turbo::StreamsHelper
+
+  attr_reader :page, :loader_dom_id, :infinite_dom_id
+
+  def initialize(page:, loader_dom_id: :loader, infinite_dom_id: :infinite)
+    @page = page
+    @loader_dom_id = loader_dom_id
+    @infinite_dom_id = infinite_dom_id
+  end
+end

data/lib/turbo-scroll/railtie.rb

@@ -1,8 +1,10 @@
 module TurboScroll
   class Railtie < ::Rails::Railtie
     initializer "turbo-scrolls.load_components" do
-      require_relative "update"
-      require_relative "loader"
+      require_relative "auto"
+      require_relative "auto_stream"
+      require_relative "more"
+      require_relative "more_stream"
       require_relative "spin_loader"
     end
     initializer "turbo-scrolls.view_helpers" do |app|

data/lib/turbo-scroll/spin_loader.rb

@@ -3,13 +3,7 @@
 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
+  #
+  def initialize()
   end
 end

data/lib/turbo-scroll/version.rb

@@ -1,3 +1,3 @@
 module TurboScroll
-  VERSION = "0.1.3"
+  VERSION = "0.1.4"
 end

data/lib/turbo-scroll.rb

@@ -3,19 +3,50 @@ require "turbo-scroll/railtie" if defined?(Rails::Railtie)
 
 module TurboScroll
   module ViewHelpers
-    def turbo_scroll_loader(page:, loading_indicator: true)
-      render(TurboScroll::Loader.new(page: page, loading_indicator: loading_indicator))
+
+    #
+    def turbo_scroll_auto(page:, loader_dom_id: :loader, loading_indicator: true, id: :infinite, &block)
+      if block_given?
+        safe_concat(%{<div id="#{id}">})
+        concat(capture(&block))
+        safe_concat("</div>")
+      end
+      render(TurboScroll::Auto.new(page: page, loader_dom_id: loader_dom_id, loading_indicator: loading_indicator))
+    end
+
+    #
+    def turbo_scroll_more(page:, loader_dom_id: :loader, id: :infinite, &block)
+      if block_given?
+        safe_concat(%{<div id="#{id}">})
+        concat(capture(&block))
+        safe_concat("</div>")
+      end
+      render(TurboScroll::More.new(page: page, loader_dom_id: loader_dom_id))
     end
 
-    def turbo_scroll_update(page:, infinite_dom_id: :infinite, loading_indicator: true, &block)
+    #
+    def turbo_scroll_auto_stream(page:, loader_dom_id: :loader, infinite_dom_id: :infinite, loading_indicator: true, &block)
       render(
-        TurboScroll::Update.new(
+        TurboScroll::AutoStream.new(
           page: page,
+          loader_dom_id: loader_dom_id,
           infinite_dom_id: infinite_dom_id,
           loading_indicator: loading_indicator
         ),
         &block
       )
     end
+
+    #
+    def turbo_scroll_more_stream(page:, loader_dom_id: :loader, infinite_dom_id: :infinite, &block)
+      render(
+        TurboScroll::MoreStream.new(
+          page: page,
+          loader_dom_id: loader_dom_id,
+          infinite_dom_id: infinite_dom_id
+        ),
+        &block
+      )
+    end
   end
 end

metadata

@@ -1,69 +1,69 @@
 --- !ruby/object:Gem::Specification
 name: turbo-scroll
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Koen handekyn
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-19 00:00:00.000000000 Z
+date: 2022-08-22 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: TurboScroll is a minimalistic gem that provides infinite scrolling for
@@ -82,16 +82,19 @@ files:
 - 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/auto.html.slim
+- lib/turbo-scroll/auto.rb
+- lib/turbo-scroll/auto.scss
+- lib/turbo-scroll/auto_stream.html.slim
+- lib/turbo-scroll/auto_stream.rb
+- lib/turbo-scroll/more.html.slim
+- lib/turbo-scroll/more.rb
+- lib/turbo-scroll/more_stream.html.slim
+- lib/turbo-scroll/more_stream.rb
 - 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
 homepage: https://github.com/allcrux/turbo-scroll
 licenses:

data/lib/tasks/turbo_scroll_tasks.rake

@@ -1,4 +0,0 @@
-# desc "Explaining what the task does"
-# task :turbo-scroll do
-#   # Task goes here
-# end

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

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

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

@@ -1,5 +0,0 @@
-= turbo_stream.append(infinite_dom_id)
-  = content
-
-= turbo_stream.replace(:infinite_loader)
-  = render(TurboScroll::Loader.new(page: page, loading_indicator: loading_indicator))

data/lib/turbo-scroll/update.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-require "turbo-rails"
-
-class TurboScroll::Update < ViewComponent::Base
-  include Turbo::FramesHelper
-  include Turbo::StreamsHelper
-
-  attr_reader :page, :infinite_dom_id, :loading_indicator
-
-  def initialize(page:, loading_indicator:, infinite_dom_id: :infinite)
-    @page = page
-    @infinite_dom_id = infinite_dom_id
-    @loading_indicator = loading_indicator
-  end
-end