diff --git a/js/FileManager.js b/js/FileManager.js new file mode 100644 index 0000000..e5fd58d --- /dev/null +++ b/js/FileManager.js @@ -0,0 +1,197 @@ +const FileManager = (() => { + + // Binding the browse holder change event to file loading + const browseHolder = document.getElementById('open-image-browse-holder'); + Input.on('change', browseHolder, loadFile); + + function saveProject() { + //create name + let fileName; + let selectedPalette = Util.getText('palette-button'); + + if (selectedPalette != 'Choose a palette...'){ + let paletteAbbreviation = palettes[selectedPalette].abbreviation; + fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe'; + } else { + fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe'; + selectedPalette = 'none'; + } + + //set download link + const linkHolder = document.getElementById('save-project-link-holder'); + // create file content + const content = getProjectData(); + + linkHolder.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content); + linkHolder.download = fileName; + linkHolder.click(); + + if (typeof ga !== 'undefined') + ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/ + } + + function exportProject() { + if (documentCreated) { + //create name + var selectedPalette = Util.getText('palette-button'); + if (selectedPalette != 'Choose a palette...'){ + var paletteAbbreviation = palettes[selectedPalette].abbreviation; + var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; + } else { + var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; + selectedPalette = 'none'; + } + + //set download link + var linkHolder = document.getElementById('save-image-link-holder'); + // Creating a tmp canvas to flatten everything + var exportCanvas = document.createElement("canvas"); + var emptyCanvas = document.createElement("canvas"); + var layersCopy = layers.slice(); + + exportCanvas.width = canvasSize[0]; + exportCanvas.height = canvasSize[1]; + + emptyCanvas.width = canvasSize[0]; + emptyCanvas.height = canvasSize[1]; + + // Sorting the layers by z index + layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1); + + // Merging every layer on the export canvas + for (let i=0; i (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1); + // save canvas size + dictionary['canvasWidth'] = currentLayer.canvasSize[0]; + dictionary['canvasHeight'] = currentLayer.canvasSize[1]; + // save editor mode + dictionary['editorMode'] = pixelEditorMode; + // save palette + for (let i=0; i { const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;'; let undoStates = []; let redoStates = []; + + Input.on('click', 'undo-button', undo); + Input.on('click', 'redo-button', redo); //rename to add undo state function saveHistoryState (state) { - console.log("saved history"); - console.log(state); //get current canvas data and save to undoStates array undoStates.push(state); diff --git a/js/Input.js b/js/Input.js index 654b6b4..a518709 100644 --- a/js/Input.js +++ b/js/Input.js @@ -5,12 +5,7 @@ class Input { element.addEventListener(event, function (e) { - // e = event - //this = element clicked - functionCallback(e, ...args); - //if you need to access the event or this variable, you need to add them - //when you define the callback, but you cant use the word this, eg: - //on('click', menuButton, function (e, button) {}); + functionCallback(...args, e); }); } diff --git a/js/Startup.js b/js/Startup.js index aa5257a..3e70ab5 100644 --- a/js/Startup.js +++ b/js/Startup.js @@ -90,8 +90,6 @@ const Startup = (() => { currentLayer.canvas.style.zIndex = 2; } else { - // If it's not the first Pixel, I have to reset the app - // Deleting all the extra layers and canvases, leaving only one let nLayers = layers.length; for (let i=2; i < layers.length - nAppLayers; i++) { @@ -198,7 +196,7 @@ const Startup = (() => { } } - // OPTIMIZABLE: should probably moved to a FileManagement class or something + // REFACTOR: should probably moved to a FileManagement class or something function loadLPE(fileContent) { // I add every layer the file had in it for (let i=0; i { + + const mainMenuItems = document.getElementById('main-menu').children; + + initMenu(); + + function initMenu() { + //for each button in main menu (starting at 1 to avoid logo) + for (let i = 1; i < mainMenuItems.length; i++) { + + //get the button that's in the list item + const menuItem = mainMenuItems[i]; + const menuButton = menuItem.children[0]; + + //when you click a main menu items button + Input.on('click', menuButton, function (e) { + // Select the item + Util.select(e.target.parentElement); + }); + + const subMenu = menuItem.children[1]; + const subMenuItems = subMenu.children; + + //when you click an item within a menu button + for (var j = 0; j < subMenuItems.length; j++) { + + const currSubmenuItem = subMenuItems[j]; + const currSubmenuButton = currSubmenuItem.children[0]; + + switch (currSubmenuButton.textContent) { + case 'New': + Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'new-pixel'); + break; + case 'Save project': + Input.on('click', currSubmenuButton, FileManager.saveProject); + break; + case 'Open': + Input.on('click', currSubmenuButton, FileManager.open); + break; + case 'Export': + Input.on('click', currSubmenuButton, FileManager.exportProject); + break; + case 'Exit': + //if a document exists, make sure they want to delete it + if (documentCreated) { + //ask user if they want to leave + if (confirm('Exiting will discard your current pixel. Are you sure you want to do that?')) + //skip onbeforeunload prompt + window.onbeforeunload = null; + else + e.preventDefault(); + } + break; + // REFACTOR: move the binding to the Selection IIFE or something like that once it's done + case 'Paste': + Input.on('click', currSubmenuButton, pasteSelection); + break; + case 'Copy': + Input.on('click', currSubmenuButton, copySelection); + break; + case 'Cut': + Input.on('click', currSubmenuButton, cutSelectionTool); + break; + case 'Cancel': + Input.on('click', currSubmenuButton, tool.pencil.switchTo); + break; + //Help Menu + case 'Settings': + //fill form with current settings values + //Util.setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates); + Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'settings'); + break; + case 'Help': + Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'help'); + break; + case 'About': + Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'about'); + break; + case 'Changelog': + Input.on('click', currSubmenuButton, Dialogue.showDialogue, 'changelog'); + break; + } + } + } + } + + function closeMenu () { + //remove .selected class from all menu buttons + for (var i = 0; i < mainMenuItems.length; i++) { + Util.deselect(mainMenuItems[i]); + } + } + + return { + closeMenu + } +})(); \ No newline at end of file diff --git a/js/_fileMenu.js b/js/_fileMenu.js deleted file mode 100644 index 52733e0..0000000 --- a/js/_fileMenu.js +++ /dev/null @@ -1,229 +0,0 @@ -var mainMenuItems = document.getElementById('main-menu').children; - -//for each button in main menu (starting at 1 to avoid logo) -for (var i = 1; i < mainMenuItems.length; i++) { - - //get the button that's in the list item - var menuItem = mainMenuItems[i]; - var menuButton = menuItem.children[0]; - - //when you click a main menu items button - Input.on('click', menuButton, function (e) { - Util.select(e.target.parentElement); - }); - - var subMenu = menuItem.children[1]; - var subMenuItems = subMenu.children; - - //when you click an item within a menu button - for (var j = 0; j < subMenuItems.length; j++) { - - var subMenuItem = subMenuItems[j]; - var subMenuButton = subMenuItem.children[0]; - - subMenuButton.addEventListener('click', function (e) { - - switch(this.textContent) { - - //File Menu - case 'New': - Dialogue.showDialogue('new-pixel'); - break; - case 'Save project': - //create name - var selectedPalette = Util.getText('palette-button'); - if (selectedPalette != 'Choose a palette...'){ - var paletteAbbreviation = palettes[selectedPalette].abbreviation; - var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe'; - } else { - var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe'; - selectedPalette = 'none'; - } - - //set download link - var linkHolder = document.getElementById('save-project-link-holder'); - // create file content - var content = getProjectData(); - - linkHolder.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content); - linkHolder.download = fileName; - linkHolder.click(); - - if (typeof ga !== 'undefined') - ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/ - - break; - case 'Open': - //if a document exists - if (documentCreated) { - //check if the user wants to overwrite - if (confirm('Opening a pixel will discard your current one. Are you sure you want to do that?')) - //open file selection dialog - document.getElementById('open-image-browse-holder').click(); - } - else - //open file selection dialog - document.getElementById('open-image-browse-holder').click(); - - break; - - case 'Export': - if (documentCreated) { - //create name - var selectedPalette = Util.getText('palette-button'); - if (selectedPalette != 'Choose a palette...'){ - var paletteAbbreviation = palettes[selectedPalette].abbreviation; - var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; - } else { - var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; - selectedPalette = 'none'; - } - - //set download link - var linkHolder = document.getElementById('save-image-link-holder'); - // Creating a tmp canvas to flatten everything - var exportCanvas = document.createElement("canvas"); - var emptyCanvas = document.createElement("canvas"); - var layersCopy = layers.slice(); - - exportCanvas.width = canvasSize[0]; - exportCanvas.height = canvasSize[1]; - - emptyCanvas.width = canvasSize[0]; - emptyCanvas.height = canvasSize[1]; - - // Sorting the layers by z index - layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1); - - // Merging every layer on the export canvas - for (let i=0; i (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1); - // save canvas size - dictionary['canvasWidth'] = currentLayer.canvasSize[0]; - dictionary['canvasHeight'] = currentLayer.canvasSize[1]; - // save editor mode - dictionary['editorMode'] = pixelEditorMode; - // save palette - for (let i=0; i