colorpicker update preparation

This commit is contained in:
razvanaldea89 2019-02-25 20:16:08 +02:00
parent ba1deb4c8f
commit 72ce405b9e
49 changed files with 6631 additions and 3497 deletions

View file

@ -0,0 +1,391 @@
/*!
* Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.
* @package bootstrap-colorpicker
* @version v3.0.3
* @license MIT
* @link https://farbelous.github.io/bootstrap-colorpicker/
* @link https://github.com/farbelous/bootstrap-colorpicker.git
*/
.colorpicker {
position: relative;
display: none;
font-size: inherit;
color: inherit;
text-align: left;
list-style: none;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: .75rem .75rem;
width: 148px;
border-radius: 4px;
-webkit-box-sizing: content-box;
box-sizing: content-box; }
.colorpicker.colorpicker-disabled,
.colorpicker.colorpicker-disabled * {
cursor: default !important; }
.colorpicker div {
position: relative; }
.colorpicker-popup {
position: absolute;
top: 100%;
left: 0;
float: left;
margin-top: 1px;
z-index: 1060; }
.colorpicker-popup.colorpicker-bs-popover-content {
position: relative;
top: auto;
left: auto;
float: none;
margin: 0;
z-index: initial;
border: none;
padding: 0.25rem 0;
border-radius: 0;
background: none;
-webkit-box-shadow: none;
box-shadow: none; }
.colorpicker:before,
.colorpicker:after {
content: "";
display: table;
clear: both;
line-height: 0; }
.colorpicker-clear {
clear: both;
display: block; }
.colorpicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: auto;
right: 6px; }
.colorpicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: auto;
right: 7px; }
.colorpicker.colorpicker-with-alpha {
width: 170px; }
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
display: block; }
.colorpicker-saturation {
position: relative;
width: 126px;
height: 126px;
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)), -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
background: linear-gradient(to bottom, transparent 0%, black 100%), linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
/* W3C */
cursor: crosshair;
float: left;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
margin-bottom: 6px; }
.colorpicker-saturation .colorpicker-guide {
display: block;
height: 6px;
width: 6px;
border-radius: 6px;
border: 1px solid #000;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
position: absolute;
top: 0;
left: 0;
margin: -3px 0 0 -3px; }
.colorpicker-hue,
.colorpicker-alpha {
position: relative;
width: 16px;
height: 126px;
float: left;
cursor: row-resize;
margin-left: 6px;
margin-bottom: 6px; }
.colorpicker-alpha-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.colorpicker-hue,
.colorpicker-alpha-color {
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.colorpicker-hue .colorpicker-guide,
.colorpicker-alpha .colorpicker-guide {
display: block;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
margin-left: -2px;
margin-top: -2px;
right: -2px;
z-index: 1; }
.colorpicker-hue {
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red));
background: linear-gradient(to top, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%);
/* W3C */ }
.colorpicker-alpha {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
display: none; }
.colorpicker-bar {
min-height: 16px;
margin: 6px 0 0 0;
clear: both;
text-align: center;
font-size: 10px;
line-height: normal;
max-width: 100%;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.colorpicker-bar:before {
content: "";
display: table;
clear: both; }
.colorpicker-bar.colorpicker-bar-horizontal {
height: 126px;
width: 16px;
margin: 0 0 6px 0;
float: left; }
.colorpicker-input-addon {
position: relative; }
.colorpicker-input-addon i {
display: inline-block;
cursor: pointer;
vertical-align: text-top;
height: 16px;
width: 16px;
position: relative; }
.colorpicker-input-addon:before {
content: "";
position: absolute;
width: 16px;
height: 16px;
display: inline-block;
vertical-align: text-top;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;
background-size: 10px 10px;
background-position: 0 0, 5px 5px; }
.colorpicker.colorpicker-inline {
position: relative;
display: inline-block;
float: none;
z-index: auto;
vertical-align: text-bottom; }
.colorpicker.colorpicker-horizontal {
width: 126px;
height: auto; }
.colorpicker.colorpicker-horizontal .colorpicker-bar {
width: 126px; }
.colorpicker.colorpicker-horizontal .colorpicker-saturation {
float: none;
margin-bottom: 0; }
.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
float: none;
width: 126px;
height: 16px;
cursor: col-resize;
margin-left: 0;
margin-top: 6px;
margin-bottom: 0; }
.colorpicker.colorpicker-horizontal .colorpicker-hue .colorpicker-guide,
.colorpicker.colorpicker-horizontal .colorpicker-alpha .colorpicker-guide {
position: absolute;
display: block;
bottom: -2px;
left: 0;
right: auto;
height: auto;
width: 4px; }
.colorpicker.colorpicker-horizontal .colorpicker-hue {
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: -webkit-gradient(linear, right top, left top, from(red), color-stop(8%, #ff8000), color-stop(17%, yellow), color-stop(25%, #80ff00), color-stop(33%, lime), color-stop(42%, #00ff80), color-stop(50%, cyan), color-stop(58%, #0080ff), color-stop(67%, blue), color-stop(75%, #8000ff), color-stop(83%, magenta), color-stop(92%, #ff0080), to(red));
background: linear-gradient(to left, red 0%, #ff8000 8%, yellow 17%, #80ff00 25%, lime 33%, #00ff80 42%, cyan 50%, #0080ff 58%, blue 67%, #8000ff 75%, magenta 83%, #ff0080 92%, red 100%);
/* W3C */ }
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;
background-size: 10px 10px;
background-position: 0 0, 5px 5px; }
.colorpicker-inline:before,
.colorpicker-no-arrow:before,
.colorpicker-popup.colorpicker-bs-popover-content:before {
content: none;
display: none; }
.colorpicker-inline:after,
.colorpicker-no-arrow:after,
.colorpicker-popup.colorpicker-bs-popover-content:after {
content: none;
display: none; }
.colorpicker.colorpicker-visible,
.colorpicker-alpha.colorpicker-visible,
.colorpicker-saturation.colorpicker-visible,
.colorpicker-hue.colorpicker-visible,
.colorpicker-bar.colorpicker-visible {
display: block; }
.colorpicker.colorpicker-hidden,
.colorpicker-alpha.colorpicker-hidden,
.colorpicker-saturation.colorpicker-hidden,
.colorpicker-hue.colorpicker-hidden,
.colorpicker-bar.colorpicker-hidden {
display: none; }
.colorpicker-inline.colorpicker-visible {
display: inline-block; }
.colorpicker.colorpicker-disabled:after {
border: none;
content: '';
display: block;
width: 100%;
height: 100%;
background: rgba(233, 236, 239, 0.33);
top: 0;
left: 0;
right: auto;
z-index: 2;
position: absolute; }
.colorpicker.colorpicker-disabled .colorpicker-guide {
display: none; }
/** EXTENSIONS **/
.colorpicker-preview {
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;
background-size: 10px 10px;
background-position: 0 0, 5px 5px; }
.colorpicker-preview > div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; }
.colorpicker-bar.colorpicker-swatches {
-webkit-box-shadow: none;
box-shadow: none;
height: auto; }
.colorpicker-swatches--inner {
clear: both;
margin-top: -6px; }
.colorpicker-swatch {
position: relative;
cursor: pointer;
float: left;
height: 16px;
width: 16px;
margin-right: 6px;
margin-top: 6px;
margin-left: 0;
display: block;
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;
background-size: 10px 10px;
background-position: 0 0, 5px 5px; }
.colorpicker-swatch--inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.colorpicker-swatch:nth-of-type(7n+0) {
margin-right: 0; }
.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(7n+0) {
margin-right: 6px; }
.colorpicker-with-alpha .colorpicker-swatch:nth-of-type(8n+0) {
margin-right: 0; }
.colorpicker-horizontal .colorpicker-swatch:nth-of-type(6n+0) {
margin-right: 0; }
.colorpicker-horizontal .colorpicker-swatch:nth-of-type(7n+0) {
margin-right: 6px; }
.colorpicker-horizontal .colorpicker-swatch:nth-of-type(8n+0) {
margin-right: 6px; }
.colorpicker-swatch:last-of-type:after {
content: "";
display: table;
clear: both; }
*[dir='rtl'] .colorpicker-element input,
.colorpicker-element[dir='rtl'] input,
.colorpicker-element input[dir='rtl'] {
direction: ltr;
text-align: right; }
/*# sourceMappingURL=bootstrap-colorpicker.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,32 +0,0 @@
{
"name": "mjolnic-bootstrap-colorpicker",
"main": [
"dist/css/bootstrap-colorpicker.css",
"dist/js/bootstrap-colorpicker.js"
],
"dependencies": {
"jquery": ">=1.10",
"bootstrap": ">=2"
},
"ignore": [
"\\.*",
"/index.html",
"/package.json",
"/composer.json",
"/Gruntfile.js",
"/.travis.yml",
"/travis.sh",
"/server.js"
],
"homepage": "https://github.com/mjolnic/bootstrap-colorpicker",
"version": "2.3.3",
"_release": "2.3.3",
"_resolution": {
"type": "version",
"tag": "2.3.3",
"commit": "59f06437c86b7c0e074aee8a699819fd1c07a173"
},
"_source": "https://github.com/mjolnic/bootstrap-colorpicker.git",
"_target": "^2.3.3",
"_originalSource": "bootstrap-colorpicker"
}

View file

@ -1,39 +0,0 @@
# Contributing
## Support
The issue tracker is not the place for support requests. If you get stuck with bootstrap-colorpicker, it's very likely
that the fine folks at [StackOverflow](http://stackoverflow.com/) will be able to help you; simply describe the problem
you're having and provide them a link to the repo (so they know what code you're using).
## Issues
For feature requests, suggestions or ideas, add `[SUGGESTION]` before the title of the issue, for anything else follow
the following guidelines.
### Steps to submit an issue
- Try to reproduce your problem in a separated environment, like in JSFiddle,
[here is a template for it](http://jsfiddle.net/mjolnic/0vopxm13/), that you can fork in the same page.
It already includes the required JS and CSS files.
- Before posting your issue, consider adding this information:
* Expected behaviour: what should happen?
* Actual behaviour: what happens instead?
* Your context: Where it happens? In which browser and version (if applicable)?
* Plugin version (and/or commit reference).
* jQuery version you use and list of all other plugins/scripts you are using with this one and may cause some conflict.
* A link to your JSFiddle (or similar tool) demo where you reproduced the problem (if applicable).
## Pull Requests
Patches and new features are welcome!
- Prerequisites: having `node`, `npm`, `bower` and `grunt` installed in your machine.
- After a fresh clone for your fork, you need to run `npm install && bower install` inside the project's root folder.
- For checking your changes in the browser you can execute `node serve` and navigate to http://localhost:5000/
- Before any commit run always `grunt` inside the project's root folder, to update the dist files
(never modify them manually).
- Do not change the plugin coding style.
- Check that the index.html demos aren't broken (modify if necessary).
- Test your code at least in Chrome, Firefox and IE >= 10 / Edge.
- Any new feature should come with updated docs (a demonstration).
- Push to your fork and submit the pull request (

View file

@ -1,13 +0,0 @@
Copyright 2012 Stefan Petre
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

View file

@ -1,24 +0,0 @@
# Bootstrap Colorpicker 2
Fancy and customizable color picker plugin for Twitter Bootstrap
[![Build Status](https://travis-ci.org/mjolnic/bootstrap-colorpicker.png)](https://travis-ci.org/mjolnic/bootstrap-colorpicker)
## Installation
For downloading the source code, you have many choices:
- Downloading the [latest source code ZIP file](https://github.com/mjolnic/bootstrap-colorpicker/archive/master.zip)
- Cloning the source code: `git clone https://github.com/mjolnic/bootstrap-colorpicker.git`
- Installing via Bower: `bower install mjolnic-bootstrap-colorpicker`
- Installing via NPM: `npm install bootstrap-colorpicker`
- Installing via Composer: `composer require mjolnic/bootstrap-colorpicker`
## Getting started
- For using the plugin you will only need the files under the `dist` folder
- You can read the [documentation here](http://mjolnic.github.io/bootstrap-colorpicker/)
## Contributing and reporting issues
If you want to contribute to the source code or report issues and suggestions, please read the [CONTRIBUTING.md](CONTRIBUTING.md) guidelines first. Some steps are mandatory in order to accept a Pull Request.
## Credits
Originally written by [Stefan Petre](http://www.eyecon.ro/)

View file

@ -1,21 +0,0 @@
{
"name": "mjolnic-bootstrap-colorpicker",
"main": [
"dist/css/bootstrap-colorpicker.css",
"dist/js/bootstrap-colorpicker.js"
],
"dependencies": {
"jquery": ">=1.10",
"bootstrap": ">=2"
},
"ignore": [
"\\.*",
"/index.html",
"/package.json",
"/composer.json",
"/Gruntfile.js",
"/.travis.yml",
"/travis.sh",
"/server.js"
]
}

View file

@ -1,222 +0,0 @@
/*!
* Bootstrap Colorpicker v2.3.3
* http://mjolnic.github.io/bootstrap-colorpicker/
*
* Originally written by (c) 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0.txt
*
*/
.colorpicker-saturation {
width: 100px;
height: 100px;
background-image: url("../img/bootstrap-colorpicker/saturation.png");
cursor: crosshair;
float: left;
}
.colorpicker-saturation i {
display: block;
height: 5px;
width: 5px;
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
margin: -4px 0 0 -4px;
}
.colorpicker-saturation i b {
display: block;
height: 5px;
width: 5px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.colorpicker-hue,
.colorpicker-alpha {
width: 15px;
height: 100px;
float: left;
cursor: row-resize;
margin-left: 4px;
margin-bottom: 4px;
}
.colorpicker-hue i,
.colorpicker-alpha i {
display: block;
height: 1px;
background: #000;
border-top: 1px solid #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-top: -1px;
}
.colorpicker-hue {
background-image: url("../img/bootstrap-colorpicker/hue.png");
}
.colorpicker-alpha {
background-image: url("../img/bootstrap-colorpicker/alpha.png");
display: none;
}
.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha {
background-size: contain;
}
.colorpicker {
padding: 4px;
min-width: 130px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
z-index: 2500;
}
.colorpicker:before,
.colorpicker:after {
display: table;
content: "";
line-height: 0;
}
.colorpicker:after {
clear: both;
}
.colorpicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.colorpicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.colorpicker div {
position: relative;
}
.colorpicker.colorpicker-with-alpha {
min-width: 140px;
}
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
display: block;
}
.colorpicker-color {
height: 10px;
margin-top: 5px;
clear: both;
background-image: url("../img/bootstrap-colorpicker/alpha.png");
background-position: 0 100%;
}
.colorpicker-color div {
height: 10px;
}
.colorpicker-selectors {
display: none;
height: 10px;
margin-top: 5px;
clear: both;
}
.colorpicker-selectors i {
cursor: pointer;
float: left;
height: 10px;
width: 10px;
}
.colorpicker-selectors i + i {
margin-left: 3px;
}
.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {
display: inline-block;
cursor: pointer;
height: 16px;
vertical-align: text-top;
width: 16px;
}
.colorpicker.colorpicker-inline {
position: relative;
display: inline-block;
float: none;
z-index: auto;
}
.colorpicker.colorpicker-horizontal {
width: 110px;
min-width: 110px;
height: auto;
}
.colorpicker.colorpicker-horizontal .colorpicker-saturation {
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-color {
width: 100px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
width: 100px;
height: 15px;
float: left;
cursor: col-resize;
margin-left: 0px;
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
display: block;
height: 15px;
background: #ffffff;
position: absolute;
top: 0;
left: 0;
width: 1px;
border: none;
margin-top: 0px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue {
background-image: url("../img/bootstrap-colorpicker/hue-horizontal.png");
}
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
background-image: url("../img/bootstrap-colorpicker/alpha-horizontal.png");
}
.colorpicker.colorpicker-hidden {
display: none;
}
.colorpicker.colorpicker-visible {
display: block;
}
.colorpicker-inline.colorpicker-visible {
display: inline-block;
}
.colorpicker-right:before {
left: auto;
right: 6px;
}
.colorpicker-right:after {
left: auto;
right: 7px;
}
.colorpicker-no-arrow:before {
border-right: 0;
border-left: 0;
}
.colorpicker-no-arrow:after {
border-right: 0;
border-left: 0;
}
/*# sourceMappingURL=bootstrap-colorpicker.css.map */

File diff suppressed because one or more lines are too long

View file

@ -1,10 +0,0 @@
/*!
* Bootstrap Colorpicker v2.3.3
* http://mjolnic.github.io/bootstrap-colorpicker/
*
* Originally written by (c) 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0.txt
*
*/.colorpicker-saturation{width:100px;height:100px;background-image:url(../img/bootstrap-colorpicker/saturation.png);cursor:crosshair;float:left}.colorpicker-saturation i{display:block;height:5px;width:5px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;top:0;left:0;margin:-4px 0 0 -4px}.colorpicker-saturation i b{display:block;height:5px;width:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-alpha,.colorpicker-hue{width:15px;height:100px;float:left;cursor:row-resize;margin-left:4px;margin-bottom:4px}.colorpicker-alpha i,.colorpicker-hue i{display:block;height:1px;background:#000;border-top:1px solid #fff;position:absolute;top:0;left:0;width:100%;margin-top:-1px}.colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue.png)}.colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha.png);display:none}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{background-size:contain}.colorpicker{padding:4px;min-width:130px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;z-index:2500}.colorpicker:after,.colorpicker:before{display:table;content:"";line-height:0}.colorpicker:after{clear:both}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url(../img/bootstrap-colorpicker/alpha.png);background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-selectors{display:none;height:10px;margin-top:5px;clear:both}.colorpicker-selectors i{cursor:pointer;float:left;height:10px;width:10px}.colorpicker-selectors i+i{margin-left:3px}.colorpicker-element .add-on i,.colorpicker-element .input-group-addon i{display:inline-block;cursor:pointer;height:16px;vertical-align:text-top;width:16px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none;z-index:auto}.colorpicker.colorpicker-horizontal{width:110px;min-width:110px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{width:100px;height:15px;float:left;cursor:col-resize;margin-left:0;margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-alpha i,.colorpicker.colorpicker-horizontal .colorpicker-hue i{display:block;height:15px;background:#fff;position:absolute;top:0;left:0;width:1px;border:none;margin-top:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue-horizontal.png)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha-horizontal.png)}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}.colorpicker-right:before{left:auto;right:6px}.colorpicker-right:after{left:auto;right:7px}.colorpicker-no-arrow:before{border-right:0;border-left:0}.colorpicker-no-arrow:after{border-right:0;border-left:0}
/*# sourceMappingURL=bootstrap-colorpicker.min.css.map */

View file

@ -1 +0,0 @@
{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":";;;;;;;;AAqBA,wBACE,MAAA,MACA,OAAA,MAXA,iBAAsB,iDAatB,OAAA,UACA,MAAA,KACA,0BACE,QAAA,MACA,OAAA,IACA,MAAA,IACA,OAAA,IAAA,MAAA,KAfF,sBAAA,IACA,mBAAA,IACA,cAAA,IAeE,SAAA,SACA,IAAA,EACA,KAAA,EACA,OAAA,KAAA,EAAA,EAAA,KACA,4BACE,QAAA,MACA,OAAA,IACA,MAAA,IACA,OAAA,IAAA,MAAA,KAzBJ,sBAAA,IACA,mBAAA,IACA,cAAA,IA8BF,mBADA,iBAEE,MAAA,KACA,OAAA,MACA,MAAA,KACA,OAAA,WACA,YAAA,IACA,cAAA,IAIiB,qBADF,mBAEf,QAAA,MACA,OAAA,IACA,WAAA,KACA,WAAA,IAAA,MAAA,KACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,KACA,WAAA,KAGF,iBA1DE,iBAAsB,0CA8DxB,mBA9DE,iBAAsB,4CAgEtB,QAAA,KAKF,mBADA,iBADA,wBAGE,gBAAA,QAGF,aACE,QAAA,IACA,UAAA,MACA,WAAA,IAxEA,sBAAA,IACA,mBAAA,IACA,cAAA,IAwEA,QAAA,KAIU,mBADA,oBAEV,QAAA,MACA,QAAA,GACA,YAAA,EAGU,mBACV,MAAA,KAGU,oBACV,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,oBAAA,eACA,SAAA,SACA,IAAA,KACA,KAAA,IAGU,mBACV,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,SAAA,SACA,IAAA,KACA,KAAA,IAGW,iBACX,SAAA,SAGU,oCACV,UAAA,MAGkC,uDAClC,QAAA,MAGF,mBACE,OAAA,KACA,WAAA,IACA,MAAA,KAlIA,iBAAsB,4CAoItB,oBAAA,EAAA,KAGiB,uBACjB,OAAA,KAGF,uBACE,QAAA,KACA,OAAA,KACA,WAAA,IACA,MAAA,KAGqB,yBACrB,OAAA,QACA,MAAA,KACA,OAAA,KACA,MAAA,KAGuB,2BACvB,YAAA,IAI2B,+BADW,0CAEtC,QAAA,aACA,OAAA,QACA,OAAA,KACA,eAAA,SACA,MAAA,KAGU,gCACV,SAAA,SACA,QAAA,aACA,MAAA,KACA,QAAA,KAGU,oCACV,MAAA,MACA,UAAA,MACA,OAAA,KAGkC,4DAClC,cAAA,IAGkC,uDAClC,MAAA,MAIkC,uDADA,qDAElC,MAAA,MACA,OAAA,KACA,MAAA,KACA,OAAA,WACA,YAAA,EACA,cAAA,IAIqD,yDADF,uDAEnD,QAAA,MACA,OAAA,KACA,WAAA,KACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,IACA,OAAA,KACA,WAAA,EAGkC,qDAlNlC,iBAAsB,qDAsNY,uDAtNlC,iBAAsB,uDA0NZ,gCACV,QAAA,KAGU,iCACV,QAAA,MAGiB,wCACjB,QAAA,aAGgB,0BAChB,KAAA,KACA,MAAA,IAGgB,yBAChB,KAAA,KACA,MAAA,IAGmB,6BACnB,aAAA,EACA,YAAA,EAGmB,4BACnB,aAAA,EACA,YAAA"}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 557 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 478 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 504 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4 KiB

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,61 +0,0 @@
.container {
background: #fff;
}
h4 ~ p {
padding-left: 20px;
}
.well .markup,
.example-content .example-code {
background: #2B2B2B;
color: #BABABA;
position: relative;
padding: 15px 15px 15px;
margin: 15px 0 0 0;
border-radius: 0 0 4px 4px;
box-shadow: none;
font-size: 12px;
line-height: 1.42857143;
word-break: break-all;
word-wrap: break-word;
border: 1px solid #000;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
white-space: pre;
overflow: auto;
}
.well .markup::after {
content: "Source code";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #eee;
text-transform: uppercase;
letter-spacing: 1px;
}
.share-btn {
vertical-align: middle;
display: inline-block;
font-size: 12px;
line-height: 1.5;
}
.example-title{
font-size: 14px;
margin: 10px 0 10px 2px;
font-weight: bold;
}
.example-description{
margin: 10px 0 10px 2px;
}
.example-code{
display:none;
}
.example-content-widget{
margin-bottom: 2px;
}

View file

@ -1,23 +0,0 @@
var beautify = require('js-beautify').html;
var entityMap = {
"&": "&",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;'
};
module.exports.register = function (Handlebars, options) {
Handlebars.registerHelper('code', function (hboptions) {
var codeStr = beautify(String(hboptions.fn(this)).trim(), {
"wrap_line_length": 80,
"wrap_attributes": "auto",
"indent_scripts": "normal"
}).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
return '<div class="example-code">' + codeStr + '</div>';
});
};

View file

@ -1,254 +0,0 @@
<h2>Documentation</h2>
<hr>
<p>Call the colopicker via javascript:</p>
<pre class="well">$('.sample-selector').colorpicker({ /*options...*/ });</pre>
<h3>Options</h3>
<p>
You can set colorpicker options either as a plugin parameter or data-* attributes
</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">Type</th>
<th style="width: 100px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>format</td>
<td>string</td>
<td>false</td>
<td>If not false, forces the color format to be hex, rgb or rgba, otherwise the format is
automatically detected.
</td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>false</td>
<td>If not false, sets the color to this value.</td>
</tr>
<tr>
<td>container</td>
<td>string or jQuery Element</td>
<td>false</td>
<td>If not false, the picker will be contained inside this element, otherwise it will be
appended to the document body.
</td>
</tr>
<tr>
<td>component</td>
<td>string or jQuery Element</td>
<td>'.add-on, .input-group-addon'</td>
<td>Children selector for the component or element that trigger the colorpicker and which
background color will change (needs an inner &lt;i&gt; element).
</td>
</tr>
<tr>
<td>input</td>
<td>string or jQuery Element</td>
<td>'input'</td>
<td>Children selector for the input that will store the picker selected value.</td>
</tr>
<tr>
<td>horizontal</td>
<td>boolean</td>
<td>false</td>
<td>If true, the hue and alpha channel bars will be rendered horizontally, above the saturation
selector.
</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>If true, forces to show the colorpicker as an inline element.</td>
</tr>
<tr>
<td>sliders</td>
<td>object</td>
<td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
<td>Vertical sliders configuration (read source code if you really need to tweak this).</td>
</tr>
<tr>
<td>slidersHorz</td>
<td>object</td>
<td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
<td>Horizontal sliders configuration (read source code if you really need to tweak this).</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
<td>Customizes the default colorpicker HTML template.</td>
</tr>
<tr>
<td>align</td>
<td>string</td>
<td>'right'</td>
<td>By default, the colorpicker is aligned to the right of the input. If you need to switch it
to the left, set align to 'left'.
</td>
</tr>
<tr>
<td>customClass</td>
<td>string</td>
<td>null</td>
<td>Adds this class to the colorpicker widget.</td>
</tr>
<tr>
<td>colorSelectors</td>
<td>object</td>
<td>null</td>
<td>List of pre selected colors (hex format). If you choose one of these colors, the alias is returned instead of the hex
code.
</td>
</tr>
</tbody>
</table>
<h3>jQuery API Methods</h3>
<p>General usage methods</p>
<h4>.colorpicker(options)</h4>
<p>Initializes an colorpicker.</p>
<h4>.colorpicker('getValue', defaultValue)</h4>
<p>Gets the value from the input or the data attribute (if has no input), otherwise returns the default
value, which defaults to #000000 if not specified.</p>
<h4>.colorpicker('setValue', value)</h4>
<p>Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.</p>
<h4>.colorpicker('show')</h4>
<p>Show the color picker</p>
<h4>.colorpicker('hide')</h4>
<p>Hide the color picker</p>
<h4>.colorpicker('reposition')</h4>
<p>Updates the color picker's position relative to the element</p>
<h4>.colorpicker('update')</h4>
<p>Refreshes the widget colors (this is done automatically)</p>
<h4>.colorpicker('enable')</h4>
<p>Enable the color picker.</p>
<h4>.colorpicker('disable')</h4>
<p>Disable the color picker.</p>
<h4>.colorpicker('destroy')</h4>
<p>Destroys the colorpicker widget and unbind all .colorpicker events from the element and component</p>
<h4>.data('colorpicker')</h4>
<p>Access to the colorpicker API directly</p>
<h4>.data('colorpicker').color</h4>
<p>Access to the colorpicker Color object information</p>
<hr>
<h3>Color object methods</h3>
<p>Each triggered events have a color object (avaliable through event.color, see the example at the
bottom) used internally by the picker. This object has several useful methods. These are the more
commonly used:</p>
<h4>.setColor(value)</h4>
<p>Set a new color. The value is parsed and tries to do a quess on the format.</p>
<h4>.setHue(value)</h4>
<p>Set the HUE with a value between 0 and 1.</p>
<h4>.setSaturation(value)</h4>
<p>Set the saturation with a value between 0 and 1.</p>
<h4>.setBrightness(value)</h4>
<p>Set the brightness with a value between 0 and 1.</p>
<h4>.setAlpha(value)</h4>
<p>Set the transparency with a value between 0 and 1.</p>
<h4>.toRGB()</h4>
<p>Returns a hash with red, green, blue and alpha.</p>
<h4>.toHex()</h4>
<p>Returns a string with HEX format for the current color.</p>
<h4>.toHSL()</h4>
<p>Returns a hash with HSLA values.</p>
<hr>
<h3>Events</h3>
<p>The colorpicker plugin exposes some events</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>create</td>
<td>This event fires immediately when the color picker is created.</td>
</tr>
<tr>
<td>showPicker</td>
<td>This event fires immediately when the color picker is displayed.</td>
</tr>
<tr>
<td>hidePicker</td>
<td>This event is fired immediately when the color picker is hidden.</td>
</tr>
<tr>
<td>changeColor</td>
<td>This event is fired when the color is changed.</td>
</tr>
<tr>
<td>disable</td>
<td>This event is fired immediately when the color picker is disabled, except if it was
initialized as disabled.
</td>
</tr>
<tr>
<td>enable</td>
<td>This event is fired immediately when the color picker is enabled, except upon
initialization.
</td>
</tr>
<tr>
<td>destroy</td>
<td>This event fires immediately when the color picker is destroyed.</td>
</tr>
</tbody>
</table>

View file

@ -1,13 +0,0 @@
<div class="example">
<div class="example-title">{{title}}</div>
{{#if description}}<div class="example-description">{{description}}</div>{{/if}}
<div class="example-content well">
<div class="example-content-widget">
{{> (lookup . 'content') }}
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
{{#code}}
{{> (lookup . 'content') }}
{{/code}}
</div>
</div>

View file

@ -1,23 +0,0 @@
<h2>Examples</h2>
<hr>
{{> example title="Simple input field" content="01_basic" }}
{{> example title="As a component" content="02_component" }}
{{> example title="With custom options" description="Sample overriding the initial color and format" content="03_component_options" }}
{{> example title="Working with events" content="04_events" }}
{{> example title="Transparent color support" content="05_transparent" }}
{{> example title="Horizontal mode" content="06_horizontal" }}
{{> example title="Inline mode" content="07_inline" }}
{{> example title="Aliased color palette" content="08_palette" }}
{{> example title="Customized widget size" description="Also showing the support of HTML color names" content="09_size" }}
{{> example title="Disabled / enabled status" content="10_disabled" }}
{{> example title="Inside a modal" content="11_modal" }}
<script>
$(function () {
$('.example-code-toggle').on('click', function () {
$(this).parent().find('.example-code').toggle();
});
});
</script>

View file

@ -1,6 +0,0 @@
<input id="cp1" type="text" class="form-control" value="#5367ce"/>
<script>
$(function () {
$('#cp1').colorpicker();
});
</script>

View file

@ -1,9 +0,0 @@
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker();
});
</script>

View file

@ -1,12 +0,0 @@
<div id="cp3" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp3').colorpicker({
color: '#AA3399',
format: 'rgba'
});
});
</script>

View file

@ -1,8 +0,0 @@
<a href="#" class="btn btn-default" id="cp4">Change background color</a>
<script>
$(function () {
$('#cp4').colorpicker().on('changeColor', function (e) {
$('body')[0].style.backgroundColor = e.color.toHex();
});
});
</script>

View file

@ -1,9 +0,0 @@
<input type="text" class="form-control" id="cp5"/>
<script>
$(function () {
$('#cp5').colorpicker({
color: "transparent",
format: "hex"
});
});
</script>

View file

@ -1,9 +0,0 @@
<input type="text" class="form-control" id="cp6" />
<script>
$(function () {
$('#cp6').colorpicker({
color: "#88cc33",
horizontal: true
});
});
</script>

View file

@ -1,15 +0,0 @@
<div id="cp7" class="inl-bl"></div>
<style>
.inl-bl {
display: inline-block;
}
</style>
<script>
$(function () {
$('#cp7').colorpicker({
color:'#ffaa00',
container: true,
inline:true
});
});
</script>

View file

@ -1,15 +0,0 @@
<input type="text" data-format="hex" class="form-control" id="cp8" value="primary"/>
<script>
$(function () {
$('#cp8').colorpicker({
colorSelectors: {
'default': '#777777',
'primary': '#337ab7',
'success': '#5cb85c',
'info': '#5bc0de',
'warning': '#f0ad4e',
'danger': '#d9534f'
}
});
});
</script>

View file

@ -1,37 +0,0 @@
<input id="cp9" type="text" class="form-control" value="pink"/>
<style>
.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
height: 30px;
}
</style>
<script>
$(function () {
$('#cp9').colorpicker({
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});
});
</script>

View file

@ -1,23 +0,0 @@
<div id="cp10" class="input-group colorpicker-component">
<input disabled type="text" value="" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<br>
<p>
<a class="btn btn-sm btn-default enable-button" href="#">Enable</a>
<a class="btn btn-sm btn-default disable-button" href="#">Disable</a>
</p>
<script>
$(function () {
$(".disable-button").click(function(e) {
e.preventDefault();
$("#cp10").colorpicker('disable');
});
$(".enable-button").click(function(e) {
e.preventDefault();
$("#cp10").colorpicker('enable');
});
$('#cp10').colorpicker();
});
</script>

View file

@ -1,20 +0,0 @@
<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal">
Show modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="cp11" class="input-group colorpicker-component">
<input type="text" value="" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#cp11').colorpicker();
});
</script>

