diff --git a/js/instagram.js b/js/instagram.js new file mode 100644 index 0000000..4e3c0e9 --- /dev/null +++ b/js/instagram.js @@ -0,0 +1,24 @@ +/** + * @file + */ + +(function ($, Drupal) { + "use strict"; + + Drupal.behaviors.instagramMediaEntity = { + attach: function (context) { + + var fixIg = function () { + $('iframe[src*="instagram.com"]').responsiveInstagram(); + }; + $(document).on('ready', function () { + fixIg(); + }); + $(window).on('load resize',function () { + fixIg(); + }); + + } + }; + +})(jQuery, Drupal); diff --git a/js/jquery.responsiveinstagram.min.js b/js/jquery.responsiveinstagram.min.js new file mode 100644 index 0000000..71d3778 --- /dev/null +++ b/js/jquery.responsiveinstagram.min.js @@ -0,0 +1 @@ +!function(a){jQuery.fn.responsiveInstagram=function(b){var c,d,e,f=a(this),g=a(window).width();return e={width:610,extraHeight:80,breakpoint:620},b=a.extend(e,b),g<=b.breakpoint?f.css("width","100%"):f.css("width",b.width.toString(10)+"px"),c=f.width(),d=Math.round(c+b.extraHeight),f.css("height",d.toString(10)+"px"),this}}(jQuery); diff --git a/media_entity_instagram.libraries.yml b/media_entity_instagram.libraries.yml new file mode 100644 index 0000000..1aef3ce --- /dev/null +++ b/media_entity_instagram.libraries.yml @@ -0,0 +1,16 @@ +integration: + version: VERSION + js: + 'js/instagram.js': {} + dependencies: + - core/drupal + - core/jquery + - media_entity_instagram/responsive + +responsive: + version: VERSION + js: + 'js/jquery.responsiveinstagram.min.js': { minified: true } + dependencies: + - core/jquery + diff --git a/src/Plugin/Field/FieldFormatter/InstagramEmbedFormatter.php b/src/Plugin/Field/FieldFormatter/InstagramEmbedFormatter.php index ea86b38..b16c427 100644 --- a/src/Plugin/Field/FieldFormatter/InstagramEmbedFormatter.php +++ b/src/Plugin/Field/FieldFormatter/InstagramEmbedFormatter.php @@ -47,10 +47,20 @@ class InstagramEmbedFormatter extends FormatterBase { 'position' => 'absolute', 'scrolling' => 'no', 'src' => '//instagram.com/p/' . $matches['shortcode'] . '/embed/', - 'width' => $settings['width'], - 'height' => $settings['height'], ], ]; + + if (!isset($settings['width']) || !isset($settings['height'])) { + $element[$delta]['#attached']['library'][] = 'media_entity_instagram/integration'; + } + + if (isset($settings['width'])) { + $element[$delta]['#attributes']['width'] = $settings['width']; + } + + if (isset($settings['height'])) { + $element[$delta]['#attributes']['height'] = $settings['height']; + } } } @@ -62,8 +72,8 @@ class InstagramEmbedFormatter extends FormatterBase { */ public static function defaultSettings() { return array( - 'width' => '480', - 'height' => '640', + 'width' => NULL, + 'height' => NULL, ) + parent::defaultSettings(); } @@ -78,7 +88,7 @@ class InstagramEmbedFormatter extends FormatterBase { '#title' => $this->t('Width'), '#default_value' => $this->getSetting('width'), '#min' => 1, - '#description' => $this->t('Width of instagram.'), + '#description' => $this->t('Width of instagram. Leave empty for responsive embed.'), ); $elements['height'] = array( @@ -86,7 +96,7 @@ class InstagramEmbedFormatter extends FormatterBase { '#title' => $this->t('Height'), '#default_value' => $this->getSetting('height'), '#min' => 1, - '#description' => $this->t('Height of instagram.'), + '#description' => $this->t('Height of instagram. Leave empty for responsive embed.'), ); return $elements; @@ -96,14 +106,16 @@ class InstagramEmbedFormatter extends FormatterBase { * {@inheritdoc} */ public function settingsSummary() { - return [ - $this->t('Width: @width px', [ - '@width' => $this->getSetting('width'), - ]), - $this->t('Height: @height px', [ - '@height' => $this->getSetting('height'), - ]), - ]; + $settings = $this->getSettings(); + if (!isset($settings['width']) || !isset($settings['height'])) { + return [$this->t('Responsive size.')]; + } + else { + return [ + $this->t('Width: @width px', ['@width' => $settings['width']]), + $this->t('Height: @height px', ['@height' => $settings['height']]), + ]; + } } } diff --git a/src/Plugin/MediaEntity/Type/Instagram.php b/src/Plugin/MediaEntity/Type/Instagram.php index 04e3756..936cbe1 100644 --- a/src/Plugin/MediaEntity/Type/Instagram.php +++ b/src/Plugin/MediaEntity/Type/Instagram.php @@ -342,7 +342,6 @@ class Instagram extends MediaTypeBase { public function getDefaultName(MediaInterface $media) { // Try to get some fields that need the API, if not available, just use the // shortcode as default name. - $username = $this->getField($media, 'username'); $id = $this->getField($media, 'id'); if ($username && $id) { diff --git a/src/Tests/InstagramEmbedFormatterTest.php b/src/Tests/InstagramEmbedFormatterTest.php index 032aeea..784616d 100644 --- a/src/Tests/InstagramEmbedFormatterTest.php +++ b/src/Tests/InstagramEmbedFormatterTest.php @@ -12,8 +12,6 @@ use Drupal\media_entity\Tests\MediaTestTrait; */ class InstagramEmbedFormatterTest extends WebTestBase { - use MediaTestTrait; - /** * Modules to enable. * @@ -28,6 +26,8 @@ class InstagramEmbedFormatterTest extends WebTestBase { 'block', ); + use MediaTestTrait; + /** * The test user. * @@ -138,6 +138,18 @@ class InstagramEmbedFormatterTest extends WebTestBase { $this->drupalPostForm(NULL, $edit, t('Save')); $this->assertText('Your settings have been saved.'); + // First set absolute size of the embed. + $this->drupalPostAjaxForm(NULL, [], 'field_embed_code_settings_edit'); + $edit = [ + 'fields[field_embed_code][settings_edit_form][settings][width]' => '400', + 'fields[field_embed_code][settings_edit_form][settings][height]' => '400', + ]; + $this->drupalPostAjaxForm(NULL, $edit, 'field_embed_code_plugin_settings_update'); + $this->drupalPostForm(NULL, [], t('Save')); + $this->assertText('Your settings have been saved.'); + $this->assertText('Width: 400 px'); + $this->assertText('Height: 400 px'); + // Create and save the media with an instagram media code. $this->drupalGet('media/add/' . $bundle->id()); @@ -154,8 +166,27 @@ class InstagramEmbedFormatterTest extends WebTestBase { $this->assertText('Title'); $this->assertText('Embed code'); - // Assert that the formatter exists on this page. - $this->assertFieldByXPath('//iframe'); + // Assert that the formatter exists on this page and that it has absolute + // size. + $this->assertFieldByXPath('//iframe[@width="400" and @height="400"]'); + $this->assertNoRaw('platform.instagram.com/en_US/embeds.js'); + + // Now try to set formatter to embed in the responsive mode. + $this->drupalGet('admin/structure/media/manage/' . $bundle->id() . '/display'); + $this->drupalPostAjaxForm(NULL, [], "field_embed_code_settings_edit"); + $edit = [ + 'fields[field_embed_code][settings_edit_form][settings][width]' => '', + 'fields[field_embed_code][settings_edit_form][settings][height]' => '', + ]; + $this->drupalPostAjaxForm(NULL, $edit, "field_embed_code_plugin_settings_update"); + $this->drupalPostForm(NULL, [], t('Save')); + $this->assertText('Your settings have been saved.'); + $this->assertText('Responsive size'); + + // Check if the embed appears in responsive mode. + $this->drupalGet('media/1'); + $this->assertRaw('instagram.js'); + $this->assertRaw('jquery.responsiveinstagram.min.js'); } }