Revert "MDL-46531 Make atto foreground colors and background colors configurable"
This reverts commitcb6e1d5270. This reverts commit7a5e605424, reversing changes made to7b9fb265d2. This reverts commit06404b0118, reversing changes made to0f87473fed. Conflicts: theme/bootstrapbase/style/moodle.css
This commit is contained in:
@@ -1,33 +1,3 @@
|
||||
.atto_backcolor_button .dropdown-menu {
|
||||
min-width: inherit;
|
||||
}
|
||||
|
||||
.atto_backcolor_button .dropdown-menu .atto_menuentry div {
|
||||
border: 1px solid #ccc;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.atto_backcolor_button .dropdown-menu .atto_menuentry .white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.atto_backcolor_button .dropdown-menu .atto_menuentry .red {
|
||||
background-color: #ef4540;
|
||||
}
|
||||
|
||||
.atto_backcolor_button .dropdown-menu .atto_menuentry .yellow {
|
||||
background-color: #ffcf35;
|
||||
}
|
||||
|
||||
.atto_backcolor_button .dropdown-menu .atto_menuentry .green {
|
||||
background-color: #98ca3e;
|
||||
}
|
||||
|
||||
.atto_backcolor_button .dropdown-menu .atto_menuentry .blue {
|
||||
background-color: #7d9fd3;
|
||||
}
|
||||
|
||||
.atto_backcolor_button .dropdown-menu .atto_menuentry .black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
+21
-40
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
|
||||
|
||||
var colors = [
|
||||
{
|
||||
name: 'white'
|
||||
name: 'white',
|
||||
color: '#FFFFFF'
|
||||
}, {
|
||||
name: 'red'
|
||||
name: 'red',
|
||||
color: '#EF4540'
|
||||
}, {
|
||||
name: 'yellow'
|
||||
name: 'yellow',
|
||||
color: '#FFCF35'
|
||||
}, {
|
||||
name: 'green'
|
||||
name: 'green',
|
||||
color: '#98CA3E'
|
||||
}, {
|
||||
name: 'blue'
|
||||
name: 'blue',
|
||||
color: '#7D9FD3'
|
||||
}, {
|
||||
name: 'black'
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -54,8 +60,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
var items = [];
|
||||
Y.Array.each(colors, function(color) {
|
||||
items.push({
|
||||
text: '<div class="' + color.name + '"></div>',
|
||||
callbackArgs: color.className || color.name
|
||||
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
|
||||
color.color +
|
||||
'"></div>',
|
||||
callbackArgs: color.color
|
||||
});
|
||||
});
|
||||
|
||||
@@ -74,40 +82,13 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
*
|
||||
* @method _changeStyle
|
||||
* @param {EventFacade} e
|
||||
* @param {string} backColorClass The class for the new font
|
||||
* @param {string} color The new background color
|
||||
* @private
|
||||
*/
|
||||
_changeStyle: function(e, backColorClass) {
|
||||
var host = this.get('host'),
|
||||
classname = host.PLACEHOLDER_CLASS,
|
||||
originalSelection = host.getSelection(),
|
||||
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
|
||||
|
||||
cssApplier.applyToSelection();
|
||||
|
||||
if (!Y.one('.' + classname)) {
|
||||
// The selection is likely empty. Create an empty span, and focus it.
|
||||
var firstRange = originalSelection[0],
|
||||
fragment = firstRange.createContextualFragment('<span class="' + classname + '"> </span>'),
|
||||
newRange = rangy.createRange(),
|
||||
selection;
|
||||
firstRange.insertNode(fragment.lastChild);
|
||||
firstRange.collapse();
|
||||
|
||||
// Update the originalSelection to point to the newly selected range.
|
||||
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
|
||||
selection = rangy.getSelection();
|
||||
selection.setSingleRange(newRange);
|
||||
originalSelection = selection.getAllRanges();
|
||||
}
|
||||
|
||||
this.editor.all('.' + classname).each(function (node) {
|
||||
node.setAttribute('class', 'backcolor ' + backColorClass);
|
||||
}, this);
|
||||
|
||||
host.setSelection(originalSelection);
|
||||
|
||||
this.markUpdated();
|
||||
_changeStyle: function(e, color) {
|
||||
this.get('host').formatSelectionInlineStyle({
|
||||
backgroundColor: color
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
YUI.add("moodle-atto_backcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_backcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=this.get("host"),i=r.PLACEHOLDER_CLASS,s=r.getSelection(),o=rangy.createCssClassApplier(i,{normalize:!0});o.applyToSelection();if(!e.one("."+i)){var u=s[0],a=u.createContextualFragment('<span class="'+i+'"> </span>'),f=rangy.createRange(),l;u.insertNode(a.lastChild),u.collapse(),f.selectNodeContents(e.one("."+i).getDOMNode()),l=rangy.getSelection(),l.setSingleRange(f),s=l.getAllRanges()}this.editor.all("."+i).each(function(e){e.setAttribute("class","backcolor "+n)},this),r.setSelection(s),this.markUpdated()}})},"@VERSION@");
|
||||
YUI.add("moodle-atto_backcolor-button",function(e,t){var n=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];e.namespace("M.atto_backcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: '+e.color+'"></div>',callbackArgs:e.color})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(e,t){this.get("host").formatSelectionInlineStyle({backgroundColor:t})}})},"@VERSION@");
|
||||
|
||||
+21
-40
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
|
||||
|
||||
var colors = [
|
||||
{
|
||||
name: 'white'
|
||||
name: 'white',
|
||||
color: '#FFFFFF'
|
||||
}, {
|
||||
name: 'red'
|
||||
name: 'red',
|
||||
color: '#EF4540'
|
||||
}, {
|
||||
name: 'yellow'
|
||||
name: 'yellow',
|
||||
color: '#FFCF35'
|
||||
}, {
|
||||
name: 'green'
|
||||
name: 'green',
|
||||
color: '#98CA3E'
|
||||
}, {
|
||||
name: 'blue'
|
||||
name: 'blue',
|
||||
color: '#7D9FD3'
|
||||
}, {
|
||||
name: 'black'
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -54,8 +60,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
var items = [];
|
||||
Y.Array.each(colors, function(color) {
|
||||
items.push({
|
||||
text: '<div class="' + color.name + '"></div>',
|
||||
callbackArgs: color.className || color.name
|
||||
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
|
||||
color.color +
|
||||
'"></div>',
|
||||
callbackArgs: color.color
|
||||
});
|
||||
});
|
||||
|
||||
@@ -74,40 +82,13 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
*
|
||||
* @method _changeStyle
|
||||
* @param {EventFacade} e
|
||||
* @param {string} backColorClass The class for the new font
|
||||
* @param {string} color The new background color
|
||||
* @private
|
||||
*/
|
||||
_changeStyle: function(e, backColorClass) {
|
||||
var host = this.get('host'),
|
||||
classname = host.PLACEHOLDER_CLASS,
|
||||
originalSelection = host.getSelection(),
|
||||
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
|
||||
|
||||
cssApplier.applyToSelection();
|
||||
|
||||
if (!Y.one('.' + classname)) {
|
||||
// The selection is likely empty. Create an empty span, and focus it.
|
||||
var firstRange = originalSelection[0],
|
||||
fragment = firstRange.createContextualFragment('<span class="' + classname + '"> </span>'),
|
||||
newRange = rangy.createRange(),
|
||||
selection;
|
||||
firstRange.insertNode(fragment.lastChild);
|
||||
firstRange.collapse();
|
||||
|
||||
// Update the originalSelection to point to the newly selected range.
|
||||
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
|
||||
selection = rangy.getSelection();
|
||||
selection.setSingleRange(newRange);
|
||||
originalSelection = selection.getAllRanges();
|
||||
}
|
||||
|
||||
this.editor.all('.' + classname).each(function (node) {
|
||||
node.setAttribute('class', 'backcolor ' + backColorClass);
|
||||
}, this);
|
||||
|
||||
host.setSelection(originalSelection);
|
||||
|
||||
this.markUpdated();
|
||||
_changeStyle: function(e, color) {
|
||||
this.get('host').formatSelectionInlineStyle({
|
||||
backgroundColor: color
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+21
-40
@@ -33,17 +33,23 @@
|
||||
|
||||
var colors = [
|
||||
{
|
||||
name: 'white'
|
||||
name: 'white',
|
||||
color: '#FFFFFF'
|
||||
}, {
|
||||
name: 'red'
|
||||
name: 'red',
|
||||
color: '#EF4540'
|
||||
}, {
|
||||
name: 'yellow'
|
||||
name: 'yellow',
|
||||
color: '#FFCF35'
|
||||
}, {
|
||||
name: 'green'
|
||||
name: 'green',
|
||||
color: '#98CA3E'
|
||||
}, {
|
||||
name: 'blue'
|
||||
name: 'blue',
|
||||
color: '#7D9FD3'
|
||||
}, {
|
||||
name: 'black'
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -52,8 +58,10 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
var items = [];
|
||||
Y.Array.each(colors, function(color) {
|
||||
items.push({
|
||||
text: '<div class="' + color.name + '"></div>',
|
||||
callbackArgs: color.className || color.name
|
||||
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
|
||||
color.color +
|
||||
'"></div>',
|
||||
callbackArgs: color.color
|
||||
});
|
||||
});
|
||||
|
||||
@@ -72,39 +80,12 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
*
|
||||
* @method _changeStyle
|
||||
* @param {EventFacade} e
|
||||
* @param {string} backColorClass The class for the new font
|
||||
* @param {string} color The new background color
|
||||
* @private
|
||||
*/
|
||||
_changeStyle: function(e, backColorClass) {
|
||||
var host = this.get('host'),
|
||||
classname = host.PLACEHOLDER_CLASS,
|
||||
originalSelection = host.getSelection(),
|
||||
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
|
||||
|
||||
cssApplier.applyToSelection();
|
||||
|
||||
if (!Y.one('.' + classname)) {
|
||||
// The selection is likely empty. Create an empty span, and focus it.
|
||||
var firstRange = originalSelection[0],
|
||||
fragment = firstRange.createContextualFragment('<span class="' + classname + '"> </span>'),
|
||||
newRange = rangy.createRange(),
|
||||
selection;
|
||||
firstRange.insertNode(fragment.lastChild);
|
||||
firstRange.collapse();
|
||||
|
||||
// Update the originalSelection to point to the newly selected range.
|
||||
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
|
||||
selection = rangy.getSelection();
|
||||
selection.setSingleRange(newRange);
|
||||
originalSelection = selection.getAllRanges();
|
||||
}
|
||||
|
||||
this.editor.all('.' + classname).each(function (node) {
|
||||
node.setAttribute('class', 'backcolor ' + backColorClass);
|
||||
}, this);
|
||||
|
||||
host.setSelection(originalSelection);
|
||||
|
||||
this.markUpdated();
|
||||
_changeStyle: function(e, color) {
|
||||
this.get('host').formatSelectionInlineStyle({
|
||||
backgroundColor: color
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,33 +1,3 @@
|
||||
.atto_fontcolor_button .dropdown-menu {
|
||||
min-width: inherit;
|
||||
}
|
||||
|
||||
.atto_fontcolor_button .dropdown-menu .atto_menuentry div {
|
||||
border: 1px solid #ccc;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.atto_fontcolor_button .dropdown-menu .atto_menuentry .white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.atto_fontcolor_button .dropdown-menu .atto_menuentry .red {
|
||||
background-color: #ef4540;
|
||||
}
|
||||
|
||||
.atto_fontcolor_button .dropdown-menu .atto_menuentry .yellow {
|
||||
background-color: #ffcf35;
|
||||
}
|
||||
|
||||
.atto_fontcolor_button .dropdown-menu .atto_menuentry .green {
|
||||
background-color: #98ca3e;
|
||||
}
|
||||
|
||||
.atto_fontcolor_button .dropdown-menu .atto_menuentry .blue {
|
||||
background-color: #7d9fd3;
|
||||
}
|
||||
|
||||
.atto_fontcolor_button .dropdown-menu .atto_menuentry .black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
+22
-41
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
|
||||
|
||||
var colors = [
|
||||
{
|
||||
name: 'white'
|
||||
name: 'white',
|
||||
color: '#FFFFFF'
|
||||
}, {
|
||||
name: 'red'
|
||||
name: 'red',
|
||||
color: '#EF4540'
|
||||
}, {
|
||||
name: 'yellow'
|
||||
name: 'yellow',
|
||||
color: '#FFCF35'
|
||||
}, {
|
||||
name: 'green'
|
||||
name: 'green',
|
||||
color: '#98CA3E'
|
||||
}, {
|
||||
name: 'blue'
|
||||
name: 'blue',
|
||||
color: '#7D9FD3'
|
||||
}, {
|
||||
name: 'black'
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -54,8 +60,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
var items = [];
|
||||
Y.Array.each(colors, function(color) {
|
||||
items.push({
|
||||
text: '<div class="' + color.name + '"></div>',
|
||||
callbackArgs: color.className || color.name,
|
||||
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
|
||||
color.color +
|
||||
'"></div>',
|
||||
callbackArgs: color.color,
|
||||
callback: this._changeStyle
|
||||
});
|
||||
});
|
||||
@@ -72,44 +80,17 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
},
|
||||
|
||||
/**
|
||||
* Change the font color using the specified class
|
||||
* Change the font color to the specified color.
|
||||
*
|
||||
* @method _changeStyle
|
||||
* @param {EventFacade} e
|
||||
* @param {string} fontColorClass The class for the new font
|
||||
* @param {string} color The new font color
|
||||
* @private
|
||||
*/
|
||||
_changeStyle: function(e, fontColorClass) {
|
||||
var host = this.get('host'),
|
||||
classname = host.PLACEHOLDER_CLASS,
|
||||
originalSelection = host.getSelection(),
|
||||
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
|
||||
|
||||
cssApplier.applyToSelection();
|
||||
|
||||
if (!Y.one('.' + classname)) {
|
||||
// The selection is likely empty. Create an empty span, and focus it.
|
||||
var firstRange = originalSelection[0],
|
||||
fragment = firstRange.createContextualFragment('<span class="' + classname + '"> </span>'),
|
||||
newRange = rangy.createRange(),
|
||||
selection;
|
||||
firstRange.insertNode(fragment.lastChild);
|
||||
firstRange.collapse();
|
||||
|
||||
// Update the originalSelection to point to the newly selected range.
|
||||
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
|
||||
selection = rangy.getSelection();
|
||||
selection.setSingleRange(newRange);
|
||||
originalSelection = selection.getAllRanges();
|
||||
}
|
||||
|
||||
this.editor.all('.' + classname).each(function (node) {
|
||||
node.setAttribute('class', 'fontcolor ' + fontColorClass);
|
||||
}, this);
|
||||
|
||||
host.setSelection(originalSelection);
|
||||
|
||||
this.markUpdated();
|
||||
_changeStyle: function(e, color) {
|
||||
this.get('host').formatSelectionInlineStyle({
|
||||
color: color
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
YUI.add("moodle-atto_fontcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_fontcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=this.get("host"),i=r.PLACEHOLDER_CLASS,s=r.getSelection(),o=rangy.createCssClassApplier(i,{normalize:!0});o.applyToSelection();if(!e.one("."+i)){var u=s[0],a=u.createContextualFragment('<span class="'+i+'"> </span>'),f=rangy.createRange(),l;u.insertNode(a.lastChild),u.collapse(),f.selectNodeContents(e.one("."+i).getDOMNode()),l=rangy.getSelection(),l.setSingleRange(f),s=l.getAllRanges()}this.editor.all("."+i).each(function(e){e.setAttribute("class","fontcolor "+n)},this),r.setSelection(s),this.markUpdated()}})},"@VERSION@");
|
||||
YUI.add("moodle-atto_fontcolor-button",function(e,t){var n=[{name:"white",color:"#FFFFFF"},{name:"red",color:"#EF4540"},{name:"yellow",color:"#FFCF35"},{name:"green",color:"#98CA3E"},{name:"blue",color:"#7D9FD3"},{name:"black",color:"#333333"}];e.namespace("M.atto_fontcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: '+e.color+'"></div>',callbackArgs:e.color,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(e,t){this.get("host").formatSelectionInlineStyle({color:t})}})},"@VERSION@");
|
||||
|
||||
+22
-41
@@ -35,17 +35,23 @@ YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
|
||||
|
||||
var colors = [
|
||||
{
|
||||
name: 'white'
|
||||
name: 'white',
|
||||
color: '#FFFFFF'
|
||||
}, {
|
||||
name: 'red'
|
||||
name: 'red',
|
||||
color: '#EF4540'
|
||||
}, {
|
||||
name: 'yellow'
|
||||
name: 'yellow',
|
||||
color: '#FFCF35'
|
||||
}, {
|
||||
name: 'green'
|
||||
name: 'green',
|
||||
color: '#98CA3E'
|
||||
}, {
|
||||
name: 'blue'
|
||||
name: 'blue',
|
||||
color: '#7D9FD3'
|
||||
}, {
|
||||
name: 'black'
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -54,8 +60,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
var items = [];
|
||||
Y.Array.each(colors, function(color) {
|
||||
items.push({
|
||||
text: '<div class="' + color.name + '"></div>',
|
||||
callbackArgs: color.className || color.name,
|
||||
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
|
||||
color.color +
|
||||
'"></div>',
|
||||
callbackArgs: color.color,
|
||||
callback: this._changeStyle
|
||||
});
|
||||
});
|
||||
@@ -72,44 +80,17 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
},
|
||||
|
||||
/**
|
||||
* Change the font color using the specified class
|
||||
* Change the font color to the specified color.
|
||||
*
|
||||
* @method _changeStyle
|
||||
* @param {EventFacade} e
|
||||
* @param {string} fontColorClass The class for the new font
|
||||
* @param {string} color The new font color
|
||||
* @private
|
||||
*/
|
||||
_changeStyle: function(e, fontColorClass) {
|
||||
var host = this.get('host'),
|
||||
classname = host.PLACEHOLDER_CLASS,
|
||||
originalSelection = host.getSelection(),
|
||||
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
|
||||
|
||||
cssApplier.applyToSelection();
|
||||
|
||||
if (!Y.one('.' + classname)) {
|
||||
// The selection is likely empty. Create an empty span, and focus it.
|
||||
var firstRange = originalSelection[0],
|
||||
fragment = firstRange.createContextualFragment('<span class="' + classname + '"> </span>'),
|
||||
newRange = rangy.createRange(),
|
||||
selection;
|
||||
firstRange.insertNode(fragment.lastChild);
|
||||
firstRange.collapse();
|
||||
|
||||
// Update the originalSelection to point to the newly selected range.
|
||||
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
|
||||
selection = rangy.getSelection();
|
||||
selection.setSingleRange(newRange);
|
||||
originalSelection = selection.getAllRanges();
|
||||
}
|
||||
|
||||
this.editor.all('.' + classname).each(function (node) {
|
||||
node.setAttribute('class', 'fontcolor ' + fontColorClass);
|
||||
}, this);
|
||||
|
||||
host.setSelection(originalSelection);
|
||||
|
||||
this.markUpdated();
|
||||
_changeStyle: function(e, color) {
|
||||
this.get('host').formatSelectionInlineStyle({
|
||||
color: color
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+22
-41
@@ -33,17 +33,23 @@
|
||||
|
||||
var colors = [
|
||||
{
|
||||
name: 'white'
|
||||
name: 'white',
|
||||
color: '#FFFFFF'
|
||||
}, {
|
||||
name: 'red'
|
||||
name: 'red',
|
||||
color: '#EF4540'
|
||||
}, {
|
||||
name: 'yellow'
|
||||
name: 'yellow',
|
||||
color: '#FFCF35'
|
||||
}, {
|
||||
name: 'green'
|
||||
name: 'green',
|
||||
color: '#98CA3E'
|
||||
}, {
|
||||
name: 'blue'
|
||||
name: 'blue',
|
||||
color: '#7D9FD3'
|
||||
}, {
|
||||
name: 'black'
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
}
|
||||
];
|
||||
|
||||
@@ -52,8 +58,10 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
var items = [];
|
||||
Y.Array.each(colors, function(color) {
|
||||
items.push({
|
||||
text: '<div class="' + color.name + '"></div>',
|
||||
callbackArgs: color.className || color.name,
|
||||
text: '<div style="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ' +
|
||||
color.color +
|
||||
'"></div>',
|
||||
callbackArgs: color.color,
|
||||
callback: this._changeStyle
|
||||
});
|
||||
});
|
||||
@@ -70,43 +78,16 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
|
||||
},
|
||||
|
||||
/**
|
||||
* Change the font color using the specified class
|
||||
* Change the font color to the specified color.
|
||||
*
|
||||
* @method _changeStyle
|
||||
* @param {EventFacade} e
|
||||
* @param {string} fontColorClass The class for the new font
|
||||
* @param {string} color The new font color
|
||||
* @private
|
||||
*/
|
||||
_changeStyle: function(e, fontColorClass) {
|
||||
var host = this.get('host'),
|
||||
classname = host.PLACEHOLDER_CLASS,
|
||||
originalSelection = host.getSelection(),
|
||||
cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
|
||||
|
||||
cssApplier.applyToSelection();
|
||||
|
||||
if (!Y.one('.' + classname)) {
|
||||
// The selection is likely empty. Create an empty span, and focus it.
|
||||
var firstRange = originalSelection[0],
|
||||
fragment = firstRange.createContextualFragment('<span class="' + classname + '"> </span>'),
|
||||
newRange = rangy.createRange(),
|
||||
selection;
|
||||
firstRange.insertNode(fragment.lastChild);
|
||||
firstRange.collapse();
|
||||
|
||||
// Update the originalSelection to point to the newly selected range.
|
||||
newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
|
||||
selection = rangy.getSelection();
|
||||
selection.setSingleRange(newRange);
|
||||
originalSelection = selection.getAllRanges();
|
||||
}
|
||||
|
||||
this.editor.all('.' + classname).each(function (node) {
|
||||
node.setAttribute('class', 'fontcolor ' + fontColorClass);
|
||||
}, this);
|
||||
|
||||
host.setSelection(originalSelection);
|
||||
|
||||
this.markUpdated();
|
||||
_changeStyle: function(e, color) {
|
||||
this.get('host').formatSelectionInlineStyle({
|
||||
color: color
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2301,58 +2301,6 @@ body.lockscroll {
|
||||
border: inherit;
|
||||
}
|
||||
|
||||
/* Core content colours - these are defined in Atto but can be overwritten
|
||||
* by themes. This is an alternative to using fixed colours applied using
|
||||
* the style attribute */
|
||||
|
||||
.fontcolor.white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fontcolor.red {
|
||||
color: #ef4540;
|
||||
}
|
||||
|
||||
.fontcolor.yellow {
|
||||
color: #ffcf35;
|
||||
}
|
||||
|
||||
.fontcolor.green {
|
||||
color: #98ca3e;
|
||||
}
|
||||
|
||||
.fontcolor.blue {
|
||||
color: #7d9fd3;
|
||||
}
|
||||
|
||||
.fontcolor.black {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.backcolor.white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.backcolor.red {
|
||||
background-color: #ef4540;
|
||||
}
|
||||
|
||||
.backcolor.yellow {
|
||||
background-color: #ffcf35;
|
||||
}
|
||||
|
||||
.backcolor.green {
|
||||
background-color: #98ca3e;
|
||||
}
|
||||
|
||||
.backcolor.blue {
|
||||
background-color: #7d9fd3;
|
||||
}
|
||||
|
||||
.backcolor.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.well {
|
||||
min-height: 20px;
|
||||
padding: 19px;
|
||||
|
||||
@@ -1,68 +1,5 @@
|
||||
/* core.less */
|
||||
|
||||
/* Core content colours - these are defined in Atto but can be overwritten
|
||||
* by themes. This is an alternative to using fixed colours applied using
|
||||
* the style attribute */
|
||||
|
||||
@contentColorWhite: #fff;
|
||||
@contentColorRed: #ef4540;
|
||||
@contentColorYellow: #ffcf35;
|
||||
@contentColorGreen: #98ca3e;
|
||||
@contentColorBlue: #7d9fd3;
|
||||
@contentColorBlack: #000;
|
||||
|
||||
.fontcolor {
|
||||
&.white {
|
||||
color: @contentColorWhite;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: @contentColorRed
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
color: @contentColorYellow;
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: @contentColorGreen;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: @contentColorBlue;
|
||||
}
|
||||
|
||||
&.black {
|
||||
color: @contentColorBlack;
|
||||
}
|
||||
}
|
||||
|
||||
.backcolor {
|
||||
&.white {
|
||||
background-color: @contentColorWhite;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background-color: @contentColorRed
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background-color: @contentColorYellow;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: @contentColorGreen;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background-color: @contentColorBlue;
|
||||
}
|
||||
|
||||
&.black {
|
||||
background-color: @contentColorBlack;
|
||||
}
|
||||
}
|
||||
|
||||
/** Page layout CSS starts **/
|
||||
.layout-option-noheader #page-header,
|
||||
.layout-option-nonavbar #page-navbar,
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user