@jschofield/scroll-explain 0.2.0 → 0.3.0

package/dist/assets/index.js

@@ -1,4 +1,4 @@
-import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,property as i}from"lit/decorators.js";function a(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var o=class extends e{constructor(...e){super(...e),this._lastActiveLines=``,this._codeBlock=null,this._sections=[],this._sectionObserver=null,this._activeSections=new Set,this._onResize=()=>{this._setupObserver()},this._scrollAnimation=null}firstUpdated(){this._codeBlock=this.querySelector(`code-highlight`),this._sections=Array.from(this.querySelectorAll(`explain-section`)),!(!this._codeBlock||this._sections.length===0)&&(this._setupObserver(),window.addEventListener(`resize`,this._onResize,{passive:!0}))}_setupObserver(){this._sectionObserver?.disconnect(),this._activeSections.clear();let e=window.matchMedia(`(max-width: 900px)`).matches?`-65% 0px -10% 0px`:`-40% 0px -35% 0px`;this._sectionObserver=new IntersectionObserver(e=>{for(let t of e){let e=t.target;t.isIntersecting?this._activeSections.add(e):this._activeSections.delete(e)}for(let e of this._sections)if(this._activeSections.has(e)){this._setActive(e);return}this._activeSections.size===0&&(this._lastActiveLines=``,this._codeBlock.clearActiveLines())},{rootMargin:e,threshold:0});for(let e of this._sections)this._sectionObserver.observe(e)}_setActive(e){let t=e.lines;!t||t===this._lastActiveLines||(this._lastActiveLines=t,this._codeBlock.setActiveLines(t),this._scrollToActiveLine())}async _scrollToActiveLine(){let e=this._codeBlock;await e.updateComplete;let t=e.getFirstActiveLine();if(!t)return;let n=e.getScrollContainer();if(!n)return;let r=n.getBoundingClientRect(),i=t.getBoundingClientRect(),a=Math.max(0,i.top-r.top+n.scrollTop-n.clientHeight/2+i.height/2);this._smoothScroll(n,a,1e3)}_smoothScroll(e,t,n){this._scrollAnimation&&cancelAnimationFrame(this._scrollAnimation);let r=e.scrollTop,i=t-r;if(Math.abs(i)<1)return;let a=performance.now(),o=t=>{let s=t-a,c=Math.min(s/n,1);e.scrollTop=r+i*(1-(1-c)**3),c<1?this._scrollAnimation=requestAnimationFrame(o):this._scrollAnimation=null};this._scrollAnimation=requestAnimationFrame(o)}disconnectedCallback(){super.disconnectedCallback(),this._sectionObserver?.disconnect(),window.removeEventListener(`resize`,this._onResize)}render(){return n`
+import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,property as i}from"lit/decorators.js";function a(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var o=class extends e{constructor(...e){super(...e),this._lastActiveLines=``,this._codeBlock=null,this._sections=[],this._sectionObserver=null,this._activeSections=new Set,this._onResize=()=>{this._setupObserver()},this._activeSection=null,this._scrollAnimation=null}firstUpdated(){this._codeBlock=this.querySelector(`code-highlight`),this._sections=Array.from(this.querySelectorAll(`explain-section`)),!(!this._codeBlock||this._sections.length===0)&&(this._setupObserver(),window.addEventListener(`resize`,this._onResize,{passive:!0}))}_setupObserver(){this._sectionObserver?.disconnect(),this._activeSections.clear();let e=window.matchMedia(`(max-width: 900px)`).matches?`-65% 0px -10% 0px`:`-40% 0px -35% 0px`;this._sectionObserver=new IntersectionObserver(e=>{for(let t of e){let e=t.target;t.isIntersecting?this._activeSections.add(e):this._activeSections.delete(e)}for(let e of this._sections)if(this._activeSections.has(e)){this._setActive(e);return}this._activeSections.size===0&&(this._lastActiveLines=``,this._codeBlock.clearActiveLines(),this._activeSection&&=(this._activeSection.removeAttribute(`active`),null))},{rootMargin:e,threshold:0});for(let e of this._sections)this._sectionObserver.observe(e)}_setActive(e){let t=e.lines;!t||t===this._lastActiveLines||(this._lastActiveLines=t,this._activeSection&&this._activeSection!==e&&this._activeSection.removeAttribute(`active`),e.setAttribute(`active`,``),this._activeSection=e,this._codeBlock.setActiveLines(t),this._scrollToActiveLine())}async _scrollToActiveLine(){let e=this._codeBlock;await e.updateComplete;let t=e.getFirstActiveLine();if(!t)return;let n=e.getScrollContainer();if(!n)return;let r=n.getBoundingClientRect(),i=t.getBoundingClientRect(),a=Math.max(0,i.top-r.top+n.scrollTop-n.clientHeight/2+i.height/2);this._smoothScroll(n,a,1e3)}_smoothScroll(e,t,n){this._scrollAnimation&&cancelAnimationFrame(this._scrollAnimation);let r=e.scrollTop,i=t-r;if(Math.abs(i)<1)return;let a=performance.now(),o=t=>{let s=t-a,c=Math.min(s/n,1);e.scrollTop=r+i*(1-(1-c)**3),c<1?this._scrollAnimation=requestAnimationFrame(o):this._scrollAnimation=null};this._scrollAnimation=requestAnimationFrame(o)}disconnectedCallback(){super.disconnectedCallback(),this._sectionObserver?.disconnect(),window.removeEventListener(`resize`,this._onResize)}render(){return n`
       <div class="container">
         <div class="prose">
           <slot name="prose"></slot>
@@ -78,4 +78,15 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,pr
     :host(:first-of-type) {
       padding-top: 0;
     }
+
+    slot {
+      display: block;
+      border-left: 3px solid transparent;
+      padding-left: 1rem;
+      transition: border-color 0.3s ease;
+    }
+
+    :host([active]) slot {
+      border-left-color: var(--accent, #f79103);
+    }
   `}};a([i()],s.prototype,`lines`,void 0),s=a([r(`explain-section`)],s);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jschofield/scroll-explain",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/assets/index.js",
   "exports": {