@kit-data-manager/webcomponent_typed-pid-maker_pid-list v0.3.7
webcomponent_typed-pid-maker_pid-list
This is a webcomponent to use in HTML or more complex web projects.
Integration
If the dependency is up set properly (instructions will follow), the component can be used like this:
<head>
...
<!-- add the code !-->
<script src="https://cdn.jsdelivr.net/npm/@kit-data-manager/webcomponent_typed-pid-maker_pid-list@latest/dist/typid-known-pids-table.umd.js"></script>
</head>
<body>
<!-- use the component !-->
<typid-known-pids-table base-url="http://localhost:8090/">
</body>Attributes
base-url: string, base-url to your Typed PID Maker instanceonrowclick: string or function(UIEvent, RowComponent) (optional)As described, above, it can either be a function, or a string with instructions. The latter option makes it similar to onclick. The function gets the event and the row as a parameter, which means you can access the row data. Here are two examples:
<!-- as instruction string !--> <typid-known-pids-table base-url="http://localhost:8090/" onrowclick="console.log('catched event!')"><!-- as a function, accessing row data !--> <typid-known-pids-table base-url="http://localhost:8090/" onrowclick="(function() { console.log('hello world') })()">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: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:
(_event, row) => { window.open( 'https://kit-data-manager.github.io/fairdoscope/?pid=' + row.getData().pid, '_blank' ) }