🐛 Fix Click to Load

mcnaveen · Apr 14, 2022 · 3f786e6 · 3f786e6
1 parent 8ca258d
commit 3f786e6
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -102,10 +102,10 @@ yarn build
 - Example: `mysupacomments.com`
 
 ```html
-<div id="comments" data-url="yoursite.com" loadmore="false"></div>
+<div id="comments" data-url="yoursite.com" clickToLoad="false"></div>
 ```
 
-- Optionally, You can set the `loadmore` attribute to `true` to disable autoloading of comments, the User has to click Load Comments button. (Default is `false`)
+- Optionally, You can set the `clickToLoad` attribute to `true` to disable autoloading of comments, the User has to click Load Comments button. (Default is `false`)
 
 Now, If you open your static website or blog, you will see the comments section like below.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "SupaComments",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": true,
   "scripts": {
     "watch:tailwind": "postcss public/tailwind.css -o public/build/comments.css -w",

diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,7 @@
   </head>
 
   <body>
-    <div id="comments" data-url="yoursite.com" loadmore="true"></div>
+    <div id="comments" data-url="yoursite.com" clickToLoad="true"></div>
   </body>
 
 

diff --git a/src/App.svelte b/src/App.svelte
@@ -4,12 +4,12 @@
   const postPath = window.location.pathname;
   const hostURL = window.location.host;
   export let appUrl;
-  export let loadMore;
+  export let clickToLoad;
 
   const Props = {
     hostURL,
     postPath,
-    loadMore,
+    clickToLoad,
   };
 </script>
 

diff --git a/src/components/AllComments.svelte b/src/components/AllComments.svelte
@@ -4,11 +4,11 @@
   import { generateFromString } from "generate-avatar";
   export let postPath;
   let loading = true;
-  export let loadMore;
-  let enableLoadMore;
+  export let clickToLoad;
+  let enableclickToLoad;
 
   export const comments = async () => {
-    enableLoadMore = false;
+    enableclickToLoad = false;
     const { data, error } = await supabase
       .from("comments")
       .select()
@@ -27,10 +27,10 @@
     }
   };
 
-  if (loadMore) {
-    enableLoadMore = true;
+  if (clickToLoad) {
+    enableclickToLoad = true;
   } else {
-    enableLoadMore = false;
+    enableclickToLoad = false;
     comments();
   }
 </script>
@@ -42,7 +42,7 @@
         <div class="w-full p-3">
           <h3 class="text-gray-700 text-2xl font-bold">User Comments</h3>
         </div>
-        {#if enableLoadMore}
+        {#if enableclickToLoad}
           <div class="w-full p-3">
             <button
               class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"

diff --git a/src/main.js b/src/main.js
@@ -2,13 +2,13 @@ import App from "./App.svelte";
 
 let comments = document.getElementById("comments");
 let appUrl = comments.getAttribute("data-url") || "localhost:8080";
-let loadMore = comments.getAttribute("loadmore") || false;
+let clickToLoad = comments.getAttribute("clickToLoad") || false;
 
 const app = new App({
   target: comments,
   props: {
     appUrl: appUrl,
-    loadMore: loadMore,
+    clickToLoad: clickToLoad,
   },
 });