Show monochrome image popups in monochrome threads

boards/static/css/base.css

@@ -1,199 +1,199 b''
 .ui-button {
    display: none;
 }
 
 .ui-dialog-content {
     padding: 0;
     min-height: 0;
 }
 
 .mark_btn {
     cursor: pointer;
 }
 
 .img-full {
     position: fixed;
     background-color: #CCC;
     border: 1px solid #000;
     cursor: pointer;
 }
 
 .strikethrough {
     text-decoration: line-through;
 }
 
 .post_preview {
     z-index: 300;
     position:absolute;
 }
 
 .gallery_image {
     display: inline-block;
 }
 
 @media print {
     .post-form-w {
         display: none;
     }
 }
 
 input[name="image"] {
      display: block;
      width: 100px;
      height: 100px;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      z-index: 1;
 }
 
 .file_wrap {
      width: 100px;
      height: 100px;
      border: solid 1px white;
      display: inline-block;
 }
 
 form > .file_wrap {
     float: left;
 }
 
 .file-thumb {
     width: 100px;
     height: 100px;
     background-size: cover;
     background-position: center;
 }
 
 .compact-form-text {
     margin-left:110px;
 }
 
 textarea, input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 .compact-form-text > textarea {
     height: 100px;
     width: 100%;
 }
 
 .post-button-form {
     display: inline;
 }
 
 .post-button-form > button, #autoupdate {
     border: none;
     margin: inherit;
     padding: inherit;
     background: none;
     font-size: inherit;
     cursor: pointer;
 }
 
 .post-image-full {
     width: 100%;
     height: auto;
 }
 
 #preview-text {
     display: none;
 }
 
 .random-images-table {
     text-align: center;
 }
 
 .random-images-table > div {
     margin-left: auto;
     margin-right: auto;
 }
 
 .tag-image, .tag-text-data {
     display: inline-block;
 }
 
 .tag-text-data > h2 {
     margin: 0;
 }
 
 .tag-image {
     margin-right: 5px;
 }
 
 .reply-to-message {
     display: none;
 }
 
 .tripcode {
     padding: 2px;
 }
 
 #fav-panel {
     display: none;
     margin: 1ex;
 }
 
 .hidden_post {
     opacity: 0.2;
 }
 
 .hidden_post:hover {
     opacity: 1;
 }
 
-.monochrome > .image > .thumb > img {
+.monochrome > .image > .thumb > img, .monochrome.img-full {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
 }
 
 #quote-button {
     position: absolute;
     display: none;
     cursor: pointer;
     z-index: 400;
 }
 
 .required-field:before {
     content: '* ';
 }
 
 .hint {
     border-bottom: dashed 1px;
     cursor: help;
 }
 
 .url-image:hover {
     filter: invert(100%);
 }
 
 .landing-tags, .landing-images {
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }
 
 .landing-images {
     text-align: center;
 }
 
 .landing-threads {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
 }
 
 .landing-threads > .thread-short {
     display: inline-block;
     width: 240px;
 }
 
 audio {
     width: 200px;
 }
 

boards/static/js/image.js

@@ -1,205 +1,208 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var IMAGE_POPUP_MARGIN = 10;
 
 
 var IMAGE_VIEWERS = [
     ['simple', new SimpleImageViewer()],
     ['popup', new PopupImageViewer()]
 ];
 
 var FULL_IMG_CLASS = 'post-image-full';
 
 var ATTR_SCALE = 'scale';
 
 
 // Init image viewer
 var viewerName = $('body').attr('data-image-viewer');
 var viewer = ImageViewer();
 for (var i = 0; i < IMAGE_VIEWERS.length; i++) {
     var item = IMAGE_VIEWERS[i];
     if (item[0] === viewerName) {
         viewer = item[1];
         break;
     }
 }
 
 
 function getFullImageWidth(previewImage) {
     var full_img_w = previewImage.attr('data-width');
     if (full_img_w == null) {
         full_img_w = previewImage[0].naturalWidth;
     }
 
     return full_img_w;
 }
 
 function getFullImageHeight(previewImage) {
     var full_img_h = previewImage.attr('data-height');
     if (full_img_h == null) {
         full_img_h = previewImage[0].naturalHeight;
     }
 
     return full_img_h;
 }
 
 
 function ImageViewer() {}
 ImageViewer.prototype.view = function (post) {};
 
 function SimpleImageViewer() {}
 SimpleImageViewer.prototype.view = function (post) {
     var images = post.find('img');
     images.toggle();
 
     // When we first enlarge an image, a full image needs to be created
     if (images.length == 1) {
         var thumb = images.first();
 
         var width = getFullImageWidth(thumb);
         var height = getFullImageHeight(thumb);
 
         if (width == null || height == null) {
             width = '100%';
             height = '100%';
         }
 
         var parent = images.first().parent();
         var link = parent.attr('href');
 
         var fullImg = $('<img />')
             .addClass(FULL_IMG_CLASS)
             .attr('src', link)
             .attr('width', width)
             .attr('height', height);
 
         parent.append(fullImg);
     }
 };
 
 function PopupImageViewer() {}
 PopupImageViewer.prototype.view = function (post) {
     var el = post;
     var thumb_id = 'full' + el.find('img').attr('alt');
 
     var existingPopups = $('#' + thumb_id);
     if (!existingPopups.length) {
         var imgElement = el.find('img');
 
         var full_img_w = getFullImageWidth(imgElement);
         var full_img_h = getFullImageHeight(imgElement);
 
         var win = $(window);
 
         var win_w = win.width();
         var win_h = win.height();
 
         // New image size
         var w_scale = 1;
         var h_scale = 1;
 
         var freeWidth = win_w - 2 * IMAGE_POPUP_MARGIN;
         var freeHeight = win_h - 2 * IMAGE_POPUP_MARGIN;
 
         if (full_img_w > freeWidth) {
             w_scale = full_img_w / freeWidth;
         }
         if (full_img_h > freeHeight) {
             h_scale = full_img_h / freeHeight;
         }
 
         var scale = Math.max(w_scale, h_scale)
         var img_w = full_img_w / scale;
         var img_h = full_img_h / scale;
 
         var postNode = $(el);
 
         var img_pv = new Image();
         var newImage = $(img_pv);
         newImage.addClass('img-full')
             .attr('id', thumb_id)
             .attr('src', postNode.attr('href'))
             .attr(ATTR_SCALE, scale)
             .css({
                 'width': img_w,
                 'height': img_h,
                 'left': (win_w - img_w) / 2,
                 'top': ((win_h - img_h) / 2),
                 'position': 'fixed' // Chrome fix because it adds a 'relative' value to the image somehow
             })
             //scaling preview
             .mousewheel(function(event, delta) {
                 var cx = event.originalEvent.clientX;
                 var cy = event.originalEvent.clientY;
 
                 var scale = newImage.attr(ATTR_SCALE) / (delta > 0 ? 1.25 : 0.8);
 
                 var oldWidth = newImage.width();
                 var oldHeight = newImage.height();
 
                 var newIW = full_img_w / scale;
                 var newIH = full_img_h / scale;
 
                 newImage.width(newIW);
                 newImage.height(newIH);
                 newImage.attr(ATTR_SCALE, scale);
 
                 // Set position
                 var oldPosition = newImage.position();
                 newImage.css({
                     left: parseInt(cx - (newIW/oldWidth) * (cx - parseInt(oldPosition.left, 10)), 10),
                     top:  parseInt(cy - (newIH/oldHeight) * (cy - parseInt(oldPosition.top, 10)), 10)
                 });
 
                 return false;
             })
             .draggable({
                 addClasses: false,
                 stack: '.img-full'
             })
             .appendTo($('body'));
             newImage.click(function() {
                 $(this).remove();
             });
+        if (post.parent().parent().hasClass('monochrome')) {
+            newImage.addClass('monochrome');
+        }
     } else {
         existingPopups.remove();
     }
 };
 
 function addImgPreview() {
     //keybind
     $(document).on('keyup.removepic', function(e) {
         if(e.which === 27) {
             $('.img-full').remove();
         }
     });
 
     $('body').on('click', '.thumb', function() {
         viewer.view($(this));
 
         return false;
     });
 }