Buttons verschieben bei Toolbar Resize

[MichaelAl]

Hallo Community,

ich bin neu in der JavaScript/jquery Welt und benötige eure Hilfe.

Ich habe eine Toolbar für einen Text Editor mit folgendem Markup:

<div class="wysiwyg-editor">
	<div class="wysiwyg-toolbar">
		<div class="btn-group btn-group-sm wysiwyg-btn-group-margin">
			<button class="btn btn-default"></button>
			<button class="btn btn-default"></button>
		</div>
		<div class="btn-group btn-group-sm wysiwyg-btn-group-margin">
			<button class="btn btn-default"></button>
			<button class="btn btn-default"></button>
			<button class="btn btn-default"></button>
		</div>
	</div>
	<div class="form-control wysiwyg-textarea"> </div>
</div>

Jetzt hätte ich gerne, dass wenn ich mein Fenster resize die Buttons, die nicht mehr in die Toolbar rein passen in ein neues Button mit Dropdownliste verschoben werden. Ich habe leider im Moment keinen Ansatz, wie ich vorgehen müsste. Bin mir aber sicher, dass es nicht so schwer sein kann.

Beim Googeln habe ich folgendes Beispiel finden können: Resizing demo of Kendo UI ToolBar Widget | Kendo UI Web demo

Kann mir jemand helfen? Ich wäre sehr verbunden.

 

[kkapsner]

Ich habe eine Toolbar für einen Text Editor

Welcher Texteditor genau? Wenn der das nicht unterstützt, wird das wohl eher schwierig werden. Aber das sollte in der Dokumnetation stehen.

 

[MichaelAl]

Ich habe mich etwas missverständlich ausgedrückt. Ich bastel mir einen Texteditor zusammen. Es ist ein einfaches Text Area Feld. Darüber die Toolbar. Alles passt soweit ganz gut. Jetzt möchte ich nur noch, die Funktionalität mit den Buttons, die in die dropdown verschwinden.

Ich habe mal etwas schon gebastelt, was allerdings noch nicht so toll funktioniert.

var updateInvisibleOptionsDropDown = function () {

						var maxWidth = $('.wysiwyg-toolbar')[0].getBoundingClientRect().width - 75;
						var toolbar = element.find('.wysiwyg-toolbar')[0];
						var toolbarWidth = toolbar.getBoundingClientRect().width;

						if (toolbar) {

								var sumWidth = 0;
								for (var i = 0; i < toolbar.children.length; i++) {
									var child = toolbar.children[i];
									if (child !== 'invisibleOptions') {
										if (maxWidth < (sumWidth + child.getBoundingClientRect().width)) {
											$('.toolDropDown').append(
													$('<li>').append(child));
										} else {
											$('.wysiwyg-toolbar').append(child);
										}
										sumWidth += child.getBoundingClientRect().width;
									}
								}

								$('.wysiwyg-toolbar').append($('[name="invisibleOptions"]')[0]);
								$('.toolDropDown li:empty').remove();
								if ($('.toolDropDown li').length === 0) {
									$('.toolDropDownButton').hide();
								} else {
									$('.toolDropDownButton').show();
								}

						}
					};

					$(window).resize(updateInvisibleOptionsDropDown);

Zu meinem weiter oben geposteten DOM, habe ich noch zusätzlich ein Dropdownbutton hinzugefügt. In diesem Dropdown möchte ich dann die Buttons rein bzw raus verschieben. Aber wie gesagt. Mir gefällt mein Ansatzpunkt nicht wirklich. Ich möchte das Dropdown dynamisch erstellen bzw hinzufügen. Auch werden die Buttons nicht in der korrekten Reihenfolge verschoben.

 

[kkapsner]

Kannst du man einen Testlink machen, wo wir uns das live ansehen können?

 

[rico2009]

Ich lese hier "Dropdown", eventuell kann man deine Anforderung auch ganz ohne Javascript und mit CSS umsetzen. Ein Testlink wäre in der Tat praktisch.