Update demo page

- move to own folder for organization - self-host images and video, so that hotlinking doesn't cause issues if 3rd party hosts go down - move CSS to own file + cleanup - add headings to help clarify demo
cee-chen · Apr 1, 2019 · 8eeed55 · 8eeed55
1 parent a7cda82
commit 8eeed55
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ A polyfill for browsers that don't support the `object-fit` CSS property. Unsure
 
 ## Demo
 
-You can check out the [bare-bones demo here](http://constancecchen.github.io/object-fit-polyfill). Note that the plugin simply won't do anything if you're on a browser that already supports object-fit, so you'll want to test it on IE or older iOS/Android browsers.
+You can check out the [bare-bones demo here](http://constancecchen.github.io/object-fit-polyfill/demo/). Note that the plugin simply won't do anything if you're on a browser that already supports object-fit, so you'll want to test it on IE or older iOS/Android browsers.
 
 ## How does it work?
 

diff --git a/demo/image-fireworks-500x333.jpeg b/demo/image-fireworks-500x333.jpeg
diff --git a/demo/image-flowers-1280x720.jpeg b/demo/image-flowers-1280x720.jpeg
diff --git a/demo/image-food-1280x853.jpeg b/demo/image-food-1280x853.jpeg
diff --git a/demo/image-food-250x167.jpeg b/demo/image-food-250x167.jpeg
diff --git a/demo/image-road-1920x1080.jpeg b/demo/image-road-1920x1080.jpeg
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Object-fit Polyfill Demo</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <header class="container-1">
+      <img class="img img-cover" data-object-fit="cover" src="image-flowers-1280x720.jpeg" srcset="image-road-1920x1080.jpeg 1800w, image-flowers-1280x720.jpeg 1000w, image-fireworks-500x333.jpeg 500w" alt="">
+      <div class="heading heading-intro">
+        <h1>An Object-fit Polyfill</h1>
+        View this page in IE 9+, Safari 7.1-, or Android 4.4- to test! Or <a href="https://github.com/constancecchen/object-fit-polyfill">view the GitHub repo</a>.
+      </div>
+    </header>
+
+    <h2 class="heading">Cover fit on picture, video, and canvas elements</h2>
+    <div class="clearfix">
+      <div class="container container-3">
+        <picture>
+          <source srcset="image-road-1920x1080.jpeg" media="(min-width: 1800px)">
+          <source srcset="image-fireworks-500x333.jpeg" media="(max-width: 500px)">
+          <img class="img img-cover" data-object-fit="cover" src="image-flowers-1280x720.jpeg" alt="">
+        </picture>
+      </div>
+      <div class="container container-3">
+        <video class="img img-cover" data-object-fit="cover" preload="auto" autoplay muted loop poster="video-puppy.jpg">
+          <source src="video-puppy.mp4" type="video/mp4">
+          <source src="video-puppy.webm" type="video/webm">
+          Your browser does not support the video tag.
+        </video>
+      </div>
+      <div class="container container-3">
+        <canvas class="img img-cover" data-object-fit="cover" id="canvas" width="500" height="500" ></canvas>
+        <script>
+          var canvas = document.getElementById('canvas');
+          if (canvas.getContext) {
+            var ctx = canvas.getContext('2d');
+
+            ctx.fillStyle = 'rgb(125, 125, 125)';
+            ctx.fillRect(0, 0, 500, 500);
+
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+            ctx.beginPath();
+            ctx.arc(250, 250, 100, 0, 2 * Math.PI, false);
+            ctx.fill();
+          }
+        </script>
+      </div>
+    </div>
+
+    <h2 class="heading">Contain, None, and Fill fits</h2>
+    <div class="clearfix">
+      <div class="container container-3">
+        <img class="img img-contain" data-object-fit="contain" src="image-food-1280x853.jpeg" alt="">
+      </div>
+      <div class="container container-3">
+        <img class="img img-none" data-object-fit="none" src="image-food-1280x853.jpeg" alt="">
+      </div>
+      <div class="container container-3">
+        <img class="img img-fill" data-object-fit="fill" src="image-food-1280x853.jpeg" alt="">
+      </div>
+    </div>
+
+    <h2 class="heading">Scale-down fit</h2>
+    <div class="clearfix">
+      <div class="container container-2">
+        <img class="img img-scale-down" data-object-fit="scale-down" src="image-food-250x167.jpeg" alt="">
+      </div>
+      <div class="container container-2">
+        <img class="img img-scale-down" data-object-fit="scale-down" src="image-food-1280x853.jpeg" alt="">
+      </div>
+    </div>
+
+    <script src="../dist/objectFitPolyfill.min.js"></script>
+  </body>
+</html>
diff --git a/demo/style.css b/demo/style.css
@@ -0,0 +1,83 @@
+html, body {
+  margin: 0;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  background-color: #111;
+  color: #fff;
+}
+a {
+  color: inherit;
+}
+h1, h2 {
+  margin: 0;
+}
+
+.heading {
+  padding: 1em;
+  text-align: center;
+}
+.heading-intro {
+  position: relative;
+  top: 50%;
+  background-color: rgba(0,0,0, 0.8);
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+/**
+ * Containers
+ */
+
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.container {
+  position: relative;
+  float: left;
+  margin: 0 auto;
+  overflow: hidden;
+}
+.container-1 {
+  width: 100%;
+  height: 100%;
+}
+.container-2 {
+  width: 50%;
+  height: 25em;
+}
+.container-3 {
+  width: 33.333333%;
+  height: 20em;
+}
+
+/**
+ * object-fit styling
+ */
+
+.img {
+  width: 100%;
+  height: 100%;
+}
+.img-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: cover;
+}
+.img-contain {
+  object-fit: contain;
+}
+.img-none {
+  object-fit: none;
+}
+.img-scale-down {
+  object-fit: scale-down;
+}
+.img-fill {
+  object-fit: fill;
+}
diff --git a/demo/video-puppy.jpg b/demo/video-puppy.jpg
diff --git a/demo/video-puppy.mp4 b/demo/video-puppy.mp4
diff --git a/demo/video-puppy.webm b/demo/video-puppy.webm
diff --git a/index.html b/index.html