ProfilePicAPI.Uploader - Code Metrics - Inspection of "Fixing some bugs affecting api calls, and job appl..." - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#219)

unknown

created 2018-06-21 21:20 UTC

ProfilePicAPI.Uploader A

↳ Parent: Project

Complexity

Conditions	3
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	3
c	0
b	0
f	0
nc	2
nop	0
dl	0
loc	1
rs	10

var ProfilePicAPI = {};

ProfilePicAPI.version = "v1";
ProfilePicAPI.baseURL = "/tc/api/"+ProfilePicAPI.version;

ProfilePicAPI.loadingTextClass = 'fileUploadLoadingText';
ProfilePicAPI.loadingBarClass = 'fileUploadLoadingBar';
ProfilePicAPI.defaultProfilePic = '/images/user.png';

ProfilePicAPI.Uploader = function(
        fileInputButtons,
        dropZone,
        croppieContainer,
        clearButton,
        saveButton,
        userId,
        onUploadComplete
        ) {

    this.fileInputButtons = fileInputButtons;
    this.dropZone = dropZone;
    this.croppieContainer = croppieContainer;
    this.clearButton = clearButton;
    this.saveButton = saveButton;
    this.userId = userId;
    this.onUploadComplete = onUploadComplete;

    this.photo = null;
    this.croppie = null;
    this.max_filesize = 5242880;
    this.defaultPhotoSrc = ProfilePicAPI.defaultProfilePic;
    this.uploadUrl = ProfilePicAPI.baseURL + "/profilePic/" + this.userId;

    var self = this;

    self.init = function() {
        for (var i=0; i<fileInputButtons.length; i++) {
            fileInputButtons[i].onchange = self.addFiles;
        }
        if (self.saveButton) {
            self.saveButton.onclick = self.uploadPhoto;
        }
        if (self.clearButton) {
            self.clearButton.onclick = self.clearUpload;
        }
        if (self.dropZone) {
            self.initializeDropzone();
        }
    };

     self.initializeDropzone = function(){
        //clone dropZone to remove existing event listeners
        var clone = self.dropZone.cloneNode();
        while (self.dropZone.firstChild) {
          clone.appendChild(self.dropZone.lastChild);
        }
        self.dropZone.parentNode.replaceChild(clone, self.dropZone);

        self.dropZone = clone;

        self.dropZone.addEventListener("dragenter",  self.stopProp, false);
        self.dropZone.addEventListener("dragleave",  self.dragExit, false);
        self.dropZone.addEventListener("dragover",  self.dragOver, false);
        self.dropZone.addEventListener("drop",  self.processDroppedFiles, false);
    };

    /**
     * Use this function to set files programmatically
     *
     * @param {type} files
     * @return {undefined}
     */
    self.setFiles = function(files) {
        self.processNewFiles(files);
    };

    self.addFiles = function () {
        self.processNewFiles(this.files);
    };

    self.dragOver = function (ev) {
        self.stopProp(ev);
        self.dropZone.classList.remove("fileDropzoneNormal");
        self.dropZone.classList.add("fileDropzoneHighlight");
        //this.style["backgroundColor"] = "#F0FCF0";
        //this.style["borderColor"] = "#3DD13F";
        //this.style["color"] = "#3DD13F";
    };

    self.dragExit = function (ev) {
        self.stopProp(ev);
        self.dropZone.classList.remove("fileDropzoneHighlight");
        self.dropZone.classList.add("fileDropzoneNormal");
        //dropZone.style["backgroundColor"] = "#FEFEFE";
        //dropZone.style["borderColor"] = "#CCC";
        //dropZone.style["color"] = "#CCC";
    };

    self.stopProp = function (ev) {
        ev.stopPropagation();
        ev.preventDefault();
    };

    self.processDroppedFiles = function (ev) {
        self.stopProp(ev);
        var files = ev.dataTransfer.files;
        self.processNewFiles(files);
    };

    var actionWrapperDefault = document.querySelector(".update-profile__action-wrapper--default-state");
    var actionWrapperUpload = document.querySelector(".update-profile__action-wrapper--upload-state");
    var draggableArea = document.querySelector(".update-profile-photo__draggable-area-wrapper");

    self.clearUpload = function () {
        //Clear upload
        self.photo = null;

        //Clear preview
        self.croppieContainer.innerHTML = "";
        self.croppieContainer.classList.remove("croppie-container");

        //Clear input button value
        for (var i=0; i<self.fileInputButtons.length; i++) {
            self.fileInputButtons[i].value = null;
        }

        // UI Changes
        actionWrapperDefault.classList.remove("hidden");
        actionWrapperUpload.classList.remove("active");
        draggableArea.classList.remove("active");
        draggableArea.classList.remove("error");
        draggableArea.classList.remove("error--size");
        draggableArea.classList.remove("error--type");

    };

    self.processNewFiles = function (files) {
        var file = files[0];
        if (file.type.match('image.*')) {
            self.clearUpload();
            var fr = new FileReader();

            fr.file = file;
            fr.onloadend = function(ev) {
                if (ev.target.file.size < self.max_filesize) {
                    self.photo = ev.target.file;
                    self.croppie = self.makeProfilePicCroppie(self.croppieContainer, ev.target.result);
                    // UI Changes
                    actionWrapperDefault.classList.add("hidden");
                    actionWrapperUpload.classList.add("active");
                    draggableArea.classList.add("active");
                    draggableArea.classList.remove("error");
                } else {
                    // Indicates file is too large.
                    draggableArea.classList.remove("active");
                    draggableArea.classList.add("error--size");
                }
            };
            fr.readAsDataURL(fr.file);
        } else {
            // Indicates file is wrong type.
            draggableArea.classList.remove("active");
            draggableArea.classList.add("error--type");
        }
    };

    self.makeProfilePicCroppie = function(imageElement, imageSrc) {

        var croppie = new Croppie(imageElement, {

            viewport: { width: 200, height: 200, type: 'circle'},
            boundary: { width: 200, height: 200 },
            showZoomer: true,
            enableZoom: true,
            enforceBoundary: true,
            mouseWheelZoombool: true
        });
        croppie.bind({
            url: imageSrc
        }).then(function() {
            var crImage = croppie.elements.img;
            crImage.setAttribute("alt", "Preview Profile Photo");
            croppie.setZoom(0.15);
        });
        return croppie;
    };

    self.uploadPhoto = function() {
        if (self.photo && self.croppie) {
            self.croppie.result({
                    type: 'blob',
                    size: 'viewport',
                    format: 'png',
                    quality: 1,
                    circle: false
                }).then(function(blob) {
                    var payload = blob;                    
                    var headers = {"Content-type": self.photo.type,
                        "X-File-Name": self.photo.name,
                        "Accept":"application/json"};
                    DataAPI.sendRequest(self.uploadUrl, 'PUT', headers, payload, function(request){

                        if (self.onUploadComplete) {
                            self.onUploadComplete(request);
                        }
                    });
                });
        }
    }


    self.init();
};

