Skip to content

Commit

Permalink
Add README and LICENCE for public release
Browse files Browse the repository at this point in the history
  • Loading branch information
dpogue committed Jun 8, 2016
1 parent 279000f commit 191ff62
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 0 deletions.
19 changes: 19 additions & 0 deletions LICENCE
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Copyright (c) 2016 Ayogo Health Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
81 changes: 81 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
ayDialog
========

An HTML5 spec-compliant <dialog> polyfill built with Angular 1.x.

<small>Copyright © 2016 Ayogo Health Inc.</small>


Features
--------

* Automatic upgrading of `dialog` elements via Angular directive
* Support for API methods (`show()`, `showModal()`, `close()`, `returnValue`)
* Compatible with native `dialog` support in Chrome
* Support for normal and modal dialogs (with backdrops)
* Proper focus handling and disabling of background content for accessibility

Usage
-----

To get started, install the package from npm: `npm install ay-dialog`

### Basic Usage

Add a script tag to your page to reference the dialog.js file:

```html
<script src="node_modules/ay-dialog/dialog.js"></script>
```

Reference the module in your Angular app's dependencies:

```javascript
angular.module(myApp, ['ayDialog'])
```

### ES5 with Browserify

Reference the module in your Angular app's dependencies:

```javascript
var ayDialog = require('ay-dialog').default;

angular.module(myApp, [ayDialog])
```

### ES6 / TypeScript

Reference the module in your Angular app's dependencies:

```typescript
import ayDialog from 'ay-dialog';

angular.module(myApp, [ayDialog])
```

A TypeScript module definition is included, which also provides typings for the
HTMLDialogElement interface.


Styling
-------

It's not possible to implement the backdrop as a pseudo-element (as it is in native implementations), so the backdrop is added as a sibling element with a `.backdrop` class.

Note that you need two separate selectors to support both `.backdrop` and `::backdrop`, otherwise browsers that don't recognize the pseudo-element will skip the CSS block entirely!

```css
dialog + .backdrop {
background: rgba(1, 0, 0, 0.1);
}

dialog::backdrop {
background: rgba(1, 0, 0, 0.1);
}
```

Notes
-----

Released under the terms of the [MIT License](LICENSE).

0 comments on commit 191ff62

Please sign in to comment.