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

Jump to bottom

Show block UI on focus, hide on type. #140

Merged
merged 1 commit into from
Feb 27, 2017
Merged

Show block UI on focus, hide on type. #140

Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions shared/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ body {

#editor figure {
float: none;
margin: 0;
margin: 1em 0;
width: 100%;
transition: margin 0.5s, width 0.5s;
/*transition: margin 0.5s, width 0.5s;*/
}

#editor figure.aligncenter {
Expand Down
4 changes: 2 additions & 2 deletions shared/tinymce/logger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ window.tinymce.PluginManager.add( 'logger', function( editor ) {
beforeExecCommand: 'fires before commands are executed.',
execCommand: 'fires after commands are executed.',
change: 'fires when a new undo level is added.',
dirty: 'fires when the editor is considered to be in a dirty (unsaved) state. '
dirty: 'fires when the editor is considered to be in a dirty (unsaved) state.'
};

window.tinymce.each( types, function( info, type ) {
editor.on( type, function( event ) {
console.log( type, info, event );
window.console.log( type, info, event );
} );
} );
} );
146 changes: 7 additions & 139 deletions shared/tinymce/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,83 +190,7 @@

toolbar.bottom = bottom;

function reposition() {
if ( ! currentSelection ) {
return this;
}

var scrollX = window.pageXOffset || document.documentElement.scrollLeft,
scrollY = window.pageYOffset || document.documentElement.scrollTop,
windowWidth = window.innerWidth,
windowHeight = window.innerHeight,
toolbar = this.getEl(),
toolbarWidth = toolbar.offsetWidth,
toolbarHeight = toolbar.clientHeight + 10,
selection = currentSelection.getBoundingClientRect(),
selectionMiddle = ( selection.left + selection.right ) / 2,
buffer = 5,
spaceNeeded = toolbarHeight + buffer,
spaceTop = selection.top,
spaceBottom = windowHeight - selection.bottom,
editorHeight = windowHeight,
className = '',
top, left;

if ( spaceTop >= editorHeight || spaceBottom >= editorHeight ) {
this.scrolling = true;
this.hide();
this.scrolling = false;
return this;
}

if ( this.bottom ) {
if ( spaceBottom >= spaceNeeded ) {
className = ' mce-arrow-up';
top = selection.bottom + scrollY;
} else if ( spaceTop >= spaceNeeded ) {
className = ' mce-arrow-down';
top = selection.top + scrollY - toolbarHeight;
}
} else {
if ( spaceTop >= spaceNeeded ) {
className = ' mce-arrow-down';
top = selection.top + scrollY - toolbarHeight;
} else if ( spaceBottom >= spaceNeeded && editorHeight / 2 > selection.bottom ) {
className = ' mce-arrow-up';
top = selection.bottom + scrollY;
}
}

if ( typeof top === 'undefined' ) {
top = scrollY + buffer;
}

left = selectionMiddle - toolbarWidth / 2 + scrollX;

if ( selection.left < 0 || selection.right > windowWidth ) {
left = scrollX + ( windowWidth - toolbarWidth ) / 2;
} else if ( toolbarWidth >= windowWidth ) {
className += ' mce-arrow-full';
left = 0;
} else if ( ( left < 0 && selection.left + toolbarWidth > windowWidth ) || ( left + toolbarWidth > windowWidth && selection.right - toolbarWidth < 0 ) ) {
left = ( windowWidth - toolbarWidth ) / 2;
} else if ( left < scrollX ) {
className += ' mce-arrow-left';
left = selection.left + scrollX;
} else if ( left + toolbarWidth > windowWidth + scrollX ) {
className += ' mce-arrow-right';
left = selection.right - toolbarWidth + scrollX;
}

toolbar.className = toolbar.className.replace( / ?mce-arrow-[\w]+/g, '' ) + className;

DOM.setStyles( toolbar, {
'left': left,
'top': top
} );

return this;
}
function reposition() {}

toolbar.on( 'show', function() {
this.reposition();
Expand All @@ -289,67 +213,11 @@
return toolbar;
}

editor.shortcuts.add( 'alt+119', '', function() {
var node;

if ( activeToolbar ) {
node = activeToolbar.find( 'toolbar' )[0];
node && node.focus( true );
}
} );

editor.on( 'nodechange', function( event ) {
// This can move the carect unexpectedly!
// event.element.normalize();

var range = editor.selection.getRng()

var empty = (
editor.dom.isEmpty( event.element ) &&
( event.element.nodeName === 'P' || (
event.element.nodeName === 'BR' &&
event.element.parentNode.nodeName === 'P'
) )
);

var args = {
element: event.element,
empty: empty,
parents: event.parents,
range: range,
};

editor.fire( 'wptoolbar', args );

currentSelection = args.selection || args.element;

if ( activeToolbar && activeToolbar !== args.toolbar ) {
activeToolbar.hide();
}

if ( args.toolbar ) {
if ( activeToolbar !== args.toolbar ) {
activeToolbar = args.toolbar;
activeToolbar.show();
} else {
activeToolbar.reposition();
}
} else {
activeToolbar = false;
}
} );

editor.on( 'focus', function() {
if ( activeToolbar ) {
activeToolbar.show();
}
} );

function hide( event ) {
if ( activeToolbar ) {
if ( activeToolbar.tempHide || event.type === 'hide' ) {
activeToolbar.hide();
activeToolbar = false;
// if ( activeToolbar ) {
// if ( activeToolbar.tempHide || event.type === 'hide' ) {
// activeToolbar.hide();
// activeToolbar = false;
// } else if ( (
// event.type === 'resizewindow' ||
// event.type === 'scrollwindow' ||
Expand All @@ -367,8 +235,8 @@

// activeToolbar.scrolling = true;
// activeToolbar.hide();
}
}
// }
// }
}

// For full height editor.
Expand Down
25 changes: 25 additions & 0 deletions tinymce-single/blocks/core/gallery/register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
window.wp.blocks.register( {
name: 'gallery',
namespace: 'core',
type: 'image',
keywords: [],
icon: 'gridicons-image',
buttons: [
'block-align-left',
'block-align-center',
'block-align-right',
// {
// type: 'select',
// label: 'Columns'
// },
// {
// type: 'button',
// label: 'Columns',
// icon: 'gridicons-image',
// command: function( editor, node ) {
// // body...
// }
// },
'block-options'
]
} );
39 changes: 39 additions & 0 deletions tinymce-single/blocks/core/gallery/structure.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
#editor figure[data-wp-block-type="core:gallery"] {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: auto;
}

