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]; console.log(mainMenuItems); //when you click a main menu items button on('click', menuButton, function (e, button) { console.log('parent ', button.parentElement); select(button.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': showDialogue('new-pixel'); break; case 'Save project': //create name var selectedPalette = 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(); 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 = 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