MDL-43861: Atto Plugins: create new plugin for font and background colors
This commit is contained in:
committed by
Damyon Wiese
parent
0012a94601
commit
534cf7b730
@@ -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).
|
||||
+134
@@ -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@');
|
||||
+1
@@ -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@");
|
||||
+134
@@ -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).
|
||||
+99
@@ -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@');
|
||||
+1
@@ -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@");
|
||||
+99
@@ -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"]
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
+16
-4
@@ -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,
|
||||
|
||||
+2
-2
File diff suppressed because one or more lines are too long
+16
-4
@@ -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
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user