js/ocrview.js - Code Metrics - Inspection of "Gearman and related stuff" - janis91/ocr - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#6)

by Janis

created 2016-09-12 07:07 UTC

js/ocrview.js B

↳ Parent: Project

Complexity

Conditions	2
Paths	64

Size

Total Lines

241

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
dl	0
loc	241
rs	8.2857
c	1
b	0
f	0
cc	2
nc	64
nop	0

17 Functions

Rating	Name	Size	Complexity
A	View.updateFileList	5	1
A	View.setSelectedFiles	4	1
B	View.registerEvents	34	1
A	View.destroySelectedActionButton	4	1
A	View.loopForStatus	17	1
A	View.renderSelectedActionButton	4	1
A	View.renderFileAction	7	1
A	View.initialize	6	1
A	View.renderDropdown	9	3
A	ocrview.js ➔ View	5	1
A	View.destroyDropdown	5	2
A	View.notifyError	4	1
A	View.destroy	7	1
B	View.togglePendingState	19	6
B	View.registerFileActions	39	1
A	View.toggleSelectedActionButton	18	4
A	View.getSelectedFiles	4	1

How to fix Long Method

/**
 * nextCloud - ocr
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the COPYING file.
 *
 * @author Janis Koehr <[email protected]>
 * @copyright Janis Koehr 2016
 */
