Support CSSMathValue as rangeStart and rangeEnd if it can be simplifi…

…ed to a CSSUnitValue with px as unit. (#171)
flackr · Nov 17, 2023 · e7799de · e7799de
1 parent 17ec7f7
commit e7799de
Show file tree

Hide file tree

Showing 6 changed files with 890 additions and 8 deletions.
diff --git a/demo/view-timeline/with-math-value-range.html b/demo/view-timeline/with-math-value-range.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>view-timeline demo</title>
+</head>
+<style type="text/css">
+  #container {
+    display:  flex;
+    flex-direction: column;
+    border:  1px solid black;
+    height:  500px;
+    width:  500px;
+    overflow-x:  hidden;
+    overflow-y:  scroll;
+    position:  relative;
+    align-items:  flex-start;
+  }
+
+  .overlay {
+    position: absolute;
+    top:  10px;
+    left:  10px;
+    width:  500px;
+    height:  500px;
+    pointer-events: none;
+  }
+
+  .spacer {
+    display:  inline-block;
+    flex:  none;
+    height:  120vh;
+    width:  120vw;
+  }
+
+  #subject {
+    background-color:  rgba(0, 0, 255, 0.5);
+    display:  inline-block;
+    flex:  none;
+    height: 100px;
+    width:  90%;
+  }
+
+  .progress-bar,
+  .progress-bar-progress {
+    border:  1px solid green;
+    height:  20px;
+    width:  300px;
+    position:  absolute;
+    inset-inline-start:  20px;
+    padding:  0;
+  }
+
+  .progress-bar > span {
+    padding-left:  5px;
+    padding-right:  5px;
+  }
+
+  .progress-bar-progress {
+    border-color:  transparent;
+    background-color: rgba(0, 200, 0, 0.3);
+    width: 0px;
+  }
+
+</style>
+<body>
+  <div id="container">
+    <div class="spacer"></div>
+    <div id="subject"></div>
+    <div class="spacer"></div>
+  </div>
+  <div class="overlay">
+    <div class="progress-bar" style="top: 20px;"><span>cover</span></div>
+    <div class="progress-bar" style="top: 70px;"><span>cover calc(0% + 200px) calc(100% - 100px)</span></div>
+    <div class="progress-bar-progress" style="top: 20px;"></div>
+    <div class="progress-bar-progress" style="top: 70px;"></div>
+  </div>
+
+  <div class="overlay">
+    <div style="height: 99px"></div>
+    <div style="border-top: 1px solid red"></div>
+    <div style="height: 100px"></div>
+    <div style="height: 99px"></div>
+    <div style="border-top: 1px solid red"></div>
+  </div>
+
+</body>
+<script src="../../dist/scroll-timeline.js"></script>
+<script type="text/javascript">
+  "use strict";
+
+  const progressBars = document.querySelectorAll('.progress-bar-progress');
+  const createProgressAnimation = (bar, rangeStart, rangeEnd, axis, inset = 'auto') => {
+    const subject = document.getElementById('subject');
+    const viewTimeline = new ViewTimeline({
+      'subject': subject,
+      'axis': axis,
+      'inset': inset
+    });
+    bar.animate( { width: ['0px', '300px' ] }, {
+      timeline: viewTimeline,
+      rangeStart: rangeStart,
+      rangeEnd: rangeEnd,
+      fill: 'both'
+    });
+  }
+  const createAnimations = (selection) => {
+    const axis = 'block';
+    document.getAnimations().forEach(anim => {
+      anim.cancel();
+    });
+    createProgressAnimation(progressBars[0], { rangeName: 'cover', offset: CSS.percent(0) },
+      { rangeName: 'cover', offset: CSS.percent(100) }, axis);
+    createProgressAnimation(progressBars[1],
+      {
+        rangeName: "cover",
+        offset: new CSSMathSum(CSS.percent(0), new CSSMathProduct(CSS.number(2), CSS.px(100))),
+      },
+      {
+        rangeName: "cover",
+        offset: new CSSMathSum(CSS.percent(100), CSS.px(-100)),
+      }, axis)
+  };
+
+  createAnimations();
+</script>
+</html>