Merge 9754a09 into baf796a

luyadev · Oct 31, 2018 · d4a66c1 · d4a66c1
2 parents baf796a + 9754a09
commit d4a66c1
Show file tree

Hide file tree

Showing 10 changed files with 4,264 additions and 126 deletions.
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
@@ -4,16 +4,16 @@ All notable changes to this project will be documented in this file. This projec
 
 ## 1.0.14 (in progress)
 
++ [#1867](https://github.com/luyadev/luya/issues/1867) Rewritten lazyload js and added new placeholderSrc. Updated lazyload docs.
 + [#1870](https://github.com/luyadev/luya/issues/1870) String helper truncate middle use default truncate if no results found and added new option for case sensitive comparing.
 + [#1871](https://github.com/luyadev/luya/issues/1871) String helper highlight supports a list of words provided as array to highlight.
 
 ## 1.0.13 (30. October 2018)
 
-+ [#1869](https://github.com/luyadev/luya/issues/1869) Fix bug with word highlight in string helper.
 + [#1866](https://github.com/luyadev/luya/pull/1866) Make ./luya serve command work out of the box
 + [#1863](https://github.com/luyadev/luya/issues/1863) Enabled the usage of alias paths when using renderLayout() method.
 + [#1859](https://github.com/luyadev/luya/issues/1859) Fixed issue where alt body is not clean up when sending multiple messages in the same mail object.
-+ [#1855](https://github.com/luyadev/luya/issues/1855) If create a url to an other module, don't replace the url with current module context. 
++ [#1855](https://github.com/luyadev/luya/issues/1855) If create a url to an other module, don't replace the url with current module context.
 
 ## 1.0.12 (8. October 2018)
 

diff --git a/core/lazyload/LazyLoad.php b/core/lazyload/LazyLoad.php
@@ -23,19 +23,32 @@
 class LazyLoad extends Widget
 {
     const JS_ASSET_KEY = 'lazyload.js.register';
-    
+
     const CSS_ASSET_KEY = 'lazyload.css.register';
-
+    const CSS_ASSET_KEY_PLACEHOLDER = 'lazyload.placeholder.css.register';
+
     /**
      * @var string The path to the image you want to lazy load.
      */
     public $src;
-
+
+    /**
+     * @var string Path for the placeholder image that will be base64 encoded.
+     * @since 1.0.14
+     */
+    public $placeholderSrc;
+
+    /**
+     * @var boolean Inline the placeholder source as base64 encoded string
+     * @since 1.0.14
+     */
+    public $placeholderAsBase64 = false;
+
     /**
      * @var integer The width of the image, this information should be provided in order to display a placeholder.
      */
     public $width;
-    
+
     /**
      * @var integer The height of the image, this information should be provided in order to display a placeholder.
      */
@@ -50,39 +63,109 @@ class LazyLoad extends Widget
      * @var string Additional classes for the lazy load image.
      */
     public $extraClass;
-    
+
     /**
      * @inheritdoc
      */
     public function init()
     {
         parent::init();
-        
+
         if ($this->src === null) {
             throw new InvalidConfigException("The parameter src is required by the lazyload widget.");
         }
-        
+
         // register the asset file
         LazyLoadAsset::register($this->view);
-        
+
         // register js and css code with keys in order to ensure the registration is done only once
         $this->view->registerJs("$('.lazy-image').lazyLoad();", View::POS_READY, self::JS_ASSET_KEY);
-        $this->view->registerCss(".lazy-image { display: none; }", [], self::CSS_ASSET_KEY);
+
+        if ($this->placeholderSrc) {
+            $this->view->registerCss("
+                .lazyimage-wrapper {
+                    display: block;
+                    width: 100%;
+                    position: relative;
+                    overflow: hidden;
+                }
+                .lazyimage {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    bottom: 0;
+                    right: 0;
+                    opacity: 0;
+                    height: 100%;
+                    width: 100%;
+                    -webkit-transition: 1s ease-in-out opacity;
+                    transition: 1s ease-in-out opacity;
+                    -webkit-transform: translate(-50%,-50%);
+                    transform: translate(-50%,-50%);
+                    -o-object-fit: cover;
+                    object-fit: cover;
+                    -o-object-position: center center;
+                    object-position: center center;
+                    z-index: 20;
+                }
+                .lazyimage.loaded {
+                    opacity: 1;
+                }
+                .lazyimage-placeholder-image {
+                    display: block;
+                    width: 100%;
+                    height: auto;
+                }
+                .nojs .lazyimage,
+                .nojs .lazyimage-placeholder-image,
+                .no-js .lazyimage,
+                .no-js .lazyimage-placeholder-image {
+                    display: none;
+                }
+            ", [], self::CSS_ASSET_KEY_PLACEHOLDER);
+        } else {
+            $this->view->registerCss("
+                .lazy-image {
+                    display: none;
+                }
+                .lazy-image.loaded {
+                    display: block;
+                }
+                .lazy-placeholder {
+                    background-color: #f2f2f2;
+                    position: relative;
+                    display: block;
+                }
+            ", [], self::CSS_ASSET_KEY);
+        }
     }
-    
+
     /**
      * @inheritdoc
      */
     public function run()
     {
-        $class = 'lazy-image ' . $this->extraClass;
-
-        if ($this->attributesOnly) {
+        $class = ($this->placeholderSrc ? 'lazyimage-wrapper' : 'lazy-image') . ' ' . $this->extraClass;
+
+        if ($this->placeholderSrc && $this->placeholderAsBase64) {
+            $this->placeholderSrc = 'data:image/jpg;base64,' . base64_encode(file_get_contents($this->placeholderSrc));
+        }
+
+        if ($this->attributesOnly && !$this->placeholderSrc) {
             return "class=\"{$class}\" data-src=\"$this->src\" data-width=\"$this->width\" data-height=\"$this->height\" data-as-background=\"1\"";
         }
-
-        $tag = Html::tag('img', '', ['class' => $class, 'data-src' => $this->src, 'data-width' => $this->width, 'data-height' => $this->height]);
-        $tag.= '<noscript><img class="'.$class.'" src="'.$this->src.'" /></noscript>';
+
+        if ($this->placeholderSrc) {
+            $tag = '<div class="' . $class . '">';
+            $tag .= Html::tag('img', '', ['class' => 'lazy-image lazyimage', 'data-src' => $this->src]);
+            $tag .= Html::tag('img', '', ['class' => 'lazyimage-placeholder-image', 'src' => $this->placeholderSrc]);
+            $tag .= '<noscript><img class="lazyimage-image" src="' . $this->src . '" /></noscript>';
+            $tag .= '</div>';
+        } else {
+            $tag = Html::tag('img', '', ['class' => $class, 'data-src' => $this->src, 'data-width' => $this->width, 'data-height' => $this->height]);
+            $tag .= '<noscript><img class="'.$class.'" src="'.$this->src.'" /></noscript>';
+        }
+
         return $tag;
     }
 }
diff --git a/core/lazyload/LazyLoadAsset.php b/core/lazyload/LazyLoadAsset.php
@@ -16,14 +16,14 @@ class LazyLoadAsset extends Asset
      * @var string The path to the source files of the asset.
      */
     public $sourcePath = '@luya/lazyload/resources';
-    
+
     /**
      * @var array An array with all javascript files for this asset located in the source path folder.
      */
     public $js = [
         'lazyload.min.js',
     ];
-    
+
     /**
      * @var array An array with assets this asset depends on.
      */