(function() {
	/**
	 * Constructor of the View object.
	 * This will update the different parts of the html.
	 * @param ocr
	 * @param filehandler
	 * @constructor
	 */

	// Handlebarsjs template
	var TEMPLATE_OCR_DROPDOWN = '<div id="ocrDropdown" class="ocrUserInterface">'+
		'{{#if noMatches}}'+
		t('ocr', 'No languages for tesseract available')+
		'{{else}}'+
		t('ocr', 'Select')+
		':'+
		'<select id="ocrLanguage">'+
		'{{#each languages}}'+
		'<option value="{{this}}">{{this}}</option>'+
		'{{/each}}'+
		'</select>'+
		'<input type="button" id="processOCR" value="'+
		t('ocr', 'Process')+
		'" />'+
		'{{/if}}'+
		'</div>';

	var TEMPLATE_OCR_SELECTED_FILE_ACTION = '<span class="selectedActionsOCR hidden">'+
		'<a id="selectedFilesOCR" href="" class="ocr">'+
		'<span class="icon icon-external"></span>'+
		'<span>'+t('ocr', 'OCR')+'</span>'+
		'</a>'+
		'</span>';

	var View = function (ocr) {
		this._ocr = ocr;
		this._selectedFiles = [];
		this._row = undefined;
	};

	/**
	 * Class prototype for the View. Following functions are available:
	 *
	 */
	View.prototype = {
		initialize: function () {
			this.renderSelectedActionButton();
			this.registerFileActions();
			this.registerEvents();
			this.loopForStatus();
		},
		destroy: function () {
			var self = this;
			self.destroyDropdown();
			self.destroySelectedActionButton();
			OCA.Files.fileActions.clear();
			OCA.Files.fileActions.registerDefaultActions();
		},
		registerFileActions: function () {
			var self = this;
			/**
			 * Register FileAction for mimetype pdf
			 */
			OCA.Files.fileActions.registerAction({
				name: 'Ocr',
				displayName: t('ocr', 'OCR'),
				order: 100,
				mime: 'application/pdf',
				permissions: OC.PERMISSION_UPDATE,
				altText: t('ocr', 'OCR'),
				iconClass: 'icon-external',
				actionHandler: function (filename, context) {
					var path = context.dir || context.fileList.getCurrentDirectory();
					var mimetype = context.fileActions.getCurrentMimeType();
					var type = context.fileActions.getCurrentType();
					self.renderFileAction(filename, path, type, mimetype);
				}
			});
			/**
			 * Register FileAction for mimetype image
			 */
			OCA.Files.fileActions.registerAction({
				name: 'Ocr',
				displayName: t('ocr', 'OCR'),
				order: 100,
				mime: 'image',
				permissions: OC.PERMISSION_UPDATE,
				altText: t('ocr', 'OCR'),
				iconClass: 'icon-external',
				actionHandler: function (filename, context) {
					var path = context.dir || context.fileList.getCurrentDirectory();
					var mimetype = context.fileActions.getCurrentMimeType();
					var type = context.fileActions.getCurrentType();
					self.renderFileAction(filename, path, type, mimetype);
				}
			});
		},
		setSelectedFiles: function (selectedFiles) {
			var self = this;
			self._selectedFiles = selectedFiles;
		},
		getSelectedFiles: function () {
			var self = this;
			return self._selectedFiles;
		},
		destroySelectedActionButton: function () {
			// remove the Template
			$('.selectedActionsOCR').remove();
		},
		renderSelectedActionButton: function () {
			// append the TEMPLATE to correct position
			$(TEMPLATE_OCR_SELECTED_FILE_ACTION).appendTo($('#headerName-container'));
		},
		destroyDropdown: function () {
			if ($('#ocrDropdown').length){
				$('#ocrDropdown').detach();
			}
		},
		renderDropdown: function(){
			var self = this;
			self.destroyDropdown();
			var template = Handlebars.compile(TEMPLATE_OCR_DROPDOWN);

			var noMatches = true;
			var languages = self._ocr.getLanguages();
			if(languages.length > 0 && typeof languages !== undefined){ noMatches = false }

			return template({languages: languages, noMatches: noMatches});
		},
		renderFileAction: function (file, path, type, mimetype) {
			var self = this;
			var html = self.renderDropdown();
			$(html).appendTo($('tr').filterAttr('data-file',file).find('td.filename'));
			var files = [{name: file, path: path, type: type, mimetype: mimetype}];
			self.setSelectedFiles(files);
		},
		//FIXME: sometimes (eg after recreating the files app) the button still shows and has strange behavior
		toggleSelectedActionButton: function (e) {

			var self = this;
			var selectedActionButton = $('.selectedActionsOCR');
			var selFiles = OCA.Files.App.fileList.getSelectedFiles();
			if(selFiles.length > 0 && typeof selFiles !== undefined){
				//show if all have correct mimetype and type = file
				if(self._ocr.checkMimeTypes(selFiles)){
					// show if not already shown
					selectedActionButton.removeClass('hidden');
				}else{
					selectedActionButton.addClass('hidden');
				}
			}else{
				// hide if not already hidden
				selectedActionButton.addClass('hidden');
				self.setSelectedFiles([]);
			}
		},
		togglePendingState: function (force) {
			var self = this;
			var html = '';
			var pendingcount = self._ocr.getStatus().pending;
			if(force){
				html = '<span class="icon icon-loading-small"></span>&nbsp;<span>' + t('ocr','OCR processing started.') + '</span>';
			}else{
				html = '<span class="icon icon-loading-small"></span>&nbsp;<span>' + pendingcount + ' ' + t('ocr','currently pending OCR requests.') + '</span>';
			}
			if(pendingcount > 0 || force){
				if (self._row !== undefined) OC.Notification.hide(self._row);
if (a > 0)
    b = 42;
				self._row = OC.Notification.showHtml(html);
			}else{
				if (self._row !== undefined){
					OC.Notification.hide(self._row);
					self._row = undefined;
				}
			}
		},
		updateFileList: function () {
			var self = this;
			OCA.Files.App.fileList.reload();
			self.toggleSelectedActionButton('');
		},
		/**
		 * Loops as long as there are pending objects
		 */
		loopForStatus: function () {
			var self = this;
			$.when(self._ocr.checkStatus()).done(function(){
				if(self._ocr.getStatus().failed > 0) self.notifyError('OCR processing for one or more files failed. For details please contact your administrator.');
if (a > 0)
    b = 42;
				if(self._ocr.getStatus().pending > 0){
					if(self._ocr.getStatus().processed > 0) self.updateFileList();
if (a > 0)
    b = 42;
					self.togglePendingState(false);
					setTimeout($.proxy(self.loopForStatus,self), 4500);
				}else{
					if(self._ocr.getStatus().processed > 0) self.updateFileList();
if (a > 0)
    b = 42;
					self.togglePendingState(false);
				}
			}).fail(function(message){
				self.notifyError(message);
				setTimeout($.proxy(self.loopForStatus,self), 4500);
			});
		},
		notifyError: function (message) {
			/** global: OC */
			OC.Notification.showHtml('<div>'+t('ocr', message)+'</div>', {timeout: 10, type: 'error'});
		},
		registerEvents: function(){
			var self = this;
			// Close on click on other element
			$(document).click(function(event) {
				if(!$(event.target).closest('#ocrDropdown').length) {
					self.destroyDropdown();
					self.setSelectedFiles([]);
				}
			});
			// Register submit action
			$(document).on('click', '#processOCR', function(){
				var selectedLanguage = $('#ocrLanguage').val();
				$.when(self._ocr.process(self.getSelectedFiles(), selectedLanguage)).done(function(){
					self.destroyDropdown();
					self.setSelectedFiles([]);
					// status monitoring init
					self.togglePendingState(true);
					setTimeout($.proxy(self.loopForStatus,self), 4500);
				}).fail(function(message){
					self.notifyError('OCR processing failed: ' + message);
					self.destroyDropdown();
				});
			});
			// Register click selectedFilesAction
			$(document).on('click', '#selectedFilesOCR', function(){
				var html = self.renderDropdown();
				$(html).appendTo($('tr').find('th.column-name'));
				self.setSelectedFiles(OCA.Files.App.fileList.getSelectedFiles());
				return false;
			});
			// Register checkbox events
			OCA.Files.App.fileList.$fileList.on('change', 'td.filename>.selectCheckBox', _.bind(self.toggleSelectedActionButton, this));

			OCA.Files.App.fileList.$el.find('.select-all').click(_.bind(self.toggleSelectedActionButton, this));
		}
	};
	/** global: OCA */
	if (OCA.Ocr) {
		OCA.Ocr.View = View;
	}
})();

