Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add select2 library (v4.0.12) to better handle options in warn and xfd #812

Merged
merged 1 commit into from Jan 24, 2020

Conversation

Amorymeltzer
Copy link
Collaborator

@Amorymeltzer Amorymeltzer commented Jan 18, 2020

chosen (https://harvesthq.github.io/chosen/, https://github.com/harvesthq/chosen), which has been in use since #580 (xfd) and #641 (warn), has been causing some consistent CSS issues in the warn modules (#665), and has recently been deprecated: harvesthq/chosen@91041bc. select2 (https://select2.org/, https://github.com/select2/select2) is an alternative to chosen that resolves those issues and is better maintained, albeit larger even without using the full version.

select2, however, is not part of MediaWiki's core ResourceLoader modules, so have to upload it ourselves as a gadget, as we once did for moment (a2c3f93). We could technically use the Toolserver CDN but that is potentially prone to occasional unreliability and is not whitelisted by the CSP (https://phabricator.wikimedia.org/T223840); that's still in 'report only' mode but users will have to opt-themselves out so it's not long-term reliable (https://phabricator.wikimedia.org/T208188). Uploading it as a gadget avoids all that and makes use of the advantages of the ResourceLoader.

Uploaded under the terms of the MIT license:

The MIT License (MIT)

Copyright (c) 2012-2017 Kevin Brown, Igor Vaynberg, and Select2 contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

@Amorymeltzer
Copy link
Collaborator Author

cc @siddharthvp and @MusikAnimal re: 692 for your review; I can push this up whenever.

I've added .eslintignore here to skip over the select2 files, but if/when I merge #811 I'll change it to make use of .eslintrc.json

@siddharthvp
Copy link
Member

select2.min.css needs a licence header. And the links to the MW pages in DEVELOPER.md aren't defined.

Otherwise, great 👍

@Amorymeltzer
Copy link
Collaborator Author

Exact copy from dist as well as all the CDNs, but yeah, I suppose it'd be good to add

@Amorymeltzer
Copy link
Collaborator Author

@MusikAnimal Am I missing something obvious at https://test.wikipedia.org/wiki/MediaWiki:Gadgets-definition? Uploaded to testwiki as a gadget, but can't seem to get it loading properly. In the console:
mw.loader.moduleRegistry['ext.gadget.select2'].state shows ready

but yet still $.fn.select2 is undefined.

mw.loader.load('ext.gadget.select2'), etc. is no use, but loading it directly (mw.loader.load('//test.wikipedia.org/w/index.php?title=MediaWiki:Gadget-select2.min.js&action=raw&ctype=text/javascript') or importScript) loads things just fine.

Seems vaguely like https://stackoverflow.com/q/20034522/2521092

@Amorymeltzer
Copy link
Collaborator Author

Pretty sure it has something to do with this: https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers#Special_case_of_external_libraries

Some libraries autodetect their environment (AMD, node.js, browser, etc.) and can be mistaken in their choice because of the special environment of ResourceLoader.

Tossing some console.logs in https://test.wikipedia.org/w/index.php?title=MediaWiki:Gadget-select2.js show that, via mw.loader.load('ext.gadget.select2unmin'), it detects "Node/CommonJS," whereas sourcing it directly detects the "Browser" environment.

Whether it's tweaking the script to export to window in RL or using a ...binding.js file, I'm still not sure exactly what needs doing.

@Amorymeltzer
Copy link
Collaborator Author

Amorymeltzer commented Jan 23, 2020

Still looking into this, frustratingly. Simply removing the nodejs/commonjs check seems to work, but that's not ideal long term. I'm suddenly very busy during the day the next few days, so I'll keep testing tonight but my current plan just FYI @MusikAnimal is:

Then I can be around a bit to support bug fixes, partial feedback, etc. per my usual habit.

chosen (https://harvesthq.github.io/chosen/, https://github.com/harvesthq/chosen), which has been in use since wikimedia-gadgets#580 (xfd) and wikimedia-gadgets#641 (warn), has been causing some consistent CSS issues in the warn modules (wikimedia-gadgets#665), and has recently been deprecated: harvesthq/chosen@91041bc.  select2 (https://select2.org/, https://github.com/select2/select2) is an alternative to chosen that resolves those issues and is better maintained, albeit larger even without using the full version.

select2, however, is not part of MediaWiki's core ResourceLoader modules (T53443), so have to upload it ourselves as a gadget, as we once did for moment (a2c3f93).  We could technically use the [Toolserver CDN](https://tools.wmflabs.org/cdnjs/) but that is potentially prone to occasional unreliability and is not whitelisted by the CSP (https://phabricator.wikimedia.org/T223840); that's still in 'report only' mode but users will have to opt-themselves out so it's not long-term reliable (https://phabricator.wikimedia.org/T208188).  Uploading it as a gadget avoids all that and makes use of the advantages of the ResourceLoader.

There's a bit of a complication, though: select2 registers the ResourceLoader as a nodejs/commonjs environment, making use of with `module.exports`, so a slight tweak has been made, commenting out that check; see [external libraries](https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers#Special_case_of_external_libraries) and [T108655](https://phabricator.wikimedia.org/T108655.  This is not ideal long-term, but works for now and should be checked if/when select2 is updated.

----

Uploaded under the terms of the MIT license:

The MIT License (MIT)

Copyright (c) 2012-2017 Kevin Brown, Igor Vaynberg, and Select2 contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
@Amorymeltzer Amorymeltzer merged commit 3ab18f2 into wikimedia-gadgets:master Jan 24, 2020
@Amorymeltzer Amorymeltzer deleted the select2 branch January 24, 2020 04:18
Amorymeltzer added a commit to Amorymeltzer/twinkle that referenced this pull request Jan 24, 2020
Partial blocks (https://phabricator.wikimedia.org/T190350) were turned on following an RfC (https://en.wikipedia.org/wiki/Wikipedia:Requests_for_comment/Partial_blocks), so it's time to support them.  Done so by adding a checkbox that toggles a "partial" status for both the blocking and templating behaviors.

In order to support entering specific pages, the modules needs to support multiple custom user inputs, which can't be done nicely with chosen (See harvesthq/chosen#166).  We can, however, use select2's tags system, recently added in wikimedia-gadgets#812 to make wikimedia-gadgets#692 (warn/xfd) happen.

This is all an active WIP, including the policy (WP:PB) and the/any templates (right now, only {{uw-pblock}}) so a lot of this is likely to be in flux for a while.

Some stray notes:

- Adds a `defaultToPartialBlocks` preference option
- Makes use of a hidden partial item to help build the query (like `reblock`)
- Includes checks to prevent empty entries (T208645])
- Adds jumping boxes for `email`/`accountcreate` when just issuing a partial template
- Will ignore the `email`/`accountcreate` template parameters if there's an `area`
- CSS and select2 tweaks a la wikimedia-gadgets#692
- I've skipped proper processing in `saveFieldset` of the select2 menu items, it's easier to just do `.join('|')` for the query
- This use a variable for formatted namespaces, namely "(Article)" rather than "".  The empty string really is no good here; Morebits.wikipedia.namespacesFriendly previously handled this sort of thing, was removed in wikimedia-gadgets#600.
- Compared to the rest of Twinkle, this is a weird module!  Very different but pretty enjoyable all in all; @MusikAnimal built something really quite elegant here in wikimedia-gadgets#260.

Closes wikimedia-gadgets#802.
Amorymeltzer pushed a commit that referenced this pull request Jan 24, 2020
This fully fixes the bug [described here](https://en.wikipedia.org/wiki/Wikipedia_talk:Twinkle/Archive_41#Long_previews_overlap_and_block_%22Submit%22_button) (closes #665), also eliminating the stop-gap solution of removing the resize handles. The problems associated with using jquery.chosen within a modal dialog (like in all TW scripts) are not there in select2. Also, select2 is better both in terms of customizability and programmatic control, not to mention having a proper documentation (unlike chosen).  select2 added in #812.

This also adds Morebits.select2 with functions to enhance the select2 menus:
- matcher: show entire optgroup if matching the optgroup title
- highlightSearchMatches underline the search term in matches
- autostart: begin the search upon keydown
@Amorymeltzer Amorymeltzer added docs gadget-definition Changes to the gadget definition at MediaWiki:Gadgets-definition labels Jul 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs gadget-definition Changes to the gadget definition at MediaWiki:Gadgets-definition
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants