JarCasting
JarCasting JarCasting

grapesjs-style-filter

WebJar for grapesjs-style-filter

License

License

BSD 3-Clause
Categories

Categories

JavaScript Languages
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

grapesjs-style-filter
Last Version

Last Version

0.1.1
Release Date

Release Date
Type

Type

jar
Description

Description

grapesjs-style-filter
WebJar for grapesjs-style-filter
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/artf/grapesjs-style-filter

Download grapesjs-style-filter

Filename Size
grapesjs-style-filter-0.1.1.pom
grapesjs-style-filter-0.1.1.jar 15 KB
grapesjs-style-filter-0.1.1-sources.jar 22 bytes
grapesjs-style-filter-0.1.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-style-filter/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>grapesjs-style-filter</artifactId>
    <version>0.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-style-filter/
implementation 'org.webjars.npm:grapesjs-style-filter:0.1.1'
// https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-style-filter/
implementation ("org.webjars.npm:grapesjs-style-filter:0.1.1")
'org.webjars.npm:grapesjs-style-filter:jar:0.1.1'
<dependency org="org.webjars.npm" name="grapesjs-style-filter" rev="0.1.1">
  <artifact name="grapesjs-style-filter" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='grapesjs-style-filter', version='0.1.1')
)
libraryDependencies += "org.webjars.npm" % "grapesjs-style-filter" % "0.1.1"
[org.webjars.npm/grapesjs-style-filter "0.1.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

GrapesJS Style Filter

Add filter type input to the Style Manager in GrapesJS

Demo

GrapesJS

Requires GrapesJS v0.14.40 or higher

Summary

  • Plugin name: grapesjs-style-filter
  • StyleManager types
    • filter

Options

Option Description Default
inputFilterType Extend the filter type input, eg. { name: 'Filter type', defaults: 'blur', ... } {}
inputFilterStrength Extend the default filter strength input, eg. { name: 'Blur', defaults: 50, ... } {}
filterStrengthChange Customize the filter strength input when it should be updated. The option is a function, which receive the current object type and returns a new one type => type

Download

  • CDN
    • https://unpkg.com/grapesjs-style-filter
  • NPM
    • npm i grapesjs-style-filter
  • GIT
    • git clone https://github.com/artf/grapesjs-style-filter.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-style-filter.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var filterInput = {
    name: 'Filter',
    property: 'filter',
    type: 'filter', // <- the new type
    full: 1,
  };

  var editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-style-filter'],
      pluginsOpts: {
        'grapesjs-style-filter': { /* options */ }
      },
      // Use the type on init
      styleManager: {
        // ...
        sectors: [
          // ...
          {
            name: 'Extra',
            buildProps: ['filter', 'opacity', ...],
            properties: [ filterInput ],
          }
      },
  });

  // or add it to the StyleManager via API
  editor.StyleManager.addProperty('Extra', filterInput);
</script>

Modern javascript

import grapesjs from 'grapesjs';
import styleFilter from 'grapesjs-style-filter';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [styleFilter],
  pluginsOpts: {
    [styleFilter]: { /* options */ }
  }
  // or
  plugins: [
    editor => styleFilter(editor, { /* options */ }),
  ],
});
// Same StyleManager usage

Development

Clone the repository

$ git clone https://github.com/artf/grapesjs-style-filter.git
$ cd grapesjs-style-filter

Install dependencies

$ npm i

Start the dev server

$ npm start

License

BSD 3-Clause

Versions

Version
0.1.1