mpa-enhancer - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

docs/todo/js/lib/mpa.js

@@ -38,2 +38,10 @@ // @ts-check
 
+/**
+* @param {HTMLElement | undefined} el
+* @returns {number | undefined}
+* */
+function calculateY(el) {
+    return el?.getBoundingClientRect().top
+}
+
 w.addEventListener('unload', () => {
@@ -54,12 +62,15 @@ let data = getData() || {}
     let target = active === doc.body ? lastClick : active
+    let miss = getAttr(target?.closest('[mpa-miss]'), 'mpa-miss')
+    let name = target?.getAttribute('name')
     data[pageName] = {
-        elY: target?.getBoundingClientRect().top,
         y: w.scrollY,
-        active: {
-            id: target?.id,
-            miss: getAttr(target?.closest('[mpa-miss]'), 'mpa-miss'),
-            name: target?.getAttribute('name')
+        // active
+        a: {
+            // target
+            t: { y: calculateY(target), q: (target?.id && `#${target.id}`) || (name && `[name="${name}"]`) },
+            // miss
+            m: { y: calculateY(query(miss)), q: miss }
         }
     }
-    localStorage.pageLocations = JSON.stringify(data)
+    localStorage._mpa = JSON.stringify(data)
 })
@@ -71,8 +82,5 @@
     if (!location) return
-    let { y, elY, active: { id, name, miss } } = location
+    let { y, a: { t, m } } = location
 
-    let active =
-        doc.getElementById(id)
-        || query(`[name="${name}"]`)
-        || query(miss)
+    let active = (t.q && query(t.q)) || (m.q && query(m.q))
     if (!hasAttr(active, 'mpa-skip-focus')) {
@@ -86,3 +94,9 @@ run('focus', active)
             // Scroll to where element was before
-            w.scrollTo({ top: w.scrollY + active.getBoundingClientRect().top - elY })
+            w.scrollTo({
+                top:
+                    w.scrollY
+                    // @ts-ignore
+                    + calculateY(active)
+                    - (t.q && t.y || m.q && m.y || 0)
+            })
         } else {
@@ -107,3 +121,3 @@ // Scroll to where page was before
 function getData(name) {
-    let data = localStorage.pageLocations
+    let data = localStorage._mpa
     data = data && JSON.parse(data)
@@ -110,0 +124,0 @@ return name == null ? data : data && data[name]

docs/todo/sw.js

@@ -158,3 +158,3 @@ // node_modules/idb-keyval/dist/index.js
             </form>
-            <ul id="todo-list" class="todo-list">${todos.map((x) => todoView(x, enableJS))}</ul>
+            <ul id="todo-list" class="todo-list">${todos.map(todoView)}</ul>
         </section>
@@ -186,2 +186,3 @@ <!-- This footer should be hidden by default and shown when there are todos -->
     $${enableJS ? `<script src="./js/lib/mpa.js"><\/script>` : ""}
+    <!--$${enableJS ? `<script src="./js/app.js"><\/script>` : ""}-->
 </body>
@@ -286,2 +287,3 @@ </html>`;
       "/js/lib/mpa.js",
+      "/js/app.js",
       "/css/base.css",
@@ -288,0 +290,0 @@ "/css/index.css",

package.json

 {
   "name": "mpa-enhancer",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Minimalist JavaScript to make your MPA work that much better",
@@ -18,3 +18,4 @@ "bugs": {
     "build": "npm run clean && npm run make-dirs && npm run static && esbuild --format=esm --outdir=docs/todo --bundle ./src-todo/sw.ts && npm run build-mpa",
-    "build-mpa": "npx esbuild src/mpa.js --minify --outfile=src/mpa.min.js"
+    "build-mpa": "npx esbuild src/mpa.js --minify --outfile=src/mpa.min.js",
+    "start-concat": "pwd; ./tasks/start-concat.sh"
   },
@@ -27,2 +28,3 @@ "author": "Jon Nyman",
   "dependencies": {
+    "html-template-tag": "^4.0.1",
     "html-template-tag-stream": "^1.1.2",
@@ -29,0 +31,0 @@ "idb-keyval": "^6.2.1",

README.md

@@ -8,3 +8,3 @@ # MPA Enhancer
 
-At 1.1 kB of minified JavaScript.
+At 1.2 kB of minified JavaScript.
 
@@ -64,3 +64,3 @@ [Example TODO MVC application.](https://jon49.github.io/mpa-enhancer/todo/)
 
-**2.2.2/3**
+**2.2.2/3/4**
 
@@ -71,3 +71,3 @@ Improved scrolling location.
 
-Fixed not working on Firefox and switched from even `beforeunload` to `unload`.
+Fixed not working on Firefox and switched from event `beforeunload` to `unload`.
 
@@ -74,0 +74,0 @@ **2.2.0**

src-todo/server/layout.ts

@@ -66,3 +66,3 @@ import html from "html-template-tag-stream"
             </form>
-            <ul id="todo-list" class="todo-list">${todos.map(x => todoView(x, enableJS))}</ul>
+            <ul id="todo-list" class="todo-list">${todos.map(todoView)}</ul>
         </section>
@@ -97,2 +97,3 @@ <!-- This footer should be hidden by default and shown when there are todos -->
     $${enableJS ? `<script src="./js/lib/mpa.js"></script>` : ''}
+    <!--$${enableJS ? `<script src="./js/app.js"></script>` : ''}-->
 </body>
@@ -99,0 +100,0 @@ </html>`

src-todo/sw.ts

@@ -23,2 +23,3 @@ import {
             "/js/lib/mpa.js",
+            "/js/app.js",
             "/css/base.css",
@@ -25,0 +26,0 @@ "/css/index.css",

src/mpa.js

@@ -38,2 +38,10 @@ // @ts-check
 
+/**
+* @param {HTMLElement | undefined} el
+* @returns {number | undefined}
+* */
+function calculateY(el) {
+    return el?.getBoundingClientRect().top
+}
+
 w.addEventListener('unload', () => {
@@ -54,12 +62,15 @@ let data = getData() || {}
     let target = active === doc.body ? lastClick : active
+    let miss = getAttr(target?.closest('[mpa-miss]'), 'mpa-miss')
+    let name = target?.getAttribute('name')
     data[pageName] = {
-        elY: target?.getBoundingClientRect().top,
         y: w.scrollY,
-        active: {
-            id: target?.id,
-            miss: getAttr(target?.closest('[mpa-miss]'), 'mpa-miss'),
-            name: target?.getAttribute('name')
+        // active
+        a: {
+            // target
+            t: { y: calculateY(target), q: (target?.id && `#${target.id}`) || (name && `[name="${name}"]`) },
+            // miss
+            m: { y: calculateY(query(miss)), q: miss }
         }
     }
-    localStorage.pageLocations = JSON.stringify(data)
+    localStorage._mpa = JSON.stringify(data)
 })
@@ -71,8 +82,5 @@
     if (!location) return
-    let { y, elY, active: { id, name, miss } } = location
+    let { y, a: { t, m } } = location
 
-    let active =
-        doc.getElementById(id)
-        || query(`[name="${name}"]`)
-        || query(miss)
+    let active = (t.q && query(t.q)) || (m.q && query(m.q))
     if (!hasAttr(active, 'mpa-skip-focus')) {
@@ -86,3 +94,9 @@ run('focus', active)
             // Scroll to where element was before
-            w.scrollTo({ top: w.scrollY + active.getBoundingClientRect().top - elY })
+            w.scrollTo({
+                top:
+                    w.scrollY
+                    // @ts-ignore
+                    + calculateY(active)
+                    - (t.q && t.y || m.q && m.y || 0)
+            })
         } else {
@@ -107,3 +121,3 @@ // Scroll to where page was before
 function getData(name) {
-    let data = localStorage.pageLocations
+    let data = localStorage._mpa
     data = data && JSON.parse(data)
@@ -117,2 +131,1 @@ return name == null ? data : data && data[name]
 
-

src/mpa.min.js

@@ -1,1 +0,1 @@
-(()=>{let a=document,n=window,s=a.querySelector.bind(a);function u(e,t){return e?.hasAttribute(t)}function d(e,t){return e?.getAttribute(t)}function g(){let e=d(a.body,"mpa-page-name");return e||new URL(a.location.href).pathname.replace(/\/$/,"")}let p=null;n.addEventListener("click",e=>{p=e.target}),n.addEventListener("unload",()=>{let e=m()||{},t=new Set(e.__||[]),r=g();u(a.body,"mpa-persist")&&(t.add(r),e.__=Array.from(t));for(let l in Object.keys(e))t.has(l)||l==="__"||delete e[l];let c=a.activeElement,i=c===a.body?p:c;e[r]={elY:i?.getBoundingClientRect().top,y:n.scrollY,active:{id:i?.id,miss:d(i?.closest("[mpa-miss]"),"mpa-miss"),name:i?.getAttribute("name")}},localStorage.pageLocations=JSON.stringify(e)});function y(){if(s("[autofocus]"))return;let e=m(g());if(!e)return;let{y:t,elY:r,active:{id:c,name:i,miss:l}}=e,o=a.getElementById(c)||s(`[name="${i}"]`)||s(l);u(o,"mpa-skip-focus")||(f("focus",o),f("select",o)),!u(a.body,"mpa-skip-scroll")&&t&&(o?n.scrollTo({top:n.scrollY+o.getBoundingClientRect().top-r}):n.scrollTo({top:t}))}function f(e,t){t&&t[e]&&t[e]()}function m(e){let t=localStorage.pageLocations;return t=t&&JSON.parse(t),e==null?t:t&&t[e]}y()})();
+(()=>{let l=document,i=window,o=l.querySelector.bind(l);function c(t,e){return t?.hasAttribute(e)}function d(t,e){return t?.getAttribute(e)}function f(){let t=d(l.body,"mpa-page-name");return t||new URL(l.location.href).pathname.replace(/\/$/,"")}let m=null;i.addEventListener("click",t=>{m=t.target});function s(t){return t?.getBoundingClientRect().top}i.addEventListener("unload",()=>{let t=g()||{},e=new Set(t.__||[]),n=f();c(l.body,"mpa-persist")&&(e.add(n),t.__=Array.from(e));for(let u in Object.keys(t))e.has(u)||u==="__"||delete t[u];let r=l.activeElement,a=r===l.body?m:r,y=d(a?.closest("[mpa-miss]"),"mpa-miss"),q=a?.getAttribute("name");t[n]={y:i.scrollY,a:{t:{y:s(a),q:a?.id&&`#${a.id}`||q&&`[name="${q}"]`},m:{y:s(o(y)),q:y}}},localStorage._mpa=JSON.stringify(t)});function b(){if(o("[autofocus]"))return;let t=g(f());if(!t)return;let{y:e,a:{t:n,m:r}}=t,a=n.q&&o(n.q)||r.q&&o(r.q);c(a,"mpa-skip-focus")||(p("focus",a),p("select",a)),!c(l.body,"mpa-skip-scroll")&&e&&(a?i.scrollTo({top:i.scrollY+s(a)-(n.q&&n.y||r.q&&r.y||0)}):i.scrollTo({top:e}))}function p(t,e){e&&e[t]&&e[t]()}function g(t){let e=localStorage._mpa;return e=e&&JSON.parse(e),t==null?e:e&&e[t]}b()})();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74941

increased by59.33%

Number of package files

37

increased by76.19%

Lines of code

2539

increased by71.79%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedhtml-template-tag@^4.0.1

• + Addedhtml-element-attributes@3.4.0(transitive)

• + Addedhtml-es6cape@2.0.2(transitive)

• + Addedhtml-template-tag@4.1.1(transitive)