Integrate jQuery miniColors extension

Aleksander Machniak

2014-04-07 8a73fdb67fb2bac197db365c327e63d9557ca54e

Integrate jQuery miniColors extension

 plugins/jqueryui/README

@@ -2,12 +2,12 @@
|
|  Author:  Cor Bosman (roundcube@wa.ter.net)
|  Plugin:  jqueryui
|  Version: 1.9.1
|  Version: 1.9.2
|  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
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
@@ -16,7 +16,7 @@

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
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
downloaded css files in your own plugin.

@@ -26,4 +26,6 @@

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
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.

 plugins/jqueryui/jqueryui.php

@@ -14,6 +14,9 @@
{
    public $noajax = true;

    private static $features = array();
    private static $ui_theme;

    public function init()
    {
        $version = '1.9.2';
@@ -25,9 +28,11 @@
        $this->include_script("js/jquery-ui-$version.custom.min.js");

        // include UI stylesheet
        $skin = $rcmail->config->get('skin');
        $ui_map = $rcmail->config->get('jquery_ui_skin_map', array());
        $skin     = $rcmail->config->get('skin');
        $ui_map   = $rcmail->config->get('jquery_ui_skin_map', array());
        $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")) {
            $this->include_stylesheet("themes/$ui_theme/jquery-ui-$version.custom.css");
@@ -56,6 +61,7 @@
        if (count($jquery_ui_i18n) > 0) {
            $lang_l = str_replace('_', '-', substr($_SESSION['language'], 0, 5));
            $lang_s = substr($_SESSION['language'], 0, 2);

            foreach ($jquery_ui_i18n as $package) {
                if (file_exists($this->home . "/js/i18n/jquery.ui.$package-$lang_l.js")) {
                    $this->include_script("js/i18n/jquery.ui.$package-$lang_l.js");
@@ -80,4 +86,53 @@
        $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'
        );
    }
}

 plugins/jqueryui/js/jquery.miniColors.min.js

New file
@@ -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);

 plugins/jqueryui/package.xml

@@ -20,10 +20,10 @@
        <email>roundcube@gmail.com</email>
        <active>yes</active>
    </lead>
    <date>2012-11-07</date>
    <date>2014-04-07</date>
    <version>
        <release>1.9.1</release>
        <api>1.8</api>
        <release>1.9.2</release>
        <api>1.9</api>
    </version>
    <stability>
        <release>stable</release>
@@ -41,6 +41,7 @@
            <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.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-ar-DZ.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-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_65_ffffff_1x100.png" role="data"></file>
            <file name="themes/larry/images/ui-bg_highlight-hard_75_eaeaea_1x100.png" role="data"></file>

 plugins/jqueryui/themes/larry/images/minicolors-all.png

 plugins/jqueryui/themes/larry/images/minicolors-handles.gif

 plugins/jqueryui/themes/larry/jquery.miniColors.css

New file
@@ -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;
}