568 lines
14 KiB
JavaScript
568 lines
14 KiB
JavaScript
import {
|
|
getOptionFor,
|
|
watchOptionsWithPrefix,
|
|
responsiveClassesFor,
|
|
} from './helpers'
|
|
import { typographyOption } from './variables/typography'
|
|
import { handleBackgroundOptionFor } from './variables/background'
|
|
import { renderSingleEntryMeta } from './helpers/entry-meta'
|
|
import ctEvents from 'ct-events'
|
|
|
|
export const getPrefixFor = () => document.body.dataset.prefix
|
|
|
|
const getMetaSpacingVariables = ({ prefix }) =>
|
|
[
|
|
{
|
|
key: 'author_social_channels',
|
|
selector: `[data-prefix="${prefix}"] .hero-section .author-box-socials`,
|
|
},
|
|
|
|
{
|
|
key: 'custom_description',
|
|
selector: `[data-prefix="${prefix}"] .hero-section .page-description`,
|
|
},
|
|
|
|
{
|
|
key: 'custom_title',
|
|
selector: [
|
|
`[data-prefix="${prefix}"] .hero-section .page-title`,
|
|
`[data-prefix="${prefix}"] .hero-section .ct-author-name`,
|
|
].join(', '),
|
|
},
|
|
{
|
|
key: 'breadcrumbs',
|
|
selector: `[data-prefix="${prefix}"] .hero-section .ct-breadcrumbs`,
|
|
},
|
|
{
|
|
key: 'custom_meta',
|
|
selector: `[data-prefix="${prefix}"] .hero-section .entry-meta`,
|
|
},
|
|
{
|
|
second_meta: true,
|
|
key: 'custom_meta',
|
|
selector: `[data-prefix="${prefix}"] .hero-section .entry-meta[data-id="second"]`,
|
|
},
|
|
].map(({ key, selector, second_meta }) => ({
|
|
variable: 'itemSpacing',
|
|
unit: 'px',
|
|
responsive: true,
|
|
selector,
|
|
extractValue: (value) => {
|
|
let component = value.find((component) => component.id === key)
|
|
|
|
if (second_meta) {
|
|
let allMeta = value.filter(
|
|
(component) => component.id === 'custom_meta'
|
|
)
|
|
|
|
if (allMeta.length === 2) {
|
|
component = allMeta[1]
|
|
} else {
|
|
return 'CT_CSS_SKIP_RULE'
|
|
}
|
|
}
|
|
|
|
return (
|
|
(
|
|
component || {
|
|
hero_item_spacing: 20,
|
|
}
|
|
).hero_item_spacing || 20
|
|
)
|
|
},
|
|
}))
|
|
|
|
const getVariablesForPrefix = (prefix) => ({
|
|
[`${prefix}_hero_height`]: {
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-2"]`,
|
|
variable: 'min-height',
|
|
responsive: true,
|
|
unit: '',
|
|
},
|
|
|
|
...typographyOption({
|
|
id: `${prefix}_pageTitleFont`,
|
|
selector: `[data-prefix="${prefix}"] .entry-header .page-title`,
|
|
}),
|
|
|
|
[`${prefix}_pageTitleFontColor`]: {
|
|
selector: `[data-prefix="${prefix}"] .entry-header .page-title`,
|
|
variable: 'theme-heading-color',
|
|
type: 'color',
|
|
},
|
|
|
|
...typographyOption({
|
|
id: `${prefix}_pageMetaFont`,
|
|
selector: `[data-prefix="${prefix}"] .entry-header .entry-meta`,
|
|
}),
|
|
|
|
[`${prefix}_pageMetaFontColor`]: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .entry-meta`,
|
|
variable: 'theme-text-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .entry-meta`,
|
|
variable: 'theme-link-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
[`${prefix}_page_meta_button_type_font_colors`]: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header [data-type="pill"]`,
|
|
variable: 'theme-button-text-initial-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header [data-type="pill"]`,
|
|
variable: 'theme-button-text-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
[`${prefix}_page_meta_button_type_background_colors`]: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header [data-type="pill"]`,
|
|
variable: 'theme-button-background-initial-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header [data-type="pill"]`,
|
|
variable: 'theme-button-background-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
...typographyOption({
|
|
id: `${prefix}_pageExcerptFont`,
|
|
selector: `[data-prefix="${prefix}"] .entry-header .page-description`,
|
|
}),
|
|
|
|
[`${prefix}_pageExcerptColor`]: {
|
|
selector: `[data-prefix="${prefix}"] .entry-header .page-description`,
|
|
variable: 'theme-text-color',
|
|
type: 'color',
|
|
},
|
|
|
|
...typographyOption({
|
|
id: `${prefix}_breadcrumbsFont`,
|
|
selector: `[data-prefix="${prefix}"] .entry-header .ct-breadcrumbs`,
|
|
}),
|
|
|
|
[`${prefix}_breadcrumbsFontColor`]: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .ct-breadcrumbs`,
|
|
variable: 'theme-text-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .ct-breadcrumbs`,
|
|
variable: 'theme-link-initial-color',
|
|
type: 'color:initial',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .ct-breadcrumbs`,
|
|
variable: 'theme-link-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
[`${prefix}_page_social_icons_color`]: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .author-box-socials`,
|
|
variable: 'theme-icon-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .author-box-socials`,
|
|
variable: 'theme-icon-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
[`${prefix}_page_social_icons_background`]: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .author-box-socials`,
|
|
variable: 'background-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .entry-header .author-box-socials`,
|
|
variable: 'background-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
[`${prefix}_hero_alignment1`]: {
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-1"]`,
|
|
variable: 'alignment',
|
|
unit: '',
|
|
responsive: true,
|
|
},
|
|
|
|
[`${prefix}_hero_margin`]: {
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-1"]`,
|
|
variable: 'margin-bottom',
|
|
responsive: true,
|
|
unit: '',
|
|
},
|
|
|
|
[`${prefix}_hero_alignment2`]: {
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-2"]`,
|
|
variable: 'alignment',
|
|
unit: '',
|
|
responsive: true,
|
|
},
|
|
|
|
[`${prefix}_hero_vertical_alignment`]: {
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-2"]`,
|
|
variable: 'vertical-alignment',
|
|
unit: '',
|
|
responsive: true,
|
|
},
|
|
|
|
...handleBackgroundOptionFor({
|
|
id: `${prefix}_pageTitleOverlay`,
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-2"] > figure .ct-media-container:after`,
|
|
}),
|
|
|
|
...handleBackgroundOptionFor({
|
|
id: `${prefix}_pageTitleBackground`,
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-2"]`,
|
|
}),
|
|
|
|
[`${prefix}_pageTitlePadding`]: {
|
|
selector: `[data-prefix="${prefix}"] .hero-section[data-type="type-2"]`,
|
|
type: 'spacing',
|
|
variable: 'container-padding',
|
|
responsive: true,
|
|
},
|
|
|
|
[`${prefix}_hero_elements`]: (value) => {
|
|
let additionalVariables = []
|
|
|
|
value.map((layer) => {
|
|
if (layer.typography) {
|
|
additionalVariables = [
|
|
...additionalVariables,
|
|
...typographyOption({
|
|
id: 'test',
|
|
selector: `[data-prefix="${prefix}"] [data-field*="${layer.__id.substring(
|
|
0,
|
|
6
|
|
)}"]`,
|
|
extractValue: (value) => layer.typography,
|
|
}).test,
|
|
]
|
|
}
|
|
|
|
if (layer.color) {
|
|
additionalVariables = [
|
|
...additionalVariables,
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] [data-field*="${layer.__id.substring(
|
|
0,
|
|
6
|
|
)}"]`,
|
|
variable: 'theme-text-color',
|
|
type: 'color:default',
|
|
extractValue: () => layer.color,
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] [data-field*="${layer.__id.substring(
|
|
0,
|
|
6
|
|
)}"]`,
|
|
variable: 'theme-link-hover-color',
|
|
type: 'color:hover',
|
|
extractValue: () => layer.color,
|
|
},
|
|
]
|
|
}
|
|
})
|
|
|
|
return [
|
|
...additionalVariables,
|
|
...getMetaSpacingVariables({ prefix }),
|
|
{
|
|
variable: 'description-max-width',
|
|
unit: '%',
|
|
selector: `[data-prefix="${prefix}"] .hero-section .page-description`,
|
|
responsive: true,
|
|
extractValue: (value) => {
|
|
const hero = document.querySelector(
|
|
`[data-prefix="${prefix}"] .hero-section`
|
|
)
|
|
|
|
if (hero.dataset.type !== 'type-1') {
|
|
return 'CT_CSS_SKIP_RULE'
|
|
}
|
|
|
|
let key = 'custom_description'
|
|
|
|
let component = value.find(
|
|
(component) => component.id === key
|
|
)
|
|
|
|
let hero_item_max_width =
|
|
(
|
|
component || {
|
|
hero_item_max_width: 100,
|
|
}
|
|
).hero_item_max_width || 100
|
|
|
|
return hero_item_max_width === 100
|
|
? 'CT_CSS_SKIP_RULE'
|
|
: hero_item_max_width
|
|
},
|
|
},
|
|
]
|
|
},
|
|
|
|
...typographyOption({
|
|
id: 'courses_single_hero_title_font',
|
|
selector: `[data-prefix="${prefix}"] .tutor-course-details-title`,
|
|
}),
|
|
|
|
courses_single_hero_title_font_color: {
|
|
selector: `[data-prefix="${prefix}"] .tutor-course-details-title`,
|
|
variable: 'theme-heading-color',
|
|
type: 'color',
|
|
},
|
|
|
|
...typographyOption({
|
|
id: 'courses_single_hero_categories_font',
|
|
selector: `[data-prefix="${prefix}"] .tutor-meta > *`,
|
|
}),
|
|
|
|
courses_single_hero_categories_colors: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .tutor-meta`,
|
|
variable: 'theme-text-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .tutor-meta`,
|
|
variable: 'theme-link-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
...typographyOption({
|
|
id: 'courses_single_hero_actions_font',
|
|
selector: `[data-prefix="${prefix}"] .tutor-course-details-actions > a`,
|
|
}),
|
|
|
|
courses_single_hero_actions_colors: [
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .tutor-course-details-actions > a`,
|
|
variable: 'theme-text-color',
|
|
type: 'color:default',
|
|
},
|
|
|
|
{
|
|
selector: `[data-prefix="${prefix}"] .tutor-course-details-actions > a`,
|
|
variable: 'theme-link-hover-color',
|
|
type: 'color:hover',
|
|
},
|
|
],
|
|
|
|
...typographyOption({
|
|
id: 'courses_single_hero_title_rating_font',
|
|
selector: `[data-prefix="${prefix}"] .tutor-ratings`,
|
|
}),
|
|
|
|
courses_single_hero_title_rating_font_color: {
|
|
selector: `[data-prefix="${prefix}"] .tutor-ratings`,
|
|
variable: 'theme-text-color',
|
|
type: 'color',
|
|
},
|
|
|
|
hero_title_rating_font_color: {
|
|
selector: `[data-prefix="${prefix}"] .tutor-ratings`,
|
|
variable: 'theme-text-color',
|
|
type: 'color',
|
|
},
|
|
})
|
|
|
|
export const getHeroVariables = () => {
|
|
if (document.body.dataset.prefix !== getPrefixFor()) {
|
|
return {}
|
|
}
|
|
|
|
if ((document.body.dataset.prefixCustom || '').indexOf('hero') > -1) {
|
|
return {}
|
|
}
|
|
|
|
return getVariablesForPrefix(getPrefixFor())
|
|
}
|
|
|
|
watchOptionsWithPrefix({
|
|
getPrefix: () => getPrefixFor(),
|
|
getOptionsForPrefix: ({ prefix }) => [
|
|
`${prefix}_hero_structure`,
|
|
`${prefix}_hero_elements`,
|
|
|
|
`${prefix}_parallax`,
|
|
],
|
|
|
|
render: ({ id, prefix }) => {
|
|
if (id === `${prefix}_hero_structure`) {
|
|
const heroStrcture = getOptionFor('hero_structure', getPrefixFor())
|
|
|
|
const container = document.querySelector(
|
|
'.hero-section [class*="ct-container"]'
|
|
)
|
|
|
|
container.classList.remove('ct-container', 'ct-container-narrow')
|
|
|
|
container.classList.add(
|
|
`ct-container${heroStrcture === 'narrow' ? '-narrow' : ''}`
|
|
)
|
|
}
|
|
|
|
if (id === `${prefix}_hero_elements`) {
|
|
const heroElements = getOptionFor('hero_elements', prefix)
|
|
|
|
const heroElementsContainer = document.querySelector(
|
|
'.hero-section .entry-header'
|
|
)
|
|
|
|
heroElements.map((singleLayer) => {
|
|
if (singleLayer.id === 'custom_title' && prefix === 'author') {
|
|
let { has_author_avatar, author_avatar_size } = singleLayer
|
|
|
|
let image = heroElementsContainer.querySelector(
|
|
'.ct-author-name .ct-media-container-static'
|
|
)
|
|
|
|
if (image) {
|
|
const img = image.querySelector('img')
|
|
|
|
if (img) {
|
|
img.height = author_avatar_size || '60'
|
|
img.width = author_avatar_size || '60'
|
|
img.style.height = `${author_avatar_size || 60}px`
|
|
}
|
|
}
|
|
}
|
|
|
|
if (singleLayer.id === 'custom_description') {
|
|
let description =
|
|
heroElementsContainer.querySelector('.page-description')
|
|
|
|
if (singleLayer.enabled && description) {
|
|
responsiveClassesFor(
|
|
singleLayer.description_visibility,
|
|
description
|
|
)
|
|
}
|
|
}
|
|
|
|
if (singleLayer.id === 'breadcrumbs') {
|
|
let breadcrumbs =
|
|
heroElementsContainer.querySelector('.ct-breadcrumbs')
|
|
|
|
if (singleLayer.enabled && breadcrumbs) {
|
|
responsiveClassesFor(
|
|
singleLayer.breadcrumbs_visibility,
|
|
breadcrumbs
|
|
)
|
|
}
|
|
}
|
|
|
|
if (singleLayer.id === 'custom_meta' && singleLayer.enabled) {
|
|
if (
|
|
prefix === 'single_blog_post' ||
|
|
prefix === 'single_page'
|
|
) {
|
|
const metaElements = singleLayer.meta_elements
|
|
|
|
let el =
|
|
heroElementsContainer.querySelectorAll(
|
|
'.entry-meta'
|
|
)
|
|
|
|
if (
|
|
heroElements.filter(
|
|
({ id }) => id === 'custom_meta'
|
|
).length > 1
|
|
) {
|
|
if (
|
|
heroElements
|
|
.filter(({ id }) => id === 'custom_meta')
|
|
.map(({ __id }) => __id)
|
|
.indexOf(singleLayer.__id) === 0
|
|
) {
|
|
el = el[0]
|
|
}
|
|
|
|
if (
|
|
heroElements
|
|
.filter(({ id }) => id === 'custom_meta')
|
|
.map(({ __id }) => __id)
|
|
.indexOf(singleLayer.__id) === 1
|
|
) {
|
|
if (el.length > 1) {
|
|
el = el[1]
|
|
}
|
|
}
|
|
} else {
|
|
el = el[0]
|
|
}
|
|
|
|
renderSingleEntryMeta({
|
|
el,
|
|
meta_elements: metaElements,
|
|
...singleLayer,
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
if (id === `${prefix}_parallax`) {
|
|
const type = getOptionFor('hero_section', prefix)
|
|
|
|
document.querySelector('.hero-section').dataset.parallax = ''
|
|
|
|
if (
|
|
type === 'type-2' &&
|
|
(getOptionFor('page_title_bg_type', prefix) ===
|
|
'custom_image' ||
|
|
getOptionFor('page_title_bg_type', prefix) ===
|
|
'featured_image')
|
|
) {
|
|
const parallaxResult = getOptionFor('parallax', prefix)
|
|
const parallaxOutput = [
|
|
...(parallaxResult.desktop ? ['desktop'] : []),
|
|
...(parallaxResult.tablet ? ['tablet'] : []),
|
|
...(parallaxResult.mobile ? ['mobile'] : []),
|
|
]
|
|
|
|
if (
|
|
document.querySelector('.hero-section figure') &&
|
|
parallaxOutput.length > 0
|
|
) {
|
|
document.querySelector('.hero-section').dataset.parallax =
|
|
parallaxOutput.join(':')
|
|
}
|
|
}
|
|
|
|
ctEvents.trigger('blocksy:parallax:init')
|
|
}
|
|
},
|
|
})
|