1import { p as prop, i as if_block, k as each, b as set_class, a as set_attribute, u as index, d as bind_this, f as set_style } from './i18n-dpAHICcw.js'; 2import { aw as FileData, R as push, u as state, v as proxy, y as user_effect, w as get, x as set, N as tick, ab as onMount, S as first_child, a as append, T as pop, a5 as user_derived, X as sibling, W as from_html, V as child, Y as reset, t as template_effect, Z as event, a0 as set_text } from './index-CDZuCcOm.js'; 3import { b as bind_window_size } from './window-DwfrWsjF.js'; 4import { s as stopPropagation } from './event-modifiers-DanhKw3_.js'; 5import { I as IconButton, U as Upload$1, W as Webcam, V as Video$1, a as ImagePaste } from './ScrollFade.svelte_svelte_type_style_lang-DUvCSfRk.js'; 6import './MarkdownCode.svelte_svelte_type_style_lang-GeNUGzep.js'; 7import { B as BlockLabel } from './BlockLabel-D4yjUUAn.js'; 8import { E as Empty } from './Empty-617iGDfy.js'; 9import { S as ShareButton } from './ShareButton-c5E0ChlI.js'; 10import { C as Clear } from './Clear-tvJMRS4J.js'; 11import { D as Download } from './Download-bn1Yc3QR.js'; 12import { I as Image } from './Image-CdSr17SW.js'; 13import { P as Play } from './Play-BtgJXiAa.js'; 14import { I as IconButtonWrapper } from './IconButtonWrapper-KjCt2Pl8.js'; 15import { F as FullscreenButton } from './FullscreenButton-wNz2x9hr.js'; 16import { U as Upload } from './Upload-BlCAnBIo.js'; 17import { M as ModifyUpload } from './ModifyUpload-iCnymq9K.js'; 18import { I as Image$1 } from './Image-CJziNDBt.js'; 19/* empty css */ 20import { V as Video } from './Video-BadoRrLY.js'; 21import { d as dequal } from './index-DnoGeqVF.js'; 22import { u as uploadToHuggingFace } from './utils.svelte-CyWLYi-B.js'; 23 24async function format_gallery_for_sharing(value) { 25 if (!value) return ""; 26 let urls = await Promise.all( 27 value.map(async ([image, _]) => { 28 if (image === null || !image.url) return ""; 29 return await uploadToHuggingFace(image.url); 30 }) 31 ); 32 return `<div style="display: flex; flex-wrap: wrap; gap: 16px">${urls.map((url) => `<img src="${url}" style="height: 400px" />`).join("")}</div>`; 33} 34async function handle_save(img_blob, upload, filename = "uploaded_file") { 35 const ext = img_blob.type.split("/")[1] || "png"; 36 const f_ = new File([img_blob], `${filename}.${ext}`); 37 const files = [ 38 new FileData({ 39 path: f_.name, 40 orig_name: f_.name, 41 blob: f_, 42 size: f_.size, 43 mime_type: f_.type, 44 is_stream: false 45 }) 46 ]; 47 return await upload(...files); 48} 49 50var root_10 = from_html(`<div class="icon-button"><!></div>`); 51var root_7 = from_html(`<!> <!> <!> <!>`, 1); 52var root_14 = from_html(`<caption class="caption svelte-7anmrz"> </caption>`); 53var root_17 = from_html(`<!> <!>`, 1); 54var root_15 = from_html(`<button><!></button>`); 55var root_6 = from_html(`<span><!> <button class="media-button svelte-7anmrz" aria-label="detailed view of selected image"><!></button> <!> <div class="thumbnails scroll-hide svelte-7anmrz" data-testid="container_el"></div></span>`); 56var root_19 = from_html(`<!> <!> <!> <!>`, 1); 57var root_27 = from_html(`<!> <!>`, 1); 58var root_28 = from_html(`<div class="caption-label svelte-7anmrz"> </div>`); 59var root_29 = from_html(`<button class="delete-button svelte-7anmrz" aria-label="Delete image"><!></button>`); 60var root_25 = from_html(`<div class="gallery-item svelte-7anmrz"><button><!> <!></button> <!></div>`); 61var root_5 = from_html(`<div class="gallery-container svelte-7anmrz"><!> <div><!> <div></div></div></div>`); 62var root_1 = from_html(`<!> <!>`, 1); 63 64function Gallery($$anchor, $$props) { 65 push($$props, true); 66 67 let show_label = prop($$props, 'show_label', 3, true), 68 value = prop($$props, 'value', 15), 69 columns = prop($$props, 'columns', 19, () => [2]), 70 rows = prop($$props, 'rows', 3, undefined), 71 height = prop($$props, 'height', 3, "auto"), 72 allow_preview = prop($$props, 'allow_preview', 3, true), 73 object_fit = prop($$props, 'object_fit', 3, "cover"), 74 show_share_button = prop($$props, 'show_share_button', 3, false), 75 show_download_button = prop($$props, 'show_download_button', 3, false), 76 selected_index = prop($$props, 'selected_index', 15), 77 show_fullscreen_button = prop($$props, 'show_fullscreen_button', 3, true), 78 fullscreen = prop($$props, 'fullscreen', 3, false), 79 root = prop($$props, 'root', 3, ""), 80 file_types = prop($$props, 'file_types', 19, () => ["image", "video"]), 81 max_file_size = prop($$props, 'max_file_size', 3, null), 82 fit_columns = prop($$props, 'fit_columns', 3, true), 83 buttons = prop($$props, 'buttons', 3, null), 84 oncustom_button_click = prop($$props, 'oncustom_button_click', 3, null), 85 onpreview_open = prop($$props, 'onpreview_open', 3, () => {}), 86 onchange = prop($$props, 'onchange', 3, () => {}), 87 onclear = prop($$props, 'onclear', 3, () => {}), 88 onselect = prop($$props, 'onselect', 3, (data) => {}), 89 onshare = prop($$props, 'onshare', 3, (data) => {}), 90 onerror = prop($$props, 'onerror', 3, (error) => {}), 91 onpreview_close = prop($$props, 'onpreview_close', 3, () => {}), 92 onfullscreen = prop($$props, 'onfullscreen', 3, (data) => {}), 93 ondelete = prop($$props, 'ondelete', 3, () => {}), 94 onupload = prop($$props, 'onupload', 3, () => {}), 95 onsource_change = prop($$props, 'onsource_change', 3, () => {}); 96 97 let upload_promise = null; 98 let mode = "normal"; 99 let display_icon_button_wrapper_top_corner = false;
100 let is_full_screen = false; 101 let image_container; 102 let was_reset = state(false); 103 104 let resolved_value = user_derived(() => value() == null 105 ? null 106 : value().map((data) => { 107 if ("video" in data) { 108 return { video: data.video, caption: data.caption }; 109 } else if ("image" in data) { 110 return { image: data.image, caption: data.caption }; 111 } 112 113 return {}; 114 })); 115 116 function resolve_effective_columns(resolved_value, columns, fit_columns) { 117 if (resolved_value && columns && fit_columns) { 118 const item_count = resolved_value.length; 119 120 if (Array.isArray(columns)) { 121 return columns.map((col) => Math.min(col, item_count)); 122 } else { 123 return Math.min(columns, item_count); 124 } 125 } else { 126 return columns; 127 } 128 } 129 130 let effective_columns = user_derived(() => resolve_effective_columns(get(resolved_value), columns(), fit_columns())); 131 let prev_value = state(proxy(value())); 132 133 if (selected_index() == null && $$props.preview && value()?.length) { 134 selected_index(0); 135 } 136 137 let old_selected_index = state(proxy(selected_index())); 138 139 user_effect(() => { 140 if (!dequal(get(prev_value), value())) { 141 // When value is falsy (clear button or first load), 142 // preview determines the selected image 143 if (get(was_reset)) { 144 selected_index($$props.preview && value()?.length ? 0 : null); 145 set(was_reset, false); 146 147 // Otherwise we keep the selected_index the same if the 148 // gallery has at least as many elements as it did before 149 } else { 150 if (selected_index() !== null && value() !== null) { 151 selected_index(Math.max(0, Math.min(selected_index(), value().length - 1))); 152 } else { 153 selected_index(null); 154 } 155 } 156 157 onchange()(); 158 set(prev_value, value(), true); 159 } 160 }); 161 162 let previous = user_derived(() => ((selected_index() ?? 0) + (get(resolved_value)?.length ?? 0) - 1) % (get(resolved_value)?.length ?? 0)); 163 let next = user_derived(() => ((selected_index() ?? 0) + 1) % (get(resolved_value)?.length ?? 0)); 164 165 function handle_preview_click(event) { 166 const element = event.target; 167 const x = event.offsetX; 168 const width = element.offsetWidth; 169 const centerX = width / 2; 170 171 if (x < centerX) { 172 selected_index(get(previous)); 173 } else { 174 selected_index(get(next)); 175 } 176 } 177 178 function on_keydown(e) { 179 switch (e.code) { 180 case "Escape": 181 e.preventDefault(); 182 selected_index(null); 183 onpreview_close()(); 184 break; 185 186 case "ArrowLeft": 187 e.preventDefault(); 188 selected_index(get(previous)); 189 break; 190 191 case "ArrowRight": 192 e.preventDefault(); 193 selected_index(get(next)); 194 break; 195 } 196 } 197 198 user_effect(() => { 199 if (selected_index() !== get(old_selected_index)) { 200 set(old_selected_index, selected_index(), true); 201 202 if (selected_index() !== null) { 203 if (get(resolved_value) != null) { 204 selected_index(Math.max(0, Math.min(selected_index(), get(resolved_value).length - 1))); 205 } 206 207 onselect()({ 208 index: selected_index(), 209 value: get(resolved_value)?.[selected_index()] 210 }); 211 } 212 } 213 }); 214 215 user_effect(() => { 216 if (allow_preview() && get(container_element)) { 217 scroll_to_img(selected_index()); 218 } 219 }); 220 221 let el = []; 222 let container_element = state(void 0); 223 224 async function scroll_to_img(index) { 225 if (typeof index !== "number") return; 226 227 await tick(); 228 229 if (el[index] === undefined) return; 230 if (!get(container_element)) return; 231 232 el[index]?.focus(); 233
234 const { left: container_left, width: container_width } = get(container_element).getBoundingClientRect(); 235 const { left, width } = el[index].getBoundingClientRect(); 236 const relative_left = left - container_left; 237 const pos = relative_left + width / 2 - container_width / 2 + get(container_element).scrollLeft; 238 239 if (get(container_element) && typeof get(container_element).scrollTo === "function") { 240 get(container_element).scrollTo({ left: pos < 0 ? 0 : pos, behavior: "smooth" }); 241 } 242 } 243 244 // Unlike `gr.Image()`, images specified via remote URLs are not cached in the server 245 // and their remote URLs are directly passed to the client as `value[].image.url`. 246 // The `download` attribute of the <a> tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download), 247 // so we need to download the image via JS as below. 248 async function download(file_url, name) { 249 let response; 250 251 try { 252 response = await $$props._fetch(file_url); 253 } catch(error) { 254 if (error instanceof TypeError) { 255 // If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful), 256 // open the link in a new tab instead, mimicing the behavior of the `download` attribute for remote URLs, 257 // which is not ideal, but a reasonable fallback. 258 window.open(file_url, "_blank", "noreferrer"); 259 260 return; 261 } 262 263 throw error; 264 } 265 266 const blob = await response.blob(); 267 const url = URL.createObjectURL(blob); 268 const link = document.createElement("a"); 269 270 link.href = url;
271 link.download = name; 272 link.click(); 273 URL.revokeObjectURL(url); 274 } 275 276 let selected_media = user_derived(() => selected_index() != null && get(resolved_value) != null ? get(resolved_value)[selected_index()] : null); 277 let thumbnails_overflow = false; 278 279 function check_thumbnails_overflow() { 280 if (get(container_element)) { 281 thumbnails_overflow = get(container_element).scrollWidth > get(container_element).clientWidth; 282 } 283 } 284 285 onMount(() => { 286 check_thumbnails_overflow(); 287 288 document.addEventListener("fullscreenchange", () => { 289 is_full_screen = !!document.fullscreenElement; 290 }); 291 292 window.addEventListener("resize", check_thumbnails_overflow); 293 294 return () => window.removeEventListener("resize", check_thumbnails_overflow); 295 }); 296 297 user_effect(() => { 298 get(resolved_value); 299 check_thumbnails_overflow(); 300 301 if (get(container_element)) { 302 check_thumbnails_overflow(); 303 } 304 }); 305 306 function handle_item_delete(index) { 307 if (!value() || !get(resolved_value)) return; 308 309 const deleted_item = get(resolved_value)[index]; 310 let deleted_file_data; 311 312 if ("image" in deleted_item) { 313 deleted_file_data = { file: deleted_item.image, index }; 314 } else if ("video" in deleted_item) { 315 deleted_file_data = { file: deleted_item.video, index }; 316 } 317 318 if (deleted_file_data) { 319 ondelete()(deleted_file_data); 320 } 321 } 322 323 let uploading = false; 324 var fragment = root_1(); 325 var node = first_child(fragment); 326 327 { 328 var consequent = ($$anchor) => { 329 { 330 let $0 = user_derived(() => $$props.label || "Gallery"); 331 332 BlockLabel($$anchor, { 333 get show_label() { 334 return show_label(); 335 }, 336 337 get Icon() { 338 return Image; 339 }, 340 341 get label() { 342 return get($0); 343 } 344 }); 345 } 346 }; 347 348 if_block(node, ($$render) => { 349 if (show_label()) $$render(consequent); 350 }); 351 } 352 353 var node_1 = sibling(node, 2); 354 355 { 356 var consequent_1 = ($$anchor) => { 357 Empty($$anchor, { 358 unpadded_box: true, 359 size: 'large', 360 children: ($$anchor, $$slotProps) => { 361 Image($$anchor); 362 }, 363 $$slots: { default: true } 364 }); 365 }; 366 367 var alternate_3 = ($$anchor) => { 368 var div = root_5(); 369 var node_2 = child(div); 370 371 { 372 var consequent_9 = ($$anchor) => { 373 var span = root_6(); 374 375 set_class(span, 1, 'preview svelte-7anmrz', null, {}, { minimal: mode === "minimal" }); 376 377 var node_3 = child(span); 378 379 IconButtonWrapper(node_3, { 380 display_top_corner: display_icon_button_wrapper_top_corner, 381 get buttons() { 382 return buttons(); 383 }, 384 385 get on_custom_button_click() { 386 return oncustom_button_click(); 387 }, 388 389 children: ($$anchor, $$slotProps) => { 390 var fragment_4 = root_7(); 391 var node_4 = first_child(fragment_4); 392 393 { 394 var consequent_2 = ($$anchor) => { 395 { 396 let $0 = user_derived(() => $$props.i18n("common.download")); 397 398 IconButton($$anchor, { 399 get Icon() { 400 return Download; 401 }, 402 403 get label() { 404 return get($0); 405 }, 406 407 onclick: () => { 408 const image = "image" in get(selected_media) 409 ? get(selected_media)?.image 410 : get(selected_media)?.video; 411 412 if (image == null) { 413 return; 414 } 415 416 const { url, orig_name } = image; 417 418 if (url) { 419 download(url, orig_name ?? "image"); 420 } 421 } 422 }); 423 } 424 }; 425 426 if_block(node_4, ($$render) => { 427 if (show_download_button()) $$render(consequent_2); 428 }); 429 } 430 431 var node_5 = sibling(node_4, 2); 432 433 { 434 var consequent_3 = ($$anchor) => { 435 FullscreenButton($$anchor, { 436 get fullscreen() { 437 return fullscreen(); 438 }, 439 onclick: (is_fullscreen) => onfullscreen()({ detail: is_fullscreen }) 440 }); 441 }; 442 443 if_block(node_5, ($$render) => { 444 if (show_fullscreen_button()) $$render(consequent_3); 445 }); 446 } 447 448 var node_6 = sibling(node_5, 2); 449 450 { 451 var consequent_4 = ($$anchor) => { 452 var div_1 = root_10(); 453 var node_7 = child(div_1); 454 455 ShareButton(node_7, {
456 get i18n() { 457 return $$props.i18n; 458 }, 459 460 get value() { 461 return get(resolved_value); 462 }, 463 464 get formatter() { 465 return format_gallery_for_sharing; 466 }, 467 468 $$events: { 469 share: (detail) => { 470 onshare()(detail); 471 }, 472 473 error: (detail) => { 474 onerror()(detail); 475 } 476 } 477 }); 478 479 reset(div_1); 480 append($$anchor, div_1); 481 }; 482 483 if_block(node_6, ($$render) => { 484 if (show_share_button()) $$render(consequent_4); 485 }); 486 } 487 488 var node_8 = sibling(node_6, 2); 489 490 { 491 var consequent_5 = ($$anchor) => { 492 IconButton($$anchor, { 493 get Icon() { 494 return Clear; 495 }, 496 label: 'Close', 497 onclick: () => { 498 selected_index(null); 499 onpreview_close()(); 500 } 501 }); 502 }; 503 504 if_block(node_8, ($$render) => { 505 if (!is_full_screen) $$render(consequent_5); 506 }); 507 } 508 509 append($$anchor, fragment_4); 510 }, 511 $$slots: { default: true } 512 }); 513 514 var button = sibling(node_3, 2); 515 var node_9 = child(button); 516 517 { 518 var consequent_6 = ($$anchor) => { 519 { 520 let $0 = user_derived(() => ({ 521 alt: get(selected_media).caption || "", 522 title: get(selected_media).caption || null, 523 class: get(selected_media).caption && "with-caption", 524 loading: "lazy" 525 })); 526 527 Image$1($$anchor, { 528 get restProps() { 529 return get($0); 530 }, 531 532 get src() { 533 return get(selected_media).image.url; 534 }, 535 data_testid: 'detailed-image' 536 }); 537 } 538 }; 539 540 var alternate = ($$anchor) => { 541 { 542 let $0 = user_derived(() => get(selected_media).caption || ""); 543 544 Video($$anchor, { 545 get src() { 546 return get(selected_media).video.url; 547 }, 548 'data-testid': "detailed-video", 549 get alt() { 550 return get($0); 551 }, 552 loading: 'lazy', 553 loop: false, 554 is_stream: false, 555 muted: false, 556 controls: true 557 }); 558 } 559 }; 560 561 if_block(node_9, ($$render) => { 562 if ("image" in get(selected_media)) $$render(consequent_6); else $$render(alternate, false); 563 }); 564 } 565 566 reset(button); 567
568 var node_10 = sibling(button, 2); 569 570 { 571 var consequent_7 = ($$anchor) => { 572 var caption = root_14(); 573 var text = child(caption, true); 574 575 reset(caption); 576 template_effect(() => set_text(text, get(selected_media).caption)); 577 append($$anchor, caption); 578 }; 579 580 if_block(node_10, ($$render) => { 581 if (get(selected_media)?.caption) $$render(consequent_7); 582 }); 583 } 584 585 var div_2 = sibling(node_10, 2); 586 587 each(div_2, 21, () => get(resolved_value), index, ($$anchor, media, i) => { 588 var button_1 = root_15(); 589 let classes; 590 var node_11 = child(button_1); 591 592 { 593 var consequent_8 = ($$anchor) => { 594 { 595 let $0 = user_derived(() => ({ 596 title: get(media).caption || null, 597 alt: "", 598 class: "with-caption", 599 loading: "lazy" 600 })); 601 602 Image$1($$anchor, { 603 get src() { 604 return get(media).image.url; 605 }, 606 607 get restProps() { 608 return get($0); 609 }, 610 data_testid: `thumbnail ${i + 1}` 611 }); 612 } 613 }; 614 615 var alternate_1 = ($$anchor) => { 616 var fragment_11 = root_17();
617 var node_12 = first_child(fragment_11); 618 619 Play(node_12); 620 621 var node_13 = sibling(node_12, 2); 622 623 { 624 let $0 = user_derived(() => get(media).caption || null); 625 626 Video(node_13, { 627 get src() { 628 return get(media).video.url; 629 }, 630 631 get title() { 632 return get($0); 633 }, 634 is_stream: false, 635 'data-testid': "thumbnail " + (i + 1), 636 alt: '', 637 loading: 'lazy', 638 loop: false 639 }); 640 } 641 642 append($$anchor, fragment_11); 643 }; 644 645 if_block(node_11, ($$render) => { 646 if ("image" in get(media)) $$render(consequent_8); else $$render(alternate_1, false); 647 }); 648 } 649 650 reset(button_1); 651 bind_this(button_1, ($$value, i) => el[i] = $$value, (i) => el?.[i], () => [i]); 652 653 template_effect(() => { 654 classes = set_class(button_1, 1, 'thumbnail-item thumbnail-small svelte-7anmrz', null, classes, { selected: selected_index() === i && mode !== "minimal" }); 655 set_attribute(button_1, 'aria-label', "Thumbnail " + (i + 1) + " of " + get(resolved_value).length); 656 }); 657 658 event('click', button_1, () => selected_index(i)); 659 append($$anchor, button_1); 660 }); 661 662 reset(div_2); 663 bind_this(div_2, ($$value) => set(container_element, $$value), () => get(container_element)); 664 reset(span); 665 666 template_effect(() => { 667 set_style(button, `height: calc(100% - ${get(selected_media).caption ? '80px' : '60px'})`); 668 set_style(div_2, `justify-content: ${thumbnails_overflow ? 'flex-start' : 'center'};`); 669 }); 670 671 event('click', button, function (...$$args) { 672 ("image" in get(selected_media) ? (event) => handle_preview_click(event) : null)?.apply(this, $$args); 673 }); 674 675 event('keydown', span, on_keydown); 676 append($$anchor, span); 677 }; 678 679 if_block(node_2, ($$render) => { 680 if (get(selected_media) && allow_preview()) $$render(consequent_9); 681 }); 682 } 683 684 var div_3 = sibling(node_2, 2); 685 let classes_1; 686 let styles; 687 var node_14 = child(div_3); 688 689 { 690 var consequent_14 = ($$anchor) => { 691 ModifyUpload($$anchor, { 692 get i18n() { 693 return $$props.i18n; 694 }, 695 696 onclear: () => { 697 value([]); 698 onsource_change()("upload"); 699 onclear()(); 700 }, 701 702 children: ($$anchor, $$slotProps) => { 703 var fragment_13 = root_19();
704 var node_15 = first_child(fragment_13); 705 706 { 707 var consequent_10 = ($$anchor) => { 708 { 709 let $0 = user_derived(() => $$props.i18n("upload_text.click_to_upload")); 710 711 IconButton($$anchor, { 712 get Icon() { 713 return Upload$1; 714 }, 715 716 get label() { 717 return get($0); 718 }, 719 720 children: ($$anchor, $$slotProps) => { 721 Upload($$anchor, { 722 icon_upload: true, 723 onload: (e) => onupload()(e), 724 get filetype() { 725 return file_types(); 726 }, 727 file_count: 'multiple', 728 get max_file_size() { 729 return max_file_size(); 730 }, 731 732 get root() { 733 return root(); 734 }, 735 onerror: (e) => onerror()(e), 736 get stream_handler() { 737 return $$props.stream_handler; 738 }, 739 740 get upload() { 741 return $$props.upload; 742 }, 743 744 get upload_promise() { 745 return upload_promise; 746 }, 747 748 set upload_promise($$value) { 749 upload_promise = $$value; 750 }, 751 752 get uploading() { 753 return uploading; 754 }, 755 756 set uploading($$value) { 757 uploading = $$value; 758 } 759 }); 760 }, 761 $$slots: { default: true } 762 }); 763 } 764 }; 765 766 if_block(node_15, ($$render) => { 767 if ($$props.upload && $$props.stream_handler) $$render(consequent_10); 768 }); 769 } 770
771 var node_16 = sibling(node_15, 2); 772 773 { 774 var consequent_11 = ($$anchor) => { 775 { 776 let $0 = user_derived(() => $$props.i18n("common.webcam")); 777 778 IconButton($$anchor, { 779 get Icon() { 780 return Webcam; 781 }, 782 783 get label() { 784 return get($0); 785 }, 786 787 onclick: () => { 788 onsource_change()("webcam"); 789 } 790 }); 791 } 792 }; 793 794 if_block(node_16, ($$render) => { 795 if ($$props.sources.includes("webcam")) $$render(consequent_11); 796 }); 797 } 798 799 var node_17 = sibling(node_16, 2); 800 801 { 802 var consequent_12 = ($$anchor) => { 803 { 804 let $0 = user_derived(() => $$props.i18n("common.video")); 805 806 IconButton($$anchor, { 807 get Icon() { 808 return Video$1; 809 }, 810 811 get label() { 812 return get($0); 813 }, 814 815 onclick: () => { 816 onsource_change()("webcam-video"); 817 } 818 }); 819 } 820 }; 821 822 if_block(node_17, ($$render) => { 823 if ($$props.sources.includes("webcam-video")) $$render(consequent_12); 824 }); 825 } 826
827 var node_18 = sibling(node_17, 2); 828 829 { 830 var consequent_13 = ($$anchor) => { 831 { 832 let $0 = user_derived(() => $$props.i18n("upload_text.paste_clipboard")); 833 834 IconButton($$anchor, { 835 get label() { 836 return get($0); 837 }, 838 839 onclick: () => { 840 onsource_change()("clipboard"); 841 }, 842 843 get Icon() { 844 return ImagePaste; 845 } 846 }); 847 } 848 }; 849 850 if_block(node_18, ($$render) => { 851 if ($$props.sources.includes("clipboard")) $$render(consequent_13); 852 }); 853 } 854 855 append($$anchor, fragment_13); 856 }, 857 $$slots: { default: true } 858 }); 859 }; 860 861 if_block(node_14, ($$render) => { 862 if ($$props.interactive && selected_index() === null) $$render(consequent_14); 863 }); 864 } 865 866 var div_4 = sibling(node_14, 2); 867 let classes_2; 868 869 each(div_4, 21, () => get(resolved_value), index, ($$anchor, entry, i) => { 870 var div_5 = root_25(); 871 var button_2 = child(div_5); 872 let classes_3;
873 var node_19 = child(button_2); 874 875 { 876 var consequent_15 = ($$anchor) => { 877 { 878 let $0 = user_derived(() => get(entry).caption || ""); 879 let $1 = user_derived(() => typeof get(entry).image === "string" ? get(entry).image : get(entry).image.url); 880 881 Image$1($$anchor, { 882 get alt() { 883 return get($0); 884 }, 885 886 get src() { 887 return get($1); 888 }, 889 loading: 'lazy' 890 }); 891 } 892 }; 893 894 var alternate_2 = ($$anchor) => { 895 var fragment_20 = root_27(); 896 var node_20 = first_child(fragment_20); 897 898 Play(node_20); 899 900 var node_21 = sibling(node_20, 2); 901 902 { 903 let $0 = user_derived(() => get(entry).caption || null); 904 905 Video(node_21, { 906 get src() { 907 return get(entry).video.url; 908 }, 909 910 get title() { 911 return get($0); 912 }, 913 is_stream: false, 914 'data-testid': "thumbnail " + (i + 1), 915 alt: '', 916 loading: 'lazy', 917 loop: false 918 }); 919 } 920 921 append($$anchor, fragment_20); 922 }; 923 924 if_block(node_19, ($$render) => { 925 if ("image" in get(entry)) $$render(consequent_15); else $$render(alternate_2, false); 926 }); 927 } 928 929 var node_22 = sibling(node_19, 2); 930 931 { 932 var consequent_16 = ($$anchor) => { 933 var div_6 = root_28(); 934 var text_1 = child(div_6, true); 935 936 reset(div_6); 937 template_effect(() => set_text(text_1, get(entry).caption)); 938 append($$anchor, div_6); 939 }; 940 941 if_block(node_22, ($$render) => { 942 if (get(entry).caption) $$render(consequent_16); 943 }); 944 } 945 946 reset(button_2); 947 948 var node_23 = sibling(button_2, 2); 949 950 { 951 var consequent_17 = ($$anchor) => { 952 var button_3 = root_29(); 953 var node_24 = child(button_3); 954 955 Clear(node_24); 956 reset(button_3); 957 event('click', button_3, stopPropagation(() => handle_item_delete(i))); 958 append($$anchor, button_3); 959 }; 960 961 if_block(node_23, ($$render) => { 962 if ($$props.interactive) $$render(consequent_17); 963 }); 964 } 965 966 reset(div_5); 967 968 template_effect(() => { 969 classes_3 = set_class(button_2, 1, 'thumbnail-item thumbnail-lg svelte-7anmrz', null, classes_3, { selected: selected_index() === i }); 970 set_attribute(button_2, 'aria-label', "Thumbnail " + (i + 1) + " of " + get(resolved_value).length); 971 }); 972 973 event('click', button_2, () => { 974 if (selected_index() === null && allow_preview()) { 975 onpreview_open()(); 976 } 977 978 selected_index(i); 979 }); 980 981 append($$anchor, div_5); 982 }); 983 984 reset(div_4); 985 reset(div_3); 986 reset(div); 987 bind_this(div, ($$value) => image_container = $$value, () => image_container); 988 989 template_effect(() => { 990 classes_1 = set_class(div_3, 1, 'grid-wrap svelte-7anmrz', null, classes_1, { 991 minimal: mode === "minimal", 992 'fixed-height': (!height() || height() == "auto"), 993 hidden: is_full_screen 994 }); 995 996 styles = set_style(div_3, '', styles, { 997 height: height() !== "auto" 998 ? typeof height() === "number" ? height() + "px" : height() 999 : null 1000 }); 1001 1002 classes_2 = set_class(div_4, 1, 'grid-container svelte-7anmrz', null, classes_2, { 'pt-6': show_label() }); 1003 set_style(div_4, `--grid-cols:${get(effective_columns) ?? ''}; --grid-rows:${rows() ?? ''}; --object-fit: ${object_fit() ?? ''};`); 1004 }); 1005 1006 append($$anchor, div); 1007 }; 1008 1009 if_block(node_1, ($$render) => { 1010 if (value() == null || get(resolved_value) == null || get(resolved_value).length === 0) $$render(consequent_1); else $$render(alternate_3, false); 1011 }); 1012 } 1013 1014 bind_window_size('innerHeight', ($$value) => $$value); 1015 append($$anchor, fragment); 1016 pop(); 1017} 1018 1019const Gallery$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({ 1020 __proto__: null, 1021 default: Gallery 1022}, Symbol.toStringTag, { value: 'Module' })); 1023 1024export { Gallery as G, Gallery$1 as a, handle_save as h }; 1025//# sourceMappingURL=Gallery-ExK6mXCU.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.