Skip to content

Creative Commons Licenses #6008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
bkeese wants to merge 1 commit into from
Closed

Creative Commons Licenses #6008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/core/submission/models/submission-cc-license.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,5 @@ export interface Option {
id: string;
label: string;
description: string;
default: boolean;
}
244 changes: 123 additions & 121 deletions src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,145 +1,147 @@
<ng-container *ngIf="selectedCcLicense">
<div class="mb-4 ccLicense-select">
<div ngbDropdown>
<input id="cc-license-dropdown"
class="form-control"
[(ngModel)]="selectedCcLicense.name"
placeholder="{{ !storedCcLicenseLink ? ('submission.sections.ccLicense.select' | translate) : ('submission.sections.ccLicense.change' | translate)}}"
[ngModelOptions]="{standalone: true}"
ngbDropdownToggle
role="combobox"
#script="ngModel">
<div ngbDropdownMenu aria-labelledby="cc-license-dropdown" class="w-100 scrollable-menu"
role="menu"
infiniteScroll
(scroll)="onScroll($event)"
[infiniteScrollDistance]="5"
[infiniteScrollThrottle]="300"
[infiniteScrollUpDistance]="1.5"
[fromRoot]="true"
[scrollWindow]="false">
<ng-container *ngIf="submissionCcLicenses?.length === 0; else licensesList">
<button class="dropdown-item disabled">
{{ 'submission.sections.ccLicense.none' | translate }}
</button>
</ng-container>
</div>
</div>
</div>
</ng-container>
<div class="mb-4 ccLicense-select">
<p [innerHTML]="'submission.sections.ccLicense.info' | translate | dsMarkdown | async "></p>
<ds-select
[disabled]="!submissionCcLicenses">

<ng-template #licensesList>
<ng-container *ngFor="let license of submissionCcLicenses">
<button class="dropdown-item" (click)="selectCcLicense(license)">
{{ license.name }}
</button>
</ng-container>
</ng-template>

<ng-container *ngIf="getSelectedCcLicense()">

<div *ngFor="let field of getSelectedCcLicense().fields"
class="mb-4">
<ng-container class="selection">
<span *ngIf="!submissionCcLicenses">
<ds-themed-loading></ds-themed-loading>
</span>
<span *ngIf="getSelectedCcLicense()">
{{ getSelectedCcLicense().name }}
</span>
<span *ngIf="submissionCcLicenses && !getSelectedCcLicense()">
<ng-container *ngIf="storedCcLicenseLink">
{{ 'submission.sections.ccLicense.change' | translate }}
</ng-container>
<ng-container *ngIf="!storedCcLicenseLink">
{{ 'submission.sections.ccLicense.select' | translate }}
</ng-container>
</span>
</ng-container>

<div class="d-flex flex-row">
<div class="font-weight-bold {{ field.id }}">
{{ field.label }}
</div>
<button
class="btn btn-outline-info btn-sm ml-2"
(click)="openInfoModal(infoModal)">
<i class="fas fa-question"></i>
<ng-container class="menu">
<button *ngIf="submissionCcLicenses?.length == 0"
class="dropdown-item disabled">
{{ 'submission.sections.ccLicense.none' | translate }}
</button>
</div>
<button *ngFor="let license of submissionCcLicenses"
class="dropdown-item"
(click)="selectCcLicense(license)">
{{ license.name }}
</button>
</ng-container>

<ng-template #infoModal>
</ds-select>
</div>

<div>
<ng-container *ngIf="getSelectedCcLicense()">
<div class="form-control" style="height: auto">
<div *ngFor="let field of getSelectedCcLicense().fields" class="m-0">

