MediaWiki:Gadget-idle-util.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

		/**
		 * Format the given number with commas.
		 *
		 * @param   {number} number
		 *          The number to format.
		 *
		 * @returns {string}
		 *          The formatted number.
		 */
		formatNumber: function(number) {
			return number;
		},

		ui: {

			/**
			 * Create a dropdown widget with the given items and optionally the
			 * selected item.
			 *
			 * @param   {(string|{label:string,header:boolean=,disabled:boolean=,hidden:boolean=})[]} items
			 *          The items to display in the dropdown widget.
			 * @param   {number} [selected]
			 *          Optionally, the index of the selected item.
			 * @param   {string} [label]
			 *          Optionally, the label for the dropdown widget.
			 *
			 * @returns {OO.ui.DropdownWidget}
			 *          The dropdown widget.
			 */
			dropdown: function(items, selected, label) {
				var currentIndex = 0;
				var dropdown = new OO.ui.DropdownWidget({
					label: label,
					menu: {
						items: items.map(function (item, index) {
							if (typeof item === 'string')
								return new OO.ui.MenuOptionWidget({ data: currentIndex++, label: item });

							var label = item.label || "Unknown";
							var header = item.header || false;
							var disabled = item.disabled || false;
							var hidden = item.hidden || false;

							if (header) {
								label = $("<div style='text-align:center'>" + label + "</div>");
								return new OO.ui.MenuSectionOptionWidget( { label: label } );
							}

							if (!hidden)
								return new OO.ui.MenuOptionWidget({ data: currentIndex++, label: label,
									disabled: disabled });

							return new OO.ui.MenuOptionWidget({ data: currentIndex++, label: label, disabled: disabled,
								invisibleLabel: hidden, $element: $("<div style='display:none'></div>") });
						})
					}
				});

				// We need to override the "below" key to have value "below".
				// If we don't then it might go above the dropdown and hide
				// items behind the navbar.
				OO.ui.MenuSelectWidget.static.flippedPositions = {
					below: 'below',
					above: 'below',
					top: 'bottom',
					bottom: 'top'
				};

				if (selected !== undefined && typeof selected === 'number') {
					if (selected < 0 || selected >= items.length)
						mw.error("UI.dropdown: Selected index out of bounds (" + selected + ", " + items.length + ")");
					else dropdown.getMenu().selectItemByData(selected);
				}

				return dropdown;
			},

			/**
			 * Create a button widget with the given label and flags.
			 *
			 * @param   {string} [label]
			 *          Optionally, the label for the button.
			 * @param   {string[]} [flags]
			 *          Optionally, the flags for the button.
			 *
			 * @returns {OO.ui.ButtonWidget}
			 *          The button widget.
			 */
			button: function(label, flags) {
				label = label || "Button";
				flags = flags || [];
				return new OO.ui.ButtonWidget({ label: label, flags: flags });
			},

			/**
			 * Create a button input widget with the given label and flags.
			 *
			 * @param   {string} [label]
			 *          Optionally, the label for the button.
			 * @param   {string[]} [flags]
			 *          Optionally, the flags for the button.
			 *
			 * @returns {OO.ui.ButtonInputWidget}
			 *          The button input widget.
			 */
			buttonInput: function(label, flags) {
				label = label || "Button";
				flags = flags || [];
				return new OO.ui.ButtonInputWidget({ label: label, flags: flags });
			},

			 /**
			 * Create a checkbox widget with an optional label and selected
			 * state.
			 *
			 * @param   {boolean} [selected]
             *          Optionally, whether the checkbox is selected.
			 * @param   {string} [label]
			 *          Optionally, the label for the checkbox.
			 *
			 * @returns {OO.ui.CheckboxInputWidget|OO.ui.FieldLayout}
			 *          The checkbox widget, or a field layout with the checkbox
			 *          and the label.
			 */
			checkbox: function(selected, label) {
				var checkbox = new OO.ui.CheckboxInputWidget({ selected: selected });

				if (label !== undefined && typeof label === 'string') {
					return new OO.ui.FieldLayout(checkbox, { label: label, align: 'inline' });
				}

				return checkbox;
			},

			/**
			 * Create a toggle switch widget with an optional initial state.
			 *
			 * @param   {boolean} [switched]
			 *          Optionally, whether the switch is on.
			 *
			 * @returns {OO.ui.ToggleSwitchWidget}
			 *          The toggle switch widget.
			 */
			switch: function(switched) {
				switched = switched || false;
				return new OO.ui.ToggleSwitchWidget({ value: switched });
			}
		}
	}
})(window.jQuery, window.mw, window.idleClans = window.idleClans || {});