pop out component

src/popup/app/components/components.module.ts

@@ -2,10 +2,12 @@ import * as angular from 'angular';
 import { ActionButtonsComponent } from './action-buttons.component';
 import { CipherItemsComponent } from './cipher-items.component';
 import { IconComponent } from './icon.component';
+import { PopOutComponent } from './pop-out.component';
 
 export default angular
     .module('bit.components', [])
     .component('cipherItems', CipherItemsComponent)
     .component('icon', IconComponent)
     .component('actionButtons', ActionButtonsComponent)
+    .component('popOut', PopOutComponent)
     .name;

src/popup/app/components/pop-out.component.html

@@ -0,0 +1 @@
+<a href="" ng-click="$ctrl.expand()"><i class="fa fa-external-link fa-rotate-270 fa-lg"></i></a>

src/popup/app/components/pop-out.component.ts

@@ -0,0 +1,56 @@
+import * as template from './pop-out.component.html';
+
+import { UtilsService } from '../../../services/abstractions/utils.service';
+
+class PopOutController implements ng.IController {
+    constructor(private $analytics: any, private $window: any, private utilsService: UtilsService) {
+    }
+
+    expand() {
+        this.$analytics.eventTrack('Expand Vault');
+
+        let href = this.$window.location.href;
+        if (this.utilsService.isEdge()) {
+            const popupIndex = href.indexOf('/popup/');
+            if (popupIndex > -1) {
+                href = href.substring(popupIndex);
+            }
+        }
+
+        if (chrome.windows.create) {
+            if (href.indexOf('?uilocation=') > -1) {
+                href = href.replace('uilocation=popup', 'uilocation=popout')
+                    .replace('uilocation=tab', 'uilocation=popout')
+                    .replace('uilocation=sidebar', 'uilocation=popout');
+            } else {
+                const hrefParts = href.split('#');
+                href = hrefParts[0] + '?uilocation=popout' + (hrefParts.length > 0 ? '#' + hrefParts[1] : '');
+            }
+
+            const bodyRect = document.querySelector('body').getBoundingClientRect();
+            chrome.windows.create({
+                url: href,
+                type: 'popup',
+                width: bodyRect.width + 60,
+                height: bodyRect.height,
+            });
+
+            if (this.utilsService.inPopup(this.$window)) {
+                this.$window.close();
+            }
+        } else {
+            href = href.replace('uilocation=popup', 'uilocation=tab')
+                .replace('uilocation=popout', 'uilocation=tab')
+                .replace('uilocation=sidebar', 'uilocation=tab');
+            chrome.tabs.create({
+                url: href,
+            });
+        }
+    }
+}
+
+export const PopOutComponent = {
+    bindings: {},
+    controller: PopOutController,
+    template,
+};

src/popup/app/current/views/current.html

@@ -1,6 +1,6 @@
 <div class="header header-search">
     <div class="left" ng-if="!main.inSidebar">
-        <a href="" ng-click="main.expandVault()"><i class="fa fa-external-link fa-rotate-270 fa-lg"></i></a>
+        <pop-out></pop-out>
     </div>
     <div class="left" ng-if="main.inSidebar">
         <a href="" ng-click="refresh()"><i class="fa fa-refresh fa-lg"></i></a>

src/popup/app/global/mainController.js

@@ -21,48 +21,6 @@ angular
             }
         });
 
-        self.expandVault = function (e) {
-            $analytics.eventTrack('Expand Vault');
-
-            var href = $window.location.href;
-            if (utilsService.isEdge()) {
-                var popupIndex = href.indexOf('/popup/');
-                if (popupIndex > -1) {
-                    href = href.substring(popupIndex);
-                }
-            }
-
-            if (chrome.windows.create) {
-                if (href.indexOf('?uilocation=') > -1) {
-                    href = href.replace('uilocation=popup', 'uilocation=popout').replace('uilocation=tab', 'uilocation=popout')
-                        .replace('uilocation=sidebar', 'uilocation=popout');
-                }
-                else {
-                    var hrefParts = href.split('#');
-                    href = hrefParts[0] + '?uilocation=popout' + (hrefParts.length > 0 ? '#' + hrefParts[1] : '');
-                }
-
-                var bodyRect = document.querySelector('body').getBoundingClientRect();
-                chrome.windows.create({
-                    url: href,
-                    type: 'popup',
-                    width: bodyRect.width + 60,
-                    height: bodyRect.height
-                });
-
-                if (utilsService.inPopup($window)) {
-                    $window.close();
-                }
-            }
-            else {
-                href = href.replace('uilocation=popup', 'uilocation=tab').replace('uilocation=popout', 'uilocation=tab')
-                    .replace('uilocation=sidebar', 'uilocation=tab');
-                chrome.tabs.create({
-                    url: href
-                });
-            }
-        };
-
         chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
             if (msg.command === 'syncCompleted') {
                 $scope.$broadcast('syncCompleted', msg.successfully);

src/popup/app/settings/views/settings.html

@@ -1,6 +1,6 @@
 <div class="header">
     <div class="left">
-        <a href="" ng-click="main.expandVault()"><i class="fa fa-external-link fa-rotate-270 fa-lg"></i></a>
+        <pop-out></pop-out>
     </div>
     <div class="title">{{i18n.settings}}</div>
 </div>

src/popup/app/tools/tools.component.html

@@ -1,6 +1,6 @@
 <div class="header">
     <div class="left">
-        <a href="" ng-click="main.expandVault()"><i class="fa fa-external-link fa-rotate-270 fa-lg"></i></a>
+        <pop-out></pop-out>
     </div>
     <div class="title">{{$ctrl.i18n.tools}}</div>
 </div>

src/popup/app/vault/views/vault.html

@@ -1,6 +1,6 @@
 <div class="header header-search">
     <div class="left">
-        <a href="" ng-click="main.expandVault()"><i class="fa fa-external-link fa-rotate-270 fa-lg"></i></a>
+        <pop-out></pop-out>
     </div>
     <div class="search" ng-style="{'visibility': main.disableSearch ? 'hidden' : 'visible'}">
         <input type="search" placeholder="{{::i18n.searchVault}}" id="search" ng-model="searchText" />