ndla-article-scripts - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

es/iframeScripts.js

@@ -10,6 +10,28 @@ /**
 export var updateIFrameDimensions = function updateIFrameDimensions() {
-  document.querySelectorAll('.article__oembed iframe').forEach(function (el) {
+  var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+  document.querySelectorAll('.article__oembed iframe, .c-embedded--resize iframe').forEach(function (el) {
     var iframe = el;
+    var ratio = null;
+
     var parentWidth = iframe.parentNode.clientWidth;
-    var newHeight = iframe.clientHeight * parentWidth / iframe.clientWidth;
+
+    if (init && iframe.width && iframe.height) {
+      ratio = iframe.height / iframe.width;
+      el.setAttribute('data-ratio', ratio);
+    } else {
+      var ratioAttr = el.getAttribute('data-ratio');
+      if (ratioAttr) {
+        ratio = parseFloat(ratioAttr);
+      }
+    }
+
+    var newHeight = 0;
+
+    if (ratio) {
+      newHeight = parentWidth * ratio;
+    } else {
+      newHeight = iframe.clientHeight * parentWidth / iframe.clientWidth;
+    }
+
     iframe.height = newHeight;
@@ -21,7 +43,11 @@ iframe.width = parentWidth;
 export var addEventListenerForResize = function addEventListenerForResize() {
-  window.addEventListener('resize', updateIFrameDimensions);
+  window.addEventListener('resize', function () {
+    return updateIFrameDimensions(false);
+  });
 };
 
 export var removeEventListenerForResize = function removeEventListenerForResize() {
-  window.removeEventListener('resize', updateIFrameDimensions);
+  window.removeEventListener('resize', function () {
+    return updateIFrameDimensions(false);
+  });
 };

lib/iframeScripts.js

@@ -15,6 +15,28 @@ 'use strict';
 var updateIFrameDimensions = exports.updateIFrameDimensions = function updateIFrameDimensions() {
-  document.querySelectorAll('.article__oembed iframe').forEach(function (el) {
+  var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+  document.querySelectorAll('.article__oembed iframe, .c-embedded--resize iframe').forEach(function (el) {
     var iframe = el;
+    var ratio = null;
+
     var parentWidth = iframe.parentNode.clientWidth;
-    var newHeight = iframe.clientHeight * parentWidth / iframe.clientWidth;
+
+    if (init && iframe.width && iframe.height) {
+      ratio = iframe.height / iframe.width;
+      el.setAttribute('data-ratio', ratio);
+    } else {
+      var ratioAttr = el.getAttribute('data-ratio');
+      if (ratioAttr) {
+        ratio = parseFloat(ratioAttr);
+      }
+    }
+
+    var newHeight = 0;
+
+    if (ratio) {
+      newHeight = parentWidth * ratio;
+    } else {
+      newHeight = iframe.clientHeight * parentWidth / iframe.clientWidth;
+    }
+
     iframe.height = newHeight;
@@ -26,7 +48,11 @@ iframe.width = parentWidth;
 var addEventListenerForResize = exports.addEventListenerForResize = function addEventListenerForResize() {
-  window.addEventListener('resize', updateIFrameDimensions);
+  window.addEventListener('resize', function () {
+    return updateIFrameDimensions(false);
+  });
 };
 
 var removeEventListenerForResize = exports.removeEventListenerForResize = function removeEventListenerForResize() {
-  window.removeEventListener('resize', updateIFrameDimensions);
+  window.removeEventListener('resize', function () {
+    return updateIFrameDimensions(false);
+  });
 };

package.json

 {
   "name": "ndla-article-scripts",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A collection of functions for making article content responsive (and interactive)",
@@ -5,0 +5,0 @@ "license": "GPL-3.0",

No alert changes

Improved metrics

Total package byte prevSize

20582

increased by6.1%

Lines of code

417

increased by10.61%

No dependency changes