MDL-42102 TinyMCE: Toolbar wrapping < 480px.

Prevent wrap plugin from wrapping toolbars shorter than 5 buttons.
This commit is contained in:
Damyon Wiese 2013-10-31 14:24:40 +08:00 committed by Dan Poltawski
parent 1637827d75
commit a123eb58b1
2 changed files with 39 additions and 3 deletions

View 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;
@ -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;
}
}
});
});
});
}
});

View file

@ -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,