View file

@ -1,43 +0,0 @@
<div class="row">
<article class="col-md-12">
<hr>
<div class="social">
<a href="https://github.com/mjolnic/bootstrap-colorpicker/" target="_blank"
class="btn btn-default btn-sm"><span class="octicon octicon-mark-github"></span> Source code</a>
<a href="https://github.com/mjolnic/bootstrap-colorpicker/archive/master.zip" target="_blank"
class="btn btn-success btn-sm"><i class="glyphicon glyphicon-download-alt"></i> Download latest</a>
<div class="share-btn share-btn-twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-related="mjolnic"
data-hashtags="bootstrap">Tweet</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="share-btn share-btn-google-plus">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="large"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<hr>
</article>
</div>

View file

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Colorpicker for Twitter Bootstrap</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet">
<link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="docs/assets/main.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
{{> body }}
</div>
</body>
</html>

View file

@ -1,24 +0,0 @@
<div class="page-header">
<h1><i class="glyphicon glyphicon-tint"></i> Bootstrap Colorpicker {{package.version}}
<small>for Twitter Bootstrap</small>
</h1>
</div>
<div class="row">
<article class="col-md-12">
<p>
{{package.description}}.
Originally written by <a
href="https://twitter.com/stefanpetre/" target="_blank">@eyecon</a> and maintained by
<a href="http://twitter.com/mjolnic/" target="_blank">@mjolnic</a> and the Github community.
</p>
</article>
</div>
{{> social }}
<div class="row">
<div class="col-md-7">
{{> api }}
</div>
<div class="col-md-5">
{{> examples }}
</div>
</div>

