Initial Release of the calendar plugin

This commit is contained in:
Tobias Hößl 2012-06-03 18:19:28 +00:00
parent 45cc9885fc
commit 7115197a33
561 changed files with 189494 additions and 0 deletions

90
dav/colorpicker/README.md Normal file
View file

@ -0,0 +1,90 @@
## Really Simple Color Picker
This is a very minimal, yet robust Color Picker based on jQuery.
For more details check the introductory blog post - http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/
### Usage
You can either clone [this repo](https://github.com/laktek/really-simple-color-picker) or download the latest build as a zip from here - http://github.com/laktek/really-simple-color-picker/zipball/master
Color Picker requires jQuery 1.2.6 or higher. Make sure to load it before Color Picker (there's no other dependencies!).
For default styles of the color picker load the CSS file that comes with the plugin.
```html
<script language="javascript" type="text/javascript" src=jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.colorPicker.min.js"/></script>
<link rel="stylesheet" href="colorPicker.css" type="text/css" />
```
Add a text field to take the color input.
```html
<div><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
```
Then call 'colorPicker' method on the text field when document loads.
```html
<script language="javascript">
jQuery(document).ready(function($) {
$('#color1').colorPicker();
}
</script>
```
### Options
There are several options you can set at the time of binding.
**Selected color**
Color Picker will use the value of the input field, which the picker is attached to as the selected color. If not, it will use the color passed with `pickerDefault` property.
```javascript
$('#color1').colorPicker({pickerDefault: "ffffff"});
```
**Color Palette**
Overrides the default color palette by passing an array of color values.
```javascript
$('#color1').colorPicker({colors: ["333333", "111111"]});
```
**Transparency**
Enable transparency value as an option.
```javascript
$('#color1').colorPicker({transparency: true});
```
If you want to set an option gloablly (to apply for all color pickers), use:
```javascript
$.fn.colorPicker.defaults.colors = ['151337', '111111']
```
### Demo
Demo can be found at http://laktek.github.com/really-simple-color-picker/demo.html
### Real-world Examples
* [CurdBee](http://demo.curdbee.com/settings/branding)
* [Readability](https://www.readability.com/publishers/tools)
Let us know how you are using Really Simple Color Picker...
### Contributors
* Lakshan Perera - http://laktek.com
* Daniel Lacy - http://daniellacy.com
### Issues & Suggestions
Please report any bugs or feature requests here:
https://github.com/laktek/really-simple-color-picker/issues

BIN
dav/colorpicker/arrow.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 B

BIN
dav/colorpicker/arrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View file

@ -0,0 +1,30 @@
div.colorPicker-picker {
height: 16px;
width: 16px;
padding: 0 !important;
border: 1px solid #ccc;
background: url(arrow.gif) no-repeat top right;
cursor: pointer;
line-height: 16px;
}
div.colorPicker-palette {
width: 110px;
position: absolute;
border: 1px solid #598FEF;
background-color: #EFEFEF;
padding: 2px;
}
div.colorPicker_hexWrap {width: 100%; float:left }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
div.colorPicker-swatch {
height: 12px;
width: 12px;
border: 1px solid #000;
margin: 2px;
float: left;
cursor: pointer;
line-height: 12px;
}

93
dav/colorpicker/demo.html Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Really Simple Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.colorPicker.min.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
//use this method to add new colors to pallete
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
$('#color1').colorPicker();
$('#color2').colorPicker();
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true});
//fires an event when the color is changed
//$('#color1').change(function(){
//alert("color changed");
//});
$("#button1").click(function(){
$("#color1").val("#ffffff");
$("#color1").change();
});
$("#button2").click(function(){
$("#color2").val("#000000");
$("#color2").change();
});
});
</script>
<style type="text/css">
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
div.form-container div.controlset label,
div.form-container div.controlset input,
div.form-container div.controlset div { display: inline; float: left; }
div.form-container div.controlset label { width: 100px;}
</style>
<link rel="stylesheet" href="colorPicker.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h2>Really Simple Color Picker (jQuery)</h2>
<p>More information about this can be found in <a href="http://www.laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
<div class="form-container">
<form action="#" method="post">
<fieldset>
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
<div class="controlset"><label for="color3">Color 3 (customized with options)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
</fieldset>
<div class="buttonrow">
<div><button type="button" id="button1">Set Color 1 to #FFF</button></div>
<div><button type="button" id="button2">Set Color 2 to #000</button></div>
</div>
</form>
</div>
</body>
</html>

View file

