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

Reply via email to