[05:53:44] Still IE users out there? [05:54:25] If there's barely IE users nowadays I may try to drop IE support for extensions [05:58:25] https://www.mediawiki.org/wiki/Compatibility#Browsers is what mediawiki supports - IE11 has basic support but doesn't get javascript [05:59:12] May you see my codes? I can open a port on my system and let you in (re @Nikki: https://www.mediawiki.org/wiki/Compatibility#Browsers is what mediawiki supports - IE11 has basic support but doesn't get javasc...) [05:59:22] Editing on VSC [06:00:41] https://prod.liveshare.vsengsaas.visualstudio.com/join?F77A1D60752A4DE18ADA50DECCA8487BDFEF [06:03:02] Here I'm trying to migrate some of interface objects into OOUI objects as well as restructure the js (maybe move some of code blocks into PHP?), therefore I'm asking for help, especially on common good practices [06:05:29] Yeah, my current project is migrate current HotCat gadget into an extension. I wrote some hook files and extension.json, making the script able to load. But how I can optimize current structure? [06:14:05] I don't have time right now, but I don't think that's something I could help with anyway :( I'm not sure what's considered good practice [06:15:21] How to load OOUI objects correctly? [07:27:46] https://gerrit.wikimedia.org/r/c/mediawiki/extensions/HotCat/+/959146 [07:28:02] Can my changes get reviewed? [08:52:47] ``` [08:52:48] "ResourceModules": { [08:52:49] "ext.HotCat": { [08:52:51] "dependencies": [ [08:52:52] "mediawiki.util", [08:52:54] "mediawiki.user", [08:52:55] "mediawiki.Title", [08:52:57] "mediawiki.api", [08:52:58] "oojs-ui-core", [08:53:00] "oojs-ui-windows", [08:53:01] "oojs-ui-widgets", [08:53:03] "oojs-ui.styles.icons-interactions", [08:53:04] "oojs-ui.styles.icons-movement", [08:53:06] "oojs-ui.styles.icons-content", [08:53:07] "oojs-ui.styles.icons-moderation", [08:53:09] "oojs-ui-toolbars", [08:53:10] "oojs-ui.styles.icons-editing-core", [08:53:12] "oojs-ui.styles.icons-layout", [08:53:13] "oojs-ui.styles.icons-user", [08:53:15] "oojs-ui.styles.icons-media", [08:53:16] "oojs-ui.styles.icons-editing-advanced" [08:53:18] ] [08:53:19] ...``` [08:53:21] (re @cvictorovich: How to load OOUI objects correctly?) [08:53:22] Oh my! [08:53:29] All these are required? [08:55:16] You can just use what you need. [08:55:43] I don't really know... [08:55:45] If you want to use icons you need yo add the icon group. [08:55:54] (首) [08:56:17] ``` [08:56:18] "oojs-ui-core", [08:56:19] "oojs-ui-windows", [08:56:21] "oojs-ui-widgets", [08:56:23] ``` [08:56:24] [08:56:25] [08:56:27] You need to use this three anyway [08:57:43] "oojs-ui.styles.icons-interactions", [08:57:43] "oojs-ui.styles.icons-movement", [08:57:45] "oojs-ui.styles.icons-content", [08:57:46] "oojs-ui.styles.icons-moderation" [08:58:13] Can these ben invoked with "oojs-ui.styles" or something? [08:59:40] Nope :/ You have to use the icon group (re @cvictorovich: Can these be invoked with "oojs-ui.styles" or something?) [09:01:52] Is there icons for tick/cross in these koleksiyons? [09:04:07] You can check the OOUI icons set here: [09:04:09] [09:04:10] https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop [09:04:31] Wow, helpful! [09:04:45] https://doc.wikimedia.org/oojs-ui/master/js/ [09:06:19] Now that I should invoke icons in js [09:07:09] Is it iconWidget? [09:08:14] nope (re @cvictorovich: Now that I should invoke icons in js) [09:09:03] If you want to use any icon from any icon group you need to add that group to the dependencies. [09:09:22] Dependencies added [09:09:52] I need to use an icon in my existing JS [09:11:10] So you can use icons in elements [09:12:00] Check the elements using on this documentation. (re @vikipolimer: https://doc.wikimedia.org/oojs-ui/master/js/) [09:12:51] I've been wondering where to invoke "append" [09:14:35] ``` [09:14:36] // An IconWidget with a label via LabelWidget. [09:14:37] var myIcon = new OO.ui.IconWidget( { [09:14:39] icon: 'help', [09:14:40] title: 'Help' [09:14:42] } ), [09:14:43] // Create a label. [09:14:45] iconLabel = new OO.ui.LabelWidget( { [09:14:46] label: 'Help' [09:14:48] } ); [09:14:49] $( document.body ).append( myIcon.$element, iconLabel.$element );``` [09:14:54] I'm using it [09:15:02] Like this. [09:15:39] But where would (document.body).append append my objects? [09:16:15] that would just add it to the end of the element. but instead of that, you can append it to any jquery object you want (re @cvictorovich: But where would (document.body).append append my objects?) [09:16:20] Oh, you can choose some another element instead of document body. [09:16:45] It adds element to the your doucument. (re @vikipolimer: // An IconWidget with a label via LabelWidget. [09:16:46] var myIcon = new OO.ui.IconWidget( { [09:16:48] icon: 'help', [09:16:49] title: 'Help' [09:16:51] ...) [09:17:32] Maybe both of you should see my codes [09:17:49] ``` [09:17:49] $('.your-chosen-class').append(yourOOUIelement.$element);``` [09:17:51] The old UI objects are appending somewhere [09:19:05] ``` [09:19:06] var myIcon = new OO.ui.IconWidget( { [09:19:07] icon: 'help', [09:19:09] title: 'Help' [09:19:10] } ), [09:19:12] iconLabel = new OO.ui.LabelWidget( { [09:19:13] label: 'Help' [09:19:15] } ); [09:19:16] $('.your-chosen-class').append(myIcon.$element);``` [09:20:49] https://prod.liveshare.vsengsaas.visualstudio.com/join?F77A1D60752A4DE18ADA50DECCA8487BDFEF [09:21:00] Here you can see what I'm doing [09:21:39] I'm actually changing an object inside an array (?) [09:22:19] Could you please share your snippet? [09:24:33] Too long, please wait [09:24:51] existsYes: new OO.ui.IconWidget( { [09:24:51] icon: 'check' [09:24:52] } ), [09:24:54] iconLabel: new OO.ui.LabelWidget( { [09:24:55] label: '' [09:24:57] }), [09:24:58] existsNo: "../src/images/Feather-core-x.svg", [09:25:05] addShortcuts: function ( map ) { [09:25:06] if ( !map ) return; [09:25:07] window.HotCat.shortcuts = window.HotCat.shortcuts {}; [09:25:09] for ( var k in map ) { [09:25:10] if ( !map.hasOwnProperty( k ) typeof k !== 'string' ) continue; [09:25:12] [09:25:13] var v = map[ k ]; [09:25:15] if ( typeof v !== 'string' ) continue; [09:25:16] [09:25:18] k = k.replace( /^\s+|\s+$/g, '' ); [09:25:19] v = v.replace( /^\s+|\s+$/g, '' ); [09:25:21] if ( !k.length || !v.length ) continue; [09:25:22] [09:25:24] window.HotCat.shortcuts[ k ] = v; [09:25:25] } [09:25:27] } [09:26:13] All of these are in a "var HC = window.HotCat = {}" [09:27:05] If this works, I'd remove those icons from my package [09:27:55] Define a variable for this icon element and append it. (re @cvictorovich: existsYes: new OO.ui.IconWidget( { [09:27:55] icon: 'check' [09:27:57] } ), [09:27:58] iconLabel: new OO.ui.LabelWidget( { [09:28:00] label: '' [09:28:01] }), [09:28:03] ...) [09:31:07] Outside the original func [09:31:21] ? [09:34:22] Well, seems all these are related to another function [09:34:53] Unsure if appending is done there [09:38:22] Are OOUI buttons/input areas the same? [10:03:17] Please do NOT paste dozens of code lines here. It's spamming IRC. [10:03:24] Use Pastebins. [10:14:57] Sorry for not knowing this (re @wmtelegram_bot: Use Pastebins.) [10:23:01] https://phabricator.wikimedia.org/P52538 [10:23:19] Okay, I posted that snippet here [14:49:23] /stat@combot [15:24:23] /stat@combot [16:05:36] Thanks. What's your specific question? [16:07:46] Are you talking to me? (re @andreklapper: Thanks. What's your specific question?) [16:08:19] Yes, you posted last here. [16:09:26] I’m attempting to implement current objects (for instance, buttons) with OOUI objects [16:09:59] Whenever I replace original objects it cannot work at all [16:10:41] Also, some of these codes might should be implemented with PHP? [16:10:56] Some maybe even in CSS [16:12:32] Currently version on js is clunky but don’t know how to reorganize [16:12:50] Okay. Do you have a **specific*** qyestion? [16:13:05] This one! (re @cvictorovich: I’m attempting to implement current objects (for instance, buttons) with OOUI objects) [16:13:30] No OOUI objects can be displayed [16:13:34] I don't see a question. [16:13:59] What does happen instead? (re @cvictorovich: No OOUI objects can be displayed) [16:14:04] See commented out codes [16:16:29] Too many comments. Which specific one? (re @cvictorovich: See commented out codes) [16:16:41] https://tools-static.wmflabs.org/bridgebot/5dae8f27/file_52632.jpg [16:17:04] Context? [16:17:42] https://tools-static.wmflabs.org/bridgebot/9c131e8c/file_52633.jpg [16:17:57] The original code, also what I intended [16:18:18] You posted screenshot. Not code. [16:18:34] And my question was which commented line. [16:18:51] And what happens. And what should happen instead. [16:19:55] https://phabricator.wikimedia.org/P52545 [16:19:57] People likely will not read and review 150 lines of code without a minimal and self-contained testcase and a clear and specific description of a problem [16:20:17] This one contains the code in question [16:20:30] Too many lined [16:20:35] *lines [16:20:45] Line 22-48 [16:21:00] Which comment in lines 22-48? [16:21:19] I preserved the original code and commented out what I wrote [16:21:57] Those 2 comment blocks are OOUI buttons I wrote [16:22:45] And what's the problem? [16:24:21] When I replace the original js-style buttons with OOUI ones, the input fields and buttons cannot display when clicking on + link, only generating more + links [16:25:21] As is seen on my screenshots above [16:26:46] The input field shown above should be an OOUI one as well [16:37:05] Is my question specific enough?