Skip to content

Commit

Permalink
container field initial blocks loading fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
George Yakovlev committed Feb 17, 2020
1 parent 1b95e0a commit ab64ff0
Show file tree
Hide file tree
Showing 8 changed files with 1,126 additions and 936 deletions.
385 changes: 218 additions & 167 deletions demo/js/jquery.brickyeditor.js
View file

Large diffs are not rendered by default.

269 changes: 149 additions & 120 deletions dist/jquery.brickyeditor.es6.js
View file

Large diffs are not rendered by default.

385 changes: 218 additions & 167 deletions dist/jquery.brickyeditor.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/jquery.brickyeditor.min.js
View file

Large diffs are not rendered by default.

313 changes: 164 additions & 149 deletions src/tsc/BlocksContainer.ts
View file
Original file line number Diff line number Diff line change
@@ -1,173 +1,188 @@
namespace BrickyEditor {
export class BlocksContainer {

public blocks: Array<Block> = [];
public selectedBlock: Block;
public isContainer: boolean = true;
public $placeholder: JQuery;

constructor(
private $element: JQuery,
private onAddBlock: (block: Block, idx: number) => any,
private onDeleteBlock: (block: Block, idx: number) => any,
private onSelectBlock: (block: Block) => any,
private onDeselectBlock: (block: Block) => any,
private onMoveBlock: (block: Block, from: number, to: number) => any,
private onUpdateBlock: (block: Block, property: string, oldValue: any, newValue: any) => any,
private onUpload: (file: any, callback: (url: string) => void) => void,
private usePlaceholder: boolean = false) {

this.togglePlaceholderIfNeed();
}
export class BlocksContainer {
public blocks: Array<Block> = [];
public selectedBlock: Block;
public isContainer: boolean = true;
public $placeholder: JQuery;

constructor(
private $element: JQuery,
private onAddBlock: (block: Block, idx: number) => any,
private onDeleteBlock: (block: Block, idx: number) => any,
private onSelectBlock: (block: Block) => any,
private onDeselectBlock: (block: Block) => any,
private onMoveBlock: (block: Block, from: number, to: number) => any,
private onUpdateBlock: (
block: Block,
property: string,
oldValue: any,
newValue: any
) => any,
private onUpload: (file: any, callback: (url: string) => void) => void,
private usePlaceholder: boolean = false
) {
this.togglePlaceholderIfNeed();
}

public getData(ignoreHtml?: Boolean): any {
var blocksData = [];
this.blocks.forEach(block => {
blocksData.push(block.getData(ignoreHtml));
});
return blocksData;
}
public getData(ignoreHtml?: Boolean): any {
var blocksData = [];
this.blocks.forEach(block => {
blocksData.push(block.getData(ignoreHtml));
});
return blocksData;
}

public getHtml(): string {
var blocksHtml = [];
this.blocks.forEach(block => {
blocksHtml.push(block.getHtml(true));
});
public getHtml(): string {
var blocksHtml = [];
this.blocks.forEach(block => {
blocksHtml.push(block.getHtml(true));
});

var blocksHtmlJoined = blocksHtml.join("\n");
let $el = this.$element
.clone(false, false)
.html(blocksHtmlJoined)
.wrap("<div></div>");
const html = $("<div></div>")
.append($el)
.html();
return html;
}

var blocksHtmlJoined = blocksHtml.join('\n');
let $el = this.$element.clone(false, false).html(blocksHtmlJoined).wrap('<div></div>');
const html = $('<div></div>').append($el).html();
return html;
}
public addBlock(
template: Template,
data?: Array<Fields.BaseField>,
idx?: number,
select: boolean = true
) {
let block = new Block(
template,
false,
data,
block => this.deleteBlock(block),
block => this.selectBlock(block),
block => this.deselectBlock(block),
block => this.copyBlock(block),
(block, offset) => this.moveBlock(block, offset),
this.onUpdateBlock,
this.onUpload
);

this.insertBlock(block, idx, select);

if (select) {
block.select();
block.scrollTo();
}
}

public addBlock(
template: Template,
data?: Array<Fields.BaseField>,
idx?: number,
select: boolean = true) {

let block = new Block(
template,
false,
data,
block => this.deleteBlock(block),
block => this.selectBlock(block),
block => this.deselectBlock(block),
block => this.copyBlock(block),
(block, offset) => this.moveBlock(block, offset),
this.onUpdateBlock,
this.onUpload);

this.insertBlock(block, idx);

if (select) {
block.select();
block.scrollTo();
}
}
private insertBlock(block: Block, idx?: number, select: boolean = true) {
idx = idx || this.blocks.length;
if (this.selectedBlock) {
idx = this.blocks.indexOf(this.selectedBlock) + 1;
}

private insertBlock(block: Block, idx?: number) {
idx = idx || this.blocks.length;
if (this.selectedBlock) {
idx = this.blocks.indexOf(this.selectedBlock) + 1;
}
this.blocks.splice(idx, 0, block);
if (idx == 0) {
// todo: move to block ui
this.$element.append(block.ui.$editor);
} else {
// todo: move to block ui
this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
}

this.blocks.splice(idx, 0, block);
if (idx == 0) { // todo: move to block ui
this.$element.append(block.ui.$editor);
}
else { // todo: move to block ui
this.blocks[idx - 1].ui.$editor.after(block.ui.$editor);
}
this.onAddBlock(block, idx);

this.onAddBlock(block, idx);
block.select(null);
if (select) {
block.select(null);
}

this.togglePlaceholderIfNeed();
}
this.togglePlaceholderIfNeed();
}

private deleteBlock(block: Block) {
const idx = this.blocks.indexOf(block);
this.blocks.splice(idx, 1);
block = null;

if (idx < this.blocks.length) {
this.blocks[idx].select();
}
else if (this.blocks.length > 0) {
this.blocks[idx - 1].select();
}
else {
this.selectedBlock = null;
}

// Trigger event
this.onDeleteBlock(block, idx);

this.togglePlaceholderIfNeed();
}
private deleteBlock(block: Block) {
const idx = this.blocks.indexOf(block);
this.blocks.splice(idx, 1);
block = null;

private moveBlock(block: Block, offset: number) {
const idx = this.blocks.indexOf(block);
const new_idx = idx + offset;
if (idx < this.blocks.length) {
this.blocks[idx].select();
} else if (this.blocks.length > 0) {
this.blocks[idx - 1].select();
} else {
this.selectedBlock = null;
}

if (new_idx >= this.blocks.length || new_idx < 0)
return;
// Trigger event
this.onDeleteBlock(block, idx);

var $anchorBlock = this.blocks[new_idx].ui.$editor;
if (offset > 0) {
$anchorBlock.after(block.ui.$editor);
}
else if (offset < 0) {
$anchorBlock.before(block.ui.$editor);
}
this.togglePlaceholderIfNeed();
}

this.blocks.splice(idx, 1);
this.blocks.splice(new_idx, 0, block);
private moveBlock(block: Block, offset: number) {
const idx = this.blocks.indexOf(block);
const new_idx = idx + offset;

this.onMoveBlock(block, idx, new_idx);
if (new_idx >= this.blocks.length || new_idx < 0) return;

// Scroll to block
block.scrollTo();
}
var $anchorBlock = this.blocks[new_idx].ui.$editor;
if (offset > 0) {
$anchorBlock.after(block.ui.$editor);
} else if (offset < 0) {
$anchorBlock.before(block.ui.$editor);
}

private copyBlock(block: Block) {
const idx = this.blocks.indexOf(block) + 1;
const copy = this.addBlock(block.template, block.getData().fields, idx, true);
}
this.blocks.splice(idx, 1);
this.blocks.splice(new_idx, 0, block);

private selectBlock(block: Block) {
if (this.selectedBlock === block)
return;
this.onMoveBlock(block, idx, new_idx);

if (this.selectedBlock) {
this.selectedBlock.deselect();
}
// Scroll to block
block.scrollTo();
}

this.selectedBlock = block;
this.onSelectBlock(block);
}
private copyBlock(block: Block) {
const idx = this.blocks.indexOf(block) + 1;
const copy = this.addBlock(
block.template,
block.getData().fields,
idx,
true
);
}

private deselectBlock(block: Block) {
this.selectedBlock = null;
this.onDeselectBlock(block);
}
private selectBlock(block: Block) {
if (this.selectedBlock === block) return;

if (this.selectedBlock) {
this.selectedBlock.deselect();
}

this.selectedBlock = block;
this.onSelectBlock(block);
}

private deselectBlock(block: Block) {
this.selectedBlock = null;
this.onDeselectBlock(block);
}

private togglePlaceholderIfNeed() {
if(!this.usePlaceholder) {
return;
}

if(this.blocks.length === 0) {
if(!this.$placeholder) {
this.$placeholder = $('<i data-bre-placeholder="true">Click here to select this container...</i>');
this.$element.append(this.$placeholder);
}
}
else if (this.$placeholder) {
this.$placeholder.remove();
this.$placeholder = null;
}
private togglePlaceholderIfNeed() {
if (!this.usePlaceholder) {
return;
}

if (this.blocks.length === 0) {
if (!this.$placeholder) {
this.$placeholder = $(
'<i data-bre-placeholder="true">Click here to select this container...</i>'
);
this.$element.append(this.$placeholder);
}
} else if (this.$placeholder) {
this.$placeholder.remove();
this.$placeholder = null;
}
}
}
}
}
Loading

0 comments on commit ab64ff0

Please sign in to comment.