8

JavaScript Editor from Scratch to live-edit CSS Values in your Browser

 3 years ago
source link: https://dev.to/typo3freelancer/javascript-editor-from-scratch-to-live-edit-css-values-in-your-browser-244
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for JavaScript Editor from Scratch to live-edit CSS Values in your Browser

JavaScript Editor from Scratch to live-edit CSS Values in your Browser

Mar 18

・3 min read

Hello friends of JavaScript and CSS! Today I needed a small editor that allows me to conveniently edit the CSS :root variables of my theme in the browser. So I created this pen, and am now developing a more complex editor from it.

I'm happy to share the basic code with you guys. Feel free to do what you want with it, or improve the JavaScript code! By all means, let me know how you like the script, and write a comment!

What does it do?

The script creates a little editor widget based on the options array you must provide. It allows you to change the value of the :root CSS variable in your Stylesheet after changing a value in realtime.

What you need

At first you need some CSS code with your :root variables.

// Create some custom root variables
:root{
  --boxcolor: orange;
  --textcolor: #fff;
  --padding: 20px;
  --margin: 20px;
  --fontsize-h2: 30px;
  --fontsize-p: 18px;
}

// Use the variables for your CSS classes etc.

h2,p{
  color: var(--textcolor);
}

h2{
  font-size: var(--fontsize-h2);
}

p{
  font-size: var(--fontsize-p);
}

.box{
  margin: var(--margin);
  padding: var(--padding);
  background-color: var(--boxcolor);
}
Enter fullscreen modeExit fullscreen mode

Some HTML Markup

This is the most simple part of this tutorial. But of course it can be more complex. Imagine making a full website editable like this!

<div class="box">
<h2>JavaScript CSS Variable Editor</h2>
<p>Lorem Ipsum dolor paragraph is nice yeah...</p>
</div>

<div class="box">
<h2>Text Primary Color</h2>
<p>Lorem Ipsum dolor paragraph is nice yeah...</p>
</div>

<div class="box">
<h2>Text Primary Color</h2>
<p>Lorem Ipsum dolor paragraph is nice yeah...</p>
</div>
Enter fullscreen modeExit fullscreen mode

The JavaScript

The JavaSript does the magic.

document.addEventListener('DOMContentLoaded',function(){

    // Entries for the Settings Widget
    let options = [
        {
            label: 'Text Color',
            type: 'color',
            property: 'textcolor',
            default: '#fff'
        },
        {
            label: 'Box Color',
            type: 'color',
            property: 'boxcolor',
            default: 'orange'
        },
        {
            label: 'Padding',
            type: 'range',
            property: 'padding',
            attributes: {min: "20", max: "90"},
            default: '20'
        },
        {
            label: 'Margin',
            type: 'number',
            property: 'margin',
            attributes: {min: "20", max: "90"},
            default: '20'
        },
        {
            label: 'Font Size H2',
            type: 'range',
            property: 'fontsize-h2',
            attributes: {min: "20", max: "90"},
            default: '20'
        },
        {
            label: 'Font Size Paragraph',
            type: 'range',
            property: 'fontsize-p',
            attributes: {min: "18", max: "30"},
            default: '14'
        }
    ];

    let styler_Editor = document.createElement('div');
    styler_Editor.classList.add('styler-editor');

    document.querySelector('body').appendChild(styler_Editor);

    function setAttributes(el, attrs) {
      for(var key in attrs) {
        el.setAttribute(key, attrs[key]);
      }
    }

    options.forEach((option, i) => {
        let optionLabel = document.createElement('label');
        optionLabel.innerHTML = option.label;

        let optionField = document.createElement('input');
        optionField.type = option.type;
        optionField.value = option.default;
        setAttributes(optionField,option.attributes);
        styler_Editor.appendChild(optionLabel);
        styler_Editor.appendChild(optionField);
        optionField.addEventListener('change',function(){
           switch(option.type){
             case 'range':
               document.documentElement.style.setProperty('--'+option.property,optionField.value+'px');
               break;
             case 'number':
               document.documentElement.style.setProperty('--'+option.property,optionField.value+'px');
               break;
             case 'color':
               document.documentElement.style.setProperty('--'+option.property,optionField.value);
               break;
             case 'text':
               document.documentElement.style.setProperty('--'+option.property,optionField.value);
               break;
           }

        });
    });

});
Enter fullscreen modeExit fullscreen mode

And finally the CodePen

Here's the working example for you to play with. I do not know if it supports all browsers yet. This example has been tested with Google Chrome and Brave on a Macbook.

You might be interested in this...

Support my work:
► https://www.paypal.com/paypalme/typo3freelancer
► https://www.patreon.com/koehlersimon

Follow me:
► https://github.com/koehlersimon
► https://www.linkedin.com/in/typo3-freelancer/
► https://bitbucket.org/typo3freelancer/
► https://twitter.com/koehlersimon
► https://www.instagram.com/typo3freelancer/

Learn TYPO3 with the Video Training for Version 9 LTS of Wolfgang Wagner:
→ https://www.digistore24.com/redir/246076/GOCHILLA/

Your TYPO3 Developer & Freelancer - let's start a great TYPO3 project together!
→ https://simon-koehler.com/en

TYPO3 Slug Editor for SEO Gurus:
→ https://extensions.typo3.org/extension/slug

TYPO3 Timeline Extension for frontend timelines:
→ https://extensions.typo3.org/extension/ce_timeline

TYPO3 Font Awesome Extension for awesome icons:
→ https://extensions.typo3.org/extension/faicon

USA Hosting with Bluehost:
→ https://www.bluehost.com/track/simonkoehler

Island Hosting with Orange Website:
→ https://affiliate.orangewebsite.com/idevaffiliate.php?id=10827_0_3_1


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK