Browse Source

Update properties tests

up-style-manager
Artur Arseniev 5 years ago
parent
commit
8468897e8e
  1. 28
      docs/modules/Style-manager.md
  2. 2
      test/specs/style_manager/model/Properties.js

28
docs/modules/Style-manager.md

@ -562,6 +562,26 @@ Here an example below of a custom Style Manager UI rendered by using Vuetify (Vu
<demo-viewer value="46kf7brn" height="500" darkcode/> <demo-viewer value="46kf7brn" height="500" darkcode/>
From the example above you can notice how we subscribe to `style:custom` and update `this.sectors = sm.getSectors({ visible: true });` on each trigger, this is enough for the framework to update the rest of the template automatically.
In case you need to get/update the selected style targets directly, you can also rely on these APIs.
```js
// Get the module from the editor instance
const sm = editor.StyleManager;
// Select the first button in the current page
const wrapperCmp = editor.Pages.getSelected().getMainComponent();
const btnCmp = wrapperCmp.find('button')[0];
btnCmp && sm.select(btnCmp);
// You can also select as a target some CSS query
sm.select('.btn > span');
// Once the target is selected, you can check its current style object.
```
<!-- <!--
<style> <style>
.style-manager { .style-manager {
@ -824,16 +844,10 @@ Here an example below of a custom Style Manager UI rendered by using Vuetify (Vu
}, },
methods: { methods: {
handleCustom(props) { handleCustom(props) {
if (props?.container && !this.inserted) { if (props.container && !props.container.contains(this.$el)) {
this.inserted = 1;
props.container.appendChild(this.$el); props.container.appendChild(this.$el);
} }
this.sectors = sm.getSectors({ visible: true }); this.sectors = sm.getSectors({ visible: true });
console.log('handleCustom styles', {
sectors: this.sectors,
ins: this.inserted,
props,
})
}, },
} }
}); });

2
test/specs/style_manager/model/Properties.js

@ -763,7 +763,7 @@ describe('StyleManager properties logic', () => {
[propCTest]: 'valueC-new CC, valueC-1-ext, valueC-2-ext', [propCTest]: 'valueC-new CC, valueC-1-ext, valueC-2-ext',
}); });
// Check also the layers // Check also the layers
const layers = compTypeProp.getLayers().models; const layers = compTypeProp.getLayers();
expect(layers.length).toBe(3); expect(layers.length).toBe(3);
const [layer1, layer2, layer3] = layers; const [layer1, layer2, layer3] = layers;
expect(layer1.getValues()).toEqual({ expect(layer1.getValues()).toEqual({

Loading…
Cancel
Save