{"id":27215574,"url":"https://github.com/teomandeniz/selection_js","last_synced_at":"2026-05-09T14:09:33.857Z","repository":{"id":287050822,"uuid":"963430346","full_name":"TeomanDeniz/SELECTION_JS","owner":"TeomanDeniz","description":"Advanced HTML Text Selection Visual Effects","archived":false,"fork":false,"pushed_at":"2025-04-09T17:37:46.000Z","size":16,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T18:38:35.289Z","etag":null,"topics":["css","html","html5","js","style","svg","web"],"latest_commit_sha":null,"homepage":"https://maximum-tension.com","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/TeomanDeniz.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":"2025-04-09T17:08:33.000Z","updated_at":"2025-04-09T17:37:49.000Z","dependencies_parsed_at":"2025-04-09T18:41:56.928Z","dependency_job_id":"803d33d1-cb9c-474d-8b8f-f6824ec24367","html_url":"https://github.com/TeomanDeniz/SELECTION_JS","commit_stats":null,"previous_names":["teomandeniz/selection_js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeomanDeniz%2FSELECTION_JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeomanDeniz%2FSELECTION_JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeomanDeniz%2FSELECTION_JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeomanDeniz%2FSELECTION_JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TeomanDeniz","download_url":"https://codeload.github.com/TeomanDeniz/SELECTION_JS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248156479,"owners_count":21056850,"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":["css","html","html5","js","style","svg","web"],"created_at":"2025-04-10T04:26:01.236Z","updated_at":"2026-05-09T14:09:33.827Z","avatar_url":"https://github.com/TeomanDeniz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Selection JS\n\nThis library enables a custom selection effect when a user selects text inside specific elements. You can also trigger an optional animation when the user presses Ctrl+C to copy the selected content.\n\n![Preview_1](https://github.com/user-attachments/assets/e039186d-03d0-4639-a941-8e45f0fb76ec)\n\n![Preview_2](https://github.com/user-attachments/assets/533e179e-586d-4fd8-8dd0-86f5791a366d)\n\n![Preview_3](https://github.com/user-attachments/assets/904667b5-a587-40e4-99cf-2f3712d15cff)\n\nhttps://github.com/user-attachments/assets/ef423119-6afd-4fa4-b400-94299f475748\n\n## Features\n\n- Highlight effect using customizable colored overlays\n\n- `CTRL` + `C` copy animations for specific elements\n\n- Lightweight and styleable with CSS\n\n- Works with dynamically added elements, as long as they exist before user selection\n\n## Installation\n\n1. Include the CSS in your HTML:\n\n```HTML\n\u003clink rel=\"stylesheet\" href=\"SELECTION.css\"/\u003e\n```\n\n2. Include the JavaScript file just before the closing `\u003c/body\u003e` tag:\n\n```HTML\n\u003cscript src=\"SELECTION.js\"\u003e\u003c/script\u003e\n```\n\n3. Insert the container where the selection overlays will be rendered:\n\n```HTML\n\u003cdiv id=\"SELECTION_CONTAINER\"\u003e\u003c/div\u003e\n```\n\n4. Add the required SVG filter definition inside your HTML (anywhere in the body or head):\n\n```HTML\n\u003cSVG xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"0\" height=\"0\"\u003e\n \u003cdefs\u003e\n  \u003cfilter id=\"GOO_EFFECT\"\u003e\n   \u003cfeGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2\" result=\"blur\"/\u003e\n   \u003cfeColorMatrix\n    in=\"blur\"\n    mode=\"matrix\"\n    values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -4\"\n    result=\"goo\"\n   /\u003e\n   \u003cfeComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\"/\u003e\n  \u003c/filter\u003e\n \u003c/defs\u003e\n\u003c/SVG\u003e\n```\n\n## Usage\n\nCall the `SOFT_SELECTION()` function after the page has loaded:\n\n```HTML\nSOFT_SELECTION(\"#E84A8C\", optional_on_copy_function);\n```\n\n### Parameters\n\n* `COLOR` - A default hex color used for selection effects (e.g. `\"#E84A8C\"`)\n* `ON_COPY` - *(optional)* A global fallback callback function when `CTRL` + `C` is pressed. Only used if no per-element callback is defined.\n\n## Markup Examples\n\nYou can define which elements should respond to the effect using the `data-selection` attribute:\n\n```HTML\n\u003cp data-selection\u003e\n  This paragraph will have a selection effect using the default color.\n\u003c/p\u003e\n\n\u003cp data-selection=\"#FF0000\"\u003e\n  This paragraph will use red as its selection color.\n\u003c/p\u003e\n\n\u003cp\u003e\n  This paragraph has no selection effect.\n\u003c/p\u003e\n\n```\n\n### Optional `data-selection-oncopy`\n\nYou can specify a custom animation function that runs when a user presses `CTRL` + `C` while this element is selected:\n\n```HTML\n\u003cp DATA-SELECTION DATA-SELECTION-ONCOPY=\"on_copy_animation\"\u003e\n  Custom copy animation will run on Ctrl+C.\n\u003c/p\u003e\n```\n\nThe function must be globally defined:\n\n```JS\nfunction on_copy_animation(color, element)\n{\n  element.style.backgroundColor = \"#FFF\";\n  setTimeout(\n  \t() =\u003e {\n    \telement.style.backgroundColor = color;\n  \t}, 100\n  );\n}\n```\n\n### Styling\n\nYou can also add your own transitions:\n\n```CSS\n.SELECTION_BOX,\n[data-selection]\n{\n  transition:\n    background-color 0.5s linear,\n    left 0.05s linear,\n    width 0.05s linear,\n    height 0.05s linear;\n}\n\n[data-selection]::selection\n{\n  color: white;\n  background-color: transparent;\n}\n```\n\n## Notes\n\n* The `SELECTION_CONTAINER` must exist in the DOM when `SOFT_SELECTION()` is called.\n* Elements with `data-selection` can be added dynamically and will work, as long as they exist before the user selects them.\n* The `data-selection-oncopy` attribute must point to a globally defined JavaScript function.\n\n## Example\n\n```HTML\n\u003c!DOCTYPE html\u003e\n\u003cHTML LANG=\"en\"\u003e\n \u003cHEAD\u003e\n  \u003cMETA CHARSET=\"UTF-8\"/\u003e\n  \u003cTITLE\u003eCustom Selection Effect\u003c/TITLE\u003e\n  \u003cSTYLE\u003e\n.SELECTION_BOX,\n[DATA-SELECTION]\n{\n\tTRANSITION:\n\t\tBACKGROUND-COLOR 0.5S LINEAR,\n\t\t            LEFT 0.05S LINEAR,\n\t\t           WIDTH 0.05S LINEAR,\n\t\t          HEIGHT 0.05S LINEAR;\n}\n\n[DATA-SELECTION]::SELECTION\n{\n\tCOLOR: WHITE;\n}\n\nbody\n{\n\tfont-family: Arial, sans-serif;\n\tline-height: 1.1;\n}\n\n.content\n{\n\tposition: relative;\n\tz-index: 1;\n}\n\n[DATA-SELECTION]::SELECTION\n{\n\tBACKGROUND-COLOR: TRANSPARENT;\n}\n  \u003c/STYLE\u003e\n  \u003cLINK REL=\"stylesheet\" HREF=\"SELECTION.css\"/\u003e\n \u003c/HEAD\u003e\n \u003cBODY\u003e\n  \u003cDIV CLASS=\"content\"\u003e\n   \u003cP DATA-SELECTION DATA-SELECTION-ONCOPY=\"on_copy_animation\"\u003eLorem ipsum with a custom CTRL + C animation. dolor sit amet, consectetur adipiscing elit. Nullam non urna vitae libero bibendum tincidunt.\u003c/P\u003e\n   \u003cP\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vitae libero bibendum tincidunt.\u003c/P\u003e\n   \u003cP DATA-SELECTION=\"#F00\"\u003ePhasellus euismod, justo at scelerisque tincidunt, libero erat fermentum libero, nec tincidunt lorem arcu nec libero.\u003c/P\u003e\n   \u003cP\u003ePhasellus euismod, justo at scelerisque tincidunt, libero erat fermentum libero, nec tincidunt lorem arcu nec libero.\u003c/P\u003e\n  \u003c/DIV\u003e\n\n  \u003cDIV ID=\"SELECTION_CONTAINER\"\u003e\u003c/DIV\u003e\n  \u003cSVG xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"0\" height=\"0\"\u003e\n   \u003cdefs\u003e\n    \u003cfilter id=\"GOO_EFFECT\"\u003e\n     \u003cfeGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2\" result=\"blur\"/\u003e\n     \u003cfeColorMatrix\n      in=\"blur\"\n      mode=\"matrix\"\n      values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -4\"\n      result=\"goo\"\n     /\u003e\n     \u003cfeComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\"/\u003e\n    \u003c/filter\u003e\n   \u003c/defs\u003e\n  \u003c/SVG\u003e\n  \u003cSCRIPT TYPE=\"TEXT/JAVASCRIPT\" SRC=\"SELECTION.js\"\u003e\u003c/SCRIPT\u003e\n  \u003cSCRIPT TYPE=\"TEXT/JAVASCRIPT\"\u003e\nfunction\n\ton_copy_animation(SELECTION_COLOR, SELECTION_BOX_ELEMENT)\n{\n\tconst ORG_LEFT = SELECTION_BOX_ELEMENT.style.left;\n\tconst ORG_TOP = SELECTION_BOX_ELEMENT.style.top;\n\tconst ORG_WIDTH = SELECTION_BOX_ELEMENT.style.width;\n\tconst ORG_HEIGHT = SELECTION_BOX_ELEMENT.style.height;\n\n\tconst RECT = SELECTION_BOX_ELEMENT.getBoundingClientRect();\n\n\tSELECTION_BOX_ELEMENT.style.backgroundColor = \"#FFF\";\n\tsetTimeout(\n\t\tfunction()\n\t\t{\n\t\t\tSELECTION_BOX_ELEMENT.style.backgroundColor = SELECTION_COLOR; \n\t\t},\n\t\t100\n\t);\n}\n\nSOFT_SELECTION(\"#E84A8C\");\n  \u003c/SCRIPT\u003e\n \u003c/BODY\u003e\n\u003c/HTML\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteomandeniz%2Fselection_js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteomandeniz%2Fselection_js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteomandeniz%2Fselection_js/lists"}