|
| 1 | +(function(root, factory) { |
| 2 | + var create = factory(); |
| 3 | + if (typeof module === 'object' && module.exports) { |
| 4 | + module.exports = create; |
| 5 | + } else { |
| 6 | + root.blcSettingsModeToggleFactory = create; |
| 7 | + } |
| 8 | +}(typeof self !== 'undefined' ? self : this, function() { |
| 9 | + function noop() {} |
| 10 | + |
| 11 | + return function createSettingsModeToggle($, options) { |
| 12 | + if (!$ || !$.fn) { |
| 13 | + return function() { |
| 14 | + return false; |
| 15 | + }; |
| 16 | + } |
| 17 | + |
| 18 | + var settings = options || {}; |
| 19 | + var initAdvancedSettings = (typeof settings.initAdvancedSettings === 'function') ? settings.initAdvancedSettings : noop; |
| 20 | + var toast = settings.toast || null; |
| 21 | + var accessibility = settings.accessibility || {}; |
| 22 | + var speak = (typeof accessibility.speak === 'function') ? accessibility.speak : noop; |
| 23 | + |
| 24 | + return function initSettingsModeToggle() { |
| 25 | + var config = window.blcAdminSettings || {}; |
| 26 | + var ajaxConfig = config.ajax || {}; |
| 27 | + var i18n = config.i18n || {}; |
| 28 | + var currentMode = (config.mode === 'advanced') ? 'advanced' : 'simple'; |
| 29 | + var $toggle = $('[data-blc-settings-mode-toggle]'); |
| 30 | + |
| 31 | + if (!$toggle.length) { |
| 32 | + return false; |
| 33 | + } |
| 34 | + |
| 35 | + var $control = $toggle.find('[data-blc-settings-mode-control]'); |
| 36 | + if (!$control.length) { |
| 37 | + return false; |
| 38 | + } |
| 39 | + |
| 40 | + var $state = $toggle.find('[data-blc-settings-mode-state]'); |
| 41 | + var $action = $control.find('[data-blc-settings-mode-action]'); |
| 42 | + var $placeholder = $('[data-blc-settings-advanced-placeholder]'); |
| 43 | + var $template = $('#blc-settings-advanced-template'); |
| 44 | + var templateHtml = ''; |
| 45 | + |
| 46 | + if ($template.length) { |
| 47 | + templateHtml = $template.html(); |
| 48 | + if (typeof templateHtml === 'string') { |
| 49 | + templateHtml = templateHtml.trim(); |
| 50 | + } |
| 51 | + } |
| 52 | + |
| 53 | + function ensureAdvancedMarkup() { |
| 54 | + if (!templateHtml || !$placeholder.length) { |
| 55 | + return; |
| 56 | + } |
| 57 | + |
| 58 | + if ($placeholder.children().length) { |
| 59 | + return; |
| 60 | + } |
| 61 | + |
| 62 | + $placeholder.html(templateHtml); |
| 63 | + initAdvancedSettings($placeholder); |
| 64 | + } |
| 65 | + |
| 66 | + function applyMode(mode) { |
| 67 | + var isAdvanced = mode === 'advanced'; |
| 68 | + currentMode = isAdvanced ? 'advanced' : 'simple'; |
| 69 | + |
| 70 | + $toggle.attr('data-current-mode', currentMode); |
| 71 | + $control.attr('aria-checked', isAdvanced ? 'true' : 'false'); |
| 72 | + |
| 73 | + if ($state.length) { |
| 74 | + var statusText = isAdvanced |
| 75 | + ? (i18n.statusAdvanced || i18n.modeAdvanced || $state.text()) |
| 76 | + : (i18n.statusSimple || i18n.modeSimple || $state.text()); |
| 77 | + $state.text(statusText); |
| 78 | + } |
| 79 | + |
| 80 | + if ($action.length) { |
| 81 | + $action.text(isAdvanced ? (i18n.switchToSimple || $action.text()) : (i18n.switchToAdvanced || $action.text())); |
| 82 | + } |
| 83 | + |
| 84 | + if (isAdvanced) { |
| 85 | + ensureAdvancedMarkup(); |
| 86 | + } else if ($placeholder.length) { |
| 87 | + $placeholder.empty(); |
| 88 | + } |
| 89 | + } |
| 90 | + |
| 91 | + var isPending = false; |
| 92 | + |
| 93 | + function setPending(state) { |
| 94 | + isPending = !!state; |
| 95 | + $control.prop('disabled', isPending); |
| 96 | + $toggle.toggleClass('is-loading', isPending); |
| 97 | + } |
| 98 | + |
| 99 | + function getAnnouncement(mode, response) { |
| 100 | + if (response && response.data && response.data.announcement) { |
| 101 | + return response.data.announcement; |
| 102 | + } |
| 103 | + |
| 104 | + return mode === 'advanced' |
| 105 | + ? (i18n.announcementAdvanced || '') |
| 106 | + : (i18n.announcementSimple || ''); |
| 107 | + } |
| 108 | + |
| 109 | + function persistMode(mode) { |
| 110 | + var url = ajaxConfig.url || window.ajaxurl || ''; |
| 111 | + var hasAjax = ajaxConfig.action && ajaxConfig.nonce && url && typeof $.post === 'function'; |
| 112 | + |
| 113 | + if (!hasAjax) { |
| 114 | + if (typeof Promise === 'function') { |
| 115 | + return Promise.resolve({ success: true, data: { mode: mode } }); |
| 116 | + } |
| 117 | + |
| 118 | + if (typeof $.Deferred === 'function') { |
| 119 | + return $.Deferred().resolve({ success: true, data: { mode: mode } }).promise(); |
| 120 | + } |
| 121 | + |
| 122 | + return null; |
| 123 | + } |
| 124 | + |
| 125 | + return new Promise(function(resolve, reject) { |
| 126 | + var jqRequest = $.post(url, { |
| 127 | + action: ajaxConfig.action, |
| 128 | + mode: mode, |
| 129 | + _wpnonce: ajaxConfig.nonce |
| 130 | + }); |
| 131 | + |
| 132 | + if (jqRequest && typeof jqRequest.done === 'function') { |
| 133 | + jqRequest.done(resolve).fail(reject); |
| 134 | + } else if (jqRequest && typeof jqRequest.then === 'function') { |
| 135 | + jqRequest.then(resolve).catch(reject); |
| 136 | + } else { |
| 137 | + resolve({ success: true, data: { mode: mode } }); |
| 138 | + } |
| 139 | + }); |
| 140 | + } |
| 141 | + |
| 142 | + applyMode(currentMode); |
| 143 | + |
| 144 | + $control.off('click.blcSettingsMode'); |
| 145 | + $control.on('click.blcSettingsMode', function(event) { |
| 146 | + event.preventDefault(); |
| 147 | + |
| 148 | + if (isPending) { |
| 149 | + return; |
| 150 | + } |
| 151 | + |
| 152 | + var previousMode = currentMode; |
| 153 | + var nextMode = (currentMode === 'advanced') ? 'simple' : 'advanced'; |
| 154 | + setPending(true); |
| 155 | + |
| 156 | + applyMode(nextMode); |
| 157 | + |
| 158 | + var request = persistMode(nextMode); |
| 159 | + |
| 160 | + function handleSuccess(response) { |
| 161 | + var savedMode = nextMode; |
| 162 | + |
| 163 | + if (response) { |
| 164 | + if (response.success !== false && response.data && response.data.mode) { |
| 165 | + savedMode = response.data.mode; |
| 166 | + } else if (response.mode) { |
| 167 | + savedMode = response.mode; |
| 168 | + } |
| 169 | + } |
| 170 | + |
| 171 | + applyMode(savedMode); |
| 172 | + |
| 173 | + var announcement = getAnnouncement(savedMode, response); |
| 174 | + if (announcement) { |
| 175 | + speak(announcement, 'polite'); |
| 176 | + } |
| 177 | + } |
| 178 | + |
| 179 | + function handleFailure() { |
| 180 | + applyMode(previousMode); |
| 181 | + var message = i18n.error || ''; |
| 182 | + |
| 183 | + if (toast && typeof toast.warning === 'function' && message) { |
| 184 | + toast.warning(message); |
| 185 | + } |
| 186 | + |
| 187 | + if (message) { |
| 188 | + speak(message, 'assertive'); |
| 189 | + } |
| 190 | + } |
| 191 | + |
| 192 | + if (request && typeof request.then === 'function') { |
| 193 | + request.then(function(response) { |
| 194 | + handleSuccess(response); |
| 195 | + }).catch(function() { |
| 196 | + handleFailure(); |
| 197 | + }).finally(function() { |
| 198 | + setPending(false); |
| 199 | + }); |
| 200 | + |
| 201 | + return; |
| 202 | + } |
| 203 | + |
| 204 | + if (request && typeof request.done === 'function') { |
| 205 | + request.done(function(response) { |
| 206 | + handleSuccess(response); |
| 207 | + }).fail(function() { |
| 208 | + handleFailure(); |
| 209 | + }).always(function() { |
| 210 | + setPending(false); |
| 211 | + }); |
| 212 | + |
| 213 | + return; |
| 214 | + } |
| 215 | + |
| 216 | + handleSuccess({ data: { mode: nextMode } }); |
| 217 | + setPending(false); |
| 218 | + }); |
| 219 | + |
| 220 | + return true; |
| 221 | + }; |
| 222 | + }; |
| 223 | +})); |
0 commit comments