{"id":24054498,"url":"https://github.com/etherbeing/smoothlify","last_synced_at":"2026-05-15T06:33:58.761Z","repository":{"id":42616521,"uuid":"483337596","full_name":"etherbeing/smoothlify","owner":"etherbeing","description":"Make requests to backend smoothly without having to reload the page","archived":false,"fork":false,"pushed_at":"2022-08-10T19:02:31.000Z","size":2412,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T05:33:46.185Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/etherbeing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-19T17:07:50.000Z","updated_at":"2022-07-05T20:47:27.000Z","dependencies_parsed_at":"2022-09-07T13:21:16.170Z","dependency_job_id":null,"html_url":"https://github.com/etherbeing/smoothlify","commit_stats":null,"previous_names":["etherbeing/smoothlify"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/etherbeing/smoothlify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etherbeing%2Fsmoothlify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etherbeing%2Fsmoothlify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etherbeing%2Fsmoothlify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etherbeing%2Fsmoothlify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etherbeing","download_url":"https://codeload.github.com/etherbeing/smoothlify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etherbeing%2Fsmoothlify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285382189,"owners_count":27162159,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-20T02:00:05.334Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-09T03:46:22.116Z","updated_at":"2025-11-20T06:04:37.610Z","avatar_url":"https://github.com/etherbeing.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![StandWithUkraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)\n[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine/)\n\n# DISCLAIMER\nThis script doesnt use ajax for anything, it was made using React...\n\n# ABOUT\nThe objetive of this package is to provide an easy way for interact with the backend and request new information without reloading\nthe website\n\n# USAGE\n## Critical configuration\nAs was previously mentioned \u003cb\u003esmoothlify\u003c/b\u003e pretends to provide an easier way to communicate with backend in scenarios where we need to fetch some data to update the GUI, because of that we will need to provide \u003cb\u003esmoothlify\u003c/b\u003e with the next arguments:\n* class=\"smoothlify\" // In order to find all elements that will use this module\n* sly-to // Where does the posts requests are directed to\n* sly-csrf // This needs only to be provided once during the app\nfor communicate with backend using Cross Site Request Forgery tokens\n\n## How to use\nLets say we have a div container as follows:\n```html\n\u003cdiv class=\"smoothlify\"\n  sly-to=\"https://mybackend.com\"\n  sly-csrf=\"{{csrf_token}}\"\n\u003e\n\u003c/div\u003e\n```\nIn the previous example we defined a div container which on click send a request to an url in the backend using post, some of you may wonder why we do not need to declare the header's name of the csrf token... Well, thing is that for django framework the above configuration is enough, for others frameworks please add the \u003ci\u003esly-csrf-name\u003c/i\u003e \n## Cascade download \nDownload progressively information from backend to update the GUI on a smoothly way...\nFor the previous mentioned behavoiur \u003cb\u003esmoothlify\u003c/b\u003e provides a subset of tools all of its starts with \u003ci\u003esly-hook\u003c/i\u003e word and indicate the point of hooking the GUI, the meaning of this is that when the scroll reach that position it will trigger a POST request or GET depending on the configuration, asking for data to the backend.\n## Attributes\n* sly-hook-the // Indicates that this element will be used as the hook counter element.\n* sly-hook-quant // Indicate how many elements are going to be ignored\n\n### Notes:\nA hook counter element is an element or a group of elements which are utilized for counting how many items will be ignored before triggering the hook action. For example lets say we have a group of 20 elements (cards) each one of 20px height, so you say you want to ignore 5 elements then here the hook counter element is the unit meaning that the group is 20, and the hook 1, so it represents 1/20 units.\n## How to use\nFirst create an element let's say:\n```html\n\u003cdiv sly-comment=\"(add all criticals attributes plus those you want to add extra)\" \n  sly-hook-the=\"elementClass\"\n  sly-hook-quant=\"2\"\u003e\n\u003c/div\u003e\n```\n#### Note: We used here the attribute \u003ci\u003esly-comment\u003c/i\u003e, that IS NOT a real comment so adding so much of those comments can slow down the app, please use HTML comments instead... \n\nIn the example above we had selected \u003ci\u003eelementClass\u003c/i\u003e as the \u003cb\u003ehook counter element (hce)\u003c/b\u003e and also set the quantity of elements before triggering to 2, so the behaviour will be as follows:\n\n1. The user scroll the page\n2. Once the user reach the element with class \u003cb\u003e\u003ci\u003esmoothlify\u003c/i\u003e\u003c/b\u003e and attribute \u003cb\u003esly-hook-the\u003c/b\u003e it will going to trigger the event if \u003cb\u003esly-hook-quant\u003c/b\u003e is equal to \u003cb\u003e\u003ci\u003e1\u003c/i\u003e\u003c/b\u003e meaning that no offset is set, but if instead the \u003cb\u003esly-hook-quant\u003c/b\u003e is higher  than 1 then the offset of the trigger event is calculated as follow : \n    ```js\n    // Assume slyElement is the element with class set to smoothlify\n    let hooked = slyElement.getAttribute(\"sly-hook-the\")\n    let hookedElements = document.getElementsByClassName(hooked);\n    // a mean calculation is made here, omitted for rezume\n    let offset = meanHeight * slyElement.getAttribute(\"sly-hook-quant\")\n    ```\n## Slave component\nThis allows you to make one component content dependent of what the server is sending back.\n```html\n\u003cdiv class=\"slave\"\u003e\n  \u003c!--This container is a slave container meaning that is innerText is going to be updated automatically --\u003e\n\u003c/div\u003e\n\u003cdiv class=\"smoothlify\" \n  sly-to=\"https://server.com/api\" \n  sly-slave=\"slave\"\n  sly-slave-targets=\"class1 class2 class3\"\n  sly-cause=\"data\"\u003e\n\u003c/div\u003e\n\u003cdiv class=\"class1\" sly-listen=\"api_data\"\u003e\n\u003c/div\u003e\n\u003cdiv class=\"class2\" sly-listen=\"api_data\"\u003e\n\u003c/div\u003e\n\u003cdiv class=\"class3\" sly-listen=\"api_data\"\u003e\n\u003c/div\u003e\n```\nWhen data is fetched:\n ```js\n let slaves = document.getElementsByClassName(target.getAttribute(\"sly-slave\"));\n for (let slave of slaves){\n   slave.innerText = response.json()[target.getAttribute(\"sly-cause\")]\n }\n```\nAnother way of using slaves is:\n```html\n\u003cdiv\n  class=\"slave-target-class\"\n  sly-slave-listens=\"quantity price\"\n  sly-slave-operate=\"(a, b)=\u003e{\n      return a*b;\n  }\"\n\u003e\n\u003c/div\u003e\n```\n## Extra configurations\nAttributes listed here arent required but can help you in order to some things...\n\n* sly-use-content // A class name that is linked to each element in the website which must have declared at least 1 name or 1 id for function correctly, the name will be the key in the request json body and the value or innerText will be the value \n* sly-method // The request method to be used (EXPERIMENTAL YET)\n* sly-disabled // Make this button useless\n* sly-msg-cont // A container id for displaying a message on the website when some action is performed, for example adding an element to a shop cart\n* sly-msg-loading // The message to be shown when the onclick event is trigger but not data has been yet received\n* sly-msg // The message to be shown when the onclick event is trigger and data is successfully received, if sly-msg-cont is not set the use body as parent\n* sly-msg-error // The message to be received when an error ocurred in the backend processing\n* sly-lvl // The level of importance of the message (EXPERIMENTAL YET)\n* sly-ctr // NOT IMPLEMENTED YET\n* sly-type // NOT IMPLEMENTED YET\n* sly-icon // NOT IMPLEMENTED YET\n* sly-alert // NOT IMPLEMENTED YET\n* sly-on-submit // Triggered when the button is clicked\n* sly-on-accept // Triggered if the backend returns 200\n* sly-on-reject // Triggered if the backend doesnt returns 200\n* sly-on-complete // Triggered always after the response\n* sly-lang // NOT IMPLEMENTED YET\n\n# Author\nThis script was made by Esteban Chacon Martin\n# Grammar\nAny grammaticar error in this readme or in any part of the code, please open an issue pointing to the error... And thanks for helping me to improve my english skills :)\n# License\nGNU PUBLIC LICENSE https://www.gnu.org/licenses/gpl-3.0.en.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetherbeing%2Fsmoothlify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetherbeing%2Fsmoothlify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetherbeing%2Fsmoothlify/lists"}