Commit a8dc718b authored by Matthieu Benoist's avatar Matthieu Benoist
Browse files

Changes the API compoenent to integrate the copy link button

parent cc192d42
......@@ -12,19 +12,8 @@
</span>
</div>
<div class="root-url-input">
<div class="link-with-copy">
<span class="parameters-url">
<a [href]="resource.metadataLink.url" target="_blank">{{ resource.metadataLink.url }}</a>
</span>
<button type="button" (click)="copyToClipboard(resource.metadataLink.url, true)" class="button is-medium"
[attr.data-tooltip]="messageClipboardRoot">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#818080" fill-rule="evenodd"
d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
clip-rule="evenodd" />
</svg>
</button>
</div>
<app-link-copy-icon [linkUrl]="resource.metadataLink.url" [isRoot]="true"></app-link-copy-icon>
</div>
</div>
......@@ -192,27 +181,14 @@
URL personnalisée
</span>
</div>
<div class="link-with-copy">
<span class="parameters-url column is-12-mobile is-narrow-tablet">
<a [href]="queryableUrl" target="_blank" [ngClass]="{'is-disabled': isAllFeaturesChecked}"
[innerHtml]="queryableUrlToDisplay">
</a>
</span>
<button type="button" (click)="copyToClipboard(queryableUrl)"
class="column button is-narrow-tablet is-5-mobile is-medium" [attr.data-tooltip]="messageClipboard">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
<path fill="#818080" fill-rule="evenodd"
d="M1.852 7.777a2.619 2.619 0 0 1 0-3.703l2.222-2.222a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.703l-.37.37.74.741.37-.37a2.619 2.619 0 0 1 3.704 0l2.963 2.963a2.619 2.619 0 0 1 0 3.704l-2.222 2.222a2.619 2.619 0 0 1-3.704 0L9.26 15.185a2.619 2.619 0 0 1 0-3.704l.37-.37-.74-.741-.37.37a2.619 2.619 0 0 1-3.704 0L1.852 7.777zm7.037-.37l-.74-.74a1.048 1.048 0 0 0-1.482 1.48l.74.742-.37.37a.524.524 0 0 1-.74 0L3.332 6.296a.524.524 0 0 1 0-.74l2.223-2.223a.524.524 0 0 1 .74 0L9.26 6.296a.524.524 0 0 1 0 .74l-.37.371zm2.222 5.185l-.37.37a.524.524 0 0 0 0 .742l2.963 2.962a.524.524 0 0 0 .74 0l2.223-2.222a.524.524 0 0 0 0-.74l-2.963-2.963a.524.524 0 0 0-.741 0l-.37.37.74.74a1.047 1.047 0 1 1-1.481 1.482l-.74-.74z"
clip-rule="evenodd" />
</svg>
</button>
<div class="resource-download-icon">
<app-download-button [url]="downloadUrl" [fileName]="getFileName()">
</app-download-button>
</div>
</div>
<app-link-copy-icon [linkUrl]="queryableUrl" [linkToDisplay]="queryableUrlToDisplay" >
<div class="resource-download-icon">
<app-download-button [url]="downloadUrl" [fileName]="getFileName()">
</app-download-button>
</div>
</app-link-copy-icon>
</div>
</ng-container>
</div>
\ No newline at end of file
</div>
......@@ -23,95 +23,9 @@
}
}
.link-with-copy {
display: flex;
a,
/* stylelint-disable-next-line */
a span {
color: $link-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.parameters-url-icon {
color: $brand-color;
&:hover {
cursor: pointer;
}
}
.parameters-url {
background-color: $grey-background-color;
border: 1px solid $grey-super-light-color;
transition: all 0.5s ease;
word-break: break-all;
flex-shrink: 1;
padding: 0.7rem 0.5rem;
min-height: 2.5rem;
// ng-deep needed because of the innerHtml breaks the styling
/* stylelint-disable-next-line */
::ng-deep .is-active-parameter {
font-weight: bold;
color: $link-color;
}
/* stylelint-disable-next-line */
a.is-disabled ::ng-deep .is-active-parameter {
font-weight: bold;
color: $grey-dark-color;
}
a.is-disabled,
a.is-disabled span {
pointer-events: none;
color: $grey-dark-color;
}
}
.button {
font-size: 0.875rem;
margin-left: 0.5rem;
position: relative;
margin-right: 0.5rem;
height: 2.75rem;
width: 2.75rem;
border-color: $grey-super-light-color;
svg {
position: absolute;
width: 1.25rem;
left: calc(50% - (1.25rem / 2));
top: calc(50% - (1.25rem / 2));
}
svg path {
fill: $grey-dark-color;
}
}
.button:hover {
svg {
opacity: 0.7;
}
}
}
.root-url {
border-bottom: 2px solid $grey-background-color;
padding-bottom: 1.5rem;
a {
pointer-events: none;
cursor: default;
text-decoration: none;
color: $grey-dark-color;
}
}
.root-url-label {
......@@ -305,7 +219,7 @@ h3 {
}
// Mobile: dropdown displays at 100%.
// Mobile: dropdown displays at 100%.
.dropdown,
.dropdown-trigger,
.dropdown-trigger button,
......
......@@ -21,8 +21,6 @@ export class ResourceQueryableComponent implements OnInit {
downloadMessage = geosource.downloads.download;
messageClipboard: string;
messageClipboardRoot: string;
queryableUrl: string;
queryableUrlToDisplay: SafeHtml;
......@@ -146,9 +144,6 @@ export class ResourceQueryableComponent implements OnInit {
}
ngOnInit() {
this.messageClipboard = geosource.mapMessages.share;
this.messageClipboardRoot = geosource.mapMessages.share;
this.initSettings();
}
......@@ -195,6 +190,7 @@ export class ResourceQueryableComponent implements OnInit {
// Init the url query parameters that will not be changed by the user
this.queryableParameters.baseUrl = this.resource.metadataLink.url;
if (this.resource.type === linkFormats.ws) {
// Exception for this service, we modify the root URL
// this.resource.metadataLink.url += '/all.json';
......@@ -240,9 +236,6 @@ export class ResourceQueryableComponent implements OnInit {
this.queryableParameters.insee +
this.queryableParameters.bbox
;
console.log('before');
console.log(this.queryableParameters);
console.log(this.queryableUrl);
if (this.resource.type === linkFormats.wfs) {
this.queryableUrl += `&startIndex=${this.fromFeature}`;
......@@ -253,8 +246,6 @@ export class ResourceQueryableComponent implements OnInit {
this.queryableUrl += `&maxfeatures=${this.numberFeatures}&start=${this.fromFeature}`;
}
}
console.log('debug...');
console.log(this.queryableUrl);
if (!this.isAllFeaturesChecked && this.resource.type === linkFormats.wfs) {
this.queryableUrl += `&count=${this.numberFeatures}`;
......@@ -447,7 +438,7 @@ export class ResourceQueryableComponent implements OnInit {
checkAllFeatures() {
this.numberFeatures = this.isAllFeaturesChecked ?
this._datasetDetailService.dataset.totalData : this.inputCountFeatures;
-1 : this.inputCountFeatures;
this.updateQueryableUrl();
this.updateQueryableurlToDisplay();
}
......@@ -490,33 +481,6 @@ export class ResourceQueryableComponent implements OnInit {
return projection ? `${projection.commonName} (${projection.name})` : name;
}
copyToClipboard(text, isRoot) {
const selBox = document.createElement('textarea');
selBox.style.position = 'fixed';
selBox.style.height = '0';
selBox.value = text;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
if (isRoot) {
this.messageClipboardRoot = geosource.mapMessages.copied;
setTimeout(() => {
this.messageClipboardRoot = geosource.mapMessages.share;
// tslint:disable-next-line: align
}, 2000);
} else {
this.messageClipboard = geosource.mapMessages.copied;
setTimeout(() => {
this.messageClipboard = geosource.mapMessages.share;
// tslint:disable-next-line: align
}, 2000);
}
}
get downloadUrl() {
return this.queryableUrl.replace(
'https://download.data.grandlyon.com',
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment