| @@ -1,5 +1,5 @@ | ||
| 1 | -(function( $ ) { | |
| 1 | +(function ($) { | |
| 2 | 2 | 'use strict'; |
| 3 | 3 | |
| 4 | 4 | /** |
| 5 | 5 | * All of the code for your admin-facing JavaScript source |
| @@ -28,181 +28,204 @@ | ||
| 28 | 28 | * Although scripts in the WordPress core, Plugins and Themes may be |
| 29 | 29 | * practising this, we should strive to set a better example in our own work. |
| 30 | 30 | */ |
| 31 | 31 | |
| 32 | - jQuery(document).ready(function($) { | |
| 33 | - $('.event-ajax-indicator').on('click submit', function () { | |
| 32 | + jQuery(document).ready(function ($) { | |
| 33 | + $('.event-ajax-indicator').on('click submit', function () { | |
| 34 | 34 | if ($(this).find('.wdk-ajax-indicator').length) { |
| 35 | 35 | $(this).find('.wdk-ajax-indicator').removeClass('hidden') |
| 36 | - .removeClass('wdk-hidden'); | |
| 36 | + .removeClass('wdk-hidden'); | |
| 37 | 37 | $(this).find('.hidden-onloading').addClass('wdk-hidden'); |
| 38 | 38 | } |
| 39 | 39 | else { |
| 40 | 40 | $(this).parent().find('.wdk-ajax-indicator').removeClass('hidden'); |
| 41 | 41 | } |
| 42 | - }) | |
| 43 | - | |
| 44 | - /* date time fields init */ | |
| 45 | - if ($('.wdk-fielddate').length && typeof $.datepicker != 'undefined') { | |
| 46 | - | |
| 47 | - $('.wdk-fielddate').each(function () { | |
| 48 | - let dateFormat = script_parameters.format_date_js; | |
| 42 | + }) | |
| 43 | + | |
| 44 | + | |
| 45 | + $('.wdk-submit-loading').on('click', function () { | |
| 46 | + var form; | |
| 47 | + form = $(this).closest('form'); | |
| 48 | + | |
| 49 | + if ($(this).hasClass('wdk_btn_load_indicator')) { | |
| 50 | + console.log('disabled') | |
| 51 | + return false; | |
| 52 | + } | |
| 53 | + | |
| 54 | + $(this).addClass('wdk_btn_load_indicator disabled'); | |
| 55 | + }); | |
| 56 | + | |
| 57 | + $('.wdk-click-loading').on('click', function (e) { | |
| 58 | + $(this).addClass('wdk_btn_load_indicator').attr('disabled', 'disabled'); | |
| 59 | + }); | |
| 60 | + | |
| 61 | + /* date time fields init */ | |
| 62 | + if ($('.wdk-fielddate').length && typeof $.datepicker != 'undefined') { | |
| 63 | + | |
| 64 | + $('.wdk-fielddate').each(function () { | |
| 65 | + let dateFormat = script_parameters.format_date_js; | |
| 49 | 66 | var self = $(this); |
| 50 | 67 | |
| 51 | - if (self.attr('date-format')) | |
| 52 | - dateFormat = self.attr('date-format'); | |
| 68 | + if (self.attr('date-format')) | |
| 69 | + dateFormat = self.attr('date-format'); | |
| 53 | 70 | |
| 54 | - self.datepicker({ dateFormat: dateFormat, onSelect: function() { | |
| 71 | + self.datepicker({ | |
| 72 | + dateFormat: dateFormat, onSelect: function () { | |
| 55 | 73 | self.parent().find('.db-date').val(wdk_date_sql_normalize(self.val(), self)).trigger('input'); |
| 56 | 74 | } |
| 57 | - }).on( "change", function() { | |
| 58 | - self.parent().find('.db-date').val(wdk_date_sql_normalize(self.val(), self)); | |
| 75 | + }).on("change", function () { | |
| 76 | + if (self.val() == '') { | |
| 77 | + self.parent().find('.db-date').val(''); | |
| 78 | + } else { | |
| 79 | + self.parent().find('.db-date').val(wdk_date_sql_normalize(self.val(), self)); | |
| 80 | + } | |
| 59 | 81 | }); |
| 60 | - | |
| 61 | - if(self.parent().find('.db-date').val() == '' && false) { | |
| 62 | - self.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 63 | - } | |
| 64 | - }) | |
| 82 | + | |
| 83 | + if (self.parent().find('.db-date').val() == '' && false) { | |
| 84 | + self.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 85 | + } | |
| 86 | + }) | |
| 65 | 87 | }; |
| 66 | 88 | |
| 67 | - if ($('.wdk-fielddatetime').length && typeof $.datepicker != 'undefined') { | |
| 89 | + if ($('.wdk-fielddatetime').length && typeof $.datepicker != 'undefined') { | |
| 68 | 90 | |
| 69 | 91 | $('.wdk-fielddatetime').each(function () { |
| 70 | - let dateFormat = script_parameters.format_datetime_js; | |
| 92 | + let dateFormat = script_parameters.format_datetime_js; | |
| 71 | 93 | |
| 72 | 94 | var self = $(this); |
| 73 | - if (self.attr('date-format')) | |
| 74 | - dateFormat = self.attr('date-format'); | |
| 95 | + if (self.attr('date-format')) | |
| 96 | + dateFormat = self.attr('date-format'); | |
| 75 | 97 | |
| 76 | - self.datepicker({ dateFormat: dateFormat, onSelect: function() { | |
| 77 | - | |
| 98 | + self.datepicker({ | |
| 99 | + dateFormat: dateFormat, onSelect: function () { | |
| 78 | 100 | |
| 79 | - var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 80 | - if(self.parent().find('[name="hours_mask"]').val() !='') { | |
| 81 | - datetime += ' '+wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 82 | - } else { | |
| 83 | - datetime += ' 00'; | |
| 84 | - } | |
| 85 | - if(self.parent().find('[name="minutes_mask"]').val() !='') { | |
| 86 | - datetime += ':'+wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 87 | - } else { | |
| 88 | - datetime += ':00'; | |
| 89 | - } | |
| 90 | - datetime += ':00'; | |
| 91 | 101 | |
| 102 | + var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 103 | + if (self.parent().find('[name="hours_mask"]').val() != '') { | |
| 104 | + datetime += ' ' + wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 105 | + } else { | |
| 106 | + datetime += ' 00'; | |
| 107 | + } | |
| 108 | + if (self.parent().find('[name="minutes_mask"]').val() != '') { | |
| 109 | + datetime += ':' + wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 110 | + } else { | |
| 111 | + datetime += ':00'; | |
| 112 | + } | |
| 113 | + datetime += ':00'; | |
| 114 | + | |
| 92 | 115 | self.parent().find('.db-date').val(datetime).trigger('input'); |
| 93 | 116 | } |
| 94 | - }).on( "change", function() { | |
| 95 | - | |
| 96 | - var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 97 | - if(self.parent().find('[name="hours_mask"]').val() !='') { | |
| 98 | - datetime += ' '+wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 99 | - } else { | |
| 100 | - datetime += ' 00'; | |
| 101 | - } | |
| 102 | - if(self.parent().find('[name="minutes_mask"]').val() !='') { | |
| 103 | - datetime += ':'+wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 104 | - } else { | |
| 105 | - datetime += ':00'; | |
| 106 | - } | |
| 107 | - datetime += ':00'; | |
| 117 | + }).on("change", function () { | |
| 118 | + | |
| 119 | + var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 120 | + if (self.parent().find('[name="hours_mask"]').val() != '') { | |
| 121 | + datetime += ' ' + wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 122 | + } else { | |
| 123 | + datetime += ' 00'; | |
| 124 | + } | |
| 125 | + if (self.parent().find('[name="minutes_mask"]').val() != '') { | |
| 126 | + datetime += ':' + wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 127 | + } else { | |
| 128 | + datetime += ':00'; | |
| 129 | + } | |
| 130 | + datetime += ':00'; | |
| 108 | 131 | self.parent().find('.db-date').val(datetime).trigger('input'); |
| 109 | 132 | |
| 110 | 133 | }); |
| 111 | 134 | |
| 112 | - if(self.parent().find('.db-date').val() == '') { | |
| 113 | - self.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 114 | - } | |
| 135 | + if (self.parent().find('.db-date').val() == '') { | |
| 136 | + self.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 137 | + } | |
| 115 | 138 | |
| 116 | - self.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function(){ | |
| 117 | - var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 118 | - if(self.parent().find('[name="hours_mask"]').val() !='') { | |
| 119 | - datetime += ' '+wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 120 | - } else { | |
| 121 | - datetime += ' 00'; | |
| 122 | - } | |
| 123 | - if(self.parent().find('[name="minutes_mask"]').val() !='') { | |
| 124 | - datetime += ':'+wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 125 | - } else { | |
| 126 | - datetime += ':00'; | |
| 127 | - } | |
| 128 | - datetime += ':00'; | |
| 139 | + self.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function () { | |
| 140 | + var datetime = wdk_date_notime_sql_normalize(self.val(), self); | |
| 141 | + if (self.parent().find('[name="hours_mask"]').val() != '') { | |
| 142 | + datetime += ' ' + wdk_pad(self.parent().find('[name="hours_mask"]').val()); | |
| 143 | + } else { | |
| 144 | + datetime += ' 00'; | |
| 145 | + } | |
| 146 | + if (self.parent().find('[name="minutes_mask"]').val() != '') { | |
| 147 | + datetime += ':' + wdk_pad(self.parent().find('[name="minutes_mask"]').val()); | |
| 148 | + } else { | |
| 149 | + datetime += ':00'; | |
| 150 | + } | |
| 151 | + datetime += ':00'; | |
| 129 | 152 | self.parent().find('.db-date').val(datetime); |
| 130 | - }); | |
| 131 | - }) | |
| 153 | + }); | |
| 154 | + }) | |
| 132 | 155 | }; |
| 133 | 156 | |
| 134 | 157 | if ($('.wdk-fielddate_from').length && $('.wdk-fielddate_to').length && typeof $.datepicker != 'undefined') { |
| 135 | 158 | var dateFormat, from, to; |
| 136 | - const getDate = ( element ) => { | |
| 159 | + const getDate = (element) => { | |
| 137 | 160 | var date; |
| 138 | 161 | try { |
| 139 | - date = $.datepicker.parseDate( dateFormat, element.value ); | |
| 140 | - } catch( error ) { | |
| 162 | + date = $.datepicker.parseDate(dateFormat, element.value); | |
| 163 | + } catch (error) { | |
| 141 | 164 | date = null; |
| 142 | 165 | } |
| 143 | 166 | return date; |
| 144 | - } | |
| 167 | + } | |
| 145 | 168 | |
| 146 | 169 | dateFormat = script_parameters.format_date_js; |
| 147 | 170 | if ($('.wdk-fielddate_from').attr('date-format')) |
| 148 | - dateFormat = $('.wdk-fielddate_from').attr('date-format'); | |
| 171 | + dateFormat = $('.wdk-fielddate_from').attr('date-format'); | |
| 149 | 172 | |
| 150 | 173 | from = $('.wdk-fielddate_from') |
| 151 | 174 | .datepicker({ |
| 152 | 175 | dateFormat: dateFormat, |
| 153 | - onSelect: function( selectedDate ) { | |
| 154 | - to.datepicker("option", "minDate", selectedDate ); | |
| 155 | - setTimeout(function(){ | |
| 176 | + onSelect: function (selectedDate) { | |
| 177 | + to.datepicker("option", "minDate", selectedDate); | |
| 178 | + setTimeout(function () { | |
| 156 | 179 | to.datepicker('show'); |
| 157 | 180 | }, 16); |
| 158 | - | |
| 181 | + | |
| 159 | 182 | from.parent().find('.db-date').val(wdk_date_sql_normalize(from.val(), from)).trigger('input'); |
| 160 | 183 | wdk_date_add_hours(from); |
| 161 | - | |
| 184 | + | |
| 162 | 185 | } |
| 163 | - }).on( "change", function() { | |
| 186 | + }).on("change", function () { | |
| 164 | 187 | |
| 165 | 188 | }); |
| 166 | - | |
| 189 | + | |
| 167 | 190 | to = $('.wdk-fielddate_to').datepicker({ |
| 168 | 191 | dateFormat: dateFormat |
| 169 | 192 | }) |
| 170 | - .on( "change", function() { | |
| 171 | - from.datepicker( "option", "maxDate", getDate( this ) ); | |
| 193 | + .on("change", function () { | |
| 194 | + from.datepicker("option", "maxDate", getDate(this)); | |
| 172 | 195 | |
| 173 | - to.parent().find('.db-date').val(wdk_date_sql_normalize(to.val(), to)).trigger('input'); | |
| 174 | - wdk_date_add_hours(to); | |
| 175 | - }); | |
| 176 | - | |
| 177 | - if(to.parent().find('.db-date').val() == '') { | |
| 178 | - to.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 179 | - } | |
| 196 | + to.parent().find('.db-date').val(wdk_date_sql_normalize(to.val(), to)).trigger('input'); | |
| 197 | + wdk_date_add_hours(to); | |
| 198 | + }); | |
| 180 | 199 | |
| 181 | - if(from.parent().find('.db-date').val() == '') { | |
| 182 | - from.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 183 | - } | |
| 200 | + if (to.parent().find('.db-date').val() == '') { | |
| 201 | + to.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 202 | + } | |
| 184 | 203 | |
| 185 | - from.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function(){ | |
| 204 | + if (from.parent().find('.db-date').val() == '') { | |
| 205 | + from.parent().find('.db-date').val(wdk_date_sql_normalize()); | |
| 206 | + } | |
| 207 | + | |
| 208 | + from.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function () { | |
| 186 | 209 | wdk_date_add_hours(from); |
| 187 | 210 | }); |
| 188 | - | |
| 189 | - to.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function(){ | |
| 211 | + | |
| 212 | + to.parent().find('[name="hours_mask"],[name="minutes_mask"]').on('input', function () { | |
| 190 | 213 | wdk_date_add_hours(to); |
| 191 | 214 | }); |
| 192 | - | |
| 215 | + | |
| 193 | 216 | } |
| 194 | 217 | |
| 195 | - jQuery(document).ready( function($) { | |
| 196 | - $( "ul#adminmenu a[href*='wordpress.org/support/plugin/wpdirectorykit']" ).attr( 'target', '_blank' ); | |
| 197 | - $( "ul#adminmenu a[href*='wpdirectorykit.com/contact.html']" ).attr( 'target', '_blank' ); | |
| 198 | - $( "ul#adminmenu a[href*='wpdirectorykit.com/documentation']" ).attr( 'target', '_blank' ); | |
| 199 | - }); | |
| 218 | + jQuery(document).ready(function ($) { | |
| 219 | + $("ul#adminmenu a[href*='wordpress.org/support/plugin/wpdirectorykit']").attr('target', '_blank'); | |
| 220 | + $("ul#adminmenu a[href*='wpdirectorykit.com/contact.html']").attr('target', '_blank'); | |
| 221 | + $("ul#adminmenu a[href*='wpdirectorykit.com/documentation']").attr('target', '_blank'); | |
| 222 | + }); | |
| 200 | 223 | |
| 201 | 224 | |
| 202 | 225 | /* wdk pro feature ask */ |
| 203 | 226 | if (typeof $.fn.confirm == 'function') { |
| 204 | - $('.wdk-pro, .wdk-pro a, .wdk-pro button, .wdk-pro input').off().on('click', function(e){ | |
| 227 | + $('.wdk-pro, .wdk-pro a, .wdk-pro button, .wdk-pro input').off().on('click', function (e) { | |
| 205 | 228 | e.preventDefault(); |
| 206 | 229 | var self = jQuery(this) |
| 207 | 230 | jQuery.confirm({ |
| 208 | 231 | boxWidth: '400px', |
| @@ -207,9 +230,9 @@ | ||
| 207 | 230 | jQuery.confirm({ |
| 208 | 231 | boxWidth: '400px', |
| 209 | 232 | useBootstrap: false, |
| 210 | 233 | title: self.data('title'), |
| 211 | - content: self.data('content'), | |
| 234 | + content: self.data('content'), | |
| 212 | 235 | buttons: { |
| 213 | 236 | cancel: function () { |
| 214 | 237 | return true; |
| 215 | 238 | }, |
| @@ -216,9 +239,9 @@ | ||
| 216 | 239 | somethingElse: { |
| 217 | 240 | text: self.data('button-succuss'), |
| 218 | 241 | btnClass: 'btn-blue activate-now', |
| 219 | 242 | keys: ['enter', 'shift'], |
| 220 | - action: function(){ | |
| 243 | + action: function () { | |
| 221 | 244 | window.location = self.data('action'); |
| 222 | 245 | return false; |
| 223 | 246 | } |
| 224 | 247 | } |
| @@ -225,30 +248,66 @@ | ||
| 225 | 248 | } |
| 226 | 249 | }); |
| 227 | 250 | return false; |
| 228 | 251 | }); |
| 229 | - $('.wdk-pro, .wdk-pro a, .wdk-pro button, .wdk-pro input').on('focus', function(){ | |
| 230 | - $(this).trigger('blur'); | |
| 252 | + $('select.wdk-pro-select').off().on('input', function (e) { | |
| 253 | + | |
| 254 | + var self = jQuery(this); | |
| 255 | + var selected = self.find('option:selected'); | |
| 256 | + | |
| 257 | + if (selected.hasClass('pro-value')) { | |
| 258 | + jQuery.confirm({ | |
| 259 | + boxWidth: '400px', | |
| 260 | + useBootstrap: false, | |
| 261 | + title: self.data('title'), | |
| 262 | + content: self.data('content'), | |
| 263 | + buttons: { | |
| 264 | + cancel: function () { | |
| 265 | + return true; | |
| 266 | + }, | |
| 267 | + somethingElse: { | |
| 268 | + text: self.data('button-success'), | |
| 269 | + btnClass: 'btn-blue activate-now', | |
| 270 | + keys: ['enter', 'shift'], | |
| 271 | + action: function () { | |
| 272 | + window.location = self.data('action'); | |
| 273 | + return false; | |
| 274 | + } | |
| 275 | + } | |
| 276 | + } | |
| 277 | + }); | |
| 278 | + self.val("").change(); | |
| 279 | + } | |
| 280 | + }); | |
| 281 | + $('.wdk-pro,.wdk-pro a, .wdk-pro button, .wdk-pro input').on('focus', function () { | |
| 282 | + $(this).trigger('blur'); | |
| 231 | 283 | return false; |
| 232 | 284 | }); |
| 233 | 285 | } |
| 286 | + | |
| 287 | + if (jQuery('.wdk-tabs-navs').length) { | |
| 288 | + jQuery('.wdk-tabs-navs').find('label').on('click', function () { | |
| 289 | + jQuery(this).parent().find('label').removeClass('active'); | |
| 290 | + jQuery(this).addClass('active'); | |
| 291 | + }); | |
| 292 | + } | |
| 234 | 293 | }) |
| 235 | -})( jQuery ); | |
| 294 | +})(jQuery); | |
| 236 | 295 | |
| 237 | 296 | const wdk_pad = (num = '') => { |
| 238 | - return ('00'+num).slice(-2); | |
| 297 | + return ('00' + num).slice(-2); | |
| 239 | 298 | }; |
| 240 | 299 | |
| 241 | 300 | const wdk_date_add_hours = (selector = '') => { |
| 242 | - if(typeof selector !='undefined' && selector.parent().find('[name="hours_mask"]').length) { | |
| 301 | + if (typeof selector != 'undefined' && selector.parent().find('[name="hours_mask"]').length) { | |
| 243 | 302 | var datetime = wdk_date_notime_sql_normalize(selector.val(), selector); |
| 244 | - if(selector.parent().find('[name="hours_mask"]').val() !='') { | |
| 245 | - datetime += ' '+wdk_pad(selector.parent().find('[name="hours_mask"]').val()); | |
| 303 | + if (selector.parent().find('[name="hours_mask"]').val() != '') { | |
| 304 | + datetime += ' ' + wdk_pad(selector.parent().find('[name="hours_mask"]').val()); | |
| 246 | 305 | } else { |
| 247 | 306 | datetime += ' 00'; |
| 248 | 307 | } |
| 249 | - if(selector.parent().find('[name="minutes_mask"]').val() !='') { | |
| 250 | - datetime += ':'+wdk_pad(selector.parent().find('[name="minutes_mask"]').val()); | |
| 308 | + if (selector.parent().find('[name="minutes_mask"]').val() != '') { | |
| 309 | + datetime += ':' + wdk_pad(selector.parent().find('[name="minutes_mask"]').val()); | |
| 251 | 310 | } else { |
| 252 | 311 | datetime += ':00'; |
| 253 | 312 | } |
| 254 | 313 | datetime += ':00'; |
| @@ -256,46 +315,185 @@ | ||
| 256 | 315 | } |
| 257 | 316 | }; |
| 258 | 317 | |
| 259 | 318 | /* |
| 260 | - Convert date to sql format | |
| 319 | + Convert date to sql format | |
| 261 | 320 | |
| 262 | - @param string $date, string of date | |
| 321 | + @param string $date, string of date | |
| 263 | 322 | |
| 264 | - @return string normalize date or Current date/time | |
| 323 | + @return string normalize date or Current date/time | |
| 265 | 324 | */ |
| 266 | 325 | const wdk_date_sql_normalize = (date = '', datepicker_el = null) => { |
| 267 | - if(date == '') { | |
| 326 | + if (date == '') { | |
| 268 | 327 | var d = new Date(); |
| 269 | 328 | } else { |
| 270 | 329 | var d = new Date(date); |
| 271 | 330 | } |
| 272 | 331 | |
| 273 | - if(d == 'Invalid Date' && datepicker_el) { | |
| 332 | + if (d == 'Invalid Date' && datepicker_el) { | |
| 274 | 333 | var d = new Date(+(jQuery.datepicker.formatDate("@", datepicker_el.datepicker("getDate")))); |
| 275 | - } | |
| 276 | - | |
| 277 | - d = d.getUTCFullYear() + '-' + | |
| 278 | - wdk_pad(d.getMonth() + 1) + '-' + | |
| 279 | - wdk_pad(d.getDate()) + ' ' + | |
| 280 | - wdk_pad(d.getHours()) + ':' + | |
| 281 | - wdk_pad(d.getMinutes()) + ':' + | |
| 282 | - wdk_pad(d.getSeconds()); | |
| 334 | + } | |
| 335 | + | |
| 336 | + d = d.getUTCFullYear() + '-' + | |
| 337 | + wdk_pad(d.getMonth() + 1) + '-' + | |
| 338 | + wdk_pad(d.getDate()) + ' ' + | |
| 339 | + wdk_pad(d.getHours()) + ':' + | |
| 340 | + wdk_pad(d.getMinutes()) + ':' + | |
| 341 | + wdk_pad(d.getSeconds()); | |
| 283 | 342 | return d; |
| 284 | 343 | }; |
| 285 | 344 | |
| 286 | 345 | const wdk_date_notime_sql_normalize = (date = '', datepicker_el = null) => { |
| 287 | - if(date == '') { | |
| 346 | + if (date == '') { | |
| 288 | 347 | var d = new Date(); |
| 289 | 348 | } else { |
| 290 | 349 | var d = new Date(date); |
| 291 | 350 | } |
| 292 | 351 | |
| 293 | - if(d == 'Invalid Date' && datepicker_el) { | |
| 352 | + if (d == 'Invalid Date' && datepicker_el) { | |
| 294 | 353 | var d = new Date(+(jQuery.datepicker.formatDate("@", datepicker_el.datepicker("getDate")))); |
| 295 | - } | |
| 296 | - | |
| 297 | - d = d.getUTCFullYear() + '-' + | |
| 298 | - wdk_pad(d.getMonth() + 1) + '-' + | |
| 299 | - wdk_pad(d.getDate()); | |
| 354 | + } | |
| 355 | + | |
| 356 | + d = d.getUTCFullYear() + '-' + | |
| 357 | + wdk_pad(d.getMonth() + 1) + '-' + | |
| 358 | + wdk_pad(d.getDate()); | |
| 300 | 359 | return d; |
| 301 | 360 | }; |
| 361 | + | |
| 362 | + | |
| 363 | + | |
| 364 | +document.addEventListener('DOMContentLoaded', () => { | |
| 365 | + | |
| 366 | + class WDKListingSearch { | |
| 367 | + constructor(inputSelector, resultsSelector, executedId = null) { | |
| 368 | + this.executedId = executedId; | |
| 369 | + this.input = document.querySelector(inputSelector); | |
| 370 | + this.results = document.querySelector(resultsSelector); | |
| 371 | + this.timer = null; | |
| 372 | + this.controller = null; | |
| 373 | + this.init(); | |
| 374 | + } | |
| 375 | + | |
| 376 | + init() { | |
| 377 | + if (!this.input || !this.results) return; | |
| 378 | + | |
| 379 | + this.input.addEventListener('input', () => this.onInput()); | |
| 380 | + document.addEventListener('click', (e) => this.onDocumentClick(e)); | |
| 381 | + this.input.addEventListener('focus', () => this.onFocus()); | |
| 382 | + this.input.addEventListener('keydown', (e) => this.onKeyDown(e)); | |
| 383 | + } | |
| 384 | + | |
| 385 | + onInput() { | |
| 386 | + clearTimeout(this.timer); | |
| 387 | + | |
| 388 | + const keyword = this.input.value.trim(); | |
| 389 | + | |
| 390 | + if (this.controller) { | |
| 391 | + this.controller.abort(); | |
| 392 | + } | |
| 393 | + | |
| 394 | + if (keyword.length < 2) { | |
| 395 | + this.results.replaceChildren(); | |
| 396 | + this.results.hidden = true; | |
| 397 | + return; | |
| 398 | + } | |
| 399 | + | |
| 400 | + this.timer = setTimeout(() => this.fetchResults(keyword), 250); | |
| 401 | + } | |
| 402 | + | |
| 403 | + async fetchResults(keyword) { | |
| 404 | + this.controller = new AbortController(); | |
| 405 | + | |
| 406 | + // Show dropdown + loading | |
| 407 | + this.results.hidden = false; | |
| 408 | + this.results.innerHTML = ` | |
| 409 | + <div class="wdk-search-loading"> | |
| 410 | + <span class="spinner is-active"></span> | |
| 411 | + Searching... | |
| 412 | + </div> | |
| 413 | + `; | |
| 414 | + | |
| 415 | + try { | |
| 416 | + const response = await fetch( | |
| 417 | + wdk_script_parameters.wpApiSettings.root + 'wdk/v1/listing/autosuggestion', | |
| 418 | + { | |
| 419 | + method: 'POST', | |
| 420 | + credentials: 'same-origin', | |
| 421 | + headers: { | |
| 422 | + 'Content-Type': 'application/json', | |
| 423 | + 'X-WP-Nonce': wdk_script_parameters.wpApiSettings.nonce | |
| 424 | + }, | |
| 425 | + body: JSON.stringify({ | |
| 426 | + keyword: keyword, | |
| 427 | + executedId: this.executedId | |
| 428 | + }), | |
| 429 | + signal: this.controller.signal | |
| 430 | + } | |
| 431 | + ); | |
| 432 | + | |
| 433 | + const json = await response.json(); | |
| 434 | + | |
| 435 | + this.results.replaceChildren(); | |
| 436 | + | |
| 437 | + if (!json.success || !json.data.length) { | |
| 438 | + this.results.innerHTML = ` | |
| 439 | + <div class="wdk-search-empty"> | |
| 440 | + No results found | |
| 441 | + </div> | |
| 442 | + `; | |
| 443 | + return; | |
| 444 | + } | |
| 445 | + | |
| 446 | + json.data.forEach(item => { | |
| 447 | + const a = document.createElement('a'); | |
| 448 | + a.href = item.edit ? decodeURIComponent(item.edit) : '#'; | |
| 449 | + a.className = 'wdk-search-item'; | |
| 450 | + a.textContent = item.title; | |
| 451 | + | |
| 452 | + this.results.appendChild(a); | |
| 453 | + }); | |
| 454 | + | |
| 455 | + } catch (e) { | |
| 456 | + if (e.name === 'AbortError') { | |
| 457 | + return; | |
| 458 | + } | |
| 459 | + this.results.innerHTML = ` | |
| 460 | + <div class="wdk-search-empty"> | |
| 461 | + ${e.message ? 'Error: ' + e.message : 'An unexpected error occurred'} | |
| 462 | + </div> | |
| 463 | + `; | |
| 464 | + this.results.innerHTML = ` | |
| 465 | + <div class="wdk-search-empty"> | |
| 466 | + Search failed | |
| 467 | + </div> | |
| 468 | + `; | |
| 469 | + } | |
| 470 | + } | |
| 471 | + | |
| 472 | + onDocumentClick(e) { | |
| 473 | + if (!e.target.closest('.wdk-toolbar-search')) { | |
| 474 | + this.results.hidden = true; | |
| 475 | + } | |
| 476 | + } | |
| 477 | + | |
| 478 | + onFocus() { | |
| 479 | + if (this.results.children.length) { | |
| 480 | + this.results.hidden = false; | |
| 481 | + } | |
| 482 | + } | |
| 483 | + | |
| 484 | + onKeyDown(e) { | |
| 485 | + if (e.key === 'Escape') { | |
| 486 | + this.results.hidden = true; | |
| 487 | + } | |
| 488 | + } | |
| 489 | + } | |
| 490 | + | |
| 491 | + // Initialize on DOMContentLoaded | |
| 492 | + const wdkListingSearchElem = document.getElementById('wdk-listing-search'); | |
| 493 | + if (wdkListingSearchElem) { | |
| 494 | + new WDKListingSearch('#wdk-listing-search', '.wdk-search-results', wdkListingSearchElem.getAttribute('idexecuted')); | |
| 495 | + } | |
| 496 | +}); | |
| 497 | + | |
| 498 | + | |
| 499 | + | |
