Merge pull request #5 from ArthurClemens/0.3.0

0.3.0

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 test/dialogic-js
-cypress/videos/
+cypress/videos
+cypress/screenshots

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## 0.3.0
+
+- Improve layout of native dialog element
+- Escape only closes the top dialog
+- Escape should ignore the lock duration to enable quick closing
+- Removed default max width and height styles - these should be implemented by either the lib or custom styles
+- Added tests

README.md

@@ -1,6 +1,6 @@
 # dialogic-js
 
-[![npm](https://img.shields.io/badge/npm-0.2.8-blue)](https://www.npmjs.com/package/dialogic-js)
+[![npm](https://img.shields.io/badge/npm-0.3.0-blue)](https://www.npmjs.com/package/dialogic-js)
 
 Control the opening and closing of dialogs and menus using HTML and (optionally) vanilla JavaScript.
 
@@ -38,8 +38,8 @@ This is a basic version of [dialogic](http://github.com/ArthurClemens/dialogic),
 ### Including on a static site
 
 ```html
-<script src="https://unpkg.com/dialogic-js@0.2.8/dist/dialogic-js.min.js"></script>
-<link href="https://unpkg.com/dialogic-js@0.2.8/dist/dialogic-js.min.css" rel="stylesheet" />
+<script src="https://unpkg.com/dialogic-js@0.3.0/dist/dialogic-js.min.js"></script>
+<link href="https://unpkg.com/dialogic-js@0.3.0/dist/dialogic-js.min.css" rel="stylesheet" />
 ```
 
 ### Installing via npm
@@ -148,11 +148,9 @@ AFTER - includes touch layer, backdrop, fade in and out
 - [CodeSandbox with Primer CSS dialog](https://codesandbox.io/p/sandbox/dialogic-js-with-primercss-dialog-6jpf9y?file=%2Findex.html)
 - [CodeSandbox with &lt;dialog&gt;](https://codesandbox.io/p/sandbox/dialogic-js-with-a-dialog-element-td1sxv)
 - [CodeSandbox with Flowbite/Tailwind modal](https://codesandbox.io/p/sandbox/dialogic-js-with-flowbite-tailwind-modal-qp241z) (stacked dialogs)
+- [CodeSandbox with UIkit modal](https://codesandbox.io/p/sandbox/dialogic-js-with-uikit-modal-h50x9y)
 - [CodeSandbox with JavaScript methods](https://codesandbox.io/s/dialogic-js-javascript-methods-glgxgb)
 
-<!-- [CodeSandbox with UIKit modal](https://codesandbox.io/p/sandbox/dialogic-js-with-a-uikit-modal-joil56) -->
-<!-- - [CodeSandbox with isfocusfirst](https://codesandbox.io/p/sandbox/dialogic-js-isfocusfirst-with-flowbite-tailwind-modal-zs67ex) -->
-
 ### Menu
 
 - [CodeSandbox with Primer CSS select menu](https://codesandbox.io/p/sandbox/dialogic-js-with-primercss-selectmenu-bv1byj)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dialogic-js",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "description": "Control the opening and closing of dialogs and menus using HTML and (optionally) vanilla JavaScript.",
   "types": "dist",
   "files": [

test/pico-dialog.html

@@ -44,9 +44,12 @@
         display: flex;
       }
       /* In Pico the dialog element is stretched across the screen. In order to make our touch layer work, we disable pointer-events. */
-      [data-prompt][data-isopen]#dialog-events dialog {
+      [data-prompt][data-isopen]#override-pointer dialog {
         pointer-events: none;
       }
+      [data-prompt][data-isopen]#override-pointer dialog article {
+        pointer-events: all;
+      }
       /* With the touch layer inserted inside the dialog element, the article needs to be placed higher */
       [data-prompt][data-isopen]#swapped-order [data-content] article {
         z-index: 200;

test/primer-css-dialog.html

@@ -13,8 +13,7 @@
     <script type="module" src="./dialogic-js/dialogic-js.min.js"></script>
     <style>
       :root {
-        --prompt-max-width-content: 92vw; /* for dialog */
-        --prompt-max-height-content: 80vh; /* for dialog */
+        --prompt-max-height-content: 80vh;
       }
       * {
         box-sizing: border-box;
@@ -30,8 +29,6 @@
       }
 
       [data-prompt] [data-content] {
-        z-index: var(--prompt-z-index-content);
-        max-width: var(--prompt-max-width-content);
         max-height: var(--prompt-max-height-content);
       }
     </style>

test/primer-css-select-menu.html

@@ -12,10 +12,6 @@
     <link href="./dialogic-js/dialogic-js.min.css" rel="stylesheet" />
     <script type="module" src="./dialogic-js/dialogic-js.min.js"></script>
     <style>
-      :root {
-        --prompt-max-width-content: 92vw; /* for dialog */
-        --prompt-max-height-content: 80vh; /* for dialog */
-      }
       * {
         box-sizing: border-box;
       }

test/uikit-dialog.html

@@ -30,7 +30,9 @@
 
   <body>
     <div data-prompt id="dialog">
-      <button onclick="Prompt.show(this)">Open</button>
+      <button class="uk-button uk-button-primary" onclick="Prompt.show(this)">
+        Open
+      </button>
       <div data-touch></div>
       <div data-backdrop></div>
       <div id="modal-sections" uk-modal>