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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
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.