MDL-42102 TinyMCE: Toolbar wrapping < 480px.
[moodle.git] / lib / editor / tinymce / plugins / wrap / tinymce / editor_plugin.js
index e181707..d8d57df 100644 (file)
@@ -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;
                         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;
+                            }
+                        }
+                    });
+                });
+
             });
         }
     });