Skip to content

Commit

Permalink
Add Search Command Palette
Browse files Browse the repository at this point in the history
  • Loading branch information
@gigamaster
gigamaster committed Jul 21, 2024
1 parent 64800ad commit a04ccdb
Show file tree
Hide file tree
Showing 8 changed files with 1,453 additions and 656 deletions.
223 changes: 162 additions & 61 deletions app/asset/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/*! instant.page v5.2.0 - (C) 2019-2023 Alexandre Dieulot - https://instant.page/license */
let t,e,n,o,i,a=null,s=65,c=new Set;const r=1111;function d(t){o=performance.now();const e=t.target.closest("a");m(e)&&p(e.href,"high")}function u(t){if(performance.now()-o<r)return;if(!("closest"in t.target))return;const e=t.target.closest("a");m(e)&&(e.addEventListener("mouseout",f,{passive:!0}),i=setTimeout(()=>{p(e.href,"high"),i=void 0},s))}function l(t){const e=t.target.closest("a");m(e)&&p(e.href,"high")}function f(t){t.relatedTarget&&t.target.closest("a")==t.relatedTarget.closest("a")||i&&(clearTimeout(i),i=void 0)}function h(t){if(performance.now()-o<r)return;const e=t.target.closest("a");if(t.which>1||t.metaKey||t.ctrlKey)return;if(!e)return;e.addEventListener("click",function(t){1337!=t.detail&&t.preventDefault()},{capture:!0,passive:!1,once:!0});const n=new MouseEvent("click",{view:window,bubbles:!0,cancelable:!1,detail:1337});e.dispatchEvent(n)}function m(o){if(o&&o.href&&(!n||"instant"in o.dataset)){if(o.origin!=location.origin){if(!(e||"instant"in o.dataset)||!a)return}if(["http:","https:"].includes(o.protocol)&&("http:"!=o.protocol||"https:"!=location.protocol)&&(t||!o.search||"instant"in o.dataset)&&!(o.hash&&o.pathname+o.search==location.pathname+location.search||"noInstant"in o.dataset))return!0}}function p(t,e="auto"){if(c.has(t))return;const n=document.createElement("link");n.rel="prefetch",n.href=t,n.fetchPriority=e,n.as="document",document.head.appendChild(n),c.add(t)}!function(){if(!document.createElement("link").relList.supports("prefetch"))return;const o="instantVaryAccept"in document.body.dataset||"Shopify"in window,i=navigator.userAgent.indexOf("Chrome/");i>-1&&(a=parseInt(navigator.userAgent.substring(i+"Chrome/".length)));if(o&&a&&a<110)return;const c="instantMousedownShortcut"in document.body.dataset;t="instantAllowQueryString"in document.body.dataset,e="instantAllowExternalLinks"in document.body.dataset,n="instantWhitelist"in document.body.dataset;const r={capture:!0,passive:!0};let f=!1,v=!1,g=!1;if("instantIntensity"in document.body.dataset){const t=document.body.dataset.instantIntensity;if(t.startsWith("mousedown"))f=!0,"mousedown-only"==t&&(v=!0);else if(t.startsWith("viewport")){const e=navigator.connection&&navigator.connection.saveData,n=navigator.connection&&navigator.connection.effectiveType&&navigator.connection.effectiveType.includes("2g");e||n||("viewport"==t?document.documentElement.clientWidth*document.documentElement.clientHeight<45e4&&(g=!0):"viewport-all"==t&&(g=!0))}else{const e=parseInt(t);isNaN(e)||(s=e)}}v||document.addEventListener("touchstart",d,r);f?c||document.addEventListener("mousedown",l,r):document.addEventListener("mouseover",u,r);c&&document.addEventListener("mousedown",h,r);if(g){let t=window.requestIdleCallback;t||(t=(t=>{t()})),t(function(){const t=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){const n=e.target;t.unobserve(n),p(n.href)}})});document.querySelectorAll("a").forEach(e=>{m(e)&&t.observe(e)})},{timeout:1500})}}();
/* global LinkPreviewer */
const linkPreviewer = new LinkPreviewer();
linkPreviewer.attach('td a.preview');

/**
* Codemo - GitHub Web File Browser
* https://gigamaster.github.io/codemo/
*/
/* Color schemes, mobile, panel */
const setup = () => {
const getTheme = () => {
if (window.localStorage.getItem('dark')) {
Expand All @@ -21,7 +20,7 @@ const setup = () => {
if (window.localStorage.getItem('color')) {
return window.localStorage.getItem('color')
}
return 'cyan'
return 'blue'
}

const setColors = (color) => {
Expand Down Expand Up @@ -82,69 +81,122 @@ const setup = () => {
this.$refs.mobileMainMenu.focus()})
}
}
}
/* Alpine Fetch GitHub Gigamaster Repo Commits */
function commitsData() {
return {
title: 'Latest Commits',
commits: [],
reload() {
sessionStorage.removeItem("commits");
this.commits = [];
this.init();
},
init() {
// Testdata
/*let commits = [
{
"message": "commit",
"author": "gigamaster",
"date": "2024-05-27"
}
];*/

// Check sessionData to avoid calling the api
const commits = JSON.parse(sessionStorage.getItem("commits"));

if(commits){
// storage accessible to x-data
this.commits = commits;
console.log('sessionStorage', commits);
return;
}
// get commits latest 10 first page
fetch('https://api.github.com/repos/gigamaster/codemo/commits?per_page=10&page=1')
.then(response => response.json())
.then(response => {
console.log('fetched',response);
// removed collect
let commits = response.map((item) => {
// removed parser
return item;
});
}

this.commits = commits;
sessionStorage.setItem("commits",JSON.stringify(commits));
console.log(this,response)
});
}
};


/* Search palette */
document.addEventListener('alpine:init', () => {
Alpine.data('spotlight', () => ({
data: [],
query: '',
show: false,
currentIndex: -1,
init() {
// Initialize data
fetch('sourceData.json')
.then(res => res.json())
.then(data => this.data = data.data);
},
showSearchBar() {
this.show = true;
this.query = ''
// focus in input
this.$nextTick(() => {
this.$refs.input.focus()
})
},
closeSearchBar() {
this.show = false
this.query = ''
this.currentIndex = -1
},
get queryFilter() {
// Return filtered items if query is not empty
// then return the items which includes query string
return this.query && this.data.filter(item => {
const page_name = item.page_title + "—" + item.page_desc
return page_name.toLowerCase().includes(this.query.toLowerCase())
})
},
previous() {
// move cursor to previous item
// if currentIndex is -1 dont execute
if (this.currentIndex == -1)
return
this.currentIndex--
// if index is less than 0 set input value to query
if (this.currentIndex < 0) {
this.$nextTick(() => {
// cursor at the end of text
this.$refs.input.focus()
this.$refs.input.value = this.query
})
return
}
// set the input value to current filtered item value
this.$nextTick(() => {
// cursor at the end of text
this.$refs.input.focus()
this.$refs.input.value = this.queryFilter[this.currentIndex].page_title + ' ' + this.queryFilter[this.currentIndex].page_cat
})
this.observer()
},
next() {
// move cursor to next item
// if currentIndex is last of filtered items then return
if (this.currentIndex >= this.queryFilter.length - 1)
return
this.currentIndex++
this.$refs.input.value = this.queryFilter[this.currentIndex].page_title + ' ' + this.queryFilter[this.currentIndex].page_desc
this.observer()
},
observer() {
// Observe if item is visible or not
var element = document.getElementById(`item-${this.currentIndex}`)
var parent = this.$refs.parent;

const elementTop = element.offsetTop;
const elementBottom = elementTop + element.clientHeight;

const parentTop = parent.scrollTop;
const parentBottom = parentTop + parent.clientHeight;

// Scroll bottom
// triggered for this.next()
if (elementBottom > parentBottom) {
parent.scrollBy(0, 65)
}
// Scroll Top
// triggered for this.previous()
if (elementTop < parentTop) {
parent.scrollBy(0, -65)
}
},
select() {
// Select Item
this.closeSearchBar()
// Do whatever you want with selected item
// var selectedItem = this.queryFilter[this.currentIndex];
window.open(this.queryFilter[this.currentIndex].page_url, '_blank');
//window.open(this.options[this.selectedIndex].value, '_blank');
}
}))
})