ProfilePicAPI.refreshUserProfilePic = function(imageElement) {
    if (UserAPI.hasSessionUser()) {

        var userId = UserAPI.getSessionUserAsJSON().user_id;
        ProfilePicAPI.refreshProfilePic(userId, imageElement);
    }
};

ProfilePicAPI.refreshProfilePic = function(userId, imageElement) {
    ProfilePicAPI.refreshMultipleProfilePics(userId, [imageElement]);
};

ProfilePicAPI.refreshProfilePicBackground = function(userId, imageElement) {
    ProfilePicAPI.refreshMultipleProfilePicsBackground(userId, [imageElement]);
};

ProfilePicAPI.refreshMultipleProfilePics = function(userId, imageElements) {
    var pic_url = ProfilePicAPI.baseURL+'/profilePic/'+userId;
    DataAPI.sendRequest(pic_url, 'GET', {"Accept":"image/*"}, null, function(request){

        if(request.readyState === 4){
            if (request.status === 200) {
                for (var i=0; i<imageElements.length;i++) {
                    imageElements[i].src = request.responseURL;
                }
            } else {
                for (var i=0; i<imageElements.length;i++) {

                    imageElements[i].src = ProfilePicAPI.defaultProfilePic;
                }
            }
        }
    });
};

ProfilePicAPI.refreshMultipleProfilePicsBackground = function(userId, imageElements) {
    var pic_url = ProfilePicAPI.baseURL+'/profilePic/'+userId;
    DataAPI.sendRequest(pic_url, 'GET', {"Accept":"image/*"}, null, function(request){

        if (request.status == 200) {
            for (var i=0; i<imageElements.length;i++) {
                imageElements[i].style.backgroundImage = "url("+request.responseURL+")";
            }
        } else {
            for (var i=0; i<imageElements.length;i++) {

                imageElements[i].style.backgroundImage = "url("+ProfilePicAPI.defaultProfilePic+")";
            }
        }
    });
};


