[Question] adding filter to styleManager

shlomoko commented 6 years ago

Hi, I am trying to add a filter property to Styles. The problem that I am having is that the property demands 2 arguments: 1. The type of filter 2. The strength. e.g filter: blur(10%). the problem I am having is that when added to the css file I am getting- filter: blur 10%. I understand that I should be using property.functionName to fix this, but cannot figure out how (there appear to be no examples of this in the existing libraries).

The code I have is:

   sm.addProperty('Extra', {
      name: 'Filter',
      property: 'filter',
      type: 'stack',
      properties: [{
        property: 'filter_type',
        type: 'select',
        defaults: 'none',
        list: [{ value: 'none' }, { value: 'blur'} ,{ value: 'brightness'},{ value: 'contrast'} ,{ value: 'drop-shadow'} ,{ value: 'grayscale'} ,{ value: 'hue-rotate'} ,{ value: 'invert'} ,{ value: 'opacity'} ,{ value: 'saturate'} ,{ value: 'sepia'} ,{ value: 'url'}],
      },{
        property: 'filter_strength',
        type: 'slider',
        name: 'Strength',
        units: ['%'],
        defaults: 100,
        step: 1,
        max: 100,
        min:0,
      }],
      functionName: () => {

      }

    });

Thank you

artf commented 6 years ago

Hi @shlomoko to make the filter work properly via stack type you have to add a custom style manager type, because, as you already noticed, you have to deal with dynamic stuff (eg. functionName). Unfortunately, we didn't document that part yet and the only example we have is grapesjs-style-gradient. Extending the stack property might be even a bit harder (probably will require also some enhancement on the current API), so I'll try to provide an example of this case.

artf commented 5 years ago

Hi @shlomoko I've created a plugin with the filter type input https://github.com/artf/grapesjs-style-filter You can use it with the latest release https://github.com/artf/grapesjs/releases/tag/v0.14.40

lock[bot] commented 4 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

GrapesJS / grapesjs

[Question] adding filter to styleManager #1475