https://pixofun.com/content/onepress-plus.js

1
2(function($, window, undefined) {
3
4    $.fn.objectFitPolyfill = function(options) {
5
6        // If the browser does support object-fit, we don't need to continue
7        if ('objectFit' in document.documentElement.style !== false) {
8           return;
9        }
10
11        // Setup options
12        var settings = $.extend({
13            "fit": "cover",
14            "fixContainer": false,
15        }, options);
16
17        return this.each(function() {
18
19            var $image = $(this);
20            var $container = $image.parent();
21
22            var coverAndPosition = function() {
23                // If necessary, make the parent container work with absolutely positioned elements
24                if (settings.fixContainer) {
25                    $container.css({
26                        "position": "relative",
27                        "overflow": "hidden",
28                    });
29                }
30
31                // Mathematically figure out which side needs covering, and add CSS positioning & centering
32                $image.css({
33                    "position": "absolute",
34                    "height": $container.outerHeight(),
35                    "width": "auto"
36                });
37
38                if (
39                    settings.fit === "cover"   && $image.width() < $container.outerWidth() ||
40                    settings.fit === "contain" && $image.width() > $container.outerWidth()
41                ) {
42                    $image.css({
43                        "top": "50%",
44                        "left": 0,
45                        "height": "auto",
46                        "width": $container.outerWidth(),
47                        "marginLeft": 0,
48                    }).css("marginTop", $image.height() / -2);
49                } else {
50                    $image.css({
51                        "top": 0,
52                        "left": "50%",
53                        "marginTop": 0,
54                    }).css("marginLeft", $image.width() / -2);
55                }
56            };
57
58            // Init - wait for the image to be done loading first, otherwise dimensions will return 0
59            $image.on("load", function(){
60                coverAndPosition();
61            });
62            // IE will sometimes get cache-happy and not register onload.
63            coverAndPosition();
64
65            // Recalculate widths & heights on window resize
66            $(window).resize(function() {
67                coverAndPosition();
68            });
69
70        });
71
72    };
73
74})(jQuery, window);
75
76
77jQuery( document ).ready( function( $ ){
78
79    var isMobile = {
80        Android: function() {
81            return navigator.userAgent.match(/Android/i);
82        },
83        BlackBerry: function() {
84            return navigator.userAgent.match(/BlackBerry/i);
85        },
86        iOS: function() {
87            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
88        },
89        Opera: function() {
90            return navigator.userAgent.match(/Opera Mini/i);
91        },
92        Windows: function() {
93            return navigator.userAgent.match(/IEMobile/i);
94        },
95        any: function() {
96            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
97        }
98    };
99    var is_mobile =  isMobile.any();
100    /**
101     * Section video
102     */
103    $( '.video-section').each( function(){
104        var $s = $( this);
105        var fallback = $s.attr( 'data-fallback' ) || 'true';
106        var bg = $s.attr('data-bg') || '';
107        if ( is_mobile && bg !== '' && fallback !== 'false' ) {
108            if ( bg ) {
109                $( '.fill-width', $s).remove();
110                $s.addClass( 'video-bg' );
111                $s.css( 'backgroundImage', "url('"+bg+"')" );
112                $s.find( '.hero-slideshow-wrapper' ).addClass( 'loaded');
113                $s.find( '.slider-spinner').remove();
114            }
115        } else {
116            var video_mp4   = $s.attr('data-mp4')  || '',
117                video_webm  = $s.attr('data-webm') || '',
118                video_ogv   = $s.attr('data-ogv')  || '';
119
120            if ( video_mp4 || video_webm || video_ogv ) {

121                var $v = $( '<video autoplay loop muted id="hero-video-player" class="fill-width">' );
122                $s.prepend( $v );
123                var obj = document.getElementById('hero-video-player');
124                obj.addEventListener('loadeddata', function() {
125                    if( obj.readyState >= 1 ) {
126                        $s.find( '.hero-slideshow-wrapper' ).addClass( 'loaded');
127                        $s.find( '.slider-spinner').remove();
128                    }
129                });
130                $v.html( OnePress_Plus.browser_warning );
131                if ( video_mp4 ) {
132                    $v.append( $( ' <source type="video/mp4"/>' ).attr( 'src', video_mp4 ) );
133                }
134                if ( video_webm ) {
135                    $v.append( $( ' <source type="video/webm"/>' ).attr( 'src', video_webm ) );
136                }
137                if ( video_ogv ) {
138                    $v.append( $( ' <source type="video/ogv"/>' ).attr( 'src', video_ogv ) );
139                }
140
141                $v.objectFitPolyfill();
142            }
143        }
144
145    } );
146
147    function pauseAllVideos()
148    {
149        if ( ! is_mobile ) {
150            $('.section-projects iframe').each(function () {
151                this.src = this.src; //causes a reload so it stops playing, music, video, etc.
152            });
153        }
154    }
155
156
157    /**
158     * Section map
159     *
160     */
161
162    $( '.onepress-map').each( function() {
163        var mapArea = $( this )[0];
164
165        var data =  $( this ).data( 'map' );
166        if ( ! data ) {
167            return ;
168        }
169        var settings = $.extend( {}, {
170            'lat': false,
171            'long' : false,
172            'zoom' : 10,
173            'maker' : '',
174            'maker_w' : '',
175            'maker_h' : '',
176            'color' : '',
177            'html' : '',
178            'address' : '',
179            'items_address' : {},
180            'scrollwheel' : false,
181        }, data );
182
183
184        var center = {};
185        var html = '';
186        var centerIcon = null;
187        var infowindow = null;
188
189        if ( settings.lat && settings.long ) {
190            center.lat = settings.lat;
191            center.lng = settings.long;
192        }
193
194        var mapOptions = {
195            zoom: settings.zoom || 12,
196            center: center,
197            controls: {
198                panControl: true,
199                zoomControl: true,
200                mapTypeControl: true,
201                scaleControl: true,
202                streetViewControl: true,
203                overviewMapControl: true
204            },
205            scrollwheel: settings.scrollwheel,
206            maptype: 'ROADMAP',
207        };
208        var map = new google.maps.Map( mapArea, mapOptions  );
209
210        if ( settings.color != '' ) {
211            var styles = [
212                {
213                    stylers: [
214                        {hue: settings.color },
215                        // {saturation: -20}
216                    ]
217                }, {
218                    featureType: "road",
219                    elementType: "geometry",
220                    stylers: [
221                        {lightness: 40},
222                        {visibility: "simplified"}
223                    ]
224
225                }
226            ];
227
228            map.set( 'styles', styles );
229        }
230
231
232        if ( settings.maker ) {
233
234            var iconsize = [64, 64], iconanchor = [32, 64];
235            if ( settings.maker_w && settings.maker_h ) {
236                iconsize = [ settings.maker_w, settings.maker_h ];
237                iconanchor = [ settings.maker_w / 2, settings.maker_h ];
238            }
239
240            centerIcon =  {
241                url: settings.maker,
242                size: new google.maps.Size(iconsize[0], iconsize[1]),
243                anchor: new google.maps.Point(iconanchor[0], iconanchor[1])
244            };
245
246        }
247
248        if ( settings.address ) {
249            html +='<div class="map-address">'+settings.address+'</div>';
250        }
251
252        if ( settings.html ) {
253            html +='<div class="map-extra-info">'+settings.html+'<div>';
254        }
255
256        if ( html ) {
257            infowindow = new google.maps.InfoWindow({
258                content: '<div class="gmap_marker">'+html+'</div>'
259            });
260
261            var marker = new google.maps.Marker({
262                position: center,
263                map: map,
264                title: null,
265                icon:centerIcon
266            });
267        }
268
269        marker.addListener('click', function () {
270            infowindow.open(map, marker);
271        });
272
273        // List address
274        if ( settings.items_address && settings.items_address.length ) {
275
276            $.each( settings.items_address, function( index, address ){
277                var _html = '';
278                if ( address.address ) {
279                    _html +='<div class="map-address ">'+address.address+'</div>';
280                }
281
282                if ( address.desc ) {
283                    _html +='<div class="map-extra-info">'+address.desc+'<div>';
284                }
285
286                var pos = {};
287                pos.lat = address.lat;
288                pos.lng = address.long;
289                var icon;
290
291                if( address.maker ){
292
293                    var _iconsize = [64, 64], _iconanchor = [32, 64];
294                    if ( address.h && address.w ) {
295                        _iconsize = [ address.w, address.h ];
296                        _iconanchor = [ address.w / 2, address.h ];
297                    }
298
299                    icon = {
300                        url: address.maker,
301                        size: new google.maps.Size(_iconsize[0], _iconsize[1]),
302                        anchor: new google.maps.Point(_iconanchor[0], _iconanchor[1])
303                    };
304                } else if ( centerIcon ) {
305                    icon = centerIcon;
306                } else {
307                    icon = null;
308                }
309
310                var _marker = new google.maps.Marker({
311                    position: pos,
312                    map: map,
313                    title: null,
314                    icon: icon
315                });
316
317                var _infowindow = new google.maps.InfoWindow({
318                    content: '<div class="gmap_marker">'+_html+'</div>'
319                });
320
321                _marker.addListener('click', function () {
322                    _infowindow.open( map, _marker);
323                });
324
325            } );
326        }
327
328    });

329
330
331    /**
332     * Projects section
333     */
334    $( '.project-wrapper').each( function(){
335        var wrapper =  $( this );
336        var wrapperWidth = wrapper.width();
337
338
339        var calcItemIndex = function( numcol, currentIndex ){
340            if ( numcol <= 1 ) {
341                return currentIndex;
342            }
343            var c = 0;
344            var nextIndex = 0;
345            $( '.project-item', wrapper ).each(  function( i ){
346                if ( c == numcol - 1 ) {
347                    if ( nextIndex <= 0 ) {
348                        if (i >= currentIndex) {
349                            nextIndex = currentIndex + ( i - currentIndex ) ;
350                        }
351                    }
352                    c = 0;
353                } else {
354                    c ++;
355                }
356            });
357            return nextIndex ? nextIndex : currentIndex;
358        };
359        var closeAllProjects = function( not_id ){
360            if ( ! is_mobile ) {
361                $( '> .project-detail', wrapper ).each( function(){
362                    var details = $( this );
363                    var id = details.data( 'id' );
364                    if ( typeof not_id === "undefined" || id != not_id ) {
365                        var pr  = $( '.project-item[data-id="'+id+'"]');
366                        details.removeClass( 'active opening' );
367                        pr.removeClass( 'active' );
368                        pr.append( details );
369                    }
370                } );
371            }
372        };
373
374        $( window ).resize( function(){
375            wrapperWidth = wrapper.width();
376            closeAllProjects();
377        } );
378
379        var l = $( '.project-item.is-ajax', wrapper ).length;
380
381        $( '.project-item.is-ajax', wrapper ).each(  function( projectIndex ){
382            var project = $( this );
383            project.data( 'index', projectIndex );
384
385            project.on( 'click', function( e ){
386                e.preventDefault();
387
388                if ( project.hasClass( 'opening' ) ) {
389                    return false;
390                }
391
392                project.addClass( 'opening' );
393

394                var numcol = Math.round( wrapperWidth/ project.width() );
395                var insertAfterIndex;
396                if ( numcol > l ) {
397                    insertAfterIndex = l -1;
398                } else {
399                    insertAfterIndex = calcItemIndex( numcol, projectIndex );
400                }
401
402                var insertAfter = $( '.project-item', wrapper).eq( insertAfterIndex );
403                if ( insertAfter.length <= 0 ) {
404                    insertAfter = project.next();
405                }
406
407                var projectDetails = null;
408                pauseAllVideos();
409                var  post_id =  project.data( 'id' ) || '';
410
411                closeAllProjects( post_id );
412                if ( project.hasClass( 'active' ) ) {
413                    project.removeClass('active').css( 'height', 'auto' );
414                    project.removeClass( 'loading').find( '.project-thumb').find( '.spinner' ).remove();
415                } else {
416                    project.addClass( 'loading').find( '.project-thumb').append( '<div class="spinner">' );
417                    if ( $( '.project-expander', project ).length  > 0 ) {
418                        project.addClass( 'active' );
419                        project.removeClass( 'loading').find( '.spinner').remove();
420                        projectDetails = $( '#project-details-id-'+post_id );
421                        projectDetails.insertAfter( insertAfter );
422                        setTimeout( function(){
423                            projectDetails.addClass( 'active' );
424                            project.removeClass( 'opening' );
425                        }, 50 );
426
427                    } else {
428                        if (  post_id ) {
429                            $.ajax( {
430                                url: OnePress_Plus.ajax_url,
431                                data: { action: 'onepress_plus_ajax', onepress_ajax_action: 'load_portfolio_details', post_id: post_id },
432                                dataType: 'json',
433                                type: 'post',
434                                success:  function( data ){
435                                    if( data.success ) {
436                                        // Close all open projects before
437                                        closeAllProjects( post_id );
438                                        var c = $(  data.data );
439                                        project.append( c );
440                                        project.imagesLoaded(function () {
441                                            // Gather all videos
442                                            project.addClass( 'active' );
443                                            project.removeClass( 'loading').find( '.spinner').remove();
444                                            var $all_videos = c.find( 'iframe[src*="player.vimeo.com"], iframe[src*="youtube.com"], iframe[src*="youtube-nocookie.com"], iframe[src*="dailymotion.com"], iframe[src*="kickstarter.com"][src*="video.html"], object, embed' );
445                                            $all_videos.each( function(){
446                                                var $video = $(this);
447                                                $video.wrap( '<div class="video-rp"/>' );
448                                            } );
449
450                                            projectDetails = $( '#project-details-id-'+post_id );
451                                            projectDetails.insertAfter( insertAfter );
452                                            setTimeout( function(){
453                                                projectDetails.addClass( 'active' );
454                                                project.removeClass( 'opening' );
455                                            }, 50 );
456
457                                        });
458
459                                    }
460                                }
461
462                            });
463                        }
464                    }
465                }
466                $('html, body').animate({
467                    scrollTop: project.offset().top - $( '#masthead').outerHeight() -  $( '#wpadminbar').height() - 30
468                }, 600);
469            } );
470
471
472        } );
473
474
475        $( 'body' ).on( 'click', '.project-detail .project-trigger-close', function( e ){
476            e.preventDefault();
477            var details = $( this).closest( '.project-detail' );
478            var id = details.data( 'id' );
479            var project  = $( '.project-item[data-id="'+id+'"]');
480            details.removeClass( 'active' );
481            project.removeClass( 'active' );
482            pauseAllVideos();
483            $('html, body').animate({
484                scrollTop: project.offset().top - $( '#masthead').outerHeight() -  $( '#wpadminbar').height() - 30
485            }, 600, function(){
486               // $( window ).resize();
487                project.append( project );
488                project.removeClass( 'opening' );
489            });
490
491        } );
492
493    } );
494} );