From a123eb58b14bd86981e238802d1fb22674953db7 Mon Sep 17 00:00:00 2001
From: Damyon Wiese <damyon@moodle.com>
Date: Thu, 31 Oct 2013 14:24:40 +0800
Subject: [PATCH] MDL-42102 TinyMCE: Toolbar wrapping < 480px.

Prevent wrap plugin from wrapping toolbars shorter than 5 buttons.
---
 .../plugins/wrap/tinymce/editor_plugin.js     | 34 +++++++++++++++++--
 lib/editor/tinymce/styles.css                 |  8 ++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/lib/editor/tinymce/plugins/wrap/tinymce/editor_plugin.js b/lib/editor/tinymce/plugins/wrap/tinymce/editor_plugin.js
index e1817070b15..d8d57df2b43 100644
--- a/lib/editor/tinymce/plugins/wrap/tinymce/editor_plugin.js
+++ b/lib/editor/tinymce/plugins/wrap/tinymce/editor_plugin.js
@@ -32,6 +32,9 @@
             this.groupEndPlaceholder = 'mceToolbarEndPlaceholder';
             this.groupStartClass = 'mceGroupStart';
             this.wrapClass = 'mceWrap';
+            this.noWrapClass = 'mceNoWrap';
+            this.toolbarClass = 'mceToolbar';
+            this.selectListArrowClass = 'mceOpen';
             this.setDisabled(true);
         },
 
@@ -55,8 +58,9 @@
             // Add a class to the item prior to the wrap.
             YUI().use('node', function(Y) {
                 var endGroupElements = tinymce.DOM.select('td.' + self.groupEndPlaceholder),
-                    index = 0, curElement, endOfLast;
-                    endBarElements = tinymce.DOM.select('td.' + self.toolbarEndClass)
+                    index = 0, curElement, endOfLast,
+                    endBarElements = tinymce.DOM.select('td.' + self.toolbarEndClass);
+
                 for (index = 0; index < endGroupElements.length; index++) {
                     if (!endGroupElements.hasOwnProperty(index)) {
                           continue;
@@ -77,6 +81,32 @@
                         endOfLast.addClass(self.groupEndClass);
                     }
                 }
+                // Any separators closer together than 5 buttons get the noWrapClass.
+                var toolbars = Y.all('table.' + self.toolbarClass),
+                    buttonWrapPoint = 5;
+
+                toolbars.each(function(toolbar) {
+                    var count = 0;
+                    widgets = toolbar.all('td.' + self.wrapClass + ', td > a');
+                    widgets.each(function(widget) {
+                        if (widget.hasClass(self.wrapClass)) {
+                            if (count >= buttonWrapPoint) {
+                                count = 0;
+                            } else {
+                                widget.addClass(self.noWrapClass);
+                            }
+                        } else {
+                            if (widget.hasClass(self.selectListArrowClass) ||
+                                    (widget.getAttribute('role') === 'button')) {
+                                count++;
+                            } else {
+                                // Count select inputs as 3 buttons. The down arrow on the select also gets counted so 2+1 = 3.
+                                count += 2;
+                            }
+                        }
+                    });
+                });
+
             });
         }
     });
diff --git a/lib/editor/tinymce/styles.css b/lib/editor/tinymce/styles.css
index 939891237a4..86703ef8714 100644
--- a/lib/editor/tinymce/styles.css
+++ b/lib/editor/tinymce/styles.css
@@ -3,8 +3,14 @@
         float: left;
         display: inline-block;
     }
-    .mceToolbar .mceWrap {
+    .moodleSkin .mceLayout .mceToolbar .mceWrap {
         clear: left;
+        width: 100%;
+        height: 8px;
+    }
+    .moodleSkin .mceLayout .mceToolbar .mceNoWrap {
+        clear: none;
+        width: 0px;
     }
 
     .o2k7Skin tr.mceLast .mceToolbar tr td.mceWrap,