Merge pull request #5 from Tom-Hirschberger/development

Development

MMM-EmbedURL.js

@@ -29,9 +29,9 @@ Module.register('MMM-EmbedURL', {
 	},
 
 
-	/*getScripts: function () {
-		return [this.file('node_modules/jsonpath-plus/dist/index-browser-umd.js')];
-	},*/
+	getScripts: function () {
+		return [this.file('node_modules/@iconify/iconify/dist/iconify.min.js')];
+	},
 
 
 	getStyles: function () {
@@ -81,32 +81,50 @@ Module.register('MMM-EmbedURL', {
 
 	getFontIconElement: function(subConfig, additionalClasses){
 		const self = this
+		console.log("Trying to get font icon element")
 		if(subConfig != null){
+			console.log("subConfig != null")
 			let fontIconElement = null
 			if(Array.isArray(subConfig)){
 				fontIconElement = document.createElement(self.config["basicElementType"])
 				fontIconElement.classList.add("iconWrapper")
 
 				let idx = 0
 				for (let curIcon of subConfig) {
-					let curIconElement = document.createElement("i")
-					curIcon.split(" ").forEach(element => curIconElement.classList.add(element))
+					let curIconElement
+					if(curIcon.startsWith("fa ")){
+						curIconElement = document.createElement("i")
+						curIcon.split(" ").forEach(element => curIconElement.classList.add(element))
+						curIconElement.setAttribute("aria-hidden", "true")
+					} else {
+						curIconElement = document.createElement("span")
+						curIconElement.classList.add("iconify-inline")
+						curIconElement.setAttribute("data-icon", curIcon)
+					}
 					curIconElement.classList.add("fontIcon")
 					curIconElement.classList.add("fontIcon" + idx)
 					additionalClasses.forEach(element => curIconElement.classList.add(element))
 					fontIconElement.appendChild(curIconElement)
 					idx += 1
 				}
 			} else {
-				fontIconElement = document.createElement("i")
-				subConfig.split(" ").forEach(element => fontIconElement.classList.add(element))
+				if(subConfig.startsWith("fa ")){
+					fontIconElement = document.createElement("i")
+					subConfig.split(" ").forEach(element => fontIconElement.classList.add(element))
+					fontIconElement.setAttribute("aria-hidden", "true")
+				} else {
+					fontIconElement = document.createElement("span")
+					fontIconElement.classList.add("iconify-inline")
+					fontIconElement.setAttribute("data-icon", subConfig)
+				}
 				fontIconElement.classList.add("fontIcon")
 			}
 
 			additionalClasses.forEach(element => fontIconElement.classList.add(element))
 
 			return fontIconElement
 		} else {
+			console.log("subConfig is null")
 			return null
 		}
 	},

README.md

@@ -14,7 +14,7 @@ I use it to embed my Grafana panels, my NodeRED-Dashboard and a Webpage with a L
 ## Basic features
 
 * Embed other websites either by "iframe", "webview" or a custom tag
-* Add icon(s) or title(s) before or after the embeded website (position can be configured)
+* Add [Fontawesome 4.7](https://fontawesome.com/v4/icons/) or [Iconify](https://icon-sets.iconify.design/) icon(s) or title(s) before or after the embeded website (position can be configured)
 * Set different attributes for the elements by nesting
 * Periodically refresh the embedded websites (all sites will be refreshed at once)
 * Display embeded elements depending to the current profile (see [MMM-ProfileSwitcher](https://github.com/tosti007/MMM-ProfileSwitcher))
@@ -62,6 +62,10 @@ In this a very basic example with the following result:
 
 If the site(s) you want to embed forbid the embedding by setting some headers there are multiple ways them embed them anyway.
 
+**PLEASE RESPECT THE CONTENT POLICY OF THE PAGES YOU ARE EMBEDDING!**
+
+As most of the pages forbid embeding only to avoid Cross-Site-Scripting attacks and these are very unlikly at the mirror i will show some ways the embed pages that forbid embedding anyway.
+
 There are extensions for at least Firefox, Chrome and Chromium to remove Cookie banners as well.
 
 ### Webview usage
@@ -88,6 +92,19 @@ let config = {
 
 You then need to set the "basicElementType" to "webview" in the module configuration.
 
+**As of MagicMirror² version 2.22.0 you can use Iframe to embed the site and set the two config options:**
+
+```json5
+...
+let config = {
+  ignoreXOriginHeader: true,
+  ignoreContentSecurityPolicy: true,
+  address: ...
+  port: ...
+  basePath: ...
+...
+```
+
 ### Firefox browser
 
 You can use the [Requestly Extension](https://requestly.io/blog/bypass-iframe-busting-header/) which is able to remove the headers that prevent sites of being embedded! You then can use a iframe to embed the site.
@@ -111,7 +128,7 @@ If the site uses a cookie banner you want to hide you may look at the [I-Dont-Ca
 | positions | The elements will be added in the order of the characters in this string (i=icon, t=title, e=embeded). | String | "tie" |
 | attributes | This is a array with additional attributes that should be added to the embeded html element. | Array of Strings | \[<br>"frameborder=0"<br>\] |
 | title | Either a single String or a Array of String that will be added as title. It is supported to add html tags to the title! | String | null |
-| fontIcon | A single String or a Array of String containing the [fontawesome 4.7](https://fontawesome.com/v4/icons/) class definition of icons (i.e. "fa fa-tint"). | Array or single String | null |
+| fontIcon | A single String or a Array of String containing the [Fontawesome 4.7](https://fontawesome.com/v4/icons/) or [Iconify](https://iconify.design/) class definition of icons (i.e. "fa fa-tint" or "fluent-emoji-flat:test-tube"). | Array or single String | null |
 | imgIcon | If you want to use a image as icon instead of [fontawesome 4.7](https://fontawesome.com/v4/icons/) icons you can specify a single URL or a Array of URLs with this option. **If both fontIcon and imgIcon are specified the imgIcon will be used!** | Array or single String | null |
 | classes | A String containing html classes that should be added to the wrappers. If you use multiple instances of the module you can style them differently this way. | String | null |
 | embed | Either a single URL as String or a Array containing Strings and/or more embed objects (see next section for more information). | Array or single String | null |
@@ -208,7 +225,7 @@ Look at the [embedURL.css](embedURL.css) file for inspiration but override and s
 The size of the embeded elements is controlled in example with:
 
 ```css
-.embed .embeded {
+.MMM-EmbedURL .embed .embeded {
     width: 800px;
     height: 400px;
 }

doc/configs/webcam-custom.css

@@ -1,11 +1,11 @@
-.embed .videos.embededSubWrapper1 {
+.MMM-EmbedURL .embed .videos.embededSubWrapper1 {
     width    : 600px;
     height   : 400px;
     overflow : hidden;
     position : relative;
 }
 
-.embed .embeded.videos {
+.MMM-EmbedURL .embed .embeded.videos {
     position : absolute;
     top: -138px;
     height: 750px;

embedURL.css

@@ -1,41 +1,46 @@
-.embed.rootWrapper, .embed .embededWrapper, .embed .embededSubWrapper {
+.MMM-EmbedURL .embed.rootWrapper, .embed .embededWrapper, .embed .embededSubWrapper {
     display: flex;
     width: 100%;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }
 
-.embed.rootWrapper {
+.MMM-EmbedURL .embed.rootWrapper {
     flex-direction: column;
 }
 
-.embed .embededSubWrapper0 {
+.MMM-EmbedURL .embed .embededSubWrapper0 {
     flex-direction: row;
     align-items: flex-start;
 }
 
-.embed .iconWrapper, .embed .titleWrapper {
+.MMM-EmbedURL .embed .iconWrapper, .embed .titleWrapper {
     display: flex;
     flex-direction: row;
     justify-content: center;
     width: 100%;
     gap: 10px;
 }
 
-.ebmed .title {
+.MMM-EmbedURL .ebmed .title {
     text-decoration: underline;
 }
 
-.embed .fontIcon {
+.MMM-EmbedURL .embed .fontIcon {
     line-height: 1.5;
 }
 
-.embed .imgIcon {
+.MMM-EmbedURL .embed .fontIcon.iconify {
     width: 32px;
+    height: 32px;
 }
 
-/* .embed .embeded {
+.MMM-EmbedURL .embed .imgIcon {
+    width: 32px;
+}
+
+/* .MMM-EmbedURL .embed .embeded {
     width: 800px;
     height: 400px;
 } */

package.json

@@ -1,9 +1,10 @@
 {
   "name": "MMM-EmbedURL",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "",
   "main": "MMM-EmbedURL",
   "dependencies": {
+    "@iconify/iconify": "latest"
   },
   "devDependencies": {},
   "repository": {