From ae43a6a2e60c07a474debe60c4a1f08753d42b35 Mon Sep 17 00:00:00 2001
From: Byron Jones <glob@mozilla.com>
Date: Wed, 1 Apr 2015 11:09:11 +0800
Subject: Bug 1146777: use lightbox for images

---
 extensions/BugModal/web/bug_modal.css |  54 ++++++++++++++++++++++++++++++++
 extensions/BugModal/web/bug_modal.js  |  56 ++++++++++++++++++++++++++++++++++
 extensions/BugModal/web/image.png     | Bin 0 -> 1675 bytes
 3 files changed, 110 insertions(+)
 create mode 100644 extensions/BugModal/web/image.png

(limited to 'extensions/BugModal/web')

diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 75a772d2a..85bae0e9d 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -650,3 +650,57 @@ div.ui-tooltip {
     width: 100%;
 }
 
+/* lightbox */
+
+.lightbox img {
+    margin-right: 4px;
+    vertical-align: sub;
+}
+
+#lb_img {
+    background-color: #fff;
+    border: 1px solid #666;
+    -webkit-box-shadow: 0 0 10px #555;
+    -moz-box-shadow: 0 0 10px #555;
+    box-shadow: 0 0 10px #555;
+    padding: 10px;
+    max-width: 90%;
+    margin: 20px auto;
+    cursor: pointer;
+}
+
+#lb_overlay {
+    position: fixed;
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    text-align: center;
+    z-index: 2;
+}
+
+#lb_overlay2 {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    text-align: center;
+    z-index: 2;
+}
+
+#lb_text {
+    color: #fff;
+    font-weight: bold;
+    text-shadow: 1px 1px 1px #000;
+    position: fixed;
+    top: 4px;
+    left: 8px;
+    z-index: 3;
+    cursor: default;
+}
+
+#lb_close_btn {
+    position: fixed;
+    top: 8px;
+    right: 8px;
+}
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 2411f4c15..ec53c32c2 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -200,6 +200,15 @@ $(function() {
         });
     }
 
+    // lightboxes
+    $('.lightbox, .comment-text .lightbox + span:first-of-type a:first-of-type')
+        .click(function(event) {
+            if (event.metaKey)
+                return;
+            event.preventDefault();
+            lb_show(this);
+        });
+
     //
     // anything after this point is only executed for logged in users
     //
@@ -725,6 +734,53 @@ function bugzilla_ajax(request, done_fn, error_fn) {
         });
 }
 
+// lightbox
+
+function lb_show(el) {
+    $(window).trigger('close');
+    $(document).bind('keyup.lb', function(event) {
+        if (event.keyCode == 27) {
+            lb_close(event);
+        }
+    });
+    var overlay = $('<div>')
+        .prop('id', 'lb_overlay')
+        .css({ opacity: 0 })
+        .appendTo('body');
+    var overlay2 = $('<div>')
+        .prop('id', 'lb_overlay2')
+        .css({ top: $(window).scrollTop() + 5 })
+        .appendTo('body');
+    var title = $('<div>')
+        .prop('id', 'lb_text')
+        .appendTo(overlay2);
+    var img = $('<img>')
+        .prop('id', 'lb_img')
+        .prop('src', el.href)
+        .prop('alt', 'Loading...')
+        .css({ opacity: 0 })
+        .appendTo(overlay2)
+        .click(function(event) {
+            event.stopPropagation();
+            window.location.href = el.href;
+        });
+    var close_btn = $('<button>')
+        .prop('id', 'lb_close_btn')
+        .prop('type', 'button')
+        .addClass('minor')
+        .text('Close')
+        .appendTo(overlay2);
+    title.append(el.title);
+    overlay.add(overlay2).click(lb_close);
+    img.add(overlay).animate({ opacity: 1 }, 200);
+}
+
+function lb_close(event) {
+    event.preventDefault();
+    $(document).unbind('keyup.lb');
+    $('#lb_overlay, #lb_overlay2, #lb_close_btn, #lb_img, #lb_text').remove();
+}
+
 // no-ops
 function initHidingOptionsForIE() {}
 function showFieldWhen() {}
diff --git a/extensions/BugModal/web/image.png b/extensions/BugModal/web/image.png
new file mode 100644
index 000000000..9db05af46
Binary files /dev/null and b/extensions/BugModal/web/image.png differ
-- 
cgit v1.2.3-24-g4f1b