PluginProbe
GutSlider – All in One Slider and Carousel Blocks for Gutenberg / 2.11.0
GutSlider – All in One Slider and Carousel Blocks for Gutenberg v2.11.0
3.1.0 3.0.0 2.13.2 2.13.1 2.13.0 trunk 1.0.0 2.1.0 2.10.0 2.10.1 2.11.0 2.11.1 2.11.2 2.11.3 2.11.4 2.12.0 2.2.1 2.2.2 2.3.0 2.4.0 2.5.1 2.5.3 2.5.4 2.5.5 2.6.1 All 56 releases
slider-blocks / src / constants / index.js

index.js in GutSlider – All in One Slider and Carousel Blocks for Gutenberg 2.11.0, at src/constants/index.js

760 lines 19.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * WordPress dependencies
3 */
4 import { __ } from '@wordpress/i18n';
5
6 // prefix
7 export const PREFIX = 'gutsliders_';
8
9 // Responsive Devices
10 export const RES_DEVICES = [
11 {
12 label: __('Desktop', 'slider-blocks'),
13 value: 'Desktop',
14 icon: (
15 <svg width="8" height="7" viewBox="0 0 8 7" xmlns="http://www.w3.org/2000/svg">
16 <path d="M7.33333 0H0.666667C0.298611 0 0 0.293945 0 0.65625V5.03125C0 5.39355 0.298611 5.6875 0.666667 5.6875H3.33333L3.11111 6.34375H2.11111C1.92639 6.34375 1.77778 6.49004 1.77778 6.67188C1.77778 6.85371 1.92639 7 2.11111 7H5.88889C6.07361 7 6.22222 6.85371 6.22222 6.67188C6.22222 6.49004 6.07361 6.34375 5.88889 6.34375H4.88889L4.66667 5.6875H7.33333C7.70139 5.6875 8 5.39355 8 5.03125V0.65625C8 0.293945 7.70139 0 7.33333 0ZM7.11111 4.8125H0.888889V0.875H7.11111V4.8125Z"></path>
17 </svg>
18 )
19 },
20 {
21 label: __('Tablet', 'slider-blocks'),
22 value: 'Tablet',
23 icon: (
24 <svg width="6" height="7" viewBox="0 0 6 7" xmlns="http://www.w3.org/2000/svg">
25 <path d="M5 0H1C0.446667 0 0 0.390833 0 0.875V6.125C0 6.60917 0.446667 7 1 7H5C5.55333 7 6 6.60917 6 6.125V0.875C6 0.390833 5.55333 0 5 0ZM3.66667 6.41667H2.33333V6.125H3.66667V6.41667ZM5.41667 5.54167H0.583333V0.875H5.41667V5.54167Z"></path>
26 </svg>
27 )
28 },
29 {
30 label: __('Mobile', 'slider-blocks'),
31 value: 'Mobile',
32 icon: (
33 <svg width="4" height="7" viewBox="0 0 4 7" xmlns="http://www.w3.org/2000/svg">
34 <path d="M3.33333 0H0.666667C0.297778 0 0 0.390833 0 0.875V6.125C0 6.60917 0.297778 7 0.666667 7H3.33333C3.70222 7 4 6.60917 4 6.125V0.875C4 0.390833 3.70222 0 3.33333 0ZM2.44444 6.41667H1.55556V6.125H2.44444V6.41667ZM3.61111 5.54167H0.388889V0.875H3.61111V5.54167Z"></path>
35 </svg>
36 )
37 }
38 ];
39
40 // units
41 export const GENERAL_UNITS = ['px', 'em', 'rem'];
42 export const LHLS_UNITS = ['px', 'em'];
43
44 // text alignment
45 export const TEXT_ALIGNS = [
46 {
47 label: __('Left', 'slider-blocks'),
48 value: 'left',
49 icon: (
50 <svg
51 xmlns="http://www.w3.org/2000/svg"
52 width={24}
53 height={24}
54 viewBox="0 0 24 24"
55 strokeWidth="1.5"
56 stroke="#000000"
57 fill="none"
58 strokeLinecap="round"
59 strokeLinejoin="round"
60 >
61 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
62 <path d="M4 6l16 0" />
63 <path d="M4 12l10 0" />
64 <path d="M4 18l14 0" />
65 </svg>
66 )
67 },
68 {
69 label: __('Center', 'slider-blocks'),
70 value: 'center',
71 icon: (
72 <svg
73 xmlns="http://www.w3.org/2000/svg"
74 width={24}
75 height={24}
76 viewBox="0 0 24 24"
77 strokeWidth="1.5"
78 stroke="#000000"
79 fill="none"
80 strokeLinecap="round"
81 strokeLinejoin="round"
82 >
83 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
84 <path d="M4 6l16 0" />
85 <path d="M8 12l8 0" />
86 <path d="M6 18l12 0" />
87 </svg>
88 )
89 },
90 {
91 label: __('Right', 'affiliaterg-block'),
92 value: 'right',
93 icon: (
94 <svg
95 xmlns="http://www.w3.org/2000/svg"
96 width={24}
97 height={24}
98 viewBox="0 0 24 24"
99 strokeWidth="1.5"
100 stroke="#000000"
101 fill="none"
102 strokeLinecap="round"
103 strokeLinejoin="round"
104 >
105 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
106 <path d="M4 6l16 0" />
107 <path d="M10 12l10 0" />
108 <path d="M6 18l14 0" />
109 </svg>
110 )
111 }
112 ];
113
114 // flex aligns
115 export const FLEX_HORIZONTAL_ALIGNS = [
116 {
117 label: __('Left', 'affiliaterg-block'),
118 value: 'flex-start',
119 icon: (
120 <svg
121 xmlns="http://www.w3.org/2000/svg"
122 width={24}
123 height={24}
124 viewBox="0 0 24 24"
125 strokeWidth="1.5"
126 stroke="#000000"
127 fill="none"
128 strokeLinecap="round"
129 strokeLinejoin="round"
130 >
131 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
132 <path d="M4 4l0 16" />
133 <path d="M8 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
134 </svg>
135 )
136 },
137 {
138 label: __('Center', 'affiliaterg-block'),
139 value: 'center',
140 icon: (
141 <svg
142 xmlns="http://www.w3.org/2000/svg"
143 width={24}
144 height={24}
145 viewBox="0 0 24 24"
146 strokeWidth="1.5"
147 stroke="#000000"
148 fill="none"
149 strokeLinecap="round"
150 strokeLinejoin="round"
151 >
152 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
153 <path d="M4 12l5 0" />
154 <path d="M15 12l5 0" />
155 <path d="M9 6m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
156 </svg>
157 )
158 },
159 {
160 label: __('Right', 'affiliaterg-block'),
161 value: 'flex-end',
162 icon: (
163 <svg
164 xmlns="http://www.w3.org/2000/svg"
165 width={24}
166 height={24}
167 viewBox="0 0 24 24"
168 strokeWidth="1.5"
169 stroke="#000000"
170 fill="none"
171 strokeLinecap="round"
172 strokeLinejoin="round"
173 >
174 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
175 <path d="M20 4l0 16" />
176 <path d="M4 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
177 </svg>
178 )
179 }
180 ];
181
182 export const FLEX_VERTICAL_ALIGNS = [
183 {
184 label: __('Top', 'affiliaterg-block'),
185 value: 'flex-start',
186 icon: (
187 <svg
188 xmlns="http://www.w3.org/2000/svg"
189 width={24}
190 height={24}
191 viewBox="0 0 24 24"
192 strokeWidth="1.5"
193 stroke="#000000"
194 fill="none"
195 strokeLinecap="round"
196 strokeLinejoin="round"
197 >
198 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
199 <path d="M4 4l16 0" />
200 <path d="M9 8m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
201 </svg>
202 )
203 },
204 {
205 label: __('Middle', 'affiliaterg-block'),
206 value: 'center',
207 icon: (
208 <svg
209 xmlns="http://www.w3.org/2000/svg"
210 width={24}
211 height={24}
212 viewBox="0 0 24 24"
213 strokeWidth="1.5"
214 stroke="#000000"
215 fill="none"
216 strokeLinecap="round"
217 strokeLinejoin="round"
218 >
219 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
220 <path d="M12 4l0 5" />
221 <path d="M12 15l0 5" />
222 <path d="M6 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
223 </svg>
224 )
225 },
226 {
227 label: __('Bottom', 'affiliaterg-block'),
228 value: 'flex-end',
229 icon: (
230 <svg
231 xmlns="http://www.w3.org/2000/svg"
232 width={24}
233 height={24}
234 viewBox="0 0 24 24"
235 strokeWidth="1.5"
236 stroke="#000000"
237 fill="none"
238 strokeLinecap="round"
239 strokeLinejoin="round"
240 >
241 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
242 <path d="M4 20l16 0" />
243 <path d="M9 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
244 </svg>
245 )
246 }
247 ];
248
249 // Box Shadow Position
250 export const BOX_SHADOW_POSITION = [
251 {
252 label: __('Outset', 'affiliaterg-block'),
253 value: 'outset'
254 },
255 {
256 label: __('Inset', 'affiliaterg-block'),
257 value: 'inset'
258 }
259 ];
260
261 // Border Style
262 export const BORDER_STYLES = [
263 {
264 label: __('Default', 'affiliaterg-block'),
265 value: ''
266 },
267 {
268 label: __('None', 'affiliaterg-block'),
269 value: 'none'
270 },
271 {
272 label: __('Solid', 'affiliaterg-block'),
273 value: 'solid'
274 },
275 {
276 label: __('Dashed', 'affiliaterg-block'),
277 value: 'dashed'
278 },
279 {
280 label: __('Dotted', 'affiliaterg-block'),
281 value: 'dotted'
282 },
283 {
284 label: __('Double', 'affiliaterg-block'),
285 value: 'double'
286 },
287 {
288 label: __('Groove', 'affiliaterg-block'),
289 value: 'groove'
290 },
291 {
292 label: __('Ridge', 'affiliaterg-block'),
293 value: 'ridge'
294 }
295 ];
296
297 // Background Types
298 export const BACKGROUND_TYPES = [
299 {
300 label: __('Classic', 'slider-blocks'),
301 value: 'classic'
302 },
303 {
304 label: __('Gradient', 'slider-blocks'),
305 value: 'gradient'
306 }
307 ];
308
309 // Overlay Types
310 export const OVERLAY_TYPES = [
311 {
312 label: __('Classic', 'slider-blocks'),
313 value: 'classic'
314 },
315 {
316 label: __('Gradient', 'slider-blocks'),
317 value: 'gradient'
318 }
319 ];
320
321 // Gradient Palettes
322 export const GRADIENT_PALETTES = [
323 {
324 name: 'JShine',
325 gradient: 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
326 slug: 'jshine'
327 },
328 {
329 name: 'Rastafarie',
330 gradient: 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
331 slug: 'rastafari'
332 },
333 {
334 name: 'Yoda',
335 gradient: 'linear-gradient(135deg,#FF0099 0%, #493240 100%)',
336 slug: 'yoda'
337 },
338 {
339 name: 'Piglet',
340 gradient: 'linear-gradient(135deg,#ee9ca7 0%, #ffdde1 100%)',
341 slug: 'piglet'
342 },
343 {
344 name: 'Cool Blues',
345 gradient: 'linear-gradient(135deg,#2193b0 0%, #6dd5ed 100%)',
346 slug: 'cool-blues'
347 },
348 {
349 name: 'MegaTron',
350 gradient: 'linear-gradient(135deg,#C6FFDD 0%, #FBD786 100%)',
351 slug: 'megatron'
352 }
353 ];
354
355 // Heading Tags
356 export const HEADING_TAGS = [
357 {
358 label: __('H1', 'slider-blocks'),
359 value: 'h1'
360 },
361 {
362 label: __('H2', 'slider-blocks'),
363 value: 'h2'
364 },
365 {
366 label: __('H3', 'slider-blocks'),
367 value: 'h3'
368 },
369 {
370 label: __('H4', 'slider-blocks'),
371 value: 'h4'
372 },
373 {
374 label: __('H5', 'slider-blocks'),
375 value: 'h5'
376 },
377 {
378 label: __('H6', 'slider-blocks'),
379 value: 'h6'
380 },
381 {
382 label: __('Div', 'slider-blocks'),
383 value: 'div'
384 },
385 {
386 label: __('P', 'slider-blocks'),
387 value: 'p'
388 },
389 {
390 label: __('Span', 'slider-blocks'),
391 value: 'span'
392 }
393 ];
394
395 export const tagMap = {
396 h1: 'h1',
397 h2: 'h2',
398 h3: 'h3',
399 h4: 'h4',
400 h5: 'h5',
401 h6: 'h6',
402 p: 'p',
403 span: 'span'
404 };
405
406 // slider types
407 export const SLIDER_TYPES = [
408 {
409 label: __('Slider', 'slider-blocks'),
410 value: 'slider'
411 },
412 {
413 label: __('Carousel', 'slider-blocks'),
414 value: 'carousel'
415 }
416 ];
417
418 // animation types
419 export const ANIMATION_TYPES = [
420 {
421 label: __('None', 'slider-blocks'),
422 value: 'none'
423 },
424 {
425 label: __('Fade Up', 'slider-blocks'),
426 value: 'gutanimation gutslider-fadeInUp'
427 },
428 {
429 label: __('Fade Down', 'slider-blocks'),
430 value: 'gutanimation gutslider-fadeInDown'
431 },
432 {
433 label: __('Fade Left', 'slider-blocks'),
434 value: 'gutanimation gutslider-fadeInLeft'
435 },
436 {
437 label: __('Fade Right', 'slider-blocks'),
438 value: 'gutanimation gutslider-fadeInRight'
439 },
440 {
441 label: __('Slide Up', 'slider-blocks'),
442 value: 'gutanimation gutslider-slideInUp'
443 },
444 {
445 label: __('Slide Down', 'slider-blocks'),
446 value: 'gutanimation gutslider-slideInDown'
447 },
448 {
449 label: __('Slide Left', 'slider-blocks'),
450 value: 'gutanimation gutslider-slideInLeft'
451 },
452 {
453 label: __('Slide Right', 'slider-blocks'),
454 value: 'gutanimation gutslider-slideInRight'
455 }
456 ];
457
458 // Slide Effects
459 export const SLIDE_EFFECTS = [
460 {
461 label: __('Fade', 'slider-blocks'),
462 value: 'fade'
463 },
464 {
465 label: __('Slide', 'slider-blocks'),
466 value: 'slide'
467 },
468 {
469 label: __('Coverflow', 'slider-blocks'),
470 value: 'coverflow'
471 },
472 {
473 label: __('Flip', 'slider-blocks'),
474 value: 'flip'
475 },
476 {
477 label: __('Creative', 'slider-blocks'),
478 value: 'creative'
479 }
480 ];
481
482 // Creative Effects Styles
483 export const CREATIVE_STYLES = [
484 {
485 label: __('Style 1', 'slider-blocks'),
486 value: 'style-1'
487 },
488 {
489 label: __('Style 2', 'slider-blocks'),
490 value: 'style-2'
491 },
492 {
493 label: __('Style 3', 'slider-blocks'),
494 value: 'style-3'
495 },
496 {
497 label: __('Style 4', 'slider-blocks'),
498 value: 'style-4'
499 }
500 ];
501
502 export const CE_STYLES = {
503 'style-1': {
504 prev: {
505 shadow: true,
506 translate: [0, 0, -400]
507 },
508 next: {
509 translate: ['100%', 0, 0]
510 }
511 },
512 'style-2': {
513 prev: {
514 shadow: true,
515 translate: ['-120%', 0, -500]
516 },
517 next: {
518 shadow: true,
519 translate: ['120%', 0, -500]
520 }
521 },
522 'style-3': {
523 prev: {
524 shadow: true,
525 translate: ['-20%', 0, -1]
526 },
527 next: {
528 translate: ['100%', 0, 0]
529 }
530 },
531 'style-4': {
532 prev: {
533 shadow: true,
534 translate: [0, 0, -800],
535 rotate: [180, 0, 0]
536 },
537 next: {
538 shadow: true,
539 translate: [0, 0, -800],
540 rotate: [-180, 0, 0]
541 }
542 }
543 };
544
545 // Carousel Effects
546 export const CAROUSEL_EFFECTS = [
547 {
548 label: __('Slide', 'slider-blocks'),
549 value: 'slide'
550 },
551 {
552 label: __('Coverflow', 'slider-blocks'),
553 value: 'coverflow'
554 }
555 ];
556
557 /**
558 * Pagination Types
559 */
560 export const PAGINATION_TYPES = [
561 {
562 label: __('Bullets', 'slider-blocks'),
563 value: 'bullets'
564 },
565 {
566 label: __('Fraction', 'slider-blocks'),
567 value: 'fraction'
568 },
569 {
570 label: __('Progress', 'slider-blocks'),
571 value: 'progressbar'
572 }
573 ];
574
575 /**
576 * Nav Container Positions
577 */
578 export const NAV_CONTAINER_POSITIONS = [
579 {
580 label: __('Inside', 'slider-blocks'),
581 value: 'nav_inside'
582 },
583 {
584 label: __('Outside', 'slider-blocks'),
585 value: 'nav_outside'
586 }
587 ];
588
589 /**
590 * Navigation Positions
591 */
592 export const NAV_POSITIONS = [
593 {
594 label: __('Top Left', 'slider-blocks'),
595 value: 'nav_tl'
596 },
597 {
598 label: __('Top Center', 'slider-blocks'),
599 value: 'nav_tc'
600 },
601 {
602 label: __('Top Right', 'slider-blocks'),
603 value: 'nav_tr'
604 },
605 {
606 label: __('Center Center', 'slider-blocks'),
607 value: 'nav_cc'
608 },
609 {
610 label: __('Bottom Left', 'slider-blocks'),
611 value: 'nav_bl'
612 },
613 {
614 label: __('Bottom Center', 'slider-blocks'),
615 value: 'nav_bc'
616 },
617 {
618 label: __('Bottom Right', 'slider-blocks'),
619 value: 'nav_br'
620 }
621 ];
622
623 // Post Query Types
624 export const QUERY_TYPES = [
625 {
626 label: __('Latest', 'slider-blocks'),
627 value: 'latest_posts'
628 },
629 {
630 label: __('Categories', 'slider-blocks'),
631 value: 'specific_categories'
632 },
633 {
634 label: __('Individual', 'slider-blocks'),
635 value: 'specific_posts'
636 }
637 ];
638
639 export const ORDER_BY = [
640 { label: __('Date', 'slider-blocks'), value: 'date' },
641 { label: __('Title', 'slider-blocks'), value: 'title' },
642 { label: __('Last modified date', 'slider-blocks'), value: 'modified' }
643 ];
644
645 export const POST_ORDER = [
646 { label: __('ASC', 'slider-blocks'), value: 'asc' },
647 { label: __('DESC', 'slider-blocks'), value: 'desc' }
648 ];
649
650 // photo effects
651 export const PHOTO_EFFECTS = [
652 {
653 label: __('None', 'slider-blocks'),
654 value: 'none'
655 },
656 {
657 label: __('Zoom In', 'slider-blocks'),
658 value: 'zoom__in'
659 },
660 {
661 label: __('Zoom Out', 'slider-blocks'),
662 value: 'zoom__out'
663 },
664 {
665 label: __('Rotate Clockwise', 'slider-blocks'),
666 value: 'rotate__clockwise'
667 },
668 {
669 label: __('Rotate Anti Clockwise', 'slider-blocks'),
670 value: 'rotate__anti__clockwise'
671 },
672 {
673 label: __('Blur', 'slider-blocks'),
674 value: 'blur'
675 },
676 {
677 label: __('Grayscale', 'slider-blocks'),
678 value: 'grayscale'
679 },
680 {
681 label: __('Sepia', 'slider-blocks'),
682 value: 'sepia'
683 },
684 {
685 label: __('Invert', 'slider-blocks'),
686 value: 'invert'
687 },
688 {
689 label: __('Brightness', 'slider-blocks'),
690 value: 'brightness'
691 }
692 ];
693
694 export const HALIGNS = [
695 {
696 label: __('Left', 'slider-blocks'),
697 value: 'margin-right: auto; margin-left: 0;',
698 icon: (
699 <svg
700 xmlns="http://www.w3.org/2000/svg"
701 width={24}
702 height={24}
703 viewBox="0 0 24 24"
704 strokeWidth="1.5"
705 stroke="#000000"
706 fill="none"
707 strokeLinecap="round"
708 strokeLinejoin="round"
709 >
710 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
711 <path d="M4 4l0 16" />
712 <path d="M8 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
713 </svg>
714 )
715 },
716 {
717 label: __('Center', 'slider-blocks'),
718 value: 'margin-left: auto; margin-right: auto;',
719 icon: (
720 <svg
721 xmlns="http://www.w3.org/2000/svg"
722 width={24}
723 height={24}
724 viewBox="0 0 24 24"
725 strokeWidth="1.5"
726 stroke="#000000"
727 fill="none"
728 strokeLinecap="round"
729 strokeLinejoin="round"
730 >
731 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
732 <path d="M4 12l5 0" />
733 <path d="M15 12l5 0" />
734 <path d="M9 6m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
735 </svg>
736 )
737 },
738 {
739 label: __('Right', 'slider-blocks'),
740 value: 'margin-left: auto; margin-right: 0;',
741 icon: (
742 <svg
743 xmlns="http://www.w3.org/2000/svg"
744 width={24}
745 height={24}
746 viewBox="0 0 24 24"
747 strokeWidth="1.5"
748 stroke="#000000"
749 fill="none"
750 strokeLinecap="round"
751 strokeLinejoin="round"
752 >
753 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
754 <path d="M20 4l0 16" />
755 <path d="M4 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
756 </svg>
757 )
758 }
759 ];
760