File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
content
|
Type : ContentData
|
|
|
|
corRelationList
|
Type : Array<CorrelationData>
|
|
|
|
licenseDetails
|
Type : LicenseDetails
|
|
|
Methods
|
Private
licenseSectionClicked
|
licenseSectionClicked(params)
|
|
|
|
|
|
mergeProperties
|
mergeProperties(mergeProp)
|
|
|
Parameters :
| Name |
Optional |
| mergeProp |
No
|
|
|
openBrowser
|
openBrowser(url)
|
|
|
|
|
|
showLicensce
|
showLicensce()
|
|
|
|
|
|
showCredits
|
Default value : false
|
|
|
import {Component, Input, OnInit} from '@angular/core';
import {ContentUtil} from '@app/util/content-util';
import {ContentData, CorrelationData, LicenseDetails, Rollup, TelemetryObject} from 'sunbird-sdk';
import {CommonUtilService, ID, InteractType, PageId, TelemetryGeneratorService} from '@app/services';
@Component({
selector: 'app-license-card-component',
templateUrl: './license-card-component.component.html',
styleUrls: ['./license-card-component.component.scss'],
})
export class LicenseCardComponentComponent implements OnInit {
showCredits = false;
@Input() content: ContentData;
@Input() licenseDetails: LicenseDetails;
@Input() appName: string;
@Input() objRollup: Rollup;
@Input() corRelationList: Array<CorrelationData>;
@Input() pageId: PageId;
private objId;
private objVer;
private objType;
constructor(
private telemetryGeneratorService: TelemetryGeneratorService,
private commonUtilService: CommonUtilService
) {
}
ngOnInit() {
if(this.content){
this.objId = this.content.identifier;
this.objType = this.content.contentType;
this.objVer = this.content.pkgVersion;
}
}
showLicensce() {
this.showCredits = !this.showCredits;
if (this.showCredits) {
this.licenseSectionClicked('expanded');
} else {
this.licenseSectionClicked('collapsed');
}
}
private licenseSectionClicked(params) {
const telemetryObject = new TelemetryObject(this.objId, this.objType, this.objVer);
this.telemetryGeneratorService.generateInteractTelemetry(
params === 'expanded' ? InteractType.LICENSE_CARD_EXPANDED : InteractType.LICENSE_CARD_COLLAPSED,
'',
undefined,
this.pageId,
telemetryObject,
undefined,
this.objRollup,
this.corRelationList,
ID.LICENSE_CARD_CLICKED
);
}
mergeProperties(mergeProp) {
return ContentUtil.mergeProperties(this.content, mergeProp);
}
openBrowser(url) {
this.commonUtilService.openUrlInBrowser(url);
}
}
<ion-card *ngIf="content" class="ion-no-margin">
<ion-card-content class="ion-no-padding">
<div *ngIf="content.author || content.organisation || content.license || content.copyright">
<div>
<div class="ion-padding">
<div role="button" class="font-14-new view-credits" aria-level="1" (click)="showLicensce()">
<span>
<strong [attr.aria-label]="showCredits ?
'Credits & License info, expanded' : 'Credits & License info, Collapsed'">{{'CREDITS_LICENCE_INFO' | translate}}</strong>
</span>
<span *ngIf="showCredits">
<ion-icon name="arrow-up" aria-hidden="true"></ion-icon>
</span>
<span *ngIf="!showCredits">
<ion-icon name="arrow-down" aria-hidden="true"></ion-icon>
</span>
</div>
</div>
<div *ngIf="showCredits" class="showLicensce">
<div class="ion-padding">
<div *ngIf="content.author">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{'AUTHOR' | translate}}</strong>:
</ion-card-title>
<p>{{content.author}}</p>
</div>
<div *ngIf="content.creator">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'CREATORS' | translate:{'%s': appName} }}</strong>:
</ion-card-title>
<p>{{content.creator}} </p>
</div>
<div *ngIf="content.organisation">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'PUBLISHED_BY' | translate:{'%s': appName} }}</strong>:
</ion-card-title>
<p>{{content.organisation}} </p>
</div>
<div *ngIf="content.contributors || content.creators || content.attributions">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'ATTRIBUTIONS' | translate }}</strong>:
</ion-card-title>
<p>{{mergeProperties(['attributions', 'contributors', 'creators'])}}</p>
</div>
<div *ngIf="content.license && !content.licenseDetails">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'LICENSE' | translate }}</strong>:
</ion-card-title>
<p>{{content.license}}</p>
</div>
<div *ngIf="licenseDetails" class="ion-padding-bottom">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'LICENSE' | translate }}</strong>:
</ion-card-title>
<div>{{licenseDetails.name}}</div>
<div>{{licenseDetails.description}}</div>
<span (click)="openBrowser(licenseDetails.url)"
class="sb-legal-url">{{licenseDetails.url}}</span>
</div>
<div *ngIf="content.copyright">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'COPYRIGHT' | translate }}</strong>:
</ion-card-title>
<p>{{content.copyright}}{{content.copyrightYear ? ", " + content.copyrightYear : ""}}
</p>
</div>
</div>
<!--training derived from section starts-->
<div class="origin-data" *ngIf="content.originData">
<div class="font-14 traning-derived-label-background ion-padding-bottom">
<span><strong>{{'CONTENT_DERIVED_FROM' | translate}}</strong></span>
</div>
<div class="ion-padding">
<div *ngIf="content.originData.name">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong> {{'ORIGINAL_CONTENT' | translate}}</strong>:
</ion-card-title>
<p>{{content.originData.name}}</p>
</div>
<div *ngIf="content.originData.author">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'ORIGINAL_AUTHOR' | translate }}</strong>:
</ion-card-title>
<p>{{content.originData.author}}</p>
</div>
<div *ngIf="content.originData.license">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'LICENSE' | translate }}</strong>:
</ion-card-title>
<p>{{content.originData.license}}</p>
</div>
<div *ngIf="content.originData.organisation">
<ion-card-title class="font-12 subtitle-color label-margin-bottom">
<strong>{{ 'PUBLISHED_BY' | translate:{'%s': appName} }}</strong>:
</ion-card-title>
<p>{{content.originData.organisation[0]}}</p>
</div>
</div>
</div>
<!-- / training derived from section ends -->
</div>
</div>
</div>
<!--/credits and license info-->
</ion-card-content>
</ion-card>
@import "src/assets/styles/variables";
@import "src/assets/styles/_variables.scss";
.view-credits{
margin-left: 0;
span{
color: $blue;
ion-icon{
padding: 0 0 4px 8px;
vertical-align: middle;
font-size: 1.5rem;
margin-right: 2%;
float: right;
}
}
}
.showLicensce{
p{
margin-bottom: 16px;
}
ion-card-title{
strong{
font-size: .75rem;
}
}
}
.label-margin-bottom {
margin-bottom: 3px !important;
}
.subtitle-color{
color: map-get($colors, granite_gray);
}
.font-12 {
font-size: 0.75rem !important;
}
.font-14-new{
font-size: 1rem !important;
margin-top: 8px;
}
Legend
Html element with directive