- {(layout != 4 && mediaType) &&
-
- {(mediaType == 'icon' && iconName) &&
-
- }
- {(mediaType == 'image') &&
+ {layout != 4 && mediaType && (
+
+ {mediaType == "icon" && iconName &&
}
+ {mediaType == "image" && (
- {
- (imageType === 'local' && image.url != undefined) ?
-
- }
+ {imageType === "local" && image.url != undefined ? (
+
+
+ )}
- }
- {(mediaType == 'number' && number) &&
+ )}
+ {mediaType == "number" && number && (
{number}
- }
+ )}
- }
+ )}
-
+
- {separatorStyle && (separatorPosition == 'left' || separatorPosition == 'top' || separatorPosition == 'leftright') ?
{renderSeparators}
: ''}
-
- {separatorStyle != '' && (separatorPosition == 'right' || separatorPosition == 'bottom' || separatorPosition == 'leftright') ?
{renderSeparators}
: ''}
+ {separatorStyle &&
+ (separatorPosition == "left" ||
+ separatorPosition == "top" ||
+ separatorPosition == "leftright") ? (
+
{renderSeparators}
+ ) : (
+ ""
+ )}
+
+ {separatorStyle != "" &&
+ (separatorPosition == "right" ||
+ separatorPosition == "bottom" ||
+ separatorPosition == "leftright") ? (
+
{renderSeparators}
+ ) : (
+ ""
+ )}
- {subTitle == 1 &&
+ {subTitle == 1 && (
-
- }
+ )}
- {
- enableContent &&
+ {enableContent && (
-
- }
- {enableButton &&
+ )}
+ {enableButton && (
- }
+ )}
- )
+ );
}
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/infobox/attributes.js b/assets/reactjs/src/blocks/infobox/attributes.js
index 4cff3f94..0a035066 100644
--- a/assets/reactjs/src/blocks/infobox/attributes.js
+++ b/assets/reactjs/src/blocks/infobox/attributes.js
@@ -1,568 +1,653 @@
const {
- gloalSettings: {
- globalAttributes
- },
- QubelyButton: {
- buttonAttributes
- }
+ gloalSettings: { globalAttributes },
+ QubelyButton: { buttonAttributes },
} = wp.qubelyComponents;
const attributes = {
- uniqueId: { type: 'string', default: '' },
- // Global
- ...globalAttributes,
- ...buttonAttributes,
- recreateStyles: {
- type: 'boolean',
- default: true
- },
- layout: { type: 'number', default: 1 },
- alignment: {
- type: 'object', default: { md: 'left' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box {text-align: {{alignment}};}'
- },
- {
- condition: [
- { key: 'layout', relation: '==', value: 4 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box {text-align: {{alignment}};}'
- }
- ]
- },
- spacer: { type: 'object', default: { spaceTop: { md: '10', unit: 'px' }, spaceBottom: { md: '10', unit: 'px' } }, style: [{ selector: '{{QUBELY}}' }] },
- mediaType: { type: 'string', default: 'icon' },
- enableButton: { type: 'boolean', default: false },
- buttonToggleOption: { type: 'boolean', default: true },
+ uniqueId: { type: "string", default: "" },
+ // Global
+ ...globalAttributes,
+ ...buttonAttributes,
+ recreateStyles: {
+ type: "boolean",
+ default: true,
+ },
+ layout: { type: "number", default: 1 },
+ alignment: {
+ type: "object",
+ default: { md: "left" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-block-info-box {text-align: {{alignment}};}",
+ },
+ {
+ condition: [{ key: "layout", relation: "==", value: 4 }],
+ selector: "{{QUBELY}} .qubely-block-info-box {text-align: {{alignment}};}",
+ },
+ ],
+ },
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ mediaType: { type: "string", default: "icon" },
+ enableButton: { type: "boolean", default: false },
+ buttonToggleOption: { type: "boolean", default: true },
- // Icon
- iconName: { type: 'string', default: 'fas fa-rocket' },
- iconSize: {
- type: 'string', default: '36px',
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'mediaType', relation: '==', value: 'icon' },
- { key: 'iconSize', relation: '!=', value: 'custom' }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media {font-size: {{iconSize}};}'
- }
- ]
- },
- iconSizeCustom: {
- type: 'object', default: { md: 64, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'mediaType', relation: '==', value: 'icon' },
- { key: 'iconSize', relation: '==', value: 'custom' }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media {font-size: {{iconSizeCustom}};}'
- }
- ]
- },
- iconColor: {
- type: 'string', default: 'var(--qubely-color-1)',
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'mediaType', relation: '==', value: 'icon' }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media i {color: {{iconColor}};}'
- }
- ]
- },
- iconHoverColor: {
- type: 'string', default: 'var(--qubely-color-2)',
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'mediaType', relation: '==', value: 'icon' }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media i {color: {{iconHoverColor}};}'
- }
- ]
- },
+ // Icon
+ iconName: { type: "string", default: "fas fa-rocket" },
+ iconSize: {
+ type: "string",
+ default: "36px",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "mediaType", relation: "==", value: "icon" },
+ { key: "iconSize", relation: "!=", value: "custom" },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media {font-size: {{iconSize}};}",
+ },
+ ],
+ },
+ iconSizeCustom: {
+ type: "object",
+ default: { md: 64, unit: "px" },
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "mediaType", relation: "==", value: "icon" },
+ { key: "iconSize", relation: "==", value: "custom" },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media {font-size: {{iconSizeCustom}};}",
+ },
+ ],
+ },
+ iconColor: {
+ type: "string",
+ default: "var(--qubely-color-1)",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "mediaType", relation: "==", value: "icon" },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media i {color: {{iconColor}};}",
+ },
+ ],
+ },
+ iconHoverColor: {
+ type: "string",
+ default: "var(--qubely-color-2)",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "mediaType", relation: "==", value: "icon" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media i {color: {{iconHoverColor}};}",
+ },
+ ],
+ },
- // Image
- image: { type: 'object', default: {} },
- image2x: { type: 'object', default: {} },
- imgAlt: { type: 'string', default: '' },
- imageType: {
- type: 'string',
- default: 'local'
- },
- externalImageUrl: {
- type: 'object',
- default: {}
- },
+ // Image
+ image: { type: "object", default: {} },
+ image2x: { type: "object", default: {} },
+ imgAlt: { type: "string", default: "" },
+ imageType: {
+ type: "string",
+ default: "local",
+ },
+ externalImageUrl: {
+ type: "object",
+ default: {},
+ },
- imageSize: {
- type: 'string',
- default: 'custom',
- style: [{
- condition: [
- { key: 'imageSize', relation: '!=', value: 'auto' },
- { key: 'imageSize', relation: '!=', value: 'custom' },
- ],
- selector: '{{QUBELY}} .qubely-info-box-media {width: {{imageSize}};} {{QUBELY}} .qubely-info-box-media img {width: 100%;}'
- }]
- },
- imageWidth: {
- type: 'object',
- default: {
- md: "600",
- unit: "px"
- },
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'imageSize', relation: '==', value: 'custom' },
- { key: 'mediaType', relation: '==', value: 'image' },
- ],
- selector: '{{QUBELY}} .qubely-info-box-media {width: {{imageWidth}};} {{QUBELY}} .qubely-info-box-media img {width: 100%;}'
- }
- ]
- },
+ imageSize: {
+ type: "string",
+ default: "custom",
+ style: [
+ {
+ condition: [
+ { key: "imageSize", relation: "!=", value: "auto" },
+ { key: "imageSize", relation: "!=", value: "custom" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-info-box-media {width: {{imageSize}};} {{QUBELY}} .qubely-info-box-media img {width: 100%;}",
+ },
+ ],
+ },
+ imageWidth: {
+ type: "object",
+ default: {
+ md: "600",
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "imageSize", relation: "==", value: "custom" },
+ { key: "mediaType", relation: "==", value: "image" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-info-box-media {width: {{imageWidth}};} {{QUBELY}} .qubely-info-box-media img {width: 100%;}",
+ },
+ ],
+ },
- imageHeight: {
- type: 'string',
- default: 'auto',
- style: [{
- condition: [
- { key: 'imageHeight', relation: '==', value: 'auto' },
- ],
- selector: '{{QUBELY}} .qubely-info-box-media .qubely-info-box-image:not(.qubely-image-placeholder) {height: auto;}'
- }]
- },
+ imageHeight: {
+ type: "string",
+ default: "auto",
+ style: [
+ {
+ condition: [{ key: "imageHeight", relation: "==", value: "auto" }],
+ selector:
+ "{{QUBELY}} .qubely-info-box-media .qubely-info-box-image:not(.qubely-image-placeholder) {height: auto;}",
+ },
+ ],
+ },
- imageCustomHeight: {
- type: 'object',
- default: {
- md: 300,
- unit: 'px'
- },
- style: [{
- condition: [
- { key: 'imageHeight', relation: '==', value: 'custom' },
- ],
- selector: '{{QUBELY}} .qubely-info-box-media .qubely-info-box-image:not(.qubely-image-placeholder) {height: {{imageCustomHeight}} !important;}'
- }]
- },
+ imageCustomHeight: {
+ type: "object",
+ default: {
+ md: 300,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "imageHeight", relation: "==", value: "custom" }],
+ selector:
+ "{{QUBELY}} .qubely-info-box-media .qubely-info-box-image:not(.qubely-image-placeholder) {height: {{imageCustomHeight}} !important;}",
+ },
+ ],
+ },
- // Number
- number: { type: 'number', default: 1 },
- numberColor: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'mediaType', relation: '==', value: 'number' }
- ],
- selector: '{{QUBELY}} .qubely-info-box-number {color: {{numberColor}};}'
- }
- ]
- },
- numberColorHover: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'mediaType', relation: '==', value: 'number' }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-number {color: {{numberColorHover}};}'
- }
- ]
- },
- numberTypography: {
- type: 'object',
- default: {
- openTypography: 1,
- size: {
- md: 48,
- unit: 'px'
- }
- },
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'mediaType', relation: '==', value: 'number' }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media'
- }
- ]
- },
+ // Number
+ number: { type: "number", default: 1 },
+ numberColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "mediaType", relation: "==", value: "number" },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-number {color: {{numberColor}};}",
+ },
+ ],
+ },
+ numberColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "mediaType", relation: "==", value: "number" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-number {color: {{numberColorHover}};}",
+ },
+ ],
+ },
+ numberTypography: {
+ type: "object",
+ default: {
+ openTypography: 1,
+ size: {
+ md: 48,
+ unit: "px",
+ },
+ },
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "mediaType", relation: "==", value: "number" },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media",
+ },
+ ],
+ },
- // Media background
- useMediaBg: { type: 'boolean', default: 1 },
- mediaBg: {
- type: 'object',
- default: {
- openColor: 1,
- type: 'color',
- color: '#D6EBFF'
- },
- style: [
- {
- condition: [
- { key: 'mediaType', relation: '!=', value: 'image' },
- // { key: 'layout', relation: '!=', value: 4 },
- { key: 'useMediaBg', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media.qubely-media-has-bg'
- }
- ]
- },
- mediaBgHover: {
- type: 'object', default: {},
- style: [
- {
- condition: [
- { key: 'mediaType', relation: '!=', value: 'image' },
- // { key: 'layout', relation: '!=', value: 4 },
- { key: 'useMediaBg', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media'
- }
- ]
- },
- mediaBackgroundSize: {
- type: 'object', default: { md: '20', unit: 'px' },
- style: [
- {
- condition: [
- { key: 'mediaType', relation: '!=', value: 'image' },
- // { key: 'layout', relation: '!=', value: 4 },
- { key: 'useMediaBg', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media { padding: {{mediaBackgroundSize}};}'
- }
- ]
- },
- mediaBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
- global: { md: 5 },
- unit: 'px',
+ // Media background
+ useMediaBg: { type: "boolean", default: 1 },
+ mediaBg: {
+ type: "object",
+ default: {
+ openColor: 1,
+ type: "color",
+ color: "#D6EBFF",
+ },
+ style: [
+ {
+ condition: [
+ { key: "mediaType", relation: "!=", value: "image" },
+ // { key: 'layout', relation: '!=', value: 4 },
+ { key: "useMediaBg", relation: "==", value: true },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media.qubely-media-has-bg",
+ },
+ ],
+ },
+ mediaBgHover: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [
+ { key: "mediaType", relation: "!=", value: "image" },
+ // { key: 'layout', relation: '!=', value: 4 },
+ { key: "useMediaBg", relation: "==", value: 1 },
+ ],
+ selector: "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media",
+ },
+ ],
+ },
+ mediaBackgroundSize: {
+ type: "object",
+ default: { md: "20", unit: "px" },
+ style: [
+ {
+ condition: [
+ { key: "mediaType", relation: "!=", value: "image" },
+ // { key: 'layout', relation: '!=', value: 4 },
+ { key: "useMediaBg", relation: "==", value: 1 },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media { padding: {{mediaBackgroundSize}};}",
+ },
+ ],
+ },
+ mediaBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ global: { md: 5 },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "useMediaBg", relation: "==", value: 1 },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media, {{QUBELY}} .qubely-info-box-media img",
+ },
+ ],
+ },
- },
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'useMediaBg', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media, {{QUBELY}} .qubely-info-box-media img'
- }
- ]
- },
+ // Media Border
+ mediaBorder: {
+ type: "number",
+ default: 0,
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "useMediaBg", relation: "==", value: 1 },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-media",
+ },
+ ],
+ },
+ mediaBorderColorHover: {
+ type: "string",
+ default: "#e5e5e5",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "useMediaBg", relation: "==", value: 1 },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media { border-color: {{mediaBorderColorHover}};}",
+ },
+ ],
+ },
- // Media Border
- mediaBorder: {
- type: 'number', default: 0,
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'useMediaBg', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media'
- }
- ]
- },
- mediaBorderColorHover: {
- type: 'string', default: '#e5e5e5',
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'useMediaBg', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media { border-color: {{mediaBorderColorHover}};}'
- }
- ]
- },
+ // Media Shadow
+ mediaShadow: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "layout", relation: "!=", value: 4 }],
+ selector: "{{QUBELY}} .qubely-info-box-media",
+ },
+ ],
+ },
+ mediaShadowHover: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "!=", value: 4 },
+ { key: "useMediaShadow", relation: "==", value: 1 },
+ ],
+ selector: "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media",
+ },
+ ],
+ },
- // Media Shadow
- mediaShadow: {
- type: 'object', default: {},
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- ],
- selector: '{{QUBELY}} .qubely-info-box-media'
- }
- ]
- },
- mediaShadowHover: {
- type: 'object', default: {},
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 4 },
- { key: 'useMediaShadow', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-media'
- }
- ]
- },
+ // Media Spacing
+ mediaSpacing: {
+ type: "object",
+ default: { md: 20, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-info-box-media {margin-bottom: {{mediaSpacing}};}",
+ },
+ {
+ condition: [{ key: "layout", relation: "==", value: 2 }],
+ selector: "{{QUBELY}} .qubely-info-box-media {margin-right: {{mediaSpacing}};}",
+ },
+ {
+ condition: [{ key: "layout", relation: "==", value: 3 }],
+ selector: "{{QUBELY}} .qubely-info-box-media {margin-left: {{mediaSpacing}};}",
+ },
+ ],
+ },
- // Media Spacing
- mediaSpacing: {
- type: 'object', default: { md: 20, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media {margin-bottom: {{mediaSpacing}};}'
- },
- {
- condition: [
- { key: 'layout', relation: '==', value: 2 }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media {margin-right: {{mediaSpacing}};}'
- },
- {
- condition: [
- { key: 'layout', relation: '==', value: 3 }
- ],
- selector: '{{QUBELY}} .qubely-info-box-media {margin-left: {{mediaSpacing}};}'
- },
- ]
- },
+ // Title
+ title: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-info-box-title",
+ default: "This is an infobox",
+ },
+ titleLevel: { type: "number", default: 2 },
+ titleTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 24, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-info-box-title" }],
+ },
+ titleColor: {
+ type: "string",
+ default: "",
+ style: [{ selector: "{{QUBELY}} .qubely-info-box-title {color: {{titleColor}};}" }],
+ },
+ titleColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-title {color: {{titleColorHover}};}",
+ },
+ ],
+ },
+ titleSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [{ selector: "{{QUBELY}} .qubely-info-box-title-inner {margin-bottom: {{titleSpacing}};}" }],
+ },
- // Title
- title: {
- type: 'string',
- source: 'html',
- selector: '.qubely-info-box-title',
- default: 'This is an infobox'
- },
- titleLevel: { type: 'number', default: 2 },
- titleTypography: { type: 'object', default: { openTypography: 1, size: { md: 24, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-info-box-title' }] },
- titleColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-info-box-title {color: {{titleColor}};}' }] },
- titleColorHover: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-title {color: {{titleColorHover}};}' }] },
- titleSpacing: { type: 'object', default: { md: 10, unit: 'px' }, style: [{ selector: '{{QUBELY}} .qubely-info-box-title-inner {margin-bottom: {{titleSpacing}};}' }] },
+ subTitle: { type: "boolean", default: 0 },
+ subTitleLevel: { type: "number", default: 3 },
+ subTitleContent: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-info-box-sub-title",
+ default: "Sub Title",
+ },
+ subTitleTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 16, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-block-info-box .qubely-info-box-sub-title" }],
+ },
+ subTitleColor: {
+ type: "string",
+ default: "#333",
+ style: [
+ {
+ condition: [{ key: "subTitle", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-block-info-box .qubely-info-box-sub-title {color: {{subTitleColor}};}",
+ },
+ ],
+ },
+ subTitleColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "subTitle", relation: "==", value: 1 }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-sub-title {color: {{subTitleColorHover}};}",
+ },
+ ],
+ },
+ subTitleSpacing: {
+ type: "object",
+ default: { md: 15, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "subTitle", relation: "==", value: 1 }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box .qubely-info-box-sub-title {margin-bottom: {{subTitleSpacing}};}",
+ },
+ ],
+ },
- subTitle: { type: 'boolean', default: 0 },
- subTitleLevel: { type: 'number', default: 3 },
- subTitleContent: {
- type: 'string',
- source: 'html',
- selector: '.qubely-info-box-sub-title',
- default: 'Sub Title'
- },
- subTitleTypography: { type: 'object', default: { openTypography: 1, size: { md: 16, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-block-info-box .qubely-info-box-sub-title' }] },
- subTitleColor: {
- type: 'string', default: '#333',
- style: [
- {
- condition: [
- { key: 'subTitle', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box .qubely-info-box-sub-title {color: {{subTitleColor}};}'
- },
- ]
- },
- subTitleColorHover: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'subTitle', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-sub-title {color: {{subTitleColorHover}};}'
- },
- ]
- },
- subTitleSpacing: {
- type: 'object', default: { md: 15, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'subTitle', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box .qubely-info-box-sub-title {margin-bottom: {{subTitleSpacing}};}'
- },
- ]
- },
+ // Title separator
+ separatorStyle: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {border-top-style: {{separatorStyle}};}",
+ },
+ ],
+ },
+ separatorPosition: { type: "string", default: "top" },
+ separatorColor: {
+ type: "string",
+ default: "#5D7FEB",
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box .qubely-separator-type-svg svg .qubely-separator-stroke {stroke: {{separatorColor}};} {{QUBELY}} .qubely-block-info-box svg .qubely-separator-fill {fill: {{separatorColor}};} {{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {border-top-color: {{separatorColor}};}",
+ },
+ ],
+ },
+ separatorColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box:hover .qubely-separator-type-svg svg .qubely-separator-stroke {stroke: {{separatorColorHover}};} {{QUBELY}} .qubely-block-info-box:hover svg .qubely-separator-fill {fill: {{separatorColorHover}};} {{QUBELY}} .qubely-block-info-box:hover .qubely-separator-type-css {border-top-color: {{separatorColorHover}};}",
+ },
+ ],
+ },
+ separatorStroke: {
+ type: "number",
+ default: 3,
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box .qubely-separator-type-svg svg .qubely-separator-stroke {stroke-width: {{separatorStroke}}px;} {{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {border-top-width: {{separatorStroke}}px;}",
+ },
+ ],
+ },
+ separatorWidth: {
+ type: "object",
+ default: { md: 60 },
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {width: {{separatorWidth}}px;} {{QUBELY}} .qubely-block-info-box .qubely-separator-type-svg svg {width: {{separatorWidth}}px;}",
+ },
+ ],
+ },
+ separatorSpacing: {
+ type: "object",
+ default: { md: 10 },
+ style: [
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "left" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-right: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "right" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-left: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "leftright" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-separator-before {margin-right: {{separatorSpacing}}px;} {{QUBELY}} .qubely-separator-after {margin-left: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "top" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-bottom: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "bottom" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-top: {{separatorSpacing}}px;}",
+ },
+ ],
+ },
- // Title separator
- separatorStyle: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {border-top-style: {{separatorStyle}};}'
- },
- ]
- },
- separatorPosition: { type: 'string', default: 'top' },
- separatorColor: {
- type: 'string', default: '#5D7FEB',
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box .qubely-separator-type-svg svg .qubely-separator-stroke {stroke: {{separatorColor}};} {{QUBELY}} .qubely-block-info-box svg .qubely-separator-fill {fill: {{separatorColor}};} {{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {border-top-color: {{separatorColor}};}'
- },
- ]
- },
- separatorColorHover: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-separator-type-svg svg .qubely-separator-stroke {stroke: {{separatorColorHover}};} {{QUBELY}} .qubely-block-info-box:hover svg .qubely-separator-fill {fill: {{separatorColorHover}};} {{QUBELY}} .qubely-block-info-box:hover .qubely-separator-type-css {border-top-color: {{separatorColorHover}};}'
- },
- ]
- },
- separatorStroke: {
- type: 'number', default: 3,
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box .qubely-separator-type-svg svg .qubely-separator-stroke {stroke-width: {{separatorStroke}}px;} {{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {border-top-width: {{separatorStroke}}px;}'
- },
- ]
- },
- separatorWidth: {
- type: 'object', default: { md: 60 },
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-info-box .qubely-separator-type-css {width: {{separatorWidth}}px;} {{QUBELY}} .qubely-block-info-box .qubely-separator-type-svg svg {width: {{separatorWidth}}px;}'
- },
- ]
- },
- separatorSpacing: {
- type: 'object', default: { md: 10 },
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'left' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-right: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'right' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-left: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'leftright' },
- ],
- selector: '{{QUBELY}} .qubely-separator-before {margin-right: {{separatorSpacing}}px;} {{QUBELY}} .qubely-separator-after {margin-left: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'top' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-bottom: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'bottom' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-top: {{separatorSpacing}}px;}'
- },
- ]
- },
+ //Content
+ enableContent: { type: "boolean", default: true },
+ content: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-info-box-text",
+ default:
+ "Qubely blocks are added to the Gutenberg editor as soon as you install the plugin. You can start using it as any other Gutenberg block.",
+ },
+ contentTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 16, unit: "px" } },
+ style: [
+ {
+ condition: [{ key: "enableContent", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-info-box-text",
+ },
+ ],
+ },
+ contentColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "enableContent", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-info-box-text {color: {{contentColor}};}",
+ },
+ ],
+ },
+ contentColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "enableContent", relation: "==", value: true }],
+ selector:
+ "{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-text {color: {{contentColorHover}};}",
+ },
+ ],
+ },
+ contentPadding: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "enableContent", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-info-box-body",
+ },
+ ],
+ },
+ contentSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ condition: [
+ { key: "enableButton", relation: "==", value: true },
+ { key: "enableContent", relation: "==", value: true },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-body .qubely-info-box-text {margin-bottom: {{contentSpacing}};}",
+ },
+ {
+ condition: [
+ { key: "enableButton", relation: "==", value: false },
+ { key: "enableContent", relation: "==", value: true },
+ ],
+ selector: "{{QUBELY}} .qubely-info-box-body .qubely-info-box-text {margin-bottom: 0;}",
+ },
+ ],
+ },
- //Content
- enableContent: { type: 'boolean', default: true },
- content: {
- type: 'string',
- source: 'html',
- selector: '.qubely-info-box-text',
- default: 'Qubely blocks are added to the Gutenberg editor as soon as you install the plugin. You can start using it as any other Gutenberg block.'
- },
- contentTypography: { type: 'object', default: { openTypography: 1, size: { md: 16, unit: 'px' } }, style: [{ condition: [{ key: 'enableContent', relation: '==', value: true }], selector: '{{QUBELY}} .qubely-info-box-text' }] },
- contentColor: { type: 'string', default: '', style: [{ condition: [{ key: 'enableContent', relation: '==', value: true }], selector: '{{QUBELY}} .qubely-info-box-text {color: {{contentColor}};}' }] },
- contentColorHover: { type: 'string', default: '', style: [{ condition: [{ key: 'enableContent', relation: '==', value: true }], selector: '{{QUBELY}} .qubely-block-info-box:hover .qubely-info-box-text {color: {{contentColorHover}};}' }] },
- contentPadding: { type: 'object', default: {}, style: [{ condition: [{ key: 'enableContent', relation: '==', value: true }], selector: '{{QUBELY}} .qubely-info-box-body' }] },
- contentSpacing: {
- type: 'object', default: { md: 10, unit: 'px' },
- style: [
- {
- condition: [{ key: 'enableButton', relation: '==', value: true }, { key: 'enableContent', relation: '==', value: true }],
- selector: '{{QUBELY}} .qubely-info-box-body .qubely-info-box-text {margin-bottom: {{contentSpacing}};}'
- },
- {
- condition: [
- { key: 'enableButton', relation: '==', value: false },
- { key: 'enableContent', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-info-box-body .qubely-info-box-text {margin-bottom: 0;}'
- },
- ]
- },
+ // Body
+ bgColor: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-block-info-box" }] },
+ bgColorHover: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-block-info-box:hover" }] },
+ bgPadding: {
+ type: "object",
+ default: {
+ paddingType: "global",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-info-box",
+ },
+ ],
+ },
+ bgBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-info-box",
+ },
+ ],
+ },
+ bgBorder: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-block-info-box" }] },
+ bgBorderColorHover: {
+ type: "string",
+ default: "#e5e5e5",
+ style: [{ selector: "{{QUBELY}} .qubely-block-info-box:hover { border-color: {{bgBorderColorHover}};}" }],
+ },
+ bgShadow: { type: "object", default: { color: "" }, style: [{ selector: "{{QUBELY}} .qubely-block-info-box" }] },
+ bgShadowHover: {
+ type: "object",
+ default: { color: "" },
+ style: [{ selector: "{{QUBELY}} .qubely-block-info-box:hover" }],
+ },
- // Body
- bgColor: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-info-box' }] },
- bgColorHover: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-info-box:hover' }] },
- bgPadding: {
- type: 'object',
- default: {
- paddingType: 'global'
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-info-box'
- }
- ]
- },
- bgBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
+ sourceOfCopiedStyle: { type: "boolean", default: false },
+};
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-info-box'
- },
- ]
- },
- bgBorder: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-info-box' }] },
- bgBorderColorHover: { type: 'string', default: '#e5e5e5', style: [{ selector: '{{QUBELY}} .qubely-block-info-box:hover { border-color: {{bgBorderColorHover}};}' }] },
- bgShadow: { type: 'object', default: { color: '' }, style: [{ selector: '{{QUBELY}} .qubely-block-info-box' }] },
- bgShadowHover: { type: 'object', default: { color: '' }, style: [{ selector: '{{QUBELY}} .qubely-block-info-box:hover' }] },
-
- sourceOfCopiedStyle: { type: 'boolean', default: false }
-}
-
-export default attributes;
\ No newline at end of file
+export default attributes;
diff --git a/assets/reactjs/src/blocks/infobox/index.js b/assets/reactjs/src/blocks/infobox/index.js
index 418b85db..067a8ba6 100644
--- a/assets/reactjs/src/blocks/infobox/index.js
+++ b/assets/reactjs/src/blocks/infobox/index.js
@@ -1,31 +1,23 @@
-import './style.scss';
-import Edit from './Edit'
-import Save from './Save';
-import attributes from './attributes';
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+import attributes from "./attributes";
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
-registerBlockType('qubely/infobox', {
- title: __('Info Box', 'qubely'),
- description: 'Be creatively informative with Qubely Info Box.',
- icon:
,
- category: 'qubely',
- supports: {
- align: [
- 'center',
- 'wide',
- 'full'
- ],
- },
- keywords: [
- __('service', 'qubely'),
- __('feature', 'qubely'),
- __('info', 'qubely')
- ],
- example: {
- attributes: {},
- },
- attributes,
- edit: Edit,
- save: Save
+registerBlockType("qubely/infobox", {
+ title: __("Info Box", "qubely"),
+ description: "Be creatively informative with Qubely Info Box.",
+ icon:
,
+ category: "qubely",
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ keywords: [__("service", "qubely"), __("feature", "qubely"), __("info", "qubely")],
+ example: {
+ attributes: {},
+ },
+ attributes,
+ edit: Edit,
+ save: Save,
});
diff --git a/assets/reactjs/src/blocks/infobox/style.scss b/assets/reactjs/src/blocks/infobox/style.scss
index 55e3bcc7..63507cd5 100644
--- a/assets/reactjs/src/blocks/infobox/style.scss
+++ b/assets/reactjs/src/blocks/infobox/style.scss
@@ -1,119 +1,119 @@
.qubely-block-info-box {
- transition: border-color 400ms, background-color 400ms, box-shadow 400ms;
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- padding: 0;
- margin: 0;
- line-height: 1;
- position: relative;
- &::before,
- &::after {
- display: none !important;
- }
+ transition: border-color 400ms, background-color 400ms, box-shadow 400ms;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ padding: 0;
+ margin: 0;
+ line-height: 1;
+ position: relative;
+ &::before,
+ &::after {
+ display: none !important;
+ }
- .qubely-text-has-bgcolor {
- padding-left: 10px;
- padding-right: 10px;
- }
- }
+ .qubely-text-has-bgcolor {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ }
- .qubely-info-box-media {
- display: inline-block;
- line-height: 1;
- text-align: center;
- overflow: hidden;
- i,
- span,
- img {
- font-style: normal;
- position: relative;
- display: inline-block;
- transition: 400ms;
- object-fit: cover;
- }
+ .qubely-info-box-media {
+ display: inline-block;
+ text-align: center;
+ overflow: hidden;
+ i,
+ span,
+ img {
+ font-style: normal;
+ position: relative;
+ display: inline-block;
+ transition: color 400ms, background-color 400ms, border-color 400ms, border-width 400ms;
+ object-fit: cover;
+ }
- img {
- max-width: 100%;
- height: auto;
- }
+ img {
+ max-width: 100%;
+ height: auto;
+ }
- &.qubely-media-has-bg {
- i,
- .qubely-info-box-number {
- min-width: 1em;
- height: 1em;
- white-space: nowrap;
- &:before {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
- }
- }
- }
+ &.qubely-media-has-bg {
+ display: inline-flex;
+ i,
+ .qubely-info-box-number {
+ min-width: 1em;
+ height: 1em;
+ white-space: nowrap;
+ &:before {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ }
+ }
- .qubely-info-box-title {
- margin: 0 !important;
- }
+ .qubely-info-box-title {
+ margin: 0 !important;
+ }
- .qubely-info-box-media,
- .qubely-info-box-title,
- .qubely-info-box-text {
- transition: color 400ms, border-color 400ms, background-color 400ms, box-shadow 400ms;
- }
+ .qubely-info-box-media,
+ .qubely-info-box-title,
+ .qubely-info-box-text {
+ transition: color 400ms, border-color 400ms, background-color 400ms, box-shadow 400ms;
+ }
- &.qubely-info-box-layout-2,
- &.qubely-info-box-layout-3 {
- display: -ms-flexbox;
- display: flex;
- -ms-flex-align: start;
- align-items: flex-start;
+ &.qubely-info-box-layout-2,
+ &.qubely-info-box-layout-3 {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: start;
+ align-items: flex-start;
- .qubely-info-box-body {
- -ms-flex: 1;
- flex: 1;
- }
- }
+ .qubely-info-box-body {
+ -ms-flex: 1;
+ flex: 1;
+ }
+ }
- &.qubely-info-box-layout-3 {
- flex-direction: row-reverse;
- .qubely-info-box-body {
- text-align: right;
- }
- }
+ &.qubely-info-box-layout-3 {
+ flex-direction: row-reverse;
+ .qubely-info-box-body {
+ text-align: right;
+ }
+ }
- .qubely-separator {
- font-size: 0;
- .qubely-separator-type-css,
- .qubely-separator-type-svg {
- display: inline-block;
- }
- }
+ .qubely-separator {
+ font-size: 0;
+ .qubely-separator-type-css,
+ .qubely-separator-type-svg {
+ display: inline-block;
+ }
+ }
- .qubely-separator-position-left,
- .qubely-separator-position-right,
- .qubely-separator-position-leftright {
- .qubely-info-box-title-inner {
- display: inline-flex;
- align-items: center;
+ .qubely-separator-position-left,
+ .qubely-separator-position-right,
+ .qubely-separator-position-leftright {
+ .qubely-info-box-title-inner {
+ display: inline-flex;
+ align-items: center;
- .qubely-info-box-title,
- .qubely-separator {
- display: inline-flex;
- }
- }
- }
+ .qubely-info-box-title,
+ .qubely-separator {
+ display: inline-flex;
+ }
+ }
+ }
}
.qubely-info-box-image.qubely-image-placeholder {
- display: flex;
- &:not(.size-custom) {
- width: 100%;
- }
- &.size-auto {
- width: 210px;
- }
+ display: flex;
+ &:not(.size-custom) {
+ width: 100%;
+ }
+ &.size-auto {
+ width: 210px;
+ }
}
diff --git a/assets/reactjs/src/blocks/map/Edit.js b/assets/reactjs/src/blocks/map/Edit.js
index 48ef4bb6..8c0ec356 100644
--- a/assets/reactjs/src/blocks/map/Edit.js
+++ b/assets/reactjs/src/blocks/map/Edit.js
@@ -1,377 +1,456 @@
const { __ } = wp.i18n;
-const { InspectorControls, BlockControls } = wp.blockEditor
+const { InspectorControls, BlockControls } = wp.blockEditor;
const { Component, Fragment } = wp.element;
const { PanelBody, ToggleControl, TextControl, RangeControl, Toolbar, Button } = wp.components;
-const { Media, Separator, gloalSettings: { globalSettingsPanel, animationSettings }, Inline: { InlineToolbar }, withCSSGenerator, InspectorTabs, InspectorTab } = wp.qubelyComponents
-import mapStyles from './mapStyles'
+const {
+ Media,
+ Separator,
+ gloalSettings: { globalSettingsPanel, animationSettings },
+ Inline: { InlineToolbar },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+} = wp.qubelyComponents;
+import mapStyles from "./mapStyles";
class Edit extends Component {
-
- constructor(props) {
- super(props);
- this.initMap = this.initMap.bind(this);
- this.initSearchBox = this.initSearchBox.bind(this);
- this.initMapLibrary = this.initMapLibrary.bind(this);
- this.setSettings = this.setSettings.bind(this);
- this.getStyles = this.getStyles.bind(this);
- this._saveGlobally = this._saveGlobally.bind(this);
- this.state = { spacer: true, saved_globally: false}
- }
-
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId, apiKey } } = this.props;
- const _client = clientId.substr(0, 6);
-
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId !== _client) {
- setAttributes({ uniqueId: _client });
- }
-
- const mapIframe = this.refs.qubelyGoogleMapIframe;
- if (typeof mapIframe !== 'undefined') {
- mapIframe.addEventListener('click', (e) => {
- e.preventDefault();
- });
- }
-
- if(qubely_admin.qubely_gmap_api_key) {
- setAttributes({apiKey: qubely_admin.qubely_gmap_api_key});
- this.initMapLibrary(qubely_admin.qubely_gmap_api_key);
- } else if(apiKey) {
- this.initMapLibrary(apiKey);
- } else {
- this.initMapLibrary('');
- }
-
- }
-
- async _saveGlobally(apiKey) {
- if(!apiKey) return;
-
- try {
- await wp.apiFetch({
- path: 'qubely/v1/add_qubely_options',
- method: 'POST',
- data: {key: 'qubely_gmap_api_key', value: apiKey}
- });
- this.setState({saved_globally: true});
- } catch (e) {
- // debug
- console.log(e);
- }
- }
-
- initMapLibrary(apiKey) {
- const { initMap, initSearchBox, loadScriptAsync } = this;
- this.props.setAttributes({ apiKey: apiKey });
- if (apiKey) {
- const apiURL = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=initMap`;
- window.initMap = initMap;
- if (typeof google === 'object' && typeof google.maps === 'object') {
- initMap();
- initSearchBox();
- } else {
- loadScriptAsync(apiURL).then(() => {
- initMap();
- initSearchBox();
- });
- }
- }
- }
-
- loadScriptAsync(src) {
- return new Promise((resolve, reject) => {
- const tag = document.createElement('script');
- tag.id = "qubely-gmap"
- tag.src = src;
- tag.async = true;
- tag.onload = () => {
- resolve();
- };
- const firstScriptTag = document.getElementsByTagName('script')[0];
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- });
- }
-
- initSearchBox() {
- const { setSettings, props: { attributes, setAttributes } } = this;
- let { mapAddress } = attributes;
- // Create the search box and link it to the UI element.
- const input = this.refs.mapAddress;
- const autocomplete = new google.maps.places.Autocomplete(input);
- autocomplete.setFields(['place_id', 'geometry', 'formatted_address']);
- autocomplete.addListener('place_changed', () => {
- var place = autocomplete.getPlace();
- if (!place.geometry) {
- return;
- }
- mapAddress = place.formatted_address;
- setAttributes({ placeID: place.place_id });
- setSettings('mapAddress', mapAddress);
- input.value = mapAddress;
- });
- input.value = mapAddress;
- }
-
- initMap() {
- const { getStyles, props: { attributes, setAttributes } } = this;
- const { placeID, zoom, mapStyle, showZoomButtons, showMapTypeButtons, showStreetViewButton, showFullscreenButton, optionDraggable, showMarker, iconPointer } = attributes;
- const mapCanvas = this.refs.qubelyGoogleMap;
- const mapOptions = {
- center: { lat: 11.5024338, lng: 17.7578122 },
- zoom: 1,
- zoomControl: showZoomButtons,
- mapTypeControl: showMapTypeButtons,
- streetViewControl: showStreetViewButton,
- fullscreenControl: showFullscreenButton,
- draggable: optionDraggable,
- styles: mapStyle ? getStyles(mapStyle) : [],
- }
- const map = new google.maps.Map(mapCanvas, mapOptions);
-
- if (placeID) {
- var request = {
- placeId: placeID,
- fields: ['place_id', 'geometry', 'name', 'formatted_address', 'adr_address', 'website']
- };
-
- const service = new google.maps.places.PlacesService(map);
- service.getDetails(request, (place, status) => {
- if (status === google.maps.places.PlacesServiceStatus.OK) {
-
- if (place.geometry.viewport) {
- map.fitBounds(place.geometry.viewport);
- } else {
- setAttributes({ zoom: 16 });
- map.setCenter(place.geometry.location);
- map.setZoom(zoom);
- }
-
- let markerOption = { map: map };
- if (iconPointer) markerOption.icon = iconPointer;
- const marker = new google.maps.Marker(markerOption);
- // Set the position of the marker using the place ID and location.
- marker.setPlace({
- placeId: place.place_id,
- location: place.geometry.location
- });
- marker.setVisible(showMarker);
-
- const contentString = '
' + place.name + '
' +
- place.adr_address + '
' +
- '
';
-
- const infowindow = new google.maps.InfoWindow({
- content: contentString
- });
- marker.addListener('click', function () {
- infowindow.open(map, marker);
- });
- }
- });
- }
- }
-
- setSettings(type, val) {
- const { attributes: { apiKey }, setAttributes } = this.props;
- setAttributes({ [type]: val });
- if (apiKey) setTimeout(() => this.initMap(), 300);
- }
-
- getStyles(string) {
- let result = [];
- try {
- result = JSON.parse(string);
- } catch (e) {
- return [];
- }
- return result;
- }
-
- render() {
- const {
- setAttributes,
- attributes: {
- uniqueId,
- className,
- zoom,
- height,
- apiKey,
- mapAddress,
- selectedStyle,
- showZoomButtons,
- showMapTypeButtons,
- showStreetViewButton,
- showFullscreenButton,
- optionDraggable,
- showMarker,
- iconPointer,
-
- //animation
- animation,
- //global
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- globalZindex,
- hideTablet,
- hideMobile,
- globalCss }
- } = this.props;
-
- const setting_url = qubely_admin.admin_url + 'admin.php?page=qubely-settings';
-
- return (
-
-
-
-
-
- {
- (qubely_admin.qubely_gmap_api_key || this.state.saved_globally ) ? (
-
- ) : (
- apiKey ? (
-
- this.initMapLibrary(val)} />
- this._saveGlobally(apiKey)} isPrimary>{__('Set globally')}
-
- ) : (
-
- )
- )
- }
-
- this.setSettings('zoom', val)} />
- this.setSettings('height', val)} />
-
-
- {!apiKey &&
- {__('Need Google API key extend feature.')}
-
-
- {mapStyles.map((option, index) => {
- return (
-
-
{
- this.setSettings('selectedStyle', option.value);
- this.setSettings('mapStyle', JSON.stringify(option.json));
- }}
- src={option.image}
- title={__(option.label)}
- alt={__('Map Style')}
- />
-
{__(option.label)}
-
- );
- })}
-
-
-
- this.setSettings('showZoomButtons', val)} />
- this.setSettings('showMapTypeButtons', val)} />
- this.setSettings('showStreetViewButton', val)} />
- this.setSettings('showFullscreenButton', val)} />
- this.setSettings('optionDraggable', val)} />
- this.setSettings('showMarker', val)} />
- {showMarker &&
-
- this.setSettings('iconPointer', val.url)} />
-
- }
-
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
-
-
-
-
-
-
-
-
-
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
-
- {!apiKey &&
-
- this.props.setAttributes({ mapAddress: val })}
- />
-
-
- }
-
- );
- }
+ constructor(props) {
+ super(props);
+ this.initMap = this.initMap.bind(this);
+ this.initSearchBox = this.initSearchBox.bind(this);
+ this.initMapLibrary = this.initMapLibrary.bind(this);
+ this.setSettings = this.setSettings.bind(this);
+ this.getStyles = this.getStyles.bind(this);
+ this._saveGlobally = this._saveGlobally.bind(this);
+ this.state = { spacer: true, saved_globally: false };
+ }
+
+ componentDidMount() {
+ const {
+ setAttributes,
+ attributes: { apiKey },
+ } = this.props;
+
+ const mapIframe = this.refs.qubelyGoogleMapIframe;
+ if (typeof mapIframe !== "undefined") {
+ mapIframe.addEventListener("click", (e) => {
+ e.preventDefault();
+ });
+ }
+
+ if (qubely_admin.qubely_gmap_api_key) {
+ setAttributes({ apiKey: qubely_admin.qubely_gmap_api_key });
+ this.initMapLibrary(qubely_admin.qubely_gmap_api_key);
+ } else if (apiKey) {
+ this.initMapLibrary(apiKey);
+ } else {
+ this.initMapLibrary("");
+ }
+ }
+
+ async _saveGlobally(apiKey) {
+ if (!apiKey) return;
+
+ try {
+ await wp.apiFetch({
+ path: "qubely/v1/add_qubely_options",
+ method: "POST",
+ data: { key: "qubely_gmap_api_key", value: apiKey },
+ });
+ this.setState({ saved_globally: true });
+ } catch (e) {
+ // debug
+ console.log(e);
+ }
+ }
+
+ initMapLibrary(apiKey) {
+ const { initMap, initSearchBox, loadScriptAsync } = this;
+ this.props.setAttributes({ apiKey: apiKey });
+ if (apiKey) {
+ const apiURL = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=initMap`;
+ window.initMap = initMap;
+ if (typeof google === "object" && typeof google.maps === "object") {
+ initMap();
+ initSearchBox();
+ } else {
+ loadScriptAsync(apiURL).then(() => {
+ initMap();
+ initSearchBox();
+ });
+ }
+ }
+ }
+
+ loadScriptAsync(src) {
+ return new Promise((resolve, reject) => {
+ const tag = document.createElement("script");
+ tag.id = "qubely-gmap";
+ tag.src = src;
+ tag.async = true;
+ tag.onload = () => {
+ resolve();
+ };
+ const firstScriptTag = document.getElementsByTagName("script")[0];
+ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+ });
+ }
+
+ initSearchBox() {
+ const {
+ setSettings,
+ props: { attributes, setAttributes },
+ } = this;
+ let { mapAddress } = attributes;
+ // Create the search box and link it to the UI element.
+ const input = this.refs.mapAddress;
+ const autocomplete = new google.maps.places.Autocomplete(input);
+ autocomplete.setFields(["place_id", "geometry", "formatted_address"]);
+ autocomplete.addListener("place_changed", () => {
+ var place = autocomplete.getPlace();
+ if (!place.geometry) {
+ return;
+ }
+ mapAddress = place.formatted_address;
+ setAttributes({ placeID: place.place_id });
+ setSettings("mapAddress", mapAddress);
+ input.value = mapAddress;
+ });
+ input.value = mapAddress;
+ }
+
+ initMap() {
+ const {
+ getStyles,
+ props: { attributes, setAttributes },
+ } = this;
+ const {
+ placeID,
+ zoom,
+ mapStyle,
+ showZoomButtons,
+ showMapTypeButtons,
+ showStreetViewButton,
+ showFullscreenButton,
+ optionDraggable,
+ showMarker,
+ iconPointer,
+ } = attributes;
+ const mapCanvas = this.refs.qubelyGoogleMap;
+ const mapOptions = {
+ center: { lat: 11.5024338, lng: 17.7578122 },
+ zoom: 1,
+ zoomControl: showZoomButtons,
+ mapTypeControl: showMapTypeButtons,
+ streetViewControl: showStreetViewButton,
+ fullscreenControl: showFullscreenButton,
+ draggable: optionDraggable,
+ styles: mapStyle ? getStyles(mapStyle) : [],
+ };
+ const map = new google.maps.Map(mapCanvas, mapOptions);
+
+ if (placeID) {
+ var request = {
+ placeId: placeID,
+ fields: ["place_id", "geometry", "name", "formatted_address", "adr_address", "website"],
+ };
+
+ const service = new google.maps.places.PlacesService(map);
+ service.getDetails(request, (place, status) => {
+ if (status === google.maps.places.PlacesServiceStatus.OK) {
+ if (place.geometry.viewport) {
+ map.fitBounds(place.geometry.viewport);
+ } else {
+ setAttributes({ zoom: 16 });
+ map.setCenter(place.geometry.location);
+ map.setZoom(zoom);
+ }
+
+ let markerOption = { map: map };
+ if (iconPointer) markerOption.icon = iconPointer;
+ const marker = new google.maps.Marker(markerOption);
+ // Set the position of the marker using the place ID and location.
+ marker.setPlace({
+ placeId: place.place_id,
+ location: place.geometry.location,
+ });
+ marker.setVisible(showMarker);
+
+ const contentString =
+ '
' +
+ place.name +
+ '
' +
+ place.adr_address +
+ "
" +
+ '
";
+
+ const infowindow = new google.maps.InfoWindow({
+ content: contentString,
+ });
+ marker.addListener("click", function () {
+ infowindow.open(map, marker);
+ });
+ }
+ });
+ }
+ }
+
+ setSettings(type, val) {
+ const {
+ attributes: { apiKey },
+ setAttributes,
+ } = this.props;
+ setAttributes({ [type]: val });
+ if (apiKey) setTimeout(() => this.initMap(), 300);
+ }
+
+ getStyles(string) {
+ let result = [];
+ try {
+ result = JSON.parse(string);
+ } catch (e) {
+ return [];
+ }
+ return result;
+ }
+
+ render() {
+ const {
+ setAttributes,
+ attributes: {
+ uniqueId,
+ className,
+ zoom,
+ height,
+ apiKey,
+ mapAddress,
+ selectedStyle,
+ showZoomButtons,
+ showMapTypeButtons,
+ showStreetViewButton,
+ showFullscreenButton,
+ optionDraggable,
+ showMarker,
+ iconPointer,
+
+ //animation
+ animation,
+ //global
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ },
+ } = this.props;
+
+ const setting_url = qubely_admin.admin_url + "admin.php?page=qubely-settings";
+
+ return (
+
+
+
+
+
+ {qubely_admin.qubely_gmap_api_key || this.state.saved_globally ? (
+
+ ) : apiKey ? (
+
+ this.initMapLibrary(val)}
+ />
+ this._saveGlobally(apiKey)} isPrimary>
+ {__("Set globally")}
+
+
+ ) : (
+
+ )}
+
+ this.setSettings("zoom", val)}
+ />
+ this.setSettings("height", val)}
+ />
+
+
+ {!apiKey && (
+
+ {__("Need Google API key extend feature.")}
+
+ )}
+
+
+
+ {mapStyles.map((option, index) => {
+ return (
+
+
{
+ this.setSettings("selectedStyle", option.value);
+ this.setSettings("mapStyle", JSON.stringify(option.json));
+ }}
+ src={option.image}
+ title={__(option.label)}
+ alt={__("Map Style")}
+ />
+
{__(option.label)}
+
+ );
+ })}
+
+
+
+ this.setSettings("showZoomButtons", val)}
+ />
+ this.setSettings("showMapTypeButtons", val)}
+ />
+ this.setSettings("showStreetViewButton", val)}
+ />
+ this.setSettings("showFullscreenButton", val)}
+ />
+ this.setSettings("optionDraggable", val)}
+ />
+ this.setSettings("showMarker", val)}
+ />
+ {showMarker && (
+
+ this.setSettings("iconPointer", val.url)}
+ />
+
+ )}
+
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+
+
+
+
+
+
+
+
+
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
+
+
+
+ {!apiKey && (
+
+ this.props.setAttributes({ mapAddress: val })}
+ />
+
+
+ )}
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/map/Save.js b/assets/reactjs/src/blocks/map/Save.js
index d50285d3..c45f0d83 100644
--- a/assets/reactjs/src/blocks/map/Save.js
+++ b/assets/reactjs/src/blocks/map/Save.js
@@ -1,38 +1,63 @@
const { Component } = wp.element;
-const { HelperFunction: { animationAttr } } = wp.qubelyComponents
+const {
+ HelperFunction: { animationAttr },
+} = wp.qubelyComponents;
class Save extends Component {
- render() {
- const { uniqueId, animation, placeID, mapAddress, zoom, height, apiKey, mapStyle, showZoomButtons, showMapTypeButtons, showStreetViewButton, showFullscreenButton, optionDraggable, showMarker, iconPointer } = this.props.attributes;
- const attrs = {
- 'data-apiKey': apiKey,
- 'data-placeID': placeID,
- 'data-zoom': zoom,
- 'data-show-zoom-buttons': showZoomButtons ? 'true' : 'false',
- 'data-show-map-type-buttons': showMapTypeButtons ? 'true' : 'false',
- 'data-show-street-view-button': showStreetViewButton ? 'true' : 'false',
- 'data-show-fullscreen-button': showFullscreenButton ? 'true' : 'false',
- 'data-option-draggable': optionDraggable ? 'true' : 'false',
- 'data-show-marker': showMarker ? 'true' : 'false',
- 'data-icon-pointer': iconPointer,
- 'data-styles': mapStyle,
- };
- return (
-
- { apiKey ?
-
- :
-
- }
-
- )
- }
+ render() {
+ const {
+ uniqueId,
+ animation,
+ placeID,
+ mapAddress,
+ zoom,
+ height,
+ apiKey,
+ mapStyle,
+ showZoomButtons,
+ showMapTypeButtons,
+ showStreetViewButton,
+ showFullscreenButton,
+ optionDraggable,
+ showMarker,
+ iconPointer,
+ } = this.props.attributes;
+ const attrs = {
+ "data-apiKey": apiKey,
+ "data-placeID": placeID,
+ "data-zoom": zoom,
+ "data-show-zoom-buttons": showZoomButtons ? "true" : "false",
+ "data-show-map-type-buttons": showMapTypeButtons ? "true" : "false",
+ "data-show-street-view-button": showStreetViewButton ? "true" : "false",
+ "data-show-fullscreen-button": showFullscreenButton ? "true" : "false",
+ "data-option-draggable": optionDraggable ? "true" : "false",
+ "data-show-marker": showMarker ? "true" : "false",
+ "data-icon-pointer": iconPointer,
+ "data-styles": mapStyle,
+ };
+ return (
+
+ {apiKey ? (
+
+ ) : (
+
+ )}
+
+ );
+ }
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/map/index.js b/assets/reactjs/src/blocks/map/index.js
index bce97bda..f66dc1cb 100644
--- a/assets/reactjs/src/blocks/map/index.js
+++ b/assets/reactjs/src/blocks/map/index.js
@@ -1,42 +1,48 @@
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save';
-const { __ } = wp.i18n
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-registerBlockType ( 'qubely/map', {
- title: __( 'Google Map' ),
- description: 'Embed Google Maps easily with Qubely Google Maps.',
- category: 'qubely',
- icon:
,
- keywords: [ __( 'Google Map' ), __( 'Map' ), __( 'Location' ) ],
- supports: {
- align: ['center', 'wide', 'full'],
- },
- example: {
- attributes: {},
- },
- attributes: {
- uniqueId: { type: 'string', default: '' },
- ...globalAttributes, // Global Settings
- spacer: { type: 'object', default:{spaceTop: { md: '10', unit: "px"}, spaceBottom: { md: '10', unit: "px"}}, style: [ { selector: '{{QUBELY}}' }] },
- zoom: { type: 'number', default: '16'},
- height: { type: 'number', default: '350'},
- placeID: { type: 'string', default: 'ChIJgWsCh7C4VTcRwgRZ3btjpY8'},
- mapAddress: { type: 'string', default: ''},
- apiKey: { type: 'string', default: ''},
- iconPointer: { type: 'string', default: '' },
- showZoomButtons: { type: 'boolean', default: true },
- showMapTypeButtons: { type: 'boolean', default: true },
- showStreetViewButton: { type: 'boolean', default: true },
- showFullscreenButton: { type: 'boolean', default: true },
- optionScrollWheel: { type: 'boolean', default: true },
- optionDraggable: { type: 'boolean', default: true },
- showMarker: { type: 'boolean', default: true },
- mapStyle: { type: 'string', default: '' },
- selectedStyle: { type: 'string', default: 'default' },
- },
- edit: Edit,
- save: Save,
+registerBlockType("qubely/map", {
+ title: __("Google Map"),
+ description: "Embed Google Maps easily with Qubely Google Maps.",
+ category: "qubely",
+ icon:
,
+ keywords: [__("Google Map"), __("Map"), __("Location")],
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ example: {
+ attributes: {},
+ },
+ attributes: {
+ uniqueId: { type: "string", default: "" },
+ ...globalAttributes, // Global Settings
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ zoom: { type: "number", default: "16" },
+ height: { type: "number", default: "350" },
+ placeID: { type: "string", default: "ChIJgWsCh7C4VTcRwgRZ3btjpY8" },
+ mapAddress: { type: "string", default: "" },
+ apiKey: { type: "string", default: "" },
+ iconPointer: { type: "string", default: "" },
+ showZoomButtons: { type: "boolean", default: true },
+ showMapTypeButtons: { type: "boolean", default: true },
+ showStreetViewButton: { type: "boolean", default: true },
+ showFullscreenButton: { type: "boolean", default: true },
+ optionScrollWheel: { type: "boolean", default: true },
+ optionDraggable: { type: "boolean", default: true },
+ showMarker: { type: "boolean", default: true },
+ mapStyle: { type: "string", default: "" },
+ selectedStyle: { type: "string", default: "default" },
+ },
+ edit: Edit,
+ save: Save,
});
diff --git a/assets/reactjs/src/blocks/map/mapStyles.js b/assets/reactjs/src/blocks/map/mapStyles.js
index 52b169ad..6527e443 100644
--- a/assets/reactjs/src/blocks/map/mapStyles.js
+++ b/assets/reactjs/src/blocks/map/mapStyles.js
@@ -1,65 +1,363 @@
const { __ } = wp.i18n;
-const base_url = qubely_admin.plugin+'assets/img/blocks/map/'
+const base_url = qubely_admin.plugin + "assets/img/blocks/map/";
export default [
- {
- value: 'default',
- label: __( 'Default' ),
- image: base_url+'style-default.jpg',
- json: [],
- },
- {
- value: 'grey',
- label: __( 'Grey' ),
- image: base_url+'shadow-grey.jpg',
- json: [ { "featureType": "all", "elementType": "labels.text.fill", "stylers": [ { "saturation": 36 }, { "color": "#000000" }, { "lightness": 40 } ] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [ { "visibility": "on" }, { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2 } ] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 21 } ] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" }, { "lightness": 17 } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 29 }, { "weight": 0.2 } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 18 } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 19 } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 17 } ] }],
- },
- {
- value: 'ultra_light',
- label: __( 'Ultra Light' ),
- image: base_url+'ultra-light.jpg',
- json: [ { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#e9e9e9" }, { "lightness": 17 } ] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" }, { "lightness": 20 } ] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#ffffff" }, { "lightness": 17 } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#ffffff" }, { "lightness": 29 }, { "weight": 0.2 } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#ffffff" }, { "lightness": 18 } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#ffffff" }, { "lightness": 16 } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" }, { "lightness": 21 } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#dedede" }, { "lightness": 21 } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "visibility": "on" }, { "color": "#ffffff" }, { "lightness": 16 } ] }, { "elementType": "labels.text.fill", "stylers": [ { "saturation": 36 }, { "color": "#333333" }, { "lightness": 40 } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [ { "color": "#f2f2f2" }, { "lightness": 19 } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "color": "#fefefe" }, { "lightness": 20 } ] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#fefefe" }, { "lightness": 17 }, { "weight": 1.2 } ] } ],
- },
- {
- value: 'midnight',
- label: __( 'Midnight' ),
- image: base_url+'midnight.jpg',
- json: [ { "featureType": "administrative", "elementType": "all", "stylers": [ { "visibility": "on" }, { "lightness": 33 } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2e5d4" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#c5dac6" } ] }, { "featureType": "poi.park", "elementType": "labels", "stylers": [ { "visibility": "on" }, { "lightness": 20 } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "lightness": 20 } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#c5c6c6" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#e4d7c6" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#fbfaf7" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "visibility": "on" }, { "color": "#acbcc9" } ] } ],
- },
- {
- value: 'off_aqua_light',
- label: __( 'Aqua light' ),
- image: base_url+'aqua-light.jpg',
- json: [ { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#378b90" } ] }, { "featureType": "administrative.neighborhood", "elementType": "labels.text.fill", "stylers": [ { "color": "#31b9c1" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#46bcec" }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "color": "#31b9c1" } ] }, { "featureType": "water", "elementType": "geometry.stroke", "stylers": [ { "color": "#31b9c1" } ] } ],
- },
- {
- value: 'inturlam',
- label: __( 'İnturlam' ),
- image: base_url+'inturlam.jpg',
- json: [ { "featureType": "all", "elementType": "all", "stylers": [ { "invert_lightness": true }, { "saturation": 20 }, { "lightness": 50 }, { "gamma": 0.4 }, { "hue": "#00ffee" } ] }, { "featureType": "all", "elementType": "geometry", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "all", "elementType": "labels", "stylers": [ { "visibility": "on" } ] }, { "featureType": "administrative", "elementType": "all", "stylers": [ { "color": "#ffffff" }, { "visibility": "simplified" } ] }, { "featureType": "administrative.land_parcel", "elementType": "geometry.stroke", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#405769" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "color": "#232f3a" } ] } ],
- },
- {
- value: 'lunar',
- label: __( 'Lunar' ),
- image: base_url+'lunar.jpg',
- json: [ { "stylers": [ { "hue": "#ff1a00" }, { "invert_lightness": true }, { "saturation": -100 }, { "lightness": 33 }, { "gamma": 0.5 } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#2D333C" } ] } ],
- },
- {
- value: 'greyscale',
- label: __( 'Greyscale' ),
- image: base_url+'greyscale.jpg',
- json: [ { "featureType": "all", "elementType": "all", "stylers": [ { "saturation": -100 }, { "gamma": 0.5 } ] } ],
- },
- {
- value: 'multi_brand',
- label: __( 'Multi Brand' ),
- image: base_url+'multi-brand.jpg',
- json: [ { "featureType": "all", "elementType": "labels", "stylers": [ { "visibility": "on" } ] }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": [ { "saturation": 36 }, { "color": "#000000" }, { "lightness": 40 } ] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [ { "visibility": "on" }, { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [ { "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2 } ] }, { "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [ { "color": "#e5c163" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#c4c4c4" } ] }, { "featureType": "administrative.neighborhood", "elementType": "labels.text.fill", "stylers": [ { "color": "#e5c163" } ] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 20 } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 21 }, { "visibility": "on" } ] }, { "featureType": "poi.business", "elementType": "geometry", "stylers": [ { "visibility": "on" } ] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#e5c163" }, { "lightness": "0" } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [ { "color": "#e5c163" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 18 } ] }, { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [ { "color": "#575757" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.stroke", "stylers": [ { "color": "#2c2c2c" } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 16 } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#999999" } ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 19 } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#000000" }, { "lightness": 17 } ] } ],
- },
- {
- value: 'purple',
- label: __( 'Purple' ),
- image: base_url+'purple.jpg',
- json: [ { "featureType": "all", "elementType": "all", "stylers": [ { "visibility": "simplified" }, { "hue": "#bc00ff" }, { "saturation": "0" } ] }, { "featureType": "administrative", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#e8b8f9" } ] }, { "featureType": "administrative.country", "elementType": "labels", "stylers": [ { "color": "#ff0000" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#3e114e" }, { "visibility": "simplified" } ] }, { "featureType": "landscape", "elementType": "labels", "stylers": [ { "visibility": "off" }, { "color": "#a02aca" } ] }, { "featureType": "landscape.natural", "elementType": "all", "stylers": [ { "visibility": "simplified" }, { "color": "#2e093b" } ] }, { "featureType": "landscape.natural", "elementType": "labels.text", "stylers": [ { "color": "#9e1010" }, { "visibility": "off" } ] }, { "featureType": "landscape.natural", "elementType": "labels.text.fill", "stylers": [ { "color": "#ff0000" } ] }, { "featureType": "landscape.natural.landcover", "elementType": "all", "stylers": [ { "visibility": "simplified" }, { "color": "#58176e" } ] }, { "featureType": "landscape.natural.landcover", "elementType": "labels.text.fill", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi.business", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "visibility": "simplified" }, { "color": "#a02aca" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#d180ee" } ] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "visibility": "simplified" }, { "color": "#a02aca" } ] }, { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" }, { "color": "#ff0000" } ] }, { "featureType": "road.highway", "elementType": "labels.text", "stylers": [ { "color": "#a02aca" }, { "visibility": "simplified" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#cc81e7" }, { "visibility": "simplified" } ] }, { "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [ { "visibility": "simplified" }, { "hue": "#bc00ff" } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#6d2388" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#c46ce3" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#b7918f" }, { "visibility": "on" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#280b33" } ] }, { "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "simplified" }, { "color": "#a02aca" } ] } ]
- },
-];
\ No newline at end of file
+ {
+ value: "default",
+ label: __("Default"),
+ image: base_url + "style-default.jpg",
+ json: [],
+ },
+ {
+ value: "grey",
+ label: __("Grey"),
+ image: base_url + "shadow-grey.jpg",
+ json: [
+ {
+ featureType: "all",
+ elementType: "labels.text.fill",
+ stylers: [{ saturation: 36 }, { color: "#000000" }, { lightness: 40 }],
+ },
+ {
+ featureType: "all",
+ elementType: "labels.text.stroke",
+ stylers: [{ visibility: "on" }, { color: "#000000" }, { lightness: 16 }],
+ },
+ { featureType: "all", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+ {
+ featureType: "administrative",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#000000" }, { lightness: 20 }],
+ },
+ {
+ featureType: "administrative",
+ elementType: "geometry.stroke",
+ stylers: [{ color: "#000000" }, { lightness: 17 }, { weight: 1.2 }],
+ },
+ { featureType: "landscape", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 20 }] },
+ { featureType: "poi", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 21 }] },
+ {
+ featureType: "road.highway",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#000000" }, { lightness: 17 }],
+ },
+ {
+ featureType: "road.highway",
+ elementType: "geometry.stroke",
+ stylers: [{ color: "#000000" }, { lightness: 29 }, { weight: 0.2 }],
+ },
+ {
+ featureType: "road.arterial",
+ elementType: "geometry",
+ stylers: [{ color: "#000000" }, { lightness: 18 }],
+ },
+ { featureType: "road.local", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 16 }] },
+ { featureType: "transit", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 19 }] },
+ { featureType: "water", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 17 }] },
+ ],
+ },
+ {
+ value: "ultra_light",
+ label: __("Ultra Light"),
+ image: base_url + "ultra-light.jpg",
+ json: [
+ { featureType: "water", elementType: "geometry", stylers: [{ color: "#e9e9e9" }, { lightness: 17 }] },
+ { featureType: "landscape", elementType: "geometry", stylers: [{ color: "#f5f5f5" }, { lightness: 20 }] },
+ {
+ featureType: "road.highway",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#ffffff" }, { lightness: 17 }],
+ },
+ {
+ featureType: "road.highway",
+ elementType: "geometry.stroke",
+ stylers: [{ color: "#ffffff" }, { lightness: 29 }, { weight: 0.2 }],
+ },
+ {
+ featureType: "road.arterial",
+ elementType: "geometry",
+ stylers: [{ color: "#ffffff" }, { lightness: 18 }],
+ },
+ { featureType: "road.local", elementType: "geometry", stylers: [{ color: "#ffffff" }, { lightness: 16 }] },
+ { featureType: "poi", elementType: "geometry", stylers: [{ color: "#f5f5f5" }, { lightness: 21 }] },
+ { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#dedede" }, { lightness: 21 }] },
+ {
+ elementType: "labels.text.stroke",
+ stylers: [{ visibility: "on" }, { color: "#ffffff" }, { lightness: 16 }],
+ },
+ { elementType: "labels.text.fill", stylers: [{ saturation: 36 }, { color: "#333333" }, { lightness: 40 }] },
+ { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+ { featureType: "transit", elementType: "geometry", stylers: [{ color: "#f2f2f2" }, { lightness: 19 }] },
+ {
+ featureType: "administrative",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#fefefe" }, { lightness: 20 }],
+ },
+ {
+ featureType: "administrative",
+ elementType: "geometry.stroke",
+ stylers: [{ color: "#fefefe" }, { lightness: 17 }, { weight: 1.2 }],
+ },
+ ],
+ },
+ {
+ value: "midnight",
+ label: __("Midnight"),
+ image: base_url + "midnight.jpg",
+ json: [
+ { featureType: "administrative", elementType: "all", stylers: [{ visibility: "on" }, { lightness: 33 }] },
+ { featureType: "landscape", elementType: "all", stylers: [{ color: "#f2e5d4" }] },
+ { featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#c5dac6" }] },
+ { featureType: "poi.park", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: 20 }] },
+ { featureType: "road", elementType: "all", stylers: [{ lightness: 20 }] },
+ { featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#c5c6c6" }] },
+ { featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#e4d7c6" }] },
+ { featureType: "road.local", elementType: "geometry", stylers: [{ color: "#fbfaf7" }] },
+ { featureType: "water", elementType: "all", stylers: [{ visibility: "on" }, { color: "#acbcc9" }] },
+ ],
+ },
+ {
+ value: "off_aqua_light",
+ label: __("Aqua light"),
+ image: base_url + "aqua-light.jpg",
+ json: [
+ { featureType: "administrative", elementType: "labels.text.fill", stylers: [{ color: "#444444" }] },
+ {
+ featureType: "administrative.locality",
+ elementType: "labels.text.fill",
+ stylers: [{ color: "#378b90" }],
+ },
+ {
+ featureType: "administrative.neighborhood",
+ elementType: "labels.text.fill",
+ stylers: [{ color: "#31b9c1" }],
+ },
+ { featureType: "landscape", elementType: "all", stylers: [{ color: "#f2f2f2" }] },
+ { featureType: "poi", elementType: "all", stylers: [{ visibility: "off" }] },
+ { featureType: "road", elementType: "all", stylers: [{ saturation: -100 }, { lightness: 45 }] },
+ { featureType: "road.highway", elementType: "all", stylers: [{ visibility: "simplified" }] },
+ { featureType: "road.arterial", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+ { featureType: "transit", elementType: "all", stylers: [{ visibility: "off" }] },
+ { featureType: "water", elementType: "all", stylers: [{ color: "#46bcec" }, { visibility: "on" }] },
+ { featureType: "water", elementType: "geometry.fill", stylers: [{ color: "#31b9c1" }] },
+ { featureType: "water", elementType: "geometry.stroke", stylers: [{ color: "#31b9c1" }] },
+ ],
+ },
+ {
+ value: "inturlam",
+ label: __("İnturlam"),
+ image: base_url + "inturlam.jpg",
+ json: [
+ {
+ featureType: "all",
+ elementType: "all",
+ stylers: [
+ { invert_lightness: true },
+ { saturation: 20 },
+ { lightness: 50 },
+ { gamma: 0.4 },
+ { hue: "#00ffee" },
+ ],
+ },
+ { featureType: "all", elementType: "geometry", stylers: [{ visibility: "simplified" }] },
+ { featureType: "all", elementType: "labels", stylers: [{ visibility: "on" }] },
+ {
+ featureType: "administrative",
+ elementType: "all",
+ stylers: [{ color: "#ffffff" }, { visibility: "simplified" }],
+ },
+ {
+ featureType: "administrative.land_parcel",
+ elementType: "geometry.stroke",
+ stylers: [{ visibility: "simplified" }],
+ },
+ { featureType: "landscape", elementType: "all", stylers: [{ color: "#405769" }] },
+ { featureType: "water", elementType: "geometry.fill", stylers: [{ color: "#232f3a" }] },
+ ],
+ },
+ {
+ value: "lunar",
+ label: __("Lunar"),
+ image: base_url + "lunar.jpg",
+ json: [
+ {
+ stylers: [
+ { hue: "#ff1a00" },
+ { invert_lightness: true },
+ { saturation: -100 },
+ { lightness: 33 },
+ { gamma: 0.5 },
+ ],
+ },
+ { featureType: "water", elementType: "geometry", stylers: [{ color: "#2D333C" }] },
+ ],
+ },
+ {
+ value: "greyscale",
+ label: __("Greyscale"),
+ image: base_url + "greyscale.jpg",
+ json: [{ featureType: "all", elementType: "all", stylers: [{ saturation: -100 }, { gamma: 0.5 }] }],
+ },
+ {
+ value: "multi_brand",
+ label: __("Multi Brand"),
+ image: base_url + "multi-brand.jpg",
+ json: [
+ { featureType: "all", elementType: "labels", stylers: [{ visibility: "on" }] },
+ {
+ featureType: "all",
+ elementType: "labels.text.fill",
+ stylers: [{ saturation: 36 }, { color: "#000000" }, { lightness: 40 }],
+ },
+ {
+ featureType: "all",
+ elementType: "labels.text.stroke",
+ stylers: [{ visibility: "on" }, { color: "#000000" }, { lightness: 16 }],
+ },
+ { featureType: "all", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+ {
+ featureType: "administrative",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#000000" }, { lightness: 20 }],
+ },
+ {
+ featureType: "administrative",
+ elementType: "geometry.stroke",
+ stylers: [{ color: "#000000" }, { lightness: 17 }, { weight: 1.2 }],
+ },
+ { featureType: "administrative.country", elementType: "labels.text.fill", stylers: [{ color: "#e5c163" }] },
+ {
+ featureType: "administrative.locality",
+ elementType: "labels.text.fill",
+ stylers: [{ color: "#c4c4c4" }],
+ },
+ {
+ featureType: "administrative.neighborhood",
+ elementType: "labels.text.fill",
+ stylers: [{ color: "#e5c163" }],
+ },
+ { featureType: "landscape", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 20 }] },
+ {
+ featureType: "poi",
+ elementType: "geometry",
+ stylers: [{ color: "#000000" }, { lightness: 21 }, { visibility: "on" }],
+ },
+ { featureType: "poi.business", elementType: "geometry", stylers: [{ visibility: "on" }] },
+ {
+ featureType: "road.highway",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#e5c163" }, { lightness: "0" }],
+ },
+ { featureType: "road.highway", elementType: "geometry.stroke", stylers: [{ visibility: "off" }] },
+ { featureType: "road.highway", elementType: "labels.text.fill", stylers: [{ color: "#ffffff" }] },
+ { featureType: "road.highway", elementType: "labels.text.stroke", stylers: [{ color: "#e5c163" }] },
+ {
+ featureType: "road.arterial",
+ elementType: "geometry",
+ stylers: [{ color: "#000000" }, { lightness: 18 }],
+ },
+ { featureType: "road.arterial", elementType: "geometry.fill", stylers: [{ color: "#575757" }] },
+ { featureType: "road.arterial", elementType: "labels.text.fill", stylers: [{ color: "#ffffff" }] },
+ { featureType: "road.arterial", elementType: "labels.text.stroke", stylers: [{ color: "#2c2c2c" }] },
+ { featureType: "road.local", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 16 }] },
+ { featureType: "road.local", elementType: "labels.text.fill", stylers: [{ color: "#999999" }] },
+ { featureType: "transit", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 19 }] },
+ { featureType: "water", elementType: "geometry", stylers: [{ color: "#000000" }, { lightness: 17 }] },
+ ],
+ },
+ {
+ value: "purple",
+ label: __("Purple"),
+ image: base_url + "purple.jpg",
+ json: [
+ {
+ featureType: "all",
+ elementType: "all",
+ stylers: [{ visibility: "simplified" }, { hue: "#bc00ff" }, { saturation: "0" }],
+ },
+ { featureType: "administrative", elementType: "all", stylers: [{ visibility: "simplified" }] },
+ { featureType: "administrative", elementType: "labels.text.fill", stylers: [{ color: "#e8b8f9" }] },
+ { featureType: "administrative.country", elementType: "labels", stylers: [{ color: "#ff0000" }] },
+ {
+ featureType: "administrative.land_parcel",
+ elementType: "labels.text.fill",
+ stylers: [{ visibility: "simplified" }],
+ },
+ {
+ featureType: "landscape",
+ elementType: "all",
+ stylers: [{ color: "#3e114e" }, { visibility: "simplified" }],
+ },
+ { featureType: "landscape", elementType: "labels", stylers: [{ visibility: "off" }, { color: "#a02aca" }] },
+ {
+ featureType: "landscape.natural",
+ elementType: "all",
+ stylers: [{ visibility: "simplified" }, { color: "#2e093b" }],
+ },
+ {
+ featureType: "landscape.natural",
+ elementType: "labels.text",
+ stylers: [{ color: "#9e1010" }, { visibility: "off" }],
+ },
+ { featureType: "landscape.natural", elementType: "labels.text.fill", stylers: [{ color: "#ff0000" }] },
+ {
+ featureType: "landscape.natural.landcover",
+ elementType: "all",
+ stylers: [{ visibility: "simplified" }, { color: "#58176e" }],
+ },
+ {
+ featureType: "landscape.natural.landcover",
+ elementType: "labels.text.fill",
+ stylers: [{ visibility: "simplified" }],
+ },
+ { featureType: "poi", elementType: "all", stylers: [{ visibility: "off" }] },
+ { featureType: "poi.business", elementType: "all", stylers: [{ visibility: "off" }] },
+ { featureType: "road", elementType: "all", stylers: [{ saturation: -100 }, { lightness: 45 }] },
+ {
+ featureType: "road",
+ elementType: "geometry",
+ stylers: [{ visibility: "simplified" }, { color: "#a02aca" }],
+ },
+ { featureType: "road", elementType: "labels", stylers: [{ visibility: "simplified" }] },
+ { featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#d180ee" }] },
+ { featureType: "road", elementType: "labels.text.stroke", stylers: [{ visibility: "simplified" }] },
+ { featureType: "road.highway", elementType: "all", stylers: [{ visibility: "simplified" }] },
+ {
+ featureType: "road.highway",
+ elementType: "geometry",
+ stylers: [{ visibility: "simplified" }, { color: "#a02aca" }],
+ },
+ {
+ featureType: "road.highway",
+ elementType: "labels",
+ stylers: [{ visibility: "off" }, { color: "#ff0000" }],
+ },
+ {
+ featureType: "road.highway",
+ elementType: "labels.text",
+ stylers: [{ color: "#a02aca" }, { visibility: "simplified" }],
+ },
+ {
+ featureType: "road.highway",
+ elementType: "labels.text.fill",
+ stylers: [{ color: "#cc81e7" }, { visibility: "simplified" }],
+ },
+ {
+ featureType: "road.highway",
+ elementType: "labels.text.stroke",
+ stylers: [{ visibility: "simplified" }, { hue: "#bc00ff" }],
+ },
+ { featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#6d2388" }] },
+ { featureType: "road.arterial", elementType: "labels.text.fill", stylers: [{ color: "#c46ce3" }] },
+ { featureType: "road.arterial", elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+ { featureType: "transit", elementType: "all", stylers: [{ visibility: "off" }] },
+ { featureType: "water", elementType: "all", stylers: [{ color: "#b7918f" }, { visibility: "on" }] },
+ { featureType: "water", elementType: "geometry", stylers: [{ color: "#280b33" }] },
+ {
+ featureType: "water",
+ elementType: "labels",
+ stylers: [{ visibility: "simplified" }, { color: "#a02aca" }],
+ },
+ ],
+ },
+];
diff --git a/assets/reactjs/src/blocks/map/style.scss b/assets/reactjs/src/blocks/map/style.scss
index 4b23ec24..ebed1fcb 100644
--- a/assets/reactjs/src/blocks/map/style.scss
+++ b/assets/reactjs/src/blocks/map/style.scss
@@ -1,92 +1,92 @@
.qubely-google-map {
- position: relative;
- &::before {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.05);
- cursor: pointer;
- }
- .qubely-google-gmap-input {
- border: 1px solid #E7E8EB !important;
- border-radius: 4px !important;
- margin-bottom: 15px;
- width: 100%;
- padding: 12px 20px !important;
- }
- .qubely-google-map-info-box {
- position: absolute;
- top: 10%;
- right: 10%;
- background: #f5f5f5;
- padding: 15px;
- .qubely-google-map-box-title {
- line-height: 1;
- i,h5 {
- font-size: 18px;
- margin: 5px 0;
- }
- }
- .qubely-google-map-content-item {
- margin-top: 10px;
- p {
- line-height: 1;
- font-size: 12px;
- }
- }
- }
+ position: relative;
+ &::before {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.05);
+ cursor: pointer;
+ }
+ .qubely-google-gmap-input {
+ border: 1px solid #e7e8eb !important;
+ border-radius: 4px !important;
+ margin-bottom: 15px;
+ width: 100%;
+ padding: 12px 20px !important;
+ }
+ .qubely-google-map-info-box {
+ position: absolute;
+ top: 10%;
+ right: 10%;
+ background: #f5f5f5;
+ padding: 15px;
+ .qubely-google-map-box-title {
+ line-height: 1;
+ i,
+ h5 {
+ font-size: 18px;
+ margin: 5px 0;
+ }
+ }
+ .qubely-google-map-content-item {
+ margin-top: 10px;
+ p {
+ line-height: 1;
+ font-size: 12px;
+ }
+ }
+ }
}
.qubely-map-style {
- max-width: 44%;
- float: left;
- margin: 5px;
- // opacity: 0.75;
+ max-width: 44%;
+ float: left;
+ margin: 5px;
+ // opacity: 0.75;
}
.qubely-map-style img {
- max-width: 100%;
- border: 2px solid #d6d6d6;
- border-radius: 5px;
- cursor: pointer;
+ max-width: 100%;
+ border: 2px solid #d6d6d6;
+ border-radius: 5px;
+ cursor: pointer;
}
.qubely-map-style.qubely-map-style-active img {
border: 2px solid #0073aa;
}
.qubely-gmap-hide {
- display: none;
+ display: none;
}
.qubely-gmap-marker-window {
- max-width: 250px;
- .qubely-gmap-marker-place {
- font-weight: 700;
- margin-bottom: 10px;
- }
- .qubely-gmap-marker-address {
- line-height: 1.5;
- margin-bottom: 10px;
- }
- .qubely-gmap-marker-url a {
- text-decoration: none;
- }
+ max-width: 250px;
+ .qubely-gmap-marker-place {
+ font-weight: 700;
+ margin-bottom: 10px;
+ }
+ .qubely-gmap-marker-address {
+ line-height: 1.5;
+ margin-bottom: 10px;
+ }
+ .qubely-gmap-marker-url a {
+ text-decoration: none;
+ }
}
-
-.gmap-api-key-control{
- margin-bottom: 24px;
- .components-base-control {
- margin-bottom: 6px;
- }
+.gmap-api-key-control {
+ margin-bottom: 24px;
+ .components-base-control {
+ margin-bottom: 6px;
+ }
}
-.api-notice{
- margin: 0 0 15px;
- background: rgba(0, 255, 55, 0.15);
- padding: 8px 12px;
- border: 1px solid rgba(0,0,0,.1);
- border-radius: 5px;
- line-height: 1.6;
- &.warning {
- background: rgba(229, 195, 52, 0.25);
- }
-}
\ No newline at end of file
+.api-notice {
+ margin: 0 0 15px;
+ background: rgba(0, 255, 55, 0.15);
+ padding: 8px 12px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ line-height: 1.6;
+ &.warning {
+ background: rgba(229, 195, 52, 0.25);
+ }
+}
diff --git a/assets/reactjs/src/blocks/pagesettings/index.js b/assets/reactjs/src/blocks/pagesettings/index.js
index dfacd07b..6fc931de 100644
--- a/assets/reactjs/src/blocks/pagesettings/index.js
+++ b/assets/reactjs/src/blocks/pagesettings/index.js
@@ -1,116 +1,95 @@
-const { __ } = wp.i18n
-const { registerBlockType } = wp.blocks
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
const blockAttrs = {
uniqueId: {
- type: 'string',
- default: ''
+ type: "string",
+ default: "",
},
body: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin), .editor-styles-wrapper .editor-writing-flow *' }
- ]
+ style: [{ selector: "body:not(.wp-admin), .editor-styles-wrapper .editor-writing-flow *" }],
},
h1: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin) h1, .editor-styles-wrapper h1' }
- ]
+ style: [{ selector: "body:not(.wp-admin) h1, .editor-styles-wrapper h1" }],
},
h2: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin) h2, .editor-styles-wrapper h2' }
- ]
+ style: [{ selector: "body:not(.wp-admin) h2, .editor-styles-wrapper h2" }],
},
h3: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin) h3, .editor-styles-wrapper h3' }
- ]
+ style: [{ selector: "body:not(.wp-admin) h3, .editor-styles-wrapper h3" }],
},
h4: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin) h4, .editor-styles-wrapper h4' }
- ]
+ style: [{ selector: "body:not(.wp-admin) h4, .editor-styles-wrapper h4" }],
},
h5: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin) h5, .editor-styles-wrapper h5' }]
+ style: [{ selector: "body:not(.wp-admin) h5, .editor-styles-wrapper h5" }],
},
h6: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin) h6, .editor-styles-wrapper h6' }
- ]
+ style: [{ selector: "body:not(.wp-admin) h6, .editor-styles-wrapper h6" }],
},
button: {
- type: 'object',
+ type: "object",
default: {},
- style: [
- { selector: 'body:not(.wp-admin) .quebly-button, .editor-styles-wrapper .quebly-button' }
- ]
+ style: [{ selector: "body:not(.wp-admin) .quebly-button, .editor-styles-wrapper .quebly-button" }],
},
colorPreset1: {
- type: 'string',
- default: qubely_admin.palette[0]
+ type: "string",
+ default: qubely_admin.palette[0],
},
colorPreset2: {
- type: 'string',
- default: qubely_admin.palette[1]
+ type: "string",
+ default: qubely_admin.palette[1],
},
colorPreset3: {
- type: 'string',
- default: qubely_admin.palette[2]
+ type: "string",
+ default: qubely_admin.palette[2],
},
colorPreset4: {
- type: 'string',
- default: qubely_admin.palette[3]
+ type: "string",
+ default: qubely_admin.palette[3],
},
colorPreset5: {
- type: 'string',
- default: qubely_admin.palette[4]
+ type: "string",
+ default: qubely_admin.palette[4],
},
colorPreset6: {
- type: 'string',
- default: qubely_admin.palette[5]
+ type: "string",
+ default: qubely_admin.palette[5],
},
-}
+};
/**
- * This blog only for global data structure
+ * This blog only for global data structure
* It will not visible for users
*/
-registerBlockType('qubely/pagesettings', {
- title: __('Global Settings'),
- icon: 'book-alt',
- category: 'qubely',
- keywords: [
- __('Global Settings')
- ],
+registerBlockType("qubely/pagesettings", {
+ title: __("Global Settings"),
+ icon: "book-alt",
+ category: "qubely",
+ keywords: [__("Global Settings")],
supports: {
inserter: false,
reusable: false,
- html: false
+ html: false,
},
attributes: {
- ...blockAttrs
+ ...blockAttrs,
},
- edit: function () {
-
- },
- save: function () {
-
- }
-});
\ No newline at end of file
+ edit: function () {},
+ save: function () {},
+});
diff --git a/assets/reactjs/src/blocks/pieprogress/Edit.js b/assets/reactjs/src/blocks/pieprogress/Edit.js
index 85be4d9f..649e31f6 100644
--- a/assets/reactjs/src/blocks/pieprogress/Edit.js
+++ b/assets/reactjs/src/blocks/pieprogress/Edit.js
@@ -1,395 +1,529 @@
-
-import Progress from './Progress'
-import icons from '../../helpers/icons';
+import Progress from "./Progress";
+import icons from "../../helpers/icons";
const { Fragment, Component, createRef } = wp.element;
-const { PanelBody, Toolbar, TextControl } = wp.components
-const { InspectorControls, BlockControls, RichText } = wp.blockEditor
-const { __ } = wp.i18n
+const { PanelBody, Toolbar, TextControl } = wp.components;
+const { InspectorControls, BlockControls, RichText } = wp.blockEditor;
+const { __ } = wp.i18n;
const {
- Styles,
- Range,
- Color,
- ColorAdvanced,
- RadioAdvanced,
- Toggle,
- Typography,
- IconList,
- Media,
- BoxShadow,
- Alignment,
- Inline: { InlineToolbar },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- withCSSGenerator,
- InspectorTabs,
- InspectorTab
-} = wp.qubelyComponents
-
+ Styles,
+ Range,
+ Color,
+ ColorAdvanced,
+ RadioAdvanced,
+ Toggle,
+ Typography,
+ IconList,
+ Media,
+ BoxShadow,
+ Alignment,
+ Inline: { InlineToolbar },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+} = wp.qubelyComponents;
class Edit extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ selector: true,
+ spacer: true,
+ openPanelSetting: "",
+ };
+ this.qubelyContextMenu = createRef();
+ }
- constructor(props) {
- super(props);
- this.state = {
- device: 'md',
- selector: true,
- spacer: true,
- openPanelSetting: ''
- };
- this.qubelyContextMenu = createRef();
- }
-
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
-
- render() {
- const {
- name,
- clientId,
- attributes,
- setAttributes,
- attributes: {
- uniqueId,
- className,
- progress,
- alignment,
- size,
- corner,
- thickness,
- thicknessBg,
- background,
- fillColor,
- layout,
- iconStyle,
- enableIcon,
- iconText,
- iconTextColor,
- iconTypography,
- iconName,
- iconSize,
- image,
- image2x,
- imageAlt,
- imageSize,
- enableHeading,
- heading,
- headingColor,
- headingPosition,
- headingTypography,
- headingSpacing,
- headingAlignment,
- progressShadow,
- circleShadow,
- circleShrink,
- speed,
- //animation
- animation,
- //global
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- globalZindex,
- hideTablet,
- hideMobile,
- globalCss,
- interaction
- }
- } = this.props, { device } = this.state, thicknessCalc = {
- fill: (size / 2),
- outline: (size * (thickness * .5)) / 100,
- outline_fill: (size * (thickness * .5)) / 100,
- }, thicknessBgCalc = {
- fill: size / 2,
- outline: (size * (thicknessBg * .5)) / 100,
- outline_fill: (size * (thickness * .5)) / 100
- }, progressAttr = {
- size,
- layout,
- corner: layout === 'fill' ? 'unset' : corner,
- uniqueId,
- percent: progress,
- thickness: thicknessCalc[layout],
- thicknessBg: thicknessBgCalc[layout],
- emptyFill: background,
- fill: fillColor,
- circleShadow,
- progressShadow,
- circleShrink: ((size - thickness) * .5) * circleShrink / 100,
- duration: speed
- };
-
- return (
-
-
-
-
-
-
-
-
-
- setAttributes({ layout: val })}
- proUpgradation
- options={[
- { value: 'outline', img: icons.pie_outline, label: __('Layout 1') },
- { value: 'outline_fill', img: icons.pie_outline_fill, label: __('Layout 2'), pro: true },
- { value: 'fill', img: icons.pie_fill, label: __('Layout 3'), pro: true },
- ]}
- />
- setAttributes({ size: value })} min={20} max={500} />
-
-
- setAttributes({ progress: value })} min={0} max={100} />
- setAttributes({ fillColor: val })} />
- {layout !== 'fill' && (
- setAttributes({ corner: value })} />
- )
- }
- {
- layout !== 'fill' && setAttributes({ thickness: thickness })} min={1} max={100} />
- }
-
- setAttributes({ progressShadow })} />
- setAttributes({ speed })} min={0} max={2000} />
-
-
-
- {
- layout === 'outline' && setAttributes({ thicknessBg: value })} min={1} max={100} />
- }
- setAttributes({ circleShrink })} min={0} max={100} />
- setAttributes({ background })} />
- setAttributes({ circleShadow })} />
-
-
- setAttributes({ enableIcon })} />
- {enableIcon &&
-
- setAttributes({ iconStyle })} />
- {
- iconStyle === 'icon' && (
-
- setAttributes({ iconName })} />
- setAttributes({ iconSize })} min={10} max={200} />
-
- )
- }
- {
- iconStyle === 'image' && (
+ render() {
+ const {
+ name,
+ clientId,
+ attributes,
+ setAttributes,
+ attributes: {
+ uniqueId,
+ className,
+ progress,
+ alignment,
+ size,
+ corner,
+ thickness,
+ thicknessBg,
+ background,
+ fillColor,
+ layout,
+ iconStyle,
+ enableIcon,
+ iconText,
+ iconTextColor,
+ iconTypography,
+ iconName,
+ iconSize,
+ image,
+ image2x,
+ imageAlt,
+ imageSize,
+ enableHeading,
+ heading,
+ headingColor,
+ headingPosition,
+ headingTypography,
+ headingSpacing,
+ headingAlignment,
+ progressShadow,
+ circleShadow,
+ circleShrink,
+ speed,
+ //animation
+ animation,
+ //global
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ interaction,
+ },
+ } = this.props,
+ { device } = this.state,
+ thicknessCalc = {
+ fill: size / 2,
+ outline: (size * (thickness * 0.5)) / 100,
+ outline_fill: (size * (thickness * 0.5)) / 100,
+ },
+ thicknessBgCalc = {
+ fill: size / 2,
+ outline: (size * (thicknessBg * 0.5)) / 100,
+ outline_fill: (size * (thickness * 0.5)) / 100,
+ },
+ progressAttr = {
+ size,
+ layout,
+ corner: layout === "fill" ? "unset" : corner,
+ uniqueId,
+ percent: progress,
+ thickness: thicknessCalc[layout],
+ thicknessBg: thicknessBgCalc[layout],
+ emptyFill: background,
+ fill: fillColor,
+ circleShadow,
+ progressShadow,
+ circleShrink: ((size - thickness) * 0.5 * circleShrink) / 100,
+ duration: speed,
+ };
-
- setAttributes({ image })} />
- setAttributes({ image2x })} />
+ return (
+
+
+
+
+
+
+
+
+
+ setAttributes({ layout: val })}
+ proUpgradation
+ options={[
+ { value: "outline", img: icons.pie_outline, label: __("Layout 1") },
+ {
+ value: "outline_fill",
+ img: icons.pie_outline_fill,
+ label: __("Layout 2"),
+ pro: true,
+ },
+ { value: "fill", img: icons.pie_fill, label: __("Layout 3"), pro: true },
+ ]}
+ />
+ setAttributes({ size: value })}
+ min={20}
+ max={500}
+ />
+
+
+ setAttributes({ progress: value })}
+ min={0}
+ max={100}
+ />
+ setAttributes({ fillColor: val })}
+ />
+ {layout !== "fill" && (
+ setAttributes({ corner: value })}
+ />
+ )}
+ {layout !== "fill" && (
+ setAttributes({ thickness: thickness })}
+ min={1}
+ max={100}
+ />
+ )}
- {image.url &&
-
- setAttributes({ imageAlt })} />
- setAttributes({ imageSize })} min={imageSize.unit !== 'px' ? 0 : 10} max={imageSize.unit === '%' ? 100 : 500} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
+ setAttributes({ progressShadow })}
+ />
+ setAttributes({ speed })}
+ min={0}
+ max={2000}
+ />
+
-
- )
- }
+
+ {layout === "outline" && (
+ setAttributes({ thicknessBg: value })}
+ min={1}
+ max={100}
+ />
+ )}
+ setAttributes({ circleShrink })}
+ min={0}
+ max={100}
+ />
+ setAttributes({ background })}
+ />
+ setAttributes({ circleShadow })}
+ />
+
+
+ setAttributes({ enableIcon })}
+ />
+ {enableIcon && (
+
+ setAttributes({ iconStyle })}
+ />
+ {iconStyle === "icon" && (
+
+ setAttributes({ iconName })}
+ />
+ setAttributes({ iconSize })}
+ min={10}
+ max={200}
+ />
+
+ )}
+ {iconStyle === "image" && (
+
+ setAttributes({ image })}
+ />
+ setAttributes({ image2x })}
+ />
- {iconStyle === 'text' && (
- setAttributes({ iconText })}
- />
- )}
- {iconStyle !== 'image' && (
- setAttributes({ iconTextColor })} />
- )}
- {(iconStyle === 'text' || iconStyle === 'percent') && (
- setAttributes({ iconTypography })} />
- )}
+ {image.url && (
+
+ setAttributes({ imageAlt })}
+ />
+ setAttributes({ imageSize })}
+ min={imageSize.unit !== "px" ? 0 : 10}
+ max={imageSize.unit === "%" ? 100 : 500}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+ )}
-
- }
-
-
- setAttributes({ enableHeading })} />
- {enableHeading && (
-
- setAttributes({ heading })} />
- {heading && setAttributes({ headingColor })} />}
- setAttributes({ headingPosition })} />
- {heading && (
-
- {headingPosition === 'outside' && (
- setAttributes({ headingAlignment })} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- )}
- setAttributes({ headingSpacing })} min={0} max={200} />
- setAttributes({ headingTypography })} />
-
- )}
-
- )
- }
-
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
-
+ {iconStyle === "text" && (
+ setAttributes({ iconText })}
+ />
+ )}
+ {iconStyle !== "image" && (
+ setAttributes({ iconTextColor })}
+ />
+ )}
+ {(iconStyle === "text" || iconStyle === "percent") && (
+ setAttributes({ iconTypography })}
+ />
+ )}
+
+ )}
+
+
+ setAttributes({ enableHeading })}
+ />
+ {enableHeading && (
+
+ setAttributes({ heading })}
+ />
+ {heading && (
+ setAttributes({ headingColor })}
+ />
+ )}
+ setAttributes({ headingPosition })}
+ />
+ {heading && (
+
+ {headingPosition === "outside" && (
+
+ setAttributes({ headingAlignment })
+ }
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ headingSpacing })}
+ min={0}
+ max={200}
+ />
+
+ setAttributes({ headingTypography })
+ }
+ />
+
+ )}
+
+ )}
+
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
-
-
-
-
+
+
+
+
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- >
-
-
- {(enableIcon || enableHeading) && (
-
- {enableIcon && (
-
- {iconStyle === 'text' && (
- setAttributes({ iconText })}
- />
- )}
- {iconStyle === 'percent' && (
-
- {progress} %
-
- )}
- {iconStyle === 'icon' && (
-
- {
- image.url !== undefined ? (
-
- ) : (
-
- )
- }
-
- )}
- {(enableHeading && headingPosition === 'inside') && (
-
setAttributes({ heading })}
- />
- )}
-
- )}
-
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ >
+
+
+ {(enableIcon || enableHeading) && (
+
+ {enableIcon && (
+
+ {iconStyle === "text" && (
+ setAttributes({ iconText })}
+ />
+ )}
+ {iconStyle === "percent" && (
+
+ {progress} %
+
+ )}
+ {iconStyle === "icon" &&
+ {image.url !== undefined ? (
+
+ ) : (
+
+ )}
+
+ )}
+ {enableHeading && headingPosition === "inside" && (
+
setAttributes({ heading })}
+ />
+ )}
+
+ )}
+
- {(enableHeading && headingPosition === 'outside') && (
-
setAttributes({ heading })}
- />
- )}
-
-
-
-
- );
- }
+ {enableHeading && headingPosition === "outside" && (
+
setAttributes({ heading })}
+ />
+ )}
+
+
+
+
+ );
+ }
}
export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/pieprogress/Progress.js b/assets/reactjs/src/blocks/pieprogress/Progress.js
index 0113072e..63b72f2e 100644
--- a/assets/reactjs/src/blocks/pieprogress/Progress.js
+++ b/assets/reactjs/src/blocks/pieprogress/Progress.js
@@ -1,179 +1,200 @@
-const {CSSProperties} = wp.element
+const { CSSProperties } = wp.element;
const defaultProps = {
- isSaveMode: false,
- size: 150,
- circleShrink: 0,
- thickness: 11,
- thicknessBg: 21,
- percent: 55,
- duration: 1000,
- corner: 'round',
- emptyFill: '#eff4f8',
- layout: 'outline',
- fill: {
- color: '#25b5e1',
- openColor: 1,
- type: 'gradient',
- gradient: {
- type: 'linear',
- color1: '#25b5e1',
- color2: '#45dbca',
- direction: '47',
- start: '0',
- stop: '100'
- }
- },
- progressShadow: {
- blur: 3,
- color: 'rgba(0, 0, 0, .2)',
- horizontal: '7',
- inset: '',
- openShadow: false,
- spread: 0,
- vertical: 2,
- },
- circleShadow: {
- blur: 3,
- color: 'rgba(100, 121, 130, .43)',
- horizontal: '2',
- inset: 'inset',
- openShadow: true,
- spread: 0,
- vertical: 2,
- }
-}
-
+ isSaveMode: false,
+ size: 150,
+ circleShrink: 0,
+ thickness: 11,
+ thicknessBg: 21,
+ percent: 55,
+ duration: 1000,
+ corner: "round",
+ emptyFill: "#eff4f8",
+ layout: "outline",
+ fill: {
+ color: "#25b5e1",
+ openColor: 1,
+ type: "gradient",
+ gradient: {
+ type: "linear",
+ color1: "#25b5e1",
+ color2: "#45dbca",
+ direction: "47",
+ start: "0",
+ stop: "100",
+ },
+ },
+ progressShadow: {
+ blur: 3,
+ color: "rgba(0, 0, 0, .2)",
+ horizontal: "7",
+ inset: "",
+ openShadow: false,
+ spread: 0,
+ vertical: 2,
+ },
+ circleShadow: {
+ blur: 3,
+ color: "rgba(100, 121, 130, .43)",
+ horizontal: "2",
+ inset: "inset",
+ openShadow: true,
+ spread: 0,
+ vertical: 2,
+ },
+};
const Progress = (props) => {
- props = {...defaultProps, ...props}
- const { emptyFill, fill, uniqueId, corner, layout, circleShadow, progressShadow, isSaveMode} = props
- const size = parseInt(props.size)
- const circleShrink = parseInt(props.circleShrink)
- const thickness = parseInt(props.thickness)
- const thicknessBg = parseInt(props.thicknessBg)
- const percent = parseInt(props.percent)
- const duration = isSaveMode ? parseInt(props.duration) : 0
-
-
- const progressStyle = {
- transition: '0ms',
- width: size + 'px',
- // height: size + 'px',
- }
-
- let circleRadiusBg = (size - thicknessBg) * .5
- let circleRadiusFg = (size - thickness) * .5
-
- if(thickness > thicknessBg) {
- circleRadiusBg -= (thickness - thicknessBg) * .5
- }
-
- if(thicknessBg > thickness) {
- circleRadiusFg -= (thicknessBg - thickness) * .5
- }
-
- const circumference = 2 * Math.PI * circleRadiusFg
- const offset = circumference * percent / 100
- const radialPercent = (size /2 * thickness / 100) * .5
-
- return (
-
-
-
- {/*progress shadow*/}
-
- {
- progressShadow.openShadow === true && (
- progressShadow.inset !== 'inset' ? (
-
-
- ) : (
-
-
- )
- )
- }
-
-
- {/*circle shadow*/}
-
- {
- circleShadow.openShadow === true && (
- circleShadow.inset !== 'inset' ? (
-
-
- ) : (
-
-
- )
- )
- }
- {
- fill.type !== 'color' && (
- fill.gradient.type == 'radial' ? (
-
-
- ) : (
-
-
- )
- )
- }
-
- {/* Circle / Background */}
-
-
- );
-}
-
-export default Progress;
\ No newline at end of file
+ props = { ...defaultProps, ...props };
+ const { emptyFill, fill, uniqueId, corner, layout, circleShadow, progressShadow, isSaveMode } = props;
+ const size = parseInt(props.size);
+ const circleShrink = parseInt(props.circleShrink);
+ const thickness = parseInt(props.thickness);
+ const thicknessBg = parseInt(props.thicknessBg);
+ const percent = parseInt(props.percent);
+ const duration = isSaveMode ? parseInt(props.duration) : 0;
+
+ const progressStyle = {
+ transition: "0ms",
+ width: size + "px",
+ // height: size + 'px',
+ };
+
+ let circleRadiusBg = (size - thicknessBg) * 0.5;
+ let circleRadiusFg = (size - thickness) * 0.5;
+
+ if (thickness > thicknessBg) {
+ circleRadiusBg -= (thickness - thicknessBg) * 0.5;
+ }
+
+ if (thicknessBg > thickness) {
+ circleRadiusFg -= (thicknessBg - thickness) * 0.5;
+ }
+
+ const circumference = 2 * Math.PI * circleRadiusFg;
+ const offset = (circumference * percent) / 100;
+ const radialPercent = (((size / 2) * thickness) / 100) * 0.5;
+
+ return (
+
+
+ {/*progress shadow*/}
+
+ {progressShadow.openShadow === true &&
+ (progressShadow.inset !== "inset" ? (
+
+
+ ) : (
+
+
+ ))}
+
+ {/*circle shadow*/}
+
+ {circleShadow.openShadow === true &&
+ (circleShadow.inset !== "inset" ? (
+
+
+ ) : (
+
+
+ ))}
+ {fill.type !== "color" &&
+ (fill.gradient.type == "radial" ? (
+
+
+ ) : (
+
+
+ ))}
+
+ {/* Circle / Background */}
+
+
+ );
+};
+
+export default Progress;
diff --git a/assets/reactjs/src/blocks/pieprogress/Save.js b/assets/reactjs/src/blocks/pieprogress/Save.js
index 2d7bd7a4..69c3089b 100644
--- a/assets/reactjs/src/blocks/pieprogress/Save.js
+++ b/assets/reactjs/src/blocks/pieprogress/Save.js
@@ -1,132 +1,124 @@
-import Progress from './Progress'
+import Progress from "./Progress";
const { Fragment } = wp.element;
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
const { RichText } = wp.blockEditor;
-const { HelperFunction: { animationAttr, IsInteraction } } = wp.qubelyComponents
+const {
+ HelperFunction: { animationAttr, IsInteraction },
+} = wp.qubelyComponents;
const Save = (props) => {
- const {
- uniqueId,
- progress,
- size,
- layout,
- corner,
- enableIcon,
- iconStyle,
- iconText,
- iconName,
- image,
- image2x,
- imageAlt,
- enableHeading,
- headingPosition,
- heading,
- animation,
- interaction,
- thickness,
- thicknessBg,
- background,
- fillColor,
- circleShadow,
- progressShadow,
- circleShrink,
- speed
- } = props.attributes
+ const {
+ uniqueId,
+ progress,
+ size,
+ layout,
+ corner,
+ enableIcon,
+ iconStyle,
+ iconText,
+ iconName,
+ image,
+ image2x,
+ imageAlt,
+ enableHeading,
+ headingPosition,
+ heading,
+ animation,
+ interaction,
+ thickness,
+ thicknessBg,
+ background,
+ fillColor,
+ circleShadow,
+ progressShadow,
+ circleShrink,
+ speed,
+ } = props.attributes;
+ const thicknessCalc = {
+ fill: size / 2,
+ outline: (size * (thickness * 0.5)) / 100,
+ outline_fill: (size * (thickness * 0.5)) / 100,
+ };
- const thicknessCalc = {
- fill: (size / 2),
- outline: (size * (thickness * .5)) / 100,
- outline_fill: (size * (thickness * .5)) / 100,
- }
+ const thicknessBgCalc = {
+ fill: size / 2,
+ outline: (size * (thicknessBg * 0.5)) / 100,
+ outline_fill: (size * (thickness * 0.5)) / 100,
+ };
- const thicknessBgCalc = {
- fill: size / 2,
- outline: (size * (thicknessBg * .5)) / 100,
- outline_fill: (size * (thickness * .5)) / 100
- }
+ const progressAttr = {
+ size,
+ layout,
+ corner: layout === "fill" ? "unset" : corner,
+ uniqueId,
+ percent: progress,
+ thickness: thicknessCalc[layout],
+ thicknessBg: thicknessBgCalc[layout],
+ emptyFill: background,
+ fill: fillColor,
+ circleShadow,
+ progressShadow,
+ circleShrink: ((size - thickness) * 0.5 * circleShrink) / 100,
+ isSaveMode: parseInt(speed) > 0,
+ duration: speed,
+ };
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
+ return (
+
+
+
+ {(enableIcon || enableHeading) && (
+
+ {enableIcon && (
+
+ {iconStyle === "text" &&
+ {progress} %
+
+ )}
+ {iconStyle === "icon" &&
+ {image.url !== undefined ? (
+
+ ) : (
+
+ )}
+
+ )}
- const progressAttr = {
- size,
- layout,
- corner: layout === 'fill' ? 'unset' : corner,
- uniqueId,
- percent: progress,
- thickness: thicknessCalc[layout],
- thicknessBg: thicknessBgCalc[layout],
- emptyFill: background,
- fill: fillColor,
- circleShadow,
- progressShadow,
- circleShrink: ((size - thickness) * .5) * circleShrink / 100,
- isSaveMode: parseInt(speed) > 0,
- duration: speed
- }
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
- return (
-
-
-
- {(enableIcon || enableHeading) && (
-
- {
- enableIcon && (
-
- {iconStyle === 'text' && (
-
- {progress} %
-
- )}
- {iconStyle === 'icon' && (
-
- {
- image.url !== undefined ? (
-
- ) : (
-
- )
- }
-
- )
- }
+ {enableHeading && headingPosition === "inside" && (
+
+ )}
+
+ )}
+
- {(enableHeading && headingPosition === 'inside') && (
-
- )}
-
- )}
-
+ {enableHeading && headingPosition === "outside" && (
+
+ )}
+
+ );
+};
-
- {(enableHeading && headingPosition === 'outside') && (
-
- )}
-
- )
-}
-
-export default Save
+export default Save;
diff --git a/assets/reactjs/src/blocks/pieprogress/index.js b/assets/reactjs/src/blocks/pieprogress/index.js
index 0ba184ec..145ce181 100644
--- a/assets/reactjs/src/blocks/pieprogress/index.js
+++ b/assets/reactjs/src/blocks/pieprogress/index.js
@@ -1,221 +1,228 @@
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save'
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-const { __ } = wp.i18n
-const { registerBlockType } = wp.blocks
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
-if(!qubely_admin.pro_enable) {
+if (!qubely_admin.pro_enable) {
+ registerBlockType("qubely/pieprogress", {
+ title: __("Pie Progress"),
+ description: "Animated circular progress bar",
+ category: "qubely",
+ icon: (
+
+ ),
+ keywords: [__("progress"), __("bar"), __("bar progress")],
+ example: {
+ attributes: {},
+ },
+ attributes: {
+ uniqueId: { type: "string", default: "" },
+ layout: { type: "string", default: "outline" },
+ alignment: {
+ type: "string",
+ default: "flex-start",
+ style: [
+ {
+ selector: "{{QUBELY}} {align-items: {{alignment}}}",
+ },
+ ],
+ },
+ progress: { type: "string", default: 60 },
+ speed: { type: "string", default: 1000 },
+ corner: { type: "string", default: "round" },
+ enableIcon: { type: "boolean", default: true },
+ iconStyle: { type: "string", default: "percent", style: [] },
+ thickness: { type: "string", default: 11, style: [] },
+ circleShrink: { type: "string", default: 0 },
+ thicknessBg: { type: "string", default: 21, style: [] },
+ fillColor: {
+ type: "object",
+ default: {
+ openColor: 1,
+ type: "gradient",
+ color: "#25b5e1",
+ gradient: {
+ type: "linear",
+ color1: "#25b5e1",
+ color2: "#45dbca",
+ direction: "47",
+ start: "0",
+ stop: "100",
+ type: "linear",
+ },
+ },
+ style: [],
+ },
+ size: {
+ type: "string",
+ default: 255,
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-progress-parent, {{QUBELY}} .qubely-pie-progress-heading.qubely-outside{width: {{size}}px}",
+ },
+ ],
+ },
+ iconText: { type: "string", default: "Text" },
+ background: { type: "string", default: "#eff4f8" },
+ iconName: { type: "string", default: "fas fa-rocket" },
+ image: { type: "object", default: {} },
+ image2x: { type: "object", default: {} },
+ imageAlt: { type: "string", default: "" },
+ imageSize: {
+ type: "object",
+ default: {
+ md: "80",
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-progress-inner-text .icon-image:not(.pie-placeholder){ max-width: {{imageSize}} }",
+ },
+ ],
+ },
+ iconSize: {
+ type: "string",
+ default: 60,
+ style: [
+ {
+ condition: [{ key: "iconStyle", relation: "==", value: "icon" }],
+ selector: "{{QUBELY}} span.qubely-pie-icon{font-size: {{iconSize}}px }",
+ },
+ ],
+ },
+ iconTextColor: {
+ type: "string",
+ default: "#062040",
+ style: [
+ {
+ condition: [{ key: "iconStyle", relation: "!=", value: "image" }],
+ selector: "{{QUBELY}} .qubely-progress-inner-text {color: {{iconTextColor}}}",
+ },
+ ],
+ },
+ iconTypography: {
+ type: "object",
+ default: {
+ family: "Helvetica",
+ weight: 300,
+ type: "sans-serif",
+ openTypography: 1,
+ size: {
+ md: 60,
+ unit: "px",
+ },
+ height: {
+ md: 1,
+ unit: "em",
+ },
+ },
+ style: [
+ {
+ condition: [
+ { key: "enableIcon", relation: "==", value: true },
+ { key: "iconStyle", relation: "!=", value: "image" },
+ ],
+ selector: "{{QUBELY}} .qubely-progress-inner-text",
+ },
+ ],
+ },
- registerBlockType('qubely/pieprogress', {
- title: __('Pie Progress'),
- description: 'Animated circular progress bar',
- category: 'qubely',
- icon:
,
- keywords: [__('progress'), __('bar'), __('bar progress')],
- example: {
- attributes: {},
- },
- attributes: {
- uniqueId: {type: 'string', default: ''},
- layout: {type: 'string', default: 'outline'},
- alignment: {
- type: 'string',
- default: 'flex-start',
- style: [
- {
- selector: '{{QUBELY}} {align-items: {{alignment}}}'
- }
- ]
- },
- progress: {type: 'string', default: 60},
- speed: {type: 'string', default: 1000},
- corner: {type: 'string', default: 'round'},
- enableIcon: {type: 'boolean', default: true},
- iconStyle: {type: 'string', default: 'percent', style: []},
- thickness: {type: 'string', default: 11, style: []},
- circleShrink: {type: 'string', default: 0},
- thicknessBg: {type: 'string', default: 21, style: []},
- fillColor: {
- type: 'object',
- default: {
- openColor: 1,
- type: 'gradient',
- color: '#25b5e1',
- gradient: {
- type: 'linear',
- color1: '#25b5e1',
- color2: '#45dbca',
- direction: '47',
- start: '0',
- stop: '100',
- type: 'linear',
- }
- },
- style: []
- },
- size: {
- type: 'string',
- default: 255,
- style: [
- {
- selector: '{{QUBELY}} .qubely-progress-parent, {{QUBELY}} .qubely-pie-progress-heading.qubely-outside{width: {{size}}px}'
- }
- ]
- },
- iconText: {type: 'string', default: 'Text'},
- background: {type: 'string', default: '#eff4f8'},
- iconName: {type: 'string', default: 'fas fa-rocket'},
- image: {type: 'object', default: {}},
- image2x: {type: 'object', default: {}},
- imageAlt: {type: 'string', default: ''},
- imageSize: {
- type: 'object',
- default: {
- md: '80',
- unit: 'px',
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-progress-inner-text .icon-image:not(.pie-placeholder){ max-width: {{imageSize}} }'
- }
- ]
- },
- iconSize: {
- type: 'string', default: 60,
- style: [
- {
- condition: [
- {key: 'iconStyle', relation: '==', value: 'icon'},
- ],
- selector: '{{QUBELY}} span.qubely-pie-icon{font-size: {{iconSize}}px }'
- }
- ]
- },
- iconTextColor: {
- type: 'string', default: '#062040',
- style: [
- {
- condition: [
- {key: 'iconStyle', relation: '!=', value: 'image'},
- ],
- selector: '{{QUBELY}} .qubely-progress-inner-text {color: {{iconTextColor}}}'
- }
- ]
- },
- iconTypography: {
- type: 'object',
- default: {
- family: 'Helvetica',
- weight: 300,
- type: 'sans-serif',
- openTypography: 1,
- size: {
- md: 60,
- unit: 'px'
- },
- height: {
- md: 1,
- unit: 'em'
- }
- },
- style: [
- {
- condition: [
- {key: 'enableIcon', relation: '==', value: true},
- {key: 'iconStyle', relation: '!=', value: 'image'},
- ],
- selector: '{{QUBELY}} .qubely-progress-inner-text'
- }
- ]
- },
-
-
- enableHeading: {type: 'boolean', default: true},
- heading: {type: 'string', default: 'Updated'},
- headingColor: {
- type: 'string',
- default: '#566372',
- style: [
- {
- selector: '{{QUBELY}} .qubely-pie-progress-heading {color: {{headingColor}} }'
- }
- ]
- },
- headingPosition: {type: 'string', default: 'inside'},
- headingSpacing: {
- type: 'string',
- default: 10,
- style: [
- {
- selector: '{{QUBELY}} .qubely-pie-progress-heading {margin-top: {{headingSpacing}}px}'
- }
- ]
- },
- headingAlignment: {
- type: 'object',
- default: {},
- style: [
- {selector: '{{QUBELY}} .qubely-pie-progress-heading {text-align: {{headingAlignment}}; }'}
- ],
- },
- headingTypography: {
- type: 'object',
- default: {
- family: 'Helvetica',
- weight: 300,
- type: 'sans-serif',
- openTypography: 1,
- size: {
- md: 19,
- unit: 'px'
- },
- height: {
- md: 1.1,
- unit: 'em'
- }
- },
- style: [
- {
- condition: [
- {
- key: 'enableHeading', relation: '==', value: true
- }
- ],
- selector: '{{QUBELY}} .qubely-pie-progress-heading'
- }
- ]
- },
- progressShadow: {
- type: 'object', default: {}, style: []
- },
- circleShadow: {
- type: 'object', default: {
- blur: 3,
- color: 'rgba(100,121,130,0.43)',
- horizontal: 2,
- inset: 'inset',
- openShadow: true,
- spread: 0,
- vertical: 2
- },
- style: []
- },
- spacer: {
- type: 'object',
- default: {spaceTop: {md: '10', unit: 'px'}, spaceBottom: {md: '10', unit: 'px'}},
- style: [{selector: '{{QUBELY}}'}]
- },
- ...globalAttributes,
- content: {
- source: 'html',
- selector: 'h2'
- },
- sourceOfCopiedStyle: {type: 'boolean', default: false}
- },
- edit: Edit,
- save: Save
- })
-
-}
\ No newline at end of file
+ enableHeading: { type: "boolean", default: true },
+ heading: { type: "string", default: "Updated" },
+ headingColor: {
+ type: "string",
+ default: "#566372",
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-pie-progress-heading {color: {{headingColor}} }",
+ },
+ ],
+ },
+ headingPosition: { type: "string", default: "inside" },
+ headingSpacing: {
+ type: "string",
+ default: 10,
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-pie-progress-heading {margin-top: {{headingSpacing}}px}",
+ },
+ ],
+ },
+ headingAlignment: {
+ type: "object",
+ default: {},
+ style: [{ selector: "{{QUBELY}} .qubely-pie-progress-heading {text-align: {{headingAlignment}}; }" }],
+ },
+ headingTypography: {
+ type: "object",
+ default: {
+ family: "Helvetica",
+ weight: 300,
+ type: "sans-serif",
+ openTypography: 1,
+ size: {
+ md: 19,
+ unit: "px",
+ },
+ height: {
+ md: 1.1,
+ unit: "em",
+ },
+ },
+ style: [
+ {
+ condition: [
+ {
+ key: "enableHeading",
+ relation: "==",
+ value: true,
+ },
+ ],
+ selector: "{{QUBELY}} .qubely-pie-progress-heading",
+ },
+ ],
+ },
+ progressShadow: {
+ type: "object",
+ default: {},
+ style: [],
+ },
+ circleShadow: {
+ type: "object",
+ default: {
+ blur: 3,
+ color: "rgba(100,121,130,0.43)",
+ horizontal: 2,
+ inset: "inset",
+ openShadow: true,
+ spread: 0,
+ vertical: 2,
+ },
+ style: [],
+ },
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ ...globalAttributes,
+ content: {
+ source: "html",
+ selector: "h2",
+ },
+ sourceOfCopiedStyle: { type: "boolean", default: false },
+ },
+ edit: Edit,
+ save: Save,
+ });
+}
diff --git a/assets/reactjs/src/blocks/pieprogress/style.scss b/assets/reactjs/src/blocks/pieprogress/style.scss
index d5fba876..bbbe60b1 100644
--- a/assets/reactjs/src/blocks/pieprogress/style.scss
+++ b/assets/reactjs/src/blocks/pieprogress/style.scss
@@ -1,73 +1,72 @@
-.qubely-block-pie-progress{
- display: flex;
- flex-direction: column;
+.qubely-block-pie-progress {
+ display: flex;
+ flex-direction: column;
}
-.qubely-progress-parent{
- display: flex;
- position: relative;
- .qubely-progress-inner-text{
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- font-size: 16px;
- width: 90%;
- height: 90%;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-wrap: wrap;
- > * {
- width: 100%;
- &:first-child{
- margin-top: auto;
- }
- &:last-child{
- margin-bottom: auto;
- }
- }
- .icon-image{
- width: 100%;
- align-items: center;
- justify-content: center;
- display: flex;
- flex-wrap: wrap;
- img{
- max-width: 100%;
- max-height: 100%;
- object-fit: cover;
- }
- .qubely-pie-placeholder{
- border-radius: 4px;
- height: 60px;
- width: 80px;
- max-width: 90%;
- max-height: 90%;
- line-height: 60px;
- font-size: 30px;
- background: #dddddd;
- text-align: center;
- color: #666666;
- }
- }
- }
+.qubely-progress-parent {
+ display: flex;
+ position: relative;
+ .qubely-progress-inner-text {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ font-size: 16px;
+ width: 90%;
+ height: 90%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ > * {
+ width: 100%;
+ &:first-child {
+ margin-top: auto;
+ }
+ &:last-child {
+ margin-bottom: auto;
+ }
+ }
+ .icon-image {
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ flex-wrap: wrap;
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: cover;
+ }
+ .qubely-pie-placeholder {
+ border-radius: 4px;
+ height: 60px;
+ width: 80px;
+ max-width: 90%;
+ max-height: 90%;
+ line-height: 60px;
+ font-size: 30px;
+ background: #dddddd;
+ text-align: center;
+ color: #666666;
+ }
+ }
+ }
}
-.qubely-pie-progress-heading{
- font-size: 20px;
- line-height: 1.1;
- width: 100%;
- letter-spacing: normal;
- text-transform: none;
+.qubely-pie-progress-heading {
+ font-size: 20px;
+ line-height: 1.1;
+ width: 100%;
+ letter-spacing: normal;
+ text-transform: none;
}
-
.qubely-progress-parent,
-.qubely-pie-progress{
- max-width: 100%;
+.qubely-pie-progress {
+ max-width: 100%;
}
-.qubely-pie-progress svg{
- display: block;
-}
\ No newline at end of file
+.qubely-pie-progress svg {
+ display: block;
+}
diff --git a/assets/reactjs/src/blocks/postgrid/Edit.js b/assets/reactjs/src/blocks/postgrid/Edit.js
index 069810e1..1c0cf816 100644
--- a/assets/reactjs/src/blocks/postgrid/Edit.js
+++ b/assets/reactjs/src/blocks/postgrid/Edit.js
@@ -4,28 +4,13 @@ const { compose } = wp.compose;
const { withSelect } = wp.data;
const { addQueryArgs } = wp.url;
const { Fragment, Component, createRef } = wp.element;
-const {
- dateI18n,
- __experimentalGetSettings
-} = wp.date;
-const {
- InspectorControls,
- BlockControls
-} = wp.blockEditor;
-const {
- RangeControl,
- PanelBody,
- Toolbar,
- Spinner,
- TextControl,
- SelectControl
-} = wp.components;
+const { dateI18n, __experimentalGetSettings } = wp.date;
+const { InspectorControls, BlockControls } = wp.blockEditor;
+const { RangeControl, PanelBody, Toolbar, Spinner, TextControl, SelectControl } = wp.components;
const {
Range,
ButtonGroup,
- Inline: {
- InlineToolbar
- },
+ Inline: { InlineToolbar },
Toggle,
Dropdown,
Select,
@@ -43,23 +28,17 @@ const {
RadioAdvanced,
Alignment,
Margin,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings
- },
+ gloalSettings: { globalSettingsPanel, animationSettings },
CssGenerator: { CssGenerator },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
+ ContextMenu: { ContextMenu, handleContextMenu },
withCSSGenerator,
InspectorTabs,
InspectorTab,
Pagination,
+ Headings
} = wp.qubelyComponents;
-import icons from '../../helpers/icons';
-
+import icons from "../../helpers/icons";
const CATEGORIES_LIST_QUERY = { per_page: -1 };
let postTypes = qubely_admin.post_type;
@@ -67,7 +46,7 @@ class Edit extends Component {
constructor() {
super(...arguments);
this.state = {
- device: 'md',
+ device: "md",
spacer: true,
categoriesList: [],
};
@@ -75,85 +54,120 @@ class Edit extends Component {
}
componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
this.isStillMounted = true;
- this.fetchRequest = wp.apiFetch({
- path: addQueryArgs('/wp/v2/categories', CATEGORIES_LIST_QUERY),
- }).then(
- (categoriesList) => {
+ this.fetchRequest = wp
+ .apiFetch({
+ path: addQueryArgs("/wp/v2/categories", CATEGORIES_LIST_QUERY),
+ })
+ .then((categoriesList) => {
if (this.isStillMounted) {
this.setState({ categoriesList });
}
- }
- ).catch(
- () => {
+ })
+ .catch(() => {
if (this.isStillMounted) {
this.setState({ categoriesList: [] });
}
- }
- );
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
+ });
}
+
componentWillUnmount() {
this.isStillMounted = false;
}
+
truncate(value, limit) {
- if (value && value.split(' ').length > limit) {
- return value.split(' ').splice(0, limit).join(' ');
+ if (value && value.split(" ").length > limit) {
+ return value.split(" ").splice(0, limit).join(" ");
}
return value;
}
renderFeaturedImage = (post) => {
- const { attributes: { layout, style, imgSize, imageAnimation, showCategory, categoryPosition } } = this.props
+ const {
+ attributes: { layout, style, imgSize, imageAnimation, showCategory, categoryPosition },
+ } = this.props;
return (
-
-
- {
- (showCategory == 'badge' && style !== 4) &&
+
+
+ {showCategory == "badge" && style !== 4 && (
-
- }
+ )}
- )
- }
+ );
+ };
- renderCardContent = (post) => {
+ renderCardContent = (post, TitleTag = 'h3') => {
const { attributes: { layout, style, readmoreStyle, showCategory, categoryPosition, showTitle, titlePosition, showAuthor, showDates, showComment, showExcerpt, excerptLimit, showReadMore, buttonText, readmoreSize } } = this.props
- let title =
+ let title =
{post.title.rendered}
return (
-
- {(showCategory === 'default') &&
}
-
- {
- (showCategory == 'badge' && style === 4) &&
+
+ {showCategory === "default" && (
+
+ )}
+
+ {showCategory == "badge" && style === 4 && (
-
- }
+ )}
- {showTitle && (titlePosition == true) && title}
- {
- (showAuthor || showDates || showComment) &&
+ {showTitle && titlePosition == true && title}
+ {(showAuthor || showDates || showComment) && (
- {showAuthor &&
{post.qubely_author.display_name} }
- {showDates &&
}
- {showComment &&
}
+ {showAuthor && (
+
+ {post.qubely_author.display_name}
+
+ )}
+ {showDates && (
+
+
+ )}
+ {showComment && (
+
+
+ )}
- }
- {showTitle && (titlePosition == false) && title}
- {showExcerpt &&
}
- {showReadMore &&
}
+ )}
+ {showTitle && titlePosition == false && title}
+ {showExcerpt && (
+
+ )}
+ {showReadMore && (
+
+ )}
- )
- }
+ );
+ };
render() {
const {
@@ -166,6 +180,7 @@ class Edit extends Component {
taxonomyList,
numberofPosts,
attributes: {
+ level,
uniqueId,
className,
//general
@@ -320,227 +335,529 @@ class Edit extends Component {
positionYaxis,
hideTablet,
hideMobile,
- globalCss
-
- }
- } = this.props
+ globalCss,
+ },
+ } = this.props;
const { device } = this.state;
+ const tag = `h${level}`;
let pages = 0;
if (numberofPosts && numberofPosts.length) {
pages = Math.ceil(numberofPosts.length / postsToShow);
}
- let taxonomyListOptions = [
- { value: '', label: __('Select Taxonomy') }
- ];
+ let taxonomyListOptions = [{ value: "", label: __("Select Taxonomy") }];
- let categoryListOptions = [
- { value: '', label: __('All') }
- ];
+ let categoryListOptions = [{ value: "", label: __("All") }];
- if ('' !== taxonomyList) {
+ if ("" !== taxonomyList) {
Object.keys(taxonomyList).map((item) => {
- return taxonomyListOptions.push({ value: taxonomyList[item]['name'], label: taxonomyList[item]['label'] })
+ return taxonomyListOptions.push({
+ value: taxonomyList[item]["name"],
+ label: taxonomyList[item]["label"],
+ });
});
}
- if ('' !== categoryList) {
+ if ("" !== categoryList) {
Object.keys(categoryList).map((item) => {
- return categoryListOptions.push({ value: categoryList[item]['value'], label: categoryList[item]['label'] })
+ return categoryListOptions.push({
+ value: categoryList[item]["value"],
+ label: categoryList[item]["label"],
+ });
});
}
return (
-
-
-
+
+
+
setAttributes({ layout: val })}
+ onChange={(val) => setAttributes({ layout: val })}
/>
-
- setAttributes({ style: val })}
+
+ setAttributes({ style: val })}
options={[
{ value: 1, svg: icons.postgrid_design_1 },
- { value: 2, svg: layout === 1 ? icons.postgrid_design_3 : icons.postgrid_design_2 },
- { value: 3, svg: layout === 1 ? icons.postgrid_design_5 : icons.postgrid_design_4 },
+ {
+ value: 2,
+ svg: layout === 1 ? icons.postgrid_design_3 : icons.postgrid_design_2,
+ },
+ {
+ value: 3,
+ svg: layout === 1 ? icons.postgrid_design_5 : icons.postgrid_design_4,
+ },
{ value: 4, svg: icons.postgrid_design_6 },
]}
/>
- {layout === 2 &&
- setAttributes({ column: value })} min={1} step={1} max={6} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
+ {layout === 2 && (
+ setAttributes({ column: value })}
+ min={1}
+ step={1}
+ max={6}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- {((layout === 1) || ((layout === 2) && ((style === 3) || (style === 4)))) &&
+ {(layout === 1 || (layout === 2 && (style === 3 || style === 4))) && (
+ setAttributes(
+ layout === 2 && style === 3
+ ? { contentPosition: value }
+ : { girdContentPosition: value }
+ )
}
- value={((layout === 2) && (style === 3)) ? contentPosition : girdContentPosition}
- onChange={value => setAttributes(((layout === 2) && (style === 3)) ? { contentPosition: value } : { girdContentPosition: value })}
/>
- }
- {(((layout === 1) && (style != 3)) || ((layout === 2) && (style != 3))) &&
- setAttributes({ contentPadding: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
+ )}
+ {((layout === 1 && style != 3) || (layout === 2 && style != 3)) && (
+ setAttributes({ contentPadding: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- setAttributes({ bgColor: value })} />
- setAttributes({ border: val })} min={0} max={10} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ borderRadius: value })} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ padding: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ boxShadow: value })} />
+ setAttributes({ bgColor: value })}
+ />
+ setAttributes({ border: val })}
+ min={0}
+ max={10}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ borderRadius: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ padding: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ boxShadow: value })}
+ />
- }
+ )}
{/* card settings*/}
- {(style === 2) &&
+ {style === 2 && (
- setAttributes({ cardBackground: value })} />
- setAttributes({ cardBorder: val })} min={0} max={10} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ cardBorderRadius: value })} onDeviceChange={value => this.setState({ device: value })} />
- {(layout === 1) &&
- setAttributes({ cardSpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
- setAttributes({ cardPadding: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ cardBoxShadow: value })} />
+ setAttributes({ cardBackground: value })}
+ />
+ setAttributes({ cardBorder: val })}
+ min={0}
+ max={10}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ cardBorderRadius: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ {layout === 1 && (
+ setAttributes({ cardSpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ cardPadding: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ cardBoxShadow: value })}
+ />
- }
+ )}
{/* Overlay */}
- {(style === 4) &&
+ {style === 4 && (
- setAttributes({ overlayHeight: value })} unit={['px', 'em', '%']} min={50} max={700} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- {(layout === 1) &&
- setAttributes({ overlaySpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
- setAttributes({ overlayBorderRadius: value })} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ overlayHeight: value })}
+ unit={["px", "em", "%"]}
+ min={50}
+ max={700}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ {layout === 1 && (
+ setAttributes({ overlaySpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ overlayBorderRadius: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
-
- setAttributes({ overlayBg: value })} />
+
+ setAttributes({ overlayBg: value })}
+ />
-
- setAttributes({ overlayHoverBg: value })} />
+
+ setAttributes({ overlayHoverBg: value })}
+ />
- setAttributes({ overlayBlend: val })} />
+ setAttributes({ overlayBlend: val })}
+ />
- }
+ )}
{/* Scart */}
- {(style === 3) &&
+ {style === 3 && (
- setAttributes({ stackBg: value })} />
- {(layout === 2) &&
- setAttributes({ stackWidth: value })} unit={['px', 'em', '%']} min={50} max={600} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
- {(layout === 1) &&
- setAttributes({ stackSpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
- setAttributes({ stackBorderRadius: value })} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ stackPadding: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ stackBoxShadow: value })} />
+ setAttributes({ stackBg: value })}
+ />
+ {layout === 2 && (
+ setAttributes({ stackWidth: value })}
+ unit={["px", "em", "%"]}
+ min={50}
+ max={600}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ {layout === 1 && (
+ setAttributes({ stackSpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ stackBorderRadius: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ stackPadding: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ stackBoxShadow: value })}
+ />
- }
+ )}
{/* Separator */}
- {(layout === 1) && (style === 1) &&
+ {layout === 1 && style === 1 && (
setAttributes({ showSeparator: value })} />
+ setAttributes({ showSeparator: value })}
+ />
- }
- {(layout === 1) && (style === 1) && (showSeparator === true) &&
+ )}
+ {layout === 1 && style === 1 && showSeparator === true && (
- setAttributes({ separatorColor: value })} />
- setAttributes({ separatorHeight: value })} unit={['px', 'em', '%']} min={0} max={30} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ separatorSpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ separatorColor: value })}
+ />
+ setAttributes({ separatorHeight: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={30}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ separatorSpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
-
-
+
setAttributes({ postType: value, page: 1 })}
+ onChange={(value) => setAttributes({ postType: value, page: 1 })}
/>
- {taxonomyList && 'post' !== postType &&
+ {taxonomyList && "post" !== postType && (
setAttributes({ taxonomyType: value })}
+ onChange={(value) => setAttributes({ taxonomyType: value })}
/>
- }
- {categoryList && 'post' !== postType &&
+ )}
+ {categoryList && "post" !== postType && (
setAttributes({ customTaxonomies: value.length && value[value.length - 1].label === 'All' ? [] : value })}
+ onChange={(value) =>
+ setAttributes({
+ customTaxonomies:
+ value.length && value[value.length - 1].label === "All"
+ ? []
+ : value,
+ })
+ }
/>
- }
- {'post' === postType &&
+ )}
+ {"post" === postType && (
setAttributes({ taxonomy: value })}
+ onChange={(value) => setAttributes({ taxonomy: value })}
/>
setAttributes(taxonomy === 'categories' ? { categories: value.length && value[value.length - 1].label === 'All' ? [] : value } : { tags: value.length && value[value.length - 1].label === 'All' ? [] : value })}
+ options={[{ value: "all", label: __("All") }, ...taxonomyList]}
+ value={taxonomy === "categories" ? categories : tags}
+ onChange={(value) =>
+ setAttributes(
+ taxonomy === "categories"
+ ? {
+ categories:
+ value.length &&
+ value[value.length - 1].label === "All"
+ ? []
+ : value,
+ }
+ : {
+ tags:
+ value.length &&
+ value[value.length - 1].label === "All"
+ ? []
+ : value,
+ }
+ )
+ }
/>
- }
- setAttributes({ postsToShow: parseInt(value), page: 1 })} min={1} max={15} />
+ )}
+ setAttributes({ postsToShow: parseInt(value), page: 1 })}
+ min={1}
+ max={15}
+ />
setAttributes({ orderBy: value })}
+ onChange={(value) => setAttributes({ orderBy: value })}
/>
setAttributes({ order: value })}
+ onChange={(value) => setAttributes({ order: value })}
/>
-
-
+
{/* setAttributes({ paginationType: value })}
/>*/}
- setAttributes({ enablePagination: value })} />
+ setAttributes({ enablePagination: value })}
+ />
- {
- enablePagination &&
+ {enablePagination && (
setAttributes({ pageAlignment: val })}
+ label={__("Alignment")}
+ onChange={(val) => setAttributes({ pageAlignment: val })}
/>
setAttributes({ paginationTypography: value })}
- onDeviceChange={value => this.setState({ device: value })}
+ onChange={(value) => setAttributes({ paginationTypography: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
-
+
setAttributes({ pagesColor: value })}
+ onChange={(value) => setAttributes({ pagesColor: value })}
/>
setAttributes({ pagesbgColor: newColor })}
+ onChange={(newColor) => setAttributes({ pagesbgColor: newColor })}
/>
setAttributes({ pagesBorder: val })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(val) => setAttributes({ pagesBorder: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ pagesShadow: value })}
+ onChange={(value) => setAttributes({ pagesShadow: value })}
/>
-
+
setAttributes({ pagesActiveColor: value })}
+ onChange={(value) => setAttributes({ pagesActiveColor: value })}
/>
setAttributes({ pagesbgActiveColor: newColor })}
+ onChange={(newColor) =>
+ setAttributes({ pagesbgActiveColor: newColor })
+ }
/>
setAttributes({ pagesActiveBorder: val })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(val) => setAttributes({ pagesActiveBorder: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ pagesActiveShadow: value })}
+ onChange={(value) => setAttributes({ pagesActiveShadow: value })}
/>
-
+
setAttributes({ pagesHoverColor: value })}
+ onChange={(value) => setAttributes({ pagesHoverColor: value })}
/>
setAttributes({ pagesbgHoverColor: newColor })}
+ onChange={(newColor) =>
+ setAttributes({ pagesbgHoverColor: newColor })
+ }
/>
setAttributes({ pagesHoverBorder: val })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(val) => setAttributes({ pagesHoverBorder: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ pagesHoverShadow: value })}
+ onChange={(value) => setAttributes({ pagesHoverShadow: value })}
/>
@@ -667,10 +991,10 @@ class Edit extends Component {
max={100}
responsive
device={device}
- label={__('Radius')}
- unit={['px', 'em', '%']}
+ label={__("Radius")}
+ unit={["px", "em", "%"]}
value={pagesBorderRadius}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
onChange={(value) => setAttributes({ pagesBorderRadius: value })}
/>
setAttributes({ pagePadding: val })}
- onDeviceChange={value => this.setState({ device: value })}
+ label={__("Padding")}
+ unit={["px", "em", "%"]}
+ onChange={(val) => setAttributes({ pagePadding: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ pageMargin: value })}
- onDeviceChange={value => this.setState({ device: value })}
+ label={__("Margin")}
+ unit={["px", "em", "%"]}
+ onChange={(value) => setAttributes({ pageMargin: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
-
+ )}
{/* Global */}
-
- setAttributes({ showImages: value })} />
- setAttributes({ enableFixedHeight: value })} />
- {enableFixedHeight && setAttributes({ fixedHeight: value })} unit={['px', 'em', '%']} min={10} max={600} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />}
+
+ setAttributes({ showImages: value })}
+ />
+ setAttributes({ enableFixedHeight: value })}
+ />
+ {enableFixedHeight && (
+ setAttributes({ fixedHeight: value })}
+ unit={["px", "em", "%"]}
+ min={10}
+ max={600}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
setAttributes({ imgSize: value })}
options={qubely_admin.image_sizes}
@@ -716,80 +1059,187 @@ class Edit extends Component {
max={100}
responsive
device={device}
- label={__('Image Corner')}
+ label={__("Image Corner")}
value={imageRadius}
- unit={['px', 'em', '%']}
- onChange={value => setAttributes({ imageRadius: value })}
- onDeviceChange={value => this.setState({ device: value })} />
+ unit={["px", "em", "%"]}
+ onChange={(value) => setAttributes({ imageRadius: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- setAttributes({ imageAnimation: val })} />
+ setAttributes({ imageAnimation: val })}
+ />
setAttributes({ showTitle: value })} />
+ {showTitle &&
+
+ setAttributes({ level: value, selector: `h${value}` })
+ }
+ />}
setAttributes({ showExcerpt: value })} />
setAttributes({ excerptLimit: val })} />
setAttributes({ titlePosition: value })} />
- setAttributes({ showDates: value })} />
- setAttributes({ showComment: value })} />
- setAttributes({ showAuthor: value })} />
+ setAttributes({ titlePosition: value })}
+ />
+ setAttributes({ showDates: value })}
+ />
+ setAttributes({ showComment: value })}
+ />
+ setAttributes({ showAuthor: value })}
+ />
-
+
setAttributes({ showCategory: val })}
+ onChange={(val) => setAttributes({ showCategory: val })}
/>
- {showCategory !== 'none' &&
+ {showCategory !== "none" && (
- {(layout !== 2 && showCategory == 'badge' && style != 4) &&
+ {layout !== 2 && showCategory == "badge" && style != 4 && (
setAttributes({ categoryPosition: value })}
+ onChange={(value) => setAttributes({ categoryPosition: value })}
/>
- }
- {(layout === 2 && showCategory == 'badge' && style != 4) &&
+ )}
+ {layout === 2 && showCategory == "badge" && style != 4 && (
setAttributes({ badgePosition: val })}
+ onChange={(val) => setAttributes({ badgePosition: val })}
/>
- {
- badgePosition === 'default' ?
- setAttributes({ categoryPosition: value })}
- />
- : setAttributes({ badgePadding: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
+ {badgePosition === "default" ? (
+ setAttributes({ categoryPosition: value })}
+ />
+ ) : (
+ setAttributes({ badgePadding: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- }
- setAttributes({ categoryTypography: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
+ )}
+ setAttributes({ categoryTypography: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
-
- setAttributes(showCategory == 'badge' ? { categoryColor2: value } : { categoryColor: value })} />
- {showCategory == 'badge' && setAttributes({ categoryBackground: value })} />}
+
+
+ setAttributes(
+ showCategory == "badge"
+ ? { categoryColor2: value }
+ : { categoryColor: value }
+ )
+ }
+ />
+ {showCategory == "badge" && (
+
+ setAttributes({ categoryBackground: value })
+ }
+ />
+ )}
-
- setAttributes(showCategory == 'badge' ? { categoryHoverColor2: value } : { categoryHoverColor: value })} />
- {showCategory == 'badge' && setAttributes({ categoryHoverBackground: value })} />}
+
+
+ setAttributes(
+ showCategory == "badge"
+ ? { categoryHoverColor2: value }
+ : { categoryHoverColor: value }
+ )
+ }
+ />
+ {showCategory == "badge" && (
+
+ setAttributes({ categoryHoverBackground: value })
+ }
+ />
+ )}
setAttributes({ categoryRadius: value })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(value) => setAttributes({ categoryRadius: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- {showCategory == 'badge' && setAttributes({ categoryPadding: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />}
-
+ {showCategory == "badge" && (
+ setAttributes({ categoryPadding: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- }
+ )}
-
- setAttributes({ showReadMore: value })} />
- {
- showReadMore &&
+
+ setAttributes({ showReadMore: value })}
+ />
+ {showReadMore && (
setAttributes({ readmoreStyle: val })}
+ onChange={(val) => setAttributes({ readmoreStyle: val })}
+ />
+ setAttributes({ buttonText: val })}
+ />
+ setAttributes({ readmoreTypography: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- setAttributes({ buttonText: val })} />
- setAttributes({ readmoreTypography: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- {
- readmoreStyle === 'fill' &&
+ {readmoreStyle === "fill" && (
setAttributes({ readmoreSize: value })} />
- {readmoreSize == 'custom' &&
+ onChange={(value) => setAttributes({ readmoreSize: value })}
+ />
+ {readmoreSize == "custom" && (
setAttributes({ readmoreCustomSize: value })}
- unit={['px', 'em', '%']}
+ onChange={(value) =>
+ setAttributes({ readmoreCustomSize: value })
+ }
+ unit={["px", "em", "%"]}
max={150}
min={0}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- }
-
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- setAttributes({ readmoreBorder: val })} min={0} max={10} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- {
- (readmoreBorder.openBorder || readmoreStyle === 'fill') &&
+ setAttributes({ readmoreBorder: val })}
+ min={0}
+ max={10}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ {(readmoreBorder.openBorder || readmoreStyle === "fill") && (
setAttributes({ readmoreBorderRadius: value })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(value) =>
+ setAttributes({ readmoreBorderRadius: value })
+ }
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
- setAttributes({ readmoreBoxShadow: value })} />
+ )}
+ setAttributes({ readmoreBoxShadow: value })}
+ />
- }
+ )}
-
- setAttributes(readmoreStyle === 'fill' ? { readmoreColor: value } : { readmoreColor2: value })} />
- {readmoreStyle === 'fill' && setAttributes({ readmoreBg: value })} />}
+
+
+ setAttributes(
+ readmoreStyle === "fill"
+ ? { readmoreColor: value }
+ : { readmoreColor2: value }
+ )
+ }
+ />
+ {readmoreStyle === "fill" && (
+ setAttributes({ readmoreBg: value })}
+ />
+ )}
-
- setAttributes({ readmoreHoverColor: value })} />
- {readmoreStyle === 'fill' && setAttributes({ readmoreHoverBg: value })} />}
+
+ setAttributes({ readmoreHoverColor: value })}
+ />
+ {readmoreStyle === "fill" && (
+ setAttributes({ readmoreHoverBg: value })}
+ />
+ )}
- }
+ )}
-
- {(layout === 2) &&
- setAttributes({ columnGap: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
- {(showCategory == 'default') &&
- setAttributes({ categorySpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
- setAttributes({ titleSpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ metaSpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ excerptSpace: value })} unit={['px', 'em', '%']} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+
+ {layout === 2 && (
+ setAttributes({ columnGap: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ {showCategory == "default" && (
+ setAttributes({ categorySpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ titleSpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ metaSpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ excerptSpace: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
-
- setAttributes({ titleTypography: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
+
+ setAttributes({ titleTypography: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ metaTypography: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ metaTypography: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ excerptTypography: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ excerptTypography: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
-
- setAttributes(style !== 4 ? { titleColor: value } : { titleOverlayColor: value })} />
- setAttributes({ titleHoverColor: value })} />
- setAttributes(style !== 4 ? { metaColor: value } : { metaOverlayColor: value })} />
- setAttributes(style !== 4 ? { excerptColor: value } : { excerptColor2: value })} />
+
+
+ setAttributes(
+ style !== 4 ? { titleColor: value } : { titleOverlayColor: value }
+ )
+ }
+ />
+ setAttributes({ titleHoverColor: value })}
+ />
+
+ setAttributes(style !== 4 ? { metaColor: value } : { metaOverlayColor: value })
+ }
+ />
+
+ setAttributes(style !== 4 ? { excerptColor: value } : { excerptColor2: value })
+ }
+ />
-
+
{animationSettings(uniqueId, animation, setAttributes)}
-
-
+
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
- {
- (posts && posts.length) ?
-
- handleContextMenu(event, this.qubelyContextMenu.current)}
- className={`qubely-postgrid-wrapper qubely-postgrid-layout-${layout} ${(layout === 2) ? 'qubely-postgrid-column qubely-postgrid-column-md' + column.md + ' ' + 'qubely-postgrid-column-sm' + column.sm + ' ' + 'qubely-postgrid-column-xs' + column.xs : ''}`}>
- {
- posts && posts.map((post, i) => {
- if (post) {
- return (
-
-
- {showImages && post.qubely_featured_image_url && this.renderFeaturedImage(post)}
- {this.renderCardContent(post)}
-
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
+
+
+ {posts && posts.length ? (
+
+ handleContextMenu(event, this.qubelyContextMenu.current)}
+ className={`qubely-postgrid-wrapper qubely-postgrid-layout-${layout} ${
+ layout === 2
+ ? "qubely-postgrid-column qubely-postgrid-column-md" +
+ column.md +
+ " " +
+ "qubely-postgrid-column-sm" +
+ column.sm +
+ " " +
+ "qubely-postgrid-column-xs" +
+ column.xs
+ : ""
+ }`}
+ >
+ {posts &&
+ posts.map((post, i) => {
+ if (post) {
+ return (
+
+
+ {showImages &&
+ post.qubely_featured_image_url &&
+ this.renderFeaturedImage(post)}
+ {this.renderCardContent(post, tag)}
- )
- } else return null
-
- })
- }
-
- {
- enablePagination &&
-
setAttributes({ page })}
- />
- }
- {/*
+ );
+ } else return null;
+ })}
+
+ {enablePagination && (
+ setAttributes({ page })}
+ />
+ )}
+ {/*
@@ -976,65 +1625,87 @@ class Edit extends Component {
qubelyContextMenu={this.qubelyContextMenu.current}
/>
*/}
-
- :
-
-
- }
+
+ ) : (
+
+
+ )}
+
);
}
}
export default compose([
withSelect((select, props) => {
- const { getEntityRecords } = select('core')
- const { attributes: { page, taxonomyType, taxonomy, customTaxonomies, order, orderBy, categories, tags, postsToShow, postType } } = props
+ const { getEntityRecords } = select("core");
+ const {
+ attributes: {
+ page,
+ taxonomyType,
+ taxonomy,
+ customTaxonomies,
+ order,
+ orderBy,
+ categories,
+ tags,
+ postsToShow,
+ postType,
+ },
+ } = props;
let allTaxonomy = qubely_admin.all_taxonomy;
let currentTax = allTaxonomy[postType];
let categoryList = [];
- let rest_base = '';
-
- if ('undefined' !== typeof currentTax) {
- if ('undefined' !== typeof currentTax['taxonomy'][taxonomyType]) {
- rest_base = (currentTax['taxonomy'][taxonomyType]['rest_base'] == false || currentTax['taxonomy'][taxonomyType]['rest_base'] == null) ? currentTax['taxonomy'][taxonomyType]['name'] : currentTax['taxonomy'][taxonomyType]['rest_base'];
+ let rest_base = "";
+
+ if ("undefined" !== typeof currentTax) {
+ if ("undefined" !== typeof currentTax["taxonomy"][taxonomyType]) {
+ rest_base =
+ currentTax["taxonomy"][taxonomyType]["rest_base"] == false ||
+ currentTax["taxonomy"][taxonomyType]["rest_base"] == null
+ ? currentTax["taxonomy"][taxonomyType]["name"]
+ : currentTax["taxonomy"][taxonomyType]["rest_base"];
}
- if ('' !== taxonomyType) {
- if ('undefined' !== typeof currentTax['terms'] && 'undefined' !== typeof currentTax['terms'][taxonomyType]) {
- categoryList = currentTax['terms'][taxonomyType];
+ if ("" !== taxonomyType) {
+ if (
+ "undefined" !== typeof currentTax["terms"] &&
+ "undefined" !== typeof currentTax["terms"][taxonomyType]
+ ) {
+ categoryList = currentTax["terms"][taxonomyType];
}
}
}
- let seletedTaxonomy = taxonomy === 'categories' ? 'categories' : 'tags';
- let activeTaxes = taxonomy === 'categories' ? categories : tags;
- let postTaxonomies = allTaxonomy.post.terms ? allTaxonomy.post.terms[taxonomy === 'categories' ? 'category' : 'post_tag'] ? allTaxonomy.post.terms[taxonomy === 'categories' ? 'category' : 'post_tag'] : [] : [];
- let otherTaxonomies = ('undefined' !== typeof currentTax) ? currentTax['taxonomy'] : [];
+ let seletedTaxonomy = taxonomy === "categories" ? "categories" : "tags";
+ let activeTaxes = taxonomy === "categories" ? categories : tags;
+ let postTaxonomies = allTaxonomy.post.terms
+ ? allTaxonomy.post.terms[taxonomy === "categories" ? "category" : "post_tag"]
+ ? allTaxonomy.post.terms[taxonomy === "categories" ? "category" : "post_tag"]
+ : []
+ : [];
+ let otherTaxonomies = "undefined" !== typeof currentTax ? currentTax["taxonomy"] : [];
let query = {
order: order,
orderby: orderBy,
per_page: -1,
- }
+ };
- if ('post' !== postType) {
- query[rest_base] = '' !== customTaxonomies ? customTaxonomies.map(({ value, label }) => value) : [];
+ if ("post" !== postType) {
+ query[rest_base] = "" !== customTaxonomies ? customTaxonomies.map(({ value, label }) => value) : [];
} else {
query[seletedTaxonomy] = activeTaxes.map(({ value, label }) => value);
}
return {
- posts: getEntityRecords('postType', postType, { ...query, page, per_page: postsToShow, }),
- numberofPosts: getEntityRecords('postType', postType, query),
+ posts: getEntityRecords("postType", postType, { ...query, page, per_page: postsToShow }),
+ numberofPosts: getEntityRecords("postType", postType, query),
categoryList: categoryList,
- taxonomyList: ('post' === postType) ? postTaxonomies : otherTaxonomies,
+ taxonomyList: "post" === postType ? postTaxonomies : otherTaxonomies,
};
}),
- withCSSGenerator()
-])(Edit)
-
-
+ withCSSGenerator(),
+])(Edit);
diff --git a/assets/reactjs/src/blocks/postgrid/index.js b/assets/reactjs/src/blocks/postgrid/index.js
index 9fb755f9..5707138c 100644
--- a/assets/reactjs/src/blocks/postgrid/index.js
+++ b/assets/reactjs/src/blocks/postgrid/index.js
@@ -1,36 +1,31 @@
-
-import './style.scss'
-import Edit from './Edit'
-const { __ } = wp.i18n
-const { registerBlockType } = wp.blocks
+import "./style.scss";
+import Edit from "./Edit";
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
if (!qubely_admin.pro_enable) {
- registerBlockType('qubely/postgrid', {
- title: __('Post Grid'),
- description: 'Fetch blog posts and display them beautifully in grid or list views with Qubely Postgrid Block.',
- icon:
,
- category: 'qubely',
- supports: {
- align: ['center', 'wide', 'full'],
- },
- keywords: [
- __('Post'),
- __('Post Grid'),
- __('Grid'),
- ],
- example: {
- attributes: {
- layout: 2,
- column: {
- md: 1
- },
- showExcerpt: false,
- postsToShow: 1
- },
- },
- edit: Edit,
- save: function (props) {
- return null;
- }
- });
-}
\ No newline at end of file
+ registerBlockType("qubely/postgrid", {
+ title: __("Post Grid"),
+ description: "Fetch blog posts and display them beautifully in grid or list views with Qubely Postgrid Block.",
+ icon:
,
+ category: "qubely",
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ keywords: [__("Post"), __("Post Grid"), __("Grid")],
+ example: {
+ attributes: {
+ layout: 2,
+ column: {
+ md: 1,
+ },
+ showExcerpt: false,
+ postsToShow: 1,
+ },
+ },
+ edit: Edit,
+ save: function (props) {
+ return null;
+ },
+ });
+}
diff --git a/assets/reactjs/src/blocks/postgrid/style.scss b/assets/reactjs/src/blocks/postgrid/style.scss
index ab08f431..d950d496 100644
--- a/assets/reactjs/src/blocks/postgrid/style.scss
+++ b/assets/reactjs/src/blocks/postgrid/style.scss
@@ -1,583 +1,583 @@
.qubely-postgrid-is-loading {
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 200px;
}
//list view
.qubely-post-list-wrapper {
- display: block;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- .qubely-post-list-img {
- -ms-flex: 0 0 100%;
- flex: 0 0 100%;
- max-width: 100%;
- position: relative;
- width: 100%;
- min-height: 1px;
- overflow: hidden;
- }
- .qubely-post-list-content {
- -ms-flex: 0 0 100%;
- flex: 0 0 100%;
- max-width: 100%;
- position: relative;
- width: 100%;
- min-height: 1px;
- padding-left: 20px;
- }
+ display: block;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ .qubely-post-list-img {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ position: relative;
+ width: 100%;
+ min-height: 1px;
+ overflow: hidden;
+ }
+ .qubely-post-list-content {
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+ max-width: 100%;
+ position: relative;
+ width: 100%;
+ min-height: 1px;
+ padding-left: 20px;
+ }
}
@media screen and (min-width: 767px) {
- .qubely-post-list-wrapper {
- display: -ms-flexbox;
- display: flex;
- .qubely-post-list-img {
- -ms-flex: 0 0 40%;
- flex: 0 0 40%;
- max-width: 40%;
- }
- .qubely-post-list-img + .qubely-post-list-content {
- -ms-flex: 0 0 60%;
- flex: 0 0 60%;
- max-width: 60%;
- }
- }
+ .qubely-post-list-wrapper {
+ display: -ms-flexbox;
+ display: flex;
+ .qubely-post-list-img {
+ -ms-flex: 0 0 40%;
+ flex: 0 0 40%;
+ max-width: 40%;
+ }
+ .qubely-post-list-img + .qubely-post-list-content {
+ -ms-flex: 0 0 60%;
+ flex: 0 0 60%;
+ max-width: 60%;
+ }
+ }
}
//style 4
.qubely-postgrid-style-4 {
- position: relative;
- overflow: hidden;
- .qubely-post-grid-img,
- .qubely-post-list-img {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 2;
- -webkit-background-size: cover;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- overflow: hidden;
- img {
- position: absolute;
- width: auto;
- height: auto;
- min-width: 100%;
- max-width: none;
- left: 50%;
- top: 50%;
- -webkit-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- min-height: 100%;
- }
- }
- .qubely-post-grid-content,
- .qubely-post-list-content {
- opacity: 1;
- position: relative;
- z-index: 10;
- overflow: hidden;
- width: 100%;
- max-width: 100%;
- padding: 20px;
- }
- > div {
- .qubely-post-grid-img,
- .qubely-post-list-img {
- width: 100%;
- max-width: 100%;
- }
- }
-
- &:before {
- position: absolute;
- content: "";
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- z-index: 3;
- transition: 400ms;
- }
-
- .qubely-post-list-top,
- .qubely-post-grid-top {
- .qubely-post-list-content,
- .qubely-post-grid-content {
- top: 0;
- height: 100%;
- position: absolute;
- display: grid;
- align-content: flex-start;
- }
- }
- .qubely-post-list-center,
- .qubely-post-grid-center {
- .qubely-post-list-content,
- .qubely-post-grid-content {
- top: 0;
- height: 100%;
- position: absolute;
- display: grid;
- align-content: center;
- }
- }
- .qubely-post-list-bottom,
- .qubely-post-grid-bottom {
- .qubely-post-list-content,
- .qubely-post-grid-content {
- top: 0;
- height: 100%;
- position: absolute;
- display: grid;
- align-content: flex-end;
- }
- }
- }
-
- //image
- .qubely-postgrid:not(.qubely-postgrid-style-4) {
- .qubely-post-img {
- &.qubely-post-img-zoom-out {
- .qubely-post-image {
- transition: transform 0.35s;
- transform: scale(1.2);
- }
- }
- &.qubely-post-img-zoom-in {
- .qubely-post-image {
- transition: transform 0.35s;
- transform: scale(1);
- }
- }
- &.qubely-post-img-slide-bottom {
- .qubely-post-image {
- transition: transform 0.35s;
- transform: translate3d(0, 20px, 0) scale3d(1.2, 1.2, 1);
- }
- }
- &.qubely-post-img-slide-top {
- .qubely-post-image {
- transition: transform 0.35s;
- transform: translate3d(0, -20px, 0) scale3d(1.2, 1.2, 1);
- }
- }
- &.qubely-post-img-slide-right {
- .qubely-post-image {
- transition: transform 0.35s;
- transform: translate3d(20px, 0, 0) scale3d(1.2, 1.2, 1);
- }
- }
- &.qubely-post-img-slide-left {
- .qubely-post-image {
- transition: transform 0.35s;
- transform: translate3d(-20px, 0, 0) scale3d(1.2, 1.2, 1);
- }
- }
- }
- }
- .qubely-postgrid:hover:not(.qubely-postgrid-style-4) {
- .qubely-post-img-zoom-out {
- .qubely-post-image {
- transform: scale(1);
- }
- }
- .qubely-post-img-zoom-in {
- .qubely-post-image {
- transform: scale(1.2);
- }
- }
- .qubely-post-img-slide-bottom {
- .qubely-post-image {
- transform: translate3d(0, 0px, 0) scale3d(1.2, 1.2, 1);
- }
- }
- .qubely-post-img-slide-top {
- .qubely-post-image {
- transform: translate3d(0, 0px, 0) scale3d(1.2, 1.2, 1);
- }
- }
- .qubely-post-img-slide-right {
- .qubely-post-image {
- transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1);
- }
- }
- .qubely-post-img-slide-left {
- .qubely-post-image {
- transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1);
- }
- }
- }
+ position: relative;
+ overflow: hidden;
+ .qubely-post-grid-img,
+ .qubely-post-list-img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ -webkit-background-size: cover;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ overflow: hidden;
+ img {
+ position: absolute;
+ width: auto;
+ height: auto;
+ min-width: 100%;
+ max-width: none;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ min-height: 100%;
+ }
+ }
+ .qubely-post-grid-content,
+ .qubely-post-list-content {
+ opacity: 1;
+ position: relative;
+ z-index: 10;
+ overflow: hidden;
+ width: 100%;
+ max-width: 100%;
+ padding: 20px;
+ }
+ > div {
+ .qubely-post-grid-img,
+ .qubely-post-list-img {
+ width: 100%;
+ max-width: 100%;
+ }
+ }
+
+ &:before {
+ position: absolute;
+ content: "";
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 3;
+ transition: 400ms;
+ }
+
+ .qubely-post-list-top,
+ .qubely-post-grid-top {
+ .qubely-post-list-content,
+ .qubely-post-grid-content {
+ top: 0;
+ height: 100%;
+ position: absolute;
+ display: grid;
+ align-content: flex-start;
+ }
+ }
+ .qubely-post-list-center,
+ .qubely-post-grid-center {
+ .qubely-post-list-content,
+ .qubely-post-grid-content {
+ top: 0;
+ height: 100%;
+ position: absolute;
+ display: grid;
+ align-content: center;
+ }
+ }
+ .qubely-post-list-bottom,
+ .qubely-post-grid-bottom {
+ .qubely-post-list-content,
+ .qubely-post-grid-content {
+ top: 0;
+ height: 100%;
+ position: absolute;
+ display: grid;
+ align-content: flex-end;
+ }
+ }
+}
+
+//image
+.qubely-postgrid:not(.qubely-postgrid-style-4) {
+ .qubely-post-img {
+ &.qubely-post-img-zoom-out {
+ .qubely-post-image {
+ transition: transform 0.35s;
+ transform: scale(1.2);
+ }
+ }
+ &.qubely-post-img-zoom-in {
+ .qubely-post-image {
+ transition: transform 0.35s;
+ transform: scale(1);
+ }
+ }
+ &.qubely-post-img-slide-bottom {
+ .qubely-post-image {
+ transition: transform 0.35s;
+ transform: translate3d(0, 20px, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+ &.qubely-post-img-slide-top {
+ .qubely-post-image {
+ transition: transform 0.35s;
+ transform: translate3d(0, -20px, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+ &.qubely-post-img-slide-right {
+ .qubely-post-image {
+ transition: transform 0.35s;
+ transform: translate3d(20px, 0, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+ &.qubely-post-img-slide-left {
+ .qubely-post-image {
+ transition: transform 0.35s;
+ transform: translate3d(-20px, 0, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+ }
+}
+.qubely-postgrid:hover:not(.qubely-postgrid-style-4) {
+ .qubely-post-img-zoom-out {
+ .qubely-post-image {
+ transform: scale(1);
+ }
+ }
+ .qubely-post-img-zoom-in {
+ .qubely-post-image {
+ transform: scale(1.2);
+ }
+ }
+ .qubely-post-img-slide-bottom {
+ .qubely-post-image {
+ transform: translate3d(0, 0px, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+ .qubely-post-img-slide-top {
+ .qubely-post-image {
+ transform: translate3d(0, 0px, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+ .qubely-post-img-slide-right {
+ .qubely-post-image {
+ transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+ .qubely-post-img-slide-left {
+ .qubely-post-image {
+ transform: translate3d(0, 0, 0) scale3d(1.2, 1.2, 1);
+ }
+ }
+}
.qubely-postgrid {
- position: relative;
- img {
- display: block;
- }
- .qubely-postgrid-title {
- margin: 0 !important;
- line-height: 1;
- a {
- text-decoration: none !important;
- &:hover {
- text-decoration: none;
- }
- }
- }
- .qubely-postgrid-intro,
- .qubely-postgrid-intro p {
- font-size: 15px;
- line-height: 24px;
- margin: 0;
- }
- .qubely-postgrid-meta {
- font-size: 14px;
- line-height: 22px;
- }
- .qubely-postgrid-btn {
- display: inline-block;
- text-decoration: none !important;
- &:hover {
- text-decoration: none !important;
- }
- }
- .qubely-button-fill {
- &.is-small {
- padding: 5px 10px;
- font-size: 14px;
- }
- &.is-medium {
- padding: 8px 15px;
- font-size: 16px;
- }
- &.is-large {
- padding: 13px 20px;
- font-size: 18px;
- }
- }
+ position: relative;
+ img {
+ display: block;
+ }
+ .qubely-postgrid-title {
+ margin: 0 !important;
+ line-height: 1;
+ a {
+ text-decoration: none !important;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ }
+ .qubely-postgrid-intro,
+ .qubely-postgrid-intro p {
+ font-size: 15px;
+ line-height: 24px;
+ margin: 0;
+ }
+ .qubely-postgrid-meta {
+ font-size: 14px;
+ line-height: 22px;
+ }
+ .qubely-postgrid-btn {
+ display: inline-block;
+ text-decoration: none !important;
+ &:hover {
+ text-decoration: none !important;
+ }
+ }
+ .qubely-button-fill {
+ &.is-small {
+ padding: 5px 10px;
+ font-size: 14px;
+ }
+ &.is-medium {
+ padding: 8px 15px;
+ font-size: 16px;
+ }
+ &.is-large {
+ padding: 13px 20px;
+ font-size: 18px;
+ }
+ }
}
//title default value
//category above image
.qubely-post-img {
- position: relative;
- overflow: hidden;
- .qubely-postgrid-cat-position {
- position: absolute;
- &.qubely-postgrid-cat-position-leftTop {
- top: 20px;
- left: 20px;
- }
- &.qubely-postgrid-cat-position-rightTop {
- top: 20px;
- right: 20px;
- }
- &.qubely-postgrid-cat-position-leftBottom {
- bottom: 20px;
- left: 20px;
- }
- &.qubely-postgrid-cat-position-rightBottom {
- bottom: 20px;
- right: 20px;
- }
- }
+ position: relative;
+ overflow: hidden;
+ .qubely-postgrid-cat-position {
+ position: absolute;
+ &.qubely-postgrid-cat-position-leftTop {
+ top: 20px;
+ left: 20px;
+ }
+ &.qubely-postgrid-cat-position-rightTop {
+ top: 20px;
+ right: 20px;
+ }
+ &.qubely-postgrid-cat-position-leftBottom {
+ bottom: 20px;
+ left: 20px;
+ }
+ &.qubely-postgrid-cat-position-rightBottom {
+ bottom: 20px;
+ right: 20px;
+ }
+ }
}
//category
.qubely-postgrid-category {
- a {
- transition: 400ms !important;
- text-decoration: none !important;
- &:hover {
- text-decoration: none !important;
- }
- }
+ a {
+ transition: 400ms !important;
+ text-decoration: none !important;
+ &:hover {
+ text-decoration: none !important;
+ }
+ }
}
.qubely-postgrid-category.qubely-backend {
- a {
- pointer-events: none;
- cursor: default;
- }
+ a {
+ pointer-events: none;
+ cursor: default;
+ }
}
//meta
.qubely-postgrid-meta {
- span {
- padding-left: 12px;
- position: relative;
- padding-right: 12px;
- i {
- font-style: normal;
- margin-right: 3px;
- }
- &:before {
- position: absolute;
- content: "";
- background: #d8d8d8;
- left: -1px;
- top: 50%;
- width: 2px;
- height: 2px;
- border-radius: 20px;
- margin-top: -1px;
- }
- &:first-child {
- padding-left: 0;
- &:before {
- display: none;
- }
- }
- }
- a {
- text-decoration: none !important;
- &:hover {
- text-decoration: none !important;
- }
- }
+ span {
+ padding-left: 12px;
+ position: relative;
+ padding-right: 12px;
+ i {
+ font-style: normal;
+ margin-right: 3px;
+ }
+ &:before {
+ position: absolute;
+ content: "";
+ background: #d8d8d8;
+ left: -1px;
+ top: 50%;
+ width: 2px;
+ height: 2px;
+ border-radius: 20px;
+ margin-top: -1px;
+ }
+ &:first-child {
+ padding-left: 0;
+ &:before {
+ display: none;
+ }
+ }
+ }
+ a {
+ text-decoration: none !important;
+ &:hover {
+ text-decoration: none !important;
+ }
+ }
}
//content position
.qubely-post-list-center {
- &.qubely-post-list-wrapper {
- align-items: center;
- }
+ &.qubely-post-list-wrapper {
+ align-items: center;
+ }
}
.qubely-post-list-top {
- &.qubely-post-list-wrapper {
- align-items: flex-start;
- }
+ &.qubely-post-list-wrapper {
+ align-items: flex-start;
+ }
}
.qubely-post-list-bottom {
- &.qubely-post-list-wrapper {
- align-items: flex-end;
- }
+ &.qubely-post-list-wrapper {
+ align-items: flex-end;
+ }
}
//style 3
.qubely-post-list-view {
- &.qubely-postgrid-style-3 {
- .qubely-post-list-wrapper {
- .qubely-post-list-content {
- background: #fff;
- padding: 20px;
- position: relative;
- z-index: 1;
- }
- .qubely-post-list-img + .qubely-post-list-content {
- margin-left: -40px;
- }
- }
- }
+ &.qubely-postgrid-style-3 {
+ .qubely-post-list-wrapper {
+ .qubely-post-list-content {
+ background: #fff;
+ padding: 20px;
+ position: relative;
+ z-index: 1;
+ }
+ .qubely-post-list-img + .qubely-post-list-content {
+ margin-left: -40px;
+ }
+ }
+ }
}
.qubely-post-grid-view {
- &.qubely-postgrid-style-3 {
- .qubely-post-grid-content {
- background: #fff;
- position: relative;
- z-index: 1;
- padding: 20px;
- }
- .qubely-post-grid-img + .qubely-post-grid-content {
- margin: -80px auto 0;
- width: 90%;
- }
- .qubely-post-grid-left {
- .qubely-post-grid-content {
- float: left;
- }
- }
- .qubely-post-grid-right {
- .qubely-post-grid-content {
- float: right;
- }
- }
- }
+ &.qubely-postgrid-style-3 {
+ .qubely-post-grid-content {
+ background: #fff;
+ position: relative;
+ z-index: 1;
+ padding: 20px;
+ }
+ .qubely-post-grid-img + .qubely-post-grid-content {
+ margin: -80px auto 0;
+ width: 90%;
+ }
+ .qubely-post-grid-left {
+ .qubely-post-grid-content {
+ float: left;
+ }
+ }
+ .qubely-post-grid-right {
+ .qubely-post-grid-content {
+ float: right;
+ }
+ }
+ }
}
//layout 4
.qubely-postgrid-layout-4 {
- display: grid;
- grid-column-gap: 30px;
- grid-row-gap: 30px;
- grid-template-columns: 1fr;
- .qubely-post-4-wrap {
- display: grid;
- grid-column-gap: 30px;
- grid-row-gap: 30px;
- grid-template-columns: 0.5fr 1fr;
- }
- .qubely-postgrid:nth-child(1) {
- grid-column-start: 1;
- grid-row-start: 1;
- grid-row-end: 6;
- .qubely-post-4-wrap {
- grid-template-columns: 1fr;
- }
- }
+ display: grid;
+ grid-column-gap: 30px;
+ grid-row-gap: 30px;
+ grid-template-columns: 1fr;
+ .qubely-post-4-wrap {
+ display: grid;
+ grid-column-gap: 30px;
+ grid-row-gap: 30px;
+ grid-template-columns: 0.5fr 1fr;
+ }
+ .qubely-postgrid:nth-child(1) {
+ grid-column-start: 1;
+ grid-row-start: 1;
+ grid-row-end: 6;
+ .qubely-post-4-wrap {
+ grid-template-columns: 1fr;
+ }
+ }
}
@media (min-width: 767px) {
- .qubely-postgrid-layout-4 {
- grid-template-columns: 1fr 1fr;
- }
+ .qubely-postgrid-layout-4 {
+ grid-template-columns: 1fr 1fr;
+ }
}
@media screen and (max-width: 992px) {
- .qubely-post-list-center.qubely-post-list-wrapper {
- align-items: flex-start;
- }
- .qubely-post-list-view.qubely-postgrid-style-3
- .qubely-post-list-wrapper
- .qubely-post-list-img
- + .qubely-post-list-content {
- margin-left: 0;
- }
+ .qubely-post-list-center.qubely-post-list-wrapper {
+ align-items: flex-start;
+ }
+ .qubely-post-list-view.qubely-postgrid-style-3
+ .qubely-post-list-wrapper
+ .qubely-post-list-img
+ + .qubely-post-list-content {
+ margin-left: 0;
+ }
}
//column
.qubely-postgrid-column {
- display: grid;
- grid-column-gap: 30px;
- grid-row-gap: 30px;
+ display: grid;
+ grid-column-gap: 30px;
+ grid-row-gap: 30px;
}
.qubely-postgrid-column-xs1 {
- grid-template-columns: 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 1;
- }
+ grid-template-columns: 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 1;
+ }
}
.qubely-postgrid-column-xs2 {
- grid-template-columns: 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 2;
- }
+ grid-template-columns: 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 2;
+ }
}
.qubely-postgrid-column-xs3 {
- grid-template-columns: 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 3;
- }
+ grid-template-columns: 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 3;
+ }
}
@media (min-width: 767px) {
- .qubely-postgrid-column-sm1 {
- grid-template-columns: 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 1;
- }
- }
- .qubely-postgrid-column-sm2 {
- grid-template-columns: 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 2;
- }
- }
- .qubely-postgrid-column-sm3 {
- grid-template-columns: 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 3;
- }
- }
+ .qubely-postgrid-column-sm1 {
+ grid-template-columns: 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 1;
+ }
+ }
+ .qubely-postgrid-column-sm2 {
+ grid-template-columns: 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 2;
+ }
+ }
+ .qubely-postgrid-column-sm3 {
+ grid-template-columns: 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 3;
+ }
+ }
}
@media (min-width: 992px) {
- .qubely-postgrid-column-md1 {
- grid-template-columns: 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 1;
- }
- }
- .qubely-postgrid-column-md2 {
- grid-template-columns: 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 2;
- }
- }
- .qubely-postgrid-column-md3 {
- grid-template-columns: 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 3;
- }
- }
- .qubely-postgrid-column-md4 {
- grid-template-columns: 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 3;
- }
- }
- .qubely-postgrid-column-md5 {
- grid-template-columns: 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 3;
- }
- }
- .qubely-postgrid-column-md6 {
- grid-template-columns: 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 3;
- }
- }
+ .qubely-postgrid-column-md1 {
+ grid-template-columns: 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 1;
+ }
+ }
+ .qubely-postgrid-column-md2 {
+ grid-template-columns: 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 2;
+ }
+ }
+ .qubely-postgrid-column-md3 {
+ grid-template-columns: 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 3;
+ }
+ }
+ .qubely-postgrid-column-md4 {
+ grid-template-columns: 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 3;
+ }
+ }
+ .qubely-postgrid-column-md5 {
+ grid-template-columns: 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 3;
+ }
+ }
+ .qubely-postgrid-column-md6 {
+ grid-template-columns: 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 3;
+ }
+ }
}
@media (min-width: 1299px) {
- .qubely-postgrid-column-md4 {
- grid-template-columns: 1fr 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 4;
- }
- }
- .qubely-postgrid-column-md5 {
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 5;
- }
- }
- .qubely-postgrid-column-md6 {
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- &.qubely-postgrid-layout-5 {
- column-count: 6;
- }
- }
+ .qubely-postgrid-column-md4 {
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 4;
+ }
+ }
+ .qubely-postgrid-column-md5 {
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 5;
+ }
+ }
+ .qubely-postgrid-column-md6 {
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+ &.qubely-postgrid-layout-5 {
+ column-count: 6;
+ }
+ }
}
.qubely-postgrid-pagination {
- font-weight: 600;
- font-size: 16px;
- color: #363636;
- a,
- > span,
- button{
- line-height: 48px;
- min-width: 50px;
- text-align: center;
- background: white;
- //margin-left: 4.5px;
- //margin-right: 4.5px;
- border: 1px solid #BBC0D4;
- border-radius: 6px;
- margin-bottom: 10px;
- //padding-left: 20px;
- //padding-right: 20px;
- display: inline-block;
- text-decoration: none;
- color: inherit;
- &:hover{
- color: #348EF8;
- cursor: pointer;
- }
- &.current,
- &.active{
- color: #fff;
- background: #348EF8;
- border-color: #348EF8;
- }
- &.qubely-pagination-prev span{
- margin-right: 4px;
- }
- &.qubely-pagination-next span{
- margin-left: 4px;
- }
- }
-}
\ No newline at end of file
+ font-weight: 600;
+ font-size: 16px;
+ color: #363636;
+ a,
+ > span,
+ button {
+ line-height: 48px;
+ min-width: 50px;
+ text-align: center;
+ background: white;
+ //margin-left: 4.5px;
+ //margin-right: 4.5px;
+ border: 1px solid #bbc0d4;
+ border-radius: 6px;
+ margin-bottom: 10px;
+ //padding-left: 20px;
+ //padding-right: 20px;
+ display: inline-block;
+ text-decoration: none;
+ color: inherit;
+ &:hover {
+ color: #348ef8;
+ cursor: pointer;
+ }
+ &.current,
+ &.active {
+ color: #fff;
+ background: #348ef8;
+ border-color: #348ef8;
+ }
+ &.qubely-pagination-prev span {
+ margin-right: 4px;
+ }
+ &.qubely-pagination-next span {
+ margin-left: 4px;
+ }
+ }
+}
diff --git a/assets/reactjs/src/blocks/pricing/Edit.js b/assets/reactjs/src/blocks/pricing/Edit.js
index 56f2bbb7..d0c8b5fc 100644
--- a/assets/reactjs/src/blocks/pricing/Edit.js
+++ b/assets/reactjs/src/blocks/pricing/Edit.js
@@ -1,10 +1,10 @@
-const { __ } = wp.i18n
-const { PanelBody, Toolbar, SelectControl, TextControl } = wp.components
-const { compose } = wp.compose
-const { select, withSelect, withDispatch } = wp.data
-const { Component, Fragment, createRef } = wp.element
-const { getBlock } = select('core/block-editor')
-const { RichText, InspectorControls, BlockControls } = wp.blockEditor
+const { __ } = wp.i18n;
+const { PanelBody, Toolbar, SelectControl, TextControl } = wp.components;
+const { compose } = wp.compose;
+const { select, withSelect, withDispatch } = wp.data;
+const { Component, Fragment, createRef } = wp.element;
+const { getBlock } = select("core/block-editor");
+const { RichText, InspectorControls, BlockControls } = wp.blockEditor;
const {
Color,
Toggle,
@@ -13,14 +13,8 @@ const {
Alignment,
Typography,
QubelyButtonEdit,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- Inline: {
- InlineToolbar
- },
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ Inline: { InlineToolbar },
ColorAdvanced,
Range,
RadioAdvanced,
@@ -31,31 +25,23 @@ const {
BoxShadow,
Styles,
BorderRadius,
- QubelyButton: {
- buttonSettings
- },
- QubelyList: {
- listSettings
- },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
+ QubelyButton: { buttonSettings },
+ QubelyList: { listSettings },
+ ContextMenu: { ContextMenu, handleContextMenu },
withCSSGenerator,
InspectorTabs,
- InspectorTab
+ InspectorTab,
} = wp.qubelyComponents;
-import icons from '../../helpers/icons';
+import icons from "../../helpers/icons";
class Edit extends Component {
-
constructor(props) {
super(props);
this.state = {
- device: 'md',
+ device: "md",
spacer: true,
- openPanelSetting: '',
+ openPanelSetting: "",
showTitleTypography: false,
showSubTitleTypography: false,
showpriceTypography: false,
@@ -65,48 +51,55 @@ class Edit extends Component {
showPricingTitleSettings: false,
openContextMenu: false,
disablePasteStyle: false,
- showPostTextTypography: false
+ showPostTextTypography: false,
};
this.qubelyContextMenu = createRef();
}
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId, sourceOfCopiedStyle } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client })
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client })
- }
- }
renderCurrencyContent = () => {
- const { attributes: { currency, currencyCustom } } = this.props
- return (
{currency == 'custom' ? currencyCustom : currency} )
- }
+ const {
+ attributes: { currency, currencyCustom },
+ } = this.props;
+ return
{currency == "custom" ? currencyCustom : currency} ;
+ };
+
renderDuration = () => {
- const { attributes: { duration }, setAttributes } = this.props
+ const {
+ attributes: { duration },
+ setAttributes,
+ } = this.props;
return (
setAttributes({ duration: val })} />
+ onChange={(val) => setAttributes({ duration: val })}
+ />
-
- )
- }
+ );
+ };
renderPricingButton = () => {
const {
setAttributes,
- attributes: { enableButton, buttonFillType, buttonSize, buttonText, buttonIconName, buttonIconPosition, buttonTag, enablePostButtonText, postButtonText }
- } = this.props
+ attributes: {
+ enableButton,
+ buttonFillType,
+ buttonSize,
+ buttonText,
+ buttonIconName,
+ buttonIconPosition,
+ buttonTag,
+ enablePostButtonText,
+ postButtonText,
+ },
+ } = this.props;
return (
-
this.handlePanelOpenings('Button')}>
+
this.handlePanelOpenings("Button")}>
setAttributes({ buttonText: val })} />
- {
- enablePostButtonText &&
+ onTextChange={(val) => setAttributes({ buttonText: val })}
+ />
+ {enablePostButtonText && (
setAttributes({ postButtonText: val })} />
+ onChange={(val) => setAttributes({ postButtonText: val })}
+ />
- }
+ )}
- )
- }
+ );
+ };
renderPricingTitle = () => {
- const { setAttributes, attributes: { title } } = this.props
+ const {
+ setAttributes,
+ attributes: { title },
+ } = this.props;
return (
- this.handlePanelOpenings('Title')}>
+ this.handlePanelOpenings("Title")}>
setAttributes({ title: val })} />
+ onChange={(val) => setAttributes({ title: val })}
+ />
- )
- }
+ );
+ };
renderPricingSubTitle = () => {
- const { setAttributes, attributes: { subTitle } } = this.props
+ const {
+ setAttributes,
+ attributes: { subTitle },
+ } = this.props;
return (
-
this.handlePanelOpenings('Sub Title')}>
+
this.handlePanelOpenings("Sub Title")}>
setAttributes({ subTitle: val })} />
+ onChange={(val) => setAttributes({ subTitle: val })}
+ />
- )
- }
+ );
+ };
renderPricingPrice = () => {
- const { setAttributes, attributes: { currencyPosition, discount, discountPrice, price, enableDuration, durationPosition } } = this.props
+ const {
+ setAttributes,
+ attributes: { currencyPosition, discount, discountPrice, price, enableDuration, durationPosition },
+ } = this.props;
return (
-
this.handlePanelOpenings('Price')}>
- {currencyPosition == 'before' && this.renderCurrencyContent()}
-
setAttributes({ price: e.target.innerText })}>
+ this.handlePanelOpenings("Price")}>
+ {currencyPosition == "before" && this.renderCurrencyContent()}
+ setAttributes({ price: e.target.innerText })}
+ >
{discount && {discountPrice} }
{price}
- {currencyPosition == 'after' && this.renderCurrencyContent()}
- {enableDuration && durationPosition == 'side' && this.renderDuration()}
+ {currencyPosition == "after" && this.renderCurrencyContent()}
+ {enableDuration && durationPosition == "side" && this.renderDuration()}
- )
- }
+ );
+ };
handlePanelOpenings = (panelName) => {
- const { setAttributes, attributes: { showButtonPanel, showFeaturesPanel } } = this.props
- this.setState({ openPanelSetting: panelName })
- if (panelName == 'Button' || panelName == 'Features') {
- setAttributes(panelName == 'Button' ? { showButtonPanel: true, showFeaturesPanel: false } : { showFeaturesPanel: true, showButtonPanel: false })
+ const {
+ setAttributes,
+ attributes: { showButtonPanel, showFeaturesPanel },
+ } = this.props;
+ this.setState({ openPanelSetting: panelName });
+ if (panelName == "Button" || panelName == "Features") {
+ setAttributes(
+ panelName == "Button"
+ ? { showButtonPanel: true, showFeaturesPanel: false }
+ : { showFeaturesPanel: true, showButtonPanel: false }
+ );
} else if (showButtonPanel || showFeaturesPanel) {
- setAttributes({ showButtonPanel: false, showFeaturesPanel: false })
+ setAttributes({ showButtonPanel: false, showFeaturesPanel: false });
}
- }
+ };
handleCardDeletion = () => {
- const { clientId, removeBlock, updateBlockAttributes, rootBlock, rootBlockClientId, rootBlockAttributes, attributes: { id, pricings } } = this.props
- const editorSelector = select('core/block-editor')
- let updatedRootBlock = getBlock(rootBlockClientId)
- let updatedRootBlockAttributes = editorSelector.getBlockAttributes(rootBlockClientId)
+ const {
+ clientId,
+ removeBlock,
+ updateBlockAttributes,
+ rootBlock,
+ rootBlockClientId,
+ rootBlockAttributes,
+ attributes: { id, pricings },
+ } = this.props;
+ const editorSelector = select("core/block-editor");
+ let updatedRootBlock = getBlock(rootBlockClientId);
+ let updatedRootBlockAttributes = editorSelector.getBlockAttributes(rootBlockClientId);
- removeBlock(clientId)
- updateBlockAttributes(rootBlockClientId, Object.assign(updatedRootBlockAttributes, { pricings: updatedRootBlockAttributes.pricings - 1 }))
+ removeBlock(clientId);
+ updateBlockAttributes(
+ rootBlockClientId,
+ Object.assign(updatedRootBlockAttributes, { pricings: updatedRootBlockAttributes.pricings - 1 })
+ );
- let i = 0
+ let i = 0;
while (i < updatedRootBlock.innerBlocks.length) {
- updateBlockAttributes(updatedRootBlock.innerBlocks[i].clientId,
- Object.assign(updatedRootBlock.innerBlocks[i].attributes,
- {
- id: i >= id ? updatedRootBlock.innerBlocks[i].attributes.id - 1 : updatedRootBlock.innerBlocks[i].attributes.id,
- pricings: updatedRootBlock.innerBlocks[i].attributes.pricings - 1
- }
- )
- )
- i++
+ updateBlockAttributes(
+ updatedRootBlock.innerBlocks[i].clientId,
+ Object.assign(updatedRootBlock.innerBlocks[i].attributes, {
+ id:
+ i >= id
+ ? updatedRootBlock.innerBlocks[i].attributes.id - 1
+ : updatedRootBlock.innerBlocks[i].attributes.id,
+ pricings: updatedRootBlock.innerBlocks[i].attributes.pricings - 1,
+ })
+ );
+ i++;
}
-
- }
+ };
createIterator = () => {
- const { attributes: { pricings } } = this.props
- let iterator = [], index = 0
+ const {
+ attributes: { pricings },
+ } = this.props;
+ let iterator = [],
+ index = 0;
while (index < pricings) {
- iterator.push(index)
- index++
+ iterator.push(index);
+ index++;
}
- return iterator
- }
+ return iterator;
+ };
render() {
const {
@@ -238,11 +270,11 @@ class Edit extends Component {
alignment,
titleSpacing,
layout,
- // Title
+ // Title
title,
titleColor,
titleTypography,
- //sub title
+ //sub title
subTitleSpacing,
subTitleColor,
subTitleTypography,
@@ -314,9 +346,8 @@ class Edit extends Component {
hideTablet,
hideMobile,
globalCss,
- interaction
- }
-
+ interaction,
+ },
} = this.props;
const { device, openPanelSetting, showPostTextTypography } = this.state;
@@ -324,500 +355,621 @@ class Edit extends Component {
return (
-
-
-
- setAttributes({ layout: val })}
+
+
+
+ setAttributes({ layout: val })}
options={[
- { value: 1, svg: icons.pricing[1], label: __('Layout 1') },
- { value: 2, svg: icons.pricing[2], label: __('Layout 2') },
- { value: 3, svg: icons.pricing[3], label: __('Layout 3') },
- { value: 4, svg: icons.pricing[4], label: __('Layout 4') },
- { value: 5, svg: icons.pricing[5], label: __('Layout 5') }
+ { value: 1, svg: icons.pricing[1], label: __("Layout 1") },
+ { value: 2, svg: icons.pricing[2], label: __("Layout 2") },
+ { value: 3, svg: icons.pricing[3], label: __("Layout 3") },
+ { value: 4, svg: icons.pricing[4], label: __("Layout 4") },
+ { value: 5, svg: icons.pricing[5], label: __("Layout 5") },
]}
/>
setAttributes({ alignment: val })}
+ onChange={(val) => setAttributes({ alignment: val })}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ enableFeatures: val })} />
+ label={__("Show Features")}
+ onChange={(val) => setAttributes({ enableFeatures: val })}
+ />
- this.handlePanelOpenings(openPanelSetting !== 'Title' ? 'Title' : '')}>
- {title &&
+ this.handlePanelOpenings(openPanelSetting !== "Title" ? "Title" : "")}
+ >
+ {title && (
setAttributes({ titleColor: val })} />
+ onChange={(val) => setAttributes({ titleColor: val })}
+ />
setAttributes({ titleSpacing: val })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(val) => setAttributes({ titleSpacing: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ titleTypography: val })}
+ label={__("Typography")}
+ onChange={(val) => setAttributes({ titleTypography: val })}
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
- {(layout == 2 || layout == 3 || layout == 4 || layout == 5) &&
- this.handlePanelOpenings(openPanelSetting !== 'Sub Title' ? 'Sub Title' : '')}>
+ {(layout == 2 || layout == 3 || layout == 4 || layout == 5) && (
+
+ this.handlePanelOpenings(openPanelSetting !== "Sub Title" ? "Sub Title" : "")
+ }
+ >
setAttributes({ subTitleColor: val })} />
+ onChange={(val) => setAttributes({ subTitleColor: val })}
+ />
this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
value={subTitleSpacing}
- unit={['px', 'em', '%']}
+ unit={["px", "em", "%"]}
label={"Gap"}
- onChange={val => setAttributes({ subTitleSpacing: val })} />
+ onChange={(val) => setAttributes({ subTitleSpacing: val })}
+ />
setAttributes({ subTitleTypography: val })}
+ label={__("Typography")}
+ onChange={(val) => setAttributes({ subTitleTypography: val })}
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
- this.handlePanelOpenings(openPanelSetting !== 'Price' ? 'Price' : '')}>
+ this.handlePanelOpenings(openPanelSetting !== "Price" ? "Price" : "")}
+ >
setAttributes({ priceColor: val })} />
+ onChange={(val) => setAttributes({ priceColor: val })}
+ />
setAttributes({ priceTypography: val })}
+ onChange={(val) => setAttributes({ priceTypography: val })}
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ discount: val })} />
- {discount &&
+ label={__("Discount")}
+ onChange={(val) => setAttributes({ discount: val })}
+ />
+ {discount && (
setAttributes({ discountPrice: val })} />
- {discountPrice &&
+ placeholder={__("Price")}
+ onChange={(val) => setAttributes({ discountPrice: val })}
+ />
+ {discountPrice && (
setAttributes({ discountColor: val })} />
+ onChange={(val) => setAttributes({ discountColor: val })}
+ />
setAttributes({ discountTypography: val })}
+ onChange={(val) => setAttributes({ discountTypography: val })}
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
- }
+ )}
setAttributes({ pricingSpacing: val })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(val) => setAttributes({ pricingSpacing: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- this.handlePanelOpenings(openPanelSetting !== 'Currency' ? 'Currency' : '')}>
+
+ this.handlePanelOpenings(openPanelSetting !== "Currency" ? "Currency" : "")
+ }
+ >
setAttributes({ currency: val })} />
- {currency == 'custom' &&
+ onChange={(val) => setAttributes({ currency: val })}
+ />
+ {currency == "custom" && (
setAttributes({ currencyCustom: val })} />
- }
- {currency &&
+ placeholder={__("Currency")}
+ onChange={(val) => setAttributes({ currencyCustom: val })}
+ />
+ )}
+ {currency && (
setAttributes({ currencyPosition: val })} />
+ onChange={(val) => setAttributes({ currencyPosition: val })}
+ />
setAttributes({ currencyAlign: val })} />
+ label={__("Alignment")}
+ onChange={(val) => setAttributes({ currencyAlign: val })}
+ />
setAttributes({ currencyColor: val })} />
+ onChange={(val) => setAttributes({ currencyColor: val })}
+ />
setAttributes({ currencyTypography: val })}
+ onChange={(val) => setAttributes({ currencyTypography: val })}
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
-
- this.handlePanelOpenings(openPanelSetting !== 'Duration' ? 'Duration' : '')}>
+
+ this.handlePanelOpenings(openPanelSetting !== "Duration" ? "Duration" : "")
+ }
+ >
setAttributes({ enableDuration: val })}
+ label={__("Enable")}
+ onChange={(val) => setAttributes({ enableDuration: val })}
/>
- {enableDuration &&
+ {enableDuration && (
setAttributes({ duration: val })} />
+ placeholder={__("Duration")}
+ onChange={(val) => setAttributes({ duration: val })}
+ />
setAttributes({ durationPosition: val })} />
+ onChange={(val) => setAttributes({ durationPosition: val })}
+ />
- {durationPosition == 'side' ?
+ {durationPosition == "side" ? (
setAttributes({ durationAlign: val })} />
- :
+ label={__("Duration Align")}
+ onChange={(val) => setAttributes({ durationAlign: val })}
+ />
+ ) : (
setAttributes({ durationPadding: val })}
- unit={['px', 'em', '%']}
+ label={__("Padding")}
+ onChange={(val) => setAttributes({ durationPadding: val })}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
+ )}
setAttributes({ durationColor: val })} />
+ onChange={(val) => setAttributes({ durationColor: val })}
+ />
setAttributes({ durationTypography: val })}
+ onChange={(val) => setAttributes({ durationTypography: val })}
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
- {layout == 5 &&
- this.handlePanelOpenings(openPanelSetting !== 'Header' ? 'Header' : '')}>
- setAttributes({ headerBg: val })} />
+ {layout == 5 && (
+
+ this.handlePanelOpenings(openPanelSetting !== "Header" ? "Header" : "")
+ }
+ >
+ setAttributes({ headerBg: val })}
+ />
setAttributes({ headerBorder: val })}
- unit={['px', 'em', '%']}
+ label={__("Border")}
+ onChange={(val) => setAttributes({ headerBorder: val })}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ headerPadding: val })}
- unit={['px', 'em', '%']}
+ label={__("Padding")}
+ onChange={(val) => setAttributes({ headerPadding: val })}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
+ )}
-
- setAttributes({ bgColor: val })} />
- setAttributes({ bgBorder: val })} min={0} max={10} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ bgShadow: value })} />
+
+ setAttributes({ bgColor: val })}
+ />
+ setAttributes({ bgBorder: val })}
+ min={0}
+ max={10}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bgShadow: value })}
+ />
setAttributes({ bgPadding: val })}
- min={0} max={200}
- unit={['px', 'em', '%']}
+ onChange={(val) => setAttributes({ bgPadding: val })}
+ min={0}
+ max={200}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bgBorderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ bgBorderRadius: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- this.handlePanelOpenings(openPanelSetting !== 'Badge' ? 'Badge' : '')}>
+ this.handlePanelOpenings(openPanelSetting !== "Badge" ? "Badge" : "")}
+ >
setAttributes({ enableBadge: val })}
+ label={__("Enable")}
+ onChange={(val) => setAttributes({ enableBadge: val })}
/>
- {enableBadge &&
+ {enableBadge && (
- setAttributes({ badgeStyle: val })}
+ setAttributes({ badgeStyle: val })}
options={[
- { value: 1, svg: icons.pricing.badge[1], label: __('Style 1') },
- { value: 2, svg: icons.pricing.badge[2], label: __('Style 2') },
- { value: 3, svg: icons.pricing.badge[3], label: __('Style 3') },
- { value: 4, svg: icons.pricing.badge[4], label: __('Style 4') },
- { value: 5, svg: icons.pricing.badge[5], label: __('Style 5') },
- { value: 6, svg: icons.pricing.badge[6], label: __('Style 6') },
+ { value: 1, svg: icons.pricing.badge[1], label: __("Style 1") },
+ { value: 2, svg: icons.pricing.badge[2], label: __("Style 2") },
+ { value: 3, svg: icons.pricing.badge[3], label: __("Style 3") },
+ { value: 4, svg: icons.pricing.badge[4], label: __("Style 4") },
+ { value: 5, svg: icons.pricing.badge[5], label: __("Style 5") },
+ { value: 6, svg: icons.pricing.badge[6], label: __("Style 6") },
]}
/>
setAttributes({ badgeSize: val })}
+ onChange={(val) => setAttributes({ badgeSize: val })}
/>
- {(badgeStyle == 1 || badgeStyle == 2 || badgeStyle == 5 || badgeStyle == 6) &&
+ {(badgeStyle == 1 || badgeStyle == 2 || badgeStyle == 5 || badgeStyle == 6) && (
setAttributes({ badgePosition: val })}
+ onChange={(val) => setAttributes({ badgePosition: val })}
/>
- }
+ )}
setAttributes({ badgeBg: val })}
+ onChange={(val) => setAttributes({ badgeBg: val })}
/>
setAttributes({ badgeColor: val })}
+ onChange={(val) => setAttributes({ badgeColor: val })}
/>
- {badgeStyle == 5 &&
+ {badgeStyle == 5 && (
setAttributes({ badgeRadius: value })}
min={0}
max={100}
- unit={['px', 'em', '%']}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
+ )}
- {(badgeStyle == 3 || badgeStyle == 5 || badgeStyle == 6) &&
+ {(badgeStyle == 3 || badgeStyle == 5 || badgeStyle == 6) && (
setAttributes({ badgeSpacing: value })}
min={0}
max={100}
- unit={['px', 'em', '%']}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
+ )}
- {badgeStyle == 5 &&
+ {badgeStyle == 5 && (
setAttributes({ badgeSpacingTop: value })}
min={0}
max={100}
- unit={['px', 'em', '%']}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
+ )}
setAttributes({ badgeTypography: val })}
+ onChange={(val) => setAttributes({ badgeTypography: val })}
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
-
+ )}
- {buttonSettings(this.props.attributes, device, (key, value) => { setAttributes({ [key]: value }) }, (key, value) => { this.setState({ [key]: value }) }, showPostTextTypography)}
+ {buttonSettings(
+ this.props.attributes,
+ device,
+ (key, value) => {
+ setAttributes({ [key]: value });
+ },
+ (key, value) => {
+ this.setState({ [key]: value });
+ },
+ showPostTextTypography
+ )}
{listSettings(this.props.attributes, device, setAttributes)}
-
+
{animationSettings(uniqueId, animation, setAttributes)}
{interactionSettings(uniqueId, interaction, setAttributes)}
-
-
+
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
+
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ onContextMenu={(event) => handleContextMenu(event, this.qubelyContextMenu.current)}
>
- {enableBadge &&
setAttributes({ 'badge': e.target.innerText })} onClick={() => this.handlePanelOpenings('Badge')}>{badge} }
+ {enableBadge && (
+
setAttributes({ badge: e.target.innerText })}
+ onClick={() => this.handlePanelOpenings("Badge")}
+ >
+ {badge}
+
+ )}
{this.renderPricingTitle()}
- {(layout == 3 || layout == 4) &&
- this.renderPricingSubTitle()
- }
+ {(layout == 3 || layout == 4) && this.renderPricingSubTitle()}
{this.renderPricingPrice()}
- {enableDuration && durationPosition == 'bottom' && this.renderDuration()}
+ {enableDuration && durationPosition == "bottom" && this.renderDuration()}
- {(layout == 2) &&
- this.renderPricingSubTitle()
- }
+ {layout == 2 && this.renderPricingSubTitle()}
- {(layout == 4) &&
- this.renderPricingButton()
- }
+ {layout == 4 && this.renderPricingButton()}
- {enableFeatures &&
-
this.handlePanelOpenings('Features')}>
+ {enableFeatures && (
+
this.handlePanelOpenings("Features")}
+ >
0 ? true : false}
- buttonText={__('Add New Feature')}
+ buttonText={__("Add New Feature")}
enableListIcons={enableListIcons}
listItems={listItems}
iconColor={iconColor}
iconPosition={iconPosition}
listWrapperClassName={`qubely-list icon-position-${iconPosition}`}
- newListItemPlaceHolder={__('Add New Feature')}
- onListItemModification={newValues => setAttributes({ listItems: newValues })}
+ newListItemPlaceHolder={__("Add New Feature")}
+ onListItemModification={(newValues) => setAttributes({ listItems: newValues })}
onChange={(key, value) => setAttributes({ [key]: value })}
- onIconColorChange={(color, currentListItemIndex) => setAttributes({ iconColor: color })}
+ onIconColorChange={(color, currentListItemIndex) =>
+ setAttributes({ iconColor: color })
+ }
/>
- }
+ )}
- {(layout == 1 || layout == 2 || layout == 3 || layout == 5) &&
- this.renderPricingButton()
- }
+ {(layout == 1 || layout == 2 || layout == 3 || layout == 5) && this.renderPricingButton()}
-
+
- )
+ );
}
}
export default compose([
withSelect((select, ownProps) => {
- const { clientId } = ownProps
- const { getBlock, getBlockRootClientId, getBlockAttributes } = select('core/block-editor')
+ const { clientId } = ownProps;
+ const { getBlock, getBlockRootClientId, getBlockAttributes } = select("core/block-editor");
let block = getBlock(clientId),
rootBlockClientId = getBlockRootClientId(clientId),
rootBlock = getBlock(rootBlockClientId),
- rootBlockAttributes = getBlockAttributes(rootBlockClientId)
+ rootBlockAttributes = getBlockAttributes(rootBlockClientId);
return {
block,
rootBlock,
rootBlockClientId,
- rootBlockAttributes
- }
+ rootBlockAttributes,
+ };
}),
withDispatch((dispatch) => {
- const { insertBlock, removeBlock, updateBlockAttributes, toggleSelection } = dispatch('core/block-editor')
+ const { insertBlock, removeBlock, updateBlockAttributes, toggleSelection } = dispatch("core/block-editor");
return {
insertBlock,
removeBlock,
updateBlockAttributes,
- toggleSelection
- }
+ toggleSelection,
+ };
}),
- withCSSGenerator()
-])(Edit)
+ withCSSGenerator(),
+])(Edit);
diff --git a/assets/reactjs/src/blocks/pricing/Save.js b/assets/reactjs/src/blocks/pricing/Save.js
index 3713b5af..f180c655 100644
--- a/assets/reactjs/src/blocks/pricing/Save.js
+++ b/assets/reactjs/src/blocks/pricing/Save.js
@@ -1,149 +1,184 @@
-const { Component, Fragment } = wp.element
-const { RichText } = wp.blockEditor
-const { QubelyButtonSave, QubelyIconListSave } = wp.qubelyComponents
-const { HelperFunction: { animationAttr, IsInteraction } } = wp.qubelyComponents
+const { Component, Fragment } = wp.element;
+const { RichText } = wp.blockEditor;
+const { QubelyButtonSave, QubelyIconListSave } = wp.qubelyComponents;
+const {
+ HelperFunction: { animationAttr, IsInteraction },
+} = wp.qubelyComponents;
class Save extends Component {
-
-
- renderPricingTitle = () => {
- const { attributes: { title } } = this.props
- return (
-
-
-
-
- )
- }
-
- renderPricingSubTitle = () => {
- const { attributes: { subTitle } } = this.props
- return (
-
-
- )
- }
-
- renderPricingPrice = () => {
- const { attributes: { currencyPosition, discount, discountPrice, price, enableDuration, durationPosition } } = this.props
- return (
-
- {currencyPosition == 'before' && this.renderCurrencyContent()}
-
- {discount && {discountPrice} }
- {price}
-
- {currencyPosition == 'after' && this.renderCurrencyContent()}
- {enableDuration && durationPosition == 'side' && this.renderDuration()}
-
- )
- }
-
-
- renderDuration = () => {
- const { attributes: { duration } } = this.props
- return (
-
-
- )
- }
- renderCurrencyContent = () => {
- const { attributes: { currency, currencyCustom } } = this.props
- return (
{currency == 'custom' ? currencyCustom : currency} )
- }
-
-
- renderPricingButton = () => {
- const { attributes: { enableButton, buttonUrl, buttonFillType, buttonSize, buttonText, buttonIconName, buttonIconPosition, buttonTag, enablePostButtonText, postButtonText } } = this.props
-
- return (
-
-
- {
- enablePostButtonText &&
-
- {postButtonText}
-
- }
-
- )
- }
- renderPricingContent = () => {
- const { attributes: { currencyPosition, discount, discountPrice, price, enableDuration, durationPosition } } = this.props
- return (
-
- {currencyPosition == 'before' && this.renderCurrencyContent()}
-
- {discount && {discountPrice} }
- {price}
-
- {currencyPosition == 'after' && this.renderCurrencyContent()}
- {enableDuration && durationPosition == 'side' && this.renderDuration()}
-
- )
- }
-
- render() {
- const { uniqueId, listAlignment, listItems, layout, iconColor, enableListIcons, enableDuration, durationPosition, enableFeatures, iconPosition, enableBadge, badge, badgeStyle, badgeSize, animation, interaction } = this.props.attributes
-
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
-
- return (
-
-
- {enableBadge &&
{badge} }
-
-
- {this.renderPricingTitle()}
-
- {(layout == 3 || layout == 4) &&
- this.renderPricingSubTitle()
- }
-
- {this.renderPricingPrice()}
- {enableDuration && durationPosition == 'bottom' && this.renderDuration()}
-
- {(layout == 2) &&
- this.renderPricingSubTitle()
- }
-
-
- {(layout == 4) &&
- this.renderPricingButton()
- }
-
- {
- enableFeatures &&
-
-
- }
-
- {(layout == 1 || layout == 2 || layout == 3 || layout == 5) &&
- this.renderPricingButton()
- }
-
-
-
-
- )
- }
+ renderPricingTitle = () => {
+ const {
+ attributes: { title },
+ } = this.props;
+ return (
+
+
+
+
+ );
+ };
+
+ renderPricingSubTitle = () => {
+ const {
+ attributes: { subTitle },
+ } = this.props;
+ return (
+
+
+ );
+ };
+
+ renderPricingPrice = () => {
+ const {
+ attributes: { currencyPosition, discount, discountPrice, price, enableDuration, durationPosition },
+ } = this.props;
+ return (
+
+ {currencyPosition == "before" && this.renderCurrencyContent()}
+
+ {discount && {discountPrice} }
+ {price}
+
+ {currencyPosition == "after" && this.renderCurrencyContent()}
+ {enableDuration && durationPosition == "side" && this.renderDuration()}
+
+ );
+ };
+
+ renderDuration = () => {
+ const {
+ attributes: { duration },
+ } = this.props;
+ return (
+
+
+ );
+ };
+ renderCurrencyContent = () => {
+ const {
+ attributes: { currency, currencyCustom },
+ } = this.props;
+ return
{currency == "custom" ? currencyCustom : currency} ;
+ };
+
+ renderPricingButton = () => {
+ const {
+ attributes: {
+ enableButton,
+ buttonUrl,
+ buttonFillType,
+ buttonSize,
+ buttonText,
+ buttonIconName,
+ buttonIconPosition,
+ buttonTag,
+ enablePostButtonText,
+ postButtonText,
+ },
+ } = this.props;
+
+ return (
+
+
+ {enablePostButtonText && (
+
+ {postButtonText}
+
+ )}
+
+ );
+ };
+ renderPricingContent = () => {
+ const {
+ attributes: { currencyPosition, discount, discountPrice, price, enableDuration, durationPosition },
+ } = this.props;
+ return (
+
+ {currencyPosition == "before" && this.renderCurrencyContent()}
+
+ {discount && {discountPrice} }
+ {price}
+
+ {currencyPosition == "after" && this.renderCurrencyContent()}
+ {enableDuration && durationPosition == "side" && this.renderDuration()}
+
+ );
+ };
+
+ render() {
+ const {
+ uniqueId,
+ listAlignment,
+ listItems,
+ layout,
+ iconColor,
+ enableListIcons,
+ enableDuration,
+ durationPosition,
+ enableFeatures,
+ iconPosition,
+ enableBadge,
+ badge,
+ badgeStyle,
+ badgeSize,
+ animation,
+ interaction,
+ } = this.props.attributes;
+
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
+
+ return (
+
+
+ {enableBadge && (
+
+ {badge}
+
+ )}
+
+
+ {this.renderPricingTitle()}
+
+ {(layout == 3 || layout == 4) && this.renderPricingSubTitle()}
+
+ {this.renderPricingPrice()}
+ {enableDuration && durationPosition == "bottom" && this.renderDuration()}
+
+ {layout == 2 && this.renderPricingSubTitle()}
+
+
+ {layout == 4 && this.renderPricingButton()}
+
+ {enableFeatures && (
+
+
+ )}
+
+ {(layout == 1 || layout == 2 || layout == 3 || layout == 5) && this.renderPricingButton()}
+
+
+
+ );
+ }
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/pricing/index.js b/assets/reactjs/src/blocks/pricing/index.js
index da5b2a63..2412aaa6 100644
--- a/assets/reactjs/src/blocks/pricing/index.js
+++ b/assets/reactjs/src/blocks/pricing/index.js
@@ -1,585 +1,664 @@
/* eslint-disable react/react-in-jsx-scope */
-import './style.scss'
-const { __ } = wp.i18n
-import Save from './Save'
-import Edit from './Edit'
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes }, QubelyButton: { buttonAttributes }, QubelyList: { listAttributes } } = wp.qubelyComponents
+import "./style.scss";
+const { __ } = wp.i18n;
+import Save from "./Save";
+import Edit from "./Edit";
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+ QubelyButton: { buttonAttributes },
+ QubelyList: { listAttributes },
+} = wp.qubelyComponents;
-registerBlockType('qubely/pricing', {
- title: __('Pricing'),
- description: 'Showcase Pricing in beautiful pre-designed Pricing Table with Qubely Pricing.',
- category: 'qubely',
- icon:
,
- keywords: [__('Pricing'), __('Pricing Table')],
- supports: {
- align: ['center', 'wide', 'full'],
- },
- example: {
+registerBlockType("qubely/pricing", {
+ title: __("Pricing"),
+ description: "Showcase Pricing in beautiful pre-designed Pricing Table with Qubely Pricing.",
+ category: "qubely",
+ icon:
,
+ keywords: [__("Pricing"), __("Pricing Table")],
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ example: {
attributes: {},
},
- attributes: {
- uniqueId: { type: 'string', default: '' },
- ...globalAttributes,
- ...buttonAttributes,
- ...listAttributes,
- layout: {
- type: 'number',
- default: 3
- },
-
- defaultItems: { type: 'number', default: 2 },
- alignment: { type: 'object', default: { md: 'center' }, style: [{ selector: '{{QUBELY}} .qubely-block-pricing {text-align: {{alignment}};}' }] },
- spacer: { type: 'object', default: { spaceTop: { md: '10', unit: 'px' }, spaceBottom: { md: '10', unit: 'px' } }, style: [{ selector: '{{QUBELY}}' }] },
-
- copyStyle: { type: 'boolean', default: false },
+ attributes: {
+ uniqueId: { type: "string", default: "" },
+ ...globalAttributes,
+ ...buttonAttributes,
+ ...listAttributes,
+ layout: {
+ type: "number",
+ default: 3,
+ },
- // Title__
- title: {
- type: 'string',
- source: 'html',
- selector: '.qubely-pricing-title',
- default: 'Basic'
- },
- titleColor: { type: 'string', default: 'var(--qubely-color-1)', style: [{ selector: '{{QUBELY}} .qubely-pricing-title{color: {{titleColor}};}' }] },
- titleTypography: { type: 'object', default: { openTypography: 1, size: { md: 20, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-pricing-title' }] },
+ defaultItems: { type: "number", default: 2 },
+ alignment: {
+ type: "object",
+ default: { md: "center" },
+ style: [{ selector: "{{QUBELY}} .qubely-block-pricing {text-align: {{alignment}};}" }],
+ },
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
- titleSpacing: {
- type: 'object',
- default: {
- md: 0,
- unit: 'px'
- },
- style: [{ selector: '{{QUBELY}} .qubely-pricing-title {margin-bottom: {{titleSpacing}};}' }]
- },
+ copyStyle: { type: "boolean", default: false },
- //Sub Title
- subTitle: {
- type: 'string',
- source: 'html',
- selector: '.qubely-sub-title',
- default: 'Best Choice for Individuals'
- },
- subTitleSpacing: {
- type: 'object',
- default: {
- md: 20,
- unit: 'px'
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-sub-title-wrapper {margin-bottom: {{subTitleSpacing}};}'
- }
- ]
- },
+ // Title__
+ title: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-pricing-title",
+ default: "Basic",
+ },
+ titleColor: {
+ type: "string",
+ default: "var(--qubely-color-1)",
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-title{color: {{titleColor}};}" }],
+ },
+ titleTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 20, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-title" }],
+ },
- subTitleColor: { type: 'string', default: '#8F8E8E', style: [{ selector: '{{QUBELY}} .qubely-sub-title{color: {{subTitleColor}};}' }] },
- subTitleTypography: { type: 'object', default: { openTypography: 1, size: { md: 20, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-sub-title' }] },
+ titleSpacing: {
+ type: "object",
+ default: {
+ md: 0,
+ unit: "px",
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-title {margin-bottom: {{titleSpacing}};}" }],
+ },
- // Price__
- price: { type: 'string', default: '49' },
- priceAlignment: {
- type: 'string',
- default: 'center',
- style: [
- {
- condition: [
- { key: 'priceAlignment', relation: '==', value: 'left' },
- ],
- selector: '{{QUBELY}} .qubely-pricing-wrapper {justify-content: flex-start;}'
- },
- {
- condition: [
- { key: 'priceAlignment', relation: '==', value: 'center' },
- ],
- selector: '{{QUBELY}} .qubely-pricing-wrapper {justify-content: center;}'
- },
- {
- condition: [
- { key: 'priceAlignment', relation: '==', value: 'right' },
- ],
- selector: '{{QUBELY}} .qubely-pricing-wrapper {justify-content: flex-end;}'
- },
- {
- condition: [
- { key: 'priceAlignment', relation: '==', value: 'left' },
- { key: 'durationPosition', relation: '==', value: 'bottom' },
- ],
- selector: '{{QUBELY}} .qubely-pricing-duration {text-align: left;}'
- },
- {
- condition: [
- { key: 'priceAlignment', relation: '==', value: 'center' },
- { key: 'durationPosition', relation: '==', value: 'bottom' },
- ],
- selector: '{{QUBELY}} .qubely-pricing-duration {text-align: center;}'
- },
- {
- condition: [
- { key: 'priceAlignment', relation: '==', value: 'right' },
- { key: 'durationPosition', relation: '==', value: 'bottom' },
- ],
- selector: '{{QUBELY}} .qubely-pricing-duration {text-align: right;}'
- }
- ]
- },
- priceColor: { type: 'string', default: '#ccc', style: [{ selector: '{{QUBELY}} .qubely-pricing-price{color: {{priceColor}};}' }] },
- priceTypography: { type: 'object', default: { openTypography: 1, height: { md: 70, unit: 'px' }, size: { md: 70, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-pricing-price' }] },
- discount: { type: 'boolean', default: false },
- discountPrice: { type: 'string', default: '69' },
- discountColor: { type: 'string', default: '#ccc', style: [{ selector: '{{QUBELY}} .qubely-pricing-price strike{color: {{discountColor}};}' }] },
- discountTypography: { type: 'object', default: { openTypography: 1, size: { md: 20, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-pricing-price strike' }] },
- pricingSpacing: {
- type: 'object',
- default: {
- md: 20,
- unit: 'px'
- },
- style: [{ selector: '{{QUBELY}} .qubely-pricing-wrapper {margin-bottom: {{pricingSpacing}};}' }]
- },
+ //Sub Title
+ subTitle: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-sub-title",
+ default: "Best Choice for Individuals",
+ },
+ subTitleSpacing: {
+ type: "object",
+ default: {
+ md: 20,
+ unit: "px",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-sub-title-wrapper {margin-bottom: {{subTitleSpacing}};}",
+ },
+ ],
+ },
- headerBg: {
- type: 'object',
- default: {},
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 5 },
- ],
- selector: '{{QUBELY}} .qubely-block-pricing-header'
- }
- ]
- },
- headerBorder: {
- type: 'object',
- default: {
- openColor: 1,
- type: 'color',
- color: '#f6f6f6',
- },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 5 },
- ],
- selector: '{{QUBELY}} .qubely-block-pricing-header'
- }
- ]
- },
- headerPadding: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'global',
- global: {
- md: 20
- },
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 5 },
- ],
- selector: '{{QUBELY}} .qubely-block-pricing-header'
- }
- ]
- },
- headerSpacing: {
- type: 'object',
- default: {
- md: 30,
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 5 },
- ],
- selector: '{{QUBELY}} .qubely-block-pricing-header {margin-bottom: {{headerSpacing}};}'
- }
- ]
- },
+ subTitleColor: {
+ type: "string",
+ default: "#8F8E8E",
+ style: [{ selector: "{{QUBELY}} .qubely-sub-title{color: {{subTitleColor}};}" }],
+ },
+ subTitleTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 20, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-sub-title" }],
+ },
- // Currency__
- currency: { type: 'string', default: '$' },
- currencyCustom: { type: 'string', default: '' },
- currencyPosition: { type: 'string', default: 'before' },
- currencyAlign: { type: 'string', default: '10', style: [{ selector: '{{QUBELY}} .qubely-pricing-currency{ display: inline-block; transform: translateY({{currencyAlign}}px); }' }] },
- currencyColor: { type: 'string', default: '#CACCCE', style: [{ selector: '{{QUBELY}} .qubely-pricing-currency{color: {{currencyColor}}; }' }] },
- currencyTypography: { type: 'object', default: { openTypography: 1, size: { md: 34, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-pricing-currency' }] },
+ // Price__
+ price: { type: "string", default: "49" },
+ priceAlignment: {
+ type: "string",
+ default: "center",
+ style: [
+ {
+ condition: [{ key: "priceAlignment", relation: "==", value: "left" }],
+ selector: "{{QUBELY}} .qubely-pricing-wrapper {justify-content: flex-start;}",
+ },
+ {
+ condition: [{ key: "priceAlignment", relation: "==", value: "center" }],
+ selector: "{{QUBELY}} .qubely-pricing-wrapper {justify-content: center;}",
+ },
+ {
+ condition: [{ key: "priceAlignment", relation: "==", value: "right" }],
+ selector: "{{QUBELY}} .qubely-pricing-wrapper {justify-content: flex-end;}",
+ },
+ {
+ condition: [
+ { key: "priceAlignment", relation: "==", value: "left" },
+ { key: "durationPosition", relation: "==", value: "bottom" },
+ ],
+ selector: "{{QUBELY}} .qubely-pricing-duration {text-align: left;}",
+ },
+ {
+ condition: [
+ { key: "priceAlignment", relation: "==", value: "center" },
+ { key: "durationPosition", relation: "==", value: "bottom" },
+ ],
+ selector: "{{QUBELY}} .qubely-pricing-duration {text-align: center;}",
+ },
+ {
+ condition: [
+ { key: "priceAlignment", relation: "==", value: "right" },
+ { key: "durationPosition", relation: "==", value: "bottom" },
+ ],
+ selector: "{{QUBELY}} .qubely-pricing-duration {text-align: right;}",
+ },
+ ],
+ },
+ priceColor: {
+ type: "string",
+ default: "#ccc",
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-price{color: {{priceColor}};}" }],
+ },
+ priceTypography: {
+ type: "object",
+ default: { openTypography: 1, height: { md: 70, unit: "px" }, size: { md: 70, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-price" }],
+ },
+ discount: { type: "boolean", default: false },
+ discountPrice: { type: "string", default: "69" },
+ discountColor: {
+ type: "string",
+ default: "#ccc",
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-price strike{color: {{discountColor}};}" }],
+ },
+ discountTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 20, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-price strike" }],
+ },
+ pricingSpacing: {
+ type: "object",
+ default: {
+ md: 20,
+ unit: "px",
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-wrapper {margin-bottom: {{pricingSpacing}};}" }],
+ },
- // Duration__
- enableDuration: { type: 'boolean', default: true },
- duration: { type: 'string', default: '/Month' },
- durationPosition: { type: 'string', default: 'side' },
- durationColor: { type: 'string', default: '#CACCCE', style: [{ selector: '{{QUBELY}} .qubely-pricing-duration{color: {{durationColor}};}' }] },
- durationAlign: { type: 'string', default: '10', style: [{ condition: [{ key: 'durationPosition', relation: '==', value: 'side' }], selector: '{{QUBELY}} .qubely-pricing-duration{transform: translateY({{durationAlign}}px); display: inline-block; }' }, { condition: [{ key: 'durationPosition', relation: '==', value: 'bottom' }], selector: '{{QUBELY}} .qubely-pricing-duration{ display: block; }' }] },
- durationTypography: { type: 'object', default: { openTypography: 1, size: { md: 21, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-pricing-duration' }] },
+ headerBg: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 5 }],
+ selector: "{{QUBELY}} .qubely-block-pricing-header",
+ },
+ ],
+ },
+ headerBorder: {
+ type: "object",
+ default: {
+ openColor: 1,
+ type: "color",
+ color: "#f6f6f6",
+ },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 5 }],
+ selector: "{{QUBELY}} .qubely-block-pricing-header",
+ },
+ ],
+ },
+ headerPadding: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "global",
+ global: {
+ md: 20,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 5 }],
+ selector: "{{QUBELY}} .qubely-block-pricing-header",
+ },
+ ],
+ },
+ headerSpacing: {
+ type: "object",
+ default: {
+ md: 30,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 5 }],
+ selector: "{{QUBELY}} .qubely-block-pricing-header {margin-bottom: {{headerSpacing}};}",
+ },
+ ],
+ },
- durationPadding: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'custom',
- custom: { md: '10 0 10 0' }
- },
- style: [{ condition: [{ key: 'durationPosition', relation: '==', value: 'bottom' }], selector: '{{QUBELY}} .qubely-pricing-duration' }]
- },
- // Badge__
- enableBadge: { type: 'boolean', default: false },
- badge: { type: 'string', default: 'Sale' },
- badgeStyle: {
- type: 'number',
- default: 1,
- style: [
- {
- condition: [
- { key: 'badgeStyle', relation: '!=', value: 3 }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing {overflow: hidden;}'
- }
- ]
- },
- badgePosition: {
- type: 'string',
- default: 'left',
- style: [
- {
- condition: [
- { key: 'badgeStyle', relation: '==', value: 1 },
- { key: 'badgePosition', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: -73px; transform: rotate(-45deg);}'
- },
- {
- condition: [
- { key: 'badgeStyle', relation: '==', value: 1 },
- { key: 'badgePosition', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: -73px; transform: rotate(45deg);}'
- },
- {
- condition: [
- { key: 'badgeStyle', relation: '==', value: 2 },
- { key: 'badgePosition', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: -50px; transform: rotate(-45deg);}'
- },
- {
- condition: [
- { key: 'badgeStyle', relation: '==', value: 2 },
- { key: 'badgePosition', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: -50px; transform: rotate(45deg);}'
- },
- ]
- },
- badgeSize: {
- type: 'string',
- default: 'regular'
- },
- badgeSpacing: {
- type: 'object',
- default: {
- md: 20,
- unit: 'px'
- },
- style:
- [
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 3 },
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {margin-top: {{badgeSpacing}};}'
- },
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 5 },
- { key: 'badgePosition', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: {{badgeSpacing}};}'
- },
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 5 },
- { key: 'badgePosition', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: {{badgeSpacing}};}'
- },
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 6 },
- { key: 'badgePosition', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: {{badgeSpacing}};}'
- },
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 6 },
- { key: 'badgePosition', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: {{badgeSpacing}};}'
- }
- ]
- },
- badgeSpacingTop: {
- type: 'object',
- default: {
- md: 20,
- unit: 'px'
- },
- style:
- [
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 5 }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {top: {{badgeSpacingTop}};}'
- }
- ]
- },
- badgeBg: {
- type: 'string',
- default: '#50E3C2',
- style:
- [
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {background-color: {{badgeBg}};}'
- },
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 3 }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge::before {border-color: {{badgeBg}} {{badgeBg}} transparent transparent;} {{QUBELY}} .qubely-block-pricing .qubely-pricing-badge::after {border-color: {{badgeBg}} transparent transparent {{badgeBg}};}'
- },
- {
- condition: [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 6 }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge::before {border-color: {{badgeBg}} {{badgeBg}} transparent {{badgeBg}};}'
- }
- ]
- },
+ // Currency__
+ currency: { type: "string", default: "$" },
+ currencyCustom: { type: "string", default: "" },
+ currencyPosition: { type: "string", default: "before" },
+ currencyAlign: {
+ type: "string",
+ default: "10",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-pricing-currency{ display: inline-block; transform: translateY({{currencyAlign}}px); }",
+ },
+ ],
+ },
+ currencyColor: {
+ type: "string",
+ default: "#CACCCE",
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-currency{color: {{currencyColor}}; }" }],
+ },
+ currencyTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 34, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-currency" }],
+ },
- badgeColor: {
- type: 'string',
- default: '#FFFFFF',
- style:
- [
- {
- condition:
- [
- { key: 'enableBadge', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {color: {{badgeColor}};}'
- }
- ]
- },
+ // Duration__
+ enableDuration: { type: "boolean", default: true },
+ duration: { type: "string", default: "/Month" },
+ durationPosition: { type: "string", default: "side" },
+ durationColor: {
+ type: "string",
+ default: "#CACCCE",
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-duration{color: {{durationColor}};}" }],
+ },
+ durationAlign: {
+ type: "string",
+ default: "10",
+ style: [
+ {
+ condition: [{ key: "durationPosition", relation: "==", value: "side" }],
+ selector:
+ "{{QUBELY}} .qubely-pricing-duration{transform: translateY({{durationAlign}}px); display: inline-block; }",
+ },
+ {
+ condition: [{ key: "durationPosition", relation: "==", value: "bottom" }],
+ selector: "{{QUBELY}} .qubely-pricing-duration{ display: block; }",
+ },
+ ],
+ },
+ durationTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 21, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-duration" }],
+ },
- badgeTypography: {
- type: 'object',
- default: {
- openTypography: 1,
- size: {
- md: 14,
- unit: 'px'
- }
- },
- style:
- [
- {
- condition:
- [
- { key: 'enableBadge', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge'
- }
- ]
- },
+ durationPadding: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "custom",
+ custom: { md: "10 0 10 0" },
+ },
+ style: [
+ {
+ condition: [{ key: "durationPosition", relation: "==", value: "bottom" }],
+ selector: "{{QUBELY}} .qubely-pricing-duration",
+ },
+ ],
+ },
+ // Badge__
+ enableBadge: { type: "boolean", default: false },
+ badge: { type: "string", default: "Sale" },
+ badgeStyle: {
+ type: "number",
+ default: 1,
+ style: [
+ {
+ condition: [{ key: "badgeStyle", relation: "!=", value: 3 }],
+ selector: "{{QUBELY}} .qubely-block-pricing {overflow: hidden;}",
+ },
+ ],
+ },
+ badgePosition: {
+ type: "string",
+ default: "left",
+ style: [
+ {
+ condition: [
+ { key: "badgeStyle", relation: "==", value: 1 },
+ { key: "badgePosition", relation: "==", value: "left" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: -73px; transform: rotate(-45deg);}",
+ },
+ {
+ condition: [
+ { key: "badgeStyle", relation: "==", value: 1 },
+ { key: "badgePosition", relation: "==", value: "right" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: -73px; transform: rotate(45deg);}",
+ },
+ {
+ condition: [
+ { key: "badgeStyle", relation: "==", value: 2 },
+ { key: "badgePosition", relation: "==", value: "left" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: -50px; transform: rotate(-45deg);}",
+ },
+ {
+ condition: [
+ { key: "badgeStyle", relation: "==", value: 2 },
+ { key: "badgePosition", relation: "==", value: "right" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: -50px; transform: rotate(45deg);}",
+ },
+ ],
+ },
+ badgeSize: {
+ type: "string",
+ default: "regular",
+ },
+ badgeSpacing: {
+ type: "object",
+ default: {
+ md: 20,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 3 },
+ ],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {margin-top: {{badgeSpacing}};}",
+ },
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 5 },
+ { key: "badgePosition", relation: "==", value: "left" },
+ ],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: {{badgeSpacing}};}",
+ },
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 5 },
+ { key: "badgePosition", relation: "==", value: "right" },
+ ],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: {{badgeSpacing}};}",
+ },
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 6 },
+ { key: "badgePosition", relation: "==", value: "left" },
+ ],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {left: {{badgeSpacing}};}",
+ },
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 6 },
+ { key: "badgePosition", relation: "==", value: "right" },
+ ],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {right: {{badgeSpacing}};}",
+ },
+ ],
+ },
+ badgeSpacingTop: {
+ type: "object",
+ default: {
+ md: 20,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 5 },
+ ],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {top: {{badgeSpacingTop}};}",
+ },
+ ],
+ },
+ badgeBg: {
+ type: "string",
+ default: "#50E3C2",
+ style: [
+ {
+ condition: [{ key: "enableBadge", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {background-color: {{badgeBg}};}",
+ },
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 3 },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge::before {border-color: {{badgeBg}} {{badgeBg}} transparent transparent;} {{QUBELY}} .qubely-block-pricing .qubely-pricing-badge::after {border-color: {{badgeBg}} transparent transparent {{badgeBg}};}",
+ },
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 6 },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge::before {border-color: {{badgeBg}} {{badgeBg}} transparent {{badgeBg}};}",
+ },
+ ],
+ },
- badgeRadius: {
- type: 'object',
- default: {
- paddingType: 'global',
- },
- style: [
- {
- condition:
- [
- { key: 'enableBadge', relation: '==', value: true },
- { key: 'badgeStyle', relation: '==', value: 5 }
- ],
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge'
- }
- ]
- },
+ badgeColor: {
+ type: "string",
+ default: "#FFFFFF",
+ style: [
+ {
+ condition: [{ key: "enableBadge", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge {color: {{badgeColor}};}",
+ },
+ ],
+ },
- // Background
- bgColor: {
- type: 'object',
- default: {
- openColor: 1,
- type: 'color',
- color: '#FFFFFF',
- },
- style: [{ selector: '{{QUBELY}} .qubely-block-pricing' }]
- },
- bgPadding: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'global',
- global: {
- md: 30
- },
- unit: 'px'
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-pricing .qubely-block-pricing-content'
- }
- ]
- },
+ badgeTypography: {
+ type: "object",
+ default: {
+ openTypography: 1,
+ size: {
+ md: 14,
+ unit: "px",
+ },
+ },
+ style: [
+ {
+ condition: [{ key: "enableBadge", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge",
+ },
+ ],
+ },
- bgBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
- global: {
- md: 10
- },
- unit: 'px'
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-pricing'
- }
- ]
- },
+ badgeRadius: {
+ type: "object",
+ default: {
+ paddingType: "global",
+ },
+ style: [
+ {
+ condition: [
+ { key: "enableBadge", relation: "==", value: true },
+ { key: "badgeStyle", relation: "==", value: 5 },
+ ],
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-pricing-badge",
+ },
+ ],
+ },
- bgBorder: {
- type: 'object',
- default: {
- openBorder: 1,
- widthType: 'global',
- type: 'solid',
- color: '#E5E7EA',
- global: {
- md: 1
- },
- unit: 'px',
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-pricing'
- }
- ]
- },
+ // Background
+ bgColor: {
+ type: "object",
+ default: {
+ openColor: 1,
+ type: "color",
+ color: "#FFFFFF",
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-block-pricing" }],
+ },
+ bgPadding: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "global",
+ global: {
+ md: 30,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-pricing .qubely-block-pricing-content",
+ },
+ ],
+ },
- bgShadow: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-pricing' }] },
+ bgBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ global: {
+ md: 10,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-pricing",
+ },
+ ],
+ },
- //button
- buttonGap: {
- type: 'object',
- default: {
- md: 0,
- unit: 'px'
- },
- style: [{ selector: '{{QUBELY}} .qubely-pricing-button {margin-bottom: {{buttonGap}};margin-top: {{buttonGap}};}' }]
- },
- enableButton: { type: 'boolean', default: true },
- controlledButtonPanel: { type: 'boolean', default: true },
- showButtonPanel: { type: 'boolean', default: false },
- buttonText: { type: 'string', default: 'Subscribe Now' },
+ bgBorder: {
+ type: "object",
+ default: {
+ openBorder: 1,
+ widthType: "global",
+ type: "solid",
+ color: "#E5E7EA",
+ global: {
+ md: 1,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-pricing",
+ },
+ ],
+ },
- buttonPaddingTop: { type: 'object', default: { md: 30, unit: 'px' }, style: [{ selector: '{{QUBELY}} .qubely-pricing-button{ padding-top: {{buttonPaddingTop}};}' }] },
- buttonPaddingBottom: { type: 'object', default: { md: 10, unit: 'px' }, style: [{ selector: '{{QUBELY}} .qubely-pricing-button{ padding-bottom: {{buttonPaddingBottom}};}' }] },
+ bgShadow: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-block-pricing" }] },
- //postButtonText
- enablePostButtonText: { type: 'boolean', default: false },
- postButtonText: { type: 'string', default: '14 days money back gaurantee' },
- postButtonTextTypography: { type: 'object', default: { openTypography: 1, size: { md: 16, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-pricing-post-button-text' }] },
- postButtonTextColor: {
- type: 'string',
- default: '#696969',
- style: [{
- condition: [
- { key: 'enablePostButtonText', relation: '==', value: true },
- ],
- selector: '{{QUBELY}} .qubely-pricing-postbutton-text{ color: {{postButtonTextColor}};}'
- }]
- },
- postButtonTextPaddingTop: {
- type: 'object',
- default: { md: 5, unit: 'px' },
- style: [{
- condition: [
- { key: 'enablePostButtonText', relation: '==', value: true },
- ],
- selector: '{{QUBELY}} .qubely-pricing-postbutton-text{ margin-top: {{postButtonTextPaddingTop}};}'
- }]
- },
- postButtonTextPaddingBottom: {
- type: 'object',
- default: { md: 5, unit: 'px' },
- style: [{
- condition: [
- { key: 'enablePostButtonText', relation: '==', value: true },
- ],
- selector: '{{QUBELY}} .qubely-pricing-postbutton-text{ margin-bottom: {{postButtonTextPaddingBottom}};}'
- }]
- },
+ //button
+ buttonGap: {
+ type: "object",
+ default: {
+ md: 0,
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-pricing-button {margin-bottom: {{buttonGap}};margin-top: {{buttonGap}};}",
+ },
+ ],
+ },
+ enableButton: { type: "boolean", default: true },
+ controlledButtonPanel: { type: "boolean", default: true },
+ showButtonPanel: { type: "boolean", default: false },
+ buttonText: { type: "string", default: "Subscribe Now" },
+ buttonPaddingTop: {
+ type: "object",
+ default: { md: 30, unit: "px" },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-button{ padding-top: {{buttonPaddingTop}};}" }],
+ },
+ buttonPaddingBottom: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-button{ padding-bottom: {{buttonPaddingBottom}};}" }],
+ },
- // features
- enableFeatures: { type: 'boolean', default: true },
- controlledFeaturesPanel: { type: 'boolean', default: true },
- showFeaturesPanel: { type: 'boolean', default: false },
- listItems: {
- type: 'array',
- default: [
- {
- icon: 'fas fa-check',
- text: 'Unlimited domain use',
- customColor: false
- },
- {
- icon: 'fas fa-check',
- text: '1 year customer support',
- customColor: false
- },
- {
- icon: 'fas fa-times',
- text: 'Access to all plugins',
- customColor: '#f00'
- },
- {
- icon: 'fas fa-check',
- text: 'Access to all themes',
- customColor: false
- },
- ]
+ //postButtonText
+ enablePostButtonText: { type: "boolean", default: false },
+ postButtonText: { type: "string", default: "14 days money back gaurantee" },
+ postButtonTextTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 16, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-pricing-post-button-text" }],
+ },
+ postButtonTextColor: {
+ type: "string",
+ default: "#696969",
+ style: [
+ {
+ condition: [{ key: "enablePostButtonText", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-pricing-postbutton-text{ color: {{postButtonTextColor}};}",
+ },
+ ],
+ },
+ postButtonTextPaddingTop: {
+ type: "object",
+ default: { md: 5, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "enablePostButtonText", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-pricing-postbutton-text{ margin-top: {{postButtonTextPaddingTop}};}",
+ },
+ ],
+ },
+ postButtonTextPaddingBottom: {
+ type: "object",
+ default: { md: 5, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "enablePostButtonText", relation: "==", value: true }],
+ selector:
+ "{{QUBELY}} .qubely-pricing-postbutton-text{ margin-bottom: {{postButtonTextPaddingBottom}};}",
+ },
+ ],
+ },
- },
- clickedListItem: { type: 'number', default: 0 },
- listType: { type: 'string', default: 'unordered' },
- bulletStyle: { type: 'string', default: 'check-circle-outline' },
- sourceOfCopiedStyle: { type: 'boolean', default: false },
-
- },
- edit: Edit,
- save: Save
-})
\ No newline at end of file
+ // features
+ enableFeatures: { type: "boolean", default: true },
+ controlledFeaturesPanel: { type: "boolean", default: true },
+ showFeaturesPanel: { type: "boolean", default: false },
+ listItems: {
+ type: "array",
+ default: [
+ {
+ icon: "fas fa-check",
+ text: "Unlimited domain use",
+ customColor: false,
+ },
+ {
+ icon: "fas fa-check",
+ text: "1 year customer support",
+ customColor: false,
+ },
+ {
+ icon: "fas fa-times",
+ text: "Access to all plugins",
+ customColor: "#f00",
+ },
+ {
+ icon: "fas fa-check",
+ text: "Access to all themes",
+ customColor: false,
+ },
+ ],
+ },
+ clickedListItem: { type: "number", default: 0 },
+ listType: { type: "string", default: "unordered" },
+ bulletStyle: { type: "string", default: "check-circle-outline" },
+ sourceOfCopiedStyle: { type: "boolean", default: false },
+ },
+ edit: Edit,
+ save: Save,
+});
diff --git a/assets/reactjs/src/blocks/pricing/style.scss b/assets/reactjs/src/blocks/pricing/style.scss
index 743a236e..7949f252 100644
--- a/assets/reactjs/src/blocks/pricing/style.scss
+++ b/assets/reactjs/src/blocks/pricing/style.scss
@@ -1,29 +1,29 @@
-.qubely-block-pricing {
+.qubely-block-pricing {
transition: 400ms;
position: relative;
- .qubely-list {
- list-style: none;
- padding: 0;
+ .qubely-list {
+ list-style: none;
+ padding: 0;
margin: 0;
- [contenteditable=true]:empty:before {
+ [contenteditable="true"]:empty:before {
content: attr(placeholder);
color: gray;
padding: 0px 5px 0px 5px;
display: block;
}
- .qubely-list-li {
- position: relative;
- margin: 0;
- display: block;
- transition: color 400ms, background-color 400ms, border-color 400ms, box-shadow 400ms;
+ .qubely-list-li {
+ position: relative;
+ margin: 0;
+ display: block;
+ transition: color 400ms, background-color 400ms, border-color 400ms, box-shadow 400ms;
.qubely-list-item-icon {
transition: color 400ms;
}
.qubely-list-item {
display: inline-block;
position: relative;
- >span,
- >div {
+ > span,
+ > div {
display: inline-block;
}
@@ -34,7 +34,7 @@
height: 18px;
line-height: 20px;
text-align: center;
- background: rgba(0, 0, 0, .8);
+ background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 10px;
position: absolute;
@@ -46,7 +46,6 @@
}
&.qubely-list-li-editor {
-
}
&:hover {
@@ -113,8 +112,8 @@
display: block;
position: relative;
- >span:before,
- >span:after,
+ > span:before,
+ > span:after,
&:before,
&:after {
content: " ";
@@ -127,8 +126,8 @@
line-height: 27px;
margin-left: -10px;
margin-right: -10px;
- >span:before,
- >span:after,
+ > span:before,
+ > span:after,
&:before,
&:after {
bottom: -10px;
@@ -141,8 +140,8 @@
line-height: 37px;
margin-left: -15px;
margin-right: -15px;
- >span:before,
- >span:after,
+ > span:before,
+ > span:after,
&:before,
&:after {
bottom: -15px;
@@ -155,8 +154,8 @@
line-height: 46px;
margin-left: -20px;
margin-right: -20px;
- >span:before,
- >span:after,
+ > span:before,
+ > span:after,
&:before,
&:after {
bottom: -20px;
@@ -164,29 +163,28 @@
}
}
- >span:before,
+ > span:before,
&:before {
left: 0;
}
- >span:after,
+ > span:after,
&:after {
right: 0;
}
- >span:before,
- >span:after {
+ > span:before,
+ > span:after {
z-index: 1;
}
- >span:before {
- border-color: rgba(0, 0, 0, .15) rgba(0, 0, 0, .15) transparent transparent;
- }
-
- >span:after {
- border-color: rgba(0, 0, 0, .15) transparent transparent rgba(0, 0, 0, .15);
+ > span:before {
+ border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) transparent transparent;
}
+ > span:after {
+ border-color: rgba(0, 0, 0, 0.15) transparent transparent rgba(0, 0, 0, 0.15);
+ }
}
&.qubely-badge-style-4 {
@@ -194,7 +192,7 @@
display: block;
height: 40px;
line-height: 40px;
-
+
&.qubely-badge-size-small {
height: 27px;
line-height: 27px;
@@ -239,7 +237,7 @@
display: block;
line-height: 1;
- >span {
+ > span {
display: inline-block;
transform: rotate(90deg);
}
diff --git a/assets/reactjs/src/blocks/progressbar/Edit.js b/assets/reactjs/src/blocks/progressbar/Edit.js
index 946e969d..9fada4da 100644
--- a/assets/reactjs/src/blocks/progressbar/Edit.js
+++ b/assets/reactjs/src/blocks/progressbar/Edit.js
@@ -1,190 +1,249 @@
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
const { Fragment, Component, createRef } = wp.element;
-const { PanelBody, TextControl, Toolbar } = wp.components
-const { InspectorControls, BlockControls } = wp.blockEditor
+const { PanelBody, TextControl, Toolbar } = wp.components;
+const { InspectorControls, BlockControls } = wp.blockEditor;
const {
- RadioAdvanced,
- Range,
- Typography,
- ColorAdvanced,
- Toggle,
- Color,
- BorderRadius,
- Inline: { InlineToolbar },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- withCSSGenerator,
- InspectorTabs,
- InspectorTab
-} = wp.qubelyComponents
+ RadioAdvanced,
+ Range,
+ Typography,
+ ColorAdvanced,
+ Toggle,
+ Color,
+ BorderRadius,
+ Inline: { InlineToolbar },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+} = wp.qubelyComponents;
class Edit extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ spacer: true,
+ };
+ this.qubelyContextMenu = createRef();
+ }
- constructor(props) {
- super(props);
- this.state = {
- device: 'md',
- spacer: true
- };
- this.qubelyContextMenu = createRef();
- }
+ render() {
+ const {
+ name,
+ clientId,
+ attributes,
+ isSelected,
+ setAttributes,
+ attributes: {
+ uniqueId,
+ className,
+ progress,
+ title,
+ labelTypography,
+ labelPosition,
+ labelColor,
+ labelSpacing,
+ showProgress,
+ barHeight,
+ barBackground,
+ progressBackground,
+ striped,
+ borderRadius,
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
+ //animation
+ animation,
+ //global
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ interaction,
+ },
+ } = this.props;
+ const { device } = this.state;
+ const labelsContent = (
+
+ {title != "" && (
+
+
{title}
+ {showProgress && (
+
+ {progress}%
+
+ )}
+
+ );
- render() {
- const {
- name,
- clientId,
- attributes,
- isSelected,
- setAttributes,
- attributes: {
- uniqueId,
- className,
- progress,
- title,
- labelTypography,
- labelPosition,
- labelColor,
- labelSpacing,
- showProgress,
- barHeight,
- barBackground,
- progressBackground,
- striped,
- borderRadius,
+ return (
+
+
+
+
+
+ setAttributes({ progress: value })}
+ min={1}
+ max={100}
+ />
+ setAttributes({ barHeight: value })}
+ min={1}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
- //animation
- animation,
- //global
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- globalZindex,
- hideTablet,
- hideMobile,
- globalCss,
- interaction }
- } = this.props
- const { device } = this.state
- const labelsContent =
- {title != '' &&
-
-
{title}
- {showProgress &&
{progress}%
}
-
+
+ setAttributes({ title: val })}
+ />
+ {title != "" && (
+
+ setAttributes({ showProgress: val })}
+ />
+ setAttributes({ labelPosition: val })}
+ />
+ setAttributes({ labelSpacing: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={40}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ labelTypography: val })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ labelColor: val })}
+ />
+
+ )}
+
- return (
-
-
-
-
-
- setAttributes({ progress: value })} min={1} max={100} />
- setAttributes({ barHeight: value })} min={1} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
+
+ setAttributes({ progressBackground: val })}
+ />
+ setAttributes({ striped: val })}
+ />
+ setAttributes({ borderRadius: val })}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
-
- setAttributes({ title: val })} />
- {title != '' &&
-
- setAttributes({ showProgress: val })} />
- setAttributes({ labelPosition: val })}
- />
- setAttributes({ labelSpacing: value })} unit={['px', 'em', '%']} min={0} max={40} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ labelTypography: val })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ labelColor: val })} />
-
- }
-
+
+ setAttributes({ barBackground: val })}
+ />
+
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
-
- setAttributes({ progressBackground: val })} />
- setAttributes({ striped: val })} />
- setAttributes({ borderRadius: val })} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
+
+
+
+
-
- setAttributes({ barBackground: val })} />
-
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
-
-
-
-
-
-
-
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- >
- {labelPosition == 'outside' && labelsContent}
-
-
- {striped &&
}
- {labelPosition == 'inside' && labelsContent}
-
-
-
-
-
-
- )
- }
+
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ >
+ {labelPosition == "outside" && labelsContent}
+
+
+ {striped &&
}
+ {labelPosition == "inside" && labelsContent}
+
+
+
+
+
+
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/progressbar/index.js b/assets/reactjs/src/blocks/progressbar/index.js
index 1cde1da9..51997e70 100644
--- a/assets/reactjs/src/blocks/progressbar/index.js
+++ b/assets/reactjs/src/blocks/progressbar/index.js
@@ -1,56 +1,94 @@
/* eslint-disable react/react-in-jsx-scope */
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save'
-const { registerBlockType } = wp.blocks
-const { __ } = wp.i18n
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+const { registerBlockType } = wp.blocks;
+const { __ } = wp.i18n;
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-registerBlockType( 'qubely/progressbar', {
- title: __('Progress Bar'),
- description: 'Showcase stats using progress bars with Qubely Progress Bar.',
- category: 'qubely',
- icon:
,
+registerBlockType("qubely/progressbar", {
+ title: __("Progress Bar"),
+ description: "Showcase stats using progress bars with Qubely Progress Bar.",
+ category: "qubely",
+ icon:
,
supports: {
- align: ['center', 'wide', 'full'],
- },
- keywords: [__('progress'), __('bar'), __('bar progress')],
- example: {
- attributes: {},
- },
+ align: ["center", "wide", "full"],
+ },
+ keywords: [__("progress"), __("bar"), __("bar progress")],
+ example: {
+ attributes: {},
+ },
attributes: {
- uniqueId: { type: 'string', default: '' },
- ...globalAttributes, // Global Settings
- spacer: { type: 'object', default:{spaceTop: { md: '10', unit: 'px'}, spaceBottom: { md: '10', unit: 'px'}}, style: [{ selector: '{{QUBELY}}' }] },
- progress: {type: 'string', default: 50, style: [{ selector: '{{QUBELY}} .qubely-progress-bar {width: {{progress}}%;}' }] },
+ uniqueId: { type: "string", default: "" },
+ ...globalAttributes, // Global Settings
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ progress: {
+ type: "string",
+ default: 50,
+ style: [{ selector: "{{QUBELY}} .qubely-progress-bar {width: {{progress}}%;}" }],
+ },
// Labels
- title: {type: 'string', default: 'Progress'},
- showTitle: {type: 'boolean', default: true},
- labelTypography: { type:'object', default:{openTypography: 1, size: {md: 16, unit: 'px'}}, style: [{ selector: '{{QUBELY}} .qubely-block-progress-labels' }] },
- labelColor: { type:'string', default:'', style: [{ selector: '{{QUBELY}} .qubely-block-progress-labels {color: {{labelColor}};}' }] },
- labelPosition: {type: 'string', default: 'outside'},
- labelSpacing: { type:'object', default:{md: 10, unit: 'px'}, style: [{ selector: '{{QUBELY}} .qubely-block-progress-labels.qubely-position-outside {margin-bottom: {{labelSpacing}};} {{QUBELY}} .qubely-block-progress-labels.qubely-position-inside {padding-left: {{labelSpacing}}; padding-right: {{labelSpacing}};}' }] },
+ title: { type: "string", default: "Progress" },
+ showTitle: { type: "boolean", default: true },
+ labelTypography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 16, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-block-progress-labels" }],
+ },
+ labelColor: {
+ type: "string",
+ default: "",
+ style: [{ selector: "{{QUBELY}} .qubely-block-progress-labels {color: {{labelColor}};}" }],
+ },
+ labelPosition: { type: "string", default: "outside" },
+ labelSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-progress-labels.qubely-position-outside {margin-bottom: {{labelSpacing}};} {{QUBELY}} .qubely-block-progress-labels.qubely-position-inside {padding-left: {{labelSpacing}}; padding-right: {{labelSpacing}};}",
+ },
+ ],
+ },
// Bar
- barHeight: {type: 'object', default: {md: 30, unit: 'px'}, style: [{ selector: '{{QUBELY}} .qubely-progress {height: {{barHeight}}; line-height: {{barHeight}};}' }] },
- barBackground: {type: 'string', default: '#e9ecef', style: [{ selector: '{{QUBELY}} .qubely-progress {background-color: {{barBackground}};}' }] },
- progressBackground: { type: 'object', default: {openColor: 1, type: 'color', color: 'var(--qubely-color-1)',gradient: {}}, style: [{ selector: '{{QUBELY}} .qubely-progress-bar' }] },
- striped: {type: 'boolean', default: false},
+ barHeight: {
+ type: "object",
+ default: { md: 30, unit: "px" },
+ style: [{ selector: "{{QUBELY}} .qubely-progress {height: {{barHeight}}; line-height: {{barHeight}};}" }],
+ },
+ barBackground: {
+ type: "string",
+ default: "#e9ecef",
+ style: [{ selector: "{{QUBELY}} .qubely-progress {background-color: {{barBackground}};}" }],
+ },
+ progressBackground: {
+ type: "object",
+ default: { openColor: 1, type: "color", color: "var(--qubely-color-1)", gradient: {} },
+ style: [{ selector: "{{QUBELY}} .qubely-progress-bar" }],
+ },
+ striped: { type: "boolean", default: false },
borderRadius: {
- type: 'object',
+ type: "object",
default: {
openBorderRadius: 1,
- radiusType: 'global',
- global: {md: 10},
- unit: 'px',
-
+ radiusType: "global",
+ global: { md: 10 },
+ unit: "px",
},
- style: [{selector: '{{QUBELY}} .qubely-progress, {{QUBELY}} .qubely-progress-bar' }]
+ style: [{ selector: "{{QUBELY}} .qubely-progress, {{QUBELY}} .qubely-progress-bar" }],
},
- showProgress: {type: 'boolean', default: true},
- sourceOfCopiedStyle: { type: 'boolean', default: false }
+ showProgress: { type: "boolean", default: true },
+ sourceOfCopiedStyle: { type: "boolean", default: false },
},
edit: Edit,
- save: Save
-} );
+ save: Save,
+});
diff --git a/assets/reactjs/src/blocks/progressbar/save.js b/assets/reactjs/src/blocks/progressbar/save.js
index 268a56b6..8b65281d 100644
--- a/assets/reactjs/src/blocks/progressbar/save.js
+++ b/assets/reactjs/src/blocks/progressbar/save.js
@@ -1,28 +1,39 @@
-const { Component } = wp.element
-const { HelperFunction: { animationAttr, IsInteraction } } = wp.qubelyComponents
+const { Component } = wp.element;
+const {
+ HelperFunction: { animationAttr, IsInteraction },
+} = wp.qubelyComponents;
class Save extends Component {
- render() {
- const { uniqueId, animation, title, labelPosition, striped, progress, showProgress, interaction } = this.props.attributes
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
- const labelsContent = title != '' ?
- (
-
{title}
- {showProgress &&
{progress}%
}
-
) : ''
- return (
-
-
- { labelPosition == 'outside' && labelsContent }
-
-
- {striped &&
}
- { labelPosition == 'inside' && labelsContent }
-
-
-
-
- )
- }
+ render() {
+ const { uniqueId, animation, title, labelPosition, striped, progress, showProgress, interaction } =
+ this.props.attributes;
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
+ const labelsContent =
+ title != "" ? (
+
+
{title}
+ {showProgress && (
+
+ {progress}%
+
+ )}
+
+ ) : (
+ ""
+ );
+ return (
+
+
+ {labelPosition == "outside" && labelsContent}
+
+
+ {striped &&
}
+ {labelPosition == "inside" && labelsContent}
+
+
+
+
+ );
+ }
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/progressbar/style.scss b/assets/reactjs/src/blocks/progressbar/style.scss
index 0affe199..1fe3a20e 100644
--- a/assets/reactjs/src/blocks/progressbar/style.scss
+++ b/assets/reactjs/src/blocks/progressbar/style.scss
@@ -1,32 +1,41 @@
.qubely-block-progress-bar {
- .qubely-block-progress-labels {
- display: -ms-flexbox;
- display: flex;
- justify-content: space-between;
- }
+ .qubely-block-progress-labels {
+ display: -ms-flexbox;
+ display: flex;
+ justify-content: space-between;
+ }
- .qubely-progress {
- .qubely-progress-bar {
- position: relative;
- transition: 300ms;
- height: 100%;
- overflow: hidden;
- .qubely-progress-striped {
- height: 100%;
- width: 100%;
- background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
- background-size: 40px 40px;
- transition: 300ms;
- }
- }
-
- .qubely-block-progress-labels {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- padding: 0 10px;
- }
- }
+ .qubely-progress {
+ .qubely-progress-bar {
+ position: relative;
+ transition: 300ms;
+ height: 100%;
+ overflow: hidden;
+ .qubely-progress-striped {
+ height: 100%;
+ width: 100%;
+ background-image: linear-gradient(
+ 45deg,
+ rgba(255, 255, 255, 0.15) 25%,
+ transparent 25%,
+ transparent 50%,
+ rgba(255, 255, 255, 0.15) 50%,
+ rgba(255, 255, 255, 0.15) 75%,
+ transparent 75%,
+ transparent
+ );
+ background-size: 40px 40px;
+ transition: 300ms;
+ }
+ }
+
+ .qubely-block-progress-labels {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 0 10px;
+ }
+ }
}
diff --git a/assets/reactjs/src/blocks/row/Edit.js b/assets/reactjs/src/blocks/row/Edit.js
index 8b12f8f7..bf081317 100755
--- a/assets/reactjs/src/blocks/row/Edit.js
+++ b/assets/reactjs/src/blocks/row/Edit.js
@@ -1,419 +1,601 @@
/* eslint-disable react/react-in-jsx-scope */
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
const { compose } = wp.compose;
-const { select, withDispatch } = wp.data
-const { PanelBody, TextControl, SelectControl, Tooltip, Button, RangeControl } = wp.components
-const { Component, Fragment, createRef } = wp.element
-const { InspectorControls, InnerBlocks, InspectorAdvancedControls } = wp.blockEditor
-const { Background, Select, Range, Toggle, Shape, BoxShadow, Tab, Tabs, Separator, Border, BorderRadius, RadioAdvanced, Dimension, gloalSettings: { globalSettingsPanel, animationSettings }, HelperFunction: { videoBackground }, CssGenerator: { CssGenerator }, withCSSGenerator, InspectorTabs, InspectorTab } = wp.qubelyComponents
-import { ModalManager } from '../../helpers/ModalManager';
-import PageListModal from '../../helpers/PageListModal';
-import icons from '../../helpers/icons';
+const { select, withDispatch } = wp.data;
+const { PanelBody, TextControl, SelectControl, Tooltip, Button, RangeControl } = wp.components;
+const { Component, Fragment, createRef } = wp.element;
+const { InspectorControls, InnerBlocks, InspectorAdvancedControls } = wp.blockEditor;
+const {
+ Background,
+ Select,
+ Range,
+ Toggle,
+ Shape,
+ BoxShadow,
+ Tab,
+ Tabs,
+ Separator,
+ Border,
+ BorderRadius,
+ RadioAdvanced,
+ Dimension,
+ gloalSettings: { globalSettingsPanel, animationSettings },
+ HelperFunction: { videoBackground },
+ CssGenerator: { CssGenerator },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+} = wp.qubelyComponents;
+import { ModalManager } from "../../helpers/ModalManager";
+import PageListModal from "../../helpers/PageListModal";
+import icons from "../../helpers/icons";
const colOption = [
- { label: '100', columns: 1, layout: { md: [100], sm: [100], xs: [100] } },
- { label: '50/50', columns: 2, layout: { md: [50, 50], sm: [100, 100], xs: [100, 100] } },
- { label: '33/33/33', columns: 3, layout: { md: [33.33, 33.33, 33.34], sm: [100, 100, 100], xs: [100, 100, 100] } },
- { label: '25/25/25/25', columns: 4, layout: { md: [25, 25, 25, 25], sm: [50, 50, 50, 50], xs: [100, 100, 100, 100] } },
- { label: '34/66', columns: 2, layout: { md: [34, 66], sm: [50, 50], xs: [100, 100] } },
- { label: '66/34', columns: 2, layout: { md: [66, 34], sm: [100, 100], xs: [100, 100] } },
- { label: '25/25/50', columns: 3, layout: { md: [25, 25, 50], sm: [50, 50, 100], xs: [100, 100, 100] } },
- { label: '50/25/25', columns: 3, layout: { md: [50, 25, 25], sm: [100, 50, 50], xs: [100, 100, 100] } },
- { label: '25/50/25', columns: 3, layout: { md: [25, 50, 25], sm: [100, 100, 100], xs: [100, 100, 100] } },
- { label: '20/20/20/20/20', columns: 5, layout: { md: [20, 20, 20, 20, 20], sm: [20, 20, 20, 20, 20], xs: [20, 20, 20, 20, 20] } },
- { label: '16/16/16/16/16/16', columns: 6, layout: { md: [16.66, 16.67, 16.66, 16.67, 16.67, 16.67], sm: [33.33, 33.33, 33.34, 33.33, 33.33, 33.34], xs: [50, 50, 50, 50, 50, 50] } },
- { label: '16/66/16', columns: 3, layout: { md: [16.66, 66.68, 16.66], sm: [100, 100, 100], xs: [100, 100, 100] } },
+ { label: "100", columns: 1, layout: { md: [100], sm: [100], xs: [100] } },
+ { label: "50/50", columns: 2, layout: { md: [50, 50], sm: [100, 100], xs: [100, 100] } },
+ { label: "33/33/33", columns: 3, layout: { md: [33.33, 33.33, 33.34], sm: [100, 100, 100], xs: [100, 100, 100] } },
+ {
+ label: "25/25/25/25",
+ columns: 4,
+ layout: { md: [25, 25, 25, 25], sm: [50, 50, 50, 50], xs: [100, 100, 100, 100] },
+ },
+ { label: "34/66", columns: 2, layout: { md: [34, 66], sm: [50, 50], xs: [100, 100] } },
+ { label: "66/34", columns: 2, layout: { md: [66, 34], sm: [100, 100], xs: [100, 100] } },
+ { label: "25/25/50", columns: 3, layout: { md: [25, 25, 50], sm: [50, 50, 100], xs: [100, 100, 100] } },
+ { label: "50/25/25", columns: 3, layout: { md: [50, 25, 25], sm: [100, 50, 50], xs: [100, 100, 100] } },
+ { label: "25/50/25", columns: 3, layout: { md: [25, 50, 25], sm: [100, 100, 100], xs: [100, 100, 100] } },
+ {
+ label: "20/20/20/20/20",
+ columns: 5,
+ layout: { md: [20, 20, 20, 20, 20], sm: [20, 20, 20, 20, 20], xs: [20, 20, 20, 20, 20] },
+ },
+ {
+ label: "16/16/16/16/16/16",
+ columns: 6,
+ layout: {
+ md: [16.66, 16.67, 16.66, 16.67, 16.67, 16.67],
+ sm: [33.33, 33.33, 33.34, 33.33, 33.33, 33.34],
+ xs: [50, 50, 50, 50, 50, 50],
+ },
+ },
+ { label: "16/66/16", columns: 3, layout: { md: [16.66, 66.68, 16.66], sm: [100, 100, 100], xs: [100, 100, 100] } },
];
-let defaultLayout = { md: [100], sm: [100], xs: [100] }
+let defaultLayout = { md: [100], sm: [100], xs: [100] };
class Edit extends Component {
- constructor(props) {
- super(props);
- this.state = {
- device: 'md',
- hideRowSettings: false
- };
- this.qubelyContextMenu = createRef();
- }
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const { getBlockRootClientId } = select('core/block-editor');
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ hideRowSettings: false,
+ };
+ this.qubelyContextMenu = createRef();
+ }
+ componentDidMount() {
+ const {
+ setAttributes,
+ clientId,
+ attributes: { uniqueId },
+ } = this.props;
+ const { getBlockRootClientId } = select("core/block-editor");
- let parentClientId = getBlockRootClientId(clientId)
+ let parentClientId = getBlockRootClientId(clientId);
- if (parentClientId) {
- this.setState({ hideRowSettings: true })
- }
+ if (parentClientId) {
+ this.setState({ hideRowSettings: true });
+ }
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client, childRow: parentClientId ? true : false });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client, childRow: parentClientId ? true : false });
- }
- }
+ const _client = clientId.substr(0, 6);
+ if (!uniqueId) {
+ setAttributes({ uniqueId: _client, childRow: parentClientId ? true : false });
+ } else if (uniqueId && uniqueId != _client) {
+ setAttributes({ uniqueId: _client, childRow: parentClientId ? true : false });
+ }
+ }
- getTemplate(columns) {
- return [...Array(parseInt(columns))].map((data, index) => {
- const columnWidth = { md: defaultLayout.md[index], sm: defaultLayout.sm[index], xs: defaultLayout.xs[index], unit: '%', device: 'md' }
- return ['qubely/column', { colWidth: columnWidth }]
- })
- }
+ getTemplate(columns) {
+ return [...Array(parseInt(columns))].map((data, index) => {
+ const columnWidth = {
+ md: defaultLayout.md[index],
+ sm: defaultLayout.sm[index],
+ xs: defaultLayout.xs[index],
+ unit: "%",
+ device: "md",
+ };
+ return ["qubely/column", { colWidth: columnWidth }];
+ });
+ }
- removeRowBlock() {
- const { clientId, removeBlock } = this.props;
- removeBlock(clientId); //remove row block
- }
+ removeRowBlock() {
+ const { clientId, removeBlock } = this.props;
+ removeBlock(clientId); //remove row block
+ }
- importLayout() {
- ModalManager.open(
);
- }
+ importLayout() {
+ ModalManager.open(
);
+ }
- getClassName = () => {
- const {
- attributes: {
- align,
- childRow,
- rowContainerWidth
- }
- } = this.props;
- let wrapperClassName = '';
+ getClassName = () => {
+ const {
+ attributes: { align, childRow, rowContainerWidth },
+ } = this.props;
+ let wrapperClassName = "";
- if (typeof align !== 'undefined') {
- if (align === 'full' && rowContainerWidth === 'boxed') {
- wrapperClassName = 'qubely-container';
- } else {
- wrapperClassName = 'qubely-container-fluid';
- }
- } else {
- if (childRow) {
- wrapperClassName = 'qubely-container-fluid';
- } else {
- wrapperClassName = 'qubely-container';
- }
- }
- return wrapperClassName;
- }
+ if (typeof align !== "undefined") {
+ if (align === "full" && rowContainerWidth === "boxed") {
+ wrapperClassName = "qubely-container";
+ } else {
+ wrapperClassName = "qubely-container-fluid";
+ }
+ } else {
+ if (childRow) {
+ wrapperClassName = "qubely-container-fluid";
+ } else {
+ wrapperClassName = "qubely-container";
+ }
+ }
+ return wrapperClassName;
+ };
- render() {
- const {
- attributes: {
- uniqueId,
- className,
- rowId,
- columns,
- evenColumnHeight,
- align,
- rowGutter,
- rowBlend,
- rowOverlay,
- rowOpacity,
- rowContainer,
- rowContainerWidth,
- position,
- padding,
- marginTop,
- marginBottom,
- rowBg,
- shapeTop,
- shapeBottom,
- rowReverse,
- rowShadow,
- heightOptions,
- rowHeight,
- border,
- borderRadius,
- enableRowOverlay,
- //animation
- animation,
- //global
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- globalZindex,
- hideTablet,
- hideMobile,
- globalCss
- },
- setAttributes } = this.props;
+ render() {
+ const {
+ attributes: {
+ uniqueId,
+ className,
+ rowId,
+ columns,
+ evenColumnHeight,
+ align,
+ rowGutter,
+ rowBlend,
+ rowOverlay,
+ rowOpacity,
+ rowContainer,
+ rowContainerWidth,
+ position,
+ padding,
+ marginTop,
+ marginBottom,
+ rowBg,
+ shapeTop,
+ shapeBottom,
+ rowReverse,
+ rowShadow,
+ heightOptions,
+ rowHeight,
+ border,
+ borderRadius,
+ enableRowOverlay,
+ //animation
+ animation,
+ //global
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideDesktop,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ },
+ setAttributes,
+ } = this.props;
- const { device, hideRowSettings } = this.state;
- if (!columns) {
- return (
-
-
-
this.removeRowBlock()} className="qubely-component-remove-button" >
-
-
{__('Select Column Layout')}
-
- {colOption.map((data, i) => (
-
- {
- setAttributes({ columns: data.columns });
- defaultLayout = data.layout
- }}>
- {data.layout.md.map((d, index) =>
-
- ))}
-
-
- this.importLayout()}>
- {__('Import Layout')}
-
-
-
- )
- }
- return (
-
-
-
-
-
- setAttributes({ heightOptions: val })}
- />
+ const { device, hideRowSettings } = this.state;
+ if (!columns) {
+ return (
+
+
+
this.removeRowBlock()} className="qubely-component-remove-button">
+
+
{__("Select Column Layout")}
+
+ {colOption.map((data) => (
+
+ {
+ setAttributes({ columns: data.columns });
+ defaultLayout = data.layout;
+ }}
+ >
+ {data.layout.md.map((d) => (
+
+
+ ))}
+
+
+ this.importLayout()}
+ >
+ {__("Import Layout")}
+
+
+
+ );
+ }
+ return (
+
+
+
+
+
+ setAttributes({ heightOptions: val })}
+ />
- {heightOptions === 'custom' &&
- setAttributes({ rowHeight: val })}
- min={40}
- max={1200}
- unit={['px', 'em', '%']}
- responsive
- device={this.state.device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- }
+ {heightOptions === "custom" && (
+ setAttributes({ rowHeight: val })}
+ min={40}
+ max={1200}
+ unit={["px", "em", "%"]}
+ responsive
+ device={this.state.device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- {(align == 'full' && !hideRowSettings) &&
-
- setAttributes({ rowContainerWidth: val })}
- options={[
- { label: __('Full Width'), value: 'fluid', title: __('Full Width') },
- { label: __('Boxed'), value: 'boxed', title: __('Boxed') }
- ]}
- />
- {rowContainerWidth == 'boxed' &&
- setAttributes({ rowContainer: parseInt(val) })}
- />
- }
-
- }
- setAttributes({ evenColumnHeight: val })} />
- {
- columns > 1 &&
+ {align == "full" && !hideRowSettings && (
+
+ setAttributes({ rowContainerWidth: val })}
+ options={[
+ { label: __("Full Width"), value: "fluid", title: __("Full Width") },
+ { label: __("Boxed"), value: "boxed", title: __("Boxed") },
+ ]}
+ />
+ {rowContainerWidth == "boxed" && (
+ setAttributes({ rowContainer: parseInt(val) })}
+ />
+ )}
+
+ )}
+ setAttributes({ evenColumnHeight: val })}
+ />
+ {columns > 1 && (
+ setAttributes({ rowGutter: val })}
+ unit={["px", "em", "%"]}
+ responsive
+ device={this.state.device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ rowGutter: val })}
- unit={['px', 'em', '%']}
- responsive
- device={this.state.device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- }
-
+
{__("Content Position")}
+
+
+ setAttributes({ position: "flex-start" })}
+ className={
+ "qubely-button" + (position === "flex-start" ? " active" : "")
+ }
+ >
+ {icons.vertical_top}
+
+
-
-
{__('Content Position')}
-
-
- setAttributes({ position: 'flex-start' })}
- className={"qubely-button" + (position === 'flex-start' ? ' active' : '')}
- >{icons.vertical_top}
-
+
+ setAttributes({ position: "center" })}
+ className={"qubely-button" + (position === "center" ? " active" : "")}
+ >
+ {icons.vertical_middle}
+
+
-
- setAttributes({ position: 'center' })}
- className={"qubely-button" + (position === 'center' ? ' active' : '')}
- >{icons.vertical_middle}
-
+
+ setAttributes({ position: "flex-end" })}
+ className={"qubely-button" + (position === "flex-end" ? " active" : "")}
+ >
+ {icons.vertical_bottom}
+
+
+
+
+
-
- setAttributes({ position: 'flex-end' })}
- className={"qubely-button" + (position === 'flex-end' ? ' active' : '')}
- >{icons.vertical_bottom}
-
-
-
+
+ setAttributes({ rowBg: val })}
+ />
+ setAttributes({ border: val })}
+ min={0}
+ max={10}
+ device={this.state.device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ rowShadow: val })}
+ />
+ setAttributes({ borderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={this.state.device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
-
- setAttributes({ rowBg: val })}
- />
- setAttributes({ border: val })}
- min={0}
- max={10}
- device={this.state.device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ rowShadow: val })} />
- setAttributes({ borderRadius: val })}
- min={0}
- max={100}
- unit={['px', 'em', '%']}
- responsive
- device={this.state.device}
- onDeviceChange={value => this.setState({ device: value })}
- />
+ setAttributes({ enableRowOverlay: val })}
+ />
+ {enableRowOverlay == 1 && (
+
+ setAttributes({ rowOverlay: val })}
+ />
+ {rowOverlay.openBg == 1 && (
+
+ setAttributes({ rowOpacity: val })}
+ />
+ setAttributes({ rowBlend: val })}
+ />
+
+ )}
+
+ )}
+
- setAttributes({ enableRowOverlay: val })} />
- {enableRowOverlay == 1 &&
-
- setAttributes({ rowOverlay: val })} />
- {rowOverlay.openBg == 1 &&
-
- setAttributes({ rowOpacity: val })} />
- setAttributes({ rowBlend: val })} />
-
- }
-
- }
-
+
+
+
+ setAttributes({ shapeTop: val })}
+ />
+
+
+ setAttributes({ shapeBottom: val })}
+ />
+
+
+
+
+
+
+ setAttributes({ padding: val })}
+ min={0}
+ max={600}
+ unit={["px", "em", "%"]}
+ responsive
+ device={this.state.device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ clientId={this.props.clientId}
+ />
+ setAttributes({ marginTop: value })}
+ unit={["px", "em", "%"]}
+ min={-400}
+ max={500}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ marginBottom: value })}
+ unit={["px", "em", "%"]}
+ min={-400}
+ max={500}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+
+
+
-
-
-
- setAttributes({ shapeTop: val })} />
-
-
- setAttributes({ shapeBottom: val })} />
-
-
-
-
-
-
- setAttributes({ padding: val })}
- min={0}
- max={600}
- unit={['px', 'em', '%']}
- responsive
- device={this.state.device}
- onDeviceChange={value => this.setState({ device: value })}
- clientId={this.props.clientId}
- />
- setAttributes({ marginTop: value })} unit={['px', 'em', '%']} min={-400} max={500} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ marginBottom: value })} unit={['px', 'em', '%']} min={-400} max={500} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- {animationSettings(uniqueId, animation, setAttributes)}
-
-
+
+ setAttributes({ rowReverse: { values: val, openRowReverse: true } })}
+ />
+ setAttributes({ rowId: val })} />
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideDesktop,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes,
+ true
+ )}
+
-
-
-
- setAttributes({ rowReverse: { values: val, openRowReverse: true } })} />
- setAttributes({ rowId: val })} />
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes, true)}
-
-
-
-
-
- {(padding.md.top && padding.md.top > 20) ? padding.md.top + ' ' + padding.unit : ''}
-
-
- {(padding.md.right && padding.md.right > 40) ? padding.md.right + ' ' + padding.unit : ''}
-
-
- {(padding.md.bottom && padding.md.bottom > 20) ? padding.md.bottom + ' ' + padding.unit : ''}
-
-
- {(padding.md.left && padding.md.left > 40) ? padding.md.left + ' ' + padding.unit : ''}
-
-
-
-
- {marginTop.md && marginTop.md > 20 ? marginTop.md + ' ' + marginTop.unit : ''}
-
-
- {marginBottom.md && marginBottom.md > 20 ? marginBottom.md + ' ' + marginBottom.unit : ''}
-
-
-
- {(Object.entries(shapeTop).length > 1 && shapeTop.openShape == 1 && shapeTop.style) &&
-
- }
- {(Object.entries(rowBg).length > 0 && rowBg.openBg == 1 && rowBg.bgType == 'video') &&
- videoBackground(rowBg, 'row')
- }
- {(Object.entries(shapeBottom).length > 1 && shapeBottom.openShape == 1 && shapeBottom.style) &&
-
- }
-
- {/*
-
- )
- }
+
+
+
+ {padding.md.top && padding.md.top > 20 ? padding.md.top + " " + padding.unit : ""}
+
+
+ {padding.md.right && padding.md.right > 40 ? padding.md.right + " " + padding.unit : ""}
+
+
+ {padding.md.bottom && padding.md.bottom > 20 ? padding.md.bottom + " " + padding.unit : ""}
+
+
+ {padding.md.left && padding.md.left > 40 ? padding.md.left + " " + padding.unit : ""}
+
+
+
+
+ {marginTop.md && marginTop.md > 20 ? marginTop.md + " " + marginTop.unit : ""}
+
+
+ {marginBottom.md && marginBottom.md > 20 ? marginBottom.md + " " + marginBottom.unit : ""}
+
+
+ {Object.entries(shapeTop).length > 1 && shapeTop.openShape == 1 && shapeTop.style && (
+
+ )}
+ {Object.entries(rowBg).length > 0 &&
+ rowBg.openBg == 1 &&
+ rowBg.bgType == "video" &&
+ videoBackground(rowBg, "row")}
+ {Object.entries(shapeBottom).length > 1 && shapeBottom.openShape == 1 && shapeBottom.style && (
+
+ )}
+
+ {/*
+
+ );
+ }
}
export default compose([
- withDispatch((dispatch) => {
- const {
- removeBlock,
- } = dispatch('core/block-editor');
+ withDispatch((dispatch) => {
+ const { removeBlock } = dispatch("core/block-editor");
- return {
- removeBlock,
- };
- }),
- withCSSGenerator()
-])(Edit);
\ No newline at end of file
+ return {
+ removeBlock,
+ };
+ }),
+ withCSSGenerator(),
+])(Edit);
diff --git a/assets/reactjs/src/blocks/row/Save.js b/assets/reactjs/src/blocks/row/Save.js
index abb7cb82..bcb52184 100755
--- a/assets/reactjs/src/blocks/row/Save.js
+++ b/assets/reactjs/src/blocks/row/Save.js
@@ -1,61 +1,82 @@
/* eslint-disable react/react-in-jsx-scope */
-import './style.scss'
-const { Component } = wp.element
-const { InnerBlocks } = wp.blockEditor
-const { HelperFunction: { animationAttr, videoBackground } } = wp.qubelyComponents
+import "./style.scss";
+const { Component } = wp.element;
+const { InnerBlocks } = wp.blockEditor;
+const {
+ HelperFunction: { animationAttr, videoBackground },
+} = wp.qubelyComponents;
class Save extends Component {
-
getClassName = () => {
const {
- attributes: {
- align,
- childRow,
- rowContainerWidth
- }
+ attributes: { align, childRow, rowContainerWidth },
} = this.props;
- let wrapperClassName = '';
+ let wrapperClassName = "";
- if (typeof align !== 'undefined') {
- if (align === 'full' && rowContainerWidth === 'boxed') {
- wrapperClassName = 'qubely-container';
+ if (typeof align !== "undefined") {
+ if (align === "full" && rowContainerWidth === "boxed") {
+ wrapperClassName = "qubely-container";
} else {
- wrapperClassName = 'qubely-container-fluid';
+ wrapperClassName = "qubely-container-fluid";
}
} else {
if (childRow) {
- wrapperClassName = 'qubely-container-fluid';
+ wrapperClassName = "qubely-container-fluid";
} else {
- wrapperClassName = 'qubely-container';
+ wrapperClassName = "qubely-container";
}
}
return wrapperClassName;
- }
+ };
render() {
- const { attributes: { uniqueId, animation, align, rowContainerWidth, rowId, rowBg, shapeTop, shapeBottom, heightOptions } } = this.props
+ const {
+ attributes: {
+ uniqueId,
+ animation,
+ align,
+ rowContainerWidth,
+ rowId,
+ rowBg,
+ shapeTop,
+ shapeBottom,
+ heightOptions,
+ },
+ } = this.props;
return (
-
-
- {(Object.entries(shapeTop).length > 1 && shapeTop.openShape == 1 && shapeTop.style) &&
-
- }
- {(Object.entries(rowBg).length > 0 && rowBg.openBg == 1 && rowBg.bgType == 'video') &&
- videoBackground(rowBg, 'row')
- }
- {(Object.entries(shapeBottom).length > 1 && shapeBottom.openShape == 1 && shapeBottom.style) &&
-
- }
+
+ {Object.entries(shapeTop).length > 1 && shapeTop.openShape == 1 && shapeTop.style && (
+
+ )}
+ {Object.entries(rowBg).length > 0 &&
+ rowBg.openBg == 1 &&
+ rowBg.bgType == "video" &&
+ videoBackground(rowBg, "row")}
+ {Object.entries(shapeBottom).length > 1 && shapeBottom.openShape == 1 && shapeBottom.style && (
+
+ )}
- )
+ );
}
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/row/attributes.js b/assets/reactjs/src/blocks/row/attributes.js
index 4e90be56..4f7626d9 100644
--- a/assets/reactjs/src/blocks/row/attributes.js
+++ b/assets/reactjs/src/blocks/row/attributes.js
@@ -1,182 +1,232 @@
const {
- gloalSettings: {
- globalAttributes,
- }
+ gloalSettings: { globalAttributes },
} = wp.qubelyComponents;
const attributes = {
- uniqueId: {
- type: 'string',
- default: ''
- },
- ...globalAttributes, // Global Settings
- columns: {
- type: 'number',
- default: ''
- },
- childRow: {
- type: 'boolean',
- default: false
- },
- evenColumnHeight: {
- type: 'boolean',
- default: false,
- style: [
- { selector: '{{QUBELY}}.qubely-section .qubely-row .qubely-column>.qubely-column-inner {height: 100%;}' },
- ]
- },
- // Dimension
- padding: {
- type: 'object',
- default: {
- md: {
- top: 70,
- right: 0,
- bottom: 70,
- left: 0
- },
- unit: 'px',
- },
- style: [{ selector: '{{QUBELY}}.qubely-section {padding: {{padding}};}' }]
- },
+ uniqueId: {
+ type: "string",
+ default: "",
+ },
+ ...globalAttributes, // Global Settings
+ columns: {
+ type: "number",
+ default: "",
+ },
+ childRow: {
+ type: "boolean",
+ default: false,
+ },
+ evenColumnHeight: {
+ type: "boolean",
+ default: false,
+ style: [
+ { selector: "{{QUBELY}}.qubely-section .qubely-row .qubely-column>.qubely-column-inner {height: 100%;}" },
+ ],
+ },
+ // Dimension
+ padding: {
+ type: "object",
+ default: {
+ md: {
+ top: 70,
+ right: 0,
+ bottom: 70,
+ left: 0,
+ },
+ unit: "px",
+ },
+ style: [{ selector: "{{QUBELY}}.qubely-section {padding: {{padding}};}" }],
+ },
- marginTop: { type: 'object', default: { md: 0, unit: 'px' }, style: [{ selector: '{{QUBELY}}.qubely-section{ margin-top: {{marginTop}}; }' }] },
- marginBottom: { type: 'object', default: { md: 0, unit: 'px' }, style: [{ selector: '{{QUBELY}}.qubely-section{ margin-bottom: {{marginBottom}}; }' }] },
+ marginTop: {
+ type: "object",
+ default: { md: 0, unit: "px" },
+ style: [{ selector: "{{QUBELY}}.qubely-section{ margin-top: {{marginTop}}; }" }],
+ },
+ marginBottom: {
+ type: "object",
+ default: { md: 0, unit: "px" },
+ style: [{ selector: "{{QUBELY}}.qubely-section{ margin-bottom: {{marginBottom}}; }" }],
+ },
- rowGutter: {
- type: 'object', default: { md: 30, sm: 30, xs: 30, unit: 'px' }, style: [{
- selector:
- '{{QUBELY}} .qubely-container {padding-left: calc({{rowGutter}}/2); padding-right: calc({{rowGutter}}/2);}' +
- '{{QUBELY}} .qubely-row {margin-left: calc(-{{rowGutter}}/2); margin-right: calc(-{{rowGutter}}/2);}' +
- '{{QUBELY}} .qubely-row > .qubely-column {padding-left: calc({{rowGutter}}/2); padding-right: calc({{rowGutter}}/2);}' +
- '{{QUBELY}} .qubely-row * > [data-type="qubely/column"] {padding-left: calc({{rowGutter}}/2); padding-right: calc({{rowGutter}}/2);}' +
- '.components-resizable-box__container.qubely-column-resizer.is-selected-column > span > .components-resizable-box__handle, ' +
- 'div[data-type="qubely/row"].is-selected .components-resizable-box__container.qubely-column-resizer > span > .components-resizable-box__handle,' +
- 'div[data-type="qubely/row"].is-resizing .components-resizable-box__container.qubely-column-resizer > span > .components-resizable-box__handle {right: calc(-{{rowGutter}}/2);}'
- }]
- },
+ rowGutter: {
+ type: "object",
+ default: { md: 30, sm: 30, xs: 30, unit: "px" },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-container {padding-left: calc({{rowGutter}}/2); padding-right: calc({{rowGutter}}/2);}" +
+ "{{QUBELY}} .qubely-row {margin-left: calc(-{{rowGutter}}/2); margin-right: calc(-{{rowGutter}}/2);}" +
+ "{{QUBELY}} .qubely-row > .qubely-column {padding-left: calc({{rowGutter}}/2); padding-right: calc({{rowGutter}}/2);}" +
+ '{{QUBELY}} .qubely-row * > [data-type="qubely/column"] {padding-left: calc({{rowGutter}}/2); padding-right: calc({{rowGutter}}/2);}' +
+ ".components-resizable-box__container.qubely-column-resizer.is-selected-column > span > .components-resizable-box__handle, " +
+ 'div[data-type="qubely/row"].is-selected .components-resizable-box__container.qubely-column-resizer > span > .components-resizable-box__handle,' +
+ 'div[data-type="qubely/row"].is-resizing .components-resizable-box__container.qubely-column-resizer > span > .components-resizable-box__handle {right: calc(-{{rowGutter}}/2);}',
+ },
+ ],
+ },
- rowContainerWidth: {
- type: 'string',
- default: 'boxed'
- },
+ rowContainerWidth: {
+ type: "string",
+ default: "boxed",
+ },
- rowContainer: {
- type: 'number',
- default: 0,
- style: [
- {
- condition: [
- { key: 'align', relation: '==', value: 'full' },
- { key: 'rowContainerWidth', relation: '==', value: 'boxed' },
- { key: 'rowContainer', relation: '!=', value: 0 },
- ],
- selector: '@media (min-width: 1200px) {{{QUBELY}} .qubely-container {max-width: {{rowContainer}}px !important;}}'
- }
- ]
- },
- position: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-row, {{QUBELY}} .qubely-row .block-editor-block-list__layout {-webkit-box-align: {{position}}; -ms-flex-align: {{position}}; align-items: {{position}}; }' }] },
+ rowContainer: {
+ type: "number",
+ default: 0,
+ style: [
+ {
+ condition: [
+ { key: "align", relation: "==", value: "full" },
+ { key: "rowContainerWidth", relation: "==", value: "boxed" },
+ { key: "rowContainer", relation: "!=", value: 0 },
+ ],
+ selector:
+ "@media (min-width: 1200px) {{{QUBELY}} .qubely-container {max-width: {{rowContainer}}px !important;}}",
+ },
+ ],
+ },
+ position: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-row, {{QUBELY}} .qubely-row .block-editor-block-list__layout {-webkit-box-align: {{position}}; -ms-flex-align: {{position}}; align-items: {{position}}; }",
+ },
+ ],
+ },
- // Background
- rowBg: {
- type: 'object',
- default: {
- bgimgPosition: 'center center',
- bgimgSize: 'cover',
- bgimgRepeat: 'no-repeat',
- bgDefaultColor: '#f5f5f5',
- bgimageSource: 'local',
- externalImageUrl: {}
- },
- style: [{ selector: '{{QUBELY}}.qubely-section' }]
- },
- heightOptions: { type: 'string', default: 'auto' },
- rowHeight: {
- type: 'object', default: {},
- style: [
- {
- condition: [
- { key: 'heightOptions', relation: '==', value: 'custom' },
- ],
- selector: '{{QUBELY}} .qubely-row {min-height: {{rowHeight}};}'
- }
- ]
- },
+ // Background
+ rowBg: {
+ type: "object",
+ default: {
+ bgimgPosition: "center center",
+ bgimgSize: "cover",
+ bgimgRepeat: "no-repeat",
+ bgDefaultColor: "#f5f5f5",
+ bgimageSource: "local",
+ externalImageUrl: {},
+ },
+ style: [{ selector: "{{QUBELY}}.qubely-section" }],
+ },
+ heightOptions: { type: "string", default: "auto" },
+ rowHeight: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "heightOptions", relation: "==", value: "custom" }],
+ selector: "{{QUBELY}} .qubely-row {min-height: {{rowHeight}};}",
+ },
+ ],
+ },
- borderRadius: {
- type: 'object', default: {},
- style: [
- {
- selector: '{{QUBELY}}.qubely-section, {{QUBELY}}.qubely-section .qubely-video-bg-wrap, {{QUBELY}}.qubely-section .qubely-row-overlay'
- }
- ]
- },
+ borderRadius: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector:
+ "{{QUBELY}}.qubely-section, {{QUBELY}}.qubely-section .qubely-video-bg-wrap, {{QUBELY}}.qubely-section .qubely-row-overlay",
+ },
+ ],
+ },
- rowShadow: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}}.qubely-section' }] },
- border: {
- type: 'object', default: {},
- style: [
- {
- selector: '{{QUBELY}}.qubely-section'
- }
- ]
- },
+ rowShadow: { type: "object", default: {}, style: [{ selector: "{{QUBELY}}.qubely-section" }] },
+ border: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector: "{{QUBELY}}.qubely-section",
+ },
+ ],
+ },
- // Overlay
- enableRowOverlay: { type: 'boolean', default: false },
- rowOverlay: {
- type: 'object',
- default: {},
- style: [
- {
- condition: [
- { key: 'enableRowOverlay', relation: '==', value: true },
- ],
- selector: '{{QUBELY}} >.qubely-row-overlay'
- }
- ]
- },
- rowBlend: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} >.qubely-row-overlay { mix-blend-mode: {{rowBlend}}; }' }] },
- rowOpacity: { type: 'number', default: '.8', style: [{ selector: '{{QUBELY}} >.qubely-row-overlay {opacity: {{rowOpacity}}; }' }] },
+ // Overlay
+ enableRowOverlay: { type: "boolean", default: false },
+ rowOverlay: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "enableRowOverlay", relation: "==", value: true }],
+ selector: "{{QUBELY}} >.qubely-row-overlay",
+ },
+ ],
+ },
+ rowBlend: {
+ type: "string",
+ default: "",
+ style: [{ selector: "{{QUBELY}} >.qubely-row-overlay { mix-blend-mode: {{rowBlend}}; }" }],
+ },
+ rowOpacity: {
+ type: "number",
+ default: ".8",
+ style: [{ selector: "{{QUBELY}} >.qubely-row-overlay {opacity: {{rowOpacity}}; }" }],
+ },
- // Divider
- shapeTop: {
- type: 'object',
- default: {
- openShape: 0,
- color: '#006fbf',
- shapeType: 'top',
- width: { unit: '%' },
- height: { unit: 'px' },
- },
- style: [{ selector: '{{QUBELY}} .qubely-shape-divider.qubely-top-shape' }]
- },
- shapeBottom: {
- type: 'object',
- default: {
- openShape: 0,
- color: '#006fbf',
- shapeType: 'bottom',
- width: { unit: '%' },
- height: { unit: 'px' }
- },
- style: [{ selector: '{{QUBELY}} .qubely-shape-divider.qubely-bottom-shape' }]
- },
+ // Divider
+ shapeTop: {
+ type: "object",
+ default: {
+ openShape: 0,
+ color: "#006fbf",
+ shapeType: "top",
+ width: { unit: "%" },
+ height: { unit: "px" },
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-shape-divider.qubely-top-shape" }],
+ },
+ shapeBottom: {
+ type: "object",
+ default: {
+ openShape: 0,
+ color: "#006fbf",
+ shapeType: "bottom",
+ width: { unit: "%" },
+ height: { unit: "px" },
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-shape-divider.qubely-bottom-shape" }],
+ },
- // Responsive
- hideTablet: { type: 'boolean', default: false, style: [{ selector: '{{QUBELY}}.qubely-section{ display:none; }' }] },
- hideMobile: { type: 'boolean', default: false, style: [{ selector: '{{QUBELY}}.qubely-section{ display:none; }' }] },
+ // Responsive
+ hideDesktop: {
+ type: "boolean",
+ default: false,
+ style: [{ selector: "{{QUBELY}}.qubely-section{ display:none; }" }],
+ },
+ hideTablet: {
+ type: "boolean",
+ default: false,
+ style: [{ selector: "{{QUBELY}}.qubely-section{ display:none; }" }],
+ },
+ hideMobile: {
+ type: "boolean",
+ default: false,
+ style: [{ selector: "{{QUBELY}}.qubely-section{ display:none; }" }],
+ },
- // Advanced Settings
- rowId: { type: 'string', default: '' },
- rowZindex: { type: 'number', default: '', style: [{ selector: '{{QUBELY}}.qubely-section{z-index:{{rowZindex}};}' }] },
- rowReverse: {
- type: 'object',
- default: { openRowReverse: false, values: {} },
- style: [{ selector: '{{QUBELY}}.qubely-section >.qubely-container >.qubely-row,{{QUBELY}}.qubely-section >.qubely-container-fluid >.qubely-row, {{QUBELY}} >.qubely-container-fluid >.qubely-row > .block-editor-inner-blocks > .block-editor-block-list__layout, {{QUBELY}} >.qubely-container >.qubely-row > .block-editor-inner-blocks > .block-editor-block-list__layout' }]
- },
+ // Advanced Settings
+ rowId: { type: "string", default: "" },
+ rowZindex: {
+ type: "number",
+ default: "",
+ style: [{ selector: "{{QUBELY}}.qubely-section{z-index:{{rowZindex}};}" }],
+ },
+ rowReverse: {
+ type: "object",
+ default: { openRowReverse: false, values: {} },
+ style: [
+ {
+ selector:
+ "{{QUBELY}}.qubely-section >.qubely-container >.qubely-row,{{QUBELY}}.qubely-section >.qubely-container-fluid >.qubely-row, {{QUBELY}} >.qubely-container-fluid >.qubely-row > .block-editor-inner-blocks > .block-editor-block-list__layout, {{QUBELY}} >.qubely-container >.qubely-row > .block-editor-inner-blocks > .block-editor-block-list__layout",
+ },
+ ],
+ },
- rowCss: { type: 'string', default: '', style: [{ selector: '' }] },
+ rowCss: { type: "string", default: "", style: [{ selector: "" }] },
};
-export default attributes;
\ No newline at end of file
+export default attributes;
diff --git a/assets/reactjs/src/blocks/row/column/Edit.js b/assets/reactjs/src/blocks/row/column/Edit.js
index 2248d7fd..43412255 100755
--- a/assets/reactjs/src/blocks/row/column/Edit.js
+++ b/assets/reactjs/src/blocks/row/column/Edit.js
@@ -1,464 +1,532 @@
import InspectorTabs from "../../../components/InspectorTabs";
const { __ } = wp.i18n;
-const { PanelBody, Toolbar, ResizableBox, IconButton } = wp.components
-const { Component, Fragment } = wp.element
-const { InnerBlocks, InspectorControls, BlockControls } = wp.blockEditor
-const { createBlock } = wp.blocks
-const { select, dispatch } = wp.data
+const { PanelBody, Toolbar, ResizableBox, IconButton } = wp.components;
+const { Component, Fragment, createRef } = wp.element;
+const { InnerBlocks, InspectorControls, BlockControls } = wp.blockEditor;
+const { createBlock } = wp.blocks;
+const { select, dispatch } = wp.data;
const {
- Background,
- Border,
- BorderRadius,
- BoxShadow,
- Range,
- Separator,
- Dimension,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings
- },
- withCSSGenerator,
- inspectorTabs,
- InspectorTab
-} = wp.qubelyComponents
+ Background,
+ Border,
+ BorderRadius,
+ BoxShadow,
+ Range,
+ Separator,
+ Dimension,
+ gloalSettings: { globalSettingsPanel, animationSettings },
+ withCSSGenerator,
+ inspectorTabs,
+ InspectorTab,
+} = wp.qubelyComponents;
$ = jQuery;
+
class Edit extends Component {
- constructor() {
- super(...arguments);
- this.state = {
- colWidth: { md: 0, sm: 0, xs: 0, device: 'md' },
- nextColWidth: { md: 0, sm: 0, xs: 0, device: 'md' },
- prevColWidth: { md: 0, sm: 0, xs: 0, device: 'md' },
- rowWidth: 0,
- absWidth: 0,
- maxResizeWidth: 0,
- maxWidth: 999999999,
- isHover: false,
- resizing: false,
- blockIndex: null,
- responsiveDevice: 'md',
- colWidthMax: 85
- };
- }
-
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- setTimeout(() => {
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }, 100)
- if (typeof $ === 'undefined') {
- $ = jQuery;
- }
- this.updateColumnWidthAttribute();
- }
-
- /**
- * Update css and column width on initial render
- * Collect the nextColumnClientId and prevColumnClientId for better UX
- */
- updateColumnWidthAttribute() {
- const { attributes: { colWidth }, clientId } = this.props
- const { getPreviousBlockClientId, getNextBlockClientId } = select('core/block-editor')
- const currentColumn = $(`#block-${clientId}`)
- const rowWidth = currentColumn.parents('.qubely-backend-row').width()
- const nextBlockId = getNextBlockClientId(clientId)
- const prevBlockId = getPreviousBlockClientId(clientId)
- currentColumn.css({ width: colWidth.md + '%' })
- this.setState({ rowWidth, nextBlockId, prevBlockId, maxResizeWidth: rowWidth, colWidth: { ...colWidth, device: 'md' } })
- }
-
- /**
- *
- * @param {object} event
- * @param {string} direction
- * @param {dom} elt
- * On Resize start get the previous|next column width
- * Calculate current column resize box based on row/parent element width
- *
- * Set resizebox maxWidth by (next|prev+current) colum width
- */
- onResizeStartEvent(event, direction, elt) {
- let { toggleSelection, clientId, setAttributes } = this.props
- const { rowWidth, nextColWidth, prevColWidth } = this.state
- toggleSelection(false)
-
- const editorSelector = select('core/block-editor')
- const colWidth = editorSelector.getBlockAttributes(clientId).colWidth
- const nextBlockClientId = editorSelector.getNextBlockClientId(clientId)
- const prevBlockClientId = editorSelector.getPreviousBlockClientId(clientId)
-
-
- if (nextBlockClientId !== null) {
- nextColWidth.md = parseFloat(editorSelector.getBlockAttributes(nextBlockClientId).colWidth.md)
- }
-
- if (prevBlockClientId !== null) {
- prevColWidth.md = parseFloat(editorSelector.getBlockAttributes(prevBlockClientId).colWidth.md)
- }
- let maxResizeWidth = 0
- if (direction === 'right' && nextBlockClientId !== null) {
- let resizeNextColWidth = ((nextColWidth.md / 100) * rowWidth) - 100
- let resizeCurrenColWidth = (colWidth.md / 100) * rowWidth
- maxResizeWidth = resizeNextColWidth + resizeCurrenColWidth
- }
- if (direction === 'left' && prevBlockClientId !== null) {
- let resizePrevColWidth = ((prevColWidth.md / 100) * rowWidth) - 100
- let resizeCurrenColWidth = (colWidth.md / 100) * rowWidth
- maxResizeWidth = resizePrevColWidth + resizeCurrenColWidth
- }
- // Every time select resize hanlder set the width
- setAttributes({ colWidth })
- const clmRect = document.getElementById(`block-${clientId}`).getBoundingClientRect()
- this.setState({ colWidth: colWidth, prevColWidth, nextColWidth, maxResizeWidth, resizing: true, absWidth: clmRect.width })
- }
-
- /**
- *
- * @param {object} event
- * @param {string} direction
- * @param {dom} elt
- * @param {string} delta
- *
- * Update column and resize box width onResize
- *
- * If direction is Right then update next and current column width
- * Calculate column width by (next+current)/100
- *
- * If directin is left then update prev and current column width
- * Calculate colum width by (prev+current)/100
- *
- */
- onResize(event, direction, elt, delta) {
- const { colWidth, nextColWidth, rowWidth, absWidth } = this.state
- const { clientId, setAttributes } = this.props
- const currentcolumnId = $(`#block-${clientId}`)
- const NextColumn = currentcolumnId.next();
- let currentBlockWidth = absWidth + (delta.width);
- let calWidth = (currentBlockWidth / rowWidth) * 100;
- let diff = parseFloat(colWidth.md) - calWidth;
-
- let nextBlockWidth = 0
- // If direction right then update next and current column
- if (direction === 'right') {
- if (NextColumn.length > 0) {
- nextBlockWidth = parseFloat(nextColWidth.md) + diff;
- if (nextBlockWidth > 10 && calWidth > 10) {
- nextBlockWidth = Math.abs(nextBlockWidth)
- NextColumn.css({ width: nextBlockWidth.toFixed(2) + '%' })
- const editorSelector = select('core/block-editor')
- const nextBlockClientId = editorSelector.getNextBlockClientId(clientId)
- if (nextBlockClientId !== null) {
- const nextBlock = editorSelector.getBlock(nextBlockClientId)
- nextBlock.attributes.colWidth.md = nextBlockWidth.toFixed(2)
- }
- }
- }
- }
- currentcolumnId.find('.components-resizable-box__container').css({ width: 'auto' })
- if (nextBlockWidth > 10 && calWidth > 10) {
- currentcolumnId.css({ width: calWidth.toFixed(2) + '%' })
- setAttributes({ colWidth: { ...colWidth, md: calWidth.toFixed(2) } })
- }
- }
-
- onResizeStop(event, direction, elt, delta) {
- const { toggleSelection } = this.props
- toggleSelection(true);
- this.setState({ resizing: false })
- }
-
- /**
- * Updates the column count, including necessary revisions to child Column
- *
- * @param {string} updateType operation type 'add' || 'delete'
- */
- updateColumns(updateType) {
-
- const { clientId } = this.props
- const { getBlockRootClientId, getBlock, getBlocks, getBlockIndex } = select('core/block-editor')
- const { replaceInnerBlocks, updateBlockAttributes } = dispatch('core/block-editor')
-
- const rootClientId = getBlockRootClientId(clientId)
- const rootBlock = getBlock(rootClientId)
- const selectedBlockIndex = getBlockIndex(clientId, rootClientId)
- const columns = updateType === 'add' ? rootBlock.attributes.columns + 1 : rootBlock.attributes.columns - 1
- const columnFixedWidth = parseFloat((100 / columns).toFixed(3))
- const equalWidth = { ...this.state.colWidth, ...{ md: columnFixedWidth, sm: 100, xs: 100 } }
-
- let innerBlocks = [...getBlocks(rootClientId)]
- if (updateType === 'delete') {
- innerBlocks.splice(selectedBlockIndex, 1)
- } else {
- innerBlocks.splice(selectedBlockIndex + 1, 0, createBlock('qubely/column', { colWidth: equalWidth }))
- }
-
- replaceInnerBlocks(rootClientId, innerBlocks, false);
-
- updateBlockAttributes(rootClientId, Object.assign(rootBlock.attributes, { columns: columns }))
-
- getBlocks(rootClientId).forEach(block => {
- updateBlockAttributes(block.clientId, Object.assign(block.attributes, { colWidth: { ...equalWidth } }))
- $(`#block-${block.clientId}`).css({ width: equalWidth.md + '%' }) //update next block width
- })
- }
-
-
- /**
- * Check current row columns status
- * Return an object with column attributes and status
- */
- checkColumnStatus() {
- const { clientId } = this.props
- const { getBlockRootClientId, getPreviousBlockClientId, getNextBlockClientId, getBlockIndex, getBlock } = select('core/block-editor')
- const rootClientId = getBlockRootClientId(clientId)
- const nextBlockId = getNextBlockClientId(clientId)
- const prevBlockId = getPreviousBlockClientId(clientId)
- const blockIndex = getBlockIndex(clientId, rootClientId)
-
- return { nextBlockId, prevBlockId, blockIndex }
- }
-
-
- _isActiveRow() {
- const rootClientId = select('core/block-editor').getBlockRootClientId(this.props.clientId)
- const selected = select('core/block-editor').getSelectedBlock()
- if (selected && rootClientId && selected.clientId) {
- return rootClientId == selected.clientId ? true : false
- } else {
- return false
- }
- }
-
-
- updateColumnWidth(colWidth) {
- const { clientId, setAttributes, attributes } = this.props
- this.setState({ colWidthMax: colWidth.device === 'md' ? 85 : 100, responsiveDevice: colWidth.device })
- if (colWidth.device && colWidth.device !== 'md') {
- setAttributes({ colWidth: { ...colWidth } })
- return;
- }
- if (colWidth.md < 10) {
- return;
- }
- const currentcolumnId = $(`#block-${clientId}`)
- const NextColumn = currentcolumnId.next();
- const PrevColumn = currentcolumnId.prev();
- let calWidth = parseFloat(colWidth.md)
- let different = calWidth - parseFloat(attributes.colWidth.md)
- // If direction right then update next and current column
-
- const { getPreviousBlockClientId, getNextBlockClientId, getBlock } = select('core/block-editor')
- const { updateBlockAttributes } = dispatch('core/block-editor')
- let nextColumnNewWidth = 0
- if (NextColumn.length > 0) {
- const nextBlockClientId = getNextBlockClientId(clientId)
- if (nextBlockClientId !== null) {
- const nextBlock = getBlock(nextBlockClientId)
- nextColumnNewWidth = { ...nextBlock.attributes.colWidth }
- nextColumnNewWidth.md = parseFloat(nextColumnNewWidth.md) - different
- if (nextColumnNewWidth.md > 10 && calWidth > 10) {
- NextColumn.css({ width: nextColumnNewWidth.md + '%' })
- updateBlockAttributes(nextBlockClientId, Object.assign(nextBlock.attributes, { colWidth: { ...nextColumnNewWidth } }))
- }
- }
-
-
- } else if (PrevColumn.length > 0) {
- // If direction left then update prev and current column
- const prevBlockClientId = getPreviousBlockClientId(clientId)
- if (prevBlockClientId !== null) {
- const prevBlock = getBlock(prevBlockClientId)
- let prevColumnNewWidth = { ...prevBlock.attributes.colWidth }
- prevColumnNewWidth.md = parseFloat(prevColumnNewWidth.md) - different //calWidth > 0 ? calWidth-parseFloat(prevColWidth.md) : parseFloat(prevColWidth.md)-calWidth
- PrevColumn.css({ width: prevColumnNewWidth.md + '%' })
- updateBlockAttributes(prevBlockClientId, Object.assign(prevBlock.attributes, { colWidth: { ...prevColumnNewWidth } }))
- }
- }
- if (nextColumnNewWidth.md > 10 && calWidth > 10) {
- const newWidth = Math.abs(calWidth)
- currentcolumnId.css({ width: newWidth + '%' })
- setAttributes({ colWidth: { ...colWidth } })
- }
-
- }
-
- componentWillReceiveProps(nextProps) {
- document.getElementById("block-" + this.props.clientId).style.alignSelf = nextProps.attributes.position
- }
-
-
- render() {
- const {
- attributes: {
- uniqueId,
- className,
- colWidth,
- padding,
- margin,
- colBg,
- colBorder,
- colRadius,
- colShadow,
- corner,
- borderRadius,
- //animation
- animation,
- //global
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- globalZindex,
- hideTablet,
- hideMobile,
- globalCss
- },
- setAttributes,
- isSelected,
- clientId
- } = this.props
-
- const { rowWidth, resizing, responsiveDevice } = this.state
- const { getBlockRootClientId, getBlockAttributes } = select('core/block-editor')
- const rootClientId = getBlockRootClientId(clientId)
- const rootBlockAttributes = getBlockAttributes(rootClientId)
- let columns, nextBlockId, blockIndex;
- if (rootBlockAttributes) {
- let columnStatus = this.checkColumnStatus()
- columns = rootBlockAttributes.columns
- nextBlockId = columnStatus.nextBlockId
- blockIndex = columnStatus.blockIndex
- }
-
-
- let resigingClass = 'qubely-column-resizer'
- if (nextBlockId !== null && isSelected) {
- resigingClass += ' is-selected-column'
- }
- if (resizing) {
- resigingClass += ' is-resizing'
- }
- const { getBlockOrder } = select('core/block-editor');
-
- return (
-
-
-
-
-
-
- this.updateColumnWidth(val)} min={15} max={this.state.colWidthMax} unit={['%']} responsive device={this.state.responsiveDevice} />
-
-
-
- setAttributes({ colBg: val })} />
- setAttributes({ colBorder: val })} min={0} max={10} />
- setAttributes({ colShadow: val })} />
- setAttributes({ borderRadius: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={this.state.responsiveDevice} onDeviceChange={value => this.setState({ responsiveDevice: value })} />
-
-
-
-
- setAttributes({ padding: val })}
- min={0}
- max={600}
- unit={['px', 'em', '%']}
- responsive
- device={this.state.responsiveDevice}
- onDeviceChange={value => this.setState({ responsiveDevice: value })}
- />
- setAttributes({ margin: val })}
- min={-600}
- max={600}
- unit={['px', 'em', '%']}
- responsive
- device={this.state.responsiveDevice}
- onDeviceChange={value => this.setState({ responsiveDevice: value })}
- />
-
- {animationSettings(uniqueId, animation, setAttributes)}
-
-
-
-
-
-
- {columns < 6 &&
- this.updateColumns('add')}
- icon="plus"
- />
- }
- {columns > 1 &&
- this.updateColumns('delete')}
- icon="trash"
- />
- }
-
-
-
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
- {rowWidth !== 0 &&
- this.onResize(event, direction, elt, delta)}
- onResizeStop={(event, direction, elt, delta) => this.onResizeStop(event, direction, elt, delta)}
- onResizeStart={(event, direction, elt) => this.onResizeStartEvent(event, direction, elt)} >
-
-
-
- 0 ?
- undefined :
- () =>
-
- }
-
- )
- }
+ constructor() {
+ super(...arguments);
+ this.state = {
+ colWidth: { md: 0, sm: 0, xs: 0, device: "md" },
+ nextColWidth: { md: 0, sm: 0, xs: 0, device: "md" },
+ prevColWidth: { md: 0, sm: 0, xs: 0, device: "md" },
+ rowWidth: 0,
+ absWidth: 0,
+ maxResizeWidth: 0,
+ maxWidth: 999999999,
+ isHover: false,
+ resizing: false,
+ blockIndex: null,
+ responsiveDevice: "md",
+ colWidthMax: 85,
+ };
+ this.finalResizeValue = createRef();
+ }
+
+ componentDidMount() {
+ if (typeof $ === "undefined") {
+ $ = jQuery;
+ }
+ this.updateColumnWidthAttribute();
+ }
+
+ /**
+ * Update css and column width on initial render
+ * Collect the nextColumnClientId and prevColumnClientId for better UX
+ */
+ updateColumnWidthAttribute() {
+ const {
+ attributes: { colWidth },
+ clientId,
+ } = this.props;
+ const { getPreviousBlockClientId, getNextBlockClientId } = select("core/block-editor");
+ const currentColumn = $(`#block-${clientId}`);
+ const rowWidth = currentColumn.parents(".qubely-backend-row").width();
+ const nextBlockId = getNextBlockClientId(clientId);
+ const prevBlockId = getPreviousBlockClientId(clientId);
+ currentColumn.css({ width: colWidth.md + "%" });
+ this.setState({
+ rowWidth,
+ nextBlockId,
+ prevBlockId,
+ maxResizeWidth: rowWidth,
+ colWidth: { ...colWidth, device: "md" },
+ });
+ }
+
+ /**
+ *
+ * @param {object} event
+ * @param {string} direction
+ * @param {dom} elt
+ * On Resize start get the previous|next column width
+ * Calculate current column resize box based on row/parent element width
+ *
+ * Set resizebox maxWidth by (next|prev+current) colum width
+ */
+ onResizeStartEvent(event, direction, elt) {
+ let { toggleSelection, clientId, setAttributes } = this.props;
+ const { rowWidth, nextColWidth, prevColWidth } = this.state;
+ toggleSelection(false);
+
+ const editorSelector = select("core/block-editor");
+ const colWidth = editorSelector.getBlockAttributes(clientId).colWidth;
+ const nextBlockClientId = editorSelector.getNextBlockClientId(clientId);
+ const prevBlockClientId = editorSelector.getPreviousBlockClientId(clientId);
+
+ if (nextBlockClientId !== null) {
+ nextColWidth.md = parseFloat(editorSelector.getBlockAttributes(nextBlockClientId).colWidth.md);
+ }
+
+ if (prevBlockClientId !== null) {
+ prevColWidth.md = parseFloat(editorSelector.getBlockAttributes(prevBlockClientId).colWidth.md);
+ }
+ let maxResizeWidth = 0;
+ if (direction === "right" && nextBlockClientId !== null) {
+ let resizeNextColWidth = (nextColWidth.md / 100) * rowWidth - 100;
+ let resizeCurrenColWidth = (colWidth.md / 100) * rowWidth;
+ maxResizeWidth = resizeNextColWidth + resizeCurrenColWidth;
+ }
+ if (direction === "left" && prevBlockClientId !== null) {
+ let resizePrevColWidth = (prevColWidth.md / 100) * rowWidth - 100;
+ let resizeCurrenColWidth = (colWidth.md / 100) * rowWidth;
+ maxResizeWidth = resizePrevColWidth + resizeCurrenColWidth;
+ }
+ // Every time select resize hanlder set the width
+ // setAttributes({ colWidth });
+ let ele = document.getElementById(`block-${clientId}`);
+ let clmRect = {};
+ if (ele) {
+ clmRect = ele.getBoundingClientRect();
+ }
+
+ this.setState({
+ colWidth: colWidth,
+ prevColWidth,
+ nextColWidth,
+ maxResizeWidth,
+ resizing: true,
+ absWidth: clmRect.width || 0,
+ });
+ }
+
+ /**
+ *
+ * @param {object} event
+ * @param {string} direction
+ * @param {dom} elt
+ * @param {string} delta
+ *
+ * Update column and resize box width onResize
+ *
+ * If direction is Right then update next and current column width
+ * Calculate column width by (next+current)/100
+ *
+ * If directin is left then update prev and current column width
+ * Calculate colum width by (prev+current)/100
+ *
+ */
+ onResize(event, direction, elt, delta) {
+ const { colWidth, nextColWidth, rowWidth, absWidth } = this.state;
+ const { clientId, setAttributes } = this.props;
+ const currentcolumnId = $(`#block-${clientId}`);
+ const NextColumn = currentcolumnId.next();
+ let currentBlockWidth = absWidth + delta.width;
+ let calWidth = (currentBlockWidth / rowWidth) * 100;
+ let diff = parseFloat(colWidth.md) - calWidth;
+
+ let nextBlockWidth = 0;
+ // If direction right then update next and current column
+ if (direction === "right") {
+ if (NextColumn.length > 0) {
+ nextBlockWidth = parseFloat(nextColWidth.md) + diff;
+ if (nextBlockWidth > 10 && calWidth > 10) {
+ nextBlockWidth = Math.abs(nextBlockWidth);
+ NextColumn.css({ width: nextBlockWidth.toFixed(2) + "%" });
+ const editorSelector = select("core/block-editor");
+ const nextBlockClientId = editorSelector.getNextBlockClientId(clientId);
+ if (nextBlockClientId !== null) {
+ const nextBlock = editorSelector.getBlock(nextBlockClientId);
+ nextBlock.attributes.colWidth.md = nextBlockWidth.toFixed(2);
+ }
+ }
+ }
+ }
+ currentcolumnId.find(".components-resizable-box__container").css({ width: "auto" });
+
+ if (nextBlockWidth > 10 && calWidth > 10) {
+ currentcolumnId.css({ width: calWidth.toFixed(2) + "%" });
+ this.finalResizeValue.current = { colWidth: { ...colWidth, md: calWidth.toFixed(2) } };
+ }
+ }
+
+ onResizeStop(event, direction, elt, delta) {
+ const { toggleSelection, setAttributes } = this.props;
+ toggleSelection(true);
+ this.setState({ resizing: false });
+ setAttributes(this.finalResizeValue.current);
+ }
+
+ /**
+ * Updates the column count, including necessary revisions to child Column
+ *
+ * @param {string} updateType operation type 'add' || 'delete'
+ */
+ updateColumns(updateType) {
+ const { clientId } = this.props;
+ const { getBlockRootClientId, getBlock, getBlocks, getBlockIndex } = select("core/block-editor");
+ const { replaceInnerBlocks, updateBlockAttributes } = dispatch("core/block-editor");
+
+ const rootClientId = getBlockRootClientId(clientId);
+ const rootBlock = getBlock(rootClientId);
+ const selectedBlockIndex = getBlockIndex(clientId, rootClientId);
+ const columns = updateType === "add" ? rootBlock.attributes.columns + 1 : rootBlock.attributes.columns - 1;
+ const columnFixedWidth = parseFloat((100 / columns).toFixed(3));
+ const equalWidth = { ...this.state.colWidth, ...{ md: columnFixedWidth, sm: 100, xs: 100 } };
+
+ let innerBlocks = [...getBlocks(rootClientId)];
+ if (updateType === "delete") {
+ innerBlocks.splice(selectedBlockIndex, 1);
+ } else {
+ innerBlocks.splice(selectedBlockIndex + 1, 0, createBlock("qubely/column", { colWidth: equalWidth }));
+ }
+
+ replaceInnerBlocks(rootClientId, innerBlocks, false);
+
+ updateBlockAttributes(rootClientId, Object.assign(rootBlock.attributes, { columns: columns }));
+
+ getBlocks(rootClientId).forEach((block) => {
+ updateBlockAttributes(block.clientId, Object.assign(block.attributes, { colWidth: { ...equalWidth } }));
+ $(`#block-${block.clientId}`).css({ width: equalWidth.md + "%" }); //update next block width
+ });
+ }
+
+ /**
+ * Check current row columns status
+ * Return an object with column attributes and status
+ */
+ checkColumnStatus() {
+ const { clientId } = this.props;
+ const { getBlockRootClientId, getPreviousBlockClientId, getNextBlockClientId, getBlockIndex, getBlock } =
+ select("core/block-editor");
+ const rootClientId = getBlockRootClientId(clientId);
+ const nextBlockId = getNextBlockClientId(clientId);
+ const prevBlockId = getPreviousBlockClientId(clientId);
+ const blockIndex = getBlockIndex(clientId, rootClientId);
+
+ return { nextBlockId, prevBlockId, blockIndex };
+ }
+
+ _isActiveRow() {
+ const rootClientId = select("core/block-editor").getBlockRootClientId(this.props.clientId);
+ const selected = select("core/block-editor").getSelectedBlock();
+ if (selected && rootClientId && selected.clientId) {
+ return rootClientId == selected.clientId ? true : false;
+ } else {
+ return false;
+ }
+ }
+
+ updateColumnWidth(colWidth) {
+ const { clientId, setAttributes, attributes } = this.props;
+ this.setState({ colWidthMax: colWidth.device === "md" ? 85 : 100, responsiveDevice: colWidth.device });
+ if (colWidth.device && colWidth.device !== "md") {
+ setAttributes({ colWidth: { ...colWidth } });
+ return;
+ }
+ if (colWidth.md < 10) {
+ return;
+ }
+ const currentcolumnId = $(`#block-${clientId}`);
+ const NextColumn = currentcolumnId.next();
+ const PrevColumn = currentcolumnId.prev();
+ let calWidth = parseFloat(colWidth.md);
+ let different = calWidth - parseFloat(attributes.colWidth.md);
+ // If direction right then update next and current column
+
+ const { getPreviousBlockClientId, getNextBlockClientId, getBlock } = select("core/block-editor");
+ const { updateBlockAttributes } = dispatch("core/block-editor");
+ let nextColumnNewWidth = 0;
+ if (NextColumn.length > 0) {
+ const nextBlockClientId = getNextBlockClientId(clientId);
+ if (nextBlockClientId !== null) {
+ const nextBlock = getBlock(nextBlockClientId);
+ nextColumnNewWidth = { ...nextBlock.attributes.colWidth };
+ nextColumnNewWidth.md = parseFloat(nextColumnNewWidth.md) - different;
+ if (nextColumnNewWidth.md > 10 && calWidth > 10) {
+ NextColumn.css({ width: nextColumnNewWidth.md + "%" });
+ updateBlockAttributes(
+ nextBlockClientId,
+ Object.assign(nextBlock.attributes, { colWidth: { ...nextColumnNewWidth } })
+ );
+ }
+ }
+ } else if (PrevColumn.length > 0) {
+ // If direction left then update prev and current column
+ const prevBlockClientId = getPreviousBlockClientId(clientId);
+ if (prevBlockClientId !== null) {
+ const prevBlock = getBlock(prevBlockClientId);
+ let prevColumnNewWidth = { ...prevBlock.attributes.colWidth };
+ prevColumnNewWidth.md = parseFloat(prevColumnNewWidth.md) - different; //calWidth > 0 ? calWidth-parseFloat(prevColWidth.md) : parseFloat(prevColWidth.md)-calWidth
+ PrevColumn.css({ width: prevColumnNewWidth.md + "%" });
+ updateBlockAttributes(
+ prevBlockClientId,
+ Object.assign(prevBlock.attributes, { colWidth: { ...prevColumnNewWidth } })
+ );
+ }
+ }
+ if (nextColumnNewWidth.md > 10 && calWidth > 10) {
+ const newWidth = Math.abs(calWidth);
+ currentcolumnId.css({ width: newWidth + "%" });
+ setAttributes({ colWidth: { ...colWidth } });
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ let ele = document.getElementById("block-" + this.props.clientId);
+ if (ele) {
+ ele.style.alignSelf = nextProps.attributes.position;
+ }
+ }
+
+ render() {
+ const {
+ attributes: {
+ uniqueId,
+ className,
+ colWidth,
+ padding,
+ margin,
+ colBg,
+ colBorder,
+ colRadius,
+ colShadow,
+ corner,
+ borderRadius,
+ //animation
+ animation,
+ //global
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ },
+ setAttributes,
+ isSelected,
+ clientId,
+ } = this.props;
+
+ const { rowWidth, resizing, responsiveDevice } = this.state;
+ const { getBlockRootClientId, getBlockAttributes } = select("core/block-editor");
+ const rootClientId = getBlockRootClientId(clientId);
+ const rootBlockAttributes = getBlockAttributes(rootClientId);
+ let columns, nextBlockId, blockIndex;
+ if (rootBlockAttributes) {
+ let columnStatus = this.checkColumnStatus();
+ columns = rootBlockAttributes.columns;
+ nextBlockId = columnStatus.nextBlockId;
+ blockIndex = columnStatus.blockIndex;
+ }
+
+ let resigingClass = "qubely-column-resizer";
+ if (nextBlockId !== null && isSelected) {
+ resigingClass += " is-selected-column";
+ }
+ if (resizing) {
+ resigingClass += " is-resizing";
+ }
+ const { getBlockOrder } = select("core/block-editor");
+
+ return (
+
+
+
+
+
+
+ this.updateColumnWidth(val)}
+ min={15}
+ max={this.state.colWidthMax}
+ unit={["%"]}
+ responsive
+ device={this.state.responsiveDevice}
+ />
+
+
+
+ setAttributes({ colBg: val })}
+ />
+ setAttributes({ colBorder: val })}
+ min={0}
+ max={10}
+ />
+ setAttributes({ colShadow: val })}
+ />
+ setAttributes({ borderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={this.state.responsiveDevice}
+ onDeviceChange={(value) => this.setState({ responsiveDevice: value })}
+ />
+
+
+
+
+ setAttributes({ padding: val })}
+ min={0}
+ max={600}
+ unit={["px", "em", "%"]}
+ responsive
+ device={this.state.responsiveDevice}
+ onDeviceChange={(value) => this.setState({ responsiveDevice: value })}
+ />
+ setAttributes({ margin: val })}
+ min={-600}
+ max={600}
+ unit={["px", "em", "%"]}
+ responsive
+ device={this.state.responsiveDevice}
+ onDeviceChange={(value) => this.setState({ responsiveDevice: value })}
+ />
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+
+
+
+
+
+
+ {columns < 6 && (
+ this.updateColumns("add")}
+ icon="plus"
+ />
+ )}
+ {columns > 1 && (
+ this.updateColumns("delete")}
+ icon="trash"
+ />
+ )}
+
+
+
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
+
+ {rowWidth !== 0 && (
+ this.onResize(event, direction, elt, delta)}
+ onResizeStop={(event, direction, elt, delta) => this.onResizeStop(event, direction, elt, delta)}
+ onResizeStart={(event, direction, elt) => this.onResizeStartEvent(event, direction, elt)}
+ >
+
+
+ 0
+ ? undefined
+ : () =>
+
+ )}
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/row/column/Save.js b/assets/reactjs/src/blocks/row/column/Save.js
index f235db44..10bf2e69 100755
--- a/assets/reactjs/src/blocks/row/column/Save.js
+++ b/assets/reactjs/src/blocks/row/column/Save.js
@@ -1,17 +1,21 @@
-const { Component } = wp.element
-const { InnerBlocks } = wp.blockEditor
-const { HelperFunction: { animationAttr } } = wp.qubelyComponents
+const { Component } = wp.element;
+const { InnerBlocks } = wp.blockEditor;
+const {
+ HelperFunction: { animationAttr },
+} = wp.qubelyComponents;
class Save extends Component {
render() {
- const { attributes:{ uniqueId, animation } } = this.props
- return(
-
-
+ const {
+ attributes: { uniqueId, animation },
+ } = this.props;
+ return (
+
- )
+ );
}
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/row/column/index.js b/assets/reactjs/src/blocks/row/column/index.js
index 0574bfd3..e4014d28 100755
--- a/assets/reactjs/src/blocks/row/column/index.js
+++ b/assets/reactjs/src/blocks/row/column/index.js
@@ -1,64 +1,79 @@
const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks
-import Edit from './Edit';
-import Save from './Save';
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+const { registerBlockType } = wp.blocks;
+import Edit from "./Edit";
+import Save from "./Save";
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-registerBlockType('qubely/column', {
- title: __('Column'),
- description: 'Add flexibly resizable and customizable columns in your site.',
- category: 'qubely',
- icon:
,
- parent: ['qubely/row'],
+registerBlockType("qubely/column", {
+ title: __("Column"),
+ description: "Add flexibly resizable and customizable columns in your site.",
+ category: "qubely",
+ icon:
,
+ parent: ["qubely/row"],
supports: { inserter: false, reusable: false, html: false },
attributes: {
- uniqueId: { type: 'string', default: '' },
- ...globalAttributes, // Global Settings
+ uniqueId: { type: "string", default: "" },
+ ...globalAttributes, // Global Settings
// Dimension
- colWidth: { type: 'object', default: { md: 50, sm: 50, xs: 100, unit: '%', device: 'md' }, style: [{ selector: '{{QUBELY}}.qubely-column-front {flex:{{colWidth}};} {{QUBELY}}.qubely-column-front {max-width:{{colWidth}};}' }] },
+ colWidth: {
+ type: "object",
+ default: { md: 50, sm: 50, xs: 100, unit: "%", device: "md" },
+ style: [
+ {
+ selector:
+ "{{QUBELY}}.qubely-column-front {flex:{{colWidth}};} {{QUBELY}}.qubely-column-front {max-width:{{colWidth}};}",
+ },
+ ],
+ },
padding: {
- type: 'object',
+ type: "object",
default: {
md: {
top: 0,
right: 0,
bottom: 0,
- left: 0
+ left: 0,
},
- unit: 'px',
+ unit: "px",
},
- style: [{ selector: '{{QUBELY}} > .qubely-column-inner {padding: {{padding}};}' }]
+ style: [{ selector: "{{QUBELY}} > .qubely-column-inner {padding: {{padding}};}" }],
},
margin: {
- type: 'object',
+ type: "object",
default: {
md: {
top: 0,
right: 0,
bottom: 0,
- left: 0
+ left: 0,
},
- unit: 'px',
+ unit: "px",
},
- style: [{ selector: '{{QUBELY}} > .qubely-column-inner {margin: {{margin}};}' }]
+ style: [{ selector: "{{QUBELY}} > .qubely-column-inner {margin: {{margin}};}" }],
},
// Style
- colBg: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} > .qubely-column-inner' }] },
- colBorder: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} > .qubely-column-inner' }] },
- colShadow: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} > .qubely-column-inner' }] },
+ colBg: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} > .qubely-column-inner" }] },
+ colBorder: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} > .qubely-column-inner" }] },
+ colShadow: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} > .qubely-column-inner" }] },
- borderRadius: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} > .qubely-column-inner' }] },
+ borderRadius: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} > .qubely-column-inner" }] },
// Responsive
- hideTablet: { type: 'boolean', default: false, style: [{ selector: '{{QUBELY}}{display:none;}' }] },
- hideMobile: { type: 'boolean', default: false, style: [{ selector: '{{QUBELY}}{display:none;}' }] },
+ hideTablet: { type: "boolean", default: false, style: [{ selector: "{{QUBELY}}{display:none;}" }] },
+ hideMobile: { type: "boolean", default: false, style: [{ selector: "{{QUBELY}}{display:none;}" }] },
// Advanced Settings
- colZindex: { type: 'number', default: '', style: [{ selector: '{{QUBELY}} > .qubely-column-inner{z-index:{{colZindex}};}' }] },
- colCss: { type: 'string', default: '', style: [{ selector: '' }] },
+ colZindex: {
+ type: "number",
+ default: "",
+ style: [{ selector: "{{QUBELY}} > .qubely-column-inner{z-index:{{colZindex}};}" }],
+ },
+ colCss: { type: "string", default: "", style: [{ selector: "" }] },
},
edit: Edit,
- save: Save
-})
\ No newline at end of file
+ save: Save,
+});
diff --git a/assets/reactjs/src/blocks/row/index.js b/assets/reactjs/src/blocks/row/index.js
index fb3bd2db..fd62d2b4 100755
--- a/assets/reactjs/src/blocks/row/index.js
+++ b/assets/reactjs/src/blocks/row/index.js
@@ -1,63 +1,90 @@
-import Edit from './Edit';
-import Save from './Save';
-import attributes from './attributes';
+import Edit from "./Edit";
+import Save from "./Save";
+import attributes from "./attributes";
const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks
-const { InnerBlocks } = wp.blockEditor
+const { registerBlockType } = wp.blocks;
+const { InnerBlocks } = wp.blockEditor;
const {
- HelperFunction: {
- animationAttr,
- videoBackground
-
- },
+ HelperFunction: { animationAttr, videoBackground },
} = wp.qubelyComponents;
+registerBlockType("qubely/row", {
+ title: __("Row"),
+ category: "qubely",
+ description: "Include unique row and column layouts with Qubely Row.",
+ icon:
,
+ supports: {
+ align: ["wide", "center", "full"],
+ html: false,
+ },
+ keywords: [__("Row"), __("rw"), __("column"), __("Layout")],
+ example: {
+ attributes: {},
+ },
+ attributes,
+ edit: Edit,
+ save: Save,
+ deprecated: [
+ {
+ attributes,
-registerBlockType('qubely/row', {
- title: __('Row'),
- category: 'qubely',
- description: 'Include unique row and column layouts with Qubely Row.',
- icon:
,
- supports: {
- align: ['wide', 'center', 'full'],
- html: false
- },
- keywords: [__('Row'), __('rw'), __('column'), __('Layout')],
- example: {
- attributes: {},
- },
- attributes,
- edit: Edit,
- save: Save,
- deprecated: [
- {
- attributes,
-
- save(props) {
- const { attributes: { uniqueId, animation, rowId, rowBg, shapeTop, shapeBottom, align, heightOptions, rowContainerWidth } } = props
- return (
-
-
- {(Object.entries(shapeTop).length > 1 && shapeTop.openShape == 1 && shapeTop.style) &&
-
- }
- {(Object.entries(rowBg).length > 0 && rowBg.openBg == 1 && rowBg.bgType == 'video') &&
- videoBackground(rowBg, 'row')
- }
- {(Object.entries(shapeBottom).length > 1 && shapeBottom.openShape == 1 && shapeBottom.style) &&
-
- }
-
-
-
- )
-
- }
- }
- ]
+ save(props) {
+ const {
+ attributes: {
+ uniqueId,
+ animation,
+ rowId,
+ rowBg,
+ shapeTop,
+ shapeBottom,
+ align,
+ heightOptions,
+ rowContainerWidth,
+ },
+ } = props;
+ return (
+
+ {Object.entries(shapeTop).length > 1 && shapeTop.openShape == 1 && shapeTop.style && (
+
+ )}
+ {Object.entries(rowBg).length > 0 &&
+ rowBg.openBg == 1 &&
+ rowBg.bgType == "video" &&
+ videoBackground(rowBg, "row")}
+ {Object.entries(shapeBottom).length > 1 && shapeBottom.openShape == 1 && shapeBottom.style && (
+
+ )}
+
+
+
+ );
+ },
+ },
+ ],
});
-
diff --git a/assets/reactjs/src/blocks/row/style.scss b/assets/reactjs/src/blocks/row/style.scss
index e73ae5b2..482ed6cc 100755
--- a/assets/reactjs/src/blocks/row/style.scss
+++ b/assets/reactjs/src/blocks/row/style.scss
@@ -1,159 +1,159 @@
.qubely-section {
- position: relative;
- .qubely-container {
- position: relative;
- width: 100%;
- margin-right: auto;
- margin-left: auto;
+ position: relative;
+ .qubely-container {
+ position: relative;
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
- @media (min-width: 576px) {
- max-width: 540px;
- }
+ @media (min-width: 576px) {
+ max-width: 540px;
+ }
- @media (min-width: 768px) {
- max-width: 720px;
- }
+ @media (min-width: 768px) {
+ max-width: 720px;
+ }
- @media (min-width: 992px) {
- max-width: 960px;
- }
- }
- .qubely-row {
- display: flex;
- flex-wrap: wrap;
- position: relative;
- > .wp-block-qubely-column {
- box-sizing: border-box;
- }
- &.qubely-row-height-window {
- min-height: 100vh;
- }
+ @media (min-width: 992px) {
+ max-width: 960px;
+ }
+ }
+ .qubely-row {
+ display: flex;
+ flex-wrap: wrap;
+ position: relative;
+ > .wp-block-qubely-column {
+ box-sizing: border-box;
+ }
+ &.qubely-row-height-window {
+ min-height: 100vh;
+ }
- .block-editor-inner-blocks {
- width: 100%;
- }
- }
+ .block-editor-inner-blocks {
+ width: 100%;
+ }
+ }
- // Overlay
- .qubely-row-overlay {
- top: 0;
- bottom: 0;
- position: absolute;
- left: 0;
- right: 0;
- }
+ // Overlay
+ .qubely-row-overlay {
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ }
- // Video Background
- .qubely-video-bg-wrap {
- position: absolute;
- top: 0px;
- bottom: 0px;
- right: 0px;
- left: 0px;
- overflow: hidden;
- iframe {
- height: 1300px;
- position: absolute;
- left: 50%;
- width: 200%;
- transform: translateX(-50%) translateY(-50%);
- top: 50%;
- }
- .qubely-video-bg {
- position: absolute;
- top: 50%;
- left: 50%;
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- background-size: cover;
- -webkit-transition: 1s opacity;
- transition: 1s opacity;
- }
- }
+ // Video Background
+ .qubely-video-bg-wrap {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ right: 0px;
+ left: 0px;
+ overflow: hidden;
+ iframe {
+ height: 1300px;
+ position: absolute;
+ left: 50%;
+ width: 200%;
+ transform: translateX(-50%) translateY(-50%);
+ top: 50%;
+ }
+ .qubely-video-bg {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ min-width: 100%;
+ min-height: 100%;
+ width: auto;
+ height: auto;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+ background-size: cover;
+ -webkit-transition: 1s opacity;
+ transition: 1s opacity;
+ }
+ }
- // Shape Divider
- .qubely-shape-divider {
- overflow: hidden;
- position: absolute;
- left: 0px;
- right: 0px;
- line-height: 0;
- > svg {
- display: block;
- width: 100%;
- position: relative;
- left: 50%;
- -webkit-transform: translateX(-50%) scale(1.01);
- -ms-transform: translateX(-50%) scale(1.01);
- transform: translateX(-50%) scale(1.01);
- }
+ // Shape Divider
+ .qubely-shape-divider {
+ overflow: hidden;
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ line-height: 0;
+ > svg {
+ display: block;
+ width: 100%;
+ position: relative;
+ left: 50%;
+ -webkit-transform: translateX(-50%) scale(1.01);
+ -ms-transform: translateX(-50%) scale(1.01);
+ transform: translateX(-50%) scale(1.01);
+ }
- &.qubely-bottom-shape {
- bottom: 0px;
- top: auto;
- > svg {
- transform: rotateX(180deg) translateX(-50%);
- }
- }
+ &.qubely-bottom-shape {
+ bottom: 0px;
+ top: auto;
+ > svg {
+ transform: rotateX(180deg) translateX(-50%);
+ }
+ }
- &.qubely-top-shape {
- top: 0px;
- bottom: auto;
- }
- }
+ &.qubely-top-shape {
+ top: 0px;
+ bottom: auto;
+ }
+ }
}
.editor-styles-wrapper {
- .qubely-section {
- .qubely-column-inner {
- .components-dropdown-menu.components-toolbar {
- border-right: none;
- padding: 0;
- // button.components-dropdown-menu__toggle.has-text {
- // display: none;
- // }
- }
- .wp-block[data-align="full"] {
- left: auto;
- width: 100%;
- max-width: 100%;
- margin-left: auto;
- margin-right: auto;
- }
- }
- }
+ .qubely-section {
+ .qubely-column-inner {
+ .components-dropdown-menu.components-toolbar {
+ border-right: none;
+ padding: 0;
+ // button.components-dropdown-menu__toggle.has-text {
+ // display: none;
+ // }
+ }
+ .wp-block[data-align="full"] {
+ left: auto;
+ width: 100%;
+ max-width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+ }
}
// .editor-styles-wrapper .wp-block .qubely-backend-row .wp-block {
// z-index: 3;
// }
.qubely-row .block-editor-block-list__layout .editor-block-list__block {
- max-width: none;
+ max-width: none;
}
.wp-block[data-align="full"][data-type="qubely/row"],
-.block-editor-block-list__block[data-type="qubely/row"] .wp-block[data-align="full"]{
- .qubely-row.qubely-backend-row {
- > .block-editor-inner-blocks .block-editor-block-list__layout {
- .wp-block[data-type="qubely/column"]:only-child {
- max-width: none;
- }
- }
- }
+.block-editor-block-list__block[data-type="qubely/row"] .wp-block[data-align="full"] {
+ .qubely-row.qubely-backend-row {
+ > .block-editor-inner-blocks .block-editor-block-list__layout {
+ .wp-block[data-type="qubely/column"]:only-child {
+ max-width: none;
+ }
+ }
+ }
}
div[data-type="qubely/row"] {
- .qubely-row.qubely-backend-row {
- > .block-editor-inner-blocks {
- .wp-block[data-type="qubely/column"]:last-child {
- .components-resizable-box__container.qubely-column-resizer {
- .components-resizable-box__handle.components-resizable-box__side-handle.components-resizable-box__handle-right {
- visibility: hidden;
- }
- }
- }
- }
- }
+ .qubely-row.qubely-backend-row {
+ > .block-editor-inner-blocks {
+ .wp-block[data-type="qubely/column"]:last-child {
+ .components-resizable-box__container.qubely-column-resizer {
+ .components-resizable-box__handle.components-resizable-box__side-handle.components-resizable-box__handle-right {
+ visibility: hidden;
+ }
+ }
+ }
+ }
+ }
}
diff --git a/assets/reactjs/src/blocks/scss/style.scss b/assets/reactjs/src/blocks/scss/style.scss
index ac946c27..df633cf6 100644
--- a/assets/reactjs/src/blocks/scss/style.scss
+++ b/assets/reactjs/src/blocks/scss/style.scss
@@ -1,145 +1,145 @@
.qubely-alert {
- position: relative;
- padding: 8px 15px;
- margin-bottom: 16px;
- border-radius: 4px;
-
- .qubely-alert-heading {
- color: inherit;
- }
-
- .qubely-alert-dismissible {
- padding-right: 64px;
- }
-
- .qubely-alert-dismissible .qubely-close {
- position: absolute;
- top: 0;
- right: 0;
- padding: 8px 15px;
- color: inherit;
- }
-
- &.qubely-alert-link {
- font-weight: 700;
- }
-
- &.qubely-alert-success {
- color: #416b42;
- background-color: #d2f7d5;
- }
-
- &.qubely-alert-success hr {
- border-top-color: rgb(162, 201, 171);
- }
-
- &.qubely-alert-success &.qubely-alert-link {
- color: #0b2e13;
- }
-
- &.qubely-alert-info {
- color: #0c8b98;
- background-color: #baeaf6;
- }
-
- &.qubely-alert-info hr {
- border-top-color: #abdde5;
- }
-
- &.qubely-alert-info .qubely-alert-link {
- color: #062c33;
- }
-
- &.qubely-alert-warning {
- color: #98810c;
- background-color: #f6eaba;
- }
-
- &.qubely-alert-warning hr {
- border-top-color: #ffe8a1;
- }
-
- &.qubely-alert-warning .qubely-alert-link {
- color: #533f03;
- }
-
- &.qubely-alert-danger {
- color: #981a0c;
- background-color: #f6baba;
- }
-
- &.qubely-alert-danger hr {
- border-top-color: #f1b0b7;
- }
-
- &.qubely-alert-danger .qubely-alert-link {
- color: #491217;
- }
+ position: relative;
+ padding: 8px 15px;
+ margin-bottom: 16px;
+ border-radius: 4px;
+
+ .qubely-alert-heading {
+ color: inherit;
+ }
+
+ .qubely-alert-dismissible {
+ padding-right: 64px;
+ }
+
+ .qubely-alert-dismissible .qubely-close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 8px 15px;
+ color: inherit;
+ }
+
+ &.qubely-alert-link {
+ font-weight: 700;
+ }
+
+ &.qubely-alert-success {
+ color: #416b42;
+ background-color: #d2f7d5;
+ }
+
+ &.qubely-alert-success hr {
+ border-top-color: rgb(162, 201, 171);
+ }
+
+ &.qubely-alert-success &.qubely-alert-link {
+ color: #0b2e13;
+ }
+
+ &.qubely-alert-info {
+ color: #0c8b98;
+ background-color: #baeaf6;
+ }
+
+ &.qubely-alert-info hr {
+ border-top-color: #abdde5;
+ }
+
+ &.qubely-alert-info .qubely-alert-link {
+ color: #062c33;
+ }
+
+ &.qubely-alert-warning {
+ color: #98810c;
+ background-color: #f6eaba;
+ }
+
+ &.qubely-alert-warning hr {
+ border-top-color: #ffe8a1;
+ }
+
+ &.qubely-alert-warning .qubely-alert-link {
+ color: #533f03;
+ }
+
+ &.qubely-alert-danger {
+ color: #981a0c;
+ background-color: #f6baba;
+ }
+
+ &.qubely-alert-danger hr {
+ border-top-color: #f1b0b7;
+ }
+
+ &.qubely-alert-danger .qubely-alert-link {
+ color: #491217;
+ }
}
.qubely-image-placeholder {
- width: 210px;
- height: 210px;
- background: #f5f5f5;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-
- i {
- font-style: normal;
- font-size: 64px;
- color: #d8d8d8;
- }
+ width: 210px;
+ height: 210px;
+ background: #f5f5f5;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ i {
+ font-style: normal;
+ font-size: 64px;
+ color: #d8d8d8;
+ }
}
[data-qubelyanimation] {
- opacity: 0;
+ opacity: 0;
}
.components-modal__frame.edit-post-manage-blocks-modal {
- .block-editor-block-icon img {
- min-width: 20px;
- min-height: 20px;
- max-width: 24px;
- max-height: 24px;
- }
+ .block-editor-block-icon img {
+ min-width: 20px;
+ min-height: 20px;
+ max-width: 24px;
+ max-height: 24px;
+ }
}
.qubely-context-menu-wraper {
- display: none;
- position: fixed;
- background: white;
- z-index: 100;
-
- &--option {
- padding: 6px 50px 5px 10px;
- min-width: 160px;
- cursor: default;
- font-size: 12px;
- &:hover {
- background: linear-gradient(to top, #555, #333);
- color: white;
- }
-
- &:active {
- color: #e9e9e9;
- background: linear-gradient(to top, #555, #444);
- }
-
- &__disabled {
- color: #999999;
- pointer-events: none;
- }
- }
+ display: none;
+ position: fixed;
+ background: white;
+ z-index: 100;
+
+ &--option {
+ padding: 6px 50px 5px 10px;
+ min-width: 160px;
+ cursor: default;
+ font-size: 12px;
+ &:hover {
+ background: linear-gradient(to top, #555, #333);
+ color: white;
+ }
+
+ &:active {
+ color: #e9e9e9;
+ background: linear-gradient(to top, #555, #444);
+ }
+
+ &__disabled {
+ color: #999999;
+ pointer-events: none;
+ }
+ }
}
.qubely-scroll-top {
- position: fixed;
- bottom: 50px;
- right: 50px;
- padding: 10px;
- background: #ccd0d4;
- cursor: pointer;
- display: none;
- &.qubely-show-scroll {
- display: block;
- }
+ position: fixed;
+ bottom: 50px;
+ right: 50px;
+ padding: 10px;
+ background: #ccd0d4;
+ cursor: pointer;
+ display: none;
+ &.qubely-show-scroll {
+ display: block;
+ }
}
diff --git a/assets/reactjs/src/blocks/socialicons/Edit.js b/assets/reactjs/src/blocks/socialicons/Edit.js
index 858f7abd..32915e3f 100644
--- a/assets/reactjs/src/blocks/socialicons/Edit.js
+++ b/assets/reactjs/src/blocks/socialicons/Edit.js
@@ -1,373 +1,451 @@
const { __ } = wp.i18n;
-const { InspectorControls, BlockControls } = wp.blockEditor
+const { InspectorControls, BlockControls } = wp.blockEditor;
const { Component, Fragment, createRef } = wp.element;
const { PanelBody, TextControl, Toolbar, Button, Popover } = wp.components;
const {
- Styles,
- IconSelector,
- Toggle,
- Separator,
- RadioAdvanced,
- Range,
- Alignment,
- Typography,
- Color,
- Tabs,
- Tab,
- Border,
- Padding,
- BorderRadius,
- Inline: { InlineToolbar },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- withCSSGenerator,
- InspectorTabs,
- InspectorTab
-} = wp.qubelyComponents
+ Styles,
+ IconSelector,
+ Toggle,
+ Separator,
+ RadioAdvanced,
+ Range,
+ Alignment,
+ Typography,
+ Color,
+ Tabs,
+ Tab,
+ Border,
+ Padding,
+ BorderRadius,
+ Inline: { InlineToolbar },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+} = wp.qubelyComponents;
-import icons from '../../helpers/icons'
-import IconSocialData from '../../components/fields/assets/IconSocialData'
+import icons from "../../helpers/icons";
+import IconSocialData from "../../components/fields/assets/IconSocialData";
class Edit extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ spacer: true,
+ device: "md",
+ selectedLabel: -1,
+ selectedItem: -1,
+ showIconPicker: false,
+ };
+ this.qubelyContextMenu = createRef();
+ }
- constructor(props) {
- super(props);
- this.state = {
- spacer: true,
- device: 'md',
- selectedLabel: -1,
- selectedItem: -1,
- showIconPicker: false
- };
- this.qubelyContextMenu = createRef();
- }
+ setSettings(index, type, val) {
+ const { attributes, setAttributes } = this.props;
+ let socialIcons = [...attributes.socialIcons];
+ socialIcons[index] ? (socialIcons[index][type] = val) : "";
+ setAttributes({ socialIcons });
+ }
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
+ insertItem() {
+ const { attributes, setAttributes } = this.props;
+ let socialIcons = [...attributes.socialIcons];
+ const newItem = { icon: "fab fa-facebook", label: "Facebook", id: "facebook", url: "" };
+ socialIcons.push(newItem);
+ this.setState({ selectedItem: socialIcons.length - 1 });
+ setAttributes({ socialIcons });
+ }
- setSettings(index, type, val) {
- const { attributes, setAttributes } = this.props
- let socialIcons = [...attributes.socialIcons]
- socialIcons[index] ? socialIcons[index][type] = val : ''
- setAttributes({ socialIcons })
- }
+ removeItem() {
+ const { selectedItem } = this.state;
+ const { attributes, setAttributes } = this.props;
+ let socialIcons = [...attributes.socialIcons];
+ socialIcons.splice(selectedItem, 1);
+ this.setState({ selectedItem: -1 });
+ setAttributes({ socialIcons });
+ }
- insertItem() {
- const { attributes, setAttributes } = this.props;
- let socialIcons = [...attributes.socialIcons];
- const newItem = { icon: 'fab fa-facebook', label: 'Facebook', id: 'facebook', url: '' };
- socialIcons.push(newItem);
- this.setState({ selectedItem: socialIcons.length - 1 });
- setAttributes({ socialIcons });
- }
+ render() {
+ const { selectedItem, selectedLabel, device, showIconPicker } = this.state;
+ const { name, clientId, attributes, setAttributes, isSelected } = this.props;
+ const {
+ uniqueId,
+ className,
+ alignment,
+ socialIcons,
+ iconLabel,
+ layout,
+ useDefaultStyle,
+ iconSize,
+ iconSizeCustom,
+ iconSpacing,
+ iconBorderRadius,
+ labelSpacing,
+ labelTypography,
+ iconColor,
+ iconColorHover,
+ IconBackground,
+ IconBackgroundHover,
+ iconPadding,
+ iconBorder,
+ iconBorderColorHover,
- removeItem() {
- const { selectedItem } = this.state;
- const { attributes, setAttributes } = this.props;
- let socialIcons = [...attributes.socialIcons];
- socialIcons.splice(selectedItem, 1);
- this.setState({ selectedItem: -1 });
- setAttributes({ socialIcons });
- }
+ //animation
+ animation,
+ //global
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ interaction,
+ } = attributes;
- render() {
- const { selectedItem, selectedLabel, device, showIconPicker } = this.state;
- const { name, clientId, attributes, setAttributes, isSelected } = this.props;
- const {
- uniqueId,
- className,
- alignment,
- socialIcons,
- iconLabel,
- layout,
- useDefaultStyle,
- iconSize,
- iconSizeCustom,
- iconSpacing,
- iconBorderRadius,
- labelSpacing,
- labelTypography,
- iconColor,
- iconColorHover,
- IconBackground,
- IconBackgroundHover,
- iconPadding,
- iconBorder,
- iconBorderColorHover,
+ return (
+
+
+
+
+
+ setAttributes({ layout: val })}
+ options={[
+ { value: "fill", svg: icons.social_fill, label: __("Fill") },
+ { value: "normal", svg: icons.social_normal, label: __("Normal") },
+ ]}
+ />
+ setAttributes({ useDefaultStyle: val })}
+ />
+ setAttributes({ iconLabel: val })}
+ />
+ setAttributes({ alignment: val })}
+ disableJustify
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
- //animation
- animation,
- //global
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- globalZindex,
- hideTablet,
- hideMobile,
- globalCss,
- interaction
- } = attributes;
+ {!useDefaultStyle && (
+
+
+
+ setAttributes({ iconColor: value })}
+ />
+ {layout == "fill" && (
+
+ setAttributes({ IconBackground: value })}
+ />
+ setAttributes({ iconBorder: value })}
+ max={10}
+ min={0}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+
+ setAttributes({ iconColorHover: value })}
+ />
+ {layout == "fill" && (
+
+
+ setAttributes({ IconBackgroundHover: value })
+ }
+ />
+
+ setAttributes({ iconBorderColorHover: value })
+ }
+ />
+
+ )}
+
+
+
+ )}
- return (
-
-
-
-
-
- setAttributes({ layout: val })}
- options={[
- { value: 'fill', svg: icons.social_fill, label: __('Fill') },
- { value: 'normal', svg: icons.social_normal, label: __('Normal') },
- ]}
- />
- setAttributes({ useDefaultStyle: val })} />
- setAttributes({ iconLabel: val })} />
- setAttributes({ alignment: val })} disableJustify responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
+
+ setAttributes({ iconSize: value })}
+ />
- {!useDefaultStyle &&
-
-
-
- setAttributes({ iconColor: value })} />
- {layout == 'fill' &&
-
- setAttributes({ IconBackground: value })} />
- setAttributes({ iconBorder: value })} max={10} min={0} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
-
- setAttributes({ iconColorHover: value })} />
- {layout == 'fill' &&
-
- setAttributes({ IconBackgroundHover: value })} />
- setAttributes({ iconBorderColorHover: value })} />
-
- }
-
-
-
- }
+ {iconSize == "custom" && (
+ setAttributes({ iconSizeCustom: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={10}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ {layout == "fill" && (
+
+ setAttributes({ iconPadding: value })}
+ unit={["px", "em", "%"]}
+ max={150}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
- setAttributes({ iconSize: value })} />
+ setAttributes({ iconBorderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+ setAttributes({ iconSpacing: value })}
+ unit={["px", "em", "%"]}
+ max={50}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
- {iconSize == 'custom' &&
- setAttributes({ iconSizeCustom: value })}
- unit={['px', 'em', '%']}
- max={100}
- min={10}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- }
- {layout == 'fill' &&
-
- setAttributes({ iconPadding: value })}
- unit={['px', 'em', '%']}
- max={150}
- min={0}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
+ setAttributes({ labelSpacing: value })}
+ unit={["px", "em", "%"]}
+ max={30}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ labelTypography: value })}
+ disableLineHeight
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
- setAttributes({ iconBorderRadius: value })}
- min={0}
- max={100} unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
- }
- setAttributes({ iconSpacing: value })}
- unit={['px', 'em', '%']}
- max={50}
- min={0}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+
+
+
+
-
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
- {iconLabel &&
-
- setAttributes({ labelSpacing: value })}
- unit={['px', 'em', '%']}
- max={30}
- min={0}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ labelTypography: value })}
- disableLineHeight
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
+
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ className={`qubely-block-social-icons qubely-layout-${layout} qubely-style-${
+ useDefaultStyle ? "default" : "custom"
+ }`}
+ >
+
+ {socialIcons.map((item, index) => (
+
+ {
+ e.preventDefault();
+ this.setState({
+ selectedLabel: index,
+ selectedItem: showIconPicker
+ ? selectedItem == index
+ ? -1
+ : index
+ : index,
+ showIconPicker: !showIconPicker,
+ });
+ }}
+ >
+
+ this.setSettings(selectedLabel, "label", e.target.innerHTML)
+ }
+ >
+ {item.label}
+
+ )}
+
+ {showIconPicker && selectedItem == index && isSelected && (
+
+
+
+ {
+ this.setSettings(selectedItem, "icon", val.value);
+ this.setSettings(selectedItem, "label", val.name);
+ this.setSettings(selectedItem, "id", val.id);
+ }}
+ />
+ this.setSettings(selectedItem, "url", val)}
+ placeholder={__("URL")}
+ />
+ {iconLabel && (
+
+ this.setSettings(selectedItem, "label", val)
+ }
+ placeholder={__("Enter icon label")}
+ />
+ )}
+ this.setState({ selectedItem: -1 })}
+ >
+ {__("Apply")}
+
+ this.removeItem()}
+ >
+ {__("Remove")}
+
+
+
+
+ )}
+
+ ))}
+ this.insertItem()}
+ className="qubely-social-icon-insert"
+ role="button"
+ arealabel={__("Add new icon")}
+ >
+
+
-
-
-
-
-
-
-
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- className={`qubely-block-social-icons qubely-layout-${layout} qubely-style-${useDefaultStyle ? 'default' : 'custom'}`} >
-
-
- {socialIcons.map((item, index) =>
-
-
- {
- e.preventDefault()
- this.setState({
- selectedLabel: index,
- selectedItem: showIconPicker ? (selectedItem == index) ? -1 : index : index,
- showIconPicker: !showIconPicker
- })
- }}
- >
- this.setSettings(selectedLabel, 'label', e.target.innerHTML)}>{item.label}
}
-
-
- {(showIconPicker && selectedItem == index && isSelected) &&
-
-
-
-
- {
- this.setSettings(selectedItem, 'icon', val.value)
- this.setSettings(selectedItem, 'label', val.name)
- this.setSettings(selectedItem, 'id', val.id)
- }}
- />
- this.setSettings(selectedItem, 'url', val)}
- placeholder={__('URL')}
-
- />
- {iconLabel &&
- this.setSettings(selectedItem, 'label', val)}
- placeholder={__('Enter icon label')}
- />
- }
- this.setState({ selectedItem: -1 })} >
- {__('Apply')}
-
- this.removeItem()} >
- {__('Remove')}
-
-
-
-
- }
-
- )}
- this.insertItem()} className="qubely-social-icon-insert" role="button" arealabel={__('Add new icon')}>
-
-
-
-
-
-
-
-
- );
- }
+
+
+
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/socialicons/Save.js b/assets/reactjs/src/blocks/socialicons/Save.js
index 8d5b9ac4..3ff24f0c 100644
--- a/assets/reactjs/src/blocks/socialicons/Save.js
+++ b/assets/reactjs/src/blocks/socialicons/Save.js
@@ -1,25 +1,38 @@
const { Component } = wp.element;
-const { HelperFunction: { animationAttr, IsInteraction } } = wp.qubelyComponents
+const {
+ HelperFunction: { animationAttr, IsInteraction },
+} = wp.qubelyComponents;
class Save extends Component {
- render() {
- const { uniqueId, socialIcons, iconLabel, layout, useDefaultStyle, animation, interaction } = this.props.attributes
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
- return (
-
- )
- }
+ render() {
+ const { uniqueId, socialIcons, iconLabel, layout, useDefaultStyle, animation, interaction } =
+ this.props.attributes;
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
+ return (
+
+ );
+ }
}
-export default Save;
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/socialicons/index.js b/assets/reactjs/src/blocks/socialicons/index.js
index 7279f1e6..800bd8ff 100644
--- a/assets/reactjs/src/blocks/socialicons/index.js
+++ b/assets/reactjs/src/blocks/socialicons/index.js
@@ -1,77 +1,206 @@
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save';
-const { __ } = wp.i18n
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-registerBlockType('qubely/socialicons', {
- title: __('Social Icons'),
- description: '',
- category: 'qubely',
- icon:
,
- keywords: [
- __('Social Icons'),
- __('Social'),
- __('Icons'),
- ],
- description: __('Add all your social media profiles in one place with Qubely Social Icons.'),
- example: {
- attributes: {},
- },
- supports: {
- align: ['center', 'wide', 'full'],
- },
- attributes: {
- uniqueId: { type: 'string', default: '' },
- ...globalAttributes, // Global Settings
- layout: { type: 'string', default: 'fill' },
- iconLabel: { type: 'boolean', default: true },
- useDefaultStyle: { type: 'boolean', default: true },
- alignment: { type: 'object', default: { md: 'left' }, style: [{ selector: '{{QUBELY}} .qubely-block-social-icons {text-align: {{alignment}};}' }] },
- spacer: { type: 'object', default: { spaceTop: { md: '10', unit: "px" }, spaceBottom: { md: '10', unit: "px" } }, style: [{ selector: '{{QUBELY}}' }] },
- socialIcons: {
- type: 'array', default: [
- { icon: 'fab fa-facebook', label: 'Facebook', id: 'facebook', url: 'https://facebook.com/themeum' },
- { icon: 'fab fa-twitter', label: 'Twitter', id: 'twitter', url: 'https://twitter.com/themeum' },
- { icon: 'fab fa-linkedin', label: 'LinkedIn', id: 'linkedin', url: '' },
- { icon: 'fab fa-youtube', label: 'YouTube', id: 'youtube', url: 'https://youtube.com/user/themeumwp' },
- { icon: 'fab fa-dribbble', label: 'Dribbble', id: 'dribbble', url: 'https://dribbble.com/themeum' },
- ]
- },
+registerBlockType("qubely/socialicons", {
+ title: __("Social Icons"),
+ description: "",
+ category: "qubely",
+ icon:
,
+ keywords: [__("Social Icons"), __("Social"), __("Icons")],
+ description: __("Add all your social media profiles in one place with Qubely Social Icons."),
+ example: {
+ attributes: {},
+ },
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ attributes: {
+ uniqueId: { type: "string", default: "" },
+ ...globalAttributes, // Global Settings
+ layout: { type: "string", default: "fill" },
+ iconLabel: { type: "boolean", default: true },
+ useDefaultStyle: { type: "boolean", default: true },
+ alignment: {
+ type: "object",
+ default: { md: "left" },
+ style: [{ selector: "{{QUBELY}} .qubely-block-social-icons {text-align: {{alignment}};}" }],
+ },
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ socialIcons: {
+ type: "array",
+ default: [
+ { icon: "fab fa-facebook", label: "Facebook", id: "facebook", url: "https://facebook.com/themeum" },
+ { icon: "fab fa-twitter", label: "Twitter", id: "twitter", url: "https://twitter.com/themeum" },
+ { icon: "fab fa-linkedin", label: "LinkedIn", id: "linkedin", url: "" },
+ { icon: "fab fa-youtube", label: "YouTube", id: "youtube", url: "https://youtube.com/user/themeumwp" },
+ { icon: "fab fa-dribbble", label: "Dribbble", id: "dribbble", url: "https://dribbble.com/themeum" },
+ ],
+ },
- // Icon
- iconSize: { type: 'string', default: '22px', style: [{ condition: [{ key: 'iconSize', relation: '!=', value: 'custom' }], selector: '{{QUBELY}} .qubely-social-item .qubely-social-icon {font-size: {{iconSize}}; height: {{iconSize}}; line-height: {{iconSize}}; width: {{iconSize}};}' }] },
- iconSizeCustom: { type: 'object', default: { md: 22, unit: 'px' }, style: [{ condition: [{ key: 'iconSize', relation: '==', value: 'custom' }], selector: '{{QUBELY}} .qubely-social-item .qubely-social-icon {font-size: {{iconSizeCustom}}; height: {{iconSizeCustom}}; line-height: {{iconSizeCustom}}; width: {{iconSizeCustom}};}' }] },
- iconPadding: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'global',
- global: { md: 10 },
- unit: 'px'
- },
- style: [
- {
- condition: [{ key: 'layout', relation: '==', value: 'fill' }],
- selector: '{{QUBELY}} .qubely-block-social-icons .qubely-social-item a'
- }
- ]
- },
- iconSpacing: { type: 'object', default: { md: 10, unit: 'px' }, style: [{ selector: '{{QUBELY}} .qubely-block-social-icons .qubely-ul {margin: calc(-{{iconSpacing}}/2);} {{QUBELY}} .qubely-block-social-icons .qubely-social-item {margin: calc({{iconSpacing}}/2);}' }] },
- iconBorderRadius: { type: 'object', default: { openBorderRadius: 1, radiusType: 'global', global: { md: 4 }, unit: 'px' }, style: [{ selector: '{{QUBELY}} .qubely-social-item a' }] },
- labelSpacing: { type: 'object', default: { md: 10, unit: 'px' }, style: [{ condition: [{ key: 'iconLabel', relation: '==', value: true }], selector: '{{QUBELY}} .qubely-social-item .qubely-social-label {margin-left: {{labelSpacing}};}' }] },
- labelTypography: { type: 'object', default: {}, style: [{ condition: [{ key: 'iconLabel', relation: '==', value: true }], selector: '{{QUBELY}} .qubely-block-social-icons .qubely-social-item .qubely-social-label' }] },
+ // Icon
+ iconSize: {
+ type: "string",
+ default: "22px",
+ style: [
+ {
+ condition: [{ key: "iconSize", relation: "!=", value: "custom" }],
+ selector:
+ "{{QUBELY}} .qubely-social-item .qubely-social-icon {font-size: {{iconSize}}; height: {{iconSize}}; line-height: {{iconSize}}; width: {{iconSize}};}",
+ },
+ ],
+ },
+ iconSizeCustom: {
+ type: "object",
+ default: { md: 22, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "iconSize", relation: "==", value: "custom" }],
+ selector:
+ "{{QUBELY}} .qubely-social-item .qubely-social-icon {font-size: {{iconSizeCustom}}; height: {{iconSizeCustom}}; line-height: {{iconSizeCustom}}; width: {{iconSizeCustom}};}",
+ },
+ ],
+ },
+ iconPadding: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "global",
+ global: { md: 10 },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: "fill" }],
+ selector: "{{QUBELY}} .qubely-block-social-icons .qubely-social-item a",
+ },
+ ],
+ },
+ iconSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-social-icons .qubely-ul {margin: calc(-{{iconSpacing}}/2);} {{QUBELY}} .qubely-block-social-icons .qubely-social-item {margin: calc({{iconSpacing}}/2);}",
+ },
+ ],
+ },
+ iconBorderRadius: {
+ type: "object",
+ default: { openBorderRadius: 1, radiusType: "global", global: { md: 4 }, unit: "px" },
+ style: [{ selector: "{{QUBELY}} .qubely-social-item a" }],
+ },
+ labelSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "iconLabel", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-social-item .qubely-social-label {margin-left: {{labelSpacing}};}",
+ },
+ ],
+ },
+ labelTypography: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "iconLabel", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-block-social-icons .qubely-social-item .qubely-social-label",
+ },
+ ],
+ },
- // Custom Design
- iconColor: { type: 'string', default: '', style: [{ condition: [{ key: 'useDefaultStyle', relation: '==', value: false }], selector: '{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a {color: {{iconColor}};}' }] },
- iconColorHover: { type: 'string', default: '#333', style: [{ condition: [{ key: 'useDefaultStyle', relation: '==', value: false }], selector: '{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a:hover {color: {{iconColorHover}};}' }] },
- IconBackground: { type: 'string', default: '#e5e5e5', style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }, { key: 'useDefaultStyle', relation: '==', value: false }], selector: '{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a {background-color: {{IconBackground}};}' }] },
- IconBackgroundHover: { type: 'string', default: '', style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }, { key: 'useDefaultStyle', relation: '==', value: false }], selector: '{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a:hover {background-color: {{IconBackgroundHover}};}' }] },
- iconBorder: { type: 'object', default: {}, style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }, { key: 'useDefaultStyle', relation: '==', value: false }], selector: '{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a' }] },
- iconBorderColorHover: { type: 'string', default: '', style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }, { key: 'useDefaultStyle', relation: '==', value: false }], selector: '{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a:hover {border-color: {{iconBorderColorHover}};}' }] },
- sourceOfCopiedStyle: { type: 'boolean', default: false }
- },
- edit: Edit,
- save: Save,
+ // Custom Design
+ iconColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "useDefaultStyle", relation: "==", value: false }],
+ selector:
+ "{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a {color: {{iconColor}};}",
+ },
+ ],
+ },
+ iconColorHover: {
+ type: "string",
+ default: "#333",
+ style: [
+ {
+ condition: [{ key: "useDefaultStyle", relation: "==", value: false }],
+ selector:
+ "{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a:hover {color: {{iconColorHover}};}",
+ },
+ ],
+ },
+ IconBackground: {
+ type: "string",
+ default: "#e5e5e5",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "useDefaultStyle", relation: "==", value: false },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a {background-color: {{IconBackground}};}",
+ },
+ ],
+ },
+ IconBackgroundHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "useDefaultStyle", relation: "==", value: false },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a:hover {background-color: {{IconBackgroundHover}};}",
+ },
+ ],
+ },
+ iconBorder: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "useDefaultStyle", relation: "==", value: false },
+ ],
+ selector: "{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a",
+ },
+ ],
+ },
+ iconBorderColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "useDefaultStyle", relation: "==", value: false },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-social-icons .qubely-ul li.qubely-social-item a:hover {border-color: {{iconBorderColorHover}};}",
+ },
+ ],
+ },
+ sourceOfCopiedStyle: { type: "boolean", default: false },
+ },
+ edit: Edit,
+ save: Save,
});
diff --git a/assets/reactjs/src/blocks/socialicons/style.scss b/assets/reactjs/src/blocks/socialicons/style.scss
index 1517a777..c364b7c5 100644
--- a/assets/reactjs/src/blocks/socialicons/style.scss
+++ b/assets/reactjs/src/blocks/socialicons/style.scss
@@ -1,5 +1,4 @@
.qubely-block-social-icons {
-
ul.qubely-ul {
list-style: none;
padding: 0;
@@ -54,7 +53,7 @@
color: #fff;
}
}
-
+
&.qubely-social-facebook {
a {
background: #3b5998;
@@ -353,7 +352,7 @@
}
&.qubely-social-imdb {
a {
- background: #EAB700;
+ background: #eab700;
color: #333;
&:hover {
background: rgb(194, 152, 1);
@@ -409,7 +408,7 @@
color: #333;
}
}
-
+
&.qubely-social-facebook {
a {
color: #3b5998;
@@ -708,7 +707,7 @@
}
&.qubely-social-imdb {
a {
- color: #EAB700;
+ color: #eab700;
&:hover {
color: rgb(202, 159, 3);
}
@@ -716,7 +715,7 @@
}
&.qubely-social-snapchat {
a {
- color: #FEFC00;
+ color: #fefc00;
&:hover {
color: rgb(211, 211, 1);
}
@@ -752,12 +751,12 @@
}
}
.qubely-socialicon-picker-popover {
- .components-popover__content:not(.is-mobile){
+ .components-popover__content:not(.is-mobile) {
padding: 20px;
min-width: 300px !important;
min-height: fit-content;
border: 1px solid #e5e5e5;
- box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
.qubely-action-social-icon-apply,
.qubely-action-social-icon-remove {
width: 100%;
@@ -771,4 +770,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/assets/reactjs/src/blocks/table-of-contents/Edit.js b/assets/reactjs/src/blocks/table-of-contents/Edit.js
index df93a4c1..0664d240 100644
--- a/assets/reactjs/src/blocks/table-of-contents/Edit.js
+++ b/assets/reactjs/src/blocks/table-of-contents/Edit.js
@@ -1,614 +1,761 @@
import classnames from 'classnames';
import { TableOfContents } from './components';
-import Separator from "../../components/fields/Separator";
+import Separator from '../../components/fields/Separator';
const { __ } = wp.i18n;
-const {
- Fragment,
- Component,
- createRef
-} = wp.element;
-const {
- PanelBody,
- TextControl,
- Toolbar,
- FormTokenField,
- CheckboxControl
-} = wp.components;
+const { Fragment, Component, createRef } = wp.element;
+const { PanelBody, TextControl, Toolbar, FormTokenField, CheckboxControl } =
+ wp.components;
-const {
- RichText,
- InspectorControls,
- BlockControls,
- BlockAlignmentToolbar,
-} = wp.blockEditor;
+const { RichText, InspectorControls, BlockControls, BlockAlignmentToolbar } =
+ wp.blockEditor;
const {
- Range,
- Toggle,
- Background,
- Border,
- BoxShadow,
- BorderRadius,
- RadioAdvanced,
- Color,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- Inline: {
- InlineToolbar
- },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- withCSSGenerator,
- InspectorTabs,
- InspectorTab
+ Range,
+ Toggle,
+ Background,
+ Border,
+ BoxShadow,
+ BorderRadius,
+ RadioAdvanced,
+ Color,
+ gloalSettings: {
+ globalSettingsPanel,
+ animationSettings,
+ interactionSettings,
+ },
+ Inline: { InlineToolbar },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
} = wp.qubelyComponents;
-
class Edit extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: 'md',
+ };
+ this.qubelyContextMenu = createRef();
+ }
- constructor(props) {
- super(props);
- this.state = {
- device: 'md'
- };
- this.qubelyContextMenu = createRef();
- }
+ componentDidMount() {
+ const {
+ setAttributes,
+ clientId,
+ attributes: { uniqueId },
+ } = this.props;
+ const _client = clientId.substr(0, 6);
+ if (!uniqueId) {
+ setAttributes({ uniqueId: _client });
+ } else if (uniqueId && uniqueId != _client) {
+ setAttributes({ uniqueId: _client });
+ }
+ }
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
+ render() {
+ const {
+ name,
+ clientId,
+ attributes,
+ setAttributes,
+ attributes: {
+ uniqueId,
+ align,
+ className,
+ tableType,
+ scrollToTop,
+ showTitle,
+ allowedAnchors,
+ title,
+ headerLinks,
+ animation,
+ interaction,
+ minimizeBox,
+ headingSize,
+ headerBg,
+ headerColor,
+ headerPaddingY,
+ headerPaddingX,
- render() {
- const {
- name,
- clientId,
- attributes,
- setAttributes,
- attributes: {
- uniqueId,
- align,
- className,
- tableType,
- scrollToTop,
- showTitle,
- allowedAnchors,
- title,
- headerLinks,
- animation,
- interaction,
- minimizeBox,
- headingSize,
- headerBg,
- headerColor,
- headerPaddingY,
- headerPaddingX,
+ bodyBg,
+ bodyFontSize,
+ bodyPaddingY,
+ bodyPaddingX,
+ bodyBorder,
+ bodyShadow,
+ bodyBorderRadius,
+ enableHeaderBorder,
+ headerBorderColor,
+ headerBorderWidth,
+ bodyColor,
+ bodyLineHeight,
- bodyBg,
- bodyFontSize,
- bodyPaddingY,
- bodyPaddingX,
- bodyBorder,
- bodyShadow,
- bodyBorderRadius,
- enableHeaderBorder,
- headerBorderColor,
- headerBorderWidth,
- bodyColor,
- bodyLineHeight,
+ collapsibleAlignment,
+ collapsibleIcon,
+ collapsibleType,
+ collapsibleOpen,
+ collapsibleClose,
+ isCollapsed,
- collapsibleAlignment,
- collapsibleIcon,
- collapsibleType,
- collapsibleOpen,
- collapsibleClose,
- isCollapsed,
+ smoothScroll,
+ scrollOffset,
+ backToTopIcon,
+ btiPosition,
+ btiSize,
+ btiOffset,
+ btiColor,
+ btiBg,
+ btiRadius,
+ indent,
+ collapsibleButtonColor,
- smoothScroll,
- scrollOffset,
- backToTopIcon,
- btiPosition,
- btiSize,
- btiOffset,
- btiColor,
- btiBg,
- btiRadius,
- indent,
- collapsibleButtonColor,
+ //global
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ },
+ } = this.props;
- //global
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- globalZindex,
- hideTablet,
- hideMobile,
- globalCss
- }
- } = this.props;
+ const { device } = this.state;
- const { device } = this.state;
+ const classes = classnames(
+ `qubely-block-${uniqueId}`,
+ "qubely-block-table-of-contents",
+ `qubely-align-${align}`
+ );
- const classes = classnames(
- `qubely-block-${uniqueId}`,
- 'qubely-block-table-of-contents',
- `qubely-align-${align}`,
- );
+ let defaultTags = {
+ h1: false,
+ h2: false,
+ h3: false,
+ h4: false,
+ h5: false,
+ h6: false,
+ };
- let defaultTags = {
- h1: false,
- h2: false,
- h3: false,
- h4: false,
- h5: false,
- h6: false,
- };
+ const currentIconClass = {};
+ switch (collapsibleIcon) {
+ case "chevron-cirlce":
+ currentIconClass.open = "fas fa-chevron-circle-up";
+ currentIconClass.close = "fas fa-chevron-circle-down";
+ break;
+ case "plus":
+ currentIconClass.open = "fas fa-plus";
+ currentIconClass.close = "fas fa-minus";
+ break;
+ case "plus-square":
+ currentIconClass.open = "fas fa-plus-square";
+ currentIconClass.close = "fas fa-minus-square";
+ break;
+ default:
+ currentIconClass.open = "fas fa-angle-up";
+ currentIconClass.close = "fas fa-angle-down";
+ }
- const currentIconClass = {};
- switch (collapsibleIcon) {
- case 'chevron-cirlce':
- currentIconClass.open = 'fas fa-chevron-circle-up';
- currentIconClass.close = 'fas fa-chevron-circle-down';
- break;
- case 'plus':
- currentIconClass.open = 'fas fa-plus';
- currentIconClass.close = 'fas fa-minus';
- break;
- case 'plus-square':
- currentIconClass.open = 'fas fa-plus-square';
- currentIconClass.close = 'fas fa-minus-square';
- break;
- default:
- currentIconClass.open = 'fas fa-angle-up';
- currentIconClass.close = 'fas fa-angle-down';
- }
-
- return (
-
-
- {/*
+
+ {/* setAttributes({ align: value })}
/>*/}
- setAttributes({ tableType: 'unordered' }),
- className: `qubely-action-change-listype ${tableType == 'unordered' ? 'is-active' : ''}`,
- }, {
- icon: 'editor-ol',
- title: 'Convert to ordered list',
- onClick: () => setAttributes({ tableType: 'ordered' }),
- className: `qubely-action-change-listype ${tableType == 'ordered' ? 'is-active' : ''}`,
- }]}
- />
-
-
-
-
-
-
- {/* {
- value.forEach(item => defaultTags[item] = true)
- setAttributes({ allowedAnchors: defaultTags })
- }}
- value={Object.keys(allowedAnchors).filter(item => allowedAnchors[item])}
- /> */}
-
-
{__('Select headings')}
-
- setAttributes({ allowedAnchors: { ...allowedAnchors, h1: value } })}
- />
- setAttributes({ allowedAnchors: { ...allowedAnchors, h2: value } })}
- />
- setAttributes({ allowedAnchors: { ...allowedAnchors, h3: value } })}
- />
- setAttributes({ allowedAnchors: { ...allowedAnchors, h4: value } })}
- />
- setAttributes({ allowedAnchors: { ...allowedAnchors, h5: value } })}
- />
- setAttributes({ allowedAnchors: { ...allowedAnchors, h6: value } })}
- />
-
-
-
-
- setAttributes({ headerColor })}
- />
- setAttributes({ headerBg })}
- />
- setAttributes({ headingSize })}
- unit={['px']}
- min={10} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ headerPaddingX })}
- unit={['px']}
- min={0} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ headerPaddingY })}
- unit={['px']}
- min={0} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ enableHeaderBorder })}
- />
- {
- enableHeaderBorder && (
-
- setAttributes({ headerBorderWidth })}
- unit={['px']}
- min={0} max={100} responsive device={device}
- onDeviceChange={headerBorderWidth => this.setState({ headerBorderWidth })}
- />
- setAttributes({ headerBorderColor })}
- />
-
- )
- }
-
-
-
- setAttributes({ minimizeBox })} />
- {
- minimizeBox && (
-
+ setAttributes({ tableType: 'unordered' }),
+ className: `qubely-action-change-listype ${
+ tableType == 'unordered' ? 'is-active' : ''
+ }`,
+ },
+ {
+ icon: 'editor-ol',
+ title: 'Convert to ordered list',
+ onClick: () => setAttributes({ tableType: 'ordered' }),
+ className: `qubely-action-change-listype ${
+ tableType == 'ordered' ? 'is-active' : ''
+ }`,
+ },
+ ]}
+ />
+
- setAttributes({ collapsibleButtonColor })}
- />
- setAttributes({ collapsibleAlignment })} />
- setAttributes({ collapsibleType })} />
+
+
+
+
+
+
{__('Select headings')}
+
+
+ setAttributes({
+ allowedAnchors: { ...allowedAnchors, h1: value },
+ })
+ }
+ />
+
+ setAttributes({
+ allowedAnchors: { ...allowedAnchors, h2: value },
+ })
+ }
+ />
+
+ setAttributes({
+ allowedAnchors: { ...allowedAnchors, h3: value },
+ })
+ }
+ />
+
+ setAttributes({
+ allowedAnchors: { ...allowedAnchors, h4: value },
+ })
+ }
+ />
+
+ setAttributes({
+ allowedAnchors: { ...allowedAnchors, h5: value },
+ })
+ }
+ />
+
+ setAttributes({
+ allowedAnchors: { ...allowedAnchors, h6: value },
+ })
+ }
+ />
+
+
- {
- collapsibleType === 'icon' ? (
- setAttributes({ collapsibleIcon })} />
- ) : (
-
- setAttributes({ collapsibleOpen })} />
- setAttributes({ collapsibleClose })} />
-
+
+ setAttributes({ headerColor })}
+ />
+ setAttributes({ headerBg })}
+ />
+ setAttributes({ headingSize })}
+ unit={['px']}
+ min={10}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ setAttributes({ headerPaddingX })
+ }
+ unit={['px']}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ setAttributes({ headerPaddingY })
+ }
+ unit={['px']}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ setAttributes({ enableHeaderBorder })
+ }
+ />
+ {enableHeaderBorder && (
+
+
+ setAttributes({ headerBorderWidth })
+ }
+ unit={['px']}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(headerBorderWidth) =>
+ this.setState({ headerBorderWidth })
+ }
+ />
+
+ setAttributes({ headerBorderColor })
+ }
+ />
+
+ )}
+
- )
- }
-
- )
- }
-
+
+ setAttributes({ minimizeBox })}
+ />
+ {minimizeBox && (
+
+
+ setAttributes({ collapsibleButtonColor })
+ }
+ />
+
+ setAttributes({ collapsibleAlignment })
+ }
+ />
+
+ setAttributes({ collapsibleType })
+ }
+ />
-
- setAttributes({ bodyColor })}
- />
- setAttributes({ bodyBg })}
- />
- setAttributes({ bodyFontSize })}
- unit={['px']}
- min={10} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ bodyLineHeight })}
- unit={['px', 'em']}
- min={0} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ indent })}
- unit={['px']}
- min={0} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ bodyPaddingX })}
- unit={['px']}
- min={0} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ bodyPaddingY })}
- unit={['px']}
- min={0} max={100} responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ bodyBorder: value })}
- unit={['px', 'em', '%']}
- max={100}
- min={0}
- responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ bodyShadow: value })}
- />
- setAttributes({ bodyBorderRadius: value })}
- unit={['px', 'em', '%']}
- max={100}
- min={0}
- responsive device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
-
+ {collapsibleType === 'icon' ? (
+
+ setAttributes({ collapsibleIcon })
+ }
+ />
+ ) : (
+
+
+ setAttributes({ collapsibleOpen })
+ }
+ />
+
+ setAttributes({ collapsibleClose })
+ }
+ />
+
+ )}
+
+ )}
+
-
- setAttributes({ smoothScroll })}
- />
- {
- smoothScroll === true && (
- setAttributes({ scrollOffset })}
- />
- )
- }
+
+ setAttributes({ bodyColor })}
+ />
+ setAttributes({ bodyBg })}
+ />
+ setAttributes({ bodyFontSize })}
+ unit={['px']}
+ min={10}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ setAttributes({ bodyLineHeight })
+ }
+ unit={['px', 'em']}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ indent })}
+ unit={['px']}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyPaddingX })}
+ unit={['px']}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyPaddingY })}
+ unit={['px']}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyBorder: value })}
+ unit={['px', 'em', '%']}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyShadow: value })}
+ />
+
+ setAttributes({ bodyBorderRadius: value })
+ }
+ unit={['px', 'em', '%']}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
-
+ setAttributes({ smoothScroll })}
+ />
+ {smoothScroll === true && (
+
+ setAttributes({ scrollOffset })
+ }
+ />
+ )}
- setAttributes({ scrollToTop: value })} />
+
- setAttributes({ backToTopIcon })}
- />
- setAttributes({ btiPosition })}
- />
- setAttributes({ btiOffset })}
- />
- setAttributes({ btiSize })}
- />
- setAttributes({ btiColor })}
- />
- setAttributes({ btiBg })}
- />
- setAttributes({ btiRadius })}
- />
-
- )
- }
-
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
-
+ setAttributes({ scrollToTop: value })}
+ />
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- >
-
- {
- showTitle && (
-
- setAttributes({ title: newTitle })}
- />
-
- )
- }
- {
- minimizeBox && (
-
setAttributes({ isCollapsed: !isCollapsed })}
- >
- {
- isCollapsed === true ? (
- collapsibleType !== 'icon' ?
{collapsibleOpen} :
- ) : (
- collapsibleType !== 'icon' ?
{collapsibleClose} :
- )
- }
-
- )
- }
-
-
- {
- scrollToTop !== false && (
-
- )
- }
+ {scrollToTop !== false && (
+
+
+ setAttributes({ backToTopIcon })
+ }
+ />
+
+ setAttributes({ btiPosition })
+ }
+ />
+ setAttributes({ btiOffset })}
+ />
+ setAttributes({ btiSize })}
+ />
+ setAttributes({ btiColor })}
+ />
+ setAttributes({ btiBg })}
+ />
+ setAttributes({ btiRadius })}
+ />
+
+ )}
+
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
-
-
-
-
+
+ handleContextMenu(event, this.qubelyContextMenu.current)
+ }
+ >
+
+ {showTitle && (
+
+ setAttributes({ title: newTitle })}
+ />
+
+ )}
+ {minimizeBox && (
+
setAttributes({ isCollapsed: !isCollapsed })}
+ >
+ {isCollapsed === true ? (
+ collapsibleType !== 'icon' ? (
+
{collapsibleOpen}
+ ) : (
+
+ )
+ ) : collapsibleType !== 'icon' ? (
+
{collapsibleClose}
+ ) : (
+
+ )}
+
+ )}
+
+
+ {scrollToTop !== false && (
+
+ )}
+
+
+
+
{showTitle && (
-
)}
{minimizeBox && (
- {collapsibleType !== 'icon' ? (
+ {collapsibleType !== "icon" ? (
{collapsibleOpen}
-
+
{collapsibleClose}
@@ -106,14 +99,14 @@ class Save extends Component {
@@ -125,19 +118,12 @@ class Save extends Component {
- {scrollToTop !== false && (
-
- )}
+ {scrollToTop !== false &&
}
);
diff --git a/assets/reactjs/src/blocks/table-of-contents/attributes.js b/assets/reactjs/src/blocks/table-of-contents/attributes.js
index 45b1f63e..44bc60ee 100644
--- a/assets/reactjs/src/blocks/table-of-contents/attributes.js
+++ b/assets/reactjs/src/blocks/table-of-contents/attributes.js
@@ -1,351 +1,396 @@
const { __ } = wp.i18n;
const {
- gloalSettings: {
- globalAttributes
- }
-} = wp.qubelyComponents
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
const attributes = {
- uniqueId: {
- type: 'string',
- default: ''
- },
- showTitle: {
- type: 'boolean',
- default: true
- },
- allowedAnchors: {
- type: 'object',
- default: {
- h1: true,
- h2: true,
- h3: true,
- h4: true,
- h5: true,
- h6: true,
- }
- },
- scrollToTop: {
- type: 'boolean',
- default: true
- },
- title: {
- type: 'string',
- default: 'Table of Contents'
- },
- align: {
- type: 'string',
- default: 'left',
- },
- tableType: {
- type: 'string',
- default: 'ordered'
- },
- minimizeBox: {type: 'boolean', default: false},
+ uniqueId: {
+ type: "string",
+ default: "",
+ },
+ showTitle: {
+ type: "boolean",
+ default: true,
+ },
+ allowedAnchors: {
+ type: "object",
+ default: {
+ h1: true,
+ h2: true,
+ h3: true,
+ h4: true,
+ h5: true,
+ h6: true,
+ },
+ },
+ scrollToTop: {
+ type: "boolean",
+ default: true,
+ },
+ title: {
+ type: "string",
+ default: "Table of Contents",
+ },
+ align: {
+ type: "string",
+ default: "left",
+ },
+ tableType: {
+ type: "string",
+ default: "ordered",
+ },
+ minimizeBox: { type: "boolean", default: false },
- headerBg: {
- type: 'string',
- default: '#F7FCFF',
- style: [{ selector: '{{QUBELY}} .qubely-table-of-contents-header { background-color: {{headerBg}} }' }]
- },
+ headerBg: {
+ type: "string",
+ default: "#F7FCFF",
+ style: [{ selector: "{{QUBELY}} .qubely-table-of-contents-header { background-color: {{headerBg}} }" }],
+ },
- headerColor: {
- type: 'string',
- default: '#222222',
- style: [{ selector: '{{QUBELY}} .qubely-table-of-contents-header { color: {{headerColor}} }' }]
- },
+ headerColor: {
+ type: "string",
+ default: "#222222",
+ style: [{ selector: "{{QUBELY}} .qubely-table-of-contents-header { color: {{headerColor}} }" }],
+ },
- collapsibleButtonColor: {
- type: 'string',
- default: '#222222',
- style: [{ selector: '{{QUBELY}} .qubely-table-of-contents-header a { color: {{collapsibleButtonColor}} }' }]
- },
+ collapsibleButtonColor: {
+ type: "string",
+ default: "#222222",
+ style: [{ selector: "{{QUBELY}} .qubely-table-of-contents-header a { color: {{collapsibleButtonColor}} }" }],
+ },
- bodyColor: {
- type: 'string',
- default: '#222222',
- style: [{ selector: '{{QUBELY}} .qubely-table-of-contents-body, {{QUBELY}} .qubely-table-of-contents-body a { color: {{bodyColor}} }' }]
- },
+ bodyColor: {
+ type: "string",
+ default: "#222222",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-table-of-contents-body, {{QUBELY}} .qubely-table-of-contents-body a { color: {{bodyColor}} }",
+ },
+ ],
+ },
- headingSize: {
- type: 'object',
- default: {
- md: 22,
- unit: 'px'
- },
- style: [{
- selector: '{{QUBELY}} .qubely-table-of-contents-header{font-size: {{headingSize}}}'
- }]
- },
+ headingSize: {
+ type: "object",
+ default: {
+ md: 22,
+ unit: "px",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-table-of-contents-header{font-size: {{headingSize}}}",
+ },
+ ],
+ },
- bodyLineHeight: {
- type: 'object',
- default: {
- md: 2,
- unit: 'em'
- },
- style: [{
- selector: '{{QUBELY}} .qubely-table-of-contents-body{line-height: {{bodyLineHeight}}}'
- }]
- },
+ bodyLineHeight: {
+ type: "object",
+ default: {
+ md: 2,
+ unit: "em",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-table-of-contents-body{line-height: {{bodyLineHeight}}}",
+ },
+ ],
+ },
- bodyFontSize: {
- type: 'object',
- default: {
- md: 18,
- unit: 'px'
- },
- style: [{
- selector: '{{QUBELY}} .qubely-table-of-contents-body{font-size: {{bodyFontSize}}}'
- }]
- },
- headerPaddingX: {
- type: 'object',
- default: {
- md: 20,
- unit: 'px'
- },
- style: [{
- selector: '{{QUBELY}} .qubely-table-of-contents-header{padding-left: {{headerPaddingX}}; padding-right: {{headerPaddingX}}}'
- }]
- },
- headerPaddingY: {
- type: 'object',
- default: {
- md: 15,
- unit: 'px'
- },
- style: [{
- selector: '{{QUBELY}} .qubely-table-of-contents-header{padding-top: {{headerPaddingY}}; padding-bottom: {{headerPaddingY}}}'
- }]
- },
- enableHeaderBorder: {type: 'boolean', default: true},
- headerBorderWidth: {
- type: 'object',
- default: {
- md: 1,
- unit: 'px'
- },
- style: [{
- condition: [{
- key: 'enableHeaderBorder',
- relation: '==',
- value: true
- }],
- selector: '{{QUBELY}} .qubely-table-of-contents-header{ border-bottom: {{headerBorderWidth}} solid}'
- }]
- },
- headerBorderColor: {
- type: 'string',
- default: '#EFEFEF',
- style: [{
- condition: [{
- key: 'enableHeaderBorder',
- relation: '==',
- value: true
- }],
- selector: '{{QUBELY}} .qubely-table-of-contents-header{ border-bottom-color: {{headerBorderColor}}}'
- }]
- },
- bodyBg: {
- type: 'object',
- default: {
- openColor: 1,
- type: 'color',
- color: '#ffffff',
- },
- style: [{ selector: '{{QUBELY}} .qubely-table-of-contents' }]
- },
- bodyPaddingX: {
- type: 'object',
- default: {
- md: 20,
- unit: 'px'
- },
- style: [{
- selector: '{{QUBELY}} .qubely-table-of-contents-body{padding-left: {{bodyPaddingX}}; padding-right: {{bodyPaddingX}}}'
- }]
- },
- bodyPaddingY: {
- type: 'object',
- default: {
- md: 10,
- unit: 'px'
- },
- style: [{
- selector: '{{QUBELY}} .qubely-table-of-contents-body{padding-top: {{bodyPaddingY}}; padding-bottom: {{bodyPaddingY}}}'
- }]
- },
- bodyBorder: {
- type: 'object',
- default: {
- borderType: 'global',
- widthType: 'global',
- openBorder: 1,
- type: 'solid',
- unit: 'px',
- color: '#EFEFEF',
- global: {
- md: 1
- }
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-table-of-contents'
- }
- ]
- },
- bodyShadow: {
- type: 'object',
- default: {
- openShadow: 1,
- inset: '',
- horizontal: 0,
- vertical: 32,
- blur: 54,
- spread: -20,
- color: 'rgba(0, 0, 0, .2)'
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-table-of-contents'
- }
- ]
- },
- bodyBorderRadius: {
- type: 'object',
- default: {
- radiusType: 'global'
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-table-of-contents'
- }
- ]
- },
- headerLinks: {
- type: 'string',
- default: ''
- },
+ bodyFontSize: {
+ type: "object",
+ default: {
+ md: 18,
+ unit: "px",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-table-of-contents-body{font-size: {{bodyFontSize}}}",
+ },
+ ],
+ },
+ headerPaddingX: {
+ type: "object",
+ default: {
+ md: 20,
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-table-of-contents-header{padding-left: {{headerPaddingX}}; padding-right: {{headerPaddingX}}}",
+ },
+ ],
+ },
+ headerPaddingY: {
+ type: "object",
+ default: {
+ md: 15,
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-table-of-contents-header{padding-top: {{headerPaddingY}}; padding-bottom: {{headerPaddingY}}}",
+ },
+ ],
+ },
+ enableHeaderBorder: { type: "boolean", default: true },
+ headerBorderWidth: {
+ type: "object",
+ default: {
+ md: 1,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ {
+ key: "enableHeaderBorder",
+ relation: "==",
+ value: true,
+ },
+ ],
+ selector: "{{QUBELY}} .qubely-table-of-contents-header{ border-bottom: {{headerBorderWidth}} solid}",
+ },
+ ],
+ },
+ headerBorderColor: {
+ type: "string",
+ default: "#EFEFEF",
+ style: [
+ {
+ condition: [
+ {
+ key: "enableHeaderBorder",
+ relation: "==",
+ value: true,
+ },
+ ],
+ selector: "{{QUBELY}} .qubely-table-of-contents-header{ border-bottom-color: {{headerBorderColor}}}",
+ },
+ ],
+ },
+ bodyBg: {
+ type: "object",
+ default: {
+ openColor: 1,
+ type: "color",
+ color: "#ffffff",
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-table-of-contents" }],
+ },
+ bodyPaddingX: {
+ type: "object",
+ default: {
+ md: 20,
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-table-of-contents-body{padding-left: {{bodyPaddingX}}; padding-right: {{bodyPaddingX}}}",
+ },
+ ],
+ },
+ bodyPaddingY: {
+ type: "object",
+ default: {
+ md: 10,
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-table-of-contents-body{padding-top: {{bodyPaddingY}}; padding-bottom: {{bodyPaddingY}}}",
+ },
+ ],
+ },
+ bodyBorder: {
+ type: "object",
+ default: {
+ borderType: "global",
+ widthType: "global",
+ openBorder: 1,
+ type: "solid",
+ unit: "px",
+ color: "#EFEFEF",
+ global: {
+ md: 1,
+ },
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-table-of-contents",
+ },
+ ],
+ },
+ bodyShadow: {
+ type: "object",
+ default: {
+ openShadow: 1,
+ inset: "",
+ horizontal: 0,
+ vertical: 32,
+ blur: 54,
+ spread: -20,
+ color: "rgba(0, 0, 0, .2)",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-table-of-contents",
+ },
+ ],
+ },
+ bodyBorderRadius: {
+ type: "object",
+ default: {
+ radiusType: "global",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-table-of-contents",
+ },
+ ],
+ },
+ headerLinks: {
+ type: "string",
+ default: "",
+ },
- collapsibleAlignment: {
- type: 'string',
- default: 'qubely-justify-between'
- },
+ collapsibleAlignment: {
+ type: "string",
+ default: "qubely-justify-between",
+ },
- collapsibleType: {
- type: 'string',
- default: 'text'
- },
+ collapsibleType: {
+ type: "string",
+ default: "text",
+ },
- collapsibleOpen: {
- type: 'string',
- default: __('[Show]')
- },
+ collapsibleOpen: {
+ type: "string",
+ default: __("[Show]"),
+ },
- collapsibleClose: {
- type: 'string',
- default: __('[Hide]')
- },
+ collapsibleClose: {
+ type: "string",
+ default: __("[Hide]"),
+ },
- collapsibleIcon: {
- type: 'string',
- default: 'angle'
- },
+ collapsibleIcon: {
+ type: "string",
+ default: "angle",
+ },
- isCollapsed: {
- type: 'boolean',
- default: false
- },
+ isCollapsed: {
+ type: "boolean",
+ default: false,
+ },
- smoothScroll: {
- type: 'boolean',
- default: true
- },
+ smoothScroll: {
+ type: "boolean",
+ default: true,
+ },
- scrollOffset: {
- type: 'number',
- default: 20
- },
+ scrollOffset: {
+ type: "number",
+ default: 20,
+ },
- backToTopIcon: {
- type: 'string',
- default: 'fas fa-angle-up'
- },
+ backToTopIcon: {
+ type: "string",
+ default: "fas fa-angle-up",
+ },
- btiPosition: {
- type: 'string',
- default: 'right',
- style: [
- {
- condition: [{
- key: 'btiPosition',
- relation: '==',
- value: 'right'
- }],
- selector: '{{QUBELY}} .qubely-back-to-top-button {left: auto; right: 30px}'
- },
- {
- condition: [{
- key: 'btiPosition',
- relation: '==',
- value: 'left'
- }],
- selector: '{{QUBELY}} .qubely-back-to-top-button {right: auto; left: 30px}'
- }
- ]
- },
+ btiPosition: {
+ type: "string",
+ default: "right",
+ style: [
+ {
+ condition: [
+ {
+ key: "btiPosition",
+ relation: "==",
+ value: "right",
+ },
+ ],
+ selector: "{{QUBELY}} .qubely-back-to-top-button {left: auto; right: 30px}",
+ },
+ {
+ condition: [
+ {
+ key: "btiPosition",
+ relation: "==",
+ value: "left",
+ },
+ ],
+ selector: "{{QUBELY}} .qubely-back-to-top-button {right: auto; left: 30px}",
+ },
+ ],
+ },
- btiOffset: {
- type: 'number',
- default: 30,
- style: [{
- selector: '{{QUBELY}} .qubely-back-to-top-button{bottom: {{btiOffset}}px}'
- }]
- },
+ btiOffset: {
+ type: "number",
+ default: 30,
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-back-to-top-button{bottom: {{btiOffset}}px}",
+ },
+ ],
+ },
- btiColor: {
- type: 'string',
- default: '#ffffff',
- style: [{
- selector: '{{QUBELY}} .qubely-back-to-top-button{color: {{btiColor}}}'
- }]
- },
+ btiColor: {
+ type: "string",
+ default: "#ffffff",
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-back-to-top-button{color: {{btiColor}}}",
+ },
+ ],
+ },
- btiBg: {
- type: 'string',
- default: '#222222',
- style: [{
- selector: '{{QUBELY}} .qubely-back-to-top-button{background: {{btiBg}}}'
- }]
- },
- btiRadius: {
- type: 'number',
- default: 4,
- style: [{
- selector: '{{QUBELY}} .qubely-back-to-top-button{border-radius: {{btiRadius}}px}'
- }]
- },
- indent: {
- type: 'object',
- default: {
- md: 35,
- unit: 'px'
- },
- style: [{
- selector: '{{QUBELY}} .ordered-list ol, ' +
- '{{QUBELY}} .unordered-list ul{margin-left: {{indent}}}'
- }]
- },
- btiSize: {
- type: 'number',
- default: 35,
- style: [{
- selector: '{{QUBELY}} .qubely-back-to-top-button{height: {{btiSize}}px; width: {{btiSize}}px; line-height: {{btiSize}}px}'
- }]
- },
+ btiBg: {
+ type: "string",
+ default: "#222222",
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-back-to-top-button{background: {{btiBg}}}",
+ },
+ ],
+ },
+ btiRadius: {
+ type: "number",
+ default: 4,
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-back-to-top-button{border-radius: {{btiRadius}}px}",
+ },
+ ],
+ },
+ indent: {
+ type: "object",
+ default: {
+ md: 35,
+ unit: "px",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .ordered-list ol, " + "{{QUBELY}} .unordered-list ul{margin-left: {{indent}}}",
+ },
+ ],
+ },
+ btiSize: {
+ type: "number",
+ default: 35,
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-back-to-top-button{height: {{btiSize}}px; width: {{btiSize}}px; line-height: {{btiSize}}px}",
+ },
+ ],
+ },
- // Global
- ...globalAttributes
-}
-export default attributes;
\ No newline at end of file
+ // Global
+ ...globalAttributes,
+};
+export default attributes;
diff --git a/assets/reactjs/src/blocks/table-of-contents/components.js b/assets/reactjs/src/blocks/table-of-contents/components.js
index a2302320..50da667f 100644
--- a/assets/reactjs/src/blocks/table-of-contents/components.js
+++ b/assets/reactjs/src/blocks/table-of-contents/components.js
@@ -13,10 +13,16 @@ class TableOfContents extends Component {
};
}
- getHeadings = (headings = [], type = 'default') => {
- if (type === 'default')
- return headings.filter((heading) => heading.level !== undefined);
- return headings.filter((heading) => heading.level === undefined);
+ isAdvancedHeading(header) {
+ return header.level === undefined;
+ }
+
+ getHeaderLevel = (header) => {
+ return this.isAdvancedHeading(header) ? header.titleLevel : header.level;
+ };
+
+ getHeaderContent = (header) => {
+ return this.isAdvancedHeading(header) ? header.title : header.content;
};
componentDidMount() {
@@ -55,24 +61,14 @@ class TableOfContents extends Component {
});
return targetBlocks;
};
-
const setHeaders = () => {
- const headings = getsHeadingBlocks().map((header) => header.attributes);
- const advancedHeadings = this.getHeadings(headings, 'advanced');
- const simpleHeadings = this.getHeadings(headings);
-
- simpleHeadings.forEach((heading, key) => {
+ let headings = getsHeadingBlocks().map((header) => header.attributes);
+ headings.forEach((heading, key) => {
if (!heading.anchor) {
- heading.anchor = generateAnchor(heading.content, `${key + 1}`);
+ const anchorText = this.getHeaderContent(heading);
+ heading.anchor = generateAnchor(anchorText, `${key + 1}`);
}
});
-
- advancedHeadings.forEach((heading, key) => {
- if (!heading.anchor) {
- heading.anchor = generateAnchor(heading.title, `${key + 1}`);
- }
- });
-
if (JSON.stringify(headings) !== JSON.stringify(this.state.headers)) {
this.setState({ headers: headings });
}
@@ -111,13 +107,17 @@ class TableOfContents extends Component {
let lastIndex = formattedHeaders.length - 1;
if (
formattedHeaders.length === 0 ||
- formattedHeaders[0].level === currentHeader.level
+ this.getHeaderLevel(formattedHeaders[0]) ===
+ this.getHeaderLevel(currentHeader)
+ ) {
+ formattedHeaders.push({ ...currentHeader });
+ } else if (
+ this.getHeaderLevel(formattedHeaders[lastIndex]) <
+ this.getHeaderLevel(currentHeader)
) {
- formattedHeaders.push(Object.assign({}, currentHeader));
- } else if (formattedHeaders[lastIndex].level < currentHeader.level) {
if (!formattedHeaders[lastIndex].children) {
formattedHeaders[lastIndex].children = [
- Object.assign({}, currentHeader),
+ Object.assign({ ...currentHeader }),
];
} else
createHierarchy(formattedHeaders[lastIndex].children, currentHeader);
@@ -127,68 +127,30 @@ class TableOfContents extends Component {
const formatHeaders = (allHeaders) => {
let formattedHeaders2 = [];
allHeaders
- .filter((header) => allowedAnchors[`h${header.level}`])
+ .filter((header) => {
+ const level = this.getHeaderLevel(header);
+ return allowedAnchors[`h${level}`];
+ })
.forEach((header) => createHierarchy(formattedHeaders2, header));
-
return formattedHeaders2;
};
- const formatHeadersAdvanced = (allHeaders) => {
- let formattedAdvancedHeaders = [];
- allHeaders.forEach((header) => {
- if (header.subTitle) {
- header.children = [
- {
- anchor: generateAnchor(header.subTitleContent),
- title: header.subTitleContent,
- },
- ];
- }
- formattedAdvancedHeaders.push(header);
- });
-
- return formattedAdvancedHeaders;
- };
-
- const parseList = (list, listType = 'default') => {
- if (listType === 'advanced') {
- return list.map((item) => (
-
-
- {item.title.replace(/(<.+?>)/g, '')}
-
- {item.children && (
-
- {parseList(item.children, listType)}
-
- )}
-
- ));
- } else {
- return list.map((item) => (
-
-
- {item.content.replace(/(<.+?>)/g, '')}
-
- {item.children && (
-
- {parseList(item.children, listType)}
-
- )}
-
- ));
- }
- };
-
+ const parseList = (list) =>
+ list.map((item) => (
+
+
+ {this.getHeaderContent(item).replace(/(<.+?>)/g, '')}
+
+ {item.children && (
+
+ {parseList(item.children)}
+
+ )}
+
+ ));
return (
- {[
- ...parseList(formatHeaders(this.getHeadings(headers))),
- ...parseList(
- formatHeadersAdvanced(this.getHeadings(headers, 'advanced')),
- 'advanced',
- ),
- ]}
+ {parseList(formatHeaders(headers))}
);
}
diff --git a/assets/reactjs/src/blocks/table-of-contents/index.js b/assets/reactjs/src/blocks/table-of-contents/index.js
index c9eec36f..1fc1ce79 100644
--- a/assets/reactjs/src/blocks/table-of-contents/index.js
+++ b/assets/reactjs/src/blocks/table-of-contents/index.js
@@ -1,30 +1,19 @@
-import './style.scss';
-import Edit from './Edit';
-import Save from './Save';
-import attributes from './attributes';
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+import attributes from "./attributes";
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
-registerBlockType('qubely/table-of-contents', {
- title: __('Table of Contents'),
- description: 'Organize page/post contents with Qubely Table of Contents',
- icon:
,
- category: 'qubely',
- supports: {
- },
- keywords: [
- __('Table of Contents'),
- __('Table'),
- __('Contents'),
- __('Qubely')
- ],
- example: {
-
- },
- attributes,
- edit: Edit,
- save: Save,
- // save: function (props) {
- // return null
- // },
+registerBlockType("qubely/table-of-contents", {
+ title: __("Table of Contents"),
+ description: "Organize page/post contents with Qubely Table of Contents",
+ icon:
,
+ category: "qubely",
+ supports: {},
+ keywords: [__("Table of Contents"), __("Table"), __("Contents"), __("Qubely")],
+ example: {},
+ attributes,
+ edit: Edit,
+ save: Save,
});
diff --git a/assets/reactjs/src/blocks/table-of-contents/style.scss b/assets/reactjs/src/blocks/table-of-contents/style.scss
index 62fe67a7..2618b345 100644
--- a/assets/reactjs/src/blocks/table-of-contents/style.scss
+++ b/assets/reactjs/src/blocks/table-of-contents/style.scss
@@ -1,166 +1,163 @@
.qubely-block-table-of-contents {
- .qubely-table-of-contents{
- overflow: hidden;
- &.qubely-toc-collapsed{
- .qubely-table-of-contents-header{
- border-bottom-width: 0;
- }
- .qubely-table-of-contents-body{
- display: none;
- }
- }
- }
- // toc header
+ .qubely-table-of-contents {
+ overflow: hidden;
+ &.qubely-toc-collapsed {
+ .qubely-table-of-contents-header {
+ border-bottom-width: 0;
+ }
+ .qubely-table-of-contents-body {
+ display: none;
+ }
+ }
+ }
+ // toc header
- .qubely-table-of-contents-header{
- display: flex;
- align-items: center;
- position: relative;
- &.qubely-justify-start{
- justify-content: flex-start;
- }
- &.qubely-justify-between{
- justify-content: space-between;
- }
- &.qubely-justify-center{
- justify-content: center;
- }
- &.qubely-justify-end{
- justify-content: flex-end;
- }
- .qubely-table-of-contents-toggle{
- box-sizing: border-box;
- margin-left: 5px;
- .qubely-toc-close-icon,
- .qubely-toc-close-text{
- display: none;
- }
- &.qubely-toc-collapsed {
- .qubely-toc-open-icon,
- .qubely-toc-open-text{
- display: none;
- }
- .qubely-toc-close-icon,
- .qubely-toc-close-text{
- display: block;
- }
- }
- a{
- text-decoration: none;
- display: block;
- }
- }
- &.qubely-toc-header-frontend .qubely-table-of-contents-toggle a::after{
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 2;
- left: 0;
- top: 0;
- }
- }
+ .qubely-table-of-contents-header {
+ display: flex;
+ align-items: center;
+ position: relative;
+ &.qubely-justify-start {
+ justify-content: flex-start;
+ }
+ &.qubely-justify-between {
+ justify-content: space-between;
+ }
+ &.qubely-justify-center {
+ justify-content: center;
+ }
+ &.qubely-justify-end {
+ justify-content: flex-end;
+ }
+ .qubely-table-of-contents-toggle {
+ box-sizing: border-box;
+ margin-left: 5px;
+ .qubely-toc-close-icon,
+ .qubely-toc-close-text {
+ display: none;
+ }
+ &.qubely-toc-collapsed {
+ .qubely-toc-open-icon,
+ .qubely-toc-open-text {
+ display: none;
+ }
+ .qubely-toc-close-icon,
+ .qubely-toc-close-text {
+ display: block;
+ }
+ }
+ a {
+ text-decoration: none;
+ display: block;
+ }
+ }
+ &.qubely-toc-header-frontend .qubely-table-of-contents-toggle a::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ left: 0;
+ top: 0;
+ }
+ }
+ &.qubely-align-left {
+ text-align: left;
+ }
+ &.qubely-align-center {
+ text-align: center;
+ }
+ &.qubely-align-right {
+ text-align: right;
+ }
- &.qubely-align-left {
- text-align: left;
- }
- &.qubely-align-center {
- text-align: center;
- }
- &.qubely-align-right {
- text-align: right;
- }
+ .ordered-list,
+ .unordered-list {
+ text-align: left;
+ margin: 0;
+ padding: 0 0 0 1.5em;
+ ul,
+ ol {
+ padding-left: 20px;
+ margin: 0;
+ li {
+ position: relative;
+ }
+ }
+ }
- .ordered-list,
- .unordered-list {
- text-align: left;
- margin: 0;
- padding: 0 0 0 1.5em;
- ul,
- ol{
- padding-left: 20px;
- margin: 0;
- li{
- position: relative;
- }
- }
- }
-
- ul.child-list {
- list-style-type: circle;
- }
-
- ol {
- counter-reset: item;
- list-style: none !important;
- > li {
- counter-increment: item;
- list-style-type: none;
- }
- li{
- position: relative;
- &::before{
- content: counters(item, ".") ". ";
- position: absolute;
- right: calc(100% + 12px);
- word-break: initial;
- }
- ol > li::before{
- content: counters(item, ".") " ";
- word-break: initial;
- }
- }
- }
+ ul.child-list {
+ list-style-type: circle;
+ }
+ ol {
+ counter-reset: item;
+ list-style: none !important;
+ > li {
+ counter-increment: item;
+ list-style-type: none;
+ }
+ li {
+ position: relative;
+ &::before {
+ content: counters(item, ".") ". ";
+ position: absolute;
+ right: calc(100% + 12px);
+ word-break: initial;
+ }
+ ol > li::before {
+ content: counters(item, ".") " ";
+ word-break: initial;
+ }
+ }
+ }
}
-.qubely-back-to-top-button{
- position: fixed;
- bottom: 50px;
- right: 310px;
- z-index: 99999999;
- background: red;
- width: 40px;
- height: 40px;
- text-align: center;
- text-decoration: none !important;
- opacity: 0;
- visibility: hidden;
- transition: 300ms;
- &.qubely-show-scroll{
- opacity: 1;
- visibility: visible;
- }
- &:focus,
- &:active,
- &:hover{
- color: inherit;
- text-decoration: none !important;
- }
+.qubely-back-to-top-button {
+ position: fixed;
+ bottom: 50px;
+ right: 310px;
+ z-index: 99999999;
+ background: red;
+ width: 40px;
+ height: 40px;
+ text-align: center;
+ text-decoration: none !important;
+ opacity: 0;
+ visibility: hidden;
+ transition: 300ms;
+ &.qubely-show-scroll {
+ opacity: 1;
+ visibility: visible;
+ }
+ &:focus,
+ &:active,
+ &:hover {
+ color: inherit;
+ text-decoration: none !important;
+ }
}
-
-.block-editor-page .qubely-back-to-top-button{
- margin-right: 280px;
- margin-left: 160px;
- opacity: 1;
- visibility: visible;
+.block-editor-page .qubely-back-to-top-button {
+ margin-right: 280px;
+ margin-left: 160px;
+ opacity: 1;
+ visibility: visible;
}
-.qubely-toc-allowed-headings{
- display: flex;
- flex-wrap: wrap;
- margin-right: -12px;
- .components-base-control{
- margin: 9px 15px 4px 0 !important;
- font-weight: 400;
- font-size: 14px;
- border: 1px solid #c7c7c7;
- padding: 5px 10px;
- border-radius: 3px;
- .components-base-control__field{
- margin: 0;
- }
- }
-}
\ No newline at end of file
+.qubely-toc-allowed-headings {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: -12px;
+ .components-base-control {
+ margin: 9px 15px 4px 0 !important;
+ font-weight: 400;
+ font-size: 14px;
+ border: 1px solid #c7c7c7;
+ padding: 5px 10px;
+ border-radius: 3px;
+ .components-base-control__field {
+ margin: 0;
+ }
+ }
+}
diff --git a/assets/reactjs/src/blocks/tabs/Edit.js b/assets/reactjs/src/blocks/tabs/Edit.js
index eb9bd4f0..c0b31de3 100644
--- a/assets/reactjs/src/blocks/tabs/Edit.js
+++ b/assets/reactjs/src/blocks/tabs/Edit.js
@@ -1,34 +1,17 @@
-import classnames from 'classnames';
-import icons from '../../helpers/icons';
+import classnames from "classnames";
+import icons from "../../helpers/icons";
const { __ } = wp.i18n;
const { createBlock } = wp.blocks;
-const {
- Toolbar,
- Tooltip,
- PanelBody,
- RangeControl,
-} = wp.components;
+const { Toolbar, Tooltip, PanelBody, RangeControl } = wp.components;
const { compose } = wp.compose;
-const {
- withSelect,
- withDispatch
-} = wp.data;
+const { withSelect, withDispatch } = wp.data;
-const {
- Fragment,
- Component,
-} = wp.element;
+const { Fragment, Component } = wp.element;
-const {
- RichText,
- InnerBlocks,
- BlockControls,
- InspectorControls,
- MediaUpload,
-} = wp.blockEditor;
+const { RichText, InnerBlocks, BlockControls, InspectorControls, MediaUpload } = wp.blockEditor;
const {
Tab,
@@ -53,65 +36,38 @@ const {
RadioAdvanced,
withCSSGenerator,
ColorAdvanced,
- Inline: {
- InlineToolbar
- },
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- }
-} = wp.qubelyComponents
+ Inline: { InlineToolbar },
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+} = wp.qubelyComponents;
class Edit extends Component {
-
constructor(props) {
- super(props)
+ super(props);
this.state = {
spacer: true,
- device: 'md',
+ device: "md",
activeTab: 1,
initialRender: true,
showIconPicker: false,
- }
+ };
}
- componentDidMount() {
+ updateTitles = (value, index) => {
const {
- block,
- clientId,
+ attributes: { tabTitles },
setAttributes,
- updateBlockAttributes,
- attributes: {
- uniqueId
- }
} = this.props;
-
- const _client = clientId.substr(0, 6);
-
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
-
- updateTitles = (value, index) => {
- const { attributes: { tabTitles }, setAttributes } = this.props;
const modifiedTitles = tabTitles.map((title, thisIndex) => {
if (index === thisIndex) {
- title = { ...title, ...value }
+ title = { ...title, ...value };
}
- return title
- })
- setAttributes({ tabTitles: modifiedTitles })
- }
+ return title;
+ });
+ setAttributes({ tabTitles: modifiedTitles });
+ };
renderTabTitles = () => {
- const {
- activeTab,
- showIconPicker
- } = this.state;
+ const { activeTab, showIconPicker } = this.state;
const {
attributes: {
@@ -126,124 +82,126 @@ class Edit extends Component {
progressbarPosition,
imageNavTitleAlignment,
enableImageNavDesciption,
- }
+ },
} = this.props;
const changeActiveTab = (index) => {
this.setState({
initialRender: false,
activeTab: index + 1,
- showIconPicker: !showIconPicker
+ showIconPicker: !showIconPicker,
});
- }
-
- return (
- tabTitles.map((title, index) => {
- let isActiveTab = false;
- if (activeTab === index + 1) {
- isActiveTab = true;
- }
- const wrapperClasses = classnames(
- 'qubely-tab-item',
- 'qubely-backend',
- { ['qubely-active']: isActiveTab }
- )
- const titleClasses = classnames(
- 'qubely-tab-title',
- { [`qubely-has-icon-${iconPosition}`]: typeof title.iconName !== 'undefined' }
- )
- return (
-
-
changeActiveTab(index)}
- >
- {
- navType === 'text' ?
-
- {title.iconName && (iconPosition == 'top' || iconPosition == 'left') && ( this.updateTitles({ title: value }, index)}
- />
- :
- {title.title}
- }
- {title.iconName && (iconPosition == 'right') && (
- :
-
- {
- navLayout !== 'three' &&
-
this.updateTitles({ avatar: val }, index)}
- allowedTypes={['image']}
- multiple={false}
- value={title.avatar}
- render={({ open }) => (
-
- {(title.avatar && title.avatar.url) ?
-
+ return tabTitles.map((title, index) => {
+ let isActiveTab = false;
+ if (activeTab === index + 1) {
+ isActiveTab = true;
+ }
+ const wrapperClasses = classnames("qubely-tab-item", "qubely-backend", { ["qubely-active"]: isActiveTab });
+ const titleClasses = classnames("qubely-tab-title", {
+ [`qubely-has-icon-${iconPosition}`]: typeof title.iconName !== "undefined",
+ });
+ return (
+
+
changeActiveTab(index)}>
+ {navType === "text" ? (
+
+ {title.iconName && (iconPosition == "top" || iconPosition == "left") && (
+ this.updateTitles({ title: value }, index)}
+ />
+ ) : (
+ {title.title}
+ )}
+ {title.iconName && iconPosition == "right" && (
+
+ ) : (
+
+ {navLayout !== "three" && (
+
this.updateTitles({ avatar: val }, index)}
+ allowedTypes={["image"]}
+ multiple={false}
+ value={title.avatar}
+ render={({ open }) => (
+
+ {title.avatar && title.avatar.url ? (
+
+ )}
+ />
+ )}
+ {(enableImageNavTitle || enableImageNavDesciption) && (
+
+ {enableImageNavTitle && (
+
this.updateTitles({ title: value }, index)}
/>
- }
- {
- (enableImageNavTitle || enableImageNavDesciption) &&
-
- {
- enableImageNavTitle &&
- this.updateTitles({ title: value }, index)}
- />
- }
- {
- enableImageNavDesciption &&
- this.updateTitles({ description: value }, index)}
- />
- }
-
- }
+ )}
+ {enableImageNavDesciption && (
+ this.updateTitles({ description: value }, index)}
+ />
+ )}
- {
- (autoSwithcing && showProgressBar) &&
-
- }
-
- this.deleteTab(index)}>
-
-
+ )}
+
+ )}
+ )}
+
+ this.deleteTab(index)}>
+
+
+
+ );
+ });
+ };
deleteTab = (tabIndex) => {
const { activeTab } = this.state;
@@ -253,10 +211,7 @@ class Edit extends Component {
setAttributes,
replaceInnerBlocks,
updateBlockAttributes,
- attributes: {
- tabs,
- tabTitles
- }
+ attributes: { tabs, tabTitles },
} = this.props;
const newItems = tabTitles.filter((item, index) => index != tabIndex);
@@ -264,14 +219,16 @@ class Edit extends Component {
setAttributes({
tabTitles: newItems,
- tabs: tabs - 1
+ tabs: tabs - 1,
});
while (i < tabs) {
- updateBlockAttributes(block.innerBlocks[i].clientId,
+ updateBlockAttributes(
+ block.innerBlocks[i].clientId,
Object.assign(block.innerBlocks[i].attributes, {
- id: block.innerBlocks[i].attributes.id - 1
- }));
+ id: block.innerBlocks[i].attributes.id - 1,
+ })
+ );
i++;
}
@@ -280,18 +237,17 @@ class Edit extends Component {
replaceInnerBlocks(clientId, innerBlocks, false);
- this.setState(state => {
+ this.setState((state) => {
let newActiveTab = state.activeTab - 1;
if (tabIndex + 1 === activeTab) {
- newActiveTab = tabIndex == 0 ? 1 : tabIndex + 1 < tabs ? tabIndex + 1 : tabIndex
+ newActiveTab = tabIndex == 0 ? 1 : tabIndex + 1 < tabs ? tabIndex + 1 : tabIndex;
}
return {
activeTab: newActiveTab,
- initialRender: false
- }
+ initialRender: false,
+ };
});
-
- }
+ };
render() {
const {
@@ -347,7 +303,6 @@ class Edit extends Component {
navAlignment,
navColorActive,
-
navBorder,
navBorderActive,
navBorderRadiusTabs,
@@ -380,520 +335,780 @@ class Edit extends Component {
positionXaxis,
positionYaxis,
enablePosition,
- selectPosition
- }
+ selectPosition,
+ },
} = this.props;
- const {
- device,
- activeTab
- } = this.state;
-
+ const { device, activeTab } = this.state;
const newTitles = () => {
let newTitles = JSON.parse(JSON.stringify(tabTitles));
newTitles[tabs] = {
title: __(`Tab ${tabs + 1}`),
icon: {},
- }
+ };
return newTitles;
- }
+ };
const addNewTab = () => {
- const {
- clientId,
- block,
- replaceInnerBlocks,
- } = this.props;
+ const { clientId, block, replaceInnerBlocks } = this.props;
this.setState({
activeTab: tabs + 1,
- initialRender: false
+ initialRender: false,
});
setAttributes({
tabs: tabs + 1,
- tabTitles: newTitles()
+ tabTitles: newTitles(),
});
let innerBlocks = JSON.parse(JSON.stringify(block.innerBlocks));
- innerBlocks.push(createBlock('qubely/tab', {
- id: innerBlocks.length + 1,
- customClassName: 'qubely-active',
- }));
+ innerBlocks.push(
+ createBlock("qubely/tab", {
+ id: innerBlocks.length + 1,
+ customClassName: "qubely-active",
+ })
+ );
replaceInnerBlocks(clientId, innerBlocks, false);
- }
+ };
const blockWrapperClasses = classnames(
- { [`qubely-block-${uniqueId}`]: typeof uniqueId !== 'undefined' },
- { [className]: typeof className !== 'undefined' }
- )
+ { [`qubely-block-${uniqueId}`]: typeof uniqueId !== "undefined" },
+ { [className]: typeof className !== "undefined" }
+ );
return (
-
-
-
- setAttributes({ tabStyle: val })}
+
+
+
+ setAttributes({ tabStyle: val })}
options={[
- { value: 'tabs', svg: icons.tab_tabs, label: __('Tabs') },
- { value: 'pills', svg: icons.tab_pills, label: __('Pills') },
- { ...(navType === 'text') && { value: 'underline', svg: icons.tab_underline, label: __('Underline') } }
+ { value: "tabs", svg: icons.tab_tabs, label: __("Tabs") },
+ { value: "pills", svg: icons.tab_pills, label: __("Pills") },
+ {
+ ...(navType === "text" && {
+ value: "underline",
+ svg: icons.tab_underline,
+ label: __("Underline"),
+ }),
+ },
]}
/>
setAttributes({ reverseContent: val, recreateStyles: !recreateStyles })} />
- setAttributes({ navAlignment: val })} disableJustify />
+
+ setAttributes({ reverseContent: val, recreateStyles: !recreateStyles })
+ }
+ />
+ setAttributes({ navAlignment: val })}
+ disableJustify
+ />
-
- {
- tabStyle !== 'underline' &&
+
+ {tabStyle !== "underline" && (
setAttributes({ navType: value, recreateStyles: !recreateStyles })}
+ onChange={(value) =>
+ setAttributes({ navType: value, recreateStyles: !recreateStyles })
+ }
/>
- }
- {
- navType === 'text' ?
-
- setAttributes({ navSize: value })} />
-
- {navSize == 'custom' &&
-
-
- }
+ )}
+ {navType === "text" ? (
+
+ setAttributes({ navSize: value })}
+ />
- {tabStyle == 'tabs' &&
-
- setAttributes({ navBorderRadiusTabs: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
- {tabStyle == 'pills' &&
-
- setAttributes({ navBorderRadiusPills: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
- {tabStyle == 'underline' &&
- setAttributes({ navUnderlineBorderWidth: value })} min={1} max={10} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
-
-
- setAttributes({ navColor: value })} />
- {tabStyle != 'underline' &&
-
- setAttributes({ navBg: value })} />
- setAttributes({ navBorder: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
+ {navSize == "custom" && (
+
+
- setAttributes({ navUnderlineBorderColor: value })} />
-
- }
-
-
- setAttributes({ navColorActive: value })} />
- {tabStyle != 'underline' &&
-
- setAttributes({ navBgActive: value })} />
- setAttributes({ navBorderActive: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
- {tabStyle == 'underline' &&
-
- setAttributes({ navUnderlineBorderColorActive: value })} />
-
+ value={navPaddingY}
+ onChange={(value) => setAttributes({ navPaddingY: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
-
- setAttributes({ typography: value })} disableLineHeight device={device} onDeviceChange={value => this.setState({ device: value })} />
-
-
- :
-
- setAttributes({ navLayout: val, recreateStyles: !recreateStyles })}
- options={[
- { value: 'one', svg: icons.infobox_1 },
- { value: 'two', svg: icons.infobox_2, },
- { value: 'three', svg: icons.infobox_4 },
- ]}
- />
- setAttributes({ navSpacing: value })} max={50} min={0} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ imageTypeNavSize: value })}
- unit={['px', 'em', '%']}
- max={100}
- min={0}
+ value={navPaddingX}
+ onChange={(value) => setAttributes({ navPaddingX: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+ {tabStyle == "tabs" && (
+
+ setAttributes({ navBorderRadiusTabs: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+ {tabStyle == "pills" && (
+
+ setAttributes({ navBorderRadiusPills: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+ {tabStyle == "underline" && (
+ setAttributes({ navUnderlineBorderWidth: value })}
+ min={1}
+ max={10}
+ unit={["px", "em", "%"]}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- setAttributes({ navImageTypeBorderRadius: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- {
- navLayout !== 'three' &&
-
- setAttributes({ navImageSize: value, recreateStyles: !recreateStyles })}
- />
- {navImageSize == 'custom' &&
-
-
- }
- setAttributes({ navImageBorderRadius: value })}
- min={0}
- max={100}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ navImageBorder: value })}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
-
+ )}
+
+
+ setAttributes({ navColor: value })}
+ />
+ {tabStyle != "underline" && (
+
+ setAttributes({ navBg: value })}
+ />
+ setAttributes({ navBorder: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+ {tabStyle == "underline" && (
+
+
+ setAttributes({ navUnderlineBorderColor: value })
+ }
+ />
+
+ )}
+
+
+ setAttributes({ navColorActive: value })}
+ />
+ {tabStyle != "underline" && (
+
+ setAttributes({ navBgActive: value })}
+ />
+
+ setAttributes({ navBorderActive: value })
+ }
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+ {tabStyle == "underline" && (
+
+
+ setAttributes({ navUnderlineBorderColorActive: value })
+ }
+ />
+
+ )}
+
+
+ setAttributes({ typography: value })}
+ disableLineHeight
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ ) : (
+
+
+ setAttributes({ navLayout: val, recreateStyles: !recreateStyles })
}
+ options={[
+ { value: "one", svg: icons.infobox_1 },
+ { value: "two", svg: icons.infobox_2 },
+ { value: "three", svg: icons.infobox_4 },
+ ]}
+ />
+ setAttributes({ navSpacing: value })}
+ max={50}
+ min={0}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ imageTypeNavSize: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ navImageTypeBorderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- setAttributes({ enableImageNavTitle: val })}
- />
- setAttributes({ enableImageNavDesciption: val })}
- />
- {
- (enableImageNavTitle || enableImageNavDesciption) &&
-
- setAttributes({ imageNavTitleAlignment: val })}
- />
- setAttributes({ imageNavTitleColor: value })}
- />
-
- setAttributes({ navImageGap: value })}
- unit={['px', 'em', '%']}
- max={300}
- min={0}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- {
- enableImageNavTitle &&
-
+
+ setAttributes({
+ navImageSize: value,
+ recreateStyles: !recreateStyles,
+ })
+ }
+ />
+ {navImageSize == "custom" && (
+
+
- }
-
-
- setAttributes({ imageTypeNavBG })}
+
+ )}
+ setAttributes({ navImageBorderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ navImageBorder: value })}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+ setAttributes({ enableImageNavTitle: val })}
+ />
+ setAttributes({ enableImageNavDesciption: val })}
+ />
+ {(enableImageNavTitle || enableImageNavDesciption) && (
+
+ setAttributes({ imageNavTitleAlignment: val })}
+ />
+ setAttributes({ imageNavTitleColor: value })}
+ />
+
+ setAttributes({ navImageGap: value })}
+ unit={["px", "em", "%"]}
+ max={300}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ {enableImageNavTitle && (
+
+ setAttributes({ navImageCaptionTypo: value })
+ }
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
-
-
- setAttributes({ imageTypeActiveNavBG })}
+ )}
+ {enableImageNavDesciption && (
+
+ setAttributes({ navImageDescriptionTypo: value })
+ }
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
-
-
-
- }
- {
- tabStyle !== 'underline' &&
- setAttributes({ navShadow: value })} />
- }
+ )}
+
+ )}
+
+
+ setAttributes({ imageTypeNavBG })}
+ />
+
+
+
+ setAttributes({ imageTypeActiveNavBG })
+ }
+ />
+
+
+
+ )}
+ {tabStyle !== "underline" && (
+
setAttributes({ navShadow: value })}
+ />
+ )}
- {
- navType === 'text' &&
-
-
+ {navType === "text" && (
+
this.updateTitles({ iconName: value }, activeTab - 1)} />
+ onChange={(value) => this.updateTitles({ iconName: value }, activeTab - 1)}
+ />
setAttributes({ iconPosition: value })} />
+ onChange={(value) => setAttributes({ iconPosition: value })}
+ />
setAttributes({ iconSize: value })}
- unit={['px', 'em', '%']}
+ unit={["px", "em", "%"]}
min={5}
max={48}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ iconGap: value })}
- unit={['px', 'em', '%']}
+ onChange={(value) => setAttributes({ iconGap: value })}
+ unit={["px", "em", "%"]}
min={0}
max={64}
responsive
device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
-
- {tabStyle == 'tabs' &&
+ )}
+
+ {tabStyle == "tabs" && (
- setAttributes({ bodyBg: value })} />
- setAttributes({ bodyPadding: value })} unit={['px', 'em', '%']} max={100} min={0} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ bodyBg: value })}
+ />
+ setAttributes({ bodyPadding: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
- {tabStyle == 'underline' &&
+ )}
+ {tabStyle == "underline" && (
- setAttributes({ bodySeparatorHeight: value })} min={0} max={5} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- {bodySeparatorHeight.md > 0 &&
- setAttributes({ bodySeparatorColor: value })} />
- }
+ setAttributes({ bodySeparatorHeight: value })}
+ min={0}
+ max={5}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ {bodySeparatorHeight.md > 0 && (
+ setAttributes({ bodySeparatorColor: value })}
+ />
+ )}
- }
- {tabStyle != 'tabs' &&
- setAttributes({ bodyTopSpacing: value })} unit={['px', 'em', '%']} max={100} min={0} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
+ )}
+ {tabStyle != "tabs" && (
+ setAttributes({ bodyTopSpacing: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- {tabStyle == 'tabs' &&
+ {tabStyle == "tabs" && (
- setAttributes({ bodyBorder: value })} unit={['px', 'em', '%']} max={100} min={0} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ bodyShadow: value })} />
- setAttributes({ bodyBorderRadius: value })} unit={['px', 'em', '%']} max={100} min={0} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ bodyBorder: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyShadow: value })}
+ />
+ setAttributes({ bodyBorderRadius: value })}
+ unit={["px", "em", "%"]}
+ max={100}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
-
- setAttributes({ autoSwithcing: val })} />
- {
- autoSwithcing &&
+
+ setAttributes({ autoSwithcing: val })}
+ />
+ {autoSwithcing && (
setAttributes({ delayType: value })}
+ onChange={(value) => setAttributes({ delayType: value })}
+ />
+ {delayType === "common" ? (
+ setAttributes({ defaultDelay })}
+ />
+ ) : (
+
+ this.updateTitles({ delay: value }, index)}
+ />
+ ))}
+
+ )}
+ setAttributes({ showProgressBar: val })}
/>
- {
- delayType === 'common' ?
- setAttributes({ defaultDelay })}
- />
- :
-
- this.updateTitles({ delay: value }, index)}
- />
- ))
- }
-
-
- }
- setAttributes({ showProgressBar: val })} />
-
- }
- {
- showProgressBar &&
+ )}
+ {showProgressBar && (
setAttributes({ progressbarPosition: value, recreateStyles: !recreateStyles })}
+ onChange={(value) =>
+ setAttributes({
+ progressbarPosition: value,
+ recreateStyles: !recreateStyles,
+ })
+ }
/>
setAttributes({ progressbarBottom: value })}
/>
- setAttributes({ progressBarBg: val })} />
+ setAttributes({ progressBarBg: val })}
+ />
setAttributes({ progressBarHeight: value })}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ progressBarSpacing: value })}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
setAttributes({ progressBarRadius: value })}
- onDeviceChange={value => this.setState({ device: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- }
+ )}
-
+
{animationSettings(uniqueId, animation, setAttributes)}
{interactionSettings(uniqueId, interaction, setAttributes)}
-
-
+
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
-
-
{this.renderTabTitles()}
-
+
addNewTab()}
>
@@ -905,50 +1120,44 @@ class Edit extends Component {
(
- ['qubely/tab',
- {
- id: tabIndex + 1,
- ...(tabIndex === 0 && { customClassName: 'qubely-active' })
- }
- ])
- )}
+ templateLock="all"
+ allowedBlocks={["qubely/tab"]}
+ template={Array(tabs)
+ .fill(0)
+ .map((_, tabIndex) => [
+ "qubely/tab",
+ {
+ id: tabIndex + 1,
+ ...(tabIndex === 0 && { customClassName: "qubely-active" }),
+ },
+ ])}
/>
-
-
- )
+
+ );
}
}
export default compose([
withSelect((select, ownProps) => {
const { clientId } = ownProps;
- const { getBlock } = select('core/block-editor');
+ const { getBlock } = select("core/block-editor");
return {
- block: getBlock(clientId)
+ block: getBlock(clientId),
};
}),
withDispatch((dispatch) => {
- const {
- getBlocks,
- insertBlock,
- removeBlock,
- replaceInnerBlocks,
- updateBlockAttributes
- } = dispatch('core/block-editor');
+ const { getBlocks, insertBlock, removeBlock, replaceInnerBlocks, updateBlockAttributes } =
+ dispatch("core/block-editor");
return {
getBlocks,
insertBlock,
removeBlock,
replaceInnerBlocks,
- updateBlockAttributes
+ updateBlockAttributes,
};
}),
- withCSSGenerator()
+ withCSSGenerator(),
])(Edit);
diff --git a/assets/reactjs/src/blocks/tabs/Save.js b/assets/reactjs/src/blocks/tabs/Save.js
index f3b64210..6413b130 100644
--- a/assets/reactjs/src/blocks/tabs/Save.js
+++ b/assets/reactjs/src/blocks/tabs/Save.js
@@ -1,129 +1,142 @@
-import classnames from 'classnames';
+import classnames from "classnames";
const { Fragment, Component } = wp.element;
const { InnerBlocks, RichText } = wp.blockEditor;
const {
- HelperFunction: {
- animationAttr,
- IsInteraction
- }
+ HelperFunction: { animationAttr, IsInteraction },
} = wp.qubelyComponents;
class Save extends Component {
+ render() {
+ const {
+ attributes: {
+ uniqueId,
+ className,
+ tabs,
+ navType,
+ autoSwithcing,
+ showProgressBar,
+ defaultDelay,
+ tabStyle,
+ tabTitles,
+ iconPosition,
+ navAlignment,
+ animation,
+ interaction,
+ navLayout,
+ enableImageNavTitle,
+ progressbarPosition,
+ imageNavTitleAlignment,
+ enableImageNavDesciption,
+ },
+ } = this.props;
- render() {
- const {
- attributes: {
- uniqueId,
- className,
- tabs,
- navType,
- autoSwithcing,
- showProgressBar,
- defaultDelay,
- tabStyle,
- tabTitles,
- iconPosition,
- navAlignment,
- animation,
- interaction,
- navLayout,
- enableImageNavTitle,
- progressbarPosition,
- imageNavTitleAlignment,
- enableImageNavDesciption,
- }
- } = this.props;
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
+ const renderTabTitles = () => {
+ return tabTitles.map((title, index) => (
+
+ {navType === "text" ? (
+
+
+ {title.iconName && (iconPosition == "top" || iconPosition == "left") && (
+
+
+ ) : (
+
+
+ {navLayout !== "three" && (
+
+ {typeof title.avatar !== "undefined" && title.avatar.url ? (
+
+
+ )}
+
+ )}
- const renderTabTitles = () => {
- return tabTitles.map((title, index) =>
-
- {
- navType === 'text' ?
-
-
- {title.iconName && (iconPosition == 'top' || iconPosition == 'left') && (
-
- :
-
-
- {
- navLayout !== 'three' &&
-
- {typeof title.avatar !== 'undefined' && title.avatar.url ?
-
- }
-
- }
+ {(enableImageNavTitle || enableImageNavDesciption) && (
+
+ {enableImageNavTitle && (
+
+ )}
+
+
- {
- enableImageNavTitle &&
-
- }
-
+ {autoSwithcing && showProgressBar && (
+
+ )}
+
+ ));
+ };
-
- }
-
- );
- }
-
- const blockWrapperClasses = classnames(
- { [`qubely-block-${uniqueId}`]: typeof uniqueId !== 'undefined' },
- { 'with-auto-swithing': autoSwithcing },
- { [className]: typeof className !== 'undefined' }
- )
- const blockClasses = classnames(
- 'qubely-block-tab',
- `${interactionClass}`,
- `qubely-tab-style-${tabStyle}`,
- { 'with-auto-swithing': autoSwithcing },
- )
-
- return (
-
-
-
- {renderTabTitles()}
-
-
-
-
-
- );
- }
+ return (
+
+
+
{renderTabTitles()}
+
+
+
+
+ );
+ }
}
-export default Save;
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/tabs/attributes.js b/assets/reactjs/src/blocks/tabs/attributes.js
index ba99c7db..4d6dee6a 100644
--- a/assets/reactjs/src/blocks/tabs/attributes.js
+++ b/assets/reactjs/src/blocks/tabs/attributes.js
@@ -1,807 +1,801 @@
const {
- gloalSettings: {
- globalAttributes
- }
-} = wp.qubelyComponents
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
const attributes = {
+ uniqueId: {
+ type: "string",
+ default: "",
+ },
+ ...globalAttributes, // Global Settings
+ spacer: {
+ type: "object",
+ default: {
+ spaceTop: {
+ md: "10",
+ unit: "px",
+ },
+ spaceBottom: {
+ md: "10",
+ unit: "px",
+ },
+ },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ reverseContent: {
+ type: "boolean",
+ default: false,
+ style: [
+ {
+ condition: [{ key: "reverseContent", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-block-tab{display: flex; flex-direction:column-reverse;}",
+ },
+ ],
+ },
+ autoSwithcing: {
+ type: "boolean",
+ default: false,
+ },
+ delayType: {
+ type: "string",
+ default: "common",
+ },
+ recreateStyles: {
+ type: "boolean",
+ default: true,
+ },
+ defaultDelay: {
+ type: "number",
+ default: 3,
+ },
+ showProgressBar: {
+ type: "boolean",
+ default: false,
+ },
+ progressBarBg: {
+ type: "object",
+ default: {
+ type: "color",
+ openColor: 1,
+ color: "#2184F9",
+ gradient: {
+ color1: "#EEEEEE",
+ color2: "#e5e5e5",
+ direction: 0,
+ start: 0,
+ stop: 100,
+ type: "linear",
+ },
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress",
+ },
+ ],
+ },
+ progressbarPosition: {
+ type: "string",
+ default: "bottom",
+ },
+ progressbarBottom: {
+ type: "string",
+ default: "0",
+ style: [
+ {
+ condition: [{ key: "progressbarPosition", relation: "==", value: "bottom" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {position:absolute;bottom:{{progressbarBottom}}px !important;}",
+ },
+ {
+ condition: [{ key: "progressbarPosition", relation: "==", value: "top" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {position:absolute;top:{{progressbarBottom}}px !important;}",
+ },
+ ],
+ },
+ progressBarHeight: {
+ type: "object",
+ default: {
+ md: "3",
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {height:{{progressBarHeight}};}",
+ },
+ ],
+ },
+ progressBarSpacing: {
+ type: "object",
+ default: {
+ md: "2",
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {margin-top:{{progressBarSpacing}};}",
+ },
+ ],
+ },
+ progressBarRadius: {
+ type: "object",
+ default: {
+ md: "2",
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {border-radius:{{progressBarRadius}};}",
+ },
+ ],
+ },
+ navType: {
+ type: "string",
+ default: "text",
+ },
+ navLayout: {
+ type: "string",
+ default: "one",
+ },
+ navImageSize: {
+ type: "string",
+ default: "96px",
+ style: [
+ {
+ condition: [{ key: "navImageSize", relation: "!=", value: "custom" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image , {{QUBELY}} .qubely-image-placeholder.qubely-tab-title-avatar{ display: inline-flex; width: {{navImageSize}}; height: {{navImageSize}}; }",
+ },
+ ],
+ },
+ imageTypeNavSize: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "global",
+ global: {
+ md: 20,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "navType", relation: "==", value: "image" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title",
+ },
+ ],
+ },
+ enableImage: {
+ type: "boolean",
+ default: true,
+ },
+ enableImageNavTitle: {
+ type: "boolean",
+ default: true,
+ },
+ enableImageNavDesciption: {
+ type: "boolean",
+ default: false,
+ },
+ imageNavTitleAlignment: {
+ type: "string",
+ default: "center",
+ style: [
+ {
+ condition: [
+ { key: "navType", relation: "==", value: "image" },
+ { key: "enableImageNavTitle", relation: "==", value: true },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description{text-align: {{imageNavTitleAlignment}}; }",
+ },
+ ],
+ },
+ imageNavTitleColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "navType", relation: "==", value: "image" },
+ { key: "enableImageNavTitle", relation: "==", value: true },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description {color:{{imageNavTitleColor}};}",
+ },
+ ],
+ },
+ imageTypeNavBG: {
+ type: "object",
+ default: {
+ color: "#e5e5e5",
+ gradient: {
+ color1: "#EEEEEE",
+ color2: "#e5e5e5",
+ direction: 0,
+ start: 0,
+ stop: 100,
+ type: "linear",
+ },
+ },
+ style: [
+ {
+ condition: [{ key: "navType", relation: "!=", value: "text" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item:not(.qubely-active) .qubely-tab-title",
+ },
+ ],
+ },
+ imageTypeActiveNavBG: {
+ type: "object",
+ default: {
+ color: "#e5e5e5",
+ openColor: 1,
+ type: "color",
+ gradient: {
+ color1: "#EEEEEE",
+ color2: "#e5e5e5",
+ direction: 0,
+ start: 0,
+ stop: 100,
+ type: "linear",
+ },
+ },
+ style: [
+ {
+ condition: [{ key: "navType", relation: "!=", value: "text" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title",
+ },
+ ],
+ },
- uniqueId: {
- type: 'string',
- default: ''
- },
- ...globalAttributes, // Global Settings
- spacer: {
- type: 'object',
- default: {
- spaceTop: {
- md: '10',
- unit: 'px'
- },
- spaceBottom: {
- md: '10',
- unit: 'px'
- }
- },
- style: [{ selector: '{{QUBELY}}' }]
- },
- reverseContent: {
- type: 'boolean',
- default: false,
- style: [
- {
- condition: [
- { key: 'reverseContent', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-tab{display: flex; flex-direction:column-reverse;}'
- }
- ]
- },
- autoSwithcing: {
- type: 'boolean',
- default: false,
- },
- delayType: {
- type: 'string',
- default: 'common',
- },
- recreateStyles: {
- type: 'boolean',
- default: true
- },
- defaultDelay: {
- type: 'number',
- default: 3,
- },
- showProgressBar: {
- type: 'boolean',
- default: false,
- },
- progressBarBg: {
- type: 'object',
- default: {
- type: 'color',
- openColor: 1,
- color: '#2184F9',
- gradient: {
- color1: '#EEEEEE',
- color2: '#e5e5e5',
- direction: 0,
- start: 0,
- stop: 100,
- type: 'linear',
- }
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress'
- }
- ]
- },
- progressbarPosition: {
- type: 'string',
- default: "bottom",
- },
- progressbarBottom: {
- type: 'string',
- default: "0",
- style: [
- {
- condition: [
- { key: 'progressbarPosition', relation: '==', value: 'bottom' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {position:absolute;bottom:{{progressbarBottom}}px !important;}'
- },
- {
- condition: [
- { key: 'progressbarPosition', relation: '==', value: 'top' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {position:absolute;top:{{progressbarBottom}}px !important;}'
- }
- ]
- },
- progressBarHeight: {
- type: 'object',
- default: {
- md: "3",
- unit: "px",
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {height:{{progressBarHeight}};}'
- }
- ]
- },
- progressBarSpacing: {
- type: 'object',
- default: {
- md: "2",
- unit: "px",
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {margin-top:{{progressBarSpacing}};}'
- }
- ]
- },
- progressBarRadius: {
- type: 'object',
- default: {
- md: "2",
- unit: "px",
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item.qubely-active .progress {border-radius:{{progressBarRadius}};}'
- }
- ]
- },
- navType: {
- type: 'string',
- default: 'text'
- },
- navLayout: {
- type: 'string',
- default: 'one'
- },
- navImageSize: {
- type: 'string',
- default: '96px',
- style: [
- {
- condition: [
- { key: 'navImageSize', relation: '!=', value: 'custom' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image , {{QUBELY}} .qubely-image-placeholder.qubely-tab-title-avatar{ display: inline-flex; width: {{navImageSize}}; height: {{navImageSize}}; }'
- }
- ]
- },
- imageTypeNavSize: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'global',
- global: {
- md: 20
- },
- unit: 'px',
- },
- style: [
- {
- condition: [
- { key: 'navType', relation: '==', value: 'image' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title'
- }
- ]
- },
- enableImage: {
- type: 'boolean',
- default: true,
- },
- enableImageNavTitle: {
- type: 'boolean',
- default: true,
- },
- enableImageNavDesciption: {
- type: 'boolean',
- default: false,
- },
- imageNavTitleAlignment: {
- type: 'string',
- default: 'center',
- style: [
- {
- condition: [
- { key: 'navType', relation: '==', value: 'image' },
- { key: 'enableImageNavTitle', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description{text-align: {{imageNavTitleAlignment}}; }'
- }
- ]
- },
- imageNavTitleColor: {
- type: 'string',
- default: '',
- style: [
- {
- condition: [
- { key: 'navType', relation: '==', value: 'image' },
- { key: 'enableImageNavTitle', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description {color:{{imageNavTitleColor}};}'
- }
- ]
- },
- imageTypeNavBG: {
- type: 'object',
- default: {
- color: '#e5e5e5',
- gradient: {
- color1: '#EEEEEE',
- color2: '#e5e5e5',
- direction: 0,
- start: 0,
- stop: 100,
- type: 'linear',
- }
- },
- style: [
- {
- condition: [
- { key: 'navType', relation: '!=', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item:not(.qubely-active) .qubely-tab-title'
- }
- ]
- },
- imageTypeActiveNavBG: {
- type: 'object',
- default: {
- color: '#e5e5e5',
- openColor: 1,
- type: "color",
- gradient: {
- color1: '#EEEEEE',
- color2: '#e5e5e5',
- direction: 0,
- start: 0,
- stop: 100,
- type: 'linear',
- }
- },
- style: [
- {
- condition: [
- { key: 'navType', relation: '!=', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title'
- }
- ]
- },
+ navImageGap: {
+ type: "object",
+ default: {
+ md: "10",
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "navType", relation: "!=", value: "text" },
+ { key: "navLayout", relation: "==", value: "one" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-image, {{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-image-placeholder {margin-bottom:{{navImageGap}};}",
+ },
+ {
+ condition: [
+ { key: "navType", relation: "!=", value: "text" },
+ { key: "navLayout", relation: "==", value: "two" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-image, {{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-image-placeholder {margin-right:{{navImageGap}};}",
+ },
+ ],
+ },
+ navImageCaptionTypo: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [
+ { key: "navType", relation: "!=", value: "text" },
+ { key: "enableImageNavTitle", relation: "==", value: true },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description .image-type-nav-title",
+ },
+ ],
+ },
+ navImageDescriptionTypo: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [
+ { key: "navType", relation: "!=", value: "text" },
+ { key: "enableImageNavDesciption", relation: "==", value: true },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description .image-type-nav-description",
+ },
+ ],
+ },
+ navImageWidth: {
+ type: "object",
+ default: {
+ md: 120,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "navImageSize", relation: "==", value: "custom" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image {width: {{navImageWidth}}; font-size: {{navImageWidth}};}",
+ },
+ ],
+ },
+ navImageHeight: {
+ type: "object",
+ default: {
+ md: 120,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "navImageSize", relation: "==", value: "custom" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image {height: {{navImageHeight}};}",
+ },
+ ],
+ },
+ navImageBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ global: {
+ md: 5,
+ },
+ unit: "%",
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image " }],
+ },
+ navImageBorder: {
+ type: "object",
+ default: {
+ color: "#7d8485",
+ global: {
+ md: "1",
+ },
+ type: "solid",
+ unit: "px",
+ widthType: "global",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image ",
+ },
+ ],
+ },
- navImageGap: {
- type: 'object',
- default: {
- md: "10",
- unit: "px"
- },
- style: [
- {
- condition: [
- { key: 'navType', relation: '!=', value: 'text' },
- { key: 'navLayout', relation: '==', value: 'one' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-image, {{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-image-placeholder {margin-bottom:{{navImageGap}};}'
- },
- {
- condition: [
- { key: 'navType', relation: '!=', value: 'text' },
- { key: 'navLayout', relation: '==', value: 'two' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-image, {{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-image-placeholder {margin-right:{{navImageGap}};}'
- }
- ]
- },
- navImageCaptionTypo: {
- type: 'object',
- default: {},
- style: [
- {
- condition: [
- { key: 'navType', relation: '!=', value: 'text' },
- { key: 'enableImageNavTitle', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description .image-type-nav-title'
- }
- ]
- },
- navImageDescriptionTypo: {
- type: 'object',
- default: {},
- style: [
- {
- condition: [
- { key: 'navType', relation: '!=', value: 'text' },
- { key: 'enableImageNavDesciption', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .description-type-tab .qubely-tab-description .image-type-nav-description'
- }
- ]
- },
- navImageWidth: {
- type: 'object',
- default: {
- md: 120,
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'navImageSize', relation: '==', value: 'custom' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image {width: {{navImageWidth}}; font-size: {{navImageWidth}};}'
- }]
- },
- navImageHeight: {
- type: 'object',
- default: {
- md: 120,
- unit: 'px'
- },
- style: [{
- condition: [{ key: 'navImageSize', relation: '==', value: 'custom' }],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image {height: {{navImageHeight}};}'
- }]
- },
- navImageBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
- global: {
- md: 5
- },
- unit: '%'
- },
- style: [
- { selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image ' }
- ]
- },
- navImageBorder: {
- type: 'object',
- default: {
- color: "#7d8485",
- global: {
- md: "1"
- },
- type: "solid",
- unit: "px",
- widthType: "global",
- },
- style: [{
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-item .qubely-tab-image '
- }]
- },
+ navAlignment: {
+ type: "string",
+ default: "left",
+ },
+ navShadow: {
+ type: "object",
+ default: {
+ horizontal: 2,
+ vertical: 2,
+ blur: 3,
+ spread: "0",
+ },
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "!=", value: "underline" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title",
+ },
+ ],
+ },
+ tabs: {
+ type: "number",
+ default: 3,
+ },
+ tabStyle: {
+ type: "string",
+ default: "pills",
+ },
- navAlignment: {
- type: 'string',
- default: 'left'
- },
- navShadow: {
- type: 'object',
- default: {
- horizontal: 2,
- vertical: 2,
- blur: 3,
- spread: '0'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '!=', value: 'underline' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title'
- }
- ]
- },
- tabs: {
- type: 'number',
- default: 3
- },
- tabStyle: {
- type: 'string',
- default: 'pills'
- },
+ tabTitles: {
+ type: "array",
+ default: [{ title: "Tab 1" }, { title: "Tab 2" }, { title: "Tab 3" }],
+ },
- tabTitles: {
- type: 'array',
- default: [
- { title: 'Tab 1' },
- { title: 'Tab 2' },
- { title: 'Tab 3' }
- ]
- },
+ typography: {
+ type: "object",
+ default: {},
+ style: [{ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title" }],
+ },
- typography: {
- type: 'object',
- default: {},
- style: [
- { selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title' }
- ]
- },
+ //icons
+ iconPosition: {
+ type: "string",
+ default: "right",
+ },
+ iconSize: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-tab-icon {font-size: {{iconSize}}}",
+ },
+ ],
+ },
+ iconGap: {
+ type: "object",
+ default: {
+ md: 8,
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-tab-title.qubely-has-icon-left .qubely-tab-icon { margin-right: {{iconGap}}; } {{QUBELY}} .qubely-tab-title.qubely-has-icon-right .qubely-tab-icon { margin-left: {{iconGap}};} {{QUBELY}} .qubely-tab-title.qubely-has-icon-top .qubely-tab-icon { margin-bottom: {{iconGap}};}",
+ },
+ ],
+ },
- //icons
- iconPosition: {
- type: 'string',
- default: 'right'
- },
- iconSize: {
- type: 'object',
- default: {},
- style: [
- {
- selector: '{{QUBELY}} .qubely-tab-icon {font-size: {{iconSize}}}'
- }]
- },
- iconGap: {
- type: 'object',
- default: {
- md: 8,
- unit: 'px'
- },
- style: [{ selector: '{{QUBELY}} .qubely-tab-title.qubely-has-icon-left .qubely-tab-icon { margin-right: {{iconGap}}; } {{QUBELY}} .qubely-tab-title.qubely-has-icon-right .qubely-tab-icon { margin-left: {{iconGap}};} {{QUBELY}} .qubely-tab-title.qubely-has-icon-top .qubely-tab-icon { margin-bottom: {{iconGap}};}' }]
- },
+ // Size
+ navSize: {
+ type: "string",
+ default: "6px 15px",
+ style: [
+ {
+ condition: [
+ { key: "navSize", relation: "!=", value: "custom" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {padding: {{navSize}};}",
+ },
+ ],
+ },
+ navPaddingY: {
+ type: "object",
+ default: {
+ md: 10,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "navSize", relation: "==", value: "custom" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {padding-top: {{navPaddingY}}; padding-bottom: {{navPaddingY}};}",
+ },
+ ],
+ },
+ navPaddingX: {
+ type: "object",
+ default: {
+ md: 10,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "navSize", relation: "==", value: "custom" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {padding-left: {{navPaddingX}}; padding-right: {{navPaddingX}};}",
+ },
+ ],
+ },
- // Size
- navSize: {
- type: 'string',
- default: '6px 15px',
- style: [
- {
- condition: [
- { key: 'navSize', relation: '!=', value: 'custom' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {padding: {{navSize}};}'
- }
- ]
- },
- navPaddingY: {
- type: 'object',
- default: {
- md: 10,
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'navSize', relation: '==', value: 'custom' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {padding-top: {{navPaddingY}}; padding-bottom: {{navPaddingY}};}'
- }
- ]
- },
- navPaddingX: {
- type: 'object',
- default: {
- md: 10,
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'navSize', relation: '==', value: 'custom' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {padding-left: {{navPaddingX}}; padding-right: {{navPaddingX}};}'
- }
- ]
- },
+ // Spacing
+ navSpacing: {
+ type: "object",
+ default: {
+ md: 10,
+ unit: "px",
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav {margin-left: calc(-{{navSpacing}}/2); margin-right: calc(-{{navSpacing}}/2);} {{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item {margin-left: calc({{navSpacing}}/2); margin-right: calc({{navSpacing}}/2);}",
+ },
+ ],
+ },
- // Spacing
- navSpacing: {
- type: 'object',
- default: {
- md: 10,
- unit: 'px'
- },
- style: [
- { selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav {margin-left: calc(-{{navSpacing}}/2); margin-right: calc(-{{navSpacing}}/2);} {{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item {margin-left: calc({{navSpacing}}/2); margin-right: calc({{navSpacing}}/2);}' }
- ]
- },
+ //Color
+ navColor: {
+ type: "string",
+ default: "#999999",
+ style: [
+ {
+ condition: [{ key: "navType", relation: "==", value: "text" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title { color:{{navColor}}; }",
+ },
+ ],
+ },
+ navBg: {
+ type: "string",
+ default: "#F5F5F5",
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "!=", value: "underline" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {background-color: {{navBg}};}",
+ },
+ ],
+ },
+ navColorActive: {
+ type: "string",
+ default: "var(--qubely-color-1)",
+ style: [
+ {
+ condition: [{ key: "navType", relation: "==", value: "text" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title { color:{{navColorActive}}; }",
+ },
+ ],
+ },
+ navBgActive: {
+ type: "string",
+ default: "#e5e5e5",
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "!=", value: "underline" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title {background-color : {{navBgActive}};} {{QUBELY}} .qubely-block-tab.qubely-tab-style-tabs .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title:after {background-color : {{navBgActive}};}",
+ },
+ ],
+ },
- //Color
- navColor: {
- type: 'string',
- default: '#999999',
- style: [
- {
- condition: [
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title { color:{{navColor}}; }'
- }
- ]
- },
- navBg: {
- type: 'string',
- default: '#F5F5F5',
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '!=', value: 'underline' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {background-color: {{navBg}};}'
- }
- ]
- },
- navColorActive: {
- type: 'string',
- default: 'var(--qubely-color-1)',
- style: [
- {
- condition: [
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title { color:{{navColorActive}}; }'
- }
- ]
- },
- navBgActive: {
- type: 'string',
- default: '#e5e5e5',
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '!=', value: 'underline' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title {background-color : {{navBgActive}};} {{QUBELY}} .qubely-block-tab.qubely-tab-style-tabs .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title:after {background-color : {{navBgActive}};}'
- }
- ]
- },
+ // Nav Border
+ navBorder: {
+ type: "object",
+ default: {
+ widthType: "global",
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "!=", value: "underline" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title",
+ },
+ ],
+ },
+ navBorderActive: {
+ type: "object",
+ default: {
+ widthType: "global",
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "!=", value: "underline" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title",
+ },
+ ],
+ },
- // Nav Border
- navBorder: {
- type: 'object',
- default: {
- widthType: 'global',
- unit: 'px',
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '!=', value: 'underline' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title'
- }
- ]
- },
- navBorderActive: {
- type: 'object',
- default: {
- widthType: 'global',
- unit: 'px',
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '!=', value: 'underline' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title'
- }
- ]
- },
+ // Underline Border
+ navUnderlineBorderWidth: {
+ type: "object",
+ default: {
+ md: 3,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "==", value: "underline" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {border-bottom: {{navUnderlineBorderWidth}} solid transparent;}",
+ },
+ ],
+ },
+ navUnderlineBorderColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "==", value: "underline" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title { border-bottom-color:{{navUnderlineBorderColor}}; }",
+ },
+ ],
+ },
+ navUnderlineBorderColorActive: {
+ type: "string",
+ default: "var(--qubely-color-1)",
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "==", value: "underline" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title { border-bottom-color:{{navUnderlineBorderColorActive}}; }",
+ },
+ ],
+ },
- // Underline Border
- navUnderlineBorderWidth: {
- type: 'object',
- default: {
- md: 3,
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'underline' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title {border-bottom: {{navUnderlineBorderWidth}} solid transparent;}'
- }
- ]
- },
- navUnderlineBorderColor: {
- type: 'string',
- default: '',
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'underline' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title { border-bottom-color:{{navUnderlineBorderColor}}; }'
- }
- ]
- },
- navUnderlineBorderColorActive: {
- type: 'string',
- default: 'var(--qubely-color-1)',
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'underline' },
- { key: 'navType', relation: '==', value: 'text' },
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item.qubely-active .qubely-tab-title { border-bottom-color:{{navUnderlineBorderColorActive}}; }'
- }
- ]
- },
+ // Radius
+ navBorderRadiusTabs: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "custom",
+ custom: {
+ md: "4 4 0 0",
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "==", value: "tabs" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab.qubely-tab-style-tabs .qubely-tab-nav .qubely-tab-item .qubely-tab-title",
+ },
+ ],
+ },
- // Radius
- navBorderRadiusTabs: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'custom',
- custom: {
- md: '4 4 0 0',
- },
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'tabs' },
- { key: 'navType', relation: '==', value: 'text' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab.qubely-tab-style-tabs .qubely-tab-nav .qubely-tab-item .qubely-tab-title'
- }
- ]
- },
+ navBorderRadiusPills: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ global: {
+ md: 4,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [
+ { key: "tabStyle", relation: "==", value: "pills" },
+ { key: "navType", relation: "==", value: "text" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-tab.qubely-tab-style-pills .qubely-tab-nav .qubely-tab-item .qubely-tab-title",
+ },
+ ],
+ },
+ navImageTypeBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ global: {
+ md: 4,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "navType", relation: "!=", value: "text" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title",
+ },
+ ],
+ },
- navBorderRadiusPills: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
- global: {
- md: 4,
- },
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'pills' },
- { key: 'navType', relation: '==', value: 'text' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab.qubely-tab-style-pills .qubely-tab-nav .qubely-tab-item .qubely-tab-title'
- }
- ]
- },
- navImageTypeBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
- global: {
- md: 4,
- },
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'navType', relation: '!=', value: 'text' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-nav .qubely-tab-item .qubely-tab-title'
- }
- ]
- },
+ // Body
+ bodyBg: {
+ type: "string",
+ default: "#F5F5F5",
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "==", value: "tabs" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-body {background-color: {{bodyBg}};}",
+ },
+ ],
+ },
+ bodyPadding: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "global",
+ global: {
+ md: 20,
+ },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "==", value: "tabs" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-body",
+ },
+ ],
+ },
+ bodyBorder: {
+ type: "object",
+ default: {
+ borderType: "global",
+ },
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "==", value: "tabs" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-body",
+ },
+ ],
+ },
+ bodyShadow: {
+ type: "object",
+ default: {
+ horizontal: 2,
+ vertical: 2,
+ blur: 3,
+ spread: "0",
+ },
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "==", value: "tabs" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-body",
+ },
+ ],
+ },
+ bodyBorderRadius: {
+ type: "object",
+ default: {
+ radiusType: "global",
+ },
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "==", value: "tabs" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-body",
+ },
+ ],
+ },
- // Body
- bodyBg: {
- type: 'string', default: '#F5F5F5',
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'tabs' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body {background-color: {{bodyBg}};}'
- }
- ]
- },
- bodyPadding: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'global',
- global: {
- md: 20
- },
- unit: 'px',
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'tabs' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body'
- }
- ]
- },
- bodyBorder: {
- type: 'object',
- default: {
- borderType: 'global'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'tabs' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body'
- }
- ]
- },
- bodyShadow: {
- type: 'object',
- default: {
- horizontal: 2,
- vertical: 2,
- blur: 3,
- spread: '0'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'tabs' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body'
- }
- ]
- },
- bodyBorderRadius: {
- type: 'object',
- default: {
- radiusType: 'global'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'tabs' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body'
- }
- ]
- },
-
- bodySeparatorHeight: {
- type: 'object',
- default: {
- md: 1,
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'underline' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body {border-top: {{bodySeparatorHeight}} solid transparent;}'
- }
- ]
- },
- bodySeparatorColor: {
- type: 'string',
- default: '#e5e5e5',
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '==', value: 'underline' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body { border-top-color:{{bodySeparatorColor}}; }'
- }
- ]
- },
- bodyTopSpacing: {
- type: 'object',
- default: {
- md: 20,
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'tabStyle', relation: '!=', value: 'tabs' }
- ],
- selector: '{{QUBELY}} .qubely-block-tab .qubely-tab-body {padding-top: {{bodyTopSpacing}};}'
- }
- ]
- }
-}
-export default attributes;
\ No newline at end of file
+ bodySeparatorHeight: {
+ type: "object",
+ default: {
+ md: 1,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "==", value: "underline" }],
+ selector:
+ "{{QUBELY}} .qubely-block-tab .qubely-tab-body {border-top: {{bodySeparatorHeight}} solid transparent;}",
+ },
+ ],
+ },
+ bodySeparatorColor: {
+ type: "string",
+ default: "#e5e5e5",
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "==", value: "underline" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-body { border-top-color:{{bodySeparatorColor}}; }",
+ },
+ ],
+ },
+ bodyTopSpacing: {
+ type: "object",
+ default: {
+ md: 20,
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "tabStyle", relation: "!=", value: "tabs" }],
+ selector: "{{QUBELY}} .qubely-block-tab .qubely-tab-body {padding-top: {{bodyTopSpacing}};}",
+ },
+ ],
+ },
+};
+export default attributes;
diff --git a/assets/reactjs/src/blocks/tabs/index.js b/assets/reactjs/src/blocks/tabs/index.js
index 225ea9c1..efa0d52d 100644
--- a/assets/reactjs/src/blocks/tabs/index.js
+++ b/assets/reactjs/src/blocks/tabs/index.js
@@ -1,57 +1,46 @@
-import './style.scss';
-import Save from './Save';
-import Edit from './Edit';
-import attributes from './attributes';
+import "./style.scss";
+import Save from "./Save";
+import Edit from "./Edit";
+import attributes from "./attributes";
const { Component } = wp.element;
const { InnerBlocks } = wp.blockEditor;
const {
- HelperFunction: {
- animationAttr,
- IsInteraction
- }
+ HelperFunction: { animationAttr, IsInteraction },
} = wp.qubelyComponents;
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
-registerBlockType('qubely/tabs', {
- title: __('Tabs'),
- category: 'qubely',
- icon:
,
- description: __('Showcase features in beautiful pre-designed tabs with Qubely Tabs.'),
- supports: {
- html: false,
- className: false,
- align: [
- 'full',
- 'wide',
- 'center'
- ],
- },
- example: {
- attributes: {
- tabTitles: [
- { title: "Tab 1" },
- { title: "Tab 2" },
- { title: "Tab 3" }
- ]
- },
- innerBlocks: [
- {
- name: 'qubely/tab',
- innerBlocks: [
- {
- name: 'qubely/heading',
- attributes: {
- content: 'Qubely - A Full-fledged Gutenberg Builder',
- alignment: { md: "center" }
- },
- },
- ],
- }
- ],
- },
- attributes,
- edit: Edit,
- save: Save,
-})
\ No newline at end of file
+registerBlockType("qubely/tabs", {
+ title: __("Tabs"),
+ category: "qubely",
+ icon:
,
+ description: __("Showcase features in beautiful pre-designed tabs with Qubely Tabs."),
+ supports: {
+ html: false,
+ className: false,
+ align: ["full", "wide", "center"],
+ },
+ example: {
+ attributes: {
+ tabTitles: [{ title: "Tab 1" }, { title: "Tab 2" }, { title: "Tab 3" }],
+ },
+ innerBlocks: [
+ {
+ name: "qubely/tab",
+ innerBlocks: [
+ {
+ name: "qubely/heading",
+ attributes: {
+ content: "Qubely - A Full-fledged Gutenberg Builder",
+ alignment: { md: "center" },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ attributes,
+ edit: Edit,
+ save: Save,
+});
diff --git a/assets/reactjs/src/blocks/tabs/style.scss b/assets/reactjs/src/blocks/tabs/style.scss
index 3a295924..8c65f6c7 100644
--- a/assets/reactjs/src/blocks/tabs/style.scss
+++ b/assets/reactjs/src/blocks/tabs/style.scss
@@ -1,278 +1,276 @@
.qubely-block-tab {
- .qubely-tab-nav {
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
+ .qubely-tab-nav {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
- .qubely-tab-item {
- display: block;
- text-align: center;
- position: relative;
+ .qubely-tab-item {
+ display: block;
+ text-align: center;
+ position: relative;
- .qubely-tab-title {
- cursor: pointer;
- display: block;
- display: flex;
- align-items: center;
- transition: color 400ms, background-color 400ms,
- border-color 400ms;
- position: relative;
- justify-content: center;
- &.qubely-has-icon-top {
- flex-direction: column;
- }
- }
+ .qubely-tab-title {
+ cursor: pointer;
+ display: block;
+ display: flex;
+ align-items: center;
+ transition: color 400ms, background-color 400ms, border-color 400ms;
+ position: relative;
+ justify-content: center;
+ &.qubely-has-icon-top {
+ flex-direction: column;
+ }
+ }
- &:hover {
- .qubely-action-tab-remove {
- display: block;
- }
- }
- .description-type-tab {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- &.nav-layout-one {
- flex-direction: column;
- &.align-left {
- align-items: flex-start;
- }
- &.align-center {
- align-items: center;
- }
- &.align-right {
- align-items: flex-end;
- }
- }
- .qubely-tab-description {
- width: 100%;
- }
- }
- .progress {
- position: absolute;
- &.bottom {
- bottom: 0;
- }
- &.top {
- top: 0;
- }
- }
- }
+ &:hover {
+ .qubely-action-tab-remove {
+ display: block;
+ }
+ }
+ .description-type-tab {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ &.nav-layout-one {
+ flex-direction: column;
+ &.align-left {
+ align-items: flex-start;
+ }
+ &.align-center {
+ align-items: center;
+ }
+ &.align-right {
+ align-items: flex-end;
+ }
+ }
+ .qubely-tab-description {
+ width: 100%;
+ }
+ }
+ .progress {
+ position: absolute;
+ &.bottom {
+ bottom: 0;
+ }
+ &.top {
+ top: 0;
+ }
+ }
+ }
- &.qubely-alignment-left {
- justify-content: flex-start;
- }
+ &.qubely-alignment-left {
+ justify-content: flex-start;
+ }
- &.qubely-alignment-center {
- justify-content: center;
- }
+ &.qubely-alignment-center {
+ justify-content: center;
+ }
- &.qubely-alignment-right {
- justify-content: flex-end;
- }
+ &.qubely-alignment-right {
+ justify-content: flex-end;
+ }
- &.qubely-alignment-justify {
- .qubely-tab-item {
- -ms-flex: 1 1 auto;
- flex: 1 1 auto;
- }
- }
+ &.qubely-alignment-justify {
+ .qubely-tab-item {
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ }
+ }
- .qubely-action-tab-remove {
- display: none;
- font-size: 12px;
- width: 18px;
- height: 18px;
- line-height: 20px;
- text-align: center;
- background: rgba(0, 0, 0, 0.8);
- color: #fff;
- position: absolute;
- top: -9px;
- right: -9px;
- border-radius: 10px;
- z-index: 1;
- cursor: pointer;
- }
- }
- .qubely-tab-body {
- display: flex;
- }
+ .qubely-action-tab-remove {
+ display: none;
+ font-size: 12px;
+ width: 18px;
+ height: 18px;
+ line-height: 20px;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.8);
+ color: #fff;
+ position: absolute;
+ top: -9px;
+ right: -9px;
+ border-radius: 10px;
+ z-index: 1;
+ cursor: pointer;
+ }
+ }
+ .qubely-tab-body {
+ display: flex;
+ }
- &.qubely-tab-style-tabs {
- .qubely-tab-nav {
- .qubely-tab-item.qubely-active {
- .qubely-tab-title {
- &:after {
- content: " ";
- position: absolute;
- left: 0;
- width: 100%;
- transition: color 400ms, background-color 400ms,
- border-color 400ms;
- }
- }
- }
- }
- }
+ &.qubely-tab-style-tabs {
+ .qubely-tab-nav {
+ .qubely-tab-item.qubely-active {
+ .qubely-tab-title {
+ &:after {
+ content: " ";
+ position: absolute;
+ left: 0;
+ width: 100%;
+ transition: color 400ms, background-color 400ms, border-color 400ms;
+ }
+ }
+ }
+ }
+ }
- .qubely-add-new-tab {
- cursor: pointer;
- display: inline-flex;
- align-items: center;
- margin-left: 10px;
- padding: 0px 15px;
- border-radius: 3px;
- color: #666;
- transition: color 300ms;
- &:hover {
- color: #0085ba;
- border-color: #0085ba;
- }
- }
- .wp-block-qubely-tab.qubely-tab-content {
- position: absolute;
- visibility: hidden;
- opacity: 0;
- transition: opacity 400ms ease-in;
- &.qubely-active {
- position: static;
- visibility: visible;
- opacity: 1;
- }
- }
- &.qubely-tab-style-pills,
- &.qubely-tab-style-tabs {
- .qubely-tab-item {
- margin-bottom: 10px;
- }
- }
+ .qubely-add-new-tab {
+ cursor: pointer;
+ display: inline-flex;
+ align-items: center;
+ margin-left: 10px;
+ padding: 0px 15px;
+ border-radius: 3px;
+ color: #666;
+ transition: color 300ms;
+ &:hover {
+ color: #0085ba;
+ border-color: #0085ba;
+ }
+ }
+ .wp-block-qubely-tab.qubely-tab-content {
+ position: absolute;
+ visibility: hidden;
+ opacity: 0;
+ transition: opacity 400ms ease-in;
+ &.qubely-active {
+ position: static;
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ &.qubely-tab-style-pills,
+ &.qubely-tab-style-tabs {
+ .qubely-tab-item {
+ margin-bottom: 10px;
+ }
+ }
- .wp-block.qubely-tab-content {
- opacity: 0;
- position: absolute;
- visibility: hidden;
- transition: opacity 400ms;
- .qubely-tabs-innerblock {
- .block-list-appender {
- text-align: center;
- .block-editor-inserter {
- display: inline-block;
- min-width: 300px;
- }
- }
- }
- &.qubely-active {
- position: relative;
- opacity: 1;
- visibility: visible;
- transition: opacity 400ms;
- }
- }
- &.qubely-active-tab-1 {
- .wp-block.qubely-tab-content[data-tab="1"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-2 {
- .wp-block.qubely-tab-content[data-tab="2"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-3 {
- .wp-block.qubely-tab-content[data-tab="3"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-4 {
- .wp-block.qubely-tab-content[data-tab="4"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-5 {
- .wp-block.qubely-tab-content[data-tab="5"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-6 {
- .wp-block.qubely-tab-content[data-tab="6"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-7 {
- .wp-block.qubely-tab-content[data-tab="7"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-8 {
- .wp-block.qubely-tab-content[data-tab="8"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-9 {
- .wp-block.qubely-tab-content[data-tab="9"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-10 {
- .wp-block.qubely-tab-content[data-tab="10"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-11 {
- .wp-block.qubely-tab-content[data-tab="11"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-12 {
- .wp-block.qubely-tab-content[data-tab="12"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-13 {
- .wp-block.qubely-tab-content[data-tab="13"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-14 {
- .wp-block.qubely-tab-content[data-tab="14"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
- &.qubely-active-tab-15 {
- .wp-block.qubely-tab-content[data-tab="15"] {
- opacity: 1;
- position: relative;
- visibility: visible;
- }
- }
+ .wp-block.qubely-tab-content {
+ opacity: 0;
+ position: absolute;
+ visibility: hidden;
+ transition: opacity 400ms;
+ .qubely-tabs-innerblock {
+ .block-list-appender {
+ text-align: center;
+ .block-editor-inserter {
+ display: inline-block;
+ min-width: 300px;
+ }
+ }
+ }
+ &.qubely-active {
+ position: relative;
+ opacity: 1;
+ visibility: visible;
+ transition: opacity 400ms;
+ }
+ }
+ &.qubely-active-tab-1 {
+ .wp-block.qubely-tab-content[data-tab="1"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-2 {
+ .wp-block.qubely-tab-content[data-tab="2"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-3 {
+ .wp-block.qubely-tab-content[data-tab="3"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-4 {
+ .wp-block.qubely-tab-content[data-tab="4"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-5 {
+ .wp-block.qubely-tab-content[data-tab="5"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-6 {
+ .wp-block.qubely-tab-content[data-tab="6"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-7 {
+ .wp-block.qubely-tab-content[data-tab="7"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-8 {
+ .wp-block.qubely-tab-content[data-tab="8"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-9 {
+ .wp-block.qubely-tab-content[data-tab="9"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-10 {
+ .wp-block.qubely-tab-content[data-tab="10"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-11 {
+ .wp-block.qubely-tab-content[data-tab="11"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-12 {
+ .wp-block.qubely-tab-content[data-tab="12"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-13 {
+ .wp-block.qubely-tab-content[data-tab="13"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-14 {
+ .wp-block.qubely-tab-content[data-tab="14"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
+ &.qubely-active-tab-15 {
+ .wp-block.qubely-tab-content[data-tab="15"] {
+ opacity: 1;
+ position: relative;
+ visibility: visible;
+ }
+ }
}
diff --git a/assets/reactjs/src/blocks/tabs/tab/Edit.js b/assets/reactjs/src/blocks/tabs/tab/Edit.js
index bcb1a093..776e35d5 100644
--- a/assets/reactjs/src/blocks/tabs/tab/Edit.js
+++ b/assets/reactjs/src/blocks/tabs/tab/Edit.js
@@ -1,19 +1,16 @@
-const { Component } = wp.element
-const { InnerBlocks } = wp.blockEditor
+const { Component } = wp.element;
+const { InnerBlocks } = wp.blockEditor;
class Edit extends Component {
-
- render() {
- return (
-
- (
-
- )
- }
+ render() {
+ return (
+
+
+ );
+ }
}
-export default Edit
\ No newline at end of file
+export default Edit;
diff --git a/assets/reactjs/src/blocks/tabs/tab/Save.js b/assets/reactjs/src/blocks/tabs/tab/Save.js
index 9e4c596b..ccb17609 100644
--- a/assets/reactjs/src/blocks/tabs/tab/Save.js
+++ b/assets/reactjs/src/blocks/tabs/tab/Save.js
@@ -1,23 +1,18 @@
-import classnames from 'classnames';
+import classnames from "classnames";
const { Component } = wp.element;
const { InnerBlocks } = wp.blockEditor;
class Save extends Component {
- render() {
- const {
- attributes: {
- id
- }
- } = this.props;
+ render() {
+ const {
+ attributes: { id },
+ } = this.props;
- const wrapperClasses = classnames(
- 'qubely-tab-content',
- { ['qubely-active']: id == 1 }
- )
- return (
-
-
- );
- }
+ const wrapperClasses = classnames("qubely-tab-content", { ["qubely-active"]: id == 1 });
+ return (
+
+
+ );
+ }
}
-export default Save;
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/tabs/tab/index.js b/assets/reactjs/src/blocks/tabs/tab/index.js
index 511ea2d5..dfbe17c3 100644
--- a/assets/reactjs/src/blocks/tabs/tab/index.js
+++ b/assets/reactjs/src/blocks/tabs/tab/index.js
@@ -1,39 +1,38 @@
-
-import Save from './Save';
-import Edit from './Edit';
+import Save from "./Save";
+import Edit from "./Edit";
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
-registerBlockType('qubely/tab', {
- title: __('Tab'),
- category: 'qubely',
- parent: ['qubely/tabs'],
- supports: {
- html: false,
- inserter: false,
- reusable: false,
- },
- icon:
,
- attributes: {
- uniqueId: {
- type: 'string',
- default: ''
- },
- id: {
- type: 'number',
- default: 1,
- },
- customClassName: {
- type: 'string',
- default: ''
- }
- },
- getEditWrapperProps(attributes) {
- return {
- 'data-tab': attributes.id,
- className: `wp-block editor-block-list__block block-editor-block-list__block qubely-tab-content`
- }
- },
- edit: Edit,
- save: Save
-})
\ No newline at end of file
+registerBlockType("qubely/tab", {
+ title: __("Tab"),
+ category: "qubely",
+ parent: ["qubely/tabs"],
+ supports: {
+ html: false,
+ inserter: false,
+ reusable: false,
+ },
+ icon:
,
+ attributes: {
+ uniqueId: {
+ type: "string",
+ default: "",
+ },
+ id: {
+ type: "number",
+ default: 1,
+ },
+ customClassName: {
+ type: "string",
+ default: "",
+ },
+ },
+ getEditWrapperProps(attributes) {
+ return {
+ "data-tab": attributes.id,
+ className: `wp-block editor-block-list__block block-editor-block-list__block qubely-tab-content`,
+ };
+ },
+ edit: Edit,
+ save: Save,
+});
diff --git a/assets/reactjs/src/blocks/team/Edit.js b/assets/reactjs/src/blocks/team/Edit.js
index 060c158e..bc670469 100644
--- a/assets/reactjs/src/blocks/team/Edit.js
+++ b/assets/reactjs/src/blocks/team/Edit.js
@@ -1,649 +1,1079 @@
-import icons from '../../helpers/icons';
-import classnames from 'classnames';
-const { __ } = wp.i18n
+import icons from "../../helpers/icons";
+import classnames from "classnames";
+const { __ } = wp.i18n;
const { Fragment, Component, createRef } = wp.element;
const { PanelBody, TextControl, Toolbar } = wp.components;
const { RichText, InspectorControls, BlockControls } = wp.blockEditor;
const {
- Media,
- Tabs,
- Tab,
- Range,
- Separator,
- RadioAdvanced,
- Typography,
- Toggle,
- Styles,
- Alignment,
- ColorAdvanced,
- Color,
- Border,
- ButtonGroup,
- BoxShadow,
- BorderRadius,
- Padding,
- Url,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- Inline: {
- InlineToolbar
- },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- withCSSGenerator,
- InspectorTabs,
- InspectorTab
+ Media,
+ Tabs,
+ Tab,
+ Range,
+ Separator,
+ RadioAdvanced,
+ Typography,
+ Toggle,
+ Styles,
+ Alignment,
+ ColorAdvanced,
+ Color,
+ Border,
+ ButtonGroup,
+ BoxShadow,
+ BorderRadius,
+ Padding,
+ Url,
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ Inline: { InlineToolbar },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
} = wp.qubelyComponents;
class Edit extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ selector: true,
+ spacer: true,
+ openPanelSetting: "",
+ };
+ this.qubelyContextMenu = createRef();
+ }
- constructor(props) {
- super(props);
- this.state = {
- device: 'md',
- selector: true,
- spacer: true,
- openPanelSetting: ''
- };
- this.qubelyContextMenu = createRef();
- }
+ handlePanelOpenings = (panelName) => {
+ this.setState({ ...this.state, openPanelSetting: panelName });
+ };
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6);
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
- handlePanelOpenings = (panelName) => {
- this.setState({ ...this.state, openPanelSetting: panelName })
- }
- render() {
- const {
- uniqueId,
- className,
- layout,
- recreateStyles,
- alignment,
- alignmentLayout3,
- name,
- nameTypo,
- nameColor,
- nameSpacing,
+ render() {
+ const {
+ uniqueId,
+ className,
+ layout,
+ recreateStyles,
+ alignment,
+ alignmentLayout3,
+ name,
+ nameTypo,
+ nameColor,
+ nameSpacing,
- enableDesignation,
- designation,
- designationTypo,
- designationColor,
- designationSpacing,
+ enableDesignation,
+ designation,
+ designationTypo,
+ designationColor,
+ designationSpacing,
- imageType,
- image,
- image2x,
- externalImageUrl,
- imageWidth,
- imageSpacing,
- imageBorder,
- imageBorderRadius,
- imageBoxShadow,
+ imageType,
+ image,
+ image2x,
+ externalImageUrl,
+ imageWidth,
+ imageSpacing,
+ imageBorder,
+ imageBorderRadius,
+ imageBoxShadow,
- enableDescription,
- description,
- descriptionTypo,
- descriptionColor,
- descriptionSpacing,
+ enableDescription,
+ description,
+ descriptionTypo,
+ descriptionColor,
+ descriptionSpacing,
- phone,
- email,
- website,
- infoSpacing,
- useInfoIcon,
- infoIconSize,
- infoIconSizeCustom,
- infoIconSpacing,
- infoIconColor,
- infoTypo,
- infoColor,
+ phone,
+ email,
+ website,
+ infoSpacing,
+ useInfoIcon,
+ infoIconSize,
+ infoIconSizeCustom,
+ infoIconSpacing,
+ infoIconColor,
+ infoTypo,
+ infoColor,
- showSociallinks,
- facebook,
- twitter,
- instagram,
- linkedin,
- youtube,
- github,
- flickr,
- pinterest,
- dribbble,
- behance,
- iconSize,
- iconSizeCustom,
- iconGutter,
- iconSpacing,
- iconStyle,
- iconUseDefaultStyle,
- iconBorderRadius,
- iconColor,
- iconBackground,
- iconBorder,
- iconColorHover,
- iconBackgroundHover,
- iconBorderColorHover,
+ showSociallinks,
+ facebook,
+ twitter,
+ instagram,
+ linkedin,
+ youtube,
+ github,
+ flickr,
+ pinterest,
+ dribbble,
+ behance,
+ iconSize,
+ iconSizeCustom,
+ iconGutter,
+ iconSpacing,
+ iconStyle,
+ iconUseDefaultStyle,
+ iconBorderRadius,
+ iconColor,
+ iconBackground,
+ iconBorder,
+ iconColorHover,
+ iconBackgroundHover,
+ iconBorderColorHover,
- overlayHeight,
- overlayBg,
- overlayPaddingX,
- overlayPaddingY,
- contentPosition,
- contentAlignment,
- contentBg,
- contentPadding,
- contentBorder,
- overlayAlignment,
+ overlayHeight,
+ overlayBg,
+ overlayPaddingX,
+ overlayPaddingY,
+ contentPosition,
+ contentAlignment,
+ contentBg,
+ contentPadding,
+ contentBorder,
+ overlayAlignment,
- bodyBg,
- bodyPadding,
- bodyBorder,
- bodyBorderRadius,
- bodyBoxShadow,
+ bodyBg,
+ bodyPadding,
+ bodyBorder,
+ bodyBorderRadius,
+ bodyBoxShadow,
- //animation
- animation,
- globalZindex,
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- hideTablet,
- hideMobile,
- globalCss,
- interaction
- } = this.props.attributes
+ //animation
+ animation,
+ globalZindex,
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ interaction,
+ } = this.props.attributes;
- const { clientId, attributes, setAttributes, isSelected } = this.props
- const { openPanelSetting, device } = this.state
+ const { clientId, attributes, setAttributes, isSelected } = this.props;
+ const { openPanelSetting, device } = this.state;
- const wrapperClasses = classnames(
- className,
- { [`qubely-block-${uniqueId}`]: uniqueId },
- { ['right-alignment']: alignmentLayout3 === 'right' }
- );
- return (
-
-
-
-
-
- setAttributes({ layout: val })}
- />
- this.setState({ device: value })
- }
- )}
- value={layout === 3 ? alignmentLayout3 : alignment}
- onChange={val => setAttributes(layout === 3 ? { alignmentLayout3: val, recreateStyles: !recreateStyles } : { alignment: val })}
- />
-
+ const wrapperClasses = classnames(
+ className,
+ { [`qubely-block-${uniqueId}`]: uniqueId },
+ { ["right-alignment"]: alignmentLayout3 === "right" }
+ );
+ return (
+
+
+
+
+
+ setAttributes({ layout: val })}
+ />
+ this.setState({ device: value }),
+ })}
+ value={layout === 3 ? alignmentLayout3 : alignment}
+ onChange={(val) =>
+ setAttributes(
+ layout === 3
+ ? { alignmentLayout3: val, recreateStyles: !recreateStyles }
+ : { alignment: val }
+ )
+ }
+ />
+
- this.handlePanelOpenings(openPanelSetting !== 'Image' ? 'Image' : '')}>
+ this.handlePanelOpenings(openPanelSetting !== "Image" ? "Image" : "")}
+ >
+ setAttributes({ imageType: value })}
+ />
+ {imageType === "local" ? (
+
+ setAttributes({ image: val })}
+ />
+ setAttributes({ image2x: val })}
+ />
+
+ ) : (
+ setAttributes({ externalImageUrl: newUrl })}
+ />
+ )}
- setAttributes({ imageType: value })}
- />
- {
- imageType === 'local' ?
-
- setAttributes({ image: val })}
- />
- setAttributes({ image2x: val })}
- />
-
- :
- setAttributes({ externalImageUrl: newUrl })} />
- }
+ {layout != 2 && (
+ setAttributes({ imageWidth: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ {(layout == 1 || layout == 3) && (
+ setAttributes({ imageSpacing: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ imageBorder: value })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ this.setState({ device: value })}
+ onChange={(val) => setAttributes({ imageBorderRadius: val })}
+ />
+ setAttributes({ imageBoxShadow: value })}
+ />
+
- {layout != 2 &&
- setAttributes({ imageWidth: val })}
- onDeviceChange={value => this.setState({ device: value })}
- />
- }
- {
- (layout == 1 || layout == 3) &&
- setAttributes({ imageSpacing: val })}
- onDeviceChange={value => this.setState({ device: value })}
- />
- }
- setAttributes({ imageBorder: value })}
- onDeviceChange={value => this.setState({ device: value })}
- />
- this.setState({ device: value })}
- onChange={val => setAttributes({ imageBorderRadius: val })}
- />
- setAttributes({ imageBoxShadow: value })}
- />
-
+ this.handlePanelOpenings(openPanelSetting !== "Name" ? "Name" : "")}
+ >
+ setAttributes({ nameTypo: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ nameColor: value })}
+ />
+ setAttributes({ nameSpacing: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
- this.handlePanelOpenings(openPanelSetting !== 'Name' ? 'Name' : '')}>
- setAttributes({ nameTypo: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ nameColor: value })} />
- setAttributes({ nameSpacing: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
+
+ this.handlePanelOpenings(openPanelSetting !== "Designation" ? "Designation" : "")
+ }
+ >
+ setAttributes({ enableDesignation: val })}
+ />
+ {enableDesignation == 1 && (
+
+ setAttributes({ designationTypo: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ designationColor: value })}
+ />
+ setAttributes({ designationSpacing: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
- this.handlePanelOpenings(openPanelSetting !== 'Designation' ? 'Designation' : '')}>
- setAttributes({ enableDesignation: val })} />
- {enableDesignation == 1 &&
-
- setAttributes({ designationTypo: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ designationColor: value })} />
- setAttributes({ designationSpacing: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
+
+ this.handlePanelOpenings(openPanelSetting !== "Description" ? "Description" : "")
+ }
+ >
+ setAttributes({ enableDescription: val })}
+ />
+ {enableDescription == 1 && (
+
+ setAttributes({ descriptionTypo: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ descriptionColor: value })}
+ />
+ setAttributes({ descriptionSpacing: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
- this.handlePanelOpenings(openPanelSetting !== 'Description' ? 'Description' : '')}>
- setAttributes({ enableDescription: val })} />
- {enableDescription == 1 &&
-
- setAttributes({ descriptionTypo: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ descriptionColor: value })} />
- setAttributes({ descriptionSpacing: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
+
+ this.handlePanelOpenings(openPanelSetting !== "Information" ? "Information" : "")
+ }
+ >
+ setAttributes({ phone: val })}
+ />
+ setAttributes({ email: val })}
+ />
+ setAttributes({ website: val })}
+ />
+ {(phone || email || website) && (
+
+ setAttributes({ infoTypo: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ infoColor: value })}
+ />
+ setAttributes({ infoSpacing: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ useInfoIcon: val })}
+ />
+ {useInfoIcon == 1 && (
+
+ setAttributes({ infoIconSize: value })}
+ options={[
+ { label: "S", value: "14px", title: "Small" },
+ { label: "M", value: "18px", title: "Medium" },
+ { label: "L", value: "24px", title: "Large" },
+ { icon: "fas fa-cog", value: "custom", title: "Custom" },
+ ]}
+ />
+ {infoIconSize == "custom" && (
+ setAttributes({ infoIconSizeCustom: val })}
+ min={12}
+ max={300}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
+ setAttributes({ infoIconColor: value })}
+ />
+ setAttributes({ infoIconSpacing: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+ )}
+
- this.handlePanelOpenings(openPanelSetting !== 'Information' ? 'Information' : '')}>
- setAttributes({ phone: val })} />
- setAttributes({ email: val })} />
- setAttributes({ website: val })} />
- {(phone || email || website) &&
-
- setAttributes({ infoTypo: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ infoColor: value })} />
- setAttributes({ infoSpacing: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ useInfoIcon: val })} />
- {useInfoIcon == 1 &&
-
- setAttributes({ infoIconSize: value })}
- options={[
- { label: 'S', value: '14px', title: 'Small' },
- { label: 'M', value: '18px', title: 'Medium' },
- { label: 'L', value: '24px', title: 'Large' },
- { icon: 'fas fa-cog', value: 'custom', title: 'Custom' }
- ]}
- />
- {infoIconSize == 'custom' &&
- setAttributes({ infoIconSizeCustom: val })} min={12} max={300} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
- setAttributes({ infoIconColor: value })} />
- setAttributes({ infoIconSpacing: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
- }
-
+ this.handlePanelOpenings(openPanelSetting !== "Social" ? "Social" : "")}
+ >
+ setAttributes({ showSociallinks: val })}
+ />
+ {showSociallinks && (
+
+ setAttributes({ facebook: val })}
+ />
+ setAttributes({ twitter: val })}
+ />
+ setAttributes({ instagram: val })}
+ />
+ setAttributes({ linkedin: val })}
+ />
+ setAttributes({ youtube: val })}
+ />
+ setAttributes({ github: val })}
+ />
+ setAttributes({ flickr: val })}
+ />
+ setAttributes({ pinterest: val })}
+ />
+ setAttributes({ dribbble: val })}
+ />
+ setAttributes({ behance: val })}
+ />
+ setAttributes({ iconStyle: val })}
+ options={[
+ { value: "fill", svg: icons.social_fill, label: __("Fill") },
+ { value: "normal", svg: icons.social_normal, label: __("Normal") },
+ ]}
+ />
+ setAttributes({ iconSize: value })}
+ options={[
+ { label: "S", value: "14px", title: "Small" },
+ { label: "M", value: "18px", title: "Medium" },
+ { label: "L", value: "24px", title: "Large" },
+ { icon: "fas fa-cog", value: "custom", title: "Custom" },
+ ]}
+ />
+ {iconSize == "custom" && (
+ setAttributes({ iconSizeCustom: val })}
+ min={12}
+ max={300}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- this.handlePanelOpenings(openPanelSetting !== 'Social' ? 'Social' : '')}>
- setAttributes({ showSociallinks: val })} />
- {
- showSociallinks &&
-
- setAttributes({ facebook: val })} />
- setAttributes({ twitter: val })} />
- setAttributes({ instagram: val })} />
- setAttributes({ linkedin: val })} />
- setAttributes({ youtube: val })} />
- setAttributes({ github: val })} />
- setAttributes({ flickr: val })} />
- setAttributes({ pinterest: val })} />
- setAttributes({ dribbble: val })} />
- setAttributes({ behance: val })} />
- setAttributes({ iconStyle: val })}
- options={[
- { value: 'fill', svg: icons.social_fill, label: __('Fill') },
- { value: 'normal', svg: icons.social_normal, label: __('Normal') },
- ]}
- />
- setAttributes({ iconSize: value })}
- options={[
- { label: 'S', value: '14px', title: 'Small' },
- { label: 'M', value: '18px', title: 'Medium' },
- { label: 'L', value: '24px', title: 'Large' },
- { icon: 'fas fa-cog', value: 'custom', title: 'Custom' }
- ]}
- />
- {iconSize == 'custom' &&
- setAttributes({ iconSizeCustom: val })} min={12} max={300} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- }
+ {iconStyle == "fill" && (
+ setAttributes({ iconBorderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ )}
- {iconStyle == 'fill' &&
- setAttributes({ iconBorderRadius: value })}
- min={0}
- max={100} unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- }
+ setAttributes({ iconGutter: val })}
+ min={0}
+ max={40}
+ unit={["px", "em"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ iconSpacing: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- setAttributes({ iconGutter: val })} min={0} max={40} unit={['px', 'em']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ iconSpacing: val })} min={0} max={60} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ iconUseDefaultStyle: val })}
+ />
- setAttributes({ iconUseDefaultStyle: val })} />
+ {!iconUseDefaultStyle && (
+
+
+ setAttributes({ iconColor: value })}
+ />
+ {iconStyle == "fill" && (
+
+
+ setAttributes({ iconBackground: value })
+ }
+ />
+
+ setAttributes({ iconBorder: value })
+ }
+ />
+
+ )}
+
+
+ setAttributes({ iconColorHover: value })}
+ />
+ {iconStyle == "fill" && (
+
+
+ setAttributes({ iconBackgroundHover: value })
+ }
+ />
+
+ setAttributes({ iconBorderColorHover: value })
+ }
+ />
+
+ )}
+
+
+ )}
+
+ )}
+
- {!iconUseDefaultStyle &&
-
-
- setAttributes({ iconColor: value })} />
- {iconStyle == 'fill' &&
-
- setAttributes({ iconBackground: value })} />
- setAttributes({ iconBorder: value })} />
-
- }
-
-
- setAttributes({ iconColorHover: value })} />
- {iconStyle == 'fill' &&
-
- setAttributes({ iconBackgroundHover: value })} />
- setAttributes({ iconBorderColorHover: value })} />
-
- }
-
-
- }
-
- }
-
+ {layout == 2 && (
+
+
+ setAttributes({ overlayHeight: value })}
+ options={[
+ { label: "Auto", value: "auto", title: "Auto" },
+ { label: "100%", value: "fit", title: "100%" },
+ ]}
+ />
+ {overlayHeight == "fit" && (
+ setAttributes({ overlayAlignment: value })}
+ options={[
+ { label: "Top", value: "flex-start", title: "Top" },
+ { label: "Middle", value: "center", title: "Middle" },
+ { label: "Bottom", value: "flex-end", title: "Bottom" },
+ ]}
+ />
+ )}
+ setAttributes({ overlayBg: value })}
+ />
+
+
+ )}
- {layout == 2 &&
-
-
- setAttributes({ overlayHeight: value })}
- options={[
- { label: 'Auto', value: 'auto', title: 'Auto' },
- { label: '100%', value: 'fit', title: '100%' }
- ]}
- />
- {overlayHeight == 'fit' &&
- setAttributes({ overlayAlignment: value })}
- options={[
- { label: 'Top', value: 'flex-start', title: 'Top' },
- { label: 'Middle', value: 'center', title: 'Middle' },
- { label: 'Bottom', value: 'flex-end', title: 'Bottom' },
- ]}
- />
- }
- setAttributes({ overlayBg: value })} />
-
-
- }
+ {layout != 2 && (
+
+
+ {layout == 3 && (
+
+ setAttributes({ contentPosition: value })}
+ options={[
+ { label: "Left", value: "left", title: "Left" },
+ { label: "Right", value: "right", title: "Right" },
+ ]}
+ />
+ setAttributes({ contentAlignment: val })}
+ disableJustify
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+ setAttributes({ contentBg: value })}
+ />
+ setAttributes({ contentPadding: val })}
+ min={0}
+ max={200}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ contentBorder: val })}
+ />
+
+
+ )}
- {layout != 2 &&
-
-
- {
- layout == 3 &&
-
- setAttributes({ contentPosition: value })}
- options={[
- { label: 'Left', value: 'left', title: 'Left' },
- { label: 'Right', value: 'right', title: 'Right' }
- ]}
- />
- setAttributes({ contentAlignment: val })} disableJustify responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
- setAttributes({ contentBg: value })} />
- setAttributes({ contentPadding: val })} min={0} max={200} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ contentBorder: val })} />
-
-
- }
+
+ setAttributes({ bodyBg: value })}
+ />
+ setAttributes({ bodyPadding: val })}
+ min={0}
+ max={200}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyBorder: value })}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyBorderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bodyBoxShadow: value })}
+ />
+
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
+
+
+
+
-
- setAttributes({ bodyBg: value })} />
- setAttributes({ bodyPadding: val })} min={0} max={200} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ bodyBorder: value })} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ bodyBorderRadius: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ bodyBoxShadow: value })} />
-
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
-
-
-
-
-
-
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- >
-
this.handlePanelOpenings('Image')}>
- {imageType === 'local' && image.url != undefined ?
-
- :
- (imageType === 'external' && externalImageUrl.url != undefined) ?
-
- :
-
- }
-
-
-
-
this.handlePanelOpenings('Name')}>
- setAttributes({ name: value })}
- value={name} />
-
- {enableDesignation == 1 &&
-
this.handlePanelOpenings('Designation')}>
- setAttributes({ designation: value })}
- value={designation} />
-
- }
- {enableDescription == 1 &&
-
this.handlePanelOpenings('Description')}>
- setAttributes({ description: value })}
- value={description} />
-
- }
- {(phone || email || website) &&
-
this.handlePanelOpenings('Information')}>
- {phone &&
-
- {useInfoIcon &&
- {phone}
-
- }
- {email &&
-
- {useInfoIcon &&
- {email}
-
- }
- {website &&
-
- }
-
- }
- {showSociallinks && (facebook || twitter || instagram || linkedin || youtube || github || flickr || pinterest || dribbble || behance) &&
-
this.handlePanelOpenings('Social')}>
- {facebook &&
-
- }
- {twitter &&
-
- }
- {instagram &&
-
- }
- {linkedin &&
-
- }
- {youtube &&
-
- }
- {github &&
-
- }
- {flickr &&
-
- }
- {pinterest &&
-
- }
- {dribbble &&
-
- }
- {behance &&
-
- }
-
- }
-
-
-
-
-
-
- )
- }
+
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ >
+
this.handlePanelOpenings("Image")}>
+ {imageType === "local" && image.url != undefined ? (
+
+ ) : imageType === "external" && externalImageUrl.url != undefined ? (
+
+ ) : (
+
+
+ )}
+
+
+
+
this.handlePanelOpenings("Name")}>
+ setAttributes({ name: value })}
+ value={name}
+ />
+
+ {enableDesignation == 1 && (
+
this.handlePanelOpenings("Designation")}
+ >
+ setAttributes({ designation: value })}
+ value={designation}
+ />
+
+ )}
+ {enableDescription == 1 && (
+
this.handlePanelOpenings("Description")}>
+ setAttributes({ description: value })}
+ value={description}
+ />
+
+ )}
+ {(phone || email || website) && (
+
this.handlePanelOpenings("Information")}
+ >
+ {phone && (
+
+ {useInfoIcon && (
+ {phone}
+
+ )}
+ {email && (
+
+ {useInfoIcon && (
+ {email}
+
+ )}
+ {website && (
+
+ )}
+
+ )}
+ {showSociallinks &&
+ (facebook ||
+ twitter ||
+ instagram ||
+ linkedin ||
+ youtube ||
+ github ||
+ flickr ||
+ pinterest ||
+ dribbble ||
+ behance) && (
+
this.handlePanelOpenings("Social")}
+ >
+ {facebook && (
+
+
+ )}
+ {twitter && (
+
+
+ )}
+ {instagram && (
+
+
+ )}
+ {linkedin && (
+
+
+ )}
+ {youtube && (
+
+
+ )}
+ {github && (
+
+
+ )}
+ {flickr && (
+
+
+ )}
+ {pinterest && (
+
+
+ )}
+ {dribbble && (
+
+
+ )}
+ {behance && (
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/team/Save.js b/assets/reactjs/src/blocks/team/Save.js
index c5105e87..aa61f0c8 100644
--- a/assets/reactjs/src/blocks/team/Save.js
+++ b/assets/reactjs/src/blocks/team/Save.js
@@ -1,108 +1,248 @@
-import classnames from 'classnames';
+import classnames from "classnames";
const { Component } = wp.element;
const { __ } = wp.i18n;
-const { RichText } = wp.blockEditor
-const { HelperFunction: { animationAttr, IsInteraction } } = wp.qubelyComponents;
+const { RichText } = wp.blockEditor;
+const {
+ HelperFunction: { animationAttr, IsInteraction },
+} = wp.qubelyComponents;
class Save extends Component {
render() {
- const { uniqueId, layout, imageType, alignmentLayout3, image, image2x, externalImageUrl, name, designation, description, useInfoIcon, phone, email, website, showSociallinks, facebook, twitter, instagram, linkedin, youtube, github, flickr, pinterest, dribbble, behance, iconStyle, iconUseDefaultStyle, enableDesignation, enableDescription, animation, interaction } = this.props.attributes
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
+ const {
+ uniqueId,
+ layout,
+ imageType,
+ alignmentLayout3,
+ image,
+ image2x,
+ externalImageUrl,
+ name,
+ designation,
+ description,
+ useInfoIcon,
+ phone,
+ email,
+ website,
+ showSociallinks,
+ facebook,
+ twitter,
+ instagram,
+ linkedin,
+ youtube,
+ github,
+ flickr,
+ pinterest,
+ dribbble,
+ behance,
+ iconStyle,
+ iconUseDefaultStyle,
+ enableDesignation,
+ enableDescription,
+ animation,
+ interaction,
+ } = this.props.attributes;
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
const wrapperClasses = classnames(
{ [`qubely-block-${uniqueId}`]: uniqueId },
- { ['right-alignment']: alignmentLayout3 === 'right' }
+ { ["right-alignment"]: alignmentLayout3 === "right" }
);
return (
- {(imageType === 'local' && image.url != undefined) ?
-
- :
- (imageType === 'external' && externalImageUrl.url != undefined) ?
-
- :
-
- }
+ {imageType === "local" && image.url != undefined ? (
+
+ ) : imageType === "external" && externalImageUrl.url != undefined ? (
+
+ ) : (
+
+
+ )}
-
- {enableDesignation == 1 &&
+
+ {enableDesignation == 1 && (
-
- }
- {enableDescription == 1 &&
-
- }
- {(phone || email || website) &&
+ )}
+ {enableDescription == 1 && (
+
+ )}
+ {(phone || email || website) && (
- {phone &&
+ {phone && (
- {useInfoIcon &&
- {phone}
- }
- {email &&
+ )}
+ {email && (
- {useInfoIcon &&
- {email}
- }
- {website &&
+ )}
+ {website && (
- }
+ )}
- }
- {showSociallinks && (facebook || twitter || instagram || linkedin || youtube || github || flickr || pinterest || dribbble || behance) &&
-
- {facebook &&
-
- }
- {twitter &&
-
- }
- {instagram &&
-
- }
- {linkedin &&
-
- }
- {youtube &&
-
- }
- {github &&
-
- }
- {flickr &&
-
- }
- {pinterest &&
-
- }
- {dribbble &&
-
- }
- {behance &&
-
- }
-
- }
+ )}
+ {showSociallinks &&
+ (facebook ||
+ twitter ||
+ instagram ||
+ linkedin ||
+ youtube ||
+ github ||
+ flickr ||
+ pinterest ||
+ dribbble ||
+ behance) && (
+
+ {facebook && (
+
+
+ )}
+ {twitter && (
+
+
+ )}
+ {instagram && (
+
+
+ )}
+ {linkedin && (
+
+
+ )}
+ {youtube && (
+
+
+ )}
+ {github && (
+
+
+ )}
+ {flickr && (
+
+
+ )}
+ {pinterest && (
+
+
+ )}
+ {dribbble && (
+
+
+ )}
+ {behance && (
+
+
+ )}
+
+ )}
- )
+ );
}
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/team/index.js b/assets/reactjs/src/blocks/team/index.js
index dc856bc1..6ace07cd 100644
--- a/assets/reactjs/src/blocks/team/index.js
+++ b/assets/reactjs/src/blocks/team/index.js
@@ -1,618 +1,657 @@
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save';
-const { __ } = wp.i18n
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-registerBlockType('qubely/team', {
- title: __('Team'),
- description: 'Display team member with social profiles.',
- icon:
,
- category: 'qubely',
- supports: {
- align: ['center', 'wide', 'full'],
- },
- keywords: [__('Team'), __('profile')],
- example: {
- attributes: {
- contentBg: '',
- image: { url: 'https://qubely.io/wp-content/uploads/qubely-assets/demo/team1.jpg' },
- },
- },
- attributes: {
- uniqueId: { type: 'string', default: '' },
- // Global
- ...globalAttributes,
- layout: { type: 'number', default: 1 },
- recreateStyles: {
- type: 'boolean',
- default: true
- },
- alignment: {
- type: 'object',
- default: {
- md: 'center'
- },
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 3 }
- ],
- selector: '{{QUBELY}} .qubely-block-team {text-align: {{alignment}};}'
- }
+registerBlockType("qubely/team", {
+ title: __("Team"),
+ description: "Display team member with social profiles.",
+ icon: (
+
+ ),
+ category: "qubely",
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ keywords: [__("Team"), __("profile")],
+ example: {
+ attributes: {
+ contentBg: "",
+ image: { url: "https://qubely.io/wp-content/uploads/qubely-assets/demo/team1.jpg" },
+ },
+ },
+ attributes: {
+ uniqueId: { type: "string", default: "" },
+ // Global
+ ...globalAttributes,
+ layout: { type: "number", default: 1 },
+ recreateStyles: {
+ type: "boolean",
+ default: true,
+ },
+ alignment: {
+ type: "object",
+ default: {
+ md: "center",
+ },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "!=", value: 3 }],
+ selector: "{{QUBELY}} .qubely-block-team {text-align: {{alignment}};}",
+ },
+ ],
+ },
+ alignmentLayout3: {
+ type: "string",
+ default: "left",
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 3 }],
+ selector:
+ "{{QUBELY}}.right-alignment .qubely-block-team{flex-direction:row-reverse} {{QUBELY}} .qubely-block-team .qubely-team-content {text-align: {{alignmentLayout3}};}",
+ },
+ ],
+ },
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
- ]
- },
- alignmentLayout3: {
- type: 'string',
- default: 'left',
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 3 }
- ],
- selector: '{{QUBELY}}.right-alignment .qubely-block-team{flex-direction:row-reverse} {{QUBELY}} .qubely-block-team .qubely-team-content {text-align: {{alignmentLayout3}};}'
- }
- ]
- },
- spacer: { type: 'object', default: { spaceTop: { md: '10', unit: "px" }, spaceBottom: { md: '10', unit: "px" } }, style: [{ selector: '{{QUBELY}}' }] },
+ // Image
+ imageType: {
+ type: "string",
+ default: "local",
+ },
+ image: { type: "object", default: {} },
+ image2x: { type: "object", default: {} },
+ externalImageUrl: {
+ type: "object",
+ default: {},
+ },
+ imageWidth: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 1 }],
+ selector:
+ "{{QUBELY}} .qubely-team-image-wrapper {width: {{imageWidth}};} {{QUBELY}} .qubely-team-image-wrapper img {width: 100%;}",
+ },
+ {
+ condition: [{ key: "layout", relation: "==", value: 3 }],
+ selector:
+ "{{QUBELY}} .qubely-block-team.qubely-team-layout-3 .qubely-team-image-wrapper {flex: 0 0 {{imageWidth}}; max-width: {{imageWidth}}} {{QUBELY}} .qubely-team-image-wrapper img {width: 100%;}",
+ },
+ ],
+ },
- // Image
- imageType: {
- type: 'string',
- default: 'local'
- },
- image: { type: 'object', default: {} },
- image2x: { type: 'object', default: {} },
- externalImageUrl: {
- type: 'object',
- default: {}
- },
- imageWidth: {
- type: 'object', default: {},
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 1 },
- ],
- selector: '{{QUBELY}} .qubely-team-image-wrapper {width: {{imageWidth}};} {{QUBELY}} .qubely-team-image-wrapper img {width: 100%;}'
- },
- {
- condition: [
- { key: 'layout', relation: '==', value: 3 },
- ],
- selector: '{{QUBELY}} .qubely-block-team.qubely-team-layout-3 .qubely-team-image-wrapper {flex: 0 0 {{imageWidth}}; max-width: {{imageWidth}}} {{QUBELY}} .qubely-team-image-wrapper img {width: 100%;}'
- }
- ]
- },
+ imageSpacing: {
+ type: "object",
+ default: { md: 20, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-image-wrapper {margin-bottom: {{imageSpacing}};}",
+ },
+ {
+ condition: [
+ { key: "layout", relation: "==", value: 3 },
+ { key: "alignmentLayout3", relation: "==", value: "left" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-image-wrapper {margin-right: {{imageSpacing}};}",
+ },
+ {
+ condition: [
+ { key: "layout", relation: "==", value: 3 },
+ { key: "alignmentLayout3", relation: "==", value: "right" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-image-wrapper {margin-left: {{imageSpacing}};}",
+ },
+ ],
+ },
- imageSpacing: {
- type: 'object', default: { md: 20, unit: 'px' },
- style: [
- {
- condition: [{ key: 'layout', relation: '==', value: 1 }],
- selector: '{{QUBELY}} .qubely-team-image-wrapper {margin-bottom: {{imageSpacing}};}'
- },
- {
- condition: [
- { key: 'layout', relation: '==', value: 3 },
- { key: 'alignmentLayout3', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-team-image-wrapper {margin-right: {{imageSpacing}};}'
- },
- {
- condition: [
- { key: 'layout', relation: '==', value: 3 },
- { key: 'alignmentLayout3', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-team-image-wrapper {margin-left: {{imageSpacing}};}'
- },
- ]
- },
+ imageBorder: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-team-image-wrapper img, {{QUBELY}} .qubely-team-image-wrapper .qubely-image-placeholder",
+ },
+ ],
+ },
+ imageBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-team-image-wrapper img, {{QUBELY}} .qubely-team-image-wrapper .qubely-image-placeholder",
+ },
+ ],
+ },
+ imageBoxShadow: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-team-image-wrapper img, {{QUBELY}} .qubely-team-image-wrapper .qubely-image-placeholder",
+ },
+ ],
+ },
- imageBorder: {
- type: 'object',
- default: {},
- style: [
- {
- selector: '{{QUBELY}} .qubely-team-image-wrapper img, {{QUBELY}} .qubely-team-image-wrapper .qubely-image-placeholder'
- }
- ]
- },
- imageBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-team-image-wrapper img, {{QUBELY}} .qubely-team-image-wrapper .qubely-image-placeholder'
- }
- ]
- },
- imageBoxShadow: {
- type: 'object',
- default: {},
- style: [
- {
- selector: '{{QUBELY}} .qubely-team-image-wrapper img, {{QUBELY}} .qubely-team-image-wrapper .qubely-image-placeholder'
- }
- ]
- },
+ // Name
+ name: { type: "string", default: "John Doe" },
+ nameTypo: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 28, unit: "px" }, height: { md: 32, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-team-name" }],
+ },
+ nameColor: {
+ type: "string",
+ default: "",
+ style: [{ selector: "{{QUBELY}} .qubely-team-name {color: {{nameColor}};}" }],
+ },
+ nameSpacing: {
+ type: "object",
+ default: { md: 5, unit: "px" },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-team-name {display:block;margin-bottom: {{nameSpacing}};}",
+ },
+ ],
+ },
- // Name
- name: { type: 'string', default: 'John Doe' },
- nameTypo: { type: 'object', default: { openTypography: 1, size: { md: 28, unit: 'px' }, height: { md: 32, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-team-name' }] },
- nameColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-team-name {color: {{nameColor}};}' }] },
- nameSpacing: {
- type: 'object',
- default: { md: 5, unit: 'px' },
- style: [{
- selector: '{{QUBELY}} .qubely-team-name {display:block;margin-bottom: {{nameSpacing}};}'
- }]
- },
+ // Designation
+ enableDesignation: {
+ type: "boolean",
+ default: 1,
+ style: [
+ {
+ condition: [{ key: "enableDesignation", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-designation{display:block;}",
+ },
+ ],
+ },
+ designation: { type: "string", default: "CREATIVE DESIGNER" },
+ designationTypo: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 14, unit: "px" } },
+ style: [
+ {
+ condition: [{ key: "enableDesignation", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-designation",
+ },
+ ],
+ },
+ designationColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "enableDesignation", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-designation {color: {{designationColor}};}",
+ },
+ ],
+ },
+ designationSpacing: {
+ type: "object",
+ default: { md: 20, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "enableDesignation", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-designation-container {margin-bottom: {{designationSpacing}};}",
+ },
+ ],
+ },
- // Designation
- enableDesignation: {
- type: 'boolean', default: 1,
- style: [
- {
- condition: [
- { key: 'enableDesignation', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-team-designation{display:block;}'
- }
- ]
- },
- designation: { type: 'string', default: 'CREATIVE DESIGNER' },
- designationTypo: {
- type: 'object', default: { openTypography: 1, size: { md: 14, unit: 'px' } },
- style: [
- {
- condition: [
- { key: 'enableDesignation', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-team-designation'
- }
- ]
- },
- designationColor: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'enableDesignation', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-team-designation {color: {{designationColor}};}'
- }
- ]
- },
- designationSpacing: {
- type: 'object', default: { md: 20, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'enableDesignation', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-team-designation-container {margin-bottom: {{designationSpacing}};}'
- }
- ]
- },
+ // Description
+ enableDescription: { type: "boolean", default: 0 },
+ description: {
+ type: "string",
+ default:
+ "Qubely team block is an amazing Gutenberg block to display team member with social and other relevant information.",
+ },
+ descriptionTypo: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 14, unit: "px" } },
+ style: [
+ {
+ condition: [{ key: "enableDescription", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-description",
+ },
+ ],
+ },
+ descriptionColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "enableDescription", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-description {color: {{descriptionColor}};}",
+ },
+ ],
+ },
+ descriptionSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "enableDescription", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-team-description {margin-bottom: {{descriptionSpacing}};}",
+ },
+ ],
+ },
- // Description
- enableDescription: { type: 'boolean', default: 0 },
- description: { type: 'string', default: 'Qubely team block is an amazing Gutenberg block to display team member with social and other relevant information.' },
- descriptionTypo: {
- type: 'object', default: { openTypography: 1, size: { md: 14, unit: 'px' } },
- style: [
- {
- condition: [
- { key: 'enableDescription', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-team-description'
- }
- ]
- },
- descriptionColor: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'enableDescription', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-team-description {color: {{descriptionColor}};}'
- }
- ]
- },
- descriptionSpacing: {
- type: 'object', default: { md: 10, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'enableDescription', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-team-description {margin-bottom: {{descriptionSpacing}};}'
- }
- ]
- },
+ // Social
+ showSociallinks: { type: "boolean", default: true },
+ facebook: { type: "string", default: "https://facebook.com/themeum" },
+ twitter: { type: "string", default: "https://twitter.com/themeum" },
+ instagram: { type: "string", default: "" },
+ linkedin: { type: "string", default: "" },
+ youtube: { type: "string", default: "https://youtube.com/user/themeumwp" },
+ github: { type: "string", default: "" },
+ flickr: { type: "string", default: "" },
+ pinterest: { type: "string", default: "" },
+ dribbble: { type: "string", default: "" },
+ behance: { type: "string", default: "" },
+ iconStyle: { type: "string", default: "normal" },
+ iconUseDefaultStyle: { type: "boolean", default: true },
+ iconSize: {
+ type: "string",
+ default: "14px",
+ style: [
+ {
+ condition: [{ key: "iconSize", relation: "!=", value: "custom" }],
+ selector: "{{QUBELY}} .qubely-team-social-links>a {font-size: {{iconSize}};}",
+ },
+ ],
+ },
+ iconSizeCustom: {
+ type: "object",
+ default: { md: 18, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "iconSize", relation: "==", value: "custom" }],
+ selector: "{{QUBELY}} .qubely-team-social-links>a {font-size: {{iconSizeCustom}};}",
+ },
+ ],
+ },
+ iconGutter: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-team-social-links > a {margin: 0 calc({{iconGutter}}/2);}",
+ },
+ ],
+ },
+ iconSpacing: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-team-social-links {margin-top: {{iconSpacing}};}",
+ },
+ ],
+ },
- // Social
- showSociallinks: { type: 'boolean', default: true },
- facebook: { type: 'string', default: 'https://facebook.com/themeum' },
- twitter: { type: 'string', default: 'https://twitter.com/themeum' },
- instagram: { type: 'string', default: '' },
- linkedin: { type: 'string', default: '' },
- youtube: { type: 'string', default: 'https://youtube.com/user/themeumwp' },
- github: { type: 'string', default: '' },
- flickr: { type: 'string', default: '' },
- pinterest: { type: 'string', default: '' },
- dribbble: { type: 'string', default: '' },
- behance: { type: 'string', default: '' },
- iconStyle: { type: 'string', default: 'normal' },
- iconUseDefaultStyle: { type: 'boolean', default: true },
- iconSize: {
- type: 'string', default: '14px',
- style: [
- {
- condition: [
- { key: 'iconSize', relation: '!=', value: 'custom' },
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a {font-size: {{iconSize}};}'
- }
- ]
- },
- iconSizeCustom: {
- type: 'object', default: { md: 18, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'iconSize', relation: '==', value: 'custom' },
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a {font-size: {{iconSizeCustom}};}'
- }
- ]
- },
- iconGutter: {
- type: 'object', default: { md: 10, unit: 'px' },
- style: [
- {
- selector: '{{QUBELY}} .qubely-team-social-links > a {margin: 0 calc({{iconGutter}}/2);}'
- }
- ]
- },
- iconSpacing: {
- type: 'object', default: {},
- style: [
- {
- selector: '{{QUBELY}} .qubely-team-social-links {margin-top: {{iconSpacing}};}'
- }
- ]
- },
+ iconBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ global: { md: 4 },
+ unit: "px",
+ },
+ style: [
+ {
+ condition: [{ key: "iconStyle", relation: "==", value: "fill" }],
+ selector: "{{QUBELY}} .qubely-team-social-links>a",
+ },
+ ],
+ },
- iconBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
- global: { md: 4 },
- unit: 'px'
- },
- style: [
- {
- condition: [
- { key: 'iconStyle', relation: '==', value: 'fill' }
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a'
- }
- ]
- },
+ iconColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "iconUseDefaultStyle", relation: "==", value: false }],
+ selector: "{{QUBELY}} .qubely-team-social-links>a {color: {{iconColor}};}",
+ },
+ ],
+ },
+ iconColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "iconUseDefaultStyle", relation: "==", value: false }],
+ selector: "{{QUBELY}} .qubely-team-social-links>a:hover {color: {{iconColorHover}};}",
+ },
+ ],
+ },
+ iconBackground: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "iconUseDefaultStyle", relation: "==", value: false },
+ { key: "iconStyle", relation: "==", value: "fill" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-social-links>a {background-color: {{iconBackground}};}",
+ },
+ ],
+ },
+ iconBackgroundHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "iconUseDefaultStyle", relation: "==", value: false },
+ { key: "iconStyle", relation: "==", value: "fill" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-team-social-links>a:hover {background-color: {{iconBackgroundHover}};}",
+ },
+ ],
+ },
+ iconBorder: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [
+ { key: "iconUseDefaultStyle", relation: "==", value: false },
+ { key: "iconStyle", relation: "==", value: "fill" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-social-links>a",
+ },
+ ],
+ },
+ iconBorderColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [
+ { key: "iconUseDefaultStyle", relation: "==", value: false },
+ { key: "iconStyle", relation: "==", value: "fill" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-social-links>a:hover {border-color: {{iconBorderColorHover}};}",
+ },
+ ],
+ },
- iconColor: {
- type: 'string', default: '',
- style: [
- {
- condition:
- [
- { key: 'iconUseDefaultStyle', relation: '==', value: false }
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a {color: {{iconColor}};}'
- }
- ]
- },
- iconColorHover: {
- type: 'string', default: '',
- style: [
- {
- condition:
- [
- { key: 'iconUseDefaultStyle', relation: '==', value: false }
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a:hover {color: {{iconColorHover}};}'
- }
- ]
- },
- iconBackground: {
- type: 'string', default: '',
- style: [
- {
- condition:
- [
- { key: 'iconUseDefaultStyle', relation: '==', value: false },
- { key: 'iconStyle', relation: '==', value: 'fill' }
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a {background-color: {{iconBackground}};}'
- }
- ]
- },
- iconBackgroundHover: {
- type: 'string', default: '',
- style: [
- {
- condition:
- [
- { key: 'iconUseDefaultStyle', relation: '==', value: false },
- { key: 'iconStyle', relation: '==', value: 'fill' }
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a:hover {background-color: {{iconBackgroundHover}};}'
- }
- ]
- },
- iconBorder: {
- type: 'object', default: {},
- style: [
- {
- condition:
- [
- { key: 'iconUseDefaultStyle', relation: '==', value: false },
- { key: 'iconStyle', relation: '==', value: 'fill' }
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a'
- }
- ]
- },
- iconBorderColorHover: {
- type: 'string', default: '',
- style: [
- {
- condition:
- [
- { key: 'iconUseDefaultStyle', relation: '==', value: false },
- { key: 'iconStyle', relation: '==', value: 'fill' }
- ],
- selector: '{{QUBELY}} .qubely-team-social-links>a:hover {border-color: {{iconBorderColorHover}};}'
- }
- ]
- },
+ // Information
+ phone: { type: "string", default: "" },
+ email: { type: "string", default: "" },
+ website: { type: "string", default: "" },
+ infoSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-team-information >div:not(:last-child) {margin-bottom: {{infoSpacing}};}",
+ },
+ ],
+ },
+ useInfoIcon: { type: "boolean", default: false },
+ infoIconSize: {
+ type: "string",
+ default: "14px",
+ style: [
+ {
+ condition: [
+ { key: "useInfoIcon", relation: "==", value: true },
+ { key: "infoIconSize", relation: "!=", value: "custom" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-information .qubely-info-icon {font-size: {{infoIconSize}};}",
+ },
+ ],
+ },
+ infoIconSizeCustom: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ condition: [
+ { key: "useInfoIcon", relation: "==", value: true },
+ { key: "infoIconSize", relation: "==", value: "custom" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-team-information .qubely-info-icon {font-size: {{infoIconSizeCustom}};}",
+ },
+ ],
+ },
+ infoIconSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-team-information .qubely-info-icon {margin-right: {{infoIconSpacing}};}",
+ },
+ ],
+ },
+ infoIconColor: {
+ type: "string",
+ default: "",
+ style: [{ selector: "{{QUBELY}} .qubely-team-information .qubely-info-icon {color: {{infoIconColor}};}" }],
+ },
+ infoTypo: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 16, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-team-information" }],
+ },
+ infoColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-team-information, {{QUBELY}} .qubely-team-information a {color: {{infoColor}};}",
+ },
+ ],
+ },
- // Information
- phone: { type: 'string', default: '' },
- email: { type: 'string', default: '' },
- website: { type: 'string', default: '' },
- infoSpacing: {
- type: 'object', default: { md: 10, unit: 'px' },
- style: [
- {
- selector: '{{QUBELY}} .qubely-team-information >div:not(:last-child) {margin-bottom: {{infoSpacing}};}'
- }
- ]
- },
- useInfoIcon: { type: 'boolean', default: false },
- infoIconSize: {
- type: 'string', default: '14px',
- style: [
- {
- condition: [
- { key: 'useInfoIcon', relation: '==', value: true },
- { key: 'infoIconSize', relation: '!=', value: 'custom' },
- ],
- selector: '{{QUBELY}} .qubely-team-information .qubely-info-icon {font-size: {{infoIconSize}};}'
- }
- ]
- },
- infoIconSizeCustom: {
- type: 'object', default: { md: 10, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'useInfoIcon', relation: '==', value: true },
- { key: 'infoIconSize', relation: '==', value: 'custom' },
- ],
- selector: '{{QUBELY}} .qubely-team-information .qubely-info-icon {font-size: {{infoIconSizeCustom}};}'
- }
- ]
- },
- infoIconSpacing: {
- type: 'object', default: { md: 10, unit: 'px' },
- style: [
- {
- selector: '{{QUBELY}} .qubely-team-information .qubely-info-icon {margin-right: {{infoIconSpacing}};}'
- }
- ]
- },
- infoIconColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-team-information .qubely-info-icon {color: {{infoIconColor}};}' }] },
- infoTypo: { type: 'object', default: { openTypography: 1, size: { md: 16, unit: 'px' } }, style: [{ selector: '{{QUBELY}} .qubely-team-information' }] },
- infoColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-team-information, {{QUBELY}} .qubely-team-information a {color: {{infoColor}};}' }] },
+ //Overlay
+ overlayHeight: {
+ type: "string",
+ default: "fit",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "==", value: 2 },
+ { key: "overlayHeight", relation: "==", value: "auto" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-content {bottom: 0;}",
+ },
+ {
+ condition: [
+ { key: "layout", relation: "==", value: 2 },
+ { key: "overlayHeight", relation: "==", value: "fit" },
+ ],
+ selector: "{{QUBELY}} .qubely-team-content {top: 0; bottom: 0;}",
+ },
+ ],
+ },
+ overlayAlignment: {
+ type: "string",
+ default: "center",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "==", value: 2 },
+ { key: "overlayHeight", relation: "==", value: "fit" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-team-content {-webkit-box-align: {{overlayAlignment}}; -ms-flex-align: {{overlayAlignment}}; align-items: {{overlayAlignment}};}",
+ },
+ ],
+ },
+ overlayBg: {
+ type: "object",
+ default: { type: "color", openColor: 1, color: "rgba(255, 255, 255, .9)" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 2 }],
+ selector: "{{QUBELY}} .qubely-team-content",
+ },
+ ],
+ },
+ overlayPaddingX: {
+ type: "object",
+ default: { md: 20, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 2 }],
+ selector:
+ "{{QUBELY}} .qubely-team-content {padding-left: {{overlayPaddingX}}; padding-right: {{overlayPaddingX}};}",
+ },
+ ],
+ },
+ overlayPaddingY: {
+ type: "object",
+ default: { md: 20, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 2 }],
+ selector:
+ "{{QUBELY}} .qubely-team-content {padding-top: {{overlayPaddingY}}; padding-bottom: {{overlayPaddingY}};}",
+ },
+ ],
+ },
+ // Content
+ contentPosition: {
+ type: "string",
+ default: "right",
+ style: [
+ {
+ condition: [
+ { key: "layout", relation: "==", value: 3 },
+ { key: "contentPosition", relation: "==", value: "left" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-block-team {flex-direction: row-reverse; -webkit-flex-direction: row-reverse;} {{QUBELY}} .qubely-team-layout-3 .qubely-team-content {margin-right: auto;}",
+ },
+ ],
+ },
+ contentAlignment: {
+ type: "object",
+ default: { md: "center" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: 3 }],
+ selector: "{{QUBELY}} .qubely-team-content {text-align: {{contentAlignment}};}",
+ },
+ ],
+ },
+ contentPadding: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "custom",
+ custom: { md: "10 0 10 0" },
+ },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "!=", value: 2 }],
+ selector: "{{QUBELY}} .qubely-team-content",
+ },
+ ],
+ },
+ contentBg: {
+ type: "object",
+ default: { type: "color", openColor: 1, color: "#fff" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "!=", value: 2 }],
+ selector: "{{QUBELY}} .qubely-team-content",
+ },
+ ],
+ },
+ contentBorder: {
+ type: "object",
+ default: { openBorder: 1, position: "all", type: "solid", width: 1, color: "#e5e5e5" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "!=", value: 2 }],
+ selector: "{{QUBELY}} .qubely-team-content",
+ },
+ ],
+ },
- //Overlay
- overlayHeight: {
- type: 'string', default: 'fit',
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 2 },
- { key: 'overlayHeight', relation: '==', value: 'auto' }
- ],
- selector: '{{QUBELY}} .qubely-team-content {bottom: 0;}'
- },
- {
- condition: [
- { key: 'layout', relation: '==', value: 2 },
- { key: 'overlayHeight', relation: '==', value: 'fit' }
- ],
- selector: '{{QUBELY}} .qubely-team-content {top: 0; bottom: 0;}'
- }
- ]
- },
- overlayAlignment: {
- type: 'string', default: 'center',
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 2 },
- { key: 'overlayHeight', relation: '==', value: 'fit' },
- ],
- selector: '{{QUBELY}} .qubely-team-content {-webkit-box-align: {{overlayAlignment}}; -ms-flex-align: {{overlayAlignment}}; align-items: {{overlayAlignment}};}'
- }
- ]
- },
- overlayBg: {
- type: 'object', default: { type: 'color', openColor: 1, color: 'rgba(255, 255, 255, .9)' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 2 },
- ],
- selector: '{{QUBELY}} .qubely-team-content'
- }
- ]
- },
- overlayPaddingX: {
- type: 'object', default: { md: 20, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 2 }
- ],
- selector: '{{QUBELY}} .qubely-team-content {padding-left: {{overlayPaddingX}}; padding-right: {{overlayPaddingX}};}'
- }
- ]
- },
- overlayPaddingY: {
- type: 'object', default: { md: 20, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 2 }
- ],
- selector: '{{QUBELY}} .qubely-team-content {padding-top: {{overlayPaddingY}}; padding-bottom: {{overlayPaddingY}};}'
- }
- ]
- },
-
- // Content
- contentPosition: {
- type: 'string', default: 'right',
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 3 },
- { key: 'contentPosition', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-block-team {flex-direction: row-reverse; -webkit-flex-direction: row-reverse;} {{QUBELY}} .qubely-team-layout-3 .qubely-team-content {margin-right: auto;}'
- }
- ]
- },
- contentAlignment: {
- type: 'object', default: { md: 'center' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '==', value: 3 },
- ],
- selector: '{{QUBELY}} .qubely-team-content {text-align: {{contentAlignment}};}'
-
- }
- ]
- },
- contentPadding: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'custom',
- custom: { md: '10 0 10 0' }
- },
- style: [{
- condition: [
- { key: 'layout', relation: '!=', value: 2 },
- ],
- selector: '{{QUBELY}} .qubely-team-content'
- }]
- },
- contentBg: {
- type: 'object', default: { type: 'color', openColor: 1, color: '#fff' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 2 },
- ],
- selector: '{{QUBELY}} .qubely-team-content'
- }
- ]
- },
- contentBorder: {
- type: 'object', default: { openBorder: 1, position: 'all', type: 'solid', width: 1, color: '#e5e5e5' },
- style: [
- {
- condition: [
- { key: 'layout', relation: '!=', value: 2 },
- ],
- selector: '{{QUBELY}} .qubely-team-content'
- }
- ]
- },
-
- // Body
- bodyBg: {
- type: 'object', default: {},
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-team'
- }
- ]
- },
- bodyPadding: {
- type: 'object',
- default: {
- paddingType: 'global',
- global: {}
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-team'
- }
- ]
- },
- bodyBorder: {
- type: 'object', default: {},
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-team'
- }
- ]
- },
- bodyBorderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-team'
- }
- ]
- },
- bodyBoxShadow: {
- type: 'object', default: {},
- style: [
- {
- selector: '{{QUBELY}} .qubely-block-team'
- }
- ]
- },
- sourceOfCopiedStyle: { type: 'boolean', default: false }
- },
- edit: Edit,
- save: Save,
+ // Body
+ bodyBg: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-team",
+ },
+ ],
+ },
+ bodyPadding: {
+ type: "object",
+ default: {
+ paddingType: "global",
+ global: {},
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-team",
+ },
+ ],
+ },
+ bodyBorder: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-team",
+ },
+ ],
+ },
+ bodyBorderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-team",
+ },
+ ],
+ },
+ bodyBoxShadow: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-block-team",
+ },
+ ],
+ },
+ sourceOfCopiedStyle: { type: "boolean", default: false },
+ },
+ edit: Edit,
+ save: Save,
});
diff --git a/assets/reactjs/src/blocks/team/style.scss b/assets/reactjs/src/blocks/team/style.scss
index f4def51f..a27116fa 100644
--- a/assets/reactjs/src/blocks/team/style.scss
+++ b/assets/reactjs/src/blocks/team/style.scss
@@ -1,221 +1,226 @@
.qubely-block-team {
- position: relative;
- transition: border-color 400ms, background-color 400ms, box-shadow 400ms;
- h1, h2, h3, h4, h5, h6 {
- padding: 0;
- margin: 0;
- line-height: 1;
- position: relative;
+ position: relative;
+ transition: border-color 400ms, background-color 400ms, box-shadow 400ms;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ padding: 0;
+ margin: 0;
+ line-height: 1;
+ position: relative;
- &::before,
- &::after {
- display: none !important;
- }
+ &::before,
+ &::after {
+ display: none !important;
+ }
- .qubely-text-has-bgcolor {
- padding-left: 10px;
- padding-right: 10px;
- }
- }
+ .qubely-text-has-bgcolor {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ }
- .qubely-team-image-wrapper {
- // overflow: hidden;
- font-size: 0;
- }
- &.qubely-team-layout-1 {
- .qubely-team-image-wrapper {
- display: inline-block;
- }
- }
+ .qubely-team-image-wrapper {
+ // overflow: hidden;
+ font-size: 0;
+ }
+ &.qubely-team-layout-1 {
+ .qubely-team-image-wrapper {
+ display: inline-block;
+ }
+ }
- &.qubely-team-layout-2 {
- .qubely-team-image-wrapper {
- img {
- width: 100%;
- }
- }
- .qubely-team-content {
- display: flex;
- position: absolute;
- left: 0;
- right: 0;
- opacity: 0;
- transition: opacity 300ms;
- .qubely-team-content-inner {
- width: 100%;
- }
- }
- &:hover {
- .qubely-team-content {
- opacity: 1;
- }
- }
- }
+ &.qubely-team-layout-2 {
+ .qubely-team-image-wrapper {
+ img {
+ width: 100%;
+ }
+ }
+ .qubely-team-content {
+ display: flex;
+ position: absolute;
+ left: 0;
+ right: 0;
+ opacity: 0;
+ transition: opacity 300ms;
+ .qubely-team-content-inner {
+ width: 100%;
+ }
+ }
+ &:hover {
+ .qubely-team-content {
+ opacity: 1;
+ }
+ }
+ }
- &.qubely-team-layout-3 {
- display: flex;
- .qubely-team-content {
- display: flex;
- flex-grow: 1;
- .qubely-team-content-inner {
- width: 100%;
- }
- }
- }
+ &.qubely-team-layout-3 {
+ display: flex;
+ .qubely-team-content {
+ display: flex;
+ flex-grow: 1;
+ .qubely-team-content-inner {
+ width: 100%;
+ }
+ }
+ }
- .qubely-team-social-links {
- font-size: 0;
- a {
- display: inline-block;
- text-decoration: none !important;
- transition: 400ms;
- }
+ .qubely-team-social-links {
+ font-size: 0;
+ a {
+ display: inline-block;
+ text-decoration: none !important;
+ transition: 400ms;
+ }
- &.qubely-team-icon-layout-fill {
- a {
- padding: 10px;
- i {
- font-style: normal;
- width: 1em;
- height: 1em;
- display: block;
- text-align: center;
- }
- }
- }
+ &.qubely-team-icon-layout-fill {
+ a {
+ padding: 10px;
+ i {
+ font-style: normal;
+ width: 1em;
+ height: 1em;
+ display: block;
+ text-align: center;
+ }
+ }
+ }
- &.qubely-team-icon-style-default {
- &.qubely-team-icon-layout-normal {
- .qubely-team-social-facebook {
- color: #3b5998;
- &:hover {
- color: #2f477c;
- }
- }
- .qubely-team-social-twitter {
- color: #1da1f2;
- &:hover {
- color: #1a93df;
- }
- }
- .qubely-team-social-instagram {
- color: #e1306c;
- &:hover {
- color: #c0275a;
- }
- }
- .qubely-team-social-linkedin {
- color: #0077b5;
- &:hover {
- color: #005f92;
- }
- }
- .qubely-team-social-youtube {
- color: #ff0000;
- &:hover {
- color: #e40000;
- }
- }
- .qubely-team-social-github {
- color: #333;
- &:hover {
- color: rgb(24, 24, 24);
- }
- }
- .qubely-team-social-flickr {
- color: #ff0084;
- &:hover {
- color: #e60077;
- }
- }
- .qubely-team-social-pinterest {
- color: #bd081c;
- &:hover {
- color: #9c0718;
- }
- }
- .qubely-team-social-dribbble {
- color: #ea4c89;
- &:hover {
- color: #d3437a;
- }
- }
- .qubely-team-social-behance {
- color: #1769ff;
- &:hover {
- color: #135add;
- }
- }
- }
+ &.qubely-team-icon-style-default {
+ &.qubely-team-icon-layout-normal {
+ .qubely-team-social-facebook {
+ color: #3b5998;
+ &:hover {
+ color: #2f477c;
+ }
+ }
+ .qubely-team-social-twitter {
+ color: #1da1f2;
+ &:hover {
+ color: #1a93df;
+ }
+ }
+ .qubely-team-social-instagram {
+ color: #e1306c;
+ &:hover {
+ color: #c0275a;
+ }
+ }
+ .qubely-team-social-linkedin {
+ color: #0077b5;
+ &:hover {
+ color: #005f92;
+ }
+ }
+ .qubely-team-social-youtube {
+ color: #ff0000;
+ &:hover {
+ color: #e40000;
+ }
+ }
+ .qubely-team-social-github {
+ color: #333;
+ &:hover {
+ color: rgb(24, 24, 24);
+ }
+ }
+ .qubely-team-social-flickr {
+ color: #ff0084;
+ &:hover {
+ color: #e60077;
+ }
+ }
+ .qubely-team-social-pinterest {
+ color: #bd081c;
+ &:hover {
+ color: #9c0718;
+ }
+ }
+ .qubely-team-social-dribbble {
+ color: #ea4c89;
+ &:hover {
+ color: #d3437a;
+ }
+ }
+ .qubely-team-social-behance {
+ color: #1769ff;
+ &:hover {
+ color: #135add;
+ }
+ }
+ }
- &.qubely-team-icon-layout-fill {
- a {
- color: #fff;
- &:hover {
- color: #fff;
- }
- }
- .qubely-team-social-facebook {
- background-color: #3b5998;
- &:hover {
- background-color: #2f477c;
- }
- }
- .qubely-team-social-twitter {
- background-color: #1da1f2;
- &:hover {
- background-color: #1a93df;
- }
- }
- .qubely-team-social-instagram {
- background-color: #e1306c;
- &:hover {
- background-color: #c0275a;
- }
- }
- .qubely-team-social-linkedin {
- background-color: #0077b5;
- &:hover {
- background-color: #005f92;
- }
- }
- .qubely-team-social-youtube {
- background-color: #ff0000;
- &:hover {
- background-color: #e40000;
- }
- }
- .qubely-team-social-github {
- background-color: #333;
- &:hover {
- background-color: rgb(24, 24, 24);
- }
- }
- .qubely-team-social-flickr {
- background-color: #ff0084;
- &:hover {
- background-color: #e60077;
- }
- }
- .qubely-team-social-pinterest {
- background-color: #bd081c;
- &:hover {
- background-color: #9c0718;
- }
- }
- .qubely-team-social-dribbble {
- background-color: #ea4c89;
- &:hover {
- background-color: #d3437a;
- }
- }
- .qubely-team-social-behance {
- background-color: #1769ff;
- &:hover {
- background-color: #135add;
- }
- }
- }
- }
- }
-}
\ No newline at end of file
+ &.qubely-team-icon-layout-fill {
+ a {
+ color: #fff;
+ &:hover {
+ color: #fff;
+ }
+ }
+ .qubely-team-social-facebook {
+ background-color: #3b5998;
+ &:hover {
+ background-color: #2f477c;
+ }
+ }
+ .qubely-team-social-twitter {
+ background-color: #1da1f2;
+ &:hover {
+ background-color: #1a93df;
+ }
+ }
+ .qubely-team-social-instagram {
+ background-color: #e1306c;
+ &:hover {
+ background-color: #c0275a;
+ }
+ }
+ .qubely-team-social-linkedin {
+ background-color: #0077b5;
+ &:hover {
+ background-color: #005f92;
+ }
+ }
+ .qubely-team-social-youtube {
+ background-color: #ff0000;
+ &:hover {
+ background-color: #e40000;
+ }
+ }
+ .qubely-team-social-github {
+ background-color: #333;
+ &:hover {
+ background-color: rgb(24, 24, 24);
+ }
+ }
+ .qubely-team-social-flickr {
+ background-color: #ff0084;
+ &:hover {
+ background-color: #e60077;
+ }
+ }
+ .qubely-team-social-pinterest {
+ background-color: #bd081c;
+ &:hover {
+ background-color: #9c0718;
+ }
+ }
+ .qubely-team-social-dribbble {
+ background-color: #ea4c89;
+ &:hover {
+ background-color: #d3437a;
+ }
+ }
+ .qubely-team-social-behance {
+ background-color: #1769ff;
+ &:hover {
+ background-color: #135add;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/assets/reactjs/src/blocks/testimonial/Edit.js b/assets/reactjs/src/blocks/testimonial/Edit.js
index 435d1c53..46506ed6 100644
--- a/assets/reactjs/src/blocks/testimonial/Edit.js
+++ b/assets/reactjs/src/blocks/testimonial/Edit.js
@@ -1,525 +1,722 @@
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
const { Fragment, Component, createRef } = wp.element;
-const { PanelBody, TextControl, Toolbar } = wp.components
-const { RichText, BlockControls, InspectorControls, AlignmentToolbar } = wp.blockEditor
-const { Media, RadioAdvanced, Range, Color, Typography, Toggle, Separator, ColorAdvanced, Border, BorderRadius, BoxShadow, Styles, Alignment, Padding, Tabs, Tab, gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings }, Inline: { InlineToolbar }, ContextMenu: { ContextMenu, handleContextMenu }, withCSSGenerator, InspectorTabs, InspectorTab, InspectorSections } = wp.qubelyComponents
-import icons from '../../helpers/icons'
+const { PanelBody, TextControl, Toolbar } = wp.components;
+const { RichText, BlockControls, InspectorControls, AlignmentToolbar } = wp.blockEditor;
+const {
+ Media,
+ RadioAdvanced,
+ Range,
+ Color,
+ Typography,
+ Toggle,
+ Separator,
+ ColorAdvanced,
+ Border,
+ BorderRadius,
+ BoxShadow,
+ Styles,
+ Alignment,
+ Padding,
+ Tabs,
+ Tab,
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ Inline: { InlineToolbar },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+ InspectorSections,
+} = wp.qubelyComponents;
+import icons from "../../helpers/icons";
class Edit extends Component {
- constructor(props) {
- super(props);
- this.state = {
- device: 'md',
- spacer: true,
- openPanelSetting: ''
- };
- this.qubelyContextMenu = createRef();
- }
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
- handlePanelOpenings = (panelName) => {
- this.setState({ ...this.state, openPanelSetting: panelName })
- }
- render() {
- const {
- uniqueId,
- layout,
- className,
- message,
- messageSpacingTop,
- messageSpacingBottom,
- name,
- nameColor,
- alignment,
- designation,
- designationColor,
- showAvatar,
- avatar,
- avatar2x,
- avatarAlt,
- avatarBorderRadius,
- avatarSize,
- avatarWidth,
- avatarHeight,
- avatarBorder,
- avatarSpacing,
- avatarLayout,
- quoteIconColor,
- quoteIconSize,
- quoteIconSpacing,
- nameTypo,
- nameSpacing,
- messageTypo,
- designationTypo,
- starsSize,
- showRatings,
- ratingsColor,
- quoteIcon,
- ratings,
- ratingsSpacing,
- bgPadding,
- textColor,
- bgColor,
- bgBorderRadius,
- border,
- boxShadow,
- boxShadowHover,
-
- //animation
- animation,
- globalZindex,
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- hideTablet,
- hideMobile,
- globalCss,
- interaction
- } = this.props.attributes
-
- const { clientId, attributes, setAttributes, isSelected } = this.props;
- const { openPanelSetting, device } = this.state;
-
- const testimonialTitle =
setAttributes({ name: value })}
- value={name}
- />
-
- const testimonialDesignation = setAttributes({ designation: value })}
- value={designation}
- />
-
- const testimonialContent = setAttributes({ message: value })}
- value={message}
- />
-
- const authorInfo =
-
-
- {showAvatar && (avatarLayout == 'left' || avatarLayout == 'top') &&
-
- {avatar.url != undefined ?
- this.handlePanelOpenings('Avatar')}>
- }
-
- }
-
-
-
this.handlePanelOpenings('Name')}>{testimonialTitle}
-
this.handlePanelOpenings('Designation')}>{testimonialDesignation}
-
-
- {showAvatar && (avatarLayout == 'right' || avatarLayout == 'bottom') &&
-
- {avatar.url != undefined ?
- this.handlePanelOpenings('Avatar')}>
- }
-
- }
-
-
-
- return (
-
-
-
-
-
-
-
- setAttributes({ layout: val })}
- options={[
- { value: 1, svg: icons.testimonial_1, label: __('Layout 1') },
- { value: 2, svg: icons.testimonial_2, label: __('Layout 2') }
- ]}
- />
- setAttributes({ alignment: val })} alignmentType="content" disableJustify responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- this.handlePanelOpenings(openPanelSetting !== 'Message' ? 'Message' : '')}>
- setAttributes({ messageSpacingTop: value })}
- unit={['px', 'em', '%']} max={300}
- min={0}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ messageSpacingBottom: value })}
- unit={['px', 'em', '%']} max={300}
- min={0}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ messageTypo: value })}
- device={device} onDeviceChange={value => this.setState({ device: value })} />
-
-
- this.handlePanelOpenings(openPanelSetting !== 'Name' ? 'Name' : '')}>
- setAttributes({ nameSpacing: value })}
- unit={['px', 'em', '%']} max={300}
- min={0}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ nameColor: value })}
- />
- setAttributes({ nameTypo: value })}
- device={device} onDeviceChange={value => this.setState({ device: value })} />
-
-
- this.handlePanelOpenings(openPanelSetting !== 'Designation' ? 'Designation' : '')}>
- setAttributes({ designationColor: value })}
- />
- setAttributes({ designationTypo: value })}
- device={device} onDeviceChange={value => this.setState({ device: value })} />
-
-
- this.handlePanelOpenings(openPanelSetting !== 'Avatar' ? 'Avatar' : '')}>
- setAttributes({ showAvatar: val })} />
- {
- showAvatar &&
- setAttributes({ avatar: value })} />
-
- setAttributes({ avatar2x: value })} />
- {avatar.url &&
- setAttributes({ avatarAlt: value })} />
- }
- setAttributes({ avatarLayout: val })}
- options={[
- { value: 'left', svg: icons.avatar_left, label: __('Left') },
- { value: 'right', svg: icons.avatar_right, label: __('Right') },
- { value: 'top', svg: icons.avatar_top, label: __('Top') },
- { value: 'bottom', svg: icons.avatar_bottom, label: __('Bottom') },
- ]}
- />
- setAttributes({ avatarSize: value })}
- />
- {avatarSize == 'custom' &&
-
-
- }
-
- setAttributes({ avatarBorderRadius: value })}
- min={0}
- max={100}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ avatarBorder: value })}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ avatarSpacing: value })}
- min={0}
- max={200}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
-
- }
-
-
- this.handlePanelOpenings(openPanelSetting !== 'Quote Icon' ? 'Quote Icon' : '')}>
- setAttributes({ quoteIcon: val })} />
- {quoteIcon &&
-
- setAttributes({ quoteIconColor: value })} />
- setAttributes({ quoteIconSize: value })}
- min={10}
- max={150}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })}
- />
- setAttributes({ quoteIconSpacing: value })}
- min={0}
- max={100}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
-
- this.handlePanelOpenings(openPanelSetting !== 'Ratings' ? 'Ratings' : '')}>
-
- setAttributes({ showRatings: val })} />
- {
- showRatings &&
-
- setAttributes({ ratings: value })}
- min={0}
- max={5} step={.1} />
- {(ratings != 0) &&
-
- setAttributes({ ratingsColor: value })} />
- setAttributes({ starsSize: value })}
- unit={['px', 'em', '%']}
- min={10}
- max={48}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ ratingsSpacing: value })}
- unit={['px', 'em', '%']}
- min={0}
- max={200}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
- }
-
-
-
- setAttributes({ textColor: val })} />
- setAttributes({ bgColor: val })} />
- setAttributes({ border: val })} />
- setAttributes({ bgPadding: value })}
- unit={['px', 'em', '%']}
- min={0}
- max={100}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
- setAttributes({ bgBorderRadius: val })}
- min={0}
- max={100}
- unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => this.setState({ device: value })} />
-
-
-
- setAttributes({ boxShadow: val })}
- />
-
-
- setAttributes({ boxShadowHover: val })}
- />
-
-
-
-
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
-
-
-
-
-
-
-
- { setAttributes({ alignment: value }) }}
- />
-
-
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- >
-
- {layout == 2 && authorInfo}
-
- {(showRatings && ratings > 0 && layout == 2) &&
-
this.handlePanelOpenings('Ratings')}>
- }
-
- {(quoteIcon && (layout == 1)) &&
-
this.handlePanelOpenings('Quote Icon')}>
- }
-
-
this.handlePanelOpenings('Message')} >
- {testimonialContent}
-
-
- {(showRatings && ratings > 0 && layout == 1) &&
-
this.handlePanelOpenings('Ratings')}>
- }
-
- {layout == 1 && authorInfo}
-
- {(quoteIcon && (layout == 2)) &&
-
this.handlePanelOpenings('Quote Icon')}>
- }
-
-
-
-
-
- )
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ spacer: true,
+ openPanelSetting: "",
+ };
+ this.qubelyContextMenu = createRef();
+ }
+
+ handlePanelOpenings = (panelName) => {
+ this.setState({ ...this.state, openPanelSetting: panelName });
+ };
+
+ render() {
+ const {
+ uniqueId,
+ layout,
+ className,
+ message,
+ messageSpacingTop,
+ messageSpacingBottom,
+ name,
+ nameColor,
+ alignment,
+ designation,
+ designationColor,
+ showAvatar,
+ avatar,
+ avatar2x,
+ avatarAlt,
+ avatarBorderRadius,
+ avatarSize,
+ avatarWidth,
+ avatarHeight,
+ avatarBorder,
+ avatarSpacing,
+ avatarLayout,
+ quoteIconColor,
+ quoteIconSize,
+ quoteIconSpacing,
+ nameTypo,
+ nameSpacing,
+ messageTypo,
+ designationTypo,
+ starsSize,
+ showRatings,
+ ratingsColor,
+ quoteIcon,
+ ratings,
+ ratingsSpacing,
+ bgPadding,
+ textColor,
+ bgColor,
+ bgBorderRadius,
+ border,
+ boxShadow,
+ boxShadowHover,
+
+ //animation
+ animation,
+ globalZindex,
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ interaction,
+ } = this.props.attributes;
+
+ const { clientId, attributes, setAttributes, isSelected } = this.props;
+ const { openPanelSetting, device } = this.state;
+
+ const testimonialTitle = (
+ setAttributes({ name: value })}
+ value={name}
+ />
+ );
+
+ const testimonialDesignation = (
+ setAttributes({ designation: value })}
+ value={designation}
+ />
+ );
+
+ const testimonialContent = (
+ setAttributes({ message: value })}
+ value={message}
+ />
+ );
+
+ const authorInfo = (
+
+
+
+ {showAvatar && (avatarLayout == "left" || avatarLayout == "top") && (
+
+ {avatar.url != undefined ? (
+ this.handlePanelOpenings("Avatar")}
+ >
+
+ )}
+
+ )}
+
+
+
this.handlePanelOpenings("Name")}
+ >
+ {testimonialTitle}
+
+
this.handlePanelOpenings("Designation")}
+ >
+ {testimonialDesignation}
+
+
+
+ {showAvatar && (avatarLayout == "right" || avatarLayout == "bottom") && (
+
+ {avatar.url != undefined ? (
+ this.handlePanelOpenings("Avatar")}
+ >
+
+ )}
+
+ )}
+
+
+ );
+
+ return (
+
+
+
+
+
+
+
+ setAttributes({ layout: val })}
+ options={[
+ { value: 1, svg: icons.testimonial_1, label: __("Layout 1") },
+ { value: 2, svg: icons.testimonial_2, label: __("Layout 2") },
+ ]}
+ />
+ setAttributes({ alignment: val })}
+ alignmentType="content"
+ disableJustify
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+ this.handlePanelOpenings(openPanelSetting !== "Message" ? "Message" : "")
+ }
+ >
+ setAttributes({ messageSpacingTop: value })}
+ unit={["px", "em", "%"]}
+ max={300}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ messageSpacingBottom: value })}
+ unit={["px", "em", "%"]}
+ max={300}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ messageTypo: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+ this.handlePanelOpenings(openPanelSetting !== "Name" ? "Name" : "")}
+ >
+ setAttributes({ nameSpacing: value })}
+ unit={["px", "em", "%"]}
+ max={300}
+ min={0}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ nameColor: value })}
+ />
+ setAttributes({ nameTypo: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+
+ this.handlePanelOpenings(openPanelSetting !== "Designation" ? "Designation" : "")
+ }
+ >
+ setAttributes({ designationColor: value })}
+ />
+ setAttributes({ designationTypo: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+ this.handlePanelOpenings(openPanelSetting !== "Avatar" ? "Avatar" : "")}
+ >
+ setAttributes({ showAvatar: val })}
+ />
+ {showAvatar && (
+
+ setAttributes({ avatar: value })}
+ />
+
+ setAttributes({ avatar2x: value })}
+ />
+ {avatar.url && (
+ setAttributes({ avatarAlt: value })}
+ />
+ )}
+ setAttributes({ avatarLayout: val })}
+ options={[
+ { value: "left", svg: icons.avatar_left, label: __("Left") },
+ { value: "right", svg: icons.avatar_right, label: __("Right") },
+ { value: "top", svg: icons.avatar_top, label: __("Top") },
+ { value: "bottom", svg: icons.avatar_bottom, label: __("Bottom") },
+ ]}
+ />
+ setAttributes({ avatarSize: value })}
+ />
+ {avatarSize == "custom" && (
+
+
+ )}
+
+ setAttributes({ avatarBorderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ avatarBorder: value })}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ avatarSpacing: value })}
+ min={0}
+ max={200}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+ )}
+
+
+
+ this.handlePanelOpenings(openPanelSetting !== "Quote Icon" ? "Quote Icon" : "")
+ }
+ >
+ setAttributes({ quoteIcon: val })}
+ />
+ {quoteIcon && (
+
+ setAttributes({ quoteIconColor: value })}
+ />
+ setAttributes({ quoteIconSize: value })}
+ min={10}
+ max={150}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ quoteIconSpacing: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+
+
+ this.handlePanelOpenings(openPanelSetting !== "Ratings" ? "Ratings" : "")
+ }
+ >
+ setAttributes({ showRatings: val })}
+ />
+ {showRatings && (
+
+ setAttributes({ ratings: value })}
+ min={0}
+ max={5}
+ step={0.1}
+ />
+ {ratings != 0 && (
+
+ setAttributes({ ratingsColor: value })}
+ />
+ setAttributes({ starsSize: value })}
+ unit={["px", "em", "%"]}
+ min={10}
+ max={48}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ ratingsSpacing: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={200}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
+ )}
+
+
+
+ setAttributes({ textColor: val })}
+ />
+ setAttributes({ bgColor: val })}
+ />
+ setAttributes({ border: val })}
+ />
+ setAttributes({ bgPadding: value })}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ setAttributes({ bgBorderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+
+ setAttributes({ boxShadow: val })}
+ />
+
+
+ setAttributes({ boxShadowHover: val })}
+ />
+
+
+
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
+
+
+
+
+ {
+ setAttributes({ alignment: value });
+ }}
+ />
+
+
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
+
+
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ >
+ {layout == 2 && authorInfo}
+
+ {showRatings && ratings > 0 && layout == 2 && (
+
this.handlePanelOpenings("Ratings")}
+ >
+ )}
+
+ {quoteIcon && layout == 1 && (
+
this.handlePanelOpenings("Quote Icon")}
+ >
+
+ )}
+
+
this.handlePanelOpenings("Message")}>
+ {testimonialContent}
+
+
+ {showRatings && ratings > 0 && layout == 1 && (
+
this.handlePanelOpenings("Ratings")}
+ >
+ )}
+
+ {layout == 1 && authorInfo}
+
+ {quoteIcon && layout == 2 && (
+
this.handlePanelOpenings("Quote Icon")}
+ >
+
+ )}
+
+
+
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/testimonial/Save.js b/assets/reactjs/src/blocks/testimonial/Save.js
index e6b5ec0a..577af431 100644
--- a/assets/reactjs/src/blocks/testimonial/Save.js
+++ b/assets/reactjs/src/blocks/testimonial/Save.js
@@ -1,105 +1,124 @@
const { Fragment, Component } = wp.element;
const { RichText } = wp.blockEditor;
const {
- HelperFunction: {
- animationAttr,
- IsInteraction
- }
+ HelperFunction: { animationAttr, IsInteraction },
} = wp.qubelyComponents;
class Save extends Component {
- render() {
- const {
- uniqueId,
- layout,
- animation,
- message,
- name,
- designation,
- showAvatar,
- avatar,
- avatar2x,
- avatarAlt,
- avatarLayout,
- quoteIcon,
- showRatings,
- ratings,
- interaction
- } = this.props.attributes;
-
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
+ render() {
+ const {
+ uniqueId,
+ layout,
+ animation,
+ message,
+ name,
+ designation,
+ showAvatar,
+ avatar,
+ avatar2x,
+ avatarAlt,
+ avatarLayout,
+ quoteIcon,
+ showRatings,
+ ratings,
+ interaction,
+ } = this.props.attributes;
- const testimonialTitle =
-
-
- {showAvatar && (avatarLayout == 'left' || avatarLayout == 'top') &&
-
- {avatar.url != undefined ?
-
- }
-
- }
+ const testimonialTitle =
;
+ const testimonialDesignation =
;
+ const testimonialMessage =
;
-
-
{testimonialTitle}
-
{testimonialDesignation}
-
+ const authorInfo = (
+
+
+
+ {showAvatar && (avatarLayout == "left" || avatarLayout == "top") && (
+
+ {avatar.url != undefined ? (
+
+
+ )}
+
+ )}
- {showAvatar && (avatarLayout == 'right' || avatarLayout == 'bottom') &&
-
- {avatar.url != undefined ?
-
- }
-
- }
-
-
+
+
{testimonialTitle}
+
{testimonialDesignation}
+
- return (
-
-
+ {showAvatar && (avatarLayout == "right" || avatarLayout == "bottom") && (
+
+ {avatar.url != undefined ? (
+
+
+ )}
+
+ )}
+
+
+
+ );
- {layout == 2 && authorInfo}
+ return (
+
+
+ {layout == 2 && authorInfo}
- {(showRatings && ratings > 0 && layout == 2) &&
-
- }
+ {showRatings && ratings > 0 && layout == 2 && (
+
+ )}
- {(quoteIcon && (layout == 1)) &&
-
-
- }
+ {quoteIcon && layout == 1 && (
+
+
+ )}
-
- {testimonialMessage}
-
+
{testimonialMessage}
- {(showRatings && ratings > 0 && layout == 1) &&
-
- }
+ {showRatings && ratings > 0 && layout == 1 && (
+
+ )}
- {layout == 1 && authorInfo}
+ {layout == 1 && authorInfo}
- {(quoteIcon && (layout == 2)) &&
-
-
- }
-
-
-
- )
- }
+ {quoteIcon && layout == 2 && (
+
+
+ )}
+
+
-
-
- {showAvatar && (avatarLayout == 'left' || avatarLayout == 'top') &&
-
- {avatar.url != undefined ?
-
- }
-
- }
-
-
-
{testimonialTitle}
-
{testimonialDesignation}
-
-
- {showAvatar && (avatarLayout == 'right' || avatarLayout == 'bottom') &&
-
- {avatar.url != undefined ?
-
- }
-
- }
-
-
-
- return (
-
-
-
- {layout == 2 && authorInfo}
-
- {(showRatings && ratings > 0 && layout == 2) &&
-
this.handlePanelOpenings('Ratings')}
- />
- }
-
- {(quoteIcon && (layout == 1)) &&
-
-
- }
-
-
{testimonialMessage}
-
- {(showRatings && ratings > 0 && layout == 1) &&
-
this.handlePanelOpenings('Ratings')} />
- }
-
- {layout == 1 && authorInfo}
-
- {(quoteIcon && (layout == 2)) &&
-
-
- }
-
-
-
- );
- }
- }
- ]
+registerBlockType("qubely/testimonial", {
+ title: __("Testimonial", "qubely"),
+ description: "Display client feedbacks with Qubely Testimonials.",
+ icon:
,
+ category: "qubely",
+ keywords: [__("testimonial", "qubely"), __("Quote", "qubely"), __("Ratings", "qubely")],
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ example: {
+ attributes: {},
+ },
+ attributes,
+ edit: Edit,
+ save: Save,
+ deprecated: [
+ {
+ attributes,
+ save(props) {
+ const {
+ attributes: {
+ uniqueId,
+ layout,
+ animation,
+ message,
+ name,
+ designation,
+ showAvatar,
+ avatar,
+ avatar2x,
+ avatarAlt,
+ avatarLayout,
+ quoteIcon,
+ showRatings,
+ ratings,
+ interaction,
+ },
+ } = props;
+
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
+
+ const testimonialTitle =
;
+ const testimonialDesignation =
;
+ const testimonialMessage =
;
+
+ const authorInfo = (
+
+
+
+ {showAvatar && (avatarLayout == "left" || avatarLayout == "top") && (
+
+ {avatar.url != undefined ? (
+
+
+ )}
+
+ )}
+
+
+
{testimonialTitle}
+
+ {testimonialDesignation}
+
+
+
+ {showAvatar && (avatarLayout == "right" || avatarLayout == "bottom") && (
+
+ {avatar.url != undefined ? (
+
+
+ )}
+
+ )}
+
+
+ );
+
+ return (
+
+
+ {layout == 2 && authorInfo}
+
+ {showRatings && ratings > 0 && layout == 2 && (
+
this.handlePanelOpenings("Ratings")}
+ />
+ )}
+
+ {quoteIcon && layout == 1 && (
+
+
+ )}
+
+
{testimonialMessage}
+
+ {showRatings && ratings > 0 && layout == 1 && (
+
this.handlePanelOpenings("Ratings")}
+ />
+ )}
+
+ {layout == 1 && authorInfo}
+
+ {quoteIcon && layout == 2 && (
+
+
+ )}
+
+
+ );
+ },
+ },
+ ],
});
diff --git a/assets/reactjs/src/blocks/testimonial/style.scss b/assets/reactjs/src/blocks/testimonial/style.scss
index 0c912599..6e51662a 100644
--- a/assets/reactjs/src/blocks/testimonial/style.scss
+++ b/assets/reactjs/src/blocks/testimonial/style.scss
@@ -1,105 +1,106 @@
.qubely-block-testimonial {
- transition: all 400ms;
- // Editor line height hack
- .editor-rich-text {
- .editor-rich-text__tinymce {
- line-height: inherit;
- }
- }
+ transition: all 400ms;
+ // Editor line height hack
+ .editor-rich-text {
+ .editor-rich-text__tinymce {
+ line-height: inherit;
+ }
+ }
- .qubely-testimonial-quote {
- .qubely-quote-icon {
- line-height: 1;
- width: auto;
- height: auto;
- }
+ .qubely-testimonial-quote {
+ .qubely-quote-icon {
+ line-height: 1;
+ width: auto;
+ height: auto;
+ }
- &.qubely-position-bottom {
- .qubely-quote-icon {
- transform: scaleY(-1);
- }
- }
- }
+ &.qubely-position-bottom {
+ .qubely-quote-icon {
+ transform: scaleY(-1);
+ }
+ }
+ }
- .qubely-testimonial-avatar {
- &.qubely-image-placeholder i {
- font-style: normal;
- font-size: .5em;
- }
- }
+ .qubely-testimonial-avatar {
+ &.qubely-image-placeholder i {
+ font-style: normal;
+ font-size: 0.5em;
+ }
+ }
- .qubely-testimonial-avatar-layout-left,
- .qubely-testimonial-avatar-layout-right {
- display: inline-flex;
- align-items: center;
- .qubely-testimonial-author-info {
- text-align: left;
- }
- }
+ .qubely-testimonial-avatar-layout-left,
+ .qubely-testimonial-avatar-layout-right {
+ display: inline-flex;
+ align-items: center;
+ .qubely-testimonial-author-info {
+ text-align: left;
+ }
+ }
- .qubely-testimonial-avatar-layout-right {
- .qubely-testimonial-author-info {
- text-align: right;
- }
- }
+ .qubely-testimonial-avatar-layout-right {
+ .qubely-testimonial-author-info {
+ text-align: right;
+ }
+ }
- //rating
- .qubely-testimonial-ratings {
- unicode-bidi: bidi-override;
- display: inline-block;
- position: relative;
- letter-spacing: 5px;
- --qubely-testimonial-rating: 0%;
- &:before, &:after{
- content: "\f005\f005\f005\f005\f005";
- font-family: 'Font Awesome\ 5 Free';
- font-weight: 400;
- display: block;
- white-space: nowrap;
- z-index: 0;
- }
+ //rating
+ .qubely-testimonial-ratings {
+ unicode-bidi: bidi-override;
+ display: inline-block;
+ position: relative;
+ letter-spacing: 5px;
+ --qubely-testimonial-rating: 0%;
+ &:before,
+ &:after {
+ content: "\f005\f005\f005\f005\f005";
+ font-family: "Font Awesome\ 5 Free";
+ font-weight: 400;
+ display: block;
+ white-space: nowrap;
+ z-index: 0;
+ }
- &:before{
- position: absolute;
- z-index: 1;
- left: 0px;
- overflow: hidden;
- font-family: 'Font Awesome\ 5 Free';
- font-weight: 900;
- content: "\f005\f005\f005\f005\f005";
- width: var(--qubely-testimonial-rating);
- }
+ &:before {
+ position: absolute;
+ z-index: 1;
+ left: 0px;
+ overflow: hidden;
+ font-family: "Font Awesome\ 5 Free";
+ font-weight: 900;
+ content: "\f005\f005\f005\f005\f005";
+ width: var(--qubely-testimonial-rating);
+ }
- /**
+ /**
* For Backward Compatibility
*/
- &[data-qubelyrating="1"]:before {
- width: 20%;
- }
- &[data-qubelyrating="1.5"]:before {
- width: 29%;
- }
- &[data-qubelyrating="2"]:before {
- width: 40%;
- }
- &[data-qubelyrating="2.5"]:before {
- width: 49%;
- }
- &[data-qubelyrating="3"]:before {
- width: 60%;
- }
- &[data-qubelyrating="3.5"]:before {
- width: 69%;
- }
- &[data-qubelyrating="4"]:before {
- width: 80%;
- }
- &[data-qubelyrating="4.5"]:before {
- width: 89%;
- }
- &[data-qubelyrating="5"]:before {
- width: 100%;
- }
- // end backward compatibility
- }
-}
\ No newline at end of file
+ &[data-qubelyrating="1"]:before {
+ width: 20%;
+ }
+ &[data-qubelyrating="1.5"]:before {
+ width: 29%;
+ }
+ &[data-qubelyrating="2"]:before {
+ width: 40%;
+ }
+ &[data-qubelyrating="2.5"]:before {
+ width: 49%;
+ }
+ &[data-qubelyrating="3"]:before {
+ width: 60%;
+ }
+ &[data-qubelyrating="3.5"]:before {
+ width: 69%;
+ }
+ &[data-qubelyrating="4"]:before {
+ width: 80%;
+ }
+ &[data-qubelyrating="4.5"]:before {
+ width: 89%;
+ }
+ &[data-qubelyrating="5"]:before {
+ width: 100%;
+ }
+ // end backward compatibility
+ }
+}
diff --git a/assets/reactjs/src/blocks/text/Edit.js b/assets/reactjs/src/blocks/text/Edit.js
index 45f06433..63430649 100644
--- a/assets/reactjs/src/blocks/text/Edit.js
+++ b/assets/reactjs/src/blocks/text/Edit.js
@@ -1,316 +1,497 @@
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
+const { Fragment, Component, createRef } = wp.element;
+const { PanelBody, Toolbar, SelectControl } = wp.components;
+const { RichText, InspectorControls, BlockControls } = wp.blockEditor;
const {
- Fragment,
- Component,
- createRef
-} = wp.element;
-const { PanelBody, Toolbar, SelectControl } = wp.components
-const { RichText, InspectorControls, BlockControls } = wp.blockEditor
-const {
- Typography,
- Color,
- Alignment,
- Headings,
- Toggle,
- Range,
- Separator,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- Inline: {
- InlineToolbar,
- InlineSelector
- },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- withCSSGenerator,
- InspectorTabs,
- InspectorTab,
- InspectorSections
+ Typography,
+ Color,
+ Alignment,
+ Headings,
+ Toggle,
+ Range,
+ Separator,
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ Inline: { InlineToolbar, InlineSelector },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+ InspectorSections,
} = wp.qubelyComponents;
-import svg from '../heading/separators';
+import svg from "../heading/separators";
class Edit extends Component {
- constructor() {
- super(...arguments);
- this.state = {
- device: 'md',
- selector: true,
- spacer: true,
- openPanelSetting: ''
- };
- this.qubelyContextMenu = createRef();
- }
-
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
-
- handlePanelOpenings = (panelName) => {
- this.setState({ ...this.state, openPanelSetting: panelName })
- }
-
- render() {
- const {
- uniqueId,
- className,
- content,
- typography,
- alignment,
- selector,
- textColor,
- dropCap,
- dropCapSize,
- dropCapColor,
- dropCapSpacing,
+ constructor() {
+ super(...arguments);
+ this.state = {
+ device: "md",
+ selector: true,
+ spacer: true,
+ openPanelSetting: "",
+ };
+ this.qubelyContextMenu = createRef();
+ }
- titleLevel,
- title,
- titleTypography,
- titleColor,
- titleSpacing,
+ handlePanelOpenings = (panelName) => {
+ this.setState({ ...this.state, openPanelSetting: panelName });
+ };
- enableTitle,
- subTitle,
- subTitleLevel,
- subTitleContent,
- subTitleTypography,
- subTitleColor,
- subTitleSpacing,
+ render() {
+ const {
+ uniqueId,
+ className,
+ content,
+ typography,
+ alignment,
+ selector,
+ textColor,
+ dropCap,
+ dropCapSize,
+ dropCapColor,
+ dropCapSpacing,
- separatorStyle,
- separatorColor,
- separatorStroke,
- separatorPosition,
- separatorWidth,
- separatorSpacing,
+ titleLevel,
+ title,
+ titleTypography,
+ titleColor,
+ titleSpacing,
- //animation
- animation,
- globalZindex,
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- hideTablet,
- hideMobile,
- globalCss,
- interaction
- } = this.props.attributes
- const { name, clientId, attributes, setAttributes, isSelected } = this.props
- const { device, openPanelSetting } = this.state
- const separators = {
- solid: { type: 'css', separator: 'solid', width: 300, stroke: 10 },
- double: { type: 'css', separator: 'double', width: 300, stroke: 10 },
- dotted: { type: 'css', separator: 'dotted', width: 300, stroke: 10 },
- dashed: { type: 'css', separator: 'dashed', width: 300, stroke: 10 },
- pin: { type: 'svg', separator: 'pin', svg: svg['pin'], width: 100, stroke: 0 },
- pin_filled: { type: 'svg', separator: 'pin_filled', svg: svg['pin_filled'], width: 100, stroke: 0 },
- zigzag: { type: 'svg', separator: 'zigzag', svg: svg['zigzag'], style: 'fill', width: 88, stroke: 5 },
- zigzag_large: { type: 'svg', separator: 'zigzag_large', svg: svg['zigzag_large'], style: 'fill', width: 161, stroke: 5 },
- }
+ enableTitle,
+ subTitle,
+ subTitleLevel,
+ subTitleContent,
+ subTitleTypography,
+ subTitleColor,
+ subTitleSpacing,
- const titleTagName = 'h' + titleLevel;
- const subTitleTagName = 'h' + subTitleLevel;
+ separatorStyle,
+ separatorColor,
+ separatorStroke,
+ separatorPosition,
+ separatorWidth,
+ separatorSpacing,
- const renderSeparators =
- {separatorStyle &&
-
- {separators[separatorStyle].type == 'css' &&
- {separators[separatorStyle].svg}
- }
-
- }
-
+ //animation
+ animation,
+ globalZindex,
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ interaction,
+ } = this.props.attributes;
+ const { name, clientId, attributes, setAttributes, isSelected } = this.props;
+ const { device, openPanelSetting } = this.state;
+ const separators = {
+ solid: { type: "css", separator: "solid", width: 300, stroke: 10 },
+ double: { type: "css", separator: "double", width: 300, stroke: 10 },
+ dotted: { type: "css", separator: "dotted", width: 300, stroke: 10 },
+ dashed: { type: "css", separator: "dashed", width: 300, stroke: 10 },
+ pin: { type: "svg", separator: "pin", svg: svg["pin"], width: 100, stroke: 0 },
+ pin_filled: { type: "svg", separator: "pin_filled", svg: svg["pin_filled"], width: 100, stroke: 0 },
+ zigzag: { type: "svg", separator: "zigzag", svg: svg["zigzag"], style: "fill", width: 88, stroke: 5 },
+ zigzag_large: {
+ type: "svg",
+ separator: "zigzag_large",
+ svg: svg["zigzag_large"],
+ style: "fill",
+ width: 161,
+ stroke: 5,
+ },
+ };
- return (
-
-
-
-
-
-
-
- setAttributes({ alignment: val })} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
+ const titleTagName = "h" + titleLevel;
+ const subTitleTagName = "h" + subTitleLevel;
-
- setAttributes({ typography: val })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ textColor: val })} />
- setAttributes({ dropCap: val })} />
- {dropCap == 1 &&
-
- setAttributes({ dropCapSize: value })} min={0} max={200} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ dropCapColor: val })} />
- setAttributes({ dropCapSpacing: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
-
+ const renderSeparators = (
+
+ {separatorStyle && (
+
+ {separators[separatorStyle].type == "css" && (
+
+ {separators[separatorStyle].svg}
+
+ )}
+
+ )}
+
+ );
- this.handlePanelOpenings(openPanelSetting !== 'Title' ? 'Title' : '')}>
- setAttributes({ enableTitle: val })} />
- {enableTitle == 1 &&
-
- setAttributes({ titleLevel: value })} />
- setAttributes({ titleTypography: value })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ titleColor: value })} />
- {__('Spacing')} setAttributes({ separatorStyle: val })}
- />
- {separatorStyle &&
-
- setAttributes({ separatorColor: val })} />
- {(separatorStyle != 'pin' && separatorStyle != 'pin_filled') &&
- setAttributes({ separatorStroke: parseInt(val) })} min={1} max={separators[separatorStyle].stroke} />
- }
- setAttributes({ separatorWidth: val })} min={20} max={separators[separatorStyle].width} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ separatorSpacing: val })} min={0} max={100} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ separatorPosition: val })}
- />
-
- }
-
- }
-
+ return (
+
+
+
+
+
+
+
+ setAttributes({ alignment: val })}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
- {enableTitle == 1 &&
- this.handlePanelOpenings(openPanelSetting !== 'Sub Title' ? 'Sub Title' : '')}>
- setAttributes({ subTitle: val })} />
- {subTitle == 1 &&
-
- setAttributes({ subTitleLevel: value })} />
- setAttributes({ subTitleTypography: val })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- {__('Spacing')} setAttributes({ subTitleColor: val })} />
-
- }
-
- }
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
-
+
+ setAttributes({ typography: val })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ textColor: val })}
+ />
+ setAttributes({ dropCap: val })}
+ />
+ {dropCap == 1 && (
+
+ setAttributes({ dropCapSize: value })}
+ min={0}
+ max={200}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ dropCapColor: val })}
+ />
+ setAttributes({ dropCapSpacing: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
+
-
-
- this.setState({ device: value })}
- />
-
-
+ this.handlePanelOpenings(openPanelSetting !== "Title" ? "Title" : "")}
+ >
+ setAttributes({ enableTitle: val })}
+ />
+ {enableTitle == 1 && (
+
+ setAttributes({ titleLevel: value })}
+ />
+ setAttributes({ titleTypography: value })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ titleColor: value })}
+ />
+
+ {__("Spacing")}{" "}
+ setAttributes({ separatorStyle: val })}
+ />
+ {separatorStyle && (
+
+ setAttributes({ separatorColor: val })}
+ />
+ {separatorStyle != "pin" && separatorStyle != "pin_filled" && (
+
+ setAttributes({ separatorStroke: parseInt(val) })
+ }
+ min={1}
+ max={separators[separatorStyle].stroke}
+ />
+ )}
+ setAttributes({ separatorWidth: val })}
+ min={20}
+ max={separators[separatorStyle].width}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ separatorSpacing: val })}
+ min={0}
+ max={100}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ separatorPosition: val })}
+ />
+
+ )}
+
+ )}
+
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
+ {enableTitle == 1 && (
+
+ this.handlePanelOpenings(openPanelSetting !== "Sub Title" ? "Sub Title" : "")
+ }
+ >
+ setAttributes({ subTitle: val })}
+ />
+ {subTitle == 1 && (
+
+ setAttributes({ subTitleLevel: value })}
+ />
+ setAttributes({ subTitleTypography: val })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ {__("Spacing")}{" "}
+ setAttributes({ subTitleColor: val })}
+ />
+
+ )}
+
+ )}
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
-
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- className={`qubely-block-text ${(dropCap == 1) ? 'qubely-has-drop-cap' : ''}`} >
- {enableTitle == 1 &&
-
-
- {separatorStyle && (separatorPosition == 'left' || separatorPosition == 'top' || separatorPosition == 'leftright') ?
{renderSeparators}
: ''}
-
this.handlePanelOpenings('Title')}>
- setAttributes({ title: value })}
- value={title} />
-
- {separatorStyle != '' && (separatorPosition == 'right' || separatorPosition == 'bottom' || separatorPosition == 'leftright') ?
{renderSeparators}
: ''}
-
+
+
+ this.setState({ device: value })}
+ />
+
+
- {subTitle == 1 &&
-
this.handlePanelOpenings('Sub Title')}>
- setAttributes({ subTitleContent: value })}
- value={subTitleContent} />
-
- }
-
- }
-
setAttributes({ content: value })}
- value={content}
- />
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
-
-
+
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ className={`qubely-block-text ${dropCap == 1 ? "qubely-has-drop-cap" : ""}`}
+ >
+ {enableTitle == 1 && (
+
+
+ {separatorStyle &&
+ (separatorPosition == "left" ||
+ separatorPosition == "top" ||
+ separatorPosition == "leftright") ? (
+
+ {renderSeparators}
+
+ ) : (
+ ""
+ )}
+
this.handlePanelOpenings("Title")}>
+ setAttributes({ title: value })}
+ value={title}
+ />
+
+ {separatorStyle != "" &&
+ (separatorPosition == "right" ||
+ separatorPosition == "bottom" ||
+ separatorPosition == "leftright") ? (
+
+ {renderSeparators}
+
+ ) : (
+ ""
+ )}
+
-
-
+ {subTitle == 1 && (
+
this.handlePanelOpenings("Sub Title")}
+ >
+ setAttributes({ subTitleContent: value })}
+ value={subTitleContent}
+ />
+
+ )}
+
setAttributes({ content: value })}
+ value={content}
+ />
-
- )
- }
+
+
+
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/text/Save.js b/assets/reactjs/src/blocks/text/Save.js
index a7e6040d..6c85aa29 100644
--- a/assets/reactjs/src/blocks/text/Save.js
+++ b/assets/reactjs/src/blocks/text/Save.js
@@ -59,9 +59,7 @@ class Save extends Component {
animation,
interaction,
anchor,
- children,
} = this.props.attributes;
- const subTitleAnchor = children && children[0] ? children[0].anchor : null;
const titleTagName = 'h' + titleLevel;
const subTitleTagName = 'h' + subTitleLevel;
const interactionClass = IsInteraction(interaction)
@@ -91,6 +89,7 @@ class Save extends Component {
return (
{separatorStyle &&
@@ -139,7 +137,6 @@ class Save extends Component {
{subTitle == 1 && (
this.handlePanelOpenings('Sub Title')}
>
diff --git a/assets/reactjs/src/blocks/text/index.js b/assets/reactjs/src/blocks/text/index.js
index e55e6305..94757b15 100644
--- a/assets/reactjs/src/blocks/text/index.js
+++ b/assets/reactjs/src/blocks/text/index.js
@@ -1,298 +1,517 @@
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save';
-import svg from '../heading/separators';
-const { __ } = wp.i18n
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+import svg from "../heading/separators";
+import { IsInteraction } from "../../components/HelperFunction";
+const { __ } = wp.i18n;
const { Fragment } = wp.element;
-const { RichText } = wp.blockEditor
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes }, HelperFunction: { animationAttr } } = wp.qubelyComponents
+const { RichText } = wp.blockEditor;
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+ HelperFunction: { animationAttr },
+} = wp.qubelyComponents;
-registerBlockType('qubely/text', {
- title: __('Advanced Text'),
- description: 'Apply texts and tweak designs with Qubely Advanced Text.',
- category: 'qubely',
- icon:
,
- supports: {
- align: ['center', 'wide', 'full'],
- },
- keywords: [
- __('text'),
- __('paragraph'),
- __('heading'),
- __('Advanced'),
- ],
- example: {
- attributes: {
- enableTitle: true,
- title: __('Advanced Text Block', 'qubely'),
- dropCap: true,
- content: __('Qubely blocks is added to the Gutenberg editor as soon as you install the plugin. You can start using it as any other Gutenberg block. Add ready blocks using the plus sign where you’ll find a new section of blocks under the Qubely icon.', 'qubely'),
- },
- },
- attributes: {
- uniqueId: { type: 'string', default: '' },
- // Global
- ...globalAttributes,
- spacer: { type: 'object', default: { spaceTop: { md: '10', unit: "px" }, spaceBottom: { md: '10', unit: "px" } }, style: [{ selector: '{{QUBELY}}' }] },
- content: {
- type: 'string',
- source: 'html',
- selector: '.qubely-block-text> *:last-child',
- default: 'Qubely blocks is added to the Gutenberg editor as soon as you install the plugin. You can start using it as any other Gutenberg block. Add ready blocks using the plus sign where you’ll find a new section of blocks under the Qubely icon.'
- },
- alignment: { type: 'object', default: { md: 'left' }, style: [{ selector: '{{QUBELY}} .qubely-block-text {text-align: {{alignment}}; }' }] },
- selector: { type: 'string', default: 'p' },
- dropCap: { type: 'boolean', default: false },
- dropCapSize: {
- type: 'object', default: { md: 48, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'dropCap', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-text p::first-letter, {{QUBELY}} .qubely-block-text p::first-letter {font-size: {{dropCapSize}};}'
- }
- ]
- },
- dropCapColor: {
- type: 'string', default: '#2962FF',
- style: [
- {
- condition: [
- { key: 'dropCap', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-text p::first-letter, {{QUBELY}} .qubely-block-text p::first-letter {color: {{dropCapColor}};}'
- }
- ]
- },
- dropCapSpacing: {
- type: 'object', default: { md: 15, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'dropCap', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-block-text p::first-letter, {{QUBELY}} .qubely-block-text.qubely-has-drop-cap p.rich-text.block-editor-rich-text__editable::first-letter {margin-right: {{dropCapSpacing}};}'
- }
- ]
- },
+registerBlockType("qubely/text", {
+ title: __("Advanced Text"),
+ description: "Apply texts and tweak designs with Qubely Advanced Text.",
+ category: "qubely",
+ icon:
,
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ keywords: [__("text"), __("paragraph"), __("heading"), __("Advanced")],
+ example: {
+ attributes: {
+ enableTitle: true,
+ title: __("Advanced Text Block", "qubely"),
+ dropCap: true,
+ content: __(
+ "Qubely blocks is added to the Gutenberg editor as soon as you install the plugin. You can start using it as any other Gutenberg block. Add ready blocks using the plus sign where you’ll find a new section of blocks under the Qubely icon.",
+ "qubely"
+ ),
+ },
+ },
+ attributes: {
+ uniqueId: { type: "string", default: "" },
+ // Global
+ ...globalAttributes,
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ content: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-block-text> *:last-child",
+ default:
+ "Qubely blocks is added to the Gutenberg editor as soon as you install the plugin. You can start using it as any other Gutenberg block. Add ready blocks using the plus sign where you’ll find a new section of blocks under the Qubely icon.",
+ },
+ alignment: {
+ type: "object",
+ default: { md: "left" },
+ style: [{ selector: "{{QUBELY}} .qubely-block-text {text-align: {{alignment}}; }" }],
+ },
+ selector: { type: "string", default: "p" },
+ dropCap: { type: "boolean", default: false },
+ dropCapSize: {
+ type: "object",
+ default: { md: 48, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "dropCap", relation: "==", value: true }],
+ selector:
+ "{{QUBELY}} .qubely-block-text p::first-letter, {{QUBELY}} .qubely-block-text p::first-letter {font-size: {{dropCapSize}};}",
+ },
+ ],
+ },
+ dropCapColor: {
+ type: "string",
+ default: "#2962FF",
+ style: [
+ {
+ condition: [{ key: "dropCap", relation: "==", value: true }],
+ selector:
+ "{{QUBELY}} .qubely-block-text p::first-letter, {{QUBELY}} .qubely-block-text p::first-letter {color: {{dropCapColor}};}",
+ },
+ ],
+ },
+ dropCapSpacing: {
+ type: "object",
+ default: { md: 15, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "dropCap", relation: "==", value: true }],
+ selector:
+ "{{QUBELY}} .qubely-block-text p::first-letter, {{QUBELY}} .qubely-block-text.qubely-has-drop-cap p.rich-text.block-editor-rich-text__editable::first-letter {margin-right: {{dropCapSpacing}};}",
+ },
+ ],
+ },
+ typography: {
+ type: "object",
+ default: {},
+ style: [{ selector: "{{QUBELY}} .qubely-block-text, {{QUBELY}} .qubely-block-text p.rich-text" }],
+ },
+ textColor: {
+ type: "string",
+ default: "",
+ style: [{ selector: "{{QUBELY}} .qubely-block-text > * { color:{{textColor}}; }" }],
+ },
- typography: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-text, {{QUBELY}} .qubely-block-text p.rich-text' }] },
- textColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-text > * { color:{{textColor}}; }' }] },
+ // Title
+ enableTitle: { type: "boolean", default: 1 },
+ title: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-block-text-title",
+ default: "Advanced Text Block",
+ },
+ titleLevel: { type: "number", default: 2 },
+ titleTypography: {
+ type: "object",
+ default: {
+ openTypography: 1,
+ size: {
+ md: 24,
+ unit: "px",
+ },
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-text-title-container .qubely-block-text-title-inner .qubely-block-text-title",
+ },
+ ],
+ },
+ titleColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-text .qubely-block-text-title-container .qubely-block-text-title-inner .qubely-block-text-title,{{QUBELY}} .qubely-block-text .qubely-block-text-title-container .qubely-block-text-title-inner .qubely-block-text-title >* {color: {{titleColor}};}",
+ },
+ ],
+ },
+ titleSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [{ selector: "{{QUBELY}} .qubely-block-text-title-inner {margin-bottom: {{titleSpacing}};}" }],
+ },
+ subTitle: { type: "boolean", default: 0 },
+ subTitleLevel: { type: "number", default: 3 },
+ subTitleContent: {
+ type: "string",
+ source: "html",
+ selector: ".qubely-block-text-sub-title",
+ default: "Sub Title",
+ },
+ subTitleTypography: {
+ type: "object",
+ default: {
+ openTypography: 1,
+ size: {
+ md: 16,
+ unit: "px",
+ },
+ },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-text .qubely-block-text-title-container .qubely-block-text-sub-title-container .qubely-block-text-sub-title",
+ },
+ ],
+ },
+ subTitleColor: {
+ type: "string",
+ default: "#333",
+ style: [
+ {
+ condition: [{ key: "subTitle", relation: "==", value: 1 }],
+ selector: "{{QUBELY}} .qubely-block-text .qubely-block-text-sub-title {color: {{subTitleColor}};}",
+ },
+ ],
+ },
+ subTitleSpacing: {
+ type: "object",
+ default: { md: 15, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "subTitle", relation: "==", value: 1 }],
+ selector:
+ "{{QUBELY}} .qubely-block-text .qubely-block-text-sub-title {margin-bottom: {{subTitleSpacing}};}",
+ },
+ ],
+ },
- // Title
- enableTitle: { type: 'boolean', default: 1 },
- title: {
- type: 'string',
- source: 'html',
- selector: '.qubely-block-text-title',
- default: 'Advanced Text Block'
- },
- titleLevel: { type: 'number', default: 2 },
- titleTypography: {
- type: 'object',
- default: {
- openTypography: 1,
- size: {
- md: 24,
- unit: 'px'
- },
- },
- style: [
- { selector: '{{QUBELY}} .qubely-block-text-title-container .qubely-block-text-title-inner .qubely-block-text-title' }]
- },
- titleColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-text .qubely-block-text-title-container .qubely-block-text-title-inner .qubely-block-text-title,{{QUBELY}} .qubely-block-text .qubely-block-text-title-container .qubely-block-text-title-inner .qubely-block-text-title >* {color: {{titleColor}};}' }] },
- titleSpacing: { type: 'object', default: { md: 10, unit: 'px' }, style: [{ selector: '{{QUBELY}} .qubely-block-text-title-inner {margin-bottom: {{titleSpacing}};}' }] },
+ // Title separator
+ separatorStyle: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-text .qubely-separator-type-css {border-top-style: {{separatorStyle}};}",
+ },
+ ],
+ },
+ separatorPosition: { type: "string", default: "top" },
+ separatorColor: {
+ type: "string",
+ default: "#5D7FEB",
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-text .qubely-separator-type-svg svg .qubely-separator-stroke {stroke: {{separatorColor}};} {{QUBELY}} .qubely-block-text svg .qubely-separator-fill {fill: {{separatorColor}};} {{QUBELY}} .qubely-block-text .qubely-separator-type-css {border-top-color: {{separatorColor}};}",
+ },
+ ],
+ },
+ separatorStroke: {
+ type: "number",
+ default: 3,
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-text .qubely-separator-type-svg svg .qubely-separator-stroke {stroke-width: {{separatorStroke}}px;} {{QUBELY}} .qubely-block-text .qubely-separator-type-css {border-top-width: {{separatorStroke}}px;}",
+ },
+ ],
+ },
+ separatorWidth: {
+ type: "object",
+ default: { md: 60 },
+ style: [
+ {
+ condition: [{ key: "separatorStyle", relation: "!=", value: "" }],
+ selector:
+ "{{QUBELY}} .qubely-block-text .qubely-separator-type-css {width: {{separatorWidth}}px;} {{QUBELY}} .qubely-block-text .qubely-separator-type-svg svg {width: {{separatorWidth}}px;}",
+ },
+ ],
+ },
+ separatorSpacing: {
+ type: "object",
+ default: { md: 10 },
+ style: [
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "left" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-right: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "right" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-left: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "leftright" },
+ ],
+ selector:
+ "{{QUBELY}} .qubely-separator-before {margin-right: {{separatorSpacing}}px;} {{QUBELY}} .qubely-separator-after {margin-left: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "top" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-bottom: {{separatorSpacing}}px;}",
+ },
+ {
+ condition: [
+ { key: "separatorStyle", relation: "!=", value: "" },
+ { key: "separatorPosition", relation: "==", value: "bottom" },
+ ],
+ selector: "{{QUBELY}} .qubely-separator {margin-top: {{separatorSpacing}}px;}",
+ },
+ ],
+ },
+ sourceOfCopiedStyle: { type: "boolean", default: false },
+ },
+ deprecated: [
+ {
+ save(props) {
+ const separators = {
+ solid: { type: "css", separator: "solid", width: 300, stroke: 10 },
+ double: { type: "css", separator: "double", width: 300, stroke: 10 },
+ dotted: { type: "css", separator: "dotted", width: 300, stroke: 10 },
+ dashed: { type: "css", separator: "dashed", width: 300, stroke: 10 },
+ pin: { type: "svg", separator: "pin", svg: svg["pin"], width: 100, stroke: 0 },
+ pin_filled: { type: "svg", separator: "pin_filled", svg: svg["pin_filled"], width: 100, stroke: 0 },
+ zigzag: { type: "svg", separator: "zigzag", svg: svg["zigzag"], style: "fill", width: 88, stroke: 5 },
+ zigzag_large: {
+ type: "svg",
+ separator: "zigzag_large",
+ svg: svg["zigzag_large"],
+ style: "fill",
+ width: 161,
+ stroke: 5,
+ },
+ };
+
+ const {
+ uniqueId,
+ content,
+ selector,
+ dropCap,
+ enableTitle,
+ titleLevel,
+ subTitleLevel,
+ separatorStyle,
+ separatorPosition,
+ title,
+ subTitle,
+ subTitleContent,
+ animation,
+ interaction,
+ } = props.attributes;
+ const titleTagName = "h" + titleLevel;
+ const subTitleTagName = "h" + subTitleLevel;
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
+
+ const renderSeparators = (
+
+ {separatorStyle && (
+
+ {separators[separatorStyle].type == "css" && (
+
+ {separators[separatorStyle].svg}
+
+ )}
+
+ )}
+
+ );
+ return (
+
+
+ {enableTitle == 1 && (
+
+
+ {separatorStyle &&
+ (separatorPosition == "left" ||
+ separatorPosition == "top" ||
+ separatorPosition == "leftright") ? (
+
{renderSeparators}
+ ) : (
+ ""
+ )}
+
+ {separatorStyle != "" &&
+ (separatorPosition == "right" ||
+ separatorPosition == "bottom" ||
+ separatorPosition == "leftright") ? (
+
{renderSeparators}
+ ) : (
+ ""
+ )}
+
+
+ {subTitle == 1 && (
+
this.handlePanelOpenings("Sub Title")}
+ >
+
+ )}
+
+ )}
+
+
+
+
+ );
+ }
+ },
+ {
+ save(props) {
+ const separators = {
+ solid: { type: "css", separator: "solid", width: 300, stroke: 10 },
+ double: { type: "css", separator: "double", width: 300, stroke: 10 },
+ dotted: { type: "css", separator: "dotted", width: 300, stroke: 10 },
+ dashed: { type: "css", separator: "dashed", width: 300, stroke: 10 },
+ pin: { type: "svg", separator: "pin", svg: svg["pin"], width: 100, stroke: 0 },
+ pin_filled: { type: "svg", separator: "pin_filled", svg: svg["pin_filled"], width: 100, stroke: 0 },
+ zigzag: {
+ type: "svg",
+ separator: "zigzag",
+ svg: svg["zigzag"],
+ style: "fill",
+ width: 88,
+ stroke: 5,
+ },
+ zigzag_large: {
+ type: "svg",
+ separator: "zigzag_large",
+ svg: svg["zigzag_large"],
+ style: "fill",
+ width: 161,
+ stroke: 5,
+ },
+ };
- subTitle: { type: 'boolean', default: 0 },
- subTitleLevel: { type: 'number', default: 3 },
- subTitleContent: {
- type: 'string',
- source: 'html',
- selector: '.qubely-block-text-sub-title',
- default: 'Sub Title'
- },
- subTitleTypography: {
- type: 'object',
- default: {
- openTypography: 1,
- size: {
- md: 16,
- unit: 'px'
- }
- },
- style: [{ selector: '{{QUBELY}} .qubely-block-text .qubely-block-text-title-container .qubely-block-text-sub-title-container .qubely-block-text-sub-title' }]
- },
- subTitleColor: {
- type: 'string', default: '#333',
- style: [
- {
- condition: [
- { key: 'subTitle', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-text .qubely-block-text-sub-title {color: {{subTitleColor}};}'
- },
- ]
- },
- subTitleSpacing: {
- type: 'object', default: { md: 15, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'subTitle', relation: '==', value: 1 }
- ],
- selector: '{{QUBELY}} .qubely-block-text .qubely-block-text-sub-title {margin-bottom: {{subTitleSpacing}};}'
- },
- ]
- },
+ const {
+ uniqueId,
+ content,
+ selector,
+ dropCap,
+ enableTitle,
+ titleLevel,
+ subTitleLevel,
+ separatorStyle,
+ separatorPosition,
+ title,
+ subTitle,
+ subTitleContent,
+ animation,
+ } = props.attributes;
+ const titleTagName = "h" + titleLevel;
+ const subTitleTagName = "h" + subTitleLevel;
- // Title separator
- separatorStyle: {
- type: 'string', default: '',
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-text .qubely-separator-type-css {border-top-style: {{separatorStyle}};}'
- },
- ]
- },
- separatorPosition: { type: 'string', default: 'top' },
- separatorColor: {
- type: 'string', default: '#5D7FEB',
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-text .qubely-separator-type-svg svg .qubely-separator-stroke {stroke: {{separatorColor}};} {{QUBELY}} .qubely-block-text svg .qubely-separator-fill {fill: {{separatorColor}};} {{QUBELY}} .qubely-block-text .qubely-separator-type-css {border-top-color: {{separatorColor}};}'
- },
- ]
- },
- separatorStroke: {
- type: 'number', default: 3,
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-text .qubely-separator-type-svg svg .qubely-separator-stroke {stroke-width: {{separatorStroke}}px;} {{QUBELY}} .qubely-block-text .qubely-separator-type-css {border-top-width: {{separatorStroke}}px;}'
- },
- ]
- },
- separatorWidth: {
- type: 'object', default: { md: 60 },
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' }
- ],
- selector: '{{QUBELY}} .qubely-block-text .qubely-separator-type-css {width: {{separatorWidth}}px;} {{QUBELY}} .qubely-block-text .qubely-separator-type-svg svg {width: {{separatorWidth}}px;}'
- },
- ]
- },
- separatorSpacing: {
- type: 'object', default: { md: 10 },
- style: [
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'left' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-right: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'right' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-left: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'leftright' },
- ],
- selector: '{{QUBELY}} .qubely-separator-before {margin-right: {{separatorSpacing}}px;} {{QUBELY}} .qubely-separator-after {margin-left: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'top' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-bottom: {{separatorSpacing}}px;}'
- },
- {
- condition: [
- { key: 'separatorStyle', relation: '!=', value: '' },
- { key: 'separatorPosition', relation: '==', value: 'bottom' },
- ],
- selector: '{{QUBELY}} .qubely-separator {margin-top: {{separatorSpacing}}px;}'
- },
- ]
- },
- sourceOfCopiedStyle: { type: 'boolean', default: false }
- },
- deprecated: [
- {
- save(props) {
- const separators = {
- solid: { type: 'css', separator: 'solid', width: 300, stroke: 10 },
- double: { type: 'css', separator: 'double', width: 300, stroke: 10 },
- dotted: { type: 'css', separator: 'dotted', width: 300, stroke: 10 },
- dashed: { type: 'css', separator: 'dashed', width: 300, stroke: 10 },
- pin: { type: 'svg', separator: 'pin', svg: svg['pin'], width: 100, stroke: 0 },
- pin_filled: { type: 'svg', separator: 'pin_filled', svg: svg['pin_filled'], width: 100, stroke: 0 },
- zigzag: { type: 'svg', separator: 'zigzag', svg: svg['zigzag'], style: 'fill', width: 88, stroke: 5 },
- zigzag_large: { type: 'svg', separator: 'zigzag_large', svg: svg['zigzag_large'], style: 'fill', width: 161, stroke: 5 },
- }
+ const renderSeparators = (
+
+ {separatorStyle && (
+
+ {separators[separatorStyle].type == "css" && (
+
+ {separators[separatorStyle].svg}
+
+ )}
+
+ )}
+
+ );
- const { uniqueId, content, selector, dropCap, enableTitle, titleLevel, subTitleLevel, separatorStyle, separatorPosition, title, subTitle, subTitleContent, animation } = props.attributes
- const titleTagName = 'h' + titleLevel;
- const subTitleTagName = 'h' + subTitleLevel;
+ return (
+
+
+ {enableTitle == 1 && (
+
+
+ {separatorStyle &&
+ (separatorPosition == "left" ||
+ separatorPosition == "top" ||
+ separatorPosition == "leftright") ? (
+
+ {renderSeparators}
+
+ ) : (
+ ""
+ )}
+
+ {separatorStyle != "" &&
+ (separatorPosition == "right" ||
+ separatorPosition == "bottom" ||
+ separatorPosition == "leftright") ? (
+
+ {renderSeparators}
+
+ ) : (
+ ""
+ )}
+
- const renderSeparators =
- {separatorStyle &&
-
- {separators[separatorStyle].type == 'css' &&
- {separators[separatorStyle].svg}
- }
-
- }
-
-
- return (
-
-
- {enableTitle == 1 &&
-
-
- {separatorStyle && (separatorPosition == 'left' || separatorPosition == 'top' || separatorPosition == 'leftright') ?
{renderSeparators}
: ''}
-
- {separatorStyle != '' && (separatorPosition == 'right' || separatorPosition == 'bottom' || separatorPosition == 'leftright') ?
{renderSeparators}
: ''}
-
-
- {subTitle == 1 &&
-
this.handlePanelOpenings('Sub Title')}>
-
- }
-
- }
-
-
-
- )
- }
- },
- ],
- edit: Edit,
- save: Save,
-});
\ No newline at end of file
+ {subTitle == 1 && (
+
this.handlePanelOpenings("Sub Title")}
+ >
+
+ )}
+
+ )}
+
+
+
+ );
+ },
+ },
+ ],
+ edit: Edit,
+ save: Save,
+});
diff --git a/assets/reactjs/src/blocks/text/style.scss b/assets/reactjs/src/blocks/text/style.scss
index f4576f3c..8c9ebfb3 100644
--- a/assets/reactjs/src/blocks/text/style.scss
+++ b/assets/reactjs/src/blocks/text/style.scss
@@ -1,71 +1,71 @@
.editor-styles-wrapper .qubely-block-text {
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- padding: 0;
- margin: 0;
- line-height: 1;
- position: relative;
- &::before,
- &::after {
- display: none !important;
- }
- .qubely-text-has-bgcolor {
- padding-left: 10px;
- padding-right: 10px;
- }
- }
- &.qubely-has-drop-cap {
- &:after {
- content: " ";
- display: table;
- clear: both;
- }
- p::first-letter {
- float: left;
- line-height: 0.68;
- font-weight: 700;
- margin: 0.05em 0.1em 0 0;
- text-transform: uppercase;
- font-style: normal;
- }
- }
- p {
- padding: 0;
- margin: 0;
- transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out,
- box-shadow 300ms ease-in-out;
- }
- .qubely-block-text-title {
- margin: 0;
- transition: color 400ms, border-color 400ms, background-color 400ms, box-shadow 400ms;
- }
- .qubely-separator {
- font-size: 0;
- .qubely-separator-type-css,
- .qubely-separator-type-svg {
- display: inline-block;
- }
- }
- .qubely-separator-position-left,
- .qubely-separator-position-right,
- .qubely-separator-position-leftright {
- .qubely-block-text-title-inner {
- display: inline-flex;
- align-items: center;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ padding: 0;
+ margin: 0;
+ line-height: 1;
+ position: relative;
+ &::before,
+ &::after {
+ display: none !important;
+ }
+ .qubely-text-has-bgcolor {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ }
+ &.qubely-has-drop-cap {
+ &:after {
+ content: " ";
+ display: table;
+ clear: both;
+ }
+ p::first-letter {
+ float: left;
+ line-height: 0.68;
+ font-weight: 700;
+ margin: 0.05em 0.1em 0 0;
+ text-transform: uppercase;
+ font-style: normal;
+ }
+ }
+ p {
+ padding: 0;
+ margin: 0;
+ transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out,
+ box-shadow 300ms ease-in-out;
+ }
+ .qubely-block-text-title {
+ margin: 0;
+ transition: color 400ms, border-color 400ms, background-color 400ms, box-shadow 400ms;
+ }
+ .qubely-separator {
+ font-size: 0;
+ .qubely-separator-type-css,
+ .qubely-separator-type-svg {
+ display: inline-block;
+ }
+ }
+ .qubely-separator-position-left,
+ .qubely-separator-position-right,
+ .qubely-separator-position-leftright {
+ .qubely-block-text-title-inner {
+ display: inline-flex;
+ align-items: center;
- .qubely-block-text-title,
- .qubely-separator {
- display: inline-flex;
- }
- }
- }
+ .qubely-block-text-title,
+ .qubely-separator {
+ display: inline-flex;
+ }
+ }
+ }
}
.wp-block-qubely-text .qubely-block-text .qubely-block-text-title-container {
- color: inherit;
+ color: inherit;
}
/**
@@ -73,40 +73,36 @@
*/
*[data-tooltip] {
- position: relative;
+ position: relative;
}
[data-tooltip]:before {
- /* needed - do not change */
- content: attr(data-tooltip);
- position: absolute;
- pointer-events: none;
- opacity: 0;
- display: inline-block;
- /* customizable */
- transition: all 0.15s ease;
- padding: 5px 10px;
- color: white;
- border-radius: 2px;
- border-width: 0;
- white-space: nowrap;
- text-align: center;
- line-height: 1.6;
- font-size: 16px;
- box-shadow: none;
+ /* needed - do not change */
+ content: attr(data-tooltip);
+ position: absolute;
+ pointer-events: none;
+ opacity: 0;
+ display: inline-block;
+ /* customizable */
+ transition: all 0.15s ease;
+ padding: 5px 10px;
+ color: white;
+ border-radius: 2px;
+ border-width: 0;
+ white-space: nowrap;
+ text-align: center;
+ line-height: 1.6;
+ font-size: 16px;
+ box-shadow: none;
}
[data-tooltip]:hover:before {
- /* needed - do not change */
- opacity: 1;
- z-index: 1000;
- /* customizable */
- background: #1a1a1a;
- margin-top: -38px;
- margin-left: 20%;
-}
-
-.qubely-tooltip {
- background-color: gainsboro;
+ /* needed - do not change */
+ opacity: 1;
+ z-index: 1000;
+ /* customizable */
+ background: #1a1a1a;
+ margin-top: -38px;
+ margin-left: 20%;
}
/**
@@ -114,118 +110,118 @@
*/
.qubely-custom-popover .components-popover__content {
- border: 1px solid #e1e1e1;
- border-radius: 4px;
+ border: 1px solid #e1e1e1;
+ border-radius: 4px;
}
.qubely-popover-contents {
- min-width: 360px;
- display: block;
- padding: 30px 20px;
- display: flex;
- position: relative;
- input {
- flex: 1 1 0px;
- display: inline-block;
- padding: 11px 36px 11px 16px !important;
- height: 38px !important;
- border: 1px solid #e1e1e1 !important;
- border-radius: 4px !important;
- font-size: 16px;
- }
+ min-width: 360px;
+ display: block;
+ padding: 30px 20px;
+ display: flex;
+ position: relative;
+ input {
+ flex: 1 1 0px;
+ display: inline-block;
+ padding: 11px 36px 11px 16px !important;
+ height: 38px !important;
+ border: 1px solid #e1e1e1 !important;
+ border-radius: 4px !important;
+ font-size: 16px;
+ }
}
.qubely-custom-submit {
- right: 22px;
- top: 31px;
- display: inline-flex;
- text-decoration: none;
- font-size: 13px;
- margin: 0;
- border: 0;
- cursor: pointer;
- -webkit-appearance: none;
- background: none;
- transition: box-shadow 0.1s linear;
- height: 36px;
- align-items: center;
- box-sizing: border-box;
- padding: 0 9px;
- overflow: hidden;
- border-radius: 3px;
- color: #555d66;
- &:hover {
- background-color: #fff;
- color: #191e23;
- box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
- }
+ right: 22px;
+ top: 31px;
+ display: inline-flex;
+ text-decoration: none;
+ font-size: 13px;
+ margin: 0;
+ border: 0;
+ cursor: pointer;
+ -webkit-appearance: none;
+ background: none;
+ transition: box-shadow 0.1s linear;
+ height: 36px;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 0 9px;
+ overflow: hidden;
+ border-radius: 3px;
+ color: #555d66;
+ &:hover {
+ background-color: #fff;
+ color: #191e23;
+ box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
+ }
}
.tooltip-message {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .qubely-tooltip-text {
- margin-bottom: 5px;
- max-width: 210px;
- font-size: 14px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .qubely-action-buttons {
- display: inline-flex;
- .qubely-edit {
- margin-right: 10px;
- }
- .qubely-remove {
- background-color: #e65054;
- color: #fff;
- }
- }
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .qubely-tooltip-text {
+ margin-bottom: 5px;
+ max-width: 210px;
+ font-size: 14px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ .qubely-action-buttons {
+ display: inline-flex;
+ .qubely-edit {
+ margin-right: 10px;
+ }
+ .qubely-remove {
+ background-color: #e65054;
+ color: #fff;
+ }
+ }
}
.qubely-custom-popover.custom-fontsize {
- .components-popover__content {
- transition: 300ms;
- .qubely-popover-contents {
- padding: 15px;
- .qubely-font-size-message {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-direction: column;
- .qubely-field-range.qubely-field {
- width: 100%;
- .qubely-mb-10 {
- margin-bottom: 0px;
- }
- .qubely-field-child {
- .qubely-input-range {
- width: 100%;
- input {
- -webkit-appearance: auto;
- }
- input[type="range"] {
- min-width: 80%;
- }
- }
- }
- }
+ .components-popover__content {
+ transition: 300ms;
+ .qubely-popover-contents {
+ padding: 15px;
+ .qubely-font-size-message {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-direction: column;
+ .qubely-field-range.qubely-field {
+ width: 100%;
+ .qubely-mb-10 {
+ margin-bottom: 0px;
+ }
+ .qubely-field-child {
+ .qubely-input-range {
+ width: 100%;
+ input {
+ -webkit-appearance: auto;
+ }
+ input[type="range"] {
+ min-width: 80%;
+ }
+ }
+ }
+ }
- .qubely-action-buttons {
- display: flex;
- width: 100%;
- .qubely-edit {
- margin-right: 10px;
- }
- .qubely-remove {
- background-color: #e65054;
- color: #fff;
- }
- }
- }
- }
- }
+ .qubely-action-buttons {
+ display: flex;
+ width: 100%;
+ .qubely-edit {
+ margin-right: 10px;
+ }
+ .qubely-remove {
+ background-color: #e65054;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
}
diff --git a/assets/reactjs/src/blocks/timeline/Edit.js b/assets/reactjs/src/blocks/timeline/Edit.js
index 4e33b53a..777d5d14 100644
--- a/assets/reactjs/src/blocks/timeline/Edit.js
+++ b/assets/reactjs/src/blocks/timeline/Edit.js
@@ -1,12 +1,10 @@
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
const { Fragment, Component, createRef } = wp.element;
-const { PanelBody, Tooltip, Toolbar } = wp.components
-const { InspectorControls, RichText, BlockControls, MediaUpload } = wp.blockEditor
+const { PanelBody, Tooltip, Toolbar } = wp.components;
+const { InspectorControls, RichText, BlockControls, MediaUpload } = wp.blockEditor;
const {
IconList,
- Inline: {
- InlineToolbar
- },
+ Inline: { InlineToolbar },
RadioAdvanced,
Range,
Color,
@@ -19,161 +17,205 @@ const {
Alignment,
Padding,
Headings,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
withCSSGenerator,
InspectorTabs,
InspectorTab,
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
+ ContextMenu: { ContextMenu, handleContextMenu },
} = wp.qubelyComponents;
class Edit extends Component {
constructor(props) {
super(props);
this.state = {
- device: 'md',
+ device: "md",
spacer: true,
};
this.qubelyContextMenu = createRef();
}
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
-
updateTimelineContent = (key, value, index) => {
- const { setAttributes, attributes: { timelineItems, timelineContents } } = this.props
- if (key === 'add' || key === 'delete') {
- let updatedAttributes = key === 'add' ? [...timelineContents, { title: 'Timeline Block', date: 'January 1, 2021', description: 'Include detailed timelines for your products, company, etc with Qubely Timeline.' }] : timelineContents.slice(0, timelineItems - 1)
+ const {
+ setAttributes,
+ attributes: { timelineItems, timelineContents },
+ } = this.props;
+ if (key === "add" || key === "delete") {
+ let updatedAttributes =
+ key === "add"
+ ? [
+ ...timelineContents,
+ {
+ title: "Timeline Block",
+ date: "January 1, 2021",
+ description:
+ "Include detailed timelines for your products, company, etc with Qubely Timeline.",
+ },
+ ]
+ : timelineContents.slice(0, timelineItems - 1);
setAttributes({
timelineContents: updatedAttributes,
- timelineItems: key === 'add' ? timelineItems + 1 : timelineItems - 1
- })
+ timelineItems: key === "add" ? timelineItems + 1 : timelineItems - 1,
+ });
} else {
let updatedAttributes = timelineContents.map((data, itemIndex) => {
if (index === itemIndex) {
- return { ...data, [key]: value }
+ return { ...data, [key]: value };
} else {
- return data
+ return data;
}
- })
- setAttributes({ timelineContents: updatedAttributes })
+ });
+ setAttributes({ timelineContents: updatedAttributes });
}
-
- }
+ };
removeItem = (index) => {
- const { setAttributes, attributes: { timelineContents, timelineItems } } = this.props
- let newTimelineContents = JSON.parse(JSON.stringify(timelineContents))
- newTimelineContents.splice(index, 1)
- setAttributes({ timelineContents: newTimelineContents, timelineItems: timelineItems - 1 })
- }
+ const {
+ setAttributes,
+ attributes: { timelineContents, timelineItems },
+ } = this.props;
+ let newTimelineContents = JSON.parse(JSON.stringify(timelineContents));
+ newTimelineContents.splice(index, 1);
+ setAttributes({ timelineContents: newTimelineContents, timelineItems: timelineItems - 1 });
+ };
renderTimeline = () => {
- const { attributes: { timelineContents, enableContentBorder, headingLevel, enableDateTime, enableImage, connectorIcon } } = this.props
- const titleTagName = 'h' + headingLevel;
- return (timelineContents.map(({ title, date, description, image }, index) => {
-
+ const {
+ attributes: {
+ timelineContents,
+ enableContentBorder,
+ headingLevel,
+ enableDateTime,
+ enableImage,
+ connectorIcon,
+ },
+ } = this.props;
+ const titleTagName = "h" + headingLevel;
+ return timelineContents.map(({ title, date, description, image }, index) => {
return (
-
+
- {connectorIcon != '' &&
-
-
-
- {enableImage == 1 &&
-
+
+ {enableImage == 1 && (
+
this.updateTimelineContent('image', value, index)}
- allowedTypes={['image']}
+ onSelect={(value) => this.updateTimelineContent("image", value, index)}
+ allowedTypes={["image"]}
multiple={false}
value={image}
render={({ open }) => (
- {(image != undefined && image.url != undefined) ?
+ {image != undefined && image.url != undefined ? (
-
+
-
-
-
+
+
-
- this.updateTimelineContent('image', '', index)} role="button">
-
+
+ this.updateTimelineContent("image", "", index)
+ }
+ role="button"
+ >
+
- {__('Insert')}
+
+
+ {__("Insert")}
- }
+ )}
)}
/>
- }
+ )}
this.updateTimelineContent('title', value, index)}
+ onChange={(value) => this.updateTimelineContent("title", value, index)}
keepPlaceholderOnFocus
/>
this.updateTimelineContent('description', value, index)}
+ onChange={(value) => this.updateTimelineContent("description", value, index)}
keepPlaceholderOnFocus
/>
-
- this.removeItem(index)}>
+
+ this.removeItem(index)}
+ >
-
- {enableDateTime == 1 &&
+ {enableDateTime == 1 && (
this.updateTimelineContent('date', value, index)}
+ onChange={(value) => this.updateTimelineContent("date", value, index)}
keepPlaceholderOnFocus
/>
- }
+ )}
- )
- }))
- }
+ );
+ });
+ };
render() {
const {
@@ -236,126 +278,353 @@ class Edit extends Component {
hideTablet,
hideMobile,
globalCss,
- interaction
- } } = this.props;
+ interaction,
+ },
+ } = this.props;
const { device } = this.state;
return (
-
-
-
+
+
+
this.updateTimelineContent(value > timelineItems ? 'add' : 'delete')}
+ onChange={(value) =>
+ this.updateTimelineContent(value > timelineItems ? "add" : "delete")
+ }
+ />
+ setAttributes({ orientation: val })}
+ alignmentType="content"
+ disableJustify
/>
- setAttributes({ orientation: val })} alignmentType="content" disableJustify />
-
- setAttributes({ horizontalSpacing: val })} min={0} max={100} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ verticalSpacing: val })} min={0} max={100} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
+
+ setAttributes({ horizontalSpacing: val })}
+ min={0}
+ max={100}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ verticalSpacing: val })}
+ min={0}
+ max={100}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
-
- setAttributes({ contentBg: value })} />
- setAttributes({ enableContentBorder: val })} />
- {enableContentBorder == 1 &&
+
+ setAttributes({ contentBg: value })}
+ />
+ setAttributes({ enableContentBorder: val })}
+ />
+ {enableContentBorder == 1 && (
- setAttributes({ contentBorderWidth: val })} min={1} max={5} responsive device={device} unit={['px']} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ contentBorderColor: value })} />
+ setAttributes({ contentBorderWidth: val })}
+ min={1}
+ max={5}
+ responsive
+ device={device}
+ unit={["px"]}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ contentBorderColor: value })}
+ />
- }
- setAttributes({ contentBorderRadius: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ contentPadding: val })} min={0} max={200} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ contentBoxShadow: val })} disableInset />
+ )}
+ setAttributes({ contentBorderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ contentPadding: val })}
+ min={0}
+ max={200}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ contentBoxShadow: val })}
+ disableInset
+ />
setAttributes({ headingLevel: value })} />
- setAttributes({ headingTypography: val })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ headingColor: value })} />
- setAttributes({ headingSpacing: val })} min={0} max={100} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ headingLevel: value })}
+ />
+ setAttributes({ headingTypography: val })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ headingColor: value })}
+ />
+ setAttributes({ headingSpacing: val })}
+ min={0}
+ max={100}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ contentColor: value })} />
- setAttributes({ contentTypography: val })} device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ contentColor: value })}
+ />
+ setAttributes({ contentTypography: val })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ enableDateTime: val })} />
- {enableDateTime == 1 &&
+ setAttributes({ enableDateTime: val })}
+ />
+ {enableDateTime == 1 && (
- setAttributes({ enableDateTimeTypography: val })} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ enableDateTimeColor: value })} />
+ setAttributes({ enableDateTimeTypography: val })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ enableDateTimeColor: value })}
+ />
- }
+ )}
-
- setAttributes({ enableImage: val })} />
- {enableImage == 1 &&
+
+ setAttributes({ enableImage: val })}
+ />
+ {enableImage == 1 && (
- setAttributes({ imagePosition: value })}
+ setAttributes({ imagePosition: value })}
options={[
- { label: __('Before'), value: 'before', title: __('Before') },
- { label: __('After'), value: 'after', title: __('After') }
+ { label: __("Before"), value: "before", title: __("Before") },
+ { label: __("After"), value: "after", title: __("After") },
]}
/>
- setAttributes({ imageBorderRadius: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ imageSpacing: val })} min={0} max={100} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
+ setAttributes({ imageBorderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ imageSpacing: val })}
+ min={0}
+ max={100}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
+ )}
-
- setAttributes({ connectorColor: value })} />
- setAttributes({ connectorSize: val })} min={16} max={64} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ connectorBorder: val })} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ connectorBoxShadow: val })} disableInset />
- setAttributes({ connectorBorderRadius: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+
+ setAttributes({ connectorColor: value })}
+ />
+ setAttributes({ connectorSize: val })}
+ min={16}
+ max={64}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ connectorBorder: val })}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ connectorBoxShadow: val })}
+ disableInset
+ />
+ setAttributes({ connectorBorderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
setAttributes({ connectorIcon: val })} />
- setAttributes({ connectorIconSize: val })} min={16} max={64} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ connectorIconColor: value })} />
+ setAttributes({ connectorIcon: val })}
+ />
+ setAttributes({ connectorIconSize: val })}
+ min={16}
+ max={64}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ connectorIconColor: value })}
+ />
setAttributes({ connectorBarWidth: val })} min={2} max={20} responsive unit={['px', 'em', '%']} device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ connectorBarColor: value })} />
+ setAttributes({ connectorBarWidth: val })}
+ min={2}
+ max={20}
+ responsive
+ unit={["px", "em", "%"]}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ connectorBarColor: value })}
+ />
-
+
{animationSettings(uniqueId, animation, setAttributes)}
{interactionSettings(uniqueId, interaction, setAttributes)}
-
-
+
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
-
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ onContextMenu={(event) => handleContextMenu(event, this.qubelyContextMenu.current)}
>
-
- {this.renderTimeline()}
-
-
+
{this.renderTimeline()}
+
- )
+ );
}
}
diff --git a/assets/reactjs/src/blocks/timeline/Save.js b/assets/reactjs/src/blocks/timeline/Save.js
index 85803b9c..001fe7bd 100644
--- a/assets/reactjs/src/blocks/timeline/Save.js
+++ b/assets/reactjs/src/blocks/timeline/Save.js
@@ -1,55 +1,74 @@
-const { Component } = wp.element
-const { RichText } = wp.blockEditor
-const { HelperFunction: { animationAttr, IsInteraction } } = wp.qubelyComponents
+const { Component } = wp.element;
+const { RichText } = wp.blockEditor;
+const {
+ HelperFunction: { animationAttr, IsInteraction },
+} = wp.qubelyComponents;
class Save extends Component {
+ renderTimeline = () => {
+ const {
+ attributes: {
+ timelineContents,
+ enableContentBorder,
+ headingLevel,
+ enableDateTime,
+ enableImage,
+ connectorIcon,
+ },
+ } = this.props;
- renderTimeline = () => {
- const { attributes: { timelineContents, enableContentBorder, headingLevel, enableDateTime, enableImage, connectorIcon } } = this.props
+ const titleTagName = "h" + headingLevel;
- const titleTagName = 'h' + headingLevel;
-
- return (timelineContents.map(({ title, date, description, image }, index) => {
- return (
-
-
- {connectorIcon != '' &&
-
-
- {(enableImage == 1 && (image != undefined && image.url != undefined)) &&
-
-
+ return timelineContents.map(({ title, date, description, image }, index) => {
+ return (
+
+
+ {connectorIcon != "" &&
+
+ {enableImage == 1 && image != undefined && image.url != undefined && (
+
+
+
+ )}
+
+
- }
-
-
-
+ {enableDateTime == 1 && (
+
+
+ )}
- {enableDateTime == 1 &&
-
-
- }
-
- )
- }))
- }
+ );
+ });
+ };
- render() {
- const { attributes: { uniqueId, orientation, animation, interaction } } = this.props
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
- return (
-
-
-
- {this.renderTimeline()}
-
-
-
- )}
+ render() {
+ const {
+ attributes: { uniqueId, orientation, animation, interaction },
+ } = this.props;
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
+ return (
+
+
+
{this.renderTimeline()}
+
+
+ );
+ }
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/timeline/index.js b/assets/reactjs/src/blocks/timeline/index.js
index de0400a4..cf7d7a9c 100644
--- a/assets/reactjs/src/blocks/timeline/index.js
+++ b/assets/reactjs/src/blocks/timeline/index.js
@@ -1,564 +1,581 @@
/* eslint-disable react/react-in-jsx-scope */
-const { __ } = wp.i18n
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save'
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
-
-registerBlockType('qubely/timeline', {
- title: __('Timeline'),
- category: 'qubely',
- description: 'Showcase detailed timelines/roadmaps with Qubely Timeline.',
- icon:
,
- supports: {
- align: ['center', 'wide', 'full'],
+const { __ } = wp.i18n;
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
+
+registerBlockType("qubely/timeline", {
+ title: __("Timeline"),
+ category: "qubely",
+ description: "Showcase detailed timelines/roadmaps with Qubely Timeline.",
+ icon:
,
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ keywords: [__("Timeline"), __("Content"), __("Roadmap")],
+ example: {
+ attributes: {
+ timelineItems: 1,
+ orientation: "left",
+ enableDateTime: false,
+ verticalSpacing: {
+ md: 50,
+ unit: "px",
+ },
+ timelineContents: [
+ {
+ description: __("Make headlines/titles that attract users with Qubely Heading.", "qubely"),
+ },
+ {
+ description: __("Make headlines/title", "qubely"),
+ },
+ ],
+ },
},
- keywords: [
- __('Timeline'),
- __('Content'),
- __('Roadmap'),
- ],
- example: {
- attributes: {
- timelineItems: 1,
- orientation:'left',
- enableDateTime:false,
- verticalSpacing: {
- md: 50,
- unit:'px'
- },
- timelineContents: [
- {
- description: __( 'Make headlines/titles that attract users with Qubely Heading.', 'qubely' )
- },
- {
- description: __( 'Make headlines/title', 'qubely' )
- }
- ]
- },
- },
attributes: {
- uniqueId: { type: 'string', default: '' },
+ uniqueId: { type: "string", default: "" },
// Global
...globalAttributes,
spacer: {
- type: 'object',
+ type: "object",
default: {
spaceTop: {
- md: '10',
- unit: 'px'
+ md: "10",
+ unit: "px",
},
spaceBottom: {
- md: '10',
- unit: 'px'
- }
+ md: "10",
+ unit: "px",
+ },
},
- style: [
- { selector: '{{QUBELY}}' }
- ]
+ style: [{ selector: "{{QUBELY}}" }],
},
timelineContents: {
- type: 'Array',
+ type: "Array",
default: [
- { title: 'Qubely Blocks', date: 'January 1, 2019', description: 'Qubely offers a rich collection of highly customizable dedicated Gutenberg blocks.' },
- { title: 'Pre-made Sections', date: 'February 1, 2019', description: 'Qubely has a rich library of ready sections that can be imported and used as blocks on the Gutenberg editor.' },
- { title: 'Rich Blocks Collection', date: 'March 1, 2019', description: 'Get a rich collection of blocks that are highly customizable and easy to use even for the beginners.' },
- { title: 'Layout Packs', date: 'April 1, 2019', description: 'Qubely gives you many beautiful template layouts completely free of cost. These can also be customized and styled your way.' },
- { title: 'Smart Layout Builder', date: 'May 1, 2019', description: 'Its row-column structure lets you take 1 to as many as 6 columns in a single row.' },
- ]
+ {
+ title: "Qubely Blocks",
+ date: "January 1, 2019",
+ description: "Qubely offers a rich collection of highly customizable dedicated Gutenberg blocks.",
+ },
+ {
+ title: "Pre-made Sections",
+ date: "February 1, 2019",
+ description:
+ "Qubely has a rich library of ready sections that can be imported and used as blocks on the Gutenberg editor.",
+ },
+ {
+ title: "Rich Blocks Collection",
+ date: "March 1, 2019",
+ description:
+ "Get a rich collection of blocks that are highly customizable and easy to use even for the beginners.",
+ },
+ {
+ title: "Layout Packs",
+ date: "April 1, 2019",
+ description:
+ "Qubely gives you many beautiful template layouts completely free of cost. These can also be customized and styled your way.",
+ },
+ {
+ title: "Smart Layout Builder",
+ date: "May 1, 2019",
+ description: "Its row-column structure lets you take 1 to as many as 6 columns in a single row.",
+ },
+ ],
},
orientation: {
- type: 'string',
- default: 'center'
+ type: "string",
+ default: "center",
},
horizontalSpacing: {
- type: 'object',
+ type: "object",
default: {
md: 70,
- unit: 'px'
+ unit: "px",
},
style: [
{
- condition: [
- { key: 'orientation', relation: '==', value: 'center' }
- ],
- selector: '@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-item {padding-left: {{horizontalSpacing}};}}' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left {padding-right: {{horizontalSpacing}};} }' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-date-container {padding-left: {{horizontalSpacing}};} }' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right {padding-left: {{horizontalSpacing}};} }' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-date-container {padding-right: {{horizontalSpacing}};} }'
+ condition: [{ key: "orientation", relation: "==", value: "center" }],
+ selector:
+ "@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-item {padding-left: {{horizontalSpacing}};}}" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left {padding-right: {{horizontalSpacing}};} }" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-date-container {padding-left: {{horizontalSpacing}};} }" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right {padding-left: {{horizontalSpacing}};} }" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-date-container {padding-right: {{horizontalSpacing}};} }",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-timeline-item {padding-left: {{horizontalSpacing}};} ' +
- '{{QUBELY}} .qubely-timeline-date-container {padding-left: {{horizontalSpacing}};}'
+ condition: [{ key: "orientation", relation: "==", value: "left" }],
+ selector:
+ "{{QUBELY}} .qubely-timeline-item {padding-left: {{horizontalSpacing}};} " +
+ "{{QUBELY}} .qubely-timeline-date-container {padding-left: {{horizontalSpacing}};}",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-timeline-item {padding-right: {{horizontalSpacing}};} ' +
- '{{QUBELY}} .qubely-timeline-date-container {padding-right: {{horizontalSpacing}};}'
- }
- ]
+ condition: [{ key: "orientation", relation: "==", value: "right" }],
+ selector:
+ "{{QUBELY}} .qubely-timeline-item {padding-right: {{horizontalSpacing}};} " +
+ "{{QUBELY}} .qubely-timeline-date-container {padding-right: {{horizontalSpacing}};}",
+ },
+ ],
},
verticalSpacing: {
- type: 'object',
+ type: "object",
default: {
md: 100,
- unit: 'px'
+ unit: "px",
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-item:not(:last-child) {margin-bottom: {{verticalSpacing}};} '
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-timeline-item:not(:last-child) {margin-bottom: {{verticalSpacing}};} ",
+ },
+ ],
},
// Content
enableContentBorder: {
- type: 'boolean',
- default: false
+ type: "boolean",
+ default: false,
},
contentBorderWidth: {
- type: 'object',
+ type: "object",
default: {
md: 1,
- unit: 'px'
+ unit: "px",
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-content {border-style: solid; border-width: {{contentBorderWidth}};}'
+ selector:
+ "{{QUBELY}} .qubely-timeline-content {border-style: solid; border-width: {{contentBorderWidth}};}",
},
{
condition: [
- { key: 'enableContentBorder', relation: '==', value: true },
- { key: 'orientation', relation: '==', value: 'center' }
+ { key: "enableContentBorder", relation: "==", value: true },
+ { key: "orientation", relation: "==", value: "center" },
],
- selector: '@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); left: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);} }' + // Phone
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); right: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);} }' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); left: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);} }'
+ selector:
+ "@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); left: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);} }" + // Phone
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); right: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);} }" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); left: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);} }",
},
{
condition: [
- { key: 'enableContentBorder', relation: '==', value: true },
- { key: 'orientation', relation: '==', value: 'left' }
+ { key: "enableContentBorder", relation: "==", value: true },
+ { key: "orientation", relation: "==", value: "left" },
],
- selector: '{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); left: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);}'
+ selector:
+ "{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); left: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);}",
},
{
condition: [
- { key: 'enableContentBorder', relation: '==', value: true },
- { key: 'orientation', relation: '==', value: 'right' }
+ { key: "enableContentBorder", relation: "==", value: true },
+ { key: "orientation", relation: "==", value: "right" },
],
- selector: '{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); right: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);}'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-width: calc(15px + {{contentBorderWidth}}); right: calc(-15px*2 - {{contentBorderWidth}}*2 - {{contentBorderWidth}}/2);}",
+ },
+ ],
},
contentBorderColor: {
- type: 'string',
- default: '#F6F7FB',
+ type: "string",
+ default: "#F6F7FB",
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-content {border-color: {{contentBorderColor}};}'
+ selector: "{{QUBELY}} .qubely-timeline-content {border-color: {{contentBorderColor}};}",
},
{
condition: [
- { key: 'enableContentBorder', relation: '==', value: true },
- { key: 'orientation', relation: '==', value: 'center' }
+ { key: "enableContentBorder", relation: "==", value: true },
+ { key: "orientation", relation: "==", value: "center" },
],
- selector: '@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent {{contentBorderColor}} transparent transparent;} }' + // Phone
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent transparent transparent {{contentBorderColor}};}' +
- '{{QUBELY}} .qubely-timeline-right .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent {{contentBorderColor}} transparent transparent;} }'
+ selector:
+ "@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent {{contentBorderColor}} transparent transparent;} }" + // Phone
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent transparent transparent {{contentBorderColor}};}" +
+ "{{QUBELY}} .qubely-timeline-right .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent {{contentBorderColor}} transparent transparent;} }",
},
{
condition: [
- { key: 'enableContentBorder', relation: '==', value: true },
- { key: 'orientation', relation: '==', value: 'left' }
+ { key: "enableContentBorder", relation: "==", value: true },
+ { key: "orientation", relation: "==", value: "left" },
],
- selector: '{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent {{contentBorderColor}} transparent transparent;}'
+ selector:
+ "{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent {{contentBorderColor}} transparent transparent;}",
},
{
condition: [
- { key: 'enableContentBorder', relation: '==', value: true },
- { key: 'orientation', relation: '==', value: 'right' }
+ { key: "enableContentBorder", relation: "==", value: true },
+ { key: "orientation", relation: "==", value: "right" },
],
- selector: '{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent transparent transparent {{contentBorderColor}};}'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-timeline-content.qubely-content-has-border:after {border-color: transparent transparent transparent {{contentBorderColor}};}",
+ },
+ ],
},
contentBg: {
- type: 'string',
- default: '#F9F9F9',
+ type: "string",
+ default: "#F9F9F9",
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-content {background-color: {{contentBg}};}'
+ selector: "{{QUBELY}} .qubely-timeline-content {background-color: {{contentBg}};}",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'center' }
- ],
- selector: '@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-content:before {border-color: transparent {{contentBg}} transparent transparent;} }' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-content:before {border-color: transparent transparent transparent {{contentBg}};} }' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-content:before {border-color: transparent {{contentBg}} transparent transparent;} }'
+ condition: [{ key: "orientation", relation: "==", value: "center" }],
+ selector:
+ "@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-content:before {border-color: transparent {{contentBg}} transparent transparent;} }" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-content:before {border-color: transparent transparent transparent {{contentBg}};} }" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-content:before {border-color: transparent {{contentBg}} transparent transparent;} }",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-timeline-content:before {border-color: transparent {{contentBg}} transparent transparent;}'
+ condition: [{ key: "orientation", relation: "==", value: "left" }],
+ selector:
+ "{{QUBELY}} .qubely-timeline-content:before {border-color: transparent {{contentBg}} transparent transparent;}",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-timeline-content:before {border-color: transparent transparent transparent {{contentBg}};}'
- }
- ]
+ condition: [{ key: "orientation", relation: "==", value: "right" }],
+ selector:
+ "{{QUBELY}} .qubely-timeline-content:before {border-color: transparent transparent transparent {{contentBg}};}",
+ },
+ ],
},
contentPadding: {
- type: 'object',
+ type: "object",
default: {
openPadding: 1,
- paddingType: 'global',
- unit: 'px',
+ paddingType: "global",
+ unit: "px",
global: {
- md: 30
- }
+ md: 30,
+ },
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-content'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-content",
+ },
+ ],
},
contentBorderRadius: {
- type: 'object',
+ type: "object",
default: {
openBorderRadius: 1,
- radiusType: 'global',
+ radiusType: "global",
global: {
- md: 5
+ md: 5,
},
- unit: 'px'
+ unit: "px",
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-content'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-content",
+ },
+ ],
},
contentBoxShadow: {
- type: 'object',
+ type: "object",
default: {
openShadow: true,
vertical: 3,
horizontal: 0,
blur: 6,
spread: 0,
- color: 'rgba(0,0,0,0.1)',
+ color: "rgba(0,0,0,0.1)",
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-content'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-content",
+ },
+ ],
},
// Heading
headingLevel: {
- type: 'number',
+ type: "number",
default: 4,
},
headingTypography: {
- type: 'object',
+ type: "object",
default: {},
style: [
{
- selector: '{{QUBELY}} .qubely-block-timeline .qubely-timeline-items .qubely-timeline-item .qubely-timeline-content .qubely-timeline-description .qubely-timeline-title'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-block-timeline .qubely-timeline-items .qubely-timeline-item .qubely-timeline-content .qubely-timeline-description .qubely-timeline-title",
+ },
+ ],
},
headingColor: {
- type: 'string',
- default: '',
+ type: "string",
+ default: "",
style: [
- { selector: '{{QUBELY}} .qubely-block-timeline .qubely-timeline-items .qubely-timeline-item .qubely-timeline-content .qubely-timeline-description .qubely-timeline-title {color: {{headingColor}};}' }
- ]
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-timeline .qubely-timeline-items .qubely-timeline-item .qubely-timeline-content .qubely-timeline-description .qubely-timeline-title {color: {{headingColor}};}",
+ },
+ ],
},
headingSpacing: {
- type: 'object',
+ type: "object",
default: {
md: 10,
- unit: 'px'
+ unit: "px",
},
- style: [
- { selector: '{{QUBELY}} .qubely-timeline-title {margin: 0 0 {{headingSpacing}} 0;}' }
- ]
+ style: [{ selector: "{{QUBELY}} .qubely-timeline-title {margin: 0 0 {{headingSpacing}} 0;}" }],
},
// Content
contentColor: {
- type: 'string',
- default: '',
+ type: "string",
+ default: "",
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-description {color: {{contentColor}};}'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-description {color: {{contentColor}};}",
+ },
+ ],
},
contentTypography: {
- type: 'object',
+ type: "object",
default: {},
style: [
{
- selector: '{{QUBELY}} .qubely-block-timeline .qubely-timeline-items .qubely-timeline-item .qubely-timeline-content .qubely-timeline-description'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-block-timeline .qubely-timeline-items .qubely-timeline-item .qubely-timeline-content .qubely-timeline-description",
+ },
+ ],
},
// Date Time
enableDateTime: {
- type: 'boolean',
- default: true
+ type: "boolean",
+ default: true,
},
enableDateTimeTypography: {
- type: 'object',
+ type: "object",
default: {},
style: [
{
- condition: [
- { key: 'enableDateTime', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-timeline-date'
- }
- ]
+ condition: [{ key: "enableDateTime", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-timeline-date",
+ },
+ ],
},
enableDateTimeColor: {
- type: 'string',
- default: '',
+ type: "string",
+ default: "",
style: [
{
- condition: [
- { key: 'enableDateTime', relation: '==', value: true }
- ],
- selector: '{{QUBELY}} .qubely-timeline-date {color: {{enableDateTimeColor}};}'
- }
- ]
+ condition: [{ key: "enableDateTime", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-timeline-date {color: {{enableDateTimeColor}};}",
+ },
+ ],
},
enableImage: {
- type: 'boolean',
+ type: "boolean",
default: false,
},
imagePosition: {
- type: 'string',
- default: 'before',
+ type: "string",
+ default: "before",
style: [
{
condition: [
- { key: 'enableImage', relation: '==', value: true },
- { key: 'imagePosition', relation: '==', value: 'after' },
+ { key: "enableImage", relation: "==", value: true },
+ { key: "imagePosition", relation: "==", value: "after" },
],
- selector: '{{QUBELY}} .qubely-timeline-content {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-timeline-content {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}",
+ },
+ ],
},
imageBorderRadius: {
- type: 'object',
+ type: "object",
default: {},
style: [
{
- condition: [
- { key: 'enableImage', relation: '==', value: true },
- ],
- selector: '{{QUBELY}} .qubely-timeline-image-container img'
- }
- ]
+ condition: [{ key: "enableImage", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-timeline-image-container img",
+ },
+ ],
},
imageSpacing: {
- type: 'object',
+ type: "object",
default: {
md: 20,
- unit: 'px'
+ unit: "px",
},
style: [
{
condition: [
- { key: 'enableImage', relation: '==', value: true },
- { key: 'imagePosition', relation: '==', value: 'before' },
+ { key: "enableImage", relation: "==", value: true },
+ { key: "imagePosition", relation: "==", value: "before" },
],
- selector: '{{QUBELY}} .qubely-timeline-image-container {margin-bottom: {{imageSpacing}};}'
+ selector: "{{QUBELY}} .qubely-timeline-image-container {margin-bottom: {{imageSpacing}};}",
},
{
condition: [
- { key: 'enableImage', relation: '==', value: true },
- { key: 'imagePosition', relation: '==', value: 'after' },
+ { key: "enableImage", relation: "==", value: true },
+ { key: "imagePosition", relation: "==", value: "after" },
],
- selector: '{{QUBELY}} .qubely-timeline-image-container {margin-top: {{imageSpacing}};}'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-image-container {margin-top: {{imageSpacing}};}",
+ },
+ ],
},
// Connector
connectorSize: {
- type: 'object',
+ type: "object",
default: {
md: 48,
- unit: 'px'
+ unit: "px",
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-connector {width: {{connectorSize}}; height: {{connectorSize}};}'
+ selector:
+ "{{QUBELY}} .qubely-timeline-connector {width: {{connectorSize}}; height: {{connectorSize}};}",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'center' }
- ],
- selector: '@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-connector {left: calc(-{{connectorSize}}/2);margin-top: calc(-{{connectorSize}}/2);} }' + // Phone
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-connector {right: calc(-{{connectorSize}}/2);} }' +
- '@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-connector {left: calc(-{{connectorSize}}/2);} }'
+ condition: [{ key: "orientation", relation: "==", value: "center" }],
+ selector:
+ "@media (max-width: 767px) { {{QUBELY}} .qubely-timeline-connector {left: calc(-{{connectorSize}}/2);margin-top: calc(-{{connectorSize}}/2);} }" + // Phone
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-left .qubely-timeline-connector {right: calc(-{{connectorSize}}/2);} }" +
+ "@media (min-width: 768px) { {{QUBELY}} .qubely-timeline-right .qubely-timeline-connector {left: calc(-{{connectorSize}}/2);} }",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'left' }
- ],
- selector: '{{QUBELY}} .qubely-timeline-connector {left: calc(-{{connectorSize}}/2); margin-top: calc(-{{connectorSize}}/2)}'
+ condition: [{ key: "orientation", relation: "==", value: "left" }],
+ selector:
+ "{{QUBELY}} .qubely-timeline-connector {left: calc(-{{connectorSize}}/2); margin-top: calc(-{{connectorSize}}/2)}",
},
{
- condition: [
- { key: 'orientation', relation: '==', value: 'right' }
- ],
- selector: '{{QUBELY}} .qubely-timeline-connector {right: calc(-{{connectorSize}}/2); margin-top: calc(-{{connectorSize}}/2)}'
- }
- ]
+ condition: [{ key: "orientation", relation: "==", value: "right" }],
+ selector:
+ "{{QUBELY}} .qubely-timeline-connector {right: calc(-{{connectorSize}}/2); margin-top: calc(-{{connectorSize}}/2)}",
+ },
+ ],
},
connectorColor: {
- type: 'string',
- default: 'var(--qubely-color-1)',
+ type: "string",
+ default: "var(--qubely-color-1)",
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-connector {background-color: {{connectorColor}};}'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-connector {background-color: {{connectorColor}};}",
+ },
+ ],
},
connectorBorder: {
- type: 'object',
+ type: "object",
default: {},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-connector'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-connector",
+ },
+ ],
},
connectorBoxShadow: {
- type: 'object',
+ type: "object",
default: {},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-connector'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-connector",
+ },
+ ],
},
connectorBorderRadius: {
- type: 'object',
+ type: "object",
default: {
openBorderRadius: 1,
- radiusType: 'global',
+ radiusType: "global",
global: {
- md: 50
+ md: 50,
},
- unit: 'px',
+ unit: "px",
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-connector'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-connector",
+ },
+ ],
},
connectorIcon: {
- type: 'string',
- default: 'far fa-calendar-times'
+ type: "string",
+ default: "far fa-calendar-times",
},
connectorIconSize: {
- type: 'object',
+ type: "object",
default: {
md: 18,
- unit: 'px'
+ unit: "px",
},
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-connector-icon {font-size: {{connectorIconSize}};}'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-connector-icon {font-size: {{connectorIconSize}};}",
+ },
+ ],
},
connectorIconColor: {
- type: 'string',
- default: '#fff',
+ type: "string",
+ default: "#fff",
style: [
{
- selector: '{{QUBELY}} .qubely-timeline-connector-icon {color: {{connectorIconColor}};}'
- }
- ]
+ selector: "{{QUBELY}} .qubely-timeline-connector-icon {color: {{connectorIconColor}};}",
+ },
+ ],
},
// Bar
connectorBarWidth: {
- type: 'object',
+ type: "object",
default: {
md: 6,
- unit: 'px'
+ unit: "px",
},
style: [
{
- selector: '{{QUBELY}} .qubely-block-timeline:after {width: {{connectorBarWidth}};}'
- }
- ]
+ selector: "{{QUBELY}} .qubely-block-timeline:after {width: {{connectorBarWidth}};}",
+ },
+ ],
},
connectorBarColor: {
- type: 'string',
- default: '#D2D2D2',
+ type: "string",
+ default: "#D2D2D2",
style: [
{
- selector: '{{QUBELY}} .qubely-block-timeline:after {background-color: {{connectorBarColor}};}'
- }
- ]
+ selector: "{{QUBELY}} .qubely-block-timeline:after {background-color: {{connectorBarColor}};}",
+ },
+ ],
},
//
- timelineItems: { type: 'number', default: 5 },
- sourceOfCopiedStyle: { type: 'boolean', default: false },
+ timelineItems: { type: "number", default: 5 },
+ sourceOfCopiedStyle: { type: "boolean", default: false },
},
edit: Edit,
- save: Save
+ save: Save,
});
diff --git a/assets/reactjs/src/blocks/timeline/style.scss b/assets/reactjs/src/blocks/timeline/style.scss
index 8235420f..55de15c7 100644
--- a/assets/reactjs/src/blocks/timeline/style.scss
+++ b/assets/reactjs/src/blocks/timeline/style.scss
@@ -1,9 +1,9 @@
.qubely-block-timeline {
position: relative;
-
+
// Bar
&:after {
- content: '';
+ content: "";
position: absolute;
top: 0;
bottom: 0;
@@ -23,12 +23,12 @@
}
.qubely-timeline-date-container {
position: relative;
- }
- &.qubely-timeline-orientation-center {
- .qubely-timeline-date-container {
- position: absolute;
- }
- }
+ }
+ &.qubely-timeline-orientation-center {
+ .qubely-timeline-date-container {
+ position: absolute;
+ }
+ }
// Image
.qubely-timeline-image-container {
@@ -59,7 +59,7 @@
.qubely-insert-image {
text-align: center;
display: inline-block;
- color: #2184F9;
+ color: #2184f9;
text-decoration: none;
line-height: 1;
span {
@@ -86,7 +86,7 @@
// Content
.qubely-timeline-content {
position: relative;
-
+
.qubely-action-timeline-remove {
display: none;
font-size: 12px;
@@ -94,7 +94,7 @@
height: 18px;
line-height: 20px;
text-align: center;
- background: rgba(0, 0, 0, .8);
+ background: rgba(0, 0, 0, 0.8);
color: #fff;
position: absolute;
top: -9px;
@@ -128,7 +128,7 @@
z-index: 0;
}
}
-
+
&:hover {
.qubely-action-timeline-remove {
display: block;
@@ -140,7 +140,6 @@
@media (min-width: 768px) {
// Center
&.qubely-timeline-orientation-center {
-
// Bar
&::after {
left: 50%;
@@ -172,7 +171,7 @@
text-align: left;
}
}
-
+
.qubely-timeline-right {
left: 50%;
.qubely-timeline-content {
@@ -215,12 +214,9 @@
}
}
-
-
// Phone
@media (max-width: 767px) {
&.qubely-timeline-orientation-center {
-
.qubely-timeline-content {
&:before {
left: -30px;
@@ -229,23 +225,23 @@
.qubely-timeline-date-container {
margin-top: 10px;
- }
- .qubely-timeline-date-container {
- position: relative;
- }
- }
+ }
+ .qubely-timeline-date-container {
+ position: relative;
+ }
+ }
&.qubely-timeline-orientation-center,
&.qubely-timeline-orientation-left {
margin-left: 20px;
- }
- &.qubely-timeline-orientation-left {
- .qubely-timeline-date-container {
+ }
+ &.qubely-timeline-orientation-left {
+ .qubely-timeline-date-container {
position: absolute;
- }
- }
+ }
+ }
&.qubely-timeline-orientation-right {
margin-right: 20px;
}
}
-}
\ No newline at end of file
+}
diff --git a/assets/reactjs/src/blocks/videopopup/Edit.js b/assets/reactjs/src/blocks/videopopup/Edit.js
index a985fa6f..a6c6ed44 100644
--- a/assets/reactjs/src/blocks/videopopup/Edit.js
+++ b/assets/reactjs/src/blocks/videopopup/Edit.js
@@ -1,335 +1,532 @@
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
const { Fragment, Component, createRef } = wp.element;
-const { PanelBody, RangeControl, TextControl, Toolbar } = wp.components
-const { InspectorControls, BlockControls } = wp.blockEditor
+const { PanelBody, RangeControl, TextControl, Toolbar } = wp.components;
+const { InspectorControls, BlockControls } = wp.blockEditor;
const {
- Media,
- Background,
- Tabs,
- Tab,
- Range,
- BoxShadow,
- Separator,
- RadioAdvanced,
- Typography,
- Select,
- Color,
- Styles,
- Toggle,
- Border,
- Alignment,
- BorderRadius,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- Inline: {
- InlineToolbar
- },
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- withCSSGenerator,
- InspectorTabs,
- InspectorTab,
- InspectorSections
+ Media,
+ Background,
+ Tabs,
+ Tab,
+ Range,
+ BoxShadow,
+ Separator,
+ RadioAdvanced,
+ Typography,
+ Select,
+ Color,
+ Styles,
+ Toggle,
+ Border,
+ Alignment,
+ BorderRadius,
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ Inline: { InlineToolbar },
+ ContextMenu: { ContextMenu, handleContextMenu },
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+ InspectorSections,
} = wp.qubelyComponents;
-import icons from '../../helpers/icons';
+import icons from "../../helpers/icons";
class Edit extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ spacer: true,
+ };
+ this.qubelyContextMenu = createRef();
+ }
- constructor(props) {
- super(props);
- this.state = {
- device: 'md',
- spacer: true
- };
- this.qubelyContextMenu = createRef();
- }
+ componentDidMount() {
+ this.$el = $(this.el);
+ this.$el.magnificPopup({
+ type: "iframe",
+ rtl: true,
+ mainClass: "mfp-fade",
+ removalDelay: 300,
+ preloader: false,
+ fixedContentPos: false,
+ });
+ }
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
+ render() {
+ const {
+ name,
+ clientId,
+ attributes,
+ isSelected,
+ setAttributes,
+ attributes: {
+ uniqueId,
+ className,
+ videoSource,
+ bgVideo,
+ url,
+ icon,
+ height,
+ iconColor,
+ iconHoverColor,
+ iconSize,
+ iconSizeCustom,
+ background,
+ enableBackgroundOverlay,
+ borderRadius,
+ layout,
+ shadow,
+ shadowHover,
+ postfix,
+ prefix,
+ typography,
+ textGap,
+ overlayBackground,
+ overlayBlend,
+ overlayOpacity,
+ overlayHoverOpacity,
+ iconBorderRadius,
+ iconBgColor,
+ isRipple,
+ iconHoverBgColor,
+ border,
+ hoverBorder,
+ prePostColor,
+ prePostHoverColor,
+ alignment,
- this.$el = $(this.el);
- this.$el.magnificPopup({
- type: 'iframe',
- rtl: true,
- mainClass: 'mfp-fade',
- removalDelay: 300,
- preloader: false,
- fixedContentPos: false
- });
- }
+ //animation
+ animation,
+ globalZindex,
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ interaction,
+ },
+ } = this.props;
- render() {
- const {
- name,
- clientId,
- attributes,
- isSelected,
- setAttributes,
- attributes: {
- uniqueId,
- className,
- videoSource,
- bgVideo,
- url,
- icon,
- height,
- iconColor,
- iconHoverColor,
- iconSize,
- iconSizeCustom,
- background,
- enableBackgroundOverlay,
- borderRadius,
- layout,
- shadow,
- shadowHover,
- postfix,
- prefix,
- typography,
- textGap,
- overlayBackground,
- overlayBlend,
- overlayOpacity,
- overlayHoverOpacity,
- iconBorderRadius,
- iconBgColor,
- isRipple,
- iconHoverBgColor,
- border,
- hoverBorder,
- prePostColor,
- prePostHoverColor,
- alignment,
+ const { device } = this.state;
- //animation
- animation,
- globalZindex,
- enablePosition,
- selectPosition,
- positionXaxis,
- positionYaxis,
- hideTablet,
- hideMobile,
- globalCss,
- interaction
- }
- } = this.props
+ return (
+
+
+
+
+
+
+
+ setAttributes({ layout: val })}
+ options={[
+ { value: "fill", svg: icons.videopopup_fill, label: __("Fill") },
+ { value: "nofill", svg: icons.videopopup_classic, label: __("Classic") },
+ ]}
+ />
+ setAttributes({ alignment: val })}
+ disableJustify
+ />
+
- const { device } = this.state
+
+ setAttributes({ videoSource: val })}
+ />
+ {videoSource == "external" ? (
+ {
+ if (val.indexOf("youtu.be")) {
+ val = val.replace("youtu.be/", "www.youtube.com/watch?v=");
+ }
+ setAttributes({ url: val });
+ }}
+ />
+ ) : (
+ setAttributes({ bgVideo: val })}
+ />
+ )}
+
- return (
-
-
-
-
-
-
-
- setAttributes({ layout: val })}
- options={[
- { value: 'fill', svg: icons.videopopup_fill, label: __('Fill') },
- { value: 'nofill', svg: icons.videopopup_classic, label: __('Classic') },
- ]}
- />
- setAttributes({ alignment: val })} disableJustify />
-
+
+ setAttributes({ icon: val })}
+ />
-
- setAttributes({ videoSource: val })} />
- {videoSource == 'external' ?
- {
- if (val.indexOf('youtu.be')) {
- val = val.replace("youtu.be/", "www.youtube.com/watch?v=");
- }
- setAttributes({ url: val })
- }} />
- :
- setAttributes({ bgVideo: val })}
- />
- }
-
+ setAttributes({ iconBorderRadius: val })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
-
- setAttributes({ icon: val })}
- />
+ setAttributes({ iconSize: val })}
+ />
+ {iconSize == "custom" && (
+
+ setAttributes({ iconSizeCustom: val })}
+ min={20}
+ max={200}
+ responsive
+ unit
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+ )}
- setAttributes({ iconBorderRadius: val })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+
+
+ setAttributes({ iconColor: val })}
+ />
+ setAttributes({ iconBgColor: val })}
+ />
+ setAttributes({ border: val })}
+ min={0}
+ max={20}
+ responsive
+ unit
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+ setAttributes({ iconHoverColor: val })}
+ />
+ setAttributes({ iconHoverBgColor: val })}
+ />
+ setAttributes({ hoverBorder: val })}
+ min={0}
+ max={20}
+ responsive
+ unit
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
- setAttributes({ iconSize: val })}
- />
- {iconSize == 'custom' &&
-
- setAttributes({ iconSizeCustom: val })} min={20} max={200} responsive unit device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- }
+ {iconBgColor && (
+ setAttributes({ isRipple: val })}
+ />
+ )}
+
-
-
- setAttributes({ iconColor: val })} />
- setAttributes({ iconBgColor: val })} />
- setAttributes({ border: val })} min={0} max={20} responsive unit device={device} onDeviceChange={value => this.setState({ device: value })} />
-
-
- setAttributes({ iconHoverColor: val })} />
- setAttributes({ iconHoverBgColor: val })} />
- setAttributes({ hoverBorder: val })} min={0} max={20} responsive unit device={device} onDeviceChange={value => this.setState({ device: value })} />
-
-
+
+ setAttributes({ prefix: val })}
+ />
+ setAttributes({ postfix: val })}
+ />
+ {(prefix || postfix) && (
+
+ setAttributes({ textGap: val })}
+ min={0}
+ max={150}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ typography: val })}
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+
+
+ setAttributes({ prePostColor: val })}
+ />
+
+
+ setAttributes({ prePostHoverColor: val })}
+ />
+
+
+
+ )}
+
- {iconBgColor &&
- setAttributes({ isRipple: val })} />
- }
-
+ {layout == "fill" && (
+
+
+ setAttributes({ height: val })}
+ min={100}
+ max={1200}
+ responsive
+ unit
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ background: val })}
+ />
+ {background.openBg == 1 && (
+
+ setAttributes({ borderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ enableBackgroundOverlay: val })}
+ />
+ {enableBackgroundOverlay == 1 && (
+
+
+ setAttributes({ overlayBackground: val })
+ }
+ />
+ {overlayBackground.openBg == 1 && (
+
+
+ setAttributes({ overlayOpacity: val })
+ }
+ />
+
+ setAttributes({ overlayHoverOpacity: val })
+ }
+ />
+
+ setAttributes({ overlayBlend: val })
+ }
+ />
+
+ )}
+
+ )}
+
+ )}
+
+
+ setAttributes({ shadow: val })}
+ />
+
+
+ setAttributes({ shadowHover: val })}
+ />
+
+
+
+
+ )}
+
+
+ {animationSettings(uniqueId, animation, setAttributes)}
+ {interactionSettings(uniqueId, interaction, setAttributes)}
+
+
+
-
- setAttributes({ prefix: val })} />
- setAttributes({ postfix: val })} />
- {(prefix || postfix) &&
-
- setAttributes({ textGap: val })} min={0} max={150} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ typography: val })} device={device} onDeviceChange={value => this.setState({ device: value })} />
-
-
- setAttributes({ prePostColor: val })} />
-
-
- setAttributes({ prePostHoverColor: val })} />
-
-
-
- }
-
+
+
+
+
- {layout == 'fill' &&
-
-
- setAttributes({ height: val })} min={100} max={1200} responsive unit device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ background: val })} />
- {background.openBg == 1 &&
-
- setAttributes({ borderRadius: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ enableBackgroundOverlay: val })} />
- {enableBackgroundOverlay == 1 &&
-
- setAttributes({ overlayBackground: val })} />
- {overlayBackground.openBg == 1 &&
-
- setAttributes({ overlayOpacity: val })} />
- setAttributes({ overlayHoverOpacity: val })} />
- setAttributes({ overlayBlend: val })} />
-
- }
-
- }
-
- }
-
-
- setAttributes({ shadow: val })} />
-
-
- setAttributes({ shadowHover: val })} />
-
-
-
-
- }
-
-
- {animationSettings(uniqueId, animation, setAttributes)}
- {interactionSettings(uniqueId, interaction, setAttributes)}
-
-
-
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
-
-
-
-
-
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
-
-
-
handleContextMenu(event, this.qubelyContextMenu.current)}
- >
- {layout == 'fill' &&
}
-
-
-
-
-
-
- )
- }
+
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ >
+ {layout == "fill" &&
}
+
+
+
+
+
+
+ );
+ }
}
-export default withCSSGenerator()(Edit);
\ No newline at end of file
+export default withCSSGenerator()(Edit);
diff --git a/assets/reactjs/src/blocks/videopopup/Save.js b/assets/reactjs/src/blocks/videopopup/Save.js
index 723d8d7f..82854d96 100644
--- a/assets/reactjs/src/blocks/videopopup/Save.js
+++ b/assets/reactjs/src/blocks/videopopup/Save.js
@@ -1,29 +1,45 @@
const { Component } = wp.element;
-const { HelperFunction: { animationAttr, IsInteraction } } = wp.qubelyComponents
+const {
+ HelperFunction: { animationAttr, IsInteraction },
+} = wp.qubelyComponents;
class Save extends Component {
- render() {
- const { uniqueId, layout, animation, alignment, icon, postfix, prefix, iconSize, url, isRipple, iconBorderRadius, iconBgColor, videoSource, bgVideo, interaction } = this.props.attributes
- const interactionClass = IsInteraction(interaction) ? 'qubley-block-interaction' : '';
+ render() {
+ const {
+ uniqueId,
+ layout,
+ animation,
+ alignment,
+ icon,
+ postfix,
+ prefix,
+ iconSize,
+ url,
+ isRipple,
+ iconBorderRadius,
+ iconBgColor,
+ videoSource,
+ bgVideo,
+ interaction,
+ } = this.props.attributes;
+ const interactionClass = IsInteraction(interaction) ? "qubley-block-interaction" : "";
return (
- {layout == 'fill' &&
}
-
- )
- }
+ );
+ }
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/videopopup/index.js b/assets/reactjs/src/blocks/videopopup/index.js
index 365fd2c3..1337df0a 100644
--- a/assets/reactjs/src/blocks/videopopup/index.js
+++ b/assets/reactjs/src/blocks/videopopup/index.js
@@ -1,153 +1,259 @@
/* eslint-disable react/react-in-jsx-scope */
-import './style.scss'
-import Edit from './Edit'
-import Save from './Save';
-const { __ } = wp.i18n
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+import "./style.scss";
+import Edit from "./Edit";
+import Save from "./Save";
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-registerBlockType('qubely/videopopup', {
- title: __('Video Popup'),
- description: 'Engage your audience with videos with Qubely Video Popup.',
- icon:
,
- category: 'qubely',
- supports: {
- align: ['center', 'wide', 'full'],
+registerBlockType("qubely/videopopup", {
+ title: __("Video Popup"),
+ description: "Engage your audience with videos with Qubely Video Popup.",
+ icon:
,
+ category: "qubely",
+ supports: {
+ align: ["center", "wide", "full"],
+ },
+ keywords: [__("video"), __("popup"), __("video popup")],
+ example: {
+ attributes: {},
},
- keywords: [__('video'), __('popup'), __('video popup')],
- example: {
- attributes: {},
- },
attributes: {
- uniqueId: { type: 'string', default: '' },
+ uniqueId: { type: "string", default: "" },
// Global
...globalAttributes,
- layout: { type: 'string', default: 'fill' },
- alignment: { type: 'string', default: 'center' },
- spacer: { type: 'object', default: { spaceTop: { md: '10', unit: 'px' }, spaceBottom: { md: '10', unit: 'px' } }, style: [{ selector: '{{QUBELY}}' }] },
- videoSource: { type: 'string', default: 'external' },
- bgVideo: { type: 'object', default: {} },
- url: { type: 'string', default: 'https://www.youtube.com/watch?v=HY3sut8LTSw' },
- height: { type: 'object', default: { md: 500, unit: 'px' }, style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }], selector: '{{QUBELY}} .qubely-block-videopopup-wrapper{ height:{{height}};}' }] },
- background: { type: 'object', default: { bgType: 'image', openBg: 1, bgimgSize: 'cover', bgimgPosition: 'center center', bgImage: { url: 'https://qubely.io/wp-content/uploads/qubely-assets/demo/image8.jpg' } }, style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }], selector: '{{QUBELY}} .qubely-block-videopopup-wrapper' }] },
- isRipple: { type: 'boolean', default: true },
+ layout: { type: "string", default: "fill" },
+ alignment: { type: "string", default: "center" },
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "10", unit: "px" }, spaceBottom: { md: "10", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
+ videoSource: { type: "string", default: "external" },
+ bgVideo: { type: "object", default: {} },
+ url: { type: "string", default: "https://www.youtube.com/watch?v=HY3sut8LTSw" },
+ height: {
+ type: "object",
+ default: { md: 500, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: "fill" }],
+ selector: "{{QUBELY}} .qubely-block-videopopup-wrapper{ height:{{height}};}",
+ },
+ ],
+ },
+ background: {
+ type: "object",
+ default: {
+ bgType: "image",
+ openBg: 1,
+ bgimgSize: "cover",
+ bgimgPosition: "center center",
+ bgImage: { url: "https://qubely.io/wp-content/uploads/qubely-assets/demo/image8.jpg" },
+ },
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: "fill" }],
+ selector: "{{QUBELY}} .qubely-block-videopopup-wrapper",
+ },
+ ],
+ },
+ isRipple: { type: "boolean", default: true },
// Icon
- icon: { type: 'string', default: 'fas fa-play' },
- iconColor: { type: 'string', default: '#FFFFFF', style: [{ selector: '{{QUBELY}} .qubely-btn-icon{ color:{{iconColor}}; }' }] },
- iconHoverColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-btn-icon:hover{ color:{{iconHoverColor}}; }' }] },
- iconSize: { type: 'string', default: 'medium' },
- iconSizeCustom: { type: 'object', default: { md: 110, unit: 'px' }, style: [{ condition: [{ key: 'iconSize', relation: '==', value: 'custom' }], selector: '{{QUBELY}} .qubely-block-videopopup .qubely-btn-icon{ width:{{iconSizeCustom}}; height: {{iconSizeCustom}}; font-size:calc({{iconSizeCustom}} - ({{iconSizeCustom}}/1.7)); }' }] },
+ icon: { type: "string", default: "fas fa-play" },
+ iconColor: {
+ type: "string",
+ default: "#FFFFFF",
+ style: [{ selector: "{{QUBELY}} .qubely-btn-icon{ color:{{iconColor}}; }" }],
+ },
+ iconHoverColor: {
+ type: "string",
+ default: "",
+ style: [{ selector: "{{QUBELY}} .qubely-btn-icon:hover{ color:{{iconHoverColor}}; }" }],
+ },
+ iconSize: { type: "string", default: "medium" },
+ iconSizeCustom: {
+ type: "object",
+ default: { md: 110, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "iconSize", relation: "==", value: "custom" }],
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup .qubely-btn-icon{ width:{{iconSizeCustom}}; height: {{iconSizeCustom}}; font-size:calc({{iconSizeCustom}} - ({{iconSizeCustom}}/1.7)); }",
+ },
+ ],
+ },
iconBorderRadius: {
- type: 'object',
+ type: "object",
default: {
openBorderRadius: 1,
- radiusType: 'global',
+ radiusType: "global",
global: { md: 50 },
- unit: '%'
+ unit: "%",
},
style: [
{
- selector: '{{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon, {{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon .qubely-ripple'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon, {{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon .qubely-ripple",
+ },
+ ],
},
iconBgColor: {
- type: 'string',
- default: 'var(--qubely-color-1)',
+ type: "string",
+ default: "var(--qubely-color-1)",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon{ background-color:{{iconBgColor}}; }",
+ },
+ ],
+ },
+ iconHoverBgColor: {
+ type: "string",
+ default: "",
style: [
{
- selector: '{{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon{ background-color:{{iconBgColor}}; }'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon:hover{ background-color:{{iconHoverBgColor}}; }",
+ },
+ ],
},
- iconHoverBgColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-videopopup .qubely-video-popup .qubely-btn-icon:hover{ background-color:{{iconHoverBgColor}}; }' }] },
- border: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-btn-icon' }] },
- hoverBorder: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-btn-icon:hover' }] },
+ border: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-btn-icon" }] },
+ hoverBorder: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-btn-icon:hover" }] },
borderRadius: {
- type: 'object',
+ type: "object",
default: {
openBorderRadius: 1,
- radiusType: 'global'
+ radiusType: "global",
},
style: [
{
- condition: [{ key: 'layout', relation: '==', value: 'fill' }],
- selector: '{{QUBELY}} .qubely-block-videopopup-wrapper, {{QUBELY}} .qubely-block-videopopup-overlay'
- }
- ]
+ condition: [{ key: "layout", relation: "==", value: "fill" }],
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup-wrapper, {{QUBELY}} .qubely-block-videopopup-overlay",
+ },
+ ],
},
- shadow: { type: 'object', default: {}, style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }], selector: '{{QUBELY}} .qubely-block-videopopup-wrapper' }] },
- shadowHover: { type: 'object', default: {}, style: [{ condition: [{ key: 'layout', relation: '==', value: 'fill' }], selector: '{{QUBELY}} .qubely-block-videopopup-wrapper:hover' }] },
- prefix: { type: 'string', default: '' },
- postfix: { type: 'string', default: '' },
- prePostColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-videopopup-wrapper .qubely-block-videopopup span {color: {{prePostColor}};}' }] },
- prePostHoverColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-videopopup-wrapper:hover .qubely-block-videopopup span {color: {{prePostHoverColor}};}' }] },
- typography: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-videopopup span' }] },
- textGap: { type: 'object', default: { md: 10, unit: 'px' }, style: [{ selector: '{{QUBELY}} .qubely-video-popup-prefix{ margin-right:{{textGap}};} {{QUBELY}} .qubely-video-popup-postfix{ margin-left:{{textGap}};}' }] },
+ shadow: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: "fill" }],
+ selector: "{{QUBELY}} .qubely-block-videopopup-wrapper",
+ },
+ ],
+ },
+ shadowHover: {
+ type: "object",
+ default: {},
+ style: [
+ {
+ condition: [{ key: "layout", relation: "==", value: "fill" }],
+ selector: "{{QUBELY}} .qubely-block-videopopup-wrapper:hover",
+ },
+ ],
+ },
+ prefix: { type: "string", default: "" },
+ postfix: { type: "string", default: "" },
+ prePostColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup-wrapper .qubely-block-videopopup span {color: {{prePostColor}};}",
+ },
+ ],
+ },
+ prePostHoverColor: {
+ type: "string",
+ default: "",
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup-wrapper:hover .qubely-block-videopopup span {color: {{prePostHoverColor}};}",
+ },
+ ],
+ },
+ typography: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-block-videopopup span" }] },
+ textGap: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ selector:
+ "{{QUBELY}} .qubely-video-popup-prefix{ margin-right:{{textGap}};} {{QUBELY}} .qubely-video-popup-postfix{ margin-left:{{textGap}};}",
+ },
+ ],
+ },
// overlay
- enableBackgroundOverlay: { type: 'boolean', default: true },
+ enableBackgroundOverlay: { type: "boolean", default: true },
overlayBackground: {
- type: 'object',
+ type: "object",
default: {
openBg: 1,
- bgDefaultColor: '#000'
+ bgDefaultColor: "#000",
},
style: [
{
condition: [
- { key: 'layout', relation: '==', value: 'fill' },
- { key: 'enableBackgroundOverlay', relation: '==', value: true },
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "enableBackgroundOverlay", relation: "==", value: true },
],
- selector: '{{QUBELY}} .qubely-block-videopopup-overlay'
- }
- ]
+ selector: "{{QUBELY}} .qubely-block-videopopup-overlay",
+ },
+ ],
},
overlayOpacity: {
- type: 'number',
- default: .5,
+ type: "number",
+ default: 0.5,
style: [
{
condition: [
- { key: 'layout', relation: '==', value: 'fill' },
- { key: 'enableBackgroundOverlay', relation: '==', value: true },
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "enableBackgroundOverlay", relation: "==", value: true },
],
- selector: '{{QUBELY}} .qubely-block-videopopup-overlay{opacity: {{overlayOpacity}}; }'
- }
- ]
+ selector: "{{QUBELY}} .qubely-block-videopopup-overlay{opacity: {{overlayOpacity}}; }",
+ },
+ ],
},
overlayHoverOpacity: {
- type: 'number',
- default: .6,
+ type: "number",
+ default: 0.6,
style: [
{
condition: [
- { key: 'layout', relation: '==', value: 'fill' },
- { key: 'enableBackgroundOverlay', relation: '==', value: true },
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "enableBackgroundOverlay", relation: "==", value: true },
],
- selector: '{{QUBELY}} .qubely-block-videopopup-wrapper:hover .qubely-block-videopopup-overlay{opacity: {{overlayHoverOpacity}}; }'
- }
- ]
+ selector:
+ "{{QUBELY}} .qubely-block-videopopup-wrapper:hover .qubely-block-videopopup-overlay{opacity: {{overlayHoverOpacity}}; }",
+ },
+ ],
},
overlayBlend: {
- type: 'string',
- default: '',
+ type: "string",
+ default: "",
style: [
{
condition: [
- { key: 'layout', relation: '==', value: 'fill' },
- { key: 'enableBackgroundOverlay', relation: '==', value: true },
+ { key: "layout", relation: "==", value: "fill" },
+ { key: "enableBackgroundOverlay", relation: "==", value: true },
],
- selector: '{{QUBELY}} .qubely-block-videopopup-overlay{ mix-blend-mode:{{overlayBlend}}; }'
- }
- ]
+ selector: "{{QUBELY}} .qubely-block-videopopup-overlay{ mix-blend-mode:{{overlayBlend}}; }",
+ },
+ ],
},
- sourceOfCopiedStyle: { type: 'boolean', default: false }
+ sourceOfCopiedStyle: { type: "boolean", default: false },
},
edit: Edit,
save: Save,
diff --git a/assets/reactjs/src/blocks/videopopup/style.scss b/assets/reactjs/src/blocks/videopopup/style.scss
index 3c2328ba..51174915 100644
--- a/assets/reactjs/src/blocks/videopopup/style.scss
+++ b/assets/reactjs/src/blocks/videopopup/style.scss
@@ -1,91 +1,91 @@
-.qubely-block-videopopup-wrapper{
- position: relative;
- z-index: 1;
- display: flex;
- align-items: center;
- transition: 400ms;
- &.qubely-alignment-left {
- justify-content: flex-start;
- }
- &.qubely-alignment-center {
- justify-content: center;
- }
- &.qubely-alignment-right {
- justify-content: flex-end;
- }
- .qubely-block-videopopup{
- a{
- display: block;
- text-decoration: none !important;
- }
- .qubely-video-popup-prefix,
- .qubely-video-popup-postfix {
- transition: 400ms;
- }
- .qubely-btn-icon-wrapper {
- display: inline-block;
- }
- .qubely-btn-icon{
- display: inline-flex;
- align-items: center;
- justify-content: center;
- position: relative;
- transition: 400ms;
- span.qubely-ripple {
- position: absolute;
- height: 100%;
- width: 100%;
- left: 0;
- top: 0;
- z-index: -1;
- box-shadow: 0 0 0 15px rgba(white, .8), 0 0 0 30px rgba(white, .6), 0 0 0 45px rgba(white, .4);
- animation: qubelyRipple 2s infinite;
- }
- }
- &.qubely-size-small .qubely-btn-icon{
- width: 80px;
- height: 80px;
- font-size: 24px;
- }
- &.qubely-size-medium .qubely-btn-icon{
- width: 100px;
- height: 100px;
- font-size: 30px;
- }
- &.qubely-size-large .qubely-btn-icon{
- width: 140px;
- height: 140px;
- font-size: 40px;
- }
- }
+.qubely-block-videopopup-wrapper {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ transition: 400ms;
+ &.qubely-alignment-left {
+ justify-content: flex-start;
+ }
+ &.qubely-alignment-center {
+ justify-content: center;
+ }
+ &.qubely-alignment-right {
+ justify-content: flex-end;
+ }
+ .qubely-block-videopopup {
+ a {
+ display: block;
+ text-decoration: none !important;
+ }
+ .qubely-video-popup-prefix,
+ .qubely-video-popup-postfix {
+ transition: 400ms;
+ }
+ .qubely-btn-icon-wrapper {
+ display: inline-block;
+ }
+ .qubely-btn-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ transition: 400ms;
+ span.qubely-ripple {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ z-index: -1;
+ box-shadow: 0 0 0 15px rgba(white, 0.8), 0 0 0 30px rgba(white, 0.6), 0 0 0 45px rgba(white, 0.4);
+ animation: qubelyRipple 2s infinite;
+ }
+ }
+ &.qubely-size-small .qubely-btn-icon {
+ width: 80px;
+ height: 80px;
+ font-size: 24px;
+ }
+ &.qubely-size-medium .qubely-btn-icon {
+ width: 100px;
+ height: 100px;
+ font-size: 30px;
+ }
+ &.qubely-size-large .qubely-btn-icon {
+ width: 140px;
+ height: 140px;
+ font-size: 40px;
+ }
+ }
- .qubely-block-videopopup-overlay {
- position: absolute;
- z-index: -1;
- height: 100%;
- width: 100%;
- left: 0;
- top: 0;
- transition: 400ms;
- }
+ .qubely-block-videopopup-overlay {
+ position: absolute;
+ z-index: -1;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ transition: 400ms;
+ }
}
@keyframes qubelyRipple {
- 0% {
- opacity: 0;
- transform: scale(.5);
- }
- 10%{
- opacity: 1;
- }
- 90%{
- opacity: 0;
- }
- 100% {
- opacity: 0;
- transform: scale(1);
- }
+ 0% {
+ opacity: 0;
+ transform: scale(0.5);
+ }
+ 10% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(1);
+ }
}
.edit-post-visual-editor i {
- font-style: initial !important;
-}
\ No newline at end of file
+ font-style: initial !important;
+}
diff --git a/assets/reactjs/src/blocks/wrapper/Edit.js b/assets/reactjs/src/blocks/wrapper/Edit.js
index d22967f7..acf2f89a 100644
--- a/assets/reactjs/src/blocks/wrapper/Edit.js
+++ b/assets/reactjs/src/blocks/wrapper/Edit.js
@@ -1,7 +1,7 @@
const { __ } = wp.i18n;
const { Component, Fragment, createRef } = wp.element;
-const { PanelBody, Toolbar } = wp.components
-const { InspectorControls, BlockControls, InnerBlocks } = wp.blockEditor
+const { PanelBody, Toolbar } = wp.components;
+const { InspectorControls, BlockControls, InnerBlocks } = wp.blockEditor;
const {
Tabs,
Tab,
@@ -11,43 +11,24 @@ const {
BoxShadow,
Background,
BorderRadius,
- gloalSettings: {
- globalSettingsPanel,
- animationSettings,
- interactionSettings
- },
- Inline: {
- InlineToolbar
- },
+ gloalSettings: { globalSettingsPanel, animationSettings, interactionSettings },
+ Inline: { InlineToolbar },
withCSSGenerator,
InspectorTabs,
InspectorTab,
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
-} = wp.qubelyComponents
+ ContextMenu: { ContextMenu, handleContextMenu },
+} = wp.qubelyComponents;
class Edit extends Component {
constructor() {
super(...arguments);
this.state = {
- device: 'md',
- spacer: true
+ device: "md",
+ spacer: true,
};
this.qubelyContextMenu = createRef();
}
- componentDidMount() {
- const { setAttributes, clientId, attributes: { uniqueId } } = this.props
- const _client = clientId.substr(0, 6)
- if (!uniqueId) {
- setAttributes({ uniqueId: _client });
- } else if (uniqueId && uniqueId != _client) {
- setAttributes({ uniqueId: _client });
- }
- }
-
render() {
const {
name,
@@ -77,81 +58,124 @@ class Edit extends Component {
hideTablet,
hideMobile,
globalCss,
- interaction
- }
- } = this.props
- const { device } = this.state
+ interaction,
+ },
+ } = this.props;
+ const { device } = this.state;
return (
-
-
-
+
+
+
-
+
setAttributes({ bgColor: val })}
+ label={__("Background")}
+ sources={["image", "gradient"]}
+ onChange={(val) => setAttributes({ bgColor: val })}
/>
setAttributes({ padding: val })}
- onDeviceChange={value => this.setState({ device: value })}
+ unit={["px", "em", "%"]}
+ onChange={(val) => setAttributes({ padding: val })}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ border: val })}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ setAttributes({ bgShadow: value })}
+ />
+ setAttributes({ borderRadius: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
/>
- setAttributes({ border: val })} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- setAttributes({ bgShadow: value })} />
- setAttributes({ borderRadius: value })} min={0} max={100} unit={['px', 'em', '%']} responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
-
- setAttributes({ bgColorHover: val })} />
- {(border.openBorder != undefined && border.openBorder == 1) &&
- setAttributes({ bgBorderColorHover: value })} />
- }
- setAttributes({ bgShadowHover: value })} />
+
+ setAttributes({ bgColorHover: val })}
+ />
+ {border.openBorder != undefined && border.openBorder == 1 && (
+ setAttributes({ bgBorderColorHover: value })}
+ />
+ )}
+ setAttributes({ bgShadowHover: value })}
+ />
-
+
{animationSettings(uniqueId, animation, setAttributes)}
{interactionSettings(uniqueId, interaction, setAttributes)}
-
-
+
- {globalSettingsPanel(enablePosition, selectPosition, positionXaxis, positionYaxis, globalZindex, hideTablet, hideMobile, globalCss, setAttributes)}
+ {globalSettingsPanel(
+ enablePosition,
+ selectPosition,
+ positionXaxis,
+ positionYaxis,
+ globalZindex,
+ hideTablet,
+ hideMobile,
+ globalCss,
+ setAttributes
+ )}
-
+
handleContextMenu(event, this.qubelyContextMenu.current)}
+ onContextMenu={(event) => handleContextMenu(event, this.qubelyContextMenu.current)}
>
-
+
- )
- }
+ );
+ }
}
-export default Save
\ No newline at end of file
+export default Save;
diff --git a/assets/reactjs/src/blocks/wrapper/index.js b/assets/reactjs/src/blocks/wrapper/index.js
index 4dfaf447..3633c48d 100644
--- a/assets/reactjs/src/blocks/wrapper/index.js
+++ b/assets/reactjs/src/blocks/wrapper/index.js
@@ -1,72 +1,96 @@
-import './style.scss'
-const { __ } = wp.i18n
-import Edit from './Edit'
-import Save from './Save';
-const { registerBlockType } = wp.blocks
-const { gloalSettings: { globalAttributes } } = wp.qubelyComponents
+import "./style.scss";
+const { __ } = wp.i18n;
+import Edit from "./Edit";
+import Save from "./Save";
+const { registerBlockType } = wp.blocks;
+const {
+ gloalSettings: { globalAttributes },
+} = wp.qubelyComponents;
-registerBlockType('qubely/wrapper', {
- title: __('Block Wrapper'),
- description: 'Make Blocks more attractive with Block Wraper.',
- category: 'qubely',
- icon:
,
- supports: {
- align: ['center', 'wide', 'full'],
- html: false
- },
- keywords: [__('Block'), __('Block Wrapper'), __('Wrapper')],
- example: {
- attributes: {},
- innerBlocks: [
- {
- name: 'qubely/icon',
- attributes: {
- iconStyle: "fill",
- name: "fas fa-rocket"
- },
- },
- ],
+registerBlockType("qubely/wrapper", {
+ title: __("Block Wrapper"),
+ description: "Make Blocks more attractive with Block Wraper.",
+ category: "qubely",
+ icon:
,
+ supports: {
+ align: ["center", "wide", "full"],
+ html: false,
+ },
+ keywords: [__("Block"), __("Block Wrapper"), __("Wrapper")],
+ example: {
+ attributes: {},
+ innerBlocks: [
+ {
+ name: "qubely/icon",
+ attributes: {
+ iconStyle: "fill",
+ name: "fas fa-rocket",
+ },
+ },
+ ],
+ },
+ attributes: {
+ uniqueId: { type: "string", default: "" },
+ // Global
+ ...globalAttributes,
+ spacer: {
+ type: "object",
+ default: { spaceTop: { md: "0", unit: "px" }, spaceBottom: { md: "0", unit: "px" } },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
- },
- attributes: {
- uniqueId: { type: 'string', default: '' },
- // Global
- ...globalAttributes,
- spacer: { type: 'object', default: { spaceTop: { md: '0', unit: "px" }, spaceBottom: { md: '0', unit: "px" } }, style: [{ selector: '{{QUBELY}}' }] },
+ bgColor: {
+ type: "object",
+ default: { openColor: 1, type: "color", color: "#f5f5f5" },
+ style: [{ selector: "{{QUBELY}} .qubely-block-wrapper-block" }],
+ },
+ bgColorHover: {
+ type: "object",
+ default: {},
+ style: [{ selector: "{{QUBELY}} .qubely-block-wrapper-block:hover" }],
+ },
- bgColor: { type: 'object', default: { openColor: 1, type: "color", color: "#f5f5f5" }, style: [{ selector: '{{QUBELY}} .qubely-block-wrapper-block' }] },
- bgColorHover: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-wrapper-block:hover' }] },
+ padding: {
+ type: "object",
+ default: {
+ openPadding: 1,
+ paddingType: "global",
+ global: { md: "30" },
+ custom: { md: "30 30 30 30" },
+ unit: "px",
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-block-wrapper-block " }],
+ },
+ borderRadius: {
+ type: "object",
+ default: {
+ openBorderRadius: 1,
+ radiusType: "global",
+ global: { md: 4 },
+ unit: "px",
+ },
+ style: [{ selector: "{{QUBELY}} .qubely-block-wrapper-block" }],
+ },
+ border: { type: "object", default: {}, style: [{ selector: "{{QUBELY}} .qubely-block-wrapper-block" }] },
+ bgBorderColorHover: {
+ type: "string",
+ default: "",
+ style: [
+ { selector: "{{QUBELY}} .qubely-block-wrapper-block:hover {border-color: {{bgBorderColorHover}};}" },
+ ],
+ },
- padding: {
- type: 'object',
- default: {
- openPadding: 1,
- paddingType: 'global',
- global: { md: '30' },
- custom: { md: '30 30 30 30' },
- unit: 'px'
- },
- style: [{ selector: '{{QUBELY}} .qubely-block-wrapper-block ' }]
- },
- borderRadius: {
- type: 'object',
- default: {
- openBorderRadius: 1,
- radiusType: 'global',
- global: { md: 4 },
- unit: 'px'
- },
- style: [
- { selector: '{{QUBELY}} .qubely-block-wrapper-block' }
- ]
- },
- border: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-wrapper-block' }] },
- bgBorderColorHover: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-wrapper-block:hover {border-color: {{bgBorderColorHover}};}' }] },
-
- bgShadow: { type: 'object', default: { openShadow: 1, horizontal: 1, vertical: 1, blur: 2, color: 'rgba(0, 0, 0, .2)', spread: 0 }, style: [{ selector: '{{QUBELY}} .qubely-block-wrapper-block' }] },
- bgShadowHover: { type: 'object', default: { color: '' }, style: [{ selector: '{{QUBELY}} .qubely-block-wrapper-block:hover' }] },
- },
- edit: Edit,
- save: Save,
+ bgShadow: {
+ type: "object",
+ default: { openShadow: 1, horizontal: 1, vertical: 1, blur: 2, color: "rgba(0, 0, 0, .2)", spread: 0 },
+ style: [{ selector: "{{QUBELY}} .qubely-block-wrapper-block" }],
+ },
+ bgShadowHover: {
+ type: "object",
+ default: { color: "" },
+ style: [{ selector: "{{QUBELY}} .qubely-block-wrapper-block:hover" }],
+ },
+ },
+ edit: Edit,
+ save: Save,
});
-
diff --git a/assets/reactjs/src/blocks/wrapper/style.scss b/assets/reactjs/src/blocks/wrapper/style.scss
index 4f6b117b..29865ca5 100644
--- a/assets/reactjs/src/blocks/wrapper/style.scss
+++ b/assets/reactjs/src/blocks/wrapper/style.scss
@@ -1,3 +1,3 @@
.qubely-block-wrapper-block {
transition: border-color 400ms, background-color 400ms, box-shadow 400ms;
-}
\ No newline at end of file
+}
diff --git a/assets/reactjs/src/components/CssGenerator.js b/assets/reactjs/src/components/CssGenerator.js
index 5f3c59d9..6a86953f 100644
--- a/assets/reactjs/src/components/CssGenerator.js
+++ b/assets/reactjs/src/components/CssGenerator.js
@@ -1,286 +1,365 @@
import {
- cssSize,
- cssBorderRadius,
- cssGradient,
- cssBorder,
- tableBorder,
- cssBoxShadow,
- cssTypography,
- cssDimension,
- cssBackground,
- cssShape,
- cssColor,
- cssSpacer,
- cssPadding,
- cssMargin,
- cssRowReverse,
- cssTransform
-} from './CssHelper'
-import GlobalSettings from '../plugins/global-settings'
+ cssSize,
+ cssBorderRadius,
+ cssGradient,
+ cssBorder,
+ tableBorder,
+ cssBoxShadow,
+ cssTypography,
+ cssDimension,
+ cssBackground,
+ cssShape,
+ cssColor,
+ cssSpacer,
+ cssPadding,
+ cssMargin,
+ cssRowReverse,
+ cssTransform,
+} from "./CssHelper";
+import GlobalSettings from "../plugins/global-settings";
// Replace Value
const replaceData = (selector, key, value) => {
- return selector.replace(new RegExp(key, "g"), value)
-}
+ return selector.replace(new RegExp(key, "g"), value);
+};
// Object Empty Check
const isEmpty = (obj) => {
- return (typeof obj == 'object' && Object.keys(obj).length != 0) ? true : false
-}
+ return typeof obj == "object" && Object.keys(obj).length != 0 ? true : false;
+};
// {{QUBELY}} Replace
const replaceWarp = (selector, ID) => {
- return selector.replace(new RegExp('{{QUBELY}}', "g"), '.qubely-block-' + ID)
-}
+ return selector.replace(new RegExp("{{QUBELY}}", "g"), ".qubely-block-" + ID);
+};
export const objectReplace = (warp, value) => {
- let output = ''
- value.forEach(sel => { output += sel + ';'; })
- return warp + '{' + output + '}';
-}
-
+ let output = "";
+ value.forEach((sel) => {
+ output += sel + ";";
+ });
+ return warp + "{" + output + "}";
+};
export const objectAppend = (warp, value) => {
- let output = ''
- value.forEach(sel => { output += warp + sel; })
- return output
-}
+ let output = "";
+ value.forEach((sel) => {
+ output += warp + sel;
+ });
+ return output;
+};
// Plain String/Number Field CSS Replace
export const singleField = (style, blockID, key, value) => {
- value = typeof value != 'object' ? value : objectField(value).data
- if (typeof style == 'string') {
- if (style) {
- if (value) {
- let warpData = replaceWarp(style, blockID)
- if (typeof value == 'boolean') {
- return [warpData]
- } else {
- if (warpData.indexOf('{{') == -1 && warpData.indexOf('{') < 0) {
- return [warpData + value]
- } else {
- return [replaceData(warpData, '{{' + key + '}}', value)]
- }
- }
- } else {
- return []
- }
- } else {
- return [replaceWarp(value, blockID)] // Custom CSS Field
- }
- } else {
- let output = []
- style.forEach(sel => {
- output.push(replaceData(replaceWarp(sel, blockID), '{{' + key + '}}', value))
- });
- return output;
- }
-}
-
+ value = typeof value != "object" ? value : objectField(value).data;
+ if (typeof style == "string") {
+ if (style) {
+ if (value) {
+ let warpData = replaceWarp(style, blockID);
+ if (typeof value == "boolean") {
+ return [warpData];
+ } else {
+ if (warpData.indexOf("{{") == -1 && warpData.indexOf("{") < 0) {
+ return [warpData + value];
+ } else {
+ return [replaceData(warpData, "{{" + key + "}}", value)];
+ }
+ }
+ } else {
+ return [];
+ }
+ } else {
+ return [replaceWarp(value, blockID)]; // Custom CSS Field
+ }
+ } else {
+ let output = [];
+ style.forEach((sel) => {
+ output.push(replaceData(replaceWarp(sel, blockID), "{{" + key + "}}", value));
+ });
+ return output;
+ }
+};
// Object Field CSS Replace
const objectField = (data) => {
- if (data.openTypography) {
- return { data: cssTypography(data), action: 'append' }; //Typography
- } else if (data.openBg) {
- return { data: cssBackground(data), action: 'append' }; //Background
- } else if (data.openBorder) {
- return { data: cssBorder(data), action: 'append' }; //Border
- } else if (data.tableBorder) {
- return { data: tableBorder(data), action: 'append' }; //tableBorder
- } else if (data.openShadow && data.color) {
- return { data: cssBoxShadow(data), action: 'append' }; //Shadow
- } else if (data.direction) {
- return { data: cssGradient(data, 'return'), action: 'append' }; //Gradient
- } else if (typeof (data.top) != 'undefined' || typeof (data.left) != 'undefined' || typeof (data.right) != 'undefined' || typeof (data.bottom) != 'undefined') {
- return { data: cssDimension(data), action: 'replace' }; //Dimension
- } else if (data.openShape) {
- return { data: cssShape(data), action: 'append' }; //Shape
- } else if (data.openColor) {
- return { data: cssColor(data), action: 'append' }; //Color Advanced
- } else if (data.spaceTop || data.spaceBottom) {
- return { data: cssSpacer(data), action: 'append' }; //Spacer
- } else if (data.selectedSize) {
- return { data: cssSize(data), action: 'append' }; //Size
- } else if (data.openBorderRadius) {
- return { data: cssBorderRadius(data), action: 'append' }; //cssBorderRadius
- } else if (data.openPadding) {
- return { data: cssPadding(data), action: 'append' }; //padding
- } else if (data.openMargin) {
- return { data: cssMargin(data), action: 'append' }; //margin
- } else if (data.openRowReverse) {
- return { data: cssRowReverse(data), action: 'append' }; //column reverse
- } else if (data.openTransfrom) {
- return { data: cssTransform(data), action: 'append' }; //transform
- } else {
- return { data: '', action: 'append' };
- }
-}
-
+ if (data.openTypography) {
+ return { data: cssTypography(data), action: "append" }; //Typography
+ } else if (data.openBg) {
+ return { data: cssBackground(data), action: "append" }; //Background
+ } else if (data.openBorder) {
+ return { data: cssBorder(data), action: "append" }; //Border
+ } else if (data.tableBorder) {
+ return { data: tableBorder(data), action: "append" }; //tableBorder
+ } else if (data.openShadow && data.color) {
+ return { data: cssBoxShadow(data), action: "append" }; //Shadow
+ } else if (data.direction) {
+ return { data: cssGradient(data, "return"), action: "append" }; //Gradient
+ } else if (
+ typeof data.top != "undefined" ||
+ typeof data.left != "undefined" ||
+ typeof data.right != "undefined" ||
+ typeof data.bottom != "undefined"
+ ) {
+ return { data: cssDimension(data), action: "replace" }; //Dimension
+ } else if (data.openShape) {
+ return { data: cssShape(data), action: "append" }; //Shape
+ } else if (data.openColor) {
+ return { data: cssColor(data), action: "append" }; //Color Advanced
+ } else if (data.spaceTop || data.spaceBottom) {
+ return { data: cssSpacer(data), action: "append" }; //Spacer
+ } else if (data.selectedSize) {
+ return { data: cssSize(data), action: "append" }; //Size
+ } else if (data.openBorderRadius) {
+ return { data: cssBorderRadius(data), action: "append" }; //cssBorderRadius
+ } else if (data.openPadding) {
+ return { data: cssPadding(data), action: "append" }; //padding
+ } else if (data.openMargin) {
+ return { data: cssMargin(data), action: "append" }; //margin
+ } else if (data.openRowReverse) {
+ return { data: cssRowReverse(data), action: "append" }; //column reverse
+ } else if (data.openTransfrom) {
+ return { data: cssTransform(data), action: "append" }; //transform
+ } else {
+ return { data: "", action: "append" };
+ }
+};
const checkDepends = (settings, selectData, key, indexStyle) => {
- let _depends = true
- if (selectData.hasOwnProperty('condition')) {
- selectData.condition.forEach((data) => {
- let previous = _depends
- if ((data.relation == '==') || (data.relation == '===')) {
- if ((typeof data.value == 'string') || (typeof data.value == 'number') || (typeof data.value == 'boolean')) {
- if (settings[data.key] == data.value) { _depends = true; }
- else { _depends = false }
- } else {
- let select = false
- data.value.forEach(arrData => {
- if (settings[data.key] == arrData) { select = true; }
- })
- if (select) { _depends = true; }
- }
- } else if ((data.relation == '!=') || (data.relation == '!==')) {
- if ((typeof data.value == 'string') || (typeof data.value == 'number') || (typeof data.value == 'boolean')) {
- if (settings[data.key] != data.value) { _depends = true; }
- else { _depends = false; }
- } else {
- let select = false
- data.value.forEach(arrData => {
- if (settings[data.key] != arrData) { select = true; }
- })
- if (select) { _depends = true; }
- }
- }
- if (previous == false) {
- _depends = false
- }
- })
- }
-
- return _depends;
-}
-
-
-export const CssGenerator = (settings, blockName, blockID, isInline = false, global = false, frontend = false, globalAttributes = undefined) => {
- if (!blockID) return;
- let __CSS = '',
- md = [],
- sm = [],
- xs = [],
- notResponsiveCss = [];
-
- Object.keys(settings).forEach((key) => {
- let attributes = [];
- if (global === false) {
- attributes = typeof blockName === 'string' ? wp.blocks.getBlockType('qubely/' + blockName).attributes : blockName
- } else {
- attributes = globalAttributes
- }
-
- if (attributes[key] && attributes[key].hasOwnProperty('style')) {
+ let _depends = true;
+ if (selectData.hasOwnProperty("condition")) {
+ selectData.condition.forEach((data) => {
+ let previous = _depends;
+ if (data.relation == "==" || data.relation == "===") {
+ if (typeof data.value == "string" || typeof data.value == "number" || typeof data.value == "boolean") {
+ if (settings[data.key] == data.value) {
+ _depends = true;
+ } else {
+ _depends = false;
+ }
+ } else {
+ let select = false;
+ data.value.forEach((arrData) => {
+ if (settings[data.key] == arrData) {
+ select = true;
+ }
+ });
+ if (select) {
+ _depends = true;
+ }
+ }
+ } else if (data.relation == "!=" || data.relation == "!==") {
+ if (typeof data.value == "string" || typeof data.value == "number" || typeof data.value == "boolean") {
+ if (settings[data.key] != data.value) {
+ _depends = true;
+ } else {
+ _depends = false;
+ }
+ } else {
+ let select = false;
+ data.value.forEach((arrData) => {
+ if (settings[data.key] != arrData) {
+ select = true;
+ }
+ });
+ if (select) {
+ _depends = true;
+ }
+ }
+ }
+ if (previous == false) {
+ _depends = false;
+ }
+ });
+ }
- attributes[key].style.forEach((selectData, indexStyle) => {
- let cssSelecor = selectData.selector
- if (checkDepends(settings, selectData, key, indexStyle)) {
- if (typeof settings[key] == 'object') {
- let device = false;
- let dimension = '';
+ return _depends;
+};
- if (settings[key].md) { // Desktop
- device = true
- dimension = typeof settings[key].md == 'object' ? objectField(settings[key].md).data : settings[key].md + (settings[key].unit || '')
- md = md.concat(singleField(cssSelecor, blockID, key, dimension))
- }
- if (settings[key].sm) { // Tablet
- device = true
- dimension = typeof settings[key].sm == 'object' ? objectField(settings[key].sm).data : settings[key].sm + (settings[key].unit || '')
- sm = sm.concat(singleField(cssSelecor, blockID, key, dimension))
- }
- if (settings[key].xs) { // Phone
- device = true
- dimension = typeof settings[key].xs == 'object' ? objectField(settings[key].xs).data : settings[key].xs + (settings[key].unit || '')
- xs = xs.concat(singleField(cssSelecor, blockID, key, dimension))
- }
+export const CssGenerator = (
+ settings,
+ blockName,
+ blockID,
+ isInline = false,
+ global = false,
+ frontend = false,
+ globalAttributes = undefined
+) => {
+ if (!blockID) return;
+ let __CSS = "",
+ md = [],
+ sm = [],
+ xs = [],
+ notResponsiveCss = [];
- if (!device) { // Object Field Type Only
- const objectCss = objectField(settings[key])
- const repWarp = replaceWarp(cssSelecor, blockID)
- if (typeof objectCss.data == 'object') {
- if (Object.keys(objectCss.data).length != 0) {
- if (objectCss.data.background) { notResponsiveCss.push(repWarp + objectCss.data.background) }
+ Object.keys(settings).forEach((key) => {
+ let attributes = [];
+ if (global === false) {
+ attributes =
+ typeof blockName === "string" ? wp.blocks.getBlockType("qubely/" + blockName).attributes : blockName;
+ } else {
+ attributes = globalAttributes;
+ }
- // Typography
- if (isEmpty(objectCss.data.md)) { md.push(objectReplace(repWarp, objectCss.data.md)) }
- if (isEmpty(objectCss.data.sm)) { sm.push(objectReplace(repWarp, objectCss.data.sm)) }
- if (isEmpty(objectCss.data.xs)) { xs.push(objectReplace(repWarp, objectCss.data.xs)) }
- if (objectCss.data.simple) { notResponsiveCss.push(repWarp + objectCss.data.simple) }
- if (objectCss.data.font) { md.unshift(objectCss.data.font) }
+ if (attributes[key] && attributes[key].hasOwnProperty("style")) {
+ attributes[key].style.forEach((selectData, indexStyle) => {
+ let cssSelecor = selectData.selector;
+ if (checkDepends(settings, selectData, key, indexStyle)) {
+ if (typeof settings[key] == "object") {
+ let device = false;
+ let dimension = "";
- if (objectCss.data.shape) {
- (objectCss.data.shape).forEach(function (el) { notResponsiveCss.push(repWarp + el) });
- if (isEmpty(objectCss.data.data.md)) { md.push(objectAppend(repWarp, objectCss.data.data.md)) }
- if (isEmpty(objectCss.data.data.sm)) { sm.push(objectAppend(repWarp, objectCss.data.data.sm)) }
- if (isEmpty(objectCss.data.data.xs)) { xs.push(objectAppend(repWarp, objectCss.data.data.xs)) }
- }
- }
- } else if (objectCss.data && (objectCss.data).indexOf('{{') == -1) {
- if (objectCss.action == 'append') {
- notResponsiveCss.push(repWarp + objectCss.data)
- } else {
- notResponsiveCss.push(singleField(cssSelecor, blockID, key, objectCss.data))
- }
- }
- }
- } else {
- if (key == 'hideTablet') {
- if (isInline) { sm = sm.concat(singleField(cssSelecor, blockID, key, settings[key])) }
- } else if (key == 'hideMobile') {
- if (isInline) { xs = xs.concat(singleField(cssSelecor, blockID, key, settings[key])) }
- } else {
- if (settings[key]) {
- notResponsiveCss = notResponsiveCss.concat(singleField(cssSelecor, blockID, key, settings[key]))
- }
- }
- }
- }
- });
- }
- })
+ if (settings[key].md) {
+ // Desktop
+ device = true;
+ dimension =
+ typeof settings[key].md == "object"
+ ? objectField(settings[key].md).data
+ : settings[key].md + (settings[key].unit || "");
+ md = md.concat(singleField(cssSelecor, blockID, key, dimension));
+ }
+ if (settings[key].sm) {
+ // Tablet
+ device = true;
+ dimension =
+ typeof settings[key].sm == "object"
+ ? objectField(settings[key].sm).data
+ : settings[key].sm + (settings[key].unit || "");
+ sm = sm.concat(singleField(cssSelecor, blockID, key, dimension));
+ }
+ if (settings[key].xs) {
+ // Phone
+ device = true;
+ dimension =
+ typeof settings[key].xs == "object"
+ ? objectField(settings[key].xs).data
+ : settings[key].xs + (settings[key].unit || "");
+ xs = xs.concat(singleField(cssSelecor, blockID, key, dimension));
+ }
+ if (!device) {
+ // Object Field Type Only
+ const objectCss = objectField(settings[key]);
+ const repWarp = replaceWarp(cssSelecor, blockID);
+ if (typeof objectCss.data == "object") {
+ if (Object.keys(objectCss.data).length != 0) {
+ if (objectCss.data.background) {
+ notResponsiveCss.push(repWarp + objectCss.data.background);
+ }
+ // Typography
+ if (isEmpty(objectCss.data.md)) {
+ md.push(objectReplace(repWarp, objectCss.data.md));
+ }
+ if (isEmpty(objectCss.data.sm)) {
+ sm.push(objectReplace(repWarp, objectCss.data.sm));
+ }
+ if (isEmpty(objectCss.data.xs)) {
+ xs.push(objectReplace(repWarp, objectCss.data.xs));
+ }
+ if (objectCss.data.simple) {
+ notResponsiveCss.push(repWarp + objectCss.data.simple);
+ }
+ if (objectCss.data.font) {
+ md.unshift(objectCss.data.font);
+ }
- // Join CSS
- if (md.length > 0) { __CSS += md.join('') }
- if (sm.length > 0) { __CSS += '@media (max-width: 1199px) {' + sm.join('') + '}' }
- if (xs.length > 0) { __CSS += '@media (max-width: 991px) {' + xs.join('') + '}' }
- if (notResponsiveCss.length > 0) { __CSS += notResponsiveCss.join('') }
+ if (objectCss.data.shape) {
+ objectCss.data.shape.forEach(function (el) {
+ notResponsiveCss.push(repWarp + el);
+ });
+ if (isEmpty(objectCss.data.data.md)) {
+ md.push(objectAppend(repWarp, objectCss.data.data.md));
+ }
+ if (isEmpty(objectCss.data.data.sm)) {
+ sm.push(objectAppend(repWarp, objectCss.data.data.sm));
+ }
+ if (isEmpty(objectCss.data.data.xs)) {
+ xs.push(objectAppend(repWarp, objectCss.data.data.xs));
+ }
+ }
+ }
+ } else if (objectCss.data && objectCss.data.indexOf("{{") == -1) {
+ if (objectCss.action == "append") {
+ notResponsiveCss.push(repWarp + objectCss.data);
+ } else {
+ notResponsiveCss.push(singleField(cssSelecor, blockID, key, objectCss.data));
+ }
+ }
+ }
+ } else {
+ if (key == "hideDesktop") {
+ if (isInline) {
+ md = md.concat(singleField(cssSelecor, blockID, key, settings[key]));
+ }
+ } else if (key == "hideTablet") {
+ if (isInline) {
+ sm = sm.concat(singleField(cssSelecor, blockID, key, settings[key]));
+ }
+ } else if (key == "hideMobile") {
+ if (isInline) {
+ xs = xs.concat(singleField(cssSelecor, blockID, key, settings[key]));
+ }
+ } else {
+ if (settings[key]) {
+ notResponsiveCss = notResponsiveCss.concat(
+ singleField(cssSelecor, blockID, key, settings[key])
+ );
+ }
+ }
+ }
+ }
+ });
+ }
+ });
- if (global) {
- __CSS = __CSS.replace(new RegExp('.qubely-block-global', "g"), frontend ? '.qubely-frontend' : '.qubely-editor');
- }
+ // Join CSS
+ if (md.length > 0) {
+ __CSS += "@media (min-width: 1200px) {" + md.join("") + "}";
+ }
+ if (sm.length > 0) {
+ __CSS += "@media (max-width: 1199px) {" + sm.join("") + "}";
+ }
+ if (xs.length > 0) {
+ __CSS += "@media (max-width: 991px) {" + xs.join("") + "}";
+ }
+ if (notResponsiveCss.length > 0) {
+ __CSS += notResponsiveCss.join("");
+ }
- if (isInline) {
- return __CSS;
- }
+ if (global) {
+ __CSS = __CSS.replace(
+ new RegExp(".qubely-block-global", "g"),
+ frontend ? ".qubely-frontend" : ".qubely-editor"
+ );
+ }
- // Set CSS
- setStyle(__CSS, blockID, global, frontend);
-}
+ if (isInline) {
+ return __CSS;
+ }
+ // Set CSS
+ setStyle(__CSS, blockID, global, frontend);
+};
// Set CSS to Head
const setStyle = (styleCss, blockID, global = false, frontend = false) => {
- let styleSelector = window.document, id = 'qubely-block-' + blockID;
- if (global && frontend) {
- id = 'qubely-global-styles';
- }
+ let styleSelector = window.document,
+ id = "qubely-block-" + blockID;
+ if (global && frontend) {
+ id = "qubely-global-styles";
+ }
- if (styleSelector.getElementById(id) === null) {
- let cssInline = document.createElement('style');
- cssInline.type = 'text/css';
- cssInline.id = id;
- if (cssInline.styleSheet) {
- cssInline.styleSheet.cssText = styleCss;
- } else {
- cssInline.innerHTML = styleCss;
- }
- styleSelector.getElementsByTagName("head")[0].appendChild(cssInline);
- } else {
- styleSelector.getElementById(id).innerHTML = styleCss;
- }
-}
\ No newline at end of file
+ if (styleSelector.getElementById(id) === null) {
+ let cssInline = document.createElement("style");
+ cssInline.type = "text/css";
+ cssInline.id = id;
+ if (cssInline.styleSheet) {
+ cssInline.styleSheet.cssText = styleCss;
+ } else {
+ cssInline.innerHTML = styleCss;
+ }
+ styleSelector.getElementsByTagName("head")[0].appendChild(cssInline);
+ } else {
+ styleSelector.getElementById(id).innerHTML = styleCss;
+ }
+};
diff --git a/assets/reactjs/src/components/CssHelper.js b/assets/reactjs/src/components/CssHelper.js
index 7e80f42b..433d96c8 100644
--- a/assets/reactjs/src/components/CssHelper.js
+++ b/assets/reactjs/src/components/CssHelper.js
@@ -1,389 +1,571 @@
-
-
-
-
// CSS Gradient
export const cssGradient = (v, type) => {
- let gradietValue = v.type == 'linear' ? 'linear-gradient(' + v.direction + 'deg, ' : 'radial-gradient( circle at ' + v.radial + ' , '
- gradietValue += v.color1 + ' ' + v.start + '%,' + v.color2 + ' ' + v.stop + '%)'
- if (type == 'object') {
- return { background: gradietValue }
- } else {
- gradietValue = 'background:' + gradietValue + (v.clip ? '-webkit-background-clip: text; -webkit-text-fill-color: transparent;' : '')
- return '{' + gradietValue + '}';
- }
-}
+ let gradietValue =
+ v.type == "linear"
+ ? "linear-gradient(" + v.direction + "deg, "
+ : "radial-gradient( circle at " + v.radial + " , ";
+ gradietValue += v.color1 + " " + v.start + "%," + v.color2 + " " + v.stop + "%)";
+ if (type == "object") {
+ return { background: gradietValue };
+ } else {
+ gradietValue =
+ "background:" +
+ gradietValue +
+ (v.clip ? "-webkit-background-clip: text; -webkit-text-fill-color: transparent;" : "");
+ return "{" + gradietValue + "}";
+ }
+};
// CSS Box Shadow
export const cssBoxShadow = (v) => {
- return '{ box-shadow:' + (v.inset || '') + ' ' + v.horizontal + 'px ' + v.vertical + 'px ' + v.blur + 'px ' + v.spread + 'px ' + v.color + '; }'
-}
+ return (
+ "{ box-shadow:" +
+ (v.inset || "") +
+ " " +
+ v.horizontal +
+ "px " +
+ v.vertical +
+ "px " +
+ v.blur +
+ "px " +
+ v.spread +
+ "px " +
+ v.color +
+ "; }"
+ );
+};
// CSS Border
export const cssBorder = (v) => {
- v = Object.assign({}, { type: 'solid', width: {}, color: '#e5e5e5' }, v);
- let nonResponsiveCss = `border-color: ${v.color ? v.color : '#555d66'}; border-style: ${v.type ? v.type : 'solid'};`
-
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
- let data = { md: [], sm: [], xs: [] }
- data = v.widthType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'border-width:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'border-width:{{key}};'), data)
-
- data.md.push(nonResponsiveCss)
- data.sm.push(nonResponsiveCss)
- data.xs.push(nonResponsiveCss)
- return { md: data.md, sm: data.sm, xs: data.xs }
-
- } else {
- let data = ''
- if (v.widthType == 'global') {
- data = `border-width:${v.global}${v.unit ? v.unit : 'px'};${nonResponsiveCss}`
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `border-width:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit};${nonResponsiveCss}`
- }
- return '{' + data + '}';
- }
-}
+ v = Object.assign({}, { type: "solid", width: {}, color: "#e5e5e5" }, v);
+ let nonResponsiveCss = `border-color: ${v.color ? v.color : "#555d66"}; border-style: ${
+ v.type ? v.type : "solid"
+ };`;
+
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.widthType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "border-width:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "border-width:{{key}};"), data);
+
+ data.md.push(nonResponsiveCss);
+ data.sm.push(nonResponsiveCss);
+ data.xs.push(nonResponsiveCss);
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.widthType == "global") {
+ data = `border-width:${v.global}${v.unit ? v.unit : "px"};${nonResponsiveCss}`;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `border-width:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit};${nonResponsiveCss}`;
+ }
+ return "{" + data + "}";
+ }
+};
// Table Border
export const tableBorder = (v) => {
- const {
- border
- } = v;
- let nonResponsiveCss = 'border-style:hidden;';
- let color = '#E5E7EA';
- if (border.color) {
- color = v.border.color;
- }
- let data = { md: [], sm: [], xs: [] }
- if (border.widthType === 'global') {
- if(border.global.md){
- data.md.push(`box-shadow: 0 0 0 ${border.global.md}${border.unit} ${color};`)
- }
- if(border.global.sm){
- data.sm.push(`box-shadow: 0 0 0 ${border.global.sm}${border.unit} ${color};`)
- }
- if(border.global.xs){
- data.xs.push(`box-shadow: 0 0 0 ${border.global.xs}${border.unit} ${color};`)
- }
- }
-
- data.md.push(nonResponsiveCss)
- data.sm.push(nonResponsiveCss)
- data.xs.push(nonResponsiveCss)
- return { md: data.md, sm: data.sm, xs: data.xs }
-}
+ const { border } = v;
+ let nonResponsiveCss = "border-style:hidden;";
+ let color = "#E5E7EA";
+ if (border.color) {
+ color = v.border.color;
+ }
+ let data = { md: [], sm: [], xs: [] };
+ if (border.widthType === "global") {
+ if (border.global.md) {
+ data.md.push(`box-shadow: 0 0 0 ${border.global.md}${border.unit} ${color};`);
+ }
+ if (border.global.sm) {
+ data.sm.push(`box-shadow: 0 0 0 ${border.global.sm}${border.unit} ${color};`);
+ }
+ if (border.global.xs) {
+ data.xs.push(`box-shadow: 0 0 0 ${border.global.xs}${border.unit} ${color};`);
+ }
+ }
+
+ data.md.push(nonResponsiveCss);
+ data.sm.push(nonResponsiveCss);
+ data.xs.push(nonResponsiveCss);
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
// CSS Typography
export const _device = (val, selector) => {
- let data = {}
- if (val && val.md) { data.md = selector.replace(new RegExp('{{key}}', "g"), val.md + (val.unit || '')) }
- if (val && val.sm) { data.sm = selector.replace(new RegExp('{{key}}', "g"), val.sm + (val.unit || '')) }
- if (val && val.xs) { data.xs = selector.replace(new RegExp('{{key}}', "g"), val.xs + (val.unit || '')) }
- return data;
-}
+ let data = {};
+ if (val && val.md) {
+ data.md = selector.replace(new RegExp("{{key}}", "g"), val.md + (val.unit || ""));
+ }
+ if (val && val.sm) {
+ data.sm = selector.replace(new RegExp("{{key}}", "g"), val.sm + (val.unit || ""));
+ }
+ if (val && val.xs) {
+ data.xs = selector.replace(new RegExp("{{key}}", "g"), val.xs + (val.unit || ""));
+ }
+ return data;
+};
export const _push = (val, data) => {
- if (val.md) { data.md.push(val.md) }
- if (val.sm) { data.sm.push(val.sm) }
- if (val.xs) { data.xs.push(val.xs) }
- return data;
-}
+ if (val.md) {
+ data.md.push(val.md);
+ }
+ if (val.sm) {
+ data.sm.push(val.sm);
+ }
+ if (val.xs) {
+ data.xs.push(val.xs);
+ }
+ return data;
+};
const globalTypography = (selectedTypo) => {
-
- let CSS = '{';
- if (selectedTypo !== 'none') {
- CSS += `font-family:var(--qubely-typo${selectedTypo}-font-family);`;
- CSS += `font-size:var(--qubely-typo${selectedTypo}-font-size);`;
- CSS += `font-weight:var(--qubely-typo${selectedTypo}-font-weight) !important;`;
- CSS += `font-style:var(--qubely-typo${selectedTypo}-font-style) !important;`;
- CSS += `line-height:var(--qubely-typo${selectedTypo}-line-height) !important;`;
- CSS += `letter-spacing:var(--qubely-typo${selectedTypo}-letter-spacing);`;
- CSS += `text-transform:var(--qubely-typo${selectedTypo}-text-transform);`;
- }
- CSS += '}';
- return CSS;
-
-}
+ let CSS = "{";
+ if (selectedTypo !== "none") {
+ CSS += `font-family:var(--qubely-typo${selectedTypo}-font-family);`;
+ CSS += `font-size:var(--qubely-typo${selectedTypo}-font-size);`;
+ CSS += `font-weight:var(--qubely-typo${selectedTypo}-font-weight) !important;`;
+ CSS += `font-style:var(--qubely-typo${selectedTypo}-font-style) !important;`;
+ CSS += `line-height:var(--qubely-typo${selectedTypo}-line-height) !important;`;
+ CSS += `letter-spacing:var(--qubely-typo${selectedTypo}-letter-spacing);`;
+ CSS += `text-transform:var(--qubely-typo${selectedTypo}-text-transform);`;
+ }
+ CSS += "}";
+ return CSS;
+};
export const cssTypography = (v) => {
-
- const {
- globalSource,
- activeSource,
- family,
- weight,
- transform,
-
- } = v;
-
- if (typeof activeSource !== 'undefined' && activeSource === 'global') {
- return globalTypography(globalSource);
- }
-
- let font = ''
- // if (v.family) {
- // if (!['Arial', 'Tahoma', 'Verdana', 'Helvetica', 'Times New Roman', 'Trebuchet MS', 'Georgia'].includes(v.family)) {
- // font = "@import url('https://fonts.googleapis.com/css?family=" + v.family.replace(/\s/g, '+') + ':' + (v.weight || 400) + "');"
- // }
- // }
- let data = { md: [], sm: [], xs: [] }
- if (v.size) { data = _push(_device(v.size, 'font-size:{{key}}'), data) }
- if (v.height) { data = _push(_device(v.height, 'line-height:{{key}} !important'), data) }
- if (v.spacing) { data = _push(_device(v.spacing, 'letter-spacing:{{key}}'), data) }
- let simple = '{' + (v.family ? "font-family:'" + v.family + "'," + v.type + ";" : '') +
- (v.color ? 'color:' + v.color + ';' : '') +
- (v.style && typeof v.style !== 'object' ? 'font-style:' + v.style + ';' : '') +
- (v.decoration ? 'text-decoration:' + v.decoration + ';' : '');
-
- if (weight) {
- if (typeof weight === 'string') {
- simple += `font-weight:${weight.slice(0, -1)};`;
- simple += `font-style:italic;`;
- } else {
- simple += `font-weight:${weight};`;
- simple += `font-style:normal;`;
- }
- }
-
- if (transform) {
- simple += `text-transform:${transform};`;
- }
- simple += '}';
- return { md: data.md, sm: data.sm, xs: data.xs, simple, font };
-}
-
+ const { globalSource, activeSource, family, weight, transform } = v;
+
+ if (typeof activeSource !== "undefined" && activeSource === "global") {
+ return globalTypography(globalSource);
+ }
+
+ let font = "";
+ // if (v.family) {
+ // if (!['Arial', 'Tahoma', 'Verdana', 'Helvetica', 'Times New Roman', 'Trebuchet MS', 'Georgia'].includes(v.family)) {
+ // font = "@import url('https://fonts.googleapis.com/css?family=" + v.family.replace(/\s/g, '+') + ':' + (v.weight || 400) + "');"
+ // }
+ // }
+ let data = { md: [], sm: [], xs: [] };
+ if (v.size) {
+ data = _push(_device(v.size, "font-size:{{key}}"), data);
+ }
+ if (v.height) {
+ data = _push(_device(v.height, "line-height:{{key}} !important"), data);
+ }
+ if (v.spacing) {
+ data = _push(_device(v.spacing, "letter-spacing:{{key}}"), data);
+ }
+ let simple =
+ "{" +
+ (v.family ? "font-family:'" + v.family + "'," + v.type + ";" : "") +
+ (v.color ? "color:" + v.color + ";" : "") +
+ (v.style && typeof v.style !== "object" ? "font-style:" + v.style + ";" : "") +
+ (v.decoration ? "text-decoration:" + v.decoration + ";" : "");
+
+ if (weight) {
+ if (typeof weight === "string") {
+ simple += `font-weight:${weight.slice(0, -1)};`;
+ simple += `font-style:italic;`;
+ } else {
+ simple += `font-weight:${weight};`;
+ simple += `font-style:normal;`;
+ }
+ }
+
+ if (transform) {
+ simple += `text-transform:${transform};`;
+ }
+ simple += "}";
+ return { md: data.md, sm: data.sm, xs: data.xs, simple, font };
+};
// CSS Dimension
export const cssDimension = (v) => {
- const unit = v.unit ? v.unit : 'px'
- return (v.top || 0) + unit + ' ' + (v.right || 0) + unit + ' ' + (v.bottom || 0) + unit + ' ' + (v.left || 0) + unit
-}
+ const unit = v.unit ? v.unit : "px";
+ return (
+ (v.top || 0) + unit + " " + (v.right || 0) + unit + " " + (v.bottom || 0) + unit + " " + (v.left || 0) + unit
+ );
+};
// CSS Background
-const split_bg = (type, image = {}, imgPosition, imgAttachment, imgRepeat, imgSize, DefaultColor, bgGradient, bgimageSource = 'local', externalImageUrl = {}) => {
- let bgData = (DefaultColor ? 'background-color:' + DefaultColor + ';' : '');
- if (type == 'image') {
- bgData += (bgimageSource === 'local' ? image.hasOwnProperty('url') ? 'background-image:url(' + image.url + ');' : '' : externalImageUrl.hasOwnProperty('url') ? 'background-image:url(' + externalImageUrl.url + ');' : '') + (imgPosition ? 'background-position:' + imgPosition + ';' : '') + (imgAttachment ? 'background-attachment:' + imgAttachment + ';' : '') +
- (imgRepeat ? 'background-repeat:' + imgRepeat + ';' : '') + (imgSize ? 'background-size:' + imgSize + ';' : '')
- }
- else if (type == 'gradient') {
- if (bgGradient && bgGradient.type == 'linear') {
- bgData += 'background-image: linear-gradient(' + bgGradient.direction + 'deg, ' + bgGradient.color1 + ' ' + bgGradient.start + '%,' + bgGradient.color2 + ' ' + bgGradient.stop + '%);'
- } else {
- if (typeof bgGradient.radial === 'undefined') {
- bgGradient.radial = 'center';
- }
- bgData += 'background-image: radial-gradient( circle at ' + bgGradient.radial + ' , ' + bgGradient.color1 + ' ' + bgGradient.start + '%,' + bgGradient.color2 + ' ' + bgGradient.stop + '%);'
- }
- }
- return bgData;
-}
+const split_bg = (
+ type,
+ image = {},
+ imgPosition,
+ imgAttachment,
+ imgRepeat,
+ imgSize,
+ DefaultColor,
+ bgGradient,
+ bgimageSource = "local",
+ externalImageUrl = {}
+) => {
+ let bgData = DefaultColor ? "background-color:" + DefaultColor + ";" : "";
+ if (type == "image") {
+ bgData +=
+ (bgimageSource === "local"
+ ? image.hasOwnProperty("url")
+ ? "background-image:url(" + image.url + ");"
+ : ""
+ : externalImageUrl.hasOwnProperty("url")
+ ? "background-image:url(" + externalImageUrl.url + ");"
+ : "") +
+ (imgPosition ? "background-position:" + imgPosition + ";" : "") +
+ (imgAttachment ? "background-attachment:" + imgAttachment + ";" : "") +
+ (imgRepeat ? "background-repeat:" + imgRepeat + ";" : "") +
+ (imgSize ? "background-size:" + imgSize + ";" : "");
+ } else if (type == "gradient") {
+ if (bgGradient && bgGradient.type == "linear") {
+ bgData +=
+ "background-image: linear-gradient(" +
+ bgGradient.direction +
+ "deg, " +
+ bgGradient.color1 +
+ " " +
+ bgGradient.start +
+ "%," +
+ bgGradient.color2 +
+ " " +
+ bgGradient.stop +
+ "%);";
+ } else {
+ if (typeof bgGradient.radial === "undefined") {
+ bgGradient.radial = "center";
+ }
+ bgData +=
+ "background-image: radial-gradient( circle at " +
+ bgGradient.radial +
+ " , " +
+ bgGradient.color1 +
+ " " +
+ bgGradient.start +
+ "%," +
+ bgGradient.color2 +
+ " " +
+ bgGradient.stop +
+ "%);";
+ }
+ }
+ return bgData;
+};
export const cssBackground = (v) => {
- let background = '{'
- background += split_bg(v.bgType, v.bgImage, v.bgimgPosition, v.bgimgAttachment, v.bgimgRepeat, v.bgimgSize, v.bgDefaultColor, v.bgGradient, v.bgimageSource, v.externalImageUrl)
- background += '}'
- if (v.bgType == 'video') {
- if (v.bgVideoFallback) {
- if (v.bgVideoFallback.url) {
- background += 'background-image: url(' + v.bgVideoFallback.url + '); background-position: center; background-repeat: no-repeat; background-size: cover;'
- }
- }
- }
- if (background != '{}') { return background }
- return {};
-}
-
+ let background = "{";
+ background += split_bg(
+ v.bgType,
+ v.bgImage,
+ v.bgimgPosition,
+ v.bgimgAttachment,
+ v.bgimgRepeat,
+ v.bgimgSize,
+ v.bgDefaultColor,
+ v.bgGradient,
+ v.bgimageSource,
+ v.externalImageUrl
+ );
+ background += "}";
+ if (v.bgType == "video") {
+ if (v.bgVideoFallback) {
+ if (v.bgVideoFallback.url) {
+ background +=
+ "background-image: url(" +
+ v.bgVideoFallback.url +
+ "); background-position: center; background-repeat: no-repeat; background-size: cover;";
+ }
+ }
+ }
+ if (background != "{}") {
+ return background;
+ }
+ return {};
+};
// CSS Shape
export const cssShape = (v) => {
- let data = { md: [], sm: [], xs: [] }
- let shape = []
- if (v.color) {
- shape.push(' svg path{fill:' + v.color + ';}');
- shape.push(' svg polygon{fill:' + v.color + ';}')
- }
- if (v.flipShapeDivider) {
- if (v.shapeType === 'top') {
- shape.push(' svg { transform: rotateY(180deg) translateX(50%);}');
- } else {
- shape.push(' svg { transform: rotate(180deg) translate(50%);}');
- }
- }
- if (v.front) { shape.push('{z-index: 99;}') }
- if (v.width) { data = _push(_device(v.width, ' svg {width:{{key}};}'), data) }
- if (v.height) { data = _push(_device(v.height, ' svg {height:{{key}};}'), data) }
- return { data, shape };
-}
-
+ let data = { md: [], sm: [], xs: [] };
+ let shape = [];
+ if (v.color) {
+ shape.push(" svg path{fill:" + v.color + ";}");
+ shape.push(" svg polygon{fill:" + v.color + ";}");
+ }
+ if (v.flipShapeDivider) {
+ if (v.shapeType === "top") {
+ shape.push(" svg { transform: rotateY(180deg) translateX(50%);}");
+ } else {
+ shape.push(" svg { transform: rotate(180deg) translate(50%);}");
+ }
+ }
+ if (v.front) {
+ shape.push("{z-index: 99;}");
+ }
+ if (v.width) {
+ data = _push(_device(v.width, " svg {width:{{key}};}"), data);
+ }
+ if (v.height) {
+ data = _push(_device(v.height, " svg {height:{{key}};}"), data);
+ }
+ return { data, shape };
+};
// CSS ColorAdvanced
export const cssColor = (v) => {
- let data = (v.clip ? '-webkit-background-clip: text; -webkit-text-fill-color: transparent;' : '');
- if (v.type == 'color') {
- if (v.textColor) {
- data += (v.color ? 'color: ' + v.color + ';' : '')
- } else {
- data += (v.color ? 'background-image: none; background-color: ' + v.color + ';' : '')
- }
-
- } else if (v.type == 'gradient') {
- if (v.gradient && v.gradient.type == 'linear') {
- if (v.textColor) {
- data += 'background : -webkit-linear-gradient(' + v.gradient.direction + 'deg, ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;'
- } else {
- data += 'background-image : linear-gradient(' + v.gradient.direction + 'deg, ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);'
- }
- } else {
- if (v.textColor) {
- data += 'background : radial-gradient(circle at ' + v.gradient.radial + ' , ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;'
- } else {
- data += 'background-image : radial-gradient( circle at ' + v.gradient.radial + ' , ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);'
- }
- }
- }
- return '{' + data + '}';
-}
-
+ let data = v.clip ? "-webkit-background-clip: text; -webkit-text-fill-color: transparent;" : "";
+ if (v.type == "color") {
+ if (v.textColor) {
+ data += v.color ? "color: " + v.color + ";" : "";
+ } else {
+ data += v.color ? "background-image: none; background-color: " + v.color + ";" : "";
+ }
+ } else if (v.type == "gradient") {
+ if (v.gradient && v.gradient.type == "linear") {
+ if (v.textColor) {
+ data +=
+ "background : -webkit-linear-gradient(" +
+ v.gradient.direction +
+ "deg, " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;";
+ } else {
+ data +=
+ "background-image : linear-gradient(" +
+ v.gradient.direction +
+ "deg, " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);";
+ }
+ } else {
+ if (v.textColor) {
+ data +=
+ "background : radial-gradient(circle at " +
+ v.gradient.radial +
+ " , " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;";
+ } else {
+ data +=
+ "background-image : radial-gradient( circle at " +
+ v.gradient.radial +
+ " , " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);";
+ }
+ }
+ }
+ return "{" + data + "}";
+};
// CSS Spacer
export const cssSpacer = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if (v.spaceTop) { data = _push(_device(v.spaceTop, 'padding-top:{{key}}'), data) }
- if (v.spaceBottom) { data = _push(_device(v.spaceBottom, 'padding-bottom:{{key}}'), data) }
- return { md: data.md, sm: data.sm, xs: data.xs };
-}
+ let data = { md: [], sm: [], xs: [] };
+ if (v.spaceTop) {
+ data = _push(_device(v.spaceTop, "padding-top:{{key}}"), data);
+ }
+ if (v.spaceBottom) {
+ data = _push(_device(v.spaceBottom, "padding-bottom:{{key}}"), data);
+ }
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
// CSS Size
export const cssSize = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if (v.paddingX) {
- data = _push(_device(v.paddingX, 'padding-left:{{key}}' + (v.paddingX.unit || '') + ';padding-right:{{key}}'), data)
- }
- if (v.paddingY) {
- data = _push(_device(v.paddingY, 'padding-top:{{key}}' + (v.paddingY.unit || '') + ';padding-bottom:{{key}}'), data)
- }
- return { md: data.md, sm: data.sm, xs: data.xs };
-}
-
+ let data = { md: [], sm: [], xs: [] };
+ if (v.paddingX) {
+ data = _push(
+ _device(v.paddingX, "padding-left:{{key}}" + (v.paddingX.unit || "") + ";padding-right:{{key}}"),
+ data
+ );
+ }
+ if (v.paddingY) {
+ data = _push(
+ _device(v.paddingY, "padding-top:{{key}}" + (v.paddingY.unit || "") + ";padding-bottom:{{key}}"),
+ data
+ );
+ }
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
// CSS transfrom
export const cssTransform = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if ((v.translateX && v.translateX.md) || (v.translateY && v.translateY.md)) {
- data.md = `transform: translateX({{key}}${(v.translateX && v.translateX.unit ? v.translateX.unit : 'px')}) `.replace(new RegExp('{{key}}', "g"), v.translateX ? v.translateX.md || '0' : '0') + `translateY({{key}}${(v.translateY && v.translateY.unit ? v.translateY.unit : 'px')})`.replace(new RegExp('{{key}}', "g"), v.translateY ? v.translateY.md || '0' : '0')
- }
- if ((v.translateX && v.translateX.sm) || (v.translateY && v.translateY.sm)) {
- data.sm = `transform: translateX({{key}}${(v.translateX && v.translateX.unit ? v.translateX.unit : 'px')}) `.replace(new RegExp('{{key}}', "g"), v.translateX ? v.translateX.sm || '0' : '0') + `translateY({{key}}${(v.translateY && v.translateY.unit ? v.translateY.unit : 'px')})`.replace(new RegExp('{{key}}', "g"), v.translateY ? v.translateY.sm || '0' : '0')
- }
- if ((v.translateX && v.translateX.xs) || (v.translateY && v.translateY.xs)) {
- data.xs = `transform: translateX({{key}}${(v.translateX && v.translateX.unit ? v.translateX.unit : 'px')}) `.replace(new RegExp('{{key}}', "g"), v.translateX ? v.translateX.xs || '0' : '0') + `translateY({{key}}${(v.translateY && v.translateY.unit ? v.translateY.unit : 'px')})`.replace(new RegExp('{{key}}', "g"), v.translateY ? v.translateY.xs || '0' : '0')
- }
- return { md: [data.md], sm: [data.sm], xs: [data.xs] };
-}
+ let data = { md: [], sm: [], xs: [] };
+ if ((v.translateX && v.translateX.md) || (v.translateY && v.translateY.md)) {
+ data.md =
+ `transform: translateX({{key}}${v.translateX && v.translateX.unit ? v.translateX.unit : "px"}) `.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateX ? v.translateX.md || "0" : "0"
+ ) +
+ `translateY({{key}}${v.translateY && v.translateY.unit ? v.translateY.unit : "px"})`.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateY ? v.translateY.md || "0" : "0"
+ );
+ }
+ if ((v.translateX && v.translateX.sm) || (v.translateY && v.translateY.sm)) {
+ data.sm =
+ `transform: translateX({{key}}${v.translateX && v.translateX.unit ? v.translateX.unit : "px"}) `.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateX ? v.translateX.sm || "0" : "0"
+ ) +
+ `translateY({{key}}${v.translateY && v.translateY.unit ? v.translateY.unit : "px"})`.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateY ? v.translateY.sm || "0" : "0"
+ );
+ }
+ if ((v.translateX && v.translateX.xs) || (v.translateY && v.translateY.xs)) {
+ data.xs =
+ `transform: translateX({{key}}${v.translateX && v.translateX.unit ? v.translateX.unit : "px"}) `.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateX ? v.translateX.xs || "0" : "0"
+ ) +
+ `translateY({{key}}${v.translateY && v.translateY.unit ? v.translateY.unit : "px"})`.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateY ? v.translateY.xs || "0" : "0"
+ );
+ }
+ return { md: [data.md], sm: [data.sm], xs: [data.xs] };
+};
const _customDevice = (val, selector) => {
- let data = {}
- if (val && val.md) {
- let [cssSyntax, value] = selector.replace(new RegExp('{{key}}', "g"), val.md).split(":")
- let [top, right, bottom, left] = value.split(" ")
- left = left.length > 0 ? left.slice(0, -1) : '0'
- data.md = `${cssSyntax}:${top ? top : '0'}${val.unit} ${right ? right : '0'}${val.unit} ${bottom ? bottom : '0'}${val.unit} ${left ? left : '0'}${val.unit};`
- }
- if (val && val.sm) {
- let [cssSyntax, value] = selector.replace(new RegExp('{{key}}', "g"), val.sm).split(":")
- let [top, right, bottom, left] = value.split(" ")
- left = left.length > 0 ? left.slice(0, -1) : '0'
- data.sm = `${cssSyntax}:${top ? top : '0'}${val.unit} ${right ? right : '0'}${val.unit} ${bottom ? bottom : '0'}${val.unit} ${left ? left : '0'}${val.unit};`
- }
- if (val && val.xs) {
- let [cssSyntax, value] = selector.replace(new RegExp('{{key}}', "g"), val.xs).split(":")
- let [top, right, bottom, left] = value.split(" ")
- left = left.length > 0 ? left.slice(0, -1) : '0'
- data.xs = `${cssSyntax}:${top ? top : '0'}${val.unit} ${right ? right : '0'}${val.unit} ${bottom ? bottom : '0'}${val.unit} ${left ? left : '0'}${val.unit};`
- }
- return data;
-}
+ let data = {};
+ if (val && val.md) {
+ let [cssSyntax, value] = selector.replace(new RegExp("{{key}}", "g"), val.md).split(":");
+ let [top, right, bottom, left] = value.split(" ");
+ left = left.length > 0 ? left.slice(0, -1) : "0";
+ data.md = `${cssSyntax}:${top ? top : "0"}${val.unit} ${right ? right : "0"}${val.unit} ${
+ bottom ? bottom : "0"
+ }${val.unit} ${left ? left : "0"}${val.unit};`;
+ }
+ if (val && val.sm) {
+ let [cssSyntax, value] = selector.replace(new RegExp("{{key}}", "g"), val.sm).split(":");
+ let [top, right, bottom, left] = value.split(" ");
+ left = left.length > 0 ? left.slice(0, -1) : "0";
+ data.sm = `${cssSyntax}:${top ? top : "0"}${val.unit} ${right ? right : "0"}${val.unit} ${
+ bottom ? bottom : "0"
+ }${val.unit} ${left ? left : "0"}${val.unit};`;
+ }
+ if (val && val.xs) {
+ let [cssSyntax, value] = selector.replace(new RegExp("{{key}}", "g"), val.xs).split(":");
+ let [top, right, bottom, left] = value.split(" ");
+ left = left.length > 0 ? left.slice(0, -1) : "0";
+ data.xs = `${cssSyntax}:${top ? top : "0"}${val.unit} ${right ? right : "0"}${val.unit} ${
+ bottom ? bottom : "0"
+ }${val.unit} ${left ? left : "0"}${val.unit};`;
+ }
+ return data;
+};
// CSS cssBorderRadius
export const cssBorderRadius = (v) => {
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
-
- let data = { md: [], sm: [], xs: [] }
- data = v.radiusType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'border-radius:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'border-radius:{{key}};'), data)
-
- return { md: data.md, sm: data.sm, xs: data.xs }
- } else {
- let data = ''
- if (v.radiusType == 'global') {
- data = `border-radius:${v.global || '0'}${v.unit ? v.unit : 'px'} `
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `border-radius:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit}`
- }
- return '{' + data + '}';
- }
-
-}
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.radiusType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "border-radius:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "border-radius:{{key}};"), data);
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.radiusType == "global") {
+ data = `border-radius:${v.global || "0"}${v.unit ? v.unit : "px"} `;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `border-radius:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit}`;
+ }
+ return "{" + data + "}";
+ }
+};
// CSS cssPadding
export const cssPadding = (v) => {
-
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
- let data = { md: [], sm: [], xs: [] }
- data = v.paddingType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'padding:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'padding:{{key}};'), data)
-
- return { md: data.md, sm: data.sm, xs: data.xs }
-
- } else {
- let data = ''
- if (v.paddingType == 'global') {
- data = `padding:${v.global}${v.unit ? v.unit : 'px'} `
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `padding:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit}`
- }
- return '{' + data + '}';
- }
-}
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.paddingType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "padding:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "padding:{{key}};"), data);
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.paddingType == "global") {
+ data = `padding:${v.global}${v.unit ? v.unit : "px"} `;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `padding:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit}`;
+ }
+ return "{" + data + "}";
+ }
+};
// CSS cssMargin
export const cssMargin = (v) => {
-
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
- let data = { md: [], sm: [], xs: [] }
- data = v.marginType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'margin:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'margin:{{key}};'), data)
-
- return { md: data.md, sm: data.sm, xs: data.xs }
-
- } else {
- let data = ''
- if (v.marginType == 'global') {
- data = `margin:${v.global}${v.unit ? v.unit : 'px'} `
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `margin:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit}`
- }
- return '{' + data + '}';
- }
-
-}
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.marginType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "margin:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "margin:{{key}};"), data);
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.marginType == "global") {
+ data = `margin:${v.global}${v.unit ? v.unit : "px"} `;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `margin:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit}`;
+ }
+ return "{" + data + "}";
+ }
+};
// CSS cssRowReverse
export const cssRowReverse = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if (v.values.md) { data.md.push(`flex-direction:row-reverse`) }
- if (v.values.sm) { data.sm.push(`flex-direction:column-reverse`) }
- if (v.values.xs) { data.xs.push(`flex-direction:column-reverse`) }
-
-
-
- return { md: data.md, sm: data.sm, xs: data.xs };
-}
\ No newline at end of file
+ let data = { md: [], sm: [], xs: [] };
+ if (v.values.md) {
+ data.md.push(`flex-direction:row-reverse`);
+ }
+ if (v.values.sm) {
+ data.sm.push(`flex-direction:column-reverse`);
+ }
+ if (v.values.xs) {
+ data.xs.push(`flex-direction:column-reverse`);
+ }
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
diff --git a/assets/reactjs/src/components/FieldRender.js b/assets/reactjs/src/components/FieldRender.js
index aca44995..af31f3e3 100644
--- a/assets/reactjs/src/components/FieldRender.js
+++ b/assets/reactjs/src/components/FieldRender.js
@@ -1,178 +1,171 @@
//fields
-import Alignment from "./fields/Alignment"
-import Border from "./fields/Border"
-import BorderRadius from "./fields/BorderRadius"
-import BoxShadow from "./fields/BoxShadow"
-import ButtonGroup from './fields/ButtonGroup'
-import Color from "./fields/Color"
-import Device from './fields/Device'
-import Dimension from "./fields/Dimension"
-import Gradient from "./fields/Gradient"
-import IconList from "./fields/IconList"
-import IconSelector from "./fields/IconSelector"
-import Styles from "./fields/Styles"
-import Separator from "./fields/Separator"
-import Headings from "./fields/Headings"
-import Wrapper from "./fields/Wrapper"
-import Shape from "./fields/Shape"
-import Media from "./fields/Media"
-import Typography from "./fields/Typography"
-import Url from "./fields/Url"
-import Selector from "./fields/Selector"
-import Background from './fields/Background'
-import Tabs from './fields/Tabs'
-import Tab from './fields/Tab'
-import InnerPanel from './fields/InnerPanel'
-import Interaction from './fields/Interaction'
-import Select from './fields/Select'
-import Range from './fields/Range'
-import Toggle from './fields/Toggle'
-import ColorAdvanced from './fields/ColorAdvanced'
-import RadioAdvanced from './fields/RadioAdvanced'
-import DragDimension from './fields/DragDimension'
-import Counter from './fields/Counter'
-import Animation from './fields/Animation'
-import Dropdown from './fields/DropDown'
-import Padding from './fields/Padding'
-import Margin from './fields/Margin'
-import Carousel from './fields/Carousel'
-import icons from '../helpers/icons'
-import HeadingToolbar from './fields/headingToolbar'
-import Templates from './fields/Templates';
-import { QubelyButtonEdit, QubelyButtonSave } from './fields/QubelyButton'
-import { QubelyIconListEdit, QubelyIconListSave } from './fields/QubelyIconList'
+import Alignment from "./fields/Alignment";
+import Border from "./fields/Border";
+import BorderRadius from "./fields/BorderRadius";
+import BoxShadow from "./fields/BoxShadow";
+import ButtonGroup from "./fields/ButtonGroup";
+import Color from "./fields/Color";
+import Device from "./fields/Device";
+import Dimension from "./fields/Dimension";
+import Gradient from "./fields/Gradient";
+import IconList from "./fields/IconList";
+import IconSelector from "./fields/IconSelector";
+import Styles from "./fields/Styles";
+import Separator from "./fields/Separator";
+import Headings from "./fields/Headings";
+import Wrapper from "./fields/Wrapper";
+import Shape from "./fields/Shape";
+import Media from "./fields/Media";
+import Typography from "./fields/Typography";
+import Url from "./fields/Url";
+import Selector from "./fields/Selector";
+import Background from "./fields/Background";
+import Tabs from "./fields/Tabs";
+import Tab from "./fields/Tab";
+import InnerPanel from "./fields/InnerPanel";
+import Interaction from "./fields/Interaction";
+import Select from "./fields/Select";
+import Range from "./fields/Range";
+import Toggle from "./fields/Toggle";
+import ColorAdvanced from "./fields/ColorAdvanced";
+import RadioAdvanced from "./fields/RadioAdvanced";
+import DragDimension from "./fields/DragDimension";
+import Counter from "./fields/Counter";
+import Animation from "./fields/Animation";
+import Dropdown from "./fields/DropDown";
+import Padding from "./fields/Padding";
+import Margin from "./fields/Margin";
+import Carousel from "./fields/Carousel";
+import icons from "../helpers/icons";
+import HeadingToolbar from "./fields/headingToolbar";
+import Templates from "./fields/Templates";
+import { QubelyButtonEdit, QubelyButtonSave } from "./fields/QubelyButton";
+import { QubelyIconListEdit, QubelyIconListSave } from "./fields/QubelyIconList";
//inline
-import { InlineToolbar, InlineSpacer, InlineSelector } from './fields/inline'
+import { InlineToolbar, InlineSpacer, InlineSelector } from "./fields/inline";
// component s
-import InspectorTabs from '../components/InspectorTabs'
-import InspectorTab from '../components/InspectorTab'
-import InspectorSections from '../components/InspectorSections'
+import InspectorTabs from "../components/InspectorTabs";
+import InspectorTab from "../components/InspectorTab";
+import InspectorSections from "../components/InspectorSections";
//functions
+import { CssGenerator, objectReplace, objectAppend, singleField } from "./CssGenerator";
import {
- CssGenerator,
- objectReplace,
- objectAppend,
- singleField
-} from './CssGenerator'
-import {
- _equal,
- animationAttr,
- selectValue,
- isObject,
- isArray,
- setValue,
- videoBackground,
- parseResponsiveViewPort,
- IsInteraction,
- copyToClipboard
-} from './HelperFunction';
+ _equal,
+ animationAttr,
+ selectValue,
+ isObject,
+ isArray,
+ setValue,
+ videoBackground,
+ parseResponsiveViewPort,
+ IsInteraction,
+ copyToClipboard,
+} from "./HelperFunction";
-import {withCSSGenerator} from '../hooks'
+import { withCSSGenerator } from "../hooks";
//hooks
-import { globalAttributes, globalSettingsPanel, animationSettings, interactionSettings } from './fields/GlobalSettings'
-import { buttonAttributes, buttonSettings } from './fields/ButtonSettings'
-import { listAttributes, listSettings } from './fields/ListSettings'
-import { ContextMenu, handleContextMenu } from './fields/ContextMenu'
-
-
-import { Pagination } from './others';
+import { globalAttributes, globalSettingsPanel, animationSettings, interactionSettings } from "./fields/GlobalSettings";
+import { buttonAttributes, buttonSettings } from "./fields/ButtonSettings";
+import { listAttributes, listSettings } from "./fields/ListSettings";
+import { ContextMenu, handleContextMenu } from "./fields/ContextMenu";
+import { Pagination } from "./others";
wp.qubelyComponents = {
- Alignment,
- Animation,
- Background,
- Border,
- ContextMenu: {
- ContextMenu,
- handleContextMenu
- },
- QubelyButton: {
- buttonAttributes,
- buttonSettings
- },
- QubelyList: {
- listAttributes,
- listSettings
- },
- BorderRadius,
- BoxShadow,
- ButtonGroup,
- Color,
- ColorAdvanced,
- Counter,
- Carousel,
- CssGenerator: {
- CssGenerator,
- objectReplace,
- objectAppend,
- singleField
- },
- Dimension,
- Device,
- Dropdown,
- DragDimension,
- gloalSettings: {
- globalAttributes,
- animationSettings,
- interactionSettings,
- globalSettingsPanel,
- },
- Gradient,
- Headings,
- HeadingToolbar,
- HelperFunction: {
- _equal,
- animationAttr,
- selectValue,
- isObject,
- isArray,
- setValue,
- videoBackground,
- parseResponsiveViewPort,
- IsInteraction,
- copyToClipboard
- },
- IconList,
- IconSelector,
- InnerPanel,
- Interaction,
- Inline: {
- InlineToolbar,
- InlineSpacer,
- InlineSelector
- },
- Margin,
- Media,
- Padding,
- Range,
- RadioAdvanced,
- Selector,
- Select,
- Styles,
- Shape,
- Separator,
- Tabs,
- Tab,
- Templates,
- Toggle,
- Typography,
- Wrapper,
- Url,
- Pagination,
- QubelyButtonEdit,
- QubelyButtonSave,
- QubelyIconListEdit,
- QubelyIconListSave,
- QubelyFreeIcons: icons,
- withCSSGenerator,
- InspectorTabs,
- InspectorTab,
- InspectorSections
-}
\ No newline at end of file
+ Alignment,
+ Animation,
+ Background,
+ Border,
+ ContextMenu: {
+ ContextMenu,
+ handleContextMenu,
+ },
+ QubelyButton: {
+ buttonAttributes,
+ buttonSettings,
+ },
+ QubelyList: {
+ listAttributes,
+ listSettings,
+ },
+ BorderRadius,
+ BoxShadow,
+ ButtonGroup,
+ Color,
+ ColorAdvanced,
+ Counter,
+ Carousel,
+ CssGenerator: {
+ CssGenerator,
+ objectReplace,
+ objectAppend,
+ singleField,
+ },
+ Dimension,
+ Device,
+ Dropdown,
+ DragDimension,
+ gloalSettings: {
+ globalAttributes,
+ animationSettings,
+ interactionSettings,
+ globalSettingsPanel,
+ },
+ Gradient,
+ Headings,
+ HeadingToolbar,
+ HelperFunction: {
+ _equal,
+ animationAttr,
+ selectValue,
+ isObject,
+ isArray,
+ setValue,
+ videoBackground,
+ parseResponsiveViewPort,
+ IsInteraction,
+ copyToClipboard,
+ },
+ IconList,
+ IconSelector,
+ InnerPanel,
+ Interaction,
+ Inline: {
+ InlineToolbar,
+ InlineSpacer,
+ InlineSelector,
+ },
+ Margin,
+ Media,
+ Padding,
+ Range,
+ RadioAdvanced,
+ Selector,
+ Select,
+ Styles,
+ Shape,
+ Separator,
+ Tabs,
+ Tab,
+ Templates,
+ Toggle,
+ Typography,
+ Wrapper,
+ Url,
+ Pagination,
+ QubelyButtonEdit,
+ QubelyButtonSave,
+ QubelyIconListEdit,
+ QubelyIconListSave,
+ QubelyFreeIcons: icons,
+ withCSSGenerator,
+ InspectorTabs,
+ InspectorTab,
+ InspectorSections,
+};
diff --git a/assets/reactjs/src/components/HelperFunction.js b/assets/reactjs/src/components/HelperFunction.js
index 89a230de..e8eecaef 100644
--- a/assets/reactjs/src/components/HelperFunction.js
+++ b/assets/reactjs/src/components/HelperFunction.js
@@ -84,14 +84,13 @@ export const videoBackground = (settings) => {
};
export const IsInteraction = (interaction) => {
- if (typeof interaction === 'undefined') {
+ if (typeof interaction === "undefined") {
return false;
} else {
return (
- (typeof interaction.while_scroll_into_view !== 'undefined' &&
+ (typeof interaction.while_scroll_into_view !== "undefined" &&
interaction.while_scroll_into_view.enable === true) ||
- (typeof interaction.mouse_movement !== 'undefined' &&
- interaction.mouse_movement.enable === true)
+ (typeof interaction.mouse_movement !== "undefined" && interaction.mouse_movement.enable === true)
);
}
};
@@ -101,27 +100,25 @@ export const _equal = (value, other) => {
const type = Object.prototype.toString.call(value);
if (type !== Object.prototype.toString.call(other)) return false;
- if (['[object Array]', '[object Object]'].indexOf(type) < 0) return false;
+ if (["[object Array]", "[object Object]"].indexOf(type) < 0) return false;
- const valueLen =
- type === '[object Array]' ? value.length : Object.keys(value).length;
- const otherLen =
- type === '[object Array]' ? other.length : Object.keys(other).length;
+ const valueLen = type === "[object Array]" ? value.length : Object.keys(value).length;
+ const otherLen = type === "[object Array]" ? other.length : Object.keys(other).length;
if (valueLen !== otherLen) return false;
const compare = (item1, item2) => {
var itemType = Object.prototype.toString.call(item1);
- if (['[object Array]', '[object Object]'].indexOf(itemType) >= 0) {
+ if (["[object Array]", "[object Object]"].indexOf(itemType) >= 0) {
if (!isEqual(item1, item2)) return false;
} else {
if (itemType !== Object.prototype.toString.call(item2)) return false;
- if (itemType === '[object Function]') {
+ if (itemType === "[object Function]") {
if (item1.toString() !== item2.toString()) return false;
} else {
if (item1 !== item2) return false;
}
}
};
- if (type === '[object Array]') {
+ if (type === "[object Array]") {
for (var i = 0; i < valueLen; i++) {
if (compare(value[i], other[i]) === false) return false;
}
@@ -139,7 +136,7 @@ export const _equal = (value, other) => {
export const parseResponsiveViewPort = () => {
let responsive = [{ viewport: 1170 }, { viewport: 980 }, { viewport: 580 }];
- if (typeof responsive === 'undefined') return;
+ if (typeof responsive === "undefined") return;
let activeView = null;
for (let i = 0; i < responsive.length; i++) {
diff --git a/assets/reactjs/src/components/InspectorSections.js b/assets/reactjs/src/components/InspectorSections.js
index 6ffaa241..0661aa16 100644
--- a/assets/reactjs/src/components/InspectorSections.js
+++ b/assets/reactjs/src/components/InspectorSections.js
@@ -1,165 +1,162 @@
-import './css/inspectorSections.scss';
+import "./css/inspectorSections.scss";
const {
- element: {
- useEffect,
- useState
- },
- i18n: {__},
- data: {withDispatch},
- blocks: {parse},
- components: {Tooltip, PanelBody}
+ element: { useEffect, useState },
+ i18n: { __ },
+ data: { withDispatch },
+ blocks: { parse },
+ components: { Tooltip, PanelBody },
} = wp;
const Sections = (props) => {
- const [sections, setSections] = useState([]);
- const [loadingState, setLoadingState] = useState('');
- const block = typeof props.block !== 'undefined' ? props.block : '';
- const storeName = '_qubely_local_cache_';
- const storeNameDate = '_last_update_';
+ const [sections, setSections] = useState([]);
+ const [loadingState, setLoadingState] = useState("");
+ const block = typeof props.block !== "undefined" ? props.block : "";
+ const storeName = "_qubely_local_cache_";
+ const storeNameDate = "_last_update_";
- useEffect(() => {
- const today = new Date();
- const sectionData = _getStoreData('sections');
+ useEffect(() => {
+ const today = new Date();
+ const sectionData = _getStoreData("sections");
- if(sectionData) {
- let expDate = _getStoreData(storeNameDate);
- expDate = expDate ? expDate : 0;
- if(expDate !== null && today > expDate ){
- _clearStore();
- _fetchSections(today);
- }else{
- setSections(sectionData)
- }
- }else{
- _fetchSections(today);
- }
+ if (sectionData) {
+ let expDate = _getStoreData(storeNameDate);
+ expDate = expDate ? expDate : 0;
+ if (expDate !== null && today > expDate) {
+ _clearStore();
+ _fetchSections(today);
+ } else {
+ setSections(sectionData);
+ }
+ } else {
+ _fetchSections(today);
+ }
+ }, []);
- }, []);
+ // Sync sections in background
+ const _syncSections = (sections) => {
+ sections.forEach((section, index) => {
+ const isLatest = sections.length === index + 1 ? true : false;
+ _fetchSection(section.ID, () => {
+ if (isLatest) {
+ setLoadingState("qubely-done");
+ setTimeout(() => {
+ setLoadingState("");
+ }, 1000);
+ }
+ });
+ });
+ };
- // Sync sections in background
- const _syncSections = sections => {
- sections.forEach((section, index) => {
- const isLatest = sections.length === index + 1 ? true : false;
- _fetchSection(section.ID, () => {
- if(isLatest){
- setLoadingState('qubely-done');
- setTimeout(() => {
- setLoadingState('');
- }, 1000);
- }
- });
- });
- };
+ // fetch sections
+ const _fetchSections = (today) => {
+ setLoadingState("qubely-is-loading");
+ fetch("https://qubely.io/wp-json/restapi/v2/sections", {
+ method: "POST",
+ body: block ? new URLSearchParams("block_name=" + block) : "",
+ })
+ .then((response) => (response.ok ? response.json() : Promise.reject(response)))
+ .then((response) => {
+ const cacheExp = new Date().setDate(today.getDate() + 1);
+ setSections(response);
+ _setStore("sections", response);
+ _setStore(storeNameDate, cacheExp);
+ _syncSections(response);
+ })
+ .catch((err) => {
+ console.warn("Something went wrong.", err);
+ });
+ };
- // fetch sections
- const _fetchSections = (today) => {
- setLoadingState('qubely-is-loading');
- fetch('https://qubely.io/wp-json/restapi/v2/sections', {
- method: 'POST',
- body: block ? new URLSearchParams('block_name='+block) : ''
- })
- .then(response => response.ok ? response.json() : Promise.reject(response))
- .then(response => {
- const cacheExp = new Date().setDate(today.getDate() + 1);
- setSections(response);
- _setStore('sections', response);
- _setStore(storeNameDate, cacheExp);
- _syncSections(response);
- })
- .catch((err) => {
- console.warn('Something went wrong.', err);
- });
- };
+ // fetch section
+ const _fetchSection = (section_id, callback) => {
+ fetch("https://qubely.io/wp-json/restapi/v2/single-section", {
+ method: "POST",
+ body: new URLSearchParams("section_id=" + section_id),
+ })
+ .then((response) => (response.ok ? response.json() : Promise.reject(response)))
+ .then((response) => {
+ _setStore(section_id, response.rawData);
+ callback && callback();
+ })
+ .catch((err) => {
+ console.warn("Something went wrong.", err);
+ });
+ };
- // fetch section
- const _fetchSection = (section_id, callback) => {
- fetch('https://qubely.io/wp-json/restapi/v2/single-section', {
- method: 'POST',
- body: new URLSearchParams('section_id='+ section_id)
- })
- .then(response => response.ok ? response.json() : Promise.reject(response))
- .then(response => {
- _setStore(section_id, response.rawData);
- callback && callback();
- })
- .catch( err => {
- console.warn('Something went wrong.', err);
- });
- };
+ // insert section as block
+ const _insertSection = (section_id) => {
+ const { insertBlocks } = props;
+ const sectionData = _getStoreData(section_id);
+ if (sectionData !== null) {
+ insertBlocks(parse(sectionData));
+ } else {
+ _fetchSection(section_id, () => {
+ const sectionData = _getStoreData(section_id);
+ insertBlocks(parse(sectionData));
+ });
+ }
+ };
- // insert section as block
- const _insertSection = section_id => {
- const {insertBlocks} = props
- const sectionData = _getStoreData(section_id);
- if(sectionData !== null){
- insertBlocks(parse(sectionData));
- }else{
- _fetchSection(section_id, () => {
- const sectionData = _getStoreData(section_id);
- insertBlocks(parse(sectionData));
- })
- }
- };
+ // Get full storage
+ const _getStore = () => {
+ let store = window.localStorage.getItem(storeName);
+ store = JSON.parse(store);
+ return store ? store : null;
+ };
- // Get full storage
- const _getStore = () => {
- let store = window.localStorage.getItem(storeName);
- store = JSON.parse(store);
- return store ? store : null;
- };
+ // Get data from storage by key
+ const _getStoreData = (key) => {
+ let store = _getStore();
+ store =
+ store !== null && typeof store[block] !== "undefined" && typeof store[block][key] !== "undefined"
+ ? store[block][key]
+ : null;
+ return store;
+ };
- // Get data from storage by key
- const _getStoreData = key => {
- let store = _getStore();
- store = store !== null && typeof store[block] !== 'undefined' && typeof store[block][key] !== 'undefined' ? store[block][key] : null;
- return store;
- };
+ // Set data to storage
+ const _setStore = (key, newData) => {
+ if (typeof key === "undefined" || typeof newData === "undefined") {
+ return false;
+ }
+ let storage = _getStore() ? _getStore() : {};
+ if (typeof storage[block] === "undefined") {
+ storage[block] = {};
+ }
+ storage[block][key] = newData;
+ storage = JSON.stringify(storage);
+ window.localStorage.setItem(storeName, storage);
+ };
- // Set data to storage
- const _setStore = (key, newData) => {
- if(typeof key === 'undefined' || typeof newData === 'undefined') {
- return false;
- }
- let storage = _getStore() ? _getStore() : {};
- if(typeof storage[block] === 'undefined'){
- storage[block] = {}
- }
- storage[block][key] = newData;
- storage = JSON.stringify(storage);
- window.localStorage.setItem(storeName, storage);
- };
+ // Clear localStorage data
+ const _clearStore = () => window.localStorage.setItem(storeName, JSON.stringify({}));
- // Clear localStorage data
- const _clearStore = () => window.localStorage.setItem(storeName, JSON.stringify({}));
+ // Re-sync blocks
+ const _syncBlocks = () => {
+ const today = new Date();
+ _clearStore();
+ _fetchSections(today);
+ };
- // Re-sync blocks
- const _syncBlocks = () => {
- const today = new Date();
- _clearStore();
- _fetchSections(today);
- }
-
- return (
-
-
-
-
-
-
- {
- sections.map((section, i) => (
-
-
-
- _insertSection(section.ID)}>{__('Import')}
-
-
- ))
- }
-
- )
+ return (
+
+
+
+
+
+
+ {sections.map((section, i) => (
+
+
+
+ _insertSection(section.ID)}>{__("Import")}
+
+
+ ))}
+
+ );
};
-export default withDispatch((dispatch) => ({ insertBlocks : dispatch('core/block-editor').insertBlocks }))(Sections)
\ No newline at end of file
+export default withDispatch((dispatch) => ({ insertBlocks: dispatch("core/block-editor").insertBlocks }))(Sections);
diff --git a/assets/reactjs/src/components/InspectorTab.js b/assets/reactjs/src/components/InspectorTab.js
index 24b98b76..b4a5d2cd 100644
--- a/assets/reactjs/src/components/InspectorTab.js
+++ b/assets/reactjs/src/components/InspectorTab.js
@@ -1,17 +1,17 @@
-const { Fragment} = wp.element;
+const { Fragment } = wp.element;
-const InspectorTab = props => {
- const {children, isActive, key} = props;
- return (
-
- {Array.isArray(children) ? children.map(item => item) : children}
-
- )
-}
+const InspectorTab = (props) => {
+ const { children, isActive, key } = props;
+ return (
+
+ {Array.isArray(children) ? children.map((item) => item) : children}
+
+ );
+};
-export default InspectorTab
\ No newline at end of file
+export default InspectorTab;
diff --git a/assets/reactjs/src/components/InspectorTabs.js b/assets/reactjs/src/components/InspectorTabs.js
index 2cebd64d..11d5f43b 100644
--- a/assets/reactjs/src/components/InspectorTabs.js
+++ b/assets/reactjs/src/components/InspectorTabs.js
@@ -1,120 +1,146 @@
-import './css/inspectorTabs.scss';
-import classnames from 'classnames';
+/* eslint-disable react/react-in-jsx-scope */
+import "./css/inspectorTabs.scss";
+import classnames from "classnames";
const { __ } = wp.i18n;
const { Fragment, cloneElement, Children } = wp.element;
const { Tooltip } = wp.components;
const { useState, useRef, useEffect } = wp.element,
- LAYOUT = 'layout',
- STYLE = 'style',
- ADVANCE = 'advance';
-
-
-const InspectorTabs = props => {
- const { defaultTab, children, tabs } = props,
- [currentTab, setCurrentTab] = useState(defaultTab ? defaultTab : tabs[0]),
- tabContainer = useRef(),
- offset = useRef(undefined);
-
- let sidebarPanel;
-
- useEffect(() => {
- sidebarPanel = tabContainer.current.closest('.components-panel');
- });
-
- const observer = new IntersectionObserver(([e]) => e.target.classList.toggle('qubely-is-sticky', e.intersectionRatio < 1), { threshold: [1] });
-
- // component did mount
- useEffect(() => {
- // sticky tabs menu
- const container = document.querySelector('.qubely-inspector-tabs-container');
- if (container) {
- observer.observe(container);
- }
-
- // component will unmount
- return () => {
- sidebarPanel && sidebarPanel.removeAttribute('data-qubely-tab');
- }
- }, []);
-
- useEffect(() => {
-
- sidebarPanel && sidebarPanel.setAttribute('data-qubely-tab', defaultTab)
- }, [defaultTab]);
-
- const _onTabChange = tab => {
- setCurrentTab(tab);
- sidebarPanel && sidebarPanel.setAttribute('data-qubely-tab', tab);
- };
-
- return (
-
-
- {
- /*
- * The tabs is static, you must use layout, style & advance
- */
- }
-
- {
- tabs.indexOf(LAYOUT) > -1 && (
-
- _onTabChange(LAYOUT)}>
- {__('Layout')}
-
-
- )
- }
-
- {
- tabs.indexOf(STYLE) > -1 && (
-
- _onTabChange(STYLE)}>
- {__('Style')}
-
-
- )
- }
-
- {
- tabs.indexOf(ADVANCE) > -1 && (
-
- _onTabChange(ADVANCE)}>
- {__('Advanced')}
-
-
- )
- }
-
-
- )
+ LAYOUT = "layout",
+ STYLE = "style",
+ ADVANCE = "advance";
+
+const InspectorTabs = (props) => {
+ const { defaultTab, children, tabs } = props,
+ [currentTab, setCurrentTab] = useState(defaultTab ? defaultTab : tabs[0]),
+ tabContainer = useRef(),
+ offset = useRef(undefined);
+
+ let sidebarPanel;
+
+ useEffect(() => {
+ sidebarPanel = tabContainer.current.closest(".components-panel");
+ });
+
+ const observer = new IntersectionObserver(
+ ([e]) => e.target.classList.toggle("qubely-is-sticky", e.intersectionRatio < 1),
+ { threshold: [1] }
+ );
+
+ // component did mount
+ useEffect(() => {
+ // sticky tabs menu
+ const container = document.querySelector(".qubely-inspector-tabs-container");
+ if (container) {
+ observer.observe(container);
+ }
+
+ // component will unmount
+ return () => {
+ sidebarPanel && sidebarPanel.removeAttribute("data-qubely-tab");
+ };
+ }, []);
+
+ useEffect(() => {
+ sidebarPanel && sidebarPanel.setAttribute("data-qubely-tab", defaultTab);
+ }, [defaultTab]);
+
+ const _onTabChange = (tab) => {
+ setCurrentTab(tab);
+ sidebarPanel && sidebarPanel.setAttribute("data-qubely-tab", tab);
+ };
+
+ return (
+
+
+ {/*
+ * The tabs is static, you must use layout, style & advance
+ */}
+
+ {tabs.indexOf(STYLE) > -1 && (
+
+ _onTabChange(STYLE)}
+ >
+
+
+
+
+ {__("Style")}
+
+
+ )}
+
+ {tabs.indexOf(ADVANCE) > -1 && (
+
+ _onTabChange(ADVANCE)}
+ >
+
+
+ {__("Advanced")}
+
+
+ )}
+
+ {tabs.indexOf(LAYOUT) > -1 && (
+
+ _onTabChange(LAYOUT)}
+ >
+
+
+ {__("Layout")}
+
+
+ )}
+
+
+ );
};
InspectorTabs.defaultProps = {
- defaultTab: null,
- tabs: ['layout', 'style', 'advance']
-}
+ defaultTab: null,
+ tabs: ["style", "advance", "layout"],
+};
-export default InspectorTabs;
\ No newline at end of file
+export default InspectorTabs;
diff --git a/assets/reactjs/src/components/InteractionFields/InteractionData.js b/assets/reactjs/src/components/InteractionFields/InteractionData.js
index 6e5b25a0..fc0c6af9 100644
--- a/assets/reactjs/src/components/InteractionFields/InteractionData.js
+++ b/assets/reactjs/src/components/InteractionFields/InteractionData.js
@@ -1,140 +1,139 @@
const defaultInteraction = {
- while_scroll_into_view: {
- enable: false,
- action_list: [
- {
- id: 'b3fdc1c1e6bfde5942ea',
- index: 0,
- keyframe: 0,
- name: 'move',
- property: {
- x: 0,
- y: -100,
- z: 0,
- },
- range: {
- max: 1000,
- min: -1000,
- step: 1
- },
- single: true,
- title: "Move",
- },
- {
- id: '936e0225e6dc8edfba7d',
- index: 1,
- keyframe: 100,
- name: 'move',
- property: {
- x: 0,
- y: 0,
- z: 0,
- },
- range: {
- max: 1000,
- min: -1000,
- step: 1
- },
- single: true,
- title: "Move",
- },
- ],
- transform_origin_x: 'center',
- transform_origin_y: 'center',
- enable_mobile: false,
- enable_tablet: false
- },
- mouse_movement: {
- enable: false,
- mouse_tilt_direction: 'Direct',
- mouse_tilt_speed: 1,
- mouse_tilt_max: 15,
- enable_mobile: false,
- enable_tablet: false
- }
-}
-
+ while_scroll_into_view: {
+ enable: false,
+ action_list: [
+ {
+ id: "b3fdc1c1e6bfde5942ea",
+ index: 0,
+ keyframe: 0,
+ name: "move",
+ property: {
+ x: 0,
+ y: -100,
+ z: 0,
+ },
+ range: {
+ max: 1000,
+ min: -1000,
+ step: 1,
+ },
+ single: true,
+ title: "Move",
+ },
+ {
+ id: "936e0225e6dc8edfba7d",
+ index: 1,
+ keyframe: 100,
+ name: "move",
+ property: {
+ x: 0,
+ y: 0,
+ z: 0,
+ },
+ range: {
+ max: 1000,
+ min: -1000,
+ step: 1,
+ },
+ single: true,
+ title: "Move",
+ },
+ ],
+ transform_origin_x: "center",
+ transform_origin_y: "center",
+ enable_mobile: false,
+ enable_tablet: false,
+ },
+ mouse_movement: {
+ enable: false,
+ mouse_tilt_direction: "Direct",
+ mouse_tilt_speed: 1,
+ mouse_tilt_max: 15,
+ enable_mobile: false,
+ enable_tablet: false,
+ },
+};
const interactionActions = [
- {
- name: 'move',
- title: "Move",
- property: {
- x: 0,
- y: -100,
- z: 0,
- },
- range: {
- max: 1000,
- min: -1000,
- step: 1
- },
- },
- {
- name: 'scale',
- title: "Scale",
- property: {
- x: 1,
- y: 1,
- z: 1,
- },
- range: {
- max: 3,
- min: 0,
- step: 0.1
- },
- },
- {
- name: 'rotate',
- title: "Rotate",
- property: {
- x: 0,
- y: -100,
- z: 0,
- },
- range: {
- max: 1000,
- min: -1000,
- step: 1
- }
- },
- {
- name: 'skew',
- title: "Skew",
- property: {
- x: 0,
- y: -100
- },
- range: {
- max: 80,
- min: -80,
- step: 1
- }
- },
- {
- name: 'opacity',
- title: "Opacity",
- property: {
- value: 0
- },
- range: {
- max: 1,
- min: 0,
- step: 0.1
- }
- },
- {
- name: 'blur',
- title: "Blur",
- property: {
- value: 0
- },
- range: {
- max: 100,
- min: 0,
- step: 1
- }
- },
-]
+ {
+ name: "move",
+ title: "Move",
+ property: {
+ x: 0,
+ y: -100,
+ z: 0,
+ },
+ range: {
+ max: 1000,
+ min: -1000,
+ step: 1,
+ },
+ },
+ {
+ name: "scale",
+ title: "Scale",
+ property: {
+ x: 1,
+ y: 1,
+ z: 1,
+ },
+ range: {
+ max: 3,
+ min: 0,
+ step: 0.1,
+ },
+ },
+ {
+ name: "rotate",
+ title: "Rotate",
+ property: {
+ x: 0,
+ y: -100,
+ z: 0,
+ },
+ range: {
+ max: 1000,
+ min: -1000,
+ step: 1,
+ },
+ },
+ {
+ name: "skew",
+ title: "Skew",
+ property: {
+ x: 0,
+ y: -100,
+ },
+ range: {
+ max: 80,
+ min: -80,
+ step: 1,
+ },
+ },
+ {
+ name: "opacity",
+ title: "Opacity",
+ property: {
+ value: 0,
+ },
+ range: {
+ max: 1,
+ min: 0,
+ step: 0.1,
+ },
+ },
+ {
+ name: "blur",
+ title: "Blur",
+ property: {
+ value: 0,
+ },
+ range: {
+ max: 100,
+ min: 0,
+ step: 1,
+ },
+ },
+];
-export { defaultInteraction, interactionActions }
\ No newline at end of file
+export { defaultInteraction, interactionActions };
diff --git a/assets/reactjs/src/components/InteractionFields/InteractionParser.js b/assets/reactjs/src/components/InteractionFields/InteractionParser.js
index d0637ea1..f1cfbf41 100644
--- a/assets/reactjs/src/components/InteractionFields/InteractionParser.js
+++ b/assets/reactjs/src/components/InteractionFields/InteractionParser.js
@@ -1,737 +1,768 @@
-
-function InteractionMath (animationProperty){
- this.actions = animationProperty
- this.actionProperty = ['move','rotate','scale','skew','opacity','blur']
- this.actionSortList = {}
-}
-InteractionMath.prototype.bindCustomAnimation = function(){
- this.actionProperty.map(ActionName=> {
- this.actionSortList[ActionName] = this.actions.filter(action => action.name === ActionName)
- })
-}
-InteractionMath.prototype.getCustomAnimationActionByName = function(actionName, keyframe=null){
- if( keyframe === null ) {
- return typeof this.actionSortList[actionName] !== "undefined" ? this.actionSortList[actionName] : []
- }else{
- let animation = { from: null, to: null }
- let actions = typeof this.actionSortList[actionName] !== "undefined" ? this.actionSortList[actionName] : []
- if( actions.length === 0 ){
- return animation;
- }
- let found = false;
- actions.map((action, index)=> {
- if(keyframe < parseInt(action.keyframe) && animation.to === null ){
- if( typeof animation.fixed !== 'undefined' ) delete animation.fixed;
- action.toKF = 0
- animation.to = action
- if(typeof actions[index-1] !== 'undefined'){
- actions[index-1].scroll = 0
- animation.from = actions[index-1]
- }
- found = true
- }
- if( index === actions.length-1 && found === false ){
- animation.to = action
- animation.fixed = true
- if(typeof actions[index-1] !== 'undefined'){
- actions[index-1].scroll = 0
- animation.from = actions[index-1]
- }
- }
- })
- return animation;
- }
-}
-InteractionMath.prototype.getTAxis = function(from, to, scrollPercentage, combinedPercentage){
- let { toKF, fromKF } = combinedPercentage
- let tf = fromKF === 0 ? scrollPercentage : scrollPercentage - fromKF
- return from - (((from-to)/toKF)*tf)
+function InteractionMath(animationProperty) {
+ this.actions = animationProperty;
+ this.actionProperty = ["move", "rotate", "scale", "skew", "opacity", "blur"];
+ this.actionSortList = {};
}
+InteractionMath.prototype.bindCustomAnimation = function () {
+ this.actionProperty.map((ActionName) => {
+ this.actionSortList[ActionName] = this.actions.filter((action) => action.name === ActionName);
+ });
+};
+InteractionMath.prototype.getCustomAnimationActionByName = function (actionName, keyframe = null) {
+ if (keyframe === null) {
+ return typeof this.actionSortList[actionName] !== "undefined" ? this.actionSortList[actionName] : [];
+ } else {
+ let animation = { from: null, to: null };
+ let actions = typeof this.actionSortList[actionName] !== "undefined" ? this.actionSortList[actionName] : [];
+ if (actions.length === 0) {
+ return animation;
+ }
+ let found = false;
+ actions.map((action, index) => {
+ if (keyframe < parseInt(action.keyframe) && animation.to === null) {
+ if (typeof animation.fixed !== "undefined") delete animation.fixed;
+ action.toKF = 0;
+ animation.to = action;
+ if (typeof actions[index - 1] !== "undefined") {
+ actions[index - 1].scroll = 0;
+ animation.from = actions[index - 1];
+ }
+ found = true;
+ }
+ if (index === actions.length - 1 && found === false) {
+ animation.to = action;
+ animation.fixed = true;
+ if (typeof actions[index - 1] !== "undefined") {
+ actions[index - 1].scroll = 0;
+ animation.from = actions[index - 1];
+ }
+ }
+ });
+ return animation;
+ }
+};
+InteractionMath.prototype.getTAxis = function (from, to, scrollPercentage, combinedPercentage) {
+ let { toKF, fromKF } = combinedPercentage;
+ let tf = fromKF === 0 ? scrollPercentage : scrollPercentage - fromKF;
+ return from - ((from - to) / toKF) * tf;
+};
-InteractionMath.prototype.getMoveTransform = function(key, nextTriggerActions, scrollPercentage){
- let keyframe = nextTriggerActions.to.keyframe
- let Fkeyframe = nextTriggerActions.from.keyframe
- let toKF = (isNaN(keyframe)) ? 100 : Math.abs(Fkeyframe-keyframe)
- let combinedPercentage = {toKF, fromKF: Fkeyframe, totalKF: keyframe }
-
- let Xfrom = nextTriggerActions.from.x
- let Xto = nextTriggerActions.to.x
- let Yfrom = nextTriggerActions.from.y
- let Yto = nextTriggerActions.to.y
- let Zfrom = nextTriggerActions.from.z
- let Zto = nextTriggerActions.to.z
- nextTriggerActions.goal.x = this.getTAxis(Xfrom, Xto, scrollPercentage, combinedPercentage)
- nextTriggerActions.goal.y = this.getTAxis(Yfrom, Yto, scrollPercentage, combinedPercentage) //IM.getTAxis(Yfrom, Yto, scrollPercentage, combinedPercentage)
- nextTriggerActions.goal.z = this.getTAxis(Zfrom, Zto, scrollPercentage, combinedPercentage)
- return nextTriggerActions
-}
-InteractionMath.prototype.getSkew = function(key, nextTriggerActions, scrollPercentage){
- let keyframe = nextTriggerActions.to.keyframe
- let Fkeyframe = nextTriggerActions.from.keyframe
- let toKF = (isNaN(keyframe)) ? 100 : Math.abs(Fkeyframe-keyframe)
-
- let combinedPercentage = {toKF, fromKF: Fkeyframe, totalKF: keyframe }
- let Xfrom = nextTriggerActions.from.x
- let Xto = nextTriggerActions.to.x
- let Yfrom = nextTriggerActions.from.y
- let Yto = nextTriggerActions.to.y
- nextTriggerActions.goal.x = this.getTAxis(Xfrom, Xto, scrollPercentage, combinedPercentage)
- nextTriggerActions.goal.y = this.getTAxis(Yfrom, Yto, scrollPercentage, combinedPercentage)
- return nextTriggerActions
-}
-InteractionMath.prototype.getOpacity = function(key, nextTriggerActions, scrollPercentage){
- let keyframe = nextTriggerActions.to.keyframe
- let Fkeyframe = nextTriggerActions.from.keyframe
- let toKF = (isNaN(keyframe)) ? 100 : Math.abs(Fkeyframe-keyframe)
-
- let combinedPercentage = {toKF, fromKF: Fkeyframe, totalKF: keyframe }
- let Ofrom = nextTriggerActions.from.value
- let Oto = nextTriggerActions.to.value
- nextTriggerActions.goal.value = this.getTAxis(Ofrom, Oto, scrollPercentage, combinedPercentage)
- return nextTriggerActions
-}
+InteractionMath.prototype.getMoveTransform = function (key, nextTriggerActions, scrollPercentage) {
+ let keyframe = nextTriggerActions.to.keyframe;
+ let Fkeyframe = nextTriggerActions.from.keyframe;
+ let toKF = isNaN(keyframe) ? 100 : Math.abs(Fkeyframe - keyframe);
+ let combinedPercentage = { toKF, fromKF: Fkeyframe, totalKF: keyframe };
+
+ let Xfrom = nextTriggerActions.from.x;
+ let Xto = nextTriggerActions.to.x;
+ let Yfrom = nextTriggerActions.from.y;
+ let Yto = nextTriggerActions.to.y;
+ let Zfrom = nextTriggerActions.from.z;
+ let Zto = nextTriggerActions.to.z;
+ nextTriggerActions.goal.x = this.getTAxis(Xfrom, Xto, scrollPercentage, combinedPercentage);
+ nextTriggerActions.goal.y = this.getTAxis(Yfrom, Yto, scrollPercentage, combinedPercentage); //IM.getTAxis(Yfrom, Yto, scrollPercentage, combinedPercentage)
+ nextTriggerActions.goal.z = this.getTAxis(Zfrom, Zto, scrollPercentage, combinedPercentage);
+ return nextTriggerActions;
+};
+InteractionMath.prototype.getSkew = function (key, nextTriggerActions, scrollPercentage) {
+ let keyframe = nextTriggerActions.to.keyframe;
+ let Fkeyframe = nextTriggerActions.from.keyframe;
+ let toKF = isNaN(keyframe) ? 100 : Math.abs(Fkeyframe - keyframe);
+
+ let combinedPercentage = { toKF, fromKF: Fkeyframe, totalKF: keyframe };
+ let Xfrom = nextTriggerActions.from.x;
+ let Xto = nextTriggerActions.to.x;
+ let Yfrom = nextTriggerActions.from.y;
+ let Yto = nextTriggerActions.to.y;
+ nextTriggerActions.goal.x = this.getTAxis(Xfrom, Xto, scrollPercentage, combinedPercentage);
+ nextTriggerActions.goal.y = this.getTAxis(Yfrom, Yto, scrollPercentage, combinedPercentage);
+ return nextTriggerActions;
+};
+InteractionMath.prototype.getOpacity = function (key, nextTriggerActions, scrollPercentage) {
+ let keyframe = nextTriggerActions.to.keyframe;
+ let Fkeyframe = nextTriggerActions.from.keyframe;
+ let toKF = isNaN(keyframe) ? 100 : Math.abs(Fkeyframe - keyframe);
+
+ let combinedPercentage = { toKF, fromKF: Fkeyframe, totalKF: keyframe };
+ let Ofrom = nextTriggerActions.from.value;
+ let Oto = nextTriggerActions.to.value;
+ nextTriggerActions.goal.value = this.getTAxis(Ofrom, Oto, scrollPercentage, combinedPercentage);
+ return nextTriggerActions;
+};
class MouseTilt {
- constructor(element, settings = {}) {
-
- this.width = null;
- this.height = null;
- this.clientWidth = null;
- this.clientHeight = null;
- this.left = null;
- this.top = null;
-
- // for Gyroscope sampling
- this.gammazero = null;
- this.betazero = null;
- this.lastgammazero = null;
- this.lastbetazero = null;
-
- this.transitionTimeout = null;
- this.updateCall = null;
- this.event = null;
-
- this.updateBind = this.update.bind(this);
- this.resetBind = this.reset.bind(this);
-
- this.element = element;
- this.destroys = false;
- this.settings = this.extendSettings(settings);
-
- this.reverse = this.settings.reverse ? -1 : 1;
- this.glare = MouseTilt.isSettingTrue(this.settings.glare);
- this.glarePrerender = MouseTilt.isSettingTrue(this.settings["glare-prerender"]);
- this.fullPageListening = MouseTilt.isSettingTrue(this.settings["full-page-listening"]);
- this.gyroscope = MouseTilt.isSettingTrue(this.settings.gyroscope);
- this.gyroscopeSamples = this.settings.gyroscopeSamples;
-
- this.elementListener = this.getElementListener();
- this.wrapWithParent();
- if (this.glare) {
- this.prepareGlare();
- }
-
- if (this.fullPageListening) {
- this.updateClientSize();
- }
-
- this.addEventListeners();
- this.updateInitialPosition();
- }
-
- static isSettingTrue(setting) {
- return setting === "" || setting === true || setting === 1;
- }
-
- /**
- * Method returns element what will be listen mouse events
- * @return {Node}
- */
- getElementListener() {
- return this.element;
- }
-
- /**
- * Method set listen methods for this.elementListener
- * @return {Node}
- */
- addEventListeners() {
- this.onMouseEnterBind = this.onMouseEnter.bind(this);
- this.onMouseMoveBind = this.onMouseMove.bind(this);
- this.onMouseLeaveBind = this.onMouseLeave.bind(this);
- this.onWindowResizeBind = this.onWindowResize.bind(this);
- this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
-
- this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
- this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
- this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
-
- if (this.glare || this.fullPageListening) {
- window.addEventListener("resize", this.onWindowResizeBind);
- }
-
- if (this.gyroscope) {
- window.addEventListener("deviceorientation", this.onDeviceOrientationBind);
- }
- }
-
- /**
- * Method remove event listeners from current this.elementListener
- */
- removeEventListeners() {
- this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
- this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
- this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
-
- if (this.gyroscope) {
- window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
- }
-
- if (this.glare || this.fullPageListening) {
- window.removeEventListener("resize", this.onWindowResizeBind);
- }
- }
-
- destroy() {
- clearTimeout(this.transitionTimeout);
- if (this.updateCall !== null) {
- cancelAnimationFrame(this.updateCall);
- }
- this.reset();
- this.destroys = true;
- this.unWrapParent(this.element);
- this.removeEventListeners();
- if( typeof this.element.mouseTilt !== 'undefined' ){
- this.element.mouseTilt = null;
- delete this.element.mouseTilt;
- }
-
- this.element = null;
- }
-
- onDeviceOrientation(event) {
- if (event.gamma === null || event.beta === null) {
- return;
- }
-
- this.updateElementPosition();
-
- if (this.gyroscopeSamples > 0) {
- this.lastgammazero = this.gammazero;
- this.lastbetazero = this.betazero;
-
- if (this.gammazero === null) {
- this.gammazero = event.gamma;
- this.betazero = event.beta;
- } else {
- this.gammazero = (event.gamma + this.lastgammazero) / 2;
- this.betazero = (event.beta + this.lastbetazero) / 2;
- }
-
- this.gyroscopeSamples -= 1;
- }
-
- const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
- const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
-
- const degreesPerPixelX = totalAngleX / this.width;
- const degreesPerPixelY = totalAngleY / this.height;
-
- const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
- const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
-
- const posX = angleX / degreesPerPixelX;
- const posY = angleY / degreesPerPixelY;
-
- if (this.updateCall !== null) {
- cancelAnimationFrame(this.updateCall);
- }
-
- this.event = {
- clientX: posX + this.left,
- clientY: posY + this.top,
- };
-
- this.updateCall = requestAnimationFrame(this.updateBind);
- }
-
- /**
- * Wrap with extra div when initiate or mouse enter to the element
- */
- wrapWithParent(){
- if(typeof this.element.parentElement !=='undefined' && this.element.parentElement !== null && this.element.parentElement.className === 'qubley-interaction-wrapper' ){
- this.element = this.element.parentElement
- }
- if( this.element.className === 'qubley-interaction-wrapper' || this.element.parentElement.className === 'qubley-interaction-wrapper'){
- return
- }
- const newDom = document.createElement('div')
- newDom.setAttribute('class','qubley-interaction-wrapper')
- this.element.parentNode.insertBefore(newDom, this.element)
- newDom.appendChild(this.element)
- this.element = newDom
- }
-
- /**
- * Unwrap the extra div when destroy or need to remove other time
- */
- unWrapParent( element ){
- if( element.parentNode !== null && element.parentElement.className === 'qubley-interaction-wrapper' ){
- element = element.parentElement
- }
- if( element.className !== 'qubley-interaction-wrapper' || element.parentNode === null){
- return
- }
- const elem = element.childNodes
- if( elem.length > 0 ){
- const newElement = element.parentNode.insertBefore(elem[0], element)
- element.parentElement.removeChild(element);
- this.element = newElement
- }
- }
- onMouseEnter() {
- this.wrapWithParent()
- this.updateElementPosition();
- this.element.style.willChange = "transform";
- this.setTransition();
- }
-
- onMouseMove(event) {
- if (this.updateCall !== null) {
- cancelAnimationFrame(this.updateCall);
- }
-
- this.event = event;
- this.updateCall = requestAnimationFrame(this.updateBind);
- }
-
- onMouseLeave() {
- this.setTransition();
- if (this.settings.reset) {
- requestAnimationFrame(this.resetBind);
- }
- }
-
- reset() {
- this.event = {
- clientX: this.left + this.width / 2,
- clientY: this.top + this.height / 2
- };
-
- if(this.element !== null && this.element.parentElement !== null ){
- if( this.element.parentElement.className === 'qubley-interaction-wrapper' ){
- this.element = this.element.parentElement
- }
- }
-
- if( this.element.className !== 'qubley-interaction-wrapper'){
- return
- }
- if (this.element && this.element.style) {
- this.element.style.transform = `perspective(${this.settings.perspective}px) ` +
- `rotateX(0deg) ` +
- `rotateY(0deg) ` +
- `scale3d(1, 1, 1)`;
- }
-
- this.resetGlare();
- }
-
- resetGlare() {
- if (this.glare) {
- this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
- this.glareElement.style.opacity = "0";
- }
- }
-
- updateInitialPosition() {
- if (this.settings.startX === 0 && this.settings.startY === 0) {
- return;
- }
-
- this.onMouseEnter();
- if (this.fullPageListening) {
- this.event = {
- clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth,
- clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight
- };
- } else {
- this.event = {
- clientX: this.left + ((this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.width),
- clientY: this.top + ((this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.height)
- };
- }
-
-
- let backupScale = this.settings.scale;
- this.settings.scale = 1;
- this.update();
- this.settings.scale = backupScale;
- this.resetGlare();
- }
-
- getValues() {
- let x, y;
-
- if (this.fullPageListening) {
- x = this.event.clientX / this.clientWidth;
- y = this.event.clientY / this.clientHeight;
- } else {
- x = (this.event.clientX - this.left) / this.width;
- y = (this.event.clientY - this.top) / this.height;
- }
-
- x = Math.min(Math.max(x, 0), 1);
- y = Math.min(Math.max(y, 0), 1);
-
- let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2);
- let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2);
- let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
-
- return {
- tiltX: tiltX,
- tiltY: tiltY,
- percentageX: x * 100,
- percentageY: y * 100,
- angle: angle
- };
- }
-
- updateElementPosition() {
- let rect = this.element.getBoundingClientRect();
- this.width = this.element.offsetWidth;
- this.height = this.element.offsetHeight;
- this.left = rect.left;
- this.top = rect.top;
- }
-
- updateBorder(){
- this.element.style.border = '1px solid red'
- }
-
- update() {
- let values = this.getValues();
- this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
- "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
- "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
- "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
-
- if (this.glare) {
- this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
- this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`;
- }
-
- this.element.dispatchEvent(new CustomEvent("tiltChange", {
- "detail": values
- }));
-
- this.updateCall = null;
- }
-
- /**
- * Appends the glare element (if glarePrerender equals false)
- * and sets the default style
- */
- prepareGlare() {
- // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
- if (!this.glarePrerender) {
- // Create glare element
- const jsTiltGlare = document.createElement("div");
- jsTiltGlare.classList.add("js-tilt-glare");
-
- const jsTiltGlareInner = document.createElement("div");
- jsTiltGlareInner.classList.add("js-tilt-glare-inner");
-
- jsTiltGlare.appendChild(jsTiltGlareInner);
- this.element.appendChild(jsTiltGlare);
- }
-
- this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
- this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
-
- if (this.glarePrerender) {
- return;
- }
-
- Object.assign(this.glareElementWrapper.style, {
- "position": "absolute",
- "top": "0",
- "left": "0",
- "width": "100%",
- "height": "100%",
- "overflow": "hidden",
- "pointer-events": "none"
- });
-
- Object.assign(this.glareElement.style, {
- "position": "absolute",
- "top": "50%",
- "left": "50%",
- "pointer-events": "none",
- "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
- "width": `${this.element.offsetWidth * 2}px`,
- "height": `${this.element.offsetWidth * 2}px`,
- "transform": "rotate(180deg) translate(-50%, -50%)",
- "transform-origin": "0% 0%",
- "opacity": "0",
- });
- }
-
- updateGlareSize() {
- if (this.glare) {
- Object.assign(this.glareElement.style, {
- "width": `${this.element.offsetWidth * 2}`,
- "height": `${this.element.offsetWidth * 2}`,
- });
- }
- }
-
- updateClientSize() {
- this.clientWidth = window.innerWidth
- || document.documentElement.clientWidth
- || document.body.clientWidth;
-
- this.clientHeight = window.innerHeight
- || document.documentElement.clientHeight
- || document.body.clientHeight;
- }
-
- onWindowResize() {
- this.updateGlareSize();
- this.updateClientSize();
- }
-
- setTransition() {
- clearTimeout(this.transitionTimeout);
- this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
- if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;
-
- this.transitionTimeout = setTimeout(() => {
- this.element.style.transition = "";
- if (this.glare) {
- this.glareElement.style.transition = "";
- }
- }, this.settings.speed);
-
- }
-
-
- extendSettings(settings) {
- let defaultSettings = {
- reverse: false,
- max: 15,
- startX: 0,
- startY: 0,
- perspective: 1000,
- easing: "cubic-bezier(.03,.98,.52,.99)",
- scale: 1,
- speed: 300,
- transition: true,
- axis: null,
- glare: false,
- "max-glare": 1,
- "glare-prerender": false,
- "full-page-listening": false,
- "mouse-event-element": null,
- reset: true,
- gyroscope: true,
- gyroscopeMinAngleX: -45,
- gyroscopeMaxAngleX: 45,
- gyroscopeMinAngleY: -45,
- gyroscopeMaxAngleY: 45,
- gyroscopeSamples: 10
- };
-
- let newSettings = {};
- for (var property in defaultSettings) {
- if (property in settings) {
- newSettings[property] = settings[property];
- } else if (this.element.hasAttribute("data-tilt-" + property)) {
- let attribute = this.element.getAttribute("data-tilt-" + property);
- try {
- newSettings[property] = JSON.parse(attribute);
- } catch (e) {
- newSettings[property] = attribute;
- }
-
- } else {
- newSettings[property] = defaultSettings[property];
- }
- }
-
- return newSettings;
- }
-
- static init(element, settings) {
- element.mouseTilt = new MouseTilt(element, settings);
- }
- }
+ constructor(element, settings = {}) {
+ this.width = null;
+ this.height = null;
+ this.clientWidth = null;
+ this.clientHeight = null;
+ this.left = null;
+ this.top = null;
+
+ // for Gyroscope sampling
+ this.gammazero = null;
+ this.betazero = null;
+ this.lastgammazero = null;
+ this.lastbetazero = null;
+
+ this.transitionTimeout = null;
+ this.updateCall = null;
+ this.event = null;
+
+ this.updateBind = this.update.bind(this);
+ this.resetBind = this.reset.bind(this);
+
+ this.element = element;
+ this.destroys = false;
+ this.settings = this.extendSettings(settings);
+
+ this.reverse = this.settings.reverse ? -1 : 1;
+ this.glare = MouseTilt.isSettingTrue(this.settings.glare);
+ this.glarePrerender = MouseTilt.isSettingTrue(this.settings["glare-prerender"]);
+ this.fullPageListening = MouseTilt.isSettingTrue(this.settings["full-page-listening"]);
+ this.gyroscope = MouseTilt.isSettingTrue(this.settings.gyroscope);
+ this.gyroscopeSamples = this.settings.gyroscopeSamples;
+
+ this.elementListener = this.getElementListener();
+ this.wrapWithParent();
+ if (this.glare) {
+ this.prepareGlare();
+ }
+
+ if (this.fullPageListening) {
+ this.updateClientSize();
+ }
+
+ this.addEventListeners();
+ this.updateInitialPosition();
+ }
+
+ static isSettingTrue(setting) {
+ return setting === "" || setting === true || setting === 1;
+ }
+
+ /**
+ * Method returns element what will be listen mouse events
+ * @return {Node}
+ */
+ getElementListener() {
+ return this.element;
+ }
+
+ /**
+ * Method set listen methods for this.elementListener
+ * @return {Node}
+ */
+ addEventListeners() {
+ this.onMouseEnterBind = this.onMouseEnter.bind(this);
+ this.onMouseMoveBind = this.onMouseMove.bind(this);
+ this.onMouseLeaveBind = this.onMouseLeave.bind(this);
+ this.onWindowResizeBind = this.onWindowResize.bind(this);
+ this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
+
+ this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
+ this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
+ this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
+
+ if (this.glare || this.fullPageListening) {
+ window.addEventListener("resize", this.onWindowResizeBind);
+ }
+
+ if (this.gyroscope) {
+ window.addEventListener("deviceorientation", this.onDeviceOrientationBind);
+ }
+ }
+
+ /**
+ * Method remove event listeners from current this.elementListener
+ */
+ removeEventListeners() {
+ this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
+ this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
+ this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
+
+ if (this.gyroscope) {
+ window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
+ }
+
+ if (this.glare || this.fullPageListening) {
+ window.removeEventListener("resize", this.onWindowResizeBind);
+ }
+ }
+
+ destroy() {
+ clearTimeout(this.transitionTimeout);
+ if (this.updateCall !== null) {
+ cancelAnimationFrame(this.updateCall);
+ }
+ this.reset();
+ this.destroys = true;
+ this.unWrapParent(this.element);
+ this.removeEventListeners();
+ if (typeof this.element.mouseTilt !== "undefined") {
+ this.element.mouseTilt = null;
+ delete this.element.mouseTilt;
+ }
+
+ this.element = null;
+ }
+
+ onDeviceOrientation(event) {
+ if (event.gamma === null || event.beta === null) {
+ return;
+ }
+
+ this.updateElementPosition();
+
+ if (this.gyroscopeSamples > 0) {
+ this.lastgammazero = this.gammazero;
+ this.lastbetazero = this.betazero;
+
+ if (this.gammazero === null) {
+ this.gammazero = event.gamma;
+ this.betazero = event.beta;
+ } else {
+ this.gammazero = (event.gamma + this.lastgammazero) / 2;
+ this.betazero = (event.beta + this.lastbetazero) / 2;
+ }
+
+ this.gyroscopeSamples -= 1;
+ }
+
+ const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
+ const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
+
+ const degreesPerPixelX = totalAngleX / this.width;
+ const degreesPerPixelY = totalAngleY / this.height;
+
+ const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
+ const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
+
+ const posX = angleX / degreesPerPixelX;
+ const posY = angleY / degreesPerPixelY;
+
+ if (this.updateCall !== null) {
+ cancelAnimationFrame(this.updateCall);
+ }
+
+ this.event = {
+ clientX: posX + this.left,
+ clientY: posY + this.top,
+ };
+
+ this.updateCall = requestAnimationFrame(this.updateBind);
+ }
+
+ /**
+ * Wrap with extra div when initiate or mouse enter to the element
+ */
+ wrapWithParent() {
+ if (
+ typeof this.element.parentElement !== "undefined" &&
+ this.element.parentElement !== null &&
+ this.element.parentElement.className === "qubley-interaction-wrapper"
+ ) {
+ this.element = this.element.parentElement;
+ }
+ if (
+ this.element.className === "qubley-interaction-wrapper" ||
+ this.element.parentElement.className === "qubley-interaction-wrapper"
+ ) {
+ return;
+ }
+ const newDom = document.createElement("div");
+ newDom.setAttribute("class", "qubley-interaction-wrapper");
+ this.element.parentNode.insertBefore(newDom, this.element);
+ newDom.appendChild(this.element);
+ this.element = newDom;
+ }
+
+ /**
+ * Unwrap the extra div when destroy or need to remove other time
+ */
+ unWrapParent(element) {
+ if (element.parentNode !== null && element.parentElement.className === "qubley-interaction-wrapper") {
+ element = element.parentElement;
+ }
+ if (element.className !== "qubley-interaction-wrapper" || element.parentNode === null) {
+ return;
+ }
+ const elem = element.childNodes;
+ if (elem.length > 0) {
+ const newElement = element.parentNode.insertBefore(elem[0], element);
+ element.parentElement.removeChild(element);
+ this.element = newElement;
+ }
+ }
+ onMouseEnter() {
+ this.wrapWithParent();
+ this.updateElementPosition();
+ this.element.style.willChange = "transform";
+ this.setTransition();
+ }
+
+ onMouseMove(event) {
+ if (this.updateCall !== null) {
+ cancelAnimationFrame(this.updateCall);
+ }
+
+ this.event = event;
+ this.updateCall = requestAnimationFrame(this.updateBind);
+ }
+
+ onMouseLeave() {
+ this.setTransition();
+ if (this.settings.reset) {
+ requestAnimationFrame(this.resetBind);
+ }
+ }
+
+ reset() {
+ this.event = {
+ clientX: this.left + this.width / 2,
+ clientY: this.top + this.height / 2,
+ };
+
+ if (this.element !== null && this.element.parentElement !== null) {
+ if (this.element.parentElement.className === "qubley-interaction-wrapper") {
+ this.element = this.element.parentElement;
+ }
+ }
+
+ if (this.element.className !== "qubley-interaction-wrapper") {
+ return;
+ }
+ if (this.element && this.element.style) {
+ this.element.style.transform =
+ `perspective(${this.settings.perspective}px) ` +
+ `rotateX(0deg) ` +
+ `rotateY(0deg) ` +
+ `scale3d(1, 1, 1)`;
+ }
+
+ this.resetGlare();
+ }
+
+ resetGlare() {
+ if (this.glare) {
+ this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
+ this.glareElement.style.opacity = "0";
+ }
+ }
+
+ updateInitialPosition() {
+ if (this.settings.startX === 0 && this.settings.startY === 0) {
+ return;
+ }
+
+ this.onMouseEnter();
+ if (this.fullPageListening) {
+ this.event = {
+ clientX: ((this.settings.startX + this.settings.max) / (2 * this.settings.max)) * this.clientWidth,
+ clientY: ((this.settings.startY + this.settings.max) / (2 * this.settings.max)) * this.clientHeight,
+ };
+ } else {
+ this.event = {
+ clientX:
+ this.left + ((this.settings.startX + this.settings.max) / (2 * this.settings.max)) * this.width,
+ clientY:
+ this.top + ((this.settings.startY + this.settings.max) / (2 * this.settings.max)) * this.height,
+ };
+ }
+
+ let backupScale = this.settings.scale;
+ this.settings.scale = 1;
+ this.update();
+ this.settings.scale = backupScale;
+ this.resetGlare();
+ }
+
+ getValues() {
+ let x, y;
+
+ if (this.fullPageListening) {
+ x = this.event.clientX / this.clientWidth;
+ y = this.event.clientY / this.clientHeight;
+ } else {
+ x = (this.event.clientX - this.left) / this.width;
+ y = (this.event.clientY - this.top) / this.height;
+ }
+
+ x = Math.min(Math.max(x, 0), 1);
+ y = Math.min(Math.max(y, 0), 1);
+
+ let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2);
+ let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2);
+ let angle =
+ Math.atan2(
+ this.event.clientX - (this.left + this.width / 2),
+ -(this.event.clientY - (this.top + this.height / 2))
+ ) *
+ (180 / Math.PI);
+
+ return {
+ tiltX: tiltX,
+ tiltY: tiltY,
+ percentageX: x * 100,
+ percentageY: y * 100,
+ angle: angle,
+ };
+ }
+
+ updateElementPosition() {
+ let rect = this.element.getBoundingClientRect();
+ this.width = this.element.offsetWidth;
+ this.height = this.element.offsetHeight;
+ this.left = rect.left;
+ this.top = rect.top;
+ }
+
+ updateBorder() {
+ this.element.style.border = "1px solid red";
+ }
+
+ update() {
+ let values = this.getValues();
+ this.element.style.transform =
+ "perspective(" +
+ this.settings.perspective +
+ "px) " +
+ "rotateX(" +
+ (this.settings.axis === "x" ? 0 : values.tiltY) +
+ "deg) " +
+ "rotateY(" +
+ (this.settings.axis === "y" ? 0 : values.tiltX) +
+ "deg) " +
+ "scale3d(" +
+ this.settings.scale +
+ ", " +
+ this.settings.scale +
+ ", " +
+ this.settings.scale +
+ ")";
+
+ if (this.glare) {
+ this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
+ this.glareElement.style.opacity = `${(values.percentageY * this.settings["max-glare"]) / 100}`;
+ }
+
+ this.element.dispatchEvent(
+ new CustomEvent("tiltChange", {
+ detail: values,
+ })
+ );
+
+ this.updateCall = null;
+ }
+
+ /**
+ * Appends the glare element (if glarePrerender equals false)
+ * and sets the default style
+ */
+ prepareGlare() {
+ // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
+ if (!this.glarePrerender) {
+ // Create glare element
+ const jsTiltGlare = document.createElement("div");
+ jsTiltGlare.classList.add("js-tilt-glare");
+
+ const jsTiltGlareInner = document.createElement("div");
+ jsTiltGlareInner.classList.add("js-tilt-glare-inner");
+
+ jsTiltGlare.appendChild(jsTiltGlareInner);
+ this.element.appendChild(jsTiltGlare);
+ }
+
+ this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
+ this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
+
+ if (this.glarePrerender) {
+ return;
+ }
+
+ Object.assign(this.glareElementWrapper.style, {
+ position: "absolute",
+ top: "0",
+ left: "0",
+ width: "100%",
+ height: "100%",
+ overflow: "hidden",
+ "pointer-events": "none",
+ });
+
+ Object.assign(this.glareElement.style, {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ "pointer-events": "none",
+ "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
+ width: `${this.element.offsetWidth * 2}px`,
+ height: `${this.element.offsetWidth * 2}px`,
+ transform: "rotate(180deg) translate(-50%, -50%)",
+ "transform-origin": "0% 0%",
+ opacity: "0",
+ });
+ }
+
+ updateGlareSize() {
+ if (this.glare) {
+ Object.assign(this.glareElement.style, {
+ width: `${this.element.offsetWidth * 2}`,
+ height: `${this.element.offsetWidth * 2}`,
+ });
+ }
+ }
+
+ updateClientSize() {
+ this.clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+ this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+ }
+
+ onWindowResize() {
+ this.updateGlareSize();
+ this.updateClientSize();
+ }
+
+ setTransition() {
+ clearTimeout(this.transitionTimeout);
+ this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
+ if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;
+
+ this.transitionTimeout = setTimeout(() => {
+ this.element.style.transition = "";
+ if (this.glare) {
+ this.glareElement.style.transition = "";
+ }
+ }, this.settings.speed);
+ }
+
+ extendSettings(settings) {
+ let defaultSettings = {
+ reverse: false,
+ max: 15,
+ startX: 0,
+ startY: 0,
+ perspective: 1000,
+ easing: "cubic-bezier(.03,.98,.52,.99)",
+ scale: 1,
+ speed: 300,
+ transition: true,
+ axis: null,
+ glare: false,
+ "max-glare": 1,
+ "glare-prerender": false,
+ "full-page-listening": false,
+ "mouse-event-element": null,
+ reset: true,
+ gyroscope: true,
+ gyroscopeMinAngleX: -45,
+ gyroscopeMaxAngleX: 45,
+ gyroscopeMinAngleY: -45,
+ gyroscopeMaxAngleY: 45,
+ gyroscopeSamples: 10,
+ };
+
+ let newSettings = {};
+ for (var property in defaultSettings) {
+ if (property in settings) {
+ newSettings[property] = settings[property];
+ } else if (this.element.hasAttribute("data-tilt-" + property)) {
+ let attribute = this.element.getAttribute("data-tilt-" + property);
+ try {
+ newSettings[property] = JSON.parse(attribute);
+ } catch (e) {
+ newSettings[property] = attribute;
+ }
+ } else {
+ newSettings[property] = defaultSettings[property];
+ }
+ }
+
+ return newSettings;
+ }
+
+ static init(element, settings) {
+ element.mouseTilt = new MouseTilt(element, settings);
+ }
+}
/**
* Parser for get the ineraction css string for live preview
- * Init() for default animation
+ * Init() for default animation
* ScrollParser for custom animation (Scroll animation)
*/
-class InteractionParser {
- constructor(){
- this.element = null
- this.addonId = null
- }
-
- parseBeforeFixedWindowPosition(animation){
- let customAnimationProperty = {
- move: null,
- scale: null,
- skew: null,
- opacity: null,
- blur: null,
- rotate: null,
- }
-
- let IM = new InteractionMath(animation)
- IM.bindCustomAnimation()
- let iniTriggerActions = {
- move: {x:0, y:0, z:0},
- scale: {x:1, y:1, z:1},
- skew: {x:0, y:0},
- rotate: {x:0, y:0, z:0},
- opacity: 0,
- blur: 0
- }
- Object.keys(customAnimationProperty).forEach(function(key){
- customAnimationProperty[key] = IM.getCustomAnimationActionByName(key)
- if(customAnimationProperty[key] !== null && customAnimationProperty[key].length > 0 ){
- iniTriggerActions[key] = customAnimationProperty[key][0].property
- }
- })
-
- Object.keys(iniTriggerActions).forEach(function(key){
- if( typeof iniTriggerActions[key].x !== "undefined" ) {
- iniTriggerActions[key].x = iniTriggerActions[key].x === "" ? 0 : parseFloat(iniTriggerActions[key].x)
- }
- if( typeof iniTriggerActions[key].y !== "undefined" )
- iniTriggerActions[key].y = iniTriggerActions[key].y === "" ? 0 : parseFloat(iniTriggerActions[key].y)
- if( typeof iniTriggerActions[key].z !== "undefined" )
- iniTriggerActions[key].z = iniTriggerActions[key].z === "" ? 0 : parseFloat(iniTriggerActions[key].z)
- })
-
- return `{
+class InteractionParser {
+ constructor() {
+ this.element = null;
+ this.addonId = null;
+ }
+
+ parseBeforeFixedWindowPosition(animation) {
+ let customAnimationProperty = {
+ move: null,
+ scale: null,
+ skew: null,
+ opacity: null,
+ blur: null,
+ rotate: null,
+ };
+
+ let IM = new InteractionMath(animation);
+ IM.bindCustomAnimation();
+ let iniTriggerActions = {
+ move: { x: 0, y: 0, z: 0 },
+ scale: { x: 1, y: 1, z: 1 },
+ skew: { x: 0, y: 0 },
+ rotate: { x: 0, y: 0, z: 0 },
+ opacity: 0,
+ blur: 0,
+ };
+ Object.keys(customAnimationProperty).forEach(function (key) {
+ customAnimationProperty[key] = IM.getCustomAnimationActionByName(key);
+ if (customAnimationProperty[key] !== null && customAnimationProperty[key].length > 0) {
+ iniTriggerActions[key] = customAnimationProperty[key][0].property;
+ }
+ });
+
+ Object.keys(iniTriggerActions).forEach(function (key) {
+ if (typeof iniTriggerActions[key].x !== "undefined") {
+ iniTriggerActions[key].x = iniTriggerActions[key].x === "" ? 0 : parseFloat(iniTriggerActions[key].x);
+ }
+ if (typeof iniTriggerActions[key].y !== "undefined")
+ iniTriggerActions[key].y = iniTriggerActions[key].y === "" ? 0 : parseFloat(iniTriggerActions[key].y);
+ if (typeof iniTriggerActions[key].z !== "undefined")
+ iniTriggerActions[key].z = iniTriggerActions[key].z === "" ? 0 : parseFloat(iniTriggerActions[key].z);
+ });
+
+ return `{
'will-change': "transform";
'transform' : "translate3d(${iniTriggerActions.move.x}px, ${iniTriggerActions.move.y}px, ${iniTriggerActions.move.z}px)
scale3d(${iniTriggerActions.scale.x}, ${iniTriggerActions.scale.y}, ${iniTriggerActions.scale.z})
rotateX(${iniTriggerActions.rotate.x}deg) rotateY(${iniTriggerActions.rotate.y}deg) rotateZ(${iniTriggerActions.rotate.y}deg)
skew(${iniTriggerActions.skew.x}deg, ${iniTriggerActions.skew.y}deg)";
- }`
-
- }
-
- /**
- * Live scroll animation parser
- *
- */
- parseScrollAction(actions, scrollPercentage, origin){
- let animation = actions
- let IM = new InteractionMath(animation)
- IM.bindCustomAnimation()
- let nextTriggerActions = {
- move: {
- from: { x:0, y:0, z:0, keyframe:0, f: false },
- to: { x:0, y:0, z:0, keyframe:0, f: false },
- goal: { x:0, y:0, z:0, keyframe:0 }
- },
- scale: {
- from: { x:1, y:1, z:1, keyframe:0 },
- to: { x:1, y:1, z:1, keyframe:0 },
- goal: { x:1, y:1, z:1, keyframe:0 },
- },
- skew: {
- from: { x:0, y:0, keyframe:0 },
- to: { x:0, y:0, keyframe:0 },
- goal: { x:0, y:0, keyframe:0 },
- },
- rotate: {
- from: { x:0, y:0, z:0, keyframe:0 },
- to: { x:0, y:0, z:0, keyframe:0 },
- goal: { x:0, y:0, z:0, keyframe:0 },
- },
- opacity: {
- from: { value:0, keyframe:0 },
- to: { value:0, keyframe:0 },
- goal: { value:1, keyframe:0 },
- },
- blur: {
- from: { value:0, keyframe:0 },
- to: { value:0, keyframe:0 },
- goal: { value: 0, keyframe:0 },
- }
- }
- IM.actionProperty.map(key=> {
- let action = IM.getCustomAnimationActionByName(key, scrollPercentage) // Grater than current keyframe/scrollPercentage
-
- if( action.from !== null ) {
- Object.assign(nextTriggerActions[key].from, action.from.property)
- nextTriggerActions[key].from.f = true
- nextTriggerActions[key].from.keyframe = parseInt(action.from.keyframe)
-
- if( typeof nextTriggerActions[key].from.x !== "undefined" )
- nextTriggerActions[key].from.x = nextTriggerActions[key].from.x === "" ? 0 : parseFloat(nextTriggerActions[key].from.x)
- if( typeof nextTriggerActions[key].from.y !== "undefined" )
- nextTriggerActions[key].from.y = nextTriggerActions[key].from.y === "" ? 0 : parseFloat(nextTriggerActions[key].from.y)
- if( typeof nextTriggerActions[key].from.z !== "undefined" )
- nextTriggerActions[key].from.z = nextTriggerActions[key].from.z === "" ? 0 : parseFloat(nextTriggerActions[key].from.z)
- if( typeof nextTriggerActions[key].from.value !== "undefined" )
- nextTriggerActions[key].from.value = nextTriggerActions[key].from.value === "" ? 0 : parseFloat(nextTriggerActions[key].from.value)
- }
- if( action.to !== null ) {
- Object.assign(nextTriggerActions[key].to, action.to.property)
- if( typeof nextTriggerActions[key].to.x !== "undefined" ) {
- nextTriggerActions[key].to.x = nextTriggerActions[key].to.x === "" ? 0 : parseFloat(nextTriggerActions[key].to.x)
- nextTriggerActions[key].goal.x = nextTriggerActions[key].to.x
- }
- if( typeof nextTriggerActions[key].to.y !== "undefined" ) {
- nextTriggerActions[key].to.y = nextTriggerActions[key].to.y === "" ? 0 : parseFloat(nextTriggerActions[key].to.y)
- nextTriggerActions[key].goal.y = nextTriggerActions[key].to.y
- }
- if( typeof nextTriggerActions[key].to.z !== "undefined" ) {
- nextTriggerActions[key].to.z = nextTriggerActions[key].to.z === "" ? 0 : parseFloat(nextTriggerActions[key].to.z)
- nextTriggerActions[key].goal.z = nextTriggerActions[key].to.z
- }
- if( typeof nextTriggerActions[key].to.value !== "undefined" ) {
- nextTriggerActions[key].to.value = nextTriggerActions[key].to.value === "" ? 0 : parseFloat(nextTriggerActions[key].to.value)
- nextTriggerActions[key].goal.value = nextTriggerActions[key].to.value
- }
-
- nextTriggerActions[key].to.keyframe = parseInt(action.to.keyframe)
- nextTriggerActions[key].to.f = true
- }
-
- if( nextTriggerActions[key].to.f === true && nextTriggerActions[key].from.f === true && typeof action.fixed === 'undefined'){
- if( key === 'opacity' || key === 'blur' ){
- nextTriggerActions[key] = IM.getOpacity(key,nextTriggerActions[key], scrollPercentage)
- }else if( key === 'skew'){
- nextTriggerActions[key] = IM.getSkew(key,nextTriggerActions[key], scrollPercentage)
- }else{
- nextTriggerActions[key] = IM.getMoveTransform(key,nextTriggerActions[key], scrollPercentage)
- }
- }
- })
-
- return {
- 'willChange':'opacity, transform, filter',
- '-webkit-transition-timing-function':'linear',
- "transitionProperty": "transform, opacity, filter",
- "transformStyle":"preserve-3d",
- "transformOrigin":`${origin.x_offset} ${origin.y_offset}`,
- 'opacity': `${nextTriggerActions.opacity.goal.value}`,
- 'filter': `blur(${nextTriggerActions.blur.goal.value}px)`,
- '-webkit-filter:': `blur(${nextTriggerActions.blur.goal.value}px)`,
- 'transform':`perspective(1000px) translate3d(${nextTriggerActions.move.goal.x}px, ${nextTriggerActions.move.goal.y}px, ${nextTriggerActions.move.goal.z}px)
+ }`;
+ }
+
+ /**
+ * Live scroll animation parser
+ *
+ */
+ parseScrollAction(actions, scrollPercentage, origin) {
+ let animation = actions;
+ let IM = new InteractionMath(animation);
+ IM.bindCustomAnimation();
+ let nextTriggerActions = {
+ move: {
+ from: { x: 0, y: 0, z: 0, keyframe: 0, f: false },
+ to: { x: 0, y: 0, z: 0, keyframe: 0, f: false },
+ goal: { x: 0, y: 0, z: 0, keyframe: 0 },
+ },
+ scale: {
+ from: { x: 1, y: 1, z: 1, keyframe: 0 },
+ to: { x: 1, y: 1, z: 1, keyframe: 0 },
+ goal: { x: 1, y: 1, z: 1, keyframe: 0 },
+ },
+ skew: {
+ from: { x: 0, y: 0, keyframe: 0 },
+ to: { x: 0, y: 0, keyframe: 0 },
+ goal: { x: 0, y: 0, keyframe: 0 },
+ },
+ rotate: {
+ from: { x: 0, y: 0, z: 0, keyframe: 0 },
+ to: { x: 0, y: 0, z: 0, keyframe: 0 },
+ goal: { x: 0, y: 0, z: 0, keyframe: 0 },
+ },
+ opacity: {
+ from: { value: 0, keyframe: 0 },
+ to: { value: 0, keyframe: 0 },
+ goal: { value: 1, keyframe: 0 },
+ },
+ blur: {
+ from: { value: 0, keyframe: 0 },
+ to: { value: 0, keyframe: 0 },
+ goal: { value: 0, keyframe: 0 },
+ },
+ };
+ IM.actionProperty.map((key) => {
+ let action = IM.getCustomAnimationActionByName(key, scrollPercentage); // Grater than current keyframe/scrollPercentage
+
+ if (action.from !== null) {
+ Object.assign(nextTriggerActions[key].from, action.from.property);
+ nextTriggerActions[key].from.f = true;
+ nextTriggerActions[key].from.keyframe = parseInt(action.from.keyframe);
+
+ if (typeof nextTriggerActions[key].from.x !== "undefined")
+ nextTriggerActions[key].from.x =
+ nextTriggerActions[key].from.x === "" ? 0 : parseFloat(nextTriggerActions[key].from.x);
+ if (typeof nextTriggerActions[key].from.y !== "undefined")
+ nextTriggerActions[key].from.y =
+ nextTriggerActions[key].from.y === "" ? 0 : parseFloat(nextTriggerActions[key].from.y);
+ if (typeof nextTriggerActions[key].from.z !== "undefined")
+ nextTriggerActions[key].from.z =
+ nextTriggerActions[key].from.z === "" ? 0 : parseFloat(nextTriggerActions[key].from.z);
+ if (typeof nextTriggerActions[key].from.value !== "undefined")
+ nextTriggerActions[key].from.value =
+ nextTriggerActions[key].from.value === "" ? 0 : parseFloat(nextTriggerActions[key].from.value);
+ }
+ if (action.to !== null) {
+ Object.assign(nextTriggerActions[key].to, action.to.property);
+ if (typeof nextTriggerActions[key].to.x !== "undefined") {
+ nextTriggerActions[key].to.x =
+ nextTriggerActions[key].to.x === "" ? 0 : parseFloat(nextTriggerActions[key].to.x);
+ nextTriggerActions[key].goal.x = nextTriggerActions[key].to.x;
+ }
+ if (typeof nextTriggerActions[key].to.y !== "undefined") {
+ nextTriggerActions[key].to.y =
+ nextTriggerActions[key].to.y === "" ? 0 : parseFloat(nextTriggerActions[key].to.y);
+ nextTriggerActions[key].goal.y = nextTriggerActions[key].to.y;
+ }
+ if (typeof nextTriggerActions[key].to.z !== "undefined") {
+ nextTriggerActions[key].to.z =
+ nextTriggerActions[key].to.z === "" ? 0 : parseFloat(nextTriggerActions[key].to.z);
+ nextTriggerActions[key].goal.z = nextTriggerActions[key].to.z;
+ }
+ if (typeof nextTriggerActions[key].to.value !== "undefined") {
+ nextTriggerActions[key].to.value =
+ nextTriggerActions[key].to.value === "" ? 0 : parseFloat(nextTriggerActions[key].to.value);
+ nextTriggerActions[key].goal.value = nextTriggerActions[key].to.value;
+ }
+
+ nextTriggerActions[key].to.keyframe = parseInt(action.to.keyframe);
+ nextTriggerActions[key].to.f = true;
+ }
+
+ if (
+ nextTriggerActions[key].to.f === true &&
+ nextTriggerActions[key].from.f === true &&
+ typeof action.fixed === "undefined"
+ ) {
+ if (key === "opacity" || key === "blur") {
+ nextTriggerActions[key] = IM.getOpacity(key, nextTriggerActions[key], scrollPercentage);
+ } else if (key === "skew") {
+ nextTriggerActions[key] = IM.getSkew(key, nextTriggerActions[key], scrollPercentage);
+ } else {
+ nextTriggerActions[key] = IM.getMoveTransform(key, nextTriggerActions[key], scrollPercentage);
+ }
+ }
+ });
+
+ return {
+ willChange: "opacity, transform, filter",
+ "-webkit-transition-timing-function": "linear",
+ transitionProperty: "transform, opacity, filter",
+ transformStyle: "preserve-3d",
+ transformOrigin: `${origin.x_offset} ${origin.y_offset}`,
+ opacity: `${nextTriggerActions.opacity.goal.value}`,
+ filter: `blur(${nextTriggerActions.blur.goal.value}px)`,
+ "-webkit-filter:": `blur(${nextTriggerActions.blur.goal.value}px)`,
+ transform: `perspective(1000px) translate3d(${nextTriggerActions.move.goal.x}px, ${nextTriggerActions.move.goal.y}px, ${nextTriggerActions.move.goal.z}px)
scale3d(${nextTriggerActions.scale.goal.x}, ${nextTriggerActions.scale.goal.y}, ${nextTriggerActions.scale.goal.z})
rotateX(${nextTriggerActions.rotate.goal.x}deg) rotateY(${nextTriggerActions.rotate.goal.y}deg) rotateZ(${nextTriggerActions.rotate.goal.z}deg)
- skew(${nextTriggerActions.skew.goal.x}deg, ${nextTriggerActions.skew.goal.y}deg)`
- }
- }
+ skew(${nextTriggerActions.skew.goal.x}deg, ${nextTriggerActions.skew.goal.y}deg)`,
+ };
+ }
}
-const IntParser = new InteractionParser()
-export {IntParser, InteractionMath, MouseTilt}
\ No newline at end of file
+const IntParser = new InteractionParser();
+export { IntParser, InteractionMath, MouseTilt };
diff --git a/assets/reactjs/src/components/InteractionFields/RenderFields.js b/assets/reactjs/src/components/InteractionFields/RenderFields.js
index c82eff9c..4bc3c1cd 100644
--- a/assets/reactjs/src/components/InteractionFields/RenderFields.js
+++ b/assets/reactjs/src/components/InteractionFields/RenderFields.js
@@ -1,35 +1,51 @@
const { __ } = wp.i18n;
const { Component } = wp.element;
-import Range from '../fields/Range';
+import Range from "../fields/Range";
export default class RenderFields extends Component {
- _onChangeProperties( key, value, parent='' ){
- let { fields } = this.props
- let newFields = ''
- if(parent === '' ) {
- newFields = Object.assign({}, fields, { [key]: value })
- }else{
- let parentProps = Object.assign({}, fields[parent], { [key]: parseFloat(value)} )
- newFields = Object.assign({}, fields, { [parent] : {...parentProps} })
- }
- this.props.onChange( newFields )
- }
- render(){
- let { fields: { property, range, keyframe, title} } = this.props
- return(
-
-
- this._onChangeProperties( 'keyframe', value )} min={0} max={100}/>
-
-
Action : { title }
-
- { Object.keys( property ).map( (key, index) => {
- return this._onChangeProperties( key, value, 'property' )} min={range.min} max={range.max} step={range.step}/>
- })}
-
-
-
-
- )
- }
-}
\ No newline at end of file
+ _onChangeProperties(key, value, parent = "") {
+ let { fields } = this.props;
+ let newFields = "";
+ if (parent === "") {
+ newFields = Object.assign({}, fields, { [key]: value });
+ } else {
+ let parentProps = Object.assign({}, fields[parent], { [key]: parseFloat(value) });
+ newFields = Object.assign({}, fields, { [parent]: { ...parentProps } });
+ }
+ this.props.onChange(newFields);
+ }
+ render() {
+ let {
+ fields: { property, range, keyframe, title },
+ } = this.props;
+ return (
+
+
+ this._onChangeProperties("keyframe", value)}
+ min={0}
+ max={100}
+ />
+
+
Action : {title}
+
+ {Object.keys(property).map((key, index) => {
+ return (
+ this._onChangeProperties(key, value, "property")}
+ min={range.min}
+ max={range.max}
+ step={range.step}
+ />
+ );
+ })}
+
+
+ );
+ }
+}
diff --git a/assets/reactjs/src/components/InteractionFields/Timeline.js b/assets/reactjs/src/components/InteractionFields/Timeline.js
index b6aa88f9..f7e6cb0d 100644
--- a/assets/reactjs/src/components/InteractionFields/Timeline.js
+++ b/assets/reactjs/src/components/InteractionFields/Timeline.js
@@ -1,556 +1,610 @@
-
-import { IntParser } from './InteractionParser'
-import RenderFields from './RenderFields';
-import { interactionActions } from './InteractionData';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-const { __ } = wp.i18n
-const { Component } = wp.element
+import { IntParser } from "./InteractionParser";
+import RenderFields from "./RenderFields";
+import { interactionActions } from "./InteractionData";
+import isShallowEqual from "@wordpress/is-shallow-equal";
+const { __ } = wp.i18n;
+const { Component } = wp.element;
class Timeline extends Component {
-
- constructor(props) {
- super()
- this.state = {
- isActionList: false,
- timeline: false,
- initialAction: [
- { id:'', name: '', keyframe:0, timing_func:'', property:null },
- { id:'', name: '', keyframe:100, timing_func:'', property:null },
- ],
- selectedActionIndex: null,
- coPosition:{x: 0, y: 0 },
- contextAxis: { x:0, y:0 },
- timeLineCoPosition:{
- linePosition: 0,
- percentage: 0,
- id: null,
- isVisible: false,
- index: null
- },
- contextMenuVisible: null,
- isHoverAction: false,
- showTimelineActionList: false,
-
- enableAnimationNameField: false,
- currentAction: null,
- // Live scroll percetage
- scrollPercent: 0,
- timelineHeight:0,
- addOnId: null,
- keyframeCounter:{},
-
- actionListDargIndex: null,
- actionListOverKeyframe: null,
- selectedDargAction: null,
- maskPosition: 0
- }
- }
-
- componentDidMount() {
- document.addEventListener('mousedown', this.handleClickOutside.bind(this));
- const editorView = document.getElementsByClassName('edit-post-layout__content')
- if( editorView.length > 0 ){
- editorView[0].addEventListener('scroll', this.handleScroll.bind(this), true);
- }
- this.renderAnimationActionList();
- }
- componentWillUnmount() {
- const editorView = document.getElementsByClassName('edit-post-layout__content')
- document.removeEventListener('mousedown', this.handleClickOutside.bind(this));
- if( editorView.length > 0 ){
- editorView[0].removeEventListener('scroll', this.handleScroll.bind(this), false);
- }
- }
-
- componentDidUpdate(prevProps, prevState){
- if(
- !isShallowEqual(prevProps.actionList, this.props.actionList) ||
- prevState.selectedActionIndex !== this.state.selectedActionIndex ||
- prevState.contextMenuVisible !== this.state.contextMenuVisible ||
- prevState.actionListOverKeyframe !== this.state.actionListOverKeyframe
- ){
- this.renderAnimationActionList();
- }
- }
-
- handleScroll(event){
- if(typeof this.timelineWrapper === 'undefined' || this.timelineWrapper === null){
- return false
- }
- let element = document.getElementsByClassName(`qubely-block-${this.props.uniqueId}`)
- if( element.length > 0 ){
- element = element[0].parentElement
- let percentage = this.percentageSeen(element)
- let timelineHeight = this.timelineWrapper.getBoundingClientRect().height
- if(percentage > -1 && percentage <= 100 ){
- this.setState({ scrollPercent: percentage, timelineHeight })
- }
- }
- }
-
- percentageSeen (element ) {
- let elementRect = element.getBoundingClientRect();
- let viewportHeight = document.body.offsetHeight,
- scrollTop = window.pageYOffset,
- elementOffsetTop = elementRect.top,
- elementHeight = elementRect.height;
- if (elementOffsetTop > (scrollTop + viewportHeight)) {
- return -1;
- } else if ((elementOffsetTop + elementHeight) < scrollTop) {
- return 101;
- } else {
- var distance = (scrollTop + viewportHeight) - elementOffsetTop;
- var percentage = distance / ((viewportHeight + elementHeight) / 100);
- return percentage > 100 ? 100 : percentage;
- }
- }
-
- handleClickOutside(event){
- if (this.itemWrapper &&
- !this.itemWrapper.contains(event.target) &&
- this.state.contextMenuVisible !== null
- ) {
- if( typeof this.contextMenuRoot !== 'undefined' && !this.contextMenuRoot.contains(event.target) ) {
- this.setState({contextMenuVisible: null})
- }
- }
- if(this.actionListWrapper && !this.actionListWrapper.contains(event.target) && this.state.isActionList){
- this.setState({isActionList: false})
- }
- }
-
- // List fo the actions
- showActionList(){
- this.setState({ isActionList: !this.state.isActionList })
- }
-
- revisedRandId() {
- let S4 =()=> {
- return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
- }
- return (S4()+S4()+S4()+S4()+S4());
- }
-
- onMouseMoveAction(keyStart, keyEnd, id, index , event){
- let trect = this.timelineWrapper.getBoundingClientRect()
- let rect = event.target.getBoundingClientRect()
- let yAxis = event.clientY - rect.top;
- let startFrom = parseInt(keyStart)-1
- let endTo = parseInt(keyEnd)+1
- let fullKeyFrame = (startFrom+endTo)-1
- let percentage = Math.floor((yAxis / rect.height) * startFrom)+endTo
- let yyAxis = event.clientY - trect.top;
- let position = Math.abs((yyAxis / trect.height) * 100)
-
- let isVisible = !((fullKeyFrame+1) === endTo)
- let timeLineCoPosition = {
- linePosition: position,
- percentage: percentage,
- id: id,
- isVisible,
- index: index
- }
- this.setState({ timeLineCoPosition, isHoverAction: true })
- }
-
- // Select action for update
- onSelectAction(index){
- let {actionList} = this.props
- let currentAction = actionList[index]
- this.setState({ selectedActionIndex: index, contextMenuVisible: null, currentAction, showTimelineActionList: false })
- this.props.selectAction(currentAction)
- }
-
- onContextMenu(index, event){
- event.preventDefault();
- let contextAxis = {x:event.clientX, y:event.clientY}
- this.setState({ contextMenuVisible : index, contextAxis, showTimelineActionList: false })
- }
- /*
- * Need set the position with mouse position
- */
- setContextMenuRoot(node){
- this.contextMenuRoot = node
- }
-
- _onDeleteItem(index){
- let {actionList} = this.props
- actionList.splice(index, 1)
- this.setState({ contextMenuVisible: null, selectedActionIndex: null })
- this.props.onChange( actionList )
- }
-
- _onDuplicateItem(index){
- let { actionList } = this.props
- let currentItem = JSON.parse(JSON.stringify(actionList[index]));
- let actionIndex = index+1
- currentItem.id = this.revisedRandId()
- actionList.splice(actionIndex, 0, currentItem)
- this.setState({
- currentAction: currentItem,
- contextMenuVisible: null,
- selectedActionIndex: actionIndex
- })
- this.props.onChange( actionList )
- }
-
- //Context menu
- contextMenu(index){
- const { contextAxis } = this.state
- let trect = this.timelineWrapper.getBoundingClientRect()
- let position = contextAxis.x - trect.left;
- position = trect.width < position + 120 ? Math.abs(position-120) : position
- const style = { left: position+'px'}
- return(
-
- )
- }
-
- onMouseDragStartOnActionList(index, event){
- let trect = this.timelineWrapper.getBoundingClientRect()
- let yyAxis = event.clientY - trect.top;
- let position = Math.abs((yyAxis / trect.height) * 100)
- this.timeCounter = 0
- this.onDragDelayTimer = setInterval(()=>{
- this.updateDragAction(position, index)
- this.timeCounter = this.timeCounter+1
- },100)
- }
-
- updateDragAction(position, index){
- if( this.timeCounter > 0 ){
- clearInterval( this.onDragDelayTimer )
- this.timeCounter = 0
- let {actionList} = this.props
- this.setState({ actionListDargIndex: index, selectedDargAction: actionList[index], maskPosition: position })
- }
- }
-
- onMouseOverOnActionList(keyframe, event){
- if( this.state.actionListDargIndex !== null ){
- this.setState({ actionListOverKeyframe: keyframe })
- }
- }
-
- onMouseOutOnActionList(event){
- if( this.state.actionListOverKeyframe !== null ){
- this.setState({ actionListOverKeyframe: null })
- }
- }
-
-
- onMouseDragEndOnActionList(event){
- let { actionListDargIndex, actionListOverKeyframe, timeLineCoPosition:{ percentage } } = this.state
- if( actionListDargIndex !== null ){
- if( actionListOverKeyframe !== null ){
- percentage = parseInt(actionListOverKeyframe)
- }
- const newActionList = JSON.parse(JSON.stringify(this.props.actionList));
- let newAction = Object.assign({}, newActionList[actionListDargIndex], { keyframe: percentage })
- newActionList[actionListDargIndex] = newAction
- this.setState({ actionListDargIndex: null, selectedDargAction: null, actionListOverKeyframe: null, selectedActionIndex: actionListDargIndex, currentAction: newAction })
- this.props.onChange( newActionList )
- }
- if(this.onDragDelayTimer){
- clearInterval(this.onDragDelayTimer)
- }
- }
-
- onMouseMoveOnTimeline(event){
- let { actionListDargIndex } = this.state
- if( actionListDargIndex === null )
- return;
- let trect = this.timelineWrapper.getBoundingClientRect()
- let yyAxis = event.clientY - trect.top;
- let position = Math.abs((yyAxis / trect.height) * 100)
- this.setState({ maskPosition: position })
- }
-
- // Created action lists
- actionItemHtml(action, index){
-
- let { selectedActionIndex, contextMenuVisible, currentAction } = this.state
-
- let activeClass = selectedActionIndex === index ? 'qubely-action-active' : ''
- activeClass = contextMenuVisible === index ? activeClass+' qubely-action-context-menu-active' : activeClass
- activeClass = action.id === '' ? activeClass+' qubely-action-empty-box' : activeClass
- let similarAction = (currentAction !== null && selectedActionIndex !== index && action.name === currentAction.name) ? 'qubely-action-similar' : ''
- return(
-
{this.itemWrapper = ref }}
- onMouseDown={this.onMouseDragStartOnActionList.bind(this, index)}
- >
-
-
-
-
-
{action.keyframe}%
-
-
- {action.name}
-
-
- {contextMenuVisible === index && this.contextMenu(index)}
-
- )
- }
-
- parentItemHtml(actions, ci){
- const mouseOverClass = actions.keyframe === this.state.actionListOverKeyframe ? 'qubley-action-mouse-on-item' : ''
- return (
-
- {actions.map(action=> {
- return this.actionItemHtml(action, action.index)
- })}
-
- )
- }
-
- actionBlankSpaceHtml(keyFrame, lastKeyframe, id, index){
- let style = {
- flexGrow: keyFrame/100
- }
- if(keyFrame === 0 )
- style.padding = 0
- return(
-
-
- )
- }
-
- renderAnimationActionList(){
- let { actionList } = this.props
- let htmlView = []
- let collection = {}
- let lastKeyframe = 0
- let checkSingleEntry = {}
-
- if(actionList.length > 0 ) {
- actionList.map((action, index) => {
- //Check if action not add second time
- if( typeof checkSingleEntry[action.name] === 'undefined' ){
- action.single = true
- checkSingleEntry[action.name] = action.keyframe
- }else{
- delete action.single
- }
-
- if(typeof collection[action.keyframe] !== "undefined") {
- action.index = index
- collection[action.keyframe].push(action)
- }else{
- action.index = index
- collection[action.keyframe] = [action]
- collection[action.keyframe].keyframe = action.keyframe
- collection[action.keyframe].index = index
- }
- })
-
- _.map(collection, (actions, ci)=> {
- let keyDiff = Math.abs(lastKeyframe - actions.keyframe)
- htmlView.push(this.actionBlankSpaceHtml(keyDiff, lastKeyframe, ci, actions.index))
- htmlView.push(this.parentItemHtml(actions,ci))
- lastKeyframe = actions.keyframe
- })
- if(lastKeyframe !== 100 ){
- let keyDiff = Math.abs(lastKeyframe - 100)
- htmlView.push(this.actionBlankSpaceHtml(keyDiff, lastKeyframe, this.revisedRandId(), actionList.length))
- }
- }else{
- this.state.initialAction.map(action=> {
- let keyframeDiff = Math.abs(lastKeyframe - action.keyframe)
- if (lastKeyframe !== action.keyframe) {
- htmlView.push(this.actionBlankSpaceHtml(keyframeDiff, lastKeyframe, this.revisedRandId(),0))
- htmlView.push(this.actionItemHtml(action, this.revisedRandId()))
- }else{
- htmlView.push(this.actionItemHtml(action, this.revisedRandId()))
- }
- lastKeyframe = action.keyframe
- })
- }
- this.setState({ renderHtmlActionlist: htmlView });
- }
-
- //Create timeline action
- createAction(action, rowIndex){
- let { actionList } = this.props
- let actionIndex = actionList.length
- let newAction = Object.assign({}, action, { id: this.revisedRandId(), keyframe: 0 })
-
- if( this.state.isActionList ){
- actionList.push(newAction)
- let lastAction = JSON.parse(JSON.stringify(newAction));
- lastAction.keyframe = 100
- lastAction.id = this.revisedRandId()
- actionList.push(lastAction)
- }else{
- if(rowIndex !== null ) {
- let { timeLineCoPosition:{ percentage }} = this.state
- actionIndex = rowIndex
- newAction.keyframe = percentage
- actionList.splice(rowIndex, 0, newAction)
- }else {
- actionList.splice(actionList.length - 1, 0, newAction)
- }
- }
- this.setState({
- currentAction: newAction,
- isActionList: false,
- selectedActionIndex: actionIndex,
- showTimelineActionList: false
- })
- this.props.onChange( actionList )
- }
-
- // Action List
- renderAnimationActions(rowIndex=null){
- return(
-
this.actionListWrapper = ref }>
-
- { interactionActions.map((action, index) =>
{action.name}
) }
-
-
- )
- }
-
- showAnimationAction(){
- this.setState({ showTimelineActionList: !this.state.showTimelineActionList})
- }
- enableEverything(){
- this.setState({showTimelineActionList: !this.state.showTimelineActionList})
- }
-
- _changeProperty(property){
- let { selectedActionIndex } = this.state
- let { actionList } = this.props
- const newActionList = JSON.parse(JSON.stringify(actionList));
- let newAction = Object.assign({}, newActionList[selectedActionIndex], { ...property })
- newActionList[selectedActionIndex] = newAction
- this.props.onChange( newActionList )
- this.setState({ currentAction: newAction })
- }
-
- /**
- * Render timeline view
- */
- timeline(){
- const { actionList, transformOrigin } = this.props
- let {
- selectedActionIndex,
- currentAction,
- timeLineCoPosition:{ linePosition , percentage, index, isVisible },
- showTimelineActionList,
- scrollPercent,
- timelineHeight,
- maskPosition,
- actionListDargIndex,
- selectedDargAction
- } = this.state
- let timelineEmptyClass = actionList.length > 0 ? "qubely-timeline-has-no-memory" : ''
- let pointerStyle = {top:`${linePosition}%`}
-
- const showPerc = (timelineHeight*(scrollPercent))/100
- const liveStyle = {top: showPerc+'px'}
- let maskStyle = {top:`${maskPosition}%`}
- if( actionList.length > 0 ){
- let cssProps = IntParser.parseScrollAction(actionList, this.state.scrollPercent, transformOrigin)
- $(`.qubely-block-${this.props.uniqueId}`).addClass('qubely-block-interaction').css(cssProps);
- }
- return (
-
-
-
- Scroll Action
- ﹢
- {this.state.isActionList && this.renderAnimationActions()}
-
-
-
{this.timelineWrapper = node}}
- onMouseMove={this.onMouseMoveOnTimeline.bind(this)}
- onMouseUp={this.onMouseDragEndOnActionList.bind(this)}
- onMouseLeave={this.onMouseDragEndOnActionList.bind(this)}
- >
-
this.timeLineBarWrapper = ref } />
-
- {/*
*/}
-
- {this.state.renderHtmlActionlist}
-
- { actionListDargIndex !== null &&
-
-
- {percentage}%
- {selectedDargAction.title}
-
-
- }
-
- {isVisible && actionList.length > 0 &&
-
-
- {percentage}%
-
-
+
-
- {showTimelineActionList && this.renderAnimationActions(index)}
-
- }
- {actionList.length === 0 &&
-
-
-
-
Animation
-
Apply various actions on one or multiple elements to create a sequenced animation.
- {/*
*/}
-
-
}
-
-
-
-
-
-
-
- {this.state.selectedActionIndex === null &&
-
-
-
No Action Selected
-
Select an action in the list to adjust the settings.
-
-
- }
- {
- this.state.selectedActionIndex !== null &&
-
this._changeProperty( value )}
- />
- }
-
-
-
- )
- }
- render(){ return this.timeline() }
+ constructor(props) {
+ super();
+ this.state = {
+ isActionList: false,
+ timeline: false,
+ initialAction: [
+ { id: "", name: "", keyframe: 0, timing_func: "", property: null },
+ { id: "", name: "", keyframe: 100, timing_func: "", property: null },
+ ],
+ selectedActionIndex: null,
+ coPosition: { x: 0, y: 0 },
+ contextAxis: { x: 0, y: 0 },
+ timeLineCoPosition: {
+ linePosition: 0,
+ percentage: 0,
+ id: null,
+ isVisible: false,
+ index: null,
+ },
+ contextMenuVisible: null,
+ isHoverAction: false,
+ showTimelineActionList: false,
+
+ enableAnimationNameField: false,
+ currentAction: null,
+ // Live scroll percetage
+ scrollPercent: 0,
+ timelineHeight: 0,
+ addOnId: null,
+ keyframeCounter: {},
+
+ actionListDargIndex: null,
+ actionListOverKeyframe: null,
+ selectedDargAction: null,
+ maskPosition: 0,
+ };
+ }
+
+ componentDidMount() {
+ document.addEventListener("mousedown", this.handleClickOutside.bind(this));
+ const editorView = document.getElementsByClassName("edit-post-layout__content");
+ if (editorView.length > 0) {
+ editorView[0].addEventListener("scroll", this.handleScroll.bind(this), true);
+ }
+ this.renderAnimationActionList();
+ }
+ componentWillUnmount() {
+ const editorView = document.getElementsByClassName("edit-post-layout__content");
+ document.removeEventListener("mousedown", this.handleClickOutside.bind(this));
+ if (editorView.length > 0) {
+ editorView[0].removeEventListener("scroll", this.handleScroll.bind(this), false);
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (
+ !isShallowEqual(prevProps.actionList, this.props.actionList) ||
+ prevState.selectedActionIndex !== this.state.selectedActionIndex ||
+ prevState.contextMenuVisible !== this.state.contextMenuVisible ||
+ prevState.actionListOverKeyframe !== this.state.actionListOverKeyframe
+ ) {
+ this.renderAnimationActionList();
+ }
+ }
+
+ handleScroll(event) {
+ if (typeof this.timelineWrapper === "undefined" || this.timelineWrapper === null) {
+ return false;
+ }
+ let element = document.getElementsByClassName(`qubely-block-${this.props.uniqueId}`);
+ if (element.length > 0) {
+ element = element[0].parentElement;
+ let percentage = this.percentageSeen(element);
+ let timelineHeight = this.timelineWrapper.getBoundingClientRect().height;
+ if (percentage > -1 && percentage <= 100) {
+ this.setState({ scrollPercent: percentage, timelineHeight });
+ }
+ }
+ }
+
+ percentageSeen(element) {
+ let elementRect = element.getBoundingClientRect();
+ let viewportHeight = document.body.offsetHeight,
+ scrollTop = window.pageYOffset,
+ elementOffsetTop = elementRect.top,
+ elementHeight = elementRect.height;
+ if (elementOffsetTop > scrollTop + viewportHeight) {
+ return -1;
+ } else if (elementOffsetTop + elementHeight < scrollTop) {
+ return 101;
+ } else {
+ var distance = scrollTop + viewportHeight - elementOffsetTop;
+ var percentage = distance / ((viewportHeight + elementHeight) / 100);
+ return percentage > 100 ? 100 : percentage;
+ }
+ }
+
+ handleClickOutside(event) {
+ if (this.itemWrapper && !this.itemWrapper.contains(event.target) && this.state.contextMenuVisible !== null) {
+ if (typeof this.contextMenuRoot !== "undefined" && !this.contextMenuRoot.contains(event.target)) {
+ this.setState({ contextMenuVisible: null });
+ }
+ }
+ if (this.actionListWrapper && !this.actionListWrapper.contains(event.target) && this.state.isActionList) {
+ this.setState({ isActionList: false });
+ }
+ }
+
+ // List fo the actions
+ showActionList() {
+ this.setState({ isActionList: !this.state.isActionList });
+ }
+
+ revisedRandId() {
+ let S4 = () => {
+ return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+ };
+ return S4() + S4() + S4() + S4() + S4();
+ }
+
+ onMouseMoveAction(keyStart, keyEnd, id, index, event) {
+ let trect = this.timelineWrapper.getBoundingClientRect();
+ let rect = event.target.getBoundingClientRect();
+ let yAxis = event.clientY - rect.top;
+ let startFrom = parseInt(keyStart) - 1;
+ let endTo = parseInt(keyEnd) + 1;
+ let fullKeyFrame = startFrom + endTo - 1;
+ let percentage = Math.floor((yAxis / rect.height) * startFrom) + endTo;
+ let yyAxis = event.clientY - trect.top;
+ let position = Math.abs((yyAxis / trect.height) * 100);
+
+ let isVisible = !(fullKeyFrame + 1 === endTo);
+ let timeLineCoPosition = {
+ linePosition: position,
+ percentage: percentage,
+ id: id,
+ isVisible,
+ index: index,
+ };
+ this.setState({ timeLineCoPosition, isHoverAction: true });
+ }
+
+ // Select action for update
+ onSelectAction(index) {
+ let { actionList } = this.props;
+ let currentAction = actionList[index];
+ this.setState({
+ selectedActionIndex: index,
+ contextMenuVisible: null,
+ currentAction,
+ showTimelineActionList: false,
+ });
+ this.props.selectAction(currentAction);
+ }
+
+ onContextMenu(index, event) {
+ event.preventDefault();
+ let contextAxis = { x: event.clientX, y: event.clientY };
+ this.setState({ contextMenuVisible: index, contextAxis, showTimelineActionList: false });
+ }
+ /*
+ * Need set the position with mouse position
+ */
+ setContextMenuRoot(node) {
+ this.contextMenuRoot = node;
+ }
+
+ _onDeleteItem(index) {
+ let { actionList } = this.props;
+ actionList.splice(index, 1);
+ this.setState({ contextMenuVisible: null, selectedActionIndex: null });
+ this.props.onChange(actionList);
+ }
+
+ _onDuplicateItem(index) {
+ let { actionList } = this.props;
+ let currentItem = JSON.parse(JSON.stringify(actionList[index]));
+ let actionIndex = index + 1;
+ currentItem.id = this.revisedRandId();
+ actionList.splice(actionIndex, 0, currentItem);
+ this.setState({
+ currentAction: currentItem,
+ contextMenuVisible: null,
+ selectedActionIndex: actionIndex,
+ });
+ this.props.onChange(actionList);
+ }
+
+ //Context menu
+ contextMenu(index) {
+ const { contextAxis } = this.state;
+ let trect = this.timelineWrapper.getBoundingClientRect();
+ let position = contextAxis.x - trect.left;
+ position = trect.width < position + 120 ? Math.abs(position - 120) : position;
+ const style = { left: position + "px" };
+ return (
+
+
+ {" "}
+
+
+ {" "}
+
+
+ );
+ }
+
+ onMouseDragStartOnActionList(index, event) {
+ let trect = this.timelineWrapper.getBoundingClientRect();
+ let yyAxis = event.clientY - trect.top;
+ let position = Math.abs((yyAxis / trect.height) * 100);
+ this.timeCounter = 0;
+ this.onDragDelayTimer = setInterval(() => {
+ this.updateDragAction(position, index);
+ this.timeCounter = this.timeCounter + 1;
+ }, 100);
+ }
+
+ updateDragAction(position, index) {
+ if (this.timeCounter > 0) {
+ clearInterval(this.onDragDelayTimer);
+ this.timeCounter = 0;
+ let { actionList } = this.props;
+ this.setState({
+ actionListDargIndex: index,
+ selectedDargAction: actionList[index],
+ maskPosition: position,
+ });
+ }
+ }
+
+ onMouseOverOnActionList(keyframe, event) {
+ if (this.state.actionListDargIndex !== null) {
+ this.setState({ actionListOverKeyframe: keyframe });
+ }
+ }
+
+ onMouseOutOnActionList(event) {
+ if (this.state.actionListOverKeyframe !== null) {
+ this.setState({ actionListOverKeyframe: null });
+ }
+ }
+
+ onMouseDragEndOnActionList(event) {
+ let {
+ actionListDargIndex,
+ actionListOverKeyframe,
+ timeLineCoPosition: { percentage },
+ } = this.state;
+ if (actionListDargIndex !== null) {
+ if (actionListOverKeyframe !== null) {
+ percentage = parseInt(actionListOverKeyframe);
+ }
+ const newActionList = JSON.parse(JSON.stringify(this.props.actionList));
+ let newAction = Object.assign({}, newActionList[actionListDargIndex], { keyframe: percentage });
+ newActionList[actionListDargIndex] = newAction;
+ this.setState({
+ actionListDargIndex: null,
+ selectedDargAction: null,
+ actionListOverKeyframe: null,
+ selectedActionIndex: actionListDargIndex,
+ currentAction: newAction,
+ });
+ this.props.onChange(newActionList);
+ }
+ if (this.onDragDelayTimer) {
+ clearInterval(this.onDragDelayTimer);
+ }
+ }
+
+ onMouseMoveOnTimeline(event) {
+ let { actionListDargIndex } = this.state;
+ if (actionListDargIndex === null) return;
+ let trect = this.timelineWrapper.getBoundingClientRect();
+ let yyAxis = event.clientY - trect.top;
+ let position = Math.abs((yyAxis / trect.height) * 100);
+ this.setState({ maskPosition: position });
+ }
+
+ // Created action lists
+ actionItemHtml(action, index) {
+ let { selectedActionIndex, contextMenuVisible, currentAction } = this.state;
+
+ let activeClass = selectedActionIndex === index ? "qubely-action-active" : "";
+ activeClass = contextMenuVisible === index ? activeClass + " qubely-action-context-menu-active" : activeClass;
+ activeClass = action.id === "" ? activeClass + " qubely-action-empty-box" : activeClass;
+ let similarAction =
+ currentAction !== null && selectedActionIndex !== index && action.name === currentAction.name
+ ? "qubely-action-similar"
+ : "";
+ return (
+
{
+ this.itemWrapper = ref;
+ }}
+ onMouseDown={this.onMouseDragStartOnActionList.bind(this, index)}
+ >
+
+
+
+
+
{action.keyframe}%
+
+
+ {action.name}
+
+
+ {contextMenuVisible === index && this.contextMenu(index)}
+
+ );
+ }
+
+ parentItemHtml(actions, ci) {
+ const mouseOverClass =
+ actions.keyframe === this.state.actionListOverKeyframe ? "qubley-action-mouse-on-item" : "";
+ return (
+
+ {actions.map((action) => {
+ return this.actionItemHtml(action, action.index);
+ })}
+
+ );
+ }
+
+ actionBlankSpaceHtml(keyFrame, lastKeyframe, id, index) {
+ let style = {
+ flexGrow: keyFrame / 100,
+ };
+ if (keyFrame === 0) style.padding = 0;
+ return (
+
+ );
+ }
+
+ renderAnimationActionList() {
+ let { actionList } = this.props;
+ let htmlView = [];
+ let collection = {};
+ let lastKeyframe = 0;
+ let checkSingleEntry = {};
+
+ if (actionList.length > 0) {
+ actionList.map((action, index) => {
+ //Check if action not add second time
+ if (typeof checkSingleEntry[action.name] === "undefined") {
+ action.single = true;
+ checkSingleEntry[action.name] = action.keyframe;
+ } else {
+ delete action.single;
+ }
+
+ if (typeof collection[action.keyframe] !== "undefined") {
+ action.index = index;
+ collection[action.keyframe].push(action);
+ } else {
+ action.index = index;
+ collection[action.keyframe] = [action];
+ collection[action.keyframe].keyframe = action.keyframe;
+ collection[action.keyframe].index = index;
+ }
+ });
+
+ _.map(collection, (actions, ci) => {
+ let keyDiff = Math.abs(lastKeyframe - actions.keyframe);
+ htmlView.push(this.actionBlankSpaceHtml(keyDiff, lastKeyframe, ci, actions.index));
+ htmlView.push(this.parentItemHtml(actions, ci));
+ lastKeyframe = actions.keyframe;
+ });
+ if (lastKeyframe !== 100) {
+ let keyDiff = Math.abs(lastKeyframe - 100);
+ htmlView.push(
+ this.actionBlankSpaceHtml(keyDiff, lastKeyframe, this.revisedRandId(), actionList.length)
+ );
+ }
+ } else {
+ this.state.initialAction.map((action) => {
+ let keyframeDiff = Math.abs(lastKeyframe - action.keyframe);
+ if (lastKeyframe !== action.keyframe) {
+ htmlView.push(this.actionBlankSpaceHtml(keyframeDiff, lastKeyframe, this.revisedRandId(), 0));
+ htmlView.push(this.actionItemHtml(action, this.revisedRandId()));
+ } else {
+ htmlView.push(this.actionItemHtml(action, this.revisedRandId()));
+ }
+ lastKeyframe = action.keyframe;
+ });
+ }
+ this.setState({ renderHtmlActionlist: htmlView });
+ }
+
+ //Create timeline action
+ createAction(action, rowIndex) {
+ let { actionList } = this.props;
+ let actionIndex = actionList.length;
+ let newAction = Object.assign({}, action, { id: this.revisedRandId(), keyframe: 0 });
+
+ if (this.state.isActionList) {
+ actionList.push(newAction);
+ let lastAction = JSON.parse(JSON.stringify(newAction));
+ lastAction.keyframe = 100;
+ lastAction.id = this.revisedRandId();
+ actionList.push(lastAction);
+ } else {
+ if (rowIndex !== null) {
+ let {
+ timeLineCoPosition: { percentage },
+ } = this.state;
+ actionIndex = rowIndex;
+ newAction.keyframe = percentage;
+ actionList.splice(rowIndex, 0, newAction);
+ } else {
+ actionList.splice(actionList.length - 1, 0, newAction);
+ }
+ }
+ this.setState({
+ currentAction: newAction,
+ isActionList: false,
+ selectedActionIndex: actionIndex,
+ showTimelineActionList: false,
+ });
+ this.props.onChange(actionList);
+ }
+
+ // Action List
+ renderAnimationActions(rowIndex = null) {
+ return (
+
(this.actionListWrapper = ref)}>
+
+ {interactionActions.map((action, index) => (
+
+ {action.name}
+
+ ))}
+
+
+ );
+ }
+
+ showAnimationAction() {
+ this.setState({ showTimelineActionList: !this.state.showTimelineActionList });
+ }
+ enableEverything() {
+ this.setState({ showTimelineActionList: !this.state.showTimelineActionList });
+ }
+
+ _changeProperty(property) {
+ let { selectedActionIndex } = this.state;
+ let { actionList } = this.props;
+ const newActionList = JSON.parse(JSON.stringify(actionList));
+ let newAction = Object.assign({}, newActionList[selectedActionIndex], { ...property });
+ newActionList[selectedActionIndex] = newAction;
+ this.props.onChange(newActionList);
+ this.setState({ currentAction: newAction });
+ }
+
+ /**
+ * Render timeline view
+ */
+ timeline() {
+ const { actionList, transformOrigin } = this.props;
+ let {
+ selectedActionIndex,
+ currentAction,
+ timeLineCoPosition: { linePosition, percentage, index, isVisible },
+ showTimelineActionList,
+ scrollPercent,
+ timelineHeight,
+ maskPosition,
+ actionListDargIndex,
+ selectedDargAction,
+ } = this.state;
+ let timelineEmptyClass = actionList.length > 0 ? "qubely-timeline-has-no-memory" : "";
+ let pointerStyle = { top: `${linePosition}%` };
+
+ const showPerc = (timelineHeight * scrollPercent) / 100;
+ const liveStyle = { top: showPerc + "px" };
+ let maskStyle = { top: `${maskPosition}%` };
+ if (actionList.length > 0) {
+ let cssProps = IntParser.parseScrollAction(actionList, this.state.scrollPercent, transformOrigin);
+ $(`.qubely-block-${this.props.uniqueId}`).addClass("qubely-block-interaction").css(cssProps);
+ }
+ return (
+
+
+
+ Scroll Action
+
+ ﹢
+
+ {this.state.isActionList && this.renderAnimationActions()}
+
+
+
{
+ this.timelineWrapper = node;
+ }}
+ onMouseMove={this.onMouseMoveOnTimeline.bind(this)}
+ onMouseUp={this.onMouseDragEndOnActionList.bind(this)}
+ onMouseLeave={this.onMouseDragEndOnActionList.bind(this)}
+ >
+
(this.timeLineBarWrapper = ref)}
+ />
+
+ {/*
*/}
+
+ {this.state.renderHtmlActionlist}
+
+ {actionListDargIndex !== null && (
+
+
+ {percentage}%
+ {selectedDargAction.title}
+
+
+ )}
+
+ {isVisible && actionList.length > 0 && (
+
+
+ {percentage}%
+
+
+ +
+
+
+ {showTimelineActionList && this.renderAnimationActions(index)}
+
+ )}
+ {actionList.length === 0 && (
+
+
+
+
Animation
+
+ {" "}
+ Apply various actions on one or multiple elements to create a sequenced
+ animation.{" "}
+
+ {/*
*/}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {this.state.selectedActionIndex === null && (
+
+
+
No Action Selected
+
Select an action in the list to adjust the settings.
+
+
+ )}
+ {this.state.selectedActionIndex !== null && (
+
this._changeProperty(value)} />
+ )}
+
+
+
+ );
+ }
+ render() {
+ return this.timeline();
+ }
}
-
-export default Timeline;
\ No newline at end of file
+export default Timeline;
diff --git a/assets/reactjs/src/components/css/InnerPanel.scss b/assets/reactjs/src/components/css/InnerPanel.scss
index 9926c217..f3610282 100644
--- a/assets/reactjs/src/components/css/InnerPanel.scss
+++ b/assets/reactjs/src/components/css/InnerPanel.scss
@@ -1,26 +1,26 @@
.qubely-field {
- &.qubely-field-inner-panel {
- border: 1px solid #e2e4e7;
- margin: -1px 0 0 0;
- .qubely-field-inner-panel-title {
- background: #f8f9f9;
- padding: 12px 10px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
- &:hover {
- background: #f0f1f1;
- }
- }
-
- .qubely-field-inner-panel-body {
- border-top: 1px solid #e2e4e7;
- padding: 10px 16px;
- }
- }
-}
\ No newline at end of file
+ &.qubely-field-inner-panel {
+ border: 1px solid #e2e4e7;
+ margin: -1px 0 0 0;
+ .qubely-field-inner-panel-title {
+ background: #f8f9f9;
+ padding: 12px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ &:hover {
+ background: #f0f1f1;
+ }
+ }
+
+ .qubely-field-inner-panel-body {
+ border-top: 1px solid #e2e4e7;
+ padding: 10px 16px;
+ }
+ }
+}
diff --git a/assets/reactjs/src/components/css/alignment.scss b/assets/reactjs/src/components/css/alignment.scss
index e1125a06..1b487e16 100644
--- a/assets/reactjs/src/components/css/alignment.scss
+++ b/assets/reactjs/src/components/css/alignment.scss
@@ -1,10 +1,10 @@
.qubely-field-button-list {
- &.qubely-field-button-list-fluid {
- display: flex;
- justify-content: space-between;
- .qubely-button {
- width: 100%;
- justify-content: center;
- }
- }
+ &.qubely-field-button-list-fluid {
+ display: flex;
+ justify-content: space-between;
+ .qubely-button {
+ width: 100%;
+ justify-content: center;
+ }
+ }
}
diff --git a/assets/reactjs/src/components/css/animation.scss b/assets/reactjs/src/components/css/animation.scss
index 9a803a0a..ff12ad93 100644
--- a/assets/reactjs/src/components/css/animation.scss
+++ b/assets/reactjs/src/components/css/animation.scss
@@ -1,3 +1,3 @@
-.qubely-animation-popup{
- padding: 15px;
-}
\ No newline at end of file
+.qubely-animation-popup {
+ padding: 15px;
+}
diff --git a/assets/reactjs/src/components/css/border.scss b/assets/reactjs/src/components/css/border.scss
index 41ac49f9..c444fca9 100644
--- a/assets/reactjs/src/components/css/border.scss
+++ b/assets/reactjs/src/components/css/border.scss
@@ -1,58 +1,58 @@
.qubely-field-border-type {
- width: 16px;
- display: block;
- height: 0;
- &.qubely-field-border-type-solid {
- border-top: 3px solid #8D96A0;
- }
- &.qubely-field-border-type-dotted {
- border-top: 3px dotted #8D96A0;
- }
- &.qubely-field-border-type-dashed {
- border-top: 3px dashed #8D96A0;
- }
- &.qubely-field-border-type-double {
- border-top: 6px double #8D96A0;
- }
+ width: 16px;
+ display: block;
+ height: 0;
+ &.qubely-field-border-type-solid {
+ border-top: 3px solid #8d96a0;
+ }
+ &.qubely-field-border-type-dotted {
+ border-top: 3px dotted #8d96a0;
+ }
+ &.qubely-field-border-type-dashed {
+ border-top: 3px dashed #8d96a0;
+ }
+ &.qubely-field-border-type-double {
+ border-top: 6px double #8d96a0;
+ }
}
.active {
- .qubely-field-border-type {
- &.qubely-field-border-type-solid {
- border-top-color: #2184F9;
- }
- &.qubely-field-border-type-dotted {
- border-top-color: #2184F9;
- }
- &.qubely-field-border-type-dashed {
- border-top-color: #2184F9;
- }
- &.qubely-field-border-type-double {
- border-top-color: #2184F9;
- }
- }
+ .qubely-field-border-type {
+ &.qubely-field-border-type-solid {
+ border-top-color: #2184f9;
+ }
+ &.qubely-field-border-type-dotted {
+ border-top-color: #2184f9;
+ }
+ &.qubely-field-border-type-dashed {
+ border-top-color: #2184f9;
+ }
+ &.qubely-field-border-type-double {
+ border-top-color: #2184f9;
+ }
+ }
}
.qubely-svg-fill {
- fill: #8D96A0;
+ fill: #8d96a0;
}
.qubely-svg-stroke {
- stroke: #8D96A0;
+ stroke: #8d96a0;
}
.active {
- .qubely-svg-fill {
- fill: #2184F9;
- }
- .qubely-svg-stroke {
- stroke: #2184F9;
- }
+ .qubely-svg-fill {
+ fill: #2184f9;
+ }
+ .qubely-svg-stroke {
+ stroke: #2184f9;
+ }
}
.qubely-border-clear {
- font-size: 12px;
- color: #8D96A0;
- &:hover {
- color: #2184F9;
- }
-}
\ No newline at end of file
+ font-size: 12px;
+ color: #8d96a0;
+ &:hover {
+ color: #2184f9;
+ }
+}
diff --git a/assets/reactjs/src/components/css/buttonGroup.scss b/assets/reactjs/src/components/css/buttonGroup.scss
index 3a9d5df1..7ed5dad7 100644
--- a/assets/reactjs/src/components/css/buttonGroup.scss
+++ b/assets/reactjs/src/components/css/buttonGroup.scss
@@ -1,48 +1,48 @@
.qubely-field-group-btn {
- align-items: center;
- label {
- margin-bottom: 0;
- }
- .qubely-field-child {
- display: flex;
- justify-content: end;
- align-items: center;
- .qubley-group-button {
- display: inline-block;
- white-space: nowrap;
- padding: 0px 9px;
- color: #8d96a0;
- font-size: 12px;
- border-top: 1px solid #d6d9dd;
- border-bottom: 1px solid #d6d9dd;
- border-left: 1px solid #d6d9dd;
- text-transform: capitalize;
- cursor: pointer;
- box-shadow: none;
- line-height: 26px;
- height: 26px;
- &.extra-padding {
- padding: 0px 10px;
- font-weight: bold;
- font-size: 15px;
- }
- &:last-child {
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px;
- border-right: 1px solid #d6d9dd;
- }
- &:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- &.qubley-active-group-btn {
- color: #2184f9;
- background: #d2e7ff;
- border-color: #a9d0ff;
- & + .qubley-group-button{
- border-left-color: #a9d0ff;
- }
- }
- }
- }
+ align-items: center;
+ label {
+ margin-bottom: 0;
+ }
+ .qubely-field-child {
+ display: flex;
+ justify-content: end;
+ align-items: center;
+ .qubley-group-button {
+ display: inline-block;
+ white-space: nowrap;
+ padding: 0px 9px;
+ color: #8d96a0;
+ font-size: 12px;
+ border-top: 1px solid #d6d9dd;
+ border-bottom: 1px solid #d6d9dd;
+ border-left: 1px solid #d6d9dd;
+ text-transform: capitalize;
+ cursor: pointer;
+ box-shadow: none;
+ line-height: 26px;
+ height: 26px;
+ &.extra-padding {
+ padding: 0px 10px;
+ font-weight: bold;
+ font-size: 15px;
+ }
+ &:last-child {
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px;
+ border-right: 1px solid #d6d9dd;
+ }
+ &:first-child {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ }
+ &.qubley-active-group-btn {
+ color: #2184f9;
+ background: #d2e7ff;
+ border-color: #a9d0ff;
+ & + .qubley-group-button {
+ border-left-color: #a9d0ff;
+ }
+ }
+ }
+ }
}
diff --git a/assets/reactjs/src/components/css/color.scss b/assets/reactjs/src/components/css/color.scss
index a30869fc..a584f74f 100644
--- a/assets/reactjs/src/components/css/color.scss
+++ b/assets/reactjs/src/components/css/color.scss
@@ -1,172 +1,176 @@
.qubely-field-color.qubely-field {
- display: flex;
- &.qubley-half {
- display: inline-flex;
- width: 50%;
- align-items: center;
+ display: flex;
+ &.qubley-half {
+ display: inline-flex;
+ width: 50%;
+ align-items: center;
- &.qubley-half-first {
- padding-right: 7.5px;
- }
+ &.qubley-half-first {
+ padding-right: 7.5px;
+ }
- &.qubley-half-last {
- padding-left: 7.5px;
- }
- }
+ &.qubley-half-last {
+ padding-left: 7.5px;
+ }
+ }
- .qubely-field-child {
- .qubely-panel {
- height: 32px;
- width: 32px;
- border-radius: 0 3px 3px 0;
- display: inline-block;
- vertical-align: middle;
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
- transition: 300ms;
- cursor: pointer;
- &.qubely-color-preview {
- width: 100%;
- height: 60px;
- border-radius: 3px;
- &:hover {
- transform: none;
- }
- }
- &:hover {
- transform: scale(1.1);
- }
- .qubely-gradient {
- padding: 15px;
- }
- }
- }
+ .qubely-field-child {
+ .qubely-panel {
+ height: 32px;
+ width: 32px;
+ border-radius: 0 3px 3px 0;
+ display: inline-block;
+ vertical-align: middle;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+ transition: 300ms;
+ cursor: pointer;
+ &.qubely-color-preview {
+ width: 100%;
+ height: 60px;
+ border-radius: 3px;
+ &:hover {
+ transform: none;
+ }
+ }
+ &:hover {
+ transform: scale(1.1);
+ }
+ .qubely-gradient {
+ padding: 15px;
+ }
+ }
+ }
- &.qubely-has-preview {
- display: block;
- > label {
- width: 100%;
- }
- .qubely-field-child {
- width: 100%;
- }
- }
+ &.qubely-has-preview {
+ display: block;
+ > label {
+ width: 100%;
+ }
+ .qubely-field-child {
+ width: 100%;
+ }
+ }
- &.qubely-no-preview {
- .qubely-field-child {
- flex-grow: 1;
- width: 32px;
- }
- > label {
- flex-grow: 1;
- width: calc(100% - 32px);
- margin: 0;
- height: 32px;
- line-height: 32px;
- padding-left: 10px;
- border: 1px solid #e4e4e4;
- border-radius: 3px 0 0 3px;
- }
- }
+ &.qubely-no-preview {
+ .qubely-field-child {
+ flex-grow: 1;
+ width: 32px;
+ }
+ > label {
+ flex-grow: 1;
+ width: calc(100% - 32px);
+ margin: 0;
+ height: 32px;
+ line-height: 32px;
+ padding-left: 10px;
+ border: 1px solid #e4e4e4;
+ border-radius: 3px 0 0 3px;
+ }
+ }
}
.qubely-rgba-palette {
- padding: 0px 0px 15px 15px;
- margin-top: -10px;
- &::after {
- content: "";
- display: block;
- clear: both;
- }
- button {
- position: relative;
- font-size: 0;
- height: 28px;
- width: 28px;
- padding: 0;
- margin-right: 10px;
- margin-top: 10px;
- border: none;
- border-radius: 50%;
- float: left;
- cursor: pointer;
- transition: 300ms;
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 17px;
- background: transparent;
- &.active {
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 4px;
- }
- &:hover,
- &:focus {
- transform: scale(1.1);
- }
+ padding: 0px 0px 15px 15px;
+ margin-top: -10px;
+ &::after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+ button {
+ position: relative;
+ font-size: 0;
+ height: 28px;
+ width: 28px;
+ padding: 0;
+ margin-right: 10px;
+ margin-top: 10px;
+ border: none;
+ border-radius: 50%;
+ float: left;
+ cursor: pointer;
+ transition: 300ms;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 17px;
+ background: transparent;
+ &.active {
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 4px;
+ }
+ &:hover,
+ &:focus {
+ transform: scale(1.1);
+ }
- &.clear {
- box-shadow: none;
- &::before {
- content: "\f05e";
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- font-style: normal;
- font-variant: normal;
- text-rendering: auto;
- line-height: 1;
- font-family: "Font Awesome 5 Free";
- font-weight: 900;
- font-size: 28px;
- color: red;
- left: 0;
- top: 0;
- position: absolute;
- }
- }
- }
- > div {
- display: inline-block;
- button {
- overflow: hidden;
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
- &::before {
- content: "";
- filter: blur(6px) saturate(0.7) brightness(1.1);
- display: block;
- width: 200%;
- height: 200%;
- position: absolute;
- top: -50%;
- left: -50%;
- padding-top: 100%;
- transform: scale(1);
- background-image: linear-gradient(330deg, transparent 50%, #ff8100 0),
- linear-gradient(300deg, transparent 50%, #ff5800 0), linear-gradient(270deg, transparent 50%, #c92323 0),
- linear-gradient(240deg, transparent 50%, #cc42a2 0), linear-gradient(210deg, transparent 50%, #9f49ac 0),
- linear-gradient(180deg, transparent 50%, #306cd3 0), linear-gradient(150deg, transparent 50%, #179067 0),
- linear-gradient(120deg, transparent 50%, #0eb5d6 0), linear-gradient(90deg, transparent 50%, #50b517 0),
- linear-gradient(60deg, transparent 50%, #ede604 0), linear-gradient(30deg, transparent 50%, #fc0 0),
- linear-gradient(0deg, transparent 50%, #feac00 0);
- background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box,
- padding-box, padding-box, padding-box, padding-box, padding-box;
- }
- }
- }
+ &.clear {
+ box-shadow: none;
+ &::before {
+ content: "\f05e";
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ line-height: 1;
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-size: 28px;
+ color: red;
+ left: 0;
+ top: 0;
+ position: absolute;
+ }
+ }
+ }
+ > div {
+ display: inline-block;
+ button {
+ overflow: hidden;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+ &::before {
+ content: "";
+ filter: blur(6px) saturate(0.7) brightness(1.1);
+ display: block;
+ width: 200%;
+ height: 200%;
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ padding-top: 100%;
+ transform: scale(1);
+ background-image: linear-gradient(330deg, transparent 50%, #ff8100 0),
+ linear-gradient(300deg, transparent 50%, #ff5800 0),
+ linear-gradient(270deg, transparent 50%, #c92323 0),
+ linear-gradient(240deg, transparent 50%, #cc42a2 0),
+ linear-gradient(210deg, transparent 50%, #9f49ac 0),
+ linear-gradient(180deg, transparent 50%, #306cd3 0),
+ linear-gradient(150deg, transparent 50%, #179067 0),
+ linear-gradient(120deg, transparent 50%, #0eb5d6 0),
+ linear-gradient(90deg, transparent 50%, #50b517 0),
+ linear-gradient(60deg, transparent 50%, #ede604 0), linear-gradient(30deg, transparent 50%, #fc0 0),
+ linear-gradient(0deg, transparent 50%, #feac00 0);
+ background-clip: content-box, content-box, content-box, content-box, content-box, content-box,
+ padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
+ }
+ }
+ }
}
// Color Picker
.qubely-color-picker-container,
.qubely-color-picker {
- width: 30px;
- height: 30px;
- display: block;
- border-radius: 50px;
- cursor: pointer;
- border: 1px solid rgba(0, 0, 0, 0.2);
- outline: none;
+ width: 30px;
+ height: 30px;
+ display: block;
+ border-radius: 50px;
+ cursor: pointer;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ outline: none;
}
.qubely-color-picker-container {
- width: 32px;
- height: 32px;
- background-image: linear-gradient(45deg, #ddd 25%, transparent 0), linear-gradient(-45deg, #ddd 25%, transparent 0),
- linear-gradient(45deg, transparent 75%, #ddd 0), linear-gradient(-45deg, transparent 75%, #ddd 0);
- background-size: 10px 10px;
- background-position: 0 0, 0 5px, 5px -5px, -5px 0;
- border: 1px solid #e9e9e9;
+ width: 32px;
+ height: 32px;
+ background-image: linear-gradient(45deg, #ddd 25%, transparent 0), linear-gradient(-45deg, #ddd 25%, transparent 0),
+ linear-gradient(45deg, transparent 75%, #ddd 0), linear-gradient(-45deg, transparent 75%, #ddd 0);
+ background-size: 10px 10px;
+ background-position: 0 0, 0 5px, 5px -5px, -5px 0;
+ border: 1px solid #e9e9e9;
}
diff --git a/assets/reactjs/src/components/css/contextmenu.scss b/assets/reactjs/src/components/css/contextmenu.scss
index 39bea859..2ba669ce 100644
--- a/assets/reactjs/src/components/css/contextmenu.scss
+++ b/assets/reactjs/src/components/css/contextmenu.scss
@@ -1,107 +1,108 @@
-.qubely-context-menu{
- font-size: 12px;
- line-height: 1.5;
- color: #6d7882;
- font-family: Roboto,Arial,Helvetica,Verdana,sans-serif;
- font-weight: 400;
- text-transform: none;
- overflow: hidden;
- min-width: 200px !important;
- background-color: #fff;
- border: 1px solid #e6e9ec;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.09);
- box-shadow: 0 2px 10px 0 rgba(0,0,0,.09);
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- z-index: 3;
- padding: 5px 0px 5px 0px;
+.qubely-context-menu {
+ font-size: 12px;
+ line-height: 1.5;
+ color: #6d7882;
+ font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
+ font-weight: 400;
+ text-transform: none;
+ overflow: hidden;
+ min-width: 200px !important;
+ background-color: #fff;
+ border: 1px solid #e6e9ec;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.09);
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.09);
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 3;
+ padding: 5px 0px 5px 0px;
- .qubely-context-menu-group{
- padding: 5px 0px 5px 0px;
+ .qubely-context-menu-group {
+ padding: 5px 0px 5px 0px;
- .qubely-context-menu-item{
- padding: 5px 20px 5px 10px;
- display: flex;
- cursor: pointer;
- .qubely-context-menu-item-icon{
- width: 20px;
- color: #c2cbd2;
- }
+ .qubely-context-menu-item {
+ padding: 5px 20px 5px 10px;
+ display: flex;
+ cursor: pointer;
+ .qubely-context-menu-item-icon {
+ width: 20px;
+ color: #c2cbd2;
+ }
- .qubely-context-menu-item-title{
- -webkit-box-flex: 1;
- -webkit-flex-grow: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
- white-space: nowrap;
- overflow: hidden;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- }
- .qubely-context-menu-item-shortcut{
- color: #d5dadf;
- }
- }
- .disable-true{
- cursor: default;
- pointer-events: none;
- opacity: 0.9;
- }
- .qubely-context-menu-item:hover{
- color: #fff;
- .qubely-context-menu-item-icon,.qubely-context-menu-item-shortcut{
- color: #fff
- }
- }
- }
- .qubely-context-menu-group:not(:last-child) {
- border-bottom: 1px solid #e6e9ec;
- }
+ .qubely-context-menu-item-title {
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ }
+ .qubely-context-menu-item-shortcut {
+ color: #d5dadf;
+ }
+ }
+ .disable-true {
+ cursor: default;
+ pointer-events: none;
+ opacity: 0.9;
+ }
+ .qubely-context-menu-item:hover {
+ color: #fff;
+ .qubely-context-menu-item-icon,
+ .qubely-context-menu-item-shortcut {
+ color: #fff;
+ }
+ }
+ }
+ .qubely-context-menu-group:not(:last-child) {
+ border-bottom: 1px solid #e6e9ec;
+ }
}
- .qubely-context-menu-item.with-border-bottom {
- border-bottom: 1px solid #e6e9ec;
- }
- .qubely-context-menu-item:hover{
- background-color: #71d7f7;
- cursor: pointer;
- }
- .disable-true{
- color: #d5dadf;
- }
+.qubely-context-menu-item.with-border-bottom {
+ border-bottom: 1px solid #e6e9ec;
+}
+.qubely-context-menu-item:hover {
+ background-color: #71d7f7;
+ cursor: pointer;
+}
+.disable-true {
+ color: #d5dadf;
+}
.qubely-context-menu-wraper {
-display: none;
-position: fixed;
-background: white;
-z-index: 100;
+ display: none;
+ position: fixed;
+ background: white;
+ z-index: 100;
-&--option {
- padding: 6px 50px 5px 10px;
- min-width: 160px;
- cursor: default;
- font-size: 12px;
- &:hover {
- background: linear-gradient(to top, #555, #333);
- color: white;
- }
-
- &:active {
- color: #e9e9e9;
- background: linear-gradient(to top, #555, #444);
- }
-
- &__disabled {
- color: #999999;
- pointer-events: none;
- }
-}
+ &--option {
+ padding: 6px 50px 5px 10px;
+ min-width: 160px;
+ cursor: default;
+ font-size: 12px;
+ &:hover {
+ background: linear-gradient(to top, #555, #333);
+ color: white;
+ }
+
+ &:active {
+ color: #e9e9e9;
+ background: linear-gradient(to top, #555, #444);
+ }
+
+ &__disabled {
+ color: #999999;
+ pointer-events: none;
+ }
+ }
}
-div.is-selected[data-type*="qubely/"]{
- z-index: 1;
-}
\ No newline at end of file
+div.is-selected[data-type*="qubely/"] {
+ z-index: 1;
+}
diff --git a/assets/reactjs/src/components/css/dimension.scss b/assets/reactjs/src/components/css/dimension.scss
index 9fbc366b..61f34030 100644
--- a/assets/reactjs/src/components/css/dimension.scss
+++ b/assets/reactjs/src/components/css/dimension.scss
@@ -1,32 +1,32 @@
-.qubely-field-dimension{
- .qubely-dimension-input-group {
- overflow: hidden;
- > span{
- float: left;
- width: 20%;
- input{
- text-align: center;
- max-width: 100%;
- border: 1px solid #E5E7EA !important;
- }
- &:not(:last-child) input{
- border-radius: 0;
- border-right: 0 !important;
- }
- input + span{
- display: block;
- font-size: 10px;
- text-transform: capitalize;
- text-align: center;
- }
- &:first-child input{
- border-radius: 4px 0 0 4px;
- }
- }
- > button{
- width: 20%;
- justify-content: center;
- border-radius: 0 4px 4px 0;
- }
- }
-}
\ No newline at end of file
+.qubely-field-dimension {
+ .qubely-dimension-input-group {
+ overflow: hidden;
+ > span {
+ float: left;
+ width: 20%;
+ input {
+ text-align: center;
+ max-width: 100%;
+ border: 1px solid #e5e7ea !important;
+ }
+ &:not(:last-child) input {
+ border-radius: 0;
+ border-right: 0 !important;
+ }
+ input + span {
+ display: block;
+ font-size: 10px;
+ text-transform: capitalize;
+ text-align: center;
+ }
+ &:first-child input {
+ border-radius: 4px 0 0 4px;
+ }
+ }
+ > button {
+ width: 20%;
+ justify-content: center;
+ border-radius: 0 4px 4px 0;
+ }
+ }
+}
diff --git a/assets/reactjs/src/components/css/dragdimension.scss b/assets/reactjs/src/components/css/dragdimension.scss
index c56cac8b..5151a90a 100644
--- a/assets/reactjs/src/components/css/dragdimension.scss
+++ b/assets/reactjs/src/components/css/dragdimension.scss
@@ -1,249 +1,237 @@
-.qubely-drag-dimension-wrap{
- display: flex;
- justify-content: center;
- margin: 0 -14px;
- padding: 20px;
+.qubely-drag-dimension-wrap {
+ display: flex;
+ justify-content: center;
+ margin: 0 -14px;
+ padding: 20px;
}
/* padding */
-.qubely-dimension-padding{
- position: relative;
- height: 60px;
- width: 110px;
- background: white;
+.qubely-dimension-padding {
+ position: relative;
+ height: 60px;
+ width: 110px;
+ background: white;
}
.qubely-dimension-padding::before {
- content: attr(data-text);
- position: absolute;
- left: 50%;
- top: 50%;
- font-size: 12px;
- transform: translate(-50%, -50%);
- color: rgba(83, 95, 106, 0.57);
- text-transform: capitalize;
-}
-
-
-.qubely-dimension-padding > .dimension-item > span{
- content: '';
- display: inline-block;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
+ content: attr(data-text);
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ font-size: 12px;
+ transform: translate(-50%, -50%);
+ color: rgba(83, 95, 106, 0.57);
+ text-transform: capitalize;
+}
+
+.qubely-dimension-padding > .dimension-item > span {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
}
/* margin */
-.qubely-dimension-margin-wrap{
- padding: 40px 0;
- display: inline-flex;
- position: relative;
- width: 210px;
- align-items: center;
- justify-content: center;
+.qubely-dimension-margin-wrap {
+ padding: 40px 0;
+ display: inline-flex;
+ position: relative;
+ width: 210px;
+ align-items: center;
+ justify-content: center;
}
.qubely-dimension-margin::after {
- content: attr(data-text);
- position: absolute;
- top: 0;
- line-height: 20px;
- font-size: 12px;
- left: 25px;
- color: rgba(83, 95, 106, 0.57);
- text-transform: capitalize;
- pointer-events: none;
+ content: attr(data-text);
+ position: absolute;
+ top: 0;
+ line-height: 20px;
+ font-size: 12px;
+ left: 25px;
+ color: rgba(83, 95, 106, 0.57);
+ text-transform: capitalize;
+ pointer-events: none;
}
-.qubely-drag-margin-top.qubely-dimension-margin::after{
- color: #fff;
+.qubely-drag-margin-top.qubely-dimension-margin::after {
+ color: #fff;
}
-
-.qubely-dimension-margin > .dimension-item > span{
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
+.qubely-dimension-margin > .dimension-item > span {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
}
-
/* left-right */
-
.qubely-dimension-padding > .padding-right > span,
.qubely-dimension-padding > .padding-left > span,
.qubely-dimension-margin > .margin-right > span,
-.qubely-dimension-margin > .margin-left > span{
- width: 20px;
- clip-path: polygon(0 4px, 100% 22px, 100% calc(100% - 22px), -4px 100%);
- cursor: w-resize;
- background-repeat: no-repeat;
- background-position: center center;
- background-image: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ADB3BF'%3E%3Cpath d='M6.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M3.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3C/g%3E%3C/svg%3E");
+.qubely-dimension-margin > .margin-left > span {
+ width: 20px;
+ clip-path: polygon(0 4px, 100% 22px, 100% calc(100% - 22px), -4px 100%);
+ cursor: w-resize;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ADB3BF'%3E%3Cpath d='M6.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M3.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3C/g%3E%3C/svg%3E");
}
.qubely-dimension-padding > .padding-right > span,
-.qubely-dimension-margin > .margin-right > span{
- left: auto;
- right: 0;
- cursor: e-resize;
- clip-path: polygon(0 22px, 100% 4px, 100% calc(100% - 4px), 0 calc(100% - 22px));
+.qubely-dimension-margin > .margin-right > span {
+ left: auto;
+ right: 0;
+ cursor: e-resize;
+ clip-path: polygon(0 22px, 100% 4px, 100% calc(100% - 4px), 0 calc(100% - 22px));
}
-
/*top-bottom*/
-
.qubely-dimension-padding > .padding-top > span,
.qubely-dimension-padding > .padding-bottom > span,
.qubely-dimension-margin > .margin-top > span,
-.qubely-dimension-margin > .margin-bottom > span{
- height: 20px;
- cursor: n-resize;
- clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
- background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ADB3BF'%3E%3Cpath d='M.5 1c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3Cpath d='M.5 4c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3Cpath d='M.5 7c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3C/g%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: center center;
+.qubely-dimension-margin > .margin-bottom > span {
+ height: 20px;
+ cursor: n-resize;
+ clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
+ background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ADB3BF'%3E%3Cpath d='M.5 1c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3Cpath d='M.5 4c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3Cpath d='M.5 7c0-.274.098-.499.219-.499h13.562c.12 0 .219.225.219.499s-.099.499-.219.499h-13.562c-.121 0-.219-.225-.219-.499'/%3E%3C/g%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: center center;
}
.qubely-dimension-padding > .padding-bottom > span,
-.qubely-dimension-margin > .margin-bottom > span{
- top: auto;
- bottom: 0;
- cursor: s-resize;
- clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 100%, 0 100%)
+.qubely-dimension-margin > .margin-bottom > span {
+ top: auto;
+ bottom: 0;
+ cursor: s-resize;
+ clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
}
-
/*background*/
-
.qubely-dimension-padding > .dimension-item > span,
-.qubely-dimension-margin > .dimension-item > span{
- background-color: #DFE1E4;
+.qubely-dimension-margin > .dimension-item > span {
+ background-color: #dfe1e4;
}
.qubely-drag-margin-top .dimension-item.margin-top > span,
.qubely-drag-margin-left .dimension-item.margin-left > span,
.qubely-drag-margin-right .dimension-item.margin-right > span,
-.qubely-drag-margin-bottom .dimension-item.margin-bottom > span{
- background-color: #0286BA ;
+.qubely-drag-margin-bottom .dimension-item.margin-bottom > span {
+ background-color: #0286ba;
}
.qubely-drag-padding-top .dimension-item.padding-top > span,
.qubely-drag-padding-left .dimension-item.padding-left > span,
.qubely-drag-padding-right .dimension-item.padding-right > span,
-.qubely-drag-padding-bottom .dimension-item.padding-bottom > span{
- background-color: #0286BA ;
+.qubely-drag-padding-bottom .dimension-item.padding-bottom > span {
+ background-color: #0286ba;
}
-
.qubely-drag-padding-right .dimension-item.padding-right > span,
.qubely-drag-padding-left .dimension-item.padding-left > span,
.qubely-drag-margin-right .dimension-item.margin-right > span,
-.qubely-drag-margin-left .dimension-item.margin-left > span{
- background-image: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M6.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M3.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3C/g%3E%3C/svg%3E");
+.qubely-drag-margin-left .dimension-item.margin-left > span {
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M6.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M3.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3Cpath d='M.663.837c.274 0 .499.098.499.219v13.562c0 .12-.225.219-.499.219s-.499-.099-.499-.219v-13.562c0-.121.225-.219.499-.219'/%3E%3C/g%3E%3C/svg%3E");
}
-
.qubely-drag-padding-top .dimension-item.padding-top > span,
.qubely-drag-padding-bottom .dimension-item.padding-bottom > span,
.qubely-drag-margin-top .dimension-item.margin-top > span,
-.qubely-drag-margin-bottom .dimension-item.margin-bottom > span{
- background-image: url("data:image/svg+xml,%3Csvg width='16' height='8' viewBox='0 0 16 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M.913 1.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3Cpath d='M.913 4.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3Cpath d='M.913 7.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3C/g%3E%3C/svg%3E");
+.qubely-drag-margin-bottom .dimension-item.margin-bottom > span {
+ background-image: url("data:image/svg+xml,%3Csvg width='16' height='8' viewBox='0 0 16 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M.913 1.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3Cpath d='M.913 4.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3Cpath d='M.913 7.114c0-.274.1-.499.223-.499h13.805c.122 0 .223.225.223.499s-.1.499-.223.499h-13.805c-.123 0-.223-.225-.223-.499'/%3E%3C/g%3E%3C/svg%3E");
}
/*item value*/
.qubley-drag-dimension-popover {
- padding: 5px;
+ padding: 5px;
}
.dimension-item > input {
- position: absolute;
- line-height: 20px;
- font-size: 12px;
- color: #535F6A;
- background: transparent;
- padding: 0;
- border: none;
- width: 26px !important;
-}
-#wpwrap .qubely-drag-dimension-wrap .dimension-item > input{
- padding: 0 !important;
- &[type="number"]::-webkit-outer-spin-button,
- &[type="number"]::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- &[type="number"] {
- -moz-appearance: textfield;
- }
- border: none;
- text-align: center;
- height: 16px;
- background: transparent;
- text-indent: 0;
- border-radius: 2px;
- font-size: 11px;
- box-shadow: 0 0 0 1px #DFE1E4;
- margin: 2px;
- &:hover{
- color: #0286BA;
- }
- &:focus{
- box-shadow: 0 0 0 1px #0286BA;
- }
+ position: absolute;
+ line-height: 20px;
+ font-size: 12px;
+ color: #535f6a;
+ background: transparent;
+ padding: 0;
+ border: none;
+ width: 26px !important;
+}
+#wpwrap .qubely-drag-dimension-wrap .dimension-item > input {
+ padding: 0 !important;
+ &[type="number"]::-webkit-outer-spin-button,
+ &[type="number"]::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+ &[type="number"] {
+ -moz-appearance: textfield;
+ }
+ border: none;
+ text-align: center;
+ height: 16px;
+ background: transparent;
+ text-indent: 0;
+ border-radius: 2px;
+ font-size: 11px;
+ box-shadow: 0 0 0 1px #dfe1e4;
+ margin: 2px;
+ &:hover {
+ color: #0286ba;
+ }
+ &:focus {
+ box-shadow: 0 0 0 1px #0286ba;
+ }
}
.dimension-item.padding-left > input,
-.dimension-item.margin-left > input{
- right: 100%;
- top: 50%;
- transform: translateY(-50%);
- text-align: right;
- padding: 0 5px;
+.dimension-item.margin-left > input {
+ right: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ text-align: right;
+ padding: 0 5px;
}
.dimension-item.padding-right > input,
-.dimension-item.margin-right > input{
- left: 100%;
- top: 50%;
- transform: translateY(-50%);
- padding: 0 5px;
+.dimension-item.margin-right > input {
+ left: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 0 5px;
}
-
.dimension-item.padding-top > input,
-.dimension-item.margin-top > input{
- left: 50%;
- transform: translateX(-50%);
- top: -20px;
+.dimension-item.margin-top > input {
+ left: 50%;
+ transform: translateX(-50%);
+ top: -20px;
}
.dimension-item.padding-bottom > input,
-.dimension-item.margin-bottom > input{
- left: 50%;
- transform: translateX(-50%);
- bottom: -20px;
+.dimension-item.margin-bottom > input {
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: -20px;
}
-
-.qubely-dimension-padding > .padding-top > span{
- cursor: s-resize;
+.qubely-dimension-padding > .padding-top > span {
+ cursor: s-resize;
}
-.qubely-dimension-padding > .padding-bottom > span{
- cursor: n-resize;
+.qubely-dimension-padding > .padding-bottom > span {
+ cursor: n-resize;
}
-.qubely-dimension-padding > .padding-left > span{
- cursor: e-resize;
+.qubely-dimension-padding > .padding-left > span {
+ cursor: e-resize;
}
-.qubely-dimension-padding > .padding-right > span{
- cursor: w-resize;
+.qubely-dimension-padding > .padding-right > span {
+ cursor: w-resize;
}
diff --git a/assets/reactjs/src/components/css/dropdown.scss b/assets/reactjs/src/components/css/dropdown.scss
index d758ca8e..40e919f7 100644
--- a/assets/reactjs/src/components/css/dropdown.scss
+++ b/assets/reactjs/src/components/css/dropdown.scss
@@ -1,99 +1,99 @@
.qubely-field-dropdown {
- .qubely-dropdown {
- cursor: default;
- display: flex;
- display: -ms-flexbox;
- align-items: center;
- justify-content: space-between;
- outline: 0px !important;
- padding: 6px 8px;
- box-shadow: 0 0 0 transparent;
- transition: box-shadow 0.1s linear;
- border-radius: 4px;
- border: 1px solid #8d96a0;
- background-color: white;
- .qubely-dropdown-selected-options-wrapper {
- width: 100%;
- display:flex;
- cursor: pointer;
- flex-wrap: wrap;
- align-items: center;
- .qubely-selected-value-label{
- padding: 2px 0px;
- }
- .qubely-dropdown-selected-value {
- padding: 4px 5px ;
- margin: 0px 5px 5px 0px;
- border-radius: 15px;
- vertical-align: top;
- display: inline-block;
- border: 1px solid #c2e0ff;
- border: 1px solid rgba(0, 126, 255, 0.24);
- background-color: #ebf5ff;
- background-color: rgba(0, 126, 255, 0.08);
- .qubely-selected-value-label {
- border-bottom-right-radius: 2px;
- border-top-right-radius: 2px;
- cursor: default;
- padding: 2px 5px;
- display: inline;
- color: #007eff;
- }
- .qubely-selected-value-icon {
- cursor: pointer;
- padding: 3px 6px;
- color: #fff;
- background-color: #007eff;
- border-radius: 50%;
- font-size: 12px;
- }
- }
- .qubely-dropdown-options-search{
- min-width: 70px;
- cursor: default;
- padding: 2px 10px;
- width: auto;
- margin: 0px 8px;
- border: none;
- }
- }
- .qubely-dropdown-icon{
- display: flex;
- cursor: pointer;
- align-items: center;
- padding-right: 3px;
- }
- }
- .qubely-dropdown-options-wrapper {
- top: 100%;
- background-color: white;
- box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
- margin-bottom: 8px;
- margin-top: 8px;
- position: absolute;
- width: 70%;
- box-sizing: border-box;
- border-radius: 4px;
- z-index: 100;
- .qubely-dropdown-options {
- max-height: 270px;
- overflow-y: auto;
- padding-bottom: 4px;
- padding-top: 4px;
- position: relative;
- box-sizing: border-box;
- .qubely-dropdown-option {
- background-color: transparent;
- color: inherit;
- cursor: pointer;
- display: block;
- font-size: inherit;
- width: 100%;
- user-select: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- box-sizing: border-box;
- padding: 8px 12px;
- }
- }
- }
+ .qubely-dropdown {
+ cursor: default;
+ display: flex;
+ display: -ms-flexbox;
+ align-items: center;
+ justify-content: space-between;
+ outline: 0px !important;
+ padding: 6px 8px;
+ box-shadow: 0 0 0 transparent;
+ transition: box-shadow 0.1s linear;
+ border-radius: 4px;
+ border: 1px solid #8d96a0;
+ background-color: white;
+ .qubely-dropdown-selected-options-wrapper {
+ width: 100%;
+ display: flex;
+ cursor: pointer;
+ flex-wrap: wrap;
+ align-items: center;
+ .qubely-selected-value-label {
+ padding: 2px 0px;
+ }
+ .qubely-dropdown-selected-value {
+ padding: 4px 5px;
+ margin: 0px 5px 5px 0px;
+ border-radius: 15px;
+ vertical-align: top;
+ display: inline-block;
+ border: 1px solid #c2e0ff;
+ border: 1px solid rgba(0, 126, 255, 0.24);
+ background-color: #ebf5ff;
+ background-color: rgba(0, 126, 255, 0.08);
+ .qubely-selected-value-label {
+ border-bottom-right-radius: 2px;
+ border-top-right-radius: 2px;
+ cursor: default;
+ padding: 2px 5px;
+ display: inline;
+ color: #007eff;
+ }
+ .qubely-selected-value-icon {
+ cursor: pointer;
+ padding: 3px 6px;
+ color: #fff;
+ background-color: #007eff;
+ border-radius: 50%;
+ font-size: 12px;
+ }
+ }
+ .qubely-dropdown-options-search {
+ min-width: 70px;
+ cursor: default;
+ padding: 2px 10px;
+ width: auto;
+ margin: 0px 8px;
+ border: none;
+ }
+ }
+ .qubely-dropdown-icon {
+ display: flex;
+ cursor: pointer;
+ align-items: center;
+ padding-right: 3px;
+ }
+ }
+ .qubely-dropdown-options-wrapper {
+ top: 100%;
+ background-color: white;
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
+ margin-bottom: 8px;
+ margin-top: 8px;
+ position: absolute;
+ width: 70%;
+ box-sizing: border-box;
+ border-radius: 4px;
+ z-index: 100;
+ .qubely-dropdown-options {
+ max-height: 270px;
+ overflow-y: auto;
+ padding-bottom: 4px;
+ padding-top: 4px;
+ position: relative;
+ box-sizing: border-box;
+ .qubely-dropdown-option {
+ background-color: transparent;
+ color: inherit;
+ cursor: pointer;
+ display: block;
+ font-size: inherit;
+ width: 100%;
+ user-select: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ box-sizing: border-box;
+ padding: 8px 12px;
+ }
+ }
+ }
}
diff --git a/assets/reactjs/src/components/css/editorinline.scss b/assets/reactjs/src/components/css/editorinline.scss
index 7dc11b1d..af5ddd4d 100644
--- a/assets/reactjs/src/components/css/editorinline.scss
+++ b/assets/reactjs/src/components/css/editorinline.scss
@@ -1,30 +1,30 @@
.components-toolbar.components-toolbar {
- div {
- button {
- width: auto;
- .qubely-color-picker-icon-wraper {
- border-radius: 3px;
- border: none;
- outline: none;
- padding: 0px 5px 0px 5px;
- }
- }
- }
+ div {
+ button {
+ width: auto;
+ .qubely-color-picker-icon-wraper {
+ border-radius: 3px;
+ border: none;
+ outline: none;
+ padding: 0px 5px 0px 5px;
+ }
+ }
+ }
}
.components-toolbar {
- button {
- img {
- &.qubely-block-icon {
- &.small {
- width: 50%;
- }
- }
- }
- }
+ button {
+ img {
+ &.qubely-block-icon {
+ &.small {
+ width: 50%;
+ }
+ }
+ }
+ }
}
.qubely-toolber-popup {
- .qubely-field-alignment {
- margin-bottom: 15px;
- }
+ .qubely-field-alignment {
+ margin-bottom: 15px;
+ }
}
diff --git a/assets/reactjs/src/components/css/gradient.scss b/assets/reactjs/src/components/css/gradient.scss
index dd2c575b..817ef893 100644
--- a/assets/reactjs/src/components/css/gradient.scss
+++ b/assets/reactjs/src/components/css/gradient.scss
@@ -1,74 +1,74 @@
.qubely-gradient.qubely-field.popup {
- label {
- flex-grow: 1;
- }
- > .qubely-field-child {
- text-align: right;
- flex-grow: 0;
- .qubely-panel {
- height: 28px;
- width: 28px;
- border-radius: 50%;
- display: inline-block;
- vertical-align: middle;
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
- transition: 300ms;
- cursor: pointer;
- &:hover {
- transform: scale(1.1);
- }
- .qubely-gradient {
- padding: 15px;
- }
- }
- }
+ label {
+ flex-grow: 1;
+ }
+ > .qubely-field-child {
+ text-align: right;
+ flex-grow: 0;
+ .qubely-panel {
+ height: 28px;
+ width: 28px;
+ border-radius: 50%;
+ display: inline-block;
+ vertical-align: middle;
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+ transition: 300ms;
+ cursor: pointer;
+ &:hover {
+ transform: scale(1.1);
+ }
+ .qubely-gradient {
+ padding: 15px;
+ }
+ }
+ }
}
.qubely-gradient.qubely-field.inline > label {
- width: 100%;
- margin-bottom: 10px;
+ width: 100%;
+ margin-bottom: 10px;
}
.qubely-gradient-popup {
- padding: 0;
- > div:not(:last-child) {
- margin-bottom: 15px;
- }
+ padding: 0;
+ > div:not(:last-child) {
+ margin-bottom: 15px;
+ }
}
.qubely-field-gradient-preview {
- height: 10px;
- border-radius: 6px;
- position: relative;
- .qubely-color-picker-container {
- position: absolute;
- width: 18px;
- height: 18px;
- border: 0;
- top: 50%;
- transform: translateY(-50%);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
- &.qubely-position-left {
- left: 0;
- }
- &.qubely-position-right {
- right: 0;
- }
- .qubely-color-picker {
- width: 18px;
- height: 18px;
- border: 4px solid #ffffff;
- box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px inset;
- border: 1px solid transparent;
- }
- }
+ height: 10px;
+ border-radius: 6px;
+ position: relative;
+ .qubely-color-picker-container {
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ border: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+ &.qubely-position-left {
+ left: 0;
+ }
+ &.qubely-position-right {
+ right: 0;
+ }
+ .qubely-color-picker {
+ width: 18px;
+ height: 18px;
+ border: 4px solid #ffffff;
+ box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px inset;
+ border: 1px solid transparent;
+ }
+ }
}
.qubely-gradient-color.gradient-color-position-left {
- margin-left: -230px;
+ margin-left: -230px;
}
.qubely-gradient-color.gradient-color-position-right {
- margin-right: -230px;
+ margin-right: -230px;
}
.qubely-gradient-color-picker.is-bottom {
- margin-top: 20px !important;
+ margin-top: 20px !important;
}
diff --git a/assets/reactjs/src/components/css/iconlist.scss b/assets/reactjs/src/components/css/iconlist.scss
index 05998cfb..555efaf9 100644
--- a/assets/reactjs/src/components/css/iconlist.scss
+++ b/assets/reactjs/src/components/css/iconlist.scss
@@ -1,105 +1,104 @@
.qubely-field-icon-list {
- .qubely-icon-list-warp{
- width: 100%;
- display: block;
- }
- .qubely-icon-list-wrapper {
- input{
- background: #fff;
- width: 100%;
- height: 36px;
- padding: 0 10px !important;
- border-radius: 3px 3px 0 0;
- border: 1px solid #E5E7EA;
- position: relative;
- z-index: 2;
- &:focus {
- border: 1px solid #2184F9;
- outline: 0;
- box-shadow: none;
- }
- }
+ .qubely-icon-list-warp {
+ width: 100%;
+ display: block;
+ }
+ .qubely-icon-list-wrapper {
+ input {
+ background: #fff;
+ width: 100%;
+ height: 36px;
+ padding: 0 10px !important;
+ border-radius: 3px 3px 0 0;
+ border: 1px solid #e5e7ea;
+ position: relative;
+ z-index: 2;
+ &:focus {
+ border: 1px solid #2184f9;
+ outline: 0;
+ box-shadow: none;
+ }
+ }
- .qubely-font-list{
- span{
- border-bottom: .5px solid #E5E7EA;
- &.active{
- //border-bottom: 1px solid #555d66;
- color: #555d66;
- }
- }
- }
- }
+ .qubely-font-list {
+ span {
+ border-bottom: 0.5px solid #e5e7ea;
+ &.active {
+ //border-bottom: 1px solid #555d66;
+ color: #555d66;
+ }
+ }
+ }
+ }
- &.qubely-toggle-enabled {
- label {
- font-size: 16px;
- line-height: 1;
- margin: 0;
- width: auto;
- display: inline-block;
- }
- }
-
- .qubely-icon-list-icons {
- max-height: 177px;
- margin: 0;
- border: 1px solid #E5E7EA;
- border-top: 0;
- margin-top: -1px;
- overflow: auto;
- position: relative;
- z-index: 1;
- >span{
- text-align: center;
- font-size: 15px;
- float: left;
- width: 16.666666666666667%;
- margin: 0;
- span{
- display: block;
- height: 37px;
- line-height: 37px;
- border: 1px solid #E5E7EA;
- margin-left: -1px;
- margin-bottom: -1px;
- background: #fff;
- color: #565D66;
- transition: 300ms;
- }
- &:hover{
- cursor: pointer;
- span {
- color: #fff;
- background: #2184F9;
- border-color: #2184F9;
- }
- }
- &.qubely-active {
- span {
- color: #fff;
- background: #2184F9;
- border-color: #2184F9;
- }
- }
- }
+ &.qubely-toggle-enabled {
+ label {
+ font-size: 16px;
+ line-height: 1;
+ margin: 0;
+ width: auto;
+ display: inline-block;
+ }
+ }
- }
- .qubely-icon-list-inner{
- width: 100%;
- padding: 4px 9px;
- display: block;
- &:hover{
- cursor: pointer;
- }
- > i {
- font-style: normal;
- float: right;
- padding: 3px;
- font-size: 11px;
- &.fa-times:hover{
- color: red;
- }
- }
- }
-}
\ No newline at end of file
+ .qubely-icon-list-icons {
+ max-height: 177px;
+ margin: 0;
+ border: 1px solid #e5e7ea;
+ border-top: 0;
+ margin-top: -1px;
+ overflow: auto;
+ position: relative;
+ z-index: 1;
+ > span {
+ text-align: center;
+ font-size: 15px;
+ float: left;
+ width: 16.666666666666667%;
+ margin: 0;
+ span {
+ display: block;
+ height: 37px;
+ line-height: 37px;
+ border: 1px solid #e5e7ea;
+ margin-left: -1px;
+ margin-bottom: -1px;
+ background: #fff;
+ color: #565d66;
+ transition: 300ms;
+ }
+ &:hover {
+ cursor: pointer;
+ span {
+ color: #fff;
+ background: #2184f9;
+ border-color: #2184f9;
+ }
+ }
+ &.qubely-active {
+ span {
+ color: #fff;
+ background: #2184f9;
+ border-color: #2184f9;
+ }
+ }
+ }
+ }
+ .qubely-icon-list-inner {
+ width: 100%;
+ padding: 4px 9px;
+ display: block;
+ &:hover {
+ cursor: pointer;
+ }
+ > i {
+ font-style: normal;
+ float: right;
+ padding: 3px;
+ font-size: 11px;
+ &.fa-times:hover {
+ color: red;
+ }
+ }
+ }
+}
diff --git a/assets/reactjs/src/components/css/inline_toolbar.scss b/assets/reactjs/src/components/css/inline_toolbar.scss
index fb55469b..66ad642e 100644
--- a/assets/reactjs/src/components/css/inline_toolbar.scss
+++ b/assets/reactjs/src/components/css/inline_toolbar.scss
@@ -1,35 +1,36 @@
-.qubely-toolber-field{
- display: flex;
- justify-content: center;
- align-items: center;
- min-width: 48px;
- button{
- padding: 3px;
- height: 36px;
- width: 36px;
- background: none;
- text-align: center;
- display: block;
- border: none;
- i{
- display: block;
- padding: 5px;
- border-radius: 4px;
- height: 30px;
- width: 30px;
- line-height: 20px;
- font-size: 14px;
- font-style: normal !important;
- cursor: pointer;
- }
- &:focus i,
- &:hover i{
- box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
- color: #555d66;
- }
- }
+.qubely-toolber-field {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 48px;
+ button {
+ padding: 3px;
+ height: 36px;
+ width: 36px;
+ background: none;
+ text-align: center;
+ display: block;
+ border: none;
+ i {
+ display: block;
+ padding: 5px;
+ border-radius: 4px;
+ height: 30px;
+ width: 30px;
+ line-height: 20px;
+ font-size: 14px;
+ font-style: normal !important;
+ cursor: pointer;
+ }
+ &:focus i,
+ &:hover i {
+ box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
+ color: #555d66;
+ }
+ }
}
-.qubely-toolber-popup{
- padding: 15px;
-}
\ No newline at end of file
+.qubely-toolber-popup {
+ padding: 15px;
+ min-width: 220px;
+}
diff --git a/assets/reactjs/src/components/css/inspectorSections.scss b/assets/reactjs/src/components/css/inspectorSections.scss
index 8ab786a3..f3f233ec 100644
--- a/assets/reactjs/src/components/css/inspectorSections.scss
+++ b/assets/reactjs/src/components/css/inspectorSections.scss
@@ -1,89 +1,88 @@
-.qubely-block-sections{
- position: relative;
- button.qubely-block-refresh{
- position: absolute;
- top: -41px;
- right: 20px;
- z-index: 2;
- border: none;
- padding: 0;
- cursor: pointer;
- background: transparent;
- height: 24px;
- width: 24px;
- text-align: center;
- line-height: 24px;
- &:focus{
- outline: none;
- }
- &.qubely-is-loading{
- animation: qubelySync 1s linear infinite;
- }
- &.qubely-done {
- color: #00cf00;
- span.fas::before{
- content: "\f00c";
- }
- }
- }
+.qubely-block-sections {
+ position: relative;
+ button.qubely-block-refresh {
+ position: absolute;
+ top: -41px;
+ right: 20px;
+ z-index: 2;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+ height: 24px;
+ width: 24px;
+ text-align: center;
+ line-height: 24px;
+ &:focus {
+ outline: none;
+ }
+ &.qubely-is-loading {
+ animation: qubelySync 1s linear infinite;
+ }
+ &.qubely-done {
+ color: #00cf00;
+ span.fas::before {
+ content: "\f00c";
+ }
+ }
+ }
}
@keyframes qubelySync {
- from{
- transform: rotate(0deg);
- }
- to{
- transform: rotate(360deg);
- }
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
-.qubely-block-section{
- position: relative;
- margin-bottom: 10px;
- border-radius: 5px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
- overflow: hidden;
- background: #dddddd;
- img{
- display: block;
- }
- .qubely-block-section-btns{
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- opacity: 0;
- visibility: hidden;
- background: rgba(33, 132, 249, 0.8);
- transition: 300ms;
- button{
- font-size: 12px;
- line-height: 28px;
- height: 28px;
- padding: 0 24px;
- background: #ffffff;
- border-radius: 30px;
- color: #565D66;
- display: block;
- border: none;
- font-weight: 500;
- cursor: pointer;
- transition: 300ms;
- &:hover{
- color: #2184F9;
- box-shadow: 0 8px 10px -3px rgba(0,0,0,.3);
- }
- }
- }
- &:hover{
- .qubely-block-section-btns{
- opacity: 1;
- visibility: visible;
- }
- }
+.qubely-block-section {
+ position: relative;
+ margin-bottom: 10px;
+ border-radius: 5px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+ overflow: hidden;
+ background: #dddddd;
+ img {
+ display: block;
+ }
+ .qubely-block-section-btns {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ visibility: hidden;
+ background: rgba(33, 132, 249, 0.8);
+ transition: 300ms;
+ button {
+ font-size: 12px;
+ line-height: 28px;
+ height: 28px;
+ padding: 0 24px;
+ background: #ffffff;
+ border-radius: 30px;
+ color: #565d66;
+ display: block;
+ border: none;
+ font-weight: 500;
+ cursor: pointer;
+ transition: 300ms;
+ &:hover {
+ color: #2184f9;
+ box-shadow: 0 8px 10px -3px rgba(0, 0, 0, 0.3);
+ }
+ }
+ }
+ &:hover {
+ .qubely-block-section-btns {
+ opacity: 1;
+ visibility: visible;
+ }
+ }
}
-
diff --git a/assets/reactjs/src/components/css/inspectorTabs.scss b/assets/reactjs/src/components/css/inspectorTabs.scss
index 69ee92cd..63bb8991 100644
--- a/assets/reactjs/src/components/css/inspectorTabs.scss
+++ b/assets/reactjs/src/components/css/inspectorTabs.scss
@@ -1,228 +1,226 @@
-$border-color: #D6D9DD;
-.components-panel[data-qubely-tab]{
- &:not([data-qubely-tab='advance']) .components-panel__body.block-editor-block-inspector__advanced,
- &:not([data-qubely-tab='advance']) .components-panel__body.editor-block-inspector__advanced.block-editor-block-inspector__advanced{
- display: none;
- }
- .block-editor-block-card{
- padding-bottom: 25px;
- position: relative;
- z-index: 1;
- overflow: hidden;
- &::before{
- content: '';
- position: absolute;
- top: 0;
- left: -16px;
- right: -16px;
- bottom: 0px;
- background: #F2F4F5;
- z-index: -1;
- }
- }
- .components-panel__body.edit-post-settings-sidebar__panel-block .block-editor-block-card{
- overflow: unset;
- &::before{
- top: -16px;
- }
- }
+$border-color: #d6d9dd;
+.components-panel[data-qubely-tab] {
+ &:not([data-qubely-tab="advance"]) .components-panel__body.block-editor-block-inspector__advanced,
+ &:not([data-qubely-tab="advance"])
+ .components-panel__body.editor-block-inspector__advanced.block-editor-block-inspector__advanced {
+ display: none;
+ }
+ .block-editor-block-card {
+ padding-bottom: 25px;
+ position: relative;
+ z-index: 1;
+ overflow: hidden;
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -16px;
+ right: -16px;
+ bottom: 0px;
+ background: #f2f4f5;
+ z-index: -1;
+ }
+ }
+ .components-panel__body.edit-post-settings-sidebar__panel-block .block-editor-block-card {
+ overflow: unset;
+ &::before {
+ top: -16px;
+ }
+ }
}
-.qubely-inspector-tabs{
- display: flex;
- //margin-left: -16px;
- //margin-right: -16px;
- position: relative;
- background: #F2F4F5;
- z-index: 9;
- &::after{
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- top: 50%;
- right: 0;
- z-index: 0;
- background: #ffffff;
- pointer-events: none;
- }
- button{
- flex-grow: 1;
- flex-basis: 0;
- display: inline-flex;
- flex-direction: column;
- height: 65px;
- align-items: center;
- justify-content: center;
- border: none;
- position: relative;
- border-radius: 10px;
- background: #F2F4F5;
- cursor: pointer;
- &::after,
- &::before{
- z-index: 1;
- content: '';
- position: absolute;
- top: 0;
- left: -.5px;
- right: -.5px;
- bottom: 50%;
- border: 1px solid transparent;
- border-bottom: none;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- pointer-events: none;
- }
- &::after{
- top: 50%;
- bottom: 0;
- border-color: $border-color;
- border-bottom: 1px solid $border-color;
- border-top: none;
- border-radius: 0 0 10px 10px;
- }
- &:not(.qubely-active)::after{
- background: #F2F4F5;
- }
- &.qubely-active{
- background: #fff;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- &::before{
- border-color: $border-color;
- }
- &::after{
- border-color: transparent;
- }
- + button{
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 10px;
- &::after{
- border-bottom-right-radius: 0;
- border-right-color: transparent;
- }
- + button{
- border-bottom-left-radius: 0;
- &::after{
- border-bottom-left-radius: 0;
- border-left-color: transparent;
- }
- }
- }
- }
- &:first-child{
- border-bottom-left-radius: 0;
- &::after{
- border-bottom-left-radius: 0;
- border-left-color: transparent;
- }
- &.qubely-active::after{
- border-left-color: $border-color;
- }
- &::before,
- &::after{
- left: -1px;
- }
- }
- &:last-child{
- border-bottom-right-radius: 0;
- &::after{
- border-bottom-right-radius: 0;
- border-right-color: transparent;
- }
- &.qubely-active::after{
- border-right-color: $border-color;
- }
- &::before,
- &::after{
- right: 0;
- }
- }
- &:focus{
- outline: none;
- }
- h5{
- margin: 6px 0 0;
- font-size: 13px;
- font-weight: 400;
- line-height: 1.2;
- }
- h5,
- svg{
- z-index: 2;
- }
- &.qubely-active h5{
- color: #2184F9;
- }
- &:focus path,
- &.qubely-active path{
- fill: #2184F9;
- }
- }
-
- &.advance.qubely-inspector-tabs-count-3{
- button:first-child{
- border-bottom-right-radius: 0;
- &::after{
- border-bottom-right-radius: 0;
- border-right-color: transparent;
- }
- + button{
- border-bottom-left-radius: 0;
- &::after{
- border-bottom-left-radius: 0;
- border-left-color: transparent;
- }
- }
- }
- }
+.qubely-inspector-tabs {
+ display: flex;
+ position: relative;
+ background: #f2f4f5;
+ z-index: 9;
+ &::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ top: 50%;
+ right: 0;
+ z-index: 0;
+ background: #ffffff;
+ pointer-events: none;
+ }
+ button {
+ flex-grow: 1;
+ flex-basis: 0;
+ display: inline-flex;
+ flex-direction: column;
+ height: 65px;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ position: relative;
+ border-radius: 10px;
+ background: #f2f4f5;
+ cursor: pointer;
+ &::after,
+ &::before {
+ z-index: 1;
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -0.5px;
+ right: -0.5px;
+ bottom: 50%;
+ border: 1px solid transparent;
+ border-bottom: none;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ pointer-events: none;
+ }
+ &::after {
+ top: 50%;
+ bottom: 0;
+ border-color: $border-color;
+ border-bottom: 1px solid $border-color;
+ border-top: none;
+ border-radius: 0 0 10px 10px;
+ }
+ &:not(.qubely-active)::after {
+ background: #f2f4f5;
+ }
+ &.qubely-active {
+ background: #fff;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ &::before {
+ border-color: $border-color;
+ }
+ &::after {
+ border-color: transparent;
+ }
+ + button {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 10px;
+ &::after {
+ border-bottom-right-radius: 0;
+ border-right-color: transparent;
+ }
+ + button {
+ border-bottom-left-radius: 0;
+ &::after {
+ border-bottom-left-radius: 0;
+ border-left-color: transparent;
+ }
+ }
+ }
+ }
+ &:first-child {
+ border-bottom-left-radius: 0;
+ &::after {
+ border-bottom-left-radius: 0;
+ border-left-color: transparent;
+ }
+ &.qubely-active::after {
+ border-left-color: $border-color;
+ }
+ &::before,
+ &::after {
+ left: -1px;
+ }
+ }
+ &:last-child {
+ border-bottom-right-radius: 0;
+ &::after {
+ border-bottom-right-radius: 0;
+ border-right-color: transparent;
+ }
+ &.qubely-active::after {
+ border-right-color: $border-color;
+ }
+ &::before,
+ &::after {
+ right: 0;
+ }
+ }
+ &:focus {
+ outline: none;
+ }
+ h5 {
+ margin: 6px 0 0;
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 1.2;
+ }
+ h5,
+ svg {
+ z-index: 2;
+ }
+ &.qubely-active h5 {
+ color: #2184f9;
+ }
+ &:focus path,
+ &.qubely-active path {
+ fill: #2184f9;
+ }
+ }
+ &.layout.qubely-inspector-tabs-count-3 {
+ button:first-child {
+ border-bottom-right-radius: 0;
+ &::after {
+ border-bottom-right-radius: 0;
+ border-right-color: transparent;
+ }
+ + button {
+ border-bottom-left-radius: 0;
+ &::after {
+ border-bottom-left-radius: 0;
+ border-left-color: transparent;
+ }
+ }
+ }
+ }
}
-.components-panel .components-panel__body .qubely-inspector-tabs-container{
- position: static !important;
- margin-left: -16px;
- margin-right: -16px;
- border-top: 0 !important;
- top: 0 !important;
+.components-panel .components-panel__body .qubely-inspector-tabs-container {
+ position: static !important;
+ margin-left: -16px;
+ margin-right: -16px;
+ border-top: 0 !important;
+ top: 0 !important;
}
-.qubely-inspector-tabs-container{
- position: sticky;
- top: -3px;
- z-index: 9;
- border-top: calc(0.1em + 1px) solid #F2F4F5;
- &.qubely-is-sticky{
- .qubely-inspector-tabs{
- &::before,
- &::after{
- display: none;
- }
- border-bottom: 1px solid #e2e4e7;
- button{
- border-radius: 0;
- &::before{
- display: none;
- }
- &::after{
- border-radius: 0;
- background: #2184F9;
- height: 3px;
- top: auto;
- bottom: -1px;
- opacity: 0;
- }
- &.qubely-active::after{
- opacity: 1;
- }
- }
- }
- }
+.qubely-inspector-tabs-container {
+ position: sticky;
+ top: -3px;
+ z-index: 9;
+ border-top: calc(0.1em + 1px) solid #f2f4f5;
+ &.qubely-is-sticky {
+ .qubely-inspector-tabs {
+ &::before,
+ &::after {
+ display: none;
+ }
+ border-bottom: 1px solid #e2e4e7;
+ button {
+ border-radius: 0;
+ &::before {
+ display: none;
+ }
+ &::after {
+ border-radius: 0;
+ background: #2184f9;
+ height: 3px;
+ top: auto;
+ bottom: -1px;
+ opacity: 0;
+ }
+ &.qubely-active::after {
+ opacity: 1;
+ }
+ }
+ }
+ }
}
.qubely-inspector-tab .components-panel__body:first-child,
-.edit-post-settings-sidebar__panel-block .qubely-inspector-tab .components-panel__body:first-child{
- margin-top: 0;
- border-top: none !important;
-}
\ No newline at end of file
+.edit-post-settings-sidebar__panel-block .qubely-inspector-tab .components-panel__body:first-child {
+ margin-top: 0;
+ border-top: none !important;
+}
diff --git a/assets/reactjs/src/components/css/interaction.scss b/assets/reactjs/src/components/css/interaction.scss
index 8d28eed3..5277ce4c 100644
--- a/assets/reactjs/src/components/css/interaction.scss
+++ b/assets/reactjs/src/components/css/interaction.scss
@@ -1,666 +1,674 @@
.qubely-interaction-view {
- // box-shadow: 0 0 10px 0 rgba(109,120,131,0.10);
+ // box-shadow: 0 0 10px 0 rgba(109,120,131,0.10);
}
.qubley-interaction-panel {
- hr {
- margin: 1.5em -16px;
- }
+ hr {
+ margin: 1.5em -16px;
+ }
}
.qubely-animation-timeline-container {
- height: 100%;
- display: flex;
- flex-direction: column;
- position: relative;
- z-index: 9;
- margin-bottom: 15px;
- .qubely-add-repeat-item-header {
- width: 95%;
- margin-left: 10px;
- display: flex;
- flex-direction: row;
- padding-bottom: 13px;
- justify-content: space-between;
- margin-top: 6px;
- margin-bottom: 1px;
- }
- .qubely-animation-view {
- display: flex;
- flex: 1 1 auto;
- height: 100%;
- flex-direction: column;
- position: relative;
- min-height: 200px;
- justify-content: space-between;
- .qubely-animation-flexible-area {
- background: #ffffff;
- width: 100%;
- display: flex;
- flex: 1 1 auto;
- position: relative;
- padding-top: 5px;
- padding-bottom: 5px;
- min-height: 400px;
- .qubely-animation-flexible-area-inner-box {
- padding-left: 8px;
- padding-right: 0;
- margin-left: 33px;
- position: relative;
- display: flex;
- flex: 1 1 auto;
- flex-direction: column;
- align-items: stretch;
- .qubely-animation-timline-bar {
- width: 1px;
- height: 100%;
- top: 0;
- left: 0;
- position: absolute;
- background: #E6E9ED;
- .qubely-timeline-live-action-bar {
- position: absolute;
- background: #007bf2;
- min-width: 24px;
- font-size: 10px;
- text-align: center;
- z-index: 9;
- transform: translateX(-166%);
- display: inline-block;
- padding: 6px 0 6px 6px;
- font-size: 18px;
- line-height: 1px;
- border: 1px solid #007bf2;
- border-right: none;
- .qubely-inner-arrow {
- /* content: ''; */
- position: absolute;
- display: inline-block;
- top: 1px;
- right: -5px;
- width: 10px;
- height: 10px;
- border-top: 2px solid #007bf2;
- border-right: 2px solid #007bf2;
- background: #007bf2;
- transform: rotate(45deg);
- }
- }
- }
- }
- .qubely-action-context-menu {
- position: absolute;
- background: #ffffff;
- top: 23px;
- left: 20%;
- width: 120px;
- opacity: 1;
- z-index: 9999;
- box-sizing: content-box;
- border-width: 1px;
- border-style: solid;
- border-color: rgb(221, 221, 221);
- border-radius: 3px;
- box-shadow: rgba(0, 0, 0, 0.15) 0 5px 10px;
- overflow: hidden;
- .qubely-action-content-menu-item {
- outline: 0;
- cursor: pointer;
- user-select: none;
- padding: 4px 8px;
- font-size: 11px;
- -webkit-transition: all 0.2s linear 0s;
- -moz-transition: all 0.2s linear 0s;
- -ms-transition: all 0.2s linear 0s;
- -o-transition: all 0.2s linear 0s;
- transition: all 0.2s linear 0s;
- i {
- margin-right: 5px;
- }
- &:hover {
- background: rgb(239, 241, 244);
- }
- }
- }
- .qubely-parent-item-container {
- position: relative;
- width: 100%;
- &.qubley-action-mouse-on-item {
- border-radius: 3px;
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 3px 1px #027af2c7, 0 0 0 0.5px rgba(255, 255, 255, 0.5);
- }
- }
- .qubely-action-item{
- z-index: 1;
- width: 100%;
- background-color: #f5f7fd;
- border: 1px solid #d8dde3;
- &.qubely-action-context-menu-active {
- z-index: 2;
- }
- .qubely-action-item-inner {
- .qubely-action-pointer-range {
- transform: translate(-102%, -50%);
- top: 50%;
- display: flex;
- z-index: 1;
- flex-direction: row-reverse;
- height: 24px;
- position: absolute;
- user-select: none;
- cursor: default;
- color: rgb(166, 166, 166);
- .qubely-connect-line{
- height: 1px;
- width: 4px;
- display: inline-block;
- flex-grow: 1;
- background: rgb(64, 64, 64);
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- visibility: hidden;
- }
- .qubely-point-bullet {
- width: 7px;
- height: 7px;
- border-radius: 50%;
- background: #E6E9ED;
- border: 1px solid #E6E9ED;
- display: inline-block;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .qubely-point-range {
- display: flex;
- float: right;
- text-align: right;
- position: relative;
- justify-content: center;
- align-items: center;
- padding-right: 4px;
- top: 50%;
- transform: translateY(-50%);
- font-size: 11px;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- }
- .qubely-action-property{
- cursor: default;
- position: relative;
- height: 22px;
- font-size: 12px;
- display: flex;
- align-items: center;
- outline: none;
- color: #949494;
- text-transform: capitalize;
- overflow: hidden;
- padding: 0 4px;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- }
- &.qubely-action-active {
- .qubely-action-item-inner{
- .qubely-action-pointer-range{
- .qubely-point-bullet{
- background: #027af2;
- border-color: #027af2;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .qubely-point-range {
- color: #027af2;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- }
- }
- }
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ z-index: 9;
+ margin-bottom: 15px;
+ .qubely-add-repeat-item-header {
+ width: 95%;
+ margin-left: 10px;
+ display: flex;
+ flex-direction: row;
+ padding-bottom: 13px;
+ justify-content: space-between;
+ margin-top: 6px;
+ margin-bottom: 1px;
+ }
+ .qubely-animation-view {
+ display: flex;
+ flex: 1 1 auto;
+ height: 100%;
+ flex-direction: column;
+ position: relative;
+ min-height: 200px;
+ justify-content: space-between;
+ .qubely-animation-flexible-area {
+ background: #ffffff;
+ width: 100%;
+ display: flex;
+ flex: 1 1 auto;
+ position: relative;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ min-height: 400px;
+ .qubely-animation-flexible-area-inner-box {
+ padding-left: 8px;
+ padding-right: 0;
+ margin-left: 33px;
+ position: relative;
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-items: stretch;
+ .qubely-animation-timline-bar {
+ width: 1px;
+ height: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ background: #e6e9ed;
+ .qubely-timeline-live-action-bar {
+ position: absolute;
+ background: #007bf2;
+ min-width: 24px;
+ font-size: 10px;
+ text-align: center;
+ z-index: 9;
+ transform: translateX(-166%);
+ display: inline-block;
+ padding: 6px 0 6px 6px;
+ font-size: 18px;
+ line-height: 1px;
+ border: 1px solid #007bf2;
+ border-right: none;
+ .qubely-inner-arrow {
+ /* content: ''; */
+ position: absolute;
+ display: inline-block;
+ top: 1px;
+ right: -5px;
+ width: 10px;
+ height: 10px;
+ border-top: 2px solid #007bf2;
+ border-right: 2px solid #007bf2;
+ background: #007bf2;
+ transform: rotate(45deg);
+ }
+ }
+ }
+ }
+ .qubely-action-context-menu {
+ position: absolute;
+ background: #ffffff;
+ top: 23px;
+ left: 20%;
+ width: 120px;
+ opacity: 1;
+ z-index: 9999;
+ box-sizing: content-box;
+ border-width: 1px;
+ border-style: solid;
+ border-color: rgb(221, 221, 221);
+ border-radius: 3px;
+ box-shadow: rgba(0, 0, 0, 0.15) 0 5px 10px;
+ overflow: hidden;
+ .qubely-action-content-menu-item {
+ outline: 0;
+ cursor: pointer;
+ user-select: none;
+ padding: 4px 8px;
+ font-size: 11px;
+ -webkit-transition: all 0.2s linear 0s;
+ -moz-transition: all 0.2s linear 0s;
+ -ms-transition: all 0.2s linear 0s;
+ -o-transition: all 0.2s linear 0s;
+ transition: all 0.2s linear 0s;
+ i {
+ margin-right: 5px;
+ }
+ &:hover {
+ background: rgb(239, 241, 244);
+ }
+ }
+ }
+ .qubely-parent-item-container {
+ position: relative;
+ width: 100%;
+ &.qubley-action-mouse-on-item {
+ border-radius: 3px;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 3px 1px #027af2c7,
+ 0 0 0 0.5px rgba(255, 255, 255, 0.5);
+ }
+ }
+ .qubely-action-item {
+ z-index: 1;
+ width: 100%;
+ background-color: #f5f7fd;
+ border: 1px solid #d8dde3;
+ &.qubely-action-context-menu-active {
+ z-index: 2;
+ }
+ .qubely-action-item-inner {
+ .qubely-action-pointer-range {
+ transform: translate(-102%, -50%);
+ top: 50%;
+ display: flex;
+ z-index: 1;
+ flex-direction: row-reverse;
+ height: 24px;
+ position: absolute;
+ user-select: none;
+ cursor: default;
+ color: rgb(166, 166, 166);
+ .qubely-connect-line {
+ height: 1px;
+ width: 4px;
+ display: inline-block;
+ flex-grow: 1;
+ background: rgb(64, 64, 64);
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ visibility: hidden;
+ }
+ .qubely-point-bullet {
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ background: #e6e9ed;
+ border: 1px solid #e6e9ed;
+ display: inline-block;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ .qubely-point-range {
+ display: flex;
+ float: right;
+ text-align: right;
+ position: relative;
+ justify-content: center;
+ align-items: center;
+ padding-right: 4px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 11px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ }
+ .qubely-action-property {
+ cursor: default;
+ position: relative;
+ height: 22px;
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ outline: none;
+ color: #949494;
+ text-transform: capitalize;
+ overflow: hidden;
+ padding: 0 4px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ }
+ &.qubely-action-active {
+ .qubely-action-item-inner {
+ .qubely-action-pointer-range {
+ .qubely-point-bullet {
+ background: #027af2;
+ border-color: #027af2;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ .qubely-point-range {
+ color: #027af2;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ }
+ }
+ }
- &.qubely-action-empty-box{
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- .qubely-action-item-inner {
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- .qubely-action-property {
- visibility: hidden;
- }
- }
- }
- &.qubely-action-active {
- background: #027af2;
- border-color: #027af2;
- &.qubely-action-similar {
- background: #027af2;
- border-color: #027af2;
- }
- .qubely-action-item-inner {
- .qubely-action-property {
- color: #ffffff;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- }
- }
- &.qubely-action-similar {
- background: #e6f2ff;
- border-color: #d4e1f1;
- }
- &:last-child {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- &:first-child {
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- }
- &:nth-child(n+2){
- border-top: none;
- }
- }
- }
- }
- .qubely-animation-trigger-header {
- position: relative;
- display: flex;
- justify-content: space-between;
- margin: 5px -16px 0 -16px;
- border-bottom: 1px solid #e8e8e8;
- border-top: 1px solid #e8e8e8;
- padding: 7px 16px;
- background: #FFFFFF;
- // box-shadow: 0 2px 2px 0 rgba(109,120,131,0.10);
- z-index: 1;
- .qubely-add-animation-action-btn {
- cursor: pointer;
- color: #0077f6;
- font-size: 17px;
- border: 1px solid #0077f6;
- border-radius: 2px;
- -webkit-transition: all 0.2s ease 0s;
- -moz-transition: all 0.2s ease 0s;
- -ms-transition: all 0.2s ease 0s;
- -o-transition: all 0.2s ease 0s;
- transition: all 0.2s ease 0s;
- line-height: 18px;
- height: 18px;
- width: 18px;
- &:hover {
- color: #000;
- }
- }
- }
+ &.qubely-action-empty-box {
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ .qubely-action-item-inner {
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ .qubely-action-property {
+ visibility: hidden;
+ }
+ }
+ }
+ &.qubely-action-active {
+ background: #027af2;
+ border-color: #027af2;
+ &.qubely-action-similar {
+ background: #027af2;
+ border-color: #027af2;
+ }
+ .qubely-action-item-inner {
+ .qubely-action-property {
+ color: #ffffff;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ }
+ }
+ &.qubely-action-similar {
+ background: #e6f2ff;
+ border-color: #d4e1f1;
+ }
+ &:last-child {
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px;
+ }
+ &:first-child {
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ }
+ &:nth-child(n + 2) {
+ border-top: none;
+ }
+ }
+ }
+ }
+ .qubely-animation-trigger-header {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ margin: 5px -16px 0 -16px;
+ border-bottom: 1px solid #e8e8e8;
+ border-top: 1px solid #e8e8e8;
+ padding: 7px 16px;
+ background: #ffffff;
+ // box-shadow: 0 2px 2px 0 rgba(109,120,131,0.10);
+ z-index: 1;
+ .qubely-add-animation-action-btn {
+ cursor: pointer;
+ color: #0077f6;
+ font-size: 17px;
+ border: 1px solid #0077f6;
+ border-radius: 2px;
+ -webkit-transition: all 0.2s ease 0s;
+ -moz-transition: all 0.2s ease 0s;
+ -ms-transition: all 0.2s ease 0s;
+ -o-transition: all 0.2s ease 0s;
+ transition: all 0.2s ease 0s;
+ line-height: 18px;
+ height: 18px;
+ width: 18px;
+ &:hover {
+ color: #000;
+ }
+ }
+ }
- .qubely-animation-controller-view {
- max-height: 400px;
- display: flex;
- flex-direction: column;
- flex: 0 0 auto;
- .qubely-animation-controller-header {
- position: relative;
- padding: 7px 14px;
- border-top: 1px solid #e8e8e8;
- border-bottom: 1px solid #e8e8e8;
- background: #ffffff;
- margin: 5px -16px 15px -16px;
- label {
- margin:0;
- position: relative;
- }
- .qubely-live-animation-btn {
- position: absolute;
- right: 10px;
- top: 5px;
- cursor: pointer;
- }
- }
- }
- .qubely-timeline-pointer-hr-line {
- position: absolute;
- display:flex;
- align-items: center;
- flex-direction: row;
- height: 2px;
- width: calc(100% + 29px);
- left:-30px;
- z-index: 8;
- .qubely-action-item-pointer {
- width: 25px;
- color: #999999;
- font-size: 11px;
- text-align: center;
- z-index: 10;
- }
- .qubely-action-item-pointer-icon {
- width: 10px;
- color: #0080FE;
- font-size: 18px;
- font-weight: bold;
- margin-top: -5px;
- margin-right: 3px;
- }
- .qubely-action-item-line-hr-container {
- flex: 1;
- height: 2px;
- background: #0080FE;
- }
- }
- .qubely-animation-action-option-box {
- position: absolute;
- width: 120px;
- background: #ffffff;
- padding: 5px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px 1px;
- transform: translateY(15%);
- right: 40px;
- z-index: 10;
- .qubely-animation-action-option-lists {
- position: relative;
- width: 100%;
- .qubely-animation-action-option-item {
- display: block;
- padding: 2px 4px;
- cursor: pointer;
- text-transform: capitalize;
- font-size: 12px;
- -webkit-transition: all 0.2s linear 0s;
- -moz-transition: all 0.2s linear 0s;
- -ms-transition: all 0.2s linear 0s;
- -o-transition: all 0.2s linear 0s;
- transition: all 0.2s linear 0s;
- &:last-child {
- border-bottom: none;
- }
- &:hover {
- color: #017bf2;
- }
- }
- }
- }
- }
-
- .qubely-action-drag-mask {
- cursor: default;
- position: absolute;
- background-color: #1d8af7eb;
- height: 28px;
- font-size: 14px;
- display: flex;
- align-items: center;
- outline: none;
- color: #ffffff;
- text-transform: capitalize;
- width: 100%;
- top: 10px;
- transform: scale(.8);
- border-radius: 2px;
- z-index: 99;
- padding: 10px;
- font-weight: bold;
- .qubely-action-mask-peroperty {
- display: flex;
- justify-content: flex-start;
- span{
- &:last-child {
- flex: 1;
- padding-left: 10px;
- }
- }
- }
- }
+ .qubely-animation-controller-view {
+ max-height: 400px;
+ display: flex;
+ flex-direction: column;
+ flex: 0 0 auto;
+ .qubely-animation-controller-header {
+ position: relative;
+ padding: 7px 14px;
+ border-top: 1px solid #e8e8e8;
+ border-bottom: 1px solid #e8e8e8;
+ background: #ffffff;
+ margin: 5px -16px 15px -16px;
+ label {
+ margin: 0;
+ position: relative;
+ }
+ .qubely-live-animation-btn {
+ position: absolute;
+ right: 10px;
+ top: 5px;
+ cursor: pointer;
+ }
+ }
+ }
+ .qubely-timeline-pointer-hr-line {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ height: 2px;
+ width: calc(100% + 29px);
+ left: -30px;
+ z-index: 8;
+ .qubely-action-item-pointer {
+ width: 25px;
+ color: #999999;
+ font-size: 11px;
+ text-align: center;
+ z-index: 10;
+ }
+ .qubely-action-item-pointer-icon {
+ width: 10px;
+ color: #0080fe;
+ font-size: 18px;
+ font-weight: bold;
+ margin-top: -5px;
+ margin-right: 3px;
+ }
+ .qubely-action-item-line-hr-container {
+ flex: 1;
+ height: 2px;
+ background: #0080fe;
+ }
+ }
+ .qubely-animation-action-option-box {
+ position: absolute;
+ width: 120px;
+ background: #ffffff;
+ padding: 5px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ box-shadow: rgba(0, 0, 0, 0.15) 0 2px 8px 1px;
+ transform: translateY(15%);
+ right: 40px;
+ z-index: 10;
+ .qubely-animation-action-option-lists {
+ position: relative;
+ width: 100%;
+ .qubely-animation-action-option-item {
+ display: block;
+ padding: 2px 4px;
+ cursor: pointer;
+ text-transform: capitalize;
+ font-size: 12px;
+ -webkit-transition: all 0.2s linear 0s;
+ -moz-transition: all 0.2s linear 0s;
+ -ms-transition: all 0.2s linear 0s;
+ -o-transition: all 0.2s linear 0s;
+ transition: all 0.2s linear 0s;
+ &:last-child {
+ border-bottom: none;
+ }
+ &:hover {
+ color: #017bf2;
+ }
+ }
+ }
+ }
+}
- .qubely-animation-timeline-placeholder {
- position: absolute;
- width: 100%;
- display: flex;
- flex-direction: row;
- height: 100%;
- justify-content: center;
- align-items: center;
- text-align: center;
- .qubely-animation-timeline-placeholder-text {
- width: 80%;
- i {
- color: #0080FE;
- font-size: 3em;
- }
- .qubely-timeline-placeholder-title {
- margin: 0;
- padding: 5px 0;
- font-size: 15px;
- color: #666666;
- }
- .qubely-timeline-tutorial-button {
- display: inline-block;
- padding: 4px 12px;
- border: 1px solid #0080FE;
- color: #0080FE;
- text-decoration: none;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
- font-size: 12px;
- text-align: center;
- font-weight: 500;
- margin-top: 15px;
- i {
- font-size: 13px;
- vertical-align: middle;
- margin-right: 5px;
- }
- }
- p {
- font-size: 12px;
- color: #4A4A4A;
- }
- }
-
- }
+.qubely-action-drag-mask {
+ cursor: default;
+ position: absolute;
+ background-color: #1d8af7eb;
+ height: 28px;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ outline: none;
+ color: #ffffff;
+ text-transform: capitalize;
+ width: 100%;
+ top: 10px;
+ transform: scale(0.8);
+ border-radius: 2px;
+ z-index: 99;
+ padding: 10px;
+ font-weight: bold;
+ .qubely-action-mask-peroperty {
+ display: flex;
+ justify-content: flex-start;
+ span {
+ &:last-child {
+ flex: 1;
+ padding-left: 10px;
+ }
+ }
+ }
+}
- .qubely-animation-flexible-area .qubely-action-item + .qubely-action-item .qubely-action-item-inner .qubely-action-pointer-range {
- display: none;
- }
+.qubely-animation-timeline-placeholder {
+ position: absolute;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ .qubely-animation-timeline-placeholder-text {
+ width: 80%;
+ i {
+ color: #0080fe;
+ font-size: 3em;
+ }
+ .qubely-timeline-placeholder-title {
+ margin: 0;
+ padding: 5px 0;
+ font-size: 15px;
+ color: #666666;
+ }
+ .qubely-timeline-tutorial-button {
+ display: inline-block;
+ padding: 4px 12px;
+ border: 1px solid #0080fe;
+ color: #0080fe;
+ text-decoration: none;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ font-size: 12px;
+ text-align: center;
+ font-weight: 500;
+ margin-top: 15px;
+ i {
+ font-size: 13px;
+ vertical-align: middle;
+ margin-right: 5px;
+ }
+ }
+ p {
+ font-size: 12px;
+ color: #4a4a4a;
+ }
+ }
+}
- .qubely-animation-flexible-area .qubely-action-item.qubely-action-empty-box, .qubely-animation-flexible-area .qubely-action-item.qubely-action-empty-box .qubely-action-item-inner {
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- }
- .qubely-animation-flexible-area .qubely-action-item.qubely-action-empty-box, .qubely-animation-flexible-area .qubely-action-item.qubely-action-empty-box .qubely-action-item-inner .qubely-action-property{
- visibility: hidden;
- }
+.qubely-animation-flexible-area
+ .qubely-action-item
+ + .qubely-action-item
+ .qubely-action-item-inner
+ .qubely-action-pointer-range {
+ display: none;
+}
- .qubely-animation-controller-body {
- position: relative;
- min-height: 150px;
- .qubely-animation-controller-fields {
- .qubely-animation-control-keyframe {
+.qubely-animation-flexible-area .qubely-action-item.qubely-action-empty-box,
+.qubely-animation-flexible-area .qubely-action-item.qubely-action-empty-box .qubely-action-item-inner {
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+.qubely-animation-flexible-area .qubely-action-item.qubely-action-empty-box,
+.qubely-animation-flexible-area
+ .qubely-action-item.qubely-action-empty-box
+ .qubely-action-item-inner
+ .qubely-action-property {
+ visibility: hidden;
+}
- }
- .qubely-animation-control-property-fields {
- text-transform: capitalize;
- .qubely-field {
- display: flex;
- align-items: center;
- .qubely-mb-10 {
- margin-bottom: 0;
- padding-right: 10px;
- }
- .qubely-field-child {
- flex: 1;
- }
- }
- }
- .qubely-animation-control-property-title {
- border-top: 1px solid #dfdfdf;
- border-bottom: 1px solid #dfdfdf;
- color: #222222;
- padding: 5px 0;
- margin-top: 15px;
- margin-bottom: 15px;
- }
- }
- }
+.qubely-animation-controller-body {
+ position: relative;
+ min-height: 150px;
+ .qubely-animation-controller-fields {
+ .qubely-animation-control-keyframe {
+ }
+ .qubely-animation-control-property-fields {
+ text-transform: capitalize;
+ .qubely-field {
+ display: flex;
+ align-items: center;
+ .qubely-mb-10 {
+ margin-bottom: 0;
+ padding-right: 10px;
+ }
+ .qubely-field-child {
+ flex: 1;
+ }
+ }
+ }
+ .qubely-animation-control-property-title {
+ border-top: 1px solid #dfdfdf;
+ border-bottom: 1px solid #dfdfdf;
+ color: #222222;
+ padding: 5px 0;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ }
+ }
+}
- @-webkit-keyframes sonarEffect {
- 0% {
- opacity: 0.3;
- }
- 40% {
- opacity: 0.5;
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 5px 5px #3851bc, 0 0 0 5px rgba(255, 255, 255, 0.5);
- }
- 100% {
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 5px 5px #3851bc, 0 0 0 5px rgba(255, 255, 255, 0.5);
- -webkit-transform: scale(1.2);
- opacity: 0;
- }
+@-webkit-keyframes sonarEffect {
+ 0% {
+ opacity: 0.3;
+ }
+ 40% {
+ opacity: 0.5;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 5px 5px #3851bc, 0 0 0 5px rgba(255, 255, 255, 0.5);
+ }
+ 100% {
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 5px 5px #3851bc, 0 0 0 5px rgba(255, 255, 255, 0.5);
+ -webkit-transform: scale(1.2);
+ opacity: 0;
+ }
}
.qubley-interaction-transform-origin {
- margin-bottom: 15px;
- .qubley-interaction-transform-origin-label {
- flex: 1;
- margin-bottom: 15px;
- }
+ margin-bottom: 15px;
+ .qubley-interaction-transform-origin-label {
+ flex: 1;
+ margin-bottom: 15px;
+ }
+}
+.qubley-tranform-origin-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ label {
+ flex: 1;
+ }
+ .qubley-transform-origin-controller {
+ width: 100px;
+ height: 100px;
+ border: 1px solid #dfdfdf;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ .qubley-transform-origin-inner-controller {
+ display: inline-block;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ height: 80px;
+ width: 80px;
+ .qubley-pointer {
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ // border: 1px solid #666;
+ cursor: pointer;
+ &:after {
+ transition: all 0.3s linear 0s;
+ position: absolute;
+ content: "";
+ border: 2px solid transparent;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ display: inline-block;
+ background: transparent;
+ transform: scale(0.9);
+ z-index: -1;
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
+ }
+ &:hover {
+ background: rgba(182, 182, 182, 0.5);
+ &:after {
+ background: rgba(255, 255, 255, 0.05);
+ animation: sonarEffect 1s ease-out 55ms;
+ }
+ }
+
+ .qubley-pointer-inner {
+ display: inline-block;
+ background: #a5a5a5;
+ border-radius: 50%;
+ height: 4px;
+ width: 4px;
+ }
+ &.qubley-active-pointer {
+ background: rgba(218, 218, 218, 0.5);
+ .qubley-pointer-inner {
+ background: #ff6060;
+ }
+ }
+ &.qubley-top-left {
+ left: 0;
+ top: 0;
+ }
+ &.qubley-top-center {
+ left: 46%;
+ top: 0;
+ }
+ &.qubley-top-right {
+ left: 86%;
+ top: 0;
+ }
+ &.qubley-right-center {
+ left: 86%;
+ top: 46%;
+ }
+ &.qubley-bottom-right {
+ left: 86%;
+ top: 86%;
+ }
+ &.qubley-bottom-left {
+ left: 0;
+ top: 86%;
+ }
+ &.qubley-bottom-center {
+ left: 46%;
+ top: 86%;
+ }
+ &.qubley-left-center {
+ left: 0;
+ top: 46%;
+ }
+ &.qubley-center-center {
+ left: 46%;
+ top: 46%;
+ }
+ }
+ }
+ }
}
- .qubley-tranform-origin-wrapper {
- position: relative;
- display: flex;
- align-items: center;
- label {
- flex: 1;
- }
- .qubley-transform-origin-controller {
- width: 100px;
- height: 100px;
- border: 1px solid #dfdfdf;
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- .qubley-transform-origin-inner-controller {
- display: inline-block;
- justify-content: center;
- align-items: center;
- position: relative;
- height: 80px;
- width: 80px;
- .qubley-pointer {
- position: absolute;
- height: 12px;
- width: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- // border: 1px solid #666;
- cursor: pointer;
- &:after {
- transition: all .3s linear 0s;
- position: absolute;
- content: '';
- border: 2px solid transparent;
- height: 12px;
- width: 12px;
- border-radius: 50%;
- display: inline-block;
- background: transparent;
- transform: scale(0.9);
- z-index: -1;
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
- }
- &:hover {
- background: rgba(182, 182, 182, 0.5);
- &:after {
- background: rgba(255, 255, 255, 0.05);
- animation: sonarEffect 1s ease-out 55ms;
- }
- }
-
- .qubley-pointer-inner {
- display: inline-block;
- background: #a5a5a5;
- border-radius: 50%;
- height: 4px;
- width: 4px;
- }
- &.qubley-active-pointer {
- background: rgba(218, 218, 218, 0.5);
- .qubley-pointer-inner {
- background: #ff6060;
- }
- }
- &.qubley-top-left {
- left: 0;
- top: 0;
- }
- &.qubley-top-center {
- left: 46%;
- top: 0;
- }
- &.qubley-top-right {
- left: 86%;
- top: 0;
- }
- &.qubley-right-center {
- left: 86%;
- top: 46%;
- }
- &.qubley-bottom-right {
- left: 86%;
- top: 86%;
- }
- &.qubley-bottom-left {
- left: 0;
- top: 86%;
- }
- &.qubley-bottom-center {
- left: 46%;
- top: 86%;
- }
- &.qubley-left-center {
- left: 0;
- top: 46%;
- }
- &.qubley-center-center {
- left: 46%;
- top: 46%;
- }
- }
- }
- }
- }
\ No newline at end of file
diff --git a/assets/reactjs/src/components/css/panelTabs.scss b/assets/reactjs/src/components/css/panelTabs.scss
index 53f7905c..a276e46a 100644
--- a/assets/reactjs/src/components/css/panelTabs.scss
+++ b/assets/reactjs/src/components/css/panelTabs.scss
@@ -1,74 +1,74 @@
.qubely-field-tabs {
- margin-left: -16px;
- margin-right: -16px;
- background: #f7f8fc;
- &:last-child {
- margin-bottom: -16px !important;
- }
- &.qubely-has-label {
- border-top: 1px solid #e9e9e9;
- .qubely-field-tab-header {
- padding-top: 10px;
- label {
- margin: 0 15px;
- }
- }
- .qubely-field-tab-menus {
- margin-top: 10px;
- }
- }
- &.panel-group {
- margin-top: 20px;
- .qubely-field-tab-menus {
- cursor: pointer;
- display: flex;
- justify-content: space-evenly;
- .tab-menu-wrapper {
- display: flex;
- align-items: center;
- flex-direction: column;
- .qubely-tab-menu {
- flex-grow: 1;
- }
- }
- }
- }
- &:not(.panel-group) {
- .qubely-field-tab-menus {
- display: flex;
- button {
- flex-grow: 1;
- justify-content: center;
- padding: 7px 15px;
- box-shadow: none;
- border: none;
- transition: 400ms;
- border: 1px solid #e9e9e9;
- cursor: pointer;
- &:not(:last-child) {
- border-right: none;
- }
- &.active {
- background: #D2E7FF;
- color: #2184f9;
- border-color: #A9D0FF;
- + button{
- border-left-color: #A9D0FF;
- }
- }
- }
- }
+ margin-left: -16px;
+ margin-right: -16px;
+ background: #f7f8fc;
+ &:last-child {
+ margin-bottom: -16px !important;
+ }
+ &.qubely-has-label {
+ border-top: 1px solid #e9e9e9;
+ .qubely-field-tab-header {
+ padding-top: 10px;
+ label {
+ margin: 0 15px;
+ }
+ }
+ .qubely-field-tab-menus {
+ margin-top: 10px;
+ }
+ }
+ &.panel-group {
+ margin-top: 20px;
+ .qubely-field-tab-menus {
+ cursor: pointer;
+ display: flex;
+ justify-content: space-evenly;
+ .tab-menu-wrapper {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ .qubely-tab-menu {
+ flex-grow: 1;
+ }
+ }
+ }
+ }
+ &:not(.panel-group) {
+ .qubely-field-tab-menus {
+ display: flex;
+ button {
+ flex-grow: 1;
+ justify-content: center;
+ padding: 7px 15px;
+ box-shadow: none;
+ border: none;
+ transition: 400ms;
+ border: 1px solid #e9e9e9;
+ cursor: pointer;
+ &:not(:last-child) {
+ border-right: none;
+ }
+ &.active {
+ background: #d2e7ff;
+ color: #2184f9;
+ border-color: #a9d0ff;
+ + button {
+ border-left-color: #a9d0ff;
+ }
+ }
+ }
+ }
- .qubely-field-tab-items {
- padding: 15px;
- }
- }
+ .qubely-field-tab-items {
+ padding: 15px;
+ }
+ }
}
.qubely-field .qubely-field-boxshadow,
.qubely-field.qubely-field-typography {
- border: 1px solid #e9e9e9;
- padding: 12px;
- border-radius: 5px;
- background-color: #ffffff;
+ border: 1px solid #e9e9e9;
+ padding: 12px;
+ border-radius: 5px;
+ background-color: #ffffff;
}
diff --git a/assets/reactjs/src/components/css/range.scss b/assets/reactjs/src/components/css/range.scss
index ba8ac61a..efb980cf 100644
--- a/assets/reactjs/src/components/css/range.scss
+++ b/assets/reactjs/src/components/css/range.scss
@@ -1,4 +1,4 @@
-$track-color: #E5E7EA;
+$track-color: #e5e7ea;
$thumb-color: #606871;
$thumb-radius: 8px;
@@ -18,99 +18,97 @@ $track-border-color: black;
$track-radius: 5px;
$contrast: 5%;
-@mixin track(){
- width: $track-width;
- height: $track-height;
- cursor: pointer;
- animate: 0.2s;
+@mixin track() {
+ width: $track-width;
+ height: $track-height;
+ cursor: pointer;
+ animate: 0.2s;
}
-@mixin thumb(){
- border: $thumb-border-width solid $thumb-border-color;
- height: $thumb-height;
- width: $thumb-width;
- border-radius: $thumb-radius;
- background: $thumb-color;
- cursor: pointer;
+@mixin thumb() {
+ border: $thumb-border-width solid $thumb-border-color;
+ height: $thumb-height;
+ width: $thumb-width;
+ border-radius: $thumb-radius;
+ background: $thumb-color;
+ cursor: pointer;
}
-
-
.qubely-input-range {
- display: flex;
- > *:not(:last-child){
- margin-right: 8px;
- }
- input[type="number"]{
- width: 55px !important;
- }
- input[type=range] {
- -webkit-appearance: none;
- margin-top: $thumb-height/2;
- margin-bottom: $thumb-height/2;
- width: $track-width;
- padding-left: 0;
- padding-right: 0;
- background: transparent;
+ display: flex;
+ > *:not(:last-child) {
+ margin-right: 8px;
+ }
+ input[type="number"] {
+ width: 55px !important;
+ }
+ input[type="range"] {
+ -webkit-appearance: none;
+ margin-top: $thumb-height/2;
+ margin-bottom: $thumb-height/2;
+ width: $track-width;
+ padding-left: 0;
+ padding-right: 0;
+ background: transparent;
- &::-webkit-slider-runnable-track {
- @include track();
- background: $track-color;
- border-radius: $track-radius;
- border: $track-border-width solid $track-border-color;
- }
+ &::-webkit-slider-runnable-track {
+ @include track();
+ background: $track-color;
+ border-radius: $track-radius;
+ border: $track-border-width solid $track-border-color;
+ }
- &::-webkit-slider-thumb {
- @include thumb();
- -webkit-appearance: none;
- margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
- }
+ &::-webkit-slider-thumb {
+ @include thumb();
+ -webkit-appearance: none;
+ margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
+ }
- &:focus::-webkit-slider-runnable-track {
- background: lighten($track-color, $contrast);
- }
+ &:focus::-webkit-slider-runnable-track {
+ background: lighten($track-color, $contrast);
+ }
- &::-moz-range-track {
- @include track();
- background: $track-color;
- border-radius: $track-radius;
- border: $track-border-width solid $track-border-color;
- }
- &::-moz-range-thumb {
- @include thumb();
- }
+ &::-moz-range-track {
+ @include track();
+ background: $track-color;
+ border-radius: $track-radius;
+ border: $track-border-width solid $track-border-color;
+ }
+ &::-moz-range-thumb {
+ @include thumb();
+ }
- &::-ms-track {
- @include track();
- background: transparent;
- border-color: transparent;
- border-width: $thumb-width 0;
- color: transparent;
- }
+ &::-ms-track {
+ @include track();
+ background: transparent;
+ border-color: transparent;
+ border-width: $thumb-width 0;
+ color: transparent;
+ }
- &::-ms-fill-lower {
- background: darken($track-color, $contrast);
- border: $track-border-width solid $track-border-color;
- border-radius: $track-radius*2;
- }
- &::-ms-fill-upper {
- background: $track-color;
- border: $track-border-width solid $track-border-color;
- border-radius: $track-radius*2;
- }
- &::-ms-thumb {
- @include thumb();
- }
- &:focus::-ms-fill-lower {
- background: $track-color;
- }
- &:focus::-ms-fill-upper {
- background: lighten($track-color, $contrast);
- }
- }
+ &::-ms-fill-lower {
+ background: darken($track-color, $contrast);
+ border: $track-border-width solid $track-border-color;
+ border-radius: $track-radius * 2;
+ }
+ &::-ms-fill-upper {
+ background: $track-color;
+ border: $track-border-width solid $track-border-color;
+ border-radius: $track-radius * 2;
+ }
+ &::-ms-thumb {
+ @include thumb();
+ }
+ &:focus::-ms-fill-lower {
+ background: $track-color;
+ }
+ &:focus::-ms-fill-upper {
+ background: lighten($track-color, $contrast);
+ }
+ }
}
-.qubely-field-range > label{
- width: 100%;
- margin-bottom: 2px;
-}
\ No newline at end of file
+.qubely-field-range > label {
+ width: 100%;
+ margin-bottom: 2px;
+}
diff --git a/assets/reactjs/src/components/css/select.scss b/assets/reactjs/src/components/css/select.scss
index f87cb62f..9cbf051d 100644
--- a/assets/reactjs/src/components/css/select.scss
+++ b/assets/reactjs/src/components/css/select.scss
@@ -1,19 +1,19 @@
-.qubely-popup-select{
- position: relative;
- select{
- width: 100%;
- }
- .qubely-clear{
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- background: #fff;
- color: #8D96A0;
- padding: 2px 6px;
- cursor: pointer;
- &:hover{
- color: #717982;
- }
- }
-}
\ No newline at end of file
+.qubely-popup-select {
+ position: relative;
+ select {
+ width: 100%;
+ }
+ .qubely-clear {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ background: #fff;
+ color: #8d96a0;
+ padding: 2px 6px;
+ cursor: pointer;
+ &:hover {
+ color: #717982;
+ }
+ }
+}
diff --git a/assets/reactjs/src/components/css/selector.scss b/assets/reactjs/src/components/css/selector.scss
index 313997c3..75186949 100644
--- a/assets/reactjs/src/components/css/selector.scss
+++ b/assets/reactjs/src/components/css/selector.scss
@@ -1,52 +1,52 @@
-.qubely-toolber-field{
- button:focus{
- outline: none;
- }
+.qubely-toolber-field {
+ button:focus {
+ outline: none;
+ }
}
-.qubely-selector-popup-toolbar{
- & .components-popover__content{
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 150px !important;
- padding-bottom: 8px;
- padding-top: 8px;
- border-radius: 5px;
- }
+.qubely-selector-popup-toolbar {
+ & .components-popover__content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 150px !important;
+ padding-bottom: 8px;
+ padding-top: 8px;
+ border-radius: 5px;
+ }
}
-.qubely-selector-toolber-popup{
- width: 100%;
+.qubely-selector-toolber-popup {
+ width: 100%;
+}
+.qubely-field-selector {
+ .qubely-field-child {
+ display: flex;
+ flex-wrap: wrap;
+ flex-basis: auto;
+ .qubely-selector-button-group {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ padding-left: 2%;
+ padding-right: 2%;
+ .qubely-button {
+ display: flex;
+ padding: 5px 0px 5px 0px;
+ margin: 0px 0px 2px 0px;
+ justify-content: space-evenly;
+ background: transparent;
+ border: none;
+ }
+ .qubely-button.active {
+ background: #007eb1;
+ border-color: #00435d;
+ border-radius: 3px;
+ color: #fff;
+ box-shadow: inset 0 -1px 0 #00435d;
+ border: none;
+ }
+ .qubely-button:focus {
+ outline: none;
+ }
+ }
+ }
}
-.qubely-field-selector{
- .qubely-field-child{
- display: flex;
- flex-wrap: wrap;
- flex-basis: auto;
- .qubely-selector-button-group{
- display: flex;
- flex-direction: column;
- width: 100%;
- padding-left: 2%;
- padding-right: 2%;
- .qubely-button{
- display: flex;
- padding: 5px 0px 5px 0px;
- margin: 0px 0px 2px 0px;
- justify-content: space-evenly;
- background: transparent;
- border: none;
- }
- .qubely-button.active{
- background: #007eb1;
- border-color: #00435d;
- border-radius: 3px;
- color: #fff;
- box-shadow: inset 0 -1px 0 #00435d;
- border: none;
- }
- .qubely-button:focus{
- outline:none
- }
- }
- }
-}
\ No newline at end of file
diff --git a/assets/reactjs/src/components/css/separator.scss b/assets/reactjs/src/components/css/separator.scss
index 7c6187ca..47adfb22 100644
--- a/assets/reactjs/src/components/css/separator.scss
+++ b/assets/reactjs/src/components/css/separator.scss
@@ -1,24 +1,24 @@
.qubely-field-separator {
- width: 100%;
- height: 1px;
- background: #E5E7EA;
- &:not(:first-child-child){
- margin-top: 20px;
- }
+ width: 100%;
+ height: 1px;
+ background: #e5e7ea;
+ &:not(:first-child-child) {
+ margin-top: 20px;
+ }
- &.qubely-has-label {
- position: relative;
- label {
- position: absolute;
- top: -8px;
- display: inline-block;
- width: auto;
- background: #fff;
- padding-right: 10px;
- margin: 0;
- }
- }
+ &.qubely-has-label {
+ position: relative;
+ label {
+ position: absolute;
+ top: -8px;
+ display: inline-block;
+ width: auto;
+ background: #fff;
+ padding-right: 10px;
+ margin: 0;
+ }
+ }
}
-.qubely-field-separator.qubely-separtor-extra-margin{
- margin: 20px 0px 30px 0px;
+.qubely-field-separator.qubely-separtor-extra-margin {
+ margin: 20px 0px 30px 0px;
}
diff --git a/assets/reactjs/src/components/css/shape.scss b/assets/reactjs/src/components/css/shape.scss
index f044d140..99fdfc30 100644
--- a/assets/reactjs/src/components/css/shape.scss
+++ b/assets/reactjs/src/components/css/shape.scss
@@ -1,66 +1,66 @@
.qubely-shape-picker-wrapper {
- display: flex;
- .qubely-shape-picker {
- width: 100%;
- }
- .has-value {
- width: 90%;
- }
+ display: flex;
+ .qubely-shape-picker {
+ width: 100%;
+ }
+ .has-value {
+ width: 90%;
+ }
}
.qubely-shape-picker-options {
- width: 230px;
- .qubely-shape-picker-option {
- padding: 10px 10px 10px 10px;
- }
- .qubely-shape-picker-option:hover {
- background-color: #e8eaeb;
- border-radius: 4px;
- }
+ width: 230px;
+ .qubely-shape-picker-option {
+ padding: 10px 10px 10px 10px;
+ }
+ .qubely-shape-picker-option:hover {
+ background-color: #e8eaeb;
+ border-radius: 4px;
+ }
}
.qubely-field-shape-placeholder {
- -webkit-box-align: center;
- align-items: center;
- background-color: rgb(255, 255, 255);
- cursor: default;
- display: flex;
- flex-wrap: wrap;
- -webkit-box-pack: justify;
- justify-content: space-between;
- position: relative;
- box-sizing: border-box;
- border-color: rgb(204, 204, 204);
- border-radius: 4px;
- border-style: solid;
- border-width: 1px;
- transition: all 100ms ease 0s;
- outline: 0px !important;
- line-height: 28px;
- height: 30px;
- vertical-align: middle;
- padding-left: 10px;
- .qubely-icon {
- display: flex;
- padding-right: 5px;
- }
+ -webkit-box-align: center;
+ align-items: center;
+ background-color: rgb(255, 255, 255);
+ cursor: default;
+ display: flex;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ justify-content: space-between;
+ position: relative;
+ box-sizing: border-box;
+ border-color: rgb(204, 204, 204);
+ border-radius: 4px;
+ border-style: solid;
+ border-width: 1px;
+ transition: all 100ms ease 0s;
+ outline: 0px !important;
+ line-height: 28px;
+ height: 30px;
+ vertical-align: middle;
+ padding-left: 10px;
+ .qubely-icon {
+ display: flex;
+ padding-right: 5px;
+ }
}
.qubely-field-shape-value:hover {
- cursor: pointer;
+ cursor: pointer;
}
.shape-divider-options {
- button {
- display: block;
- width: 100%;
- margin: 0px;
- padding: 0px;
- color: inherit;
- background: none;
- box-shadow: none;
- border: none;
- outline: none;
- &:focus {
- outline: none !important;
- }
- }
+ button {
+ display: block;
+ width: 100%;
+ margin: 0px;
+ padding: 0px;
+ color: inherit;
+ background: none;
+ box-shadow: none;
+ border: none;
+ outline: none;
+ &:focus {
+ outline: none !important;
+ }
+ }
}
diff --git a/assets/reactjs/src/components/css/styles.scss b/assets/reactjs/src/components/css/styles.scss
index 9d81c9c3..04b94719 100644
--- a/assets/reactjs/src/components/css/styles.scss
+++ b/assets/reactjs/src/components/css/styles.scss
@@ -1,126 +1,126 @@
.qubely-field-styles {
- .qubely-field-style-list{
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- >div {
- text-align: center;
- margin: 4px 0;
- flex-shrink: 0;
- cursor: pointer;
- overflow: hidden;
- padding: 0;
- margin-bottom: 10px;
- .qubely-layout-style {
- display: block;
- border: 1px solid #DFE1E3;
- border-radius: 4px;
- transition: border-color 400ms;
- img {
- display: block;
- width: 100%;
- border-radius: 4px;
- }
- }
+ .qubely-field-style-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ > div {
+ text-align: center;
+ margin: 4px 0;
+ flex-shrink: 0;
+ cursor: pointer;
+ overflow: hidden;
+ padding: 0;
+ margin-bottom: 10px;
+ .qubely-layout-style {
+ display: block;
+ border: 1px solid #dfe1e3;
+ border-radius: 4px;
+ transition: border-color 400ms;
+ img {
+ display: block;
+ width: 100%;
+ border-radius: 4px;
+ }
+ }
- .qubely-field-style-icon,
- .qubely-field-style-svg,
- .qubely-field-style-label {
- display: block;
- text-align: center;
- }
+ .qubely-field-style-icon,
+ .qubely-field-style-svg,
+ .qubely-field-style-label {
+ display: block;
+ text-align: center;
+ }
- .qubely-field-style-label {
- margin-top: 5px;
- transition: color 400ms;
- }
+ .qubely-field-style-label {
+ margin-top: 5px;
+ transition: color 400ms;
+ }
- &:hover {
- .qubely-layout-style {
- border-color: #666;
- }
- }
-
- &.qubely-active {
- .qubely-layout-style {
- border-color: #2184F9;
- }
- .qubely-field-style-label {
- color: #2184F9;
- }
- }
- &.qubely-pro-layout{
- cursor:no-drop;
- }
- }
+ &:hover {
+ .qubely-layout-style {
+ border-color: #666;
+ }
+ }
- &.qubely-field-style-columns-2 {
- >div {
- width: calc(50% - 4px);
- }
- }
+ &.qubely-active {
+ .qubely-layout-style {
+ border-color: #2184f9;
+ }
+ .qubely-field-style-label {
+ color: #2184f9;
+ }
+ }
+ &.qubely-pro-layout {
+ cursor: no-drop;
+ }
+ }
- &.qubely-field-style-columns-21 {
- >div {
- width: calc(50% - 4px);
- &:last-child {
- width: calc(100% - 4px);
- }
- }
- }
+ &.qubely-field-style-columns-2 {
+ > div {
+ width: calc(50% - 4px);
+ }
+ }
- &.qubely-field-style-columns-3 {
- >div {
- width: calc(33.33% - 4px);
- }
- }
+ &.qubely-field-style-columns-21 {
+ > div {
+ width: calc(50% - 4px);
+ &:last-child {
+ width: calc(100% - 4px);
+ }
+ }
+ }
- &.qubely-field-style-columns-4 {
- >div {
- width: calc(25% - 4px);
- }
- }
- }
+ &.qubely-field-style-columns-3 {
+ > div {
+ width: calc(33.33% - 4px);
+ }
+ }
+
+ &.qubely-field-style-columns-4 {
+ > div {
+ width: calc(25% - 4px);
+ }
+ }
+ }
+}
+.qubely-field-pro-upgrade {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px 0px;
+ .qubely-upgrade-message {
+ display: flex;
+ padding: 10px 0px 20px 0px;
+ flex-direction: column;
+ align-items: center;
+ .qubely-upgrade-message-title {
+ color: #000;
+ font-weight: 400;
+ font-size: 26px;
+ padding: 20px 0px;
+ }
+ .qubely-upgrade-message-description {
+ width: 85%;
+ font-size: 15px;
+ font-weight: 100;
+ line-height: 1.5;
+ text-align: center;
+ }
+ }
+ .qubely-upgrade-button {
+ color: #fff;
+ cursor: pointer;
+ border: 1px #979797;
+ border-radius: 21px;
+ padding: 7px 19px;
+ background-color: #2184f9;
+ text-decoration: none;
+ box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.3);
+ font-size: 12px;
+ font-weight: 600;
+ transition: 400ms;
+ &:hover {
+ background-color: #146dd6;
+ box-shadow: 0 15px 20px -8px rgba(0, 0, 0, 0.4);
+ }
+ }
}
-.qubely-field-pro-upgrade{
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 20px 0px;
- .qubely-upgrade-message{
- display: flex;
- padding: 10px 0px 20px 0px;
- flex-direction: column;
- align-items: center;
- .qubely-upgrade-message-title{
- color: #000;
- font-weight: 400;
- font-size: 26px;
- padding: 20px 0px;
- }
- .qubely-upgrade-message-description{
- width: 85%;
- font-size: 15px;
- font-weight: 100;
- line-height: 1.5;
- text-align: center;
- }
- }
- .qubely-upgrade-button{
- color: #fff;
- cursor: pointer;
- border: 1px #979797;
- border-radius: 21px;
- padding: 7px 19px;
- background-color: #2184F9;
- text-decoration: none;
- box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.3);
- font-size: 12px;
- font-weight: 600;
- transition: 400ms;
- &:hover {
- background-color: #146dd6;
- box-shadow: 0 15px 20px -8px rgba(0, 0, 0, 0.4);
- }
- }
-}
\ No newline at end of file
diff --git a/assets/reactjs/src/components/css/template.scss b/assets/reactjs/src/components/css/template.scss
index 95e51968..845801b2 100644
--- a/assets/reactjs/src/components/css/template.scss
+++ b/assets/reactjs/src/components/css/template.scss
@@ -1,25 +1,25 @@
-.qubely-design-templates{
- column-count: 2;
- .qubely-design-template{
- display: inline-block;
- position: relative;
- margin-bottom: 8px;
- cursor: pointer;
- //border: 1.5px solid transparent;
- border-radius: 4px;
- box-sizing: border-box;
- overflow: hidden;
- transition: 300ms;
- box-shadow: 0 1px 2px rgba(0,0,0,.15);
- &.active,
- &:hover{
- box-shadow: 0 0 0 2px #2184F9;
- }
- img{
- display: block;
- width: 100%;
- height: auto;
- object-fit: contain;
- }
- }
-}
\ No newline at end of file
+.qubely-design-templates {
+ column-count: 2;
+ .qubely-design-template {
+ display: inline-block;
+ position: relative;
+ margin-bottom: 8px;
+ cursor: pointer;
+ //border: 1.5px solid transparent;
+ border-radius: 4px;
+ box-sizing: border-box;
+ overflow: hidden;
+ transition: 300ms;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+ &.active,
+ &:hover {
+ box-shadow: 0 0 0 2px #2184f9;
+ }
+ img {
+ display: block;
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+ }
+ }
+}
diff --git a/assets/reactjs/src/components/css/toggle.scss b/assets/reactjs/src/components/css/toggle.scss
index bb204720..0001340b 100644
--- a/assets/reactjs/src/components/css/toggle.scss
+++ b/assets/reactjs/src/components/css/toggle.scss
@@ -1,22 +1,22 @@
.qubely-field {
- &.qubely-field-toggle{
+ &.qubely-field-toggle {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
- > label{
+ > label {
width: auto;
margin-bottom: 0;
}
.components-toggle-control,
- .components-toggle-control .components-base-control__field{
- margin-bottom: 0!important;
+ .components-toggle-control .components-base-control__field {
+ margin-bottom: 0 !important;
}
- .components-toggle-control .components-base-control__field .components-form-toggle{
+ .components-toggle-control .components-base-control__field .components-form-toggle {
margin-right: 0;
}
.components-form-toggle.is-checked .components-form-toggle__track {
- background-color: #2184F9;
+ background-color: #2184f9;
}
}
-}
\ No newline at end of file
+}
diff --git a/assets/reactjs/src/components/css/typography.scss b/assets/reactjs/src/components/css/typography.scss
index cc555146..6ed40d37 100644
--- a/assets/reactjs/src/components/css/typography.scss
+++ b/assets/reactjs/src/components/css/typography.scss
@@ -1,127 +1,132 @@
-.qubely-field-font-family{
- min-width: calc(65% - 15px);
+.qubely-field-font-family {
+ min-width: calc(65% - 15px);
}
-.qubely-field-font-weight{
- min-width: 35%;
+.qubely-field-font-weight {
+ min-width: 35%;
}
-.qubely-font-family-picker, .qubely-font-weight-picker-wrapper{
- -webkit-box-align: center;
- align-items: center;
- background-color: rgb(255, 255, 255);
- cursor: default;
- display: flex;
- flex-wrap: wrap;
- -webkit-box-pack: justify;
- justify-content: space-between;
- position: relative;
- box-sizing: border-box;
- border-color: rgb(204, 204, 204);
- border-radius: 4px;
- border-style: solid;
- border-width: 1px;
- transition: all 100ms ease 0s;
- outline: 0px !important;
- line-height: 28px;
- height: 30px;
- vertical-align: middle;
- padding-left: 5px;
- .editor-rich-text{
- width: 100%;
- }
- .selected-font-family{
- color: black;
- }
+.qubely-font-family-picker,
+.qubely-font-weight-picker-wrapper {
+ -webkit-box-align: center;
+ align-items: center;
+ background-color: rgb(255, 255, 255);
+ cursor: default;
+ display: flex;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ justify-content: space-between;
+ position: relative;
+ box-sizing: border-box;
+ border-color: rgb(204, 204, 204);
+ border-radius: 4px;
+ border-style: solid;
+ border-width: 1px;
+ transition: all 100ms ease 0s;
+ outline: 0px !important;
+ line-height: 28px;
+ height: 30px;
+ vertical-align: middle;
+ padding-left: 5px;
+ .editor-rich-text {
+ width: 100%;
+ }
+ .selected-font-family {
+ color: black;
+ }
}
.qubely-font-family-option-wrapper {
- top: 100%;
- background-color: rgb(255, 255, 255);
- box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
- margin-bottom: 8px;
- margin-top: 8px;
- position: absolute;
- width: 70%;
- box-sizing: border-box;
- border-radius: 4px;
- z-index: 100;
+ top: 100%;
+ background-color: rgb(255, 255, 255);
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
+ margin-bottom: 8px;
+ margin-top: 8px;
+ position: absolute;
+ width: 70%;
+ box-sizing: border-box;
+ border-radius: 4px;
+ z-index: 100;
}
-//font weight
+//font weight
.qubely-font-weight-wrapper {
- top: 100%;
- left:62%;
- background-color: rgb(255, 255, 255);
- box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
- margin-bottom: 8px;
- margin-top: 8px;
- position: absolute;
- width: 40%;
- box-sizing: border-box;
- border-radius: 4px;
- z-index: 100;
+ top: 100%;
+ left: 62%;
+ background-color: rgb(255, 255, 255);
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
+ margin-bottom: 8px;
+ margin-top: 8px;
+ position: absolute;
+ width: 40%;
+ box-sizing: border-box;
+ border-radius: 4px;
+ z-index: 100;
}
-.qubely-font-family-options, .qubely-font-family-weights {
- max-height: 270px;
- overflow-y: auto;
- padding-bottom: 4px;
- padding-top: 4px;
- position: relative;
- box-sizing: border-box;
+.qubely-font-family-options,
+.qubely-font-family-weights {
+ max-height: 270px;
+ overflow-y: auto;
+ padding-bottom: 4px;
+ padding-top: 4px;
+ position: relative;
+ box-sizing: border-box;
}
-.qubely-active-font-family, .qubely-active-font-weight{
- background-color: rgb(38, 132, 255);
- color: rgb(255, 255, 255);
- cursor: default;
- display: block;
- font-size: inherit;
- width: 100%;
- user-select: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- box-sizing: border-box;
- padding: 8px 12px;
-}
-.qubely-font-family-option, .qubely-font-weight-option {
- background-color: transparent;
- color: inherit;
- cursor: default;
- display: block;
- font-size: inherit;
- width: 100%;
- user-select: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- box-sizing: border-box;
- padding: 8px 12px;
+.qubely-active-font-family,
+.qubely-active-font-weight {
+ background-color: rgb(38, 132, 255);
+ color: rgb(255, 255, 255);
+ cursor: default;
+ display: block;
+ font-size: inherit;
+ width: 100%;
+ user-select: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ box-sizing: border-box;
+ padding: 8px 12px;
}
-.qubely-font-family-option:hover, .qubely-font-weight-option:hover{
- background-color: #e8eaeb;
+.qubely-font-family-option,
+.qubely-font-weight-option {
+ background-color: transparent;
+ color: inherit;
+ cursor: default;
+ display: block;
+ font-size: inherit;
+ width: 100%;
+ user-select: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ box-sizing: border-box;
+ padding: 8px 12px;
}
-.qubely-font-family-search-wrapper{
- display: flex;
- justify-content: space-between;
- width: 100%;
- input {
- &.qubely-font-family-search {
- border: none !important;
- background-color: transparent !important;
- &:focus,
- &:active,
- &:hover{
- outline: 0;
- box-shadow: none;
- }
- }
- }
+.qubely-font-family-option:hover,
+.qubely-font-weight-option:hover {
+ background-color: #e8eaeb;
}
-.qubely-font-weight-picker-wrapper{
- display: flex;
- justify-content: space-between;
- width: 100%;
+.qubely-font-family-search-wrapper {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ input {
+ &.qubely-font-family-search {
+ border: none !important;
+ background-color: transparent !important;
+ &:focus,
+ &:active,
+ &:hover {
+ outline: 0;
+ box-shadow: none;
+ }
+ }
+ }
}
-.qubely-font-select-icon{
- display: flex;
- align-items: center;
- padding-right: 3px;
+.qubely-font-weight-picker-wrapper {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+}
+.qubely-font-select-icon {
+ display: flex;
+ align-items: center;
+ padding-right: 3px;
}
-.qubely-field.qubely-field-typography .components-dropdown.qubely-field{
- width: 100%;
-}
\ No newline at end of file
+.qubely-field.qubely-field-typography .components-dropdown.qubely-field {
+ width: 100%;
+}
diff --git a/assets/reactjs/src/components/css/url.scss b/assets/reactjs/src/components/css/url.scss
index 3a7862fd..4cc034b9 100644
--- a/assets/reactjs/src/components/css/url.scss
+++ b/assets/reactjs/src/components/css/url.scss
@@ -1,16 +1,16 @@
-.qubely-field-url{
- .qubely-url-input-group{
- display: flex;
- input{
- flex-grow: 1;
- margin: 0 6px 0 0;
- }
- button{
- height: 30px;
- line-height: 28px;
- }
- }
- .qubely-url-advance-options{
- margin-top: 15px;
- }
-}
\ No newline at end of file
+.qubely-field-url {
+ .qubely-url-input-group {
+ display: flex;
+ input {
+ flex-grow: 1;
+ margin: 0 6px 0 0;
+ }
+ button {
+ height: 30px;
+ line-height: 28px;
+ }
+ }
+ .qubely-url-advance-options {
+ margin-top: 15px;
+ }
+}
diff --git a/assets/reactjs/src/components/css/wrapper.scss b/assets/reactjs/src/components/css/wrapper.scss
index 69c90355..21f8d378 100644
--- a/assets/reactjs/src/components/css/wrapper.scss
+++ b/assets/reactjs/src/components/css/wrapper.scss
@@ -1,62 +1,61 @@
.qubely-field-wrapper {
- margin: 25px -15px 15px -15px;
- padding: 25px 15px 15px;
- border-top: 1px solid #EBECEE;
- border-bottom: 1px solid #EBECEE;
- background: #FAFAFA;
- position: relative;
- z-index: 1;
- &.qubely-field-wrapper-inline {
- position: absolute;
- top: 100%;
- left: 0;
- width: 300px;
- z-index: 99;
- margin: 0;
- padding: 20px;
- background: #fff;
- border: 1px solid #e5e5e5;
- box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
- .qubely-field-wrapper-content {
- position: relative;
- }
- &.quebly-position-bottom {
+ margin: 25px -15px 15px -15px;
+ padding: 25px 15px 15px;
+ border-top: 1px solid #ebecee;
+ border-bottom: 1px solid #ebecee;
+ background: #fafafa;
+ position: relative;
+ z-index: 1;
+ &.qubely-field-wrapper-inline {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 300px;
+ z-index: 99;
+ margin: 0;
+ padding: 20px;
+ background: #fff;
+ border: 1px solid #e5e5e5;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ .qubely-field-wrapper-content {
+ position: relative;
+ }
+ &.quebly-position-bottom {
+ }
+ &.quebly-position-top {
+ top: auto;
+ bottom: 100%;
+ }
+ &.quebly-position-middle {
+ left: 100%;
+ }
+ }
+ &.qubely-padding-0 {
+ padding: 0;
+ .qubely-icon-list-wrapper {
+ border: 0;
+ border-radius: 0;
+ }
+ }
+ .qubely-field-wrapper-label {
+ margin: 0;
+ position: absolute;
+ top: 0;
+ left: 15px;
+ display: inline-block;
+ width: auto;
+ background: #fff;
+ border: 1px solid #e2e4e7;
+ padding: 5px 10px;
+ line-height: 1;
+ transform: translateY(-50%);
+ overflow: hidden;
+ }
- }
- &.quebly-position-top {
- top: auto;
- bottom: 100%;
- }
- &.quebly-position-middle {
- left: 100%;
- }
- }
- &.qubely-padding-0 {
- padding: 0;
- .qubely-icon-list-wrapper {
- border: 0;
- border-radius: 0;
- }
- }
- .qubely-field-wrapper-label {
- margin: 0;
- position: absolute;
- top: 0;
- left: 15px;
- display: inline-block;
- width: auto;
- background: #fff;
- border: 1px solid #E2E4E7;
- padding: 5px 10px;
- line-height: 1;
- transform: translateY(-50%);
- overflow: hidden;
- }
-
- .qubely-field-separator {
- margin-bottom: 15px;
- label {
- background: #FAFAFA;
- }
- }
+ .qubely-field-separator {
+ margin-bottom: 15px;
+ label {
+ background: #fafafa;
+ }
+ }
}
diff --git a/assets/reactjs/src/components/fields/Alignment.js b/assets/reactjs/src/components/fields/Alignment.js
index 194db00b..7bbc7fdf 100644
--- a/assets/reactjs/src/components/fields/Alignment.js
+++ b/assets/reactjs/src/components/fields/Alignment.js
@@ -1,86 +1,158 @@
-const { __ } = wp.i18n
-import '../css/alignment.scss'
-import Device from './Device'
+const { __ } = wp.i18n;
+import "../css/alignment.scss";
+import Device from "./Device";
const { Fragment, Component } = wp.element;
const { Tooltip } = wp.components;
class Alignment extends Component {
- constructor(props) {
- super(props)
- this.state = { current: this._filterValue() }
- }
- _filterValue() {
- const { value, responsive, responsiveGroup } = this.props
- return value ? ((responsive || responsiveGroup) ? (value[window.qubelyDevice] || '') : value) : ''
- }
- setSettings(val) {
- const { value, onChange, responsive, responsiveGroup, disableToggle } = this.props
- if (val == '' && disableToggle) {
- return
- }
- const final = (responsive || responsiveGroup) ? Object.assign({}, value, { [window.qubelyDevice]: val }) : val
- onChange(final)
- this.setState({ current: final })
- }
- render() {
- const {
- label,
- responsive,
- flex,
- disableJustify,
- disableCenter,
- device,
- onDeviceChange
- } = this.props;
-
- const defData = flex ? ['flex-start', 'center', 'flex-end'] : disableJustify ? (disableCenter ? ['left', 'right'] : ['left', 'center', 'right']) : ['left', 'center', 'right', 'justify'];
+ constructor(props) {
+ super(props);
+ this.state = { current: this._filterValue() };
+ }
+ _filterValue() {
+ const { value, responsive, responsiveGroup } = this.props;
+ return value ? (responsive || responsiveGroup ? value[window.qubelyDevice] || "" : value) : "";
+ }
+ setSettings(val) {
+ const { value, onChange, responsive, responsiveGroup, disableToggle } = this.props;
+ if (val == "" && disableToggle) {
+ return;
+ }
+ const final = responsive || responsiveGroup ? Object.assign({}, value, { [window.qubelyDevice]: val }) : val;
+ onChange(final);
+ this.setState({ current: final });
+ }
+ render() {
+ const { label, responsive, flex, disableJustify, disableCenter, device, onDeviceChange } = this.props;
- return (
-
-
- {label &&
{label} }
- {responsive &&
-
- {
- device ?
- onDeviceChange(val)} />
- :
- this.setState({ current: val })} />
- }
+ const defData = flex
+ ? ["flex-start", "center", "flex-end"]
+ : disableJustify
+ ? disableCenter
+ ? ["left", "right"]
+ : ["left", "center", "right"]
+ : ["left", "center", "right", "justify"];
-
- }
-
+ return (
+
+
+ {label &&
{label} }
+ {responsive && (
+
+ {device ? (
+ onDeviceChange(val)}
+ />
+ ) : (
+ this.setState({ current: val })} />
+ )}
+
+ )}
+
-
- {defData.map((data, index) => {
- return (
this.setSettings(this._filterValue() == data ? '' : data)}>
- {this.props.alignmentType == 'content' ?
-
- {(data == 'left' || data == 'flex-start') &&
-
-
- }
- {data == 'center' &&
-
-
- }
- {(data == 'right' || data == 'flex-end') &&
-
-
- }
-
- :
- )
- })}
-
-
- )
- }
+
+ {defData.map((data, index) => {
+ return (
+
this.setSettings(this._filterValue() == data ? "" : data)}
+ >
+ {this.props.alignmentType == "content" ? (
+
+ {(data == "left" || data == "flex-start") && (
+
+
+
+
+
+
+ )}
+ {data == "center" && (
+
+
+
+
+
+
+ )}
+ {(data == "right" || data == "flex-end") && (
+
+
+
+
+
+
+ )}
+
+ ) : (
+
+ );
+ })}
+
+
+ );
+ }
}
-export default Alignment
\ No newline at end of file
+export default Alignment;
diff --git a/assets/reactjs/src/components/fields/Animation.js b/assets/reactjs/src/components/fields/Animation.js
index 8185b2f0..d8dcc193 100644
--- a/assets/reactjs/src/components/fields/Animation.js
+++ b/assets/reactjs/src/components/fields/Animation.js
@@ -1,120 +1,158 @@
-const { __ } = wp.i18n
-import '../css/animation.scss'
-const { Component, Fragment } = wp.element
-import Range from './Range'
-import Select from './Select'
+const { __ } = wp.i18n;
+import "../css/animation.scss";
+const { Component, Fragment } = wp.element;
+import Range from "./Range";
+import Select from "./Select";
-const defaultData = { animation: '', name: 'fadeCenter', repeat: 'once', direction: 'center', duration: 1000, delay: 0, curve: 'ease-in-out' }
+const defaultData = {
+ animation: "",
+ name: "fadeCenter",
+ repeat: "once",
+ direction: "center",
+ duration: 1000,
+ delay: 0,
+ curve: "ease-in-out",
+};
class Animation extends Component {
- constructor(){
- super(...arguments)
- this.state = {
- isAnimate: false
- }
- }
- componentWillMount(){
- this.props.onChange( Object.assign( {}, defaultData, ( this.props.value || {} ) ));
+ constructor() {
+ super(...arguments);
+ this.state = {
+ isAnimate: false,
+ };
+ }
+ componentWillMount() {
+ this.props.onChange(Object.assign({}, defaultData, this.props.value || {}));
}
- setSettings( type, val ){
- const openAnimation = val == '' ? {openAnimation:0} : {openAnimation:1}
- let data = Object.assign( {}, this.props.value, openAnimation , ( type == 'animation'? { [type]: val, direction: this._valueChange( val, 'change' ) } : { [type]: val } ) )
- data.name = data.animation + data.direction
- this.props.onChange( data )
- }
-
- _valueChange( value, type ){
- let returnData = value == 'rotate' ? ['DownLeft', 'DownRight', 'UpLeft', 'UpRight'] : (value == 'slide' || value == 'flip' || value == 'fold') ? ['Right','Left','Up','Down'] : ['Center','Right','Left','Up','Down']
- if( type == 'data' ){
- return returnData
- }else{
- return returnData[0]
- }
- }
+ setSettings(type, val) {
+ const openAnimation = val == "" ? { openAnimation: 0 } : { openAnimation: 1 };
+ let data = Object.assign(
+ {},
+ this.props.value,
+ openAnimation,
+ type == "animation" ? { [type]: val, direction: this._valueChange(val, "change") } : { [type]: val }
+ );
+ data.name = data.animation + data.direction;
+ this.props.onChange(data);
+ }
- doAnimate(){
- const { value, uniqueId } = this.props
- if( typeof uniqueId !== 'undefined' ){
- const { isAnimate } = this.state
- const blockId = $(`.qubely-block-${uniqueId}`)
- if( isAnimate && value.repeat !== 'once' ){
- blockId.css({ 'animation-name':''})
- }else{
- blockId.css({ 'animation-name':''})
- const cssObject = {
- 'animation-name': value.name,
- 'animation-timing-function': value.curve,
- 'animation-duration': value.duration+'ms',
- 'animation-delay': value.delay+'ms',
- 'animation-iteration-count': value.repeat === 'once' ? 1 : 'infinite'
- }
- if( typeof this.timer !== 'undefined' && this.timer > 0 ){
- clearTimeout(this.timer)
- }
- this.timer = setTimeout( () => {
- blockId.css( cssObject )
- }, 300 )
- }
- this.setState({ isAnimate: !isAnimate })
- }
- }
+ _valueChange(value, type) {
+ let returnData =
+ value == "rotate"
+ ? ["DownLeft", "DownRight", "UpLeft", "UpRight"]
+ : value == "slide" || value == "flip" || value == "fold"
+ ? ["Right", "Left", "Up", "Down"]
+ : ["Center", "Right", "Left", "Up", "Down"];
+ if (type == "data") {
+ return returnData;
+ } else {
+ return returnData[0];
+ }
+ }
- render() {
- const {value, label, uniqueId } = this.props
- const isActive = value && value.openAnimation === 1 ? true : false
-
- return (
-
+ doAnimate() {
+ const { value, uniqueId } = this.props;
+ if (typeof uniqueId !== "undefined") {
+ const { isAnimate } = this.state;
+ const blockId = $(`.qubely-block-${uniqueId}`);
+ if (isAnimate && value.repeat !== "once") {
+ blockId.css({ "animation-name": "" });
+ } else {
+ blockId.css({ "animation-name": "" });
+ const cssObject = {
+ "animation-name": value.name,
+ "animation-timing-function": value.curve,
+ "animation-duration": value.duration + "ms",
+ "animation-delay": value.delay + "ms",
+ "animation-iteration-count": value.repeat === "once" ? 1 : "infinite",
+ };
+ if (typeof this.timer !== "undefined" && this.timer > 0) {
+ clearTimeout(this.timer);
+ }
+ this.timer = setTimeout(() => {
+ blockId.css(cssObject);
+ }, 300);
+ }
+ this.setState({ isAnimate: !isAnimate });
+ }
+ }
-
this.setSettings( 'animation', val ) }
- />
+ render() {
+ const { value, label, uniqueId } = this.props;
+ const isActive = value && value.openAnimation === 1 ? true : false;
- { isActive &&
-
- this.setSettings( 'direction', val ) } />
- this.setSettings( 'repeat', val ) } />
- this.setSettings( 'duration', val ) } />
- this.setSettings( 'delay', val ) } />
- {
- ( value && value.animation != 'bounce' && value.animation != 'zoom' ) &&
- this.setSettings( 'curve', val ) }
- />
- }
- { typeof uniqueId !== 'undefined' && this.doAnimate() } className="components-button is-button is-default is-primary is-large"> { this.state.isAnimate && value.repeat === 'loop' ? "Stop" : "Animate" } }
-
- }
+ return (
+
+ this.setSettings("animation", val)}
+ />
-
- )
- }
+ {isActive && (
+
+ this.setSettings("direction", val)}
+ />
+ this.setSettings("repeat", val)}
+ />
+ this.setSettings("duration", val)}
+ />
+ this.setSettings("delay", val)}
+ />
+ {value && value.animation != "bounce" && value.animation != "zoom" && (
+ this.setSettings("curve", val)}
+ />
+ )}
+ {typeof uniqueId !== "undefined" && (
+ this.doAnimate()}
+ className="components-button is-button is-default is-primary is-large"
+ >
+ {" "}
+ {this.state.isAnimate && value.repeat === "loop" ? "Stop" : "Animate"}{" "}
+
+ )}
+
+ )}
+
+ );
+ }
}
-export default Animation
\ No newline at end of file
+export default Animation;
diff --git a/assets/reactjs/src/components/fields/Background.js b/assets/reactjs/src/components/fields/Background.js
index f3c3d6d2..2affae42 100644
--- a/assets/reactjs/src/components/fields/Background.js
+++ b/assets/reactjs/src/components/fields/Background.js
@@ -1,229 +1,370 @@
import Url from "./Url";
-import Media from './Media';
+import Media from "./Media";
import Color from "./Color";
-import Select from './Select';
-import Gradient from './Gradient';
+import Select from "./Select";
+import Gradient from "./Gradient";
import ButtonGroup from "./ButtonGroup";
-import classnames from 'classnames';
+import classnames from "classnames";
const { __ } = wp.i18n;
const { Component, Fragment } = wp.element;
const { Tooltip, TextControl, Dropdown } = wp.components;
const control = {
- position: [['default', __('Default')], ['left top', __('Left Top')], ['left center', __('Left Center')], ['left bottom', __('Left Bottom')], ['right top', __('Right Top')], ['right center', __('Right Center')], ['right bottom', __('Right Bottom')], ['center top', __('Center Top')], ['center center', __('Center Center')], ['center bottom', __('Center Bottom')]],
- attachment: [['default', __('Default')], ['scroll', __('Scroll')], ['fixed', __('Fixed')]],
- repeat: [['default', __('Default')], ['no-repeat', __('No Repeat')], ['repeat', __('Repeat')], ['repeat-x', __('Repeat X')], ['repeat-y', __('Repeat Y')]],
- size: [['default', __('Default')], ['auto', __('Auto')], ['cover', __('Cover')], ['contain', __('Contain')]],
- parallax: [['none', __('None')], ['fixed', __('Fixed')], ['animated', __('Animated')]]
-}
+ position: [
+ ["default", __("Default")],
+ ["left top", __("Left Top")],
+ ["left center", __("Left Center")],
+ ["left bottom", __("Left Bottom")],
+ ["right top", __("Right Top")],
+ ["right center", __("Right Center")],
+ ["right bottom", __("Right Bottom")],
+ ["center top", __("Center Top")],
+ ["center center", __("Center Center")],
+ ["center bottom", __("Center Bottom")],
+ ],
+ attachment: [
+ ["default", __("Default")],
+ ["scroll", __("Scroll")],
+ ["fixed", __("Fixed")],
+ ],
+ repeat: [
+ ["default", __("Default")],
+ ["no-repeat", __("No Repeat")],
+ ["repeat", __("Repeat")],
+ ["repeat-x", __("Repeat X")],
+ ["repeat-y", __("Repeat Y")],
+ ],
+ size: [
+ ["default", __("Default")],
+ ["auto", __("Auto")],
+ ["cover", __("Cover")],
+ ["contain", __("Contain")],
+ ],
+ parallax: [
+ ["none", __("None")],
+ ["fixed", __("Fixed")],
+ ["animated", __("Animated")],
+ ],
+};
const defaultData = {
- openBg: 0,
- bgType: 'color',
- videoSource: 'local',
- bgDefaultColor: '',
- bgGradient: {},
+ openBg: 0,
+ bgType: "color",
+ videoSource: "local",
+ bgDefaultColor: "",
+ bgGradient: {},
};
class Background extends Component {
+ componentWillMount() {
+ const { value } = this.props;
+ this.props.onChange(Object.assign({}, defaultData, value || {}));
+ }
- componentWillMount() {
- const { value } = this.props
- this.props.onChange(Object.assign({}, defaultData, (value || {})));
- }
-
- setSettings(val, type) {
- const { value, onChange } = this.props
- if ('bgimgParallax' == type) {
- onChange(Object.assign({}, value, { bgimgAttachment: (val == 'fixed' ? val : (val == 'animated') ? 'fixed' : 'scroll'), [type]: val }));
- } else {
- onChange(Object.assign({}, value, { openBg: 1 }, { [type]: val }));
- }
- }
+ setSettings(val, type) {
+ const { value, onChange } = this.props;
+ if ("bgimgParallax" == type) {
+ onChange(
+ Object.assign({}, value, {
+ bgimgAttachment: val == "fixed" ? val : val == "animated" ? "fixed" : "scroll",
+ [type]: val,
+ })
+ );
+ } else {
+ onChange(Object.assign({}, value, { openBg: 1 }, { [type]: val }));
+ }
+ }
- localImagePicker = () => {
- const { value } = this.props
- return (
-
this.setSettings(val, 'bgImage')}
- />
- );
- }
+ localImagePicker = () => {
+ const { value } = this.props;
+ return (
+ this.setSettings(val, "bgImage")}
+ />
+ );
+ };
- render() {
- const {
- value,
- label,
- externalImage = false,
- } = this.props
- const fieldLabel = label ? label : __('Background');
+ render() {
+ const { value, label, externalImage = false } = this.props;
+ const fieldLabel = label ? label : __("Background");
- return (
-
-
this.setSettings(val, 'bgDefaultColor')} />
-
-
{fieldLabel + ' ' + __('Type')}
-
- {
- this.props.sources.map((data, index) => {
- return (
-
this.setSettings(data, 'bgType')}>
- {data == 'image' &&
-
-
- }
- {data == 'gradient' &&
-
-
- }
- {data == 'video' &&
-
-
- }
-
- )
- })
- }
-
- {(value && (value.openBg == 1 && value.bgType != 'color')) &&
-
-
- this.setSettings('color', 'bgType')} role="button">
-
-
- }
-
+
this.setSettings(val, "bgDefaultColor")}
+ />
+
+
{fieldLabel + " " + __("Type")}
+
+ {this.props.sources.map((data, index) => {
+ return (
+
this.setSettings(data, "bgType")}
+ >
+ {data == "image" && (
+
+
+
+
+ )}
+ {data == "gradient" && (
+
+
+
+
+
+
+ )}
+ {data == "video" && (
+
+
+
+
+ )}
+
+ );
+ })}
+
+ {value && value.openBg == 1 && value.bgType != "color" && (
+
+
+ this.setSettings("color", "bgType")}
+ role="button"
+ >
+
+
+
+ )}
+
- {
- externalImage ?
-
- this.setSettings(value, 'bgimageSource')}
- />
- {
- (value.bgimageSource === 'local' || typeof value.bgimageSource === 'undefined') ?
- this.localImagePicker()
- :
- this.setSettings(newUrl, 'externalImageUrl')} />
- }
-
- :
- this.localImagePicker()
- }
+ {value && value.openBg == 1 && value.bgType === "image" && (
+
+ {externalImage ? (
+
+ this.setSettings(value, "bgimageSource")}
+ />
+ {value.bgimageSource === "local" || typeof value.bgimageSource === "undefined" ? (
+ this.localImagePicker()
+ ) : (
+ this.setSettings(newUrl, "externalImageUrl")}
+ />
+ )}
+
+ ) : (
+ this.localImagePicker()
+ )}
- {(value.bgImage && value.bgImage.url) &&
-
- {this.props.parallax &&
-
-
- {__('Parallax')}
-
-
- {
- control.parallax.map((data, index) => {
- return (
-
- this.setSettings(data[0], 'bgimgParallax')}>
- {data[0] == 'none' ?
-
-
- )
- })
- }
-
-
+ {this.props.parallax && (
+
+
{__("Parallax")}
+
+ {control.parallax.map((data, index) => {
+ return (
+
+ this.setSettings(data[0], "bgimgParallax")}
+ >
+ {data[0] == "none" ?
+
+ );
+ })}
+
+
(
-
-
{__('Advanced')} {fieldLabel}
-
-
-
-
-
-
- {!this.props.position &&
- this.setSettings(val, 'bgimgPosition')} />
- }
- {!this.props.parallax &&
- this.setSettings(val, 'bgimgAttachment')} />
- }
-
- {(!this.props.size || !this.props.repeat) &&
-
- {!this.props.repeat &&
- this.setSettings(val, 'bgimgRepeat')} />
- }
- {!this.props.size &&
- this.setSettings(val, 'bgimgSize')} />
- }
-
- }
-
- )}
- />
-
- }
-
- }
+
(
+
+
+ {__("Advanced")} {fieldLabel}
+
+
+
+
+
+
+
+ {!this.props.position && (
+ this.setSettings(val, "bgimgPosition")}
+ />
+ )}
+ {!this.props.parallax && (
+ this.setSettings(val, "bgimgAttachment")}
+ />
+ )}
+
+ {(!this.props.size || !this.props.repeat) && (
+
+ {!this.props.repeat && (
+ this.setSettings(val, "bgimgRepeat")}
+ />
+ )}
+ {!this.props.size && (
+ this.setSettings(val, "bgimgSize")}
+ />
+ )}
+
+ )}
+
+ )}
+ />
+
+ )}
+
- this.setSettings(val, 'bgGradient')}
- />
-
- }
+ {value && value.openBg == 1 && value.bgType === "gradient" && (
+
+ this.setSettings(val, "bgGradient")}
+ />
+
+ )}
- {(value && value.openBg == 1) && (value.bgType == 'video') &&
-
- this.setSettings(val, 'videoSource')} />
- {value.videoSource === 'external' ?
- this.setSettings(val, 'bgExternalVideo')}
- />
- :
- this.setSettings(val, 'bgVideo')} />
- }
- this.setSettings(val, 'bgVideoFallback')} />
-
- }
-
+ this.setSettings(val, "videoSource")}
+ />
+ {value.videoSource === "external" ? (
+ this.setSettings(val, "bgExternalVideo")}
+ />
+ ) : (
+ this.setSettings(val, "bgVideo")}
+ />
+ )}
+ this.setSettings(val, "bgVideoFallback")}
+ />
+
+ )}
+
+
+
{this.props.label ? this.props.label : __("Border")}
+
+ {[
+ ["solid", __("Solid")],
+ ["dotted", __("Dotted")],
+ ["dashed", __("Dashed")],
+ ["double", __("Double")],
+ ].map((data, index) => {
+ return (
+
+ this.setSettings("type", data[0])}
+ >
+
+
+ );
+ })}
+
+ {value.type && (
+
+
+ this.setSettings("type", "")}
+ role="button"
+ >
+
+
+
+ )}
+
- const global = responsive || responsiveGroup ? value.global && value.global[responsiveDevice] ? value.global[responsiveDevice] : ''
- :
- value.global ? value.global : ''
- let iterator = ['top', 'right', 'bottom', 'left']
- return (
-
+ {value.type && (
+
+ this.setSettings("color", val)}
+ />
-
-
- {this.props.label ? this.props.label : __('Border')}
-
-
- {
- [['solid', __('Solid')], ['dotted', __('Dotted')], ['dashed', __('Dashed')], ['double', __('Double')]].map((data, index) => {
- return (
-
- this.setSettings('type', data[0])}>
-
-
- )
- })
- }
-
- {(value.type) &&
-
-
- this.setSettings('type', '')} role="button">
-
-
- }
-
+ {(typeof unit == "object" ? unit : ["px", "em"]).map((unitName) => (
+ this.updateUnit(unitName)}
+ >
+ {unitName}
+
+ ))}
+
+ )}
+
+
{this.props.label ? this.props.label + __(" Width") : __("Border Width")}
+ {responsive && (
+
{
+ device ? onDeviceChange(val) : this.setState({ device: val });
+ }}
+ />
+ )}
+
+ {!disableCustom &&
+ ["global", "custom"].map((data, index) => {
+ return (
+
this.setSettings("widthType", data)}
+ >
+ {data == "global" ? (
+
+
+ ) : (
+
+
+
+
+ )}
+
+ );
+ })}
+
- this.setSettings('color', val)}
- />
+ {!value.widthType || value.widthType == "global" ? (
+
+
+ this.updateBorder("global", val)}
+ min={min || 0}
+ max={max || 10}
+ step={1}
+ />
+
+
+ {iterator.map((item, index) => {
+ return (
+
+
{icons.border[item]}
+
+ this.updateBorder(iterator[index], val)}
+ min={min || 0}
+ max={max || 10}
+ step={1}
+ />
+
+
+ )}
- {unit &&
-
- {(typeof unit == 'object' ? unit : ['px', 'em']).map(unitName => (
- this.updateUnit(unitName)}>
- {unitName}
- ))}
-
- }
-
-
- {this.props.label ? this.props.label + __(' Width') : __('Border Width')}
-
- {responsive &&
{ device ? onDeviceChange(val) : this.setState({ device: val }) }} />}
-
- {
- !disableCustom && (
- ['global', 'custom'].map((data, index) => {
- return (
-
this.setSettings('widthType', data)}>
- {data == 'global' ?
-
- )
- }))
- }
-
-
- this.updateBorder('global', val)}
- min={min || 0}
- max={max || 10}
- step={1}
- />
-
-
- {
- iterator.map((item, index) => {
- return (
-
-
- {icons.border[item]}
-
-
- this.updateBorder(iterator[index], val)}
- min={min || 0}
- max={max || 10}
- step={1}
- />
-
-
- }
-
- {this.props.separator &&
-
- }
-
- )
- }
+ {this.props.separator &&
}
+
+ )}
+
+ return (
+
+ {unit && (
+
+ {(typeof unit == "object" ? unit : ["px", "em", "%"]).map((unitName, i) => (
+ this.updateUnit(unitName)}
+ >
+ {unitName}
+
+ ))}
+
+ )}
- {unit &&
-
- {(typeof unit == 'object' ? unit : ['px', 'em', '%']).map((unitName, i) => (
- this.updateUnit(unitName)}>
- {unitName}
- ))}
-
- }
+
+
{label ? label : __("Radius")}
-
-
{label ? label : __('Radius')}
+ {responsive && (
+
{
+ device ? onDeviceChange(val) : this.setState({ device: val });
+ }}
+ />
+ )}
- {responsive && { device ? onDeviceChange(val) : this.setState({ device: val }) }} />}
+
+ {[
+ ["global", __("Global")],
+ ["custom", __("Custom")],
+ ].map((data, index) => {
+ return (
+
+ this.updateRadiusType(data[0])}
+ >
+ {data[0] == "global" ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ );
+ })}
+
-
- {
- [['global', __('Global')], ['custom', __('Custom')]].map((data, index) => {
- return (
-
- this.updateRadiusType(data[0])}>
- {data[0] == 'global' ?
-
-
- )
- })
- }
-
-
+ {(!value.radiusType || value.radiusType == "global") && (
+
+
+ this.setBorderRadius("global", val)}
+ min={min}
+ max={max}
+ step={1}
+ />
+
+
+ )}
-
- {(!value.radiusType || value.radiusType == 'global') &&
-
-
- this.setBorderRadius('global', val)}
- min={min}
- max={max}
- step={1}
- />
-
-
- }
-
- {value.radiusType == 'custom' &&
-
- {
- iterator.map((item, index) => {
- return (
-
-
- {icons.borderRadius[item]}
-
-
- this.setBorderRadius(iterator[index], val)}
- min={min}
- max={max}
- step={1}
- />
-
-
- }
-
- )
- }
+ {value.radiusType == "custom" && (
+
+ {iterator.map((item, index) => {
+ return (
+
+
{icons.borderRadius[item]}
+
+ this.setBorderRadius(iterator[index], val)}
+ min={min}
+ max={max}
+ step={1}
+ />
+
+
+ )}
+
+
this.setSettings("openShadow", val)}
+ />
- setSettings(type, val) {
- const { value, onChange } = this.props
- onChange(Object.assign({}, defaultData, (value || {}), { [type]: val || 0 }))
- }
+ {value.openShadow == 1 && (
+
+ this.setSettings("color", val)}
+ />
+ this.setSettings("horizontal", val)}
+ />
+ this.setSettings("vertical", val)}
+ />
+ this.setSettings("blur", val)}
+ />
+ this.setSettings("spread", val)}
+ />
+
+ )}
- render() {
- const { value } = this.props;
- return (
-
-
this.setSettings('openShadow', val)}
- />
-
- {(value.openShadow == 1) &&
-
- this.setSettings('color', val)}
- />
- this.setSettings('horizontal', val)}
- />
- this.setSettings('vertical', val)}
- />
- this.setSettings('blur', val)}
- />
- this.setSettings('spread', val)}
- />
-
- }
-
- {(value.openShadow == 1 && !this.props.disableInset) &&
- this.setSettings('inset', val ? 'inset' : '')}
- />
- }
- this.setSettings("inset", val ? "inset" : "")}
+ />
+ )}
+
+ {responsive && (
+
+ {label && {label} }
+ {responsive && (
+ {
+ device && onDeviceChange ? onDeviceChange(val) : updateDevice(val);
+ }}
+ />
+ )}
+
+ )}
- return (
-
+ {!responsive && label &&
{label} }
- {responsive &&
-
- {label && {label} }
- {responsive && { device && onDeviceChange ? onDeviceChange(val) : updateDevice(val) }} />}
-
- }
-
- {!responsive && label &&
{label} }
-
-
- {options.map(([title, option], i) => {
- const activeBtn = option === getValue() ? 'qubley-active-group-btn' : ''
- return ( onButtonClick(option)}>{title} )
- })}
-
-
- )
-}
\ No newline at end of file
+
+ {options.map(([title, option], i) => {
+ const activeBtn = option === getValue() ? "qubley-active-group-btn" : "";
+ return (
+ onButtonClick(option)}
+ >
+ {title}
+
+ );
+ })}
+
+
+ setAttributes("buttonFillType", value)}
+ options={[
+ { value: "fill", svg: icons.btn_fill, label: __("Fill") },
+ { value: "outline", svg: icons.btn_outline, label: __("Outline") },
+ ]}
+ />
+ {buttonTag == "a" && (
+ setAttributes("buttonUrl", value)} />
+ )}
+ {enableButtonAlignment && (
+ setAttributes("buttonAlignment", val)}
+ disableJustify
+ responsive
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+ )}
+
+ setAttributes("buttonSize", value)}
+ />
+ {buttonSize == "custom" && (
+ setAttributes("buttonPadding", value)}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+ )}
+ setAttributes("buttonWidthType", value)}
+ />
+ {buttonWidthType == "fixed" && (
+ setAttributes("buttonWidth", value)}
+ unit={["px", "em", "%"]}
+ min={30}
+ max={800}
+ responsive
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+ )}
+
- const renderButtonControls = () => {
- return (
-
- setAttributes('buttonFillType', value)}
- options={[
- { value: 'fill', svg: icons.btn_fill, label: __('Fill') },
- { value: 'outline', svg: icons.btn_outline, label: __('Outline') }
- ]}
- />
- {buttonTag == 'a' &&
- setAttributes('buttonUrl', value)} />
- }
- {
- enableButtonAlignment &&
- setAttributes('buttonAlignment', val)} disableJustify responsive device={device} onDeviceChange={value => updateParentState('device', value)} />
- }
+
+
+
+
+ buttonFillType == "fill"
+ ? setAttributes("buttonColor", value)
+ : setAttributes("buttonColor2", value)
+ }
+ />
+ {buttonFillType == "fill" && (
+ setAttributes("buttonBgColor", value)}
+ />
+ )}
+ setAttributes("buttonBorder", val)}
+ />
+ setAttributes("buttonShadow", value)}
+ />
+
+
+
+ buttonFillType == "fill"
+ ? setAttributes("buttonHoverColor", value)
+ : setAttributes("buttonHoverColor2", value)
+ }
+ />
+ {buttonFillType == "fill" && (
+ setAttributes("buttonBgHoverColor", value)}
+ />
+ )}
+ setAttributes("buttonBorderHoverColor", value)}
+ />
+ setAttributes("buttonHoverShadow", value)}
+ />
+
+
-
- setAttributes('buttonSize', value)}
- />
- {buttonSize == 'custom' &&
- setAttributes('buttonPadding', value)}
- onDeviceChange={value => updateParentState('device', value)}
- />
+ setAttributes("buttonBorderRadius", value)}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+ setAttributes("buttonGap", value)}
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+
- }
- setAttributes('buttonWidthType', value)}
- />
- {buttonWidthType == 'fixed' &&
- setAttributes('buttonWidth', value)}
- unit={['px', 'em', '%']}
- min={30}
- max={800}
- responsive
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
- }
-
+
+ setAttributes("buttonIconName", value)}
+ />
+ {buttonIconName && (
+
+ setAttributes("buttonIconPosition", value)}
+ />
+ setAttributes("buttonIconSize", value)}
+ unit={["px", "em", "%"]}
+ min={5}
+ max={48}
+ responsive
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+ setAttributes("buttonIconGap", val)}
+ unit={["px", "em", "%"]}
+ min={0}
+ max={64}
+ responsive
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+
+ )}
+
-
-
-
- buttonFillType == 'fill' ? setAttributes('buttonColor', value) : setAttributes('buttonColor2', value)} />
- {buttonFillType == 'fill' &&
- setAttributes('buttonBgColor', value)} />
- }
- setAttributes('buttonBorder', val)}
- />
- setAttributes('buttonShadow', value)} />
-
-
- buttonFillType == 'fill' ? setAttributes('buttonHoverColor', value) : setAttributes('buttonHoverColor2', value)} />
- {buttonFillType == 'fill' && setAttributes('buttonBgHoverColor', value)} />}
- setAttributes('buttonBorderHoverColor', value)} />
- setAttributes('buttonHoverShadow', value)} />
-
-
+
+ setAttributes("buttonTypography", value)}
+ disableLineHeight
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+
+
+ );
+ };
+ return (
+
+ {controlledButtonPanel ? (
+ setAttributes("showButtonPanel", !showButtonPanel)}
+ >
+ {buttonToggleOption && (
+ setAttributes("enableButton", val)}
+ />
+ )}
+ {enableButton && renderButtonControls()}
+
+ ) : (
+
+ {buttonToggleOption && (
+ setAttributes("enableButton", val)}
+ />
+ )}
+ {enableButton && renderButtonControls()}
+
+ )}
- setAttributes('buttonBorderRadius', value)}
- min={0}
- max={100} unit={['px', 'em', '%']}
- responsive
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
- setAttributes('buttonGap', value)}
- device={device}
- onDeviceChange={value => updateParentState('device', value)}
- />
-
-
-
- setAttributes('buttonIconName', value)} />
- {buttonIconName &&
-
- setAttributes('buttonIconPosition', value)} />
- setAttributes('buttonIconSize', value)}
- unit={['px', 'em', '%']}
- min={5}
- max={48}
- responsive
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
- setAttributes('buttonIconGap', val)}
- unit={['px', 'em', '%']}
- min={0}
- max={64}
- responsive
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
-
- }
-
-
-
- setAttributes('buttonTypography', value)}
- disableLineHeight
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
-
-
- )
- }
- return (
-
- {
- controlledButtonPanel ?
- setAttributes('showButtonPanel', !showButtonPanel)}>
- {buttonToggleOption && setAttributes('enableButton', val)} />}
- {enableButton && renderButtonControls()}
-
- :
-
- {buttonToggleOption && setAttributes('enableButton', val)} />}
- {enableButton && renderButtonControls()}
-
- }
-
- {
- typeof (enablePostButtonText) != 'undefined' &&
-
-
- setAttributes('enablePostButtonText', val)} />
- {
- enablePostButtonText &&
-
-
-
- setAttributes('postButtonTextColor', val)} />
-
-
-
- setAttributes('postButtonTextHoverColor', val)} />
-
-
- updateParentState('showPostTextTypography', val)} />
- {
- showPostTextTypography &&
- setAttributes('postButtonTextTypography', val)}
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
- }
- setAttributes('postButtonTextPaddingTop', val)}
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
- setAttributes('postButtonTextPaddingBottom', val)}
- device={device}
- onDeviceChange={value => updateParentState('device', value)} />
-
- }
-
- }
-
- )
+ {typeof enablePostButtonText != "undefined" && (
+
+ setAttributes("enablePostButtonText", val)}
+ />
+ {enablePostButtonText && (
+
+
+
+ setAttributes("postButtonTextColor", val)}
+ />
+
+
+ setAttributes("postButtonTextHoverColor", val)}
+ />
+
+
+ updateParentState("showPostTextTypography", val)}
+ />
+ {showPostTextTypography && (
+ setAttributes("postButtonTextTypography", val)}
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+ )}
+ setAttributes("postButtonTextPaddingTop", val)}
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+ setAttributes("postButtonTextPaddingBottom", val)}
+ device={device}
+ onDeviceChange={(value) => updateParentState("device", value)}
+ />
+
+ )}
+
+ )}
+
+ );
}
diff --git a/assets/reactjs/src/components/fields/Carousel/index.js b/assets/reactjs/src/components/fields/Carousel/index.js
index d3e43e6c..a6b60542 100644
--- a/assets/reactjs/src/components/fields/Carousel/index.js
+++ b/assets/reactjs/src/components/fields/Carousel/index.js
@@ -1,144 +1,179 @@
-
-const { Component, cloneElement, Fragment, findDOMNode } = wp.element
-import { _equal } from './utils'
+const { Component, cloneElement, Fragment, findDOMNode } = wp.element;
+import { _equal } from "./utils";
const defaultOptions = {
- margin: 10,
- nav: false,
- dots: false,
- center: false,
- autoplay: false,
- dot_indicator: false,
- items: { md: '2', sm: '2', xs: '1' }
-}
+ margin: 10,
+ nav: false,
+ dots: false,
+ center: false,
+ autoplay: false,
+ dot_indicator: false,
+ items: { md: "2", sm: "2", xs: "1" },
+};
export default class Carousel extends Component {
- constructor(props) {
- super(props)
- this.state = { device: '' }
- }
- componentDidMount() {
- let activeDevice = this.parseResponsiveViewPort()
- this.setState({ device: activeDevice })
- require('./qubelyCarousel')
- this.init(this.getOptions())
- }
- componentWillReceiveProps(nextProps) {
- this.destroy()
- }
+ constructor(props) {
+ super(props);
+ this.state = { device: "" };
+ }
+ componentDidMount() {
+ let activeDevice = this.parseResponsiveViewPort();
+ this.setState({ device: activeDevice });
+ require("./qubelyCarousel");
+ this.init(this.getOptions());
+ }
+ componentWillReceiveProps(nextProps) {
+ this.destroy();
+ }
- componentDidUpdate(prevProps, prevState) {
- if (!_equal(prevProps.options, this.props.options) || prevProps.children.length !== this.props.children.length) {
- this.init(this.getOptions());
- }
- }
+ componentDidUpdate(prevProps, prevState) {
+ if (
+ !_equal(prevProps.options, this.props.options) ||
+ prevProps.children.length !== this.props.children.length
+ ) {
+ this.init(this.getOptions());
+ }
+ }
- componentWillUnmount() {
- this.destroy();
- }
+ componentWillUnmount() {
+ this.destroy();
+ }
- parseResponsiveViewPort = () => {
- const { options: { responsive } } = this.props
- if (typeof responsive === 'undefined')
- return
- let activeView = null
+ parseResponsiveViewPort = () => {
+ const {
+ options: { responsive },
+ } = this.props;
+ if (typeof responsive === "undefined") return;
+ let activeView = null;
- for (let i = 0; i < responsive.length; i++) {
- if (window.innerWidth > responsive[i].viewport) {
- activeView = responsive[i]
- break;
- }
- }
- if (activeView === null) {
- activeView = responsive[responsive.length - 1]
- }
- return activeView.viewport <= 1199 ? activeView.viewport <= 991 ? 'xs' : 'sm' : 'md'
- }
+ for (let i = 0; i < responsive.length; i++) {
+ if (window.innerWidth > responsive[i].viewport) {
+ activeView = responsive[i];
+ break;
+ }
+ }
+ if (activeView === null) {
+ activeView = responsive[responsive.length - 1];
+ }
+ return activeView.viewport <= 1199 ? (activeView.viewport <= 991 ? "xs" : "sm") : "md";
+ };
- init(options) {
- this.$node.qubelyCarousel(options)
- this.$qubelyCarousel = this.$node.data('qubelyCarousel')
- }
+ init(options) {
+ this.$node.qubelyCarousel(options);
+ this.$qubelyCarousel = this.$node.data("qubelyCarousel");
+ }
- getOptions() {
- const { options } = this.props
- const newOptions = Object.assign(defaultOptions, options)
- return newOptions
- }
+ getOptions() {
+ const { options } = this.props;
+ const newOptions = Object.assign(defaultOptions, options);
+ return newOptions;
+ }
- destroy() {
- this.$qubelyCarousel.destroy();
- }
+ destroy() {
+ this.$qubelyCarousel.destroy();
+ }
- cloneItems() {
- const { children, options } = this.props
- let device = this.parseResponsiveViewPort()
- let firstChilds = []
- let lastChilds = []
+ cloneItems() {
+ const { children, options } = this.props;
+ let device = this.parseResponsiveViewPort();
+ let firstChilds = [];
+ let lastChilds = [];
- const cloneItems = children.length > options.items[device] ? Math.ceil(children.length / 2) : options.items[device]
- Array(parseInt(cloneItems)).fill(0).map((_, i) => {
- const lastChild = cloneElement(children[(children.length - 1) - i], { className: `clone qubely-carousel-item` })
- const firstChild = cloneElement(children[i], { className: `clone qubely-carousel-item` })
- firstChilds.push(firstChild)
- lastChilds.push(lastChild)
- })
- return { firstChilds, lastChilds }
- }
+ const cloneItems =
+ children.length > options.items[device] ? Math.ceil(children.length / 2) : options.items[device];
+ Array(parseInt(cloneItems))
+ .fill(0)
+ .map((_, i) => {
+ const lastChild = cloneElement(children[children.length - 1 - i], {
+ className: `clone qubely-carousel-item`,
+ });
+ const firstChild = cloneElement(children[i], { className: `clone qubely-carousel-item` });
+ firstChilds.push(firstChild);
+ lastChilds.push(lastChild);
+ });
+ return { firstChilds, lastChilds };
+ }
- finddotLength = () => {
- const { options: { items } } = this.props
- let device = this.parseResponsiveViewPort()
- const cloneItems = $('.qubely-carousel-extended-outer-stage').find('.clone').length
- let numberOfItems = $('.qubely-carousel-extended-outer-stage').find('.qubely-carousel-item').length - cloneItems
- return (Math.floor(numberOfItems / items[device]))
- }
+ finddotLength = () => {
+ const {
+ options: { items },
+ } = this.props;
+ let device = this.parseResponsiveViewPort();
+ const cloneItems = $(".qubely-carousel-extended-outer-stage").find(".clone").length;
+ let numberOfItems =
+ $(".qubely-carousel-extended-outer-stage").find(".qubely-carousel-item").length - cloneItems;
+ return Math.floor(numberOfItems / items[device]);
+ };
- createDotsItems() {
- const { children, options: { items } } = this.props
- let device = this.parseResponsiveViewPort()
- let dots = Math.floor(children.length / items[device]);
- return Array(dots).fill(0).map((item, index) => {
- return (
-
-
- )
- })
- }
+ createDotsItems() {
+ const {
+ children,
+ options: { items },
+ } = this.props;
+ let device = this.parseResponsiveViewPort();
+ let dots = Math.floor(children.length / items[device]);
+ return Array(dots)
+ .fill(0)
+ .map((item, index) => {
+ return (
+
+
+ );
+ });
+ }
- render() {
- const { options: { nav, dots, arrowStyle, arrowPosition }, children } = this.props
- const cloneItems = this.cloneItems()
- return (
- this.$node = $(findDOMNode(item))} {...this.props.options}>
-
-
- {cloneItems.lastChilds}
- {children}
- {cloneItems.firstChilds}
-
-
-
- {nav &&
-
- this.$qubelyCarousel.navigate('next')}>
- {(arrowStyle == 'arrowright2') ?
- this.$qubelyCarousel.navigate('prev')}>
- {(arrowStyle == 'arrowright2') ?
-
- }
-
- {dots &&
-
-
- {this.createDotsItems()}
-
-
- }
-
(this.$node = $(findDOMNode(item)))}
+ {...this.props.options}
+ >
+
+
+ {cloneItems.lastChilds}
+ {children}
+ {cloneItems.firstChilds}
+
+
+
+ {nav && (
+
+ this.$qubelyCarousel.navigate("next")}
+ >
+ {arrowStyle == "arrowright2" ? (
+
+ this.$qubelyCarousel.navigate("prev")}
+ >
+ {arrowStyle == "arrowright2" ? (
+
+
+ )}
+
+ {dots && (
+
+ )}
+
- {label &&
{__(label)} }
-
{
- return (
-
-
- )
- }}
- renderContent={() => (
-
- {
- if (val.rgb) {
- onChange(val.rgb.a != 1 ? 'rgba(' + val.rgb.r + ',' + val.rgb.g + ',' + val.rgb.b + ',' + val.rgb.a + ')' : val.hex)
- }
- }}
- disableAlpha={disableAlpha ? disableAlpha : false}
- />
- {!disablePalette &&
-
- {globalColors.map((color, index) => onChange(`var(--qubely-color-${index + 1})`)} />)}
-
- }
-
- )}
- />
- {(value != '' && !disableClear) &&
-
-
- onChange('')} role="button">
-
-
- }
-
+ {label &&
{__(label)} }
+
{
+ return (
+
+
+ );
+ }}
+ renderContent={() => (
+
+ {
+ if (val.rgb) {
+ onChange(
+ val.rgb.a != 1
+ ? "rgba(" +
+ val.rgb.r +
+ "," +
+ val.rgb.g +
+ "," +
+ val.rgb.b +
+ "," +
+ val.rgb.a +
+ ")"
+ : val.hex
+ );
+ }
+ }}
+ disableAlpha={disableAlpha ? disableAlpha : false}
+ />
+ {!disablePalette && (
+
+ {globalColors.map((color, index) => (
+ onChange(`var(--qubely-color-${index + 1})`)}
+ />
+ ))}
+
+ )}
+
+ )}
+ />
+ {value != "" && !disableClear && (
+
+
+ onChange("")} role="button">
+
+
+
+ )}
+
+
+ {this.props.label &&
{this.props.label} }
+
+ {["color", "gradient"].map((data, index) => {
+ return (
+
this.setSettings(data, "type")}
+ >
+ {data == "color" && (
+
+
+
+
+ )}
+ {data == "gradient" && (
+
+
+
+
+
+
+ )}
+
+ );
+ })}
+
+ {value && (value.openColor && value.type) != "" && (
+
+
+ this.setSettings(value.openColor ? 0 : 1, "openColor")}
+ role="button"
+ >
+
+
+
+ )}
+
- render() {
- const { value } = this.props;
- return (
-
-
- {this.props.label &&
-
{this.props.label}
- }
-
- {
- ['color', 'gradient'].map((data, index) => {
- return (
-
this.setSettings(data, 'type')}>
- {data == 'color' &&
-
-
- }
- {data == 'gradient' &&
-
-
- }
-
- )
- })
- }
-
- {(value && (value.openColor && value.type) != '') &&
-
-
- this.setSettings(value.openColor ? 0 : 1, 'openColor')} role="button">
-
-
- }
-
-
- {(value && value.openColor == 1) &&
-
- {(value.type === "color") &&
- this.setSettings(val, 'color')}
- />
- }
- {(value.type === "gradient") &&
- this.setSettings(val, 'gradient')}
- />
- }
-
- }
-
- )
- }
+ {value && value.openColor == 1 && (
+
+ {value.type === "color" && (
+ this.setSettings(val, "color")}
+ />
+ )}
+ {value.type === "gradient" && (
+ this.setSettings(val, "gradient")}
+ />
+ )}
+
+ )}
+
-
-
this.copyStyles()} >
-
-
{__('Copy Style')}
-
-
this.pasteStyle()} aria-disabled={sourceOfCopiedStyle} >
-
-
{__('Paste Style')}
-
-
-
-
dispatch('core/block-editor').removeBlock(clientId)} >
-
-
{__('Delete')}
-
⌦
-
-
-
+
+
this.copyStyles()}
+ >
+
+ {" "}
+
+
{__("Copy Style")}
+
+
this.pasteStyle()}
+ aria-disabled={sourceOfCopiedStyle}
+ >
+
+ {" "}
+
+
{__("Paste Style")}
+
+
+
+
dispatch("core/block-editor").removeBlock(clientId)}
+ >
+
+ {" "}
+
+
{__("Delete")}
+
⌦
+
+
+
-
- this.setSettings('md')} title={__('Desktop')} className={"qubely-device-desktop" + ((commonResponsiveDevice && device == 'md' || !commonResponsiveDevice && current == 'md') ? ' active' : '')} />
-
-
- this.setSettings('sm')} title={__('Tablet')} className={"qubely-device-tablet" + ((commonResponsiveDevice && device == 'sm' || !commonResponsiveDevice && current == 'sm') ? ' active' : '')} />
-
-
- this.setSettings('xs')} title={__('Phone')} className={"qubely-device-mobile" + ((commonResponsiveDevice && device == 'xs' || !commonResponsiveDevice && current == 'xs') ? ' active' : '')} />
-
-
-
- )
- }
+ return (
+
+
+ this.setSettings("md")}
+ title={__("Desktop")}
+ className={
+ "qubely-device-desktop" +
+ ((commonResponsiveDevice && device == "md") || (!commonResponsiveDevice && current == "md")
+ ? " active"
+ : "")
+ }
+ />
+
+
+ this.setSettings("sm")}
+ title={__("Tablet")}
+ className={
+ "qubely-device-tablet" +
+ ((commonResponsiveDevice && device == "sm") || (!commonResponsiveDevice && current == "sm")
+ ? " active"
+ : "")
+ }
+ />
+
+
+ this.setSettings("xs")}
+ title={__("Phone")}
+ className={
+ "qubely-device-mobile" +
+ ((commonResponsiveDevice && device == "xs") || (!commonResponsiveDevice && current == "xs")
+ ? " active"
+ : "")
+ }
+ />
+
+
+ );
+ }
}
-export default Device
\ No newline at end of file
+export default Device;
diff --git a/assets/reactjs/src/components/fields/Dimension.js b/assets/reactjs/src/components/fields/Dimension.js
index a963bdbb..9eff8608 100644
--- a/assets/reactjs/src/components/fields/Dimension.js
+++ b/assets/reactjs/src/components/fields/Dimension.js
@@ -1,92 +1,129 @@
-import '../css/dimension.scss'
+import "../css/dimension.scss";
import Device from "./Device";
-const { Component } = wp.element
+const { Component } = wp.element;
class Dimension extends Component {
- constructor(props) {
- super(props);
- this.state = { lock: false, current: this._filterValue() }
- }
+ constructor(props) {
+ super(props);
+ this.state = { lock: false, current: this._filterValue() };
+ }
- _filterValue(val) {
- const { value, responsive } = this.props
- if (typeof value == 'object' && Object.keys(value).length > 0) {
- if (val) {
- return responsive ? (value[window.qubelyDevice] ? value[window.qubelyDevice][val] || '' : '') : value[val]
- } else {
- return responsive ? value[window.qubelyDevice] || '' : value
- }
- } else {
- return ''
- }
- }
+ _filterValue(val) {
+ const { value, responsive } = this.props;
+ if (typeof value == "object" && Object.keys(value).length > 0) {
+ if (val) {
+ return responsive
+ ? value[window.qubelyDevice]
+ ? value[window.qubelyDevice][val] || ""
+ : ""
+ : value[val];
+ } else {
+ return responsive ? value[window.qubelyDevice] || "" : value;
+ }
+ } else {
+ return "";
+ }
+ }
- setSettings(action, position) {
- const { responsive, value, onChange, max, min } = this.props
- let newVal = action;
- if (typeof min != undefined) { newVal = action < min ? min : newVal }
- if (max) { newVal = action > max ? max : newVal }
- let data = (this.state.lock && position != 'unit') ? { 'top': newVal, 'right': newVal, 'bottom': newVal, 'left': newVal } : { [position]: newVal }
- data = Object.assign({}, responsive ? value[window.qubelyDevice] || {} : value, data)
- const final = Object.assign({}, value, responsive ? { [window.qubelyDevice]: data } : data)
- final.unit = data.unit || 'px'
- onChange(final)
- this.setState({ current: final })
- }
+ setSettings(action, position) {
+ const { responsive, value, onChange, max, min } = this.props;
+ let newVal = action;
+ if (typeof min != undefined) {
+ newVal = action < min ? min : newVal;
+ }
+ if (max) {
+ newVal = action > max ? max : newVal;
+ }
+ let data =
+ this.state.lock && position != "unit"
+ ? { top: newVal, right: newVal, bottom: newVal, left: newVal }
+ : { [position]: newVal };
+ data = Object.assign({}, responsive ? value[window.qubelyDevice] || {} : value, data);
+ const final = Object.assign({}, value, responsive ? { [window.qubelyDevice]: data } : data);
+ final.unit = data.unit || "px";
+ onChange(final);
+ this.setState({ current: final });
+ }
- render() {
- const { unit, label, responsive, device, onDeviceChange, clientId, min, max } = this.props;
- let responsiveDevice = responsive ? device ? device : this.state.device : window.qubelyDevice;
+ render() {
+ const { unit, label, responsive, device, onDeviceChange, clientId, min, max } = this.props;
+ let responsiveDevice = responsive ? (device ? device : this.state.device) : window.qubelyDevice;
- return (
-
-
- {label &&
-
-
- {label}
-
-
- }
+ return (
+
+
+ {label && (
+
+ {label}
+
+ )}
- {responsive &&
{ onDeviceChange(val) }} />}
+ {responsive && (
+ {
+ onDeviceChange(val);
+ }}
+ />
+ )}
- {unit &&
-
- {(typeof unit == 'object' ? unit : ['px', 'em', '%']).map((value) => (
- {
- this.setSettings(value, 'unit');
- }}>{value}
- ))}
-
- }
-
-
-
- {['top', 'right', 'bottom', 'left'].map((val, index) => ({this.props.dataLabel ? this.props.dataLabel[index] : val} this.setState({ lock: !this.state.lock })}>
- {this.state.lock ?
- }
-
-
-
- )
- }
+ {unit && (
+
+ {(typeof unit == "object" ? unit : ["px", "em", "%"]).map((value) => (
+ {
+ this.setSettings(value, "unit");
+ }}
+ >
+ {value}
+
+ ))}
+
+ )}
+
+
+
+ {["top", "right", "bottom", "left"].map((val, index) => (
+
+ {this.props.dataLabel ? this.props.dataLabel[index] : val}
+
+ ))}
+ {!this.props.noLock && (
+ this.setState({ lock: !this.state.lock })}
+ >
+ {this.state.lock ? (
+
+ )}
+
+
+
-
- {label &&
-
{label}
- }
-
- {
- this.props.responsive &&
this.setState({ responseDevice: val })} />
- }
+ const isMarginDrag = mousePosition === "margin" ? `qubely-drag-${mousePosition}-${direction}` : "";
+ const isPaddingDrag = mousePosition === "padding" ? `qubely-drag-${mousePosition}-${direction}` : "";
- { unit &&
-
- { (typeof unit == 'object' ? unit : ['px', 'em', '%']).map((value) => (
- this.changeUnit(value) }>{value}
- )) }
-
- }
-
+ return (
+
+
+ {label &&
{label}
}
-
-
+ {this.props.responsive && (
+
this.setState({ responseDevice: val })} />
+ )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-}
\ No newline at end of file
+ {unit && (
+
+ {(typeof unit == "object" ? unit : ["px", "em", "%"]).map((value) => (
+ this.changeUnit(value)}
+ >
+ {value}
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+ {label}{" "}
+
+ {
+ let newTaxonomies = JSON.parse(JSON.stringify(value));
+ newTaxonomies.splice(index, 1);
+ onChange(newTaxonomies);
+ }}
+ >
+ {" "}
+ X
+
+
+ );
+ });
+ };
- const findArrayIndex = (value) => {
- let index = 0
- while (index < options.length) {
- if (options[index].value == value) {
- break
- }
- index++
- }
- return index
- }
-
- const renderSelectedOptions = () => {
- return (value.map(({ label }, index) => {
- return (
-
- {label}
- {
- let newTaxonomies = JSON.parse(JSON.stringify(value))
- newTaxonomies.splice(index, 1)
- onChange(newTaxonomies)
- }}
- > X
-
- )
- }))
- }
-
- return (
-
-
-
{__(label)}
-
!showOptions && toggleOptions(true)}
- >
-
-
- {
- value.length ? renderSelectedOptions() : {__(defaultOptionsLabel) || __('Default')}
- }
- {
- (enableSearch && showOptions) &&
-
- showOptions && toggleOptions(false)}> {showOptions ? icons.arrow_up : icons.arrow_down}
-
- {
- showOptions &&
-
- {options.length > 0 ?
- getAvaiableOptions().filter(option => !filteredText ? true : option.label.toLowerCase().search(filteredText.toLowerCase()) !== -1).map((option, index) => {
- return (
-
{
- toggleOptions(false)
- setFilteredText('')
- onChange([...value, option])
- }}
- >
- {option.label}
-
- )
- })
- :
-
toggleOptions(false)} > No matched Option
- }
-
-
- }
-
+
{__(label)}
+
!showOptions && toggleOptions(true)}
+ >
+
+ {value.length ? (
+ renderSelectedOptions()
+ ) : (
+
+ {__(defaultOptionsLabel) || __("Default")}
+
+ )}
+ {enableSearch && showOptions && (
+
+ showOptions && toggleOptions(false)}>
+ {" "}
+ {showOptions ? icons.arrow_up : icons.arrow_down}{" "}
+
+
+ {showOptions && (
+
+
+ {options.length > 0 ? (
+ getAvaiableOptions()
+ .filter((option) =>
+ !filteredText
+ ? true
+ : option.label.toLowerCase().search(filteredText.toLowerCase()) !== -1
+ )
+ .map((option, index) => {
+ return (
+
{
+ toggleOptions(false);
+ setFilteredText("");
+ onChange([...value, option]);
+ }}
+ >
+ {option.label}
+
+ );
+ })
+ ) : (
+
toggleOptions(false)}>
+ {" "}
+ No matched Option{" "}
+
+ )}
+
+
+ )}
+
+ setAttributes({ enablePosition: !enablePosition })}
+ />
+ {enablePosition && (
+
+ setAttributes({ selectPosition: val })}
+ />
+ this.setState({ device: value })}
+ value={positionXaxis}
+ onChange={(value) => setAttributes({ positionXaxis: value })}
+ />
+ this.setState({ device: value })}
+ value={positionYaxis}
+ onChange={(value) => setAttributes({ positionYaxis: value })}
+ />
+
+ )}
+ setAttributes({ globalZindex: value })}
+ />
- const Output =
- setAttributes({ enablePosition: !enablePosition })}
- />
- {enablePosition &&
-
- setAttributes({ selectPosition: val })}
- />
- this.setState({ device: value })}
- value={positionXaxis}
- onChange={value => setAttributes({ positionXaxis: value })}
- />
- this.setState({ device: value })}
- value={positionYaxis}
- onChange={value => setAttributes({ positionYaxis: value })}
- />
-
- }
- setAttributes({ globalZindex: value })}
- />
- setAttributes({ hideTablet: !hideTablet })}
- />
- setAttributes({ hideMobile: !hideMobile })} />
- setAttributes({ globalCss: val })} />
-
+ {/* setAttributes({ hideDesktop: !hideDesktop })}
+ /> */}
- return isReturn ? Output : {Output}
+ setAttributes({ hideTablet: !hideTablet })}
+ />
+ setAttributes({ hideMobile: !hideMobile })}
+ />
+ setAttributes({ globalCss: val })}
+ />
+
+ );
+
+ return isReturn ? Output : {Output} ;
}
export function animationSettings(uniqueId, animation, setAttributes) {
- return (
-
- setAttributes({ animation: value })} />
-
- )
+ return (
+
+ setAttributes({ animation: value })}
+ />
+
+ );
}
-
export function interactionSettings(uniqueId, interaction, setAttributes) {
- return (
-
- setAttributes({ interaction: value })}
- />
-
- )
+ return (
+
+ setAttributes({ interaction: value })}
+ />
+
+ );
}
diff --git a/assets/reactjs/src/components/fields/Gradient.js b/assets/reactjs/src/components/fields/Gradient.js
index af712224..a5e9251e 100644
--- a/assets/reactjs/src/components/fields/Gradient.js
+++ b/assets/reactjs/src/components/fields/Gradient.js
@@ -1,172 +1,365 @@
import Range from "./Range";
import Select from "./Select";
-import '../css/gradient.scss';
+import "../css/gradient.scss";
const { __ } = wp.i18n;
const { Component, Fragment } = wp.element;
const { Dropdown, ColorPicker, Tooltip } = wp.components;
const defaultState = {
- color1: '#16d03e',
- color2: '#1f91f3',
- type: 'linear',
- direction: '90',
- start: 5,
- stop: 80,
- radial: 'center',
- clip: false
+ color1: "#16d03e",
+ color2: "#1f91f3",
+ type: "linear",
+ direction: "90",
+ start: 5,
+ stop: 80,
+ radial: "center",
+ clip: false,
};
-
class Gradient extends Component {
- componentDidMount() {
- const { value } = this.props
- if (!Object.keys(value).length > 0) {
- this.props.onChange(defaultState)
- } else {
- this.props.onChange({ ...defaultState, ...value })
- }
- }
- defColors = async () => {
- let val = qubely_admin.palette;
- let { colors } = await JSON.parse(localStorage.getItem('qubely-global-settings'));
- if (typeof colors !== 'undefined') {
- val = colors
- }
- return val;
- }
-
- setSettings(value, type) {
- this.props.onChange(Object.assign({}, this.props.value, { [type]: value }))
- }
-
- renderColorPicker = (colorType, defaultColor) => {
- const { value } = this.props
- let globalColors = qubely_admin.palette;
- let { colors } = JSON.parse(localStorage.getItem('qubely-global-settings'));
- if (typeof colors !== 'undefined') {
- globalColors = colors
- }
- return (
-
- {
- if (val.rgb) {
- this.setSettings((val.rgb.a != 1 ? 'rgba(' + val.rgb.r + ', ' + val.rgb.g + ', ' + val.rgb.b + ', ' + val.rgb.a + ')' : val.hex), colorType);
- }
- }} />
-
- {globalColors.map((color, index) => this.setSettings(`var(--qubely-color-${index + 1})`, colorType)} />)}
-
-
- )
- }
-
- render() {
- const { value } = this.props
- let gradientColors = [['color1', __('Color 1'), '#cccccc', 'left'], ['color2', __('Color 2'), '#1f91f3', 'right']]
+ componentDidMount() {
+ const { value } = this.props;
+ if (!Object.keys(value).length > 0) {
+ this.props.onChange(defaultState);
+ } else {
+ this.props.onChange({ ...defaultState, ...value });
+ }
+ }
+ defColors = async () => {
+ let val = qubely_admin.palette;
+ let { colors } = await JSON.parse(localStorage.getItem("qubely-global-settings"));
+ if (typeof colors !== "undefined") {
+ val = colors;
+ }
+ return val;
+ };
- return (
-
+ setSettings(value, type) {
+ this.props.onChange(Object.assign({}, this.props.value, { [type]: value }));
+ }
-
90 ? (90 - value.direction + 360) : 90 - value.direction) + 'deg,' + value.color1 + ' ' + value.start + '%, ' + value.color2 + ' ' + value.stop + '%' + ')', background: 'linear-gradient(' + value.direction + 'deg,' + value.color1 + ' ' + value.start + '%, ' + value.color2 + ' ' + value.stop + '%' + ')' }}>
- {
- gradientColors.map((gradientColor, i) => {
- let [color, label, defaultColor, customClassName] = gradientColor
- return (
-
(
-
-
-
-
- )}
+ renderColorPicker = (colorType, defaultColor) => {
+ const { value } = this.props;
+ let globalColors = qubely_admin.palette;
+ let { colors } = JSON.parse(localStorage.getItem("qubely-global-settings"));
+ if (typeof colors !== "undefined") {
+ globalColors = colors;
+ }
+ return (
+
+ {
+ if (val.rgb) {
+ this.setSettings(
+ val.rgb.a != 1
+ ? "rgba(" + val.rgb.r + ", " + val.rgb.g + ", " + val.rgb.b + ", " + val.rgb.a + ")"
+ : val.hex,
+ colorType
+ );
+ }
+ }}
+ />
+
+ {globalColors.map((color, index) => (
+ this.setSettings(`var(--qubely-color-${index + 1})`, colorType)}
+ />
+ ))}
+
+
+ );
+ };
- renderContent={() => this.renderColorPicker(color, defaultColor)}
- />
- )
- })
- }
+ render() {
+ const { value } = this.props;
+ let gradientColors = [
+ ["color1", __("Color 1"), "#cccccc", "left"],
+ ["color2", __("Color 2"), "#1f91f3", "right"],
+ ];
-
+ return (
+
+
90 ? 90 - value.direction + 360 : 90 - value.direction) +
+ "deg," +
+ value.color1 +
+ " " +
+ value.start +
+ "%, " +
+ value.color2 +
+ " " +
+ value.stop +
+ "%" +
+ ")",
+ background:
+ "linear-gradient(" +
+ value.direction +
+ "deg," +
+ value.color1 +
+ " " +
+ value.start +
+ "%, " +
+ value.color2 +
+ " " +
+ value.stop +
+ "%" +
+ ")",
+ }}
+ >
+ {gradientColors.map((gradientColor, i) => {
+ let [color, label, defaultColor, customClassName] = gradientColor;
+ return (
+
(
+
+
+
+
+ )}
+ renderContent={() => this.renderColorPicker(color, defaultColor)}
+ />
+ );
+ })}
+
-
-
{__('Gradient Type')}
-
- {
- ['linear', 'radial'].map((data, index) => {
- return (
- this.setSettings(data, 'type')}>
- {data == 'linear' ?
-
- {(value.type == 'linear') ?
-
- :
-
- {(value.type == 'radial') ?
-
- }
-
- )
- })
- }
-
-
+
+
{__("Gradient Type")}
+
+ {["linear", "radial"].map((data, index) => {
+ return (
+ this.setSettings(data, "type")}
+ >
+ {data == "linear" ? (
+
+ {value.type == "linear" ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ )}
+
+ ) : (
+
+ {value.type == "radial" ? (
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ )}
+
+ )}
+
+ );
+ })}
+
+
- {value.type == 'radial' ?
-
this.setSettings(radial, 'radial')}
- />
- :
- this.setSettings(direction, 'direction')}
- />
- }
- this.setSettings(start, 'start')}
- min={0}
- max={100}
- step={1}
- beforeIcon="arrow-up-alt"
- allowReset
- />
- this.setSettings(stop, 'stop')}
- min={0}
- max={100}
- step={1}
- beforeIcon="arrow-down-alt"
- allowReset
- />
-
- )
- }
+ {value.type == "radial" ? (
+
this.setSettings(radial, "radial")}
+ />
+ ) : (
+ this.setSettings(direction, "direction")}
+ />
+ )}
+ this.setSettings(start, "start")}
+ min={0}
+ max={100}
+ step={1}
+ beforeIcon="arrow-up-alt"
+ allowReset
+ />
+ this.setSettings(stop, "stop")}
+ min={0}
+ max={100}
+ step={1}
+ beforeIcon="arrow-down-alt"
+ allowReset
+ />
+
- {this.props.label &&
-
{this.props.label}
- }
-
- {
- [1, 2, 3, 4, 5, 6].map((data, index) => {
- return (
- onChange(data)}>
- {icons['h' + data]}
-
- )
- })
- }
-
+function Headings(props) {
+ const { selectedLevel, onChange, label = '' } = props;
+ return (
+
+ {label &&
{label} }
+
+ {[1, 2, 3, 4, 5, 6].map((data, index) => {
+ return (
+ onChange(data)}
+ >
+ {icons['h' + data]}
+
+ );
+ })}
- );
- }
+
+ );
}
-export default Headings
\ No newline at end of file
+export default Headings;
diff --git a/assets/reactjs/src/components/fields/IconList.js b/assets/reactjs/src/components/fields/IconList.js
index 8ec73eda..f73cd8f5 100644
--- a/assets/reactjs/src/components/fields/IconList.js
+++ b/assets/reactjs/src/components/fields/IconList.js
@@ -1,57 +1,85 @@
-import '../css/iconlist.scss'
-const { __ } = wp.i18n
-const { Component, Fragment } = wp.element
-import Toggle from './Toggle'
-import Color from './Color'
-import IconListData from './assets/IconListData'
+import "../css/iconlist.scss";
+const { __ } = wp.i18n;
+const { Component, Fragment } = wp.element;
+import Toggle from "./Toggle";
+import Color from "./Color";
+import IconListData from "./assets/IconListData";
class IconList extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isOpen: false,
+ filterText: "",
+ showIcons: false,
+ };
+ }
- constructor(props) {
- super(props)
- this.state = {
- isOpen: false,
- filterText: '',
- showIcons: false
- }
- }
+ render() {
+ const { value, disableToggle, colorSettings, iconColor, onColorChange } = this.props;
+ const { filterText } = this.state;
+ var finalData = [];
+ if (filterText.length > 2) {
+ IconListData.forEach((name) => {
+ if (name.includes(filterText)) {
+ finalData.push(name);
+ }
+ });
+ } else {
+ finalData = IconListData;
+ }
+ return (
+
+ {this.props.label && (
+
+ {!disableToggle ? (
+ this.props.onChange(this.props.value ? "" : " ")}
+ />
+ ) : (
+ {this.props.label}
+ )}
+
+ )}
+ {colorSettings && (
+
onColorChange(color)}
+ />
+ )}
- render() {
- const { value, disableToggle, colorSettings, iconColor, onColorChange } = this.props
- const { filterText } = this.state
- var finalData = [];
- if (filterText.length > 2) {
- IconListData.forEach(name => {
- if (name.includes(filterText)) {
- finalData.push(name)
- }
- })
- } else {
- finalData = IconListData;
- }
- return (
-
- {this.props.label &&
-
- {!disableToggle ?
- this.props.onChange(this.props.value ? '' : ' ')} />
- :
- {this.props.label}
- }
-
- }
- {colorSettings &&
onColorChange(color)} />}
-
- {(disableToggle || this.props.value != '') &&
-
-
this.setState({ filterText: e.target.value })} autoComplete="off" />
-
- {finalData.map((name, i) => { return ( { this.props.onChange(name) }}> ) })}
-
-
+
this.setState({ filterText: e.target.value })}
+ autoComplete="off"
+ />
+
+ {finalData.map((name, i) => {
+ return (
+ {
+ this.props.onChange(name);
+ }}
+ >
+
+ );
+ })}
+
+
+ );
+ }
}
-export default IconList
\ No newline at end of file
+export default IconList;
diff --git a/assets/reactjs/src/components/fields/IconSelector.js b/assets/reactjs/src/components/fields/IconSelector.js
index 88ec2e5e..e38a98e5 100644
--- a/assets/reactjs/src/components/fields/IconSelector.js
+++ b/assets/reactjs/src/components/fields/IconSelector.js
@@ -1,44 +1,51 @@
-const { Component } = wp.element
+const { Component } = wp.element;
class IconSelector extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { filterText: "" };
+ }
- constructor(props) {
- super(props)
- this.state = { filterText: '' }
- }
+ render() {
+ const { value, label, icons, enableSearch, onChange } = this.props;
+ const { filterText } = this.state;
+ let finalData = [];
+ if (enableSearch && filterText.length >= 2) {
+ finalData = icons.filter((item) => item.name.toLowerCase().search(filterText.toLowerCase()) !== -1);
+ } else {
+ finalData = icons;
+ }
+ return (
+
+ {label &&
{label} }
- render() {
- const { value, label, icons, enableSearch, onChange } = this.props
- const { filterText } = this.state
- let finalData = []
- if (enableSearch && filterText.length >= 2) {
- finalData = icons.filter(item =>
- item.name.toLowerCase().search(filterText.toLowerCase()) !== -1
- )
- } else {
- finalData = icons
- }
- return (
-
+
+ {enableSearch && (
+
this.setState({ filterText: e.target.value })}
+ autoComplete="off"
+ />
+ )}
- {label &&
{label} }
-
-
-
- {enableSearch &&
this.setState({ filterText: e.target.value })} autoComplete="off" />}
-
-
- {finalData.map((item, i) => {
- return (
- onChange(item)}>
-
- )
- })}
-
-
-
- )
- }
+
+ {finalData.map((item, i) => {
+ return (
+ onChange(item)}
+ >
+
+ );
+ })}
+
+
+
+ );
+ }
}
-export default IconSelector
\ No newline at end of file
+export default IconSelector;
diff --git a/assets/reactjs/src/components/fields/InnerPanel.js b/assets/reactjs/src/components/fields/InnerPanel.js
index faa96e75..6f7104d6 100644
--- a/assets/reactjs/src/components/fields/InnerPanel.js
+++ b/assets/reactjs/src/components/fields/InnerPanel.js
@@ -1,30 +1,33 @@
-import '../css/InnerPanel.scss'
-const { Component } = wp.element
+import "../css/InnerPanel.scss";
+const { Component } = wp.element;
class InnerPanel extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { show: false };
+ }
- constructor(props) {
- super(props)
- this.state = { show: false }
- }
+ render() {
+ const { children, onTabChange } = this.props;
- render() {
- const { children, onTabChange } = this.props
-
- return (
-
- { this.props.title &&
-
this.setState({ show: !this.state.show })} role="button">
- {this.props.title}
-
- }
- {this.state.show &&
-
- {Array.isArray(children) ? children.map(item => item) : children}
-
- }
-
- )
- }
+ return (
+
+ {this.props.title && (
+
this.setState({ show: !this.state.show })}
+ role="button"
+ >
+ {this.props.title}
+
+ )}
+ {this.state.show && (
+
+ {Array.isArray(children) ? children.map((item) => item) : children}
+
+ )}
+
+ );
+ }
}
-export default InnerPanel
\ No newline at end of file
+export default InnerPanel;
diff --git a/assets/reactjs/src/components/fields/Interaction.js b/assets/reactjs/src/components/fields/Interaction.js
index fb18bf62..a6455b55 100644
--- a/assets/reactjs/src/components/fields/Interaction.js
+++ b/assets/reactjs/src/components/fields/Interaction.js
@@ -1,250 +1,353 @@
-const { __ } = wp.i18n
-const { Component, Fragment } = wp.element
-import '../css/interaction.scss'
-import Toggle from './Toggle';
-import Range from './Range';
-import ButtonGroup from './ButtonGroup';
-import Timeline from '../InteractionFields/Timeline';
-import { defaultInteraction } from '../InteractionFields/InteractionData';
-import { MouseTilt } from '../InteractionFields/InteractionParser'
-import { _equal } from '../HelperFunction';
-import deepCopy from 'deep-copy';
+const { __ } = wp.i18n;
+const { Component, Fragment } = wp.element;
+import "../css/interaction.scss";
+import Toggle from "./Toggle";
+import Range from "./Range";
+import ButtonGroup from "./ButtonGroup";
+import Timeline from "../InteractionFields/Timeline";
+import { defaultInteraction } from "../InteractionFields/InteractionData";
+import { MouseTilt } from "../InteractionFields/InteractionParser";
+import { _equal } from "../HelperFunction";
+import deepCopy from "deep-copy";
class Interaction extends Component {
+ constructor() {
+ super();
+ this.state = {
+ liveMouseTilt: false,
+ isTransformOrigin: false,
+ };
+ }
- constructor() {
- super()
- this.state = {
- liveMouseTilt: false,
- isTransformOrigin: false
- }
- }
-
- componentWillMount() {
- this.props.onChange(Object.assign({}, deepCopy(defaultInteraction), (this.props.value || {})));
- }
-
- componentWillUnmount() {
- const block = $(`.qubely-block-${this.props.uniqueId}`)
- if (block.hasClass('qubely-block-interaction')) {
- block.removeClass('qubely-block-interaction').removeAttr('style')
- }
- if (this.v) {
- this.v.destroy()
- delete this.v
- }
- }
-
- _saveAttributes(parentKey = '', key, val) {
- const { value, uniqueId } = this.props
- value[parentKey][key] = val
- const data = Object.assign({}, this.props.value, value)
- this.props.onChange(data)
-
- if (parentKey === 'mouse_movement') {
- const { mouse_movement } = value
- if (typeof mouse_movement.enable !== 'undefined') {
- if (mouse_movement.enable === false) {
- if (this.v) {
- this.v.destroy()
- delete this.v
- }
- if (this.state.liveMouseTilt) {
- this.setState({ liveMouseTilt: false })
- }
- }
- if (mouse_movement.enable && this.state.liveMouseTilt) {
- setTimeout(() => {
- let block = document.getElementsByClassName(`qubely-block-${uniqueId}`)
- if (block.length > 0) {
- block = block[0]
- this.updateTiltAnimate(mouse_movement, block)
- }
- }, 500)
- }
- }
- }
- }
-
- componentWillReceiveProps(nextProps) {
- let { value: { while_scroll_into_view, mouse_movement }, uniqueId } = nextProps;
- if (typeof while_scroll_into_view.enable !== 'undefined' && while_scroll_into_view.enable === false) {
- const block = $(`.qubely-block-${uniqueId}`)
- if (block.hasClass('qubely-block-interaction')) {
- block.removeClass('qubely-block-interaction').removeAttr('style')
- }
- }
- }
-
- updateTiltAnimate(mouse_movement, blockElement) {
- let opt = {
- speed: parseFloat(mouse_movement.mouse_tilt_speed) * 100,
- max: parseFloat(mouse_movement.mouse_tilt_max),
- reverse: mouse_movement.mouse_tilt_direction === 'opposite'
- }
- if (!this.v) {
- this.v = new MouseTilt(blockElement, opt)
- } else {
- this.v.destroy()
- this.v = new MouseTilt(blockElement, opt)
- }
- }
-
- enableTiltAnimation() {
- let { value: { mouse_movement }, uniqueId } = this.props;
- let { liveMouseTilt } = this.state
- if (liveMouseTilt === false) {
- setTimeout(() => {
- let block = document.getElementsByClassName(`qubely-block-${uniqueId}`)
- if (block.length > 0) {
- block = block[0]
- this.updateTiltAnimate(mouse_movement, block)
- }
- }, 500)
- } else {
- if (this.v) {
- this.v.destroy()
- delete this.v
- }
- }
- this.setState({ liveMouseTilt: !liveMouseTilt })
- }
-
- selectAction(action) {
- const extract = { blur: true, opacity: true }
- let { isTransformOrigin } = this.state
- isTransformOrigin = extract[action.name] ? false : true
- this.setState({ isTransformOrigin })
- }
-
- render() {
- const { value } = this.props;
- const { while_scroll_into_view, mouse_movement } = value
- let transform_origin = { x_offset: 'center', y_offset: 'center' }
- if (typeof while_scroll_into_view !== 'undefined') {
- transform_origin.x_offset = typeof while_scroll_into_view.transform_origin_x === 'undefined' ? 'center' : while_scroll_into_view.transform_origin_x
- transform_origin.y_offset = typeof while_scroll_into_view.transform_origin_y === 'undefined' ? 'center' : while_scroll_into_view.transform_origin_y
- }
- return (
-
- {typeof while_scroll_into_view !== 'undefined' &&
-
-
- {!qubely_admin.pro_enable ?
-
-
-
-
-
- {__('Upgrade to Pro')}
- {__('Get all features of post grid at your disposal by upgrading to pro version')}
-
-
{__('Upgrade Now')}
-
- :
-
- this._saveAttributes('while_scroll_into_view', 'enable', !while_scroll_into_view.enable)} />
- {while_scroll_into_view.enable &&
-
- this._saveAttributes('while_scroll_into_view', 'action_list', actionList)}
- selectAction={this.selectAction.bind(this)}
- actionList={while_scroll_into_view.action_list}
- enable={while_scroll_into_view.enable}
- transformOrigin={transform_origin}
- />
- {this.state.isTransformOrigin &&
-
-
{__('Transform Origin')}
-
this._saveAttributes('while_scroll_into_view', 'transform_origin_x', value)}
- />
-
- this._saveAttributes('while_scroll_into_view', 'transform_origin_y', value)}
- />
-
- this._saveAttributes('while_scroll_into_view', 'enable_tablet', !while_scroll_into_view.enable_tablet)} />
- this._saveAttributes('while_scroll_into_view', 'enable_mobile', !while_scroll_into_view.enable_mobile)} />
-
- }
-
- }
-
-
-
-
- this._saveAttributes('mouse_movement', 'enable', !mouse_movement.enable)} />
- {mouse_movement.enable &&
-
- this._saveAttributes('mouse_movement', 'mouse_tilt_direction', value)} />
-
- this._saveAttributes('mouse_movement', 'mouse_tilt_speed', value)}
- min={1}
- max={10}
- step={0.5}
- />
- this._saveAttributes('mouse_movement', 'mouse_tilt_max', value)}
- min={5}
- max={75}
- step={5}
- />
-
- this._saveAttributes('mouse_movement', 'enable_tablet', !mouse_movement.enable_tablet)} />
-
- this._saveAttributes('mouse_movement', 'enable_mobile', !mouse_movement.enable_mobile)} />
-
- this.enableTiltAnimation()} className="components-button is-button is-default is-primary is-large"> {this.state.liveMouseTilt ? "Stop" : "Live"}
-
-
- }
-
-
- )
- }
+ componentWillMount() {
+ this.props.onChange(Object.assign({}, deepCopy(defaultInteraction), this.props.value || {}));
+ }
+
+ componentWillUnmount() {
+ const block = $(`.qubely-block-${this.props.uniqueId}`);
+ if (block.hasClass("qubely-block-interaction")) {
+ block.removeClass("qubely-block-interaction").removeAttr("style");
+ }
+ if (this.v) {
+ this.v.destroy();
+ delete this.v;
+ }
+ }
+
+ _saveAttributes(parentKey = "", key, val) {
+ const { value, uniqueId } = this.props;
+ value[parentKey][key] = val;
+ const data = Object.assign({}, this.props.value, value);
+ this.props.onChange(data);
+
+ if (parentKey === "mouse_movement") {
+ const { mouse_movement } = value;
+ if (typeof mouse_movement.enable !== "undefined") {
+ if (mouse_movement.enable === false) {
+ if (this.v) {
+ this.v.destroy();
+ delete this.v;
+ }
+ if (this.state.liveMouseTilt) {
+ this.setState({ liveMouseTilt: false });
+ }
+ }
+ if (mouse_movement.enable && this.state.liveMouseTilt) {
+ setTimeout(() => {
+ let block = document.getElementsByClassName(`qubely-block-${uniqueId}`);
+ if (block.length > 0) {
+ block = block[0];
+ this.updateTiltAnimate(mouse_movement, block);
+ }
+ }, 500);
+ }
+ }
+ }
+ }
+
+ componentWillReceiveProps(nextProps) {
+ let {
+ value: { while_scroll_into_view, mouse_movement },
+ uniqueId,
+ } = nextProps;
+ if (typeof while_scroll_into_view.enable !== "undefined" && while_scroll_into_view.enable === false) {
+ const block = $(`.qubely-block-${uniqueId}`);
+ if (block.hasClass("qubely-block-interaction")) {
+ block.removeClass("qubely-block-interaction").removeAttr("style");
+ }
+ }
+ }
+
+ updateTiltAnimate(mouse_movement, blockElement) {
+ let opt = {
+ speed: parseFloat(mouse_movement.mouse_tilt_speed) * 100,
+ max: parseFloat(mouse_movement.mouse_tilt_max),
+ reverse: mouse_movement.mouse_tilt_direction === "opposite",
+ };
+ if (!this.v) {
+ this.v = new MouseTilt(blockElement, opt);
+ } else {
+ this.v.destroy();
+ this.v = new MouseTilt(blockElement, opt);
+ }
+ }
+
+ enableTiltAnimation() {
+ let {
+ value: { mouse_movement },
+ uniqueId,
+ } = this.props;
+ let { liveMouseTilt } = this.state;
+ if (liveMouseTilt === false) {
+ setTimeout(() => {
+ let block = document.getElementsByClassName(`qubely-block-${uniqueId}`);
+ if (block.length > 0) {
+ block = block[0];
+ this.updateTiltAnimate(mouse_movement, block);
+ }
+ }, 500);
+ } else {
+ if (this.v) {
+ this.v.destroy();
+ delete this.v;
+ }
+ }
+ this.setState({ liveMouseTilt: !liveMouseTilt });
+ }
+
+ selectAction(action) {
+ const extract = { blur: true, opacity: true };
+ let { isTransformOrigin } = this.state;
+ isTransformOrigin = extract[action.name] ? false : true;
+ this.setState({ isTransformOrigin });
+ }
+
+ render() {
+ const { value } = this.props;
+ const { while_scroll_into_view, mouse_movement } = value;
+ let transform_origin = { x_offset: "center", y_offset: "center" };
+ if (typeof while_scroll_into_view !== "undefined") {
+ transform_origin.x_offset =
+ typeof while_scroll_into_view.transform_origin_x === "undefined"
+ ? "center"
+ : while_scroll_into_view.transform_origin_x;
+ transform_origin.y_offset =
+ typeof while_scroll_into_view.transform_origin_y === "undefined"
+ ? "center"
+ : while_scroll_into_view.transform_origin_y;
+ }
+ return (
+
+ {typeof while_scroll_into_view !== "undefined" && (
+
+
+ {!qubely_admin.pro_enable ? (
+
+
+
+
+
+ {__("Upgrade to Pro")}
+
+ {__(
+ "Get all features of post grid at your disposal by upgrading to pro version"
+ )}
+
+
+
+ {__("Upgrade Now")}
+
+
+ ) : (
+
+
+ this._saveAttributes(
+ "while_scroll_into_view",
+ "enable",
+ !while_scroll_into_view.enable
+ )
+ }
+ />
+ {while_scroll_into_view.enable && (
+
+
+ this._saveAttributes(
+ "while_scroll_into_view",
+ "action_list",
+ actionList
+ )
+ }
+ selectAction={this.selectAction.bind(this)}
+ actionList={while_scroll_into_view.action_list}
+ enable={while_scroll_into_view.enable}
+ transformOrigin={transform_origin}
+ />
+ {this.state.isTransformOrigin && (
+
+
+ {__("Transform Origin")}
+
+
+ this._saveAttributes(
+ "while_scroll_into_view",
+ "transform_origin_x",
+ value
+ )
+ }
+ />
+
+
+ this._saveAttributes(
+ "while_scroll_into_view",
+ "transform_origin_y",
+ value
+ )
+ }
+ />
+
+ this._saveAttributes(
+ "while_scroll_into_view",
+ "enable_tablet",
+ !while_scroll_into_view.enable_tablet
+ )
+ }
+ />
+
+ this._saveAttributes(
+ "while_scroll_into_view",
+ "enable_mobile",
+ !while_scroll_into_view.enable_mobile
+ )
+ }
+ />
+
+ )}
+
+ )}
+
+
+
+
+ this._saveAttributes("mouse_movement", "enable", !mouse_movement.enable)
+ }
+ />
+ {mouse_movement.enable && (
+
+
+ this._saveAttributes("mouse_movement", "mouse_tilt_direction", value)
+ }
+ />
+
+
+ this._saveAttributes("mouse_movement", "mouse_tilt_speed", value)
+ }
+ min={1}
+ max={10}
+ step={0.5}
+ />
+
+ this._saveAttributes("mouse_movement", "mouse_tilt_max", value)
+ }
+ min={5}
+ max={75}
+ step={5}
+ />
+
+
+ this._saveAttributes(
+ "mouse_movement",
+ "enable_tablet",
+ !mouse_movement.enable_tablet
+ )
+ }
+ />
+
+
+ this._saveAttributes(
+ "mouse_movement",
+ "enable_mobile",
+ !mouse_movement.enable_mobile
+ )
+ }
+ />
+
+ this.enableTiltAnimation()}
+ className="components-button is-button is-default is-primary is-large"
+ >
+ {" "}
+ {this.state.liveMouseTilt ? "Stop" : "Live"}{" "}
+
+
+ )}
+
+
+ );
+ }
}
-export default Interaction;
\ No newline at end of file
+export default Interaction;
diff --git a/assets/reactjs/src/components/fields/ListSettings.js b/assets/reactjs/src/components/fields/ListSettings.js
index d68b5017..91528f40 100644
--- a/assets/reactjs/src/components/fields/ListSettings.js
+++ b/assets/reactjs/src/components/fields/ListSettings.js
@@ -1,266 +1,305 @@
/* eslint-disable react/react-in-jsx-scope */
-const { __ } = wp.i18n
-const { Fragment } = wp.element
-const { PanelBody } = wp.components
+const { __ } = wp.i18n;
+const { Fragment } = wp.element;
+const { PanelBody } = wp.components;
-import Alignment from './Alignment'
-import Color from './Color'
-import IconList from './IconList'
-import Typography from './Typography'
-import Range from './Range'
-import Toggle from './Toggle'
-import RadioAdvanced from './RadioAdvanced'
-import Padding from './Padding'
-import Separator from './Separator'
-
-
-//attributes
+import Alignment from "./Alignment";
+import Color from "./Color";
+import IconList from "./IconList";
+import Typography from "./Typography";
+import Range from "./Range";
+import Toggle from "./Toggle";
+import RadioAdvanced from "./RadioAdvanced";
+import Padding from "./Padding";
+import Separator from "./Separator";
+//attributes
export const listAttributes = {
- enableListAlignment: { type: 'boolean', default: false },
- listAlignment: {
- type: 'string',
- default: 'center',
- style: [
- {
- condition: [
- { key: 'enableListAlignment', relation: '==', value: true },
- ],
- selector:
- '{{QUBELY}} .qubely-list {text-align:{{listAlignment}};}',
- },
- ],
- },
+ enableListAlignment: { type: "boolean", default: false },
+ listAlignment: {
+ type: "string",
+ default: "center",
+ style: [
+ {
+ condition: [{ key: "enableListAlignment", relation: "==", value: true }],
+ selector: "{{QUBELY}} .qubely-list {text-align:{{listAlignment}};}",
+ },
+ ],
+ },
- listItems: {
- type: 'array',
- default: [
- {
- icon: 'far fa-star',
- text: 'Add beautiful icons and text to this block',
- },
- {
- icon: 'far fa-heart',
- text: 'Set icon color for normal and hover state',
- },
- {
- icon: 'fas fa-check',
- text: 'Manage space between icon and the text',
- },
- {
- icon: 'fas fa-burn',
- text: 'Choose a desired layout from the list',
- },
- ],
- },
+ listItems: {
+ type: "array",
+ default: [
+ {
+ icon: "far fa-star",
+ text: "Add beautiful icons and text to this block",
+ },
+ {
+ icon: "far fa-heart",
+ text: "Set icon color for normal and hover state",
+ },
+ {
+ icon: "fas fa-check",
+ text: "Manage space between icon and the text",
+ },
+ {
+ icon: "fas fa-burn",
+ text: "Choose a desired layout from the list",
+ },
+ ],
+ },
- spacer: {
- type: 'object',
- default: {
- spaceTop: { md: '10', unit: 'px' },
- spaceBottom: { md: '10', unit: 'px' },
- },
- style: [{ selector: '{{QUBELY}}' }],
- },
+ spacer: {
+ type: "object",
+ default: {
+ spaceTop: { md: "10", unit: "px" },
+ spaceBottom: { md: "10", unit: "px" },
+ },
+ style: [{ selector: "{{QUBELY}}" }],
+ },
- typography: {
- type: 'object',
- default: { openTypography: 1, size: { md: 16, unit: 'px' } },
- style: [{ selector: '{{QUBELY}} .qubely-list .qubely-list-li' }],
- },
- enableListIcons: { type: 'boolean', default: true },
- iconSize: {
- type: 'string',
- default: '16px',
- style: [
- {
- condition: [
- { key: 'iconSize', relation: '!=', value: 'custom' },
- ],
- selector:
- '{{QUBELY}} .qubely-list .qubely-list-item-icon {font-size: {{iconSize}};}',
- },
- ],
- },
- iconSizeCustom: {
- type: 'object',
- default: { md: 16, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'iconSize', relation: '==', value: 'custom' },
- ],
- selector:
- '{{QUBELY}} .qubely-list .qubely-list-item-icon {font-size: {{iconSizeCustom}};}',
- },
- ],
- },
- iconPosition: { type: 'string', default: 'left' },
- iconSpacing: {
- type: 'object',
- default: { md: 10, unit: 'px' },
- style: [
- {
- condition: [
- { key: 'iconPosition', relation: '==', value: 'left' },
- ],
- selector:
- '{{QUBELY}} .qubely-list .qubely-list-item-icon {margin-right: {{iconSpacing}};}',
- },
- {
- condition: [
- { key: 'iconPosition', relation: '==', value: 'right' },
- ],
- selector:
- '{{QUBELY}} .qubely-list .qubely-list-item-icon {margin-left: {{iconSpacing}};}',
- },
- ],
- },
+ typography: {
+ type: "object",
+ default: { openTypography: 1, size: { md: 16, unit: "px" } },
+ style: [{ selector: "{{QUBELY}} .qubely-list .qubely-list-li" }],
+ },
+ enableListIcons: { type: "boolean", default: true },
+ iconSize: {
+ type: "string",
+ default: "16px",
+ style: [
+ {
+ condition: [{ key: "iconSize", relation: "!=", value: "custom" }],
+ selector: "{{QUBELY}} .qubely-list .qubely-list-item-icon {font-size: {{iconSize}};}",
+ },
+ ],
+ },
+ iconSizeCustom: {
+ type: "object",
+ default: { md: 16, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "iconSize", relation: "==", value: "custom" }],
+ selector: "{{QUBELY}} .qubely-list .qubely-list-item-icon {font-size: {{iconSizeCustom}};}",
+ },
+ ],
+ },
+ iconPosition: { type: "string", default: "left" },
+ iconSpacing: {
+ type: "object",
+ default: { md: 10, unit: "px" },
+ style: [
+ {
+ condition: [{ key: "iconPosition", relation: "==", value: "left" }],
+ selector: "{{QUBELY}} .qubely-list .qubely-list-item-icon {margin-right: {{iconSpacing}};}",
+ },
+ {
+ condition: [{ key: "iconPosition", relation: "==", value: "right" }],
+ selector: "{{QUBELY}} .qubely-list .qubely-list-item-icon {margin-left: {{iconSpacing}};}",
+ },
+ ],
+ },
- iconColor: {
- type: 'string',
- default: 'var(--qubely-color-1)',
- style: [
- {
- selector:
- '{{QUBELY}} .qubely-list .qubely-list-li .qubely-list-item-icon {color: {{iconColor}};}',
- },
- ],
- },
+ iconColor: {
+ type: "string",
+ default: "var(--qubely-color-1)",
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-list .qubely-list-li .qubely-list-item-icon {color: {{iconColor}};}",
+ },
+ ],
+ },
- color: {
- type: 'string',
- default: '#333',
- style: [
- {
- selector:
- '{{QUBELY}} .qubely-list .qubely-list-li .qubely-text{color: {{color}};}',
- },
- ],
- },
- spacing: {
- type: 'string',
- default: '5',
- style: [
- {
- selector:
- '{{QUBELY}} .qubely-list .qubely-list-li:not(:last-child) {margin-bottom: {{spacing}}px;}',
- },
- ],
- },
- featuresPadding: {
- type: 'object',
- default: {
- paddingType: 'global',
- },
- style: [
- {
- selector: '{{QUBELY}} .qubely-pricing-features',
- },
- ],
- },
- };
+ color: {
+ type: "string",
+ default: "#333",
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-list .qubely-list-li .qubely-text{color: {{color}};}",
+ },
+ ],
+ },
+ spacing: {
+ type: "string",
+ default: "5",
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-list .qubely-list-li:not(:last-child) {margin-bottom: {{spacing}}px;}",
+ },
+ ],
+ },
+ featuresPadding: {
+ type: "object",
+ default: {
+ paddingType: "global",
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} .qubely-pricing-features",
+ },
+ ],
+ },
+};
export function listSettings(attributes, device, setAttributes) {
+ const {
+ listItems,
+ enableListIcons,
+ clickedListItem,
+ iconSize,
+ iconSizeCustom,
+ iconSpacing,
+ iconPosition,
+ color,
+ typography,
+ enableListAlignment,
+ listAlignment,
+ iconColor,
+ spacing,
+ featuresPadding,
+ controlledFeaturesPanel,
+ showFeaturesPanel,
+ } = attributes;
- const {
- listItems,
- enableListIcons,
- clickedListItem,
- iconSize,
- iconSizeCustom,
- iconSpacing,
- iconPosition,
- color,
- typography,
- enableListAlignment,
- listAlignment,
- iconColor,
- spacing,
- featuresPadding,
- controlledFeaturesPanel,
- showFeaturesPanel
- } = attributes
-
- const modifySpecificItem = (value, index) => {
- const modifiedListItems = listItems.map((listItem, currentIndex) => {
- if (index === currentIndex) {
- listItem = { ...listItem, ...value }
- }
- return listItem
- })
- setAttributes({ listItems: modifiedListItems })
- }
-
- const renderListControls = () => {
+ const modifySpecificItem = (value, index) => {
+ const modifiedListItems = listItems.map((listItem, currentIndex) => {
+ if (index === currentIndex) {
+ listItem = { ...listItem, ...value };
+ }
+ return listItem;
+ });
+ setAttributes({ listItems: modifiedListItems });
+ };
- return (
-
- setAttributes({ enableListAlignment: val })} />
- {enableListAlignment && setAttributes({ listAlignment: val })} disableJustify />}
- setAttributes({ color: val })} />
- setAttributes({ typography: val })} />
- setAttributes({ spacing: val })} min={0} max={60} />
- setAttributes({ featuresPadding: val })} />
- setAttributes({ enableListIcons: val })} />
- {enableListIcons &&
-
- 0 && listItems[clickedListItem] && listItems[clickedListItem].icon}
- onChange={(value) => modifySpecificItem({ icon: value }, clickedListItem)}
- colorSettings
- iconColor={listItems.length > 0 && listItems[clickedListItem] && (listItems[clickedListItem].customColor || '#5D7FEB')}
- onColorChange={(color) => modifySpecificItem({ customColor: color }, clickedListItem)}
- />
- setAttributes({ iconColor: value })} />
- setAttributes({ iconSize: val })}
- options={[
- { label: 'S', value: '12px', title: __('Small') },
- { label: 'M', value: '16px', title: __('Medium') },
- { label: 'L', value: '20px', title: __('Large') },
- { label: 'XL', value: '28px', title: __('Extra Large') },
- { icon: 'fas fa-cog', value: 'custom', title: __('Custom') }
- ]}
- />
- {iconSize == 'custom' &&
- setAttributes({ iconSizeCustom: value })} min={0} max={100} unit={['px', 'em', '%']} responsive />
- }
- setAttributes({ iconPosition: val })}
- options={[
- { label: 'Left', value: 'left', title: __('Left') },
- { label: 'Right', value: 'right', title: __('Right') }
- ]}
- />
- setAttributes({ iconSpacing: val })} min={0} max={60} unit={['px', 'em', '%']} responsive />
-
- }
-
- )
- }
+ const renderListControls = () => {
+ return (
+
+ setAttributes({ enableListAlignment: val })}
+ />
+ {enableListAlignment && (
+ setAttributes({ listAlignment: val })}
+ disableJustify
+ />
+ )}
+ setAttributes({ color: val })} />
+ setAttributes({ typography: val })}
+ />
+ setAttributes({ spacing: val })}
+ min={0}
+ max={60}
+ />
+ setAttributes({ featuresPadding: val })}
+ />
+ setAttributes({ enableListIcons: val })}
+ />
+ {enableListIcons && (
+
+ 0 && listItems[clickedListItem] && listItems[clickedListItem].icon
+ }
+ onChange={(value) => modifySpecificItem({ icon: value }, clickedListItem)}
+ colorSettings
+ iconColor={
+ listItems.length > 0 &&
+ listItems[clickedListItem] &&
+ (listItems[clickedListItem].customColor || "#5D7FEB")
+ }
+ onColorChange={(color) => modifySpecificItem({ customColor: color }, clickedListItem)}
+ />
+ setAttributes({ iconColor: value })}
+ />
+ setAttributes({ iconSize: val })}
+ options={[
+ { label: "S", value: "12px", title: __("Small") },
+ { label: "M", value: "16px", title: __("Medium") },
+ { label: "L", value: "20px", title: __("Large") },
+ { label: "XL", value: "28px", title: __("Extra Large") },
+ { icon: "fas fa-cog", value: "custom", title: __("Custom") },
+ ]}
+ />
+ {iconSize == "custom" && (
+ setAttributes({ iconSizeCustom: value })}
+ min={0}
+ max={100}
+ unit={["px", "em", "%"]}
+ responsive
+ />
+ )}
+ setAttributes({ iconPosition: val })}
+ options={[
+ { label: "Left", value: "left", title: __("Left") },
+ { label: "Right", value: "right", title: __("Right") },
+ ]}
+ />
+ setAttributes({ iconSpacing: val })}
+ min={0}
+ max={60}
+ unit={["px", "em", "%"]}
+ responsive
+ />
+
+ )}
+
+ );
+ };
- return (
-
- {
- controlledFeaturesPanel ?
- setAttributes({ showFeaturesPanel: !showFeaturesPanel })}>
- {renderListControls()}
-
- :
-
- {renderListControls()}
-
- }
-
- )
+ return (
+
+ {controlledFeaturesPanel ? (
+ setAttributes({ showFeaturesPanel: !showFeaturesPanel })}
+ >
+ {renderListControls()}
+
+ ) : (
+
+ {renderListControls()}
+
+ )}
+
+ );
}
diff --git a/assets/reactjs/src/components/fields/Margin.js b/assets/reactjs/src/components/fields/Margin.js
index 3475a7a1..13d3cfb5 100644
--- a/assets/reactjs/src/components/fields/Margin.js
+++ b/assets/reactjs/src/components/fields/Margin.js
@@ -1,149 +1,216 @@
-const { __ } = wp.i18n
-import Range from './Range'
-import Device from './Device'
-import icons from '../../helpers/icons'
+const { __ } = wp.i18n;
+import Range from "./Range";
+import Device from "./Device";
+import icons from "../../helpers/icons";
const { Fragment, Component } = wp.element;
const { Tooltip } = wp.components;
-const LABEL = 'Margin'
+const LABEL = "Margin";
class Margin extends Component {
- constructor(props) {
- super(props)
- this.state = {
- device: 'md',
- defaultUnit: 'px',
- defaultMarginType: 'global'
- }
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ defaultUnit: "px",
+ defaultMarginType: "global",
+ };
+ }
- updateMargin = (type, newValue) => {
- const { onChange, value, unit, responsive, responsiveGroup, device } = this.props
- const { defaultUnit, defaultMarginType } = this.state
- let responsiveDevice = responsive ? device ? device : this.state.device : window.qubelyDevice
+ updateMargin = (type, newValue) => {
+ const { onChange, value, unit, responsive, responsiveGroup, device } = this.props;
+ const { defaultUnit, defaultMarginType } = this.state;
+ let responsiveDevice = responsive ? (device ? device : this.state.device) : window.qubelyDevice;
- const [top, right, bottom, left] = responsive || responsiveGroup ? value.custom && value.custom[responsiveDevice] ? value.custom[responsiveDevice].split(" ") : ['', '', '', ''] : value.custom ? value.custom.split(" ") : ['', '', '', '']
- let newMargin = JSON.parse(JSON.stringify(value))
- let tempMargin = type === 'global' ? `${newValue}` : `${type == 'top' ? `${newValue}` : `${top}`} ${type == 'right' ? `${newValue}` : `${right}`} ${type == 'bottom' ? `${newValue}` : `${bottom}`} ${type == 'left' ? `${newValue}` : `${left}`}`
+ const [top, right, bottom, left] =
+ responsive || responsiveGroup
+ ? value.custom && value.custom[responsiveDevice]
+ ? value.custom[responsiveDevice].split(" ")
+ : ["", "", "", ""]
+ : value.custom
+ ? value.custom.split(" ")
+ : ["", "", "", ""];
+ let newMargin = JSON.parse(JSON.stringify(value));
+ let tempMargin =
+ type === "global"
+ ? `${newValue}`
+ : `${type == "top" ? `${newValue}` : `${top}`} ${type == "right" ? `${newValue}` : `${right}`} ${
+ type == "bottom" ? `${newValue}` : `${bottom}`
+ } ${type == "left" ? `${newValue}` : `${left}`}`;
+ if (type === "global") {
+ responsive || responsiveGroup
+ ? newMargin.global
+ ? (newMargin.global[responsiveDevice] = tempMargin)
+ : (newMargin.global = { [responsiveDevice]: tempMargin })
+ : (newMargin.global = tempMargin);
+ } else {
+ responsive || responsiveGroup
+ ? newMargin.custom
+ ? (newMargin.custom[responsiveDevice] = tempMargin)
+ : (newMargin.custom = { [responsiveDevice]: tempMargin })
+ : (newMargin.custom = tempMargin);
+ }
- if (type === 'global') {
- (responsive || responsiveGroup) ? newMargin.global ? newMargin.global[responsiveDevice] = tempMargin : newMargin.global = { [responsiveDevice]: tempMargin }
- :
- newMargin.global = tempMargin
+ unit && value.unit ? (newMargin.unit = value.unit) : (newMargin.unit = defaultUnit);
+ newMargin.marginType = value.marginType ? value.marginType : defaultMarginType;
+ newMargin.openMargin = 1;
+ onChange(newMargin);
+ };
+ updateMarginType = (newType) => {
+ const { onChange, value } = this.props;
+ let newMargin = JSON.parse(JSON.stringify(value));
+ newMargin.marginType = newType;
+ onChange(newMargin);
+ };
+ updateUnit = (newUnit) => {
+ const { onChange, value } = this.props;
+ let newMargin = JSON.parse(JSON.stringify(value));
+ newMargin.unit = newUnit;
+ newMargin.marginType = value.marginType ? value.marginType : this.state.defaultRadiusType;
+ newMargin.openMargin = value.openMargin ? value.openMargin : 1;
+ onChange(newMargin);
+ };
- } else {
- (responsive || responsiveGroup) ? newMargin.custom ? newMargin.custom[responsiveDevice] = tempMargin : newMargin.custom = { [responsiveDevice]: tempMargin }
- :
- newMargin.custom = tempMargin
- }
+ render() {
+ const { value, label, unit, min, max, responsive, device, onDeviceChange, responsiveGroup } = this.props;
+ const { defaultUnit, defaultMarginType } = this.state;
+ let responsiveDevice = responsive ? (device ? device : this.state.device) : window.qubelyDevice;
+ const values =
+ responsive || responsiveGroup
+ ? value.custom && value.custom[responsiveDevice]
+ ? value.custom[responsiveDevice].split(" ")
+ : ["", "", "", ""]
+ : value.custom
+ ? value.custom.split(" ")
+ : ["", "", "", ""];
- unit && value.unit ? newMargin.unit = value.unit : newMargin.unit = defaultUnit
- newMargin.marginType = value.marginType ? value.marginType : defaultMarginType
- newMargin.openMargin = 1
- onChange(newMargin)
- }
- updateMarginType = (newType) => {
- const { onChange, value } = this.props
- let newMargin = JSON.parse(JSON.stringify(value))
- newMargin.marginType = newType
- onChange(newMargin)
- }
- updateUnit = (newUnit) => {
- const { onChange, value } = this.props
- let newMargin = JSON.parse(JSON.stringify(value))
- newMargin.unit = newUnit
- newMargin.marginType = value.marginType ? value.marginType : this.state.defaultRadiusType
- newMargin.openMargin = value.openMargin ? value.openMargin : 1
- onChange(newMargin)
- }
+ const global =
+ responsive || responsiveGroup
+ ? value.global && value.global[responsiveDevice]
+ ? value.global[responsiveDevice]
+ : ""
+ : value.global
+ ? value.global
+ : "";
+ let iterator = ["top", "right", "bottom", "left"];
+ return (
+
+ {unit && (
+
+ {(typeof unit == "object" ? unit : ["px", "em", "%"]).map((unitName, i) => (
+ this.updateUnit(unitName)}
+ >
+ {unitName}
+
+ ))}
+
+ )}
+
+
{label ? label : LABEL}
+ {responsive && (
+
{
+ device ? onDeviceChange(val) : this.setState({ device: val });
+ }}
+ />
+ )}
- render() {
- const { value, label, unit, min, max, responsive, device, onDeviceChange, responsiveGroup } = this.props
- const { defaultUnit, defaultMarginType } = this.state
- let responsiveDevice = responsive ? device ? device : this.state.device : window.qubelyDevice
- const values = responsive || responsiveGroup ? value.custom && value.custom[responsiveDevice] ? value.custom[responsiveDevice].split(" ") : ['', '', '', ''] : value.custom ? value.custom.split(" ") : ['', '', '', '']
+
+ {[
+ ["global", __("Global")],
+ ["custom", __("Custom")],
+ ].map((data, index) => {
+ return (
+
+ this.updateMarginType(data[0])}
+ >
+ {data[0] == "global" ? (
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ );
+ })}
+
- const global = responsive || responsiveGroup ? value.global && value.global[responsiveDevice] ? value.global[responsiveDevice] : ''
- :
- value.global ? value.global : ''
- let iterator = ['top', 'right', 'bottom', 'left']
- return (
-
- {unit &&
-
- {(typeof unit == 'object' ? unit : ['px', 'em', '%']).map((unitName, i) => (
- this.updateUnit(unitName)}>
- {unitName}
-
- ))}
-
- }
-
-
-
{label ? label : LABEL}
- {responsive &&
{ device ? onDeviceChange(val) : this.setState({ device: val }) }} />}
-
-
- {
- [['global', __('Global')], ['custom', __('Custom')]].map((data, index) => {
- return (
-
- this.updateMarginType(data[0])}>
- {data[0] == 'global' ?
-
-
- )
- })
- }
-
-
- {
- (!value.marginType || value.marginType == 'global') ?
-
-
- this.updateMargin('global', val)}
- min={min}
- max={max}
- step={1}
- />
-
-
- :
-
- {
- iterator.map((item, index) => {
- return (
-
-
- {icons.spacing[item]}
-
-
- this.updateMargin(iterator[index], val)}
- min={min}
- max={max}
- step={1}
- />
-
-
- }
-
- )
- }
+ {!value.marginType || value.marginType == "global" ? (
+
+
+ this.updateMargin("global", val)}
+ min={min}
+ max={max}
+ step={1}
+ />
+
+
+ ) : (
+
+ {iterator.map((item, index) => {
+ return (
+
+
{icons.spacing[item]}
+
+ this.updateMargin(iterator[index], val)}
+ min={min}
+ max={max}
+ step={1}
+ />
+
+
+ )}
+
+ );
+ }
}
-export default Margin
\ No newline at end of file
+export default Margin;
diff --git a/assets/reactjs/src/components/fields/Media.js b/assets/reactjs/src/components/fields/Media.js
index 1f20b353..cd28b276 100644
--- a/assets/reactjs/src/components/fields/Media.js
+++ b/assets/reactjs/src/components/fields/Media.js
@@ -1,16 +1,15 @@
-const { __ } = wp.i18n
-import '../css/media.scss'
+const { __ } = wp.i18n;
+import "../css/media.scss";
const { Component } = wp.element;
const { MediaUpload } = wp.blockEditor;
export const { Tooltip, Dashicon } = wp.components;
class Media extends Component {
-
setSettings(media) {
- const { multiple, onChange, value } = this.props
+ const { multiple, onChange, value } = this.props;
if (multiple) {
let medias = [];
- media.forEach(single => {
+ media.forEach((single) => {
if (single && single.url) {
medias.push({ url: single.url, id: single.id });
}
@@ -24,96 +23,127 @@ class Media extends Component {
}
removeImage(id) {
- const { multiple, onChange } = this.props
+ const { multiple, onChange } = this.props;
if (multiple) {
- let value = (this.props.value).slice()
- value.splice(id, 1)
- onChange(value)
+ let value = this.props.value.slice();
+ value.splice(id, 1);
+ onChange(value);
} else {
- onChange({})
+ onChange({});
}
}
isUrl(url) {
- if (['wbm', 'jpg', 'jpeg', 'gif', 'png', 'svg'].indexOf(url.split('.').pop().toLowerCase()) != -1) {
+ if (["wbm", "jpg", "jpeg", "gif", "png", "svg"].indexOf(url.split(".").pop().toLowerCase()) != -1) {
return url;
} else {
- return qubely_admin.plugin + 'assets/img/qubely-medium.jpg';
+ return qubely_admin.plugin + "assets/img/qubely-medium.jpg";
}
}
-
render() {
const { type, multiple, value, panel, video } = this.props;
return (
-
- {this.props.label &&
-
{this.props.label}
- }
+
+ {this.props.label &&
{this.props.label} }
this.setSettings(val)}
- allowedTypes={type.length ? [...type] : ['image']}
+ onSelect={(val) => this.setSettings(val)}
+ allowedTypes={type.length ? [...type] : ["image"]}
multiple={multiple || false}
value={value}
render={({ open }) => (
- {multiple ?
+ {multiple ? (
- {(value.length > 0) &&
+ {value.length > 0 &&
value.map((v, index) => {
return (
-
-
-
-
+
+
-
- this.removeImage(index)} role="button">
-
+ this.removeImage(index)}
+ role="button"
+ >
+
- }
+ )}
- )
- })
- }
-
+ );
+ })}
+
- :
- ((value && value.url) ?
-
- {
- video ?
-
+ {video ? (
+
-
-
-
-
-
- this.removeImage(value.id)} role="button">
-
-
-
- }
-
- :
-
- )
- }
+ {panel && (
+
+
+
+
+
+
+ this.removeImage(value.id)}
+ role="button"
+ >
+
+
+
+ )}
+
+ ) : (
+
+ )}
)}
@@ -122,4 +152,4 @@ class Media extends Component {
);
}
}
-export default Media;
\ No newline at end of file
+export default Media;
diff --git a/assets/reactjs/src/components/fields/Padding.js b/assets/reactjs/src/components/fields/Padding.js
index 7784afc4..8072c130 100644
--- a/assets/reactjs/src/components/fields/Padding.js
+++ b/assets/reactjs/src/components/fields/Padding.js
@@ -1,148 +1,217 @@
-const { __ } = wp.i18n
-import Range from './Range'
-import Device from './Device'
-import icons from '../../helpers/icons'
-const { Fragment, Component } = wp.element
-const { Tooltip } = wp.components
+const { __ } = wp.i18n;
+import Range from "./Range";
+import Device from "./Device";
+import icons from "../../helpers/icons";
+const { Fragment, Component } = wp.element;
+const { Tooltip } = wp.components;
class Padding extends Component {
- constructor(props) {
- super(props)
- this.state = {
- device: 'md',
- defaultUnit: 'px',
- defaultPaddingType: 'global'
- }
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ device: "md",
+ defaultUnit: "px",
+ defaultPaddingType: "global",
+ };
+ }
- updatePadding = (type, newValue) => {
- const { onChange, value, unit, responsive, responsiveGroup, device } = this.props
- const { defaultUnit, defaultPaddingType } = this.state
- let responsiveDevice = responsive ? device ? device : this.state.device : window.qubelyDevice
+ updatePadding = (type, newValue) => {
+ const { onChange, value, unit, responsive, responsiveGroup, device } = this.props;
+ const { defaultUnit, defaultPaddingType } = this.state;
+ let responsiveDevice = responsive ? (device ? device : this.state.device) : window.qubelyDevice;
- const [top, right, bottom, left] = responsive || responsiveGroup ? value.custom && value.custom[responsiveDevice] ? value.custom[responsiveDevice].split(" ") : ['', '', '', ''] : value.custom ? value.custom.split(" ") : ['', '', '', '']
- let newPadding = JSON.parse(JSON.stringify(value))
- let tempPadding = type === 'global' ? `${newValue}` : `${type == 'top' ? `${newValue}` : `${top}`} ${type == 'right' ? `${newValue}` : `${right}`} ${type == 'bottom' ? `${newValue}` : `${bottom}`} ${type == 'left' ? `${newValue}` : `${left}`}`
+ const [top, right, bottom, left] =
+ responsive || responsiveGroup
+ ? value.custom && value.custom[responsiveDevice]
+ ? value.custom[responsiveDevice].split(" ")
+ : ["", "", "", ""]
+ : value.custom
+ ? value.custom.split(" ")
+ : ["", "", "", ""];
+ let newPadding = JSON.parse(JSON.stringify(value));
+ let tempPadding =
+ type === "global"
+ ? `${newValue}`
+ : `${type == "top" ? `${newValue}` : `${top}`} ${type == "right" ? `${newValue}` : `${right}`} ${
+ type == "bottom" ? `${newValue}` : `${bottom}`
+ } ${type == "left" ? `${newValue}` : `${left}`}`;
- if (type === 'global') {
- (responsive || responsiveGroup) ? newPadding.global ? newPadding.global[responsiveDevice] = tempPadding : newPadding.global = { [responsiveDevice]: tempPadding }
- :
- newPadding.global = tempPadding
+ if (type === "global") {
+ responsive || responsiveGroup
+ ? newPadding.global
+ ? (newPadding.global[responsiveDevice] = tempPadding)
+ : (newPadding.global = { [responsiveDevice]: tempPadding })
+ : (newPadding.global = tempPadding);
+ } else {
+ responsive || responsiveGroup
+ ? newPadding.custom
+ ? (newPadding.custom[responsiveDevice] = tempPadding)
+ : (newPadding.custom = { [responsiveDevice]: tempPadding })
+ : (newPadding.custom = tempPadding);
+ }
- } else {
- (responsive || responsiveGroup) ? newPadding.custom ? newPadding.custom[responsiveDevice] = tempPadding : newPadding.custom = { [responsiveDevice]: tempPadding }
- :
- newPadding.custom = tempPadding
- }
+ unit && value.unit ? (newPadding.unit = value.unit) : (newPadding.unit = defaultUnit);
+ newPadding.paddingType = value.paddingType ? value.paddingType : defaultPaddingType;
+ newPadding.openPadding = 1;
+ onChange(newPadding);
+ };
- unit && value.unit ? newPadding.unit = value.unit : newPadding.unit = defaultUnit
- newPadding.paddingType = value.paddingType ? value.paddingType : defaultPaddingType
- newPadding.openPadding = 1
- onChange(newPadding)
- }
+ updatePaddingType = (newType) => {
+ const { onChange, value } = this.props;
+ let newPadding = JSON.parse(JSON.stringify(value));
+ newPadding.paddingType = newType;
+ onChange(newPadding);
+ };
- updatePaddingType = (newType) => {
- const { onChange, value } = this.props
- let newPadding = JSON.parse(JSON.stringify(value))
- newPadding.paddingType = newType
- onChange(newPadding)
- }
+ updateUnit = (newUnit) => {
+ const { onChange, value } = this.props;
+ let newPadding = JSON.parse(JSON.stringify(value));
+ newPadding.unit = newUnit;
+ newPadding.paddingType = value.paddingType ? value.paddingType : this.state.defaultPaddingType;
+ newPadding.openPadding = value.openPadding ? value.openPadding : 1;
+ onChange(newPadding);
+ };
- updateUnit = (newUnit) => {
- const { onChange, value } = this.props
- let newPadding = JSON.parse(JSON.stringify(value))
- newPadding.unit = newUnit
- newPadding.paddingType = value.paddingType ? value.paddingType : this.state.defaultPaddingType
- newPadding.openPadding = value.openPadding ? value.openPadding : 1
- onChange(newPadding)
- }
+ render() {
+ const { value, label, unit, min, max, responsive, device, onDeviceChange, responsiveGroup } = this.props;
+ const { defaultUnit, defaultPaddingType } = this.state;
+ let responsiveDevice = responsive ? (device ? device : this.state.device) : window.qubelyDevice;
+ const values =
+ responsive || responsiveGroup
+ ? value.custom && value.custom[responsiveDevice]
+ ? value.custom[responsiveDevice].split(" ")
+ : ["", "", "", ""]
+ : value.custom
+ ? value.custom.split(" ")
+ : ["", "", "", ""];
- render() {
- const { value, label, unit, min, max, responsive, device, onDeviceChange, responsiveGroup } = this.props
- const { defaultUnit, defaultPaddingType } = this.state
- let responsiveDevice = responsive ? device ? device : this.state.device : window.qubelyDevice
- const values = responsive || responsiveGroup ? value.custom && value.custom[responsiveDevice] ? value.custom[responsiveDevice].split(" ") : ['', '', '', ''] : value.custom ? value.custom.split(" ") : ['', '', '', '']
+ const global =
+ responsive || responsiveGroup
+ ? value.global && value.global[responsiveDevice]
+ ? value.global[responsiveDevice]
+ : ""
+ : value.global
+ ? value.global
+ : "";
+ let iterator = ["top", "right", "bottom", "left"];
+ return (
+
+ {unit && (
+
+ {(typeof unit == "object" ? unit : ["px", "em", "%"]).map((unitName, i) => (
+ this.updateUnit(unitName)}
+ >
+ {unitName}
+
+ ))}
+
+ )}
+
+
{label ? label : "Padding"}
+ {responsive && (
+
{
+ device ? onDeviceChange(val) : this.setState({ device: val });
+ }}
+ />
+ )}
- const global = responsive || responsiveGroup ? value.global && value.global[responsiveDevice] ? value.global[responsiveDevice] : ''
- :
- value.global ? value.global : ''
- let iterator = ['top', 'right', 'bottom', 'left']
- return (
-
- {unit &&
-
- {(typeof unit == 'object' ? unit : ['px', 'em', '%']).map((unitName, i) => (
- this.updateUnit(unitName)}>
- {unitName}
- ))}
-
- }
-
+
+ {[
+ ["global", __("Global")],
+ ["custom", __("Custom")],
+ ].map((data, index) => {
+ return (
+
+ this.updatePaddingType(data[0])}
+ >
+ {data[0] == "global" ? (
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ );
+ })}
+
+
-
{label ? label : 'Padding'}
- {responsive &&
{ device ? onDeviceChange(val) : this.setState({ device: val }) }} />}
-
-
- {
- [['global', __('Global')],['custom', __('Custom')] ].map((data, index) => {
- return (
-
- this.updatePaddingType(data[0])}>
- {data[0] == 'global' ?
-
-
- )
- })
- }
-
-
- this.updatePadding('global', val)}
- min={min}
- max={max}
- step={1}
- />
-
-
- {
- iterator.map((item, index) => {
- return (
-
-
- {icons.spacing[item]}
-
-
- this.updatePadding(iterator[index], val)}
- min={min}
- max={max}
- step={1}
- />
-
-
- }
-
- )
- }
+ {!value.paddingType || value.paddingType == "global" ? (
+
+
+ this.updatePadding("global", val)}
+ min={min}
+ max={max}
+ step={1}
+ />
+
+
+ ) : (
+
+ {iterator.map((item, index) => {
+ return (
+
+
{icons.spacing[item]}
+
+ this.updatePadding(iterator[index], val)}
+ min={min}
+ max={max}
+ step={1}
+ />
+
+
+ )}
+
-
-
- {buttonIconName && (buttonIconPosition == 'left') && ( onTextChange(value)}
- value={buttonText}
- />
- {buttonIconName && (buttonIconPosition == 'right') && (
-
- {
- !!styles &&
-
- }
-
+
+
+ {buttonIconName && buttonIconPosition == "left" && (
+ onTextChange(value)}
+ value={buttonText}
+ />
+ {buttonIconName && buttonIconPosition == "right" && (
+
+
+ {!!styles && }
+
- {buttonIconName && (buttonIconPosition == 'left') && (
- let styles = "", regularStyles = Object.keys(inlineStyles.regular), hoverStyles = Object.keys(inlineStyles.hover);
-
- if (regularStyles.length > 0) {
- regularStyles.forEach(key => {
- if (key === 'color') {
- styles += inlineStyles['selector'];
- } else {
- styles += inlineStyles['bgselector'];
- }
- styles += "{";
- let temp = ":" + inlineStyles.regular[key] + " !important;}"
- styles += key;
- styles += temp;
- });
+class QubelyButtonSave extends Component {
+ render() {
+ const {
+ buttonIconName,
+ buttonIconPosition,
+ buttonSize,
+ buttonText,
+ buttonUrl,
+ buttonTag,
+ buttonId,
+ buttonFillType = undefined,
+ tableBuilder,
+ inlineStyles = { regular: {}, hover: {} },
+ } = this.props;
- }
- if (hoverStyles.length > 0) {
+ const buttonHtml = (
+
+ {buttonIconName && buttonIconPosition == "left" && (
+
+ );
+ let styles = "",
+ regularStyles = Object.keys(inlineStyles.regular),
+ hoverStyles = Object.keys(inlineStyles.hover);
- hoverStyles.forEach(key => {
- if (key === 'color') {
- styles += inlineStyles['selector'];
- styles += ":hover {";
- } else {
- styles += inlineStyles['bgselector'];
- styles += ":before{";
- }
- let temp = ":" + inlineStyles.hover[key] + " !important;}"
- styles += key;
- styles += temp;
- });
- }
+ if (regularStyles.length > 0) {
+ regularStyles.forEach((key) => {
+ if (key === "color") {
+ styles += inlineStyles["selector"];
+ } else {
+ styles += inlineStyles["bgselector"];
+ }
+ styles += "{";
+ let temp = ":" + inlineStyles.regular[key] + " !important;}";
+ styles += key;
+ styles += temp;
+ });
+ }
+ if (hoverStyles.length > 0) {
+ hoverStyles.forEach((key) => {
+ if (key === "color") {
+ styles += inlineStyles["selector"];
+ styles += ":hover {";
+ } else {
+ styles += inlineStyles["bgselector"];
+ styles += ":before{";
+ }
+ let temp = ":" + inlineStyles.hover[key] + " !important;}";
+ styles += key;
+ styles += temp;
+ });
+ }
- return (
-
-
- {
- !!styles &&
-
- }
-
- {
- this.updateListItems(index, 'delete')
- index == focusedItem ? this.setState({ focusedItem: index > 0 ? index - 1 : index })
- :
- this.setState({ focusedItem: focusedItem > 0 ? focusedItem - 1 : focusedItem })
-
- }}>
-
-
- )
- }
-
- renderListItems = () => {
- const { enableListIcons, iconPosition, listItems, newListItemPlaceHolder, disableButton, iconColor, onIconColorChange, onChange } = this.props
- const { focusedItem, removeItemViaBackSpace } = this.state
- return listItems.map((item, index) => {
- return (
-
- this.setState({ currentListItemIndex: index })}>
- {iconPosition == 'right' && item.text.length > 0 && this.renderDeleteIcon(index)}
- {enableListIcons && iconPosition == 'left' &&
}
-
this.modifySpecificItem({ text: event.target.innerText }, index)}
- onKeyPress={(event) => {
- if (event.key == 'Enter') {
- event.preventDefault()
- this.updateListItems(index, 'add')
- this.setState({ focusedItem: index + 1 == listItems.length ? listItems.length : this.state.focusedItem + 1 })
- }
- }
- }
- onKeyUp={(event) => {
- if (event.key == 'Backspace') {
- event.target.innerText.length == 0 && this.setState({ removeItemViaBackSpace: index })
- if (removeItemViaBackSpace == index) {
- this.updateListItems(index, 'delete')
- this.setState({ focusedItem: index > 0 ? index - 1 : index, removeItemViaBackSpace: -1 })
- }
- }
- }}
- onClick={() => this.setState({ focusedItem: index })}>
- {item.text}
-
- {enableListIcons && iconPosition == 'right' &&
}
- {iconPosition == 'left' && item.text.length > 0 && this.renderDeleteIcon(index)}
- {this.state.currentListItemIndex == index && onChange('clickedListItem', index)}
-
- )
- })
-
- }
- modifySpecificItem = (value, index) => {
- const { listItems, onListItemModification } = this.props;
- const modifiedListItems = listItems.map((listItem, currentIndex) => {
- if (index === currentIndex) {
- listItem = { ...listItem, ...value }
- }
- return listItem
- })
- onListItemModification(modifiedListItems)
- }
- updateListItems = (index, operation) => {
- const { listItems, onListItemModification } = this.props
- let newList = JSON.parse(JSON.stringify(listItems))
- operation == 'add' ? newList.splice(index + 1, 0, { icon: 'fas fa-check', text: '', customColor: false }) : newList.splice(index, 1)
-
- onListItemModification(newList)
- }
- render() {
- const { listWraperClassName, listItems, disableButton, buttonText, values, onReplace, customClassName, customPlaceHolder, onTagChange } = this.props
- return (
-
-
- {this.renderListItems()}
-
- {
- !disableButton &&
- {
- this.setState({ currentListItemIndex: listItems.length })
- this.updateListItems(listItems.length, 'add')
- }} className="button is-default qubely-action-button" role="button">
-
-
- }
-
-
-
- )
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ currentListItemIndex: 0,
+ removeItemViaBackSpace: 999,
+ focusedItem: this.props.listItems.length - 1,
+ };
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ const { focusedItem } = this.state;
+ if (this.props.listItems.length > prevProps.listItems.length) {
+ let focusedListItem = document.querySelector(
+ `.${this.props.parentBlock} .qubely-list-item-text-${focusedItem}`
+ );
+ focusedListItem.focus();
+ } else if (this.props.listItems.length < prevProps.listItems.length) {
+ let focusedListItem = document.querySelector(
+ `.${this.props.parentBlock} .qubely-list-item-text-${focusedItem}`
+ );
+
+ if (this.props.isSelected && focusedListItem) {
+ this.placeCaretAtEnd(focusedListItem);
+ }
+ }
+ }
+
+ placeCaretAtEnd = (el) => {
+ el.focus();
+ if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
+ var range = document.createRange();
+ range.selectNodeContents(el);
+ range.collapse(false);
+ var sel = window.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+ } else if (typeof document.body.createTextRange != "undefined") {
+ var textRange = document.body.createTextRange();
+ textRange.moveToElementText(el);
+ textRange.collapse(false);
+ textRange.select();
+ }
+ };
+
+ renderDeleteIcon = (index) => {
+ const { focusedItem } = this.state;
+ return (
+
+ {
+ this.updateListItems(index, "delete");
+ index == focusedItem
+ ? this.setState({ focusedItem: index > 0 ? index - 1 : index })
+ : this.setState({ focusedItem: focusedItem > 0 ? focusedItem - 1 : focusedItem });
+ }}
+ >
+
+
+ );
+ };
+
+ renderListItems = () => {
+ const {
+ enableListIcons,
+ iconPosition,
+ listItems,
+ newListItemPlaceHolder,
+ disableButton,
+ iconColor,
+ onIconColorChange,
+ onChange,
+ } = this.props;
+ const { focusedItem, removeItemViaBackSpace } = this.state;
+ return listItems.map((item, index) => {
+ return (
+
+ this.setState({ currentListItemIndex: index })}
+ >
+ {iconPosition == "right" && item.text.length > 0 && this.renderDeleteIcon(index)}
+ {enableListIcons && iconPosition == "left" && (
+
+ )}
+
this.modifySpecificItem({ text: event.target.innerText }, index)}
+ onKeyPress={(event) => {
+ if (event.key == "Enter") {
+ event.preventDefault();
+ this.updateListItems(index, "add");
+ this.setState({
+ focusedItem:
+ index + 1 == listItems.length
+ ? listItems.length
+ : this.state.focusedItem + 1,
+ });
+ }
+ }}
+ onKeyUp={(event) => {
+ if (event.key == "Backspace") {
+ event.target.innerText.length == 0 &&
+ this.setState({ removeItemViaBackSpace: index });
+ if (removeItemViaBackSpace == index) {
+ this.updateListItems(index, "delete");
+ this.setState({
+ focusedItem: index > 0 ? index - 1 : index,
+ removeItemViaBackSpace: -1,
+ });
+ }
+ }
+ }}
+ onClick={() => this.setState({ focusedItem: index })}
+ >
+ {item.text}
+
+ {enableListIcons && iconPosition == "right" && (
+
+ )}
+ {iconPosition == "left" && item.text.length > 0 && this.renderDeleteIcon(index)}
+ {this.state.currentListItemIndex == index && onChange("clickedListItem", index)}
+
+ );
+ });
+ };
+
+ modifySpecificItem = (value, index) => {
+ const { listItems, onListItemModification } = this.props;
+ const modifiedListItems = listItems.map((listItem, currentIndex) => {
+ if (index === currentIndex) {
+ listItem = { ...listItem, ...value };
+ }
+ return listItem;
+ });
+ onListItemModification(modifiedListItems);
+ };
+
+ updateListItems = (index, operation) => {
+ const { listItems, onListItemModification } = this.props;
+ let newList = JSON.parse(JSON.stringify(listItems));
+ operation == "add"
+ ? newList.splice(index + 1, 0, { icon: "fas fa-check", text: "", customColor: false })
+ : newList.splice(index, 1);
+
+ onListItemModification(newList);
+ };
+
+ render() {
+ const {
+ listWraperClassName,
+ listItems,
+ disableButton,
+ buttonText,
+ values,
+ onReplace,
+ customClassName,
+ customPlaceHolder,
+ onTagChange,
+ } = this.props;
+ return (
+
+
+ {!disableButton && (
+ {
+ this.setState({ currentListItemIndex: listItems.length });
+ this.updateListItems(listItems.length, "add");
+ }}
+ className="button is-default qubely-action-button"
+ role="button"
+ >
+
+ )}
+
+ );
+ }
}
-class QubelyIconListSave extends Component {
-
- render() {
- const { listWraperClassName, enableListIcons, iconPosition, listItems } = this.props
- return (
-
-
- {
- listItems.map((item, index) => {
- if (item.text.length > 0) {
- return (
-
-
- {enableListIcons && iconPosition == 'left' &&
}
-
- {item.text}
-
- {enableListIcons && iconPosition == 'right' &&
}
-
- )
- } else return null
- })
- }
-
-
-
-
- )
- }
+class QubelyIconListSave extends Component {
+ render() {
+ const { listWraperClassName, enableListIcons, iconPosition, listItems } = this.props;
+ return (
+
+
+ {listItems.map((item, index) => {
+ if (item.text.length > 0) {
+ return (
+
+
+ {enableListIcons && iconPosition == "left" && (
+
+ )}
+
+ {item.text}
+
+ {enableListIcons && iconPosition == "right" && (
+
+ )}
+
+ );
+ } else return null;
+ })}
+
+
+ );
+ }
}
-export { QubelyIconListEdit, QubelyIconListSave }
\ No newline at end of file
+export { QubelyIconListEdit, QubelyIconListSave };
diff --git a/assets/reactjs/src/components/fields/RadioAdvanced.js b/assets/reactjs/src/components/fields/RadioAdvanced.js
index 9717c770..9b93928e 100644
--- a/assets/reactjs/src/components/fields/RadioAdvanced.js
+++ b/assets/reactjs/src/components/fields/RadioAdvanced.js
@@ -1,36 +1,39 @@
-const { Component } = wp.element
-const { Tooltip } = wp.components
+const { Component } = wp.element;
+const { Tooltip } = wp.components;
class RadioAdvanced extends Component {
+ setSettings(val) {
+ this.props.onChange(val);
+ }
- setSettings(val){
- this.props.onChange( val )
- }
-
- render() {
- const { value, label, options } = this.props;
- return (
-
- { label &&
-
{label}
- }
-
- {
- options.map((data, index) => {
- return (
-
- this.setSettings(data.value) }>
- {data.icon ? ({data.svg} )
- : data.label}
-
-
- )
- })
- }
-
-
+ {label &&
{label} }
+
+ {options.map((data, index) => {
+ return (
+
+ this.setSettings(data.value)}
+ >
+ {data.icon ? (
+ {data.svg}
+ ) : (
+ data.label
+ )}
+
+
+ );
+ })}
+
+
+ {(label || unit || responsive) && (
+
+ {label && (
+
+ {label}
+
+ )}
- render() {
- const { unit, label, responsive, device, onDeviceChange, disabled = false } = this.props
- let responsiveDevice = responsive ? device ? device : this.state.device : window.qubelyDevice
- return (
-
- {(label || unit || responsive) &&
-
- {label &&
-
-
- {label}
-
-
- }
+ {responsive && (
+
{
+ device && onDeviceChange ? onDeviceChange(val) : this.updateDevice(val);
+ }}
+ />
+ )}
- {responsive && { device && onDeviceChange ? onDeviceChange(val) : this.updateDevice(val) }} />}
+ {unit && (
+
+ {(typeof unit == "object" ? unit : ["px", "em", "%"]).map((value, i) => (
+ {
+ this.setSettings(value, "unit");
+ // console.log(this._filterValue())
+ // this.setSettings(this._filterValue(), 'range');
+ }}
+ >
+ {value}
+
+ ))}
+
+ )}
+
+ )}
- {unit &&
-
- {(typeof unit == 'object' ? unit : ['px', 'em', '%']).map((value, i) => (
- {
- this.setSettings(value, 'unit');
- // console.log(this._filterValue())
- // this.setSettings(this._filterValue(), 'range');
- }}
- >
- {value}
-
- ))}
-
- }
-
- }
-
-
-
- )
- }
+
+
- {responsive &&
-
- {
- device ?
- onDeviceChange(val)} />
- :
- this.setState({ current: val })} />
- }
-
- }
- {label &&
{label} }
-
-
-
this.node = node}>
- {(this.props.clear && this._filterValue() != '') &&
- this.setSettings("")}>
- }
- this.setSettings(e.target.value)}>
- {(this.props.noValue || this.props.clear) &&
- {this.props.noValue || this.props.initial ? this.props.initial : __('Select')}
- }
- {this.props.options.map((item, i) =>
- this.setSettings(Array.isArray(item) ? item[0] : item)}>{Array.isArray(item) ? item[1] : item}
- )}
-
-
-
-
+ {responsive && (
+
+ {device ? (
+ onDeviceChange(val)}
+ />
+ ) : (
+ this.setState({ current: val })} />
+ )}
+
+ )}
+ {label &&
{label} }
+
+
+
(this.node = node)}>
+ {this.props.clear && this._filterValue() != "" && (
+ this.setSettings("")}>
+
+ )}
+ this.setSettings(e.target.value)}>
+ {(this.props.noValue || this.props.clear) && (
+
+ {this.props.noValue || this.props.initial ? this.props.initial : __("Select")}
+
+ )}
+ {this.props.options.map((item, i) => (
+ this.setSettings(Array.isArray(item) ? item[0] : item)}
+ >
+ {Array.isArray(item) ? item[1] : item}
+
+ ))}
+
+
+
+
- {this.props.label &&
-
{this.props.label}
- }
- {this.props.dropdown == 'yes' ?
-
this.setSettings({ val })}
- />
- :
-
-
- {defaultVal.map((data, i) => {
- const [tag, description] = data
- return (
- this.setSettings(val)} data-value={tag}>
- {icons[tag] && icons[tag]}
- {description}
-
- )
- })}
-
-
+ {this.props.label &&
{this.props.label} }
+ {this.props.dropdown == "yes" ? (
+
this.setSettings({ val })} />
+ ) : (
+
+
+ {defaultVal.map((data, i) => {
+ const [tag, description] = data;
+ return (
+ this.setSettings(val)}
+ data-value={tag}
+ >
+ {icons[tag] && icons[tag]}
+ {description}
+
+ );
+ })}
+
+
- {label &&
- {label}
- }
-
- )
- }
+ render() {
+ const { label, customClassName } = this.props;
+ return (
+
+ {label && {label} }
+
+ );
+ }
}
-export default Separator;
\ No newline at end of file
+export default Separator;
diff --git a/assets/reactjs/src/components/fields/Shape.js b/assets/reactjs/src/components/fields/Shape.js
index c066ee66..77979db4 100644
--- a/assets/reactjs/src/components/fields/Shape.js
+++ b/assets/reactjs/src/components/fields/Shape.js
@@ -1,133 +1,160 @@
-import '../css/shape.scss';
-import Range from './Range';
-import Color from './Color';
-import Toggle from './Toggle';
-import icons from '../../helpers/icons';
+import "../css/shape.scss";
+import Range from "./Range";
+import Color from "./Color";
+import Toggle from "./Toggle";
+import icons from "../../helpers/icons";
const { __ } = wp.i18n;
-const {
- Component,
- Fragment
-} = wp.element;
-const {
- Tooltip,
- Dropdown,
- CheckboxControl,
-} = wp.components;
+const { Component, Fragment } = wp.element;
+const { Tooltip, Dropdown, CheckboxControl } = wp.components;
class Shape extends Component {
- constructor(props) {
- super(props);
- this.state = {
- showShapeOptions: false
- }
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ showShapeOptions: false,
+ };
+ }
- setSettings(type, val) {
- const { value, onChange, shapeType } = this.props
- const styleVal = type == 'style' && val == '' ? { openShape: 0 } : { openShape: 1 }
- onChange(Object.assign({}, value, styleVal, { shapeType }, { [type]: val }))
- }
+ setSettings(type, val) {
+ const { value, onChange, shapeType } = this.props;
+ const styleVal = type == "style" && val == "" ? { openShape: 0 } : { openShape: 1 };
+ onChange(Object.assign({}, value, styleVal, { shapeType }, { [type]: val }));
+ }
- renderShapeOptions = () => {
- const { value } = this.props
- let shapes = ['clouds-flat', 'clouds-opacity', 'paper-torn', 'pointy-wave', 'rocky-mountain', 'single-wave', 'slope-opacity', 'slope', 'waves3-opacity', 'drip', 'turning-slope', 'hill-wave', 'hill', 'line-wave', 'swirl', 'wavy-opacity', 'zigzag-shark']
+ renderShapeOptions = () => {
+ const { value } = this.props;
+ let shapes = [
+ "clouds-flat",
+ "clouds-opacity",
+ "paper-torn",
+ "pointy-wave",
+ "rocky-mountain",
+ "single-wave",
+ "slope-opacity",
+ "slope",
+ "waves3-opacity",
+ "drip",
+ "turning-slope",
+ "hill-wave",
+ "hill",
+ "line-wave",
+ "swirl",
+ "wavy-opacity",
+ "zigzag-shark",
+ ];
- if (value.style) {
- shapes = shapes.filter(item => item.toLowerCase().search(value.style.toLowerCase()) == -1)
- shapes = [value.style, ...shapes]
- }
+ if (value.style) {
+ shapes = shapes.filter((item) => item.toLowerCase().search(value.style.toLowerCase()) == -1);
+ shapes = [value.style, ...shapes];
+ }
- return (
-
- {shapes.map((item, i) => this.setSettings('style', item)} dangerouslySetInnerHTML={{ __html: qubely_admin.shapes[item] }} style={value.style == item ? { fill: value.color } : {}} />)}
-
- )
- }
- render() {
- const { value } = this.props;
- const { showShapeOptions } = this.state;
- return (
-
-
-
-
-
-
- {
- value.style ?
-
- :
-
- Select Shape
- {showShapeOptions ? icons.arrow_up : icons.arrow_down}
-
- }
-
-
-
- this.setSettings('style', '')} role="button">
-
-
- }
+ return (
+
+ {shapes.map((item, i) => (
+ this.setSettings("style", item)}
+ dangerouslySetInnerHTML={{ __html: qubely_admin.shapes[item] }}
+ style={value.style == item ? { fill: value.color } : {}}
+ />
+ ))}
+
+ );
+ };
+ render() {
+ const { value } = this.props;
+ const { showShapeOptions } = this.state;
+ return (
+
+
+
+
(
+
+
+ {value.style ? (
+
+ ) : (
+
+ Select Shape
+
+ {showShapeOptions ? icons.arrow_up : icons.arrow_down}{" "}
+
+
+ )}
+
+
+
+ this.setSettings("style", "")}
+ role="button"
+ >
+
+
+
+ )}
+
-
-
- {value.openShape == 1 &&
-
- this.setSettings('color', val)}
- />
- this.setSettings('width', val)}
- />
- this.setSettings('height', val)}
- />
- this.setSettings('flipShapeDivider', newValue)}
- />
- this.setSettings('front', val ? 1 : 0)}
- />
-
- }
-
- )
- }
+ {value.openShape == 1 && (
+
+ this.setSettings("color", val)}
+ />
+ this.setSettings("width", val)}
+ />
+ this.setSettings("height", val)}
+ />
+ this.setSettings("flipShapeDivider", newValue)}
+ />
+ this.setSettings("front", val ? 1 : 0)}
+ />
+
+ )}
+
+
- {label &&
{label} }
-
- {options.map((data, i) =>
- (
-
onChange(data.value) })}
- className={`${value == data.value ? 'qubely-active' : ''}${data.pro ? ' qubely-pro-layout' : ''}`}
- >
- {data.icon && {data.icon} }
- {data.svg && {data.svg} }
- {data.img && {data.img} }
- {data.label && {data.label} }
-
- )
- )}
-
- {
- proUpgradation &&
-
-
-
-
-
- {__('Upgrade to Pro')}
- {__('Get all features of post grid at your disposal by upgrading to pro version')}
-
-
{__('Upgrade Now')}
-
- }
-
-
+ {label &&
{label} }
+
+ {options.map((data, i) => (
+
onChange(data.value) })}
+ className={`${value == data.value ? "qubely-active" : ""}${
+ data.pro ? " qubely-pro-layout" : ""
+ }`}
+ >
+ {data.icon && (
+ {data.icon}
+ )}
+ {data.svg && {data.svg} }
+ {data.img && {data.img} }
+ {data.label && {data.label} }
+
+ ))}
+
+ {proUpgradation && (
+
+
+
+
+
+ {__("Upgrade to Pro")}
+
+ {__("Get all features of post grid at your disposal by upgrading to pro version")}
+
+
+
+ {__("Upgrade Now")}
+
+
+ )}
+
{Array.isArray(children) ? children.map(item => item) : children}
- )
- }
+ render() {
+ const { children, onTabChange } = this.props;
+ onTabChange && onTabChange();
+ return {Array.isArray(children) ? children.map((item) => item) : children} ;
+ }
}
-export default Tab
\ No newline at end of file
+export default Tab;
diff --git a/assets/reactjs/src/components/fields/Tabs.js b/assets/reactjs/src/components/fields/Tabs.js
index 2c2deb49..6c90064a 100644
--- a/assets/reactjs/src/components/fields/Tabs.js
+++ b/assets/reactjs/src/components/fields/Tabs.js
@@ -1,63 +1,86 @@
-import '../css/panelTabs.scss';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import "../css/panelTabs.scss";
+import PropTypes from "prop-types";
+import classnames from "classnames";
const { __ } = wp.i18n;
const { Component, Fragment } = wp.element;
const { Tooltip } = wp.components;
export default class Tabs extends Component {
- constructor(props) {
- super(props);
- this.state = {
- activeTab: this.props.children[0].props.tabTitle
- }
- }
- render() {
- let TEMPTAG = Fragment;
- const tabs = this.props.children,
- { activeTab } = this.state,
- { label, panelGroup } = this.props;
+ constructor(props) {
+ super(props);
+ this.state = {
+ activeTab: this.props.children[0].props.tabTitle,
+ };
+ }
+ render() {
+ let TEMPTAG = Fragment;
+ const tabs = this.props.children,
+ { activeTab } = this.state,
+ { label, panelGroup } = this.props;
- const className = classnames(
- 'qubely-field',
- 'qubely-field-tabs',
- {'panel-group': panelGroup},
- {'qubely-has-label': typeof label !== 'undefined'}
- );
+ const className = classnames(
+ "qubely-field",
+ "qubely-field-tabs",
+ { "panel-group": panelGroup },
+ { "qubely-has-label": typeof label !== "undefined" }
+ );
- if (panelGroup) {
- TEMPTAG = 'Div'
- }
- return (
-
-
- {label &&
{label} }
-
- {tabs.map((tab, i) =>
-
-
- {
- panelGroup && this.setState({ activeTab: tab.props.tabTitle })}
- className={'qubely-tab-menu ' + (tab.props.tabTitle === activeTab ? 'active' : '')}
- >
- {tab.props.tabTitle}
-
-
-
- )}
-
-
-
- {tabs.map(tab => tab.props.tabTitle === activeTab ? tab : '')}
-
-
+
+ {label &&
{label} }
+
+ {tabs.map((tab, i) => (
+
+
+ {panelGroup && (
+
+
+
+
+ )}
+ this.setState({ activeTab: tab.props.tabTitle })}
+ className={
+ "qubely-tab-menu " + (tab.props.tabTitle === activeTab ? "active" : "")
+ }
+ >
+ {tab.props.tabTitle}
+
+
+
+ ))}
+
+
+
+ {tabs.map((tab) => (tab.props.tabTitle === activeTab ? tab : ""))}
+
+
- {
- templates ? (
-
- {
- Object.keys(templates).map((key, _index) => {
- const thumbnail = templates[key].thumbnail
- let thumbnail_src = `${qubely_pro_admin.plugin}assets/img/templates/placeholder.svg`;
- if(thumbnail !== undefined){
- if(thumbnail.type === 'local') {
- if(thumbnail.src !== undefined && thumbnail.src !== ''){
- thumbnail_src = `${qubely_pro_admin.plugin}assets/img/templates/${thumbnail.src}`
- }
- }else{
- if(thumbnail.src !== undefined && thumbnail.src !== '') {
- thumbnail_src = thumbnail.src
- }
- }
- }
- return (
-
{
- this.setState({activeTemplate: _index})
- return this.handleTemplateSelection(templates[key]);
- }}>
-
-
- )
- })
- }
-
- ) :
- }
-
+ {templates ? (
+
+ {Object.keys(templates).map((key, _index) => {
+ const thumbnail = templates[key].thumbnail;
+ let thumbnail_src = `${qubely_pro_admin.plugin}assets/img/templates/placeholder.svg`;
+ if (thumbnail !== undefined) {
+ if (thumbnail.type === "local") {
+ if (thumbnail.src !== undefined && thumbnail.src !== "") {
+ thumbnail_src = `${qubely_pro_admin.plugin}assets/img/templates/${thumbnail.src}`;
+ }
+ } else {
+ if (thumbnail.src !== undefined && thumbnail.src !== "") {
+ thumbnail_src = thumbnail.src;
+ }
+ }
+ }
+ return (
+
{
+ this.setState({ activeTemplate: _index });
+ return this.handleTemplateSelection(templates[key]);
+ }}
+ >
+
+
+ );
+ })}
+
+ ) : (
+
+
+ )}
+
-
- {label && label}
- {responsive &&
-
- {
- device ?
- onDeviceChange(val)} />
- :
- this.setState({ current: val })} />
- }
-
-
- }
-
- this.setSettings(val)}
- />
-
- )
- }
+ render() {
+ const { label, customClassName, responsive, device, onDeviceChange } = this.props;
+ return (
+
+
+ {label && label}
+ {responsive && (
+
+ {device ? (
+ onDeviceChange(val)}
+ />
+ ) : (
+ this.setState({ current: val })} />
+ )}
+
+ )}
+
+ this.setSettings(val)} />
+
+ );
+ }
}
-export default Toggle
\ No newline at end of file
+export default Toggle;
diff --git a/assets/reactjs/src/components/fields/Typography.js b/assets/reactjs/src/components/fields/Typography.js
index ea03d9b0..fb2f06ec 100644
--- a/assets/reactjs/src/components/fields/Typography.js
+++ b/assets/reactjs/src/components/fields/Typography.js
@@ -1,464 +1,512 @@
-import '../css/typography.scss';
+import "../css/typography.scss";
const { __ } = wp.i18n;
-import Range from './Range';
-import Toggle from './Toggle';
-import classnames from 'classnames';
-import icons from '../../helpers/icons';
-import ButtonGroup from './ButtonGroup';
+import Range from "./Range";
+import Toggle from "./Toggle";
+import classnames from "classnames";
+import icons from "../../helpers/icons";
+import ButtonGroup from "./ButtonGroup";
import FontList from "./assets/FontList";
-const { Component, Fragment } = wp.element;
+const { Component, Fragment, createRef } = wp.element;
const { Dropdown, Tooltip, SelectControl } = wp.components;
const { createHigherOrderComponent } = wp.compose;
-
class Typography extends Component {
- constructor(props) {
- super(props)
- this.state = {
- showFontFamily: false,
- filterText: '',
- changeType: '',
- showFontFamiles: false,
- showFontWeights: false,
- }
- }
- async componentDidMount() {
- document.addEventListener('mousedown', this.handleClickOutside);
- }
- componentWillUnmount() {
- document.removeEventListener('mousedown', this.handleClickOutside);
- }
- handleClickOutside = (event) => {
- const { showFontFamiles, showFontWeights } = this.state
- if (showFontFamiles) {
- const qubelyFontFamilyWrapper = this.refs.qubelyFontFamilyWrapper
- const qubelySelectedFontFamily = this.refs.qubelySelectedFontFamily
- if (qubelyFontFamilyWrapper && !qubelyFontFamilyWrapper.contains(event.target)) {
- qubelySelectedFontFamily && !qubelySelectedFontFamily.contains(event.target) && this.setState({ showFontFamiles: false })
- }
- } else if (showFontWeights) {
- const qubelyFontWeightWrapper = this.refs.qubelyFontWeightWrapper
- const qubelySelectedFontWeight = this.refs.qubelySelectedFontWeight
- if (qubelyFontWeightWrapper && !qubelyFontWeightWrapper.contains(event.target)) {
- qubelySelectedFontWeight && !qubelySelectedFontWeight.contains(event.target) && this.setState({ showFontWeights: false })
- }
- }
-
- }
-
- _getWeight() {
- const { value } = this.props
- if (value && value.family) {
- return FontList.filter(o => { return o.n == value.family })[0].v
- } else {
- return [100, 200, 300, 400, 500, 600, 700, 800, 900];
- }
- }
-
- setSettings(type, val) {
- let prevValue = this.props.value
- if (val == 'default' || val == 'Default') {
- if (type == 'family') {
- delete prevValue.family
- delete prevValue.type
- } else if (type == 'weight') {
- delete prevValue.weight
- }
- this.props.onChange(Object.assign({}, prevValue))
- } else {
- if (type == 'family' && val) {
- val = { [type]: val, type: (FontList.filter(o => { return o.n == val })[0].f) }
- } else {
- val = {
- [type]: val,
- ...(type === 'globalSource' && { activeSource: 'global' })
- }
- }
- this.props.onChange(Object.assign({}, prevValue, val))
- }
-
- }
- findArrayIndex = (font) => {
- let index = 0
- let qubelyFonts = JSON.parse(localStorage.getItem('qubelyFonts'))
- while (index < 10) {
- if (qubelyFonts[index].n == font) {
- break
- }
- index++
- }
- return index
- }
- handleTypographyChange(val) {
- this.setSettings('family', val)
-
- let qubelyFonts = JSON.parse(localStorage.getItem('qubelyFonts'))
- let selectedFont = FontList.filter(font => font.n == val)
-
- if (qubelyFonts) {
- let oldFont = qubelyFonts.filter(font => font.n == val).length > 0
- if (oldFont) {
- let index = this.findArrayIndex(val)
- qubelyFonts.splice(index, 1)
- qubelyFonts.unshift(...selectedFont)
- } else {
- qubelyFonts.unshift(...selectedFont)
- qubelyFonts.length > 10 && qubelyFonts.pop()
- }
-
- } else {
- qubelyFonts = [...selectedFont]
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ showFontFamily: false,
+ filterText: "",
+ changeType: "",
+ showFontFamiles: false,
+ showFontWeights: false,
+ };
+ this.qubelyFontFamilyWrapper = createRef();
+ this.qubelySelectedFontFamily = createRef();
+ }
+ async componentDidMount() {
+ document.addEventListener("mousedown", this.handleClickOutside);
+ }
+ componentWillUnmount() {
+ document.removeEventListener("mousedown", this.handleClickOutside);
+ }
+ handleClickOutside = (event) => {
+ const { showFontFamiles, showFontWeights } = this.state;
+ if (showFontFamiles) {
+ const qubelyFontFamilyWrapper = this.qubelyFontFamilyWrapper.current;
+ const qubelySelectedFontFamily = this.qubelySelectedFontFamily.current;
+ if (qubelyFontFamilyWrapper && !qubelyFontFamilyWrapper.contains(event.target)) {
+ qubelySelectedFontFamily &&
+ !qubelySelectedFontFamily.contains(event.target) &&
+ this.setState({ showFontFamiles: false });
+ }
+ } else if (showFontWeights) {
+ const qubelyFontWeightWrapper = this.qubelyFontWeightWrapper.current;
+ const qubelySelectedFontWeight = this.qubelySelectedFontWeight.current;
+ if (qubelyFontWeightWrapper && !qubelyFontWeightWrapper.contains(event.target)) {
+ qubelySelectedFontWeight &&
+ !qubelySelectedFontWeight.contains(event.target) &&
+ this.setState({ showFontWeights: false });
+ }
+ }
+ };
- localStorage.setItem('qubelyFonts', JSON.stringify(qubelyFonts))
- }
- render() {
- const {
- value,
- label,
- device,
- globalSource,
- globalSettings,
- onDeviceChange,
- globalTypoOptions,
- globalTypoValues
- } = this.props;
+ _getWeight() {
+ const { value } = this.props;
+ if (value && value.family) {
+ return FontList.filter((o) => {
+ return o.n == value.family;
+ })[0].v;
+ } else {
+ return [100, 200, 300, 400, 500, 600, 700, 800, 900];
+ }
+ }
- const {
- filterText,
- showFontFamiles,
- showFontWeights,
- } = this.state;
+ setSettings(type, val) {
+ let prevValue = this.props.value;
+ if (val == "default" || val == "Default") {
+ if (type == "family") {
+ delete prevValue.family;
+ delete prevValue.type;
+ } else if (type == "weight") {
+ delete prevValue.weight;
+ }
+ this.props.onChange(Object.assign({}, prevValue));
+ } else {
+ if (type == "family" && val) {
+ val = {
+ [type]: val,
+ type: FontList.filter((o) => {
+ return o.n == val;
+ })[0].f,
+ };
+ } else {
+ val = {
+ [type]: val,
+ ...(type === "globalSource" && { activeSource: "global" }),
+ };
+ }
+ this.props.onChange(Object.assign({}, prevValue, val));
+ }
+ }
+ findArrayIndex = (font) => {
+ let index = 0;
+ let qubelyFonts = JSON.parse(localStorage.getItem("qubelyFonts"));
+ while (index < 10) {
+ if (qubelyFonts[index].n == font) {
+ break;
+ }
+ index++;
+ }
+ return index;
+ };
+ handleTypographyChange(val) {
+ this.setSettings("family", val);
- let qubelyFonts = JSON.parse(localStorage.getItem('qubelyFonts'));
- let filteredFontList = [], newFontList = FontList;
- if (qubelyFonts) {
- filteredFontList = FontList.filter(font => !qubelyFonts.filter(qubelyFont => qubelyFont.n == font.n || font.n == 'Default').length > 0)
- newFontList = [
- { n: 'Default', f: 'default', v: [] },
- ...qubelyFonts,
- ...filteredFontList
- ]
- }
- if (filterText.length >= 2) {
- newFontList = newFontList.filter(item =>
- item.n.toLowerCase().search(filterText.toLowerCase()) !== -1
- )
- }
- return (
-
- {
- !globalSettings &&
this.setSettings('openTypography', val)}
- />
- }
+ let qubelyFonts = JSON.parse(localStorage.getItem("qubelyFonts"));
+ let selectedFont = FontList.filter((font) => font.n == val);
- {
- ((value && value.openTypography == 1) || globalSettings) &&
-
- {
- !globalSettings &&
- {
- if (newSource === 'custom') {
- if (typeof value.globalSource === 'undefined' || typeof value.activeSource === 'undefined') {
- this.props.onChange(
- {
- ...value,
- activeSource: newSource,
- }
- );
- } else if (typeof value.globalSource !== 'undefined' && value.globalSource !== 'none') {
- this.props.onChange(
- {
- ...globalTypoValues[value.globalSource - 1],
- activeSource: newSource,
- globalSource: value.globalSource,
- blockDefaultValues: value.blockDefaultValues
- }
- );
- } else if (typeof value.globalSource !== 'undefined' && value.globalSource === 'none') {
- this.props.onChange(
- {
- openTypography: true,
- globalSource: 'none',
- activeSource: 'custom',
- ...value.blockDefaultValues,
- blockDefaultValues: value.blockDefaultValues
- }
- );
- }
- } else {
- let tempBlockDefaults;
- const newValue = {
- openTypography: true,
- activeSource: 'global',
- globalSource: typeof value.globalSource === 'undefined' ? 'none' : value.globalSource,
- blockDefaultValues: value.blockDefaultValues
- }
+ if (qubelyFonts) {
+ let oldFont = qubelyFonts.filter((font) => font.n == val).length > 0;
+ if (oldFont) {
+ let index = this.findArrayIndex(val);
+ qubelyFonts.splice(index, 1);
+ qubelyFonts.unshift(...selectedFont);
+ } else {
+ qubelyFonts.unshift(...selectedFont);
+ qubelyFonts.length > 10 && qubelyFonts.pop();
+ }
+ } else {
+ qubelyFonts = [...selectedFont];
+ }
- if ((typeof value.activeSource === 'undefined' || value.activeSource === 'custom') && (value.globalSource === 'none' || typeof value.globalSource === 'undefined')) {
- tempBlockDefaults = JSON.parse(JSON.stringify(value));
- delete tempBlockDefaults.activeSource;
- delete tempBlockDefaults.globalSource;
- delete tempBlockDefaults.blockDefaultValues;
- newValue.blockDefaultValues = tempBlockDefaults;
- }
- this.props.onChange(newValue);
- }
- }
- }
- />
- }
+ localStorage.setItem("qubelyFonts", JSON.stringify(qubelyFonts));
+ }
+ render() {
+ const {
+ value,
+ label,
+ device,
+ globalSource,
+ globalSettings,
+ onDeviceChange,
+ globalTypoOptions,
+ globalTypoValues,
+ } = this.props;
- {
- ((value.activeSource === 'global') && !globalSettings) ?
- {
- if (newValue === 'none' && value.globalSource !== 'none') {
- const temp = {
- openTypography: true,
- activeSource: 'global',
- globalSource: newValue,
- blockDefaultValues: value.blockDefaultValues
- }
- this.props.onChange(temp);
- } else {
- this.setSettings('globalSource', newValue);
- }
- }}
- />
- :
-
- this.setSettings('size', val)}
- onDeviceChange={value => onDeviceChange(value)}
- />
+ const { filterText, showFontFamiles, showFontWeights } = this.state;
-
-
-
{__('Font Family')}
-
{
- this.setState({ showFontFamiles: !showFontFamiles })
- }}>
-
- {showFontFamiles ? icons.arrow_up : icons.arrow_down}
-
-
-
- {
- showFontFamiles &&
-
- {newFontList.length > 0 ?
- newFontList.map((font, index) => {
- let isActiveFont = false;
- if (value && (font.n == value.family)) {
- isActiveFont = true;
- }
- let fontClasses = classnames(
- { ['qubely-font-family-option']: !isActiveFont },
- { ['qubely-active-font-family']: isActiveFont }
- )
- return (
-
{
- this.setState({ showFontFamiles: false, filterText: '' });
- font.n == 'Default' ? this.setSettings('family', 'default') : this.handleTypographyChange(font.n)
- }}
- >
- {font.n}
-
- )
- })
- :
-
this.setState({ showFontFamiles: false, filterText: '' })} > No matched font
- }
-
-
- }
-
-
{__('Weight')}
-
this.setState({ showFontWeights: !showFontWeights })}>
-
{value && value.weight || 'Select'}
-
{showFontWeights ? icons.arrow_up : icons.arrow_down}
-
-
- {
- showFontWeights &&
-
- {
- ['Default', ...this._getWeight()].map((font, i) => {
- return (
-
{ this.setState({ showFontWeights: false }); this.setSettings('weight', font) }}
- >
- {font}
-
- )
- })
- }
-
-
- }
+ let qubelyFonts = JSON.parse(localStorage.getItem("qubelyFonts"));
+ let filteredFontList = [],
+ newFontList = FontList;
+ if (qubelyFonts) {
+ filteredFontList = FontList.filter(
+ (font) => !qubelyFonts.filter((qubelyFont) => qubelyFont.n == font.n || font.n == "Default").length > 0
+ );
+ newFontList = [{ n: "Default", f: "default", v: [] }, ...qubelyFonts, ...filteredFontList];
+ }
+ if (filterText.length >= 2) {
+ newFontList = newFontList.filter((item) => item.n.toLowerCase().search(filterText.toLowerCase()) !== -1);
+ }
+ return (
+
+ {!globalSettings && (
+ this.setSettings("openTypography", val)}
+ />
+ )}
-
+ {((value && value.openTypography == 1) || globalSettings) && (
+
+ {!globalSettings && (
+ {
+ if (newSource === "custom") {
+ if (
+ typeof value.globalSource === "undefined" ||
+ typeof value.activeSource === "undefined"
+ ) {
+ this.props.onChange({
+ ...value,
+ activeSource: newSource,
+ });
+ } else if (
+ typeof value.globalSource !== "undefined" &&
+ value.globalSource !== "none"
+ ) {
+ this.props.onChange({
+ ...globalTypoValues[value.globalSource - 1],
+ activeSource: newSource,
+ globalSource: value.globalSource,
+ blockDefaultValues: value.blockDefaultValues,
+ });
+ } else if (
+ typeof value.globalSource !== "undefined" &&
+ value.globalSource === "none"
+ ) {
+ this.props.onChange({
+ openTypography: true,
+ globalSource: "none",
+ activeSource: "custom",
+ ...value.blockDefaultValues,
+ blockDefaultValues: value.blockDefaultValues,
+ });
+ }
+ } else {
+ let tempBlockDefaults;
+ const newValue = {
+ openTypography: true,
+ activeSource: "global",
+ globalSource:
+ typeof value.globalSource === "undefined" ? "none" : value.globalSource,
+ blockDefaultValues: value.blockDefaultValues,
+ };
- (
-
-
{__('Advanced Typography')}
-
-
-
-
-
- {!this.props.disableLineHeight &&
-
this.setSettings('height', val)}
- min={8}
- max={200}
- step={1}
- unit
- responsive
- device={device}
- onDeviceChange={value => onDeviceChange(value)}
- />
- }
- this.setSettings('spacing', val)}
- min={-10}
- max={30}
- step={1}
- unit
- responsive
- device={device}
- onDeviceChange={value => onDeviceChange(value)}
- />
-
-
- {__('Text Transform')}
-
-
- {
- ['none', 'capitalize', 'uppercase', 'lowercase'].map((data, index) => {
- return (
-
- this.setSettings('transform', data)}>
- {data == 'none' &&
- Aa
- }
- {data == 'uppercase' &&
- AA
- }
- {data == 'lowercase' &&
- aa
- }
-
-
- )
- })
- }
-
-
- }
-
- }
+ {value.activeSource === "global" && !globalSettings ? (
+
{
+ if (newValue === "none" && value.globalSource !== "none") {
+ const temp = {
+ openTypography: true,
+ activeSource: "global",
+ globalSource: newValue,
+ blockDefaultValues: value.blockDefaultValues,
+ };
+ this.props.onChange(temp);
+ } else {
+ this.setSettings("globalSource", newValue);
+ }
+ }}
+ />
+ ) : (
+
+ this.setSettings("size", val)}
+ onDeviceChange={(value) => onDeviceChange(value)}
+ />
+
+
+
{__("Font Family")}
+
{
+ this.setState({ showFontFamiles: !showFontFamiles });
+ }}
+ >
+
+
+ {" "}
+ {showFontFamiles ? icons.arrow_up : icons.arrow_down}{" "}
+
+
+
+
+ {showFontFamiles && (
+
+
+ {newFontList.length > 0 ? (
+ newFontList.map((font, index) => {
+ let isActiveFont = false;
+ if (value && font.n == value.family) {
+ isActiveFont = true;
+ }
+ let fontClasses = classnames(
+ { ["qubely-font-family-option"]: !isActiveFont },
+ { ["qubely-active-font-family"]: isActiveFont }
+ );
+ return (
+
{
+ this.setState({
+ showFontFamiles: false,
+ filterText: "",
+ });
+ font.n == "Default"
+ ? this.setSettings("family", "default")
+ : this.handleTypographyChange(font.n);
+ }}
+ >
+ {font.n}
+
+ );
+ })
+ ) : (
+
+ this.setState({ showFontFamiles: false, filterText: "" })
+ }
+ >
+ {" "}
+ No matched font{" "}
+
+ )}
+
+
+ )}
+
+
{__("Weight")}
+
this.setState({ showFontWeights: !showFontWeights })}
+ >
+
+ {" "}
+ {(value && value.weight) || "Select"}{" "}
+
+
+ {" "}
+ {showFontWeights ? icons.arrow_up : icons.arrow_down}{" "}
+
+
+
+ {showFontWeights && (
+
+
+ {["Default", ...this._getWeight()].map((font, i) => {
+ return (
+
{
+ this.setState({ showFontWeights: false });
+ this.setSettings("weight", font);
+ }}
+ >
+ {font}
+
+ );
+ })}
+
+
+ )}
+
(
+
+
{__("Advanced Typography")}
+
+
+
+
+
+ {!this.props.disableLineHeight && (
+
this.setSettings("height", val)}
+ min={8}
+ max={200}
+ step={1}
+ unit
+ responsive
+ device={device}
+ onDeviceChange={(value) => onDeviceChange(value)}
+ />
+ )}
+ this.setSettings("spacing", val)}
+ min={-10}
+ max={30}
+ step={1}
+ unit
+ responsive
+ device={device}
+ onDeviceChange={(value) => onDeviceChange(value)}
+ />
+
+
{__("Text Transform")}
+
+ {["none", "capitalize", "uppercase", "lowercase"].map(
+ (data, index) => {
+ return (
+
+
+ this.setSettings("transform", data)
+ }
+ >
+ {data == "none" && Aa }
+ {data == "uppercase" && AA }
+ {data == "lowercase" && aa }
+
+
+ );
+ }
+ )}
+
+
+ )}
+
+ )}
+
- {label &&
-
{label}
- }
-
-
-
- this.setState({ openAdvance: !openAdvance })}>
-
- }
-
- {openAdvance &&
-
- this.setSettings('target', !val)}
- />
- this.setSettings('nofollow', !val)}
- />
-
- }
-
-
+ {label &&
{label} }
+
+
+
+ this.setState({ openAdvance: !openAdvance })}
+ >
+
+
+ )}
+
+ {openAdvance && (
+
+ this.setSettings("target", !val)}
+ />
+ this.setSettings("nofollow", !val)}
+ />
+
+ )}
+
+
-
- {label ?
{label} : ''}
-
- {Array.isArray(children) ? children.map(item => item) : children}
-
-
- )
- }
+ /**
+ *
+ * @param {object} event
+ *
+ * Close PopUp onClickOutside
+ *
+ * If event target is inside the avoidable dom node then Ignore
+ * *
+ * Else close PopUp executing onClickOutside from parent component
+ *
+ */
+ handleClickOutside = (event) => {
+ const { onClickOutside, domNodetobeAvoided } = this.props;
+ const qubelyPopUpWraper = this.refs.qubelyPopUpWraper;
+ if (qubelyPopUpWraper && !qubelyPopUpWraper.contains(event.target)) {
+ domNodetobeAvoided && !domNodetobeAvoided.contains(event.target) && onClickOutside();
+ }
+ };
+ render() {
+ const { cssStyle, positionClass } = this.state;
+ const { label, children, inline, customClass } = this.props;
+ return (
+
+
+ {label ?
{label} : ""}
+
+ {Array.isArray(children) ? children.map((item) => item) : children}
+
+
+ );
+ }
}
-export default Wrapper;
\ No newline at end of file
+export default Wrapper;
diff --git a/assets/reactjs/src/components/fields/assets/FontList.js b/assets/reactjs/src/components/fields/assets/FontList.js
index 06892c1e..e75884cb 100644
--- a/assets/reactjs/src/components/fields/assets/FontList.js
+++ b/assets/reactjs/src/components/fields/assets/FontList.js
@@ -1,5033 +1,5470 @@
export default [
- {
- n: "Default",
- v: [],
- f: "default"
- },
- {
- n: 'Arial',
- f: 'sans-serif',
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900]
- },
- {
- n: 'Tahoma',
- f: 'sans-serif',
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900]
- },
- {
- n: 'Verdana',
- f: 'sans-serif',
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900]
- },
- {
- n: 'Helvetica',
- f: 'sans-serif',
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900]
- },
- {
- n: 'Times New Roman',
- f: 'sans-serif',
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900]
- },
- {
- n: 'Trebuchet MS',
- f: 'sans-serif',
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900]
- },
- {
- n: 'Georgia',
- f: 'sans-serif',
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900]
- },
+ {
+ n: "Default",
+ v: [],
+ f: "default",
+ },
+ {
+ n: "Arial",
+ f: "sans-serif",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ {
+ n: "Tahoma",
+ f: "sans-serif",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ {
+ n: "Verdana",
+ f: "sans-serif",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ {
+ n: "Helvetica",
+ f: "sans-serif",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ {
+ n: "Times New Roman",
+ f: "sans-serif",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ {
+ n: "Trebuchet MS",
+ f: "sans-serif",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
+ {
+ n: "Georgia",
+ f: "sans-serif",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ },
- {
- n: "ABeeZee",
- v: [400, "400i"],
- f: "sans-serif"
- },
- {
- n: "Abel",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Abhaya Libre",
- v: [400, 500, 600, 700, 800],
- f: "serif"
- },
- {
- n: "Abril Fatface",
- v: [400],
- f: "display"
- },
- {
- n: "Aclonica",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Acme",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Actor",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Adamina",
- v: [400],
- f: "serif"
- },
- {
- n: "Advent Pro",
- v: [100, 200, 300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Aguafina Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Akronim",
- v: [400],
- f: "display"
- },
- {
- n: "Aladin",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Alata",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Alatsi",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Aldrich",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Alef",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Alegreya",
- v: [400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Alegreya SC",
- v: [400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Alegreya Sans",
- v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Alegreya Sans SC",
- v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Aleo",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Alex Brush",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Alfa Slab One",
- v: [400],
- f: "display"
- },
- {
- n: "Alice",
- v: [400],
- f: "serif"
- },
- {
- n: "Alike",
- v: [400],
- f: "serif"
- },
- {
- n: "Alike Angular",
- v: [400],
- f: "serif"
- },
- {
- n: "Allan",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Allerta",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Allerta Stencil",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Allura",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Almarai",
- v: [300, 400, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Almendra",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Almendra Display",
- v: [400],
- f: "display"
- },
- {
- n: "Almendra SC",
- v: [400],
- f: "serif"
- },
- {
- n: "Amarante",
- v: [400],
- f: "display"
- },
- {
- n: "Amaranth",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Amatic SC",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Amethysta",
- v: [400],
- f: "serif"
- },
- {
- n: "Amiko",
- v: [400, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Amiri",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Amita",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Anaheim",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Andada",
- v: [400],
- f: "serif"
- },
- {
- n: "Andika",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Angkor",
- v: [400],
- f: "display"
- },
- {
- n: "Annie Use Your Telescope",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Anonymous Pro",
- v: [400, "400i", 700, "700i"],
- f: "monospace"
- },
- {
- n: "Antic",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Antic Didone",
- v: [400],
- f: "serif"
- },
- {
- n: "Antic Slab",
- v: [400],
- f: "serif"
- },
- {
- n: "Anton",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Arapey",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Arbutus",
- v: [400],
- f: "display"
- },
- {
- n: "Arbutus Slab",
- v: [400],
- f: "serif"
- },
- {
- n: "Architects Daughter",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Archivo",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Archivo Black",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Archivo Narrow",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Aref Ruqaa",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Arima Madurai",
- v: [100, 200, 300, 400, 500, 700, 800, 900],
- f: "display"
- },
- {
- n: "Arimo",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Arizonia",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Armata",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Arsenal",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Artifika",
- v: [400],
- f: "serif"
- },
- {
- n: "Arvo",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Arya",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Asap",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Asap Condensed",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Asar",
- v: [400],
- f: "serif"
- },
- {
- n: "Asset",
- v: [400],
- f: "display"
- },
- {
- n: "Assistant",
- v: [200, 300, 400, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Astloch",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Asul",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Athiti",
- v: [200, 300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Atma",
- v: [300, 400, 500, 600, 700],
- f: "display"
- },
- {
- n: "Atomic Age",
- v: [400],
- f: "display"
- },
- {
- n: "Aubrey",
- v: [400],
- f: "display"
- },
- {
- n: "Audiowide",
- v: [400],
- f: "display"
- },
- {
- n: "Autour One",
- v: [400],
- f: "display"
- },
- {
- n: "Average",
- v: [400],
- f: "serif"
- },
- {
- n: "Average Sans",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Averia Gruesa Libre",
- v: [400],
- f: "display"
- },
- {
- n: "Averia Libre",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "Averia Sans Libre",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "Averia Serif Libre",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "B612",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "B612 Mono",
- v: [400, "400i", 700, "700i"],
- f: "monospace"
- },
- {
- n: "Bad Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Bahiana",
- v: [400],
- f: "display"
- },
- {
- n: "Bahianita",
- v: [400],
- f: "display"
- },
- {
- n: "Bai Jamjuree",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Baloo 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Bhai 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Bhaina 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Chettan 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Da 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Paaji 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Tamma 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Tammudu 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Baloo Thambi 2",
- v: [400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Balsamiq Sans",
- v: [400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "Balthazar",
- v: [400],
- f: "serif"
- },
- {
- n: "Bangers",
- v: [400],
- f: "display"
- },
- {
- n: "Barlow",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Barlow Condensed",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Barlow Semi Condensed",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Barriecito",
- v: [400],
- f: "display"
- },
- {
- n: "Barrio",
- v: [400],
- f: "display"
- },
- {
- n: "Basic",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Baskervville",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Battambang",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Baumans",
- v: [400],
- f: "display"
- },
- {
- n: "Bayon",
- v: [400],
- f: "display"
- },
- {
- n: "Be Vietnam",
- v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
- f: "sans-serif"
- },
- {
- n: "Bebas Neue",
- v: [400],
- f: "display"
- },
- {
- n: "Belgrano",
- v: [400],
- f: "serif"
- },
- {
- n: "Bellefair",
- v: [400],
- f: "serif"
- },
- {
- n: "Belleza",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Bellota",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "Bellota Text",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "BenchNine",
- v: [300, 400, 700],
- f: "sans-serif"
- },
- {
- n: "Bentham",
- v: [400],
- f: "serif"
- },
- {
- n: "Berkshire Swash",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Beth Ellen",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Bevan",
- v: [400],
- f: "display"
- },
- {
- n: "Big Shoulders Display",
- v: [100, 300, 400, 500, 600, 700, 800, 900],
- f: "display"
- },
- {
- n: "Big Shoulders Text",
- v: [100, 300, 400, 500, 600, 700, 800, 900],
- f: "display"
- },
- {
- n: "Bigelow Rules",
- v: [400],
- f: "display"
- },
- {
- n: "Bigshot One",
- v: [400],
- f: "display"
- },
- {
- n: "Bilbo",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Bilbo Swash Caps",
- v: [400],
- f: "handwriting"
- },
- {
- n: "BioRhyme",
- v: [200, 300, 400, 700, 800],
- f: "serif"
- },
- {
- n: "BioRhyme Expanded",
- v: [200, 300, 400, 700, 800],
- f: "serif"
- },
- {
- n: "Biryani",
- v: [200, 300, 400, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Bitter",
- v: [400, "400i", 700],
- f: "serif"
- },
- {
- n: "Black And White Picture",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Black Han Sans",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Black Ops One",
- v: [400],
- f: "display"
- },
- {
- n: "Blinker",
- v: [100, 200, 300, 400, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Bokor",
- v: [400],
- f: "display"
- },
- {
- n: "Bonbon",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Boogaloo",
- v: [400],
- f: "display"
- },
- {
- n: "Bowlby One",
- v: [400],
- f: "display"
- },
- {
- n: "Bowlby One SC",
- v: [400],
- f: "display"
- },
- {
- n: "Brawler",
- v: [400],
- f: "serif"
- },
- {
- n: "Bree Serif",
- v: [400],
- f: "serif"
- },
- {
- n: "Bubblegum Sans",
- v: [400],
- f: "display"
- },
- {
- n: "Bubbler One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Buda",
- v: [300],
- f: "display"
- },
- {
- n: "Buenard",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Bungee",
- v: [400],
- f: "display"
- },
- {
- n: "Bungee Hairline",
- v: [400],
- f: "display"
- },
- {
- n: "Bungee Inline",
- v: [400],
- f: "display"
- },
- {
- n: "Bungee Outline",
- v: [400],
- f: "display"
- },
- {
- n: "Bungee Shade",
- v: [400],
- f: "display"
- },
- {
- n: "Butcherman",
- v: [400],
- f: "display"
- },
- {
- n: "Butterfly Kids",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Cabin",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Cabin Condensed",
- v: [400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Cabin Sketch",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Caesar Dressing",
- v: [400],
- f: "display"
- },
- {
- n: "Cagliostro",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Cairo",
- v: [200, 300, 400, 600, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Caladea",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Calistoga",
- v: [400],
- f: "display"
- },
- {
- n: "Calligraffitti",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Cambay",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Cambo",
- v: [400],
- f: "serif"
- },
- {
- n: "Candal",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Cantarell",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Cantata One",
- v: [400],
- f: "serif"
- },
- {
- n: "Cantora One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Capriola",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Cardo",
- v: [400, "400i", 700],
- f: "serif"
- },
- {
- n: "Carme",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Carrois Gothic",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Carrois Gothic SC",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Carter One",
- v: [400],
- f: "display"
- },
- {
- n: "Catamaran",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Caudex",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Caveat",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Caveat Brush",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Cedarville Cursive",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Ceviche One",
- v: [400],
- f: "display"
- },
- {
- n: "Chakra Petch",
- v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Changa",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Changa One",
- v: [400, "400i"],
- f: "display"
- },
- {
- n: "Chango",
- v: [400],
- f: "display"
- },
- {
- n: "Charm",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Charmonman",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Chathura",
- v: [100, 300, 400, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Chau Philomene One",
- v: [400, "400i"],
- f: "sans-serif"
- },
- {
- n: "Chela One",
- v: [400],
- f: "display"
- },
- {
- n: "Chelsea Market",
- v: [400],
- f: "display"
- },
- {
- n: "Chenla",
- v: [400],
- f: "display"
- },
- {
- n: "Cherry Cream Soda",
- v: [400],
- f: "display"
- },
- {
- n: "Cherry Swash",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Chewy",
- v: [400],
- f: "display"
- },
- {
- n: "Chicle",
- v: [400],
- f: "display"
- },
- {
- n: "Chilanka",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Chivo",
- v: [300, "300i", 400, "400i", 700, "700i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Chonburi",
- v: [400],
- f: "display"
- },
- {
- n: "Cinzel",
- v: [400, 700, 900],
- f: "serif"
- },
- {
- n: "Cinzel Decorative",
- v: [400, 700, 900],
- f: "display"
- },
- {
- n: "Clicker Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Coda",
- v: [400, 800],
- f: "display"
- },
- {
- n: "Coda Caption",
- v: [800],
- f: "sans-serif"
- },
- {
- n: "Codystar",
- v: [300, 400],
- f: "display"
- },
- {
- n: "Coiny",
- v: [400],
- f: "display"
- },
- {
- n: "Combo",
- v: [400],
- f: "display"
- },
- {
- n: "Comfortaa",
- v: [300, 400, 500, 600, 700],
- f: "display"
- },
- {
- n: "Comic Neue",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "handwriting"
- },
- {
- n: "Coming Soon",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Concert One",
- v: [400],
- f: "display"
- },
- {
- n: "Condiment",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Content",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Contrail One",
- v: [400],
- f: "display"
- },
- {
- n: "Convergence",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Cookie",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Copse",
- v: [400],
- f: "serif"
- },
- {
- n: "Corben",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Cormorant",
- v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Cormorant Garamond",
- v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Cormorant Infant",
- v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Cormorant SC",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Cormorant Unicase",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Cormorant Upright",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Courgette",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Courier Prime",
- v: [400, "400i", 700, "700i"],
- f: "monospace"
- },
- {
- n: "Cousine",
- v: [400, "400i", 700, "700i"],
- f: "monospace"
- },
- {
- n: "Coustard",
- v: [400, 900],
- f: "serif"
- },
- {
- n: "Covered By Your Grace",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Crafty Girls",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Creepster",
- v: [400],
- f: "display"
- },
- {
- n: "Crete Round",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Crimson Pro",
- v: [200, 300, 400, 500, 600, 700, 800, 900, "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "serif"
- },
- {
- n: "Crimson Text",
- v: [400, "400i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Croissant One",
- v: [400],
- f: "display"
- },
- {
- n: "Crushed",
- v: [400],
- f: "display"
- },
- {
- n: "Cuprum",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Cute Font",
- v: [400],
- f: "display"
- },
- {
- n: "Cutive",
- v: [400],
- f: "serif"
- },
- {
- n: "Cutive Mono",
- v: [400],
- f: "monospace"
- },
- {
- n: "DM Mono",
- v: [300, "300i", 400, "400i", 500, "500i"],
- f: "monospace"
- },
- {
- n: "DM Sans",
- v: [400, "400i", 500, "500i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "DM Serif Display",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "DM Serif Text",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Damion",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Dancing Script",
- v: [400, 500, 600, 700],
- f: "handwriting"
- },
- {
- n: "Dangrek",
- v: [400],
- f: "display"
- },
- {
- n: "Darker Grotesque",
- v: [300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "David Libre",
- v: [400, 500, 700],
- f: "serif"
- },
- {
- n: "Dawning of a New Day",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Days One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Dekko",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Delius",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Delius Swash Caps",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Delius Unicase",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Della Respira",
- v: [400],
- f: "serif"
- },
- {
- n: "Denk One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Devonshire",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Dhurjati",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Didact Gothic",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Diplomata",
- v: [400],
- f: "display"
- },
- {
- n: "Diplomata SC",
- v: [400],
- f: "display"
- },
- {
- n: "Do Hyeon",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Dokdo",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Domine",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Donegal One",
- v: [400],
- f: "serif"
- },
- {
- n: "Doppio One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Dorsa",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Dosis",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Dr Sugiyama",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Duru Sans",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Dynalight",
- v: [400],
- f: "display"
- },
- {
- n: "EB Garamond",
- v: [400, 500, 600, 700, 800, "400i", "500i", "600i", "700i", "800i"],
- f: "serif"
- },
- {
- n: "Eagle Lake",
- v: [400],
- f: "handwriting"
- },
- {
- n: "East Sea Dokdo",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Eater",
- v: [400],
- f: "display"
- },
- {
- n: "Economica",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Eczar",
- v: [400, 500, 600, 700, 800],
- f: "serif"
- },
- {
- n: "El Messiri",
- v: [400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Electrolize",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Elsie",
- v: [400, 900],
- f: "display"
- },
- {
- n: "Elsie Swash Caps",
- v: [400, 900],
- f: "display"
- },
- {
- n: "Emblema One",
- v: [400],
- f: "display"
- },
- {
- n: "Emilys Candy",
- v: [400],
- f: "display"
- },
- {
- n: "Encode Sans",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Encode Sans Condensed",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Encode Sans Expanded",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Encode Sans Semi Condensed",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Encode Sans Semi Expanded",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Engagement",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Englebert",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Enriqueta",
- v: [400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Epilogue",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900, "100i", "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "Erica One",
- v: [400],
- f: "display"
- },
- {
- n: "Esteban",
- v: [400],
- f: "serif"
- },
- {
- n: "Euphoria Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Ewert",
- v: [400],
- f: "display"
- },
- {
- n: "Exo",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900, "100i", "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "Exo 2",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900, "100i", "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "Expletus Sans",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "display"
- },
- {
- n: "Fahkwang",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Fanwood Text",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Farro",
- v: [300, 400, 500, 700],
- f: "sans-serif"
- },
- {
- n: "Farsan",
- v: [400],
- f: "display"
- },
- {
- n: "Fascinate",
- v: [400],
- f: "display"
- },
- {
- n: "Fascinate Inline",
- v: [400],
- f: "display"
- },
- {
- n: "Faster One",
- v: [400],
- f: "display"
- },
- {
- n: "Fasthand",
- v: [400],
- f: "serif"
- },
- {
- n: "Fauna One",
- v: [400],
- f: "serif"
- },
- {
- n: "Faustina",
- v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
- f: "serif"
- },
- {
- n: "Federant",
- v: [400],
- f: "display"
- },
- {
- n: "Federo",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Felipa",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Fenix",
- v: [400],
- f: "serif"
- },
- {
- n: "Finger Paint",
- v: [400],
- f: "display"
- },
- {
- n: "Fira Code",
- v: [300, 400, 500, 600, 700],
- f: "monospace"
- },
- {
- n: "Fira Mono",
- v: [400, 500, 700],
- f: "monospace"
- },
- {
- n: "Fira Sans",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Fira Sans Condensed",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Fira Sans Extra Condensed",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Fjalla One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Fjord One",
- v: [400],
- f: "serif"
- },
- {
- n: "Flamenco",
- v: [300, 400],
- f: "display"
- },
- {
- n: "Flavors",
- v: [400],
- f: "display"
- },
- {
- n: "Fondamento",
- v: [400, "400i"],
- f: "handwriting"
- },
- {
- n: "Fontdiner Swanky",
- v: [400],
- f: "display"
- },
- {
- n: "Forum",
- v: [400],
- f: "display"
- },
- {
- n: "Francois One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Frank Ruhl Libre",
- v: [300, 400, 500, 700, 900],
- f: "serif"
- },
- {
- n: "Freckle Face",
- v: [400],
- f: "display"
- },
- {
- n: "Fredericka the Great",
- v: [400],
- f: "display"
- },
- {
- n: "Fredoka One",
- v: [400],
- f: "display"
- },
- {
- n: "Freehand",
- v: [400],
- f: "display"
- },
- {
- n: "Fresca",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Frijole",
- v: [400],
- f: "display"
- },
- {
- n: "Fruktur",
- v: [400],
- f: "display"
- },
- {
- n: "Fugaz One",
- v: [400],
- f: "display"
- },
- {
- n: "GFS Didot",
- v: [400],
- f: "serif"
- },
- {
- n: "GFS Neohellenic",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Gabriela",
- v: [400],
- f: "serif"
- },
- {
- n: "Gaegu",
- v: [300, 400, 700],
- f: "handwriting"
- },
- {
- n: "Gafata",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Galada",
- v: [400],
- f: "display"
- },
- {
- n: "Galdeano",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Galindo",
- v: [400],
- f: "display"
- },
- {
- n: "Gamja Flower",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Gayathri",
- v: [100, 400, 700],
- f: "sans-serif"
- },
- {
- n: "Gelasio",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Gentium Basic",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Gentium Book Basic",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Geo",
- v: [400, "400i"],
- f: "sans-serif"
- },
- {
- n: "Geostar",
- v: [400],
- f: "display"
- },
- {
- n: "Geostar Fill",
- v: [400],
- f: "display"
- },
- {
- n: "Germania One",
- v: [400],
- f: "display"
- },
- {
- n: "Gidugu",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Gilda Display",
- v: [400],
- f: "serif"
- },
- {
- n: "Girassol",
- v: [400],
- f: "display"
- },
- {
- n: "Give You Glory",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Glass Antiqua",
- v: [400],
- f: "display"
- },
- {
- n: "Glegoo",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Gloria Hallelujah",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Goblin One",
- v: [400],
- f: "display"
- },
- {
- n: "Gochi Hand",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Gorditas",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Gothic A1",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Gotu",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Goudy Bookletter 1911",
- v: [400],
- f: "serif"
- },
- {
- n: "Graduate",
- v: [400],
- f: "display"
- },
- {
- n: "Grand Hotel",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Gravitas One",
- v: [400],
- f: "display"
- },
- {
- n: "Great Vibes",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Grenze",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Grenze Gotisch",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "display"
- },
- {
- n: "Griffy",
- v: [400],
- f: "display"
- },
- {
- n: "Gruppo",
- v: [400],
- f: "display"
- },
- {
- n: "Gudea",
- v: [400, "400i", 700],
- f: "sans-serif"
- },
- {
- n: "Gugi",
- v: [400],
- f: "display"
- },
- {
- n: "Gupter",
- v: [400, 500, 700],
- f: "serif"
- },
- {
- n: "Gurajada",
- v: [400],
- f: "serif"
- },
- {
- n: "Habibi",
- v: [400],
- f: "serif"
- },
- {
- n: "Halant",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Hammersmith One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Hanalei",
- v: [400],
- f: "display"
- },
- {
- n: "Hanalei Fill",
- v: [400],
- f: "display"
- },
- {
- n: "Handlee",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Hanuman",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Happy Monkey",
- v: [400],
- f: "display"
- },
- {
- n: "Harmattan",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Headland One",
- v: [400],
- f: "serif"
- },
- {
- n: "Heebo",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Henny Penny",
- v: [400],
- f: "display"
- },
- {
- n: "Hepta Slab",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "serif"
- },
- {
- n: "Herr Von Muellerhoff",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Hi Melody",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Hind",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Hind Guntur",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Hind Madurai",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Hind Siliguri",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Hind Vadodara",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Holtwood One SC",
- v: [400],
- f: "serif"
- },
- {
- n: "Homemade Apple",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Homenaje",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "IBM Plex Mono",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "monospace"
- },
- {
- n: "IBM Plex Sans",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "IBM Plex Sans Condensed",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "IBM Plex Serif",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "IM Fell DW Pica",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "IM Fell DW Pica SC",
- v: [400],
- f: "serif"
- },
- {
- n: "IM Fell Double Pica",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "IM Fell Double Pica SC",
- v: [400],
- f: "serif"
- },
- {
- n: "IM Fell English",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "IM Fell English SC",
- v: [400],
- f: "serif"
- },
- {
- n: "IM Fell French Canon",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "IM Fell French Canon SC",
- v: [400],
- f: "serif"
- },
- {
- n: "IM Fell Great Primer",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "IM Fell Great Primer SC",
- v: [400],
- f: "serif"
- },
- {
- n: "Ibarra Real Nova",
- v: [400, "400i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Iceberg",
- v: [400],
- f: "display"
- },
- {
- n: "Iceland",
- v: [400],
- f: "display"
- },
- {
- n: "Imprima",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Inconsolata",
- v: [200, 300, 400, 500, 600, 700, 800, 900],
- f: "monospace"
- },
- {
- n: "Inder",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Indie Flower",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Inika",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Inknut Antiqua",
- v: [300, 400, 500, 600, 700, 800, 900],
- f: "serif"
- },
- {
- n: "Inria Sans",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Inria Serif",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Inter",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Irish Grover",
- v: [400],
- f: "display"
- },
- {
- n: "Istok Web",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Italiana",
- v: [400],
- f: "serif"
- },
- {
- n: "Italianno",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Itim",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Jacques Francois",
- v: [400],
- f: "serif"
- },
- {
- n: "Jacques Francois Shadow",
- v: [400],
- f: "display"
- },
- {
- n: "Jaldi",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Jim Nightshade",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Jockey One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Jolly Lodger",
- v: [400],
- f: "display"
- },
- {
- n: "Jomhuria",
- v: [400],
- f: "display"
- },
- {
- n: "Jomolhari",
- v: [400],
- f: "serif"
- },
- {
- n: "Josefin Sans",
- v: [100, 200, 300, 400, 500, 600, 700, "100i", "200i", "300i", "400i", "500i", "600i", "700i"],
- f: "sans-serif"
- },
- {
- n: "Josefin Slab",
- v: [100, "100i", 300, "300i", 400, "400i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Jost",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900, "100i", "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "Joti One",
- v: [400],
- f: "display"
- },
- {
- n: "Jua",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Judson",
- v: [400, "400i", 700],
- f: "serif"
- },
- {
- n: "Julee",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Julius Sans One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Junge",
- v: [400],
- f: "serif"
- },
- {
- n: "Jura",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Just Another Hand",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Just Me Again Down Here",
- v: [400],
- f: "handwriting"
- },
- {
- n: "K2D",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
- f: "sans-serif"
- },
- {
- n: "Kadwa",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Kalam",
- v: [300, 400, 700],
- f: "handwriting"
- },
- {
- n: "Kameron",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Kanit",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Kantumruy",
- v: [300, 400, 700],
- f: "sans-serif"
- },
- {
- n: "Karla",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Karma",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Katibeh",
- v: [400],
- f: "display"
- },
- {
- n: "Kaushan Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Kavivanar",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Kavoon",
- v: [400],
- f: "display"
- },
- {
- n: "Kdam Thmor",
- v: [400],
- f: "display"
- },
- {
- n: "Keania One",
- v: [400],
- f: "display"
- },
- {
- n: "Kelly Slab",
- v: [400],
- f: "display"
- },
- {
- n: "Kenia",
- v: [400],
- f: "display"
- },
- {
- n: "Khand",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Khmer",
- v: [400],
- f: "display"
- },
- {
- n: "Khula",
- v: [300, 400, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Kirang Haerang",
- v: [400],
- f: "display"
- },
- {
- n: "Kite One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Knewave",
- v: [400],
- f: "display"
- },
- {
- n: "KoHo",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Kodchasan",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Kosugi",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Kosugi Maru",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Kotta One",
- v: [400],
- f: "serif"
- },
- {
- n: "Koulen",
- v: [400],
- f: "display"
- },
- {
- n: "Kranky",
- v: [400],
- f: "display"
- },
- {
- n: "Kreon",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Kristi",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Krona One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Krub",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Kulim Park",
- v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Kumar One",
- v: [400],
- f: "display"
- },
- {
- n: "Kumar One Outline",
- v: [400],
- f: "display"
- },
- {
- n: "Kurale",
- v: [400],
- f: "serif"
- },
- {
- n: "La Belle Aurore",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Lacquer",
- v: [400],
- f: "display"
- },
- {
- n: "Laila",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Lakki Reddy",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Lalezar",
- v: [400],
- f: "display"
- },
- {
- n: "Lancelot",
- v: [400],
- f: "display"
- },
- {
- n: "Lateef",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Lato",
- v: [100, "100i", 300, "300i", 400, "400i", 700, "700i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "League Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Leckerli One",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Ledger",
- v: [400],
- f: "serif"
- },
- {
- n: "Lekton",
- v: [400, "400i", 700],
- f: "sans-serif"
- },
- {
- n: "Lemon",
- v: [400],
- f: "display"
- },
- {
- n: "Lemonada",
- v: [300, 400, 500, 600, 700],
- f: "display"
- },
- {
- n: "Lexend Deca",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Lexend Exa",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Lexend Giga",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Lexend Mega",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Lexend Peta",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Lexend Tera",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Lexend Zetta",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Libre Barcode 128",
- v: [400],
- f: "display"
- },
- {
- n: "Libre Barcode 128 Text",
- v: [400],
- f: "display"
- },
- {
- n: "Libre Barcode 39",
- v: [400],
- f: "display"
- },
- {
- n: "Libre Barcode 39 Extended",
- v: [400],
- f: "display"
- },
- {
- n: "Libre Barcode 39 Extended Text",
- v: [400],
- f: "display"
- },
- {
- n: "Libre Barcode 39 Text",
- v: [400],
- f: "display"
- },
- {
- n: "Libre Baskerville",
- v: [400, "400i", 700],
- f: "serif"
- },
- {
- n: "Libre Caslon Display",
- v: [400],
- f: "serif"
- },
- {
- n: "Libre Caslon Text",
- v: [400, "400i", 700],
- f: "serif"
- },
- {
- n: "Libre Franklin",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Life Savers",
- v: [400, 700, 800],
- f: "display"
- },
- {
- n: "Lilita One",
- v: [400],
- f: "display"
- },
- {
- n: "Lily Script One",
- v: [400],
- f: "display"
- },
- {
- n: "Limelight",
- v: [400],
- f: "display"
- },
- {
- n: "Linden Hill",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Literata",
- v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
- f: "serif"
- },
- {
- n: "Liu Jian Mao Cao",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Livvic",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Lobster",
- v: [400],
- f: "display"
- },
- {
- n: "Lobster Two",
- v: [400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "Londrina Outline",
- v: [400],
- f: "display"
- },
- {
- n: "Londrina Shadow",
- v: [400],
- f: "display"
- },
- {
- n: "Londrina Sketch",
- v: [400],
- f: "display"
- },
- {
- n: "Londrina Solid",
- v: [100, 300, 400, 900],
- f: "display"
- },
- {
- n: "Long Cang",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Lora",
- v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
- f: "serif"
- },
- {
- n: "Love Ya Like A Sister",
- v: [400],
- f: "display"
- },
- {
- n: "Loved by the King",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Lovers Quarrel",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Luckiest Guy",
- v: [400],
- f: "display"
- },
- {
- n: "Lusitana",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Lustria",
- v: [400],
- f: "serif"
- },
- {
- n: "M PLUS 1p",
- v: [100, 300, 400, 500, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "M PLUS Rounded 1c",
- v: [100, 300, 400, 500, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Ma Shan Zheng",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Macondo",
- v: [400],
- f: "display"
- },
- {
- n: "Macondo Swash Caps",
- v: [400],
- f: "display"
- },
- {
- n: "Mada",
- v: [200, 300, 400, 500, 600, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Magra",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Maiden Orange",
- v: [400],
- f: "display"
- },
- {
- n: "Maitree",
- v: [200, 300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Major Mono Display",
- v: [400],
- f: "monospace"
- },
- {
- n: "Mako",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Mali",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "handwriting"
- },
- {
- n: "Mallanna",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Mandali",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Manjari",
- v: [100, 400, 700],
- f: "sans-serif"
- },
- {
- n: "Manrope",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Mansalva",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Manuale",
- v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
- f: "serif"
- },
- {
- n: "Marcellus",
- v: [400],
- f: "serif"
- },
- {
- n: "Marcellus SC",
- v: [400],
- f: "serif"
- },
- {
- n: "Marck Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Margarine",
- v: [400],
- f: "display"
- },
- {
- n: "Markazi Text",
- v: [400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Marko One",
- v: [400],
- f: "serif"
- },
- {
- n: "Marmelad",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Martel",
- v: [200, 300, 400, 600, 700, 800, 900],
- f: "serif"
- },
- {
- n: "Martel Sans",
- v: [200, 300, 400, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Marvel",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Mate",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Mate SC",
- v: [400],
- f: "serif"
- },
- {
- n: "Maven Pro",
- v: [400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "McLaren",
- v: [400],
- f: "display"
- },
- {
- n: "Meddon",
- v: [400],
- f: "handwriting"
- },
- {
- n: "MedievalSharp",
- v: [400],
- f: "display"
- },
- {
- n: "Medula One",
- v: [400],
- f: "display"
- },
- {
- n: "Meera Inimai",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Megrim",
- v: [400],
- f: "display"
- },
- {
- n: "Meie Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Merienda",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Merienda One",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Merriweather",
- v: [300, "300i", 400, "400i", 700, "700i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Merriweather Sans",
- v: [300, "300i", 400, "400i", 700, "700i", 800, "800i"],
- f: "sans-serif"
- },
- {
- n: "Metal",
- v: [400],
- f: "display"
- },
- {
- n: "Metal Mania",
- v: [400],
- f: "display"
- },
- {
- n: "Metamorphous",
- v: [400],
- f: "display"
- },
- {
- n: "Metrophobic",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Michroma",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Milonga",
- v: [400],
- f: "display"
- },
- {
- n: "Miltonian",
- v: [400],
- f: "display"
- },
- {
- n: "Miltonian Tattoo",
- v: [400],
- f: "display"
- },
- {
- n: "Mina",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Miniver",
- v: [400],
- f: "display"
- },
- {
- n: "Miriam Libre",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Mirza",
- v: [400, 500, 600, 700],
- f: "display"
- },
- {
- n: "Miss Fajardose",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Mitr",
- v: [200, 300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Modak",
- v: [400],
- f: "display"
- },
- {
- n: "Modern Antiqua",
- v: [400],
- f: "display"
- },
- {
- n: "Mogra",
- v: [400],
- f: "display"
- },
- {
- n: "Molengo",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Molle",
- v: ["400i"],
- f: "handwriting"
- },
- {
- n: "Monda",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Monofett",
- v: [400],
- f: "display"
- },
- {
- n: "Monoton",
- v: [400],
- f: "display"
- },
- {
- n: "Monsieur La Doulaise",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Montaga",
- v: [400],
- f: "serif"
- },
- {
- n: "Montez",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Montserrat",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Montserrat Alternates",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Montserrat Subrayada",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Moul",
- v: [400],
- f: "display"
- },
- {
- n: "Moulpali",
- v: [400],
- f: "display"
- },
- {
- n: "Mountains of Christmas",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Mouse Memoirs",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Mr Bedfort",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Mr Dafoe",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Mr De Haviland",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Mrs Saint Delafield",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Mrs Sheppards",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Mukta",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Mukta Mahee",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Mukta Malar",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Mukta Vaani",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Mulish",
- v: [200, 300, 400, 500, 600, 700, 800, 900, "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "MuseoModerno",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "display"
- },
- {
- n: "Mystery Quest",
- v: [400],
- f: "display"
- },
- {
- n: "NTR",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Nanum Brush Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Nanum Gothic",
- v: [400, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Nanum Gothic Coding",
- v: [400, 700],
- f: "monospace"
- },
- {
- n: "Nanum Myeongjo",
- v: [400, 700, 800],
- f: "serif"
- },
- {
- n: "Nanum Pen Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Neucha",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Neuton",
- v: [200, 300, 400, "400i", 700, 800],
- f: "serif"
- },
- {
- n: "New Rocker",
- v: [400],
- f: "display"
- },
- {
- n: "News Cycle",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Niconne",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Niramit",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Nixie One",
- v: [400],
- f: "display"
- },
- {
- n: "Nobile",
- v: [400, "400i", 500, "500i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Nokora",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Norican",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Nosifer",
- v: [400],
- f: "display"
- },
- {
- n: "Notable",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Nothing You Could Do",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Noticia Text",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Noto Sans",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Noto Sans HK",
- v: [100, 300, 400, 500, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Noto Sans JP",
- v: [100, 300, 400, 500, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Noto Sans KR",
- v: [100, 300, 400, 500, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Noto Sans SC",
- v: [100, 300, 400, 500, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Noto Sans TC",
- v: [100, 300, 400, 500, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Noto Serif",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Noto Serif JP",
- v: [200, 300, 400, 500, 600, 700, 900],
- f: "serif"
- },
- {
- n: "Noto Serif KR",
- v: [200, 300, 400, 500, 600, 700, 900],
- f: "serif"
- },
- {
- n: "Noto Serif SC",
- v: [200, 300, 400, 500, 600, 700, 900],
- f: "serif"
- },
- {
- n: "Noto Serif TC",
- v: [200, 300, 400, 500, 600, 700, 900],
- f: "serif"
- },
- {
- n: "Nova Cut",
- v: [400],
- f: "display"
- },
- {
- n: "Nova Flat",
- v: [400],
- f: "display"
- },
- {
- n: "Nova Mono",
- v: [400],
- f: "monospace"
- },
- {
- n: "Nova Oval",
- v: [400],
- f: "display"
- },
- {
- n: "Nova Round",
- v: [400],
- f: "display"
- },
- {
- n: "Nova Script",
- v: [400],
- f: "display"
- },
- {
- n: "Nova Slim",
- v: [400],
- f: "display"
- },
- {
- n: "Nova Square",
- v: [400],
- f: "display"
- },
- {
- n: "Numans",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Nunito",
- v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Nunito Sans",
- v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Odibee Sans",
- v: [400],
- f: "display"
- },
- {
- n: "Odor Mean Chey",
- v: [400],
- f: "display"
- },
- {
- n: "Offside",
- v: [400],
- f: "display"
- },
- {
- n: "Old Standard TT",
- v: [400, "400i", 700],
- f: "serif"
- },
- {
- n: "Oldenburg",
- v: [400],
- f: "display"
- },
- {
- n: "Oleo Script",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Oleo Script Swash Caps",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Open Sans",
- v: [300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i"],
- f: "sans-serif"
- },
- {
- n: "Open Sans Condensed",
- v: [300, "300i", 700],
- f: "sans-serif"
- },
- {
- n: "Oranienbaum",
- v: [400],
- f: "serif"
- },
- {
- n: "Orbitron",
- v: [400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Oregano",
- v: [400, "400i"],
- f: "display"
- },
- {
- n: "Orienta",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Original Surfer",
- v: [400],
- f: "display"
- },
- {
- n: "Oswald",
- v: [200, 300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Over the Rainbow",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Overlock",
- v: [400, "400i", 700, "700i", 900, "900i"],
- f: "display"
- },
- {
- n: "Overlock SC",
- v: [400],
- f: "display"
- },
- {
- n: "Overpass",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Overpass Mono",
- v: [300, 400, 600, 700],
- f: "monospace"
- },
- {
- n: "Ovo",
- v: [400],
- f: "serif"
- },
- {
- n: "Oxanium",
- v: [200, 300, 400, 500, 600, 700, 800],
- f: "display"
- },
- {
- n: "Oxygen",
- v: [300, 400, 700],
- f: "sans-serif"
- },
- {
- n: "Oxygen Mono",
- v: [400],
- f: "monospace"
- },
- {
- n: "PT Mono",
- v: [400],
- f: "monospace"
- },
- {
- n: "PT Sans",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "PT Sans Caption",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "PT Sans Narrow",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "PT Serif",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "PT Serif Caption",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Pacifico",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Padauk",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Palanquin",
- v: [100, 200, 300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Palanquin Dark",
- v: [400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Pangolin",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Paprika",
- v: [400],
- f: "display"
- },
- {
- n: "Parisienne",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Passero One",
- v: [400],
- f: "display"
- },
- {
- n: "Passion One",
- v: [400, 700, 900],
- f: "display"
- },
- {
- n: "Pathway Gothic One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Patrick Hand",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Patrick Hand SC",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Pattaya",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Patua One",
- v: [400],
- f: "display"
- },
- {
- n: "Pavanam",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Paytone One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Peddana",
- v: [400],
- f: "serif"
- },
- {
- n: "Peralta",
- v: [400],
- f: "display"
- },
- {
- n: "Permanent Marker",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Petit Formal Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Petrona",
- v: [400],
- f: "serif"
- },
- {
- n: "Philosopher",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Piedra",
- v: [400],
- f: "display"
- },
- {
- n: "Pinyon Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Pirata One",
- v: [400],
- f: "display"
- },
- {
- n: "Plaster",
- v: [400],
- f: "display"
- },
- {
- n: "Play",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Playball",
- v: [400],
- f: "display"
- },
- {
- n: "Playfair Display",
- v: [400, 500, 600, 700, 800, 900, "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "serif"
- },
- {
- n: "Playfair Display SC",
- v: [400, "400i", 700, "700i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Podkova",
- v: [400, 500, 600, 700, 800],
- f: "serif"
- },
- {
- n: "Poiret One",
- v: [400],
- f: "display"
- },
- {
- n: "Poller One",
- v: [400],
- f: "display"
- },
- {
- n: "Poly",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Pompiere",
- v: [400],
- f: "display"
- },
- {
- n: "Pontano Sans",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Poor Story",
- v: [400],
- f: "display"
- },
- {
- n: "Poppins",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Port Lligat Sans",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Port Lligat Slab",
- v: [400],
- f: "serif"
- },
- {
- n: "Pragati Narrow",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Prata",
- v: [400],
- f: "serif"
- },
- {
- n: "Preahvihear",
- v: [400],
- f: "display"
- },
- {
- n: "Press Start 2P",
- v: [400],
- f: "display"
- },
- {
- n: "Pridi",
- v: [200, 300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Princess Sofia",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Prociono",
- v: [400],
- f: "serif"
- },
- {
- n: "Prompt",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Prosto One",
- v: [400],
- f: "display"
- },
- {
- n: "Proza Libre",
- v: [400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
- f: "sans-serif"
- },
- {
- n: "Public Sans",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900, "100i", "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "Puritan",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Purple Purse",
- v: [400],
- f: "display"
- },
- {
- n: "Quando",
- v: [400],
- f: "serif"
- },
- {
- n: "Quantico",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Quattrocento",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Quattrocento Sans",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Questrial",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Quicksand",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Quintessential",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Qwigley",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Racing Sans One",
- v: [400],
- f: "display"
- },
- {
- n: "Radley",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Rajdhani",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Rakkas",
- v: [400],
- f: "display"
- },
- {
- n: "Raleway",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900, "100i", "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "Raleway Dots",
- v: [400],
- f: "display"
- },
- {
- n: "Ramabhadra",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Ramaraja",
- v: [400],
- f: "serif"
- },
- {
- n: "Rambla",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Rammetto One",
- v: [400],
- f: "display"
- },
- {
- n: "Ranchers",
- v: [400],
- f: "display"
- },
- {
- n: "Rancho",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Ranga",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Rasa",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "Rationale",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Ravi Prakash",
- v: [400],
- f: "display"
- },
- {
- n: "Red Hat Display",
- v: [400, "400i", 500, "500i", 700, "700i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Red Hat Text",
- v: [400, "400i", 500, "500i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Red Rose",
- v: [300, 400, 700],
- f: "display"
- },
- {
- n: "Redressed",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Reem Kufi",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Reenie Beanie",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Revalia",
- v: [400],
- f: "display"
- },
- {
- n: "Rhodium Libre",
- v: [400],
- f: "serif"
- },
- {
- n: "Ribeye",
- v: [400],
- f: "display"
- },
- {
- n: "Ribeye Marrow",
- v: [400],
- f: "display"
- },
- {
- n: "Righteous",
- v: [400],
- f: "display"
- },
- {
- n: "Risque",
- v: [400],
- f: "display"
- },
- {
- n: "Roboto",
- v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 700, "700i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Roboto Condensed",
- v: [300, "300i", 400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Roboto Mono",
- v: [100, 200, 300, 400, 500, 600, 700, "100i", "200i", "300i", "400i", "500i", "600i", "700i"],
- f: "monospace"
- },
- {
- n: "Roboto Slab",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "serif"
- },
- {
- n: "Rochester",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Rock Salt",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Rokkitt",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "serif"
- },
- {
- n: "Romanesco",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Ropa Sans",
- v: [400, "400i"],
- f: "sans-serif"
- },
- {
- n: "Rosario",
- v: [300, 400, 500, 600, 700, "300i", "400i", "500i", "600i", "700i"],
- f: "sans-serif"
- },
- {
- n: "Rosarivo",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Rouge Script",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Rowdies",
- v: [300, 400, 700],
- f: "display"
- },
- {
- n: "Rozha One",
- v: [400],
- f: "serif"
- },
- {
- n: "Rubik",
- v: [300, "300i", 400, "400i", 500, "500i", 700, "700i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Rubik Mono One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Ruda",
- v: [400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Rufina",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Ruge Boogie",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Ruluko",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Rum Raisin",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Ruslan Display",
- v: [400],
- f: "display"
- },
- {
- n: "Russo One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Ruthie",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Rye",
- v: [400],
- f: "display"
- },
- {
- n: "Sacramento",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Sahitya",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Sail",
- v: [400],
- f: "display"
- },
- {
- n: "Saira",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Saira Condensed",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Saira Extra Condensed",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Saira Semi Condensed",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Saira Stencil One",
- v: [400],
- f: "display"
- },
- {
- n: "Salsa",
- v: [400],
- f: "display"
- },
- {
- n: "Sanchez",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Sancreek",
- v: [400],
- f: "display"
- },
- {
- n: "Sansita",
- v: [400, "400i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Sarabun",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
- f: "sans-serif"
- },
- {
- n: "Sarala",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Sarina",
- v: [400],
- f: "display"
- },
- {
- n: "Sarpanch",
- v: [400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Satisfy",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Sawarabi Gothic",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Sawarabi Mincho",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Scada",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Scheherazade",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Schoolbell",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Scope One",
- v: [400],
- f: "serif"
- },
- {
- n: "Seaweed Script",
- v: [400],
- f: "display"
- },
- {
- n: "Secular One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Sedgwick Ave",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Sedgwick Ave Display",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Sen",
- v: [400, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Sevillana",
- v: [400],
- f: "display"
- },
- {
- n: "Seymour One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Shadows Into Light",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Shadows Into Light Two",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Shanti",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Share",
- v: [400, "400i", 700, "700i"],
- f: "display"
- },
- {
- n: "Share Tech",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Share Tech Mono",
- v: [400],
- f: "monospace"
- },
- {
- n: "Shojumaru",
- v: [400],
- f: "display"
- },
- {
- n: "Short Stack",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Shrikhand",
- v: [400],
- f: "display"
- },
- {
- n: "Siemreap",
- v: [400],
- f: "display"
- },
- {
- n: "Sigmar One",
- v: [400],
- f: "display"
- },
- {
- n: "Signika",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Signika Negative",
- v: [300, 400, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Simonetta",
- v: [400, "400i", 900, "900i"],
- f: "display"
- },
- {
- n: "Single Day",
- v: [400],
- f: "display"
- },
- {
- n: "Sintony",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Sirin Stencil",
- v: [400],
- f: "display"
- },
- {
- n: "Six Caps",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Skranji",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Slabo 13px",
- v: [400],
- f: "serif"
- },
- {
- n: "Slabo 27px",
- v: [400],
- f: "serif"
- },
- {
- n: "Slackey",
- v: [400],
- f: "display"
- },
- {
- n: "Smokum",
- v: [400],
- f: "display"
- },
- {
- n: "Smythe",
- v: [400],
- f: "display"
- },
- {
- n: "Sniglet",
- v: [400, 800],
- f: "display"
- },
- {
- n: "Snippet",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Snowburst One",
- v: [400],
- f: "display"
- },
- {
- n: "Sofadi One",
- v: [400],
- f: "display"
- },
- {
- n: "Sofia",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Solway",
- v: [300, 400, 500, 700, 800],
- f: "serif"
- },
- {
- n: "Song Myung",
- v: [400],
- f: "serif"
- },
- {
- n: "Sonsie One",
- v: [400],
- f: "display"
- },
- {
- n: "Sora",
- v: [100, 200, 300, 400, 500, 600, 700, 800],
- f: "sans-serif"
- },
- {
- n: "Sorts Mill Goudy",
- v: [400, "400i"],
- f: "serif"
- },
- {
- n: "Source Code Pro",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 900, "900i"],
- f: "monospace"
- },
- {
- n: "Source Sans Pro",
- v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Source Serif Pro",
- v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Space Mono",
- v: [400, "400i", 700, "700i"],
- f: "monospace"
- },
- {
- n: "Spartan",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Special Elite",
- v: [400],
- f: "display"
- },
- {
- n: "Spectral",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
- f: "serif"
- },
- {
- n: "Spectral SC",
- v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
- f: "serif"
- },
- {
- n: "Spicy Rice",
- v: [400],
- f: "display"
- },
- {
- n: "Spinnaker",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Spirax",
- v: [400],
- f: "display"
- },
- {
- n: "Squada One",
- v: [400],
- f: "display"
- },
- {
- n: "Sree Krushnadevaraya",
- v: [400],
- f: "serif"
- },
- {
- n: "Sriracha",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Srisakdi",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Staatliches",
- v: [400],
- f: "display"
- },
- {
- n: "Stalemate",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Stalinist One",
- v: [400],
- f: "display"
- },
- {
- n: "Stardos Stencil",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Stint Ultra Condensed",
- v: [400],
- f: "display"
- },
- {
- n: "Stint Ultra Expanded",
- v: [400],
- f: "display"
- },
- {
- n: "Stoke",
- v: [300, 400],
- f: "serif"
- },
- {
- n: "Strait",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Stylish",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Sue Ellen Francisco",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Suez One",
- v: [400],
- f: "serif"
- },
- {
- n: "Sulphur Point",
- v: [300, 400, 700],
- f: "sans-serif"
- },
- {
- n: "Sumana",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Sunflower",
- v: [300, 500, 700],
- f: "sans-serif"
- },
- {
- n: "Sunshiney",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Supermercado One",
- v: [400],
- f: "display"
- },
- {
- n: "Sura",
- v: [400, 700],
- f: "serif"
- },
- {
- n: "Suranna",
- v: [400],
- f: "serif"
- },
- {
- n: "Suravaram",
- v: [400],
- f: "serif"
- },
- {
- n: "Suwannaphum",
- v: [400],
- f: "display"
- },
- {
- n: "Swanky and Moo Moo",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Syncopate",
- v: [400, 700],
- f: "sans-serif"
- },
- {
- n: "Tajawal",
- v: [200, 300, 400, 500, 700, 800, 900],
- f: "sans-serif"
- },
- {
- n: "Tangerine",
- v: [400, 700],
- f: "handwriting"
- },
- {
- n: "Taprom",
- v: [400],
- f: "display"
- },
- {
- n: "Tauri",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Taviraj",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Teko",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Telex",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Tenali Ramakrishna",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Tenor Sans",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Text Me One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Thasadith",
- v: [400, "400i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "The Girl Next Door",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Tienne",
- v: [400, 700, 900],
- f: "serif"
- },
- {
- n: "Tillana",
- v: [400, 500, 600, 700, 800],
- f: "handwriting"
- },
- {
- n: "Timmana",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Tinos",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Titan One",
- v: [400],
- f: "display"
- },
- {
- n: "Titillium Web",
- v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 900],
- f: "sans-serif"
- },
- {
- n: "Tomorrow",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "sans-serif"
- },
- {
- n: "Trade Winds",
- v: [400],
- f: "display"
- },
- {
- n: "Trirong",
- v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
- f: "serif"
- },
- {
- n: "Trocchi",
- v: [400],
- f: "serif"
- },
- {
- n: "Trochut",
- v: [400, "400i", 700],
- f: "display"
- },
- {
- n: "Trykker",
- v: [400],
- f: "serif"
- },
- {
- n: "Tulpen One",
- v: [400],
- f: "display"
- },
- {
- n: "Turret Road",
- v: [200, 300, 400, 500, 700, 800],
- f: "display"
- },
- {
- n: "Ubuntu",
- v: [300, "300i", 400, "400i", 500, "500i", 700, "700i"],
- f: "sans-serif"
- },
- {
- n: "Ubuntu Condensed",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Ubuntu Mono",
- v: [400, "400i", 700, "700i"],
- f: "monospace"
- },
- {
- n: "Ultra",
- v: [400],
- f: "serif"
- },
- {
- n: "Uncial Antiqua",
- v: [400],
- f: "display"
- },
- {
- n: "Underdog",
- v: [400],
- f: "display"
- },
- {
- n: "Unica One",
- v: [400],
- f: "display"
- },
- {
- n: "UnifrakturCook",
- v: [700],
- f: "display"
- },
- {
- n: "UnifrakturMaguntia",
- v: [400],
- f: "display"
- },
- {
- n: "Unkempt",
- v: [400, 700],
- f: "display"
- },
- {
- n: "Unlock",
- v: [400],
- f: "display"
- },
- {
- n: "Unna",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "VT323",
- v: [400],
- f: "monospace"
- },
- {
- n: "Vampiro One",
- v: [400],
- f: "display"
- },
- {
- n: "Varela",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Varela Round",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Varta",
- v: [300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Vast Shadow",
- v: [400],
- f: "display"
- },
- {
- n: "Vesper Libre",
- v: [400, 500, 700, 900],
- f: "serif"
- },
- {
- n: "Viaoda Libre",
- v: [400],
- f: "display"
- },
- {
- n: "Vibes",
- v: [400],
- f: "display"
- },
- {
- n: "Vibur",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Vidaloka",
- v: [400],
- f: "serif"
- },
- {
- n: "Viga",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Voces",
- v: [400],
- f: "display"
- },
- {
- n: "Volkhov",
- v: [400, "400i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Vollkorn",
- v: [400, 500, 600, 700, 800, 900, "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "serif"
- },
- {
- n: "Vollkorn SC",
- v: [400, 600, 700, 900],
- f: "serif"
- },
- {
- n: "Voltaire",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Waiting for the Sunrise",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Wallpoet",
- v: [400],
- f: "display"
- },
- {
- n: "Walter Turncoat",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Warnes",
- v: [400],
- f: "display"
- },
- {
- n: "Wellfleet",
- v: [400],
- f: "display"
- },
- {
- n: "Wendy One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Wire One",
- v: [400],
- f: "sans-serif"
- },
- {
- n: "Work Sans",
- v: [100, 200, 300, 400, 500, 600, 700, 800, 900, "100i", "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
- f: "sans-serif"
- },
- {
- n: "Yanone Kaffeesatz",
- v: [200, 300, 400, 500, 600, 700],
- f: "sans-serif"
- },
- {
- n: "Yantramanav",
- v: [100, 300, 400, 500, 700, 900],
- f: "sans-serif"
- },
- {
- n: "Yatra One",
- v: [400],
- f: "display"
- },
- {
- n: "Yellowtail",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Yeon Sung",
- v: [400],
- f: "display"
- },
- {
- n: "Yeseva One",
- v: [400],
- f: "display"
- },
- {
- n: "Yesteryear",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Yrsa",
- v: [300, 400, 500, 600, 700],
- f: "serif"
- },
- {
- n: "ZCOOL KuaiLe",
- v: [400],
- f: "display"
- },
- {
- n: "ZCOOL QingKe HuangYou",
- v: [400],
- f: "display"
- },
- {
- n: "ZCOOL XiaoWei",
- v: [400],
- f: "serif"
- },
- {
- n: "Zeyada",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Zhi Mang Xing",
- v: [400],
- f: "handwriting"
- },
- {
- n: "Zilla Slab",
- v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
- f: "serif"
- },
- {
- n: "Zilla Slab Highlight",
- v: [400, 700],
- f: "display"
- }
-];
\ No newline at end of file
+ {
+ n: "ABeeZee",
+ v: [400, "400i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Abel",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Abhaya Libre",
+ v: [400, 500, 600, 700, 800],
+ f: "serif",
+ },
+ {
+ n: "Abril Fatface",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Aclonica",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Acme",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Actor",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Adamina",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Advent Pro",
+ v: [100, 200, 300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Aguafina Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Akronim",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Aladin",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Alata",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Alatsi",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Aldrich",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Alef",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Alegreya",
+ v: [400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "serif",
+ },
+ {
+ n: "Alegreya SC",
+ v: [400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "serif",
+ },
+ {
+ n: "Alegreya Sans",
+ v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Alegreya Sans SC",
+ v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Aleo",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Alex Brush",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Alfa Slab One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Alice",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Alike",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Alike Angular",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Allan",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Allerta",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Allerta Stencil",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Allura",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Almarai",
+ v: [300, 400, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Almendra",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Almendra Display",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Almendra SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Amarante",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Amaranth",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Amatic SC",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Amethysta",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Amiko",
+ v: [400, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Amiri",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Amita",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Anaheim",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Andada",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Andika",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Angkor",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Annie Use Your Telescope",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Anonymous Pro",
+ v: [400, "400i", 700, "700i"],
+ f: "monospace",
+ },
+ {
+ n: "Antic",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Antic Didone",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Antic Slab",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Anton",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Arapey",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Arbutus",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Arbutus Slab",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Architects Daughter",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Archivo",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Archivo Black",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Archivo Narrow",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Aref Ruqaa",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Arima Madurai",
+ v: [100, 200, 300, 400, 500, 700, 800, 900],
+ f: "display",
+ },
+ {
+ n: "Arimo",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Arizonia",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Armata",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Arsenal",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Artifika",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Arvo",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Arya",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Asap",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Asap Condensed",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Asar",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Asset",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Assistant",
+ v: [200, 300, 400, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Astloch",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Asul",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Athiti",
+ v: [200, 300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Atma",
+ v: [300, 400, 500, 600, 700],
+ f: "display",
+ },
+ {
+ n: "Atomic Age",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Aubrey",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Audiowide",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Autour One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Average",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Average Sans",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Averia Gruesa Libre",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Averia Libre",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "Averia Sans Libre",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "Averia Serif Libre",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "B612",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "B612 Mono",
+ v: [400, "400i", 700, "700i"],
+ f: "monospace",
+ },
+ {
+ n: "Bad Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Bahiana",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bahianita",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bai Jamjuree",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Baloo 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Bhai 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Bhaina 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Chettan 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Da 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Paaji 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Tamma 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Tammudu 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Baloo Thambi 2",
+ v: [400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Balsamiq Sans",
+ v: [400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "Balthazar",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Bangers",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Barlow",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Barlow Condensed",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Barlow Semi Condensed",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Barriecito",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Barrio",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Basic",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Baskervville",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Battambang",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Baumans",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bayon",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Be Vietnam",
+ v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Bebas Neue",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Belgrano",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Bellefair",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Belleza",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Bellota",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "Bellota Text",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "BenchNine",
+ v: [300, 400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Bentham",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Berkshire Swash",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Beth Ellen",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Bevan",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Big Shoulders Display",
+ v: [100, 300, 400, 500, 600, 700, 800, 900],
+ f: "display",
+ },
+ {
+ n: "Big Shoulders Text",
+ v: [100, 300, 400, 500, 600, 700, 800, 900],
+ f: "display",
+ },
+ {
+ n: "Bigelow Rules",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bigshot One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bilbo",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Bilbo Swash Caps",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "BioRhyme",
+ v: [200, 300, 400, 700, 800],
+ f: "serif",
+ },
+ {
+ n: "BioRhyme Expanded",
+ v: [200, 300, 400, 700, 800],
+ f: "serif",
+ },
+ {
+ n: "Biryani",
+ v: [200, 300, 400, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Bitter",
+ v: [400, "400i", 700],
+ f: "serif",
+ },
+ {
+ n: "Black And White Picture",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Black Han Sans",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Black Ops One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Blinker",
+ v: [100, 200, 300, 400, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Bokor",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bonbon",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Boogaloo",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bowlby One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bowlby One SC",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Brawler",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Bree Serif",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Bubblegum Sans",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bubbler One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Buda",
+ v: [300],
+ f: "display",
+ },
+ {
+ n: "Buenard",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Bungee",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bungee Hairline",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bungee Inline",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bungee Outline",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Bungee Shade",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Butcherman",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Butterfly Kids",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Cabin",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Cabin Condensed",
+ v: [400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Cabin Sketch",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Caesar Dressing",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Cagliostro",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Cairo",
+ v: [200, 300, 400, 600, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Caladea",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Calistoga",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Calligraffitti",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Cambay",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Cambo",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Candal",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Cantarell",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Cantata One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Cantora One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Capriola",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Cardo",
+ v: [400, "400i", 700],
+ f: "serif",
+ },
+ {
+ n: "Carme",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Carrois Gothic",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Carrois Gothic SC",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Carter One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Catamaran",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Caudex",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Caveat",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Caveat Brush",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Cedarville Cursive",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Ceviche One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Chakra Petch",
+ v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Changa",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Changa One",
+ v: [400, "400i"],
+ f: "display",
+ },
+ {
+ n: "Chango",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Charm",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Charmonman",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Chathura",
+ v: [100, 300, 400, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Chau Philomene One",
+ v: [400, "400i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Chela One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Chelsea Market",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Chenla",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Cherry Cream Soda",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Cherry Swash",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Chewy",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Chicle",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Chilanka",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Chivo",
+ v: [300, "300i", 400, "400i", 700, "700i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Chonburi",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Cinzel",
+ v: [400, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Cinzel Decorative",
+ v: [400, 700, 900],
+ f: "display",
+ },
+ {
+ n: "Clicker Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Coda",
+ v: [400, 800],
+ f: "display",
+ },
+ {
+ n: "Coda Caption",
+ v: [800],
+ f: "sans-serif",
+ },
+ {
+ n: "Codystar",
+ v: [300, 400],
+ f: "display",
+ },
+ {
+ n: "Coiny",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Combo",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Comfortaa",
+ v: [300, 400, 500, 600, 700],
+ f: "display",
+ },
+ {
+ n: "Comic Neue",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "handwriting",
+ },
+ {
+ n: "Coming Soon",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Concert One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Condiment",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Content",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Contrail One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Convergence",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Cookie",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Copse",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Corben",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Cormorant",
+ v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Cormorant Garamond",
+ v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Cormorant Infant",
+ v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Cormorant SC",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Cormorant Unicase",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Cormorant Upright",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Courgette",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Courier Prime",
+ v: [400, "400i", 700, "700i"],
+ f: "monospace",
+ },
+ {
+ n: "Cousine",
+ v: [400, "400i", 700, "700i"],
+ f: "monospace",
+ },
+ {
+ n: "Coustard",
+ v: [400, 900],
+ f: "serif",
+ },
+ {
+ n: "Covered By Your Grace",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Crafty Girls",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Creepster",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Crete Round",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Crimson Pro",
+ v: [200, 300, 400, 500, 600, 700, 800, 900, "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
+ f: "serif",
+ },
+ {
+ n: "Crimson Text",
+ v: [400, "400i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Croissant One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Crushed",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Cuprum",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Cute Font",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Cutive",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Cutive Mono",
+ v: [400],
+ f: "monospace",
+ },
+ {
+ n: "DM Mono",
+ v: [300, "300i", 400, "400i", 500, "500i"],
+ f: "monospace",
+ },
+ {
+ n: "DM Sans",
+ v: [400, "400i", 500, "500i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "DM Serif Display",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "DM Serif Text",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Damion",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Dancing Script",
+ v: [400, 500, 600, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Dangrek",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Darker Grotesque",
+ v: [300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "David Libre",
+ v: [400, 500, 700],
+ f: "serif",
+ },
+ {
+ n: "Dawning of a New Day",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Days One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Dekko",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Delius",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Delius Swash Caps",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Delius Unicase",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Della Respira",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Denk One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Devonshire",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Dhurjati",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Didact Gothic",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Diplomata",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Diplomata SC",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Do Hyeon",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Dokdo",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Domine",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Donegal One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Doppio One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Dorsa",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Dosis",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Dr Sugiyama",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Duru Sans",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Dynalight",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "EB Garamond",
+ v: [400, 500, 600, 700, 800, "400i", "500i", "600i", "700i", "800i"],
+ f: "serif",
+ },
+ {
+ n: "Eagle Lake",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "East Sea Dokdo",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Eater",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Economica",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Eczar",
+ v: [400, 500, 600, 700, 800],
+ f: "serif",
+ },
+ {
+ n: "El Messiri",
+ v: [400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Electrolize",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Elsie",
+ v: [400, 900],
+ f: "display",
+ },
+ {
+ n: "Elsie Swash Caps",
+ v: [400, 900],
+ f: "display",
+ },
+ {
+ n: "Emblema One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Emilys Candy",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Encode Sans",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Encode Sans Condensed",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Encode Sans Expanded",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Encode Sans Semi Condensed",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Encode Sans Semi Expanded",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Engagement",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Englebert",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Enriqueta",
+ v: [400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Epilogue",
+ v: [
+ 100,
+ 200,
+ 300,
+ 400,
+ 500,
+ 600,
+ 700,
+ 800,
+ 900,
+ "100i",
+ "200i",
+ "300i",
+ "400i",
+ "500i",
+ "600i",
+ "700i",
+ "800i",
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Erica One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Esteban",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Euphoria Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Ewert",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Exo",
+ v: [
+ 100,
+ 200,
+ 300,
+ 400,
+ 500,
+ 600,
+ 700,
+ 800,
+ 900,
+ "100i",
+ "200i",
+ "300i",
+ "400i",
+ "500i",
+ "600i",
+ "700i",
+ "800i",
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Exo 2",
+ v: [
+ 100,
+ 200,
+ 300,
+ 400,
+ 500,
+ 600,
+ 700,
+ 800,
+ 900,
+ "100i",
+ "200i",
+ "300i",
+ "400i",
+ "500i",
+ "600i",
+ "700i",
+ "800i",
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Expletus Sans",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "Fahkwang",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Fanwood Text",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Farro",
+ v: [300, 400, 500, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Farsan",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fascinate",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fascinate Inline",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Faster One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fasthand",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Fauna One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Faustina",
+ v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
+ f: "serif",
+ },
+ {
+ n: "Federant",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Federo",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Felipa",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Fenix",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Finger Paint",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fira Code",
+ v: [300, 400, 500, 600, 700],
+ f: "monospace",
+ },
+ {
+ n: "Fira Mono",
+ v: [400, 500, 700],
+ f: "monospace",
+ },
+ {
+ n: "Fira Sans",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Fira Sans Condensed",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Fira Sans Extra Condensed",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Fjalla One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Fjord One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Flamenco",
+ v: [300, 400],
+ f: "display",
+ },
+ {
+ n: "Flavors",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fondamento",
+ v: [400, "400i"],
+ f: "handwriting",
+ },
+ {
+ n: "Fontdiner Swanky",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Forum",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Francois One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Frank Ruhl Libre",
+ v: [300, 400, 500, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Freckle Face",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fredericka the Great",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fredoka One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Freehand",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fresca",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Frijole",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fruktur",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Fugaz One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "GFS Didot",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "GFS Neohellenic",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Gabriela",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Gaegu",
+ v: [300, 400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Gafata",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Galada",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Galdeano",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Galindo",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Gamja Flower",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Gayathri",
+ v: [100, 400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Gelasio",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Gentium Basic",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Gentium Book Basic",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Geo",
+ v: [400, "400i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Geostar",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Geostar Fill",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Germania One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Gidugu",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Gilda Display",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Girassol",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Give You Glory",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Glass Antiqua",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Glegoo",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Gloria Hallelujah",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Goblin One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Gochi Hand",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Gorditas",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Gothic A1",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Gotu",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Goudy Bookletter 1911",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Graduate",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Grand Hotel",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Gravitas One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Great Vibes",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Grenze",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "serif",
+ },
+ {
+ n: "Grenze Gotisch",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "display",
+ },
+ {
+ n: "Griffy",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Gruppo",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Gudea",
+ v: [400, "400i", 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Gugi",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Gupter",
+ v: [400, 500, 700],
+ f: "serif",
+ },
+ {
+ n: "Gurajada",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Habibi",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Halant",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Hammersmith One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Hanalei",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Hanalei Fill",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Handlee",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Hanuman",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Happy Monkey",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Harmattan",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Headland One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Heebo",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Henny Penny",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Hepta Slab",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "serif",
+ },
+ {
+ n: "Herr Von Muellerhoff",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Hi Melody",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Hind",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Hind Guntur",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Hind Madurai",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Hind Siliguri",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Hind Vadodara",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Holtwood One SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Homemade Apple",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Homenaje",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "IBM Plex Mono",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "monospace",
+ },
+ {
+ n: "IBM Plex Sans",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "IBM Plex Sans Condensed",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "IBM Plex Serif",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "IM Fell DW Pica",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "IM Fell DW Pica SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "IM Fell Double Pica",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "IM Fell Double Pica SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "IM Fell English",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "IM Fell English SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "IM Fell French Canon",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "IM Fell French Canon SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "IM Fell Great Primer",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "IM Fell Great Primer SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Ibarra Real Nova",
+ v: [400, "400i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Iceberg",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Iceland",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Imprima",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Inconsolata",
+ v: [200, 300, 400, 500, 600, 700, 800, 900],
+ f: "monospace",
+ },
+ {
+ n: "Inder",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Indie Flower",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Inika",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Inknut Antiqua",
+ v: [300, 400, 500, 600, 700, 800, 900],
+ f: "serif",
+ },
+ {
+ n: "Inria Sans",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Inria Serif",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Inter",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Irish Grover",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Istok Web",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Italiana",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Italianno",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Itim",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Jacques Francois",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Jacques Francois Shadow",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Jaldi",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Jim Nightshade",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Jockey One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Jolly Lodger",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Jomhuria",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Jomolhari",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Josefin Sans",
+ v: [100, 200, 300, 400, 500, 600, 700, "100i", "200i", "300i", "400i", "500i", "600i", "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Josefin Slab",
+ v: [100, "100i", 300, "300i", 400, "400i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Jost",
+ v: [
+ 100,
+ 200,
+ 300,
+ 400,
+ 500,
+ 600,
+ 700,
+ 800,
+ 900,
+ "100i",
+ "200i",
+ "300i",
+ "400i",
+ "500i",
+ "600i",
+ "700i",
+ "800i",
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Joti One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Jua",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Judson",
+ v: [400, "400i", 700],
+ f: "serif",
+ },
+ {
+ n: "Julee",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Julius Sans One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Junge",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Jura",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Just Another Hand",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Just Me Again Down Here",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "K2D",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Kadwa",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Kalam",
+ v: [300, 400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Kameron",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Kanit",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Kantumruy",
+ v: [300, 400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Karla",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Karma",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Katibeh",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kaushan Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Kavivanar",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Kavoon",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kdam Thmor",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Keania One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kelly Slab",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kenia",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Khand",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Khmer",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Khula",
+ v: [300, 400, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Kirang Haerang",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kite One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Knewave",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "KoHo",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Kodchasan",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Kosugi",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Kosugi Maru",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Kotta One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Koulen",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kranky",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kreon",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Kristi",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Krona One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Krub",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Kulim Park",
+ v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Kumar One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kumar One Outline",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Kurale",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "La Belle Aurore",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Lacquer",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Laila",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Lakki Reddy",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Lalezar",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Lancelot",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Lateef",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Lato",
+ v: [100, "100i", 300, "300i", 400, "400i", 700, "700i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "League Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Leckerli One",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Ledger",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Lekton",
+ v: [400, "400i", 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Lemon",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Lemonada",
+ v: [300, 400, 500, 600, 700],
+ f: "display",
+ },
+ {
+ n: "Lexend Deca",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Lexend Exa",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Lexend Giga",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Lexend Mega",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Lexend Peta",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Lexend Tera",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Lexend Zetta",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Libre Barcode 128",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Libre Barcode 128 Text",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Libre Barcode 39",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Libre Barcode 39 Extended",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Libre Barcode 39 Extended Text",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Libre Barcode 39 Text",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Libre Baskerville",
+ v: [400, "400i", 700],
+ f: "serif",
+ },
+ {
+ n: "Libre Caslon Display",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Libre Caslon Text",
+ v: [400, "400i", 700],
+ f: "serif",
+ },
+ {
+ n: "Libre Franklin",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Life Savers",
+ v: [400, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Lilita One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Lily Script One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Limelight",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Linden Hill",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Literata",
+ v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
+ f: "serif",
+ },
+ {
+ n: "Liu Jian Mao Cao",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Livvic",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Lobster",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Lobster Two",
+ v: [400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "Londrina Outline",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Londrina Shadow",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Londrina Sketch",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Londrina Solid",
+ v: [100, 300, 400, 900],
+ f: "display",
+ },
+ {
+ n: "Long Cang",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Lora",
+ v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
+ f: "serif",
+ },
+ {
+ n: "Love Ya Like A Sister",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Loved by the King",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Lovers Quarrel",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Luckiest Guy",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Lusitana",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Lustria",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "M PLUS 1p",
+ v: [100, 300, 400, 500, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "M PLUS Rounded 1c",
+ v: [100, 300, 400, 500, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Ma Shan Zheng",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Macondo",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Macondo Swash Caps",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Mada",
+ v: [200, 300, 400, 500, 600, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Magra",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Maiden Orange",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Maitree",
+ v: [200, 300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Major Mono Display",
+ v: [400],
+ f: "monospace",
+ },
+ {
+ n: "Mako",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Mali",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "handwriting",
+ },
+ {
+ n: "Mallanna",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Mandali",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Manjari",
+ v: [100, 400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Manrope",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Mansalva",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Manuale",
+ v: [400, 500, 600, 700, "400i", "500i", "600i", "700i"],
+ f: "serif",
+ },
+ {
+ n: "Marcellus",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Marcellus SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Marck Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Margarine",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Markazi Text",
+ v: [400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Marko One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Marmelad",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Martel",
+ v: [200, 300, 400, 600, 700, 800, 900],
+ f: "serif",
+ },
+ {
+ n: "Martel Sans",
+ v: [200, 300, 400, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Marvel",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Mate",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Mate SC",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Maven Pro",
+ v: [400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "McLaren",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Meddon",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "MedievalSharp",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Medula One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Meera Inimai",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Megrim",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Meie Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Merienda",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Merienda One",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Merriweather",
+ v: [300, "300i", 400, "400i", 700, "700i", 900, "900i"],
+ f: "serif",
+ },
+ {
+ n: "Merriweather Sans",
+ v: [300, "300i", 400, "400i", 700, "700i", 800, "800i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Metal",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Metal Mania",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Metamorphous",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Metrophobic",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Michroma",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Milonga",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Miltonian",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Miltonian Tattoo",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Mina",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Miniver",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Miriam Libre",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Mirza",
+ v: [400, 500, 600, 700],
+ f: "display",
+ },
+ {
+ n: "Miss Fajardose",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Mitr",
+ v: [200, 300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Modak",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Modern Antiqua",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Mogra",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Molengo",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Molle",
+ v: ["400i"],
+ f: "handwriting",
+ },
+ {
+ n: "Monda",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Monofett",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Monoton",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Monsieur La Doulaise",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Montaga",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Montez",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Montserrat",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Montserrat Alternates",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Montserrat Subrayada",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Moul",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Moulpali",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Mountains of Christmas",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Mouse Memoirs",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Mr Bedfort",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Mr Dafoe",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Mr De Haviland",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Mrs Saint Delafield",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Mrs Sheppards",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Mukta",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Mukta Mahee",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Mukta Malar",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Mukta Vaani",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Mulish",
+ v: [200, 300, 400, 500, 600, 700, 800, 900, "200i", "300i", "400i", "500i", "600i", "700i", "800i", "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "MuseoModerno",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "display",
+ },
+ {
+ n: "Mystery Quest",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "NTR",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Nanum Brush Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Nanum Gothic",
+ v: [400, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Nanum Gothic Coding",
+ v: [400, 700],
+ f: "monospace",
+ },
+ {
+ n: "Nanum Myeongjo",
+ v: [400, 700, 800],
+ f: "serif",
+ },
+ {
+ n: "Nanum Pen Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Neucha",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Neuton",
+ v: [200, 300, 400, "400i", 700, 800],
+ f: "serif",
+ },
+ {
+ n: "New Rocker",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "News Cycle",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Niconne",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Niramit",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Nixie One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Nobile",
+ v: [400, "400i", 500, "500i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Nokora",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Norican",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Nosifer",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Notable",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Nothing You Could Do",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Noticia Text",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Noto Sans",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Noto Sans HK",
+ v: [100, 300, 400, 500, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Noto Sans JP",
+ v: [100, 300, 400, 500, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Noto Sans KR",
+ v: [100, 300, 400, 500, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Noto Sans SC",
+ v: [100, 300, 400, 500, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Noto Sans TC",
+ v: [100, 300, 400, 500, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Noto Serif",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Noto Serif JP",
+ v: [200, 300, 400, 500, 600, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Noto Serif KR",
+ v: [200, 300, 400, 500, 600, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Noto Serif SC",
+ v: [200, 300, 400, 500, 600, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Noto Serif TC",
+ v: [200, 300, 400, 500, 600, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Nova Cut",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Nova Flat",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Nova Mono",
+ v: [400],
+ f: "monospace",
+ },
+ {
+ n: "Nova Oval",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Nova Round",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Nova Script",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Nova Slim",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Nova Square",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Numans",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Nunito",
+ v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Nunito Sans",
+ v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Odibee Sans",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Odor Mean Chey",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Offside",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Old Standard TT",
+ v: [400, "400i", 700],
+ f: "serif",
+ },
+ {
+ n: "Oldenburg",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Oleo Script",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Oleo Script Swash Caps",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Open Sans",
+ v: [300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Open Sans Condensed",
+ v: [300, "300i", 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Oranienbaum",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Orbitron",
+ v: [400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Oregano",
+ v: [400, "400i"],
+ f: "display",
+ },
+ {
+ n: "Orienta",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Original Surfer",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Oswald",
+ v: [200, 300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Over the Rainbow",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Overlock",
+ v: [400, "400i", 700, "700i", 900, "900i"],
+ f: "display",
+ },
+ {
+ n: "Overlock SC",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Overpass",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Overpass Mono",
+ v: [300, 400, 600, 700],
+ f: "monospace",
+ },
+ {
+ n: "Ovo",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Oxanium",
+ v: [200, 300, 400, 500, 600, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Oxygen",
+ v: [300, 400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Oxygen Mono",
+ v: [400],
+ f: "monospace",
+ },
+ {
+ n: "PT Mono",
+ v: [400],
+ f: "monospace",
+ },
+ {
+ n: "PT Sans",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "PT Sans Caption",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "PT Sans Narrow",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "PT Serif",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "PT Serif Caption",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Pacifico",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Padauk",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Palanquin",
+ v: [100, 200, 300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Palanquin Dark",
+ v: [400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Pangolin",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Paprika",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Parisienne",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Passero One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Passion One",
+ v: [400, 700, 900],
+ f: "display",
+ },
+ {
+ n: "Pathway Gothic One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Patrick Hand",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Patrick Hand SC",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Pattaya",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Patua One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Pavanam",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Paytone One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Peddana",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Peralta",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Permanent Marker",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Petit Formal Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Petrona",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Philosopher",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Piedra",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Pinyon Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Pirata One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Plaster",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Play",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Playball",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Playfair Display",
+ v: [400, 500, 600, 700, 800, 900, "400i", "500i", "600i", "700i", "800i", "900i"],
+ f: "serif",
+ },
+ {
+ n: "Playfair Display SC",
+ v: [400, "400i", 700, "700i", 900, "900i"],
+ f: "serif",
+ },
+ {
+ n: "Podkova",
+ v: [400, 500, 600, 700, 800],
+ f: "serif",
+ },
+ {
+ n: "Poiret One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Poller One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Poly",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Pompiere",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Pontano Sans",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Poor Story",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Poppins",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Port Lligat Sans",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Port Lligat Slab",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Pragati Narrow",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Prata",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Preahvihear",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Press Start 2P",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Pridi",
+ v: [200, 300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Princess Sofia",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Prociono",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Prompt",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Prosto One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Proza Libre",
+ v: [400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Public Sans",
+ v: [
+ 100,
+ 200,
+ 300,
+ 400,
+ 500,
+ 600,
+ 700,
+ 800,
+ 900,
+ "100i",
+ "200i",
+ "300i",
+ "400i",
+ "500i",
+ "600i",
+ "700i",
+ "800i",
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Puritan",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Purple Purse",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Quando",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Quantico",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Quattrocento",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Quattrocento Sans",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Questrial",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Quicksand",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Quintessential",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Qwigley",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Racing Sans One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Radley",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Rajdhani",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Rakkas",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Raleway",
+ v: [
+ 100,
+ 200,
+ 300,
+ 400,
+ 500,
+ 600,
+ 700,
+ 800,
+ 900,
+ "100i",
+ "200i",
+ "300i",
+ "400i",
+ "500i",
+ "600i",
+ "700i",
+ "800i",
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Raleway Dots",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Ramabhadra",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Ramaraja",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Rambla",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Rammetto One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Ranchers",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Rancho",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Ranga",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Rasa",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "Rationale",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Ravi Prakash",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Red Hat Display",
+ v: [400, "400i", 500, "500i", 700, "700i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Red Hat Text",
+ v: [400, "400i", 500, "500i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Red Rose",
+ v: [300, 400, 700],
+ f: "display",
+ },
+ {
+ n: "Redressed",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Reem Kufi",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Reenie Beanie",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Revalia",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Rhodium Libre",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Ribeye",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Ribeye Marrow",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Righteous",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Risque",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Roboto",
+ v: [100, "100i", 300, "300i", 400, "400i", 500, "500i", 700, "700i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Roboto Condensed",
+ v: [300, "300i", 400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Roboto Mono",
+ v: [100, 200, 300, 400, 500, 600, 700, "100i", "200i", "300i", "400i", "500i", "600i", "700i"],
+ f: "monospace",
+ },
+ {
+ n: "Roboto Slab",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "serif",
+ },
+ {
+ n: "Rochester",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Rock Salt",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Rokkitt",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "serif",
+ },
+ {
+ n: "Romanesco",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Ropa Sans",
+ v: [400, "400i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Rosario",
+ v: [300, 400, 500, 600, 700, "300i", "400i", "500i", "600i", "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Rosarivo",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Rouge Script",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Rowdies",
+ v: [300, 400, 700],
+ f: "display",
+ },
+ {
+ n: "Rozha One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Rubik",
+ v: [300, "300i", 400, "400i", 500, "500i", 700, "700i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Rubik Mono One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Ruda",
+ v: [400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Rufina",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Ruge Boogie",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Ruluko",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Rum Raisin",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Ruslan Display",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Russo One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Ruthie",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Rye",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sacramento",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Sahitya",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Sail",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Saira",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Saira Condensed",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Saira Extra Condensed",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Saira Semi Condensed",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Saira Stencil One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Salsa",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sanchez",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Sancreek",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sansita",
+ v: [400, "400i", 700, "700i", 800, "800i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Sarabun",
+ v: [100, "100i", 200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Sarala",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Sarina",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sarpanch",
+ v: [400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Satisfy",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Sawarabi Gothic",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Sawarabi Mincho",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Scada",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Scheherazade",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Schoolbell",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Scope One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Seaweed Script",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Secular One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Sedgwick Ave",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Sedgwick Ave Display",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Sen",
+ v: [400, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Sevillana",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Seymour One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Shadows Into Light",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Shadows Into Light Two",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Shanti",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Share",
+ v: [400, "400i", 700, "700i"],
+ f: "display",
+ },
+ {
+ n: "Share Tech",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Share Tech Mono",
+ v: [400],
+ f: "monospace",
+ },
+ {
+ n: "Shojumaru",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Short Stack",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Shrikhand",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Siemreap",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sigmar One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Signika",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Signika Negative",
+ v: [300, 400, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Simonetta",
+ v: [400, "400i", 900, "900i"],
+ f: "display",
+ },
+ {
+ n: "Single Day",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sintony",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Sirin Stencil",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Six Caps",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Skranji",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Slabo 13px",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Slabo 27px",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Slackey",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Smokum",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Smythe",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sniglet",
+ v: [400, 800],
+ f: "display",
+ },
+ {
+ n: "Snippet",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Snowburst One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sofadi One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sofia",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Solway",
+ v: [300, 400, 500, 700, 800],
+ f: "serif",
+ },
+ {
+ n: "Song Myung",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Sonsie One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sora",
+ v: [100, 200, 300, 400, 500, 600, 700, 800],
+ f: "sans-serif",
+ },
+ {
+ n: "Sorts Mill Goudy",
+ v: [400, "400i"],
+ f: "serif",
+ },
+ {
+ n: "Source Code Pro",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 900, "900i"],
+ f: "monospace",
+ },
+ {
+ n: "Source Sans Pro",
+ v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 900, "900i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Source Serif Pro",
+ v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 900, "900i"],
+ f: "serif",
+ },
+ {
+ n: "Space Mono",
+ v: [400, "400i", 700, "700i"],
+ f: "monospace",
+ },
+ {
+ n: "Spartan",
+ v: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Special Elite",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Spectral",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
+ f: "serif",
+ },
+ {
+ n: "Spectral SC",
+ v: [200, "200i", 300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i", 800, "800i"],
+ f: "serif",
+ },
+ {
+ n: "Spicy Rice",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Spinnaker",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Spirax",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Squada One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sree Krushnadevaraya",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Sriracha",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Srisakdi",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Staatliches",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Stalemate",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Stalinist One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Stardos Stencil",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Stint Ultra Condensed",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Stint Ultra Expanded",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Stoke",
+ v: [300, 400],
+ f: "serif",
+ },
+ {
+ n: "Strait",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Stylish",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Sue Ellen Francisco",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Suez One",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Sulphur Point",
+ v: [300, 400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Sumana",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Sunflower",
+ v: [300, 500, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Sunshiney",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Supermercado One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Sura",
+ v: [400, 700],
+ f: "serif",
+ },
+ {
+ n: "Suranna",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Suravaram",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Suwannaphum",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Swanky and Moo Moo",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Syncopate",
+ v: [400, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Tajawal",
+ v: [200, 300, 400, 500, 700, 800, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Tangerine",
+ v: [400, 700],
+ f: "handwriting",
+ },
+ {
+ n: "Taprom",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Tauri",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Taviraj",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "serif",
+ },
+ {
+ n: "Teko",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Telex",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Tenali Ramakrishna",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Tenor Sans",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Text Me One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Thasadith",
+ v: [400, "400i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "The Girl Next Door",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Tienne",
+ v: [400, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Tillana",
+ v: [400, 500, 600, 700, 800],
+ f: "handwriting",
+ },
+ {
+ n: "Timmana",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Tinos",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Titan One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Titillium Web",
+ v: [200, "200i", 300, "300i", 400, "400i", 600, "600i", 700, "700i", 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Tomorrow",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Trade Winds",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Trirong",
+ v: [
+ 100,
+ "100i",
+ 200,
+ "200i",
+ 300,
+ "300i",
+ 400,
+ "400i",
+ 500,
+ "500i",
+ 600,
+ "600i",
+ 700,
+ "700i",
+ 800,
+ "800i",
+ 900,
+ "900i",
+ ],
+ f: "serif",
+ },
+ {
+ n: "Trocchi",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Trochut",
+ v: [400, "400i", 700],
+ f: "display",
+ },
+ {
+ n: "Trykker",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Tulpen One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Turret Road",
+ v: [200, 300, 400, 500, 700, 800],
+ f: "display",
+ },
+ {
+ n: "Ubuntu",
+ v: [300, "300i", 400, "400i", 500, "500i", 700, "700i"],
+ f: "sans-serif",
+ },
+ {
+ n: "Ubuntu Condensed",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Ubuntu Mono",
+ v: [400, "400i", 700, "700i"],
+ f: "monospace",
+ },
+ {
+ n: "Ultra",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Uncial Antiqua",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Underdog",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Unica One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "UnifrakturCook",
+ v: [700],
+ f: "display",
+ },
+ {
+ n: "UnifrakturMaguntia",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Unkempt",
+ v: [400, 700],
+ f: "display",
+ },
+ {
+ n: "Unlock",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Unna",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "VT323",
+ v: [400],
+ f: "monospace",
+ },
+ {
+ n: "Vampiro One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Varela",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Varela Round",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Varta",
+ v: [300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Vast Shadow",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Vesper Libre",
+ v: [400, 500, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Viaoda Libre",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Vibes",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Vibur",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Vidaloka",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Viga",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Voces",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Volkhov",
+ v: [400, "400i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Vollkorn",
+ v: [400, 500, 600, 700, 800, 900, "400i", "500i", "600i", "700i", "800i", "900i"],
+ f: "serif",
+ },
+ {
+ n: "Vollkorn SC",
+ v: [400, 600, 700, 900],
+ f: "serif",
+ },
+ {
+ n: "Voltaire",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Waiting for the Sunrise",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Wallpoet",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Walter Turncoat",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Warnes",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Wellfleet",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Wendy One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Wire One",
+ v: [400],
+ f: "sans-serif",
+ },
+ {
+ n: "Work Sans",
+ v: [
+ 100,
+ 200,
+ 300,
+ 400,
+ 500,
+ 600,
+ 700,
+ 800,
+ 900,
+ "100i",
+ "200i",
+ "300i",
+ "400i",
+ "500i",
+ "600i",
+ "700i",
+ "800i",
+ "900i",
+ ],
+ f: "sans-serif",
+ },
+ {
+ n: "Yanone Kaffeesatz",
+ v: [200, 300, 400, 500, 600, 700],
+ f: "sans-serif",
+ },
+ {
+ n: "Yantramanav",
+ v: [100, 300, 400, 500, 700, 900],
+ f: "sans-serif",
+ },
+ {
+ n: "Yatra One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Yellowtail",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Yeon Sung",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Yeseva One",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "Yesteryear",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Yrsa",
+ v: [300, 400, 500, 600, 700],
+ f: "serif",
+ },
+ {
+ n: "ZCOOL KuaiLe",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "ZCOOL QingKe HuangYou",
+ v: [400],
+ f: "display",
+ },
+ {
+ n: "ZCOOL XiaoWei",
+ v: [400],
+ f: "serif",
+ },
+ {
+ n: "Zeyada",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Zhi Mang Xing",
+ v: [400],
+ f: "handwriting",
+ },
+ {
+ n: "Zilla Slab",
+ v: [300, "300i", 400, "400i", 500, "500i", 600, "600i", 700, "700i"],
+ f: "serif",
+ },
+ {
+ n: "Zilla Slab Highlight",
+ v: [400, 700],
+ f: "display",
+ },
+];
diff --git a/assets/reactjs/src/components/fields/assets/IconListData.js b/assets/reactjs/src/components/fields/assets/IconListData.js
index 795daf6b..3c101d42 100644
--- a/assets/reactjs/src/components/fields/assets/IconListData.js
+++ b/assets/reactjs/src/components/fields/assets/IconListData.js
@@ -1,6 +1,1482 @@
export default [
- 'fas fa-ad','fas fa-address-book','fas fa-address-card','fas fa-adjust','fas fa-air-freshener','fas fa-align-center','fas fa-align-justify','fas fa-align-left','fas fa-align-right','fas fa-allergies','fas fa-ambulance','fas fa-american-sign-language-interpreting','fas fa-anchor','fas fa-angle-double-down','fas fa-angle-double-left','fas fa-angle-double-right','fas fa-angle-double-up','fas fa-angle-down','fas fa-angle-left','fas fa-angle-right','fas fa-angle-up','fas fa-angry','fas fa-ankh','fas fa-apple-alt','fas fa-archive','fas fa-archway','fas fa-arrow-alt-circle-down','fas fa-arrow-alt-circle-left','fas fa-arrow-alt-circle-right','fas fa-arrow-alt-circle-up','fas fa-arrow-circle-down','fas fa-arrow-circle-left','fas fa-arrow-circle-right','fas fa-arrow-circle-up','fas fa-arrow-down','fas fa-arrow-left','fas fa-arrow-right','fas fa-arrow-up','fas fa-arrows-alt','fas fa-arrows-alt-h','fas fa-arrows-alt-v','fas fa-assistive-listening-systems','fas fa-asterisk','fas fa-at','fas fa-atlas','fas fa-atom','fas fa-audio-description','fas fa-award','fas fa-baby','fas fa-baby-carriage','fas fa-backspace','fas fa-backward','fas fa-balance-scale','fas fa-ban','fas fa-band-aid','fas fa-barcode','fas fa-bars','fas fa-baseball-ball','fas fa-basketball-ball','fas fa-bath','fas fa-battery-empty','fas fa-battery-full','fas fa-battery-half','fas fa-battery-quarter','fas fa-battery-three-quarters','fas fa-bed','fas fa-beer','fas fa-bell','fas fa-bell-slash','fas fa-bezier-curve','fas fa-bible','fas fa-bicycle','fas fa-binoculars','fas fa-biohazard','fas fa-birthday-cake','fas fa-blender','fas fa-blender-phone','fas fa-blind','fas fa-blog','fas fa-bold','fas fa-bolt','fas fa-bomb','fas fa-bone','fas fa-bong','fas fa-book','fas fa-book-dead','fas fa-book-open','fas fa-book-reader','fas fa-bookmark','fas fa-bowling-ball','fas fa-box','fas fa-box-open','fas fa-boxes','fas fa-braille','fas fa-brain','fas fa-briefcase','fas fa-briefcase-medical','fas fa-broadcast-tower','fas fa-broom','fas fa-brush','fas fa-bug','fas fa-building','fas fa-bullhorn','fas fa-bullseye','fas fa-burn','fas fa-bus','fas fa-bus-alt','fas fa-business-time','fas fa-calculator','fas fa-calendar','fas fa-calendar-alt','fas fa-calendar-check','fas fa-calendar-day','fas fa-calendar-minus','fas fa-calendar-plus','fas fa-calendar-times','fas fa-calendar-week','fas fa-camera','fas fa-camera-retro','fas fa-campground','fas fa-candy-cane','fas fa-cannabis','fas fa-capsules','fas fa-car','fas fa-car-alt','fas fa-car-battery','fas fa-car-crash','fas fa-car-side','fas fa-caret-down','fas fa-caret-left','fas fa-caret-right','fas fa-caret-square-down','fas fa-caret-square-left','fas fa-caret-square-right','fas fa-caret-square-up','fas fa-caret-up','fas fa-carrot','fas fa-cart-arrow-down','fas fa-cart-plus','fas fa-cash-register','fas fa-cat','fas fa-certificate','fas fa-chair','fas fa-chalkboard','fas fa-chalkboard-teacher','fas fa-charging-station','fas fa-chart-area','fas fa-chart-bar','fas fa-chart-line','fas fa-chart-pie','fas fa-check','fas fa-check-circle','fas fa-check-double','fas fa-check-square','fas fa-chess','fas fa-chess-bishop','fas fa-chess-board','fas fa-chess-king','fas fa-chess-knight','fas fa-chess-pawn','fas fa-chess-queen','fas fa-chess-rook','fas fa-chevron-circle-down','fas fa-chevron-circle-left','fas fa-chevron-circle-right','fas fa-chevron-circle-up','fas fa-chevron-down','fas fa-chevron-left','fas fa-chevron-right','fas fa-chevron-up','fas fa-child','fas fa-church','fas fa-circle','fas fa-circle-notch','fas fa-city','fas fa-clipboard','fas fa-clipboard-check','fas fa-clipboard-list','fas fa-clock','fas fa-clone','fas fa-closed-captioning','fas fa-cloud','fas fa-cloud-download-alt','fas fa-cloud-meatball','fas fa-cloud-moon','fas fa-cloud-moon-rain','fas fa-cloud-rain','fas fa-cloud-showers-heavy','fas fa-cloud-sun','fas fa-cloud-sun-rain','fas fa-cloud-upload-alt','fas fa-cocktail','fas fa-code','fas fa-code-branch','fas fa-coffee','fas fa-cog','fas fa-cogs','fas fa-coins','fas fa-columns','fas fa-comment','fas fa-comment-alt','fas fa-comment-dollar','fas fa-comment-dots','fas fa-comment-slash','fas fa-comments','fas fa-comments-dollar','fas fa-compact-disc','fas fa-compass','fas fa-compress','fas fa-compress-arrows-alt','fas fa-concierge-bell','fas fa-cookie','fas fa-cookie-bite','fas fa-copy','fas fa-copyright','fas fa-couch','fas fa-credit-card','fas fa-crop','fas fa-crop-alt','fas fa-cross','fas fa-crosshairs','fas fa-crow','fas fa-crown','fas fa-cube','fas fa-cubes','fas fa-cut','fas fa-database','fas fa-deaf','fas fa-democrat','fas fa-desktop','fas fa-dharmachakra','fas fa-diagnoses','fas fa-dice','fas fa-dice-d20','fas fa-dice-d6','fas fa-dice-five','fas fa-dice-four','fas fa-dice-one','fas fa-dice-six','fas fa-dice-three','fas fa-dice-two','fas fa-digital-tachograph','fas fa-directions','fas fa-divide','fas fa-dizzy','fas fa-dna','fas fa-dog','fas fa-dollar-sign','fas fa-dolly','fas fa-dolly-flatbed','fas fa-donate','fas fa-door-closed','fas fa-door-open','fas fa-dot-circle','fas fa-dove','fas fa-download','fas fa-drafting-compass','fas fa-dragon','fas fa-draw-polygon','fas fa-drum','fas fa-drum-steelpan','fas fa-drumstick-bite','fas fa-dumbbell','fas fa-dumpster','fas fa-dumpster-fire','fas fa-dungeon','fas fa-edit','fas fa-eject','fas fa-ellipsis-h','fas fa-ellipsis-v','fas fa-envelope','fas fa-envelope-open','fas fa-envelope-open-text','fas fa-envelope-square','fas fa-equals','fas fa-eraser','fas fa-ethernet','fas fa-euro-sign','fas fa-exchange-alt','fas fa-exclamation','fas fa-exclamation-circle','fas fa-exclamation-triangle','fas fa-expand','fas fa-expand-arrows-alt','fas fa-external-link-alt','fas fa-external-link-square-alt','fas fa-eye','fas fa-eye-dropper','fas fa-eye-slash','fas fa-fast-backward','fas fa-fast-forward','fas fa-fax','fas fa-feather','fas fa-feather-alt','fas fa-female','fas fa-fighter-jet','fas fa-file','fas fa-file-alt','fas fa-file-archive','fas fa-file-audio','fas fa-file-code','fas fa-file-contract','fas fa-file-csv',
- 'fas fa-file-download','fas fa-file-excel','fas fa-file-export','fas fa-file-image','fas fa-file-import','fas fa-file-invoice','fas fa-file-invoice-dollar','fas fa-file-medical','fas fa-file-medical-alt','fas fa-file-pdf','fas fa-file-powerpoint','fas fa-file-prescription','fas fa-file-signature','fas fa-file-upload','fas fa-file-video','fas fa-file-word','fas fa-fill','fas fa-fill-drip','fas fa-film','fas fa-filter','fas fa-fingerprint','fas fa-fire','fas fa-fire-alt','fas fa-fire-extinguisher','fas fa-first-aid','fas fa-fish','fas fa-fist-raised','fas fa-flag','fas fa-flag-checkered','fas fa-flag-usa','fas fa-flask','fas fa-flushed','fas fa-folder','fas fa-folder-minus','fas fa-folder-open','fas fa-folder-plus','fas fa-font','fas fa-football-ball','fas fa-forward','fas fa-frog','fas fa-frown','fas fa-frown-open','fas fa-funnel-dollar','fas fa-futbol','fas fa-gamepad','fas fa-gas-pump','fas fa-gavel','fas fa-gem','fas fa-genderless','fas fa-ghost','fas fa-gift','fas fa-gifts','fas fa-glass-cheers','fas fa-glass-martini','fas fa-glass-martini-alt','fas fa-glass-whiskey','fas fa-glasses','fas fa-globe','fas fa-globe-africa','fas fa-globe-americas','fas fa-globe-asia','fas fa-globe-europe','fas fa-golf-ball','fas fa-gopuram','fas fa-graduation-cap','fas fa-greater-than','fas fa-greater-than-equal','fas fa-grimace','fas fa-grin','fas fa-grin-alt','fas fa-grin-beam','fas fa-grin-beam-sweat','fas fa-grin-hearts','fas fa-grin-squint','fas fa-grin-squint-tears','fas fa-grin-stars','fas fa-grin-tears','fas fa-grin-tongue','fas fa-grin-tongue-squint','fas fa-grin-tongue-wink','fas fa-grin-wink','fas fa-grip-horizontal','fas fa-grip-lines','fas fa-grip-lines-vertical','fas fa-grip-vertical','fas fa-guitar','fas fa-h-square','fas fa-hammer','fas fa-hamsa','fas fa-hand-holding','fas fa-hand-holding-heart','fas fa-hand-holding-usd','fas fa-hand-lizard','fas fa-hand-paper','fas fa-hand-peace','fas fa-hand-point-down','fas fa-hand-point-left','fas fa-hand-point-right','fas fa-hand-point-up','fas fa-hand-pointer','fas fa-hand-rock','fas fa-hand-scissors','fas fa-hand-spock','fas fa-hands','fas fa-hands-helping','fas fa-handshake','fas fa-hanukiah','fas fa-hashtag','fas fa-hat-wizard','fas fa-haykal','fas fa-hdd','fas fa-heading','fas fa-headphones','fas fa-headphones-alt','fas fa-headset','fas fa-heart','fas fa-heart-broken','fas fa-heartbeat','fas fa-helicopter','fas fa-highlighter','fas fa-hiking','fas fa-hippo','fas fa-history','fas fa-hockey-puck','fas fa-holly-berry','fas fa-home','fas fa-horse','fas fa-horse-head','fas fa-hospital','fas fa-hospital-alt','fas fa-hospital-symbol','fas fa-hot-tub','fas fa-hotel','fas fa-hourglass','fas fa-hourglass-end','fas fa-hourglass-half','fas fa-hourglass-start','fas fa-house-damage','fas fa-hryvnia','fas fa-i-cursor','fas fa-icicles','fas fa-id-badge','fas fa-id-card','fas fa-id-card-alt','fas fa-igloo','fas fa-image','fas fa-images','fas fa-inbox','fas fa-indent','fas fa-industry','fas fa-infinity','fas fa-info','fas fa-info-circle','fas fa-italic','fas fa-jedi','fas fa-joint','fas fa-journal-whills','fas fa-kaaba','fas fa-key','fas fa-keyboard','fas fa-khanda','fas fa-kiss','fas fa-kiss-beam','fas fa-kiss-wink-heart','fas fa-kiwi-bird','fas fa-landmark','fas fa-language','fas fa-laptop','fas fa-laptop-code','fas fa-laugh','fas fa-laugh-beam','fas fa-laugh-squint','fas fa-laugh-wink','fas fa-layer-group','fas fa-leaf','fas fa-lemon','fas fa-less-than','fas fa-less-than-equal','fas fa-level-down-alt','fas fa-level-up-alt','fas fa-life-ring','fas fa-lightbulb','fas fa-link','fas fa-lira-sign','fas fa-list','fas fa-list-alt','fas fa-list-ol','fas fa-list-ul','fas fa-location-arrow','fas fa-lock','fas fa-lock-open','fas fa-long-arrow-alt-down','fas fa-long-arrow-alt-left','fas fa-long-arrow-alt-right','fas fa-long-arrow-alt-up','fas fa-low-vision','fas fa-luggage-cart','fas fa-magic','fas fa-magnet','fas fa-mail-bulk','fas fa-male','fas fa-map','fas fa-map-marked','fas fa-map-marked-alt','fas fa-map-marker','fas fa-map-marker-alt','fas fa-map-pin','fas fa-map-signs','fas fa-marker','fas fa-mars','fas fa-mars-double','fas fa-mars-stroke','fas fa-mars-stroke-h','fas fa-mars-stroke-v','fas fa-mask','fas fa-medal','fas fa-medkit','fas fa-meh','fas fa-meh-blank','fas fa-meh-rolling-eyes','fas fa-memory','fas fa-menorah','fas fa-mercury','fas fa-meteor','fas fa-microchip','fas fa-microphone','fas fa-microphone-alt','fas fa-microphone-alt-slash','fas fa-microphone-slash','fas fa-microscope','fas fa-minus','fas fa-minus-circle','fas fa-minus-square','fas fa-mitten','fas fa-mobile','fas fa-mobile-alt','fas fa-money-bill','fas fa-money-bill-alt','fas fa-money-bill-wave','fas fa-money-bill-wave-alt','fas fa-money-check','fas fa-money-check-alt','fas fa-monument','fas fa-moon','fas fa-mortar-pestle','fas fa-mosque','fas fa-motorcycle','fas fa-mountain','fas fa-mouse-pointer','fas fa-mug-hot','fas fa-music','fas fa-network-wired','fas fa-neuter','fas fa-newspaper','fas fa-not-equal','fas fa-notes-medical','fas fa-object-group','fas fa-object-ungroup','fas fa-oil-can','fas fa-om','fas fa-otter','fas fa-outdent','fas fa-paint-brush','fas fa-paint-roller','fas fa-palette','fas fa-pallet','fas fa-paper-plane','fas fa-paperclip','fas fa-parachute-box','fas fa-paragraph','fas fa-parking','fas fa-passport','fas fa-pastafarianism','fas fa-paste','fas fa-pause','fas fa-pause-circle','fas fa-paw','fas fa-peace','fas fa-pen','fas fa-pen-alt','fas fa-pen-fancy','fas fa-pen-nib','fas fa-pen-square','fas fa-pencil-alt','fas fa-pencil-ruler','fas fa-people-carry','fas fa-percent','fas fa-percentage','fas fa-person-booth','fas fa-phone','fas fa-phone-slash','fas fa-phone-square','fas fa-phone-volume','fas fa-piggy-bank','fas fa-pills','fas fa-place-of-worship','fas fa-plane','fas fa-plane-arrival','fas fa-plane-departure','fas fa-play','fas fa-play-circle','fas fa-plug','fas fa-plus','fas fa-plus-circle','fas fa-plus-square','fas fa-podcast','fas fa-poll','fas fa-poll-h','fas fa-poo','fas fa-poo-storm','fas fa-poop','fas fa-portrait','fas fa-pound-sign','fas fa-power-off','fas fa-pray','fas fa-praying-hands','fas fa-prescription','fas fa-prescription-bottle','fas fa-prescription-bottle-alt','fas fa-print','fas fa-procedures','fas fa-project-diagram',
- 'fas fa-puzzle-piece','fas fa-qrcode','fas fa-question','fas fa-question-circle','fas fa-quidditch','fas fa-quote-left','fas fa-quote-right','fas fa-quran','fas fa-radiation','fas fa-radiation-alt','fas fa-rainbow','fas fa-random','fas fa-receipt','fas fa-recycle','fas fa-redo','fas fa-redo-alt','fas fa-registered','fas fa-reply','fas fa-reply-all','fas fa-republican','fas fa-restroom','fas fa-retweet','fas fa-ribbon','fas fa-ring','fas fa-road','fas fa-robot','fas fa-rocket','fas fa-route','fas fa-rss','fas fa-rss-square','fas fa-ruble-sign','fas fa-ruler','fas fa-ruler-combined','fas fa-ruler-horizontal','fas fa-ruler-vertical','fas fa-running','fas fa-rupee-sign','fas fa-sad-cry','fas fa-sad-tear','fas fa-satellite','fas fa-satellite-dish','fas fa-save','fas fa-school','fas fa-screwdriver','fas fa-scroll','fas fa-sd-card','fas fa-search','fas fa-search-dollar','fas fa-search-location','fas fa-search-minus','fas fa-search-plus','fas fa-seedling','fas fa-server','fas fa-shapes','fas fa-share','fas fa-share-alt','fas fa-share-alt-square','fas fa-share-square','fas fa-shekel-sign','fas fa-shield-alt','fas fa-ship','fas fa-shipping-fast','fas fa-shoe-prints','fas fa-shopping-bag','fas fa-shopping-basket','fas fa-shopping-cart','fas fa-shower','fas fa-shuttle-van','fas fa-sign','fas fa-sign-in-alt','fas fa-sign-language','fas fa-sign-out-alt','fas fa-signal','fas fa-signature','fas fa-sim-card','fas fa-sitemap','fas fa-skating','fas fa-skiing','fas fa-skiing-nordic','fas fa-skull','fas fa-skull-crossbones','fas fa-slash','fas fa-sleigh','fas fa-sliders-h','fas fa-smile','fas fa-smile-beam','fas fa-smile-wink','fas fa-smog','fas fa-smoking','fas fa-smoking-ban','fas fa-sms','fas fa-snowboarding','fas fa-snowflake','fas fa-snowman','fas fa-snowplow','fas fa-socks','fas fa-solar-panel','fas fa-sort','fas fa-sort-alpha-down','fas fa-sort-alpha-up','fas fa-sort-amount-down','fas fa-sort-amount-up','fas fa-sort-down','fas fa-sort-numeric-down','fas fa-sort-numeric-up','fas fa-sort-up','fas fa-spa','fas fa-space-shuttle','fas fa-spider','fas fa-spinner','fas fa-splotch','fas fa-spray-can','fas fa-square','fas fa-square-full','fas fa-square-root-alt','fas fa-stamp','fas fa-star','fas fa-star-and-crescent','fas fa-star-half','fas fa-star-half-alt','fas fa-star-of-david','fas fa-star-of-life','fas fa-step-backward','fas fa-step-forward','fas fa-stethoscope','fas fa-sticky-note','fas fa-stop','fas fa-stop-circle','fas fa-stopwatch','fas fa-store','fas fa-store-alt','fas fa-stream','fas fa-street-view','fas fa-strikethrough','fas fa-stroopwafel','fas fa-subscript','fas fa-subway','fas fa-suitcase','fas fa-suitcase-rolling','fas fa-sun','fas fa-superscript','fas fa-surprise','fas fa-swatchbook','fas fa-swimmer','fas fa-swimming-pool','fas fa-synagogue','fas fa-sync','fas fa-sync-alt','fas fa-syringe','fas fa-table','fas fa-table-tennis','fas fa-tablet','fas fa-tablet-alt','fas fa-tablets','fas fa-tachometer-alt','fas fa-tag','fas fa-tags','fas fa-tape','fas fa-tasks','fas fa-taxi','fas fa-teeth','fas fa-teeth-open','fas fa-temperature-high','fas fa-temperature-low','fas fa-tenge','fas fa-terminal','fas fa-text-height','fas fa-text-width','fas fa-th','fas fa-th-large','fas fa-th-list','fas fa-theater-masks','fas fa-thermometer','fas fa-thermometer-empty','fas fa-thermometer-full','fas fa-thermometer-half','fas fa-thermometer-quarter','fas fa-thermometer-three-quarters','fas fa-thumbs-down','fas fa-thumbs-up','fas fa-thumbtack','fas fa-ticket-alt','fas fa-times','fas fa-times-circle','fas fa-tint','fas fa-tint-slash','fas fa-tired','fas fa-toggle-off','fas fa-toggle-on','fas fa-toilet','fas fa-toilet-paper','fas fa-toolbox','fas fa-tools','fas fa-tooth','fas fa-torah','fas fa-torii-gate','fas fa-tractor','fas fa-trademark','fas fa-traffic-light','fas fa-train','fas fa-tram','fas fa-transgender','fas fa-transgender-alt','fas fa-trash','fas fa-trash-alt','fas fa-tree','fas fa-trophy','fas fa-truck','fas fa-truck-loading','fas fa-truck-monster','fas fa-truck-moving','fas fa-truck-pickup','fas fa-tshirt','fas fa-tty','fas fa-tv','fas fa-umbrella','fas fa-umbrella-beach','fas fa-underline','fas fa-undo','fas fa-undo-alt','fas fa-universal-access','fas fa-university','fas fa-unlink','fas fa-unlock','fas fa-unlock-alt','fas fa-upload','fas fa-user','fas fa-user-alt','fas fa-user-alt-slash','fas fa-user-astronaut','fas fa-user-check','fas fa-user-circle','fas fa-user-clock','fas fa-user-cog','fas fa-user-edit','fas fa-user-friends','fas fa-user-graduate','fas fa-user-injured','fas fa-user-lock','fas fa-user-md','fas fa-user-minus','fas fa-user-ninja','fas fa-user-plus','fas fa-user-secret','fas fa-user-shield','fas fa-user-slash','fas fa-user-tag','fas fa-user-tie','fas fa-user-times','fas fa-users','fas fa-users-cog','fas fa-utensil-spoon','fas fa-utensils','fas fa-vector-square','fas fa-venus','fas fa-venus-double','fas fa-venus-mars','fas fa-vial','fas fa-vials','fas fa-video','fas fa-video-slash','fas fa-vihara','fas fa-volleyball-ball','fas fa-volume-down','fas fa-volume-mute','fas fa-volume-off','fas fa-volume-up','fas fa-vote-yea','fas fa-vr-cardboard','fas fa-walking','fas fa-wallet','fas fa-warehouse','fas fa-water','fas fa-weight','fas fa-weight-hanging','fas fa-wheelchair','fas fa-wifi','fas fa-wind','fas fa-window-close','fas fa-window-maximize','fas fa-window-minimize','fas fa-window-restore','fas fa-wine-bottle','fas fa-wine-glass','fas fa-wine-glass-alt','fas fa-won-sign','fas fa-wrench','fas fa-x-ray','fas fa-yen-sign','fas fa-yin-yang','far fa-address-book','far fa-address-card','far fa-angry','far fa-arrow-alt-circle-down','far fa-arrow-alt-circle-left','far fa-arrow-alt-circle-right','far fa-arrow-alt-circle-up','far fa-bell','far fa-bell-slash','far fa-bookmark','far fa-building','far fa-calendar','far fa-calendar-alt','far fa-calendar-check','far fa-calendar-minus','far fa-calendar-plus','far fa-calendar-times','far fa-caret-square-down','far fa-caret-square-left','far fa-caret-square-right','far fa-caret-square-up','far fa-chart-bar','far fa-check-circle','far fa-check-square','far fa-circle','far fa-clipboard','far fa-clock','far fa-clone','far fa-closed-captioning','far fa-comment','far fa-comment-alt','far fa-comment-dots','far fa-comments','far fa-compass','far fa-copy','far fa-copyright','far fa-credit-card','far fa-dizzy','far fa-dot-circle','far fa-edit','far fa-envelope','far fa-envelope-open','far fa-eye','far fa-eye-slash','far fa-file','far fa-file-alt','far fa-file-archive','far fa-file-audio','far fa-file-code','far fa-file-excel','far fa-file-image','far fa-file-pdf','far fa-file-powerpoint','far fa-file-video','far fa-file-word','far fa-flag','far fa-flushed','far fa-folder','far fa-folder-open','far fa-frown','far fa-frown-open','far fa-futbol','far fa-gem','far fa-grimace','far fa-grin','far fa-grin-alt','far fa-grin-beam','far fa-grin-beam-sweat','far fa-grin-hearts','far fa-grin-squint','far fa-grin-squint-tears','far fa-grin-stars','far fa-grin-tears','far fa-grin-tongue','far fa-grin-tongue-squint','far fa-grin-tongue-wink','far fa-grin-wink','far fa-hand-lizard','far fa-hand-paper','far fa-hand-peace','far fa-hand-point-down','far fa-hand-point-left','far fa-hand-point-right','far fa-hand-point-up','far fa-hand-pointer','far fa-hand-rock','far fa-hand-scissors','far fa-hand-spock','far fa-handshake','far fa-hdd','far fa-heart','far fa-hospital','far fa-hourglass','far fa-id-badge','far fa-id-card','far fa-image','far fa-images','far fa-keyboard','far fa-kiss','far fa-kiss-beam','far fa-kiss-wink-heart','far fa-laugh','far fa-laugh-beam','far fa-laugh-squint','far fa-laugh-wink','far fa-lemon','far fa-life-ring','far fa-lightbulb','far fa-list-alt','far fa-map','far fa-meh','far fa-meh-blank','far fa-meh-rolling-eyes','far fa-minus-square','far fa-money-bill-alt','far fa-moon','far fa-newspaper','far fa-object-group','far fa-object-ungroup','far fa-paper-plane','far fa-pause-circle','far fa-play-circle','far fa-plus-square','far fa-question-circle','far fa-registered','far fa-sad-cry','far fa-sad-tear','far fa-save','far fa-share-square','far fa-smile','far fa-smile-beam','far fa-smile-wink','far fa-snowflake','far fa-square','far fa-star','far fa-star-half','far fa-sticky-note','far fa-stop-circle','far fa-sun','far fa-surprise','far fa-thumbs-down','far fa-thumbs-up','far fa-times-circle','far fa-tired','far fa-trash-alt','far fa-user','far fa-user-circle','far fa-window-close','far fa-window-maximize','far fa-window-minimize','far fa-window-restore',
- 'fab fa-500px','fab fa-accessible-icon','fab fa-accusoft','fab fa-acquisitions-incorporated','fab fa-adn','fab fa-adobe','fab fa-adversal','fab fa-affiliatetheme','fab fa-algolia','fab fa-alipay','fab fa-amazon','fab fa-amazon-pay','fab fa-amilia','fab fa-android','fab fa-angellist','fab fa-angrycreative','fab fa-angular','fab fa-app-store','fab fa-app-store-ios','fab fa-apper','fab fa-apple','fab fa-apple-pay','fab fa-artstation','fab fa-asymmetrik','fab fa-atlassian','fab fa-audible','fab fa-autoprefixer','fab fa-avianex','fab fa-aviato','fab fa-aws','fab fa-bandcamp','fab fa-behance','fab fa-behance-square','fab fa-bimobject','fab fa-bitbucket','fab fa-bitcoin','fab fa-bity','fab fa-black-tie','fab fa-blackberry','fab fa-blogger','fab fa-blogger-b','fab fa-bluetooth','fab fa-bluetooth-b','fab fa-btc','fab fa-buromobelexperte','fab fa-buysellads','fab fa-canadian-maple-leaf','fab fa-cc-amazon-pay','fab fa-cc-amex','fab fa-cc-apple-pay','fab fa-cc-diners-club','fab fa-cc-discover','fab fa-cc-jcb','fab fa-cc-mastercard','fab fa-cc-paypal','fab fa-cc-stripe','fab fa-cc-visa','fab fa-centercode','fab fa-centos','fab fa-chrome','fab fa-cloudscale','fab fa-cloudsmith','fab fa-cloudversify','fab fa-codepen','fab fa-codiepie','fab fa-confluence','fab fa-connectdevelop','fab fa-contao','fab fa-cpanel','fab fa-creative-commons','fab fa-creative-commons-by','fab fa-creative-commons-nc','fab fa-creative-commons-nc-eu','fab fa-creative-commons-nc-jp','fab fa-creative-commons-nd','fab fa-creative-commons-pd','fab fa-creative-commons-pd-alt','fab fa-creative-commons-remix','fab fa-creative-commons-sa','fab fa-creative-commons-sampling','fab fa-creative-commons-sampling-plus','fab fa-creative-commons-share','fab fa-creative-commons-zero','fab fa-critical-role','fab fa-css3','fab fa-css3-alt','fab fa-cuttlefish','fab fa-d-and-d','fab fa-d-and-d-beyond','fab fa-dashcube','fab fa-delicious','fab fa-deploydog','fab fa-deskpro','fab fa-dev','fab fa-deviantart','fab fa-dhl','fab fa-diaspora','fab fa-digg','fab fa-digital-ocean','fab fa-discord','fab fa-discourse','fab fa-dochub','fab fa-docker','fab fa-draft2digital','fab fa-dribbble','fab fa-dribbble-square','fab fa-dropbox','fab fa-drupal','fab fa-dyalog','fab fa-earlybirds','fab fa-ebay','fab fa-edge','fab fa-elementor','fab fa-ello','fab fa-ember','fab fa-empire','fab fa-envira','fab fa-erlang','fab fa-ethereum','fab fa-etsy','fab fa-expeditedssl','fab fa-facebook','fab fa-facebook-f','fab fa-facebook-messenger','fab fa-facebook-square','fab fa-fantasy-flight-games','fab fa-fedex','fab fa-fedora','fab fa-figma','fab fa-firefox','fab fa-first-order','fab fa-first-order-alt','fab fa-firstdraft','fab fa-flickr','fab fa-flipboard','fab fa-fly','fab fa-font-awesome','fab fa-font-awesome-alt','fab fa-font-awesome-flag','fab fa-fonticons','fab fa-fonticons-fi','fab fa-fort-awesome','fab fa-fort-awesome-alt','fab fa-forumbee','fab fa-foursquare','fab fa-free-code-camp','fab fa-freebsd','fab fa-fulcrum','fab fa-galactic-republic','fab fa-galactic-senate','fab fa-get-pocket','fab fa-gg','fab fa-gg-circle','fab fa-git','fab fa-git-square','fab fa-github','fab fa-github-alt','fab fa-github-square','fab fa-gitkraken','fab fa-gitlab','fab fa-gitter','fab fa-glide','fab fa-glide-g','fab fa-gofore','fab fa-goodreads','fab fa-goodreads-g','fab fa-google','fab fa-google-drive','fab fa-google-play','fab fa-google-plus','fab fa-google-plus-g','fab fa-google-plus-square','fab fa-google-wallet','fab fa-gratipay','fab fa-grav','fab fa-gripfire','fab fa-grunt','fab fa-gulp','fab fa-hacker-news','fab fa-hacker-news-square','fab fa-hackerrank','fab fa-hips','fab fa-hire-a-helper','fab fa-hooli','fab fa-hornbill','fab fa-hotjar','fab fa-houzz','fab fa-html5','fab fa-hubspot','fab fa-imdb','fab fa-instagram','fab fa-intercom','fab fa-internet-explorer','fab fa-invision','fab fa-ioxhost','fab fa-itunes','fab fa-itunes-note','fab fa-java','fab fa-jedi-order','fab fa-jenkins','fab fa-jira','fab fa-joget','fab fa-joomla','fab fa-js','fab fa-js-square','fab fa-jsfiddle','fab fa-kaggle','fab fa-keybase','fab fa-keycdn','fab fa-kickstarter','fab fa-kickstarter-k','fab fa-korvue','fab fa-laravel','fab fa-lastfm','fab fa-lastfm-square','fab fa-leanpub','fab fa-less','fab fa-line','fab fa-linkedin','fab fa-linkedin-in','fab fa-linode','fab fa-linux','fab fa-lyft','fab fa-magento','fab fa-mailchimp','fab fa-mandalorian','fab fa-markdown','fab fa-mastodon','fab fa-maxcdn','fab fa-medapps','fab fa-medium','fab fa-medium-m','fab fa-medrt','fab fa-meetup','fab fa-megaport','fab fa-mendeley','fab fa-microsoft','fab fa-mix','fab fa-mixcloud','fab fa-mizuni','fab fa-modx','fab fa-monero','fab fa-napster','fab fa-neos','fab fa-nimblr','fab fa-nintendo-switch','fab fa-node','fab fa-node-js','fab fa-npm','fab fa-ns8','fab fa-nutritionix','fab fa-odnoklassniki','fab fa-odnoklassniki-square','fab fa-old-republic','fab fa-opencart','fab fa-openid','fab fa-opera','fab fa-optin-monster','fab fa-osi','fab fa-page4','fab fa-pagelines','fab fa-palfed','fab fa-patreon','fab fa-paypal','fab fa-penny-arcade','fab fa-periscope','fab fa-phabricator','fab fa-phoenix-framework','fab fa-phoenix-squadron','fab fa-php','fab fa-pied-piper','fab fa-pied-piper-alt','fab fa-pied-piper-hat','fab fa-pied-piper-pp','fab fa-pinterest','fab fa-pinterest-p','fab fa-pinterest-square','fab fa-playstation','fab fa-product-hunt','fab fa-pushed','fab fa-python','fab fa-qq','fab fa-quinscape','fab fa-quora','fab fa-r-project','fab fa-raspberry-pi','fab fa-ravelry','fab fa-react','fab fa-reacteurope','fab fa-readme','fab fa-rebel','fab fa-red-river','fab fa-reddit','fab fa-reddit-alien','fab fa-reddit-square','fab fa-redhat','fab fa-renren','fab fa-replyd','fab fa-researchgate','fab fa-resolving','fab fa-rev','fab fa-rocketchat','fab fa-rockrms','fab fa-safari','fab fa-sass','fab fa-schlix','fab fa-scribd','fab fa-searchengin','fab fa-sellcast','fab fa-sellsy','fab fa-servicestack','fab fa-shirtsinbulk','fab fa-shopware','fab fa-simplybuilt','fab fa-sistrix','fab fa-sith','fab fa-sketch','fab fa-skyatlas','fab fa-skype','fab fa-slack','fab fa-slack-hash','fab fa-slideshare','fab fa-snapchat','fab fa-snapchat-ghost','fab fa-snapchat-square','fab fa-soundcloud','fab fa-sourcetree','fab fa-speakap','fab fa-spotify','fab fa-squarespace','fab fa-stack-exchange','fab fa-stack-overflow','fab fa-staylinked','fab fa-steam','fab fa-steam-square','fab fa-steam-symbol','fab fa-sticker-mule','fab fa-strava','fab fa-stripe','fab fa-stripe-s','fab fa-studiovinari','fab fa-stumbleupon','fab fa-stumbleupon-circle','fab fa-superpowers','fab fa-supple','fab fa-suse','fab fa-teamspeak','fab fa-telegram','fab fa-telegram-plane','fab fa-tencent-weibo','fab fa-the-red-yeti','fab fa-themeco','fab fa-themeisle','fab fa-think-peaks','fab fa-trade-federation','fab fa-trello','fab fa-tripadvisor','fab fa-tumblr','fab fa-tumblr-square','fab fa-twitch','fab fa-twitter','fab fa-twitter-square','fab fa-typo3','fab fa-uber','fab fa-ubuntu','fab fa-uikit','fab fa-uniregistry','fab fa-untappd','fab fa-ups','fab fa-usb','fab fa-usps','fab fa-ussunnah','fab fa-vaadin','fab fa-viacoin','fab fa-viadeo','fab fa-viadeo-square','fab fa-viber','fab fa-vimeo','fab fa-vimeo-square','fab fa-vimeo-v','fab fa-vine','fab fa-vk','fab fa-vnv','fab fa-vuejs','fab fa-weebly','fab fa-weibo','fab fa-weixin','fab fa-whatsapp','fab fa-whatsapp-square','fab fa-whmcs','fab fa-wikipedia-w','fab fa-windows','fab fa-wix','fab fa-wizards-of-the-coast','fab fa-wolf-pack-battalion','fab fa-wordpress','fab fa-wordpress-simple','fab fa-wpbeginner','fab fa-wpexplorer','fab fa-wpforms','fab fa-wpressr','fab fa-xbox','fab fa-xing','fab fa-xing-square','fab fa-y-combinator','fab fa-yahoo','fab fa-yandex','fab fa-yandex-international','fab fa-yarn','fab fa-yelp','fab fa-yoast','fab fa-youtube','fab fa-youtube-square','fab fa-zhihu',
-]
\ No newline at end of file
+ "fas fa-ad",
+ "fas fa-address-book",
+ "fas fa-address-card",
+ "fas fa-adjust",
+ "fas fa-air-freshener",
+ "fas fa-align-center",
+ "fas fa-align-justify",
+ "fas fa-align-left",
+ "fas fa-align-right",
+ "fas fa-allergies",
+ "fas fa-ambulance",
+ "fas fa-american-sign-language-interpreting",
+ "fas fa-anchor",
+ "fas fa-angle-double-down",
+ "fas fa-angle-double-left",
+ "fas fa-angle-double-right",
+ "fas fa-angle-double-up",
+ "fas fa-angle-down",
+ "fas fa-angle-left",
+ "fas fa-angle-right",
+ "fas fa-angle-up",
+ "fas fa-angry",
+ "fas fa-ankh",
+ "fas fa-apple-alt",
+ "fas fa-archive",
+ "fas fa-archway",
+ "fas fa-arrow-alt-circle-down",
+ "fas fa-arrow-alt-circle-left",
+ "fas fa-arrow-alt-circle-right",
+ "fas fa-arrow-alt-circle-up",
+ "fas fa-arrow-circle-down",
+ "fas fa-arrow-circle-left",
+ "fas fa-arrow-circle-right",
+ "fas fa-arrow-circle-up",
+ "fas fa-arrow-down",
+ "fas fa-arrow-left",
+ "fas fa-arrow-right",
+ "fas fa-arrow-up",
+ "fas fa-arrows-alt",
+ "fas fa-arrows-alt-h",
+ "fas fa-arrows-alt-v",
+ "fas fa-assistive-listening-systems",
+ "fas fa-asterisk",
+ "fas fa-at",
+ "fas fa-atlas",
+ "fas fa-atom",
+ "fas fa-audio-description",
+ "fas fa-award",
+ "fas fa-baby",
+ "fas fa-baby-carriage",
+ "fas fa-backspace",
+ "fas fa-backward",
+ "fas fa-balance-scale",
+ "fas fa-ban",
+ "fas fa-band-aid",
+ "fas fa-barcode",
+ "fas fa-bars",
+ "fas fa-baseball-ball",
+ "fas fa-basketball-ball",
+ "fas fa-bath",
+ "fas fa-battery-empty",
+ "fas fa-battery-full",
+ "fas fa-battery-half",
+ "fas fa-battery-quarter",
+ "fas fa-battery-three-quarters",
+ "fas fa-bed",
+ "fas fa-beer",
+ "fas fa-bell",
+ "fas fa-bell-slash",
+ "fas fa-bezier-curve",
+ "fas fa-bible",
+ "fas fa-bicycle",
+ "fas fa-binoculars",
+ "fas fa-biohazard",
+ "fas fa-birthday-cake",
+ "fas fa-blender",
+ "fas fa-blender-phone",
+ "fas fa-blind",
+ "fas fa-blog",
+ "fas fa-bold",
+ "fas fa-bolt",
+ "fas fa-bomb",
+ "fas fa-bone",
+ "fas fa-bong",
+ "fas fa-book",
+ "fas fa-book-dead",
+ "fas fa-book-open",
+ "fas fa-book-reader",
+ "fas fa-bookmark",
+ "fas fa-bowling-ball",
+ "fas fa-box",
+ "fas fa-box-open",
+ "fas fa-boxes",
+ "fas fa-braille",
+ "fas fa-brain",
+ "fas fa-briefcase",
+ "fas fa-briefcase-medical",
+ "fas fa-broadcast-tower",
+ "fas fa-broom",
+ "fas fa-brush",
+ "fas fa-bug",
+ "fas fa-building",
+ "fas fa-bullhorn",
+ "fas fa-bullseye",
+ "fas fa-burn",
+ "fas fa-bus",
+ "fas fa-bus-alt",
+ "fas fa-business-time",
+ "fas fa-calculator",
+ "fas fa-calendar",
+ "fas fa-calendar-alt",
+ "fas fa-calendar-check",
+ "fas fa-calendar-day",
+ "fas fa-calendar-minus",
+ "fas fa-calendar-plus",
+ "fas fa-calendar-times",
+ "fas fa-calendar-week",
+ "fas fa-camera",
+ "fas fa-camera-retro",
+ "fas fa-campground",
+ "fas fa-candy-cane",
+ "fas fa-cannabis",
+ "fas fa-capsules",
+ "fas fa-car",
+ "fas fa-car-alt",
+ "fas fa-car-battery",
+ "fas fa-car-crash",
+ "fas fa-car-side",
+ "fas fa-caret-down",
+ "fas fa-caret-left",
+ "fas fa-caret-right",
+ "fas fa-caret-square-down",
+ "fas fa-caret-square-left",
+ "fas fa-caret-square-right",
+ "fas fa-caret-square-up",
+ "fas fa-caret-up",
+ "fas fa-carrot",
+ "fas fa-cart-arrow-down",
+ "fas fa-cart-plus",
+ "fas fa-cash-register",
+ "fas fa-cat",
+ "fas fa-certificate",
+ "fas fa-chair",
+ "fas fa-chalkboard",
+ "fas fa-chalkboard-teacher",
+ "fas fa-charging-station",
+ "fas fa-chart-area",
+ "fas fa-chart-bar",
+ "fas fa-chart-line",
+ "fas fa-chart-pie",
+ "fas fa-check",
+ "fas fa-check-circle",
+ "fas fa-check-double",
+ "fas fa-check-square",
+ "fas fa-chess",
+ "fas fa-chess-bishop",
+ "fas fa-chess-board",
+ "fas fa-chess-king",
+ "fas fa-chess-knight",
+ "fas fa-chess-pawn",
+ "fas fa-chess-queen",
+ "fas fa-chess-rook",
+ "fas fa-chevron-circle-down",
+ "fas fa-chevron-circle-left",
+ "fas fa-chevron-circle-right",
+ "fas fa-chevron-circle-up",
+ "fas fa-chevron-down",
+ "fas fa-chevron-left",
+ "fas fa-chevron-right",
+ "fas fa-chevron-up",
+ "fas fa-child",
+ "fas fa-church",
+ "fas fa-circle",
+ "fas fa-circle-notch",
+ "fas fa-city",
+ "fas fa-clipboard",
+ "fas fa-clipboard-check",
+ "fas fa-clipboard-list",
+ "fas fa-clock",
+ "fas fa-clone",
+ "fas fa-closed-captioning",
+ "fas fa-cloud",
+ "fas fa-cloud-download-alt",
+ "fas fa-cloud-meatball",
+ "fas fa-cloud-moon",
+ "fas fa-cloud-moon-rain",
+ "fas fa-cloud-rain",
+ "fas fa-cloud-showers-heavy",
+ "fas fa-cloud-sun",
+ "fas fa-cloud-sun-rain",
+ "fas fa-cloud-upload-alt",
+ "fas fa-cocktail",
+ "fas fa-code",
+ "fas fa-code-branch",
+ "fas fa-coffee",
+ "fas fa-cog",
+ "fas fa-cogs",
+ "fas fa-coins",
+ "fas fa-columns",
+ "fas fa-comment",
+ "fas fa-comment-alt",
+ "fas fa-comment-dollar",
+ "fas fa-comment-dots",
+ "fas fa-comment-slash",
+ "fas fa-comments",
+ "fas fa-comments-dollar",
+ "fas fa-compact-disc",
+ "fas fa-compass",
+ "fas fa-compress",
+ "fas fa-compress-arrows-alt",
+ "fas fa-concierge-bell",
+ "fas fa-cookie",
+ "fas fa-cookie-bite",
+ "fas fa-copy",
+ "fas fa-copyright",
+ "fas fa-couch",
+ "fas fa-credit-card",
+ "fas fa-crop",
+ "fas fa-crop-alt",
+ "fas fa-cross",
+ "fas fa-crosshairs",
+ "fas fa-crow",
+ "fas fa-crown",
+ "fas fa-cube",
+ "fas fa-cubes",
+ "fas fa-cut",
+ "fas fa-database",
+ "fas fa-deaf",
+ "fas fa-democrat",
+ "fas fa-desktop",
+ "fas fa-dharmachakra",
+ "fas fa-diagnoses",
+ "fas fa-dice",
+ "fas fa-dice-d20",
+ "fas fa-dice-d6",
+ "fas fa-dice-five",
+ "fas fa-dice-four",
+ "fas fa-dice-one",
+ "fas fa-dice-six",
+ "fas fa-dice-three",
+ "fas fa-dice-two",
+ "fas fa-digital-tachograph",
+ "fas fa-directions",
+ "fas fa-divide",
+ "fas fa-dizzy",
+ "fas fa-dna",
+ "fas fa-dog",
+ "fas fa-dollar-sign",
+ "fas fa-dolly",
+ "fas fa-dolly-flatbed",
+ "fas fa-donate",
+ "fas fa-door-closed",
+ "fas fa-door-open",
+ "fas fa-dot-circle",
+ "fas fa-dove",
+ "fas fa-download",
+ "fas fa-drafting-compass",
+ "fas fa-dragon",
+ "fas fa-draw-polygon",
+ "fas fa-drum",
+ "fas fa-drum-steelpan",
+ "fas fa-drumstick-bite",
+ "fas fa-dumbbell",
+ "fas fa-dumpster",
+ "fas fa-dumpster-fire",
+ "fas fa-dungeon",
+ "fas fa-edit",
+ "fas fa-eject",
+ "fas fa-ellipsis-h",
+ "fas fa-ellipsis-v",
+ "fas fa-envelope",
+ "fas fa-envelope-open",
+ "fas fa-envelope-open-text",
+ "fas fa-envelope-square",
+ "fas fa-equals",
+ "fas fa-eraser",
+ "fas fa-ethernet",
+ "fas fa-euro-sign",
+ "fas fa-exchange-alt",
+ "fas fa-exclamation",
+ "fas fa-exclamation-circle",
+ "fas fa-exclamation-triangle",
+ "fas fa-expand",
+ "fas fa-expand-arrows-alt",
+ "fas fa-external-link-alt",
+ "fas fa-external-link-square-alt",
+ "fas fa-eye",
+ "fas fa-eye-dropper",
+ "fas fa-eye-slash",
+ "fas fa-fast-backward",
+ "fas fa-fast-forward",
+ "fas fa-fax",
+ "fas fa-feather",
+ "fas fa-feather-alt",
+ "fas fa-female",
+ "fas fa-fighter-jet",
+ "fas fa-file",
+ "fas fa-file-alt",
+ "fas fa-file-archive",
+ "fas fa-file-audio",
+ "fas fa-file-code",
+ "fas fa-file-contract",
+ "fas fa-file-csv",
+ "fas fa-file-download",
+ "fas fa-file-excel",
+ "fas fa-file-export",
+ "fas fa-file-image",
+ "fas fa-file-import",
+ "fas fa-file-invoice",
+ "fas fa-file-invoice-dollar",
+ "fas fa-file-medical",
+ "fas fa-file-medical-alt",
+ "fas fa-file-pdf",
+ "fas fa-file-powerpoint",
+ "fas fa-file-prescription",
+ "fas fa-file-signature",
+ "fas fa-file-upload",
+ "fas fa-file-video",
+ "fas fa-file-word",
+ "fas fa-fill",
+ "fas fa-fill-drip",
+ "fas fa-film",
+ "fas fa-filter",
+ "fas fa-fingerprint",
+ "fas fa-fire",
+ "fas fa-fire-alt",
+ "fas fa-fire-extinguisher",
+ "fas fa-first-aid",
+ "fas fa-fish",
+ "fas fa-fist-raised",
+ "fas fa-flag",
+ "fas fa-flag-checkered",
+ "fas fa-flag-usa",
+ "fas fa-flask",
+ "fas fa-flushed",
+ "fas fa-folder",
+ "fas fa-folder-minus",
+ "fas fa-folder-open",
+ "fas fa-folder-plus",
+ "fas fa-font",
+ "fas fa-football-ball",
+ "fas fa-forward",
+ "fas fa-frog",
+ "fas fa-frown",
+ "fas fa-frown-open",
+ "fas fa-funnel-dollar",
+ "fas fa-futbol",
+ "fas fa-gamepad",
+ "fas fa-gas-pump",
+ "fas fa-gavel",
+ "fas fa-gem",
+ "fas fa-genderless",
+ "fas fa-ghost",
+ "fas fa-gift",
+ "fas fa-gifts",
+ "fas fa-glass-cheers",
+ "fas fa-glass-martini",
+ "fas fa-glass-martini-alt",
+ "fas fa-glass-whiskey",
+ "fas fa-glasses",
+ "fas fa-globe",
+ "fas fa-globe-africa",
+ "fas fa-globe-americas",
+ "fas fa-globe-asia",
+ "fas fa-globe-europe",
+ "fas fa-golf-ball",
+ "fas fa-gopuram",
+ "fas fa-graduation-cap",
+ "fas fa-greater-than",
+ "fas fa-greater-than-equal",
+ "fas fa-grimace",
+ "fas fa-grin",
+ "fas fa-grin-alt",
+ "fas fa-grin-beam",
+ "fas fa-grin-beam-sweat",
+ "fas fa-grin-hearts",
+ "fas fa-grin-squint",
+ "fas fa-grin-squint-tears",
+ "fas fa-grin-stars",
+ "fas fa-grin-tears",
+ "fas fa-grin-tongue",
+ "fas fa-grin-tongue-squint",
+ "fas fa-grin-tongue-wink",
+ "fas fa-grin-wink",
+ "fas fa-grip-horizontal",
+ "fas fa-grip-lines",
+ "fas fa-grip-lines-vertical",
+ "fas fa-grip-vertical",
+ "fas fa-guitar",
+ "fas fa-h-square",
+ "fas fa-hammer",
+ "fas fa-hamsa",
+ "fas fa-hand-holding",
+ "fas fa-hand-holding-heart",
+ "fas fa-hand-holding-usd",
+ "fas fa-hand-lizard",
+ "fas fa-hand-paper",
+ "fas fa-hand-peace",
+ "fas fa-hand-point-down",
+ "fas fa-hand-point-left",
+ "fas fa-hand-point-right",
+ "fas fa-hand-point-up",
+ "fas fa-hand-pointer",
+ "fas fa-hand-rock",
+ "fas fa-hand-scissors",
+ "fas fa-hand-spock",
+ "fas fa-hands",
+ "fas fa-hands-helping",
+ "fas fa-handshake",
+ "fas fa-hanukiah",
+ "fas fa-hashtag",
+ "fas fa-hat-wizard",
+ "fas fa-haykal",
+ "fas fa-hdd",
+ "fas fa-heading",
+ "fas fa-headphones",
+ "fas fa-headphones-alt",
+ "fas fa-headset",
+ "fas fa-heart",
+ "fas fa-heart-broken",
+ "fas fa-heartbeat",
+ "fas fa-helicopter",
+ "fas fa-highlighter",
+ "fas fa-hiking",
+ "fas fa-hippo",
+ "fas fa-history",
+ "fas fa-hockey-puck",
+ "fas fa-holly-berry",
+ "fas fa-home",
+ "fas fa-horse",
+ "fas fa-horse-head",
+ "fas fa-hospital",
+ "fas fa-hospital-alt",
+ "fas fa-hospital-symbol",
+ "fas fa-hot-tub",
+ "fas fa-hotel",
+ "fas fa-hourglass",
+ "fas fa-hourglass-end",
+ "fas fa-hourglass-half",
+ "fas fa-hourglass-start",
+ "fas fa-house-damage",
+ "fas fa-hryvnia",
+ "fas fa-i-cursor",
+ "fas fa-icicles",
+ "fas fa-id-badge",
+ "fas fa-id-card",
+ "fas fa-id-card-alt",
+ "fas fa-igloo",
+ "fas fa-image",
+ "fas fa-images",
+ "fas fa-inbox",
+ "fas fa-indent",
+ "fas fa-industry",
+ "fas fa-infinity",
+ "fas fa-info",
+ "fas fa-info-circle",
+ "fas fa-italic",
+ "fas fa-jedi",
+ "fas fa-joint",
+ "fas fa-journal-whills",
+ "fas fa-kaaba",
+ "fas fa-key",
+ "fas fa-keyboard",
+ "fas fa-khanda",
+ "fas fa-kiss",
+ "fas fa-kiss-beam",
+ "fas fa-kiss-wink-heart",
+ "fas fa-kiwi-bird",
+ "fas fa-landmark",
+ "fas fa-language",
+ "fas fa-laptop",
+ "fas fa-laptop-code",
+ "fas fa-laugh",
+ "fas fa-laugh-beam",
+ "fas fa-laugh-squint",
+ "fas fa-laugh-wink",
+ "fas fa-layer-group",
+ "fas fa-leaf",
+ "fas fa-lemon",
+ "fas fa-less-than",
+ "fas fa-less-than-equal",
+ "fas fa-level-down-alt",
+ "fas fa-level-up-alt",
+ "fas fa-life-ring",
+ "fas fa-lightbulb",
+ "fas fa-link",
+ "fas fa-lira-sign",
+ "fas fa-list",
+ "fas fa-list-alt",
+ "fas fa-list-ol",
+ "fas fa-list-ul",
+ "fas fa-location-arrow",
+ "fas fa-lock",
+ "fas fa-lock-open",
+ "fas fa-long-arrow-alt-down",
+ "fas fa-long-arrow-alt-left",
+ "fas fa-long-arrow-alt-right",
+ "fas fa-long-arrow-alt-up",
+ "fas fa-low-vision",
+ "fas fa-luggage-cart",
+ "fas fa-magic",
+ "fas fa-magnet",
+ "fas fa-mail-bulk",
+ "fas fa-male",
+ "fas fa-map",
+ "fas fa-map-marked",
+ "fas fa-map-marked-alt",
+ "fas fa-map-marker",
+ "fas fa-map-marker-alt",
+ "fas fa-map-pin",
+ "fas fa-map-signs",
+ "fas fa-marker",
+ "fas fa-mars",
+ "fas fa-mars-double",
+ "fas fa-mars-stroke",
+ "fas fa-mars-stroke-h",
+ "fas fa-mars-stroke-v",
+ "fas fa-mask",
+ "fas fa-medal",
+ "fas fa-medkit",
+ "fas fa-meh",
+ "fas fa-meh-blank",
+ "fas fa-meh-rolling-eyes",
+ "fas fa-memory",
+ "fas fa-menorah",
+ "fas fa-mercury",
+ "fas fa-meteor",
+ "fas fa-microchip",
+ "fas fa-microphone",
+ "fas fa-microphone-alt",
+ "fas fa-microphone-alt-slash",
+ "fas fa-microphone-slash",
+ "fas fa-microscope",
+ "fas fa-minus",
+ "fas fa-minus-circle",
+ "fas fa-minus-square",
+ "fas fa-mitten",
+ "fas fa-mobile",
+ "fas fa-mobile-alt",
+ "fas fa-money-bill",
+ "fas fa-money-bill-alt",
+ "fas fa-money-bill-wave",
+ "fas fa-money-bill-wave-alt",
+ "fas fa-money-check",
+ "fas fa-money-check-alt",
+ "fas fa-monument",
+ "fas fa-moon",
+ "fas fa-mortar-pestle",
+ "fas fa-mosque",
+ "fas fa-motorcycle",
+ "fas fa-mountain",
+ "fas fa-mouse-pointer",
+ "fas fa-mug-hot",
+ "fas fa-music",
+ "fas fa-network-wired",
+ "fas fa-neuter",
+ "fas fa-newspaper",
+ "fas fa-not-equal",
+ "fas fa-notes-medical",
+ "fas fa-object-group",
+ "fas fa-object-ungroup",
+ "fas fa-oil-can",
+ "fas fa-om",
+ "fas fa-otter",
+ "fas fa-outdent",
+ "fas fa-paint-brush",
+ "fas fa-paint-roller",
+ "fas fa-palette",
+ "fas fa-pallet",
+ "fas fa-paper-plane",
+ "fas fa-paperclip",
+ "fas fa-parachute-box",
+ "fas fa-paragraph",
+ "fas fa-parking",
+ "fas fa-passport",
+ "fas fa-pastafarianism",
+ "fas fa-paste",
+ "fas fa-pause",
+ "fas fa-pause-circle",
+ "fas fa-paw",
+ "fas fa-peace",
+ "fas fa-pen",
+ "fas fa-pen-alt",
+ "fas fa-pen-fancy",
+ "fas fa-pen-nib",
+ "fas fa-pen-square",
+ "fas fa-pencil-alt",
+ "fas fa-pencil-ruler",
+ "fas fa-people-carry",
+ "fas fa-percent",
+ "fas fa-percentage",
+ "fas fa-person-booth",
+ "fas fa-phone",
+ "fas fa-phone-slash",
+ "fas fa-phone-square",
+ "fas fa-phone-volume",
+ "fas fa-piggy-bank",
+ "fas fa-pills",
+ "fas fa-place-of-worship",
+ "fas fa-plane",
+ "fas fa-plane-arrival",
+ "fas fa-plane-departure",
+ "fas fa-play",
+ "fas fa-play-circle",
+ "fas fa-plug",
+ "fas fa-plus",
+ "fas fa-plus-circle",
+ "fas fa-plus-square",
+ "fas fa-podcast",
+ "fas fa-poll",
+ "fas fa-poll-h",
+ "fas fa-poo",
+ "fas fa-poo-storm",
+ "fas fa-poop",
+ "fas fa-portrait",
+ "fas fa-pound-sign",
+ "fas fa-power-off",
+ "fas fa-pray",
+ "fas fa-praying-hands",
+ "fas fa-prescription",
+ "fas fa-prescription-bottle",
+ "fas fa-prescription-bottle-alt",
+ "fas fa-print",
+ "fas fa-procedures",
+ "fas fa-project-diagram",
+ "fas fa-puzzle-piece",
+ "fas fa-qrcode",
+ "fas fa-question",
+ "fas fa-question-circle",
+ "fas fa-quidditch",
+ "fas fa-quote-left",
+ "fas fa-quote-right",
+ "fas fa-quran",
+ "fas fa-radiation",
+ "fas fa-radiation-alt",
+ "fas fa-rainbow",
+ "fas fa-random",
+ "fas fa-receipt",
+ "fas fa-recycle",
+ "fas fa-redo",
+ "fas fa-redo-alt",
+ "fas fa-registered",
+ "fas fa-reply",
+ "fas fa-reply-all",
+ "fas fa-republican",
+ "fas fa-restroom",
+ "fas fa-retweet",
+ "fas fa-ribbon",
+ "fas fa-ring",
+ "fas fa-road",
+ "fas fa-robot",
+ "fas fa-rocket",
+ "fas fa-route",
+ "fas fa-rss",
+ "fas fa-rss-square",
+ "fas fa-ruble-sign",
+ "fas fa-ruler",
+ "fas fa-ruler-combined",
+ "fas fa-ruler-horizontal",
+ "fas fa-ruler-vertical",
+ "fas fa-running",
+ "fas fa-rupee-sign",
+ "fas fa-sad-cry",
+ "fas fa-sad-tear",
+ "fas fa-satellite",
+ "fas fa-satellite-dish",
+ "fas fa-save",
+ "fas fa-school",
+ "fas fa-screwdriver",
+ "fas fa-scroll",
+ "fas fa-sd-card",
+ "fas fa-search",
+ "fas fa-search-dollar",
+ "fas fa-search-location",
+ "fas fa-search-minus",
+ "fas fa-search-plus",
+ "fas fa-seedling",
+ "fas fa-server",
+ "fas fa-shapes",
+ "fas fa-share",
+ "fas fa-share-alt",
+ "fas fa-share-alt-square",
+ "fas fa-share-square",
+ "fas fa-shekel-sign",
+ "fas fa-shield-alt",
+ "fas fa-ship",
+ "fas fa-shipping-fast",
+ "fas fa-shoe-prints",
+ "fas fa-shopping-bag",
+ "fas fa-shopping-basket",
+ "fas fa-shopping-cart",
+ "fas fa-shower",
+ "fas fa-shuttle-van",
+ "fas fa-sign",
+ "fas fa-sign-in-alt",
+ "fas fa-sign-language",
+ "fas fa-sign-out-alt",
+ "fas fa-signal",
+ "fas fa-signature",
+ "fas fa-sim-card",
+ "fas fa-sitemap",
+ "fas fa-skating",
+ "fas fa-skiing",
+ "fas fa-skiing-nordic",
+ "fas fa-skull",
+ "fas fa-skull-crossbones",
+ "fas fa-slash",
+ "fas fa-sleigh",
+ "fas fa-sliders-h",
+ "fas fa-smile",
+ "fas fa-smile-beam",
+ "fas fa-smile-wink",
+ "fas fa-smog",
+ "fas fa-smoking",
+ "fas fa-smoking-ban",
+ "fas fa-sms",
+ "fas fa-snowboarding",
+ "fas fa-snowflake",
+ "fas fa-snowman",
+ "fas fa-snowplow",
+ "fas fa-socks",
+ "fas fa-solar-panel",
+ "fas fa-sort",
+ "fas fa-sort-alpha-down",
+ "fas fa-sort-alpha-up",
+ "fas fa-sort-amount-down",
+ "fas fa-sort-amount-up",
+ "fas fa-sort-down",
+ "fas fa-sort-numeric-down",
+ "fas fa-sort-numeric-up",
+ "fas fa-sort-up",
+ "fas fa-spa",
+ "fas fa-space-shuttle",
+ "fas fa-spider",
+ "fas fa-spinner",
+ "fas fa-splotch",
+ "fas fa-spray-can",
+ "fas fa-square",
+ "fas fa-square-full",
+ "fas fa-square-root-alt",
+ "fas fa-stamp",
+ "fas fa-star",
+ "fas fa-star-and-crescent",
+ "fas fa-star-half",
+ "fas fa-star-half-alt",
+ "fas fa-star-of-david",
+ "fas fa-star-of-life",
+ "fas fa-step-backward",
+ "fas fa-step-forward",
+ "fas fa-stethoscope",
+ "fas fa-sticky-note",
+ "fas fa-stop",
+ "fas fa-stop-circle",
+ "fas fa-stopwatch",
+ "fas fa-store",
+ "fas fa-store-alt",
+ "fas fa-stream",
+ "fas fa-street-view",
+ "fas fa-strikethrough",
+ "fas fa-stroopwafel",
+ "fas fa-subscript",
+ "fas fa-subway",
+ "fas fa-suitcase",
+ "fas fa-suitcase-rolling",
+ "fas fa-sun",
+ "fas fa-superscript",
+ "fas fa-surprise",
+ "fas fa-swatchbook",
+ "fas fa-swimmer",
+ "fas fa-swimming-pool",
+ "fas fa-synagogue",
+ "fas fa-sync",
+ "fas fa-sync-alt",
+ "fas fa-syringe",
+ "fas fa-table",
+ "fas fa-table-tennis",
+ "fas fa-tablet",
+ "fas fa-tablet-alt",
+ "fas fa-tablets",
+ "fas fa-tachometer-alt",
+ "fas fa-tag",
+ "fas fa-tags",
+ "fas fa-tape",
+ "fas fa-tasks",
+ "fas fa-taxi",
+ "fas fa-teeth",
+ "fas fa-teeth-open",
+ "fas fa-temperature-high",
+ "fas fa-temperature-low",
+ "fas fa-tenge",
+ "fas fa-terminal",
+ "fas fa-text-height",
+ "fas fa-text-width",
+ "fas fa-th",
+ "fas fa-th-large",
+ "fas fa-th-list",
+ "fas fa-theater-masks",
+ "fas fa-thermometer",
+ "fas fa-thermometer-empty",
+ "fas fa-thermometer-full",
+ "fas fa-thermometer-half",
+ "fas fa-thermometer-quarter",
+ "fas fa-thermometer-three-quarters",
+ "fas fa-thumbs-down",
+ "fas fa-thumbs-up",
+ "fas fa-thumbtack",
+ "fas fa-ticket-alt",
+ "fas fa-times",
+ "fas fa-times-circle",
+ "fas fa-tint",
+ "fas fa-tint-slash",
+ "fas fa-tired",
+ "fas fa-toggle-off",
+ "fas fa-toggle-on",
+ "fas fa-toilet",
+ "fas fa-toilet-paper",
+ "fas fa-toolbox",
+ "fas fa-tools",
+ "fas fa-tooth",
+ "fas fa-torah",
+ "fas fa-torii-gate",
+ "fas fa-tractor",
+ "fas fa-trademark",
+ "fas fa-traffic-light",
+ "fas fa-train",
+ "fas fa-tram",
+ "fas fa-transgender",
+ "fas fa-transgender-alt",
+ "fas fa-trash",
+ "fas fa-trash-alt",
+ "fas fa-tree",
+ "fas fa-trophy",
+ "fas fa-truck",
+ "fas fa-truck-loading",
+ "fas fa-truck-monster",
+ "fas fa-truck-moving",
+ "fas fa-truck-pickup",
+ "fas fa-tshirt",
+ "fas fa-tty",
+ "fas fa-tv",
+ "fas fa-umbrella",
+ "fas fa-umbrella-beach",
+ "fas fa-underline",
+ "fas fa-undo",
+ "fas fa-undo-alt",
+ "fas fa-universal-access",
+ "fas fa-university",
+ "fas fa-unlink",
+ "fas fa-unlock",
+ "fas fa-unlock-alt",
+ "fas fa-upload",
+ "fas fa-user",
+ "fas fa-user-alt",
+ "fas fa-user-alt-slash",
+ "fas fa-user-astronaut",
+ "fas fa-user-check",
+ "fas fa-user-circle",
+ "fas fa-user-clock",
+ "fas fa-user-cog",
+ "fas fa-user-edit",
+ "fas fa-user-friends",
+ "fas fa-user-graduate",
+ "fas fa-user-injured",
+ "fas fa-user-lock",
+ "fas fa-user-md",
+ "fas fa-user-minus",
+ "fas fa-user-ninja",
+ "fas fa-user-plus",
+ "fas fa-user-secret",
+ "fas fa-user-shield",
+ "fas fa-user-slash",
+ "fas fa-user-tag",
+ "fas fa-user-tie",
+ "fas fa-user-times",
+ "fas fa-users",
+ "fas fa-users-cog",
+ "fas fa-utensil-spoon",
+ "fas fa-utensils",
+ "fas fa-vector-square",
+ "fas fa-venus",
+ "fas fa-venus-double",
+ "fas fa-venus-mars",
+ "fas fa-vial",
+ "fas fa-vials",
+ "fas fa-video",
+ "fas fa-video-slash",
+ "fas fa-vihara",
+ "fas fa-volleyball-ball",
+ "fas fa-volume-down",
+ "fas fa-volume-mute",
+ "fas fa-volume-off",
+ "fas fa-volume-up",
+ "fas fa-vote-yea",
+ "fas fa-vr-cardboard",
+ "fas fa-walking",
+ "fas fa-wallet",
+ "fas fa-warehouse",
+ "fas fa-water",
+ "fas fa-weight",
+ "fas fa-weight-hanging",
+ "fas fa-wheelchair",
+ "fas fa-wifi",
+ "fas fa-wind",
+ "fas fa-window-close",
+ "fas fa-window-maximize",
+ "fas fa-window-minimize",
+ "fas fa-window-restore",
+ "fas fa-wine-bottle",
+ "fas fa-wine-glass",
+ "fas fa-wine-glass-alt",
+ "fas fa-won-sign",
+ "fas fa-wrench",
+ "fas fa-x-ray",
+ "fas fa-yen-sign",
+ "fas fa-yin-yang",
+ "far fa-address-book",
+ "far fa-address-card",
+ "far fa-angry",
+ "far fa-arrow-alt-circle-down",
+ "far fa-arrow-alt-circle-left",
+ "far fa-arrow-alt-circle-right",
+ "far fa-arrow-alt-circle-up",
+ "far fa-bell",
+ "far fa-bell-slash",
+ "far fa-bookmark",
+ "far fa-building",
+ "far fa-calendar",
+ "far fa-calendar-alt",
+ "far fa-calendar-check",
+ "far fa-calendar-minus",
+ "far fa-calendar-plus",
+ "far fa-calendar-times",
+ "far fa-caret-square-down",
+ "far fa-caret-square-left",
+ "far fa-caret-square-right",
+ "far fa-caret-square-up",
+ "far fa-chart-bar",
+ "far fa-check-circle",
+ "far fa-check-square",
+ "far fa-circle",
+ "far fa-clipboard",
+ "far fa-clock",
+ "far fa-clone",
+ "far fa-closed-captioning",
+ "far fa-comment",
+ "far fa-comment-alt",
+ "far fa-comment-dots",
+ "far fa-comments",
+ "far fa-compass",
+ "far fa-copy",
+ "far fa-copyright",
+ "far fa-credit-card",
+ "far fa-dizzy",
+ "far fa-dot-circle",
+ "far fa-edit",
+ "far fa-envelope",
+ "far fa-envelope-open",
+ "far fa-eye",
+ "far fa-eye-slash",
+ "far fa-file",
+ "far fa-file-alt",
+ "far fa-file-archive",
+ "far fa-file-audio",
+ "far fa-file-code",
+ "far fa-file-excel",
+ "far fa-file-image",
+ "far fa-file-pdf",
+ "far fa-file-powerpoint",
+ "far fa-file-video",
+ "far fa-file-word",
+ "far fa-flag",
+ "far fa-flushed",
+ "far fa-folder",
+ "far fa-folder-open",
+ "far fa-frown",
+ "far fa-frown-open",
+ "far fa-futbol",
+ "far fa-gem",
+ "far fa-grimace",
+ "far fa-grin",
+ "far fa-grin-alt",
+ "far fa-grin-beam",
+ "far fa-grin-beam-sweat",
+ "far fa-grin-hearts",
+ "far fa-grin-squint",
+ "far fa-grin-squint-tears",
+ "far fa-grin-stars",
+ "far fa-grin-tears",
+ "far fa-grin-tongue",
+ "far fa-grin-tongue-squint",
+ "far fa-grin-tongue-wink",
+ "far fa-grin-wink",
+ "far fa-hand-lizard",
+ "far fa-hand-paper",
+ "far fa-hand-peace",
+ "far fa-hand-point-down",
+ "far fa-hand-point-left",
+ "far fa-hand-point-right",
+ "far fa-hand-point-up",
+ "far fa-hand-pointer",
+ "far fa-hand-rock",
+ "far fa-hand-scissors",
+ "far fa-hand-spock",
+ "far fa-handshake",
+ "far fa-hdd",
+ "far fa-heart",
+ "far fa-hospital",
+ "far fa-hourglass",
+ "far fa-id-badge",
+ "far fa-id-card",
+ "far fa-image",
+ "far fa-images",
+ "far fa-keyboard",
+ "far fa-kiss",
+ "far fa-kiss-beam",
+ "far fa-kiss-wink-heart",
+ "far fa-laugh",
+ "far fa-laugh-beam",
+ "far fa-laugh-squint",
+ "far fa-laugh-wink",
+ "far fa-lemon",
+ "far fa-life-ring",
+ "far fa-lightbulb",
+ "far fa-list-alt",
+ "far fa-map",
+ "far fa-meh",
+ "far fa-meh-blank",
+ "far fa-meh-rolling-eyes",
+ "far fa-minus-square",
+ "far fa-money-bill-alt",
+ "far fa-moon",
+ "far fa-newspaper",
+ "far fa-object-group",
+ "far fa-object-ungroup",
+ "far fa-paper-plane",
+ "far fa-pause-circle",
+ "far fa-play-circle",
+ "far fa-plus-square",
+ "far fa-question-circle",
+ "far fa-registered",
+ "far fa-sad-cry",
+ "far fa-sad-tear",
+ "far fa-save",
+ "far fa-share-square",
+ "far fa-smile",
+ "far fa-smile-beam",
+ "far fa-smile-wink",
+ "far fa-snowflake",
+ "far fa-square",
+ "far fa-star",
+ "far fa-star-half",
+ "far fa-sticky-note",
+ "far fa-stop-circle",
+ "far fa-sun",
+ "far fa-surprise",
+ "far fa-thumbs-down",
+ "far fa-thumbs-up",
+ "far fa-times-circle",
+ "far fa-tired",
+ "far fa-trash-alt",
+ "far fa-user",
+ "far fa-user-circle",
+ "far fa-window-close",
+ "far fa-window-maximize",
+ "far fa-window-minimize",
+ "far fa-window-restore",
+ "fab fa-500px",
+ "fab fa-accessible-icon",
+ "fab fa-accusoft",
+ "fab fa-acquisitions-incorporated",
+ "fab fa-adn",
+ "fab fa-adobe",
+ "fab fa-adversal",
+ "fab fa-affiliatetheme",
+ "fab fa-algolia",
+ "fab fa-alipay",
+ "fab fa-amazon",
+ "fab fa-amazon-pay",
+ "fab fa-amilia",
+ "fab fa-android",
+ "fab fa-angellist",
+ "fab fa-angrycreative",
+ "fab fa-angular",
+ "fab fa-app-store",
+ "fab fa-app-store-ios",
+ "fab fa-apper",
+ "fab fa-apple",
+ "fab fa-apple-pay",
+ "fab fa-artstation",
+ "fab fa-asymmetrik",
+ "fab fa-atlassian",
+ "fab fa-audible",
+ "fab fa-autoprefixer",
+ "fab fa-avianex",
+ "fab fa-aviato",
+ "fab fa-aws",
+ "fab fa-bandcamp",
+ "fab fa-behance",
+ "fab fa-behance-square",
+ "fab fa-bimobject",
+ "fab fa-bitbucket",
+ "fab fa-bitcoin",
+ "fab fa-bity",
+ "fab fa-black-tie",
+ "fab fa-blackberry",
+ "fab fa-blogger",
+ "fab fa-blogger-b",
+ "fab fa-bluetooth",
+ "fab fa-bluetooth-b",
+ "fab fa-btc",
+ "fab fa-buromobelexperte",
+ "fab fa-buysellads",
+ "fab fa-canadian-maple-leaf",
+ "fab fa-cc-amazon-pay",
+ "fab fa-cc-amex",
+ "fab fa-cc-apple-pay",
+ "fab fa-cc-diners-club",
+ "fab fa-cc-discover",
+ "fab fa-cc-jcb",
+ "fab fa-cc-mastercard",
+ "fab fa-cc-paypal",
+ "fab fa-cc-stripe",
+ "fab fa-cc-visa",
+ "fab fa-centercode",
+ "fab fa-centos",
+ "fab fa-chrome",
+ "fab fa-cloudscale",
+ "fab fa-cloudsmith",
+ "fab fa-cloudversify",
+ "fab fa-codepen",
+ "fab fa-codiepie",
+ "fab fa-confluence",
+ "fab fa-connectdevelop",
+ "fab fa-contao",
+ "fab fa-cpanel",
+ "fab fa-creative-commons",
+ "fab fa-creative-commons-by",
+ "fab fa-creative-commons-nc",
+ "fab fa-creative-commons-nc-eu",
+ "fab fa-creative-commons-nc-jp",
+ "fab fa-creative-commons-nd",
+ "fab fa-creative-commons-pd",
+ "fab fa-creative-commons-pd-alt",
+ "fab fa-creative-commons-remix",
+ "fab fa-creative-commons-sa",
+ "fab fa-creative-commons-sampling",
+ "fab fa-creative-commons-sampling-plus",
+ "fab fa-creative-commons-share",
+ "fab fa-creative-commons-zero",
+ "fab fa-critical-role",
+ "fab fa-css3",
+ "fab fa-css3-alt",
+ "fab fa-cuttlefish",
+ "fab fa-d-and-d",
+ "fab fa-d-and-d-beyond",
+ "fab fa-dashcube",
+ "fab fa-delicious",
+ "fab fa-deploydog",
+ "fab fa-deskpro",
+ "fab fa-dev",
+ "fab fa-deviantart",
+ "fab fa-dhl",
+ "fab fa-diaspora",
+ "fab fa-digg",
+ "fab fa-digital-ocean",
+ "fab fa-discord",
+ "fab fa-discourse",
+ "fab fa-dochub",
+ "fab fa-docker",
+ "fab fa-draft2digital",
+ "fab fa-dribbble",
+ "fab fa-dribbble-square",
+ "fab fa-dropbox",
+ "fab fa-drupal",
+ "fab fa-dyalog",
+ "fab fa-earlybirds",
+ "fab fa-ebay",
+ "fab fa-edge",
+ "fab fa-elementor",
+ "fab fa-ello",
+ "fab fa-ember",
+ "fab fa-empire",
+ "fab fa-envira",
+ "fab fa-erlang",
+ "fab fa-ethereum",
+ "fab fa-etsy",
+ "fab fa-expeditedssl",
+ "fab fa-facebook",
+ "fab fa-facebook-f",
+ "fab fa-facebook-messenger",
+ "fab fa-facebook-square",
+ "fab fa-fantasy-flight-games",
+ "fab fa-fedex",
+ "fab fa-fedora",
+ "fab fa-figma",
+ "fab fa-firefox",
+ "fab fa-first-order",
+ "fab fa-first-order-alt",
+ "fab fa-firstdraft",
+ "fab fa-flickr",
+ "fab fa-flipboard",
+ "fab fa-fly",
+ "fab fa-font-awesome",
+ "fab fa-font-awesome-alt",
+ "fab fa-font-awesome-flag",
+ "fab fa-fonticons",
+ "fab fa-fonticons-fi",
+ "fab fa-fort-awesome",
+ "fab fa-fort-awesome-alt",
+ "fab fa-forumbee",
+ "fab fa-foursquare",
+ "fab fa-free-code-camp",
+ "fab fa-freebsd",
+ "fab fa-fulcrum",
+ "fab fa-galactic-republic",
+ "fab fa-galactic-senate",
+ "fab fa-get-pocket",
+ "fab fa-gg",
+ "fab fa-gg-circle",
+ "fab fa-git",
+ "fab fa-git-square",
+ "fab fa-github",
+ "fab fa-github-alt",
+ "fab fa-github-square",
+ "fab fa-gitkraken",
+ "fab fa-gitlab",
+ "fab fa-gitter",
+ "fab fa-glide",
+ "fab fa-glide-g",
+ "fab fa-gofore",
+ "fab fa-goodreads",
+ "fab fa-goodreads-g",
+ "fab fa-google",
+ "fab fa-google-drive",
+ "fab fa-google-play",
+ "fab fa-google-plus",
+ "fab fa-google-plus-g",
+ "fab fa-google-plus-square",
+ "fab fa-google-wallet",
+ "fab fa-gratipay",
+ "fab fa-grav",
+ "fab fa-gripfire",
+ "fab fa-grunt",
+ "fab fa-gulp",
+ "fab fa-hacker-news",
+ "fab fa-hacker-news-square",
+ "fab fa-hackerrank",
+ "fab fa-hips",
+ "fab fa-hire-a-helper",
+ "fab fa-hooli",
+ "fab fa-hornbill",
+ "fab fa-hotjar",
+ "fab fa-houzz",
+ "fab fa-html5",
+ "fab fa-hubspot",
+ "fab fa-imdb",
+ "fab fa-instagram",
+ "fab fa-intercom",
+ "fab fa-internet-explorer",
+ "fab fa-invision",
+ "fab fa-ioxhost",
+ "fab fa-itunes",
+ "fab fa-itunes-note",
+ "fab fa-java",
+ "fab fa-jedi-order",
+ "fab fa-jenkins",
+ "fab fa-jira",
+ "fab fa-joget",
+ "fab fa-joomla",
+ "fab fa-js",
+ "fab fa-js-square",
+ "fab fa-jsfiddle",
+ "fab fa-kaggle",
+ "fab fa-keybase",
+ "fab fa-keycdn",
+ "fab fa-kickstarter",
+ "fab fa-kickstarter-k",
+ "fab fa-korvue",
+ "fab fa-laravel",
+ "fab fa-lastfm",
+ "fab fa-lastfm-square",
+ "fab fa-leanpub",
+ "fab fa-less",
+ "fab fa-line",
+ "fab fa-linkedin",
+ "fab fa-linkedin-in",
+ "fab fa-linode",
+ "fab fa-linux",
+ "fab fa-lyft",
+ "fab fa-magento",
+ "fab fa-mailchimp",
+ "fab fa-mandalorian",
+ "fab fa-markdown",
+ "fab fa-mastodon",
+ "fab fa-maxcdn",
+ "fab fa-medapps",
+ "fab fa-medium",
+ "fab fa-medium-m",
+ "fab fa-medrt",
+ "fab fa-meetup",
+ "fab fa-megaport",
+ "fab fa-mendeley",
+ "fab fa-microsoft",
+ "fab fa-mix",
+ "fab fa-mixcloud",
+ "fab fa-mizuni",
+ "fab fa-modx",
+ "fab fa-monero",
+ "fab fa-napster",
+ "fab fa-neos",
+ "fab fa-nimblr",
+ "fab fa-nintendo-switch",
+ "fab fa-node",
+ "fab fa-node-js",
+ "fab fa-npm",
+ "fab fa-ns8",
+ "fab fa-nutritionix",
+ "fab fa-odnoklassniki",
+ "fab fa-odnoklassniki-square",
+ "fab fa-old-republic",
+ "fab fa-opencart",
+ "fab fa-openid",
+ "fab fa-opera",
+ "fab fa-optin-monster",
+ "fab fa-osi",
+ "fab fa-page4",
+ "fab fa-pagelines",
+ "fab fa-palfed",
+ "fab fa-patreon",
+ "fab fa-paypal",
+ "fab fa-penny-arcade",
+ "fab fa-periscope",
+ "fab fa-phabricator",
+ "fab fa-phoenix-framework",
+ "fab fa-phoenix-squadron",
+ "fab fa-php",
+ "fab fa-pied-piper",
+ "fab fa-pied-piper-alt",
+ "fab fa-pied-piper-hat",
+ "fab fa-pied-piper-pp",
+ "fab fa-pinterest",
+ "fab fa-pinterest-p",
+ "fab fa-pinterest-square",
+ "fab fa-playstation",
+ "fab fa-product-hunt",
+ "fab fa-pushed",
+ "fab fa-python",
+ "fab fa-qq",
+ "fab fa-quinscape",
+ "fab fa-quora",
+ "fab fa-r-project",
+ "fab fa-raspberry-pi",
+ "fab fa-ravelry",
+ "fab fa-react",
+ "fab fa-reacteurope",
+ "fab fa-readme",
+ "fab fa-rebel",
+ "fab fa-red-river",
+ "fab fa-reddit",
+ "fab fa-reddit-alien",
+ "fab fa-reddit-square",
+ "fab fa-redhat",
+ "fab fa-renren",
+ "fab fa-replyd",
+ "fab fa-researchgate",
+ "fab fa-resolving",
+ "fab fa-rev",
+ "fab fa-rocketchat",
+ "fab fa-rockrms",
+ "fab fa-safari",
+ "fab fa-sass",
+ "fab fa-schlix",
+ "fab fa-scribd",
+ "fab fa-searchengin",
+ "fab fa-sellcast",
+ "fab fa-sellsy",
+ "fab fa-servicestack",
+ "fab fa-shirtsinbulk",
+ "fab fa-shopware",
+ "fab fa-simplybuilt",
+ "fab fa-sistrix",
+ "fab fa-sith",
+ "fab fa-sketch",
+ "fab fa-skyatlas",
+ "fab fa-skype",
+ "fab fa-slack",
+ "fab fa-slack-hash",
+ "fab fa-slideshare",
+ "fab fa-snapchat",
+ "fab fa-snapchat-ghost",
+ "fab fa-snapchat-square",
+ "fab fa-soundcloud",
+ "fab fa-sourcetree",
+ "fab fa-speakap",
+ "fab fa-spotify",
+ "fab fa-squarespace",
+ "fab fa-stack-exchange",
+ "fab fa-stack-overflow",
+ "fab fa-staylinked",
+ "fab fa-steam",
+ "fab fa-steam-square",
+ "fab fa-steam-symbol",
+ "fab fa-sticker-mule",
+ "fab fa-strava",
+ "fab fa-stripe",
+ "fab fa-stripe-s",
+ "fab fa-studiovinari",
+ "fab fa-stumbleupon",
+ "fab fa-stumbleupon-circle",
+ "fab fa-superpowers",
+ "fab fa-supple",
+ "fab fa-suse",
+ "fab fa-teamspeak",
+ "fab fa-telegram",
+ "fab fa-telegram-plane",
+ "fab fa-tencent-weibo",
+ "fab fa-the-red-yeti",
+ "fab fa-themeco",
+ "fab fa-themeisle",
+ "fab fa-think-peaks",
+ "fab fa-trade-federation",
+ "fab fa-trello",
+ "fab fa-tripadvisor",
+ "fab fa-tumblr",
+ "fab fa-tumblr-square",
+ "fab fa-twitch",
+ "fab fa-twitter",
+ "fab fa-twitter-square",
+ "fab fa-typo3",
+ "fab fa-uber",
+ "fab fa-ubuntu",
+ "fab fa-uikit",
+ "fab fa-uniregistry",
+ "fab fa-untappd",
+ "fab fa-ups",
+ "fab fa-usb",
+ "fab fa-usps",
+ "fab fa-ussunnah",
+ "fab fa-vaadin",
+ "fab fa-viacoin",
+ "fab fa-viadeo",
+ "fab fa-viadeo-square",
+ "fab fa-viber",
+ "fab fa-vimeo",
+ "fab fa-vimeo-square",
+ "fab fa-vimeo-v",
+ "fab fa-vine",
+ "fab fa-vk",
+ "fab fa-vnv",
+ "fab fa-vuejs",
+ "fab fa-weebly",
+ "fab fa-weibo",
+ "fab fa-weixin",
+ "fab fa-whatsapp",
+ "fab fa-whatsapp-square",
+ "fab fa-whmcs",
+ "fab fa-wikipedia-w",
+ "fab fa-windows",
+ "fab fa-wix",
+ "fab fa-wizards-of-the-coast",
+ "fab fa-wolf-pack-battalion",
+ "fab fa-wordpress",
+ "fab fa-wordpress-simple",
+ "fab fa-wpbeginner",
+ "fab fa-wpexplorer",
+ "fab fa-wpforms",
+ "fab fa-wpressr",
+ "fab fa-xbox",
+ "fab fa-xing",
+ "fab fa-xing-square",
+ "fab fa-y-combinator",
+ "fab fa-yahoo",
+ "fab fa-yandex",
+ "fab fa-yandex-international",
+ "fab fa-yarn",
+ "fab fa-yelp",
+ "fab fa-yoast",
+ "fab fa-youtube",
+ "fab fa-youtube-square",
+ "fab fa-zhihu",
+];
diff --git a/assets/reactjs/src/components/fields/assets/IconSocialData.js b/assets/reactjs/src/components/fields/assets/IconSocialData.js
index 7eaf2a48..24d419e2 100644
--- a/assets/reactjs/src/components/fields/assets/IconSocialData.js
+++ b/assets/reactjs/src/components/fields/assets/IconSocialData.js
@@ -1,252 +1,252 @@
export default [
- {
- value: 'fab fa-facebook',
- name: 'Facebook',
- id: 'facebook'
- },
- {
- value: 'fab fa-facebook-f',
- name: 'Facebook',
- id: 'facebook'
- },
- {
- value: 'fab fa-twitter',
- name: 'Twitter',
- id: 'twitter'
- },
- {
- value: 'fab fa-twitter-square',
- name: 'Twitter',
- id: 'twitter'
- },
- {
- value: 'fab fa-youtube',
- name: 'Youtube',
- id: 'youtube'
- },
- {
- value: 'fab fa-vimeo',
- name: 'Vimeo',
- id: 'vimeo'
- },
- {
- value: 'fab fa-dribbble',
- name: 'Dribbble',
- id: 'dribbble'
- },
- {
- value: 'fab fa-github',
- name: 'Github',
- id: 'github'
- },
- {
- value: 'fab fa-github-square',
- name: 'Github',
- id: 'github'
- },
- {
- value: 'fab fa-amazon',
- name: 'Amazon',
- id: 'amazon'
- },
- {
- value: 'fab fa-behance',
- name: 'Behance',
- id: 'behance'
- },
- {
- value: 'fab fa-codepen',
- name: 'Codepen',
- id: 'codepan'
- },
- {
- value: 'fab fa-flickr',
- name: 'Flickr',
- id: 'flickr'
- },
- {
- value: 'fab fa-foursquare',
- name: 'Foursquare',
- id: 'foursquare'
- },
- {
- value: 'fab fa-gitlab',
- name: 'Gitlab',
- id: 'gitlab'
- },
- {
- value: 'fab fa-linux',
- name: 'Linux',
- id: 'linux'
- },
- {
- value: 'fab fa-whatsapp',
- name: 'Whatsapp',
- id: 'whatsapp'
- },
- {
- value: 'fab fa-tumblr',
- name: 'Tumblr',
- id: 'tumblr'
- },
- {
- value: 'fab fa-trello',
- name: 'Trello',
- id: 'trello'
- },
- {
- value: 'fab fa-soundcloud',
- name: 'Soundcloud',
- id: 'soundcloud'
- },
- {
- value: 'fab fa-spotify',
- name: 'Spotify',
- id: 'spotify'
- },
- {
- value: 'fab fa-skype',
- name: 'Skype',
- id: 'skype'
- },
- {
- value: 'fab fa-slack',
- name: 'Slack',
- id: 'slack'
- },
- {
- value: 'fab fa-reddit-alien',
- name: 'Reddit',
- id: 'reddit'
- },
- {
- value: 'fab fa-tripadvisor',
- name: 'TripAdvisor',
- id: 'tripadvisor'
- },
- {
- value: 'fab fa-pinterest',
- name: 'Pinterest',
- id: 'pinterest'
- },
- {
- value: 'fab fa-pinterest-p',
- name: 'Pinterest',
- id: 'pinterest'
- },
- {
- value: 'fab fa-pinterest-square',
- name: 'Pinterest',
- id: 'pinterest'
- },
- {
- value: 'fab fa-product-hunt',
- name: 'Product Hunt',
- id: 'producthunt'
- },
- {
- value: 'fab fa-medium',
- name: 'Medium',
- id: 'medium'
- },
- {
- value: 'fab fa-instagram',
- name: 'Instagram',
- id: 'instagram'
- },
- {
- value: 'fab fa-linkedin',
- name: 'Linkedin',
- id: 'linkedin'
- },
- {
- value: 'fab fa-digg',
- name: 'Digg',
- id: 'digg'
- },
- {
- value: 'fab fa-dropbox',
- name: 'Dropbox',
- id: 'dropbox'
- },
- {
- value: 'fab fa-slideshare',
- name: 'Slideshare',
- id: 'slideshare'
- },
- {
- value: 'fab fa-stack-overflow',
- name: 'Stack Overflow',
- id: 'stackoverflow'
- },
- {
- value: 'fab fa-stumbleupon',
- name: 'StumbleUpon',
- id: 'stumbleupon'
- },
- {
- value: 'fab fa-stumbleupon-circle',
- name: 'StumbleUpon',
- id: 'stumbleupon'
- },
- {
- value: 'fab fa-wordpress',
- name: 'Wordpress',
- id: 'wordpress'
- },
- {
- value: 'fab fa-xing',
- name: 'Xing',
- id: 'xing'
- },
- {
- value: 'fab fa-xing-square',
- name: 'Xing',
- id: 'xing'
- },
- {
- value: 'fab fa-yahoo',
- name: 'yahoo',
- id: 'yahoo'
- },
- {
- value: 'fab fa-bitbucket',
- name: 'bitbucket',
- id: 'bitbucket'
- },
- {
- value: 'fab fa-jsfiddle',
- name: 'JsFiddle',
- id: 'jsfiddle'
- },
- {
- value: 'fab fa-joomla',
- name: 'Joomla',
- id: 'joomla'
- },
- {
- value: 'fab fa-imdb',
- name: 'IMDB',
- id: 'imdb'
- },
- {
- value: 'fab fa-snapchat',
- name: 'Snapchat',
- id: 'snapchat'
- },
- {
- value: 'fab fa-snapchat-square',
- name: 'Snapchat',
- id: 'snapchat'
- },
- {
- value: 'fab fa-telegram',
- name: 'Telegram',
- id: 'telegram'
- },
- {
- value: 'fab fa-twitch',
- name: 'Twitch',
- id: 'twitch'
- }
-]
\ No newline at end of file
+ {
+ value: "fab fa-facebook",
+ name: "Facebook",
+ id: "facebook",
+ },
+ {
+ value: "fab fa-facebook-f",
+ name: "Facebook",
+ id: "facebook",
+ },
+ {
+ value: "fab fa-twitter",
+ name: "Twitter",
+ id: "twitter",
+ },
+ {
+ value: "fab fa-twitter-square",
+ name: "Twitter",
+ id: "twitter",
+ },
+ {
+ value: "fab fa-youtube",
+ name: "Youtube",
+ id: "youtube",
+ },
+ {
+ value: "fab fa-vimeo",
+ name: "Vimeo",
+ id: "vimeo",
+ },
+ {
+ value: "fab fa-dribbble",
+ name: "Dribbble",
+ id: "dribbble",
+ },
+ {
+ value: "fab fa-github",
+ name: "Github",
+ id: "github",
+ },
+ {
+ value: "fab fa-github-square",
+ name: "Github",
+ id: "github",
+ },
+ {
+ value: "fab fa-amazon",
+ name: "Amazon",
+ id: "amazon",
+ },
+ {
+ value: "fab fa-behance",
+ name: "Behance",
+ id: "behance",
+ },
+ {
+ value: "fab fa-codepen",
+ name: "Codepen",
+ id: "codepan",
+ },
+ {
+ value: "fab fa-flickr",
+ name: "Flickr",
+ id: "flickr",
+ },
+ {
+ value: "fab fa-foursquare",
+ name: "Foursquare",
+ id: "foursquare",
+ },
+ {
+ value: "fab fa-gitlab",
+ name: "Gitlab",
+ id: "gitlab",
+ },
+ {
+ value: "fab fa-linux",
+ name: "Linux",
+ id: "linux",
+ },
+ {
+ value: "fab fa-whatsapp",
+ name: "Whatsapp",
+ id: "whatsapp",
+ },
+ {
+ value: "fab fa-tumblr",
+ name: "Tumblr",
+ id: "tumblr",
+ },
+ {
+ value: "fab fa-trello",
+ name: "Trello",
+ id: "trello",
+ },
+ {
+ value: "fab fa-soundcloud",
+ name: "Soundcloud",
+ id: "soundcloud",
+ },
+ {
+ value: "fab fa-spotify",
+ name: "Spotify",
+ id: "spotify",
+ },
+ {
+ value: "fab fa-skype",
+ name: "Skype",
+ id: "skype",
+ },
+ {
+ value: "fab fa-slack",
+ name: "Slack",
+ id: "slack",
+ },
+ {
+ value: "fab fa-reddit-alien",
+ name: "Reddit",
+ id: "reddit",
+ },
+ {
+ value: "fab fa-tripadvisor",
+ name: "TripAdvisor",
+ id: "tripadvisor",
+ },
+ {
+ value: "fab fa-pinterest",
+ name: "Pinterest",
+ id: "pinterest",
+ },
+ {
+ value: "fab fa-pinterest-p",
+ name: "Pinterest",
+ id: "pinterest",
+ },
+ {
+ value: "fab fa-pinterest-square",
+ name: "Pinterest",
+ id: "pinterest",
+ },
+ {
+ value: "fab fa-product-hunt",
+ name: "Product Hunt",
+ id: "producthunt",
+ },
+ {
+ value: "fab fa-medium",
+ name: "Medium",
+ id: "medium",
+ },
+ {
+ value: "fab fa-instagram",
+ name: "Instagram",
+ id: "instagram",
+ },
+ {
+ value: "fab fa-linkedin",
+ name: "Linkedin",
+ id: "linkedin",
+ },
+ {
+ value: "fab fa-digg",
+ name: "Digg",
+ id: "digg",
+ },
+ {
+ value: "fab fa-dropbox",
+ name: "Dropbox",
+ id: "dropbox",
+ },
+ {
+ value: "fab fa-slideshare",
+ name: "Slideshare",
+ id: "slideshare",
+ },
+ {
+ value: "fab fa-stack-overflow",
+ name: "Stack Overflow",
+ id: "stackoverflow",
+ },
+ {
+ value: "fab fa-stumbleupon",
+ name: "StumbleUpon",
+ id: "stumbleupon",
+ },
+ {
+ value: "fab fa-stumbleupon-circle",
+ name: "StumbleUpon",
+ id: "stumbleupon",
+ },
+ {
+ value: "fab fa-wordpress",
+ name: "Wordpress",
+ id: "wordpress",
+ },
+ {
+ value: "fab fa-xing",
+ name: "Xing",
+ id: "xing",
+ },
+ {
+ value: "fab fa-xing-square",
+ name: "Xing",
+ id: "xing",
+ },
+ {
+ value: "fab fa-yahoo",
+ name: "yahoo",
+ id: "yahoo",
+ },
+ {
+ value: "fab fa-bitbucket",
+ name: "bitbucket",
+ id: "bitbucket",
+ },
+ {
+ value: "fab fa-jsfiddle",
+ name: "JsFiddle",
+ id: "jsfiddle",
+ },
+ {
+ value: "fab fa-joomla",
+ name: "Joomla",
+ id: "joomla",
+ },
+ {
+ value: "fab fa-imdb",
+ name: "IMDB",
+ id: "imdb",
+ },
+ {
+ value: "fab fa-snapchat",
+ name: "Snapchat",
+ id: "snapchat",
+ },
+ {
+ value: "fab fa-snapchat-square",
+ name: "Snapchat",
+ id: "snapchat",
+ },
+ {
+ value: "fab fa-telegram",
+ name: "Telegram",
+ id: "telegram",
+ },
+ {
+ value: "fab fa-twitch",
+ name: "Twitch",
+ id: "twitch",
+ },
+];
diff --git a/assets/reactjs/src/components/fields/headingToolbar/headingIcon.js b/assets/reactjs/src/components/fields/headingToolbar/headingIcon.js
index 4743252c..38c7d166 100644
--- a/assets/reactjs/src/components/fields/headingToolbar/headingIcon.js
+++ b/assets/reactjs/src/components/fields/headingToolbar/headingIcon.js
@@ -1,22 +1,21 @@
+const { Path, SVG } = wp.components;
-const { Path, SVG } =wp.components;
-
-export default function HeadingLevelIcon( { level, isPressed = false } ) {
+export default function HeadingLevelIcon({ level, isPressed = false }) {
const levelToPath = {
- 1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
- 2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
- 3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
- 4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
- 5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
- 6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
+ 1: "M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z",
+ 2: "M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z",
+ 3: "M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z",
+ 4: "M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z",
+ 5: "M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z",
+ 6: "M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z",
};
- if ( ! levelToPath.hasOwnProperty( level ) ) {
+ if (!levelToPath.hasOwnProperty(level)) {
return null;
}
return (
-
-
+
);
}
diff --git a/assets/reactjs/src/components/fields/headingToolbar/index.js b/assets/reactjs/src/components/fields/headingToolbar/index.js
index a65b30c9..05cc487e 100644
--- a/assets/reactjs/src/components/fields/headingToolbar/index.js
+++ b/assets/reactjs/src/components/fields/headingToolbar/index.js
@@ -1,44 +1,43 @@
-
-
-const { __ } = wp.i18n
+const { __ } = wp.i18n;
const { Component } = wp.element;
const { Toolbar } = wp.components;
-import HeadingLevelIcon from './headingIcon';
+import HeadingLevelIcon from "./headingIcon";
class HeadingToolbar extends Component {
- createLevelControl(targetLevel, selectedLevel, onChange) {
- const isActive = targetLevel === selectedLevel;
- return {
- icon: (
-
+
-
)}
- renderContent={() =>
+ renderContent={() => (
- this.setSettings('spaceTop', val)} min={0} max={100} step={1} unit={['px', 'em', '%']} beforeIcon="arrow-up" allowReset responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
- this.setSettings('spaceBottom', val)} min={0} max={100} step={1} unit={['px', 'em', '%']} beforeIcon="arrow-down" allowReset responsive device={device} onDeviceChange={value => this.setState({ device: value })} />
+ this.setSettings("spaceTop", val)}
+ min={0}
+ max={100}
+ step={1}
+ unit={["px", "em", "%"]}
+ beforeIcon="arrow-up"
+ allowReset
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
+ this.setSettings("spaceBottom", val)}
+ min={0}
+ max={100}
+ step={1}
+ unit={["px", "em", "%"]}
+ beforeIcon="arrow-down"
+ allowReset
+ responsive
+ device={device}
+ onDeviceChange={(value) => this.setState({ device: value })}
+ />
- }
- >
-
- )
+ )}
+ >
+ );
}
}
-export default InlineSpacer
-
+export default InlineSpacer;
diff --git a/assets/reactjs/src/components/fields/inline/InlineToolbar.js b/assets/reactjs/src/components/fields/inline/InlineToolbar.js
index d60413b2..ca45e0f1 100644
--- a/assets/reactjs/src/components/fields/inline/InlineToolbar.js
+++ b/assets/reactjs/src/components/fields/inline/InlineToolbar.js
@@ -1,17 +1,24 @@
-const { Component } = wp.element
-import '../../css/inline_toolbar.scss'
-import InlineSpacer from './InlineSpacer'
+const { Component } = wp.element;
+import "../../css/inline_toolbar.scss";
+import InlineSpacer from "./InlineSpacer";
class InlineToolbar extends Component {
-
- render() {
- let html = [];
- (this.props.data).forEach((val, i) => {
- if (val.name == 'InlineSpacer' && this.props.prevState[val.key]) {
- html.push( this.props.setAttributes({ [val.key]: value })} />)
- }
- })
- return html
- }
+ render() {
+ let html = [];
+ this.props.data.forEach((val, i) => {
+ if (val.name == "InlineSpacer" && this.props.prevState[val.key]) {
+ html.push(
+ this.props.setAttributes({ [val.key]: value })}
+ />
+ );
+ }
+ });
+ return html;
+ }
}
-export default InlineToolbar
\ No newline at end of file
+export default InlineToolbar;
diff --git a/assets/reactjs/src/components/fields/inline/Selector.js b/assets/reactjs/src/components/fields/inline/Selector.js
index 5a085465..286fe8a0 100644
--- a/assets/reactjs/src/components/fields/inline/Selector.js
+++ b/assets/reactjs/src/components/fields/inline/Selector.js
@@ -1,8 +1,18 @@
-const { __ } = wp.i18n
-const { Component } = wp.element
-const { Toolbar } = wp.components
-import icons from '../../../helpers/icons';
-const defaultOptions = [['h1', 'Heading 1'], ['h2', 'Heading 2'], ['h3', 'Heading 3'], ['h4', 'Heading 4'], ['h5', 'Heading 5'], ['h6', 'Heading 6'], ['p', 'Paragraph'], ['span', 'span'], ['div', 'div']]
+const { __ } = wp.i18n;
+const { Component } = wp.element;
+const { Toolbar } = wp.components;
+import icons from "../../../helpers/icons";
+const defaultOptions = [
+ ["h1", "Heading 1"],
+ ["h2", "Heading 2"],
+ ["h3", "Heading 3"],
+ ["h4", "Heading 4"],
+ ["h5", "Heading 5"],
+ ["h6", "Heading 6"],
+ ["p", "Paragraph"],
+ ["span", "span"],
+ ["div", "div"],
+];
class InlineSelector extends Component {
headingController = (newSelector) => {
@@ -22,10 +32,10 @@ class InlineSelector extends Component {
this.headingController(newSelector))}
/>
)
}
}
-export default InlineSelector
\ No newline at end of file
+export default InlineSelector;
diff --git a/assets/reactjs/src/components/fields/inline/index.js b/assets/reactjs/src/components/fields/inline/index.js
index 425d0de8..0ea4be22 100644
--- a/assets/reactjs/src/components/fields/inline/index.js
+++ b/assets/reactjs/src/components/fields/inline/index.js
@@ -1,5 +1,5 @@
-import InlineToolbar from './InlineToolbar'
-import InlineSpacer from './InlineSpacer'
-import InlineSelector from './Selector'
+import InlineToolbar from "./InlineToolbar";
+import InlineSpacer from "./InlineSpacer";
+import InlineSelector from "./Selector";
-export { InlineToolbar, InlineSpacer, InlineSelector }
\ No newline at end of file
+export { InlineToolbar, InlineSpacer, InlineSelector };
diff --git a/assets/reactjs/src/components/format-library/background-color/index.js b/assets/reactjs/src/components/format-library/background-color/index.js
index ca6c631c..e1cd42b0 100644
--- a/assets/reactjs/src/components/format-library/background-color/index.js
+++ b/assets/reactjs/src/components/format-library/background-color/index.js
@@ -2,157 +2,139 @@
* WordPress dependencies
*/
const { __ } = wp.i18n;
-const {
- Fragment,
- Component
-} = wp.element;
-const {
- toggleFormat,
- applyFormat,
-} = wp.richText;
-const {
- Popover,
- ColorPicker,
-} = wp.components;
+const { Fragment, Component } = wp.element;
+const { toggleFormat, applyFormat } = wp.richText;
+const { Popover, ColorPicker } = wp.components;
const { RichTextToolbarButton } = wp.blockEditor;
/**
* Internal dependencies
*/
-import icons from '../../../helpers/icons';
-import '../../css/editorinline.scss';
+import icons from "../../../helpers/icons";
+import "../../css/editorinline.scss";
-const name = 'qubely/backgroundcolor';
-const title = __('Qubely Background');
+const name = "qubely/backgroundcolor";
+const title = __("Qubely Background");
export const backgroundColor = {
- name,
- title,
- tagName: 'span',
- className: 'qubely-text-has-bgcolor',
- attributes: {
- style: 'style',
- data: 'data'
- },
- edit: class BackgroundColor extends Component {
- constructor(props) {
- super(props)
- this.state = {
- showColorPicker: false
- }
- }
- findCurrentBgActiveColor = (value) => {
- let color
- let index = value.start
- if (value.formats[index]) {
- value.formats[index].forEach((format, index) => {
- if (format.type == 'qubely/backgroundcolor') {
- color = format.attributes.data
- }
- })
- }
- return color
- }
+ name,
+ title,
+ tagName: "span",
+ className: "qubely-text-has-bgcolor",
+ attributes: {
+ style: "style",
+ data: "data",
+ },
+ edit: class BackgroundColor extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showColorPicker: false,
+ };
+ }
+ findCurrentBgActiveColor = (value) => {
+ let color;
+ let index = value.start;
+ if (value.formats[index]) {
+ value.formats[index].forEach((format, index) => {
+ if (format.type == "qubely/backgroundcolor") {
+ color = format.attributes.data;
+ }
+ });
+ }
+ return color;
+ };
- render() {
- const { isActive, value, onChange } = this.props
- const { showColorPicker } = this.state
- let activeBackgroundColor = this.findCurrentBgActiveColor(value)
- let isSelected = value.end - value.start > 0 ? true : false;
- const defColors = () => {
- let val = qubely_admin.palette;
- let { colors } = JSON.parse(localStorage.getItem('qubely-global-settings'));
- if (typeof colors !== 'undefined') {
- val = colors
- }
- return val;
- }
- return (
-
-
-
- {icons.highlighterIcon}
-
-
+ render() {
+ const { isActive, value, onChange } = this.props;
+ const { showColorPicker } = this.state;
+ let activeBackgroundColor = this.findCurrentBgActiveColor(value);
+ let isSelected = value.end - value.start > 0 ? true : false;
+ const defColors = () => {
+ let val = qubely_admin.palette;
+ let { colors } = JSON.parse(localStorage.getItem("qubely-global-settings"));
+ if (typeof colors !== "undefined") {
+ val = colors;
+ }
+ return val;
+ };
+ return (
+
+
+
+ {icons.highlighterIcon}
+
+
+ }
+ title={title}
+ onClick={() => {
+ !activeBackgroundColor && this.setState({ showColorPicker: !showColorPicker });
+ if (activeBackgroundColor == "#fff" || value.start === value.end) {
+ onChange(
+ toggleFormat(value, {
+ type: "qubely/backgroundcolor",
+ })
+ );
+ }
+ }}
+ isActive={isActive}
+ />
- }
- title={title}
- onClick={() => {
- !activeBackgroundColor && this.setState({ showColorPicker: !showColorPicker })
- if (activeBackgroundColor == '#fff' || value.start === value.end) {
- onChange(toggleFormat(value, {
- type: 'qubely/backgroundcolor',
- }))
- }
- }}
- isActive={isActive}
- />
+ {showColorPicker && (
+ this.setState({ showColorPicker: false })} noArrow={true}>
+ {
+ onChange(
+ applyFormat(value, {
+ type: "qubely/backgroundcolor",
+ attributes: {
+ style: `background-color: ${newColor.hex};`,
+ data: newColor.hex,
+ },
+ startIndex: value.start,
+ endIndex: value.end,
+ })
+ );
+ }}
+ />
- {
- showColorPicker &&
- this.setState({ showColorPicker: false })}
- noArrow={true}
- >
- {
- onChange(applyFormat(value, {
- type: 'qubely/backgroundcolor',
- attributes: {
- style: `background-color: ${newColor.hex};`,
- data: newColor.hex
- },
- startIndex: value.start,
- endIndex: value.end
- }))
- }} />
-
-
- {
- defColors().map((color, index) => (
- {
- onChange(applyFormat(value, {
- type: 'qubely/backgroundcolor',
- attributes: {
- style: `background-color: var(--qubely-color-${index + 1});`,
- data: `var(--qubely-color-${index + 1})`
- },
- startIndex: value.start,
- endIndex: value.end
- }))
- }}
- />
- ))
- }
-
-
-
- }
-
- );
- }
- }
+
+ {defColors().map((color, index) => (
+ {
+ onChange(
+ applyFormat(value, {
+ type: "qubely/backgroundcolor",
+ attributes: {
+ style: `background-color: var(--qubely-color-${index + 1});`,
+ data: `var(--qubely-color-${index + 1})`,
+ },
+ startIndex: value.start,
+ endIndex: value.end,
+ })
+ );
+ }}
+ />
+ ))}
+
+
+ )}
+
+ );
+ }
+ },
};
-
-
-
-
-
diff --git a/assets/reactjs/src/components/format-library/color/index.js b/assets/reactjs/src/components/format-library/color/index.js
index 60335758..d60ee399 100644
--- a/assets/reactjs/src/components/format-library/color/index.js
+++ b/assets/reactjs/src/components/format-library/color/index.js
@@ -2,154 +2,138 @@
* WordPress dependencies
*/
const { __ } = wp.i18n;
-const {
- Fragment,
- Component
-} = wp.element;
-const {
- toggleFormat,
- applyFormat,
-} = wp.richText;
-const {
- Popover,
- ColorPicker,
-} = wp.components;
+const { Fragment, Component } = wp.element;
+const { toggleFormat, applyFormat } = wp.richText;
+const { Popover, ColorPicker } = wp.components;
const { RichTextToolbarButton } = wp.blockEditor;
/**
* Internal dependencies
*/
-import icons from '../../../helpers/icons';
-import '../../css/editorinline.scss';
+import icons from "../../../helpers/icons";
+import "../../css/editorinline.scss";
-const name = 'qubely/inlinecolor';
-const title = __('Qubely Color');
+const name = "qubely/inlinecolor";
+const title = __("Qubely Color");
export const color = {
- name,
- title,
- tagName: 'span',
- className: 'qubely-text-has-color',
- attributes: {
- style: 'style',
- data: 'data'
- },
- edit: class Color extends Component {
- constructor(props) {
- super(props)
- this.state = {
- showColorPicker: false
- }
- }
- findCurrentActiveColor = (value) => {
- let color
- let index = value.start
- if (value.formats[index]) {
- value.formats[index].forEach((format, index) => {
- if (format.type == 'qubely/inlinecolor') {
- color = format.attributes.data
- }
- })
- }
- return color
- }
+ name,
+ title,
+ tagName: "span",
+ className: "qubely-text-has-color",
+ attributes: {
+ style: "style",
+ data: "data",
+ },
+ edit: class Color extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showColorPicker: false,
+ };
+ }
+ findCurrentActiveColor = (value) => {
+ let color;
+ let index = value.start;
+ if (value.formats[index]) {
+ value.formats[index].forEach((format, index) => {
+ if (format.type == "qubely/inlinecolor") {
+ color = format.attributes.data;
+ }
+ });
+ }
+ return color;
+ };
- render() {
+ render() {
+ const { isActive, value, onChange } = this.props;
+ const { showColorPicker } = this.state;
+ let activeColor = this.findCurrentActiveColor(value);
+ let isSelected = value.end - value.start > 0 ? true : false;
+ const defColors = () => {
+ let val = qubely_admin.palette;
+ let { colors } = JSON.parse(localStorage.getItem("qubely-global-settings"));
+ if (typeof colors !== "undefined") {
+ val = colors;
+ }
+ return val;
+ };
+ return (
+
+
+
+ {icons.inlineColorIcon}
+
+
+ }
+ title={__("Qubely Color")}
+ onClick={() => {
+ !activeColor && this.setState({ showColorPicker: !showColorPicker });
+ if (activeColor == "#fff" || value.start === value.end) {
+ onChange(
+ toggleFormat(value, {
+ type: "qubely/inlinecolor",
+ })
+ );
+ }
+ }}
+ isActive={isActive}
+ />
- const { isActive, value, onChange } = this.props
- const { showColorPicker } = this.state
- let activeColor = this.findCurrentActiveColor(value);
- let isSelected = value.end - value.start > 0 ? true : false;
- const defColors = () => {
- let val = qubely_admin.palette;
- let { colors } = JSON.parse(localStorage.getItem('qubely-global-settings'));
- if (typeof colors !== 'undefined') {
- val = colors
- }
- return val;
- }
- return (
-
-
-
-
- {icons.inlineColorIcon}
-
-
- }
- title={__('Qubely Color')}
- onClick={() => {
- !activeColor && this.setState({ showColorPicker: !showColorPicker })
- if (activeColor == '#fff' || value.start === value.end) {
- onChange(toggleFormat(value, {
- type: 'qubely/inlinecolor',
- }))
- }
- }}
- isActive={isActive}
- />
-
- {
- showColorPicker &&
- this.setState({ showColorPicker: false })}
- noArrow={true}
- >
- {
- onChange(applyFormat(value, {
- type: 'qubely/inlinecolor',
- attributes: {
- style: `color: ${newColor.hex};`,
- data: newColor.hex
- },
- startIndex: value.start,
- endIndex: value.end
- }))
- }} />
-
- {
- defColors().map((color, index) => (
- {
- onChange(applyFormat(value, {
- type: 'qubely/inlinecolor',
- attributes: {
- style: `color: var(--qubely-color-${index + 1});`,
- data: `var(--qubely-color-${index + 1})`
- },
- startIndex: value.start,
- endIndex: value.end
- }))
- }}
- />))
- }
-
-
- }
-
- );
- }
- }
+ {showColorPicker && (
+ this.setState({ showColorPicker: false })} noArrow={true}>
+ {
+ onChange(
+ applyFormat(value, {
+ type: "qubely/inlinecolor",
+ attributes: {
+ style: `color: ${newColor.hex};`,
+ data: newColor.hex,
+ },
+ startIndex: value.start,
+ endIndex: value.end,
+ })
+ );
+ }}
+ />
+
+ {defColors().map((color, index) => (
+ {
+ onChange(
+ applyFormat(value, {
+ type: "qubely/inlinecolor",
+ attributes: {
+ style: `color: var(--qubely-color-${index + 1});`,
+ data: `var(--qubely-color-${index + 1})`,
+ },
+ startIndex: value.start,
+ endIndex: value.end,
+ })
+ );
+ }}
+ />
+ ))}
+
+
+ )}
+
+ );
+ }
+ },
};
-
-
-
-
-
diff --git a/assets/reactjs/src/components/format-library/custom-formats.js b/assets/reactjs/src/components/format-library/custom-formats.js
index ec23c64b..fedca9f3 100644
--- a/assets/reactjs/src/components/format-library/custom-formats.js
+++ b/assets/reactjs/src/components/format-library/custom-formats.js
@@ -1,16 +1,10 @@
/**
* Internal dependencies
*/
-import { color } from './color';
-import { tooltip } from './tooltip';
-import { fontsize } from './font-size';
-import { uppercase } from './upper-case';
-import { backgroundColor } from './background-color';
+import { color } from "./color";
+import { tooltip } from "./tooltip";
+import { fontsize } from "./font-size";
+import { uppercase } from "./upper-case";
+import { backgroundColor } from "./background-color";
-export default [
- color,
- tooltip,
- fontsize,
- uppercase,
- backgroundColor
-];
+export default [color, tooltip, fontsize, uppercase, backgroundColor];
diff --git a/assets/reactjs/src/components/format-library/font-size/index.js b/assets/reactjs/src/components/format-library/font-size/index.js
index 996ccba0..46c303cb 100644
--- a/assets/reactjs/src/components/format-library/font-size/index.js
+++ b/assets/reactjs/src/components/format-library/font-size/index.js
@@ -2,85 +2,69 @@
* WordPress dependencies
*/
const { __ } = wp.i18n;
-const {
- Component,
- Fragment,
-} = wp.element;
+const { Component, Fragment } = wp.element;
const { RichTextToolbarButton } = wp.blockEditor;
/**
* Internal dependencies
*/
-import InlineTooltipUI from './inline';
+import InlineTooltipUI from "./inline";
-const name = 'qubely/fontsize';
-const title = __('Qubely Font-size');
+const name = "qubely/fontsize";
+const title = __("Qubely Font-size");
export const fontsize = {
- name,
- title,
- tagName: 'span',
- className: 'qubely-custom-font',
- attributes: {
- data: 'data-fontsize',
- style: 'style',
- },
- edit: class FontSize extends Component {
- constructor(props) {
- super(props)
- this.state = {
- addingFontSize: false,
- tooltipText: '',
- }
- this.removeFontPicker = this.removeFontPicker.bind(this);
- }
- removeFontPicker() {
- this.setState({ addingFontSize: false });
- this.props.onFocus();
- }
- render() {
- const {
- value,
- isActive,
- onChange,
- activeAttributes
- } = this.props;
- const {
- addingFontSize,
- } = this.state;
+ name,
+ title,
+ tagName: "span",
+ className: "qubely-custom-font",
+ attributes: {
+ data: "data-fontsize",
+ style: "style",
+ },
+ edit: class FontSize extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ addingFontSize: false,
+ tooltipText: "",
+ };
+ this.removeFontPicker = this.removeFontPicker.bind(this);
+ }
+ removeFontPicker() {
+ this.setState({ addingFontSize: false });
+ this.props.onFocus();
+ }
+ render() {
+ const { value, isActive, onChange, activeAttributes } = this.props;
+ const { addingFontSize } = this.state;
- return (
-
- {
- this.setState({
- addingFontSize: true
- });
- }}
- isActive={isActive}
- isDisabled={isActive ? false : value.start === value.end}
- />
+ return (
+
+ {
+ this.setState({
+ addingFontSize: true,
+ });
+ }}
+ isActive={isActive}
+ isDisabled={isActive ? false : value.start === value.end}
+ />
- {
- (addingFontSize || isActive) &&
-
- );
- }
- }
+ {(addingFontSize || isActive) && (
+
+ );
+ }
+ },
};
-
-
-
-
-
diff --git a/assets/reactjs/src/components/format-library/font-size/inline.js b/assets/reactjs/src/components/format-library/font-size/inline.js
index b0f50752..023312a3 100644
--- a/assets/reactjs/src/components/format-library/font-size/inline.js
+++ b/assets/reactjs/src/components/format-library/font-size/inline.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import uniqueId from 'lodash/uniqueId';
+import uniqueId from "lodash/uniqueId";
/**
* WordPress dependencies
@@ -9,175 +9,158 @@ import uniqueId from 'lodash/uniqueId';
const { __ } = wp.i18n;
-const {
- Range,
-} = wp.qubelyComponents;
-
-const {
- useState,
- useEffect,
- useMemo,
-} = wp.element;
-const {
- Popover,
-} = wp.components;
-
-const {
- removeFormat,
- applyFormat,
-} = wp.richText;
-
-const name = 'qubely/fontsize';
-
-function InlinePopover({
- isActive,
- addingFontSize,
- removeFontPicker,
- value,
- onChange,
- activeAttributes,
-}) {
-
- const [nextTooltip, setNextTooltip] = useState(activeAttributes.data);
- const [isEditing, enableEdit] = useState(typeof activeAttributes.data === 'undefined' ? true : false);
-
- useEffect(() => {
- setNextTooltip(activeAttributes.data);
- if (activeAttributes.data) {
- // enableEdit(false);
- }
- }, [activeAttributes]);
-
- const mountingKey = useMemo(uniqueId, [addingFontSize]);
-
- const anchorRef = useMemo(() => {
- const selection = window.getSelection();
-
- if (!selection.rangeCount) {
- return;
- }
-
- const range = selection.getRangeAt(0);
- if (addingFontSize && !isActive) {
- return range;
- }
-
- let element = range.startContainer;
-
- // If the caret is right before the element, select the next element.
- element = element.nextElementSibling || element;
-
- while (element.nodeType !== window.Node.ELEMENT_NODE) {
- element = element.parentNode;
- }
-
- return element.closest('span');
- }, [addingFontSize, value.start, value.end]);
-
- const applyFontSize = (apply) => {
- let activeFormat;
- value.activeFormats.some(format => {
- if (format.type === name) {
- activeFormat = {
- startIndex: format.startIndex,
- endIndex: format.endIndex,
- }
- return true;
- }
- return false;
- });
-
- let startIndex = value.start,
- endIndex = value.end;
- if (typeof activeFormat !== 'undefined') {
- startIndex = activeFormat.startIndex;
- endIndex = activeFormat.endIndex;
- }
-
- onChange(applyFormat(value, {
- type: name,
- attributes: {
- data: nextTooltip,
- style: `font-size: ${nextTooltip}px;`,
- },
- startIndex,
- endIndex,
- }));
-
- if (apply) {
- enableEdit(false);
- }
- removeFontPicker();
- }
-
- return (
-
-
-
-
-
{
- // setNextTooltip(newValue);
- onChange(applyFormat(value, {
- type: name,
- attributes: {
- data: newValue,
- style: `font-size: ${newValue}px;`,
- },
- startIndex: undefined,
- endIndex: undefined,
- }));
- }}
- />
-
-
- {
- !isEditing ?
- enableEdit(true)}
- type="button"
- className="components-button block-editor-link-control__search-item-action is-secondary qubely-edit"
- >
- Edit
-
- :
- applyFontSize(true)}
- type="button"
- className="components-button block-editor-link-control__search-item-action is-secondary qubely-edit"
- >
- Apply
-
- }
-
- {
- onChange(removeFormat(value, name));
- enableEdit(false);
- }}
- type="button"
- className="components-button qubely-remove"
- >
- Remove
-
-
-
-
- )
+const { Range } = wp.qubelyComponents;
+
+const { useState, useEffect, useMemo } = wp.element;
+const { Popover } = wp.components;
+
+const { removeFormat, applyFormat } = wp.richText;
+
+const name = "qubely/fontsize";
+
+function InlinePopover({ isActive, addingFontSize, removeFontPicker, value, onChange, activeAttributes }) {
+ const [nextTooltip, setNextTooltip] = useState(activeAttributes.data);
+ const [isEditing, enableEdit] = useState(typeof activeAttributes.data === "undefined" ? true : false);
+
+ useEffect(() => {
+ setNextTooltip(activeAttributes.data);
+ if (activeAttributes.data) {
+ // enableEdit(false);
+ }
+ }, [activeAttributes]);
+
+ const mountingKey = useMemo(uniqueId, [addingFontSize]);
+
+ const anchorRef = useMemo(() => {
+ const selection = window.getSelection();
+
+ if (!selection.rangeCount) {
+ return;
+ }
+
+ const range = selection.getRangeAt(0);
+ if (addingFontSize && !isActive) {
+ return range;
+ }
+
+ let element = range.startContainer;
+
+ // If the caret is right before the element, select the next element.
+ element = element.nextElementSibling || element;
+
+ while (element.nodeType !== window.Node.ELEMENT_NODE) {
+ element = element.parentNode;
+ }
+
+ return element.closest("span");
+ }, [addingFontSize, value.start, value.end]);
+
+ const applyFontSize = (apply) => {
+ let activeFormat;
+ value.activeFormats.some((format) => {
+ if (format.type === name) {
+ activeFormat = {
+ startIndex: format.startIndex,
+ endIndex: format.endIndex,
+ };
+ return true;
+ }
+ return false;
+ });
+
+ let startIndex = value.start,
+ endIndex = value.end;
+ if (typeof activeFormat !== "undefined") {
+ startIndex = activeFormat.startIndex;
+ endIndex = activeFormat.endIndex;
+ }
+
+ onChange(
+ applyFormat(value, {
+ type: name,
+ attributes: {
+ data: nextTooltip,
+ style: `font-size: ${nextTooltip}px;`,
+ },
+ startIndex,
+ endIndex,
+ })
+ );
+
+ if (apply) {
+ enableEdit(false);
+ }
+ removeFontPicker();
+ };
+
+ return (
+
+
+
+
{
+ // setNextTooltip(newValue);
+ onChange(
+ applyFormat(value, {
+ type: name,
+ attributes: {
+ data: newValue,
+ style: `font-size: ${newValue}px;`,
+ },
+ startIndex: undefined,
+ endIndex: undefined,
+ })
+ );
+ }}
+ />
+
+
+ {!isEditing ? (
+ enableEdit(true)}
+ type="button"
+ className="components-button block-editor-link-control__search-item-action is-secondary qubely-edit"
+ >
+ Edit
+
+ ) : (
+ applyFontSize(true)}
+ type="button"
+ className="components-button block-editor-link-control__search-item-action is-secondary qubely-edit"
+ >
+ Apply
+
+ )}
+
+ {
+ onChange(removeFormat(value, name));
+ enableEdit(false);
+ }}
+ type="button"
+ className="components-button qubely-remove"
+ >
+ Remove
+
+
+
+
+ );
}
-export default InlinePopover;
\ No newline at end of file
+export default InlinePopover;
diff --git a/assets/reactjs/src/components/format-library/index.js b/assets/reactjs/src/components/format-library/index.js
index ebc18052..e5e464b3 100644
--- a/assets/reactjs/src/components/format-library/index.js
+++ b/assets/reactjs/src/components/format-library/index.js
@@ -6,8 +6,6 @@ const { registerFormatType } = wp.richText;
/**
* Internal dependencies
*/
-import formats from './custom-formats';
+import formats from "./custom-formats";
-formats.forEach( ( { name, ...settings } ) =>
- registerFormatType( name, settings )
-);
+formats.forEach(({ name, ...settings }) => registerFormatType(name, settings));
diff --git a/assets/reactjs/src/components/format-library/tooltip/index.js b/assets/reactjs/src/components/format-library/tooltip/index.js
index 76cf8fe8..48275099 100644
--- a/assets/reactjs/src/components/format-library/tooltip/index.js
+++ b/assets/reactjs/src/components/format-library/tooltip/index.js
@@ -2,93 +2,69 @@
* WordPress dependencies
*/
const { __ } = wp.i18n;
-const {
- Component,
- Fragment,
-} = wp.element;
-const {
- toggleFormat,
- removeFormat,
- applyFormat,
-} = wp.richText;
-const {
- Popover,
- Tooltip
-} = wp.components;
+const { Component, Fragment } = wp.element;
+const { toggleFormat, removeFormat, applyFormat } = wp.richText;
+const { Popover, Tooltip } = wp.components;
const { RichTextToolbarButton } = wp.blockEditor;
/**
* Internal dependencies
*/
-import InlineTooltipUI from './inline';
+import InlineTooltipUI from "./inline";
-const name = 'qubely/tooltip';
-const title = __('Qubely Tooltip');
+const name = "qubely/tooltip";
+const title = __("Qubely Tooltip");
export const tooltip = {
- name,
- title,
- tagName: 'span',
- className: 'qubely-tooltip',
- attributes: {
- data: 'data-tooltip',
- ariaLabel: 'aria-label',
- },
- edit: class Tooltip extends Component {
- constructor(props) {
- super(props)
- this.state = {
- addingTooltip: false,
- tooltipText: '',
- }
- this.stopAddingTooltip = this.stopAddingTooltip.bind(this);
- }
- stopAddingTooltip() {
- this.setState({ addingTooltip: false });
- this.props.onFocus();
- }
- render() {
- const {
- value,
- isActive,
- onChange,
- activeAttributes
- } = this.props;
- const {
- addingTooltip,
- tooltipText,
- } = this.state;
+ name,
+ title,
+ tagName: "span",
+ className: "qubely-tooltip",
+ attributes: {
+ data: "data-tooltip",
+ ariaLabel: "aria-label",
+ },
+ edit: class Tooltip extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ addingTooltip: false,
+ tooltipText: "",
+ };
+ this.stopAddingTooltip = this.stopAddingTooltip.bind(this);
+ }
+ stopAddingTooltip() {
+ this.setState({ addingTooltip: false });
+ this.props.onFocus();
+ }
+ render() {
+ const { value, isActive, onChange, activeAttributes } = this.props;
+ const { addingTooltip, tooltipText } = this.state;
- return (
-
- {
- this.setState({
- addingTooltip: true
- });
- }}
- isActive={isActive}
- />
+ return (
+
+ {
+ this.setState({
+ addingTooltip: true,
+ });
+ }}
+ isActive={isActive}
+ />
- {
- (addingTooltip || isActive) &&
-
- );
- }
- }
+ {(addingTooltip || isActive) && (
+
+ );
+ }
+ },
};
-
-
-
-
-
diff --git a/assets/reactjs/src/components/format-library/tooltip/inline.js b/assets/reactjs/src/components/format-library/tooltip/inline.js
index 186d0b31..ae6bb430 100644
--- a/assets/reactjs/src/components/format-library/tooltip/inline.js
+++ b/assets/reactjs/src/components/format-library/tooltip/inline.js
@@ -1,172 +1,153 @@
/**
* External dependencies
*/
-import uniqueId from 'lodash/uniqueId';
+import uniqueId from "lodash/uniqueId";
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
-const {
- useState,
- useEffect,
- useMemo,
- Fragment
-} = wp.element;
-const {
- Popover,
- Tooltip
-} = wp.components;
-
-const {
- removeFormat,
- applyFormat,
-} = wp.richText;
-const name = 'qubely/tooltip';
-
-function InlineTooltipUI({
- isActive,
- addingTooltip,
- stopAddingTooltip,
- value,
- onChange,
- activeAttributes,
-}) {
-
- const [nextTooltip, setNextTooltip] = useState(activeAttributes.data);
- const [isEditing, enableEdit] = useState(typeof activeAttributes.data === 'undefined' ? true : false);
- useEffect(() => {
- setNextTooltip(activeAttributes.data);
- if (activeAttributes.data) {
- enableEdit(false);
- }
- }, [activeAttributes]);
- const mountingKey = useMemo(uniqueId, [addingTooltip]);
-
- const anchorRef = useMemo(() => {
- const selection = window.getSelection();
-
- if (!selection.rangeCount) {
- return;
- }
-
- const range = selection.getRangeAt(0);
- if (addingTooltip && !isActive) {
- return range;
- }
-
- let element = range.startContainer;
-
- // If the caret is right before the element, select the next element.
- element = element.nextElementSibling || element;
-
- while (element.nodeType !== window.Node.ELEMENT_NODE) {
- element = element.parentNode;
- }
-
- return element.closest('span');
- }, [addingTooltip, value.start, value.end]);
-
- const addTooltip = () => {
- let activeFormat;
- value.activeFormats.some(format => {
- if (format.type === name) {
- activeFormat = {
- tooltipText: format.attributes.data,
- startIndex: format.startIndex,
- endIndex: format.endIndex,
- }
- return true;
- }
- return false;
- });
-
- let startIndex = value.start,
- endIndex = value.end;
- if (typeof activeFormat !== 'undefined') {
- startIndex = activeFormat.startIndex;
- endIndex = activeFormat.endIndex;
- }
- if (nextTooltip.length > 0) {
- onChange(applyFormat(value, {
- type: name,
- attributes: {
- data: nextTooltip,
- ariaLabel: nextTooltip,
- },
- startIndex,
- endIndex,
- }));
- } else {
- onChange(removeFormat(value, name));
- }
- stopAddingTooltip();
- }
-
- return (
-
-
- {
- isEditing ?
-
-
- addTooltip()}
- className="qubely-custom-submit block-editor-link-control__search-actions"
- >
-
-
-
- :
-
-
{nextTooltip}
-
- enableEdit(true)}
- type="button"
- className="components-button block-editor-link-control__search-item-action is-secondary qubely-edit"
- >
- Edit
-
- {
- onChange(removeFormat(value, name));
- enableEdit(false);
- }}
- type="button"
- className="components-button qubely-remove"
- >
- Delete
-
-
-
- }
-
-
- )
+const { useState, useEffect, useMemo, Fragment } = wp.element;
+const { Popover, Tooltip } = wp.components;
+
+const { removeFormat, applyFormat } = wp.richText;
+const name = "qubely/tooltip";
+
+function InlineTooltipUI({ isActive, addingTooltip, stopAddingTooltip, value, onChange, activeAttributes }) {
+ const [nextTooltip, setNextTooltip] = useState(activeAttributes.data);
+ const [isEditing, enableEdit] = useState(typeof activeAttributes.data === "undefined" ? true : false);
+ useEffect(() => {
+ setNextTooltip(activeAttributes.data);
+ if (activeAttributes.data) {
+ enableEdit(false);
+ }
+ }, [activeAttributes]);
+ const mountingKey = useMemo(uniqueId, [addingTooltip]);
+
+ const anchorRef = useMemo(() => {
+ const selection = window.getSelection();
+
+ if (!selection.rangeCount) {
+ return;
+ }
+
+ const range = selection.getRangeAt(0);
+ if (addingTooltip && !isActive) {
+ return range;
+ }
+
+ let element = range.startContainer;
+
+ // If the caret is right before the element, select the next element.
+ element = element.nextElementSibling || element;
+
+ while (element.nodeType !== window.Node.ELEMENT_NODE) {
+ element = element.parentNode;
+ }
+
+ return element.closest("span");
+ }, [addingTooltip, value.start, value.end]);
+
+ const addTooltip = () => {
+ let activeFormat;
+ value.activeFormats.some((format) => {
+ if (format.type === name) {
+ activeFormat = {
+ tooltipText: format.attributes.data,
+ startIndex: format.startIndex,
+ endIndex: format.endIndex,
+ };
+ return true;
+ }
+ return false;
+ });
+
+ let startIndex = value.start,
+ endIndex = value.end;
+ if (typeof activeFormat !== "undefined") {
+ startIndex = activeFormat.startIndex;
+ endIndex = activeFormat.endIndex;
+ }
+ if (nextTooltip.length > 0) {
+ onChange(
+ applyFormat(value, {
+ type: name,
+ attributes: {
+ data: nextTooltip,
+ ariaLabel: nextTooltip,
+ },
+ startIndex,
+ endIndex,
+ })
+ );
+ } else {
+ onChange(removeFormat(value, name));
+ }
+ stopAddingTooltip();
+ };
+
+ return (
+
+
+ {isEditing ? (
+
+
+ addTooltip()}
+ className="qubely-custom-submit block-editor-link-control__search-actions"
+ >
+
+
+
+ ) : (
+
+
{nextTooltip}
+
+ enableEdit(true)}
+ type="button"
+ className="components-button block-editor-link-control__search-item-action is-secondary qubely-edit"
+ >
+ Edit
+
+ {
+ onChange(removeFormat(value, name));
+ enableEdit(false);
+ }}
+ type="button"
+ className="components-button qubely-remove"
+ >
+ Delete
+
+
+
+ )}
+
+ );
}
-export default InlineTooltipUI;
\ No newline at end of file
+export default InlineTooltipUI;
diff --git a/assets/reactjs/src/components/format-library/upper-case/index.js b/assets/reactjs/src/components/format-library/upper-case/index.js
index 2150aa52..2af7592f 100644
--- a/assets/reactjs/src/components/format-library/upper-case/index.js
+++ b/assets/reactjs/src/components/format-library/upper-case/index.js
@@ -1,60 +1,53 @@
/**
* WordPress dependencies
*/
- const { __ } = wp.i18n;
- const {
- Fragment,
- } = wp.element;
- const {
- toggleFormat
- } = wp.richText;
-
- const { RichTextToolbarButton } = wp.blockEditor;
-
- /**
- * Internal dependencies
- */
- import icons from '../../../helpers/icons';
- import '../../css/editorinline.scss';
-
- const name = 'qubely/uppercase';
- const title = __('Qubely Uppercase');
-
- export const uppercase = {
- name,
- title,
- tagName: 'span',
- className: 'qubely-text-uppercase',
- attributes: {
- style: 'style'
- },
- edit(props) {
- const {
- isActive,
- value,
- onChange,
- } = props;
-
- const onToggle = () => onChange(toggleFormat(value, {
- type: name,
- attributes: {
- style: 'text-transform: uppercase;',
- }
- }));
- let isSelected = value.end - value.start > 0 ? true : false
- return (
-
- {
- (isSelected || isActive) &&
-
- );
-
- }
- };
\ No newline at end of file
+const { __ } = wp.i18n;
+const { Fragment } = wp.element;
+const { toggleFormat } = wp.richText;
+
+const { RichTextToolbarButton } = wp.blockEditor;
+
+/**
+ * Internal dependencies
+ */
+import icons from "../../../helpers/icons";
+import "../../css/editorinline.scss";
+
+const name = "qubely/uppercase";
+const title = __("Qubely Uppercase");
+
+export const uppercase = {
+ name,
+ title,
+ tagName: "span",
+ className: "qubely-text-uppercase",
+ attributes: {
+ style: "style",
+ },
+ edit(props) {
+ const { isActive, value, onChange } = props;
+
+ const onToggle = () =>
+ onChange(
+ toggleFormat(value, {
+ type: name,
+ attributes: {
+ style: "text-transform: uppercase;",
+ },
+ })
+ );
+ let isSelected = value.end - value.start > 0 ? true : false;
+ return (
+
+ {(isSelected || isActive) && (
+
+ );
+ },
+};
diff --git a/assets/reactjs/src/components/others/import-button/index.js b/assets/reactjs/src/components/others/import-button/index.js
index 27cd768d..23259c1d 100644
--- a/assets/reactjs/src/components/others/import-button/index.js
+++ b/assets/reactjs/src/components/others/import-button/index.js
@@ -1,17 +1,20 @@
-
-import { ModalManager } from '../../../helpers/ModalManager';
-import PageListModal from '../../../helpers/PageListModal';
+import { ModalManager } from "../../../helpers/ModalManager";
+import PageListModal from "../../../helpers/PageListModal";
const { __ } = wp.i18n;
const ImportButton = () => {
- return (
-
-
ModalManager.open(
-
+
ModalManager.open(
+
- {pages.map(({ isCurrent, key, text, className, onClick, isDots, isLink }) => (
-
onClick()}
- className={className}
- isDots={isDots}
- isLink={isLink}
- >
- {text}
-
- ))}
-
+ {pages.map(({ isCurrent, key, text, className, onClick, isDots, isLink }) => (
+
onClick()}
+ className={className}
+ isDots={isDots}
+ isLink={isLink}
+ >
+ {text}
+
+ ))}
+
onClick()}>
- {
- pageKey === 'prev' &&
-
- );
- }
+ const classes = classnames(className, { current: isCurrent }, { dots: isDots });
+ return (
+ onClick()}>
+ {pageKey === "prev" &&
+ );
+ }
}
Page.defaultProps = {
- isCurrent: false,
- isDots: false,
- className: ''
-}
+ isCurrent: false,
+ isDots: false,
+ className: "",
+};
Page.propTypes = {
- isCurrent: PropTypes.bool,
- className: PropTypes.string,
- key: PropTypes.string,
- isDots: PropTypes.bool,
- onClick: PropTypes.func
+ isCurrent: PropTypes.bool,
+ className: PropTypes.string,
+ key: PropTypes.string,
+ isDots: PropTypes.bool,
+ onClick: PropTypes.func,
};
-export default Page;
\ No newline at end of file
+export default Page;
diff --git a/assets/reactjs/src/editor.scss b/assets/reactjs/src/editor.scss
index 3f4be37a..c45bc371 100644
--- a/assets/reactjs/src/editor.scss
+++ b/assets/reactjs/src/editor.scss
@@ -1,696 +1,683 @@
.qubely-row {
- position: relative;
+ position: relative;
}
.qubely-column-layout {
- display: flex;
- flex-wrap: nowrap;
+ display: flex;
+ flex-wrap: nowrap;
}
.qubely-column-1 {
- flex: 1;
+ flex: 1;
}
.qubely-column-2 {
- flex: 2;
+ flex: 2;
}
.qubely-column-3 {
- flex: 3;
+ flex: 3;
}
.qubely-column-4 {
- flex: 4;
+ flex: 4;
}
.wp-block-qubely-row {
- display: block;
+ display: block;
}
.wp-block-qubely-row {
- flex-wrap: wrap;
+ flex-wrap: wrap;
}
-.wp-block-qubely-row
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout {
- flex-wrap: wrap;
- display: flex;
+.wp-block-qubely-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
+ flex-wrap: wrap;
+ display: flex;
}
.wp-block-qubely-row .block-editor-block-list__layout {
- margin-left: 0;
- margin-right: 0;
+ margin-left: 0;
+ margin-right: 0;
}
.qubely-row > .block-editor-inner-blocks > .block-editor-block-list__layout {
- display: flex;
- flex-wrap: wrap;
+ display: flex;
+ flex-wrap: wrap;
}
-.wp-block-qubely-row
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout
- > [data-type="qubely/column"] {
- display: flex;
- flex-direction: column;
- padding-left: 0;
- padding-right: 0;
- word-break: break-word;
- overflow-wrap: break-word;
- width: 100%;
+.wp-block-qubely-row > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="qubely/column"] {
+ display: flex;
+ flex-direction: column;
+ padding-left: 0;
+ padding-right: 0;
+ word-break: break-word;
+ overflow-wrap: break-word;
+ width: 100%;
}
-.wp-block-qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block {
- max-width: none;
+.wp-block-qubely-row .block-editor-block-list__layout .editor-block-list__block {
+ max-width: none;
}
.wp-block-qubely-row [data-type="qubely/column"] {
- pointer-events: none;
+ pointer-events: none;
}
.wp-block-qubely-row
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout
- > [data-type="qubely/column"]
- > .editor-block-list__block-edit {
- margin-top: 0;
- margin-bottom: 0;
- margin-left: 0;
- margin-right: 0;
+ > .block-editor-inner-blocks
+ > .block-editor-block-list__layout
+ > [data-type="qubely/column"]
+ > .editor-block-list__block-edit {
+ margin-top: 0;
+ margin-bottom: 0;
+ margin-left: 0;
+ margin-right: 0;
}
:not(.components-disabled)
- > .wp-block-qubely-row
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout
- > [data-type="qubely/column"]
- > .editor-block-list__block-edit
- > * {
- pointer-events: all;
+ > .wp-block-qubely-row
+ > .block-editor-inner-blocks
+ > .block-editor-block-list__layout
+ > [data-type="qubely/column"]
+ > .editor-block-list__block-edit
+ > * {
+ pointer-events: all;
}
.wp-block-qubely-row
- > .block-editor-inner-blocks
- > .block-editor-block-list__layout
- > [data-type="qubely/column"]
- > .editor-block-list__block-edit
- > div
- > .block-editor-inner-blocks {
- margin-top: -28px;
- margin-bottom: -28px;
+ > .block-editor-inner-blocks
+ > .block-editor-block-list__layout
+ > [data-type="qubely/column"]
+ > .editor-block-list__block-edit
+ > div
+ > .block-editor-inner-blocks {
+ margin-top: -28px;
+ margin-bottom: -28px;
}
.wp-block-qubely-row .block-editor-block-list__layout {
- margin-left: 0;
- margin-right: 0;
+ margin-left: 0;
+ margin-right: 0;
}
-.wp-block-qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block {
- max-width: none;
+.wp-block-qubely-row .block-editor-block-list__layout .editor-block-list__block {
+ max-width: none;
}
div[data-type="qubely/row"].is-selected
- div[data-type="qubely/column"]:last-child
- > div
- > div
- > .components-resizable-box__container.qubely-column-resizer
- > span
- > .components-resizable-box__handle,
+ div[data-type="qubely/column"]:last-child
+ > div
+ > div
+ > .components-resizable-box__container.qubely-column-resizer
+ > span
+ > .components-resizable-box__handle,
div[data-type="qubely/row"].is-selected
- div[data-type="qubely/column"]:last-child
- > div
- > div
- > .components-resizable-box__container.qubely-column-resizer::after,
+ div[data-type="qubely/column"]:last-child
+ > div
+ > div
+ > .components-resizable-box__container.qubely-column-resizer::after,
div[data-type="qubely/row"].is-resizing
- div[data-type="qubely/column"]:last-child
- > div
- > div
- > .components-resizable-box__container.qubely-column-resizer
- > span
- > .components-resizable-box__handle,
+ div[data-type="qubely/column"]:last-child
+ > div
+ > div
+ > .components-resizable-box__container.qubely-column-resizer
+ > span
+ > .components-resizable-box__handle,
div[data-type="qubely/row"].is-resizing
- div[data-type="qubely/column"]:last-child
- > div
- > div
- > .components-resizable-box__container.qubely-column-resizer::after {
- display: none;
+ div[data-type="qubely/column"]:last-child
+ > div
+ > div
+ > .components-resizable-box__container.qubely-column-resizer::after {
+ display: none;
}
.wp-block-qubely-row
- [data-type="qubely/column"]
- .components-resizable-box__container:hover
- .components-resizable-box__handle {
- display: block;
- z-index: 9;
+ [data-type="qubely/column"]
+ .components-resizable-box__container:hover
+ .components-resizable-box__handle {
+ display: block;
+ z-index: 9;
}
.components-resizable-box__container.qubely-column-resizer.is-selected-column
- > span
- > .components-resizable-box__handle,
+ > span
+ > .components-resizable-box__handle,
div[data-type="qubely/row"].is-selected
- .components-resizable-box__container.qubely-column-resizer
- > span
- > .components-resizable-box__handle,
+ .components-resizable-box__container.qubely-column-resizer
+ > span
+ > .components-resizable-box__handle,
div[data-type="qubely/row"].is-resizing
- .components-resizable-box__container.qubely-column-resizer
- > span
- > .components-resizable-box__handle {
- right: -15px;
- top: 0;
- background: transparent;
- z-index: 9999;
- width: auto;
- height: 100%;
- display: flex;
- align-items: center;
- transform: translateX(50%);
- background: transparent;
- &::before {
- // width: 6px;
- // height: 34px;
- // border: 0;
- // border-radius: 1.5px;
- background: #e3e4e7;
- border: none;
- opacity: 1;
- border-radius: 30px;
- width: 3.5px;
- right: calc(50% - 2px);
- }
-}
-
-.components-resizable-box__container.qubely-column-resizer
- > span
- > .components-resizable-box__handle {
- width: 8px;
+ .components-resizable-box__container.qubely-column-resizer
+ > span
+ > .components-resizable-box__handle {
+ right: -15px;
+ top: 0;
+ background: transparent;
+ z-index: 9999;
+ width: auto;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ transform: translateX(50%);
+ background: transparent;
+ &::before {
+ // width: 6px;
+ // height: 34px;
+ // border: 0;
+ // border-radius: 1.5px;
+ background: #e3e4e7;
+ border: none;
+ opacity: 1;
+ border-radius: 30px;
+ width: 3.5px;
+ right: calc(50% - 2px);
+ }
+}
+
+.components-resizable-box__container.qubely-column-resizer > span > .components-resizable-box__handle {
+ width: 8px;
}
.qubely-flex-box {
- display: flex;
+ display: flex;
}
.qubely-flex-column {
- flex-direction: column;
+ flex-direction: column;
}
.qubely-flex-1 {
- flex: 1;
+ flex: 1;
}
.qubely-flex-2 {
- flex: 2;
+ flex: 2;
}
.qubely-flex-3 {
- flex: 3;
+ flex: 3;
}
.qubely-flex-4 {
- flex: 4;
+ flex: 4;
}
.item-center {
- align-items: center;
+ align-items: center;
}
.item-left {
- align-items: flex-start;
+ align-items: flex-start;
}
.item-right {
- align-items: flex-end;
+ align-items: flex-end;
}
.justify-center {
- justify-content: center;
+ justify-content: center;
}
.justify-left {
- justify-content: flex-start;
+ justify-content: flex-start;
}
.justify-right {
- justify-content: flex-end;
+ justify-content: flex-end;
}
.qubely-palette-fields .qubely-palette-unit {
- padding-bottom: 12px;
- padding-left: 3px;
+ padding-bottom: 12px;
+ padding-left: 3px;
}
-[data-type="qubely/columns"]
- .block-editor-block-list__layout
- .editor-block-list__block
- .editor-block-list__block-edit {
- margin-top: 14px;
- margin-bottom: 14px;
+[data-type="qubely/columns"] .block-editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit {
+ margin-top: 14px;
+ margin-bottom: 14px;
}
#wpwrap
- [data-type="qubely/columns"]
- .block-editor-block-list__layout
- .editor-block-list__block
- .editor-block-list__block-edit
- p:last-child {
- margin-bottom: 0;
-}
-
-#wpwrap
- [data-type="qubely/columns"]
- .is-selected
- .qubely-column[data-gwidth]::before {
- content: attr(data-gwidth);
- position: absolute;
- font-size: 10px;
- top: -1px;
- right: -1px;
- background: #2178c3;
- padding: 0 8px;
- border-radius: unset;
- color: #fff;
+ [data-type="qubely/columns"]
+ .block-editor-block-list__layout
+ .editor-block-list__block
+ .editor-block-list__block-edit
+ p:last-child {
+ margin-bottom: 0;
+}
+
+#wpwrap [data-type="qubely/columns"] .is-selected .qubely-column[data-gwidth]::before {
+ content: attr(data-gwidth);
+ position: absolute;
+ font-size: 10px;
+ top: -1px;
+ right: -1px;
+ background: #2178c3;
+ padding: 0 8px;
+ border-radius: unset;
+ color: #fff;
}
.qubely-field-group {
- position: relative;
- display: flex;
- &:not(:last-child) {
- margin-bottom: 20px;
- }
- &.qubely-65-35 {
- .qubely-field:first-child {
- max-width: calc(65% - 15px);
- }
- .qubely-field:last-child {
- max-width: 35%;
- }
- }
- .qubely-field {
- flex-grow: 1;
- label {
- font-size: 13px;
- color: #87888a;
- display: block;
- }
- }
- &.qubely-wide {
- display: block;
- .qubely-field {
- width: 100%;
- &:not(:last-child) {
- margin-bottom: 15px;
- }
- }
- }
- &:not(.qubely-wide) .qubely-field:not(:last-child) {
- margin-right: 15px;
- margin-bottom: 0;
- }
+ position: relative;
+ display: flex;
+ &:not(:last-child) {
+ margin-bottom: 20px;
+ }
+ &.qubely-65-35 {
+ .qubely-field:first-child {
+ max-width: calc(65% - 15px);
+ }
+ .qubely-field:last-child {
+ max-width: 35%;
+ }
+ }
+ .qubely-field {
+ flex-grow: 1;
+ label {
+ font-size: 13px;
+ color: #87888a;
+ display: block;
+ }
+ }
+ &.qubely-wide {
+ display: block;
+ .qubely-field {
+ width: 100%;
+ &:not(:last-child) {
+ margin-bottom: 15px;
+ }
+ }
+ }
+ &:not(.qubely-wide) .qubely-field:not(:last-child) {
+ margin-right: 15px;
+ margin-bottom: 0;
+ }
+}
+
+.qubely-field.qubely-field-boxshadow {
+ border: none;
+ border-radius: 0;
+ background-color: transparent;
+ padding: 2px;
+ input {
+ min-width: 40px;
+ }
}
.qubely-field {
- position: relative;
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- .qubely-field-child {
- button:focus {
- outline: 1px dotted rgba(0, 0, 0, 0.2);
- }
- }
- input[type="text"],
- input[type="number"]:not(.components-range-control__number) {
- width: 100%;
- padding: 0 2px 0 0 !important;
- height: 26px;
- border: 1px solid #8d96a0;
- margin: 0;
- text-indent: 6px;
- }
- > label {
- width: 100%;
- display: block;
- line-height: 18px;
- margin-bottom: 10px;
- &::after {
- content: "";
- display: block;
- clear: both;
- }
- .qubely-device {
- margin-left: 5px;
- display: inline-block;
- > span {
- padding: 0 2.5px;
- }
- }
- }
+ position: relative;
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ .qubely-field-child {
+ button:focus {
+ outline: 1px dotted rgba(0, 0, 0, 0.2);
+ }
+ }
+ input[type="text"],
+ input[type="number"]:not(.components-range-control__number) {
+ width: 100%;
+ padding: 0 2px 0 0 !important;
+ height: 26px;
+ border: 1px solid #8d96a0;
+ margin: 0;
+ text-indent: 6px;
+ }
+ > label {
+ width: 100%;
+ display: block;
+ line-height: 18px;
+ margin-bottom: 10px;
+ &::after {
+ content: "";
+ display: block;
+ clear: both;
+ }
+ .qubely-device {
+ margin-left: 5px;
+ display: inline-block;
+ > span {
+ padding: 0 2.5px;
+ }
+ }
+ }
}
.qubely-field-group .qubely-device {
- position: absolute;
- top: 0;
- left: 15px;
- transform: translateY(-50%);
- background: #fff;
- border: 1px solid #e2e4e7;
- padding: 0px 2px;
- font-size: 0;
- overflow: hidden;
- > button {
- border: none;
- padding: 4px 2.5px;
- }
+ position: absolute;
+ top: 0;
+ left: 15px;
+ transform: translateY(-50%);
+ background: #fff;
+ border: 1px solid #e2e4e7;
+ padding: 0px 2px;
+ font-size: 0;
+ overflow: hidden;
+ > button {
+ border: none;
+ padding: 4px 2.5px;
+ }
}
.qubely-device {
- > button {
- padding: 0px;
- cursor: pointer;
- font-weight: 900;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- font-style: normal;
- font-variant: normal;
- text-rendering: auto;
- font-family: "Font Awesome 5 Free";
- font-size: 9px;
- background: #e5e7ea;
- color: #4d515a;
- height: 18px;
- line-height: 19px;
- width: 18px;
- border-radius: 50%;
- border: none;
- &:not(:last-child) {
- margin-right: 4px;
- }
-
- &.qubely-device-desktop::before {
- content: "\f108";
- }
- &.qubely-device-tablet::before {
- content: "\f3fa";
- }
- &.qubely-device-mobile::before {
- content: "\f3cd";
- }
-
- &:focus {
- outline: 0;
- box-shadow: 0;
- }
-
- &.active {
- background: #d2e7ff;
- color: #2184f9;
- }
- }
+ > button {
+ padding: 0px;
+ cursor: pointer;
+ font-weight: 900;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ font-family: "Font Awesome 5 Free";
+ font-size: 9px;
+ background: #e5e7ea;
+ color: #4d515a;
+ height: 18px;
+ line-height: 19px;
+ width: 18px;
+ border-radius: 50%;
+ border: none;
+ &:not(:last-child) {
+ margin-right: 4px;
+ }
+
+ &.qubely-device-desktop::before {
+ content: "\f108";
+ }
+ &.qubely-device-tablet::before {
+ content: "\f3fa";
+ }
+ &.qubely-device-mobile::before {
+ content: "\f3cd";
+ }
+
+ &:focus {
+ outline: 0;
+ box-shadow: 0;
+ }
+
+ &.active {
+ background: #d2e7ff;
+ color: #2184f9;
+ }
+ }
}
.qubely-group-color-palatte {
- margin: 0;
- &:not(:last-child) {
- margin-bottom: 20px;
- }
- > button {
- position: relative;
- float: left !important;
- margin-right: 10px !important;
- height: 28px !important;
- width: 28px !important;
- font-size: 0px !important;
- border-radius: 50% !important;
- border: none;
- box-shadow: none !important;
- &::after {
- content: "\f05e";
- -webkit-font-smoothing: antialiased;
- display: inline-block;
- font-style: normal;
- font-variant: normal;
- text-rendering: auto;
- line-height: 1;
- font-family: "Font Awesome 5 Free";
- font-weight: 900;
- font-size: 28px;
- color: red;
- left: 50%;
- top: 50%;
- position: absolute;
- transform: translate(-50%, -50%);
- }
- }
- .components-color-palette__item-wrapper {
- margin-bottom: 0;
- margin-right: 10px;
- }
- &::after {
- content: "";
- display: block;
- clear: both;
- }
+ margin: 0;
+ &:not(:last-child) {
+ margin-bottom: 20px;
+ }
+ > button {
+ position: relative;
+ float: left !important;
+ margin-right: 10px !important;
+ height: 28px !important;
+ width: 28px !important;
+ font-size: 0px !important;
+ border-radius: 50% !important;
+ border: none;
+ box-shadow: none !important;
+ &::after {
+ content: "\f05e";
+ -webkit-font-smoothing: antialiased;
+ display: inline-block;
+ font-style: normal;
+ font-variant: normal;
+ text-rendering: auto;
+ line-height: 1;
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-size: 28px;
+ color: red;
+ left: 50%;
+ top: 50%;
+ position: absolute;
+ transform: translate(-50%, -50%);
+ }
+ }
+ .components-color-palette__item-wrapper {
+ margin-bottom: 0;
+ margin-right: 10px;
+ }
+ &::after {
+ content: "";
+ display: block;
+ clear: both;
+ }
}
.qubely-unit-btn-group {
- overflow: hidden;
- display: inline-block;
- font-size: 0;
- button {
- line-height: 1;
- display: inline-block;
- border: none;
- font-size: 10px;
- padding: 0;
- border-radius: 2px !important;
- color: #8d96a0;
- text-transform: uppercase;
- background: transparent;
- cursor: pointer;
- &:focus {
- outline: 0;
- box-shadow: none;
- }
- &.active {
- color: #2184f9;
- }
- &:not(:last-child) {
- margin-right: 5px;
- }
- }
+ overflow: hidden;
+ display: inline-block;
+ font-size: 0;
+ button {
+ line-height: 1;
+ display: inline-block;
+ border: none;
+ font-size: 10px;
+ padding: 0;
+ border-radius: 2px !important;
+ color: #8d96a0;
+ text-transform: uppercase;
+ background: transparent;
+ cursor: pointer;
+ &:focus {
+ outline: 0;
+ box-shadow: none;
+ }
+ &.active {
+ color: #2184f9;
+ }
+ &:not(:last-child) {
+ margin-right: 5px;
+ }
+ }
}
// General
.qubely-d-flex {
- display: flex;
+ display: flex;
}
.qubely-align-center {
- align-items: center;
+ align-items: center;
}
.qubely-align-justified {
- justify-content: space-evenly;
- > div {
- padding: 0 5px;
- display: inline-block !important;
- margin-bottom: 0 !important;
- label {
- display: block;
- margin-bottom: 8px !important;
- text-align: center;
- }
-
- &:first-child {
- padding-left: 0;
- }
- &:last-child {
- padding-right: 0;
- }
- }
+ justify-content: space-evenly;
+ > div {
+ padding: 0 5px;
+ display: inline-block !important;
+ margin-bottom: 0 !important;
+ label {
+ display: block;
+ margin-bottom: 8px !important;
+ text-align: center;
+ }
+
+ &:first-child {
+ padding-left: 0;
+ }
+ &:last-child {
+ padding-right: 0;
+ }
+ }
}
.qubely-ml-auto {
- margin-left: auto;
+ margin-left: auto;
}
.qubely-ml-10 {
- margin-left: 10px;
+ margin-left: 10px;
}
.qubely-ml-15 {
- margin-left: 15px;
+ margin-left: 15px;
}
.qubely-mr-auto {
- margin-right: auto;
+ margin-right: auto;
}
.qubely-mr-15 {
- margin-right: 15px;
+ margin-right: 15px;
}
.qubely-mb-15 {
- margin-bottom: 15px;
+ margin-bottom: 15px;
}
.qubely-mb-20 {
- margin-bottom: 20px;
+ margin-bottom: 20px;
}
.qubely-mb-10 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.qubely-mb-0 {
- margin-bottom: 0 !important;
+ margin-bottom: 0 !important;
}
.qubely-w-100 {
- width: 100%;
+ width: 100%;
}
.qubely-text-right {
- text-align: right;
+ text-align: right;
}
.qubely-d-block {
- display: block;
+ display: block;
}
// Button List
.qubely-button {
- background: #fff;
- border: 1px solid #e5e7ea;
- min-height: 26px;
- display: inline-flex;
- align-items: center;
- padding: 3px 8px;
- text-align: center;
- color: #8d96a0;
- transition: all 400ms;
- border-radius: 3px;
- cursor: pointer;
-
- &:focus {
- box-shadow: none;
- outline: 0;
- }
-
- &.active {
- background: #d2e7ff;
- color: #2184f9;
- border-color: #a9d0ff;
- + .qubely-button {
- border-left-color: #a9d0ff;
- }
- }
-
- &.qubely-button-rounded {
- border-radius: 3px !important;
- }
+ background: #fff;
+ border: 1px solid #e5e7ea;
+ min-height: 26px;
+ display: inline-flex;
+ align-items: center;
+ padding: 3px 8px;
+ text-align: center;
+ color: #8d96a0;
+ transition: all 400ms;
+ border-radius: 3px;
+ cursor: pointer;
+
+ &:focus {
+ box-shadow: none;
+ outline: 0;
+ }
+
+ &.active {
+ background: #d2e7ff;
+ color: #2184f9;
+ border-color: #a9d0ff;
+ + .qubely-button {
+ border-left-color: #a9d0ff;
+ }
+ }
+
+ &.qubely-button-rounded {
+ border-radius: 3px !important;
+ }
}
.qubely-field-button-list {
- display: inline-flex;
- vertical-align: middle;
- .qubely-button {
- position: relative;
- flex: 1 1 auto;
+ display: inline-flex;
+ vertical-align: middle;
+ .qubely-button {
+ position: relative;
+ flex: 1 1 auto;
- &:not(:last-child) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
+ &:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
- &:not(:first-child) {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
+ &:not(:first-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
- &:not(:first-child) {
- margin-left: -1px;
- }
- }
+ &:not(:first-child) {
+ margin-left: -1px;
+ }
+ }
}
.qubely-common-button {
- border: 1px solid #6c7781;
- text-align: center;
- flex-grow: 1;
- padding: 4px 6px;
- font-size: 12px;
- cursor: pointer;
- color: #555;
- border-color: #ccc;
- background: #f7f7f7;
- box-shadow: inset 0 -1px 0 #ccc;
- vertical-align: top;
- &:first-child {
- border-radius: 4px 0 0 4px;
- }
- &:last-child {
- border-radius: 0 4px 4px 0;
- }
- &:not(:last-child) {
- border-right: none;
- }
- &:hover {
- background: #fafafa;
- border-color: #999;
- box-shadow: inset 0 -1px 0 #999;
- color: #23282d;
- text-decoration: none;
- }
- &.active {
- background: #0085ba;
- border-color: #00648c;
- color: #ffffff;
- box-shadow: inset 0 -1px 0 #00648c;
- &:hover {
- background: #007eb1;
- border-color: #00435d;
- color: #fff;
- box-shadow: inset 0 -1px 0 #00435d;
- }
- }
+ border: 1px solid #6c7781;
+ text-align: center;
+ flex-grow: 1;
+ padding: 4px 6px;
+ font-size: 12px;
+ cursor: pointer;
+ color: #555;
+ border-color: #ccc;
+ background: #f7f7f7;
+ box-shadow: inset 0 -1px 0 #ccc;
+ vertical-align: top;
+ &:first-child {
+ border-radius: 4px 0 0 4px;
+ }
+ &:last-child {
+ border-radius: 0 4px 4px 0;
+ }
+ &:not(:last-child) {
+ border-right: none;
+ }
+ &:hover {
+ background: #fafafa;
+ border-color: #999;
+ box-shadow: inset 0 -1px 0 #999;
+ color: #23282d;
+ text-decoration: none;
+ }
+ &.active {
+ background: #0085ba;
+ border-color: #00648c;
+ color: #ffffff;
+ box-shadow: inset 0 -1px 0 #00648c;
+ &:hover {
+ background: #007eb1;
+ border-color: #00435d;
+ color: #fff;
+ box-shadow: inset 0 -1px 0 #00435d;
+ }
+ }
}
.qubely-button-group {
- display: flex;
- border-radius: 5px;
- width: 100%;
- margin: 0;
- .qubely-button {
- @extend .qubely-common-button;
- }
- &.qubely-popup-button-group button {
- padding: 5px 9px;
- }
+ display: flex;
+ border-radius: 5px;
+ width: 100%;
+ margin: 0;
+ .qubely-button {
+ @extend .qubely-common-button;
+ }
+ &.qubely-popup-button-group button {
+ padding: 5px 9px;
+ }
}
.qubely-background-tab-wrap .qubely-gradient {
- margin-bottom: 0;
+ margin-bottom: 0;
}
//// new
.components-resizable-box__container {
- .qubely-column {
- //width: 100%;
- max-width: 100%;
- }
+ .qubely-column {
+ //width: 100%;
+ max-width: 100%;
+ }
}
.block-editor-block-list__layout {
- .components-resizable-box__container {
- //width: 100% !important;
- max-width: 100% !important;
- }
+ .components-resizable-box__container {
+ //width: 100% !important;
+ max-width: 100% !important;
+ }
}
.components-resizable-box__container .block-editor-inner-blocks {
- .editor-block-list__block {
- padding-left: 0;
- padding-right: 0;
- .editor-block-list__block-edit {
- margin: 0;
- }
- }
+ .editor-block-list__block {
+ padding-left: 0;
+ padding-right: 0;
+ .editor-block-list__block-edit {
+ margin: 0;
+ }
+ }
}
-.qubely-row
- .qubely-column
- .block-editor-inner-blocks
- .block-editor-block-list__layout {
- margin-left: 0;
- margin-right: 0;
+.qubely-row .qubely-column .block-editor-inner-blocks .block-editor-block-list__layout {
+ margin-left: 0;
+ margin-right: 0;
}
.qubely-row .block-editor-block-list__layout .editor-block-list__block {
- padding-left: 0;
- padding-right: 0;
+ padding-left: 0;
+ padding-right: 0;
}
-.edit-post-visual-editor
- .qubely-row
- .editor-block-list__block
- .editor-block-list__block-edit {
- margin-left: 0;
- margin-right: 0;
+.edit-post-visual-editor .qubely-row .editor-block-list__block .editor-block-list__block-edit {
+ margin-left: 0;
+ margin-right: 0;
}
// .qubely-row .editor-block-list__block .editor-block-contextual-toolbar {
@@ -702,13 +689,13 @@ div[data-type="qubely/row"].is-resizing
// outline: 0;
//}
.qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block
- .editor-block-list__block-edit
- > .editor-block-contextual-toolbar
- + [data-block]
- .components-resizable-box__container {
- position: relative;
+ .block-editor-block-list__layout
+ .editor-block-list__block
+ .editor-block-list__block-edit
+ > .editor-block-contextual-toolbar
+ + [data-block]
+ .components-resizable-box__container {
+ position: relative;
}
// .block-editor-block-list__layout .editor-block-list__block .qubely-row .editor-block-list__block-edit::before {
// right: 1px;
@@ -719,60 +706,57 @@ div[data-type="qubely/row"].is-resizing
// left: -14px;
// }
.qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block.is_hovered[data-type="qubely/columns"]
- > .editor-block-list__block-edit::before {
- outline: 1px solid green;
+ .block-editor-block-list__layout
+ .editor-block-list__block.is_hovered[data-type="qubely/columns"]
+ > .editor-block-list__block-edit::before {
+ outline: 1px solid green;
}
.qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block
- .editor-block-list__block-edit
- > .editor-block-contextual-toolbar
- + [data-block]
- .components-resizable-box__container {
- position: relative;
+ .block-editor-block-list__layout
+ .editor-block-list__block
+ .editor-block-list__block-edit
+ > .editor-block-contextual-toolbar
+ + [data-block]
+ .components-resizable-box__container {
+ position: relative;
}
.qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block
- .editor-block-list__block-edit
- > .editor-block-contextual-toolbar
- + [data-block]
- .components-resizable-box__container::before {
- // z-index: 0;
- // content: "";
- // position: absolute;
- // outline: 1px solid #e2e4e7;
- // transition: outline .1s linear;
- // pointer-events: none;
- // right: -14px;
- // left: -14px;
- // top: -14px;
- // bottom: -14px;
+ .block-editor-block-list__layout
+ .editor-block-list__block
+ .editor-block-list__block-edit
+ > .editor-block-contextual-toolbar
+ + [data-block]
+ .components-resizable-box__container::before {
+ // z-index: 0;
+ // content: "";
+ // position: absolute;
+ // outline: 1px solid #e2e4e7;
+ // transition: outline .1s linear;
+ // pointer-events: none;
+ // right: -14px;
+ // left: -14px;
+ // top: -14px;
+ // bottom: -14px;
+}
+
+.qubely-row .block-editor-block-list__layout .editor-block-list__block.is_hovered .components-resizable-box__container {
+ position: relative;
}
-
.qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block.is_hovered
- .components-resizable-box__container {
- position: relative;
-}
-.qubely-row
- .block-editor-block-list__layout
- .editor-block-list__block.is_hovered
- .components-resizable-box__container::before {
- z-index: 9999;
- content: "";
- position: absolute;
- outline: 2px solid green;
- transition: outline 0.1s linear;
- pointer-events: none;
- right: -14px;
- left: -14px;
- top: -14px;
- bottom: -14px;
+ .block-editor-block-list__layout
+ .editor-block-list__block.is_hovered
+ .components-resizable-box__container::before {
+ z-index: 9999;
+ content: "";
+ position: absolute;
+ outline: 2px solid green;
+ transition: outline 0.1s linear;
+ pointer-events: none;
+ right: -14px;
+ left: -14px;
+ top: -14px;
+ bottom: -14px;
}
// ----------------------------------------
@@ -780,239 +764,254 @@ div[data-type="qubely/row"].is-resizing
// ----------------------------------------
.qubely-row-preset {
- background: #f7f8fc;
- padding: 25px 15px;
-
- .qubely-row-preset-title {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- text-align: center;
- font-size: 16px;
- margin-bottom: 18px;
- color: #191e23;
- }
-
- .qubely-row-preset-group {
- max-width: 700px;
- margin: 0 auto;
- button {
- cursor: pointer;
- width: calc(16.66% - 14px);
- background: transparent;
- border: none;
- height: 50px;
- margin: 7px !important;
- display: inline-flex;
- padding: 0 !important;
- outline: 1px solid transparent;
- transition: 300ms;
- opacity: 1;
- i {
- height: 50px;
- background: #e2e6ec;
- border: 1px solid #e2e6ec;
- border-radius: 3px;
- display: inline-block;
- position: relative;
- transition: 300ms;
- font-style: normal;
- &:not(:last-of-type) {
- margin-right: 2px;
- }
- }
-
- &:hover {
- border: none;
- opacity: 1;
-
- i {
- font-style: normal;
- background: #ffffff;
- border: 1px solid #2184f9;
- box-shadow: 0 0 0 1px rgba(33, 132, 249, 0.2);
- }
- }
- }
- }
-
- .import-layout-btn-container {
- .is-button.is-primary {
- text-shadow: none;
- background: #2184f9;
- box-shadow: none;
- border: 0;
- padding: 10px 12px;
- line-height: 1;
- height: auto;
- transition: color 300ms, background-color 300ms;
- &:hover {
- background: rgb(29, 116, 223);
- }
- }
- }
+ background: #f7f8fc;
+ padding: 25px 15px;
+
+ .qubely-row-preset-title {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ text-align: center;
+ font-size: 16px;
+ margin-bottom: 18px;
+ color: #191e23;
+ }
+
+ .qubely-row-preset-group {
+ max-width: 700px;
+ margin: 0 auto;
+ button {
+ cursor: pointer;
+ width: calc(16.66% - 14px);
+ background: transparent;
+ border: none;
+ height: 50px;
+ margin: 7px !important;
+ display: inline-flex;
+ padding: 0 !important;
+ outline: 1px solid transparent;
+ transition: 300ms;
+ opacity: 1;
+ i {
+ height: 50px;
+ background: #e2e6ec;
+ border: 1px solid #e2e6ec;
+ border-radius: 3px;
+ display: inline-block;
+ position: relative;
+ transition: 300ms;
+ font-style: normal;
+ &:not(:last-of-type) {
+ margin-right: 2px;
+ }
+ }
+
+ &:hover {
+ border: none;
+ opacity: 1;
+
+ i {
+ font-style: normal;
+ background: #ffffff;
+ border: 1px solid #2184f9;
+ box-shadow: 0 0 0 1px rgba(33, 132, 249, 0.2);
+ }
+ }
+ }
+ }
+
+ .import-layout-btn-container {
+ .is-button.is-primary {
+ text-shadow: none;
+ background: #2184f9;
+ box-shadow: none;
+ border: 0;
+ padding: 10px 12px;
+ line-height: 1;
+ height: auto;
+ transition: color 300ms, background-color 300ms;
+ &:hover {
+ background: rgb(29, 116, 223);
+ }
+ }
+ }
}
// ----------------------------------------
// component remove button
// ----------------------------------------
.qubely-component-remove-button {
- position: absolute;
- align-items: center;
- justify-content: center;
- top: 13px;
- right: 15px;
- padding: 0;
- transition: 200ms;
- font-size: 17px;
- color: #cccfd5;
- &:hover {
- color: #b4b7bc;
- }
+ position: absolute;
+ align-items: center;
+ justify-content: center;
+ top: 13px;
+ right: 15px;
+ padding: 0;
+ transition: 200ms;
+ font-size: 17px;
+ color: #cccfd5;
+ &:hover {
+ color: #b4b7bc;
+ }
}
//right panel
.qubely-inspect-tabs {
- border: 1px solid #e2e4e7;
- padding: 10px;
- border-radius: 4px;
- margin-top: 30px;
- position: relative;
- .components-tab-panel__tabs {
- position: absolute;
- top: -15px;
- border: 2px solid #e2e4e7;
- display: inline-block;
- border-radius: 4px;
- overflow: hidden;
- button {
- padding: 7px 15px;
- box-shadow: none;
- cursor: pointer;
- border: none;
- cursor: pointer;
- transition: 400ms;
- &.active-tab {
- background: #0085ba;
- color: #fff;
- }
- }
- }
- .components-tab-panel__tab-content {
- margin-top: 10px;
- .components-panel__body-title {
- display: none;
- }
- .components-panel__body {
- border-top: none;
- }
- }
+ border: 1px solid #e2e4e7;
+ padding: 10px;
+ border-radius: 4px;
+ margin-top: 30px;
+ position: relative;
+ .components-tab-panel__tabs {
+ position: absolute;
+ top: -15px;
+ border: 2px solid #e2e4e7;
+ display: inline-block;
+ border-radius: 4px;
+ overflow: hidden;
+ button {
+ padding: 7px 15px;
+ box-shadow: none;
+ cursor: pointer;
+ border: none;
+ cursor: pointer;
+ transition: 400ms;
+ &.active-tab {
+ background: #0085ba;
+ color: #fff;
+ }
+ }
+ }
+ .components-tab-panel__tab-content {
+ margin-top: 10px;
+ .components-panel__body-title {
+ display: none;
+ }
+ .components-panel__body {
+ border-top: none;
+ }
+ }
}
#qubelyImportLayoutBtn {
- vertical-align: middle;
- display: inline-flex;
- align-items: center;
- background: #2184f9;
- color: #fff;
- text-decoration: none;
- border-radius: 3px;
- white-space: nowrap;
- border-width: 1px;
- border-style: solid;
- font-size: 13px;
- margin: 0 15px 0 15px;
- padding: 9px 12px;
- border: 0;
- cursor: pointer;
- -webkit-appearance: none;
- transition: 400ms;
- &:hover,
- &:focus,
- &:active {
- color: #fff;
- text-decoration: none;
- background: rgb(29, 116, 223);
- }
- img {
- height: 16px;
- width: 16px;
- margin-right: 10px;
- }
+ position: relative;
+ vertical-align: middle;
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ white-space: nowrap;
+ border-width: 1px;
+ border-style: solid;
+ font-size: 13px;
+ color: #ffffff;
+ background: linear-gradient(90deg, #aa0fd0 4.81%, #4321e0 57.77%, #65a8ff 104.73%);
+ margin: 0 15px 0 15px;
+ padding: 9px 12px;
+ border: 0;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: color 300ms;
+ z-index: 1;
+
+ &:before {
+ content: " ";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, #d638fd 4.81%, #502cf5 57.77%, #4395ff 104.73%);
+ border-radius: 8px;
+ opacity: 0;
+ z-index: -2;
+ transition: opacity 300ms;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: #fff;
+ text-decoration: none;
+ &:before {
+ opacity: 1;
+ }
+ }
+
+ img {
+ height: 16px;
+ width: 16px;
+ margin-right: 10px;
+ }
}
// Common
.qubely-editor-btn {
- background: none;
- border: 0;
- color: inherit;
- font: inherit;
- line-height: normal;
- overflow: visible;
- padding: 0;
- -webkit-appearance: button;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
-
- &::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
+ background: none;
+ border: 0;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ overflow: visible;
+ padding: 0;
+ -webkit-appearance: button;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+
+ &::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
}
//*************************
// Field Type Switch
//*************************
.qubely-field-type-switch {
- .qubely-field-switch-button {
- button {
- border: 1px solid #d8d8d8;
- padding: 8px 13px;
- font-size: 13px;
- color: #333;
- cursor: pointer;
- .qubely-gradient {
- position: relative;
- border: 2px solid #333;
- background-image: linear-gradient(45deg, #333 50%, #ffffff 50%);
- i {
- font-style: normal;
- width: 22px;
- visibility: hidden;
- }
- }
- &:not(:last-child) {
- border-right: none;
- }
- &:first-child {
- border-radius: 4px 0 0 4px;
- }
- &:last-child {
- border-radius: 0 4px 4px 0;
- }
- &.active {
- background: #0085ba;
- border-color: #006a95;
- color: #fff;
- .qubely-gradient {
- border-color: #fff;
- background-image: linear-gradient(
- 45deg,
- #0085ba 50%,
- #ffffff 50%
- );
- }
- + button {
- border-left-color: #006a95;
- }
- }
- }
- }
+ .qubely-field-switch-button {
+ button {
+ border: 1px solid #d8d8d8;
+ padding: 8px 13px;
+ font-size: 13px;
+ color: #333;
+ cursor: pointer;
+ .qubely-gradient {
+ position: relative;
+ border: 2px solid #333;
+ background-image: linear-gradient(45deg, #333 50%, #ffffff 50%);
+ i {
+ font-style: normal;
+ width: 22px;
+ visibility: hidden;
+ }
+ }
+ &:not(:last-child) {
+ border-right: none;
+ }
+ &:first-child {
+ border-radius: 4px 0 0 4px;
+ }
+ &:last-child {
+ border-radius: 0 4px 4px 0;
+ }
+ &.active {
+ background: #0085ba;
+ border-color: #006a95;
+ color: #fff;
+ .qubely-gradient {
+ border-color: #fff;
+ background-image: linear-gradient(45deg, #0085ba 50%, #ffffff 50%);
+ }
+ + button {
+ border-left-color: #006a95;
+ }
+ }
+ }
+ }
}
.qubely-label-inline-group {
- display: flex;
- align-items: center;
- justify-content: space-between;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
// ----------------------------------------
@@ -1020,43 +1019,43 @@ div[data-type="qubely/row"].is-resizing
// ----------------------------------------
.qubley-margin-indicator,
.qubley-padding-indicator {
- opacity: 0;
- .qubely-indicator-bottom,
- .qubely-indicator-top,
- .qubely-indicator-left,
- .qubely-indicator-right {
- position: absolute;
- opacity: 0.4;
- background-color: rgba(3, 225, 109, 0.3);
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 13px;
- color: #222;
- z-index: 1;
- }
- .qubely-indicator-bottom,
- .qubely-indicator-top {
- height: 0px;
- top: 0;
- left: 0;
- right: 0;
- }
- .qubely-indicator-bottom {
- top: auto;
- bottom: 0;
- }
- .qubely-indicator-left,
- .qubely-indicator-right {
- width: 0px;
- top: 0;
- bottom: 0;
- left: 0;
- }
- .qubely-indicator-right {
- left: auto;
- right: 0;
- }
+ opacity: 0;
+ .qubely-indicator-bottom,
+ .qubely-indicator-top,
+ .qubely-indicator-left,
+ .qubely-indicator-right {
+ position: absolute;
+ opacity: 0.4;
+ background-color: rgba(3, 225, 109, 0.3);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 13px;
+ color: #222;
+ z-index: 1;
+ }
+ .qubely-indicator-bottom,
+ .qubely-indicator-top {
+ height: 0px;
+ top: 0;
+ left: 0;
+ right: 0;
+ }
+ .qubely-indicator-bottom {
+ top: auto;
+ bottom: 0;
+ }
+ .qubely-indicator-left,
+ .qubely-indicator-right {
+ width: 0px;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ }
+ .qubely-indicator-right {
+ left: auto;
+ right: 0;
+ }
}
.qubely-section:hover,
@@ -1065,93 +1064,77 @@ div[data-type="qubely/row"].is-resizing
.margin-input-dragging,
.padding-dragging,
.margin-dragging {
- .qubley-margin-indicator,
- .qubley-padding-indicator {
- opacity: 1;
- }
+ .qubley-margin-indicator,
+ .qubley-padding-indicator {
+ opacity: 1;
+ }
}
.qubley-margin-indicator {
- .qubely-indicator-bottom,
- .qubely-indicator-top,
- .qubely-indicator-left,
- .qubely-indicator-right {
- background: rgba(0, 123, 243, 0.3);
- }
- .qubely-indicator-bottom {
- transform: translateY(100%);
- }
- .qubely-indicator-top {
- transform: translateY(-100%);
- }
- .qubely-indicator-left {
- transform: translateX(-100%);
- }
- .qubely-indicator-right {
- transform: translateX(100%);
- }
+ .qubely-indicator-bottom,
+ .qubely-indicator-top,
+ .qubely-indicator-left,
+ .qubely-indicator-right {
+ background: rgba(0, 123, 243, 0.3);
+ }
+ .qubely-indicator-bottom {
+ transform: translateY(100%);
+ }
+ .qubely-indicator-top {
+ transform: translateY(-100%);
+ }
+ .qubely-indicator-left {
+ transform: translateX(-100%);
+ }
+ .qubely-indicator-right {
+ transform: translateX(100%);
+ }
}
.not-clickable,
.disable-slide .qubely-field-child {
- filter: opacity(0.3);
- pointer-events: none;
+ filter: opacity(0.3);
+ pointer-events: none;
}
// .qubely-section .qubely-row .block-editor-inner-blocks {
// padding: 14px;
// }
-.qubely-row
- *
- > [data-type="qubely/column"].has-child-selected
- .block-editor-inner-blocks {
- // padding: 14px;
-}
-
-.editor-styles-wrapper
- .qubely-row
- *
- > [data-type="qubely/column"]
- [data-block] {
- // margin-top: 0;
- // margin-bottom: 0;
-}
-.editor-styles-wrapper
- .qubely-row
- *
- > [data-type="qubely/column"].has-child-selected
- [data-block] {
- // margin-top: 28px;
- // margin-bottom: 28px;
-}
-
-.block-editor-block-list__block
- .qubely-row
- *
- > [data-type="qubely/column"]
- .block-list-appender {
- margin: 0;
+.qubely-row * > [data-type="qubely/column"].has-child-selected .block-editor-inner-blocks {
+ // padding: 14px;
+}
+
+.editor-styles-wrapper .qubely-row * > [data-type="qubely/column"] [data-block] {
+ // margin-top: 0;
+ // margin-bottom: 0;
+}
+.editor-styles-wrapper .qubely-row * > [data-type="qubely/column"].has-child-selected [data-block] {
+ // margin-top: 28px;
+ // margin-bottom: 28px;
+}
+
+.block-editor-block-list__block .qubely-row * > [data-type="qubely/column"] .block-list-appender {
+ margin: 0;
}
.qubely-row * > [data-type="qubely/column"].has-child-selected {
- z-index: 1;
+ z-index: 1;
}
-.block-editor-block-list__layout
- .block-editor-block-list__block[data-type="qubely/row"].is-selected {
- z-index: inherit;
+.block-editor-block-list__layout .block-editor-block-list__block[data-type="qubely/row"].is-selected {
+ z-index: inherit;
}
span.block-editor-block-icon img {
- max-width: 24px;
+ max-width: 24px;
}
.qubely-import-button-wrapper {
- display: inline-flex;
- align-items: center;
+ display: inline-flex;
+ align-items: center;
}
.advanced-background-trigger {
- margin-left: 10px;
+ margin-left: 10px;
}
.advanced-background-settings {
- min-width: 100px;
+ min-width: 100px;
}
diff --git a/assets/reactjs/src/helpers/ModalManager.js b/assets/reactjs/src/helpers/ModalManager.js
index 9e70d868..72d4364f 100755
--- a/assets/reactjs/src/helpers/ModalManager.js
+++ b/assets/reactjs/src/helpers/ModalManager.js
@@ -1,80 +1,86 @@
-const { __ } = wp.i18n
-const { Component, Fragment } = wp.element
-
+const { __ } = wp.i18n;
+const { Component, Fragment } = wp.element;
var onClose;
class Modal extends Component {
- constructor(props) {
- super(props)
- this.state = {
- afterOpen: false,
- beforeClose: false,
- }
- }
- close() {
- if (!this.props.onRequestClose || this.props.onRequestClose()) {
- Manager.close()
- }
- }
- handleKeyDown = (event) => {
- if (event.keyCode === 27) {
- Manager.close()
- }
- }
- componentDidMount() {
- const { openTimeoutMS, closeTimeoutMS } = this.props
- document.addEventListener('keydown', this.handleKeyDown)
- setTimeout(() => this.setState({ afterOpen: true }), openTimeoutMS ? openTimeoutMS : 150)
-
- onClose = (callback) => {
- this.setState({ beforeClose: true }, () => {
- this.closeTimer = setTimeout(callback, closeTimeoutMS ? closeTimeoutMS : 150)
- });
- };
- }
- componentWillUnmount() {
- onClose = null;
- clearTimeout(this.closeTimer)
- document.removeEventListener('keydown', this.handleKeyDown)
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ afterOpen: false,
+ beforeClose: false,
+ };
+ }
+ close() {
+ if (!this.props.onRequestClose || this.props.onRequestClose()) {
+ Manager.close();
+ }
+ }
+ handleKeyDown = (event) => {
+ if (event.keyCode === 27) {
+ Manager.close();
+ }
+ };
+ componentDidMount() {
+ const { openTimeoutMS, closeTimeoutMS } = this.props;
+ document.addEventListener("keydown", this.handleKeyDown);
+ setTimeout(() => this.setState({ afterOpen: true }), openTimeoutMS ? openTimeoutMS : 150);
- render() {
+ onClose = (callback) => {
+ this.setState({ beforeClose: true }, () => {
+ this.closeTimer = setTimeout(callback, closeTimeoutMS ? closeTimeoutMS : 150);
+ });
+ };
+ }
+ componentWillUnmount() {
+ onClose = null;
+ clearTimeout(this.closeTimer);
+ document.removeEventListener("keydown", this.handleKeyDown);
+ }
- return (
-
- { this.close() }} className="qubely-pagelist-modal-overlay">
- e.stopPropagation()} >
- {this.props.children}
-
-
- );
- }
+ render() {
+ return (
+
+ {
+ this.close();
+ }}
+ className="qubely-pagelist-modal-overlay"
+ >
+
+
+ e.stopPropagation()}>
+ {this.props.children}
+
+
+ );
+ }
}
var node;
const Manager = {
- open(component) {
- if (onClose) {
- throw __('There is already one modal.It must be closed before one new modal will be opened');
- }
- if (!node) {
- node = document.createElement('div')
- node.className = "qubely-builder-modal"
- document.body.appendChild(node)
- }
- wp.element.render(component, node)
- document.body.classList.add('qubely-builder-modal-open')
- },
- close() {
- onClose && onClose(() => {
- wp.element.unmountComponentAtNode(node)
- document.body.classList.remove('qubely-builder-modal-open')
- });
- },
-}
+ open(component) {
+ if (onClose) {
+ throw __("There is already one modal.It must be closed before one new modal will be opened");
+ }
+ if (!node) {
+ node = document.createElement("div");
+ node.className = "qubely-builder-modal";
+ document.body.appendChild(node);
+ }
+ wp.element.render(component, node);
+ document.body.classList.add("qubely-builder-modal-open");
+ },
+ close() {
+ onClose &&
+ onClose(() => {
+ wp.element.unmountComponentAtNode(node);
+ document.body.classList.remove("qubely-builder-modal-open");
+ });
+ },
+};
module.exports = {
- Modal: Modal,
- ModalManager: Manager,
+ Modal: Modal,
+ ModalManager: Manager,
};
diff --git a/assets/reactjs/src/helpers/PageLIstModal.scss b/assets/reactjs/src/helpers/PageLIstModal.scss
index 5f0c9515..5af85163 100644
--- a/assets/reactjs/src/helpers/PageLIstModal.scss
+++ b/assets/reactjs/src/helpers/PageLIstModal.scss
@@ -1,542 +1,542 @@
@mixin placeholder-color($color) {
- &::-webkit-input-placeholder {
- /* WebKit browsers */
- color: $color;
- opacity: 1;
- }
- &:-moz-placeholder {
- /* Mozilla Firefox 4 to 18 */
- color: $color;
- opacity: 1;
- }
- &::-moz-placeholder {
- /* Mozilla Firefox 19+ */
- color: $color;
- opacity: 1;
- }
- &:-ms-input-placeholder {
- /* Internet Explorer 10+ */
- color: $color;
- opacity: 1;
- }
+ &::-webkit-input-placeholder {
+ /* WebKit browsers */
+ color: $color;
+ opacity: 1;
+ }
+ &:-moz-placeholder {
+ /* Mozilla Firefox 4 to 18 */
+ color: $color;
+ opacity: 1;
+ }
+ &::-moz-placeholder {
+ /* Mozilla Firefox 19+ */
+ color: $color;
+ opacity: 1;
+ }
+ &:-ms-input-placeholder {
+ /* Internet Explorer 10+ */
+ color: $color;
+ opacity: 1;
+ }
}
.qubely-builder-modal {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 9999;
- display: flex;
- align-items: center;
- justify-content: center;
- pointer-events: none;
- * {
- box-sizing: border-box;
- pointer-events: all;
- }
- .qubely-pagelist-modal-overlay {
- position: absolute;
- width: 100%;
- height: 100%;
- background: red;
- left: 0;
- top: 0;
- z-index: -1;
- background: rgba(#000, 0.6);
- }
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+ * {
+ box-sizing: border-box;
+ pointer-events: all;
+ }
+ .qubely-pagelist-modal-overlay {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: red;
+ left: 0;
+ top: 0;
+ z-index: -1;
+ background: rgba(#000, 0.6);
+ }
}
.qubely-builder-modal-header {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- border-radius: 6px 6px 0 0;
- display: flex;
- z-index: 99999;
- .template-search-box {
- position: relative;
- width: 270px;
- i {
- font-size: 21px;
- color: #95c2ee;
- position: absolute;
- top: 50%;
- left: 40px;
- transform: translateY(-50%);
- }
- input {
- display: block;
- width: 100%;
- height: 85px;
- color: #507a9b;
- background: #1b3865;
- border: none;
- font-size: 20px;
- padding: 0 20px 0 75px;
- margin: 0;
- font-weight: 300;
- border-radius: 6px 0 0 0 !important;
- @include placeholder-color(#507a9b);
- &:focus {
- box-shadow: none;
- outline: 0;
- }
- }
- }
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ border-radius: 6px 6px 0 0;
+ display: flex;
+ z-index: 99999;
+ .template-search-box {
+ position: relative;
+ width: 270px;
+ i {
+ font-size: 21px;
+ color: #95c2ee;
+ position: absolute;
+ top: 50%;
+ left: 40px;
+ transform: translateY(-50%);
+ }
+ input {
+ display: block;
+ width: 100%;
+ height: 85px;
+ color: #507a9b;
+ background: #1b3865;
+ border: none;
+ font-size: 20px;
+ padding: 0 20px 0 75px;
+ margin: 0;
+ font-weight: 300;
+ border-radius: 6px 0 0 0 !important;
+ @include placeholder-color(#507a9b);
+ &:focus {
+ box-shadow: none;
+ outline: 0;
+ }
+ }
+ }
}
.qubely-pagelist-modal-inner {
- padding-top: 85px;
- position: relative;
- display: flex;
- width: 1500px;
- height: 80%;
- border-radius: 6px;
- background: #ebeef4;
- max-width: 85%;
- .qubely-layout-modal-sidebar {
- min-width: 270px;
- background: #0e2244;
- border-radius: 0 0 0 6px;
- color: #587e97;
- overflow-y: auto;
- .qubely-modal-sidebar-content {
- padding: 30px 40px;
- h3 {
- font-size: 21px;
- color: #95c2ee;
- margin: 0 0 30px;
- font-weight: 500;
- }
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
- li {
- padding: 6px 0;
- display: block;
- font-size: 14px;
- overflow: hidden;
- cursor: pointer;
- transition: 300ms;
- &:hover {
- color: #95c2ee;
- }
- &.active {
- color: #2184f9;
- }
- span {
- float: right;
- }
- }
- }
- }
- }
- .qubely-layout-modal-content-area {
- flex-grow: 1;
- max-height: 100%;
- overflow-y: auto;
- position: relative;
- }
+ padding-top: 85px;
+ position: relative;
+ display: flex;
+ width: 1500px;
+ height: 80%;
+ border-radius: 6px;
+ background: #ebeef4;
+ max-width: 85%;
+ .qubely-layout-modal-sidebar {
+ min-width: 270px;
+ background: #0e2244;
+ border-radius: 0 0 0 6px;
+ color: #587e97;
+ overflow-y: auto;
+ .qubely-modal-sidebar-content {
+ padding: 30px 40px;
+ h3 {
+ font-size: 21px;
+ color: #95c2ee;
+ margin: 0 0 30px;
+ font-weight: 500;
+ }
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ li {
+ padding: 6px 0;
+ display: block;
+ font-size: 14px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: 300ms;
+ &:hover {
+ color: #95c2ee;
+ }
+ &.active {
+ color: #2184f9;
+ }
+ span {
+ float: right;
+ }
+ }
+ }
+ }
+ }
+ .qubely-layout-modal-content-area {
+ flex-grow: 1;
+ max-height: 100%;
+ overflow-y: auto;
+ position: relative;
+ }
}
//template list header
.qubely-template-list-header {
- text-align: center;
- background-color: #fff;
- border-radius: 6px 6px 0 0;
- position: relative;
- flex-grow: 1;
- padding-right: 50px;
- button:not(.qubely-builder-close-modal) {
- display: inline-block;
- line-height: 25px;
- padding: 30px 40px;
- border: none;
- background: transparent;
- cursor: pointer;
- font-size: 16px;
- margin: 0 1px 0 0;
- transition: color 300ms, background-color 300ms;
- &:hover {
- color: #2184f9;
- }
- &.active {
- background-color: #ebeef4;
- color: #2184f9;
- }
- &:focus {
- outline: none;
- }
- }
- .qubely-builder-close-modal {
- position: absolute;
- font-size: 20px;
- color: #9b9b9b;
- background-color: transparent;
- border: none;
- right: 30px;
- top: 50%;
- cursor: pointer;
- transform: translateY(-50%);
- transition: color 300ms;
- &:hover {
- color: #2184f9;
- }
- &:focus {
- outline: none;
- }
- }
+ text-align: center;
+ background-color: #fff;
+ border-radius: 6px 6px 0 0;
+ position: relative;
+ flex-grow: 1;
+ padding-right: 50px;
+ button:not(.qubely-builder-close-modal) {
+ display: inline-block;
+ line-height: 25px;
+ padding: 30px 40px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ font-size: 16px;
+ margin: 0 1px 0 0;
+ transition: color 300ms, background-color 300ms;
+ &:hover {
+ color: #2184f9;
+ }
+ &.active {
+ background-color: #ebeef4;
+ color: #2184f9;
+ }
+ &:focus {
+ outline: none;
+ }
+ }
+ .qubely-builder-close-modal {
+ position: absolute;
+ font-size: 20px;
+ color: #9b9b9b;
+ background-color: transparent;
+ border: none;
+ right: 30px;
+ top: 50%;
+ cursor: pointer;
+ transform: translateY(-50%);
+ transition: color 300ms;
+ &:hover {
+ color: #2184f9;
+ }
+ &:focus {
+ outline: none;
+ }
+ }
}
//template list sub header
.qubely-template-list-sub-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 23px 25px 0;
- h4 {
- font-size: 21px;
- color: #0e2244;
- font-weight: 500;
- margin: 0;
- }
- .qubely-template-filter-button-group {
- background: #f8fafb;
- display: inline-flex;
- border: 1px solid #d8d8d8;
- border-radius: 4px;
- button {
- display: inline-flex;
- line-height: 28px;
- padding: 5px 18px;
- align-items: center;
- background: none;
- border: none;
- color: #587e97;
- position: relative;
- z-index: 1;
- cursor: pointer;
- &:focus {
- outline: none;
- }
- &:last-child {
- color: #f5a623;
- }
- &.active {
- background: #2184f9;
- color: #fff;
- }
- img {
- display: inline-block;
- width: auto;
- height: 14px;
- margin-right: 4px;
- }
- &:not(:last-child)::after {
- content: "";
- height: 13px;
- background-color: #c4cbcf;
- width: 1px;
- right: 0px;
- top: 50%;
- position: absolute;
- transform: translateY(-50%);
- }
- &.active::after {
- display: none;
- }
- &::before {
- content: "";
- position: absolute;
- background: #2184f9;
- height: calc(100% + 4px);
- width: calc(100% + 4px);
- left: -2px;
- top: -2px;
- z-index: -1;
- border-radius: 4px;
- box-shadow: 0 0 4px rgba(33, 32, 249, 0.3);
- opacity: 0;
- }
- &.active::before {
- opacity: 1;
- }
- }
- }
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 23px 25px 0;
+ h4 {
+ font-size: 21px;
+ color: #0e2244;
+ font-weight: 500;
+ margin: 0;
+ }
+ .qubely-template-filter-button-group {
+ background: #f8fafb;
+ display: inline-flex;
+ border: 1px solid #d8d8d8;
+ border-radius: 4px;
+ button {
+ display: inline-flex;
+ line-height: 28px;
+ padding: 5px 18px;
+ align-items: center;
+ background: none;
+ border: none;
+ color: #587e97;
+ position: relative;
+ z-index: 1;
+ cursor: pointer;
+ &:focus {
+ outline: none;
+ }
+ &:last-child {
+ color: #f5a623;
+ }
+ &.active {
+ background: #2184f9;
+ color: #fff;
+ }
+ img {
+ display: inline-block;
+ width: auto;
+ height: 14px;
+ margin-right: 4px;
+ }
+ &:not(:last-child)::after {
+ content: "";
+ height: 13px;
+ background-color: #c4cbcf;
+ width: 1px;
+ right: 0px;
+ top: 50%;
+ position: absolute;
+ transform: translateY(-50%);
+ }
+ &.active::after {
+ display: none;
+ }
+ &::before {
+ content: "";
+ position: absolute;
+ background: #2184f9;
+ height: calc(100% + 4px);
+ width: calc(100% + 4px);
+ left: -2px;
+ top: -2px;
+ z-index: -1;
+ border-radius: 4px;
+ box-shadow: 0 0 4px rgba(33, 32, 249, 0.3);
+ opacity: 0;
+ }
+ &.active::before {
+ opacity: 1;
+ }
+ }
+ }
}
.qubely-modal-loader {
- display: inline-block;
- position: absolute;
- width: 80px;
- height: 80px;
- line-height: 80px;
- text-align: center;
- left: 50%;
- margin-left: -50px;
- top: 50%;
- margin-top: -50px;
- font-size: 24px;
- color: #1e7ed8;
+ display: inline-block;
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ text-align: center;
+ left: 50%;
+ margin-left: -50px;
+ top: 50%;
+ margin-top: -50px;
+ font-size: 24px;
+ color: #1e7ed8;
}
.qubely-modal-loader img {
- height: 80px;
- width: 80px;
+ height: 80px;
+ width: 80px;
}
/*block style*/
.qubely-builder-template-found-empty {
- text-align: center;
- border-color: transparent !important;
- .qubely-builder-empty-title {
- display: block;
- width: 100%;
- }
+ text-align: center;
+ border-color: transparent !important;
+ .qubely-builder-empty-title {
+ display: block;
+ width: 100%;
+ }
}
#layouts-blocks-list {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- padding: 10px 10px 35px 10px;
- > div {
- width: 33.3333%;
- padding: 15px;
- position: relative;
- @media (max-width: 1199px) {
- width: 50%;
- }
- &.qubely-builder-template-found-empty {
- width: 100%;
- text-align: center;
- opacity: 0.5;
- border: none !important;
- padding-top: 70px !important;
- }
- }
- .qubely-pro {
- position: absolute;
- background: red;
- padding: 4px 5px;
- border-radius: 3px;
- color: #fff;
- font-size: 10px;
- right: 20px;
- top: 20px;
- text-transform: uppercase;
- line-height: 1;
- }
- &.qubely-frontendd-block-list {
- display: block;
- padding-bottom: 35px;
- padding-top: 0px;
- > div {
- &.qubely-reusable-list-title {
- color: #adafb2;
- }
- width: 100%;
- display: flex;
- flex-wrap: nowrap;
- border-bottom: 1px solid #e2e4e7;
- font-weight: 600;
- padding: 12px 0 12px 15px;
- margin-bottom: 0;
- align-items: center;
- &:first-child {
- border-top: 1px solid #e2e4e7;
- }
- .qubely-reusable-list-content {
- flex-grow: 1;
- }
- .qubely-reusable-list-info {
- flex-grow: 1;
- max-width: 165px;
- display: flex;
- flex-wrap: nowrap;
- }
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 10px 10px 35px 10px;
+ > div {
+ width: 33.3333%;
+ padding: 15px;
+ position: relative;
+ @media (max-width: 1199px) {
+ width: 50%;
+ }
+ &.qubely-builder-template-found-empty {
+ width: 100%;
+ text-align: center;
+ opacity: 0.5;
+ border: none !important;
+ padding-top: 70px !important;
+ }
+ }
+ .qubely-pro {
+ position: absolute;
+ background: red;
+ padding: 4px 5px;
+ border-radius: 3px;
+ color: #fff;
+ font-size: 10px;
+ right: 20px;
+ top: 20px;
+ text-transform: uppercase;
+ line-height: 1;
+ }
+ &.qubely-frontendd-block-list {
+ display: block;
+ padding-bottom: 35px;
+ padding-top: 0px;
+ > div {
+ &.qubely-reusable-list-title {
+ color: #adafb2;
+ }
+ width: 100%;
+ display: flex;
+ flex-wrap: nowrap;
+ border-bottom: 1px solid #e2e4e7;
+ font-weight: 600;
+ padding: 12px 0 12px 15px;
+ margin-bottom: 0;
+ align-items: center;
+ &:first-child {
+ border-top: 1px solid #e2e4e7;
+ }
+ .qubely-reusable-list-content {
+ flex-grow: 1;
+ }
+ .qubely-reusable-list-info {
+ flex-grow: 1;
+ max-width: 165px;
+ display: flex;
+ flex-wrap: nowrap;
+ }
- .qubely-reusable-list-button {
- margin-left: 30px;
- }
- .qubely-reusable-list-button button {
- display: inline-block;
- padding: 0;
- border: none;
- transition: 300ms;
- cursor: pointer;
- background-color: transparent;
- &:not(:last-child) {
- margin-right: 10px;
- }
- i {
- font-size: 16px;
- color: #cdcfd1;
- }
- &:hover i {
- color: #007cba;
- }
- &:last-child:hover i {
- color: red;
- }
- }
- }
- }
+ .qubely-reusable-list-button {
+ margin-left: 30px;
+ }
+ .qubely-reusable-list-button button {
+ display: inline-block;
+ padding: 0;
+ border: none;
+ transition: 300ms;
+ cursor: pointer;
+ background-color: transparent;
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+ i {
+ font-size: 16px;
+ color: #cdcfd1;
+ }
+ &:hover i {
+ color: #007cba;
+ }
+ &:last-child:hover i {
+ color: red;
+ }
+ }
+ }
+ }
}
.qubely-default-template-image {
- transition: 300ms;
- img {
- width: 100%;
- display: block;
- }
+ transition: 300ms;
+ img {
+ width: 100%;
+ display: block;
+ }
}
.qubely-single-block-item {
- margin-bottom: 30px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ margin-bottom: 30px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.qubely-single-block-item .qubely-tmpl-title {
- background: #fff;
- margin: 0;
- color: #23282d;
- padding: 13px 15px;
+ background: #fff;
+ margin: 0;
+ color: #23282d;
+ padding: 13px 15px;
}
.qubely-single-block-item .qubely-single-item-inner {
- position: relative;
- overflow: hidden;
- .qubely-default-template-image {
- transition: 300ms;
- }
- .qubely-tmpl-info {
- position: absolute;
- width: 100%;
- background: rgba(0, 0, 0, 0.5);
- height: 100%;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- transition: 300ms;
- opacity: 0;
- .qubely-tmpl-title {
- margin: 0 0 15px;
- color: #fff;
- font-size: 19px;
- font-weight: 400;
- }
- }
- &:hover {
- .qubely-tmpl-info {
- opacity: 1;
- }
- .qubely-default-template-image {
- filter: blur(3px);
- }
- }
+ position: relative;
+ overflow: hidden;
+ .qubely-default-template-image {
+ transition: 300ms;
+ }
+ .qubely-tmpl-info {
+ position: absolute;
+ width: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ height: 100%;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ transition: 300ms;
+ opacity: 0;
+ .qubely-tmpl-title {
+ margin: 0 0 15px;
+ color: #fff;
+ font-size: 19px;
+ font-weight: 400;
+ }
+ }
+ &:hover {
+ .qubely-tmpl-info {
+ opacity: 1;
+ }
+ .qubely-default-template-image {
+ filter: blur(3px);
+ }
+ }
}
.qubely-import-button-group span,
.qubely-import-button-group a {
- display: inline-block;
- padding: 0 12px 2px;
- margin: 2px;
- height: 33px;
- line-height: 32px;
- font-size: 13px;
- color: #353535;
- border: 1px solid #f7f7f7;
- background: #f7f7f7;
- box-shadow: 0 1px 0 #ccc;
- vertical-align: top;
- border-radius: 3px;
- text-decoration: none;
- cursor: pointer;
+ display: inline-block;
+ padding: 0 12px 2px;
+ margin: 2px;
+ height: 33px;
+ line-height: 32px;
+ font-size: 13px;
+ color: #353535;
+ border: 1px solid #f7f7f7;
+ background: #f7f7f7;
+ box-shadow: 0 1px 0 #ccc;
+ vertical-align: top;
+ border-radius: 3px;
+ text-decoration: none;
+ cursor: pointer;
}
.qubely-import-button-group span i,
.qubely-import-button-group a i {
- font-size: 10px;
- margin-right: 4px;
+ font-size: 10px;
+ margin-right: 4px;
}
.qubely-import-button-group span {
- background: #0085ba;
- border-color: #006a95 #00648c #00648c;
- box-shadow: inset 0 -1px 0 #00648c;
- color: #fff;
- text-decoration: none;
- text-shadow: 0 -1px 1px #005d82, 1px 0 1px #005d82, 0 1px 1px #005d82, -1px 0 1px #005d82;
+ background: #0085ba;
+ border-color: #006a95 #00648c #00648c;
+ box-shadow: inset 0 -1px 0 #00648c;
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 0 -1px 1px #005d82, 1px 0 1px #005d82, 0 1px 1px #005d82, -1px 0 1px #005d82;
}
.qubely-import-button-group a.qubely-button-download {
- border: 1px solid #1e70d6;
- background: #1e70d6;
- box-shadow: 0 1px 0 #165cb4;
- color: #fff;
+ border: 1px solid #1e70d6;
+ background: #1e70d6;
+ box-shadow: 0 1px 0 #165cb4;
+ color: #fff;
}
.qubely-import-button-group .qubely-button-download {
- margin-left: 5px;
+ margin-left: 5px;
}
/*multiple box*/
#layouts-blocks-list div.qubely-multiple-template-box {
- margin-bottom: 5px;
- .multiple-template-view {
- border: 1px solid #e2e4e7;
- background: #fff;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 10px 0 -5px #fff, 0 10px 1px -4px rgba(0, 0, 0, 0.08),
- 0 20px 0 -10px #fff, 0 20px 1px -9px rgba(0, 0, 0, 0.08);
- cursor: pointer;
- }
- .qubely-tmpl-info {
- padding: 10px 12px;
- h5 {
- margin: 0;
- font-size: 14px;
- color: #23282d;
- line-height: 19px;
- span {
- font-size: 13px;
- color: #cdcfd1;
- line-height: 18px;
- }
- }
- }
+ margin-bottom: 5px;
+ .multiple-template-view {
+ border: 1px solid #e2e4e7;
+ background: #fff;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 10px 0 -5px #fff, 0 10px 1px -4px rgba(0, 0, 0, 0.08),
+ 0 20px 0 -10px #fff, 0 20px 1px -9px rgba(0, 0, 0, 0.08);
+ cursor: pointer;
+ }
+ .qubely-tmpl-info {
+ padding: 10px 12px;
+ h5 {
+ margin: 0;
+ font-size: 14px;
+ color: #23282d;
+ line-height: 19px;
+ span {
+ font-size: 13px;
+ color: #cdcfd1;
+ line-height: 18px;
+ }
+ }
+ }
}
.qubely-template-option-header {
- padding: 20px 20px 0;
- .qubely-template-back {
- cursor: pointer;
- .dashicons {
- vertical-align: text-bottom;
- }
- }
+ padding: 20px 20px 0;
+ .qubely-template-back {
+ cursor: pointer;
+ .dashicons {
+ vertical-align: text-bottom;
+ }
+ }
}
#wpwrap .edit-post-visual-editor .import-layout-btn-container {
- text-align: center;
- margin-top: 20px;
+ text-align: center;
+ margin-top: 20px;
}
#wpwrap .edit-post-visual-editor .import-layout-btn-container #importLayoutBtn {
- color: #fff;
- font-size: 13px;
+ color: #fff;
+ font-size: 13px;
}
.qubely-template-back {
- cursor: pointer;
- .dashicons {
- vertical-align: text-bottom;
- }
+ cursor: pointer;
+ .dashicons {
+ vertical-align: text-bottom;
+ }
}
/* .qubely-modal-loader span {
@@ -548,53 +548,53 @@
.qubely-import-global,
.qubely-restore-global_preset {
- width: 500px;
- border-radius: 4px;
- .qubely-import-settings-footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 20px;
- }
- .qubely-restore-settings-footer {
- display: flex;
- align-items: flex-start;
- justify-content: center;
- margin-top: 20px;
- flex-direction: column;
- .action-buttons {
- width: 100%;
- justify-content: flex-end;
- }
- }
- .help {
- font-size: 12px;
- margin-bottom: -5px;
- margin-top: 20px;
- }
- .qubely-import-settings {
- .label {
- font-size: 14px;
- margin-top: -5px;
- }
- .action-buttons {
- display: flex;
- .action-button {
- cursor: pointer;
- padding: 6px 30px;
- border: 1px solid #d8d8d8;
- border-radius: 4px;
- &.yes {
- margin-left: 15px;
- color: #fff;
- background-color: #2184f9;
- }
- }
- }
- .remember-choice-box {
- .label {
- display: inline-block;
- }
- }
- }
+ width: 500px;
+ border-radius: 4px;
+ .qubely-import-settings-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 20px;
+ }
+ .qubely-restore-settings-footer {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ margin-top: 20px;
+ flex-direction: column;
+ .action-buttons {
+ width: 100%;
+ justify-content: flex-end;
+ }
+ }
+ .help {
+ font-size: 12px;
+ margin-bottom: -5px;
+ margin-top: 20px;
+ }
+ .qubely-import-settings {
+ .label {
+ font-size: 14px;
+ margin-top: -5px;
+ }
+ .action-buttons {
+ display: flex;
+ .action-button {
+ cursor: pointer;
+ padding: 6px 30px;
+ border: 1px solid #d8d8d8;
+ border-radius: 4px;
+ &.yes {
+ margin-left: 15px;
+ color: #fff;
+ background-color: #2184f9;
+ }
+ }
+ }
+ .remember-choice-box {
+ .label {
+ display: inline-block;
+ }
+ }
+ }
}
diff --git a/assets/reactjs/src/helpers/PageListModal.js b/assets/reactjs/src/helpers/PageListModal.js
index 7242f35b..c2bcea51 100755
--- a/assets/reactjs/src/helpers/PageListModal.js
+++ b/assets/reactjs/src/helpers/PageListModal.js
@@ -1,729 +1,888 @@
const { compose } = wp.compose;
const { withDispatch } = wp.data;
-const { Component, Fragment } = wp.element
+const { Component, Fragment } = wp.element;
const { Spinner, Modal } = wp.components;
-const { parse } = wp.blocks
+const { parse } = wp.blocks;
const { apiFetch } = wp;
-const { __ } = wp.i18n
-import { Modal as QubelyModal, ModalManager } from './ModalManager'
-import SingleItem from './components/SingleItem'
-import MultipleItem from './components/MultipleItem'
-import ReusableBlockItem from './components/ReusableBlockItem'
-import './PageLIstModal.scss'
-
+const { __ } = wp.i18n;
+import { Modal as QubelyModal, ModalManager } from "./ModalManager";
+import SingleItem from "./components/SingleItem";
+import MultipleItem from "./components/MultipleItem";
+import ReusableBlockItem from "./components/ReusableBlockItem";
+import "./PageLIstModal.scss";
class PageListModal extends Component {
-
- constructor(props) {
- super(props);
- this.state = {
- loading: false,
- blockCategories: [],
- layoutCategories: [],
- layoutCategoryItems: {},
- selectedBlockCategory: '',
- selectedLayoutCategory: '',
- blockData: '',
- layoutData: '',
- savedBlocks: '',
- itemType: 'block',
- layer: 'single',
- searchContext: '',
- isSearchEnable: false,
- notFoundMessage: 'Sorry, we couldn\'t find the match.',
- requestFailedMsg: '',
- spinner: false,
- lazyloadThrottleTimeout: 0,
- priceFilter: '',
- isOpen: false,
- rememberChoice: false
- };
- this._lazyload = this._lazyload.bind(this);
- }
-
- componentDidMount() {
-
- this.setState({ loading: true });
- let requestFailedMsg = [];
-
- const options = {
- method: 'POST',
- url: qubely_admin.ajax + '?action=qubely_get_sections',
- headers: { 'Content-Type': 'application/json' }
- }
- apiFetch(options).then(response => {
-
- if (response.success) {
-
- let blockCategories = [],
- blockData = {};
-
- response.data.map(item => {
- if (item.category) {
- item.category.map(cat => {
- if (cat.slug in blockData) {
- blockData[cat.slug].push(item)
- } else {
- blockData[cat.slug] = [];
- blockData[cat.slug].push(item)
- }
- let index = -1;
- blockCategories.forEach((change, i) => {
- if (cat.slug == change.slug) {
- index = i
- blockCategories[i].count = blockCategories[i].count + 1
- }
- });
- if (index === -1) {
- blockCategories.push({ name: cat.name, slug: cat.slug, count: 1 })
- }
- })
- }
- });
-
- this.setState({
- loading: false,
- blockCategories,
- blockData
- });
-
- let node = document.querySelector('#modalContainer');
- node.addEventListener("scroll", this._lazyload, true);
- this._lazyload();
-
- } else {
- this.setState({
- loading: false,
- requestFailedMsg: response.data.message
- });
- }
-
- }).catch(error => {
- requestFailedMsg.push(error.code + ' : ' + error.message);
- this.setState({
- loading: false,
- requestFailedMsg
- });
- });
- }
-
- componentDidUpdate() {
- if (this.state.layer === 'single') {
- this._lazyload();
- }
- }
-
- componentWillUnmount() {
- let node = document.querySelector('#modalContainer');
- node && node.removeEventListener('scroll', this._lazyload);
- };
-
-
- getCurrentPageData() {
- let { itemType, priceFilter } = this.state;
- let pageData = (itemType == 'block') ? this.state.blockData : this.state.layoutData;
- let pageCategories = (itemType == 'block') ? this.state.blockCategories : this.state.layoutCategories;
- let selectedCategory = (itemType == 'block') ? this.state.selectedBlockCategory : this.state.selectedLayoutCategory;
- let currentPageData = [];
- let tempDataID = [];
-
- if (this.state.layer === 'single') {
- if (this.state.parent_id) { //if click from multiple entry
- for (let key in pageData) {
- pageData[key].map(value => {
- if (value.parentID && this.state.parent_id === value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
- currentPageData.push(value);
- tempDataID.push(value.ID);
- }
- })
- }
- } else {
- if (selectedCategory) {
- pageData[selectedCategory].map(value => {
- if (itemType == 'block') {
- if (!(tempDataID.indexOf(value.ID) > -1)) {
- currentPageData.push(value);
- tempDataID.push(value.ID);
- }
- } else {
- if (value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
- currentPageData.push(value);
- tempDataID.push(value.ID);
- }
- }
- })
- } else {
- for (let key in pageData) {
- Array.isArray(pageData[key]) && pageData[key].map(value => {
- if (itemType == 'block') {
- if (!(tempDataID.indexOf(value.ID) > -1)) {
- currentPageData.push(value);
- tempDataID.push(value.ID);
- }
- } else {
- if (value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
- currentPageData.push(value);
- tempDataID.push(value.ID);
- }
- }
- })
- }
- }
- }
- }
-
- if (this.state.layer === 'multiple') {
- if (selectedCategory) {
- let itemCount = 0;
- pageData[selectedCategory].map(value => {
- if (!value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
- let found = value.category.find(item => item.slug == selectedCategory);
- if (found) {
- tempDataID.push(value.ID);
- currentPageData.push(value);
- }
- }
- })
- } else {
- for (let key in pageData) {
- if (typeof pageData[key] === 'object') {
- pageData[key].map(value => {
- if (!value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
- tempDataID.push(value.ID);
- currentPageData.push(value);
- }
- });
- }
- }
- }
- }
-
- if (this.state.layer === 'block') {
- currentPageData = this.state.savedBlocks;
- }
-
- if (itemType != 'saved_blocks') {
- currentPageData = priceFilter == 'pro' ? currentPageData.filter(item => item.pro == true) : (priceFilter == 'free' ? currentPageData.filter(item => item.pro == false) : currentPageData);
- }
-
- if (this.state.isSearchEnable) {
- let filterData = currentPageData.filter(item => item.name.toLowerCase().indexOf(this.state.searchContext.toLowerCase()) != -1);
- return { pageCategories, selectedCategory, currentPageData: filterData }
- }
-
- return { pageCategories, selectedCategory, currentPageData }
- }
-
- deleteSavedBlock(index, blockID) {
- let { savedBlocks } = this.state;
- let requestFailedMsg = [];
- const options = {
- method: 'POST',
- url: qubely_admin.ajax + '?action=qubely_delete_saved_block&block_id=' + blockID,
- headers: { 'Content-Type': 'application/json' }
- }
- apiFetch(options).then(response => {
- if (response.success) {
- delete savedBlocks[index];
- this.setState({ savedBlocks });
- }
- }).catch(error => {
- requestFailedMsg.push(error.code + ' : ' + error.message);
- this.setState({
- requestFailedMsg
- });
- });
- }
-
- importLayoutBlock(itemData, isPro) {
-
- let { itemType } = this.state;
- const { insertBlocks, removeBlock, rowClientId } = this.props;
- let globalSettings, importWithGlobal = false;
-
- if (typeof itemData.global_settings !== 'undefined' && itemData.global_settings) {
- importWithGlobal = true;
- }
-
- if (!qubely_admin.pro_enable && isPro == true) {
- //
- } else {
- this.setState({ spinner: itemData.ID });
- if (importWithGlobal) {
- globalSettings = JSON.parse(itemData.global_settings)
- }
-
- let requestFailedMsg = [];
- const options = {
- method: 'POST',
- url: qubely_admin.ajax + '?action=qubely_get_single_' + itemType + '&' + itemType + '_id=' + itemData.ID,
- headers: { 'Content-Type': 'application/json' }
- }
- apiFetch(options).then(response => {
- if (response.success) {
- //import layout
- let pageData = parse(response.data.rawData);
-
- if (importWithGlobal) {
- let temp = JSON.stringify(pageData);
- if (typeof globalSettings.colors !== 'undefined' && globalSettings.colors.length > 0) {
- globalSettings.colors.forEach((color, index) => {
- temp = temp.replace(new RegExp(`var.--qubely-color-${index + 1}.`, "g"), color)
- })
- }
- if (typeof globalSettings.typography !== 'undefined' && globalSettings.typography.length > 0) {
- globalSettings.typography.forEach((typo, index) => {
- let tempValue = JSON.stringify({ ...typo.value, activeSource: "custom" })
- temp = temp.replace(new RegExp(`\"globalSource\":\"${index + 1}\"`, "g"), tempValue.slice(1, -1))
- })
- }
- if (qubely_admin.import_with_global_settings === 'always') {
- this.props.insertBlocks(pageData)
- ModalManager.close();
- } else if (qubely_admin.import_with_global_settings === 'never') {
- this.props.insertBlocks(JSON.parse(temp))
- ModalManager.close();
- } else if (qubely_admin.import_with_global_settings === 'manually' ||
- !qubely_admin.import_with_global_settings ||
- typeof qubely_admin.import_with_global_settings === 'undefined') {
- localStorage.setItem('changed', temp);
- localStorage.setItem('original', JSON.stringify(pageData));
- this.setState({ isOpen: true });
- }
- } else {
- insertBlocks(pageData);
- ModalManager.close();
- }
-
- if (rowClientId) {
- removeBlock(rowClientId);// remove row block
- }
- }
- }).catch(error => {
- requestFailedMsg.push(error.code + ' : ' + error.message);
- this.setState({
- requestFailedMsg
- });
- });
- }
- }
-
- importSavedBlock(block) {
- const { insertBlocks, removeBlock, rowClientId } = this.props;
- const blocks = parse(block.post_content);
- insertBlocks(blocks);
- if (rowClientId) {
- removeBlock(rowClientId);// remove row block
- }
- ModalManager.close();
- }
-
- _onlickBlocksTab() {
- this.setState({
- itemType: 'block',
- layer: 'single',
- parent_id: '',
- searchContext: '',
- priceFilter: ''
- })
- }
-
- _onlickLayoutsTab() {
-
- let { layoutData, layoutCategoryItems } = this.state;
-
- if (!layoutData) {
- this.setState({ loading: true });
- let requestFailedMsg = [];
-
- const options = {
- method: 'POST',
- url: qubely_admin.ajax + '?action=qubely_get_layouts',
- headers: { 'Content-Type': 'application/json' }
- }
- apiFetch(options).then(response => {
-
- if (response.success) {
-
- let layoutCategories = [],
- layoutData = {};
-
- response.data.map(item => {
-
- let itemKey = `item${item.parentID}`;
- if (layoutCategoryItems.hasOwnProperty(itemKey)) {
- layoutCategoryItems[itemKey] += 1;
- } else {
- layoutCategoryItems[itemKey] = 1;
- }
-
- if (item.category) {
- item.category.map(cat => {
- if (cat.slug in layoutData) {
- layoutData[cat.slug].push(item)
- } else {
- layoutData[cat.slug] = [];
- layoutData[cat.slug].push(item)
- }
- let index = -1;
- layoutCategories.forEach((change, i) => {
- if (cat.slug == change.slug) {
- index = i
- if (item.parentID == 0) {
- layoutCategories[i].count = layoutCategories[i].count + 1
- }
- }
- });
- if (index == -1) {
- layoutCategories.push({ name: cat.name, slug: cat.slug, count: item.parentID == 0 ? 1 : 0 })
- }
- })
- }
- });
-
- this.setState({
- loading: false,
- layoutCategories,
- layoutCategoryItems,
- layoutData
- });
-
- let node = document.querySelector('#modalContainer');
- node.addEventListener("scroll", this._lazyload, true);
- this._lazyload();
-
- } else {
- this.setState({
- loading: false,
- requestFailedMsg: response.data.message
- });
- }
-
- }).catch(error => {
- requestFailedMsg.push(error.code + ' : ' + error.message);
- this.setState({
- loading: false,
- requestFailedMsg
- });
- });
- }
-
- this.setState({
- itemType: 'layout',
- layer: 'multiple',
- parent_id: '',
- searchContext: '',
- priceFilter: ''
- })
- }
-
- _onlickSavedBlocksTab() {
- let requestFailedMsg = [];
- let { savedBlocks } = this.state;
- if (!savedBlocks) {
- this.setState({ loading: true });
- const options = {
- method: 'POST',
- url: qubely_admin.ajax + '?action=qubely_get_saved_block',
- headers: { 'Content-Type': 'application/json' }
- }
- apiFetch(options).then(response => {
- this.setState({
- loading: false,
- layer: 'block',
- itemType: 'saved_blocks',
- savedBlocks: response.data,
- searchContext: '',
- priceFilter: ''
- });
- }).catch(error => {
- requestFailedMsg.push(error.code + ' : ' + error.message);
- this.setState({
- loading: false,
- requestFailedMsg,
- searchContext: '',
- priceFilter: ''
- });
- });
- } else {
- this.setState({
- layer: 'block',
- itemType: 'saved_blocks',
- searchContext: '',
- priceFilter: ''
- });
- }
- }
-
- _onClickSingleEntity(template_id) {
- this.setState({
- layer: 'single',
- parent_id: template_id
- })
- }
-
- _lazyload() {
- let { lazyloadThrottleTimeout } = this.state;
- let lazyloadImages = document.querySelectorAll('img.lazy');
- if (lazyloadImages.length) {
- if (lazyloadThrottleTimeout) {
- this.setState({
- lazyloadThrottleTimeout: clearTimeout(lazyloadThrottleTimeout)
- });
- }
- let modalContainer = document.querySelector('#modalContainer');
-
- lazyloadThrottleTimeout = setTimeout(function () {
- let firstElement = document.querySelector('#first-single-item');
- if (firstElement) {
- let rect = firstElement.getBoundingClientRect(),
- scrollTop = window.pageYOffset || document.documentElement.scrollTop,
- scrollTopOffset = Math.abs(rect.top + scrollTop);
-
- lazyloadImages.forEach(function (img) {
- if (img.offsetTop < (modalContainer.clientHeight + scrollTopOffset)) {
- img.src = img.dataset.src;
- //img.classList.remove('lazy');
- }
- });
- }
-
- if (lazyloadImages.length == 0) {
- modalContainer.removeEventListener("scroll", this._lazyload);
- }
- }, 20);
- }
- }
-
- _OnChangeCategory(value) {
- if (this.state.itemType == 'block') {
- this.setState({ selectedBlockCategory: value });
- } else if (this.state.itemType == 'layout') {
- this.setState({ selectedLayoutCategory: value });
- }
- }
-
-
- _sliceCurrentData(data, n = 3, balanced = true) {
- if (n < 2)
- return [data];
-
- var len = data.length,
- out = [],
- i = 0,
- size;
-
- if (len % n === 0) {
- size = Math.floor(len / n);
- while (i < len) {
- out.push(data.slice(i, i += size));
- }
- } else if (balanced) {
- while (i < len) {
- size = Math.ceil((len - i) / n--);
- out.push(data.slice(i, i += size));
- }
- } else {
-
- n--;
- size = Math.floor(len / n);
- if (len % size === 0)
- size--;
- while (i < size * n) {
- out.push(data.slice(i, i += size));
- }
- out.push(data.slice(size * n));
-
- }
- return out;
- }
-
-
- _OnSearchTemplate(event) {
- let { isSearchEnable } = this.state;
- isSearchEnable = event.target.value === '' ? false : true
- this.setState({ isSearchEnable, searchContext: event.target.value })
- }
-
- _backgroundImage(url) {
- if (!url) {
- return qubely_admin.plugin + 'assets/img/qubely-medium.jpg';
- }
- return url;
- }
-
- _getDataLength(type, singleCount) {
- const { selectedBlockCategory, blockCategories, selectedLayoutCategory, itemType, blockData, layoutCategories } = this.state
- let count = 0;
- if (type == 'heading') {
- if (itemType == 'block') {
- if (selectedBlockCategory == '') {
- count = singleCount
- //blockCategories.forEach(function (data) { count = count + data.count; });
- } else {
- blockCategories.forEach(function (data) {
- if (data.slug == selectedBlockCategory) {
- count = data.count
- }
- });
- }
- return count;
- } else {
- if (this.state.layer == 'multiple') {
- if (selectedLayoutCategory == '') {
- //layoutCategories.forEach(function (data) { count = count + data.count; });
- count = singleCount
- } else {
- layoutCategories.forEach(function (data) {
- if (data.slug == selectedLayoutCategory) {
- count = data.count
- }
- });
- }
- return count
- } else {
- return singleCount
- }
- }
- } else {
- if (itemType == 'block') {
- Object.keys(blockData).forEach(function (key) { count = count + blockData[key].length; });
- return count
- } else {
- layoutCategories.forEach(function (data) { count = count + data.count; });
- return count
- }
- }
- }
-
- _changePriceFilter(val = '') {
- this.setState({
- priceFilter: val ? val : ''
- })
- }
-
-
- render() {
- let { pageCategories, currentPageData } = this.getCurrentPageData();
- let types = qubely_admin.pro_enable ? 'active' : 'inactive';
- let {
- itemType,
- blockData,
- layer,
- isOpen,
- rememberChoice,
- selectedBlockCategory,
- selectedLayoutCategory
- } = this.state;
-
- const closeModal = () => this.setState({ isOpen: false });
-
- const importBlocks = (actionType) => {
- let type = 'changed';
- if (actionType === 'yes') {
- type = 'original';
- }
- this.props.insertBlocks(JSON.parse(localStorage.getItem(type)));
- ModalManager.close();
- if ((qubely_admin.import_with_global_settings === "manually" ||
- !qubely_admin.import_with_global_settings ||
- typeof qubely_admin.import_with_global_settings === 'undefined') && rememberChoice) {
- $.post({
- url: qubely_urls.ajax,
- data: {
- action: 'update_qubely_options',
- _wpnonce: qubely_urls.nonce,
- options: {
- 'import_with_global_settings': actionType === 'yes' ? 'always' : 'never',
- }
- }
- }).success(function (response) {
- qubely_admin['import_with_global_settings'] = actionType === 'yes' ? 'always' : 'never'
- }).fail(function (error) {
- console.log("error : ", error);
- });
- }
- }
- return (
-
-
-
-
-
-
-
-
- this._onlickBlocksTab()}> {__('Sections')}
- this._onlickLayoutsTab()}> {__('Starter Packs')}
- this._onlickSavedBlocksTab()}> {__('Saved')}
- { ModalManager.close() }} >
-
-
-
-
-
- {
- (!(itemType == 'layout' && layer == 'single') && !(itemType == 'saved_blocks') ||
- (this.state.parent_id && layer === 'single')) &&
Categories
- }
- {
- ((!this.state.parent_id && layer != 'block') || (this.state.parent_id && layer === 'single')) &&
-
- this._OnChangeCategory('')}>
- {__('All ')}{itemType == 'block' ? 'Sections' : 'Starter Packs'}
-
- {this._getDataLength('category', currentPageData.length)}
-
-
- {
- pageCategories.map((data, index) => (
- this._OnChangeCategory(data.slug)}
- key={index}>
- {data.name}
-
- {
- itemType == 'block' ? blockData[data.slug] ? blockData[data.slug].length : 0 : data.count
- }
-
-
- ))
- }
-
- }
-
-
-
- {itemType != 'saved_blocks' &&
-
- {(this.state.itemType == 'layout' && this.state.layer == 'single') &&
- this.setState({ layer: 'multiple', parent_id: '' })}>
- }
- {this._getDataLength(itemType === 'layout' && selectedLayoutCategory === '' && layer !== 'single' ? 'category' : 'heading', currentPageData.length)}
- {itemType == 'block' ? __('Sections') : this.state.layer == 'single' ? __('Layouts') : __('Starter Packs')}
-
-
-
this._changePriceFilter()} className={'' == this.state.priceFilter ? 'active' : ''}>{__('All')}
-
this._changePriceFilter('free')} className={'free' == this.state.priceFilter ? 'active' : ''}>{__('Free')}
-
this._changePriceFilter('pro')} className={'pro' == this.state.priceFilter ? 'active' : ''}>
-
-
-
}
-
- {!this.state.loading ?
-
-
- {/*
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: false,
+ blockCategories: [],
+ layoutCategories: [],
+ layoutCategoryItems: {},
+ selectedBlockCategory: "",
+ selectedLayoutCategory: "",
+ blockData: "",
+ layoutData: "",
+ savedBlocks: "",
+ itemType: "layout",
+ layer: "single",
+ searchContext: "",
+ isSearchEnable: false,
+ notFoundMessage: "Sorry, we couldn't find the match.",
+ requestFailedMsg: "",
+ spinner: false,
+ lazyloadThrottleTimeout: 0,
+ priceFilter: "",
+ isOpen: false,
+ rememberChoice: false,
+ };
+ this._lazyload = this._lazyload.bind(this);
+ }
+
+ componentDidMount() {
+ this._onlickLayoutsTab();
+ return;
+ }
+
+ componentDidUpdate() {
+ if (this.state.layer === "single") {
+ this._lazyload();
+ }
+ }
+
+ componentWillUnmount() {
+ let node = document.querySelector("#modalContainer");
+ node && node.removeEventListener("scroll", this._lazyload);
+ }
+
+ getCurrentPageData() {
+ let { itemType, priceFilter } = this.state;
+ let pageData = itemType == "block" ? this.state.blockData : this.state.layoutData;
+ let pageCategories = itemType == "block" ? this.state.blockCategories : this.state.layoutCategories;
+ let selectedCategory =
+ itemType == "block" ? this.state.selectedBlockCategory : this.state.selectedLayoutCategory;
+ let currentPageData = [];
+ let tempDataID = [];
+
+ if (this.state.layer === "single") {
+ if (this.state.parent_id) {
+ //if click from multiple entry
+ for (let key in pageData) {
+ pageData[key].map((value) => {
+ if (
+ value.parentID &&
+ this.state.parent_id === value.parentID &&
+ !(tempDataID.indexOf(value.ID) > -1)
+ ) {
+ currentPageData.push(value);
+ tempDataID.push(value.ID);
+ }
+ });
+ }
+ } else {
+ if (selectedCategory) {
+ pageData[selectedCategory].map((value) => {
+ if (itemType == "block") {
+ if (!(tempDataID.indexOf(value.ID) > -1)) {
+ currentPageData.push(value);
+ tempDataID.push(value.ID);
+ }
+ } else {
+ if (value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
+ currentPageData.push(value);
+ tempDataID.push(value.ID);
+ }
+ }
+ });
+ } else {
+ for (let key in pageData) {
+ Array.isArray(pageData[key]) &&
+ pageData[key].map((value) => {
+ if (itemType == "block") {
+ if (!(tempDataID.indexOf(value.ID) > -1)) {
+ currentPageData.push(value);
+ tempDataID.push(value.ID);
+ }
+ } else {
+ if (value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
+ currentPageData.push(value);
+ tempDataID.push(value.ID);
+ }
+ }
+ });
+ }
+ }
+ }
+ }
+
+ if (this.state.layer === "multiple") {
+ if (selectedCategory) {
+ let itemCount = 0;
+ pageData[selectedCategory].map((value) => {
+ if (!value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
+ let found = value.category.find((item) => item.slug == selectedCategory);
+ if (found) {
+ tempDataID.push(value.ID);
+ currentPageData.push(value);
+ }
+ }
+ });
+ } else {
+ for (let key in pageData) {
+ if (typeof pageData[key] === "object") {
+ pageData[key].map((value) => {
+ if (!value.parentID && !(tempDataID.indexOf(value.ID) > -1)) {
+ tempDataID.push(value.ID);
+ currentPageData.push(value);
+ }
+ });
+ }
+ }
+ }
+ }
+
+ if (this.state.layer === "block") {
+ currentPageData = this.state.savedBlocks;
+ }
+
+ if (itemType != "saved_blocks") {
+ currentPageData =
+ priceFilter == "pro"
+ ? currentPageData.filter((item) => item.pro == true)
+ : priceFilter == "free"
+ ? currentPageData.filter((item) => item.pro == false)
+ : currentPageData;
+ }
+
+ if (this.state.isSearchEnable) {
+ let filterData = currentPageData.filter(
+ (item) => item.name.toLowerCase().indexOf(this.state.searchContext.toLowerCase()) != -1
+ );
+ return { pageCategories, selectedCategory, currentPageData: filterData };
+ }
+
+ return { pageCategories, selectedCategory, currentPageData };
+ }
+
+ deleteSavedBlock(index, blockID) {
+ let { savedBlocks } = this.state;
+ let requestFailedMsg = [];
+ let security = qubely_urls.nonce;
+ let currentUserId = qubely_admin.current_user_id;
+ const options = {
+ method: "POST",
+ url:
+ qubely_admin.ajax +
+ "?action=qubely_delete_saved_block&block_id=" +
+ blockID +
+ "&security=" +
+ security +
+ "&user_id=" +
+ currentUserId,
+ headers: { "Content-Type": "application/json" },
+ };
+ apiFetch(options)
+ .then((response) => {
+ if (response.success) {
+ delete savedBlocks[index];
+ this.setState({ savedBlocks });
+ }
+ })
+ .catch((error) => {
+ requestFailedMsg.push(error.code + " : " + error.message);
+ this.setState({
+ requestFailedMsg,
+ });
+ });
+ }
+
+ importLayoutBlock(itemData, isPro) {
+ let { itemType } = this.state;
+ const { insertBlocks, removeBlock, rowClientId } = this.props;
+ let globalSettings,
+ importWithGlobal = false;
+
+ if (typeof itemData.global_settings !== "undefined" && itemData.global_settings) {
+ importWithGlobal = true;
+ }
+
+ if (!qubely_admin.pro_enable && isPro == true) {
+ //
+ } else {
+ this.setState({ spinner: itemData.ID });
+ if (importWithGlobal) {
+ globalSettings = JSON.parse(itemData.global_settings);
+ }
+
+ let requestFailedMsg = [];
+ let security = qubely_urls.nonce;
+ let currentUserId = qubely_admin.current_user_id;
+ const options = {
+ method: "POST",
+ url:
+ qubely_admin.ajax +
+ "?action=qubely_get_single_" +
+ itemType +
+ "&" +
+ itemType +
+ "_id=" +
+ itemData.ID +
+ "&security=" +
+ security +
+ "&user_id=" +
+ currentUserId,
+ headers: { "Content-Type": "application/json" },
+ };
+ apiFetch(options)
+ .then((response) => {
+ if (response.success) {
+ //import layout
+ let pageData = parse(response.data.rawData);
+
+ if (importWithGlobal) {
+ let temp = JSON.stringify(pageData);
+ if (typeof globalSettings.colors !== "undefined" && globalSettings.colors.length > 0) {
+ globalSettings.colors.forEach((color, index) => {
+ temp = temp.replace(new RegExp(`var.--qubely-color-${index + 1}.`, "g"), color);
+ });
+ }
+ if (
+ typeof globalSettings.typography !== "undefined" &&
+ globalSettings.typography.length > 0
+ ) {
+ globalSettings.typography.forEach((typo, index) => {
+ let tempValue = JSON.stringify({ ...typo.value, activeSource: "custom" });
+ temp = temp.replace(
+ new RegExp(`\"globalSource\":\"${index + 1}\"`, "g"),
+ tempValue.slice(1, -1)
+ );
+ });
+ }
+ if (qubely_admin.import_with_global_settings === "always") {
+ this.props.insertBlocks(pageData);
+ ModalManager.close();
+ } else if (qubely_admin.import_with_global_settings === "never") {
+ this.props.insertBlocks(JSON.parse(temp));
+ ModalManager.close();
+ } else if (
+ qubely_admin.import_with_global_settings === "manually" ||
+ !qubely_admin.import_with_global_settings ||
+ typeof qubely_admin.import_with_global_settings === "undefined"
+ ) {
+ localStorage.setItem("changed", temp);
+ localStorage.setItem("original", JSON.stringify(pageData));
+ this.setState({ isOpen: true });
+ }
+ } else {
+ insertBlocks(pageData);
+ ModalManager.close();
+ }
+
+ if (rowClientId) {
+ removeBlock(rowClientId); // remove row block
+ }
+ }
+ })
+ .catch((error) => {
+ requestFailedMsg.push(error.code + " : " + error.message);
+ this.setState({
+ requestFailedMsg,
+ });
+ });
+ }
+ }
+
+ getSectionsList() {
+ this.setState({ loading: true });
+ let requestFailedMsg = [];
+ let security = qubely_urls.nonce;
+ let currentUserId = qubely_admin.current_user_id;
+
+ const options = {
+ method: "POST",
+ url:
+ qubely_admin.ajax +
+ "?action=qubely_get_sections" +
+ "&security=" +
+ security +
+ "&user_id=" +
+ currentUserId,
+ headers: { "Content-Type": "application/json" },
+ };
+ apiFetch(options)
+ .then((response) => {
+ if (response.success) {
+ let blockCategories = [],
+ blockData = {};
+
+ response.data.map((item) => {
+ if (item.category) {
+ item.category.map((cat) => {
+ if (cat.slug in blockData) {
+ blockData[cat.slug].push(item);
+ } else {
+ blockData[cat.slug] = [];
+ blockData[cat.slug].push(item);
+ }
+ let index = -1;
+ blockCategories.forEach((change, i) => {
+ if (cat.slug == change.slug) {
+ index = i;
+ blockCategories[i].count = blockCategories[i].count + 1;
+ }
+ });
+ if (index === -1) {
+ blockCategories.push({ name: cat.name, slug: cat.slug, count: 1 });
+ }
+ });
+ }
+ });
+
+ this.setState({
+ loading: false,
+ blockCategories,
+ blockData,
+ });
+
+ let node = document.querySelector("#modalContainer");
+ node.addEventListener("scroll", this._lazyload, true);
+ this._lazyload();
+ } else {
+ this.setState({
+ loading: false,
+ requestFailedMsg: response.data.message,
+ });
+ }
+ })
+ .catch((error) => {
+ requestFailedMsg.push(error.code + " : " + error.message);
+ this.setState({
+ loading: false,
+ requestFailedMsg,
+ });
+ });
+ }
+
+ importSavedBlock(block) {
+ const { insertBlocks, removeBlock, rowClientId } = this.props;
+ const blocks = parse(block.post_content);
+ insertBlocks(blocks);
+ if (rowClientId) {
+ removeBlock(rowClientId); // remove row block
+ }
+ ModalManager.close();
+ }
+
+ _onlickBlocksTab() {
+ let { blockData } = this.state;
+ if (!blockData) {
+ this.getSectionsList();
+ }
+ this.setState({
+ itemType: "block",
+ layer: "single",
+ parent_id: "",
+ searchContext: "",
+ priceFilter: "",
+ });
+ }
+
+ _onlickLayoutsTab() {
+ let { layoutData, layoutCategoryItems } = this.state;
+
+ if (!layoutData) {
+ this.setState({ loading: true });
+ let requestFailedMsg = [];
+ let security = qubely_urls.nonce;
+ let currentUserId = qubely_admin.current_user_id;
+
+ const options = {
+ method: "POST",
+ url:
+ qubely_admin.ajax +
+ "?action=qubely_get_layouts" +
+ "&security=" +
+ security +
+ "&user_id=" +
+ currentUserId,
+ headers: { "Content-Type": "application/json" },
+ };
+ apiFetch(options)
+ .then((response) => {
+ if (response.success) {
+ let layoutCategories = [],
+ layoutData = {};
+
+ response.data.map((item) => {
+ let itemKey = `item${item.parentID}`;
+ if (layoutCategoryItems.hasOwnProperty(itemKey)) {
+ layoutCategoryItems[itemKey] += 1;
+ } else {
+ layoutCategoryItems[itemKey] = 1;
+ }
+
+ if (item.category) {
+ item.category.map((cat) => {
+ if (cat.slug in layoutData) {
+ layoutData[cat.slug].push(item);
+ } else {
+ layoutData[cat.slug] = [];
+ layoutData[cat.slug].push(item);
+ }
+ let index = -1;
+ layoutCategories.forEach((change, i) => {
+ if (cat.slug == change.slug) {
+ index = i;
+ if (item.parentID == 0) {
+ layoutCategories[i].count = layoutCategories[i].count + 1;
+ }
+ }
+ });
+ if (index == -1) {
+ layoutCategories.push({
+ name: cat.name,
+ slug: cat.slug,
+ count: item.parentID == 0 ? 1 : 0,
+ });
+ }
+ });
+ }
+ });
+
+ this.setState({
+ loading: false,
+ layoutCategories,
+ layoutCategoryItems,
+ layoutData,
+ });
+
+ let node = document.querySelector("#modalContainer");
+ node.addEventListener("scroll", this._lazyload, true);
+ this._lazyload();
+ } else {
+ this.setState({
+ loading: false,
+ requestFailedMsg: response.data.message,
+ });
+ }
+ })
+ .catch((error) => {
+ requestFailedMsg.push(error.code + " : " + error.message);
+ this.setState({
+ loading: false,
+ requestFailedMsg,
+ });
+ });
+ }
+
+ this.setState({
+ itemType: "layout",
+ layer: "multiple",
+ parent_id: "",
+ searchContext: "",
+ priceFilter: "",
+ });
+ }
+
+ _onlickSavedBlocksTab() {
+ let requestFailedMsg = [];
+ let { savedBlocks } = this.state;
+ let security = qubely_urls.nonce;
+ let currentUserId = qubely_admin.current_user_id;
+
+ if (!savedBlocks) {
+ this.setState({ loading: true });
+ const options = {
+ method: "POST",
+ url:
+ qubely_admin.ajax +
+ "?action=qubely_get_saved_block" +
+ "&security=" +
+ security +
+ "&user_id=" +
+ currentUserId,
+ headers: { "Content-Type": "application/json" },
+ };
+ apiFetch(options)
+ .then((response) => {
+ this.setState({
+ loading: false,
+ layer: "block",
+ itemType: "saved_blocks",
+ savedBlocks: response.data,
+ searchContext: "",
+ priceFilter: "",
+ });
+ })
+ .catch((error) => {
+ requestFailedMsg.push(error.code + " : " + error.message);
+ this.setState({
+ loading: false,
+ requestFailedMsg,
+ searchContext: "",
+ priceFilter: "",
+ });
+ });
+ } else {
+ this.setState({
+ layer: "block",
+ itemType: "saved_blocks",
+ searchContext: "",
+ priceFilter: "",
+ });
+ }
+ }
+
+ _onClickSingleEntity(template_id) {
+ this.setState({
+ layer: "single",
+ parent_id: template_id,
+ });
+ }
+
+ _lazyload() {
+ let { lazyloadThrottleTimeout } = this.state;
+ let lazyloadImages = document.querySelectorAll("img.lazy");
+ if (lazyloadImages.length) {
+ if (lazyloadThrottleTimeout) {
+ this.setState({
+ lazyloadThrottleTimeout: clearTimeout(lazyloadThrottleTimeout),
+ });
+ }
+ let modalContainer = document.querySelector("#modalContainer");
+
+ lazyloadThrottleTimeout = setTimeout(function () {
+ let firstElement = document.querySelector("#first-single-item");
+ if (firstElement) {
+ let rect = firstElement.getBoundingClientRect(),
+ scrollTop = window.pageYOffset || document.documentElement.scrollTop,
+ scrollTopOffset = Math.abs(rect.top + scrollTop);
+
+ lazyloadImages.forEach(function (img) {
+ if (img.offsetTop < modalContainer.clientHeight + scrollTopOffset) {
+ img.src = img.dataset.src;
+ //img.classList.remove('lazy');
+ }
+ });
+ }
+
+ if (lazyloadImages.length == 0) {
+ modalContainer.removeEventListener("scroll", this._lazyload);
+ }
+ }, 20);
+ }
+ }
+
+ _OnChangeCategory(value) {
+ if (this.state.itemType == "block") {
+ this.setState({ selectedBlockCategory: value });
+ } else if (this.state.itemType == "layout") {
+ this.setState({ selectedLayoutCategory: value });
+ }
+ }
+
+ _sliceCurrentData(data, n = 3, balanced = true) {
+ if (n < 2) return [data];
+
+ var len = data.length,
+ out = [],
+ i = 0,
+ size;
+
+ if (len % n === 0) {
+ size = Math.floor(len / n);
+ while (i < len) {
+ out.push(data.slice(i, (i += size)));
+ }
+ } else if (balanced) {
+ while (i < len) {
+ size = Math.ceil((len - i) / n--);
+ out.push(data.slice(i, (i += size)));
+ }
+ } else {
+ n--;
+ size = Math.floor(len / n);
+ if (len % size === 0) size--;
+ while (i < size * n) {
+ out.push(data.slice(i, (i += size)));
+ }
+ out.push(data.slice(size * n));
+ }
+ return out;
+ }
+
+ _OnSearchTemplate(event) {
+ let { isSearchEnable } = this.state;
+ isSearchEnable = event.target.value === "" ? false : true;
+ this.setState({ isSearchEnable, searchContext: event.target.value });
+ }
+
+ _backgroundImage(url) {
+ if (!url) {
+ return qubely_admin.plugin + "assets/img/qubely-medium.jpg";
+ }
+ return url;
+ }
+
+ _getDataLength(type, singleCount) {
+ const {
+ selectedBlockCategory,
+ blockCategories,
+ selectedLayoutCategory,
+ itemType,
+ blockData,
+ layoutCategories,
+ } = this.state;
+ let count = 0;
+ if (type == "heading") {
+ if (itemType == "block") {
+ if (selectedBlockCategory == "") {
+ count = singleCount;
+ //blockCategories.forEach(function (data) { count = count + data.count; });
+ } else {
+ blockCategories.forEach(function (data) {
+ if (data.slug == selectedBlockCategory) {
+ count = data.count;
+ }
+ });
+ }
+ return count;
+ } else {
+ if (this.state.layer == "multiple") {
+ if (selectedLayoutCategory == "") {
+ //layoutCategories.forEach(function (data) { count = count + data.count; });
+ count = singleCount;
+ } else {
+ layoutCategories.forEach(function (data) {
+ if (data.slug == selectedLayoutCategory) {
+ count = data.count;
+ }
+ });
+ }
+ return count;
+ } else {
+ return singleCount;
+ }
+ }
+ } else {
+ if (itemType == "block") {
+ Object.keys(blockData).forEach(function (key) {
+ count = count + blockData[key].length;
+ });
+ return count;
+ } else {
+ layoutCategories.forEach(function (data) {
+ count = count + data.count;
+ });
+ return count;
+ }
+ }
+ }
+
+ _changePriceFilter(val = "") {
+ this.setState({
+ priceFilter: val ? val : "",
+ });
+ }
+
+ render() {
+ let { pageCategories, currentPageData } = this.getCurrentPageData();
+ let types = qubely_admin.pro_enable ? "active" : "inactive";
+ let { itemType, blockData, layer, isOpen, rememberChoice, selectedBlockCategory, selectedLayoutCategory } =
+ this.state;
+
+ const closeModal = () => this.setState({ isOpen: false });
+
+ const importBlocks = (actionType) => {
+ let type = "changed";
+ if (actionType === "yes") {
+ type = "original";
+ }
+ this.props.insertBlocks(JSON.parse(localStorage.getItem(type)));
+ ModalManager.close();
+ if (
+ (qubely_admin.import_with_global_settings === "manually" ||
+ !qubely_admin.import_with_global_settings ||
+ typeof qubely_admin.import_with_global_settings === "undefined") &&
+ rememberChoice
+ ) {
+ $.post({
+ url: qubely_urls.ajax,
+ data: {
+ action: "update_qubely_options",
+ _wpnonce: qubely_urls.nonce,
+ options: {
+ import_with_global_settings: actionType === "yes" ? "always" : "never",
+ },
+ },
+ })
+ .success(function (response) {
+ qubely_admin["import_with_global_settings"] = actionType === "yes" ? "always" : "never";
+ })
+ .fail(function (error) {
+ console.log("error : ", error);
+ });
+ }
+ };
+ return (
+
+
+
+
+
+
+
+ this._onlickLayoutsTab()}
+ >
+ {" "}
+ {__("Starter Packs")}{" "}
+
+ this._onlickBlocksTab()}
+ >
+ {" "}
+ {__("Sections")}{" "}
+
+ this._onlickSavedBlocksTab()}
+ >
+ {" "}
+ {__("Saved")}{" "}
+
+ {
+ ModalManager.close();
+ }}
+ >
+
+
+
+
+ {((!(itemType == "layout" && layer == "single") && !(itemType == "saved_blocks")) ||
+ (this.state.parent_id && layer === "single")) &&
Categories }
+ {((!this.state.parent_id && layer != "block") ||
+ (this.state.parent_id && layer === "single")) && (
+
+ this._OnChangeCategory("")}
+ >
+ {__("All ")}
+ {itemType == "block" ? "Sections" : "Starter Packs"}
+ {this._getDataLength("category", currentPageData.length)}
+
+ {pageCategories.map((data, index) => (
+ this._OnChangeCategory(data.slug)}
+ key={index}
+ >
+ {data.name}
+
+ {itemType == "block"
+ ? blockData[data.slug]
+ ? blockData[data.slug].length
+ : 0
+ : data.count}
+
+
+ ))}
+
+ )}
+
+
+ {itemType != "saved_blocks" && (
+
+
+ {this.state.itemType == "layout" && this.state.layer == "single" && (
+ this.setState({ layer: "multiple", parent_id: "" })}
+ >
+
+ )}
+ {this._getDataLength(
+ itemType === "layout" && selectedLayoutCategory === "" && layer !== "single"
+ ? "category"
+ : "heading",
+ currentPageData.length
+ )}
+
+ {itemType == "block"
+ ? __("Sections")
+ : this.state.layer == "single"
+ ? __("Layouts")
+ : __("Starter Packs")}
+
+
+
this._changePriceFilter()}
+ className={"" == this.state.priceFilter ? "active" : ""}
+ >
+ {__("All")}
+
+
this._changePriceFilter("free")}
+ className={"free" == this.state.priceFilter ? "active" : ""}
+ >
+ {__("Free")}
+
+
this._changePriceFilter("pro")}
+ className={"pro" == this.state.priceFilter ? "active" : ""}
+ >
+
+
+
+ )}
+
+ {!this.state.loading ? (
+
+
+ {/*
( this.state.itemType == 'layout' ) &&
@@ -734,141 +893,162 @@ class PageListModal extends Component {
*/}
-
- {
- this.state.layer == 'single' && this._sliceCurrentData(currentPageData).map(item => (
-
- {
- item.map((data, index) =>
-
- ))
-
- }
-
- {this.state.layer == 'multiple' &&
- currentPageData.map((data, index) =>
-
- )}
-
- {(this.state.layer == 'block' && currentPageData.length != 0) &&
-
- }
-
- {this.state.layer == 'block' &&
- currentPageData.map((data, index) =>
-
- )}
-
- {(currentPageData.length === 0) &&
-
-
{this.state.notFoundMessage}
-
- }
-
-
-
-
- :
-
-
- {this.state.requestFailedMsg ?
- this.state.requestFailedMsg.map((error, index) =>
{error}
)
- :
-
-
- }
- {/*
+ {this.state.layer == "single" &&
+ this._sliceCurrentData(currentPageData).map((item) => (
+
+ {item.map((data, index) => (
+
+ ))}
+
+ {this.state.layer == "multiple" &&
+ currentPageData.map((data, index) => (
+
+
+ {__("Title")}
+
+
+
+ {__("Publish")}{" "}
+
+
+
+
+ {" "}
+ {this.state.notFoundMessage}{" "}
+
+
+ )}
+
+
+
+ ) : (
+
+
+ {this.state.requestFailedMsg ? (
+ this.state.requestFailedMsg.map((error, index) =>
{error}
)
+ ) : (
+
+
+ )}
+ {/*
{ ModalManager.close() } }
>
*/}
-
-
- }
-
- {
- (isOpen && (qubely_admin.import_with_global_settings === "manually" ||
- !qubely_admin.import_with_global_settings ||
- typeof qubely_admin.import_with_global_settings === 'undefined')) && (
-
-
-
{__("Apply global styling while importing this?")}
-
-
- {__("Don't ask me again")}
-
-
-
{ importBlocks('no') }}>{__('No')}
-
{ importBlocks('yes') }}>{__('Yes')}
-
-
-
- )
- }
-
- )
- }
+
+
+ )}
+
+
+ {isOpen &&
+ (qubely_admin.import_with_global_settings === "manually" ||
+ !qubely_admin.import_with_global_settings ||
+ typeof qubely_admin.import_with_global_settings === "undefined") && (
+
+
+
{__("Apply global styling while importing this?")}
+
+
+
+ {__("Don't ask me again")}
+
+
+
+
{
+ importBlocks("no");
+ }}
+ >
+ {__("No")}
+
+
{
+ importBlocks("yes");
+ }}
+ >
+ {__("Yes")}
+
+
+
+
+ )}
+
+ );
+ }
}
-
export default compose([
- withDispatch((dispatch) => {
- const {
- insertBlocks,
- removeBlock
- } = dispatch('core/block-editor');
-
- return {
- insertBlocks,
- removeBlock
- };
- }),
-])(PageListModal);
\ No newline at end of file
+ withDispatch((dispatch) => {
+ const { insertBlocks, removeBlock } = dispatch("core/block-editor");
+
+ return {
+ insertBlocks,
+ removeBlock,
+ };
+ }),
+])(PageListModal);
diff --git a/assets/reactjs/src/helpers/ParseCss.js b/assets/reactjs/src/helpers/ParseCss.js
index f16204a2..d4c724b6 100644
--- a/assets/reactjs/src/helpers/ParseCss.js
+++ b/assets/reactjs/src/helpers/ParseCss.js
@@ -1,159 +1,186 @@
-import { getGlobalSettings } from '../helpers/globalCSS';
-const { select } = wp.data
-const { CssGenerator: { CssGenerator } } = wp.qubelyComponents
+import { getGlobalSettings } from "../helpers/globalCSS";
+const { select } = wp.data;
+const {
+ CssGenerator: { CssGenerator },
+} = wp.qubelyComponents;
-const endpoint = '/qubely/v1/save_block_css';
+const endpoint = "/qubely/v1/save_block_css";
const API_fetch = async (post_id, block_css, is_remain, available_blocks, isPreviewing = false) => {
- const json = JSON.stringify(block_css.interaction)
- try {
- await wp.apiFetch({
- path: endpoint,
- method: 'POST',
- data: {
- block_css: block_css.css,
- interaction: json,
- post_id,
- is_remain,
- available_blocks,
- isPreviewing
- }
- });
- } catch (e) {
- console.log('Can\'t save css:', e);
- }
-}
+ const json = JSON.stringify(block_css.interaction);
+ let d = {
+ block_css: trimCssString(block_css.css),
+ interaction: json,
+ post_id,
+ is_remain,
+ available_blocks,
+ isPreviewing,
+ };
+
+ try {
+ await wp.apiFetch({
+ path: endpoint,
+ method: "POST",
+ data: d,
+ });
+ } catch (e) {
+ console.log("Can't save css:", e);
+ }
+};
+
+export const trimCssString = (str) => {
+ str = str.replace(new RegExp(";;", "g"), ";");
+ return str;
+};
/**
* Parse css for stylesheet
* Create css file for each post. Call api for update css file each time hit save button
*/
-let __CSS = ''
-let interaction = {}
+let __CSS = "";
+let interaction = {};
function innerBlocks(blocks, type = false) {
- if (type == true) {
- __CSS = ''
- interaction = {}
- type = false
- }
-
- blocks.map(row => {
- const { attributes, name } = row
- const blockName = name.split('/')
- if (blockName[0] === 'qubely' && attributes.uniqueId) {
- __CSS += CssGenerator(attributes, blockName[1], attributes.uniqueId, true)
- if (typeof attributes['interaction'] !== 'undefined') {
- const { while_scroll_into_view, mouse_movement } = attributes.interaction
-
- if (typeof while_scroll_into_view !== 'undefined' && while_scroll_into_view.enable === true) {
- let { action_list } = while_scroll_into_view
- action_list = action_list.sort((a, b) => a.keyframe - b.keyframe)
- const interactionObj = {
- blockId: attributes.uniqueId,
- enable_mobile: typeof while_scroll_into_view.enable_mobile === 'undefined' ? false : while_scroll_into_view.enable_mobile,
- enable_tablet: typeof while_scroll_into_view.enable_tablet === 'undefined' ? false : while_scroll_into_view.enable_tablet,
- animation: action_list
- }
- let origin = {
- x_offset: typeof while_scroll_into_view.transform_origin_x === 'undefined' ? 'center' : while_scroll_into_view.transform_origin_x,
- y_offset: typeof while_scroll_into_view.transform_origin_y === 'undefined' ? 'center' : while_scroll_into_view.transform_origin_y,
- }
- interactionObj.origin = origin
- if (typeof interaction.while_scroll_view === 'undefined') {
- interaction.while_scroll_view = [interactionObj]
- } else {
- interaction.while_scroll_view.push(interactionObj)
- }
- // blocks_flag.interaction = true
- }
- if (typeof mouse_movement !== 'undefined' && mouse_movement.enable === true) {
- const interactionObj = {
- blockId: attributes.uniqueId,
- enable_mobile: typeof while_scroll_into_view.enable_mobile === 'undefined' ? false : while_scroll_into_view.enable_mobile,
- enable_tablet: typeof while_scroll_into_view.enable_tablet === 'undefined' ? false : while_scroll_into_view.enable_tablet,
- animation: mouse_movement,
- }
- if (typeof interaction.mouse_movement === 'undefined') {
- interaction.mouse_movement = [interactionObj]
- } else {
- interaction.mouse_movement.push(interactionObj)
- }
- }
- }
- }
-
- if (row.innerBlocks && (row.innerBlocks).length > 0) {
- innerBlocks(row.innerBlocks)
- }
- })
- return { css: __CSS, interaction }
+ if (type == true) {
+ __CSS = "";
+ interaction = {};
+ type = false;
+ }
+
+ blocks.map((row) => {
+ const { attributes, name } = row;
+ const blockName = name.split("/");
+ if (blockName[0] === "qubely" && attributes.uniqueId) {
+ __CSS += CssGenerator(attributes, blockName[1], attributes.uniqueId, true);
+ if (typeof attributes["interaction"] !== "undefined") {
+ const { while_scroll_into_view, mouse_movement } = attributes.interaction;
+
+ if (typeof while_scroll_into_view !== "undefined" && while_scroll_into_view.enable === true) {
+ let { action_list } = while_scroll_into_view;
+ action_list = action_list.sort((a, b) => a.keyframe - b.keyframe);
+ const interactionObj = {
+ blockId: attributes.uniqueId,
+ enable_mobile:
+ typeof while_scroll_into_view.enable_mobile === "undefined"
+ ? false
+ : while_scroll_into_view.enable_mobile,
+ enable_tablet:
+ typeof while_scroll_into_view.enable_tablet === "undefined"
+ ? false
+ : while_scroll_into_view.enable_tablet,
+ animation: action_list,
+ };
+ let origin = {
+ x_offset:
+ typeof while_scroll_into_view.transform_origin_x === "undefined"
+ ? "center"
+ : while_scroll_into_view.transform_origin_x,
+ y_offset:
+ typeof while_scroll_into_view.transform_origin_y === "undefined"
+ ? "center"
+ : while_scroll_into_view.transform_origin_y,
+ };
+ interactionObj.origin = origin;
+ if (typeof interaction.while_scroll_view === "undefined") {
+ interaction.while_scroll_view = [interactionObj];
+ } else {
+ interaction.while_scroll_view.push(interactionObj);
+ }
+ // blocks_flag.interaction = true
+ }
+ if (typeof mouse_movement !== "undefined" && mouse_movement.enable === true) {
+ const interactionObj = {
+ blockId: attributes.uniqueId,
+ enable_mobile:
+ typeof while_scroll_into_view.enable_mobile === "undefined"
+ ? false
+ : while_scroll_into_view.enable_mobile,
+ enable_tablet:
+ typeof while_scroll_into_view.enable_tablet === "undefined"
+ ? false
+ : while_scroll_into_view.enable_tablet,
+ animation: mouse_movement,
+ };
+ if (typeof interaction.mouse_movement === "undefined") {
+ interaction.mouse_movement = [interactionObj];
+ } else {
+ interaction.mouse_movement.push(interactionObj);
+ }
+ }
+ }
+ }
+
+ if (row.innerBlocks && row.innerBlocks.length > 0) {
+ innerBlocks(row.innerBlocks);
+ }
+ });
+ return { css: __CSS, interaction };
}
function isQubelyBlock(blocks) {
- let isQubely = false;
- blocks.forEach(block => {
- const {
- name,
- innerBlocks = []
- } = block;
- const [blockType, blockName] = name.split('/');
- if (blockType === 'qubely') {
- isQubely = true;
- }
- if (!isQubely && innerBlocks.length > 0) {
- isQubely = isQubelyBlock(innerBlocks);
- }
- });
-
- return isQubely;
+ let isQubely = false;
+ blocks.forEach((block) => {
+ const { name, innerBlocks = [] } = block;
+ const [blockType, blockName] = name.split("/");
+ if (blockType === "qubely") {
+ isQubely = true;
+ }
+ if (!isQubely && innerBlocks.length > 0) {
+ isQubely = isQubelyBlock(innerBlocks);
+ }
+ });
+
+ return isQubely;
}
function getData(pId) {
- wp.apiFetch({
- path: 'qubely/v1/qubely_get_content',
- method: 'POST',
- data: { postId: pId }
- }).then(response => {
- if (response.success) {
- const innerBlock = innerBlocks(wp.blocks.parse(response.data), true);
- if (innerBlock.css) {
- wp.apiFetch({
- path: 'qubely/v1/append_qubely_css',
- method: 'POST',
- data: { css: innerBlock.css, post_id: select('core/editor').getCurrentPostId() }
- }).then(res => {
- if (res.success) {
- // Save Data
- // console.log('res : ', res);
- }
- })
- }
- }
- })
-};
+ wp.apiFetch({
+ path: "qubely/v1/qubely_get_content",
+ method: "POST",
+ data: { postId: pId },
+ }).then((response) => {
+ if (response.success) {
+ const innerBlock = innerBlocks(wp.blocks.parse(response.data), true);
+ if (innerBlock.css) {
+ wp.apiFetch({
+ path: "qubely/v1/append_qubely_css",
+ method: "POST",
+ data: {
+ css: innerBlock.css,
+ post_id: select("core/editor").getCurrentPostId(),
+ },
+ }).then((res) => {
+ if (res.success) {
+ // Save Data
+ // console.log('res : ', res);
+ }
+ });
+ }
+ }
+ });
+}
function getReusableBlockCSS(pId) {
- return wp.apiFetch({
- path: 'qubely/v1/qubely_get_content',
- method: 'POST',
- data: { postId: pId }
- }).then(response => response);
-};
+ return wp
+ .apiFetch({
+ path: "qubely/v1/qubely_get_content",
+ method: "POST",
+ data: { postId: pId },
+ })
+ .then((response) => response);
+}
function parseBlock(blocks) {
- blocks.forEach(block => {
- if (block.name.indexOf('core/block') != -1) {
- getData(block.attributes.ref);
- }
- if (block.innerBlocks && (block.innerBlocks).length > 0) {
- parseBlock(block.innerBlocks)
- }
- });
+ blocks.forEach((block) => {
+ if (block.name.indexOf("core/block") != -1) {
+ getData(block.attributes.ref);
+ }
+ if (block.innerBlocks && block.innerBlocks.length > 0) {
+ parseBlock(block.innerBlocks);
+ }
+ });
}
-
-
/*function setAvailableBlocksMeta(data) {
wp.apiFetch({
path: 'qubely/v1/set_qubely_available_blocks_meta',
@@ -165,154 +192,146 @@ function parseBlock(blocks) {
})
}*/
-
function availableBlocksMeta(all_blocks) {
- const blocks_flag = {
- available_blocks: [],
- interaction: false,
- animation: false,
- parallax: false
- }
- function recursive_block_map(blocks) {
- if (!blocks.length) {
- return
- }
- blocks.forEach(block => {
- const {
- name,
- attributes,
- innerBlocks
- } = block;
- const [blockType, blockName] = name.split('/');
-
- if (blockType === 'qubely') {
- if (!blocks_flag.available_blocks.includes(name)) {
- blocks_flag.available_blocks.push(name);
- }
- // check if has interaction
- if (blocks_flag.interaction === false && typeof attributes.interaction !== 'undefined') {
- const { while_scroll_into_view, mouse_movement } = attributes.interaction
- if (
- (typeof while_scroll_into_view !== 'undefined' && while_scroll_into_view.enable === true) ||
- (typeof mouse_movement !== 'undefined' && mouse_movement.enable === true)
- ) {
- blocks_flag.interaction = true;
- }
- }
-
- // if has block animation
- if (
- blocks_flag.animation === false &&
- typeof attributes.animation !== 'undefined' &&
- typeof attributes.animation.animation !== 'undefined' &&
- attributes.animation.animation !== ''
- ) {
- blocks_flag.animation = true;
- }
-
- // if has block parallax
- if (blocks_flag.parallax === false && name === 'qubely/row') {
- if (
- typeof attributes.rowBg !== 'undefined' &&
- typeof attributes.rowBg.bgimgParallax !== 'undefined' &&
- attributes.rowBg.bgimgParallax === 'animated'
- ) {
- blocks_flag.parallax = true;
- }
- }
- if (innerBlocks.length > 0 && blockName !== 'form') {
- recursive_block_map(innerBlocks);
- }
- } else if (innerBlocks.length > 0 && blockName !== 'form') {
- recursive_block_map(innerBlocks);
- }
- })
- }
- recursive_block_map(all_blocks);
- return blocks_flag;
+ const blocks_flag = {
+ available_blocks: [],
+ interaction: false,
+ animation: false,
+ parallax: false,
+ };
+ function recursive_block_map(blocks) {
+ if (!blocks.length) {
+ return;
+ }
+ blocks.forEach((block) => {
+ const { name, attributes, innerBlocks } = block;
+ const [blockType, blockName] = name.split("/");
+
+ if (blockType === "qubely") {
+ if (!blocks_flag.available_blocks.includes(name)) {
+ blocks_flag.available_blocks.push(name);
+ }
+ // check if has interaction
+ if (blocks_flag.interaction === false && typeof attributes.interaction !== "undefined") {
+ const { while_scroll_into_view, mouse_movement } = attributes.interaction;
+ if (
+ (typeof while_scroll_into_view !== "undefined" && while_scroll_into_view.enable === true) ||
+ (typeof mouse_movement !== "undefined" && mouse_movement.enable === true)
+ ) {
+ blocks_flag.interaction = true;
+ }
+ }
+
+ // if has block animation
+ if (
+ blocks_flag.animation === false &&
+ typeof attributes.animation !== "undefined" &&
+ typeof attributes.animation.animation !== "undefined" &&
+ attributes.animation.animation !== ""
+ ) {
+ blocks_flag.animation = true;
+ }
+
+ // if has block parallax
+ if (blocks_flag.parallax === false && name === "qubely/row") {
+ if (
+ typeof attributes.rowBg !== "undefined" &&
+ typeof attributes.rowBg.bgimgParallax !== "undefined" &&
+ attributes.rowBg.bgimgParallax === "animated"
+ ) {
+ blocks_flag.parallax = true;
+ }
+ }
+ if (innerBlocks.length > 0 && blockName !== "form") {
+ recursive_block_map(innerBlocks);
+ }
+ } else if (innerBlocks.length > 0 && blockName !== "form") {
+ recursive_block_map(innerBlocks);
+ }
+ });
+ }
+ recursive_block_map(all_blocks);
+ return blocks_flag;
}
-
const ParseCss = async (setDatabase = true) => {
- window.bindCss = true;
- const all_blocks = select('core/block-editor').getBlocks();
- const isRemain = isQubelyBlock(all_blocks);
- const { getCurrentPostId } = select('core/editor');
- let __blocks = {
- css: '',
- interaction: {}
- };
-
- const globalCSS = await getGlobalSettings('frontend');
- __blocks.css += globalCSS;
-
- // if (typeof window.globalData != 'undefined') {
- // __blocks.css += CssGenerator(window.globalData.settings, 'pagesettings', '8282882', true)
- // }
-
- // Inner Blocks
- let parseData = innerBlocks(all_blocks, true)
- __blocks.interaction = parseData.interaction
- __blocks.css += parseData.css
-
- // reusable Block
- if (setDatabase) {
- parseBlock(all_blocks);
- } else {
- const parseReusableCSS = (blocks) => {
- let temp = ''
- blocks.forEach((block) => {
- if (block.name.indexOf('core/block') != -1) {
- getReusableBlockCSS(block.attributes.ref).then(async (response) => {
- if (response.success) {
- const reuseableBlock = innerBlocks(wp.blocks.parse(response.data), true);
- if (reuseableBlock.css) {
- temp += await reuseableBlock.css;
- wp.apiFetch({
- path: 'qubely/v1/append_reusable_css',
- method: 'POST',
- data: { css: reuseableBlock.css }
- }).then(res => {
- if (res.success) {
- // Save Data
- const localQubelyCSS = localStorage.getItem('qubelyCSS');
- if (localQubelyCSS) {
- let localCSS = JSON.parse(localQubelyCSS);
- localCSS += reuseableBlock.css;
- localStorage.setItem('qubelyCSS', JSON.stringify(localCSS));
- }
- }
- })
- }
- }
- });
- }
- if (block.innerBlocks && (block.innerBlocks).length > 0) {
- return parseReusableCSS(block.innerBlocks)
- }
- });
- localStorage.setItem('qubelyReusabelCSS', JSON.stringify(temp));
- }
- parseReusableCSS(all_blocks);
- }
-
-
- localStorage.setItem('qubelyCSS', JSON.stringify(__blocks.css));
- localStorage.setItem('qubelyInteraction', JSON.stringify(__blocks.interaction));
-
-
- // available blocks meta
- const available_blocks = availableBlocksMeta(all_blocks);
-
- if (setDatabase) {
- API_fetch(getCurrentPostId(), __blocks, isRemain, available_blocks, false)
- } else {
- API_fetch(getCurrentPostId(), __blocks, isRemain, available_blocks, true)
- }
-
- // setTimeout(() => {
- window.bindCss = false;
- // }, 500)
-}
+ window.bindCss = true;
+ const all_blocks = select("core/block-editor").getBlocks();
+ const isRemain = isQubelyBlock(all_blocks);
+ const { getCurrentPostId } = select("core/editor");
+ let __blocks = {
+ css: "",
+ interaction: {},
+ };
+
+ const globalCSS = await getGlobalSettings("frontend");
+ __blocks.css += globalCSS;
+
+ // if (typeof window.globalData != 'undefined') {
+ // __blocks.css += CssGenerator(window.globalData.settings, 'pagesettings', '8282882', true)
+ // }
+
+ // Inner Blocks
+ let parseData = innerBlocks(all_blocks, true);
+ __blocks.interaction = parseData.interaction;
+ __blocks.css += parseData.css;
+
+ // reusable Block
+ if (setDatabase) {
+ parseBlock(all_blocks);
+ } else {
+ const parseReusableCSS = (blocks) => {
+ let temp = "";
+ blocks.forEach((block) => {
+ if (block.name.indexOf("core/block") != -1) {
+ getReusableBlockCSS(block.attributes.ref).then(async (response) => {
+ if (response.success) {
+ const reuseableBlock = innerBlocks(wp.blocks.parse(response.data), true);
+ if (reuseableBlock.css) {
+ temp += await reuseableBlock.css;
+ wp.apiFetch({
+ path: "qubely/v1/append_reusable_css",
+ method: "POST",
+ data: { css: reuseableBlock.css },
+ }).then((res) => {
+ if (res.success) {
+ // Save Data
+ const localQubelyCSS = localStorage.getItem("qubelyCSS");
+ if (localQubelyCSS) {
+ let localCSS = JSON.parse(localQubelyCSS);
+ localCSS += reuseableBlock.css;
+ localStorage.setItem("qubelyCSS", JSON.stringify(localCSS));
+ }
+ }
+ });
+ }
+ }
+ });
+ }
+ if (block.innerBlocks && block.innerBlocks.length > 0) {
+ return parseReusableCSS(block.innerBlocks);
+ }
+ });
+ localStorage.setItem("qubelyReusabelCSS", JSON.stringify(temp));
+ };
+ parseReusableCSS(all_blocks);
+ }
+
+ localStorage.setItem("qubelyCSS", JSON.stringify(__blocks.css));
+ localStorage.setItem("qubelyInteraction", JSON.stringify(__blocks.interaction));
+
+ // available blocks meta
+ const available_blocks = availableBlocksMeta(all_blocks);
+
+ if (setDatabase) {
+ API_fetch(getCurrentPostId(), __blocks, isRemain, available_blocks, false);
+ } else {
+ API_fetch(getCurrentPostId(), __blocks, isRemain, available_blocks, true);
+ }
+
+ // setTimeout(() => {
+ window.bindCss = false;
+ // }, 500)
+};
-export default ParseCss;
\ No newline at end of file
+export default ParseCss;
diff --git a/assets/reactjs/src/helpers/components/MultipleItem.js b/assets/reactjs/src/helpers/components/MultipleItem.js
index 57d5b022..a44084be 100755
--- a/assets/reactjs/src/helpers/components/MultipleItem.js
+++ b/assets/reactjs/src/helpers/components/MultipleItem.js
@@ -1,19 +1,23 @@
-const {__} = wp.i18n
+const { __ } = wp.i18n;
export default (props) => {
-
- return (
-
-
props.onClickSingleEntity( props.data.ID ) } >
-
- { props.data.pro &&
-
{__('Pro')}
- }
-
-
- { props.totalLayouts } {__('Layouts')}
-
-
-
- )
-}
-
+ return (
+
+
props.onClickSingleEntity(props.data.ID)}>
+
+
+ {props.data.pro &&
{__("Pro")} }
+
+
+
+ {props.totalLayouts} {__("Layouts")}
+
+
+
+
+ );
+};
diff --git a/assets/reactjs/src/helpers/components/ReusableBlockItem.js b/assets/reactjs/src/helpers/components/ReusableBlockItem.js
index 5775ae69..b2245e42 100755
--- a/assets/reactjs/src/helpers/components/ReusableBlockItem.js
+++ b/assets/reactjs/src/helpers/components/ReusableBlockItem.js
@@ -1,23 +1,31 @@
-const {__} = wp.i18n
+const { __ } = wp.i18n;
export default (props) => {
-
- return (
-
-
-
-
-
16 Feb 2019
-
- { props.importSavedBlock( props.data ) } }>
-
- { props.deleteSavedBlock( props.index, props.data.ID ) } }>
-
-
-
-
-
- )
-}
\ No newline at end of file
+ return (
+
+
+
+
+
16 Feb 2019
+
+ {
+ props.importSavedBlock(props.data);
+ }}
+ >
+
+ {
+ props.deleteSavedBlock(props.index, props.data.ID);
+ }}
+ >
+
+
+
+
+ );
+};
diff --git a/assets/reactjs/src/helpers/components/SingleItem.js b/assets/reactjs/src/helpers/components/SingleItem.js
index 4d93839c..05218be3 100755
--- a/assets/reactjs/src/helpers/components/SingleItem.js
+++ b/assets/reactjs/src/helpers/components/SingleItem.js
@@ -1,36 +1,70 @@
-const {__} = wp.i18n
+const { __ } = wp.i18n;
const { Fragment } = wp.element;
export default (props) => {
- return (
-
-
-
-
- { props.data.pro &&
{__('Pro')} }
-
{/* qubely-default-template-image */}
-
-
{/* qubely-import-button-group */}
-
{/* qubely-tmpl-info */}
-
{/* qubely-single-item-inner */}
-
-
- )
-}
\ No newline at end of file
+ return (
+
+
+
+
+ {props.data.pro &&
{__("Pro")} }
+
+ {/* qubely-default-template-image */}
+
+
+ {/* qubely-import-button-group */}
+
+ {/* qubely-tmpl-info */}
+
+ {/* qubely-single-item-inner */}
+
+
+ );
+};
diff --git a/assets/reactjs/src/helpers/globalCSS.js b/assets/reactjs/src/helpers/globalCSS.js
index 992dd354..c276bb5a 100644
--- a/assets/reactjs/src/helpers/globalCSS.js
+++ b/assets/reactjs/src/helpers/globalCSS.js
@@ -1,52 +1,52 @@
-const PATH = '/qubely/v1/global_settings';
-import { _device, _push } from '../components/CssHelper';
-import { DEFAULTPRESETS, DEFAULTBREAKINGPOINTS } from '../plugins/global-settings/constants';
+const PATH = "/qubely/v1/global_settings";
+import { _device, _push } from "../components/CssHelper";
+import { DEFAULTPRESETS, DEFAULTBREAKINGPOINTS } from "../plugins/global-settings/constants";
async function fetchFromApi() {
- return await wp.apiFetch({ path: PATH })
+ return await wp.apiFetch({ path: PATH });
}
const generateVariables = (value, selector) => {
- let data = {}, unit = 'px';
+ let data = {},
+ unit = "px";
- if (value.unit) {
- unit = value.unit;
- }
- if (value.md) {
- data.md = selector.replace(new RegExp('{{key}}', "g"), value.md + unit);
- }
- if (value.sm) {
- data.sm = selector.replace(new RegExp('{{key}}', "g"), value.sm + unit);
- }
- if (value.xs) {
- data.xs = selector.replace(new RegExp('{{key}}', "g"), value.xs + unit);
- }
- return data;
-}
+ if (value.unit) {
+ unit = value.unit;
+ }
+ if (value.md) {
+ data.md = selector.replace(new RegExp("{{key}}", "g"), value.md + unit);
+ }
+ if (value.sm) {
+ data.sm = selector.replace(new RegExp("{{key}}", "g"), value.sm + unit);
+ }
+ if (value.xs) {
+ data.xs = selector.replace(new RegExp("{{key}}", "g"), value.xs + unit);
+ }
+ return data;
+};
const _appendVariables = (val, data) => {
- if (val.md) {
- data.md.push(val.md);
- }
- if (val.sm) {
- data.sm.push(val.sm);
- }
- if (val.xs) {
- data.xs.push(val.xs);
- }
- return data;
-}
+ if (val.md) {
+ data.md.push(val.md);
+ }
+ if (val.sm) {
+ data.sm.push(val.sm);
+ }
+ if (val.xs) {
+ data.xs.push(val.xs);
+ }
+ return data;
+};
const addTypo = (value, index) => {
+ let responsive = "",
+ nonResponsiveProps = "",
+ data = {
+ md: [],
+ sm: [],
+ xs: [],
+ };
- let responsive = '',
- nonResponsiveProps = '',
- data = {
- md: [],
- sm: [],
- xs: []
- };
-
- /*
+ /*
if (value.size) {
data = _appendVariables(generateVariables(value.size, `.typo-name.index-${index + 1}>*{font-size:{{key}} !important;}`), data);
}
@@ -54,245 +54,261 @@ const addTypo = (value, index) => {
data = _appendVariables(generateVariables(value.height, `.typo-name.index-${index + 1}>*{line-height:{{key}} !important;}`), data)
}
*/
- if (value.spacing) {
- data = _appendVariables(generateVariables(value.spacing, `.typo-name.index-${index + 1}>*{letter-spacing:{{key}} !important;}`), data)
- }
+ if (value.spacing) {
+ data = _appendVariables(
+ generateVariables(value.spacing, `.typo-name.index-${index + 1}>*{letter-spacing:{{key}} !important;}`),
+ data
+ );
+ }
- if (data.md.length > 0) {
- responsive += data.md.join(' ')
- }
- if (data.sm.length > 0) {
- responsive += `@media (max-width: 1199px) {${data.sm.join('')}}`
- }
- if (data.xs.length > 0) {
- responsive += `@media (max-width: 991px) {${data.xs.join('')}}`
- }
+ if (data.md.length > 0) {
+ responsive += data.md.join(" ");
+ }
+ if (data.sm.length > 0) {
+ responsive += `@media (max-width: 1199px) {${data.sm.join("")}}`;
+ }
+ if (data.xs.length > 0) {
+ responsive += `@media (max-width: 991px) {${data.xs.join("")}}`;
+ }
- //non responsive values
- if (value.family) {
- if (!['Arial', 'Tahoma', 'Verdana', 'Helvetica', 'Times New Roman', 'Trebuchet MS', 'Georgia'].includes(value.family)) {
- nonResponsiveProps = "@import url('https://fonts.googleapis.com/css?family=" + value.family.replace(/\s/g, '+') + ':' + (value.weight || 400) + "'); ";
- }
- }
+ //non responsive values
+ if (value.family) {
+ if (
+ !["Arial", "Tahoma", "Verdana", "Helvetica", "Times New Roman", "Trebuchet MS", "Georgia"].includes(
+ value.family
+ )
+ ) {
+ nonResponsiveProps =
+ "@import url('https://fonts.googleapis.com/css?family=" +
+ value.family.replace(/\s/g, "+") +
+ ":" +
+ (value.weight || 400) +
+ "'); ";
+ }
+ }
- if (value.family) {
- nonResponsiveProps += `.typo-name.index-${index + 1}>*{ font-family:'${value.family}',${value.type};} `;
- }
- if (value.weight) {
- if (typeof value.weight === 'string') {
- nonResponsiveProps += `.typo-name.index-${index + 1}>* {font-weight:${value.weight.slice(0, -1)};font-style:italic;} `;
- } else {
- nonResponsiveProps += `.typo-name.index-${index + 1}>* {font-weight:${value.weight};font-style:normal;} `;
- }
- }
- if (value.transform) {
- nonResponsiveProps += `.typo-name.index-${index + 1}>* {text-transform:${value.transform};} `;
- }
+ if (value.family) {
+ nonResponsiveProps += `.typo-name.index-${index + 1}>*{ font-family:'${value.family}',${value.type};} `;
+ }
+ if (value.weight) {
+ if (typeof value.weight === "string") {
+ nonResponsiveProps += `.typo-name.index-${index + 1}>* {font-weight:${value.weight.slice(
+ 0,
+ -1
+ )};font-style:italic;} `;
+ } else {
+ nonResponsiveProps += `.typo-name.index-${index + 1}>* {font-weight:${value.weight};font-style:normal;} `;
+ }
+ }
+ if (value.transform) {
+ nonResponsiveProps += `.typo-name.index-${index + 1}>* {text-transform:${value.transform};} `;
+ }
- let tempCSS = '';
- if (responsive.length > 10) {
- tempCSS += responsive;
- }
- if (nonResponsiveProps.length > 10) {
- tempCSS += ' ' + nonResponsiveProps;
- }
- return tempCSS;
-}
+ let tempCSS = "";
+ if (responsive.length > 10) {
+ tempCSS += responsive;
+ }
+ if (nonResponsiveProps.length > 10) {
+ tempCSS += " " + nonResponsiveProps;
+ }
+ return tempCSS;
+};
export const setTypoTitleStyle = (typos) => {
-
- let __CSS = '';
- typos.forEach((typo, index) => {
- let tempCSS = addTypo(typo.value, index)
- __CSS += tempCSS;
- });
- injectGlobalCSS(__CSS, 'qubely-global-panel')
-}
+ let __CSS = "";
+ typos.forEach((typo, index) => {
+ let tempCSS = addTypo(typo.value, index);
+ __CSS += tempCSS;
+ });
+ injectGlobalCSS(__CSS, "qubely-global-panel");
+};
const appendTypoVariable = (value, index, type) => {
- let responsive = '',
- nonResponsiveProps = '',
- data = {
- md: [],
- sm: [],
- xs: []
- };
+ let responsive = "",
+ nonResponsiveProps = "",
+ data = {
+ md: [],
+ sm: [],
+ xs: [],
+ };
- if (value.size) {
- data = _appendVariables(generateVariables(value.size, `--qubely-typo${index + 1}-font-size:{{key}};`), data);
- }
- if (value.height) {
- data = _appendVariables(generateVariables(value.height, `--qubely-typo${index + 1}-line-height:{{key}};`), data)
- }
- if (value.spacing) {
- data = _appendVariables(generateVariables(value.spacing, `--qubely-typo${index + 1}-letter-spacing:{{key}};`), data)
- }
+ if (value.size) {
+ data = _appendVariables(generateVariables(value.size, `--qubely-typo${index + 1}-font-size:{{key}};`), data);
+ }
+ if (value.height) {
+ data = _appendVariables(
+ generateVariables(value.height, `--qubely-typo${index + 1}-line-height:{{key}};`),
+ data
+ );
+ }
+ if (value.spacing) {
+ data = _appendVariables(
+ generateVariables(value.spacing, `--qubely-typo${index + 1}-letter-spacing:{{key}};`),
+ data
+ );
+ }
- if (data.md.length > 0) {
- responsive += ':root{' + data.md.join('') + '}'
- }
- if (data.sm.length > 0) {
- responsive += '@media (max-width: 1199px) {:root{' + data.sm.join('') + '}}'
- }
- if (data.xs.length > 0) {
- responsive += '@media (max-width: 991px) {:root{' + data.xs.join('') + '}}'
- }
+ if (data.md.length > 0) {
+ responsive += ":root{" + data.md.join("") + "}";
+ }
+ if (data.sm.length > 0) {
+ responsive += "@media (max-width: 1199px) {:root{" + data.sm.join("") + "}}";
+ }
+ if (data.xs.length > 0) {
+ responsive += "@media (max-width: 991px) {:root{" + data.xs.join("") + "}}";
+ }
- //non responsive values
- if (type !== 'frontend' && value.family) {
- if (!['Arial', 'Tahoma', 'Verdana', 'Helvetica', 'Times New Roman', 'Trebuchet MS', 'Georgia'].includes(value.family)) {
- nonResponsiveProps = "@import url('https://fonts.googleapis.com/css?family=" + value.family.replace(/\s/g, '+') + ':' + (value.weight || 400) + "');";
- }
- }
- nonResponsiveProps += ':root{';
- if (value.family) {
- nonResponsiveProps += `--qubely-typo${index + 1}-font-family:'${value.family}',${value.type};`;
- }
- if (value.weight) {
- if (typeof value.weight === 'string') {
- nonResponsiveProps += `--qubely-typo${index + 1}-font-weight:${value.weight.slice(0, -1)};`;
- nonResponsiveProps += `--qubely-typo${index + 1}-font-style:italic;`;
- } else {
- nonResponsiveProps += `--qubely-typo${index + 1}-font-weight:${value.weight};`;
- nonResponsiveProps += `--qubely-typo${index + 1}-font-style:normal;`;
- }
- }
- if (value.transform) {
- nonResponsiveProps += `--qubely-typo${index + 1}-text-transform:${value.transform};`;
- }
+ //non responsive values
+ if (type !== "frontend" && value.family) {
+ if (
+ !["Arial", "Tahoma", "Verdana", "Helvetica", "Times New Roman", "Trebuchet MS", "Georgia"].includes(
+ value.family
+ )
+ ) {
+ nonResponsiveProps =
+ "@import url('https://fonts.googleapis.com/css?family=" +
+ value.family.replace(/\s/g, "+") +
+ ":" +
+ (value.weight || 400) +
+ "');";
+ }
+ }
+ nonResponsiveProps += ":root{";
+ if (value.family) {
+ nonResponsiveProps += `--qubely-typo${index + 1}-font-family:'${value.family}',${value.type};`;
+ }
+ if (value.weight) {
+ if (typeof value.weight === "string") {
+ nonResponsiveProps += `--qubely-typo${index + 1}-font-weight:${value.weight.slice(0, -1)};`;
+ nonResponsiveProps += `--qubely-typo${index + 1}-font-style:italic;`;
+ } else {
+ nonResponsiveProps += `--qubely-typo${index + 1}-font-weight:${value.weight};`;
+ nonResponsiveProps += `--qubely-typo${index + 1}-font-style:normal;`;
+ }
+ }
+ if (value.transform) {
+ nonResponsiveProps += `--qubely-typo${index + 1}-text-transform:${value.transform};`;
+ }
- nonResponsiveProps += '}';
- let tempCSS = '';
- if (responsive.length > 10) {
- tempCSS += responsive;
- }
- if (nonResponsiveProps.length > 10) {
- tempCSS += ' ' + nonResponsiveProps;
- }
- return tempCSS;
-}
+ nonResponsiveProps += "}";
+ let tempCSS = "";
+ if (responsive.length > 10) {
+ tempCSS += responsive;
+ }
+ if (nonResponsiveProps.length > 10) {
+ tempCSS += " " + nonResponsiveProps;
+ }
+ return tempCSS;
+};
export const setGlobalTypo_Variables = (globalTypoes, type) => {
- let CSS = '';
+ let CSS = "";
- globalTypoes.forEach((typo, index) => {
- let value = {};
- if (typo.value) {
- value = typo.value
- }
- if (Object.keys(value).length >= 1) {
- CSS += appendTypoVariable(value, index, type)
- }
- });
+ globalTypoes.forEach((typo, index) => {
+ let value = {};
+ if (typo.value) {
+ value = typo.value;
+ }
+ if (Object.keys(value).length >= 1) {
+ CSS += appendTypoVariable(value, index, type);
+ }
+ });
- return CSS;
-}
+ return CSS;
+};
const setBreakingPoints = (breakingPoints) => {
- const {
- sm,
- md,
- lg,
- xl
- } = breakingPoints;
+ const { sm, md, lg, xl } = breakingPoints;
- let tempCSS = '';
- if (typeof sm !== 'undefined') {
- tempCSS += `@media (min-width: 576px){.qubely-section .qubely-container{max-width: ${sm}px;}}`
- }
- if (typeof md !== 'undefined') {
- tempCSS += `@media (min-width: 768px){.qubely-section .qubely-container{max-width: ${md}px;}}`
- }
- if (typeof lg !== 'undefined') {
- tempCSS += `@media (min-width: 992px){.qubely-section .qubely-container{max-width: ${lg}px;}}`
- }
- if (typeof xl !== 'undefined') {
- tempCSS += `@media (min-width: 1200px){.qubely-section .qubely-container{max-width: ${xl}px;}}`
- }
- return tempCSS;
-}
+ let tempCSS = "";
+ if (typeof sm !== "undefined") {
+ tempCSS += `@media (min-width: 576px){.qubely-section .qubely-container{max-width: ${sm}px;}}`;
+ }
+ if (typeof md !== "undefined") {
+ tempCSS += `@media (min-width: 768px){.qubely-section .qubely-container{max-width: ${md}px;}}`;
+ }
+ if (typeof lg !== "undefined") {
+ tempCSS += `@media (min-width: 992px){.qubely-section .qubely-container{max-width: ${lg}px;}}`;
+ }
+ if (typeof xl !== "undefined") {
+ tempCSS += `@media (min-width: 1200px){.qubely-section .qubely-container{max-width: ${xl}px;}}`;
+ }
+ return tempCSS;
+};
-export const injectGlobalCSS = (_CSS, id = 'qubely-global-styles') => {
- let styleSelector = window.document;
- if (styleSelector.getElementById(id) === null) {
- let cssInline = document.createElement('style');
- cssInline.type = 'text/css';
- cssInline.id = id;
- if (cssInline.styleSheet) {
- cssInline.styleSheet.cssText = _CSS;
- } else {
- cssInline.innerHTML = _CSS;
- }
- styleSelector.getElementsByTagName("head")[0].appendChild(cssInline);
- } else {
- styleSelector.getElementById(id).innerHTML = _CSS;
- }
-}
+export const injectGlobalCSS = (_CSS, id = "qubely-global-styles") => {
+ let styleSelector = window.document;
+ if (styleSelector.getElementById(id) === null) {
+ let cssInline = document.createElement("style");
+ cssInline.type = "text/css";
+ cssInline.id = id;
+ if (cssInline.styleSheet) {
+ cssInline.styleSheet.cssText = _CSS;
+ } else {
+ cssInline.innerHTML = _CSS;
+ }
+ styleSelector.getElementsByTagName("head")[0].appendChild(cssInline);
+ } else {
+ styleSelector.getElementById(id).innerHTML = _CSS;
+ }
+};
export const updateGlobalVaribales = async (presetValues, breakingPoints = undefined) => {
- let global_CSS = '';
- const {
- colors,
- typography
- } = presetValues;
-
- const setGlobalCSS_Variables = (colors) => {
- let rootCSS = ':root {'
- colors.forEach((color, index) => rootCSS += `--qubely-color-${index + 1}:${color};`);
- rootCSS += '}'
- return rootCSS;
- }
- global_CSS += setGlobalCSS_Variables(colors);
- global_CSS += setGlobalTypo_Variables(typography);
-
- if (typeof breakingPoints !== 'undefined') {
- global_CSS += setBreakingPoints(breakingPoints);
- }
- injectGlobalCSS(global_CSS);
-}
+ let global_CSS = "";
+ const { colors, typography } = presetValues;
+ const setGlobalCSS_Variables = (colors) => {
+ let rootCSS = ":root {";
+ colors.forEach((color, index) => (rootCSS += `--qubely-color-${index + 1}:${color};`));
+ rootCSS += "}";
+ return rootCSS;
+ };
+ global_CSS += setGlobalCSS_Variables(colors);
+ global_CSS += setGlobalTypo_Variables(typography);
+ if (typeof breakingPoints !== "undefined") {
+ global_CSS += setBreakingPoints(breakingPoints);
+ }
+ injectGlobalCSS(global_CSS);
+};
export const getGlobalSettings = (type) => {
- let global_CSS = '';
- let {
- presets,
- activePreset,
- } = DEFAULTPRESETS;
- let breakingPoints = {
- ...DEFAULTBREAKINGPOINTS,
- ...(typeof qubely_container_width !== undefined && qubely_container_width)
- }
- return fetchFromApi().then(data => {
- if (data.success) {
- if (typeof data.settings.presets !== 'undefined') {
- presets = data.settings.presets
- }
- if (typeof data.settings.activePreset !== 'undefined') {
- activePreset = data.settings.activePreset
- }
- globalData = presets[activePreset];
+ let global_CSS = "";
+ let { presets, activePreset } = DEFAULTPRESETS;
+ let breakingPoints = {
+ ...DEFAULTBREAKINGPOINTS,
+ ...(typeof qubely_container_width !== undefined && qubely_container_width),
+ };
+ return fetchFromApi().then((data) => {
+ if (data.success) {
+ if (typeof data.settings.presets !== "undefined") {
+ presets = data.settings.presets;
+ }
+ if (typeof data.settings.activePreset !== "undefined") {
+ activePreset = data.settings.activePreset;
+ }
+ globalData = presets[activePreset];
- let globalColors = ['#4A90E2', '#50E3C2', '#000', '#4A4A4A', '#9B9B9B'];
- if (typeof globalData !== 'undefined' && globalData.colors && globalData.colors.length > 0) {
- globalColors = globalData.colors;
- }
- const setGlobalCSS_Variables = (globalColors) => {
- let rootCSS = ':root {'
- globalColors.forEach((color, index) => rootCSS += `--qubely-color-${index + 1}:${color};`);
- rootCSS += '}'
- return rootCSS;
- }
- if (typeof data.settings.breakingPoints !== 'undefined') {
- breakingPoints = {
- ...breakingPoints,
- ...data.settings.breakingPoints
- }
- }
+ let globalColors = ["#4A90E2", "#50E3C2", "#000", "#4A4A4A", "#9B9B9B"];
+ if (typeof globalData !== "undefined" && globalData.colors && globalData.colors.length > 0) {
+ globalColors = globalData.colors;
+ }
+ const setGlobalCSS_Variables = (globalColors) => {
+ let rootCSS = ":root {";
+ globalColors.forEach((color, index) => (rootCSS += `--qubely-color-${index + 1}:${color};`));
+ rootCSS += "}";
+ return rootCSS;
+ };
+ if (typeof data.settings.breakingPoints !== "undefined") {
+ breakingPoints = {
+ ...breakingPoints,
+ ...data.settings.breakingPoints,
+ };
+ }
- global_CSS += setGlobalCSS_Variables(globalColors);
- global_CSS += setGlobalTypo_Variables(globalData.typography, type);
- global_CSS += setBreakingPoints(breakingPoints);
- return global_CSS;
- }
- });
-}
\ No newline at end of file
+ global_CSS += setGlobalCSS_Variables(globalColors);
+ global_CSS += setGlobalTypo_Variables(globalData.typography, type);
+ global_CSS += setBreakingPoints(breakingPoints);
+ return global_CSS;
+ }
+ });
+};
diff --git a/assets/reactjs/src/helpers/icons.js b/assets/reactjs/src/helpers/icons.js
index cb1f14b9..e9928d37 100644
--- a/assets/reactjs/src/helpers/icons.js
+++ b/assets/reactjs/src/helpers/icons.js
@@ -1,182 +1,594 @@
const { __ } = wp.i18n;
const icons = {};
-const img_path = qubely_admin.plugin + 'assets/img/blocks';
-
-icons.qubely =
;
-
-icons.solid =
;
-icons.dot =
;
-icons.dash =
;
-icons.wave =
;
-
-icons.vertical_top =
;
-icons.vertical_middle =
;
-icons.vertical_bottom =
;
-
-icons.icon_classic =
;
-icons.icon_fill =
;
-icons.icon_line =
;
-
-icons.btn_fill =
;
-icons.btn_outline =
;
-
-icons.pie_fill =
;
-icons.pie_outline =
;
-icons.pie_outline_fill =
;
-
-icons.corner_square =
;
-icons.corner_rounded =
;
-icons.corner_round =
;
-
-icons.tab_tabs =
;
-icons.tab_pills =
;
-icons.tab_underline =
;
-
-icons.verticaltabs_1 =
;
-icons.verticaltabs_2 =
;
-icons.verticaltabs_3 =
;
-
-icons.social_normal =
;
-icons.social_fill =
;
-
-icons.accordion_fill =
;
-icons.accordion_classic =
;
-
-icons.infobox_1 =
;
-icons.infobox_2 =
;
-icons.infobox_3 =
;
-icons.infobox_4 =
;
-
-icons.testimonial_1 =
;
-icons.testimonial_2 =
;
-icons.testimonial_3 =
;
-icons.avatar_left =
;
-icons.avatar_right =
;
-icons.avatar_top =
;
-icons.avatar_bottom =
;
-
-icons.team_1 =
;
-icons.team_2 =
;
-icons.team_3 =
;
-
-icons.list_fill =
;
-icons.list_classic =
;
-
-icons.form_classic =
;
-icons.form_material =
;
-
-icons.videopopup_fill =
;
-icons.videopopup_classic =
;
-
-icons.postgrid_1 =
;
-icons.postgrid_2 =
;
-icons.postgrid_3 =
;
-icons.postgrid_4 =
;
-icons.postgrid_5 =
;
-icons.postgrid_design_1 =
;
-icons.postgrid_design_2 =
;
-icons.postgrid_design_3 =
;
-icons.postgrid_design_4 =
;
-icons.postgrid_design_5 =
;
-icons.postgrid_design_6 =
;
-
-
-icons.h1 =
;
-icons.h2 =
;
-icons.h3 =
;
-icons.h4 =
;
-icons.h5 =
;
-icons.h6 =
;
-icons.p =
-icons.span =
-icons.div =
+const img_path = qubely_admin.plugin + "assets/img/blocks";
+
+icons.qubely = (
+
+
+);
+
+icons.solid = (
+
+
+
+
+
+
+);
+icons.dot = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+icons.dash = (
+
+
+
+
+
+
+);
+icons.wave = (
+
+
+
+
+
+
+);
+
+icons.vertical_top = (
+
+
+
+
+);
+icons.vertical_middle = (
+
+
+
+
+
+
+);
+icons.vertical_bottom = (
+
+
+
+
+);
+
+icons.icon_classic =
;
+icons.icon_fill =
;
+icons.icon_line =
;
+
+icons.btn_fill =
;
+icons.btn_outline =
;
+
+icons.pie_fill =
;
+icons.pie_outline =
;
+icons.pie_outline_fill =
;
+
+icons.corner_square = (
+
+
+);
+icons.corner_rounded = (
+
+
+);
+icons.corner_round = (
+
+
+);
+
+icons.tab_tabs =
;
+icons.tab_pills =
;
+icons.tab_underline =
;
+
+icons.verticaltabs_1 =
;
+icons.verticaltabs_2 =
;
+icons.verticaltabs_3 =
;
+
+icons.social_normal =
;
+icons.social_fill =
;
+
+icons.accordion_fill =
;
+icons.accordion_classic =
;
+
+icons.infobox_1 =
;
+icons.infobox_2 =
;
+icons.infobox_3 =
;
+icons.infobox_4 =
;
+
+icons.testimonial_1 =
;
+icons.testimonial_2 =
;
+icons.testimonial_3 =
;
+icons.avatar_left =
;
+icons.avatar_right =
;
+icons.avatar_top =
;
+icons.avatar_bottom =
;
+
+icons.team_1 =
;
+icons.team_2 =
;
+icons.team_3 =
;
+
+icons.list_fill =
;
+icons.list_classic =
;
+
+icons.form_classic =
;
+icons.form_material =
;
+
+icons.videopopup_fill =
;
+icons.videopopup_classic =
;
+
+icons.postgrid_1 =
;
+icons.postgrid_2 =
;
+icons.postgrid_3 =
;
+icons.postgrid_4 =
;
+icons.postgrid_5 =
;
+icons.postgrid_design_1 =
;
+icons.postgrid_design_2 =
;
+icons.postgrid_design_3 =
;
+icons.postgrid_design_4 =
;
+icons.postgrid_design_5 =
;
+icons.postgrid_design_6 =
;
+
+icons.h1 = (
+
+
+
+
+);
+icons.h2 = (
+
+
+
+
+);
+icons.h3 = (
+
+
+
+
+);
+icons.h4 = (
+
+
+
+
+);
+icons.h5 = (
+
+
+
+
+);
+icons.h6 = (
+
+
+
+
+);
+icons.p = (
+
+
+);
+icons.span = (
+
+
+
+
+);
+icons.div = (
+
+
+
+
+);
icons.pricing = {
- 1:
,
- 2:
,
- 3:
,
- 4:
,
- 5:
,
- 6:
-}
+ 1:
,
+ 2:
,
+ 3:
,
+ 4:
,
+ 5:
,
+ 6:
,
+};
icons.pricing.badge = {
- 1:
,
- 2:
,
- 3:
,
- 4:
,
- 5:
,
- 6:
,
-}
+ 1:
,
+ 2:
,
+ 3:
,
+ 4:
,
+ 5:
,
+ 6:
,
+};
icons.image = {
- simple:
,
- blurb:
-}
-
-icons.copy =
-icons.paste =
+ simple:
,
+ blurb:
,
+};
+
+icons.copy = (
+
+
+);
+icons.paste = (
+
+
+);
icons.spacing = {
- top:
,
- right:
,
- bottom:
,
- left:
-}
+ top: (
+
+
+
+
+ ),
+ right: (
+
+
+
+
+ ),
+ bottom: (
+
+
+
+
+ ),
+ left: (
+
+
+
+
+ ),
+};
icons.border = {
- top:
,
- right:
,
- bottom:
,
- left:
-}
+ top: (
+
+
+
+
+ ),
+ right: (
+
+
+
+
+ ),
+ bottom: (
+
+
+
+
+ ),
+ left: (
+
+
+
+
+ ),
+};
icons.borderRadius = {
- topLeft:
,
- topRight:
,
- bottomRight:
,
- bottomLeft:
-}
-
-icons.inlineColorIcon =
-icons.highlighterIcon =
-icons.upperCaseIcon =
-
-icons.arrow_down =
-icons.arrow_up =
-
-
-icons.circleThin =
-
-icons.circleDot =
- ;
-icons.ellipsis_v =
- ;
-icons.ellipsis_h =
- ;
-icons.left =
- ;
-icons.plus =
- ;
-icons.plus_circle =
-
-;
-icons.delete =
-
-;
-icons.addColor=
-
-
- ;
-
-export default icons;
\ No newline at end of file
+ topLeft: (
+
+
+
+
+ ),
+ topRight: (
+
+
+
+
+ ),
+ bottomRight: (
+
+
+
+
+ ),
+ bottomLeft: (
+
+
+
+
+ ),
+};
+
+icons.inlineColorIcon = (
+
+
+);
+icons.highlighterIcon = (
+
+
+);
+icons.upperCaseIcon = (
+
+
+
+
+);
+
+icons.arrow_down = (
+
+
+);
+icons.arrow_up = (
+
+
+);
+icons.p = (
+
+
+);
+
+icons.circleThin = (
+
+
+);
+icons.circleDot = (
+
+
+);
+icons.ellipsis_v = (
+
+
+);
+icons.ellipsis_h = (
+
+
+);
+icons.left = (
+
+
+);
+icons.plus = (
+
+
+);
+icons.plus_circle = (
+
+
+);
+icons.delete = (
+
+
+);
+icons.addColor = (
+
+
+
+
+);
+
+export default icons;
diff --git a/assets/reactjs/src/helpers/utils.js b/assets/reactjs/src/helpers/utils.js
index f07966b9..8bec29cc 100644
--- a/assets/reactjs/src/helpers/utils.js
+++ b/assets/reactjs/src/helpers/utils.js
@@ -1,17 +1,16 @@
export const placeCaretAtEnd = (el) => {
- el.focus()
- if (typeof window.getSelection != "undefined"
- && typeof document.createRange != "undefined") {
- var range = document.createRange();
- range.selectNodeContents(el);
- range.collapse(false);
- var sel = window.getSelection();
- sel.removeAllRanges();
- sel.addRange(range);
- } else if (typeof document.body.createTextRange != "undefined") {
- var textRange = document.body.createTextRange();
- textRange.moveToElementText(el);
- textRange.collapse(false);
- textRange.select();
- }
-}
\ No newline at end of file
+ el.focus();
+ if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
+ var range = document.createRange();
+ range.selectNodeContents(el);
+ range.collapse(false);
+ var sel = window.getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+ } else if (typeof document.body.createTextRange != "undefined") {
+ var textRange = document.body.createTextRange();
+ textRange.moveToElementText(el);
+ textRange.collapse(false);
+ textRange.select();
+ }
+};
diff --git a/assets/reactjs/src/hooks/index.js b/assets/reactjs/src/hooks/index.js
index c82a55d7..b35b7d23 100644
--- a/assets/reactjs/src/hooks/index.js
+++ b/assets/reactjs/src/hooks/index.js
@@ -1 +1 @@
-export { default as withCSSGenerator } from './with-css-generator';
\ No newline at end of file
+export { default as withCSSGenerator } from "./with-css-generator";
diff --git a/assets/reactjs/src/hooks/with-css-generator/cssHelpers.js b/assets/reactjs/src/hooks/with-css-generator/cssHelpers.js
index f348dbf7..c214c45c 100644
--- a/assets/reactjs/src/hooks/with-css-generator/cssHelpers.js
+++ b/assets/reactjs/src/hooks/with-css-generator/cssHelpers.js
@@ -1,404 +1,584 @@
-
-
-
-
// CSS Gradient
export const cssGradient = (v, type) => {
- let gradietValue = v.type == 'linear' ? 'linear-gradient(' + v.direction + 'deg, ' : 'radial-gradient( circle at ' + v.radial + ' , '
- gradietValue += v.color1 + ' ' + v.start + '%,' + v.color2 + ' ' + v.stop + '%)'
- if (type == 'object') {
- return { background: gradietValue }
- } else {
- gradietValue = 'background:' + gradietValue + (v.clip ? '-webkit-background-clip: text; -webkit-text-fill-color: transparent;' : '')
- return '{' + gradietValue + '}';
- }
-}
+ let gradietValue =
+ v.type == "linear"
+ ? "linear-gradient(" + v.direction + "deg, "
+ : "radial-gradient( circle at " + v.radial + " , ";
+ gradietValue += v.color1 + " " + v.start + "%," + v.color2 + " " + v.stop + "%)";
+ if (type == "object") {
+ return { background: gradietValue };
+ } else {
+ gradietValue =
+ "background:" +
+ gradietValue +
+ (v.clip ? "-webkit-background-clip: text; -webkit-text-fill-color: transparent;" : "");
+ return "{" + gradietValue + "}";
+ }
+};
// CSS Box Shadow
export const cssBoxShadow = (v) => {
- return '{ box-shadow:' + (v.inset || '') + ' ' + v.horizontal + 'px ' + v.vertical + 'px ' + v.blur + 'px ' + v.spread + 'px ' + v.color + '; }'
-}
+ return (
+ "{ box-shadow:" +
+ (v.inset || "") +
+ " " +
+ v.horizontal +
+ "px " +
+ v.vertical +
+ "px " +
+ v.blur +
+ "px " +
+ v.spread +
+ "px " +
+ v.color +
+ "; }"
+ );
+};
// CSS Border
export const cssBorder = (v) => {
- v = Object.assign({}, { type: 'solid', width: {}, color: '#e5e5e5' }, v);
- let nonResponsiveCss = `border-color: ${v.color ? v.color : '#555d66'}; border-style: ${v.type ? v.type : 'solid'};`
-
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
- let data = { md: [], sm: [], xs: [] }
- data = v.widthType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'border-width:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'border-width:{{key}};'), data)
-
- data.md.push(nonResponsiveCss)
- data.sm.push(nonResponsiveCss)
- data.xs.push(nonResponsiveCss)
- return { md: data.md, sm: data.sm, xs: data.xs }
-
- } else {
- let data = ''
- if (v.widthType == 'global') {
- data = `border-width:${v.global}${v.unit ? v.unit : 'px'};${nonResponsiveCss}`
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `border-width:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit};${nonResponsiveCss}`
- }
- return '{' + data + '}';
- }
-}
+ v = Object.assign({}, { type: "solid", width: {}, color: "#e5e5e5" }, v);
+ let nonResponsiveCss = `border-color: ${v.color ? v.color : "#555d66"}; border-style: ${
+ v.type ? v.type : "solid"
+ };`;
+
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.widthType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "border-width:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "border-width:{{key}};"), data);
+
+ data.md.push(nonResponsiveCss);
+ data.sm.push(nonResponsiveCss);
+ data.xs.push(nonResponsiveCss);
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.widthType == "global") {
+ data = `border-width:${v.global}${v.unit ? v.unit : "px"};${nonResponsiveCss}`;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `border-width:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit};${nonResponsiveCss}`;
+ }
+ return "{" + data + "}";
+ }
+};
// Table Border
export const tableBorder = (v) => {
- const {
- border
- } = v;
- let nonResponsiveCss = 'border-style:hidden;';
- let color = '#E5E7EA';
- if (border.color) {
- color = v.border.color;
- }
- let data = { md: [], sm: [], xs: [] }
- if (border.widthType === 'global') {
- if(border.global.md){
- data.md.push(`box-shadow: 0 0 0 ${border.global.md}${border.unit} ${color};`)
- }
- if(border.global.sm){
- data.sm.push(`box-shadow: 0 0 0 ${border.global.sm}${border.unit} ${color};`)
- }
- if(border.global.xs){
- data.xs.push(`box-shadow: 0 0 0 ${border.global.xs}${border.unit} ${color};`)
- }
- }
-
- data.md.push(nonResponsiveCss)
- data.sm.push(nonResponsiveCss)
- data.xs.push(nonResponsiveCss)
- return { md: data.md, sm: data.sm, xs: data.xs }
-}
+ const { border } = v;
+ let nonResponsiveCss = "border-style:hidden;";
+ let color = "#E5E7EA";
+ if (border.color) {
+ color = v.border.color;
+ }
+ let data = { md: [], sm: [], xs: [] };
+ if (border.widthType === "global") {
+ if (border.global.md) {
+ data.md.push(`box-shadow: 0 0 0 ${border.global.md}${border.unit} ${color};`);
+ }
+ if (border.global.sm) {
+ data.sm.push(`box-shadow: 0 0 0 ${border.global.sm}${border.unit} ${color};`);
+ }
+ if (border.global.xs) {
+ data.xs.push(`box-shadow: 0 0 0 ${border.global.xs}${border.unit} ${color};`);
+ }
+ }
+
+ data.md.push(nonResponsiveCss);
+ data.sm.push(nonResponsiveCss);
+ data.xs.push(nonResponsiveCss);
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
// CSS Typography
const _device = (val, selector) => {
- let data = {}
- if (val && val.md) { data.md = selector.replace(new RegExp('{{key}}', "g"), val.md + (val.unit || '')) }
- if (val && val.sm) { data.sm = selector.replace(new RegExp('{{key}}', "g"), val.sm + (val.unit || '')) }
- if (val && val.xs) { data.xs = selector.replace(new RegExp('{{key}}', "g"), val.xs + (val.unit || '')) }
- return data;
-}
+ let data = {};
+ if (val && val.md) {
+ data.md = selector.replace(new RegExp("{{key}}", "g"), val.md + (val.unit || ""));
+ }
+ if (val && val.sm) {
+ data.sm = selector.replace(new RegExp("{{key}}", "g"), val.sm + (val.unit || ""));
+ }
+ if (val && val.xs) {
+ data.xs = selector.replace(new RegExp("{{key}}", "g"), val.xs + (val.unit || ""));
+ }
+ return data;
+};
const _push = (val, data) => {
- if (val.md) { data.md.push(val.md) }
- if (val.sm) { data.sm.push(val.sm) }
- if (val.xs) { data.xs.push(val.xs) }
- return data;
-}
+ if (val.md) {
+ data.md.push(val.md);
+ }
+ if (val.sm) {
+ data.sm.push(val.sm);
+ }
+ if (val.xs) {
+ data.xs.push(val.xs);
+ }
+ return data;
+};
const globalTypography = (selectedTypo) => {
-
- let CSS = '{';
- CSS += `font-family:var(--qubely-typo${selectedTypo}-font-family);`;
- CSS += `font-size:var(--qubely-typo${selectedTypo}-font-size);`;
- CSS += `font-weight:var(--qubely-typo${selectedTypo}-font-weight) !important;`;
- CSS += `font-style:var(--qubely-typo${selectedTypo}-font-style) !important;`;
- CSS += `line-height:var(--qubely-typo${selectedTypo}-line-height) !important;`;
- CSS += `letter-spacing:var(--qubely-typo${selectedTypo}-letter-spacing);`;
- CSS += `text-transform:var(--qubely-typo${selectedTypo}-text-transform);`;
- CSS += '}';
- return CSS;
-
-}
+ let CSS = "{";
+ CSS += `font-family:var(--qubely-typo${selectedTypo}-font-family);`;
+ CSS += `font-size:var(--qubely-typo${selectedTypo}-font-size);`;
+ CSS += `font-weight:var(--qubely-typo${selectedTypo}-font-weight) !important;`;
+ CSS += `font-style:var(--qubely-typo${selectedTypo}-font-style) !important;`;
+ CSS += `line-height:var(--qubely-typo${selectedTypo}-line-height) !important;`;
+ CSS += `letter-spacing:var(--qubely-typo${selectedTypo}-letter-spacing);`;
+ CSS += `text-transform:var(--qubely-typo${selectedTypo}-text-transform);`;
+ CSS += "}";
+ return CSS;
+};
export const cssTypography = (v) => {
-
- const {
- globalSource,
- activeSource,
- family,
- weight,
- transform,
-
- } = v;
-
- if (typeof activeSource !== 'undefined' && activeSource === 'global' && globalSource !== 'none') {
- return globalTypography(globalSource);
- } else if (activeSource === 'global' && globalSource === 'none') {
- return {}
- }
-
- let font = ''
- if (v.family) {
- if (!['Arial', 'Tahoma', 'Verdana', 'Helvetica', 'Times New Roman', 'Trebuchet MS', 'Georgia'].includes(v.family)) {
- font = "@import url('https://fonts.googleapis.com/css?family=" + v.family.replace(/\s/g, '+') + ':' + (v.weight || 400) + "');"
- }
- }
- let data = { md: [], sm: [], xs: [] }
- if (v.size) {
- data = _push(_device(v.size, 'font-size:{{key}}'), data)
- }
- if (v.height) {
- data = _push(_device(v.height, 'line-height:{{key}} !important'), data)
- }
- if (v.spacing) {
- data = _push(_device(v.spacing, 'letter-spacing:{{key}}'), data)
- }
-
- let simple = '{';
- if (family) {
- simple += `font-family:'${v.family}',${v.type};`;
- }
- if (weight) {
- if (typeof weight === 'string') {
- simple += `font-weight:${weight.slice(0, -1)};`;
- simple += `font-style:italic;`;
- } else {
- simple += `font-weight:${weight};`;
- simple += `font-style:normal;`;
- }
- }
- if (transform) {
- simple += `text-transform:${v.transform};`;
- }
- simple += '}';
- return ({
- md: data.md,
- sm: data.sm,
- xs: data.xs,
- simple,
- font
- });
-
-
-}
-
+ const { globalSource, activeSource, family, weight, transform } = v;
+
+ if (typeof activeSource !== "undefined" && activeSource === "global" && globalSource !== "none") {
+ return globalTypography(globalSource);
+ } else if (activeSource === "global" && globalSource === "none") {
+ return {};
+ }
+
+ let font = "";
+ if (v.family) {
+ if (
+ !["Arial", "Tahoma", "Verdana", "Helvetica", "Times New Roman", "Trebuchet MS", "Georgia"].includes(
+ v.family
+ )
+ ) {
+ font =
+ "@import url('https://fonts.googleapis.com/css?family=" +
+ v.family.replace(/\s/g, "+") +
+ ":" +
+ (v.weight || 400) +
+ "');";
+ }
+ }
+ let data = { md: [], sm: [], xs: [] };
+ if (v.size) {
+ data = _push(_device(v.size, "font-size:{{key}}"), data);
+ }
+ if (v.height) {
+ data = _push(_device(v.height, "line-height:{{key}} !important"), data);
+ }
+ if (v.spacing) {
+ data = _push(_device(v.spacing, "letter-spacing:{{key}}"), data);
+ }
+
+ let simple = "{";
+ if (family) {
+ simple += `font-family:'${v.family}',${v.type};`;
+ }
+ if (weight) {
+ if (typeof weight === "string") {
+ simple += `font-weight:${weight.slice(0, -1)};`;
+ simple += `font-style:italic;`;
+ } else {
+ simple += `font-weight:${weight};`;
+ simple += `font-style:normal;`;
+ }
+ }
+ if (transform) {
+ simple += `text-transform:${v.transform};`;
+ }
+ simple += "}";
+ return {
+ md: data.md,
+ sm: data.sm,
+ xs: data.xs,
+ simple,
+ font,
+ };
+};
// CSS Dimension
export const cssDimension = (v) => {
- const unit = v.unit ? v.unit : 'px'
- return (v.top || 0) + unit + ' ' + (v.right || 0) + unit + ' ' + (v.bottom || 0) + unit + ' ' + (v.left || 0) + unit
-}
-
+ const unit = v.unit ? v.unit : "px";
+ return (
+ (v.top || 0) + unit + " " + (v.right || 0) + unit + " " + (v.bottom || 0) + unit + " " + (v.left || 0) + unit
+ );
+};
// CSS Background
-const split_bg = (type, image = {}, imgPosition, imgAttachment, imgRepeat, imgSize, DefaultColor, bgGradient, bgimageSource = 'local', externalImageUrl = {}) => {
- let bgData = (DefaultColor ? 'background-color:' + DefaultColor + ';' : '');
- if (type == 'image') {
- bgData += (bgimageSource === 'local' ? image.hasOwnProperty('url') ? 'background-image:url(' + image.url + ');' : '' : externalImageUrl.hasOwnProperty('url') ? 'background-image:url(' + externalImageUrl.url + ');' : '') + (imgPosition ? 'background-position:' + imgPosition + ';' : '') + (imgAttachment ? 'background-attachment:' + imgAttachment + ';' : '') +
- (imgRepeat ? 'background-repeat:' + imgRepeat + ';' : '') + (imgSize ? 'background-size:' + imgSize + ';' : '')
- }
- else if (type == 'gradient') {
- if (bgGradient && bgGradient.type == 'linear') {
- bgData += 'background-image: linear-gradient(' + bgGradient.direction + 'deg, ' + bgGradient.color1 + ' ' + bgGradient.start + '%,' + bgGradient.color2 + ' ' + bgGradient.stop + '%);'
- } else {
- if (typeof bgGradient.radial === 'undefined') {
- bgGradient.radial = 'center';
- }
- bgData += 'background-image: radial-gradient( circle at ' + bgGradient.radial + ' , ' + bgGradient.color1 + ' ' + bgGradient.start + '%,' + bgGradient.color2 + ' ' + bgGradient.stop + '%);'
- }
- }
- return bgData;
-}
+const split_bg = (
+ type,
+ image = {},
+ imgPosition,
+ imgAttachment,
+ imgRepeat,
+ imgSize,
+ DefaultColor,
+ bgGradient,
+ bgimageSource = "local",
+ externalImageUrl = {}
+) => {
+ let bgData = DefaultColor ? "background-color:" + DefaultColor + ";" : "";
+ if (type == "image") {
+ bgData +=
+ (bgimageSource === "local"
+ ? image.hasOwnProperty("url")
+ ? "background-image:url(" + image.url + ");"
+ : ""
+ : externalImageUrl.hasOwnProperty("url")
+ ? "background-image:url(" + externalImageUrl.url + ");"
+ : "") +
+ (imgPosition ? "background-position:" + imgPosition + ";" : "") +
+ (imgAttachment ? "background-attachment:" + imgAttachment + ";" : "") +
+ (imgRepeat ? "background-repeat:" + imgRepeat + ";" : "") +
+ (imgSize ? "background-size:" + imgSize + ";" : "");
+ } else if (type == "gradient") {
+ if (bgGradient && bgGradient.type == "linear") {
+ bgData +=
+ "background-image: linear-gradient(" +
+ bgGradient.direction +
+ "deg, " +
+ bgGradient.color1 +
+ " " +
+ bgGradient.start +
+ "%," +
+ bgGradient.color2 +
+ " " +
+ bgGradient.stop +
+ "%);";
+ } else {
+ if (typeof bgGradient.radial === "undefined") {
+ bgGradient.radial = "center";
+ }
+ bgData +=
+ "background-image: radial-gradient( circle at " +
+ bgGradient.radial +
+ " , " +
+ bgGradient.color1 +
+ " " +
+ bgGradient.start +
+ "%," +
+ bgGradient.color2 +
+ " " +
+ bgGradient.stop +
+ "%);";
+ }
+ }
+ return bgData;
+};
export const cssBackground = (v) => {
- let background = '{'
- background += split_bg(v.bgType, v.bgImage, v.bgimgPosition, v.bgimgAttachment, v.bgimgRepeat, v.bgimgSize, v.bgDefaultColor, v.bgGradient, v.bgimageSource, v.externalImageUrl)
- background += '}'
- if (v.bgType == 'video') {
- if (v.bgVideoFallback) {
- if (v.bgVideoFallback.url) {
- background += 'background-image: url(' + v.bgVideoFallback.url + '); background-position: center; background-repeat: no-repeat; background-size: cover;'
- }
- }
- }
- if (background != '{}') { return background }
- return {};
-}
-
+ let background = "{";
+ background += split_bg(
+ v.bgType,
+ v.bgImage,
+ v.bgimgPosition,
+ v.bgimgAttachment,
+ v.bgimgRepeat,
+ v.bgimgSize,
+ v.bgDefaultColor,
+ v.bgGradient,
+ v.bgimageSource,
+ v.externalImageUrl
+ );
+ background += "}";
+ if (v.bgType == "video") {
+ if (v.bgVideoFallback) {
+ if (v.bgVideoFallback.url) {
+ background +=
+ "background-image: url(" +
+ v.bgVideoFallback.url +
+ "); background-position: center; background-repeat: no-repeat; background-size: cover;";
+ }
+ }
+ }
+ if (background != "{}") {
+ return background;
+ }
+ return {};
+};
// CSS Shape
export const cssShape = (v) => {
- let data = { md: [], sm: [], xs: [] }
- let shape = []
- if (v.color) {
- shape.push(' svg path{fill:' + v.color + ';}');
- shape.push(' svg polygon{fill:' + v.color + ';}')
- }
- if (v.flipShapeDivider) {
- if (v.shapeType === 'top') {
- shape.push(' svg { transform: rotateY(180deg) translateX(50%);}');
- } else {
- shape.push(' svg { transform: rotate(180deg) translate(50%);}');
- }
- }
- if (v.front) { shape.push('{z-index: 99;}') }
- if (v.width) { data = _push(_device(v.width, ' svg {width:{{key}};}'), data) }
- if (v.height) { data = _push(_device(v.height, ' svg {height:{{key}};}'), data) }
- return { data, shape };
-}
-
+ let data = { md: [], sm: [], xs: [] };
+ let shape = [];
+ if (v.color) {
+ shape.push(" svg path{fill:" + v.color + ";}");
+ shape.push(" svg polygon{fill:" + v.color + ";}");
+ }
+ if (v.flipShapeDivider) {
+ if (v.shapeType === "top") {
+ shape.push(" svg { transform: rotateY(180deg) translateX(50%);}");
+ } else {
+ shape.push(" svg { transform: rotate(180deg) translate(50%);}");
+ }
+ }
+ if (v.front) {
+ shape.push("{z-index: 99;}");
+ }
+ if (v.width) {
+ data = _push(_device(v.width, " svg {width:{{key}};}"), data);
+ }
+ if (v.height) {
+ data = _push(_device(v.height, " svg {height:{{key}};}"), data);
+ }
+ return { data, shape };
+};
// CSS ColorAdvanced
export const cssColor = (v) => {
- let data = (v.clip ? '-webkit-background-clip: text; -webkit-text-fill-color: transparent;' : '');
- if (v.type == 'color') {
- if (v.textColor) {
- data += (v.color ? 'color: ' + v.color + ';' : '')
- } else {
- data += (v.color ? 'background-image: none; background-color: ' + v.color + ';' : '')
- }
-
- } else if (v.type == 'gradient') {
- if (v.gradient && v.gradient.type == 'linear') {
- if (v.textColor) {
- data += 'background : -webkit-linear-gradient(' + v.gradient.direction + 'deg, ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;'
- } else {
- data += 'background-image : linear-gradient(' + v.gradient.direction + 'deg, ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);'
- }
- } else {
- if (v.textColor) {
- data += 'background : radial-gradient(circle at ' + v.gradient.radial + ' , ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;'
- } else {
- data += 'background-image : radial-gradient( circle at ' + v.gradient.radial + ' , ' + v.gradient.color1 + ' ' + v.gradient.start + '%,' + v.gradient.color2 + ' ' + v.gradient.stop + '%);'
- }
- }
- }
- return '{' + data + '}';
-}
-
+ let data = v.clip ? "-webkit-background-clip: text; -webkit-text-fill-color: transparent;" : "";
+ if (v.type == "color") {
+ if (v.textColor) {
+ data += v.color ? "color: " + v.color + ";" : "";
+ } else {
+ data += v.color ? "background-image: none; background-color: " + v.color + ";" : "";
+ }
+ } else if (v.type == "gradient") {
+ if (v.gradient && v.gradient.type == "linear") {
+ if (v.textColor) {
+ data +=
+ "background : -webkit-linear-gradient(" +
+ v.gradient.direction +
+ "deg, " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;";
+ } else {
+ data +=
+ "background-image : linear-gradient(" +
+ v.gradient.direction +
+ "deg, " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);";
+ }
+ } else {
+ if (v.textColor) {
+ data +=
+ "background : radial-gradient(circle at " +
+ v.gradient.radial +
+ " , " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;";
+ } else {
+ data +=
+ "background-image : radial-gradient( circle at " +
+ v.gradient.radial +
+ " , " +
+ v.gradient.color1 +
+ " " +
+ v.gradient.start +
+ "%," +
+ v.gradient.color2 +
+ " " +
+ v.gradient.stop +
+ "%);";
+ }
+ }
+ }
+ return "{" + data + "}";
+};
// CSS Spacer
export const cssSpacer = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if (v.spaceTop) { data = _push(_device(v.spaceTop, 'padding-top:{{key}}'), data) }
- if (v.spaceBottom) { data = _push(_device(v.spaceBottom, 'padding-bottom:{{key}}'), data) }
- return { md: data.md, sm: data.sm, xs: data.xs };
-}
+ let data = { md: [], sm: [], xs: [] };
+ if (v.spaceTop) {
+ data = _push(_device(v.spaceTop, "padding-top:{{key}}"), data);
+ }
+ if (v.spaceBottom) {
+ data = _push(_device(v.spaceBottom, "padding-bottom:{{key}}"), data);
+ }
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
// CSS Size
export const cssSize = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if (v.paddingX) {
- data = _push(_device(v.paddingX, 'padding-left:{{key}}' + (v.paddingX.unit || '') + ';padding-right:{{key}}'), data)
- }
- if (v.paddingY) {
- data = _push(_device(v.paddingY, 'padding-top:{{key}}' + (v.paddingY.unit || '') + ';padding-bottom:{{key}}'), data)
- }
- return { md: data.md, sm: data.sm, xs: data.xs };
-}
-
+ let data = { md: [], sm: [], xs: [] };
+ if (v.paddingX) {
+ data = _push(
+ _device(v.paddingX, "padding-left:{{key}}" + (v.paddingX.unit || "") + ";padding-right:{{key}}"),
+ data
+ );
+ }
+ if (v.paddingY) {
+ data = _push(
+ _device(v.paddingY, "padding-top:{{key}}" + (v.paddingY.unit || "") + ";padding-bottom:{{key}}"),
+ data
+ );
+ }
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
// CSS transfrom
export const cssTransform = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if ((v.translateX && v.translateX.md) || (v.translateY && v.translateY.md)) {
- data.md = `transform: translateX({{key}}${(v.translateX && v.translateX.unit ? v.translateX.unit : 'px')}) `.replace(new RegExp('{{key}}', "g"), v.translateX ? v.translateX.md || '0' : '0') + `translateY({{key}}${(v.translateY && v.translateY.unit ? v.translateY.unit : 'px')})`.replace(new RegExp('{{key}}', "g"), v.translateY ? v.translateY.md || '0' : '0')
- }
- if ((v.translateX && v.translateX.sm) || (v.translateY && v.translateY.sm)) {
- data.sm = `transform: translateX({{key}}${(v.translateX && v.translateX.unit ? v.translateX.unit : 'px')}) `.replace(new RegExp('{{key}}', "g"), v.translateX ? v.translateX.sm || '0' : '0') + `translateY({{key}}${(v.translateY && v.translateY.unit ? v.translateY.unit : 'px')})`.replace(new RegExp('{{key}}', "g"), v.translateY ? v.translateY.sm || '0' : '0')
- }
- if ((v.translateX && v.translateX.xs) || (v.translateY && v.translateY.xs)) {
- data.xs = `transform: translateX({{key}}${(v.translateX && v.translateX.unit ? v.translateX.unit : 'px')}) `.replace(new RegExp('{{key}}', "g"), v.translateX ? v.translateX.xs || '0' : '0') + `translateY({{key}}${(v.translateY && v.translateY.unit ? v.translateY.unit : 'px')})`.replace(new RegExp('{{key}}', "g"), v.translateY ? v.translateY.xs || '0' : '0')
- }
- return { md: [data.md], sm: [data.sm], xs: [data.xs] };
-}
+ let data = { md: [], sm: [], xs: [] };
+ if ((v.translateX && v.translateX.md) || (v.translateY && v.translateY.md)) {
+ data.md =
+ `transform: translateX({{key}}${v.translateX && v.translateX.unit ? v.translateX.unit : "px"}) `.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateX ? v.translateX.md || "0" : "0"
+ ) +
+ `translateY({{key}}${v.translateY && v.translateY.unit ? v.translateY.unit : "px"})`.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateY ? v.translateY.md || "0" : "0"
+ );
+ }
+ if ((v.translateX && v.translateX.sm) || (v.translateY && v.translateY.sm)) {
+ data.sm =
+ `transform: translateX({{key}}${v.translateX && v.translateX.unit ? v.translateX.unit : "px"}) `.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateX ? v.translateX.sm || "0" : "0"
+ ) +
+ `translateY({{key}}${v.translateY && v.translateY.unit ? v.translateY.unit : "px"})`.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateY ? v.translateY.sm || "0" : "0"
+ );
+ }
+ if ((v.translateX && v.translateX.xs) || (v.translateY && v.translateY.xs)) {
+ data.xs =
+ `transform: translateX({{key}}${v.translateX && v.translateX.unit ? v.translateX.unit : "px"}) `.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateX ? v.translateX.xs || "0" : "0"
+ ) +
+ `translateY({{key}}${v.translateY && v.translateY.unit ? v.translateY.unit : "px"})`.replace(
+ new RegExp("{{key}}", "g"),
+ v.translateY ? v.translateY.xs || "0" : "0"
+ );
+ }
+ return { md: [data.md], sm: [data.sm], xs: [data.xs] };
+};
const _customDevice = (val, selector) => {
- let data = {}
- if (val && val.md) {
- let [cssSyntax, value] = selector.replace(new RegExp('{{key}}', "g"), val.md).split(":")
- let [top, right, bottom, left] = value.split(" ")
- left = left.length > 0 ? left.slice(0, -1) : '0'
- data.md = `${cssSyntax}:${top ? top : '0'}${val.unit} ${right ? right : '0'}${val.unit} ${bottom ? bottom : '0'}${val.unit} ${left ? left : '0'}${val.unit};`
- }
- if (val && val.sm) {
- let [cssSyntax, value] = selector.replace(new RegExp('{{key}}', "g"), val.sm).split(":")
- let [top, right, bottom, left] = value.split(" ")
- left = left.length > 0 ? left.slice(0, -1) : '0'
- data.sm = `${cssSyntax}:${top ? top : '0'}${val.unit} ${right ? right : '0'}${val.unit} ${bottom ? bottom : '0'}${val.unit} ${left ? left : '0'}${val.unit};`
- }
- if (val && val.xs) {
- let [cssSyntax, value] = selector.replace(new RegExp('{{key}}', "g"), val.xs).split(":")
- let [top, right, bottom, left] = value.split(" ")
- left = left.length > 0 ? left.slice(0, -1) : '0'
- data.xs = `${cssSyntax}:${top ? top : '0'}${val.unit} ${right ? right : '0'}${val.unit} ${bottom ? bottom : '0'}${val.unit} ${left ? left : '0'}${val.unit};`
- }
- return data;
-}
+ let data = {};
+ if (val && val.md) {
+ let [cssSyntax, value] = selector.replace(new RegExp("{{key}}", "g"), val.md).split(":");
+ let [top, right, bottom, left] = value.split(" ");
+ left = left.length > 0 ? left.slice(0, -1) : "0";
+ data.md = `${cssSyntax}:${top ? top : "0"}${val.unit} ${right ? right : "0"}${val.unit} ${
+ bottom ? bottom : "0"
+ }${val.unit} ${left ? left : "0"}${val.unit};`;
+ }
+ if (val && val.sm) {
+ let [cssSyntax, value] = selector.replace(new RegExp("{{key}}", "g"), val.sm).split(":");
+ let [top, right, bottom, left] = value.split(" ");
+ left = left.length > 0 ? left.slice(0, -1) : "0";
+ data.sm = `${cssSyntax}:${top ? top : "0"}${val.unit} ${right ? right : "0"}${val.unit} ${
+ bottom ? bottom : "0"
+ }${val.unit} ${left ? left : "0"}${val.unit};`;
+ }
+ if (val && val.xs) {
+ let [cssSyntax, value] = selector.replace(new RegExp("{{key}}", "g"), val.xs).split(":");
+ let [top, right, bottom, left] = value.split(" ");
+ left = left.length > 0 ? left.slice(0, -1) : "0";
+ data.xs = `${cssSyntax}:${top ? top : "0"}${val.unit} ${right ? right : "0"}${val.unit} ${
+ bottom ? bottom : "0"
+ }${val.unit} ${left ? left : "0"}${val.unit};`;
+ }
+ return data;
+};
// CSS cssBorderRadius
export const cssBorderRadius = (v) => {
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
-
- let data = { md: [], sm: [], xs: [] }
- data = v.radiusType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'border-radius:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'border-radius:{{key}};'), data)
-
- return { md: data.md, sm: data.sm, xs: data.xs }
- } else {
- let data = ''
- if (v.radiusType == 'global') {
- data = `border-radius:${v.global || '0'}${v.unit ? v.unit : 'px'} `
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `border-radius:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit}`
- }
- return '{' + data + '}';
- }
-
-}
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.radiusType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "border-radius:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "border-radius:{{key}};"), data);
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.radiusType == "global") {
+ data = `border-radius:${v.global || "0"}${v.unit ? v.unit : "px"} `;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `border-radius:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit}`;
+ }
+ return "{" + data + "}";
+ }
+};
// CSS cssPadding
export const cssPadding = (v) => {
-
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
- let data = { md: [], sm: [], xs: [] }
- data = v.paddingType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'padding:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'padding:{{key}};'), data)
-
- return { md: data.md, sm: data.sm, xs: data.xs }
-
- } else {
- let data = ''
- if (v.paddingType == 'global') {
- data = `padding:${v.global}${v.unit ? v.unit : 'px'} `
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `padding:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit}`
- }
- return '{' + data + '}';
- }
-}
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.paddingType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "padding:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "padding:{{key}};"), data);
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.paddingType == "global") {
+ data = `padding:${v.global}${v.unit ? v.unit : "px"} `;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `padding:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit}`;
+ }
+ return "{" + data + "}";
+ }
+};
// CSS cssMargin
export const cssMargin = (v) => {
-
- if (typeof (v.global) === 'object' || typeof (v.custom) === 'object') {
- let data = { md: [], sm: [], xs: [] }
- data = v.marginType == 'global' ? _push(_device({ ...v.global, unit: v.unit ? v.unit : 'px' }, 'margin:{{key}};'), data) :
- _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : 'px' }, 'margin:{{key}};'), data)
-
- return { md: data.md, sm: data.sm, xs: data.xs }
-
- } else {
- let data = ''
- if (v.marginType == 'global') {
- data = `margin:${v.global}${v.unit ? v.unit : 'px'} `
- } else {
- let temp = v.custom ? v.custom.split(" ") : ['0', '0', '0', '0']
- let unit = v.unit ? v.unit : 'px'
- data = `margin:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${temp[2] ? temp[2] : `0`}${unit} ${temp[3] ? temp[3] : `0`}${unit}`
- }
- return '{' + data + '}';
- }
-
-}
+ if (typeof v.global === "object" || typeof v.custom === "object") {
+ let data = { md: [], sm: [], xs: [] };
+ data =
+ v.marginType == "global"
+ ? _push(_device({ ...v.global, unit: v.unit ? v.unit : "px" }, "margin:{{key}};"), data)
+ : _push(_customDevice({ ...v.custom, unit: v.unit ? v.unit : "px" }, "margin:{{key}};"), data);
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+ } else {
+ let data = "";
+ if (v.marginType == "global") {
+ data = `margin:${v.global}${v.unit ? v.unit : "px"} `;
+ } else {
+ let temp = v.custom ? v.custom.split(" ") : ["0", "0", "0", "0"];
+ let unit = v.unit ? v.unit : "px";
+ data = `margin:${temp[0] ? temp[0] : `0`}${unit} ${temp[1] ? temp[1] : `0`}${unit} ${
+ temp[2] ? temp[2] : `0`
+ }${unit} ${temp[3] ? temp[3] : `0`}${unit}`;
+ }
+ return "{" + data + "}";
+ }
+};
// CSS cssRowReverse
export const cssRowReverse = (v) => {
- let data = { md: [], sm: [], xs: [] }
- if (v.values.md) { data.md.push(`flex-direction:row-reverse`) }
- if (v.values.sm) { data.sm.push(`flex-direction:column-reverse`) }
- if (v.values.xs) { data.xs.push(`flex-direction:column-reverse`) }
-
-
-
- return { md: data.md, sm: data.sm, xs: data.xs };
-}
\ No newline at end of file
+ let data = { md: [], sm: [], xs: [] };
+ if (v.values.md) {
+ data.md.push(`flex-direction:row-reverse`);
+ }
+ if (v.values.sm) {
+ data.sm.push(`flex-direction:column-reverse`);
+ }
+ if (v.values.xs) {
+ data.xs.push(`flex-direction:column-reverse`);
+ }
+
+ return { md: data.md, sm: data.sm, xs: data.xs };
+};
diff --git a/assets/reactjs/src/hooks/with-css-generator/generateCSS.js b/assets/reactjs/src/hooks/with-css-generator/generateCSS.js
index 59b20c54..f3763e6c 100644
--- a/assets/reactjs/src/hooks/with-css-generator/generateCSS.js
+++ b/assets/reactjs/src/hooks/with-css-generator/generateCSS.js
@@ -1,314 +1,339 @@
import {
- cssSize,
- cssBorderRadius,
- cssGradient,
- cssBorder,
- tableBorder,
- cssBoxShadow,
- cssTypography,
- cssDimension,
- cssBackground,
- cssShape,
- cssColor,
- cssSpacer,
- cssPadding,
- cssMargin,
- cssRowReverse,
- cssTransform
-} from './cssHelpers';
+ cssSize,
+ cssBorderRadius,
+ cssGradient,
+ cssBorder,
+ tableBorder,
+ cssBoxShadow,
+ cssTypography,
+ cssDimension,
+ cssBackground,
+ cssShape,
+ cssColor,
+ cssSpacer,
+ cssPadding,
+ cssMargin,
+ cssRowReverse,
+ cssTransform,
+} from "./cssHelpers";
// Replace Value
const replaceData = (selector, key, value) => {
- return selector.replace(new RegExp(key, "g"), value)
-}
+ return selector.replace(new RegExp(key, "g"), value);
+};
// Object Empty Check
const isEmpty = (obj) => {
- return (typeof obj == 'object' && Object.keys(obj).length != 0) ? true : false
-}
+ return typeof obj == "object" && Object.keys(obj).length != 0 ? true : false;
+};
export const objectReplace = (warp, value) => {
- let output = ''
- value.forEach(sel => { output += sel + ';'; })
- return warp + '{' + output + '}';
-}
-
+ let output = "";
+ value.forEach((sel) => {
+ output += sel + ";";
+ });
+ return warp + "{" + output + "}";
+};
export const objectAppend = (warp, value) => {
- let output = '';
- value.forEach(sel => { output += warp + sel; })
- return output;
-}
+ let output = "";
+ value.forEach((sel) => {
+ output += warp + sel;
+ });
+ return output;
+};
// Plain String/Number Field CSS Replace
export const singleField = (style, key, value) => {
- value = typeof value != 'object' ? value : objectField(value).data
- if (typeof style == 'string') {
- if (style) {
- if (value) {
- let warpData = style
- if (typeof value == 'boolean') {
- return [warpData]
- } else {
- if (warpData.indexOf('{{') == -1 && warpData.indexOf('{') < 0) {
- return [warpData + value]
- } else {
- return [replaceData(warpData, '{{' + key + '}}', value)]
- }
- }
- } else {
- return []
- }
- } else {
- return [value] // Custom CSS Field
- }
- } else {
- let output = [];
-
- if (style) {
- style.forEach(sel => {
- output.push(replaceData(sel, '{{' + key + '}}', value));
- });
- }
- return output;
- }
-}
-
+ value = typeof value != "object" ? value : objectField(value).data;
+ if (typeof style == "string") {
+ if (style) {
+ if (value) {
+ let warpData = style;
+ if (typeof value == "boolean") {
+ return [warpData];
+ } else {
+ if (warpData.indexOf("{{") == -1 && warpData.indexOf("{") < 0) {
+ return [warpData + value];
+ } else {
+ return [replaceData(warpData, "{{" + key + "}}", value)];
+ }
+ }
+ } else {
+ return [];
+ }
+ } else {
+ return [value]; // Custom CSS Field
+ }
+ } else {
+ let output = [];
+
+ if (style) {
+ style.forEach((sel) => {
+ output.push(replaceData(sel, "{{" + key + "}}", value));
+ });
+ }
+ return output;
+ }
+};
// Object Field CSS Replace
const objectField = (data) => {
- if (data.openTypography) {
- return { data: cssTypography(data), action: 'append' }; //Typography
- } else if (data.openBg) {
- return { data: cssBackground(data), action: 'append' }; //Background
- } else if (data.openBorder) {
- return { data: cssBorder(data), action: 'append' }; //Border
- } else if (data.tableBorder) {
- return { data: tableBorder(data), action: 'append' }; //Table Border
- } else if (data.openShadow && data.color) {
- return { data: cssBoxShadow(data), action: 'append' }; //Shadow
- } else if (data.direction) {
- return { data: cssGradient(data, 'return'), action: 'append' }; //Gradient
- } else if (typeof (data.top) != 'undefined' || typeof (data.left) != 'undefined' || typeof (data.right) != 'undefined' || typeof (data.bottom) != 'undefined') {
- return { data: cssDimension(data), action: 'replace' }; //Dimension
- } else if (data.openShape) {
- return { data: cssShape(data), action: 'append' }; //Shape
- } else if (data.openColor) {
- return { data: cssColor(data), action: 'append' }; //Color Advanced
- } else if (data.spaceTop || data.spaceBottom) {
- return { data: cssSpacer(data), action: 'append' }; //Spacer
- } else if (data.selectedSize) {
- return { data: cssSize(data), action: 'append' }; //Size
- } else if (data.openBorderRadius) {
- return { data: cssBorderRadius(data), action: 'append' }; //cssBorderRadius
- } else if (data.openPadding) {
- return { data: cssPadding(data), action: 'append' }; //padding
- } else if (data.openMargin) {
- return { data: cssMargin(data), action: 'append' }; //margin
- } else if (data.openRowReverse) {
- return { data: cssRowReverse(data), action: 'append' }; //column reverse
- } else if (data.openTransfrom) {
- return { data: cssTransform(data), action: 'append' }; //transform
- } else {
- return { data: '', action: 'append' };
- }
-}
-
+ if (data.openTypography) {
+ return { data: cssTypography(data), action: "append" }; //Typography
+ } else if (data.openBg) {
+ return { data: cssBackground(data), action: "append" }; //Background
+ } else if (data.openBorder) {
+ return { data: cssBorder(data), action: "append" }; //Border
+ } else if (data.tableBorder) {
+ return { data: tableBorder(data), action: "append" }; //Table Border
+ } else if (data.openShadow && data.color) {
+ return { data: cssBoxShadow(data), action: "append" }; //Shadow
+ } else if (data.direction) {
+ return { data: cssGradient(data, "return"), action: "append" }; //Gradient
+ } else if (
+ typeof data.top != "undefined" ||
+ typeof data.left != "undefined" ||
+ typeof data.right != "undefined" ||
+ typeof data.bottom != "undefined"
+ ) {
+ return { data: cssDimension(data), action: "replace" }; //Dimension
+ } else if (data.openShape) {
+ return { data: cssShape(data), action: "append" }; //Shape
+ } else if (data.openColor) {
+ return { data: cssColor(data), action: "append" }; //Color Advanced
+ } else if (data.spaceTop || data.spaceBottom) {
+ return { data: cssSpacer(data), action: "append" }; //Spacer
+ } else if (data.selectedSize) {
+ return { data: cssSize(data), action: "append" }; //Size
+ } else if (data.openBorderRadius) {
+ return { data: cssBorderRadius(data), action: "append" }; //cssBorderRadius
+ } else if (data.openPadding) {
+ return { data: cssPadding(data), action: "append" }; //padding
+ } else if (data.openMargin) {
+ return { data: cssMargin(data), action: "append" }; //margin
+ } else if (data.openRowReverse) {
+ return { data: cssRowReverse(data), action: "append" }; //column reverse
+ } else if (data.openTransfrom) {
+ return { data: cssTransform(data), action: "append" }; //transform
+ } else {
+ return { data: "", action: "append" };
+ }
+};
const checkDepends = (settings, selectData, key) => {
- let _depends = true
- if (selectData.hasOwnProperty('condition')) {
- selectData.condition.forEach((data) => {
- let previous = _depends
- if ((data.relation == '==') || (data.relation == '===')) {
- if ((typeof data.value == 'string') || (typeof data.value == 'number') || (typeof data.value == 'boolean')) {
- if (settings[data.key] == data.value) { _depends = true; }
- else { _depends = false }
- } else {
- let select = false
- data.value.forEach(arrData => {
- if (settings[data.key] == arrData) { select = true; }
- })
- if (select) { _depends = true; }
- }
- } else if ((data.relation == '!=') || (data.relation == '!==')) {
- if ((typeof data.value == 'string') || (typeof data.value == 'number') || (typeof data.value == 'boolean')) {
- if (settings[data.key] != data.value) { _depends = true; }
- else { _depends = false; }
- } else {
- let select = false
- data.value.forEach(arrData => {
- if (settings[data.key] != arrData) { select = true; }
- })
- if (select) { _depends = true; }
- }
- }
- if (previous == false) {
- _depends = false
- }
- })
- }
-
- return _depends;
-}
-
+ let _depends = true;
+ if (selectData.hasOwnProperty("condition")) {
+ selectData.condition.forEach((data) => {
+ let previous = _depends;
+ if (data.relation == "==" || data.relation == "===") {
+ if (typeof data.value == "string" || typeof data.value == "number" || typeof data.value == "boolean") {
+ if (settings[data.key] == data.value) {
+ _depends = true;
+ } else {
+ _depends = false;
+ }
+ } else {
+ let select = false;
+ data.value.forEach((arrData) => {
+ if (settings[data.key] == arrData) {
+ select = true;
+ }
+ });
+ if (select) {
+ _depends = true;
+ }
+ }
+ } else if (data.relation == "!=" || data.relation == "!==") {
+ if (typeof data.value == "string" || typeof data.value == "number" || typeof data.value == "boolean") {
+ if (settings[data.key] != data.value) {
+ _depends = true;
+ } else {
+ _depends = false;
+ }
+ } else {
+ let select = false;
+ data.value.forEach((arrData) => {
+ if (settings[data.key] != arrData) {
+ select = true;
+ }
+ });
+ if (select) {
+ _depends = true;
+ }
+ }
+ }
+ if (previous == false) {
+ _depends = false;
+ }
+ });
+ }
+
+ return _depends;
+};
const handleObjects = (settings, key, cssSelector, updateStyle, isInline, sendBack) => {
-
- let device = false;
- let dimension = '';
- let temp = [], nonResponsiveCSS = [];
-
- if (settings[key].md) { // Desktop
- device = true;
-
- if (typeof settings[key].md === 'object') {
- dimension = objectField(settings[key].md).data
- } else {
- dimension = settings[key].md + (settings[key].unit || '')
- }
-
- temp.push({ md: singleField(cssSelector, key, dimension) })
- }
- if (settings[key].sm) { // Tablet
- device = true;
-
- if (typeof settings[key].sm == 'object') {
- dimension = objectField(settings[key].sm).data
- } else {
- dimension = settings[key].sm + (settings[key].unit || '')
- }
-
- temp.push({ sm: singleField(cssSelector, key, dimension) })
-
- }
- if (settings[key].xs) { // Phone
- device = true;
-
- if (typeof settings[key].xs == 'object') {
- dimension = objectField(settings[key].xs).data
- } else {
- dimension = settings[key].xs + (settings[key].unit || '')
- }
-
- temp.push({ xs: singleField(cssSelector, key, dimension) })
- }
-
- if (!device) {
-
- const objectCss = objectField(settings[key]);
- if (typeof objectCss.data == 'object') {
-
- if (Object.keys(objectCss.data).length != 0) {
-
- if (objectCss.data.background) {
- nonResponsiveCSS.push(cssSelector + objectCss.data.background);
- }
-
- if (isEmpty(objectCss.data.md)) {
- temp.push({ md: objectReplace(cssSelector, objectCss.data.md) })
- }
- if (isEmpty(objectCss.data.sm)) {
- temp.push({ sm: objectReplace(cssSelector, objectCss.data.sm) })
- }
- if (isEmpty(objectCss.data.xs)) {
- temp.push({ xs: objectReplace(cssSelector, objectCss.data.xs) })
- }
- if (objectCss.data.simple) {
- nonResponsiveCSS.push(cssSelector + objectCss.data.simple);
- }
- if (objectCss.data.font) {
- nonResponsiveCSS.push(objectCss.data.font);
- }
- if (objectCss.data.shape) {
- (objectCss.data.shape).forEach(
- function (el) {
- nonResponsiveCSS.push(cssSelector + el);
- });
- if (isEmpty(objectCss.data.data.md)) {
- temp.push(objectAppend(cssSelector, objectCss.data.data.md))
- }
- if (isEmpty(objectCss.data.data.sm)) {
- temp.push(objectAppend(cssSelector, objectCss.data.data.sm))
- }
- if (isEmpty(objectCss.data.data.xs)) {
- temp.push(objectAppend(cssSelector, objectCss.data.data.xs))
- }
- }
- }
- } else if (objectCss.data && (objectCss.data).indexOf('{{') == -1) {
- if (objectCss.action == 'append') {
- nonResponsiveCSS.push(cssSelector + objectCss.data);
- } else {
- updateStyle(key, undefined, singleField(cssSelector, key, objectCss.data))
- nonResponsiveCSS.push(singleField(cssSelector, key, objectCss.data));
- }
- }
- }
-
- temp.nonResponsiveCSS = nonResponsiveCSS;
- if (sendBack) {
- return (key, 'Object', temp);
- }
- updateStyle(key, 'Object', temp);
-}
+ let device = false;
+ let dimension = "";
+ let temp = [],
+ nonResponsiveCSS = [];
+
+ if (settings[key].md) {
+ // Desktop
+ device = true;
+
+ if (typeof settings[key].md === "object") {
+ dimension = objectField(settings[key].md).data;
+ } else {
+ dimension = settings[key].md + (settings[key].unit || "");
+ }
+
+ temp.push({ md: singleField(cssSelector, key, dimension) });
+ }
+ if (settings[key].sm) {
+ // Tablet
+ device = true;
+
+ if (typeof settings[key].sm == "object") {
+ dimension = objectField(settings[key].sm).data;
+ } else {
+ dimension = settings[key].sm + (settings[key].unit || "");
+ }
+
+ temp.push({ sm: singleField(cssSelector, key, dimension) });
+ }
+ if (settings[key].xs) {
+ // Phone
+ device = true;
+
+ if (typeof settings[key].xs == "object") {
+ dimension = objectField(settings[key].xs).data;
+ } else {
+ dimension = settings[key].xs + (settings[key].unit || "");
+ }
+
+ temp.push({ xs: singleField(cssSelector, key, dimension) });
+ }
+
+ if (!device) {
+ const objectCss = objectField(settings[key]);
+ if (typeof objectCss.data == "object") {
+ if (Object.keys(objectCss.data).length != 0) {
+ if (objectCss.data.background) {
+ nonResponsiveCSS.push(cssSelector + objectCss.data.background);
+ }
+
+ if (isEmpty(objectCss.data.md)) {
+ temp.push({ md: objectReplace(cssSelector, objectCss.data.md) });
+ }
+ if (isEmpty(objectCss.data.sm)) {
+ temp.push({ sm: objectReplace(cssSelector, objectCss.data.sm) });
+ }
+ if (isEmpty(objectCss.data.xs)) {
+ temp.push({ xs: objectReplace(cssSelector, objectCss.data.xs) });
+ }
+ if (objectCss.data.simple) {
+ nonResponsiveCSS.push(cssSelector + objectCss.data.simple);
+ }
+ if (objectCss.data.font) {
+ nonResponsiveCSS.push(objectCss.data.font);
+ }
+ if (objectCss.data.shape) {
+ objectCss.data.shape.forEach(function (el) {
+ nonResponsiveCSS.push(cssSelector + el);
+ });
+ if (isEmpty(objectCss.data.data.md)) {
+ temp.push(objectAppend(cssSelector, objectCss.data.data.md));
+ }
+ if (isEmpty(objectCss.data.data.sm)) {
+ temp.push(objectAppend(cssSelector, objectCss.data.data.sm));
+ }
+ if (isEmpty(objectCss.data.data.xs)) {
+ temp.push(objectAppend(cssSelector, objectCss.data.data.xs));
+ }
+ }
+ }
+ } else if (objectCss.data && objectCss.data.indexOf("{{") == -1) {
+ if (objectCss.action == "append") {
+ nonResponsiveCSS.push(cssSelector + objectCss.data);
+ } else {
+ updateStyle(key, undefined, singleField(cssSelector, key, objectCss.data));
+ nonResponsiveCSS.push(singleField(cssSelector, key, objectCss.data));
+ }
+ }
+ }
+
+ temp.nonResponsiveCSS = nonResponsiveCSS;
+ if (sendBack) {
+ return key, "Object", temp;
+ }
+ updateStyle(key, "Object", temp);
+};
const handleNonObjects = (settings, key, cssSelector, updateStyle, isInline, sendBack) => {
- let temp = [];
- if (key == 'hideTablet' && isInline) {
- temp.push({ sm: singleField(cssSelector, key, settings[key]) });
- !sendBack && updateStyle(key, 'Object', temp);
- } else if (key == 'hideMobile' && isInline) {
- temp.push({ xs: singleField(cssSelector, key, settings[key]) });
- !sendBack && updateStyle(key, 'Object', temp);
- } else if (typeof settings[key] !== 'undefined') {
- !sendBack && updateStyle(key, undefined, singleField(cssSelector, key, settings[key]));
- }
- if (sendBack && temp.length > 0) {
- return temp;
- } else if (sendBack && typeof settings[key] !== 'undefined') {
- return singleField(cssSelector, key, settings[key]);
- }
-}
+ let temp = [];
+ if (key == "hideDesktop" && isInline) {
+ temp.push({ md: singleField(cssSelector, key, settings[key]) });
+ !sendBack && updateStyle(key, "Object", temp);
+ } else if (key == "hideTablet" && isInline) {
+ temp.push({ sm: singleField(cssSelector, key, settings[key]) });
+ !sendBack && updateStyle(key, "Object", temp);
+ } else if (key == "hideMobile" && isInline) {
+ temp.push({ xs: singleField(cssSelector, key, settings[key]) });
+ !sendBack && updateStyle(key, "Object", temp);
+ } else if (typeof settings[key] !== "undefined") {
+ !sendBack && updateStyle(key, undefined, singleField(cssSelector, key, settings[key]));
+ }
+ if (sendBack && temp.length > 0) {
+ return temp;
+ } else if (sendBack && typeof settings[key] !== "undefined") {
+ return singleField(cssSelector, key, settings[key]);
+ }
+};
export const generateCSS = (blockAttributes, settings, updateStyle, isInline = false) => {
-
- let responsiveCSS = {}, nonResponsiveCSS = {};
-
- Object.keys(settings).forEach((key) => {
- if (blockAttributes[key] && blockAttributes[key].hasOwnProperty('style')) {
- blockAttributes[key].style.forEach(selectData => {
- let cssSelector = selectData.selector;
- if (checkDepends(settings, selectData, key)) {
- if (typeof settings[key] == 'object') {
- responsiveCSS[key] = handleObjects(settings, key, cssSelector, updateStyle, isInline, true);
- } else {
- nonResponsiveCSS[key] = handleNonObjects(settings, key, cssSelector, updateStyle, isInline, true);
- }
- }
- });
- }
- });
- const response = {
- responsiveCSS: responsiveCSS,
- nonResponsiveCSS: nonResponsiveCSS
- }
- updateStyle(response);
-}
-
-
+ let responsiveCSS = {},
+ nonResponsiveCSS = {};
+
+ Object.keys(settings).forEach((key) => {
+ if (blockAttributes[key] && blockAttributes[key].hasOwnProperty("style")) {
+ blockAttributes[key].style.forEach((selectData) => {
+ let cssSelector = selectData.selector;
+ if (checkDepends(settings, selectData, key)) {
+ if (typeof settings[key] == "object") {
+ responsiveCSS[key] = handleObjects(settings, key, cssSelector, updateStyle, isInline, true);
+ } else {
+ nonResponsiveCSS[key] = handleNonObjects(
+ settings,
+ key,
+ cssSelector,
+ updateStyle,
+ isInline,
+ true
+ );
+ }
+ }
+ });
+ }
+ });
+ const response = {
+ responsiveCSS: responsiveCSS,
+ nonResponsiveCSS: nonResponsiveCSS,
+ };
+ updateStyle(response);
+};
export const updateCSS = (blockAttributes, settings, updateStyle, key, isInline = false) => {
- if (blockAttributes[key] && blockAttributes[key].hasOwnProperty('style')) {
- blockAttributes[key].style.forEach(selectData => {
- let cssSelector = selectData.selector;
- if (checkDepends(settings, selectData, key)) {
- if (typeof settings[key] == 'object') {
- handleObjects(settings, key, cssSelector, updateStyle, isInline, false)
- } else {
- handleNonObjects(settings, key, cssSelector, updateStyle, isInline, false)
- }
- }
- });
- }
-}
+ if (blockAttributes[key] && blockAttributes[key].hasOwnProperty("style")) {
+ blockAttributes[key].style.forEach((selectData) => {
+ let cssSelector = selectData.selector;
+ if (checkDepends(settings, selectData, key)) {
+ if (typeof settings[key] == "object") {
+ handleObjects(settings, key, cssSelector, updateStyle, isInline, false);
+ } else {
+ handleNonObjects(settings, key, cssSelector, updateStyle, isInline, false);
+ }
+ }
+ });
+ }
+};
diff --git a/assets/reactjs/src/hooks/with-css-generator/index.js b/assets/reactjs/src/hooks/with-css-generator/index.js
index d3f4ffc6..ab69c4d2 100644
--- a/assets/reactjs/src/hooks/with-css-generator/index.js
+++ b/assets/reactjs/src/hooks/with-css-generator/index.js
@@ -1,274 +1,236 @@
-import { generateCSS, updateCSS } from './generateCSS';
+import { generateCSS, updateCSS } from "./generateCSS";
const { Fragment, Component } = wp.element;
const diff = require("deep-object-diff").diff;
const { PluginBlockSettingsMenuItem } = wp.editPost;
-const { InspectorControls, BlockControls, RichText } = wp.blockEditor
+const { BlockControls } = wp.blockEditor;
const { createHigherOrderComponent } = wp.compose;
-
export default function withCSSGenerator() {
-
- return createHigherOrderComponent((OriginalComponent) => {
- return class WrappedComponent extends Component {
- constructor() {
- super(...arguments);
- this.setState = this.setState.bind(this);
- }
- componentDidMount() {
- this.saveStyleAttributes();
- }
-
- saveStyleAttributes = () => {
- const { attributes, attributes: { uniqueId } } = this.props;
- const blockAttributes = wp.blocks.getBlockType(this.props.name).attributes;
- let responsiveCSS = {}, nonResponsiveCSS = {};
-
- const saveinState = (value => {
- responsiveCSS = value.responsiveCSS;
- nonResponsiveCSS = value.nonResponsiveCSS;
- this.setState({
- responsiveCSS: value.responsiveCSS,
- nonResponsiveCSS: value.nonResponsiveCSS,
- })
- });
-
- generateCSS(blockAttributes, attributes, value => saveinState(value));
-
- if (uniqueId) {
- this.saveCSS(responsiveCSS, nonResponsiveCSS)
- }
- }
- saveCSS = (responsiveCSS, nonResponsiveCSS) => {
-
- let _CSS = '';
- const { attributes: { uniqueId } } = this.props;
- const nonResponsiveAttributes = Object.keys(nonResponsiveCSS);
- const responsiveAttributes = Object.keys(responsiveCSS);
-
- if (nonResponsiveAttributes.length > 0) {
- nonResponsiveAttributes.forEach(attr => {
- if (nonResponsiveCSS[attr]) {
- if (attr === 'hideTablet' && nonResponsiveCSS[attr].length !== 0) {
- _CSS += '@media (max-width: 1199px) and (min-width: 992px) {' + nonResponsiveCSS[attr][0] + '}';
- } else if (attr === 'hideMobile' && nonResponsiveCSS[attr].length !== 0) {
- _CSS += '@media (max-width: 991px) {' + nonResponsiveCSS[attr][0] + '}';
- } else if (typeof nonResponsiveCSS[attr] === 'array') {
- _CSS += nonResponsiveCSS[attr].join(' ');
- } else {
- _CSS += nonResponsiveCSS[attr];
- }
- }
- });
- }
- if (responsiveAttributes.length > 0) {
- responsiveAttributes.forEach(attr => {
- const currentAttribute = responsiveCSS[attr];
- let attrKeys = Object.keys(currentAttribute);
- attrKeys.forEach(key => {
- if (key !== 'nonResponsiveCSS' && typeof currentAttribute[key] === 'object' && Object.keys(currentAttribute[key]).length > 0) {
- if (currentAttribute[key].hasOwnProperty('md') && typeof currentAttribute[key].md !== 'undefined') {
- _CSS += currentAttribute[key].md;
- } else if (currentAttribute[key].hasOwnProperty('sm') && typeof currentAttribute[key].sm !== 'undefined') {
- _CSS += '@media (max-width: 1199px) {' + currentAttribute[key].sm + '}';
- } else if (currentAttribute[key].hasOwnProperty('xs') && typeof currentAttribute[key].xs !== 'undefined') {
- _CSS += '@media (max-width: 991px) {' + currentAttribute[key].xs + '}';
- }
- } else if (key === 'nonResponsiveCSS' && currentAttribute.nonResponsiveCSS.length > 0) {
- _CSS += currentAttribute.nonResponsiveCSS.join(' ');
- }
- });
- });
- }
-
- _CSS = _CSS.replace(new RegExp('{{QUBELY}}', "g"), '.qubely-block-' + uniqueId)
-
- let googleFonts = _CSS.match(new RegExp('@import([^;]*);', "g"));
- if (googleFonts) {
- _CSS = _CSS.replace(new RegExp('@import([^;]*);', "g"), "");
- _CSS = googleFonts + " " + _CSS;
- }
-
- let styleSelector = window.document;
- if (styleSelector.getElementById('qubely-block-' + uniqueId) === null) {
- let cssInline = document.createElement('style');
- cssInline.type = 'text/css';
- cssInline.id = 'qubely-block-' + uniqueId;
- if (cssInline.styleSheet) {
- cssInline.styleSheet.cssText = _CSS;
- } else {
- cssInline.innerHTML = _CSS;
- }
- styleSelector.getElementsByTagName("head")[0].appendChild(cssInline);
- } else {
- styleSelector.getElementById('qubely-block-' + uniqueId).innerHTML = _CSS;
- }
- }
-
-
- componentDidUpdate(prevProps, prevState) {
- const { name, clientId, attributes, attributes: { uniqueId } } = this.props;
- const { responsiveCSS, nonResponsiveCSS } = this.state;
- let isLayoutChanged = false,
- blockAttributes = wp.blocks.getBlockType(this.props.name).attributes,
- changedAttributes = Object.keys(diff(prevProps.attributes, attributes));
-
- const { getBlock, getBlocks, getBlockRootClientId, getBlockIndex } = wp.data.select('core/block-editor');
- const currentBlock = getBlock(clientId);
-
- const rootBlockClientID = (clientId) => {
- if (getBlockRootClientId(clientId)) {
- return rootBlockIndex(getBlockRootClientId(clientId));
- } else {
- return clientId;
- }
- }
- let isDuplicateBlock = false;
-
- const isDuplicatingBlock = (allBlocks) => {
- if (allBlocks.length === 0) {
- return;
- }
- if (prevProps.attributes.uniqueId !== uniqueId) {
- for (let index = 0; index < allBlocks.length; index++) {
- if (allBlocks[index].attributes.uniqueId === prevProps.attributes.uniqueId) {
- isDuplicateBlock = true;
- break;
- } else if (allBlocks[index].innerBlocks.length > 0) {
- isDuplicatingBlock(allBlocks[index].innerBlocks);
- if (isDuplicateBlock) {
- break;
- }
- }
- }
- }
- return isDuplicateBlock;
- }
-
- if (changedAttributes.length > 0) {
- if (changedAttributes.indexOf('layout') !== -1
- || changedAttributes.indexOf('style') !== -1
- || changedAttributes.indexOf('recreateStyles') !== -1
- || changedAttributes.indexOf('fillType') !== -1
- || changedAttributes.indexOf('iconStyle') !== -1
- || changedAttributes.indexOf('buttonFillType') !== -1
- || changedAttributes.indexOf('tabStyle') !== -1
- || changedAttributes.indexOf('separatorStyle') !== -1
- ) {
- isLayoutChanged = true;
- this.saveStyleAttributes();
- }
- if (!isLayoutChanged) {
- if (changedAttributes.indexOf('uniqueId') !== -1) {
- let currentStyleElement = window.document.getElementById('qubely-block-' + prevProps.attributes.uniqueId);
- if (currentStyleElement && !isDuplicatingBlock(getBlocks())) {
- currentStyleElement.id = 'qubely-block-' + attributes.uniqueId;
- let newStyle = currentStyleElement.innerHTML.replace(new RegExp(`${prevProps.attributes.uniqueId}`, "g"), `${attributes.uniqueId}`);
- currentStyleElement.innerHTML = newStyle;
- } else {
- this.saveCSS(responsiveCSS, nonResponsiveCSS);
- }
- }
-
- changedAttributes = changedAttributes.filter(attr => attr !== 'uniqueId');
-
- let newState = {
- nonResponsiveCSS: nonResponsiveCSS,
- responsiveCSS: responsiveCSS
- }
-
- if (changedAttributes.length > 0) {
- const updateState = (attribute, key, value) => {
- if (typeof key === 'undefined') {
- newState = {
- ...newState,
- nonResponsiveCSS: {
- ...newState.nonResponsiveCSS,
- ...{ [attribute]: value }
- }
- }
- } else {
- newState = {
- ...newState,
- responsiveCSS: {
- ...newState.responsiveCSS,
- ...{
- [attribute]: {
- ...newState.responsiveCSS[attribute],
- ...(key === 'simple') ?
- {
- simple: value
- } :
- {
- ...value
- }
- }
- }
- }
- }
- }
-
- if (key === 'Object'
- && attributes[attribute].openTypography
- && attributes[attribute].activeSource === 'global'
- && attributes[attribute].globalSource === 'none') {
- newState.responsiveCSS[attribute] = {}
- }
- }
- changedAttributes.forEach(changedAttribute => {
- updateCSS(blockAttributes, attributes, (attribute, key, value) => updateState(attribute, key, value), changedAttribute);
- this.saveCSS(newState.responsiveCSS, newState.nonResponsiveCSS, 'update');
- });
- this.setState({
- responsiveCSS: newState.responsiveCSS,
- nonResponsiveCSS: newState.nonResponsiveCSS
- });
- }
-
- }
-
- }
- }
-
- copyAttributes = () => {
- const {
- attributes,
- attributes: {
- qubelyStyleAttributes
- }
- } = this.props;
- const { copyToClipboard } = wp.qubelyComponents.HelperFunction;
- let template = {}
- qubelyStyleAttributes.forEach(key => {
- template[key] = attributes[key]
- })
-
- copyToClipboard(JSON.stringify(template))
-
- }
- render() {
- const { attributes: { showCopyAttr } } = this.props;
- return (
-
- {
- showCopyAttr &&
-
- this.copyAttributes()}
- />
-
- }
-
-
- );
- }
- };
- }, 'withCSSGenerator');
+ return createHigherOrderComponent((OriginalComponent) => {
+ return class WrappedComponent extends Component {
+ constructor() {
+ super(...arguments);
+ this.setState = this.setState.bind(this);
+ }
+ componentDidMount() {
+ this.saveStyleAttributes();
+ }
+
+ saveStyleAttributes = () => {
+ const {
+ attributes,
+ attributes: { uniqueId },
+ } = this.props;
+ const blockAttributes = wp.blocks.getBlockType(this.props.name).attributes;
+
+ const saveinState = (value) => {
+ // return;
+ this.setState({
+ responsiveCSS: value.responsiveCSS,
+ nonResponsiveCSS: value.nonResponsiveCSS,
+ });
+ };
+
+ generateCSS(blockAttributes, attributes, (value) => saveinState(value));
+
+ if (uniqueId) {
+ this.saveCSS();
+ }
+ };
+ saveCSS = () => {
+ const {
+ attributes,
+ attributes: { uniqueId },
+ name,
+ } = this.props;
+
+ const {
+ CssGenerator: { CssGenerator },
+ } = wp.qubelyComponents;
+
+ const blockName = name.split("/");
+ CssGenerator(attributes, blockName[1], uniqueId, false);
+ };
+
+ componentDidUpdate(prevProps, prevState) {
+ const {
+ attributes,
+ attributes: { uniqueId },
+ } = this.props;
+ const { responsiveCSS, nonResponsiveCSS } = this.state;
+ let isLayoutChanged = false,
+ blockAttributes = wp.blocks.getBlockType(this.props.name).attributes,
+ changedAttributes = Object.keys(diff(prevProps.attributes, attributes));
+
+ const { getBlocks } = wp.data.select("core/block-editor");
+
+ let isDuplicateBlock = false;
+
+ const isDuplicatingBlock = (allBlocks) => {
+ if (allBlocks.length === 0) {
+ return;
+ }
+ if (prevProps.attributes.uniqueId !== uniqueId) {
+ for (let index = 0; index < allBlocks.length; index++) {
+ if (allBlocks[index].attributes.uniqueId === prevProps.attributes.uniqueId) {
+ isDuplicateBlock = true;
+ break;
+ } else if (allBlocks[index].innerBlocks.length > 0) {
+ isDuplicatingBlock(allBlocks[index].innerBlocks);
+ if (isDuplicateBlock) {
+ break;
+ }
+ }
+ }
+ }
+ return isDuplicateBlock;
+ };
+
+ if (changedAttributes.length > 0) {
+ if (
+ changedAttributes.indexOf("layout") !== -1 ||
+ changedAttributes.indexOf("style") !== -1 ||
+ changedAttributes.indexOf("recreateStyles") !== -1 ||
+ changedAttributes.indexOf("fillType") !== -1 ||
+ changedAttributes.indexOf("iconStyle") !== -1 ||
+ changedAttributes.indexOf("buttonFillType") !== -1 ||
+ changedAttributes.indexOf("tabStyle") !== -1 ||
+ changedAttributes.indexOf("separatorStyle") !== -1
+ ) {
+ isLayoutChanged = true;
+ this.saveStyleAttributes();
+ }
+ if (!isLayoutChanged) {
+ if (changedAttributes.indexOf("uniqueId") !== -1) {
+ let currentStyleElement = window.document.getElementById(
+ "qubely-block-" + prevProps.attributes.uniqueId
+ );
+ if (currentStyleElement && !isDuplicatingBlock(getBlocks())) {
+ currentStyleElement.id = "qubely-block-" + attributes.uniqueId;
+ let newStyle = currentStyleElement.innerHTML.replace(
+ new RegExp(`${prevProps.attributes.uniqueId}`, "g"),
+ `${attributes.uniqueId}`
+ );
+ currentStyleElement.innerHTML = newStyle;
+ } else {
+ this.saveCSS();
+ }
+ }
+
+ changedAttributes = changedAttributes.filter((attr) => attr !== "uniqueId");
+
+ let newState = {
+ nonResponsiveCSS: nonResponsiveCSS,
+ responsiveCSS: responsiveCSS,
+ };
+
+ if (changedAttributes.length > 0) {
+ const updateState = (attribute, key, value) => {
+ if (typeof key === "undefined") {
+ newState = {
+ ...newState,
+ nonResponsiveCSS: {
+ ...newState.nonResponsiveCSS,
+ ...{ [attribute]: value },
+ },
+ };
+ } else {
+ newState = {
+ ...newState,
+ responsiveCSS: {
+ ...newState.responsiveCSS,
+ ...{
+ [attribute]: {
+ ...newState.responsiveCSS[attribute],
+ ...(key === "simple"
+ ? {
+ simple: value,
+ }
+ : {
+ ...value,
+ }),
+ },
+ },
+ },
+ };
+ }
+
+ if (
+ key === "Object" &&
+ attributes[attribute].openTypography &&
+ attributes[attribute].activeSource === "global" &&
+ attributes[attribute].globalSource === "none"
+ ) {
+ newState.responsiveCSS[attribute] = {};
+ }
+ };
+ changedAttributes.forEach((changedAttribute) => {
+ updateCSS(
+ blockAttributes,
+ attributes,
+ (attribute, key, value) => updateState(attribute, key, value),
+ changedAttribute
+ );
+ this.saveCSS();
+ });
+ this.setState({
+ responsiveCSS: newState.responsiveCSS,
+ nonResponsiveCSS: newState.nonResponsiveCSS,
+ });
+ }
+ }
+ }
+ }
+
+ // shouldComponentUpdate(nextProps, nextState) {
+ // if(nextProps.posts && JSON.stringify(nextProps.posts) !== JSON.stringify(this.props.posts) ) {
+ // return true;
+ // }
+ // if (
+ // JSON.stringify(nextProps.attributes) ===
+ // JSON.stringify(this.props.attributes)
+ // ) {
+ // return false;
+ // }
+ // return true;
+ // }
+
+ copyAttributes = () => {
+ const {
+ attributes,
+ attributes: { qubelyStyleAttributes },
+ } = this.props;
+ const { copyToClipboard } = wp.qubelyComponents.HelperFunction;
+ let template = {};
+ qubelyStyleAttributes.forEach((key) => {
+ template[key] = attributes[key];
+ });
+
+ copyToClipboard(JSON.stringify(template));
+ };
+ render() {
+ const {
+ clientId,
+ attributes: { showCopyAttr },
+ } = this.props;
+ let obj = this.props;
+ obj.attributes.uniqueId = clientId.substr(0, 6);
+ return (
+
+ {showCopyAttr && (
+
+ this.copyAttributes()}
+ />
+
+ )}
+
+ );
+ }
+ };
+ }, "withCSSGenerator");
}
diff --git a/assets/reactjs/src/index.js b/assets/reactjs/src/index.js
index a6430e2d..0dc4626f 100644
--- a/assets/reactjs/src/index.js
+++ b/assets/reactjs/src/index.js
@@ -1,129 +1,135 @@
const { __ } = wp.i18n;
const { render } = wp.element;
-import './components/FieldRender';
-import './components/format-library';
-
-import './editor.scss';
-import './blocks/scss/style.scss';
-
-import './blocks/row' // Row
-import './blocks/row/column' // Column
-import './blocks/button' // Button
-import './blocks/text' // Text
-import './blocks/icon' // Icon
-import './blocks/map' // Map
-import './blocks/divider' // Divider
-import './blocks/infobox' // Info Box
-import './blocks/image' // Image
-import './blocks/testimonial' // Testimonial
-import './blocks/accordion' // Accordion
-import './blocks/heading' // Heading Box
-import './blocks/videopopup' // Video popup
-import './blocks/progressbar' // Progress Bar
-import './blocks/counter' // counter
-import './blocks/tabs' // Tabs
-import './blocks/tabs/tab' // Inner Tabs
-import './blocks/socialicons' // Social Icons
-import './blocks/contactform' // Contact Form
-import './blocks/buttongroup' // Button Group
-import './blocks/advancedlist' // Advanced List
-import './blocks/iconlist' // Icon List
-import './blocks/wrapper' // Wrapper
-import './blocks/team' // Team
-import './blocks/pricing' // pricing
-import './blocks/timeline' // Timeline
-import './blocks/postgrid' // Postgrid
-import './blocks/animatedheadline' // Animated Headline
-import './blocks/pieprogress' // PieProgress
-import './blocks/table-of-contents'
-import './blocks/image-comparison' // image-comparison
-
-
-import './plugins';
+import "./components/FieldRender";
+import "./components/format-library";
+
+import "./editor.scss";
+import "./blocks/scss/style.scss";
+
+import "./blocks/row"; // Row
+import "./blocks/row/column"; // Column
+import "./blocks/button"; // Button
+import "./blocks/text"; // Text
+import "./blocks/icon"; // Icon
+import "./blocks/map"; // Map
+import "./blocks/divider"; // Divider
+import "./blocks/infobox"; // Info Box
+import "./blocks/image"; // Image
+import "./blocks/testimonial"; // Testimonial
+import "./blocks/accordion"; // Accordion
+import "./blocks/heading"; // Heading Box
+import "./blocks/videopopup"; // Video popup
+import "./blocks/progressbar"; // Progress Bar
+import "./blocks/counter"; // counter
+import "./blocks/tabs"; // Tabs
+import "./blocks/tabs/tab"; // Inner Tabs
+import "./blocks/socialicons"; // Social Icons
+import "./blocks/contactform"; // Contact Form
+import "./blocks/buttongroup"; // Button Group
+import "./blocks/advancedlist"; // Advanced List
+import "./blocks/iconlist"; // Icon List
+import "./blocks/wrapper"; // Wrapper
+import "./blocks/team"; // Team
+import "./blocks/pricing"; // pricing
+import "./blocks/timeline"; // Timeline
+import "./blocks/postgrid"; // Postgrid
+import "./blocks/animatedheadline"; // Animated Headline
+import "./blocks/pieprogress"; // PieProgress
+import "./blocks/table-of-contents";
+import "./blocks/image-comparison"; // image-comparison
+
+import "./plugins";
// Global Settings
-import './blocks/pagesettings'
+import "./blocks/pagesettings";
-
-window.qubelyDevice = 'md';
+window.qubelyDevice = "md";
window.bindCss = false;
window.globalData = {
- settings: {
- colorPreset1: qubely_admin.palette[0],
- colorPreset2: qubely_admin.palette[1],
- colorPreset3: qubely_admin.palette[2],
- colorPreset4: qubely_admin.palette[3],
- colorPreset5: qubely_admin.palette[4],
- colorPreset6: qubely_admin.palette[5],
- }
+ settings: {
+ colorPreset1: qubely_admin.palette[0],
+ colorPreset2: qubely_admin.palette[1],
+ colorPreset3: qubely_admin.palette[2],
+ colorPreset4: qubely_admin.palette[3],
+ colorPreset5: qubely_admin.palette[4],
+ colorPreset6: qubely_admin.palette[5],
+ },
};
-window.globalSaving = false
+window.globalSaving = false;
// Save CSS in Database/File
-import ParseCss from './helpers/ParseCss';
+import ParseCss from "./helpers/ParseCss";
let unSubscribe = wp.data.subscribe(() => {
- try {
- if (window.bindCss === false) {
- const hasNonPostEntityChanges = wp.data.select('core/editor').hasNonPostEntityChanges();
- const isSaving = wp.data.select("core/editor").isSavingPost();
- const isAutosaving = wp.data.select("core/editor").isAutosavingPost();
- const isPublishing = wp.data.select("core/editor").isPublishingPost();
-
- if (isPublishing || (isSaving && !isAutosaving)) {
- ParseCss(true);
- window.bindCss = true;
- } else {
- const isPreviewing = wp.data.select("core/editor").isPreviewingPost();
- if (isPreviewing) {
- ParseCss(false);
- } else {
- if (hasNonPostEntityChanges) {
- $('.components-button.editor-post-publish-button.editor-post-publish-button__button.is-primary').click(() => {
- setTimeout(() => {
- if (window.bindCss === false) {
- $(".components-button.editor-entities-saved-states__save-button.is-primary").bind("click", function () {
- console.log('saving hasNonPostEntityChanges');
- ParseCss(true);
- });
- window.bindCss = true;
- }
- });
- });
- }
- }
- }
- }
-
- } catch (error) {
- console.error(error);
- }
+ try {
+ if (window.bindCss === false) {
+ const hasNonPostEntityChanges = wp.data.select("core/editor").hasNonPostEntityChanges();
+ const isSaving = wp.data.select("core/editor").isSavingPost();
+ const isAutosaving = wp.data.select("core/editor").isAutosavingPost();
+ const isPublishing = wp.data.select("core/editor").isPublishingPost();
+
+ if (isPublishing || (isSaving && !isAutosaving)) {
+ ParseCss(true);
+ window.bindCss = true;
+ } else {
+ const isPreviewing = wp.data.select("core/editor").isPreviewingPost();
+ if (isPreviewing) {
+ ParseCss(false);
+ } else {
+ if (hasNonPostEntityChanges) {
+ $(
+ ".components-button.editor-post-publish-button.editor-post-publish-button__button.is-primary"
+ ).click(() => {
+ setTimeout(() => {
+ if (window.bindCss === false) {
+ $(".components-button.editor-entities-saved-states__save-button.is-primary").bind(
+ "click",
+ function () {
+ console.log("saving hasNonPostEntityChanges");
+ ParseCss(true);
+ }
+ );
+ window.bindCss = true;
+ }
+ });
+ });
+ }
+ }
+ }
+ }
+ } catch (error) {
+ console.error(error);
+ }
});
-
-
//UPDATE BLOCK CATEGORY ICON
-wp.blocks.updateCategory('qubely', { icon:
});
-
+wp.blocks.updateCategory("qubely", {
+ icon: (
+
+ ),
+});
-import { ImportButton } from './components/others';
+import { ImportButton } from "./components/others";
wp.domReady(function () {
- setTimeout(function () {
-
- const toolbar = document.querySelector('.edit-post-header__toolbar');
- const toolbarChild = document.querySelector('.edit-post-header-toolbar');
-
- if (!toolbar) {
- return
- }
- const qubelyImportWrapper = document.createElement('div');
- qubelyImportWrapper.classList.add("qubely-import-button-wrapper");
-
- if (!toolbar.querySelector('.qubely-import-button-wrapper')) {
- render(
, qubelyImportWrapper);
- toolbar.insertBefore(qubelyImportWrapper, toolbarChild);
- }
- }, 100);
-})
\ No newline at end of file
+ setTimeout(function () {
+ const toolbar = document.querySelector(".edit-post-header__toolbar");
+ const toolbarChild = document.querySelector(".edit-post-header-toolbar");
+
+ if (!toolbar) {
+ return;
+ }
+ const qubelyImportWrapper = document.createElement("div");
+ qubelyImportWrapper.classList.add("qubely-import-button-wrapper");
+
+ if (!toolbar.querySelector(".qubely-import-button-wrapper")) {
+ render(
, qubelyImportWrapper);
+ toolbar.insertBefore(qubelyImportWrapper, toolbarChild);
+ }
+ }, 100);
+});
diff --git a/assets/reactjs/src/plugins/global-settings/components/color.js b/assets/reactjs/src/plugins/global-settings/components/color.js
index c65a5cb2..7eceebfe 100644
--- a/assets/reactjs/src/plugins/global-settings/components/color.js
+++ b/assets/reactjs/src/plugins/global-settings/components/color.js
@@ -1,85 +1,82 @@
-
-import classNames from 'classnames';
-import '../../../components/css/color.scss';
-import icons from '../../../helpers/icons';
+import classNames from "classnames";
+import "../../../components/css/color.scss";
+import icons from "../../../helpers/icons";
const { __ } = wp.i18n;
-const {
- useState,
-} = wp.element;
-
-const {
- Tooltip,
- Dropdown,
- ColorPicker,
-} = wp.components;
-
-
-function Color({ preset, value, onChange, className, deleteOption, onDelete, addNew = undefined, addNewColor = false }) {
+const { useState } = wp.element;
- const classes = classNames(
- 'qubely-field',
- 'qubely-field-color',
- 'qubely-d-flex',
- 'qubely-align-center'
- );
+const { Tooltip, Dropdown, ColorPicker } = wp.components;
- let containerClasses = classNames(
- className,
- 'qubely-color-picker-container',
- { ['qubely-global']: addNewColor },
- { ['add-new-color']: addNewColor },
- )
- return (
-
+function Color({
+ preset,
+ value,
+ onChange,
+ className,
+ deleteOption,
+ onDelete,
+ addNew = undefined,
+ addNewColor = false,
+}) {
+ const classes = classNames("qubely-field", "qubely-field-color", "qubely-d-flex", "qubely-align-center");
-
(
-
-
{
- if (addNewColor) {
- addNew();
- }
- preset !== 'theme' && onToggle()
- }}
- >
- {addNewColor &&
-
- {icons.addColor}
-
- }
-
+ let containerClasses = classNames(
+ className,
+ "qubely-color-picker-container",
+ { ["qubely-global"]: addNewColor },
+ { ["add-new-color"]: addNewColor }
+ );
+ return (
+
+
(
+
+ {
+ if (addNewColor) {
+ addNew();
+ }
+ preset !== "theme" && onToggle();
+ }}
+ >
+ {addNewColor && {icons.addColor} }
+
- {
- deleteOption &&
- onDelete()} />
- }
-
- )}
- renderContent={() => {
- return (
- {
- if (newColor.rgb && newColor.rgb.a != 1) {
- onChange('rgba(' + newColor.rgb.r + ',' + newColor.rgb.g + ',' + newColor.rgb.b + ',' + newColor.rgb.a + ')');
- } else {
- onChange(newColor.hex);
- }
- }}
- />
- )
- }}
- />
-
- );
+ {deleteOption &&
onDelete()} />}
+ {
+ if (newColor.rgb && newColor.rgb.a != 1) {
+ onChange(
+ "rgba(" +
+ newColor.rgb.r +
+ "," +
+ newColor.rgb.g +
+ "," +
+ newColor.rgb.b +
+ "," +
+ newColor.rgb.a +
+ ")"
+ );
+ } else {
+ onChange(newColor.hex);
+ }
+ }}
+ />
+ );
+ }}
+ />
+
+ );
}
-export default Color;
\ No newline at end of file
+export default Color;
diff --git a/assets/reactjs/src/plugins/global-settings/components/index.js b/assets/reactjs/src/plugins/global-settings/components/index.js
index 0db4cd85..2023264d 100644
--- a/assets/reactjs/src/plugins/global-settings/components/index.js
+++ b/assets/reactjs/src/plugins/global-settings/components/index.js
@@ -1,2 +1 @@
-export { default } from './color';
-
+export { default } from "./color";
diff --git a/assets/reactjs/src/plugins/global-settings/constants.js b/assets/reactjs/src/plugins/global-settings/constants.js
index 525b8f2b..f92499e3 100644
--- a/assets/reactjs/src/plugins/global-settings/constants.js
+++ b/assets/reactjs/src/plugins/global-settings/constants.js
@@ -1,551 +1,560 @@
export const ADDNEWDEFAULT = {
- name: undefined,
- key: undefined,
- colors: ['#4A90E2', '#50E3C2', '#000', '#4A4A4A', '#9B9B9B'],
- typography: [
- {
- name: 'Heading 1',
- value: {
- openTypography: 1,
- },
- style: [{
- selector: '{{QUBELY}} h1'
- }]
- },
- {
- name: 'Heading 2',
- value: {
- openTypography: 1,
- },
- style: [{
- selector: '{{QUBELY}} h2'
- }]
- },
- {
- name: 'Heading 3',
- value: {
- openTypography: 1,
- },
- style: [{
- selector: '{{QUBELY}} h3'
- }]
- },
- {
- name: 'Heading 4',
- value: {
- openTypography: 1,
- },
- style: [{
- selector: '{{QUBELY}} h4'
- }]
- },
- {
- name: 'Heading 5',
- value: {
- openTypography: 1,
- },
- style: [{
- selector: '{{QUBELY}} h5'
- }]
- },
- {
- name: 'Heading 6',
- value: {
- openTypography: 1,
- },
- style: [{
- selector: '{{QUBELY}} h6'
- }]
- }
- ],
-}
+ name: undefined,
+ key: undefined,
+ colors: ["#4A90E2", "#50E3C2", "#000", "#4A4A4A", "#9B9B9B"],
+ typography: [
+ {
+ name: "Heading 1",
+ value: {
+ openTypography: 1,
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} h1",
+ },
+ ],
+ },
+ {
+ name: "Heading 2",
+ value: {
+ openTypography: 1,
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} h2",
+ },
+ ],
+ },
+ {
+ name: "Heading 3",
+ value: {
+ openTypography: 1,
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} h3",
+ },
+ ],
+ },
+ {
+ name: "Heading 4",
+ value: {
+ openTypography: 1,
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} h4",
+ },
+ ],
+ },
+ {
+ name: "Heading 5",
+ value: {
+ openTypography: 1,
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} h5",
+ },
+ ],
+ },
+ {
+ name: "Heading 6",
+ value: {
+ openTypography: 1,
+ },
+ style: [
+ {
+ selector: "{{QUBELY}} h6",
+ },
+ ],
+ },
+ ],
+};
export const DEFAULTPRESETS = {
- activePreset: 'preset1',
- presets: {
- preset1: {
- name: 'Preset #1',
- key: 'preset1',
- colors: ['#696CFF', '#04C3EC', '#363636', '#BBC0D4', '#FFFFFF'],
- typography: [
- {
- name: 'Heading 1',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 60,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "80"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- },
- {
- name: 'Heading 2',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 48,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "64"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- },
- {
- name: 'Heading 3',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 36,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "48"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- },
- {
- name: 'Heading 4',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 30,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "36"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- },
- {
- name: 'Heading 5',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 18,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "28"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- },
- {
- name: 'Heading 6',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 16,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "24"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- },
- {
- name: "Paragraph #1",
- scope: 'p',
- value: {
- openTypography: 1,
- size: {
- md: 18,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "24"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- }
- },
- {
- name: "Paragraph #2",
- scope: 'p',
- value: {
- openTypography: 1,
- size: {
- md: 14,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "22"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- }
- },
- {
- name: "Button #1",
- scope: 'button',
- value: {
- openTypography: 1,
- size: {
- md: 16,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "19"
- },
- spacing: {
- unit: "px",
- md: "3",
- xs: "0"
- },
- type: "sans-serif",
- transform: "uppercase",
- weight: 700,
- }
- },
- {
- name: "Button #2",
- scope: 'button',
- value: {
- openTypography: 1,
- size: {
- md: 14,
- unit: "px"
- },
- family: "Roboto",
- height: {
- unit: "px",
- md: "19"
- },
- spacing: {
- unit: "px",
- md: "3",
- xs: "0"
- },
- type: "sans-serif",
- transform: "uppercase",
- weight: 700,
- }
- },
-
- ],
- },
- preset2: {
- name: 'Preset #2',
- key: 'preset2',
- colors: ['#0081FF', '#0053A4', '#363636', '#BBC0D4', '#FFFFFF'],
- typography: [
- {
- name: 'Heading 1',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 60,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "71"
- },
- spacing: {
- unit: "px",
- md: "-2",
- xs: "0"
- },
- type: "sans-serif",
- weight: 300
- }
- },
- {
- name: 'Heading 2',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 48,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "58"
- },
- spacing: {
- unit: "px",
- md: "-0.5",
- xs: "0"
- },
- type: "sans-serif",
- weight: 300
- }
- },
- {
- name: 'Heading 3',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 36,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "44"
- },
- spacing: {
- unit: "px",
- md: "-0.35",
- xs: "0"
- },
- type: "sans-serif",
- weight: 300
- }
- },
- {
- name: 'Heading 4',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 30,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "36"
- },
- spacing: {
- unit: "px",
- md: "-0.31",
- xs: "0"
- },
- type: "sans-serif",
- weight: 300
- }
- },
- {
- name: 'Heading 5',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 26,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "34"
- },
- spacing: {
- unit: "px",
- md: "-0.25",
- xs: "0"
- },
- type: "sans-serif",
- weight: 300
- }
- },
- {
- name: 'Heading 6',
- scope: 'others',
- value: {
- openTypography: 1,
- size: {
- md: 22,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "32"
- },
- spacing: {
- unit: "px",
- md: "-0.21",
- xs: "0"
- },
- type: "sans-serif",
- weight: 300
- }
- },
- {
- name: "Paragraph #1",
- scope: 'p',
- value: {
- openTypography: 1,
- size: {
- md: 18,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "30"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 400
- }
- },
- {
- name: "Paragraph #2",
- scope: 'p',
- value: {
- openTypography: 1,
- size: {
- md: 14,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "22"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 400
- }
- },
- {
- name: "Button #1",
- scope: 'button',
- value: {
- openTypography: 1,
- size: {
- md: 16,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "19"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- },
- {
- name: "Button #2",
- scope: 'button',
- value: {
- openTypography: 1,
- size: {
- md: 14,
- unit: "px"
- },
- family: "Lato",
- height: {
- unit: "px",
- md: "17"
- },
- spacing: {
- unit: "px",
- md: "0",
- xs: "0"
- },
- type: "sans-serif",
- weight: 700
- }
- }
- ],
- },
-
- },
-
-}
+ activePreset: "preset1",
+ presets: {
+ preset1: {
+ name: "Preset #1",
+ key: "preset1",
+ colors: ["#696CFF", "#04C3EC", "#363636", "#BBC0D4", "#FFFFFF"],
+ typography: [
+ {
+ name: "Heading 1",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 60,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "80",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ {
+ name: "Heading 2",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 48,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "64",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ {
+ name: "Heading 3",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 36,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "48",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ {
+ name: "Heading 4",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 30,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "36",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ {
+ name: "Heading 5",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 18,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "28",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ {
+ name: "Heading 6",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 16,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "24",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ {
+ name: "Paragraph #1",
+ scope: "p",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 18,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "24",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ },
+ },
+ {
+ name: "Paragraph #2",
+ scope: "p",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 14,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "22",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ },
+ },
+ {
+ name: "Button #1",
+ scope: "button",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 16,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "19",
+ },
+ spacing: {
+ unit: "px",
+ md: "3",
+ xs: "0",
+ },
+ type: "sans-serif",
+ transform: "uppercase",
+ weight: 700,
+ },
+ },
+ {
+ name: "Button #2",
+ scope: "button",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 14,
+ unit: "px",
+ },
+ family: "Roboto",
+ height: {
+ unit: "px",
+ md: "19",
+ },
+ spacing: {
+ unit: "px",
+ md: "3",
+ xs: "0",
+ },
+ type: "sans-serif",
+ transform: "uppercase",
+ weight: 700,
+ },
+ },
+ ],
+ },
+ preset2: {
+ name: "Preset #2",
+ key: "preset2",
+ colors: ["#0081FF", "#0053A4", "#363636", "#BBC0D4", "#FFFFFF"],
+ typography: [
+ {
+ name: "Heading 1",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 60,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "71",
+ },
+ spacing: {
+ unit: "px",
+ md: "-2",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 300,
+ },
+ },
+ {
+ name: "Heading 2",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 48,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "58",
+ },
+ spacing: {
+ unit: "px",
+ md: "-0.5",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 300,
+ },
+ },
+ {
+ name: "Heading 3",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 36,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "44",
+ },
+ spacing: {
+ unit: "px",
+ md: "-0.35",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 300,
+ },
+ },
+ {
+ name: "Heading 4",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 30,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "36",
+ },
+ spacing: {
+ unit: "px",
+ md: "-0.31",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 300,
+ },
+ },
+ {
+ name: "Heading 5",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 26,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "34",
+ },
+ spacing: {
+ unit: "px",
+ md: "-0.25",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 300,
+ },
+ },
+ {
+ name: "Heading 6",
+ scope: "others",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 22,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "32",
+ },
+ spacing: {
+ unit: "px",
+ md: "-0.21",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 300,
+ },
+ },
+ {
+ name: "Paragraph #1",
+ scope: "p",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 18,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "30",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 400,
+ },
+ },
+ {
+ name: "Paragraph #2",
+ scope: "p",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 14,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "22",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 400,
+ },
+ },
+ {
+ name: "Button #1",
+ scope: "button",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 16,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "19",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ {
+ name: "Button #2",
+ scope: "button",
+ value: {
+ openTypography: 1,
+ size: {
+ md: 14,
+ unit: "px",
+ },
+ family: "Lato",
+ height: {
+ unit: "px",
+ md: "17",
+ },
+ spacing: {
+ unit: "px",
+ md: "0",
+ xs: "0",
+ },
+ type: "sans-serif",
+ weight: 700,
+ },
+ },
+ ],
+ },
+ },
+};
export const DEFAULTBREAKINGPOINTS = {
- sm: 540,
- md: 720,
- lg: 960,
- xl: 1140,
-}
\ No newline at end of file
+ sm: 540,
+ md: 720,
+ lg: 960,
+ xl: 1140,
+};
diff --git a/assets/reactjs/src/plugins/global-settings/index.js b/assets/reactjs/src/plugins/global-settings/index.js
index 353c7c58..247b43ea 100644
--- a/assets/reactjs/src/plugins/global-settings/index.js
+++ b/assets/reactjs/src/plugins/global-settings/index.js
@@ -1,24 +1,20 @@
/* eslint-disable react/react-in-jsx-scope */
-import './style.scss';
-import Color from './components';
-import classnames from 'classnames';
-import icons from '../../helpers/icons';
+import "./style.scss";
+import Color from "./components";
+import classnames from "classnames";
+import icons from "../../helpers/icons";
import {
- getGlobalSettings as getGlobalCSS,
- injectGlobalCSS,
- updateGlobalVaribales,
- setTypoTitleStyle
-} from '../../helpers/globalCSS';
+ getGlobalSettings as getGlobalCSS,
+ injectGlobalCSS,
+ updateGlobalVaribales,
+ setTypoTitleStyle,
+} from "../../helpers/globalCSS";
/**
* Qubely Components
*/
-import Typography from '../../components/fields/Typography';
-import {
- ADDNEWDEFAULT,
- DEFAULTPRESETS,
- DEFAULTBREAKINGPOINTS
-} from './constants';
+import Typography from "../../components/fields/Typography";
+import { ADDNEWDEFAULT, DEFAULTPRESETS, DEFAULTBREAKINGPOINTS } from "./constants";
/**
* WordPress dependencies
@@ -26,967 +22,1025 @@ import {
const { __ } = wp.i18n;
const diff = require("deep-object-diff").diff;
-const {
- Component,
- Fragment,
- createRef
-} = wp.element;
-
-const {
- Tooltip,
- Dropdown,
- PanelBody,
- Notice,
- RangeControl,
- Modal,
-} = wp.components;
+const { Component, Fragment, createRef } = wp.element;
-const {
- select
-} = wp.data;
+const { Tooltip, Dropdown, PanelBody, Notice, RangeControl, Modal } = wp.components;
-const {
- PluginSidebar,
- PluginSidebarMoreMenuItem
-} = wp.editPost;
+const { select } = wp.data;
+const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
-
-const PATH = '/qubely/v1/global_settings';
+const PATH = "/qubely/v1/global_settings";
async function fetchFromApi() {
- return await wp.apiFetch({ path: PATH });
+ return await wp.apiFetch({ path: PATH });
}
-
class GlobalSettings extends Component {
- constructor(props) {
- super(props);
- this.state = {
- presets: {},
- ...DEFAULTPRESETS,
- newTypoScope: 'others',
- newTypoTitle: null,
- renameTypo: undefined,
- enableRenaming: undefined,
- showTypoSettings: undefined,
- showPresetSettings: undefined,
- breakingPoints: {
- sm: 540,
- md: 720,
- lg: 960,
- xl: 1140,
- ...(typeof qubely_container_width !== undefined && qubely_container_width)
- }
- }
- this.ref = createRef();
- this.typoRef = createRef();
- this.saveGlobalCSS = this.saveGlobalCSS.bind(this);
- }
-
- async componentDidMount() {
- const postId = wp.data.select("core/editor").getCurrentPostId();
- let savedMeta;
- if (qubely_admin.is_core_active) {
- await wp.apiFetch({
- path: 'qubely/v1/get_saved_preset',
- method: 'POST',
- data: { postId: postId }
- }).then(response => {
- if (response.saved_preset) {
- savedMeta = JSON.parse(response.saved_preset);
- this.setState({ savedMeta: JSON.parse(response.saved_preset) });
- // console.log('Saved Preset : ', savedMeta);
- }
- });
- }
- // this.getGlobalSettings();
- let hasExistingValues = true;
- fetchFromApi().then(data => {
- if (data.success) {
- if (qubely_admin.is_core_active && savedMeta && (
- savedMeta.key !== data.settings.activePreset ||
- Object.keys(diff({ 'colors': data.settings.presets[data.settings.activePreset].colors }, { 'colors': savedMeta.colors })).length > 0 ||
- Object.keys(diff({ 'typography': data.settings.presets[data.settings.activePreset].typography }, { 'typography': savedMeta.typography })).length > 0 ||
- Object.keys(diff({ 'breakingPoints': data.settings.breakingPoints }, { 'breakingPoints': savedMeta.breakingPoints })).length > 0
- )) {
- const {
- key,
- name,
- colors,
- typography,
- breakingPoints,
- } = savedMeta;
-
- this.setState(({ presets, activePreset, breakingPoints }, props) => {
- let tempPresets = DEFAULTPRESETS;
- tempPresets = {
- ...(typeof presets !== 'undefined' && presets)
- };
- tempPresets[key].name = name;
- tempPresets[key].colors = colors;
- tempPresets[key].typography = typography;
- return {
- // showModal: false,
- isPresetChanged: false,
- presets: tempPresets,
- activePreset: key,
- breakingPoints: breakingPoints,
- };
- });
- updateGlobalVaribales({ key, name, colors, typography }, breakingPoints);
- localStorage.setItem('qubely-global-settings', JSON.stringify({
- ...DEFAULTPRESETS.presets[DEFAULTPRESETS.activePreset],
- key,
- name,
- colors,
- typography,
- breakingPoints: {
- ...this.state.breakingPoints,
- ...(typeof qubely_container_width !== undefined && qubely_container_width),
- ...((typeof breakingPoints !== 'undefined') & breakingPoints)
- },
- }));
-
- let tempData = {
- activePreset: key,
- presets: {
- ...this.state.presets,
- [key]: {
- key,
- name,
- colors,
- typography,
- }
- },
- breakingPoints,
- }
- wp.apiFetch({
- path: PATH,
- method: 'POST',
- data: { settings: JSON.stringify(tempData) }
- }).then(data => {
- return data;
- })
- } else {
- if (Object.keys(data.settings).length === 0) {
- hasExistingValues = false
- this.updateGlobalSettings();
- }
- if (data.settings.activePreset !== 'theme') {
- this.saveGlobalCSS();
- }
- this.setState({ ...data.settings });
- localStorage.setItem('qubely-global-settings', JSON.stringify({
- ...DEFAULTPRESETS.presets[DEFAULTPRESETS.activePreset],
- breakingPoints: {
- ...this.state.breakingPoints,
- ...(typeof qubely_container_width !== undefined && qubely_container_width),
- ...((hasExistingValues && typeof data.settings.breakingPoints !== 'undefined') & data.settings.breakingPoints)
- },
- ...((hasExistingValues && typeof data.settings.presets !== 'undefined' && typeof data.settings.activePreset !== 'undefined') && data.settings.presets[data.settings.activePreset]),
- }));
- }
-
- } else {
- this.setState({ ...DEFAULTPRESETS });
- this.updateGlobalSettings()
- }
- });
- }
-
- async saveGlobalCSS() {
- let _CSS = await getGlobalCSS();
- await injectGlobalCSS(_CSS, 'qubely-global-styles');
- }
-
- async componentDidUpdate(prevProps, prevState) {
- const {
- presets,
- activePreset,
- renameTypo,
- enableRenaming,
- breakingPoints
- } = this.state;
-
- if ((enableRenaming !== prevState.enableRenaming) && typeof enableRenaming !== 'undefined') {
- setTimeout(() => {
- if (typeof this.ref.current !== 'undefined') {
- this.ref.current.focus();
- }
- }, 100);
- }
- if ((renameTypo !== prevState.renameTypo) && typeof renameTypo !== 'undefined') {
- setTimeout(() => {
- if (typeof this.ref.current !== 'undefined') {
- this.typoRef.current.focus();
- }
- }, 100);
- }
-
- if (presets && activePreset) {
- if (activePreset !== prevState.activePreset) {
- updateGlobalVaribales(presets[activePreset], breakingPoints);
- }
- }
-
- if (activePreset !== prevState.activePreset ||
- Object.keys(diff({ 'breakingPoints': breakingPoints }, { 'breakingPoints': prevState.breakingPoints })).length > 0) {
- /**
- * to activate Update button
- */
- wp.data.dispatch('core/editor').editPost({ meta: { _non_existing_meta: true } });
- }
-
- }
-
-
- // getGlobalSettings = () => {
- // let hasExistingValues = true;
- // return fetchFromApi().then(data => {
- // if (qubely_admin.is_core_active && this.state.savedMeta && (
- // this.state.savedMeta.key !== data.settings.activePreset ||
- // Object.keys(diff({ 'colors': data.settings.presets[data.settings.activePreset].colors }, { 'colors': this.state.savedMeta.colors })).length > 0 ||
- // Object.keys(diff({ 'typography': data.settings.presets[data.settings.activePreset].typography }, { 'typography': this.state.savedMeta.typography })).length > 0 ||
- // Object.keys(diff({ 'breakingPoints': data.settings.breakingPoints }, { 'breakingPoints': this.state.savedMeta.breakingPoints })).length > 0
- // )) {
- // console.log('preset changed');
- // this.setState({ isPresetChanged: true, showModal: true });
- // } else {
- // console.log('same preset');
- // this.setState({ isPresetChanged: false });
- // }
- // if (data.success) {
- // if (Object.keys(data.settings).length === 0) {
- // hasExistingValues = false
- // this.updateGlobalSettings();
- // }
- // if (data.settings.activePreset !== 'theme') {
- // this.saveGlobalCSS();
- // }
- // this.setState({ ...data.settings });
- // localStorage.setItem('qubely-global-settings', JSON.stringify({
- // ...DEFAULTPRESETS.presets[DEFAULTPRESETS.activePreset],
- // breakingPoints: {
- // ...this.state.breakingPoints,
- // ...(typeof qubely_container_width !== undefined && qubely_container_width),
- // ...((hasExistingValues && typeof data.settings.breakingPoints !== 'undefined') & data.settings.breakingPoints)
- // },
- // ...((hasExistingValues && typeof data.settings.presets !== 'undefined' && typeof data.settings.activePreset !== 'undefined') & data.settings.presets[data.settings.activePreset]),
-
- // }))
- // } else {
- // this.setState({ ...DEFAULTPRESETS });
- // this.updateGlobalSettings()
- // }
- // });
- // }
- restoreSavedpreset(savedMeta) {
-
- const {
- key,
- name,
- colors,
- typography,
- breakingPoints,
- } = savedMeta;
-
- this.setState(({ presets, activePreset, breakingPoints }, props) => {
- let tempPresets = presets;
- tempPresets[key].name = name;
- tempPresets[key].colors = colors;
- tempPresets[key].typography = typography;
- return {
- // showModal: false,
- isPresetChanged: false,
- presets: tempPresets,
- activePreset: key,
- breakingPoints: breakingPoints,
- };
- });
- updateGlobalVaribales({ key, name, colors, typography }, breakingPoints);
-
-
- }
- updateGlobalSettings = async () => {
- const {
- presets,
- activePreset,
- breakingPoints
- } = this.state;
-
- let tempData = {
- activePreset,
- presets: {
- ...presets
- },
- breakingPoints: {
- ...breakingPoints
- }
- }
- await wp.apiFetch({
- path: PATH,
- method: 'POST',
- data: { settings: JSON.stringify(tempData) }
- }).then(data => {
- return data;
- });
- }
-
- render() {
- const {
- presets,
- breakingPoints,
- renameTypo,
- newTypoScope,
- newTypoTitle,
- activePreset,
- enableRenaming,
- showTypoSettings,
- showPresetSettings,
- isPresetChanged,
- showModal,
- savedMeta,
- } = this.state;
-
- const changeColor = (key, newValue, presetKey) => {
- this.setState(({ presets, activePreset, breakingPoints }, props) => {
- let tempPresets = presets;
- tempPresets[presetKey].colors[key] = newValue;
- updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
- return { presets: tempPresets };
- });
- }
- const addNewColor = (presetKey) => {
- this.setState(({ presets }, props) => {
- let tempPresets = presets;
- tempPresets[presetKey].colors.push('');
- return { presets: tempPresets };
- });
- }
-
- const deleteColor = (index, presetKey) => {
- this.setState(({ presets }, props) => {
- let tempPresets = presets;
- tempPresets[presetKey].colors.splice(index, 1);
- return { presets: tempPresets };
- });
- }
-
- const updateTypography = (addnew = false, presetKey, index, newValue) => {
-
- this.setState(({ newTypoScope, newTypoTitle, presets, activePreset, breakingPoints }) => {
- let tempPresets = presets;
- if (addnew) {
- tempPresets[presetKey].typography.push({
- name: newTypoTitle ? newTypoTitle : 'Custom Typo',
- removable: true,
- scope: newTypoScope,
- value: {
- openTypography: 1,
- }
- });
- } else if (newValue === 'delete') {
- tempPresets[presetKey].typography.splice(index, 1);
- } else {
- tempPresets[presetKey].typography[index].value = newValue;
- }
-
- updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
- return ({
- presets: tempPresets,
- newTypoTitle: null,
- // showTypoSettings: undefined
- });
- });
- }
- const renameTypography = (presetKey, index, newValue) => {
-
- this.setState(({ presets, activePreset, breakingPoints }) => {
- let tempPresets = presets;
- tempPresets[presetKey].typography[index].name = newValue
- updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
- return ({
- presets: tempPresets
- });
- });
- }
- const addNewPreset = (selectedPreset, operation) => {
- this.setState(async (prevState) => {
- let tempPreset, numOfPresets = Object.keys(presets).length;
- if (operation === 'add') {
- tempPreset = selectedPreset;
- } else {
- tempPreset = JSON.parse(JSON.stringify(prevState.presets[selectedPreset]));
- }
-
- const newPresetName = `preset${numOfPresets + 1}`;
- prevState.presets[newPresetName] = tempPreset;
- prevState.presets[newPresetName].key = newPresetName;
-
- if (operation === 'duplicate') {
- prevState.presets[newPresetName].name = `Copy of ${tempPreset.name}`;
- } else {
- prevState.presets[newPresetName].name = `Preset #${numOfPresets + 1}`;
- }
-
- if (operation === 'saveAs') {
- await fetchFromApi().then(data => {
- if (data.success) {
- if (typeof data.settings.presets[selectedPreset] !== 'undefined') {
- prevState.presets[selectedPreset] = data.settings.presets[selectedPreset];
- }
- }
- });
- return ({
- presets: prevState.presets,
- showPresetSettings: undefined
- });
- }
-
- return ({
- presets: prevState.presets
- });
- })
-
- }
- const renderPresets = () => {
-
- const AddNewButton = (message, hint, classes, action = undefined) => {
- return (
-
- action()
- }
- )}
- >
-
-
- {icons.plus_circle}
-
- {__(message)}
-
-
- );
- };
-
- const deletePreset = (selectedPreset) => {
- this.setState(prevState => {
- delete prevState.presets[selectedPreset];
- localStorage.setItem('qubely-global-settings', JSON.stringify(presets[selectedPreset === prevState.activePreset ? 'preset1' : activePreset]));
- return ({
- presets: prevState.presets,
- ...((selectedPreset === prevState.activePreset) && { activePreset: 'preset1' })
- })
- });
- }
-
- const renameTitle = (newTitle = '', presetKey) => {
- this.setState(prevState => {
- prevState.presets[presetKey].name = newTitle;
- return ({
- presets: prevState.presets,
- });
- });
- }
- const themeSupports = wp.data.select('core').getThemeSupports();
- let ThemeSupportCheck = false;
- let themeColorPalette = [], themefontSizes = [];
-
- if ((typeof themeSupports['editor-color-palette'] === 'object' && Array.isArray(themeSupports['editor-color-palette'])) ||
- (typeof themeSupports['editor-font-sizes'] === 'object' && Array.isArray(themeSupports['editor-font-sizes']))
- ) {
- ThemeSupportCheck = true;
-
- if (Array.isArray(themeSupports['editor-color-palette'])) {
- themeColorPalette = themeSupports['editor-color-palette'].map(({ color }) => color);
- }
- if (Array.isArray(themeSupports['editor-font-sizes'])) {
- themefontSizes = themeSupports['editor-font-sizes'].map(({ name, size }) => (
- {
- name,
- scope: "others",
- value: {
- openTypography: true,
- size: {
- md: size,
- unit: 'px'
- }
- }
- }));
-
- themefontSizes.reverse();
- }
-
- if (typeof presets.theme === 'undefined' ||
- Object.keys(diff({ 'colors': themeColorPalette }, { 'colors': presets.theme.colors })).length > 0 ||
- Object.keys(diff({ 'typography': themefontSizes }, { 'typography': presets.theme.typography })).length > 0) {
-
- this.setState(({ presets, activePreset, breakingPoints }) => {
- let tempPresets = presets;
- delete presets.theme;
- tempPresets = {
- theme: {
- name: 'Theme',
- key: 'theme',
- colors: themeColorPalette,
- typography: themefontSizes
- },
- ...presets,
- }
- if (activePreset === 'theme') {
- updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
- }
- return ({
- presets: tempPresets
- });
- });
- }
-
- } else {
- if (presets.theme) {
- deletePreset('theme');
- }
- }
- return (
-
- {
- Object.keys(presets).map((presetKey, index) => {
- const {
- name,
- key,
- colors,
- typography
- } = presets[presetKey];
-
- let isActivePreset = false, showDetailedSettings = false;
-
- if (activePreset === key) {
- isActivePreset = true;
- }
- const changePreset = (index) => {
- this.setState({
- showTypoSettings: undefined,
- activePreset: isActivePreset ? undefined : index
- });
- }
- if (showPresetSettings === index) {
- showDetailedSettings = true;
- }
-
- const classes = classnames(
- 'preset',
- { ['active']: isActivePreset },
- { ['detailed']: showDetailedSettings },
- { ['renaming']: enableRenaming === presetKey }
- )
-
- return (
-
-
-
this.setState(state => ({
- showPresetSettings: showDetailedSettings ? undefined : index,
- enableRenaming: enableRenaming !== presetKey ? undefined : presetKey
- }))
- })}
-
- >
- {
- showDetailedSettings && (
- this.setState(state => ({
- showPresetSettings: showDetailedSettings ? undefined : index,
- ...((enableRenaming === presetKey) && { enableRenaming: undefined })
- }))}
- />
- )
- }
- {
- (enableRenaming === presetKey) ? (
-
- {name}
- {isActivePreset && {__('Active')} }
-
- )
-
-
- }
-
-
(
- showDetailedSettings ?
- {icons.ellipsis_h}
- :
- {icons.ellipsis_v}
- )}
- renderContent={({ onToggle }) => {
- let activeClass = classnames(
- { ['active']: isActivePreset }
- )
- return (
-
-
{ changePreset(key); onToggle() } })} >Activate
- {
- showDetailedSettings ?
-
{ addNewPreset(presetKey, 'saveAs'), onToggle() }}>Save as New
- :
-
- {
- this.setState({
- enableRenaming: presetKey
- });
- onToggle();
- }}
- >
- Rename
-
- { addNewPreset(presetKey, 'duplicate'); onToggle() }}>Duplicate
-
- }
- {
- index > 1 &&
deletePreset(presetKey)}>Delete
- }
-
-
- {
- showDetailedSettings &&
-
-
-
-
- {
- colors.map((value, index) => (
- deleteColor(index, presetKey)}
- onChange={newValue => changeColor(index, newValue, presetKey)}
- />
- ))
- }
- {
- presetKey === 'theme' && (
-
- {
- colors.length > 0 ? __(" Disclaimer: Theme colors aren't editable.") : __("Theme colors not available")
-
- }
-
- )
- }
- {
- presetKey !== 'theme' &&
- addNewColor(presetKey)}
- onChange={newValue => changeColor(presets[presetKey].colors.length - 1, newValue, presetKey)}
- />
- }
-
-
- {
- (typeof typography !== 'undefined' && typography.length > 0) && (
-
- {
- typography.map(({ name, value, scope = 'h', removable = false }, index) => {
-
- let displaySettings = false;
- if (showTypoSettings === index) {
- displaySettings = true;
- }
- let Tag = `h${index + 1}`;
- if (scope === 'p' || (removable && scope === 'others')) {
- Tag = 'p'
- } else if (scope === 'button') {
- Tag = 'button'
- }
- let wrapperClasses = classnames(
- 'qubely-global',
- 'typography',
- { ['removable']: removable }
- )
- let titleClasses = classnames(
- 'typo-name',
- `tag-${Tag}`,
- `index-${index + 1}`,
- { ['active']: displaySettings }
- )
- return (
-
-
- {
- renameTypo === index ?
-
{
- this.typoRef.current.value = this.typoRef.current.value
- }}
- onBlur={() => {
- this.setState({
- renameTypo: undefined
- })
- }}
- onKeyPress={event => {
- if (event.key == 'Enter') {
- this.typoRef.current.blur();
- this.setState({
- renameTypo: undefined
- })
- }
- }
- }
- onChange={event => renameTypography(presetKey, index, event.target.value)}
- />
- :
-
this.setState({ showTypoSettings: displaySettings ? undefined : index })} > {name}
- }
-
- {
- (displaySettings && removable) &&
-
(
- displaySettings ?
- {icons.ellipsis_h}
- :
- {icons.ellipsis_v}
- )}
- renderContent={({ onToggle }) => {
- return (
-
-
{ onToggle(); this.setState({ renameTypo: index }) }}> Rename
-
{ updateTypography(false, presetKey, index, 'delete'); onToggle() }} >delete
-
-
- {displaySettings && (
- presetKey === 'theme' ?
-
- console.log("theme default can't be changed")}
- disabled
- />
-
- {__("Disclaimer: Theme fonts aren't editable.")}
-
-
- :
-
updateTypography(false, presetKey, index, newValue)}
- />
- )}
- updateTypography(true, presetKey)}>
- {AddNewButton('Add new typography', 'Add Typography', "add-new-wrapper add-new-typo")}
-
- )
- }
-
- )}
-
- }
-
- )
- })
- }
- {AddNewButton('Add new preset', 'Add Preset', "add-new-wrapper", () => addNewPreset(ADDNEWDEFAULT, 'add'))}
-
- )
- }
- const updateBreakingPoints = (key, newValue) => {
- this.setState(({ presets, activePreset, breakingPoints }) => {
- let defaultValue = 540;
- if (typeof qubely_container_width !== undefined) {
- defaultValue = qubely_container_width[key]
- } else {
- if (key === 'sm') {
- defaultValue = 720;
- } else if (key === 'md') {
- defaultValue = 960;
- } else if (key === 'lg') {
- defaultValue = 1199;
- }
- }
- let newBreakingPoints = {
- ...breakingPoints,
- [key]: typeof newValue === 'undefined' ? defaultValue : newValue
- }
- updateGlobalVaribales(presets[activePreset], newBreakingPoints);
- return (
- {
- breakingPoints: newBreakingPoints
- });
- });
- }
-
- const {
- isSavingPost,
- isPreviewingPost,
- isPublishingPost,
- isAutosavingPost,
- } = select('core/editor');
-
- if ((isSavingPost() || isPreviewingPost() || isPublishingPost()) && !isAutosavingPost()) {
- this.updateGlobalSettings();
- }
-
- if (typeof showPresetSettings !== 'undefined') {
- const detailedPreset = Object.keys(presets)[showPresetSettings];
- typeof presets[detailedPreset] !== 'undefined' && setTypoTitleStyle(presets[detailedPreset].typography);
- }
- localStorage.setItem('qubely-global-settings', JSON.stringify({ ...presets[activePreset], breakingPoints }));
-
- // if (qubely_admin.is_core_active && isPresetChanged && showModal) {
- // return (
- //
this.setState({ showModal: false })}>
- //
- //
{__("Restore previously saved preset ?")}
- //
- //
- //
{ restoreSavedpreset('no') }}>{__('No')}
- //
{ restoreSavedpreset('yes') }}>{__('Yes')}
- //
- //
- // {__("* Active preset has been changed since this post is last edited")}
- //
- //
- //
- // );
- // }
-
- return (
-
-
- {renderPresets()}
-
- value => `${value}%`}
- onChange={newValue => updateBreakingPoints('sm', newValue)}
- />
- updateBreakingPoints('md', newValue)}
- />
- updateBreakingPoints('lg', newValue)}
- />
- updateBreakingPoints('xl', newValue)}
- />
-
-
- {__('Device definations in terms of ')}{__('min-width')}
- {__('Landscape Mobile : 576px')}
- {__('Tablet : 768px')}
- {__('Desktop : 992px')}
- {__('Large Desktop : 1200px')}
-
-
-
-
-
- {__('Qubely Global Settings')}
-
-
- );
- }
+ constructor(props) {
+ super(props);
+ this.state = {
+ presets: {},
+ ...DEFAULTPRESETS,
+ newTypoScope: "others",
+ newTypoTitle: null,
+ renameTypo: undefined,
+ enableRenaming: undefined,
+ showTypoSettings: undefined,
+ showPresetSettings: undefined,
+ breakingPoints: {
+ sm: 540,
+ md: 720,
+ lg: 960,
+ xl: 1140,
+ ...(typeof qubely_container_width !== undefined && qubely_container_width),
+ },
+ };
+ this.ref = createRef();
+ this.typoRef = createRef();
+ this.saveGlobalCSS = this.saveGlobalCSS.bind(this);
+ }
+
+ async componentDidMount() {
+ const postId = wp.data.select("core/editor").getCurrentPostId();
+ let savedMeta;
+ if (qubely_admin.is_core_active) {
+ await wp
+ .apiFetch({
+ path: "qubely/v1/get_saved_preset",
+ method: "POST",
+ data: { postId: postId },
+ })
+ .then((response) => {
+ if (response.saved_preset) {
+ savedMeta = JSON.parse(response.saved_preset);
+ this.setState({ savedMeta: JSON.parse(response.saved_preset) });
+ // console.log('Saved Preset : ', savedMeta);
+ }
+ });
+ }
+ // this.getGlobalSettings();
+ let hasExistingValues = true;
+ fetchFromApi().then((data) => {
+ if (data.success) {
+ if (
+ qubely_admin.is_core_active &&
+ savedMeta &&
+ (savedMeta.key !== data.settings.activePreset ||
+ Object.keys(
+ diff(
+ { colors: data.settings.presets[data.settings.activePreset].colors },
+ { colors: savedMeta.colors }
+ )
+ ).length > 0 ||
+ Object.keys(
+ diff(
+ { typography: data.settings.presets[data.settings.activePreset].typography },
+ { typography: savedMeta.typography }
+ )
+ ).length > 0 ||
+ Object.keys(
+ diff(
+ { breakingPoints: data.settings.breakingPoints },
+ { breakingPoints: savedMeta.breakingPoints }
+ )
+ ).length > 0)
+ ) {
+ const { key, name, colors, typography, breakingPoints } = savedMeta;
+
+ this.setState(({ presets, activePreset, breakingPoints }, props) => {
+ let tempPresets = DEFAULTPRESETS;
+ tempPresets = {
+ ...(typeof presets !== "undefined" && presets),
+ };
+ tempPresets[key].name = name;
+ tempPresets[key].colors = colors;
+ tempPresets[key].typography = typography;
+ return {
+ // showModal: false,
+ isPresetChanged: false,
+ presets: tempPresets,
+ activePreset: key,
+ breakingPoints: breakingPoints,
+ };
+ });
+ updateGlobalVaribales({ key, name, colors, typography }, breakingPoints);
+ localStorage.setItem(
+ "qubely-global-settings",
+ JSON.stringify({
+ ...DEFAULTPRESETS.presets[DEFAULTPRESETS.activePreset],
+ key,
+ name,
+ colors,
+ typography,
+ breakingPoints: {
+ ...this.state.breakingPoints,
+ ...(typeof qubely_container_width !== undefined && qubely_container_width),
+ ...((typeof breakingPoints !== "undefined") & breakingPoints),
+ },
+ })
+ );
+
+ let tempData = {
+ activePreset: key,
+ presets: {
+ ...this.state.presets,
+ [key]: {
+ key,
+ name,
+ colors,
+ typography,
+ },
+ },
+ breakingPoints,
+ };
+ wp.apiFetch({
+ path: PATH,
+ method: "POST",
+ data: { settings: JSON.stringify(tempData) },
+ }).then((data) => {
+ return data;
+ });
+ } else {
+ if (Object.keys(data.settings).length === 0) {
+ hasExistingValues = false;
+ this.updateGlobalSettings();
+ }
+ if (data.settings.activePreset !== "theme") {
+ this.saveGlobalCSS();
+ }
+ this.setState({ ...data.settings });
+ localStorage.setItem(
+ "qubely-global-settings",
+ JSON.stringify({
+ ...DEFAULTPRESETS.presets[DEFAULTPRESETS.activePreset],
+ breakingPoints: {
+ ...this.state.breakingPoints,
+ ...(typeof qubely_container_width !== undefined && qubely_container_width),
+ ...((hasExistingValues && typeof data.settings.breakingPoints !== "undefined") &
+ data.settings.breakingPoints),
+ },
+ ...(hasExistingValues &&
+ typeof data.settings.presets !== "undefined" &&
+ typeof data.settings.activePreset !== "undefined" &&
+ data.settings.presets[data.settings.activePreset]),
+ })
+ );
+ }
+ } else {
+ this.setState({ ...DEFAULTPRESETS });
+ this.updateGlobalSettings();
+ }
+ });
+ }
+
+ async saveGlobalCSS() {
+ let _CSS = await getGlobalCSS();
+ await injectGlobalCSS(_CSS, "qubely-global-styles");
+ }
+
+ async componentDidUpdate(prevProps, prevState) {
+ const { presets, activePreset, renameTypo, enableRenaming, breakingPoints } = this.state;
+
+ if (enableRenaming !== prevState.enableRenaming && typeof enableRenaming !== "undefined") {
+ setTimeout(() => {
+ if (typeof this.ref.current !== "undefined") {
+ this.ref.current.focus();
+ }
+ }, 100);
+ }
+ if (renameTypo !== prevState.renameTypo && typeof renameTypo !== "undefined") {
+ setTimeout(() => {
+ if (typeof this.ref.current !== "undefined") {
+ this.typoRef.current.focus();
+ }
+ }, 100);
+ }
+
+ if (presets && activePreset) {
+ if (activePreset !== prevState.activePreset) {
+ updateGlobalVaribales(presets[activePreset], breakingPoints);
+ }
+ }
+
+ if (
+ activePreset !== prevState.activePreset ||
+ Object.keys(diff({ breakingPoints: breakingPoints }, { breakingPoints: prevState.breakingPoints })).length >
+ 0
+ ) {
+ /**
+ * to activate Update button
+ */
+ wp.data.dispatch("core/editor").editPost({ meta: { _non_existing_meta: true } });
+ }
+ }
+
+ // getGlobalSettings = () => {
+ // let hasExistingValues = true;
+ // return fetchFromApi().then(data => {
+ // if (qubely_admin.is_core_active && this.state.savedMeta && (
+ // this.state.savedMeta.key !== data.settings.activePreset ||
+ // Object.keys(diff({ 'colors': data.settings.presets[data.settings.activePreset].colors }, { 'colors': this.state.savedMeta.colors })).length > 0 ||
+ // Object.keys(diff({ 'typography': data.settings.presets[data.settings.activePreset].typography }, { 'typography': this.state.savedMeta.typography })).length > 0 ||
+ // Object.keys(diff({ 'breakingPoints': data.settings.breakingPoints }, { 'breakingPoints': this.state.savedMeta.breakingPoints })).length > 0
+ // )) {
+ // console.log('preset changed');
+ // this.setState({ isPresetChanged: true, showModal: true });
+ // } else {
+ // console.log('same preset');
+ // this.setState({ isPresetChanged: false });
+ // }
+ // if (data.success) {
+ // if (Object.keys(data.settings).length === 0) {
+ // hasExistingValues = false
+ // this.updateGlobalSettings();
+ // }
+ // if (data.settings.activePreset !== 'theme') {
+ // this.saveGlobalCSS();
+ // }
+ // this.setState({ ...data.settings });
+ // localStorage.setItem('qubely-global-settings', JSON.stringify({
+ // ...DEFAULTPRESETS.presets[DEFAULTPRESETS.activePreset],
+ // breakingPoints: {
+ // ...this.state.breakingPoints,
+ // ...(typeof qubely_container_width !== undefined && qubely_container_width),
+ // ...((hasExistingValues && typeof data.settings.breakingPoints !== 'undefined') & data.settings.breakingPoints)
+ // },
+ // ...((hasExistingValues && typeof data.settings.presets !== 'undefined' && typeof data.settings.activePreset !== 'undefined') & data.settings.presets[data.settings.activePreset]),
+
+ // }))
+ // } else {
+ // this.setState({ ...DEFAULTPRESETS });
+ // this.updateGlobalSettings()
+ // }
+ // });
+ // }
+ restoreSavedpreset(savedMeta) {
+ const { key, name, colors, typography, breakingPoints } = savedMeta;
+
+ this.setState(({ presets, activePreset, breakingPoints }, props) => {
+ let tempPresets = presets;
+ tempPresets[key].name = name;
+ tempPresets[key].colors = colors;
+ tempPresets[key].typography = typography;
+ return {
+ // showModal: false,
+ isPresetChanged: false,
+ presets: tempPresets,
+ activePreset: key,
+ breakingPoints: breakingPoints,
+ };
+ });
+ updateGlobalVaribales({ key, name, colors, typography }, breakingPoints);
+ }
+ updateGlobalSettings = async () => {
+ const { presets, activePreset, breakingPoints } = this.state;
+
+ let tempData = {
+ activePreset,
+ presets: {
+ ...presets,
+ },
+ breakingPoints: {
+ ...breakingPoints,
+ },
+ };
+ await wp
+ .apiFetch({
+ path: PATH,
+ method: "POST",
+ data: { settings: JSON.stringify(tempData) },
+ })
+ .then((data) => {
+ return data;
+ });
+ };
+
+ render() {
+ const {
+ presets,
+ breakingPoints,
+ renameTypo,
+ newTypoScope,
+ newTypoTitle,
+ activePreset,
+ enableRenaming,
+ showTypoSettings,
+ showPresetSettings,
+ isPresetChanged,
+ showModal,
+ savedMeta,
+ } = this.state;
+
+ const changeColor = (key, newValue, presetKey) => {
+ this.setState(({ presets, activePreset, breakingPoints }, props) => {
+ let tempPresets = presets;
+ tempPresets[presetKey].colors[key] = newValue;
+ updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
+ return { presets: tempPresets };
+ });
+ };
+ const addNewColor = (presetKey) => {
+ this.setState(({ presets }, props) => {
+ let tempPresets = presets;
+ tempPresets[presetKey].colors.push("");
+ return { presets: tempPresets };
+ });
+ };
+
+ const deleteColor = (index, presetKey) => {
+ this.setState(({ presets }, props) => {
+ let tempPresets = presets;
+ tempPresets[presetKey].colors.splice(index, 1);
+ return { presets: tempPresets };
+ });
+ };
+
+ const updateTypography = (addnew = false, presetKey, index, newValue) => {
+ this.setState(({ newTypoScope, newTypoTitle, presets, activePreset, breakingPoints }) => {
+ let tempPresets = presets;
+ if (addnew) {
+ tempPresets[presetKey].typography.push({
+ name: newTypoTitle ? newTypoTitle : "Custom Typo",
+ removable: true,
+ scope: newTypoScope,
+ value: {
+ openTypography: 1,
+ },
+ });
+ } else if (newValue === "delete") {
+ tempPresets[presetKey].typography.splice(index, 1);
+ } else {
+ tempPresets[presetKey].typography[index].value = newValue;
+ }
+
+ updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
+ return {
+ presets: tempPresets,
+ newTypoTitle: null,
+ // showTypoSettings: undefined
+ };
+ });
+ };
+ const renameTypography = (presetKey, index, newValue) => {
+ this.setState(({ presets, activePreset, breakingPoints }) => {
+ let tempPresets = presets;
+ tempPresets[presetKey].typography[index].name = newValue;
+ updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
+ return {
+ presets: tempPresets,
+ };
+ });
+ };
+ const addNewPreset = (selectedPreset, operation) => {
+ this.setState(async (prevState) => {
+ let tempPreset,
+ numOfPresets = Object.keys(presets).length;
+ if (operation === "add") {
+ tempPreset = selectedPreset;
+ } else {
+ tempPreset = JSON.parse(JSON.stringify(prevState.presets[selectedPreset]));
+ }
+
+ const newPresetName = `preset${numOfPresets + 1}`;
+ prevState.presets[newPresetName] = tempPreset;
+ prevState.presets[newPresetName].key = newPresetName;
+
+ if (operation === "duplicate") {
+ prevState.presets[newPresetName].name = `Copy of ${tempPreset.name}`;
+ } else {
+ prevState.presets[newPresetName].name = `Preset #${numOfPresets + 1}`;
+ }
+
+ if (operation === "saveAs") {
+ await fetchFromApi().then((data) => {
+ if (data.success) {
+ if (typeof data.settings.presets[selectedPreset] !== "undefined") {
+ prevState.presets[selectedPreset] = data.settings.presets[selectedPreset];
+ }
+ }
+ });
+ return {
+ presets: prevState.presets,
+ showPresetSettings: undefined,
+ };
+ }
+
+ return {
+ presets: prevState.presets,
+ };
+ });
+ };
+ const renderPresets = () => {
+ const AddNewButton = (message, hint, classes, action = undefined) => {
+ return (
+
+ action(),
+ })}
+ >
+
+ {icons.plus_circle}
+ {__(message)}
+
+
+ );
+ };
+
+ const deletePreset = (selectedPreset) => {
+ this.setState((prevState) => {
+ delete prevState.presets[selectedPreset];
+ localStorage.setItem(
+ "qubely-global-settings",
+ JSON.stringify(presets[selectedPreset === prevState.activePreset ? "preset1" : activePreset])
+ );
+ return {
+ presets: prevState.presets,
+ ...(selectedPreset === prevState.activePreset && { activePreset: "preset1" }),
+ };
+ });
+ };
+
+ const renameTitle = (newTitle = "", presetKey) => {
+ this.setState((prevState) => {
+ prevState.presets[presetKey].name = newTitle;
+ return {
+ presets: prevState.presets,
+ };
+ });
+ };
+ const themeSupports = wp.data.select("core").getThemeSupports();
+ let ThemeSupportCheck = false;
+ let themeColorPalette = [],
+ themefontSizes = [];
+
+ if (
+ (typeof themeSupports["editor-color-palette"] === "object" &&
+ Array.isArray(themeSupports["editor-color-palette"])) ||
+ (typeof themeSupports["editor-font-sizes"] === "object" &&
+ Array.isArray(themeSupports["editor-font-sizes"]))
+ ) {
+ ThemeSupportCheck = true;
+
+ if (Array.isArray(themeSupports["editor-color-palette"])) {
+ themeColorPalette = themeSupports["editor-color-palette"].map(({ color }) => color);
+ }
+ if (Array.isArray(themeSupports["editor-font-sizes"])) {
+ themefontSizes = themeSupports["editor-font-sizes"].map(({ name, size }) => ({
+ name,
+ scope: "others",
+ value: {
+ openTypography: true,
+ size: {
+ md: size,
+ unit: "px",
+ },
+ },
+ }));
+
+ themefontSizes.reverse();
+ }
+
+ if (
+ typeof presets.theme === "undefined" ||
+ Object.keys(diff({ colors: themeColorPalette }, { colors: presets.theme.colors })).length > 0 ||
+ Object.keys(diff({ typography: themefontSizes }, { typography: presets.theme.typography })).length >
+ 0
+ ) {
+ this.setState(({ presets, activePreset, breakingPoints }) => {
+ let tempPresets = presets;
+ delete presets.theme;
+ tempPresets = {
+ theme: {
+ name: "Theme",
+ key: "theme",
+ colors: themeColorPalette,
+ typography: themefontSizes,
+ },
+ ...presets,
+ };
+ if (activePreset === "theme") {
+ updateGlobalVaribales(tempPresets[activePreset], breakingPoints);
+ }
+ return {
+ presets: tempPresets,
+ };
+ });
+ }
+ } else {
+ if (presets.theme) {
+ deletePreset("theme");
+ }
+ }
+ return (
+
+ {Object.keys(presets).map((presetKey, index) => {
+ const { name, key, colors, typography } = presets[presetKey];
+
+ let isActivePreset = false,
+ showDetailedSettings = false;
+
+ if (activePreset === key) {
+ isActivePreset = true;
+ }
+ const changePreset = (index) => {
+ this.setState({
+ showTypoSettings: undefined,
+ activePreset: isActivePreset ? undefined : index,
+ });
+ };
+ if (showPresetSettings === index) {
+ showDetailedSettings = true;
+ }
+
+ const classes = classnames(
+ "preset",
+ { ["active"]: isActivePreset },
+ { ["detailed"]: showDetailedSettings },
+ { ["renaming"]: enableRenaming === presetKey }
+ );
+
+ return (
+
+
+
+ this.setState((state) => ({
+ showPresetSettings: showDetailedSettings ? undefined : index,
+ enableRenaming:
+ enableRenaming !== presetKey ? undefined : presetKey,
+ })),
+ })}
+ >
+ {showDetailedSettings && (
+
+ this.setState((state) => ({
+ showPresetSettings: showDetailedSettings ? undefined : index,
+ ...(enableRenaming === presetKey && {
+ enableRenaming: undefined,
+ }),
+ }))
+ }
+ />
+ )}
+ {enableRenaming === presetKey ? (
+
+ {name}
+ {isActivePreset && (
+ {__("Active")}
+ )}
+
+ )}
+
+
+ showDetailedSettings ? (
+
+ {icons.ellipsis_h}{" "}
+
+ ) : (
+
+ {icons.ellipsis_v}{" "}
+
+ )
+ }
+ renderContent={({ onToggle }) => {
+ let activeClass = classnames({ ["active"]: isActivePreset });
+ return (
+
+
{
+ changePreset(key);
+ onToggle();
+ },
+ })}
+ >
+ Activate
+
+ {showDetailedSettings ? (
+
{
+ addNewPreset(presetKey, "saveAs"), onToggle();
+ }}
+ >
+ Save as New
+
+ ) : (
+
+ {
+ this.setState({
+ enableRenaming: presetKey,
+ });
+ onToggle();
+ }}
+ >
+ Rename
+
+ {
+ addNewPreset(presetKey, "duplicate");
+ onToggle();
+ }}
+ >
+ Duplicate
+
+
+ )}
+ {index > 1 && (
+
deletePreset(presetKey)}>Delete
+ )}
+
+
+ {showDetailedSettings && (
+
+
+
+ {colors.map((value, index) => (
+ deleteColor(index, presetKey)}
+ onChange={(newValue) => changeColor(index, newValue, presetKey)}
+ />
+ ))}
+ {presetKey === "theme" && (
+
+ {colors.length > 0
+ ? __(" Disclaimer: Theme colors aren't editable.")
+ : __("Theme colors not available")}
+
+ )}
+ {presetKey !== "theme" && (
+ addNewColor(presetKey)}
+ onChange={(newValue) =>
+ changeColor(
+ presets[presetKey].colors.length - 1,
+ newValue,
+ presetKey
+ )
+ }
+ />
+ )}
+
+
+ {typeof typography !== "undefined" && typography.length > 0 && (
+
+ {typography.map(
+ ({ name, value, scope = "h", removable = false }, index) => {
+ let displaySettings = false;
+ if (showTypoSettings === index) {
+ displaySettings = true;
+ }
+ let Tag = `h${index + 1}`;
+ if (scope === "p" || (removable && scope === "others")) {
+ Tag = "p";
+ } else if (scope === "button") {
+ Tag = "button";
+ }
+ let wrapperClasses = classnames("qubely-global", "typography", {
+ ["removable"]: removable,
+ });
+ let titleClasses = classnames(
+ "typo-name",
+ `tag-${Tag}`,
+ `index-${index + 1}`,
+ { ["active"]: displaySettings }
+ );
+ return (
+
+
+ {renameTypo === index ? (
+
{
+ this.typoRef.current.value =
+ this.typoRef.current.value;
+ }}
+ onBlur={() => {
+ this.setState({
+ renameTypo: undefined,
+ });
+ }}
+ onKeyPress={(event) => {
+ if (event.key == "Enter") {
+ this.typoRef.current.blur();
+ this.setState({
+ renameTypo: undefined,
+ });
+ }
+ }}
+ onChange={(event) =>
+ renameTypography(
+ presetKey,
+ index,
+ event.target.value
+ )
+ }
+ />
+ ) : (
+
+ this.setState({
+ showTypoSettings: displaySettings
+ ? undefined
+ : index,
+ })
+ }
+ >
+ {" "}
+ {name}
+
+ )}
+
+ {displaySettings && removable && (
+
+ displaySettings ? (
+
+ {icons.ellipsis_h}{" "}
+
+ ) : (
+
+ {icons.ellipsis_v}{" "}
+
+ )
+ }
+ renderContent={({ onToggle }) => {
+ return (
+
+
{
+ onToggle();
+ this.setState({
+ renameTypo: index,
+ });
+ }}
+ >
+ {" "}
+ Rename
+
+
{
+ updateTypography(
+ false,
+ presetKey,
+ index,
+ "delete"
+ );
+ onToggle();
+ }}
+ >
+ delete
+
+
+
+ {displaySettings &&
+ (presetKey === "theme" ? (
+
+
+ console.log(
+ "theme default can't be changed"
+ )
+ }
+ disabled
+ />
+
+ {__(
+ "Disclaimer: Theme fonts aren't editable."
+ )}
+
+
+ ) : (
+
+ updateTypography(
+ false,
+ presetKey,
+ index,
+ newValue
+ )
+ }
+ />
+ ))}
+ updateTypography(true, presetKey)}>
+ {AddNewButton(
+ "Add new typography",
+ "Add Typography",
+ "add-new-wrapper add-new-typo"
+ )}
+
+ )}
+
+ )}
+
+ )}
+
+ );
+ })}
+ {AddNewButton("Add new preset", "Add Preset", "add-new-wrapper", () =>
+ addNewPreset(ADDNEWDEFAULT, "add")
+ )}
+
+ );
+ };
+ const updateBreakingPoints = (key, newValue) => {
+ this.setState(({ presets, activePreset, breakingPoints }) => {
+ let defaultValue = 540;
+ if (typeof qubely_container_width !== undefined) {
+ defaultValue = qubely_container_width[key];
+ } else {
+ if (key === "sm") {
+ defaultValue = 720;
+ } else if (key === "md") {
+ defaultValue = 960;
+ } else if (key === "lg") {
+ defaultValue = 1199;
+ }
+ }
+ let newBreakingPoints = {
+ ...breakingPoints,
+ [key]: typeof newValue === "undefined" ? defaultValue : newValue,
+ };
+ updateGlobalVaribales(presets[activePreset], newBreakingPoints);
+ return {
+ breakingPoints: newBreakingPoints,
+ };
+ });
+ };
+
+ const { isSavingPost, isPreviewingPost, isPublishingPost, isAutosavingPost } = select("core/editor");
+
+ if ((isSavingPost() || isPreviewingPost() || isPublishingPost()) && !isAutosavingPost()) {
+ this.updateGlobalSettings();
+ }
+
+ if (typeof showPresetSettings !== "undefined") {
+ const detailedPreset = Object.keys(presets)[showPresetSettings];
+ typeof presets[detailedPreset] !== "undefined" && setTypoTitleStyle(presets[detailedPreset].typography);
+ }
+ localStorage.setItem("qubely-global-settings", JSON.stringify({ ...presets[activePreset], breakingPoints }));
+
+ // if (qubely_admin.is_core_active && isPresetChanged && showModal) {
+ // return (
+ //
this.setState({ showModal: false })}>
+ //
+ //
{__("Restore previously saved preset ?")}
+ //
+ //
+ //
{ restoreSavedpreset('no') }}>{__('No')}
+ //
{ restoreSavedpreset('yes') }}>{__('Yes')}
+ //
+ //
+ // {__("* Active preset has been changed since this post is last edited")}
+ //
+ //
+ //
+ // );
+ // }
+
+ return (
+
+
+ {renderPresets()}
+
+ (value) => `${value}%`}
+ onChange={(newValue) => updateBreakingPoints("sm", newValue)}
+ />
+ updateBreakingPoints("md", newValue)}
+ />
+ updateBreakingPoints("lg", newValue)}
+ />
+ updateBreakingPoints("xl", newValue)}
+ />
+
+
+
+ {__("Device definations in terms of ")}
+ {__("min-width")}
+
+ {__("Landscape Mobile : 576px")}
+ {__("Tablet : 768px")}
+ {__("Desktop : 992px")}
+ {__("Large Desktop : 1200px")}
+
+
+
+
+
+ {__("Qubely Global Settings")}
+
+
+ );
+ }
}
export default GlobalSettings;
diff --git a/assets/reactjs/src/plugins/global-settings/style.scss b/assets/reactjs/src/plugins/global-settings/style.scss
index b3021603..d633d724 100644
--- a/assets/reactjs/src/plugins/global-settings/style.scss
+++ b/assets/reactjs/src/plugins/global-settings/style.scss
@@ -1,449 +1,447 @@
.qubely-global-settings {
- padding: 15px 18px;
- .preset {
- margin-bottom: 15px;
- &:not(.detailed) {
- .title-wrapper {
- border-radius: 5px;
- border: 1px solid #dbdfe4;
- }
- }
- &.detailed {
- margin-bottom: 0;
- .title-wrapper {
- border-radius: 5px;
- border: 1px solid #dbdfe4;
- background-color: #f8f8f8;
- }
- //.components-panel__body {
- // padding-left: 16px;
- // padding-right: 16px;
- //}
- .qubely-d-flex.qubely-align-justified {
- display: block;
- > div {
- display: inline-block !important;
- &:first-child {
- padding: 0 5px;
- }
- }
- }
- > div:last-child {
- margin-bottom: 15px;
- }
- }
- .components-panel__body {
- padding: 0;
- }
- .components-panel__body-title:hover {
- background: transparent !important;
- }
- .components-panel__body-toggle.components-button {
- padding-left: 0;
- padding-right: 0;
- .components-panel__arrow {
- right: 0;
- }
- }
- .components-panel__body > .components-panel__body-title {
- margin: 0;
- }
- .qubely-global-color-pallete {
- display: flex;
- margin: 0 -2.5px;
- flex-wrap: wrap;
- margin-bottom: 15px;
- .qubely-field {
- margin: 0 2.5px 7px;
- }
- .qubely-color-picker-container .qubely-color-picker {
- border: none;
- }
- }
- .title-wrapper {
- display: flex;
- align-items: center;
- justify-content: space-between;
- cursor: pointer;
- position: relative;
- outline: none;
- color: #191e23;
- box-shadow: none;
- transition: background 0.1s ease-in-out;
- padding: 0 0 0 14px;
- .is-active-label {
- margin-left: auto;
- font-size: 10px;
- line-height: 20px;
- height: 20px;
- padding: 0 9px 0 19px;
- color: #53c17d;
- background: #ecf7f0;
- border-radius: 30px;
- position: relative;
- &::after {
- content: "";
- position: absolute;
- left: 7px;
- height: 6px;
- width: 6px;
- background: #53c17d;
- top: 50%;
- margin-top: -3px;
- border-radius: 50%;
- }
- }
- .title {
- display: inline-flex;
- align-items: center;
- flex-grow: 1;
- padding: 6px 0;
- .radio-button {
- padding-right: 10px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- }
- input:focus {
- outline: none;
- border: none;
- background-color: transparent;
- box-shadow: none;
- }
- .rename-preset {
- cursor: text;
- border: none;
- }
- span.name {
- line-height: 26px;
- }
- }
- .options {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- svg {
- display: block;
- }
- }
- .icon {
- height: 40px;
- padding: 0 14px;
- display: flex;
- align-items: center;
- }
- }
- .qubely-global {
- display: flex;
- flex-direction: column;
- &.add-new-color {
- border: 2px dashed #e9e9e9;
- }
- .typo-name {
- position: relative;
- display: block !important;
- &.active {
- display: flex !important;
- align-items: center;
- justify-content: space-between;
- }
+ padding: 15px 18px;
+ .preset {
+ margin-bottom: 15px;
+ &:not(.detailed) {
+ .title-wrapper {
+ border-radius: 5px;
+ border: 1px solid #dbdfe4;
+ }
+ }
+ &.detailed {
+ margin-bottom: 0;
+ .title-wrapper {
+ border-radius: 5px;
+ border: 1px solid #dbdfe4;
+ background-color: #f8f8f8;
+ }
+ //.components-panel__body {
+ // padding-left: 16px;
+ // padding-right: 16px;
+ //}
+ .qubely-d-flex.qubely-align-justified {
+ display: block;
+ > div {
+ display: inline-block !important;
+ &:first-child {
+ padding: 0 5px;
+ }
+ }
+ }
+ > div:last-child {
+ margin-bottom: 15px;
+ }
+ }
+ .components-panel__body {
+ padding: 0;
+ }
+ .components-panel__body-title:hover {
+ background: transparent !important;
+ }
+ .components-panel__body-toggle.components-button {
+ padding-left: 0;
+ padding-right: 0;
+ .components-panel__arrow {
+ right: 0;
+ }
+ }
+ .components-panel__body > .components-panel__body-title {
+ margin: 0;
+ }
+ .qubely-global-color-pallete {
+ display: flex;
+ margin: 0 -2.5px;
+ flex-wrap: wrap;
+ margin-bottom: 15px;
+ .qubely-field {
+ margin: 0 2.5px 7px;
+ }
+ .qubely-color-picker-container .qubely-color-picker {
+ border: none;
+ }
+ }
+ .title-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ position: relative;
+ outline: none;
+ color: #191e23;
+ box-shadow: none;
+ transition: background 0.1s ease-in-out;
+ padding: 0 0 0 14px;
+ .is-active-label {
+ margin-left: auto;
+ font-size: 10px;
+ line-height: 20px;
+ height: 20px;
+ padding: 0 9px 0 19px;
+ color: #53c17d;
+ background: #ecf7f0;
+ border-radius: 30px;
+ position: relative;
+ &::after {
+ content: "";
+ position: absolute;
+ left: 7px;
+ height: 6px;
+ width: 6px;
+ background: #53c17d;
+ top: 50%;
+ margin-top: -3px;
+ border-radius: 50%;
+ }
+ }
+ .title {
+ display: inline-flex;
+ align-items: center;
+ flex-grow: 1;
+ padding: 6px 0;
+ .radio-button {
+ padding-right: 10px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+ input:focus {
+ outline: none;
+ border: none;
+ background-color: transparent;
+ box-shadow: none;
+ }
+ .rename-preset {
+ cursor: text;
+ border: none;
+ }
+ span.name {
+ line-height: 26px;
+ }
+ }
+ .options {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ svg {
+ display: block;
+ }
+ }
+ .icon {
+ height: 40px;
+ padding: 0 14px;
+ display: flex;
+ align-items: center;
+ }
+ }
+ .qubely-global {
+ display: flex;
+ flex-direction: column;
+ &.add-new-color {
+ border: 2px dashed #e9e9e9;
+ }
+ .typo-name {
+ position: relative;
+ display: block !important;
+ &.active {
+ display: flex !important;
+ align-items: center;
+ justify-content: space-between;
+ }
- color: black;
- cursor: pointer;
- border-radius: 5px;
- border: 1px solid transparent;
- > * {
- padding: 5px 10px;
- }
- input {
- display: inline-block;
- &:focus {
- outline: none;
- border: none;
- background-color: transparent;
- box-shadow: none;
- }
- }
- .rename-typo {
- cursor: text;
- border: none;
- display: inline-block;
- }
- &:hover {
- border-color: #dbdfe4;
- background-color: #f8f8f8;
- }
- &.active {
- border-color: #dbdfe4;
- background-color: #f8f8f8;
- border-bottom-left-radius: 0px;
- border-bottom-right-radius: 0px;
- }
- > * {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- line-height: 22px;
- margin: 0;
- color: #2a2a2a;
- display: block;
- text-align: left;
- &:first-child {
- flex-grow: 1;
- }
- }
- h1 {
- font-size: 48px;
- line-height: 63px;
- }
- h2 {
- font-size: 36px;
- line-height: 48px;
- }
+ color: black;
+ cursor: pointer;
+ border-radius: 5px;
+ border: 1px solid transparent;
+ > * {
+ padding: 5px 10px;
+ }
+ input {
+ display: inline-block;
+ &:focus {
+ outline: none;
+ border: none;
+ background-color: transparent;
+ box-shadow: none;
+ }
+ }
+ .rename-typo {
+ cursor: text;
+ border: none;
+ display: inline-block;
+ }
+ &:hover {
+ border-color: #dbdfe4;
+ background-color: #f8f8f8;
+ }
+ &.active {
+ border-color: #dbdfe4;
+ background-color: #f8f8f8;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ }
+ > * {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ line-height: 22px;
+ margin: 0;
+ color: #2a2a2a;
+ display: block;
+ text-align: left;
+ &:first-child {
+ flex-grow: 1;
+ }
+ }
+ h1 {
+ font-size: 48px;
+ line-height: 63px;
+ }
+ h2 {
+ font-size: 36px;
+ line-height: 48px;
+ }
- &.tag-h3 {
- margin-top: 3px;
- h3 {
- font-size: 32px;
- line-height: 43px;
- }
- }
- &.tag-h4 {
- margin-top: 5px;
- h4 {
- font-size: 28px;
- line-height: 37px;
- }
- }
- &.tag-h5 {
- margin-top: 7px;
- h5 {
- font-size: 24px;
- line-height: 32px;
- }
- }
- &.tag-h6 {
- margin-top: 9px;
- h6 {
- font-size: 21px;
- line-height: 28px;
- }
- }
- &.tag-p {
- margin-top: 9px;
- p {
- width: 100%;
- margin: 0;
- //line-height: 28px;
- }
- }
- &.tag-button {
- margin-top: 9px;
- button {
- border: none;
- background: none;
- width: 100%;
- &:focus {
- outline: none;
- }
- }
- }
- .components-dropdown.options {
- padding: 0px 10px;
- .icon {
- display: flex;
- align-items: center;
- }
- }
- }
- &.typography {
- margin: 0;
- }
- .qubely-field-typography {
- padding: 12px;
- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-top: none;
- .components-dropdown.qubely-field {
- min-width: 70%;
- width: 95%;
- }
- .qubely-field.qubely-field-font-family {
- > label {
- text-align: left;
- }
- }
- .qubely-field-range.qubely-field {
- > .qubely-align-center {
- align-items: flex-start;
- }
- }
- }
- }
- .qubely-global.qubely-color-picker-container,
- .qubely-global.qubely-color-picker-container > span {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- justify-content: center;
- background: transparent;
- }
- .qubely-color-picker-container.added-color {
- position: relative;
- .delete {
- position: absolute;
- top: -1px;
- right: -2px;
- background: #f7f7f7;
- height: 11px;
- width: 11px;
- display: block;
- color: #9b9b9b;
- font-size: 8px;
- text-align: center;
- line-height: 11.5px;
- border-radius: 50%;
- box-shadow: -1px 1px 2px 0 rgba(#000, 0.15);
- opacity: 0;
- transition: 0.15s ease all;
- &:hover {
- color: #2184f9;
- }
- }
- &:hover {
- .delete {
- opacity: 1;
- }
- }
- }
- }
- .components-panel__body {
- border-bottom: 1px solid #e2e4e7;
- border-top: none;
- &:last-child {
- border-bottom: none;
- }
- }
- .add-new-wrapper {
- display: block;
- text-align: center;
- &.add-new-typo {
- margin-bottom: 30px;
- }
- margin-top: 15px;
- .add-new {
- display: inline-flex;
- min-width: 100%;
- align-items: center;
- justify-content: center;
- padding: 10px 10px;
- border-radius: 5px;
- border: 1px dashed #dbdfe4;
- cursor: pointer;
- .icon {
- width: 30px;
- min-width: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
- .components-dropdown.typo-options {
- width: 100%;
- }
+ &.tag-h3 {
+ margin-top: 3px;
+ h3 {
+ font-size: 32px;
+ line-height: 43px;
+ }
+ }
+ &.tag-h4 {
+ margin-top: 5px;
+ h4 {
+ font-size: 28px;
+ line-height: 37px;
+ }
+ }
+ &.tag-h5 {
+ margin-top: 7px;
+ h5 {
+ font-size: 24px;
+ line-height: 32px;
+ }
+ }
+ &.tag-h6 {
+ margin-top: 9px;
+ h6 {
+ font-size: 21px;
+ line-height: 28px;
+ }
+ }
+ &.tag-p {
+ margin-top: 9px;
+ p {
+ width: 100%;
+ margin: 0;
+ //line-height: 28px;
+ }
+ }
+ &.tag-button {
+ margin-top: 9px;
+ button {
+ border: none;
+ background: none;
+ width: 100%;
+ &:focus {
+ outline: none;
+ }
+ }
+ }
+ .components-dropdown.options {
+ padding: 0px 10px;
+ .icon {
+ display: flex;
+ align-items: center;
+ }
+ }
+ }
+ &.typography {
+ margin: 0;
+ }
+ .qubely-field-typography {
+ padding: 12px;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ border-top: none;
+ .components-dropdown.qubely-field {
+ min-width: 70%;
+ width: 95%;
+ }
+ .qubely-field.qubely-field-font-family {
+ > label {
+ text-align: left;
+ }
+ }
+ .qubely-field-range.qubely-field {
+ > .qubely-align-center {
+ align-items: flex-start;
+ }
+ }
+ }
+ }
+ .qubely-global.qubely-color-picker-container,
+ .qubely-global.qubely-color-picker-container > span {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ justify-content: center;
+ background: transparent;
+ }
+ .qubely-color-picker-container.added-color {
+ position: relative;
+ .delete {
+ position: absolute;
+ top: -1px;
+ right: -2px;
+ background: #f7f7f7;
+ height: 11px;
+ width: 11px;
+ display: block;
+ color: #9b9b9b;
+ font-size: 8px;
+ text-align: center;
+ line-height: 11.5px;
+ border-radius: 50%;
+ box-shadow: -1px 1px 2px 0 rgba(#000, 0.15);
+ opacity: 0;
+ transition: 0.15s ease all;
+ &:hover {
+ color: #2184f9;
+ }
+ }
+ &:hover {
+ .delete {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ .components-panel__body {
+ border-bottom: 1px solid #e2e4e7;
+ border-top: none;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ .add-new-wrapper {
+ display: block;
+ text-align: center;
+ &.add-new-typo {
+ margin-bottom: 30px;
+ }
+ margin-top: 15px;
+ .add-new {
+ display: inline-flex;
+ min-width: 100%;
+ align-items: center;
+ justify-content: center;
+ padding: 10px 10px;
+ border-radius: 5px;
+ border: 1px dashed #dbdfe4;
+ cursor: pointer;
+ .icon {
+ width: 30px;
+ min-width: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+ .components-dropdown.typo-options {
+ width: 100%;
+ }
}
.global-settings.preset-options .components-popover__content {
- min-width: 110px;
- padding: 0;
- .global-preset-options {
- padding: 10px 15px;
- > div {
- cursor: pointer;
- padding: 5px 0px;
- &.active {
- color: gainsboro;
- cursor: not-allowed;
- }
- }
- }
+ min-width: 110px;
+ padding: 0;
+ .global-preset-options {
+ padding: 10px 15px;
+ > div {
+ cursor: pointer;
+ padding: 5px 0px;
+ &.active {
+ color: gainsboro;
+ cursor: not-allowed;
+ }
+ }
+ }
}
.typo-popover {
- .components-popover__content {
- border-radius: 5px;
- .new-typo-options {
- padding: 20px;
- .scope {
- margin-bottom: 10px;
- }
- .actions {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- margin-top: 20px;
- margin-bottom: 10px;
- > div {
- width: 70%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- .action {
- border: 1px solid #d6d9dd;
- padding: 5px 12px;
- border-radius: 5px;
- cursor: pointer;
- &.apply {
- color: #2184f9;
- background: #d2e7ff;
- border-color: #a9d0ff;
- }
- }
- }
- }
- .new-typo-title {
- .components-base-control__label {
- padding: 3px 0px;
- }
- }
- }
- }
+ .components-popover__content {
+ border-radius: 5px;
+ .new-typo-options {
+ padding: 20px;
+ .scope {
+ margin-bottom: 10px;
+ }
+ .actions {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ > div {
+ width: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .action {
+ border: 1px solid #d6d9dd;
+ padding: 5px 12px;
+ border-radius: 5px;
+ cursor: pointer;
+ &.apply {
+ color: #2184f9;
+ background: #d2e7ff;
+ border-color: #a9d0ff;
+ }
+ }
+ }
+ }
+ .new-typo-title {
+ .components-base-control__label {
+ padding: 3px 0px;
+ }
+ }
+ }
+ }
}
.theme-typo-wrapper {
- padding: 12px;
- border-radius: 5px;
- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-top: none;
- border: 1px solid #e9e9e9;
- background-color: #ffffff;
- border-top: none;
+ padding: 12px;
+ border-radius: 5px;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ border-top: none;
+ border: 1px solid #e9e9e9;
+ background-color: #ffffff;
+ border-top: none;
}
.qubely-global-color-pallete,
.qubely-global.typography {
- .components-notice {
- margin-left: 0px;
- margin-right: 0px;
- width: 100%;
- }
+ .components-notice {
+ margin-left: 0px;
+ margin-right: 0px;
+ width: 100%;
+ }
}
-.qubely-row-device{
- .components-notice.is-warning{
- margin-left: 0px;
- }
- .components-notice__content{
- margin-right: 0px;
- .qubely-device-description {
- padding: 2px 0px;
- &.title{
- margin-bottom: 2px;
- }
- }
- }
-
+.qubely-row-device {
+ .components-notice.is-warning {
+ margin-left: 0px;
+ }
+ .components-notice__content {
+ margin-right: 0px;
+ .qubely-device-description {
+ padding: 2px 0px;
+ &.title {
+ margin-bottom: 2px;
+ }
+ }
+ }
}
-
diff --git a/assets/reactjs/src/plugins/index.js b/assets/reactjs/src/plugins/index.js
index 7ad28ca8..556f0424 100644
--- a/assets/reactjs/src/plugins/index.js
+++ b/assets/reactjs/src/plugins/index.js
@@ -1,11 +1,9 @@
-
-import GlobalSettings from './global-settings';
+import GlobalSettings from "./global-settings";
const { registerPlugin } = wp.plugins;
-registerPlugin( 'qubely-global-settings', {
+registerPlugin("qubely-global-settings", {
render() {
return
;
},
-} );
-
+});
diff --git a/changelog.md b/changelog.md
deleted file mode 100644
index c212a0c7..00000000
--- a/changelog.md
+++ /dev/null
@@ -1,505 +0,0 @@
-# Qubely Changelog
-
-
-### 1.6.9 - 10 June, 2021
-Fix: Reusable Block and it's CSS saving issues in Wordpress 5.7
-Fix: Divider block - divider options not showing
-Fix: Table of Contents block - Invalid JSON while parsing headings
-Fix: Advanced Text block - Title color not working if inline link added
-
-### 1.6.8 - 11 March, 2021
-Fix: Interaction conflict with WordPress 5.7
-
-### 1.6.7 - 11 March, 2021
-Fix: Theme demo importing conflict with global settings
-
-### 1.6.6 - 04 March, 2021
-Fix: Google fonts retrieve issue from Global settings
-
-
-### 1.6.5 - 22 February, 2021
-New: Settings to enable/disable loading Font Awesome CSS on frontend
-New: Settings to enable/disable loading Google Fonts on the frontend
-
-### 1.6.4 - 09 February, 2021
-Update: Optimised Font Awesome CSS loading on Front-end
-Update: Contact Form block - Linebreak support in message
-Fix: Table of Contents block - Indent value not saving
-Fix: Row block - Shape divider picker not showing
-Fix: Media field - Image picker conflict with WordPress 5.6
-
-### 1.6.3 - 18 December, 2020
-Update: Backend API changes from layout/sections in Backend
-Fix: Import layout button missing in WordPress 5.6
-
-### 1.6.2 - 08 December, 2020
-New: Post Grid block - Restructured Pagination in Backend
-Update: Row block - Removed unnecessary padding,margin for better UX
-Update: Image block - Custom height option for image
-Update: Infobox block - Custom height option for image
-Fix: Image block - Border-radius issue for smaller images
-Fix: Table of Contents block - Back to top button error on Frontend
-
-### 1.6.1 - 20 November, 2020
-New: Tab block - Auto switch & Progress-bar option
-New: Post Grid block - Custom Post-type support
-New: Tabs block - New layouts for tab titles
-Update: CSS preview issue on Frontend
-Update: Replaced deprecated jQuery functions
-Fix: Tab block - Missing add new block option in new tab for latest WordPress version
-
-### 1.6.0 - 23 October, 2020
-New: Richtext Custom font-size format
-New: Range field - disable option
-Fix: CSS issue on Preview posts
-Fix: Team block - Internationalization issue on Frontend
-Fix: Table of content block - List styling issue
-Fix: Advanced Text block - Typography issue
-Update: Border filed - Custom Border disable option
-
-
-### 1.5.5 - 16 September, 2020
-Fix: Fixed Plugin build issue for version 1.5.4
-
-### 1.5.4 - 16 September, 2020
-New: Richtext Tooltip format
-Update: Restored missing fonts
-Update: 'Edit as html' option in parent blocks
-Fix: Contact Form block - Email sending issue
-Fix: Contact Form block - Deprecated support
-Fix: Advanced Text block - Text font size in editor
-Fix: Global Settings - Old installations undefined preset issue
-Fix: Import layout button conflict with new Gutenberg Plugin
-
-
-### 1.5.3 - 21 August, 2020
-New: Import Sections/Layouts with Global settings
-New: Inline Color and Background Color compatibility with Global settings
-New: Theme Preset activation hook
-New : Row block - Even Column Height option
-Update: All blocks - Context Menu refs
-Fix: Parse Qubely block issue for CSS generator
-Fix: Accordion block - inline style issue
-Fix: Accordion block - Accordion title editing issue on Safari
-Fix: Dropdown Component - initial options issue with API call
-
-
-### 1.5.2 - 29 July, 2020
-New: Accordion block - Rich Snippet added
-New: Row block - Shape divider flip option
-Update: Added 100+ Google fonts
-Fix: Divider block - Divider options in Panel
-Fix: Button block - Font size issue in Frontend
-Fix: Button block - Button width in Backend
-Fix: Button block - Text editing issue in Safari browser
-Fix: Table of Contents block - CSS issue
-
-
-### 1.5.1 - 08 July, 2020
-New : Theme colors support in Global settings
-New : Row Container width settings in Global settings
-New : Row Container width filter hook to modify default values from theme
-Update: Blocks initial primary color updated with preset color
-Update: Gradient field - Global setting color support
-Update: Post Grid pagination default margin added
-Fix: Post Grid pagination backend spacing issue
-Fix: Accordion Block gradient Issue
-
-### 1.5.0 - 16 June, 2020
-Fix: Image Block whitespace issue
-Fix: Inspector Tabs Error
-Fix: External ajax request issue
-Fix: Minor CSS issues
-
-### 1.4.2 - 13 June, 2020
-Fix: Image Block display issue
-
-### 1.4.1 - 12 June, 2020
-New: Post Grid pagination
-New: Getting Started page redesign
-Fix: Minor bug fix
-
-### 1.4.0 - 21 May, 2020
-New: Global Settings
-New: Qubely Settings page - with Google Map API key, reCAPTCHA key storage
-Fix: Accordion block - Active Panel color
-Fix: Contact Form block - Form Submit issue
-
-### 1.3.91 - 29 April, 2020
-Fix: Typography & Box Shadow panel css issue
-Fix: Image comparison block firefox touch issue
-Update: Performance improvement
-
-### 1.3.9 - 27 April, 2020
-Fix: Testimonial block - ratings backward compatibility issue
-Fix: Image comparison block responsive issue
-
-### 1.3.8 - 22 April, 2020
-New: Image comparison Block
-Update: Tabs inner blocks new structure support
-Fix: Tabs Block contents is not displaying
-Fix: Table of Contents block - Attributes value saving issue
-Fix : Heading block - Typography disable issue in backend
-Fix : Conflict with Table of Contents Plus plugin
-
-
-### 1.3.7 - 03 April, 2020
-Fix: Image block - Alignment issue in Simple layout
-Fix: Panel Sticky tab conflict with WordPress 5.4
-Fix: Post Grid block - Orderby issue with Random, Menu Order
-
-
-### 1.3.6 - 24 March, 2020
-Update: All blocks - Major improvement in Panel UI & UX
-Fix: Advanced Settings - Hide Tablet/ Hide Mobile issue
-Fix: Row block - Full width option not working in Twenty Twenty Theme
-
-
-### 1.3.5 - 16 March, 2020
-New: Support for WordPress 5.4
-New: Image block - URL in blurb layout
-Update: Button Group block - Restructure
-Fix: Team block - Alignment option in layout 3
-Fix: Testimonial block - Ratings CSS issue
-Fix: Contact form block - Value encryption issue
-Fix: Info Box block - Media background CSS issue
-Fix: Advanced list block - Number, Bullet size & color not working
-Fix: CSS generator - String type attributes (Color) value reset not working
-
-
-### 1.3.4 - 27 February, 2020
-New: Team block - External image option
-Update: Counter block - Viewport support added
-Fix: CSS generator block duplication issue
-Fix: Column block - uniqueId issue in case of Row duplication
-Fix: Row block - Advanced background option
-Fix: Image block - Whitespace issue
-Fix: Heading block - Separator color in the backend
-Fix: Range field - CSS updating issue on unit change
-Fix: Typography field - CSS updating issue on unit change
-
-### 1.3.3 - 18 February, 2020
-Fix: Post Grid block - Translation issue of the dates
-Fix: Post Grid block - Post title position settings in frontend
-Fix: CSS issue on template selection
-Update: Performance improvement
-
-### 1.3.2 - 12 February, 2020
-New : Background field - external image option
-Update : Performance improvement in CSS generator
-Fix: Context menu z-index issue
-
-### 1.3.1 - 31 January, 2020
-New: Table of Contents block
-Update : Map block - Default place id
-Fix: PageModal conflict with Learndash
-Fix: Customizer - Loading Async script issue
-
-
-### 1.3.0 - 21 January, 2020
-New: Animated Headline block
-Update: Block specific script loading on the frontend
-Update: Conditional script loading for interactions, animations, and parallax
-Update: Optimised CSS files on the frontend
-Update: Infobox block - External image option
-Fix: BuddyBoss conflict issue
-Fix: Row block - Background overlay issue
-Fix: Gradient field - Default preview issue
-
-
-### 1.2.9 - 13 January, 2020
-New: Image block - External Image option
-Fix: Contact form block - focus border issue
-
-
-### 1.2.8 - 06 January, 2020
-Fix: Contact form block - reCAPTCHA issue
-Fix: Additional CSS class issue in Back-end
-Fix: Button Group block - Button width issue
-Fix: Carousel blocks - Active item dot indicator in Back-end
-Update: Block specific script loading in Front-end
-
-
-### 1.2.7 - 23 December, 2019
-New: Pie Progress block
-New: Predesigned block template feature
-New: Transform function in CSS generator
-Update: Column block default UI
-Fix: Block control CSS issue for blocks inside columns
-Fix: Reusable block issue in rows
-Fix: Post Grid block - Excerpt issue
-
-
-### 1.2.6 - 05 December, 2019
-New: Full Width, Wide Width alignment option in all blocks
-Update: Improvement in Interaction
-Fix: Team block - Social icons hover issue
-
-### 1.2.5 - 28 November, 2019
-New: Team block - Image border
-New: Team block - Image box shadow
-New: Media field - Local video preview option in Panel
-Fix: Dropdown field - Search
-Fix: Post Grid block - Stack background in style 3
-Fix: InfoBox block - Placeholder image width adjustment issue
-Fix: Contact Form block - Input field background Material layout
-Fix: Broken CSS issue after editing original Reusable blocks
-Update: Tabs block - Frontend script
-Update: Tabs block - Block preview
-Update: Tabs block, Video popup block - Preview image path
-
-
-### 1.2.4 - 20 November, 2019
-New: Block preview option added
-New: Post Grid block - context menu
-Fix: CSS issue fixed in Reusable blocks
-Fix: Interaction issue fixed
-Fix: Typography field - Search option
-Fix: Divider block - Divider color issue
-Fix: Icon list block - Padding issue
-Fix: Team block - Alignment issue
-Fix: Icon list block - Animation issue
-Fix: Button Group block - Animation issue
-Fix: Timeline block - Responsive issue
-Fix: Infobox block - Image width issue
-Fix: Image block - Animation issue
-Update: Team block - Image width
-Update: Import layout design
-
-### 1.2.3 - 12 November, 2019
-Update: WordPress 5.3 compatibility added
-Update: Heading block - Replaced deprecated components: RichText, InspectorControls, BlockControls
-
-
-### 1.2.2 - 11 November, 2019
-New: add_theme_support added to qubely-color-palette
-Fix: CSS loading from file issue
-Fix: Qubely CSS loading in non-Qubely pages
-Fix: Global settings issue
-Fix: Post Grid block - Date issue fixed
-Update: Few label texts
-
-### 1.2.1 - 01 November, 2019
-Fix: Import Layout - Sections & Starter Packs count & search issue fixed
-Update: Import Layout - Recategorized Sections & Starter Packs
-
-
-### 1.2.0 - 30 October, 2019
-New: Mouse Movement effect
-Update: Contact Form block - Script
-Update: Post Grid block - Style
-
-
-### 1.1.6 - 09 October, 2019
-Fix: Contact Form block - CSS issue in input fields
-Fix: Image block - CSS issue
-Fix: Video Popup block - fixed layout naming issue
-
-### 1.1.5 - 01 October, 2019
-Fix: CSS issue in import layout modal
-Fix: Image block - Removed empty space
-Update: Carousel field - Bug fixed & finalized
-
-
-### 1.1.4 - 24 September, 2019
-New: Image block - Image URL option
-Update: Timeline block - Item removing option
-Fix: Row block - Column reverse issue for child rows
-Fix: Row block - Column issue in responsive devices
-
-### 1.1.3 - 19 September, 2019
-
-New: 2 page templates - Qubely Full Width, Qubely Canvas
-Update: Performance improvement
-Update: Refactored components & fields
-Fix: Post Grid block - Category clickable issue in Edit view
-
-### 1.1.2 - 06 September, 2019
-
-Fix: Font weight issue in frontend
-Fix: Conflict with Gutenberg plugin
-
-### 1.1.1 - 03 September, 2019
-
-Fix: Post Grid block - Front end issue
-
-### 1.1.0 - 02 September, 2019
-
-New: Post Grid block
-New: Custom dropdown field with search option
-
-### 1.0.9 - 23 August, 2019
-
-Update: Timeline block - Item limit increased to 100 from 20
-Fix: Inline CSS issue on frontend
-
-### 1.0.8 - 09 August, 2019
-
-New: Timeline block
-New: Info Box block - Retina image uploading option
-New: Team block - Retina image uploading option
-New: Testimonial block - Retina image uploading option
-Fix: Image block - Top and bottom spacer issue
-Fix: CSS duplication issue on frontend
-
-### 1.0.7 - 06 August, 2019
-
-New: Image Block
-Update: Testimonial Block - Ratings settings UI improved
-Fix: Qubely Options page issue
-
-### 1.0.6 - 01 August, 2019
-
-New: Block Wrapper - Image background option
-Update: Infobox Block - Settings UI improved
-Update: Media field improvement
-Fix: Row Block - Column reverse setting
-
-### 1.0.5 - 24 July, 2019
-
-Update: Advanced Text Block - HTML support for RichText
-Update: Testimonial Block - HTML support for RichText
-Update: Infobox Block - HTML support for RichText and image alt text
-Update: Pricing Block - HTML support for RichText
-Fix: CSS issue while exporting/importing pages
-Fix: Button Block - Outline layout hover fill color
-
-### 1.0.4 - 15 July, 2019
-
-Update: InfoBox Block - Button enable/disable toggle position
-Update: Button Component - Panel settings improvement
-Fix: Row - Margin field issue fixed
-
-### 1.0.3 - 11 July, 2019
-
-New: Block style copy/paste option on the context menu
-New: Typography field - gets Font family & font-weight reset option
-Fix: Button block/Button component - has default text-color & background-color for layouts
-Fix: Accordion block - not saving separator value issue
-Fix: Import layout modal conflict with Yoast SEO plugin
-
-### 1.0.2 - 08 July, 2019
-
-New: Button Group block - Responsive setting in Alignment field
-Update: Info Box block - Button default tag
-Update: Import layout modal modification
-Fix: Tabs block - inactive tab content display issue in Backend
-
-### 1.0.1 - 01 July, 2019
-
-New: Column block - Add column option in BlockControls
-Update: Social Icons block - Used Gutenberg’s Popover component
-Update: Icon List block - Used Gutenberg’s Popover component
-Fix: Styling issue while previewing post
-Fix: Column block - CSS selector to fix styles in child row’s columns
-Fix: Icon List block - Issue with item removal using Backspace
-Fix: Pricing block - Issue with removing any newly added feature
-Fix: Social Icons block - Icon label inline changing issue
-
-### 1.0.0 - 20 June, 2019
-
-New: Premade sections & layouts
-New: Info Box block - Content disable option
-New: Team block - Padding option for content
-New: Contact Form block - Button alignment option
-New: Pricing & Features blocks - Custom alignment option
-New: Advanced List block - Background size option for number
-New: Button Group block - Alignment field
-Update: Redesigned import layout modal UI
-Update: Dimension field in Row & Column blocks
-Update: Testimonial block - Replaced dashicons with Font Awesome
-Fix: Accordion block - Heading update issue
-Fix: Advanced List block - Bullet icon changing issue
-Fix: Advanced List block - Line height issue
-Fix: Advanced Text & Title blocks - Separator stroke value update issue
-Fix: Advanced settings - Z-index value update issue
-Fix: Block manager - Resized qubely icons
-Fix: Button block - Button URL open in new window setting issue
-Fix: Button Group block - Spacing option issue
-Fix: Heading block - Sub heading tag change issue
-Fix: Row block - Overlay issue in inner rows
-Fix: Testimonial block - Layout change issue
-Fix: Tabs block - Nav responsive margin issue
-Fix: Video Popup block - Icon ripple effect issue
-
-### 1.0.0-RC-2 - 31 May, 2019
-
-New: Font family search option in typography
-Update: Pricing Badge UI
-Update: Tab icon setting
-Update: Gradient angle & position UI
-Update: Shape divider settings in Row
-
-### 1.0.0-RC-1 - 24 May, 2019
-
-Update: Block Wraper's description & keyword
-Update: Code optimization
-Fix: List item auto focus issue in Advanced list & Icon list block
-Fix: Border Hover color option in Icon block
-Fix: Import layout Reloading Issue
-
-### 1.0.0-beta-3 - 22 May, 2019
-
-New: Global color palate setting
-New: Recent font-family setting in typography
-Update: Inline text-color and background-color option
-Update: Removed hover option from Pricing block’s background
-Fix: Text color issue in Advanced block
-Fix: Border Hover color option in Icon block
-Fix: Animation delay issue in global option
-
-### 1.0.0-beta-2 - 16 May, 2019
-Update: Gradient field color picker position
-Update: Redesigned Testimonial Block's layout
-Update: Responsive device setting
-Update: Changed icon updating option in Pricing Block's features
-Fix: Button Size issue in Pricing Block
-Fix: Transition issue in Video Popup block, Button Block
-
-
-### 1.0.0-beta - 10 May, 2019
-New: Pricing Block
-New: Wrapper Block
-New: Team Block
-New: Redesigned user interface
-New: Radically Redesigned user experience
-New: Added Responsive settings to the Shape Divider
-Update: Improved padding, margin, Radius, Box Shadow, Background, Color and border options
-Update: Improved typography settings
-Update: Restructured Advanced List block
-Fix: Icon size in the icon list
-Fix: Autofocus in the icon list
-Fix: Video Popup SVG
-
-### 1.0.0-alpha-4 - 28 March, 2019
-
-New: Contact Form Block
-New: Icon List Block
-New: Advanced List Block
-New: Button Group Block
-New: Info Box Block
-Update: Row settings
-Update: Column settings
-Fix: Link open in new tab issue
-Fix: Button Alignment issue
-Fix: Video Popup youtube short link issue
-
-### 1.0.0-alpha-3 - 11 March, 2019
-
-Update: Tab Improvement
-Fix: Social icon blocks dropdown issue
-
-### 1.0.0-alpha-2 - 08 March, 2019
-
-New: Tabs block
-New: Social Icons block
-Update: Row setting
-Update: Column setting
-Fix: Select field issue
-Fix: Responsive device issue
-Fix: Map block address issue
-
-### 1.0.0-alpha - 01 March, 2019
-
-* Initial Alpha Release :)
-
diff --git a/core/Options.php b/core/Options.php
index 9061e0f1..75ee82d0 100644
--- a/core/Options.php
+++ b/core/Options.php
@@ -1,8 +1,8 @@
settings = new Settings();
+ $this->settings = new QUBELY_Settings();
}
/**
@@ -28,7 +28,7 @@ public function init() {
public function admin_menu()
{
require __DIR__ . '/admin-views/Getting_Started.php';
- $getting_started = new Getting_Started();
+ $getting_started = new QUBELY_Getting_Started();
$parent_slug = 'qubely-settings';
$cap = 'manage_options';
diff --git a/core/QUBELY.php b/core/QUBELY.php
index dbf2e8a8..66557c97 100644
--- a/core/QUBELY.php
+++ b/core/QUBELY.php
@@ -3,7 +3,7 @@
exit; // Exit if accessed directly
}
-class QUBELY {
+class QUBELY_MAIN {
protected $api_base_url = 'https://qubely.io/wp-json/restapi/v2/';
@@ -12,7 +12,11 @@ class QUBELY {
protected $option_keyword = 'qubely_global_options';
-
+ const FULL_NAME_PLACEHOLDER = '{{full-name}}';
+ const EMAIL_PLACEHOLDER = '{{email}}';
+ const SITE_NAME_PLACEHOLDER = '{{site-name}}';
+ const SUBJECT_PLACEHOLDER = '{{subject}}';
+ const MESSAGE_PLACEHOLDER = '{{message}}';
/**
* QUBELY constructor
@@ -74,10 +78,6 @@ public function __construct() {
// dynamic blocks
add_action( 'init', array( $this, 'init_dynamic_blocks' ) );
- // Preview CSS
- // add_action( 'upgrader_process_complete', 'create_preview_css');
- // register_activation_hook(__FILE__, array($this, 'create_preview_css'));
-
// qubely admin class
add_filter( 'admin_body_class', array( $this, 'qubely_editor_bodyclass' ) );
@@ -118,7 +118,13 @@ public function qubely_global_container_width() {
wp_enqueue_script( 'qubely_container_width' );
}
-
+ /**
+ * Qubely editor body class
+ *
+ * @param string|mixed $classes
+ *
+ * @return string|mixed $classes
+ */
public function qubely_editor_bodyclass( $classes ) {
$current_screen = get_current_screen();
@@ -129,11 +135,16 @@ public function qubely_editor_bodyclass( $classes ) {
return $classes;
}
+ /**
+ * Add custom classes
+ *
+ * @param array $classes
+ *
+ * @return array $classes
+ */
public function add_custom_class( $classes ) {
return array_merge( $classes, array( 'qubely qubely-frontend' ) );
}
-
-
/**
* Create preview CSS
@@ -145,28 +156,26 @@ public function create_preview_css() {
require_once ABSPATH . 'wp-admin/includes/file.php';
}
$upload_dir = wp_upload_dir();
- WP_Filesystem(false, $upload_dir['basedir'], true);
- $dir = trailingslashit($upload_dir['basedir']) . 'qubely/';
+ WP_Filesystem( false, $upload_dir['basedir'], true );
+ $dir = trailingslashit( $upload_dir['basedir'] ) . 'qubely/';
- $filename = "qubely-preview.css";
- $jsonfilename = "qubely-preview.json";
+ $filename = "qubely-preview.css";
+ $jsonfilename = "qubely-preview.json";
- if (!$wp_filesystem->is_dir($dir)) {
- $wp_filesystem->mkdir($dir);
+ if ( ! $wp_filesystem->is_dir( $dir ) ) {
+ $wp_filesystem->mkdir( $dir );
}
- if (!file_exists($dir . $filename)) {
- if (!$wp_filesystem->put_contents($dir . $filename, '')) {
- throw new Exception(__('Prevriew CSS can not be saved due to permission!!!', 'qubely'));
+ if ( ! file_exists( $dir . $filename ) ) {
+ if ( ! $wp_filesystem->put_contents( $dir . $filename, '' ) ) {
+ throw new Exception( __( 'Prevriew CSS can not be saved due to permission!!!', 'qubely' ) );
}
}
- if (!file_exists($dir . $jsonfilename)) {
- if (!$wp_filesystem->put_contents($dir . $jsonfilename, '{}')) {
- throw new Exception(__('Preview JSON can not be saved due to permission!!!', 'qubely'));
+ if ( ! file_exists( $dir . $jsonfilename ) ) {
+ if ( ! $wp_filesystem->put_contents( $dir . $jsonfilename, '{}' ) ) {
+ throw new Exception( __( 'Preview JSON can not be saved due to permission!!!', 'qubely' ) );
}
}
-
-
}
/**
@@ -176,6 +185,7 @@ public function init_dynamic_blocks() {
require_once QUBELY_DIR_PATH . 'core/blocks/postgrid.php';
$this->create_preview_css();
}
+
/**
* Load Editor Styles and Scripts
*
@@ -192,11 +202,11 @@ public function qubely_editor_assets() {
$palette = array_replace( array( '#062040', '#566372', '#2084F9', '#F3F3F3', '#EEEEEE', '#FFFFFF' ), ( $palette ? $palette[0] : array() ) );
$options = get_option( 'qubely_options' );
- $qubely_gmap_api_key = isset( $options['qubely_gmap_api_key'] ) ? $options['qubely_gmap_api_key'] : '';
- $qubely_recaptcha_site_key = isset( $options['qubely_recaptcha_site_key'] ) ? $options['qubely_recaptcha_site_key'] : '';
- $mc_key = isset( $options['mailchimp_api_key'] ) ? $options['mailchimp_api_key'] : '';
- $qubely_recaptcha_secret_key = isset( $options['qubely_recaptcha_secret_key'] ) ? $options['qubely_recaptcha_secret_key'] : '';
- $enable_global_settings = isset( $options['import_with_global_settings'] ) ? $options['import_with_global_settings'] : false;
+ $qubely_gmap_api_key = isset( $options['qubely_gmap_api_key'] ) ? sanitize_text_field( $options['qubely_gmap_api_key'] ) : '';
+ $qubely_recaptcha_site_key = isset( $options['qubely_recaptcha_site_key'] ) ? sanitize_text_field( $options['qubely_recaptcha_site_key'] ) : '';
+ $mc_key = isset( $options['mailchimp_api_key'] ) ? sanitize_text_field( $options['mailchimp_api_key'] ) : '';
+ $qubely_recaptcha_secret_key = isset( $options['qubely_recaptcha_secret_key'] ) ? sanitize_text_field( $options['qubely_recaptcha_secret_key'] ) : '';
+ $enable_global_settings = isset( $options['import_with_global_settings'] ) ? sanitize_text_field( $options['import_with_global_settings'] ) : false;
$protocols = array( 'http://', 'https://', 'http://www', 'https://www', 'www' );
wp_localize_script(
'qubely-blocks-js',
@@ -211,16 +221,17 @@ public function qubely_editor_assets() {
'image_sizes' => $this->get_all_image_sizes(),
'palette' => $palette,
'overwriteTheme' => true,
+ 'current_user_id' => get_current_user_id(),
'qubely_gmap_api_key' => $qubely_gmap_api_key,
'qubely_recaptcha_site_key' => $qubely_recaptcha_site_key,
'qubely_recaptcha_secret_key' => $qubely_recaptcha_secret_key,
'site_url' => site_url(),
'admin_url' => admin_url(),
- 'actual_url' => str_replace($protocols, '', site_url()),
+ 'actual_url' => str_replace( $protocols, '', site_url() ),
'import_with_global_settings' => $enable_global_settings,
'publishedPosts' => wp_count_posts()->publish,
'mc_key' => $mc_key,
- 'is_core_active' => is_plugin_active('qubely-core/qubely-core.php'),
+ 'is_core_active' => is_plugin_active( 'qubely-core/qubely-core.php' ),
)
);
}
@@ -242,7 +253,6 @@ public function getSvgShapes() {
return $shapeArray;
}
-
/**
* Load SvgShapes
*
@@ -265,92 +275,98 @@ public function getSvgDivider() {
*
* * @since 1.6.5
*/
- public function parse_all_blocks(){
+ public function parse_all_blocks() {
$blocks;
- if (is_single() || is_page() || is_404()) {
+ if ( is_single() || is_page() || is_404() ) {
global $post;
- if (is_object($post) && property_exists($post, 'post_content')) {
- $blocks = parse_blocks($post->post_content);
+ if ( is_object( $post ) && property_exists( $post, 'post_content' ) ) {
+ $blocks = parse_blocks( $post->post_content );
}
- } elseif (is_archive() || is_home() || is_search()) {
+ } elseif ( is_archive() || is_home() || is_search() ) {
global $wp_query;
- foreach ($wp_query as $post) {
- if (is_object($post) && property_exists($post, 'post_content')) {
- $blocks = parse_blocks($post->post_content);
+ foreach ( $wp_query as $post ) {
+ if ( is_object( $post ) && property_exists( $post, 'post_content' ) ) {
+ $blocks = parse_blocks( $post->post_content );
}
}
}
return $blocks;
}
+
/**
* Load font-awesome CSS
*
* * @since 1.6.5
*/
- public function qubely_load_fontawesome(){
- $option_data = get_option('qubely_options');
- $load_font_awesome = isset($option_data['load_font_awesome_CSS']) ? $option_data['load_font_awesome_CSS'] : 'yes';
- if ($load_font_awesome == 'yes') {
+ public function qubely_load_fontawesome() {
+ $option_data = get_option( 'qubely_options' );
+ $load_font_awesome = isset( $option_data['load_font_awesome_CSS'] ) ? sanitize_text_field( $option_data['load_font_awesome_CSS'] ) : 'yes';
+ if ( $load_font_awesome == 'yes' ) {
$blocks = $this->parse_all_blocks();
- $contains_qubely_blocks = $this->has_blocks_with_fontawesome($blocks);
- if ($contains_qubely_blocks) {
- wp_enqueue_style('qubely-font-awesome', QUBELY_DIR_URL . 'assets/css/font-awesome.min.css', false, QUBELY_VERSION);
+ $contains_qubely_blocks = $this->has_blocks_with_fontawesome( $blocks );
+ if ( $contains_qubely_blocks ) {
}
+ wp_enqueue_style( 'qubely-font-awesome', QUBELY_DIR_URL . 'assets/css/font-awesome.min.css', false, QUBELY_VERSION );
}
}
- public function colsFromArray(array $array, $keys) {
- if (!is_array($keys)) $keys = [$keys];
- return array_map(function ($el) use ($keys) {
+ public function colsFromArray( array $array, $keys ) {
+ if ( ! is_array( $keys ) ) $keys = [ $keys ];
+ return array_map( function ( $el ) use ( $keys ) {
$o = [];
- foreach($keys as $key){
+ foreach( $keys as $key ) {
// if(isset($el[$key]))$o[$key] = $el[$key]; //you can do it this way if you don't want to set a default for missing keys.
- $o[$key] = isset($el[$key])?$el[$key]:false;
+ $o[ $key ] = isset( $el[ $key ] ) ? $el[ $key ] : false;
}
return $o;
- }, $array);
+ }, $array );
}
/**
* Get block google fonts
*/
- public function gather_block_fonts($blocks,$block_fonts){
+ public function gather_block_fonts( $blocks,$block_fonts ) {
$google_fonts = $block_fonts;
- foreach ($blocks as $key => $block) {
- if (strpos($block['blockName'], 'qubely') !== false) {
- foreach ($block['attrs'] as $key => $att) {
- if (gettype($att) == 'array' && isset($att['openTypography']) && isset($att['family'])) {
- if (isset($block['attrs'][$key]['activeSource'])) {
- if ($block['attrs'][$key]['activeSource'] == 'custom') {
- array_push($google_fonts,$block['attrs'][$key]['family']);
+ foreach ( $blocks as $key => $block ) {
+ if ( strpos( $block['blockName'], 'qubely' ) !== false ) {
+ foreach ( $block['attrs'] as $key => $att ) {
+ if ( gettype( $att ) == 'array' && isset( $att['openTypography'] ) && isset( $att['family'] ) ) {
+ if ( isset( $block['attrs'][ $key ]['activeSource'] ) ) {
+ if ( $block['attrs'][ $key ]['activeSource'] == 'custom' ) {
+ array_push( $google_fonts,$block['attrs'][ $key ]['family'] );
}
} else {
- array_push($google_fonts,$block['attrs'][$key]['family']);
+ array_push( $google_fonts,$block['attrs'][ $key ]['family'] );
}
}
}
}
- if(isset($block['innerBlocks']) && gettype($block['innerBlocks']) == 'array' && count($block['innerBlocks'])>0){
- $child_fonts=$this->gather_block_fonts($block['innerBlocks'],$google_fonts);
- if(count($child_fonts)>0){
- $google_fonts= array_merge($google_fonts,$child_fonts);
+ if ( isset( $block['innerBlocks'] ) && gettype( $block['innerBlocks'] ) == 'array' && count( $block['innerBlocks'] ) > 0 ) {
+ $child_fonts = $this->gather_block_fonts( $block['innerBlocks'], $google_fonts );
+ if ( count( $child_fonts ) > 0 ) {
+ $google_fonts= array_merge( $google_fonts, $child_fonts );
}
}
}
- return array_unique($google_fonts);
+ return array_unique( $google_fonts );
}
+
/**
* Check whether post contains
* any qubely blocks
+ *
+ * @param array $blocks
+ *
+ * @return bool
*/
- public function has_qubely_blocks($blocks){
+ public function has_qubely_blocks( $blocks ) {
$is_qubely_block = false;
- foreach ($blocks as $key => $block) {
- if (strpos($block['blockName'], 'qubely') !== false) {
+ foreach ( $blocks as $key => $block ) {
+ if ( strpos( $block['blockName'], 'qubely' ) !== false ) {
$is_qubely_block = true;
}
- if (isset($block['innerBlocks']) && gettype($block['innerBlocks']) == 'array' && count($block['innerBlocks']) > 0) {
- $is_qubely_block = $this->has_qubely_blocks($block['innerBlocks']);
+ if ( isset( $block['innerBlocks'] ) && gettype( $block['innerBlocks'] ) == 'array' && count( $block['innerBlocks'] ) > 0 ) {
+ $is_qubely_block = $this->has_qubely_blocks( $block['innerBlocks'] );
}
}
return $is_qubely_block;
@@ -359,8 +375,12 @@ public function has_qubely_blocks($blocks){
/**
* Check whether post contains
* any qubely blocks with Font-awesome
+ *
+ * @param array $blocks
+ *
+ * @return bool
*/
- public function has_blocks_with_fontawesome($blocks){
+ public function has_blocks_with_fontawesome( $blocks ) {
$has_fontawesome_block = false;
$target_blocks = array(
'qubely/icon',
@@ -392,49 +412,50 @@ public function has_blocks_with_fontawesome($blocks){
'qubely/contactform',
'core/block',
);
- foreach ($blocks as $key => $block) {
- if (in_array($block['blockName'], $target_blocks, true)) {
+ foreach ( $blocks as $key => $block ) {
+ if ( in_array( $block['blockName'], $target_blocks, true ) ) {
$has_fontawesome_block = true;
}
- if ($has_fontawesome_block==false && isset($block['innerBlocks']) && gettype($block['innerBlocks']) == 'array' && count($block['innerBlocks']) > 0) {
- $has_fontawesome_block = $this->has_blocks_with_fontawesome($block['innerBlocks']);
+ if ( $has_fontawesome_block == false && isset( $block['innerBlocks'] ) && gettype( $block['innerBlocks'] ) == 'array' && count( $block['innerBlocks'] ) > 0 ) {
+ $has_fontawesome_block = $this->has_blocks_with_fontawesome( $block['innerBlocks'] );
}
}
return $has_fontawesome_block;
}
+
/**
* Load Google fonts
*
- * * @since 1.6.5
+ * @since 1.6.5
*/
- public function qubely_load_googlefonts(){
+ public function qubely_load_googlefonts() {
//Global settings fonts
$blocks;
$contains_qubely_blocks = false;
$block_fonts = [];
- $option_data = get_option('qubely_options');
- $load_google_fonts = isset($option_data['load_google_fonts']) ? $option_data['load_google_fonts'] : 'yes';
-
- if ($load_google_fonts == 'yes') {
- $blocks=$this->parse_all_blocks();
- $contains_qubely_blocks = $this->has_qubely_blocks($blocks);
-
- if ($contains_qubely_blocks) {
- $block_fonts = $this->gather_block_fonts($blocks, $block_fonts);
- $global_settings = get_option($this->option_keyword);
- $global_settings = $global_settings == false ? json_decode('{}') : json_decode($global_settings);
- $global_settings = json_decode(json_encode($global_settings), true);
+ $option_data = get_option( 'qubely_options' );
+ $load_google_fonts = isset( $option_data['load_google_fonts'] ) ? sanitize_text_field( $option_data['load_google_fonts'] ) : 'yes';
+
+ if ( $load_google_fonts == 'yes' ) {
+ $blocks = $this->parse_all_blocks();
+ $contains_qubely_blocks = $this->has_qubely_blocks( $blocks );
+
+ if ( $contains_qubely_blocks ) {
+ $block_fonts = $this->gather_block_fonts( $blocks, $block_fonts );
+ $global_settings = get_option( $this->option_keyword );
+ $global_settings = $global_settings == false ? json_decode( '{}' ) : json_decode( $global_settings );
+ $global_settings = json_decode( json_encode( $global_settings ), true );
$gfonts = '';
$all_global_fonts = array();
- if (isset($global_settings['presets']) && isset($global_settings['presets'][$global_settings['activePreset']]) && isset($global_settings['presets'][$global_settings['activePreset']]['typography'])) {
- $all_global_fonts = $this->colsFromArray(array_column($global_settings['presets'][$global_settings['activePreset']]['typography'], 'value'), ['family', 'weight']);
+ if ( isset( $global_settings['presets'] ) && isset( $global_settings['presets'][ $global_settings['activePreset'] ] ) && isset( $global_settings['presets'][ $global_settings['activePreset'] ]['typography'] ) ) {
+ $all_global_fonts = $this->colsFromArray( array_column( $global_settings['presets'][ $global_settings['activePreset'] ]['typography'], 'value' ), ['family', 'weight'] );
}
- if (count($all_global_fonts) > 0) {
- $global_fonts = array_column($all_global_fonts, 'family');
+ if ( count( $all_global_fonts ) > 0 ) {
+ $global_fonts = array_column( $all_global_fonts, 'family' );
- $all_fonts = array_unique(array_merge($global_fonts, $block_fonts));
+ $all_fonts = array_unique( array_merge( $global_fonts, $block_fonts ) );
- if (!empty($all_fonts)) {
+ if ( ! empty( $all_fonts ) ) {
$system = array(
'Arial',
'Tahoma',
@@ -447,25 +468,25 @@ public function qubely_load_googlefonts(){
$gfonts_attr = ':100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic';
- foreach ($all_fonts as $font) {
- if (!in_array($font, $system, true) && !empty($font)) {
- $gfonts .= str_replace(' ', '+', trim($font)) . $gfonts_attr . '|';
+ foreach ( $all_fonts as $font ) {
+ if ( ! in_array( $font, $system, true ) && ! empty( $font ) ) {
+ $gfonts .= str_replace( ' ', '+', trim( $font ) ) . $gfonts_attr . '|';
}
}
}
- if (!empty($gfonts)) {
+ if ( ! empty( $gfonts ) ) {
$query_args = array(
'family' => $gfonts,
);
wp_register_style(
'qubely-google-fonts',
- add_query_arg($query_args, '//fonts.googleapis.com/css'),
+ add_query_arg( $query_args, '//fonts.googleapis.com/css' ),
array(),
QUBELY_VERSION
);
- wp_enqueue_style('qubely-google-fonts');
+ wp_enqueue_style( 'qubely-google-fonts' );
}
}
}
@@ -497,7 +518,7 @@ public function qubely_admin_assets() {
wp_enqueue_style( 'qubely-style-min', QUBELY_DIR_URL . 'assets/css/style.min.css', false, QUBELY_VERSION );
#END_REPLACE
- wp_enqueue_style('qubely-font-awesome', QUBELY_DIR_URL . 'assets/css/font-awesome.min.css', false, QUBELY_VERSION);
+ wp_enqueue_style( 'qubely-font-awesome', QUBELY_DIR_URL . 'assets/css/font-awesome.min.css', false, QUBELY_VERSION );
wp_enqueue_script( 'qubely-magnific-popup', QUBELY_DIR_URL . 'assets/js/qubely.magnific-popup.js', array( 'jquery' ), QUBELY_VERSION, true );
wp_enqueue_script( 'jquery-animatedHeadline', QUBELY_DIR_URL . 'assets/js/jquery.animatedheadline.js', array( 'jquery' ), QUBELY_VERSION, true );
@@ -508,7 +529,6 @@ public function qubely_admin_assets() {
wp_register_style( 'qubely-options', QUBELY_DIR_URL . 'assets/css/options.css', false, QUBELY_VERSION );
}
-
/**
* Get Post Types.
*
@@ -544,7 +564,6 @@ public static function get_post_types() {
);
}
-
return $options;
}
@@ -591,6 +610,7 @@ public static function get_all_taxonomy() {
return $taxonomy_array;
}
+
/**
* Get all image sizes.
*
@@ -628,7 +648,6 @@ public static function get_all_image_sizes() {
return $image_sizes;
}
-
/**
* Frontend Style & Script
*
@@ -656,15 +675,15 @@ public function qubely_enqueue_style() {
public function qubely_enqueue_scripts() {
wp_register_script( 'qubely_local_script', '' );
- $protocols = array( 'http://', 'https://', 'http://www', 'https://www', 'www' );
+ $protocols = array( 'http://', 'https://', 'http://www', 'https://www', 'www' );
wp_localize_script(
'qubely_local_script',
'qubely_urls',
array(
- 'plugin' => QUBELY_DIR_URL,
- 'ajax' => admin_url('admin-ajax.php'),
- 'nonce' => wp_create_nonce('qubely_nonce'),
- 'actual_url' => str_replace($protocols, '', site_url()),
+ 'plugin' => QUBELY_DIR_URL,
+ 'ajax' => admin_url( 'admin-ajax.php' ),
+ 'nonce' => wp_create_nonce( 'qubely_nonce' ),
+ 'actual_url' => str_replace( $protocols, '', site_url() ),
)
);
wp_enqueue_script( 'qubely_local_script' );
@@ -672,36 +691,44 @@ public function qubely_enqueue_scripts() {
$blocks_meta_data = get_post_meta( get_the_ID(), '__qubely_available_blocks', true );
$blocks_meta_data = unserialize( $blocks_meta_data );
+ /**
+ * register scripts
+ */
+ wp_register_script( 'qubley-animated-headline-script', QUBELY_DIR_URL . 'assets/js/jquery.animatedheadline.js', array( 'jquery' ), QUBELY_VERSION, true );
+ wp_register_script( 'qubely-block-map', QUBELY_DIR_URL . 'assets/js/blocks/map.js', array( 'jquery' ), QUBELY_VERSION, true );
+ wp_register_script( 'qubely-magnific-popup-script', QUBELY_DIR_URL . 'assets/js/qubely.magnific-popup.js', array( 'jquery' ), QUBELY_VERSION, true );
+ wp_register_script( 'qubely-block-contactform', QUBELY_DIR_URL . 'assets/js/blocks/contactform.js', array( 'jquery' ), QUBELY_VERSION, true );
+ wp_register_script( 'qubely-block-image-comparison', QUBELY_DIR_URL . 'assets/js/blocks/image-comparison.js', array(), QUBELY_VERSION, true );
+ wp_register_script( 'qubely-block-common', QUBELY_DIR_URL . 'assets/js/common-script.js', array( 'jquery' ), QUBELY_VERSION, true );
+ wp_register_script( 'qubely-interaction', QUBELY_DIR_URL . 'assets/js/interaction.js', array( 'jquery' ), QUBELY_VERSION, true );
+
+
if ( is_array( $blocks_meta_data ) && count( $blocks_meta_data ) ) {
$available_blocks = $blocks_meta_data['available_blocks'];
$has_interaction = $blocks_meta_data['interaction'];
$has_animation = $blocks_meta_data['animation'];
$has_parallax = $blocks_meta_data['parallax'];
- if ( in_array( 'qubely/animatedheadline', $available_blocks ) ) {
- wp_enqueue_script( 'qubley-animated-headline-script', QUBELY_DIR_URL . 'assets/js/jquery.animatedheadline.js', array( 'jquery' ), QUBELY_VERSION, true );
+ if ( has_block( 'qubely/animatedheadline' ) ) {
+ wp_enqueue_script( 'qubley-animated-headline-script' );
}
-
- if ( in_array( 'qubely/map', $available_blocks ) ) {
- wp_enqueue_script( 'qubely-block-map', QUBELY_DIR_URL . 'assets/js/blocks/map.js', array( 'jquery' ), QUBELY_VERSION, true );
+ if ( has_block( 'qubely/map' ) ) {
+ wp_enqueue_script( 'qubely-block-map' );
}
-
- if ( in_array( 'qubely/videopopup', $available_blocks ) || in_array( 'qubely/gallery', $available_blocks ) ) {
- wp_enqueue_script( 'qubely-magnific-popup-script', QUBELY_DIR_URL . 'assets/js/qubely.magnific-popup.js', array( 'jquery' ), QUBELY_VERSION );
+ if ( has_block( 'qubely/videopopup' ) || has_block( 'qubely/gallery' ) ) {
+ wp_enqueue_script( 'qubely-magnific-popup-script' );
}
-
- if ( in_array( 'qubely/contactform', $available_blocks ) || in_array( 'qubely/form', $available_blocks ) ) {
- wp_enqueue_script( 'qubely-block-contactform', QUBELY_DIR_URL . 'assets/js/blocks/contactform.js', array( 'jquery' ), QUBELY_VERSION );
+ if ( has_block( 'qubely/contactform' ) || has_block( 'qubely/form' ) ) {
+ wp_enqueue_script( 'qubely-block-contactform' );
}
-
- if ( in_array( 'qubely/imagecomparison', $available_blocks ) ) {
- wp_enqueue_script( 'qubely-block-image-comparison', QUBELY_DIR_URL . 'assets/js/blocks/image-comparison.js', array(), QUBELY_VERSION );
+ if ( has_block( 'qubely/imagecomparison' ) ) {
+ wp_enqueue_script( 'qubely-block-image-comparison' );
}
if ( $has_interaction ) {
- wp_enqueue_script( 'qubely-interaction', QUBELY_DIR_URL . 'assets/js/interaction.js', array( 'jquery' ), QUBELY_VERSION, true );
+ wp_enqueue_script( 'qubely-interaction' );
}
-
+
if (
$has_interaction ||
$has_parallax ||
@@ -714,7 +741,7 @@ public function qubely_enqueue_scripts() {
in_array( 'qubely/verticaltabs', $available_blocks ) ||
in_array( 'qubely/postgrid', $available_blocks )
) {
- wp_enqueue_script( 'qubely-block-common', QUBELY_DIR_URL . 'assets/js/common-script.js', array( 'jquery' ), QUBELY_VERSION, true );
+ wp_enqueue_script( 'qubely-block-common' );
}
} else {
$post = null;
@@ -724,26 +751,26 @@ public function qubely_enqueue_scripts() {
}
if ( false !== strpos( $post, '
+
-
-
-
-
-
+
-
-
-
+
-
-
+
@@ -109,11 +93,11 @@ public function markup() {
,
- category: 'qubely',
- supports: {
- html: false,
- inserter: false,
- reusable: false,
- },
- attributes,
- edit: Edit,
- save: Save,
- deprecated: [
- {
- attributes,
- save(props) {
- const { uniqueId, itemNumber, heading, panelIcon, iconPosition, fillType, animation, openFirstItem } = props.attributes;
- const className = `qubely-accordion-item qubely-type-${fillType} ${openFirstItem && itemNumber == 0 && 'qubely-accordion-active'}`;
- return (
- 
,
- keywords: [ __('Counter'), __('Animated Number'), __('Count up'), ],
- supports: {
- align: ['center', 'wide', 'full'],
- },
- example: {
- attributes: {
- counterLimit: 9999,
- postfix: '+',
- counterTypo: {
- openTypography: 1,
- size: {
- md: 82,
- unit: 'px'
- }
- },
- },
- },
- attributes: {
- uniqueId: { type: 'string', default: '' },
- ...globalAttributes,
- spacer: { type: 'object', default:{spaceTop: { md: '10', unit: "px"}, spaceBottom: { md: '10', unit: "px"}}, style: [{ selector: '{{QUBELY}}' }] },
- alignment: { type: 'object', default: {md: 'center'}, style: [{ selector: '{{QUBELY}} .qubely-block-counter {text-align: {{alignment}};}' }] },
- prefix: { type: 'string', default: '' },
- postfix: { type: 'string', default: '' },
- counterLimit: { type: 'string', default: "500" },
- counterDuration: { type: 'string', default: "500" },
- prepostTypo: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-counter-prefix, {{QUBELY}} .qubely-block-counter-postfix' }] },
- prepostColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-counter-prefix {color: {{prepostColor}};} {{QUBELY}} .qubely-block-counter-postfix {color: {{prepostColor}};}' }] },
- prepostSpacing: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-counter-prefix {margin-right: {{prepostSpacing}};} {{QUBELY}} .qubely-block-counter-postfix {margin-left: {{prepostSpacing}};}' }] },
- counterTypo: { type: 'object', default: {}, style: [{ selector: '{{QUBELY}} .qubely-block-counter-content' }] },
- counterColor: { type: 'string', default: '', style: [{ selector: '{{QUBELY}} .qubely-block-counter-content {color: {{counterColor}};}' }] },
- sourceOfCopiedStyle: { type: 'boolean', default: false }
- },
- edit: Edit,
- save: Save
+registerBlockType("qubely/counter", {
+ title: __("Counter"),
+ description: "Set counters in your pages and posts with Qubely Counter.",
+ category: "qubely",
+ icon: 
,
- category: 'qubely',
- keywords: [ __( 'Divider' ), __( 'Separator' ) ],
- supports: {
- align: ['center', 'wide', 'full'],
- },
- example: {
- attributes: {},
- },
- attributes: {
- uniqueId:{ type: 'string', default: '' },
- ...globalAttributes,
- spacer: { type: 'object', default:{spaceTop: { md: '10', unit: "px"}, spaceBottom: { md: '10', unit: "px"}}, style: [{ selector: '{{QUBELY}}' }] },
- style: { type: 'string', default: 'slash' },
- color: { type: 'string', default: '#252525', style: [{ selector: '{{QUBELY}} .qubely-block-divider > div { border-top-color: {{color}}; } {{QUBELY}} .qubely-block-divider path { fill: {{color}}; } {{QUBELY}} .qubely-block-divider circle { stroke: {{color}}; } {{QUBELY}} .qubely-block-divider ellipse { stroke: {{color}}; fill: {{color}}; }' }] },
- height: { type: 'object', default: {md: '2', unit: 'px'}, style: [{ selector: '{{QUBELY}} .qubely-block-divider > div { border-top-width: {{height}};}' }] },
- width: { type: 'object', default: {md: '280', unit: 'px'}, style: [{ selector: '{{QUBELY}} .qubely-block-divider > div { width: {{width}};} {{QUBELY}} .qubely-block-divider svg { width: {{width}};}' }] },
- alignment: { type: 'object', default: {md: 'center'}, style: [{ selector: '{{QUBELY}} {text-align: {{alignment}};}' }]},
- sourceOfCopiedStyle: { type: 'boolean', default: false }
- },
- edit: Edit,
- save: Save,
+registerBlockType("qubely/divider", {
+ title: __("Divider"),
+ description: "Use beautiful pre-designed dividers with Qubely Divider.",
+ icon: 
,
- keywords: [ __( 'Google Map' ), __( 'Map' ), __( 'Location' ) ],
- supports: {
- align: ['center', 'wide', 'full'],
- },
- example: {
- attributes: {},
- },
- attributes: {
- uniqueId: { type: 'string', default: '' },
- ...globalAttributes, // Global Settings
- spacer: { type: 'object', default:{spaceTop: { md: '10', unit: "px"}, spaceBottom: { md: '10', unit: "px"}}, style: [ { selector: '{{QUBELY}}' }] },
- zoom: { type: 'number', default: '16'},
- height: { type: 'number', default: '350'},
- placeID: { type: 'string', default: 'ChIJgWsCh7C4VTcRwgRZ3btjpY8'},
- mapAddress: { type: 'string', default: ''},
- apiKey: { type: 'string', default: ''},
- iconPointer: { type: 'string', default: '' },
- showZoomButtons: { type: 'boolean', default: true },
- showMapTypeButtons: { type: 'boolean', default: true },
- showStreetViewButton: { type: 'boolean', default: true },
- showFullscreenButton: { type: 'boolean', default: true },
- optionScrollWheel: { type: 'boolean', default: true },
- optionDraggable: { type: 'boolean', default: true },
- showMarker: { type: 'boolean', default: true },
- mapStyle: { type: 'string', default: '' },
- selectedStyle: { type: 'string', default: 'default' },
- },
- edit: Edit,
- save: Save,
+registerBlockType("qubely/map", {
+ title: __("Google Map"),
+ description: "Embed Google Maps easily with Qubely Google Maps.",
+ category: "qubely",
+ icon: 
,
+registerBlockType("qubely/progressbar", {
+ title: __("Progress Bar"),
+ description: "Showcase stats using progress bars with Qubely Progress Bar.",
+ category: "qubely",
+ icon: 
- :
-