edit
4 weeks ago
Widget.php
4 weeks ago
edit.js
1 year ago
editor.css
4 years ago
widget.js
4 weeks ago
edit.js
778 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 { CheckboxControl, Disabled, SelectControl, Spinner, TextareaControl, TextControl, ToolbarGroup, ToolbarButton } = 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 | <ToolbarGroup> |
| 124 | <ToolbarButton |
| 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 | </ToolbarGroup> |
| 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 | setAttributes({ limit: parseInt(value, 10) }); |
| 147 | } |
| 148 | |
| 149 | function onOrderByChange(value) |
| 150 | { |
| 151 | setAttributes({ order_by: value }); |
| 152 | } |
| 153 | |
| 154 | function onTimeRangeChange(value) |
| 155 | { |
| 156 | setAttributes({ range: value }); |
| 157 | } |
| 158 | |
| 159 | function onTimeQuantityChange(value) { |
| 160 | setAttributes({ time_quantity: parseInt(value, 10) }); |
| 161 | } |
| 162 | |
| 163 | function onTimeUnitChange(value) { |
| 164 | setAttributes({ time_unit: value }); |
| 165 | } |
| 166 | |
| 167 | function onFreshnessChange(value) |
| 168 | { |
| 169 | setAttributes({ freshness: value }); |
| 170 | } |
| 171 | |
| 172 | return <Fragment> |
| 173 | <TextControl |
| 174 | label={__('Title', 'wordpress-popular-posts')} |
| 175 | value={attributes.title} |
| 176 | onChange={onTitleChange} |
| 177 | /> |
| 178 | <TextControl |
| 179 | label={__('Limit', 'wordpress-popular-posts')} |
| 180 | type='number' |
| 181 | value={attributes.limit} |
| 182 | min='1' |
| 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: __('Avg. daily views', 'wordpress-popular-posts'), value: 'avg'}, |
| 191 | {label: __('Comments', 'wordpress-popular-posts'), value: 'comments'} |
| 192 | ]} |
| 193 | onChange={onOrderByChange} |
| 194 | /> |
| 195 | <SelectControl |
| 196 | label={__('Time Range', 'wordpress-popular-posts')} |
| 197 | value={attributes.range} |
| 198 | options={[ |
| 199 | {label: __('Last 24 Hours', 'wordpress-popular-posts'), value: 'last24hours'}, |
| 200 | {label: __('Last 7 days', 'wordpress-popular-posts'), value: 'last7days'}, |
| 201 | {label: __('Last 30 days', 'wordpress-popular-posts'), value: 'last30days'}, |
| 202 | {label: __('All-time', 'wordpress-popular-posts'), value: 'all'}, |
| 203 | {label: __('Custom', 'wordpress-popular-posts'), value: 'custom'}, |
| 204 | ]} |
| 205 | onChange={onTimeRangeChange} |
| 206 | /> |
| 207 | { 'custom' == attributes.range && |
| 208 | <div className='option-subset'> |
| 209 | <TextControl |
| 210 | label={__('Time Quantity', 'wordpress-popular-posts')} |
| 211 | type='number' |
| 212 | value={attributes.time_quantity} |
| 213 | min='1' |
| 214 | onChange={onTimeQuantityChange} |
| 215 | /> |
| 216 | <SelectControl |
| 217 | label={__('Time Unit', 'wordpress-popular-posts')} |
| 218 | value={attributes.time_unit} |
| 219 | options={[ |
| 220 | {label: __('Minute(s)', 'wordpress-popular-posts'), value: 'minute'}, |
| 221 | {label: __('Hour(s)', 'wordpress-popular-posts'), value: 'hour'}, |
| 222 | {label: __('Day(s)', 'wordpress-popular-posts'), value: 'day'} |
| 223 | ]} |
| 224 | onChange={onTimeUnitChange} |
| 225 | /> |
| 226 | </div> |
| 227 | } |
| 228 | <CheckboxControl |
| 229 | label={__('Display only posts published within the selected Time Range', 'wordpress-popular-posts')} |
| 230 | checked={attributes.freshness} |
| 231 | onChange={onFreshnessChange} |
| 232 | /> |
| 233 | </Fragment>; |
| 234 | } |
| 235 | |
| 236 | getFiltersFields() |
| 237 | { |
| 238 | const { attributes, setAttributes } = this.props; |
| 239 | const _self = this; |
| 240 | |
| 241 | function onPostTypeChange(value) |
| 242 | { |
| 243 | let new_value = value.replace(/[^a-z0-9-_\,]+/gi, ''); |
| 244 | setAttributes({ post_type: new_value }); |
| 245 | } |
| 246 | |
| 247 | function onPostIDExcludeChange(value) |
| 248 | { |
| 249 | let new_value = value.replace(/[^0-9\,]/g, ''); |
| 250 | setAttributes({ pid: new_value }); |
| 251 | } |
| 252 | |
| 253 | function onAuthorChange(value) |
| 254 | { |
| 255 | let new_value = value.replace(/[^0-9\,]/g, ''); |
| 256 | setAttributes({ author: new_value }); |
| 257 | } |
| 258 | |
| 259 | function onTaxChange(taxonomy_name, terms) |
| 260 | { |
| 261 | let taxonomies = _self.state.taxonomies; |
| 262 | |
| 263 | terms = terms.replace(/[^0-9-\,]/g, ''); |
| 264 | |
| 265 | if ( taxonomies && 'undefined' != typeof taxonomies[taxonomy_name] ) { |
| 266 | taxonomies[taxonomy_name]._terms = terms; |
| 267 | _self.setState({ taxonomies: taxonomies }); |
| 268 | } |
| 269 | } |
| 270 | |
| 271 | function onTaxBlur(taxonomy_name) |
| 272 | { |
| 273 | let taxonomies = _self.state.taxonomies; |
| 274 | |
| 275 | if ( taxonomies && 'undefined' != typeof taxonomies[taxonomy_name] ) { |
| 276 | let terms_arr = taxonomies[taxonomy_name]._terms.split(','); |
| 277 | |
| 278 | // Remove invalid values |
| 279 | if ( terms_arr.length ) |
| 280 | terms_arr = terms_arr.map((term) => term.trim()) |
| 281 | .filter((term) => '' != term && '-' != term); |
| 282 | |
| 283 | // Remove duplicates |
| 284 | if ( terms_arr.length ) |
| 285 | terms_arr = Array.from(new Set(terms_arr)); |
| 286 | |
| 287 | taxonomies[taxonomy_name]._terms = terms_arr.join(','); |
| 288 | |
| 289 | _self.setState({ taxonomies }); |
| 290 | |
| 291 | let tax = '', |
| 292 | term_id = ''; |
| 293 | |
| 294 | for ( let key in _self.state.taxonomies ) { |
| 295 | if ( _self.state.taxonomies.hasOwnProperty(key) ) { |
| 296 | |
| 297 | if ( ! _self.state.taxonomies[key]._terms.length ) |
| 298 | continue; |
| 299 | |
| 300 | tax += key + ';'; |
| 301 | term_id += _self.state.taxonomies[key]._terms + ';'; |
| 302 | } |
| 303 | } |
| 304 | |
| 305 | // Remove trailing semicolon |
| 306 | if ( tax && term_id ) { |
| 307 | tax = tax.replace(new RegExp(';$'), ''); |
| 308 | term_id = term_id.replace(new RegExp(';$'), ''); |
| 309 | } |
| 310 | |
| 311 | setAttributes({ tax: tax, term_id: term_id }); |
| 312 | } |
| 313 | } |
| 314 | |
| 315 | let taxonomies = []; |
| 316 | |
| 317 | if ( this.state.taxonomies ) { |
| 318 | for( const tax in this.state.taxonomies ) { |
| 319 | taxonomies.push( |
| 320 | { |
| 321 | name: this.state.taxonomies[tax].name, |
| 322 | label: this.state.taxonomies[tax].labels.singular_name + ' (' + this.state.taxonomies[tax].name + ')', |
| 323 | terms: this.state.taxonomies[tax]._terms |
| 324 | } |
| 325 | ); |
| 326 | } |
| 327 | } |
| 328 | |
| 329 | return <Fragment> |
| 330 | <p className='not-a-legend'><strong>{__('Filters', 'wordpress-popular-posts')}</strong></p> |
| 331 | <TextControl |
| 332 | label={__('Post type(s)', 'wordpress-popular-posts')} |
| 333 | help={__('Post types must be comma separated.', 'wordpress-popular-posts')} |
| 334 | value={attributes.post_type} |
| 335 | onChange={onPostTypeChange} |
| 336 | /> |
| 337 | <TextControl |
| 338 | label={__('Post ID(s) to exclude', 'wordpress-popular-posts')} |
| 339 | help={__('IDs must be comma separated.', 'wordpress-popular-posts')} |
| 340 | value={attributes.pid} |
| 341 | onChange={onPostIDExcludeChange} |
| 342 | /> |
| 343 | <TextControl |
| 344 | label={__('Author ID(s)', 'wordpress-popular-posts')} |
| 345 | help={__('IDs must be comma separated.', 'wordpress-popular-posts')} |
| 346 | value={attributes.author} |
| 347 | onChange={onAuthorChange} |
| 348 | /> |
| 349 | { taxonomies && taxonomies.filter((tax) => 'post_format' != tax.name).map((tax) => |
| 350 | { |
| 351 | return ( |
| 352 | <TextControl |
| 353 | label={tax.label} |
| 354 | help={__('Term IDs must be comma separated, prefix a minus sign to exclude.', 'wordpress-popular-posts')} |
| 355 | value={tax.terms} |
| 356 | onChange={(terms) => onTaxChange(tax.name, terms)} |
| 357 | onBlur={() => onTaxBlur(tax.name)} |
| 358 | /> |
| 359 | ); |
| 360 | } |
| 361 | )} |
| 362 | </Fragment>; |
| 363 | } |
| 364 | |
| 365 | getPostSettingsFields() |
| 366 | { |
| 367 | const { attributes, setAttributes } = this.props; |
| 368 | const _self = this; |
| 369 | |
| 370 | function onShortenTitleChange(value) { |
| 371 | if ( false == value ) |
| 372 | setAttributes({ title_length: 0, title_by_words: 0, shorten_title: value }); |
| 373 | else |
| 374 | setAttributes({ shorten_title: value, title_length: 25 }); |
| 375 | } |
| 376 | |
| 377 | function onTitleLengthChange(value) |
| 378 | { |
| 379 | setAttributes({ title_length: parseInt(value, 10) }); |
| 380 | } |
| 381 | |
| 382 | function onDisplayExcerptChange(value) { |
| 383 | if ( false == value ) |
| 384 | setAttributes({ excerpt_length: 0, excerpt_by_words: 0, display_post_excerpt: value, excerpt_format: false }); |
| 385 | else |
| 386 | setAttributes({ display_post_excerpt: value, excerpt_length: 55 }); |
| 387 | } |
| 388 | |
| 389 | function onExcerptLengthChange(value) |
| 390 | { |
| 391 | setAttributes({ excerpt_length: parseInt(value, 10) }); |
| 392 | } |
| 393 | |
| 394 | function onDisplayThumbnailChange(value) { |
| 395 | if ( false == value ) |
| 396 | setAttributes({ thumbnail_width: 0, thumbnail_height: 0, display_post_thumbnail: value, thumbnail_build: 'manual' }); |
| 397 | else |
| 398 | setAttributes({ thumbnail_width: 75, thumbnail_height: 75, display_post_thumbnail: value }); |
| 399 | } |
| 400 | |
| 401 | function onThumbnailDimChange(dim, value) |
| 402 | { |
| 403 | value = parseInt(value, 10); |
| 404 | setAttributes(( 'width' == dim ? { thumbnail_width: value } : { thumbnail_height: value } )); |
| 405 | } |
| 406 | |
| 407 | function onThumbnailBuildChange(value) |
| 408 | { |
| 409 | if ( 'predefined' == value ) { |
| 410 | let fallback = 0; |
| 411 | |
| 412 | setAttributes({ |
| 413 | thumbnail_width: _self.state.imgSizes[sizes[fallback].value].width, |
| 414 | thumbnail_height: _self.state.imgSizes[sizes[fallback].value].height, |
| 415 | thumbnail_size: sizes[fallback].value |
| 416 | }); |
| 417 | } else { |
| 418 | setAttributes({ |
| 419 | thumbnail_width: 75, |
| 420 | thumbnail_height: 75, |
| 421 | thumbnail_size: '' |
| 422 | }); |
| 423 | } |
| 424 | setAttributes({ thumbnail_build: value }); |
| 425 | } |
| 426 | |
| 427 | function onThumbnailSizeChange(value) { |
| 428 | setAttributes({ |
| 429 | thumbnail_width: _self.state.imgSizes[value].width, |
| 430 | thumbnail_height: _self.state.imgSizes[value].height, |
| 431 | thumbnail_size: value |
| 432 | }); |
| 433 | } |
| 434 | |
| 435 | let sizes = []; |
| 436 | |
| 437 | if ( this.state.imgSizes ) { |
| 438 | for( const size in this.state.imgSizes ) { |
| 439 | sizes.push( |
| 440 | { |
| 441 | label: size, |
| 442 | value: size |
| 443 | }, |
| 444 | ); |
| 445 | } |
| 446 | } |
| 447 | |
| 448 | return <Fragment> |
| 449 | <p className='not-a-legend'><strong>{__('Posts settings', 'wordpress-popular-posts')}</strong></p> |
| 450 | <CheckboxControl |
| 451 | label={__('Shorten title', 'wordpress-popular-posts')} |
| 452 | checked={attributes.shorten_title} |
| 453 | onChange={onShortenTitleChange} |
| 454 | /> |
| 455 | { attributes.shorten_title && |
| 456 | <div className='option-subset'> |
| 457 | <TextControl |
| 458 | label={__('Shorten title to', 'wordpress-popular-posts')} |
| 459 | type='number' |
| 460 | value={attributes.title_length} |
| 461 | min='1' |
| 462 | onChange={onTitleLengthChange} |
| 463 | /> |
| 464 | <SelectControl |
| 465 | value={attributes.title_by_words} |
| 466 | options={[ |
| 467 | { label: __('characters', 'wordpress-popular-posts'), value: 0 }, |
| 468 | { label: __('words', 'wordpress-popular-posts'), value: 1 }, |
| 469 | ]} |
| 470 | onChange={(value) => setAttributes({ title_by_words: Number(value) })} |
| 471 | /> |
| 472 | </div> |
| 473 | } |
| 474 | <CheckboxControl |
| 475 | label={__('Display post excerpt', 'wordpress-popular-posts')} |
| 476 | checked={attributes.display_post_excerpt} |
| 477 | onChange={onDisplayExcerptChange} |
| 478 | /> |
| 479 | { attributes.display_post_excerpt && |
| 480 | <div className='option-subset'> |
| 481 | <CheckboxControl |
| 482 | label={__('Keep text format and links', 'wordpress-popular-posts')} |
| 483 | checked={attributes.excerpt_format} |
| 484 | onChange={(value) => setAttributes({ excerpt_format: value })} |
| 485 | /> |
| 486 | <TextControl |
| 487 | label={__('Excerpt length', 'wordpress-popular-posts')} |
| 488 | type='number' |
| 489 | value={attributes.excerpt_length} |
| 490 | min='1' |
| 491 | onChange={onExcerptLengthChange} |
| 492 | /> |
| 493 | <SelectControl |
| 494 | value={attributes.excerpt_by_words} |
| 495 | options={[ |
| 496 | { label: __('characters', 'wordpress-popular-posts'), value: 0 }, |
| 497 | { label: __('words', 'wordpress-popular-posts'), value: 1 }, |
| 498 | ]} |
| 499 | onChange={(value) => setAttributes({ excerpt_by_words: Number(value) })} |
| 500 | /> |
| 501 | </div> |
| 502 | } |
| 503 | <CheckboxControl |
| 504 | label={__('Display post thumbnail', 'wordpress-popular-posts')} |
| 505 | checked={attributes.display_post_thumbnail} |
| 506 | onChange={onDisplayThumbnailChange} |
| 507 | /> |
| 508 | { attributes.display_post_thumbnail && |
| 509 | <div className='option-subset'> |
| 510 | <SelectControl |
| 511 | value={attributes.thumbnail_build} |
| 512 | options={[ |
| 513 | { label: __('Set size manually', 'wordpress-popular-posts'), value: 'manual' }, |
| 514 | { label: __('Use predefined size', 'wordpress-popular-posts'), value: 'predefined' }, |
| 515 | ]} |
| 516 | onChange={onThumbnailBuildChange} |
| 517 | /> |
| 518 | { 'manual' == attributes.thumbnail_build && |
| 519 | <Fragment> |
| 520 | <TextControl |
| 521 | label={__('Thumbnail width', 'wordpress-popular-posts')} |
| 522 | type='number' |
| 523 | help={__('Size in px units (pixels)', 'wordpress-popular-posts')} |
| 524 | value={attributes.thumbnail_width} |
| 525 | min='1' |
| 526 | onChange={(value) => onThumbnailDimChange('width', value)} |
| 527 | /> |
| 528 | <TextControl |
| 529 | label={__('Thumbnail height', 'wordpress-popular-posts')} |
| 530 | type='number' |
| 531 | help={__('Size in px units (pixels)', 'wordpress-popular-posts')} |
| 532 | value={attributes.thumbnail_height} |
| 533 | min='1' |
| 534 | onChange={(value) => onThumbnailDimChange('height', value)} |
| 535 | /> |
| 536 | </Fragment> |
| 537 | } |
| 538 | { 'predefined' == attributes.thumbnail_build && |
| 539 | <Fragment> |
| 540 | <SelectControl |
| 541 | value={attributes.thumbnail_size} |
| 542 | options={sizes} |
| 543 | onChange={onThumbnailSizeChange} |
| 544 | /> |
| 545 | </Fragment> |
| 546 | } |
| 547 | </div> |
| 548 | } |
| 549 | { _wordpress_popular_posts.can_show_rating && |
| 550 | <CheckboxControl |
| 551 | label={__('Display post rating', 'wordpress-popular-posts')} |
| 552 | checked={attributes.rating} |
| 553 | onChange={(value) => setAttributes({ rating: value })} |
| 554 | /> |
| 555 | } |
| 556 | </Fragment>; |
| 557 | } |
| 558 | |
| 559 | getStatsTagFields() |
| 560 | { |
| 561 | const { attributes, setAttributes } = this.props; |
| 562 | |
| 563 | let taxonomies = []; |
| 564 | |
| 565 | if ( this.state.taxonomies ) { |
| 566 | for( const tax in this.state.taxonomies ) { |
| 567 | taxonomies.push( |
| 568 | { |
| 569 | label: this.state.taxonomies[tax].labels.singular_name + ' (' + this.state.taxonomies[tax].name + ')', |
| 570 | value: this.state.taxonomies[tax].name |
| 571 | }, |
| 572 | ); |
| 573 | } |
| 574 | } |
| 575 | |
| 576 | return <Fragment> |
| 577 | <p className='not-a-legend'><strong>{__('Stats Tag settings', 'wordpress-popular-posts')}</strong></p> |
| 578 | <CheckboxControl |
| 579 | label={__('Display comments count', 'wordpress-popular-posts')} |
| 580 | checked={attributes.stats_comments} |
| 581 | onChange={(value) => setAttributes({ stats_comments: value })} |
| 582 | /> |
| 583 | <CheckboxControl |
| 584 | label={__('Display views', 'wordpress-popular-posts')} |
| 585 | checked={attributes.stats_views} |
| 586 | onChange={(value) => setAttributes({ stats_views: value })} |
| 587 | /> |
| 588 | <CheckboxControl |
| 589 | label={__('Display author', 'wordpress-popular-posts')} |
| 590 | checked={attributes.stats_author} |
| 591 | onChange={(value) => setAttributes({ stats_author: value })} |
| 592 | /> |
| 593 | <CheckboxControl |
| 594 | label={__('Display date', 'wordpress-popular-posts')} |
| 595 | checked={attributes.stats_date} |
| 596 | onChange={(value) => setAttributes({ stats_date: value })} |
| 597 | /> |
| 598 | { attributes.stats_date && |
| 599 | <div className='option-subset'> |
| 600 | <SelectControl |
| 601 | label={__('Date Format', 'wordpress-popular-posts')} |
| 602 | value={attributes.stats_date_format} |
| 603 | options={[ |
| 604 | { label: __('Relative', 'wordpress-popular-posts'), value: 'relative' }, |
| 605 | { label: __('Month Day, Year', 'wordpress-popular-posts'), value: 'F j, Y' }, |
| 606 | { label: __('yyyy/mm/dd', 'wordpress-popular-posts'), value: 'Y/m/d' }, |
| 607 | { label: __('mm/dd/yyyy', 'wordpress-popular-posts'), value: 'm/d/Y' }, |
| 608 | { label: __('dd/mm/yyyy', 'wordpress-popular-posts'), value: 'd/m/Y' }, |
| 609 | { label: __('WordPress Date Format', 'wordpress-popular-posts'), value: 'wp_date_format' }, |
| 610 | ]} |
| 611 | onChange={(value) => setAttributes({ stats_date_format: value })} |
| 612 | /> |
| 613 | </div> |
| 614 | } |
| 615 | <CheckboxControl |
| 616 | label={__('Display taxonomy', 'wordpress-popular-posts')} |
| 617 | checked={attributes.stats_taxonomy} |
| 618 | onChange={(value) => setAttributes({ stats_taxonomy: value })} |
| 619 | /> |
| 620 | { attributes.stats_taxonomy && |
| 621 | <div className='option-subset'> |
| 622 | <SelectControl |
| 623 | label={__('Taxonomy', 'wordpress-popular-posts')} |
| 624 | value={attributes.taxonomy} |
| 625 | options={taxonomies} |
| 626 | onChange={(value) => setAttributes({ taxonomy: value })} |
| 627 | /> |
| 628 | </div> |
| 629 | } |
| 630 | </Fragment>; |
| 631 | } |
| 632 | |
| 633 | getHTMLMarkupFields() |
| 634 | { |
| 635 | const { attributes, setAttributes } = this.props; |
| 636 | const _self = this; |
| 637 | |
| 638 | function onThemeChange(value) |
| 639 | { |
| 640 | if ( 'undefined' != typeof _self.state.themes[value] ) { |
| 641 | let config = _self.state.themes[value].json.config; |
| 642 | |
| 643 | setAttributes({ |
| 644 | shorten_title: config.shorten_title.active, |
| 645 | title_length: config.shorten_title.length, |
| 646 | title_by_words: config.shorten_title.words ? 1 : 0, |
| 647 | display_post_excerpt: config['post-excerpt'].active, |
| 648 | excerpt_format: config['post-excerpt'].format, |
| 649 | excerpt_length: config['post-excerpt'].length, |
| 650 | excerpt_by_words: config['post-excerpt'].words ? 1 : 0, |
| 651 | display_post_thumbnail: config.thumbnail.active, |
| 652 | thumbnail_build: config.thumbnail.build, |
| 653 | thumbnail_width: config.thumbnail.width, |
| 654 | thumbnail_height: config.thumbnail.height, |
| 655 | stats_comments: config.stats_tag.comment_count, |
| 656 | stats_views: config.stats_tag.views, |
| 657 | stats_author: config.stats_tag.author, |
| 658 | stats_date: config.stats_tag.date.active, |
| 659 | stats_date_format: config.stats_tag.date.format, |
| 660 | stats_taxonomy: config.stats_tag.taxonomy.active, |
| 661 | taxonomy: config.stats_tag.taxonomy.name, |
| 662 | custom_html: true, |
| 663 | wpp_start: config.markup['wpp-start'], |
| 664 | wpp_end: config.markup['wpp-end'], |
| 665 | post_html: config.markup['post-html'], |
| 666 | theme: value |
| 667 | }); |
| 668 | } else { |
| 669 | setAttributes({ theme: value }); |
| 670 | } |
| 671 | } |
| 672 | |
| 673 | let themes = [ |
| 674 | { |
| 675 | label: __('None', 'wordpress-popular-posts'), |
| 676 | value: '' |
| 677 | }, |
| 678 | ]; |
| 679 | |
| 680 | if ( this.state.themes ) { |
| 681 | for( const theme in this.state.themes ) { |
| 682 | themes.push( |
| 683 | { |
| 684 | label: this.state.themes[theme].json.name, |
| 685 | value: theme |
| 686 | }, |
| 687 | ); |
| 688 | } |
| 689 | } |
| 690 | |
| 691 | return <Fragment> |
| 692 | <p className='not-a-legend'><strong>{__('HTML Markup settings', 'wordpress-popular-posts')}</strong> <small>(<a href="https://github.com/cabrerahector/wordpress-popular-posts/wiki/5.-FAQ#how-can-i-use-my-own-html-markup-with-your-plugin" target="_blank">{__('What is this?', 'wordpress-popular-posts')}</a>)</small></p> |
| 693 | <CheckboxControl |
| 694 | label={__('Use custom HTML Markup', 'wordpress-popular-posts')} |
| 695 | checked={attributes.custom_html} |
| 696 | onChange={(value) => setAttributes({ custom_html: value })} |
| 697 | /> |
| 698 | { attributes.custom_html && |
| 699 | <div className='option-subset'> |
| 700 | <TextareaControl |
| 701 | rows="1" |
| 702 | label={__('Before title', 'wordpress-popular-posts')} |
| 703 | value={attributes.header_start} |
| 704 | onChange={(value) => setAttributes({ header_start: value })} |
| 705 | /> |
| 706 | <TextareaControl |
| 707 | rows="1" |
| 708 | label={__('After title', 'wordpress-popular-posts')} |
| 709 | value={attributes.header_end} |
| 710 | onChange={(value) => setAttributes({ header_end: value })} |
| 711 | /> |
| 712 | <TextareaControl |
| 713 | rows="1" |
| 714 | label={__('Before popular posts', 'wordpress-popular-posts')} |
| 715 | value={attributes.wpp_start} |
| 716 | onChange={(value) => setAttributes({ wpp_start: value })} |
| 717 | /> |
| 718 | <TextareaControl |
| 719 | rows="1" |
| 720 | label={__('After popular posts', 'wordpress-popular-posts')} |
| 721 | value={attributes.wpp_end} |
| 722 | onChange={(value) => setAttributes({ wpp_end: value })} |
| 723 | /> |
| 724 | <TextareaControl |
| 725 | label={__('Post HTML markup', 'wordpress-popular-posts')} |
| 726 | value={attributes.post_html} |
| 727 | onChange={(value) => setAttributes({ post_html: value })} |
| 728 | /> |
| 729 | <small><a href="https://github.com/cabrerahector/wordpress-popular-posts/wiki/2.-Template-tags#content-tags" target="_blank">{__('Content Tags List', 'wordpress-popular-posts')}</a></small> |
| 730 | </div> |
| 731 | } |
| 732 | <SelectControl |
| 733 | label={__('Theme', 'wordpress-popular-posts')} |
| 734 | value={attributes.theme} |
| 735 | options={themes} |
| 736 | onChange={onThemeChange} |
| 737 | /> |
| 738 | </Fragment>; |
| 739 | } |
| 740 | |
| 741 | render() |
| 742 | { |
| 743 | if ( ! this.state.taxonomies || ! this.state.themes || ! this.state.imgSizes ) |
| 744 | return <Spinner />; |
| 745 | |
| 746 | const { isSelected, className, attributes } = this.props; |
| 747 | |
| 748 | let classes = className; |
| 749 | classes += this.state.editMode ? ' in-edit-mode' : ' in-preview-mode'; |
| 750 | classes += isSelected ? ' is-selected' : ''; |
| 751 | |
| 752 | return ([ |
| 753 | this.getBlockControls(), |
| 754 | <div className={classes}> |
| 755 | { this.state.editMode && |
| 756 | <Fragment> |
| 757 | {this.getMainFields()} |
| 758 | {this.getFiltersFields()} |
| 759 | {this.getPostSettingsFields()} |
| 760 | {this.getStatsTagFields()} |
| 761 | {this.getHTMLMarkupFields()} |
| 762 | </Fragment> |
| 763 | } |
| 764 | { ! this.state.editMode && |
| 765 | <Disabled> |
| 766 | <ServerSideRender |
| 767 | block={this.props.name} |
| 768 | className={className} |
| 769 | attributes={attributes} |
| 770 | urlQueryArgs={{isSelected: isSelected}} |
| 771 | /> |
| 772 | </Disabled> |
| 773 | } |
| 774 | </div> |
| 775 | ]); |
| 776 | } |
| 777 | } |
| 778 |