1 |
|
2 |
|
3 | import { assign } from './utils';
|
4 | import { WidgetModel, WidgetView } from './widget';
|
5 |
|
6 |
|
7 |
|
8 | const css_properties = {
|
9 | align_content: null,
|
10 | align_items: null,
|
11 | align_self: null,
|
12 | border_top: null,
|
13 | border_right: null,
|
14 | border_bottom: null,
|
15 | border_left: null,
|
16 | bottom: null,
|
17 | display: null,
|
18 | flex: null,
|
19 | flex_flow: null,
|
20 | height: null,
|
21 | justify_content: null,
|
22 | justify_items: null,
|
23 | left: null,
|
24 | margin: null,
|
25 | max_height: null,
|
26 | max_width: null,
|
27 | min_height: null,
|
28 | min_width: null,
|
29 | overflow: null,
|
30 | order: null,
|
31 | padding: null,
|
32 | right: null,
|
33 | top: null,
|
34 | visibility: null,
|
35 | width: null,
|
36 |
|
37 | object_fit: null,
|
38 | object_position: null,
|
39 |
|
40 | grid_auto_columns: null,
|
41 | grid_auto_flow: null,
|
42 | grid_auto_rows: null,
|
43 | grid_gap: null,
|
44 | grid_template_rows: null,
|
45 | grid_template_columns: null,
|
46 | grid_template_areas: null,
|
47 |
|
48 | grid_row: null,
|
49 | grid_column: null,
|
50 | grid_area: null,
|
51 | };
|
52 | export class LayoutModel extends WidgetModel {
|
53 | defaults() {
|
54 | return assign(super.defaults(), {
|
55 | _model_name: 'LayoutModel',
|
56 | _view_name: 'LayoutView',
|
57 | }, css_properties);
|
58 | }
|
59 | }
|
60 | export class LayoutView extends WidgetView {
|
61 | |
62 |
|
63 |
|
64 | initialize(parameters) {
|
65 | this._traitNames = [];
|
66 | super.initialize(parameters);
|
67 |
|
68 | for (const key of Object.keys(css_properties)) {
|
69 | this.registerTrait(key);
|
70 | }
|
71 | }
|
72 | |
73 |
|
74 |
|
75 |
|
76 | registerTrait(trait) {
|
77 | this._traitNames.push(trait);
|
78 |
|
79 | this.listenTo(this.model, 'change:' + trait, (model, value) => {
|
80 | this.handleChange(trait, value);
|
81 | });
|
82 |
|
83 | this.handleChange(trait, this.model.get(trait));
|
84 | }
|
85 | |
86 |
|
87 |
|
88 |
|
89 |
|
90 | css_name(trait) {
|
91 | return trait.replace(/_/g, '-');
|
92 | }
|
93 | |
94 |
|
95 |
|
96 | handleChange(trait, value) {
|
97 |
|
98 | const parent = this.options.parent;
|
99 | if (parent) {
|
100 | if (value === null) {
|
101 | parent.el.style.removeProperty(this.css_name(trait));
|
102 | }
|
103 | else {
|
104 | parent.el.style.setProperty(this.css_name(trait), value);
|
105 | }
|
106 | }
|
107 | else {
|
108 | console.warn('Style not applied because a parent view does not exist');
|
109 | }
|
110 | }
|
111 | |
112 |
|
113 |
|
114 | unlayout() {
|
115 | const parent = this.options.parent;
|
116 | this._traitNames.forEach((trait) => {
|
117 | if (parent) {
|
118 | parent.el.style.removeProperty(this.css_name(trait));
|
119 | }
|
120 | else {
|
121 | console.warn('Style not removed because a parent view does not exist');
|
122 | }
|
123 | }, this);
|
124 | }
|
125 | }
|
126 |
|
\ | No newline at end of file |