{"id":29632760,"url":"https://github.com/thomasdev-de/bs-layer","last_synced_at":"2026-01-20T16:41:53.444Z","repository":{"id":304819868,"uuid":"1020021638","full_name":"ThomasDev-de/bs-layer","owner":"ThomasDev-de","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-15T21:49:22.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-16T00:54:39.433Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/ThomasDev-de.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-15T08:14:28.000Z","updated_at":"2025-07-15T21:49:26.000Z","dependencies_parsed_at":"2025-07-16T03:03:38.217Z","dependency_job_id":"2df5f8b6-f424-4921-b657-c0838f976973","html_url":"https://github.com/ThomasDev-de/bs-layer","commit_stats":null,"previous_names":["thomasdev-de/bs-layerslidemenu"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ThomasDev-de/bs-layer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasDev-de","download_url":"https://codeload.github.com/ThomasDev-de/bs-layer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-layer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266305285,"owners_count":23908416,"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-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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-07-21T13:03:36.779Z","updated_at":"2026-01-20T16:41:53.437Z","avatar_url":"https://github.com/ThomasDev-de.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# bs-layer\n\nA lightweight sliding layer system for jQuery and Bootstrap 5.  \nSupports stacking multiple layers, custom AJAX content, animation, and full keyboard support.\n\n![](demo/img.png)\n---\n\n## Features\n\n- Stackable sliding layers (like modals, but multi-level)\n- Smooth open/close animations\n- AJAX content loading support\n- Close all layers with a single call, stacked \"top-down\"\n- Callback support for all key events\n- Full Bootstrap 5 compatibility\n- Easily extensible with custom logic\n\n---\n\n## Installation\n\nInstall with Composer (Bootstrap 5, Bootstrap-Icons \u0026 jQuery must be present):\n\n```\ncomposer require twbs/bootstrap twbs/bootstrap-icons components/jquery\n```\n\n**Or include JS/CSS manually:**\n\n```html\n\n\u003clink href=\"vendor/twbs/bootstrap-icons/font/bootstrap-icons.min.css\" rel=\"stylesheet\"\u003e\n\u003clink rel=\"stylesheet\" href=\"vendor/twbs/bootstrap/dist/css/bootstrap.min.css\"\u003e\n\n\n\u003cscript src=\"vendor/components/jquery/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/bs-layer.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n## Getting Started\n\n**HTML Example:**\n\n```html\n\u003ca id=\"layerLogin\" data-url=\"login.html\" href=\"#\" class=\"btn btn-primary\"\u003e\n    Open layer\n\u003c/a\u003e\n```\n\n**JavaScript Usage:**\n\n```javascript\n// Initialize a layer trigger\nconst layerLogin = $('#layerLogin').bsLayer({\n    name: 'login-layer',\n    // url: 'login.html',\n    onPostBody: function ($content) {\n        // Callback after content loaded\n    }\n});\n\n// You can send your own events to the layer\n$.bsLayer.customEvent('login-layer', 'event-name', ...params);\n\n// Or close all layers with once\n$.bsLayer.closeAll();\n\n```\n\n---\n\n## API\n\n### Global Configuration\n\nGlobal configuration options control the technical behavior and default appearance of **all** layers.  \nThey are set on the `$.bsLayer.config` object and can be changed at runtime using `$.bsLayer.setConfig()`.\n\nThese settings affect AJAX requests, default breakpoints, animation speed, stacking order, and icon classes.  \nChanges to the global config apply to all subsequently created layers unless overridden per-layer.\n\nSee the table below for all available global configuration options:\n\n| Option                  | Type     | Default / Example                                  | Description                                                                        |\n|-------------------------|----------|----------------------------------------------------|------------------------------------------------------------------------------------|\n| ajax.method             | string   | 'GET'                                              | HTTP method used for AJAX requests (usually 'GET' or 'POST')                       |\n| ajax.contentType        | string   | 'application/x-www-form-urlencoded; charset=UTF-8' | Content-Type for AJAX submissions                                                  |\n| fullWidthBreakpoint     | number   | 576                                                | Below this window width (px), layers use 100% of width (Bootstrap 'sm' breakpoint) |\n| firstLayerWithInPercent | number   | 0.80                                               | Percentage (e.g. 0.8 = 80%) of window width for first layer                        |\n| distanceBetweenLayers   | number   | 100                                                | Distance in px between stacked layers                                              |\n| animationDuration       | number   | 600                                                | Show/hide animation duration in milliseconds                                       |\n| zIndexStart             | number   | 1050                                               | z-index for bottom-most layer; each additional layer is placed higher              |\n| parent                  | string   | 'body'                                             | CSS selector: Where layers are appended in the DOM                                 |\n| icons.close             | string   | 'bi bi-x-lg'                                       | Icon class for the close (X) button (Bootstrap Icons)                              |\n| icons.refresh           | string   | 'bi bi-arrow-clockwise'                            | Icon class for refresh button                                                      |\n| icons.maximize          | string   | 'bi bi-arrows-angle-expand'                        | Icon class for maximize button                                                     |\n| icons.minimize          | string   | 'bi bi-arrows-angle-contract'                      | Icon class for minimize button                                                     |\n| onError                 | function | `function($message) {}`                            | Global error handler; called on AJAX or layer errors                               |\n\n**Usage Example:**\n\n```javascript\n// Example: Centrally adjust global configuration for all layers\n$.bsLayer.setConfig({\n    fullWidthBreakpoint: 768,    // Default is 576, here changed to 768 px\n    animationDuration: 400,      // Layer animation now lasts 400 ms\n    icons: {\n        close: 'bi bi-x',\n        maximize: 'bi bi-fullscreen',\n        minimize: 'bi bi-fullscreen-exit',\n        refresh: 'bi bi-arrow-clockwise'\n    }\n});\n\n// Optional: Overwrite the global onError callback function\n$.bsLayer.onError = function ($msg) {\n    // Custom error handling\n    alert('Layer error: ' + $msg);\n};\n```\n\n---\n\n### Layer Settings\n\nLayer settings define the configuration and behavior of **individual layers**.  \nThey can be passed when initializing a layer via `$(selector).bsLayer(options)` or set as `data-` attributes on the\nlayer trigger element.\n\nThese settings control properties such as title, width, styles, AJAX URL, refreshability, closing/maximizing, and all\nevent callbacks.  \nAny setting not explicitly defined will fall back to the global defaults.\n\nSee the table below for all available settings you can use per layer:\n\n| Option                | Type                         | Default / Example                          | Description                                                                                                                                                                                                                                                                                                                                  |\n|-----------------------|------------------------------|--------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| name                  | string                       | 'layer01'                                  | Unique layer name or identifier                                                                                                                                                                                                                                                                                                              |\n| title                 | string/HTML                  | undefined                                  | Optional: Layer title (can be string or HTML)                                                                                                                                                                                                                                                                                                |\n| width                 | number/string                | undefined                                  | Optional: Width in px or as CSS string                                                                                                                                                                                                                                                                                                       |\n| bgStyle               | object                       | `{ classes: 'text-dark', css: {...} }`     | Style for background and text color (see below)                                                                                                                                                                                                                                                                                              |\n| \u0026nbsp;\u0026nbsp;↳ classes | string                       | 'text-dark'                                | Additional CSS classes for the layer                                                                                                                                                                                                                                                                                                         |\n| \u0026nbsp;\u0026nbsp;↳ css     | object                       | `{ background: ..., boxShadow: ..., ... }` | Inline CSS styles for the layer background                                                                                                                                                                                                                                                                                                   |\n| backdrop              | bool/string                  | true                                       | Show backdrop: `true`, `false`, or `'static'`                                                                                                                                                                                                                                                                                                |\n| url                   | string \\| Function (Promise) | undefined                                  | URL für AJAX-Inhalte **oder** Funktion/Promise für asynchronen Content. Falls eine Funktion verwendet wird, bekommt sie ein `params`-Objekt übergeben (die von `queryParams` zurückgegebenen/erweiterten Parameter). Die Funktion muss ein Promise zurückgeben, welches mit dem gewünschten Content (HTML/String oder Daten) aufgelöst wird. || refreshable           | bool                         | false                                      | Enable content refresh                                                                                                                                                            |\n| closeable             | bool                         | true                                       | Show close (X) button in header                                                                                                                                                                                                                                                                                                              |\n| expandable            | bool                         | true                                       | Allow layer to be maximized                                                                                                                                                                                                                                                                                                                  |\n| queryParams           | function                     | `(params) =\u003e params`                       | Modify AJAX query parameters                                                                                                                                                                                                                                                                                                                 |\n| onAll                 | function                     | `function(eventName, ...args) {}`          | Callback for all triggered events                                                                                                                                                                                                                                                                                                            |\n| onPostBody            | function                     | `function($content) {}`                    | After content is loaded                                                                                                                                                                                                                                                                                                                      |\n| onShow                | function                     | `function() {}`                            | Before layer is shown                                                                                                                                                                                                                                                                                                                        |\n| onShown               | function                     | `function() {}`                            | After layer is fully visible                                                                                                                                                                                                                                                                                                                 |\n| onHide                | function                     | `function() {}`                            | Before layer is hidden                                                                                                                                                                                                                                                                                                                       |\n| onHidden              | function                     | `function() {}`                            | After layer is fully hidden                                                                                                                                                                                                                                                                                                                  |\n| onRefresh             | function                     | `function($content) {}`                    | When the layer is refreshed                                                                                                                                                                                                                                                                                                                  |\n| onCustomEvent         | function                     | `function(eventName, ...params) {}`        | For user-defined custom events                                                                                                                                                                                                                                                                                                               |\n\n**Usage Example:**\n\n```javascript\n$('#btnLayerExample').bsLayer({\n    ajax: {\n        method: 'POST'\n    },\n    name: 'example-layer',\n    title: 'My Example Layer',\n    width: 600,\n    backdrop: true,\n    url: 'example-content.php',\n    refreshable: true,\n    closeable: true,\n    expandable: false,\n    queryParams: function (params) {\n        params.userId = 123;\n        return params;\n    },\n    onShown: function ($content) {\n        console.log('Layer wurde angezeigt');\n    },\n    onAll: function (eventName, ...args) {\n        console.log('Event:', eventName, args);\n    }\n});\n\n// You can also supply a function to the `url` option that returns a Promise. This allows you to load dynamic content asynchronously, for example via an API call or any custom logic.\n// The function can be defined either as an `async` function or as a regular function returning a Promise. The most important point is that the return value is a Promise that resolves with the HTML/string content.\n$('#btnLayerExample').bsLayer({\n    name: 'promise-layer',\n    title: 'Async Content Layer',\n    width: 600,\n    backdrop: true,\n    queryParams(params) {\n        // You can dynamically modify or extend parameters here\n        params.id = 1;\n        params.token = 'demo-123'; // Example: add extra parameter\n        return params;\n    },\n    // `url` as a Promise function: receives params and can use them\n    url: async function(params) {\n        // Example: use params for dynamic content or API call\n        return new Promise(function (resolve, reject) {\n            setTimeout(function () {\n                // You can use params.id, params.token, etc. as needed\n                resolve(\n                    `\u003cdiv class=\"p-4\"\u003e\n                    \u003ch3\u003eAsync loaded content 🚀\u003c/h3\u003e\n                    \u003cp\u003eThis content was loaded via Promise!\u003c/p\u003e\n                    \u003cdiv\u003eParams: \u003ccode\u003e${JSON.stringify(params)}\u003c/code\u003e\u003c/div\u003e\n                \u003c/div\u003e`\n                );\n            }, 1000);\n        });\n    },\n    refreshable: true,\n    onShown: function ($content) {\n        console.log('Async layer shown');\n    }\n});\n```\n\n---\n\n### Plugin Methods\n\nThese instance methods can be called on any jQuery element that has been initialized as a layer trigger:\n\n| Method     | Parameters     | Description                                                                           |\n|------------|----------------|---------------------------------------------------------------------------------------|\n| `setTitle` | `title`        | Dynamically sets the layer’s title (as string or HTML) for the current trigger.       |\n| `show`     | `...args`      | Programmatically opens/displays the layer (simulates a click on the trigger element). |\n| `refresh`  | `options = {}` | Reloads or refreshes the layer content, e.g. via AJAX, using supplied options if any. |\n| `close`    | none           | Closes/hides the layer that belongs to the current trigger element.                   |\n\n**Usage Example:**\n\n```javascript\n$('#myLayerBtn').bsLayer('setTitle', 'New Title');\n$('#myLayerBtn').bsLayer('show');\n$('#myLayerBtn').bsLayer('refresh');\n$('#myLayerBtn').bsLayer('close');\n```\n\n## License\n\nProprietary  \nSee [composer.json](composer.json) for author information.# bs-layerSlideMenu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fbs-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasdev-de%2Fbs-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fbs-layer/lists"}