controls.js
4 weeks ago
edit.js
4 weeks ago
fields-filters.js
4 weeks ago
fields-html-markup.js
4 weeks ago
fields-main.js
4 weeks ago
fields-post-settings.js
4 weeks ago
fields-stats-tag.js
4 weeks ago
fields-post-settings.js
236 lines
| 1 | const { Fragment } = wp.element; |
| 2 | const { CheckboxControl, SelectControl, TextControl } = wp.components; |
| 3 | const { __ } = wp.i18n; |
| 4 | |
| 5 | export function PostSettingsFields({ attributes, setAttributes, imgSizes }) { |
| 6 | const { |
| 7 | shorten_title, |
| 8 | title_length, |
| 9 | title_by_words, |
| 10 | display_post_excerpt, |
| 11 | excerpt_format, |
| 12 | excerpt_length, |
| 13 | excerpt_by_words, |
| 14 | display_post_thumbnail, |
| 15 | thumbnail_build, |
| 16 | thumbnail_width, |
| 17 | thumbnail_height, |
| 18 | thumbnail_size, |
| 19 | rating |
| 20 | } = attributes; |
| 21 | |
| 22 | const labelShortenTitle = __('Shorten title', 'wordpress-popular-posts'); |
| 23 | const labelShortenTitleTo = __('Shorten title to', 'wordpress-popular-posts'); |
| 24 | const labelDisplayPostExcerpt = __('Display post excerpt', 'wordpress-popular-posts'); |
| 25 | const labelKeepFormatAndLinks = __('Keep text format and links', 'wordpress-popular-posts'); |
| 26 | const labelExcerptLength = __('Excerpt length', 'wordpress-popular-posts'); |
| 27 | const labelDisplayThumbnail = __('Display post thumbnail', 'wordpress-popular-posts'); |
| 28 | const labelThumbnailWidth = __('Thumbnail width', 'wordpress-popular-posts'); |
| 29 | const labelThumbnailHeight = __('Thumbnail height', 'wordpress-popular-posts'); |
| 30 | const labelSizeInPX = __('Size in px units (pixels)', 'wordpress-popular-posts'); |
| 31 | const labelDisplayRating = _wordpress_popular_posts.can_show_rating ? __('Display post rating', 'wordpress-popular-posts') : ''; |
| 32 | |
| 33 | const trimStyleOptions = [ |
| 34 | { label: __('characters', 'wordpress-popular-posts'), value: 0 }, |
| 35 | { label: __('words', 'wordpress-popular-posts'), value: 1 }, |
| 36 | ]; |
| 37 | |
| 38 | const thumbnailBuildOptions = [ |
| 39 | { label: __('Set size manually', 'wordpress-popular-posts'), value: 'manual' }, |
| 40 | { label: __('Use predefined size', 'wordpress-popular-posts'), value: 'predefined' }, |
| 41 | ]; |
| 42 | |
| 43 | const sizes = []; |
| 44 | |
| 45 | if ( imgSizes ) { |
| 46 | for ( const size in imgSizes ) { |
| 47 | if ( imgSizes.hasOwnProperty(size) ) { |
| 48 | sizes.push({ label: size, value: size }); |
| 49 | } |
| 50 | } |
| 51 | } |
| 52 | |
| 53 | const onShortenTitleChange = (value) => { |
| 54 | if ( value === false ) |
| 55 | setAttributes({ title_length: 0, title_by_words: 0, shorten_title: value }); |
| 56 | else |
| 57 | setAttributes({ shorten_title: value, title_length: 25 }); |
| 58 | }; |
| 59 | |
| 60 | const onTitleLengthChange = (value) => { |
| 61 | setAttributes({ title_length: parseInt(value, 10) }); |
| 62 | }; |
| 63 | |
| 64 | const onTitleLengthByWordsChange = (value) => { |
| 65 | setAttributes({ title_by_words: parseInt(value, 10) }); |
| 66 | }; |
| 67 | |
| 68 | const onDisplayExcerptChange = (value) => { |
| 69 | if ( value === false ) |
| 70 | setAttributes({ excerpt_length: 0, excerpt_by_words: 0, display_post_excerpt: value, excerpt_format: false }); |
| 71 | else |
| 72 | setAttributes({ display_post_excerpt: value, excerpt_length: 55 }); |
| 73 | }; |
| 74 | |
| 75 | const onKeepFormatAndLinksChange = (value) => { |
| 76 | setAttributes({ excerpt_format: value }); |
| 77 | }; |
| 78 | |
| 79 | const onExcerptLengthChange = (value) => { |
| 80 | setAttributes({ excerpt_length: parseInt(value, 10) }); |
| 81 | }; |
| 82 | |
| 83 | const onExcerptLengthByWordsChange = (value) => { |
| 84 | setAttributes({ excerpt_by_words: Number(value) }); |
| 85 | }; |
| 86 | |
| 87 | const onDisplayThumbnailChange = (value) => { |
| 88 | if ( value === false ) |
| 89 | setAttributes({ thumbnail_width: 0, thumbnail_height: 0, display_post_thumbnail: value, thumbnail_build: 'manual' }); |
| 90 | else |
| 91 | setAttributes({ thumbnail_width: 75, thumbnail_height: 75, display_post_thumbnail: value }); |
| 92 | }; |
| 93 | |
| 94 | const onThumbnailDimChange = (dim, value) => { |
| 95 | value = parseInt(value, 10); |
| 96 | setAttributes(( 'width' === dim ? { thumbnail_width: value } : { thumbnail_height: value } )); |
| 97 | }; |
| 98 | |
| 99 | const onThumbnailBuildChange = (value) => { |
| 100 | if ( imgSizes ) { |
| 101 | const sizesArr = Object.keys(imgSizes).map((s) => ({ label: s, value: s })); |
| 102 | |
| 103 | if ( 'predefined' === value ) { |
| 104 | const fallback = 0; |
| 105 | const fallbackValue = sizesArr[fallback] ? sizesArr[fallback].value : ''; |
| 106 | |
| 107 | if ( fallbackValue && imgSizes[fallbackValue] ) { |
| 108 | setAttributes({ |
| 109 | thumbnail_width: imgSizes[fallbackValue].width, |
| 110 | thumbnail_height: imgSizes[fallbackValue].height, |
| 111 | thumbnail_size: fallbackValue |
| 112 | }); |
| 113 | } |
| 114 | } else { |
| 115 | setAttributes({ |
| 116 | thumbnail_width: 75, |
| 117 | thumbnail_height: 75, |
| 118 | thumbnail_size: '' |
| 119 | }); |
| 120 | } |
| 121 | } |
| 122 | |
| 123 | setAttributes({ thumbnail_build: value }); |
| 124 | }; |
| 125 | |
| 126 | const onThumbnailSizeChange = (value) => { |
| 127 | if ( imgSizes && imgSizes[value] ) { |
| 128 | setAttributes({ |
| 129 | thumbnail_width: imgSizes[value].width, |
| 130 | thumbnail_height: imgSizes[value].height, |
| 131 | thumbnail_size: value |
| 132 | }); |
| 133 | } |
| 134 | }; |
| 135 | |
| 136 | return <Fragment> |
| 137 | <p className='not-a-legend'><strong>{__('Posts settings', 'wordpress-popular-posts')}</strong></p> |
| 138 | <CheckboxControl |
| 139 | label={labelShortenTitle} |
| 140 | checked={shorten_title} |
| 141 | onChange={onShortenTitleChange} |
| 142 | /> |
| 143 | { shorten_title && |
| 144 | <div className='option-subset'> |
| 145 | <TextControl |
| 146 | label={labelShortenTitleTo} |
| 147 | type='number' |
| 148 | value={title_length} |
| 149 | min='1' |
| 150 | onChange={onTitleLengthChange} |
| 151 | /> |
| 152 | <SelectControl |
| 153 | value={title_by_words} |
| 154 | options={trimStyleOptions} |
| 155 | onChange={onTitleLengthByWordsChange} |
| 156 | /> |
| 157 | </div> |
| 158 | } |
| 159 | <CheckboxControl |
| 160 | label={labelDisplayPostExcerpt} |
| 161 | checked={display_post_excerpt} |
| 162 | onChange={onDisplayExcerptChange} |
| 163 | /> |
| 164 | { display_post_excerpt && |
| 165 | <div className='option-subset'> |
| 166 | <CheckboxControl |
| 167 | label={labelKeepFormatAndLinks} |
| 168 | checked={excerpt_format} |
| 169 | onChange={onKeepFormatAndLinksChange} |
| 170 | /> |
| 171 | <TextControl |
| 172 | label={labelExcerptLength} |
| 173 | type='number' |
| 174 | value={excerpt_length} |
| 175 | min='1' |
| 176 | onChange={onExcerptLengthChange} |
| 177 | /> |
| 178 | <SelectControl |
| 179 | value={excerpt_by_words} |
| 180 | options={trimStyleOptions} |
| 181 | onChange={onExcerptLengthByWordsChange} |
| 182 | /> |
| 183 | </div> |
| 184 | } |
| 185 | <CheckboxControl |
| 186 | label={labelDisplayThumbnail} |
| 187 | checked={display_post_thumbnail} |
| 188 | onChange={onDisplayThumbnailChange} |
| 189 | /> |
| 190 | { display_post_thumbnail && |
| 191 | <div className='option-subset'> |
| 192 | <SelectControl |
| 193 | value={thumbnail_build} |
| 194 | options={thumbnailBuildOptions} |
| 195 | onChange={onThumbnailBuildChange} |
| 196 | /> |
| 197 | { 'manual' === thumbnail_build && |
| 198 | <Fragment> |
| 199 | <TextControl |
| 200 | label={labelThumbnailWidth} |
| 201 | type='number' |
| 202 | help={labelSizeInPX} |
| 203 | value={thumbnail_width} |
| 204 | min='1' |
| 205 | onChange={(value) => onThumbnailDimChange('width', value)} |
| 206 | /> |
| 207 | <TextControl |
| 208 | label={labelThumbnailHeight} |
| 209 | type='number' |
| 210 | help={labelSizeInPX} |
| 211 | value={thumbnail_height} |
| 212 | min='1' |
| 213 | onChange={(value) => onThumbnailDimChange('height', value)} |
| 214 | /> |
| 215 | </Fragment> |
| 216 | } |
| 217 | { 'predefined' === thumbnail_build && |
| 218 | <Fragment> |
| 219 | <SelectControl |
| 220 | value={thumbnail_size} |
| 221 | options={sizes} |
| 222 | onChange={onThumbnailSizeChange} |
| 223 | /> |
| 224 | </Fragment> |
| 225 | } |
| 226 | </div> |
| 227 | } |
| 228 | { _wordpress_popular_posts.can_show_rating && |
| 229 | <CheckboxControl |
| 230 | label={labelDisplayRating} |
| 231 | checked={rating} |
| 232 | onChange={(value) => setAttributes({ rating: value })} |
| 233 | /> |
| 234 | } |
| 235 | </Fragment>; |
| 236 | } |