{"id":22261227,"url":"https://github.com/cawabunga/layer-mask","last_synced_at":"2025-03-25T13:40:37.718Z","repository":{"id":26490493,"uuid":"109015483","full_name":"cawabunga/layer-mask","owner":"cawabunga","description":"The javascript library that breaks the page into cells around target element(s).","archived":false,"fork":false,"pushed_at":"2022-12-12T15:57:51.000Z","size":1170,"stargazers_count":1,"open_issues_count":15,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-16T10:32:10.379Z","etag":null,"topics":["javascript","lightbox","mask","spotlight","walkthrough"],"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/cawabunga.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":"2017-10-31T15:29:23.000Z","updated_at":"2021-05-22T22:20:11.000Z","dependencies_parsed_at":"2022-08-07T22:00:04.305Z","dependency_job_id":null,"html_url":"https://github.com/cawabunga/layer-mask","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawabunga%2Flayer-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawabunga%2Flayer-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawabunga%2Flayer-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawabunga%2Flayer-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawabunga","download_url":"https://codeload.github.com/cawabunga/layer-mask/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245414530,"owners_count":20611363,"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":["javascript","lightbox","mask","spotlight","walkthrough"],"created_at":"2024-12-03T09:11:55.631Z","updated_at":"2025-03-25T13:40:37.670Z","avatar_url":"https://github.com/cawabunga.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Layer Mask [![Build Status](https://travis-ci.org/cawabunga/layer-mask.svg?branch=master)](https://travis-ci.org/cawabunga/layer-mask) [![Coverage Status](https://coveralls.io/repos/cawabunga/layer-mask/badge.svg?branch=master)](https://coveralls.io/r/cawabunga/layer-mask?branch=master)\n===\n\nThe javascript library that breaks the page into cells around specified element(s).\n\n### Showcase\nHere are the target element is a dialog window:\n\n![](https://raw.github.com/cawabunga/layer-mask/master/docs/images/showcase-cells.gif)\n\n\nLive demo:\n- [basic usage](https://cawabunga.github.io/layer-mask/)\n- [demo integration](https://cawabunga.github.io/layer-mask/tour.html) with [Shepherd](https://github.com/HubSpot/shepherd)\n\nHere are useful cases:\n- allow/disallow clicking particular elements on the page (modifier: \"click-through\")\n- creating a backdrop that highlights elements on the page (modifier: \"spotlight\")\n\n### Getting Started\n\nInstall with NPM:\n```sh\nnpm install layer-mask --save\n```\n\nInstall with Yarn:\n```sh\nyarn add layer-mask\n```\n\nImport into your project:\n```javascript\nimport { LayerMask, LayerMaskManager } from 'layer-mask'; // ES Import\n// or\nconst { LayerMask, LayerMaskManager } = require('layer-mask'); // CommonJS\n```\nThere are also small helper CSS file needs to be included `layer-mask/dist/layer-mask.css` by whatever approach that fits to your project.\n\n### Usage\nDirect usage:\n```javascript\nconst { LayerMask } = require('layer-mask');\n\nconst myElements = document.querySelectorAll('#link-1, #link-2'); // can be passed multiple elements at one time\nconst layerMask = new LayerMask(myElements);\nconst maskElement = layerMask.createMask();\n\ndocument.querySelector('body').appendChild(maskElement);\n```\n\nUsing the mask manager:\n```javascript\nconst { LayerMaskManager, LayerMask } = require('layer-mask');\n\nconst container = document.querySelector('body');\nconst maskManager = new LayerMaskManager(container);\n\nconst mask = new LayerMask(document.querySelectorAll('#link-1, #link-2'));\nconst maskElement = maskManager.revealMask(mask);\n\nmaskElement.onclick = () =\u003e {\n    maskManager.hideActiveMask();\n};\n```\n\n### Modifiers\nYou can add custom CSS classes to the mask element, simply provide a `modifiers` configuration.\n```javascript\nconst mask = new LayerMask(document.querySelectorAll('#dummy'), {\n    modifiers: [\n        // Predefined ones\n        'spotlight',     // grays out cells around the target elements\n        'click-through', // prevent from clicking outside the target elements\n        'debug',         // sames as \"spotlight\" but in yellow color :)\n    ],\n});\nconst maskEl = mask.createMask();\n```\n\n### Roadmap\n- Add flow typings\n- Release\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawabunga%2Flayer-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawabunga%2Flayer-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawabunga%2Flayer-mask/lists"}