chart_plugins
1 year ago
controllers
2 months ago
modules
2 months ago
utils
8 months ago
click-tracking-menu.js
1 year ago
dashboard_widget.js
2 years ago
download.js
1 year ago
index.js
5 months ago
layout.js
1 year ago
settings.js
1 year ago
click-tracking-menu.js
256 lines
| 1 | import MicroModal from "micromodal" |
| 2 | import Sortable from 'sortablejs' |
| 3 | |
| 4 | document.addEventListener("DOMContentLoaded", () => MicroModal.init()) |
| 5 | const $ = jQuery; |
| 6 | |
| 7 | const ClickTrackingMenu = { |
| 8 | errorMessages: null, |
| 9 | deleteButton: null, |
| 10 | setup: function () { |
| 11 | this.errorMessages = $('#validation-error-messages'); |
| 12 | this.deleteButton = $('#delete-link-modal .yes'); |
| 13 | var self = this; |
| 14 | $('#click-tracking-menu').on('change', '.link-type', function () { |
| 15 | self.changeVisibleInput($(this).parents('.trackable-link'), $(this).val()); |
| 16 | }); |
| 17 | $('#click-tracking-menu').on('click', '.edit-button', function () { |
| 18 | self.enableEditing($(this).parents('.trackable-link')); |
| 19 | }); |
| 20 | $('#click-tracking-menu').on('click', '.cancel-button', function () { |
| 21 | self.cancelEditing($(this).parents('.trackable-link')); |
| 22 | }); |
| 23 | $('#click-tracking-menu').on('click', '.save-button', function () { |
| 24 | self.editLinkRequest($(this).parents('.trackable-link')); |
| 25 | }); |
| 26 | $('#click-tracking-menu').on('click', '.archive-button', function () { |
| 27 | self.archiveLinkRequest($(this).parents('.trackable-link')); |
| 28 | }); |
| 29 | $('#toggle-archived-links').on('click', function () { |
| 30 | self.toggleArchivedLinks($(this)); |
| 31 | }); |
| 32 | $('#click-tracking-menu').on('click', '.delete-link-button', function () { |
| 33 | self.deleteButton.data('link-id', $(this).parents('.trackable-link').data('id')); |
| 34 | MicroModal.show("delete-link-modal"); |
| 35 | }); |
| 36 | this.deleteButton.on('click', function () { |
| 37 | self.deleteLinkRequest($(this).data('link-id')); |
| 38 | $(this).data('link-id', ''); |
| 39 | }); |
| 40 | $('#create-new-link').on('click', function () { |
| 41 | self.addNewLinkToTable(); |
| 42 | }); |
| 43 | $('#click-tracking-menu').on('keydown', '.link-name, .link-value', function (event) { |
| 44 | self.triggerSaveButton(event, $(this).parents('.trackable-link'), $(this)); |
| 45 | }); |
| 46 | const trackedLinksSortable = new Sortable(document.getElementById('sortable-tracked-links-list'), { |
| 47 | animation: 150, |
| 48 | ghostClass: 'iawp-sortable-ghost', |
| 49 | dragClass: 'is-dragging', |
| 50 | delay: 2000, |
| 51 | delayOnTouchOnly: true, |
| 52 | onUpdate: (event) => this.sortLinks(trackedLinksSortable, event), |
| 53 | }); |
| 54 | const archivedLinksSortable = new Sortable(document.getElementById('archived-links-list'), { |
| 55 | animation: 150, |
| 56 | ghostClass: 'iawp-sortable-ghost', |
| 57 | dragClass: 'is-dragging', |
| 58 | delay: 2000, |
| 59 | delayOnTouchOnly: true, |
| 60 | onUpdate: (event) => this.sortLinks(archivedLinksSortable, event), |
| 61 | }); |
| 62 | document.getElementById('click-tracking-cache-cleared').addEventListener('click', function () { |
| 63 | const data = { |
| 64 | ...iawpActions.click_tracking_cache_cleared, |
| 65 | }; |
| 66 | document.getElementById('click-tracking-cache-message-container').classList.remove('show') |
| 67 | jQuery.post(ajaxurl, data, (response) => { |
| 68 | |
| 69 | }).fail(() => { |
| 70 | document.getElementById('click-tracking-cache-message-container').classList.add('show') |
| 71 | }) |
| 72 | }) |
| 73 | }, |
| 74 | editLinkRequest: function (link) { |
| 75 | var self = this; |
| 76 | const id = link.data('id'); |
| 77 | const name = link.find('.link-name').val(); |
| 78 | const type = link.find('.link-type').val(); |
| 79 | const value = link.find('.value-container.visible .link-value').val(); |
| 80 | |
| 81 | const data = { |
| 82 | ...iawpActions.edit_link, |
| 83 | id, |
| 84 | name, |
| 85 | type, |
| 86 | value |
| 87 | }; |
| 88 | |
| 89 | link.find('.save-button').addClass('saving'); |
| 90 | link.find('.save-button').prop('disabled', true); |
| 91 | link.find('.cancel-button').prop('disabled', true); |
| 92 | |
| 93 | jQuery.post(ajaxurl, data, function (response) { |
| 94 | link.find('.save-button').removeClass('saving'); |
| 95 | |
| 96 | if (response.data.error && response.data.error.length > 0) { |
| 97 | self.hideErrorMessages(link); |
| 98 | link.after(self.errorMessages); |
| 99 | self.errorMessages.find('.' + response.data.error).addClass('visible'); |
| 100 | link.find('.link-' + response.data.property).addClass('error'); |
| 101 | link.find('.save-button').prop('disabled', false); |
| 102 | link.find('.cancel-button').prop('disabled', false); |
| 103 | } else { |
| 104 | if(response.data.shouldShowCacheMessage) { |
| 105 | document.getElementById('click-tracking-cache-message-container').classList.add('show') |
| 106 | } |
| 107 | if(link.parent().is('#sortable-tracked-links-list')) { |
| 108 | link.replaceWith(response.data.html) |
| 109 | } else { |
| 110 | link.remove() |
| 111 | $('#sortable-tracked-links-list').prepend(response.data.html); |
| 112 | } |
| 113 | self.hideErrorMessages(link); |
| 114 | } |
| 115 | }); |
| 116 | }, |
| 117 | archiveLinkRequest: function (link) { |
| 118 | const id = link.data('id'); |
| 119 | const data = { |
| 120 | ...iawpActions.archive_link, |
| 121 | id |
| 122 | }; |
| 123 | const isActive = link.closest('.tracked-links-list').length > 0; |
| 124 | |
| 125 | link.addClass('archiving'); |
| 126 | |
| 127 | jQuery.post(ajaxurl, data, (response) => { |
| 128 | response = JSON.parse(response); |
| 129 | if (response) { |
| 130 | document.getElementById('click-tracking-cache-message-container').classList.add('show') |
| 131 | link.remove(); |
| 132 | if (isActive) { |
| 133 | $('#archived-links-list').prepend(response); |
| 134 | } else { |
| 135 | $('#sortable-tracked-links-list').prepend(response); |
| 136 | } |
| 137 | } |
| 138 | |
| 139 | this.toggleEmptyMessage() |
| 140 | }); |
| 141 | }, |
| 142 | deleteLinkRequest: function (id) { |
| 143 | var self = this; |
| 144 | const data = { |
| 145 | ...iawpActions.delete_link, |
| 146 | id |
| 147 | }; |
| 148 | |
| 149 | this.deleteButton.addClass('sending'); |
| 150 | |
| 151 | jQuery.post(ajaxurl, data, (response) => { |
| 152 | self.deleteButton.removeClass('sending'); |
| 153 | $('.trackable-link[data-id="' + response.data.id + '"]').remove(); |
| 154 | MicroModal.close("delete-link-modal"); |
| 155 | this.toggleEmptyMessage() |
| 156 | }).fail(() => { |
| 157 | // Do nothing |
| 158 | }) |
| 159 | }, |
| 160 | changeVisibleInput: function (link, type) { |
| 161 | link.find('.value-container.visible').removeClass('visible'); |
| 162 | link.find('.value-container.' + type).addClass('visible'); |
| 163 | }, |
| 164 | enableEditing: function (link) { |
| 165 | link.addClass('is-editing'); |
| 166 | this.focusOnInput(link.find('.link-name')); |
| 167 | }, |
| 168 | cancelEditing: function (link) { |
| 169 | if (link.hasClass('blueprint-clone')) { |
| 170 | link.remove(); |
| 171 | } else { |
| 172 | link.removeClass('is-editing'); |
| 173 | } |
| 174 | this.hideErrorMessages(link); |
| 175 | this.errorMessages.remove() |
| 176 | this.toggleEmptyMessage() |
| 177 | }, |
| 178 | toggleArchivedLinks: function (button) { |
| 179 | $('#archived-links').toggleClass('open'); |
| 180 | const buttonText = button.text() |
| 181 | button.text(button.data('alt-text')) |
| 182 | button.data('alt-text', buttonText) |
| 183 | }, |
| 184 | addNewLinkToTable: function () { |
| 185 | if ($('#tracked-links-list').find('.blueprint-clone').length !== 0) { |
| 186 | return; |
| 187 | } |
| 188 | var clone = $('#blueprint-link .trackable-link').clone(); |
| 189 | clone.addClass('is-editing blueprint-clone'); |
| 190 | $('#tracked-links-list').prepend(clone); |
| 191 | clone.find('.link-name').focus(); |
| 192 | this.toggleEmptyMessage() |
| 193 | }, |
| 194 | triggerSaveButton: function (event, link, input) { |
| 195 | if (!link.hasClass('is-editing') || input.get(0).tagName == 'SELECT') |
| 196 | return; |
| 197 | if (event.key == 'Enter') |
| 198 | link.find('.save-button').click(); |
| 199 | }, |
| 200 | focusOnInput: function (input) { |
| 201 | var val = input.focus().val(); |
| 202 | input.val('').val(val); |
| 203 | }, |
| 204 | hideErrorMessages: function (link) { |
| 205 | link.find('input, select').removeClass('error'); |
| 206 | this.errorMessages.find('p').removeClass('visible'); |
| 207 | }, |
| 208 | toggleEmptyMessage: function () { |
| 209 | if ($('#tracked-links-list .trackable-link').length === 0) { |
| 210 | $('.tracked-links-empty-message').addClass('show'); |
| 211 | } else { |
| 212 | $('.tracked-links-empty-message').removeClass('show'); |
| 213 | } |
| 214 | |
| 215 | if ($('#archived-links-list .trackable-link').length === 0) { |
| 216 | $('.archived-links-empty-message').addClass('show'); |
| 217 | } else { |
| 218 | $('.archived-links-empty-message').removeClass('show'); |
| 219 | } |
| 220 | }, |
| 221 | sortLinks(sortable, event) { |
| 222 | const elements = Array.from(event.target.querySelectorAll('.trackable-link')); |
| 223 | const ids = elements.map((element) => parseInt(element.dataset.id)) |
| 224 | |
| 225 | const data = { |
| 226 | ...iawpActions.sort_links, |
| 227 | ids |
| 228 | }; |
| 229 | |
| 230 | jQuery.post(ajaxurl, data, (response) => { |
| 231 | // Do nothing |
| 232 | }).fail(() => { |
| 233 | sortable.sort( |
| 234 | this.moveArrayItem(sortable.toArray(), event.newIndex, event.oldIndex) |
| 235 | ) |
| 236 | }) |
| 237 | }, |
| 238 | moveArrayItem(array, fromIndex, toIndex) { |
| 239 | const newArray = [...array] |
| 240 | |
| 241 | if (fromIndex === toIndex) { |
| 242 | return newArray |
| 243 | } |
| 244 | |
| 245 | const itemToMove = newArray.splice(fromIndex, 1)[0] |
| 246 | newArray.splice(toIndex, 0, itemToMove) |
| 247 | |
| 248 | return newArray |
| 249 | } |
| 250 | } |
| 251 | |
| 252 | jQuery(function ($) { |
| 253 | ClickTrackingMenu.setup(); |
| 254 | }); |
| 255 | |
| 256 |