Completed
Pull Request — master (#1868)
by Marc
21:29
created

LazyLoad::init()   B

Complexity

Conditions 3
Paths 3

Size

Total Lines 72

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
dl 0
loc 72
rs 8.6109
c 0
b 0
f 0
cc 3
nc 3
nop 0

How to fix   Long Method   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
<?php
2
3
namespace luya\lazyload;
4
5
use luya\base\Widget;
6
use yii\base\InvalidConfigException;
7
use yii\helpers\Html;
8
use luya\web\View;
9
10
/**
11
 * Image Lazy Loader.
12
 *
13
 * ```php
14
 * <?= LazyLoad::widget(['src' => 'http://www.zephir.ch/img/zephir-logo.png']); ?>
15
 * ```
16
 *
17
 * In order to read more visit the [[concept-lazyload.md]] guide section.
18
 *
19
 * @author Basil Suter <[email protected]>
20
 * @author Marc Stampfli <[email protected]>
21
 * @since 1.0.0
22
 */
23
class LazyLoad extends Widget
24
{
25
    const JS_ASSET_KEY = 'lazyload.js.register';
26
27
    const CSS_ASSET_KEY = 'lazyload.css.register';
28
29
    /**
30
     * @var string The path to the image you want to lazy load.
31
     */
32
    public $src;
33
34
    /**
35
     * @var string Path for the placeholder image that will be base64 encoded.
36
     * @since 1.0.13
37
     */
38
    public $placeholderSrc;
39
40
    /**
41
     * @var boolean Inline the placeholder source as base64 encoded string
42
     * @since 1.0.13
43
     */
44
    public $placeholderAsBase64 = false;
45
46
    /**
47
     * @var integer The width of the image, this information should be provided in order to display a placeholder.
48
     */
49
    public $width;
50
51
    /**
52
     * @var integer The height of the image, this information should be provided in order to display a placeholder.
53
     */
54
    public $height;
55
56
    /**
57
     * @var boolean Define whether a full image tag should be return or only the attributes. This can be applied when using the lazy loader in background images.
58
     */
59
    public $attributesOnly = false;
60
61
    /**
62
     * @var string Additional classes for the lazy load image.
63
     */
64
    public $extraClass;
65
66
    /**
67
     * @inheritdoc
68
     */
69
    public function init()
70
    {
71
        parent::init();
72
73
        if ($this->src === null) {
74
            throw new InvalidConfigException("The parameter src is required by the lazyload widget.");
75
        }
76
77
        // register the asset file
78
        LazyLoadAsset::register($this->view);
79
80
        // register js and css code with keys in order to ensure the registration is done only once
81
        $this->view->registerJs("$('.lazy-image').lazyLoad();", View::POS_READY, self::JS_ASSET_KEY);
82
83
        if ($this->placeholderSrc) {
84
            $this->view->registerCss("
85
                .lazyimage-wrapper {
86
                    display: block;
87
                    width: 100%;
88
                    position: relative;
89
                    overflow: hidden;
90
                }
91
                .lazyimage {
92
                    position: absolute;
93
                    top: 50%;
94
                    left: 50%;
95
                    bottom: 0;
96
                    right: 0;
97
                    opacity: 0;
98
                    height: 100%;
99
                    width: 100%;
100
                    -webkit-transition: 1s ease-in-out opacity;
101
                    transition: 1s ease-in-out opacity;
102
                    -webkit-transform: translate(-50%,-50%);
103
                    transform: translate(-50%,-50%);
104
                    -o-object-fit: cover;
105
                    object-fit: cover;
106
                    -o-object-position: center center;
107
                    object-position: center center;
108
                    z-index: 20;
109
                }
110
                .lazyimage.loaded {
111
                    opacity: 1;
112
                }
113
                .lazyimage-placeholder-image {
114
                    display: block;
115
                    width: 100%;
116
                    height: auto;
117
                }
118
                .nojs .lazyimage,
119
                .nojs .lazyimage-placeholder-image,
120
                .no-js .lazyimage,
121
                .no-js .lazyimage-placeholder-image {
122
                    display: none;
123
                }
124
            ", [], self::CSS_ASSET_KEY);
125
        } else {
126
            $this->view->registerCss("
127
                .lazy-image {
128
                    display: none;
129
                }
130
                .lazy-image.loaded {
131
                    display: block;
132
                }
133
                .lazy-placeholder {
134
                    background-color: #f2f2f2;
135
                    position: relative;
136
                    display: block;
137
                }
138
            ", [], self::CSS_ASSET_KEY);
139
        }
140
    }
141
142
    /**
143
     * @inheritdoc
144
     */
145
    public function run()
146
    {
147
        $class = ($this->placeholderSrc ? 'lazyimage-wrapper' : 'lazy-image') . ' ' . $this->extraClass;
148
149
        if ($this->placeholderSrc && $this->placeholderAsBase64) {
150
            $this->placeholderSrc = 'data:image/jpg;base64,' . base64_encode(file_get_contents($this->placeholderSrc));
151
        }
152
153
        if ($this->attributesOnly && !$this->placeholderSrc) {
154
            return "class=\"{$class}\" data-src=\"$this->src\" data-width=\"$this->width\" data-height=\"$this->height\" data-as-background=\"1\"";
155
        }
156
157
        if ($this->placeholderSrc) {
158
            $tag = '<div class="' . $class . '">';
159
            $tag .= Html::tag('img', '', ['class' => 'lazy-image lazyimage', 'data-src' => $this->src]);
160
            $tag .= Html::tag('img', '', ['class' => 'lazyimage-placeholder-image', 'src' => $this->placeholderSrc]);
161
            $tag .= '<noscript><img class="lazyimage-image" src="' . $this->src . '" /></noscript>';
162
            $tag .= '</div>';
163
        } else {
164
            $tag = Html::tag('img', '', ['class' => $class, 'data-src' => $this->src, 'data-width' => $this->width, 'data-height' => $this->height]);
165
            $tag .= '<noscript><img class="'.$class.'" src="'.$this->src.'" /></noscript>';
166
        }
167
168
        return $tag;
169
    }
170
}
171