Objective:
* Make the escape key close dialogs, like pressing the X button
* Auto-focus the iframe on window open
Bonus:
* Add ESCAPE and SHIFT to ve.Keys and use instead of hardcoding numbers
* Use ve.Keys in some other places too
Bug: 49809
Change-Id: Ibf1fce5e24efcd83d9e1465c3cdaac24ff3fb45d
Follows-up I99acbd1699:
* "Parent method" comment
* Remove redundant slice() call to convert arguments to array,
native JavaScript methods that take array-like arguments such
as Function#apply and Array#slice are both compatible with
the Arguments objects, no need to convert it. Most invocations
already did this right but a few were recently introduced again.
* Removed silly "Document dialog." descriptions.
* Removed a few redundant "@method" tags in the near vicinity
of code I changed.
* Fixed function invocation to be either on one line or
one parameter per line. Having all arguments on one line
but the name + "(" looks confusing as it suggest there
is only 1 parameter. Same as object literals:
so:
{ foo: 1, bar }
or:
{
foo: 1,
bar: 2,
}
not:
{
foo: 1, bar: 2
}
Change-Id: I379bc2b32603bcf90aba9b4cd0112e7f027d070e
Removed inherited (and often wrong) documentation, replaced direct
usage of onApplyButtonClick with more standard onClose handling,
and one case of calling the wrong parent method.
Change-Id: I86ed16860e996b42c141a6499eefb9084d759a72
Because scroll events cannot be canceled or prevented from bubbling
up, the only way to prevent the scrolling is to cancel the actual key
and mouse wheel events.
PhantomJs -= 2
Change-Id: I540738459181c37d11caf5db07345703e7000ef9
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
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
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
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
ve.ui.MetaDialog.js
* Added scrolling to outline panel
ve.ui.css
* Added reusable animation keyframes
ve.ui.Dialog.css
* Changed dialog head style
* Changed dialog cancel button to close icon button
* Added animation of dialog opening
* Increased min-height of dialog to always show a little content
ve.ui.Icons-*.css
* Added close icon (not sure why it was missing)
ve.ui.Window.css
* Moved head padding out of window and into implementations of window
ve.ui.Dialog.js
* Moved apply button to footer
* Renamed cancel button to close button
* Overrode close method with triggers a closing animation and then calls the parent close method after an animation is complete
* Added classes to close and apply buttons to make styling less ambiguous
* Converted cancel button (now the close button) to an icon button
ve.ui.Window.js
* Added footer to dialog
VisualEditor*.php
* Added close message
Change-Id: Iededbc54b287328b3047b05efad6ca3cc152caa5
window.close( true ) thing sucked, and was being named and used
inconsistently throughout the code.
The new approach uses an action string, so it looks more like
window.close( 'accept' ) or window.close( 'back' ). This makes it easy
to steer the behavior at any point in the window close code path.
Most importantly for the link inspector, this allows us to now restore
the previous selection when the user presses escape or clicks the back
button, while still moving the cursor to the end and collapsing the
selection upon pressing enter and allowing removal by clicking the
trash can.
This commit also cleans some things up, like the various ways we have
to close an inspector which all seem useless because we wouldn't want
to just randomly close an inspector on someone. An inspector should
be closed only when the user has dealt with it.
ve.InspectorAction.js
* Removed close method
ve.ui.LinkInspector.js
* Updated documentation
* Passing action to parent method
* Updated logic to deal with change from "remove" to "action" argument
* Added selection restauration on "back" action
ve.ui.Context.js
* Added action to call to close
* Removed closeInspector method
ve.ui.Dialog.js
* Moved event handlers to the top
* Added actions to calls to close
* Added click block event handler to prevent focus changes
ve.ui.Inspector.js
* Added actions to calls to close
* Added storing of previous selection - this is different from
initialSelection because it's captured before the selection is
modified by setup
ve.ui.Window.js
* Updated documentation
* Updated argument name from "remove" to "action"
ve.ui.WindowSet.js
* Updated documentation
* Removed auto-close, replaced it with error if trying to open a window
when another is already open
* Removed close method
Change-Id: Ie8f72504177dd6ba169fdddbb776fd5397b831c4
This is one of the blockers for splitting VE up into separate
repositories or extending VE with an extension.
ve.ui.Frame.js
It's critical that we don't emit initialize from ve.ui.Frame until
it's completely loaded, especially its styles, because we will
begin measuring it straight away.
Involved loading the stylesheets using $.ajax and setting base
URL of the iframe to the ve.ui styles directory so all the image
URLs still worked. This won't work for stylesheets from multiple
locations, so we needed a more robust solution.
The new solution uses some trickery described in the code
documentation, but essentially no longer depends on all
stylesheets being located in the same folder.
ve.ui.Dialog.js, ve.ui.Inspector.js, ve.ui.Window.js
Static methods are now being used to extend a window class to
include different stylesheets rather than simple array
concatenation.
Change-Id: I619238732f975d41305f81f8f818a577a40f49da
*/index.php
* Added links to new files
VisualEditor.php
* Added links to new files
* Removed keys of non-existent messages
ve.ui.ContentDialog.js, ve.ui.MetaDialog.js
* Removed redundant comments
ve.ui.MediaDialog.js
* New dialog, just for media
icons.ai, picture.png, picture.svg, ve.ui.Icons-*.css
* Added picture icon
ve.ui.MediaButtonTool.js
* New button, just for media (shows up in the context toolbar)
ve.ui.DialogButtonTool.js
* New base class for dialog buttons
ve.ui.Context.js
* Added basic support for showing dialog buttons, in addition to
annotation buttons, in the context toolbar - to test, select only an
image node
ve.ui.Dialog.js
* Prevent clicks on the click-block from changing focus
* Moved initialize to below the event handlers and updated its
documentation
ve.ui.DialogFactory.js
* Added a way to get the names of dialogs that can be used to edit a
node
ve.ui.Inspector.js
* Removed close handler which set focus, this is done already in window
ve.ui.InspectorFactory.js
* Fixed comment so it's not telling lies anymore
ve.ui.Window.js
* Removed auto-focus on frame, it's changing the focus in the parent
document which blows-away the focus in CE, and it really isn't needed
as it turns out
VisualEditor.18n.php
* Added media dialog title message
* Added media tool tooltip message
Bug: 37870
Change-Id: I9150c46b3e292910fed899fa60d6da433049ca45
This is a major refactor of user interface context, frame, dialog
and inspector classes, including adding several new classes which
generalize managing inspectors/dialogs (which are now subclasses
of window).
New classes:
* ve.ui.Window.js - base class for inspector and dialog classes
* ve.ui.WindowSet.js - manages mutually exclusive windows, used
by surface and context for dialogs and inspectors respectively
* ve.ui.DialogFactory - generates dialogs
* ve.ui.IconButtonWidget - used in inspector for buttons in the head
Refactored classes:
* ve.ui.Context - moved inspector management to window set
* ve.ui.Frame - made iframes initialize asynchronously
* ve.ui.Dialog and ve.ui.Inspector - moved initialization to async
initialize method
Other interesting bits:
ve.ui.*Icons*.css, *.svg, *.png, *.ai
* Merged icon stylesheets so all icons are available inside windows
* Renamed inspector icon to window
ve.ui.*.css
* Reorganized styles so that different windows can include only
what they need
* Moved things to where they belonged (some things were in strange places)
ve.init.Target.js, ve.init.mw.ViewPageTarget.js, ve.init.sa.Target.js
* Removed dialog management - dialogs are managed by the surface now
ve.ui.*Dialog.js
* Renamed title message static property
* Added registration
ve.ui.*Inspector.js
* Switch to accept surface object rather than context, which conforms
to the more general window class without losing any functionality
(in fact, most of the time the surface was what we actually wanted)
ve.ui.MenuWidget.js, ve.ui.MWLinkTargetInputWidget.js
* Using surface overly rather than passing an overlay around
through constructors
Change-Id: Ifd16a1003ff44c48ee7b2c66928cf9cc858b2564
Change-Id: Ibc3f49c55ded5490fcb071f0ccf9f25a71a06c97
Warning: categories.json Class 've.NodeFactory' not found in categories file
Warning: ve.ui.ContentDialog.js:8: Unknown type ve.ui.Surface
Warning: ve.ui.MetaDialog.js:8: Unknown type ve.ui.Surface
Warning: ve.ui.Dialog.js:8: Unknown type ve.ui.Surface
Changes include:
VisualEditor.i18n.php, VisualEditor.php
* i18n labels for dialogs
ve.init.mw.ViewPageTarget.js
* Initial go at onOpenDialog and onCloseDialog methods
ve.init.Target.js
* Change calls to dialog hide & show to close & open
ve.ui.MetaDialog.js, ve.ui.ContentDialog.js
* Pass surface when constructing
* Add static title message property
ve.ui.Surface.css
* Set high z-index for toolbar for shadow to overlap dialog.
ve.ui.Dialog.js
* Extends EventEmitter class.
* Changed hide/show method names to open/close.
* Create base ui elements.
ve.Surface.js
* Create instance of meta dialog.
Change-Id: I867ca0546606eeb5e2ab7f612bb5af700ab877ec
Major changes:
demos/ve/index.php
* Renamed ve-demo-content to ve-demo-editor
ve.init.mw.ViewPageTarget, ve.init.sa.Target
* Added handlers for dialog events
ve.ui.*Dialog.js
* Added skeleton classes for dialogs
ve.init.Target.js
* Create abstract class methods for Target.
ve.init.sa.Target.js
* Create Standalone target view methods.
ve.init.mw.Target.js
* Added MW specific target view methods.
* Integration action buttons are now added to the edit
view in the toolbar.
ve.Surface.js
* Simplified constructor, now requiring a target which contains the container
* Other changes include some documentation and code cleanup.
Bug: 39597
Change-Id: Iff39266bdd3052f34bda254ca407030dbbc81f26
