// <syntaxhighlight lang=javascript>
mw.loader.impl(function(){return["skins.vector.typographySurvey@",{"main":"resources/skins.vector.typographySurvey/index.js","files":{"resources/skins.vector.typographySurvey/index.js":function(require,module,exports){
/**
* DO NOT EDIT DIRECTLY ON-WIKI.
* Source available at
* https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/953739
*
* The Typography Survey Gadget provides users with a way to change text appearance on the Vector 2022 skin.
* It provides and interface for changing font-size, line-height and paraphgraph spacing.
* It is intended for prototype and feedback purposes only.
**/
// Limit to main namespace
if ( mw.config.get( 'wgNamespaceNumber' ) === 0 ) {
mw.loader.using(["vue"]).then(function () {
var Vue = require( 'vue' ),
App = require( './TypographySurvey.vue' ),
mountEl = document.createElement('div');
mountEl.id = 'vector-typography-survey';
document.body.appendChild( mountEl );
Vue.createMwApp( App ).mount( mountEl );
});
}
},"resources/skins.vector.typographySurvey/TypographySurvey.vue":function(require,module,exports){/* eslint-disable */
// @ts-nocheck
const rootEl = document.querySelector( ':root' );
const CSS_VAR_MAP = {
storageKey: 'wm-reading-survey',
bodyClass: 'wm-reading-survey-enabled',
bodyTransitionClass: 'wm-reading-survey-transitions',
fontSize: {
storageKey: 'fontSize',
cssProp: 'font-size',
cssTarget: '.vector-body',
cssCustomProp: '--reading-survey-font-size'
},
lineHeight: {
storageKey: 'lineHeight',
cssProp: 'line-height',
cssTarget: '.vector-body',
cssCustomProp: '--reading-survey-line-height'
},
verticalMargins: {
storageKey: 'verticalMargins',
cssProp: 'margin-bottom',
cssTarget: '.vector-body p',
cssCustomProp: '--reading-survey-vertical-margins'
}
}
module.exports = exports = {
name: "VectorReadingSurvey",
compatConfig: { MODE: 3 },
compilerOptions: { whitespace: 'condense' },
data: function() {
const dataObj = {};
dataObj[ 'fontSize' ] = this.getSavedCSSVal( CSS_VAR_MAP.fontSize.storageKey )
|| this.getDefaultCSSVal( CSS_VAR_MAP.fontSize.cssTarget, CSS_VAR_MAP.fontSize.cssProp );
dataObj[ 'lineHeight' ] = this.getSavedCSSVal( CSS_VAR_MAP.lineHeight.storageKey )
|| this.getDefaultCSSVal( CSS_VAR_MAP.lineHeight.cssTarget, CSS_VAR_MAP.lineHeight.cssProp );
dataObj[ 'verticalMargins' ] = this.getSavedCSSVal( CSS_VAR_MAP.verticalMargins.storageKey )
|| this.getDefaultCSSVal( CSS_VAR_MAP.verticalMargins.cssTarget, CSS_VAR_MAP.verticalMargins.cssProp );
return dataObj
},
computed: {
feedbackUrl: function() {
const feedbackUrlParams = new URLSearchParams( [
[ 'action', 'submit' ],
[ 'section', 'new' ],
[ 'preload', 'Reading/Web/Accessibility_for_reading/Community_Prototype_Testing/preload' ],
[ 'preloadparams[]', this.fontSize ],
[ 'preloadparams[]', this.lineHeight ],
['preloadparams[]', this.verticalMargins ],
['preloadparams[]', window.location.href ],
['preloadtitle', mw.user.getName() ]
] );
return "https://www.mediawiki.org/wiki/Reading/Web/Accessibility_for_reading/Community_Prototype_Testing/Feedback?" + feedbackUrlParams.toString();
}
},
methods: {
getDefaultCSSVal: function( selector, cssProp ) {
const domEl = document.querySelector( selector );
const domElStyles = window.getComputedStyle( domEl );
const domElCSSProp = domElStyles.getPropertyValue( cssProp );
console.log( selector, domElCSSProp );
return parseInt( domElCSSProp );
},
getSavedCSSVal: function( name ) {
const savedVal = mw.storage.getObject( CSS_VAR_MAP.storageKey );
if ( savedVal && savedVal[ name ] ) {
return parseInt( savedVal[ name ] );
}
},
setCSSVal: function( name, val ) {
rootEl.style.setProperty( name, val + 'px' );
this.saveCSSVals();
},
saveCSSVals: function() {
const storageObject = {};
storageObject[ CSS_VAR_MAP.fontSize.storageKey ] = this.fontSize;
storageObject[ CSS_VAR_MAP.lineHeight.storageKey ] = this.lineHeight;
storageObject[ CSS_VAR_MAP.verticalMargins.storageKey ] = this.verticalMargins;
mw.storage.setObject( CSS_VAR_MAP.storageKey, storageObject, 604800 );
},
resetSavedCSSVals: function() {
mw.storage.remove( CSS_VAR_MAP.storageKey );
document.documentElement.classList.remove( CSS_VAR_MAP.bodyClass );
document.documentElement.classList.remove( CSS_VAR_MAP.bodyTransitionClass );
this.fontSize = this.getDefaultCSSVal( CSS_VAR_MAP.fontSize.cssTarget, CSS_VAR_MAP.fontSize.cssProp );
this.lineHeight = this.getDefaultCSSVal( CSS_VAR_MAP.lineHeight.cssTarget, CSS_VAR_MAP.lineHeight.cssProp );
this.verticalMargins = this.getDefaultCSSVal( CSS_VAR_MAP.verticalMargins.cssTarget, CSS_VAR_MAP.verticalMargins.cssProp );
},
randomize: function() {
this.fontSize = Math.floor(Math.random() * (24 - 12 + 1) + 12);
this.lineHeight = Math.floor(Math.random() * (42 - 16 + 1) + 16);
this.verticalMargins = Math.floor(Math.random() * (36 - 6 + 1) + 6);
}
},
watch: {
fontSize: function( newVal ) { this.setCSSVal( CSS_VAR_MAP.fontSize.cssCustomProp, newVal ) },
lineHeight: function( newVal ) { this.setCSSVal( CSS_VAR_MAP.lineHeight.cssCustomProp, newVal ) },
verticalMargins: function( newVal ) { this.setCSSVal( CSS_VAR_MAP.verticalMargins.cssCustomProp, newVal ) }
},
mounted: function() {
document.documentElement.classList.add( CSS_VAR_MAP.bodyClass );
this.setCSSVal( CSS_VAR_MAP.fontSize.cssCustomProp, this.fontSize );
this.setCSSVal( CSS_VAR_MAP.lineHeight.cssCustomProp, this.lineHeight );
this.setCSSVal( CSS_VAR_MAP.verticalMargins.cssCustomProp, this.verticalMargins );
},
updated: function() {
document.documentElement.classList.add( CSS_VAR_MAP.bodyClass );
document.documentElement.classList.add( CSS_VAR_MAP.bodyTransitionClass );
}
};;
module.exports.template = "<details class=\"reading-survey\" open=\"\"> \
<summary class=\"reading-survey__title\"> \
<strong>Wikimedia readability survey<\/strong> \
<\/summary> \
<p> \
We'd like to know how <i>the text<\/i> on Wikipedia looks best for you. Use the sliders below to adjust it's appearance. \
<\/p> \
<div class=\"reading-survey__options\"> \
\
<label>Font size:<\/label> \
<input v-model=\"fontSize\" type=\"range\" min=\"12\" max=\"24\"> \
<span> {{ fontSize }} <\/span> \
\
<label>Line height:<\/label> \
<input v-model=\"lineHeight\" type=\"range\" min=\"16\" max=\"42\" step=\"1\"> \
<span> {{ lineHeight }} <\/span> \
\
\
<label>Paragraph spacing:<\/label> \
<input v-model=\"verticalMargins\" type=\"range\" min=\"6\" max=\"36\" step=\"1\"> \
<span> {{ verticalMargins }} <\/span> \
<\/div> \
\
<p> \
<em>Your preferences will be saved for 7 days after saving them. Learn more about the <a href=\"https:\/\/www.mediawiki.org\/wiki\/Reading\/Web\/Accessibility_for_reading\">Accessibility for reading project.<\/a><\/em> \
<\/p> \
\
<div class=\"reading-survey__buttons\"> \
<button class=\"cdx-button\" @click=\"resetSavedCSSVals\">reset<\/button> \
<button class=\"cdx-button\" @click=\"randomize\">randomize<\/button> \
<a v-bind:href=\"feedbackUrl\" class=\"cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--action-progressive cdx-button--weight-primary cdx-button--size-medium cdx-button--framed\">share my preferences<\/a> \
<\/div> \
\
<\/details>";
}}},{"css":["html.wm-reading-survey-enabled {\n --reading-survey-font-size: 14px;\n --reading-survey-line-height: 22px; \n --reading-survey-vertical-margins: 7px;\n }\n\n html.wm-reading-survey-enabled .vector-body {\n font-size: var( --reading-survey-font-size );\n line-height: var(--reading-survey-line-height);\n }\n\n html.wm-reading-survey-transitions .vector-body {\n transition: font-size 300ms, line-height 300ms;\n }\n\n html.wm-reading-survey-enabled .vector-body p {\n margin-bottom: var(--reading-survey-vertical-margins );\n margin-top: var(--reading-survey-vertical-margins );\n }\n \n html.wm-reading-survey-transitions .vector-body p {\n transition: margin 300ms;\n }\n\n .reading-survey {\n position:fixed;\n bottom: 0;\n right: 80px;\n width:350px;\n\n background-color: #fff;\n border: 1px solid #a2a9b1;\n border-radius: 2px;\n padding: 24px 12px;\n\n font-size: 14px; \n }\n\n .reading-survey p {\n margin: 1em 0;\n }\n\n .reading-survey__title {\n font-weight: bold;\n font-size:18px; \n }\n\n .reading-survey__options {\n display: grid;\n grid-template-columns: 1fr 2fr 0.5fr;\n grid-gap: 16px;\n margin: 24px;\n }\n\n .reading-survey__buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n justify-content: space-around;\n }\n\n .reading-survey__buttons .cdx-button {\n flex-grow: 1;\n }"]}];});
// </syntaxhighlight>
