edit.js
754 lines
| 1 | import { escape_html, unescape_html } from '../utils'; |
| 2 | |
| 3 | const { serverSideRender: ServerSideRender } = wp; |
| 4 | const { Component, Fragment } = wp.element; |
| 5 | const { BlockControls } = wp.blockEditor; |
| 6 | const { Button, CheckboxControl, Disabled, SelectControl, Spinner, TextareaControl, TextControl, Toolbar } = wp.components; |
| 7 | const { __ } = wp.i18n; |
| 8 | const endpoint = 'wordpress-popular-posts/v1'; |
| 9 | |
| 10 | export class WPPWidgetBlockEdit extends Component |
| 11 | { |
| 12 | constructor(props) |
| 13 | { |
| 14 | super(props); |
| 15 | |
| 16 | this.state = { |
| 17 | error: null, |
| 18 | editMode: true, |
| 19 | themes: null, |
| 20 | imgSizes: null, |
| 21 | taxonomies: null |
| 22 | } |
| 23 | } |
| 24 | |
| 25 | componentDidMount() |
| 26 | { |
| 27 | const { attributes } = this.props; |
| 28 | |
| 29 | this.getThemes(); |
| 30 | this.getImageSizes(); |
| 31 | this.getTaxonomies(); |
| 32 | |
| 33 | this.setState({ editMode: attributes._editMode }); |
| 34 | } |
| 35 | |
| 36 | getThemes() |
| 37 | { |
| 38 | wp.apiFetch({ path: endpoint + '/themes' }) |
| 39 | .then( |
| 40 | ( themes ) => { |
| 41 | this.setState({ |
| 42 | themes |
| 43 | }); |
| 44 | }, |
| 45 | ( error ) => { |
| 46 | this.setState({ |
| 47 | error, |
| 48 | themes: null |
| 49 | }); |
| 50 | } |
| 51 | ); |
| 52 | } |
| 53 | |
| 54 | getImageSizes() |
| 55 | { |
| 56 | wp.apiFetch({ path: endpoint + '/thumbnails' }) |
| 57 | .then( |
| 58 | ( imgSizes ) => { |
| 59 | this.setState({ |
| 60 | imgSizes |
| 61 | }); |
| 62 | }, |
| 63 | ( error ) => { |
| 64 | this.setState({ |
| 65 | error, |
| 66 | imgSizes: null |
| 67 | }); |
| 68 | } |
| 69 | ); |
| 70 | } |
| 71 | |
| 72 | getTaxonomies() |
| 73 | { |
| 74 | const { attributes } = this.props; |
| 75 | |
| 76 | wp.apiFetch({ path: endpoint + '/taxonomies' }) |
| 77 | .then( |
| 78 | ( taxonomies ) => { |
| 79 | if ( taxonomies ) { |
| 80 | let tax = attributes.tax.split(';'), |
| 81 | term_id = attributes.term_id.split(';'); |
| 82 | |
| 83 | if ( tax.length && tax.length == term_id.length ) { |
| 84 | let selected_taxonomies = {}; |
| 85 | |
| 86 | for( var t = 0; t < tax.length; t++ ) { |
| 87 | selected_taxonomies[tax[t]] = term_id[t]; |
| 88 | } |
| 89 | |
| 90 | for( const tax in taxonomies ) { |
| 91 | taxonomies[tax]._terms = 'undefined' != typeof selected_taxonomies[tax] ? selected_taxonomies[tax] : ''; |
| 92 | } |
| 93 | } |
| 94 | } |
| 95 | |
| 96 | this.setState({ |
| 97 | taxonomies |
| 98 | }); |
| 99 | }, |
| 100 | ( error ) => { |
| 101 | this.setState({ |
| 102 | error, |
| 103 | taxonomies: null |
| 104 | }); |
| 105 | } |
| 106 | ); |
| 107 | } |
| 108 | |
| 109 | getBlockControls() |
| 110 | { |
| 111 | const { setAttributes } = this.props; |
| 112 | const _self = this; |
| 113 | |
| 114 | function onPreviewChange() |
| 115 | { |
| 116 | let editMode = ! _self.state.editMode; |
| 117 | _self.setState({ editMode: editMode }); |
| 118 | setAttributes({ _editMode: editMode }); |
| 119 | } |
| 120 | |
| 121 | return ( |
| 122 | <BlockControls> |
| 123 | <Toolbar> |
| 124 | <Button |
| 125 | label={ this.state.editMode ? __('Preview', 'wordpress-popular-posts') : __('Edit', 'wordpress-popular-posts') } |
| 126 | icon={ this.state.editMode ? "format-image" : "edit" } |
| 127 | onClick={onPreviewChange} |
| 128 | /> |
| 129 | </Toolbar> |
| 130 | </BlockControls> |
| 131 | ); |
| 132 | } |
| 133 | |
| 134 | getMainFields() |
| 135 | { |
| 136 | const { attributes, setAttributes } = this.props; |
| 137 | |
| 138 | function onTitleChange(value) |
| 139 | { |
| 140 | value = escape_html(unescape_html(value)); |
| 141 | setAttributes({ title: value }); |
| 142 | } |
| 143 | |
| 144 | function onLimitChange(value) |
| 145 | { |
| 146 | let limit = Number.isInteger(Number(value)) && Number(value) > 0 ? value : 10; |
| 147 | setAttributes({ limit: Number(limit) }); |
| 148 | } |
| 149 | |
| 150 | function onOrderByChange(value) |
| 151 | { |
| 152 | setAttributes({ order_by: value }); |
| 153 | } |
| 154 | |
| 155 | function onTimeRangeChange(value) |
| 156 | { |
| 157 | setAttributes({ range: value }); |
| 158 | } |
| 159 | |
| 160 | function onTimeQuantityChange(value) { |
| 161 | let qty = Number.isInteger(Number(value)) && Number(value) > 0 ? value : 24; |
| 162 | setAttributes({ time_quantity: Number(qty) }); |
| 163 | } |
| 164 | |
| 165 | function onTimeUnitChange(value) { |
| 166 | setAttributes({ time_unit: value }); |
| 167 | } |
| 168 | |
| 169 | function onFreshnessChange(value) |
| 170 | { |
| 171 | setAttributes({ freshness: value }); |
| 172 | } |
| 173 | |
| 174 | return <Fragment> |
| 175 | <TextControl |
| 176 | label={__('Title', 'wordpress-popular-posts')} |
| 177 | value={attributes.title} |
| 178 | onChange={onTitleChange} |
| 179 | /> |
| 180 | <TextControl |
| 181 | label={__('Limit', 'wordpress-popular-posts')} |
| 182 | value={attributes.limit} |
| 183 | onChange={onLimitChange} |
| 184 | /> |
| 185 | <SelectControl |
| 186 | label={__('Sort posts by', 'wordpress-popular-posts')} |
| 187 | value={attributes.order_by} |
| 188 | options={[ |
| 189 | {label: __('Total views', 'wordpress-popular-posts'), value: 'views'}, |
| 190 | {label: __('Comments', 'wordpress-popular-posts'), value: 'comments'} |
| 191 | ]} |
| 192 | onChange={onOrderByChange} |
| 193 | /> |
| 194 | <SelectControl |
| 195 | label={__('Time Range', 'wordpress-popular-posts')} |
| 196 | value={attributes.range} |
| 197 | options={[ |
| 198 | {label: __('Last 24 Hours', 'wordpress-popular-posts'), value: 'last24hours'}, |
| 199 | {label: __('Last 7 days', 'wordpress-popular-posts'), value: 'last7days'}, |
| 200 | {label: __('Last 30 days', 'wordpress-popular-posts'), value: 'last30days'}, |
| 201 | {label: __('All-time', 'wordpress-popular-posts'), value: 'all'}, |
| 202 | {label: __('Custom', 'wordpress-popular-posts'), value: 'custom'}, |
| 203 | ]} |
| 204 | onChange={onTimeRangeChange} |
| 205 | /> |
| 206 | { 'custom' == attributes.range && |
| 207 | <div className='option-subset'> |
| 208 | <TextControl |
| 209 | label={__('Time Quantity', 'wordpress-popular-posts')} |
| 210 | value={attributes.time_quantity} |
| 211 | onChange={onTimeQuantityChange} |
| 212 | /> |
| 213 | <SelectControl |
| 214 | label={__('Time Unit', 'wordpress-popular-posts')} |
| 215 | value={attributes.time_unit} |
| 216 | options={[ |
| 217 | {label: __('Minute(s)', 'wordpress-popular-posts'), value: 'minute'}, |
| 218 | {label: __('Hour(s)', 'wordpress-popular-posts'), value: 'hour'}, |
| 219 | {label: __('Day(s)', 'wordpress-popular-posts'), value: 'day'} |
| 220 | ]} |
| 221 | onChange={onTimeUnitChange} |
| 222 | /> |
| 223 | </div> |
| 224 | } |
| 225 | <CheckboxControl |
| 226 | label={__('Display only posts published within the selected Time Range', 'wordpress-popular-posts')} |
| 227 | checked={attributes.freshness} |
| 228 | onChange={onFreshnessChange} |
| 229 | /> |
| 230 | </Fragment>; |
| 231 | } |
| 232 | |
| 233 | getFiltersFields() |
| 234 | { |
| 235 | const { attributes, setAttributes } = this.props; |
| 236 | const _self = this; |
| 237 | |
| 238 | function onPostTypeChange(value) |
| 239 | { |
| 240 | let new_value = value.replace(/[^a-z0-9-_\,]+/gi, ''); |
| 241 | setAttributes({ post_type: new_value }); |
| 242 | } |
| 243 | |
| 244 | function onPostIDExcludeChange(value) |
| 245 | { |
| 246 | let new_value = value.replace(/[^0-9\,]/g, ''); |
| 247 | setAttributes({ pid: new_value }); |
| 248 | } |
| 249 | |
| 250 | function onAuthorChange(value) |
| 251 | { |
| 252 | let new_value = value.replace(/[^0-9\,]/g, ''); |
| 253 | setAttributes({ author: new_value }); |
| 254 | } |
| 255 | |
| 256 | function onTaxChange(taxonomy_name, terms) |
| 257 | { |
| 258 | let taxonomies = _self.state.taxonomies; |
| 259 | |
| 260 | terms = terms.replace(/[^0-9-\,]/g, ''); |
| 261 | |
| 262 | if ( taxonomies && 'undefined' != typeof taxonomies[taxonomy_name] ) { |
| 263 | taxonomies[taxonomy_name]._terms = terms; |
| 264 | _self.setState({ taxonomies: taxonomies }); |
| 265 | } |
| 266 | } |
| 267 | |
| 268 | function onTaxBlur(taxonomy_name) |
| 269 | { |
| 270 | let taxonomies = _self.state.taxonomies; |
| 271 | |
| 272 | if ( taxonomies && 'undefined' != typeof taxonomies[taxonomy_name] ) { |
| 273 | let terms_arr = taxonomies[taxonomy_name]._terms.split(','); |
| 274 | |
| 275 | // Remove invalid values |
| 276 | if ( terms_arr.length ) |
| 277 | terms_arr = terms_arr.map((term) => term.trim()) |
| 278 | .filter((term) => '' != term && '-' != term); |
| 279 | |
| 280 | // Remove duplicates |
| 281 | if ( terms_arr.length ) |
| 282 | terms_arr = Array.from(new Set(terms_arr)); |
| 283 | |
| 284 | taxonomies[taxonomy_name]._terms = terms_arr.join(','); |
| 285 | |
| 286 | _self.setState({ taxonomies }); |
| 287 | |
| 288 | let tax = '', |
| 289 | term_id = ''; |
| 290 | |
| 291 | for ( let key in _self.state.taxonomies ) { |
| 292 | if ( _self.state.taxonomies.hasOwnProperty(key) ) { |
| 293 | |
| 294 | if ( ! _self.state.taxonomies[key]._terms.length ) |
| 295 | continue; |
| 296 | |
| 297 | tax += key + ';'; |
| 298 | term_id += _self.state.taxonomies[key]._terms + ';'; |
| 299 | } |
| 300 | } |
| 301 | |
| 302 | // Remove trailing semicolon |
| 303 | if ( tax && term_id ) { |
| 304 | tax = tax.replace(new RegExp(';$'), ''); |
| 305 | term_id = term_id.replace(new RegExp(';$'), ''); |
| 306 | } |
| 307 | |
| 308 | setAttributes({ tax: tax, term_id: term_id }); |
| 309 | } |
| 310 | } |
| 311 | |
| 312 | let taxonomies = []; |
| 313 | |
| 314 | if ( this.state.taxonomies ) { |
| 315 | for( const tax in this.state.taxonomies ) { |
| 316 | taxonomies.push( |
| 317 | { |
| 318 | name: this.state.taxonomies[tax].name, |
| 319 | label: this.state.taxonomies[tax].labels.singular_name + ' (' + this.state.taxonomies[tax].name + ')', |
| 320 | terms: this.state.taxonomies[tax]._terms |
| 321 | } |
| 322 | ); |
| 323 | } |
| 324 | } |
| 325 | |
| 326 | return <Fragment> |
| 327 | <p className='not-a-legend'><strong>{__('Filters', 'wordpress-popular-posts')}</strong></p> |
| 328 | <TextControl |
| 329 | label={__('Post type(s)', 'wordpress-popular-posts')} |
| 330 | help={__('Post types must be comma separated.', 'wordpress-popular-posts')} |
| 331 | value={attributes.post_type} |
| 332 | onChange={onPostTypeChange} |
| 333 | /> |
| 334 | <TextControl |
| 335 | label={__('Post ID(s) to exclude', 'wordpress-popular-posts')} |
| 336 | help={__('IDs must be comma separated.', 'wordpress-popular-posts')} |
| 337 | value={attributes.pid} |
| 338 | onChange={onPostIDExcludeChange} |
| 339 | /> |
| 340 | <TextControl |
| 341 | label={__('Author ID(s)', 'wordpress-popular-posts')} |
| 342 | help={__('IDs must be comma separated.', 'wordpress-popular-posts')} |
| 343 | value={attributes.author} |
| 344 | onChange={onAuthorChange} |
| 345 | /> |
| 346 | { taxonomies && taxonomies.filter((tax) => 'post_format' != tax.name).map((tax) => |
| 347 | { |
| 348 | return ( |
| 349 | <TextControl |
| 350 | label={tax.label} |
| 351 | help={__('Term IDs must be comma separated, prefix a minus sign to exclude.', 'wordpress-popular-posts')} |
| 352 | value={tax.terms} |
| 353 | onChange={(terms) => onTaxChange(tax.name, terms)} |
| 354 | onBlur={() => onTaxBlur(tax.name)} |
| 355 | /> |
| 356 | ); |
| 357 | } |
| 358 | )} |
| 359 | </Fragment>; |
| 360 | } |
| 361 | |
| 362 | getPostSettingsFields() |
| 363 | { |
| 364 | const { attributes, setAttributes } = this.props; |
| 365 | const _self = this; |
| 366 | |
| 367 | function onShortenTitleChange(value) { |
| 368 | if ( false == value ) |
| 369 | setAttributes({ title_length: 0, title_by_words: 0, shorten_title: value }); |
| 370 | else |
| 371 | setAttributes({ shorten_title: value, title_length: 25 }); |
| 372 | } |
| 373 | |
| 374 | function onTitleLengthChange(value) |
| 375 | { |
| 376 | let length = Number.isInteger(Number(value)) && Number(value) >= 0 ? value : 0; |
| 377 | setAttributes({ title_length: Number(length) }); |
| 378 | } |
| 379 | |
| 380 | function onDisplayExcerptChange(value) { |
| 381 | if ( false == value ) |
| 382 | setAttributes({ excerpt_length: 0, excerpt_by_words: 0, display_post_excerpt: value }); |
| 383 | else |
| 384 | setAttributes({ display_post_excerpt: value, excerpt_length: 55 }); |
| 385 | } |
| 386 | |
| 387 | function onExcerptLengthChange(value) |
| 388 | { |
| 389 | let length = Number.isInteger(Number(value)) && Number(value) >= 0 ? value : 0; |
| 390 | setAttributes({ excerpt_length: Number(length) }); |
| 391 | } |
| 392 | |
| 393 | function onDisplayThumbnailChange(value) { |
| 394 | if ( false == value ) |
| 395 | setAttributes({ thumbnail_width: 0, thumbnail_height: 0, display_post_thumbnail: value }); |
| 396 | else |
| 397 | setAttributes({ thumbnail_width: 75, thumbnail_height: 75, display_post_thumbnail: value }); |
| 398 | } |
| 399 | |
| 400 | function onThumbnailDimChange(dim, value) |
| 401 | { |
| 402 | let width = Number.isInteger(Number(value)) && Number(value) >= 0 ? value : 0; |
| 403 | setAttributes(( 'width' == dim ? { thumbnail_width: Number(width) } : { thumbnail_height: Number(width) } )); |
| 404 | } |
| 405 | |
| 406 | function onThumbnailBuildChange(value) |
| 407 | { |
| 408 | if ( 'predefined' == value ) { |
| 409 | let fallback = 0; |
| 410 | |
| 411 | setAttributes({ |
| 412 | thumbnail_width: _self.state.imgSizes[sizes[fallback].value].width, |
| 413 | thumbnail_height: _self.state.imgSizes[sizes[fallback].value].height, |
| 414 | thumbnail_size: sizes[fallback].value |
| 415 | }); |
| 416 | } |
| 417 | setAttributes({ thumbnail_build: value }); |
| 418 | } |
| 419 | |
| 420 | function onThumbnailSizeChange(value) { |
| 421 | setAttributes({ |
| 422 | thumbnail_width: _self.state.imgSizes[value].width, |
| 423 | thumbnail_height: _self.state.imgSizes[value].height, |
| 424 | thumbnail_size: value |
| 425 | }); |
| 426 | } |
| 427 | |
| 428 | let sizes = []; |
| 429 | |
| 430 | if ( this.state.imgSizes ) { |
| 431 | for( const size in this.state.imgSizes ) { |
| 432 | sizes.push( |
| 433 | { |
| 434 | label: size, |
| 435 | value: size |
| 436 | }, |
| 437 | ); |
| 438 | } |
| 439 | } |
| 440 | |
| 441 | return <Fragment> |
| 442 | <p className='not-a-legend'><strong>{__('Posts settings', 'wordpress-popular-posts')}</strong></p> |
| 443 | <CheckboxControl |
| 444 | label={__('Shorten title', 'wordpress-popular-posts')} |
| 445 | checked={attributes.shorten_title} |
| 446 | onChange={onShortenTitleChange} |
| 447 | /> |
| 448 | { attributes.shorten_title && |
| 449 | <div className='option-subset'> |
| 450 | <TextControl |
| 451 | label={__('Shorten title to', 'wordpress-popular-posts')} |
| 452 | value={attributes.title_length} |
| 453 | onChange={onTitleLengthChange} |
| 454 | /> |
| 455 | <SelectControl |
| 456 | value={attributes.title_by_words} |
| 457 | options={[ |
| 458 | { label: __('characters', 'wordpress-popular-posts'), value: 0 }, |
| 459 | { label: __('words', 'wordpress-popular-posts'), value: 1 }, |
| 460 | ]} |
| 461 | onChange={(value) => setAttributes({ title_by_words: Number(value) })} |
| 462 | /> |
| 463 | </div> |
| 464 | } |
| 465 | <CheckboxControl |
| 466 | label={__('Display post excerpt', 'wordpress-popular-posts')} |
| 467 | checked={attributes.display_post_excerpt} |
| 468 | onChange={onDisplayExcerptChange} |
| 469 | /> |
| 470 | { attributes.display_post_excerpt && |
| 471 | <div className='option-subset'> |
| 472 | <CheckboxControl |
| 473 | label={__('Keep text format and links', 'wordpress-popular-posts')} |
| 474 | checked={attributes.excerpt_format} |
| 475 | onChange={(value) => setAttributes({ excerpt_format: value })} |
| 476 | /> |
| 477 | <TextControl |
| 478 | label={__('Excerpt length', 'wordpress-popular-posts')} |
| 479 | value={attributes.excerpt_length} |
| 480 | onChange={onExcerptLengthChange} |
| 481 | /> |
| 482 | <SelectControl |
| 483 | value={attributes.excerpt_by_words} |
| 484 | options={[ |
| 485 | { label: __('characters', 'wordpress-popular-posts'), value: 0 }, |
| 486 | { label: __('words', 'wordpress-popular-posts'), value: 1 }, |
| 487 | ]} |
| 488 | onChange={(value) => setAttributes({ excerpt_by_words: Number(value) })} |
| 489 | /> |
| 490 | </div> |
| 491 | } |
| 492 | <CheckboxControl |
| 493 | label={__('Display post thumbnail', 'wordpress-popular-posts')} |
| 494 | checked={attributes.display_post_thumbnail} |
| 495 | onChange={onDisplayThumbnailChange} |
| 496 | /> |
| 497 | { attributes.display_post_thumbnail && |
| 498 | <div className='option-subset'> |
| 499 | <SelectControl |
| 500 | value={attributes.thumbnail_build} |
| 501 | options={[ |
| 502 | { label: __('Set size manually', 'wordpress-popular-posts'), value: 'manual' }, |
| 503 | { label: __('Use predefined size', 'wordpress-popular-posts'), value: 'predefined' }, |
| 504 | ]} |
| 505 | onChange={onThumbnailBuildChange} |
| 506 | /> |
| 507 | { 'manual' == attributes.thumbnail_build && |
| 508 | <Fragment> |
| 509 | <TextControl |
| 510 | label={__('Thumbnail width', 'wordpress-popular-posts')} |
| 511 | help={__('Size in px units (pixels)', 'wordpress-popular-posts')} |
| 512 | value={attributes.thumbnail_width} |
| 513 | onChange={(value) => onThumbnailDimChange('width', value)} |
| 514 | /> |
| 515 | <TextControl |
| 516 | label={__('Thumbnail height', 'wordpress-popular-posts')} |
| 517 | help={__('Size in px units (pixels)', 'wordpress-popular-posts')} |
| 518 | value={attributes.thumbnail_height} |
| 519 | onChange={(value) => onThumbnailDimChange('height', value)} |
| 520 | /> |
| 521 | </Fragment> |
| 522 | } |
| 523 | { 'predefined' == attributes.thumbnail_build && |
| 524 | <Fragment> |
| 525 | <SelectControl |
| 526 | value={attributes.thumbnail_size} |
| 527 | options={sizes} |
| 528 | onChange={onThumbnailSizeChange} |
| 529 | /> |
| 530 | </Fragment> |
| 531 | } |
| 532 | </div> |
| 533 | } |
| 534 | </Fragment>; |
| 535 | } |
| 536 | |
| 537 | getStatsTagFields() |
| 538 | { |
| 539 | const { attributes, setAttributes } = this.props; |
| 540 | |
| 541 | let taxonomies = []; |
| 542 | |
| 543 | if ( this.state.taxonomies ) { |
| 544 | for( const tax in this.state.taxonomies ) { |
| 545 | taxonomies.push( |
| 546 | { |
| 547 | label: this.state.taxonomies[tax].labels.singular_name + ' (' + this.state.taxonomies[tax].name + ')', |
| 548 | value: this.state.taxonomies[tax].name |
| 549 | }, |
| 550 | ); |
| 551 | } |
| 552 | } |
| 553 | |
| 554 | return <Fragment> |
| 555 | <p className='not-a-legend'><strong>{__('Stats Tag settings', 'wordpress-popular-posts')}</strong></p> |
| 556 | <CheckboxControl |
| 557 | label={__('Display comments count', 'wordpress-popular-posts')} |
| 558 | checked={attributes.stats_comments} |
| 559 | onChange={(value) => setAttributes({ stats_comments: value })} |
| 560 | /> |
| 561 | <CheckboxControl |
| 562 | label={__('Display views', 'wordpress-popular-posts')} |
| 563 | checked={attributes.stats_views} |
| 564 | onChange={(value) => setAttributes({ stats_views: value })} |
| 565 | /> |
| 566 | <CheckboxControl |
| 567 | label={__('Display author', 'wordpress-popular-posts')} |
| 568 | checked={attributes.stats_author} |
| 569 | onChange={(value) => setAttributes({ stats_author: value })} |
| 570 | /> |
| 571 | <CheckboxControl |
| 572 | label={__('Display date', 'wordpress-popular-posts')} |
| 573 | checked={attributes.stats_date} |
| 574 | onChange={(value) => setAttributes({ stats_date: value })} |
| 575 | /> |
| 576 | { attributes.stats_date && |
| 577 | <div className='option-subset'> |
| 578 | <SelectControl |
| 579 | label={__('Date Format', 'wordpress-popular-posts')} |
| 580 | value={attributes.stats_date_format} |
| 581 | options={[ |
| 582 | { label: __('Relative', 'wordpress-popular-posts'), value: 'relative' }, |
| 583 | { label: __('Month Day, Year', 'wordpress-popular-posts'), value: 'F j, Y' }, |
| 584 | { label: __('yyyy/mm/dd', 'wordpress-popular-posts'), value: 'Y/m/d' }, |
| 585 | { label: __('mm/dd/yyyy', 'wordpress-popular-posts'), value: 'm/d/Y' }, |
| 586 | { label: __('dd/mm/yyyy', 'wordpress-popular-posts'), value: 'd/m/Y' }, |
| 587 | ]} |
| 588 | onChange={(value) => setAttributes({ stats_date_format: value })} |
| 589 | /> |
| 590 | </div> |
| 591 | } |
| 592 | <CheckboxControl |
| 593 | label={__('Display taxonomy', 'wordpress-popular-posts')} |
| 594 | checked={attributes.stats_taxonomy} |
| 595 | onChange={(value) => setAttributes({ stats_taxonomy: value })} |
| 596 | /> |
| 597 | { attributes.stats_taxonomy && |
| 598 | <div className='option-subset'> |
| 599 | <SelectControl |
| 600 | label={__('Taxonomy', 'wordpress-popular-posts')} |
| 601 | value={attributes.taxonomy} |
| 602 | options={taxonomies} |
| 603 | onChange={(value) => setAttributes({ taxonomy: value })} |
| 604 | /> |
| 605 | </div> |
| 606 | } |
| 607 | </Fragment>; |
| 608 | } |
| 609 | |
| 610 | getHTMLMarkupFields() |
| 611 | { |
| 612 | const { attributes, setAttributes } = this.props; |
| 613 | const _self = this; |
| 614 | |
| 615 | function onThemeChange(value) |
| 616 | { |
| 617 | if ( 'undefined' != typeof _self.state.themes[value] ) { |
| 618 | let config = _self.state.themes[value].json.config; |
| 619 | |
| 620 | setAttributes({ |
| 621 | shorten_title: config.shorten_title.active, |
| 622 | title_length: config.shorten_title.title_length, |
| 623 | title_by_words: config.shorten_title.words ? 1 : 0, |
| 624 | display_post_excerpt: config['post-excerpt'].active, |
| 625 | excerpt_format: config['post-excerpt'].format, |
| 626 | excerpt_length: config['post-excerpt'].length, |
| 627 | excerpt_by_words: config['post-excerpt'].words ? 1 : 0, |
| 628 | display_post_thumbnail: config.thumbnail.active, |
| 629 | thumbnail_build: config.thumbnail.build, |
| 630 | thumbnail_width: config.thumbnail.width, |
| 631 | thumbnail_height: config.thumbnail.height, |
| 632 | stats_comments: config.stats_tag.comment_count, |
| 633 | stats_views: config.stats_tag.views, |
| 634 | stats_author: config.stats_tag.author, |
| 635 | stats_date: config.stats_tag.date.active, |
| 636 | stats_date_format: config.stats_tag.date.format, |
| 637 | stats_taxonomy: config.stats_tag.taxonomy.active, |
| 638 | taxonomy: config.stats_tag.taxonomy.name, |
| 639 | custom_html: true, |
| 640 | wpp_start: config.markup['wpp-start'], |
| 641 | wpp_end: config.markup['wpp-end'], |
| 642 | post_html: config.markup['post-html'], |
| 643 | theme: value |
| 644 | }); |
| 645 | } else { |
| 646 | setAttributes({ theme: value }); |
| 647 | } |
| 648 | } |
| 649 | |
| 650 | let themes = [ |
| 651 | { |
| 652 | label: __('None', 'wordpress-popular-posts'), |
| 653 | value: '' |
| 654 | }, |
| 655 | ]; |
| 656 | |
| 657 | if ( this.state.themes ) { |
| 658 | for( const theme in this.state.themes ) { |
| 659 | themes.push( |
| 660 | { |
| 661 | label: this.state.themes[theme].json.name, |
| 662 | value: theme |
| 663 | }, |
| 664 | ); |
| 665 | } |
| 666 | } |
| 667 | |
| 668 | return <Fragment> |
| 669 | <p className='not-a-legend'><strong>{__('HTML Markup settings', 'wordpress-popular-posts')}</strong></p> |
| 670 | <CheckboxControl |
| 671 | label={__('Use custom HTML Markup', 'wordpress-popular-posts')} |
| 672 | checked={attributes.custom_html} |
| 673 | onChange={(value) => setAttributes({ custom_html: value })} |
| 674 | /> |
| 675 | { attributes.custom_html && |
| 676 | <div className='option-subset'> |
| 677 | <TextareaControl |
| 678 | rows="1" |
| 679 | label={__('Before title', 'wordpress-popular-posts')} |
| 680 | value={attributes.header_start} |
| 681 | onChange={(value) => setAttributes({ header_start: value })} |
| 682 | /> |
| 683 | <TextareaControl |
| 684 | rows="1" |
| 685 | label={__('After title', 'wordpress-popular-posts')} |
| 686 | value={attributes.header_end} |
| 687 | onChange={(value) => setAttributes({ header_end: value })} |
| 688 | /> |
| 689 | <TextareaControl |
| 690 | rows="1" |
| 691 | label={__('Before popular posts', 'wordpress-popular-posts')} |
| 692 | value={attributes.wpp_start} |
| 693 | onChange={(value) => setAttributes({ wpp_start: value })} |
| 694 | /> |
| 695 | <TextareaControl |
| 696 | rows="1" |
| 697 | label={__('After popular posts', 'wordpress-popular-posts')} |
| 698 | value={attributes.wpp_end} |
| 699 | onChange={(value) => setAttributes({ wpp_end: value })} |
| 700 | /> |
| 701 | <TextareaControl |
| 702 | label={__('Post HTML markup', 'wordpress-popular-posts')} |
| 703 | value={attributes.post_html} |
| 704 | onChange={(value) => setAttributes({ post_html: value })} |
| 705 | /> |
| 706 | </div> |
| 707 | } |
| 708 | <SelectControl |
| 709 | label={__('Theme', 'wordpress-popular-posts')} |
| 710 | value={attributes.theme} |
| 711 | options={themes} |
| 712 | onChange={onThemeChange} |
| 713 | /> |
| 714 | </Fragment>; |
| 715 | } |
| 716 | |
| 717 | render() |
| 718 | { |
| 719 | if ( ! this.state.taxonomies || ! this.state.themes || ! this.state.imgSizes ) |
| 720 | return <Spinner />; |
| 721 | |
| 722 | const { isSelected, className, attributes } = this.props; |
| 723 | |
| 724 | let classes = className; |
| 725 | classes += this.state.editMode ? ' in-edit-mode' : ' in-preview-mode'; |
| 726 | classes += isSelected ? ' is-selected' : ''; |
| 727 | |
| 728 | return ([ |
| 729 | this.getBlockControls(), |
| 730 | <div className={classes}> |
| 731 | { this.state.editMode && |
| 732 | <Fragment> |
| 733 | {this.getMainFields()} |
| 734 | {this.getFiltersFields()} |
| 735 | {this.getPostSettingsFields()} |
| 736 | {this.getStatsTagFields()} |
| 737 | {this.getHTMLMarkupFields()} |
| 738 | </Fragment> |
| 739 | } |
| 740 | { ! this.state.editMode && |
| 741 | <Disabled> |
| 742 | <ServerSideRender |
| 743 | block={this.props.name} |
| 744 | className={className} |
| 745 | attributes={attributes} |
| 746 | urlQueryArgs={{isSelected: isSelected}} |
| 747 | /> |
| 748 | </Disabled> |
| 749 | } |
| 750 | </div> |
| 751 | ]); |
| 752 | } |
| 753 | } |
| 754 |