WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Editor scrolling: better "scroll into view" in the visual editor. Don't override MCE path focus style. Props avryl, see #28328. 

Built from https://develop.svn.wordpress.org/trunk@29186


git-svn-id: http://core.svn.wordpress.org/trunk@28970 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-07-16 04:06:16 +00:00
parent e400129cd8
commit a97559bf57
6 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
wp-admin/js/editor-expand.js
View File

@ -117,14 +117,23 @@ jQuery( document ).ready( function($) {
// Adjust when switching editor modes.
editor.on( 'show', function() {
setTimeout( function() {
editor.execCommand( 'mceAutoResize' );
editor.execCommand( 'wpAutoResize' );
adjust( 'resize' );
}, 200 );
} );
editor.on( 'keyup', function() {
var offset = getCursorOffset(),
// Make sure the cursor is always visible.
// This is not only necessary to keep the cursor between the toolbars,
// but also to scroll the window when the cursor moves out of the viewport to a wpview.
// Setting a buffer > 0 will prevent the browser default.
// Some browsers will scroll to the middle,
// others to the top/bottom of the *window* when moving the cursor out of the viewport.
editor.on( 'keyup', function( event ) {
var VK = tinymce.util.VK,
key = event.keyCode,
offset = getCursorOffset(),
windowHeight = $window.height(),
buffer = 10,
cursorTop, cursorBottom, editorTop, editorBottom;
if ( ! offset ) {
@ -133,11 +142,15 @@ jQuery( document ).ready( function($) {
cursorTop = offset.top + editor.getContentAreaContainer().getElementsByTagName( 'iframe' )[0].getBoundingClientRect().top;
cursorBottom = cursorTop + offset.height;
cursorTop = cursorTop - buffer;
cursorBottom = cursorBottom + buffer;
editorTop = $adminBar.outerHeight() + $tools.outerHeight() + $visualTop.outerHeight();
editorBottom = $window.height() - $bottom.outerHeight();
editorBottom = windowHeight - $bottom.outerHeight();
if ( cursorTop < editorTop || cursorBottom > editorBottom ) {
window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - windowHeight / 2 );
if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
} else if ( cursorBottom > editorBottom ) {
window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
}
} );
@ -145,7 +158,7 @@ jQuery( document ).ready( function($) {
var selection = editor.selection,
node = selection.getNode(),
range = selection.getRng(),
view, clone, right, offset;
view, clone, offset;
if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) {
return;
@ -159,7 +172,6 @@ jQuery( document ).ready( function($) {
if ( clone.startContainer.length > 1 ) {
if ( clone.startContainer.length > clone.endOffset ) {
clone.setEnd( clone.startContainer, clone.endOffset + 1 );
right = true;
} else {
clone.setStart( clone.startContainer, clone.endOffset - 1 );
}
@ -175,7 +187,7 @@ jQuery( document ).ready( function($) {
}
if ( ! offset.height ) {
return false;
return;
}
return offset;

2
wp-admin/js/editor-expand.min.js vendored
View File

@ -1 +1 @@
window.wp=window.wp||{},jQuery(document).ready(function(a){function b(){if(!g||g.isHidden()){var a=o.width(n.width()).text(n.val()+"&nbsp;").height(),b=n.height();300>a&&(a=300),a!==b&&(n.height(a),c("resize"))}}function c(a){if(!r||!r.settings.visible){var b,c,i,o,u,v,w,x,y,z,A=p.outerHeight(),B=h.scrollTop(),C=h.height(),D=h.width(),E=D>600?j.height():0;g&&!g.isHidden()?(b=d,c=e,i=!0,tinymce.each(g.controlManager.buttons,function(a){!a._active||"colorbutton"!==a.type&&"panelbutton"!==a.type&&"menubutton"!==a.type||a.hidePanel()})):(b=m,c=n),o=l.outerHeight(),u=b.parent().offset().top,v=b.outerHeight(),w=c.offset().top,x=c.outerHeight(),y=c.outerWidth(),z=i?f.outerHeight():0,(!s||"resize"===a)&&B>=u-o-E&&u-o-E+x-q>=B?(s=!0,b.css({position:"fixed",top:E+o,width:c.parent().width()-(b.outerWidth()-b.width()),borderTop:"1px solid #e5e5e5"}),l.css({position:"fixed",top:E,width:y+2})):(s||"resize"===a)&&(u-o-E>=B?(s=!1,b.css({position:"absolute",top:0,borderTop:"none",width:c.parent().width()-(b.outerWidth()-b.width())}),l.css({position:"absolute",top:0,width:k.width()})):B>=u-o-E+x-q&&(s=!1,b.css({position:"absolute",top:x-q}),l.css({position:"absolute",top:x-q+1,width:k.width()}))),(!t||"resize"===a)&&w+x+A+z+1>=B+C?(t=!0,p.css({position:"fixed",bottom:0,width:y+2,borderTop:"1px solid #dedede"})):t&&B+C>w+x+A+z-1&&(t=!1,p.css({position:"relative",bottom:"auto",width:"100%",borderTop:"none"}))}}var d,e,f,g,h=a(window),i=a(document),j=a("#wpadminbar"),k=a("#wp-content-wrap"),l=a("#wp-content-editor-tools"),m=a("#ed_toolbar"),n=a("#content"),o=a('<div id="content-textarea-clone"></div>'),p=a("#post-status-info"),q=200,r=window.wp.editor&&window.wp.editor.fullscreen,s=!1,t=!1;o.insertAfter(n),k.addClass("wp-editor-expand"),a("#content-resize-handle").hide(),o.css({"font-family":n.css("font-family"),"font-size":n.css("font-size"),"line-height":n.css("line-height"),padding:n.css("padding"),"padding-top":37,"white-space":"pre-wrap","word-wrap":"break-word"}),n.on("focus input propertychange",function(){b()}),n.on("keyup",function(){var a,b,c,d,e,f=document.createRange(),g=n[0].selectionStart,i=n[0].selectionEnd,k=o[0].firstChild,l=h.height();g&&i&&g!==i||(f.setStart(k,g),f.setEnd(k,i+1),a=f.getBoundingClientRect(),a.height&&(b=a.top,c=b+a.height,d=j.outerHeight()+m.outerHeight(),e=l-p.outerHeight(),(d>b||c>e)&&window.scrollTo(window.pageXOffset,b+window.pageYOffset-l/2)))}),i.on("tinymce-editor-init.editor-expand",function(a,i){function m(){var a,b,c,d,e=i.selection,f=e.getNode(),g=e.getRng();if(!(tinymce.Env.ie&&tinymce.Env.ie<9))return i.plugins.wpview&&(a=i.plugins.wpview.getView(f))?d=a.getBoundingClientRect():e.isCollapsed()?(b=g.cloneRange(),b.startContainer.length>1?(b.startContainer.length>b.endOffset?(b.setEnd(b.startContainer,b.endOffset+1),c=!0):b.setStart(b.startContainer,b.endOffset-1),e.setRng(b),d=e.getRng().getBoundingClientRect(),e.setRng(g)):d=f.getBoundingClientRect()):d=g.getBoundingClientRect(),d.height?d:!1}"content"===i.id&&(g=i,i.theme.resizeTo=function(){},i.settings.autoresize_min_height=300,d=k.find(".mce-toolbar-grp"),e=k.find(".mce-edit-area"),f=k.find(".mce-statusbar").filter(":visible"),i.on("show",function(){setTimeout(function(){i.execCommand("mceAutoResize"),c("resize")},200)}),i.on("keyup",function(){var a,b,c,e,f=m(),g=h.height();f&&(a=f.top+i.getContentAreaContainer().getElementsByTagName("iframe")[0].getBoundingClientRect().top,b=a+f.height,c=j.outerHeight()+l.outerHeight()+d.outerHeight(),e=h.height()-p.outerHeight(),(c>a||b>e)&&window.scrollTo(window.pageXOffset,a+window.pageYOffset-g/2))}),i.on("hide",function(){b(),c("resize")}),i.on("nodechange setcontent keyup FullscreenStateChanged",function(){c("resize")}),i.on("wp-toolbar-toggle",function(){e.css({paddingTop:d.outerHeight()})}),setTimeout(function(){e.css({paddingTop:d.outerHeight()}),c("resize")},500))}),h.on("scroll resize",function(a){c(a.type)}),r&&r.pubsub.subscribe("hidden",function(){c("resize")}),i.on("wp-collapse-menu.editor-expand",function(){c("resize")}).on("postboxes-columnchange.editor-expand",function(){c("resize")}).on("editor-classchange.editor-expand",function(){c("resize")}),b(),l.css({position:"absolute",top:0,width:k.width()}),k.css({paddingTop:l.outerHeight()}),setTimeout(function(){n.css({paddingTop:m.outerHeight()+parseInt(n.css("padding-top"),10)})},500)});
window.wp=window.wp||{},jQuery(document).ready(function(a){function b(){if(!g||g.isHidden()){var a=o.width(n.width()).text(n.val()+"&nbsp;").height(),b=n.height();300>a&&(a=300),a!==b&&(n.height(a),c("resize"))}}function c(a){if(!r||!r.settings.visible){var b,c,i,o,u,v,w,x,y,z,A=p.outerHeight(),B=h.scrollTop(),C=h.height(),D=h.width(),E=D>600?j.height():0;g&&!g.isHidden()?(b=d,c=e,i=!0,tinymce.each(g.controlManager.buttons,function(a){!a._active||"colorbutton"!==a.type&&"panelbutton"!==a.type&&"menubutton"!==a.type||a.hidePanel()})):(b=m,c=n),o=l.outerHeight(),u=b.parent().offset().top,v=b.outerHeight(),w=c.offset().top,x=c.outerHeight(),y=c.outerWidth(),z=i?f.outerHeight():0,(!s||"resize"===a)&&B>=u-o-E&&u-o-E+x-q>=B?(s=!0,b.css({position:"fixed",top:E+o,width:c.parent().width()-(b.outerWidth()-b.width()),borderTop:"1px solid #e5e5e5"}),l.css({position:"fixed",top:E,width:y+2})):(s||"resize"===a)&&(u-o-E>=B?(s=!1,b.css({position:"absolute",top:0,borderTop:"none",width:c.parent().width()-(b.outerWidth()-b.width())}),l.css({position:"absolute",top:0,width:k.width()})):B>=u-o-E+x-q&&(s=!1,b.css({position:"absolute",top:x-q}),l.css({position:"absolute",top:x-q+1,width:k.width()}))),(!t||"resize"===a)&&w+x+A+z+1>=B+C?(t=!0,p.css({position:"fixed",bottom:0,width:y+2,borderTop:"1px solid #dedede"})):t&&B+C>w+x+A+z-1&&(t=!1,p.css({position:"relative",bottom:"auto",width:"100%",borderTop:"none"}))}}var d,e,f,g,h=a(window),i=a(document),j=a("#wpadminbar"),k=a("#wp-content-wrap"),l=a("#wp-content-editor-tools"),m=a("#ed_toolbar"),n=a("#content"),o=a('<div id="content-textarea-clone"></div>'),p=a("#post-status-info"),q=200,r=window.wp.editor&&window.wp.editor.fullscreen,s=!1,t=!1;o.insertAfter(n),k.addClass("wp-editor-expand"),a("#content-resize-handle").hide(),o.css({"font-family":n.css("font-family"),"font-size":n.css("font-size"),"line-height":n.css("line-height"),padding:n.css("padding"),"padding-top":37,"white-space":"pre-wrap","word-wrap":"break-word"}),n.on("focus input propertychange",function(){b()}),n.on("keyup",function(){var a,b,c,d,e,f=document.createRange(),g=n[0].selectionStart,i=n[0].selectionEnd,k=o[0].firstChild,l=h.height();g&&i&&g!==i||(f.setStart(k,g),f.setEnd(k,i+1),a=f.getBoundingClientRect(),a.height&&(b=a.top,c=b+a.height,d=j.outerHeight()+m.outerHeight(),e=l-p.outerHeight(),(d>b||c>e)&&window.scrollTo(window.pageXOffset,b+window.pageYOffset-l/2)))}),i.on("tinymce-editor-init.editor-expand",function(a,i){function m(){var a,b,c,d=i.selection,e=d.getNode(),f=d.getRng();if(!(tinymce.Env.ie&&tinymce.Env.ie<9)&&(i.plugins.wpview&&(a=i.plugins.wpview.getView(e))?c=a.getBoundingClientRect():d.isCollapsed()?(b=f.cloneRange(),b.startContainer.length>1?(b.startContainer.length>b.endOffset?b.setEnd(b.startContainer,b.endOffset+1):b.setStart(b.startContainer,b.endOffset-1),d.setRng(b),c=d.getRng().getBoundingClientRect(),d.setRng(f)):c=e.getBoundingClientRect()):c=f.getBoundingClientRect(),c.height))return c}"content"===i.id&&(g=i,i.theme.resizeTo=function(){},i.settings.autoresize_min_height=300,d=k.find(".mce-toolbar-grp"),e=k.find(".mce-edit-area"),f=k.find(".mce-statusbar").filter(":visible"),i.on("show",function(){setTimeout(function(){i.execCommand("wpAutoResize"),c("resize")},200)}),i.on("keyup",function(a){var b,c,e,f,g=tinymce.util.VK,k=a.keyCode,n=m(),o=h.height(),q=10;n&&(b=n.top+i.getContentAreaContainer().getElementsByTagName("iframe")[0].getBoundingClientRect().top,c=b+n.height,b-=q,c+=q,e=j.outerHeight()+l.outerHeight()+d.outerHeight(),f=o-p.outerHeight(),e>b&&(k===g.UP||k===g.LEFT||k===g.BACKSPACE)?window.scrollTo(window.pageXOffset,b+window.pageYOffset-e):c>f&&window.scrollTo(window.pageXOffset,c+window.pageYOffset-f))}),i.on("hide",function(){b(),c("resize")}),i.on("nodechange setcontent keyup FullscreenStateChanged",function(){c("resize")}),i.on("wp-toolbar-toggle",function(){e.css({paddingTop:d.outerHeight()})}),setTimeout(function(){e.css({paddingTop:d.outerHeight()}),c("resize")},500))}),h.on("scroll resize",function(a){c(a.type)}),r&&r.pubsub.subscribe("hidden",function(){c("resize")}),i.on("wp-collapse-menu.editor-expand",function(){c("resize")}).on("postboxes-columnchange.editor-expand",function(){c("resize")}).on("editor-classchange.editor-expand",function(){c("resize")}),b(),l.css({position:"absolute",top:0,width:k.width()}),k.css({paddingTop:l.outerHeight()}),setTimeout(function(){n.css({paddingTop:m.outerHeight()+parseInt(n.css("padding-top"),10)})},500)});

5
wp-includes/css/editor-rtl.css
View File

@ -181,11 +181,6 @@ div.mce-path {
line-height: 18px;
}
.mce-path-item:focus {
background: none;
color: inherit;
}
.mce-toolbar .mce-btn,
.qt-fullscreen {
border-color: transparent;

2
wp-includes/css/editor-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
wp-includes/css/editor.css
View File

@ -181,11 +181,6 @@ div.mce-path {
line-height: 18px;
}
.mce-path-item:focus {
background: none;
color: inherit;
}
.mce-toolbar .mce-btn,
.qt-fullscreen {
border-color: transparent;

2
wp-includes/css/editor.min.css vendored
View File

File diff suppressed because one or more lines are too long