| Conditions | 1 |
| Paths | 4 |
| Total Lines | 434 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import ImageUpload from './imageupload.js'; |
||
| 6 | var DFI = function(dfiIndex, parentForm) { |
||
| 7 | |||
| 8 | /** |
||
| 9 | * dfi variable is created to represent DFI instance. |
||
| 10 | */ |
||
| 11 | var dfi = this; |
||
| 12 | |||
| 13 | /** |
||
| 14 | * index variable is created to represent DFI index. |
||
| 15 | */ |
||
| 16 | var index = dfiIndex; |
||
| 17 | |||
| 18 | /** |
||
| 19 | * id variable is create to represent id of the DFI |
||
| 20 | */ |
||
| 21 | var id = '#item-option-origin-' + index; |
||
| 22 | |||
| 23 | /** |
||
| 24 | * element variable is created to be a master element of the DFI, all the variable will be found via element variable. |
||
| 25 | */ |
||
| 26 | var element = $(id); |
||
| 27 | |||
| 28 | /** |
||
| 29 | * postType variable is created to represent Post Type part of the DFI. |
||
| 30 | */ |
||
| 31 | var postType; |
||
| 32 | |||
| 33 | /** |
||
| 34 | * taxonomies variable is created to represent all Taxonomy parts of the DFI. |
||
| 35 | */ |
||
| 36 | var taxonomies; |
||
| 37 | |||
| 38 | /** |
||
| 39 | * imageUpload variable is created to represent ImageUpload part of the DFI. |
||
| 40 | */ |
||
| 41 | var imageUpload; |
||
| 42 | |||
| 43 | /** |
||
| 44 | * deleteButton variable is created to represent Delete Buton of the DFI. |
||
| 45 | */ |
||
| 46 | var deleteButton; |
||
| 47 | |||
| 48 | /** |
||
| 49 | * errors variable is temporary variable to store all errors of the DFI. |
||
| 50 | */ |
||
| 51 | var errors = []; |
||
| 52 | |||
| 53 | /** |
||
| 54 | * layout variable is created to handle all rendering layout stuff for the DFI. |
||
| 55 | */ |
||
| 56 | var layout = new Layout(); |
||
| 57 | |||
| 58 | /** |
||
| 59 | * Initialize actions when create a instance of the DFI. |
||
| 60 | */ |
||
| 61 | this.init = function() { |
||
| 62 | /* Assign all exist layout to corresponding variable. */ |
||
| 63 | dfi._checkLayoutAndAssignVariable(); |
||
| 64 | /** |
||
| 65 | * Check if the DFI has a Post Type part. |
||
| 66 | * If yes, Bind on selected feature when user changed the value of the post type. |
||
| 67 | */ |
||
| 68 | if(typeof postType !== 'undefined') { dfi._onSelectedPostType(); } |
||
| 69 | /* |
||
| 70 | * Check if the DFI has a Delete Button. |
||
| 71 | * If yes, Bind delete feature when user click on Delete Button. |
||
| 72 | */ |
||
| 73 | if(typeof deleteButton !== 'undefined') { dfi.onDelete(); } |
||
| 74 | } |
||
| 75 | |||
| 76 | /** |
||
| 77 | * Check all exist parts and assign it to corresponding variable. |
||
| 78 | */ |
||
| 79 | this._checkLayoutAndAssignVariable = function() { |
||
| 80 | /* First: Check if PostType part exist. |
||
| 81 | * If yes, assign PostType part to postType variable. |
||
| 82 | */ |
||
| 83 | if(dfi._checkLayoutExist('.post-type-row')) { |
||
| 84 | postType = new PostType(id+' > .post-type-row'); |
||
| 85 | } |
||
| 86 | |||
| 87 | /* Second: Check if Taxonomy parts exist. |
||
| 88 | * If yes, assign Taxonomy part to taxonomies variable. |
||
| 89 | */ |
||
| 90 | if(dfi._checkLayoutExist('.taxonomy-row')) { |
||
| 91 | var _taxonomies = []; |
||
| 92 | $(id+' > .taxonomy-row').each(function(index, value){ |
||
| 93 | _taxonomies.push(new Taxonomy(value)); |
||
| 94 | }); |
||
| 95 | taxonomies = _taxonomies; |
||
| 96 | } |
||
| 97 | |||
| 98 | |||
| 99 | /* Third: Check if ImageUpload part exist. |
||
| 100 | * If yes, assign ImageUpload part to imageUpload variable. |
||
| 101 | */ |
||
| 102 | if(dfi._checkLayoutExist('.image-upload-row')) { |
||
| 103 | imageUpload = new ImageUpload(id+' > .image-upload-row'); |
||
| 104 | } |
||
| 105 | |||
| 106 | /* Fourth: Check if Delete Button exist. |
||
| 107 | * If yes, assign deleteButton variable to Delete Button. |
||
| 108 | */ |
||
| 109 | if(dfi._checkLayoutExist('.btn-remove')) { |
||
| 110 | deleteButton = $(id+' > .btn-remove'); |
||
| 111 | } |
||
| 112 | } |
||
| 113 | |||
| 114 | /** |
||
| 115 | * Validate input data of the DFI. |
||
| 116 | */ |
||
| 117 | this.validate = function() { |
||
| 118 | /** |
||
| 119 | * Check if PostType value is exist. |
||
| 120 | * If PostType value is exist, check if ImageUpload value is exist. |
||
| 121 | * If ImageUpload value is not exist, store an error in errors variable, then return false. |
||
| 122 | * If PostType value is not exist, store an error in errors variable, then return false. |
||
| 123 | */ |
||
| 124 | if(!postType.getValue()) { |
||
| 125 | dfi._storeError('Post Type value on DFI ' + index + ' must be not empty'); |
||
| 126 | return false; |
||
| 127 | } else { |
||
| 128 | if(!imageUpload.getId() || !imageUpload.getSource()) { |
||
| 129 | dfi._storeError('Uploaded image value on DFI ' + index + ' must be not empty'); |
||
| 130 | return false; |
||
| 131 | } |
||
| 132 | } |
||
| 133 | return true; |
||
| 134 | } |
||
| 135 | |||
| 136 | /** |
||
| 137 | * Store error in errors variable. |
||
| 138 | */ |
||
| 139 | this._storeError = function(error) { |
||
| 140 | |||
| 141 | errors.push(error); |
||
| 142 | |||
| 143 | } |
||
| 144 | |||
| 145 | /** |
||
| 146 | * Truncate errors variable to store new errors of the DFI. |
||
| 147 | */ |
||
| 148 | this.truncateErrors = function() { |
||
| 149 | |||
| 150 | errors = []; |
||
| 151 | |||
| 152 | } |
||
| 153 | |||
| 154 | /** |
||
| 155 | * Return the errors of the DFI. |
||
| 156 | */ |
||
| 157 | this.getErrors = function() { |
||
| 158 | /* Return the errors variable. */ |
||
| 159 | return errors; |
||
| 160 | } |
||
| 161 | |||
| 162 | |||
| 163 | /** |
||
| 164 | * Bind delete feature when click on Delete Button. |
||
| 165 | */ |
||
| 166 | this.onDelete = function() { |
||
| 167 | deleteButton.click(function(event){ |
||
| 168 | /* Delete the dfi element. */ |
||
| 169 | event.preventDefault(); |
||
| 170 | element.slideUp( '300', function() { |
||
| 171 | element.remove(); |
||
| 172 | /** |
||
| 173 | * Remove dfi from parent form. |
||
| 174 | * Note that javascript array index start from 0, so we need to minus 1 |
||
| 175 | */ |
||
| 176 | parentForm.removeDFI(index - 1); |
||
| 177 | }); |
||
| 178 | }); |
||
| 179 | } |
||
| 180 | |||
| 181 | /** |
||
| 182 | * Actions when user select a post type. |
||
| 183 | */ |
||
| 184 | this._onSelectedPostType = function() { |
||
| 185 | /* Bind actions when user select a post type. */ |
||
| 186 | postType.selectElement.change(function() { |
||
| 187 | /* First: Delete related layout. */ |
||
| 188 | dfi._deleteLayouts([taxonomies, imageUpload]); |
||
| 189 | /* Second: Truncate related variables. */ |
||
| 190 | dfi._truncateVariables(['taxonomies', 'imageUpload']); |
||
| 191 | /** |
||
| 192 | * Third: |
||
| 193 | * Check if selected value is not the blank value |
||
| 194 | * If yes: |
||
| 195 | * Get related layout. |
||
| 196 | * Add layout just received to the bottom of the dfi. |
||
| 197 | * Redo checkLayoutAndAssignVariable. |
||
| 198 | */ |
||
| 199 | if(postType.getValue()) { |
||
| 200 | layout.getRelatedDFILayout(index, postType.getValue()) |
||
| 201 | .done(dfi._addLayout) |
||
| 202 | .then(dfi._checkLayoutAndAssignVariable); |
||
| 203 | } |
||
| 204 | }); |
||
| 205 | } |
||
| 206 | |||
| 207 | /** |
||
| 208 | * Get Related Layout, related layout include taxonomies, image upload and image size. |
||
| 209 | */ |
||
| 210 | this._getRelatedLayout = function() { |
||
| 211 | return $.ajax({ |
||
| 212 | url: '/wp-admin/admin-ajax.php?action=wpdfi_get_related_layout', |
||
| 213 | method: 'POST', |
||
| 214 | data: { |
||
| 215 | post_type: postType.getValue() |
||
| 216 | }, |
||
| 217 | }) |
||
| 218 | } |
||
| 219 | |||
| 220 | /** |
||
| 221 | * Add new layout to the bottom of the DFI. |
||
| 222 | */ |
||
| 223 | this._addLayout = function(layout) { |
||
| 224 | element.append(JSON.parse(layout)); |
||
| 225 | } |
||
| 226 | |||
| 227 | /** |
||
| 228 | * Truncate DFI Variables. |
||
| 229 | */ |
||
| 230 | this._truncateVariables = function(variables) { |
||
| 231 | /** |
||
| 232 | * We will need to modify the variable of the object, so we need to do something like pointer in this situation. |
||
| 233 | * Unfortunately, there is no pointer in javascript. So I will use eval() function in this situation. |
||
| 234 | */ |
||
| 235 | |||
| 236 | /* Loop through each element of variables array. */ |
||
| 237 | variables.forEach(function(_var) { |
||
| 238 | /* Check if the variable is not undefined. */ |
||
| 239 | if(eval("typeof " + _var + " != 'undefined'")) { |
||
|
|
|||
| 240 | eval(_var + ' = null'); |
||
| 241 | } |
||
| 242 | |||
| 243 | }); |
||
| 244 | } |
||
| 245 | |||
| 246 | /** |
||
| 247 | * Delete DFI Layouts. |
||
| 248 | */ |
||
| 249 | this._deleteLayouts = function(variables) { |
||
| 250 | |||
| 251 | /* Loop through each element of variables array. */ |
||
| 252 | variables.forEach(function(_var) { |
||
| 253 | /* Check if the variable is not undefined. */ |
||
| 254 | if(typeof _var !== 'undefined' && _var) { |
||
| 255 | /* Delete part */ |
||
| 256 | /* Check if variable can be looped or not. */ |
||
| 257 | if(typeof _var.length !== 'undefined') { |
||
| 258 | /* If yes, loop through each element and call to delete function. */ |
||
| 259 | _var.forEach(function(objectElement) { |
||
| 260 | objectElement.delete(); |
||
| 261 | }) |
||
| 262 | /* If variable can not be looped, call to delete function. */ |
||
| 263 | } else { |
||
| 264 | _var.delete(); |
||
| 265 | } |
||
| 266 | } |
||
| 267 | }); |
||
| 268 | } |
||
| 269 | |||
| 270 | /** |
||
| 271 | * Check if layout exist or not via class name. |
||
| 272 | */ |
||
| 273 | this._checkLayoutExist = function(className) { |
||
| 274 | if(element.find(className).length > 0) { return true; } |
||
| 275 | return false; |
||
| 276 | } |
||
| 277 | |||
| 278 | /** |
||
| 279 | * Get ID of the dfi. |
||
| 280 | */ |
||
| 281 | this.getId = function() { |
||
| 282 | |||
| 283 | return id; |
||
| 284 | |||
| 285 | } |
||
| 286 | |||
| 287 | /** |
||
| 288 | * Get data index of the dfi. |
||
| 289 | */ |
||
| 290 | this.getIndex = function() { |
||
| 291 | |||
| 292 | return index; |
||
| 293 | |||
| 294 | } |
||
| 295 | |||
| 296 | /** |
||
| 297 | * Remove delete button. |
||
| 298 | */ |
||
| 299 | this.removeDeleteButton = function() { |
||
| 300 | |||
| 301 | dfi._removeDeleteButtonEl(); |
||
| 302 | |||
| 303 | } |
||
| 304 | |||
| 305 | /** |
||
| 306 | * Remove delete button element. |
||
| 307 | */ |
||
| 308 | this._removeDeleteButtonEl = function() { |
||
| 309 | |||
| 310 | deleteButton.remove(); |
||
| 311 | dfi._truncateVariables(['deleteButton']); |
||
| 312 | |||
| 313 | } |
||
| 314 | |||
| 315 | /** |
||
| 316 | * Add new delete button. |
||
| 317 | */ |
||
| 318 | this.addDeleteButton = function() { |
||
| 319 | |||
| 320 | dfi._addDeleteButtonEl(); |
||
| 321 | dfi._updateDeleteButtonVar(); |
||
| 322 | |||
| 323 | } |
||
| 324 | |||
| 325 | /** |
||
| 326 | * Add new delete button element to the dfi. |
||
| 327 | */ |
||
| 328 | this._addDeleteButtonEl = function() { |
||
| 329 | |||
| 330 | var newDeleteButton = layout.getDeleteButtonLayout(); |
||
| 331 | console.log(newDeleteButton); |
||
| 332 | element.append(newDeleteButton); |
||
| 333 | |||
| 334 | } |
||
| 335 | |||
| 336 | /** |
||
| 337 | * Update delete button variable. |
||
| 338 | */ |
||
| 339 | this._updateDeleteButtonVar = function() { |
||
| 340 | |||
| 341 | deleteButton = element.find('.btn-remove'); |
||
| 342 | |||
| 343 | } |
||
| 344 | |||
| 345 | this.reindex = function(newIndex) { |
||
| 346 | var oldIndex = index; |
||
| 347 | index = newIndex; |
||
| 348 | dfi._updateID(); |
||
| 349 | dfi._updateElement(); |
||
| 350 | dfi._updateDataIndex(); |
||
| 351 | dfi._updateInput(oldIndex, newIndex); |
||
| 352 | dfi._updateSelect(oldIndex, newIndex); |
||
| 353 | dfi._updateLabel(); |
||
| 354 | dfi._truncateVariables(['postType', 'taxonomies', 'imageUpload', 'deleteButton']); |
||
| 355 | dfi._checkLayoutAndAssignVariable(); |
||
| 356 | |||
| 357 | } |
||
| 358 | |||
| 359 | /** |
||
| 360 | * Update ID of the dfi. |
||
| 361 | */ |
||
| 362 | this._updateID = function() { |
||
| 363 | |||
| 364 | id = '#item-option-origin-' + index; |
||
| 365 | |||
| 366 | } |
||
| 367 | |||
| 368 | /** |
||
| 369 | * Update Element of the dfi. |
||
| 370 | */ |
||
| 371 | this._updateElement = function() { |
||
| 372 | var idVal = id.replace('#', ''); |
||
| 373 | element.attr('id', idVal); |
||
| 374 | element = $(id); |
||
| 375 | |||
| 376 | } |
||
| 377 | |||
| 378 | /** |
||
| 379 | * Update attribute data-index of the dfi. |
||
| 380 | */ |
||
| 381 | this._updateDataIndex = function() { |
||
| 382 | |||
| 383 | element.attr('data-index', index); |
||
| 384 | |||
| 385 | } |
||
| 386 | |||
| 387 | /** |
||
| 388 | * Reindex input of the dfi. |
||
| 389 | */ |
||
| 390 | this._updateInput = function(oldIndex, newIndex) { |
||
| 391 | |||
| 392 | element.find('input').each(function(){ |
||
| 393 | var oldName = $(this).attr('name'); |
||
| 394 | var validName = (typeof oldName != 'undefined'); |
||
| 395 | /* Need to check name is valid or not before update the new name for the input. */ |
||
| 396 | if(validName) { |
||
| 397 | /* Get the new name of the input by replace old index with new index. */ |
||
| 398 | var newName = oldName.replace(oldIndex, newIndex); |
||
| 399 | /* Update new name for the input. */ |
||
| 400 | $(this).attr('name', newName); |
||
| 401 | } |
||
| 402 | |||
| 403 | }); |
||
| 404 | |||
| 405 | } |
||
| 406 | |||
| 407 | /** |
||
| 408 | * Reindex select input of the dfi. |
||
| 409 | */ |
||
| 410 | this._updateSelect = function(oldIndex, newIndex) { |
||
| 411 | |||
| 412 | element.find('select').each(function(){ |
||
| 413 | |||
| 414 | var oldName = $(this).attr('name'); |
||
| 415 | var validName = (typeof oldName != 'undefined'); |
||
| 416 | /* Need to check name is valid or not before update the new name for the select input. */ |
||
| 417 | if(validName) { |
||
| 418 | /* Get the new name of the select input by replace old index with new index. */ |
||
| 419 | var newName = oldName.replace(oldIndex, newIndex); |
||
| 420 | /* Update new name for the select input. */ |
||
| 421 | $(this).attr('name', newName); |
||
| 422 | } |
||
| 423 | }); |
||
| 424 | |||
| 425 | }; |
||
| 426 | |||
| 427 | /** |
||
| 428 | * Update dfi label with new index. |
||
| 429 | */ |
||
| 430 | this._updateLabel = function() { |
||
| 431 | var labelClass = '.dfi-label'; |
||
| 432 | var label = element.find(labelClass); |
||
| 433 | /* Remove current label. */ |
||
| 434 | label.empty(); |
||
| 435 | /* Update new label. */ |
||
| 436 | label.text('DFI ' + index); |
||
| 437 | |||
| 438 | } |
||
| 439 | } |
||
| 440 | |||
| 443 |