@cntrl-site/sdk-nextjs 0.2.9 → 0.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.idea/workspace.xml +236 -0
- package/cntrl-site-sdk-nextjs-0.2.10.tgz +0 -0
- package/lib/components/Article.js +1 -5
- package/lib/components/Item.js +16 -3
- package/lib/components/LinkWrapper.js +19 -1
- package/lib/components/Section.js +13 -1
- package/package.json +2 -2
- package/src/components/Article.tsx +1 -4
- package/src/components/Item.tsx +18 -4
- package/src/components/LinkWrapper.tsx +19 -2
- package/src/components/Section.tsx +16 -2
- package/.idea/inspectionProfiles/Project_Default.xml +0 -15
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="ChangeListManager">
|
|
4
|
+
<list default="true" id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="CNTRL-694 added code styling and version bump" />
|
|
5
|
+
<option name="SHOW_DIALOG" value="false" />
|
|
6
|
+
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
|
7
|
+
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
|
8
|
+
<option name="LAST_RESOLUTION" value="IGNORE" />
|
|
9
|
+
</component>
|
|
10
|
+
<component name="Git.Settings">
|
|
11
|
+
<option name="RECENT_BRANCH_BY_REPOSITORY">
|
|
12
|
+
<map>
|
|
13
|
+
<entry key="$PROJECT_DIR$" value="main" />
|
|
14
|
+
</map>
|
|
15
|
+
</option>
|
|
16
|
+
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
|
17
|
+
</component>
|
|
18
|
+
<component name="MarkdownSettingsMigration">
|
|
19
|
+
<option name="stateVersion" value="1" />
|
|
20
|
+
</component>
|
|
21
|
+
<component name="ProjectId" id="2H4nx2LrD2TTrbJMopYKifu02PK" />
|
|
22
|
+
<component name="ProjectViewState">
|
|
23
|
+
<option name="hideEmptyMiddlePackages" value="true" />
|
|
24
|
+
<option name="showLibraryContents" value="true" />
|
|
25
|
+
</component>
|
|
26
|
+
<component name="PropertiesComponent"><![CDATA[{
|
|
27
|
+
"keyToString": {
|
|
28
|
+
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
|
29
|
+
"RunOnceActivity.ShowReadmeOnStart": "true",
|
|
30
|
+
"WebServerToolWindowFactoryState": "false",
|
|
31
|
+
"last_opened_file_path": "/Users/admin/Documents/CNTRL/sdk-nextjs",
|
|
32
|
+
"nodejs_package_manager_path": "npm",
|
|
33
|
+
"ts.external.directory.path": "/Users/admin/Documents/CNTRL/sdk-nextjs/node_modules/typescript/lib",
|
|
34
|
+
"vue.rearranger.settings.migration": "true"
|
|
35
|
+
}
|
|
36
|
+
}]]></component>
|
|
37
|
+
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
|
|
38
|
+
<component name="TaskManager">
|
|
39
|
+
<task active="true" id="Default" summary="Default task">
|
|
40
|
+
<changelist id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="" />
|
|
41
|
+
<created>1667553465933</created>
|
|
42
|
+
<option name="number" value="Default" />
|
|
43
|
+
<option name="presentableId" value="Default" />
|
|
44
|
+
<updated>1667553465933</updated>
|
|
45
|
+
<workItem from="1667553467855" duration="59000" />
|
|
46
|
+
<workItem from="1667577252000" duration="8061000" />
|
|
47
|
+
<workItem from="1667926766782" duration="2182000" />
|
|
48
|
+
<workItem from="1668162212487" duration="28710000" />
|
|
49
|
+
<workItem from="1669397663981" duration="8121000" />
|
|
50
|
+
<workItem from="1669630429786" duration="5568000" />
|
|
51
|
+
<workItem from="1669712625667" duration="100000" />
|
|
52
|
+
<workItem from="1670846885306" duration="13649000" />
|
|
53
|
+
</task>
|
|
54
|
+
<task id="LOCAL-00001" summary="CNTRL-484 - added embed vimeo video">
|
|
55
|
+
<created>1667586762678</created>
|
|
56
|
+
<option name="number" value="00001" />
|
|
57
|
+
<option name="presentableId" value="LOCAL-00001" />
|
|
58
|
+
<option name="project" value="LOCAL" />
|
|
59
|
+
<updated>1667586762678</updated>
|
|
60
|
+
</task>
|
|
61
|
+
<task id="LOCAL-00002" summary="CNTRL-484 - problem fix">
|
|
62
|
+
<created>1667587045426</created>
|
|
63
|
+
<option name="number" value="00002" />
|
|
64
|
+
<option name="presentableId" value="LOCAL-00002" />
|
|
65
|
+
<option name="project" value="LOCAL" />
|
|
66
|
+
<updated>1667587045426</updated>
|
|
67
|
+
</task>
|
|
68
|
+
<task id="LOCAL-00003" summary="CNTRL-484 - version bump">
|
|
69
|
+
<created>1667587257510</created>
|
|
70
|
+
<option name="number" value="00003" />
|
|
71
|
+
<option name="presentableId" value="LOCAL-00003" />
|
|
72
|
+
<option name="project" value="LOCAL" />
|
|
73
|
+
<updated>1667587257510</updated>
|
|
74
|
+
</task>
|
|
75
|
+
<task id="LOCAL-00004" summary="CNTRL-486 - added youtube item">
|
|
76
|
+
<created>1668184730139</created>
|
|
77
|
+
<option name="number" value="00004" />
|
|
78
|
+
<option name="presentableId" value="LOCAL-00004" />
|
|
79
|
+
<option name="project" value="LOCAL" />
|
|
80
|
+
<updated>1668184730139</updated>
|
|
81
|
+
</task>
|
|
82
|
+
<task id="LOCAL-00005" summary="CNTRL-486 - added youtube type">
|
|
83
|
+
<created>1668185842201</created>
|
|
84
|
+
<option name="number" value="00005" />
|
|
85
|
+
<option name="presentableId" value="LOCAL-00005" />
|
|
86
|
+
<option name="project" value="LOCAL" />
|
|
87
|
+
<updated>1668185842201</updated>
|
|
88
|
+
</task>
|
|
89
|
+
<task id="LOCAL-00006" summary="CNTRL-486 - youtube fixes">
|
|
90
|
+
<created>1668193338566</created>
|
|
91
|
+
<option name="number" value="00006" />
|
|
92
|
+
<option name="presentableId" value="LOCAL-00006" />
|
|
93
|
+
<option name="project" value="LOCAL" />
|
|
94
|
+
<updated>1668193338566</updated>
|
|
95
|
+
</task>
|
|
96
|
+
<task id="LOCAL-00007" summary="CNTRL-486 - added mute to video when autoplay On">
|
|
97
|
+
<created>1668504184323</created>
|
|
98
|
+
<option name="number" value="00007" />
|
|
99
|
+
<option name="presentableId" value="LOCAL-00007" />
|
|
100
|
+
<option name="project" value="LOCAL" />
|
|
101
|
+
<updated>1668504184323</updated>
|
|
102
|
+
</task>
|
|
103
|
+
<task id="LOCAL-00008" summary="CNTRL-486 - added search params to Url">
|
|
104
|
+
<created>1668506131079</created>
|
|
105
|
+
<option name="number" value="00008" />
|
|
106
|
+
<option name="presentableId" value="LOCAL-00008" />
|
|
107
|
+
<option name="project" value="LOCAL" />
|
|
108
|
+
<updated>1668506131079</updated>
|
|
109
|
+
</task>
|
|
110
|
+
<task id="LOCAL-00009" summary="CNTRL-486 - version update">
|
|
111
|
+
<created>1668508864371</created>
|
|
112
|
+
<option name="number" value="00009" />
|
|
113
|
+
<option name="presentableId" value="LOCAL-00009" />
|
|
114
|
+
<option name="project" value="LOCAL" />
|
|
115
|
+
<updated>1668508864371</updated>
|
|
116
|
+
</task>
|
|
117
|
+
<task id="LOCAL-00010" summary="CNTRL-486 - version bump">
|
|
118
|
+
<created>1668509275485</created>
|
|
119
|
+
<option name="number" value="00010" />
|
|
120
|
+
<option name="presentableId" value="LOCAL-00010" />
|
|
121
|
+
<option name="project" value="LOCAL" />
|
|
122
|
+
<updated>1668509275485</updated>
|
|
123
|
+
</task>
|
|
124
|
+
<task id="LOCAL-00011" summary="CNTRL-486 - version bump">
|
|
125
|
+
<created>1668509525445</created>
|
|
126
|
+
<option name="number" value="00011" />
|
|
127
|
+
<option name="presentableId" value="LOCAL-00011" />
|
|
128
|
+
<option name="project" value="LOCAL" />
|
|
129
|
+
<updated>1668509525445</updated>
|
|
130
|
+
</task>
|
|
131
|
+
<task id="LOCAL-00012" summary="CNTRL-486 - fixes">
|
|
132
|
+
<created>1669397733023</created>
|
|
133
|
+
<option name="number" value="00012" />
|
|
134
|
+
<option name="presentableId" value="LOCAL-00012" />
|
|
135
|
+
<option name="project" value="LOCAL" />
|
|
136
|
+
<updated>1669397733023</updated>
|
|
137
|
+
</task>
|
|
138
|
+
<task id="LOCAL-00013" summary="CNTRL-486 - fixes">
|
|
139
|
+
<created>1669402876183</created>
|
|
140
|
+
<option name="number" value="00013" />
|
|
141
|
+
<option name="presentableId" value="LOCAL-00013" />
|
|
142
|
+
<option name="project" value="LOCAL" />
|
|
143
|
+
<updated>1669402876183</updated>
|
|
144
|
+
</task>
|
|
145
|
+
<task id="LOCAL-00014" summary="CNTRL-486 - fixes">
|
|
146
|
+
<created>1669402893251</created>
|
|
147
|
+
<option name="number" value="00014" />
|
|
148
|
+
<option name="presentableId" value="LOCAL-00014" />
|
|
149
|
+
<option name="project" value="LOCAL" />
|
|
150
|
+
<updated>1669402893251</updated>
|
|
151
|
+
</task>
|
|
152
|
+
<task id="LOCAL-00015" summary="CNTRL-486 - fixes">
|
|
153
|
+
<created>1669405389296</created>
|
|
154
|
+
<option name="number" value="00015" />
|
|
155
|
+
<option name="presentableId" value="LOCAL-00015" />
|
|
156
|
+
<option name="project" value="LOCAL" />
|
|
157
|
+
<updated>1669405389296</updated>
|
|
158
|
+
</task>
|
|
159
|
+
<task id="LOCAL-00016" summary="CNTRL-486 - fixes">
|
|
160
|
+
<created>1669405966077</created>
|
|
161
|
+
<option name="number" value="00016" />
|
|
162
|
+
<option name="presentableId" value="LOCAL-00016" />
|
|
163
|
+
<option name="project" value="LOCAL" />
|
|
164
|
+
<updated>1669405966077</updated>
|
|
165
|
+
</task>
|
|
166
|
+
<task id="LOCAL-00017" summary="CNTRL-486 - version bump">
|
|
167
|
+
<created>1669408571358</created>
|
|
168
|
+
<option name="number" value="00017" />
|
|
169
|
+
<option name="presentableId" value="LOCAL-00017" />
|
|
170
|
+
<option name="project" value="LOCAL" />
|
|
171
|
+
<updated>1669408571358</updated>
|
|
172
|
+
</task>
|
|
173
|
+
<task id="LOCAL-00018" summary="CNTRL-617 Youtube anf vimeo videos Url update">
|
|
174
|
+
<created>1669635492235</created>
|
|
175
|
+
<option name="number" value="00018" />
|
|
176
|
+
<option name="presentableId" value="LOCAL-00018" />
|
|
177
|
+
<option name="project" value="LOCAL" />
|
|
178
|
+
<updated>1669635492235</updated>
|
|
179
|
+
</task>
|
|
180
|
+
<task id="LOCAL-00019" summary="CNTRL-617 Version bump">
|
|
181
|
+
<created>1669635593460</created>
|
|
182
|
+
<option name="number" value="00019" />
|
|
183
|
+
<option name="presentableId" value="LOCAL-00019" />
|
|
184
|
+
<option name="project" value="LOCAL" />
|
|
185
|
+
<updated>1669635593460</updated>
|
|
186
|
+
</task>
|
|
187
|
+
<task id="LOCAL-00020" summary="CNTRL-694 added valid url builder">
|
|
188
|
+
<created>1670861002829</created>
|
|
189
|
+
<option name="number" value="00020" />
|
|
190
|
+
<option name="presentableId" value="LOCAL-00020" />
|
|
191
|
+
<option name="project" value="LOCAL" />
|
|
192
|
+
<updated>1670861002829</updated>
|
|
193
|
+
</task>
|
|
194
|
+
<task id="LOCAL-00021" summary="CNTRL-694 added code styling and version bump">
|
|
195
|
+
<created>1670862883753</created>
|
|
196
|
+
<option name="number" value="00021" />
|
|
197
|
+
<option name="presentableId" value="LOCAL-00021" />
|
|
198
|
+
<option name="project" value="LOCAL" />
|
|
199
|
+
<updated>1670862883753</updated>
|
|
200
|
+
</task>
|
|
201
|
+
<option name="localTasksCounter" value="22" />
|
|
202
|
+
<servers />
|
|
203
|
+
</component>
|
|
204
|
+
<component name="TypeScriptGeneratedFilesManager">
|
|
205
|
+
<option name="version" value="3" />
|
|
206
|
+
</component>
|
|
207
|
+
<component name="Vcs.Log.Tabs.Properties">
|
|
208
|
+
<option name="TAB_STATES">
|
|
209
|
+
<map>
|
|
210
|
+
<entry key="MAIN">
|
|
211
|
+
<value>
|
|
212
|
+
<State />
|
|
213
|
+
</value>
|
|
214
|
+
</entry>
|
|
215
|
+
</map>
|
|
216
|
+
</option>
|
|
217
|
+
</component>
|
|
218
|
+
<component name="VcsManagerConfiguration">
|
|
219
|
+
<MESSAGE value="CNTRL-484 - added embed vimeo video" />
|
|
220
|
+
<MESSAGE value="CNTRL-484 - problem fix" />
|
|
221
|
+
<MESSAGE value="CNTRL-484 - version bump" />
|
|
222
|
+
<MESSAGE value="CNTRL-486 - added youtube item" />
|
|
223
|
+
<MESSAGE value="CNTRL-486 - added youtube type" />
|
|
224
|
+
<MESSAGE value="CNTRL-486 - youtube fixes" />
|
|
225
|
+
<MESSAGE value="CNTRL-486 - added mute to video when autoplay On" />
|
|
226
|
+
<MESSAGE value="CNTRL-486 - added search params to Url" />
|
|
227
|
+
<MESSAGE value="CNTRL-486 - version update" />
|
|
228
|
+
<MESSAGE value="CNTRL-486 - fixes" />
|
|
229
|
+
<MESSAGE value="CNTRL-486 - version bump" />
|
|
230
|
+
<MESSAGE value="CNTRL-617 Youtube anf vimeo videos Url update" />
|
|
231
|
+
<MESSAGE value="CNTRL-617 Version bump" />
|
|
232
|
+
<MESSAGE value="CNTRL-694 added valid url builder" />
|
|
233
|
+
<MESSAGE value="CNTRL-694 added code styling and version bump" />
|
|
234
|
+
<option name="LAST_COMMIT_MESSAGE" value="CNTRL-694 added code styling and version bump" />
|
|
235
|
+
</component>
|
|
236
|
+
</project>
|
|
Binary file
|
|
@@ -2,18 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Article = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const sdk_1 = require("@cntrl-site/sdk");
|
|
6
5
|
const Section_1 = require("./Section");
|
|
7
6
|
const Item_1 = require("./Item");
|
|
8
7
|
const Article = ({ article, layouts }) => {
|
|
9
8
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "article", children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, layouts: layouts, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { layouts: layouts, item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
10
|
-
|
|
11
|
-
.article {
|
|
9
|
+
.article {
|
|
12
10
|
position: relative;
|
|
13
11
|
overflow: hidden;
|
|
14
|
-
background-color: ${color ? color : 'transparent'};
|
|
15
12
|
}
|
|
16
|
-
`))}
|
|
17
13
|
` })] }));
|
|
18
14
|
};
|
|
19
15
|
exports.Article = Article;
|
package/lib/components/Item.js
CHANGED
|
@@ -31,7 +31,7 @@ const Item = ({ item, layouts }) => {
|
|
|
31
31
|
${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
|
|
32
32
|
.item-${item.id} {
|
|
33
33
|
position: absolute;
|
|
34
|
-
top: ${area.top
|
|
34
|
+
top: ${getItemTopStyle(area.top, area.anchorSide)};
|
|
35
35
|
left: ${area.left * 100}vw;
|
|
36
36
|
width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'auto'};
|
|
37
37
|
height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'auto'};
|
|
@@ -42,10 +42,23 @@ const Item = ({ item, layouts }) => {
|
|
|
42
42
|
` })] }));
|
|
43
43
|
};
|
|
44
44
|
exports.Item = Item;
|
|
45
|
-
|
|
45
|
+
function getItemTopStyle(top, anchorSide) {
|
|
46
|
+
const defaultValue = `${top * 100}vw`;
|
|
47
|
+
if (!anchorSide)
|
|
48
|
+
return defaultValue;
|
|
49
|
+
switch (anchorSide) {
|
|
50
|
+
case sdk_1.AnchorSide.Top:
|
|
51
|
+
return defaultValue;
|
|
52
|
+
case sdk_1.AnchorSide.Center:
|
|
53
|
+
return `calc(50% + ${top * 100}vw)`;
|
|
54
|
+
case sdk_1.AnchorSide.Bottom:
|
|
55
|
+
return `calc(100% + ${top * 100}vw)`;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function parseSizing(sizing) {
|
|
46
59
|
const axisSizing = sizing.split(' ');
|
|
47
60
|
return {
|
|
48
61
|
y: axisSizing[0],
|
|
49
62
|
x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
|
|
50
63
|
};
|
|
51
|
-
}
|
|
64
|
+
}
|
|
@@ -3,6 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.LinkWrapper = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const LinkWrapper = ({ url, children }) => {
|
|
6
|
-
|
|
6
|
+
const validUrl = buildValidUrl(url);
|
|
7
|
+
return url ? ((0, jsx_runtime_1.jsx)("a", { href: validUrl, target: url.startsWith('/') ? '_self' : '_blank', rel: "noreferrer", children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
|
|
7
8
|
};
|
|
8
9
|
exports.LinkWrapper = LinkWrapper;
|
|
10
|
+
function buildValidUrl(url) {
|
|
11
|
+
const prefixes = [
|
|
12
|
+
'http://',
|
|
13
|
+
'https://',
|
|
14
|
+
'/',
|
|
15
|
+
'mailto:',
|
|
16
|
+
'tel:',
|
|
17
|
+
'file:',
|
|
18
|
+
'ftp:',
|
|
19
|
+
'javascript',
|
|
20
|
+
'#'
|
|
21
|
+
];
|
|
22
|
+
const protocolCheck = prefixes.some(prefix => url.startsWith(prefix));
|
|
23
|
+
if (protocolCheck)
|
|
24
|
+
return url;
|
|
25
|
+
return `//${url}`;
|
|
26
|
+
}
|
|
@@ -21,10 +21,22 @@ const Section = ({ section, layouts, children }) => {
|
|
|
21
21
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
22
22
|
${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
|
|
23
23
|
.section-${section.id} {
|
|
24
|
-
height: ${height
|
|
24
|
+
height: ${getSectionHeight(height)};
|
|
25
25
|
position: relative;
|
|
26
26
|
}`))}
|
|
27
|
+
${(0, sdk_1.getLayoutStyles)(layouts, [section.color], ([color]) => (`
|
|
28
|
+
.section-${section.id} {
|
|
29
|
+
background-color: ${color ? color : 'transparent'};
|
|
30
|
+
}`))}
|
|
27
31
|
${getSectionVisibilityStyles()}
|
|
28
32
|
` })] }));
|
|
29
33
|
};
|
|
30
34
|
exports.Section = Section;
|
|
35
|
+
function getSectionHeight(heightData) {
|
|
36
|
+
const { units, vhUnits, mode } = heightData;
|
|
37
|
+
if (mode === sdk_1.SectionHeightMode.ViewportHeightUnits)
|
|
38
|
+
return `${vhUnits}vh`;
|
|
39
|
+
if (mode === sdk_1.SectionHeightMode.ControlUnits)
|
|
40
|
+
return `${units * 100}vw`;
|
|
41
|
+
return '0';
|
|
42
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk-nextjs",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.11",
|
|
4
4
|
"description": "SDK for Next.js",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@cntrl-site/sdk": "^0.2.
|
|
24
|
+
"@cntrl-site/sdk": "^0.2.13",
|
|
25
25
|
"html-react-parser": "^3.0.1",
|
|
26
26
|
"styled-jsx": "^5.0.2"
|
|
27
27
|
},
|
|
@@ -21,13 +21,10 @@ export const Article: FC<Props> = ({ article, layouts }) => {
|
|
|
21
21
|
))}
|
|
22
22
|
</div>
|
|
23
23
|
<style jsx>{`
|
|
24
|
-
|
|
25
|
-
.article {
|
|
24
|
+
.article {
|
|
26
25
|
position: relative;
|
|
27
26
|
overflow: hidden;
|
|
28
|
-
background-color: ${color ? color : 'transparent'};
|
|
29
27
|
}
|
|
30
|
-
`))}
|
|
31
28
|
`}</style>
|
|
32
29
|
</>
|
|
33
30
|
);
|
package/src/components/Item.tsx
CHANGED
|
@@ -4,7 +4,8 @@ import {
|
|
|
4
4
|
ArticleItemType,
|
|
5
5
|
ArticleItemSizingType as SizingType,
|
|
6
6
|
TArticleItemAny,
|
|
7
|
-
TLayout
|
|
7
|
+
TLayout,
|
|
8
|
+
AnchorSide
|
|
8
9
|
} from '@cntrl-site/sdk';
|
|
9
10
|
import { RectangleItem } from './items/RectangleItem';
|
|
10
11
|
import { ImageItem } from './items/ImageItem';
|
|
@@ -47,7 +48,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
|
|
|
47
48
|
${getLayoutStyles(layouts, layoutValues, ([area]) => (`
|
|
48
49
|
.item-${item.id} {
|
|
49
50
|
position: absolute;
|
|
50
|
-
top: ${area.top
|
|
51
|
+
top: ${getItemTopStyle(area.top, area.anchorSide)};
|
|
51
52
|
left: ${area.left * 100}vw;
|
|
52
53
|
width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'auto'};
|
|
53
54
|
height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'auto'};
|
|
@@ -60,13 +61,26 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
|
|
|
60
61
|
);
|
|
61
62
|
};
|
|
62
63
|
|
|
63
|
-
|
|
64
|
+
function getItemTopStyle(top: number, anchorSide: AnchorSide) {
|
|
65
|
+
const defaultValue = `${top * 100}vw`;
|
|
66
|
+
if (!anchorSide) return defaultValue;
|
|
67
|
+
switch (anchorSide) {
|
|
68
|
+
case AnchorSide.Top:
|
|
69
|
+
return defaultValue;
|
|
70
|
+
case AnchorSide.Center:
|
|
71
|
+
return `calc(50% + ${top * 100}vw)`;
|
|
72
|
+
case AnchorSide.Bottom:
|
|
73
|
+
return `calc(100% + ${top * 100}vw)`;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function parseSizing(sizing: string): Axis {
|
|
64
78
|
const axisSizing = sizing.split(' ');
|
|
65
79
|
return {
|
|
66
80
|
y: axisSizing[0],
|
|
67
81
|
x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
|
|
68
82
|
} as Axis;
|
|
69
|
-
}
|
|
83
|
+
}
|
|
70
84
|
|
|
71
85
|
interface Axis {
|
|
72
86
|
x: SizingType;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ReactElement, ReactNode } from 'react';
|
|
2
2
|
|
|
3
3
|
interface Props {
|
|
4
4
|
url?: string;
|
|
@@ -6,9 +6,10 @@ interface Props {
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
export const LinkWrapper: React.FC<Props> = ({ url, children }) => {
|
|
9
|
+
const validUrl = buildValidUrl(url!);
|
|
9
10
|
return url ? (
|
|
10
11
|
<a
|
|
11
|
-
href={
|
|
12
|
+
href={validUrl}
|
|
12
13
|
target={url.startsWith('/') ? '_self' : '_blank'}
|
|
13
14
|
rel="noreferrer"
|
|
14
15
|
>
|
|
@@ -20,3 +21,19 @@ export const LinkWrapper: React.FC<Props> = ({ url, children }) => {
|
|
|
20
21
|
};
|
|
21
22
|
|
|
22
23
|
|
|
24
|
+
function buildValidUrl(url: string): string {
|
|
25
|
+
const prefixes = [
|
|
26
|
+
'http://',
|
|
27
|
+
'https://',
|
|
28
|
+
'/',
|
|
29
|
+
'mailto:',
|
|
30
|
+
'tel:',
|
|
31
|
+
'file:',
|
|
32
|
+
'ftp:',
|
|
33
|
+
'javascript',
|
|
34
|
+
'#'
|
|
35
|
+
];
|
|
36
|
+
const protocolCheck = prefixes.some(prefix => url.startsWith(prefix));
|
|
37
|
+
if (protocolCheck) return url;
|
|
38
|
+
return `//${url}`;
|
|
39
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC, ReactElement } from 'react';
|
|
2
|
-
import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout } from '@cntrl-site/sdk';
|
|
2
|
+
import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
|
|
3
3
|
|
|
4
4
|
type SectionChild = ReactElement<any, any>;
|
|
5
5
|
|
|
@@ -34,13 +34,27 @@ export const Section: FC<Props> = ({ section, layouts, children }) => {
|
|
|
34
34
|
${
|
|
35
35
|
getLayoutStyles(layouts, [section.height], ([height]) => (`
|
|
36
36
|
.section-${section.id} {
|
|
37
|
-
height: ${height
|
|
37
|
+
height: ${getSectionHeight(height)};
|
|
38
38
|
position: relative;
|
|
39
39
|
}`
|
|
40
40
|
))
|
|
41
41
|
}
|
|
42
|
+
${
|
|
43
|
+
getLayoutStyles(layouts, [section.color], ([color]) => (`
|
|
44
|
+
.section-${section.id} {
|
|
45
|
+
background-color: ${color ? color : 'transparent'};
|
|
46
|
+
}`
|
|
47
|
+
))
|
|
48
|
+
}
|
|
42
49
|
${getSectionVisibilityStyles()}
|
|
43
50
|
`}</style>
|
|
44
51
|
</>
|
|
45
52
|
);
|
|
46
53
|
};
|
|
54
|
+
|
|
55
|
+
function getSectionHeight(heightData: TSectionHeight): string {
|
|
56
|
+
const { units, vhUnits, mode } = heightData;
|
|
57
|
+
if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
|
|
58
|
+
if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
|
|
59
|
+
return '0';
|
|
60
|
+
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<component name="InspectionProjectProfileManager">
|
|
2
|
-
<profile version="1.0">
|
|
3
|
-
<option name="myName" value="Project Default" />
|
|
4
|
-
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
|
|
5
|
-
<option name="myValues">
|
|
6
|
-
<value>
|
|
7
|
-
<list size="1">
|
|
8
|
-
<item index="0" class="java.lang.String" itemvalue="jsx" />
|
|
9
|
-
</list>
|
|
10
|
-
</value>
|
|
11
|
-
</option>
|
|
12
|
-
<option name="myCustomValuesEnabled" value="true" />
|
|
13
|
-
</inspection_tool>
|
|
14
|
-
</profile>
|
|
15
|
-
</component>
|