8
0
Просмотр исходного кода

Implemented the Tooltip component.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
0db1ebad68

+ 83 - 0
packages/ckeditor5-ui/src/tooltip/tooltipview.js

@@ -0,0 +1,83 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ui/tooltip/tooltipview
+ */
+
+import View from '../view';
+import Template from '../template';
+
+/**
+ * The tooltip view class.
+ *
+ * @extends module:ui/view~View
+ */
+export default class TooltipView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * The text of the tooltip visible to the user.
+		 *
+		 * @observable
+		 * @member {String} #text
+		 */
+		this.set( 'text' );
+
+		/**
+		 * The direction of the tooltip (south or north).
+		 *
+		 *		+-----------+
+		 *		|   north   |
+		 *		+-----------+
+		 *		      V
+		 *		  [element]
+		 *
+		 *		  [element]
+		 *		      ^
+		 *		+-----------+
+		 *		|   south   |
+		 *		+-----------+
+		 *
+		 * @observable
+		 * @default 's'
+		 * @member {'s'|'n'} #position
+		 */
+		this.set( 'position', 's' );
+
+		const bind = this.bindTemplate;
+
+		this.template = new Template( {
+			tag: 'span',
+			attributes: {
+				class: [
+					'ck-tooltip',
+					bind.to( 'position', position => 'ck-tooltip_' + position )
+				]
+			},
+			children: [
+				{
+					tag: 'span',
+
+					attributes: {
+						class: [
+							'ck-tooltip__text'
+						]
+					},
+
+					children: [
+						{
+							text: bind.to( 'text' ),
+						}
+					]
+				}
+			]
+		} );
+	}
+}

+ 58 - 0
packages/ckeditor5-ui/tests/tooltip/tooltipview.js

@@ -0,0 +1,58 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import TooltipView from '../../src/tooltip/tooltipview';
+
+describe( 'TooltipView', () => {
+	let view, text;
+
+	beforeEach( () => {
+		view = new TooltipView();
+		text = view.element.firstChild;
+	} );
+
+	describe( 'constructor()', () => {
+		it( 'should create element from template', () => {
+			expect( view.element.tagName ).to.equal( 'SPAN' );
+			expect( view.element.classList.contains( 'ck-tooltip' ) ).to.be.true;
+			expect( view.element.childNodes ).to.have.length( 1 );
+
+			expect( text.tagName ).to.equal( 'SPAN' );
+			expect( text.classList.contains( 'ck-tooltip__text' ) ).to.be.true;
+		} );
+
+		it( 'should set default #position', () => {
+			expect( view.position ).to.equal( 's' );
+		} );
+	} );
+
+	describe( 'DOM bindings', () => {
+		beforeEach( () => {
+			view.text = 'foo';
+		} );
+
+		describe( 'text content', () => {
+			it( 'should react on view#text', () => {
+				expect( text.textContent ).to.equal( 'foo' );
+
+				view.text = 'baz';
+
+				expect( text.textContent ).to.equal( 'baz' );
+			} );
+		} );
+
+		describe( 'class', () => {
+			it( 'should react on view#position', () => {
+				expect( view.element.classList.contains( 'ck-tooltip_n' ) ).to.be.false;
+				expect( view.element.classList.contains( 'ck-tooltip_s' ) ).to.be.true;
+
+				view.position = 'n';
+
+				expect( view.element.classList.contains( 'ck-tooltip_n' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-tooltip_s' ) ).to.be.false;
+			} );
+		} );
+	} );
+} );

+ 23 - 57
packages/ckeditor5-ui/theme/components/tooltip.scss

@@ -1,43 +1,12 @@
 // Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
-/**
- * Applies styles to the main part of the tooltip.
- */
-@mixin ck-tooltip__main {
-	&::after {
-		@content;
-	}
-}
-
-/**
- * Applies styles to the arrow part of the tooltip.
- */
-@mixin ck-tooltip__arrow {
-	&::before {
-		@content;
-	}
-}
-
-/**
- * Applies styles to both arrow and main part of the tooltip.
- */
-@mixin ck-tooltip__elements {
-	@include ck-tooltip__main {
-		@content;
-	}
-
-	@include ck-tooltip__arrow {
-		@content;
-	}
-}
-
 /**
  * Enables the tooltip, which is the tooltip is in DOM but
  * not yet displayed.
  */
 @mixin ck-tooltip_enabled {
-	@include ck-tooltip__elements {
+	.ck-tooltip {
 		display: block;
 	}
 }
@@ -46,7 +15,7 @@
  * Disables the tooltip making it disappear from DOM.
  */
 @mixin ck-tooltip_disabled {
-	@include ck-tooltip__elements {
+	.ck-tooltip {
 		display: none;
 	}
 }
@@ -56,37 +25,34 @@
  * Requires `ck-tooltip_enabled` first.
  */
 @mixin ck-tooltip_visible {
-	@include ck-tooltip__elements {
+	.ck-tooltip {
 		visibility: visible;
 		opacity: 1;
 	}
 }
 
-[data-ck-tooltip] {
-	@include ck-tooltip__elements {
-		// Tooltip is hidden by default.
-		visibility: hidden;
-		opacity: 0;
-		display: none;
-
-		position: absolute;
-		z-index: ck-z( 'modal' );
+.ck-tooltip,
+.ck-tooltip__text::after {
+	position: absolute;
 
-		// Without this, hovering the tooltip could keep it visible.
-		pointer-events: none;
+	// Without this, hovering the tooltip could keep it visible.
+	pointer-events: none;
 
-		// This is to get rid of flickering when transitioning opacity in Chrome.
-		// It's weird but it works.
-		-webkit-backface-visibility: hidden;
-	}
+	// This is to get rid of flickering when transitioning opacity in Chrome.
+	// It's weird but it works.
+	-webkit-backface-visibility: hidden;
+}
 
-	@include ck-tooltip__main {
-		content: attr(data-ck-tooltip);
-	}
+.ck-tooltip {
+	// Tooltip is hidden by default.
+	visibility: hidden;
+	opacity: 0;
+	display: none;
+	z-index: ck-z( 'modal' );
+}
 
-	@include ck-tooltip__arrow {
-		content: "";
-		width: 0;
-		height: 0;
-	}
+.ck-tooltip__text::after {
+	content: "";
+	width: 0;
+	height: 0;
 }