MDL-23646 tinymce: Add plugin to wrap toolbar on small screens

lib/editor/tinymce/db/upgrade.php

@@ -69,5 +69,56 @@ fontselect,fontsizeselect,code,search,replace,|,cleanup,removeformat,pastetext,p
         upgrade_plugin_savepoint(true, 2013061400, 'editor', 'tinymce');
     }
 
+    if ($oldversion < 2013070500) {
+        // Insert wrap plugin to nicely wrap the toolbars on small screens.
+        $oldorder = "formatselect,bold,italic,|,bullist,numlist,|,link,unlink,|,image
+
+undo,redo,|,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,outdent,indent,|,forecolor,backcolor,|,ltr,rtl,|,nonbreaking,charmap,table
+
+fontselect,fontsizeselect,code,search,replace,|,cleanup,removeformat,pastetext,pasteword,|,fullscreen";
+
+        $neworder = "formatselect,bold,italic,wrap,bullist,numlist,|,link,unlink,|,image
+
+undo,redo,|,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,wrap,outdent,indent,|,forecolor,backcolor,|,ltr,rtl,|,nonbreaking,charmap,table
+
+fontselect,fontsizeselect,wrap,code,search,replace,|,cleanup,removeformat,pastetext,pasteword,|,fullscreen";
+        $currentorder = get_config('editor_tinymce', 'customtoolbar');
+        if ($currentorder == $oldorder) {
+            unset_config('customtoolbar', 'editor_tinymce');
+            set_config('customtoolbar', $neworder, 'editor_tinymce');
+        } else {
+            // Simple auto conversion algorithm.
+            $toolbars = explode($oldorder, "\n");
+            $newtoolbars = array();
+            foreach ($toolbars as $toolbar) {
+                $sepcount = substr_count($toolbar, '|');
+
+                if ($sepcount > 0) {
+                    // We assume the middle separator (rounding down).
+                    $divisionindex = $sepcount / 2;
+
+                    $buttons = explode($toolbar, ',');
+                    $index = 0;
+                    foreach ($buttons as $key => $button) {
+                        if ($button === "|") {
+                            if ($index == $divisionindex) {
+                                $buttons[$key] = 'wrap';
+                                break;
+                            }
+                        }
+                    }
+                    $toolbar = implode($buttons, ',');
+                }
+                array_push($newtoolbars, $toolbar);
+            }
+            $neworder = implode($newtoolbars, "\n");
+
+            // Set the new config.
+            unset_config('customtoolbar', 'editor_tinymce');
+            set_config('customtoolbar', $neworder, 'editor_tinymce');
+        }
+        upgrade_plugin_savepoint(true, 2013070500, 'editor', 'tinymce');
+    }
+
     return true;
 }

lib/editor/tinymce/lib.php

@@ -52,6 +52,9 @@ class tinymce_texteditor extends texteditor {
         if (check_browser_version('Safari iOS', 534)) {
             return true;
         }
+        if (check_browser_version('WebKit', 534)) {
+            return true;
+        }
 
         return false;
     }
@@ -155,7 +158,7 @@ class tinymce_texteditor extends texteditor {
             'plugins' => 'lists,table,style,layer,advhr,advlink,emotions,inlinepopups,' .
                 'searchreplace,paste,directionality,fullscreen,nonbreaking,contextmenu,' .
                 'insertdatetime,save,iespell,preview,print,noneditable,visualchars,' .
-                'xhtmlxtras,template,pagebreak',
+                'xhtmlxtras,template,pagebreak,wrap',
             'gecko_spellcheck' => true,
             'theme_advanced_font_sizes' => "1,2,3,4,5,6,7",
             'theme_advanced_layout_manager' => "SimpleLayout",

lib/editor/tinymce/plugins/wrap/lang/en/tinymce_wrap.php

@@ -0,0 +1,28 @@
+<?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 'wrap' plugin.
+ *
+ * @package   tinymce_wrap
+ * @copyright 2013 Damyon Wiese
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+$string['pluginname'] = 'Wrap';
+
+/* All lang strings used from TinyMCE JavaScript code must be named 'pluginname:stringname', no need to create langs/en_dlg.js */
+$string['moodlewrap:desc'] = 'Wrap';

lib/editor/tinymce/plugins/wrap/lib.php

@@ -0,0 +1,36 @@
+<?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/>.
+
+defined('MOODLE_INTERNAL') || die();
+
+/**
+ * Plugin for Moodle 'wrap' button.
+ *
+ * @package   tinymce_wrap
+ * @copyright 2013 Damyon Wiese
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class tinymce_wrap extends editor_tinymce_plugin {
+    /** @var array list of buttons defined by this plugin */
+    protected $buttons = array('wrap');
+
+    protected function update_init_params(array &$params, context $context,
+            array $options = null) {
+
+        // Add JS file, which uses default name.
+        $this->add_js_plugin($params);
+    }
+}

lib/editor/tinymce/plugins/wrap/tinymce/editor_plugin.js

@@ -0,0 +1,88 @@
+// 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/>.
+
+/**
+ * Plugin for Moodle 'wrap' button.
+ *
+ * @package   tinymce_wrap
+ * @copyright 2013 Damyon Wiese
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+(function() {
+    tinymce.create('tinymce.ui.Wrap:tinymce.ui.Control', {
+        /**
+         * Constructor for the tinymce.Wrap class.
+         */
+        Wrap : function(id, s) {
+            this.parent(id, s);
+            this.groupEndClass = 'mceToolbarEnd';
+            this.groupStartClass = 'mceToolbarStart';
+            this.wrapClass = 'mceWrap';
+            this.setDisabled(true);
+        },
+
+        /**
+         * Returns the HTML for this control. This control actually ends the current td
+         * container and opens a new one so that the containers can be styled with CSS
+         * to wrap at certain screen widths.
+         * @return string HTML
+         */
+        renderHTML : function() {
+            var separator = tinymce.DOM.createHTML('span', {role : 'separator',
+                                                            'aria-orientation' : 'vertical',
+                                                            tabindex : '-1'});
+            return '</td>' +
+                   '<td style="position: relative" class="' + this.groupEndClass + '">' + separator + '</td>' +
+                   '<td style="position: relative" class="' + this.groupStartClass + ' ' + this.wrapClass + '">' + separator + '</td>';
+        },
+
+
+    });
+
+    tinymce.create('tinymce.plugins.wrapPlugin', {
+        /**
+         * Returns a new instance of this control, in this case a custom Wrap class.
+         *
+         * @param string name - The name of the control to create. Return false if we can't create this control type.
+         * @param tinymce.ControlManager cc - Tinymce control manager class.
+         * @return mixed - false or the new control
+         */
+        createControl : function(name, cc) {
+            if (name === "wrap" || name === "!") {
+                return new tinymce.ui.Wrap();
+            }
+            return false;
+        },
+
+        /**
+         * Returns information about the plugin as a name/value array.
+         * The current keys are longname, author, authorurl, infourl and version.
+         *
+         * @return {Object} Name/value array containing information about the plugin.
+         */
+        getInfo : function() {
+            return {
+                longname : 'wrap plugin',
+                author : 'Damyon Wiese',
+                authorurl : 'http://moodle.com/hq',
+                infourl : 'http://docs.moodle.org/en/TinyMCE',
+                version : "1.0"
+            };
+        }
+    });
+
+    // Register plugin.
+    tinymce.PluginManager.add('wrap', tinymce.plugins.wrapPlugin);
+})();

lib/editor/tinymce/plugins/wrap/version.php

@@ -0,0 +1,32 @@
+<?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/>.
+
+/**
+ * TinyMCE toolbar wrapping break
+ *
+ * @package   tinymce_wrap
+ * @copyright 2013 Damyon Wiese
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+// The current plugin version (Date: YYYYMMDDXX).
+$plugin->version   = 2013061900;
+// Required Moodle version.
+$plugin->requires  = 2013050100;
+// Full name of the plugin (used for diagnostics).
+$plugin->component = 'tinymce_wrap';

lib/editor/tinymce/settings.php

@@ -31,11 +31,11 @@ if ($ADMIN->fulltree) {
     require_once(__DIR__.'/adminlib.php');
     $settings->add(new tiynce_subplugins_settings());
     $settings->add(new admin_setting_heading('tinymcegeneralheader', new lang_string('settings'), ''));
-    $default = "formatselect,bold,italic,|,bullist,numlist,|,link,unlink,|,image
+    $default = "formatselect,bold,italic,wrap,bullist,numlist,|,link,unlink,|,image
 
-undo,redo,|,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,|,outdent,indent,|,forecolor,backcolor,|,ltr,rtl,|,nonbreaking,charmap,table
+undo,redo,|,underline,strikethrough,sub,sup,|,justifyleft,justifycenter,justifyright,wrap,outdent,indent,|,forecolor,backcolor,|,ltr,rtl,|,nonbreaking,charmap,table
 
-fontselect,fontsizeselect,code,search,replace,|,cleanup,removeformat,pastetext,pasteword,|,fullscreen";
+fontselect,fontsizeselect,wrap,code,search,replace,|,cleanup,removeformat,pastetext,pasteword,|,fullscreen";
     $settings->add(new admin_setting_configtextarea('editor_tinymce/customtoolbar',
         get_string('customtoolbar', 'editor_tinymce'), get_string('customtoolbar_desc', 'editor_tinymce', 'http://www.tinymce.com/wiki.php/Buttons/controls'), $default, PARAM_RAW, 100, 8));
     $settings->add(new admin_setting_configtextarea('editor_tinymce/fontselectlist',

lib/editor/tinymce/styles.css

@@ -13,7 +13,22 @@
     color: red;
     cursor: pointer;
 }
-.mform .felement.feditor .mceStatusbar,
-.mform .felement.feditor iframe {
-    min-width: 35em;
+
+@media (max-width: 480px) {
+    .mceToolbar td {
+        float: left;
+        display: inline-block;
+    }
+    .mceToolbar .mceWrap {
+        clear: left;
+    }
+
+    .o2k7Skin tr.mceLast .mceToolbar tr td.mceWrap,
+    .o2k7Skin tr.mceFirst .mceToolbar tr td.mceWrap {
+        margin-left: -3px;
+    }
+    .dir-rtl .o2k7Skin tr.mceLast .mceToolbar tr td.mceWrap,
+    .dir-rtl .o2k7Skin tr.mceFirst .mceToolbar tr td.mceWrap {
+        margin-left: 0px;
+    }
 }

lib/editor/tinymce/version.php

@@ -24,7 +24,7 @@
 
 defined('MOODLE_INTERNAL') || die();
 
-$plugin->version   = 2013061400;        // The current plugin version (Date: YYYYMMDDXX)
+$plugin->version   = 2013070500;        // The current plugin version (Date: YYYYMMDDXX)
 $plugin->requires  = 2013050100;        // Requires this Moodle version
 $plugin->component = 'editor_tinymce';  // Full name of the plugin (used for diagnostics)
 $plugin->release   = '3.5.8';           // This is NOT a directory name, see lib.php if you need to know where is the editor code!