AnonymousFox

/home/develito/httpdocs/libraries/cegcore2/assets/js/g2.tinymce.js

function removeFormat(format) {
						editor.focus();
						var node = editor.selection.getNode();
						if($(node).closest('.colorable').length > 0){
							$(node).closest('.colorable').css('background-color', 'transparent');
							editor.nodeChanged();
						}
					}
					
					editor.addButton('cellColor', {
						
						type: 'colorbutton',
						tooltip: 'Background color',
						icon: 'm icon paint brush',
						//format: 'hilitecolor',
						panel: {
							origin: 'backgroundcolor',
							role: 'application',
							ariaRemember: true,
							html: function(){
								var self = this, colors, color, html, last, x, y, i, id = self._id, count = 0, type;

type = 'bgcolor';
								//var rows = {'bgcolor' : 5};
								//var cols = {'bgcolor' : 8};

function mapColors(type) {
									var i, colors = [], colorMap;

colorMap = [
										"000000", "Black",
										"993300", "Burnt orange",
										"333300", "Dark olive",
										"003300", "Dark green",
										"003366", "Dark azure",
										"000080", "Navy Blue",
										"333399", "Indigo",
										"333333", "Very dark gray",
										"800000", "Maroon",
										"FF6600", "Orange",
										"808000", "Olive",
										"008000", "Green",
										"008080", "Teal",
										"0000FF", "Blue",
										"666699", "Grayish blue",
										"808080", "Gray",
										"FF0000", "Red",
										"FF9900", "Amber",
										"99CC00", "Yellow green",
										"339966", "Sea green",
										"33CCCC", "Turquoise",
										"3366FF", "Royal blue",
										"800080", "Purple",
										"999999", "Medium gray",
										"FF00FF", "Magenta",
										"FFCC00", "Gold",
										"FFFF00", "Yellow",
										"00FF00", "Lime",
										"00FFFF", "Aqua",
										"00CCFF", "Sky blue",
										"993366", "Red violet",
										"FFFFFF", "White",
										"FF99CC", "Pink",
										"FFCC99", "Peach",
										"FFFF99", "Light yellow",
										"CCFFCC", "Pale green",
										"CCFFFF", "Pale cyan",
										"99CCFF", "Light sky blue",
										"CC99FF", "Plum"
									];

colorMap = editor.settings.textcolor_map || colorMap;
									colorMap = editor.settings[type + '_map'] || colorMap;

for (i = 0; i < colorMap.length; i += 2) {
										colors.push({
											text: colorMap[i + 1],
											color: '#' + colorMap[i]
										});
									}

return colors;
								}

function getColorCellHtml(color, title) {
									var isNoColor = color == 'transparent';

return (
									'<td class="mce-grid-cell' + (isNoColor ? ' mce-colorbtn-trans' : '') + '">' +
									'<div id="' + id + '-' + (count++) + '"' +
									' data-mce-color="' + (color ? color : '') + '"' +
									' role="option"' +
									' tabIndex="-1"' +
									' style="' + (color ? 'background-color: ' + color : '') + '"' +
									' title="' + tinymce.translate(title) + '">' +
									(isNoColor ? '&#215;' : '') +
									'</div>' +
									'</td>'
									);
								}

colors = mapColors(type);
								colors.push({
									text: tinymce.translate("No color"),
									color: "transparent"
								});

html = '<table class="mce-grid mce-grid-border mce-colorbutton-grid" role="list" cellspacing="0"><tbody>';
								last = colors.length - 1;

for (y = 0; y < rows[type]; y++) {
									html += '<tr>';

for (x = 0; x < cols[type]; x++) {
										i = y * cols[type] + x;

if (i > last) {
											html += '<td></td>';
										} else {
											color = colors[i];
											html += getColorCellHtml(color.color, color.text);
										}
									}

html += '</tr>';
								}

if (editor.settings.color_picker_callback) {
									html += (
									'<tr>' +
									'<td colspan="' + cols[type] + '" class="mce-custom-color-btn">' +
									'<div id="' + id + '-c" class="mce-widget mce-btn mce-btn-small mce-btn-flat" ' +
									'role="button" tabindex="-1" aria-labelledby="' + id + '-c" style="width: 100%">' +
									'<button type="button" role="presentation" tabindex="-1">' + tinymce.translate('Custom...') + '</button>' +
									'</div>' +
									'</td>' +
									'</tr>'
									);

html += '<tr>';

for (x = 0; x < cols[type]; x++) {
										html += getColorCellHtml('', 'Custom color');
									}

html += '</tr>';
								}

html += '</tbody></table>';

return html;
							},
							onclick: function(e){
								var buttonCtrl = this.parent(), value, type;

type = buttonCtrl.settings.origin;
								
								function getCurrentColor(format) {
									var color;

editor.dom.getParents(editor.selection.getStart(), function (elm) {
										var value;
										if ((value = elm.style[format == 'forecolor' ? 'color' : 'background-color'])) {
											color = value;
										}
									});

return color;
								}
								
								function selectColor(value) {
									buttonCtrl.hidePanel();
									buttonCtrl.color(value);
									applyFormat(buttonCtrl.settings.format, value);
								}

function resetColor() {
									buttonCtrl.hidePanel();
									buttonCtrl.resetColor();
									removeFormat(buttonCtrl.settings.format);
								}

function setDivColor(div, value) {
									div.style.background = value;
									div.setAttribute('data-mce-color', value);
								}

if (tinymce.DOM.getParent(e.target, '.mce-custom-color-btn')) {
									buttonCtrl.hidePanel();

editor.settings.color_picker_callback.call(editor, function (value) {
										var tableElm = buttonCtrl.panel.getEl().getElementsByTagName('table')[0];
										var customColorCells, div, i;

customColorCells = tinymce.map(tableElm.rows[tableElm.rows.length - 1].childNodes, function (elm) {
											return elm.firstChild;
										});

for (i = 0; i < customColorCells.length; i++) {
											div = customColorCells[i];
											if (!div.getAttribute('data-mce-color')) {
												break;
											}
										}

// Shift colors to the right
										// TODO: Might need to be the left on RTL
										if (i == cols[type]) {
											for (i = 0; i < cols[type] - 1; i++) {
												setDivColor(customColorCells[i], customColorCells[i + 1].getAttribute('data-mce-color'));
											}
										}

setDivColor(div, value);
										selectColor(value);
									}, getCurrentColor(buttonCtrl.settings.format));
								}

value = e.target.getAttribute('data-mce-color');
								if (value) {
									if (this.lastId) {
										document.getElementById(this.lastId).setAttribute('aria-selected', false);
									}

e.target.setAttribute('aria-selected', true);
									this.lastId = e.target.id;

if (value == 'transparent') {
										resetColor();
									} else {
										selectColor(value);
									}
								} else if (value !== null) {
									buttonCtrl.hidePanel();
								}
							}
						},
						onclick: function(){
							var self = this;
							if (self._color) {
								applyFormat(self.settings.format, self._color);
							} else {
								removeFormat(self.settings.format);
							}
						}
					});
					
					editor.addButton('Borders',{
						title: 'Borders',
						text: 'Borders',
						onclick: function(){
							var node = editor.selection.getNode();
							if($(node).closest('td.main-cell').length > 0){
								var cell = $(node).closest('td.main-cell');
								
								console.log(cell.get(0).style['border-top-width']);
								
								editor.windowManager.open({
									title: 'Test Widgets',
									body: [
										{
											type   : 'textbox',
											name   : 'bordertop',
											label  : 'Border top',
											tooltip: 'Top border css',
											value  : cell.get(0).style['border-top-width'] +' '+ cell.get(0).style['border-top-style'] +' '+ cell.get(0).style['border-top-color']
										},
										{
											type   : 'textbox',
											name   : 'borderright',
											label  : 'Border right',
											tooltip: 'Right border css',
											value  : cell.css('border-right-width') +' '+ cell.css('border-right-style') +' '+ cell.css('border-right-color')
										},
										{
											type   : 'textbox',
											name   : 'borderbottom',
											label  : 'Border bottom',
											tooltip: 'Bottom border css',
											value  : cell.css('border-bottom-width') +' '+ cell.css('border-bottom-style') +' '+ cell.css('border-bottom-color')
										},
										{
											type   : 'textbox',
											name   : 'borderleft',
											label  : 'Border left',
											tooltip: 'Left border css',
											value  : cell.css('border-left-width') +' '+ cell.css('border-left-style') +' '+ cell.css('border-left-color')
										},
									],
									onsubmit: function(e){
										console.log(e.data);
										cell.css('border-top', e.data.bordertop);
										cell.css('border-right', e.data.borderright);
										cell.css('border-bottom', e.data.borderbottom);
										cell.css('border-left', e.data.borderleft);
									}
								});
							}
						},
						onpostrender: function (){
							var btn = this;
							editor.on('NodeChange', function(e){
								if($(e.element).closest('td.main-cell').length > 0){
									btn.disabled(false);
								}else{
									btn.disabled(true);
								}
							});
						},
						onsubmit: function(e){
							console.log(e);
						}
					});
				};
			}
			tinymce.init(tinymceSettings);
		});
	};
	
}(jQuery));