wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-24 14:33:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Nicely highlightable alien nodes"

Browse source
This commit is contained in:
Trevor Parscal 2012-11-13 18:25:27 +00:00 committed by Gerrit Code Review
parent 27ddb456c8 e03cef06a7
commit da1d7e4a70
4 changed files with 64 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
demos/ve/pages/aliens.html
View file

@ -8,10 +8,15 @@
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div>No floating or positioning at all</div>
<div style="height: 75px; width: 200px;" id="christian">
<div style="float: left">float</div>
No floating or positioning at all
</div>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div style="position: absolute; top: 200px; left: 200px;">Oh no, I'm absolutely positioned!</div>
<div style="position: absolute; top: 200px; left: 200px;">
Oh no, I'm absolutely positioned!
</div>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <alieninline>ALIEN1</alieninline> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was <a href="http://www.wikia.com">popularised</a> in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

11
modules/ve/ce/nodes/ve.ce.AlienBlockNode.js
View file

@ -48,8 +48,17 @@ ve.ce.AlienBlockNode.rules = {
/* Methods */
ve.ce.AlienBlockNode.prototype.onUpdate = function () {
// TODO preventDefault on click for links inside, user should not leave the page
var $shieldTemplate = this.constructor.static.$shieldTemplate;
this.$.html( this.model.getAttribute( 'html' ) );
this.$.add( this.$.find( '*' ) ).each( function () {
var $this = $(this);
if ( this.nodeType === Node.ELEMENT_NODE ) {
if ( !$this.css( 'float' ) && !$this.hasClass( 've-ce-alienBlockNode' ) ) {
return;
}
$this.append( $shieldTemplate.clone() );
}
} );
};
/* Registration */

40
modules/ve/ce/styles/ve.ce.Node.css
View file

@ -6,16 +6,38 @@
*/
/* Alien styling */
.ve-ce-alienBlockNode,
.ve-ce-alienInlineNode,
.ve-ce-metaBlockNode,
.ve-ce-metaInlineNode,
.ve-ce-alienBlockNode *,
.ve-ce-alienInlineNode *,
.ve-ce-metaBlockNode *,
.ve-ce-metaInlineNode * {
.ve-ce-alienInlineNode * {
background-color: #FFFFBA !important;
position: static !important;
position: relative !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
}
/* Highlightable alien blocks */
.ve-ce-alienBlockNode,
.ve-ce-alienBlockNode * {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ve-ce-alienBlockNode::-moz-selection,
.ve-ce-alienBlockNode *::-moz-selection {
background: transparent;
}
.ve-ce-node-shield {
position: absolute !important;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: transparent !important;
-webkit-user-select: auto;
}
/* Fix weird Chrome native selection involving floated elements */
@ -24,13 +46,11 @@
content: '';
}
.ve-ce-alienBlockNode,
.ve-ce-metaBlockNode {
.ve-ce-alienBlockNode {
display: block;
}
.ve-ce-alienInlineNode,
.ve-ce-metaInlineNode {
.ve-ce-alienInlineNode {
display: inline;
}

17
modules/ve/ce/ve.ce.Node.js
View file

@ -32,6 +32,23 @@ ve.ce.Node = function VeCeNode( type, model, $element ) {
ve.inheritClass( ve.ce.Node, ve.Node );
/* Static Memebers */
ve.ce.Node.static = {};
/**
* Template for shield elements.
*
* Uses data URI to inject a 1x1 transparent GIF image into the DOM.
*
* @static
* @member
*/
ve.ce.Node.static.$shieldTemplate = $(
'<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" ' +
'class="ve-ce-node-shield">'
);
/* Methods */
/**