Creative Commons Licenses (10x)

src/app/core/submission/models/submission-cc-license.model.ts

@@ -43,4 +43,5 @@ export interface Option {
   id: string;
   label: string;
   description: string;
+  default: boolean;
 }

src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html

@@ -1,147 +1,142 @@
 @if (submissionCcLicenses) {
-  <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">
-
-        @if(submissionCcLicenses?.length === 0) {
-          <button class="dropdown-item disabled">
-            {{ 'submission.sections.ccLicense.none' | translate }}
-          </button>
-        } @else {
-          @for(license of submissionCcLicenses; track license.id) {
-            <button class="dropdown-item" (click)="selectCcLicense(license)">
-              {{ license.name }}
-            </button>
-          }
-        }
-      </div>
-    </div>
-  </div>
+<div class="mb-4 ccLicense-select">
+  <p [dsMarkdown]="'submission.sections.ccLicense.info' | translate "></p>
+  <ds-select [disabled]="!submissionCcLicenses">
+    <ng-container class="selection">
+      <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>
+    <ng-container class="menu">
+      <button *ngIf="submissionCcLicenses?.length == 0"
+              class="dropdown-item disabled">
+        {{ 'submission.sections.ccLicense.none' | translate }}
+      </button>
+      <button *ngFor="let license of submissionCcLicenses"
+              class="dropdown-item"
+              (click)="selectCcLicense(license)">
+        {{ license.name }}
+      </button>
+    </ng-container>
+  </ds-select>
+</div>
 }
 
-@if (getSelectedCcLicense()) {
-  @for (field of getSelectedCcLicense().fields; track field) {
-    <div
-      class="mb-4">
+<ng-container *ngIf="getSelectedCcLicense()">
+  <div class="form-control" style="height: auto">
+    <div *ngFor="let field of getSelectedCcLicense().fields" class="m-0">
+
       <div class="d-flex flex-row">
-        <div class="fw-bold {{ field.id }}">
-          {{ field.label }}
+        <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>
-        <button
-          class="btn btn-outline-info btn-sm ms-2"
-          (click)="openInfoModal(infoModal)">
-          <i class="fas fa-question"></i>
-        </button>
       </div>
+
       <ng-template #infoModal>
         <div>
           <div class="modal-header mb-4 ">
             <div>
-              <h4>
-                {{ field.label }}
-              </h4>
+              <h4>{{ field.label }}</h4>
               <div [innerHTML]="field.description"></div>
             </div>
-            <button type="button" class="btn-close"
-              (click)="closeInfoModal()" aria-label="Close">
+            <button type="button" class="close mb-1" (click)="closeInfoModal()" aria-label="Close">
+              <span aria-hidden="true">×</span>
             </button>
           </div>
           <div class="modal-body">
-            @for (value of field.enums; track value) {
-              <div
-                class="mb-4">
-                <h5>
-                  {{ value.label }}
-                </h5>
-                <div [innerHTML]="value.description" class="fw-light"></div>
-              </div>
-            }
+            <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>
-      @if (field.enums?.length > 5) {
-        <ds-select [disabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
-          <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
-            @if (option) {
-              <span>
-                {{ option.label }}
+
+      <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-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>
+
+      <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 *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>
+    </div>
+
+    <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 [dsMarkdown]="'submission.sections.ccLicense.publicdomain' | translate"></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>
-            }
-            @if (!option) {
+            </ng-template>
+            <ng-template #zero_content>
               <span>
-                {{ 'submission.sections.ccLicense.option.select' | translate }}
+                {{ 'submission.sections.ccLicense.cczero' | translate }}
               </span>
-            }
-          </ng-container>
-          <ng-container class="menu">
-            <div class="options-select-menu overflow-auto">
-              @for (option of field.enums; track option) {
-                <button
-                  class="dropdown-item"
-                  (click)="selectOption(getSelectedCcLicense(), field, option)">
-                  {{ option.label }}
-                </button>
-              }
-            </div>
-          </ng-container>
-        </ds-select>
-      }
-      @if (field.enums?.length <= 5) {
-        @for (option of field.enums; track option) {
-          <div
-            class="d-flex flex-row m-1">
-            <div (click)="selectOption(getSelectedCcLicense(), field, option)">
-              <input type="radio"
-                title="{{ option.label }}"
-                class="me-1"
-                [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
-              <span>{{ option.label }}</span>
-            </div>
+            </ng-template>
           </div>
-        }
-      }
-    </div>
-  }
-}
-
-@if (ccLicenseLink$) {
-  @let licenseLink = (ccLicenseLink$ | async);
-  @if (licenseLink) {
-    <div
-      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="me-2"
-                 title="accepted"
-                 [checked]="accepted">
-          <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
         </div>
       </div>
-    </div>
-  } @else {
-    <ds-loading></ds-loading>
-  }
-}
+    </ng-container>
+  </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>

src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts

@@ -56,11 +56,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',
             },
           ],
@@ -73,11 +75,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',
             },
           ],
@@ -102,12 +106,14 @@ describe('SubmissionSectionCcLicensesComponent', () => {
             {
               id: 'test enum id 2a I',
               label: 'test enum label 2a I',
-              description: 'test enum description 2a I',
+              default: true,
+              description: 'test enum description 2a I'
             },
             {
               id: 'test enum id 2a II',
               label: 'test enum label 2a II',
-              description: 'test enum description 2a II',
+              default: false,
+              description: 'test enum description 2a II'
             },
           ],
         },
@@ -119,12 +125,14 @@ describe('SubmissionSectionCcLicensesComponent', () => {
             {
               id: 'test enum id 2b I',
               label: 'test enum label 2b I',
-              description: 'test enum description 2b I',
+              default: true,
+              description: 'test enum description 2b I'
             },
             {
               id: 'test enum id 2b II',
               label: 'test enum label 2b II',
-              description: 'test enum description 2b II',
+              default: false,
+              description: 'test enum description 2b II'
             },
           ],
         },