Skip to content

Commit

Permalink
Move export options to modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@corbindavenport
corbindavenport committed Aug 5, 2022
1 parent a526e61 commit 58fef6f
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 49 deletions.
82 changes: 36 additions & 46 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,45 +170,6 @@
</div>
</div>
</div>
<!-- File options -->
<div class="card bg-photostack mb-3">
<div class="card-header">
Export
</div>
<div class="card-body">
<div class="mb-3">
<label for="photostack-file-format">File format</label>
<select class="form-control" id="photostack-file-format" autocomplete="on">
<option value="image/jpeg">JPEG (.jpg)</option>
<option value="image/png">Portable Network Graphics (.png)</option>
<option value="image/webp">WebP (.webp)</option>
</select>
<small class="form-text text-muted">Image format support varies by <span class="photostack-android-hide">browser</span><span class="photostack-android-show">device</span>.</small>
</div>
<div class="mb-3">
<label for="photostack-file-quality">Image quality</label>
<input type="number" class="form-control" id="photostack-file-quality" value="92" min="1" max="100" autocomplete="on" enterkeyhint="done">
<small class="form-text text-muted">Choose a value from 1-100.</small>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="photostack-file-name" value="photostack-file-keep-name" id="photostack-file-keep-name">
<label class="form-check-label" for="photostack-file-keep-name">
Keep original file names
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="photostack-file-name" value="photostack-file-use-pattern" id="photostack-file-use-pattern" checked>
<label class="form-check-label" for="photostack-file-use-pattern">
Use pattern for file names
</label>
</div>
</div>
<div class="mb-3">
<input type="text" class="form-control" id="photostack-file-name-pattern" autocomplete="on" placeholder="Name pattern" enterkeyhint="done">
</div>
</div>
</div>
<!-- Other options card-->
<div class="card bg-photostack mb-3">
<div class="card-header">
Expand Down Expand Up @@ -380,16 +341,46 @@ <h5 class="modal-title" id="photostack-export-modal-label">Import images</h5>
<!-- Initial UI -->
<div class="modal-content bg-photostack photostack-export-modal-initial">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
<h5 class="modal-title" id="photostack-export-modal-label">
Export
<span class="photostack-image-count">0</span>
images
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p style="text-align: center">
<b>You are about to export <span class="photostack-image-count">0</span> images.</b>
</p>
<p>
<div class="mb-3">
<label for="photostack-file-format">File format</label>
<select class="form-control" id="photostack-file-format" autocomplete="on">
<option value="image/jpeg">JPEG (.jpg)</option>
<option value="image/png">Portable Network Graphics (.png)</option>
<option value="image/webp">WebP (.webp)</option>
</select>
<small class="form-text text-muted">Image format support varies by <span class="photostack-android-hide">browser</span><span class="photostack-android-show">device</span>.</small>
</div>
<div class="mb-3">
<label for="photostack-file-quality">Image quality</label>
<input type="number" class="form-control" id="photostack-file-quality" value="92" min="1" max="100" autocomplete="on" enterkeyhint="done">
<small class="form-text text-muted">Choose a value from 1-100.</small>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="radio" name="photostack-file-name" value="photostack-file-keep-name" id="photostack-file-keep-name">
<label class="form-check-label" for="photostack-file-keep-name">
Keep original file names
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="photostack-file-name" value="photostack-file-use-pattern" id="photostack-file-use-pattern" checked>
<label class="form-check-label" for="photostack-file-use-pattern">
Use pattern for file names
</label>
</div>
</div>
<div class="mb-3">
<input type="text" class="form-control" id="photostack-file-name-pattern" autocomplete="on" placeholder="Name pattern" enterkeyhint="done">
</div>
<button type="button" id="photostack-start-export-btn" class="btn w-100 btn-primary">Start export</button>
</p>
</div>
</div>
<!-- Export in progress modal -->
Expand Down Expand Up @@ -587,7 +578,6 @@ <h5 class="modal-title" id="photostack-watermark-editor-modal-title"></h5>
<img id="photostack-watermark-cache">
<!-- Scripts -->
<script src="js/modernizr-custom.js"></script> <!-- canvas.toDataURL + Promises + WebP check -->
<script src="js/array-flat-polyfill.js"></script> <!-- Polyfill for Array.prototype.flat() -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Expand Down
7 changes: 4 additions & 3 deletions js/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -588,9 +588,10 @@ function asyncExport() {
// Send analytics event
plausible('Export', { props: { method: 'File System API' } })
// Ask for export directory
var directory = await window.showDirectoryPicker(
{mode: 'readwrite'}
)
var directory = await window.showDirectoryPicker({
mode: 'readwrite',
startIn: 'pictures'
})
if (directory) {
// Save each file
console.log('Saving files in ' + directory.name + ' directory...')
Expand Down

0 comments on commit 58fef6f

Please sign in to comment.