Skip to content

Commit

Permalink
Merge pull request #263 from codex-team/delete-block
Browse files Browse the repository at this point in the history
Events triggering
  • Loading branch information
khaydarov authored Jun 24, 2018
2 parents 572f56f + ad78d12 commit 60eda57
Show file tree
Hide file tree
Showing 19 changed files with 834 additions and 37 deletions.
437 changes: 419 additions & 18 deletions build/codex-editor.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/codex-editor.js.map

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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


4 changes: 1 addition & 3 deletions docs/caret.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
50 changes: 50 additions & 0 deletions docs/events.md
Original file line number Diff line number Diff line change
@@ -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|
98 changes: 98 additions & 0 deletions src/components/block-tunes/block-tune-delete.ts
Original file line number Diff line number Diff line change
@@ -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();
}
}
}
3 changes: 2 additions & 1 deletion src/components/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) => {
Expand Down
41 changes: 40 additions & 1 deletion src/components/interfaces/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export interface IAPI {
caret: ICaretAPI;
sanitizer: ISanitizerAPI;
toolbar: IToolbarAPI;
events: IEventsAPI;
}

/**
Expand All @@ -26,6 +27,11 @@ export interface IBlocksAPI {
* After moving the block, we need to scroll window
*/
moveUp: () => void;

/**
* Removes block
*/
delete: (blockIndex?: number) => void;
}

/**
Expand All @@ -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;
}
18 changes: 16 additions & 2 deletions src/components/modules/api-blocks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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);
}

}
58 changes: 58 additions & 0 deletions src/components/modules/api-events.ts
Original file line number Diff line number Diff line change
@@ -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);
}

}
3 changes: 2 additions & 1 deletion src/components/modules/api-sanitizer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand All @@ -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) {
Expand Down
Loading

0 comments on commit 60eda57

Please sign in to comment.