convert icon component to ts

This commit is contained in:
Kyle Spearrin 2017-10-30 23:44:53 -04:00
parent f922b2e0cb
commit b3c671cca0
7 changed files with 126 additions and 107 deletions

View File

@ -59,7 +59,6 @@ require('./directives/formDirective.js');
require('./directives/stopClickDirective.js');
require('./directives/stopPropDirective.js');
require('./directives/fallbackSrcDirective.js');
require('./components/iconComponent.js');
require('./components/actionButtonsComponent.js');
require('./services/backgroundService.js');
require('./services/authService.js');

View File

@ -15,7 +15,6 @@ class CipherItemsController implements ng.IController {
select(cipher: any) {
return this.onSelected()(cipher);
}
}
export const CipherItemsComponent = {

View File

@ -1,7 +1,9 @@
import * as angular from 'angular';
import { CipherItemsComponent } from './cipher-items.component';
import { IconComponent } from './icon.component';
export default angular
.module('bit.components', [])
.component('cipherItems', CipherItemsComponent)
.component('icon', IconComponent)
.name;

View File

@ -1,4 +1,4 @@
<div class="icon">
<div class="icon">
<img ng-src="{{$ctrl.image}}" fallback-src="{{$ctrl.fallbackImage}}" ng-if="$ctrl.imageEnabled && $ctrl.image" alt="" />
<i class="fa fa-fw fa-lg {{$ctrl.icon}}" ng-if="!$ctrl.imageEnabled || !$ctrl.image"></i>
</div>

View File

@ -0,0 +1,91 @@
import * as template from './icon.component.html';
class IconController implements ng.IController {
onSelected: Function;
onView: Function;
cipher: any;
icon: string;
image: string;
fallbackImage: string;
imageEnabled: boolean;
private iconsUrl: string;
constructor(private stateService: any, private constantsService: any, private environmentService: any) {
this.imageEnabled = stateService.getState('faviconEnabled');
this.iconsUrl = environmentService.iconsUrl;
if (!this.iconsUrl) {
if (environmentService.baseUrl) {
this.iconsUrl = environmentService.baseUrl + '/icons';
}
else {
this.iconsUrl = 'https://icons.bitwarden.com';
}
}
}
$onChanges() {
switch (this.cipher.type) {
case this.constantsService.cipherType.login:
this.icon = 'fa-globe';
this.setLoginIcon();
break;
case this.constantsService.cipherType.secureNote:
this.icon = 'fa-sticky-note-o';
break;
case this.constantsService.cipherType.card:
this.icon = 'fa-credit-card';
break;
case this.constantsService.cipherType.identity:
this.icon = 'fa-id-card-o';
break;
default:
break;
}
}
private setLoginIcon() {
if (this.cipher.login.uri) {
let hostnameUri = this.cipher.login.uri;
let isWebsite = false;
if (hostnameUri.indexOf('androidapp://') === 0) {
this.icon = 'fa-android';
this.image = null;
}
else if (hostnameUri.indexOf('iosapp://') === 0) {
this.icon = 'fa-apple';
this.image = null;
}
else if (this.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('.') > -1) {
hostnameUri = 'http://' + hostnameUri;
isWebsite = true;
}
else if (this.imageEnabled) {
isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > -1;
}
if (this.imageEnabled && isWebsite) {
try {
const url = new URL(hostnameUri);
this.image = this.iconsUrl + '/' + url.hostname + '/icon.png';
this.fallbackImage = chrome.extension.getURL('images/fa-globe.png');
}
catch (e) { }
}
}
else {
this.image = null;
}
}
}
export const IconComponent = {
bindings: {
cipher: '<',
},
controller: IconController,
template,
};

View File

@ -1,78 +0,0 @@
angular
.module('bit.components')
.component('icon', {
bindings: {
cipher: '<'
},
templateUrl: 'app/components/views/icon.html',
controller: function (stateService, constantsService, environmentService) {
var ctrl = this;
ctrl.imageEnabled = stateService.getState('faviconEnabled');
var iconsUrl = environmentService.iconsUrl;
if (!iconsUrl) {
if (environmentService.baseUrl) {
iconsUrl = environmentService.baseUrl + '/icons';
}
else {
iconsUrl = 'https://icons.bitwarden.com';
}
}
ctrl.$onChanges = function () {
switch (ctrl.cipher.type) {
case constantsService.cipherType.login:
ctrl.icon = 'fa-globe';
setLoginIcon(ctrl.cipher);
break;
case constantsService.cipherType.secureNote:
ctrl.icon = 'fa-sticky-note-o';
break;
case constantsService.cipherType.card:
ctrl.icon = 'fa-credit-card';
break;
case constantsService.cipherType.identity:
ctrl.icon = 'fa-id-card-o';
break;
default:
break;
}
};
function setLoginIcon() {
if (ctrl.cipher.login.uri) {
var hostnameUri = ctrl.cipher.login.uri,
isWebsite = false;
if (hostnameUri.indexOf('androidapp://') === 0) {
ctrl.icon = 'fa-android';
ctrl.image = null;
}
else if (hostnameUri.indexOf('iosapp://') === 0) {
ctrl.icon = 'fa-apple';
ctrl.image = null;
}
else if (ctrl.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('.') > -1) {
hostnameUri = "http://" + hostnameUri;
isWebsite = true;
}
else if (ctrl.imageEnabled) {
isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > -1;
}
if (ctrl.imageEnabled && isWebsite) {
try {
var url = new URL(hostnameUri);
ctrl.image = iconsUrl + '/' + url.hostname + '/icon.png';
ctrl.fallbackImage = chrome.extension.getURL('images/fa-globe.png');
}
catch (e) { }
}
}
else {
ctrl.image = null;
}
}
}
});

View File

@ -2,34 +2,40 @@
"extends": "tslint:recommended",
"rules": {
"ban-types": {
"options": [
["Object", "Avoid using the `Object` type. Did you mean `object`?"],
["Boolean", "Avoid using the `Boolean` type. Did you mean `boolean`?"],
["Number", "Avoid using the `Number` type. Did you mean `number`?"],
["String", "Avoid using the `String` type. Did you mean `string`?"],
["Symbol", "Avoid using the `Symbol` type. Did you mean `symbol`?"]
]
"options": [
[ "Object", "Avoid using the `Object` type. Did you mean `object`?" ],
[ "Boolean", "Avoid using the `Boolean` type. Did you mean `boolean`?" ],
[ "Number", "Avoid using the `Number` type. Did you mean `number`?" ],
[ "String", "Avoid using the `String` type. Did you mean `string`?" ],
[ "Symbol", "Avoid using the `Symbol` type. Did you mean `symbol`?" ]
]
},
"member-access": [true, "no-public"],
"member-ordering": [true, {"order": [
"public-static-field",
"public-static-method",
"protected-static-field",
"protected-static-method",
"private-static-field",
"private-static-method",
"public-instance-field",
"protected-instance-field",
"private-instance-field",
"public-constructor",
"protected-constructor",
"private-constructor",
"public-instance-method",
"protected-instance-method",
"private-instance-method"
]}],
"member-access": [ true, "no-public" ],
"member-ordering": [
true,
{
"order": [
"public-static-field",
"public-static-method",
"protected-static-field",
"protected-static-method",
"private-static-field",
"private-static-method",
"public-instance-field",
"protected-instance-field",
"private-instance-field",
"public-constructor",
"protected-constructor",
"private-constructor",
"public-instance-method",
"protected-instance-method",
"private-instance-method"
]
}
],
"no-empty": [ true, "allow-empty-catch" ],
"object-literal-sort-keys": false,
"quotemark": [true, "single"],
"quotemark": [ true, "single" ],
"whitespace": [
true,
"check-branch",