From 9fe4b29a1ce011f3be011b3f0a2fa697515b2f35 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Thu, 9 Nov 2017 17:16:28 -0500 Subject: [PATCH] convert initListSectionItemListeners to js Removed jQuery from background --- src/background.js | 1 - .../app/accounts/accountsHintController.js | 10 +- .../app/accounts/accountsLoginController.js | 23 ++-- .../accountsLoginTwoFactorController.js | 5 +- .../accounts/accountsRegisterController.js | 11 +- .../settings/settingsAddFolderController.js | 10 +- src/popup/app/settings/settingsController.js | 7 +- .../settings/settingsEditFolderController.js | 12 ++- .../settings/settingsEnvironmentController.js | 7 +- .../app/vault/vaultAddCipherController.js | 21 ++-- .../app/vault/vaultAttachmentsController.js | 8 +- .../app/vault/vaultEditCipherController.js | 11 +- src/services/utils.service.ts | 101 ++++++++++-------- 13 files changed, 132 insertions(+), 95 deletions(-) diff --git a/src/background.js b/src/background.js index b8db9f36fb..fdbede9642 100644 --- a/src/background.js +++ b/src/background.js @@ -1,4 +1,3 @@ -window.$ = window.jQuery = require('jquery'); window.forge = require('node-forge'); window.tldjs = require('tldjs'); diff --git a/src/popup/app/accounts/accountsHintController.js b/src/popup/app/accounts/accountsHintController.js index e1d877205a..1cab6befa9 100644 --- a/src/popup/app/accounts/accountsHintController.js +++ b/src/popup/app/accounts/accountsHintController.js @@ -2,13 +2,15 @@ angular .module('bit.accounts') .controller('accountsHintController', function ($scope, $state, apiService, toastr, $q, utilsService, - $analytics, i18nService) { + $analytics, i18nService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + document.getElementById('email').focus(); + }, 500); + $scope.i18n = i18nService; $scope.model = {}; - utilsService.initListSectionItemListeners($(document), angular); - $('#email').focus(); - $scope.submitPromise = null; $scope.submit = function (model) { if (!model.email) { diff --git a/src/popup/app/accounts/accountsLoginController.js b/src/popup/app/accounts/accountsLoginController.js index 7f87316154..767abe6aaf 100644 --- a/src/popup/app/accounts/accountsLoginController.js +++ b/src/popup/app/accounts/accountsLoginController.js @@ -1,18 +1,19 @@ -angular +angular .module('bit.accounts') .controller('accountsLoginController', function ($scope, $state, $stateParams, authService, userService, toastr, - utilsService, $analytics, i18nService) { - utilsService.initListSectionItemListeners($(document), angular); + utilsService, $analytics, i18nService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + if ($stateParams.email) { + document.getElementById('master-password').focus(); + } + else { + document.getElementById('email').focus(); + } + }, 500); + $scope.i18n = i18nService; - - if ($stateParams.email) { - $('#master-password').focus(); - } - else { - $('#email').focus(); - } - $scope.model = { email: $stateParams.email }; diff --git a/src/popup/app/accounts/accountsLoginTwoFactorController.js b/src/popup/app/accounts/accountsLoginTwoFactorController.js index df3ff9dc46..96468c9133 100644 --- a/src/popup/app/accounts/accountsLoginTwoFactorController.js +++ b/src/popup/app/accounts/accountsLoginTwoFactorController.js @@ -4,8 +4,11 @@ angular .controller('accountsLoginTwoFactorController', function ($scope, $state, authService, toastr, utilsService, SweetAlert, $analytics, i18nService, $stateParams, $filter, constantsService, $timeout, $window, cryptoService, apiService, environmentService) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + }, 500); + $scope.i18n = i18nService; - utilsService.initListSectionItemListeners($(document), angular); var customWebVaultUrl = null; if (environmentService.baseUrl) { diff --git a/src/popup/app/accounts/accountsRegisterController.js b/src/popup/app/accounts/accountsRegisterController.js index a0cf9d0880..b3ab1f4cdf 100644 --- a/src/popup/app/accounts/accountsRegisterController.js +++ b/src/popup/app/accounts/accountsRegisterController.js @@ -3,13 +3,14 @@ angular .controller( 'accountsRegisterController', - function ($scope, $state, cryptoService, toastr, $q, apiService, utilsService, $analytics, i18nService) { + function ($scope, $state, cryptoService, toastr, $q, apiService, utilsService, $analytics, i18nService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + document.getElementById('email').focus(); + }, 500); + $scope.i18n = i18nService; - $scope.model = {}; - utilsService.initListSectionItemListeners($(document), angular); - $('#email').focus(); - $scope.submitPromise = null; $scope.submit = function (model) { if (!model.email) { diff --git a/src/popup/app/settings/settingsAddFolderController.js b/src/popup/app/settings/settingsAddFolderController.js index a16f7b9623..5a8c317794 100644 --- a/src/popup/app/settings/settingsAddFolderController.js +++ b/src/popup/app/settings/settingsAddFolderController.js @@ -2,12 +2,14 @@ angular .module('bit.settings') .controller('settingsAddFolderController', function ($scope, $q, folderService, $state, toastr, utilsService, - $analytics, i18nService) { + $analytics, i18nService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + document.getElementById('name').focus(); + }, 500); + $scope.i18n = i18nService; $scope.folder = {}; - utilsService.initListSectionItemListeners($(document), angular); - $('#name').focus(); - $scope.savePromise = null; $scope.save = function (model) { if (!model.name) { diff --git a/src/popup/app/settings/settingsController.js b/src/popup/app/settings/settingsController.js index 7a08a0d3fa..21ecf8f051 100644 --- a/src/popup/app/settings/settingsController.js +++ b/src/popup/app/settings/settingsController.js @@ -2,8 +2,11 @@ angular .module('bit.settings') .controller('settingsController', function ($scope, $state, SweetAlert, utilsService, $analytics, - i18nService, constantsService, cryptoService, lockService) { - utilsService.initListSectionItemListeners($(document), angular); + i18nService, constantsService, cryptoService, lockService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + }, 500); + $scope.showOnLocked = !utilsService.isFirefox() && !utilsService.isEdge(); $scope.lockOption = ''; $scope.i18n = i18nService; diff --git a/src/popup/app/settings/settingsEditFolderController.js b/src/popup/app/settings/settingsEditFolderController.js index 26de59b069..9b2fb5418d 100644 --- a/src/popup/app/settings/settingsEditFolderController.js +++ b/src/popup/app/settings/settingsEditFolderController.js @@ -1,12 +1,16 @@ -angular +angular .module('bit.settings') .controller('settingsEditFolderController', function ($scope, $stateParams, folderService, toastr, $state, SweetAlert, - utilsService, $analytics, i18nService) { + utilsService, $analytics, i18nService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + document.getElementById('name').focus(); + }, 500); + $scope.i18n = i18nService; $scope.folder = {}; var folderId = $stateParams.folderId; - $('#name').focus(); folderService.get(folderId).then(function (folder) { return folder.decrypt(); @@ -14,8 +18,6 @@ $scope.folder = model; }); - utilsService.initListSectionItemListeners($(document), angular); - $scope.savePromise = null; $scope.save = function (model) { if (!model.name) { diff --git a/src/popup/app/settings/settingsEnvironmentController.js b/src/popup/app/settings/settingsEnvironmentController.js index 914dd4a0ec..78b70c9bce 100644 --- a/src/popup/app/settings/settingsEnvironmentController.js +++ b/src/popup/app/settings/settingsEnvironmentController.js @@ -3,10 +3,11 @@ angular .controller('settingsEnvironmentController', function ($scope, i18nService, $analytics, utilsService, environmentService, toastr, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + }, 500); + $scope.i18n = i18nService; - - utilsService.initListSectionItemListeners($(document), angular); - $scope.baseUrl = environmentService.baseUrl || ''; $scope.webVaultUrl = environmentService.webVaultUrl || ''; $scope.apiUrl = environmentService.apiUrl || ''; diff --git a/src/popup/app/vault/vaultAddCipherController.js b/src/popup/app/vault/vaultAddCipherController.js index 83eb37cbd7..0f420f2b87 100644 --- a/src/popup/app/vault/vaultAddCipherController.js +++ b/src/popup/app/vault/vaultAddCipherController.js @@ -1,8 +1,8 @@ -angular +angular .module('bit.vault') .controller('vaultAddCipherController', function ($scope, $state, $stateParams, cipherService, folderService, - cryptoService, toastr, utilsService, $analytics, i18nService, constantsService) { + cryptoService, toastr, utilsService, $analytics, i18nService, constantsService, $timeout) { $scope.i18n = i18nService; $scope.constants = constantsService; $scope.addFieldType = constantsService.fieldType.text.toString(); @@ -30,13 +30,16 @@ angular.extend($scope.cipher, $stateParams.cipher); } - if (!$stateParams.cipher && $scope.cipher.name && $scope.cipher.login && $scope.cipher.login.uri) { - $('#username').focus(); - } - else { - $('#name').focus(); - } - utilsService.initListSectionItemListeners($(document), angular); + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + + if (!$stateParams.cipher && $scope.cipher.name && $scope.cipher.login && $scope.cipher.login.uri) { + document.getElementById('loginUsername').focus(); + } + else { + document.getElementById('name').focus(); + } + }, 500); folderService.getAllDecrypted().then(function (folders) { $scope.folders = folders; diff --git a/src/popup/app/vault/vaultAttachmentsController.js b/src/popup/app/vault/vaultAttachmentsController.js index c9c9cad016..116ac492ae 100644 --- a/src/popup/app/vault/vaultAttachmentsController.js +++ b/src/popup/app/vault/vaultAttachmentsController.js @@ -2,10 +2,12 @@ angular .module('bit.vault') .controller('vaultAttachmentsController', function ($scope, $state, $stateParams, cipherService, toastr, - SweetAlert, utilsService, $analytics, i18nService, cryptoService, tokenService) { - $scope.i18n = i18nService; - utilsService.initListSectionItemListeners($(document), angular); + SweetAlert, utilsService, $analytics, i18nService, cryptoService, tokenService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + }, 500); + $scope.i18n = i18nService; $scope.isPremium = tokenService.getPremium(); $scope.canAccessAttachments = $scope.isPremium; $scope.hasUpdatedKey = false; diff --git a/src/popup/app/vault/vaultEditCipherController.js b/src/popup/app/vault/vaultEditCipherController.js index ea31d3b0d8..443e0f6167 100644 --- a/src/popup/app/vault/vaultEditCipherController.js +++ b/src/popup/app/vault/vaultEditCipherController.js @@ -2,7 +2,12 @@ angular .module('bit.vault') .controller('vaultEditCipherController', function ($scope, $state, $stateParams, cipherService, folderService, - cryptoService, toastr, SweetAlert, utilsService, $analytics, i18nService, constantsService) { + cryptoService, toastr, SweetAlert, utilsService, $analytics, i18nService, constantsService, $timeout) { + $timeout(function () { + utilsService.initListSectionItemListeners(document, angular); + document.getElementById('name').focus(); + }, 500); + $scope.i18n = i18nService; $scope.constants = constantsService; $scope.showAttachments = !utilsService.isEdge(); @@ -16,8 +21,6 @@ angular folderId: null }; - $('#name').focus(); - if ($stateParams.cipher) { angular.extend($scope.cipher, $stateParams.cipher); } @@ -33,8 +36,6 @@ angular $scope.folders = folders; }); - utilsService.initListSectionItemListeners($(document), angular); - $scope.typeChanged = function () { $scope.cipher.type = parseInt($scope.selectedType); }; diff --git a/src/services/utils.service.ts b/src/services/utils.service.ts index 420680a8c9..29065050d2 100644 --- a/src/services/utils.service.ts +++ b/src/services/utils.service.ts @@ -293,53 +293,70 @@ export default class UtilsService { return this.analyticsIdCache; } - initListSectionItemListeners(doc: any, angular: any) { + initListSectionItemListeners(doc: Document, angular: any) { if (!doc) { - throw new Error('doc parameter required'); + throw new Error('theDoc parameter required'); } - doc.on('click', '.list-section-item', function(e: JQuery.Event) { - if (e.isDefaultPrevented && e.isDefaultPrevented.name === 'returnTrue') { - return; - } - - const text = $(this).find('input, textarea') - .not('input[type="checkbox"], input[type="radio"], input[type="hidden"]'); - const checkbox = $(this).find('input[type="checkbox"]'); - const select = $(this).find('select'); - - if (text.length > 0 && e.target === text[0]) { - return; - } - if (checkbox.length > 0 && e.target === checkbox[0]) { - return; - } - if (select.length > 0 && e.target === select[0]) { - return; - } - - e.preventDefault(); - - if (text.length > 0) { - text.focus(); - } else if (checkbox.length > 0) { - checkbox.prop('checked', !checkbox.is(':checked')); - if (angular) { - angular.element(checkbox[0]).triggerHandler('click'); + const sectionItems = doc.querySelectorAll('.list-section-item'); + for (const item of sectionItems) { + item.addEventListener('click', (e) => { + if (e.defaultPrevented) { + return; } - } else if (select.length > 0) { - select.focus(); - } - }); - doc.on('focus', '.list-section-item input, .list-section-item select, .list-section-item textarea', - function(e: Event) { - $(this).parent().addClass('active'); - }); - doc.on('blur', '.list-section-item input, .list-section-item select, .list-section-item textarea', - function(e: Event) { - $(this).parent().removeClass('active'); - }); + const el = e.target as HTMLElement; + + // Labels will already focus the input + if (el.tagName != null && el.tagName.toLowerCase() === 'label') { + return; + } + + const textFilter = 'input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])'; + const text = el.querySelectorAll(textFilter + ',textarea'); + const checkbox = el.querySelectorAll('input[type="checkbox"]'); + const select = el.querySelectorAll('select'); + + // Return if they click the actual element + if (text.length > 0 && el === text[0]) { + return; + } + if (checkbox.length > 0 && el === checkbox[0]) { + return; + } + if (select.length > 0 && el === select[0]) { + return; + } + + e.preventDefault(); + + if (text.length > 0) { + (text[0] as HTMLElement).focus(); + } else if (select.length > 0) { + (select[0] as HTMLElement).focus(); + } else if (checkbox.length > 0) { + const cb = checkbox[0] as HTMLInputElement; + cb.checked = !cb.checked; + if (angular) { + angular.element(checkbox[0]).triggerHandler('click'); + } + } + }, false); + } + + const sectionFormItems = doc.querySelectorAll( + '.list-section-item input, .list-section-item select, .list-section-item textarea'); + for (const item of sectionFormItems) { + item.addEventListener('focus', (e: Event) => { + const el = e.target as HTMLElement; + el.parentElement.classList.add('active'); + }, false); + + item.addEventListener('blur', (e: Event) => { + const el = e.target as HTMLElement; + el.parentElement.classList.remove('active'); + }, false); + } } getDomain(uriString: string): string {