Merge pull request #5 from marcobiedermann/feature/aspect-ratio

Feature: Responsive

MMM-iFrame.css

@@ -0,0 +1,16 @@
+.mmm-iframe-wrapper {
+  height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.mmm-iframe-wrapper > iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+  vertical-align: middle;
+  width: 100%;
+}

MMM-iFrame.js

@@ -10,7 +10,7 @@
 Module.register("MMM-iFrame",{
 		// Default module config.
 		defaults: {
-				height:"300px",
+                                frameWidth: "300",
 				width:"100%",
                                 updateInterval: 0.5 * 60 * 1000,
                                 url: ["http://magicmirror.builders/"],
@@ -34,28 +34,34 @@ resume: function() {
    console.log("Resuming");
    return this.getDom();
 },
+        getStyles: function() {
+                return [
+                        "MMM-iFrame.css",
+                ];
+        },
 
         // Override dom generator.
 	getDom: function() {
-		var iframe = document.createElement("IFRAME");
-		iframe.style = "border:0"
-		iframe.width = this.config.width;
-		iframe.height = this.config.height;
-                iframe.scrolling = this.config.scrolling;
-                var url_index = 0;
-         //       console.log("currentURL:" + this.currentURL);
-                var repeat = true;
-                while(repeat) {
-                    url_index = this.getRandomInt(0,this.config.url.length);
-                    futureURL = this.config.url[url_index];
-                    console.log("URL_length:" + this.config.url.length + " " + "URL_index:" + url_index + " " + "url:" + futureURL);
-           //         if( futureURL == currentURL) {
-                        iframe.src = futureURL;
-             //           currentURL = futureURL;
-                        repeat = false;
-               //     } 
-                }
-		return iframe;
+                var { width, height } = this.config;
+                var wrapper = document.createElement("div");
+
+                wrapper.className = "mmm-iframe"
+                wrapper.style.width = `${this.config.frameWidth}px`;
+
+                var html = `
+                        <div class="mmm-iframe-wrapper" style="padding-top: ${100 / (width / height)}%;">
+                                <iframe
+                                        src="${this.config.url[this.getRandomInt(0, this.config.url.length)]}"
+                                        width="${width}"
+                                        height="${height}"
+                                        scrolling="${this.config.scrolling}"
+                                ></iframe>
+                        </div>
+                `;
+
+                wrapper.insertAdjacentHTML("afterbegin", html);
+
+		return wrapper;
 	}
 
 });

README.md

@@ -27,8 +27,9 @@ modules: [
 			// See 'Configuration options' for more information.
 				url: ["ENTER IN URL", "ENTER IN URL2"],  // as many URLs you want or you can just ["ENTER IN URL"] if single URL.
 				updateInterval: 0.5 * 60 * 1000, // rotate URLs every 30 seconds
-				width: "100%", // Optional. Default: 100%
-				height: "100px" //Optional. Default: 100px
+				width: "1280", // width of iframe
+				height: "720", // height of iframe
+				frameWidth: "400" // width of embedded iframe, height is beeing calculated by aspect ratio of iframe
 			}
 		}
 	}