Skip to content

Commit

Permalink
2.6 Added AMP Support.
Browse files Browse the repository at this point in the history
  • Loading branch information
milindmore22 committed Dec 13, 2020
1 parent 81f48a4 commit 575c8d3
Show file tree
Hide file tree
Showing 7 changed files with 219 additions and 153 deletions.
14 changes: 14 additions & 0 deletions css/youtubefancybox-amp.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/*
* The File contains AMP specific CSS
*/
.youtubefancybox-amp-lightbox {
background: rgba(0,0,0,0.8);
width: 80%;
height: 80%;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 10%;
top:10%;
}
30 changes: 13 additions & 17 deletions js/caller.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
jQuery(document).ready(function(){
jQuery(".youtube").colorbox(
{
iframe:true,
width:"80%",
height:"80%"
}
);

jQuery(".vimeo").colorbox(
{
iframe:true,
width:"80%",
height:"80%"
}
);
});
jQuery(document).ready(function( $ ){
$ ('.youtube').colorbox( {
iframe:true,
width:'80%',
height:'80%'
} );

$ ('.vimeo').colorbox( {
iframe:true,
width:'80%',
height:'80%'
} );
});
171 changes: 89 additions & 82 deletions js/fancybox_admin.js
Original file line number Diff line number Diff line change
@@ -1,82 +1,89 @@
jQuery( document ).ready( function () {
/**
* Generate shortcode for Youtube
*/
jQuery( "#genrate" ).click( function () {
var url = jQuery( "#youtubeurl" ).val();
var height = jQuery( "#t_height" ).val();
var width = jQuery( "#t_width" ).val();
if ( url ) {
var videoid = youtube_parser( url );
var str = '[youtube videoid="' + videoid + '"';

if ( height ) {
str += ' height="' + height + '"';
}
if ( width ) {
str += ' width="' + width + '"';
}
str += ']';
}
if ( videoid ) {
jQuery( "#shortcode" ).val( str );
jQuery( "#shortcode" ).select();
}
} );
/**
* Select Shortcode on click
**/
jQuery( "#shortcode" ).click( function () {
jQuery( "#shortcode" ).select();
} );

/**
* Genrate shortcode for Viemo videos
**/
jQuery( "#genratevimeo" ).click( function () {
var url = jQuery( "#vimeourl" ).val();
var height = jQuery( "#t_height" ).val();
var width = jQuery( "#t_width" ).val();
if ( url ) {
var videoid = vimeo_parser( url );
var str = '[vimeo videoid="' + videoid + '"';

if ( height ) {
str += ' height="' + height + '"';
}
if ( width ) {
str += ' width="' + width + '"';
}
str += ']';
}
if ( videoid ) {
jQuery( "#shortcode" ).val( str );
jQuery( "#shortcode" ).select();
}
} );
} );
/**
* function for gets youtube id from url
**/
function youtube_parser( url ) {
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var match = url.match( regExp );
if ( match && match[7].length == 11 ) {
return match[7];
} else {
alert( fancybox_admin_obj.youtube_alert );
}
}
/**
* Functin gets viemo id from url
* @returns {undefined}
*/
function vimeo_parser( url ) {
var regExp = /^.*(www\.)?vimeo.com\/(\d+)($|\/)/;
var match = url.match( regExp );
if ( match ) {
return match[2];
} else {
alert( fancybox_admin_obj.viemo_alert );
}
}
/**
* Admin Scripts for Youtube Fancybox.
*/

jQuery( document ).ready( function ( $ ) {
/**
* Generate shortcode for Youtube
*/
$( document ).on( 'click', '#genrate', function () {
var url = $( '#youtubeurl' ).val();
var height = $( '#t_height' ).val();
var width = $( '#t_width' ).val();
if ( url ) {
var videoid = youtube_parser( url );
var str = '[youtube videoid="' + videoid + '"';

if ( height ) {
str += ' height="' + height + '"';
}
if ( width ) {
str += ' width="' + width + '"';
}
str += ']';
}
if ( videoid ) {
$( '#shortcode' ).val( str );
$( '#shortcode' ).trigger( 'select' );
}
} );

/**
* Select Shortcode on click
**/
$( document ).on( 'click', '#shortcode', function () {
$( "#shortcode" ).trigger( 'select' );
} );

/**
* Genrate shortcode for Viemo videos
**/
$( document ).on( 'click', '#genratevimeo', function () {
var url = $( '#vimeourl' ).val();
var height = $( '#t_height' ).val();
var width = $( '#t_width' ).val();
if ( url ) {
var videoid = vimeo_parser( url );
var str = '[vimeo videoid="' + videoid + '"';

if ( height ) {
str += ' height="' + height + '"';
}
if ( width ) {
str += ' width="' + width + '"';
}
str += ']';
}
if ( videoid ) {
$( '#shortcode' ).val( str );
$( '#shortcode' ).trigger( 'select' );
}
} );
} );

