better naming of json classes

lib/pagy/extras/compact.rb

@@ -18,7 +18,7 @@ def pagy_nav_compact(pagy, id=caller(1,1)[0].hash)
         html << %(<span class="pagy-compact-input" style="margin: 0 0.6rem;">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{p_pages}</span> )
         html << (p_next ? %(<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>)
                         : %(<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>))
-      html << %(</nav><script type="application/json" class="pagy-compact">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
+      html << %(</nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
     end
 
     # Compact pagination for bootstrap: it returns the html with the series of links to the pages
@@ -35,7 +35,7 @@ def pagy_nav_compact_bootstrap(pagy, id=caller(1,1)[0].hash)
         html << %(<div class="pagy-compact-input btn btn-primary disabled">#{pagy_t('pagy.compact.page')} #{input} #{pagy_t('pagy.compact.of')} #{p_pages}</div>)
         html << (p_next ? link.call(p_next, pagy_t('pagy.nav.next'), 'aria-label="next" class="next btn btn-primary"')
                         : %(<a class="next btn btn-primary disabled" href="#">#{pagy_t('pagy.nav.next')}</a>))
-      html << %(</div></nav><script type="application/json" class="pagy-compact">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
+      html << %(</div></nav><script type="application/json" class="pagy-compact-json">["#{id}", "#{MARKER}", "#{p_page}"]</script>)
     end
 
   end

lib/pagy/extras/items.rb

@@ -36,7 +36,7 @@ def pagy_items_selector(pagy, id=caller(1,1)[0].hash)
         html << %(<a href="#{pagy_url_for("#{MARKER}-page-", pagy)}"></a>)
         input = %(<input type="number" min="1" max="#{p_vars[:max_items]}" value="#{p_items}" style="padding: 0; text-align: center; width: #{p_items.to_s.length+1}rem;">)
         html << %(#{pagy_t('pagy.items.show')} #{input} #{pagy_t('pagy.items.items')})
-      html << %(</span><script type="application/json" class="pagy-items">["#{id}", "#{MARKER}", #{pagy.from}]</script>)
+      html << %(</span><script type="application/json" class="pagy-items-json">["#{id}", "#{MARKER}", #{pagy.from}]</script>)
     end
 
   end

lib/pagy/extras/javascripts/pagy.js

@@ -66,7 +66,7 @@ Pagy.responsive = function(id, tags, widths, series){
 
 Pagy.init = function(){
               ['compact', 'items', 'responsive'].forEach(function(name){
-                Array.from(document.getElementsByClassName("pagy-"+name)).forEach(function(json) {
+                Array.from(document.getElementsByClassName("pagy-"+name+"-json")).forEach(function(json) {
                   Pagy[name].apply(null, JSON.parse(json.innerHTML))
                 })
               })

lib/pagy/extras/responsive.rb

@@ -46,7 +46,7 @@ def pagy_nav_responsive(pagy, id=caller(1,1)[0].hash)
       end
       tags['next'] = (p_next ? %(<span class="page next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</span>)
                              : %(<span class="page next disabled">#{pagy_t('pagy.nav.next')}</span>))
-      script = %(<script type="application/json" class="pagy-responsive">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
+      script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
       %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive pagination" role="navigation" aria-label="pager"></nav>#{script})
     end
 
@@ -65,7 +65,7 @@ def pagy_nav_responsive_bootstrap(pagy, id=caller(1,1)[0].hash)
       end
       tags['next'] = (p_next ? %(<li class="page-item next">#{link.call p_next, pagy_t('pagy.nav.next'), 'aria-label="next"'}</li>)
                              : %(<li class="page-item next disabled"><a href="#" class="page-link">#{pagy_t('pagy.nav.next')}</a></li>))
-      script = %(<script type="application/json" class="pagy-responsive">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
+      script = %(<script type="application/json" class="pagy-responsive-json">["#{id}", #{tags.to_json},  #{responsive[:widths].to_json}, #{responsive[:series].to_json}]</script>)
       %(<nav id="pagy-nav-#{id}" class="pagy-nav-responsive-bootstrap pagination" role="navigation" aria-label="pager"><ul class="pagination"></ul></nav>#{script})
     end
 

test/pagy/extras/compact_test.rb

@@ -23,7 +23,7 @@ def test_pagy_nav_compact_page_1
         %(<span class="pagy-compact-input" style="margin: 0 0.6rem;">Page <input type="number" min="1" max="6" value="1" style="padding: 0; text-align: center; width: 2rem;"> of 6</span> ) +
         %(<span class="page next"><a href="/foo?page=2"   rel="next" aria-label="next">Next&nbsp;&rsaquo;</a></span>) +
       %(</nav>) +
-      %(<script type="application/json" class="pagy-compact">["#{id}", "#{Pagy::Frontend::MARKER}", "1"]</script>),
+      %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "1"]</script>),
       html
       )
     end
@@ -39,7 +39,7 @@ def test_pagy_nav_compact_page_3
         %(<span class="pagy-compact-input" style="margin: 0 0.6rem;">Page <input type="number" min="1" max="6" value="3" style="padding: 0; text-align: center; width: 2rem;"> of 6</span> ) +
         %(<span class="page next"><a href="/foo?page=4"   rel="next" aria-label="next">Next&nbsp;&rsaquo;</a></span>) +
       %(</nav>) +
-      %(<script type="application/json" class="pagy-compact">["#{id}", "#{Pagy::Frontend::MARKER}", "3"]</script>),
+      %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "3"]</script>),
       html
       )
     end
@@ -55,7 +55,7 @@ def test_pagy_nav_compact_page_6
         %(<span class="pagy-compact-input" style="margin: 0 0.6rem;">Page <input type="number" min="1" max="6" value="6" style="padding: 0; text-align: center; width: 2rem;"> of 6</span> ) +
         %(<span class="page next disabled">Next&nbsp;&rsaquo;</span>) +
       %(</nav>) +
-      %(<script type="application/json" class="pagy-compact">["#{id}", "#{Pagy::Frontend::MARKER}", "6"]</script>),
+      %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "6"]</script>),
       html
       )
     end
@@ -84,7 +84,7 @@ def test_pagy_nav_compact_bootstrap_page_1
           %(<a href="/foo?page=2"   rel="next" aria-label="next" class="next btn btn-primary">Next&nbsp;&rsaquo;</a>) +
         %(</div>) +
       %(</nav>) +
-      %(<script type="application/json" class="pagy-compact">["#{id}", "#{Pagy::Frontend::MARKER}", "1"]</script>),
+      %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "1"]</script>),
       html
       )
     end
@@ -106,7 +106,7 @@ def test_pagy_nav_compact_bootstrap_page_3
           %(<a href="/foo?page=4"   rel="next" aria-label="next" class="next btn btn-primary">Next&nbsp;&rsaquo;</a>) +
         %(</div>) +
       %(</nav>) +
-      %(<script type="application/json" class="pagy-compact">["#{id}", "#{Pagy::Frontend::MARKER}", "3"]</script>),
+      %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "3"]</script>),
       html
       )
     end
@@ -128,7 +128,7 @@ def test_pagy_nav_compact_bootstrap_page_6
           %(<a class="next btn btn-primary disabled" href="#">Next&nbsp;&rsaquo;</a>) +
         %(</div>) +
       %(</nav>) +
-      %(<script type="application/json" class="pagy-compact">["#{id}", "#{Pagy::Frontend::MARKER}", "6"]</script>),
+      %(<script type="application/json" class="pagy-compact-json">["#{id}", "#{Pagy::Frontend::MARKER}", "6"]</script>),
       html
       )
     end

test/pagy/extras/items_test.rb

@@ -157,7 +157,7 @@ def test_extra_items_pagy_items_selector
         %(<a href="/foo?page=#{Pagy::Frontend::MARKER}-page-&items=#{Pagy::Frontend::MARKER}-items-"></a>) +
         %(Show <input type="number" min="1" max="100" value="20" style="padding: 0; text-align: center; width: 3rem;"> items per page) +
       %(</span>) +
-      %(<script type="application/json" class="pagy-items">["#{id}", "#{Pagy::Frontend::MARKER}", 41]</script>),
+      %(<script type="application/json" class="pagy-items-json">["#{id}", "#{Pagy::Frontend::MARKER}", 41]</script>),
 
       html
       )