@ -0,0 +1,307 @@
/**
* Really Simple Color Picker in jQuery
*
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
*
* Copyright (c) 2008 Lakshan Perera (www.laktek.com)
* Daniel Lacy (daniellacy.com)
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
(function ($) {
/**
* Create a couple private variables.
**/
var selectorOwner,
activePalette,
cItterate = 0,
templates = {
control : $('<div class="colorPicker-picker">&nbsp;</div>'),
palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
swatch : $('<div class="colorPicker-swatch">&nbsp;</div>'),
hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
hexField: $('<input type="text" id="colorPicker_hex" />')
},
transparent = "transparent",
lastColor;
/**
* Create our colorPicker function
**/
$.fn.colorPicker = function (options) {
return this.each(function () {
// Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
var element = $(this),
opts = $.extend({}, $.fn.colorPicker.defaults, options),
defaultColor = $.fn.colorPicker.toHex(
(element.val().length > 0) ? element.val() : opts.pickerDefault
),
newControl = templates.control.clone(),
newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
newHexLabel = templates.hexLabel.clone(),
newHexField = templates.hexField.clone(),
paletteId = newPalette[0].id,
swatch;
/**
* Build a color palette.
**/
$.each(opts.colors, function (i) {
swatch = templates.swatch.clone();
if (opts.colors[i] === transparent) {
swatch.addClass(transparent).text('X');
$.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
} else {
swatch.css("background-color", "#" + this);
$.fn.colorPicker.bindPalette(newHexField, swatch);
}
swatch.appendTo(newPalette);
});
newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
newHexField.attr({
'id' : 'colorPicker_hex-' + cItterate,
'value' : defaultColor
});
newHexField.bind("keydown", function (event) {
if (event.keyCode === 13) {
$.fn.colorPicker.changeColor($.fn.colorPicker.toHex($(this).val()));
}
if (event.keyCode === 27) {
$.fn.colorPicker.hidePalette(paletteId);
}
});
$('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
newPalette.find('.colorPicker_hexWrap').append(newHexField);
$("body").append(newPalette);
newPalette.hide();
/**
* Build replacement interface for original color input.
**/
newControl.css("background-color", defaultColor);
newControl.bind("click", function () {
$.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
});
element.after(newControl);
element.bind("change", function () {
element.next(".colorPicker-picker").css(
"background-color", $.fn.colorPicker.toHex($(this).val())
);
});
// Hide the original input.
element.val(defaultColor).hide();
cItterate++;
});
};
/**
* Extend colorPicker with... all our functionality.
**/
$.extend(true, $.fn.colorPicker, {
/**
* Return a Hex color, convert an RGB value and return Hex, or return false.
*
* Inspired by http://code.google.com/p/jquery-color-utils
**/
toHex : function (color) {
// If we have a standard or shorthand Hex color, return that value.
if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
return (color.charAt(0) === "#") ? color : ("#" + color);
// Alternatively, check for RGB color, then convert and return it as Hex.
} else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
pad = function (str) {
if (str.length < 2) {
for (var i = 0, len = 2 - str.length; i < len; i++) {
str = '0' + str;
}
}
return str;
};
if (c.length === 3) {
var r = pad(c[0].toString(16)),
g = pad(c[1].toString(16)),
b = pad(c[2].toString(16));
return '#' + r + g + b;
}
// Otherwise we wont do anything.
} else {
return false;
}
},
/**
* Check whether user clicked on the selector or owner.
**/
checkMouse : function (event, paletteId) {
var selector = activePalette,
selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
if (event.target === $(selector)[0] || event.target === selectorOwner || selectorParent > 0) {
return;
}
$.fn.colorPicker.hidePalette();
},
/**
* Hide the color palette modal.
**/
hidePalette : function (paletteId) {
$(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
$('.colorPicker-palette').hide();
},
/**
* Show the color palette modal.
**/
showPalette : function (palette) {
var hexColor = selectorOwner.prev("input").val();
palette.css({
top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
left: selectorOwner.offset().left
});
$("#color_value").val(hexColor);
palette.show();
$(document).bind("mousedown", $.fn.colorPicker.checkMouse);
},
/**
* Toggle visibility of the colorPicker palette.
**/
togglePalette : function (palette, origin) {
// selectorOwner is the clicked .colorPicker-picker.
if (origin) {
selectorOwner = origin;
}
activePalette = palette;
if (activePalette.is(':visible')) {
$.fn.colorPicker.hidePalette();
} else {
$.fn.colorPicker.showPalette(palette);
}
},
/**
* Update the input with a newly selected color.
**/
changeColor : function (value) {
selectorOwner.css("background-color", value);
selectorOwner.prev("input").val(value).change();
$.fn.colorPicker.hidePalette();
},
/**
* Bind events to the color palette swatches.
*/
bindPalette : function (paletteInput, element, color) {
color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
element.bind({
click : function (ev) {
lastColor = color;
$.fn.colorPicker.changeColor(color);
},
mouseover : function (ev) {
lastColor = paletteInput.val();
$(this).css("border-color", "#598FEF");
paletteInput.val(color);
},
mouseout : function (ev) {
$(this).css("border-color", "#000");
paletteInput.val(selectorOwner.css("background-color"));
paletteInput.val(lastColor);
}
});
}
});
/**
* Default colorPicker options.
*
* These are publibly available for global modification using a setting such as:
*
* $.fn.colorPicker.defaults.colors = ['151337', '111111']
*
* They can also be applied on a per-bound element basis like so:
*
* $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
* $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
*
**/
$.fn.colorPicker.defaults = {
// colorPicker default selected color.
pickerDefault : "FFFFFF",
// Default color set.
colors : [
'000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
'808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
'99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
],
// If we want to simply add more colors to the default set, use addColors.
addColors : []
};
})(jQuery);

View file

@ -0,0 +1,26 @@
/**
* Really Simple Color Picker in jQuery
*
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
*
* Copyright (c) 2008 Lakshan Perera (www.laktek.com)
* Daniel Lacy (daniellacy.com)
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/(function(a){var b,c,d=0,e={control:a('<div class="colorPicker-picker">&nbsp;</div>'),palette:a('<div id="colorPicker_palette" class="colorPicker-palette" />'),swatch:a('<div class="colorPicker-swatch">&nbsp;</div>'),hexLabel:a('<label for="colorPicker_hex">Hex</label>'),hexField:a('<input type="text" id="colorPicker_hex" />')},f="transparent",g;a.fn.colorPicker=function(b){return this.each(function(){var c=a(this),g=a.extend({},a.fn.colorPicker.defaults,b),h=a.fn.colorPicker.toHex(c.val().length>0?c.val():g.pickerDefault),i=e.control.clone(),j=e.palette.clone().attr("id","colorPicker_palette-"+d),k=e.hexLabel.clone(),l=e.hexField.clone(),m=j[0].id,n;a.each(g.colors,function(b){n=e.swatch.clone(),g.colors[b]===f?(n.addClass(f).text("X"),a.fn.colorPicker.bindPalette(l,n,f)):(n.css("background-color","#"+this),a.fn.colorPicker.bindPalette(l,n)),n.appendTo(j)}),k.attr("for","colorPicker_hex-"+d),l.attr({id:"colorPicker_hex-"+d,value:h}),l.bind("keydown",function(b){b.keyCode===13&&a.fn.colorPicker.changeColor(a.fn.colorPicker.toHex(a(this).val())),b.keyCode===27&&a.fn.colorPicker.hidePalette(m)}),a('<div class="colorPicker_hexWrap" />').append(k).appendTo(j),j.find(".colorPicker_hexWrap").append(l),a("body").append(j),j.hide(),i.css("background-color",h),i.bind("click",function(){a.fn.colorPicker.togglePalette(a("#"+m),a(this))}),c.after(i),c.bind("change",function(){c.next(".colorPicker-picker").css("background-color",a.fn.colorPicker.toHex(a(this).val()))}),c.val(h).hide(),d++})},a.extend(!0,a.fn.colorPicker,{toHex:function(a){if(a.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i))return a.charAt(0)==="#"?a:"#"+a;if(!a.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/))return!1;var b=[parseInt(RegExp.$1,10),parseInt(RegExp.$2,10),parseInt(RegExp.$3,10)],c=function(a){if(a.length<2)for(var b=0,c=2-a.length;b<c;b++)a="0"+a;return a};if(b.length===3){var d=c(b[0].toString(16)),e=c(b[1].toString(16)),f=c(b[2].toString(16));return"#"+d+e+f}},checkMouse:function(d,e){var f=c,g=a(d.target).parents("#"+f.attr("id")).length;d.target===a(f)[0]||d.target===b||g>0||a.fn.colorPicker.hidePalette()},hidePalette:function(b){a(document).unbind("mousedown",a.fn.colorPicker.checkMouse),a(".colorPicker-palette").hide()},showPalette:function(c){var d=b.prev("input").val();c.css({top:b.offset().top+b.outerHeight(),left:b.offset().left}),a("#color_value").val(d),c.show(),a(document).bind("mousedown",a.fn.colorPicker.checkMouse)},togglePalette:function(d,e){e&&(b=e),c=d,c.is(":visible")?a.fn.colorPicker.hidePalette():a.fn.colorPicker.showPalette(d)},changeColor:function(c){b.css("background-color",c),b.prev("input").val(c).change(),a.fn.colorPicker.hidePalette()},bindPalette:function(c,d,e){e=e?e:a.fn.colorPicker.toHex(d.css("background-color")),d.bind({click:function(b){g=e,a.fn.colorPicker.changeColor(e)},mouseover:function(b){g=c.val(),a(this).css("border-color","#598FEF"),c.val(e)},mouseout:function(d){a(this).css("border-color","#000"),c.val(b.css("background-color")),c.val(g)}})}}),a.fn.colorPicker.defaults={pickerDefault:"FFFFFF",colors:["000000","993300","333300","000080","333399","333333","800000","FF6600","808000","008000","008080","0000FF","666699","808080","FF0000","FF9900","99CC00","339966","33CCCC","3366FF","800080","999999","FF00FF","FFCC00","FFFF00","00FF00","00FFFF","00CCFF","993366","C0C0C0","FF99CC","FFCC99","FFFF99","CCFFFF","99CCFF","FFFFFF"],addColors:[]}})(jQuery)

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB