@cable8mm/jquery-infinite-with-template 1.0.2 → 1.0.4

package/README.md

@@ -1,10 +1,37 @@
-jQuery Infinite With Template Plugin
-======================
+# jQuery Infinite With Template Plugin
+
+![NPM Version](https://img.shields.io/npm/v/%40cable8mm%2Fjquery-infinite-with-template)
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40cable8mm%2Fjquery-infinite-with-template)
+![NPM Downloads](https://img.shields.io/npm/dt/%40cable8mm%2Fjquery-infinite-with-template)
+![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hy/%40cable8mm%2Fjquery-infinite-with-template)
+![NPM Type Definitions](https://img.shields.io/npm/types/%40cable8mm%2Fjquery-infinite-with-template)
+![NPM License](https://img.shields.io/npm/l/%40cable8mm%2Fjquery-infinite-with-template)
+
 
 JQuery plugin for ajax-enabled infinite page scroll with template.
 
 If you like jQuery until now, this little library will help.
 
+## Install
+
+on npm
+
+```sh
+npm i @cable8mm/jquery-infinite-with-template
+```
+
+on html
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@cable8mm/jquery-infinite-with-template@1.0.4/jquery.infiniteScrollWithTemplate.min.js" integrity="sha256-bX3iyCp0T50YmDRgpUl1tY/LGlpPGsKR4TqUkpcq6WA=" crossorigin="anonymous"></script>
+```
+
+on ESM
+
+```html
+<script type="module"> import @cable8mm/jquery-infinite-with-template from https://cdn.jsdelivr.net/npm/@cable8mm/jquery-infinite-with-template@1.0.4/+esm </script>
+```
+
 ## Demo
 
 For convinient `http-server` need:
@@ -39,7 +66,10 @@ $("#result").infiniteTemplate({
 	query: "word=ajax",
 	templateHelpers: {
 		authId : 354
-	}
+	},
+    zeroCallback: function () {
+        alert("zero alert");
+    },
 });
 ```
 
@@ -109,6 +139,8 @@ Result:
 
 **templateHelpers** - (optional) Merge with json to load
 
+**key** - (optional) data(default)
+
 **query** - (optional) Additional query
 
 **method** - (optional) GET(default), POST, PUT, DELETE
@@ -121,6 +153,8 @@ Result:
 
 **preventCache** - (optional) false(default) if true, Add timestamp
 
+**zeroCallback** - (optional) null(default) if function, call zeroCallback when result is nothing
+
 ## Examples
 
 ```html
@@ -209,4 +243,6 @@ Result:
         initialPage: 3,
     });
 </script>
-```
+```
+
+The jQuery Infinite With Template Plugin project is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).

package/examples/index.html

@@ -20,6 +20,9 @@
           templateSelector: "#test-tmpl",
           dataPath: "data_sources.ajax",
           query: "word=ajax",
+          zeroCallback: function () {
+            alert("zero alert");
+          },
         });
       });
     </script>

package/jquery.infiniteScrollWithTemplate.js

@@ -3,7 +3,7 @@
  * JQuery plugin for ajax-enabled infinite page scroll with template.
  *
  * Author: Sam Lee (https://github.com/cable8mm)
- * Version: 1.0.2
+ * Version: 1.0.4
  */
 
 (function ($) {
@@ -52,15 +52,24 @@
         url: opts.dataPath + "?page=" + currentScrollPage + query + timestamp,
         method: opts.method,
         success: function (result) {
-          if ("string" == typeof result) {
+          if (typeof result === "string") {
             result = JSON.parse(result);
           }
 
           if (result) {
-            if (result["data"].length == 0) {
+            if (result[opts.key].length == 0) {
               isFinished = true;
+
+              // if zero, call zeroCallback
+              console.log(currentScrollPage + " " + opts.zeroCallback);
+              if (
+                currentScrollPage == 1 &&
+                typeof opts.zeroCallback === "function"
+              ) {
+                opts.zeroCallback();
+              }
             } else {
-              $.each(result["data"], function (_, item) {
+              $.each(result[opts.key], function (_, item) {
                 if (opts.templateHelpers) {
                   item = Object.assign(item, opts.templateHelpers);
                 }
@@ -90,11 +99,13 @@
     dataPath: null,
     templateSelector: null,
     query: null,
+    key: "data",
     method: "GET",
     templateHelpers: null,
     loadAtStart: true,
     loadSelector: null,
     initialPage: 1,
     preventCache: false,
+    zeroCallback: null,
   };
 })(jQuery);

package/jquery.infiniteScrollWithTemplate.min.js

@@ -1 +1 @@
-!function(e){e.fn.infiniteTemplate=function(t){var n=e(this);if(!n.length)return n;var a=e.extend({},e.fn.infiniteTemplate.defaults,t),l=a.initialPage,i=!1,o=!1;function r(){if(!i&&!o){i=!0;var t=e.templates(a.templateSelector),r=a.query?"&"+a.query:"",c=a.preventCache?"&t="+(new Date).getTime():"";e.ajax({url:a.dataPath+"?page="+l+r+c,method:a.method,success:function(r){"string"==typeof r&&(r=JSON.parse(r)),r&&(0==r.data.length?o=!0:(e.each(r.data,function(l,i){a.templateHelpers&&(i=Object.assign(i,a.templateHelpers));var o=t.render(i);e(o).appendTo(n)}),l+=1)),i=!1}})}}return a.loadSelector?e(document).on("click",a.loadSelector,function(){r()}):e(window).on("scroll",function(){e(this).scrollTop()>e(document.body).height()-2*e(this).height()&&!o&&r()}),a.loadAtStart&&r(),this},e.fn.infiniteTemplate.defaults={dataPath:null,templateSelector:null,query:null,method:"GET",templateHelpers:null,loadAtStart:!0,loadSelector:null,initialPage:1,preventCache:!1}}(jQuery);
+!function(e){e.fn.infiniteTemplate=function(t){var l=e(this);if(!l.length)return l;var a=e.extend({},e.fn.infiniteTemplate.defaults,t),n=a.initialPage,o=!1,i=!1;function r(){if(!o&&!i){o=!0;var t=e.templates(a.templateSelector),r=a.query?"&"+a.query:"",c=a.preventCache?"&t="+(new Date).getTime():"";e.ajax({url:a.dataPath+"?page="+n+r+c,method:a.method,success:function(r){"string"==typeof r&&(r=JSON.parse(r)),r&&(0==r[a.key].length?(i=!0,console.log(n+" "+a.zeroCallback),1==n&&"function"==typeof a.zeroCallback&&a.zeroCallback()):(e.each(r[a.key],function(n,o){a.templateHelpers&&(o=Object.assign(o,a.templateHelpers));var i=t.render(o);e(i).appendTo(l)}),n+=1)),o=!1}})}}return a.loadSelector?e(document).on("click",a.loadSelector,function(){r()}):e(window).on("scroll",function(){e(this).scrollTop()>e(document.body).height()-2*e(this).height()&&!i&&r()}),a.loadAtStart&&r(),this},e.fn.infiniteTemplate.defaults={dataPath:null,templateSelector:null,query:null,key:"data",method:"GET",templateHelpers:null,loadAtStart:!0,loadSelector:null,initialPage:1,preventCache:!1,zeroCallback:null}}(jQuery);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cable8mm/jquery-infinite-with-template",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "title": "jQuery Infinite With Template",
   "description": "JQuery plugin for ajax-enabled infinite page scroll with template. If you like jQuery until now, this little library will help.",
   "main": "jquery.infiniteScrollWithTemplate.js",