{"id":39497439,"url":"https://github.com/clarin-eric/js-vcr-integration","last_synced_at":"2026-01-18T05:43:35.933Z","repository":{"id":53148325,"uuid":"520387020","full_name":"clarin-eric/js-vcr-integration","owner":"clarin-eric","description":null,"archived":false,"fork":false,"pushed_at":"2022-09-20T11:44:15.000Z","size":2004,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-09-10T03:14:52.404Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clarin-eric.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-02T06:57:52.000Z","updated_at":"2022-08-02T06:59:06.000Z","dependencies_parsed_at":"2023-01-18T16:02:24.401Z","dependency_job_id":null,"html_url":"https://github.com/clarin-eric/js-vcr-integration","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/clarin-eric/js-vcr-integration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarin-eric%2Fjs-vcr-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarin-eric%2Fjs-vcr-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarin-eric%2Fjs-vcr-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarin-eric%2Fjs-vcr-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clarin-eric","download_url":"https://codeload.github.com/clarin-eric/js-vcr-integration/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clarin-eric%2Fjs-vcr-integration/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28531367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-18T05:43:35.487Z","updated_at":"2026-01-18T05:43:35.927Z","avatar_url":"https://github.com/clarin-eric.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Javascript library for Virtual Collection Registry integrations\n\nWidget and API for easy integration with the [Virtual Collection Registry](https://collections.clarin.eu) (VCR)\n\n![Build and test workflow](https://github.com/clarin-eric/js-vcr-integration/actions/workflows/webpack.yml/badge.svg?branch=main)\n![Release](https://github.com/clarin-eric/js-vcr-integration/actions/workflows/release.yml/badge.svg?branch=main)\n![Documentation](https://github.com/clarin-eric/js-vcr-integration/actions/workflows/pages/pages-build-deployment/badge.svg?branch=main)\n\n## Main features\n\n* Queueing of items (with URL/PID, title and description) for submission to the VCR\n* Submission queue component with listing and submit, clear, hide/show controls\n* Declarative integration (no custom JS code required)\n* Optional programmatic control of queue and queue component\n* Style can be partially or fully overridden\n\n## Usage\n\nLoad the script in the `\u003chead\u003e` section of an HTML document:\n```html\n\u003cscript type=\"text/javascript\" defer=\"defer\" src=\"https://collections.clarin.eu/script/vcr-integration/v1/vcr-integration.js\"\u003e\u003c/script\u003e\n```\n\nDefine and annotate links for adding items to the queue:\n```html\nSome resource\n    (\u003ca  data-vcr-uri=\"http://doi.org/10.5555/12345678\" \n    data-vcr-label=\"Some resource\"\u003eAdd to virtual collection\u003c/a\u003e)\n(...)\nOther resource \n    (\u003ca  data-vcr-uri=\"https://tinyurl.com/my-resource\" \n    data-vcr-label=\"Some other resource\"\n    data-vcr-description=\"Optional description for the resource\"\u003eAdd to virtual collection\u003c/a\u003e)\n```\n\nThat is it. If a user clicks one of the annotated links a queue component will appear, allowing the user to manage the\nqueue (i.e. remove items or clear the entire queue) and eventually submit the queue to the Virtual Collection Registry.\n\nSee the [example page](./dist/example.html) for a full integration example ([rendered version](https://htmlpreview.github.io/?https://github.com/clarin-eric/js-vcr-integration/blob/main/dist/example.html)).\n\n### Requirements\n\nThe current version of the library assumes the availability of a number of CSS style definitions from\n[Bootstrap 3.x](https://getbootstrap.com/docs/3.4/). \n\nIf these definitions are not available, this will affect the behaviour and appearance of the controls provided by the library. \nIt is therefore recommended to include the following if your page, site or application doesn't already use this version of\nBootstrap:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css\" integrity=\"sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu\" crossorigin=\"anonymous\"\u003e\n```\n\nAlternatively, to avoid clashes with further styling, you may also use a tool such SASS or LESS to import the bootstrap classes\nwithin the context of the `.vcr-plugin` class (see section on customisation below).\n\nFor more information, see the [Bootstrap 3.4 documentation](https://getbootstrap.com/docs/3.4/getting-started/).\n\nThere are no external Javascript dependencies.\n\n### Programmatic control\n\nAfter initalisation, a control object becomes available as `window.vcrIntegration`. It exposes an API that is\n[separately documented](https://clarin-eric.github.io/js-vcr-integration/VCRIntegration.html). Actions include queue\nitem addition and removal, hiding and showing of the queue component, and changing any of the configuration properties\n(see below).\n\n## Configuration\n\n**Optionally** a configuration object can be defined in the `\u003chead\u003e` section and made available for use by the library \nby assigning it to `window.vcrIntegrationConfiguration`:\n```html\n\u003cscript script type=\"text/javascript\"\u003e\n    window.vcrIntegrationConfiguration = {\n        'queueControlPosition': 'bottom-right'\n    };\n\u003c/script\u003e\n```\n\nConfiguration options can also be set at runtime via the `setConfiguration` method. For instance:\n```js\nwindow.vcrIntegration.setConfiguration({\n  'maxItemCount': 2\n}, true);\n```\n\nThe boolean option at the end causes a merge, rather than an override of the full configuration object. Note that configuration changes are not automatically applied; re-rendering may be needed, and some options are only applied upon initalisation.\n\n### Supported configuration options\n\nSee also [Configuration.js](./src/Configuration.js).\n\n#### Integration with VCR service:\n* `endpointUrl`: Base URL of the Virtual Collection endpoint.\n  * Defaults to `https://collections.clarin.eu/submit/extensional`.\n* `maxItemCount`: The maximum number of items to allow in the queue.\n  * Defaults to `100`.\n* `defaultName`: Default name for a new collection.\n  * Leave unconfigured for not passing any collection name.\n\n#### Behaviour:\n* `logLevel`: Log level for console output \n  * Value must be one of `debug`, `info`, `warn` or `silent`; see [loglevel](https://github.com/pimterry/loglevel).\n  * Defaults to `info`.\n* `autoInitialize`: Set to `false` to disable automatic initialisation of the plugin.\n  * Doing this renders the plugin inactive until programatically activated with a call to `window.initVcrIntegration()`.\n  * Defaults to `true`\n* `autoDisableAddedItemLinks`: If set to true, links/buttons with the VCR data attributes will automatically be enabled or disabled upon changes in the queue, reflecting the presence of the referenced item in it.\n  * Defaults to `true`.\n\n#### Appearance and customisation:\n* `queueControlPosition`: Position for rendering the queue component.\n  * One of `top-right`, `bottom-right`, `bottom-left` or `top-left`.\n  * Defaults to `bottom-right`.\n* `icons`: Can be used to pass an array that defines markup for icons to replace the default icons. See `Icons.js`.\nfor a list of properties.\n  * Leave unconfigured to use the default icon markup.\n* `customQueueComponentClass`: Name for a class that is added to the queue component's root element for customisation purposes.\n  * Leave unconfigured for no additional custom class.\n\n## Customisation\n\n### CSS\n\nCSS can be used to override default style including colours, fonts, sizes, margins etc. A container element with class `.vcr-plugin` is rendered. Within this, there may be an element with id `#queue-component`. If the configuration option `customQueueComponentClass` is set (see above) the specified class is added to this element. Using this, one can override any properties. For instance, assuming `{customQueueComponentClass: 'my-customisation'}`:\n\n```css\n.vcr-plugin #queue-component.my-customisation {\n  font-family: \"Comic Sans MS\", \"Comic Sans\", cursive;\n  color: purple;\n}\n\n.vcr-plugin #queue-component.my-customisation ul.queue-items {\n  list-style-type: '🎉';\n}\n```\n\n### Icons\n\nCustom icons can be configured via the `icons` configuration option (see above). For example:\n```js\nwindow.vcrIntegration.setConfiguration({\n  'icons': {\n    'hide': '[H]',\n    'show': '[S]',\n    'remove': '[X]',\n    'itemUrlLink': '[i]',\n    'help': '[?]'\n    }\n  }, true);\n```\nKeep in mind that any icons NOT included in the override will not be rendered at all! For a full list of keys, see [Icons.js](src/Icons.js).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclarin-eric%2Fjs-vcr-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclarin-eric%2Fjs-vcr-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclarin-eric%2Fjs-vcr-integration/lists"}