Responsive Embeds

.gitignore

@@ -24,4 +24,6 @@ cypress/screenshots
 .vscode
 src/pdf-viewer/pdfjs-dist
 report.txt
-.tmp
+.tmp
+src/assets/css/tainacan-embeds.css
+src/assets/css/tainacan-embeds.css.map

compile-sass.sh

@@ -10,7 +10,7 @@ command -v sass >/dev/null 2>&1 || {
 echo "Compilando Sass..."
 cd src/scss
  
-sass -E 'UTF-8' --cache-location ../../.tmp/sass-cache-1 style.scss:../style.css
+sass -E 'UTF-8' --cache-location ../../.tmp/sass-cache-1 tainacan-embeds.scss:../assets/css/tainacan-embeds.css
 
 cd ../admin/scss
 sass -E 'UTF-8' --cache-location ../../../.tmp/sass-cache-2 tainacan-admin.scss:../../assets/css/tainacan-admin.css

src/classes/class-tainacan-embed.php

@@ -21,6 +21,13 @@ class Embed {
 		add_filter('wp_embed_handler_video', [$this, 'filter_video_embed'], 10, 4);
 		add_filter('wp_embed_handler_audio', [$this, 'filter_audio_embed'], 10, 4);
 		
+		/**
+		 * Add responsiveness to embeds
+		 */
+		add_filter('embed_oembed_html', [$this, 'responsive_embed'], 10, 3);
+		add_action( 'admin_enqueue_scripts', array( &$this, 'add_css' ) );
+		add_action( 'wp_enqueue_scripts', array( &$this, 'add_css' ) );
+
 		/**
 		 * ADD PDF Embed handler using PDF.js
 		 * @var [type]
@@ -101,5 +108,24 @@ class Embed {
 		return null;
 		
 	}
-	
+
+
+	/**
+	 * Responsiveness
+	 */
+	public function add_css() {
+		global $TAINACAN_BASE_URL;
+		wp_enqueue_style( 'tainacan-embeds', $TAINACAN_BASE_URL . '/assets/css/tainacan-embeds.css' );
+	}
+	/**
+	 * Adds a responsive embed wrapper around oEmbed content
+	 * @param  string $html The oEmbed markup
+	 * @param  string $url  The URL being embedded
+	 * @param  array  $attr An array of attributes
+	 * @return string       Updated embed markup
+	 */
+	function responsive_embed($html, $url, $attr) {
+		return $html !== '' ? '<div class="tainacan-embed-container">'.$html.'</div>' : '';
+	}
+	 
 }

src/classes/tainacan-creator.php

@@ -123,4 +123,11 @@ $Tainacan_Exposers = \Tainacan\Exposers\Exposers::get_instance();
 
 $Tainacan_Embed = \Tainacan\Embed::get_instance();
 
+require_once(__DIR__ . '/../admin/class-tainacan-admin.php');
+$Tainacan_Admin = \Tainacan\Admin::get_instance();
+
+require_once(__DIR__ . '/../theme-helper/class-tainacan-theme-helper.php');
+require_once(__DIR__ . '/../theme-helper/template-tags.php');
+$Tainacan_Theme_Helper = \Tainacan\Theme_Helper::get_instance();
+
 ?>

src/scss/tainacan-embeds.scss

@@ -0,0 +1,19 @@
+// Styles to be loaded both in admin and front end (theme)
+
+.tainacan-embed-container {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+    max-width: 100%;
+    height: auto;
+
+    iframe, object, embed { 
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

src/tainacan.php

@@ -8,36 +8,26 @@ Version: 0.1
 */
 
 defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
-
 $TAINACAN_BASE_URL = plugins_url('', __FILE__);
-
 const TAINACAN_API_DIR     = __DIR__ . '/api/';
 const TAINACAN_CLASSES_DIR = __DIR__ . '/classes/';
-
 require_once(TAINACAN_CLASSES_DIR . 'tainacan-creator.php');
 require_once(TAINACAN_API_DIR     . 'tainacan-rest-creator.php');
 
+// DEV Interface, used for debugging
 require_once('dev-interface/class-tainacan-dev-interface.php');
+function tnc_enable_dev_wp_interface() {
+    return defined('TNC_ENABLE_DEV_WP_INTERFACE') && true === TNC_ENABLE_DEV_WP_INTERFACE ? true : false;
+}
 if ( tnc_enable_dev_wp_interface() ) {
 	$Tainacan_Dev_interface = \Tainacan\DevInterface\DevInterface::get_instance();
 }
 
-function tnc_enable_dev_wp_interface() {
-    return defined('TNC_ENABLE_DEV_WP_INTERFACE') && true === TNC_ENABLE_DEV_WP_INTERFACE ? true : false;
-}
-
-$Tainacan_Capabilities = \Tainacan\Capabilities::get_instance();
-register_activation_hook( __FILE__, array( $Tainacan_Capabilities, 'init' ) );
-
-// TODO move it somewhere else?
-require_once('admin/class-tainacan-admin.php');
-$Tainacan_Admin = \Tainacan\Admin::get_instance();
-
-require_once('theme-helper/class-tainacan-theme-helper.php');
-require_once('theme-helper/template-tags.php');
-$Tainacan_Admin = \Tainacan\Theme_Helper::get_instance();
-
 function tainacan_load_plugin_textdomain() {
     load_plugin_textdomain( 'tainacan', FALSE, basename( dirname( __FILE__ ) ) . '/languages/' );
 }
-add_action( 'plugins_loaded', 'tainacan_load_plugin_textdomain' );
+add_action( 'plugins_loaded', 'tainacan_load_plugin_textdomain' );
+
+
+$Tainacan_Capabilities = \Tainacan\Capabilities::get_instance();
+register_activation_hook( __FILE__, array( $Tainacan_Capabilities, 'init' ) );