Offer Generator

A React Component that allows you to construct ODRL licence offers in json-ld format.

• Acronyms
• Using the Offer Generator
• Developing the Offer Generator

Acronyms

Acronym	Description
ODRL	Open Digital Rights Language

Using the Offer Generator

A full example can be found in the example directory.

Install

Start by installing the offer-generator via npm:

npm install offer-generator --save

Render

The offer-generator package provides two main components:

• OfferGenerator: The main building tool for constructing an ODRL offer.
• JsonLDViewer: A helper component that can be used to display the json-ld constructed by the offer builder

Both use bootstrap components and class names. For details on how to customise the css please refer to the Bootstrap documentation.

Offer Generator

This is the main building tool for constructing an ODRL offer.

{OfferGenerator} = require('offer-generator');
class Component extends React.Component {
    render: function () {
        return (
            <div>
                <OfferGenerator />
            </div>
        );
    }
} 

API

onCreate

Pass a function to call when the button is clicked. The function will receive the json-ld offer as a parameter. Use this function to retrieve the end result offer, and process it as needed.

• Type: function
• Required: yes
• Default: undefined

{OfferGenerator} = require('offer-generator');
class Component extends React.Component {
    render: function () {
        return (
            <div>
                <OfferGenerator 
                    onCreate={(json) => {this.setState({json: json})}}
                    />
            </div>
        );
    }
} 

buttonText

This controls the text that is displayed on the main creation button of the builder.

• Type: string
• Required: no
• Default: 'Generate Offer'

{OfferGenerator} = require('offer-generator');
class Component extends React.Component {
    render: function () {
        return (
            <div>
                <OfferGenerator 
                    buttonText='Save Offer'
                    />
            </div>
        );
    }
} 

assigner

This provides a default assigner id for the offer builder. If provided then the assigner will be displayed but will not be editable within the builder.

• Type: string
• Required: no
• Default: undefined

{OfferGenerator} = require('offer-generator');
class Component extends React.Component {
    render: function () {
        return (
            <div>
                <OfferGenerator 
                    assigner='my-test-assigner'
                    />
            </div>
        );
    }
} 

initialOffer

This provides an initial offer to populate the offer builder with on initialisation.

• Type: json-ld object
• Required: no
• Default: undefined

{OfferGenerator} = require('offer-generator');
class Component extends React.Component {
    render: function () {
        return (
            <div>
                <OfferGenerator 
                    initialOffer={this.state.offer}
                    />
            </div>
        );
    }
} 

JSON-ld Viewer

{JsonLdViewer} = require('offer-generator');
class Component extends React.Component {
    render: function () {
        return (
            <div>
                <JsonLdViewer
                      jsonld={this.state.jsonld}
                    />
            </div>
        );
    }
} 

API

jsonld

Pass the json ld to display.

• Type: json-ld object
• Required: yes
• Default: undefined

Developing the Offer Generator

The UI is implemented completely in JavaScript using

• React.js
• Redux.js
• Immutable.js

Getting Started

Download & install node & npm or use your package manager of choice e.g.

brew install node

Install dependencies

npm install

Build

Transpile code using babel

npm run build

Build example application for deployment

Either run this

cd example
npm install
npm run build

Build example application for testing during development

• Remove node_modules sub-directory from example directory.
• In example/src/index.js, change

{OfferGenerator, JsonLdViewer} = require('offer-generator');

to

{OfferGenerator, JsonLdViewer} = require('../../src');

• In top level directory either run this

npm run build-example

or this, if you require automatic rebuild of the bundle whenever there are file changes

npm run build-example:watch

Running the example

You need a web server to serve index.html. We recommend you use python's HTTP Server e.g:

python -m SimpleHTTPServer

You should be able to view the application at http://localhost:8000.

Tests

Unit tests are written using mocha, which can be run with

npm test

Publish to npm

The offer-viewer has been published to npm under the OpenPermissions account. To publish a new version, increase the version number in package.json and run

npm publish ./