dfi.js ➔ ... ➔ element.slideUp(ꞌ300ꞌ) - Code Metrics - Inspection of "Merge pull request #61 from buiquangduc/developmen..." - buiquangduc/WP_Default_Feature_Image - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( d0f3cd...eb99f6 )

by Bui Quang

created 2018-01-19 03:39 UTC

dfi.js ➔ ... ➔ element.slideUp(ꞌ300ꞌ) A

↳ Parent: dfi.js ➔ ... ➔ deleteButton.click

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	1
c	1
b	0
f	0
nc	1
nop	0
dl	0
loc	8
rs	9.4285

import ImageUpload from './imageupload.js';
import Taxonomy from './taxonomy.js';
import PostType from './posttype.js';
import Layout from './layout.js';

var DFI = function(dfiIndex, parentForm) {

    /**
     * dfi variable is created to represent DFI instance.
     */
    var dfi = this;

    /**
     * index variable is created to represent DFI index.
     */
    var index = dfiIndex;

    /**
     * id variable is create to represent id of the DFI
     */
    var id = '#item-option-origin-' + index;

    /**
     * element variable is created to be a master element of the DFI, all the variable will be found via element variable.
     */
    var element = $(id);

    /**
     * postType variable is created to represent Post Type part of the DFI.
     */
    var postType;

    /**
     * taxonomies variable is created to represent all Taxonomy parts of the DFI.
     */
    var taxonomies;

    /**
     * imageUpload variable is created to represent ImageUpload part of the DFI.
     */
    var imageUpload;

    /**
     * deleteButton variable is created to represent Delete Buton of the DFI.
     */
    var deleteButton;

    /**
     * errors variable is temporary variable to store all errors of the DFI.
     */ 
    var errors = [];

    /** 
     * layout variable is created to handle all rendering layout stuff for the DFI.
     */
    var layout = new Layout();

    /**
     * Initialize actions when create a instance of the DFI.
     */
    this.init = function() {
        /* Assign all exist layout to corresponding variable. */
        dfi._checkLayoutAndAssignVariable();
        /**
         * Check if the DFI has a Post Type part.
         *    If yes, Bind on selected feature when user changed the value of the post type.
         */
        if(typeof postType !== 'undefined') { dfi._onSelectedPostType(); }
        /* 
         * Check if the DFI has a Delete Button.
         *    If yes, Bind delete feature when user click on Delete Button.
         */
        if(typeof deleteButton !== 'undefined') { dfi.onDelete(); }
    }

    /**
     * Check all exist parts and assign it to corresponding variable.
     */
    this._checkLayoutAndAssignVariable = function() {
        /* First: Check if PostType part exist.
         *    If yes, assign PostType part to postType variable.
         */
        if(dfi._checkLayoutExist('.post-type-row')) {
            postType = new PostType(id+' > .post-type-row');
        }

        /* Second: Check if Taxonomy parts exist.
         *    If yes, assign Taxonomy part to taxonomies variable.
         */
        if(dfi._checkLayoutExist('.taxonomy-row')) {
            var _taxonomies = [];
            $(id+' > .taxonomy-row').each(function(index, value){
                _taxonomies.push(new Taxonomy(value));
            });      
            taxonomies = _taxonomies;
        }
            

        /* Third: Check if ImageUpload part exist.
         *    If yes, assign ImageUpload part to imageUpload variable.
         */
        if(dfi._checkLayoutExist('.image-upload-row')) {
            imageUpload = new ImageUpload(id+' > .image-upload-row');
        }

        /* Fourth: Check if Delete Button exist.
         *    If yes, assign deleteButton variable to Delete Button.
         */
        if(dfi._checkLayoutExist('.btn-remove')) {
            deleteButton = $(id+' > .btn-remove');
        }
    }

    /**
     * Validate input data of the DFI.
     */
    this.validate = function() {
        /**
         * Check if PostType value is exist.
         *    If PostType value is exist, check if ImageUpload value is exist.
         *       If ImageUpload value is not exist, store an error in errors variable, then return false.
         *    If PostType value is not exist, store an error in errors variable, then return false.
         */
        if(!postType.getValue()) {
            dfi._storeError('Post Type value on DFI ' + index + ' must be not empty');
            return false;
        } else {
            if(!imageUpload.getId() || !imageUpload.getSource()) {
                dfi._storeError('Uploaded image value on DFI ' + index + ' must be not empty');
                return false;
            }
        }
        return true;
    }

    /**
     * Store error in errors variable.
     */
    this._storeError = function(error) {

        errors.push(error);
    
    }

    /**
     * Truncate errors variable to store new errors of the DFI.
     */
    this.truncateErrors = function() {
    
        errors = [];
    
    }

    /**
     * Return the errors of the DFI.
     */
    this.getErrors = function() {
        /* Return the errors variable. */
        return errors;
    }


    /**
     * Bind delete feature when click on Delete Button.
     */
    this.onDelete = function() {
        deleteButton.click(function(event){
            /* Delete the dfi element. */
            event.preventDefault();
            element.slideUp( '300', function() {
                element.remove();
                /** 
                 * Remove dfi from parent form.
                 * Note that javascript array index start from 0, so we need to minus 1
                 */
                parentForm.removeDFI(index - 1);
            });
        });
    }

    /**
     * Actions when user select a post type.
     */
    this._onSelectedPostType = function() {
        /* Bind actions when user select a post type. */
        postType.selectElement.change(function() { 
            /* First: Delete related layout. */
            dfi._deleteLayouts([taxonomies, imageUpload]);
            /* Second: Truncate related variables. */
            dfi._truncateVariables(['taxonomies', 'imageUpload']);
            /**
             * Third: 
             *    Check if selected value is not the blank value
             *    If yes:
             *        Get related layout.
             *        Add layout just received to the bottom of the dfi.
             *        Redo checkLayoutAndAssignVariable.
             */
            if(postType.getValue()) {
                layout.getRelatedDFILayout(index, postType.getValue())
                      .done(dfi._addLayout)
                      .then(dfi._checkLayoutAndAssignVariable);
            }
        });
    }

    /**
     * Get Related Layout, related layout include taxonomies, image upload and image size.
     */
    this._getRelatedLayout = function() {
        return $.ajax({
            url: '/wp-admin/admin-ajax.php?action=wpdfi_get_related_layout',
            method: 'POST',
            data: {
                post_type: postType.getValue()
            },
        })
    }

    /**
     * Add new layout to the bottom of the DFI.
     */
    this._addLayout = function(layout) {
        element.append(JSON.parse(layout));
    }

    /**
     * Truncate DFI Variables.
     */
    this._truncateVariables = function(variables) {
        /**
         * We will need to modify the variable of the object, so we need to do something like pointer in this situation.
         * Unfortunately, there is no pointer in javascript. So I will use eval() function in this situation.
         */

        /* Loop through each element of variables array. */
        variables.forEach(function(_var) {
            /* Check if the variable is not undefined. */
            if(eval("typeof " + _var + " != 'undefined'")) {

                eval(_var + ' = null');

            }
            
        });
    } 

    /**
     * Delete DFI Layouts.
     */
    this._deleteLayouts = function(variables) {

        /* Loop through each element of variables array. */
        variables.forEach(function(_var) {
            /* Check if the variable is not undefined. */
            if(typeof _var !== 'undefined' && _var) {
                /* Delete part */
                /* Check if variable can be looped or not. */
                if(typeof _var.length !== 'undefined') {
                    /* If yes, loop through each element and call to delete function. */
                    _var.forEach(function(objectElement) {
                        objectElement.delete();
                    })
                /* If variable can not be looped, call to delete function. */
                } else {
                    _var.delete();
                }   
            }
        });
    }

    /**
     * Check if layout exist or not via class name.
     */
    this._checkLayoutExist = function(className) {
        if(element.find(className).length > 0) { return true; }
        return false;
    } 

    /**
     * Get ID of the dfi.
     */
    this.getId = function() {

        return id;

    }

    /**
     * Get data index of the dfi.
     */
    this.getIndex = function() {

        return index;

    }

    /**
     * Remove delete button.
     */ 
    this.removeDeleteButton = function() {

        dfi._removeDeleteButtonEl();

    }

    /** 
     * Remove delete button element.
     */
    this._removeDeleteButtonEl = function() {

        deleteButton.remove();
        dfi._truncateVariables(['deleteButton']);

    }

    /**
     * Add new delete button.
     */
    this.addDeleteButton = function() {

        dfi._addDeleteButtonEl();
        dfi._updateDeleteButtonVar();

    }

    /**
     * Add new delete button element to the dfi.
     */
    this._addDeleteButtonEl = function() {

        var newDeleteButton = layout.getDeleteButtonLayout();
        console.log(newDeleteButton);

        element.append(newDeleteButton);

    }

    /**
     * Update delete button variable.
     */
    this._updateDeleteButtonVar = function() {

        deleteButton = element.find('.btn-remove');
    
    }

    this.reindex = function(newIndex) {
        var oldIndex = index;
        index = newIndex;
        dfi._updateID();
        dfi._updateElement();
        dfi._updateDataIndex();
        dfi._updateInput(oldIndex, newIndex);
        dfi._updateSelect(oldIndex, newIndex);
        dfi._updateLabel();
        dfi._truncateVariables(['postType', 'taxonomies', 'imageUpload', 'deleteButton']);
        dfi._checkLayoutAndAssignVariable();

    }

    /**
     * Update ID of the dfi.
     */
    this._updateID = function() {

        id = '#item-option-origin-' + index;

    }

    /**
     * Update Element of the dfi.
     */
    this._updateElement = function() {
        var idVal = id.replace('#', '');
        element.attr('id', idVal);
        element = $(id);

    }

    /**
     * Update attribute data-index of the dfi.
     */
    this._updateDataIndex = function() {

        element.attr('data-index', index);

    }

    /**
     * Reindex input of the dfi. 
     */
    this._updateInput = function(oldIndex, newIndex) {

        element.find('input').each(function(){
            var oldName = $(this).attr('name');
            var validName = (typeof oldName != 'undefined');
            /* Need to check name is valid or not before update the new name for the input. */
            if(validName) {
                /* Get the new name of the input by replace old index with new index. */
                var newName = oldName.replace(oldIndex, newIndex);
                /* Update new name for the input. */
                $(this).attr('name', newName);
            }

        });

    }

    /**
     * Reindex select input of the dfi. 
     */
    this._updateSelect = function(oldIndex, newIndex) {

        element.find('select').each(function(){

            var oldName = $(this).attr('name');
            var validName = (typeof oldName != 'undefined');
            /* Need to check name is valid or not before update the new name for the select input. */
            if(validName) {
                /* Get the new name of the select input by replace old index with new index. */
                var newName = oldName.replace(oldIndex, newIndex);
                /* Update new name for the select input. */
                $(this).attr('name', newName);
            }
        });

    };

    /**
     * Update dfi label with new index.
     */
    this._updateLabel = function() {
        var labelClass = '.dfi-label';
        var label = element.find(labelClass);
        /* Remove current label. */
        label.empty();
        /* Update new label. */ 
        label.text('DFI ' + index);

    }
}

export default DFI;



1			import ImageUpload from './imageupload.js';
2			import Taxonomy from './taxonomy.js';
3			import PostType from './posttype.js';
4			import Layout from './layout.js';
5
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'")) {
			0 ignored issues – show Security Performance introduced 2017-11-26 11:49 UTC by Report Bug Copy Issue Report Calls to `eval` are slow and potentially dangerous, especially on untrusted code. Please consider whether there is another way to achieve your goal. Loading history...
240			eval(_var + ' = null');
			0 ignored issues – show Security Performance introduced 2017-11-26 11:49 UTC by Report Bug Copy Issue Report Calls to `eval` are slow and potentially dangerous, especially on untrusted code. Please consider whether there is another way to achieve your goal. Loading history...
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);
			0 ignored issues – show Debugging Code introduced 2018-01-19 03:39 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
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
441			export default DFI;
442
443

buiquangduc / WP_Default_Feature_Image

Push — master ( d0f3cd...eb99f6 )

dfi.js ➔ ... ➔ element.slideUp(ꞌ300ꞌ) A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like