{"id":16923216,"url":"https://github.com/hyperlife1119/patternlockjs","last_synced_at":"2025-04-11T17:01:52.995Z","repository":{"id":47791652,"uuid":"237795712","full_name":"HyperLife1119/PatternLockJS","owner":"HyperLife1119","description":"A pattern lock running on the browser, supporting both desktop and mobile.","archived":false,"fork":false,"pushed_at":"2024-09-27T06:18:44.000Z","size":120,"stargazers_count":19,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T13:02:25.815Z","etag":null,"topics":["patternlock","svg"],"latest_commit_sha":null,"homepage":"https://hyperlife1119.github.io/PatternLockJS/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HyperLife1119.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":"2020-02-02T15:56:33.000Z","updated_at":"2022-11-29T17:03:37.000Z","dependencies_parsed_at":"2025-02-19T20:42:49.410Z","dependency_job_id":null,"html_url":"https://github.com/HyperLife1119/PatternLockJS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyperLife1119%2FPatternLockJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyperLife1119%2FPatternLockJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyperLife1119%2FPatternLockJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyperLife1119%2FPatternLockJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HyperLife1119","download_url":"https://codeload.github.com/HyperLife1119/PatternLockJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248446653,"owners_count":21105130,"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":["patternlock","svg"],"created_at":"2024-10-13T19:58:16.565Z","updated_at":"2025-04-11T17:01:52.965Z","avatar_url":"https://github.com/HyperLife1119.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv align=center\u003e\n    \u003cimg src=./logo.png width=256 height=256 /\u003e\n    \u003ch1\u003ePatternLockJS\u003c/h1\u003e\n    \u003cp\u003e一个运行在浏览器上的图案锁，同时支持桌面端和移动端。\u003c/p\u003e\n    \u003cp\u003eA pattern lock running on the browser, supporting both desktop and mobile.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003e 特点：基于SVG实现，简单，灵活且易用。\n\n#### 用法 (Usage)：\n1. 设置一个空元素，作为PatternLock图案锁的容器\n```html\n\u003cdiv id=\"lock\"\u003e\u003c/div\u003e\n```\n2. 为其设置尺寸（宽高）\n```css\n#lock {\n    width: 45vh;\n    height: 45vh;\n}\n```\n3. 引入patternlock.js\n```html\n\u003cscript src=\"(Your Path)/patternlock.min.js\"\u003e\u003c/script\u003e\n```\n4. 实例化PatternLock，共有两个参数。\n    * 参数一：`selectors` 选择器，通过选择器找到元素作为PatternLock图案锁的容器。\n    * 参数二：`callback` 一个包含回调函数的对象。\n        * `verify`：接收一个参数，值为用户操作PatternLock图案锁得出的密码。在PatternLock图案锁进行密码验证时触发，该函数必须返回一个布尔值。（必须）\n        * `complete`：接收一个参数，值为用户操作PatternLock图案锁得出的密码。在PatternLock图案锁进行密码验证完成时触发。（非必须）\n        * `reset`：在PatternLock图案锁重置时触发。（非必须）\n```javascript\nconst lock = new PatternLock('#lock', {\n    complete: value =\u003e {\n        console.log('complete: ' + value);\n    },\n    reset: () =\u003e {\n        console.log('reset');\n    },\n    verify: value =\u003e {\n        if (value == pwd) {\n            alert('密码正确！');\n            return true;\n        } else {\n            return false;\n        }\n    }\n});\n```\n5. Tips：添加 `overscroll-behavior-y: contain;` 到body元素，可阻止部分移动端浏览器下拉刷新等默认行为（这些浏览器默认行为可能会干扰用户操作PatternLock图案锁）。\n```css\nbody {\n    overscroll-behavior-y: contain;\n}\n```\n\u003e 具体代码可参考`index.html`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperlife1119%2Fpatternlockjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperlife1119%2Fpatternlockjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperlife1119%2Fpatternlockjs/lists"}