Commit graph

17 commits

Author SHA1 Message Date
Ed Sanders 79f4755850 Resizable node live preview
Resizes the $resizable element as you drag.
Can be disabled by setting the 'outline' config option.

FocusableNode
* Redraw on resize

ProtectedNode
* Destroy and prevent creation of phantoms on resize

MWInlineImageNode
* Correctly pass this.$image to ResizableNode

Bug: 54298
Change-Id: I7d6d345af8bb4712bbf154072b4704943a5a620d
2013-10-16 14:25:00 +02:00
Inez Korczyński 301b287515 Apply DOM changes in onProtectedSetup and onProtectedTeardown instead of constructor
It's important in case of replacing root element ($) of a node, so new element
does have CSS class and contenteditable property set.




Change-Id: Icf14e2164e89114e6b7c10672b782d02f4c5daac
2013-09-05 22:05:23 +00:00
Timo Tijhof 8cea089f3b ce: Use a better transparent pixel image
See also http://stackoverflow.com/a/13139830/319266:

> Some are unstable and cause CSS glitches. [If] you have an
> <img> and you use the tiniest transparent GIF possible, it
> works fine[. if] you then want your transparent GIF to have a
> background-image, then this is impossible. For some reason,
> some GIFs such as the following prevent CSS backgrounds (in
> some browsers).
>
> == Shortest (but unstable) ==
> data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
>
> == Stable (but slightly longer) *use this one* ==
>
> data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
>
> Also: don't ommit image/gif. This will break in several browsers.

For the record, this is not limited to rare browsers.
It also affects latest Chrome in some cases as confirmed by
Christian (it'd be white instead of transparent in some cases
when uses as a css background-image without border).

Change-Id: If9ff8a0820c217b6c23e3335944907939a37bef7
2013-08-30 17:51:20 -07:00
Ed Sanders 2d720bd6d9 Allow phantoms and focus areas to be overridden
And actually use this functionality on MWBlockImage to
highlight centred images correctly.

FocusableNode
* Actually use $focusable to render the highlight correctly

ProtectedNode
* Allow a $phantomable element to define which element to
  highlight on mouseenter
* As phatoms are built off shields, make sure a shield is
  given to $phantomable

RelocatableNode
* Allow a $relocatable element to define which element the
  relocatable marker is measured against

ui.Context
* Use $focusable (when available) for positioning the popup

Plus some documentation fixes

Change-Id: I370337239af4fc935cd86757b3ce03011bae5ba8
2013-08-30 14:04:17 -07:00
Ed Sanders 98cad0f410 Set contentEditable using jQuery#prop
Also always use strings 'true'/'false' for the value, because
it is a string property (spellcheck, however, is a boolean)
and always use a capital second 'E' in the name.

Change-Id: Ia4e1f9edfd8f236fe81df190e6a68729d7b52243
2013-08-29 09:59:55 -07:00
Ed Sanders 458f8d1a82 Move contentEditable=false to protected node
Because that's where it should be.

Bug: 53507
Change-Id: I9afffea238a774b884d4d2434d3523e4c4e445b2
2013-08-28 16:18:55 -07:00
Timo Tijhof 5b48d7f1e8 ce.ProtectedNode: Use surface initialize event instead of toolbarPosition
Follows-up 867ec44a9.

Because:
- #toolbarPosition is emitted more than once (so this
  should at least have been a once() bind, not a connect)
- It is emitted for more than 1 toolbar (includes context menu
  toolbar)
- Semantically incorrect (we want to know when the surface changes
  not the toolbar)
- We want to get rid of that event entirely and this is the last
  use of it.

Change-Id: Ica5ed04052f48fe84607abab72bcf65f97d689ed
2013-07-31 21:57:54 +00:00
Rob Moen c472b2fe4a Make local overlays local to surface and remove insane z-indexes
ve.ui.Surface.js
* Make local overlay a child of ve-ui-surface and a sibling to
  ve-ce-surface elements.
** This keeps local overlays relative to their surface and eliminates the
   need for insane z-indexes.

ve.ui.PopupWidget.js
* PopupWidget boundaries are now relative to ve-ce-surface and no longer
  protrude out

ve.ce.Node.css, ve.ui.Window.css
* Removal or replacement of insane z-indexes.

