{"id":21842890,"url":"https://github.com/pandaplatform/panda-js","last_synced_at":"2025-03-21T16:15:31.115Z","repository":{"id":152937450,"uuid":"67340205","full_name":"PandaPlatform/panda-js","owner":"PandaPlatform","description":"Panda Javascript Library Components","archived":false,"fork":false,"pushed_at":"2019-04-11T13:18:54.000Z","size":161,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"v1.5","last_synced_at":"2025-01-26T11:28:13.365Z","etag":null,"topics":["framework","javascript"],"latest_commit_sha":null,"homepage":"https://pandaphp.org","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/PandaPlatform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG-1.1.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":"2016-09-04T11:08:27.000Z","updated_at":"2019-04-11T13:18:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"ada7e929-345e-4f77-aef5-fa311050fce7","html_url":"https://github.com/PandaPlatform/panda-js","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fpanda-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fpanda-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fpanda-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PandaPlatform%2Fpanda-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PandaPlatform","download_url":"https://codeload.github.com/PandaPlatform/panda-js/tar.gz/refs/heads/v1.5","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244825654,"owners_count":20516592,"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":["framework","javascript"],"created_at":"2024-11-27T22:13:41.917Z","updated_at":"2025-03-21T16:15:31.099Z","avatar_url":"https://github.com/PandaPlatform.png","language":"JavaScript","readme":"# Panda Javascript Library\n\nThis is the panda main javascript library of services and helpers.\n\n- [Libraries Used](#libraries-used)\n- [Services](#services)\n  - [Registry](#registry)\n  - [Cache](#cache)\n  - [Config](#config)\n  - [Console](#console)\n  - [Debug](#debug)\n    - [Debugger](#debugger)\n  - [Environment](#environment)\n    - [Cookies](#cookies)\n    - [Storage](#storage)\n    - [Url](#url)\n  - [Events](#events)\n  - [Http](#http)\n    - [Async](#async)\n    - [Jar](#jar)\n      - [JSONAsync](#jsonasync)\n      - [HTMLAsync](#htmlasync)\n      - [FormAsync](#formasync)\n  - [Resources](#resources)\n\n## Libraries Used\n\nPanda Javascript Library is using **jQuery** for basic functionality, whenever is needed.\n\n## Services\n\nPanda Js is a library of different services that are combined together into a single file.\n\nDifferent services have different namespaces, based on the behavior and logic.\n\nAn example if such library is **Cookies**:\n\n```javascript\nPanda.Env.Cookies.get('cookie_name');\n```\n\nThis document will display the entire set of Services as they are distributed in different packages and namespaces.\n\n### Registry\n\nCache is a simple service that uses key-value pairs to store temporarily information. All data are being stored\nin runtime, which means that on page reload, all data are lost.\n\nFor storing data longer time, check the [Storage](#storage) service.\n\nUsage:\n\n```javascript\n// Set a new object to registry:\nPanda.Registry.set('object_name', 'object_value');\n\n// Get the cached object and display it in the log:\nvar fromRegistry = Panda.Registry.get('object_name');\nconsole.log(fromRegistry);\n\n// Clear the entire registry, in case of system restart\n// This function might be distrustful for other objects that rely on Registry as well \nPanda.Registry.clear();\n```\n\n### Cache\n\nCache is a simple service that uses key-value pairs to store temporarily information and data so that you can eliminate\nnetwork overload due to repeated requests and other processes.\n\nCache extends registry functionality.\n\nUsage:\n\n```javascript\n// Set a new object to cache:\nPanda.Cache.set('object_name', 'object_value');\n\n// Get the cached object and display it in the log:\nvar fromCache = Panda.Cache.get('object_name');\nconsole.log(fromCache);\n\n// The service will return undefined if there is no cache-hit\nvar noCache = Panda.Cache.get('another_object');\nif (noCache === undefined) {\n    console.log('No object found.');\n}\n\n// Get the entire cache\nvar cache = Panda.Cache.getCache();\nconsole.log(cache);\n```\n\nYou can use this service to set a new cache completely. However, by default, set mechanism will extend the object.\nIf you need to replace it, you should clear it first.\n\n```javascript\n// Clear the entire cache (it doesn't affect other Registry entries)\nPanda.Cache.clear();\n\n// Set a new cache completely\nvar new_cache = {\n    entry_1: 'Value 1'\n};\nPanda.Cache.setCache(new_cache);\n```\n\n### Config\n\nConfig is a similar to cache service which can be used for configuration objects.\n\nUsage:\n\n```javascript\n// Set a new object to config:\nPanda.Config.set('is_mobile', true);\n\n// Use config to control the flow of your application\nif (Panda.Config.get('is_mobile')) {\n    console.log('Is in mobile');\n}\n\n// Get the entire config\nvar config = Panda.Config.getConfig();\nconsole.log(config);\n```\n\nYou can use this service to set a new config completely. However, by default, set mechanism will extend the object.\nIf you need to replace it, you should clear it first.\n\n```javascript\n// Clear the entire config (it doesn't affect other Registry entries)\nPanda.Config.clear();\n\n// Set a new cache completely\nvar new_config = {\n    is_mobile: false,\n    is_desktop: true\n};\nPanda.Config.setConfig(new_config);\n```\n\n### Console\n\nConsole is a basic wrapper of the browser's console object that allows the user to call basic Console functions.\n\nThe wrapper can be turned on or off during runtime to allow developers to keep logs in the code but turn them on or off\nusing cookies or the same service.\n\nConsole's status is based on 2 conditions using OR:\n- Panda Debugger Status\n- Panda Console Status\n\n```javascript\n// Normal usage of console\nconsole.log('This is a test message');\n\n// Check if Console is on\nif (Panda.Console.status()) {\n    // Console is on, do something\n}\n\n// The above if is redundant since this condition is checked in the Console itself\n// The following message will be displayed only if the Console status is on\nPanda.Console.log('This is a test message');\n```\n\nThis wrapper supports basic output functions like `log()`, `dir()` and `dirxml()`:\n\n```javascript\n// Using console.log\nPanda.Console.log('This is a test message');\n\n// Using console.dir\nPanda.Console.dir('This is a test message');\n\n// Using console.dirxml\nPanda.Console.dirxml('This is a test message');\n```\n\n### Debug\n\nDebug is the basic namespace for providing Debug functionality and logic.\n\n#### Debugger\n\nDebugger is a service that provides basic functionality for turning on or off the Debugger mode in your application.\n\nThe Debugger status is determined based on 2 conditions:\n- Panda Debug Status\n- Cookie with the name `pdebug`\n\n```javascript\n// Activate debugger\nPanda.Debug.Debugger.on();\n\n// Deactivate debugger\nPanda.Debug.Debugger.off();\n```\n\nYou can control the flow of your application based on the Debugger mode. Common examples are\nlogging messages to the user using Console.\n\n```javascript\nif (Panda.Debug.Debugger.status()) {\n    // We are on Debugger mode, do something special\n}\n```\n\n### Environment\n\nEnvironment is the basic namespace for providing Environment specific functionality and logic. This namespace\nincludes services regarding the browser environment and/or functionality.\n\n#### Cookies\n\nCookies is a basic service of the Environment namespace which helps creating and reading cookies.\n\n```javascript\n// Store a new cookie which expires in 5 days\nvar expirationDate = new Date();\nexpirationDate.setDate(expirationDate.getDate() + 5);\nPanda.Env.Cookies.set('cookie_name', 'cookie_value', expirationDate, '/');\n\n// Store a new cookie which expires with the session,\n// by setting null for the expiration date\nPanda.Env.Cookies.set('cookie_name_session', 'cookie_value_session', null, '/');\n\n// You can read any cookie by simply calling set()\nvar cookieValue = Panda.Env.Cookies.get('cookie_name');\nconsole.log(cookieValue); // cookie_value\n```\n\n#### Storage\n\nStorage service is a simple service which manages local and session storage.\nStorage can be used in combination with Registry or Cache in order to store more permanently\nvalues for later usage.\n\nStorage can allow storing items to either localStorage or sessionStorage. You can control the type\nof storage setting the `persistent` parameter to `true` or `false`.\n\nFor more information about the differences on local and session storage, you can see [here](https://www.w3schools.com/html/html5_webstorage.asp). \n\n```javascript\n// Store a value to local storage\nPanda.Env.Storage.set('item_name_local', 'item_value_local', true);\nvar localValue = Panda.Env.Storage.get('item_name_local', true);\nconsole.log(localValue); // item_value_local\n\n// Store a value to session storage\nPanda.Env.Storage.set('item_name_session', 'item_value_session', false);\nvar sessionValue = Panda.Env.Storage.get('item_name_session', false);\nconsole.log(sessionValue); // item_value_session\n```\n\n#### Url\n\nUrl is an Environment service which allows you to read the current url of a page and retrieve all\nthe information needed, including domain, sub-domain, paths and parameters.\n\n```javascript\n// Get current url's info (https://sub.domain.com/path/to/file\nvar info = Panda.Env.Url.info();\nconsole.log(info); // {protocol: 'https', sub: 'sub', domain: 'domain.com', pathname: '/path/to/file', hash: ''}\n\n// Get directly domain or sub-domain\nvar domain = Panda.Env.Url.getDomain();\nconsole.log(domain); // 'domain.com'\nvar subDomain = Panda.Env.Url.getSubDomain();\nconsole.log(subDomain); // 'sub'\n\n// Use Url service to redirect or reload the page\nPanda.Env.Url.reload(false);\nPanda.Env.Url.redirect('https://sub2.domain.com/path/new/to/file');\n``` \n\n### Events\n\nEvents is a basic service which acts as a facade for the basic event listener of jQuery.\nEvents can be used to easily attach event listeners to elements in a given context, with a given callback.\n\n```javascript\n// Attach a simple event\ncallbackFunction = function() {\n    console.log('callback function')\n};\nPanda.Events.on('button', 'click', '', callbackFunction); // Equivalent to $(button).on('click', callbackFunction);\nPanda.Events.one('button', 'click', '', callbackFunction); // Equivalent to $(button).one('click', callbackFunction); \nPanda.Events.off('button', 'click', ''); // Equivalent to $(button).off('click'); \n```\n\n### Http\n\nHttp is a base Service that manages basic http requests and fast handling of responses, including Panda Jar Content Responses.\n\n#### Async\n\nAsync Service by default extends the functionality that jQuery provides for ajax requests.\nIt returns a simple promise that can be handled in any way possible.\n\n```javascript\n(function ($) {\n    var requestData = {};\n    var sender = $(document);\n    var extraOptions = {\n        dataType: 'xml',\n        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',\n        processData: true,\n        cache: false\n    };\n    Panda.Http.Async.request('/path/to/resource', 'get', requestData, sender, extraOptions).then(function(response) {\n        // Handle the response\n        console.log(response);\n    });\n})(jQuery);\n```\n\nBy default, each request has the following options set:\n```javascript\nvar defaultOptions = {\n    dataType: 'json',\n    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',\n    processData: false,\n    cache: true,\n    crossDomain: true,\n    loading: false,\n    xhrFields: {\n        withCredentials: false,\n        requestId: requestId\n    }\n};\nconsole.log(defaultOptions);\n```\n\n#### Jar\n\nJson Asynchronous Response Service is a service that is capable of handling special responses generated by Panda's\n[Jar package](https://github.com/PandaPlatform/jar).\n\nIn short description, Json Asynchronous Responses are responses with a specific structure that allow users to\ndeliver any content in any form from backend to frontend using json format.\n\n##### JSONAsync\n\nJSONAsync Service is the first service that handles all Jar responses. This service's responsibility is to detect events\nor actions in the response's content and trigger them towards the sender of the request or the document.\n\nTo be able to detect and trigger these events, JSONAsync should be used for requests as follows:\n\n```javascript\n(function ($) {\n    var requestData = {};\n    var sender = $(document);\n    var extraOptions = {};\n    Panda.Http.Jar.JSONAsync.request('/path/to/resource', 'get', requestData, sender, extraOptions).then(function(response) {\n        // At this point, events have been triggered already. \n        // The response contains both events and other data\n        console.log(response);\n    });\n})(jQuery);\n```\n\n##### HTMLAsync\n\nHTMLAsync Service is a different service that handles all Jar responses that contain html content. This service's\nresponsibility is to detect html contents in the response's content and distribute them based on their settings.\n\nEach html content has the following attributes:\n* `holder`: a normal css holder where the content should be placed.\n* `method`: Determine whether to APPEND, PREPEND or REPLACE html to the holder\n* `html`: The html content\n\nFor more information on the Jar's structure, see [Jar package](https://github.com/PandaPlatform/jar).\n\n##### FormAsync\n\nFormAsync Service is an extra service that handles forms that can submit content asynchronously.\n\nThe form can submit asynchronously on the given `action` parameter if it has async enabled.\nYou can enable async mode by adding attribute `data-async` in the form.\n\nAll form inputs are automatically collected and submitted according to w3c standards.\n\n### Resources\n\nResources is a service that handle loading files like styles or scripts (javascript). It can also be used for normal\nfiles like json.\n\nUsage:\n```javascript\n// Load a normal file (json for example)\nPanda.Resources.getResourceFile('/path/to/file.json', 'json');\n```\n\nLoading a javascript file can work with two ways:\n* Asynchronously, add a script tag in head\n* Promise-way, add a script tag in head\n\nThe difference between these two is that the latter will return a promise you can detect once it's finished.\n\nUsage:\n```javascript\n// Load a javascript file asynchronously\nPanda.Resources.loadJs('/path/to/script.js', function() {\n    console.log('this is a callback, after the script is loaded');\n});\n\n// Use promise to load the javascript\nPanda.Resources.loadJsInline('/path/to/script.js').then(function() {\n    console.log('This callback will be fired once the promise is completed');\n});\n```\n\nLike javascript, css can be loaded using the same two ways. The difference with javascript is that there is no\ncallback when loading asynchronously.\n\nUsage:\n```javascript\n// Load a css file asynchronously\nPanda.Resources.loadCss('/path/to/style.css');\n\n// Use promise to load the css\nPanda.Resources.loadCssInline('/path/to/style.css').then(function() {\n    console.log('This callback will be fired once the promise is completed');\n});\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandaplatform%2Fpanda-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpandaplatform%2Fpanda-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpandaplatform%2Fpanda-js/lists"}