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";

@Component({
  selector: 'deposit-first-page',
  template: `
    <div class="uk-section uk-margin-top uk-padding-remove-bottom">
      <div class="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-text-center font-41">
            <span class="uk-text-bold">Deposit</span> your research
          </div>

          <div class="uk-container uk-container-large uk-margin-large-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-text-bold">Find the appropriate repository, archive or journal</div>
                    <div class="uk-text-small">
                      Find the appropriate thematic repository or archive 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.
                      Looking for Open Access journals? Find those that suits your community among the journals registered in the Directory of Open Access Journals (DOAJ).                    
                    </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-text-bold">Deposit</div>
                    <div class="uk-text-small">
                      Find the repository to deposit your research or use the Zenodo communities suggested by the community curators.                    
                    </div>
                  </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-text-large">
                  Start by <span class="uk-text-bold">searching</span> repositories
                </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-4 uk-text-right">
                  <hr class="uk-divider-vertical">
                  <div>OR</div>
                  <hr class="uk-divider-vertical">
                </div>
                  
                <div>
                  <a  [queryParams]="{}" routerLinkActive="router-link-active" routerLink="/search-deposit" 
                      type="submit" class="uk-button uk-button-large uk-button-primary uk-padding uk-padding-remove-vertical">
                    <span><span>Browse all repositories</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 border-grey 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 <span class="uk-text-bold">immediately</span>
            </div>
            <a *ngIf="zenodoInformation.shareInZenodoUrl" href="{{zenodoInformation.shareInZenodoUrl}}" type="submit"
               class="uk-button uk-button-primary 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-button-primary uk-padding uk-padding-remove-vertical uk-margin-medium-top uk-margin-bottom">
              <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.
              </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 {
  @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 = "/search-deposit";
  public searchPlaceHolder = "Search for repositories by title, country, organization, subject...";
  properties:EnvProperties;

  constructor (private  route: ActivatedRoute, private _piwikService:PiwikService,
               private helper: HelperService,
               private _router: Router) {}


  ngOnInit() {
    this.route.data
      .subscribe((data: { envSpecific: EnvProperties }) => {
        this.properties = data.envSpecific;
        //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, "Deposit your research (first page)", 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();
    }
  }
}