graham/aprs.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

js tweak

Browse source
This commit is contained in:
Graham McIntire 2025-07-05 13:16:37 -05:00
parent d5bc00fc86
commit eafa0feff5
No known key found for this signature in database
3 changed files with 17 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/js/app.js
View file

@ -20,29 +20,9 @@ import "phoenix_html";
// Establish Phoenix Socket and LiveView configuration.
import { Socket } from "phoenix";
import { LiveSocket } from "phoenix_live_view";
import topbar from "../vendor/topbar"
import "../vendor/oms.min.js";
// Load topbar library
const topbarScript = document.createElement('script');
topbarScript.src = '/assets/topbar.js';
topbarScript.onload = function() {
// Show progress bar on live navigation and form submits
if (window.topbar) {
window.topbar.config({
barColors: {
0: "hsl(var(--p))", // DaisyUI primary color
0.5: "hsl(var(--s))", // DaisyUI secondary color
1: "hsl(var(--a))" // DaisyUI accent color
},
shadowColor: "rgba(0, 0, 0, .3)",
barThickness: 3
});
window.addEventListener("phx:page-loading-start", (info) => window.topbar.show(200));
window.addEventListener("phx:page-loading-stop", (info) => window.topbar.hide());
}
};
document.head.appendChild(topbarScript);
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
// Import minimal APRS map hook
@ -198,6 +178,12 @@ let liveSocket = new LiveSocket("/live", Socket, {
hooks: Hooks,
});
// Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
// connect if there are any LiveViews on the page
liveSocket.connect();

7
assets/js/topbar.js Normal file
View file

@ -0,0 +1,7 @@
/**
* @license MIT
* topbar 3.0.0
* http://buunguyen.github.io/topbar
* Copyright (c) 2024 Buu Nguyen
*/
(function(window,document){"use strict";function repaint(){canvas.width=window.innerWidth,canvas.height=5*options.barThickness;var ctx=canvas.getContext("2d");ctx.shadowBlur=options.shadowBlur,ctx.shadowColor=options.shadowColor;var stop,lineGradient=ctx.createLinearGradient(0,0,canvas.width,0);for(stop in options.barColors)lineGradient.addColorStop(stop,options.barColors[stop]);ctx.lineWidth=options.barThickness,ctx.beginPath(),ctx.moveTo(0,options.barThickness/2),ctx.lineTo(Math.ceil(currentProgress*canvas.width),options.barThickness/2),ctx.strokeStyle=lineGradient,ctx.stroke()}var canvas,currentProgress,showing,progressTimerId=null,fadeTimerId=null,delayTimerId=null,options={autoRun:!0,barThickness:3,barColors:{0:"rgba(26, 188, 156, .9)",".25":"rgba(52, 152, 219, .9)",".50":"rgba(241, 196, 15, .9)",".75":"rgba(230, 126, 34, .9)","1.0":"rgba(211, 84, 0, .9)"},shadowBlur:10,shadowColor:"rgba(0, 0, 0, .6)",className:null},topbar={config:function(opts){for(var key in opts)options.hasOwnProperty(key)&&(options[key]=opts[key])},show:function(handler){var type,elem;showing||(handler?delayTimerId=delayTimerId||setTimeout(()=>topbar.show(),handler):(showing=!0,null!==fadeTimerId&&window.cancelAnimationFrame(fadeTimerId),canvas||((elem=(canvas=document.createElement("canvas")).style).position="fixed",elem.top=elem.left=elem.right=elem.margin=elem.padding=0,elem.zIndex=100001,elem.display="none",options.className&&canvas.classList.add(options.className),type="resize",handler=repaint,(elem=window).addEventListener?elem.addEventListener(type,handler,!1):elem.attachEvent?elem.attachEvent("on"+type,handler):elem["on"+type]=handler),canvas.parentElement||document.body.appendChild(canvas),canvas.style.opacity=1,canvas.style.display="block",topbar.progress(0),options.autoRun&&function loop(){progressTimerId=window.requestAnimationFrame(loop),topbar.progress("+"+.05*Math.pow(1-Math.sqrt(currentProgress),2))}()))},progress:function(to){return void 0===to||("string"==typeof to&&(to=(0<=to.indexOf("+")||0<=to.indexOf("-")?currentProgress:0)+parseFloat(to)),currentProgress=1<to?1:to,repaint()),currentProgress},hide:function(){clearTimeout(delayTimerId),delayTimerId=null,showing&&(showing=!1,null!=progressTimerId&&(window.cancelAnimationFrame(progressTimerId),progressTimerId=null),function loop(){return 1<=topbar.progress("+.1")&&(canvas.style.opacity-=.05,canvas.style.opacity<=.05)?(canvas.style.display="none",void(fadeTimerId=null)):void(fadeTimerId=window.requestAnimationFrame(loop))}())}};"object"==typeof module&&"object"==typeof module.exports?module.exports=topbar:"function"==typeof define&&define.amd?define(function(){return topbar}):this.topbar=topbar}).call(this,window,document);

9
config/dev.exs
View file

@ -42,19 +42,16 @@ config :aprsme, AprsmeWeb.Endpoint,
# Watch static and templates for browser reloading.
config :aprsme, AprsmeWeb.Endpoint,
live_reload: [
web_console_logger: true,
patterns: [
~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
~r"priv/gettext/.*(po)$",
~r"lib/aprsme_web/(live|views)/.*(ex)$",
~r"lib/aprsme_web/templates/.*(eex)$",
~r"assets/vendor/.*(js|css)$"
~r"lib/temp_web/(?:controllers|live|components|router)/?.*\.(ex|heex)$"
]
]
# Enable dev routes for dashboard and mailbox
#
# mix phx.gen.cert
#
# Run `mix help phx.gen.cert` for more information.
config :aprsme, dev_routes: true