Add color plugin

.gitignore

@@ -6,6 +6,7 @@
 /bower_components
 /dist
 /src/ui/sass/_sprite*
+/plugins/**/ui/sass/_sprite*
 
 
 # Windows image file caches

Gulpfile.js

@@ -6,7 +6,7 @@ var gulp = require('gulp'),
 var paths = {
     scripts: ['src/trumbowyg.js'],
     langs: ['src/langs/**.js', '!src/langs/en.js'],
-    plugins: ['plugins/*/**.js'],
+    plugins: ['plugins/*/**.js', '!plugins/*/Gulpfile.js'],
     sprites: {
         'icons': 'src/ui/images/icons/**.png',
         'icons-2x': 'src/ui/images/icons-2x/**.png'

index.html

@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <title>Trumbowyg by Alex-D</title>
         <link rel="stylesheet" href="dist/ui/trumbowyg.css">
+        <link rel="stylesheet" href="dist/plugins/colors/ui/trumbowyg.colors.css">
         <style type="text/css">
             html, body {
                 margin: 0;
@@ -128,6 +129,7 @@ <h1>This editor is create from a textarea</h1>
         <script src="dist/langs/fr.min.js"></script>
         <script src="dist/plugins/upload/trumbowyg.upload.js"></script>
         <script src="dist/plugins/base64/trumbowyg.base64.js"></script>
+        <script src="dist/plugins/colors/trumbowyg.colors.js"></script>
         <script>
             /** Default editor configuration **/
             $('#simple-editor')
@@ -175,7 +177,8 @@ <h1>This editor is create from a textarea</h1>
                     '|', 'btnGrp-test',
                     '|', 'align',
                     '|', 'btnGrp-lists',
-                    '|', 'image']
+                    '|', 'image',
+                    '|', 'foreColor', 'backColor']
             };
             $('#customized-buttonpane')
             .trumbowyg(customizedButtonPaneTbwOptions)

plugins/base64/trumbowyg.base64.js

@@ -71,4 +71,4 @@
             }
         }
     });
-})(jQuery);
+})(jQuery);

plugins/colors/Gulpfile.js

@@ -0,0 +1,101 @@
+var gulp = require('gulp'),
+    $ = require('gulp-load-plugins')(),
+    path = require('path'),
+    spritesmith = require('gulp.spritesmith');
+
+var paths = {
+    sprites: {
+        'icons': 'ui/images/icons/**.png',
+        'icons-2x': 'ui/images/icons-2x/**.png'
+    },
+    mainStyle: 'ui/sass/trumbowyg.colors.scss',
+    styles: {
+        sass: 'ui/sass',
+        includePaths: ['ui/sass', '../../src/ui/sass/mixins']
+    }
+};
+
+var pkg = require('../../package.json');
+var banner = ['/**',
+    ' * <%= pkg.title %> v<%= pkg.version %> - <%= pkg.description %>',
+    ' * <%= description %>',
+    ' * ------------------------',
+    ' * @link <%= pkg.homepage %>',
+    ' * @license <%= pkg.license %>',
+    ' * @author <%= pkg.author.name %>',
+    ' *         Twitter : @AlexandreDemode',
+    ' *         Website : <%= pkg.author.url.replace("http://", "") %>',
+    ' */',
+    '\n'].join('\n');
+var bannerLight = ['/** <%= pkg.title %> v<%= pkg.version %> - <%= pkg.description %>',
+    ' - <%= pkg.homepage.replace("http://", "") %>',
+    ' - License <%= pkg.license %>',
+    ' - Author : <%= pkg.author.name %>',
+    ' / <%= pkg.author.url.replace("http://", "") %>',
+    ' */',
+    '\n'].join('');
+
+
+
+gulp.task('sprites', function(){
+    return makeSprite() && makeSprite('-2x');
+});
+function makeSprite(resolution){
+    if(!resolution)
+        resolution = '';
+
+    var sprite = gulp.src(paths.sprites['icons' + resolution])
+        .pipe(spritesmith({
+            imgName: 'icons' + resolution + '.png',
+            cssName: '_sprite' + resolution + '.scss',
+            cssTemplate: function(params){
+                var output = '', e;
+                for(var i in params.items){
+                    e = params.items[i];
+                    output += '$' + e.name + resolution + ': ' + e.px.offset_x + ' ' + e.px.offset_y + ';\n';
+                }
+                if(params.items.length > 0){
+                    output += '\n\n';
+                    output += '$sprite-height' + resolution + ': ' + params.items[0].px.total_height + ';\n';
+                    output += '$sprite-width' + resolution + ': ' + params.items[0].px.total_width + ';\n';
+                    output += '$icons' + resolution + ': "./images/icons' + resolution + '.png";';
+                }
+
+                return output;
+            }
+        }));
+    sprite.img.pipe(gulp.dest('../../dist/plugins/colors/ui/images/'));
+    sprite.css.pipe(gulp.dest(paths.styles.sass));
+    return sprite.css;
+}
+
+
+
+gulp.task("styles", ["sprites"], function(){
+  return gulp.src(paths.mainStyle)
+    .pipe($.sass({
+      sass: paths.styles.sass,
+      includePaths: paths.styles.includePaths
+    }))
+    .pipe($.autoprefixer(["last 1 version", "> 1%", "ff >= 20", "ie >= 8", "opera >= 12", "Android >= 2.2"], { cascade: true }))
+    .pipe($.header(banner, { pkg: pkg, description: "Colors plugin stylesheet for Trumbowyg editor" }))
+    .pipe(gulp.dest("../../dist/plugins/colors/ui/"))
+    .pipe($.size({ title: "trumbowyg.colors.css" }))
+    .pipe($.rename({ suffix: ".min" })) // génère une version minimifié
+    .pipe($.minifyCss())
+    .pipe($.header(bannerLight, { pkg: pkg }))
+    .pipe(gulp.dest("../../dist/plugins/colors/ui/"))
+    .pipe($.size({ title: "trumbowyg.colors.min.css" }));
+});
+
+
+
+gulp.task('watch', function(){
+    gulp.watch(paths.mainStyle, ['styles']);
+});
+
+
+
+gulp.task('build', ['styles']);
+
+gulp.task('default', ['build', 'watch']);

plugins/colors/trumbowyg.colors.js

@@ -0,0 +1,60 @@
+/* ===========================================================
+ * trumbowyg.colors.js v1.0
+ * Colors picker plugin for Trumbowyg
+ * http://alex-d.github.com/Trumbowyg
+ * ===========================================================
+ * Author : Alexandre Demode (Alex-D)
+ *          Twitter : @AlexandreDemode
+ *          Website : alex-d.fr
+ */
+
+(function($){
+    'use strict';
+
+    $.extend(true, $.trumbowyg, {
+        langs: {
+            en: {
+                foreColor: "Text color",
+                backColor: "Background color"
+            },
+            fr: {
+                foreColor: "Couleur du text",
+                backColor: "Couleur de fond"
+            }
+        }
+    });
+
+    if(!$.trumbowyg.opts.colors)
+        $.trumbowyg.opts.colors = ['ffffff', '000000', 'eeece1', '1f497d', '4f81bd', 'c0504d', '9bbb59', '8064a2', '4bacc6', 'f79646', 'ffff00', 'f2f2f2', '7f7f7f', 'ddd9c3', 'c6d9f0', 'dbe5f1', 'f2dcdb', 'ebf1dd', 'e5e0ec', 'dbeef3', 'fdeada', 'fff2ca', 'd8d8d8', '595959', 'c4bd97', '8db3e2', 'b8cce4', 'e5b9b7', 'd7e3bc', 'ccc1d9', 'b7dde8', 'fbd5b5', 'ffe694', 'bfbfbf', '3f3f3f', '938953', '548dd4', '95b3d7', 'd99694', 'c3d69b', 'b2a2c7', 'b7dde8', 'fac08f', 'f2c314', 'a5a5a5', '262626', '494429', '17365d', '366092', '953734', '76923c', '5f497a', '92cddc', 'e36c09', 'c09100', '7f7f7f', '0c0c0c', '1d1b10', '0f243e', '244061', '632423', '4f6128', '3f3151', '31859b', '974806', '7f6000'];
+
+    $.extend(true, $.trumbowyg, {
+        opts: {
+            btnsDef: {
+                foreColor: {
+                    dropdown: buildDropdown('foreColor')
+                },
+                backColor: {
+                    dropdown: buildDropdown('backColor')
+                }
+            }
+        }
+    });
+
+
+
+    function buildDropdown(func){
+        var dropdown = [];
+
+        $.each($.trumbowyg.opts.colors, function(i, color){
+            var btn = '_' + func + color;
+            $.trumbowyg.opts.btnsDef[btn] = {
+                func: func,
+                param: '#' + color,
+                style: 'background-color: #' + color + ';'
+            };
+            dropdown.push(btn);
+        });
+
+        return dropdown;
+    }
+})(jQuery);

