first mockup in go

This commit is contained in:
2019-08-18 23:21:16 +02:00
parent 9ce235274f
commit 969ae63d02
5638 changed files with 579400 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
{
"name": "bootstrap-colorpicker",
"homepage": "https://github.com/itsjavi/bootstrap-colorpicker",
"version": "2.5.3",
"_release": "2.5.3",
"_resolution": {
"type": "version",
"tag": "2.5.3",
"commit": "525cd6a0aa26ae95803bbf34d231c4163136a314"
},
"_source": "https://github.com/itsjavi/bootstrap-colorpicker.git",
"_target": "^2.5.1",
"_originalSource": "bootstrap-colorpicker"
}

View File

@@ -0,0 +1,11 @@
# EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

View File

@@ -0,0 +1,47 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team members through their social media sites or at _git @ itsjavi.com_.
The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

View File

@@ -0,0 +1,42 @@
# 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
These steps are mandatory. Issues that are not clear or are not clearly reproduceable with a live example will be closed.
- Reproduce your problem in a separated environment, like in JSFiddle,
[here is a template for it](http://jsfiddle.net/0vopxm13/157/), 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`, `yarn` and `grunt` installed in your machine.
- After a fresh clone for your fork, you need to run `yarn 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 Edge.
- Any new feature should come with updated docs if applicable (a demonstration).
- Generate the `/dist` files executing `grunt` before your Pull Request.
- Push to your fork and submit the pull request.

View File

@@ -0,0 +1,51 @@
<!--
THIS TEMPLATE IS MANDATORY!!
Thank you for your contribution to bootstrap-colorpicker! Please replace {Please write here *} with your description.
Please note that issues not following this template may be potentially discarded if they are not easily reproduceable
with live examples (in case of code issues) and/or the description is not clear enough.
-->
### Brief description
{Please write here a summary of the issue}
<!--
The following sections are only mandatory for bug reports.
For feature requests and other kind of tickets, you only need to fill the first section,
optionally with additional comments and examples.
-->
### Which software are you using?
- bootstrap-colorpicker version: {Please write here}
- bootstrap version: {Please write here}
- jQuery version: {Please write here}
- Browser name and version: {Please write here}
- Operative System name an version: {Please write here}
### What's the expected or desirable behavior?
{Please write here in case of code-related issues or remove this section}
### What's the actual current behavior?
{Please write here in case of code-related issues or remove this section}
### Are there some other related issues or PRs?
{Please write here if applicable the issue numbers or remove this section}
### Steps to reproduce
{Please write here in case of code-related issues or remove this section}
<!--
Live examples are MANDATORY for code-related issues
You have a JsFiddle template here: http://jsfiddle.net/0vopxm13/157/ which is using the latest master version of the library.
-->
*Live example*: {Please write here a link to your JsFiddle example}
### Additional Comments (if any)
{Please write here}

View File

@@ -0,0 +1,38 @@
<!--
THIS TEMPLATE IS MANDATORY!!
Thank you for your contribution to bootstrap-colorpicker! Please replace {Please write here} with your description.
Please note that PRs not following this template may be potentially discarded if they are not clear enough.
-->
### Is your PR fixing an issue or introduces a new feature?
{Please write here}
### In case of fix, how this PR fixes the problem?
{Please write here only in case of fix PR or remove the section}
{Please also mention the related issue numbers you are trying to close, if applicable}
### In case of new feature, what are the benefits and use cases?
{Please write here only in case of feature PR or remove the section}
### Check list
Please mark with `x` inside the `[ ]` for anything that applies to this PR.
- [ ] All tests passed in travis-ci
- [ ] Regenerated the `dist` files via `grunt`
- [ ] All documentation examples are still working after testing them via `node serve`
- [ ] Added an example in the documentation for the newly introduced feature
- [ ] Provided an example via JsFiddle in the description of this PR
- [ ] Tested at least with latest Chrome, Firefox and Mobile (iOS Safari and/or Chrome for Android)
- [ ] This PR also introduces coding style changes (indentation, etc), in a separated commit
- [ ] The commit history is understandable and grouped into the minimum number of commits possible
- [ ] I've followed all other [`CONTRIBUTING.md`](.github/CONTRIBUTING.md#pull-requests) guidelines for Pull Requests.
### Additional Comments (if any)
{Please write here}

View File

@@ -0,0 +1,18 @@
{
"bitwise": false,
"browser": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"esnext": true,
"immed": true,
"jquery": true,
"latedef": true,
"newcap": true,
"noarg": true,
"node": true,
"strict": false,
"trailing": true,
"undef": true,
"predef" : ["define"]
}

View File

@@ -0,0 +1,21 @@
*~
.DS_Store
.DS_Store*
ehthumbs.db
Thumbs.db
*.log
/node_modules/
/bower_components/
/nbproject/
/gh-pages/
/package-lock.json
Gruntfile.js
/build
/docs
/tests
/spec
.*
/src/docs
*.psd
*.ai
composer.json

View File

@@ -0,0 +1,13 @@
language: node_js
node_js:
- "6"
- "8"
before_script:
- npm install -g grunt-cli
- curl -o- -L https://yarnpkg.com/install.sh | bash
script:
- yarn install
- grunt --verbose
# Check that files didn't change after running grunt. It should be run before pushing any code change.
- if ! git diff --name-only --quiet -- dist docs src index.html --; then echo \"Files where modified after grunt execution!!...\"; exit 1; fi

View File

@@ -0,0 +1,188 @@
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dist: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'src/less/colorpicker.less',
dest: 'dist/css/<%= pkg.name %>.css'
}
},
cssmin: {
options: {
compatibility: 'ie8',
keepSpecialComments: '*',
sourceMap: true,
advanced: false
},
dist: {
src: 'dist/css/<%= pkg.name %>.css',
dest: 'dist/css/<%= pkg.name %>.min.css'
}
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
files: [
'Gruntfile.js',
'docs/docs.js',
'dist/js/<%= pkg.name %>.js'
]
},
jsbeautifier: {
options: {
js: {
braceStyle: "collapse",
breakChainedMethods: false,
e4x: false,
evalCode: false,
indentChar: " ",
indentLevel: 0,
indentSize: 2,
indentWithTabs: false,
jslintHappy: false,
keepArrayIndentation: false,
keepFunctionIndentation: false,
maxPreserveNewlines: 2,
preserveNewlines: true,
spaceBeforeConditional: true,
spaceInParen: false,
unescapeStrings: false,
wrapLineLength: 0,
endWithNewline: true
}
},
src: ['src/js/*.js', 'docs/docs.js'],
dist: ['dist/js/<%= pkg.name %>.js']
},
combine: {
js: {
input: 'src/js/colorpicker-plugin-wrapper.js',
output: 'dist/js/<%= pkg.name %>.js',
tokens: [{
token: "//@version",
string: '<%= pkg.version %>'
}, {
token: "//@colorpicker-color",
file: 'src/js/colorpicker-color.js'
}, {
token: "//@colorpicker-defaults",
file: 'src/js/colorpicker-defaults.js'
}, {
token: "//@colorpicker-component",
file: 'src/js/colorpicker-component.js'
}]
},
less: {
input: 'src/less/colorpicker.less',
output: 'src/less/colorpicker.less',
tokens: [{
token: "//@version",
string: '<%= pkg.version %>'
}]
}
},
strip_code: {
src: {
src: 'dist/js/*.js'
}
},
uglify: {
options: {
banner: '/*!\n * Bootstrap Colorpicker v<%= pkg.version %>\n' +
' * https://itsjavi.com/bootstrap-colorpicker/\n */\n'
},
dist: {
files: {
'dist/js/<%= pkg.name %>.min.js': [
'dist/js/<%= pkg.name %>.js'
]
}
}
},
watch: {
less: {
files: [
'src/less/*.less'
],
tasks: ['combine:less', 'less', 'cssmin']
},
js: {
files: [
'src/js/*.js',
'docs/docs.js'
],
tasks: ['jsbeautifier:src', 'combine:js', 'jsbeautifier:dist', 'uglify', 'jshint']
},
handlebars: {
files: [
'docs/*.hbs',
'docs/**/*.hbs',
'docs/helpers/**/*.js'
],
tasks: ['assemble']
}
},
assemble: {
options: {
assets: 'docs/assets',
helpers: ['docs/helpers/code'],
partials: ['docs/includes/**/*.hbs'],
layout: ['docs/layout.hbs'],
data: ['package.json'],
flatten: true
},
site: {
src: ['docs/pages/*.hbs'],
dest: './'
}
},
clean: {
dist: [
'dist/css/*',
'dist/js/*',
'index_new.html'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-jsbeautifier');
grunt.loadNpmTasks('grunt-combine');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-assemble');
grunt.loadNpmTasks('grunt-strip-code');
// Register tasks
grunt.registerTask('default', [
'clean',
'combine:less',
'less',
'cssmin',
'jsbeautifier:src',
'combine:js',
'jsbeautifier:dist',
'strip_code',
'uglify',
'assemble',
'jshint'
]);
grunt.registerTask('dev', [
'watch'
]);
};

View File

@@ -0,0 +1,13 @@
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

@@ -0,0 +1,24 @@
# Bootstrap Colorpicker 2
Simple and customizable colorpicker component for Twitter Bootstrap.
[![Build Status](https://api.travis-ci.org/farbelous/bootstrap-colorpicker.svg?branch=v2.x)](https://travis-ci.org/farbelous/bootstrap-colorpicker)
## Installation
For downloading the source code, you have many choices:
- Downloading the [latest v2.x source code ZIP file](https://github.com/farbelous/bootstrap-colorpicker/archive/v2.x.zip)
- Cloning the source code: `git clone https://github.com/farbelous/bootstrap-colorpicker.git`
- Installing via NPM: `npm install bootstrap-colorpicker`
- Installing via Yarn: `yarn add bootstrap-colorpicker`
- Installing via Composer: `composer require itsjavi/bootstrap-colorpicker`
## Getting started
- For using the plugin you will only need the files under the `dist` folder
- [Documentation and demos](https://farbelous.github.io/bootstrap-colorpicker/v2/)
## Contributing and reporting issues
If you want to contribute to the source code or report issues and suggestions, please read the [CONTRIBUTING.md](.github/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

@@ -0,0 +1,15 @@
{
"name": "itsjavi/bootstrap-colorpicker",
"description": "Fancy and customizable colorpicker plugin for Twitter Bootstrap",
"license": "Apache License Version 2.0",
"authors": [
{
"name": "Javier Aguilar",
"homepage": "https://itsjavi.com"
}
],
"minimum-stability": "dev",
"require": {
"components/jquery" : ">=1.10"
}
}

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

@@ -0,0 +1 @@
{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":";;;;;;;;AAoBA,wBACE,MAAA,MACA,OAAA,MAXA,iBAAsB,g7KAatB,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,4rBA8DxB,mBA9DE,iBAAsB,wqBAgEtB,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,wqBAoItB,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,4pBAsNY,uDAtNlC,iBAAsB,owBA0NN,0BAChB,KAAA,KACA,MAAA,IAGgB,yBAChB,KAAA,KACA,MAAA,IAGmB,6BACnB,aAAA,EACA,YAAA,EAGmB,4BACnB,aAAA,EACA,YAAA,EAQC,uCAAA,qCAAA,4CAAA,2CAAA,iCACC,QAAA,MASD,sCAAA,oCAAA,2CAAA,0CAAA,gCACC,QAAA,KAIe,wCACjB,QAAA"}

Binary file not shown.

After

Width:  |  Height:  |  Size: 557 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 478 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 504 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,61 @@
.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

@@ -0,0 +1,23 @@
var beautify = require('js-beautify').html;
var entityMap = {
"&": "&amp;",
"<": "&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

@@ -0,0 +1,278 @@
<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>hexNumberSignPrefix</td>
<td>boolean</td>
<td>true</td>
<td>If true, put a '&num;' (number sign) before hex strings.
</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>
<tr>
<td>fallbackColor</td>
<td>string</td>
<td>null</td>
<td>
Fallback color string that will be applied when the color failed to be parsed.
If <var>null</var>, it will keep the current color if any.
</td>
</tr>
<tr>
<td>fallbackFormat</td>
<td>string</td>
<td>hex</td>
<td>
Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors)
</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

@@ -0,0 +1,13 @@
<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

@@ -0,0 +1,23 @@
<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

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

View File

@@ -0,0 +1,9 @@
<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

@@ -0,0 +1,12 @@
<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: 'rgb'
});
});
</script>

