tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add remove method to CssComposer API

pull/3905/head
Artur Arseniev 5 years ago
parent
cf4d2af896
commit
be118f8088
3 changed files with 137 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      docs/api/canvas.md
  2. 201
      docs/api/css_composer.md
  3. 116
      src/css_composer/index.js

4
docs/api/canvas.md
View File

@ -34,6 +34,8 @@ const canvas = editor.Canvas;
[Component]: component.html [Component]: component.html
[Frame]: frame.html
## getConfig ## getConfig
Get the configuration object Get the configuration object
@ -218,7 +220,7 @@ canvas.addFrame({
}); });
``` ```
Returns **Frame** Returns **[Frame]**
[1]: https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js [1]: https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js

201
docs/api/css_composer.md
View File

@ -16,206 +16,137 @@ const editor = grapesjs.init({
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
```js ```js
const cssComposer = editor.CssComposer; const css = editor.Css;
``` ```
* [load][2] * [setRule][2]
* [store][3] * [getRule][3]
* [add][4] * [getRules][4]
* [get][5] * [remove][5]
* [getAll][6] * [clear][6]
* [clear][7]
* [setRule][8]
* [getRule][9]
## load [CssRule]: css_rule.html
Load data from the passed object, if the object is empty will try to fetch them
autonomously from the storage manager.
The fetched data will be added to the collection
### Parameters
* `data` **[Object][10]** Object of data to load
Returns **[Object][10]** Loaded rules
## store
Store data to the selected storage
### Parameters
* `noStore` **[Boolean][11]** If true, won't store
Returns **[Object][10]** Data to store
## add
Add new rule to the collection, if not yet exists with the same selectors
### Parameters
* `selectors` **[Array][12]\<Selector>** Array of selectors
* `state` **[String][13]** Css rule state
* `width` **[String][13]** For which device this style is oriented
* `opts` **[Object][10]** Options for the add of new rule (optional, default `{}`)
* `addOpts` (optional, default `{}`)
* `props` **[Object][10]** Other props for the rule
### Examples
```javascript
var sm = editor.SelectorManager;
var sel1 = sm.add('myClass1');
var sel2 = sm.add('myClass2');
var rule = cssComposer.add([sel1, sel2], 'hover');
rule.set('style', {
width: '100px',
color: '#fff',
});
```
Returns **Model**
## get
Get the rule
### Parameters
* `selectors` **([String][13] | [Array][12]\<Selector>)** Array of selectors or selector string, eg `.myClass1.myClass2`
* `state` **[String][13]** Css rule state, eg. 'hover'
* `width` **[String][13]** Media rule value, eg. '(max-width: 992px)'
* `ruleProps` **[Object][10]** Other rule props
### Examples
```javascript
const sm = editor.SelectorManager;
const sel1 = sm.add('myClass1');
const sel2 = sm.add('myClass2');
const rule = cssComposer.get([sel1, sel2], 'hover', '(max-width: 992px)');
// Update the style
rule.set('style', {
width: '300px',
color: '#000',
});
```
Returns **(Model | null)**
## getAll
Get the collection of rules
Returns **Collection**
## clear
Remove all rules
### Parameters
* `opts` (optional, default `{}`)
Returns **this**
## setRule ## setRule
Add/update the CSS rule with a generic selector Add/update the CssRule.
### Parameters ### Parameters
* `selectors` **[string][13]** Selector, eg. '.myclass' * `selectors` **[string][7]** Selector, eg. `.myclass`
* `style` **[Object][10]** Style properties and values * `style` **[Object][8]** Style properties and values
* `opts` **[Object][10]** Additional properties (optional, default `{}`) * `opts` **[Object][8]** Additional properties (optional, default `{}`)
* `opts.atRuleType` **[String][13]** At-rule type, eg. 'media' (optional, default `''`) * `opts.atRuleType` **[String][7]** At-rule type, eg. 'media' (optional, default `''`)
* `opts.atRuleParams` **[String][13]** At-rule parameters, eg. '(min-width: 500px)' (optional, default `''`) * `opts.atRuleParams` **[String][7]** At-rule parameters, eg. `(min-width: 500px)` (optional, default `''`)
### Examples ### Examples
```javascript ```javascript
// Simple class-based rule // Simple class-based rule
const rule = cc.setRule('.class1.class2', { color: 'red' }); const rule = css.setRule('.class1.class2', { color: 'red' });
console.log(rule.toCSS()) // output: .class1.class2 { color: red } console.log(rule.toCSS()) // output: .class1.class2 { color: red }
// With state and other mixed selector // With state and other mixed selector
const rule = cc.setRule('.class1.class2:hover, div#myid', { color: 'red' }); const rule = css.setRule('.class1.class2:hover, div#myid', { color: 'red' });
// output: .class1.class2:hover, div#myid { color: red } // output: .class1.class2:hover, div#myid { color: red }
// With media // With media
const rule = cc.setRule('.class1:hover', { color: 'red' }, { const rule = css.setRule('.class1:hover', { color: 'red' }, {
atRuleType: 'media', atRuleType: 'media',
atRuleParams: '(min-width: 500px)', atRuleParams: '(min-width: 500px)',
}); });
// output: @media (min-width: 500px) { .class1:hover { color: red } } // output: @media (min-width: 500px) { .class1:hover { color: red } }
``` ```
Returns **CssRule** The new/updated rule Returns **[CssRule]** The new/updated CssRule
## getRule ## getRule
Get the CSS rule by a generic selector Get the CssRule.
### Parameters ### Parameters
* `selectors` **[string][13]** Selector, eg. '.myclass:hover' * `selectors` **[String][7]** Selector string, eg. `.myclass:hover`
* `opts` (optional, default `{}`) * `opts` **[Object][8]** Additional properties (optional, default `{}`)
* `opts.atRuleType` **[String][7]** At-rule type, eg. 'media' (optional, default `''`)
* `opts.atRuleParams` **[String][7]** At-rule parameters, eg. '(min-width: 500px)' (optional, default `''`)
### Examples ### Examples
```javascript ```javascript
const rule = cc.getRule('.myclass1:hover'); const rule = css.getRule('.myclass1:hover');
const rule2 = cc.getRule('.myclass1:hover, div#myid'); const rule2 = css.getRule('.myclass1:hover, div#myid');
const rule3 = cc.getRule('.myclass1', { const rule3 = css.getRule('.myclass1', {
atRuleType: 'media', atRuleType: 'media',
atRuleParams: '(min-width: 500px)', atRuleParams: '(min-width: 500px)',
}); });
``` ```
Returns **CssRule** Returns **[CssRule]**
## getRules ## getRules
Find rules, in different states (eg. like `:hover`) and media queries, matching the selector. Get all rules or filtered by a matching selector.
### Parameters ### Parameters
* `selector` **[string][13]** Selector, eg. '.myclass' * `selector` **[String][7]** Selector, eg. '.myclass' (optional, default `''`)
### Examples ### Examples
```javascript ```javascript
// Common scenario, take all the component specific rules // Common scenario, take all the component specific rules
const id = someComponent.getId(); const id = someComponent.getId();
const rules = cc.getRules(`#${id}`); const rules = css.getRules(`#${id}`);
console.log(rules.map(rule => rule.toCSS())) console.log(rules.map(rule => rule.toCSS()))
``` ```
Returns **[Array][12]\<CssRule>** Returns **[Array][9]<[CssRule]>**
[1]: https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js ## remove
Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like `@media`)
[2]: #load ### Parameters
* `rule` **([String][7] | [CssRule] | [Array][9]<[CssRule]>)** CssRule or matching selector.
[3]: #store ### Examples
[4]: #add ```javascript
// Remove by CssRule
const toRemove = css.getRules('.my-cls');
css.remove(toRemove);
// Remove by selector
css.remove('.my-cls-2');
```
[5]: #get Returns **[Array][9]<[CssRule]>** Removed rules
## clear
Remove all rules
### Parameters
* `opts` (optional, default `{}`)
Returns **this**
[1]: https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js
[6]: #getall [2]: #setrule
[7]: #clear [3]: #getrule
[8]: #setrule [4]: #getrules
[9]: #getrule [5]: #remove
[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [6]: #clear
[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

116
src/css_composer/index.js
View File

@ -12,17 +12,16 @@
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
* *
* ```js * ```js
* const cssComposer = editor.CssComposer; * const css = editor.Css;
* ``` * ```
* *
* * [load](#load)
* * [store](#store)
* * [add](#add)
* * [get](#get)
* * [getAll](#getall)
* * [clear](#clear)
* * [setRule](#setrule) * * [setRule](#setrule)
* * [getRule](#getrule) * * [getRule](#getrule)
* * [getRules](#getrules)
* * [remove](#remove)
* * [clear](#clear)
*
* [CssRule]: css_rule.html
* *
* @module CssComposer * @module CssComposer
*/ */
@ -114,6 +113,7 @@ export default () => {
* The fetched data will be added to the collection * The fetched data will be added to the collection
* @param {Object} data Object of data to load * @param {Object} data Object of data to load
* @return {Object} Loaded rules * @return {Object} Loaded rules
* @private
*/ */
load(data) { load(data) {
var d = data || ''; var d = data || '';
@ -145,6 +145,7 @@ export default () => {
* Store data to the selected storage * Store data to the selected storage
* @param {Boolean} noStore If true, won't store * @param {Boolean} noStore If true, won't store
* @return {Object} Data to store * @return {Object} Data to store
* @private
*/ */
store(noStore) { store(noStore) {
if (!c.stm) return; if (!c.stm) return;
@ -165,6 +166,7 @@ export default () => {
* @param {Object} props Other props for the rule * @param {Object} props Other props for the rule
* @param {Object} opts Options for the add of new rule * @param {Object} opts Options for the add of new rule
* @return {Model} * @return {Model}
* @private
* @example * @example
* var sm = editor.SelectorManager; * var sm = editor.SelectorManager;
* var sel1 = sm.add('myClass1'); * var sel1 = sm.add('myClass1');
@ -205,6 +207,7 @@ export default () => {
* @param {String} width Media rule value, eg. '(max-width: 992px)' * @param {String} width Media rule value, eg. '(max-width: 992px)'
* @param {Object} ruleProps Other rule props * @param {Object} ruleProps Other rule props
* @return {Model|null} * @return {Model|null}
* @private
* @example * @example
* const sm = editor.SelectorManager; * const sm = editor.SelectorManager;
* const sel1 = sm.add('myClass1'); * const sel1 = sm.add('myClass1');
@ -231,23 +234,10 @@ export default () => {
); );
}, },
/**
* Get the collection of rules
* @return {Collection}
* */
getAll() { getAll() {
return rules; return rules;
}, },
/**
* Remove all rules
* @return {this}
*/
clear(opts = {}) {
this.getAll().reset(null, opts);
return this;
},
/** /**
* Add a raw collection of rule objects * Add a raw collection of rule objects
* This method overrides styles, in case, of already defined rule * This method overrides styles, in case, of already defined rule
@ -301,22 +291,22 @@ export default () => {
}, },
/** /**
* Add/update the CSS rule with a generic selector * Add/update the CssRule.
* @param {string} selectors Selector, eg. '.myclass' * @param {String} selectors Selector string, eg. `.myclass`
* @param {Object} style Style properties and values * @param {Object} style Style properties and values
* @param {Object} [opts={}] Additional properties * @param {Object} [opts={}] Additional properties
* @param {String} [opts.atRuleType=''] At-rule type, eg. 'media' * @param {String} [opts.atRuleType=''] At-rule type, eg. `media`
* @param {String} [opts.atRuleParams=''] At-rule parameters, eg. '(min-width: 500px)' * @param {String} [opts.atRuleParams=''] At-rule parameters, eg. `(min-width: 500px)`
* @return {CssRule} The new/updated rule * @returns {[CssRule]} The new/updated CssRule
* @example * @example
* // Simple class-based rule * // Simple class-based rule
* const rule = cc.setRule('.class1.class2', { color: 'red' }); * const rule = css.setRule('.class1.class2', { color: 'red' });
* console.log(rule.toCSS()) // output: .class1.class2 { color: red } * console.log(rule.toCSS()) // output: .class1.class2 { color: red }
* // With state and other mixed selector * // With state and other mixed selector
* const rule = cc.setRule('.class1.class2:hover, div#myid', { color: 'red' }); * const rule = css.setRule('.class1.class2:hover, div#myid', { color: 'red' });
* // output: .class1.class2:hover, div#myid { color: red } * // output: .class1.class2:hover, div#myid { color: red }
* // With media * // With media
* const rule = cc.setRule('.class1:hover', { color: 'red' }, { * const rule = css.setRule('.class1:hover', { color: 'red' }, {
* atRuleType: 'media', * atRuleType: 'media',
* atRuleParams: '(min-width: 500px)', * atRuleParams: '(min-width: 500px)',
* }); * });
@ -340,15 +330,16 @@ export default () => {
}, },
/** /**
* Get the CSS rule by a generic selector * Get the CssRule.
* @param {string} selectors Selector, eg. '.myclass:hover' * @param {String} selectors Selector string, eg. `.myclass:hover`
* @param {String} [opts.atRuleType=''] At-rule type, eg. 'media' * @param {Object} [opts={}] Additional properties
* @param {String} [opts.atRuleType=''] At-rule type, eg. `media`
* @param {String} [opts.atRuleParams=''] At-rule parameters, eg. '(min-width: 500px)' * @param {String} [opts.atRuleParams=''] At-rule parameters, eg. '(min-width: 500px)'
* @return {CssRule} * @returns {[CssRule]}
* @example * @example
* const rule = cc.getRule('.myclass1:hover'); * const rule = css.getRule('.myclass1:hover');
* const rule2 = cc.getRule('.myclass1:hover, div#myid'); * const rule2 = css.getRule('.myclass1:hover, div#myid');
* const rule3 = cc.getRule('.myclass1', { * const rule3 = css.getRule('.myclass1', {
* atRuleType: 'media', * atRuleType: 'media',
* atRuleParams: '(min-width: 500px)', * atRuleParams: '(min-width: 500px)',
* }); * });
@ -369,17 +360,20 @@ export default () => {
}, },
/** /**
* Find rules, in different states (eg. like `:hover`) and media queries, matching the selector. * Get all rules or filtered by a matching selector.
* @param {string} selector Selector, eg. '.myclass' * @param {String} [selector=''] Selector, eg. `.myclass`
* @returns {Array<CssRule>} * @returns {Array<[CssRule]>}
* @example * @example
* // Common scenario, take all the component specific rules * // Take all the component specific rules
* const id = someComponent.getId(); * const id = someComponent.getId();
* const rules = cc.getRules(`#${id}`); * const rules = css.getRules(`#${id}`);
* console.log(rules.map(rule => rule.toCSS())) * console.log(rules.map(rule => rule.toCSS()))
* // All rules in the project
* console.log(css.getRules())
*/ */
getRules(selector) { getRules(selector) {
const rules = this.getAll(); const rules = this.getAll();
if (!selector) return [...rules.models];
const result = rules.filter( const result = rules.filter(
r => r.getSelectors().getFullString() === selector r => r.getSelectors().getFullString() === selector
); );
@ -394,8 +388,8 @@ export default () => {
* @return {CssRule} The new/updated rule * @return {CssRule} The new/updated rule
* @private * @private
* @example * @example
* const rule = cc.setIdRule('myid', { color: 'red' }); * const rule = css.setIdRule('myid', { color: 'red' });
* const ruleHover = cc.setIdRule('myid', { color: 'blue' }, { state: 'hover' }); * const ruleHover = css.setIdRule('myid', { color: 'blue' }, { state: 'hover' });
* // This will add current CSS: * // This will add current CSS:
* // #myid { color: red } * // #myid { color: red }
* // #myid:hover { color: blue } * // #myid:hover { color: blue }
@ -418,8 +412,8 @@ export default () => {
* @return {CssRule} * @return {CssRule}
* @private * @private
* @example * @example
* const rule = cc.getIdRule('myid'); * const rule = css.getIdRule('myid');
* const ruleHover = cc.setIdRule('myid', { state: 'hover' }); * const ruleHover = css.setIdRule('myid', { state: 'hover' });
*/ */
getIdRule(name, opts = {}) { getIdRule(name, opts = {}) {
const { mediaText } = opts; const { mediaText } = opts;
@ -437,8 +431,8 @@ export default () => {
* @return {CssRule} The new/updated rule * @return {CssRule} The new/updated rule
* @private * @private
* @example * @example
* const rule = cc.setClassRule('myclass', { color: 'red' }); * const rule = css.setClassRule('myclass', { color: 'red' });
* const ruleHover = cc.setClassRule('myclass', { color: 'blue' }, { state: 'hover' }); * const ruleHover = css.setClassRule('myclass', { color: 'blue' }, { state: 'hover' });
* // This will add current CSS: * // This will add current CSS:
* // .myclass { color: red } * // .myclass { color: red }
* // .myclass:hover { color: blue } * // .myclass:hover { color: blue }
@ -460,8 +454,8 @@ export default () => {
* @return {CssRule} * @return {CssRule}
* @private * @private
* @example * @example
* const rule = cc.getClassRule('myclass'); * const rule = css.getClassRule('myclass');
* const ruleHover = cc.getClassRule('myclass', { state: 'hover' }); * const ruleHover = css.getClassRule('myclass', { state: 'hover' });
*/ */
getClassRule(name, opts = {}) { getClassRule(name, opts = {}) {
const state = opts.state || ''; const state = opts.state || '';
@ -470,6 +464,32 @@ export default () => {
return selector && this.get(selector, state, media); return selector && this.get(selector, state, media);
}, },
/**
* Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like `@media`)
* @param {String|[CssRule]|Array<[CssRule]>} rule CssRule or matching selector.
* @return {Array<[CssRule]>} Removed rules
* @example
* // Remove by CssRule
* const toRemove = css.getRules('.my-cls');
* css.remove(toRemove);
* // Remove by selector
* css.remove('.my-cls-2');
*/
remove(rule) {
const toRemove = isString(rule) ? this.getRules(rule) : rule;
const result = this.getAll().remove(toRemove);
return isArray(result) ? result : [result];
},
/**
* Remove all rules
* @return {this}
*/
clear(opts = {}) {
this.getAll().reset(null, opts);
return this;
},
getComponentRules(cmp, opts = {}) { getComponentRules(cmp, opts = {}) {
let { state, mediaText, current } = opts; let { state, mediaText, current } = opts;
if (current) { if (current) {

Write Preview
Loading…
Cancel
Save