View file

@ -1,29 +0,0 @@
/*
Script for serving index.html and other static content with Node.
Run it using `node serve` from your terminal and navigate to http://localhost:5000
in order to test your changes in the browser.
*/
var http = require('http'), fs = require('fs'), mimeTypes = {
'html': 'text/html',
'css': 'text/css',
'js': 'text/javascript',
'json': 'application/json',
'png': 'image/png',
'jpg': 'image/jpg'
};
http.createServer(function (req, res) {
var file = (req.url === '/') ? 'index.html' : "." + req.url;
var ext = require('path').extname(file),
type = (mimeTypes[ext] ? mimeTypes[ext] : '');
fs.exists(file, function (exists) {
if (exists) {
res.writeHead(200, {'Content-Type': type});
fs.createReadStream(file).pipe(res);
} else {
console.warn(file, ' does not exit');
}
});
}).listen(5000);

View file

@ -1,531 +0,0 @@
/**
* Color manipulation helper class
*
* @param {Object|String} val
* @param {Object} predefinedColors
* @constructor
*/
var Color = function(val, predefinedColors) {
this.value = {
h: 0,
s: 0,
b: 0,
a: 1
};
this.origFormat = null; // original string format
if (predefinedColors) {
$.extend(this.colors, predefinedColors);
}
if (val) {
if (val.toLowerCase !== undefined) {
// cast to string
val = val + '';
this.setColor(val);
} else if (val.h !== undefined) {
this.value = val;
}
}
};
Color.prototype = {
constructor: Color,
// 140 predefined colors from the HTML Colors spec
colors: {
"aliceblue": "#f0f8ff",
"antiquewhite": "#faebd7",
"aqua": "#00ffff",
"aquamarine": "#7fffd4",
"azure": "#f0ffff",
"beige": "#f5f5dc",
"bisque": "#ffe4c4",
"black": "#000000",
"blanchedalmond": "#ffebcd",
"blue": "#0000ff",
"blueviolet": "#8a2be2",
"brown": "#a52a2a",
"burlywood": "#deb887",
"cadetblue": "#5f9ea0",
"chartreuse": "#7fff00",
"chocolate": "#d2691e",
"coral": "#ff7f50",
"cornflowerblue": "#6495ed",
"cornsilk": "#fff8dc",
"crimson": "#dc143c",
"cyan": "#00ffff",
"darkblue": "#00008b",
"darkcyan": "#008b8b",
"darkgoldenrod": "#b8860b",
"darkgray": "#a9a9a9",
"darkgreen": "#006400",
"darkkhaki": "#bdb76b",
"darkmagenta": "#8b008b",
"darkolivegreen": "#556b2f",
"darkorange": "#ff8c00",
"darkorchid": "#9932cc",
"darkred": "#8b0000",
"darksalmon": "#e9967a",
"darkseagreen": "#8fbc8f",
"darkslateblue": "#483d8b",
"darkslategray": "#2f4f4f",
"darkturquoise": "#00ced1",
"darkviolet": "#9400d3",
"deeppink": "#ff1493",
"deepskyblue": "#00bfff",
"dimgray": "#696969",
"dodgerblue": "#1e90ff",
"firebrick": "#b22222",
"floralwhite": "#fffaf0",
"forestgreen": "#228b22",
"fuchsia": "#ff00ff",
"gainsboro": "#dcdcdc",
"ghostwhite": "#f8f8ff",
"gold": "#ffd700",
"goldenrod": "#daa520",
"gray": "#808080",
"green": "#008000",
"greenyellow": "#adff2f",
"honeydew": "#f0fff0",
"hotpink": "#ff69b4",
"indianred": "#cd5c5c",
"indigo": "#4b0082",
"ivory": "#fffff0",
"khaki": "#f0e68c",
"lavender": "#e6e6fa",
"lavenderblush": "#fff0f5",
"lawngreen": "#7cfc00",
"lemonchiffon": "#fffacd",
"lightblue": "#add8e6",
"lightcoral": "#f08080",
"lightcyan": "#e0ffff",
"lightgoldenrodyellow": "#fafad2",
"lightgrey": "#d3d3d3",
"lightgreen": "#90ee90",
"lightpink": "#ffb6c1",
"lightsalmon": "#ffa07a",
"lightseagreen": "#20b2aa",
"lightskyblue": "#87cefa",
"lightslategray": "#778899",
"lightsteelblue": "#b0c4de",
"lightyellow": "#ffffe0",
"lime": "#00ff00",
"limegreen": "#32cd32",
"linen": "#faf0e6",
"magenta": "#ff00ff",
"maroon": "#800000",
"mediumaquamarine": "#66cdaa",
"mediumblue": "#0000cd",
"mediumorchid": "#ba55d3",
"mediumpurple": "#9370d8",
"mediumseagreen": "#3cb371",
"mediumslateblue": "#7b68ee",
"mediumspringgreen": "#00fa9a",
"mediumturquoise": "#48d1cc",
"mediumvioletred": "#c71585",
"midnightblue": "#191970",
"mintcream": "#f5fffa",
"mistyrose": "#ffe4e1",
"moccasin": "#ffe4b5",
"navajowhite": "#ffdead",
"navy": "#000080",
"oldlace": "#fdf5e6",
"olive": "#808000",
"olivedrab": "#6b8e23",
"orange": "#ffa500",
"orangered": "#ff4500",
"orchid": "#da70d6",
"palegoldenrod": "#eee8aa",
"palegreen": "#98fb98",
"paleturquoise": "#afeeee",
"palevioletred": "#d87093",
"papayawhip": "#ffefd5",
"peachpuff": "#ffdab9",
"peru": "#cd853f",
"pink": "#ffc0cb",
"plum": "#dda0dd",
"powderblue": "#b0e0e6",
"purple": "#800080",
"red": "#ff0000",
"rosybrown": "#bc8f8f",
"royalblue": "#4169e1",
"saddlebrown": "#8b4513",
"salmon": "#fa8072",
"sandybrown": "#f4a460",
"seagreen": "#2e8b57",
"seashell": "#fff5ee",
"sienna": "#a0522d",
"silver": "#c0c0c0",
"skyblue": "#87ceeb",
"slateblue": "#6a5acd",
"slategray": "#708090",
"snow": "#fffafa",
"springgreen": "#00ff7f",
"steelblue": "#4682b4",
"tan": "#d2b48c",
"teal": "#008080",
"thistle": "#d8bfd8",
"tomato": "#ff6347",
"turquoise": "#40e0d0",
"violet": "#ee82ee",
"wheat": "#f5deb3",
"white": "#ffffff",
"whitesmoke": "#f5f5f5",
"yellow": "#ffff00",
"yellowgreen": "#9acd32",
"transparent": "transparent"
},
_sanitizeNumber: function(val) {
if (typeof val === 'number') {
return val;
}
if (isNaN(val) || (val === null) || (val === '') || (val === undefined)) {
return 1;
}
if (val === '') {
return 0;
}
if (val.toLowerCase !== undefined) {
if (val.match(/^\./)) {
val = "0" + val;
}
return Math.ceil(parseFloat(val) * 100) / 100;
}
return 1;
},
isTransparent: function(strVal) {
if (!strVal) {
return false;
}
strVal = strVal.toLowerCase().trim();
return (strVal === 'transparent') || (strVal.match(/#?00000000/)) || (strVal.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/));
},
rgbaIsTransparent: function(rgba) {
return ((rgba.r === 0) && (rgba.g === 0) && (rgba.b === 0) && (rgba.a === 0));
},
//parse a string to HSB
setColor: function(strVal) {
strVal = strVal.toLowerCase().trim();
if (strVal) {
if (this.isTransparent(strVal)) {
this.value = {
h: 0,
s: 0,
b: 0,
a: 0
};
} else {
this.value = this.stringToHSB(strVal) || {
h: 0,
s: 0,
b: 0,
a: 1
}; // if parser fails, defaults to black
}
}
},
stringToHSB: function(strVal) {
strVal = strVal.toLowerCase();
var alias;
if (typeof this.colors[strVal] !== 'undefined') {
strVal = this.colors[strVal];
alias = 'alias';
}
var that = this,
result = false;
$.each(this.stringParsers, function(i, parser) {
var match = parser.re.exec(strVal),
values = match && parser.parse.apply(that, [match]),
format = alias || parser.format || 'rgba';
if (values) {
if (format.match(/hsla?/)) {
result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values));
} else {
result = that.RGBtoHSB.apply(that, values);
}
that.origFormat = format;
return false;
}
return true;
});
return result;
},
setHue: function(h) {
this.value.h = 1 - h;
},
setSaturation: function(s) {
this.value.s = s;
},
setBrightness: function(b) {
this.value.b = 1 - b;
},
setAlpha: function(a) {
this.value.a = Math.round((parseInt((1 - a) * 100, 10) / 100) * 100) / 100;
},
toRGB: function(h, s, b, a) {
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
h *= 360;
var R, G, B, X, C;
h = (h % 360) / 60;
C = b * s;
X = C * (1 - Math.abs(h % 2 - 1));
R = G = B = b - C;
h = ~~h;
R += [C, X, 0, 0, X, C][h];
G += [X, C, C, X, 0, 0][h];
B += [0, 0, X, C, C, X][h];
return {
r: Math.round(R * 255),
g: Math.round(G * 255),
b: Math.round(B * 255),
a: a || this.value.a
};
},
toHex: function(h, s, b, a) {
var rgb = this.toRGB(h, s, b, a);
if (this.rgbaIsTransparent(rgb)) {
return 'transparent';
}
return '#' + ((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
},
toHSL: function(h, s, b, a) {
h = h || this.value.h;
s = s || this.value.s;
b = b || this.value.b;
a = a || this.value.a;
var H = h,
L = (2 - s) * b,
S = s * b;
if (L > 0 && L <= 1) {
S /= L;
} else {
S /= 2 - L;
}
L /= 2;
if (S > 1) {
S = 1;
}
return {
h: isNaN(H) ? 0 : H,
s: isNaN(S) ? 0 : S,
l: isNaN(L) ? 0 : L,
a: isNaN(a) ? 0 : a
};
},
toAlias: function(r, g, b, a) {
var rgb = this.toHex(r, g, b, a);
for (var alias in this.colors) {
if (this.colors[alias] === rgb) {
return alias;
}
}
return false;
},
RGBtoHSB: function(r, g, b, a) {
r /= 255;
g /= 255;
b /= 255;
var H, S, V, C;
V = Math.max(r, g, b);
C = V - Math.min(r, g, b);
H = (C === 0 ? null :
V === r ? (g - b) / C :
V === g ? (b - r) / C + 2 :
(r - g) / C + 4
);
H = ((H + 360) % 6) * 60 / 360;
S = C === 0 ? 0 : C / V;
return {
h: this._sanitizeNumber(H),
s: S,
b: V,
a: this._sanitizeNumber(a)
};
},
HueToRGB: function(p, q, h) {
if (h < 0) {
h += 1;
} else if (h > 1) {
h -= 1;
}
if ((h * 6) < 1) {
return p + (q - p) * h * 6;
} else if ((h * 2) < 1) {
return q;
} else if ((h * 3) < 2) {
return p + (q - p) * ((2 / 3) - h) * 6;
} else {
return p;
}
},
HSLtoRGB: function(h, s, l, a) {
if (s < 0) {
s = 0;
}
var q;
if (l <= 0.5) {
q = l * (1 + s);
} else {
q = l + s - (l * s);
}
var p = 2 * l - q;
var tr = h + (1 / 3);
var tg = h;
var tb = h - (1 / 3);
var r = Math.round(this.HueToRGB(p, q, tr) * 255);
var g = Math.round(this.HueToRGB(p, q, tg) * 255);
var b = Math.round(this.HueToRGB(p, q, tb) * 255);
return [r, g, b, this._sanitizeNumber(a)];
},
toString: function(format) {
format = format || 'rgba';
var c = false;
switch (format) {
case 'rgb':
{
c = this.toRGB();
if (this.rgbaIsTransparent(c)) {
return 'transparent';
}
return 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')';
}
break;
case 'rgba':
{
c = this.toRGB();
return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
}
break;
case 'hsl':
{
c = this.toHSL();
return 'hsl(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%)';
}
break;
case 'hsla':
{
c = this.toHSL();
return 'hsla(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%,' + c.a + ')';
}
break;
case 'hex':
{
return this.toHex();
}
break;
case 'alias':
return this.toAlias() || this.toHex();
default:
{
return c;
}
break;
}
},
// a set of RE's that can match strings and generate color tuples.
// from John Resig color plugin
// https://github.com/jquery/jquery-color/
stringParsers: [{
re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/,
format: 'rgb',
parse: function(execResult) {
return [
execResult[1],
execResult[2],
execResult[3],
1
];
}
}, {
re: /rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,
format: 'rgb',
parse: function(execResult) {
return [
2.55 * execResult[1],
2.55 * execResult[2],
2.55 * execResult[3],
1
];
}
}, {
re: /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
format: 'rgba',
parse: function(execResult) {
return [
execResult[1],
execResult[2],
execResult[3],
execResult[4]
];
}
}, {
re: /rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
format: 'rgba',
parse: function(execResult) {
return [
2.55 * execResult[1],
2.55 * execResult[2],
2.55 * execResult[3],
execResult[4]
];
}
}, {
re: /hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,
format: 'hsl',
parse: function(execResult) {
return [
execResult[1] / 360,
execResult[2] / 100,
execResult[3] / 100,
execResult[4]
];
}
}, {
re: /hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
format: 'hsla',
parse: function(execResult) {
return [
execResult[1] / 360,
execResult[2] / 100,
execResult[3] / 100,
execResult[4]
];
}
}, {
re: /#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
format: 'hex',
parse: function(execResult) {
return [
parseInt(execResult[1], 16),
parseInt(execResult[2], 16),
parseInt(execResult[3], 16),
1
];
}
}, {
re: /#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
format: 'hex',
parse: function(execResult) {
return [
parseInt(execResult[1] + execResult[1], 16),
parseInt(execResult[2] + execResult[2], 16),
parseInt(execResult[3] + execResult[3], 16),
1
];
}
}],
colorNameToHex: function(name) {
if (typeof this.colors[name.toLowerCase()] !== 'undefined') {
return this.colors[name.toLowerCase()];
}
return false;
}
};

View file

@ -1,487 +0,0 @@
/**
* Colorpicker component class
*
* @param {Object|String} element
* @param {Object} options
* @constructor
*/
var Colorpicker = function(element, options) {
this.element = $(element).addClass('colorpicker-element');
this.options = $.extend(true, {}, defaults, this.element.data(), options);
this.component = this.options.component;
this.component = (this.component !== false) ? this.element.find(this.component) : false;
if (this.component && (this.component.length === 0)) {
this.component = false;
}
this.container = (this.options.container === true) ? this.element : this.options.container;
this.container = (this.container !== false) ? $(this.container) : false;
// Is the element an input? Should we search inside for any input?
this.input = this.element.is('input') ? this.element : (this.options.input ?
this.element.find(this.options.input) : false);
if (this.input && (this.input.length === 0)) {
this.input = false;
}
// Set HSB color
this.color = new Color(this.options.color !== false ? this.options.color : this.getValue(), this.options.colorSelectors);
this.format = this.options.format !== false ? this.options.format : this.color.origFormat;
if (this.options.color !== false) {
this.updateInput(this.color);
this.updateData(this.color);
}
// Setup picker
this.picker = $(this.options.template);
if (this.options.customClass) {
this.picker.addClass(this.options.customClass);
}
if (this.options.inline) {
this.picker.addClass('colorpicker-inline colorpicker-visible');
} else {
this.picker.addClass('colorpicker-hidden');
}
if (this.options.horizontal) {
this.picker.addClass('colorpicker-horizontal');
}
if (this.format === 'rgba' || this.format === 'hsla' || this.options.format === false) {
this.picker.addClass('colorpicker-with-alpha');
}
if (this.options.align === 'right') {
this.picker.addClass('colorpicker-right');
}
if (this.options.inline === true) {
this.picker.addClass('colorpicker-no-arrow');
}
if (this.options.colorSelectors) {
var colorpicker = this;
$.each(this.options.colorSelectors, function(name, color) {
var $btn = $('<i />').css('background-color', color).data('class', name);
$btn.click(function() {
colorpicker.setValue($(this).css('background-color'));
});
colorpicker.picker.find('.colorpicker-selectors').append($btn);
});
this.picker.find('.colorpicker-selectors').show();
}
this.picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this));
this.picker.appendTo(this.container ? this.container : $('body'));
// Bind events
if (this.input !== false) {
this.input.on({
'keyup.colorpicker': $.proxy(this.keyup, this)
});
this.input.on({
'change.colorpicker': $.proxy(this.change, this)
});
if (this.component === false) {
this.element.on({
'focus.colorpicker': $.proxy(this.show, this)
});
}
if (this.options.inline === false) {
this.element.on({
'focusout.colorpicker': $.proxy(this.hide, this)
});
}
}
if (this.component !== false) {
this.component.on({
'click.colorpicker': $.proxy(this.show, this)
});
}
if ((this.input === false) && (this.component === false)) {
this.element.on({
'click.colorpicker': $.proxy(this.show, this)
});
}
// for HTML5 input[type='color']
if ((this.input !== false) && (this.component !== false) && (this.input.attr('type') === 'color')) {
this.input.on({
'click.colorpicker': $.proxy(this.show, this),
'focus.colorpicker': $.proxy(this.show, this)
});
}
this.update();
$($.proxy(function() {
this.element.trigger('create');
}, this));
};
Colorpicker.Color = Color;
Colorpicker.prototype = {
constructor: Colorpicker,
destroy: function() {
this.picker.remove();
this.element.removeData('colorpicker', 'color').off('.colorpicker');
if (this.input !== false) {
this.input.off('.colorpicker');
}
if (this.component !== false) {
this.component.off('.colorpicker');
}
this.element.removeClass('colorpicker-element');
this.element.trigger({
type: 'destroy'
});
},
reposition: function() {
if (this.options.inline !== false || this.options.container) {
return false;
}
var type = this.container && this.container[0] !== document.body ? 'position' : 'offset';
var element = this.component || this.element;
var offset = element[type]();
if (this.options.align === 'right') {
offset.left -= this.picker.outerWidth() - element.outerWidth();
}
this.picker.css({
top: offset.top + element.outerHeight(),
left: offset.left
});
},
show: function(e) {
if (this.isDisabled()) {
return false;
}
this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden');
this.reposition();
$(window).on('resize.colorpicker', $.proxy(this.reposition, this));
if (e && (!this.hasInput() || this.input.attr('type') === 'color')) {
if (e.stopPropagation && e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
}
if ((this.component || !this.input) && (this.options.inline === false)) {
$(window.document).on({
'mousedown.colorpicker': $.proxy(this.hide, this)
});
}
this.element.trigger({
type: 'showPicker',
color: this.color
});
},
hide: function() {
this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible');
$(window).off('resize.colorpicker', this.reposition);
$(document).off({
'mousedown.colorpicker': this.hide
});
this.update();
this.element.trigger({
type: 'hidePicker',
color: this.color
});
},
updateData: function(val) {
val = val || this.color.toString(this.format);
this.element.data('color', val);
return val;
},
updateInput: function(val) {
val = val || this.color.toString(this.format);
if (this.input !== false) {
if (this.options.colorSelectors) {
var color = new Color(val, this.options.colorSelectors);
var alias = color.toAlias();
if (typeof this.options.colorSelectors[alias] !== 'undefined') {
val = alias;
}
}
this.input.prop('value', val);
}
return val;
},
updatePicker: function(val) {
if (val !== undefined) {
this.color = new Color(val, this.options.colorSelectors);
}
var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz;
var icns = this.picker.find('i');
if (icns.length === 0) {
return;
}
if (this.options.horizontal === false) {
sl = this.options.sliders;
icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end()
.eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a));
} else {
sl = this.options.slidersHorz;
icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end()
.eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a));
}
icns.eq(0).css({
'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop,
'left': this.color.value.s * sl.saturation.maxLeft
});
this.picker.find('.colorpicker-saturation').css('backgroundColor', this.color.toHex(this.color.value.h, 1, 1, 1));
this.picker.find('.colorpicker-alpha').css('backgroundColor', this.color.toHex());
this.picker.find('.colorpicker-color, .colorpicker-color div').css('backgroundColor', this.color.toString(this.format));
return val;
},
updateComponent: function(val) {
val = val || this.color.toString(this.format);
if (this.component !== false) {
var icn = this.component.find('i').eq(0);
if (icn.length > 0) {
icn.css({
'backgroundColor': val
});
} else {
this.component.css({
'backgroundColor': val
});
}
}
return val;
},
update: function(force) {
var val;
if ((this.getValue(false) !== false) || (force === true)) {
// Update input/data only if the current value is not empty
val = this.updateComponent();
this.updateInput(val);
this.updateData(val);
this.updatePicker(); // only update picker if value is not empty
}
return val;
},
setValue: function(val) { // set color manually
this.color = new Color(val, this.options.colorSelectors);
this.update(true);
this.element.trigger({
type: 'changeColor',
color: this.color,
value: val
});
},
getValue: function(defaultValue) {
defaultValue = (defaultValue === undefined) ? '#000000' : defaultValue;
var val;
if (this.hasInput()) {
val = this.input.val();
} else {
val = this.element.data('color');
}
if ((val === undefined) || (val === '') || (val === null)) {
// if not defined or empty, return default
val = defaultValue;
}
return val;
},
hasInput: function() {
return (this.input !== false);
},
isDisabled: function() {
if (this.hasInput()) {
return (this.input.prop('disabled') === true);
}
return false;
},
disable: function() {
if (this.hasInput()) {
this.input.prop('disabled', true);
this.element.trigger({
type: 'disable',
color: this.color,
value: this.getValue()
});
return true;
}
return false;
},
enable: function() {
if (this.hasInput()) {
this.input.prop('disabled', false);
this.element.trigger({
type: 'enable',
color: this.color,
value: this.getValue()
});
return true;
}
return false;
},
currentSlider: null,
mousePointer: {
left: 0,
top: 0
},
mousedown: function(e) {
if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
e.pageX = e.originalEvent.touches[0].pageX;
e.pageY = e.originalEvent.touches[0].pageY;
}
e.stopPropagation();
e.preventDefault();
var target = $(e.target);
//detect the slider and set the limits and callbacks
var zone = target.closest('div');
var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders;
if (!zone.is('.colorpicker')) {
if (zone.is('.colorpicker-saturation')) {
this.currentSlider = $.extend({}, sl.saturation);
} else if (zone.is('.colorpicker-hue')) {
this.currentSlider = $.extend({}, sl.hue);
} else if (zone.is('.colorpicker-alpha')) {
this.currentSlider = $.extend({}, sl.alpha);
} else {
return false;
}
var offset = zone.offset();
//reference to guide's style
this.currentSlider.guide = zone.find('i')[0].style;
this.currentSlider.left = e.pageX - offset.left;
this.currentSlider.top = e.pageY - offset.top;
this.mousePointer = {
left: e.pageX,
top: e.pageY
};
//trigger mousemove to move the guide to the current position
$(document).on({
'mousemove.colorpicker': $.proxy(this.mousemove, this),
'touchmove.colorpicker': $.proxy(this.mousemove, this),
'mouseup.colorpicker': $.proxy(this.mouseup, this),
'touchend.colorpicker': $.proxy(this.mouseup, this)
}).trigger('mousemove');
}
return false;
},
mousemove: function(e) {
if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
e.pageX = e.originalEvent.touches[0].pageX;
e.pageY = e.originalEvent.touches[0].pageY;
}
e.stopPropagation();
e.preventDefault();
var left = Math.max(
0,
Math.min(
this.currentSlider.maxLeft,
this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left)
)
);
var top = Math.max(
0,
Math.min(
this.currentSlider.maxTop,
this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top)
)
);
this.currentSlider.guide.left = left + 'px';
this.currentSlider.guide.top = top + 'px';
if (this.currentSlider.callLeft) {
this.color[this.currentSlider.callLeft].call(this.color, left / this.currentSlider.maxLeft);
}
if (this.currentSlider.callTop) {
this.color[this.currentSlider.callTop].call(this.color, top / this.currentSlider.maxTop);
}
// Change format dynamically
// Only occurs if user choose the dynamic format by
// setting option format to false
if (this.currentSlider.callTop === 'setAlpha' && this.options.format === false) {
// Converting from hex / rgb to rgba
if (this.color.value.a !== 1) {
this.format = 'rgba';
this.color.origFormat = 'rgba';
}
// Converting from rgba to hex
else {
this.format = 'hex';
this.color.origFormat = 'hex';
}
}
this.update(true);
this.element.trigger({
type: 'changeColor',
color: this.color
});
return false;
},
mouseup: function(e) {
e.stopPropagation();
e.preventDefault();
$(document).off({
'mousemove.colorpicker': this.mousemove,
'touchmove.colorpicker': this.mousemove,
'mouseup.colorpicker': this.mouseup,
'touchend.colorpicker': this.mouseup
});
return false;
},
change: function(e) {
this.keyup(e);
},
keyup: function(e) {
if ((e.keyCode === 38)) {
if (this.color.value.a < 1) {
this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
}
this.update(true);
} else if ((e.keyCode === 40)) {
if (this.color.value.a > 0) {
this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
}
this.update(true);
} else {
this.color = new Color(this.input.val(), this.options.colorSelectors);
// Change format dynamically
// Only occurs if user choose the dynamic format by
// setting option format to false
if (this.color.origFormat && this.options.format === false) {
this.format = this.color.origFormat;
}
if (this.getValue(false) !== false) {
this.updateData();
this.updateComponent();
this.updatePicker();
}
}
this.element.trigger({
type: 'changeColor',
color: this.color,
value: this.input.val()
});
}
};
$.colorpicker = Colorpicker;
$.fn.colorpicker = function(option) {
var pickerArgs = arguments,
rv = null;
var $returnValue = this.each(function() {
var $this = $(this),
inst = $this.data('colorpicker'),
options = ((typeof option === 'object') ? option : {});
if ((!inst) && (typeof option !== 'string')) {
$this.data('colorpicker', new Colorpicker(this, options));
} else {
if (typeof option === 'string') {
rv = inst[option].apply(inst, Array.prototype.slice.call(pickerArgs, 1));
}
}
});
if (option === 'getValue') {
return rv;
}
return $returnValue;
};
$.fn.colorpicker.constructor = Colorpicker;