/*
Usage Example:
openWithSelfMain('https://github.com/xoopscube','XOOPSCube','900','500');
Location = null is useless because modern browsers now prevent, by default,
hiding the address bar for security reasons (phishing)
Usage Example:
openWithSelfMain('https://example.com','XOOPSCube','900','500');
Location = null is useless because modern browsers now prevent, by default,
hiding the address bar for security reasons (phishing)
*/
function openWithSelfMain(url, title, w, h) {
event.preventDefault();
Event.preventDefault()
// Fixes dual-screen position Most browsers Firefox
var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;

width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

var left = ((width / 2) - (w / 2)) + dualScreenLeft;
var top = ((height / 2) - (h / 2)) + dualScreenTop;
var newWindow = window.open(url, title,
Expand All @@ -159,6 +211,55 @@ function openWithSelfMain(url, title, w, h) {
newWindow.focus();
}
}

/* global LinkPreviewer */
const linkPreviewer = new LinkPreviewer();
linkPreviewer.attach('td a.preview');

/* GitHub Fetch Repo Commits */
function commitsData() {
return {
title: 'Latest Commits',
commits: [],
reload() {
sessionStorage.removeItem("commits");
this.commits = [];
this.init();
},
init() {
// Testdata
/*let commits = [
{
"message": "commit",
"author": "gigamaster",
"date": "2024-05-27"
}
];*/
// Check sessionData to avoid calling the api
const commits = JSON.parse(sessionStorage.getItem("commits"));
if(commits){
// storage accessible to x-data
this.commits = commits;
//console.log('sessionStorage', commits);
return;
}
// get commits latest 10 first page
fetch('https://api.github.com/repos/gigamaster/codemo/commits?per_page=10&page=1')
.then(response => response.json())
.then(response => {
//console.log('fetched',response);
// removed collect
let commits = response.map((item) => {
// removed parser
return item;
});
this.commits = commits;
sessionStorage.setItem("commits",JSON.stringify(commits));
console.log(this,response)
});
}
};
}
/*! fetch */
var _htmlToElements=function(e){var t=document.createElement("template");t.innerHTML=e;const n=t.content.childNodes,o=[],a=[];for(var d in n)1==n[d].nodeType&&("SCRIPT"===n[d].nodeName?a.push(n[d]):o.push(n[d]));return o.concat(a)},_loadContent=function(e,t,n,o){if(0!==t||o||(document.querySelector(n).innerHTML=""),!(t<=e.length))return!0;var a=e[t];if(void 0!==a&&"SCRIPT"===a.nodeName){var d=document.createElement("script");a.type&&(d.type=a.type),Array.prototype.forEach.call(a.attributes,(function(e){d.setAttribute(e.nodeName,e.nodeValue)})),""!=a.src?(d.src=a.src,d.onload=function(){_loadContent(e,t+1,n)},document.head.appendChild(d)):(d.text=a.text,document.body.appendChild(d),_loadContent(e,t+1,n))}else void 0!==a&&document.querySelector(n).appendChild(a),_loadContent(e,t+1,n)},loadData=async function(e,t,n=!1){return _loadContent(_htmlToElements(e),0,t,n)};
// var _htmlToElements=function(e){var t=document.createElement("template");t.innerHTML=e;const n=t.content.childNodes,o=[],a=[];for(var d in n)1==n[d].nodeType&&("SCRIPT"===n[d].nodeName?a.push(n[d]):o.push(n[d]));return o.concat(a)},_loadContent=function(e,t,n,o){if(0!==t||o||(document.querySelector(n).innerHTML=""),!(t<=e.length))return!0;var a=e[t];if(void 0!==a&&"SCRIPT"===a.nodeName){var d=document.createElement("script");a.type&&(d.type=a.type),Array.prototype.forEach.call(a.attributes,(function(e){d.setAttribute(e.nodeName,e.nodeValue)})),""!=a.src?(d.src=a.src,d.onload=function(){_loadContent(e,t+1,n)},document.head.appendChild(d)):(d.text=a.text,document.body.appendChild(d),_loadContent(e,t+1,n))}else void 0!==a&&document.querySelector(n).appendChild(a),_loadContent(e,t+1,n)},loadData=async function(e,t,n=!1){return _loadContent(_htmlToElements(e),0,t,n)};

Loading

0 comments on commit a04ccdb

Please sign in to comment.