An open API service indexing awesome lists of open source software.

https://github.com/kit-data-manager/webcomponent_typed-pid-maker_pid-list

A list view, showing known PIDs of a Typed PID Maker instance.
https://github.com/kit-data-manager/webcomponent_typed-pid-maker_pid-list

Last synced: about 1 year ago
JSON representation

A list view, showing known PIDs of a Typed PID Maker instance.

Awesome Lists containing this project

README

          

# webcomponent_typed-pid-maker_pid-list

[![Build](https://github.com/kit-data-manager/webcomponent_typed-pid-maker_pid-list/actions/workflows/build.yml/badge.svg)](https://github.com/kit-data-manager/webcomponent_typed-pid-maker_pid-list/actions/workflows/build.yml) [![Node.js Package](https://github.com/kit-data-manager/webcomponent_typed-pid-maker_pid-list/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/kit-data-manager/webcomponent_typed-pid-maker_pid-list/actions/workflows/npm-publish.yml) [![](https://data.jsdelivr.com/v1/package/npm/@kit-data-manager/webcomponent_typed-pid-maker_pid-list/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@kit-data-manager/webcomponent_typed-pid-maker_pid-list)

This is a webcomponent to use in HTML or more complex web projects.

- [NPMjs project page](https://www.npmjs.com/package/@kit-data-manager/webcomponent_typed-pid-maker_pid-list)

## Integration

If the dependency is up set properly (instructions will follow), the component can be used like this:

```html

...


```

## Attributes

- `base-url`: string, base-url to your Typed PID Maker instance
- `onrowclick`: string or function([UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent), [RowComponent](https://tabulator.info/docs/5.4/components#component-row)) (optional)

As described, above, it can either be a function, or a string with instructions. The latter option makes it similar to [onclick](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/onclick). The function gets the event and the row as a parameter, which means you can access the row data. Here are two examples:

```html


```

```html


```

In the second example, the function is still represented as a string. This means the function needs to call itself, which is why the `()` operator is needed in the end. From Javascript, you may directly assign a function like in the following example:

```javascript
var component = document.getElementsByTagName("typid-known-pids-table")[0]
component.onRowClick = function(event, row) {
console.log(event)
console.log(row.getData().pid)
}
```

Its default value is the following function, which will open a PID in a public instance of the FAIRDOscope:

```typescript
(_event, row) => {
window.open(
'https://kit-data-manager.github.io/fairdoscope/?pid=' + row.getData().pid,
'_blank'
)
}
```