Repository: Ghosh/cssFilters Branch: master Commit: 8d607e85b642 Files: 66 Total size: 680.2 KB Directory structure: gitextract_dxdd_390/ ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .scss-lint.yml ├── LICENSE.md ├── README.md ├── bower.json ├── build/ │ ├── CNAME │ ├── images/ │ │ └── icons/ │ │ ├── browserconfig.xml │ │ └── manifest.json │ ├── index.html │ ├── scripts/ │ │ ├── libs.js │ │ └── main.js │ └── styles/ │ └── main.css ├── gulpfile.js ├── package.json └── source/ ├── images/ │ └── icons/ │ ├── browserconfig.xml │ └── manifest.json ├── index.html ├── js/ │ ├── components/ │ │ ├── app.jsx │ │ ├── background.jsx │ │ ├── blendmode.jsx │ │ ├── codeblock.jsx │ │ ├── color.jsx │ │ ├── colorstop.jsx │ │ ├── colorswatch.jsx │ │ ├── gradientdirection.jsx │ │ ├── gradientposition.jsx │ │ ├── gradientsize.jsx │ │ ├── layout/ │ │ │ ├── gallery.jsx │ │ │ ├── main.jsx │ │ │ └── sidebar.jsx │ │ ├── overlaytype.jsx │ │ ├── photo.jsx │ │ ├── range.jsx │ │ ├── unsplashmodal.jsx │ │ └── uploadmodal.jsx │ ├── factory.js │ ├── inbox.js │ ├── presets.js │ ├── share.js │ ├── track.js │ └── vendor/ │ └── drag.js └── scss/ ├── config/ │ ├── _color.scss │ ├── _debug.scss │ └── _font-face.scss ├── core/ │ ├── _icons.scss │ ├── _layout.scss │ └── _typography.scss ├── inbox.scss ├── modules/ │ ├── _color.scss │ ├── _credits.scss │ ├── _dropdown.scss │ ├── _dropzone.scss │ ├── _gallery.scss │ ├── _header.scss │ ├── _modal.scss │ ├── _number.scss │ ├── _opts.scss │ ├── _photo.scss │ ├── _radio.scss │ ├── _range.scss │ ├── _slider.scss │ └── _tab.scss └── vendor/ ├── _nanoscroller.scss └── _social.scss ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintignore ================================================ build/**.js source/js/vendor/**.js ================================================ FILE: .eslintrc ================================================ { "env": { "browser": true, "node": true }, "rules":{ "camelcase": 1, "comma-dangle": 2, "quotes": [2, "single", "avoid-escape"] }, "parserOptions": { "ecmaVersion": 7, "sourceType": "module", "ecmaFeatures": { "jsx": true, } }, "plugins": [ ] } ================================================ FILE: .gitignore ================================================ node_modules/ bower_components/ source/CNAME .publish/ .DS_Store ================================================ FILE: .scss-lint.yml ================================================ files: include: '**/*.s+(a|c)ss' ignore: rules: # Consistency Rules extends-before-mixins: 1 extends-before-declarations: 1 mixins-before-declarations: 1 # Require an empty line between blocks empty-line-between-blocks: 1 no-empty-rulesets: 1 no-extends: 0 final-newline: 1 no-ids: 1 indentation: 1 no-important: 1 leading-zero: 1 nesting-depth: 1 placeholder-in-extend: 1 property-sort-order: 1 one-declaration-per-line: 1 single-line-per-selector: 1 space-after-comma: 1 # Space surrounding colons space-before-colon: 1 space-after-colon: 1 space-before-brace: 1 space-before-bang: 1 space-after-bang: 1 space-between-parens: 1 trailing-semicolon: 1 ================================================ FILE: LICENSE.md ================================================ MIT License Copyright (c) 2016 Indrashish Ghosh 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: README.md ================================================ # cssFilters.co This is the repo for [cssfilters.co](http://www.cssFilters.co) - A visual tool to create custom and instagram like photo filters in css. ### Credits * [Una Kravets](https://twitter.com/Una) - For the fantastic [cssgram](https://github.com/una/CSSgram) project * [Unsplash](https://unsplash.com/) - For collecting and providing the awesome demo images * [React](https://facebook.github.io/react/) - For being the most awesome js framework ever ### Improvements and Bugs Please feel free to open a new issue [here](https://github.com/Ghosh/cssFilters/issues) with your suggestions or any bugs which you may have come across. ### Contributing Incase you want to contribute to the source code, clone/download this repo and build the project locally. You would need to have `node` and `gulp` installed on your machine. There is only one gulp task which you would need - `gulp go`. This handles all the compiling and setup tasks. It accepts two optional flags:- * `--open` - Opens the project in your default browser after compilation * `--build` - Minifies and optimizes the stylesheets and scripts These flags can be passed together also. For example:- `gulp go --build --open`. This will open the browser and run the watch task in production mode. --- A little project by [@_ighosh](http://twitter.com/_ighosh). \m/ ================================================ FILE: bower.json ================================================ { "name": "cssFilters", "version": "1.0.0", "authors": [ "Indrashish " ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "stylekit": "*", "fetch": "~0.10.1", "sanitize-css": "~3.0.0" } } ================================================ FILE: build/CNAME ================================================ www.cssfilters.co ================================================ FILE: build/images/icons/browserconfig.xml ================================================ #00aba9 ================================================ FILE: build/images/icons/manifest.json ================================================ { "name": "cssFilters", "icons": [ { "src": "\/images\/icons\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png", "density": "0.75" }, { "src": "\/images\/icons\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density": "1.0" }, { "src": "\/images\/icons\/android-chrome-72x72.png", "sizes": "72x72", "type": "image\/png", "density": "1.5" }, { "src": "\/images\/icons\/android-chrome-96x96.png", "sizes": "96x96", "type": "image\/png", "density": "2.0" }, { "src": "\/images\/icons\/android-chrome-144x144.png", "sizes": "144x144", "type": "image\/png", "density": "3.0" }, { "src": "\/images\/icons\/android-chrome-192x192.png", "sizes": "192x192", "type": "image\/png", "density": "4.0" } ] } ================================================ FILE: build/index.html ================================================ cssFilters.co - Custom and Instagram like photo filters for CSS
================================================ FILE: build/scripts/libs.js ================================================ require=function e(t,n,r){function o(i,s){if(!n[i]){if(!t[i]){var l="function"==typeof require&&require;if(!s&&l)return l(i,!0);if(a)return a(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var u=n[i]={exports:{}};t[i][0].call(u.exports,function(e){var n=t[i][1][e];return o(n||e)},u,u.exports,e,t,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i1?t-1:0),r=1;r2?r-2:0),a=2;ad))return!1;var h=u.get(e);if(h&&u.get(t))return h==t;var v=-1,g=!0,m=n&s?new r:void 0;for(u.set(e,t),u.set(t,e);++v-1&&e%1==0&&e-1}},{"./_assocIndexOf":26}],109:[function(e,t,n){var r=e("./_assocIndexOf");t.exports=function(e,t){var n=this.__data__,o=r(n,e);return o<0?(++this.size,n.push([e,t])):n[o][1]=t,this}},{"./_assocIndexOf":26}],110:[function(e,t,n){var r=e("./_Hash"),o=e("./_ListCache"),a=e("./_Map");t.exports=function(){this.size=0,this.__data__={hash:new r,map:new(a||o),string:new r}}},{"./_Hash":5,"./_ListCache":6,"./_Map":7}],111:[function(e,t,n){var r=e("./_getMapData");t.exports=function(e){var t=r(this,e).delete(e);return this.size-=t?1:0,t}},{"./_getMapData":81}],112:[function(e,t,n){var r=e("./_getMapData");t.exports=function(e){return r(this,e).get(e)}},{"./_getMapData":81}],113:[function(e,t,n){var r=e("./_getMapData");t.exports=function(e){return r(this,e).has(e)}},{"./_getMapData":81}],114:[function(e,t,n){var r=e("./_getMapData");t.exports=function(e,t){var n=r(this,e),o=n.size;return n.set(e,t),this.size+=n.size==o?0:1,this}},{"./_getMapData":81}],115:[function(e,t,n){t.exports=function(e){var t=-1,n=Array(e.size);return e.forEach(function(e,r){n[++t]=[r,e]}),n}},{}],116:[function(e,t,n){t.exports=function(e,t){return function(n){return null!=n&&n[e]===t&&(void 0!==t||e in Object(n))}}},{}],117:[function(e,t,n){var r=e("./memoize"),o=500;t.exports=function(e){var t=r(e,function(e){return n.size===o&&n.clear(),e}),n=t.cache;return t}},{"./memoize":160}],118:[function(e,t,n){var r=e("./_getNative")(Object,"create");t.exports=r},{"./_getNative":83}],119:[function(e,t,n){var r=e("./_overArg")(Object.keys,Object);t.exports=r},{"./_overArg":123}],120:[function(e,t,n){t.exports=function(e){var t=[];if(null!=e)for(var n in Object(e))t.push(n);return t}},{}],121:[function(e,t,n){var r=e("./_freeGlobal"),o="object"==typeof n&&n&&!n.nodeType&&n,a=o&&"object"==typeof t&&t&&!t.nodeType&&t,i=a&&a.exports===o&&r.process,s=function(){try{return i&&i.binding&&i.binding("util")}catch(e){}}();t.exports=s},{"./_freeGlobal":78}],122:[function(e,t,n){var r=Object.prototype.toString;t.exports=function(e){return r.call(e)}},{}],123:[function(e,t,n){t.exports=function(e,t){return function(n){return e(t(n))}}},{}],124:[function(e,t,n){var r=e("./_freeGlobal"),o="object"==typeof self&&self&&self.Object===Object&&self,a=r||o||Function("return this")();t.exports=a},{"./_freeGlobal":78}],125:[function(e,t,n){var r="__lodash_hash_undefined__";t.exports=function(e){return this.__data__.set(e,r),this}},{}],126:[function(e,t,n){t.exports=function(e){return this.__data__.has(e)}},{}],127:[function(e,t,n){t.exports=function(e){var t=-1,n=Array(e.size);return e.forEach(function(e){n[++t]=e}),n}},{}],128:[function(e,t,n){var r=e("./_ListCache");t.exports=function(){this.__data__=new r,this.size=0}},{"./_ListCache":6}],129:[function(e,t,n){t.exports=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n}},{}],130:[function(e,t,n){t.exports=function(e){return this.__data__.get(e)}},{}],131:[function(e,t,n){t.exports=function(e){return this.__data__.has(e)}},{}],132:[function(e,t,n){var r=e("./_ListCache"),o=e("./_Map"),a=e("./_MapCache"),i=200;t.exports=function(e,t){var n=this.__data__;if(n instanceof r){var s=n.__data__;if(!o||s.length=t||n<0||C&&r>=b}function f(){var e=o();if(d(e))return h(e);_=setTimeout(f,p(e))}function h(e){return _=void 0,O&&g?c(e):(g=m=void 0,y)}function v(){var e=o(),n=d(e);if(g=arguments,m=this,E=e,n){if(void 0===_)return u(E);if(C)return _=setTimeout(f,t),c(E)}return void 0===_&&(_=setTimeout(f,t)),y}var g,m,b,y,_,E,x=0,w=!1,C=!1,O=!0;if("function"!=typeof e)throw new TypeError(i);return t=a(t)||0,r(n)&&(w=!!n.leading,b=(C="maxWait"in n)?s(a(n.maxWait)||0,t):b,O="trailing"in n?!!n.trailing:O),v.cancel=function(){void 0!==_&&clearTimeout(_),x=0,g=E=m=_=void 0},v.flush=function(){return void 0===_?y:h(o())},v}},{"./isObject":151,"./now":161,"./toNumber":166}],138:[function(e,t,n){t.exports=e("./forEach")},{"./forEach":140}],139:[function(e,t,n){t.exports=function(e,t){return e===t||e!==e&&t!==t}},{}],140:[function(e,t,n){var r=e("./_arrayEach"),o=e("./_baseEach"),a=e("./_castFunction"),i=e("./isArray");t.exports=function(e,t){return(i(e)?r:o)(e,a(t))}},{"./_arrayEach":18,"./_baseEach":32,"./_castFunction":57,"./isArray":146}],141:[function(e,t,n){var r=e("./_baseForOwn"),o=e("./_castFunction");t.exports=function(e,t){return e&&r(e,o(t))}},{"./_baseForOwn":34,"./_castFunction":57}],142:[function(e,t,n){var r=e("./_baseGet");t.exports=function(e,t,n){var o=null==e?void 0:r(e,t);return void 0===o?n:o}},{"./_baseGet":35}],143:[function(e,t,n){var r=e("./_baseHasIn"),o=e("./_hasPath");t.exports=function(e,t){return null!=e&&o(e,t,r)}},{"./_baseHasIn":38,"./_hasPath":90}],144:[function(e,t,n){t.exports=function(e){return e}},{}],145:[function(e,t,n){var r=e("./_baseIsArguments"),o=e("./isObjectLike"),a=Object.prototype,i=a.hasOwnProperty,s=a.propertyIsEnumerable,l=r(function(){return arguments}())?r:function(e){return o(e)&&i.call(e,"callee")&&!s.call(e,"callee")};t.exports=l},{"./_baseIsArguments":39,"./isObjectLike":152}],146:[function(e,t,n){var r=Array.isArray;t.exports=r},{}],147:[function(e,t,n){var r=e("./isFunction"),o=e("./isLength");t.exports=function(e){return null!=e&&o(e.length)&&!r(e)}},{"./isFunction":149,"./isLength":150}],148:[function(e,t,n){var r=e("./_root"),o=e("./stubFalse"),a="object"==typeof n&&n&&!n.nodeType&&n,i=a&&"object"==typeof t&&t&&!t.nodeType&&t,s=i&&i.exports===a?r.Buffer:void 0,l=(s?s.isBuffer:void 0)||o;t.exports=l},{"./_root":124,"./stubFalse":164}],149:[function(e,t,n){var r=e("./_baseGetTag"),o=e("./isObject"),a="[object AsyncFunction]",i="[object Function]",s="[object GeneratorFunction]",l="[object Proxy]";t.exports=function(e){if(!o(e))return!1;var t=r(e);return t==i||t==s||t==a||t==l}},{"./_baseGetTag":37,"./isObject":151}],150:[function(e,t,n){var r=9007199254740991;t.exports=function(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=r}},{}],151:[function(e,t,n){t.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},{}],152:[function(e,t,n){t.exports=function(e){return null!=e&&"object"==typeof e}},{}],153:[function(e,t,n){var r=e("./_baseGetTag"),o=e("./_getPrototype"),a=e("./isObjectLike"),i="[object Object]",s=Function.prototype,l=Object.prototype,c=s.toString,u=l.hasOwnProperty,p=c.call(Object);t.exports=function(e){if(!a(e)||r(e)!=i)return!1;var t=o(e);if(null===t)return!0;var n=u.call(t,"constructor")&&t.constructor;return"function"==typeof n&&n instanceof n&&c.call(n)==p}},{"./_baseGetTag":37,"./_getPrototype":84,"./isObjectLike":152}],154:[function(e,t,n){var r=e("./_baseGetTag"),o=e("./isArray"),a=e("./isObjectLike"),i="[object String]";t.exports=function(e){return"string"==typeof e||!o(e)&&a(e)&&r(e)==i}},{"./_baseGetTag":37,"./isArray":146,"./isObjectLike":152}],155:[function(e,t,n){var r=e("./_baseGetTag"),o=e("./isObjectLike"),a="[object Symbol]";t.exports=function(e){return"symbol"==typeof e||o(e)&&r(e)==a}},{"./_baseGetTag":37,"./isObjectLike":152}],156:[function(e,t,n){var r=e("./_baseIsTypedArray"),o=e("./_baseUnary"),a=e("./_nodeUtil"),i=a&&a.isTypedArray,s=i?o(i):r;t.exports=s},{"./_baseIsTypedArray":44,"./_baseUnary":55,"./_nodeUtil":121}],157:[function(e,t,n){var r=e("./_arrayLikeKeys"),o=e("./_baseKeys"),a=e("./isArrayLike");t.exports=function(e){return a(e)?r(e):o(e)}},{"./_arrayLikeKeys":20,"./_baseKeys":46,"./isArrayLike":147}],158:[function(e,t,n){var r=e("./_arrayLikeKeys"),o=e("./_baseKeysIn"),a=e("./isArrayLike");t.exports=function(e){return a(e)?r(e,!0):o(e)}},{"./_arrayLikeKeys":20,"./_baseKeysIn":47,"./isArrayLike":147}],159:[function(e,t,n){var r=e("./_arrayMap"),o=e("./_baseIteratee"),a=e("./_baseMap"),i=e("./isArray");t.exports=function(e,t){return(i(e)?r:a)(e,o(t,3))}},{"./_arrayMap":21,"./_baseIteratee":45,"./_baseMap":48,"./isArray":146}],160:[function(e,t,n){function r(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError(a);var n=function(){var r=arguments,o=t?t.apply(this,r):r[0],a=n.cache;if(a.has(o))return a.get(o);var i=e.apply(this,r);return n.cache=a.set(o,i)||a,i};return n.cache=new(r.Cache||o),n}var o=e("./_MapCache"),a="Expected a function";r.Cache=o,t.exports=r},{"./_MapCache":8}],161:[function(e,t,n){var r=e("./_root");t.exports=function(){return r.Date.now()}},{"./_root":124}],162:[function(e,t,n){var r=e("./_baseProperty"),o=e("./_basePropertyDeep"),a=e("./_isKey"),i=e("./_toKey");t.exports=function(e){return a(e)?r(i(e)):o(e)}},{"./_baseProperty":51,"./_basePropertyDeep":52,"./_isKey":100,"./_toKey":134}],163:[function(e,t,n){t.exports=function(){return[]}},{}],164:[function(e,t,n){t.exports=function(){return!1}},{}],165:[function(e,t,n){var r=e("./debounce"),o=e("./isObject"),a="Expected a function";t.exports=function(e,t,n){var i=!0,s=!0;if("function"!=typeof e)throw new TypeError(a);return o(n)&&(i="leading"in n?!!n.leading:i,s="trailing"in n?!!n.trailing:s),r(e,t,{leading:i,maxWait:t,trailing:s})}},{"./debounce":137,"./isObject":151}],166:[function(e,t,n){var r=e("./isObject"),o=e("./isSymbol"),a=NaN,i=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt;t.exports=function(e){if("number"==typeof e)return e;if(o(e))return a;if(r(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=r(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(i,"");var n=l.test(e);return n||c.test(e)?u(e.slice(2),n?2:8):s.test(e)?a:+e}},{"./isObject":151,"./isSymbol":155}],167:[function(e,t,n){var r=e("./_baseToString");t.exports=function(e){return null==e?"":r(e)}},{"./_baseToString":54}],168:[function(e,t,n){!function(e,r){"function"==typeof define&&define.amd?define([],r):"object"==typeof n?t.exports={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff"},deepPurple:{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff"},lightBlue:{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853"},lightGreen:{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00"},deepOrange:{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00"},brown:{50:"#efebe9",100:"#d7ccc8",200:"#bcaaa4",300:"#a1887f",400:"#8d6e63",500:"#795548",600:"#6d4c41",700:"#5d4037",800:"#4e342e",900:"#3e2723"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},blueGrey:{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238"},darkText:{primary:"rgba(0, 0, 0, 0.87)",secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)",dividers:"rgba(0, 0, 0, 0.12)"},lightText:{primary:"rgba(255, 255, 255, 1)",secondary:"rgba(255, 255, 255, 0.7)",disabled:"rgba(255, 255, 255, 0.5)",dividers:"rgba(255, 255, 255, 0.12)"},darkIcons:{active:"rgba(0, 0, 0, 0.54)",inactive:"rgba(0, 0, 0, 0.38)"},lightIcons:{active:"rgba(255, 255, 255, 1)",inactive:"rgba(255, 255, 255, 0.5)"},white:"#ffffff",black:"#000000"}:e.materialColors={red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff"},deepPurple:{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff"},lightBlue:{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853"},lightGreen:{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00"},deepOrange:{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00"},brown:{50:"#efebe9",100:"#d7ccc8",200:"#bcaaa4",300:"#a1887f",400:"#8d6e63",500:"#795548",600:"#6d4c41",700:"#5d4037",800:"#4e342e",900:"#3e2723"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},blueGrey:{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238"},darkText:{primary:"rgba(0, 0, 0, 0.87)",secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)",dividers:"rgba(0, 0, 0, 0.12)"},lightText:{primary:"rgba(255, 255, 255, 1)",secondary:"rgba(255, 255, 255, 0.7)",disabled:"rgba(255, 255, 255, 0.5)",dividers:"rgba(255, 255, 255, 0.12)"},darkIcons:{active:"rgba(0, 0, 0, 0.54)",inactive:"rgba(0, 0, 0, 0.38)"},lightIcons:{active:"rgba(255, 255, 255, 1)",inactive:"rgba(255, 255, 255, 0.5)"},white:"#ffffff",black:"#000000"}}(this,function(){return{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff"},deepPurple:{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff"},lightBlue:{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853"},lightGreen:{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00"},deepOrange:{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00"},brown:{50:"#efebe9",100:"#d7ccc8",200:"#bcaaa4",300:"#a1887f",400:"#8d6e63",500:"#795548",600:"#6d4c41",700:"#5d4037",800:"#4e342e",900:"#3e2723"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},blueGrey:{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238"},darkText:{primary:"rgba(0, 0, 0, 0.87)",secondary:"rgba(0, 0, 0, 0.54)",disabled:"rgba(0, 0, 0, 0.38)",dividers:"rgba(0, 0, 0, 0.12)"},lightText:{primary:"rgba(255, 255, 255, 1)",secondary:"rgba(255, 255, 255, 0.7)",disabled:"rgba(255, 255, 255, 0.5)",dividers:"rgba(255, 255, 255, 0.12)"},darkIcons:{active:"rgba(0, 0, 0, 0.54)",inactive:"rgba(0, 0, 0, 0.38)"},lightIcons:{active:"rgba(255, 255, 255, 1)",inactive:"rgba(255, 255, 255, 0.5)"},white:"#ffffff",black:"#000000"}})},{}],169:[function(e,t,n){function r(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function a(e){if(p===setTimeout)return setTimeout(e,0);if((p===r||!p)&&setTimeout)return p=setTimeout,setTimeout(e,0);try{return p(e,0)}catch(t){try{return p.call(null,e,0)}catch(t){return p.call(this,e,0)}}}function i(e){if(d===clearTimeout)return clearTimeout(e);if((d===o||!d)&&clearTimeout)return d=clearTimeout,clearTimeout(e);try{return d(e)}catch(t){try{return d.call(null,e)}catch(t){return d.call(this,e)}}}function s(){g&&h&&(g=!1,h.length?v=h.concat(v):m=-1,v.length&&l())}function l(){if(!g){var e=a(s);g=!0;for(var t=v.length;t;){for(h=v,v=[];++m1)for(var n=1;n1&&(e.a=1),r.props.onChange({h:r.props.hsl.h,s:r.props.hsl.s,l:r.props.hsl.l,a:Math.round(100*e.a)/100,source:"rgb"},t)):(e.h||e.s||e.l)&&r.props.onChange({h:e.h||r.props.hsl.h,s:e.s&&e.s||r.props.hsl.s,l:e.l&&e.l||r.props.hsl.l,source:"hsl"},t)},r.showHighlight=function(e){e.target.style.background="#eee"},r.hideHighlight=function(e){e.target.style.background="transparent"},i=n,a(r,i)}return i(t,l.default.Component),s(t,[{key:"componentDidMount",value:function(){1===this.props.hsl.a&&"hex"!==this.state.view?this.setState({view:"hex"}):"rgb"!==this.state.view&&"hsl"!==this.state.view&&this.setState({view:"rgb"})}},{key:"componentWillReceiveProps",value:function(e){1!==e.hsl.a&&"hex"===this.state.view&&this.setState({view:"rgb"})}},{key:"render",value:function(){var e=this,t=(0,c.default)({default:{wrap:{paddingTop:"16px",display:"flex"},fields:{flex:"1",display:"flex",marginLeft:"-6px"},field:{paddingLeft:"6px",width:"100%"},alpha:{paddingLeft:"6px",width:"100%"},toggle:{width:"32px",textAlign:"right",position:"relative"},icon:{marginRight:"-4px",marginTop:"12px",cursor:"pointer",position:"relative"},iconHighlight:{position:"absolute",width:"24px",height:"28px",background:"#eee",borderRadius:"4px",top:"10px",left:"12px",display:"none"},input:{fontSize:"11px",color:"#333",width:"100%",borderRadius:"2px",border:"none",boxShadow:"inset 0 0 0 1px #dadada",height:"21px",textAlign:"center"},label:{textTransform:"uppercase",fontSize:"11px",lineHeight:"11px",color:"#969696",textAlign:"center",display:"block",marginTop:"12px"},svg:{width:"24px",height:"24px",border:"1px transparent solid",borderRadius:"5px"}},disableAlpha:{alpha:{display:"none"}}},this.props,this.state),n=void 0;return"hex"===this.state.view?n=l.default.createElement("div",{style:t.fields,className:"flexbox-fix"},l.default.createElement("div",{style:t.field},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"hex",value:this.props.hex,onChange:this.handleChange}))):"rgb"===this.state.view?n=l.default.createElement("div",{style:t.fields,className:"flexbox-fix"},l.default.createElement("div",{style:t.field},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"r",value:this.props.rgb.r,onChange:this.handleChange})),l.default.createElement("div",{style:t.field},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"g",value:this.props.rgb.g,onChange:this.handleChange})),l.default.createElement("div",{style:t.field},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"b",value:this.props.rgb.b,onChange:this.handleChange})),l.default.createElement("div",{style:t.alpha},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"a",value:this.props.rgb.a,arrowOffset:.01,onChange:this.handleChange}))):"hsl"===this.state.view&&(n=l.default.createElement("div",{style:t.fields,className:"flexbox-fix"},l.default.createElement("div",{style:t.field},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"h",value:Math.round(this.props.hsl.h),onChange:this.handleChange})),l.default.createElement("div",{style:t.field},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"s",value:Math.round(100*this.props.hsl.s)+"%",onChange:this.handleChange})),l.default.createElement("div",{style:t.field},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"l",value:Math.round(100*this.props.hsl.l)+"%",onChange:this.handleChange})),l.default.createElement("div",{style:t.alpha},l.default.createElement(p.EditableInput,{style:{input:t.input,label:t.label},label:"a",value:this.props.hsl.a,arrowOffset:.01,onChange:this.handleChange})))),l.default.createElement("div",{style:t.wrap,className:"flexbox-fix"},n,l.default.createElement("div",{style:t.toggle},l.default.createElement("div",{style:t.icon,onClick:this.toggleViews,ref:function(t){return e.icon=t}},l.default.createElement("svg",{style:t.svg,viewBox:"0 0 24 24",onMouseOver:this.showHighlight,onMouseEnter:this.showHighlight,onMouseOut:this.hideHighlight},l.default.createElement("path",{ref:function(t){return e.iconUp=t},fill:"#333",d:"M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"}),l.default.createElement("path",{ref:function(t){return e.iconDown=t},fill:"#333",d:"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"})))))}}]),t}();n.default=d},{"../../helpers/color":221,"../common":193,react:"react",reactcss:384}],181:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.ChromePointer=void 0;var o=r(e("react")),a=r(e("reactcss")),i=n.ChromePointer=function(){var e=(0,a.default)({default:{picker:{width:"12px",height:"12px",borderRadius:"6px",transform:"translate(-6px, -1px)",backgroundColor:"rgb(248, 248, 248)",boxShadow:"0 1px 4px 0 rgba(0, 0, 0, 0.37)"}}});return o.default.createElement("div",{style:e.picker})};n.default=i},{react:"react",reactcss:384}],182:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.ChromePointerCircle=void 0;var o=r(e("react")),a=r(e("reactcss")),i=n.ChromePointerCircle=function(){var e=(0,a.default)({default:{picker:{width:"12px",height:"12px",borderRadius:"6px",boxShadow:"inset 0 0 0 1px #fff",transform:"translate(-6px, -6px)"}}});return o.default.createElement("div",{style:e.picker})};n.default=i},{react:"react",reactcss:384}],183:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Circle=void 0;var o=r(e("react")),a=r(e("prop-types")),i=r(e("reactcss")),s=r(e("lodash/map")),l=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}(e("material-colors")),c=e("../common"),u=r(e("./CircleSwatch")),p=n.Circle=function(e){var t=e.width,n=e.onChange,r=e.onSwatchHover,a=e.colors,l=e.hex,c=e.circleSize,p=e.circleSpacing,d=e.className,f=void 0===d?"":d,h=(0,i.default)({default:{card:{width:t,display:"flex",flexWrap:"wrap",marginRight:-p,marginBottom:-p}}}),v=function(e,t){return n({hex:e,source:"hex"},t)};return o.default.createElement("div",{style:h.card,className:"circle-picker "+f},(0,s.default)(a,function(e){return o.default.createElement(u.default,{key:e,color:e,onClick:v,onSwatchHover:r,active:l===e.toLowerCase(),circleSize:c,circleSpacing:p})}))};p.propTypes={width:a.default.oneOfType([a.default.string,a.default.number]),circleSize:a.default.number,circleSpacing:a.default.number},p.defaultProps={width:252,circleSize:28,circleSpacing:14,colors:[l.red[500],l.pink[500],l.purple[500],l.deepPurple[500],l.indigo[500],l.blue[500],l.lightBlue[500],l.cyan[500],l.teal[500],l.green[500],l.lightGreen[500],l.lime[500],l.yellow[500],l.amber[500],l.orange[500],l.deepOrange[500],l.brown[500],l.blueGrey[500]]},n.default=(0,c.ColorWrap)(p)},{"../common":193,"./CircleSwatch":184,"lodash/map":159,"material-colors":168,"prop-types":173,react:"react",reactcss:384}],184:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.CircleSwatch=void 0;var o=r(e("react")),a=e("reactcss"),i=r(a),s=e("../common"),l=n.CircleSwatch=function(e){var t=e.color,n=e.onClick,r=e.onSwatchHover,a=e.hover,l=e.active,c=e.circleSize,u=e.circleSpacing,p=(0,i.default)({default:{swatch:{width:c,height:c,marginRight:u,marginBottom:u,transform:"scale(1)",transition:"100ms transform ease"},Swatch:{borderRadius:"50%",background:"transparent",boxShadow:"inset 0 0 0 "+c/2+"px "+t,transition:"100ms box-shadow ease"}},hover:{swatch:{transform:"scale(1.2)"}},active:{Swatch:{boxShadow:"inset 0 0 0 3px "+t}}},{hover:a,active:l});return o.default.createElement("div",{style:p.swatch},o.default.createElement(s.Swatch,{style:p.Swatch,color:t,onClick:n,onHover:r,focusStyle:{boxShadow:p.Swatch.boxShadow+", 0 0 5px "+t}}))};l.defaultProps={circleSize:28,circleSpacing:14},n.default=(0,a.handleHover)(l)},{"../common":193,react:"react",reactcss:384}],185:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0}),n.Alpha=void 0;var s=Object.assign||function(e){for(var t=1;t-1,a=Number(t.replace(/%/g,""));if(!isNaN(a)){var i=n.props.arrowOffset||1;38===e.keyCode&&(null!==n.props.label?n.props.onChange&&n.props.onChange(o({},n.props.label,a+i),e):n.props.onChange&&n.props.onChange(a+i,e),r?n.setState({value:a+i+"%"}):n.setState({value:a+i})),40===e.keyCode&&(null!==n.props.label?n.props.onChange&&n.props.onChange(o({},n.props.label,a-i),e):n.props.onChange&&n.props.onChange(a-i,e),r?n.setState({value:a-i+"%"}):n.setState({value:a-i}))}},n.handleDrag=function(e){if(n.props.dragLabel){var t=Math.round(n.props.value+e.movementX);t>=0&&t<=n.props.dragMax&&n.props.onChange&&n.props.onChange(o({},n.props.label,t),e)}},n.handleMouseDown=function(e){n.props.dragLabel&&(e.preventDefault(),n.handleDrag(e),window.addEventListener("mousemove",n.handleDrag),window.addEventListener("mouseup",n.handleMouseUp))},n.handleMouseUp=function(){n.unbindEventListeners()},n.unbindEventListeners=function(){window.removeEventListener("mousemove",n.handleDrag),window.removeEventListener("mouseup",n.handleMouseUp)},n.state={value:String(e.value).toUpperCase(),blurValue:String(e.value).toUpperCase()},n}return s(t,c.PureComponent||c.Component),l(t,[{key:"componentWillReceiveProps",value:function(e){var t=this.input;e.value!==this.state.value&&(t===document.activeElement?this.setState({blurValue:String(e.value).toUpperCase()}):this.setState({value:String(e.value).toUpperCase()}))}},{key:"componentWillUnmount",value:function(){this.unbindEventListeners()}},{key:"render",value:function(){var e=this,t=(0,p.default)({default:{wrap:{position:"relative"}},"user-override":{wrap:this.props.style&&this.props.style.wrap?this.props.style.wrap:{},input:this.props.style&&this.props.style.input?this.props.style.input:{},label:this.props.style&&this.props.style.label?this.props.style.label:{}},"dragLabel-true":{label:{cursor:"ew-resize"}}},{"user-override":!0},this.props);return u.default.createElement("div",{style:t.wrap},u.default.createElement("input",{style:t.input,ref:function(t){return e.input=t},value:this.state.value,onKeyDown:this.handleKeyDown,onChange:this.handleChange,onBlur:this.handleBlur,placeholder:this.props.placeholder,spellCheck:"false"}),this.props.label?u.default.createElement("span",{style:t.label,onMouseDown:this.handleMouseDown},this.props.label):null)}}]),t}();n.default=d},{react:"react",reactcss:384}],189:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0}),n.Hue=void 0;var s=function(){function e(e,t){for(var n=0;n.5});return o.default.createElement("div",{style:n.picker})};n.default=i},{react:"react",reactcss:384}],207:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.PhotoshopPreviews=void 0;var o=r(e("react")),a=r(e("reactcss")),i=n.PhotoshopPreviews=function(e){var t=e.rgb,n=e.currentColor,r=(0,a.default)({default:{swatches:{border:"1px solid #B3B3B3",borderBottom:"1px solid #F0F0F0",marginBottom:"2px",marginTop:"1px"},new:{height:"34px",background:"rgb("+t.r+","+t.g+", "+t.b+")",boxShadow:"inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000"},current:{height:"34px",background:n,boxShadow:"inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000"},label:{fontSize:"14px",color:"#000",textAlign:"center"}}});return o.default.createElement("div",null,o.default.createElement("div",{style:r.label},"new"),o.default.createElement("div",{style:r.swatches},o.default.createElement("div",{style:r.new}),o.default.createElement("div",{style:r.current})),o.default.createElement("div",{style:r.label},"current"))};n.default=i},{react:"react",reactcss:384}],208:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.Sketch=void 0;var o=r(e("react")),a=r(e("prop-types")),i=r(e("reactcss")),s=e("../common"),l=r(e("./SketchFields")),c=r(e("./SketchPresetColors")),u=n.Sketch=function(e){var t=e.width,n=e.rgb,r=e.hex,a=e.hsv,u=e.hsl,p=e.onChange,d=e.onSwatchHover,f=e.disableAlpha,h=e.presetColors,v=e.renderers,g=e.className,m=void 0===g?"":g,b=(0,i.default)({default:{picker:{width:t,padding:"10px 10px 0",boxSizing:"initial",background:"#fff",borderRadius:"4px",boxShadow:"0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"},saturation:{width:"100%",paddingBottom:"75%",position:"relative",overflow:"hidden"},Saturation:{radius:"3px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},controls:{display:"flex"},sliders:{padding:"4px 0",flex:"1"},color:{width:"24px",height:"24px",position:"relative",marginTop:"4px",marginLeft:"4px",borderRadius:"3px"},activeColor:{absolute:"0px 0px 0px 0px",borderRadius:"2px",background:"rgba("+n.r+","+n.g+","+n.b+","+n.a+")",boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},hue:{position:"relative",height:"10px",overflow:"hidden"},Hue:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},alpha:{position:"relative",height:"10px",marginTop:"4px",overflow:"hidden"},Alpha:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"}},disableAlpha:{color:{height:"10px"},hue:{height:"10px"},alpha:{display:"none"}}},{disableAlpha:f});return o.default.createElement("div",{style:b.picker,className:"sketch-picker "+m},o.default.createElement("div",{style:b.saturation},o.default.createElement(s.Saturation,{style:b.Saturation,hsl:u,hsv:a,onChange:p})),o.default.createElement("div",{style:b.controls,className:"flexbox-fix"},o.default.createElement("div",{style:b.sliders},o.default.createElement("div",{style:b.hue},o.default.createElement(s.Hue,{style:b.Hue,hsl:u,onChange:p})),o.default.createElement("div",{style:b.alpha},o.default.createElement(s.Alpha,{style:b.Alpha,rgb:n,hsl:u,renderers:v,onChange:p}))),o.default.createElement("div",{style:b.color},o.default.createElement(s.Checkboard,null),o.default.createElement("div",{style:b.activeColor}))),o.default.createElement(l.default,{rgb:n,hsl:u,hex:r,onChange:p,disableAlpha:f}),o.default.createElement(c.default,{colors:h,onClick:p,onSwatchHover:d}))};u.propTypes={disableAlpha:a.default.bool,width:a.default.oneOfType([a.default.string,a.default.number])},u.defaultProps={disableAlpha:!1,width:200,presetColors:["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"]},n.default=(0,s.ColorWrap)(u)},{"../common":193,"./SketchFields":209,"./SketchPresetColors":210,"prop-types":173,react:"react",reactcss:384}],209:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.SketchFields=void 0;var o=r(e("react")),a=r(e("reactcss")),i=r(e("../../helpers/color")),s=e("../common"),l=n.SketchFields=function(e){var t=e.onChange,n=e.rgb,r=e.hsl,l=e.hex,c=e.disableAlpha,u=(0,a.default)({default:{fields:{display:"flex",paddingTop:"4px"},single:{flex:"1",paddingLeft:"6px"},alpha:{flex:"1",paddingLeft:"6px"},double:{flex:"2"},input:{width:"80%",padding:"4px 10% 3px",border:"none",boxShadow:"inset 0 0 0 1px #ccc",fontSize:"11px"},label:{display:"block",textAlign:"center",fontSize:"11px",color:"#222",paddingTop:"3px",paddingBottom:"4px",textTransform:"capitalize"}},disableAlpha:{alpha:{display:"none"}}},{disableAlpha:c}),p=function(e,o){e.hex?i.default.isValidHex(e.hex)&&t({hex:e.hex,source:"hex"},o):e.r||e.g||e.b?t({r:e.r||n.r,g:e.g||n.g,b:e.b||n.b,a:n.a,source:"rgb"},o):e.a&&(e.a<0?e.a=0:e.a>100&&(e.a=100),e.a/=100,t({h:r.h,s:r.s,l:r.l,a:e.a,source:"rgb"},o))};return o.default.createElement("div",{style:u.fields,className:"flexbox-fix"},o.default.createElement("div",{style:u.double},o.default.createElement(s.EditableInput,{style:{input:u.input,label:u.label},label:"hex",value:l.replace("#",""),onChange:p})),o.default.createElement("div",{style:u.single},o.default.createElement(s.EditableInput,{style:{input:u.input,label:u.label},label:"r",value:n.r,onChange:p,dragLabel:"true",dragMax:"255"})),o.default.createElement("div",{style:u.single},o.default.createElement(s.EditableInput,{style:{input:u.input,label:u.label},label:"g",value:n.g,onChange:p,dragLabel:"true",dragMax:"255"})),o.default.createElement("div",{style:u.single},o.default.createElement(s.EditableInput,{style:{input:u.input,label:u.label},label:"b",value:n.b,onChange:p,dragLabel:"true",dragMax:"255"})),o.default.createElement("div",{style:u.alpha},o.default.createElement(s.EditableInput,{style:{input:u.input,label:u.label},label:"a",value:Math.round(100*n.a),onChange:p,dragLabel:"true",dragMax:"100"})))};n.default=l},{"../../helpers/color":221,"../common":193,react:"react",reactcss:384}],210:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.SketchPresetColors=void 0;var o=Object.assign||function(e){for(var t=1;ta?1:Math.round(100*c/a)/100,n.hsl.a!==u)return{h:n.hsl.h,s:n.hsl.s,l:n.hsl.l,a:u,source:"rgb"}}else{var p=void 0;if(p=l<0?0:l>o?1:Math.round(100*l/o)/100,n.a!==p)return{h:n.hsl.h,s:n.hsl.s,l:n.hsl.l,a:p,source:"rgb"}}return null}},{}],220:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r={},o=n.render=function(e,t,n,r){if("undefined"==typeof document&&!r)return null;var o=r?new r:document.createElement("canvas");o.width=2*n,o.height=2*n;var a=o.getContext("2d");return a?(a.fillStyle=e,a.fillRect(0,0,o.width,o.height),a.fillStyle=t,a.fillRect(0,0,n,n),a.translate(n,n),a.fillRect(0,0,n,n),o.toDataURL()):null};n.get=function(e,t,n,a){var i=e+"-"+t+"-"+n+(a?"-server":""),s=o(e,t,n,a);return r[i]?r[i]:(r[i]=s,s)}},{}],221:[function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.red=void 0;var o=r(e("lodash/each")),a=r(e("tinycolor2"));n.default={simpleCheckForValidColor:function(e){var t=["r","g","b","a","h","s","l","v"],n=0,r=0;return(0,o.default)(t,function(t){e[t]&&(n+=1,isNaN(e[t])||(r+=1))}),n===r&&e},toState:function(e,t){var n=e.hex?(0,a.default)(e.hex):(0,a.default)(e),r=n.toHsl(),o=n.toHsv(),i=n.toRgb(),s=n.toHex();return 0===r.s&&(r.h=t||0,o.h=t||0),{hsl:r,hex:"000000"===s&&0===i.a?"transparent":"#"+s,rgb:i,hsv:o,oldHue:e.h||t||r.h,source:e.source}},isValidHex:function(e){return(0,a.default)(e).isValid()}};n.red={hsl:{a:1,h:0,l:.5,s:1},hex:"#ff0000",rgb:{r:255,g:0,b:0,a:1},hsv:{h:0,s:1,v:1,a:1}}},{"lodash/each":138,tinycolor2:387}],222:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});n.calculateChange=function(e,t,n,r){e.preventDefault();var o=r.clientWidth,a=r.clientHeight,i="number"==typeof e.pageX?e.pageX:e.touches[0].pageX,s="number"==typeof e.pageY?e.pageY:e.touches[0].pageY,l=i-(r.getBoundingClientRect().left+window.pageXOffset),c=s-(r.getBoundingClientRect().top+window.pageYOffset);if("vertical"===n.direction){var u=void 0;if(u=c<0?359:c>a?0:360*(-100*c/a+100)/100,n.hsl.h!==u)return{h:u,s:n.hsl.s,l:n.hsl.l,a:n.hsl.a,source:"rgb"}}else{var p=void 0;if(p=l<0?0:l>o?359:360*(100*l/o)/100,n.hsl.h!==p)return{h:p,s:n.hsl.s,l:n.hsl.l,a:n.hsl.a,source:"rgb"}}return null}},{}],223:[function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(n,"__esModule",{value:!0}),n.handleFocus=void 0;var i=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:"span";return function(n){function l(){var n,a,c,u;r(this,l);for(var p=arguments.length,d=Array(p),f=0;fa?c=a:u<0?u=0:u>i&&(u=i);var p=100*c/a,d=-100*u/i+100;return{h:n.hsl.h,s:p,v:d,a:n.hsl.a,source:"rgb"}}},{}],225:[function(e,t,n){"use strict";var r=e("./ReactMount"),o=e("./findDOMNode"),a=e("fbjs/lib/focusNode"),i={Mixin:{componentDidMount:function(){this.props.autoFocus&&a(o(this))}},focusDOMComponent:function(){a(r.getNode(this._rootNodeID))}};t.exports=i},{"./ReactMount":289,"./findDOMNode":332,"fbjs/lib/focusNode":362}],226:[function(e,t,n){"use strict";function r(e){return(e.ctrlKey||e.altKey||e.metaKey)&&!(e.ctrlKey&&e.altKey)}function o(e){switch(e){case S.topCompositionStart:return D.compositionStart;case S.topCompositionEnd:return D.compositionEnd;case S.topCompositionUpdate:return D.compositionUpdate}}function a(e,t){return e===S.topKeyDown&&t.keyCode===_}function i(e,t){switch(e){case S.topKeyUp:return-1!==y.indexOf(t.keyCode);case S.topKeyDown:return t.keyCode!==_;case S.topKeyPress:case S.topMouseDown:case S.topBlur:return!0;default:return!1}}function s(e){var t=e.detail;return"object"==typeof t&&"data"in t?t.data:null}function l(e,t,n,r,l){var c,u;if(E?c=o(e):T?i(e,r)&&(c=D.compositionEnd):a(e,r)&&(c=D.compositionStart),!c)return null;C&&(T||c!==D.compositionStart?c===D.compositionEnd&&T&&(u=T.getData()):T=v.getPooled(t));var p=g.getPooled(c,n,r,l);if(u)p.data=u;else{var d=s(r);null!==d&&(p.data=d)}return f.accumulateTwoPhaseDispatches(p),p}function c(e,t){switch(e){case S.topCompositionEnd:return s(t);case S.topKeyPress:return t.which!==O?null:(R=!0,N);case S.topTextInput:var n=t.data;return n===N&&R?null:n;default:return null}}function u(e,t){if(T){if(e===S.topCompositionEnd||i(e,t)){var n=T.getData();return v.release(T),T=null,n}return null}switch(e){case S.topPaste:return null;case S.topKeyPress:return t.which&&!r(t)?String.fromCharCode(t.which):null;case S.topCompositionEnd:return C?null:t.data;default:return null}}function p(e,t,n,r,o){var a;if(!(a=w?c(e,r):u(e,r)))return null;var i=m.getPooled(D.beforeInput,n,r,o);return i.data=a,f.accumulateTwoPhaseDispatches(i),i}var d=e("./EventConstants"),f=e("./EventPropagators"),h=e("fbjs/lib/ExecutionEnvironment"),v=e("./FallbackCompositionState"),g=e("./SyntheticCompositionEvent"),m=e("./SyntheticInputEvent"),b=e("fbjs/lib/keyOf"),y=[9,13,27,32],_=229,E=h.canUseDOM&&"CompositionEvent"in window,x=null;h.canUseDOM&&"documentMode"in document&&(x=document.documentMode);var w=h.canUseDOM&&"TextEvent"in window&&!x&&!function(){var e=window.opera;return"object"==typeof e&&"function"==typeof e.version&&parseInt(e.version(),10)<=12}(),C=h.canUseDOM&&(!E||x&&x>8&&x<=11),O=32,N=String.fromCharCode(O),S=d.topLevelTypes,D={beforeInput:{phasedRegistrationNames:{bubbled:b({onBeforeInput:null}),captured:b({onBeforeInputCapture:null})},dependencies:[S.topCompositionEnd,S.topKeyPress,S.topTextInput,S.topPaste]},compositionEnd:{phasedRegistrationNames:{bubbled:b({onCompositionEnd:null}),captured:b({onCompositionEndCapture:null})},dependencies:[S.topBlur,S.topCompositionEnd,S.topKeyDown,S.topKeyPress,S.topKeyUp,S.topMouseDown]},compositionStart:{phasedRegistrationNames:{bubbled:b({onCompositionStart:null}),captured:b({onCompositionStartCapture:null})},dependencies:[S.topBlur,S.topCompositionStart,S.topKeyDown,S.topKeyPress,S.topKeyUp,S.topMouseDown]},compositionUpdate:{phasedRegistrationNames:{bubbled:b({onCompositionUpdate:null}),captured:b({onCompositionUpdateCapture:null})},dependencies:[S.topBlur,S.topCompositionUpdate,S.topKeyDown,S.topKeyPress,S.topKeyUp,S.topMouseDown]}},R=!1,T=null,k={eventTypes:D,extractEvents:function(e,t,n,r,o){return[l(e,t,n,r,o),p(e,0,n,r,o)]}};t.exports=k},{"./EventConstants":238,"./EventPropagators":242,"./FallbackCompositionState":243,"./SyntheticCompositionEvent":314,"./SyntheticInputEvent":318,"fbjs/lib/ExecutionEnvironment":354,"fbjs/lib/keyOf":372}],227:[function(e,t,n){"use strict";function r(e,t){return e+t.charAt(0).toUpperCase()+t.substring(1)}var o={animationIterationCount:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,stopOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0},a=["Webkit","ms","Moz","O"];Object.keys(o).forEach(function(e){a.forEach(function(t){o[r(t,e)]=o[e]})});var i={isUnitlessNumber:o,shorthandPropertyExpansions:{background:{backgroundAttachment:!0,backgroundColor:!0,backgroundImage:!0,backgroundPositionX:!0,backgroundPositionY:!0,backgroundRepeat:!0},backgroundPosition:{backgroundPositionX:!0,backgroundPositionY:!0},border:{borderWidth:!0,borderStyle:!0,borderColor:!0},borderBottom:{borderBottomWidth:!0,borderBottomStyle:!0,borderBottomColor:!0},borderLeft:{borderLeftWidth:!0,borderLeftStyle:!0,borderLeftColor:!0},borderRight:{borderRightWidth:!0,borderRightStyle:!0,borderRightColor:!0},borderTop:{borderTopWidth:!0,borderTopStyle:!0,borderTopColor:!0},font:{fontStyle:!0,fontVariant:!0,fontWeight:!0,fontSize:!0,lineHeight:!0,fontFamily:!0},outline:{outlineWidth:!0,outlineStyle:!0,outlineColor:!0}}};t.exports=i},{}],228:[function(e,t,n){(function(n){"use strict";var r=e("./CSSProperty"),o=e("fbjs/lib/ExecutionEnvironment"),a=e("./ReactPerf"),i=e("fbjs/lib/camelizeStyleName"),s=e("./dangerousStyleValue"),l=e("fbjs/lib/hyphenateStyleName"),c=e("fbjs/lib/memoizeStringOnly"),u=e("fbjs/lib/warning"),p=c(function(e){return l(e)}),d=!1,f="cssFloat";if(o.canUseDOM){var h=document.createElement("div").style;try{h.font=""}catch(e){d=!0}void 0===document.documentElement.style.cssFloat&&(f="styleFloat")}if("production"!==n.env.NODE_ENV)var v=/^(?:webkit|moz|o)[A-Z]/,g=/;\s*$/,m={},b={},y=function(e){m.hasOwnProperty(e)&&m[e]||(m[e]=!0,"production"!==n.env.NODE_ENV&&u(!1,"Unsupported style property %s. Did you mean %s?",e,i(e)))},_=function(e){m.hasOwnProperty(e)&&m[e]||(m[e]=!0,"production"!==n.env.NODE_ENV&&u(!1,"Unsupported vendor-prefixed style property %s. Did you mean %s?",e,e.charAt(0).toUpperCase()+e.slice(1)))},E=function(e,t){b.hasOwnProperty(t)&&b[t]||(b[t]=!0,"production"!==n.env.NODE_ENV&&u(!1,'Style property values shouldn\'t contain a semicolon. Try "%s: %s" instead.',e,t.replace(g,"")))},x=function(e,t){e.indexOf("-")>-1?y(e):v.test(e)?_(e):g.test(t)&&E(e,t)};var w={createMarkupForStyles:function(e){var t="";for(var r in e)if(e.hasOwnProperty(r)){var o=e[r];"production"!==n.env.NODE_ENV&&x(r,o),null!=o&&(t+=p(r)+":",t+=s(r,o)+";")}return t||null},setValueForStyles:function(e,t){var o=e.style;for(var a in t)if(t.hasOwnProperty(a)){"production"!==n.env.NODE_ENV&&x(a,t[a]);var i=s(a,t[a]);if("float"===a&&(a=f),i)o[a]=i;else{var l=d&&r.shorthandPropertyExpansions[a];if(l)for(var c in l)o[c]="";else o[a]=""}}}};a.measureMethods(w,"CSSPropertyOperations",{setValueForStyles:"setValueForStyles"}),t.exports=w}).call(this,e("_process"))},{"./CSSProperty":227,"./ReactPerf":295,"./dangerousStyleValue":329,_process:169,"fbjs/lib/ExecutionEnvironment":354,"fbjs/lib/camelizeStyleName":356,"fbjs/lib/hyphenateStyleName":367,"fbjs/lib/memoizeStringOnly":374,"fbjs/lib/warning":379}],229:[function(e,t,n){(function(n){"use strict";function r(){this._callbacks=null,this._contexts=null}var o=e("./PooledClass"),a=e("./Object.assign"),i=e("fbjs/lib/invariant");a(r.prototype,{enqueue:function(e,t){this._callbacks=this._callbacks||[],this._contexts=this._contexts||[],this._callbacks.push(e),this._contexts.push(t)},notifyAll:function(){var e=this._callbacks,t=this._contexts;if(e){e.length!==t.length&&("production"!==n.env.NODE_ENV?i(!1,"Mismatched list of contexts in callback queue"):i(!1)),this._callbacks=null,this._contexts=null;for(var r=0;r8));var I=!1;E.canUseDOM&&(I=O("input")&&(!("documentMode"in document)||document.documentMode>9));var A={get:function(){return P.get.call(this)},set:function(e){M=""+e,P.set.call(this,e)}},L={eventTypes:R,extractEvents:function(e,t,n,o,a){var i,s;if(r(t)?j?i=l:s=c:N(t)?I?i=f:(i=v,s=h):g(t)&&(i=m),i){var u=i(e,t,n);if(u){var p=w.getPooled(R.change,u,o,a);return p.type="change",_.accumulateTwoPhaseDispatches(p),p}}s&&s(e,t,n)}};t.exports=L},{"./EventConstants":238,"./EventPluginHub":239,"./EventPropagators":242,"./ReactUpdates":307,"./SyntheticEvent":316,"./getEventTarget":338,"./isEventSupported":343,"./isTextInputElement":344,"fbjs/lib/ExecutionEnvironment":354,"fbjs/lib/keyOf":372}],231:[function(e,t,n){"use strict";var r=0,o={createReactRootIndex:function(){return r++}};t.exports=o},{}],232:[function(e,t,n){(function(n){"use strict";function r(e,t,n){var r=n>=e.childNodes.length?null:e.childNodes.item(n);e.insertBefore(t,r)}var o=e("./Danger"),a=e("./ReactMultiChildUpdateTypes"),i=e("./ReactPerf"),s=e("./setInnerHTML"),l=e("./setTextContent"),c=e("fbjs/lib/invariant"),u={dangerouslyReplaceNodeWithMarkup:o.dangerouslyReplaceNodeWithMarkup,updateTextContent:l,processUpdates:function(e,t){for(var i,u=null,p=null,d=0;d when using tables, nesting tags like
,

, or , or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID `%s`.",f,v):c(!1)),(u=u||{})[v]=u[v]||[],u[v][f]=h,(p=p||[]).push(h)}var g;if(g=t.length&&"string"==typeof t[0]?o.dangerouslyRenderMarkup(t):t,p)for(var m=0;m]+)/,u={dangerouslyRenderMarkup:function(e){o.canUseDOM||("production"!==n.env.NODE_ENV?l(!1,"dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering."):l(!1));for(var t,u={},p=0;p node. This is because browser quirks make this unreliable and/or slow. If you want to render to the root you must use server rendering. See ReactDOMServer.renderToString()."):l(!1));var r;r="string"==typeof t?a(t,i)[0]:t,e.parentNode.replaceChild(r,e)}};t.exports=u}).call(this,e("_process"))},{_process:169,"fbjs/lib/ExecutionEnvironment":354,"fbjs/lib/createNodesFromMarkup":359,"fbjs/lib/emptyFunction":360,"fbjs/lib/getMarkupWrap":364,"fbjs/lib/invariant":368}],236:[function(e,t,n){"use strict";var r=e("fbjs/lib/keyOf"),o=[r({ResponderEventPlugin:null}),r({SimpleEventPlugin:null}),r({TapEventPlugin:null}),r({EnterLeaveEventPlugin:null}),r({ChangeEventPlugin:null}),r({SelectEventPlugin:null}),r({BeforeInputEventPlugin:null})];t.exports=o},{"fbjs/lib/keyOf":372}],237:[function(e,t,n){"use strict";var r=e("./EventConstants"),o=e("./EventPropagators"),a=e("./SyntheticMouseEvent"),i=e("./ReactMount"),s=e("fbjs/lib/keyOf"),l=r.topLevelTypes,c=i.getFirstReactDOM,u={mouseEnter:{registrationName:s({onMouseEnter:null}),dependencies:[l.topMouseOut,l.topMouseOver]},mouseLeave:{registrationName:s({onMouseLeave:null}),dependencies:[l.topMouseOut,l.topMouseOver]}},p=[null,null],d={eventTypes:u,extractEvents:function(e,t,n,r,s){if(e===l.topMouseOver&&(r.relatedTarget||r.fromElement))return null;if(e!==l.topMouseOut&&e!==l.topMouseOver)return null;var d;if(t.window===t)d=t;else{var f=t.ownerDocument;d=f?f.defaultView||f.parentWindow:window}var h,v,g="",m="";if(e===l.topMouseOut?(h=t,g=n,(v=c(r.relatedTarget||r.toElement))?m=i.getID(v):v=d,v=v||d):(h=d,v=t,m=n),h===v)return null;var b=a.getPooled(u.mouseLeave,g,r,s);b.type="mouseleave",b.target=h,b.relatedTarget=v;var y=a.getPooled(u.mouseEnter,m,r,s);return y.type="mouseenter",y.target=v,y.relatedTarget=h,o.accumulateEnterLeaveDispatches(b,y,g,m),p[0]=b,p[1]=y,p}};t.exports=d},{"./EventConstants":238,"./EventPropagators":242,"./ReactMount":289,"./SyntheticMouseEvent":320,"fbjs/lib/keyOf":372}],238:[function(e,t,n){"use strict";var r=e("fbjs/lib/keyMirror"),o=r({bubbled:null,captured:null}),a={topLevelTypes:r({topAbort:null,topBlur:null,topCanPlay:null,topCanPlayThrough:null,topChange:null,topClick:null,topCompositionEnd:null,topCompositionStart:null,topCompositionUpdate:null,topContextMenu:null,topCopy:null,topCut:null,topDoubleClick:null,topDrag:null,topDragEnd:null,topDragEnter:null,topDragExit:null,topDragLeave:null,topDragOver:null,topDragStart:null,topDrop:null,topDurationChange:null,topEmptied:null,topEncrypted:null,topEnded:null,topError:null,topFocus:null,topInput:null,topKeyDown:null,topKeyPress:null,topKeyUp:null,topLoad:null,topLoadedData:null,topLoadedMetadata:null,topLoadStart:null,topMouseDown:null,topMouseMove:null,topMouseOut:null,topMouseOver:null,topMouseUp:null,topPaste:null,topPause:null,topPlay:null,topPlaying:null,topProgress:null,topRateChange:null,topReset:null,topScroll:null,topSeeked:null,topSeeking:null,topSelectionChange:null,topStalled:null,topSubmit:null,topSuspend:null,topTextInput:null,topTimeUpdate:null,topTouchCancel:null,topTouchEnd:null,topTouchMove:null,topTouchStart:null,topVolumeChange:null,topWaiting:null,topWheel:null}),PropagationPhases:o};t.exports=a},{"fbjs/lib/keyMirror":371}],239:[function(e,t,n){(function(n){"use strict";function r(){var e=g&&g.traverseTwoPhase&&g.traverseEnterLeave;"production"!==n.env.NODE_ENV&&u(e,"InstanceHandle not injected before use!")}var o=e("./EventPluginRegistry"),a=e("./EventPluginUtils"),i=e("./ReactErrorUtils"),s=e("./accumulateInto"),l=e("./forEachAccumulated"),c=e("fbjs/lib/invariant"),u=e("fbjs/lib/warning"),p={},d=null,f=function(e,t){e&&(a.executeDispatchesInOrder(e,t),e.isPersistent()||e.constructor.release(e))},h=function(e){return f(e,!0)},v=function(e){return f(e,!1)},g=null,m={injection:{injectMount:a.injection.injectMount,injectInstanceHandle:function(e){g=e,"production"!==n.env.NODE_ENV&&r()},getInstanceHandle:function(){return"production"!==n.env.NODE_ENV&&r(),g},injectEventPluginOrder:o.injectEventPluginOrder,injectEventPluginsByName:o.injectEventPluginsByName},eventNameDispatchConfigs:o.eventNameDispatchConfigs,registrationNameModules:o.registrationNameModules,putListener:function(e,t,r){"function"!=typeof r&&("production"!==n.env.NODE_ENV?c(!1,"Expected %s listener to be a function, instead got type %s",t,typeof r):c(!1)),(p[t]||(p[t]={}))[e]=r;var a=o.registrationNameModules[t];a&&a.didPutListener&&a.didPutListener(e,t,r)},getListener:function(e,t){var n=p[t];return n&&n[e]},deleteListener:function(e,t){var n=o.registrationNameModules[t];n&&n.willDeleteListener&&n.willDeleteListener(e,t);var r=p[t];r&&delete r[e]},deleteAllListeners:function(e){for(var t in p)if(p[t][e]){var n=o.registrationNameModules[t];n&&n.willDeleteListener&&n.willDeleteListener(e,t),delete p[t][e]}},extractEvents:function(e,t,n,r,a){for(var i,l=o.plugins,c=0;c-1||("production"!==n.env.NODE_ENV?i(!1,"EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.",e):i(!1)),!c.plugins[r]){t.extractEvents||("production"!==n.env.NODE_ENV?i(!1,"EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.",e):i(!1)),c.plugins[r]=t;var a=t.eventTypes;for(var u in a)o(a[u],t,u)||("production"!==n.env.NODE_ENV?i(!1,"EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.",u,e):i(!1))}}}function o(e,t,r){c.eventNameDispatchConfigs.hasOwnProperty(r)&&("production"!==n.env.NODE_ENV?i(!1,"EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.",r):i(!1)),c.eventNameDispatchConfigs[r]=e;var o=e.phasedRegistrationNames;if(o){for(var s in o)o.hasOwnProperty(s)&&a(o[s],t,r);return!0}return!!e.registrationName&&(a(e.registrationName,t,r),!0)}function a(e,t,r){c.registrationNameModules[e]&&("production"!==n.env.NODE_ENV?i(!1,"EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.",e):i(!1)),c.registrationNameModules[e]=t,c.registrationNameDependencies[e]=t.eventTypes[r].dependencies}var i=e("fbjs/lib/invariant"),s=null,l={},c={plugins:[],eventNameDispatchConfigs:{},registrationNameModules:{},registrationNameDependencies:{},injectEventPluginOrder:function(e){s&&("production"!==n.env.NODE_ENV?i(!1,"EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React."):i(!1)),s=Array.prototype.slice.call(e),r()},injectEventPluginsByName:function(e){var t=!1;for(var o in e)if(e.hasOwnProperty(o)){var a=e[o];l.hasOwnProperty(o)&&l[o]===a||(l[o]&&("production"!==n.env.NODE_ENV?i(!1,"EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.",o):i(!1)),l[o]=a,t=!0)}t&&r()},getPluginModuleForEvent:function(e){var t=e.dispatchConfig;if(t.registrationName)return c.registrationNameModules[t.registrationName]||null;for(var n in t.phasedRegistrationNames)if(t.phasedRegistrationNames.hasOwnProperty(n)){var r=c.registrationNameModules[t.phasedRegistrationNames[n]];if(r)return r}return null},_resetEventPlugins:function(){s=null;for(var e in l)l.hasOwnProperty(e)&&delete l[e];c.plugins.length=0;var t=c.eventNameDispatchConfigs;for(var n in t)t.hasOwnProperty(n)&&delete t[n];var r=c.registrationNameModules;for(var o in r)r.hasOwnProperty(o)&&delete r[o]}};t.exports=c}).call(this,e("_process"))},{_process:169,"fbjs/lib/invariant":368}],241:[function(e,t,n){(function(n){"use strict";function r(e,t,n,r){var o=e.type||"unknown-event";e.currentTarget=u.Mount.getNode(r),t?s.invokeGuardedCallbackWithCatch(o,n,e,r):s.invokeGuardedCallback(o,n,e,r),e.currentTarget=null}function o(e){var t=e._dispatchListeners,r=e._dispatchIDs;if("production"!==n.env.NODE_ENV&&a(e),Array.isArray(t)){for(var o=0;o1?1-t:void 0;return this._fallbackText=o.slice(e,s),this._fallbackText}}),o.addPoolingTo(r),t.exports=r},{"./Object.assign":246,"./PooledClass":247,"./getTextContentAccessor":341}],244:[function(e,t,n){"use strict";var r,o=e("./DOMProperty"),a=e("fbjs/lib/ExecutionEnvironment"),i=o.injection.MUST_USE_ATTRIBUTE,s=o.injection.MUST_USE_PROPERTY,l=o.injection.HAS_BOOLEAN_VALUE,c=o.injection.HAS_SIDE_EFFECTS,u=o.injection.HAS_NUMERIC_VALUE,p=o.injection.HAS_POSITIVE_NUMERIC_VALUE,d=o.injection.HAS_OVERLOADED_BOOLEAN_VALUE;if(a.canUseDOM){var f=document.implementation;r=f&&f.hasFeature&&f.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")}var h={isCustomAttribute:RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/),Properties:{accept:null,acceptCharset:null,accessKey:null,action:null,allowFullScreen:i|l,allowTransparency:i,alt:null,async:l,autoComplete:null,autoPlay:l,capture:i|l,cellPadding:null,cellSpacing:null,charSet:i,challenge:i,checked:s|l,classID:i,className:r?i:s,cols:i|p,colSpan:null,content:null,contentEditable:null,contextMenu:i,controls:s|l,coords:null,crossOrigin:null,data:null,dateTime:i,default:l,defer:l,dir:null,disabled:i|l,download:d,draggable:null,encType:null,form:i,formAction:i,formEncType:i,formMethod:i,formNoValidate:l,formTarget:i,frameBorder:i,headers:null,height:i,hidden:i|l,high:null,href:null,hrefLang:null,htmlFor:null,httpEquiv:null,icon:null,id:s,inputMode:i,integrity:null,is:i,keyParams:i,keyType:i,kind:null,label:null,lang:null,list:i,loop:s|l,low:null,manifest:i,marginHeight:null,marginWidth:null,max:null,maxLength:i,media:i,mediaGroup:null,method:null,min:null,minLength:i,multiple:s|l,muted:s|l,name:null,nonce:i,noValidate:l,open:l,optimum:null,pattern:null,placeholder:null,poster:null,preload:null,radioGroup:null,readOnly:s|l,rel:null,required:l,reversed:l,role:i,rows:i|p,rowSpan:null,sandbox:null,scope:null,scoped:l,scrolling:null,seamless:i|l,selected:s|l,shape:null,size:i|p,sizes:i,span:p,spellCheck:null,src:null,srcDoc:s,srcLang:null,srcSet:i,start:u,step:null,style:null,summary:null,tabIndex:null,target:null,title:null,type:null,useMap:null,value:s|c,width:i,wmode:i,wrap:null,about:i,datatype:i,inlist:i,prefix:i,property:i,resource:i,typeof:i,vocab:i,autoCapitalize:i,autoCorrect:i,autoSave:null,color:null,itemProp:i,itemScope:i|l,itemType:i,itemID:i,itemRef:i,results:null,security:i,unselectable:i},DOMAttributeNames:{acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv"},DOMPropertyNames:{autoComplete:"autocomplete",autoFocus:"autofocus",autoPlay:"autoplay",autoSave:"autosave",encType:"encoding",hrefLang:"hreflang",radioGroup:"radiogroup",spellCheck:"spellcheck",srcDoc:"srcdoc",srcSet:"srcset"}};t.exports=h},{"./DOMProperty":233,"fbjs/lib/ExecutionEnvironment":354}],245:[function(e,t,n){(function(n){"use strict";function r(e){null!=e.checkedLink&&null!=e.valueLink&&("production"!==n.env.NODE_ENV?c(!1,"Cannot provide a checkedLink and a valueLink. If you want to use checkedLink, you probably don't want to use valueLink and vice versa."):c(!1))}function o(e){r(e),(null!=e.value||null!=e.onChange)&&("production"!==n.env.NODE_ENV?c(!1,"Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don't want to use valueLink."):c(!1))}function a(e){r(e),(null!=e.checked||null!=e.onChange)&&("production"!==n.env.NODE_ENV?c(!1,"Cannot provide a checkedLink and a checked property or onChange event. If you want to use checked or onChange, you probably don't want to use checkedLink"):c(!1))}function i(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}var s=e("./ReactPropTypes"),l=e("./ReactPropTypeLocations"),c=e("fbjs/lib/invariant"),u=e("fbjs/lib/warning"),p={button:!0,checkbox:!0,image:!0,hidden:!0,radio:!0,reset:!0,submit:!0},d={value:function(e,t,n){return!e[t]||p[e.type]||e.onChange||e.readOnly||e.disabled?null:new Error("You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.")},checked:function(e,t,n){return!e[t]||e.onChange||e.readOnly||e.disabled?null:new Error("You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.")},onChange:s.func},f={},h={checkPropTypes:function(e,t,r){for(var o in d){if(d.hasOwnProperty(o))var a=d[o](t,o,e,l.prop,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");if(a instanceof Error&&!(a.message in f)){f[a.message]=!0;var s=i(r);"production"!==n.env.NODE_ENV&&u(!1,"Failed form propType: %s%s",a.message,s)}}},getValue:function(e){return e.valueLink?(o(e),e.valueLink.value):e.value},getChecked:function(e){return e.checkedLink?(a(e),e.checkedLink.value):e.checked},executeOnChange:function(e,t){return e.valueLink?(o(e),e.valueLink.requestChange(t.target.value)):e.checkedLink?(a(e),e.checkedLink.requestChange(t.target.checked)):e.onChange?e.onChange.call(void 0,t):void 0}};t.exports=h}).call(this,e("_process"))},{"./ReactPropTypeLocations":297,"./ReactPropTypes":298,_process:169,"fbjs/lib/invariant":368,"fbjs/lib/warning":379}],246:[function(e,t,n){"use strict";t.exports=function(e,t){if(null==e)throw new TypeError("Object.assign target cannot be null or undefined");for(var n=Object(e),r=Object.prototype.hasOwnProperty,o=1;o1?s-1:0),c=1;c-1&&-1===navigator.userAgent.indexOf("Edge")||navigator.userAgent.indexOf("Firefox")>-1)&&console.debug("Download the React DevTools for a better development experience: https://fb.me/react-devtools");var g=document.documentMode&&document.documentMode<8;"production"!==n.env.NODE_ENV&&h(!g,'Internet Explorer is running in compatibility mode; please add the following tag to your HTML to prevent this from happening: ');for(var m=[Array.isArray,Array.prototype.every,Array.prototype.forEach,Array.prototype.indexOf,Array.prototype.map,Date.now,Function.prototype.bind,Object.keys,String.prototype.split,String.prototype.trim,Object.create,Object.freeze],b=0;b",c(e),c(t)))}}function p(e,t){t&&("production"!==n.env.NODE_ENV&&se[e._tag]&&"production"!==n.env.NODE_ENV&&$(null==t.children&&null==t.dangerouslySetInnerHTML,"%s is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`.%s",e._tag,e._currentElement._owner?" Check the render method of "+e._currentElement._owner.getName()+".":""),null!=t.dangerouslySetInnerHTML&&(null!=t.children&&("production"!==n.env.NODE_ENV?U(!1,"Can only set one of `children` or `props.dangerouslySetInnerHTML`."):U(!1)),"object"==typeof t.dangerouslySetInnerHTML&&te in t.dangerouslySetInnerHTML||("production"!==n.env.NODE_ENV?U(!1,"`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information."):U(!1))),"production"!==n.env.NODE_ENV&&("production"!==n.env.NODE_ENV&&$(null==t.innerHTML,"Directly setting property `innerHTML` is not permitted. For more information, lookup documentation on `dangerouslySetInnerHTML`."),"production"!==n.env.NODE_ENV&&$(!t.contentEditable||null==t.children,"A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.")),null!=t.style&&"object"!=typeof t.style&&("production"!==n.env.NODE_ENV?U(!1,"The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.%s",r(e)):U(!1)))}function d(e,t,r,o){"production"!==n.env.NODE_ENV&&"production"!==n.env.NODE_ENV&&$("onScroll"!==t||H("scroll",!0),"This browser doesn't support the `onScroll` event");var a=j.findReactContainerForID(e);if(a){var i=a.nodeType===ne?a.ownerDocument:a;X(t,i)}o.getReactMountReady().enqueue(f,{id:e,registrationName:t,listener:r})}function f(){var e=this;S.putListener(e.id,e.registrationName,e.listener)}function h(){var e=this;e._rootNodeID||("production"!==n.env.NODE_ENV?U(!1,"Must be mounted to trap events"):U(!1));var t=j.getNode(e._rootNodeID);switch(t||("production"!==n.env.NODE_ENV?U(!1,"trapBubbledEvent(...): Requires node to be rendered."):U(!1)),e._tag){case"iframe":e._wrapperState.listeners=[S.trapBubbledEvent(N.topLevelTypes.topLoad,"load",t)];break;case"video":case"audio":e._wrapperState.listeners=[];for(var r in oe)oe.hasOwnProperty(r)&&e._wrapperState.listeners.push(S.trapBubbledEvent(N.topLevelTypes[r],oe[r],t));break;case"img":e._wrapperState.listeners=[S.trapBubbledEvent(N.topLevelTypes.topError,"error",t),S.trapBubbledEvent(N.topLevelTypes.topLoad,"load",t)];break;case"form":e._wrapperState.listeners=[S.trapBubbledEvent(N.topLevelTypes.topReset,"reset",t),S.trapBubbledEvent(N.topLevelTypes.topSubmit,"submit",t)]}}function v(){T.mountReadyWrapper(this)}function g(){M.postUpdateWrapper(this)}function m(e){ue.call(ce,e)||(le.test(e)||("production"!==n.env.NODE_ENV?U(!1,"Invalid tag: %s",e):U(!1)),ce[e]=!0)}function b(e,t){var n=(e=F({},e))[K.ancestorInfoContextKey];return e[K.ancestorInfoContextKey]=K.updatedAncestorInfo(n,t._tag,t),e}function y(e,t){return e.indexOf("-")>=0||null!=t.is}function _(e){m(e),this._tag=e.toLowerCase(),this._renderedChildren=null,this._previousStyle=null,this._previousStyleCopy=null,this._rootNodeID=null,this._wrapperState=null,this._topLevelWrapper=null,this._nodeWithLegacyProperties=null,"production"!==n.env.NODE_ENV&&(this._unprocessedContextDev=null,this._processedContextDev=null)}var E,x=e("./AutoFocusUtils"),w=e("./CSSPropertyOperations"),C=e("./DOMProperty"),O=e("./DOMPropertyOperations"),N=e("./EventConstants"),S=e("./ReactBrowserEventEmitter"),D=e("./ReactComponentBrowserEnvironment"),R=e("./ReactDOMButton"),T=e("./ReactDOMInput"),k=e("./ReactDOMOption"),M=e("./ReactDOMSelect"),P=e("./ReactDOMTextarea"),j=e("./ReactMount"),I=e("./ReactMultiChild"),A=e("./ReactPerf"),L=e("./ReactUpdateQueue"),F=e("./Object.assign"),V=e("./canDefineProperty"),B=e("./escapeTextContentForBrowser"),U=e("fbjs/lib/invariant"),H=e("./isEventSupported"),W=e("fbjs/lib/keyOf"),q=e("./setInnerHTML"),z=e("./setTextContent"),G=e("fbjs/lib/shallowEqual"),K=e("./validateDOMNesting"),$=e("fbjs/lib/warning"),Y=S.deleteListener,X=S.listenTo,Q=S.registrationNameModules,J={string:!0,number:!0},Z=W({children:null}),ee=W({style:null}),te=W({__html:null}),ne=1;"production"!==n.env.NODE_ENV&&(E={props:{enumerable:!1,get:function(){var e=this._reactInternalComponent;return"production"!==n.env.NODE_ENV&&$(!1,"ReactDOMComponent: Do not access .props of a DOM node; instead, recreate the props as `render` did originally or read the DOM properties/attributes directly from this node (e.g., this.refs.box.className).%s",r(e)),e._currentElement.props}}});var re={},oe={topAbort:"abort",topCanPlay:"canplay",topCanPlayThrough:"canplaythrough",topDurationChange:"durationchange",topEmptied:"emptied",topEncrypted:"encrypted",topEnded:"ended",topError:"error",topLoadedData:"loadeddata",topLoadedMetadata:"loadedmetadata",topLoadStart:"loadstart",topPause:"pause",topPlay:"play",topPlaying:"playing",topProgress:"progress",topRateChange:"ratechange",topSeeked:"seeked",topSeeking:"seeking",topStalled:"stalled",topSuspend:"suspend",topTimeUpdate:"timeupdate",topVolumeChange:"volumechange",topWaiting:"waiting"},ae={area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0},ie={listing:!0,pre:!0,textarea:!0},se=F({menuitem:!0},ae),le=/^[a-zA-Z][a-zA-Z:_\.\-\d]*$/,ce={},ue={}.hasOwnProperty;_.displayName="ReactDOMComponent",_.Mixin={construct:function(e){this._currentElement=e},mountComponent:function(e,t,r){this._rootNodeID=e;var o=this._currentElement.props;switch(this._tag){case"iframe":case"img":case"form":case"video":case"audio":this._wrapperState={listeners:null},t.getReactMountReady().enqueue(h,this);break;case"button":o=R.getNativeProps(this,o,r);break;case"input":T.mountWrapper(this,o,r),o=T.getNativeProps(this,o,r);break;case"option":k.mountWrapper(this,o,r),o=k.getNativeProps(this,o,r);break;case"select":M.mountWrapper(this,o,r),o=M.getNativeProps(this,o,r),r=M.processChildContext(this,o,r);break;case"textarea":P.mountWrapper(this,o,r),o=P.getNativeProps(this,o,r)}p(this,o),"production"!==n.env.NODE_ENV&&r[K.ancestorInfoContextKey]&&K(this._tag,this,r[K.ancestorInfoContextKey]),"production"!==n.env.NODE_ENV&&(this._unprocessedContextDev=r,this._processedContextDev=b(r,this),r=this._processedContextDev);var a;if(t.useCreateElement){var i=r[j.ownerDocumentContextKey].createElement(this._currentElement.type);O.setAttributeForID(i,this._rootNodeID),j.getID(i),this._updateDOMProperties({},o,t,i),this._createInitialChildren(t,o,r,i),a=i}else{var s=this._createOpenTagMarkupAndPutListeners(t,o),l=this._createContentMarkup(t,o,r);a=!l&&ae[this._tag]?s+"/>":s+">"+l+""}switch(this._tag){case"input":t.getReactMountReady().enqueue(v,this);case"button":case"select":case"textarea":o.autoFocus&&t.getReactMountReady().enqueue(x.focusDOMComponent,this)}return a},_createOpenTagMarkupAndPutListeners:function(e,t){var r="<"+this._currentElement.type;for(var o in t)if(t.hasOwnProperty(o)){var a=t[o];if(null!=a)if(Q.hasOwnProperty(o))a&&d(this._rootNodeID,o,a,e);else{o===ee&&(a&&("production"!==n.env.NODE_ENV&&(this._previousStyle=a),a=this._previousStyleCopy=F({},t.style)),a=w.createMarkupForStyles(a));var i=null;null!=this._tag&&y(this._tag,t)?o!==Z&&(i=O.createMarkupForCustomAttribute(o,a)):i=O.createMarkupForProperty(o,a),i&&(r+=" "+i)}}return e.renderToStaticMarkup?r:r+" "+O.createMarkupForID(this._rootNodeID)},_createContentMarkup:function(e,t,n){var r="",o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&(r=o.__html);else{var a=J[typeof t.children]?t.children:null,i=null!=a?null:t.children;null!=a?r=B(a):null!=i&&(r=this.mountChildren(i,e,n).join(""))}return ie[this._tag]&&"\n"===r.charAt(0)?"\n"+r:r},_createInitialChildren:function(e,t,n,r){var o=t.dangerouslySetInnerHTML;if(null!=o)null!=o.__html&&q(r,o.__html);else{var a=J[typeof t.children]?t.children:null,i=null!=a?null:t.children;if(null!=a)z(r,a);else if(null!=i)for(var s=this.mountChildren(i,e,n),l=0;l tried to unmount. Because of cross-browser quirks it is impossible to unmount some top-level components (eg , , and ) reliably and efficiently. To fix this, have a single top-level component that never unmounts render these elements.",this._tag):U(!1)}this.unmountChildren(),S.deleteAllListeners(this._rootNodeID),D.unmountIDFromEnvironment(this._rootNodeID),this._rootNodeID=null,this._wrapperState=null,this._nodeWithLegacyProperties&&(this._nodeWithLegacyProperties._reactInternalComponent=null,this._nodeWithLegacyProperties=null)},getPublicInstance:function(){if(!this._nodeWithLegacyProperties){var e=j.getNode(this._rootNodeID);e._reactInternalComponent=this,e.getDOMNode=o,e.isMounted=a,e.setState=i,e.replaceState=i,e.forceUpdate=i,e.setProps=s,e.replaceProps=l,"production"!==n.env.NODE_ENV&&V?Object.defineProperties(e,E):e.props=this._currentElement.props,this._nodeWithLegacyProperties=e}return this._nodeWithLegacyProperties}},A.measureMethods(_,"ReactDOMComponent",{mountComponent:"mountComponent",updateComponent:"updateComponent"}),F(_.prototype,_.Mixin,I.Mixin),t.exports=_}).call(this,e("_process"))},{"./AutoFocusUtils":225,"./CSSPropertyOperations":228,"./DOMProperty":233,"./DOMPropertyOperations":234,"./EventConstants":238,"./Object.assign":246,"./ReactBrowserEventEmitter":250,"./ReactComponentBrowserEnvironment":255,"./ReactDOMButton":260,"./ReactDOMInput":265,"./ReactDOMOption":266,"./ReactDOMSelect":267,"./ReactDOMTextarea":271,"./ReactMount":289,"./ReactMultiChild":290,"./ReactPerf":295,"./ReactUpdateQueue":306,"./canDefineProperty":328,"./escapeTextContentForBrowser":331,"./isEventSupported":343,"./setInnerHTML":348,"./setTextContent":349,"./validateDOMNesting":352,_process:169,"fbjs/lib/invariant":368,"fbjs/lib/keyOf":372,"fbjs/lib/shallowEqual":377,"fbjs/lib/warning":379}],262:[function(e,t,n){(function(n){"use strict";var r=e("./ReactElement"),o=e("./ReactElementValidator"),a=e("fbjs/lib/mapObject")({a:"a",abbr:"abbr",address:"address",area:"area",article:"article",aside:"aside",audio:"audio",b:"b",base:"base",bdi:"bdi",bdo:"bdo",big:"big",blockquote:"blockquote",body:"body",br:"br",button:"button",canvas:"canvas",caption:"caption",cite:"cite",code:"code",col:"col",colgroup:"colgroup",data:"data",datalist:"datalist",dd:"dd",del:"del",details:"details",dfn:"dfn",dialog:"dialog",div:"div",dl:"dl",dt:"dt",em:"em",embed:"embed",fieldset:"fieldset",figcaption:"figcaption",figure:"figure",footer:"footer",form:"form",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",head:"head",header:"header",hgroup:"hgroup",hr:"hr",html:"html",i:"i",iframe:"iframe",img:"img",input:"input",ins:"ins",kbd:"kbd",keygen:"keygen",label:"label",legend:"legend",li:"li",link:"link",main:"main",map:"map",mark:"mark",menu:"menu",menuitem:"menuitem",meta:"meta",meter:"meter",nav:"nav",noscript:"noscript",object:"object",ol:"ol",optgroup:"optgroup",option:"option",output:"output",p:"p",param:"param",picture:"picture",pre:"pre",progress:"progress",q:"q",rp:"rp",rt:"rt",ruby:"ruby",s:"s",samp:"samp",script:"script",section:"section",select:"select",small:"small",source:"source",span:"span",strong:"strong",style:"style",sub:"sub",summary:"summary",sup:"sup",table:"table",tbody:"tbody",td:"td",textarea:"textarea",tfoot:"tfoot",th:"th",thead:"thead",time:"time",title:"title",tr:"tr",track:"track",u:"u",ul:"ul",var:"var",video:"video",wbr:"wbr",circle:"circle",clipPath:"clipPath",defs:"defs",ellipse:"ellipse",g:"g",image:"image",line:"line",linearGradient:"linearGradient",mask:"mask",path:"path",pattern:"pattern",polygon:"polygon",polyline:"polyline",radialGradient:"radialGradient",rect:"rect",stop:"stop",svg:"svg",text:"text",tspan:"tspan"},function(e){return"production"!==n.env.NODE_ENV?o.createFactory(e):r.createFactory(e)});t.exports=a}).call(this,e("_process"))},{"./ReactElement":276,"./ReactElementValidator":277,_process:169,"fbjs/lib/mapObject":373}],263:[function(e,t,n){"use strict";var r={useCreateElement:!1};t.exports=r},{}],264:[function(e,t,n){(function(n){"use strict";var r=e("./DOMChildrenOperations"),o=e("./DOMPropertyOperations"),a=e("./ReactMount"),i=e("./ReactPerf"),s=e("fbjs/lib/invariant"),l={dangerouslySetInnerHTML:"`dangerouslySetInnerHTML` must be set using `updateInnerHTMLByID()`.",style:"`style` must be set using `updateStylesByID()`."},c={updatePropertyByID:function(e,t,r){var i=a.getNode(e);l.hasOwnProperty(t)&&("production"!==n.env.NODE_ENV?s(!1,"updatePropertyByID(...): %s",l[t]):s(!1)),null!=r?o.setValueForProperty(i,t,r):o.deleteValueForProperty(i,t)},dangerouslyReplaceNodeWithMarkupByID:function(e,t){var n=a.getNode(e);r.dangerouslyReplaceNodeWithMarkup(n,t)},dangerouslyProcessChildrenUpdates:function(e,t){for(var n=0;n instead of setting `selected` on

================================================ FILE: source/js/components/app.jsx ================================================ var React = require('react'); var Update = require('react-addons-update'); var Sidebar = require('./layout/sidebar.jsx'); var Main = require('./layout/main.jsx'); var Gallery = require('./layout/gallery.jsx'); var Presets = require('../presets'); var App = React.createClass({ _extend: function(obj1, obj2){ var obj3 = {}; for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; } for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; } return obj3; }, _init: {}, _cloneInitialState: (function() { var executed = false; return function () { if (!executed) { executed = true; this._init = this.state; } }; }.bind(this))(), getInitialState: function() { return { preset: 'custom', image: { type: 'unsplash', unsplashID: 'W_9mOGUwR08' }, gallery: { visible: true }, filter: { contrast: '100', brightness: '100', saturate: '100', grayscale: '0', sepia: '0', invert: '0', hueRotate: '0', blur: '0', opacity: '50', // <-- Move to overlay blend: 'normal' // <-- Move to overlay }, overlay: { type: 'none', direction: 'to bottom', position: 'center center', size: 'closest-corner', color: { a: 0.5, b: 253, g: 162, r: 62 }, color1: { color: { a: 0.5, b: 253, g: 162, r: 62 }, stop: 10 }, color2: { color: { a: 0.04, b: 70, g: 70, r: 70 }, stop: 100 } } } }, resetState: function() { var newState = Update(this.state, { filter: { $set : this._init.filter}, overlay: { $set : this._init.overlay}, preset: { $set : 'custom'} }) this.setState(newState); }, updateMainImage: function(type, val) { switch (type) { case 'unsplash': var newState = Update(this.state, { image: { type: { $set: 'unsplash' }, unsplashID: { $set: val } } }); this.setState(newState); break; case 'upload': var newState = Update(this.state, { image: { type: { $set: 'upload' }, source: { $set: val } } }); default: this.setState(newState); break; } }, toggleGallery: function(event) { var newState = Update(this.state, { gallery: { visible: { $set: !this.state.gallery.visible } } }); this.setState(newState); }, updatePreset: function(key) { var Filter = this._extend(this._init.filter, Presets[key].filter); var Overlay = this._extend(this._init.overlay, Presets[key].overlay); var newState = Update(this.state, { preset: {$set: key}, filter: {$set: Filter}, overlay: {$set: Overlay} }); this.setState(newState); }, handeUpdate: function(event) { var newState = Update(this.state, { filter: { contrast: { $set : this.refs.sidebar.refs.contrast.refs.range.value }, saturate: { $set : this.refs.sidebar.refs.saturate.refs.range.value }, brightness: { $set : this.refs.sidebar.refs.brightness.refs.range.value }, sepia: { $set : this.refs.sidebar.refs.sepia.refs.range.value }, grayscale: { $set : this.refs.sidebar.refs.grayscale.refs.range.value }, invert: { $set : this.refs.sidebar.refs.invert.refs.range.value }, hueRotate: { $set : this.refs.sidebar.refs.hueRotate.refs.range.value }, blur: { $set : this.refs.sidebar.refs.blur.refs.range.value } } }) this.setState(newState); }, updateOverlay: function(event) { var newState = Update(this.state, { filter: { opacity: { $set : this.refs.sidebar.refs.background.refs.opacity.refs.range.value }, blend: { $set : this.refs.sidebar.refs.background.refs.blend.refs.select.value } } }) this.setState(newState); }, updateGradientPositions: function(event) { if ( this.refs.sidebar.refs.background.refs.gradientsDirection != undefined ) { var newState = Update(this.state, { overlay: { direction: { $set: this.refs.sidebar.refs.background.refs.gradientsDirection.refs.direction.value } }, preset: { $set: 'custom' } }); } else if ( this.refs.sidebar.refs.background.refs.gradientsPosition != undefined ) { var newState = Update(this.state, { overlay: { position: { $set: this.refs.sidebar.refs.background.refs.gradientsPosition.refs.position.value }, size: { $set: this.refs.sidebar.refs.background.refs.gradientsSize.refs.size.value } }, preset: { $set: 'custom' } }); } this.setState(newState); }, updateOverlayType: function(event) { var newState = Update(this.state, { overlay: { type: { $set: event.currentTarget.value } }, preset: { $set: 'custom' } }); this.setState(newState); }, updateOverlayColor: function(color) { var newState = Update(this.state, { overlay: { color: { $set: color.rgb } }, preset: { $set: 'custom' } }); this.setState(newState); }, updateColor1: function(color) { var newState = Update(this.state, { overlay: { color1: { color: { $set: color.rgb } } }, preset: { $set: 'custom' } }); this.setState(newState); }, updateColor2: function(color) { var newState = Update(this.state, { overlay: { color2: { color: { $set: color.rgb } } }, preset: { $set: 'custom' } }); this.setState(newState); }, updateColor1Stop: function(event) { newNum = (typeof event == 'number') ? event : parseInt(event.target.value); if (newNum >= 1 || newNum <=100) { var num = newNum; } else if (newNum >= 100) { var num = 100; } else { var num = 1; } var newState = Update(this.state, { overlay: { color1: { stop: { $set: num } } }, preset: { $set: 'custom' } }); this.setState(newState); }, updateColor2Stop: function(event) { newNum = (typeof event == 'number') ? event : parseInt(event.target.value); if (newNum > 1 && newNum <100) { var num = newNum; } else if (newNum >= 100) { var num = 100; } else if (newNum < 1) { var num = 1; } else { num = 1; } var newState = Update(this.state, { overlay: { color2: { stop: { $set: num } } }, preset: { $set: 'custom' } }); this.setState(newState); }, render: function() { this._cloneInitialState(); return (
); } }); module.exports = App; ================================================ FILE: source/js/components/background.jsx ================================================ var React = require('react'); var Color = require('./Color.jsx'); var OverlayType = require('./overlaytype.jsx'); var GradientDirections = require('./gradientdirection.jsx'); var GradientPositions = require('./gradientposition.jsx'); var GradientSizes = require('./gradientsize.jsx'); var RangeSlider = require('./range.jsx'); var BlendModes = require('./blendmode.jsx'); var Background = React.createClass({ displayName: 'Background', renderColors: function() { if ( this.props.overlay.type == 'solid' ) { return (
) } else if ( this.props.overlay.type == 'linear') { return (
) } else if ( this.props.overlay.type == 'radial' ) { return (
) } }, renderOverlayOptions: function() { if ( this.props.overlay.type == 'solid' || this.props.overlay.type == 'radial' || this.props.overlay.type == 'linear' ) { return (
) } }, render: function() { return (
{this.renderColors()} {this.renderOverlayOptions()}
); } }); module.exports = Background; ================================================ FILE: source/js/components/blendmode.jsx ================================================ var React = require('react'); var BlendMode = React.createClass({ render: function() { var modes = [ 'overlay', 'normal', 'multiply', 'screen', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'initial', 'inherit', 'unset' ]; var blendModes = modes.map(function(mode, index){ return ( ); }); return (
); } }); module.exports = BlendMode; ================================================ FILE: source/js/components/codeblock.jsx ================================================ var React = require('react'); var $ = require('jquery'); var nanoScroller = require('nanoScroller'); // TODO: Refactor codeblock.jsx. There has to be a better way. This is insane. // TODO: [Priority] Refactor codeblock.jsx. Show nothing in empty state var CodeBlock = React.createClass({ componentDidMount: function() { $('.code-scroll').nanoScroller(); }, render: function() { var filters = []; (this.props.filter.contrast != 100) ? filters.push('contrast('+this.props.filter.contrast+'%)') : ''; (this.props.filter.brightness != 100) ? filters.push('brightness('+this.props.filter.brightness+'%)') : ''; (this.props.filter.saturate != 100) ? filters.push('saturate('+this.props.filter.saturate+'%)') : ''; (this.props.filter.sepia != 0) ? filters.push('sepia('+this.props.filter.sepia+'%)') : ''; (this.props.filter.grayscale != 0) ? filters.push('grayscale('+this.props.filter.grayscale+'%)') : ''; (this.props.filter.invert != 0) ? filters.push('invert('+this.props.filter.invert+'%)') : ''; (this.props.filter.hueRotate != 0) ? filters.push('hue-rotate('+this.props.filter.hueRotate+'deg)') : ''; (this.props.filter.blur != 0) ? filters.push('blur('+this.props.filter.blur+'px)') : ''; var filters = filters.join(' '); var opacity = this.props.filter.opacity; var blend = this.props.filter.blend; var overlay = this.props.overlay; var output = '.filter {
' output += ' position: relative;
'; output += (filters.length > 0) ? ' -webkit-filter: '+filters+';
' : ''; output += (filters.length > 0) ? ' filter: '+filters+';
' : ''; output += '}'; output += '
'; switch (overlay.position) { case 'left top': var overlayPos = '0% 0%'; break; case 'center top': var overlayPos = '50% 0%'; break; case 'right top': var overlayPos = '100% 0%'; break; case 'center center': var overlayPos = '50% 50%'; break; case 'right center': var overlayPos = '100% 50%'; break; case 'left bottom': var overlayPos = '0% 100%'; break; case 'center bottom': var overlayPos = '50% 100%'; break; case 'right bottom': var overlayPos = '100% 100%'; break; default: } if (this.props.overlay.type == 'solid' || this.props.overlay.type == 'linear' || this.props.overlay.type == 'radial') { output += '.filter::before {
'; output += ' content: "";
'; output += ' display: block;
'; output += ' height: 100%;
'; output += ' width: 100%;
'; output += ' top: 0;
'; output += ' left: 0;
'; output += ' position: absolute;
'; output += ' pointer-events: none;
'; output += (blend && blend != 'normal') ? ' mix-blend-mode: '+blend+';
' : ''; output += (opacity && opacity != '100') ? ' opacity: '+(parseInt(opacity)/100)+';
' : ''; output += (overlay && overlay.type == 'solid') ? ' background: '+'rgba('+overlay.color.r+', '+overlay.color.g+', '+overlay.color.b+', '+overlay.color.a+')'+';
' : ''; output += (overlay && overlay.type == 'linear') ? ' background: -webkit-linear-gradient('+overlay.direction+', rgba('+overlay.color1.color.r+', '+overlay.color1.color.g+', '+overlay.color1.color.b+', '+overlay.color1.color.a+') '+ overlay.color1.stop+', rgba('+overlay.color2.color.r+', '+overlay.color2.color.g+', '+overlay.color2.color.b+', '+overlay.color2.color.a+'));
' : ''; output += (overlay && overlay.type == 'linear') ? ' background: linear-gradient('+overlay.direction+', rgba('+overlay.color1.color.r+', '+overlay.color1.color.g+', '+overlay.color1.color.b+', '+overlay.color1.color.a+') '+ overlay.color1.stop+', rgba('+overlay.color2.color.r+', '+overlay.color2.color.g+', '+overlay.color2.color.b+', '+overlay.color2.color.a+'));
' : ''; output += (overlay && overlay.type == 'radial') ? ' background: -webkit-radial-gradient('+overlayPos+', circle '+overlay.size+', rgba('+overlay.color1.color.r+', '+overlay.color1.color.g+', '+overlay.color1.color.b+', '+overlay.color1.color.a+') '+ overlay.color1.stop+', rgba('+overlay.color2.color.r+', '+overlay.color2.color.g+', '+overlay.color2.color.b+', '+overlay.color2.color.a+'));
' : ''; output += (overlay && overlay.type == 'radial') ? ' background: radial-gradient('+overlayPos+', circle '+overlay.size+', rgba('+overlay.color1.color.r+', '+overlay.color1.color.g+', '+overlay.color1.color.b+', '+overlay.color1.color.a+') '+ overlay.color1.stop+', rgba('+overlay.color2.color.r+', '+overlay.color2.color.g+', '+overlay.color2.color.b+', '+overlay.color2.color.a+'));
' : ''; output += '}'; } return (
); } }); module.exports = CodeBlock; ================================================ FILE: source/js/components/color.jsx ================================================ var React = require('react'); var ColorSwatch = require('./colorswatch.jsx') ColorStop = require('./colorstop.jsx') var Color = React.createClass({ render: function() { if (this.props.colorStop == 'true') { var colorStop = } return (
{colorStop}
); } }); module.exports = Color; ================================================ FILE: source/js/components/colorstop.jsx ================================================ var React = require('react'); var ColorStop = React.createClass({ increaseCount: function() { this.props.updateStop( parseInt(this.props.stopValue) + 1 ) }, decreaseCount: function() { this.props.updateStop( parseInt(this.props.stopValue) - 1 ) }, render: function() { return (
+
-

Stop

); } }); module.exports = ColorStop; ================================================ FILE: source/js/components/colorswatch.jsx ================================================ var React = require('react'); var { ChromePicker } = require('react-color'); var ColorSwatch = React.createClass({ getInitialState: function() { return { displayColorPicker: false } }, toggleColorPicker: function() { this.setState({ displayColorPicker: !this.state.displayColorPicker }); }, handleClose: function() { this.setState({ displayColorPicker: false }); }, render: function() { var swatchColor = { backgroundColor: 'rgba('+this.props.overlayColor.r+', '+this.props.overlayColor.g+', '+this.props.overlayColor.b+', '+this.props.overlayColor.a+')' } var popupPosition = { left: 'initial', top: 'initial', marginLeft: '0', zIndex: '999', bottom: '100%', marginBottom: '20px', position: 'absolute' } var popover = { position: 'absolute', zIndex: '2' } var cover = { position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' } return (

{this.props.label}

{ this.state.displayColorPicker &&
}
); } }); module.exports = ColorSwatch; ================================================ FILE: source/js/components/gradientdirection.jsx ================================================ var React = require('react'); var GradientDirection = React.createClass({ render: function() { var directions = [ 'to bottom right', 'to bottom', 'to bottom left', 'to right', 'to left', 'to top right', 'to top', 'to top left' ]; var gradientDirections = directions.map(function(direction, index){ return ( ); }); return (
); } }); module.exports = GradientDirection; ================================================ FILE: source/js/components/gradientposition.jsx ================================================ var React = require('react'); var GradientPosition = React.createClass({ render: function() { var positions = [ 'left top', 'center top', 'right top', 'left center', 'center center', 'right center', 'left bottom', 'center bottom', 'right bottom' ]; var gradientPositions = positions.map(function(position, index){ return ( ); }); return (
); } }); module.exports = GradientPosition; ================================================ FILE: source/js/components/gradientsize.jsx ================================================ var React = require('react'); var GradientSize = React.createClass({ render: function() { var sizes = [ 'closest-side', 'closest-corner', 'farthest-side', 'farthest-corner' ]; var gradientSizes = sizes.map(function(size, index){ return ( ); }); return (
); } }); module.exports = GradientSize; ================================================ FILE: source/js/components/layout/gallery.jsx ================================================ var React = require('react'); var $ = require('jquery'); var nanoScroller = require('nanoScroller'); var FilterFactory = require('../../factory'); var dragscroll = require('../../vendor/drag'); var presets = require('../../presets'); var classNames = require('classnames'); var Gallery = React.createClass({ componentDidMount: function() { $('.gallery-scroll').nanoScroller({ alwaysVisible: true }); }, enablePreset: function(name, event) { this.props.updatePreset(name); }, render: function() { var galleryClass = classNames({ 'gallery': true, 'gallery-scroll': true, 'is-active': this.props.gallery.visible }); var thumbs = []; var self = this; Object.keys(presets).forEach(function(key) { var name = key; var object = presets[key]; var thumbClass = classNames({ 'thumb': true, 'is-active': (this.props.preset == key) ? true : false }); var factory = new FilterFactory(object.filter, object.overlay); var overlay = factory.getOverlayStyles(); var filter = factory.getFilterStyles(); var image = 'https://source.unsplash.com/'+this.props.image.unsplashID+'/100x75'; thumbs.push(

  • {name.replace(/^./, name[0].toUpperCase())}

    • ); }.bind(this)); return (
      {thumbs}
    ); } }); module.exports = Gallery; ================================================ FILE: source/js/components/layout/main.jsx ================================================ var React = require('react'); var Photo = require('../photo.jsx'); var UnsplashModal = require('../unsplashmodal.jsx'); var UploadModal = require('../uploadmodal.jsx'); var Main = React.createClass({ render: function() { if (this.props.gallery.visible) { var galleryTriggerText = 'Hide Presets' } else { var galleryTriggerText = 'Show Presets' } return (

    {galleryTriggerText}

    Built by @_ighosh. Presets from cssgram by @una

    ) } }); module.exports = Main; ================================================ FILE: source/js/components/layout/sidebar.jsx ================================================ var React = require('react'); var $ = require('jquery'); var nanoScroller = require('nanoScroller'); var RangeSlider = require('../range.jsx'); var CodeBlock = require('../codeblock.jsx'); var BlendModes = require('../blendmode.jsx'); var Background = require('../background.jsx'); var ReactTabs = require('react-tabs'); var Tab = ReactTabs.Tab; var Tabs = ReactTabs.Tabs; var TabList = ReactTabs.TabList; var TabPanel = ReactTabs.TabPanel; var Sidebar = React.createClass({ getInitialState: function() { return { selectedIndex: 0 } }, handleSelected: function (index, last) { this.setState({ selectedIndex: index }); }, componentDidMount: function() { $('.nano').nanoScroller(); $('.mark-scroll').nanoScroller(); }, render: function () { return ( ); } }); module.exports = Sidebar; ================================================ FILE: source/js/components/overlaytype.jsx ================================================ var React = require('react'); var OverlayType = React.createClass({ render: function() { return (
    ); } }); module.exports = OverlayType; ================================================ FILE: source/js/components/photo.jsx ================================================ var React = require('react'); var FilterFactory = require('../factory'); var ImageLoader = require('react-imageloader'); var Photo = React.createClass({ getInitialState: function() { return { photoLoaded: false } }, shouldComponentUpdate: function(nextProps, nextState){ return this.props.overlay !== nextProps.overlay || this.props.filter !== nextProps.filter || this.props.image !== nextProps.image || this.state != nextState; }, componentWillReceiveProps: function(nextProps) { if (this.props.image != nextProps.image) { this.setState({photoLoaded: false}); } }, photoLoaded: function() { this.setState({photoLoaded: true}); }, preloader: function () { return ; }, render: function() { if (this.props.image.type == 'unsplash') { var img = 'https://source.unsplash.com/'+this.props.image.unsplashID+'/800x600'; } else if (this.props.image.type == 'upload') { var img = this.props.image.source; } var factory = new FilterFactory(this.props.filter, this.props.overlay); var overlay = factory.getOverlayStyles(); var filter = factory.getFilterStyles(); // Hides the overlay div to prevent bleeding filter colors on the spinnner overlay.display = (this.state.photoLoaded == false) ? 'none' : 'block' ; return (
    ); } }); module.exports = Photo; ================================================ FILE: source/js/components/range.jsx ================================================ var React = require('react'); var RangleSlider = React.createClass({ render: function() { return (

    {this.props.label}

    {this.props.value}{this.props.unit}

    ); } }); module.exports = RangleSlider; ================================================ FILE: source/js/components/unsplashmodal.jsx ================================================ var React = require('react'); var ReactModal = require('react-modal'); var $ = require('jquery'); var nanoScroller = require('nanoScroller'); var UnsplashModal = React.createClass({ getInitialState: function() { return { modalIsOpen: false }; }, openModal: function() { this.setState({modalIsOpen: true}); }, closeModal: function() { this.setState({modalIsOpen: false}); }, setMainImage: function(id, event) { this.props.updateMainImage('unsplash', id); this.setState({modalIsOpen: false}); }, componentDidMount: function() { $.getJSON('https://api.unsplash.com/photos/?per_page=50&client_id=86f6167ee81be7b8aea6aa0d999c1bae79b3351b43e8df03c8baaa9c630f24ba') .done(function(data) { this.setState({images: data }); }.bind(this)); $('.modal-scroll').nanoScroller({ alwaysVisible: true }); }, shouldComponentUpdate: function(nextProps, nextState){ return this.state !== nextState; }, render: function() { if (this.state.images) { var images = this.state.images.map(function(image, index){ return (
    ); }.bind(this)); } var modalStyles = { content : { top: '50%', left: '50%', right: 'auto', bottom: 'auto', marginRight: '-50%', transform: 'translate(-50%, -50%)', width: '640px', height: '500px', overlfow: 'scroll', 'border': 'transparent', 'backgroundColor': '#191d23' }, overlay: { backgroundColor: 'rgba(46, 47, 49, 0.701961)' } }; return (

    Select an image from Unsplash

    Select an image

    {images}
    ); } }); module.exports = UnsplashModal; ================================================ FILE: source/js/components/uploadmodal.jsx ================================================ var React = require('react'); var ReactModal = require('react-modal'); var Dropzone = require('react-dropzone'); var UploadModal = React.createClass({ getInitialState: function() { return { modalIsOpen: false, files: [] }; }, setMainImage: function(src) { this.props.updateMainImage('upload', src) }, onDrop: function (files) { this.setState({ files: files }); this.setMainImage(files[0].preview); this.closeModal(); }, openModal: function() { this.setState({modalIsOpen: true}); }, closeModal: function() { this.setState({modalIsOpen: false}); }, render: function() { var modalStyles = { content : { top: '50%', left: '50%', right: 'auto', bottom: 'auto', marginRight: '-50%', transform: 'translate(-50%, -50%)', width: '640px', height: '500px', overlfow: 'scroll', 'border': 'transparent', 'backgroundColor': '#191d23' }, overlay: { backgroundColor: 'rgba(46, 47, 49, 0.701961)' } }; return (

    Upload an Image

    Upload an Image

    Drag and drop an image here, or click to select from drive.
    ); } }); module.exports = UploadModal; ================================================ FILE: source/js/factory.js ================================================ function Factory(filter, overlay) { if (!(this instanceof Factory)) { return new Factory(filter, overlay); } this.filter = filter; this.overlay = overlay; }; Factory.prototype.getOverlayStyles = function getOverlayStyles() { if (this.filter.blend) { var blend = this.filter.blend; } if (this.filter.opacity) { var opacity = this.filter.opacity; } else { var opacity = 100; } if (this.overlay.direction) { var direction = this.overlay.direction; } if (this.overlay.size) { var size = this.overlay.size; } if (this.overlay.position) { var position = this.overlay.position; } if (this.overlay.color) { var color = 'rgba('+this.overlay.color.r+', '+this.overlay.color.g+', '+this.overlay.color.b+', '+this.overlay.color.a+')'; } if (this.overlay.color1) { var color1 = 'rgba('+this.overlay.color1.color.r+', '+this.overlay.color1.color.g+', '+this.overlay.color1.color.b+', '+this.overlay.color1.color.a+')'; var color1Stop = this.overlay.color1.stop; } if (this.overlay.color2) { var color2 = 'rgba('+this.overlay.color2.color.r+', '+this.overlay.color2.color.g+', '+this.overlay.color2.color.b+', '+this.overlay.color2.color.a+')' var color2Stop = this.overlay.color2.stop; } switch (this.overlay.type) { case 'solid': var background = color; break; case 'linear': var background = 'linear-gradient( '+direction+', '+color1+' '+color1Stop+'%, '+color2+' '+color2Stop+'% )'; break; case 'radial': var background = '-webkit-radial-gradient('+position+', circle '+size+', '+color1+' '+color1Stop+'%, '+color2+' '+color2Stop+'% )'; break; default: } var styles = { content: ' ', display: 'block', height: '100%', width: '100%', top: '0', left: '0', pointerEvents: 'none', position: 'absolute', mixBlendMode: blend, opacity: (opacity/100), background: background } return styles; }; Factory.prototype.getFilterStyles = function getFilterStyles() { var filters = ''; filters += (this.filter.sepia) ? 'sepia(' + this.filter.sepia + '%) ' : ''; filters += (this.filter.brightness) ? 'brightness(' + this.filter.brightness + '%) ': ''; filters += (this.filter.contrast) ? 'contrast(' + this.filter.contrast + '%) ': ''; filters += (this.filter.saturate) ? 'saturate(' + this.filter.saturate + '%) ': ''; filters += (this.filter.grayscale) ? 'grayscale(' + this.filter.grayscale + '%) ': ''; filters += (this.filter.invert) ? 'invert(' + this.filter.invert + '%) ': ''; filters += (this.filter.hueRotate) ? 'hue-rotate(' + this.filter.hueRotate + 'deg) ': ''; filters += (this.filter.blur) ? 'blur(' + this.filter.blur + 'px) ': ''; var styles = { position: 'relative', WebkitFilter: filters, filter: filters } return styles; }; module.exports = Factory; ================================================ FILE: source/js/inbox.js ================================================ var React = require('react'); var ReactDOM = require('react-dom'); var App = require('./components/app.jsx'); var Share = require('./share'); var Tracker = require('./track'); Share.boot({ 'twitter': true, 'facebook': true, 'gplus': false, 'sharecount': false }); Tracker.track(); /** * Kickoff the app */ ReactDOM.render( , document.getElementById('root') ); console.log('====================================================================='); console.log('cssfilters.co - Custom and Instagram like photo filters for CSS'); console.log('====================================================================='); console.log('A little project by www.twitter.com/_ighosh'); ================================================ FILE: source/js/presets.js ================================================ var filters = { '1977': { filter: { contrast: '110', brightness: '110', saturate: '130', opacity: '100', blend: 'screen' }, overlay: { type: 'solid', color: { a: 0.3, b: 188, g: 106, r: 243 } } }, 'aden': { filter: { hueRotate: '20', contrast: '90', saturate: '85', brightness: '120', opacity: '100', blend: 'darken' }, overlay: { type: 'linear', direction: 'to right', color1: { color: { a: 0.2, b: 14, g: 10, r: 66 }, stop: 1 }, color2: { color: { a: 0, b: 14, g: 10, r: 66 }, stop: 100 } } }, 'amaro': { filter: { hueRotate: '-10', contrast: '90', saturate: '150', brightness: '110', blend: 'screen' }, overlay: { type: 'none' } }, 'brannan': { filter: { sepia: '50', contrast: '140', blend: 'lighten', opacity: '100' }, overlay: { type: 'solid', color: { a: 0.31, b: 199, g: 44, r: 161 } } }, 'brooklyn': { filter: { contrast: '90', brightness: '110', opacity: '100', blend: 'overlay' }, overlay: { type: 'radial', position: 'center center', size: 'closest-corner', color1: { color: { a: 0.4, b: 193, g: 223, r: 168 }, stop: 1 }, color2: { color: { a: 0.2, b: 200, g: 196, r: 183 }, stop: 100 } } }, 'clarendon': { filter: { contrast: '120', saturate: '125', blend: 'overlay', opacity: '100' }, overlay: { type: 'solid', color: { a: 0.2, b: 227, g: 187, r: 127 } } }, 'earlybird': { filter: { contrast: '90', sepia: '20', blend: 'overlay', opacity: '100' }, overlay: { type: 'radial', color1: { color: { a: 1, b: 142, g: 186, r: 208 }, stop: 20 }, color2: { color: { a: 0.2, b: 16, g: 2, r: 29 }, stop: 100 } } }, 'gingham': { filter: { brightness: '105', hueRotate: '350', blend: 'darken', opacity: '100' }, overlay: { type: 'linear', direction: 'to right', color1: { color: { a: 0.2, b: 14, g: 10, r: 66 }, stop: 1 }, color2: { color: { a: 0, b: 0, g: 0, r: 0 }, stop: 100 } } }, 'earlybird': { filter: { contrast: '90', sepia: '20', blend: 'overlay', opacity: '100' }, overlay: { type: 'radial', color1: { color: { a: 1, b: 142, g: 186, r: 208 }, stop: 20 }, color2: { color: { a: 0.2, b: 16, g: 2, r: 29 }, stop: 100 } } }, 'hudson': { filter: { brightness: '120', contrast: '90', saturate: '110', blend: 'multiply', opacity: '50' }, overlay: { type: 'radial', color1: { color: { a: 1, b: 166, g: 177, r: 255 }, stop: 50 }, color2: { color: { a: 1, b: 52, g: 33, r: 52 }, stop: 100 } } }, 'inkwell': { filter: { sepia: '30', contrast: '110', brightness: '110', grayscale: '100', opacity: '100' }, overlay: { type: 'solid', color: { a: 0, b: 0, g: 0, r: 0 } } }, 'lofi': { filter: { saturate: '110', contrast: '150', opacity: '100', blend: 'multiply' }, overlay: { type: 'radial', color1: { color: { a: 0, b: 0, g: 0, r: 0 }, stop: 70 }, color2: { color: { a: 1, b: 34, g: 34, r: 34 }, stop: 100 } } }, 'maven': { filter: { sepia: '25', brightness: '95', contrast: '95', saturate: '150', blend: 'hue', opacity: '100' }, overlay: { type: 'solid', color: { a: 0.2, b: 26, g: 230, r: 3 } } }, 'perpetua': { filter: { opacity: '50', blend: 'soft-light' }, overlay: { type: 'linear', direction: 'to bottom', color1: { color: { a: 1, b: 154, g: 91, r: 0 }, stop: 1 }, color2: { color: { a: 0, b: 230, g: 193, r: 61 }, stop: 100 } } }, 'reyes': { filter: { sepia: '22', contrast: '85', brightness: '110', saturate: '75', opacity: '50', blend: 'soft-light' }, overlay: { type: 'solid', color: { a: 1, b: 239, g: 205, r: 173 } } }, 'stinson': { filter: { contrast: '75', saturate: '85', brightness: '115', opacity: '100', blend: 'soft-light' }, overlay: { type: 'solid', color: { a: 0.2, b: 128, g: 149, r: 240 } } }, 'toaster': { filter: { contrast: '150', brightness: '90', opacity: '50', blend: 'screen' }, overlay: { type: 'radial', color1: { color: { a: 1, b: 128, g: 78, r: 15 }, stop: 1 }, color2: { color: { a: 1, b: 59, g: 0, r: 59 }, stop: 100 } } }, 'walden': { filter: { brightness: '110', hueRotate: '350', sepia: '30', saturate: '160', opacity: '30', blend: 'screen' }, overlay: { type: 'solid', color: { a: 1, b: 0, g: 68, r: 204 } } }, 'valencia': { filter: { contrast: '108', sepia: '8', brightness: '108', opacity: '50', blend: 'exclusion' }, overlay: { type: 'solid', color: { a: 1, b: 57, g: 3, r: 58 } } }, 'xpro2': { filter: { sepia: '30', opacity: '100', blend: 'color-burn' }, overlay: { type: 'radial', color1: { color: { a: 1, b: 230, g: 231, r: 224 }, stop: 40 }, color2: { color: { a: 0.6, b: 161, g: 42, r: 43 }, stop: 100 } } } }; module.exports = filters; ================================================ FILE: source/js/share.js ================================================ var $ = require('jquery'); var Share = ( function( window, undefined ) { var config = { 'twitter': true, 'facebook': true, 'gplus': true, 'sharecount': false }; var $share = document.getElementById('share-buttons'); var $shareLinks = $share.querySelectorAll('a'); var $sharecounts = document.getElementsByClassName('share-count'); var $facebook = document.getElementById('share-facebook'); var $facebookCount = document.getElementById('facebook-count'); var $twitter = document.getElementById('share-twitter'); var $twitterCount = document.getElementById('twitter-count'); var permalink = $share.getAttribute('data-permalink'); function _extend(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { if (!arguments[i]) continue; for (var key in arguments[i]) { if (arguments[i].hasOwnProperty(key)) out[key] = arguments[i][key]; } } return out; }; function _checkStatus(response) { if (response.status >= 200 && response.status < 300) { return response } else { var error = new Error(response.statusText) error.response = response throw error } } function _setVariables ( options ) { config = _extend( {}, config, options ); } function _setupShareButtons () { if (config.sharecount === true) { ( document.contains($facebook) && config.facebook === true ) ? _getFacebookCount() : $facebook.parentNode.removeChild($facebook) ; // jshint ignore:line ( document.contains($twitter) && config.twitter === true ) ? _getTwitterCount() : $twitter.parentNode.removeChild($twitter) ; // jshint ignore:line } else { // Remove share count elements from dom while($sharecounts.length > 0){ $sharecounts[0].parentNode.removeChild($sharecounts[0]); } } } function _getFacebookCount () { $.getJSON('https://graph.facebook.com/?id='+permalink) .done(function(data) { if (data.shares > 0) { $facebookCount.textContent = data.shares; ($facebookCount.classList) ? $facebookCount.classList.add('is-loaded') : $facebookCount.className += ' ' + 'is-loaded' ; } else { $facebookCount.parentNode.removeChild($facebookCount); } }) .fail(function(data) { $facebookCount.parentNode.removeChild($facebookCount); }); } function _getTwitterCount () { $.getJSON('https://cdn.api.twitter.com/1/urls/count.json?url=' + permalink + '&callback=?') .done(function(data) { if (data.count > 0) { $twitterCount.textContent = data.count; ($twitterCount.classList) ? $twitterCount.classList.add('is-loaded') : $twitterCount.className += ' ' + 'is-loaded' ; } else { $twitterCount.parentNode.removeChild($twitterCount); } }) .fail(function(data) { $twitterCount.parentNode.removeChild($twitterCount); }); } function _clickHandler(event) { event.preventDefault(); var el = this, popup = el.getAttribute('class'), link = el.getAttribute('href'), w = 700, h = 400; // Set popup sizes switch (popup) { case 'js-twitter-link': h = 300; break; case 'js-gplus-link': w = 500; break; } window.open(link, popup, 'width=' + w + ', height=' + h); } function _setupShareModals () { for (i = 0; i < $shareLinks.length; ++i) { $shareLinks[i].addEventListener('click', _clickHandler); } } function boot( options ) { _setVariables( options ); _setupShareButtons(); _setupShareModals(); } return { boot : boot }; } )( window ); module.exports = Share; ================================================ FILE: source/js/track.js ================================================ var $ = require('jquery'); var Track = ( function( window, undefined ) { var $twitter = $('#share-twitter'); var $facebook = $('#share-facebook'); var $github = $('#share-github'); function track() { $facebook.on('click', function(event) { ga('send', 'social', 'facebook', 'share', 'http://www.cssfilters.co/'); }); $twitter.on('click', function(event) { ga('send', 'social', 'twitter', 'share', 'http://www.cssfilters.co/'); }); $github.on('click', function(event) { ga('send', 'event', 'header-icons', 'click', 'github'); }); } return { track : track }; } )( window ); module.exports = Track; ================================================ FILE: source/js/vendor/drag.js ================================================ /** * @fileoverview dragscroll - scroll area by dragging * @version 0.0.5 * * @license MIT, see http://github.com/asvd/intence * @copyright 2015 asvd */ (function (root, factory) { if (typeof define === 'function' && define.amd) { define(['exports'], factory); } else if (typeof exports !== 'undefined') { factory(exports); } else { factory((root.dragscroll = {})); } }(this, function (exports) { var _window = window; var _document = document; var mousemove = 'mousemove'; var mouseup = 'mouseup'; var mousedown = 'mousedown'; var EventListener = 'EventListener'; var addEventListener = 'add'+EventListener; var removeEventListener = 'remove'+EventListener; var dragged = []; var reset = function(i, el) { for (i = 0; i < dragged.length;) { el = dragged[i++]; el[removeEventListener](mousedown, el.md, 0); _window[removeEventListener](mouseup, el.mu, 0); _window[removeEventListener](mousemove, el.mm, 0); } dragged = _document.getElementsByClassName('dragscroll'); for (i = 0; i < dragged.length;) { (function(el, lastClientX, lastClientY, pushed){ el[addEventListener]( mousedown, el.md = function(e) { // alert("What!"); pushed = 1; lastClientX = e.clientX; lastClientY = e.clientY; e.preventDefault(); e.stopPropagation(); }, 0 ); _window[addEventListener]( mouseup, el.mu = function() {pushed = 0;}, 0 ); _window[addEventListener]( mousemove, el.mm = function(e, scroller) { scroller = el.scroller||el; if (pushed) { scroller.scrollLeft -= (- lastClientX + (lastClientX=e.clientX)); scroller.scrollTop -= (- lastClientY + (lastClientY=e.clientY)); } }, 0 ); })(dragged[i++]); } } if (_document.readyState == 'complete') { reset(); } else { _window[addEventListener]('load', reset, 0); } exports.reset = reset; })); ================================================ FILE: source/scss/config/_color.scss ================================================ // scss-lint:disable ColorVariable TrailingSemicolon // TODO: Reafactor _colors config for heaven's sake. It's a mess $colors: ( base: ( 'border-color': #35373a, 'header-bg-start': #2a3139, 'header-bg-end': #292d34, 'header-gradient-start': #6b87e3, 'header-gradient-mid': #e041cc, 'header-gradient-end': #fc4b53, 'header-text-color': #c4ccdf, 'sidebar-border-color': #20252b, 'sidebar-bg-start': #191d23, 'sidebar-bg-end': #202329, 'slider-label-color': #7e8792, 'slider-value-bg-color': #0f1010, 'range-path-color': #434751, 'range-handle-color': #9c5ad8, 'tab-bg-color': #0f1010, 'tab-bg-color-active': transparent, 'tab-label-color': #5e6873, 'tab-label-color-active': #c4ccdf, 'link-color': #15b0ed, 'main-bg': #1c1e22, 'dropzone-border': #444, 'cite-color': #979ead ), social: ( twitter: #55acee, facebook: #455fa2, ) ); ================================================ FILE: source/scss/config/_debug.scss ================================================ $pesticide-debug-outline: false; $pesticide-debug-depth: false; ================================================ FILE: source/scss/config/_font-face.scss ================================================ // scss-lint:disable TrailingSemicolon SpaceAfterVariableName $font-path: '../fonts/'; $font-faces: ( 'cssfiltericons': ( 'cssfiltericons' normal normal, ) ); ================================================ FILE: source/scss/core/_icons.scss ================================================ // scss-lint:disable ImportantRule @charset 'UTF-8'; [data-icon]::before { @include font-smoothing(); content: attr(data-icon); font-family: 'cssfiltericons' !important; font-style: normal !important; font-variant: normal !important; font-weight: normal !important; line-height: 1; speak: none; text-transform: none !important; } [class^='icon-']::before, [class*=' icon-']::before { @include font-smoothing(); font-family: 'cssfiltericons' !important; font-style: normal !important; font-variant: normal !important; font-weight: normal !important; line-height: 1; speak: none; text-transform: none !important; } .icon-image::before { content: 'a'; } .icon-upload::before { content: 'b'; } .icon-close::before { content: 'd'; } .icon-github::before { content: 'e'; } .icon-twitter::before { content: 'f'; } .icon-facebook::before { content: 'g'; } .icon-settings::before { content: 'i'; } .icon-logo::before { content: 'h'; } .icon-cssfilter::before { content: 'c'; } ================================================ FILE: source/scss/core/_layout.scss ================================================ * { box-sizing: border-box; } body { @include coverer(); background-color: c('base', 'main-bg'); } .container { padding-left: 20px; padding-right: 20px; } .wrap { display: flex; height: calc(100% - 70px); overflow: hidden; position: absolute; width: 100%; } .wrap-minor { display: flex; flex-direction: column; flex-grow: 1; } .main { background: c('base', 'main-bg'); flex-grow: 1; overflow: hidden; padding: 20px; position: relative; } .photo { @include centerer(); } .sidebar { background: linear-gradient(90deg, c('base', 'sidebar-bg-start'), c('base', 'sidebar-bg-end')); border-left: solid 1px c('base', 'sidebar-border-color'); flex-basis: 30%; overflow-y: scroll; } ================================================ FILE: source/scss/core/_typography.scss ================================================ h1, h2, h3, h4, h5, h6, p, a, span { font-family: 'Avenir Next', 'Helvetica Neue', 'Arial', sans-serif; } pre { background-color: c('base', 'tab-bg-color'); color: c('base', 'slider-label-color'); cursor: text; padding: 20px; span { font-family: 'Source Code Pro', 'Menlo', monospace; font-size: 13px; } } code { font-size: 13px; } ================================================ FILE: source/scss/inbox.scss ================================================ @import 'config/debug'; @import 'config/color'; @import 'config/font-face'; @import '../../bower_components/sanitize-css/dist/sanitize'; @import '../../bower_components/stylekit/stylekit'; @import 'core/layout'; @import 'core/typography'; @import 'core/icons'; @import 'modules/header'; @import 'modules/slider'; @import 'modules/range'; @import 'modules/tab'; @import 'modules/photo'; @import 'modules/dropdown'; @import 'modules/color'; @import 'modules/number'; @import 'modules/radio'; @import 'modules/gallery'; @import 'modules/modal'; @import 'modules/dropzone'; @import 'modules/credits'; @import 'modules/opts'; @import 'vendor/social'; @import 'vendor/nanoscroller'; ================================================ FILE: source/scss/modules/_color.scss ================================================ $swatch-border: #424242; .color { display: flex; margin-bottom: 15px; &__cont { margin-bottom: 25px; margin-top: 25px; } &__box { @include clearfix(); flex-basis: 50%; position: relative; } &__stop { @include clearfix(); flex-basis: 50%; } &__text { color: c('base', 'slider-label-color'); float: left; font-size: 12px; margin-left: 5px; margin-top: 5px; } &__swatch { border: solid 1px $swatch-border; border-radius: 1px; cursor: pointer; display: inline-block; float: left; padding: 5px; } &__preview { border-radius: 2px; height: 14px; width: 36px; } &__stop-number { float: left; } &__stop-label { color: c('base', 'slider-label-color'); float: left; font-size: 12px; margin-left: 5px; margin-top: 5px; } } ================================================ FILE: source/scss/modules/_credits.scss ================================================ .credits { @include centerer(true, false); bottom: 10px; position: absolute; &__cite { font-size: 12px; span { color: c('base', 'cite-color'); } a { color: darken(c('base', 'link-color'), 10%); } } } ================================================ FILE: source/scss/modules/_dropdown.scss ================================================ $arrow-color: #888; select { color: c('base', 'slider-label-color'); outline: 0; text-shadow: none; } .dropdown { background-color: c('base', 'tab-bg-color'); border: 1px solid; border-color: c('base', 'tab-bg-color'); border-radius: 3px; color: c('base', 'slider-label-color'); display: inline-block; height: 35px; overflow: hidden; position: relative; text-shadow: none; width: 200px; } .dropdown::before, .dropdown::after { border: 4px dashed; border-color: $arrow-color transparent; content: ''; height: 0; pointer-events: none; position: absolute; right: 10px; top: 10px; width: 0; z-index: 2; } .dropdown::before { border-bottom-style: solid; border-top: 0; } .dropdown::after { border-bottom: 0; border-top-style: solid; margin-top: 7px; } .dropdown-select { -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; color: c('base', 'slider-label-color'); font-size: 12px; height: 35px; line-height: 14px; margin: 0; padding: 4px 8px 6px 10px; position: relative; width: 130%; option { background: c('base', 'tab-bg-color'); border-radius: 3px; cursor: pointer; margin: 3px; padding: 6px 8px; text-shadow: none; } } .dropdown-select:focus { color: c('base', 'slider-label-color'); outline: 0; width: 100%; z-index: 3; } .lt-ie9 .dropdown { z-index: 1; } .lt-ie9 .dropdown-select { z-index: -1; } .lt-ie9 .dropdown-select:focus { z-index: 3; } @-moz-document url-prefix() { .dropdown-select { padding-left: 6px; } } ================================================ FILE: source/scss/modules/_dropzone.scss ================================================ .dropzone { border: dashed 3px c('base', 'header-bg-start'); height: 100%; position: relative; width: 100%; &__byline { @include centerer(); color: c('base', 'slider-label-color'); font-size: 13px; text-align: center; } } ================================================ FILE: source/scss/modules/_gallery.scss ================================================ // scss-lint:disable SelectorFormat ImportantRule .gallery { background-color: c('base', 'tab-bg-color'); flex-basis: 0; overflow: scroll; transition: all .35s cubic-bezier(.42, 0, .42, .86) 0s; &.is-active { flex-basis: 148px; } &__scroll-cont { overflow: hidden !important; overflow-x: scroll !important; } &__trigger { color: c('base', 'link-color'); cursor: pointer; float: right; font-size: 13px; i { font-size: 120%; margin-top: -4px; position: absolute; transform: rotate(90deg); } span { padding-left: 27px; } } &__items { @include clearfix(); display: flex; justify-content: space-between; list-style-type: none; margin: 20px; width: 100%; } &__item { display: inline-block; margin: 0 5px; } } .thumb { border: solid 1px c('base', 'border-color'); border-radius: 2px; cursor: pointer; overflow: hidden; padding-bottom: 0; &.is-active { border: solid 1px c('base', 'link-color'); .thumb__label { color: c('base', 'tab-label-color-active'); } } &__figure { height: 75px; position: relative; width: 100px; } &__label { color: c('base', 'slider-label-color'); font-size: 13px; line-height: 2; text-align: center; } &__img { width: 100%; } } ================================================ FILE: source/scss/modules/_header.scss ================================================ .header { background: linear-gradient(to bottom, c('base', 'header-bg-start'), c('base', 'header-bg-end')); height: 70px; &__gradient { background: linear-gradient(to left, c('base', 'header-gradient-start') 10%, c('base', 'header-gradient-mid'), c('base', 'header-gradient-end') 90%); display: block; height: 5px; width: 100%; } &__logo { fill: c('base', 'header-text-color'); float: left; height: 35px; margin-top: 15px; width: 35px; } &__share-btns { float: right; margin-top: 15px; } &__github { color: c('base', 'header-text-color'); float: right; font-size: 32px; margin-left: 10px; margin-top: 15px; } } ================================================ FILE: source/scss/modules/_modal.scss ================================================ // scss-lint:disable ImportantRule SelectorFormat .modal { padding: 0 !important; &__trigger-cont { @include clearfix(); div { float: left; } div:first-child { margin-right: 10px; } } &__trigger { color: c('base', 'link-color'); cursor: pointer; display: inline-block; font-size: 13px; padding-left: 0; position: relative; i { font-size: 120%; margin-top: -1px; position: absolute; } span { padding-left: 22px; } } &__header { @include clearfix(); background: linear-gradient(to bottom, c('base', 'header-bg-start'), c('base', 'header-bg-end')); height: 50px; padding: 0 20px; } &__title { color: c('base', 'header-text-color'); float: left; line-height: 50px; } &__close { color: c('base', 'header-text-color'); float: right; margin-top: 16px; } &__body { @include clearfix(); height: 450px; } &__scroll-cont { height: 100%; padding: 20px; } &__thumb { border: solid 2px c('base', 'sidebar-bg-start'); cursor: pointer; float: left; height: 90px; width: 120px; } &__img { height: 90px; width: 120px; } } .ReactModal__Content.ReactModal__Content--after-open.modal { overflow: hidden !important; } ================================================ FILE: source/scss/modules/_number.scss ================================================ $control-color: #898989; .number { @include clearfix(); position: relative; width: 100px; &__input { background-color: c('base', 'tab-bg-color'); color: c('base', 'slider-label-color'); float: left; font-size: 12px; height: 30px; outline: 0; padding: 4px 8px 6px 10px; width: 50%; } &__up, &__down { background-color: lighten(c('base', 'tab-bg-color'), 10%); color: $control-color; cursor: pointer; float: left; height: 30px; padding-top: 2px; text-align: center; user-select: none; width: 20%; } } ================================================ FILE: source/scss/modules/_opts.scss ================================================ .opts { @include clearfix(); margin-bottom: 20px; margin-top: 10px; label { color: c('base', 'slider-label-color'); float: left; font-size: 12px; margin-top: 9px; } .dropdown { float: right; } } ================================================ FILE: source/scss/modules/_photo.scss ================================================ // Todo: Find solution for large image, which works on windows too. .photo { max-height: 85%; // overflow: scroll; &__spinner { z-index: 999; } &__img { img { height: auto; max-width: 100%; } } } ================================================ FILE: source/scss/modules/_radio.scss ================================================ // scss-lint:disable ColorVariable NestingDepth $rad-color: #15b0ed; $speed: .15s; $size: 14px; .radio { height: 1px; opacity: 0; position: absolute; width: 1px; + label { color: c('base', 'slider-label-color'); cursor: pointer; display: block; font-size: 13px; line-height: 2em; position: relative; text-indent: 2.2em; transition: $speed; > i { background: c('base', 'tab-bg-color'); border-radius: $size; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .08), 1px 1px 1px rgba(255, 255, 255, .03); height: $size; left: 0; margin-top: - $size / 2; position: absolute; top: 50%; width: $size; &::after { background: rgba(255, 255, 255, .7); border-radius: $size * 2; content: ''; height: 100%; left: 50%; margin-left: - $size / 2; margin-top: - $size / 2; opacity: 0; position: absolute; top: 50%; transform: scale(.5); width: 100%; } } } &:hover { + label { color: rgba(255, 255, 255, 1); > i::after { opacity: 1; } } } &:focus, &:active { + label { color: rgba(255, 255, 255, 1); > i { box-shadow: 0 0 1px lighten($rad-color, 50%), 0 0 2px lighten($rad-color, 30%), 0 0 5px $rad-color; } } } &:checked + label { color: c('base', 'tab-label-color-active'); > i::after { background: $rad-color; border-radius: $size * 5; opacity: 1; transform: scale(.8); transition: all .2s cubic-bezier(.555, -.375, 0, 1.615); } } &:focus:checked + label, &:active:checked + label { color: $rad-color; } } .radio-group { margin-bottom: 20px; margin-top: 10px; position: relative; } ================================================ FILE: source/scss/modules/_range.scss ================================================ .range { -webkit-appearance: none; border: 1px solid transparent; width: 100%; } .range::-webkit-slider-runnable-track { background: c('base', 'range-path-color'); border: 0; border-radius: 3px; height: 2px; width: 100%; } .range::-webkit-slider-thumb { -webkit-appearance: none; background: c('base', 'range-handle-color'); border: 0; border-radius: 50%; cursor: pointer; height: 16px; margin-top: -6px; width: 16px; } .range:focus { outline: none; } .range:focus::-webkit-slider-runnable-track { background: c('base', 'range-path-color'); } .range::-moz-range-track { background: c('base', 'range-path-color'); border: 0; border-radius: 3px; height: 2px; width: 100%; } .range::-moz-range-thumb { background: c('base', 'range-handle-color'); border: 0; border-radius: 50%; height: 16px; width: 16px; } .range:-moz-focusring { // outline: 1px solid c('base', 'range-handle-color'); outline: 1px solid transparent; outline-offset: -1px; } .range::-ms-track { background: transparent; border-color: transparent; border-width: 6px 0; color: transparent; height: 2px; width: 100%; } .range::-ms-fill-lower { background: c('base', 'range-path-color'); border-radius: 10px; } .range::-ms-fill-upper { background: c('base', 'range-path-color'); border-radius: 10px; } .range::-ms-thumb { background: c('base', 'range-handle-color'); border: 0; border-radius: 50%; height: 16px; width: 16px; } .range:focus::-ms-fill-lower { background: c('base', 'range-path-color'); } .range:focus::-ms-fill-upper { background: c('base', 'range-path-color'); } ================================================ FILE: source/scss/modules/_slider.scss ================================================ .slider { margin-bottom: 15px; &__label, &__value { color: c('base', 'slider-label-color'); font-size: 12px; } &__content { @include clearfix(); } &__label { float: left; margin-top: 9px; } &__value { background-color: c('base', 'slider-value-bg-color'); float: right; padding: 5px 10px; } } ================================================ FILE: source/scss/modules/_tab.scss ================================================ // scss-lint:disable ImportantRule SelectorFormat .tabs { &__headers { display: flex; } &__item { align-items: center; background-color: c('base', 'tab-bg-color') !important; border: 0 !important; border-radius: 0 !important; cursor: pointer; display: flex; flex-grow: 1; height: 60px; justify-content: center; text-align: center; &.is-active { background-color: c('base', 'tab-bg-color-active'); cursor: default; } } &__heading { margin-bottom: 20px; margin-top: 50px; position: relative; &:first-child { margin-top: 0; } } &__clear { color: c('base', 'link-color'); cursor: pointer; font-size: 13px; position: absolute; right: 0; top: 0; } &__label, &__subheader { color: c('base', 'tab-label-color'); font-size: 12px; font-weight: 600 !important; letter-spacing: 1px; margin-top: 15px; text-transform: uppercase; } &__subheader { color: c('base', 'header-text-color'); } &__content { padding: 20px 40px; } } .ReactTabs__Tab--selected { background-color: c('base', 'tab-bg-color-active') !important; border: none !important; cursor: default !important; .tabs__label { color: c('base', 'header-text-color'); } } .react-tabs [role=tablist] { border: none !important; border-bottom: solid 1px transparent !important; display: flex !important; user-select: none !important; } .react-tabs [role=tab]:focus { border-color: transparent !important; box-shadow: none !important; } .react-tabs [role=tab]:focus::after { background: transparent !important; } ================================================ FILE: source/scss/vendor/_nanoscroller.scss ================================================ // scss-lint:disable all /** initial setup **/ .mark__scroll-cont, .code__scroll-cont { position: initial !important; overflow: scroll !important; } $nanoClass: "nano"; $paneClass: "nano-pane"; $sliderClass: "nano-slider"; $contentClass: "nano-content"; .mark-scroll, .code-scroll, .modal-scroll, .gallery-scroll, .#{$nanoClass} { width: 100%; height: 100%; position: relative; overflow: hidden; .#{$contentClass} { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: scroll; overflow-x: hidden; &:focus { outline: thin dotted; } &::-webkit-scrollbar { display: none; } } > .#{$paneClass} { width: 10px; background: rgba(0,0,0,.25); position: absolute; top: 0; right: 0; bottom: 0; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; visibility: hidden\9; // Target only IE7 and IE8 with this hack opacity: .01; > .#{$sliderClass} { background: #444; background: rgba(0,0,0,.5); position: relative; margin: 0 1px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } } } .has-scrollbar > .#{$contentClass}::-webkit-scrollbar { display: block; } .#{$paneClass} { .#{$nanoClass}:hover > &, &.active, &.flashed { visibility: visible\9; // Target only IE7 and IE8 with this hack opacity: 0.99; } } ================================================ FILE: source/scss/vendor/_social.scss ================================================ $share-button-height: 32px; $share-count-bg: #fff; $share-border-color: #ccc; $share-text-color: #333; $share-icon-size: 17px; .social-sharing { a { border-radius: 2px; color: $share-count-bg; display: inline-block; font-weight: normal; height: $share-button-height; line-height: $share-button-height; margin: 0 10px 10px 0; text-decoration: none; &:hover { color: $share-count-bg; } } span { display: inline-block; font-size: 12px; height: $share-button-height; line-height: $share-button-height; vertical-align: top; } .icon { font-size: $share-icon-size; padding: 0 5px 0 10px; &::before { line-height: $share-button-height; } } } .share-title { @include font-smoothing(); font-family: 'Helvetica Neue', 'Arial', sans-serif; font-size: 12px; padding-right: 10px; } .share-facebook { background-color: c('social', 'facebook'); &:hover { background-color: darken(c('social', 'facebook'), 10%); } } .share-twitter { background-color: c('social', 'twitter'); &:hover { background-color: darken(c('social', 'twitter'), 10%); } } .share-count { @include transition(opacity, .3s, ease-in); background-color: $share-count-bg; border: 1px solid $share-border-color; border-radius: 0 2px 2px 0; color: $share-text-color; font-family: 'Helvetica Neue'; font-size: 14px; line-height: $share-button-height - 2; margin-right: -2px; opacity: 0; padding: 0 8px; position: relative; &.is-loaded { opacity: 1; } &::before, &::after { border-bottom: 6px solid transparent; border-right: 6px solid; border-top: 6px solid transparent; content: ''; display: block; height: 0; margin-top: -6px; position: absolute; top: 50%; width: 0; } &::before { border-right-color: $share-border-color; left: -6px; } &::after { border-right-color: $share-count-bg; left: -5px; } a:hover & { background-color: darken($share-count-bg, 4%); &::after { border-right-color: darken($share-count-bg, 4%); } } }