deprecated
5 years ago
block.js
5 years ago
component.js
5 years ago
heading-toolbar.js
5 years ago
icon.svg
5 years ago
schema.js
5 years ago
style.css
6 years ago
style.css.map
6 years ago
style.scss
5 years ago
component.js
151 lines
| 1 | import { vkbBlockEditor } from "./../_helper/depModules"; |
| 2 | const { RichText } = vkbBlockEditor; |
| 3 | const { __ } = wp.i18n; // Import __() from wp.i18n |
| 4 | import ReactHtmlParser from 'react-html-parser'; |
| 5 | import { Fragment } from "react"; |
| 6 | |
| 7 | const renderTitle = (level, contents,tStyle, headingStyle ) =>{ |
| 8 | switch (level) { |
| 9 | case 1: |
| 10 | return <h1 style={ tStyle } className={ headingStyle }>{ contents }</h1>; |
| 11 | case 2: |
| 12 | return <h2 style={ tStyle } className={ headingStyle }>{ contents }</h2>; |
| 13 | case 3: |
| 14 | return <h3 style={ tStyle } className={ headingStyle }>{ contents }</h3>; |
| 15 | case 4: |
| 16 | return <h4 style={ tStyle } className={ headingStyle }>{ contents }</h4>; |
| 17 | case 5: |
| 18 | return <h5 style={ tStyle } className={ headingStyle }>{ contents }</h5>; |
| 19 | case 6: |
| 20 | return <h6 style={ tStyle } className={ headingStyle }>{ contents }</h6>; |
| 21 | } |
| 22 | } |
| 23 | |
| 24 | export const VKBHeading =(props) => { |
| 25 | const {attributes,setAttributes,for_} = props |
| 26 | let { |
| 27 | level, |
| 28 | align, |
| 29 | title, |
| 30 | titleColor, |
| 31 | titleSize, |
| 32 | subText, |
| 33 | subTextFlag, |
| 34 | subTextColor, |
| 35 | subTextSize, |
| 36 | titleStyle, |
| 37 | titleMarginBottom, |
| 38 | outerMarginBottom, |
| 39 | fontAwesomeIconBefore, |
| 40 | fontAwesomeIconAfter, |
| 41 | fontAwesomeIconColor |
| 42 | } = attributes; |
| 43 | const containerClass = `vk_heading vk_heading-style-${titleStyle}`; |
| 44 | let cStyle; |
| 45 | let tStyle; |
| 46 | |
| 47 | //containerのマージンを切り替え |
| 48 | if (outerMarginBottom) { |
| 49 | cStyle = { marginBottom: outerMarginBottom + `rem` }; |
| 50 | } |
| 51 | |
| 52 | //titleのマージンを切り替え |
| 53 | if (titleMarginBottom !== null && titleMarginBottom !== undefined) { |
| 54 | tStyle = { |
| 55 | color: titleColor, |
| 56 | fontSize: titleSize + "rem", |
| 57 | marginBottom: titleMarginBottom + "rem", |
| 58 | textAlign: align |
| 59 | }; |
| 60 | } else { |
| 61 | tStyle = { |
| 62 | color: titleColor, |
| 63 | fontSize: titleSize + "rem", |
| 64 | textAlign: align |
| 65 | }; |
| 66 | } |
| 67 | |
| 68 | const headingStyle = `vk_heading_title vk_heading_title-style-${titleStyle}`; |
| 69 | const subTextStyle = { |
| 70 | color: subTextColor, |
| 71 | fontSize: subTextSize + "rem", |
| 72 | textAlign: align |
| 73 | } |
| 74 | const subTextClass = `vk_heading_subtext vk_heading_subtext-style-${titleStyle}`; |
| 75 | |
| 76 | let iconBefore = ''; |
| 77 | let iconAfter = ''; |
| 78 | if (fontAwesomeIconBefore) { |
| 79 | |
| 80 | //for recovering block |
| 81 | fontAwesomeIconColor = fontAwesomeIconColor ? fontAwesomeIconColor : "#000000" |
| 82 | |
| 83 | //add inline css |
| 84 | const faIconFragmentBefore= fontAwesomeIconBefore.split('<i'); |
| 85 | faIconFragmentBefore[0] = faIconFragmentBefore[0] + `<i style="color:${fontAwesomeIconColor};" ` |
| 86 | iconBefore = faIconFragmentBefore.join('') |
| 87 | } |
| 88 | if (fontAwesomeIconAfter) { |
| 89 | |
| 90 | //for recovering block |
| 91 | fontAwesomeIconColor = fontAwesomeIconColor ? fontAwesomeIconColor : "#000000" |
| 92 | |
| 93 | //add class and inline css |
| 94 | const faIconFragmentAfter = fontAwesomeIconAfter.split('<i'); |
| 95 | faIconFragmentAfter[0] = faIconFragmentAfter[0] + `<i style="color:${fontAwesomeIconColor};" ` |
| 96 | iconAfter = faIconFragmentAfter.join('') |
| 97 | } |
| 98 | |
| 99 | if (for_ === "edit") { |
| 100 | |
| 101 | const titleContent = <Fragment> |
| 102 | { ReactHtmlParser(iconBefore) } |
| 103 | <RichText |
| 104 | tagName={ "span" } |
| 105 | value={ title } |
| 106 | onChange={ (value) => { |
| 107 | setAttributes({ title: value} ) |
| 108 | } } |
| 109 | placeholder={ __("Input title…", "vk-blocks") } |
| 110 | /> |
| 111 | { ReactHtmlParser(iconAfter) } |
| 112 | </Fragment> |
| 113 | |
| 114 | let subtextContent; |
| 115 | if (subTextFlag === "on") { |
| 116 | subtextContent = <RichText |
| 117 | tagName={ "p" } |
| 118 | value={ subText } |
| 119 | onChange={ value => setAttributes({ subText: value }) } |
| 120 | style={ subTextStyle } |
| 121 | className={ subTextClass } |
| 122 | placeholder={ __("Input sub text…", "vk-blocks") } |
| 123 | /> |
| 124 | } |
| 125 | |
| 126 | return (<div className={ containerClass } style={ cStyle }>{ renderTitle(level, titleContent, tStyle, headingStyle) }{ subtextContent }</div>); |
| 127 | |
| 128 | } else if (for_ === "save") { |
| 129 | |
| 130 | const titleContent = <Fragment> |
| 131 | { ReactHtmlParser(iconBefore) } |
| 132 | <RichText.Content |
| 133 | tagName={ "span" } |
| 134 | value={ title } |
| 135 | /> |
| 136 | { ReactHtmlParser(iconAfter) } |
| 137 | </Fragment> |
| 138 | |
| 139 | let subtextContent; |
| 140 | if (subTextFlag === "on") { |
| 141 | subtextContent = <RichText.Content |
| 142 | tagName={ "p" } |
| 143 | value={ subText } |
| 144 | style={ subTextStyle } |
| 145 | className={ subTextClass } |
| 146 | /> |
| 147 | } |
| 148 | return (<div className={ containerClass } style={ cStyle }>{ renderTitle(level, titleContent, tStyle, headingStyle) }{ subtextContent }</div>); |
| 149 | } |
| 150 | } |
| 151 |