tracking-code-manager
Last commit date
assets
1 year ago
includes
1 year ago
languages
1 year ago
logs
1 year ago
README.md
1 year ago
autoload.php
1 year ago
index.php
1 year ago
readme.txt
1 year ago
screenshot-1.gif
1 year ago
screenshot-2.png
1 year ago
screenshot-3.png
1 year ago
screenshot-4.png
1 year ago
screenshot-5.png
1 year ago
screenshot-6.jpg
1 year ago
screenshot-7.png
1 year ago
screenshot-8.png
1 year ago
screenshot-9.png
1 year ago
shortcode-block.js
1 year ago
shortcode-block.js
177 lines
| 1 | var el = wp.element.createElement; |
| 2 | |
| 3 | const irpIcon = el( |
| 4 | 'svg', |
| 5 | {height: "24", width: "40"}, |
| 6 | el( |
| 7 | 'text', |
| 8 | {x: '0', y: '15', fill: 'red'}, |
| 9 | "[irp]" |
| 10 | ) |
| 11 | ); |
| 12 | |
| 13 | wp.blocks.registerBlockType("data443/irp-shortcode", { |
| 14 | title: "Inline Related Posts", // Block name visible to the user within the editor |
| 15 | icon: irpIcon, // Toolbar icon displayed beneath the name of the block |
| 16 | category: "data443-category", // The category under which the block will appear in the Add block menu |
| 17 | attributes: { |
| 18 | // The data this block will be storing |
| 19 | id: {type: "string", default: 'Inline Related Posts'}, |
| 20 | shortcode: {type: "string", default: '[irp]'}, |
| 21 | items: { |
| 22 | type: 'array', |
| 23 | default: [], |
| 24 | items: { |
| 25 | type: 'object', |
| 26 | properties: { |
| 27 | stringValue: { |
| 28 | type: 'string', |
| 29 | default: 'Default String' |
| 30 | }, |
| 31 | intValue: { |
| 32 | type: 'integer', |
| 33 | default: 0 |
| 34 | } |
| 35 | } |
| 36 | } |
| 37 | } |
| 38 | }, |
| 39 | edit: function (props) { |
| 40 | // Defines how the block will render in the editor |
| 41 | var ajaxurl = 'admin-ajax.php'; |
| 42 | const clientId = props.clientId; |
| 43 | var selectBoxSelector = `.irp-post-select-${clientId}`; |
| 44 | const selectBox = document.querySelector(selectBoxSelector); |
| 45 | |
| 46 | var data = { |
| 47 | 'action' : 'irp_list_posts', |
| 48 | 'irp_post_type' : 'post' |
| 49 | }; |
| 50 | |
| 51 | function isNumeric(value) { |
| 52 | return /^\d+$/.test(value); |
| 53 | } |
| 54 | |
| 55 | console.log('edit'); |
| 56 | console.log('selected attribute value: ', props.attributes.id); |
| 57 | console.log('shortcode: ', props.attributes.shortcode); |
| 58 | |
| 59 | if (selectBox != null) { |
| 60 | var availableOptionsCount = props.attributes.items.length; |
| 61 | console.log('Number of available options: ', availableOptionsCount); |
| 62 | |
| 63 | if (availableOptionsCount > 0) { |
| 64 | jQuery(selectBox).empty(); |
| 65 | props.attributes.items.forEach(option => { |
| 66 | const optionElement = new Option(option.text, option.id); |
| 67 | jQuery(selectBox).append(optionElement); |
| 68 | }); |
| 69 | } |
| 70 | |
| 71 | const selectedValue = jQuery(selectBox).val(); |
| 72 | console.log("selected dropdown value: ", selectedValue); |
| 73 | |
| 74 | if (selectedValue != undefined) { |
| 75 | if (isNumeric(props.attributes.id)) { |
| 76 | if (selectedValue != props.attributes.id) { |
| 77 | console.log('trigger change: ', props.attributes.id); |
| 78 | jQuery(selectBox).val(props.attributes.id).trigger('change'); |
| 79 | } |
| 80 | } else { |
| 81 | console.log('trigger change 0'); |
| 82 | jQuery(selectBox).val(0).trigger('change'); |
| 83 | } |
| 84 | } |
| 85 | |
| 86 | jQuery(selectBox).on('change', function () { |
| 87 | const selectedValue = jQuery(this).val(); |
| 88 | console.log('onChange selected value: ', selectedValue); |
| 89 | |
| 90 | if (selectedValue != null) { |
| 91 | var shortcode = '[irp posts="' + selectedValue +'"]'; |
| 92 | if (selectedValue == '[irp]' || selectedValue == 0) { |
| 93 | shortcode = '[irp]'; |
| 94 | } |
| 95 | props.attributes.id = selectedValue; |
| 96 | if (props.attributes.shortcode != shortcode) { |
| 97 | props.setAttributes({shortcode: shortcode}); |
| 98 | } |
| 99 | } |
| 100 | }); |
| 101 | |
| 102 | // Initialize select2 first |
| 103 | jQuery(selectBox).select2(); |
| 104 | |
| 105 | // Then, initialize the ajax configuration |
| 106 | jQuery(selectBox).select2({ |
| 107 | ajax: { |
| 108 | url: ajaxurl, |
| 109 | dataType: 'json', |
| 110 | delay: 250, |
| 111 | data: function (params) { |
| 112 | console.log('do ajax call'); |
| 113 | return { |
| 114 | action: 'irp_list_posts', |
| 115 | irp_post_type: 'post', |
| 116 | q: params.term, |
| 117 | page: params.page |
| 118 | }; |
| 119 | }, |
| 120 | processResults: function (data) { |
| 121 | data.page = data.page || 1; |
| 122 | console.log("new results"); |
| 123 | data.items.unshift({text: 'Inline Related Posts', id: 0}); |
| 124 | props.attributes.items = data.items; |
| 125 | return { |
| 126 | results: data.items, |
| 127 | more: false |
| 128 | }; |
| 129 | }, |
| 130 | cache: true |
| 131 | }, |
| 132 | placeholder: "Type here to search an item...", |
| 133 | width: '100%' |
| 134 | }); |
| 135 | } else { |
| 136 | console.log('selectBox is null'); |
| 137 | } |
| 138 | |
| 139 | // build the JSX |
| 140 | return el( |
| 141 | "div", |
| 142 | { |
| 143 | className: "irp-shortcode-edit", |
| 144 | style: {'border' : '2px black solid', 'padding' : '10px'}, |
| 145 | }, |
| 146 | el("h3", {style: {'margin' : '0', 'padding' : '0'}}, "Inline Related Posts"), |
| 147 | el("details", {style: {'margin' : '0', 'padding' : '4'}}, |
| 148 | el('summary', null, "Tips (click to expand)"), |
| 149 | el("ul", {style: {'margin' : '0', 'padding' : '0'}}, null), |
| 150 | el("li", {style: {'margin' : '0', 'padding' : '0'}}, "When first placing the gutenberg block, click outside of the block in order to fill the select box with posts."), |
| 151 | el("li", {style: {'margin' : '0', 'padding' : '0'}}, "Click on the dropdown to display the search box"), |
| 152 | el("li", {style: {'margin' : '0', 'padding' : '0'}}, "Use the search box to narrow down the number of posts displayed in the dropdown since at most 100 posts will be displayed."), |
| 153 | ), |
| 154 | el('p', {style: {'margin' : '0', 'padding' : '0'}}, "Select post:"), |
| 155 | el( |
| 156 | "select", |
| 157 | { |
| 158 | className: `irp-post-select-${props.clientId}`, |
| 159 | value: props.attributes.id, |
| 160 | }, |
| 161 | el("option", {value: "[irp]"}, 'Inline Related Posts') |
| 162 | ), |
| 163 | ); // End return |
| 164 | }, // End edit() |
| 165 | |
| 166 | save: function (props) { |
| 167 | // Defines how the block will render on the frontend |
| 168 | return el( |
| 169 | "div", |
| 170 | { |
| 171 | className: "irp-shortcode", |
| 172 | }, |
| 173 | props.attributes.shortcode |
| 174 | ); |
| 175 | } |
| 176 | }); |
| 177 |