Change Details

**Context** 1) On iOS, users can toggle image dimming while article html is loaded. This means that we need to be able to communicate image dimming updates to the html so that image dimming can be applied. 2) On iOS, users can change themes while article html is loaded. This means that we need to be able to communicate theme updates to the html so that its CSS can be updated. **Proposed solution** 1) Provide a JS function to dim images. It could have 2 parameters; `dim` (Bool) and `callback` (optional function). `dim` would be passed to the transform and `callback` (if defined) would be called last. For example: ``` wmf.dimImages = (dim, callback) => { const imagesTransform = pagelib.DimImagesTransform; imagesTransform.dim(window, dim); if (callback) { callback(); } }; ``` 2) Provide a JS function to update theme. It could have 3 parameters: `theme` (String), `dimImages` (Bool) and `callback` (optional function) . `theme` can be either 'DEFAULT', 'DARK', 'SEPIA' or 'BLACK', as defined in https://github.com/wikimedia/wikimedia-page-library/blob/e88f10ad04df9664dd8e9d46482edc35a6221017/src/transform/ThemeTransform.js#L13. For example: ``` wmf.setTheme = (theme, dimImages, callback) => { const themeTransform = pagelib.ThemeTransform; const pagelibTheme = themeTransform.THEME[theme]; themeTransform.setTheme(document, pagelibTheme); wmf.dimImages(dimImages); if (callback) { callback(); }; } ``` The examples assume that a `wmf` object was defined beforehand.

**Context** When native clients load articles via mobile-html, the appearance of the page needs to be customized on initial load **Proposed solution** Provide a function for initial article setup with a callback: `setup(theme, dimImages, textSizeAdjustmentPercentage, margins, areTablesCollapsed, callback)` The callback is included to avoid a flash of un-styled content (for example if the user's theme is set to dark, the initial load shouldn't show the default theme) - clients should hide the web view until the callback is called. **Notes** This **//does not//** replace the individual endpoints for adjusting any of these properties individually, but rather combines tasks usually completed on initial load with a callback.

**Context** 1) On iOS, users can toggle image dimming while article html is loaded. This means that we need to be able to communicate image dimming updates to the html so that image dimming can be applied. 2) On iOS, users can change themes while article html is loaded.When native clients load articles via mobile-html, This means that we need to be able to communicate theme updatethe appearance of the page needs to the html so that its CSS can be updated.be customized on initial load **Proposed solution** 1) Provide a JS function to dim images. It could have 2 parameters; `dim` (Bool) and `callback` (optional function). `dim` would be passed to the transform and `callback` (if defined) would be called last.Provide a function for initial article setup with a callback: For example:`setup(theme, dimImages, textSizeAdjustmentPercentage, margins, areTablesCollapsed, callback)` ``` wmf.dimImages = (dim, callback) => { const imagesTransform = pagelib.DimImagesTransform; imagesTransform.dim(window, dim); if (callback) { callback(); } }; ``` 2) Provide a JS function to update theme. It could have 3 parameters: `theme` (String), `dimImages` (Bool) and `callback` (optional function) . `theme` can be either 'DEFAULT', 'DARK', 'SEPIA' or 'BLACK'The callback is included to avoid a flash of un-styled content (for example if the user's theme is set to dark, as defined in https://github.com/wikimedia/wikimedia-page-library/blob/e88f10ad04df9664dd8e9d46482edc35a6221017/src/transform/ThemeTransform.js#L13. For example:the initial load shouldn't show the default theme) - clients should hide the web view until the callback is called. ```**Notes** wmf.setTheme = (theme, dimImages, callback) => { const themeTransform = pagelib.ThemeTransform; const pagelibTheme = themeTransform.THEME[theme]; themeTransform.setTheme(documentThis **//does not//** replace the individual endpoints for adjusting any of these properties individually, pagelibTheme); wmf.dimImages(dimImages); if (callback) { callback(); }; } ``` The examples assume that a `wmf` object was defined beforehandbut rather combines tasks usually completed on initial load with a callback.