Load full images only on click is simple image viewer is enabled

boards/models/image.py

@@ -1,107 +1,105 b''
 import hashlib
 import os
 from random import random
 import time
 from django.db import models
 from boards import thumbs
 from boards.models.base import Viewable
 
 __author__ = 'neko259'
 
 
 IMAGE_THUMB_SIZE = (200, 150)
 IMAGES_DIRECTORY = 'images/'
 FILE_EXTENSION_DELIMITER = '.'
 HASH_LENGTH = 36
 
 CSS_CLASS_IMAGE = 'image'
 CSS_CLASS_THUMB = 'thumb'
 
 
 class PostImageManager(models.Manager):
     def create_with_hash(self, image):
         image_hash = self.get_hash(image)
         existing = self.filter(hash=image_hash)
         if len(existing) > 0:
             post_image = existing[0]
         else:
             post_image = PostImage.objects.create(image=image)
 
         return post_image
 
     def get_hash(self, image):
         """
         Gets hash of an image.
         """
         md5 = hashlib.md5()
         for chunk in image.chunks():
             md5.update(chunk)
         return md5.hexdigest()
 
 
 class PostImage(models.Model, Viewable):
     objects = PostImageManager()
 
     class Meta:
         app_label = 'boards'
         ordering = ('id',)
 
     def _update_image_filename(self, filename):
         """
         Gets unique image filename
         """
 
         path = IMAGES_DIRECTORY
 
         # TODO Use something other than random number in file name
         new_name = '{}{}.{}'.format(
             str(int(time.mktime(time.gmtime()))),
             str(int(random() * 1000)),
             filename.split(FILE_EXTENSION_DELIMITER)[-1:][0])
 
         return os.path.join(path, new_name)
 
     width = models.IntegerField(default=0)
     height = models.IntegerField(default=0)
 
     pre_width = models.IntegerField(default=0)
     pre_height = models.IntegerField(default=0)
 
     image = thumbs.ImageWithThumbsField(upload_to=_update_image_filename,
                                         blank=True, sizes=(IMAGE_THUMB_SIZE,),
                                         width_field='width',
                                         height_field='height',
                                         preview_width_field='pre_width',
                                         preview_height_field='pre_height')
     hash = models.CharField(max_length=HASH_LENGTH)
 
     def save(self, *args, **kwargs):
         """
         Saves the model and computes the image hash for deduplication purposes.
         """
 
         if not self.pk and self.image:
             self.hash = PostImage.objects.get_hash(self.image)
         super(PostImage, self).save(*args, **kwargs)
 
     def __str__(self):
         return self.image.url
 
     def get_view(self):
         return '<div class="{}">' \
                '<a class="{}" href="{full}">' \
                '<img class="post-image-preview"' \
                ' src="{}"' \
                ' alt="{}"' \
                ' width="{}"' \
                ' height="{}"' \
                ' data-width="{}"' \
                ' data-height="{}" />' \
-               '<img class="post-image-full"' \
-               ' src="{full}" />' \
                '</a>' \
                '</div>'\
             .format(CSS_CLASS_IMAGE, CSS_CLASS_THUMB,
                     self.image.url_200x150,
                     str(self.hash), str(self.pre_width),
                     str(self.pre_height), str(self.width), str(self.height), full=self.image.url)

boards/static/css/base.css

@@ -1,102 +1,101 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 {
     border: none;
     margin: inherit;
     padding: inherit;
     background: none;
     font-size: inherit;
 }
 
 #form-close-button {
     display: none;
 }
 
 .post-image-full {
-    display: none;
     width: 100%;
 }

boards/static/js/image.js

@@ -1,133 +1,148 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_VIEWERS = [
     ['simple', new SimpleImageViewer()],
     ['popup', new PopupImageViewer()]
 ];
 
+var FULL_IMG_CLASS = 'post-image-full';
+
 
 function ImageViewer() {}
 ImageViewer.prototype.view = function (post) {};
 
 function SimpleImageViewer() {}
 SimpleImageViewer.prototype.view = function (post) {
-    post.find('img').toggle();
+    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 parent = images.first().parent();
+        var link = parent.attr('href');
+
+        var fullImg = $('<img />')
+            .addClass(FULL_IMG_CLASS)
+            .attr('src', link);
+
+        parent.append(fullImg);
+    }
 };
 
 function PopupImageViewer() {}
 PopupImageViewer.prototype.view = function (post) {
     var margin = 20; //..change
 
     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 img_w = imgElement.attr('data-width');
         var img_h = imgElement.attr('data-height');
 
         var win = $(window);
 
         var win_w = win.width();
         var win_h = win.height();
         //new image size
         if (img_w > win_w) {
             img_h = img_h * (win_w/img_w) - margin;
             img_w = win_w - margin;
         }
         if (img_h > win_h) {
             img_w = img_w * (win_h/img_h) - margin;
             img_h = win_h - margin;
         }
 
         var img_pv = new Image();
         var newImage = $(img_pv);
         newImage.addClass('img-full')
             .attr('id', thumb_id)
             .attr('src', $(el).attr('href'))
             .appendTo($(el))
             .css({
                 'width': img_w,
                 'height': img_h,
                 'left': (win_w - img_w) / 2,
                 'top': ((win_h - img_h) / 2)
             })
         //scaling preview
         .mousewheel(function(event, delta) {
             var cx = event.originalEvent.clientX,
             cy = event.originalEvent.clientY,
             i_w = parseFloat(newImage.width()),
             i_h = parseFloat(newImage.height()),
             newIW = i_w * (delta > 0 ? 1.25 : 0.8),
             newIH = i_h * (delta > 0 ? 1.25 : 0.8);
 
             newImage.width(newIW);
             newImage.height(newIH);
             //set position
             newImage.css({
                 left: parseInt(cx - (newIW/i_w) * (cx - parseInt($(img_pv).position().left, 10)), 10),
                 top:  parseInt(cy - (newIH/i_h) * (cy - parseInt($(img_pv).position().top, 10)), 10)
             });
 
             return false;
         }
         )
             .draggable({
                 addClasses: false,
                 stack: '.img-full'
             });
     } else {
         existingPopups.remove();
     }
 };
 
 function addImgPreview() {
     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;
         }
     }
 
     //keybind
     $(document).on('keyup.removepic', function(e) {
         if(e.which === 27) {
             $('.img-full').remove();
         }
     });
 
     $('body').on('click', '.thumb', function() {
         viewer.view($(this));
 
         return false;
     });
 }