mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-14 22:06:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: first extension that implements a custom user options menu

Browse Source
This commit is contained in:
jelveh 2024-10-29 22:55:26 -07:00
parent b018571a86
commit fc5e15f2a6
3 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/gui/src/UI/UIContextMenu.js
View File

@ -90,7 +90,6 @@
* https://github.com/kamens/jQuery-menu-aim
*/
(function ($) {
$.fn.menuAim = function (opts) {
// Initialize menu-aim for all elements in jQuery collection
this.each(function () {
@ -365,6 +364,10 @@ function UIContextMenu(options){
$('.window-active .window-app-iframe').css('pointer-events', 'none');
const menu_id = window.global_element_id++;
// Dispatch 'ctxmenu-will-open' event
window.dispatchEvent(new CustomEvent('ctxmenu-will-open', { detail: { options: options} }));
let h = '';
h += `<div
id="context-menu-${menu_id}"
@ -424,10 +427,12 @@ function UIContextMenu(options){
h += `</div>`
$('body').append(h)
const contextMenu = document.getElementById(`context-menu-${menu_id}`);
const menu_width = $(contextMenu).width();
const menu_height = $(contextMenu).outerHeight();
let start_x, start_y;
//--------------------------------
// Auto position
//--------------------------------
@ -505,7 +510,7 @@ function UIContextMenu(options){
};
// An item is clicked
$(`#context-menu-${menu_id} > li:not(.context-menu-item-disabled)`).on('click', function (e) {
$(document).on('click', `#context-menu-${menu_id} > li:not(.context-menu-item-disabled)`, function (e) {
// onClick
if(options.items[$(this).attr("data-action")].onClick && typeof options.items[$(this).attr("data-action")].onClick === 'function'){

1
src/gui/src/UI/UIDesktop.js
View File

@ -1411,6 +1411,7 @@ $(document).on('click', '.user-options-menu-btn', async function(e){
//--------------------------------------------------
{
html: i18n('contact_us'),
id: 'contact_us',
onClick: async function(){
UIWindowFeedback();
}

27
src/gui/src/extensions/modify-user-options-menu.js Normal file
View File

@ -0,0 +1,27 @@
$(window).on('ctxmenu-will-open', (event) => {
if(event.detail.options?.id === 'user-options-menu'){
// Define array of new menu items
const newMenuItems = [
// Separator
'-',
// 'Developer', opens developer site in new tab
{
id: 'go_to_developer_site',
html: 'Developer<svg style="width: 11px; height: 11px; margin-left:2px;" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m26 28h-20a2.0027 2.0027 0 0 1 -2-2v-20a2.0027 2.0027 0 0 1 2-2h10v2h-10v20h20v-10h2v10a2.0027 2.0027 0 0 1 -2 2z"/><path d="m20 2v2h6.586l-8.586 8.586 1.414 1.414 8.586-8.586v6.586h2v-10z"/><path d="m0 0h32v32h-32z" fill="none"/></svg>',
html_active: 'Developer<svg style="width: 11px; height: 11px; margin-left:2px;" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"> <path d="m26 28h-20a2.0027 2.0027 0 0 1 -2-2v-20a2.0027 2.0027 0 0 1 2-2h10v2h-10v20h20v-10h2v10a2.0027 2.0027 0 0 1 -2 2z" style="fill: rgb(255, 255, 255);"/> <path d="m20 2v2h6.586l-8.586 8.586 1.414 1.414 8.586-8.586v6.586h2v-10z" style="fill: rgb(255, 255, 255);"/> <path d="m0 0h32v32h-32z" fill="none"/> </svg>',
action: function(){
window.open('https://developer.puter.com', '_blank');
}
},
];
// Find the position of 'contact_us'
const items = event.detail.options.items;
const insertBeforeIndex = items.findIndex(item => item.id === 'contact_us');
// Insert all new items before 'contact_us'
const firstHalf = items.slice(0, insertBeforeIndex);
const secondHalf = items.slice(insertBeforeIndex);
event.detail.options.items = [...firstHalf, ...newMenuItems, ...secondHalf];
}
});