{"version":3,"sources":["webpack://mfModules.[name]/./src/mobile.special.mobileoptions.scripts.js"],"names":["storage","mw","browser","require","getSingleton","toast","EXPAND_SECTIONS_KEY","msg","FONT_SIZE_KEY","notify","isPending","showOnPageReload","show","createLabel","heading","description","$label","$","append","text","addClass","OO","ui","LabelWidget","label","loader","using","then","$form","betaToggle","amcToggle","toggles","length","push","toggleElements","forEach","$toggleElement","toggleSwitch","enableToggle","$checkbox","infuse","$element","ToggleSwitchWidget","value","isSelected","insertAfter","hide","on","attr","setValue","find","prop","setTimeout","trigger","infuseToggles","isWideScreen","cb","cbField","name","get","FieldLayout","set","prependTo","addExpandAllSectionsToForm","config","fontChanger","fontChangerDropdown","currentFontSize","DropdownInputWidget","options","data","addFontChangerToForm"],"mappings":"mNACA,IAAIA,EAAUC,GAAGD,QAChBE,EAAUC,EAAS,mCAA6BC,eAChDC,EAAQF,EAAS,iCACjBG,EAAsB,iBACtBC,EAAMN,GAAGM,IACTC,EAAgB,eAMjB,SAASC,EAAQC,GACXA,EACJL,EAAMM,iBAAkBJ,EAAK,kCAE7BF,EAAMO,KAAML,EAAK,kCASnB,SAASM,EAAaC,EAASC,GAC9B,IAAIC,EAASC,EAAG,SAQhB,OAPAD,EAAOE,OAAQD,EAAG,YAAaE,KAAML,IACrCE,EAAOE,OACND,EAAG,SACDG,SAAU,sBACVD,KAAMJ,IAGF,IAAIM,GAAGC,GAAGC,aAChBC,MAAOR,IAoKTf,GAAGwB,OAAOC,MAAO,mBAAoBC,KA3BrC,WACC,IAAIC,EAAQX,EAAG,mBACdY,EAAaZ,EAAG,uBAChBa,EAAYb,EAAG,sBACfc,KAEIF,EAAWG,QACfD,EAAQE,KAAMJ,GAEVC,EAAUE,QACdD,EAAQE,KAAMH,GAhEhB,SAAwBI,EAAgBN,GACvCM,EAAeC,QAAS,SAAWC,GAClC,IAAIC,EACHC,EACAC,EAEDD,EAAejB,GAAGC,GAAGkB,OAAQJ,GAC7BG,EAAYD,EAAaG,UAEzBJ,EAAe,IAAIhB,GAAGC,GAAGoB,oBACxBC,MAAOL,EAAaM,gBAKRH,SAASI,YAAaN,GAInCA,EAAUO,OAKVP,EAAUQ,GAAI,SAAU,WAEvBR,EAAUS,KAAM,YAAY,GAC5BX,EAAaY,SAAUX,EAAaM,gBAErCP,EAAaU,GAAI,SAAU,SAAWJ,GAKrCN,EAAaY,SAAW,aAExBV,EAAUW,KAAM,SACdC,KAAM,UAAWR,GACnBlC,GAAQ,GAKR2C,WAAY,WACXxB,EAAMyB,QAAS,WACb,SAqBLC,CAAevB,EAASH,GAKtB1B,EAAQqD,gBAtGX,SAAqC3B,GACpC,IAAI4B,EAAIC,EAERD,EAAK,IAAInC,GAAGC,GAAGoB,oBACdgB,KAAMpD,EACNqC,MAA8C,SAAvC3C,EAAQ2D,IAAKrD,KAErBmD,EAAU,IAAIpC,GAAGC,GAAGsC,YACnBJ,GAEChC,MAAOX,EACNZ,GAAGM,IAAK,0CACRN,GAAGM,IAAK,gDACPkC,WAGJe,EAAGT,GAAI,SAAU,SAAWJ,GAC3B3C,EAAQ6D,IAAKvD,EAAqBqC,EAAQ,OAAS,SACnDlC,MAGDgD,EAAQhB,SAASqB,UAAWlC,GAmF3BmC,CAA4BnC,GAGxB3B,GAAG+D,OAAOL,IAAK,0BAvJrB,SAA+B/B,GAC9B,IAAIqC,EAAaC,EAChBC,EAAkBnE,EAAQ2D,IAAKnD,GAEhC0D,EAAsB,IAAI7C,GAAGC,GAAG8C,qBAC/BzB,MAAOwB,GAAmB,UAC1BE,UAEEC,KAAM,QACN9C,MAAOjB,EAAK,8CAGZ+D,KAAM,UACN9C,MAAOjB,EAAK,+CAGZ+D,KAAM,QACN9C,MAAOjB,EAAK,8CAGZ+D,KAAM,UACN9C,MAAOjB,EAAK,iDAIf0D,EAAc,IAAI5C,GAAGC,GAAGsC,YACvBM,GAEC1C,MAAOX,EAAaZ,GAAGM,IAAK,oCAC3BN,GAAGM,IAAK,qCAAuCkC,WAGlDyB,EAAoBnB,GAAI,SAAU,SAAWJ,GAC5C3C,EAAQ6D,IAAKrD,EAAemC,GAC5BlC,MAGDwD,EAAYxB,SAASqB,UAAWlC,GAmH/B2C,CAAsB3C","file":"mobile.special.mobileoptions.scripts.js","sourcesContent":["/* global $, OO */\nvar storage = mw.storage,\n\tbrowser = require( './mobile.startup/Browser' ).getSingleton(),\n\ttoast = require( './mobile.startup/toast' ),\n\tEXPAND_SECTIONS_KEY = 'expandSections',\n\tmsg = mw.msg,\n\tFONT_SIZE_KEY = 'userFontSize';\n\n/**\n * Notifies the user that settings were asynchronously saved.\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\ttoast.show( msg( 'mobile-frontend-settings-save' ) );\n\t}\n}\n/**\n * Creates a label for use with a form input\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 * @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 || '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 * @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 {jQuery.Object[]} toggleElements an array of toggle elements to infuse\n * @param {jQuery.Object} $form form to submit when there is interaction with toggle\n */\nfunction infuseToggles( toggleElements, $form ) {\n\ttoggleElements.forEach( function ( $toggleElement ) {\n\t\tvar toggleSwitch,\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// 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\tbetaToggle = $( '#enable-beta-toggle' ),\n\t\tamcToggle = $( '#enable-amc-toggle' ),\n\t\ttoggles = [];\n\n\tif ( betaToggle.length ) {\n\t\ttoggles.push( betaToggle );\n\t}\n\tif ( amcToggle.length ) {\n\t\ttoggles.push( amcToggle );\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) {\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":""}