├── .babelrc ├── .bowerrc ├── .csscomb.json ├── .editorconfig ├── .eslintrc.json ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .release.json ├── .stylelintrc.json ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── bower.json ├── config.js ├── dist ├── css │ ├── asColorPicker.css │ └── asColorPicker.min.css ├── images │ ├── alpha.png │ ├── hue.png │ ├── saturation.png │ └── transparent.png ├── jquery-asColorPicker.es.js ├── jquery-asColorPicker.js ├── jquery-asColorPicker.min.js └── jquery-asColorPicker.min.js.map ├── examples ├── css │ ├── main.css │ ├── normalize.css │ └── prism.css ├── demo.gif ├── index.html └── js │ ├── jquery-asColor.js │ ├── jquery-asGradient.js │ ├── jquery.js │ ├── jquery.toc.js │ └── prism.js ├── gulp ├── tasks │ ├── archive.js │ ├── assets.js │ ├── browser.js │ ├── clean.js │ ├── deploy.js │ ├── images.js │ ├── lint-scripts.js │ ├── lint-styles.js │ ├── release.js │ ├── scripts.js │ ├── styles.js │ └── test.js └── util │ ├── getFolders.js │ ├── getSrcFiles.js │ └── handleErrors.js ├── gulpfile.babel.js ├── karma.conf.js ├── manifest.json ├── package-lock.json ├── package.json └── src ├── asColorPicker.js ├── components ├── alpha.js ├── buttons.js ├── clear.js ├── gradient.js ├── hex.js ├── hue.js ├── info.js ├── palettes.js ├── preview.js ├── saturation.js └── trigger.js ├── defaults.js ├── i18n ├── cn.js ├── de.js ├── dk.js ├── es.js ├── fi.js ├── fr.js ├── it.js ├── ja.js ├── ru.js ├── sv.js └── tr.js ├── images ├── alpha.png ├── hue.png ├── saturation.png └── transparent.png ├── info.js ├── keyboard.js ├── main.js ├── modes.js └── scss └── asColorPicker.scss /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } 4 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "remove-empty-rulesets": true, 3 | "always-semicolon": true, 4 | "color-case": "lower", 5 | "block-indent": " ", 6 | "color-shorthand": true, 7 | "element-case": "lower", 8 | "eof-newline": true, 9 | "leading-zero": false, 10 | "quotes": "double", 11 | "space-before-colon": "", 12 | "space-after-colon": " ", 13 | "space-before-combinator": " ", 14 | "space-after-combinator": " ", 15 | "space-between-declarations": "\n", 16 | "space-before-opening-brace": " ", 17 | "space-after-opening-brace": "\n", 18 | "space-after-selector-delimiter": " ", 19 | "space-before-selector-delimiter": "", 20 | "space-before-closing-brace": "\n", 21 | "strip-spaces": true, 22 | "tab-size": true, 23 | "unitless-zero": true, 24 | "vendor-prefix-align": false, 25 | "sort-order": [ 26 | "position", 27 | "top", 28 | "right", 29 | "bottom", 30 | "left", 31 | "z-index", 32 | "-moz-box-sizing", 33 | "-webkit-box-sizing", 34 | "box-sizing", 35 | "display", 36 | "flex", 37 | "flex-align", 38 | "flex-basis", 39 | "flex-direction", 40 | "flex-flow", 41 | "flex-grow", 42 | "flex-order", 43 | "flex-pack", 44 | "float", 45 | "width", 46 | "min-width", 47 | "max-width", 48 | "height", 49 | "min-height", 50 | "max-height", 51 | "padding", 52 | "padding-top", 53 | "padding-right", 54 | "padding-bottom", 55 | "padding-left", 56 | "margin", 57 | "margin-top", 58 | "margin-right", 59 | "margin-bottom", 60 | "margin-left", 61 | "overflow", 62 | "overflow-x", 63 | "overflow-y", 64 | "-webkit-overflow-scrolling", 65 | "-ms-overflow-x", 66 | "-ms-overflow-y", 67 | "-ms-overflow-style", 68 | "clip", 69 | "clear", 70 | "font", 71 | "font-family", 72 | "font-size", 73 | "font-style", 74 | "font-weight", 75 | "font-variant", 76 | "font-size-adjust", 77 | "font-stretch", 78 | "font-effect", 79 | "font-emphasize", 80 | "font-emphasize-position", 81 | "font-emphasize-style", 82 | "font-smooth", 83 | "-webkit-hyphens", 84 | "-moz-hyphens", 85 | "hyphens", 86 | "line-height", 87 | "color", 88 | "text-align", 89 | "-webkit-text-align-last", 90 | "-moz-text-align-last", 91 | "-ms-text-align-last", 92 | "text-align-last", 93 | "text-emphasis", 94 | "text-emphasis-color", 95 | "text-emphasis-style", 96 | "text-emphasis-position", 97 | "text-decoration", 98 | "text-indent", 99 | "text-justify", 100 | "text-outline", 101 | "-ms-text-overflow", 102 | "text-overflow", 103 | "text-overflow-ellipsis", 104 | "text-overflow-mode", 105 | "text-shadow", 106 | "text-transform", 107 | "text-wrap", 108 | "-webkit-text-size-adjust", 109 | "-ms-text-size-adjust", 110 | "letter-spacing", 111 | "-ms-word-break", 112 | "word-break", 113 | "word-spacing", 114 | "-ms-word-wrap", 115 | "word-wrap", 116 | "-moz-tab-size", 117 | "-o-tab-size", 118 | "tab-size", 119 | "white-space", 120 | "vertical-align", 121 | "list-style", 122 | "list-style-position", 123 | "list-style-type", 124 | "list-style-image", 125 | "pointer-events", 126 | "-ms-touch-action", 127 | "touch-action", 128 | "cursor", 129 | "visibility", 130 | "zoom", 131 | "table-layout", 132 | "empty-cells", 133 | "caption-side", 134 | "border-spacing", 135 | "border-collapse", 136 | "content", 137 | "quotes", 138 | "counter-reset", 139 | "counter-increment", 140 | "resize", 141 | "-webkit-user-select", 142 | "-moz-user-select", 143 | "-ms-user-select", 144 | "-o-user-select", 145 | "user-select", 146 | "nav-index", 147 | "nav-up", 148 | "nav-right", 149 | "nav-down", 150 | "nav-left", 151 | "background", 152 | "background-color", 153 | "background-image", 154 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 155 | "filter:progid:DXImageTransform.Microsoft.gradient", 156 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 157 | "filter", 158 | "background-repeat", 159 | "background-attachment", 160 | "background-position", 161 | "background-position-x", 162 | "background-position-y", 163 | "-moz-background-clip", 164 | "-webkit-background-clip", 165 | "background-clip", 166 | "background-origin", 167 | "-moz-background-size", 168 | "-o-background-size", 169 | "-webkit-background-size", 170 | "background-size", 171 | "border", 172 | "border-color", 173 | "border-style", 174 | "border-width", 175 | "border-top", 176 | "border-top-color", 177 | "border-top-style", 178 | "border-top-width", 179 | "border-right", 180 | "border-right-color", 181 | "border-right-style", 182 | "border-right-width", 183 | "border-bottom", 184 | "border-bottom-color", 185 | "border-bottom-style", 186 | "border-bottom-width", 187 | "border-left", 188 | "border-left-color", 189 | "border-left-style", 190 | "border-left-width", 191 | "-moz-border-radius", 192 | "-o-border-radius", 193 | "-webkit-border-radius", 194 | "border-radius", 195 | "border-top-left-radius", 196 | "border-top-right-radius", 197 | "border-bottom-right-radius", 198 | "border-bottom-left-radius", 199 | "-moz-border-image", 200 | "-o-border-image", 201 | "-webkit-border-image", 202 | "border-image", 203 | "-moz-border-image-source", 204 | "-o-border-image-source", 205 | "-webkit-border-image-source", 206 | "border-image-source", 207 | "-moz-border-image-slice", 208 | "-o-border-image-slice", 209 | "-webkit-border-image-slice", 210 | "border-image-slice", 211 | "-moz-border-image-width", 212 | "-o-border-image-width", 213 | "-webkit-border-image-width", 214 | "border-image-width", 215 | "-moz-border-image-outset", 216 | "-o-border-image-outset", 217 | "-webkit-border-image-outset", 218 | "border-image-outset", 219 | "-moz-border-image-repeat", 220 | "-o-border-image-repeat", 221 | "-webkit-border-image-repeat", 222 | "border-image-repeat", 223 | "outline", 224 | "outline-width", 225 | "outline-style", 226 | "outline-color", 227 | "outline-offset", 228 | "-webkit-box-shadow", 229 | "-moz-box-shadow", 230 | "box-shadow", 231 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 232 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 233 | "opacity", 234 | "-ms-interpolation-mode", 235 | "-moz-transition", 236 | "-ms-transition", 237 | "-o-transition", 238 | "-webkit-transition", 239 | "transition", 240 | "-moz-transition-delay", 241 | "-ms-transition-delay", 242 | "-o-transition-delay", 243 | "-webkit-transition-delay", 244 | "transition-delay", 245 | "-moz-transition-timing-function", 246 | "-ms-transition-timing-function", 247 | "-o-transition-timing-function", 248 | "-webkit-transition-timing-function", 249 | "transition-timing-function", 250 | "-moz-transition-duration", 251 | "-ms-transition-duration", 252 | "-o-transition-duration", 253 | "-webkit-transition-duration", 254 | "transition-duration", 255 | "-moz-transition-property", 256 | "-ms-transition-property", 257 | "-o-transition-property", 258 | "-webkit-transition-property", 259 | "transition-property", 260 | "-moz-transform", 261 | "-ms-transform", 262 | "-o-transform", 263 | "-webkit-transform", 264 | "transform", 265 | "-moz-transform-origin", 266 | "-ms-transform-origin", 267 | "-o-transform-origin", 268 | "-webkit-transform-origin", 269 | "transform-origin", 270 | "-webkit-animation", 271 | "-moz-animation", 272 | "-ms-animation", 273 | "-o-animation", 274 | "animation", 275 | "-moz-animation-name", 276 | "-ms-animation-name", 277 | "-o-animation-name", 278 | "-webkit-animation-name", 279 | "animation-name", 280 | "-moz-animation-duration", 281 | "-ms-animation-duration", 282 | "-o-animation-duration", 283 | "-webkit-animation-duration", 284 | "animation-duration", 285 | "-moz-animation-play-state", 286 | "-ms-animation-play-state", 287 | "-o-animation-play-state", 288 | "-webkit-animation-play-state", 289 | "animation-play-state", 290 | "-moz-animation-timing-function", 291 | "-ms-animation-timing-function", 292 | "-o-animation-timing-function", 293 | "-webkit-animation-timing-function", 294 | "animation-timing-function", 295 | "-moz-animation-delay", 296 | "-ms-animation-delay", 297 | "-o-animation-delay", 298 | "-webkit-animation-delay", 299 | "animation-delay", 300 | "-moz-animation-iteration-count", 301 | "-ms-animation-iteration-count", 302 | "-o-animation-iteration-count", 303 | "-webkit-animation-iteration-count", 304 | "animation-iteration-count", 305 | "-moz-animation-direction", 306 | "-ms-animation-direction", 307 | "-o-animation-direction", 308 | "-webkit-animation-direction" 309 | ] 310 | } 311 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # End every file with a newline 7 | [*] 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 2 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | 15 | [*.{css,less,scss}] 16 | indent_style = space 17 | indent_size = 2 18 | 19 | [*.{js,json}] 20 | indent_style = space 21 | indent_size = 2 22 | 23 | [*.{html,hbs}] 24 | indent_style = tab 25 | indent_size = 2 26 | 27 | [*.md] 28 | indent_style = space 29 | indent_size = 2 30 | insert_final_newline = false 31 | trim_trailing_whitespace = false 32 | 33 | [*.xml] 34 | indent_style = space 35 | indent_size = 2 36 | 37 | [*.yml] 38 | indent_style = space 39 | indent_size = 2 40 | 41 | [*.inc] 42 | indent_style = tab 43 | indent_size = 2 -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "babel-eslint", 4 | "env": { 5 | "browser": true, 6 | "es6": true, 7 | "jquery": true, 8 | "builtin": true, 9 | "mocha": true, 10 | "node": true 11 | }, 12 | "extends": "eslint:recommended", 13 | "parserOptions": { 14 | "ecmaVersion": 8, 15 | "sourceType": "module" 16 | }, 17 | // "plugins": [ 18 | // "prettier" 19 | // ], 20 | "rules": { 21 | // Prettier 22 | // "prettier/prettier": "error", 23 | // Possible Errors 24 | "no-inner-declarations": "off", 25 | "no-await-in-loop": "error", 26 | "no-compare-neg-zero": "error", 27 | "no-extra-parens": ["error", "all", { 28 | "returnAssign": false, 29 | "enforceForArrowConditionals": false 30 | } 31 | ], 32 | "no-prototype-builtins": "off", 33 | "no-template-curly-in-string": "error", 34 | "valid-jsdoc": "off", 35 | 36 | // Best Practices 37 | "accessor-pairs": "error", 38 | "array-callback-return": "error", 39 | "block-scoped-var": "error", 40 | "class-methods-use-this": "off", 41 | "complexity": "error", 42 | "consistent-return": "error", 43 | "curly": "error", 44 | "default-case": "error", 45 | "dot-location": ["error", "property"], 46 | "dot-notation": "error", 47 | "eqeqeq": "error", 48 | "guard-for-in": "error", 49 | "no-alert": "error", 50 | "no-caller": "error", 51 | "no-div-regex": "error", 52 | "no-else-return": "error", 53 | "no-empty-function": "error", 54 | "no-eq-null": "error", 55 | "no-eval": "error", 56 | "no-extend-native": "error", 57 | "no-extra-bind": "error", 58 | "no-extra-label": "error", 59 | "no-floating-decimal": "error", 60 | "no-implicit-coercion": "error", 61 | "no-implicit-globals": "error", 62 | "no-implied-eval": "error", 63 | "no-invalid-this": "off", 64 | "no-iterator": "error", 65 | "no-labels": "error", 66 | "no-lone-blocks": "error", 67 | "no-loop-func": "error", 68 | "no-magic-numbers": "off", 69 | "no-multi-spaces": ["error", { 70 | "exceptions": { 71 | "AssignmentExpression": true, 72 | "ArrowFunctionExpression": true, 73 | "CallExpression": true, 74 | "VariableDeclarator": true 75 | } 76 | } 77 | ], 78 | "no-multi-str": "error", 79 | "no-new": "error", 80 | "no-new-func": "error", 81 | "no-new-wrappers": "error", 82 | "no-octal-escape": "error", 83 | "no-param-reassign": "off", 84 | "no-proto": "error", 85 | "no-restricted-properties": "error", 86 | "no-return-assign": "off", 87 | "no-return-await": "error", 88 | "no-script-url": "error", 89 | "no-self-compare": "error", 90 | "no-sequences": "error", 91 | "no-throw-literal": "error", 92 | "no-unmodified-loop-condition": "error", 93 | "no-unused-expressions": "error", 94 | "no-useless-call": "error", 95 | "no-useless-concat": "error", 96 | "no-useless-escape": "error", 97 | "no-useless-return": "off", 98 | "no-void": "error", 99 | "no-warning-comments": "off", 100 | "no-with": "error", 101 | "prefer-promise-reject-errors": "error", 102 | "radix": "error", 103 | "require-await": "error", 104 | "vars-on-top": "error", 105 | "wrap-iife": "error", 106 | "yoda": "error", 107 | 108 | // Strict Mode 109 | "strict": "error", 110 | 111 | // Variables 112 | "init-declarations": "off", 113 | "no-catch-shadow": "error", 114 | "no-label-var": "error", 115 | "no-restricted-globals": "error", 116 | "no-shadow": "off", 117 | "no-shadow-restricted-names": "error", 118 | "no-undef-init": "error", 119 | "no-undefined": "off", 120 | "no-use-before-define": "off", 121 | 122 | // Node.js and CommonJS 123 | "callback-return": "off", 124 | "global-require": "error", 125 | "handle-callback-err": "error", 126 | "no-mixed-requires": "error", 127 | "no-new-require": "error", 128 | "no-path-concat": "error", 129 | "no-process-env": "error", 130 | "no-process-exit": "error", 131 | "no-restricted-modules": "error", 132 | "no-sync": "error", 133 | 134 | // Stylistic Issues 135 | "array-bracket-spacing": "error", 136 | "block-spacing": "error", 137 | "brace-style": "error", 138 | "camelcase": "error", 139 | "capitalized-comments": "off", 140 | "comma-dangle": "error", 141 | "comma-spacing": "error", 142 | "comma-style": "error", 143 | "computed-property-spacing": "error", 144 | "consistent-this": "error", 145 | "eol-last": "error", 146 | "func-call-spacing": "error", 147 | "func-name-matching": "error", 148 | "func-names": "off", 149 | "func-style": ["error", "declaration", { 150 | "allowArrowFunctions": true 151 | }], 152 | "id-blacklist": "error", 153 | "id-length": "off", 154 | "id-match": "error", 155 | "indent": "off", 156 | "indent-legacy": ["error", 2, { "SwitchCase": 1 }], 157 | "jsx-quotes": "error", 158 | "key-spacing": "off", 159 | "keyword-spacing": "error", 160 | "line-comment-position": "off", 161 | "linebreak-style": ["error", "unix"], 162 | "lines-around-comment": "off", 163 | "lines-around-directive": "error", 164 | "max-depth": ["error", 10], 165 | "max-len": "off", 166 | "max-lines": "off", 167 | "max-nested-callbacks": "error", 168 | "max-params": "off", 169 | "max-statements": "off", 170 | "max-statements-per-line": "error", 171 | "multiline-ternary": "off", 172 | "new-cap": ["error", { "capIsNewExceptionPattern": "$.*" }], 173 | "new-parens": "error", 174 | "newline-after-var": "off", 175 | "newline-before-return": "off", 176 | "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 5 }], 177 | "no-array-constructor": "error", 178 | "no-bitwise": "error", 179 | "no-continue": "off", 180 | "no-inline-comments": "off", 181 | "no-lonely-if": "error", 182 | "no-mixed-operators": "off", 183 | "no-multi-assign": "error", 184 | "no-multiple-empty-lines": "error", 185 | "no-negated-condition": "off", 186 | "no-nested-ternary": "error", 187 | "no-new-object": "error", 188 | "no-plusplus": "off", 189 | "no-restricted-syntax": "error", 190 | "no-tabs": "error", 191 | "no-ternary": "off", 192 | "no-trailing-spaces": "error", 193 | "no-underscore-dangle": "off", 194 | "no-unneeded-ternary": "error", 195 | "no-whitespace-before-property": "error", 196 | "nonblock-statement-body-position": "error", 197 | "object-curly-newline": ["error", { "minProperties": 1 }], 198 | "object-curly-spacing": ["error", "always"], 199 | "object-property-newline": "error", 200 | "one-var": ["error", "never"], 201 | "one-var-declaration-per-line": "error", 202 | "operator-assignment": "error", 203 | "operator-linebreak": "off", 204 | "padded-blocks": "off", 205 | "quote-props": ["error", "as-needed"], 206 | "quotes": ["error", "single", { "allowTemplateLiterals": true }], 207 | "require-jsdoc": "off", 208 | "semi": ["error", "always"], 209 | "semi-spacing": ["error", {"before": false, "after": true}], 210 | "sort-keys": "off", 211 | "sort-vars": "error", 212 | "space-before-blocks": "error", 213 | "space-before-function-paren": ["error", { 214 | "anonymous": "always", 215 | "named": "never" 216 | }], 217 | "space-in-parens": "error", 218 | "space-infix-ops": "error", 219 | "space-unary-ops": "error", 220 | "spaced-comment": "error", 221 | "template-tag-spacing": "error", 222 | "unicode-bom": "error", 223 | "wrap-regex": "off", 224 | 225 | // ECMAScript 6 226 | "arrow-body-style": "off", 227 | "arrow-parens": "error", 228 | "arrow-spacing": "error", 229 | "generator-star-spacing": "error", 230 | "no-confusing-arrow": ["error", { "allowParens": true }], 231 | "no-duplicate-imports": "error", 232 | "no-restricted-imports": "error", 233 | "no-useless-computed-key": "error", 234 | "no-useless-constructor": "error", 235 | "no-useless-rename": "error", 236 | "no-var": "error", 237 | "object-shorthand": "error", 238 | "prefer-arrow-callback": "error", 239 | "prefer-const": "error", 240 | "prefer-destructuring": "off", 241 | "prefer-numeric-literals": "error", 242 | "prefer-rest-params": "error", 243 | "prefer-spread": "error", 244 | "prefer-template": "error", 245 | "rest-spread-spacing": "error", 246 | "sort-imports": "off", 247 | "symbol-description": "error", 248 | "template-curly-spacing": "error", 249 | "yield-star-spacing": "error" 250 | } 251 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ################################## 2 | # project-specific.gitattributes # 3 | ################################## 4 | 5 | 6 | ########################### 7 | # documents.gitattributes # 8 | ########################### 9 | *.doc diff=astextplain 10 | *.docx diff=astextplain 11 | *.dot diff=astextplain 12 | *.pdf diff=astextplain 13 | *.rtf diff=astextplain 14 | *.css text eol=lf 15 | *.scss text eol=lf 16 | *.less text eol=lf 17 | *.html text eol=lf 18 | *.js text eol=lf 19 | *.json text eol=lf 20 | *.md text eol=lf 21 | *.txt text eol=lf 22 | *.hbs text eol=lf 23 | *.mustache text eol=lf 24 | *.xml text eol=lf 25 | *.csv text eol=lf 26 | *.tab text eol=lf 27 | *.tsv text eol=lf 28 | *.sql text eol=lf 29 | 30 | ############################ 31 | ### graphics.gitattributes # 32 | ############################ 33 | *.png binary 34 | *.jpg binary 35 | *.jpeg binary 36 | *.gif binary 37 | *.tif binary 38 | *.tiff binary 39 | *.ico binary 40 | *.svg binary 41 | *.eps binary 42 | *.psd binary 43 | *.ai binary 44 | 45 | ########################### 46 | # git-crypt.gitattributes # 47 | ########################### 48 | vault_* binary filter=git-crypt diff=git-crypt 49 | vault.* binary filter=git-crypt diff=git-crypt 50 | 51 | ####################### 52 | # shell.gitattributes # 53 | ####################### 54 | # Linux 55 | *.sh text eol=lf 56 | 57 | # Windows 58 | *.bat text eol=crlf 59 | *.cmd text eol=crlf 60 | *.ps1 text eol=crlf -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | _[Remove this line and all of the above before submitting your issue]_ 7 | 8 | ### Checklist 9 | * [ ] I'm using **version** [x.x.x] 10 | * [ ] My **browser** is: 11 | * [ ] This is a **Sass** issue: I'm using version [x.x.x] 12 | * [ ] I am sure this issue is **not a duplicate**? 13 | 14 | ### Description 15 | 16 | [Description of the bug, enhancement, or question] 17 | [Please tag accordingly] 18 | 19 | ### How can we reproduce this bug? 20 | 21 | 1. [First Step] 22 | 2. [Second Step] 23 | 3. [and so on...] 24 | 25 | ### What did you expect to happen? 26 | 27 | ### What happened instead? 28 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 13 | 14 | _[Remove this line and all of the above before submitting your PR]_ 15 | 16 | ### Pull Request 17 | 18 | Fixes # 19 | 20 | Changes proposed: 21 | 22 | * [ ] Add 23 | * [ ] Fix 24 | * [ ] Remove 25 | * [ ] Update 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #################### 2 | # project-specific # 3 | #################### 4 | 5 | 6 | #################### 7 | # Generated source # 8 | #################### 9 | _build/ 10 | archives/ 11 | results 12 | screenshots 13 | 14 | ########################## 15 | # Dependency directories # 16 | ########################## 17 | bower_components 18 | node_modules 19 | 20 | ####### 21 | # OSX # 22 | ####### 23 | .DS_Store 24 | .AppleDouble 25 | .LSOverride 26 | 27 | # Icon must end with two \r 28 | Icon 29 | 30 | # Thumbnails 31 | ._* 32 | 33 | # Files that might appear in the root of a volume 34 | .DocumentRevisions-V100 35 | .fseventsd 36 | .Spotlight-V100 37 | .TemporaryItems 38 | .Trashes 39 | .VolumeIcon.icns 40 | 41 | # Directories potentially created on remote AFP share 42 | .AppleDB 43 | .AppleDesktop 44 | Network Trash Folder 45 | Temporary Items 46 | .apdisk 47 | 48 | ########### 49 | # Windows # 50 | ########### 51 | # Windows image file caches 52 | Thumbs.db 53 | ehthumbs.db 54 | 55 | # Folder config file 56 | Desktop.ini 57 | 58 | # Recycle Bin used on file shares 59 | $RECYCLE.BIN/ 60 | 61 | # Windows Installer files 62 | *.cab 63 | *.msi 64 | *.msm 65 | *.msp 66 | 67 | # Windows shortcuts 68 | *.lnk 69 | 70 | ######## 71 | # Node # 72 | ######## 73 | # Logs 74 | logs 75 | *.log 76 | npm-debug.log* 77 | 78 | # Runtime data 79 | pids 80 | *.pid 81 | *.seed 82 | 83 | # Directory for instrumented libs generated by jscoverage/JSCover 84 | lib-cov 85 | 86 | # Coverage directory used by tools like istanbul 87 | coverage 88 | 89 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 90 | .grunt 91 | 92 | # Sass 93 | .sass-cache/ 94 | *.css.map 95 | 96 | # node-waf configuration 97 | .lock-wscript 98 | 99 | # Compiled binary addons (http://nodejs.org/api/addons.html) 100 | build/Release 101 | 102 | # Dependency directory 103 | node_modules 104 | 105 | # JSPM 106 | jspm_packages 107 | 108 | # Optional npm cache directory 109 | .npm 110 | 111 | ############### 112 | # SublimeText # 113 | ############### 114 | # cache files for sublime text 115 | *.tmlanguage.cache 116 | *.tmPreferences.cache 117 | *.stTheme.cache 118 | 119 | # workspace files are user-specific 120 | *.sublime-workspace 121 | 122 | # project files should be checked into the repository, unless a significant 123 | # proportion of contributors will probably not be using SublimeText 124 | # *.sublime-project 125 | 126 | # sftp configuration file 127 | sftp-config.json 128 | 129 | ####### 130 | # Vim # 131 | ####### 132 | # swap 133 | [._]*.s[a-w][a-z] 134 | [._]s[a-w][a-z] 135 | # persistent undo 136 | *.un~ 137 | # session 138 | Session.vim 139 | # temporary 140 | .netrwhist 141 | *~ 142 | 143 | ############# 144 | # NotepadPP # 145 | ############## 146 | *.bak 147 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .travis.xml 2 | yarn.lock 3 | package-lock.json 4 | .editorconfig 5 | .babelrc 6 | .beautifyrc 7 | .sass-cache 8 | .bowerrc 9 | .eslintrc.yml 10 | .github 11 | .gitattributes 12 | .release.json 13 | _build 14 | bower.json 15 | composer.json 16 | gulpfile.js 17 | gulpfile.babel.js 18 | README.md 19 | CONTRIBUTING.md 20 | coverage 21 | docs 22 | test 23 | gulp 24 | test 25 | demo 26 | libs 27 | archives 28 | config.js 29 | karma.conf.js 30 | bower_components 31 | -------------------------------------------------------------------------------- /.release.json: -------------------------------------------------------------------------------- 1 | { 2 | "verbose": false, 3 | "force": false, 4 | "pkgFiles": ["package.json", "bower.json"], 5 | "increment": "patch", 6 | "commitMessage": "Release v%s", 7 | "tagName": "v%s", 8 | "tagAnnotation": "Release v%s", 9 | "buildCommand": "gulp build", 10 | "npm": { 11 | "publish": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-bootstrap" 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5.10" 4 | - "6.2" 5 | - "stable" 6 | sudo: false 7 | 8 | script: 9 | - npm run test 10 | 11 | cache: 12 | directories: 13 | - node_modules 14 | 15 | addons: 16 | sauce_connect: true 17 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to this project 2 | 3 | Please take a moment to review this document in order to make the contribution 4 | process easy and effective for everyone involved. 5 | 6 | Following these guidelines helps to communicate that you respect the time of 7 | the developers managing and developing this open source project. In return, 8 | they should reciprocate that respect in addressing your issue or assessing 9 | patches and features. 10 | 11 | 12 | ## Using the issue tracker 13 | 14 | The issue tracker is the preferred channel for [bug reports](#bug-reports), 15 | [features requests](#feature-requests) and submitting pull requests, but please 16 | respect the following restrictions: 17 | 18 | * Please **do not** use the issue tracker for personal support requests (use 19 | [Stack Overflow](http://stackoverflow.com) or IRC). 20 | 21 | * Please **do not** derail or troll issues. Keep the discussion on topic and 22 | respect the opinions of others. 23 | 24 | 25 | ## Bug reports 26 | 27 | A bug is a _demonstrable problem_ that is caused by the code in the repository. 28 | Good bug reports are extremely helpful - thank you! 29 | 30 | Guidelines for bug reports: 31 | 32 | 1. **Use the GitHub issue search.** Check if the issue has already been 33 | reported. 34 | 35 | 2. **Check if the issue has been fixed.** Try to reproduce it using the 36 | latest `master` or development branch in the repository. 37 | 38 | 3. **Provide environment details.** Provide your operating system, browser(s), 39 | devices, and jquery-asColorPicker version. 40 | 41 | 4. **Create an isolated and reproducible test case.** Create a [reduced test 42 | case](http://css-tricks.com/6263-reduced-test-cases/). 43 | 44 | 5. **Include a live example.** Make use of jsFiddle or jsBin to share your 45 | isolated test cases. 46 | 47 | A good bug report shouldn't leave others needing to chase you up for more 48 | information. Please try to be as detailed as possible in your report. What is 49 | your environment? What steps will reproduce the issue? What browser(s) and OS 50 | experience the problem? What would you expect to be the outcome? All these 51 | details will help people to fix any potential bugs. 52 | 53 | Example: 54 | 55 | > Short and descriptive example bug report title 56 | > 57 | > A summary of the issue and the browser/OS environment in which it occurs. If 58 | > suitable, include the steps required to reproduce the bug. 59 | > 60 | > 1. This is the first step 61 | > 2. This is the second step 62 | > 3. Further steps, etc. 63 | > 64 | > `` - a link to the reduced test case 65 | > 66 | > Any other information you want to share that is relevant to the issue being 67 | > reported. This might include the lines of code that you have identified as 68 | > causing the bug, and potential solutions (and your opinions on their 69 | > merits). 70 | 71 | 72 | ## Feature requests 73 | 74 | Feature requests are welcome. But take a moment to find out whether your idea 75 | fits with the scope and aims of the project. It's up to *you* to make a strong 76 | case to convince the project's developers of the merits of this feature. Please 77 | provide as much detail and context as possible. 78 | 79 | 80 | ## Pull Requests 81 | 82 | **Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 83 | 84 | Good pull requests - patches, improvements, new features - are a fantastic 85 | help. They should remain focused in scope and avoid containing unrelated 86 | commits. 87 | 88 | **Please ask first** before embarking on any significant pull request (e.g. 89 | implementing features, refactoring code, porting to a different language), 90 | otherwise you risk spending a lot of time working on something that the 91 | project's developers might not want to merge into the project. 92 | 93 | Please adhere to the coding conventions used throughout a project (indentation, 94 | accurate comments, etc.) and any other requirements (such as test coverage). 95 | 96 | Follow this process if you'd like your work considered for inclusion in the 97 | project: 98 | 99 | 1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, 100 | and configure the remotes: 101 | 102 | ```bash 103 | # Clone your fork of the repo into the current directory 104 | git clone https://github.com// 105 | # Navigate to the newly cloned directory 106 | cd 107 | # Assign the original repo to a remote called "upstream" 108 | git remote add upstream https://github.com// 109 | ``` 110 | 111 | 2. If you cloned a while ago, get the latest changes from upstream: 112 | 113 | ```bash 114 | git checkout 115 | git pull upstream 116 | ``` 117 | 118 | 3. Create a new topic branch (off the main project development branch) to 119 | contain your feature, change, or fix: 120 | 121 | ```bash 122 | git checkout -b 123 | ``` 124 | 125 | 4. Commit your changes in logical chunks. Please adhere to these [git commit 126 | message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) 127 | or your code is unlikely be merged into the main project. Use Git's 128 | [interactive rebase](https://help.github.com/articles/interactive-rebase) 129 | feature to tidy up your commits before making them public. 130 | 131 | 5. Locally merge (or rebase) the upstream development branch into your topic branch: 132 | 133 | ```bash 134 | git pull [--rebase] upstream 135 | ``` 136 | 137 | 6. Push your topic branch up to your fork: 138 | 139 | ```bash 140 | git push origin 141 | ``` 142 | 143 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) 144 | with a clear title and description. 145 | 146 | **IMPORTANT**: By submitting a patch, you agree to allow the project owner to 147 | license your work under the same license as that used by the project. 148 | 149 | 150 | ## Code Consitency 151 | 152 | To help create consistent looking code throughout the project, we use a few tools to help us. 153 | 154 | #### ESlint 155 | We use [ESlint](http://eslint.org) on each build to find easy-to-catch errors and potential problems in our js. You can find our ESlint settings in the `.eslintrc.yml` file in the root of the project. 156 | 157 | #### EditorConfig 158 | 159 | We use [EditorConfig](http://EditorConfig.org) to maintain consistent coding styles between various editors and IDEs. You can find our settings in the `.editorconfig` file in the root of the project. 160 | 161 | 162 | ## Development 163 | 164 | We are using node, gulp and babel to build and (in the future) test this project. This means that you must setup a local development environment: 165 | 166 | 1. Install `node` and `npm` using your preferred method 167 | 2. Install the gulp CLI: `npm install -g gulp-cli` 168 | 3. Install the Babel CLI: `npm install -g babel-cli` 169 | 4. Install the project's development dependencies: `npm install` 170 | 171 | #### Available Tasks 172 | - `gulp` or `gulp watch` Start watch for changes and server with Browsersync. 173 | - `gulp build` Run all development tasks 174 | - `gulp serve` Start server with Browsersync. 175 | - `gulp clean` Clean output directories. 176 | - `gulp bundler` Bundle javasript modules. 177 | - `gulp scripts` Concatenate and minify JavaScript to `dist`. 178 | - `gulp lint:script` Lint ES6 files using eslint. 179 | - `gulp clean` Clean out distribution javascript files. 180 | - `gulp tdd` Test for Test Driven Development purposes. 181 | - `gulp test` Test for Continuous Integration purposes. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [jQuery asColorPicker](https://github.com/amazingSurge/jquery-asColorPicker) ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing) 2 | 3 | > A jquery plugin that convent input into color picker. 4 | 5 | ## Table of contents 6 | - [Main files](#main-files) 7 | - [Quick start](#quick-start) 8 | - [Requirements](#requirements) 9 | - [Usage](#usage) 10 | - [Examples](#examples) 11 | - [Options](#options) 12 | - [Methods](#methods) 13 | - [Events](#events) 14 | - [No conflict](#no-conflict) 15 | - [Browser support](#browser-support) 16 | - [Contributing](#contributing) 17 | - [Development](#development) 18 | - [Changelog](#changelog) 19 | - [Copyright and license](#copyright-and-license) 20 | 21 | ## Main files 22 | ``` 23 | dist/ 24 | ├── jquery-asColorPicker.js 25 | ├── jquery-asColorPicker.es.js 26 | ├── jquery-asColorPicker.min.js 27 | └── css/ 28 |    ├── asColorPicker.css 29 |    └── asColorPicker.min.css 30 | ``` 31 | 32 | ## Quick start 33 | Several quick start options are available: 34 | #### Download the latest build 35 | 36 | * [Development](https://raw.githubusercontent.com/amazingSurge/jquery-asColorPicker/master/dist/jquery-asColorPicker.js) - unminified 37 | * [Production](https://raw.githubusercontent.com/amazingSurge/jquery-asColorPicker/master/dist/jquery-asColorPicker.min.js) - minified 38 | 39 | #### Install From Bower 40 | ```sh 41 | bower install jquery-asColorPicker --save 42 | ``` 43 | 44 | #### Install From Npm 45 | ```sh 46 | npm install jquery-asColorPicker --save 47 | ``` 48 | 49 | #### Install From Yarn 50 | ```sh 51 | yarn add jquery-asColorPicker 52 | ``` 53 | 54 | #### Build From Source 55 | If you want build from source: 56 | 57 | ```sh 58 | git clone git@github.com:amazingSurge/jquery-asColorPicker.git 59 | cd jquery-asColorPicker 60 | npm install 61 | npm install -g gulp-cli babel-cli 62 | gulp build 63 | ``` 64 | 65 | Done! 66 | 67 | ## Requirements 68 | `jquery-asColorPicker` requires the latest version of [`jQuery`](https://jquery.com/download/), [`jquery-asColor`](https://github.com/amazingSurge/jquery-asColor), and [`jquery-asGradient`](https://github.com/amazingSurge/jquery-asGradient). 69 | 70 | ## Usage 71 | #### Including files: 72 | 73 | ```html 74 | 75 | 76 | 77 | 78 | 79 | ``` 80 | 81 | #### Required HTML structure 82 | 83 | ```html 84 | 85 | ``` 86 | 87 | #### Initialization 88 | All you need to do is call the plugin on the element: 89 | 90 | ```javascript 91 | jQuery(function($) { 92 | $('.example').asColorPicker(); 93 | }); 94 | ``` 95 | 96 | ## Examples 97 | There are some example usages that you can look at to get started. They can be found in the 98 | [examples folder](https://github.com/amazingSurge/jquery-asColorPicker/tree/master/examples). 99 | 100 | ## Options 101 | `jquery-asColorPicker` can accept an options object to alter the way it behaves. You can see the default options by call `$.asColorPicker.setDefaults()`. The structure of an options object is as follows: 102 | 103 | ``` 104 | { 105 | namespace: 'asColorPicker', 106 | readonly: false, 107 | skin: null, 108 | lang: 'en', 109 | hideInput: false, 110 | hideFireChange: true, 111 | keyboard: false, 112 | color: { 113 | format: false, 114 | alphaConvert: { // or false will disable convert 115 | 'RGB': 'RGBA', 116 | 'HSL': 'HSLA', 117 | 'HEX': 'RGBA', 118 | 'NAMESPACE': 'RGBA', 119 | }, 120 | shortenHex: false, 121 | hexUseName: false, 122 | reduceAlpha: true, 123 | nameDegradation: 'HEX', 124 | invalidValue: '', 125 | zeroAlphaAsTransparent: true 126 | }, 127 | mode: 'simple', 128 | onInit: null, 129 | onReady: null, 130 | onChange: null, 131 | onClose: null, 132 | onOpen: null, 133 | onApply: null 134 | } 135 | ``` 136 | 137 | ## Methods 138 | Methods are called on asColorPicker instances through the asColorPicker method itself. 139 | You can also save the instances to variable for further use. 140 | 141 | ```javascript 142 | // call directly 143 | $().asColorPicker('destroy'); 144 | 145 | // or 146 | var api = $().data('asColorPicker'); 147 | api.destroy(); 148 | ``` 149 | 150 | #### opacity() 151 | Get or set opacity. 152 | ```javascript 153 | // get opacity 154 | $().asColorPicker('opacity'); 155 | 156 | // set opacity 157 | $().asColorPicker('opacity', 0.1); 158 | ``` 159 | 160 | #### open() 161 | Show the colorpicker dropdown. 162 | ```javascript 163 | $().asColorPicker('open'); 164 | ``` 165 | 166 | #### close() 167 | Close the colorpicker dropdown. 168 | ```javascript 169 | $().asColorPicker('close'); 170 | ``` 171 | 172 | #### clear() 173 | Clear the colorpicker. 174 | ```javascript 175 | $().asColorPicker('clear'); 176 | ``` 177 | 178 | #### val(value) 179 | Get or set the colorpicker val. 180 | ```javascript 181 | // get the color 182 | $().asColorPicker('val'); 183 | 184 | // set the color 185 | $().asColorPicker('val', 'rgb(100, 100, 100)'); 186 | ``` 187 | 188 | #### set(value) 189 | Set the color. 190 | ```javascript 191 | $().asColorPicker('set', 'rgb(100, 100, 100)'); 192 | ``` 193 | 194 | #### get() 195 | Get the color. 196 | ```javascript 197 | $().asColorPicker('get'); 198 | ``` 199 | 200 | #### enable() 201 | Enable the colorpicker functions. 202 | ```javascript 203 | $().asColorPicker('enable'); 204 | ``` 205 | 206 | #### enable() 207 | Enable the colorpicker functions. 208 | ```javascript 209 | $().asColorPicker('enable'); 210 | ``` 211 | 212 | #### disable() 213 | Disable the colorpicker functions. 214 | ```javascript 215 | $().asColorPicker('disable'); 216 | ``` 217 | 218 | #### destroy() 219 | Destroy the colorpicker instance. 220 | ```javascript 221 | $().asColorPicker('destroy'); 222 | ``` 223 | 224 | ## Events 225 | `jquery-asColorPicker` provides custom events for the plugin’s unique actions. 226 | 227 | ```javascript 228 | $('.the-element').on('asColorPicker::change', function (e) { 229 | // on value change 230 | }); 231 | 232 | ``` 233 | 234 | Event | Description 235 | ------- | ----------- 236 | init | Fires when the instance is setup for the first time. 237 | ready | Fires when the instance is ready for API use. 238 | change | Fires when the value changed. 239 | enable | Fires when the `enable` instance method has been called. 240 | disable | Fires when the `disable` instance method has been called. 241 | destroy | Fires when an instance is destroyed. 242 | 243 | ## No conflict 244 | If you have to use other plugin with the same namespace, just call the `$.asColorPicker.noConflict` method to revert to it. 245 | 246 | ```html 247 | 248 | 249 | 253 | ``` 254 | 255 | ## Browser support 256 | 257 | Tested on all major browsers. 258 | 259 | | Safari | Chrome | Firefox | Edge | IE | Opera | 260 | |:--:|:--:|:--:|:--:|:--:|:--:| 261 | | Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ | 262 | 263 | As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/). 264 | 265 | ## Contributing 266 | Anyone and everyone is welcome to contribute. Please take a moment to 267 | review the [guidelines for contributing](CONTRIBUTING.md). Make sure you're using the latest version of `jquery-asColorPicker` before submitting an issue. There are several ways to help out: 268 | 269 | * [Bug reports](CONTRIBUTING.md#bug-reports) 270 | * [Feature requests](CONTRIBUTING.md#feature-requests) 271 | * [Pull requests](CONTRIBUTING.md#pull-requests) 272 | * Write test cases for open bug issues 273 | * Contribute to the documentation 274 | 275 | ## Development 276 | `jquery-asColorPicker` is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run: 277 | 278 | ```sh 279 | npm install -g gulp 280 | npm install -g babel-cli 281 | npm install 282 | ``` 283 | 284 | Then you can generate new distributable files from the sources, using: 285 | ``` 286 | gulp build 287 | ``` 288 | 289 | More gulp tasks can be found [here](CONTRIBUTING.md#available-tasks). 290 | 291 | ## Changelog 292 | To see the list of recent changes, see [Releases section](https://github.com/amazingSurge/jquery-asColorPicker/releases). 293 | 294 | ## Copyright and license 295 | Copyright (C) 2016 amazingSurge. 296 | 297 | Licensed under [the LGPL license](LICENSE). 298 | 299 | [⬆ back to top](#table-of-contents) 300 | 301 | [bower-image]: https://img.shields.io/bower/v/jquery-asColorPicker.svg?style=flat 302 | [bower-link]: https://david-dm.org/amazingSurge/jquery-asColorPicker/dev-status.svg 303 | [npm-image]: https://badge.fury.io/js/jquery-asColorPicker.svg?style=flat 304 | [npm-url]: https://npmjs.org/package/jquery-asColorPicker 305 | [license]: https://img.shields.io/npm/l/jquery-asColorPicker.svg?style=flat 306 | [prs-welcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg 307 | [daviddm-image]: https://david-dm.org/amazingSurge/jquery-asColorPicker.svg?style=flat 308 | [daviddm-url]: https://david-dm.org/amazingSurge/jquery-asColorPicker -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-asColorPicker", 3 | "version": "0.4.4", 4 | "description": "A jquery plugin that convent input into color picker.", 5 | "main": "dist/jquery-asColorPicker.js", 6 | "copyright": "amazingSurge", 7 | "license": "LGPL-3.0", 8 | "ignore": [ 9 | "**/.*", 10 | "node_modules", 11 | "bower_components", 12 | "test", 13 | "demo", 14 | "gulp", 15 | "CONTRIBUTING.md", 16 | "manifest.json", 17 | "karma.conf.js", 18 | "config.js", 19 | "package.json", 20 | "gulpfile.babel.js", 21 | "tests" 22 | ], 23 | "homepage": "https://github.com/amazingSurge/jquery-asColorPicker", 24 | "authors": [ 25 | "amazingSurge " 26 | ], 27 | "moduleType": [ 28 | "globals" 29 | ], 30 | "dependencies": { 31 | "jquery": ">=1.11.0", 32 | "jquery-asColor": "^0.3.3", 33 | "jquery-asGradient": "^0.3.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import fs from 'graceful-fs'; 4 | import {argv} from 'yargs'; 5 | 6 | const production = argv.production || argv.prod || false; 7 | 8 | export default { 9 | getConfig: function(pkg, src, dest) { 10 | return { 11 | version: pkg.version, 12 | name: pkg.name, 13 | title: pkg.title, 14 | description: pkg.description, 15 | author: pkg.author, 16 | banner: `/** 17 | * ${pkg.title} v${pkg.version} 18 | * ${pkg.homepage} 19 | * 20 | * Copyright (c) ${pkg.author.name} 21 | * Released under the ${pkg.license} license 22 | */ 23 | `, 24 | // basic locations 25 | paths: { 26 | root: './', 27 | srcDir: `${src}/`, 28 | destDir: `${dest}/`, 29 | }, 30 | 31 | styles: { 32 | files: '**/*.scss', 33 | src: `${src}/scss`, 34 | dest: `${dest}/css`, 35 | prodSourcemap: false, 36 | sassIncludePaths: [], 37 | autoprefixer: { 38 | browsers: ['last 2 versions', 'ie >= 9', 'Android >= 2.3'] 39 | } 40 | }, 41 | 42 | scripts: { 43 | input: 'main.js', 44 | version: 'info.js', 45 | files: '**/*.js', 46 | src: `${src}`, 47 | dest: `${dest}`, 48 | prodSourcemap: false, 49 | test: './test', 50 | gulp: './gulp' 51 | }, 52 | 53 | images: { 54 | files: '**/*.{png,jpg,gif,svg}', 55 | src: `${src}/images`, 56 | dest: `${dest}/images` 57 | }, 58 | 59 | archive: { 60 | src: `${dest}/**/*`, 61 | dest: './archives/', 62 | zip: {} 63 | }, 64 | 65 | browser: { 66 | baseDir: './', 67 | startPath: "examples/index.html", 68 | browserPort: 3000, 69 | UIPort: 3001, 70 | testPort: 3002, 71 | }, 72 | 73 | deploy: { 74 | versionFiles: ['package.json', 'bower.json'], 75 | increment: "patch", // major, minor, patch, premajor, preminor, prepatch, or prerelease. 76 | }, 77 | 78 | notify: { 79 | title: pkg.title 80 | }, 81 | 82 | env: 'development', 83 | production: production, 84 | setEnv: function(env) { 85 | if (typeof env !== 'string') return; 86 | this.env = env; 87 | this.production = env === 'production'; 88 | process.env.NODE_ENV = env; 89 | }, 90 | 91 | test: {}, 92 | }; 93 | }, 94 | 95 | init: function() { 96 | const pkg = JSON.parse(fs.readFileSync('./package.json', { encoding: 'utf-8' })); 97 | 98 | let src = 'src'; 99 | let dest = 'dist'; 100 | 101 | Object.assign(this, this.getConfig(pkg, src, dest, production)); 102 | this.setEnv(production? 'production': 'development'); 103 | 104 | return this; 105 | } 106 | 107 | }.init(); 108 | -------------------------------------------------------------------------------- /dist/css/asColorPicker.css: -------------------------------------------------------------------------------- 1 | /** 2 | * asColorPicker v0.4.4 3 | * https://github.com/amazingSurge/jquery-asColorPicker 4 | * 5 | * Copyright (c) amazingSurge 6 | * Released under the LGPL-3.0 license 7 | */ 8 | .asColorPicker-wrap { 9 | position: relative; 10 | display: inline-block; 11 | } 12 | 13 | .asColorPicker_hideInput { 14 | display: none; 15 | } 16 | 17 | .asColorPicker_hideInput .asColorPicker-clear { 18 | display: none; 19 | } 20 | 21 | .asColorPicker-dropdown { 22 | position: absolute; 23 | z-index: 9999; 24 | display: none; 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | -ms-user-select: none; 28 | user-select: none; 29 | } 30 | .asColorPicker-dropdown * { 31 | padding: 0; 32 | margin: 0; 33 | } 34 | 35 | .asColorPicker_open { 36 | display: block; 37 | } 38 | 39 | .asColorPicker-mask { 40 | position: fixed; 41 | top: 0; 42 | left: 0; 43 | z-index: 9998; 44 | width: 100%; 45 | height: 100%; 46 | } 47 | 48 | .asColorPicker-trigger { 49 | position: relative; 50 | display: inline-block; 51 | } 52 | 53 | .asColorPicker-trigger { 54 | width: 18px; 55 | height: 20px; 56 | cursor: pointer; 57 | background-image: url("../images/transparent.png"); 58 | } 59 | .asColorPicker-trigger span { 60 | display: inline-block; 61 | width: 100%; 62 | height: 100%; 63 | } 64 | 65 | .asColorPicker-input, .asColorPicker-trigger { 66 | vertical-align: middle; 67 | } 68 | 69 | .asColorPicker-clear { 70 | position: absolute; 71 | top: 0; 72 | right: 26px; 73 | display: none; 74 | color: #777; 75 | text-decoration: none; 76 | } 77 | .asColorPicker-clear:after { 78 | content: "x"; 79 | } 80 | 81 | .asColorPicker-wrap:hover .asColorPicker-clear { 82 | display: inline-block; 83 | } 84 | 85 | .asColorPicker-preview { 86 | float: left; 87 | list-style: none; 88 | } 89 | .asColorPicker-preview li { 90 | display: inline-block; 91 | vertical-align: top; 92 | background-image: url("../images/transparent.png"); 93 | 94 | *display: inline; 95 | *zoom: 1; 96 | } 97 | .asColorPicker-preview li span { 98 | display: block; 99 | height: 100%; 100 | } 101 | .asColorPicker-preview-previous { 102 | cursor: pointer; 103 | } 104 | 105 | .asColorPicker-palettes ul { 106 | display: block; 107 | } 108 | .asColorPicker-palettes ul:before, .asColorPicker-palettes ul:after { 109 | display: table; 110 | content: ""; 111 | } 112 | .asColorPicker-palettes ul:after { 113 | clear: both; 114 | } 115 | 116 | .asColorPicker-palettes li { 117 | display: block; 118 | float: left; 119 | overflow: hidden; 120 | text-indent: 100%; 121 | white-space: nowrap; 122 | cursor: pointer; 123 | background-image: url("../images/transparent.png"); 124 | } 125 | .asColorPicker-palettes li span { 126 | display: block; 127 | height: 100%; 128 | } 129 | 130 | .asColorPicker-saturation { 131 | position: relative; 132 | display: inline-block; 133 | width: 175px; 134 | height: 175px; 135 | clear: both; 136 | background-image: url("../images/saturation.png"); 137 | 138 | *display: inline; 139 | *zoom: 1; 140 | } 141 | .asColorPicker-saturation i { 142 | position: absolute; 143 | } 144 | 145 | .asColorPicker-hue, .asColorPicker-alpha { 146 | position: relative; 147 | display: inline-block; 148 | width: 20px; 149 | height: 175px; 150 | cursor: pointer; 151 | 152 | *display: inline; 153 | *zoom: 1; 154 | } 155 | .asColorPicker-hue i, .asColorPicker-alpha i { 156 | position: absolute; 157 | cursor: row-resize; 158 | } 159 | 160 | .asColorPicker-hue { 161 | background-image: url("../images/hue.png"); 162 | } 163 | 164 | .asColorPicker-alpha { 165 | background-image: url("../images/alpha.png"); 166 | } 167 | 168 | .asColorPicker-buttons a, .asColorPicker-gradient-control a { 169 | text-decoration: none; 170 | cursor: pointer; 171 | } 172 | 173 | .asColorPicker-gradient { 174 | display: none; 175 | } 176 | .asColorPicker-gradient_enable { 177 | display: block; 178 | } 179 | .asColorPicker-gradient-preview { 180 | float: left; 181 | height: 20px; 182 | } 183 | .asColorPicker-gradient-markers { 184 | position: relative; 185 | width: 100%; 186 | } 187 | .asColorPicker-gradient-marker { 188 | position: absolute; 189 | outline: none; 190 | } 191 | .asColorPicker-gradient-wheel { 192 | position: relative; 193 | float: left; 194 | width: 20px; 195 | height: 20px; 196 | border: 1px solid #bbb; 197 | border-radius: 100%; 198 | } 199 | .asColorPicker-gradient-wheel i { 200 | position: absolute; 201 | width: 3px; 202 | height: 3px; 203 | border-radius: 100%; 204 | } 205 | .asColorPicker-gradient-angle { 206 | float: left; 207 | } 208 | 209 | .asColorPicker-dropdown { 210 | min-width: 205px; 211 | max-width: 235px; 212 | padding: 10px; 213 | background: #fefefe; 214 | border: 1px solid #bbb; 215 | } 216 | [data-mode="palettes"] .asColorPicker-dropdown { 217 | min-width: auto; 218 | max-width: auto; 219 | } 220 | 221 | .asColorPicker-trigger { 222 | border: 1px solid #bbb; 223 | } 224 | 225 | .asColorPicker-saturation { 226 | -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); 227 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); 228 | } 229 | .asColorPicker-saturation i { 230 | width: 5px; 231 | height: 5px; 232 | margin-top: -2px; 233 | margin-left: -2px; 234 | border: 2px solid #fff; 235 | border-radius: 100%; 236 | } 237 | 238 | .asColorPicker-hue, .asColorPicker-alpha { 239 | margin-left: 10px; 240 | -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); 241 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); 242 | } 243 | .asColorPicker-hue i, .asColorPicker-alpha i { 244 | left: -2px; 245 | width: 20px; 246 | height: 2px; 247 | margin-top: -2px; 248 | border: 2px solid #fff; 249 | } 250 | 251 | .asColorPicker-preview { 252 | position: relative; 253 | height: 33px; 254 | margin-right: 10px; 255 | margin-bottom: 10px; 256 | } 257 | .asColorPicker-preview:after { 258 | position: absolute; 259 | top: 0; 260 | left: 0; 261 | width: 100%; 262 | height: 100%; 263 | pointer-events: none; 264 | content: ""; 265 | -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); 266 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); 267 | } 268 | .asColorPicker-preview li { 269 | width: 48px; 270 | height: 33px; 271 | } 272 | 273 | .asColorPicker-hex { 274 | width: 100px; 275 | border-color: rgba(0, 0, 0, .05); 276 | } 277 | 278 | .asColorPicker-palettes li { 279 | width: 21px; 280 | height: 15px; 281 | margin-right: 6px; 282 | margin-bottom: 3px; 283 | } 284 | .asColorPicker-palettes li span { 285 | -webkit-box-sizing: border-box; 286 | box-sizing: border-box; 287 | border: 1px solid rgba(0, 0, 0, .05); 288 | } 289 | .asColorPicker-palettes li:nth-child(5n) { 290 | margin-right: 0; 291 | } 292 | [data-mode="palettes"] .asColorPicker-palettes li:nth-child(5n) { 293 | margin-right: 6px; 294 | } 295 | 296 | .asColorPicker-buttons, .asColorPicker-gradient-control { 297 | float: right; 298 | } 299 | .asColorPicker-buttons a, .asColorPicker-gradient-control a { 300 | margin-left: 5px; 301 | } 302 | 303 | .asColorPicker-gradient { 304 | padding-top: 20px; 305 | margin-top: 10px; 306 | border-top: 1px solid rgba(0, 0, 0, .05); 307 | } 308 | .asColorPicker-gradient-preview { 309 | position: relative; 310 | width: 160px; 311 | border: 1px solid rgba(0, 0, 0, .05); 312 | } 313 | .asColorPicker-gradient-preview:after { 314 | position: absolute; 315 | top: 0; 316 | left: 0; 317 | z-index: -1; 318 | width: 100%; 319 | height: 100%; 320 | content: ""; 321 | background-image: url("../images/transparent.png"); 322 | } 323 | .asColorPicker-gradient-markers { 324 | top: -16px; 325 | display: block; 326 | width: 160px; 327 | height: 16px; 328 | padding: 0; 329 | margin: 0; 330 | list-style: none; 331 | } 332 | .asColorPicker-gradient-marker { 333 | width: 10px; 334 | height: 10px; 335 | margin-left: -6px; 336 | background: #fff; 337 | border: 1px solid #bbb; 338 | } 339 | .asColorPicker-gradient-marker span { 340 | display: block; 341 | width: 100%; 342 | height: 100%; 343 | } 344 | .asColorPicker-gradient-marker i { 345 | position: absolute; 346 | bottom: -3px; 347 | left: 2px; 348 | width: 4px; 349 | height: 4px; 350 | background: #fff; 351 | border: 1px solid transparent; 352 | border-right-color: rgba(0, 0, 0, .05); 353 | border-bottom-color: rgba(0, 0, 0, .05); 354 | -webkit-transform: rotate(45deg); 355 | -ms-transform: rotate(45deg); 356 | transform: rotate(45deg); 357 | } 358 | .asColorPicker-gradient-marker_active { 359 | z-index: 1; 360 | border: 2px solid #41a9e5; 361 | } 362 | .asColorPicker-gradient-marker_active i { 363 | left: 1px; 364 | border: 2px solid transparent; 365 | border-right-color: #41a9e5; 366 | border-bottom-color: #41a9e5; 367 | } 368 | .asColorPicker-gradient-wheel { 369 | margin-left: 10px; 370 | } 371 | .asColorPicker-gradient-wheel i { 372 | background-color: #888; 373 | } 374 | .asColorPicker-gradient-angle { 375 | width: 24px; 376 | margin-left: 10px; 377 | } 378 | -------------------------------------------------------------------------------- /dist/css/asColorPicker.min.css: -------------------------------------------------------------------------------- 1 | /** 2 | * asColorPicker v0.4.4 3 | * https://github.com/amazingSurge/jquery-asColorPicker 4 | * 5 | * Copyright (c) amazingSurge 6 | * Released under the LGPL-3.0 license 7 | */ 8 | .asColorPicker-wrap{position:relative;display:inline-block}.asColorPicker_hideInput,.asColorPicker_hideInput .asColorPicker-clear{display:none}.asColorPicker-dropdown{position:absolute;z-index:9999;display:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.asColorPicker-dropdown *{padding:0;margin:0}.asColorPicker_open{display:block}.asColorPicker-mask{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%}.asColorPicker-trigger{position:relative;display:inline-block;width:18px;height:20px;cursor:pointer;background-image:url(../images/transparent.png)}.asColorPicker-trigger span{display:inline-block;width:100%;height:100%}.asColorPicker-input,.asColorPicker-trigger{vertical-align:middle}.asColorPicker-clear{position:absolute;top:0;right:26px;display:none;color:#777;text-decoration:none}.asColorPicker-clear:after{content:"x"}.asColorPicker-wrap:hover .asColorPicker-clear{display:inline-block}.asColorPicker-preview{float:left;list-style:none}.asColorPicker-preview li{display:inline-block;vertical-align:top;background-image:url(../images/transparent.png);*display:inline;*zoom:1}.asColorPicker-preview li span{display:block;height:100%}.asColorPicker-preview-previous{cursor:pointer}.asColorPicker-palettes ul{display:block}.asColorPicker-palettes ul:after,.asColorPicker-palettes ul:before{display:table;content:""}.asColorPicker-palettes ul:after{clear:both}.asColorPicker-palettes li{display:block;float:left;overflow:hidden;text-indent:100%;white-space:nowrap;cursor:pointer;background-image:url(../images/transparent.png)}.asColorPicker-palettes li span{display:block;height:100%}.asColorPicker-saturation{position:relative;display:inline-block;width:175px;height:175px;clear:both;background-image:url(../images/saturation.png);*display:inline;*zoom:1}.asColorPicker-saturation i{position:absolute}.asColorPicker-alpha,.asColorPicker-hue{position:relative;display:inline-block;width:20px;height:175px;cursor:pointer;*display:inline;*zoom:1}.asColorPicker-alpha i,.asColorPicker-hue i{position:absolute;cursor:row-resize}.asColorPicker-hue{background-image:url(../images/hue.png)}.asColorPicker-alpha{background-image:url(../images/alpha.png)}.asColorPicker-buttons a,.asColorPicker-gradient-control a{text-decoration:none;cursor:pointer}.asColorPicker-gradient{display:none}.asColorPicker-gradient_enable{display:block}.asColorPicker-gradient-preview{float:left;height:20px}.asColorPicker-gradient-markers{position:relative;width:100%}.asColorPicker-gradient-marker{position:absolute;outline:none}.asColorPicker-gradient-wheel{position:relative;float:left;width:20px;height:20px;border:1px solid #bbb;border-radius:100%}.asColorPicker-gradient-wheel i{position:absolute;width:3px;height:3px;border-radius:100%}.asColorPicker-gradient-angle{float:left}.asColorPicker-dropdown{min-width:205px;max-width:235px;padding:10px;background:#fefefe;border:1px solid #bbb}[data-mode=palettes] .asColorPicker-dropdown{min-width:auto;max-width:auto}.asColorPicker-trigger{border:1px solid #bbb}.asColorPicker-saturation{-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.asColorPicker-saturation i{width:5px;height:5px;margin-top:-2px;margin-left:-2px;border:2px solid #fff;border-radius:100%}.asColorPicker-alpha,.asColorPicker-hue{margin-left:10px;-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.asColorPicker-alpha i,.asColorPicker-hue i{left:-2px;width:20px;height:2px;margin-top:-2px;border:2px solid #fff}.asColorPicker-preview{position:relative;height:33px;margin-right:10px;margin-bottom:10px}.asColorPicker-preview:after{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;content:"";-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.asColorPicker-preview li{width:48px;height:33px}.asColorPicker-hex{width:100px;border-color:rgba(0,0,0,.05)}.asColorPicker-palettes li{width:21px;height:15px;margin-right:6px;margin-bottom:3px}.asColorPicker-palettes li span{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(0,0,0,.05)}.asColorPicker-palettes li:nth-child(5n){margin-right:0}[data-mode=palettes] .asColorPicker-palettes li:nth-child(5n){margin-right:6px}.asColorPicker-buttons,.asColorPicker-gradient-control{float:right}.asColorPicker-buttons a,.asColorPicker-gradient-control a{margin-left:5px}.asColorPicker-gradient{padding-top:20px;margin-top:10px;border-top:1px solid rgba(0,0,0,.05)}.asColorPicker-gradient-preview{position:relative;width:160px;border:1px solid rgba(0,0,0,.05)}.asColorPicker-gradient-preview:after{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;content:"";background-image:url(../images/transparent.png)}.asColorPicker-gradient-markers{top:-16px;display:block;width:160px;height:16px;padding:0;margin:0;list-style:none}.asColorPicker-gradient-marker{width:10px;height:10px;margin-left:-6px;background:#fff;border:1px solid #bbb}.asColorPicker-gradient-marker span{display:block;width:100%;height:100%}.asColorPicker-gradient-marker i{position:absolute;bottom:-3px;left:2px;width:4px;height:4px;background:#fff;border:1px solid transparent;border-right-color:rgba(0,0,0,.05);border-bottom-color:rgba(0,0,0,.05);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.asColorPicker-gradient-marker_active{z-index:1;border:2px solid #41a9e5}.asColorPicker-gradient-marker_active i{left:1px;border:2px solid transparent;border-right-color:#41a9e5;border-bottom-color:#41a9e5}.asColorPicker-gradient-wheel{margin-left:10px}.asColorPicker-gradient-wheel i{background-color:#888}.asColorPicker-gradient-angle{width:24px;margin-left:10px} 9 | /*# sourceMappingURL=asColorPicker.min.css.map */ 10 | -------------------------------------------------------------------------------- /dist/images/alpha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecreation/jquery-asColorPicker/889df20c461bb1d9e27d8ea2a04d0106d4f5d231/dist/images/alpha.png -------------------------------------------------------------------------------- /dist/images/hue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecreation/jquery-asColorPicker/889df20c461bb1d9e27d8ea2a04d0106d4f5d231/dist/images/hue.png -------------------------------------------------------------------------------- /dist/images/saturation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecreation/jquery-asColorPicker/889df20c461bb1d9e27d8ea2a04d0106d4f5d231/dist/images/saturation.png -------------------------------------------------------------------------------- /dist/images/transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecreation/jquery-asColorPicker/889df20c461bb1d9e27d8ea2a04d0106d4f5d231/dist/images/transparent.png -------------------------------------------------------------------------------- /examples/css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | * HTML5 Boilerplate 3 | * 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html, 14 | button, 15 | input, 16 | select, 17 | textarea { 18 | color: #222; 19 | } 20 | 21 | body { 22 | font-size: 1em; 23 | line-height: 1.4; 24 | } 25 | 26 | /* 27 | * Remove text-shadow in selection highlight: h5bp.com/i 28 | * These selection declarations have to be separate. 29 | * Customize the background color to match your design. 30 | */ 31 | 32 | ::-moz-selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | ::selection { 38 | background: #b3d4fc; 39 | text-shadow: none; 40 | } 41 | 42 | /* 43 | * A better looking default horizontal rule 44 | */ 45 | 46 | hr { 47 | display: block; 48 | height: 1px; 49 | border: 0; 50 | border-top: 1px solid #ccc; 51 | margin: 1em 0; 52 | padding: 0; 53 | } 54 | 55 | /* 56 | * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 57 | */ 58 | 59 | img { 60 | vertical-align: middle; 61 | } 62 | 63 | /* 64 | * Remove default fieldset styles. 65 | */ 66 | 67 | fieldset { 68 | border: 0; 69 | margin: 0; 70 | padding: 0; 71 | } 72 | 73 | /* 74 | * Allow only vertical resizing of textareas. 75 | */ 76 | 77 | textarea { 78 | resize: vertical; 79 | } 80 | 81 | /* ========================================================================== 82 | Chrome Frame prompt 83 | ========================================================================== */ 84 | 85 | .chromeframe { 86 | margin: 0.2em 0; 87 | background: #ccc; 88 | color: #000; 89 | padding: 0.2em 0; 90 | } 91 | 92 | /* ========================================================================== 93 | Author's custom styles 94 | ========================================================================== */ 95 | #toc { 96 | top: 0px; 97 | left: 0px; 98 | height: 100%; 99 | position: fixed; 100 | background: #333; 101 | box-shadow: inset -5px 0 5px 0px #000; 102 | width: 150px; 103 | padding-top: 20px; 104 | color: #fff; 105 | } 106 | 107 | #toc ul { 108 | margin: 0; 109 | padding: 0; 110 | list-style: none; 111 | } 112 | 113 | #toc li { 114 | padding: 5px 10px; 115 | } 116 | 117 | #toc a { 118 | color: #fff; 119 | text-decoration: none; 120 | display: block; 121 | } 122 | 123 | #toc .toc-h2 { 124 | padding-left: 10px; 125 | } 126 | 127 | #toc .toc-h3 { 128 | padding-left: 20px; 129 | } 130 | 131 | #toc .toc-active { 132 | background: #336699; 133 | box-shadow: inset -5px 0px 10px -5px #000; 134 | } 135 | 136 | #wrapper { 137 | margin: 0 20px 0 170px; 138 | } 139 | code, pre { 140 | font-size: 12px; 141 | } 142 | 143 | 144 | .example { 145 | background-color: #f0f0f0; 146 | margin-top: 0; 147 | padding: 1em; 148 | } 149 | 150 | 151 | 152 | /* positons */ 153 | .position_tooltip,.show { 154 | margin: 0.5em; 155 | background: #ddddff; 156 | padding: 10px; 157 | cursor: default; 158 | float:left; 159 | width: 100px; 160 | text-align: center; 161 | } 162 | .show { 163 | width: auto; 164 | } 165 | .trace { 166 | width: 200px; 167 | height: 100px; 168 | } 169 | .positon_wrap { 170 | overflow: hidden; 171 | } 172 | .position_tooltip:nth-child(3n+1){ 173 | clear:left; 174 | } 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | /* ========================================================================== 184 | Helper classes 185 | ========================================================================== */ 186 | 187 | /* 188 | * Image replacement 189 | */ 190 | 191 | .ir { 192 | background-color: transparent; 193 | border: 0; 194 | overflow: hidden; 195 | /* IE 6/7 fallback */ 196 | *text-indent: -9999px; 197 | } 198 | 199 | .ir:before { 200 | content: ""; 201 | display: block; 202 | width: 0; 203 | height: 100%; 204 | } 205 | 206 | /* 207 | * Hide from both screenreaders and browsers: h5bp.com/u 208 | */ 209 | 210 | .hidden { 211 | display: none !important; 212 | visibility: hidden; 213 | } 214 | 215 | /* 216 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 217 | */ 218 | 219 | .visuallyhidden { 220 | border: 0; 221 | clip: rect(0 0 0 0); 222 | height: 1px; 223 | margin: -1px; 224 | overflow: hidden; 225 | padding: 0; 226 | position: absolute; 227 | width: 1px; 228 | } 229 | 230 | /* 231 | * Extends the .visuallyhidden class to allow the element to be focusable 232 | * when navigated to via the keyboard: h5bp.com/p 233 | */ 234 | 235 | .visuallyhidden.focusable:active, 236 | .visuallyhidden.focusable:focus { 237 | clip: auto; 238 | height: auto; 239 | margin: 0; 240 | overflow: visible; 241 | position: static; 242 | width: auto; 243 | } 244 | 245 | /* 246 | * Hide visually and from screenreaders, but maintain layout 247 | */ 248 | 249 | .invisible { 250 | visibility: hidden; 251 | } 252 | 253 | /* 254 | * Clearfix: contain floats 255 | * 256 | * For modern browsers 257 | * 1. The space content is one way to avoid an Opera bug when the 258 | * `contenteditable` attribute is included anywhere else in the document. 259 | * Otherwise it causes space to appear at the top and bottom of elements 260 | * that receive the `clearfix` class. 261 | * 2. The use of `table` rather than `block` is only necessary if using 262 | * `:before` to contain the top-margins of child elements. 263 | */ 264 | 265 | .clearfix:before, 266 | .clearfix:after { 267 | content: " "; /* 1 */ 268 | display: table; /* 2 */ 269 | } 270 | 271 | .clearfix:after { 272 | clear: both; 273 | } 274 | 275 | /* 276 | * For IE 6/7 only 277 | * Include this rule to trigger hasLayout and contain floats. 278 | */ 279 | 280 | .clearfix { 281 | *zoom: 1; 282 | } 283 | 284 | /* ========================================================================== 285 | EXAMPLE Media Queries for Responsive Design. 286 | Theses examples override the primary ('mobile first') styles. 287 | Modify as content requires. 288 | ========================================================================== */ 289 | 290 | @media only screen and (min-width: 35em) { 291 | /* Style adjustments for viewports that meet the condition */ 292 | } 293 | 294 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 295 | only screen and (min-resolution: 144dpi) { 296 | /* Style adjustments for high resolution devices */ 297 | } 298 | 299 | /* ========================================================================== 300 | Print styles. 301 | Inlined to avoid required HTTP connection: h5bp.com/r 302 | ========================================================================== */ 303 | 304 | @media print { 305 | * { 306 | background: transparent !important; 307 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 308 | box-shadow:none !important; 309 | text-shadow: none !important; 310 | } 311 | 312 | a, 313 | a:visited { 314 | text-decoration: underline; 315 | } 316 | 317 | a[href]:after { 318 | content: " (" attr(href) ")"; 319 | } 320 | 321 | abbr[title]:after { 322 | content: " (" attr(title) ")"; 323 | } 324 | 325 | /* 326 | * Don't show links for images, or javascript/internal links 327 | */ 328 | 329 | .ir a:after, 330 | a[href^="javascript:"]:after, 331 | a[href^="#"]:after { 332 | content: ""; 333 | } 334 | 335 | pre, 336 | blockquote { 337 | border: 1px solid #999; 338 | page-break-inside: avoid; 339 | } 340 | 341 | thead { 342 | display: table-header-group; /* h5bp.com/t */ 343 | } 344 | 345 | tr, 346 | img { 347 | page-break-inside: avoid; 348 | } 349 | 350 | img { 351 | max-width: 100% !important; 352 | } 353 | 354 | @page { 355 | margin: 0.5cm; 356 | } 357 | 358 | p, 359 | h2, 360 | h3 { 361 | orphans: 3; 362 | widows: 3; 363 | } 364 | 365 | h2, 366 | h3 { 367 | page-break-after: avoid; 368 | } 369 | } 370 | -------------------------------------------------------------------------------- /examples/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Correct the line height in all browsers. 6 | * 3. Prevent adjustments of font size after orientation changes in IE and iOS. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | line-height: 1.15; /* 2 */ 12 | -ms-text-size-adjust: 100%; /* 3 */ 13 | -webkit-text-size-adjust: 100%; /* 3 */ 14 | } 15 | 16 | /** 17 | * Remove the margin in all browsers (opinionated). 18 | */ 19 | 20 | body { 21 | margin: 0; 22 | } 23 | 24 | /* HTML5 display definitions 25 | ========================================================================== */ 26 | 27 | /** 28 | * Add the correct display in IE 9-. 29 | * 1. Add the correct display in Edge, IE, and Firefox. 30 | * 2. Add the correct display in IE. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, /* 1 */ 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | main, /* 2 */ 41 | menu, 42 | nav, 43 | section, 44 | summary { /* 1 */ 45 | display: block; 46 | } 47 | 48 | /** 49 | * Add the correct display in IE 9-. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; 57 | } 58 | 59 | /** 60 | * Add the correct display in iOS 4-7. 61 | */ 62 | 63 | audio:not([controls]) { 64 | display: none; 65 | height: 0; 66 | } 67 | 68 | /** 69 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 70 | */ 71 | 72 | progress { 73 | vertical-align: baseline; 74 | } 75 | 76 | /** 77 | * Add the correct display in IE 10-. 78 | * 1. Add the correct display in IE. 79 | */ 80 | 81 | template, /* 1 */ 82 | [hidden] { 83 | display: none; 84 | } 85 | 86 | /* Links 87 | ========================================================================== */ 88 | 89 | /** 90 | * 1. Remove the gray background on active links in IE 10. 91 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 92 | */ 93 | 94 | a { 95 | background-color: transparent; /* 1 */ 96 | -webkit-text-decoration-skip: objects; /* 2 */ 97 | } 98 | 99 | /** 100 | * Remove the outline on focused links when they are also active or hovered 101 | * in all browsers (opinionated). 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline-width: 0; 107 | } 108 | 109 | /* Text-level semantics 110 | ========================================================================== */ 111 | 112 | /** 113 | * 1. Remove the bottom border in Firefox 39-. 114 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 115 | */ 116 | 117 | abbr[title] { 118 | border-bottom: none; /* 1 */ 119 | text-decoration: underline; /* 2 */ 120 | text-decoration: underline dotted; /* 2 */ 121 | } 122 | 123 | /** 124 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 125 | */ 126 | 127 | b, 128 | strong { 129 | font-weight: inherit; 130 | } 131 | 132 | /** 133 | * Add the correct font weight in Chrome, Edge, and Safari. 134 | */ 135 | 136 | b, 137 | strong { 138 | font-weight: bolder; 139 | } 140 | 141 | /** 142 | * Add the correct font style in Android 4.3-. 143 | */ 144 | 145 | dfn { 146 | font-style: italic; 147 | } 148 | 149 | /** 150 | * Correct the font size and margin on `h1` elements within `section` and 151 | * `article` contexts in Chrome, Firefox, and Safari. 152 | */ 153 | 154 | h1 { 155 | font-size: 2em; 156 | margin: 0.67em 0; 157 | } 158 | 159 | /** 160 | * Add the correct background and color in IE 9-. 161 | */ 162 | 163 | mark { 164 | background-color: #ff0; 165 | color: #000; 166 | } 167 | 168 | /** 169 | * Add the correct font size in all browsers. 170 | */ 171 | 172 | small { 173 | font-size: 80%; 174 | } 175 | 176 | /** 177 | * Prevent `sub` and `sup` elements from affecting the line height in 178 | * all browsers. 179 | */ 180 | 181 | sub, 182 | sup { 183 | font-size: 75%; 184 | line-height: 0; 185 | position: relative; 186 | vertical-align: baseline; 187 | } 188 | 189 | sub { 190 | bottom: -0.25em; 191 | } 192 | 193 | sup { 194 | top: -0.5em; 195 | } 196 | 197 | /* Embedded content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Remove the border on images inside links in IE 10-. 202 | */ 203 | 204 | img { 205 | border-style: none; 206 | } 207 | 208 | /** 209 | * Hide the overflow in IE. 210 | */ 211 | 212 | svg:not(:root) { 213 | overflow: hidden; 214 | } 215 | 216 | /* Grouping content 217 | ========================================================================== */ 218 | 219 | /** 220 | * 1. Correct the inheritance and scaling of font size in all browsers. 221 | * 2. Correct the odd `em` font sizing in all browsers. 222 | */ 223 | 224 | code, 225 | kbd, 226 | pre, 227 | samp { 228 | font-family: monospace, monospace; /* 1 */ 229 | font-size: 1em; /* 2 */ 230 | } 231 | 232 | /** 233 | * Add the correct margin in IE 8. 234 | */ 235 | 236 | figure { 237 | margin: 1em 40px; 238 | } 239 | 240 | /** 241 | * 1. Add the correct box sizing in Firefox. 242 | * 2. Show the overflow in Edge and IE. 243 | */ 244 | 245 | hr { 246 | box-sizing: content-box; /* 1 */ 247 | height: 0; /* 1 */ 248 | overflow: visible; /* 2 */ 249 | } 250 | 251 | /* Forms 252 | ========================================================================== */ 253 | 254 | /** 255 | * 1. Change font properties to `inherit` in all browsers (opinionated). 256 | * 2. Remove the margin in Firefox and Safari. 257 | */ 258 | 259 | button, 260 | input, 261 | optgroup, 262 | select, 263 | textarea { 264 | font: inherit; /* 1 */ 265 | margin: 0; /* 2 */ 266 | } 267 | 268 | /** 269 | * Restore the font weight unset by the previous rule. 270 | */ 271 | 272 | optgroup { 273 | font-weight: bold; 274 | } 275 | 276 | /** 277 | * Show the overflow in IE. 278 | * 1. Show the overflow in Edge. 279 | */ 280 | 281 | button, 282 | input { /* 1 */ 283 | overflow: visible; 284 | } 285 | 286 | /** 287 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 288 | * 1. Remove the inheritance of text transform in Firefox. 289 | */ 290 | 291 | button, 292 | select { /* 1 */ 293 | text-transform: none; 294 | } 295 | 296 | /** 297 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 298 | * controls in Android 4. 299 | * 2. Correct the inability to style clickable types in iOS and Safari. 300 | */ 301 | 302 | button, 303 | html [type="button"], /* 1 */ 304 | [type="reset"], 305 | [type="submit"] { 306 | -webkit-appearance: button; /* 2 */ 307 | } 308 | 309 | /** 310 | * Remove the inner border and padding in Firefox. 311 | */ 312 | 313 | button::-moz-focus-inner, 314 | [type="button"]::-moz-focus-inner, 315 | [type="reset"]::-moz-focus-inner, 316 | [type="submit"]::-moz-focus-inner { 317 | border-style: none; 318 | padding: 0; 319 | } 320 | 321 | /** 322 | * Restore the focus styles unset by the previous rule. 323 | */ 324 | 325 | button:-moz-focusring, 326 | [type="button"]:-moz-focusring, 327 | [type="reset"]:-moz-focusring, 328 | [type="submit"]:-moz-focusring { 329 | outline: 1px dotted ButtonText; 330 | } 331 | 332 | /** 333 | * Change the border, margin, and padding in all browsers (opinionated). 334 | */ 335 | 336 | fieldset { 337 | border: 1px solid #c0c0c0; 338 | margin: 0 2px; 339 | padding: 0.35em 0.625em 0.75em; 340 | } 341 | 342 | /** 343 | * 1. Correct the text wrapping in Edge and IE. 344 | * 2. Correct the color inheritance from `fieldset` elements in IE. 345 | * 3. Remove the padding so developers are not caught out when they zero out 346 | * `fieldset` elements in all browsers. 347 | */ 348 | 349 | legend { 350 | box-sizing: border-box; /* 1 */ 351 | color: inherit; /* 2 */ 352 | display: table; /* 1 */ 353 | max-width: 100%; /* 1 */ 354 | padding: 0; /* 3 */ 355 | white-space: normal; /* 1 */ 356 | } 357 | 358 | /** 359 | * Remove the default vertical scrollbar in IE. 360 | */ 361 | 362 | textarea { 363 | overflow: auto; 364 | } 365 | 366 | /** 367 | * 1. Add the correct box sizing in IE 10-. 368 | * 2. Remove the padding in IE 10-. 369 | */ 370 | 371 | [type="checkbox"], 372 | [type="radio"] { 373 | box-sizing: border-box; /* 1 */ 374 | padding: 0; /* 2 */ 375 | } 376 | 377 | /** 378 | * Correct the cursor style of increment and decrement buttons in Chrome. 379 | */ 380 | 381 | [type="number"]::-webkit-inner-spin-button, 382 | [type="number"]::-webkit-outer-spin-button { 383 | height: auto; 384 | } 385 | 386 | /** 387 | * 1. Correct the odd appearance in Chrome and Safari. 388 | * 2. Correct the outline style in Safari. 389 | */ 390 | 391 | [type="search"] { 392 | -webkit-appearance: textfield; /* 1 */ 393 | outline-offset: -2px; /* 2 */ 394 | } 395 | 396 | /** 397 | * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. 398 | */ 399 | 400 | [type="search"]::-webkit-search-cancel-button, 401 | [type="search"]::-webkit-search-decoration { 402 | -webkit-appearance: none; 403 | } 404 | 405 | /** 406 | * Correct the text style of placeholders in Chrome, Edge, and Safari. 407 | */ 408 | 409 | ::-webkit-input-placeholder { 410 | color: inherit; 411 | opacity: 0.54; 412 | } 413 | 414 | /** 415 | * 1. Correct the inability to style clickable types in iOS and Safari. 416 | * 2. Change font properties to `inherit` in Safari. 417 | */ 418 | 419 | ::-webkit-file-upload-button { 420 | -webkit-appearance: button; /* 1 */ 421 | font: inherit; /* 2 */ 422 | } 423 | -------------------------------------------------------------------------------- /examples/css/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js default theme for JavaScript, CSS and HTML 3 | * Based on dabblet (http://dabblet.com) 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: black; 10 | text-shadow: 0 1px white; 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | 17 | -moz-tab-size: 4; 18 | -o-tab-size: 4; 19 | tab-size: 4; 20 | 21 | -webkit-hyphens: none; 22 | -moz-hyphens: none; 23 | -ms-hyphens: none; 24 | hyphens: none; 25 | } 26 | 27 | /* Code blocks */ 28 | pre[class*="language-"] { 29 | padding: 1em; 30 | margin: .5em 0; 31 | overflow: auto; 32 | } 33 | 34 | :not(pre) > code[class*="language-"], 35 | pre[class*="language-"] { 36 | background: #f5f2f0; 37 | } 38 | 39 | /* Inline code */ 40 | :not(pre) > code[class*="language-"] { 41 | padding: .1em; 42 | border-radius: .3em; 43 | } 44 | 45 | .token.comment, 46 | .token.prolog, 47 | .token.doctype, 48 | .token.cdata { 49 | color: slategray; 50 | } 51 | 52 | .token.punctuation { 53 | color: #999; 54 | } 55 | 56 | .namespace { 57 | opacity: .7; 58 | } 59 | 60 | .token.property, 61 | .token.tag, 62 | .token.boolean, 63 | .token.number { 64 | color: #905; 65 | } 66 | 67 | .token.selector, 68 | .token.attr-name, 69 | .token.string { 70 | color: #690; 71 | } 72 | 73 | .token.operator, 74 | .token.entity, 75 | .token.url, 76 | .language-css .token.string, 77 | .style .token.string { 78 | color: #a67f59; 79 | background: hsla(0,0%,100%,.5); 80 | } 81 | 82 | .token.atrule, 83 | .token.attr-value, 84 | .token.keyword { 85 | color: #07a; 86 | } 87 | 88 | 89 | .token.regex, 90 | .token.important { 91 | color: #e90; 92 | } 93 | 94 | .token.important { 95 | font-weight: bold; 96 | } 97 | 98 | .token.entity { 99 | cursor: help; 100 | } 101 | -------------------------------------------------------------------------------- /examples/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecreation/jquery-asColorPicker/889df20c461bb1d9e27d8ea2a04d0106d4f5d231/examples/demo.gif -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | asColorPicker 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 |
24 |
25 |
26 |

