index.js
150 lines
| 1 | (function (blocks, blockEditor, components, i18n, element) { |
| 2 | var el = element.createElement; |
| 3 | var __ = i18n.__; |
| 4 | var registerBlockType = blocks.registerBlockType; |
| 5 | var useBlockProps = blockEditor.useBlockProps; |
| 6 | var InspectorControls = blockEditor.InspectorControls; |
| 7 | var RichText = blockEditor.RichText; |
| 8 | var PanelBody = components.PanelBody; |
| 9 | var PanelRow = components.PanelRow; |
| 10 | var SelectControl = components.SelectControl; |
| 11 | var ToggleControl = components.ToggleControl; |
| 12 | var RangeControl = components.RangeControl; |
| 13 | var TextareaControl = components.TextareaControl; |
| 14 | var Placeholder = components.Placeholder; |
| 15 | |
| 16 | var ORDER_BY_OPTIONS = [ |
| 17 | {label: __('Name', 'postaffiliatepro'), value: 'name'}, |
| 18 | {label: __('Sales count', 'postaffiliatepro'), value: 'salesCount'}, |
| 19 | {label: __('Commissions', 'postaffiliatepro'), value: 'commissions'}, |
| 20 | {label: __('Raw clicks', 'postaffiliatepro'), value: 'clicksRaw'} |
| 21 | ]; |
| 22 | |
| 23 | var TEMPLATE_VARS = |
| 24 | '{$firstname}, {$lastname}, {$userid}, {$parentuserid}, ' + |
| 25 | '{$clicksRaw}, {$salesCount}, {$commissions}, {$data1} … {$data25}'; |
| 26 | |
| 27 | registerBlockType('postaffiliatepro/top-affiliates', { |
| 28 | edit: function (props) { |
| 29 | var attributes = props.attributes; |
| 30 | var setAttributes = props.setAttributes; |
| 31 | var title = attributes.title; |
| 32 | var refreshInterval = attributes.refreshInterval; |
| 33 | var orderBy = attributes.orderBy; |
| 34 | var orderAsc = attributes.orderAsc; |
| 35 | var limit = attributes.limit; |
| 36 | var rowTemplate = attributes.rowTemplate; |
| 37 | |
| 38 | var blockProps = useBlockProps({ |
| 39 | className: 'wp-block-postaffiliatepro-top-affiliates' |
| 40 | }); |
| 41 | |
| 42 | var currentOrderLabel = ORDER_BY_OPTIONS.reduce(function (found, opt) { |
| 43 | return opt.value === orderBy ? opt.label : found; |
| 44 | }, orderBy); |
| 45 | |
| 46 | return [ |
| 47 | el(InspectorControls, {key: 'inspector'}, |
| 48 | |
| 49 | el(PanelBody, { |
| 50 | title: __('Display settings', 'postaffiliatepro'), |
| 51 | initialOpen: true |
| 52 | }, |
| 53 | el(PanelRow, null, |
| 54 | el(RangeControl, { |
| 55 | label: __('Number of affiliates', 'postaffiliatepro'), |
| 56 | help: __('Maximum rows to display.', 'postaffiliatepro'), |
| 57 | value: limit, |
| 58 | onChange: function (v) {setAttributes({limit: v});}, |
| 59 | min: 1, |
| 60 | max: 100 |
| 61 | }) |
| 62 | ), |
| 63 | el(PanelRow, null, |
| 64 | el(SelectControl, { |
| 65 | label: __('Order by', 'postaffiliatepro'), |
| 66 | value: orderBy, |
| 67 | options: ORDER_BY_OPTIONS, |
| 68 | onChange: function (v) {setAttributes({orderBy: v});} |
| 69 | }) |
| 70 | ), |
| 71 | el(PanelRow, null, |
| 72 | el(ToggleControl, { |
| 73 | label: __('Ascending order', 'postaffiliatepro'), |
| 74 | help: orderAsc |
| 75 | ? __('Lowest first.', 'postaffiliatepro') |
| 76 | : __('Highest first (default).', 'postaffiliatepro'), |
| 77 | checked: orderAsc, |
| 78 | onChange: function (v) {setAttributes({orderAsc: v});} |
| 79 | }) |
| 80 | ) |
| 81 | ), |
| 82 | |
| 83 | el(PanelBody, { |
| 84 | title: __('Cache settings', 'postaffiliatepro'), |
| 85 | initialOpen: false |
| 86 | }, |
| 87 | el(PanelRow, null, |
| 88 | el(RangeControl, { |
| 89 | label: __('Refresh interval (minutes)', 'postaffiliatepro'), |
| 90 | help: __('How long affiliate data is cached before fetching again.', 'postaffiliatepro'), |
| 91 | value: refreshInterval, |
| 92 | onChange: function (v) {setAttributes({refreshInterval: v});}, |
| 93 | min: 5, |
| 94 | max: 1440 |
| 95 | }) |
| 96 | ) |
| 97 | ), |
| 98 | |
| 99 | el(PanelBody, { |
| 100 | title: __('Row template', 'postaffiliatepro'), |
| 101 | initialOpen: false |
| 102 | }, |
| 103 | el(TextareaControl, { |
| 104 | label: __('Template', 'postaffiliatepro'), |
| 105 | help: __('Available variables: ', 'postaffiliatepro') + TEMPLATE_VARS, |
| 106 | value: rowTemplate, |
| 107 | onChange: function (v) {setAttributes({rowTemplate: v});}, |
| 108 | rows: 5 |
| 109 | }) |
| 110 | ) |
| 111 | ), |
| 112 | |
| 113 | // Canvas preview |
| 114 | el('div', Object.assign({key: 'block'}, blockProps), |
| 115 | el(RichText, { |
| 116 | tagName: 'h2', |
| 117 | className: 'wp-block-postaffiliatepro-top-affiliates__title', |
| 118 | placeholder: __('Top Affiliates', 'postaffiliatepro'), |
| 119 | value: title, |
| 120 | onChange: function (v) {setAttributes({title: v});}, |
| 121 | allowedFormats: [] |
| 122 | }), |
| 123 | el(Placeholder, { |
| 124 | icon: 'groups', |
| 125 | label: __('Top Affiliates', 'postaffiliatepro'), |
| 126 | instructions: __('Affiliate data is loaded on the frontend. Configure display settings in the sidebar.', 'postaffiliatepro') |
| 127 | }, |
| 128 | el('ul', {className: 'wp-block-postaffiliatepro-top-affiliates__preview-meta'}, |
| 129 | el('li', null, __('Order by:', 'postaffiliatepro'), ' ', el('strong', null, currentOrderLabel)), |
| 130 | el('li', null, __('Limit:', 'postaffiliatepro'), ' ', el('strong', null, limit)), |
| 131 | el('li', null, __('Refresh every:', 'postaffiliatepro'), ' ', el('strong', null, refreshInterval + ' ' + __('min', 'postaffiliatepro'))) |
| 132 | ) |
| 133 | ) |
| 134 | ) |
| 135 | ]; |
| 136 | }, |
| 137 | |
| 138 | // Server-side rendered – no static HTML to save. |
| 139 | save: function () { |
| 140 | return null; |
| 141 | } |
| 142 | }); |
| 143 | |
| 144 | })( |
| 145 | window.wp.blocks, |
| 146 | window.wp.blockEditor, |
| 147 | window.wp.components, |
| 148 | window.wp.i18n, |
| 149 | window.wp.element |
| 150 | ); |