浏览代码

Added manual test for BalloonPanelView#keepAttachedTo.

Oskar Wróbel 8 年之前
父节点
当前提交
ec915d4ff0

+ 104 - 0
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanel.html

@@ -0,0 +1,104 @@
+<div class="container-a">
+	<div class="container-b">
+		<div>
+			<div id="editor-attach">
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p>Balloon is attached to the <strong>TARGET</strong> element.</p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+			</div>
+		</div>
+
+		<div>
+			<div id="editor-stick">
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p>Balloon sticks to the <strong>TARGET</strong> element.</p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+				<p></p>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	body {
+		height: 100%;
+	}
+
+	.balloon-content {
+		padding: 10px;
+		font-size: 16px;
+	}
+
+	.ck-editor__editable {
+		max-height: 300px;
+	}
+
+	.container-a {
+		height: 500px;
+		width: 750px;
+		overflow: scroll;
+	}
+
+	.container-b {
+		padding: 500px 30px 30px;
+		display: flex;
+		width: 1000px;
+		height: 2000px;
+		background: #e1e1e1;
+	}
+
+	.container-b > div {
+		margin: 0 20px;
+	}
+</style>

+ 86 - 0
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanel.js

@@ -0,0 +1,86 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window, document, console:false */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import ArticlePresets from '@ckeditor/ckeditor5-presets/src/article';
+import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
+
+// Content of the balloon panel.
+class BalloonContentView extends View {
+	constructor() {
+		super();
+
+		this.template = new Template( {
+			tag: 'div',
+			attributes: {
+				class: 'balloon-content'
+			},
+			children: [
+				{
+					text: 'Balloon'
+				}
+			]
+		} );
+	}
+}
+
+// Set initial scroll of one of the container element.
+document.querySelector( '.container-a' ).scrollTop = 450;
+
+// Init editor with balloon attached to the target element.
+ClassicEditor.create( document.querySelector( '#editor-attach' ), {
+	plugins: [ ArticlePresets ],
+	toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+} )
+.then( editor => {
+	const panel = new BalloonPanelView();
+
+	panel.content.add( new BalloonContentView() );
+	editor.ui.view.body.add( panel );
+
+	editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;
+
+	panel.init().then( () => {
+		panel.attachTo( {
+			target: editor.ui.view.element.querySelector( '.ck-editor__editable p strong' ),
+			limiter: editor.ui.view.editableElement
+		} );
+	} );
+
+	window.attachEditor = editor;
+} )
+.catch( err => {
+	console.error( err.stack );
+} );
+
+// Init editor with balloon sticked to the target element.
+ClassicEditor.create( document.querySelector( '#editor-stick' ), {
+	plugins: [ ArticlePresets ],
+	toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+} )
+.then( editor => {
+	const panel = new BalloonPanelView();
+
+	panel.content.add( new BalloonContentView() );
+	editor.ui.view.body.add( panel );
+
+	editor.ui.view.element.querySelector( '.ck-editor__editable' ).scrollTop = 360;
+
+	panel.init().then( () => {
+		panel.keepAttachedTo( {
+			target: editor.ui.view.element.querySelector( '.ck-editor__editable p strong' ),
+			limiter: editor.ui.view.editableElement
+		} );
+	} );
+
+	window.stickEditor = editor;
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

+ 4 - 0
packages/ckeditor5-ui/tests/manual/panel/balloon/balloonpanel.md

@@ -0,0 +1,4 @@
+## BalloonPanelView `attachTo` vs `keepAttachedTo`
+
+Scroll editable elements and container (horizontally as well). Balloon in the left editor should float but balloon in the
+right editor should stick to the target element.