1			/**
2			* nextCloud - ocr
3			*
4			* This file is licensed under the Affero General Public License version 3 or
5			* later. See the COPYING file.
6			*
7			* @author Janis Koehr <[email protected]>
8			* @copyright Janis Koehr 2016
9			*/
10			(function() {
11			/**
12			* Constructor of the View object.
13			* This will update the different parts of the html.
14			* @param ocr
15			* @param filehandler
16			* @constructor
17			*/
18
19			// Handlebarsjs template
20			var TEMPLATE_OCR_DROPDOWN = '<div id="ocrDropdown" class="ocrUserInterface">'+
21			'{{#if noMatches}}'+
22			t('ocr', 'No languages for tesseract available')+
23			'{{else}}'+
24			t('ocr', 'Select')+
25			':'+
26			'<select id="ocrLanguage">'+
27			'{{#each languages}}'+
28			'<option value="{{this}}">{{this}}</option>'+
29			'{{/each}}'+
30			'</select>'+
31			'<input type="button" id="processOCR" value="'+
32			t('ocr', 'Process')+
33			'" />'+
34			'{{/if}}'+
35			'</div>';
36
37			var TEMPLATE_OCR_SELECTED_FILE_ACTION = '<span class="selectedActionsOCR hidden">'+
38			'<a id="selectedFilesOCR" href="" class="ocr">'+
39			'<span class="icon icon-external"></span>'+
40			'<span>'+t('ocr', 'OCR')+'</span>'+
41			'</a>'+
42			'</span>';
43
44			var View = function (ocr) {
45			this._ocr = ocr;
46			this._selectedFiles = [];
47			this._row = undefined;
48			};
49
50			/**
51			* Class prototype for the View. Following functions are available:
52			*
53			*/
54			View.prototype = {
55			initialize: function () {
56			this.renderSelectedActionButton();
57			this.registerFileActions();
58			this.registerEvents();
59			this.loopForStatus();
60			},
61			destroy: function () {
62			var self = this;
63			self.destroyDropdown();
64			self.destroySelectedActionButton();
65			OCA.Files.fileActions.clear();
66			OCA.Files.fileActions.registerDefaultActions();
67			},
68			registerFileActions: function () {
69			var self = this;
70			/**
71			* Register FileAction for mimetype pdf
72			*/
73			OCA.Files.fileActions.registerAction({
74			name: 'Ocr',
75			displayName: t('ocr', 'OCR'),
76			order: 100,
77			mime: 'application/pdf',
78			permissions: OC.PERMISSION_UPDATE,
79			altText: t('ocr', 'OCR'),
80			iconClass: 'icon-external',
81			actionHandler: function (filename, context) {
82			var path = context.dir \|\| context.fileList.getCurrentDirectory();
83			var mimetype = context.fileActions.getCurrentMimeType();
84			var type = context.fileActions.getCurrentType();
85			self.renderFileAction(filename, path, type, mimetype);
86			}
87			});
88			/**
89			* Register FileAction for mimetype image
90			*/
91			OCA.Files.fileActions.registerAction({
92			name: 'Ocr',
93			displayName: t('ocr', 'OCR'),
94			order: 100,
95			mime: 'image',
96			permissions: OC.PERMISSION_UPDATE,
97			altText: t('ocr', 'OCR'),
98			iconClass: 'icon-external',
99			actionHandler: function (filename, context) {
100			var path = context.dir \|\| context.fileList.getCurrentDirectory();
101			var mimetype = context.fileActions.getCurrentMimeType();
102			var type = context.fileActions.getCurrentType();
103			self.renderFileAction(filename, path, type, mimetype);
104			}
105			});
106			},
107			setSelectedFiles: function (selectedFiles) {
108			var self = this;
109			self._selectedFiles = selectedFiles;
110			},
111			getSelectedFiles: function () {
112			var self = this;
113			return self._selectedFiles;
114			},
115			destroySelectedActionButton: function () {
116			// remove the Template
117			$('.selectedActionsOCR').remove();
118			},
119			renderSelectedActionButton: function () {
120			// append the TEMPLATE to correct position
121			$(TEMPLATE_OCR_SELECTED_FILE_ACTION).appendTo($('#headerName-container'));
122			},
123			destroyDropdown: function () {
124			if ($('#ocrDropdown').length){
125			$('#ocrDropdown').detach();
126			}
127			},
128			renderDropdown: function(){
129			var self = this;
130			self.destroyDropdown();
131			var template = Handlebars.compile(TEMPLATE_OCR_DROPDOWN);
			0 ignored issues – show Bug introduced 2016-09-12 03:08 UTC by Report Bug Copy Issue Report The variable `Handlebars` seems to be never declared. If this is a global, consider adding a `/** global: Handlebars */` 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...
132			var noMatches = true;
133			var languages = self._ocr.getLanguages();
134			if(languages.length > 0 && typeof languages !== undefined){ noMatches = false }
			0 ignored issues – show Coding Style introduced 2016-09-12 03:08 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...
135			return template({languages: languages, noMatches: noMatches});
136			},
137			renderFileAction: function (file, path, type, mimetype) {
138			var self = this;
139			var html = self.renderDropdown();
140			$(html).appendTo($('tr').filterAttr('data-file',file).find('td.filename'));
141			var files = [{name: file, path: path, type: type, mimetype: mimetype}];
142			self.setSelectedFiles(files);
143			},
144			//FIXME: sometimes (eg after recreating the files app) the button still shows and has strange behavior
145			toggleSelectedActionButton: function (e) {
			0 ignored issues – show Unused Code introduced 2016-09-12 03:08 UTC by Report Bug Copy Issue Report The parameter `e` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
146			var self = this;
147			var selectedActionButton = $('.selectedActionsOCR');
148			var selFiles = OCA.Files.App.fileList.getSelectedFiles();
149			if(selFiles.length > 0 && typeof selFiles !== undefined){
150			//show if all have correct mimetype and type = file
151			if(self._ocr.checkMimeTypes(selFiles)){
152			// show if not already shown
153			selectedActionButton.removeClass('hidden');
154			}else{
155			selectedActionButton.addClass('hidden');
156			}
157			}else{
158			// hide if not already hidden
159			selectedActionButton.addClass('hidden');
160			self.setSelectedFiles([]);
161			}
162			},
163			togglePendingState: function (force) {
164			var self = this;
165			var html = '';
166			var pendingcount = self._ocr.getStatus().pending;
167			if(force){
168			html = '<span class="icon icon-loading-small"></span> <span>' + t('ocr','OCR processing started.') + '</span>';
169			}else{
170			html = '<span class="icon icon-loading-small"></span> <span>' + pendingcount + ' ' + t('ocr','currently pending OCR requests.') + '</span>';
171			}
172			if(pendingcount > 0 \|\| force){
173			if (self._row !== undefined) OC.Notification.hide(self._row);
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-12 03:08 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
174			self._row = OC.Notification.showHtml(html);
175			}else{
176			if (self._row !== undefined){
177			OC.Notification.hide(self._row);
178			self._row = undefined;
179			}
180			}
181			},
182			updateFileList: function () {
183			var self = this;
184			OCA.Files.App.fileList.reload();
185			self.toggleSelectedActionButton('');
186			},
187			/**
188			* Loops as long as there are pending objects
189			*/
190			loopForStatus: function () {
191			var self = this;
192			$.when(self._ocr.checkStatus()).done(function(){
193			if(self._ocr.getStatus().failed > 0) self.notifyError('OCR processing for one or more files failed. For details please contact your administrator.');
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-12 03:08 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
194			if(self._ocr.getStatus().pending > 0){
195			if(self._ocr.getStatus().processed > 0) self.updateFileList();
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-12 03:08 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
196			self.togglePendingState(false);
197			setTimeout($.proxy(self.loopForStatus,self), 4500);
198			}else{
199			if(self._ocr.getStatus().processed > 0) self.updateFileList();
			0 ignored issues – show Coding Style Best Practice introduced 2016-09-12 03:08 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
200			self.togglePendingState(false);
201			}
202			}).fail(function(message){
203			self.notifyError(message);
204			setTimeout($.proxy(self.loopForStatus,self), 4500);
205			});
206			},
207			notifyError: function (message) {
208			/** global: OC */
209			OC.Notification.showHtml('<div>'+t('ocr', message)+'</div>', {timeout: 10, type: 'error'});
210			},
211			registerEvents: function(){
212			var self = this;
213			// Close on click on other element
214			$(document).click(function(event) {
215			if(!$(event.target).closest('#ocrDropdown').length) {
216			self.destroyDropdown();
217			self.setSelectedFiles([]);
218			}
219			});
220			// Register submit action
221			$(document).on('click', '#processOCR', function(){
222			var selectedLanguage = $('#ocrLanguage').val();
223			$.when(self._ocr.process(self.getSelectedFiles(), selectedLanguage)).done(function(){
224			self.destroyDropdown();
225			self.setSelectedFiles([]);
226			// status monitoring init
227			self.togglePendingState(true);
228			setTimeout($.proxy(self.loopForStatus,self), 4500);
229			}).fail(function(message){
230			self.notifyError('OCR processing failed: ' + message);
231			self.destroyDropdown();
232			});
233			});
234			// Register click selectedFilesAction
235			$(document).on('click', '#selectedFilesOCR', function(){
236			var html = self.renderDropdown();
237			$(html).appendTo($('tr').find('th.column-name'));
238			self.setSelectedFiles(OCA.Files.App.fileList.getSelectedFiles());
239			return false;
240			});
241			// Register checkbox events
242			OCA.Files.App.fileList.$fileList.on('change', 'td.filename>.selectCheckBox', _.bind(self.toggleSelectedActionButton, this));
			0 ignored issues – show Bug introduced 2016-09-12 03:08 UTC by Report Bug Copy Issue Report The variable `_` seems to be never declared. If this is a global, consider adding a `/** global: _ */` 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...
243			OCA.Files.App.fileList.$el.find('.select-all').click(_.bind(self.toggleSelectedActionButton, this));
244			}
245			};
246			/** global: OCA */
247			if (OCA.Ocr) {
248			OCA.Ocr.View = View;
249			}
250			})();

janis91 / ocr

Pull Request — master (#6)

js/ocrview.js B

Complexity

Size

Duplication

Importance

17 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like