Add new property to background

[ronaldohoch]

Hello @artf!

I need to create a checkbox called "Parallax", it will set some background properties.
I have made some code and reached this:

The code used is bellow and you can put it after editor.init({})

        editor.StyleManager.addProperty('decorations', [{
          name: 'Parallax',
          property: '',
          type: 'radio',
          options:[{value:1,id:"ativar"},{value:0,id:"desativar"}],
          label:"Parallax",
          full: 1,
        }]);

        function changeProps(props){
          let keys = Object.keys(props);
            // if(styleUpdate.to.value==="ativar"){
              let model = editor.getSelected();
              let styles = model.getStyle();
              keys.forEach(key => {
                styles[key] = props[key];
                let select = $(`.gjs-sm-property.gjs-sm-property__${key} select`);
                if(select.length>1){
                  select[0].disabled = true;
                  let op = select.find(`option[value='${props[key]}']`)
                  op[0].selected = true;
                }
              });
              model.setStyle(styles);
        }

        editor.on("style:property:update",(styleUpdate)=>{
          // console.log("style:property:update",styleUpdate)
          if(styleUpdate.property.id==="Parallax" && styleUpdate.value!==""){
            let props={};
            if(styleUpdate.to.value==="ativar"){
              props = {
                'background-repeat': 'repeat',
                'background-position': 'center center',
                'background-attachment': 'fixed',
                'background-size': 'cover',
              }
              changeProps(props);
            }else{
              props = {
                'background-repeat': 'no-repeat',
                'background-position': 'left top',
                'background-attachment': 'scroll',
                'background-size': 'auto',
              }
              changeProps(props);
            }
          }
        });

I read from head to tail of StyleManager documentation and this was the easy way i find to do it. I don't know if it's the best way and also, this code don't work if there is no background css opened.

I would like to add this knew property inside background block.

[ronaldohoch]

I have made the same code used here: https://github.com/artf/grapesjs-style-bg/blob/master/src/index.js#L54