1			var ProfilePicAPI = {};
2
3			ProfilePicAPI.version = "v1";
4			ProfilePicAPI.baseURL = "/tc/api/"+ProfilePicAPI.version;
5
6			ProfilePicAPI.loadingTextClass = 'fileUploadLoadingText';
7			ProfilePicAPI.loadingBarClass = 'fileUploadLoadingBar';
8			ProfilePicAPI.defaultProfilePic = '/images/user.png';
9
10			ProfilePicAPI.Uploader = function(
11			fileInputButtons,
12			dropZone,
13			croppieContainer,
14			clearButton,
15			saveButton,
16			userId,
17			onUploadComplete
18			) {
19
20			this.fileInputButtons = fileInputButtons;
21			this.dropZone = dropZone;
22			this.croppieContainer = croppieContainer;
23			this.clearButton = clearButton;
24			this.saveButton = saveButton;
25			this.userId = userId;
26			this.onUploadComplete = onUploadComplete;
27
28			this.photo = null;
29			this.croppie = null;
30			this.max_filesize = 5242880;
31			this.defaultPhotoSrc = ProfilePicAPI.defaultProfilePic;
32			this.uploadUrl = ProfilePicAPI.baseURL + "/profilePic/" + this.userId;
33
34			var self = this;
35
36			self.init = function() {
37			for (var i=0; i<fileInputButtons.length; i++) {
38			fileInputButtons[i].onchange = self.addFiles;
39			}
40			if (self.saveButton) {
41			self.saveButton.onclick = self.uploadPhoto;
42			}
43			if (self.clearButton) {
44			self.clearButton.onclick = self.clearUpload;
45			}
46			if (self.dropZone) {
47			self.initializeDropzone();
48			}
49			};
50
51			self.initializeDropzone = function(){
52			//clone dropZone to remove existing event listeners
53			var clone = self.dropZone.cloneNode();
54			while (self.dropZone.firstChild) {
55			clone.appendChild(self.dropZone.lastChild);
56			}
57			self.dropZone.parentNode.replaceChild(clone, self.dropZone);
			0 ignored issues – show Bug introduced 2018-06-21 21:24 UTC by Report Bug Copy Issue Report The variable `self` is changed as part of the for-each loop for example by `this` on line `34`. Only the value of the last iteration will be visible in this function if it is called after the loop. Loading history...
58			self.dropZone = clone;
59
60			self.dropZone.addEventListener("dragenter", self.stopProp, false);
61			self.dropZone.addEventListener("dragleave", self.dragExit, false);
62			self.dropZone.addEventListener("dragover", self.dragOver, false);
63			self.dropZone.addEventListener("drop", self.processDroppedFiles, false);
64			};
65
66			/**
67			* Use this function to set files programmatically
68			*
69			* @param {type} files
70			* @return {undefined}
71			*/
72			self.setFiles = function(files) {
73			self.processNewFiles(files);
74			};
75
76			self.addFiles = function () {
77			self.processNewFiles(this.files);
78			};
79
80			self.dragOver = function (ev) {
81			self.stopProp(ev);
82			self.dropZone.classList.remove("fileDropzoneNormal");
83			self.dropZone.classList.add("fileDropzoneHighlight");
84			//this.style["backgroundColor"] = "#F0FCF0";
85			//this.style["borderColor"] = "#3DD13F";
86			//this.style["color"] = "#3DD13F";
87			};
88
89			self.dragExit = function (ev) {
90			self.stopProp(ev);
91			self.dropZone.classList.remove("fileDropzoneHighlight");
92			self.dropZone.classList.add("fileDropzoneNormal");
93			//dropZone.style["backgroundColor"] = "#FEFEFE";
94			//dropZone.style["borderColor"] = "#CCC";
95			//dropZone.style["color"] = "#CCC";
96			};
97
98			self.stopProp = function (ev) {
99			ev.stopPropagation();
100			ev.preventDefault();
101			};
102
103			self.processDroppedFiles = function (ev) {
104			self.stopProp(ev);
105			var files = ev.dataTransfer.files;
106			self.processNewFiles(files);
107			};
108
109			var actionWrapperDefault = document.querySelector(".update-profile__action-wrapper--default-state");
110			var actionWrapperUpload = document.querySelector(".update-profile__action-wrapper--upload-state");
111			var draggableArea = document.querySelector(".update-profile-photo__draggable-area-wrapper");
112
113			self.clearUpload = function () {
114			//Clear upload
115			self.photo = null;
116
117			//Clear preview
118			self.croppieContainer.innerHTML = "";
119			self.croppieContainer.classList.remove("croppie-container");
120
121			//Clear input button value
122			for (var i=0; i<self.fileInputButtons.length; i++) {
123			self.fileInputButtons[i].value = null;
124			}
125
126			// UI Changes
127			actionWrapperDefault.classList.remove("hidden");
128			actionWrapperUpload.classList.remove("active");
129			draggableArea.classList.remove("active");
130			draggableArea.classList.remove("error");
131			draggableArea.classList.remove("error--size");
132			draggableArea.classList.remove("error--type");
133
134			};
135
136			self.processNewFiles = function (files) {
137			var file = files[0];
138			if (file.type.match('image.*')) {
139			self.clearUpload();
140			var fr = new FileReader();
			0 ignored issues – show Bug introduced 2018-06-08 21:34 UTC by Report Bug Copy Issue Report The variable `FileReader` seems to be never declared. If this is a global, consider adding a `/** global: FileReader */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
141			fr.file = file;
142			fr.onloadend = function(ev) {
143			if (ev.target.file.size < self.max_filesize) {
144			self.photo = ev.target.file;
145			self.croppie = self.makeProfilePicCroppie(self.croppieContainer, ev.target.result);
146			// UI Changes
147			actionWrapperDefault.classList.add("hidden");
148			actionWrapperUpload.classList.add("active");
149			draggableArea.classList.add("active");
150			draggableArea.classList.remove("error");
151			} else {
152			// Indicates file is too large.
153			draggableArea.classList.remove("active");
154			draggableArea.classList.add("error--size");
155			}
156			};
157			fr.readAsDataURL(fr.file);
158			} else {
159			// Indicates file is wrong type.
160			draggableArea.classList.remove("active");
161			draggableArea.classList.add("error--type");
162			}
163			};
164
165			self.makeProfilePicCroppie = function(imageElement, imageSrc) {
166
167			var croppie = new Croppie(imageElement, {
			0 ignored issues – show Bug introduced 2018-06-08 21:34 UTC by Report Bug Copy Issue Report The variable `Croppie` seems to be never declared. If this is a global, consider adding a `/** global: Croppie */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
168			viewport: { width: 200, height: 200, type: 'circle'},
169			boundary: { width: 200, height: 200 },
170			showZoomer: true,
171			enableZoom: true,
172			enforceBoundary: true,
173			mouseWheelZoombool: true
174			});
175			croppie.bind({
176			url: imageSrc
177			}).then(function() {
178			var crImage = croppie.elements.img;
179			crImage.setAttribute("alt", "Preview Profile Photo");
180			croppie.setZoom(0.15);
181			});
182			return croppie;
183			};
184
185			self.uploadPhoto = function() {
186			if (self.photo && self.croppie) {
187			self.croppie.result({
188			type: 'blob',
189			size: 'viewport',
190			format: 'png',
191			quality: 1,
192			circle: false
193			}).then(function(blob) {
194			var payload = blob;
195			var headers = {"Content-type": self.photo.type,
196			"X-File-Name": self.photo.name,
197			"Accept":"application/json"};
198			DataAPI.sendRequest(self.uploadUrl, 'PUT', headers, payload, function(request){
			0 ignored issues – show Bug introduced 2018-06-21 21:24 UTC by Report Bug Copy Issue Report The variable `DataAPI` seems to be never declared. If this is a global, consider adding a `/** global: DataAPI */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
199			if (self.onUploadComplete) {
200			self.onUploadComplete(request);
201			}
202			});
203			});
204			}
205			}
			0 ignored issues – show Coding Style introduced 2018-06-21 21:24 UTC by Report Bug Copy Issue Report There should be a semicolon. Requirement of semicolons purely is a coding style issue since JavaScript has specific rules about semicolons which are followed by all browsers. Further Readings: An Open Letter to JavaScript Leaders Regarding Semicolons by Isaac Schlueter JavaScript Semicolon Insertion Loading history...
206
207			self.init();
208			};
209
210			ProfilePicAPI.refreshUserProfilePic = function(imageElement) {
211			if (UserAPI.hasSessionUser()) {
			0 ignored issues – show Bug introduced 2018-06-08 21:34 UTC by Report Bug Copy Issue Report The variable `UserAPI` seems to be never declared. If this is a global, consider adding a `/** global: UserAPI */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
212			var userId = UserAPI.getSessionUserAsJSON().user_id;
213			ProfilePicAPI.refreshProfilePic(userId, imageElement);
214			}
215			};
216
217			ProfilePicAPI.refreshProfilePic = function(userId, imageElement) {
218			ProfilePicAPI.refreshMultipleProfilePics(userId, [imageElement]);
219			};
220
221			ProfilePicAPI.refreshProfilePicBackground = function(userId, imageElement) {
222			ProfilePicAPI.refreshMultipleProfilePicsBackground(userId, [imageElement]);
223			};
224
225			ProfilePicAPI.refreshMultipleProfilePics = function(userId, imageElements) {
226			var pic_url = ProfilePicAPI.baseURL+'/profilePic/'+userId;
227			DataAPI.sendRequest(pic_url, 'GET', {"Accept":"image/*"}, null, function(request){
			0 ignored issues – show Bug introduced 2018-06-21 21:24 UTC by Report Bug Copy Issue Report The variable `DataAPI` seems to be never declared. If this is a global, consider adding a `/** global: DataAPI */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
228			if(request.readyState === 4){
229			if (request.status === 200) {
230			for (var i=0; i<imageElements.length;i++) {
231			imageElements[i].src = request.responseURL;
232			}
233			} else {
234			for (var i=0; i<imageElements.length;i++) {
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2018-06-08 21:34 UTC by Report Bug Copy Issue Report The variable `i` already seems to be declared on line `230`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history... Bug introduced 2018-06-08 22:05 UTC by Report Bug Copy Issue Report It seems like `i` was already defined. Loading history...
235			imageElements[i].src = ProfilePicAPI.defaultProfilePic;
236			}
237			}
238			}
239			});
240			};
241
242			ProfilePicAPI.refreshMultipleProfilePicsBackground = function(userId, imageElements) {
243			var pic_url = ProfilePicAPI.baseURL+'/profilePic/'+userId;
244			DataAPI.sendRequest(pic_url, 'GET', {"Accept":"image/*"}, null, function(request){
			0 ignored issues – show Bug introduced 2018-06-21 21:24 UTC by Report Bug Copy Issue Report The variable `DataAPI` seems to be never declared. If this is a global, consider adding a `/** global: DataAPI */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
245			if (request.status == 200) {
246			for (var i=0; i<imageElements.length;i++) {
247			imageElements[i].style.backgroundImage = "url("+request.responseURL+")";
248			}
249			} else {
250			for (var i=0; i<imageElements.length;i++) {
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2018-06-08 21:34 UTC by Report Bug Copy Issue Report The variable `i` already seems to be declared on line `246`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history... Bug introduced 2018-06-08 22:05 UTC by Report Bug Copy Issue Report It seems like `i` was already defined. Loading history...
251			imageElements[i].style.backgroundImage = "url("+ProfilePicAPI.defaultProfilePic+")";
252			}
253			}
254			});
255			};
256

GCTC-NTGC / TalentCloud

Pull Request — master (#219)

ProfilePicAPI.Uploader A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like