Inital
This commit is contained in:
@@ -0,0 +1,264 @@
|
||||
/* ===========================================================
|
||||
* trumbowyg.colors.js v1.2
|
||||
* 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: {
|
||||
// jshint camelcase:false
|
||||
en: {
|
||||
foreColor: 'Text color',
|
||||
backColor: 'Background color',
|
||||
foreColorRemove: 'Remove text color',
|
||||
backColorRemove: 'Remove background color'
|
||||
},
|
||||
cs: {
|
||||
foreColor: 'Barva textu',
|
||||
backColor: 'Barva pozadí'
|
||||
},
|
||||
da: {
|
||||
foreColor: 'Tekstfarve',
|
||||
backColor: 'Baggrundsfarve'
|
||||
},
|
||||
de: {
|
||||
foreColor: 'Textfarbe',
|
||||
backColor: 'Hintergrundfarbe'
|
||||
},
|
||||
et: {
|
||||
foreColor: 'Teksti värv',
|
||||
backColor: 'Taustavärv',
|
||||
foreColorRemove: 'Eemalda teksti värv',
|
||||
backColorRemove: 'Eemalda taustavärv'
|
||||
},
|
||||
fr: {
|
||||
foreColor: 'Couleur du texte',
|
||||
backColor: 'Couleur de fond',
|
||||
foreColorRemove: 'Supprimer la couleur du texte',
|
||||
backColorRemove: 'Supprimer la couleur de fond'
|
||||
},
|
||||
hu: {
|
||||
foreColor: 'Betű szín',
|
||||
backColor: 'Háttér szín',
|
||||
foreColorRemove: 'Betű szín eltávolítása',
|
||||
backColorRemove: 'Háttér szín eltávolítása'
|
||||
},
|
||||
ja: {
|
||||
foreColor: '文字色',
|
||||
backColor: '背景色'
|
||||
},
|
||||
ko: {
|
||||
foreColor: '글자색',
|
||||
backColor: '배경색',
|
||||
foreColorRemove: '글자색 지우기',
|
||||
backColorRemove: '배경색 지우기'
|
||||
},
|
||||
nl: {
|
||||
foreColor: 'Tekstkleur',
|
||||
backColor: 'Achtergrondkleur'
|
||||
},
|
||||
pt_br: {
|
||||
foreColor: 'Cor de fonte',
|
||||
backColor: 'Cor de fundo'
|
||||
},
|
||||
ru: {
|
||||
foreColor: 'Цвет текста',
|
||||
backColor: 'Цвет выделения текста'
|
||||
},
|
||||
sk: {
|
||||
foreColor: 'Farba textu',
|
||||
backColor: 'Farba pozadia'
|
||||
},
|
||||
tr: {
|
||||
foreColor: 'Yazı rengi',
|
||||
backColor: 'Arka plan rengi',
|
||||
foreColorRemove: 'Yazı rengini kaldır',
|
||||
backColorRemove: 'Arka plan rengini kaldır'
|
||||
},
|
||||
zh_cn: {
|
||||
foreColor: '文字颜色',
|
||||
backColor: '背景颜色'
|
||||
},
|
||||
zh_tw: {
|
||||
foreColor: '文字顏色',
|
||||
backColor: '背景顏色'
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
// jshint camelcase:true
|
||||
|
||||
|
||||
function hex(x) {
|
||||
return ('0' + parseInt(x).toString(16)).slice(-2);
|
||||
}
|
||||
|
||||
function colorToHex(rgb) {
|
||||
if (rgb.search('rgb') === -1) {
|
||||
return rgb.replace('#', '');
|
||||
} else if (rgb === 'rgba(0, 0, 0, 0)') {
|
||||
return 'transparent';
|
||||
} else {
|
||||
rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d?(.\d+)))?\)$/);
|
||||
return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
|
||||
}
|
||||
}
|
||||
|
||||
function colorTagHandler(element, trumbowyg) {
|
||||
var tags = [];
|
||||
|
||||
if (!element.style) {
|
||||
return tags;
|
||||
}
|
||||
|
||||
// background color
|
||||
if (element.style.backgroundColor !== '') {
|
||||
var backColor = colorToHex(element.style.backgroundColor);
|
||||
if (trumbowyg.o.plugins.colors.colorList.indexOf(backColor) >= 0) {
|
||||
tags.push('backColor' + backColor);
|
||||
} else {
|
||||
tags.push('backColorFree');
|
||||
}
|
||||
}
|
||||
|
||||
// text color
|
||||
var foreColor;
|
||||
if (element.style.color !== '') {
|
||||
foreColor = colorToHex(element.style.color);
|
||||
} else if (element.hasAttribute('color')) {
|
||||
foreColor = colorToHex(element.getAttribute('color'));
|
||||
}
|
||||
if (foreColor) {
|
||||
if (trumbowyg.o.plugins.colors.colorList.indexOf(foreColor) >= 0) {
|
||||
tags.push('foreColor' + foreColor);
|
||||
} else {
|
||||
tags.push('foreColorFree');
|
||||
}
|
||||
}
|
||||
|
||||
return tags;
|
||||
}
|
||||
|
||||
var defaultOptions = {
|
||||
colorList: [
|
||||
'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'
|
||||
],
|
||||
foreColorList: null, // fallbacks on colorList
|
||||
backColorList: null, // fallbacks on colorList
|
||||
allowCustomForeColor: true,
|
||||
allowCustomBackColor: true,
|
||||
displayAsList: false,
|
||||
};
|
||||
|
||||
// Add all colors in two dropdowns
|
||||
$.extend(true, $.trumbowyg, {
|
||||
plugins: {
|
||||
color: {
|
||||
init: function (trumbowyg) {
|
||||
trumbowyg.o.plugins.colors = trumbowyg.o.plugins.colors || defaultOptions;
|
||||
var dropdownClass = trumbowyg.o.plugins.colors.displayAsList ? trumbowyg.o.prefix + 'dropdown--color-list' : '';
|
||||
|
||||
var foreColorBtnDef = {
|
||||
dropdown: buildDropdown('foreColor', trumbowyg),
|
||||
dropdownClass: dropdownClass,
|
||||
},
|
||||
backColorBtnDef = {
|
||||
dropdown: buildDropdown('backColor', trumbowyg),
|
||||
dropdownClass: dropdownClass,
|
||||
};
|
||||
|
||||
trumbowyg.addBtnDef('foreColor', foreColorBtnDef);
|
||||
trumbowyg.addBtnDef('backColor', backColorBtnDef);
|
||||
},
|
||||
tagHandler: colorTagHandler
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function buildDropdown(fn, trumbowyg) {
|
||||
var dropdown = [],
|
||||
trumbowygColorOptions = trumbowyg.o.plugins.colors,
|
||||
colorList = trumbowygColorOptions[fn + 'List'] || trumbowygColorOptions.colorList;
|
||||
|
||||
$.each(colorList, function (i, color) {
|
||||
var btn = fn + color,
|
||||
btnDef = {
|
||||
fn: fn,
|
||||
forceCss: true,
|
||||
hasIcon: false,
|
||||
text: trumbowyg.lang['#' + color] || ('#' + color),
|
||||
param: '#' + color,
|
||||
style: 'background-color: #' + color + ';'
|
||||
};
|
||||
|
||||
if (trumbowygColorOptions.displayAsList && fn === 'foreColor') {
|
||||
btnDef.style = 'color: #' + color + ' !important;';
|
||||
}
|
||||
|
||||
trumbowyg.addBtnDef(btn, btnDef);
|
||||
dropdown.push(btn);
|
||||
});
|
||||
|
||||
// Remove color
|
||||
var removeColorButtonName = fn + 'Remove',
|
||||
removeColorBtnDef = {
|
||||
fn: 'removeFormat',
|
||||
hasIcon: false,
|
||||
param: fn,
|
||||
style: 'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkQAAfEJMRmwBYhoGBYQtMBYoAADziAp0jtJTgAAAAAElFTkSuQmCC);'
|
||||
};
|
||||
|
||||
if (trumbowygColorOptions.displayAsList) {
|
||||
removeColorBtnDef.style = '';
|
||||
}
|
||||
|
||||
trumbowyg.addBtnDef(removeColorButtonName, removeColorBtnDef);
|
||||
dropdown.push(removeColorButtonName);
|
||||
|
||||
// Custom color
|
||||
if (trumbowygColorOptions['allowCustom' + fn.charAt(0).toUpperCase() + fn.substr(1)]) {
|
||||
// add free color btn
|
||||
var freeColorButtonName = fn + 'Free',
|
||||
freeColorBtnDef = {
|
||||
fn: function () {
|
||||
trumbowyg.openModalInsert(trumbowyg.lang[fn],
|
||||
{
|
||||
color: {
|
||||
label: fn,
|
||||
forceCss: true,
|
||||
type: 'color',
|
||||
value: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
// callback
|
||||
function (values) {
|
||||
trumbowyg.execCmd(fn, values.color);
|
||||
return true;
|
||||
}
|
||||
);
|
||||
},
|
||||
hasIcon: false,
|
||||
text: '#',
|
||||
// style adjust for displaying the text
|
||||
style: 'text-indent: 0; line-height: 20px; padding: 0 5px;'
|
||||
};
|
||||
|
||||
trumbowyg.addBtnDef(freeColorButtonName, freeColorBtnDef);
|
||||
dropdown.push(freeColorButtonName);
|
||||
}
|
||||
|
||||
return dropdown;
|
||||
}
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
|
||||
<path d="M36.5 22.3l-6.3 18.1H43l-6.3-18.1z"/>
|
||||
<path d="M9 8.9v54.2h54.1V8.9H9zm39.9 48.2L45 46H28.2l-3.9 11.1h-7.6L32.8 15h7.8l16.2 42.1h-7.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 217 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
|
||||
<path d="M32 15h7.8L56 57.1h-7.9l-4-11.1H27.4l-4 11.1h-7.6L32 15zm-2.5 25.4h12.9L36 22.3h-.2l-6.3 18.1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 176 B |
@@ -0,0 +1,57 @@
|
||||
.trumbowyg-dropdown-foreColor:not(.trumbowyg-dropdown--color-list),
|
||||
.trumbowyg-dropdown-backColor:not(.trumbowyg-dropdown--color-list) {
|
||||
max-width: 276px;
|
||||
padding: 7px 5px;
|
||||
overflow: initial;
|
||||
|
||||
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;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
background: inherit;
|
||||
border: 1px solid #fff;
|
||||
box-shadow: #000 0 0 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trumbowyg-dropdown-backColor.trumbowyg-dropdown--color-list {
|
||||
button:not(.trumbowyg-backColorRemove-dropdown-button) {
|
||||
position: relative;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user