{"id":16411943,"url":"https://github.com/onokumus/onoffcanvas","last_synced_at":"2025-03-16T16:32:37.407Z","repository":{"id":57314830,"uuid":"82976907","full_name":"onokumus/onoffcanvas","owner":"onokumus","description":"An offcanvas plugin","archived":false,"fork":false,"pushed_at":"2024-06-01T19:50:01.000Z","size":325,"stargazers_count":28,"open_issues_count":4,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-12T06:47:05.811Z","etag":null,"topics":["off-canvas"],"latest_commit_sha":null,"homepage":"https://onokumus.github.io/onoffcanvas/","language":"TypeScript","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/onokumus.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}},"created_at":"2017-02-23T22:17:19.000Z","updated_at":"2023-02-07T21:28:01.000Z","dependencies_parsed_at":"2024-06-19T06:14:47.069Z","dependency_job_id":"ff5dfb24-97de-4c29-becb-e9d929285102","html_url":"https://github.com/onokumus/onoffcanvas","commit_stats":{"total_commits":91,"total_committers":1,"mean_commits":91.0,"dds":0.0,"last_synced_commit":"015041d04191ec8b431ca1650e4b596e85f357e4"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onokumus%2Fonoffcanvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onokumus%2Fonoffcanvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onokumus%2Fonoffcanvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onokumus%2Fonoffcanvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onokumus","download_url":"https://codeload.github.com/onokumus/onoffcanvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221666272,"owners_count":16860394,"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":["off-canvas"],"created_at":"2024-10-11T06:47:07.724Z","updated_at":"2024-10-27T10:58:07.330Z","avatar_url":"https://github.com/onokumus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# onoffcanvas [![NPM version](https://img.shields.io/npm/v/onoffcanvas.svg?style=flat)](https://www.npmjs.com/package/onoffcanvas) [![NPM monthly downloads](https://img.shields.io/npm/dm/onoffcanvas.svg?style=flat)](https://npmjs.org/package/onoffcanvas) [![NPM total downloads](https://img.shields.io/npm/dt/onoffcanvas.svg?style=flat)](https://npmjs.org/package/onoffcanvas)  \n\n\u003e An offcanvas plugin\n\n\u003e This plugin does not support any version of IE browser.\n\nPlease consider following this project's author, [onokumus](https://github.com/onokumus), and consider starring the project to show your :heart: and support.\n\n## Getting started\n\n### Install\nInstall with [npm](https://www.npmjs.com/):\n\n```sh\nnpm install --save onoffcanvas\n```\n\nInstall with [yarn](https://yarnpkg.com):\n\n```sh\nyarn add onoffcanvas\n```\n\n### Download\n[download from github](https://github.com/onokumus/onoffcanvas/archive/master.zip)\n\n### Usage\n\n\u003e commonjs\n```js\nconst OnoffCanvas = require('onoffcanvas');\nconst oc = new OnoffCanvas(element, options);\n```\n\n\u003e es2015 module or typescript\n```js\nimport OnoffCanvas from 'onoffcanvas';\nconst oc = new OnoffCanvas(element, options);\n```\n\n\u003e browser\n\n1. Include `onoffcanvas` StyleSheet\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.css\"\u003e\n  ```\n\n2. Include `onoffcanvas` plugin's code\n  ```html\n  \u003cscript src=\"https://unpkg.com/onoffcanvas/dist/onoffcanvas.min.js\"\u003e\u003c/script\u003e\n  ```\n\n3. Add class `onoffcanvas` and `id` attribute to `div` tag.\n  ```html\n  \u003cdiv class=\"onoffcanvas\" id=\"side-canvas\"\u003e\u003c/div\u003e\n  ```\n\n4. Add trigger button: Be sure to add `data-toggle=\"onoffcanvas\"`.\n  ```html\n  \u003cbutton data-toggle=\"onoffcanvas\" data-target=\"#side-canvas\"\u003eSIDE MENU\u003c/div\u003e\n  ```\n5.\n    a. Create new instance from Onoffcanvas\n\n    ```js\n    // element is selector or Node\n    new OnoffCanvas('#side-canvas', options);\n    // OR\n    new OnoffCanvas(document.querySelector('#side-canvas'), options);\n    ```\n\n    b. Auto init all OnoffCanvas elements\n\n    ```js\n    OnoffCanvas.autoinit(options);\n    ```\n\n### Options\n\n#### hideByEsc\nType: `Boolean`\nDefault: `true`\n\n\u003e Hide OnoffCanvas element with ESC key\n\n```js\n new OnoffCanvas('#side-canvas', {\n   hideByEsc: false\n });\n```\n\nor\n```js\n OnoffCanvas.autoinit({\n   hideByEsc: false\n });\n```\n\n#### createDrawer\n\nType: `Boolean`\nDefault: `true`\n\n\u003e Creates an empty `div` element. Clicking on the `div` element, hides the OnoffCanvas.\n\n```js\n new OnoffCanvas('#side-canvas', {\n   createDrawer: false\n });\n```\n\nor\n```js\n OnoffCanvas.autoinit({\n   createDrawer: false\n });\n```\n\n## Events\n\n|**Event Type**      |**Description**|\n|--------------|--------------|\n|show.onoffcanvas    |This event fires immediately when the `show` instance method is called.|\n|hide.onoffcanvas    |This event is fired immediately when the `hide` method has been called. |\n\n```js\n new OnoffCanvas('#side-canvas')\n .on('show.onoffcanvas', (event)=\u003e{\n   console.log(event.type); // show.onoffcanvas\n }).on('hide.onoffcanvas',(event)=\u003e{\n   console.log(event.target); // \u003cdiv class=\"onoffcanvas ...\n });\n ```\n\n### API\n#### toggle\nShow/Hide OnoffCanvas element\n```js\nnew OnoffCanvas('#side-canvas').toggle();\n```\n#### show\nShow OnoffCanvas element\n```js\nnew OnoffCanvas('#side-canvas').show();\n```\n#### hide\nHide OnoffCanvas element\n```js\nnew OnoffCanvas('#side-canvas').hide();\n```\n\n### Canvas Options\n\n1. Position Options : `onoffcanvas` is in absolute position by default\n  - add class `is-fixed` to fixed position\n\n  ```html\n  \u003cdiv class=\"onoffcanvas is-fixed\"\u003e\u003c/div\u003e\n  ```\n\n2. Direction Options : `onoffcanvas` is in full-screen by default\n  - `is-top`\n  - `is-end` (right in LTR, left in RTL)\n  - `is-bottom`,\n  - `is-start` (left in LTR, right in RTL)\n  - `is-center`\n\n  ```html\n  \u003cdiv class=\"onoffcanvas is-{top|end|bottom|start|center}\" id=\"side-canvas\"\u003e\u003c/div\u003e\n  ```\n\n3. Opened/Closed Options : `onoffcanvas` is closed by default\n  - add class `is-open` to open.\n\n  ```html\n  \u003cdiv class=\"onoffcanvas is-open\" id=\"side-canvas\"\u003e\u003c/div\u003e\n  ```\n\n4. Hoverable Options :\n  - add class `onoffcanvas-container` to parent element\n  - add class `is-hoverable` to `onoffcanvas`\n\n```html\n\u003cdiv class=\"onoffcanvas-container\"\u003e\n    \u003cdiv class=\"onoffcanvas is-hoverable\" id=\"side-canvas\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n  ```\n\n### Drawer Options\n\nThe background of the drawer is transparent. The following code should be added for the shadow.\n\n```css\n.onoffcanvas-drawer.is-open {\n  background-color: rgba(0,0,0,.5);\n}\n```\n### Trigger Options\n\n- Type\n  1. link with `href`\n\n  ```html\n  \u003ca href=\"#side-canvas\" data-toggle=\"onoffcanvas\" aria-expanded=\"false\"\u003etoggle onoffcanvas\u003c/a\u003e\n  ```\n\n  2. button with `data-target`\n\n  ```html\n  \u003cbutton data-target=\"#side-canvas\" data-toggle=\"onoffcanvas\" aria-expanded=\"false\"\u003etoggle onoffcanvas\u003c/button\u003e\n  ```\n\n- Style\n  \u003e if you want to use the default style for `onoffcanvas`, add class `onoffcanvas-toggler`\n\n  ```html\n  \u003ca class=\"onoffcanvas-toggler\" href=\"#side-canvas\" data-toggle=\"onoffcanvas\" aria-expanded=\"false\"\u003e\u003c/a\u003e\n  ```\n\n  OR\n\n  ```html\n  \u003cbutton class=\"onoffcanvas-toggler\" data-target=\"#side-canvas\" data-toggle=\"onoffcanvas\" aria-expanded=\"false\"\u003e\u003c/button\u003e\n  ```\n\n### Author\n**onokumus**\n+ [GitHub Profile](https://github.com/onokumus)\n+ [Twitter Profile](https://twitter.com/onokumus)\n+ [LinkedIn Profile](https://linkedin.com/in/onokumus)\n\n### License\nCopyright © 2021, [onokumus](https://github.com/onokumus).\nReleased under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonokumus%2Fonoffcanvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonokumus%2Fonoffcanvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonokumus%2Fonoffcanvas/lists"}