Remove dependancy between toolbar and notification plugin

CHANGES.md

@@ -7,6 +7,7 @@ Fixed Issues:
 
 * [#545](https://github.com/ckeditor/ckeditor-dev/issues/545): [Edge] Fixed: Error thrown when pressing the Select All button in a [Source Mode](http://ckeditor.com/addon/sourcearea).
 * [#582](https://github.com/ckeditor/ckeditor-dev/issues/582): Fixed: Double slash in path to stylesheet needed by [Table Selection](http://ckeditor.com/addon/tableselection) plugin. Thanks to [Marius Dumitru Florea](https://github.com/mflorea)!
+* [#491](https://github.com/ckeditor/ckeditor-dev/issues/491): Fixed: Unnecessary dependency on [Editor Toolbar](http://ckeditor.com/addon/toolbar) plugin inside [Notification](http://ckeditor.com/addon/notification) plugin.
 * [#9780](https://dev.ckeditor.com/ticket/9780): [IE8-9] Fixed: Clicking inside empty [read-only](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-property-readOnly) editor throws an error.
 * [#16820](https://dev.ckeditor.com/ticket/16820): [IE10] Fixed: Clicking below single horizontal rule throws an error.
 

plugins/clipboard/plugin.js

@@ -116,7 +116,7 @@
 ( function() {
 	// Register the plugin.
 	CKEDITOR.plugins.add( 'clipboard', {
-		requires: 'notification',
+		requires: 'notification,toolbar',
 		// jscs:disable maximumLineLength
 		lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
 		// jscs:enable maximumLineLength

plugins/notification/plugin.js

@@ -12,7 +12,6 @@
 
 CKEDITOR.plugins.add( 'notification', {
 	lang: 'az,ca,cs,da,de,de-ch,en,eo,es,es-mx,eu,fr,gl,hr,hu,id,it,ja,km,ko,ku,nb,nl,oc,pl,pt,pt-br,ru,sk,sv,tr,ug,uk,zh,zh-cn', // %REMOVE_LINE_CORE%
-	requires: 'toolbar',
 
 	init: function( editor ) {
 		editor._.notificationArea = new Area( editor );
@@ -613,8 +612,8 @@ Area.prototype = {
 			editor = this.editor,
 			contentsRect = editor.ui.contentsElement.getClientRect(),
 			contentsPos = editor.ui.contentsElement.getDocumentPosition(),
-			top = editor.ui.space( 'top' ),
-			topRect = top.getClientRect(),
+			top,
+			topRect,
 			areaRect = area.getClientRect(),
 			notification,
 			notificationWidth = this._notificationWidth,
@@ -635,6 +634,13 @@ Area.prototype = {
 				parseInt( notification.getComputedStyle( 'margin-right' ), 10 );
 		}
 
+		// Check if toolbar exist and if so, then assign values to it (#491).
+		if ( editor.toolbar ) {
+			top = editor.ui.space( 'top' );
+			topRect = top.getClientRect();
+		}
+
+
 		// --------------------------------------- Horizontal layout ----------------------------------------
 
 		// +---Viewport-------------------------------+          +---Viewport-------------------------------+
@@ -651,7 +657,7 @@ Area.prototype = {
 		// | |                                      | |          | |                                      | |
 		// | +--------------------------------------+ |          | +--------------------------------------+ |
 		// +------------------------------------------+          +------------------------------------------+
-		if ( top.isVisible() &&
+		if ( top && top.isVisible() &&
 			topRect.bottom > contentsRect.top &&
 			topRect.bottom < contentsRect.bottom - areaRect.height ) {
 			setBelowToolbar();

tests/plugins/notification/layout.js

@@ -1,5 +1,5 @@
 /* bender-tags: editor,unit */
-/* bender-ckeditor-plugins: notification */
+/* bender-ckeditor-plugins: notification,toolbar */
 
 /**
  * Tests for layout have input and output data based on the real notification positions, which were checked that are
@@ -10,11 +10,7 @@
 
 'use strict';
 
-bender.editor = {
-	config: {
-		extraPlugins: 'notification'
-	}
-};
+bender.editor = true;
 
 /**
  * mockValues: {

tests/plugins/notification/manual/notoolbarnotifications.html

@@ -0,0 +1,48 @@
+<div style="padding: 3000px 3000px 3000px 3000px;">
+	<textarea cols="80" id="editor1" name="editor1" rows="10">
+		&lt;p&gt;Lorem ipsum dolor sit amet, qui adolescens theophrastus ne, vis dico dolore mediocrem eu. In pro nonumy ocurreret pertinacia, eam imperdiet scripserit ne. Id usu tota congue, habeo cetero no per. Vim tempor facilisis definitionem no, ad eam utroque platonem repudiare. Ei vis consetetur percipitur.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Impetus laboramus ei vis. Eruditi nusquam deleniti has an, diam detracto phaedrum ea usu. Imperdiet constituto eu cum, te has suas habemus menandri, insolens vulputate pro ei. Sea ei nonumy quaestio. Ne sit utinam sapientem.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Pro cu audiam volumus petentium, falli suscipit id sea, has ea esse cetero dissentias. Quas tractatos incorrupte cu qui. Sea ei pertinax rationibus, zril congue similique eam te. Quot quidam mediocritatem ad ius, ex eam tractatos patrioque. Qui iudico putent ex, ignota praesent te per. Nec at esse ullum, vel ei illud vivendo deseruisse. Te mei possit lucilius, quis illum antiopam eum te.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Dicta persius voluptatum id sed. At latine persius delicata quo. An his erat impedit meliore, et cum quidam maluisset posidonium. Sea legendos vituperata ne.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Ex pro mazim facete dictas, idque verterem patrioque sed ut. Id viris homero eam, pro nostrum abhorreant persequeris et. Ne has vocibus feugait definitionem. Mea vide scriptorem ei, posse intellegebat cu nec, phaedrum dignissim quo et. No impedit vivendo docendi est, et mel nihil meliore definitionem, qui splendide pertinacia complectitur te.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Quem aeque vel ne, pro at soleat vidisse aperiri. Ne cum eius vocent noluisse. Tollit inermis indoctum an pri. Dictas impetus nam eu, et pri omnes veritus lucilius. Eam ea legere gubergren, sit cu sint falli docendi.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Mei at nobis scaevola fabellas, iriure molestiae id sea. Id sea hinc brute everti, mei velit legendos corrumpit et. Ut facer melius bonorum est. Ea dicunt iisque senserit mea, no eum delicata indoctum. Animal vulputate eloquentiam ut nec, dictas facilisi ius cu, mei cu suavitate dissentiet. No vim errem democritum.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Ius in enim definitiones. Cu sed nusquam inimicus argumentum, pro cu fastidii laboramus. Prompta appellantur qui in, ad usu mutat aliquip commune, eos ex dicam expetenda. Et pri vidit nostro voluptua, in tibique lobortis qui. Ferri meliore efficiendi ea his.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Cum solet quidam no. Vidisse appellantur complectitur id his. Te noster elaboraret duo, ei vix doming essent. Mel quis mutat invenire no, mei choro fabellas vivendum eu. Mei aeque postea instructior te, iuvaret debitis dissentiet quo ne.
+		&lt;/p&gt;
+		&lt;p&gt;
+		Sint erant quaeque qui at, oportere indoctum deseruisse ei duo. Nam percipit apeirian at, est te fugit integre mediocritatem. Utroque phaedrum explicari has et, affert referrentur sed no. Everti necessitatibus ea vis, qui tale clita mollis et. Te quo veri veniam adversarium. An sed utroque habemus epicurei, an mei fugit iuvaret.
+		&lt;/p&gt;
+	</textarea>
+	<p style="width: 700px;">
+		<input onclick="manualPlayground.showWarning();" type="button" value="Show warning notification">
+		<input onclick="manualPlayground.showSuccess();" type="button" value="Show success notification">
+		<input onclick="manualPlayground.showInfo();" type="button" value="Show info notification">
+		<input onclick="manualPlayground.emulateProgress();" type="button" value="Show progress notification">
+	</p>
+	<script>
+		var editor = CKEDITOR.replace( 'editor1', {
+			extraPlugins: 'notification',
+			width: 650,
+		} );
+
+		manualPlayground.init();
+		window.scrollTo( 2950, 2950 );
+	</script>
+</div>

tests/plugins/notification/manual/notoolbarnotifications.md

@@ -0,0 +1,10 @@
+@bender-tags: 4.7.2, bug, 491
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, notification
+@bender-include: _helpers/manualplayground.js
+
+* If you don't see the editor, scroll the page to the center.
+* Play with notification using buttons.
+* Using scroll, check if position of notification is correct.
+
+**Note:** `info` and `success` notifications should close automatically after 5 sec or on `ESC` key if editor is focused.

tests/plugins/notification/manual/notoolbarnotificationsinline.html

@@ -0,0 +1,18 @@
+<div style="padding: 3000px 3000px 3000px 3000px;">
+	<div id="editor1" contenteditable="true" style="width:250px;">
+		<p>Lorem ipsum dolor sit amet, qui adolescens theophrastus ne, vis dico dolore mediocrem eu. In pro nonumy ocurreret pertinacia, eam imperdiet scripserit ne. Id usu tota congue, habeo cetero no per. Vim tempor facilisis definitionem no, ad eam utroque platonem repudiare. Ei vis consetetur percipitur.
+		</p>
+	</div>
+	<p style="width: 700px;">
+		<input onclick="manualPlayground.showWarning();" type="button" value="Show warning notification">
+		<input onclick="manualPlayground.showSuccess();" type="button" value="Show success notification">
+		<input onclick="manualPlayground.showInfo();" type="button" value="Show info notification">
+		<input onclick="manualPlayground.emulateProgress();" type="button" value="Show progress notification">
+	</p>
+	<script>
+		var editor = CKEDITOR.inline( 'editor1' );
+
+		manualPlayground.init();
+		window.scrollTo( 2950, 2950 );
+	</script>
+</div>

tests/plugins/notification/manual/notoolbarnotificationsinline.md

@@ -0,0 +1,10 @@
+@bender-tags: 4.7.2, bug, 491
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, notification, floatingspace
+@bender-include: _helpers/manualplayground.js
+
+* If you don't see the editor, scroll the page to the center.
+* Play with notification using buttons.
+* Using scroll, check if position of notification is correct.
+
+**Note:** `info` and `success` notifications should close automatically after 5 sec or on `ESC` key if editor is focused.

tests/plugins/notification/notoolbarlayout.js

@@ -0,0 +1,65 @@
+/* bender-ckeditor-plugins: notification */
+
+( function() {
+	'use strict';
+
+	bender.editor = {
+		config: {
+			width: 800,
+			height: 400
+		}
+	};
+
+	bender.test( {
+		'test for appearing in editable area': function() {
+			var editor = this.editor;
+
+			editor.once( 'notificationShow', function( evt ) {
+				// just wait after entire call stack will be free, so notification will be visible.
+				setTimeout( resume( function() {
+					var contentRect = editor.ui.contentsElement.getClientRect(),
+						notificationRect = evt.data.notification.element.getClientRect();
+
+					assert.areSame( 'foo', evt.data.notification.message );
+					assert.areSame( 'warn', evt.data.notification.type );
+
+					// editor size should be enought to kept message inside editable
+					bender.assert.isNumberInRange( parseInt( notificationRect.left, 10 ), parseInt( contentRect.left, 10 ), parseInt( contentRect.right, 10 ) );
+					bender.assert.isNumberInRange( parseInt( notificationRect.right, 10 ), parseInt( contentRect.left, 10 ), parseInt( contentRect.right, 10 ) );
+					bender.assert.isNumberInRange( parseInt( notificationRect.top, 10 ), parseInt( contentRect.top, 10 ), parseInt( contentRect.bottom, 10 ) );
+					bender.assert.isNumberInRange( parseInt( notificationRect.bottom, 10 ), parseInt( contentRect.top, 10 ), parseInt( contentRect.bottom, 10 ) );
+
+					evt.data.notification.hide();
+				} ), 0 );
+			} );
+
+			editor.showNotification( 'foo', 'warn' );
+			wait();
+		},
+
+		'test for disappering notifications': function() {
+			var editor = this.editor;
+
+			editor.once( 'notificationShow', function( evt ) {
+				setTimeout( function() {
+					evt.data.notification.hide();
+				} );
+			} );
+
+			editor.once( 'notificationHide', function( evt ) {
+				assert.areSame( 'bar', evt.data.notification.message );
+				assert.areSame( 'info', evt.data.notification.type );
+
+				assert.isTrue( evt.data.notification.isVisible() );
+				setTimeout( function() {
+					resume();
+					assert.isFalse( evt.data.notification.isVisible() );
+					evt.data.notification.hide();
+				}, 0 );
+			} );
+
+			editor.showNotification( 'bar', 'info' );
+			wait();
+		}
+	} );
+} )();