[ { "path": ".gitignore", "content": "node_modules/\napp/node_modules\n.DS_Store\nbuild/\n" }, { "path": "README.md", "content": "# GifTuna\nA gif tuning application for Mac, Windows and Linux.\n" }, { "path": "app/.gitignore", "content": "node_modules\n" }, { "path": "app/LICENSE.md", "content": "CC0 1.0 Universal\n==================\n\nStatement of Purpose\n---------------------\n\nThe laws of most jurisdictions throughout the world automatically confer exclusive Copyright and Related Rights (defined below) upon the creator and subsequent owner(s) (each and all, an \"owner\") of an original work of authorship and/or a database (each, a \"Work\").\n\nCertain owners wish to permanently relinquish those rights to a Work for the purpose of contributing to a commons of creative, cultural and scientific works (\"Commons\") that the public can reliably and without fear of later claims of infringement build upon, modify, incorporate in other works, reuse and redistribute as freely as possible in any form whatsoever and for any purposes, including without limitation commercial purposes. These owners may contribute to the Commons to promote the ideal of a free culture and the further production of creative, cultural and scientific works, or to gain reputation or greater distribution for their Work in part through the use and efforts of others.\n\nFor these and/or other purposes and motivations, and without any expectation of additional consideration or compensation, the person associating CC0 with a Work (the \"Affirmer\"), to the extent that he or she is an owner of Copyright and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and publicly distribute the Work under its terms, with knowledge of his or her Copyright and Related Rights in the Work and the meaning and intended legal effect of CC0 on those rights.\n\n1. Copyright and Related Rights.\n--------------------------------\nA Work made available under CC0 may be protected by copyright and related or neighboring rights (\"Copyright and Related Rights\"). Copyright and Related Rights include, but are not limited to, the following:\n\ni. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work;\nii. moral rights retained by the original author(s) and/or performer(s);\niii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work;\niv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below;\nv. rights protecting the extraction, dissemination, use and reuse of data in a Work;\nvi. database rights (such as those arising under Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, and under any national implementation thereof, including any amended or successor version of such directive); and\nvii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof.\n\n2. Waiver.\n-----------\nTo the greatest extent permitted by, but not in contravention of, applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and unconditionally waives, abandons, and surrenders all of Affirmer's Copyright and Related Rights and associated claims and causes of action, whether now known or unknown (including existing as well as future claims and causes of action), in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the \"Waiver\"). Affirmer makes the Waiver for the benefit of each member of the public at large and to the detriment of Affirmer's heirs and successors, fully intending that such Waiver shall not be subject to revocation, rescission, cancellation, termination, or any other legal or equitable action to disrupt the quiet enjoyment of the Work by the public as contemplated by Affirmer's express Statement of Purpose.\n\n3. Public License Fallback.\n----------------------------\nShould any part of the Waiver for any reason be judged legally invalid or ineffective under applicable law, then the Waiver shall be preserved to the maximum extent permitted taking into account Affirmer's express Statement of Purpose. In addition, to the extent the Waiver is so judged Affirmer hereby grants to each affected person a royalty-free, non transferable, non sublicensable, non exclusive, irrevocable and unconditional license to exercise Affirmer's Copyright and Related Rights in the Work (i) in all territories worldwide, (ii) for the maximum duration provided by applicable law or treaty (including future time extensions), (iii) in any current or future medium and for any number of copies, and (iv) for any purpose whatsoever, including without limitation commercial, advertising or promotional purposes (the \"License\"). The License shall be deemed effective as of the date CC0 was applied by Affirmer to the Work. Should any part of the License for any reason be judged legally invalid or ineffective under applicable law, such partial invalidity or ineffectiveness shall not invalidate the remainder of the License, and in such case Affirmer hereby affirms that he or she will not (i) exercise any of his or her remaining Copyright and Related Rights in the Work or (ii) assert any associated claims and causes of action with respect to the Work, in either case contrary to Affirmer's express Statement of Purpose.\n\n4. Limitations and Disclaimers.\n--------------------------------\n\na. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document.\nb. Affirmer offers the Work as-is and makes no representations or warranties of any kind concerning the Work, express, implied, statutory or otherwise, including without limitation warranties of title, merchantability, fitness for a particular purpose, non infringement, or the absence of latent or other defects, accuracy, or the present or absence of errors, whether or not discoverable, all to the greatest extent permissible under applicable law.\nc. Affirmer disclaims responsibility for clearing rights of other persons that may apply to the Work or any use thereof, including without limitation any person's Copyright and Related Rights in the Work. Further, Affirmer disclaims responsibility for obtaining any necessary consents, permissions or other rights required for any use of the Work.\nd. Affirmer understands and acknowledges that Creative Commons is not a party to this document and has no duty or obligation with respect to this CC0 or use of the Work.\n" }, { "path": "app/README.md", "content": "# electron-quick-start\n\n**Clone and run for a quick way to see Electron in action.**\n\nThis is a minimal Electron application based on the [Quick Start Guide](http://electron.atom.io/docs/tutorial/quick-start) within the Electron documentation.\n\n**Use this app along with the [Electron API Demos](http://electron.atom.io/#get-started) app for API code examples to help you get started.**\n\nA basic Electron application needs just these files:\n\n- `package.json` - Points to the app's main file and lists its details and dependencies.\n- `main.js` - Starts the app and creates a browser window to render HTML. This is the app's **main process**.\n- `index.html` - A web page to render. This is the app's **renderer process**.\n\nYou can learn more about each of these components within the [Quick Start Guide](http://electron.atom.io/docs/tutorial/quick-start).\n\n## To Use\n\nTo clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:\n\n```bash\n# Clone this repository\ngit clone https://github.com/electron/electron-quick-start\n# Go into the repository\ncd electron-quick-start\n# Install dependencies\nnpm install\n# Run the app\nnpm start\n```\n\nNote: If you're using Linux Bash for Windows, [see this guide](https://www.howtogeek.com/261575/how-to-run-graphical-linux-desktop-applications-from-windows-10s-bash-shell/) or use `node` from the command prompt.\n\n## Resources for Learning Electron\n\n- [electron.atom.io/docs](http://electron.atom.io/docs) - all of Electron's documentation\n- [electron.atom.io/community/#boilerplates](http://electron.atom.io/community/#boilerplates) - sample starter apps created by the community\n- [electron/electron-quick-start](https://github.com/electron/electron-quick-start) - a very basic starter Electron app\n- [electron/simple-samples](https://github.com/electron/simple-samples) - small applications with ideas for taking them further\n- [electron/electron-api-demos](https://github.com/electron/electron-api-demos) - an Electron app that teaches you how to use Electron\n- [hokein/electron-sample-apps](https://github.com/hokein/electron-sample-apps) - small demo apps for the various Electron APIs\n\n## License\n\n[CC0 1.0 (Public Domain)](LICENSE.md)\n" }, { "path": "app/css/slider.css", "content": "input[type=range] {\n -webkit-appearance: none;\n width: 100%;\n}\ninput[type=range]:disabled {\n opacity: 0.5;\n}\ninput[type=range]:focus {\n outline: none;\n}\ninput[type=range]::-webkit-slider-runnable-track {\n width: 90%;\n height: 10px;\n cursor: pointer;\n background: #222;\n}\ninput[type=range]::-webkit-slider-thumb {\n width: 18px;\n height: 18px;\n\n background-color: #EE6352;\n /*background-image:url('../svg/slider.svg');*/\n background-repeat: no-repeat;\n background-size: contain;\n border-radius: 20px;\n /*border-top: 10px solid red;*/\n /*border-right: 10px solid transparent;\n border-left: 10px solid transparent;\n border-bottom: 10px solid #fff;*/\n /*border-radius: 28px;*/\n /*background: #ffffff;*/\n cursor: pointer;\n -webkit-appearance: none;\n margin-top: -4px;\n}\ninput[type=range]:focus::-webkit-slider-runnable-track {\n background: #333;\n}\n" }, { "path": "app/css/style.css", "content": "body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 13px;\n background-color: #161516;\n color: #eee;\n margin: 0;\n -webkit-user-select: none;\n}\nhr {\n background: none;\n border: 0;\n height: 10px;\n}\na {\n color: #eee;\n text-decoration: underline;\n}\na:hover {\n color: #fff;\n}\n\na.btn {\n background-color: #3A393B;\n padding: 7px 15px;\n cursor: pointer;\n text-decoration: none;\n font-weight: bold;\n font-size: 14px;\n}\na.disabled,\na.btn.disabled {\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n}\na.btn.disabled:hover {\n cursor: not-allowed;\n}\na.btn:hover {\n background-color: #555;\n}\na.btn:active {\n background-color: #333;\n}\na.btn.btn-primary {\n color: #3A393B;\n background-color: #EE6352;\n}\na.btn.btn-primary:hover {\n background-color: #F49B90;\n}\n\na.btn.btn-small {\n font-size: 12px;\n padding: 5px 10px;\n}\n\n\n.app {\n display: flex;\n flex-direction: row;\n height: 100vh;\n}\n.app .section {\n height: 100vh;\n}\n.app .section .section-title {\n\n border-bottom: 1px solid #444;\n padding: 7px 0;\n font-weight: normal;\n font-size: 12px;\n color: #aaa;\n margin: 20px 0 10px 0;\n\n /*font-size: 14px;\n font-weight: normal;\n border-bottom: 1px solid #444;\n padding-bottom: 10px;*/\n}\n.app .section .section-title:first-child {\n margin-top: 10px;\n}\n.app .section.settings-form {\n flex: 0;\n min-width: 280px;\n background: #1a1a1a;\n padding: 0 20px;\n overflow: auto;\n box-shadow: 0px 0px 15px rgba(0,0,0,0.45);\n}\n.app .section.preview {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.top-header {\n flex: 0 1 auto;\n padding: 20px;\n text-align: right;\n background: #1a1a1a;\n display: flex;\n flex-direction: row;\n box-shadow: 0px 0px 15px rgba(0,0,0,0.45);\n /*border-bottom: 1px solid #000;*/\n}\n.top-header .scrubber {\n flex: 1 1 auto;\n padding-right: 20px;\n display: flex;\n flex-direction: row;\n}\n.top-header .scrubber .scrubber-frame {\n flex: 0 0 auto;\n min-width: 30px;\n text-align: center;\n}\n.top-header .scrubber .scrubber-bar {\n flex: 1 1 auto;\n padding: 0 10px;\n}\n.top-header .scrubber input {\n width: 100%;\n}\n.top-header .export {\n flex: 0 0 auto;\n min-width: 100px;\n}\n\n.progress-canvas {\n flex: 1 1 auto;\n justify-content: center;\n display: flex;\n flex-direction: column;\n}\n.progress-canvas .progress-canvas-container {\n width: 80%;\n text-align: center;\n padding: 20px;\n margin: -100px auto 0 auto;\n /*background: #333;*/\n /*box-shadow: 1px 1px 3px rgba(0,0,0,0.35);*/\n}\n.progress-canvas h4 {\n margin: 20px 0 0 0;\n padding: 0;\n}\n.progress-canvas p {\n color: #aaa;\n}\n.progress-canvas .spinner-icon {\n display: block;\n}\n.progress-canvas .spinner-icon svg {\n width: 70px;\n height: 70px;\n}\n\n\n.preview-canvas {\n /*height: 100%;*/\n flex: 1 1 auto;\n justify-content: center;\n align-items: center;\n display: flex;\n overflow: auto;\n\n /*justify-content: center;*/\n /*align-items: center;*/\n /*align-content: center;*/\n}\n.preview-img {\n min-width: 320px;\n min-height: 240px;\n width: 100%;\n height: auto;\n box-shadow: 1px 0px 5px rgba(0,0,0,0.5);\n}\n\n.preview-canvas .preview-div {\n display: flex;\n flex: 1 1 auto;\n background: #aaa;\n width: 100%;\n height: 100%;\n min-width: 320px;\n min-height: 240px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n position: relative;\n margin: auto;\n}\n\n/*\n.preview-canvas .preview-wrap {\n width: 100%;\n max-width:100%;\n height:auto;\n}\n.preview-canvas .preview-wrap .preview-div {\n display: block;\n margin: auto;\n position: relative;\n background-size: contain;\n background-repeat: no-repeat;\n}*/\n\n.palette-control {\n /*padding: 10px;*/\n width: 100%;\n /*padding-bottom: 100%;*/\n position: relative;\n margin-top: 15px;\n /*background: #191919;*/\n /*box-shadow: inset 1px 1px 20px #101010;*/\n}\n.palette-control:after {\n content: \"\";\n display: block;\n padding-bottom: 100%;\n}\n.palette-control .palette {\n position: absolute;\n top:0;\n left: 0;\n width: 100%;\n image-rendering: pixelated;\n}\n\n\n\n\ninput[type=\"text\"],\ninput[type=\"number\"] {\n background: #333;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n font-size: 12px;\n color: #fff;\n padding: 5px;\n border: 0;\n}\n\ninput[type=\"number\"] {\n width: 45px;\n}\n\ninput[type=\"text\"]:disabled,\ninput[type=\"number\"]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.custom-select {\n display: inline-block;\n position: relative;\n background: #333;\n}\n.custom-select.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.custom-select:after {\n position: absolute;\n display: block;\n content: '';\n width: 0;\n height: 0;\n top:50%;\n right:7px;\n margin-top: -2px;\n border-top: 5px solid #fff;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n pointer-events: none;\n}\n.custom-select select {\n font-size: 12px;\n outline: none;\n -webkit-appearance:none;\n background-color: transparent;\n min-width: 40px;\n padding: 5px 25px 5px 5px;\n border: 0;\n border-radius: 0;\n color: #fff;\n}\n.custom-range {\n display: flex;\n flex-direction: row;\n}\n.custom-range .custom-range-value {\n flex: 0;\n margin-right: 10px;\n font-size: 11px;\n /*min-width: 20px;*/\n}\n.custom-range .custom-range-input {\n flex: 1;\n}\n\n\n.form-group {\n margin: 0;\n vertical-align: top;\n}\n.form-group:last-child {\n margin: 0;\n}\n.form-group.form-group-inline {\n display: inline-block;\n margin-right: 20px;\n}\n.form-group .form-control {\n min-height: 30px;\n line-height: 30px;\n}\n.form-group h5 {\n font-size: 11px;\n font-weight: normal;\n color: #aaa;\n margin: 10px 0;\n padding: 0;\n /*text-transform: uppercase;*/\n /*letter-spacing: 1px;*/\n}\nh6 {\n border-bottom: 1px solid #444;\n padding: 10px 0;\n font-weight: normal;\n font-size: 11px;\n color: #aaa;\n margin: 0;\n}\n\n\n\n\n::-webkit-scrollbar {\n width: 12px;\n}\n\n::-webkit-scrollbar-track {\n background: transparent;\n /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/\n}\n\n::-webkit-scrollbar-thumb {\n background-color: #323232;\n border: none;\n outline: none;\n /*outline: 1px solid slategrey;*/\n border-radius: 20px;\n}\n::-webkit-scrollbar-corner {\n background-color: transparent;\n}\n\n.input {\n display: block;\n}\n.input .change-it {\n display: none;\n}\n.input:hover .change-it {\n display: inline-block;\n color: #aaa;\n margin-left: 5px;\n}\n\n\n.install {\n width: 80%;\n max-width: 800px;\n margin: 80px auto;\n background: #111;\n padding: 30px;\n}\n\n.install p {\n font-size: 14px;\n line-height: 1.5;\n}\n\n.pixel-palette {\n width: 100%;\n display: block;\n position: relative;\n}\n.pixel-picker {\n position: absolute;\n top: 0;\n left: 0;\n display: none;\n z-index: 999;\n background: #2a2a2a;\n padding: 20px;\n /*margin-top: 36px;*/\n /*margin-left: -7px;*/\n\n\n margin-top: -266px;\n margin-left: -7px;\n}\n\n.pixel-picker:after {\n position: absolute;\n content:'';\n bottom: -19px;\n left: 0px;\n border-top: 20px solid #2a2a2a;\n border-right: 20px solid transparent;\n border-left: 20px solid transparent;\n}\n.minicolors-panel {\n height: 152px;\n}\n.pixel-picker.open {\n display: block;\n}\n.pixel-picker .hex-control {\n display: flex;\n padding: 5px 0;\n flex-direction: row;\n}\n.pixel-picker .hex-control .hex-input-wrapper {\n flex: 0;\n}\n.pixel-picker .hex-control .color-preview {\n flex: 1;\n height: 24px;\n display: block;\n}\n\n\n.pixel-picker .hex-control input {\n width: 50px;\n font-family: monospace;\n font-size: 12px;\n text-align: center;\n}\n.pixel-picker .picker-actions {\n padding: 0 0 10px 0px;\n}\n.pixel-picker .picker-control {\n display: block;\n clear: both;\n}\n.pixel-palette .pixel {\n width: 17.5px;\n height: 17.5px;\n float: left;\n}\n.pixel-palette .pixel:hover,\n.pixel-palette .pixel.on {\n box-shadow: 1px 1px 5px #000;\n transform: scale(1.5);\n}\n.progress {\n height: 20px;\n width: 50vw;\n position: relative;\n background: #101010;\n margin: 0 auto;\n}\n.progress .progress-fill {\n height: 20px;\n background: #46CCF3;\n position: relative;\n}\n.progress .progress-fill.finished {\n background-color: #57A773;\n}\n/* Styles go here */\n.progress .progress-fill.spin {\n /*width: 300px;\n height: 50px;*/\n width: 100% !important;\n opacity: 0.5;\n background-image: repeating-linear-gradient(-45deg, #101010, #101010 25px, #46CCF3 25px, #46CCF3 50px);\n -webkit-animation:progress 1s linear infinite;\n -moz-animation:progress 1s linear infinite;\n -ms-animation:progress 1s linear infinite;\n animation:progress 1s linear infinite;\n background-size: 150% 100%;\n}\n\n@-webkit-keyframes progress{\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -75px 0px;\n }\n}\n@-moz-keyframes progress{\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -75px 0px;\n }\n}\n@-ms-keyframes progress{\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -75px 0px;\n }\n}\n@keyframes progress{\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: -70px 0px;\n }\n}\n\n\n.progress-info {\n display: flex;\n flex-direction: row;\n width: 50vw;\n margin: 0 auto;\n}\n.progress-text {\n padding: 10px 0;\n margin: 10px 0;\n font-size: 14px;\n flex: 1;\n color: #aaa;\n}\n.progress-text.finished {\n color: #57A773;\n}\n\n.progress-action {\n padding: 10px 0;\n margin: 10px 0;\n flex: 1;\n text-align: right;\n\n}\n.progress-action a {\n margin-right: 10px;\n}\n.progress-action a.btn {\n margin-right: 0;\n}\n.progress-text-percent {\n font-weight: bold;\n display: inline-block;\n color: #fff;\n}\n.progress-text-size {\n font-size: 11px;\n margin-left: 5px;\n display: inline-block;\n}\n" }, { "path": "app/ffmpeg.html", "content": "\n\n \n \n GifTuna\n \n \n \n \n
\n

Download & Install FFmpeg

\n

\n GifTuna uses ffmpeg under the hood to convert to gif format. Don't fret, we can download this libary for you.\n

\n

 

\n
\n

\n Quit\n Download & Install\n

\n
\n
\n

\n

Installing ffmpeg...\n

\n
\n
\n \n \n\n" }, { "path": "app/index.html", "content": "\n\n \n \n GifTuna\n \n \n \n \n \n
\n\n
\n

Input File

\n
\n
\n Select File\n 0&&status.state<5}\" class=\"input\" href ng-model=\"settings.file.input\" input-select>\n {{settings.file.input.name}}Change\n \n
\n
\n\n

Output Options

\n
\n
Dimensions
\n
\n \n ×\n \n
\n
\n\n
\n
Lock Aspect
\n
\n \n
\n
\n
\n
FPS
\n
\n \n
\n
\n\n \n

Dither Options

\n
\n
Dither
\n
\n \n
\n
\n
\n
Dither Grid
\n
\n \n
\n
\n
\n
Palette Mode
\n\n
\n \n
\n\n \n
\n
\n
Stats Mode
\n\n
\n \n
\n\n
\n\n\n\n

Color Palette

\n
\n
Colors
\n
\n
\n
\n
\n \n
\n
\n
\n \n \n \n
\n
\n
\n
\n\n \n
\n\n\n
\n
\n
\n
\n Export\n
\n
\n \n
\n
\n
\n
\n\n
\n
\n {{status.export.progress|number:1}}%\n Complete\n Canceling\n {{status.export.size|filesize}} written\n
\n
\n
\n Cancel\n
\n \n
\n
\n\n \n
\n
0 && status.state < 4\">\n\n
\n
\n
\n

Scanning Input

\n
\n
\n

Generating Color Palette

\n

This could take a while for longer gifs...

\n
\n

Cancel

\n
\n
\n

Generating Preview

\n
\n\n
\n\n
\n
\n \n
\n \n
\n
\n \n \n\n" }, { "path": "app/lib/minicolors/LICENSE.md", "content": "Copyright 2017 A Beautiful Site, LLC\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "app/lib/minicolors/README.md", "content": "# jQuery MiniColors: A tiny color picker built on jQuery\n\nDeveloped by Cory LaViska for A Beautiful Site, LLC\n\nLicensed under the MIT license: http://opensource.org/licenses/MIT\n\n## Demo & Documentation\n\nhttp://labs.abeautifulsite.net/jquery-minicolors/\n\n## Install via NPM\n\nThis is the official NPM version of MiniColors:\n\n```\nnpm install --save @claviska/jquery-minicolors\n```\n\n**Note:** There is another version on NPM without the namespace that is out of date and not supported. I did not create it nor do I have control of it. Please use the official NPM version to ensure you have the latest updates.\n" }, { "path": "app/lib/minicolors/bower.json", "content": "{\n \"name\": \"jquery-minicolors\",\n \"version\": \"2.2.6\",\n \"homepage\": \"https://github.com/claviska/jquery-minicolors\",\n \"authors\": [\n \"Cory LaViska\"\n ],\n \"description\": \"jQuery MiniColors Plugin\",\n \"main\": [\n \"./jquery.minicolors.js\",\n \"./jquery.minicolors.css\"\n ],\n \"keywords\": [\n \"jquery\",\n \"colorpicker\"\n ],\n \"license\": \"MIT\",\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"bower_components\",\n \"test\",\n \"tests\"\n ]\n}\n" }, { "path": "app/lib/minicolors/component.json", "content": "{\n \"name\": \"jquery-minicolors\",\n \"version\": \"2.2.6\",\n \"description\": \"jQuery MiniColors Plugin\",\n \"homepage\": \"\",\n \"main\": [ \"./jquery.minicolors.js\", \"./jquery.minicolors.css\" ],\n \"dependencies\": {\n \"jquery\": \">= 1.7.x\"\n },\n \"keywords\": [\n \"jquery\",\n \"colorpicker\"\n ],\n \"author\": {\n \"name\": \"Cory LaViska\",\n \"web\": \"http://www.abeautifulsite.net/\"\n },\n \"license\": [\n \"http://www.opensource.org/licenses/mit-license.php\"\n ]\n}\n" }, { "path": "app/lib/minicolors/composer.json", "content": "{\n \"name\": \"abeautifulsite/jquery-minicolors\",\n \"type\": \"component\",\n \"description\": \"jQuery MiniColors Plugin\",\n \"homepage\": \"http://www.abeautifulsite.net/\",\n \"license\": \"MIT\",\n \"extra\": {\n \"component\": {\n \"scripts\": [\n \"jquery.minicolors.js\"\n ],\n \"files\": [\n \"jquery.minicolors.js\",\n \"jquery.minicolors.min.js\",\n \"jquery.minicolors.css\",\n \"jquery.minicolors.png\"\n ]\n }\n }\n}" }, { "path": "app/lib/minicolors/gulpfile.js", "content": "/* eslint-env node, es6 */\n'use strict';\n\nconst gulp = require('gulp-help')(require('gulp'));\nconst del = require('del');\nconst rename = require('gulp-rename');\nconst uglify = require('gulp-uglify');\n\n// Clean\ngulp.task('clean', 'Clean up!', () => {\n return del('jquery.minicolors.min.js');\n});\n\n// Minify\ngulp.task('minify', 'Minify it!', ['clean'], () => {\n return gulp.src('jquery.minicolors.js')\n .pipe(uglify({\n preserveComments: 'license'\n }))\n .on('error', (err) => {\n console.error(err);\n this.emit('end');\n })\n .pipe(rename({ suffix: '.min' }))\n .pipe(gulp.dest(__dirname));\n});\n\n// Watch for changes\ngulp.task('watch', 'Watch for changes!', () => {\n gulp.watch('jquery.minicolors.js', ['minify']);\n});\n\n// Default\ngulp.task('default', 'The default task.', ['watch']);\n" }, { "path": "app/lib/minicolors/index.html", "content": "\n\n\n jQuery MiniColors\n \n\n \n \n\n \n \n \n\n \n \n \n\n \n\n \n\n\n
\n
\n\n \n
\n

jQuery MiniColors

\n

\n Now with Bootstrap 3 support!\n

\n

\n A project by A Beautiful Site,\n originally developed for Surreal CMS.\n

\n
\n\n \n

Contents

\n \n\n \n

Download

\n

\n This project is on GitHub. Feel free to post bug reports, feature requests, and code\n improvements on the official project page.\n

\n

\n Download on GitHub\n

\n\n \n

Demos

\n

\n This is the main demo page, which uses Bootstrap 3,\n but this plugin works without Bootstrap as well.\n

\n

\n View Demo Without Bootstrap\n

\n\n \n

Control Types

\n
\n
\n
\n\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n\n \n

Input Modes

\n
\n
\n
\n
\n \n
\n \n
\n
\n \n
\n \n
\n
\n
\n
\n \n
\n \n
\n
\n
\n
\n\n \n

Positions

\n
\n

\n Valid positions include bottom left, bottom right, top\n left, and top right.\n

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n
\n
\n\n \n

RGB(A)

\n
\n
\n
\n
\n \n
\n \n \n RGB input can be assigned by setting the format option\n to rgb.\n \n
\n
\n
\n
\n \n
\n \n \n RGBA input can be assigned by setting the format\n option to rgb and opacity option to\n true.\n \n
\n
\n
\n
\n\n \n

…and more!

\n
\n
\n
\n
\n \n
\n \n \n Opacity can be assigned by including the data-opacity\n attribute or by setting the opacity option to\n true.\n \n
\n
\n
\n
\n \n
\n \n \n CSS-wide keywords can be assigned by setting the keywords\n option to a comma-separated list of valid keywords: transparent,\n initial, inherit.\n \n
\n
\n
\n
\n
\n
\n \n
\n \n \n This field has a default value assigned to it, so it will never be empty.\n \n
\n
\n
\n
\n \n
\n \n \n This field will always be uppercase.\n \n
\n
\n
\n
\n
\n
\n \n
\n \n \n \n \n
\n \n Example using Bootstrap's input groups.\n \n
\n
\n
\n
\n \n
\n Color\n \n \n \n \n
\n \n Input group example with addon.\n \n
\n
\n
\n
\n
\n
\n \n
\n \n \n Example with swatches.\n \n
\n
\n
\n
\n \n
\n \n \n Example with swatches and opacity.\n \n
\n
\n
\n
\n\n \n

API

\n\n \n

Instantiation

\n

\n Instantiate like any other jQuery plugin:\n

\n 
$('INPUT.minicolors').minicolors(settings);
\n\n \n

Settings

\n\n

\n Default settings are as follows:\n

\n
\n$.minicolors = {\n  defaults: {\n    animationSpeed: 50,\n    animationEasing: 'swing',\n    change: null,\n    changeDelay: 0,\n    control: 'hue',\n    defaultValue: '',\n    format: 'hex',\n    hide: null,\n    hideSpeed: 100,\n    inline: false,\n    keywords: '',\n    letterCase: 'lowercase',\n    opacity: false,\n    position: 'bottom left',\n    show: null,\n    showSpeed: 100,\n    theme: 'default',\n    swatches: []\n  }\n};\n
\n

\n For convenience, you can change default settings globally by assigning new values:\n

\n
\n$.minicolors.defaults.changeDelay = 200;\n
\n

\n To change multiple properties at once, use $.extend():\n

\n
\n$.minicolors.defaults = $.extend($.minicolors.defaults, {\n  changeDelay: 200,\n  letterCase: 'uppercase',\n  theme: 'bootstrap'\n});\n
\n

\n Note: Changing default settings will not affect controls that\n are already initialized.\n

\n\n
\n
animationSpeed
\n
\n

\n The animation speed of the sliders when the user taps or clicks a new color. Set to\n 0 for no animation.\n

\n
\n\n
animationEasing
\n
\n

\n The easing to use when animating the sliders.\n

\n
\n\n
changeDelay
\n
\n

\n The time, in milliseconds, to defer the change event from firing while\n the user makes a selection. This is useful for preventing the change event\n from firing frequently as the user drags the color picker around.\n

\n

\n The default value is 0 (no delay). If your change callback\n features something resource-intensive (such as an AJAX request), you’ll probably want\n to set this to at least 200.\n

\n
\n\n
control
\n
\n

\n Determines the type of control. Valid options are hue, brightness,\n saturation, and wheel.\n

\n
\n\n
defaultValue
\n
\n

\n To force a default color, set this to a valid hex string. When the user clears the\n control, it will revert to this color.\n

\n
\n\n
format
\n
\n

\n The format miniColors should use. Valid options are hex and\n rgb.\n

\n
\n\n
hideSpeed & showSpeed
\n
\n

\n The speed at which to hide and show the color picker.\n

\n
\n\n
inline
\n
\n

\n Set to true to force the color picker to appear inline.\n

\n
\n\n
keywords
\n
\n

\n A comma-separated list of keywords that the control should accept (e.g. inherit,\n transparent, initial). By default, no keywords are allowed.\n

\n
\n\n
letterCase
\n
\n

\n Determines the letter case of the hex code value. Valid options are uppercase\n or lowercase.\n

\n
\n\n
opacity
\n
\n

\n Set to true to enable the opacity slider. (Use the input element's\n data-opacity attribute to set a preset value.)\n

\n
\n\n
position
\n
\n

\n Sets the position of the dropdown. Valid options are bottom left,\n bottom right, top left, and top right.\n

\n

\n The swatchPosition setting has been removed in version 2.1. The position\n of the swatch is now determined by position.\n

\n
\n\n
theme
\n
\n

\n A string containing the name of the custom theme to be applied. In your CSS, prefix\n your selectors like this:\n

\n
\n.minicolors-theme-yourThemeName { ... }\n
\n

\n If you are using the default theme, you will probably need to adjust the swatch\n styles depending on your existing stylesheet rules. Version 2.1 removes as much\n styling on the input element as possible, which means it’s up to\n you to adjust your CSS to make sure the swatch aligns properly.\n

\n

\n To adjust the swatch, override these styles:\n

\n
\n.minicolors-theme-default .minicolors-swatch {\n  top: 5px;\n  left: 5px;\n  width: 18px;\n  height: 18px;\n}\n.minicolors-theme-default.minicolors-position-right .minicolors-swatch {\n  left: auto;\n  right: 5px;\n}\n
\n
\n \n\n
swatches
\n
\n

\n An array containing some colors, in either rgb(a) or hex format, that will\n show up under the main color grid.\n

\n
\n \n\n \n

Methods

\n

Use this syntax for calling methods:

\n 
$(selector).minicolors('method', [data]);
\n
\n
create
\n
\n

\n Initializes the control for all items matching your selector. This is the default\n method, so data may be passed in as the only argument.\n

\n

\n To set a preset color value, populate the value attribute of the original\n input element.\n

\n
\n\n
destroy
\n
\n

\n Returns the input element to its original, uninitialized state.\n

\n
\n\n
opacity
\n
\n

\n Gets or sets a control's opacity level. To use this method as a setter, pass data in\n as a value between 0 and 1. (You can also obtain this value by checking the input\n element's data-opacity attribute.)\n

\n

\n To set a preset opacity value, populate the data-opacity attribute of the\n original input element.\n

\n
\n\n
rgbObject
\n
\n

\n Returns an object containing red, green, blue, and alpha properties that correspond to\n the control's current value. Example:\n

\n 
{ r: 0, g: 82, b: 148, a: 0.75 }
\n
\n\n
rgbString & rgbaString
\n
\n

\n Returns an RGB or RGBA string suitable for use in your CSS. Examples:\n

\n
\nrgb(0, 82, 148)\nrgba(0, 82, 148, .75)\n
\n
\n\n
settings
\n
\n

\n Gets or sets a control's settings. If new settings are passed in, the control will\n destroy and re-initialize itself with any new settings overriding the old ones.\n

\n
\n\n
value
\n
\n

\n Gets or sets a control's color value. To use this method as a setter, pass\n in a color string or an object (ex: {color: '#fc0', opacity: .5}).\n

\n
\n
\n\n \n

Events

\n
\n
change
\n
\n

Fires when the value of the color picker changes. The this keyword will reference the original input element.\n

\n$(selector).minicolors({\n  change: function(value, opacity) {\n    console.log(value + ' - ' + opacity);\n  }\n});\n
\n

\n Warning! This event will fire a lot when the user drags the\n color picker around. Use the changeDelay setting to reduce its\n frequency.\n

\n
\n\n
hide
\n
\n

\n Fires when the color picker is hidden. The this keyword will reference\n the original input element.\n

\n
\n$(selector).minicolors({\n  hide: function() {\n  console.log('Hide event triggered!');\n  }\n});\n
\n
\n\n
show
\n
\n

\n Fires when the color picker is shown. The this keyword will reference\n the original input element.\n

\n
\n$(selector).minicolors({\n  show: function() {\n    console.log('Show event triggered!');\n  }\n});\n
\n
\n
\n\n

License

\n

\n Licensed under the MIT license,\n same as jQuery.\n

\n

\n ©2013 A Beautiful Site, LLC.\n

\n
\n \n\n\n" }, { "path": "app/lib/minicolors/jquery.minicolors.css", "content": ".minicolors {\n position: relative;\n}\n\n.minicolors-sprite {\n background-image: url(jquery.minicolors.png);\n}\n\n.minicolors-swatch {\n position: absolute;\n vertical-align: middle;\n background-position: -80px 0;\n border: solid 1px #ccc;\n cursor: text;\n padding: 0;\n margin: 0;\n display: inline-block;\n}\n\n.minicolors-swatch-color {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.minicolors input[type=hidden] + .minicolors-swatch {\n width: 28px;\n position: static;\n cursor: pointer;\n}\n\n.minicolors input[type=hidden][disabled] + .minicolors-swatch {\n cursor: default;\n}\n\n/* Panel */\n.minicolors-panel {\n position: absolute;\n width: 173px;\n /*background: white;*/\n /*border: solid 1px #CCC;*/\n /*box-shadow: 0 0 20px rgba(0, 0, 0, .2);*/\n z-index: 99999;\n box-sizing: content-box;\n display: none;\n}\n\n.minicolors-panel.minicolors-visible {\n display: block;\n}\n\n/* Panel positioning */\n.minicolors-position-top .minicolors-panel {\n top: -154px;\n}\n\n.minicolors-position-right .minicolors-panel {\n right: 0;\n}\n\n.minicolors-position-bottom .minicolors-panel {\n top: auto;\n}\n\n.minicolors-position-left .minicolors-panel {\n left: 0;\n}\n\n.minicolors-with-opacity .minicolors-panel {\n width: 194px;\n}\n\n.minicolors .minicolors-grid {\n position: relative;\n top: 1px;\n left: 1px;\n width: 150px;\n height: 150px;\n background-position: -120px 0;\n cursor: crosshair;\n}\n\n.minicolors .minicolors-grid-inner {\n position: absolute;\n top: 0;\n left: 0;\n width: 150px;\n height: 150px;\n}\n\n.minicolors-slider-saturation .minicolors-grid {\n background-position: -420px 0;\n}\n\n.minicolors-slider-saturation .minicolors-grid-inner {\n background-position: -270px 0;\n background-image: inherit;\n}\n\n.minicolors-slider-brightness .minicolors-grid {\n background-position: -570px 0;\n}\n\n.minicolors-slider-brightness .minicolors-grid-inner {\n background-color: black;\n}\n\n.minicolors-slider-wheel .minicolors-grid {\n background-position: -720px 0;\n}\n\n.minicolors-slider,\n.minicolors-opacity-slider {\n position: absolute;\n top: 1px;\n left: 152px;\n width: 20px;\n height: 150px;\n /*background-color: white;*/\n background-position: 0 0;\n cursor: row-resize;\n}\n\n.minicolors-slider-saturation .minicolors-slider {\n background-position: -60px 0;\n}\n\n.minicolors-slider-brightness .minicolors-slider {\n background-position: -20px 0;\n}\n\n.minicolors-slider-wheel .minicolors-slider {\n background-position: -20px 0;\n}\n\n.minicolors-opacity-slider {\n left: 173px;\n background-position: -40px 0;\n display: none;\n}\n\n.minicolors-with-opacity .minicolors-opacity-slider {\n display: block;\n}\n\n/* Pickers */\n.minicolors-grid .minicolors-picker {\n position: absolute;\n top: 70px;\n left: 70px;\n width: 12px;\n height: 12px;\n border: solid 1px black;\n border-radius: 10px;\n margin-top: -6px;\n margin-left: -6px;\n background: none;\n}\n\n.minicolors-grid .minicolors-picker > div {\n position: absolute;\n top: 0;\n left: 0;\n width: 8px;\n height: 8px;\n border-radius: 8px;\n border: solid 2px white;\n box-sizing: content-box;\n}\n\n.minicolors-picker {\n position: absolute;\n top: 0;\n left: 0;\n width: 18px;\n height: 2px;\n background: white;\n border: solid 1px black;\n margin-top: -2px;\n box-sizing: content-box;\n}\n\n/* Swatches */\n.minicolors-swatches,\n.minicolors-swatches li {\n margin: 5px 0 3px 5px;\n padding: 0;\n list-style: none;\n overflow: hidden;\n}\n\n.minicolors-swatches .minicolors-swatch {\n position: relative;\n float: left;\n cursor: pointer;\n margin:0 4px 0 0;\n}\n\n.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {\n margin-right: 7px;\n}\n\n.minicolors-swatch.selected {\n border-color: #000;\n}\n\n/* Inline controls */\n.minicolors-inline {\n display: inline-block;\n}\n\n.minicolors-inline .minicolors-input {\n display: none !important;\n}\n\n.minicolors-inline .minicolors-panel {\n position: relative;\n top: auto;\n left: auto;\n box-shadow: none;\n z-index: auto;\n display: inline-block;\n}\n\n/* Default theme */\n.minicolors-theme-default .minicolors-swatch {\n top: 5px;\n left: 5px;\n width: 18px;\n height: 18px;\n}\n.minicolors-theme-default .minicolors-swatches .minicolors-swatch {\n margin-bottom: 2px;\n top: 0;\n left: 0;\n width: 18px;\n height: 18px;\n}\n.minicolors-theme-default.minicolors-position-right .minicolors-swatch {\n left: auto;\n right: 5px;\n}\n.minicolors-theme-default.minicolors {\n width: auto;\n display: inline-block;\n}\n.minicolors-theme-default .minicolors-input {\n height: 20px;\n width: auto;\n display: inline-block;\n padding-left: 26px;\n}\n.minicolors-theme-default.minicolors-position-right .minicolors-input {\n padding-right: 26px;\n padding-left: inherit;\n}\n\n/* Bootstrap theme */\n.minicolors-theme-bootstrap .minicolors-swatch {\n z-index: 2;\n top: 3px;\n left: 3px;\n width: 28px;\n height: 28px;\n border-radius: 3px;\n}\n.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {\n margin-bottom: 2px;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n}\n.minicolors-theme-bootstrap .minicolors-swatch-color {\n border-radius: inherit;\n}\n.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {\n left: auto;\n right: 3px;\n}\n.minicolors-theme-bootstrap .minicolors-input {\n float: none;\n padding-left: 44px;\n}\n.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {\n padding-right: 44px;\n padding-left: 12px;\n}\n.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {\n top: 4px;\n left: 4px;\n width: 37px;\n height: 37px;\n border-radius: 5px;\n}\n.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {\n width: 24px;\n height: 24px;\n}\n.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {\n width: 18px;\n height: 18px;\n}\n.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n/* Semantic Ui theme */\n.minicolors-theme-semanticui .minicolors-swatch {\n top: 0;\n left: 0;\n padding: 18px;\n}\n.minicolors-theme-semanticui input {\n text-indent: 30px;\n}\n" }, { "path": "app/lib/minicolors/jquery.minicolors.js", "content": "//\n// jQuery MiniColors: A tiny color picker built on jQuery\n//\n// Developed by Cory LaViska for A Beautiful Site, LLC\n//\n// Licensed under the MIT license: http://opensource.org/licenses/MIT\n//\n(function (factory) {\n if(typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define(['jquery'], factory);\n } else if(typeof exports === 'object') {\n // Node/CommonJS\n module.exports = factory(require('jquery'));\n } else {\n // Browser globals\n factory(jQuery);\n }\n}(function ($) {\n 'use strict';\n\n // Defaults\n $.minicolors = {\n defaults: {\n animationSpeed: 50,\n animationEasing: 'swing',\n change: null,\n changeDelay: 0,\n control: 'hue',\n defaultValue: '',\n format: 'hex',\n hide: null,\n hideSpeed: 100,\n inline: false,\n keywords: '',\n letterCase: 'lowercase',\n opacity: false,\n position: 'bottom left',\n show: null,\n showSpeed: 100,\n theme: 'default',\n swatches: []\n }\n };\n\n // Public methods\n $.extend($.fn, {\n minicolors: function(method, data) {\n\n switch(method) {\n // Destroy the control\n case 'destroy':\n $(this).each(function() {\n destroy($(this));\n });\n return $(this);\n\n // Hide the color picker\n case 'hide':\n hide();\n return $(this);\n\n // Get/set opacity\n case 'opacity':\n // Getter\n if(data === undefined) {\n // Getter\n return $(this).attr('data-opacity');\n } else {\n // Setter\n $(this).each(function() {\n updateFromInput($(this).attr('data-opacity', data));\n });\n }\n return $(this);\n\n // Get an RGB(A) object based on the current color/opacity\n case 'rgbObject':\n return rgbObject($(this), method === 'rgbaObject');\n\n // Get an RGB(A) string based on the current color/opacity\n case 'rgbString':\n case 'rgbaString':\n return rgbString($(this), method === 'rgbaString');\n\n // Get/set settings on the fly\n case 'settings':\n if(data === undefined) {\n return $(this).data('minicolors-settings');\n } else {\n // Setter\n $(this).each(function() {\n var settings = $(this).data('minicolors-settings') || {};\n destroy($(this));\n $(this).minicolors($.extend(true, settings, data));\n });\n }\n return $(this);\n\n // Show the color picker\n case 'show':\n show($(this).eq(0));\n return $(this);\n\n // Get/set the hex color value\n case 'value':\n if(data === undefined) {\n // Getter\n return $(this).val();\n } else {\n // Setter\n $(this).each(function() {\n if(typeof(data) === 'object' && data !== 'null') {\n if(data.opacity) {\n $(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));\n }\n if(data.color) {\n $(this).val(data.color);\n }\n } else {\n $(this).val(data);\n }\n updateFromInput($(this));\n });\n }\n return $(this);\n\n // Initializes the control\n default:\n if(method !== 'create') data = method;\n $(this).each(function() {\n init($(this), data);\n });\n return $(this);\n\n }\n\n }\n });\n\n // Initialize input elements\n function init(input, settings) {\n var minicolors = $('
');\n var defaults = $.minicolors.defaults;\n var size;\n var swatches;\n var swatch;\n var panel;\n var i;\n\n // Do nothing if already initialized\n if(input.data('minicolors-initialized')) return;\n\n // Handle settings\n settings = $.extend(true, {}, defaults, settings);\n\n // The wrapper\n minicolors\n .addClass('minicolors-theme-' + settings.theme)\n .toggleClass('minicolors-with-opacity', settings.opacity);\n\n // Custom positioning\n if(settings.position !== undefined) {\n $.each(settings.position.split(' '), function() {\n minicolors.addClass('minicolors-position-' + this);\n });\n }\n\n // Input size\n if(settings.format === 'rgb') {\n size = settings.opacity ? '25' : '20';\n } else {\n size = settings.keywords ? '11' : '7';\n }\n\n // The input\n input\n .addClass('minicolors-input')\n .data('minicolors-initialized', false)\n .data('minicolors-settings', settings)\n .prop('size', size)\n .wrap(minicolors)\n .after(\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
' +\n '
'\n );\n\n // The swatch\n if(!settings.inline) {\n input.after('');\n input.next('.minicolors-input-swatch').on('click', function(event) {\n event.preventDefault();\n input.focus();\n });\n }\n\n // Prevent text selection in IE\n panel = input.parent().find('.minicolors-panel');\n panel.on('selectstart', function() { return false; }).end();\n\n // Swatches\n if(settings.swatches && settings.swatches.length !== 0) {\n panel.addClass('minicolors-with-swatches');\n swatches = $('')\n .appendTo(panel);\n for(i = 0; i < settings.swatches.length; ++i) {\n swatch = settings.swatches[i];\n swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));\n $('
    • ')\n .appendTo(swatches)\n .data('swatch-color', settings.swatches[i])\n .find('.minicolors-swatch-color')\n .css({\n backgroundColor: rgb2hex(swatch),\n opacity: swatch.a\n });\n settings.swatches[i] = swatch;\n }\n }\n\n // Inline controls\n if(settings.inline) input.parent().addClass('minicolors-inline');\n\n updateFromInput(input, false);\n\n input.data('minicolors-initialized', true);\n }\n\n // Returns the input back to its original state\n function destroy(input) {\n var minicolors = input.parent();\n\n // Revert the input element\n input\n .removeData('minicolors-initialized')\n .removeData('minicolors-settings')\n .removeProp('size')\n .removeClass('minicolors-input');\n\n // Remove the wrap and destroy whatever remains\n minicolors.before(input).remove();\n }\n\n // Shows the specified dropdown panel\n function show(input) {\n var minicolors = input.parent();\n var panel = minicolors.find('.minicolors-panel');\n var settings = input.data('minicolors-settings');\n\n // Do nothing if uninitialized, disabled, inline, or already open\n if(\n !input.data('minicolors-initialized') ||\n input.prop('disabled') ||\n minicolors.hasClass('minicolors-inline') ||\n minicolors.hasClass('minicolors-focus')\n ) return;\n\n hide();\n\n minicolors.addClass('minicolors-focus');\n panel\n .stop(true, true)\n .fadeIn(settings.showSpeed, function() {\n if(settings.show) settings.show.call(input.get(0));\n });\n }\n\n // Hides all dropdown panels\n function hide() {\n $('.minicolors-focus').each(function() {\n var minicolors = $(this);\n var input = minicolors.find('.minicolors-input');\n var panel = minicolors.find('.minicolors-panel');\n var settings = input.data('minicolors-settings');\n\n panel.fadeOut(settings.hideSpeed, function() {\n if(settings.hide) settings.hide.call(input.get(0));\n minicolors.removeClass('minicolors-focus');\n });\n\n });\n }\n\n // Moves the selected picker\n function move(target, event, animate) {\n var input = target.parents('.minicolors').find('.minicolors-input');\n var settings = input.data('minicolors-settings');\n var picker = target.find('[class$=-picker]');\n var offsetX = target.offset().left;\n var offsetY = target.offset().top;\n var x = Math.round(event.pageX - offsetX);\n var y = Math.round(event.pageY - offsetY);\n var duration = animate ? settings.animationSpeed : 0;\n var wx, wy, r, phi;\n\n // Touch support\n if(event.originalEvent.changedTouches) {\n x = event.originalEvent.changedTouches[0].pageX - offsetX;\n y = event.originalEvent.changedTouches[0].pageY - offsetY;\n }\n\n // Constrain picker to its container\n if(x < 0) x = 0;\n if(y < 0) y = 0;\n if(x > target.width()) x = target.width();\n if(y > target.height()) y = target.height();\n\n // Constrain color wheel values to the wheel\n if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {\n wx = 75 - x;\n wy = 75 - y;\n r = Math.sqrt(wx * wx + wy * wy);\n phi = Math.atan2(wy, wx);\n if(phi < 0) phi += Math.PI * 2;\n if(r > 75) {\n r = 75;\n x = 75 - (75 * Math.cos(phi));\n y = 75 - (75 * Math.sin(phi));\n }\n x = Math.round(x);\n y = Math.round(y);\n }\n\n // Move the picker\n if(target.is('.minicolors-grid')) {\n picker\n .stop(true)\n .animate({\n top: y + 'px',\n left: x + 'px'\n }, duration, settings.animationEasing, function() {\n updateFromControl(input, target);\n });\n } else {\n picker\n .stop(true)\n .animate({\n top: y + 'px'\n }, duration, settings.animationEasing, function() {\n updateFromControl(input, target);\n });\n }\n }\n\n // Sets the input based on the color picker values\n function updateFromControl(input, target) {\n\n function getCoords(picker, container) {\n var left, top;\n if(!picker.length || !container) return null;\n left = picker.offset().left;\n top = picker.offset().top;\n\n return {\n x: left - container.offset().left + (picker.outerWidth() / 2),\n y: top - container.offset().top + (picker.outerHeight() / 2)\n };\n }\n\n var hue, saturation, brightness, x, y, r, phi;\n var hex = input.val();\n var opacity = input.attr('data-opacity');\n\n // Helpful references\n var minicolors = input.parent();\n var settings = input.data('minicolors-settings');\n var swatch = minicolors.find('.minicolors-input-swatch');\n\n // Panel objects\n var grid = minicolors.find('.minicolors-grid');\n var slider = minicolors.find('.minicolors-slider');\n var opacitySlider = minicolors.find('.minicolors-opacity-slider');\n\n // Picker objects\n var gridPicker = grid.find('[class$=-picker]');\n var sliderPicker = slider.find('[class$=-picker]');\n var opacityPicker = opacitySlider.find('[class$=-picker]');\n\n // Picker positions\n var gridPos = getCoords(gridPicker, grid);\n var sliderPos = getCoords(sliderPicker, slider);\n var opacityPos = getCoords(opacityPicker, opacitySlider);\n\n // Handle colors\n if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {\n\n // Determine HSB values\n switch(settings.control) {\n case 'wheel':\n // Calculate hue, saturation, and brightness\n x = (grid.width() / 2) - gridPos.x;\n y = (grid.height() / 2) - gridPos.y;\n r = Math.sqrt(x * x + y * y);\n phi = Math.atan2(y, x);\n if(phi < 0) phi += Math.PI * 2;\n if(r > 75) {\n r = 75;\n gridPos.x = 69 - (75 * Math.cos(phi));\n gridPos.y = 69 - (75 * Math.sin(phi));\n }\n saturation = keepWithin(r / 0.75, 0, 100);\n hue = keepWithin(phi * 180 / Math.PI, 0, 360);\n brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);\n hex = hsb2hex({\n h: hue,\n s: saturation,\n b: brightness\n });\n\n // Update UI\n slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));\n break;\n\n case 'saturation':\n // Calculate hue, saturation, and brightness\n hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);\n saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);\n brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);\n hex = hsb2hex({\n h: hue,\n s: saturation,\n b: brightness\n });\n\n // Update UI\n slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));\n minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);\n break;\n\n case 'brightness':\n // Calculate hue, saturation, and brightness\n hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);\n saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);\n brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);\n hex = hsb2hex({\n h: hue,\n s: saturation,\n b: brightness\n });\n\n // Update UI\n slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));\n minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));\n break;\n\n default:\n // Calculate hue, saturation, and brightness\n hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);\n saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);\n brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);\n hex = hsb2hex({\n h: hue,\n s: saturation,\n b: brightness\n });\n\n // Update UI\n grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));\n break;\n }\n\n // Handle opacity\n if(settings.opacity) {\n opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);\n } else {\n opacity = 1;\n }\n\n updateInput(input, hex, opacity);\n }\n else {\n // Set swatch color\n swatch.find('span').css({\n backgroundColor: hex,\n opacity: opacity\n });\n\n // Handle change event\n doChange(input, hex, opacity);\n }\n }\n\n // Sets the value of the input and does the appropriate conversions\n // to respect settings, also updates the swatch\n function updateInput(input, value, opacity) {\n var rgb;\n\n // Helpful references\n var minicolors = input.parent();\n var settings = input.data('minicolors-settings');\n var swatch = minicolors.find('.minicolors-input-swatch');\n\n if(settings.opacity) input.attr('data-opacity', opacity);\n\n // Set color string\n if(settings.format === 'rgb') {\n // Returns RGB(A) string\n\n // Checks for input format and does the conversion\n if(isRgb(value)) {\n rgb = parseRgb(value, true);\n }\n else {\n rgb = hex2rgb(parseHex(value, true));\n }\n\n opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);\n if(isNaN(opacity) || !settings.opacity) opacity = 1;\n\n if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {\n // Set RGBA string if alpha\n value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';\n } else {\n // Set RGB string (alpha = 1)\n value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';\n }\n } else {\n // Returns hex color\n\n // Checks for input format and does the conversion\n if(isRgb(value)) {\n value = rgbString2hex(value);\n }\n\n value = convertCase(value, settings.letterCase);\n }\n\n // Update value from picker\n input.val(value);\n\n // Set swatch color\n swatch.find('span').css({\n backgroundColor: value,\n opacity: opacity\n });\n\n // Handle change event\n doChange(input, value, opacity);\n }\n\n // Sets the color picker values from the input\n function updateFromInput(input, preserveInputValue) {\n var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;\n\n // Helpful references\n var minicolors = input.parent();\n var settings = input.data('minicolors-settings');\n var swatch = minicolors.find('.minicolors-input-swatch');\n\n // Panel objects\n var grid = minicolors.find('.minicolors-grid');\n var slider = minicolors.find('.minicolors-slider');\n var opacitySlider = minicolors.find('.minicolors-opacity-slider');\n\n // Picker objects\n var gridPicker = grid.find('[class$=-picker]');\n var sliderPicker = slider.find('[class$=-picker]');\n var opacityPicker = opacitySlider.find('[class$=-picker]');\n\n // Determine hex/HSB values\n if(isRgb(input.val())) {\n // If input value is a rgb(a) string, convert it to hex color and update opacity\n hex = rgbString2hex(input.val());\n alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);\n if(alpha) {\n input.attr('data-opacity', alpha);\n }\n } else {\n hex = convertCase(parseHex(input.val(), true), settings.letterCase);\n }\n\n if(!hex){\n hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);\n }\n hsb = hex2hsb(hex);\n\n // Get array of lowercase keywords\n keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {\n return $.trim(a.toLowerCase());\n });\n\n // Set color string\n if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {\n value = convertCase(input.val());\n } else {\n value = isRgb(input.val()) ? parseRgb(input.val()) : hex;\n }\n\n // Update input value\n if(!preserveInputValue) input.val(value);\n\n // Determine opacity value\n if(settings.opacity) {\n // Get from data-opacity attribute and keep within 0-1 range\n opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);\n if(isNaN(opacity)) opacity = 1;\n input.attr('data-opacity', opacity);\n swatch.find('span').css('opacity', opacity);\n\n // Set opacity picker position\n y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());\n opacityPicker.css('top', y + 'px');\n }\n\n // Set opacity to zero if input value is transparent\n if(input.val().toLowerCase() === 'transparent') {\n swatch.find('span').css('opacity', 0);\n }\n\n // Update swatch\n swatch.find('span').css('backgroundColor', hex);\n\n // Determine picker locations\n switch(settings.control) {\n case 'wheel':\n // Set grid position\n r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);\n phi = hsb.h * Math.PI / 180;\n x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());\n y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());\n gridPicker.css({\n top: y + 'px',\n left: x + 'px'\n });\n\n // Set slider position\n y = 150 - (hsb.b / (100 / grid.height()));\n if(hex === '') y = 0;\n sliderPicker.css('top', y + 'px');\n\n // Update panel color\n slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));\n break;\n\n case 'saturation':\n // Set grid position\n x = keepWithin((5 * hsb.h) / 12, 0, 150);\n y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());\n gridPicker.css({\n top: y + 'px',\n left: x + 'px'\n });\n\n // Set slider position\n y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());\n sliderPicker.css('top', y + 'px');\n\n // Update UI\n slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));\n minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);\n break;\n\n case 'brightness':\n // Set grid position\n x = keepWithin((5 * hsb.h) / 12, 0, 150);\n y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());\n gridPicker.css({\n top: y + 'px',\n left: x + 'px'\n });\n\n // Set slider position\n y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());\n sliderPicker.css('top', y + 'px');\n\n // Update UI\n slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));\n minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));\n break;\n\n default:\n // Set grid position\n x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());\n y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());\n gridPicker.css({\n top: y + 'px',\n left: x + 'px'\n });\n\n // Set slider position\n y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());\n sliderPicker.css('top', y + 'px');\n\n // Update panel color\n grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));\n break;\n }\n\n // Fire change event, but only if minicolors is fully initialized\n if(input.data('minicolors-initialized')) {\n doChange(input, value, opacity);\n }\n }\n\n // Runs the change and changeDelay callbacks\n function doChange(input, value, opacity) {\n var settings = input.data('minicolors-settings');\n var lastChange = input.data('minicolors-lastChange');\n var obj, sel, i;\n\n // Only run if it actually changed\n if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {\n\n // Remember last-changed value\n input.data('minicolors-lastChange', {\n value: value,\n opacity: opacity\n });\n\n // Check and select applicable swatch\n if(settings.swatches && settings.swatches.length !== 0) {\n if(!isRgb(value)) {\n obj = hex2rgb(value);\n }\n else {\n obj = parseRgb(value, true);\n }\n sel = -1;\n for(i = 0; i < settings.swatches.length; ++i) {\n if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) {\n sel = i;\n break;\n }\n }\n\n input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');\n if(sel !== -1) {\n input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');\n }\n }\n\n // Fire change event\n if(settings.change) {\n if(settings.changeDelay) {\n // Call after a delay\n clearTimeout(input.data('minicolors-changeTimeout'));\n input.data('minicolors-changeTimeout', setTimeout(function() {\n settings.change.call(input.get(0), value, opacity);\n }, settings.changeDelay));\n } else {\n // Call immediately\n settings.change.call(input.get(0), value, opacity);\n }\n }\n input.trigger('change').trigger('input');\n }\n }\n\n // Generates an RGB(A) object based on the input's value\n function rgbObject(input) {\n var rgb,\n opacity = $(input).attr('data-opacity');\n if( isRgb($(input).val()) ) {\n rgb = parseRgb($(input).val(), true);\n } else {\n var hex = parseHex($(input).val(), true);\n rgb = hex2rgb(hex);\n }\n if( !rgb ) return null;\n if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });\n return rgb;\n }\n\n // Generates an RGB(A) string based on the input's value\n function rgbString(input, alpha) {\n var rgb,\n opacity = $(input).attr('data-opacity');\n if( isRgb($(input).val()) ) {\n rgb = parseRgb($(input).val(), true);\n } else {\n var hex = parseHex($(input).val(), true);\n rgb = hex2rgb(hex);\n }\n if( !rgb ) return null;\n if( opacity === undefined ) opacity = 1;\n if( alpha ) {\n return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';\n } else {\n return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';\n }\n }\n\n // Converts to the letter case specified in settings\n function convertCase(string, letterCase) {\n return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();\n }\n\n // Parses a string and returns a valid hex string when possible\n function parseHex(string, expand) {\n string = string.replace(/^#/g, '');\n if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';\n if(string.length !== 3 && string.length !== 6) return '';\n if(string.length === 3 && expand) {\n string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];\n }\n return '#' + string;\n }\n\n // Parses a string and returns a valid RGB(A) string when possible\n function parseRgb(string, obj) {\n var values = string.replace(/[^\\d,.]/g, '');\n var rgba = values.split(',');\n\n rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);\n rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);\n rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);\n if(rgba[3]) {\n rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);\n }\n\n // Return RGBA object\n if( obj ) {\n if (rgba[3]) {\n return {\n r: rgba[0],\n g: rgba[1],\n b: rgba[2],\n a: rgba[3]\n };\n } else {\n return {\n r: rgba[0],\n g: rgba[1],\n b: rgba[2]\n };\n }\n }\n\n // Return RGBA string\n if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {\n return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';\n } else {\n return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';\n }\n\n }\n\n // Parses a string and returns a valid color string when possible\n function parseInput(string, expand) {\n if(isRgb(string)) {\n // Returns a valid rgb(a) string\n return parseRgb(string);\n } else {\n return parseHex(string, expand);\n }\n }\n\n // Keeps value within min and max\n function keepWithin(value, min, max) {\n if(value < min) value = min;\n if(value > max) value = max;\n return value;\n }\n\n // Checks if a string is a valid RGB(A) string\n function isRgb(string) {\n var rgb = string.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i);\n return (rgb && rgb.length === 4) ? true : false;\n }\n\n // Function to get alpha from a RGB(A) string\n function getAlpha(rgba) {\n rgba = rgba.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+(\\.\\d{1,2})?|\\.\\d{1,2})[\\s+]?/i);\n return (rgba && rgba.length === 6) ? rgba[4] : '1';\n }\n\n // Converts an HSB object to an RGB object\n function hsb2rgb(hsb) {\n var rgb = {};\n var h = Math.round(hsb.h);\n var s = Math.round(hsb.s * 255 / 100);\n var v = Math.round(hsb.b * 255 / 100);\n if(s === 0) {\n rgb.r = rgb.g = rgb.b = v;\n } else {\n var t1 = v;\n var t2 = (255 - s) * v / 255;\n var t3 = (t1 - t2) * (h % 60) / 60;\n if(h === 360) h = 0;\n if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }\n else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }\n else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }\n else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }\n else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }\n else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }\n else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }\n }\n return {\n r: Math.round(rgb.r),\n g: Math.round(rgb.g),\n b: Math.round(rgb.b)\n };\n }\n\n // Converts an RGB string to a hex string\n function rgbString2hex(rgb){\n rgb = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i);\n return (rgb && rgb.length === 4) ? '#' +\n ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +\n ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +\n ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';\n }\n\n // Converts an RGB object to a hex string\n function rgb2hex(rgb) {\n var hex = [\n rgb.r.toString(16),\n rgb.g.toString(16),\n rgb.b.toString(16)\n ];\n $.each(hex, function(nr, val) {\n if(val.length === 1) hex[nr] = '0' + val;\n });\n return '#' + hex.join('');\n }\n\n // Converts an HSB object to a hex string\n function hsb2hex(hsb) {\n return rgb2hex(hsb2rgb(hsb));\n }\n\n // Converts a hex string to an HSB object\n function hex2hsb(hex) {\n var hsb = rgb2hsb(hex2rgb(hex));\n if(hsb.s === 0) hsb.h = 360;\n return hsb;\n }\n\n // Converts an RGB object to an HSB object\n function rgb2hsb(rgb) {\n var hsb = { h: 0, s: 0, b: 0 };\n var min = Math.min(rgb.r, rgb.g, rgb.b);\n var max = Math.max(rgb.r, rgb.g, rgb.b);\n var delta = max - min;\n hsb.b = max;\n hsb.s = max !== 0 ? 255 * delta / max : 0;\n if(hsb.s !== 0) {\n if(rgb.r === max) {\n hsb.h = (rgb.g - rgb.b) / delta;\n } else if(rgb.g === max) {\n hsb.h = 2 + (rgb.b - rgb.r) / delta;\n } else {\n hsb.h = 4 + (rgb.r - rgb.g) / delta;\n }\n } else {\n hsb.h = -1;\n }\n hsb.h *= 60;\n if(hsb.h < 0) {\n hsb.h += 360;\n }\n hsb.s *= 100/255;\n hsb.b *= 100/255;\n return hsb;\n }\n\n // Converts a hex string to an RGB object\n function hex2rgb(hex) {\n hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);\n return {\n r: hex >> 16,\n g: (hex & 0x00FF00) >> 8,\n b: (hex & 0x0000FF)\n };\n }\n\n // Handle events\n $([document, top.document])\n // Hide on clicks outside of the control\n .on('mousedown.minicolors touchstart.minicolors', function(event) {\n if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {\n hide();\n }\n })\n // Start moving\n .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {\n var target = $(this);\n event.preventDefault();\n $(event.delegateTarget).data('minicolors-target', target);\n move(target, event, true);\n })\n // Move pickers\n .on('mousemove.minicolors touchmove.minicolors', function(event) {\n var target = $(event.delegateTarget).data('minicolors-target');\n if(target) move(target, event);\n })\n // Stop moving\n .on('mouseup.minicolors touchend.minicolors', function() {\n $(this).removeData('minicolors-target');\n })\n // Selected a swatch\n .on('click.minicolors', '.minicolors-swatches li', function(event) {\n event.preventDefault();\n var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');\n updateInput(input, color, getAlpha(color));\n updateFromInput(input);\n })\n // Show panel when swatch is clicked\n .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {\n var input = $(this).parent().find('.minicolors-input');\n event.preventDefault();\n show(input);\n })\n // Show on focus\n .on('focus.minicolors', '.minicolors-input', function() {\n var input = $(this);\n if(!input.data('minicolors-initialized')) return;\n show(input);\n })\n // Update value on blur\n .on('blur.minicolors', '.minicolors-input', function() {\n var input = $(this);\n var settings = input.data('minicolors-settings');\n var keywords;\n var hex;\n var rgba;\n var swatchOpacity;\n var value;\n\n if(!input.data('minicolors-initialized')) return;\n\n // Get array of lowercase keywords\n keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {\n return $.trim(a.toLowerCase());\n });\n\n // Set color string\n if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {\n value = input.val();\n } else {\n // Get RGBA values for easy conversion\n if(isRgb(input.val())) {\n rgba = parseRgb(input.val(), true);\n } else {\n hex = parseHex(input.val(), true);\n rgba = hex ? hex2rgb(hex) : null;\n }\n\n // Convert to format\n if(rgba === null) {\n value = settings.defaultValue;\n } else if(settings.format === 'rgb') {\n value = settings.opacity ?\n parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :\n parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');\n } else {\n value = rgb2hex(rgba);\n }\n }\n\n // Update swatch opacity\n swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;\n if(value.toLowerCase() === 'transparent') swatchOpacity = 0;\n input\n .closest('.minicolors')\n .find('.minicolors-input-swatch > span')\n .css('opacity', swatchOpacity);\n\n // Set input value\n input.val(value);\n\n // Is it blank?\n if(input.val() === '') input.val(parseInput(settings.defaultValue, true));\n\n // Adjust case\n input.val(convertCase(input.val(), settings.letterCase));\n\n })\n // Handle keypresses\n .on('keydown.minicolors', '.minicolors-input', function(event) {\n var input = $(this);\n if(!input.data('minicolors-initialized')) return;\n switch(event.keyCode) {\n case 9: // tab\n hide();\n break;\n case 13: // enter\n case 27: // esc\n hide();\n input.blur();\n break;\n }\n })\n // Update on keyup\n .on('keyup.minicolors', '.minicolors-input', function() {\n var input = $(this);\n if(!input.data('minicolors-initialized')) return;\n updateFromInput(input, true);\n })\n // Update on paste\n .on('paste.minicolors', '.minicolors-input', function() {\n var input = $(this);\n if(!input.data('minicolors-initialized')) return;\n setTimeout(function() {\n updateFromInput(input, true);\n }, 1);\n });\n}));\n" }, { "path": "app/lib/minicolors/package.json", "content": "{\n \"name\": \"@claviska/jquery-minicolors\",\n \"version\": \"2.2.6\",\n \"homepage\": \"https://github.com/claviska/jquery-minicolors\",\n \"author\": \"Cory LaViska\",\n \"description\": \"jQuery MiniColors Plugin\",\n \"main\": \"jquery.minicolors.js\",\n \"keywords\": [\n \"jquery\",\n \"colorpicker\"\n ],\n \"license\": \"MIT\",\n \"dependencies\": {\n \"jquery\": \">= 1.7.x\"\n },\n \"devDependencies\": {\n \"del\": \"^2.2.0\",\n \"gulp\": \"^3.9.1\",\n \"gulp-help\": \"^1.6.1\",\n \"gulp-rename\": \"^1.2.2\",\n \"gulp-uglify\": \"^1.5.3\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/claviska/jquery-minicolors.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/claviska/jquery-minicolors/issues\"\n },\n \"scripts\": {}\n}\n" }, { "path": "app/lib/minicolors/without-bootstrap.html", "content": "\n\n\n jQuery MiniColors\n \n\n \n \n\n \n \n \n\n \n\n \n\n\n\n

    MiniColors Demo (without Bootstrap)

    \n

    \n « Back to the Bootstrap demo\n

    \n\n \n

    Control Types

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n\n \n

    Input Modes

    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n\n \n

    Positions

    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n\n \n

    RGB(A)

    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n\n \n

    …and more!

    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n
    \n \n
    \n \n
    \n\n\n\n" }, { "path": "app/main.js", "content": "const electron = require('electron')\n// Module to control application life.\nconst app = electron.app\n// Module to create native browser window.\nconst BrowserWindow = electron.BrowserWindow\nconst ipcMain = electron.ipcMain;\n\nconst path = require('path');\nconst url = require('url');\nconst util = require('util');\nconst fs = require('fs');\n\nconst spawn = require('child_process').spawn;\nconst exec = require('child_process').exec;\n\nconst settingsPath = path.join(app.getPath('userData'),'app_db.json');\nconst low = require('lowdb');\n\nrequire('fix-path')();\n\nvar which = require('which');\n\nvar ffbinaries = require('ffbinaries');\n// Keep a global reference of the window object, if you don't, the window will\n// be closed automatically when the JavaScript object is garbage collected.\nlet mainWindow\nlet ffmpeg_ps\nlet db\n\n// var appData = app.getPath(\"userData\");\n\nfunction createWindow (needs_ffmpeg) {\n // Create the browser window.\n // mainWindow = new BrowserWindow({width: 800, height: 600})\n var externalDisplay = electron.screen.getPrimaryDisplay()\n var width = 800;\n var height = 600;\n if (externalDisplay) {\n width = externalDisplay.bounds.width*0.8;\n height = externalDisplay.bounds.height*0.8;\n }\n mainWindow = new BrowserWindow({\n // x:windowSettings.x,\n // y:windowSettings.y,\n // width: windowSettings.width,\n // height: windowSettings.height,\n width:width,\n height:height,\n minWidth:800,\n minHeight:600\n // titleBarStyle:\"hidden\"\n })\n\n // and load the index.html of the app.\n mainWindow.loadURL(url.format({\n pathname: path.join(__dirname, needs_ffmpeg ? 'ffmpeg.html':'index.html'),\n protocol: 'file:',\n slashes: true\n }))\n\n // Open the DevTools.\n // mainWindow.webContents.openDevTools()\n\n // Emitted when the window is closed.\n mainWindow.on('closed', function () {\n // Dereference the window object, usually you would store windows\n // in an array if your app supports multi windows, this is the time\n // when you should delete the corresponding element.\n mainWindow = null\n })\n}\n\n// This method will be called when Electron has finished\n// initialization and is ready to create browser windows.\n// Some APIs can only be used after this event occurs.\nvar ffmpeg_path = false;\nvar ffprobe_path = false;\n\napp.on('ready', function(){\n db = low(settingsPath);\n db.defaults({ ffmpeg: {ffmpeg:false, ffprobe:false}, window:{x:0, y:0, width:800, height:600}}).write();\n\n var ffmpeg_store = db.get('ffmpeg').value();\n console.log(ffmpeg_store);\n var opts = {};\n if(ffmpeg_store.ffmpeg){ opts = {path:path.dirname(ffmpeg_store.ffmpeg)} }\n\n which('ffmpeg', opts, function (er, ffmpeg) {\n ffmpeg_path = (!er && ffmpeg) ? ffmpeg : false;\n var opts = {};\n if(ffmpeg_store.ffprobe){ opts = {path:path.dirname(ffmpeg_store.ffprobe)} }\n which('ffprobe', opts, function (er, ffprobe) {\n ffprobe_path = (!er && ffprobe) ? ffprobe : false;\n console.log(ffmpeg_path, ffprobe_path);\n createWindow(!ffmpeg_path || !ffprobe_path);\n });\n });\n})\n\n// Quit when all windows are closed.\napp.on('window-all-closed', function () {\n // On OS X it is common for applications and their menu bar\n // to stay active until the user quits explicitly with Cmd + Q\n // if (process.platform !== 'darwin') {\n app.quit()\n // }\n})\n\napp.on('activate', function () {\n // On OS X it's common to re-create a window in the app when the\n // dock icon is clicked and there are no other windows open.\n if (mainWindow === null) {\n createWindow()\n }\n})\n\n\nipcMain.on('install_ffmpeg',function(event,input){\n\n console.log(\"INSTALL\");\n var platform = ffbinaries.detectPlatform();\n var dest = path.join(app.getPath(\"userData\"), \"ffmpeg\");\n\n ffbinaries.downloadFiles(['ffmpeg','ffprobe'], {quiet: true, destination: dest}, function () {\n console.log('Downloaded binaries for ' + platform + '.');\n ffmpeg_path = dest+\"/ffmpeg\";\n ffprobe_path = dest+\"/ffprobe\";\n\n db.set('ffmpeg.ffmpeg', ffmpeg_path)\n .set('ffmpeg.ffprobe', ffprobe_path)\n .write()\n\n\n mainWindow.loadURL(url.format({\n pathname: path.join(__dirname, 'index.html'),\n protocol: 'file:',\n slashes: true\n }))\n\n // event.sender.send('ffmpeg_installed', platform);\n });\n\n});\n// In this file you can include the rest of your app's specific main process\n// code. You can also put them in separate files and require them here.\nipcMain.on('probeInput', (event, input) => {\n console.log(\"PROBE\", ffprobe_path);\n var cmd = \"\\\"\"+ffprobe_path+\"\\\" -v quiet -print_format json -show_format -show_streams \\\"\"+input+\"\\\"\";\n\n exec(cmd, function(so,se,e) {\n // console.log(so,se,e);\n var metadata = JSON.parse(se);\n event.sender.send('probeResult', metadata);\n });\n});\nipcMain.on('getPalette', (event, input, prefs) => {\n // console.log(prefs);\n // var input = prefs.file.input;\n var w = prefs.dimensions.width || 320;\n var h = prefs.dimensions.height || 240;\n var fps = prefs.fps || 24;\n var stats = prefs.color.stats_mode || 'full';\n // var colors = prefs.color.colors || 256;\n var transparency = (prefs.color.alpha?1:0) || 0;\n var colors = prefs.color.count || 256;\n\n var scaleCmd = \"scale=\"+w+\":\"+h;\n\n var vf = util.format(\"fps=%s,%s:flags=lanczos,palettegen=stats_mode=%s:max_colors=%s:reserve_transparent=%s\", fps, scaleCmd, stats, colors, transparency);\n\n if(ffmpeg_ps) ffmpeg_ps.kill();\n\n ffmpeg_ps = spawn(ffmpeg_path, [\"-i\", input, \"-vf\", vf, \"-f\", \"image2\", \"-vcodec\", \"png\", \"pipe:1\"])\n var data = [];\n ffmpeg_ps.stdout.on('data',function(d){\n data.push(d);\n });\n ffmpeg_ps.stderr.on('data',function(d){\n // console.log(\"stderr\",d.toString());\n });\n ffmpeg_ps.on('close',function(){\n event.sender.send('paletteResult', Buffer.concat(data).toString('base64'));\n });\n})\nipcMain.on('cancelProcess', (event,opts) => {\n if(ffmpeg_ps){ ffmpeg_ps.kill(); }\n});\n\nvar canceled = false;\nipcMain.on('cancel_export', (event, opts) => {\n canceled=true;\n if(ffmpeg_ps){ ffmpeg_ps.kill(); }\n if(opts.remove){\n //remove the partially exported file\n console.log(\"REMOVE\", opts.remove);\n fs.unlinkSync(opts.remove);\n }\n});\nipcMain.on('getThumbnail', (event, input, palette, time, settings) => {\n\n // .frames(1)\n// .duration(1)\n// .complexFilter(\"fps=\"+fps+\",\"+scaleCmd+\":flags=lanczos[x];[x][1:v]paletteuse=dither=\"+dither)\n // .outputFormat(\"gif\")\n // var settings = {fps:30,dither:'true'};\n // var gif = \"fps=\"+settings.fps+\",flags=lanczos[x];[x][1:v]paletteuse=dither=\"+settings.dither;\n var w = settings.dimensions.width || 320;\n var h = settings.dimensions.height || 240;\n var fps = settings.fps || 24;\n var scaleCmd = \"scale=\"+w+\":\"+h;\n var dither = settings.color.dither ? ('bayer:bayer_scale='+settings.color.dither_scale) : 'none';\n var diff_mode = settings.color.diff_mode ? settings.color.diff_mode : \"rectangle\";\n var diff_mode = settings.loop ? settings.loop : 0;\n\n var vf = util.format(\"fps=%s,%s:flags=lanczos [x];[x][1:v]paletteuse=dither=%s:diff_mode=%s\", fps, scaleCmd, dither, diff_mode, loop);\n console.log(vf);\n if(ffmpeg_ps) ffmpeg_ps.kill();\n ffmpeg_ps = spawn(ffmpeg_path, [\n \"-ss\", time,\n \"-i\", input,\n \"-i\", \"pipe:0\",\n \"-t\", 1,\n \"-lavfi\", vf,\n \"-frames:v\", 1,\n \"-an\", \"-f\", \"image2\",\n \"-vcodec\", \"gif\", \"pipe:1\"\n ])\n var data = [];\n ffmpeg_ps.stdout.on('data',function(d){\n // console.log(\"stdout\",d.toString());\n data.push(d);\n });\n ffmpeg_ps.stderr.on('data',function(d){\n // console.log(\"stderr\",d.toString());\n });\n ffmpeg_ps.on('close',function(){\n event.sender.send('thumbnailResult', Buffer.concat(data).toString('base64'));\n console.log('done');\n });\n\n ffmpeg_ps.stdin.write(Buffer.from(palette, 'base64'));\n ffmpeg_ps.stdin.end();\n\n // exec(\"ffmpeg -ss \"+time+\" -i \"+input+\" -t 1 -frames:v 1 -f image2 -vcodec png -\", function(so,se,e) {\n // // console.log(so,se,e);\n // console.log(so);\n // event.sender.send('thumbnailResult', new Buffer(se, 'binary').toString('base64'));\n // });\n});\nipcMain.on('exportGif', (event, input, output, palette, settings) => {\n var stats = settings.color.stats_mode || 'full';\n var dither = settings.color.dither ? ('bayer:bayer_scale='+settings.color.dither_scale) : 'none';\n var colors = settings.color.colors || 256;\n var fps = settings.fps || 10;\n var w = settings.dimensions.width || 320;\n var h = settings.dimensions.height || 240;\n var scaleCmd = \"scale=\"+w+\":\"+h;\n var vf = util.format(\"fps=%s,%s:flags=lanczos [x];[x][1:v]paletteuse=dither=%s\", fps, scaleCmd, dither);\n\n // var filters = util.format(\"fps=%s,%s:flags=lanczos[x];[x][1:v]paletteuse=dither=%s\", fps, scaleCmd, dither);\n if(ffmpeg_ps) ffmpeg_ps.kill();\n ffmpeg_ps = spawn(ffmpeg_path, [\n \"-i\", input,\n \"-i\", \"pipe:0\",\n \"-lavfi\", vf,\n \"-an\",\n \"-f\", \"gif\",\n output\n ])\n // var data = [];\n ffmpeg_ps.stdout.on('data',function(d){\n console.log(\"stdout\",d.toString());\n // data.push(d);\n });\n ffmpeg_ps.stderr.on('data',function(d){\n // var time = /time=(\\d+)\\:(\\d+)\\:(\\d+)\\.(\\d+)\\s+/.exec(d.toString());\n var progress = parseProgressLine(d.toString());\n console.log(progress);\n // if(time && time.length >= 5){\n if(progress && progress.time){\n // var time = (parseInt(time[1])*3600) + (parseInt(time[2])*60) + parseFloat(time[3] + \".\" + time[4]);\n // var sec = timemarkToSeconds(progress.time);\n // var size = parseInt(progress.size.replace('kB',''))*1000;\n\n var progress_obj = {\n sec: timemarkToSeconds(progress.time),\n size: progress.size ? parseInt(progress.size.replace('kB',''))*1000 : 0\n }\n event.sender.send('export_progress', progress_obj);\n }\n });\n ffmpeg_ps.on('close',function(){\n // event.sender.send('thumbnailResult', Buffer.concat(data).toString('base64'));\n console.log('done');\n if(canceled){\n canceled=false;\n event.sender.send('export_canceled', {});\n }else{\n event.sender.send('export_finished', getFilesizeInBytes(output));\n }\n });\n\n ffmpeg_ps.stdin.write(Buffer.from(palette, 'base64'));\n ffmpeg_ps.stdin.end();\n\n});\n\n\n\n\nfunction timemarkToSeconds(timemark) {\n if (typeof timemark === 'number') {\n return timemark;\n }\n\n if (timemark.indexOf(':') === -1 && timemark.indexOf('.') >= 0) {\n return Number(timemark);\n }\n\n var parts = timemark.split(':');\n\n // add seconds\n var secs = Number(parts.pop());\n\n if (parts.length) {\n // add minutes\n secs += Number(parts.pop()) * 60;\n }\n\n if (parts.length) {\n // add hours\n secs += Number(parts.pop()) * 3600;\n }\n\n return secs;\n}\n\nfunction parseProgressLine(line) {\n var progress = {};\n\n // Remove all spaces after = and trim\n line = line.replace(/=\\s+/g, '=').trim();\n var progressParts = line.split(' ');\n\n // Split every progress part by \"=\" to get key and value\n for(var i = 0; i < progressParts.length; i++) {\n var progressSplit = progressParts[i].split('=', 2);\n var key = progressSplit[0];\n var value = progressSplit[1];\n\n // This is not a progress line\n if(typeof value === 'undefined')\n return null;\n\n progress[key] = value;\n }\n\n return progress;\n}\nfunction getFilesizeInBytes(filename) {\n const stats = fs.statSync(filename)\n const fileSizeInBytes = stats.size\n return fileSizeInBytes\n}\n" }, { "path": "app/package.json", "content": "{\n \"name\": \"GifTuna\",\n \"build\": {\n \"appId\": \"com.ndmweb.giftuna\",\n \"mac\": {\n \"category\": \"public.app-category.image-tools\",\n \"icon\": \"../resources/logo-hires-v2.icns\"\n }\n },\n \"version\": \"1.0.7\",\n \"main\": \"main.js\",\n \"dependencies\": {\n \"angular\": \"^1.6.4\",\n \"ffbinaries\": \"^1.0.1\",\n \"fix-path\": \"^2.1.0\",\n \"jquery\": \"^3.2.1\",\n \"lowdb\": \"^0.16.2\",\n \"which\": \"^1.2.14\"\n }\n}\n" }, { "path": "app/preview.html", "content": "\n\n \n \n GifTuna\n \n \n \n \n ji\n \n\n" }, { "path": "app/renderer.js", "content": "// This file is required by the index.html file and will\n// be executed in the renderer process for that window.\n// All of the Node.js APIs are available in this process.\n\nconst electron = require('electron')\nconst {ipcRenderer} = electron\nconst {dialog} = electron.remote\nconst {shell} = require('electron')\n\nconst url = require('url')\nconst path = require('path')\n\nrequire(\"./lib/minicolors/jquery.minicolors.js\");\n\nglobal.jQuery = global.$ = require('jquery');\nglobal.angular = require('angular');\n\nvar app = angular.module('giftuna',[]);\napp.controller('installFfmpeg',function($scope){\n\n\n $scope.ffmpeg_click = function(){\n shell.openExternal(\"http://ffmpeg.org\");\n }\n $scope.quit = function(){\n electron.remote.app.quit();\n }\n $scope.install = function(){\n $scope.installing=true;\n ipcRenderer.send('install_ffmpeg', {});\n }\n ipcRenderer.on('ffmpeg_installed',function(ev,data){\n console.log('ffmpeg_installed');\n // window.location.href = \"/index.html\";\n $scope.installing=false;\n $scope.$apply();\n });\n //open links externally by default\n // $('a[href^=\"http\"]').on('click',function(event) {\n // console.log(\"A\");\n // event.preventDefault();\n // shell.openExternal(this.href);\n // });\n\n});\napp.controller('gifSettings',function($scope,$filter,$timeout,$rootScope){\n $scope.status = {\n state:0,\n export:{progress:0,size:0,path:null}\n }\n $scope.frames = {\n current:0,\n min:0,\n max:100\n }\n $scope.defaults = {\n file: {\n input:null\n },\n dimensions: {\n original_width:320,\n original_height:240,\n width:320,\n height:240,\n lock:true\n },\n fps:24,\n color: {\n stats_mode:\"diff\",\n diff_mode: \"rectangle\",\n dither:true,\n count: 256,\n dither_scale:3,\n alpha:false\n }\n };\n $scope.settings = angular.copy($scope.defaults);\n $scope.color_value = 256;\n\n $scope.$watch('color_value',function(nv){\n if(nv){\n $scope.settings.color.count = Number(nv);\n }\n });\n $scope.$watch('settings.color.count',function(nv){\n if(nv){\n $scope.color_value = Number(nv);\n }\n })\n\n $scope.settings.dimensions.ratio = $scope.settings.dimensions.original_height/$scope.settings.dimensions.original_width;\n var prom;\n $scope.$watch('frames.current',function(nv,ov){\n if(nv!=ov && $scope.status.state==5){\n $scope.refreshThumbnail();\n }\n });\n $rootScope.$on('colorPaletteChange',function(){\n $scope.refreshThumbnail();\n });\n\n $scope.reveal = function(){\n console.log($scope.status.export.path);\n shell.showItemInFolder($scope.status.export.path);\n }\n $scope.preview = function(){\n window.open(url.format({\n pathname: $scope.status.export.path,\n protocol: 'file:',\n slashes: true\n }));\n }\n $scope.export = function(){\n var base = path.parse($scope.settings.file.input.path);\n var output = path.join(base.dir, base.name+'.gif');\n dialog.showSaveDialog({title:\"Export GIF\", defaultPath: output, buttonLabel:\"Export\"}, function(outputFile){\n console.log(outputFile);\n if(outputFile){\n $scope.status.export = {progress:0, size:0, path:outputFile};\n $scope.status.state = 4;\n\n $scope.$apply();\n ipcRenderer.send('exportGif', $scope.settings.file.input.path, outputFile, $scope.palette, $scope.settings);\n }\n // $rootScope.exportStatus.filepath = file;\n // $rootScope.exportStatus.filename = path.basename(file);\n // $rootScope.exportStatus.status = 1;\n // $rootScope.exportStatus.totalFrames = Math.floor($rootScope.currentSource.stream.duration * $rootScope.prefs.fps);\n // ipcRenderer.send('exportGif', $rootScope.currentSource.source.file.path, file, $rootScope.colorPalette, $rootScope.prefs);\n });\n }\n $scope.cancelExport = function(){\n $scope.status.export.canceling=true;\n ipcRenderer.send('cancel_export', {remove:$scope.status.export.path});\n\n }\n $scope.widthChange = function(){\n if($scope.settings.dimensions.width > 0 && $scope.settings.dimensions.lock){\n var ratio = $scope.settings.dimensions.original_height/$scope.settings.dimensions.original_width;\n $scope.settings.dimensions.height = Math.round($scope.settings.dimensions.width*ratio);\n }\n // if(prom) $timeout.cancel(prom);\n // prom = $timeout(function(){\n // $scope.refreshThumbnail();\n // },2000);\n }\n $scope.heightChange = function(){\n if($scope.settings.dimensions.height > 0 && $scope.settings.dimensions.lock){\n var ratio = $scope.settings.dimensions.original_width/$scope.settings.dimensions.original_height;\n $scope.settings.dimensions.width = Math.round($scope.settings.dimensions.height*ratio);\n }\n\n }\n\n $scope.cancel = function(reset){\n ipcRenderer.send('cancelProcess', {});\n if(reset){\n $scope.status.state=0;\n $scope.settings.file = {input:null};\n $scope.palette = null;\n $scope.thumbnail = null;\n }\n }\n $scope.refreshFps = function(){\n if($scope.stored.fps != $scope.settings.fps){\n //$scope.frames.max = Math.floor($scope.settings.probe.duration * $scope.settings.fps);\n // if($scope.frames.current > $scope.frames.max){\n // $scope.frames.current = $scope.frames.max;\n // }\n $scope.refreshThumbnail();\n }\n }\n $scope.refreshDimension = function(key){\n\n if($scope.stored.dimensions[key] != $scope.settings.dimensions[key]){\n console.log('diff');\n // if(prom) $timeout.cancel(prom);\n // prom = $timeout(function(){\n $scope.refreshThumbnail();\n // },2000);\n }\n }\n $scope.exportDone = function(){\n $scope.status.state=5;\n $scope.status.export = {progress:0, size:0, path:null};\n }\n $scope.refreshPalette = function(){\n $scope.thumbnail = null;\n $scope.palette = null;\n $scope.cancel();\n\n $scope.status.state=2;\n ipcRenderer.send('getPalette', $scope.settings.file.input.path, $scope.settings)\n }\n $scope.refreshThumbnail = function(){\n $scope.thumbnail = null;\n $scope.status.state=3;\n var time = $scope.frames.current;\n ipcRenderer.send('getThumbnail', $scope.settings.file.input.path, $scope.palette, time, $scope.settings)\n }\n ipcRenderer.on('export_canceled',function(ev,progress){\n console.log(\"CANCELED\");\n $scope.status.export.canceling=false;\n $scope.exportDone();\n $scope.$apply();\n });\n ipcRenderer.on('export_progress',function(ev,progress){\n console.log(\"Progress\", progress);\n var p = (progress.sec/$scope.settings.probe.duration)*100;\n $scope.status.export.progress = p;\n $scope.status.export.size = progress.size;\n $scope.$apply();\n });\n ipcRenderer.on('export_finished',function(ev,finalsize){\n console.log(\"DONE!\");\n $scope.status.export.progress = 100;\n $scope.status.export.size = finalsize;\n // $scope.status.state = 5;\n $scope.$apply();\n });\n\n\n ipcRenderer.on('probeResult', (event, probe) => {\n console.log(probe);\n var videoStream = probe.streams.find(function(it){return it.codec_type=='video'; });\n if(!videoStream){\n console.error(\"No video stream found\");\n return;\n }\n\n ;\n\n $scope.frames.max = (Math.floor(videoStream.duration * 10) / 10).toFixed(1) - 0.1; //videoStream ? Math.floor(videoStream.duration * $scope.settings.fps) : 0;\n $scope.settings.probe = {duration:videoStream.duration, rate:(videoStream.r_frame_rate||videoStream.avg_frame_rate)}\n $scope.settings.dimensions.width = videoStream.width;\n $scope.settings.dimensions.height = videoStream.height;\n $scope.settings.dimensions.original_width = videoStream.width;\n $scope.settings.dimensions.original_height = videoStream.height;\n $scope.settings.dimensions.ratio = videoStream.width/videoStream.height;\n\n $scope.settings.fps = parseInt($filter('framerate')((videoStream.r_frame_rate||videoStream.avg_frame_rate), true));\n\n //get thumbnail\n $scope.refreshPalette();\n // $scope.status.state=2;\n // ipcRenderer.send('getPalette', $scope.settings.file.input.path, $scope.settings)\n $scope.$apply();\n });\n ipcRenderer.on('paletteResult', (event, paletteResult) => {\n if($scope.status.state==2){\n $scope.palette = paletteResult;\n $scope.status.state=3;\n var time = $scope.frames.current;\n ipcRenderer.send('getThumbnail', $scope.settings.file.input.path, $scope.palette, time, $scope.settings)\n $scope.$apply();\n }\n });\n ipcRenderer.on('thumbnailResult', (event, thumbnailResult) => {\n $scope.thumbnail = 'data:image/gif;base64,'+thumbnailResult;\n $scope.status.state=5;\n $scope.stored = angular.copy($scope.settings);\n $scope.$apply();\n });\n\n $scope.$watch('settings.file.input',function(nv){\n //reset file input\n if(nv){\n $scope.frames.current=0;\n $scope.status.state=1;\n $scope.palette = null;\n $scope.thumbnail = null;\n $scope.settings.color = angular.copy($scope.defaults.color);\n ipcRenderer.send('probeInput', nv.path)\n }\n });\n});\n\napp.filter('filesize',function(){\n return function(size){\n var i = Math.floor( Math.log(size) / Math.log(1000) );\n return size > 0 ? ( size / Math.pow(1000, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i] : '-';\n }\n})\n\napp.filter('framerate', function(){\n return function(input, suffix){\n if(!input){\n return '-';\n }\n var fr = input.split('/');\n var r = (parseInt(fr[0])/parseInt(fr[1]));\n if(suffix){\n return r+' fps';\n }\n return r;\n //scope.frames = Math.ceil(nv*rate);\n }\n})\n.filter('ratio', function(){\n return function(x){\n\n var tolerance = 1.0E-6;\n var h1=1; var h2=0;\n var k1=0; var k2=1;\n var b = x;\n do {\n var a = Math.floor(b);\n var aux = h1; h1 = a*h1+h2; h2 = aux;\n aux = k1; k1 = a*k1+k2; k2 = aux;\n b = 1/(b-a);\n } while (Math.abs(x-h1/k1) > x*tolerance);\n\n return h1+\":\"+k1;\n\n }\n})\n\napp.directive('inputSelect',function(){\n return {\n require:'ngModel',\n link: function(scope,ele,attr,ngModelCtl){\n var $file = $(\"\");\n $file.on('change',function(e){\n var file = $(this).get(0).files[0];\n console.log(file);\n ngModelCtl.$setViewValue(file);\n ngModelCtl.$render();\n $(this).val('');\n });\n\n ele.on('click',function(e){\n console.log('click');\n $file.trigger('click');\n });\n }\n }\n})\napp.directive('pixelPalette', function($timeout,$rootScope){\nreturn {\n // template:'',\n templateUrl: 'tpl/palette.html',\n require: 'ngModel',\n scope: {\n ngModel:'=',\n maxColors:'='\n },\n link: function(scope,ele,attr,ngModelCtl){\n\n scope.pixels = scope.ngModel ? read_palette(scope.ngModel) : [];\n scope.rgb = {};\n\n scope.$watch('ngModel',function(nv,ov){\n if(nv && nv!=ov){\n scope.pixels = read_palette(nv);\n }\n if(nv==null){\n scope.pixels = [];\n }\n })\n\n // scope.hexPattern = new RegExp(/^0x[0-9A-F]{1,4}$/i);\n ele.find('.hex-input').on('keyup',function(e){\n var regExp = new RegExp(/[0-9A-F]/i);\n var last = $(this).val().substr(-1)\n console.log(last);\n if(!regExp.test(last)){\n console.log(\"NOPE\");\n $(this).val($(this).val().slice(0,-1));\n }\n });\n\n $picker = ele.find('.pixel-picker');\n $mini = ele.find('input.pixel-mini-colors');\n\n $mini.minicolors({\n inline:true,\n format:'rgb',\n change: function(value, opacity) {\n var rgb = $(this).minicolors('rgbObject');\n $timeout(function() {\n // scope.pixels[scope.pixelIndex] = [rgb.r,rgb.g,rgb.b];\n scope.rgb = rgb;\n scope.hexValue = rgb_to_hex(scope.rgb.r,scope.rgb.g,scope.rgb.b);\n });\n }\n });\n\n $picker.appendTo(document.body);\n $picker.on('click',function(e){\n // e.preventDefault();\n e.stopPropagation();\n }).on('mousedown',function(){\n scope.startedIn=true;\n });\n scope.$close = function(){\n $picker.removeClass('open');\n scope.pixelIndex = null;\n scope.rgb = {};\n }\n scope.$set = function(){\n $picker.removeClass('open');\n scope.pixels[scope.pixelIndex] = [scope.rgb.r,scope.rgb.g,scope.rgb.b];\n scope.pixelIndex = null;\n put_palette();\n scope.rgb = {};\n\n }\n scope.pickMe = function(i,e){\n e.preventDefault();\n e.stopPropagation();\n\n var p = $(e.target).offset();\n var color = scope.pixels[i];\n $mini.minicolors('value', \"rgb(\"+color.join(',')+\")\");\n scope.stored = color;\n scope.pixelIndex = i;\n scope.hexValue = rgb_to_hex(color[0],color[1],color[2]);\n\n\n $picker.css('top',p.top+'px').css('left',p.left+'px').addClass('open');\n }\n $(document).on('mouseup',function(e){\n if(!scope.startedIn){\n $picker.removeClass('open');\n scope.pixelIndex = null;\n }\n scope.startedIn=false;\n });\n scope.$color = function(c){\n return {\n 'background-color': \"rgb(\"+c[0]+\",\"+c[1]+\",\"+c[2]+\")\"\n }\n }\n\n function put_palette(){\n if(scope.pixels.length>0){\n var canvas_copy = document.createElement('canvas');\n var ctx_copy = canvas_copy.getContext('2d');\n\n var idata = ctx_copy.getImageData(0,0,16,16);\n for(var i=0;i{{params.value}}s
    {{params.max+0.1}}s
    ',\n require: 'ngModel',\n link: function(scope,ele,attr,ngModelCtl){\n scope.params = {value:0};\n var $input = $(ele).find('input');\n scope.$watch('ngModel',function(nv,ov){\n if(nv!=ov){\n scope.params.value = nv;\n }\n });\n scope.$watch('frames',function(nv){\n console.log('frame change', nv);\n if(nv){\n scope.params.max = nv;\n $input.attr('max',nv);\n }\n });\n $input.on('change',function(e){\n console.log('change!');\n ngModelCtl.$setViewValue(scope.params.value);\n ngModelCtl.$render();\n });\n }\n }\n})\napp.directive('gifPreview',function(){\n return {\n // template: '
    ',\n template: '',\n link: function(scope,ele,attr){\n scope.preview_scale = 1;\n // $(ele).on('resize',function(e){\n console.log($(ele).find('.preview-wrap').width());\n // var aspect = scope.settings.dimensions.height/scope.settings.dimensions.width;\n // });\n scope.$previewStyle = function(){\n\n return {\n 'background-image':'url('+scope.thumbnail+')',\n 'max-width':scope.settings.dimensions.width+'px',\n 'max-height':scope.settings.dimensions.height+'px'\n // 'height': (scope.settings.dimensions.height/scope.settings.dimensions.width)*100 + 'vw'\n };\n\n // console.log($(ele).width());\n // if($(ele).width() < scope.settings.dimensions.width || $(ele).height() < scope.settings.dimensions.height){\n // return {\n // 'width':'100%',\n // 'max-width':scope.settings.dimensions.width+'px',\n // 'max-height':scope.settings.dimensions.height+'px',\n // 'padding-bottom': (scope.settings.dimensions.height/scope.settings.dimensions.width)*100 + '%'\n // }\n // }else{\n // return {\n // 'max-width':scope.settings.dimensions.width+'px',\n // 'max-height':scope.settings.dimensions.height+'px',\n // 'padding-bottom': (scope.settings.dimensions.height/scope.settings.dimensions.width)*100 + '%'\n // // 'height':scope.settings.dimensions.height+'px'\n // }\n // }\n\n }\n }\n }\n})\n" }, { "path": "app/tpl/loader.html", "content": "\n" }, { "path": "app/tpl/palette.html", "content": "
    \n
    \n \n
    \n
    \n
    \n Cancel\n Ok\n
    \n\n
    \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n
    \n\n
    \n" }, { "path": "package.json", "content": "{\n \"name\": \"gif-tuna\",\n \"version\": \"1.0.7\",\n \"description\": \"A modern cross-platform video to gif converter\",\n \"scripts\": {\n \"postinstall\":\"npm --prefix ./app install ./app\",\n \"start\": \"electron ./app/\",\n \"build_mac\": \"electron-packager ./app GifTuna --ignore=.gitignore --platform=darwin --icon=./resources/logo-hires-v2.icns --out=./build/mac/ --overwrite\",\n \"build_win\": \"electron-packager ./app GifTuna --platform=win32 --icon=./resources/logo-hires-v2.iconset --out=./build/win/ --overwrite\",\n \"build_linux\": \"electron-packager ./app GifTuna --platform=linux --icon=./resources/logo-hires-v2-256x256@2x.png --out=./build/linux/ --overwrite\",\n \"build_all\":\"npm run build_mac && npm run build_win && npm run build_linux\"\n },\n \"author\": \"brian@ndmweb.com (@dudewheresmycode)\",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"electron\": \"~1.6.2\",\n \"electron-packager\": \"^8.7.1\"\n }\n}\n" } ]