File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
close
|
Type : EventEmitter
|
|
|
Methods
|
Public
closeModal
|
closeModal(contentCreditsModal)
|
|
|
Parameters :
| Name |
Optional |
| contentCreditsModal |
No
|
|
|
ngOnChanges
|
ngOnChanges()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
contentCreditsModal
|
Decorators :
@ViewChild('contentCreditsModal')
|
|
|
|
showContentCreditModal
|
Default value : false
|
|
|
|
Private
unsubscribe
|
Default value : new Subject<void>()
|
|
|
import { Component, OnInit, Input, EventEmitter, Output, OnChanges, ViewChild } from '@angular/core';
import { ResourceService } from '@sunbird/shared';
import * as _ from 'lodash-es';
import { ContentData, ContentCreditsData } from '@sunbird/shared';
import { fromEvent, Subject } from 'rxjs';
@Component({
selector: 'app-content-credits',
templateUrl: './content-credits.component.html',
styleUrls: ['./content-credits.component.scss']
})
export class ContentCreditsComponent implements OnInit, OnChanges {
@Input() contentData: ContentData;
@Output() close = new EventEmitter<any>();
@ViewChild('contentCreditsModal') contentCreditsModal;
showContentCreditModal = false;
instance: string;
contentCreditsData: ContentCreditsData;
private unsubscribe = new Subject<void>();
constructor(public resourceService: ResourceService) {
}
ngOnInit() {
this.instance = _.upperCase(this.resourceService.instance);
/* Listen for back button click and close popup */
fromEvent(window, 'popstate')
.subscribe((e) => {
this.closeModal(this.contentCreditsModal);
});
}
ngOnChanges() {
this.contentCreditsData = { contributors: '', creators: '', attributions: '', copyright: '' };
if (this.contentData) {
if (this.contentData.copyright) {
this.contentCreditsData['copyright'] = this.contentData.copyright;
}
// contributors , it is a combination of content credits names, creators, and owner
const contentCredits = _.get(this.contentData, 'contentCredits');
const contentCreditNames = contentCredits && contentCredits.length ? _.map(contentCredits, 'name') : [];
const contirbutors = this.contentData['contributors'] ? this.contentData['contributors'].split(',') : [];
if (this.contentData['owner']) {
contirbutors.push(this.contentData['owner']);
}
this.contentCreditsData['contributors'] = (_.compact(_.uniq(_.union(contentCreditNames, contirbutors).sort())).join(', '));
// creators is a combination of creators and creator
const creators = this.contentData['creators'] ? this.contentData['creators'].split(',') : [];
if (this.contentData['creator']) {
creators.push(this.contentData['creator']);
}
// attributors
if (_.get(this.contentData, 'attributions')) {
const attributions = _.isString(_.get(this.contentData, 'attributions')) ?
_.get(this.contentData, 'attributions').split(',') : _.get(this.contentData, 'attributions');
this.contentCreditsData['attributions'] = (_.compact(_.uniq(attributions).sort()).join(', '));
}
}
}
public closeModal(contentCreditsModal) {
contentCreditsModal.deny();
this.close.emit();
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
}
<app-modal-wrapper [config]="{disableClose: true, size: 'small'}" (dismiss)="closeModal(contentCreditsModal)"
#contentCreditsModal>
<ng-template sbModalContent>
<div class="sb-modal">
<div class="transition ui dimmer page modals active visible">
<div class="ui modal transition active visible small">
<button aria-label="close dialog" mat-dialog-close class="mat-close-btn">
<span>×</span>
</button>
<!--Header-->
<div class="sb-modal-header">
{{resourceService?.frmelmnts?.lbl?.credits | uppercase}}
</div>
<!--/Header-->
<!--Content-->
<div class="sb-modal-content">
<div class="ui list">
<div class="item mt-10" *ngIf="contentData.copyright">
<div class="header text-gray">{{resourceService.frmelmnts.lbl.copyRight | uppercase}}</div>
<div class="mt-5">{{contentData.copyright}}
<span *ngIf="contentData.copyrightYear">, {{contentData.copyrightYear}}</span>
</div>
</div>
<div class="item mt-10" *ngIf="contentCreditsData.attributions">
<div class="header text-gray">{{resourceService?.frmelmnts?.lbl?.attributions | uppercase}}</div>
<div class="mt-5">{{contentCreditsData.attributions}}</div>
</div>
<div class="item"
*ngIf="contentData && contentData.originData && (contentData['contentType'] === 'Course')">
<div class="gray-shade mt-10">
{{resourceService.frmelmnts.lbl?.contentcopiedtitle}}
</div>
<div class="item mt-10">
<div class="header text-gray">{{resourceService.frmelmnts.lbl?.contenttype | uppercase}}</div>
<div class="mt-5">{{contentData.originData.name}}</div>
</div>
<div class="item mt-10" *ngIf="contentData?.originData?.author">
<div class="header text-gray">{{resourceService.frmelmnts.lbl?.authorofsourcecontent | uppercase}}
</div>
<div class="mt-5">{{contentData.originData.author}}</div>
</div>
<div class="item mt-10">
<div class="header text-gray">{{resourceService.frmelmnts.lbl?.licenseTerms | uppercase}}</div>
<div class="mt-5">{{contentData.originData.license}}</div>
</div>
<div class="item mt-10">
<div class="header text-gray">
{{resourceService.frmelmnts.lbl?.publishedOnInstanceName | interpolate:'{instance}': instance |
uppercase}}</div>
<div class="mt-5">{{contentData.originData.organisation[0]}}</div>
</div>
</div>
<!-- Reverted -->
<!-- If content credits / originData unavailable -->
<!-- <div class="item mt-10" *ngIf="contentData && !contentData.originData && !contentData.copyright && !contentCreditsData.attributions">
<div class="mt-5">{{resourceService?.frmelmnts?.lbl?.noCreditsAvailable}}</div>
</div> -->
<!-- If content credits / originData unavailable -->
</div>
</div>
<!--/Content-->
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.ui.popup::after {
background-color: var(--rc-007AFF) !important;
background:var(--rc-007AFF) !important
}
.gray-shade {
margin: calculateRem(10px) calculateRem(-16px) 0px calculateRem(-16px);
background: var(--gray-0);
padding-left: calculateRem(16px);
font: caption;
font-size: calculateRem(15px);
font-weight: bold;
padding-top: calculateRem(5px);
padding-bottom: calculateRem(7px);
}
Legend
Html element with directive