Events triggering

docs/api.md

@@ -18,6 +18,8 @@ export interface IAPI {
 
 #### IBlocksAPI
 
+Methods that working with Blocks
+
 ```moveDown()``` - method moves down the current block.
 
 ```moveUp()``` - method moves up the current block.
@@ -40,3 +42,22 @@ let customConfig = {
 this.api.sanitizer.clean(taintString, customConfig);
 ```
 
+### IToolbarAPI
+
+Methods that working with Toolbar
+
+```open()``` - Opens toolbar
+
+```close()``` - Closes toolbar, toolbox and blockSettings if they are opened
+
+### IEventsAPI
+
+Methods that allows to subscribe on CodeX Editor events
+
+```on(eventName: string, callback: Function)``` - subscribe callback on event
+
+```off(eventName: string, callback: Function)``` - unsubscribe callback from event
+
+```emit(eventName: string, data: object)``` - fires all subscribed callbacks with passed data
+
+

docs/caret.md

@@ -6,8 +6,6 @@ between blocks.
 Caret class implements basic Module class that holds User configuration
 and default CodeX Editor instances
 
-You can read more about Module class [here]()
-
 ## Properties
 
 ## Methods
@@ -36,4 +34,4 @@ Caret.setToTheLastBlock()
 ```
 
 > sets Caret at the end of last Block
-If last block is not empty, inserts another empty Block which is passed as initial
+If last block is not empty, inserts another empty Block which is passed as initial

docs/events.md

@@ -0,0 +1,50 @@
+# CodeX Editor Events Module
+
+Module allows Developers to subscribe on events or trigger own events
+
+## Methods
+
+### On
+
+```javascript
+Events.on(eventName, callback)
+``` 
+
+> Method subscribes callback on event. It will be called when CodeX Editor emits this event
+
+#### params
+
+| Param        | Type | Description|
+| -------------|------ |:-------------:|
+| eventName        | String | event name|
+| callback | Function | event callback|
+
+### Off
+
+```javascript
+Events.off(eventName, callback)
+``` 
+
+> Method unsubscribes callback on event
+
+#### params
+
+| Param        | Type | Description|
+| -------------|------ |:-------------:|
+| eventName        | String | event name|
+| callback | Function | event callback|
+
+### Emit
+
+```javascript
+Events.emit(eventName, data)
+``` 
+
+> Method emits data to all subscribed callbacks
+
+#### params
+
+| Param        | Type | Description|
+| -------------|------ |:-------------:|
+| eventName        | String | event name|
+| data | Object | any data|

src/components/block-tunes/block-tune-delete.ts

@@ -0,0 +1,98 @@
+/**
+ * @class DeleteTune
+ * @classdesc Editor's default tune that moves up selected block
+ *
+ * @copyright <CodeX Team> 2018
+ */
+import IBlockTune from './block-tune';
+
+declare var $: any;
+declare var _: any;
+
+export default class DeleteTune implements IBlockTune {
+
+  /**
+   * Property that contains CodeX Editor API methods
+   * @see {docs/api.md}
+   */
+  private readonly api: any;
+
+  /**
+   * Styles
+   * @type {{wrapper: string}}
+   */
+  private CSS = {
+    wrapper: 'ass',
+  };
+
+  /**
+   * Delete confirmation
+   */
+  private needConfirmation: boolean;
+
+  /**
+   * DeleteTune constructor
+   *
+   * @param {Object} api
+   */
+  public constructor({api}) {
+    this.api = api;
+
+    this.resetConfirmation = () => {
+      this.setConfirmation(false);
+    };
+  }
+
+  /**
+   * change tune state
+   */
+  private setConfirmation(state): void {
+    this.needConfirmation = state;
+  }
+
+  /**
+   * set false confirmation state
+   */
+  private resetConfirmation: () => void;
+
+  /**
+   * Create "Delete" button and add click event listener
+   * @returns [Element}
+   */
+  public render() {
+    const deleteButton = $.make('div', ['ce-settings-delete'], {});
+    deleteButton.addEventListener('click', (event) => this.handleClick(event), false);
+    return deleteButton;
+  }
+
+  /**
+   * Delete block conditions passed
+   * @param {MouseEvent} event
+   */
+  public handleClick(event: MouseEvent): void {
+
+    /**
+     * if block is not waiting the confirmation, subscribe on block-settings-closing event to reset
+     * otherwise delete block
+     */
+    if (!this.needConfirmation) {
+      this.setConfirmation(true);
+
+      /**
+       * Subscribe on event.
+       * When toolbar block settings is closed but block deletion is not confirmed,
+       * then reset confirmation state
+       */
+      this.api.events.on('block-settings-closed', this.resetConfirmation);
+
+    } else {
+
+      /**
+       * Unsubscribe from block-settings closing event
+       */
+      this.api.events.off('block-settings-closed', this.resetConfirmation);
+
+      this.api.blocks.delete();
+    }
+  }
+}

src/components/block.js

@@ -9,6 +9,7 @@
 
 /** Import default tunes */
 import MoveUpTune from './block-tunes/block-tune-move-up';
+import DeleteTune from './block-tunes/block-tune-delete';
 
 /**
  * @classdesc Abstract Block class that contains Block information, Tool name and Tool class instance
@@ -176,7 +177,7 @@ export default class Block {
    * @return {IBlockTune[]}
    */
   makeTunes() {
-    let tunesList = [ MoveUpTune ];
+    let tunesList = [MoveUpTune, DeleteTune];
 
     // Pluck tunes list and return tune instances with passed Editor API and settings
     return tunesList.map( (tune) => {

src/components/interfaces/api.ts

@@ -8,6 +8,7 @@ export interface IAPI {
   caret: ICaretAPI;
   sanitizer: ISanitizerAPI;
   toolbar: IToolbarAPI;
+  events: IEventsAPI;
 }
 
 /**
@@ -26,6 +27,11 @@ export interface IBlocksAPI {
    * After moving the block, we need to scroll window
    */
   moveUp: () => void;
+
+  /**
+   * Removes block
+   */
+  delete: (blockIndex?: number) => void;
 }
 
 /**
@@ -49,5 +55,38 @@ export interface ISanitizerAPI {
 
 /**
  * Toolbar's methods
+ * Basic toolbar methods
  */
-export interface IToolbarAPI {}
+export interface IToolbarAPI {
+
+  /**
+   * Opens only toolbar
+   */
+  open: () => void;
+
+  /**
+   * Closes toolbar. If toolbox or toolbar-blockSettings are opened then they will be closed too
+   */
+  close: () => void;
+}
+
+/**
+ * Events Module API methods
+ */
+export interface IEventsAPI {
+
+  /**
+   * Subsribe on events
+   */
+  on: (eventName: string, callback: () => void) => void;
+
+  /**
+   * Trigger subsribed callbacks
+   */
+  emit: (eventName: string, data: object) => void;
+
+  /**
+   * Unsubsribe callback
+   */
+  off: (eventName: string, callback: () => void) => void;
+}

src/components/modules/api-blocks.ts

@@ -22,11 +22,15 @@ export default class BlocksAPI extends Module implements IBlocksAPI {
    */
   get methods(): IBlocksAPI {
     return {
+      delete: () => this.delete(),
       moveDown: () => this.moveDown(),
-      moveUp: () => this.moveUp()
-    }
+      moveUp: () => this.moveUp(),
+    };
   }
 
+  /**
+   * Moves block down
+   */
   public moveDown(): void {
     console.log('moving down', this.Editor.BlockManager);
   }
@@ -38,4 +42,14 @@ export default class BlocksAPI extends Module implements IBlocksAPI {
     console.log('moving up', this.Editor.BlockManager);
   }
 
+  /**
+   * Deletes Block
+   * @param blockIndex
+   */
+  public delete(blockIndex?: number): void {
+    this.Editor.BlockManager.removeBlock(blockIndex);
+    this.Editor.Toolbar.close();
+    this.Editor.BlockManager.navigatePrevious(true);
+  }
+
 }

src/components/modules/api-events.ts

@@ -0,0 +1,58 @@
+declare var Module: any;
+
+import { IEventsAPI } from '../interfaces/api';
+
+/**
+ * @class EventsAPI
+ * provides with methods working with Toolbar
+ */
+export default class EventsAPI extends Module implements IEventsAPI {
+
+  /**
+   * Save Editor config. API provides passed configuration to the Blocks
+   * @param {EditorsConfig} config
+   */
+  constructor({config}) {
+    super({config});
+  }
+
+  /**
+   * Available methods
+   * @return {IEventsAPI}
+   */
+  get methods(): IEventsAPI {
+    return {
+      emit: (eventName: string, data: object) => this.emit(eventName, data),
+      off: (eventName: string, callback: () => void) => this.off(eventName, callback),
+      on: (eventName: string, callback: () => void) => this.on(eventName, callback),
+    };
+  }
+
+  /**
+   * Subscribe on Events
+   * @param {String} eventName
+   * @param {Function} callback
+   */
+  public on(eventName, callback): void {
+    this.Editor.Events.on(eventName, callback);
+  }
+
+  /**
+   * Emit event with data
+   * @param {String} eventName
+   * @param {Object} data
+   */
+  public emit(eventName, data): void {
+    this.Editor.Events.emit(eventName, data);
+  }
+
+  /**
+   * Unsubscribe from Event
+   * @param {String} eventName
+   * @param {Function} callback
+   */
+  public off(eventName, callback): void {
+    this.Editor.Events.off(eventName, callback);
+  }
+
+}

src/components/modules/api-sanitizer.ts

@@ -4,6 +4,7 @@ import {ISanitizerAPI} from '../interfaces/api';
 
 /**
  * @class API
+ * Provides CodeX Editor Sanitizer that allows developers to clean their HTML
  */
 export default class SanitizerAPI extends Module implements ISanitizerAPI {
 
@@ -22,7 +23,7 @@ export default class SanitizerAPI extends Module implements ISanitizerAPI {
   get methods(): ISanitizerAPI {
     return {
       clean: (taintString, config) => this.clean(taintString, config),
-    }
+    };
   }
 
   public clean(taintString, config) {