Merge pull request #1707 from vogdb/issue-1707

Add jquery.lazyload.

client-vendor/after-body/jquery.clipSlide/jquery.clipSlide.js

@@ -19,7 +19,7 @@
 
     var self = this;
     if (this.$elem.find('img').length) {
-      this.$elem.find('img').on('load', function() {
+      $(this).imagesLoaded().always(function() {
         self.toggle(false);
       });
     } else {

client-vendor/after-body/jquery.unveil/jquery.unveil.js

@@ -0,0 +1,56 @@
+/**
+ * jQuery Unveil
+ * A very lightweight jQuery plugin to lazy load images
+ * http://luis-almeida.github.com/unveil
+ *
+ * Licensed under the MIT license.
+ * Copyright 2013 Luís Almeida
+ * https://github.com/luis-almeida
+ */
+
+;(function($) {
+
+  $.fn.unveil = function(threshold, callback) {
+
+    var $w = $(window),
+        th = threshold || 0,
+        retina = window.devicePixelRatio > 1,
+        attrib = retina? "data-src-retina" : "data-src",
+        images = this,
+        loaded;
+
+    this.one("unveil", function() {
+      var source = this.getAttribute(attrib);
+      source = source || this.getAttribute("data-src");
+      if (source) {
+        this.setAttribute("src", source);
+        if (typeof callback === "function") callback.call(this);
+      }
+    });
+
+    function unveil() {
+      var inview = images.filter(function() {
+        var $e = $(this);
+        if ($e.is(":hidden")) return;
+
+        var wt = $w.scrollTop(),
+            wb = wt + $w.height(),
+            et = $e.offset().top,
+            eb = et + $e.height();
+
+        return eb >= wt - th && et <= wb + th;
+      });
+
+      loaded = inview.trigger("unveil");
+      images = images.not(loaded);
+    }
+
+    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
+
+    unveil();
+
+    return this;
+
+  };
+
+})(window.jQuery || window.Zepto);

layout/default/css/contentPlaceholder.less

@@ -0,0 +1,28 @@
+.contentPlaceholder {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+
+  .contentPlaceholder-size {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .contentPlaceholder-size + * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+  }
+
+  &.stretch {
+    display: block;
+    max-width: none;
+
+    .contentPlaceholder-size {
+      width: 100%;
+    }
+  }
+}

layout/default/css/function.usertext.less

@@ -10,14 +10,12 @@
   .word_wrap;
   hyphens: auto;
 
-  img:not(.emoticon) {
-    box-sizing: border-box;
-    max-width: 100%;
-    max-height: 1500px;
-    margin: 5px 0;
-    display: block;
-    padding: 2px;
-    border: 1px solid @colorFgBorderEmphasize1;
+  .usertext-image {
+    margin: 7px 0;
+
+    > img, .contentPlaceholder .contentPlaceholder-size {
+      max-height: 500px;
+    }
   }
 
   h1, h2, h3, h4, h5, h6 {

library/CM/App.js

@@ -348,7 +348,26 @@ var CM_App = CM_Class_Abstract.extend({
       $dom.find('.openx-ad:visible').openx();
       $dom.find('.epom-ad').epom();
       $dom.find('.fancySelect').fancySelect();
+      this._setupLazyImages($dom);
     },
+
+    /**
+     * @param {jQuery} $dom
+     */
+    _setupLazyImages: function($dom) {
+      var $imageListNotLoad = $();
+      $dom.find('.clipSlide').each(function() {
+        var $notFirstImages = $(this).find('img.lazy:gt(0)');
+        $imageListNotLoad = $imageListNotLoad.add($notFirstImages);
+
+        $(this).on('toggle.clipSlide', function() {
+          $(this).find('img.lazy:gt(0)').unveil(600);
+        });
+      });
+
+      $dom.find('img.lazy').not($imageListNotLoad).unveil(600);
+    },
+
     /**
      * @param {jQuery} $dom
      */

library/CM/Frontend/TemplateHelper/ContentPlaceholder.php

@@ -0,0 +1,48 @@
+<?php
+
+class CM_Frontend_TemplateHelper_ContentPlaceholder {
+
+    /**
+     * @param string    $content
+     * @param int|null  $width
+     * @param int|null  $height
+     * @param bool|null $stretch
+     * @return string
+     */
+    public static function create($content, $width = null, $height = null, $stretch = null) {
+        if (null === $width) {
+            $width = 1;
+        }
+        if (null === $height) {
+            $height = 1;
+        }
+        $stretch = (bool) $stretch;
+        $imageData = self::_createBlankImage($width, $height);
+        $imageSrc = 'data:image/png;base64,' . base64_encode($imageData);
+
+        $output = '<div class="contentPlaceholder' . ($stretch ? ' stretch' : '') . '">';
+        $output .= '<img class="contentPlaceholder-size" src="' . $imageSrc . '"/>';
+        $output .= $content;
+
+        $output .= '</div>';
+        return $output;
+    }
+
+    /**
+     * @param int $width
+     * @param int $height
+     * @return string
+     */
+    private static function _createBlankImage($width, $height) {
+        $cache = CM_Cache_Local::getInstance();
+        return $cache->get($cache->key(__CLASS__, $width, $height), function () use ($width, $height) {
+            $image = imagecreate($width, $height);
+            ob_start();
+            imagecolorallocate($image, 255, 255, 255);
+            imagepng($image);
+            $imageData = ob_get_contents();
+            ob_end_clean();
+            return $imageData;
+        });
+    }
+}

library/CM/SmartyPlugins/block.contentPlaceholder.php

@@ -0,0 +1,11 @@
+<?php
+
+require_once 'function.tag.php';
+
+function smarty_block_contentPlaceholder($params, $content, Smarty_Internal_Template $template, $open) {
+    if ($open) {
+        return '';
+    } else {
+        return CM_Frontend_TemplateHelper_ContentPlaceholder::create($content, $params['width'], $params['height'], (isset($params['stretch']) ? ' stretch' : false));
+    }
+}

library/CM/Usertext/Markdown.php

@@ -2,18 +2,21 @@
 
 class CM_Usertext_Markdown extends Michelf\MarkdownExtra {
 
+    protected $id_class_attr_catch_re = '\{((?:[ ]*[#.][-_:a-zA-Z0-9]+){0,2}(?:[ ]*\$[\d]+x[\d]+))[ ]*\}';
+    protected $id_class_attr_nocatch_re = '\{(?:[ ]*[#.][-_:a-zA-Z0-9]+){0,2}(?:[ ]*\$[\d]+x[\d]+)[ ]*\}';
+
     /** @var bool $_skipAnchors */
     private $_skipAnchors;
 
     /**
      * @param bool|null $skipAnchors
      */
-    function __construct($skipAnchors = null) {
+    public function __construct($skipAnchors = null) {
         $this->_skipAnchors = (boolean) $skipAnchors;
         parent::__construct();
     }
 
-    function formParagraphs($text) {
+    protected function formParagraphs($text) {
         $text = preg_replace('/\A\n+|\n+\z/', '', $text);
         $grafs = preg_split('/\n{1,}/', $text, -1, PREG_SPLIT_NO_EMPTY);
 
@@ -36,19 +39,68 @@ function formParagraphs($text) {
         return implode("\n", $grafs);
     }
 
-    function _doAnchors_inline_callback($matches) {
+    protected function _doAnchors_inline_callback($matches) {
         if (!$this->_skipAnchors) {
             return parent::_doAnchors_inline_callback($matches);
         }
         $link_text = $this->runSpanGamut($matches[2]);
         return $this->hashPart($link_text);
     }
 
-    function _doAnchors_reference_callback($matches) {
+    protected function _doAnchors_reference_callback($matches) {
         if (!$this->_skipAnchors) {
             return parent::_doAnchors_inline_callback($matches);
         }
         $link_text = $matches[2];
         return $link_text;
     }
+
+    protected function _doImages_reference_callback($matches) {
+        $key = parent::_doImages_reference_callback($matches);
+        $this->html_hashes[$key] = $this->_transformToLazyImages($this->html_hashes[$key]);
+        return $key;
+    }
+
+    protected function doExtraAttributes($tag_name, $attr) {
+        $extraAttrs = parent::doExtraAttributes($tag_name, $attr);
+        if ('img' == $tag_name) {
+            preg_match_all('/\$(\d+)x(\d+)/', $attr, $matches);
+            if ($matches[1] && $matches[2]) {
+                $extraAttrs .= ' width="' . $matches[1][0] . '" height="' . $matches[2][0] . '"';
+            }
+        }
+        return $extraAttrs;
+    }
+
+    protected function _doImages_inline_callback($matches) {
+        $key = parent::_doImages_inline_callback($matches);
+        $this->html_hashes[$key] = $this->_transformToLazyImages($this->html_hashes[$key]);
+        return $key;
+    }
+
+    /**
+     * @param string $tagText
+     * @return string
+     * @throws CM_Exception_Invalid
+     */
+    private function _transformToLazyImages($tagText) {
+        $tagText = preg_replace_callback('/^<img src="([^"]+)" alt="([^"]+)"(?: title="(?:[^"]+)?")?(?: class="([^"]+)")?(?: width="(\d+)")?(?: height="(\d+)")? \/>$/i', function ($matches) {
+            $src = $matches[1];
+            $alt = $matches[2];
+            if (count($matches) > 5) {
+                $width = (int) $matches[4];
+                $height = (int) $matches[5];
+                if ($width > 0 && $height > 0) {
+                    $class = $matches[3] ? 'lazy ' . $matches[3] : 'lazy';
+                    $imgHtml = '<img data-src="' . $src . '" alt="' . $alt . '" class="' . $class . '"/>';
+                    return '<div class="usertext-image">' . CM_Frontend_TemplateHelper_ContentPlaceholder::create($imgHtml, $width, $height) .
+                    '</div>';
+                }
+                return $matches[0];
+            } else {
+                return '<div class="usertext-image"><img src="' . $src . '" alt="' . $alt . '"/></div>';
+            }
+        }, $tagText);
+        return $tagText;
+    }
 }

library/CM/View/Abstract.js

@@ -533,8 +533,7 @@ var CM_View_Abstract = Backbone.View.extend({
     }
     var idSwf = id + '-object', attributes = {
       id: idSwf,
-      name: idSwf,
-      styleclass: 'ratioKeeper-content'
+      name: idSwf
     };
 
     var self = this;