Commit graph

547 commits

Author SHA1 Message Date
Trevor Parscal 2e76271b4e The Great ve.ui.Surface refactor of 2013
Prologue:

Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't
see you there! In a world where iframes are outlaws, and symbols like
document and window are global, there were more than a few assumptions
about which document or window was being used. But fear not - for this
commit (probably) tracks them all down, leaving a trail of
iframe-compatible awesomeness in its wake. With the great ve.ui.Surface
now able to be used inside of iframes, let the reference editing
commence. But there, lurking in the darkness is a DM issue so fierce it
may take Roan and/or Ed up to 3 whole hours to sort it out.

Note to Roan and/or Ed:

Editing references seems to work fine, but when saving the page there
are "no changes" which is a reasonable indication to the contrary.

Objectives:

* Make it possible to have multiple surfaces be instantiated, get along
  nicely, and be embedded inside of iframes if needed.
* Make reference content editable within a dialog

Approach:

* Move what's left of ve.Editor to ve.ui.Surface and essentially
  obliterate all use of it
* Make even more stuff inherit from ve.Element (long live this.$$)
* Use the correct document or window anywhere it was being assumed to be
  the top level one
* Resolve stacking order issues by removing the excessive use of z-index
  and introducing global and local overlay elements for each editor
* Add a surface to the reference dialog, load up the reference contents
  and save them back on apply
* Actually destroy what we create in ce and ui surfaces
* Add recursive frame offset calculation method to ve.Element
* Moved ve.ce.Surface's getSelectionRect method to the prototype

Bonus:

* Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it
  was separate in the first place, but I'm likely the one to blame)
* Fix blatant lies in documentation
* Whitespace cleanup here and there
* Get rid of ve.ui.Window overlays - not used or needed

Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-24 14:01:02 +02:00
Inez Korczyński 57317e2327 Use our own collection of constant to key code. The one based on w3c is not reliable.
Also, for next few months, please don't mention w3c when I'm around.

Change-Id: I4c8577ae50c16b177dbe370a0deac0d3272e9a06
2013-05-23 16:39:01 -07:00
Inez Korczyński 1d7cf569e6 Support for thumb and frame images with captions.
* VisualEditor.hooks.php
** export URL to magnify clip as a configuration variable so thumbnail image can render correctly

* ve.ce.Surface.css
** add CSS styling to make image captions look the same way in edit mode as they look in the view mode

* ve.ce.ParagraphNode.js
** add CSS class ve-ce-generated-wrapper if it is a generated wrapper

* ve.ce.MWImageCaptionNode.js
** make image caption rendering match the view mode

Change-Id: I0cd1b25e8f8355e0500aabc90e7c4cdf591545f3
2013-05-23 00:44:43 -07:00
jenkins-bot c1477bc1da Merge "Move selection to end of insertion after paste" 2013-05-20 23:19:55 +00:00
Inez Korczyński 7c8bc08470 Added very basic support (rendering) for captions of thumb and frame images.
Change-Id: I4a59d4601c9bf44b241bb1432c9f1abc3f961743
2013-05-20 13:15:35 -07:00
jenkins-bot 791fdfb6d4 Merge "Refactor HTML attribute preservation" 2013-05-20 17:29:09 +00:00
jenkins-bot fb9f6df6b5 Merge "Wrap <img> in <a> inside image thumb in order to match MediaWiki parser output." 2013-05-18 16:54:24 +00:00
Ed Sanders 95f41c176b Move selection to end of insertion after paste
Assuming this was broken by changes to translateRange.

Bug: 48603
Change-Id: Ia2a2120cb75aa86374b594ae3f484c5161028919
2013-05-18 16:41:58 +01:00
Ed Sanders 57b9167bb5 Fix call to getWindow
Using the wrong namespace.

Bug: 48602
Change-Id: I31dc071328123b57b778aa1b21f0e1daf6405e5c
2013-05-18 16:29:03 +01:00
Catrope 9ff6737f4c Refactor HTML attribute preservation
Rather than using namespaced linmod attributes, store the preserved
HTML attributes in the .htmlAttributes property of the linear model
element, in a nested structure to allow for easier treatment of child
nodes. Also added attribute order preservation by storing attributes
as an object plus an array of keys.

