mediawiki-extensions-Visual.../demos/ve/pages/aliens.html

<div rel="mw:Alien" style="float: right; height: 75px; width: 200px;">Single template, floated right</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 rel="mw:Alien">
	<div style="float: right; height: 75px; width: 200px;">Template with two floats!</div>
	<div style="float: left; height: 75px; width: 200px;">Template with <span><span><span>two</span></span></span> Lorem Ipsum floats!</div>
</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 rel="mw:Alien" style="height: 75px; width: 200px;" id="christian">
	<div style="float: left">float</div>
	No floating or positioning at all
</div>

<p><alieninline><span><span style="color: red; position: absolute; top: 0; right: 0; float: right;">Coordinates</span></span></alieninline>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 rel="mw:Alien" 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>
ve.ce.ProtectedNode Objective: Generalize the shield and phantom magic, so we can use it for pretty much any node we like. Usually this will be used with generated content nodes, but also with aliens (of course) and possible other stuff in the future. Bonus: Also fixes a bug in DM that would crash VE when you selected to the end and hit backspace. Changes: .php Added links to files aliens.html * Added attributes to aliens to make them aliens again ve.ce.AlienNode.js * Moved shield and phantom functionality to ve.ce.ProtectedNode ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js, ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js * Mixed in ve.ce.ProtectedNode ve.ce.Node.css * Reorganized styles and updated class names * Added simple light blue hover with outline (using inset box shadow) for protected nodes, same style as before for aliens ve.ce.Surface.css * Moved phantom styles to ve.ce.Node.css ve.ce.BranchNode.js * Moved call to setLive(false) to happen before detach() so that the surface object is still available and events can be disconnected ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js * Adjusted CSS class names ve.ce.Node.js * Moved shield template to ve.ce.ProtectedNode ve.ce.ProtectedNode.js * New class, mix into another class to protect it from editing ve.ce.RelocatableNode.js * Renamed temporary surface property to relocatingSurface to avoid confusion when debugging ve.ce.Surface.js * Moved phantom template to ve.ce.ProtectedNode ve.dm.Transaction.js * Fixed bug where most of the internal list was being deleted when the end of the document was selected and the user pressed backspace Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3 2013-05-07 00:07:01 +00:00			`<div rel="mw:Alien" style="float: right; height: 75px; width: 200px;">Single template, floated right</div>`
Styling aliens with a yellow background; preventing absolute positioning Change-Id: I86fbbda841d69beeabf4e683de3b032fb70b1ac6 2012-11-05 22:22:10 +00:00			<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>

ve.ce.ProtectedNode Objective: Generalize the shield and phantom magic, so we can use it for pretty much any node we like. Usually this will be used with generated content nodes, but also with aliens (of course) and possible other stuff in the future. Bonus: Also fixes a bug in DM that would crash VE when you selected to the end and hit backspace. Changes: .php Added links to files aliens.html * Added attributes to aliens to make them aliens again ve.ce.AlienNode.js * Moved shield and phantom functionality to ve.ce.ProtectedNode ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js, ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js * Mixed in ve.ce.ProtectedNode ve.ce.Node.css * Reorganized styles and updated class names * Added simple light blue hover with outline (using inset box shadow) for protected nodes, same style as before for aliens ve.ce.Surface.css * Moved phantom styles to ve.ce.Node.css ve.ce.BranchNode.js * Moved call to setLive(false) to happen before detach() so that the surface object is still available and events can be disconnected ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js * Adjusted CSS class names ve.ce.Node.js * Moved shield template to ve.ce.ProtectedNode ve.ce.ProtectedNode.js * New class, mix into another class to protect it from editing ve.ce.RelocatableNode.js * Renamed temporary surface property to relocatingSurface to avoid confusion when debugging ve.ce.Surface.js * Moved phantom template to ve.ce.ProtectedNode ve.dm.Transaction.js * Fixed bug where most of the internal list was being deleted when the end of the document was selected and the user pressed backspace Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3 2013-05-07 00:07:01 +00:00			`<div rel="mw:Alien">`
Styling aliens with a yellow background; preventing absolute positioning Change-Id: I86fbbda841d69beeabf4e683de3b032fb70b1ac6 2012-11-05 22:22:10 +00:00			`<div style="float: right; height: 75px; width: 200px;">Template with two floats!</div>`
			`<div style="float: left; height: 75px; width: 200px;">Template with <span><span><span>two</span></span></span> Lorem Ipsum floats!</div>`
			`</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>

ve.ce.ProtectedNode Objective: Generalize the shield and phantom magic, so we can use it for pretty much any node we like. Usually this will be used with generated content nodes, but also with aliens (of course) and possible other stuff in the future. Bonus: Also fixes a bug in DM that would crash VE when you selected to the end and hit backspace. Changes: .php Added links to files aliens.html * Added attributes to aliens to make them aliens again ve.ce.AlienNode.js * Moved shield and phantom functionality to ve.ce.ProtectedNode ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js, ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js * Mixed in ve.ce.ProtectedNode ve.ce.Node.css * Reorganized styles and updated class names * Added simple light blue hover with outline (using inset box shadow) for protected nodes, same style as before for aliens ve.ce.Surface.css * Moved phantom styles to ve.ce.Node.css ve.ce.BranchNode.js * Moved call to setLive(false) to happen before detach() so that the surface object is still available and events can be disconnected ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js * Adjusted CSS class names ve.ce.Node.js * Moved shield template to ve.ce.ProtectedNode ve.ce.ProtectedNode.js * New class, mix into another class to protect it from editing ve.ce.RelocatableNode.js * Renamed temporary surface property to relocatingSurface to avoid confusion when debugging ve.ce.Surface.js * Moved phantom template to ve.ce.ProtectedNode ve.dm.Transaction.js * Fixed bug where most of the internal list was being deleted when the end of the document was selected and the user pressed backspace Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3 2013-05-07 00:07:01 +00:00			`<div rel="mw:Alien" style="height: 75px; width: 200px;" id="christian">`
Nicely highlightable alien nodes Browsers handle highlighting of our alien nodes differently. This change normalizes by hiding the native selection on the aliens, inserting blank image "shields" with native highlighting enabled. Change-Id: Ica3576ef0e3c42b4aeae1da374cd1dc92f203d7d 2012-11-09 22:02:41 +00:00			`<div style="float: left">float</div>`
			`No floating or positioning at all`
			`</div>`
Styling aliens with a yellow background; preventing absolute positioning Change-Id: I86fbbda841d69beeabf4e683de3b032fb70b1ac6 2012-11-05 22:22:10 +00:00
BugID 43076 - Fixes to alien and phantom corner cases The {{coords}} template is correctly rendered as an inlineAlien, which previously did not have shields. However, the template has a deeply nested span that is positioned and floated. The fix is to shift shielding logic up to AlienNode (from AlienBlockNode) and to show phantoms on all shields (both block and inline). I've also updated the aliens demo to exhibit this corner case. Change-Id: Ifce60c7762c0ead5c6fe29d6eabf601c1565cbfa 2012-12-21 23:20:15 +00:00			<p><alieninline><span><span style="color: red; position: absolute; top: 0; right: 0; float: right;">Coordinates</span></span></alieninline>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>
Styling aliens with a yellow background; preventing absolute positioning Change-Id: I86fbbda841d69beeabf4e683de3b032fb70b1ac6 2012-11-05 22:22:10 +00:00
ve.ce.ProtectedNode Objective: Generalize the shield and phantom magic, so we can use it for pretty much any node we like. Usually this will be used with generated content nodes, but also with aliens (of course) and possible other stuff in the future. Bonus: Also fixes a bug in DM that would crash VE when you selected to the end and hit backspace. Changes: .php Added links to files aliens.html * Added attributes to aliens to make them aliens again ve.ce.AlienNode.js * Moved shield and phantom functionality to ve.ce.ProtectedNode ve.ce.AlienNode.js, ve.ce.MWReferenceListNode.js, ve.ce.MWReferenceNode.js, ve.ce.MWTemplateNode.js * Mixed in ve.ce.ProtectedNode ve.ce.Node.css * Reorganized styles and updated class names * Added simple light blue hover with outline (using inset box shadow) for protected nodes, same style as before for aliens ve.ce.Surface.css * Moved phantom styles to ve.ce.Node.css ve.ce.BranchNode.js * Moved call to setLive(false) to happen before detach() so that the surface object is still available and events can be disconnected ve.ce.BranchNode.js, ve.ce.Document.js, ve.ce.js, ve.ce.Surface.js, ve.ce.SurfaceObserver.js * Adjusted CSS class names ve.ce.Node.js * Moved shield template to ve.ce.ProtectedNode ve.ce.ProtectedNode.js * New class, mix into another class to protect it from editing ve.ce.RelocatableNode.js * Renamed temporary surface property to relocatingSurface to avoid confusion when debugging ve.ce.Surface.js * Moved phantom template to ve.ce.ProtectedNode ve.dm.Transaction.js * Fixed bug where most of the internal list was being deleted when the end of the document was selected and the user pressed backspace Change-Id: I2468b16e1ba6785ad298e38190e33493135719c3 2013-05-07 00:07:01 +00:00			`<div rel="mw:Alien" style="position: absolute; top: 200px; left: 200px;">`
Nicely highlightable alien nodes Browsers handle highlighting of our alien nodes differently. This change normalizes by hiding the native selection on the aliens, inserting blank image "shields" with native highlighting enabled. Change-Id: Ica3576ef0e3c42b4aeae1da374cd1dc92f203d7d 2012-11-09 22:02:41 +00:00			`Oh no, I'm absolutely positioned!`
			`</div>`
Styling aliens with a yellow background; preventing absolute positioning Change-Id: I86fbbda841d69beeabf4e683de3b032fb70b1ac6 2012-11-05 22:22:10 +00:00
			<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>