convert initListSectionItemListeners to js

Removed jQuery from background

src/background.js

@@ -1,4 +1,3 @@
-window.$ = window.jQuery = require('jquery');
 window.forge = require('node-forge');
 window.tldjs = require('tldjs');
 

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) {

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, $analytics, i18nService, $timeout) {
-        utilsService.initListSectionItemListeners($(document), angular);
+        $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
         };

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) {

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) {

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) {

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) {
+        i18nService, constantsService, cryptoService, lockService, $timeout) {
-        utilsService.initListSectionItemListeners($(document), angular);
+        $timeout(function () {
+            utilsService.initListSectionItemListeners(document, angular);
+        }, 500);
+
         $scope.showOnLocked = !utilsService.isFirefox() && !utilsService.isEdge();
         $scope.lockOption = '';
         $scope.i18n = i18nService;

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) {

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 || '';

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) {
+        $timeout(function () {
-            $('#username').focus();
+            utilsService.initListSectionItemListeners(document, angular);
-        }
+
-        else {
+            if (!$stateParams.cipher && $scope.cipher.name && $scope.cipher.login && $scope.cipher.login.uri) {
-            $('#name').focus();
+                document.getElementById('loginUsername').focus();
-        }
+            }
-        utilsService.initListSectionItemListeners($(document), angular);
+            else {
+                document.getElementById('name').focus();
+            }
+        }, 500);
 
         folderService.getAllDecrypted().then(function (folders) {
             $scope.folders = folders;

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) {
+        SweetAlert, utilsService, $analytics, i18nService, cryptoService, tokenService, $timeout) {
-        $scope.i18n = i18nService;
+        $timeout(function () {
-        utilsService.initListSectionItemListeners($(document), angular);
+            utilsService.initListSectionItemListeners(document, angular);
+        }, 500);
 
+        $scope.i18n = i18nService;
         $scope.isPremium = tokenService.getPremium();
         $scope.canAccessAttachments = $scope.isPremium;
         $scope.hasUpdatedKey = false;

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);
         };

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) {
+        const sectionItems = doc.querySelectorAll('.list-section-item');
-            if (e.isDefaultPrevented && e.isDefaultPrevented.name === 'returnTrue') {
+        for (const item of sectionItems) {
-                return;
+            item.addEventListener('click', (e) => {
-            }
+                if (e.defaultPrevented) {
-
+                    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');
                 }
-            } else if (select.length > 0) {
-                select.focus();
-            }
-        });
 
-        doc.on('focus', '.list-section-item input, .list-section-item select, .list-section-item textarea',
+                const el = e.target as HTMLElement;
-            function(e: Event) {
+
-                $(this).parent().addClass('active');
+                // Labels will already focus the input
-            });
+                if (el.tagName != null && el.tagName.toLowerCase() === 'label') {
-        doc.on('blur', '.list-section-item input, .list-section-item select, .list-section-item textarea',
+                    return;
-            function(e: Event) {
+                }
-                $(this).parent().removeClass('active');
+
-            });
+                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 {