Merge pull request #1 from sarcastasaur/dev-2.5.0

Dev 2.5.0

admin.php

@@ -1,15 +1,15 @@
 <?php
 /**
 * Plugin Name: Fast Video and Image Display
-* Plugin URI: https://www.linkedin.com/in/sam-perrow-53782b10b?trk=hp-identity-name
+* Plugin URI: https://wordpress.org/plugins/fast-video-and-image-display/
 * Description: Cut seconds off your load time by deferring the loading of YouTube videos and images, which scale automatically for mobile devices.
-* Version: 2.4.5
+* Version: 2.5.0
 * Author: Sam Perrow
-* Author URI: https://www.linkedin.com/in/sam-perrow-53782b10b?trk=hp-identity-name
+* Author URI: https://www.linkedin.com/in/sam-perrow
 * License: GPL2
-* last edited Nov 16, 2017
+* last edited April 3, 2018
 *
-* Copyright 2016  Sam Perrow  (email : [email protected])
+* Copyright 2018  Sam Perrow  (email : [email protected])
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
@@ -23,35 +23,57 @@
 *
 *   You should have received a copy of the GNU General Public License
 *   along with this program; if not, write to the Free Software
- *   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+*   Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 
 // prevent direct file access
 if ( !defined ( 'ABSPATH' ) ) {
 	exit;
 }
 
-define( 'GKT_VIDEO_IMAGE_PLUGIN', __FILE__ );
-define( 'GKT_VIDEO_IMAGE_PLUGIN_DIR', untrailingslashit( dirname( GKT_VIDEO_IMAGE_PLUGIN ) ) );
-require_once GKT_VIDEO_IMAGE_PLUGIN_DIR . '/shortcode-images.php';
-require_once GKT_VIDEO_IMAGE_PLUGIN_DIR . '/shortcode-videos.php';
+define( 'GKTVI_PLUGIN', __FILE__ );
+define( 'GKTVI_PLUGIN_DIR', untrailingslashit( dirname( GKTVI_PLUGIN ) ) );
+
+require_once is_admin() ? GKTVI_PLUGIN_DIR . '/class-gktvi-media-buttons.php' : GKTVI_PLUGIN_DIR . '/class-gktvi-create-shortcodes.php';
+
+
+add_filter( 'plugin_action_links_' . plugin_basename(__FILE__), 'gktvi_set_admin_links' );
+function gktvi_set_admin_links( $links ) {
+	$gktvi_links = array(
+		'<a href="https://github.com/sarcastasaur/fast-video-and-image-display">View on GitHub</a>',
+		'<a href="https://www.paypal.me/samperrow">Donate</a>' );
+	return array_merge( $links, $gktvi_links );
+}
+
 
 // load modal CSS and admin js
 add_action('wp_enqueue_media', 'gkt_load_admin_stuff');
 function gkt_load_admin_stuff() {
-	wp_register_style( 'gkt_formTable_stylesheet', plugin_dir_url(__FILE__) . 'styles.css');
-	wp_register_script( 'gkt_media_button', plugin_dir_url(__FILE__) . 'gkt-media-button.js', array('jquery'), '1.0', true);
+	wp_register_style( 'gkt_formTable_stylesheet', plugin_dir_url(__FILE__) . 'css/admin.css', null, '2.5.0' );
+	wp_register_script( 'gkt_media_button', plugin_dir_url(__FILE__) . 'js/media-button.js', array('jquery'), '2.5.0', true);
 
 	wp_enqueue_style( 'gkt_formTable_stylesheet');
 	wp_enqueue_script('gkt_media_button');
 }
 
 
-add_action('wp_head', 'gktvi_check_jquery', 10, 0);
-function gktvi_check_jquery() {
-	?>
-	<script>if (typeof jQuery == 'undefined' || (!window.jQuery)) {var script = document.createElement('script');script.src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(script);}</script>
+// the two functions below can be switched on or off depending on user preferences. gktvi_load_cssJS_requests() loads the css/js as requests, gktvi_load_cssJS_inline() loads them minified inline.
+// add_action('wp_enqueue_scripts', 'gktvi_load_cssJS_requests');
+function gktvi_load_cssJS_requests() {
+	wp_register_style( 'gktvi_styles', plugin_dir_url(__FILE__) . 'css/styles.css', null, '2.5.0' );
+	wp_register_script( 'gktvi_js', plugin_dir_url(__FILE__) . 'js/execute-shortcodes.js', null, '2.5.0', false);
+
+	wp_enqueue_style( 'gktvi_styles');
+	wp_enqueue_script( 'gktvi_js' );
+}	
+
+
+add_action('wp_head', 'gktvi_load_cssJS_inline', 10, 0);
+function gktvi_load_cssJS_inline() { ?>
+	<style type='text/css'>div.gktviDiv{position:relative}div.gktviDiv img{width:100%;height:100%;max-height:100%;margin:0}iframe.gktviIframe{width:100%;height:100%;margin:0 auto}div.gktviDiv>img:hover,svg.yt-svg:hover{cursor:pointer}path.outer-button{fill:#1f1f1e;fill-opacity:.81}path.outer-button:hover{cursor:pointer;fill:#cc181e;fill-opacity:1}svg.yt-svg{position:absolute;display:block;font:13.33px Arial;z-index:1000;background-color:inherit;border:0;width:15%;height:15%;left:42.5%;right:42.5%;top:42.5%;bottom:42.5%}@media only screen and (max-width:1180px){div.gktviDiv.mobile{width:inherit;max-width:80%!important;height:auto!important;max-height:inherit;margin:0 auto}div.gktviDiv.mobile>img{width:100%;height:auto!important;display:block;margin:0 auto}div.gktviDiv.mobile>iframe{display:block;height:inherit}img.gktviImage.mobile{width:80%;height:auto!important;display:block;margin:0 auto}}</style>
+	<script type='text/javascript'>function gktviChangeSVG(e,t,i){e.style.fill=t,e.style.fillOpacity=i}function gktviCreateElement(e,t,i,l,n,a,d,c){var r=document.createElement(e);return r.id=e+"_"+t,r.src=i,r.className=l,r.style.width=n+"px",r.style.height=a+"px",d&&(r.alt=d),c&&(r.title=c),r}function gktviLoadVideo(e,t,i,l,n,a){var d=document.getElementById("div_"+e),c=document.getElementById("svg_"+e),r=gktviCreateElement("img",e,t,i,n,a);d.appendChild(r);var o=gktviCreateElement("iframe",e,l,i,n,a);o.setAttribute("allowfullscreen",!0),[c,r].forEach(function(e){e.addEventListener("click",function(){replaceThumbWithVideo(o,r),c.style.display="none"})})}function replaceThumbWithVideo(e,t){e.style.width=t.offsetWidth+"px",e.style.height=t.offsetHeight+"px",t.replaceWith(e)}function loadDeferredImage(e,t,i,l,n,a,d){var c=document.getElementById("div_"+e),r=gktviCreateElement("img",e,t,i,a,d,l,n);c.replaceWith(r)}</script>
+
 	<?php
 }
 
-?>
+?>

class-gktvi-create-shortcodes.php

@@ -0,0 +1,76 @@
+<?php
+
+if ( !defined ( 'ABSPATH' ) ) {
+	exit;
+}
+
+class GKTVI_Create_Shortcodes {
+
+	public function __construct() {
+		add_shortcode( 'gkt_sc_images', array( $this, 'create_image_shortcode' ) );
+		add_shortcode( 'gktvideosc', array( $this, 'create_video_shortcode' ) );
+	}
+
+	public function create_video_shortcode( $atts ) {
+
+		$video_shortcode = shortcode_atts( array(
+			'youtube-url' => '',
+			'width' => '',
+			'height' => '',
+			'thumbnail-resolution' => 'mqdefault',
+			'mobile-friendly' => 'yes',
+			'class' => ''
+			), $atts );
+
+		if ( ! empty( $video_shortcode['youtube-url'] ) ) {
+
+			$video_url = $video_shortcode['youtube-url'];
+			$video_id_array = preg_match( "/^(?:http(?:s)?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:.*&)?v(?:i)?=|(?:embed|v|vi|user)\/))([^\?&\"'>]+)/", $video_url, $video_id);
+
+			if ( ! empty( $video_id[1] ) ) {
+
+				$video_id = $video_id[1];
+				$div_class = $video_shortcode['mobile-friendly'] === 'yes' ? 'gktviDiv mobile' : 'gktviDiv';
+				$video_url = 'https://www.youtube.com/embed/' . $video_id . '?autoplay=1&rel=0&autohide=2&border=0&wmode=opaque&enablejsapi=1&playsinline=1&controls=1&showinfo=1';
+				$video_thumbsrc = 'https://i.ytimg.com/vi/' . $video_id . '/' . $video_shortcode['thumbnail-resolution'] . '.jpg';
+				$script = '<script>window.onload=gktviLoadVideo("' . $video_id . '", "' . $video_thumbsrc . '", "' . $video_shortcode['class'] . '", "' . $video_url . '", ' . $video_shortcode['width'] . ', ' . $video_shortcode['height'] . ');</script>';
+
+				$svg = '<svg id="svg_' . $video_id . '"' . ' class="yt-svg" version="1.1" viewBox="0 0 68 48">
+							<path class="outer-button" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z"></path>
+							<path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path>
+							<path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path>
+						</svg>';
+
+				$showRedSvgJS = "gktviChangeSVG(this.getElementsByTagName('path')[0], '#cc181e', '1.0')";
+				$showNormalSvgJS = "gktviChangeSVG(this.getElementsByTagName('path')[0], '#1f1f1e', '0.81')";
+				$style = 'max-width: ' . $video_shortcode['width'] . 'px; width: ' . $video_shortcode['width'] . 'px; max-height: ' . $video_shortcode['height'] . ' px; height: ' . $video_shortcode['height'] . 'px;';
+
+				$newElement = "<div class=\"$div_class\" onmouseover=\"$showRedSvgJS\" onmouseout=\"$showNormalSvgJS\" style=\"$style\" id=\"div_$video_id\">" . $svg . '</div>' . $script;
+
+				return $newElement;
+			}
+		}
+	}
+
+	public function create_image_shortcode( $atts ) {
+
+		$image_shortcode = shortcode_atts(array(
+			'src' => '',
+			'width' => '',
+			'height' => '',
+			'id' => '',
+			'mobile-friendly' => 'yes',
+			'title' => '',
+			'alt' => '',
+			'class' => ''
+			), $atts, 'gkt_image_sc' );
+
+		if ( !empty($image_shortcode['src']) ) {
+			$image_class = $image_shortcode['mobile-friendly'] === 'yes' ? 'gktviImage mobile ' : 'gktviImage ';
+			$script = '<script>window.onload=loadDeferredImage("' . $image_shortcode['id'] . '", "' .  $image_shortcode['src'] . '", "' . $image_class . $image_shortcode['class'] . '", "' .  $image_shortcode['alt'] . '", "' .  $image_shortcode['title'] . '", ' .  $image_shortcode['width'] . ', ' .  $image_shortcode['height'] . ');</script>';
+			return '<div id="div_' . $image_shortcode['id'] . '"></div>' . $script;
+		}
+	}
+}
+
+new GKTVI_Create_Shortcodes();

class-gktvi-media-buttons.php

@@ -0,0 +1,108 @@
+<?php
+
+if ( !defined ( 'ABSPATH' ) ) {
+	exit;
+}
+
+class GKTVI_Media_Buttons {
+
+    public function __construct() {
+        add_action( 'media_buttons', array( $this,'create_media_buttons' ), 15, 2 );
+        add_action( 'media_buttons', array( $this, 'create_video_modal' ), 15, 2 );
+    }
+
+    public function create_media_buttons() { 
+        ?>
+
+        <a href='#' id='gktDeferImage' class='button'>
+            <span style='margin: 3px 5px 0 0;' class='dashicons dashicons-images-alt'></span>Defer Image Load</a>
+
+        <a href='#TB_inline?width=900&amp;height=500&amp;inlineId=gktDeferVideo' id='gktviShowModal' class='thickbox button' title='Enter the YouTube video information to generate a shortcode.'>
+            <span style='margin: 3px 5px 0 0;' class='dashicons dashicons-video-alt3'></span>Defer YouTube Video</a>
+
+    <?php
+    }
+
+    public function create_video_modal() {
+
+        ?>
+        <div class="hidden" id="gktDeferVideo" width="500">
+            <table class="gkt-form-table">
+                <tbody>
+                    <tr>
+                        <td>
+                            <p>YouTube Video URL:</p>
+                        </td>
+                        <td>
+                            <label>
+                                <input type="text" id="gkt-video-url" class="widefat gktvi-element" />
+                            </label>
+                            <i>"https://www.youtube.com/watch?v=sGUNPMPrxvA", for example</i>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p>Video Width (px):</p>
+                        </td>
+                        <td>
+                            <label>
+                                <input size="20" type="text" id="gkt-video-width" class="gktvi-element" />
+                            </label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p>Video Height (px):</p>
+                        </td>
+                        <td>
+                            <label>
+                                <input size="20" type="text" id="gkt-video-height" class="gktvi-element" />
+                            </label>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p>Video Thumbnail Resolution:</p>
+                        </td>
+                        <td>
+                            <select id="gkt-video-res" class="gktvi-element">
+                                <option value="hqdefault">High Quality</option>
+                                <option value="mqdefault">Medium Quality</option>
+                                <option value="sddefault">Standard Quality</option>
+                                <option value="maxresdefault">Maximum Resolution</option>
+                            </select>
+
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p>Mobile Friendly?</p>
+                        </td>
+                        <td>
+                            <select id="gkt-video-mobile" class="gktvi-element">
+                                <option value="yes">yes</option>
+                                <option value="no">no</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <p>Video CSS Class:</p>
+                            <i style="display: block; margin-top: -18px;">(optional)</i>
+                        </td>
+                        <td>
+                            <label>
+                                <input type="text" id="gkt-video-class" class="widefat" class="gktvi-element" />
+                            </label>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <input id='gkt-yt-submit-btn' type='button' class='button button-primary gkt-ytvideo-insert' value='Insert Shortcode' />
+        </div>
+
+        <?php
+    }
+}
+
+new GKTVI_Media_Buttons();

styles.css → css/admin.css

@@ -23,4 +23,4 @@ div#TB_ajaxContent {
 	display: block;
 	margin: 0 auto;
 	width: 125px;
-}
+}

css/styles.css

@@ -0,0 +1,82 @@
+div.gktviDiv {
+    position: relative;
+}
+
+div.gktviDiv img { 
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    margin: 0;
+}
+
+iframe.gktviIframe {
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+}
+
+div.gktviDiv > img:hover,
+svg.yt-svg:hover {
+    cursor: pointer;
+}
+
+path.outer-button {
+    fill: #1f1f1e;
+    fill-opacity: 0.81;
+}
+
+path.outer-button:hover {
+    cursor: pointer;
+    fill: #cc181e;
+    fill-opacity: 1.0;
+}
+
+svg.yt-svg {
+    position: absolute;
+    display: block;
+    font: 13.3333px Arial;
+    z-index: 1000;
+    background-color: inherit;
+    border: 0;
+    width: 15%;
+    height: 15%;
+    left: 42.5%;
+    right: 42.5%;
+    top: 42.5%;
+    bottom: 42.5%;
+}
+
+
+/* mobile stuff below */
+@media only screen and ( max-width: 1180px ) {
+    div.gktviDiv.mobile {
+        width: inherit;
+        max-width: 80% !important;
+        height: auto !important;
+        max-height: inherit;
+        margin: 0 auto; 
+    }
+
+    div.gktviDiv.mobile > img {
+        width: 100%;
+        height: auto !important;
+        display: block;
+        margin: 0 auto;
+    }
+
+    div.gktviDiv.mobile > iframe {
+        display: block;
+        height: inherit;
+    }
+
+}
+
+/* image shortcode mobile CSS below  */
+@media only screen and (max-width: 1180px) {
+    img.gktviImage.mobile {
+        width: 80%;
+        height: auto !important;
+        display: block;
+        margin: 0 auto;
+    }
+}