View file

@ -1,62 +0,0 @@
/*
* Default plugin options
*/
var defaults = {
horizontal: false, // horizontal mode layout ?
inline: false, //forces to show the colorpicker as an inline element
color: false, //forces a color
format: false, //forces a format
input: 'input', // children input selector
container: false, // container selector
component: '.add-on, .input-group-addon', // children component selector
sliders: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setHue'
},
alpha: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setAlpha'
}
},
slidersHorz: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setHue',
callTop: false
},
alpha: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setAlpha',
callTop: false
}
},
template: '<div class="colorpicker dropdown-menu">' +
'<div class="colorpicker-saturation"><i><b></b></i></div>' +
'<div class="colorpicker-hue"><i></i></div>' +
'<div class="colorpicker-alpha"><i></i></div>' +
'<div class="colorpicker-color"><div /></div>' +
'<div class="colorpicker-selectors"></div>' +
'</div>',
align: 'right',
customClass: null,
colorSelectors: null
};

View file

@ -1,26 +0,0 @@
/*!
* Bootstrap Colorpicker v//@version
* http://mjolnic.github.io/bootstrap-colorpicker/
*
* Originally written by (c) 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0.txt
*
*/
(function(factory) {
"use strict";
if (typeof exports === 'object') {
module.exports = factory(window.jQuery);
} else if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (window.jQuery && !window.jQuery.fn.colorpicker) {
factory(window.jQuery);
}
}(function($) {
'use strict';
//@colorpicker-color
//@colorpicker-defaults
//@colorpicker-component
}));

