├── img ├── glyphicons-halflings.png ├── bootstrap-colorpicker │ ├── hue.png │ ├── alpha.png │ └── saturation.png └── glyphicons-halflings-white.png ├── README.md ├── js ├── google-code-prettify │ ├── prettify.css │ └── prettify.js ├── app.js ├── bootstrap-colorpicker.js ├── bootstrap.min.js └── bootstrap.js ├── css ├── bootstrap-colorpicker.css ├── bootstrap-responsive.min.css └── bootstrap-responsive.css ├── less └── bootstrap-colorpicker.less └── index.html /img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cviebrock/bootstrap-colorpicker/master/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /img/bootstrap-colorpicker/hue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cviebrock/bootstrap-colorpicker/master/img/bootstrap-colorpicker/hue.png -------------------------------------------------------------------------------- /img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cviebrock/bootstrap-colorpicker/master/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /img/bootstrap-colorpicker/alpha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cviebrock/bootstrap-colorpicker/master/img/bootstrap-colorpicker/alpha.png -------------------------------------------------------------------------------- /img/bootstrap-colorpicker/saturation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cviebrock/bootstrap-colorpicker/master/img/bootstrap-colorpicker/saturation.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Colorpicker plugin for Twitter Bootstrap 2 | 3 | Originally written by [Stefan Petre](http://www.eyecon.ro/) 4 | 5 | Read the documentation [here](http://xaguilars.github.com/bootstrap-colorpicker/) -------------------------------------------------------------------------------- /js/google-code-prettify/prettify.css: -------------------------------------------------------------------------------- 1 | .com { color: #93a1a1; } 2 | .lit { color: #195f91; } 3 | .pun, .opn, .clo { color: #93a1a1; } 4 | .fun { color: #dc322f; } 5 | .str, .atv { color: #D14; } 6 | .kwd, .linenums .tag { color: #1e347b; } 7 | .typ, .atn, .dec, .var { color: teal; } 8 | .pln { color: #48484c; } 9 | 10 | .prettyprint { 11 | padding: 8px; 12 | background-color: #f7f7f9; 13 | border: 1px solid #e1e1e8; 14 | } 15 | .prettyprint.linenums { 16 | -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 17 | -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 18 | box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 19 | } 20 | 21 | /* Specify class=linenums on a pre to get line numbering */ 22 | ol.linenums { 23 | margin: 0 0 0 33px; /* IE indents via margin-left */ 24 | } 25 | ol.linenums li { 26 | padding-left: 12px; 27 | color: #bebec5; 28 | line-height: 18px; 29 | text-shadow: 0 1px 0 #fff; 30 | } -------------------------------------------------------------------------------- /css/bootstrap-colorpicker.css: -------------------------------------------------------------------------------- 1 | /* 2 | Colorpicker for Bootstrap 3 | Copyright 2012 Stefan Petre 4 | Licensed under the Apache License v2.0 5 | http://www.apache.org/licenses/LICENSE-2.0 6 | */ 7 | .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 { *zoom: 1; top: 0; left: 0; padding: 4px; min-width: 120px; margin-top: 1px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .colorpicker:before, .colorpicker:after { display: table; content: ""; } .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.alpha { min-width: 140px; } .colorpicker.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; } .input-append.color .add-on i, .input-prepend.color .add-on i { display: block; cursor: pointer; width: 16px; height: 16px; } -------------------------------------------------------------------------------- /less/bootstrap-colorpicker.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Colorpicker for Bootstrap 3 | * 4 | * Copyright 2012 Stefan Petre 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | */ 9 | 10 | @colorPickerSaturationImage: '../img/bootstrap-colorpicker/saturation.png'; 11 | @colorPickerHueImage: '../img/bootstrap-colorpicker/hue.png'; 12 | @colorPickerAlphaImage: '../img/bootstrap-colorpicker/alpha.png'; 13 | 14 | .colorpicker-saturation { 15 | width: 100px; 16 | height: 100px; 17 | background-image: url('@{colorPickerSaturationImage}'); 18 | cursor: crosshair; 19 | float: left; 20 | i { 21 | display: block; 22 | height: 5px; 23 | width: 5px; 24 | border: 1px solid #000; 25 | .border-radius(5px); 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | margin: -4px 0 0 -4px; 30 | b{ 31 | display: block; 32 | height: 5px; 33 | width: 5px; 34 | border: 1px solid #fff; 35 | .border-radius(5px); 36 | } 37 | } 38 | } 39 | .colorpicker-hue, 40 | .colorpicker-alpha { 41 | width: 15px; 42 | height: 100px; 43 | float: left; 44 | cursor: row-resize; 45 | margin-left: 4px; 46 | margin-bottom: 4px; 47 | i { 48 | display: block; 49 | height: 1px; 50 | background: #000; 51 | border-top: 1px solid #fff; 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | width: 100%; 56 | margin-top: -1px; 57 | } 58 | } 59 | .colorpicker-hue { 60 | background-image: url('@{colorPickerHueImage}'); 61 | } 62 | .colorpicker-alpha { 63 | background-image: url('@{colorPickerAlphaImage}'); 64 | display:none; 65 | } 66 | .colorpicker { 67 | .clearfix(); 68 | top: 0; 69 | left: 0; 70 | padding: 4px; 71 | min-width: 120px; 72 | margin-top: 1px; 73 | .border-radius(4px); 74 | &:before { 75 | content: ''; 76 | display: inline-block; 77 | border-left: 7px solid transparent; 78 | border-right: 7px solid transparent; 79 | border-bottom: 7px solid #ccc; 80 | border-bottom-color: rgba(0,0,0,.2); 81 | position: absolute; 82 | top: -7px; 83 | left: 6px; 84 | } 85 | &:after { 86 | content: ''; 87 | display: inline-block; 88 | border-left: 6px solid transparent; 89 | border-right: 6px solid transparent; 90 | border-bottom: 6px solid @white; 91 | position: absolute; 92 | top: -6px; 93 | left: 7px; 94 | } 95 | div { 96 | position: relative; 97 | } 98 | &.alpha { 99 | min-width: 140px; 100 | .colorpicker-alpha { 101 | display: block; 102 | } 103 | } 104 | } 105 | .colorpicker-color { 106 | height: 10px; 107 | margin-top: 5px; 108 | clear: both; 109 | background-image: url('@{colorPickerAlphaImage}'); 110 | background-position: 0 100%; 111 | div { 112 | height: 10px; 113 | } 114 | } 115 | .input-append, 116 | .input-prepend { 117 | &.color { 118 | .add-on i { 119 | display: block; 120 | cursor: pointer; 121 | width: 16px; 122 | height: 16px; 123 | } 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * index.html scripts 4 | * 5 | */ 6 | !function(root, $) { 7 | /** 8 | * Fetch latest commits from Github API and cache them 9 | * @link https://gist.github.com/4520294 10 | * 11 | */ 12 | root["ghcommits"] = { 13 | "repo_name": "xaguilars/bootstrap-colorpicker", 14 | "cache_enabled": true, //cache api responses? 15 | "cache_ttl": (2 * 60 * 60), // 2h (in seconds) 16 | "onload": {}, 17 | "callback": function() { 18 | }, 19 | "load": function(count, onload) { 20 | var $self = this; 21 | count = count || 10; 22 | $self.onload = onload || function() { 23 | }; 24 | 25 | if ($self.cache_enabled && root["localStorage"]) { 26 | var cache_key = "repo_commits"; 27 | var expiration = localStorage.getItem(cache_key + "_expiration"); 28 | if (expiration && (expiration < +new Date())) { 29 | localStorage.removeItem(cache_key); 30 | localStorage.removeItem(cache_key + "_expiration"); 31 | expiration = false; 32 | } 33 | var commits = localStorage.getItem(cache_key); 34 | if (commits) { 35 | if (root["console"]) 36 | console.info("Commit data feched from localStorage"); 37 | $self.store(JSON.parse(commits), false); 38 | $self.onload($self.data); 39 | return; 40 | } 41 | } 42 | $self.query(count); 43 | }, 44 | "store": function(commitsJson, cache) { 45 | var $self = this; 46 | $self.data = commitsJson; 47 | if (cache && root["localStorage"]) { 48 | localStorage.setItem("repo_commits", JSON.stringify(commitsJson)); 49 | localStorage.setItem("repo_commits_expiration", +new Date() + 1000 * $self.cache_ttl); 50 | } 51 | }, 52 | "query": function(count) { 53 | var $self = this; 54 | var query_url = 'https://api.github.com/repos/' + $self.repo_name + '/commits?per_page=' + count; 55 | console.info("Fetching commit data from " + query_url); 56 | $.ajax({'dataType': "jsonp", 'url': query_url, 'jsonpCallback': 'ghcommits._jsonpcb'}); 57 | }, 58 | "_jsonpcb": function(jsonpresp) { 59 | ghcommits.store(jsonpresp.data, ghcommits.cache_enabled); 60 | ghcommits.onload(ghcommits.data); 61 | } 62 | } 63 | 64 | // App 65 | $(function() { 66 | root.prettyPrint && prettyPrint() 67 | $('#cp1').colorpicker({ 68 | format: 'hex' 69 | }); 70 | $('#cp2').colorpicker(); 71 | $('#cp3').colorpicker(); 72 | var bodyStyle = $('body')[0].style; 73 | $('#cp4').colorpicker().on('changeColor', function(ev) { 74 | bodyStyle.backgroundColor = ev.color.toHex(); 75 | }); 76 | 77 | try { 78 | // load latest commits under a try to not paralize the app 79 | ghcommits.load(10, function(data) { 80 | if (data && (data.length > 0)) { 81 | $(data).each(function(i, item) { 82 | $("#changelog ul").append($('
52 | Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon
53 | and maintained in Github by @xaguilars and the community
54 |
Adds a color picker to a field or any other element.
55 |
Attached to a field with hex format specified via options.
73 |Attachet to a field with the rgba format specified via data tag.
77 |As component.
81 |Using events to work with the color.
88 |Call the colopicker via javascript:
94 |$('.colorpicker').colorpicker()
95 | | Name | 100 |type | 101 |default | 102 |description | 103 |
|---|---|---|---|
| format | 108 |string | 109 |'hex' | 110 |the color format - hex | rgb | rgba. | 111 |
Format a component.
117 |118 | <div class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb"> 119 | <input type="text" class="span2" value="" > 120 | <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span></div> 121 |122 |
Initializes an colorpicker.
125 |Show the color picker
127 |Hide the color picker
129 |Updates the color picker's position relative to the element
131 |Set a new value for the color picker. Triggers 'changeColor' event.
133 |Each triggered events have a color object used internally by the picker. This object has several usefull methods.
135 |Set a new color. The value is parsed and tries to do a quess on the format.
137 |Set the HUE with a value between 0 and 1.
139 |Set the saturation with a value between 0 and 1.
141 |Set the lightness with a value between 0 and 1.
143 |Set the transparency with a value between 0 and 1.
145 |Returns a hash with red, green, blue and alpha.
147 |Returns a string with HEX format for the current color.
149 |Returns a hash with HSLA values.
151 | 152 |Colopicker class exposes a few events for manipulating the colors.
154 || Event | 158 |Description | 159 |
|---|---|
| show | 164 |This event fires immediately when the color picker is displayed. | 165 |
| hide | 168 |This event is fired immediately when the color picker is hidden. | 169 |
| changeColor | 172 |This event is fired when the color is changed. | 173 |
177 | $('.colorpicker').colorpicker().on('changeColor', function(ev){
178 | bodyStyle.backgroundColor = ev.color.toHex();
179 | });
180 |
181 |