https://cdnn.1prime.ru//js/libs/ria_layout_manager.js

1"use strict";
2
3var ria_layout_manager = {
4    init: function(){
5        var _this = this;
6
7        console.log('ria_layout_manager >>> inited');
8
9        _this.minHeightViewWidgets = 100;       // минимальная высота виджетов, если меньше то скрываются
10        _this.headerToSmall = 300;              // размер прокрутки до маленького хедера
11        _this.widgetsSize = false;              // высота области виджетов
12
13        // флаг что на станице включен прилипающий хедер
14        _this.stickedOn = ( $("#body").data('header-sticked-on') && $('#header').length > 0 ) ? true : false;
15
16        _this.isMobile = ( ria && ria.mobileBrowser ) ? ria.mobileBrowser() : false;    // флаг что мобильный браузер
17        _this.notPullToReload = 'page-nopulltoreload';                                  // класс на <html/> для запрета Push to reload
18        /**  активность состояний */
19        _this._state = {
20            lenta : false,
21            chat : false,
22            live : false,
23            notPull : false
24        };
25        /**  модификаторы вешаются на body */
26        _this.mod = {
27            hSticked :'m-header-sticked',
28            hSmall : 'm-header-small',
29            hBrand : 'm-header-brand',
30            lenta : 'm-widget-lenta',
31            chat : 'm-widget-chat',
32            live : 'm-widget-live'
33        };
34        /**  классы для идентификации кнопок управления виджетами */
35        _this.button = {
36            lenta : 'js__toggle-lenta',
37            chat : 'js__toggle-chat',
38            live : 'js__toggle-live',
39            all: 'js__widgets-close'
40        };
41
42        /** подключение history бля обработки открытия Ленты */
43        if ( !!( window.history && history.pushState && history.replaceState ) ) {
44            _this.historyHandlers();
45        }
46
47        $( window ).on( 'scroll resize', function () {
48            if ( _this.stickedOn ) _this.headerStatesSwitching();
49            _this.setWidgetsSize();
50        });
51
52        _this.widgetsManager();
53
54        $( window ).scroll();
55
56        if ( ( '#header' ).length > 0 ) $( "#body" ).addClass( "m-header-ready" );
57
58    },
59
60    historyHandlers : function(){
61        var _this = this;
62        _this.fromHistory = false;
63        _this.disablePopstate = false;
64
65        /** Подписка на тригер изменеия состояния виджетов */
66        $( 'body' ).bind( 'widget', function( e, n, s ){
67            if ('scrollRestoration' in history) {
68                history.scrollRestoration = 'manual';
69            }
70
71            if ( n == 'lenta' && !_this.fromHistory ){
72                if ( s == true ){
73                    history.pushState( { 'lenta' : true }, null, location.href )
74                } else {
75                    _this.disablePopstate = true;
76                    history.back()
77                }
78            }
79
80            if ( n == 'chat' && !_this.fromHistory ){
81                if ( s == true ){
82                    history.pushState( { 'chat' : true }, null, location.href )
83                } else {
84                    _this.disablePopstate = true;
85
86                    history.back()
87                }
88            }
89            _this.fromHistory = false;
90
91            if ('scrollRestoration' in history) {
92                history.scrollRestoration = 'auto';
93            }
94        } );
95        window.addEventListener( "popstate", function( e ) {
96            if ( !_this.disablePopstate ){
97                _this.fromHistory = true;
98                if ( e.state && e.state.lenta && e.state.lenta === true ) {
99                    _this.changeState( 'lenta', true );
100                } else {
101                    _this.changeState( 'lenta', false );
102                    dataLayer.push({ 'block' : 'lenta_widget', 'event' : 'lenta_close_back' });
103                }
104
105                if ( e.state && e.state.chat && e.state.chat === true ) {
106                    _this.changeState( 'chat', true );
107                } else {
108                    _this.changeState( 'chat', false );
109                    dataLayer.push({ 'block' : 'chat_widget', 'event' : 'chat_close_back' });
110                }
111            }
112            _this.disablePopstate = false;

113        }, false );
114    },
115
116    /** управление прилипанием хедера и размером */
117    headerStatesSwitching : function(){
118        var _this = this,
119            $b = $( '#body' ),
120            limit = $( '#header' ).offset().top + ( $b.hasClass( _this.mod.hBrand ) ? $( '#headerHeight' ).outerHeight() : 0 ) ;
121        this.headerStatesCheck( limit, $b.hasClass( _this.mod.hSticked ), _this.mod.hSticked);
122        this.headerStatesCheck( limit + _this.headerToSmall, $b.hasClass( _this.mod.hSmall ), _this.mod.hSmall);
123    },
124
125    headerStatesCheck : function( limit, flag, cl ){
126        var st = $( window ).scrollTop();
127        if ( st > limit && !flag ) {
128            $( '#body' ).addClass( cl );
129        } else if ( st == 0 || ( st <= limit && flag ) ){
130            $( '#body' ).removeClass( cl );
131        }
132    },
133
134    /** выставление высоты зоны с виджетами */
135    setWidgetsSize: function(){
136        var _this = this,
137            widgetsHeight = '100%',
138            $headerHeight = $( '#headerHeight' );
139
140
141        //console.log( this.getClientWidth() , ' ', $( window ).scrollTop(), " ", $headerHeight.offset().top)
142
143        if ( this.getClientWidth() > 767 && $( window ).scrollTop() < $headerHeight.offset().top ) {
144            widgetsHeight = _this.getViewHeight() - $headerHeight[ 0 ].getBoundingClientRect().top;
145        }
146
147        //console.log('_this.widgetsSize = '+_this.widgetsSize+' $headerHeight = '+ $headerHeight[ 0 ].getBoundingClientRect().top + ' widgetsHeight = '+widgetsHeight);
148
149        if ( _this.widgetsSize != widgetsHeight ) {
150            if ( widgetsHeight < _this.minHeightViewWidgets ) widgetsHeight = 0;
151            $( '#widgetsSize' ).height( widgetsHeight );
152            _this.widgetsSize = widgetsHeight;
153        }
154    },
155
156    widgetsManager: function(){
157        var _this = this,
158            $body = $( 'body' ),
159            _s = _this._state;
160
161        $( window ).on( 'resize', function () {
162            var clientWidth = _this.getClientWidth();
163            /** закрываем виджеты чата или лайв трансляции, если открыта лента */
164            if ( _s.lenta && clientWidth < 768 && ( _s.chat || _s.live ) ) {
165                _this.changeState({
166                    'chat': false,
167                    'live': false
168                });
169            }
170            if ( ( _s.lenta || _s.live || _s.chat ) && !$('#modalLayer').hasClass('m-open') ) {
171                ria.disablePageScroll( clientWidth >= 768 ? false : true );
172            }
173        });
174
175        /** click по body закрывает ленту при разрешении более 768 */
176        $body.on( 'click', function(){
177            if ( _this.getClientWidth() >= 768 &&  _this._state.lenta ) {
178                _this.changeState( 'lenta', false );
179            }
180        });
181
182        $( '#widgetBottom' ).on( 'click', function( e ){
183            if ( _this._state.lenta ) {
184                e.stopPropagation();
185            };
186        });
187
188        $( '.'+_this.button.live ).on( 'click', function(e){
189            e.stopPropagation();
190            e.preventDefault();
191            if ( _this._state.live ) {
192                _this._state.lenta ? _this.changeState( 'lenta', false ) : _this.changeState( 'live', false );
193            } else {
194                _this.changeState({
195                    'lenta': false,
196                    'chat': false,
197                    'live': true
198                });
199            }
200        });
201
202        $( '.'+_this.button.chat ).on( 'click', function( e ){
203            e.stopPropagation();
204            e.preventDefault();
205            if ( _this._state.chat ) {
206                _this._state.lenta ? _this.changeState( 'lenta', false ) : _this.changeState( 'chat', false );
207            } else {
208                _this.changeState({
209                    'lenta': false,
210                    'chat': true,
211                    'live': false
212                });
213            }
214        });
215
216        $( '.'+_this.button.lenta ).on( 'click', function( e ){
217            e.stopPropagation();
218            e.preventDefault();
219            _this._state.lenta ? _this.changeState( 'lenta', false ) : _this.changeState( 'lenta', true );
220        });
221
222        $( '.'+_this.button.all ).on( 'click', function( e ){
223            e.stopPropagation();
224            e.preventDefault();
225            _this.changeState({
226                'lenta': false,
227                'chat': false,
228                'live': false
229            });
230        });
231
232    },
233
234    /** Отключение pull to reload посредством html { overflow:hidden } при открытии чата
235     * #RIA2018-755
236     * стало не нужным всвязи с обновой Хрома - оставили прозапас */
237    disablePullToReload: function( allow ){
238        if ( this.isMobile && ( allow === true || this._state.lenta || this._state.chat || this._state.live ) && this.getClientWidth() < 768 ){
239            $( 'html' ).addClass( this.notPullToReload );
240            this._state.notPull = true;
241        } else if ( allow === false || ( !this._state.lenta || !this._state.chat || !this._state.live ) ){
242            $( 'html' ).removeClass( this.notPullToReload );
243            this._state.notPull = false;

244        }
245    },
246
247    changeState: function( n, s ) {
248        var _this = this;
249        if ( $.isPlainObject( n ) || ( typeof n == "string" && typeof s == "boolean" )  ) {
250            var is_state = false,
251                obj = {};
252            if ( $.isPlainObject( n ) ) {
253                obj = n;
254            } else {
255                obj[n] = s;
256            }
257            $.each( obj , function( k, v ){
258                if ( _this._state[ k ] != v ) _this.setState( k, v );
259                if ( v ) is_state = true;
260            });
261
262            if ( _this.getClientWidth() < 768 ) ria.disablePageScroll( is_state );
263        } else {
264            return false
265        }
266        /*TODO test */ //console.log(_this._state);
267    },
268
269    setState: function( n, s ){
270        var _this = this;
271        if ( typeof n == "string" && typeof s == "boolean") {
272            if ( s ) {
273                _this._state[ n ] = true;
274                $( 'body' ).addClass( _this.mod[ n ] );
275            } else {
276                _this._state[ n ] = false;
277                $( 'body' ).removeClass( _this.mod[ n ] );
278            }
279            $( 'body' ).trigger( 'widget', [ n, s ] );
280        } else {
281            return false;
282        }
283    },
284
285    /**
286     * получение ширины контентной области клиента
287     * @returns {Number} size
288     */
289    getViewWidth: function(){
290        var $viewSize = $('#jsViewSize');
291        return $viewSize.length > 0 ? parseInt($viewSize.width()) : this.getClientWidth();
292    },
293    /**
294     * получение высоты контентной области клиента
295     * @returns {Number} size
296     */
297    getViewHeight: function(){
298        var $viewSize = $('#jsViewSize');
299        return $viewSize.length > 0 ? parseInt($viewSize.height()) : this.getClientHeigth();
300    },
301    /**
302     * получение ширины окна клиента
303     * @returns {Number} size
304     */
305    getClientWidth: function(){
306        return Math.max(window.innerWidth || 0, (document.getElementsByTagName('html')[0] || {}).clientWidth || 0)
307    },
308    /**
309     * получение высоты окна клиента
310     * @returns {Number} size
311     */
312    getClientHeigth: function(){
313        return  Math.max(window.innerHeight || 0, (document.getElementsByTagName('html')[0] || {}).clientHeight || 0)
314    }
315};
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338