openaire-library/deposit/depositFirstPage.component.ts

import {Component, Input}           from '@angular/core';
import {ZenodoInformationClass} from './utils/zenodoInformation.class';
import {EnvProperties} from "../utils/properties/env-properties";
import {ActivatedRoute, Router} from "@angular/router";
import {PiwikService} from "../utils/piwik/piwik.service";
import {HelperService} from "../utils/helper/helper.service";
import {RouterHelper} from "../utils/routerHelper.class";
import {SEOService} from "../sharedComponents/SEO/SEO.service";
import {Meta, Title} from "@angular/platform-browser";

@Component({
  selector: 'deposit-first-page',
  template: `
    <schema2jsonld *ngIf="url" [URL]="url" [name]="title" type="other"></schema2jsonld>

    <div class="uk-section uk-padding-remove-bottom uk-padding-remove-top">
      <div class="explorePanelBackground communityPanelBackground uk-margin-top uk-padding-small">
        <div class="uk-align-center uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom">
          <div class="uk-h1 uk-width-1-2@m uk-width-1-1@s">
            <span class="uk-text-bold">Deposit or publish</span> your research in <span class="uk-text-bold">Open Access</span>
          </div>

          <div class="uk-container uk-container-large uk-margin-medium-top">
            <div class="uk-grid-divider" uk-grid>
              <div class="uk-width-1-2@m uk-width-1-1@s">
<!--                <p class="uk-margin-auto uk-text-large">How to <span class="uk-text-bold">deposit</span> your research...</p>-->
                <span class="uk-grid">
                  <span class="uk-margin-top uk-icon"><svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
<!--                  <span class="uk-margin-small-right" uk-icon="search"></span>-->
                  <span class="uk-width-expand">
                    <div class="uk-margin-small-bottom uk-h6">Find the appropriate repository or journal</div>
                    <div class="uk-text-small">
                      Find the appropriate repository to deposit your research products of any type (publication, data, software, other) or to include in your data management plan.
                      Search and browse for OpenAIRE compliant repositories registered in OpenDOAR and re3data.
                      <br>
                      Looking for Open Access journals? Find those that suit your 
                      <span *ngIf="communityId && communityId != 'openaire'">community </span><span *ngIf="!communityId || communityId == 'openaire'">needs </span> 
                      among the journals registered in the Directory of Open Access Journals (DOAJ).
                      <br>
                      To know more, read the OpenAIRE Open Access primer (<a target="_blank" href="https://www.openaire.eu/oa-basics">https://www.openaire.eu/oa-basics</a>)
                    </div>
                  </span>
                </span>
                <span class="uk-margin-top uk-grid">
                  <span class="uk-margin-top uk-icon"><svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="upload"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8"></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></span>
<!--                  <span class="uk-margin-small-right" uk-icon="upload"></span>-->
                  <span class="uk-width-expand">
                    <div class="uk-margin-small-bottom uk-h6">Deposit</div>
                    <div class="uk-text-small">
                      Find the repository to deposit your research or use the Zenodo<span *ngIf="communityId && communityId != 'openaire'"> communities suggested by the community curators</span><span *ngIf="!communityId || communityId == 'openaire'"> repository</span>.                    
                    </div>
                  </span>
                  <span class="uk-margin-top uk-grid">
                  <span class="uk-margin-top uk-icon">
<!--                    <svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="upload"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8"></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg>-->
                    <svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="push"><polygon points="12.15,4 9.5,1.4 6.85,4 6.15,3.3 9.5,0 12.85,3.3"></polygon><line fill="none" stroke="#000" x1="9.5" y1="10" x2="9.5" y2="1"></line><polyline fill="none" stroke="#000" points="6 5.5 3.5 5.5 3.5 18.5 15.5 18.5 15.5 5.5 13 5.5"></polyline></svg>
                  </span>
<!--                                      <span class="uk-margin-small-right" uk-icon="push"></span>-->
                  <span class="uk-width-expand">
                    <div class="uk-margin-small-bottom uk-h6">Publish</div>
                    <div class="uk-text-small">
                      Find the Open Access journals that suit your 
                      <span *ngIf="communityId && communityId != 'openaire'">community </span><span *ngIf="!communityId || communityId == 'openaire'">needs </span> 
                      among those registered in the Directory of Open Access Journals (DOAJ).
                    </div>
                  </span>
                  </span>
                </span>
                <div></div>
              </div>
              <div class="uk-width-1-2@m uk-width-1-1@s">
                <p class="uk-margin-auto-top uk-margin-remove-bottom uk-h5">
                  Start by <span class="uk-text-bold">searching</span> repositories and journals
                </p>
                <div class="uk-margin">
                  <form class="uk-search uk-search-default uk-width-xlarge@l uk-width-medium@m uk-width-auto">
<!--                    <span uk-search-icon class="uk-icon"></span>-->
                    <button routerLinkActive="uk-link"
                       routerLink="{{depositRoute}}" [queryParams]="{keyword: keyword}"  class="uk-search-icon uk-icon" uk-search-icon>
                    </button>
                    <input class="uk-search-input uk-input" 
                           type="search"  [(ngModel)]="keyword"  name="keyword"
                           placeholder="{{searchPlaceHolder}}">
                  </form>
                </div>
                <div class="uk-width-1-6 uk-text-right">
<!--                  <hr class="uk-divider-vertical">-->
<!--                  <div class=" uk-margin-top uk-margin-bottom uk-padding-small uk-text-bold">OR</div>-->
<!--                  <img src="assets/common-assets/OR.svg">-->
                  <div class="uk-margin-bottom">
                    <svg xmlns="http://www.w3.org/2000/svg" width="27" height="88" viewBox="0 0 27 88">
                      <g id="Group_749" data-name="Group 749" transform="translate(-872.168 -490.5)">
                        <text class="fill_text" id="OR" transform="translate(872.168 540.271)" font-size="18" font-family="OpenSans-Bold, Open Sans" font-weight="700" opacity="0.8"><tspan x="0" y="0">OR</tspan></text>
                        <line class="stroke_line" id="Line_225" data-name="Line 225" y2="30" transform="translate(885.5 490.5)" fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>
                        <line class="stroke_line" id="Line_226" data-name="Line 226" y2="30" transform="translate(885.5 548.5)" fill="none" stroke="#000" stroke-width="1" opacity="0.2"/>
                      </g>
                    </svg>
                  </div>
                  <!--                  <hr class="uk-divider-vertical">-->
                </div>
                  
                <div>
                  <a  [queryParams]="properties.environment!='development'?{}:routerHelper.createQueryParam('communityId',communityId)" routerLinkActive="router-link-active" [routerLink]="depositRoute" 
                      type="submit" class="uk-button uk-button-large portal-button uk-padding uk-padding-remove-vertical">
                    <span><span>Browse all </span><span uk-icon="arrow-right"></span></span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="uk-section tm-middle uk-container uk-container-large uk-margin-small-top uk-padding-remove-top uk-padding-remove-bottom">
      <div class="uk-container uk-container-large uk-margin-bottom exploreBorder communityBorder uk-margin-medium-top">
        <div class="uk-grid uk-padding">
          <div class="uk-width-1-2 uk-text-center">
            <div class="uk-margin-top">
              <svg xmlns="http://www.w3.org/2000/svg" width="173" height="56.685" viewBox="0 0 173 56.685"><defs><style>.a{fill:#191919;}</style></defs><path class="a" d="M171.749,22.311a16.158,16.158,0,0,0-3.364-4.953A15.511,15.511,0,0,0,157.4,12.837a15.213,15.213,0,0,0-6.074,1.206,16.4,16.4,0,0,0-2.63,1.424,16.2,16.2,0,0,0-2.325,1.891,14.893,14.893,0,0,0-1.242,1.383,19.241,19.241,0,0,0-1.173,1.7,19.372,19.372,0,0,0-1.482,3.343c.048-1.943.332-4.842,1.482-6.468V3.272a3.081,3.081,0,0,0-.993-2.323,3.251,3.251,0,0,0-5.556,2.323V15.765a17.084,17.084,0,0,0-4.261-2.156,14.8,14.8,0,0,0-4.781-.773,15.314,15.314,0,0,0-6.028,1.206,15.575,15.575,0,0,0-4.959,3.316,16.056,16.056,0,0,0-3.352,4.953c-.063.142-.118.286-.177.43-.056-.144-.111-.288-.173-.43a16.158,16.158,0,0,0-3.364-4.953,15.519,15.519,0,0,0-4.95-3.316,15.795,15.795,0,0,0-12.105,0,16.068,16.068,0,0,0-4.954,3.316,15.182,15.182,0,0,0-3.359,4.953c-.058.136-.109.272-.162.407-.056-.135-.109-.271-.167-.407a16.056,16.056,0,0,0-3.357-4.953,15.532,15.532,0,0,0-4.956-3.316,15.795,15.795,0,0,0-12.105,0,16.084,16.084,0,0,0-4.948,3.316,15.129,15.129,0,0,0-3.366,4.953c-.051.125-.1.253-.148.378-.051-.125-.1-.253-.155-.378a16.165,16.165,0,0,0-3.366-4.953,15.489,15.489,0,0,0-10.979-4.521,15.185,15.185,0,0,0-6.072,1.206,16.01,16.01,0,0,0-4.622,3.017v-.521A3.335,3.335,0,0,0,27.211,13.2H3.837a3.334,3.334,0,0,0,0,6.669h18.37L.658,48.884A3.333,3.333,0,0,0,0,50.872v2.176a3.337,3.337,0,0,0,3.336,3.336H28.214a3.335,3.335,0,0,0,3.324-3.09,15.693,15.693,0,0,0,3.675,2.184,15.189,15.189,0,0,0,6.031,1.207A14.892,14.892,0,0,0,49.857,54.1a15.447,15.447,0,0,0,4.827-5.188v4.5a3.245,3.245,0,0,0,3.277,3.275,3.194,3.194,0,0,0,2.281-.949,3.077,3.077,0,0,0,.991-2.326V41.733h-.012a.087.087,0,0,1,.012-.015h-8.17a3.175,3.175,0,0,0-1.851.558,3.007,3.007,0,0,0-1.161,1.507l-.535,1.1a8.969,8.969,0,0,1-8.271,5.254,9.141,9.141,0,0,1-3.493-.684,8.463,8.463,0,0,1-2.883-1.939,9.963,9.963,0,0,1-1.94-2.888,8.4,8.4,0,0,1-.729-3.447V38.252H61.234V28.34a8.74,8.74,0,0,1,.688-3.442,8.959,8.959,0,0,1,8.355-5.515,9.117,9.117,0,0,1,3.493.687,8.459,8.459,0,0,1,2.883,1.94,10.032,10.032,0,0,1,1.94,2.889,8.36,8.36,0,0,1,.734,3.442V53.409A3.233,3.233,0,0,0,82.6,56.684a3.211,3.211,0,0,0,2.286-.949,3.107,3.107,0,0,0,.986-2.326v-4.5a15.828,15.828,0,0,0,2.482,3.249,15.454,15.454,0,0,0,4.954,3.314,15.671,15.671,0,0,0,12.061,0,16.035,16.035,0,0,0,5-3.314,15.226,15.226,0,0,0,3.359-4.951c.044-.112.087-.225.129-.338.046.113.087.226.134.338a15.068,15.068,0,0,0,3.359,4.951,16.075,16.075,0,0,0,4.951,3.314,15.79,15.79,0,0,0,12.109,0,15.476,15.476,0,0,0,4.946-3.314,16.166,16.166,0,0,0,3.366-4.951c.06-.142.116-.283.173-.426.058.143.111.284.173.426a16.07,16.07,0,0,0,3.359,4.951,15.454,15.454,0,0,0,4.954,3.314,15.671,15.671,0,0,0,12.061,0,16.008,16.008,0,0,0,5-3.314A15.314,15.314,0,0,0,173,41.178V28.341A14.991,14.991,0,0,0,171.749,22.311ZM8.35,49.716,25.794,26.224a16.054,16.054,0,0,0-.143,2.117V41.178A14.759,14.759,0,0,0,26.9,47.211a16.514,16.514,0,0,0,1.366,2.5H8.35ZM50.285,31.7H32.2V28.34a8.738,8.738,0,0,1,.686-3.442,8.951,8.951,0,0,1,8.36-5.515,9.1,9.1,0,0,1,3.486.687,8.423,8.423,0,0,1,2.885,1.94,10.033,10.033,0,0,1,1.94,2.889,8.318,8.318,0,0,1,.729,3.442V31.7Zm58.093,9.48a8.7,8.7,0,0,1-.688,3.447,8.941,8.941,0,0,1-8.352,5.511,9.141,9.141,0,0,1-3.493-.684,8.417,8.417,0,0,1-2.883-1.939,9.917,9.917,0,0,1-1.94-2.888,8.353,8.353,0,0,1-.729-3.447V28.341A8.74,8.74,0,0,1,90.98,24.9a8.935,8.935,0,0,1,1.937-2.889,9.165,9.165,0,0,1,9.9-1.94,8.433,8.433,0,0,1,2.888,1.94,10.129,10.129,0,0,1,1.94,2.889,8.356,8.356,0,0,1,.729,3.442V41.178Zm29.035,0a8.32,8.32,0,0,1-.729,3.447,9.947,9.947,0,0,1-1.94,2.888,8.358,8.358,0,0,1-2.888,1.939,9.337,9.337,0,0,1-7.018,0,9.046,9.046,0,0,1-4.825-4.826,8.735,8.735,0,0,1-.69-3.447V28.341a8.439,8.439,0,0,1,.732-3.442,10.1,10.1,0,0,1,1.94-2.889,8.522,8.522,0,0,1,2.883-1.94,9.152,9.152,0,0,1,3.493-.687,8.985,8.985,0,0,1,8.357,5.515,8.775,8.775,0,0,1,.686,3.442V41.178Zm29.035,0a8.82,8.82,0,0,1-.686,3.447,9.129,9.129,0,0,1-11.85,4.826,8.424,8.424,0,0,1-2.882-1.939,9.946,9.946,0,0,1-1.942-2.888,8.337,8.337,0,0,1-.732-3.447V28.341a8.742
            </div>
            <div class="uk-margin-top">
              <span class="uk-text-bold">Deposit</span> your research now. <span class="uk-text-bold">Instantly and easily.</span>
            </div>
            <a *ngIf="zenodoInformation.shareInZenodoUrl" type="submit"
               [queryParams]="properties.environment!='development'?{}:routerHelper.createQueryParam('communityId',communityId)" 
               routerLinkActive="router-link-active" [routerLink]="zenodoInformation.shareInZenodoUrl"
               class="uk-button portal-button uk-padding uk-padding-remove-vertical uk-margin-medium-top uk-margin-bottom">
              <span><span>Related zenodo communities</span><span uk-icon="arrow-right"></span></span>
            </a>
            <a *ngIf="!zenodoInformation.shareInZenodoUrl" target="_blank" href="{{zenodoInformation.url}}" type="submit"
               [class]="'uk-button uk-padding uk-padding-remove-vertical uk-margin-medium-top uk-margin-bottom' +
                        ((communityId && communityId != 'openaire') ? ' portal-button' : ' uk-button-primary')">
              <span><span>Deposit in Zenodo</span><span uk-icon="arrow-right"></span></span>
            </a>
          </div>
          <div class="uk-width-1-2">
            <div class="uk-margin-top">
              <div class="uk-text-bold">Research. Shared.</div>
              <div>
                All research outputs from across all fields of research are welcome! Sciences and Humanities, really!              </div>
            </div>
            <div class="uk-margin-top">
              <div class="uk-text-bold">Citeable. Discoverable. </div>
              <div>
                Uploads gets a Digital Object Identifier (DOI) to make them easily and uniquely citeable.
              </div>
            </div>
            <div class="uk-margin-top">
              <div class="uk-text-bold">Funding</div>
              <div>
<!--                Identify grants, integrated in reporting lines for research funded by the European Commission via OpenAIRE.-->
                Link your upload to its funding projects. For research funded by the European Commission, your upload will automatically be available for reporting on the EC participant portal.
              </div>
            </div>
            <div class="uk-margin-top">
              <div class="uk-text-bold">Flexible licensing</div>
              <div>
                Because not everything is under Creative Commons.
              </div>
            </div>
            <div class="uk-margin-top">
              <div class="uk-text-bold">Safe</div>
              <div>
                Your research output is stored safely for the future in the same cloud infrastructure as CERN's own LHC research data.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--<div class="uk-section uk-section-muted uk-margin-large-top uk-padding-remove-bottom uk-padding-remove-top">
&lt;!&ndash;      grey-background&ndash;&gt;
      <div class="uk-margin-top uk-padding-small">
        <div class="uk-align-center uk-container uk-container-large uk-margin-top uk-margin-bottom">
          <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
        </div>
      </div>
    </div>-->
    <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
  `
})

export class DepositFirstPageComponent {
  public url: string = null;
  public title: string = "Deposit your research - Learn How";

  @Input() public zenodoInformation: ZenodoInformationClass = new ZenodoInformationClass();
  @Input() piwikSiteId = null;
  piwiksub:any;

  @Input() communityId = null;

  public pageContents = null;
  public divContents = null;

  public keyword: string;
  public depositRoute: string;
  public searchPlaceHolder = "Search by title, country, organization, subject, type...";
  properties:EnvProperties;
  public routerHelper:RouterHelper = new RouterHelper();

  constructor (private  route: ActivatedRoute, private _piwikService:PiwikService,
               private helper: HelperService,
               private _router: Router,
               private _meta: Meta, private _title: Title,
               private seoService: SEOService) {
  }


  ngOnInit() {
    this.route.data
      .subscribe((data: { envSpecific: EnvProperties }) => {
        this.properties = data.envSpecific;
        this.url = this.properties.baseLink+this._router.url;
        this.seoService.createLinkForCanonicalURL(this.url, false);

        var description = "Openaire, Zenodo, repositories, open access, content provider, compatibility, deposit";
        this.updateTitle(this.title);
        this.updateDescription(description);
        this.updateUrl(this.url);

        this.depositRoute = this.properties.depositSearchPage;
        //this.getDivContents();
        this.getPageContents();
        if (!this.zenodoInformation) {
          this.zenodoInformation = new ZenodoInformationClass();
        }
        if (!this.zenodoInformation.shareInZenodoUrl) {
          this.zenodoInformation.url = this.properties.zenodo;
        }
        if (!this.zenodoInformation.name) {
          this.zenodoInformation.name = "Zenodo";
        }

        if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
          this.piwiksub = this._piwikService.trackView(this.properties, this.title, this.piwikSiteId).subscribe();
        }
      });
  }

  public getPageContents() {
    this.helper.getPageHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
      this.pageContents = contents;
    })
  }

  public getDivContents() {
    this.helper.getDivHelpContents(this._router.url, this.properties, this.communityId).subscribe(contents => {
      this.divContents = contents;
    })
  }

  ngOnDestroy() {
    if(this.piwiksub){
      this.piwiksub.unsubscribe();
    }
  }

  private updateDescription(description:string) {
    this._meta.updateTag({content:description},"name='description'");
    this._meta.updateTag({content:description},"property='og:description'");
  }
  private updateTitle(title:string) {
    var _prefix ="";
    if(!this.communityId) {
      _prefix ="OpenAIRE | ";
    }
    var _title = _prefix + ((title.length> 50 ) ?title.substring(0,50):title);
    this._title.setTitle(_title);
    this._meta.updateTag({content:_title},"property='og:title'");
  }
  private updateUrl(url:string) {
    this._meta.updateTag({content:url},"property='og:url'");
  }
}