-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1041 from vektor-inc/fix/outer/advanced-color-pal…
…ette 【確認待ち】Outerブロックのカスタムカラーパレットに対応
- Loading branch information
Showing
17 changed files
with
802 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| const GenerateBgImage = (props) => { | ||
| const { attributes, clientId, prefix } = props; | ||
| const { bgImageMobile, bgImageTablet, bgImage, bgSize } = attributes; | ||
|
|
||
| const mobileViewport = 'max-width: 575.98px'; | ||
| const tabletViewport = 'min-width: 576px'; | ||
| const pcViewport = 'min-width: 992px'; | ||
| const underPcViewport = 'max-width: 992.98px'; | ||
|
|
||
| let backgroundStyle; | ||
| const backgroundPosition = 'background-position:center!important;'; | ||
| if ('cover' === bgSize) { | ||
| backgroundStyle = `background-size:${bgSize}!important; ${backgroundPosition}`; | ||
| } else if ('repeat' === bgSize) { | ||
| backgroundStyle = `background-repeat:${bgSize}!important; background-size: auto; ${backgroundPosition}`; | ||
| } else { | ||
| backgroundStyle = ``; | ||
| } | ||
|
|
||
| //moible only | ||
| if (bgImageMobile && !bgImageTablet && !bgImage) { | ||
| return ( | ||
| <style>{`.${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}}`}</style> | ||
| ); | ||
| } | ||
| //tablet only | ||
| if (!bgImageMobile && bgImageTablet && !bgImage) { | ||
| return ( | ||
| <style>{`.${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}}`}</style> | ||
| ); | ||
| } | ||
| //pc only | ||
| if (!bgImageMobile && !bgImageTablet && bgImage) { | ||
| return ( | ||
| <style>{`.${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}}`}</style> | ||
| ); | ||
| } | ||
| //pc -mobile | ||
| if (bgImageMobile && !bgImageTablet && bgImage) { | ||
| return ( | ||
| <style> | ||
| {` | ||
| @media screen and (${underPcViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}} | ||
| } | ||
| @media screen and (${pcViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}} | ||
| } | ||
| `} | ||
| </style> | ||
| ); | ||
| } | ||
| //pc -tablet | ||
| if (!bgImageMobile && bgImageTablet && bgImage) { | ||
| return ( | ||
| <style> | ||
| {` | ||
| @media screen and (${underPcViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}} | ||
| } | ||
| @media screen and (${pcViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}} | ||
| } | ||
| `} | ||
| </style> | ||
| ); | ||
| } | ||
| //tablet - mobile | ||
| if (bgImageMobile && bgImageTablet && !bgImage) { | ||
| return ( | ||
| <style> | ||
| {` | ||
| @media screen and (${mobileViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}} | ||
| } | ||
| @media screen and (${tabletViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}} | ||
| } | ||
| `} | ||
| </style> | ||
| ); | ||
| } | ||
| //pc -tablet - mobile | ||
| if (bgImageMobile && bgImageTablet && bgImage) { | ||
| return ( | ||
| <style> | ||
| {` | ||
| @media screen and (${mobileViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImageMobile}); ${backgroundStyle}} | ||
| } | ||
| @media screen and (${tabletViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImageTablet}); ${backgroundStyle}} | ||
| } | ||
| @media screen and (${pcViewport}) { | ||
| .${prefix}-${clientId}{background-image: url(${bgImage}); ${backgroundStyle}} | ||
| } | ||
| `} | ||
| </style> | ||
| ); | ||
| } | ||
| }; | ||
| export default GenerateBgImage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
164 changes: 164 additions & 0 deletions
164
src/blocks/_pro/outer/deprecated/1.26.0/component-divider.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| const componentDivider = (level, color, whichSide, dividerType) => { | ||
| let sectionPadding; | ||
| let sectionClass; | ||
| let lenderDivider; | ||
|
|
||
| // eslint-disable-next-line no-shadow | ||
| const tiltSectionStyle = (level, color) => { | ||
| if (level > 0) { | ||
| return ( | ||
| <path | ||
| d={`m0,${100 - level} L100,100 L0,100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } else if (level < 0) { | ||
| //絶対値に変換 | ||
| const absLevel = Math.abs(level); | ||
|
|
||
| return ( | ||
| <path | ||
| d={`m100,${100 - absLevel} L0,100 L100,100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| // eslint-disable-next-line no-shadow | ||
| const curveSectionStyle = (level, color) => { | ||
| if (level > 0) { | ||
| return ( | ||
| <path | ||
| d={`m0,${100 - level} q50,${level * 2},100,0 V100 L0,100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } else if (level < 0) { | ||
| return ( | ||
| <path | ||
| d={`m0,100 q50,${level * 2},100,0 V100 L0,100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| // eslint-disable-next-line no-shadow | ||
| const waveSectionStyle = (level, color) => { | ||
| if (level > 0) { | ||
| return ( | ||
| <path | ||
| d={`m0,${100 - level / 2 | ||
| } q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } else if (level < 0) { | ||
| return ( | ||
| <path | ||
| d={`m0,${level / 2 + 100 | ||
| } q20,${level},40,0 t40,0 t40,0 V100 L0,100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| // eslint-disable-next-line no-shadow | ||
| const triangleSectionStyle = (level, color) => { | ||
| const absLevel = Math.abs(level); | ||
| const DivideAbs4 = absLevel / 4; | ||
|
|
||
| if (level > 0) { | ||
| return ( | ||
| <path | ||
| d={`m0,100 h${50 - DivideAbs4 | ||
| } l${DivideAbs4},-${absLevel} l${DivideAbs4},${absLevel} h${DivideAbs4} v100 h-100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } else if (level < 0) { | ||
| return ( | ||
| <path | ||
| d={`m0,${100 - absLevel} h${50 - DivideAbs4 | ||
| } l${DivideAbs4},${absLevel} l${DivideAbs4},-${absLevel} h${50 - DivideAbs4 | ||
| } v${absLevel + 1} h-100 z`} | ||
| strokeWidth="0" | ||
| fill={color} | ||
| /> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| //背景色をクリアした時は、白に変更 | ||
| if (!color) { | ||
| color = '#fff'; | ||
| } | ||
|
|
||
| //Paddingの条件分岐を追加 | ||
| if (dividerType === 'tilt') { | ||
| sectionPadding = Math.abs(level); | ||
| lenderDivider = tiltSectionStyle(level, color); | ||
| } else if (dividerType === 'curve') { | ||
| if (level > 0) { | ||
| sectionPadding = Math.abs(level); | ||
| } else if (level < 0) { | ||
| sectionPadding = Math.abs(level) * 2; | ||
| } | ||
| lenderDivider = curveSectionStyle(level, color); | ||
| } else if (dividerType === 'wave') { | ||
| sectionPadding = Math.abs(level); | ||
| lenderDivider = waveSectionStyle(level, color); | ||
| } else if (dividerType === 'triangle') { | ||
| sectionPadding = Math.abs(level); | ||
| lenderDivider = triangleSectionStyle(level, color); | ||
| } | ||
|
|
||
| //classにdividerTypeを追加 | ||
| // eslint-disable-next-line prefer-const | ||
| sectionClass = dividerType; | ||
|
|
||
| //upper-paddingを追加 | ||
| if (whichSide === 'upper') { | ||
| return ( | ||
| <div | ||
| className={`vk_outer_separator vk_outer_separator-position-upper vk_outer_separator-type-${sectionClass}`} | ||
| style={{ paddingBottom: sectionPadding + `px` }} | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 100 100" | ||
| preserveAspectRatio="none" | ||
| > | ||
| {lenderDivider} | ||
| </svg> | ||
| </div> | ||
| ); | ||
| //lower-paddingを追加 | ||
| } else if (whichSide === 'lower') { | ||
| return ( | ||
| <div | ||
| className={`vk_outer_separator vk_outer_separator-position-lower vk_outer_separator-type-${sectionClass}`} | ||
| style={{ paddingTop: sectionPadding + `px` }} | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 100 100" | ||
| preserveAspectRatio="none" | ||
| > | ||
| {lenderDivider} | ||
| </svg> | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export { componentDivider }; |
Oops, something went wrong.