{"id":25834848,"url":"https://github.com/vndg-rdmt/view-effects","last_synced_at":"2026-06-09T08:32:21.232Z","repository":{"id":198263372,"uuid":"700562531","full_name":"vndg-rdmt/view-effects","owner":"vndg-rdmt","description":"Package which applies custom behavior or effects to elements","archived":false,"fork":false,"pushed_at":"2023-10-04T21:02:35.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T01:00:21.598Z","etag":null,"topics":["custom","custom-element","drag","draggable","draggable-elements","effect","package","resize","resize-element","typescript","view"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vndg-rdmt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-10-04T20:35:10.000Z","updated_at":"2023-10-04T21:02:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"5619b42a-e1d9-4615-98a5-aa247df8b8b6","html_url":"https://github.com/vndg-rdmt/view-effects","commit_stats":null,"previous_names":["vndg-rdmt/view-effects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vndg-rdmt/view-effects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vndg-rdmt%2Fview-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vndg-rdmt%2Fview-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vndg-rdmt%2Fview-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vndg-rdmt%2Fview-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vndg-rdmt","download_url":"https://codeload.github.com/vndg-rdmt/view-effects/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vndg-rdmt%2Fview-effects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34098931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["custom","custom-element","drag","draggable","draggable-elements","effect","package","resize","resize-element","typescript","view"],"created_at":"2025-03-01T00:59:57.421Z","updated_at":"2026-06-09T08:32:21.220Z","avatar_url":"https://github.com/vndg-rdmt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# view-effects\nPackage which applies custom behavior or effects to elements\n\n#### Install\n```bash\nnpm i view-effects\n```\n\n### How to apply effect\n\n\u003e `ViewEffect` is a term, which describes custom logic applied to views (HTMLElements), behavior, events responding and etc.\n\n```ts\n// Effect is created.\n// (targetElement: HTMLElement)\nconst effect = new ViewEffectConstructor(targetElement, ...args);\n\neffect.enable();\n// Effect enabled...\neffect.disable();\n// Effect is disabled...\n```\n\n## ResizeViewEffect\n\nApplies resizing effect to the `HTMLElement`, so it becomes resizeable\nby the cursor.\n\n*When effectController is grabbed, by moving the cursor effectTarget\nwill properly rescale, until it does not fit into the window.*\n\n**Constructor**\n\n```ts\nnew ResizeViewEffect(effectTarget: HTMLElement, effectController: HTMLElement = effectTarget): ViewEffect\n```\n\n- `effectTarget` View which will be resized by the effect.\n- `effectController` If provided, resize effect will be achived by drabbing\nthis effectController element, and not effectTarget. By default,\nequals to effectTarget.\n\nFor example, you can achive desktop window behavior, when window\nis resized by grabbing its corner.\n\n## DragViewEffect\n\nApplies grabbing effect to the `HTMLElement`, which makes it\npossible to drag it around the surface by the cursor.\n\n*When effectController is grabbed, y moving the cursor effectTarget\nwill change it's position around the document.\n(Don't forget to position to absolute/fixed)*\n\n**Constructor**\n\n```ts\nnew DragViewEffect(effectTarget: HTMLElement, effectController: HTMLElement = effectTarget): ViewEffect\n```\n\n- `effectTarget` View which shoud be dragged around the document.\n\n- `effectController` If provided, dragging effect will be achived by drabbing\nthis effectController element, and not effectTarget. By default,\nequals to effectTarget.\n\nFor example, you can achive desktop app window behavior, when window\nis moved around the screen only when its header is being dragged by the cursor,\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvndg-rdmt%2Fview-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvndg-rdmt%2Fview-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvndg-rdmt%2Fview-effects/lists"}