Divec has uploaded a new change for review. https://gerrit.wikimedia.org/r/233740
Change subject: WIP POC: Fix wrapping glich with temporary block style ...................................................................... WIP POC: Fix wrapping glich with temporary block style Dynamically add/remove block styling on pre-open nails, to avoid a browser bug where text wrapping breaks a line just after a post-open nail, causing an ugly "split border" effect. TODO Decide the following: 1. Whether dynamic restyling is viable at all (or is there another way?) 2. Whether a block styled image inside a block is viable (it's apparently legal in HTML+RDFa, but does splitting the block create more trouble than it solves?) 3. When exactly the reflow test should be applied ve.ce.Surface#fixupLinks: * fixupLinks: block style the pre-open nail of each wrapped link * call fixupLinks after keydown / on surface observer change ve.ce.LinkAnnotation.css: * (debug) Style nails so they're visible and unambiguous (TODO remove) demo/ve/pages/h1.html: * (debug) Put link in simplest demo page (TODO remove) Change-Id: I7ece68927dcd86a4dd7102627bf1e80685811903 --- M demos/ve/pages/h1.html M src/ce/styles/annotations/ve.ce.LinkAnnotation.css M src/ce/ve.ce.Surface.js 3 files changed, 56 insertions(+), 2 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor refs/changes/40/233740/1 diff --git a/demos/ve/pages/h1.html b/demos/ve/pages/h1.html index e9386a9..864059c 100644 --- a/demos/ve/pages/h1.html +++ b/demos/ve/pages/h1.html @@ -1 +1 @@ -<h1>abcdefg</h1> +<h1>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii <a href='x'>ab cd</a> ef</h1> diff --git a/src/ce/styles/annotations/ve.ce.LinkAnnotation.css b/src/ce/styles/annotations/ve.ce.LinkAnnotation.css index 07c40d4..aa6b280 100644 --- a/src/ce/styles/annotations/ve.ce.LinkAnnotation.css +++ b/src/ce/styles/annotations/ve.ce.LinkAnnotation.css @@ -4,8 +4,32 @@ * @copyright 2011-2015 VisualEditor Team and others; see http://ve.mit-license.org */ -.ve-ce-linkAnnotation-active { +.ve-ce-linkAnnotation-active, .ve-ce-linkAnnotation { box-shadow: 0 0 0 0.125em rgba(22,55,200,0.75); border-radius: 0.125em; text-decoration: none; } + +.ve-ce-nail { + width: 0; + height: 0; + margin: 0; + border: 0; + outline: 0; +} + +.ve-ce-nail.ve-ce-nail-pre-open { + box-shadow : 0 0 0 0.125em red; +} + +.ve-ce-nail.ve-ce-nail-post-open { + box-shadow : 0 0 0 0.125em #aa0; +} + +.ve-ce-nail.ve-ce-nail-pre-close { + box-shadow : 0 0 0 0.125em green; +} + +.ve-ce-nail.ve-ce-nail-post-close { + box-shadow : 0 0 0 0.125em purple; +} diff --git a/src/ce/ve.ce.Surface.js b/src/ce/ve.ce.Surface.js index 382876e..10c7440 100644 --- a/src/ce/ve.ce.Surface.js +++ b/src/ce/ve.ce.Surface.js @@ -1530,6 +1530,7 @@ direction = getDirection(); } this.fixupCursorPosition( direction ); + this.reflowNails(); }; /** @@ -2714,6 +2715,8 @@ modelData = this.model.getDocument().data, lengthDiff = next.text.length - previous.text.length, surface = this; + + this.reflowNails(); if ( previous.range && next.range ) { offsetDiff = ( previous.range.isCollapsed() && next.range.isCollapsed() ) ? @@ -4043,6 +4046,33 @@ }; /** + * Fix wrapping at nails + */ +ve.ce.Surface.prototype.reflowNails = function () { + var i, len, linkAnnotations, linkAnnotation, preOpenNail; + // Recall the link annotation structure is like this: + // <img class='ve-ce-nail-pre-open' /> + // <a class='ve-ce-linkAnnotation' style='box-shadow: ...'> + // <img class='ve-ce-nail-post-open' /> + // ... + // <img class='ve-ce-nail-pre-close' /> + // </a> + // <img class='ve-ce-nail-post-close' /> + // + // Sometimes there is a line break straight after the ve-ce-nail-post-open, which causes + // a broken box shadow. Fix this by setting the ve-ce-nail-pre-open to block display. + linkAnnotations = this.$element.find( '.ve-ce-linkAnnotation' ); + for ( i = 0, len = linkAnnotations.length; i < len; i++ ) { + linkAnnotation = linkAnnotations[ i ]; + linkAnnotation.previousSibling.style.display = ''; + if ( linkAnnotation.firstChild.offsetTop !== linkAnnotation.lastChild.offsetTop ) { + // Link contains a line break + linkAnnotation.previousSibling.style.display = 'block'; + } + } +}; + +/** * Get the linkAnnotation node containing the cursor fous * * If there is no focus, or it is not inside a linkAnnotation, return null -- To view, visit https://gerrit.wikimedia.org/r/233740 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I7ece68927dcd86a4dd7102627bf1e80685811903 Gerrit-PatchSet: 1 Gerrit-Project: VisualEditor/VisualEditor Gerrit-Branch: master Gerrit-Owner: Divec <da...@troi.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