ve.ce.FocusableNode.js, ve.ce.ProtectedNode.js, ve.ce.ResizableNode.js,
ve.ui.Context.js
* Translate offsets from local overlay

ve.init.mw.ViewPageTarget-monobook.css,
ve.init.mw.ViewPageTarget-vector.css
* Skin specific z-indexes for global overlay

ve.init.mw.ViewPageTarget.js
* Applied direction specific mw class to ce.Surface vs ui.Surface to
  prevent mw content styles from being applied to ui elements.

ve.ui.Dialog.css
* Adjustments to surface inside of dialog so that relative offsets for
  local overlays can be properly calculated.

ve.ui.Surface.css
* Explicitly force .ve-ui-surface to be relative so that it's children can
  be relatively positioned.

ve.ui.Widget.css
* Removal of unnecessary font-size properties now that local overlay is
  sibling of surface.

ve.js
* Added get relative position helper method to translate position offsets
  from target parent

Bug: 50241
Change-Id: Ibadce404a2286bc5dcec48f0d9da89004dbbd867
2013-07-02 19:35:43 +00:00
Christian Williams 5d44800b53 Correct Rendering for Block Images After Resize Undo
If a block image is resized and undone, there are lots of problems.

* The block image gets the wrong size. When rolling back the
transaction, height and width are passed as strings.
MWBlockImage tries to set the width to: width + 2. A 300px image
became 3002px.

* Resize handles didn't reposition and resize

* Relocatable drag marker didn't reposition and resize

* Focusable highlights didn't reposition and resize.

Change-Id: I8792b567b77da90ce5a2ad132e306705c5706606
2013-07-02 12:08:42 -07:00
Trevor Parscal ae6f91677e Unhack detached protected CE node shields
Objectives:

* Make protected CE nodes only add shields when attached to a surface
* Remove hack in reference list node used to work around this issue

Change-Id: I48d4478558b49037b80b6131e1b2e01dc4f9ec47
2013-06-28 00:42:34 +00:00
Christian Williams 867ec44a9f Reposition phantoms on init
When the toolbar animates, the position of the surface changes.
ProtectedNode now listens for the toolbarPosition event and
repositions the phantoms.

I also tried moving the localOverlay to be a sibling of the surface
(instead of child of body), but the same problems persisted.

Bug: 49853

Change-Id: I8ae1c8f66c6083b4ffee7107a78a298126e1064c
2013-06-26 00:59:46 +00:00
Christian Williams babaa4118d FocusedNode Selection
Introduction of fake selection for single focused nodes. This
change specifically makes the selection much nicer in appearance
for Chrome users selecting floated FocusableNodes (block images)
for example.

Added ve-ce-surface-highlights DOM element to contain styled
highlight elements.

Made adjustments to getSelectionRect to return fake selection
bounds if necessary.

Replaced old uses of showSelection with model.change().

Change-Id: I96e66567cdce6455ef3eb77568e72f23140448ff
2013-06-07 17:49:35 -07:00
Catrope 778a74daf7 Hack around exceptions thrown when closing the reference dialog
ce.ProtectedNode doesn't like to be torn down when it's detached,
and this was happening to CE nodes created in the MWReferenceList.

Hack around this by attaching the CE nodes generated by the
MWReferenceList to the ce.MWReferenceListNode (so they have a
parent and a way of getting to the surface), and by guarding against
multiple successive setups/teardowns in ce.ProtectedNode.

Change-Id: If00e75b939ccbdbaf681bbb6609fec54805bf9a0
2013-06-07 00:08:54 +00:00
Catrope e6c7aa4275 Clear phantoms on teardown in ProtectedNode
When you typed after a ProtectedNode that was previously at the end of
a paragraph, then moved the mouse, you'd get a JS error.

What happened was the typing caused a new TextNode to be created after
the ProtectedNode, which caused the ParagraphNode to be rebuilt,
detaching the original ProtectedNode and creating a new one. The
detached ProtectedNode was still bound to mousemove on the body, and
when that event fired it would try to remove its phantoms from the
surface and fail because detached nodes can't get to the surface.

Change-Id: I9f38776f0267645b14d7b26e2a25007cf3be8ec7
2013-05-26 12:23:55 +02: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
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
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