Commit graph

36 commits

Author SHA1 Message Date
Adam Wight 64c7859c9f Prevent scrolling sidebar to heading of subitem
Scroll was landing in the wrong place.  Subitem should be kept
on-screen after click.

Change-Id: I3c1901b7b53ac523bcc0d33172b674b97421c06d
2021-09-24 07:53:01 +00:00
Thiemo Kreuz d6aece09cd Disable unwanted auto-scroll feature in template dialog
The weird auto-scroll feature is described in T289043#7297679.

This also fixes T291381 different than I393a2b1. Only one of the
patches should be merged.

Bug: T289043
Bug: T291381
Change-Id: I70d87f12fd68001e880510fb6c38d7c419d64b15
2021-09-22 13:30:37 +02:00
Thiemo Kreuz e037f99930 Merge custom "focusin" with "set" event handler
This code was introduced in I8fafee6. I can't tell any more what
the "bug" mentioned in the commit message was. Let's get rid of the
duplicate code path, see if we run into regressions and deal with
them one by one. That's much easier to handle than keeping this
confusing code path around.

Note this "focusin" event handler was actually re-implementing
parts of the upstream BookletLayout, namely
OO.ui.BookletLayout.onStackLayoutFocus().

Bug: T289043
Bug: T291381
Change-Id: Ib386ae6efec08465122f0e8ee81cd6dc9a2d337a
2021-09-21 10:14:57 +00:00
Thiemo Kreuz 482f4152cc Regression: Fix broken click on top-level template elements
The previous patch Id314ee8 was incomplete. The event changed.
The id in the event is not guaranteed to be a top-level partId any
more, but can be a template parameter's id.

Note: "Parameter id" and "pageName" is the same. The fact that
these ids match is how the left and the right side of the dialog
communicate.

Bug: T289043
Bug: T291151
Change-Id: I391f0f8edb96398fd33a2e0b01003013c52776da
2021-09-16 10:48:09 +02:00
jenkins-bot 3b78f40e7a Merge "Optimize .selectPartById() to fire less events" 2021-09-15 09:07:18 +00:00
jenkins-bot 0cfd298d18 Merge "Fix and test page name splitting code in template dialog" 2021-09-13 12:23:17 +00:00
jenkins-bot 1e4ef48393 Merge "Use OOUI 'classes' property instead of .addClass()" 2021-09-13 11:46:19 +00:00
Thiemo Kreuz e62b3fecbb Optimize .selectPartById() to fire less events
There is no point in firing this event when noting changed.
This should reduce flickering and some of the issues described
in I97d77f4.

