{"id":15722294,"url":"https://github.com/arturo21/generaljs","last_synced_at":"2025-05-13T03:45:45.614Z","repository":{"id":57246040,"uuid":"216287684","full_name":"arturo21/generaljs","owner":"arturo21","description":"JS library that helps you create Web Components / Handle DOM / Events / Webworkers / Websockets / Encrypt/deCrypt / Storage / Fetch / AJAX ","archived":false,"fork":false,"pushed_at":"2023-08-02T11:14:45.000Z","size":107012,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-05T22:42:11.980Z","etag":null,"topics":["ajax","browsers","components","css","dom","events","hash","js","library","modern","web","webcomponent","websockets","webworkers"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arturo21.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-20T00:34:51.000Z","updated_at":"2022-02-06T21:03:36.000Z","dependencies_parsed_at":"2024-10-13T17:30:51.121Z","dependency_job_id":"bb7f5b22-af10-4b0e-9319-3004f6944859","html_url":"https://github.com/arturo21/generaljs","commit_stats":{"total_commits":129,"total_committers":2,"mean_commits":64.5,"dds":"0.41860465116279066","last_synced_commit":"744fdcd1a46fc227cc39373f194fa215d7038cff"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturo21%2Fgeneraljs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturo21%2Fgeneraljs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturo21%2Fgeneraljs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturo21%2Fgeneraljs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arturo21","download_url":"https://codeload.github.com/arturo21/generaljs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253870822,"owners_count":21976610,"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","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":["ajax","browsers","components","css","dom","events","hash","js","library","modern","web","webcomponent","websockets","webworkers"],"created_at":"2024-10-03T22:06:22.474Z","updated_at":"2025-05-13T03:45:41.547Z","avatar_url":"https://github.com/arturo21.png","language":"JavaScript","funding_links":["https://www.paypal.com/paypalme/avsolucionesweb"],"categories":[],"sub_categories":[],"readme":"# general.js\n\n**JS library to do high performance solutions**\n \nJS Library that handles DOM / Events - DOM / AJAX - FETCH / WebSockets-Webworkers / Watch - UnWatch / Crypto / expansible \n\n## Import library from NPM\n```javascript\n\tnpm i gnrl.js\n```\n\n## Import library from CDN\n```html\n\t\u003cscript src=\"https://cdn.underdevelopment.work/generaljs/general.min.js\"\u003e\n```\n\n## How to init the library\n```javascript\n\tgenrl.run(function(){\n\t\t//write code below\n\t});\n```\n\n## Create a Web Component\n```javascript\n\tcomponent=genrl.components;\n\tcomponent.addcomponent(\"my-counter\",\"template.html\", function(template,data){\n\t\tclass MyCounter extends HTMLElement {\n\t\t\tconstructor() {\n\t\t\t\tsuper();\n\t\t\t\tthis.count = 0;\n\t\t\t\tthis.attachShadow({ mode: 'open' });\n\t\t\t}\n\t\t\tconnectedCallback() {\n\t\t\t\tthis.shadowRoot.appendChild(template.content.cloneNode(true));\n\t\t\t\tthis.shadowRoot.getElementById('inc').onclick = () =\u003e this.inc();\n\t\t\t\tthis.shadowRoot.getElementById('dec').onclick = () =\u003e this.dec();\n\t\t\t\tthis.update(this.count);\n\t\t\t}\n\t\t\tinc() {\n\t\t\t\tthis.update(++this.count);\n\t\t\t}\n\t\t\tdec() {\n\t\t\t\tthis.update(--this.count);\n\t\t\t}\n\t\t\tupdate(count) {\n\t\t\t\tthis.shadowRoot.getElementById('count').innerHTML = count;\n\t\t\t}\n\t\t}\n\t\tcomponent.register(\"my-counter\",MyCounter);\n\t});\n```\n\n### Call Web Component created\n```html\n\t\u003cmy-counter\u003e\u003c/my-counter\u003e\n```\n\n## How to getElement Object\n```javascript\n\tg(\"#element\").getEl();\n```\n\n```javascript\n\tg(\".element\").getEl();\n```\n\n## How to select a DOMElement \n```javascript\n\tg(\"#element\");\n```\n\n```javascript\n\tg(\".element\");\n```\n\n\n## Create a Toggle Button to change classname\n```javascript\n\tg(\"#campoeval\").on('change',function(){\n\t\tif(g(\"#campoconclase\").hasClass(\"is-hidden\")==true){\n\t\t\tg(\"#campoconclase\").removeClass(\"is-hidden\");\n\t\t}\n\t\telse{\n\t\t\tg(\"#campoconclase\").addClass(\"is-hidden\")\n\t\t}\n\t});\n```\n\n## Working with data-values\n### setData\n```javascript\n\tg(\"#campoeval\").on('change',function(){\n\t\tg(\"#campoeval\").setData(\"idproducto\",idproducto);\n\t});\n```\n\n### getData\n```javascript\n\tg(\"#campoeval\").on('change',function(){\n\t\tlet idprod=g(\"#campoeval\").getData(\"idproducto\");\n\t});\n```\n\n### rmData\n```javascript\n\tg(\"#campoeval\").on('change',function(){\n\t\tg(\"#campoeval\").rmData(\"idproducto\");\n\t});\n```\n\n## How to read an object\n```javascript\ngenrl.each(h,function(x,index){\n\tgenrl.log(\"RESULTADO\");\n\tgenrl.log(x.nombre);\n\tgenrl.log(index);\n})\n```\n\n## How to set CSS attributes\n```javascript\ng(\"#element\").css({\n\t'height': '400px',\n\t'width': '200px',\n\t'opacity': '1'\n});\n```\n## Bind an event\n```javascript\ng(\"#btnmover\").click(function(){\n\tg(\"#div_A\").animate('bounce',5000,function(){\n\t\tgenrl.log(\"Se ha activado el callBack\");\n\t});\n});\n```\n## How to get an attribute of a DOMElement\n```javascript\n\tidelement=g(\"#element\").getAttrb(\"id\");\n```\n\n## How to set an attribute of a DOMElement\n```javascript\n\tg(\"#element\").setAttrb(\"attribRandom\",\"test\");\n```\n\n## Get element children\n```javascript\n\tg(\"#element\").children();\n```\n\n## Get element child number N\n```javascript\n\tg(\"#element\").child(N);\n```\n\n## Evaluates a Function\n```javascript\n\tgenrl.eval(function(){\n\t\talert(\"Hola Mundo!\");\n\t});\n```\n\n## Evaluates a Text as JS Function\n```html\n\tdata='\u003cscript id=\"scripttag\"\u003ealert(\"HOLA\");\u003c/script\u003e';\n```\n\n```javascript\n\tg(\"#scripttag\").eval(data);\n```\n\n## URL ROUTES\n```javascript\n\tgenrl.path.map(\"#/prueba\").to(function(){\n\t\tg(\"#cargadiv\").load(\"README.md\",function(){\n\t\t\tgenrl.log(\"Módulo cargado.\");\n\t\t});\n\t});\n\tgenrl.path.listen();\n```\n\n## Get fileList from file input when it changes\n### archivo is a file input\n```javascript\n\tg('#archivo').change(function(e){\n\t\tgenrl.log(\"Cambió el campo\");\n\t\tdataf=g('#archivo').getFiles();\n\t});\n```\n\n## AJAX Calls\n### GET + Callback\n```javascript\n\tlet ajaxobj=genrl.ajaxapi;\n\tg(\"#getbtn\").click(function(){\n\t\tajaxobj\n\t\t.get(\"general.js/README.md\")\n\t\t.then(function(data){\n\t\t\tgenrl.log(\"DATA: \" + data);\n\t\t\tg(\"#titulo_widget\").html(\"RESULTADO:\");\n\t\t\tg(\"#mensajes\").html(data);\n\t\t})\n\t\t.catch(function(e){\t\n\t\t\tgenrl.log(\"ERROR:\" + e);\n\t\t})\n\t});\n```\n### GET JSON + Callback\n```javascript\n\tlet ajaxobj=genrl.ajaxapi;\n\tg(\"#getjbtn\").click(function(){\n\t\tajaxobj\n\t\t.getJSON(\"http://localhost/general.js/config.json\")\n\t\t.then(function(data){\n\t\t\tgenrl.log(\"DATA: \" + data);\n\t\t\tg(\"#titulo_widget\").html(\"RESULTADO:\");\n\t\t\tg(\"#mensajesb\").html(data);\n\t\t})\n\t\t.catch(function(e){\t\n\t\t\tgenrl.log(\"ERROR:\" + e);\n\t\t})\n\t});\n```\n## Load asinchronous + Callback\n```javascript\n\tlet ajaxobj=genrl.ajaxapi;\n\tg(\"#loadbtn\").click(function(){\n\t\tajaxobj\n\t\t.load(\"http://localhost/general.js/README.md\")\n\t\t.then(function(data){\n\t\t\tgenrl.log(\"DATA: \" + data);\n\t\t\tg(\"#titulo_widget\").html(\"RESULTADO:\");\n\t\t\tg(\"#mensajesa\").html(data);\n\t\t})\n\t\t.catch(function(e){\t\n\t\t\tgenrl.log(\"ERROR:\" + e);\n\t\t})\n\t});\n```\n\n### Asynchronous POST for General.JS \n#### Client Side\n```javascript\n\tlet ajaxobj=genrl.ajaxapi;\n\tg(\"#namebtn\").click(function(){\n\t\tlet strdata={'nombre':'arturo'};\n\t\tdatos=strdata;\n\t\tajaxobj\n\t\t.post(\"socketd.php\",datos)\n\t\t.then(function(data){\n\t\t\tgenrl.log(\"DATA RECIBIDA: \");\n\t\t\tgenrl.log(data);\n\t\t\tg(\"#titulo_widget\").html(\"RESULTADO:\");\n\t\t\tg(\"#mensajesa\").html(data);\n\t\t})\n\t\t.catch(function(e){\t\n\t\t\tgenrl.log(\"ERROR:\" + e);\n\t\t})\n\t});\n```\n\n### Asynchronous Files UPLOAD for General.JS \n#### Client Side\n```javascript\n\tlet ajaxobj=genrl.ajaxapi;\n\tg('#archivo').change(function(e){\n\t\tgenrl.log(\"Cambió el campo\");\n\t\tdataf=g('#archivo').getFiles();\n\t});\n\tg(\"#filebtn\").click(function(){\n\t\tlet fdata = new FormData();\n\t\tfdata.append(\"file\", dataf[0]);\n\t\tajaxobj\n\t\t.upload(\"uploadfile.php\",fdata)\n\t\t.then(function(data){\n\t\t\tg(\"#titulo_widget\").html(\"RESULTADO:\");\n\t\t\tg(\"#mensajesb\").html(data);\n\t\t})\n\t\t.catch(function(e){\t\n\t\t\tgenrl.log(\"ERROR:\" + e);\n\t\t})\n\t});\n```\n#### Server Side\n```php\n\u003c?php\n\tsession_start();\n    if (move_uploaded_file($_FILES[\"file\"][\"tmp_name\"], \"uploads/\".$_FILES['file']['name'])) {\n        //more code here...\n        echo(\"uploads/\".$_FILES['file']['name']);\n    }\n?\u003e\n```\n\n## Smooth scrolling\n```javascript\n\tg(\"#holap\").click(function(){\n\t\tg(\"#holap\").smooth(\"#adiosp\",{\n\t\t\tduration:'10000',\n\t\t\toffset: 0,\n\t\t\tcallback: function(){\n\t\t\t\tg.log(\"Scroll finalizado\");\n\t\t\t}\n\t\t});\n\t});\n```\n\n### Asynchronous JS FETCH API\n```javascript\n\tgenrl.log(\"*****FETCH API*****\");\n\tvar fapi=genrl.fetchapi.getFetch();\n\tif(fapi){\n\t\tg.log(\"FETCH API ha sido cargada exitosamente!\");\n\t\tg.log(\"***************************************\");\n\t\tvar dataSrc={};\n\t\tdataSrc={\n\t\t\tmethod:'fetch',\n\t\t\tname:\"arturo\",\n\t\t\tlastname:\"vasquez\"\n\t\t}\n\t\tfapi.post(\n\t\t\t\"socket_fetch.php\",\n\t\t\tdataSrc,\n\t\t\tfunction(data){\n\t\t\t\tgenrl.log(\"DATA FETCH\");\n\t\t\t\tgenrl.log(data);\n\t\t\t}\n\t\t);\n\t\tfapi.get(\n\t\t\t\"example.json\",\n\t\t\tfunction(data){\n\t\t\t\tvar datappal;\n\t\t\t\tvar datos;\n\t\t\t\tgenrl.log(\"DATA FETCH GET\");\n\t\t\t\tgenrl.log(data);\n\t\t\t\tdatappal=data.data;\n\t\t\t\tgenrl.log(\"PERSONA\");\n\t\t\t\tgenrl.log(datappal.persona);\n\t\t\t\tvar datos=datappal.persona;\n\t\t\t\tgenrl.log(datos.ciudad);\n\t\t\t\tgenrl.log(\"**************\");\n\t\t\t\tgenrl.log(datos.nombre);\n\t\t\t\tgenrl.log(\"**************\");\n\t\t\t\tgenrl.log(datos.apellido);\n\t\t\t}\n\t\t);\n\t}\n```\n\n## How to extend the library\n### Creates a new function\n```javascript\n\tgenrl.extend({\n\t\tmyfunction:function(options){\n\t\t\t//write code below\n\t\t});\n\t});\n```\n\n### Use new function \n```javascript\n\tgenrl.myfunction(options);\n```\n\n### Creates a new function\n```javascript\n\tg(\"#MyContent\").extend({\n\t\tmyfunction:function(options){\n\t\t\t//write code below\n\t\t});\n\t});\n```\n\n### Use new function \n```javascript\n\tg(\"#MyContent\").myfunction(options);\n```\n\n## How to extend the library (private functions)\n### Creates a new function\n```javascript\n\tgenrl.fn.extend({\n\t\tmyfunction:function(options){\n\t\t\t//write code below\n\t\t});\n\t});\n```\n\n### Use new function \n```javascript\n\tgenrl.fn.myfunction(options);\n```\n\n## Log something to JS console\n```javascript\n\tgenrl.log(\"Hello World\");\n```\n\n## Warning something to JS console\n```javascript\n\tgenrl.warn(\"Hello World\");\n```\n\n## Info something to JS console\n```javascript\n\tgenrl.info(\"Hello World\");\n```\n\n## Error something to JS console\n```javascript\n\tgenrl.error(\"Hello World\");\n```\n\n### Use the Source...\n\n### The Source be with you...\n\n## Si deseas colaborar, haz clic en el enlace abajo:\n## if do you like to to collab, you can do it by clicking the link below:\n## --Paypal-- \n[![paypal-btn-image-pay](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/paypalme/avsolucionesweb)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturo21%2Fgeneraljs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farturo21%2Fgeneraljs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturo21%2Fgeneraljs/lists"}