{"id":16427579,"url":"https://github.com/cferdinandi/x-ray","last_synced_at":"2025-03-21T04:30:53.818Z","repository":{"id":13503782,"uuid":"16194627","full_name":"cferdinandi/x-ray","owner":"cferdinandi","description":"X-Ray is a script that lets users toggle password visibility in forms.","archived":false,"fork":false,"pushed_at":"2017-04-03T18:50:57.000Z","size":126,"stargazers_count":49,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-23T06:49:39.508Z","etag":null,"topics":["javascript","javascript-plugin","no-dependencies","password","vanilla-js"],"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/cferdinandi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-24T04:07:08.000Z","updated_at":"2024-01-21T06:38:36.000Z","dependencies_parsed_at":"2022-09-17T06:42:51.691Z","dependency_job_id":null,"html_url":"https://github.com/cferdinandi/x-ray","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fx-ray","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fx-ray/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fx-ray/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cferdinandi%2Fx-ray/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cferdinandi","download_url":"https://codeload.github.com/cferdinandi/x-ray/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221811374,"owners_count":16884305,"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","javascript-plugin","no-dependencies","password","vanilla-js"],"created_at":"2024-10-11T08:13:24.943Z","updated_at":"2024-10-28T09:19:22.222Z","avatar_url":"https://github.com/cferdinandi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# X-Ray [![Build Status](https://travis-ci.org/cferdinandi/x-ray.svg)](https://travis-ci.org/cferdinandi/x-ray)\nA script that lets users toggle password visibility in forms.\n\n[Download X-Ray](https://github.com/cferdinandi/x-ray/archive/master.zip) / [View the demo](http://cferdinandi.github.io/x-ray/)\n\n\n\u003chr\u003e\n\n### Want to learn how to write your own vanilla JS plugins? Check out [\"The Vanilla JS Guidebook\"](https://gomakethings.com/vanilla-js-guidebook/) and level-up as a web developer. 🚀\n\n\u003chr\u003e\n\n\n\n## Getting Started\n\nCompiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.\n\n### 1. Include X-Ray on your site.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/css/x-ray.css\"\u003e\n\u003cscript src=\"dist/js/x-ray.js\"\u003e\u003c/script\u003e\n```\n\n### 2. Add the markup to your HTML.\n\n```html\n\u003cform\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003ePassword\u003c/label\u003e\n\t\t\u003cinput id=\"pw\" type=\"password\"\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003cbutton class=\"x-ray\" data-x-ray=\"#pw\" data-default=\"show\"\u003e\n\t\t\t\u003cspan class=\"x-ray-show\" data-x-ray-show\u003eShow Password\u003c/span\u003e\n\t\t\t\u003cspan class=\"x-ray-hide\" data-x-ray-hide\u003eHide Password\u003c/span\u003e\n\t\t\u003c/button\u003e\n\t\u003c/div\u003e\n\u003c/form\u003e\n```\n\nTurn any link or button into a password visibility toggle by adding the `.x-ray` class and `[data-x-ray]` attribute. The value of the `[data-x-ray]` attribute should match the selector for the target password field. If you would like passwords to be visible by default, set the optional `[data-default]` attribute to `show`.\n\nUse `\u003cspan\u003e` elements with the `.x-ray-show` class and `[data-x-ray-show]` data attribute or `.x-ray-hide` class and `[data-x-ray-hide]` data attribute to change the toggle element based on whether or not the password is visible.\n\n#### Using Checkboxes\n\nIf you'd prefer, you can use a checkbox instead of a button to toggle password visibility.\n\n```html\n\u003cform\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003eUsername\u003c/label\u003e\n\t\t\u003cinput type=\"text\"\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003ePassword\u003c/label\u003e\n\t\t\u003cinput id=\"pw\" type=\"password\"\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel class=\"x-ray\"\u003e\n\t\t\t\u003cinput type=\"checkbox\" data-x-ray=\"#pw\" data-default=\"show\" checked\u003e\n\t\t\tShow password\n\t\t\u003c/label\u003e\n\t\u003c/div\u003e\n\u003c/form\u003e\n```\n\n#### Toggling Multiple Password Fields\n\nYou can toggle multiple password fields with one button or checkbox by using a class selector instead of an ID.\n\n```html\n\u003cform\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003eOld Password\u003c/label\u003e\n\t\t\u003cinput class=\"pw\" type=\"password\"\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel\u003eNew Password\u003c/label\u003e\n\t\t\u003cinput class=\"pw\" type=\"password\"\u003e\n\t\u003c/div\u003e\n\t\u003cdiv\u003e\n\t\t\u003clabel class=\"x-ray\"\u003e\n\t\t\t\u003cinput type=\"checkbox\" data-x-ray=\".pw\" data-default=\"show\" checked\u003e\n\t\t\tShow passwords\n\t\t\u003c/label\u003e\n\t\u003c/div\u003e\n\u003c/form\u003e\n```\n\n### 3. Initialize X-Ray.\n\n```html\n\u003cscript\u003e\n\txray.init();\n\u003c/script\u003e\n```\n\nIn the footer of your page, after the content, initialize X-Ray. And that's it, you're done. Nice work!\n\n\n\n## Installing with Package Managers\n\nYou can install X-Ray with your favorite package manager.\n\n* **NPM:** `npm install cferdinandi/x-ray`\n* **Bower:** `bower install https://github.com/cferdinandi/x-ray.git`\n* **Component:** `component install cferdinandi/x-ray`\n\n\n\n## Working with the Source Files\n\nIf you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code.\n\n### Dependencies\nMake sure these are installed first.\n\n* [Node.js](http://nodejs.org)\n* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`\n\n### Quick Start\n\n1. In bash/terminal/command line, `cd` into your project directory.\n2. Run `npm install` to install required files.\n3. When it's done installing, run one of the task runners to get going:\n\t* `gulp` manually compiles files.\n\t* `gulp watch` automatically compiles files and applies changes using [LiveReload](http://livereload.com/).\n\n\n\n## Options and Settings\n\nX-Ray includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.\n\n### Global Settings\n\nYou can pass options and callbacks into X-Ray through the `init()` function:\n\n```javascript\nxray.init({\n\tselector: '[data-x-ray]', // Selector for the password toggle (must be a valid CSS selector)\n\tselectorShow: '[data-x-ray-show]', // Selector for the \"show password\" text (must be a valid CSS selector)\n\tselectorHide: '[data-x-ray-hide]', // Selector for the \"hide password\" text  (must be a valid CSS selector)\n\ttoggleActiveClass: 'active', // Class added to active password toggle button\n\tinitClass: 'js-x-ray', // Class added to \u003chtml\u003e element when initiated\n\tcallback: function ( toggle, pwID ) {} // Function that's run after password visibility is toggled\n});\n```\n\n### Use X-Ray events in your own scripts\n\nYou can also call X-Ray's toggle password event in your own scripts.\n\n#### runToggle()\nToggle password visibility on or off.\n\n```javascript\nxray.runToggle(\n\ttoggle, // Node that toggles the password visibility. ex. document.querySelector('[data-x-ray=\"#pw\"]')\n\tpwID, // The ID or class of the password area(s) to show. ex. '#pw'\n\toptions, // Classes and callbacks. Same options as those passed into the init() function.\n\tevent // Optional, if a DOM event was triggered.\n);\n```\n\n**Example**\n\n```javascript\nvar toggle = document.querySelector('[data-x-ray=\"#pw\"]');\nxray.runToggle( toggle, '#pw' );\n```\n\n#### destroy()\nDestroy the current `xray.init()`. This is called automatically during the init function to remove any existing initializations.\n\n```javascript\nxray.destroy();\n```\n\n\n\n## Browser Compatibility\n\nX-Ray works in all modern browsers, and IE 10 and above. You can extend browser support back to IE 9 with the [classList.js polyfill](https://github.com/eligrey/classList.js/).\n\nX-Ray is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, passwords will be masked by default.\n\n\n\n## How to Contribute\n\nIn lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.\n\n\n\n## License\n\nThe code is available under the [MIT License](LICENSE.md).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fx-ray","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcferdinandi%2Fx-ray","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcferdinandi%2Fx-ray/lists"}