https://cdnn.1prime.ru//js/libs/ria.picture.js

1/**
2 *
3 *  $('img').riaPicture();
4 *
5 *  <img src="default.jpg" data-cover = "true"
6 *              data-responsive0 = "min-width-0.jpg"
7 *              data-responsive480 = "min-width-480.jpg"
8 *              data-responsive640 = "min-width-640.jpg"
9 *              data-responsive768 = "min-width-768.jpg"
10 *              data-responsive925 = "min-width-925.jpg"/>
11 *
12 * */
13
14;(function ( $, window, document, undefined ) {
15
16	var riaPicture = function(el, options){
17
18		var defaults = {
19            size : 'cover',
20            url : false,
21            responsive : false
22		};
23		var _this = this;
24		_this.$el = $(el);
25        _this.$parent = _this.$el.parents(':not("picture"):first');
26        if ( !defaults.url ) defaults.url = _this.$el.attr('src');
27		_this.defOptions = defaults;
28		_this.userOptions = options;
29		_this.options = $.extend(true, {}, defaults, options);
30        /**
31         * Current settings
32         * @protected
33         */
34        _this._settings = null;
35        /**
36         * Current state
37         * @protected
38         */
39        _this._current = {
40            breakpoints : [-1, 0],
41            url : _this.options.url,
42            originWidth : false,
43            originHeight : false,
44            loading : false
45        };
46        _this.init();
47	};
48
49    riaPicture.prototype.init = function(){
50        var _this = this;
51
52        _this.supportObjectFit = _this.supportsCSS('object-fit','cover');
53        _this.supportPicture =  !!window.HTMLPictureElement;
54
55        /* TODO remove */ //console.log( _this.supportObjectFit );
56        /* TODO remove */ //console.log( _this.supportPicture );
57
58        if ( _this.supportObjectFit && _this.supportPicture ) return false;
59
60        _this.setSize();
61
62        _this.update();
63
64        $(window).on('resize', function(){
65            _this.onResize();
66        });
67
68        $(window).resize();
69
70        setTimeout( function(){
71            $(window).resize();
72        }, 1000);
73
74    };
75
76    riaPicture.prototype.update = function(){
77        this.getData();

78        this.getSettings();
79    };
80
81    riaPicture.prototype.onResize = function(){
82        var _this = this;
83        _this.getSettings();
84        _this.uploadImage();
85        _this.setSize();
86    };
87
88    riaPicture.prototype.setSize = function(){
89        if ( this.supportObjectFit ) return false;
90        var size = this._current.size || this.options.size;
91        if ( size == 'cover' ) this.setCover();
92    };
93
94    riaPicture.prototype.getData = function(){
95        var _this = this,
96            responsive = {};
97        $.each( _this.$el.data(), function( i, v ){
98            if ( i.indexOf("responsive") >= 0 ) responsive[ i.slice(10)] = { 'url' : v };
99         });
100        _this.options.responsive = $.extend(_this.options.responsive, responsive);
101        /* TODO remove */ //console.log(_this.options.responsive);
102    };
103
104    riaPicture.prototype.uploadImage = function(){
105        var _this = this,
106            c = _this._current,
107            s = _this._settings;
108        if ( c.url != s.url && c.loading != s.url ){
109            var $newImage = $('<img src="' + s.url + '">');
110            c.loading = s.url;
111            $newImage.on('load', function () {
112                c.originWidth = $newImage[0].width;
113                c.originHeight = $newImage[0].height;
114                c.loading = false;
115                c.url = s.url;
116                _this.$el.attr('src', s.url );
117                /* TODO remove */ //console.log('>>> Images UPLOAD ' + s.url + ' --- width = ' + c.originWidth + ' --- height = ' + c.originHeight);
118                _this.setSize();
119            }).on('error', function () {
120                console.log('RiaPicture images ERROR ' + s.url);
121            });
122        }
123    };
124
125    riaPicture.prototype.setCover = function(){
126        var _this = this,
127            c = _this._current,
128            $p = _this.$parent,
129            $el = _this.$el,
130            imgW = ( !c.originWidth && !c.originHeight ) ? $el.width() : c.originWidth,
131            imgH = ( !c.originWidth && !c.originHeight ) ? $el.height(): c.originHeight,
132            imgDiff = imgW / imgH,
133            pW = $p.width(),
134            pH = $p.height(),
135            pDiff = pW / pH,
136            params = { position: 'absolute' };
137        /* TODO remove */ //console.log(' parent = ('+pW+','+pH+') --- '+pDiff+' --- image = ('+imgW+','+imgH+') --- '+imgDiff);
138        if ( pDiff < imgDiff ){
139            params.top = 0;
140            params.left = '-' + ( pH * imgDiff - pW ) / 2 + 'px' ;
141            params.height = '100%';
142            params.width = 'auto';
143        } else {
144            params.top = '-' + ( pW / imgDiff - pH ) / 2 + 'px';
145            params.left = 0;
146            params.height = 'auto';
147            params.width = '100%';
148        }
149        $el.css(params)
150	};
151
152    /**
153     * получение параметров для данного разрешения
154     * @returns {Object} settings
155     */
156    riaPicture.prototype.getSettings = function(forced){
157        var _this = this,
158            viewWidth = _this.getClientWidth();
159        if ( forced || _this._settings == null || viewWidth <= _this._current.breakpoints[0] || viewWidth > _this._current.breakpoints[1] ){
160            var	overwrites = _this.options.responsive,
161                settings = null;
162            if (!overwrites) {
163                settings = $.extend({}, _this.options);
164                _this._current.breakpoints = [0, Infinity];
165            } else {
166                var	match = -1,
167                    pointsArray = [],
168                    pointsKey = -1;
169                $.each(overwrites, function(point) {
170                    pointsArray.push(Number(point));
171                    if ( viewWidth >= point && match < point ) {
172                        pointsKey ++;
173                        match = Number(point);
174                    }
175                });
176                _this._current.breakpoints = [ pointsArray[pointsKey] ? pointsArray[pointsKey] : 0 , pointsArray[(pointsKey+1)] ? pointsArray[(pointsKey+1)] : Infinity];
177                settings = $.extend({}, _this.options, overwrites[match]);
178                delete settings.responsive;
179            }
180            _this._settings = settings;
181            /* TODO test */ //console.log('_this.breakpoints = [ ' + _this._current.breakpoints[0] + ' - ' + _this._current.breakpoints[1] + '] --- SETTING -> ', _this._settings);
182        }
183        return settings;
184    };
185
186    /**
187     * получение префикса для значения свойства
188     * get the prefixed property
189     * @param {Object} obj
190     * @param {String} property
191     * @returns {String | Undefined} prefixed
192     */
193    riaPicture.prototype.prefixedStyle = function ( obj, property ) {
194        var _this = this,
195            prefix,
196            prop,
197            camelProp = property[ 0 ].toUpperCase() + property.slice( 1 ),
198            i = 0,
199            vendor_prefixes = [ '', 'webkit', 'Moz', 'MS', 'ms', 'o' ];
200        if ( _this.options.vendor_prefixes ) vendor_prefixes = _this.options.vendor_prefixes;
201        while ( i < vendor_prefixes.length ) {

202            prefix = vendor_prefixes[ i ];
203            prop = ( prefix ) ? prefix + camelProp : property;
204            if ( prop in obj ) {
205                return prop;
206            }
207            i++;
208        }
209        return property;
210    };
211    /**
212     * проверка поддержки css свойства
213     * check support for css properties
214     * @param {String} property
215     * @param {String} value
216     * @returns {true | false} Is supported
217     */
218    riaPicture.prototype.supportsCSS = function ( property, value ) {
219        var element = document.createElement( 'span' );
220        property = this.prefixedStyle(element, property);
221        if ( element.style[property] !== undefined ) {
222            element.style.cssText = property + ':' + value;
223        } else {
224            return false;
225        }
226        return element.style[ property ] === value;
227    };
228
229    /**
230     * получение ширины окна клиента
231     * @returns {Number} size
232     */
233    riaPicture.prototype.getClientWidth = function(){
234        return Math.max(window.innerWidth || 0, (document.getElementsByTagName('html')[0] || {}).clientWidth || 0)
235    };
236
237	$.fn.riaPicture = function(options) {
238		return this.each(function(){
239			if(!$.data(this, 'riaPicture')){
240				$.data(this, 'riaPicture', new riaPicture(this, options));
241			}
242		});
243	};
244
245})( jQuery, window, document );
246