View File

@@ -0,0 +1,8 @@
<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.toString('rgba');
});
});
</script>

View File

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

View File

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

View File

@@ -0,0 +1,15 @@
<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

@@ -0,0 +1,21 @@
<div id="cp8" data-format="alias" class="input-group colorpicker-component">
<input type="text" value="primary" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp8').colorpicker({
colorSelectors: {
'black': '#000000',
'white': '#ffffff',
'red': '#FF0000',
'default': '#777777',
'primary': '#337ab7',
'success': '#5cb85c',
'info': '#5bc0de',
'warning': '#f0ad4e',
'danger': '#d9534f'
}
});
});
</script>

View File

@@ -0,0 +1,37 @@
<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

@@ -0,0 +1,23 @@
<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

@@ -0,0 +1,20 @@
<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

@@ -0,0 +1,20 @@
<div class="row">
<article class="col-md-12">
<hr>
<div class="social">
<a href="https://github.com/farbelous/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/farbelous/bootstrap-colorpicker/releases" target="_blank"
class="btn btn-default btn-sm">
Latest Releases
</a>
<a href="https://github.com/farbelous/bootstrap-colorpicker/archive/2.5.2.zip" target="_blank"
class="btn btn-success btn-sm"><i class="glyphicon glyphicon-download-alt"></i>
Download v2.5.2
</a>
</div>
<hr>
</article>
</div>

