{"version":3,"sources":["webpack://mfModules.[name]/./src/mobile.special.mobileoptions.scripts.js"],"names":["storage","mw","browser","require","getSingleton","toast","amcOutreach","msg","USER_FONT_SIZE_REGULAR","notify","isPending","showOnPageReload","createLabel","heading","description","$label","$","append","text","addClass","OO","ui","LabelWidget","label","loader","using","then","$form","$betaToggle","$amcToggle","toggles","length","push","$el","onToggle","value","loadCampaign","isCampaignActive","makeAllActionsIneligible","toggleObjects","forEach","toggleObject","toggleSwitch","enableToggle","$checkbox","$toggleElement","infuse","$element","ToggleSwitchWidget","isSelected","insertAfter","hide","on","attr","setValue","find","prop","setTimeout","trigger","infuseToggles","isWideScreen","config","get","cb","cbField","name","FieldLayout","set","prependTo","addExpandAllSectionsToForm","fontChanger","fontChangerDropdown","currentFontSize","DropdownInputWidget","options","data","addFontChangerToForm"],"mappings":"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","file":"mobile.special.mobileoptions.scripts.js","sourcesContent":["/* global $ */\nvar storage = mw.storage,\n\tbrowser = require( './mobile.startup/Browser' ).getSingleton(),\n\ttoast = require( './mobile.startup/showOnPageReload' ),\n\tamcOutreach = require( './mobile.startup/amcOutreach/amcOutreach' ),\n\tEXPAND_SECTIONS_KEY = 'expandSections',\n\tmsg = mw.msg,\n\t{ USER_FONT_SIZE_REGULAR } = require( './constants.js' ),\n\tFONT_SIZE_KEY = 'userFontSize';\n\n/**\n * Notifies the user that settings were asynchronously saved.\n *\n * @param {boolean} [isPending] if set toast will show after page has been reloaded.\n */\nfunction notify( isPending ) {\n\tif ( isPending ) {\n\t\ttoast.showOnPageReload( msg( 'mobile-frontend-settings-save' ) );\n\t} else {\n\t\tmw.notify( msg( 'mobile-frontend-settings-save' ) );\n\t}\n}\n/**\n * Creates a label for use with a form input\n *\n * @param {string} heading\n * @param {string} description\n * @return {OO.ui.LabelWidget}\n */\nfunction createLabel( heading, description ) {\n\tvar $label = $( '<div>' );\n\t$label.append( $( '<strong>' ).text( heading ) );\n\t$label.append(\n\t\t$( '<div>' )\n\t\t\t.addClass( 'option-description' )\n\t\t\t.text( description )\n\t);\n\n\treturn new OO.ui.LabelWidget( {\n\t\tlabel: $label\n\t} );\n}\n\n/**\n * Adds a font changer field to the form\n *\n * @param {jQuery.Object} $form\n */\nfunction addFontChangerToForm( $form ) {\n\tvar fontChanger, fontChangerDropdown,\n\t\tcurrentFontSize = storage.get( FONT_SIZE_KEY );\n\n\tfontChangerDropdown = new OO.ui.DropdownInputWidget( {\n\t\tvalue: currentFontSize || USER_FONT_SIZE_REGULAR,\n\t\toptions: [\n\t\t\t{\n\t\t\t\tdata: 'small',\n\t\t\t\tlabel: msg( 'mobile-frontend-fontchanger-option-small' )\n\t\t\t},\n\t\t\t{\n\t\t\t\tdata: 'regular',\n\t\t\t\tlabel: msg( 'mobile-frontend-fontchanger-option-medium' )\n\t\t\t},\n\t\t\t{\n\t\t\t\tdata: 'large',\n\t\t\t\tlabel: msg( 'mobile-frontend-fontchanger-option-large' )\n\t\t\t},\n\t\t\t{\n\t\t\t\tdata: 'x-large',\n\t\t\t\tlabel: msg( 'mobile-frontend-fontchanger-option-xlarge' )\n\t\t\t}\n\t\t]\n\t} );\n\tfontChanger = new OO.ui.FieldLayout(\n\t\tfontChangerDropdown,\n\t\t{\n\t\t\tlabel: createLabel( mw.msg( 'mobile-frontend-fontchanger-link' ),\n\t\t\t\tmw.msg( 'mobile-frontend-fontchanger-desc' ) ).$element\n\t\t}\n\t);\n\tfontChangerDropdown.on( 'change', function ( value ) {\n\t\tstorage.set( FONT_SIZE_KEY, value );\n\t\tnotify();\n\t} );\n\n\tfontChanger.$element.prependTo( $form );\n}\n\n/**\n * Adds an expand all sections field to the form\n *\n * @param {jQuery.Object} $form\n */\nfunction addExpandAllSectionsToForm( $form ) {\n\tvar cb, cbField;\n\n\tcb = new OO.ui.ToggleSwitchWidget( {\n\t\tname: EXPAND_SECTIONS_KEY,\n\t\tvalue: storage.get( EXPAND_SECTIONS_KEY ) === 'true'\n\t} );\n\tcbField = new OO.ui.FieldLayout(\n\t\tcb,\n\t\t{\n\t\t\tlabel: createLabel(\n\t\t\t\tmw.msg( 'mobile-frontend-expand-sections-status' ),\n\t\t\t\tmw.msg( 'mobile-frontend-expand-sections-description' )\n\t\t\t).$element\n\t\t}\n\t);\n\tcb.on( 'change', function ( value ) {\n\t\tstorage.set( EXPAND_SECTIONS_KEY, value ? 'true' : 'false' );\n\t\tnotify();\n\t} );\n\n\tcbField.$element.prependTo( $form );\n}\n\n/**\n * Helper method to infuse checkbox elements with OO magic\n * Additionally it applies all known hacks to make it mobile friendly\n *\n * @param {Object[]} toggleObjects an array of toggle objects to infuse\n * @param {jQuery.Object} $form form to submit when there is interaction with toggle\n */\nfunction infuseToggles( toggleObjects, $form ) {\n\ttoggleObjects.forEach( function ( toggleObject ) {\n\t\tvar\n\t\t\t$toggleElement = toggleObject.$el,\n\t\t\ttoggleSwitch,\n\t\t\tenableToggle,\n\t\t\t$checkbox;\n\n\t\tenableToggle = OO.ui.infuse( $toggleElement );\n\t\t$checkbox = enableToggle.$element;\n\n\t\ttoggleSwitch = new OO.ui.ToggleSwitchWidget( {\n\t\t\tvalue: enableToggle.isSelected()\n\t\t} );\n\t\t// Strangely the ToggleSwitchWidget does not behave as an input so any change\n\t\t// to it is not reflected in the form. (see T182466)\n\t\t// Ideally we'd replaceWith here and not have to hide the original element.\n\t\ttoggleSwitch.$element.insertAfter( $checkbox );\n\t\t// although the checkbox is hidden already, that is done via visibility\n\t\t// as a result, it still takes up space. We don't want it to any more now that the\n\t\t// new toggle switch has been added.\n\t\t$checkbox.hide();\n\n\t\t// listening on checkbox change is required to make the clicking on label working.\n\t\t// Otherwise clicking on label changes the checkbox \"checked\" state\n\t\t// but it's not reflected in the toggle switch\n\t\t$checkbox.on( 'change', function () {\n\t\t\t// disable checkbox as submit is delayed by 0.25s\n\t\t\t$checkbox.attr( 'disabled', true );\n\t\t\ttoggleSwitch.setValue( enableToggle.isSelected() );\n\t\t} );\n\t\ttoggleSwitch.on( 'change', function ( value ) {\n\t\t\t// execute callback\n\t\t\ttoggleObject.onToggle( value );\n\n\t\t\t// ugly hack, we're delaying submit form by 0.25s\n\t\t\t// and we want to disable registering clicks\n\t\t\t// we want to disable the toggleSwitch\n\t\t\t// but we cannot use setDisabled(true) as it makes button gray\n\t\t\ttoggleSwitch.setValue = function () {};\n\n\t\t\t$checkbox.find( 'input' )\n\t\t\t\t.prop( 'checked', value );\n\t\t\tnotify( true );\n\t\t\t// On some Android devices animation gets stuck in the middle as browser\n\t\t\t// starts submitting the form.\n\t\t\t// Let's call submit on the form after toggle button transition is done\n\t\t\t// (0.25s, defined in OOUI)\n\t\t\tsetTimeout( function () {\n\t\t\t\t$form.trigger( 'submit' );\n\t\t\t}, 250 );\n\t\t} );\n\t} );\n}\n\n/**\n * Add features, that depends on localStorage, such as \"expand all sections\" or \"fontchanger\".\n * The checkbox is used for turning on/off expansion of all sections on page load.\n */\nfunction initMobileOptions() {\n\tvar $form = $( '#mobile-options' ),\n\t\t$betaToggle = $( '#enable-beta-toggle' ),\n\t\t$amcToggle = $( '#enable-amc-toggle' ),\n\t\ttoggles = [];\n\n\tif ( $betaToggle.length ) {\n\t\ttoggles.push( {\n\t\t\t$el: $betaToggle,\n\t\t\tonToggle: function () {}\n\t\t} );\n\t}\n\tif ( $amcToggle.length ) {\n\t\ttoggles.push( {\n\t\t\t$el: $amcToggle,\n\t\t\tonToggle: function ( value ) {\n\t\t\t\tif ( !value && amcOutreach.loadCampaign().isCampaignActive() ) {\n\t\t\t\t\t// Make all amc outreach actions ineligible so the user doesn't have\n\t\t\t\t\t// to see the outreach drawer again\n\t\t\t\t\tamcOutreach.loadCampaign().makeAllActionsIneligible();\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\tinfuseToggles( toggles, $form );\n\n\tif (\n\t\t// Don't show this option on large screens since it's only honored for small screens.\n\t\t// This logic should be kept in sync with Toggle._enable().\n\t\t!browser.isWideScreen() &&\n\t\t// don't add the option if the sections are set by default as the setting doesn't\n\t\t// work in the opposite direction! (more background on T239195)\n\t\tmw.config.get( 'wgMFCollapseSectionsByDefault' )\n\t) {\n\t\taddExpandAllSectionsToForm( $form );\n\t}\n\n\tif ( mw.config.get( 'wgMFEnableFontChanger' ) ) {\n\t\taddFontChangerToForm( $form );\n\t}\n}\n\nmw.loader.using( 'oojs-ui-widgets' ).then( initMobileOptions );\n"],"sourceRoot":""}