-1) ? hex.substring(1) : hex), 16);
- return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
- },
- HexToHSB = function (hex) {
- return RGBToHSB(HexToRGB(hex));
- },
- RGBToHSB = function (rgb) {
- var hsb = {
- h: 0,
- s: 0,
- b: 0
- };
- var min = Math.min(rgb.r, rgb.g, rgb.b);
- var max = Math.max(rgb.r, rgb.g, rgb.b);
- var delta = max - min;
- hsb.b = max;
- if (max != 0) {
-
- }
- hsb.s = max != 0 ? 255 * delta / max : 0;
- if (hsb.s != 0) {
- if (rgb.r == max) {
- hsb.h = (rgb.g - rgb.b) / delta;
- } else if (rgb.g == max) {
- hsb.h = 2 + (rgb.b - rgb.r) / delta;
- } else {
- hsb.h = 4 + (rgb.r - rgb.g) / delta;
- }
- } else {
- hsb.h = -1;
- }
- hsb.h *= 60;
- if (hsb.h < 0) {
- hsb.h += 360;
- }
- hsb.s *= 100/255;
- hsb.b *= 100/255;
- return hsb;
- },
- HSBToRGB = function (hsb) {
- var rgb = {};
- var h = Math.round(hsb.h);
- var s = Math.round(hsb.s*255/100);
- var v = Math.round(hsb.b*255/100);
- if(s == 0) {
- rgb.r = rgb.g = rgb.b = v;
- } else {
- var t1 = v;
- var t2 = (255-s)*v/255;
- var t3 = (t1-t2)*(h%60)/60;
- if(h==360) h = 0;
- if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
- else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
- else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
- else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
- else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
- else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
- else {rgb.r=0; rgb.g=0; rgb.b=0}
- }
- return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
- },
- RGBToHex = function (rgb) {
- var hex = [
- rgb.r.toString(16),
- rgb.g.toString(16),
- rgb.b.toString(16)
- ];
- $.each(hex, function (nr, val) {
- if (val.length == 1) {
- hex[nr] = '0' + val;
- }
- });
- return hex.join('');
- },
- HSBToHex = function (hsb) {
- return RGBToHex(HSBToRGB(hsb));
- },
- restoreOriginal = function () {
- var cal = $(this).parent();
- var col = cal.data('colorpicker').origColor;
- cal.data('colorpicker').color = col;
- fillRGBFields(col, cal.get(0));
- fillHexFields(col, cal.get(0));
- fillHSBFields(col, cal.get(0));
- setSelector(col, cal.get(0));
- setHue(col, cal.get(0));
- setNewColor(col, cal.get(0));
- };
- return {
- init: function (opt) {
- opt = $.extend({}, defaults, opt||{});
- if (typeof opt.color == 'string') {
- opt.color = HexToHSB(opt.color);
- } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
- opt.color = RGBToHSB(opt.color);
- } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
- opt.color = fixHSB(opt.color);
- } else {
- return this;
- }
- return this.each(function () {
- if (!$(this).data('colorpickerId')) {
- var options = $.extend({}, opt);
- options.origColor = opt.color;
- var id = 'collorpicker_' + parseInt(Math.random() * 1000);
- $(this).data('colorpickerId', id);
- var cal = $(tpl).attr('id', id);
- if (options.flat) {
- cal.appendTo(this).show();
- } else {
- cal.appendTo(document.body);
- }
- options.fields = cal
- .find('input')
- .bind('keyup', keyDown)
- .bind('change', change)
- .bind('blur', blur)
- .bind('focus', focus);
- cal
- .find('span').bind('mousedown', downIncrement).end()
- .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
- options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
- options.selectorIndic = options.selector.find('div div');
- options.el = this;
- options.hue = cal.find('div.colorpicker_hue div');
- cal.find('div.colorpicker_hue').bind('mousedown', downHue);
- options.newColor = cal.find('div.colorpicker_new_color');
- options.currentColor = cal.find('div.colorpicker_current_color');
- cal.data('colorpicker', options);
- cal.find('div.colorpicker_submit')
- .bind('mouseenter', enterSubmit)
- .bind('mouseleave', leaveSubmit)
- .bind('click', clickSubmit);
- fillRGBFields(options.color, cal.get(0));
- fillHSBFields(options.color, cal.get(0));
- fillHexFields(options.color, cal.get(0));
- setHue(options.color, cal.get(0));
- setSelector(options.color, cal.get(0));
- setCurrentColor(options.color, cal.get(0));
- setNewColor(options.color, cal.get(0));
- if (options.flat) {
- cal.css({
- position: 'relative',
- display: 'block'
- });
- } else {
- $(this).bind(options.eventName, show);
- }
- }
- });
- },
- showPicker: function() {
- return this.each( function () {
- if ($(this).data('colorpickerId')) {
- show.apply(this);
- }
- });
- },
- hidePicker: function() {
- return this.each( function () {
- if ($(this).data('colorpickerId')) {
- $('#' + $(this).data('colorpickerId')).hide();
- }
- });
- },
- setColor: function(col) {
- if (typeof col == 'string') {
- col = HexToHSB(col);
- } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
- col = RGBToHSB(col);
- } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
- col = fixHSB(col);
- } else {
- return this;
- }
- return this.each(function(){
- if ($(this).data('colorpickerId')) {
- var cal = $('#' + $(this).data('colorpickerId'));
- cal.data('colorpicker').color = col;
- cal.data('colorpicker').origColor = col;
- fillRGBFields(col, cal.get(0));
- fillHSBFields(col, cal.get(0));
- fillHexFields(col, cal.get(0));
- setHue(col, cal.get(0));
- setSelector(col, cal.get(0));
- setCurrentColor(col, cal.get(0));
- setNewColor(col, cal.get(0));
- }
- });
- }
- };
- }();
- $.fn.extend({
- ColorPicker: ColorPicker.init,
- ColorPickerHide: ColorPicker.hidePicker,
- ColorPickerShow: ColorPicker.showPicker,
- ColorPickerSetColor: ColorPicker.setColor
- });
-})(jQuery)
\ No newline at end of file
diff --git a/library.js b/library.js
index b91d1cc..ae742a4 100644
--- a/library.js
+++ b/library.js
@@ -1,16 +1,31 @@
-(function (module) {
+
'use strict';
-var Plugin = {},
-codeRegex = /(?:(?:.|\n)*?<\/pre>|(?:.|\n)*?<\/code>)/gi,
-colorRegex = /%\((#(?:[A-Fa-f0-9]{3}(?:[A-Fa-f0-9]{3})?)|(?:rgb\(\d{1,3},\d{1,3},\d{1,3}\))|(?:[a-zа-я]){3,})\)\[(.+?)\]/gi;
+
+const Plugin = module.exports;
+
+const codeRegex = /(?:(?:.|\n)*?<\/pre>|(?:.|\n)*?<\/code>)/gi;
+
+const colorRegex = /%\((#(?:[A-Fa-f0-9]{3}(?:[A-Fa-f0-9]{3})?)|(?:rgb\(\d{1,3},\d{1,3},\d{1,3}\))|(?:[a-zа-я]){3,})\)\[(.+?)\]/gi;
+
+Plugin.registerFormatting = function (payload) {
+ const formatting = [
+ { name: 'eyedropper', className: 'fa fa-eyedropper', title: 'Color' },
+ ];
+
+ payload.options = payload.options.concat(formatting);
+
+ return payload;
+}
Plugin.parse = function (data, callback) {
- if (data && 'string' === typeof data) {
- data = parser(data);
- } else if (data.postData && data.postData.content && data.postData.content.match(colorRegex)) {
- data.postData.content = parser(data.postData.content);
- } else if (data.userData && data.userData.signature && data.userData.signature.match(colorRegex)) {
- data.userData.signature = parser(data.userData.signature);
+ if (data) {
+ if ('string' === typeof data) {
+ data = parser(data);
+ } else if (data?.postData?.content?.match(colorRegex)) {
+ data.postData.content = parser(data.postData.content);
+ } else if (data?.userData?.signature?.match(colorRegex)) {
+ data.userData.signature = parser(data.userData.signature);
+ }
}
callback(null, data);
};
@@ -46,6 +61,4 @@ function parser (data) {
return data;
}
-module.exports = Plugin;
-})(module);
diff --git a/package.json b/package.json
index 6ef246f..0ad81b7 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
{
- "name": "nodebb-plugin-mega-colors",
- "version": "0.10.24",
+ "name": "@nodebb/nodebb-plugin-mega-colors",
+ "version": "1.0.1",
"nbbpm": {
- "compatibility": "^0.7.1 || ^0.8.0 || ^0.9.0 || ^1.0.0"
+ "compatibility": "^4.x"
},
"description": "NodeBB Plugin that allows users to use colors in their posts.",
"main": "library.js",
"repository": {
"type": "git",
- "url": "https://github.com/MegaGM/nodebb-plugin-mega-colors.git"
+ "url": "https://github.com/barisusakli/nodebb-plugin-mega-colors.git"
},
"keywords": [
"nodebb",
@@ -16,11 +16,12 @@
],
"license": "MIT",
"dependencies": {},
- "homepage": "https://github.com/MegaGM/nodebb-plugin-mega-colors",
+ "homepage": "https://github.com/barisusakli/nodebb-plugin-mega-colors",
"maintainers": [
{
- "name": "Mega",
- "email": "daxaka.msk@gmail.com"
+ "name": "Barış Soner Uşaklı",
+ "email": "baris@nodebb.org",
+ "url": "https://github.com/barisusakli"
}
],
"directories": {}
diff --git a/plugin.json b/plugin.json
index 8380598..a0a842e 100644
--- a/plugin.json
+++ b/plugin.json
@@ -1,22 +1,16 @@
{
- "id": "nodebb-plugin-mega-colors",
+ "id": "@nodebb/nodebb-plugin-mega-colors",
"name": "NodeBB Text Colors Plugin",
"description": "NodeBB Plugin that allows users to use colors in their posts.",
- "url": "https://github.com/MegaGM/nodebb-plugin-mega-colors",
+ "url": "https://github.com/barisusakli/nodebb-plugin-mega-colors",
"library": "./library.js",
- "staticDirs": {
- "images": "lib/colorpicker/images"
- },
"hooks": [
{ "hook": "filter:parse.post", "method": "parse" },
{ "hook": "filter:parse.signature", "method": "parse" },
- { "hook": "filter:parse.raw", "method": "parse" }
- ],
- "less": [
- "lib/colorpicker/css/colorpicker.less"
+ { "hook": "filter:parse.raw", "method": "parse" },
+ { "hook": "filter:composer.formatting", "method": "registerFormatting" }
],
"scripts": [
- "./button.js",
- "lib/colorpicker/js/colorpicker.js"
+ "./public/button.js"
]
}
diff --git a/public/button.js b/public/button.js
new file mode 100644
index 0000000..a0e41ac
--- /dev/null
+++ b/public/button.js
@@ -0,0 +1,39 @@
+$('document').ready(function () {
+ require(['composer/controls', 'composer/formatting'], function (controls, formatting) {
+ $(window).on('action:composer.enhanced', (ev, { postContainer }) => {
+ let composerTextarea;
+ const btn = postContainer.find('[data-format="eyedropper"]')
+
+ const colorInput = $(``);
+ colorInput.insertAfter(btn);
+
+ colorInput.on('input', function () {
+ const start = composerTextarea.selectionStart;
+ const end = composerTextarea.selectionEnd;
+ composerTextarea.value = composerTextarea.value.slice(0, start) + this.value + composerTextarea.value.slice(end);
+
+ // force preview to be updated
+ $(composerTextarea).trigger('propertychange');
+
+ composerTextarea.selectionStart = start;
+ composerTextarea.selectionEnd = end;
+ });
+
+ formatting.addButtonDispatch('eyedropper', function (textarea, selectionStart, selectionEnd) {
+ if (selectionStart === selectionEnd) {
+ controls.insertIntoTextarea(textarea, '%(#000000)[Colored Text Here]');
+ controls.updateTextareaSelection(textarea, selectionStart + 2, selectionStart + 9);
+ } else {
+ controls.wrapSelectionInTextareaWith(textarea, '%(#000000)[', ']');
+ controls.updateTextareaSelection(textarea, selectionStart + 2, selectionStart + 9);
+ }
+ composerTextarea = textarea;
+ colorInput.click();
+ });
+ });
+ });
+});