2 files changed, 42 insertions, 0 deletions
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 677e95c1..c21d396e 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -136,6 +136,11 @@ function setupImageForLightbox(e) {
     var event = isFirefox ? 'mousedown' : 'click';
 
     e.addEventListener(event, function(evt) {
+        if (evt.button == 1) {
+            open(evt.target.src);
+            evt.preventDefault();
+            return;
+        }
         if (!opts.js_modal_lightbox || evt.button != 0) return;
 
         modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
new file mode 100644
index 00000000..f2839852
--- /dev/null
+++ b/javascript/inputAccordion.js
@@ -0,0 +1,37 @@
+var observerAccordionOpen = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutationRecord) {
+        var elem = mutationRecord.target;
+        var open = elem.classList.contains('open');
+
+        var accordion = elem.parentNode;
+        accordion.classList.toggle('input-accordion-open', open);
+
+        var checkbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");
+        checkbox.checked = open;
+        updateInput(checkbox);
+
+        var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
+        if (extra) {
+            extra.style.display = open ? "" : "none";
+        }
+    });
+});
+
+function inputAccordionChecked(id, checked) {
+    var label = gradioApp().querySelector('#' + id + " .label-wrap");
+    if (label.classList.contains('open') != checked) {
+        label.click();
+    }
+}
+
+onUiLoaded(function() {
+    for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {
+        var labelWrap = accordion.querySelector('.label-wrap');
+        observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});
+
+        var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
+        if (extra) {
+            labelWrap.insertBefore(extra, labelWrap.lastElementChild);
+        }
+    }
+});