View file

@ -1,261 +0,0 @@
/*!
* Bootstrap Colorpicker v2.3.3
* http://mjolnic.github.io/bootstrap-colorpicker/
*
* Originally written by (c) 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0.txt
*
*/
@imgPath: "../img/bootstrap-colorpicker/";
.bgImg(@imgFilename) {
background-image: url("@{imgPath}@{imgFilename}");
}
.borderRadius(@size) {
-webkit-border-radius: @size;
-moz-border-radius: @size;
border-radius: @size;
}
.colorpicker-saturation {
width: 100px;
height: 100px;
.bgImg('saturation.png');
cursor: crosshair;
float: left;
i {
display: block;
height: 5px;
width: 5px;
border: 1px solid #000;
.borderRadius(5px);
position: absolute;
top: 0;
left: 0;
margin: -4px 0 0 -4px;
b {
display: block;
height: 5px;
width: 5px;
border: 1px solid #fff;
.borderRadius(5px);
}
}
}
.colorpicker-hue,
.colorpicker-alpha {
width: 15px;
height: 100px;
float: left;
cursor: row-resize;
margin-left: 4px;
margin-bottom: 4px;
}
.colorpicker-hue i,
.colorpicker-alpha i {
display: block;
height: 1px;
background: #000;
border-top: 1px solid #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-top: -1px;
}
.colorpicker-hue {
.bgImg('hue.png');
}
.colorpicker-alpha {
.bgImg('alpha.png');
display: none;
}
.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha {
background-size: contain;
}
.colorpicker {
padding: 4px;
min-width: 130px;
margin-top: 1px;
.borderRadius(4px);
z-index: 2500;
}
.colorpicker:before,
.colorpicker:after {
display: table;
content: "";
line-height: 0;
}
.colorpicker:after {
clear: both;
}
.colorpicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.colorpicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.colorpicker div {
position: relative;
}
.colorpicker.colorpicker-with-alpha {
min-width: 140px;
}
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
display: block;
}
.colorpicker-color {
height: 10px;
margin-top: 5px;
clear: both;
.bgImg('alpha.png');
background-position: 0 100%;
}
.colorpicker-color div {
height: 10px;
}
.colorpicker-selectors {
display: none;
height: 10px;
margin-top: 5px;
clear: both;
}
.colorpicker-selectors i {
cursor: pointer;
float: left;
height: 10px;
width: 10px;
}
.colorpicker-selectors i + i {
margin-left: 3px;
}
.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {
display: inline-block;
cursor: pointer;
height: 16px;
vertical-align: text-top;
width: 16px;
}
.colorpicker.colorpicker-inline {
position: relative;
display: inline-block;
float: none;
z-index: auto;
}
.colorpicker.colorpicker-horizontal {
width: 110px;
min-width: 110px;
height: auto;
}
.colorpicker.colorpicker-horizontal .colorpicker-saturation {
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-color {
width: 100px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
width: 100px;
height: 15px;
float: left;
cursor: col-resize;
margin-left: 0px;
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
display: block;
height: 15px;
background: #ffffff;
position: absolute;
top: 0;
left: 0;
width: 1px;
border: none;
margin-top: 0px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue {
.bgImg('hue-horizontal.png');
}
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
.bgImg('alpha-horizontal.png');
}
.colorpicker.colorpicker-hidden {
display: none;
}
.colorpicker.colorpicker-visible {
display: block;
}
.colorpicker-inline.colorpicker-visible {
display: inline-block;
}
.colorpicker-right:before {
left: auto;
right: 6px;
}
.colorpicker-right:after {
left: auto;
right: 7px;
}
.colorpicker-no-arrow:before {
border-right: 0;
border-left: 0;
}
.colorpicker-no-arrow:after {
border-right: 0;
border-left: 0;
}