Jump to content

User:JDrewniak (WMF)/TypographySurvey.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
// <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>