Default

27 | 

 28 | $(".example_default").asColorPicker();
 29 |
30 |
31 | 32 | 37 |
38 |
39 |
40 |

Mode: palettes

41 | 

 42 | $(".example_palettes").asColorPicker({
 43 |     mode: 'palettes'
 44 | });
 45 |
46 |
47 | 48 | 53 |
54 |
55 |
56 |

Mode: complex

57 | 

 58 | $(".example_complex").asColorPicker({
 59 |     mode: 'complex'
 60 | });
 61 |
62 |
63 | 64 | 69 |
70 |
71 |
72 |

Mode: gradient

73 | 

 74 | $(".example_gradient").asColorPicker({
 75 |     mode: 'gradient'
 76 | });
 77 |
78 |
79 | 80 | 85 |
86 |
87 |
88 |

Mode: gradient without switchable

89 | 

 90 | $(".example_gradient_2").asColorPicker({
 91 |     mode: 'gradient',
 92 |     gradient: {
 93 |         switchable: false
 94 |     }
 95 | });
 96 |
97 |
98 | 99 | 108 |
109 |
110 |
111 |

Mode: gradient with gradient value

112 | 

113 | $(".example_gradient_value").asColorPicker();
114 |
115 |
116 | 117 | 122 |
123 |
124 |
125 |