#editor figure[data-wp-block-type="core:gallery"].aligncenter {
margin-left: auto;
margin-right: auto;
}

#editor figure[data-wp-block-type="core:gallery"].alignleft {
float: left;
margin: 0.5em 1em 0.5em 0;
width: 50%;
}

#editor figure[data-wp-block-type="core:gallery"].alignright {
float: right;
margin: 0.5em 0 0.5em 1em;
width: 50%;
}

#editor figure[data-wp-block-type="core:gallery"] figure {
margin: 0;
}

#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="2"] figure {
width: 43%;
}

#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="3"] figure {
width: 32%;
}

#editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="4"] figure {
width: 24%;
}
41 changes: 38 additions & 3 deletions tinymce-single/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,67 @@
<html>
<head>
<meta charset="utf-8">

<title>Editor Blocks Demo (Single TinyMCE Instance)</title>

<link rel="stylesheet" type="text/css" href="https://s1.wp.com/i/fonts/merriweather/merriweather.css?v=20160210">

<link rel="stylesheet" type="text/css" href="../shared/index.css">

<link rel="stylesheet" type="text/css" href="blocks/core/gallery/structure.css">
</head>
<body>
<div id="editor">

<h1>1.0 Is The Loneliest Number</h1>

<p>Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>

<figure>
<figure data-wp-block-type="core:image">
<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">
</figure>

<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>

<figure data-wp-block-type="core:gallery" data-wp-block-setting-column="3">
<figure>
<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/1_main_pia21423-png.png" alt="A star shines on a planet's surface.">
<figcaption>TRAPPIST-1f</figcaption>
</figure>
<figure>
<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/exovolcano1920x1080.00033-1041.jpg" alt="">
</figure>
<figure>
<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/proximasurface.jpg" alt="">
</figure>
</figure>

<!-- <figure data-wp-block-type="lost-in-space-plugin:nasa-poster">

</figure>

<figure data-wp-block-type="my-awesome-plugin:youtube">
<iframe src=""></iframe>
</figure>

<figure>
<video></video>
</figure> -->

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>

<script src="../shared/navigation.js"></script>
<script src="../shared/tinymce/clean-paste.js"></script>
<script src="../shared/tinymce/toolbar.js"></script>
<script src="../shared/tinymce/wplink.js"></script>
<script src="../shared/tinymce/wptextpattern.js"></script>

<link rel="stylesheet" type="text/css" href="tinymce/block.css">
<script src="tinymce/block.js"></script>
<script src="tinymce/formatting.js"></script>
<script src="tinymce/new.js"></script>
<script src="tinymce/config.js"></script>

<script src="blocks/core/gallery/register.js"></script>
</body>
</html>
42 changes: 0 additions & 42 deletions tinymce-single/tinymce/block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,10 +187,6 @@ div.mce-inline-toolbar-grp {
max-width: 98%;
}

div.mce-inline-toolbar-grp:not(.block-toolbar) {
transition: all 0.5s;
}

div.wp-link-preview {
float: left;
max-width: 694px;
Expand Down Expand Up @@ -246,44 +242,6 @@ div.mce-inline-toolbar-grp.block-toolbar {
left: -30px;
}

/*.mce-btn.mce-move-up,
.mce-btn.mce-move-down {
float: left;
border: none;
}

.mce-btn.mce-move-up {
margin-bottom: 0;
}

.mce-btn.mce-move-down {
margin-top: 0;
position: absolute;
bottom: 2px;
left: 2px;
}

.mce-btn.mce-move-up:focus,
.mce-btn.mce-move-down:focus,
.mce-btn.mce-move-up:hover,
.mce-btn.mce-move-down:hover {
background: none;
box-shadow: none;
}

.mce-btn.mce-move-up button,
.mce-btn.mce-move-down button {
height: 12px;
padding: 1px;
}

.mce-move-up svg.gridicon,
.mce-move-down svg.gridicon {
position: relative;
top: -6px;
width: 20px;
}*/

.block-toolbar {
margin-top: -6px;
}
Expand Down
Loading