Closing HTML Assistant on loose element focus

Issue: Samsung#269
Problem: HTML Assistant cannot close when focus is lost
Solution: When focus lost HTML Assistant close by itself

Signed-off-by: Kornelia Kobiela <k.kobiela@samsung.com>

design-editor/src/pane/select-layer/html-assistant.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 'use babel';
 import {HTMLAssistantEditorElement} from 'html-assistant-editor';
 import {EVENTS, eventEmitter} from '../../events-emitter';
@@ -54,26 +55,32 @@ class HTMLAssistant {
 				.then(() => {
 					this.element = this._model.getElementWithoutId(this.selectedElementId);
 					this._htmlAssistantEditor.clean();
+					eventEmitter.emit(EVENTS.CloseInstantTextEditor);
 				})
 				.catch(error => console.error(error));
 
 		} else {
 			this._htmlAssistantEditor.open(this.getSelectedContent(this.element));
+			eventEmitter.emit(EVENTS.OpenInstantTextEditor);
 		}
 		callback(opened);
 	}
 
 	_bindEvents () {
 		eventEmitter.on(EVENTS.ElementSelected, (elementId) => {
-			console.log("element selected", elementId);
+			console.log('element selected', elementId);
 			this._model = appManager.getActiveDesignEditor().getModel();
 			this.selectedElementId = elementId;
 			this.element = this._model.getElementWithoutId(this.selectedElementId);
 		});
 
 		eventEmitter.on(EVENTS.ElementDeselected, () => {
-			console.log("element deselected");
-			this.selectedElementId = null;
+			if (this._htmlAssistantEditor.isOpened()) {
+				console.log('element deselected');
+				this.toggle(() => {
+					this.selectedElementId = null;
+				});
+			}
 		});
 	}
 }

design-editor/src/panel/toolbar-element.js

@@ -23,6 +23,7 @@ class Toolbar extends DressElement {
      */
 	onCreated() {
 		this._allButtonsDisabled = false;
+		this.htmlAssistantOpen = false;
 		this._initialize();
 		this._create();
 		this.events = {
@@ -40,6 +41,14 @@ class Toolbar extends DressElement {
 			'click .save-file': EVENTS.DocumentSave
 		};
 
+		eventEmitter.on(EVENTS.OpenInstantTextEditor, () => {
+			this.htmlAssistantOpen = true;
+		});
+
+		eventEmitter.on(EVENTS.OpenInstantTextEditor, () => {
+			this.htmlAssistantOpen = false;
+		});
+
 		eventEmitter.on(EVENTS.ElementSelected, (elementId) => {
 			this.setEnable(this.Controls.INSTANT_EDIT);
 			if (this._assistantViewState) {
@@ -48,6 +57,7 @@ class Toolbar extends DressElement {
 			this._selectedElement = elementId;
 		});
 		eventEmitter.on(EVENTS.ElementDeselected, () => {
+			this.turnOffControl(this.Controls.INSTANT_EDIT);
 			this.setDisable(this.Controls.INSTANT_EDIT);
 			this.setDisable(this.Controls.INSERT_CODE);
 			this._selectedElement = null;

design-editor/src/system/stage-manager.js

@@ -36,6 +36,7 @@ class StageManager {
 
         this._infoElement = new InfoElement();
 
+        this._htmlAssistant = new HTMLAssistant();
         this._toolbarContainerElement = new ToolbarElement();
         this._toolbarContainerElementPanel = null;
 
@@ -45,7 +46,6 @@ class StageManager {
 		// this._interactionViewElementToolbarPanel = null;
        // this._interactionView = new InteractionViewElement();
 
-        this._htmlAssistant = new HTMLAssistant();
         this._assistantManager = new AssistantManager();
         panelManager.openPanel({type: 'left', item: this._toolbarContainerElement, priority: 110});