'); $newInput.on('input', function() { if (!isNaN($newInput.val())) { if (input.requiresZoomReset !== false) { zoom.reset(); } renderer.selectedFractal[input.name] = parseFloat($newInput.val()); renderer.resetDisplay(); } }); $row.append($newLabel); $row.append($newInput); $inputs.append($row); }); $('.dialog').removeClass('no-inputs'); } else { $('.dialog').addClass('no-inputs'); } $('.dialog').addClass('open'); } function hideDialog() { var $dialog = $('.dialog'); $dialog.removeClass('open open-to-download-picture'); } function okDialog() { var $dialog = $('.dialog'); function setPictureDownloadProgressPercentage(percent) { $('.percentage-complete').width($('.progress-bar').width() * percent / 100); } function downloadPictureProgressUpdated(progressUpdate) { if (progressUpdate.percentRemaining === 0) { renderer.removeListener(downloadPictureProgressUpdated); downloadCanvas(); $dialog.removeClass('open open-to-download-picture'); // Remove the inline styles from the canvas element. $('canvas, .zoom-in-box').css({"width": "", "height": ""}).removeAttr('width').removeAttr('height'); windowResized(); renderer.resetDisplay(); // in case the dimensions were temporarily updated. } else { setPictureDownloadProgressPercentage(100 - progressUpdate.percentRemaining); } } if ($dialog.hasClass('open-to-download-picture')) { renderer.addListener(downloadPictureProgressUpdated); zoom.setDimensionsForDownload($('#pixelWidth').val(), $('#pixelHeight').val()); renderer.resetDisplay(true); return; // Don't hide the dialog until the image is actually ready for download. } $dialog.removeClass('open open-to-download-picture'); } function downloadCanvas() { function downloadCanvas(filename) { var $canvas = $('canvas'); $canvas[0].toBlob(function(blob) { saveAs(blob, filename); }, 'image/png'); } downloadCanvas(renderer.selectedFractal.name + " fractal.png"); } function downloadPicture() { var $canvas = $('canvas'); setPictureDownloadResolution($canvas.width(), $canvas.height())(); $('.dialog').addClass('open open-to-download-picture'); } function setPictureDownloadResolution(width, height) { return function() { $('#pixelWidth').val(width); $('#pixelHeight').val(height); }; } if (!$('canvas')[0].toBlob) { /* If the visitor is using a browser that doesn't support an important feature for the download feature to work, Just remove the button. The download picture feature isn't really needed to get most of the value from the page. Hiding it is better than leaving something broken visible to the user. */ $('#downloadPicture').remove(); } $('#2k').on('click', setPictureDownloadResolution(1920, 1080)); $('#4k').on('click', setPictureDownloadResolution(3840, 2160)); $('#8k').on('click', setPictureDownloadResolution(7680, 4320)); $('#downloadPicture').on('click', downloadPicture); $('#showDialog').on('click', showDialog); $('.dialog button.ok').on('click', okDialog); $('.dialog button.cancel').on('click', hideDialog); $('#colourPalette').on('change', colourPaletteChanged); $('#fractalType').on('change', fractalTypeChanged); $('#zoomOut').on('click', zoomOutClicked); $('#resetZoom').on('click', resetZoomClicked); $('.display').on('mousedown', canvasDown).on('mouseup', canvasUp).on('mousemove', mouseMoved); $(window).on('resize', windowResized); fractalTypeChanged(); windowResized(); colourPaletteChanged(); });

Sololearnski Fractal Viewer