View File

@@ -0,0 +1,30 @@
<!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>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85082661-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-85082661-5');
</script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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-3.3.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
{{> body }}
</div>
</body>
</html>

View File

@@ -0,0 +1,29 @@
<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">Stefan Petre</a> and maintained by
<a href="https://itsjavi.com/" target="_blank">Javi Aguilar</a> and the Github community.
</p>
<p class="alert alert-warning">
<b>NOTE</b> That this is an older version of the library documentation, please check
the project <a href="https://github.com/farbelous/bootstrap-colorpicker/blob/master/README.md">README</a>
to find the documentation for the newer and latest versions.
</p>
</article>
</div>
{{> social }}
<div class="row">
<div class="col-md-7">
{{> api }}
</div>
<div class="col-md-5">
{{> examples }}
</div>
</div>

View File

@@ -0,0 +1,794 @@
<!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>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85082661-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-85082661-5');
</script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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-3.3.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1><i class="glyphicon glyphicon-tint"></i> Bootstrap Colorpicker 2.5.2
<small>for Twitter Bootstrap</small>
</h1>
</div>
<div class="row">
<article class="col-md-12">
<p>
Fancy and customizable colorpicker plugin for Twitter Bootstrap.
Originally written by <a
href="https://twitter.com/stefanpetre/" target="_blank">Stefan Petre</a> and maintained by
<a href="https://itsjavi.com/" target="_blank">Javi Aguilar</a> and the Github community.
</p>
<p class="alert alert-warning">
<b>NOTE</b> That this is an older version of the library documentation, please check
the project <a href="https://github.com/farbelous/bootstrap-colorpicker/blob/master/README.md">README</a>
to find the documentation for the newer and latest versions.
</p>
</article>
</div>
<div class="row">
<article class="col-md-12">
<hr>
<div class="social">
<a href="https://github.com/farbelous/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/farbelous/bootstrap-colorpicker/releases" target="_blank"
class="btn btn-default btn-sm">
Latest Releases
</a>
<a href="https://github.com/farbelous/bootstrap-colorpicker/archive/2.5.2.zip" target="_blank"
class="btn btn-success btn-sm"><i class="glyphicon glyphicon-download-alt"></i>
Download v2.5.2
</a>
</div>
<hr>
</article>
</div>
<div class="row">
<div class="col-md-7">
<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>hexNumberSignPrefix</td>
<td>boolean</td>
<td>true</td>
<td>If true, put a '&num;' (number sign) before hex strings.
</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>
<tr>
<td>fallbackColor</td>
<td>string</td>
<td>null</td>
<td>
Fallback color string that will be applied when the color failed to be parsed.
If <var>null</var>, it will keep the current color if any.
</td>
</tr>
<tr>
<td>fallbackFormat</td>
<td>string</td>
<td>hex</td>
<td>
Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors)
</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>
</div>
<div class="col-md-5">
<h2>Examples</h2>
<hr>
<div class="example">
<div class="example-title">Simple input field</div>
<div class="example-content well">
<div class="example-content-widget">
<input id="cp1" type="text" class="form-control" value="#5367ce"/>
<script>
$(function () {
$('#cp1').colorpicker();
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input id=&quot;cp1&quot; type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;#5367ce&quot; &#x2F;&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp1&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">As a component</div>
<div class="example-content well">
<div class="example-content-widget">
<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>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp2&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;#00AABB&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp2&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">With custom options</div>
<div class="example-description">Sample overriding the initial color and format</div>
<div class="example-content well">
<div class="example-content-widget">
<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: 'rgb'
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp3&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;#00AABB&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp3&#39;).colorpicker({
color: &#39;#AA3399&#39;,
format: &#39;rgb&#39;
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Working with events</div>
<div class="example-content well">
<div class="example-content-widget">
<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.toString('rgba');
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot; id=&quot;cp4&quot;&gt;Change background color&lt;&#x2F;a&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp4&#39;).colorpicker().on(&#39;changeColor&#39;, function(e) {
$(&#39;body&#39;)[0].style.backgroundColor = e.color.toString(
&#39;rgba&#39;);
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Transparent color support</div>
<div class="example-content well">
<div class="example-content-widget">
<input type="text" class="form-control" id="cp5"/>
<script>
$(function () {
$('#cp5').colorpicker({
color: "transparent",
format: "hex"
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;cp5&quot; &#x2F;&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp5&#39;).colorpicker({
color: &quot;transparent&quot;,
format: &quot;hex&quot;
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Horizontal mode</div>
<div class="example-content well">
<div class="example-content-widget">
<input type="text" class="form-control" id="cp6" />
<script>
$(function () {
$('#cp6').colorpicker({
color: "#88cc33",
horizontal: true
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;cp6&quot; &#x2F;&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp6&#39;).colorpicker({
color: &quot;#88cc33&quot;,
horizontal: true
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Inline mode</div>
<div class="example-content well">
<div class="example-content-widget">
<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>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp7&quot; class=&quot;inl-bl&quot;&gt;&lt;&#x2F;div&gt;
&lt;style&gt;
.inl-bl {
display: inline-block;
}
&lt;&#x2F;style&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp7&#39;).colorpicker({
color: &#39;#ffaa00&#39;,
container: true,
inline: true
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Aliased color palette</div>
<div class="example-content well">
<div class="example-content-widget">
<div id="cp8" data-format="alias" class="input-group colorpicker-component">
<input type="text" value="primary" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp8').colorpicker({
colorSelectors: {
'black': '#000000',
'white': '#ffffff',
'red': '#FF0000',
'default': '#777777',
'primary': '#337ab7',
'success': '#5cb85c',
'info': '#5bc0de',
'warning': '#f0ad4e',
'danger': '#d9534f'
}
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp8&quot; data-format=&quot;alias&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;primary&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp8&#39;).colorpicker({
colorSelectors: {
&#39;black&#39;: &#39;#000000&#39;,
&#39;white&#39;: &#39;#ffffff&#39;,
&#39;red&#39;: &#39;#FF0000&#39;,
&#39;default&#39;: &#39;#777777&#39;,
&#39;primary&#39;: &#39;#337ab7&#39;,
&#39;success&#39;: &#39;#5cb85c&#39;,
&#39;info&#39;: &#39;#5bc0de&#39;,
&#39;warning&#39;: &#39;#f0ad4e&#39;,
&#39;danger&#39;: &#39;#d9534f&#39;
}
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Customized widget size</div>
<div class="example-description">Also showing the support of HTML color names</div>
<div class="example-content well">
<div class="example-content-widget">
<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>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input id=&quot;cp9&quot; type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;pink&quot; &#x2F;&gt;
&lt;style&gt;
.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;
}
&lt;&#x2F;style&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp9&#39;).colorpicker({
customClass: &#39;colorpicker-2x&#39;,
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Disabled / enabled status</div>
<div class="example-content well">
<div class="example-content-widget">
<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>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp10&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input disabled type=&quot;text&quot; value=&quot;&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;br&gt;
&lt;p&gt;
&lt;a class=&quot;btn btn-sm btn-default enable-button&quot; href=&quot;#&quot;&gt;Enable&lt;&#x2F;a&gt;
&lt;a class=&quot;btn btn-sm btn-default disable-button&quot; href=&quot;#&quot;&gt;Disable&lt;&#x2F;a&gt;
&lt;&#x2F;p&gt;
&lt;script&gt;
$(function() {
$(&quot;.disable-button&quot;).click(function(e) {
e.preventDefault();
$(&quot;#cp10&quot;).colorpicker(&#39;disable&#39;);
});
$(&quot;.enable-button&quot;).click(function(e) {
e.preventDefault();
$(&quot;#cp10&quot;).colorpicker(&#39;enable&#39;);
});
$(&#39;#cp10&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Inside a modal</div>
<div class="example-content well">
<div class="example-content-widget">
<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>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;button class=&quot;btn btn-primary btn-md&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;
Show modal
&lt;&#x2F;button&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;div id=&quot;cp11&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp11&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<script>
$(function () {
$('.example-code-toggle').on('click', function () {
$(this).parent().find('.example-code').toggle();
});
});
</script>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,48 @@
{
"name": "bootstrap-colorpicker",
"version": "2.5.3",
"description": "Fancy and customizable colorpicker plugin for Twitter Bootstrap",
"main": "./dist/js/bootstrap-colorpicker.js",
"homepage": "https://itsjavi.com/bootstrap-colorpicker/",
"repository": {
"type": "git",
"url": "https://github.com/itsjavi/bootstrap-colorpicker.git"
},
"bugs": {
"url": "https://github.com/itsjavi/bootstrap-colorpicker/issues"
},
"keywords": [
"bootstrap",
"colorpicker"
],
"author": "Javier Aguilar",
"license": "Apache-2.0",
"licenses": [
{
"type": "Apache-2.0",
"url": "http://opensource.org/licenses/Apache-2.0"
}
],
"dependencies": {
"jquery": ">=1.10"
},
"scripts": {
"test": "jasmine"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-assemble": "~0.4.0",
"grunt-combine": "~0.8.3",
"grunt-contrib-clean": "~1.0.0",
"grunt-contrib-cssmin": "~1.0.1",
"grunt-contrib-jshint": "~1.0.0",
"grunt-contrib-less": "~1.2.0",
"grunt-contrib-uglify": "~1.0.0",
"grunt-contrib-watch": "~1.0.0",
"grunt-jsbeautifier": "~0.2.10",
"grunt-strip-code": "^1.0.6",
"jasmine": "^2.6.0",
"jquery": ">=1.10",
"jsdom": "^10.1.0"
}
}

View File

@@ -0,0 +1,31 @@
/*
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);
console.log("Your bootstrap-colorpicker development URL is http://localhost:5000");

View File

@@ -0,0 +1,11 @@
var Color = require("../../src/js/colorpicker-color.js");
it("should return color in raw format", function(){
var color = new Color('aabbcc');
expect(color.toHex(true)).toEqual("#aabbcc");
});
it("should return color formatted", function(){
var color = new Color('aabbcc');
expect(color.toHex()).toEqual("aabbcc");
});

View File

@@ -0,0 +1,11 @@
{
"spec_dir": "spec",
"spec_files": [
"**/*[sS]pec.js"
],
"helpers": [
"helpers/**/*.js"
],
"stopSpecOnExpectationFailure": false,
"random": false
}

File diff suppressed because it is too large Load Diff