<div class="modal-header mb-4 ">
<div>
<h4>
{{ field.label }}
</h4>
<div [innerHTML]="field.description"></div>
</div>
<button type="button" class="close"
(click)="closeInfoModal()" aria-label="Close">
<span aria-hidden="true">×</span>
<div class="d-flex flex-row">
<div class="font-weight-bold {{ field.id }}">{{ field.label }}
<button class="btn btn-outline-info btn-sm ml-2 mb-1" (click)="openInfoModal(infoModal)">
<i class="fas fa-question"></i>
</button>
</div>
</div>

<div class="modal-body">
<div *ngFor="let value of field.enums"
class="mb-4">
<h5>
{{ value.label }}
</h5>
<div [innerHTML]="value.description" class="font-weight-light"></div>
<ng-template #infoModal>
<div>
<div class="modal-header mb-4 ">
<div>
<h4>{{ field.label }}</h4>
<div [innerHTML]="field.description"></div>
</div>
<button type="button" class="close mb-1" (click)="closeInfoModal()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div *ngFor="let value of field.enums" class="mb-4">
<h5>{{ value.label }}</h5>
<div [innerHTML]="value.description" class="font-weight-light"></div>
</div>
</div>
</div>
</ng-template>

</div>
<ds-select *ngIf="field.enums && field.enums?.length > 5" [disabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
<ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
<span *ngIf="option">{{ option.label }}</span>
<span *ngIf="!option">{{ 'submission.sections.ccLicense.option.select' | translate }}</span>
</ng-container>
<ng-container class="menu">
<div class="options-select-menu overflow-auto">
<button *ngFor="let option of field.enums" class="dropdown-item" (click)="selectOption(getSelectedCcLicense(), field, option)">
{{ option.label }}
</button>
</div>
</ng-container>
</ds-select>

</ng-template>
<ng-container *ngIf="field.enums && field.enums?.length <= 5">
<div *ngFor="let option of field.enums" class="d-flex flex-row ml-3">
<div (click)="selectOption(getSelectedCcLicense(), field, option)">
<input type="radio" title="{{ option.label }}" class="mr-1" [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
<span>{{ option.label }}</span>
</div>
</div>
</ng-container>

<ds-select *ngIf="field.enums?.length > 5" [disabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
<ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
<span *ngIf="option">
{{ option.label }}
</span>
<span *ngIf="!option">
{{ 'submission.sections.ccLicense.option.select' | translate }}
</span>
<ng-container *ngIf="field.type && field.type === 'textarea'">
<div role="group" class="form-row" style="width: 100%;">
<div class="col-sm-12 d-flex flex-column justify-content-start">
<textarea [(ngModel)]="data.ccLicense.fields['dc_rights']" (blur)="updateInput(getSelectedCcLicense(), field)" class="form-control" cols="20"
id="{{ field.id }}" name="{{ field.id }}" rows="2" spellcheck="true" wrap="undefined"></textarea>
<small class="text-muted ds-hint">{{ field.description }}</small>
</div>
</div>
</ng-container>
<ng-container class="menu">
<div class="options-select-menu overflow-auto">
<button *ngFor="let option of field.enums"
class="dropdown-item"
(click)="selectOption(getSelectedCcLicense(), field, option)">
{{ option.label }}
</button>

<ng-container *ngIf="field.type && field.type === 'input'">
<div role="group" class="form-row" style="width: 100%;">
<div class="col-sm-12 d-flex flex-column justify-content-start">
<input [(ngModel)]="data.ccLicense.fields['dc_rights_uri']" (blur)="updateInput(getSelectedCcLicense(), field)" class="form-control" id="{{ field.id }}"
name="{{ field.id }}" spellcheck="false" type="text">
<small class="text-muted ds-hint ng-star-inserted">{{ field.description }}</small>
</div>
</div>
</ng-container>
</ds-select>
</div>

<ng-container *ngIf="field.enums?.length <= 5">
<div *ngFor="let option of field.enums"
class="d-flex flex-row m-1">
<div (click)="selectOption(getSelectedCcLicense(), field, option)">
<input type="radio"
title="{{ option.label }}"
class="mr-1"
[checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
<span>{{ option.label }}</span>
<ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
<div class="mt-2 p-2 text-dark alert-info">
<div *ngIf="licenseLink && licenseLink!='All Rights Reserved' && licenseLink!='http://creativecommons.org/publicdomain/zero/1.0/'">
{{ 'submission.sections.ccLicense.selected' | translate }}
<a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">{{ licenseMap[licenseLink] }}</a>.
<p>{{ 'submission.sections.ccLicense.link2' | translate }}</p>
</div>
<div *ngIf="licenseLink && licenseLink=='http://creativecommons.org/publicdomain/zero/1.0/'">
<p [innerHTML]="'submission.sections.ccLicense.publicdomain' | translate | dsMarkdown | async"></p>
</div>
<div class="m-2">
<div (click)="setAccepted(!accepted)">
<input type="checkbox" class="mr-2" title="accepted">
<span *ngIf="licenseLink=='All Rights Reserved'; else other_content">
{{ 'submission.sections.ccLicense.copyrighted' | translate }}
</span>
<ng-template #other_content>
<span *ngIf="licenseLink!='http://creativecommons.org/publicdomain/zero/1.0/'; else zero_content">
{{ 'submission.sections.ccLicense.confirmation' | translate }}
</span>
</ng-template>
<ng-template #zero_content>
<span>
{{ 'submission.sections.ccLicense.cczero' | translate }}
</span>
</ng-template>
</div>
</div>
</div>
</ng-container>

</div>

</ng-container>

<ng-container *ngIf="ccLicenseLink$ | async as licenseLink">
<div *ngIf="!licenseLink">
<ds-themed-loading></ds-themed-loading>
</div>
<div *ngIf="licenseLink"
class="mt-2 p-4 bg-light text-dark">
<div>
{{ 'submission.sections.ccLicense.link' | translate }}
</div>
<a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
{{ licenseLink }}
</a>
<div class="m-2">
<div (click)="setAccepted(!accepted)">
<input type="checkbox"
class="mr-2"
title="accepted"
[checked]="accepted">
<span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
</div>
</div>
</div>
</ng-container>
<p class="small mb-0 mt-3">{{ 'submission.sections.ccLicense.attribution' | translate }}, <a href="http://creativecommons.org" target="_blank">creativecommons.org</a></p>
8 changes: 8 additions & 0 deletions src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,13 @@ describe('SubmissionSectionCcLicensesComponent', () => {
{
id: 'test enum id 1a I',
label: 'test enum label 1a I',
default: true,
description: 'test enum description 1a I',
},
{
id: 'test enum id 1a II',
label: 'test enum label 1a II',
default: false,
description: 'test enum description 1a II',
},
],
Expand All @@ -67,11 +69,13 @@ describe('SubmissionSectionCcLicensesComponent', () => {
{
id: 'test enum id 1b I',
label: 'test enum label 1b I',
default: true,
description: 'test enum description 1b I',
},
{
id: 'test enum id 1b II',
label: 'test enum label 1b II',
default: false,
description: 'test enum description 1b II',
},
],
Expand All @@ -96,11 +100,13 @@ describe('SubmissionSectionCcLicensesComponent', () => {
{
id: 'test enum id 2a I',
label: 'test enum label 2a I',
default: true,
description: 'test enum description 2a I'
},
{
id: 'test enum id 2a II',
label: 'test enum label 2a II',
default: false,
description: 'test enum description 2a II'
},
],
Expand All @@ -113,11 +119,13 @@ describe('SubmissionSectionCcLicensesComponent', () => {
{
id: 'test enum id 2b I',
label: 'test enum label 2b I',
default: true,
description: 'test enum description 2b I'
},
{
id: 'test enum id 2b II',
label: 'test enum label 2b II',
default: false,
description: 'test enum description 2b II'
},
],
Expand Down
Loading
Loading