fixes dialog position w/ polyfill

Author: Tommy Leunen

docs/index.html

@@ -9,6 +9,8 @@
     <link rel="stylesheet" href="prism.css">
     <script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
     <script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
+    <script src="https://npmcdn.com/dialog-polyfill/dialog-polyfill.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://npmcdn.com/dialog-polyfill/dialog-polyfill.css" />
     <style>
         pre {
             position: relative;

docs/pages/dialogs.md

@@ -1,6 +1,8 @@
 # Dialogs
 
-This component uses [dialog element](https://www.w3.org/TR/2013/CR-html5-20130806/interactive-elements.html#the-dialog-element), which is only supported by Chrome and Opera currently. For other browsers, you need to include a [polyfill](https://github.com/GoogleChrome/dialog-polyfill) in your code.
+> This component uses [dialog element](https://www.w3.org/TR/2013/CR-html5-20130806/interactive-elements.html#the-dialog-element), which is only supported by Chrome and Opera currently. For other browsers, you need to include a [polyfill](https://github.com/GoogleChrome/dialog-polyfill) in your code.
+
+> If you're using the `Dialog` component with a full MDL app, you will also need to set a custom `z-index` on the `Layout` to make the `Dialog` be accessible on top of the dark overlay. A value of `100001` is required for this to work.
 
 ## Demo
 

docs/src/DocApp.js

@@ -20,7 +20,7 @@ const templateSections = Object.keys(Templates).map(template => ({
 class DocApp extends React.Component {
     render() {
         return (
-            <Layout fixedHeader fixedDrawer>
+            <Layout fixedHeader fixedDrawer style={{ zIndex: 100001 }}>
                 <Header title="React-MDL">
                     <Navigation>
                         <a href="https://github.com/tleunen/react-mdl">

docs/src/PageComponentHelper.js

@@ -9,6 +9,9 @@ export default (html) =>
 
             const demoJs = document.querySelectorAll('.demo-js');
             Array.from(demoJs).forEach(code => eval(code.innerHTML));
+
+            const dialogs = document.querySelectorAll('dialog');
+            [].slice.call(dialogs).forEach(dialog => window.dialogPolyfill.registerDialog(dialog));
         }
 
         componentWillUnmount() {

scripts/docs.js

@@ -15,7 +15,7 @@ const DOC_PAGES_DIR = path.join('docs', 'pages');
 const DOC_PAGES_DIR_OUTPUT = path.join('docs', 'pages', 'html');
 
 function getCodePenForm(jsx, entireClass) {
-    const prefix = 'for(const component in ReactMDL) { if(ReactMDL.hasOwnProperty(component)) { window[component] = ReactMDL[component]; } }';
+    const prefix = 'for(const component in ReactMDL) { if(ReactMDL.hasOwnProperty(component)) { window[component] = ReactMDL[component]; } } dialogPolyfill.registerDialog(document.querySelector("dialog"));';
     const suffix = "ReactDOM.render(<Demo />, document.getElementById('demo'))";
     const code = (entireClass) ? jsx : `
 const Demo = (props) => {
@@ -33,8 +33,8 @@ ${suffix}`;
         css: '@import url(https://fonts.googleapis.com/icon?family=Material+Icons);',
         js: JS,
         js_pre_processor: 'babel',
-        css_external: 'https://npmcdn.com/react-mdl/extra/material.css',
-        js_external: 'https://npmcdn.com/[email protected]/dist/react.js;https://npmcdn.com/[email protected]/dist/react-dom.js;https://npmcdn.com/react-mdl/extra/material.js;https://npmcdn.com/react-mdl/out/ReactMDL.js'
+        css_external: 'https://npmcdn.com/react-mdl/extra/material.css;https://npmcdn.com/dialog-polyfill/dialog-polyfill.css',
+        js_external: 'https://npmcdn.com/[email protected]/dist/react.js;https://npmcdn.com/[email protected]/dist/react-dom.js;https://npmcdn.com/react-mdl/extra/material.js;https://npmcdn.com/react-mdl/out/ReactMDL.js;https://npmcdn.com/dialog-polyfill/dialog-polyfill.js'
     };
 
     const JSONstring = JSON.stringify(data)

src/Dialog/Dialog.js

@@ -18,6 +18,13 @@ class Dialog extends React.Component {
         if(this.props.open !== prevProps.open) {
             if(this.props.open) {
                 findDOMNode(this).showModal();
+
+                // display the dialog at the right location
+                // needed for the polyfill, otherwise it's not at the right position
+                const bodyHeight = document.body.clientHeight;
+                const dialogHeight = this.refs.dialog.clientHeight;
+                this.refs.dialog.style.position = 'fixed';
+                this.refs.dialog.style.top = `${(bodyHeight - dialogHeight) / 2}px`;
             }
             else {
                 findDOMNode(this).close();
@@ -31,7 +38,7 @@ class Dialog extends React.Component {
         const classes = classNames('mdl-dialog', className);
 
         return (
-            <dialog className={classes} {...otherProps}>
+            <dialog ref="dialog" className={classes} {...otherProps}>
                 {children}
             </dialog>
         );