Integrate jQuery miniColors extension

pull/193/head
Aleksander Machniak 11 years ago
parent c77a8497e7
commit 8a73fdb67f

@ -2,12 +2,12 @@
| |
| Author: Cor Bosman (roundcube@wa.ter.net) | Author: Cor Bosman (roundcube@wa.ter.net)
| Plugin: jqueryui | Plugin: jqueryui
| Version: 1.9.1 | Version: 1.9.2
| Purpose: Add jquery-ui to roundcube for every plugin to use | Purpose: Add jquery-ui to roundcube for every plugin to use
| |
+-------------------------------------------------------------------------+ +-------------------------------------------------------------------------+
jqueryui adds the complete jquery-ui library including the smoothness jqueryui adds the complete jquery-ui library including the smoothness
theme to roundcube. This allows other plugins to use jquery-ui without theme to roundcube. This allows other plugins to use jquery-ui without
having to load their own version. The benefit of using 1 central jquery-ui having to load their own version. The benefit of using 1 central jquery-ui
is that we wont run into problems of conflicting jquery libraries being is that we wont run into problems of conflicting jquery libraries being
@ -16,7 +16,7 @@ a requirement.
It is possible for plugin authors to override the default smoothness theme. It is possible for plugin authors to override the default smoothness theme.
To do this, go to the jquery-ui website, and use the download feature to To do this, go to the jquery-ui website, and use the download feature to
download your own theme. In the advanced settings, provide a scope class to download your own theme. In the advanced settings, provide a scope class to
your theme and add that class to all your UI elements. Finally, load the your theme and add that class to all your UI elements. Finally, load the
downloaded css files in your own plugin. downloaded css files in your own plugin.
@ -26,4 +26,6 @@ Check the config.inc.php.dist file on how to set this up for the datepicker modu
As of version 1.8.6 this plugin also supports other themes. If you're a theme As of version 1.8.6 this plugin also supports other themes. If you're a theme
developer and would like a different default theme to be used for your RC theme developer and would like a different default theme to be used for your RC theme
then let me know and we can set things up. then let me know and we can set things up.
This also provides some common UI modules e.g. miniColors extension.

@ -14,6 +14,9 @@ class jqueryui extends rcube_plugin
{ {
public $noajax = true; public $noajax = true;
private static $features = array();
private static $ui_theme;
public function init() public function init()
{ {
$version = '1.9.2'; $version = '1.9.2';
@ -25,10 +28,12 @@ class jqueryui extends rcube_plugin
$this->include_script("js/jquery-ui-$version.custom.min.js"); $this->include_script("js/jquery-ui-$version.custom.min.js");
// include UI stylesheet // include UI stylesheet
$skin = $rcmail->config->get('skin'); $skin = $rcmail->config->get('skin');
$ui_map = $rcmail->config->get('jquery_ui_skin_map', array()); $ui_map = $rcmail->config->get('jquery_ui_skin_map', array());
$ui_theme = $ui_map[$skin] ? $ui_map[$skin] : $skin; $ui_theme = $ui_map[$skin] ? $ui_map[$skin] : $skin;
self::$ui_theme = $ui_theme;
if (file_exists($this->home . "/themes/$ui_theme/jquery-ui-$version.custom.css")) { if (file_exists($this->home . "/themes/$ui_theme/jquery-ui-$version.custom.css")) {
$this->include_stylesheet("themes/$ui_theme/jquery-ui-$version.custom.css"); $this->include_stylesheet("themes/$ui_theme/jquery-ui-$version.custom.css");
} }
@ -56,6 +61,7 @@ class jqueryui extends rcube_plugin
if (count($jquery_ui_i18n) > 0) { if (count($jquery_ui_i18n) > 0) {
$lang_l = str_replace('_', '-', substr($_SESSION['language'], 0, 5)); $lang_l = str_replace('_', '-', substr($_SESSION['language'], 0, 5));
$lang_s = substr($_SESSION['language'], 0, 2); $lang_s = substr($_SESSION['language'], 0, 2);
foreach ($jquery_ui_i18n as $package) { foreach ($jquery_ui_i18n as $package) {
if (file_exists($this->home . "/js/i18n/jquery.ui.$package-$lang_l.js")) { if (file_exists($this->home . "/js/i18n/jquery.ui.$package-$lang_l.js")) {
$this->include_script("js/i18n/jquery.ui.$package-$lang_l.js"); $this->include_script("js/i18n/jquery.ui.$package-$lang_l.js");
@ -80,4 +86,53 @@ class jqueryui extends rcube_plugin
$rcmail->output->set_env('date_format', $date_format); $rcmail->output->set_env('date_format', $date_format);
} }
public static function miniColors()
{
if (in_array('miniColors', self::$features)) {
return;
}
self::$features[] = 'miniColors';
$ui_theme = self::$ui_theme;
$rcube = rcube::get_instance();
$script = 'plugins/jqueryui/js/jquery.miniColors.min.js';
$css = "plugins/jqueryui/themes/$ui_theme/jquery.miniColors.css";
if (!file_exists(INSTALL_PATH . $css)) {
$css = "plugins/jqueryui/themes/larry/jquery.miniColors.css";
}
$rcube->output->include_css($css);
$rcube->output->add_header(html::tag('script', array('type' => "text/javascript", 'src' => $script)));
$rcube->output->add_script('$("input.colors").miniColors({colorValues: rcmail.env.mscolors})', 'docready');
$rcube->output->set_env('mscolors', self::get_color_values());
}
/**
* Return a (limited) list of color values to be used for calendar and category coloring
*
* @return mixed List for colors as hex values or false if no presets should be shown
*/
public static function get_color_values()
{
// selection from http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx
return array('000000','006400','2F4F4F','800000','808000','008000',
'008080','000080','800080','4B0082','191970','8B0000','008B8B',
'00008B','8B008B','556B2F','8B4513','228B22','6B8E23','2E8B57',
'B8860B','483D8B','A0522D','0000CD','A52A2A','00CED1','696969',
'20B2AA','9400D3','B22222','C71585','3CB371','D2691E','DC143C',
'DAA520','00FA9A','4682B4','7CFC00','9932CC','FF0000','FF4500',
'FF8C00','FFA500','FFD700','FFFF00','9ACD32','32CD32','00FF00',
'00FF7F','00FFFF','5F9EA0','00BFFF','0000FF','FF00FF','808080',
'708090','CD853F','8A2BE2','778899','FF1493','48D1CC','1E90FF',
'40E0D0','4169E1','6A5ACD','BDB76B','BA55D3','CD5C5C','ADFF2F',
'66CDAA','FF6347','8FBC8B','DA70D6','BC8F8F','9370DB','DB7093',
'FF7F50','6495ED','A9A9A9','F4A460','7B68EE','D2B48C','E9967A',
'DEB887','FF69B4','FA8072','F08080','EE82EE','87CEEB','FFA07A',
'F0E68C','DDA0DD','90EE90','7FFFD4','C0C0C0','87CEFA','B0C4DE',
'98FB98','ADD8E6','B0E0E6','D8BFD8','EEE8AA','AFEEEE','D3D3D3',
'FFDEAD'
);
}
} }

@ -0,0 +1,16 @@
// http://plugins.jquery.com/project/jQueryMiniColors
jQuery&&function(d){d.extend(d.fn,{miniColors:function(j,k){var x=function(a,b){var e=l(a.val());e||(e="FFFFFF");var c=p(e),e=d('<a class="miniColors-trigger" style="background-color: #'+e+'" href="#"></a>');e.insertAfter(a);a.addClass("miniColors").attr("maxlength",7).attr("autocomplete","off");a.data("trigger",e);a.data("hsb",c);b.change&&a.data("change",b.change);b.readonly&&a.attr("readonly",true);b.disabled&&q(a);b.colorValues&&a.data("colorValues",b.colorValues);e.bind("click.miniColors",function(b){b.preventDefault();
a.trigger("focus")});a.bind("focus.miniColors",function(){w(a)});a.bind("blur.miniColors",function(){var b=l(a.val());a.val(b?"#"+b:"")});a.bind("keydown.miniColors",function(b){b.keyCode===9&&i(a)});a.bind("keyup.miniColors",function(){var b=a.val().replace(/[^A-F0-9#]/ig,"");a.val(b);r(a)||a.data("trigger").css("backgroundColor","#FFF")});a.bind("paste.miniColors",function(){setTimeout(function(){a.trigger("keyup")},5)})},q=function(a){i(a);a.attr("disabled",true);a.data("trigger").css("opacity",
0.5)},w=function(a){if(a.attr("disabled"))return false;i();var b=d('<div class="miniColors-selector"></div>');b.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>');b.append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>');b.css({top:a.is(":visible")?a.offset().top+a.outerHeight():a.data("trigger").offset().top+a.data("trigger").outerHeight(),left:a.is(":visible")?a.offset().left:a.data("trigger").offset().left,
display:"none"}).addClass(a.attr("class"));var e=a.data("colorValues");if(e&&e.length){var c,f='<div class="miniColors-presets">',g;for(g in e)c=l(e[g]),f+='<div class="miniColors-colorPreset" style="background-color:#'+c+'" rel="'+c+'"></div>';f+="</div>";b.append(f);c=Math.ceil(e.length/7)*24;b.css("width",b.width()+c+5+"px");b.find(".miniColors-presets").css("width",c+"px")}c=a.data("hsb");b.find(".miniColors-colors").css("backgroundColor","#"+n(m({h:c.h,s:100,b:100})));(f=a.data("colorPosition"))||
(f=s(c));b.find(".miniColors-colorPicker").css("top",f.y+"px").css("left",f.x+"px");(f=a.data("huePosition"))||(f=t(c));b.find(".miniColors-huePicker").css("top",f.y+"px");a.data("selector",b);a.data("huePicker",b.find(".miniColors-huePicker"));a.data("colorPicker",b.find(".miniColors-colorPicker"));a.data("mousebutton",0);d("BODY").append(b);b.fadeIn(100);b.bind("selectstart",function(){return false});d(document).bind("mousedown.miniColors",function(b){a.data("mousebutton",1);d(b.target).parents().andSelf().hasClass("miniColors-colors")&&
(b.preventDefault(),a.data("moving","colors"),u(a,b));d(b.target).parents().andSelf().hasClass("miniColors-hues")&&(b.preventDefault(),a.data("moving","hues"),v(a,b));d(b.target).parents().andSelf().hasClass("miniColors-selector")?b.preventDefault():d(b.target).parents().andSelf().hasClass("miniColors")||i(a)});d(document).bind("mouseup.miniColors",function(){a.data("mousebutton",0);a.removeData("moving")});d(document).bind("mousemove.miniColors",function(b){a.data("mousebutton")===1&&(a.data("moving")===
"colors"&&u(a,b),a.data("moving")==="hues"&&v(a,b))});e&&(b.find(".miniColors-colorPreset").click(function(){a.val(d(this).attr("rel"));r(a)}),b.find('.miniColors-presets div[rel="'+a.val().replace(/#/,"")+'"]').addClass("miniColors-colorPreset-active"))},i=function(a){a||(a=".miniColors");d(a).each(function(){var a=d(this).data("selector");d(this).removeData("selector");d(a).fadeOut(100,function(){d(this).remove()})});d(document).unbind("mousedown.miniColors");d(document).unbind("mousemove.miniColors")},
u=function(a,b){var e=a.data("colorPicker");e.hide();var c={x:b.clientX-a.data("selector").find(".miniColors-colors").offset().left+d(document).scrollLeft()-5,y:b.clientY-a.data("selector").find(".miniColors-colors").offset().top+d(document).scrollTop()-5};if(c.x<=-5)c.x=-5;if(c.x>=144)c.x=144;if(c.y<=-5)c.y=-5;if(c.y>=144)c.y=144;a.data("colorPosition",c);e.css("left",c.x).css("top",c.y).show();e=Math.round((c.x+5)*0.67);e<0&&(e=0);e>100&&(e=100);c=100-Math.round((c.y+5)*0.67);c<0&&(c=0);c>100&&
(c=100);var f=a.data("hsb");f.s=e;f.b=c;o(a,f,true)},v=function(a,b){var e=a.data("huePicker");e.hide();var c={y:b.clientY-a.data("selector").find(".miniColors-colors").offset().top+d(document).scrollTop()-1};if(c.y<=-1)c.y=-1;if(c.y>=149)c.y=149;a.data("huePosition",c);e.css("top",c.y).show();e=Math.round((150-c.y-1)*2.4);e<0&&(e=0);e>360&&(e=360);c=a.data("hsb");c.h=e;o(a,c,true)},o=function(a,b,e){a.data("hsb",b);var c=n(m(b));e&&a.val("#"+c);a.data("trigger").css("backgroundColor","#"+c);a.data("selector")&&
a.data("selector").find(".miniColors-colors").css("backgroundColor","#"+n(m({h:b.h,s:100,b:100})));a.data("change")&&a.data("change").call(a,"#"+c,m(b));a.data("colorValues")&&(a.data("selector").find(".miniColors-colorPreset-active").removeClass("miniColors-colorPreset-active"),a.data("selector").find('.miniColors-presets div[rel="'+c+'"]').addClass("miniColors-colorPreset-active"))},r=function(a){var b=l(a.val());if(!b)return false;var b=p(b),e=a.data("hsb");if(b.h===e.h&&b.s===e.s&&b.b===e.b)return true;
e=s(b);d(a.data("colorPicker")).css("top",e.y+"px").css("left",e.x+"px");e=t(b);d(a.data("huePicker")).css("top",e.y+"px");o(a,b,false);return true},s=function(a){var b=Math.ceil(a.s/0.67);b<0&&(b=0);b>150&&(b=150);a=150-Math.ceil(a.b/0.67);a<0&&(a=0);a>150&&(a=150);return{x:b-5,y:a-5}},t=function(a){a=150-a.h/2.4;a<0&&(h=0);a>150&&(h=150);return{y:a-1}},l=function(a){a=a.replace(/[^A-Fa-f0-9]/,"");a.length==3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]);return a.length===6?a:null},m=function(a){var b,e,c;
b=Math.round(a.h);var d=Math.round(a.s*255/100),a=Math.round(a.b*255/100);if(d==0)b=e=c=a;else{var d=(255-d)*a/255,g=(a-d)*(b%60)/60;b==360&&(b=0);b<60?(b=a,c=d,e=d+g):b<120?(e=a,c=d,b=a-g):b<180?(e=a,b=d,c=d+g):b<240?(c=a,b=d,e=a-g):b<300?(c=a,e=d,b=d+g):b<360?(b=a,e=d,c=a-g):c=e=b=0}return{r:Math.round(b),g:Math.round(e),b:Math.round(c)}},n=function(a){var b=[a.r.toString(16),a.g.toString(16),a.b.toString(16)];d.each(b,function(a,c){c.length==1&&(b[a]="0"+c)});return b.join("")},p=function(a){var b=
a,b=parseInt(b.indexOf("#")>-1?b.substring(1):b,16),a=b>>16,d=(b&65280)>>8;b&=255;var c={h:0,s:0,b:0},f=Math.min(a,d,b),g=Math.max(a,d,b),f=g-f;c.b=g;c.s=g!=0?255*f/g:0;c.h=c.s!=0?a==g?(d-b)/f:d==g?2+(b-a)/f:4+(a-d)/f:-1;c.h*=60;c.h<0&&(c.h+=360);c.s*=100/255;c.b*=100/255;if(c.s===0)c.h=360;return c};switch(j){case "readonly":return d(this).each(function(){d(this).attr("readonly",k)}),d(this);case "disabled":return d(this).each(function(){if(k)q(d(this));else{var a=d(this);a.attr("disabled",false);
a.data("trigger").css("opacity",1)}}),d(this);case "value":return d(this).each(function(){d(this).val(k).trigger("keyup")}),d(this);case "destroy":return d(this).each(function(){var a=d(this);i();a=d(a);a.data("trigger").remove();a.removeAttr("autocomplete");a.removeData("trigger");a.removeData("selector");a.removeData("hsb");a.removeData("huePicker");a.removeData("colorPicker");a.removeData("mousebutton");a.removeData("moving");a.unbind("click.miniColors");a.unbind("focus.miniColors");a.unbind("blur.miniColors");
a.unbind("keyup.miniColors");a.unbind("keydown.miniColors");a.unbind("paste.miniColors");d(document).unbind("mousedown.miniColors");d(document).unbind("mousemove.miniColors")}),d(this);default:return j||(j={}),d(this).each(function(){d(this)[0].tagName.toLowerCase()==="input"&&(d(this).data("trigger")||x(d(this),j,k))}),d(this)}}})}(jQuery);

@ -20,10 +20,10 @@
<email>roundcube@gmail.com</email> <email>roundcube@gmail.com</email>
<active>yes</active> <active>yes</active>
</lead> </lead>
<date>2012-11-07</date> <date>2014-04-07</date>
<version> <version>
<release>1.9.1</release> <release>1.9.2</release>
<api>1.8</api> <api>1.9</api>
</version> </version>
<stability> <stability>
<release>stable</release> <release>stable</release>
@ -41,6 +41,7 @@
<file name="config.inc.php.dist" role="data"></file> <file name="config.inc.php.dist" role="data"></file>
<file name="js/jquery-ui-1.9.1.custom.min.js" role="data"></file> <file name="js/jquery-ui-1.9.1.custom.min.js" role="data"></file>
<file name="js/jquery.miniColors.min.js" role="data"></file>
<file name="js/i18n/jquery.ui.datepicker-af.js" role="data"></file> <file name="js/i18n/jquery.ui.datepicker-af.js" role="data"></file>
<file name="js/i18n/jquery.ui.datepicker-ar-DZ.js" role="data"></file> <file name="js/i18n/jquery.ui.datepicker-ar-DZ.js" role="data"></file>
<file name="js/i18n/jquery.ui.datepicker-ar.js" role="data"></file> <file name="js/i18n/jquery.ui.datepicker-ar.js" role="data"></file>
@ -128,7 +129,9 @@
<file name="themes/classic/images/ui-bg_highlight-hard_90_e6e6e7_1x100.png" role="data"></file> <file name="themes/classic/images/ui-bg_highlight-hard_90_e6e6e7_1x100.png" role="data"></file>
<file name="themes/classic/images/ui-icons_666666_256x240.png" role="data"></file> <file name="themes/classic/images/ui-icons_666666_256x240.png" role="data"></file>
<file name="themes/larry/jquery-ui-1.9.1.custom.css" role="data"></file> <file name="themes/larry/jquery.miniColors.css" role="data"></file>
<file name="themes/larry/images/minicolors-all.png" role="data"></file>
<file name="themes/larry/images/minicolors-handles.gif" role="data"></file>
<file name="themes/larry/images/ui-bg_highlight-hard_55_b0ccd7_1x100.png" role="data"></file> <file name="themes/larry/images/ui-bg_highlight-hard_55_b0ccd7_1x100.png" role="data"></file>
<file name="themes/larry/images/ui-bg_highlight-hard_65_ffffff_1x100.png" role="data"></file> <file name="themes/larry/images/ui-bg_highlight-hard_65_ffffff_1x100.png" role="data"></file>
<file name="themes/larry/images/ui-bg_highlight-hard_75_eaeaea_1x100.png" role="data"></file> <file name="themes/larry/images/ui-bg_highlight-hard_75_eaeaea_1x100.png" role="data"></file>

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 421 B

@ -0,0 +1,106 @@
.miniColors-trigger {
height: 22px;
width: 22px;
background: url('images/minicolors-all.png') -170px 0 no-repeat;
vertical-align: middle;
margin: 0 .25em;
display: inline-block;
outline: none;
}
.miniColors-selector {
position: absolute;
width: 175px;
height: 150px;
background: #FFF;
border: solid 1px #BBB;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
box-shadow: 0 0 6px rgba(0, 0, 0, .25);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5px;
z-index: 999999;
}
.miniColors-selector.black {
background: #000;
border-color: #000;
}
.miniColors-colors {
position: absolute;
top: 5px;
left: 5px;
width: 150px;
height: 150px;
background: url('images/minicolors-all.png') top left no-repeat;
cursor: crosshair;
}
.miniColors-hues {
position: absolute;
top: 5px;
left: 160px;
width: 20px;
height: 150px;
background: url('images/minicolors-all.png') -150px 0 no-repeat;
cursor: crosshair;
}
.miniColors-colorPicker {
position: absolute;
width: 11px;
height: 11px;
background: url('images/minicolors-all.png') -170px -28px no-repeat;
}
.miniColors-huePicker {
position: absolute;
left: -3px;
width: 26px;
height: 3px;
background: url('images/minicolors-all.png') -170px -24px no-repeat;
overflow: hidden;
}
.miniColors-presets {
position: absolute;
left: 185px;
top: 5px;
width: 60px;
}
.miniColors-colorPreset {
float: left;
width: 18px;
height: 15px;
margin: 2px;
border: 1px solid #333;
cursor: pointer;
}
.miniColors-colorPreset-active {
border: 2px dotted #666;
margin: 1px;
}
/* Hacks for IE6/7 */
* html .miniColors-colors {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='plugins/calendar/skins/classic/images/minicolors-all.png', sizingMethod='crop');
}
* html .miniColors-colorPicker {
background: url('images/minicolors-handles.gif') 0 -28px no-repeat;
}
* html .miniColors-huePicker {
background: url('images/minicolors-handles.gif') 0 -24px no-repeat;
}
* html .miniColors-trigger {
background: url('images/minicolors-handles.gif') 0 0 no-repeat;
}
Loading…
Cancel
Save