Fixes (follows-up I1b48ef5240, I6daff5c596):
* Invalid html passed to jQuery constructor.
* Use prop() instead of attr() for boolean values.
* Use append() instead of html() when appending nodes instead
of parsing html.
* Rename shadowed variable name clash 'mw' to 'mwData'.
* Fix odd construction where we parse '{}' to create an empty
object.
* Have ve.ce.MWReferenceListNode#update perform changes off-document
in a detached tree.
* Fix deep property access that can fail. mwData is set to
either JSON parse of data-mw attr or empty object.
Accessing mwData.attrs.group needs to be guarded by whether
mw.attrs is indeed set.
* Have `mw` and `about` attribtue in references list roundtrip
(especially mw which can data we aren't editing/re-creating).
* Add missing 'refGroup' property to MWReferenceListNode's
data element (similar to what MWReferenceNode already has).
Change-Id: I67e4f378ccd04e97361d8e58ae57db5353075756
HTML5's drag and drop has a ton of benefits and a couple of
limitations. To achieve a native drag marker, an image tag helper
is used to indicate the size of the relocatable node. Chrome
shades the marker gray natively, Firefox is styled to match.
Change-Id: I755b698a3d968cc7e6ff125109d68ac83fd8a8a2
Objectives:
* Rename just about every use of "template" to "transclusion"
* Make a proper data structure for transclusions
* Abstract away template data
* Use more template data in the user interface
* Allow adding parameters
* Allow removing templates, parameters and content
Changes:
ve.ui.Dialog.css
* Add rule to place add param controls on a single line
ve.ui.MWTemplateDialogs.js
* Move template spec loading into transclusion class
* Add remove button for parts and parameters
* Add parameter adding form
* Use template data for labels and descriptions
ve.dm.*
* Add new transclusion data structures
*.php
* Add links to new files
*.*
* Rename all things "template" to "transclusion"
Bug: 39598
Bug: 49403
Change-Id: I3bcf924a3e179cb65f19e833277a39dfd3dad8bd
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
The easy part is getting the correct numbers from the InternalList
and generating the ordered list HTML. The tricky part is connecting
up the events to make sure the renumberings/list generations are
triggered when required.
InternalList can emit an update event on document transaction, which
triggers the renumbering/relisting if any references have been
added or deleted during that transaction.
ve.ce.MWReferenceListNode also listens to changes on the
InternalListNode (i.e. changes to the contents of the references)
and always triggers a rebuild.
Change-Id: I1b48ef5240e433c3b314259aa68cde13841ea98b
Adding a fairly loose .csslintrc file so that our code
passes it.
The following options cause warnings in our code and have been
disabled for now:
* adjoining-classes
> Don't use adjoining classes.
> .ve-ui-widget-disabled.ve-ui-textInputWidget textarea:focus {
* box-sizing
> The box-sizing property isn't supported in IE6 and IE7.
> box-sizing: border-box;
* box-model
> Using width with border can sometimes make elements larger than you expect.
> border: solid 1px #ccc;
> Using width with padding can sometimes make elements larger than you expect.
> padding: 0 0.75em 0 0.75em;
> Using width with border-right can sometimes make elements larger than you expect.
> border-right: 1px solid #eee;
* fallback-colors
> Fallback background-color (hex or RGB) should precede RGBA background-color.
> background-color: rgba(104,171,255,0.1);
* important
> Use of !important
> position: relative !important;
* outline-none
> Outlines shouldn't be hidden unless other visual changes are made.
> .ve-ce-documentNode[contenteditable="true"]:focus {
* qualified-headings
> Heading (h1) should not be qualified.
> .ve-ce-branchNode h1:empty:before,
* universal-selector
> The universal selector (*) is known to be slow.
> .ve-ce-protectedNode * {
* unqualified-attributes
> Unqualified attribute selectors are known to be slow.
> .ve-ce-documentNode[contenteditable="true"]:focus {
Fixes made:
* modules/ve/ce/styles/ve.ce.Surface.css:
[L66:C2] margin can't be used with display: inline.
* modules/ve/ui/styles/ve.ui.css: Unknown @ rule: @-ms-keyframes
Internet Explorer < 10 doesn't support keyframes. IE10+ supports
the standard property. I don't think ms-keyframes ever existed
http://caniuse.com/css-animation. ms-transform did exist
http://caniuse.com/transform.
Change-Id: I728a48e489c079e1c94a506bb00c245de9551eb6
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
* 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
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
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
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
CSSJanus flips left for right for RTL languages. To ensure proper positioning of phantoms, the phantom container must actually be set to left:0, not right:0. Added the @noflip option before the phantoms selector to prevent CSSJanus from modifying it.
Change-Id: Id7662362d117d6c5719b9b98d7a0dbf62e9ba3ff
* Only place them in a high z-index while resizing so they don't render
above dialogs and menus
* Add resize transition
ve.ce.ImageNode.js
* Switch from element attributes to CSS for setting dimensions
ve.ce.Node.css
* Add resizing class for resizable nodes for z-index
* Add transitioning class for resizable nodes for transitions
* Switch from border to inset box-shadow to not affect handle position
calculation
ve.ce.ResizableNode.js
* Add/remove resizing class while resizing
* Switch from using $image to $resiable to make the class useful for
non-image node
* Enable transition and set new dimensions before transaction processing
which will cause re-rendering)
* Delay transaction processing for resize until after transition is
complete
* Add hiding of context menu on resize start
ve.ce.Surface.js
* Add getSurface method so we can get to the context menu
Change-Id: I4667e394d0af4a80b651c2a0f6d11d30e196bf60
ve.ce.Node.css
* Added prefixes for use of box-sizing
ve.ui.MWLinkInspector.js
* Whitespace
ve.ui.Inspector.css
* Corrected input width, always 100% wide now by using box-sizing
ve.ui.DialogButtonTool.js, ve.ui.Context.js
* Updated use of getViewsForNode
ve.ui.ViewRegistry.js
* Added inheritance-based prioritization for matching views with annotations and nodes
Bug: 47413
Change-Id: I286a28002c1691e58bbd7de04ed08cceb8b3bb07
Actually really resizing the image
Show bounding box on mouseover with 4 handles. Bounding box is resizable. Image resizes to match bounding box on mouse up.
Change-Id: I1f3dac64eb86dd1f258937e4915af101b3ac19d8
*.php
* Added links to new file
ve.ce.ImageNode.js
* Added relocatable node mixin
* Added $image reference to the actual img element, so if it's wrapped
in a sub class the functionality in the parent class doesn't break.
* Moved drag start event handling to relocatable node
* Removed drag end binding, not needed.
ve.ce.MWImageNode.js
* Moved addClass to initialization section of constructor.
* Copied 'view' data prop from image element to keep stuff working after
the wrapping.
ve.ce.Node.css
* Switched to default (arrow) cursor for images.
ve.ce.RelocatableNode.js
* New mixing for nodes that should be relocatable
* Added implementation for drag start, which tells the surface to allow
dragging this node.
ve.ce.Surface.js
* Added relocation support, which is used by relocatable nodes
* Split onDocumentDragDrop into onDocumentDragOver and onDocumentDrop
which now have implementations that support relocation of nodes
ve.ui.Context.js
* Added relocation tracking to prevent context being shown while
relocating
Change-Id: I8703adfb707af2c3224431afc3418356ac2c686c
* Create MWTemplateBlockNode & MWTemplateInlineNode (in ce and dm)
* Move Alien's 'isInline' code to ve.dm.Node.static.isHybridInline
* Move definition of ce.AlienBlock/InlineNode inside ce.Aline.js file
to match dm.AlienBlock/InlineNode and MWTemplate
* Duplicate AlienBlock/Inline styles for templates
* Create test case for inline templates
* Count test cases in ve.dm.Converter.test.js automatically
Change-Id: Id9bc7f049ea974dd5e7f8b7a66080939e0948bbd
Resolves a TODO related to the paste target div.
VisualEditor.php
* Added link to ve.Surface.css
ve.Surface.js
* Cleaned up initialization of .ve-surface element
* Removed float clearing div (see ve.Surface.css)
* Removed paste div (moved to ve.ce.Surface)
ve.Surface.css
* Added rule which adds an ":after" element to handle clearing floats
ve.ce.Surface.js
* Cleaned up initialization of DOM elements
* Added paste target div
* Replaced paste element selectors with direct references to this.$pasteTarget
ve.ce.Surface.css
* Changed paste div styles to use a namespaced class instead of a generic ID
demos/ve/index.php
* Added link to ve.Surface.css
Change-Id: Ib93d45ac82ae643fc8e659f5a063c02a8ddacdde
* Made method descriptions imperative: "Do this" rather than "Does this"
* Changed use of "this object" to "the object" in method documentation
* Added missing documentation
* Fixed incorrect documentation
* Fixed incorrect debug method names (as in those VeDmClassName tags we add to functions so they make sense when dumped into in the console)
* Normalized use of package names throughout
* Normalized class descriptions
* Removed incorrect @abstract tags
* Added missing @method tags
* Lots of other minor cleanup
Change-Id: I4ea66a2dd107613e2ea3a5f56ff54d675d72957e
See CODING.md for how to run it.
Mistakes fixed:
* Warning: Unknown type function
-> Function
* Warning: Unknown type DOMElement
-> HTMLElement
* Warning: Unknown type DOM Node
-> HTMLElement
* Warning: Unknown type Integer
-> Mixed
* Warning: Unknown type Command
-> ve.Command
* Warning: Unknown type any
-> number
* Warning: Unknown type ve.Transaction
-> ve.dm.Transaction
* Warning: Unknown type ve.dm.AnnotationSet
-> ve.AnnotationSet
* Warning: Unknown type false
-> boolean
* Warning: Unknown type ve.dm.AlienNode
ve.dm doesn't have a generic AlienNode like ve.ce
-> Unknown type ve.dm.AlienInlineNode|ve.dm.AlienBlockNode
* Warning: Unknown type ve.ve.Surface
-> ve.ce.Surface
* ve.example.lookupNode:
-> Last @param should be @return
* ve.dm.Transaction.prototype.pushReplace:
-> @param {Array] should be @param {Array}
* Warning: ve.BranchNode.js:27: {@link ve.Node#hasChildren} links to non-existing member
-> (removed)
* Warning: ve.LeafNode.js:21: {@link ve.Node#hasChildren} links to non-existing member
-> (removed)
Differences fixed:
* Variadic arguments are like @param {Type...} [name]
instead of @param {Type} [name...]
* Convert all file headers from /** to /*! because JSDuck tries
to parse all /** blocks and fails to parse with all sorts of
errors for "Global property", "Unnamed property", and
"Duplicate property".
Find: \/\*\*([^@]+)(@copyright)
Replace: /*!$1$2
* Indented blocks are considered code examples.
A few methods had documentation with numbered lists that were
indented, which have now been updated to not be intended.
* The free-form text descriptions are parsed with Markdown,
which requires lists to be separated from paragraphs by an
empty line.
And we should use `backticks` instead of {braces} for inline
code in text paragraphs.
* Doc blocks for classes and their constructor have to be
in the correct order (@constructor, @param, @return must be
before @class, @abstract, @extends etc.)
* `@extends Class` must not have Class {wrapped}
* @throws must start with a {Type}
* @example means something else. It is used for an inline demo
iframe, not code block. For that simply indent with spaces.
* @member means something else.
Non-function properties are marked with @property, not @member.
* To create a link to a class or member, in most cases the name
is enough to create a link. E.g. Foo, Foo.bar, Foo.bar#quux,
where a hash stands for "instance member", so Foo.bar#quux,
links to Foo.bar.prototype.quux (the is not supported, as
"prototype" is considered an implementation detail, it only
indexes class name and method name).
If the magic linker doesn't work for some case, the
verbose syntax is {@link #target label}.
* @property can't have sub-properties (nested @param and @return
values are supported, only @static @property can't be nested).
We only have one case of this, which can be worked around by
moving those in a new virtual class. The code is unaltered
(only moved down so that it isn't with the scope of the main
@class block). ve.dm.TransactionProcessor.processors.
New:
* @mixins: Classes mixed into the current class.
* @event: Events that can be emitted by a class. These are also
inherited by subclasses. (+ @param, @return and @preventable).
So ve.Node#event-attach is inherited to ve.dm.BreakNode,
just like @method is.
* @singleton: Plain objects such as ve, ve.dm, ve.ce were missing
documentation causing a tree error. Documented those as a
JSDuck singleton, which they but just weren't documented yet.
NB: Members of @singleton don't need @static (if present,
triggers a compiler warning).
* @chainable: Shorthand for "@return this". We were using
"@return {classname}" which is ambiguous (returns the same
instance or another instance?), @chainable is specifically
for "@return this". Creates proper labels in the generated
HTML pages.
Removed:
* @mixin: (not to be confused with @mixins). Not supported by
JSDuck. Every class is standalone anyway. Where needed marked
them @class + @abstract instead.
Change-Id: I6a7c9e8ee8f995731bc205d666167874eb2ebe23
We got lucky - the fact that our alien styling choice required phantom overlays had the nice side-effect of preventing the ability to focus the aliens. Therefore, as soon as we started ignoring IE to deliver nice alien handling for standards-compliant browsers, we inadvertently solved(?) the IE alien problem. I've touched up the styling to look nice in IE 9 (solid green phantoms) and IE 10 (stripes). Shield GIF switched to PNG because IE 10 renders the transparent GIF as solid red. Yeah, red.
Change-Id: I3bc69acba9ed883a823cdf722117b90966bc332b
This changeset adds a visual treatment to uneditable AlienBlockNodes to indicate to the editor that the elements are uneditable. To deal with odd shapes, the alien's shields are cloned and added to a phantom container. The phantom container and the phantoms themselves may be styled appropriately.
Change-Id: I7ad52707966bc18be627aa4269725004edba86cd
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
This fixes a problem with how Chrome renders native selection around floated elements. By adding pseudo elements before and after block aliens, the rendering is fixed.
Change-Id: I7fdbb8f4c42e29d0574b308b8c5740066bb58e94
This node type represents <meta> or <link> (transparently, based on the
style attribute). I had to make two node types for this and hack the
toData conversion code directly into ve.dm.Converter, because we don't
have native support for node types that can be both inline and block.
(We should add this in the node API rewrite.)
The CE implementation renders a placeholder (with the same styles as an
alien node) right now. I'm not sure how nice that is, but it's better
than rendering raw <meta>/<link> tags.
This whole thing is a total pile of hacks to make VE deal with
<meta>/<link> tags until we have a proper node types API.
Change-Id: Id6783fcfc35a896db088ff424ff9faaabcaff716
* Made vector specific styles only active in the vector skin
* Added apex specific styles
* Removed override of text size for document node
* Added stylesheet for stand-alone to specify text size for document node
Change-Id: I8a57918912499f9453a5692ff45a04a16ed34cde
* Classicifation (JS)
Use addClass instead of attr( 'class' ) whenever possible.
addClass will manipulate the properties directly instead of
(re-)setting an attribute which (most) browsers then sync
with the properties.
Difference between:
elem.className
and
elem.setAttribute( 'class', .. );
Just like .checked, .value, .disabled and other interactive
properties, the HTML attributes should only be used for initial
values from the html document. When in javascript, only set
properties. Attributes are either ignored or slow.
* Styling (JS)
Use .css() instead of attr( 'style' ).
Again, setting properties instead of attributes is much faster,
easier and safer. And this way it takes care of cross-browser
issues where applicable, and less prone to error due to dealing
with key-value pairs instead of css strings.
Difference between:
elem.style.foo = 'bar';
and
elem.setAttribute( 'style', 'foo: bar;' );
* Finding (JS)
Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ).
It is CSS!
* Vendor prefixes (CSS)
It is important to always list newer (standards-compliant) versions
*after* the older/prefixed variants.
See also http://css-tricks.com/ordering-css3-properties/
So the following three:
-webkit-gradient (Chrome, Safari 4)
-webkit-linear-gradient (Chrome 10, Safari 5+)
linear-gradient (CSS3 standard)
... must be in that order.
Notes:
- "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8)
Has not been renamed to "opacity" since Firefox 0.9.
- Removed redundant "-moz-opacity"
- Added "filter: alpha(opacity=**);" where missing
- Fixed order of css3 properties (old to new)
- Add standardized css3 versions where missing
(some 'border-radius' groups didn't have the non-prefixed version)
- Spacing
- @embed
- Shorten hex colors where possible (#dddddd -> #ddd)
$ ack '#([0-9a-f])\1{5}' --css
$ ack '#([0-9a-f])\1{2};' --css
Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
This license change is aimed at maximizing the reusability of this code
in other projects. VisualEditor is more than just an awesome editor for
MediaWiki, it's the new editor for the entire internet.
Added license and author files, plus mentions of the license to all
VisualEditor PHP, JavaScript and CSS files. Parser files have not been
modified but are effectively re-licensed since there's no overriding
license information. 3rd party libraries are not changed, but are all
already MIT licensed.
Change-Id: I895b256325db7c8689756edab34523de4418b0f2
This makes it possible to get identical rendering in the editor, but may make other things more complex. The Wikitext serializer is no longer compatible for rendering lists so it's been stubbed out. Also the way the toolbar works with lists is broken, so that's been disabled. The HTML serializer has been fixed to work correctly and no-longer-used styles have been removed.
Change-Id: If156f55068b1f6d229b3fa789164f28b2e3dfc76
Also:
* Simplified ve.ce.Surface.getLeafNode, which may be better to just be removed and be used inline in the few places it's being used.
* Removed method wrapper for static function ve.ce.Surface.getLeafNode
Change-Id: I1d4cf0bb7ecc8f07f030753e40a13ebef7d02daa
