mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 14:03:42 +00:00
Merge pull request #627 from Koppeks/koppeks/templates_folder_contextmenu
Templates folder feature
This commit is contained in:
Nariman Jelveh
GitHub
commit
1f7f094282
@ -231,6 +231,8 @@ window.is_auto_arrange_enabled = true;
|
||||
window.desktop_item_positions = {};
|
||||
window.reset_item_positions = true; // The variable decides if the item positions should be reset when the user enabled auto arrange
|
||||
|
||||
window.file_templates = []
|
||||
|
||||
// default language
|
||||
window.locale = 'en';
|
||||
|
||||
|
||||
@ -432,7 +432,7 @@ window.refresh_user_data = async (auth_token)=>{
|
||||
}
|
||||
}
|
||||
|
||||
window.update_auth_data = (auth_token, user)=>{
|
||||
window.update_auth_data = async (auth_token, user)=>{
|
||||
window.auth_token = auth_token;
|
||||
localStorage.setItem('auth_token', auth_token);
|
||||
|
||||
@ -493,6 +493,9 @@ window.update_auth_data = (auth_token, user)=>{
|
||||
$('.user-options-login-btn, .user-options-create-account-btn').hide();
|
||||
$('.user-options-menu-btn').show();
|
||||
}
|
||||
|
||||
// Search and store user templates
|
||||
window.file_templates = await window.available_templates()
|
||||
}
|
||||
|
||||
window.mutate_user_preferences = function(user_preferences_delta) {
|
||||
@ -837,6 +840,57 @@ window.create_file = async(options)=>{
|
||||
}
|
||||
}
|
||||
|
||||
window.available_templates = async () => {
|
||||
const baseRoute = `/${window.user.username}`
|
||||
const keywords = ["template", "templates", i18n('template')]
|
||||
//make sure all its lowercase
|
||||
const lowerCaseKeywords = keywords.map(keywords => keywords.toLowerCase())
|
||||
|
||||
//create file
|
||||
try{
|
||||
// search the folder name i18n("template"), "template" or "templates"
|
||||
const files = await puter.fs.readdir(baseRoute)
|
||||
|
||||
const hasTemplateFolder = files.find(file => lowerCaseKeywords.includes(file.name.toLowerCase()))
|
||||
console.log(hasTemplateFolder)
|
||||
|
||||
if(!hasTemplateFolder){
|
||||
return []
|
||||
}
|
||||
|
||||
const hasTemplateFiles = await puter.fs.readdir(baseRoute + "/" + hasTemplateFolder.name)
|
||||
console.log(hasTemplateFiles)
|
||||
|
||||
if(hasTemplateFiles.length == 0) {
|
||||
return []
|
||||
}
|
||||
|
||||
let result = []
|
||||
|
||||
hasTemplateFiles.forEach(element => {
|
||||
console.log(element)
|
||||
const elementInformation = element.name.split(".")
|
||||
const name = elementInformation[0]
|
||||
let extension = elementInformation[1]
|
||||
console.log(extension)
|
||||
if(extension == "txt") extension = "text"
|
||||
const itemStructure = {
|
||||
html: `${extension.toUpperCase()} ${name}`,
|
||||
extension:extension,
|
||||
name: element.name
|
||||
}
|
||||
console.log(extension)
|
||||
result.push(itemStructure)
|
||||
});
|
||||
|
||||
// return result
|
||||
return result
|
||||
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
window.create_shortcut = async(filename, is_dir, basedir, appendto_element, shortcut_to, shortcut_to_path)=>{
|
||||
let dirname = basedir;
|
||||
const extname = path.extname(filename);
|
||||
|
||||
@ -27,52 +27,80 @@
|
||||
*/
|
||||
|
||||
const new_context_menu_item = function(dirname, append_to_element){
|
||||
|
||||
const baseItems = [
|
||||
// New Folder
|
||||
{
|
||||
html: i18n('new_folder'),
|
||||
icon: `<img src="${html_encode(window.icons['folder.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: function() {
|
||||
window.create_folder(dirname, append_to_element);
|
||||
},
|
||||
},
|
||||
// divider
|
||||
'-',
|
||||
// Text Document
|
||||
{
|
||||
html: i18n('text_document'),
|
||||
icon: `<img src="${html_encode(window.icons['file-text.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: async function() {
|
||||
window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.txt'});
|
||||
}
|
||||
},
|
||||
// HTML Document
|
||||
{
|
||||
html: i18n('html_document'),
|
||||
icon: `<img src="${html_encode(window.icons['file-html.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: async function() {
|
||||
window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.html'});
|
||||
}
|
||||
},
|
||||
// JPG Image
|
||||
{
|
||||
html: i18n('jpeg_image'),
|
||||
icon: `<img src="${html_encode(window.icons['file-image.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: async function() {
|
||||
var canvas = document.createElement("canvas");
|
||||
|
||||
canvas.width = 800;
|
||||
canvas.height = 600;
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New Image.jpg', content: blob});
|
||||
});
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
//Show file_templates on the lower part of "New"
|
||||
if (window.file_templates.length > 0) {
|
||||
// divider
|
||||
baseItems.push('-');
|
||||
|
||||
// User templates
|
||||
baseItems.push({
|
||||
html: "User templates",
|
||||
icon: `<img src="${html_encode(window.icons['file-template.svg'])}" class="ctx-item-icon">`,
|
||||
items: window.file_templates.map(template => ({
|
||||
html: template.html,
|
||||
icon: `<img src="${html_encode(window.icons[`file-${template.extension}.svg`])}" class="ctx-item-icon">`,
|
||||
onClick: function() {
|
||||
window.create_file({dirname: dirname, append_to_element: append_to_element, name: template.name});
|
||||
}
|
||||
}))
|
||||
});
|
||||
} else {
|
||||
// baseItems.push({
|
||||
// html: "No templates found",
|
||||
// icon: `<img src="${html_encode(window.icons['file-template.svg'])}" class="ctx-item-icon">`,
|
||||
// });
|
||||
}
|
||||
|
||||
//Conditional rendering for the templates
|
||||
return {
|
||||
html: i18n('new'),
|
||||
items: [
|
||||
// New Folder
|
||||
{
|
||||
html: i18n('new_folder'),
|
||||
icon: `<img src="${html_encode(window.icons['folder.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: function(){
|
||||
window.create_folder(dirname, append_to_element);
|
||||
}
|
||||
},
|
||||
// divider
|
||||
'-',
|
||||
// Text Document
|
||||
{
|
||||
html: i18n('text_document'),
|
||||
icon: `<img src="${html_encode(window.icons['file-text.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: async function(){
|
||||
window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.txt'});
|
||||
}
|
||||
},
|
||||
// HTML Document
|
||||
{
|
||||
html: i18n('html_document'),
|
||||
icon: `<img src="${html_encode(window.icons['file-html.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: async function(){
|
||||
window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New File.html'});
|
||||
}
|
||||
},
|
||||
// JPG Image
|
||||
{
|
||||
html: i18n('jpeg_image'),
|
||||
icon: `<img src="${html_encode(window.icons['file-image.svg'])}" class="ctx-item-icon">`,
|
||||
onClick: async function(){
|
||||
var canvas = document.createElement("canvas");
|
||||
|
||||
canvas.width = 800;
|
||||
canvas.height = 600;
|
||||
|
||||
canvas.toBlob((blob) =>{
|
||||
window.create_file({dirname: dirname, append_to_element: append_to_element, name: 'New Image.jpg', content: blob});
|
||||
});
|
||||
}
|
||||
},
|
||||
]
|
||||
}
|
||||
items: baseItems
|
||||
};
|
||||
}
|
||||
|
||||
export default new_context_menu_item;
|
||||
11
src/gui/src/icons/file-template.svg
Normal file
11
src/gui/src/icons/file-template.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.2" d="M10 5C8.892 5 8 5.892 8 7V43C8 44.108 8.892 45 10 45H38C39.108 45 40 44.108 40 43V17L28 5H10Z" fill="black"/>
|
||||
<path d="M10 4C8.892 4 8 4.892 8 6V42C8 43.108 8.892 44 10 44H38C39.108 44 40 43.108 40 42V16L30 14L28 4H10Z" fill="#E4E4E4"/>
|
||||
<path opacity="0.2" d="M40 17L28 5V15C28 16.108 28.892 17 30 17H40Z" fill="black"/>
|
||||
<path d="M40 16L28 4V14C28 15.108 28.892 16 30 16H40Z" fill="#FAFAFA"/>
|
||||
<path opacity="0.2" d="M10 4C8.892 4 8 4.892 8 6V7C8 5.892 8.892 5 10 5H28V4H10Z" fill="white"/>
|
||||
<path opacity="0.2" d="M23.5294 42.4706L14 36.827V24.3529L14.4706 23.8178L24 18L33.5294 23.8235L34 24.3529V36.7094L24.4706 42.4706L24 42.7647L23.5294 42.4706Z" fill="black"/>
|
||||
<path d="M14 24.3529L23.5294 30.2353V41.7647L14 36.1176V24.3529Z" fill="#2664EB"/>
|
||||
<path d="M34 24.3529L24.4706 30.2353V41.7647L34 36.1176V24.3529Z" fill="#2664EB"/>
|
||||
<path d="M24 18L14.4706 23.8235L24 29.6471L33.5294 23.8235L24 18Z" fill="#2664EB"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in New Issue
Block a user