Mode: gradient with color value

126 | 

127 | $(".example_gradient_color").asColorPicker();
128 |
129 |
130 | 131 | 136 |
137 |
138 | 139 |
140 |

Hide Input

141 | 

142 | $(".example_5").asColorPicker({
143 |     hideInput: true
144 | });
145 |
146 |
147 | 148 | 155 |
156 |
157 |
158 |

Read Only

159 | 

160 | $(".example_6").asColorPicker({
161 |     readonly: true
162 | });
163 |
164 |
165 | 166 | 173 |
174 |
175 |
176 |

Disable hideFireChange

177 | 

178 | $(".example_7").asColorPicker({
179 |     hideFireChange: false
180 | });
181 |
182 |
183 | 184 | 191 |
192 |
193 |
194 | 199 | 200 | 201 | -------------------------------------------------------------------------------- /examples/js/jquery.toc.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * toc - jQuery Table of Contents Plugin 3 | * v0.3.2 4 | * http://projects.jga.me/toc/ 5 | * copyright Greg Allen 2014 6 | * MIT License 7 | */ 8 | /*! 9 | * smooth-scroller - Javascript lib to handle smooth scrolling 10 | * v0.1.2 11 | * https://github.com/firstandthird/smooth-scroller 12 | * copyright First+Third 2014 13 | * MIT License 14 | */ 15 | //smooth-scroller.js 16 | 17 | (function($) { 18 | $.fn.smoothScroller = function(options) { 19 | options = $.extend({}, $.fn.smoothScroller.defaults, options); 20 | var el = $(this); 21 | 22 | $(options.scrollEl).animate({ 23 | scrollTop: el.offset().top - $(options.scrollEl).offset().top - options.offset 24 | }, options.speed, options.ease, function() { 25 | var hash = el.attr('id'); 26 | 27 | if(hash.length) { 28 | if(history.pushState) { 29 | history.pushState(null, null, '#' + hash); 30 | } else { 31 | document.location.hash = hash; 32 | } 33 | } 34 | 35 | el.trigger('smoothScrollerComplete'); 36 | }); 37 | 38 | return this; 39 | }; 40 | 41 | $.fn.smoothScroller.defaults = { 42 | speed: 400, 43 | ease: 'swing', 44 | scrollEl: 'body,html', 45 | offset: 0 46 | }; 47 | 48 | $('body').on('click', '[data-smoothscroller]', function(e) { 49 | e.preventDefault(); 50 | var href = $(this).attr('href'); 51 | 52 | if(href.indexOf('#') === 0) { 53 | $(href).smoothScroller(); 54 | } 55 | }); 56 | }(jQuery)); 57 | 58 | (function($) { 59 | var verboseIdCache = {}; 60 | $.fn.toc = function(options) { 61 | var self = this; 62 | var opts = $.extend({}, jQuery.fn.toc.defaults, options); 63 | 64 | var container = $(opts.container); 65 | var headings = $(opts.selectors, container); 66 | var headingOffsets = []; 67 | var activeClassName = opts.activeClass; 68 | 69 | var scrollTo = function(e, callback) { 70 | if (opts.smoothScrolling && typeof opts.smoothScrolling === 'function') { 71 | e.preventDefault(); 72 | var elScrollTo = $(e.target).attr('href'); 73 | 74 | opts.smoothScrolling(elScrollTo, opts, callback); 75 | } 76 | $('li', self).removeClass(activeClassName); 77 | $(e.target).parent().addClass(activeClassName); 78 | }; 79 | 80 | //highlight on scroll 81 | var timeout; 82 | var highlightOnScroll = function(e) { 83 | if (timeout) { 84 | clearTimeout(timeout); 85 | } 86 | timeout = setTimeout(function() { 87 | var top = $(window).scrollTop(), 88 | highlighted, closest = Number.MAX_VALUE, index = 0; 89 | 90 | for (var i = 0, c = headingOffsets.length; i < c; i++) { 91 | var currentClosest = Math.abs(headingOffsets[i] - top); 92 | if (currentClosest < closest) { 93 | index = i; 94 | closest = currentClosest; 95 | } 96 | } 97 | 98 | $('li', self).removeClass(activeClassName); 99 | highlighted = $('li:eq('+ index +')', self).addClass(activeClassName); 100 | opts.onHighlight(highlighted); 101 | }, 50); 102 | }; 103 | if (opts.highlightOnScroll) { 104 | $(window).bind('scroll', highlightOnScroll); 105 | highlightOnScroll(); 106 | } 107 | 108 | return this.each(function() { 109 | //build TOC 110 | var el = $(this); 111 | var ul = $(opts.listType); 112 | 113 | headings.each(function(i, heading) { 114 | var $h = $(heading); 115 | headingOffsets.push($h.offset().top - opts.highlightOffset); 116 | 117 | var anchorName = opts.anchorName(i, heading, opts.prefix); 118 | 119 | //add anchor 120 | if(heading.id !== anchorName) { 121 | var anchor = $('').attr('id', anchorName).insertBefore($h); 122 | } 123 | 124 | //build TOC item 125 | var a = $('') 126 | .text(opts.headerText(i, heading, $h)) 127 | .attr('href', '#' + anchorName) 128 | .bind('click', function(e) { 129 | $(window).unbind('scroll', highlightOnScroll); 130 | scrollTo(e, function() { 131 | $(window).bind('scroll', highlightOnScroll); 132 | }); 133 | el.trigger('selected', $(this).attr('href')); 134 | }); 135 | 136 | var li = $('
  • ') 137 | .addClass(opts.itemClass(i, heading, $h, opts.prefix)) 138 | .append(a); 139 | 140 | ul.append(li); 141 | }); 142 | el.html(ul); 143 | }); 144 | }; 145 | 146 | 147 | jQuery.fn.toc.defaults = { 148 | container: 'body', 149 | listType: '