Divec has uploaded a new change for review.
https://gerrit.wikimedia.org/r/200337
Change subject: WIP: Make block slugs cursorable
......................................................................
WIP: Make block slugs cursorable
ve.ce.BranchNode
- Make block slugs ce=true, so the native cursor can land in them
- Add class for focused block slugs (with the same styles as :hover)
- Style focused block slugs like a keyboard-selected html link
ve.ce.Surface#onModelSelect
- Add *-focused class and select $pasteTarget at block slugs
ve.ce.Surface#handleLinearArrowKey
- Handle cursor action from a block slug
TODO: Make ve.dm.Document#getRelativeRange work from/to a block slug
TODO: Set unselected block slug opacity back to zero
Change-Id: I287afae5c1301b06b9be7fc029334429052c778c
---
M demos/ve/pages/slugs.html
M src/ce/styles/nodes/ve.ce.BranchNode.css
M src/ce/ve.ce.BranchNode.js
M src/ce/ve.ce.Surface.js
4 files changed, 67 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/37/200337/1
diff --git a/demos/ve/pages/slugs.html b/demos/ve/pages/slugs.html
index 9c3ac3d..f9563b4 100644
--- a/demos/ve/pages/slugs.html
+++ b/demos/ve/pages/slugs.html
@@ -1,3 +1,6 @@
+<ul><li>abc</li></ul>
+<p rel='ve:Alien'>alien</p>
+<ul><li>def</li></ul>
<table><tr><td>Foo</td></tr></table>
<table><tr><td>Bar</td></tr></table>
-<table><tr><td>Baz</td></tr></table>
\ No newline at end of file
+<table><tr><td>Baz</td></tr></table>
diff --git a/src/ce/styles/nodes/ve.ce.BranchNode.css
b/src/ce/styles/nodes/ve.ce.BranchNode.css
index e442c5c..99cad84 100644
--- a/src/ce/styles/nodes/ve.ce.BranchNode.css
+++ b/src/ce/styles/nodes/ve.ce.BranchNode.css
@@ -6,17 +6,24 @@
.ve-ce-branchNode-blockSlug {
cursor: pointer;
- opacity: 0;
+ /* TODO: set unselected blockSlug opacity back to zero before merging */
+ opacity: 0.2;
-webkit-transition: opacity 200ms ease-out;
-moz-transition: opacity 200ms ease-out;
-o-transition: opacity 200ms ease-out;
transition: opacity 200ms ease-out;
}
-.ve-ce-branchNode-blockSlug:hover {
+.ve-ce-branchNode-blockSlug:hover,
+.ve-ce-branchNode-blockSlug.ve-ce-branchNode-blockSlug-focused {
opacity: 1;
}
+.ve-ce-branchNode-blockSlug:hover a *,
+.ve-ce-branchNode-blockSlug.ve-ce-branchNode-blockSlug-focused a * {
+ text-decoration: underline;
+}
+
.ve-ce-branchNode-blockSlug,
.ve-ce-branchNode-newSlug {
margin: -0.3em 0 -0.1em 0;
diff --git a/src/ce/ve.ce.BranchNode.js b/src/ce/ve.ce.BranchNode.js
index 43e8a3a..8ef0148 100644
--- a/src/ce/ve.ce.BranchNode.js
+++ b/src/ce/ve.ce.BranchNode.js
@@ -91,8 +91,6 @@
*/
ve.ce.BranchNode.blockSlugTemplate = $( '<div>' )
.addClass( 've-ce-branchNode-slug ve-ce-branchNode-blockSlug' )
- // TODO: work around ce=false IE9 bug
- .prop( 'contentEditable', 'false' )
.get( 0 );
/* Methods */
diff --git a/src/ce/ve.ce.Surface.js b/src/ce/ve.ce.Surface.js
index 877e43b..39a6898 100644
--- a/src/ce/ve.ce.Surface.js
+++ b/src/ce/ve.ce.Surface.js
@@ -67,6 +67,7 @@
this.pasting = false;
this.copying = false;
this.pasteSpecial = false;
+ this.focusedBlockSlug = null;
this.focusedNode = null;
// This is set on entering changeModel, then unset when leaving.
// It is used to test whether a reflected change event is emitted.
@@ -2154,13 +2155,31 @@
* @see ve.dm.Surface#method-change
*/
ve.ce.Surface.prototype.onModelSelect = function () {
- var focusedNode,
+ var focusedNode, blockSlug,
selection = this.getModel().getSelection();
this.cursorDirectionality = null;
this.contentBranchNodeChanged = false;
if ( selection instanceof ve.dm.LinearSelection ) {
+ blockSlug = this.findBlockSlug( selection.getRange() );
+ if ( blockSlug !== this.focusedBlockSlug ) {
+ if ( this.focusedBlockSlug ) {
+ this.focusedBlockSlug.classList.remove(
+ 've-ce-branchNode-blockSlug-focused'
+ );
+ this.focusedBlockSlug = null;
+ }
+
+ if ( blockSlug ) {
+ blockSlug.classList.add(
've-ce-branchNode-blockSlug-focused' );
+ this.focusedBlockSlug = blockSlug;
+ this.$pasteTarget.text( '☢' );
+ ve.selectElement( this.$pasteTarget[0] );
+ this.$pasteTarget[0].focus();
+ }
+ }
+
focusedNode = this.findFocusedNode( selection.getRange() );
// If focus has changed, update nodes and this.focusedNode
@@ -2231,6 +2250,13 @@
return this.focusedNode;
}
return this.findFocusedNode( range );
+};
+
+ve.ce.Surface.prototype.findBlockSlug = function ( range ) {
+ if ( !range.isCollapsed() ) {
+ return null;
+ }
+ return this.documentView.getDocumentNode().getSlugAtOffset( range.end );
};
/**
@@ -2792,6 +2818,33 @@
upOrDown = e.keyCode === OO.ui.Keys.UP || e.keyCode === OO.ui.Keys.DOWN;
+ if ( this.focusedBlockSlug ) {
+ // Block level selection, so directionality is just css
directionality
+ if ( upOrDown ) {
+ direction = e.keyCode === OO.ui.Keys.DOWN ? 1 : -1;
+ } else {
+ directionality = this.$( this.focusedBlockSlug ).css(
'direction' );
+ /*jshint bitwise:false */
+ if ( e.keyCode === OO.ui.Keys.LEFT ^ directionality ===
'rtl' ) {
+ // leftarrow in ltr, or rightarrow in rtl
+ direction = -1;
+ } else {
+ // leftarrow in rtl, or rightarrow in ltr
+ direction = 1;
+ }
+ }
+ range = this.model.getDocument().getRelativeRange(
+ range,
+ direction,
+ 'character',
+ e.shiftKey,
+ this.getActiveTableNode() ?
this.getActiveTableNode().getEditingRange() : null
+ );
+ this.model.setLinearSelection( range );
+ e.preventDefault();
+ return;
+ }
+
if ( this.focusedNode ) {
if ( upOrDown ) {
direction = e.keyCode === OO.ui.Keys.DOWN ? 1 : -1;
--
To view, visit https://gerrit.wikimedia.org/r/200337
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I287afae5c1301b06b9be7fc029334429052c778c
Gerrit-PatchSet: 1
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Divec <da...@sheetmusic.org.uk>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
