Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/admin/dashboard/static/js/screens/Home.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import {
2
+
useState,
3
+
createElement,
4
+
useContext,
5
+
Fragment
6
+
} from '@wordpress/element'
7
+
import { __, sprintf } from 'ct-i18n'
8
+
import DashboardContext from '../context'
9
+
import ctEvents from 'ct-events'
10
+
11
+
import SubmitSupport, { useSupportSections } from '../components/SubmitSupport'
12
+
13
+
import $ from 'jquery'
14
+
15
+
const DocumentationButton = ({ href = '' }) => {
16
+
if (ctDashboardLocalizations.plugin_data.hide_docs_section) {
17
+
return null
18
+
}
19
+
20
+
return (
21
+
<a href={href} target="_blank">
22
+
<svg
23
+
width="14px"
24
+
height="14px"
25
+
viewBox="0 0 24 24"
26
+
fill="currentColor">
27
+
<path d="M23 2.1h-6.6c-1.8 0-3.4.9-4.4 2.3C11 3 9.4 2.1 7.6 2.1H1c-.6 0-1 .4-1 1v16.5c0 .6.4 1 1 1h7.7c1.3 0 2.3 1 2.3 2.3 0 .6.4 1 1 1s1-.4 1-1c0-1.3 1-2.3 2.3-2.3H23c.6 0 1-.4 1-1V3.1c0-.6-.4-1-1-1zM11 19.3c-.7-.4-1.5-.7-2.3-.7H2V4.1h5.6c1.9 0 3.4 1.5 3.4 3.4v11.8zm11-.7h-6.7c-.8 0-1.6.2-2.3.7V7.5c0-1.9 1.5-3.4 3.4-3.4H22v14.5z" />
28
+
</svg>
29
+
{__('Documentation', 'blocksy')}
30
+
</a>
31
+
)
32
+
}
33
+
34
+
const Home = () => {
35
+
const {
36
+
is_companion_active,
37
+
companion_download_link,
38
+
child_download_link
39
+
} = useContext(DashboardContext)
40
+
41
+
let beforeContent = { content: null }
42
+
let afterContent = { content: null }
43
+
44
+
const [isLoading, setIsLoading] = useState(false)
45
+
const [customStatus, setCustomStatus] = useState(false)
46
+
47
+
ctEvents.trigger('ct:dashboard:home:before', beforeContent)
48
+
ctEvents.trigger('ct:dashboard:home:after', afterContent)
49
+
50
+
const finalStatus = customStatus || is_companion_active
51
+
52
+
const supportSections = useSupportSections()
53
+
54
+
return (
55
+
<section>
56
+
{beforeContent.content}
57
+
58
+
<div
59
+
className="ct-dashboard-home-container"
60
+
data-columns={supportSections.length === 0 ? '1' : '2'}>
61
+
<section>
62
+
<h4>{__('Customizer Shortcuts', 'blocksy')}</h4>
63
+
64
+
<ul className="ct-customizer-shortcuts-list">
65
+
<li>
66
+
<h4>{__('Color Options', 'blocksy')}</h4>
67
+
68
+
<p>
69
+
{__(
70
+
'Manage the colour palette, as well as setting colours for different elements of the website.',
71
+
'blocksy'
72
+
)}
73
+
</p>
74
+
75
+
<div className="ct-shortcut-actions">
76
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/general-options/colors/" />
77
+
78
+
<a
79
+
href={`${
80
+
ctDashboardLocalizations.customizer_url
81
+
}${encodeURI(`[section]=color`)}`}
82
+
target="_blank">
83
+
<svg
84
+
width="15px"
85
+
height="15px"
86
+
viewBox="0 0 24 24"
87
+
fill="currentColor">
88
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
89
+
</svg>
90
+
{__('Customize', 'blocksy')}
91
+
</a>
92
+
</div>
93
+
</li>
94
+
95
+
<li>
96
+
<h4>{__('Typography Options', 'blocksy')}</h4>
97
+
98
+
<p>
99
+
{__(
100
+
'Set the footer type, number of columns, spacing and colors.',
101
+
'blocksy'
102
+
)}
103
+
</p>
104
+
105
+
<div className="ct-shortcut-actions">
106
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/general-options/typography/" />
107
+
108
+
<a
109
+
href={`${
110
+
ctDashboardLocalizations.customizer_url
111
+
}${encodeURI('[section]=typography')}`}
112
+
target="_blank">
113
+
<svg
114
+
width="15px"
115
+
height="15px"
116
+
viewBox="0 0 24 24"
117
+
fill="currentColor">
118
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
119
+
</svg>
120
+
{__('Customize', 'blocksy')}
121
+
</a>
122
+
</div>
123
+
</li>
124
+
125
+
<li>
126
+
<h4>{__('Header Options', 'blocksy')}</h4>
127
+
128
+
<p>
129
+
{__(
130
+
'Configure the header to your liking with an easy to use drag and drop builder.',
131
+
'blocksy'
132
+
)}
133
+
</p>
134
+
135
+
<div className="ct-shortcut-actions">
136
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/header-elements/header-builder-elements/" />
137
+
138
+
<a
139
+
href={`${
140
+
ctDashboardLocalizations.customizer_url
141
+
}${encodeURI(`[section]=header`)}`}
142
+
target="_blank">
143
+
<svg
144
+
width="15px"
145
+
height="15px"
146
+
viewBox="0 0 24 24"
147
+
fill="currentColor">
148
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
149
+
</svg>
150
+
{__('Customize', 'blocksy')}
151
+
</a>
152
+
</div>
153
+
</li>
154
+
155
+
<li>
156
+
<h4>{__('Footer Options', 'blocksy')}</h4>
157
+
158
+
<p>
159
+
{__(
160
+
'Arrange your footer in a way that actually makes sense with our drag and drop builder.',
161
+
'blocksy'
162
+
)}
163
+
</p>
164
+
165
+
<div className="ct-shortcut-actions">
166
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/footer-options/footer-introduction/" />
167
+
168
+
<a
169
+
href={`${
170
+
ctDashboardLocalizations.customizer_url
171
+
}${encodeURI('[section]=footer')}`}
172
+
target="_blank">
173
+
<svg
174
+
width="15px"
175
+
height="15px"
176
+
viewBox="0 0 24 24"
177
+
fill="currentColor">
178
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
179
+
</svg>
180
+
{__('Customize', 'blocksy')}
181
+
</a>
182
+
</div>
183
+
</li>
184
+
185
+
<li>
186
+
<h4>{__('Blog Options', 'blocksy')}</h4>
187
+
188
+
<p>
189
+
{__(
190
+
'Adjust your blog roll options in a single place and make it stand out in the crowd.',
191
+
'blocksy'
192
+
)}
193
+
</p>
194
+
195
+
<div className="ct-shortcut-actions">
196
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/post-types/blog-posts/" />
197
+
198
+
<a
199
+
href={`${
200
+
ctDashboardLocalizations.customizer_url
201
+
}${encodeURI(`[section]=blog_posts`)}`}
202
+
target="_blank">
203
+
<svg
204
+
width="15px"
205
+
height="15px"
206
+
viewBox="0 0 24 24"
207
+
fill="currentColor">
208
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
209
+
</svg>
210
+
{__('Customize', 'blocksy')}
211
+
</a>
212
+
</div>
213
+
</li>
214
+
215
+
<li>
216
+
<h4>{__('Posts Options', 'blocksy')}</h4>
217
+
218
+
<p>
219
+
{__(
220
+
'Set the footer type, number of columns, spacing and colors.',
221
+
'blocksy'
222
+
)}
223
+
</p>
224
+
225
+
<div className="ct-shortcut-actions">
226
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/post-types/single-posts/" />
227
+
228
+
<a
229
+
href={`${
230
+
ctDashboardLocalizations.customizer_url
231
+
}${encodeURI(
232
+
'[section]=single_blog_posts'
233
+
)}`}
234
+
target="_blank">
235
+
<svg
236
+
width="15px"
237
+
height="15px"
238
+
viewBox="0 0 24 24"
239
+
fill="currentColor">
240
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
241
+
</svg>
242
+
{__('Customize', 'blocksy')}
243
+
</a>
244
+
</div>
245
+
</li>
246
+
247
+
<li>
248
+
<h4>{__('Page Options', 'blocksy')}</h4>
249
+
250
+
<p>
251
+
{__(
252
+
'Set the page container width, spacing, sidebar and more.',
253
+
'blocksy'
254
+
)}
255
+
</p>
256
+
257
+
<div className="ct-shortcut-actions">
258
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/post-types/pages/" />
259
+
260
+
<a
261
+
href={`${
262
+
ctDashboardLocalizations.customizer_url
263
+
}${encodeURI('[section]=single_pages')}`}
264
+
target="_blank">
265
+
<svg
266
+
width="15px"
267
+
height="15px"
268
+
viewBox="0 0 24 24"
269
+
fill="currentColor">
270
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
271
+
</svg>
272
+
{__('Customize', 'blocksy')}
273
+
</a>
274
+
</div>
275
+
</li>
276
+
277
+
<li>
278
+
<h4>{__('Sidebar Options', 'blocksy')}</h4>
279
+
280
+
<p>
281
+
{__(
282
+
'Change the sidebar behaviour and style with a nice set of options that come in handy.',
283
+
'blocksy'
284
+
)}
285
+
</p>
286
+
287
+
<div className="ct-shortcut-actions">
288
+
<DocumentationButton href="https://creativethemes.com/blocksy/docs/general-options/sidebar/" />
289
+
290
+
<a
291
+
href={`${
292
+
ctDashboardLocalizations.customizer_url
293
+
}${encodeURI('[section]=sidebar')}`}
294
+
target="_blank">
295
+
<svg
296
+
width="15px"
297
+
height="15px"
298
+
viewBox="0 0 24 24"
299
+
fill="currentColor">
300
+
<path d="M4 11c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v7c0 .6.4 1 1 1zM12 11c-.6 0-1 .4-1 1v9c0 .6.4 1 1 1s1-.4 1-1v-9c0-.6-.4-1-1-1zM20 13c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1s-1 .4-1 1v9c0 .6.4 1 1 1zM7 13H1c-.6 0-1 .4-1 1s.4 1 1 1h2v6c0 .6.4 1 1 1s1-.4 1-1v-6h2c.6 0 1-.4 1-1s-.4-1-1-1zM15 7h-2V3c0-.6-.4-1-1-1s-1 .4-1 1v4H9c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1zM23 15h-6c-.6 0-1 .4-1 1s.4 1 1 1h2v4c0 .6.4 1 1 1s1-.4 1-1v-4h2c.6 0 1-.4 1-1s-.4-1-1-1z" />
301
+
</svg>
302
+
{__('Customize', 'blocksy')}
303
+
</a>
304
+
</div>
305
+
</li>
306
+
</ul>
307
+
</section>
308
+
309
+
<SubmitSupport
310
+
placement="sidebar"
311
+
render={(markup) => {
312
+
return (
313
+
<aside>
314
+
<h4>{__('Need help or advice?', 'blocksy')}</h4>
315
+
{markup}
316
+
</aside>
317
+
)
318
+
}}
319
+
/>
320
+
</div>
321
+
322
+
{afterContent.content}
323
+
324
+
{is_companion_active !== 'active' && (
325
+
<Fragment>
326
+
<div className="ct-dashboard-home-downloads">
327
+
<ul>
328
+
<li>
329
+
<h4>
330
+
<svg
331
+
width="16"
332
+
height="16"
333
+
fill="currentColor"
334
+
viewBox="0 0 20 20">
335
+
<path d="M3.1,0c-0.4,0-0.8,0.2-1,0.6L0.2,3.9C0.1,4.1,0,4.2,0,4.4v13.3C0,19,1,20,2.2,20h15.6c1.2,0,2.2-1,2.2-2.2V4.4c0-0.2-0.1-0.4-0.2-0.6l-1.9-3.3c-0.2-0.3-0.6-0.6-1-0.6H3.1z M3.7,2.2h12.6l1.3,2.2H2.4L3.7,2.2z M2.2,6.7h15.6v11.1H2.2V6.7zM8.9,8.3v3.3H5.6l4.4,4.4l4.4-4.4h-3.3V8.3H8.9z"></path>
336
+
</svg>
337
+
338
+
{__('Blocksy Companion', 'blocksy')}
339
+
</h4>
340
+
341
+
<p>
342
+
{__(
343
+
'By downloading and installing this plugin you will have access to demo templates, extensions and a lot more stunning features.',
344
+
'blocksy'
345
+
)}
346
+
</p>
347
+
348
+
<a
349
+
className="ct-button"
350
+
onClick={(e) => {
351
+
e.stopPropagation()
352
+
353
+
setIsLoading(true)
354
+
355
+
$.ajax(ajaxurl, {
356
+
type: 'POST',
357
+
data: {
358
+
action: 'blocksy_notice_button_click',
359
+
nonce: ct_localizations.nonce
360
+
}
361
+
}).then(({ success, data }) => {
362
+
if (success) {
363
+
setCustomStatus(data.status)
364
+
if (data.status === 'active') {
365
+
location.assign(
366
+
data.pluginUrl
367
+
)
368
+
}
369
+
}
370
+
371
+
setIsLoading(false)
372
+
})
373
+
}}>
374
+
{isLoading
375
+
? __(
376
+
'Installing & activating...',
377
+
'blocksy'
378
+
)
379
+
: finalStatus === 'uninstalled'
380
+
? __(
381
+
'Install Blocksy Companion',
382
+
'blocksy'
383
+
)
384
+
: finalStatus === 'installed'
385
+
? __(
386
+
'Activate Blocksy Companion',
387
+
'blocksy'
388
+
)
389
+
: __(
390
+
'Blocksy Companion active!',
391
+
'blocksy'
392
+
)}
393
+
</a>
394
+
</li>
395
+
396
+
<li>
397
+
<h4>
398
+
<svg
399
+
width="16"
400
+
height="16"
401
+
fill="currentColor"
402
+
viewBox="0 0 20 20">
403
+
<path d="M3.1,0c-0.4,0-0.8,0.2-1,0.6L0.2,3.9C0.1,4.1,0,4.2,0,4.4v13.3C0,19,1,20,2.2,20h15.6c1.2,0,2.2-1,2.2-2.2V4.4c0-0.2-0.1-0.4-0.2-0.6l-1.9-3.3c-0.2-0.3-0.6-0.6-1-0.6H3.1z M3.7,2.2h12.6l1.3,2.2H2.4L3.7,2.2z M2.2,6.7h15.6v11.1H2.2V6.7zM8.9,8.3v3.3H5.6l4.4,4.4l4.4-4.4h-3.3V8.3H8.9z"></path>
404
+
</svg>
405
+
406
+
{__('Blocksy Child Theme', 'blocksy')}
407
+
</h4>
408
+
409
+
<p>
410
+
{__(
411
+
'By using a child theme you can modify any file without the fear of breaking something in the parent theme.',
412
+
'blocksy'
413
+
)}
414
+
</p>
415
+
416
+
<a
417
+
className="ct-button"
418
+
href={child_download_link}
419
+
target="_blank">
420
+
{__('Download now', 'blocksy')}
421
+
</a>
422
+
</li>
423
+
</ul>
424
+
</div>
425
+
</Fragment>
426
+
)}
427
+
</section>
428
+
)
429
+
}
430
+
431
+
export default Home
432
+