ve.ce.Node.js:
* Remove html/* attribute synchronization. Doesn't make sense any more
  because these things aren't in the attributes object any more. I don't
  think it ever made sense because these attributes were never supposed
  to be changed anyway.

ve.ce.View.js:
* Replace renderAttributes() with a simple wrapper around
  renderHtmlAttributeList()

ve.dm.Converter.js:
* Add buildHtmlAttributeList() and renderHtmlAttributes() for building
  and rendering HTML attribute lists

ve.dm.Model.js:
* Add getter for .htmlAttributes

ve.dm.Node.js:
* Drop .htmlAttributes on clone, and remove logic dropping html/*

ve.ui.MWCategoryWidget.js:
* Remove html/0/about hack, was already unnecessary and now doesn't
  work any more

tests/:
* UPDATE ALL THE TESTS

Change-Id: I620573afd70d36ade6b80413075b6e1f4a435abe
2013-05-17 20:57:33 -07:00
Inez Korczyński e196c2f247 Wrap <img> in <a> inside image thumb in order to match MediaWiki parser output.
Change-Id: I91cfcd9ea319b4429abbbe9ddbb07d1cd8a65b62
2013-05-17 11:42:27 -07:00
jenkins-bot 0eb2581b64 Merge "ve.ui.Context: Add embedding feature" 2013-05-16 18:26:39 +00:00
Trevor Parscal 55b5f30edb ve.ui.Context: Add embedding feature
Objectives:

* Make the context menu display in the top right corner of the currently
  focused inspectable node (if there is one)
* Prevent clicking on anything to do with the toolbar or popup from doing
  anything at all, ever

Bonus:

* While we are using the clever feature in jQuery's on method which allows
  passing boolean false to cancel the event - may as well do that in
  ve.ui.Dialog as well

Changes:

ve.ui.FocusableNode
* Add ability to specify the focusable element so that dimensions can be
  derived from it

ve.ce.Surface
* Add quotes to object keys

ve.ui.MediaDialog
* Change association from being MW specific to handling images in general

ve.ui.Context
* Add embedded styles for context
* Add embedded mode, which is triggered when the context is a single
  focusable node, and the node is large enough to fit the context
  reasonably

ve.ui.Dialog
* Inline mousedown handler

ve.ui.Toolbar, ve.ui.PopupWidget
* Cancel stray mousedown events

Change-Id: I4b25d33f64b4bcb8a3ecfd7e9728f54a2d4886f3
2013-05-16 11:23:59 -07:00
Inez Korczyński 995a20219a Emit teardown event before replacing generated content node content and emit setup event after.
Change-Id: I397d4dfb5fd0177255a0b4389ba5380807969ef4
2013-05-15 17:35:49 -07:00
Ed Sanders b5ead95ee8 Implement roundtrip update of template contents
Currently there is no Parsoid call for this so we're using the PHP
parser API.

Change-Id: I8bc4f96924d88de7bc67203336bf465ba91fc37b
2013-05-16 00:56:44 +01:00
Christian Williams e669f8faf6 Fixing block template styling
Trailing comma borks everything.

Change-Id: Ic4eb97f84b45297312b45ab64355836ef8a329d1
2013-05-15 16:37:27 -07:00
Inez Korczyński ba5c4f104d Build TemplateDialog based on parameters that are passed to template
(instead of TemplateData as before).

Change-Id: I50b0e6ef1936c4b56f40fa73bd42b03587bdf979
2013-05-15 22:47:59 +00:00
jenkins-bot d97114ad10 Merge "Implement ve.ui.MWTemplateDialog" 2013-05-15 19:38:20 +00:00
Trevor Parscal 231a50f2b6 Implement ve.ui.MWTemplateDialog
Objective:

* Add button to launch template dialog
* Add template dialog

Changes;

*.php
* Add messages and links to files

ve.ce.Node.css
* Make inline templates display as inline-block to contain their
  contents (allowing shields to work properly)

ve.ui.MWTemplateDialog.js
* New empty dialog for templates

ve.ui.MWTemplateButtonTool.js
* New template button, appears in context and launches dialog

Change-Id: I9174ed7c9012522246a6defc859276bf36763f5b
2013-05-15 19:36:18 +00:00
Timo Tijhof 25d6e6f136 ve.ce.Surface: Append phantoms to overlay instead of surface
Surface can be deep inside a skin layout of which it is not
unlikely for one or more of the parents to have position
relative.

Change-Id: Ie202fa43b837650fd296fa6804d035622e2599e1
2013-05-15 21:28:56 +02:00
Trevor Parscal a56e795f58 ve.Editor
Objectives:

* Split ve.Surface into ve.Editor and ve.ui.Surface
* Move actions, triggers and commands to ve.ui
* Move toolbar wrapping, floating, shadow and actions functionality to configurable options of ve.ui.Toolbar
* Make ve.ce.Surface and ve.ui.Surface inherit ve.Element and use this.$$ for iframe friendliness
* Make the toolbar separately initialized so it's possible to have a surface without one, as well as control where the toolbar is

Some change notes:

VisualEditor.php
* Added standalone module for mediawiki integrated unit testing

ve.ce.Surface.js
* Remove requirement to pass in an attached container to construct object
* Inherit ve.Element and use this.$$ instead of $
* Make getSelectionRect iframe friendly
* Move most of the initialize stuff to a new initialize method to be called after the surface is attached to the DOM

ve.init.mw.ViewPageTarget.js
* Merge toolbar functions into setup/teardown methods
* Add toolbar manually (since it's not added by the surface anymore)

ve.init.sa.Target.js
* Update new init procedure for editor, surface and toolbar separately
* Move toolbar floating stuff to ve.Toolbar

Change-Id: If91a9d6e76a8be8d1b5a2566394765a37d29a8a7
2013-05-15 10:39:12 -07:00
jenkins-bot 44e0b7e345 Merge "Make ve.ce.ProtectedNode use setup (for setup) and teardown (for teardown) events so it is going to work well after node is rewrapped (example: MWBlockImageNode)." 2013-05-15 17:31:53 +00:00
Inez Korczyński 2a53329f0d Make ve.ce.ProtectedNode use setup (for setup) and teardown (for teardown) events so it is going to work well after node is rewrapped (example: MWBlockImageNode).
Change-Id: Ibd539813f4302d8bbf8eaa35af71817a55fb1f4b
2013-05-15 10:28:56 -07:00
Inez Korczyński b8d81f5238 Make MWBlockImageNode a ProtectedNode (by adding mixin).
Change-Id: Ib15efaf4964f16b86020367e42848d228efd09ba
2013-05-15 10:01:19 -07:00
jenkins-bot 3109e96bb1 Merge "Better support for MediaWiki block level images (thumb and frame)" 2013-05-15 02:58:23 +00:00
Christian Williams 991859d5d1 MWInlineImageNode should be img
Change-Id: I0cc43c59031f970b879b64696e824ebaa28a4b53
2013-05-14 17:36:04 -07:00
Inez Korczyński c6c7af5a62 Better support for MediaWiki block level images (thumb and frame)
Change-Id: Id6f65e4e1971e21035c89f32fa7ab0009c84695c
2013-05-14 17:14:36 -07:00
Inez Korczyński a3f6008bd4 Introduction of setup and teardown events for ve.ce.View nodes
* modules/ve/ve.Node.js - remove ve.EventEmitter mixin
* modules/ve/ve.dm.Node.js - added ve.EventEmitter mixin
* modules/ve/ce/ve.ce.BranchNode.js - make updateTagName use newly added
  events

Change-Id: I349155b8e986fe09b615bb5f0617409d723936ef
2013-05-14 19:47:40 +00:00
Trevor Parscal c2defc9783 ve.Element refactor
Objectives:

* Move ve.ui.Element to ve.Element
* Make CE nodes inherit from ve.Element

Changes:

ve.ui.Element.js, ve.Element.js
* Move and rename
* Move ve.ui.get$$ to ve.Element.static.get$$
* Add static getDocument and getWindow methods
* Add instance getElementDocument and getElementWindow methods
* Add getTagName method, which by default reads the static tagName property, but when overridden can return a tag name based on other factors

*.php
* Updated file link

ve.ce.*Annotation.js, ve.ce.*Node.js, ve.ce.View.js, ve.ce.Document
* Added config options pass through
* Replaced passing elements through constructor with defining static tag names
* Added getTagName overrides where needed that derive tag name from model
* Refactore dom wrapper methods, now consistently using getTagName

ve.ce.Surface.js
* Removed static initialization (not needed)

ve.dm.Model.js, ve.ui.Window.js
* Added missing docs

ve.ui.GroupElement.js, ve.ui.Layout.js, ve.ui.Widget.js,
* Updated class name for elements

ve.ui.Frame.js, ve.ui.LookupInputWidget.js
* Updated location of get$$

ve.ui.js
* Move get$$ to ve.Element

ve.js
* Add auto-init of static properties to mixinClass

Change-Id: I39ae14966456903728e4d9e53f806ddce9ca2b70
2013-05-14 19:47:32 +00:00
Trevor Parscal 5012ed101b Floating toolbar cleanup
Objective:

Move toolbar floating functionality to ve.init and clean it up

As a bonus:

demo.css
* Fix CSS path to set width of inputs properly

Changes:

demos/ve/index.php
* Allow ve.init.sa.Target to construct it's own surface object

ve.ce.Surface.js
* Move object resizing and table editing disabling commands from ve.Surface
* Add method for getting the currently focused node

ve.init.mw.ViewPageTarget.js
* Remove initializing surface property (now done in parent class)
* Normalize all uses of "setup" to "setUp"
* Replace uses of getDocumentModel with getModel().getDocument()
* Add calls to set up and tear down for toolbar floating

ve.init.mw.Target.js
* Replace uses of getDocumentModel with getModel().getDocument()

ve.init.sa.Target.js
* Move example from ve.Surface
* Change constructor to accept document model
* Create ve.Surface object in constructor
* Add set up for toolbar floating

ve.ui.init.Target.js
* Initialize surface property
* Move and cleanup toolbar floating functionality from ve.Surface

ve.ui.Surface.js
* Remove example now that init.sa creates it's own surface (moved)
* Document options
* Simplify toolbar options and remove the concept of multiple toolbars
* No longer cache the options object
* Move toolbar initialization to constructor
* Change setupCommands to addCommands, making it useful after construction
* Inline selection initialization
* Move and cleanup toolbar floating functionality to ve.ce.Surface
* Reorganize a few methods
* Move toolbar floating to ve.init.Target.js

Change-Id: I393a426e35567d57c048122bf64a83c1ef45e6e8
2013-05-14 12:43:30 -07:00
Inez Korczyński 9f8ababfa9 Fix inability to split lists
Fixes change made in I7a8d6c474ecca5af02b72b6453c900ed61acea58 by using
DOM_VK_ENTER instead of DOM_VK_RETURN (which is not defined anymore).

Bug: 48386
Change-Id: I8d7aeffc8166487806e3489b054f508c5e9418ff
2013-05-13 14:59:16 +00:00
Inez Korczyński b32b5702d4 (bug 48022) Ignore certain function keys in key press handler
This is a temporary solution that still may some function keys go through.

Change-Id: I7a8d6c474ecca5af02b72b6453c900ed61acea58
2013-05-10 13:51:23 -07:00
Trevor Parscal 8858ed932f Make reference list nodes render contents again
Really Roan? How dare you!

See I3f5116d7dfbaa5889b7c5cac01d7341272749c58

Change-Id: Ia0ae514fc07752edb7b7100716e09163d3bfacba
2013-05-10 10:47:10 -07:00
jenkins-bot 8bac303893 Merge "When removing an empty list item, also remove the list if it's now empty" 2013-05-10 17:17:36 +00:00
jenkins-bot d7c3dd8ec6 Merge "Reduction of renderContents calls" 2013-05-10 15:35:37 +00:00
Catrope 811721f1e1 When removing an empty list item, also remove the list if it's now empty
When the user presses Enter in an empty list item, we remove it. But if
the list item was the only child of the list, that leaves an empty list
which then gets a block slug, leading to all sorts of weird things, and
even pawns in Firefox. So check whether the list item was the last child
and if so, remove the list.

Bug: 48287
Change-Id: If22d9b904b8861e24d56944d791545635b2e4254
2013-05-09 17:47:36 -07:00
Inez Korczyński 1e85621bd9 Reduction of renderContents calls
There is no need to call renderContents in ContentBranchNode constructor
because it is going to be called anyways in onSplice

Change-Id: Id1ab983668299658ecd6e89a37667cc34c701689
2013-05-10 00:28:30 +00:00
Catrope 9372ca60ad Kill getOffsetFromNode() with fire
The way it operated was evil. It did a depth-first search from the root,
finding the node using reference equality. For documents with deep
structures, this could take a long time. Inez did some profiling and
found it was called tens of millions of times on a complex document.

Kill getOffsetFromNode() and move its functionality to getOffset().
The logic has been completely rewritten: getOffset() now traverses
up from the node rather than down from the root, and pretty much does
the reverse of what getNodeFromOffset() does. This should be much more
efficient even without offset caching in the node objects (which we may
still implement later).

Change-Id: I125f9fa423c40db6472e2c4a7c94214218ba3bc7
2013-05-09 17:26:22 -07:00
Catrope 3d21609ca9 Move completeHistory from dm.Surface to dm.Document
Per IRL conversation with Trevor, that's where it belongs.

Change-Id: I9eae05380597ed83122f29864b77d2278d3dd863
2013-05-09 14:54:25 -07:00
Christian Williams 30cfe6998f Fixing shields
Shields were being added twice. Switched the blank png to gif
because the red IE background couldn't be replicated. Changed
some styles from Alien to Protected.

Change-Id: I9c62665e4e0dc54b8511749b9d2a629db7990a16
2013-05-08 12:29:25 -07:00
Catrope 31c2165770 Also render attributes of the form html/i-j/attrName in CE
Factored the parsing of html/* attributes out into a static function.
Factored attribute (re)rendering out into ce.View, attribute updates
are much simpler now.

Change-Id: I4caa6d5e1e2c21c28ddff61c3c864e47f66cc6b2
2013-05-08 18:10:46 +00:00
Timo Tijhof 13dd31c046 ve.ce.FocusableNode: Fix documentation
The constructor doesn't use any parameter named "$resizable".
And the one usage of it (ve.ce.ImageNode) doesn't pass any
arguments.

Follows-up 3fe3032.

Change-Id: I30530f4199a7c8383933be286b7b7a705c05c26c
2013-05-07 21:51:38 +02:00
jenkins-bot ab7f7ae915 Merge "ve.ce.ProtectedNode" 2013-05-07 01:33:43 +00:00
Trevor Parscal 92f6688162 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:08:48 +00:00
jenkins-bot 152009c327 Merge "Context menu in wrong place" 2013-05-06 23:10:32 +00:00
Trevor Parscal 2706b6dc50 Context menu in wrong place
A bug in I4bad882d1d6fb83bcdcfd0de3bfc9af52960c2ff caused the vertical
position to sometimes be NaN, and thus make the context in the wrong
place (but only vertically).

Change-Id: I5216af5c432caaa0fb400d8d006647b9f2488619
2013-05-06 16:08:47 -07:00
Christian Williams d23c10fd8e Fix insertion annotations
Now comparing annotations in surface to insertionAnnotations
by comparable object to trigger pawn trick. Adding annotations
correctly to placeholder.

dm.Surface change method now uses setInsertionAnnotations()
and passes the AnnotationSet from offset-1. The set is cloned.

Added ve.ce.Surface.areAnnotationsCorrect() to compare either
annotations to the left or right to the insertionAnnotations.

Also use compareTo() and getComparableAnnotations() rather than
comparing by name, and fix SurfaceFragment.annotateContent() to
actually be selective when clearing rather than clearing everything.

Change-Id: I6116afa2e176daa0a0f2103a551501426829e2a6
2013-05-06 15:53:29 -07:00
Ed Sanders 830de420e1 Code style fixes
* "function(" -> "function ("
* "{String}" -> "{string}"
* collapse unintentional double spaces

Change-Id: I3ce3f02d1e31d4797b44e04d28457dec363be296
2013-05-06 12:36:52 +01:00
Trevor Parscal 7233ea8f1b EventEmitter API cleanup
The EventEmitter API we inherited from Node.js and then bastardized was
getting awkward and cumbersome. The number of uses of ve.bind was getting
out of control, and removing events meant caching the bound method in a
property. Many of the "features" of EventEmitter wasn't even being used,
some causing overhead, others just causing bloat. This change cleans up
how EventEmitter is used throughout the codebase.

The new event emitter API includes:
* emit - identical to the previous API, no longer throws an error if you
  emit error without a handler
* once - identical to the previous API, still introduces a wrapper* on -
  compatible with the previous API but has some new features
* off - identical to removeListener in the previous API
* connect - very similar to addListenerMethods but doesn't wrap callbacks
  in closures anymore
* disconnect - new, basically the opposite of addListenerMethods

Another change that is made in this commit is mixing in rather than
inheriting from EventEmitter.

Finally, there are changes throughout the codebase anywhere
connect/disconnect could be used.

Change-Id: Ic3085d39172a8a719ce7f036690f673e59848d3a
2013-05-02 15:05:59 -07:00
Ed Sanders 7cb4a30ff3 GeneratedContentNodes store DOM elements, not HTML (like aliens)
To avoid serialisation bugs, and for consistency.

Change-Id: I02e202a2ab52c88da039349ec079bea55e000665
2013-05-02 18:22:56 +01:00