Change-Id: I7c387889a4a33dac5053cec11a0641d358020b56
2021-09-13 13:42:20 +02:00
Thiemo Kreuz 6cb287c225 Fix space bar on top-level template parts loosing focus
As a reminder (not part of this patch): Pressing enter on the name of
a template should select it, and jump to the content area on the right.
Pressing space (that's what this patch is about) should select as well,
but not move the focus.

The best way to test the behavior is with a multi-part template.

Bug: T285323
Bug: T289043
Change-Id: I97d77f43b231696f92ba6758a6b8feac34e02e6d
2021-09-13 10:34:28 +02:00
Thiemo Kreuz cdc168d32a Use OOUI 'classes' property instead of .addClass()
The 'classes' property is a OOUI interface. Personally, I like
this code style better.

However. It appears like the code style in this codebase is
somewhat mixed. It looks like the top-level .$element always
uses .addClass(), while other code uses the 'classes' property.
Should we unify this?

Change-Id: I9ecd75e22d00f06ffd707f766dc9e8d748ff9a37
2021-09-11 17:41:45 +00:00
Thiemo Kreuz 22757fa901 Fix and test page name splitting code in template dialog
In JavaScript .split() behaves different, compared to PHP. In
PHP the last element contains the rest of the string. In
JavaScript the rest of the string is discarded. The limit acts
as if the array is truncated. That's why we can reduce the
number in

  'foo/bar'.split( '/', 1 )[ 0 ]

to 1, as we are only interested in the element "foo".

The same code in the other class is currently not covered by a
test. But changing it accordingly should be obviously fine now.

Change-Id: I20c27d480ddb1799df9eb1e5bc119b724e80653d
2021-09-11 17:40:39 +00:00
jenkins-bot 836ab09a79 Merge "Rename and document select/focus events in template dialog" 2021-09-03 09:38:21 +00:00
jenkins-bot abdbf57f84 Merge "Fix click/enter on template parameters not focusing the input" 2021-09-02 10:11:49 +00:00
Thiemo Kreuz 06cf00f4c6 Rename and document select/focus events in template dialog
I tried hard to come up with the best possible names. Some of the
criteria I used:
* Longer and more unique is better. This makes it much easier to
  e.g. search for the event name.
* The term "part" should only be used for top-level parts. While
  template parameters have a unique id, they are not a subclass
  of …TransclusionPartModel and therefor not "parts".
* BookletLayout manages "pages" via "page names".
  * The page names of top-level parts are identical with the part
    id, see ve.ui.MWTemplateDialog.getPageFromPart.
  * The page names of parameters are identical with the parameter
    model id, see ve.ui.MWTemplateDialog.onAddParameter.

Some code knows parameter ids, but not what pages are. Other code
knows page names, but not what parameters are. The transition
currently happens in the …OutlineContainerWidget. We might want
to move this point up to the …TemplateDialog. But I would argue
this is good enough for now and can be changed later, if needed.

Bug: T285323
Change-Id: Iab2805b3203988db400b67c8d00e48905fdc53dc
2021-09-01 16:23:59 +00:00
Thiemo Kreuz 7a8ad64cbd Fix click/enter on template parameters not focusing the input
This got lost in patch I20dbd2b.

Both events come from the same sidebar class. The difference
between the two is:
* selectPart is when the button representing a top-level part
  is clicked.
* focusPart is when a parameter name is clicked while the
  parameter is already checked.

Yes, this is confusing at the moment. Following patches will
rename, merge and split a lot of these events to be much more
self-explaining.

Bug: T285323
Change-Id: I0c6b53c93c712ff5e47c1beb5199d590cba7ab1a
2021-09-01 16:01:17 +02:00
Thiemo Kreuz b0ddcb0010 Highlight corresponding template parameter in new sidebar
Note there are currently two different code paths utilizing two
different events. The existing event handler actually changes
the selection of the top-level part in the sidebar (the
corresponding template name turns blue). The new event handler
highlights a parameter (it turns gray). This is currently
intentional (partly because of a bug in OOUI). I will try to
merge these code paths, if possible.

Please test, and if it works fine from the user's perspective,
please merge it as it is for now.

Bug: T285323
Bug: T289043
Change-Id: I8fafee68b8b7ff225c7b3c327f483f3426d8129c
2021-09-01 11:15:37 +02:00
Thiemo Kreuz 99558f9076 Connect focus event from BookletLayout to new sidebar
This makes sure the corresponding top-leve part is selected in
the list on the left when navigating the main area on the
right.

Bug: T289043
Change-Id: Id1b398e1786c4099d5b14fe88dd21a106269096b
2021-08-30 17:00:52 +02:00
Thiemo Kreuz 0ba7480901 More complete top-level part selection support in new sidebar
This comes with a few significant changes:
* A whole bunch of places in the code that focus and highlight
  an element in the old sidebar consider the new sidebar now.
* Same when e.g. the toolbar at the bottom needs to know which
  part is selected. This is read from the new sidebar now.
* To make this possible I had to merge the small helper class
  we introduced in I7bc73cc back into the dialog.

It's helpful to understand how the event flow works:
* You click a template name. This does nothing (does not select
  the element). It only triggers an event.
* The event is catched by the outer container that manages
  all parts. From there all elements are unselected, and one
  selected. This call is internal and should not trigger
  another event.

Bug: T285323
Bug: T288827
Bug: T289043
Change-Id: I4a2d2b83cf2691423d4b0e6f4487228fa3c7b56d
2021-08-27 19:16:00 +02:00
Thiemo Kreuz 544bd5688c Allow selecting top-level parts in the new sidebar
This is mostly, if not exclusively visual, at the moment. The
actual state is still managed by the old sidebar.

I made the element OptionWidgets for convenience. This gives us
all the functionality we need (primarily setSelected and
isSelected), without to much clutter. However, I didn't made
the container a SelectWidget. This comes with to much stuff we
don't need at this level, e.g. cursor key navigation.

Bug: T285323
Bug: T289043
Change-Id: I20dbd2ba23ceaa9125947b25e037c0bb3c91a471
2021-08-27 18:22:37 +02:00
Thiemo Kreuz 9392282bf2 More test cases for MWTransclusionOutlineContainerWidget
This also fixes a mistake in the class where we forgot to
disconnect event handlers when an element is removed from
the list. This doesn't have much of a consequence, as the
event flow is only in one direction, from the destroyed
element up. This is not possible any more.

Bug: T289560
Change-Id: I0bcc1d68c50b8cbdb033ef6692b34e2fc94e8d85
2021-08-24 15:46:46 +00:00
Thiemo Kreuz 5fcc862eb1 Remove dependency from new sidebar to the BookletLayout
This replaces I8cf9ecd.

Significant changes:
* The …OutlineContainerWidget doesn't need to know the
  BookletLayout any more. The only remaining resason to have
  this dependency was some focus management. This is now done
  via an event.
* Renamed an existing event to match the new one. The two
  really mean and do the exact same, even if they are
  triggered from two different places.
* Simplified some existing code.
* Updated documentation.

Bug: T288827
Change-Id: Ifcf2cadabf7fa4b8ecb72e3937003fab3b00d9bb
2021-08-20 10:07:03 +02:00
Thiemo Kreuz 095c891040 Remove unused code from ve.ui.MWTransclusionOutlinePartWidget
* getPartId() is unused.
* Use this.data instead of a custom this.partId.
* No need to store this.header as a property.
* Rename the event to "headerClick". That's enough when the
  event comes from a widget that does have the word "part" in
  it's name.

Bug: T274544
Bug: T288827
Change-Id: I8c70425403c6cd6a19e3a1cacb2b085e5c8b2e46
2021-08-19 11:03:44 +00:00
Thiemo Kreuz 7503b323b1 Stop re-creating template parameter pages over and over again
This is what actually happens:
* We call `addParameter()`.
* This triggers an `add` event.
* This calls an `MWTemplateDialog.onAddParameter` event handler.
* This code doesn't check if a parameter already exists (because
  it shouldn't). It detroys the page in the content pane on the
  right and recreates it from scratch.

The only reason we do this is to focus the input field on the
right. This patch introduces a dedicated event to do this.

Bug: T288827
Change-Id: I47effe05427cfabfcf534920edee79521eaa033f
2021-08-17 13:34:41 +02:00
Thiemo Kreuz 0bbcb436c1 Change filterParameter(s) event to work with a list
As discussed in Ia44da16. This change avoids possibly hundreds
of events (when a template does have hundreds of parameters),
and replaces them with a single one.

Bug: T288202
Change-Id: Ic819e8c93e872b653c238f396f1f327b6a8759d2
2021-08-11 08:06:22 +02:00
Thiemo Kreuz 3e5a2d6c82 Filter right content side of the template dialog as well
I came up with a new event to do this. This event is triggered
individually for each parameter. An alternative is a single
event that gets a list of visible parameters. Is this better?
What do you think?

Bug: T288202
Change-Id: Ia44da16917c28171a01aef0f1c613dcd5d3266ba
2021-08-05 14:36:10 +02:00
Thiemo Kreuz 5c6d2212da Make it possible to reuse existing transclusion outlines
Note that this patch alone probably does not make that much
sense. The code executed is pretty much the same. The only
difference is that the empty (!) …ContainerWidget is kept
and re-filled with what might be a completely different
template.

This is not much of a difference to before when the
container was recreated.

This change will make more sense when the container has to
manage more state, e.g. focus states. This state will
survive then.

Change-Id: Ic336d10a595e3e222741a3dc57c1d54639166b7a
2021-07-16 14:43:31 +02:00
Thiemo Kreuz 434c11f6de Fix incomplete template dialog event handling in new sidebar
Notably:
* Don't require the model in the new sidebar via dependency
  injection, but connect the event handlers later. This is
  relevant because we currently create the new sidebar in the
  wrong spot. Removing the hard dependency allows us to split
  the code and utilize initialize() and getSetupProcess()
  correctly. This will be done in a following patch.
* The change event now includes the new position. This makes
  it very easy to add this missing feature to the new sidebar.

Also:
* Stop triggering change events when nothing changed. These
  events are expensive. They bubble all the way up to the
  TransclusionModel, and to all linked
  onTransclusionModelChange() handlers.
* Update event documentation to make this more visible.

Bug: T274544
Change-Id: Iafe29f18a6fed14d9c3124c9756aa840886afbbc
2021-07-16 11:29:26 +00:00
Thiemo Kreuz ff9f8a9e2d Focus template editor elements on click in the new sidebar
Clicks on the left side now focus elements on the right
side.

This patch also simplifies the …ContainerWidget constructor.
The config parameter should only be used for "OOUI things"
that are needed by subclasses and mixins. But the parameters
we have here are not "UI things".

Passing them as config passes them to classes where we don't
know what they do with it. What probably happens is that
some class keeps a reference to the entire config object,
which doesn't have a benefit and possibly blocks garbage
collection.

Bug: T274544
Change-Id: I0c0e4a1ba59dcb43141338ffe939c9c6783e000d
2021-07-15 08:40:28 +00:00
Thiemo Kreuz 31904688df Update new sidebar when moving template parts up/down
The new sidebar now updates accordingly when elements are
moved around.

Bug: T274544
Change-Id: Ic6bc3484c54523aa4edc6b48a843c47059569061
2021-07-13 10:18:20 +02:00
Thiemo Kreuz 226e2657ef More robust debug container for new template editor sitebar
Before, the new sidebar was hacked in a place where it confused
the BookletLayout logic. This became visible when using the
up/down buttons to move elements in the sidebar.

This new container wraps the new and the old sidebar. It also
uses a temporary color to make it easier to see where one ends
and the other starts.

Bug: T274544
Change-Id: I4e5b40b1d1556886fc85cff9e926a02e4888f032
2021-07-13 09:11:57 +02:00
Thiemo Kreuz 5edf7dac18 Full add/delete support for all 3 types in template sidebar
From now on you can remove and add all 3 types of content from
the new sidebar.

Bug: T274544
Change-Id: If1e04ff503d72cbe9ea07c8036c9e3a0547cc0d0
2021-07-12 10:15:14 +00:00
Thiemo Kreuz a1384f34f3 Add template outline widgets for all content types
The two new widgets are pretty trivial now, thanks to the base
class.

Note there is still no code to delete the widgets. That's also
why you will always see a placeholder widget at the top. This
will be fixed with the next patches.

This patch also renames most of the "…TemplateOutline…" classes
to "…TransclusionOutline…" The reason is that these widgets are
not for a single template, but part of the container widget for
a more complex transclusion (i.e. a sequence of multiple
templates and wikitext snippets).

Bug: T274544
Change-Id: If4219b0b8ad4d1969ab1ec5ec4db0728811bab35
2021-07-12 09:19:06 +02:00
Thiemo Kreuz 4018439348 Remove empty container widgets that don't do anything
This code doesn't do anything but adding an empty <div> to
something that is already a <div>. It doesn't even have a
class name, i.e. it's not referenced from anywhere. We can
add such containers back any time when it turns out we
actually need them.

Bug: T274544
Change-Id: I62546cc7939364db31f37b9de0c035974554544b
2021-07-09 15:57:11 +02:00
Thiemo Kreuz d68e110e67 Fixes and updates to template related JSDoc tags
Some details:
* The config is not optional in these cases.
* This patch continues to remove some comments that don't add
  any information but just repeat what the code already says.

Change-Id: I5c27cd01ad80709bb583256821d65c6b65b74b05
2021-07-08 06:36:56 +00:00
Adam Wight 64c5b093cc Wire model changes into new template sidebar
Only partially wired.

Bug: T274545
Change-Id: I961ffbdd82829b18c08a7c33759a05427103fa8b
2021-06-24 11:09:39 +02:00
Adam Wight 988cda65dd Template dialog checkbox list
Introduces new widgets forming the backbone of the experimental
template dialog sidebar.

FIXME: `text-overflow: ellipsis` is not working yet, the container
styles need adjustment.

Bug: T274543
Change-Id: Ie81b84be288553343017c4aaf8691c4e266995f5
2021-06-17 08:47:47 +00:00