{"id":21327337,"url":"https://github.com/wanadev/photonui","last_synced_at":"2025-07-12T07:31:14.652Z","repository":{"id":13385565,"uuid":"16073642","full_name":"wanadev/PhotonUI","owner":"wanadev","description":"A javascript framework to create user interfaces","archived":false,"fork":false,"pushed_at":"2024-09-02T15:29:54.000Z","size":8366,"stargazers_count":66,"open_issues_count":10,"forks_count":20,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-07-06T23:04:34.403Z","etag":null,"topics":["gui","javascript","javascript-framework","ui"],"latest_commit_sha":null,"homepage":"http://wanadev.github.io/PhotonUI/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wanadev.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":"2014-01-20T14:55:32.000Z","updated_at":"2025-05-17T22:49:36.000Z","dependencies_parsed_at":"2024-06-12T07:23:08.188Z","dependency_job_id":"ae0e481a-db8d-43bf-ad1a-3e8fd4757e86","html_url":"https://github.com/wanadev/PhotonUI","commit_stats":{"total_commits":642,"total_committers":27,"mean_commits":23.77777777777778,"dds":"0.28348909657320875","last_synced_commit":"342b756eb2e9c3343b4639cdb44526a6a07c53a4"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/wanadev/PhotonUI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanadev%2FPhotonUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanadev%2FPhotonUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanadev%2FPhotonUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanadev%2FPhotonUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wanadev","download_url":"https://codeload.github.com/wanadev/PhotonUI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanadev%2FPhotonUI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264958135,"owners_count":23689006,"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":["gui","javascript","javascript-framework","ui"],"created_at":"2024-11-21T21:16:54.280Z","updated_at":"2025-07-12T07:31:14.208Z","avatar_url":"https://github.com/wanadev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PhotonUI - A javascript framework to create user interfaces\n\n[![NPM Version](http://img.shields.io/npm/v/photonui.svg?style=flat)](https://www.npmjs.com/package/photonui)\n[![License](http://img.shields.io/npm/l/photonui.svg?style=flat)](https://github.com/wanadev/PhotonUI/blob/master/LICENSE)\n[![Discord](https://img.shields.io/badge/chat-Discord-8c9eff?logo=discord\u0026logoColor=ffffff)](https://discord.gg/BmUkEdMuFp)\n\n\nPhotonUI javascript framework to create rich web user interfaces without having to manipulate any HTML nor CSS.\n\n* **Website:** http://wanadev.github.io/PhotonUI/\n* **Quick start:** http://wanadev.github.io/PhotonUI/doc/quick-start.html\n\n![Screenshot](./screenshot.png)\n\n\n## Getting Started\n\n### Standalone Version\n\nAll the files you need are in the `dist` folder. You just have to import\n\n* `photonui-base.css` (must be imported first),\n* `photonui-theme-particle.css`,\n* and`photonui.js` (or `photonui.min.js`)\n\nin your page:\n\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eBoilerplate\u003c/title\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n\n        \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"dist/photonui-base.css\" /\u003e\n        \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"dist/photonui-theme-particle.css\" /\u003e\n        \u003cscript src=\"dist/photonui.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n### NPM and Browserify\n\nIf you are using [Browserify][browserify] in your project, a [NPM package][npm]\nis available. To install it, juste type:\n\n```\nnpm install --save photonui\n```\n\nthen, to use it in your project you just have to import PhotonUI:\n\n```js\nvar photonui = require(\"photonui\");\n```\n\n**NOTE:** do not forget to import CSS files in your HTML page:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./node_modules/photonui/dist/photonui-base.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"./node_modules/photonui/dist/photonui-theme-particle.css\" /\u003e\n```\n\n\n## Hacking\n\nPhotonUI is built using [Grunt][grunt], [Less][less] and\n[Browserify][browserify]. If you want to hack it, you will have to install few\ntools.\n\n\n### Installing Dependencies\n\nTo build PhotonUI, you will first have to install [Node.js][nodejs] (or\n[io.js][iojs]).\n\n**NOTE:** If you are on Ubuntu / Debian Linux you must install the\n`nodejs-legacy` package.\n\nNext, install globally the `grunt-cli` npm package:\n\n    npm install -g grunt-cli\n\nThen install the PhotonUI's dependencies:\n\n    npm install\n\n\n### Building PhotonUI\n\nOnce the build stuff and dependencies installed, you just have to run the\n`grunt` command to build PhotonUI:\n\n    grunt\n\nAll generated files are in the `dist` folder.\n\n**NOTE:** during the development, it can be annoying to run the `grunt` command\nevery time you make a change. You can instead run the following command to\nautomatically rebuild what changed each time you modify a file:\n\n    grunt watch\n\n\n### Coding Style\n\nPhotonUI follows the [Yandex Javascript CodeStyle][codestyle-yandex] **EXCEPT**\nfor the quote marks where we use **double quotes** (`\"`).\n\nYou can automatically check that your code follows the conventions by using\nthis command:\n\n    grunt jscs\n\n\n### Testing\n\nTo run the PhotonUI tests, you can use the following commands (you should have\nchromium and firefox installed):\n\n    npm test\n\nYou can also run manually the tests in your browser:\n\n1. Check that the javascript is well formed and that it follows the coding\n   style: `grunt jshint jscs`\n2. Build PhotonUI: `grunt`\n3. Run the tests: open `test/index.html` in your browser.\n\n\n### Git Hooks\n\nTo avoid committing bad stuff, you can install a git pre-commit hook that will\nabort the commit if the code contains errors. To install the hooks you just\nhave to run the following command:\n\n    grunt githooks\n\n\n### Creating Your Own widgets\n\nIf you want to create you own PhotonUI widgets, first read this:\n\n* http://wanadev.github.io/PhotonUI/doc/custom-widget.html\n\nThe documentation above explain how to create a custom widget **outside** of the PhotonUI project.\n\nOnce you feel comfortable with the custom widget creation, you can create\nwidgets inside the PhotonUI project. We created a [Yeoman][yo] generator that\ncreates all required files for you:\n\n* https://github.com/wanadev/generator-photonui-widget\n\n\n## Related projects:\n\n* [photonui-site](https://github.com/wanadev/photonui-site): The PhotonUI's site\n* [generator-photonui-widget](https://github.com/wanadev/generator-photonui-widget): The PhotonUI widget generator\n\n\n## Changelog:\n\n* **[NEXT]** (changes on `master` that have not been released yet):\n  * Nothing yet ;)\n\n* **v1.8.0:**\n  * feat(DataView): New DataView widget to display data in customizable way (@risq, #90, #95)\n  * feat(DataView): New ListView widget, an high level DataView to display data as list (@risq, #90, #95)\n  * feat(DataView): New TableView widget, an high level DataView to display data as table (@risq, #90, #95)\n  * feat(DataView): New FluidView widget, an high level DataView to display data as block that are line-wrapped (@risq, #90, #95)\n  * feat(DataView): New IconView widget, a DataView similare to the FluidView but specialized to display images and icons (@risq, #90, #95)\n  * feat: Allowed to use Image widget as icon in MenuItem, TabItem, Button and IconButton widget (@Rincelent, #134, #136)\n  * feat(Base): Allow to pass options to addEventListener via `Base#_bindEvent()` (@jbghoul-wanadev, #166)\n  * fix(MouseManager): Fixed mouse up event not fired when not dragging (@risq)\n  * fix(KeyboardManager): Fixed interferences between different KeyboardManagers (@breush, #109)\n  * fix(Window#setModal): fixed modalBox duplicated (@flozz)\n  * fix(MouseManager): Replaced deprecated mousewheel and DOMMouseScroll events by the wheel event (@clementlevasseur, #149)\n  * fix(Window): Allow event propagation on Window's close button (@VSerain, #78, #152)\n  * fix(Slider): Calculate Slider grip position in JavaScript instead of CSS (@VSerain)\n  * fix(Layout): Fixed visibility propagation to Layout child widgets (@jbghoul-wanadev, #154)\n  * fix(Dialog): Fixed visibility propagation to Dialog buttons (@jbghoul-wanadev, #154)\n  * fix(Window): Standardized Stone.js gettext function call on Window close button text (@Krenodeno, #158)\n  * fix(TabLayout): Set the active tab only when needed (@robincartier, #160)\n  * fix: Set widgets name before setting children so parenting will work (@robincartier, #163)\n  * fix(MouseManager): Fixed wrong button when dragging with the right mouse button (@Rincelent, #165)\n  * fix(FileManager): Fixed file extention check in FileManager (@flozz)\n  * fix: Fixed destroy propagation to children widgets (@robincartier, #170)\n  * fix(Select): Fixed a memory leak in the Select widget (@Rincelent, #171)\n  * fix(Select): Fixed a typo in the Slider widget CSS (@jbghoul, #173)\n  * docs: Fixed an error in a jsdoc comment (@Krenodeno, #159)\n  * misc(ci): removed Travis (@flozz)\n  * misc(deps): Updated dependencies (@breush, #130)\n\n* **v1.7.2:**\n  * New event on ColorPicker: `value-changed-final` called when the value is no more modified after continuous changes\n\n* **v1.7.1:**\n  * Dependencies updated (uuid 2.0.3 → 3.0.0)\n\n* **v1.7.0:**\n  * `photonui.Color` improved: it can now import/export colors from/to many format\n  * Dependencies updated\n\n* **v1.6.4:**\n  * Fields new event: `value-changed-final` called when the value is no more modified after continuous changes\n\n* **v1.6.3:**\n  * Fixes an issue when unregistering a callback in `photonui.AccelManager` (#73)\n  * Fixes translation not updated on selected elements of `photonui.Select` widget (#71)\n  * Fixes absolute widget calculation (partially fixes #70)\n\n* **v1.6.2:**\n  * Fixes regression in the `photonui.ColorPicker` widget (#68)\n\n* **v1.6.1:**\n  * Fixes wrong import path of fontawesome files when importing photonui less files from the module.\n\n* **v1.6.0:**\n  * New widget: `photonui.Expander` (thx @Breush),\n  * `Base.prototype._updateProperties()` is now deprecated: the `@photonui-update` annotation replaces it (#55),\n  * Various fixes (issue #51, issue #58, issue #60, PR #53,...).\n\n* **v1.5.1:**\n  * Fixes an issue with `FileManager`,\n  * cleanup build / test dependencies\n\n* **v1.5.0:**\n  * New widget: `photonui.KeyboardManager` (thx @Breush)\n\n* **v1.4.1:**\n  * various fixes\n\n* **v1.4.0:**\n  * New widgets: `Template`, `IconButton`,\n  * All widgets have now a `data` property that can contain anything you want,\n  * Font Awesome updated to 4.5\n\n* **v1.3.0:**\n  * Fixes vertical sizing issue in GridLayout with latest Gecko versions...\n  * Better split of Less files\n\n* **v1.2.1:**\n  * Fixes minor display issues\n\n* **v1.2.0:**\n  * TabItem can now have icons\n  * Touch support on Window and Slider\n  * Window: fullscreen option added\n  * Fixes \"click\" wEvent triggered twice on ToggleButton (issue #17)\n  * Translation abstraction added to MouseManager\n  * FluidLayout: re-implemented using CSS flexbox, new properties and layoutOptions available,\n  * Stone.js updated\n\n* **v1.1.0:**\n  * Classy replaced by Abitbol\n  * Scaling support added to MouseManager\n  * \"click\" wEvent added to TabItem\n\n* **v1.0.1:**\n  * Fixes (GridLayout exception on some edge cases, flat ToggleButton theme)\n  * Optimizations (destroying a layout widget)\n\n* **v1.0.0:**\n  * First release\n\n\n[browserify]: http://browserify.org/\n[npm]: https://www.npmjs.com/package/photonui\n[grunt]: http://gruntjs.com/\n[less]: http://lesscss.org/\n[nodejs]: https://nodejs.org/\n[iojs]: https://iojs.org/\n[phantomjs]: http://phantomjs.org/\n[yo]: http://yeoman.io/\n[codestyle-yandex]: https://github.com/yandex/codestyle/blob/master/javascript.md\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanadev%2Fphotonui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwanadev%2Fphotonui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanadev%2Fphotonui/lists"}