Ability to customise aspect ratio

README.md

@@ -4,7 +4,7 @@ An [OpenStoriesFeed](https://github.com/dddddddddzzzz/OpenStories) viewer. See i
 
 ## WIP
 
-Things yet to be supported: 
+Things yet to be supported:
 
 - `feed._open_stories.preview`
 - `feed.items[]._open_stories.preview`
@@ -24,25 +24,64 @@ Things yet to be supported:
 
 This requires native [`<dialog>`](https://caniuse.com/dialog) and [Shadow DOM](https://caniuse.com/shadowdomv1) support. No polyfills included.
 
-## Parts
+## Development
+
+### Setup
+
+```shell
+yarn install
+```
+
+### Watch for changes
+
+```shell
+yarn start
+```
+
+Swap script in `demo.html` to local build:
+
+```html
+<script src="../dist/index.js" type="module"></script>
+<!-- <script src="https://unpkg.com/open-stories-element@>0.0.0" type="module"></script> -->
+```
+
+### Build
+
+```shell
+yarn prepare
+```
+
+## Styling
+
+### Parts
 
 Style elements with `::part` ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)):
 
-### Button
+#### Button
 
 `open-stories::part(button)` is the selector for the `<button>` that opens the story modal. It would be good to style `open-stories:not(:defined)` the same way, to prevent style flashing as the script executes.
 
-### Advanced
+#### Advanced
 
 - `open-stories::part(dialog)`: The modal `<dialog>`.
 - `open-stories::part(loading-visual)`: The loading overlay.
 - `open-stories::part(metadata)`: The `<details>` for metadata.
 - `open-stories::part(metadata-summary)`: The `<summary>` for expanding metadata.
 - `open-stories::part(metadata-content)`: The metadata content container.
 
+### CSS Custom properties
+
+Override these CSS custom properties on `open-stories` to tweak the layout:
+
+| Custom property    | Description                                     | Default                                  |
+| ------------------ | ----------------------------------------------- | ---------------------------------------- |
+| `--dialog-margin`  | Allows you to set the margin around the dialog. | 4rem <br> (0rem at 420px viewport width) |
+| `--aspect-ratio-h` | Set the aspect ratio height.                    | 16                                       |
+| `--aspect-ratio-w` | Set the aspect ratio width.                     | 9                                        |
+
 ## Button text / `<slot>`
 
-Whatever you put inside `<open-stories>HERE</open-stories>` will replace the default button text "View Stories".  ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot))
+Whatever you put inside `<open-stories>HERE</open-stories>` will replace the default button text "View Stories". ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot))
 
 ## Attributes
 

demo/feed-1-1.json

@@ -0,0 +1,37 @@
+{
+	"version": "https://jsonfeed.org/version/1.1",
+	"title": "1 by 1 demo",
+	"feed_url": "https://openstories.fyi/feeds/good-pretzel-max.json",
+	"authors": [{ "name": "dddddddddzzzz", "url": "https://openstories.fyi" }],
+	"_open_stories": {
+		"version": "0.0.9"
+	},
+	"items": [
+		{
+			"id": "a1",
+			"content_html": "<img src=https://picsum.photos/2000?random=1 alt=''>",
+			"date_published": "2022-11-14T00:00:00+08:00",
+			"_open_stories": {
+				"mime_type": "image/jpeg",
+				"url": "https://picsum.photos/2000?random=1",
+				"alt": "2 by 3 demo",
+				"date_expired": "2222-12-31T00:00:00+08:00",
+				"duration_in_seconds": 5,
+				"caption": "1 by 1 demo"
+			}
+		},
+		{
+			"id": "a2",
+			"content_html": "<img src=https://picsum.photos/2000?random=2 alt=''>",
+			"date_published": "2022-11-07T00:00:00+08:00",
+			"_open_stories": {
+				"mime_type": "image/jpeg",
+				"url": "https://picsum.photos/2000?random=2",
+				"alt": "2 by 3 demo",
+				"date_expired": "2222-12-31T00:00:00+08:00",
+				"duration_in_seconds": 1,
+				"caption": "1 by 1 demo"
+			}
+		}
+	]
+}

demo/feed-16-9.json

@@ -0,0 +1,37 @@
+{
+	"version": "https://jsonfeed.org/version/1.1",
+	"title": "16 by 9 demo",
+	"feed_url": "https://openstories.fyi/feeds/good-pretzel-max.json",
+	"authors": [{ "name": "dddddddddzzzz", "url": "https://openstories.fyi" }],
+	"_open_stories": {
+		"version": "0.0.9"
+	},
+	"items": [
+		{
+			"id": "a1",
+			"content_html": "<img src=https://picsum.photos/1600/900?random=1 alt=''>",
+			"date_published": "2022-11-14T00:00:00+08:00",
+			"_open_stories": {
+				"mime_type": "image/jpeg",
+				"url": "https://picsum.photos/1600/900?random=1",
+				"alt": "16 by 9 demo",
+				"date_expired": "2222-12-31T00:00:00+08:00",
+				"duration_in_seconds": 5,
+				"caption": "16 by 9 demo"
+			}
+		},
+		{
+			"id": "a2",
+			"content_html": "<img src=https://picsum.photos/1600/900?random=2 alt=''>",
+			"date_published": "2022-11-07T00:00:00+08:00",
+			"_open_stories": {
+				"mime_type": "image/jpeg",
+				"url": "https://picsum.photos/1600/900?random=2",
+				"alt": "16 by 9 demo",
+				"date_expired": "2222-12-31T00:00:00+08:00",
+				"duration_in_seconds": 1,
+				"caption": "16 by 9 demo"
+			}
+		}
+	]
+}

demo/index.html

@@ -20,6 +20,15 @@
       cursor: pointer;
       border-radius: 2px;
     }
+
+	open-stories.one-by-one {
+		--aspect-ratio-w: 1;
+		--aspect-ratio-h: 1;
+	}
+	open-stories.sixteen-by-nine {
+		--aspect-ratio-w: 16;
+		--aspect-ratio-h: 9;
+	}
   </style>
 </head>
 <body>
@@ -28,6 +37,11 @@
     <h2>Default</h2>
     <open-stories src="https://openstories.fyi/feeds/good-pretzel-max.json"></open-stories>
     <h2>State and customizations</h2>
+	<h3>Aspect ratio</h3>
+	<h4>1:1</h4>
+    <open-stories class="one-by-one" src="./feed-1-1.json"></open-stories>
+	<h4>16:9</h4>
+    <open-stories class="sixteen-by-nine" src="./feed-16-9.json"></open-stories>
     <h3>Empty</h3>
     <open-stories src="./empty.json"></open-stories>
     <h3>Styling your button</h3>