Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up UI creation a bit #186

Merged
merged 1 commit into from
Mar 6, 2017
Merged

Clean up UI creation a bit #186

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 150 additions & 106 deletions tinymce-single/tinymce/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,6 @@

editor.on( 'preinit', function() {
var DOM = tinymce.DOM;
var blockToolbar;
var blockToolbars = {};

editor.addButton( 'block', {
icon: 'gridicons-posts',
Expand Down Expand Up @@ -192,95 +190,165 @@
editor.buttons.strikethrough.icon = 'gridicons-strikethrough';
editor.buttons.link.icon = 'gridicons-link';

var blockOutline = document.createElement( 'div' );
var blockToolbarWidth = 0;

blockOutline.className = 'block-outline';
document.body.appendChild( blockOutline );
function createBlockOutline() {
var outline = document.createElement( 'div' );

var toolbarInline = editor.wp._createToolbar( [ 'bold', 'italic', 'strikethrough', 'link' ] );
var toolbarCaret = editor.wp._createToolbar( [ 'add' ] );
blockToolbar = editor.wp._createToolbar( [ 'up', 'down' ] );
outline.className = 'block-outline';
document.body.appendChild( outline );

toolbarCaret.$el.addClass( 'block-toolbar' );
blockToolbar.$el.addClass( 'block-toolbar' );
return outline;
}

function getInsertButtons() {
var allSettings = wp.blocks.getBlocks();
var buttons = [];
var key;
function createInsertToolbar() {
var insert = editor.wp._createToolbar( [ 'add' ] );

for ( key in allSettings ) {
if ( allSettings[ key ].insert ) {
buttons.push( {
icon: allSettings[ key ].icon,
onClick: allSettings[ key ].insert
} );
}
insert.$el.addClass( 'block-toolbar' );

insert.reposition = function () {
var elementRect = getSelectedBlock().getBoundingClientRect();
var contentRect = editor.getBody().getBoundingClientRect();

DOM.setStyles( this.getEl(), {
position: 'absolute',
left: contentRect.left + 50 + 'px',
top: elementRect.top + window.pageYOffset + 'px'
} );

this.show();
}

buttons.push( {
text: 'Work in progress',
onClick: function() {}
} );
return insert;
}

function createInsertMenu() {
var insertMenu = editor.wp._createToolbar( ( function() {
var allSettings = wp.blocks.getBlocks();
var buttons = [];
var key;

for ( key in allSettings ) {
if ( allSettings[ key ].insert ) {
buttons.push( {
icon: allSettings[ key ].icon,
onClick: allSettings[ key ].insert
} );
}
}

buttons.push( {
text: 'Work in progress',
onClick: function() {}
} );

return buttons;
} )() );

insertMenu.reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();
var contentRect = editor.getBody().getBoundingClientRect();

DOM.setStyles( toolbar, {
position: 'absolute',
left: contentRect.left + 100 + 'px',
top: elementRect.top + window.pageYOffset + 'px'
} );

return buttons;
this.show();
}

return insertMenu;
}

var toolbarInsert = editor.wp._createToolbar( getInsertButtons() );
function createInlineToolbar() {
var inline = editor.wp._createToolbar( [ 'bold', 'italic', 'strikethrough', 'link' ] );

var anchorNode;
var range;
var blockToolbarWidth = 0;
inline.reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();

toolbarInsert.reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();
var contentRect = editor.getBody().getBoundingClientRect();
DOM.setStyles( toolbar, {
position: 'absolute',
left: elementRect.left + 8 + blockToolbarWidth + 'px',
top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
} );

DOM.setStyles( toolbar, {
position: 'absolute',
left: contentRect.left + 100 + 'px',
top: elementRect.top + window.pageYOffset + 'px'
} );
this.show();
}

this.show();
return inline;
}

toolbarInline.reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();
function createBlockNavigation() {
var navigation = editor.wp._createToolbar( [ 'up', 'down' ] );

DOM.setStyles( toolbar, {
position: 'absolute',
left: elementRect.left + 8 + blockToolbarWidth + 'px',
top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
} );
navigation.$el.addClass( 'block-toolbar' );

navigation.reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();

var contentRect = editor.getBody().getBoundingClientRect();

DOM.setStyles( toolbar, {
position: 'absolute',
left: contentRect.left + 50 + 'px',
top: elementRect.top + window.pageYOffset + 'px'
} );

this.show();
}

this.show();
return navigation;
}

toolbarCaret.reposition =
blockToolbar.reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();
function createBlockToolbars() {
var settings = wp.blocks.getBlocks();
var toolbars = {};
var key;

var contentRect = editor.getBody().getBoundingClientRect();
for ( key in settings ) {
toolbars[ key ] = editor.wp._createToolbar( settings[ key ].controls || [] );
toolbars[ key ].reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();

DOM.setStyles( toolbar, {
position: 'absolute',
left: contentRect.left + 50 + 'px',
top: elementRect.top + window.pageYOffset + 'px'
} );
DOM.setStyles( toolbar, {
position: 'absolute',
left: elementRect.left + 'px',
top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
} );

blockToolbarWidth = toolbarRect.width;

this.show();
}
}

this.show();
return toolbars;
}

var UI = {
outline: createBlockOutline(),
insert: createInsertToolbar(),
insertMenu: createInsertMenu(),
inline: createInlineToolbar(),
navigation: createBlockNavigation(),
blocks: createBlockToolbars()
};

var anchorNode;
var range;

editor.on( 'blur', function() {
toolbarInline.hide();
toolbarCaret.hide();
UI.inline.hide();
UI.insert.hide();
hideBlockUI();
} );

Expand Down Expand Up @@ -336,14 +404,14 @@
hasBlockUI = false;
}

toolbarInline.hide();
blockToolbar.hide();
UI.inline.hide();
UI.navigation.hide();

tinymce.each( blockToolbars, function( toolbar ) {
tinymce.each( UI.blocks, function( toolbar ) {
toolbar.hide();
} );

DOM.setStyles( blockOutline, {
DOM.setStyles( UI.outline, {
display: 'none'
} );
}
Expand All @@ -362,46 +430,22 @@
hasBlockUI = true;
}

blockToolbar.reposition();
UI.navigation.reposition();

tinymce.each( blockToolbars, function( toolbar, key ) {
tinymce.each( UI.blocks, function( toolbar, key ) {
if ( key !== settings._id ) {
toolbar.hide();
}
} );

if ( settings ) {
if ( ! blockToolbars[ settings._id ] ) {
controls = settings.controls || [];

blockToolbars[ settings._id ] = editor.wp._createToolbar( controls );
blockToolbars[ settings._id ].reposition = function () {
var toolbar = this.getEl();
var toolbarRect = toolbar.getBoundingClientRect();
var elementRect = getSelectedBlock().getBoundingClientRect();
var contentRect = editor.getBody().getBoundingClientRect();

DOM.setStyles( toolbar, {
position: 'absolute',
left: elementRect.left + 'px',
top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px'
} );

blockToolbarWidth = toolbarRect.width;

this.show();
}

editor.nodeChanged(); // Update UI.
}

blockToolbars[ settings._id ].reposition();
focus && focusToolbar( blockToolbars[ settings._id ] );
UI.blocks[ settings._id ].reposition();
focus && focusToolbar( UI.blocks[ settings._id ] );

if ( anchorNode.nodeType === 3 ) {
toolbarInline.reposition();
UI.inline.reposition();
} else {
toolbarInline.hide();
UI.inline.hide();
}
}
}
Expand Down Expand Up @@ -529,10 +573,10 @@
window.console.log( 'Debug: empty node.' );

hideBlockUI();
toolbarInline.hide();
toolbarCaret.reposition();
UI.inline.hide();
UI.insert.reposition();
} else {
toolbarCaret.hide();
UI.insert.hide();

if ( isBlockUIVisible ) {
var selectedBlocks = getBlockSelection();
Expand All @@ -541,13 +585,13 @@
showBlockUI();
} else {
hideBlockUI();
blockToolbar.reposition();
UI.navigation.reposition();
}

var startRect = selectedBlocks.first()[0].getBoundingClientRect();
var endRect = selectedBlocks.last()[0].getBoundingClientRect();

DOM.setStyles( blockOutline, {
DOM.setStyles( UI.outline, {
display: 'block',
position: 'absolute',
left: Math.min( startRect.left, endRect.left ) + 'px',
Expand All @@ -561,9 +605,9 @@
}

if ( insert ) {
toolbarInsert.reposition();
UI.insertMenu.reposition();
} else {
toolbarInsert.hide();
UI.insertMenu.hide();
}
} );

Expand Down