@orcden/odp-event-registration-form NPM | npm.io

1.10.0 • Published 2 years ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

2 years ago

A component to register for events on ODP.

<odp-event-registration-form> is a complex component that can be configured to accept event data from ODP and provide a registration form. It generates and object that can be sent back to ODP to register the user.

Installation

Install with npm

npm i @orcden/odp-event-registration-form

Usage

import '@orcden/odp-event-registration-form';

<script>
    function httpGet( theUrl ) {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
        xmlHttp.send( null );
        return JSON.parse( xmlHttp.responseText );
    }

    document.querySelector( '#form' ).eventData = httpGet( 'YOUR ODP EVENT ENDPOINT HERE' );
</script>

<odp-event-registration-form id='form' inline is-member></odp-event-registration-form>

Attributes

Attribute	Type	Default	Description
`inline`	Boolean	true	Useful for mobile, set to false to decrease width.
`is-member`	Boolean	false	Used to set member prices display and calculation
`closed`	Boolean	false	Can be used to manually display the registration closed message.

Properties

Attribute	Type	Default	Description
`eventData`	Object	{}	Get. Set. The form requires this to build itself.
`inline`	Boolean	true	Useful for mobile, set to false to decrease width.
`isMember`	Boolean	false	Used to set member prices display and calculation
`invalidMessage`	String	""	Get Only, used with validation; if the form fails display this.
`closed`	Boolean	false	Can be used to manually display the registration closed message.

Functions

Name	Parameters	Description
`getData`	None	Get the event registration data
`validate`	None	Validates if the required info has been filled out

Styling

Shadow Parts	Description
ex. mode-item-title	The div used to house the title slot
...	Find the associated part in the DOM for now; docs to be updated

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build

orcden ODP events registration

@orcden/od-forms @webcomponents/webcomponentsjs

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago