Skip to content

Instantly share code, notes, and snippets.

@metapraveen

metapraveen/queryParamsToCSSProps.js

Last active September 18, 2018 21:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save metapraveen/c0a46b866faf6fdf011a5d6c6dc504aa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save metapraveen/c0a46b866faf6fdf011a5d6c6dc504aa to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. metapraveen revised this gist Sep 18, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions queryParamsToCSSProps.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    /**
    need to convert styles in query params to css props object
    // e.g. if URL is like
    http://localhost:8080/?header-color=0c1119
    &header-background-color=fff
  2. metapraveen revised this gist Sep 18, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions queryParamsToCSSProps.js
    View file
    Original file line number Diff line number Diff line change
    @@ -35,6 +35,7 @@ const cssProps = {
    import toPairs from 'lodash/toPairs';
    import camelCase from 'lodash/camelCase';

    //original function written
    function getCSSPropsFromQueryParams(queryParamsObject) {
    const validCssKeys = [
    'body-color',
  3. metapraveen renamed this gist Sep 18, 2018. 1 changed file with 0 additions and 0 deletions.
    0 functions as static mapper → queryParamsToCSSProps.js
    View file
    File renamed without changes.
  4. metapraveen created this gist Sep 18, 2018.
    147 changes: 147 additions & 0 deletions functions as static mapper
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,147 @@
    /**
    // e.g. if URL is like
    http://localhost:8080/?header-color=0c1119
    &header-background-color=fff
    &body-color=000
    &body-background-color=e5822d
    &button-color=909694
    &button-background-color=f442dc
    &button-hover-color=2de5a8
    &button-hover-background-color=fff

    // the cssProps injected will be like below
    const cssProps = {
    header: {
    color: '#0c1119',
    backgroundColor: '#fff'
    },
    body: {
    color: '#000',
    backgroundColor: '#e5822d'
    },
    submitButton: {
    color: '#909694',
    backgroundColor: '#f442dc',
    backgroundImage: 'none'
    },
    submitButtonHover: {
    color: '#2de5a8',
    backgroundColor: '#fff',
    backgroundImage: 'none'
    }
    };
    */

    import toPairs from 'lodash/toPairs';
    import camelCase from 'lodash/camelCase';

    function getCSSPropsFromQueryParams(queryParamsObject) {
    const validCssKeys = [
    'body-color',
    'body-background-color',
    'header-color',
    'header-background-color',
    'button-color',
    'button-background-color',
    'button-hover-color',
    'button-hover-background-color'
    ];

    return toPairs(queryParamsObject).reduce(
    (acc, [key, value]) => {
    if (validCssKeys.includes(key)) {
    // add "#" to the color values
    const cssValue = `#${queryParamsObject[key]}`;

    switch (true) {
    case key.toLocaleLowerCase().includes('header'):
    // remove "header-" from the key
    acc.header[camelCase(key.substring(7))] = cssValue;
    break;
    case key.toLocaleLowerCase().includes('body'):
    // remove "body-" from the key
    acc.body[camelCase(key.substring(5))] = cssValue;
    break;
    case key.toLocaleLowerCase().includes('button-hover'):
    // remove "button-hover-"
    acc.submitButtonHover[camelCase(key.substring(13))] = cssValue;
    // submit button has a background image which prevents effect of background color
    if (key === 'button-hover-background-color') {
    acc.submitButtonHover.backgroundImage = 'none';
    }
    break;
    default:
    // remove "button-" from the key
    acc.submitButton[camelCase(key.substring(7))] = cssValue;
    // submit button has a background image which prevents effect of background color
    if (key === 'button-background-color') {
    acc.submitButton.backgroundImage = 'none';
    }
    }
    }
    return acc;
    },
    { header: {}, body: {}, submitButton: {}, submitButtonHover: {} }
    );
    }

    //refactored function
    function getCSSPropsFromQueryParams(queryParamsObject) {
    return {
    header: {
    ...extractUrlParamToObj('header-color', queryParamsObject, value => ({
    color: `#${value}`
    })),
    ...extractUrlParamToObj(
    'header-background-color',
    queryParamsObject,
    value => ({ backgroundColor: `#${value}` })
    )
    },
    body: {
    ...extractUrlParamToObj('body-color', queryParamsObject, value => ({
    color: `#${value}`
    })),
    ...extractUrlParamToObj(
    'body-background-color',
    queryParamsObject,
    value => ({ backgroundColor: `#${value}` })
    )
    },
    submitButton: {
    ...extractUrlParamToObj('button-color', queryParamsObject, value => ({
    color: `#${value}`
    })),
    ...extractUrlParamToObj(
    'button-background-color',
    queryParamsObject,
    value => ({ backgroundColor: `#${value}`, backgroundImage: 'none' })
    )
    },
    submitButtonHover: {
    ...extractUrlParamToObj(
    'button-hover-color',
    queryParamsObject,
    value => ({ color: `#${value}` })
    ),
    ...extractUrlParamToObj(
    'button-hover-background-color',
    queryParamsObject,
    value => ({ backgroundColor: `#${value}`, backgroundImage: 'none' })
    )
    }
    };
    }

    /**
    * check if the value for the given key in the queryParamsObject
    * and call the static mapper passed
    * @param {string} queryParam
    * @param {object} queryParamsObject
    * @param {Function} staticMapper
    * @returns {object}
    */
    function extractUrlParamToObj(queryParam, queryParamsObject, staticMapper) {
    if (queryParamsObject[queryParam])
    return staticMapper(queryParamsObject[queryParam]);
    }