`;
// logo
ht += `
`;
// create account button
ht += ``;
// 'show desktop'
if(window.is_fullpage_mode){
ht += `Open Desktop`;
}
// refer
if(user.referral_code){
ht += ``;
}
// do not show the fullscreen button on mobile devices since it's broken
if(!isMobile.phone){
// fullscreen button
ht += ``;
}
// qr code button -- only show if not embedded
if(!is_embedded)
ht += ``;
// user options menu
ht += ``;
ht += `
`;
// prepend toolbar to desktop
$(ht).insertBefore(el_desktop);
// adjust window container to take into account the toolbar height
$('.window-container').css('top', window.toolbar_height);
// ---------------------------------------------
// Run apps from insta-login URL
// ---------------------------------------------
if(url_query_params.has('app')){
let url_app_name = url_query_params.get('app');
if(url_app_name === 'explorer'){
let predefined_path = home_path;
if(url_query_params.has('path'))
predefined_path =url_query_params.get('path')
// launch explorer
UIWindow({
path: predefined_path,
title: path.basename(predefined_path),
icon: await item_icon({is_dir: true, path: predefined_path}),
// todo
// uid: $(el_item).attr('data-uid'),
is_dir: true,
// todo
// sort_by: $(el_item).attr('data-sort_by'),
app: 'explorer',
});
}
}
// ---------------------------------------------
// load from direct app URLs: /app/app-name
// ---------------------------------------------
else if(window.app_launched_from_url){
let qparams = new URLSearchParams(window.location.search);
if(!qparams.has('c')){
launch_app({
name: app_launched_from_url,
readURL: qparams.get('readURL'),
maximized: qparams.get('maximized'),
is_fullpage: window.is_fullpage_mode,
window_options: {
stay_on_top: false,
}
});
}
}
$(el_desktop).on('mousedown touchstart', function(e){
// dimiss touchstart on regular devices
if(e.type==='taphold' && !isMobile.phone && !isMobile.tablet)
return;
// disable pointer-events for all app iframes, this is to make sure selectable works
$('.window-app-iframe').css('pointer-events', 'none');
$('.window').find('.item-selected').addClass('item-blurred');
$('.desktop').find('.item-blurred').removeClass('item-blurred');
})
$(el_desktop).on('click', function(e){
// blur all windows
$('.window-active').removeClass('window-active');
})
function display_ct() {
var x = new Date()
var ampm = x.getHours( ) >= 12 ? ' PM' : ' AM';
let hours = x.getHours( ) % 12;
hours = hours ? hours : 12;
hours=hours.toString().length==1? 0+hours.toString() : hours;
var minutes=x.getMinutes().toString()
minutes=minutes.length==1 ? 0+minutes : minutes;
var seconds=x.getSeconds().toString()
seconds=seconds.length==1 ? 0+seconds : seconds;
var month=(x.getMonth() +1).toString();
month=month.length==1 ? 0+month : month;
var dt=x.getDate().toString();
dt=dt.length==1 ? 0+dt : dt;
var x1=month + "/" + dt + "/" + x.getFullYear();
x1 = x1 + " - " + hours + ":" + minutes + ":" + seconds + " " + ampm;
$('#clock').html(x1);
$('#clock').css('line-height', taskbar_height + 'px');
}
setInterval(display_ct, 1000);
// show referral notice window
if(window.show_referral_notice && !user.email_confirmed){
getItem({
key: "shown_referral_notice",
success: async function(res){
if(!res){
setTimeout(() => {
UIWindowClaimReferral();
}, 1000);
setItem({
key: "shown_referral_notice",
value: true,
})
}
}
})
}
}
$(document).on('contextmenu taphold', '.taskbar', function(event){
// dismiss taphold on regular devices
if(event.type==='taphold' && !isMobile.phone && !isMobile.tablet)
return;
event.preventDefault();
event.stopPropagation();
UIContextMenu({
parent_element: $('.taskbar'),
items: [
//--------------------------------------------------
// Show open windows
//--------------------------------------------------
{
html: "Show open windows",
onClick: function(){
$(`.window`).showWindow();
}
},
//--------------------------------------------------
// Show the desktop
//--------------------------------------------------
{
html: "Show the desktop",
onClick: function(){
$(`.window`).hideWindow();
}
}
]
});
return false;
})
$(document).on('click', '.qr-btn', async function (e) {
UIWindowQR();
})
$(document).on('click', '.user-options-menu-btn', async function(e){
const pos = this.getBoundingClientRect();
if($('.context-menu[data-id="user-options-menu"]').length > 0)
return;
let items = [];
let parent_element = this;
//--------------------------------------------------
// Save Session
//--------------------------------------------------
if(window.user.is_temp){
items.push(
{
html: `Save Session`,
icon: ``,
icon_active: ``,
onClick: async function(){
UIWindowSaveAccount({
send_confirmation_code: false,
default_username: window.user.username
});
}
},
)
// -------------------------------------------
// -
// -------------------------------------------
items.push('-')
}
// -------------------------------------------
// Logged in users
// -------------------------------------------
if(window.logged_in_users.length > 0){
let users_arr = window.logged_in_users;
// bring logged in user's item to top
users_arr.sort(function(x,y){ return x.uuid === window.user.uuid ? -1 : y.uuid == window.user.uuid ? 1 : 0; });
// create menu items
users_arr.forEach(l_user => {
items.push(
{
html: l_user.username,
icon: l_user.username === user.username ? '✓' : '',
onClick: async function(val){
// don't reload everything if clicked on already-logged-in user
if(l_user.username === user.username)
return;
// update auth data
update_auth_data(l_user.auth_token, l_user);
// refresh
location.reload();
}
},
)
});
// -------------------------------------------
// -
// -------------------------------------------
items.push('-')
items.push(
{
html: 'Add existing account',
// icon: l_user.username === user.username ? '✓' : '',
onClick: async function(val){
await UIWindowLogin({
reload_on_success: true,
send_confirmation_code: false,
window_options:{
has_head: true
}
});
}
},
)
// -------------------------------------------
// -
// -------------------------------------------
items.push('-')
}
UIContextMenu({
id: 'user-options-menu',
parent_element: parent_element,
position: {top: pos.top + 28, left: pos.left + pos.width - 15},
items: [
...items,
//--------------------------------------------------
// My Websites
//--------------------------------------------------
{
html: "My Websites",
onClick: async function(){
UIWindowMyWebsites();
}
},
//--------------------------------------------------
// Change Username
//--------------------------------------------------
{
html: "Change Username",
onClick: async function(){
UIWindowChangeUsername();
}
},
//--------------------------------------------------
// Change Password
//--------------------------------------------------
{
html: "Change Password",
onClick: async function(){
UIWindowChangePassword();
}
},
//--------------------------------------------------
// Contact Us
//--------------------------------------------------
{
html: "Contact Us",
onClick: async function(){
UIWindowFeedback();
}
},
// -------------------------------------------
// -
// -------------------------------------------
'-',
//--------------------------------------------------
// Log Out
//--------------------------------------------------
{
html: "Log Out",
onClick: async function(){
// see if there are any open windows, if yes notify user
if($('.window-app').length > 0){
const alert_resp = await UIAlert({
message: `You have open apps. Are you sure you want to log out?
`, buttons:[ { label: 'Close Windows and Log Out', type: 'primary', }, { label: 'Cancel' }, ] }) if(alert_resp === 'Close Windows and Log Out') logout(); } // no open windows else logout(); } }, ] }); }) $(document).on('click', '.fullscreen-btn', async function (e) { if(!is_fullscreen()) { var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.mozRequestFullScreen) { /* moz */ elem.mozRequestFullScreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } else{ if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } }) $(document).on('click', '.close-launch-popover', function(){ $(".launch-popover").closest('.popover').fadeOut(200, function(){ $(".launch-popover").closest('.popover').remove(); }); }); $(document).on('click', '.toolbar-puter-logo', function(){ // launch the about app launch_app({name: 'about', window_options:{ single_instance: true, }}); }) $(document).on('click', '.user-options-create-account-btn', async function(e){ UIWindowSaveAccount({ send_confirmation_code: false, default_username: window.user.username, }); }) $(document).on('click', '.refer-btn', async function(e){ UIWindowRefer(); }) $(document).on('click', '.start-app', async function(e){ launch_app({ name: $(this).attr('data-app-name') }) // close popovers $(".popover").fadeOut(200, function(){ $(".popover").remove(); }); }) $(document).on('click', '.user-options-login-btn', async function(e){ const alert_resp = await UIAlert({ message: `Save session before exiting!You are in a temporary session and logging into another account will erase all data in your current session.
`, buttons:[ { label: 'Save session', value: 'save-session', type: 'primary', }, { label: 'Log into another account anyway', value: 'login', }, { label: 'Cancel' }, ] }) if(alert_resp === 'save-session'){ let saved = await UIWindowSaveAccount({ send_confirmation_code: false, }); if(saved) UIWindowLogin({show_signup_button: false, reload_on_success: true}); }else if (alert_resp === 'login'){ UIWindowLogin({ show_signup_button: false, reload_on_success: true, window_options: { backdrop: true, close_on_backdrop_click: false, } }); } }) $(document).on('click mousedown', '.launch-search, .launch-popover', function(e){ $(this).focus(); e.stopPropagation(); e.preventDefault(); // don't let click bubble up to window e.stopImmediatePropagation(); }) $(document).on('focus', '.launch-search', function(e){ // remove all selected items in start menu $('.launch-app-selected').removeClass('launch-app-selected'); // scroll popover to top $('.launch-popover').scrollTop(0); }) $(document).on('change keyup keypress keydown paste', '.launch-search', function(e){ // search launch_apps.recommended for query const query = $(this).val().toLowerCase(); if(query === ''){ $('.launch-search-clear').hide(); $(`.start-app-card`).show(); $('.launch-apps-recent').show(); $('.start-section-heading').show(); }else{ $('.launch-apps-recent').hide(); $('.start-section-heading').hide(); $('.launch-search-clear').show(); launch_apps.recommended.forEach((app)=>{ if(app.title.toLowerCase().includes(query.toLowerCase())){ $(`.start-app-card[data-name="${app.name}"]`).show(); }else{ $(`.start-app-card[data-name="${app.name}"]`).hide(); } }) } }) $(document).on('click', '.launch-search-clear', function(e){ $('.launch-search').val(''); $('.launch-search').trigger('change'); $('.launch-search').focus(); }) document.addEventListener('fullscreenchange', (event) => { // document.fullscreenElement will point to the element that // is in fullscreen mode if there is one. If there isn't one, // the value of the property is null. if (document.fullscreenElement) { $('.fullscreen-btn').css('background-image', `url(${window.icons['shrink.svg']})`); $('.fullscreen-btn').attr('title', 'Exit Full Screen'); $('#clock').show(); } else { $('.fullscreen-btn').css('background-image', `url(${window.icons['fullscreen.svg']})`); $('.fullscreen-btn').attr('title', 'Enter Full Screen'); $('#clock').hide(); } }) window.set_desktop_background = function(options){ if(options.fit){ let fit = options.fit; if(fit === 'cover' || fit === 'contain'){ $('body').css('background-size', fit); $('body').css('background-repeat', `no-repeat`); $('body').css('background-position', `center center`); } else if(fit === 'center'){ $('body').css('background-size', 'auto'); $('body').css('background-repeat', `no-repeat`); $('body').css('background-position', `center center`); } else if( fit === 'repeat'){ $('body').css('background-size', `auto`); $('body').css('background-repeat', `repeat`); } window.desktop_bg_fit = fit; } if(options.url){ $('body').css('background-image', `url(${options.url})`); window.desktop_bg_url = options.url; window.desktop_bg_color = undefined; } else if(options.color){ $('body').css({ 'background-image': `none`, 'background-color': options.color, }); window.desktop_bg_color = options.color; window.desktop_bg_url = undefined; } } window.update_taskbar = function(){ let items = [] $('.taskbar-item-sortable[data-keep-in-taskbar="true"]').each(function(index){ items.push({ name: $( this ).attr('data-app'), type: 'app', }) }) // update taskbar in the server-side $.ajax({ url: api_origin + "/update-taskbar-items", type: 'POST', data: JSON.stringify({ items: items, }), async: true, contentType: "application/json", headers: { "Authorization": "Bearer "+auth_token }, }) } window.remove_taskbar_item = function(item){ $(item).find('*').fadeOut(100, function(){}); $(item).animate({width: 0}, 200, function(){ $(item).remove(); }) } window.enter_fullpage_mode = (el_window)=>{ $('.taskbar').hide(); $(el_window).find('.window-head').hide(); $('body').addClass('fullpage-mode'); $(el_window).css({ width: '100%', height: '100%', top: toolbar_height + 'px', left: 0, 'border-radius': 0, }); } window.exit_fullpage_mode = (el_window)=>{ $('body').removeClass('fullpage-mode'); window.taskbar_height = window.default_taskbar_height; $('.taskbar').css('height', window.taskbar_height); $('.taskbar').show(); refresh_item_container($('.desktop.item-container'), {fadeInItems: true}); $(el_window).removeAttr('data-is_fullpage'); if(el_window){ reset_window_size_and_position(el_window) $(el_window).find('.window-head').show(); } // reset dektop height to take into account the taskbar height $('.desktop').css('height', `calc(100vh - ${window.taskbar_height + window.toolbar_height}px)`); // hide the 'Show Desktop' button in toolbar $('.show-desktop-btn').hide(); // refresh desktop background refresh_desktop_background(); } window.reset_window_size_and_position = (el_window)=>{ $(el_window).css({ width: 680, height: 380, 'border-radius': window_border_radius, top: 'calc(50% - 190px)', left: 'calc(50% - 340px)', }); } export default UIDesktop;