plugins/colors/ui/sass/trumbowyg.colors.scss

@@ -0,0 +1,65 @@
+@import "sprite";
+@import "sprite-2x";
+@import "sprite-pos";
+
+.foreColor-trumbowyg-dropdown,
+.backColor-trumbowyg-dropdown {
+    width: 264px;
+    padding: 7px 5px;
+
+    button {
+        display: block;
+        position: relative;
+        float: left;
+        text-indent: -9999px;
+        height: 20px;
+        width: 20px;
+        border: 1px solid #333;
+        padding: 0;
+        margin: 2px;
+
+        &:hover,
+        &:focus {
+            &::after {
+                content: " ";
+                display: block;
+                height: 27px;
+                width: 27px;
+                background: inherit;
+                position: absolute;
+                top: -5px;
+                left: -5px;
+                border: 1px solid #FFF;
+                box-shadow: #000 0 0 2px;
+                z-index: 10;
+            }
+        }
+    }
+}
+
+
+
+/*
+ * Buttons icons
+ */
+.trumbowyg-button-pane li button {
+    &.trumbowyg-foreColor-button,
+    &.trumbowyg-backColor-button {
+        background-image: url($icons);
+    }
+
+    &.trumbowyg-foreColor-button { @include sprite-pos($forecolor); }
+    &.trumbowyg-backColor-button { @include sprite-pos($backcolor); }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 4/3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){ 
+    .trumbowyg-button-pane li button {
+        &.trumbowyg-foreColor-button,
+        &.trumbowyg-backColor-button {
+            background-image: url($icons-2x) !important;
+        }
+
+        &.trumbowyg-foreColor-button { @include sprite-pos($forecolor-2x, true); }
+        &.trumbowyg-backColor-button { @include sprite-pos($backcolor-2x, true); }
+    }
+}

plugins/upload/trumbowyg.upload.js

@@ -137,4 +137,4 @@
             $.trumbowyg.addedXhrProgressEvent = true;
         }
     }
-})(jQuery);
+})(jQuery);

src/trumbowyg.js

@@ -555,6 +555,7 @@
             return $('<button/>', {
                 type: 'button',
                 text: btnDef.text || btnDef.title || t.lang[n] || n,
+                style: btnDef.style || null,
                 mousedown: function(e){
                     $('body', t.doc).trigger('mousedown');
 

src/ui/sass/mixins/_sprite-pos.scss

@@ -0,0 +1,7 @@
+@mixin sprite-pos($_item, $retina: false){
+    @if($retina == false){
+        background-position: nth($_item, 1)+5 nth($_item, 2)+5;
+    } @else {
+        background-position: round(nth($_item, 1)/ 2)+5 round(nth($_item, 2)/ 2)+5;
+    }
+}

src/ui/sass/trumbowyg.scss

@@ -1,15 +1,9 @@
 @import "sprite";
 @import "sprite-2x";
+@import "mixins/sprite-pos";
 
 $light-color: #ecf0f1;
 
-@mixin sprite-pos($_item, $retina: false){
-    @if($retina == false){
-        background-position: nth($_item, 1)+5 nth($_item, 2)+5;
-    } @else {
-        background-position: round(nth($_item, 1)/ 2)+5 round(nth($_item, 2)/ 2)+5;
-    }
-}
 
 
 .trumbowyg-box,