grapesjs-style-filter

WebJar for grapesjs-style-filter

License	BSD 3-Clause
Categories	JavaScript Languages
GroupId	org.webjars.npm
ArtifactId	grapesjs-style-filter
Last Version	0.1.1
Release Date	Dec 10, 2018
Type	jar
Description	grapesjs-style-filter WebJar for grapesjs-style-filter
Project URL	http://webjars.org
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

How to add to project

Apache Maven

<!-- 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>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-style-filter/
implementation 'org.webjars.npm:grapesjs-style-filter:0.1.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/grapesjs-style-filter/
implementation ("org.webjars.npm:grapesjs-style-filter:0.1.1")

Apache Buildr

'org.webjars.npm:grapesjs-style-filter:jar:0.1.1'

Apache Ivy

<dependency org="org.webjars.npm" name="grapesjs-style-filter" rev="0.1.1">
  <artifact name="grapesjs-style-filter" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='grapesjs-style-filter', version='0.1.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "grapesjs-style-filter" % "0.1.1"

Leiningen

[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

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 Dec 10, 2018