MDL-43861: Atto Plugins: create new plugin for font and background colors

This commit is contained in:
Rossiani Wijaya
2014-03-26 09:59:36 +08:00
committed by Damyon Wiese
parent 0012a94601
commit 534cf7b730
21 changed files with 883 additions and 17 deletions
@@ -0,0 +1,25 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Strings for component 'atto_backcolor', language 'en'.
*
* @package atto_backcolor
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$string['pluginname'] = 'Background color';
@@ -0,0 +1,29 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor integration version file.
*
* @package atto_backcolor
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
defined('MOODLE_INTERNAL') || die();
$plugin->version = 2014020600; // The current plugin version (Date: YYYYMMDDXX).
$plugin->requires = 2013110500; // Requires this Moodle version.
$plugin->component = 'atto_backcolor'; // Full name of the plugin (used for diagnostics).
@@ -0,0 +1,134 @@
YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor background color plugin.
*
* @package editor-atto
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.atto_backcolor = M.atto_backcolor || {
init : function(params) {
var plugin = 'backcolor';
var rgb_white = '#FFFFFF',
rgb_red = '#EF4540',
rgb_yellow = '#FFCF35',
rgb_green = '#98CA3E',
rgb_blue = '#7D9FD3',
rgb_black = '#333333';
var click_white = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_white);
};
var click_red = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_red);
};
var click_yellow = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_yellow);
};
var click_green = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_green);
};
var click_blue = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_blue);
};
var click_black = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_black);
};
var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
var white = '<div style="' + buttoncss + rgb_white + '"></div>';
var red = '<div style="' + buttoncss + rgb_red + '"></div>';
var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
var green = '<div style="' + buttoncss + rgb_green + '"></div>';
var blue = '<div style="' + buttoncss + rgb_blue + '"></div>';
var black = '<div style="' + buttoncss + rgb_black + '"></div>';
var iconurl = M.util.image_url('e/text_highlight', 'core');
M.editor_atto.add_toolbar_menu(params.elementid,
plugin,
iconurl,
params.group,
[
{'text' : white, 'handler' : click_white},
{'text' : red, 'handler' : click_red},
{'text' : yellow, 'handler' : click_yellow},
{'text' : green, 'handler' : click_green},
{'text' : blue, 'handler' : click_blue},
{'text' : black, 'handler' : click_black}
],
'4');
},
/**
* Handle to change the background color.
* @param event e - The event that triggered this.
* @param string elementid - the elemen id of menu icon.
* @param string color - The color for the background.
*/
change_color : function(e, elementid, color) {
e.preventDefault();
if (!M.editor_atto.is_active(elementid)) {
M.editor_atto.focus(elementid);
}
if (window.getSelection) {
// Test for IE9 and non-IE browsers.
try {
if (!document.execCommand("BackColor", false, color)) {
M.atto_backcolor.set_back_color(color);
}
} catch (ex) {
M.atto_backcolor.set_back_color(color);
}
} else if (document.selection && document.selection.createRange) {
// Test for IE8 or less.
range = document.selection.createRange();
range.execCommand("BackColor", false, color);
}
// Clean the YUI ids from the HTML.
M.editor_atto.text_updated(elementid);
},
/**
* Change the background color.
* This function is an alternative use for IE broswers.
* @param string color - The color for the background.
*/
set_back_color : function (color) {
var selection = window.getSelection();
var range = null;
if (selection.rangeCount && selection.getRangeAt) {
range = selection.getRangeAt(0);
}
document.designMode = "on";
if (range) {
selection.removeAllRanges();
selection.addRange(range);
}
if (!document.execCommand("HiliteColor", false, color)) {
document.execCommand("BackColor", false, color);
}
document.designMode = "off";
}
};
}, '@VERSION@');
@@ -0,0 +1 @@
YUI.add("moodle-atto_backcolor-button",function(e,t){M.atto_backcolor=M.atto_backcolor||{init:function(e){var t="backcolor",n="#FFFFFF",r="#EF4540",i="#FFCF35",s="#98CA3E",o="#7D9FD3",u="#333333",a=function(e,t){M.atto_backcolor.change_color(e,t,n)},f=function(e,t){M.atto_backcolor.change_color(e,t,r)},l=function(e,t){M.atto_backcolor.change_color(e,t,i)},c=function(e,t){M.atto_backcolor.change_color(e,t,s)},h=function(e,t){M.atto_backcolor.change_color(e,t,o)},p=function(e,t){M.atto_backcolor.change_color(e,t,u)},d="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ",v='<div style="'+d+n+'"></div>',m='<div style="'+d+r+'"></div>',g='<div style="'+d+i+'"></div>',y='<div style="'+d+s+'"></div>',b='<div style="'+d+o+'"></div>',w='<div style="'+d+u+'"></div>',E=M.util.image_url("e/text_highlight","core");M.editor_atto.add_toolbar_menu(e.elementid,t,E,e.group,[{text:v,handler:a},{text:m,handler:f},{text:g,handler:l},{text:y,handler:c},{text:b,handler:h},{text:w,handler:p}],"4")},change_color:function(e,t,n){e.preventDefault(),M.editor_atto.is_active(t)||M.editor_atto.focus(t);if(window.getSelection)try{document.execCommand("BackColor",!1,n)||M.atto_backcolor.set_back_color(n)}catch(r){M.atto_backcolor.set_back_color(n)}else document.selection&&document.selection.createRange&&(range=document.selection.createRange(),range.execCommand("BackColor",!1,n));M.editor_atto.text_updated(t)},set_back_color:function(e){var t=window.getSelection(),n=null;t.rangeCount&&t.getRangeAt&&(n=t.getRangeAt(0)),document.designMode="on",n&&(t.removeAllRanges(),t.addRange(n)),document.execCommand("HiliteColor",!1,e)||document.execCommand("BackColor",!1,e),document.designMode="off"}}},"@VERSION@");
@@ -0,0 +1,134 @@
YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor background color plugin.
*
* @package editor-atto
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.atto_backcolor = M.atto_backcolor || {
init : function(params) {
var plugin = 'backcolor';
var rgb_white = '#FFFFFF',
rgb_red = '#EF4540',
rgb_yellow = '#FFCF35',
rgb_green = '#98CA3E',
rgb_blue = '#7D9FD3',
rgb_black = '#333333';
var click_white = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_white);
};
var click_red = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_red);
};
var click_yellow = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_yellow);
};
var click_green = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_green);
};
var click_blue = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_blue);
};
var click_black = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_black);
};
var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
var white = '<div style="' + buttoncss + rgb_white + '"></div>';
var red = '<div style="' + buttoncss + rgb_red + '"></div>';
var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
var green = '<div style="' + buttoncss + rgb_green + '"></div>';
var blue = '<div style="' + buttoncss + rgb_blue + '"></div>';
var black = '<div style="' + buttoncss + rgb_black + '"></div>';
var iconurl = M.util.image_url('e/text_highlight', 'core');
M.editor_atto.add_toolbar_menu(params.elementid,
plugin,
iconurl,
params.group,
[
{'text' : white, 'handler' : click_white},
{'text' : red, 'handler' : click_red},
{'text' : yellow, 'handler' : click_yellow},
{'text' : green, 'handler' : click_green},
{'text' : blue, 'handler' : click_blue},
{'text' : black, 'handler' : click_black}
],
'4');
},
/**
* Handle to change the background color.
* @param event e - The event that triggered this.
* @param string elementid - the elemen id of menu icon.
* @param string color - The color for the background.
*/
change_color : function(e, elementid, color) {
e.preventDefault();
if (!M.editor_atto.is_active(elementid)) {
M.editor_atto.focus(elementid);
}
if (window.getSelection) {
// Test for IE9 and non-IE browsers.
try {
if (!document.execCommand("BackColor", false, color)) {
M.atto_backcolor.set_back_color(color);
}
} catch (ex) {
M.atto_backcolor.set_back_color(color);
}
} else if (document.selection && document.selection.createRange) {
// Test for IE8 or less.
range = document.selection.createRange();
range.execCommand("BackColor", false, color);
}
// Clean the YUI ids from the HTML.
M.editor_atto.text_updated(elementid);
},
/**
* Change the background color.
* This function is an alternative use for IE broswers.
* @param string color - The color for the background.
*/
set_back_color : function (color) {
var selection = window.getSelection();
var range = null;
if (selection.rangeCount && selection.getRangeAt) {
range = selection.getRangeAt(0);
}
document.designMode = "on";
if (range) {
selection.removeAllRanges();
selection.addRange(range);
}
if (!document.execCommand("HiliteColor", false, color)) {
document.execCommand("BackColor", false, color);
}
document.designMode = "off";
}
};
}, '@VERSION@');
@@ -0,0 +1,10 @@
{
"name": "moodle-atto_backcolor-button",
"builds": {
"moodle-atto_backcolor-button": {
"jsfiles": [
"button.js"
]
}
}
}
@@ -0,0 +1,130 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor background color plugin.
*
* @package editor-atto
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.atto_backcolor = M.atto_backcolor || {
init : function(params) {
var plugin = 'backcolor';
var rgb_white = '#FFFFFF',
rgb_red = '#EF4540',
rgb_yellow = '#FFCF35',
rgb_green = '#98CA3E',
rgb_blue = '#7D9FD3',
rgb_black = '#333333';
var click_white = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_white);
};
var click_red = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_red);
};
var click_yellow = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_yellow);
};
var click_green = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_green);
};
var click_blue = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_blue);
};
var click_black = function(e, elementid) {
M.atto_backcolor.change_color(e, elementid, rgb_black);
};
var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
var white = '<div style="' + buttoncss + rgb_white + '"></div>';
var red = '<div style="' + buttoncss + rgb_red + '"></div>';
var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
var green = '<div style="' + buttoncss + rgb_green + '"></div>';
var blue = '<div style="' + buttoncss + rgb_blue + '"></div>';
var black = '<div style="' + buttoncss + rgb_black + '"></div>';
var iconurl = M.util.image_url('e/text_highlight', 'core');
M.editor_atto.add_toolbar_menu(params.elementid,
plugin,
iconurl,
params.group,
[
{'text' : white, 'handler' : click_white},
{'text' : red, 'handler' : click_red},
{'text' : yellow, 'handler' : click_yellow},
{'text' : green, 'handler' : click_green},
{'text' : blue, 'handler' : click_blue},
{'text' : black, 'handler' : click_black}
],
'4');
},
/**
* Handle to change the background color.
* @param event e - The event that triggered this.
* @param string elementid - the elemen id of menu icon.
* @param string color - The color for the background.
*/
change_color : function(e, elementid, color) {
e.preventDefault();
if (!M.editor_atto.is_active(elementid)) {
M.editor_atto.focus(elementid);
}
if (window.getSelection) {
// Test for IE9 and non-IE browsers.
try {
if (!document.execCommand("BackColor", false, color)) {
M.atto_backcolor.set_back_color(color);
}
} catch (ex) {
M.atto_backcolor.set_back_color(color);
}
} else if (document.selection && document.selection.createRange) {
// Test for IE8 or less.
range = document.selection.createRange();
range.execCommand("BackColor", false, color);
}
// Clean the YUI ids from the HTML.
M.editor_atto.text_updated(elementid);
},
/**
* Change the background color.
* This function is an alternative use for IE broswers.
* @param string color - The color for the background.
*/
set_back_color : function (color) {
var selection = window.getSelection();
var range = null;
if (selection.rangeCount && selection.getRangeAt) {
range = selection.getRangeAt(0);
}
document.designMode = "on";
if (range) {
selection.removeAllRanges();
selection.addRange(range);
}
if (!document.execCommand("HiliteColor", false, color)) {
document.execCommand("BackColor", false, color);
}
document.designMode = "off";
}
};
@@ -0,0 +1,5 @@
{
"moodle-atto_backcolor-button": {
"requires": ["node"]
}
}
@@ -0,0 +1,25 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Strings for component 'atto_fontcolor', language 'en'.
*
* @package atto_fontcolor
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$string['pluginname'] = 'Font color';
@@ -0,0 +1,29 @@
<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor integration version file.
*
* @package atto_fontcolor
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
defined('MOODLE_INTERNAL') || die();
$plugin->version = 2014020600; // The current plugin version (Date: YYYYMMDDXX).
$plugin->requires = 2013110500; // Requires this Moodle version.
$plugin->component = 'atto_fontcolor'; // Full name of the plugin (used for diagnostics).
@@ -0,0 +1,99 @@
YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor font color plugin.
*
* @package editor-atto
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.atto_fontcolor = M.atto_fontcolor || {
dialogue : null,
init : function(params) {
var plugin = 'fontcolor';
var rgb_white = '#FFFFFF',
rgb_red = '#EF4540',
rgb_yellow = '#FFCF35',
rgb_green = '#98CA3E',
rgb_blue = '#7D9FD3',
rgb_black = '#333333';
var click_white = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, 'transparent');
};
var click_red = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_red);
};
var click_yellow = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_yellow);
};
var click_green = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_green);
};
var click_blue = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_blue);
};
var click_black = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_black);
};
var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
var white = '<div style="' + buttoncss + rgb_white + '"></div>';
var red = '<div style="' + buttoncss + rgb_red + '"></div>';
var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
var green = '<div style="' + buttoncss + rgb_green + '"></div>';
var blue = '<div style="' + buttoncss + rgb_blue + '"></div>';
var black = '<div style="' + buttoncss + rgb_black + '"></div>';
var iconurl = M.util.image_url('e/text_color', 'core');
M.editor_atto.add_toolbar_menu(params.elementid,
plugin,
iconurl,
params.group,
[
{'text' : white, 'handler' : click_white},
{'text' : red, 'handler' : click_red},
{'text' : yellow, 'handler' : click_yellow},
{'text' : green, 'handler' : click_green},
{'text' : blue, 'handler' : click_blue},
{'text' : black, 'handler' : click_black}
],
'4',
'#333333');
},
/**
* Handle to change the editor font color.
* @param event e - The event that triggered this.
* @param string elementid - the elemen id of menu icon.
* @param string color - The color for the background.
*/
change_color : function(e, elementid, color) {
e.preventDefault();
if (!M.editor_atto.is_active(elementid)) {
M.editor_atto.focus(elementid);
}
document.execCommand('foreColor', 0, color);
// Clean the YUI ids from the HTML.
M.editor_atto.text_updated(elementid);
}
};
}, '@VERSION@');
@@ -0,0 +1 @@
YUI.add("moodle-atto_fontcolor-button",function(e,t){M.atto_fontcolor=M.atto_fontcolor||{dialogue:null,init:function(e){var t="fontcolor",n="#FFFFFF",r="#EF4540",i="#FFCF35",s="#98CA3E",o="#7D9FD3",u="#333333",a=function(e,t){M.atto_fontcolor.change_color(e,t,"transparent")},f=function(e,t){M.atto_fontcolor.change_color(e,t,r)},l=function(e,t){M.atto_fontcolor.change_color(e,t,i)},c=function(e,t){M.atto_fontcolor.change_color(e,t,s)},h=function(e,t){M.atto_fontcolor.change_color(e,t,o)},p=function(e,t){M.atto_fontcolor.change_color(e,t,u)},d="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ",v='<div style="'+d+n+'"></div>',m='<div style="'+d+r+'"></div>',g='<div style="'+d+i+'"></div>',y='<div style="'+d+s+'"></div>',b='<div style="'+d+o+'"></div>',w='<div style="'+d+u+'"></div>',E=M.util.image_url("e/text_color","core");M.editor_atto.add_toolbar_menu(e.elementid,t,E,e.group,[{text:v,handler:a},{text:m,handler:f},{text:g,handler:l},{text:y,handler:c},{text:b,handler:h},{text:w,handler:p}],"4","#333333")},change_color:function(e,t,n){e.preventDefault(),M.editor_atto.is_active(t)||M.editor_atto.focus(t),document.execCommand("foreColor",0,n),M.editor_atto.text_updated(t)}}},"@VERSION@");
@@ -0,0 +1,99 @@
YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor font color plugin.
*
* @package editor-atto
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.atto_fontcolor = M.atto_fontcolor || {
dialogue : null,
init : function(params) {
var plugin = 'fontcolor';
var rgb_white = '#FFFFFF',
rgb_red = '#EF4540',
rgb_yellow = '#FFCF35',
rgb_green = '#98CA3E',
rgb_blue = '#7D9FD3',
rgb_black = '#333333';
var click_white = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, 'transparent');
};
var click_red = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_red);
};
var click_yellow = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_yellow);
};
var click_green = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_green);
};
var click_blue = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_blue);
};
var click_black = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_black);
};
var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
var white = '<div style="' + buttoncss + rgb_white + '"></div>';
var red = '<div style="' + buttoncss + rgb_red + '"></div>';
var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
var green = '<div style="' + buttoncss + rgb_green + '"></div>';
var blue = '<div style="' + buttoncss + rgb_blue + '"></div>';
var black = '<div style="' + buttoncss + rgb_black + '"></div>';
var iconurl = M.util.image_url('e/text_color', 'core');
M.editor_atto.add_toolbar_menu(params.elementid,
plugin,
iconurl,
params.group,
[
{'text' : white, 'handler' : click_white},
{'text' : red, 'handler' : click_red},
{'text' : yellow, 'handler' : click_yellow},
{'text' : green, 'handler' : click_green},
{'text' : blue, 'handler' : click_blue},
{'text' : black, 'handler' : click_black}
],
'4',
'#333333');
},
/**
* Handle to change the editor font color.
* @param event e - The event that triggered this.
* @param string elementid - the elemen id of menu icon.
* @param string color - The color for the background.
*/
change_color : function(e, elementid, color) {
e.preventDefault();
if (!M.editor_atto.is_active(elementid)) {
M.editor_atto.focus(elementid);
}
document.execCommand('foreColor', 0, color);
// Clean the YUI ids from the HTML.
M.editor_atto.text_updated(elementid);
}
};
}, '@VERSION@');
@@ -0,0 +1,10 @@
{
"name": "moodle-atto_fontcolor-button",
"builds": {
"moodle-atto_fontcolor-button": {
"jsfiles": [
"button.js"
]
}
}
}
@@ -0,0 +1,95 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Atto text editor font color plugin.
*
* @package editor-atto
* @copyright 2014 Rossiani Wijaya <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
M.atto_fontcolor = M.atto_fontcolor || {
dialogue : null,
init : function(params) {
var plugin = 'fontcolor';
var rgb_white = '#FFFFFF',
rgb_red = '#EF4540',
rgb_yellow = '#FFCF35',
rgb_green = '#98CA3E',
rgb_blue = '#7D9FD3',
rgb_black = '#333333';
var click_white = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, 'transparent');
};
var click_red = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_red);
};
var click_yellow = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_yellow);
};
var click_green = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_green);
};
var click_blue = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_blue);
};
var click_black = function(e, elementid) {
M.atto_fontcolor.change_color(e, elementid, rgb_black);
};
var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
var white = '<div style="' + buttoncss + rgb_white + '"></div>';
var red = '<div style="' + buttoncss + rgb_red + '"></div>';
var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
var green = '<div style="' + buttoncss + rgb_green + '"></div>';
var blue = '<div style="' + buttoncss + rgb_blue + '"></div>';
var black = '<div style="' + buttoncss + rgb_black + '"></div>';
var iconurl = M.util.image_url('e/text_color', 'core');
M.editor_atto.add_toolbar_menu(params.elementid,
plugin,
iconurl,
params.group,
[
{'text' : white, 'handler' : click_white},
{'text' : red, 'handler' : click_red},
{'text' : yellow, 'handler' : click_yellow},
{'text' : green, 'handler' : click_green},
{'text' : blue, 'handler' : click_blue},
{'text' : black, 'handler' : click_black}
],
'4',
'#333333');
},
/**
* Handle to change the editor font color.
* @param event e - The event that triggered this.
* @param string elementid - the elemen id of menu icon.
* @param string color - The color for the background.
*/
change_color : function(e, elementid, color) {
e.preventDefault();
if (!M.editor_atto.is_active(elementid)) {
M.editor_atto.focus(elementid);
}
document.execCommand('foreColor', 0, color);
// Clean the YUI ids from the HTML.
M.editor_atto.text_updated(elementid);
}
};
@@ -0,0 +1,5 @@
{
"moodle-atto_fontcolor-button": {
"requires": ["node"]
}
}
+2 -3
View File
@@ -59,9 +59,9 @@ div.editor_atto_toolbar button[disabled] {
div.editor_atto_toolbar button img {
padding: 1px;
margin: 1px 0;
}
div.editor_atto_toolbar div.atto_group {
display: inline-block;
border: 1px solid #CCC;
@@ -81,7 +81,6 @@ div.editor_atto_toolbar div.atto_group {
}
.atto_menu {
min-width: 12em;
background: white;
padding: 1px;
}
@@ -154,7 +153,7 @@ div.editor_atto_content:hover .atto_control {
.editor_atto_controlmenu li {
list-style-type: none;
padding: 0px;
margin; 0px;
margin: 0px;
}
.editor_atto_controlmenu ul {
padding: 0px;
@@ -234,14 +234,23 @@ M.editor_atto = M.editor_atto || {
* @param string icon - the html used for the content of the button
* @param string groupname - the group the button should be appended to.
* @param array entries - List of menu entries with the string (entry.text) and the handlers (entry.handler).
* @param int overlaywidth - the overlay width size.
* @param string menucolor - menu icon background color
*/
add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries) {
add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries, overlaywidth, menucolor) {
var toolbar = M.editor_atto.get_toolbar_node(elementid),
group = toolbar.one('.atto_group.' + groupname + '_group'),
currentfocus,
button,
expimgurl;
if ((typeof overlaywidth) === 'undefined') {
overlaywidth = '14';
}
if ((typeof menucolor) === 'undefined') {
menucolor = 'transparent';
}
if (!group) {
group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
toolbar.append(group);
@@ -253,7 +262,8 @@ M.editor_atto = M.editor_atto || {
'type="button" ' +
'data-menu="' + plugin + '_' + elementid + '" ' +
'title="' + Y.Escape.html(M.util.get_string('pluginname', 'atto_' + plugin)) + '">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + iconurl + '"/>' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" '+
'style="background-color:' + menucolor + ';" src="' + iconurl + '"/>' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + expimgurl + '"/>' +
'</button>');
@@ -269,7 +279,9 @@ M.editor_atto = M.editor_atto || {
M.editor_atto.widgets[plugin] = plugin;
var menu = Y.Node.create('<div class="atto_' + plugin + '_menu' +
' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"></div>');
' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"' +
' style="min-width:' + (overlaywidth-2) + 'em"' +
'"></div>');
var i = 0, entry = {};
for (i = 0; i < entries.length; i++) {
@@ -298,7 +310,7 @@ M.editor_atto = M.editor_atto || {
var overlay = new M.core.dialogue({
bodyContent : menu,
visible : false,
width: '14em',
width: overlaywidth + 'em',
zindex: 100,
lightbox: false,
closeButton: false,
File diff suppressed because one or more lines are too long
@@ -234,14 +234,23 @@ M.editor_atto = M.editor_atto || {
* @param string icon - the html used for the content of the button
* @param string groupname - the group the button should be appended to.
* @param array entries - List of menu entries with the string (entry.text) and the handlers (entry.handler).
* @param int overlaywidth - the overlay width size.
* @param string menucolor - menu icon background color
*/
add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries) {
add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries, overlaywidth, menucolor) {
var toolbar = M.editor_atto.get_toolbar_node(elementid),
group = toolbar.one('.atto_group.' + groupname + '_group'),
currentfocus,
button,
expimgurl;
if ((typeof overlaywidth) === 'undefined') {
overlaywidth = '14';
}
if ((typeof menucolor) === 'undefined') {
menucolor = 'transparent';
}
if (!group) {
group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
toolbar.append(group);
@@ -253,7 +262,8 @@ M.editor_atto = M.editor_atto || {
'type="button" ' +
'data-menu="' + plugin + '_' + elementid + '" ' +
'title="' + Y.Escape.html(M.util.get_string('pluginname', 'atto_' + plugin)) + '">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + iconurl + '"/>' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" '+
'style="background-color:' + menucolor + ';" src="' + iconurl + '"/>' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + expimgurl + '"/>' +
'</button>');
@@ -269,7 +279,9 @@ M.editor_atto = M.editor_atto || {
M.editor_atto.widgets[plugin] = plugin;
var menu = Y.Node.create('<div class="atto_' + plugin + '_menu' +
' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"></div>');
' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"' +
' style="min-width:' + (overlaywidth-2) + 'em"' +
'"></div>');
var i = 0, entry = {};
for (i = 0; i < entries.length; i++) {
@@ -298,7 +310,7 @@ M.editor_atto = M.editor_atto || {
var overlay = new M.core.dialogue({
bodyContent : menu,
visible : false,
width: '14em',
width: overlaywidth + 'em',
zindex: 100,
lightbox: false,
closeButton: false,
+16 -4
View File
@@ -232,14 +232,23 @@ M.editor_atto = M.editor_atto || {
* @param string icon - the html used for the content of the button
* @param string groupname - the group the button should be appended to.
* @param array entries - List of menu entries with the string (entry.text) and the handlers (entry.handler).
* @param int overlaywidth - the overlay width size.
* @param string menucolor - menu icon background color
*/
add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries) {
add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries, overlaywidth, menucolor) {
var toolbar = M.editor_atto.get_toolbar_node(elementid),
group = toolbar.one('.atto_group.' + groupname + '_group'),
currentfocus,
button,
expimgurl;
if ((typeof overlaywidth) === 'undefined') {
overlaywidth = '14';
}
if ((typeof menucolor) === 'undefined') {
menucolor = 'transparent';
}
if (!group) {
group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
toolbar.append(group);
@@ -251,7 +260,8 @@ M.editor_atto = M.editor_atto || {
'type="button" ' +
'data-menu="' + plugin + '_' + elementid + '" ' +
'title="' + Y.Escape.html(M.util.get_string('pluginname', 'atto_' + plugin)) + '">' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + iconurl + '"/>' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" '+
'style="background-color:' + menucolor + ';" src="' + iconurl + '"/>' +
'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + expimgurl + '"/>' +
'</button>');
@@ -267,7 +277,9 @@ M.editor_atto = M.editor_atto || {
M.editor_atto.widgets[plugin] = plugin;
var menu = Y.Node.create('<div class="atto_' + plugin + '_menu' +
' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"></div>');
' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"' +
' style="min-width:' + (overlaywidth-2) + 'em"' +
'"></div>');
var i = 0, entry = {};
for (i = 0; i < entries.length; i++) {
@@ -296,7 +308,7 @@ M.editor_atto = M.editor_atto || {
var overlay = new M.core.dialogue({
bodyContent : menu,
visible : false,
width: '14em',
width: overlaywidth + 'em',
zindex: 100,
lightbox: false,
closeButton: false,