Skip to content

Commit

Permalink
MDL-43861: Atto Plugins: create new plugin for font and background co…
Browse files Browse the repository at this point in the history
…lors
Rossiani Wijaya authored and Damyon Wiese committed Mar 26, 2014
1 parent 0012a94 commit 534cf7b
Showing 21 changed files with 883 additions and 17 deletions.
25 changes: 25 additions & 0 deletions lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php
Original file line number Diff line number Diff line change
@@ -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';
29 changes: 29 additions & 0 deletions lib/editor/atto/plugins/backcolor/version.php
Original file line number Diff line number Diff line change
@@ -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).
Original file line number Diff line number Diff line change
@@ -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@');

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -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@');
10 changes: 10 additions & 0 deletions lib/editor/atto/plugins/backcolor/yui/src/button/build.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"name": "moodle-atto_backcolor-button",
"builds": {
"moodle-atto_backcolor-button": {
"jsfiles": [
"button.js"
]
}
}
}
Loading

0 comments on commit 534cf7b

Please sign in to comment.