Repository: dudewheresmycode/GifTuna
Branch: master
Commit: a84e275c19c6
Files: 28
Total size: 133.5 KB
Directory structure:
gitextract__rhz70sy/
├── .gitignore
├── README.md
├── app/
│ ├── .gitignore
│ ├── LICENSE.md
│ ├── README.md
│ ├── css/
│ │ ├── slider.css
│ │ └── style.css
│ ├── ffmpeg.html
│ ├── index.html
│ ├── lib/
│ │ └── minicolors/
│ │ ├── LICENSE.md
│ │ ├── README.md
│ │ ├── bower.json
│ │ ├── component.json
│ │ ├── composer.json
│ │ ├── gulpfile.js
│ │ ├── index.html
│ │ ├── jquery.minicolors.css
│ │ ├── jquery.minicolors.js
│ │ ├── package.json
│ │ └── without-bootstrap.html
│ ├── main.js
│ ├── package.json
│ ├── preview.html
│ ├── renderer.js
│ └── tpl/
│ ├── loader.html
│ └── palette.html
├── package.json
└── resources/
└── logo-hires-v2.icns
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules/
app/node_modules
.DS_Store
build/
================================================
FILE: README.md
================================================
# GifTuna
A gif tuning application for Mac, Windows and Linux.
================================================
FILE: app/.gitignore
================================================
node_modules
================================================
FILE: app/LICENSE.md
================================================
CC0 1.0 Universal
==================
Statement of Purpose
---------------------
The 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").
Certain 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.
For 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.
1. Copyright and Related Rights.
--------------------------------
A 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:
i. the right to reproduce, adapt, distribute, perform, display, communicate, and translate a Work;
ii. moral rights retained by the original author(s) and/or performer(s);
iii. publicity and privacy rights pertaining to a person's image or likeness depicted in a Work;
iv. rights protecting against unfair competition in regards to a Work, subject to the limitations in paragraph 4(a), below;
v. rights protecting the extraction, dissemination, use and reuse of data in a Work;
vi. 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
vii. other similar, equivalent or corresponding rights throughout the world based on applicable law or treaty, and any national implementations thereof.
2. Waiver.
-----------
To 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.
3. Public License Fallback.
----------------------------
Should 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.
4. Limitations and Disclaimers.
--------------------------------
a. No trademark or patent rights held by Affirmer are waived, abandoned, surrendered, licensed or otherwise affected by this document.
b. 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.
c. 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.
d. 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.
================================================
FILE: app/README.md
================================================
# electron-quick-start
**Clone and run for a quick way to see Electron in action.**
This is a minimal Electron application based on the [Quick Start Guide](http://electron.atom.io/docs/tutorial/quick-start) within the Electron documentation.
**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.**
A basic Electron application needs just these files:
- `package.json` - Points to the app's main file and lists its details and dependencies.
- `main.js` - Starts the app and creates a browser window to render HTML. This is the app's **main process**.
- `index.html` - A web page to render. This is the app's **renderer process**.
You can learn more about each of these components within the [Quick Start Guide](http://electron.atom.io/docs/tutorial/quick-start).
## To Use
To 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:
```bash
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
```
Note: 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.
## Resources for Learning Electron
- [electron.atom.io/docs](http://electron.atom.io/docs) - all of Electron's documentation
- [electron.atom.io/community/#boilerplates](http://electron.atom.io/community/#boilerplates) - sample starter apps created by the community
- [electron/electron-quick-start](https://github.com/electron/electron-quick-start) - a very basic starter Electron app
- [electron/simple-samples](https://github.com/electron/simple-samples) - small applications with ideas for taking them further
- [electron/electron-api-demos](https://github.com/electron/electron-api-demos) - an Electron app that teaches you how to use Electron
- [hokein/electron-sample-apps](https://github.com/hokein/electron-sample-apps) - small demo apps for the various Electron APIs
## License
[CC0 1.0 (Public Domain)](LICENSE.md)
================================================
FILE: app/css/slider.css
================================================
input[type=range] {
-webkit-appearance: none;
width: 100%;
}
input[type=range]:disabled {
opacity: 0.5;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 90%;
height: 10px;
cursor: pointer;
background: #222;
}
input[type=range]::-webkit-slider-thumb {
width: 18px;
height: 18px;
background-color: #EE6352;
/*background-image:url('../svg/slider.svg');*/
background-repeat: no-repeat;
background-size: contain;
border-radius: 20px;
/*border-top: 10px solid red;*/
/*border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #fff;*/
/*border-radius: 28px;*/
/*background: #ffffff;*/
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #333;
}
================================================
FILE: app/css/style.css
================================================
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 13px;
background-color: #161516;
color: #eee;
margin: 0;
-webkit-user-select: none;
}
hr {
background: none;
border: 0;
height: 10px;
}
a {
color: #eee;
text-decoration: underline;
}
a:hover {
color: #fff;
}
a.btn {
background-color: #3A393B;
padding: 7px 15px;
cursor: pointer;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
a.disabled,
a.btn.disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
a.btn.disabled:hover {
cursor: not-allowed;
}
a.btn:hover {
background-color: #555;
}
a.btn:active {
background-color: #333;
}
a.btn.btn-primary {
color: #3A393B;
background-color: #EE6352;
}
a.btn.btn-primary:hover {
background-color: #F49B90;
}
a.btn.btn-small {
font-size: 12px;
padding: 5px 10px;
}
.app {
display: flex;
flex-direction: row;
height: 100vh;
}
.app .section {
height: 100vh;
}
.app .section .section-title {
border-bottom: 1px solid #444;
padding: 7px 0;
font-weight: normal;
font-size: 12px;
color: #aaa;
margin: 20px 0 10px 0;
/*font-size: 14px;
font-weight: normal;
border-bottom: 1px solid #444;
padding-bottom: 10px;*/
}
.app .section .section-title:first-child {
margin-top: 10px;
}
.app .section.settings-form {
flex: 0;
min-width: 280px;
background: #1a1a1a;
padding: 0 20px;
overflow: auto;
box-shadow: 0px 0px 15px rgba(0,0,0,0.45);
}
.app .section.preview {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.top-header {
flex: 0 1 auto;
padding: 20px;
text-align: right;
background: #1a1a1a;
display: flex;
flex-direction: row;
box-shadow: 0px 0px 15px rgba(0,0,0,0.45);
/*border-bottom: 1px solid #000;*/
}
.top-header .scrubber {
flex: 1 1 auto;
padding-right: 20px;
display: flex;
flex-direction: row;
}
.top-header .scrubber .scrubber-frame {
flex: 0 0 auto;
min-width: 30px;
text-align: center;
}
.top-header .scrubber .scrubber-bar {
flex: 1 1 auto;
padding: 0 10px;
}
.top-header .scrubber input {
width: 100%;
}
.top-header .export {
flex: 0 0 auto;
min-width: 100px;
}
.progress-canvas {
flex: 1 1 auto;
justify-content: center;
display: flex;
flex-direction: column;
}
.progress-canvas .progress-canvas-container {
width: 80%;
text-align: center;
padding: 20px;
margin: -100px auto 0 auto;
/*background: #333;*/
/*box-shadow: 1px 1px 3px rgba(0,0,0,0.35);*/
}
.progress-canvas h4 {
margin: 20px 0 0 0;
padding: 0;
}
.progress-canvas p {
color: #aaa;
}
.progress-canvas .spinner-icon {
display: block;
}
.progress-canvas .spinner-icon svg {
width: 70px;
height: 70px;
}
.preview-canvas {
/*height: 100%;*/
flex: 1 1 auto;
justify-content: center;
align-items: center;
display: flex;
overflow: auto;
/*justify-content: center;*/
/*align-items: center;*/
/*align-content: center;*/
}
.preview-img {
min-width: 320px;
min-height: 240px;
width: 100%;
height: auto;
box-shadow: 1px 0px 5px rgba(0,0,0,0.5);
}
.preview-canvas .preview-div {
display: flex;
flex: 1 1 auto;
background: #aaa;
width: 100%;
height: 100%;
min-width: 320px;
min-height: 240px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: relative;
margin: auto;
}
/*
.preview-canvas .preview-wrap {
width: 100%;
max-width:100%;
height:auto;
}
.preview-canvas .preview-wrap .preview-div {
display: block;
margin: auto;
position: relative;
background-size: contain;
background-repeat: no-repeat;
}*/
.palette-control {
/*padding: 10px;*/
width: 100%;
/*padding-bottom: 100%;*/
position: relative;
margin-top: 15px;
/*background: #191919;*/
/*box-shadow: inset 1px 1px 20px #101010;*/
}
.palette-control:after {
content: "";
display: block;
padding-bottom: 100%;
}
.palette-control .palette {
position: absolute;
top:0;
left: 0;
width: 100%;
image-rendering: pixelated;
}
input[type="text"],
input[type="number"] {
background: #333;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 12px;
color: #fff;
padding: 5px;
border: 0;
}
input[type="number"] {
width: 45px;
}
input[type="text"]:disabled,
input[type="number"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.custom-select {
display: inline-block;
position: relative;
background: #333;
}
.custom-select.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.custom-select:after {
position: absolute;
display: block;
content: '';
width: 0;
height: 0;
top:50%;
right:7px;
margin-top: -2px;
border-top: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
pointer-events: none;
}
.custom-select select {
font-size: 12px;
outline: none;
-webkit-appearance:none;
background-color: transparent;
min-width: 40px;
padding: 5px 25px 5px 5px;
border: 0;
border-radius: 0;
color: #fff;
}
.custom-range {
display: flex;
flex-direction: row;
}
.custom-range .custom-range-value {
flex: 0;
margin-right: 10px;
font-size: 11px;
/*min-width: 20px;*/
}
.custom-range .custom-range-input {
flex: 1;
}
.form-group {
margin: 0;
vertical-align: top;
}
.form-group:last-child {
margin: 0;
}
.form-group.form-group-inline {
display: inline-block;
margin-right: 20px;
}
.form-group .form-control {
min-height: 30px;
line-height: 30px;
}
.form-group h5 {
font-size: 11px;
font-weight: normal;
color: #aaa;
margin: 10px 0;
padding: 0;
/*text-transform: uppercase;*/
/*letter-spacing: 1px;*/
}
h6 {
border-bottom: 1px solid #444;
padding: 10px 0;
font-weight: normal;
font-size: 11px;
color: #aaa;
margin: 0;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: transparent;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
}
::-webkit-scrollbar-thumb {
background-color: #323232;
border: none;
outline: none;
/*outline: 1px solid slategrey;*/
border-radius: 20px;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
.input {
display: block;
}
.input .change-it {
display: none;
}
.input:hover .change-it {
display: inline-block;
color: #aaa;
margin-left: 5px;
}
.install {
width: 80%;
max-width: 800px;
margin: 80px auto;
background: #111;
padding: 30px;
}
.install p {
font-size: 14px;
line-height: 1.5;
}
.pixel-palette {
width: 100%;
display: block;
position: relative;
}
.pixel-picker {
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 999;
background: #2a2a2a;
padding: 20px;
/*margin-top: 36px;*/
/*margin-left: -7px;*/
margin-top: -266px;
margin-left: -7px;
}
.pixel-picker:after {
position: absolute;
content:'';
bottom: -19px;
left: 0px;
border-top: 20px solid #2a2a2a;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.minicolors-panel {
height: 152px;
}
.pixel-picker.open {
display: block;
}
.pixel-picker .hex-control {
display: flex;
padding: 5px 0;
flex-direction: row;
}
.pixel-picker .hex-control .hex-input-wrapper {
flex: 0;
}
.pixel-picker .hex-control .color-preview {
flex: 1;
height: 24px;
display: block;
}
.pixel-picker .hex-control input {
width: 50px;
font-family: monospace;
font-size: 12px;
text-align: center;
}
.pixel-picker .picker-actions {
padding: 0 0 10px 0px;
}
.pixel-picker .picker-control {
display: block;
clear: both;
}
.pixel-palette .pixel {
width: 17.5px;
height: 17.5px;
float: left;
}
.pixel-palette .pixel:hover,
.pixel-palette .pixel.on {
box-shadow: 1px 1px 5px #000;
transform: scale(1.5);
}
.progress {
height: 20px;
width: 50vw;
position: relative;
background: #101010;
margin: 0 auto;
}
.progress .progress-fill {
height: 20px;
background: #46CCF3;
position: relative;
}
.progress .progress-fill.finished {
background-color: #57A773;
}
/* Styles go here */
.progress .progress-fill.spin {
/*width: 300px;
height: 50px;*/
width: 100% !important;
opacity: 0.5;
background-image: repeating-linear-gradient(-45deg, #101010, #101010 25px, #46CCF3 25px, #46CCF3 50px);
-webkit-animation:progress 1s linear infinite;
-moz-animation:progress 1s linear infinite;
-ms-animation:progress 1s linear infinite;
animation:progress 1s linear infinite;
background-size: 150% 100%;
}
@-webkit-keyframes progress{
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@-moz-keyframes progress{
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@-ms-keyframes progress{
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@keyframes progress{
0% {
background-position: 0 0;
}
100% {
background-position: -70px 0px;
}
}
.progress-info {
display: flex;
flex-direction: row;
width: 50vw;
margin: 0 auto;
}
.progress-text {
padding: 10px 0;
margin: 10px 0;
font-size: 14px;
flex: 1;
color: #aaa;
}
.progress-text.finished {
color: #57A773;
}
.progress-action {
padding: 10px 0;
margin: 10px 0;
flex: 1;
text-align: right;
}
.progress-action a {
margin-right: 10px;
}
.progress-action a.btn {
margin-right: 0;
}
.progress-text-percent {
font-weight: bold;
display: inline-block;
color: #fff;
}
.progress-text-size {
font-size: 11px;
margin-left: 5px;
display: inline-block;
}
================================================
FILE: app/ffmpeg.html
================================================
<!DOCTYPE html>
<html ng-app="giftuna">
<head>
<meta charset="UTF-8">
<title>GifTuna</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slider.css" />
</head>
<body ng-controller="installFfmpeg" ng-cloak>
<div class="install">
<h3>Download & Install FFmpeg</h3>
<p>
GifTuna uses <a ng-click="ffmpeg_click()" href>ffmpeg</a> under the hood to convert to gif format. Don't fret, we can download this libary for you.
</p>
<p> </p>
<div ng-if="!installing">
<p>
<a ng-click="quit()" class="btn">Quit</a>
<a ng-click="install()" class="btn btn-primary">Download & Install</a>
</p>
</div>
<div ng-if="installing">
<p>
<div ng-include="'tpl/loader.html'"></div> Installing ffmpeg...
</p>
</div>
</div>
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>
================================================
FILE: app/index.html
================================================
<!DOCTYPE html>
<html ng-app="giftuna">
<head>
<meta charset="UTF-8">
<title>GifTuna</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slider.css" />
<link rel="stylesheet" href="lib/minicolors/jquery.minicolors.css" />
</head>
<body ng-controller="gifSettings" ng-cloak>
<div class="app">
<div class="section settings-form">
<h3 class="section-title">Input File</h3>
<div class="form-group">
<div class="form-control">
<a ng-if="!settings.file.input" class="btn" ng-model="settings.file.input" input-select>Select File</a>
<a ng-if="settings.file.input" ng-class="{disabled:status.state>0&&status.state<5}" class="input" href ng-model="settings.file.input" input-select>
{{settings.file.input.name}}<span class="change-it">Change</span>
</a>
</div>
</div>
<h3 class="section-title">Output Options</h3>
<div class="form-group form-group-inline">
<h5>Dimensions</h5>
<div class="form-control">
<input type="number" ng-disabled="status.state<5" ng-model="settings.dimensions.width" ng-blur="refreshDimension('width')" ng-change="widthChange()" min="1" />
×
<input type="number" ng-disabled="status.state<5" ng-model="settings.dimensions.height" ng-blur="refreshDimension('height')" ng-change="heightChange()" min="1" />
</div>
</div>
<div class="form-group form-group-inline">
<h5>Lock Aspect</h5>
<div class="form-control">
<label><input type="checkbox" ng-disabled="status.state<5" ng-model="settings.dimensions.lock" /> {{settings.dimensions.ratio|ratio}}</label>
</div>
</div>
<div class="form-group">
<h5>FPS</h5>
<div class="form-control">
<input type="number" ng-disabled="status.state<5" ng-blur="refreshFps()" ng-model="settings.fps" />
</div>
</div>
<!-- <h6>Color Options</h6> -->
<h3 class="section-title">Dither Options</h3>
<div class="form-group form-group-inline">
<h5>Dither</h5>
<div class="form-control">
<label><input type="checkbox" ng-disabled="status.state<5" ng-model="settings.color.dither" ng-change="refreshThumbnail()" /> {{settings.color.dither?'Yes':'No'}}</label>
</div>
</div>
<div class="form-group form-group-inline">
<h5>Dither Grid</h5>
<div class="custom-select" ng-class="{disabled:!settings.color.dither||status.state<5}">
<select ng-model="settings.color.dither_scale" ng-change="refreshThumbnail()" ng-disabled="!settings.color.dither||status.state<5">
<option ng-value="0">0</option>
<option ng-value="1">1</option>
<option ng-value="2">2</option>
<option ng-value="3">3</option>
<option ng-value="4">4</option>
<option ng-value="5">5</option>
</select>
</div>
</div>
<div class="form-group form-group-inline">
<h5>Palette Mode</h5>
<div class="custom-select" ng-class="{disabled:status.state<5}">
<select ng-change="refreshPalette()" ng-disabled="status.state<5" ng-model="settings.color.stats_mode">
<option value="full">Full</option>
<option value="diff">Frame Difference</option>
</select>
</div>
<!-- <div class="form-control">
<label>
<input type="radio" ng-model="settings.color.stats_mode" value="full" /> Full
</label>
<label>
<input type="radio" ng-model="settings.color.stats_mode" value="diff" /> Diff
</label>
</div> -->
</div>
<div class="form-group form-group-inline">
<h5>Stats Mode</h5>
<div class="custom-select" ng-class="{disabled:status.state<5}">
<select ng-change="refreshPalette()" ng-disabled="status.state<5" ng-model="settings.color.diff_mode">
<option value="rectangle">Rectangle</option>
<option value="none">None</option>
</select>
</div>
</div>
<h3 class="section-title">Color Palette</h3>
<div class="form-group">
<h5>Colors</h5>
<div class="form-control">
<div class="custom-range">
<div class="custom-range-value"><input type="number" ng-disabled="status.state<5" min="16" max="256" ng-blur="refreshPalette()" ng-model="color_value" /></div>
<div class="custom-range-input">
<input type="range" min="16" step="2" max="256" ng-disabled="status.state<5" ng-mouseup="refreshPalette()" ng-model="settings.color.count" />
</div>
</div>
</div>
<!-- </div> -->
<!-- <div class="form-group"> -->
<!-- <h5>Color Palette</h5> -->
<div class="form-control palette-control">
<div pixel-palette ng-model="palette" data-max-colors="settings.color.count"></div>
</div>
</div>
<!-- <pre>{{frames|json}}</pre>
<pre>{{settings|json}}</pre> -->
</div>
<div class="section preview">
<div class="top-header">
<div class="scrubber" frame-scrubber data-frames="frames.max" data-disabled="status.state<5" ng-model="frames.current"></div>
<div class="export">
<a ng-class="{disabled:status.state<5}" ng-click="export()" class="btn btn-primary">Export</a>
</div>
</div>
<!-- <h3 class="section-title">Preview</h3> -->
<div class="progress-canvas" ng-if="status.state==4">
<div class="progress">
<div class="progress-fill" ng-class="{finished:status.export.progress==100, spin:status.export.canceling}" ng-style="{width:status.export.progress+'%'}"></div>
</div>
<div class="progress-info">
<div class="progress-text" ng-class="{finished:status.export.progress==100}">
<span class="progress-text-percent" ng-show="status.export.progress<100&&!status.export.canceling">{{status.export.progress|number:1}}%</span>
<span ng-if="status.export.progress==100">Complete</span>
<span ng-if="status.export.canceling">Canceling</span>
<span class="progress-text-size">{{status.export.size|filesize}} <span ng-show="status.export.progress<100">written</span></span>
</div>
<div class="progress-action">
<div ng-show="status.export.progress<100">
<a class="btn" href ng-click="cancelExport()">Cancel</a>
</div>
<div ng-show="status.export.progress==100">
<a class="btn" href ng-click="reveal()">Show in folder</a>
<a class="btn" href ng-click="preview()">Preview</a>
<a class="btn btn-primary" href ng-click="exportDone()">Done</a>
</div>
</div>
</div>
<!-- <pre>{{status|json}}</pre> -->
</div>
<div class="progress-canvas" ng-if="status.state > 0 && status.state < 4">
<div class="progress-canvas-container">
<div ng-include="'tpl/loader.html'"></div>
<div class="progress-palette" ng-if="status.state==1">
<h4>Scanning Input</h4>
</div>
<div class="progress-palette" ng-if="status.state==2">
<h4>Generating Color Palette</h4>
<p>This could take a while for longer gifs...</p>
<hr />
<p><a ng-click="cancel(true)" class="btn">Cancel</a></p>
</div>
<div class="progress-palette" ng-if="status.state==3">
<h4>Generating Preview</h4>
</div>
</div>
</div>
<div class="preview-canvas" ng-if="status.state==5">
<img class="preview-img" ng-if="thumbnail!=null" ng-src="{{thumbnail}}" ng-style="{'max-width':settings.dimensions.width+'px'}" />
</div>
<!-- <div class="preview-canvas" gif-preview></div> -->
</div>
</div>
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>
================================================
FILE: app/lib/minicolors/LICENSE.md
================================================
Copyright 2017 A Beautiful Site, LLC
Permission 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:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE 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.
================================================
FILE: app/lib/minicolors/README.md
================================================
# jQuery MiniColors: A tiny color picker built on jQuery
Developed by Cory LaViska for A Beautiful Site, LLC
Licensed under the MIT license: http://opensource.org/licenses/MIT
## Demo & Documentation
http://labs.abeautifulsite.net/jquery-minicolors/
## Install via NPM
This is the official NPM version of MiniColors:
```
npm install --save @claviska/jquery-minicolors
```
**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.
================================================
FILE: app/lib/minicolors/bower.json
================================================
{
"name": "jquery-minicolors",
"version": "2.2.6",
"homepage": "https://github.com/claviska/jquery-minicolors",
"authors": [
"Cory LaViska"
],
"description": "jQuery MiniColors Plugin",
"main": [
"./jquery.minicolors.js",
"./jquery.minicolors.css"
],
"keywords": [
"jquery",
"colorpicker"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
================================================
FILE: app/lib/minicolors/component.json
================================================
{
"name": "jquery-minicolors",
"version": "2.2.6",
"description": "jQuery MiniColors Plugin",
"homepage": "",
"main": [ "./jquery.minicolors.js", "./jquery.minicolors.css" ],
"dependencies": {
"jquery": ">= 1.7.x"
},
"keywords": [
"jquery",
"colorpicker"
],
"author": {
"name": "Cory LaViska",
"web": "http://www.abeautifulsite.net/"
},
"license": [
"http://www.opensource.org/licenses/mit-license.php"
]
}
================================================
FILE: app/lib/minicolors/composer.json
================================================
{
"name": "abeautifulsite/jquery-minicolors",
"type": "component",
"description": "jQuery MiniColors Plugin",
"homepage": "http://www.abeautifulsite.net/",
"license": "MIT",
"extra": {
"component": {
"scripts": [
"jquery.minicolors.js"
],
"files": [
"jquery.minicolors.js",
"jquery.minicolors.min.js",
"jquery.minicolors.css",
"jquery.minicolors.png"
]
}
}
}
================================================
FILE: app/lib/minicolors/gulpfile.js
================================================
/* eslint-env node, es6 */
'use strict';
const gulp = require('gulp-help')(require('gulp'));
const del = require('del');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
// Clean
gulp.task('clean', 'Clean up!', () => {
return del('jquery.minicolors.min.js');
});
// Minify
gulp.task('minify', 'Minify it!', ['clean'], () => {
return gulp.src('jquery.minicolors.js')
.pipe(uglify({
preserveComments: 'license'
}))
.on('error', (err) => {
console.error(err);
this.emit('end');
})
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(__dirname));
});
// Watch for changes
gulp.task('watch', 'Watch for changes!', () => {
gulp.watch('jquery.minicolors.js', ['minify']);
});
// Default
gulp.task('default', 'The default task.', ['watch']);
================================================
FILE: app/lib/minicolors/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<title>jQuery MiniColors</title>
<meta charset="utf-8">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- MiniColors -->
<script src="jquery.minicolors.js"></script>
<link rel="stylesheet" href="jquery.minicolors.css">
<style>
dl {
margin: 20px 0;
}
dt {
font-size: 120%;
}
dd {
padding: 10px 20px 20px 20px;
}
dd:last-child {
border-bottom: none;
}
code {
color: black;
border: none;
background: rgba(128, 128, 128, .1);
}
pre {
background: #f8f8f8;
border: none;
color: #333;
padding: 20px;
}
h2 {
margin-top: 50px;
}
h3 {
color: #aaa;
}
.jumbotron {
padding: 40px;
}
.jumbotron h1 {
margin-top: 0;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
</style>
<script>
$(document).ready( function() {
$('.demo').each( function() {
//
// Dear reader, it's actually very easy to initialize MiniColors. For example:
//
// $(selector).minicolors();
//
// The way I've done it below is just for the demo, so don't get confused
// by it. Also, data- attributes aren't supported at this time...they're
// only used for this demo.
//
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
format: $(this).attr('data-format') || 'hex',
keywords: $(this).attr('data-keywords') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(value, opacity) {
if( !value ) return;
if( opacity ) value += ', ' + opacity;
if( typeof console === 'object' ) {
console.log(value);
}
},
theme: 'bootstrap'
});
});
});
</script>
</head>
<body>
<div class="row" style="margin: 40px 40px;">
<div class="col-12">
<!-- Intro -->
<div id="intro" class="jumbotron">
<h1>jQuery MiniColors</h1>
<p class="text-muted">
Now with Bootstrap 3 support!
</p>
<p>
A project by <a href="http://www.abeautifulsite.net/">A Beautiful Site</a>,
originally developed for <a href="http://www.surrealcms.com/">Surreal CMS</a>.
</p>
</div>
<!-- Contents -->
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#download">Download</a></li>
<li><a href="#demos">Demos</a></li>
<li><a href="#api">API</a>
<ul>
<li><a href="#instantiation">Instantiation</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#events">Events</a></li>
</ul>
</li>
<li><a href="#license">License</a></li>
</ul>
<!-- Download -->
<h2 id="download">Download</h2>
<p>
This project is on GitHub. Feel free to post bug reports, feature requests, and code
improvements on the official project page.
</p>
<p>
<a href="https://github.com/claviska/jquery-minicolors" class="btn btn-success">Download on GitHub</a>
</p>
<!-- Demos -->
<h2 id="demos">Demos</h2>
<p>
This is the main demo page, which uses <a href="http://getbootstrap.com/">Bootstrap 3</a>,
but this plugin works without Bootstrap as well.
</p>
<p>
<a href="without-bootstrap.html" class="btn btn-primary">View Demo Without Bootstrap</a>
</p>
<!-- Control types -->
<h3>Control Types</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="hue-demo">Hue (default)</label>
<input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
</div>
<div class="form-group">
<label for="saturation-demo">Saturation</label>
<input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="brightness-demo">Brightness</label>
<input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
</div>
<div class="form-group">
<label for="wheel-demo">Wheel</label>
<input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
</div>
</div>
</div>
</div>
<!-- Input modes -->
<h3>Input Modes</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="text-field">Text field</label>
<br>
<input type="text" id="text-field" class="form-control demo" value="#70c24a">
</div>
<div class="form-group">
<label for="hidden-input">Hidden Input</label>
<br>
<input type="hidden" id="hidden-input" class="demo" value="#db913d">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="inline">Inline</label>
<br>
<input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
</div>
</div>
</div>
</div>
<!-- Positions -->
<h3>Positions</h3>
<div class="well">
<p>
Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
left</code>, and <code>top right</code>.
</p>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="position-bottom-left">bottom left (default)</label>
<input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc">
</div>
<div class="form-group">
<label for="position-top-left">top left</label>
<input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="position-bottom-right">bottom right</label>
<input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc">
</div>
<div class="form-group">
<label for="position-top-right">top right</label>
<input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
</div>
</div>
</div>
<!-- RGB(A) -->
<h3>RGB(A)</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="rgb">RGB</label>
<br>
<input type="text" id="rgb" class="form-control demo" data-format="rgb" value="rgb(33, 147, 58)">
<span class="help-block">
RGB input can be assigned by setting the <code>format</code> option
to <code>rgb</code>.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="rgba">RGBA</label>
<br>
<input type="text" id="rgba" class="form-control demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
<span class="help-block">
RGBA input can be assigned by setting the <code>format</code>
option to <code>rgb</code> and <code>opacity</code> option to
<code>true</code>.
</span>
</div>
</div>
</div>
</div>
<!-- and more -->
<h3>…and more!</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="opacity">Opacity</label>
<br>
<input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8">
<span class="help-block">
Opacity can be assigned by including the <code>data-opacity</code>
attribute or by setting the <code>opacity</code> option to
<code>true</code>.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="keywords">Keywords</label>
<br>
<input type="text" id="keywords" class="form-control demo" data-keywords="transparent, initial, inherit" value="transparent">
<span class="help-block">
CSS-wide keywords can be assigned by setting the <code>keywords</code>
option to a comma-separated list of valid keywords: <code>transparent,
initial, inherit</code>.
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="default-value">Default Value</label>
<br>
<input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600">
<span class="help-block">
This field has a default value assigned to it, so it will never be empty.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="letter-case">Letter Case</label>
<br>
<input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef">
<span class="help-block">
This field will always be uppercase.
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="input-group">Input Groups</label>
<div class="input-group">
<input type="text" id="input-group" class="form-control demo" value="#ff0000"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
<span class="help-block">
Example using Bootstrap's input groups.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="more-input-group">More Input Groups</label>
<div class="input-group">
<span class="input-group-addon">Color</span>
<input type="text" id="more-input-group" class="form-control demo" value="#ff0000"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
<span class="help-block">
Input group example with addon.
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="letter-case">Swatches</label>
<br>
<input type="text" id="swatches" class="form-control demo" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" value="#abcdef">
<span class="help-block">
Example with swatches.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="letter-case">Swatches and opacity</label>
<br>
<input type="text" id="swatches" class="form-control demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="rgba(14, 206, 235, .5)">
<span class="help-block">
Example with swatches and opacity.
</span>
</div>
</div>
</div>
</div>
<!-- API -->
<h2 id="api">API</h2>
<!-- Instantiation -->
<h3 id="instantiation">Instantiation</h3>
<p>
Instantiate like any other jQuery plugin:
</p>
<pre>$('INPUT.minicolors').minicolors(settings);</pre>
<!-- Settings -->
<h3 id="settings">Settings</h3>
<p>
Default settings are as follows:
</p>
<pre>
$.minicolors = {
defaults: {
animationSpeed: 50,
animationEasing: 'swing',
change: null,
changeDelay: 0,
control: 'hue',
defaultValue: '',
format: 'hex',
hide: null,
hideSpeed: 100,
inline: false,
keywords: '',
letterCase: 'lowercase',
opacity: false,
position: 'bottom left',
show: null,
showSpeed: 100,
theme: 'default',
swatches: []
}
};
</pre>
<p>
For convenience, you can change default settings globally by assigning new values:
</p>
<pre>
$.minicolors.defaults.changeDelay = 200;
</pre>
<p>
To change multiple properties at once, use <code>$.extend()</code>:
</p>
<pre>
$.minicolors.defaults = $.extend($.minicolors.defaults, {
changeDelay: 200,
letterCase: 'uppercase',
theme: 'bootstrap'
});
</pre>
<p class="alert alert-warning">
<strong>Note:</strong> Changing default settings will <em>not</em> affect controls that
are already initialized.
</p>
<dl>
<dt>animationSpeed</dt>
<dd>
<p>
The animation speed of the sliders when the user taps or clicks a new color. Set to
<code>0</code> for no animation.
</p>
</dd>
<dt>animationEasing</dt>
<dd>
<p>
The easing to use when animating the sliders.
</p>
</dd>
<dt>changeDelay</dt>
<dd>
<p>
The time, in milliseconds, to defer the <code>change</code> event from firing while
the user makes a selection. This is useful for preventing the <code>change</code> event
from firing frequently as the user drags the color picker around.
</p>
<p>
The default value is <code>0</code> (no delay). If your <code>change</code> callback
features something resource-intensive (such as an AJAX request), you’ll probably want
to set this to at least <code>200</code>.
</p>
</dd>
<dt>control</dt>
<dd>
<p>
Determines the type of control. Valid options are <code>hue</code>, <code>brightness</code>,
<code>saturation</code>, and <code>wheel</code>.
</p>
</dd>
<dt>defaultValue</dt>
<dd>
<p>
To force a default color, set this to a valid hex string. When the user clears the
control, it will revert to this color.
</p>
</dd>
<dt>format</dt>
<dd>
<p>
The format miniColors should use. Valid options are <code>hex</code> and
<code>rgb</code>.
</p>
</dd>
<dt>hideSpeed & showSpeed</dt>
<dd>
<p>
The speed at which to hide and show the color picker.
</p>
</dd>
<dt>inline</dt>
<dd>
<p>
Set to <code>true</code> to force the color picker to appear inline.
</p>
</dd>
<dt>keywords</dt>
<dd>
<p>
A comma-separated list of keywords that the control should accept (e.g. inherit,
transparent, initial). By default, no keywords are allowed.
</p>
</dd>
<dt>letterCase</dt>
<dd>
<p>
Determines the letter case of the hex code value. Valid options are <code>uppercase</code>
or <code>lowercase</code>.
</p>
</dd>
<dt>opacity</dt>
<dd>
<p>
Set to <code>true</code> to enable the opacity slider. (Use the input element's
<code>data-opacity</code> attribute to set a preset value.)
</p>
</dd>
<dt>position</dt>
<dd>
<p>
Sets the position of the dropdown. Valid options are <code>bottom left</code>,
<code>bottom right</code>, <code>top left</code>, and <code>top right</code>.
</p>
<p class="alert alert-warning">
The <code>swatchPosition</code> setting has been removed in version 2.1. The position
of the swatch is now determined by <code>position</code>.
</p>
</dd>
<dt>theme</dt>
<dd>
<p>
A string containing the name of the custom theme to be applied. In your CSS, prefix
your selectors like this:
</p>
<pre>
.minicolors-theme-yourThemeName { ... }
</pre>
<p>
If you are using the default theme, you will probably need to adjust the swatch
styles depending on your existing stylesheet rules. Version 2.1 removes as much
styling on the <code>input</code> element as possible, which means it’s up to
you to adjust your CSS to make sure the swatch aligns properly.
</p>
<p>
To adjust the swatch, override these styles:
</p>
<pre>
.minicolors-theme-default .minicolors-swatch {
top: 5px;
left: 5px;
width: 18px;
height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
left: auto;
right: 5px;
}
</pre>
</div>
</dd>
<dt>swatches</dt>
<dd>
<p>
An array containing some colors, in either rgb(a) or hex format, that will
show up under the main color grid.
</p>
</dd>
</dl>
<!-- Methods -->
<h3 id="methods">Methods</h3>
<p>Use this syntax for calling methods:</p>
<pre>$(<em>selector</em>).minicolors('method', <em>[data]</em>);</pre>
<dl>
<dt>create</dt>
<dd>
<p>
Initializes the control for all items matching your selector. This is the default
method, so <code>data</code> may be passed in as the only argument.
</p>
<p>
To set a preset color value, populate the <code>value</code> attribute of the original
input element.
</p>
</dd>
<dt>destroy</dt>
<dd>
<p>
Returns the <em>input</em> element to its original, uninitialized state.
</p>
</dd>
<dt>opacity</dt>
<dd>
<p>
Gets or sets a control's opacity level. To use this method as a setter, pass data in
as a value between 0 and 1. (You can also obtain this value by checking the input
element's <code>data-opacity</code> attribute.)
</p>
<p>
To set a preset opacity value, populate the <code>data-opacity</code> attribute of the
original input element.
</p>
</dd>
<dt>rgbObject</dt>
<dd>
<p>
Returns an object containing red, green, blue, and alpha properties that correspond to
the control's current value. Example:
</p>
<pre>{ r: 0, g: 82, b: 148, a: 0.75 }</pre>
</dd>
<dt>rgbString & rgbaString</dt>
<dd>
<p>
Returns an RGB or RGBA string suitable for use in your CSS. Examples:
</p>
<pre>
rgb(0, 82, 148)
rgba(0, 82, 148, .75)
</pre>
</dd>
<dt>settings</dt>
<dd>
<p>
Gets or sets a control's settings. If new settings are passed in, the control will
destroy and re-initialize itself with any new settings overriding the old ones.
</p>
</dd>
<dt>value</dt>
<dd>
<p>
Gets or sets a control's color value. To use this method as a setter, pass
in a color string or an object (ex: <code>{color: '#fc0', opacity: .5}</code>).
</p>
</dd>
</dl>
<!-- Events -->
<h3 id="events">Events</h3>
<dl>
<dt>change</dt>
<dd>
<p>Fires when the value of the color picker changes. The <code>this</code> keyword will reference the original input element.
<pre>
$(<em>selector</em>).minicolors({
change: function(value, opacity) {
console.log(value + ' - ' + opacity);
}
});
</pre>
<p class="alert alert-warning">
<strong>Warning!</strong> This event will fire a lot when the user drags the
color picker around. Use the <code>changeDelay</code> setting to reduce its
frequency.
</p>
</dd>
<dt>hide</dt>
<dd>
<p>
Fires when the color picker is hidden. The <code>this</code> keyword will reference
the original input element.
</p>
<pre>
$(<em>selector</em>).minicolors({
hide: function() {
console.log('Hide event triggered!');
}
});
</pre>
</dd>
<dt>show</dt>
<dd>
<p>
Fires when the color picker is shown. The <code>this</code> keyword will reference
the original input element.
</p>
<pre>
$(<em>selector</em>).minicolors({
show: function() {
console.log('Show event triggered!');
}
});
</pre>
</dd>
</dl>
<h2 id="license">License</h2>
<p>
Licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>,
same as <a href="https://jquery.org/license/">jQuery</a>.
</p>
<p>
©2013 <a href="http://www.abeautifulsite.net/">A Beautiful Site, LLC.</a>
</p>
</div>
</div>
</body>
</html>
================================================
FILE: app/lib/minicolors/jquery.minicolors.css
================================================
.minicolors {
position: relative;
}
.minicolors-sprite {
background-image: url(jquery.minicolors.png);
}
.minicolors-swatch {
position: absolute;
vertical-align: middle;
background-position: -80px 0;
border: solid 1px #ccc;
cursor: text;
padding: 0;
margin: 0;
display: inline-block;
}
.minicolors-swatch-color {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.minicolors input[type=hidden] + .minicolors-swatch {
width: 28px;
position: static;
cursor: pointer;
}
.minicolors input[type=hidden][disabled] + .minicolors-swatch {
cursor: default;
}
/* Panel */
.minicolors-panel {
position: absolute;
width: 173px;
/*background: white;*/
/*border: solid 1px #CCC;*/
/*box-shadow: 0 0 20px rgba(0, 0, 0, .2);*/
z-index: 99999;
box-sizing: content-box;
display: none;
}
.minicolors-panel.minicolors-visible {
display: block;
}
/* Panel positioning */
.minicolors-position-top .minicolors-panel {
top: -154px;
}
.minicolors-position-right .minicolors-panel {
right: 0;
}
.minicolors-position-bottom .minicolors-panel {
top: auto;
}
.minicolors-position-left .minicolors-panel {
left: 0;
}
.minicolors-with-opacity .minicolors-panel {
width: 194px;
}
.minicolors .minicolors-grid {
position: relative;
top: 1px;
left: 1px;
width: 150px;
height: 150px;
background-position: -120px 0;
cursor: crosshair;
}
.minicolors .minicolors-grid-inner {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
.minicolors-slider-saturation .minicolors-grid {
background-position: -420px 0;
}
.minicolors-slider-saturation .minicolors-grid-inner {
background-position: -270px 0;
background-image: inherit;
}
.minicolors-slider-brightness .minicolors-grid {
background-position: -570px 0;
}
.minicolors-slider-brightness .minicolors-grid-inner {
background-color: black;
}
.minicolors-slider-wheel .minicolors-grid {
background-position: -720px 0;
}
.minicolors-slider,
.minicolors-opacity-slider {
position: absolute;
top: 1px;
left: 152px;
width: 20px;
height: 150px;
/*background-color: white;*/
background-position: 0 0;
cursor: row-resize;
}
.minicolors-slider-saturation .minicolors-slider {
background-position: -60px 0;
}
.minicolors-slider-brightness .minicolors-slider {
background-position: -20px 0;
}
.minicolors-slider-wheel .minicolors-slider {
background-position: -20px 0;
}
.minicolors-opacity-slider {
left: 173px;
background-position: -40px 0;
display: none;
}
.minicolors-with-opacity .minicolors-opacity-slider {
display: block;
}
/* Pickers */
.minicolors-grid .minicolors-picker {
position: absolute;
top: 70px;
left: 70px;
width: 12px;
height: 12px;
border: solid 1px black;
border-radius: 10px;
margin-top: -6px;
margin-left: -6px;
background: none;
}
.minicolors-grid .minicolors-picker > div {
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 8px;
border-radius: 8px;
border: solid 2px white;
box-sizing: content-box;
}
.minicolors-picker {
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 2px;
background: white;
border: solid 1px black;
margin-top: -2px;
box-sizing: content-box;
}
/* Swatches */
.minicolors-swatches,
.minicolors-swatches li {
margin: 5px 0 3px 5px;
padding: 0;
list-style: none;
overflow: hidden;
}
.minicolors-swatches .minicolors-swatch {
position: relative;
float: left;
cursor: pointer;
margin:0 4px 0 0;
}
.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
margin-right: 7px;
}
.minicolors-swatch.selected {
border-color: #000;
}
/* Inline controls */
.minicolors-inline {
display: inline-block;
}
.minicolors-inline .minicolors-input {
display: none !important;
}
.minicolors-inline .minicolors-panel {
position: relative;
top: auto;
left: auto;
box-shadow: none;
z-index: auto;
display: inline-block;
}
/* Default theme */
.minicolors-theme-default .minicolors-swatch {
top: 5px;
left: 5px;
width: 18px;
height: 18px;
}
.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
margin-bottom: 2px;
top: 0;
left: 0;
width: 18px;
height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
left: auto;
right: 5px;
}
.minicolors-theme-default.minicolors {
width: auto;
display: inline-block;
}
.minicolors-theme-default .minicolors-input {
height: 20px;
width: auto;
display: inline-block;
padding-left: 26px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-input {
padding-right: 26px;
padding-left: inherit;
}
/* Bootstrap theme */
.minicolors-theme-bootstrap .minicolors-swatch {
z-index: 2;
top: 3px;
left: 3px;
width: 28px;
height: 28px;
border-radius: 3px;
}
.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
margin-bottom: 2px;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.minicolors-theme-bootstrap .minicolors-swatch-color {
border-radius: inherit;
}
.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
left: auto;
right: 3px;
}
.minicolors-theme-bootstrap .minicolors-input {
float: none;
padding-left: 44px;
}
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
padding-right: 44px;
padding-left: 12px;
}
.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
top: 4px;
left: 4px;
width: 37px;
height: 37px;
border-radius: 5px;
}
.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
width: 24px;
height: 24px;
}
.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
width: 18px;
height: 18px;
}
.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Semantic Ui theme */
.minicolors-theme-semanticui .minicolors-swatch {
top: 0;
left: 0;
padding: 18px;
}
.minicolors-theme-semanticui input {
text-indent: 30px;
}
================================================
FILE: app/lib/minicolors/jquery.minicolors.js
================================================
//
// jQuery MiniColors: A tiny color picker built on jQuery
//
// Developed by Cory LaViska for A Beautiful Site, LLC
//
// Licensed under the MIT license: http://opensource.org/licenses/MIT
//
(function (factory) {
if(typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if(typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
'use strict';
// Defaults
$.minicolors = {
defaults: {
animationSpeed: 50,
animationEasing: 'swing',
change: null,
changeDelay: 0,
control: 'hue',
defaultValue: '',
format: 'hex',
hide: null,
hideSpeed: 100,
inline: false,
keywords: '',
letterCase: 'lowercase',
opacity: false,
position: 'bottom left',
show: null,
showSpeed: 100,
theme: 'default',
swatches: []
}
};
// Public methods
$.extend($.fn, {
minicolors: function(method, data) {
switch(method) {
// Destroy the control
case 'destroy':
$(this).each(function() {
destroy($(this));
});
return $(this);
// Hide the color picker
case 'hide':
hide();
return $(this);
// Get/set opacity
case 'opacity':
// Getter
if(data === undefined) {
// Getter
return $(this).attr('data-opacity');
} else {
// Setter
$(this).each(function() {
updateFromInput($(this).attr('data-opacity', data));
});
}
return $(this);
// Get an RGB(A) object based on the current color/opacity
case 'rgbObject':
return rgbObject($(this), method === 'rgbaObject');
// Get an RGB(A) string based on the current color/opacity
case 'rgbString':
case 'rgbaString':
return rgbString($(this), method === 'rgbaString');
// Get/set settings on the fly
case 'settings':
if(data === undefined) {
return $(this).data('minicolors-settings');
} else {
// Setter
$(this).each(function() {
var settings = $(this).data('minicolors-settings') || {};
destroy($(this));
$(this).minicolors($.extend(true, settings, data));
});
}
return $(this);
// Show the color picker
case 'show':
show($(this).eq(0));
return $(this);
// Get/set the hex color value
case 'value':
if(data === undefined) {
// Getter
return $(this).val();
} else {
// Setter
$(this).each(function() {
if(typeof(data) === 'object' && data !== 'null') {
if(data.opacity) {
$(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));
}
if(data.color) {
$(this).val(data.color);
}
} else {
$(this).val(data);
}
updateFromInput($(this));
});
}
return $(this);
// Initializes the control
default:
if(method !== 'create') data = method;
$(this).each(function() {
init($(this), data);
});
return $(this);
}
}
});
// Initialize input elements
function init(input, settings) {
var minicolors = $('<div class="minicolors" />');
var defaults = $.minicolors.defaults;
var size;
var swatches;
var swatch;
var panel;
var i;
// Do nothing if already initialized
if(input.data('minicolors-initialized')) return;
// Handle settings
settings = $.extend(true, {}, defaults, settings);
// The wrapper
minicolors
.addClass('minicolors-theme-' + settings.theme)
.toggleClass('minicolors-with-opacity', settings.opacity);
// Custom positioning
if(settings.position !== undefined) {
$.each(settings.position.split(' '), function() {
minicolors.addClass('minicolors-position-' + this);
});
}
// Input size
if(settings.format === 'rgb') {
size = settings.opacity ? '25' : '20';
} else {
size = settings.keywords ? '11' : '7';
}
// The input
input
.addClass('minicolors-input')
.data('minicolors-initialized', false)
.data('minicolors-settings', settings)
.prop('size', size)
.wrap(minicolors)
.after(
'<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
'<div class="minicolors-slider minicolors-sprite">' +
'<div class="minicolors-picker"></div>' +
'</div>' +
'<div class="minicolors-opacity-slider minicolors-sprite">' +
'<div class="minicolors-picker"></div>' +
'</div>' +
'<div class="minicolors-grid minicolors-sprite">' +
'<div class="minicolors-grid-inner"></div>' +
'<div class="minicolors-picker"><div></div></div>' +
'</div>' +
'</div>'
);
// The swatch
if(!settings.inline) {
input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
input.next('.minicolors-input-swatch').on('click', function(event) {
event.preventDefault();
input.focus();
});
}
// Prevent text selection in IE
panel = input.parent().find('.minicolors-panel');
panel.on('selectstart', function() { return false; }).end();
// Swatches
if(settings.swatches && settings.swatches.length !== 0) {
panel.addClass('minicolors-with-swatches');
swatches = $('<ul class="minicolors-swatches"></ul>')
.appendTo(panel);
for(i = 0; i < settings.swatches.length; ++i) {
swatch = settings.swatches[i];
swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
$('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
.appendTo(swatches)
.data('swatch-color', settings.swatches[i])
.find('.minicolors-swatch-color')
.css({
backgroundColor: rgb2hex(swatch),
opacity: swatch.a
});
settings.swatches[i] = swatch;
}
}
// Inline controls
if(settings.inline) input.parent().addClass('minicolors-inline');
updateFromInput(input, false);
input.data('minicolors-initialized', true);
}
// Returns the input back to its original state
function destroy(input) {
var minicolors = input.parent();
// Revert the input element
input
.removeData('minicolors-initialized')
.removeData('minicolors-settings')
.removeProp('size')
.removeClass('minicolors-input');
// Remove the wrap and destroy whatever remains
minicolors.before(input).remove();
}
// Shows the specified dropdown panel
function show(input) {
var minicolors = input.parent();
var panel = minicolors.find('.minicolors-panel');
var settings = input.data('minicolors-settings');
// Do nothing if uninitialized, disabled, inline, or already open
if(
!input.data('minicolors-initialized') ||
input.prop('disabled') ||
minicolors.hasClass('minicolors-inline') ||
minicolors.hasClass('minicolors-focus')
) return;
hide();
minicolors.addClass('minicolors-focus');
panel
.stop(true, true)
.fadeIn(settings.showSpeed, function() {
if(settings.show) settings.show.call(input.get(0));
});
}
// Hides all dropdown panels
function hide() {
$('.minicolors-focus').each(function() {
var minicolors = $(this);
var input = minicolors.find('.minicolors-input');
var panel = minicolors.find('.minicolors-panel');
var settings = input.data('minicolors-settings');
panel.fadeOut(settings.hideSpeed, function() {
if(settings.hide) settings.hide.call(input.get(0));
minicolors.removeClass('minicolors-focus');
});
});
}
// Moves the selected picker
function move(target, event, animate) {
var input = target.parents('.minicolors').find('.minicolors-input');
var settings = input.data('minicolors-settings');
var picker = target.find('[class$=-picker]');
var offsetX = target.offset().left;
var offsetY = target.offset().top;
var x = Math.round(event.pageX - offsetX);
var y = Math.round(event.pageY - offsetY);
var duration = animate ? settings.animationSpeed : 0;
var wx, wy, r, phi;
// Touch support
if(event.originalEvent.changedTouches) {
x = event.originalEvent.changedTouches[0].pageX - offsetX;
y = event.originalEvent.changedTouches[0].pageY - offsetY;
}
// Constrain picker to its container
if(x < 0) x = 0;
if(y < 0) y = 0;
if(x > target.width()) x = target.width();
if(y > target.height()) y = target.height();
// Constrain color wheel values to the wheel
if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {
wx = 75 - x;
wy = 75 - y;
r = Math.sqrt(wx * wx + wy * wy);
phi = Math.atan2(wy, wx);
if(phi < 0) phi += Math.PI * 2;
if(r > 75) {
r = 75;
x = 75 - (75 * Math.cos(phi));
y = 75 - (75 * Math.sin(phi));
}
x = Math.round(x);
y = Math.round(y);
}
// Move the picker
if(target.is('.minicolors-grid')) {
picker
.stop(true)
.animate({
top: y + 'px',
left: x + 'px'
}, duration, settings.animationEasing, function() {
updateFromControl(input, target);
});
} else {
picker
.stop(true)
.animate({
top: y + 'px'
}, duration, settings.animationEasing, function() {
updateFromControl(input, target);
});
}
}
// Sets the input based on the color picker values
function updateFromControl(input, target) {
function getCoords(picker, container) {
var left, top;
if(!picker.length || !container) return null;
left = picker.offset().left;
top = picker.offset().top;
return {
x: left - container.offset().left + (picker.outerWidth() / 2),
y: top - container.offset().top + (picker.outerHeight() / 2)
};
}
var hue, saturation, brightness, x, y, r, phi;
var hex = input.val();
var opacity = input.attr('data-opacity');
// Helpful references
var minicolors = input.parent();
var settings = input.data('minicolors-settings');
var swatch = minicolors.find('.minicolors-input-swatch');
// Panel objects
var grid = minicolors.find('.minicolors-grid');
var slider = minicolors.find('.minicolors-slider');
var opacitySlider = minicolors.find('.minicolors-opacity-slider');
// Picker objects
var gridPicker = grid.find('[class$=-picker]');
var sliderPicker = slider.find('[class$=-picker]');
var opacityPicker = opacitySlider.find('[class$=-picker]');
// Picker positions
var gridPos = getCoords(gridPicker, grid);
var sliderPos = getCoords(sliderPicker, slider);
var opacityPos = getCoords(opacityPicker, opacitySlider);
// Handle colors
if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {
// Determine HSB values
switch(settings.control) {
case 'wheel':
// Calculate hue, saturation, and brightness
x = (grid.width() / 2) - gridPos.x;
y = (grid.height() / 2) - gridPos.y;
r = Math.sqrt(x * x + y * y);
phi = Math.atan2(y, x);
if(phi < 0) phi += Math.PI * 2;
if(r > 75) {
r = 75;
gridPos.x = 69 - (75 * Math.cos(phi));
gridPos.y = 69 - (75 * Math.sin(phi));
}
saturation = keepWithin(r / 0.75, 0, 100);
hue = keepWithin(phi * 180 / Math.PI, 0, 360);
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
hex = hsb2hex({
h: hue,
s: saturation,
b: brightness
});
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
break;
case 'saturation':
// Calculate hue, saturation, and brightness
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
hex = hsb2hex({
h: hue,
s: saturation,
b: brightness
});
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
break;
case 'brightness':
// Calculate hue, saturation, and brightness
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
hex = hsb2hex({
h: hue,
s: saturation,
b: brightness
});
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
break;
default:
// Calculate hue, saturation, and brightness
hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
hex = hsb2hex({
h: hue,
s: saturation,
b: brightness
});
// Update UI
grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
break;
}
// Handle opacity
if(settings.opacity) {
opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
} else {
opacity = 1;
}
updateInput(input, hex, opacity);
}
else {
// Set swatch color
swatch.find('span').css({
backgroundColor: hex,
opacity: opacity
});
// Handle change event
doChange(input, hex, opacity);
}
}
// Sets the value of the input and does the appropriate conversions
// to respect settings, also updates the swatch
function updateInput(input, value, opacity) {
var rgb;
// Helpful references
var minicolors = input.parent();
var settings = input.data('minicolors-settings');
var swatch = minicolors.find('.minicolors-input-swatch');
if(settings.opacity) input.attr('data-opacity', opacity);
// Set color string
if(settings.format === 'rgb') {
// Returns RGB(A) string
// Checks for input format and does the conversion
if(isRgb(value)) {
rgb = parseRgb(value, true);
}
else {
rgb = hex2rgb(parseHex(value, true));
}
opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
if(isNaN(opacity) || !settings.opacity) opacity = 1;
if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
// Set RGBA string if alpha
value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
} else {
// Set RGB string (alpha = 1)
value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
}
} else {
// Returns hex color
// Checks for input format and does the conversion
if(isRgb(value)) {
value = rgbString2hex(value);
}
value = convertCase(value, settings.letterCase);
}
// Update value from picker
input.val(value);
// Set swatch color
swatch.find('span').css({
backgroundColor: value,
opacity: opacity
});
// Handle change event
doChange(input, value, opacity);
}
// Sets the color picker values from the input
function updateFromInput(input, preserveInputValue) {
var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;
// Helpful references
var minicolors = input.parent();
var settings = input.data('minicolors-settings');
var swatch = minicolors.find('.minicolors-input-swatch');
// Panel objects
var grid = minicolors.find('.minicolors-grid');
var slider = minicolors.find('.minicolors-slider');
var opacitySlider = minicolors.find('.minicolors-opacity-slider');
// Picker objects
var gridPicker = grid.find('[class$=-picker]');
var sliderPicker = slider.find('[class$=-picker]');
var opacityPicker = opacitySlider.find('[class$=-picker]');
// Determine hex/HSB values
if(isRgb(input.val())) {
// If input value is a rgb(a) string, convert it to hex color and update opacity
hex = rgbString2hex(input.val());
alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);
if(alpha) {
input.attr('data-opacity', alpha);
}
} else {
hex = convertCase(parseHex(input.val(), true), settings.letterCase);
}
if(!hex){
hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
}
hsb = hex2hsb(hex);
// Get array of lowercase keywords
keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
return $.trim(a.toLowerCase());
});
// Set color string
if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
value = convertCase(input.val());
} else {
value = isRgb(input.val()) ? parseRgb(input.val()) : hex;
}
// Update input value
if(!preserveInputValue) input.val(value);
// Determine opacity value
if(settings.opacity) {
// Get from data-opacity attribute and keep within 0-1 range
opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
if(isNaN(opacity)) opacity = 1;
input.attr('data-opacity', opacity);
swatch.find('span').css('opacity', opacity);
// Set opacity picker position
y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
opacityPicker.css('top', y + 'px');
}
// Set opacity to zero if input value is transparent
if(input.val().toLowerCase() === 'transparent') {
swatch.find('span').css('opacity', 0);
}
// Update swatch
swatch.find('span').css('backgroundColor', hex);
// Determine picker locations
switch(settings.control) {
case 'wheel':
// Set grid position
r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
phi = hsb.h * Math.PI / 180;
x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
gridPicker.css({
top: y + 'px',
left: x + 'px'
});
// Set slider position
y = 150 - (hsb.b / (100 / grid.height()));
if(hex === '') y = 0;
sliderPicker.css('top', y + 'px');
// Update panel color
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
break;
case 'saturation':
// Set grid position
x = keepWithin((5 * hsb.h) / 12, 0, 150);
y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
gridPicker.css({
top: y + 'px',
left: x + 'px'
});
// Set slider position
y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
sliderPicker.css('top', y + 'px');
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
break;
case 'brightness':
// Set grid position
x = keepWithin((5 * hsb.h) / 12, 0, 150);
y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
gridPicker.css({
top: y + 'px',
left: x + 'px'
});
// Set slider position
y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
sliderPicker.css('top', y + 'px');
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
break;
default:
// Set grid position
x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
gridPicker.css({
top: y + 'px',
left: x + 'px'
});
// Set slider position
y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
sliderPicker.css('top', y + 'px');
// Update panel color
grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
break;
}
// Fire change event, but only if minicolors is fully initialized
if(input.data('minicolors-initialized')) {
doChange(input, value, opacity);
}
}
// Runs the change and changeDelay callbacks
function doChange(input, value, opacity) {
var settings = input.data('minicolors-settings');
var lastChange = input.data('minicolors-lastChange');
var obj, sel, i;
// Only run if it actually changed
if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {
// Remember last-changed value
input.data('minicolors-lastChange', {
value: value,
opacity: opacity
});
// Check and select applicable swatch
if(settings.swatches && settings.swatches.length !== 0) {
if(!isRgb(value)) {
obj = hex2rgb(value);
}
else {
obj = parseRgb(value, true);
}
sel = -1;
for(i = 0; i < settings.swatches.length; ++i) {
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) {
sel = i;
break;
}
}
input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
if(sel !== -1) {
input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
}
}
// Fire change event
if(settings.change) {
if(settings.changeDelay) {
// Call after a delay
clearTimeout(input.data('minicolors-changeTimeout'));
input.data('minicolors-changeTimeout', setTimeout(function() {
settings.change.call(input.get(0), value, opacity);
}, settings.changeDelay));
} else {
// Call immediately
settings.change.call(input.get(0), value, opacity);
}
}
input.trigger('change').trigger('input');
}
}
// Generates an RGB(A) object based on the input's value
function rgbObject(input) {
var rgb,
opacity = $(input).attr('data-opacity');
if( isRgb($(input).val()) ) {
rgb = parseRgb($(input).val(), true);
} else {
var hex = parseHex($(input).val(), true);
rgb = hex2rgb(hex);
}
if( !rgb ) return null;
if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
return rgb;
}
// Generates an RGB(A) string based on the input's value
function rgbString(input, alpha) {
var rgb,
opacity = $(input).attr('data-opacity');
if( isRgb($(input).val()) ) {
rgb = parseRgb($(input).val(), true);
} else {
var hex = parseHex($(input).val(), true);
rgb = hex2rgb(hex);
}
if( !rgb ) return null;
if( opacity === undefined ) opacity = 1;
if( alpha ) {
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
} else {
return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
}
}
// Converts to the letter case specified in settings
function convertCase(string, letterCase) {
return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
}
// Parses a string and returns a valid hex string when possible
function parseHex(string, expand) {
string = string.replace(/^#/g, '');
if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';
if(string.length !== 3 && string.length !== 6) return '';
if(string.length === 3 && expand) {
string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
}
return '#' + string;
}
// Parses a string and returns a valid RGB(A) string when possible
function parseRgb(string, obj) {
var values = string.replace(/[^\d,.]/g, '');
var rgba = values.split(',');
rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);
if(rgba[3]) {
rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);
}
// Return RGBA object
if( obj ) {
if (rgba[3]) {
return {
r: rgba[0],
g: rgba[1],
b: rgba[2],
a: rgba[3]
};
} else {
return {
r: rgba[0],
g: rgba[1],
b: rgba[2]
};
}
}
// Return RGBA string
if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {
return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
} else {
return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
}
}
// Parses a string and returns a valid color string when possible
function parseInput(string, expand) {
if(isRgb(string)) {
// Returns a valid rgb(a) string
return parseRgb(string);
} else {
return parseHex(string, expand);
}
}
// Keeps value within min and max
function keepWithin(value, min, max) {
if(value < min) value = min;
if(value > max) value = max;
return value;
}
// Checks if a string is a valid RGB(A) string
function isRgb(string) {
var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? true : false;
}
// Function to get alpha from a RGB(A) string
function getAlpha(rgba) {
rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
return (rgba && rgba.length === 6) ? rgba[4] : '1';
}
// Converts an HSB object to an RGB object
function hsb2rgb(hsb) {
var rgb = {};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if(s === 0) {
rgb.r = rgb.g = rgb.b = v;
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if(h === 360) h = 0;
if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
}
return {
r: Math.round(rgb.r),
g: Math.round(rgb.g),
b: Math.round(rgb.b)
};
}
// Converts an RGB string to a hex string
function rgbString2hex(rgb){
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? '#' +
('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
// Converts an RGB object to a hex string
function rgb2hex(rgb) {
var hex = [
rgb.r.toString(16),
rgb.g.toString(16),
rgb.b.toString(16)
];
$.each(hex, function(nr, val) {
if(val.length === 1) hex[nr] = '0' + val;
});
return '#' + hex.join('');
}
// Converts an HSB object to a hex string
function hsb2hex(hsb) {
return rgb2hex(hsb2rgb(hsb));
}
// Converts a hex string to an HSB object
function hex2hsb(hex) {
var hsb = rgb2hsb(hex2rgb(hex));
if(hsb.s === 0) hsb.h = 360;
return hsb;
}
// Converts an RGB object to an HSB object
function rgb2hsb(rgb) {
var hsb = { h: 0, s: 0, b: 0 };
var min = Math.min(rgb.r, rgb.g, rgb.b);
var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min;
hsb.b = max;
hsb.s = max !== 0 ? 255 * delta / max : 0;
if(hsb.s !== 0) {
if(rgb.r === max) {
hsb.h = (rgb.g - rgb.b) / delta;
} else if(rgb.g === max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1;
}
hsb.h *= 60;
if(hsb.h < 0) {
hsb.h += 360;
}
hsb.s *= 100/255;
hsb.b *= 100/255;
return hsb;
}
// Converts a hex string to an RGB object
function hex2rgb(hex) {
hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
return {
r: hex >> 16,
g: (hex & 0x00FF00) >> 8,
b: (hex & 0x0000FF)
};
}
// Handle events
$([document, top.document])
// Hide on clicks outside of the control
.on('mousedown.minicolors touchstart.minicolors', function(event) {
if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {
hide();
}
})
// Start moving
.on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
var target = $(this);
event.preventDefault();
$(event.delegateTarget).data('minicolors-target', target);
move(target, event, true);
})
// Move pickers
.on('mousemove.minicolors touchmove.minicolors', function(event) {
var target = $(event.delegateTarget).data('minicolors-target');
if(target) move(target, event);
})
// Stop moving
.on('mouseup.minicolors touchend.minicolors', function() {
$(this).removeData('minicolors-target');
})
// Selected a swatch
.on('click.minicolors', '.minicolors-swatches li', function(event) {
event.preventDefault();
var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
updateInput(input, color, getAlpha(color));
updateFromInput(input);
})
// Show panel when swatch is clicked
.on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
var input = $(this).parent().find('.minicolors-input');
event.preventDefault();
show(input);
})
// Show on focus
.on('focus.minicolors', '.minicolors-input', function() {
var input = $(this);
if(!input.data('minicolors-initialized')) return;
show(input);
})
// Update value on blur
.on('blur.minicolors', '.minicolors-input', function() {
var input = $(this);
var settings = input.data('minicolors-settings');
var keywords;
var hex;
var rgba;
var swatchOpacity;
var value;
if(!input.data('minicolors-initialized')) return;
// Get array of lowercase keywords
keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
return $.trim(a.toLowerCase());
});
// Set color string
if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
value = input.val();
} else {
// Get RGBA values for easy conversion
if(isRgb(input.val())) {
rgba = parseRgb(input.val(), true);
} else {
hex = parseHex(input.val(), true);
rgba = hex ? hex2rgb(hex) : null;
}
// Convert to format
if(rgba === null) {
value = settings.defaultValue;
} else if(settings.format === 'rgb') {
value = settings.opacity ?
parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :
parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');
} else {
value = rgb2hex(rgba);
}
}
// Update swatch opacity
swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;
if(value.toLowerCase() === 'transparent') swatchOpacity = 0;
input
.closest('.minicolors')
.find('.minicolors-input-swatch > span')
.css('opacity', swatchOpacity);
// Set input value
input.val(value);
// Is it blank?
if(input.val() === '') input.val(parseInput(settings.defaultValue, true));
// Adjust case
input.val(convertCase(input.val(), settings.letterCase));
})
// Handle keypresses
.on('keydown.minicolors', '.minicolors-input', function(event) {
var input = $(this);
if(!input.data('minicolors-initialized')) return;
switch(event.keyCode) {
case 9: // tab
hide();
break;
case 13: // enter
case 27: // esc
hide();
input.blur();
break;
}
})
// Update on keyup
.on('keyup.minicolors', '.minicolors-input', function() {
var input = $(this);
if(!input.data('minicolors-initialized')) return;
updateFromInput(input, true);
})
// Update on paste
.on('paste.minicolors', '.minicolors-input', function() {
var input = $(this);
if(!input.data('minicolors-initialized')) return;
setTimeout(function() {
updateFromInput(input, true);
}, 1);
});
}));
================================================
FILE: app/lib/minicolors/package.json
================================================
{
"name": "@claviska/jquery-minicolors",
"version": "2.2.6",
"homepage": "https://github.com/claviska/jquery-minicolors",
"author": "Cory LaViska",
"description": "jQuery MiniColors Plugin",
"main": "jquery.minicolors.js",
"keywords": [
"jquery",
"colorpicker"
],
"license": "MIT",
"dependencies": {
"jquery": ">= 1.7.x"
},
"devDependencies": {
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-help": "^1.6.1",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3"
},
"repository": {
"type": "git",
"url": "https://github.com/claviska/jquery-minicolors.git"
},
"bugs": {
"url": "https://github.com/claviska/jquery-minicolors/issues"
},
"scripts": {}
}
================================================
FILE: app/lib/minicolors/without-bootstrap.html
================================================
<!doctype html>
<html>
<head>
<title>jQuery MiniColors</title>
<meta charset="utf-8">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- MiniColors -->
<script src="jquery.minicolors.js"></script>
<link rel="stylesheet" href="jquery.minicolors.css">
<style>
body {
font: 16px sans-serif;
line-height: 1.8;
padding: 0 40px;
margin-bottom: 200px;
}
a {
color: #08c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.form-group {
margin: 20px 0;
}
label {
color: #888;
}
</style>
<script>
$(document).ready( function() {
$('.demo').each( function() {
//
// Dear reader, it's actually very easy to initialize MiniColors. For example:
//
// $(selector).minicolors();
//
// The way I've done it below is just for the demo, so don't get confused
// by it. Also, data- attributes aren't supported at this time. Again,
// they're only used for the purposes of this demo.
//
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
format: $(this).attr('data-format') || 'hex',
keywords: $(this).attr('data-keywords') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function(hex, opacity) {
var log;
try {
log = hex ? hex : 'transparent';
if( opacity ) log += ', ' + opacity;
console.log(log);
} catch(e) {}
},
theme: 'default'
});
});
});
</script>
</head>
<body>
<h1>MiniColors Demo (without Bootstrap)</h1>
<p>
<a href="index.html">« Back to the Bootstrap demo</a>
</p>
<!-- Control Types -->
<h3>Control Types</h3>
<div class="form-group">
<label for="hue-demo">Hue (default)</label>
<input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161">
</div>
<div class="form-group">
<label for="saturation-demo">Saturation</label>
<input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc">
</div>
<div class="form-group">
<label for="brightness-demo">Brightness</label>
<input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff">
</div>
<div class="form-group">
<label for="wheel-demo">Wheel</label>
<input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee">
</div>
<!-- Input modes -->
<h3>Input Modes</h3>
<div class="form-group">
<label for="text-field">Text field</label>
<br>
<input type="text" id="text-field" class="demo" value="#70c24a">
</div>
<div class="form-group">
<label for="hidden-input">Hidden Input</label>
<br>
<input type="hidden" id="hidden-input" class="demo" value="#db913d">
</div>
<div class="form-group">
<label for="inline">Inline</label>
<br>
<input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db">
</div>
<!-- Positions -->
<h3>Positions</h3>
<div class="form-group">
<label for="position-bottom-left">bottom left (default)</label>
<input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc">
</div>
<div class="form-group">
<label for="position-top-left">top left</label>
<input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc">
</div>
<div class="form-group">
<label for="position-bottom-right">bottom right</label>
<input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc">
</div>
<div class="form-group">
<label for="position-top-right">top right</label>
<input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc">
</div>
<!-- RGB(A) -->
<h3>RGB(A)</h3>
<div class="form-group">
<label for="rgb">rgb</label>
<br>
<input type="text" id="rgb" class="demo" data-format="rgb" value="rgb(33, 147, 58)">
</div>
<div class="form-group">
<label for="rgba">rgb(a)</label>
<br>
<input type="text" id="rgba" class="demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
</div>
<!-- and more -->
<h3>…and more!</h3>
<div class="form-group">
<label for="opacity">Opacity</label>
<br>
<input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8">
</div>
<div class="form-group">
<label for="keywords">Keywords</label>
<br>
<input type="text" id="keywords" class="demo" data-keywords="transparent, inherit, initial" value="transparent">
</div>
<div class="form-group">
<label for="default-value">Default Value</label>
<br>
<input type="text" id="default-value" class="demo" data-defaultValue="#ff6600">
</div>
<div class="form-group">
<label for="letter-case">Letter Case</label>
<br>
<input type="text" id="letter-case" class="demo" data-letterCase="uppercase">
</div>
<div class="form-group">
<label for="letter-case">Swatches</label>
<br>
<input type="text" id="swatches" class="demo" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" value="#f00">
</div>
<div class="form-group">
<label for="letter-case">Swatches and opacity</label>
<br>
<input type="text" id="swatches-opacity" class="demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="#f00">
</div>
</body>
</html>
================================================
FILE: app/main.js
================================================
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const ipcMain = electron.ipcMain;
const path = require('path');
const url = require('url');
const util = require('util');
const fs = require('fs');
const spawn = require('child_process').spawn;
const exec = require('child_process').exec;
const settingsPath = path.join(app.getPath('userData'),'app_db.json');
const low = require('lowdb');
require('fix-path')();
var which = require('which');
var ffbinaries = require('ffbinaries');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
let ffmpeg_ps
let db
// var appData = app.getPath("userData");
function createWindow (needs_ffmpeg) {
// Create the browser window.
// mainWindow = new BrowserWindow({width: 800, height: 600})
var externalDisplay = electron.screen.getPrimaryDisplay()
var width = 800;
var height = 600;
if (externalDisplay) {
width = externalDisplay.bounds.width*0.8;
height = externalDisplay.bounds.height*0.8;
}
mainWindow = new BrowserWindow({
// x:windowSettings.x,
// y:windowSettings.y,
// width: windowSettings.width,
// height: windowSettings.height,
width:width,
height:height,
minWidth:800,
minHeight:600
// titleBarStyle:"hidden"
})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, needs_ffmpeg ? 'ffmpeg.html':'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
var ffmpeg_path = false;
var ffprobe_path = false;
app.on('ready', function(){
db = low(settingsPath);
db.defaults({ ffmpeg: {ffmpeg:false, ffprobe:false}, window:{x:0, y:0, width:800, height:600}}).write();
var ffmpeg_store = db.get('ffmpeg').value();
console.log(ffmpeg_store);
var opts = {};
if(ffmpeg_store.ffmpeg){ opts = {path:path.dirname(ffmpeg_store.ffmpeg)} }
which('ffmpeg', opts, function (er, ffmpeg) {
ffmpeg_path = (!er && ffmpeg) ? ffmpeg : false;
var opts = {};
if(ffmpeg_store.ffprobe){ opts = {path:path.dirname(ffmpeg_store.ffprobe)} }
which('ffprobe', opts, function (er, ffprobe) {
ffprobe_path = (!er && ffprobe) ? ffprobe : false;
console.log(ffmpeg_path, ffprobe_path);
createWindow(!ffmpeg_path || !ffprobe_path);
});
});
})
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
// if (process.platform !== 'darwin') {
app.quit()
// }
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
ipcMain.on('install_ffmpeg',function(event,input){
console.log("INSTALL");
var platform = ffbinaries.detectPlatform();
var dest = path.join(app.getPath("userData"), "ffmpeg");
ffbinaries.downloadFiles(['ffmpeg','ffprobe'], {quiet: true, destination: dest}, function () {
console.log('Downloaded binaries for ' + platform + '.');
ffmpeg_path = dest+"/ffmpeg";
ffprobe_path = dest+"/ffprobe";
db.set('ffmpeg.ffmpeg', ffmpeg_path)
.set('ffmpeg.ffprobe', ffprobe_path)
.write()
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// event.sender.send('ffmpeg_installed', platform);
});
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
ipcMain.on('probeInput', (event, input) => {
console.log("PROBE", ffprobe_path);
var cmd = "\""+ffprobe_path+"\" -v quiet -print_format json -show_format -show_streams \""+input+"\"";
exec(cmd, function(so,se,e) {
// console.log(so,se,e);
var metadata = JSON.parse(se);
event.sender.send('probeResult', metadata);
});
});
ipcMain.on('getPalette', (event, input, prefs) => {
// console.log(prefs);
// var input = prefs.file.input;
var w = prefs.dimensions.width || 320;
var h = prefs.dimensions.height || 240;
var fps = prefs.fps || 24;
var stats = prefs.color.stats_mode || 'full';
// var colors = prefs.color.colors || 256;
var transparency = (prefs.color.alpha?1:0) || 0;
var colors = prefs.color.count || 256;
var scaleCmd = "scale="+w+":"+h;
var vf = util.format("fps=%s,%s:flags=lanczos,palettegen=stats_mode=%s:max_colors=%s:reserve_transparent=%s", fps, scaleCmd, stats, colors, transparency);
if(ffmpeg_ps) ffmpeg_ps.kill();
ffmpeg_ps = spawn(ffmpeg_path, ["-i", input, "-vf", vf, "-f", "image2", "-vcodec", "png", "pipe:1"])
var data = [];
ffmpeg_ps.stdout.on('data',function(d){
data.push(d);
});
ffmpeg_ps.stderr.on('data',function(d){
// console.log("stderr",d.toString());
});
ffmpeg_ps.on('close',function(){
event.sender.send('paletteResult', Buffer.concat(data).toString('base64'));
});
})
ipcMain.on('cancelProcess', (event,opts) => {
if(ffmpeg_ps){ ffmpeg_ps.kill(); }
});
var canceled = false;
ipcMain.on('cancel_export', (event, opts) => {
canceled=true;
if(ffmpeg_ps){ ffmpeg_ps.kill(); }
if(opts.remove){
//remove the partially exported file
console.log("REMOVE", opts.remove);
fs.unlinkSync(opts.remove);
}
});
ipcMain.on('getThumbnail', (event, input, palette, time, settings) => {
// .frames(1)
// .duration(1)
// .complexFilter("fps="+fps+","+scaleCmd+":flags=lanczos[x];[x][1:v]paletteuse=dither="+dither)
// .outputFormat("gif")
// var settings = {fps:30,dither:'true'};
// var gif = "fps="+settings.fps+",flags=lanczos[x];[x][1:v]paletteuse=dither="+settings.dither;
var w = settings.dimensions.width || 320;
var h = settings.dimensions.height || 240;
var fps = settings.fps || 24;
var scaleCmd = "scale="+w+":"+h;
var dither = settings.color.dither ? ('bayer:bayer_scale='+settings.color.dither_scale) : 'none';
var diff_mode = settings.color.diff_mode ? settings.color.diff_mode : "rectangle";
var diff_mode = settings.loop ? settings.loop : 0;
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);
console.log(vf);
if(ffmpeg_ps) ffmpeg_ps.kill();
ffmpeg_ps = spawn(ffmpeg_path, [
"-ss", time,
"-i", input,
"-i", "pipe:0",
"-t", 1,
"-lavfi", vf,
"-frames:v", 1,
"-an", "-f", "image2",
"-vcodec", "gif", "pipe:1"
])
var data = [];
ffmpeg_ps.stdout.on('data',function(d){
// console.log("stdout",d.toString());
data.push(d);
});
ffmpeg_ps.stderr.on('data',function(d){
// console.log("stderr",d.toString());
});
ffmpeg_ps.on('close',function(){
event.sender.send('thumbnailResult', Buffer.concat(data).toString('base64'));
console.log('done');
});
ffmpeg_ps.stdin.write(Buffer.from(palette, 'base64'));
ffmpeg_ps.stdin.end();
// exec("ffmpeg -ss "+time+" -i "+input+" -t 1 -frames:v 1 -f image2 -vcodec png -", function(so,se,e) {
// // console.log(so,se,e);
// console.log(so);
// event.sender.send('thumbnailResult', new Buffer(se, 'binary').toString('base64'));
// });
});
ipcMain.on('exportGif', (event, input, output, palette, settings) => {
var stats = settings.color.stats_mode || 'full';
var dither = settings.color.dither ? ('bayer:bayer_scale='+settings.color.dither_scale) : 'none';
var colors = settings.color.colors || 256;
var fps = settings.fps || 10;
var w = settings.dimensions.width || 320;
var h = settings.dimensions.height || 240;
var scaleCmd = "scale="+w+":"+h;
var vf = util.format("fps=%s,%s:flags=lanczos [x];[x][1:v]paletteuse=dither=%s", fps, scaleCmd, dither);
// var filters = util.format("fps=%s,%s:flags=lanczos[x];[x][1:v]paletteuse=dither=%s", fps, scaleCmd, dither);
if(ffmpeg_ps) ffmpeg_ps.kill();
ffmpeg_ps = spawn(ffmpeg_path, [
"-i", input,
"-i", "pipe:0",
"-lavfi", vf,
"-an",
"-f", "gif",
output
])
// var data = [];
ffmpeg_ps.stdout.on('data',function(d){
console.log("stdout",d.toString());
// data.push(d);
});
ffmpeg_ps.stderr.on('data',function(d){
// var time = /time=(\d+)\:(\d+)\:(\d+)\.(\d+)\s+/.exec(d.toString());
var progress = parseProgressLine(d.toString());
console.log(progress);
// if(time && time.length >= 5){
if(progress && progress.time){
// var time = (parseInt(time[1])*3600) + (parseInt(time[2])*60) + parseFloat(time[3] + "." + time[4]);
// var sec = timemarkToSeconds(progress.time);
// var size = parseInt(progress.size.replace('kB',''))*1000;
var progress_obj = {
sec: timemarkToSeconds(progress.time),
size: progress.size ? parseInt(progress.size.replace('kB',''))*1000 : 0
}
event.sender.send('export_progress', progress_obj);
}
});
ffmpeg_ps.on('close',function(){
// event.sender.send('thumbnailResult', Buffer.concat(data).toString('base64'));
console.log('done');
if(canceled){
canceled=false;
event.sender.send('export_canceled', {});
}else{
event.sender.send('export_finished', getFilesizeInBytes(output));
}
});
ffmpeg_ps.stdin.write(Buffer.from(palette, 'base64'));
ffmpeg_ps.stdin.end();
});
function timemarkToSeconds(timemark) {
if (typeof timemark === 'number') {
return timemark;
}
if (timemark.indexOf(':') === -1 && timemark.indexOf('.') >= 0) {
return Number(timemark);
}
var parts = timemark.split(':');
// add seconds
var secs = Number(parts.pop());
if (parts.length) {
// add minutes
secs += Number(parts.pop()) * 60;
}
if (parts.length) {
// add hours
secs += Number(parts.pop()) * 3600;
}
return secs;
}
function parseProgressLine(line) {
var progress = {};
// Remove all spaces after = and trim
line = line.replace(/=\s+/g, '=').trim();
var progressParts = line.split(' ');
// Split every progress part by "=" to get key and value
for(var i = 0; i < progressParts.length; i++) {
var progressSplit = progressParts[i].split('=', 2);
var key = progressSplit[0];
var value = progressSplit[1];
// This is not a progress line
if(typeof value === 'undefined')
return null;
progress[key] = value;
}
return progress;
}
function getFilesizeInBytes(filename) {
const stats = fs.statSync(filename)
const fileSizeInBytes = stats.size
return fileSizeInBytes
}
================================================
FILE: app/package.json
================================================
{
"name": "GifTuna",
"build": {
"appId": "com.ndmweb.giftuna",
"mac": {
"category": "public.app-category.image-tools",
"icon": "../resources/logo-hires-v2.icns"
}
},
"version": "1.0.7",
"main": "main.js",
"dependencies": {
"angular": "^1.6.4",
"ffbinaries": "^1.0.1",
"fix-path": "^2.1.0",
"jquery": "^3.2.1",
"lowdb": "^0.16.2",
"which": "^1.2.14"
}
}
================================================
FILE: app/preview.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GifTuna</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slider.css" />
</head>
<body>
ji
</body>
</html>
================================================
FILE: app/renderer.js
================================================
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
const electron = require('electron')
const {ipcRenderer} = electron
const {dialog} = electron.remote
const {shell} = require('electron')
const url = require('url')
const path = require('path')
require("./lib/minicolors/jquery.minicolors.js");
global.jQuery = global.$ = require('jquery');
global.angular = require('angular');
var app = angular.module('giftuna',[]);
app.controller('installFfmpeg',function($scope){
$scope.ffmpeg_click = function(){
shell.openExternal("http://ffmpeg.org");
}
$scope.quit = function(){
electron.remote.app.quit();
}
$scope.install = function(){
$scope.installing=true;
ipcRenderer.send('install_ffmpeg', {});
}
ipcRenderer.on('ffmpeg_installed',function(ev,data){
console.log('ffmpeg_installed');
// window.location.href = "/index.html";
$scope.installing=false;
$scope.$apply();
});
//open links externally by default
// $('a[href^="http"]').on('click',function(event) {
// console.log("A");
// event.preventDefault();
// shell.openExternal(this.href);
// });
});
app.controller('gifSettings',function($scope,$filter,$timeout,$rootScope){
$scope.status = {
state:0,
export:{progress:0,size:0,path:null}
}
$scope.frames = {
current:0,
min:0,
max:100
}
$scope.defaults = {
file: {
input:null
},
dimensions: {
original_width:320,
original_height:240,
width:320,
height:240,
lock:true
},
fps:24,
color: {
stats_mode:"diff",
diff_mode: "rectangle",
dither:true,
count: 256,
dither_scale:3,
alpha:false
}
};
$scope.settings = angular.copy($scope.defaults);
$scope.color_value = 256;
$scope.$watch('color_value',function(nv){
if(nv){
$scope.settings.color.count = Number(nv);
}
});
$scope.$watch('settings.color.count',function(nv){
if(nv){
$scope.color_value = Number(nv);
}
})
$scope.settings.dimensions.ratio = $scope.settings.dimensions.original_height/$scope.settings.dimensions.original_width;
var prom;
$scope.$watch('frames.current',function(nv,ov){
if(nv!=ov && $scope.status.state==5){
$scope.refreshThumbnail();
}
});
$rootScope.$on('colorPaletteChange',function(){
$scope.refreshThumbnail();
});
$scope.reveal = function(){
console.log($scope.status.export.path);
shell.showItemInFolder($scope.status.export.path);
}
$scope.preview = function(){
window.open(url.format({
pathname: $scope.status.export.path,
protocol: 'file:',
slashes: true
}));
}
$scope.export = function(){
var base = path.parse($scope.settings.file.input.path);
var output = path.join(base.dir, base.name+'.gif');
dialog.showSaveDialog({title:"Export GIF", defaultPath: output, buttonLabel:"Export"}, function(outputFile){
console.log(outputFile);
if(outputFile){
$scope.status.export = {progress:0, size:0, path:outputFile};
$scope.status.state = 4;
$scope.$apply();
ipcRenderer.send('exportGif', $scope.settings.file.input.path, outputFile, $scope.palette, $scope.settings);
}
// $rootScope.exportStatus.filepath = file;
// $rootScope.exportStatus.filename = path.basename(file);
// $rootScope.exportStatus.status = 1;
// $rootScope.exportStatus.totalFrames = Math.floor($rootScope.currentSource.stream.duration * $rootScope.prefs.fps);
// ipcRenderer.send('exportGif', $rootScope.currentSource.source.file.path, file, $rootScope.colorPalette, $rootScope.prefs);
});
}
$scope.cancelExport = function(){
$scope.status.export.canceling=true;
ipcRenderer.send('cancel_export', {remove:$scope.status.export.path});
}
$scope.widthChange = function(){
if($scope.settings.dimensions.width > 0 && $scope.settings.dimensions.lock){
var ratio = $scope.settings.dimensions.original_height/$scope.settings.dimensions.original_width;
$scope.settings.dimensions.height = Math.round($scope.settings.dimensions.width*ratio);
}
// if(prom) $timeout.cancel(prom);
// prom = $timeout(function(){
// $scope.refreshThumbnail();
// },2000);
}
$scope.heightChange = function(){
if($scope.settings.dimensions.height > 0 && $scope.settings.dimensions.lock){
var ratio = $scope.settings.dimensions.original_width/$scope.settings.dimensions.original_height;
$scope.settings.dimensions.width = Math.round($scope.settings.dimensions.height*ratio);
}
}
$scope.cancel = function(reset){
ipcRenderer.send('cancelProcess', {});
if(reset){
$scope.status.state=0;
$scope.settings.file = {input:null};
$scope.palette = null;
$scope.thumbnail = null;
}
}
$scope.refreshFps = function(){
if($scope.stored.fps != $scope.settings.fps){
//$scope.frames.max = Math.floor($scope.settings.probe.duration * $scope.settings.fps);
// if($scope.frames.current > $scope.frames.max){
// $scope.frames.current = $scope.frames.max;
// }
$scope.refreshThumbnail();
}
}
$scope.refreshDimension = function(key){
if($scope.stored.dimensions[key] != $scope.settings.dimensions[key]){
console.log('diff');
// if(prom) $timeout.cancel(prom);
// prom = $timeout(function(){
$scope.refreshThumbnail();
// },2000);
}
}
$scope.exportDone = function(){
$scope.status.state=5;
$scope.status.export = {progress:0, size:0, path:null};
}
$scope.refreshPalette = function(){
$scope.thumbnail = null;
$scope.palette = null;
$scope.cancel();
$scope.status.state=2;
ipcRenderer.send('getPalette', $scope.settings.file.input.path, $scope.settings)
}
$scope.refreshThumbnail = function(){
$scope.thumbnail = null;
$scope.status.state=3;
var time = $scope.frames.current;
ipcRenderer.send('getThumbnail', $scope.settings.file.input.path, $scope.palette, time, $scope.settings)
}
ipcRenderer.on('export_canceled',function(ev,progress){
console.log("CANCELED");
$scope.status.export.canceling=false;
$scope.exportDone();
$scope.$apply();
});
ipcRenderer.on('export_progress',function(ev,progress){
console.log("Progress", progress);
var p = (progress.sec/$scope.settings.probe.duration)*100;
$scope.status.export.progress = p;
$scope.status.export.size = progress.size;
$scope.$apply();
});
ipcRenderer.on('export_finished',function(ev,finalsize){
console.log("DONE!");
$scope.status.export.progress = 100;
$scope.status.export.size = finalsize;
// $scope.status.state = 5;
$scope.$apply();
});
ipcRenderer.on('probeResult', (event, probe) => {
console.log(probe);
var videoStream = probe.streams.find(function(it){return it.codec_type=='video'; });
if(!videoStream){
console.error("No video stream found");
return;
}
;
$scope.frames.max = (Math.floor(videoStream.duration * 10) / 10).toFixed(1) - 0.1; //videoStream ? Math.floor(videoStream.duration * $scope.settings.fps) : 0;
$scope.settings.probe = {duration:videoStream.duration, rate:(videoStream.r_frame_rate||videoStream.avg_frame_rate)}
$scope.settings.dimensions.width = videoStream.width;
$scope.settings.dimensions.height = videoStream.height;
$scope.settings.dimensions.original_width = videoStream.width;
$scope.settings.dimensions.original_height = videoStream.height;
$scope.settings.dimensions.ratio = videoStream.width/videoStream.height;
$scope.settings.fps = parseInt($filter('framerate')((videoStream.r_frame_rate||videoStream.avg_frame_rate), true));
//get thumbnail
$scope.refreshPalette();
// $scope.status.state=2;
// ipcRenderer.send('getPalette', $scope.settings.file.input.path, $scope.settings)
$scope.$apply();
});
ipcRenderer.on('paletteResult', (event, paletteResult) => {
if($scope.status.state==2){
$scope.palette = paletteResult;
$scope.status.state=3;
var time = $scope.frames.current;
ipcRenderer.send('getThumbnail', $scope.settings.file.input.path, $scope.palette, time, $scope.settings)
$scope.$apply();
}
});
ipcRenderer.on('thumbnailResult', (event, thumbnailResult) => {
$scope.thumbnail = 'data:image/gif;base64,'+thumbnailResult;
$scope.status.state=5;
$scope.stored = angular.copy($scope.settings);
$scope.$apply();
});
$scope.$watch('settings.file.input',function(nv){
//reset file input
if(nv){
$scope.frames.current=0;
$scope.status.state=1;
$scope.palette = null;
$scope.thumbnail = null;
$scope.settings.color = angular.copy($scope.defaults.color);
ipcRenderer.send('probeInput', nv.path)
}
});
});
app.filter('filesize',function(){
return function(size){
var i = Math.floor( Math.log(size) / Math.log(1000) );
return size > 0 ? ( size / Math.pow(1000, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i] : '-';
}
})
app.filter('framerate', function(){
return function(input, suffix){
if(!input){
return '-';
}
var fr = input.split('/');
var r = (parseInt(fr[0])/parseInt(fr[1]));
if(suffix){
return r+' fps';
}
return r;
//scope.frames = Math.ceil(nv*rate);
}
})
.filter('ratio', function(){
return function(x){
var tolerance = 1.0E-6;
var h1=1; var h2=0;
var k1=0; var k2=1;
var b = x;
do {
var a = Math.floor(b);
var aux = h1; h1 = a*h1+h2; h2 = aux;
aux = k1; k1 = a*k1+k2; k2 = aux;
b = 1/(b-a);
} while (Math.abs(x-h1/k1) > x*tolerance);
return h1+":"+k1;
}
})
app.directive('inputSelect',function(){
return {
require:'ngModel',
link: function(scope,ele,attr,ngModelCtl){
var $file = $("<input type=\"file\" />");
$file.on('change',function(e){
var file = $(this).get(0).files[0];
console.log(file);
ngModelCtl.$setViewValue(file);
ngModelCtl.$render();
$(this).val('');
});
ele.on('click',function(e){
console.log('click');
$file.trigger('click');
});
}
}
})
app.directive('pixelPalette', function($timeout,$rootScope){
return {
// template:'<img class="palette" ng-if="palette_data!=null" ng-src="data:image/png;base64,{{palette_data}}" />',
templateUrl: 'tpl/palette.html',
require: 'ngModel',
scope: {
ngModel:'=',
maxColors:'='
},
link: function(scope,ele,attr,ngModelCtl){
scope.pixels = scope.ngModel ? read_palette(scope.ngModel) : [];
scope.rgb = {};
scope.$watch('ngModel',function(nv,ov){
if(nv && nv!=ov){
scope.pixels = read_palette(nv);
}
if(nv==null){
scope.pixels = [];
}
})
// scope.hexPattern = new RegExp(/^0x[0-9A-F]{1,4}$/i);
ele.find('.hex-input').on('keyup',function(e){
var regExp = new RegExp(/[0-9A-F]/i);
var last = $(this).val().substr(-1)
console.log(last);
if(!regExp.test(last)){
console.log("NOPE");
$(this).val($(this).val().slice(0,-1));
}
});
$picker = ele.find('.pixel-picker');
$mini = ele.find('input.pixel-mini-colors');
$mini.minicolors({
inline:true,
format:'rgb',
change: function(value, opacity) {
var rgb = $(this).minicolors('rgbObject');
$timeout(function() {
// scope.pixels[scope.pixelIndex] = [rgb.r,rgb.g,rgb.b];
scope.rgb = rgb;
scope.hexValue = rgb_to_hex(scope.rgb.r,scope.rgb.g,scope.rgb.b);
});
}
});
$picker.appendTo(document.body);
$picker.on('click',function(e){
// e.preventDefault();
e.stopPropagation();
}).on('mousedown',function(){
scope.startedIn=true;
});
scope.$close = function(){
$picker.removeClass('open');
scope.pixelIndex = null;
scope.rgb = {};
}
scope.$set = function(){
$picker.removeClass('open');
scope.pixels[scope.pixelIndex] = [scope.rgb.r,scope.rgb.g,scope.rgb.b];
scope.pixelIndex = null;
put_palette();
scope.rgb = {};
}
scope.pickMe = function(i,e){
e.preventDefault();
e.stopPropagation();
var p = $(e.target).offset();
var color = scope.pixels[i];
$mini.minicolors('value', "rgb("+color.join(',')+")");
scope.stored = color;
scope.pixelIndex = i;
scope.hexValue = rgb_to_hex(color[0],color[1],color[2]);
$picker.css('top',p.top+'px').css('left',p.left+'px').addClass('open');
}
$(document).on('mouseup',function(e){
if(!scope.startedIn){
$picker.removeClass('open');
scope.pixelIndex = null;
}
scope.startedIn=false;
});
scope.$color = function(c){
return {
'background-color': "rgb("+c[0]+","+c[1]+","+c[2]+")"
}
}
function put_palette(){
if(scope.pixels.length>0){
var canvas_copy = document.createElement('canvas');
var ctx_copy = canvas_copy.getContext('2d');
var idata = ctx_copy.getImageData(0,0,16,16);
for(var i=0;i<idata.data.length;i+=4){
var pixel = Math.floor(i/4);
idata.data[i] = scope.pixels[pixel] ? scope.pixels[pixel][0] : 0;
idata.data[i+1] = scope.pixels[pixel] ? scope.pixels[pixel][1] : 0;
idata.data[i+2] = scope.pixels[pixel] ? scope.pixels[pixel][2] : 0;
idata.data[i+3] = 255;
}
// for(var i=0;i<scope.pixels.length;i++){
// data[i] = scope.pixels[i][0] || 0;
// data[i+1] = scope.pixels[i][1] || 0;
// data[i+2] = scope.pixels[i][2] || 0;
// data[i+3] = 255;
// }
// console.log(data);
ctx.putImageData(idata,0,0);
var uri = canvas.toDataURL("image/png").split('base64,')[1];
// $scope.palette = uri;
ngModelCtl.$setViewValue(uri);
ngModelCtl.$render();
$rootScope.$emit('colorPaletteChange');
}
}
function rgb_to_hex(r,g,b){
var bin = r << 16 | g << 8 | b;
return (function(h){
return new Array(7-h.length).join("0")+h
})(bin.toString(16).toUpperCase())
}
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
function read_palette(img_src){
var img = new Image();
img.src = 'data:image/png;base64,'+img_src;
canvas.width = 16;
canvas.height = 16;
ctx.clearRect(0,0,16,16);
ctx.drawImage(img,0,0);
// scope.pixels = [];
var pixel_array = [];
var pixel_data = ctx.getImageData(0,0,16,16);
for(var i=0;i<pixel_data.data.length;i+=4){
var p = [];
p[0] = pixel_data.data[i];
p[1] = pixel_data.data[i+1];
p[2] = pixel_data.data[i+2];
p[3] = 255;
if(pixel_array.length < scope.maxColors)
pixel_array.push(p);
}
return pixel_array;
// scope.pixels.push([0,0,0,0]);
// ngModelCtl.$setViewValue(canvas.toDataURL("image/png").split('base64,')[1]);
// ngModelCtl.$render();
// for(var x=0;x<16;x++){
// for(var y=0;y<16;y++){
// pixels.push(ctx.getImageData(x,y,1,1))
// }
// }
}
}
}
})
app.directive('frameScrubber',function(){
return {
scope: {
ngModel:'=',
frames:'=',
disabled:'='
},
template: '<div class="scrubber-frame">{{params.value}}s</div><div class="scrubber-bar"><input ng-disabled="disabled" type="range" step="0.1" ng-model="params.value" min="0" /></div><div class="scrubber-frame">{{params.max+0.1}}s</div>',
require: 'ngModel',
link: function(scope,ele,attr,ngModelCtl){
scope.params = {value:0};
var $input = $(ele).find('input');
scope.$watch('ngModel',function(nv,ov){
if(nv!=ov){
scope.params.value = nv;
}
});
scope.$watch('frames',function(nv){
console.log('frame change', nv);
if(nv){
scope.params.max = nv;
$input.attr('max',nv);
}
});
$input.on('change',function(e){
console.log('change!');
ngModelCtl.$setViewValue(scope.params.value);
ngModelCtl.$render();
});
}
}
})
app.directive('gifPreview',function(){
return {
// template: '<div class="preview-div" ng-style="$previewStyle()"></div>',
template: '<img src="" />',
link: function(scope,ele,attr){
scope.preview_scale = 1;
// $(ele).on('resize',function(e){
console.log($(ele).find('.preview-wrap').width());
// var aspect = scope.settings.dimensions.height/scope.settings.dimensions.width;
// });
scope.$previewStyle = function(){
return {
'background-image':'url('+scope.thumbnail+')',
'max-width':scope.settings.dimensions.width+'px',
'max-height':scope.settings.dimensions.height+'px'
// 'height': (scope.settings.dimensions.height/scope.settings.dimensions.width)*100 + 'vw'
};
// console.log($(ele).width());
// if($(ele).width() < scope.settings.dimensions.width || $(ele).height() < scope.settings.dimensions.height){
// return {
// 'width':'100%',
// 'max-width':scope.settings.dimensions.width+'px',
// 'max-height':scope.settings.dimensions.height+'px',
// 'padding-bottom': (scope.settings.dimensions.height/scope.settings.dimensions.width)*100 + '%'
// }
// }else{
// return {
// 'max-width':scope.settings.dimensions.width+'px',
// 'max-height':scope.settings.dimensions.height+'px',
// 'padding-bottom': (scope.settings.dimensions.height/scope.settings.dimensions.width)*100 + '%'
// // 'height':scope.settings.dimensions.height+'px'
// }
// }
}
}
}
})
================================================
FILE: app/tpl/loader.html
================================================
<span class="spinner-icon">
<svg width='20px' height='20px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
<circle cx="50" cy="50" r="40" stroke="#000000" fill="none" stroke-width="10" stroke-linecap="round"></circle>
<circle cx="50" cy="50" r="40" stroke="#bffff1" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate>
</circle>
</svg>
</span>
================================================
FILE: app/tpl/palette.html
================================================
<div class="pixel-palette">
<div class="pixel-pixels">
<a ng-click="pickMe($index,$event)" ng-repeat="p in pixels track by $index" class="pixel" ng-style="$color(p)" ng-class={"on":pixelIndex==$index}></a>
</div>
<div class="pixel-picker">
<div class="picker-actions">
<a class="btn btn-small" ng-click="$close()">Cancel</a>
<a class="btn btn-small btn-primary" ng-click="$set()">Ok</a>
</div>
<div class="hex-control">
<div class="color-preview" ng-style="{'background-color':'#'+hexValue}"></div>
<div class="hex-input-wrapper">
<input type="text" class="hex-input" ng-model="hexValue" maxlength="6" />
</div>
</div>
<div class="picker-control">
<input type="text" class="pixel-mini-colors" />
</div>
</div>
</div>
================================================
FILE: package.json
================================================
{
"name": "gif-tuna",
"version": "1.0.7",
"description": "A modern cross-platform video to gif converter",
"scripts": {
"postinstall":"npm --prefix ./app install ./app",
"start": "electron ./app/",
"build_mac": "electron-packager ./app GifTuna --ignore=.gitignore --platform=darwin --icon=./resources/logo-hires-v2.icns --out=./build/mac/ --overwrite",
"build_win": "electron-packager ./app GifTuna --platform=win32 --icon=./resources/logo-hires-v2.iconset --out=./build/win/ --overwrite",
"build_linux": "electron-packager ./app GifTuna --platform=linux --icon=./resources/logo-hires-v2-256x256@2x.png --out=./build/linux/ --overwrite",
"build_all":"npm run build_mac && npm run build_win && npm run build_linux"
},
"author": "brian@ndmweb.com (@dudewheresmycode)",
"license": "MIT",
"devDependencies": {
"electron": "~1.6.2",
"electron-packager": "^8.7.1"
}
}
gitextract__rhz70sy/
├── .gitignore
├── README.md
├── app/
│ ├── .gitignore
│ ├── LICENSE.md
│ ├── README.md
│ ├── css/
│ │ ├── slider.css
│ │ └── style.css
│ ├── ffmpeg.html
│ ├── index.html
│ ├── lib/
│ │ └── minicolors/
│ │ ├── LICENSE.md
│ │ ├── README.md
│ │ ├── bower.json
│ │ ├── component.json
│ │ ├── composer.json
│ │ ├── gulpfile.js
│ │ ├── index.html
│ │ ├── jquery.minicolors.css
│ │ ├── jquery.minicolors.js
│ │ ├── package.json
│ │ └── without-bootstrap.html
│ ├── main.js
│ ├── package.json
│ ├── preview.html
│ ├── renderer.js
│ └── tpl/
│ ├── loader.html
│ └── palette.html
├── package.json
└── resources/
└── logo-hires-v2.icns
SYMBOL INDEX (32 symbols across 3 files)
FILE: app/lib/minicolors/jquery.minicolors.js
function init (line 142) | function init(input, settings) {
function destroy (line 240) | function destroy(input) {
function show (line 255) | function show(input) {
function hide (line 279) | function hide() {
function move (line 295) | function move(target, event, animate) {
function updateFromControl (line 356) | function updateFromControl(input, target) {
function updateInput (line 495) | function updateInput(input, value, opacity) {
function updateFromInput (line 552) | function updateFromInput(input, preserveInputValue) {
function doChange (line 706) | function doChange(input, value, opacity) {
function rgbObject (line 760) | function rgbObject(input) {
function rgbString (line 775) | function rgbString(input, alpha) {
function convertCase (line 794) | function convertCase(string, letterCase) {
function parseHex (line 799) | function parseHex(string, expand) {
function parseRgb (line 810) | function parseRgb(string, obj) {
function parseInput (line 849) | function parseInput(string, expand) {
function keepWithin (line 859) | function keepWithin(value, min, max) {
function isRgb (line 866) | function isRgb(string) {
function getAlpha (line 872) | function getAlpha(rgba) {
function hsb2rgb (line 878) | function hsb2rgb(hsb) {
function rgbString2hex (line 906) | function rgbString2hex(rgb){
function rgb2hex (line 915) | function rgb2hex(rgb) {
function hsb2hex (line 928) | function hsb2hex(hsb) {
function hex2hsb (line 933) | function hex2hsb(hex) {
function rgb2hsb (line 940) | function rgb2hsb(rgb) {
function hex2rgb (line 968) | function hex2rgb(hex) {
FILE: app/main.js
function createWindow (line 32) | function createWindow (needs_ffmpeg) {
function timemarkToSeconds (line 311) | function timemarkToSeconds(timemark) {
function parseProgressLine (line 338) | function parseProgressLine(line) {
function getFilesizeInBytes (line 360) | function getFilesizeInBytes(filename) {
FILE: app/renderer.js
function put_palette (line 435) | function put_palette(){
function rgb_to_hex (line 463) | function rgb_to_hex(r,g,b){
function read_palette (line 472) | function read_palette(img_src){
Condensed preview — 28 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (144K chars).
[
{
"path": ".gitignore",
"chars": 48,
"preview": "node_modules/\napp/node_modules\n.DS_Store\nbuild/\n"
},
{
"path": "README.md",
"chars": 63,
"preview": "# GifTuna\nA gif tuning application for Mac, Windows and Linux.\n"
},
{
"path": "app/.gitignore",
"chars": 13,
"preview": "node_modules\n"
},
{
"path": "app/LICENSE.md",
"chars": 6546,
"preview": "CC0 1.0 Universal\n==================\n\nStatement of Purpose\n---------------------\n\nThe laws of most jurisdictions through"
},
{
"path": "app/README.md",
"chars": 2328,
"preview": "# electron-quick-start\n\n**Clone and run for a quick way to see Electron in action.**\n\nThis is a minimal Electron applica"
},
{
"path": "app/css/slider.css",
"chars": 867,
"preview": "input[type=range] {\n -webkit-appearance: none;\n width: 100%;\n}\ninput[type=range]:disabled {\n opacity: 0.5;\n}\ninput[ty"
},
{
"path": "app/css/style.css",
"chars": 9727,
"preview": "body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", "
},
{
"path": "app/ffmpeg.html",
"chars": 1026,
"preview": "<!DOCTYPE html>\n<html ng-app=\"giftuna\">\n <head>\n <meta charset=\"UTF-8\">\n <title>GifTuna</title>\n <link rel=\"st"
},
{
"path": "app/index.html",
"chars": 8440,
"preview": "<!DOCTYPE html>\n<html ng-app=\"giftuna\">\n <head>\n <meta charset=\"UTF-8\">\n <title>GifTuna</title>\n <link rel=\"st"
},
{
"path": "app/lib/minicolors/LICENSE.md",
"chars": 1061,
"preview": "Copyright 2017 A Beautiful Site, LLC\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of th"
},
{
"path": "app/lib/minicolors/README.md",
"chars": 607,
"preview": "# jQuery MiniColors: A tiny color picker built on jQuery\n\nDeveloped by Cory LaViska for A Beautiful Site, LLC\n\nLicensed "
},
{
"path": "app/lib/minicolors/bower.json",
"chars": 453,
"preview": "{\n \"name\": \"jquery-minicolors\",\n \"version\": \"2.2.6\",\n \"homepage\": \"https://github.com/claviska/jquery-minicolors\",\n "
},
{
"path": "app/lib/minicolors/component.json",
"chars": 457,
"preview": "{\n \"name\": \"jquery-minicolors\",\n \"version\": \"2.2.6\",\n \"description\": \"jQuery MiniColors Plugin\",\n \"homepage\": \"\",\n "
},
{
"path": "app/lib/minicolors/composer.json",
"chars": 444,
"preview": "{\n \"name\": \"abeautifulsite/jquery-minicolors\",\n \"type\": \"component\",\n \"description\": \"jQuery MiniColors Plugin\",\n \"h"
},
{
"path": "app/lib/minicolors/gulpfile.js",
"chars": 814,
"preview": "/* eslint-env node, es6 */\n'use strict';\n\nconst gulp = require('gulp-help')(require('gulp'));\nconst del = require('del')"
},
{
"path": "app/lib/minicolors/index.html",
"chars": 23593,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <title>jQuery MiniColors</title>\n <meta charset=\"utf-8\">\n\n <!-- jQuery -->\n <script s"
},
{
"path": "app/lib/minicolors/jquery.minicolors.css",
"chars": 6061,
"preview": ".minicolors {\n position: relative;\n}\n\n.minicolors-sprite {\n background-image: url(jquery.minicolors.png);\n}\n\n.minicolo"
},
{
"path": "app/lib/minicolors/jquery.minicolors.js",
"chars": 34474,
"preview": "//\n// jQuery MiniColors: A tiny color picker built on jQuery\n//\n// Developed by Cory LaViska for A Beautiful Site, LLC\n/"
},
{
"path": "app/lib/minicolors/package.json",
"chars": 719,
"preview": "{\n \"name\": \"@claviska/jquery-minicolors\",\n \"version\": \"2.2.6\",\n \"homepage\": \"https://github.com/claviska/jquery-minic"
},
{
"path": "app/lib/minicolors/without-bootstrap.html",
"chars": 6121,
"preview": "<!doctype html>\n<html>\n<head>\n <title>jQuery MiniColors</title>\n <meta charset=\"utf-8\">\n\n <!-- jQuery -->\n <script s"
},
{
"path": "app/main.js",
"chars": 11308,
"preview": "const electron = require('electron')\n// Module to control application life.\nconst app = electron.app\n// Module to create"
},
{
"path": "app/package.json",
"chars": 415,
"preview": "{\n \"name\": \"GifTuna\",\n \"build\": {\n \"appId\": \"com.ndmweb.giftuna\",\n \"mac\": {\n \"category\": \"public.app-catego"
},
{
"path": "app/preview.html",
"chars": 233,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <title>GifTuna</title>\n <link rel=\"stylesheet\" href=\"c"
},
{
"path": "app/renderer.js",
"chars": 18411,
"preview": "// This file is required by the index.html file and will\n// be executed in the renderer process for that window.\n// All "
},
{
"path": "app/tpl/loader.html",
"chars": 745,
"preview": "<span class=\"spinner-icon\">\n <svg width='20px' height='20px' xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" p"
},
{
"path": "app/tpl/palette.html",
"chars": 800,
"preview": "<div class=\"pixel-palette\">\n <div class=\"pixel-pixels\">\n <a ng-click=\"pickMe($index,$event)\" ng-repeat=\"p in pixels "
},
{
"path": "package.json",
"chars": 912,
"preview": "{\n \"name\": \"gif-tuna\",\n \"version\": \"1.0.7\",\n \"description\": \"A modern cross-platform video to gif converter\",\n \"scri"
}
]
// ... and 1 more files (download for full content)
About this extraction
This page contains the full source code of the dudewheresmycode/GifTuna GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 28 files (133.5 KB), approximately 37.5k tokens, and a symbol index with 32 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.