/**
* function for gets youtube id from url
**/
function youtube_parser( url ) {
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var match = url.match( regExp );
if ( match && match[7].length == 11 ) {
return match[7];
} else {
alert( fancybox_admin_obj.youtube_alert );
}
}

/**
* Functin gets viemo id from url
* @returns {undefined}
*/
function vimeo_parser( url ) {
var regExp = /^.*(www\.)?vimeo.com\/(\d+)($|\/)/;
var match = url.match( regExp );
if ( match ) {
return match[2];
} else {
alert( fancybox_admin_obj.viemo_alert );
}
}
29 changes: 21 additions & 8 deletions lib/class-vimeo.php
Original file line number Diff line number Diff line change
Expand Up @@ -125,15 +125,13 @@ public function vimeofancybox_url( $attr ) {
}
}

if ( get_option( 'autoplay' ) ) {
$autoplay = get_option( 'autoplay' );
if ( 'yes' === $autoplay ) {
$autoplay = 'autoplay=1&muted=1';
} else {
$autoplay = 'autoplay=0&muted=0';
}
$autoplay = 'autoplay=1&muted=1';
$autoplay_option = get_option( 'autoplay' );

if ( ! empty( $autoplay_option ) && 'yes' === $autoplay_option ) {
$autoplay = 'autoplay=1&muted=0';
} else {
$autoplay = 'autoplay=1&muted=1';
$autoplay = 'autoplay=0&muted=0';
}

if ( empty( $attr['videoid'] ) ) {
Expand Down Expand Up @@ -165,6 +163,21 @@ public function vimeofancybox_url( $attr ) {
}

ob_start();
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {

$light_box_id = wp_unique_id( 'youtubefancybox-vimeo-lightbox-' );
?>
<amp-lightbox id="<?php echo esc_attr( $light_box_id ); ?>" layout="nodisplay">
<div class="youtubefancybox-amp-lightbox" role="button" tabindex="0">
<amp-vimeo width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="fill" data-videoid="<?php echo esc_attr( $attr['videoid'] ); ?>" <?php echo ( ! empty( $autoplay_option ) && 'yes' === $autoplay_option ) ? 'autoplay' : ''; ?>>
</amp-vimeo>
</div>
</amp-lightbox>
<amp-img on="tap:<?php echo esc_attr( $light_box_id ); ?>" src="<?php echo esc_url( $thumbnail_url ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="responsive">
</amp-img>
<?php
return ob_get_clean();
}
?>
<a class="vimeo" href="<?php echo esc_url( $embed_url ); ?>">
<img src="<?php echo esc_url( $thumbnail_url ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>"/>
Expand Down
31 changes: 22 additions & 9 deletions lib/class-youtube.php
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,13 @@ public function youtubefancybox_url( $attr ) {
}
}

$autoplay = get_option( 'autoplay' );
if ( ! empty( $autoplay ) ) {
if ( 'yes' === $autoplay ) {
$autoplay = 'autoplay=1&mute=1';
} else {
$autoplay = 'autoplay=0&mute=0';
}
$autoplay = 'autoplay=1&muted=1';
$autoplay_option = get_option( 'autoplay' );

if ( ! empty( $autoplay_option ) && 'yes' === $autoplay_option ) {
$autoplay = 'autoplay=1&muted=1';
} else {
$autoplay = 'autoplay=1&mute=0';
$autoplay = 'autoplay=0&muted=0';
}

if ( empty( $attr['videoid'] ) ) {
Expand All @@ -95,7 +93,22 @@ public function youtubefancybox_url( $attr ) {

}

ob_start();
ob_start();

if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
$light_box_id = wp_unique_id( 'youtubefancybox-youtube-lightbox-' );
?>
<amp-lightbox id="<?php echo esc_attr( $light_box_id ); ?>" layout="nodisplay">
<div class="youtubefancybox-amp-lightbox" role="button" tabindex="0">
<amp-youtube width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="fill" data-videoid="<?php echo esc_attr( $attr['videoid'] ); ?>" <?php echo ( ! empty( $autoplay_option ) && 'yes' === $autoplay_option ) ? 'autoplay' : ''; ?>>
</amp-youtube>
</div>
</amp-lightbox>
<amp-img on="tap:<?php echo esc_attr( $light_box_id ); ?>" src="<?php echo esc_url( $embed_image ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="responsive">
</amp-img>
<?php
return ob_get_clean();
}
?>
<a class="youtube" href="<?php echo esc_url( $embed_url ); ?>">
<img src="<?php echo esc_url( $embed_image ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" />
Expand Down
Loading

0 comments on commit 575c8d3

Please sign in to comment.