Requesting Drop Down Color Names

[nothingcharming]

We use specific colors on my forum for RPing. Someone is Teal, Blue, Red, etc.. So I was wondering if it was possible to get a drop down menu with the original colors that were listed on V4? I know we could look up the color codes to get the exact colors, but that's a pain (even with the plug in that lets us save them as "faves" cuz we can't force the other members to do it and their colors keep being wrong!) If someone could please help I would really appreciate it!

[Peter]

I think I just wasted my time modifying / extending the wysiwyg prototype, as I only just remembered that Chris has a plugin that already supports customising of the WYSIWYG controls.

support.proboards.com/thread/441976/

I haven't really looked into it, so not sure what is possible, hopefully Chris can provide more info, or even just give the plugin a try.

[Chris]

My controls plugin is not yet capable of making a direct menu just buttons but it can indeed accomplish this in a roundabout way. The ability to define a menu in the button click handler allows you to get rid of the color button and define your own which will then give a popup with the named color dropdowns you've define, something like this



To get to that you would

1. disable the colorpicker


(make sure to apply it to bbcode and preview at bottom of that settings page as well)


2. create your own custom color button



In this case I did a quick test to add three colors to the dropdown (black, red, blue) in the attributes field

color=["select",["black","black"],["red","red"],["blue","blue"],"value","red"]

the "value" defines the default value that will be displayed when that dropdown menu is created and in this case I set it to red

[Peter]

Chris

Yeah, when I wrote my code, I had to overwrite the "forecolor" because of the if statement in "_buildControls"...

if(ctrlName == 'fontName' || ctrlName == 'foreColor' || ctrlName == 'fontSize' || ctrlName == 'insertSmiley' || ctrlName == 'insertUserLink') {

I've asked Tim if he could tweak this a little so that we can create custom ones.

My rough code...


var p = $.ui.wysiwyg.prototype;

p.controls.fontColor = {

   title: "Font Color"
   
};

//p._bbcodeEditor.controlGroups[0][0].push("fontColor");
//p._visualEditor.controlGroups[0][0].push("fontColor");

p._getForeColorMenu = function(control){
var self = this;
var options = '<li class="red"><a style="color: red;">Red</a></li><li class="blue"><a style="color: blue;">Blue</a></li>';
var button = $("<li></li>").addClass("selectMenuButton");
var select_menu = $("<ul></ul>");

select_menu.addClass("select_menu_list").append(options).appendTo(button);

select_menu.selectMenu({

status: "Font Colour",
staticStatus: true,
updateInput: false,
onShow: function(e) { self.showOverlay(); },
onHide: function(e) { self.hideOverlay(); },
menuOptions: {

position: {
my: 'left top',
at: 'left bottom',
of: this.box,
collision: 'flipfit'
},

click: function(e, ui){
var value = $(ui.item).attr('class').replace(/_/g, " ");

self.execCommand('foreColor', false, value);
}
}

});

return {

menu: select_menu,
button: button

};

}

$(function(){
delete wysiwyg_buttons.foreColor;
});



[Chris]

I had a experimental version that used the name of one of the five hard-coded menu names with a new entry in the controls object that further defined the desired menu. The _createSelectMenu method was then "hijacked" to check for that control entry and build using that or continue as usual if not found. The problem is it is way too technical for the average user to make any reasonable use of...

[nothingcharming]

I'm not a code expert, so I'm trying hard to understand everything that's being said. In simple words, how there is a drop down menu for the font size and font style, I would like the same exact thing with colors. If it was possible to make those two add ones with the update, I figure it'd also be possible to make one for colors as well. I mean, it is possible because there was on prior to the v5 update. A simple click on the menu, click the color and then the color code being on the post.

I don't want this for quick reply, I want it for the actual reply like it was on V4. For the BBC code box.

[Chris]

We were discussing ways to attack the problem between ourselves and in no way expecting you to follow along although if you could that would serve to help you understand the problem we were discussing. Also the example I gave used quick reply but as you can read it gave instructions for applying it to the the preview and bbcode tabs

I understand the request nothingcharming but V5 is not V4, it is much more flexible and has a plethora of configurable options, the downside to that of course being with great potential comes great complexity. The reason I love V5 is also the reason cited by others for not liking it, in my opinion you can never have too many options but I see how some might become overwhelmed. It's like someone at the supermarket complaining about being unable to choose because of the number of varieties on the shelf, as if wishing for that old Soviet Union image with two cereal boxes, a can of spam and a loaf of bread in the entire store.

Anyway, the code could be written to replace the color picker after creation without messing with the underlying structure so I wrote it and placed it in the global header on a V5 forum to test




code:

<!-- Replace colorPicker with named color dropdown -->
<script type="text/javascript">
(function () {
	var bc = $.ui.wysiwyg.prototype._buildControls;
	$.ui.wysiwyg.prototype._buildControls = function () {
		var self = this;
		bc.apply(this, arguments);

		$('.button-foreColor').each(function () {
			var button = $('<li></li>').addClass('selectMenuButton'),
			options = '<li class="black"><a style="background-color: black; color: white;">Black</a></li>' +
				'<li class="red"><a style="background-color: red;">Red</a></li>' +
				'<li class="yellow"><a style="background-color: yellow;">Yellow</a></li>' +
				'<li class="pink"><a style="background-color: pink;">Pink</a></li>' +
				'<li class="green"><a style="background-color: green;">Green</a></li>' +
				'<li class="orange"><a style="background-color: orange;">Orange</a></li>' +
				'<li class="purple"><a style="background-color: purple;">Purple</a></li>' +
				'<li class="blue"><a style="background-color: blue;">Blue</a></li>' +
				'<li class="beige"><a style="background-color: beige;">Beige</a></li>' +
				'<li class="brown"><a style="background-color: brown;">Brown</a></li>' +
				'<li class="teal"><a style="background-color: teal;">Teal</a></li>' +
				'<li class="navy"><a style="background-color: navy;">Navy</a></li>' +
				'<li class="maroon"><a style="background-color: maroon;">Maroon</a></li>' +
				'<li class="lime"><a style="background-color: lime;">Lime Green</a></li>';
			$(this).replaceWith(button);
			if (!self.currentEditorName)
				self.currentEditorName = $('.visual-editor').is(':visible') ? "visual" : "bbcode";
			var menu = $('<ul></ul>')
			.addClass('select_menu_list')
			.append(options)
			.appendTo(button)
			.selectMenu({
				status : 'Colors',
				staticStatus : true,
				updateInput : false,
				onShow : function (e) {
					self.showOverlay();
				},
				onHide : function (e) {
					self.hideOverlay();
				},
				menuOptions : {
					position : {
						my : 'left top',
						at : 'left bottom',
						of : this.box,
						collision : 'flip'
					},
					click : function (e, ui) {
						var value = $(ui.item).attr('class').replace(/_/g, " ");
						self.execCommand('foreColor', false, value);
					}
				}
			});
		})
	}
})()
</script>

It wouldn't make sense making it into a plugin since simplicity was demanded so no configurable options such as placement, additional colors, etc. will be added

[nothingcharming]

That analogy would work except for the fact that I like those things. But anyways, I'll give it a try.

Thanks.

[nothingcharming]

Alright, we tried this and when we placed the code in the global header, it just posted on the main page and didn't even show up in the reply box.

[Brookie]

Not to barge in but I'm also running a roleplay that needs specific colors and I'd love the color list back as well but with the option for the admins to add more colors to it due to there being more colors than the ones in the list on the preview for my roleplay. Is that only possible if there's a plugin?

[Wormopolis]

Aug 18, 2013 8:58:24 GMT -8 nothingcharming said:

Alright, we tried this and when we placed the code in the global header, it just posted on the main page and didn't even show up in the reply box.

at the very top insert <script type="text/javascript">

[nothingcharming]

Thank you so much That fixed it!

[Chris]

Aug 18, 2013 9:06:51 GMT -8 Brookie said:

Not to barge in but I'm also running a roleplay that needs specific colors and I'd love the color list back as well but with the option for the admins to add more colors to it due to there being more colors than the ones in the list on the preview for my roleplay. Is that only possible if there's a plugin?

Named Colors.pbp

[Brookie]

Yay It worked! Thanks!

One more thing and I'll be outta your hair. I was wondering if there was a way to add/change something in the Style Sheet so that I can change the hover to 'none' of the options in the drop down menu for the colors/fontsize/fontface but be able to keep the link hover options the way they are everywhere else on the forum?

[Chris]

Aug 23, 2013 12:00:28 GMT -8 Brookie said:

Yay It worked! Thanks!

One more thing and I'll be outta your hair. I was wondering if there was a way to add/change something in the Style Sheet so that I can change the hover to 'none' of the options in the drop down menu for the colors/fontsize/fontface but be able to keep the link hover options the way they are everywhere else on the forum?

It sounds to me like you're saying you have some sort of CSS hover being applied but it is having unintended effects on the bbcode menus. If I am understanding you correctly and that is indeed the case then an URL to the forum would be required (PM if shy) so I could see this misbehaving CSS in the wild and perhaps tame it.
I could probably just blindly give you some rule and qualify it with important but it would be better to construct a properly weighted rule to allow for future flexibility.