From d768202ca0de6fb984e754bde3e86d9791271764 Mon Sep 17 00:00:00 2001 From: Rahul Sharma Date: Tue, 14 Apr 2020 00:42:11 +0530 Subject: [PATCH 1/5] (Fix) image six fixed for chrome browser --- index.html | 1 - src/webdialogalert.js | 23 +++++++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index bd89d9f..2f5eaef 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ RoboMx | Web Dialog Alert - diff --git a/src/webdialogalert.js b/src/webdialogalert.js index f1d4903..356dad7 100644 --- a/src/webdialogalert.js +++ b/src/webdialogalert.js @@ -7,8 +7,8 @@ class RoboMxWebDialogAlert extends HTMLElement { var t = this.getAttribute('title') || 'Dialog title'; var d = this.getAttribute('description') || 'Dialog description'; var i = this.getAttribute('imgSrc') || null; - var width = this.getAttribute('imgWidth') - var height = this.getAttribute('imgHeight') + var width = this.getAttribute('imgWidth') || '200px'; + var height = this.getAttribute('imgHeight') || '200px'; var position = this.getAttribute('position'); var dark = this.getAttribute('darkMode') || false; var link = this.getAttribute('link') || 'https://example.com'; @@ -162,7 +162,22 @@ button { margin-left: -4px; } } - +@media screen and (-webkit-min-device-pixel-ratio:0){ + .robomx-card-img { + flex: 1; + padding: 6px; + height: 200px; + width: 200px; +} +} +@-moz-document url-prefix() { + .robomx-card-img { + flex: 1; + padding: 6px; + height: unset; + width: unset; +} +} @media only screen and (max-width: 600px) { .robomx-card { background: ` + bgClr + `; @@ -203,7 +218,7 @@ button { .robomx-visit { background: none; border: none; - font-size: 15px; + font-size: 14px; letter-spacing: 1px; } } From 86457c5e1b5e8e23bdf0190be9dae35710bb0062 Mon Sep 17 00:00:00 2001 From: Rahul Sharma Date: Thu, 23 Apr 2020 17:39:54 +0530 Subject: [PATCH 2/5] (Added) --- src/webdialogalert.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/webdialogalert.js b/src/webdialogalert.js index 356dad7..274578c 100644 --- a/src/webdialogalert.js +++ b/src/webdialogalert.js @@ -90,6 +90,7 @@ button { border-radius: 5px; animation: pop 1s linear; margin: 10px; + z-index: 9999; } .robomx-card-img { @@ -146,6 +147,7 @@ button { border-radius: 5px; animation: pop 1s linear; margin: 3px !important; + z-index: 9999; } .robomx-later { background: none; @@ -187,6 +189,7 @@ button { box-shadow: 0 0px 4px #d3d3d3; animation: pop 1s linear; margin: 3px !important; + z-index: 9999; } .robomx-card-img { flex: 1; From 1909d70f9794fe1787e3aa0c8b47355c4edc83e1 Mon Sep 17 00:00:00 2001 From: Rahul Sharma Date: Fri, 24 Apr 2020 01:32:13 +0530 Subject: [PATCH 3/5] (Fix) --- src/webdialogalert.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/webdialogalert.js b/src/webdialogalert.js index 274578c..e0c8e3a 100644 --- a/src/webdialogalert.js +++ b/src/webdialogalert.js @@ -149,6 +149,12 @@ button { margin: 3px !important; z-index: 9999; } +.robomx-buttons { + display: flex; + justify-content: flex-end; + margin-right: 7px; + margin-top: -6px; + } .robomx-later { background: none; border: none; @@ -180,6 +186,14 @@ button { width: unset; } } +@media only screen and (max-width: 368px) { + .robomx-buttons { + display: flex; + justify-content: flex-end; + margin-right: 7px; + margin-top: -13px; +} +} @media only screen and (max-width: 600px) { .robomx-card { background: ` + bgClr + `; From b7170a4920f9e8c4485b75fb7d13fdc93240267b Mon Sep 17 00:00:00 2001 From: "Rahul Sharma(Angular)" Date: Sat, 1 Oct 2022 18:09:28 +0530 Subject: [PATCH 4/5] css changes for desktop version --- index.html | 15 ++- src/webdialogalert.js | 226 ++++++++++++++++++++++++------------------ 2 files changed, 141 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index 2f5eaef..708deab 100644 --- a/index.html +++ b/index.html @@ -9,13 +9,20 @@ - + +

HTML Ipsum Presents

-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. + Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam + egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et + sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, + wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

@@ -26,7 +33,9 @@

Header Level 2

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. + Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus + est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

diff --git a/src/webdialogalert.js b/src/webdialogalert.js index e0c8e3a..256b44e 100644 --- a/src/webdialogalert.js +++ b/src/webdialogalert.js @@ -1,75 +1,81 @@ class RoboMxWebDialogAlert extends HTMLElement { - constructor() { - super(); - var dlg = document.createElement("DIV"); - var shadow = this.attachShadow({ mode: 'open' }); + constructor() { + super(); + var div = document.createElement("DIV"); + var shadow = this.attachShadow({ mode: "open" }); + var title = this.getAttribute("title") || "Dialog title"; + var desc = this.getAttribute("description") || "Dialog description"; + var imgSrc = this.getAttribute("imgSrc") || null; + var position = this.getAttribute("position"); + var dark = this.getAttribute("darkMode") || false; + var link = this.getAttribute("link") || "https://example.com"; - var t = this.getAttribute('title') || 'Dialog title'; - var d = this.getAttribute('description') || 'Dialog description'; - var i = this.getAttribute('imgSrc') || null; - var width = this.getAttribute('imgWidth') || '200px'; - var height = this.getAttribute('imgHeight') || '200px'; - var position = this.getAttribute('position'); - var dark = this.getAttribute('darkMode') || false; - var link = this.getAttribute('link') || 'https://example.com'; - - dlg.innerHTML = ` + div.innerHTML = + `
- +
-

` + t + `

-

` + d + `

-
- - -
+

` + + title + + `

+

` + + desc + + `

+
+ + +
+
-`; - - // define css for main element - this.style.position = 'fixed'; + `; + // define css for main element + this.style.position = "fixed"; - // align element on sheet - switch (position) { - case 'top-left': - this.style.top = '0'; - this.style.left = '0'; - break; - case 'top-right': - this.style.top = '0'; - this.style.right = '0'; - break; - case 'bottom-right': - this.style.bottom = '0'; - this.style.right = '0'; - break; - case 'center': - this.style.margin = 'auto'; - this.style.display = 'flex'; - this.style.justifyContent = 'center'; - this.style.width = "100%"; - break; - default: - // by default align the element bottom-left - this.style.bottom = '0'; - this.style.left = '0'; - } + // align element on sheet + switch (position) { + case "top-left": + this.style.top = "0"; + this.style.left = "0"; + break; + case "top-right": + this.style.top = "0"; + this.style.right = "0"; + break; + case "bottom-right": + this.style.bottom = "0"; + this.style.right = "0"; + break; + case "center": + this.style.margin = "auto"; + this.style.display = "flex"; + this.style.justifyContent = "center"; + this.style.width = "100%"; + break; + default: + // by default align the element bottom-left + this.style.bottom = "0"; + this.style.left = "0"; + } - var style = document.createElement('STYLE'); + var style = document.createElement("STYLE"); - // set colors - var bgClr = this.getAttribute('bgColor') || '#fff' - var txtClr = this.getAttribute('txtColor') || '#373737' - var btnClr = this.getAttribute('btnColor') || '#6c6b6b' - if (dark == 'true') { - bgClr = '#212121'; - txtClr = '#ffffe9'; - btnClr = '#909090'; - } + // set colors + var bgClr = this.getAttribute("bgColor") || "#fff"; + var txtClr = this.getAttribute("txtColor") || "#494848"; + if (dark == "true") { + bgClr = "#202124"; + txtClr = "#ffffe9"; + btnClr = "#909090"; + } - style.innerHTML = ` + style.innerHTML = + ` :root { font-family: 'Roboto', sans-serif; @@ -82,9 +88,11 @@ button { text-decoration: none; } .robomx-card { - background: ` + bgClr + `; + background: ` + + bgClr + + `; width: 515px; - height: 215px; + height: 200px; display: flex; box-shadow: 0 0px 4px #d3d3d3; border-radius: 5px; @@ -96,50 +104,64 @@ button { .robomx-card-img { flex: 1; padding: 6px; + width: 200px; + border-radius: 8px } .robomx-card-content { - flex: 2; + flex: auto; padding: 6px; } .robomx-title { - font-size: 17px; + margin-top: 10px; + margin-bottom: 0; + color: ${txtClr} } .robomx-subtitle { - max-height: 5.2em; overflow: hidden; - height: 5.2em; + height: calc(140px - 20px); line-height: 20.2px; - color: ` + txtClr + `; + word-break: break-word; + color: ` + + txtClr + + `; font-weight: lighter; + margin-top: 12px; + margin-bottom: 10px; } .robomx-buttons { - display: flex; - justify-content: flex-end; - margin-right: 17px; + position: absolute; + bottom: 16px; + right: 20px; + } .robomx-later { background: none; border: none; margin-right: 16px; - font-size: 16px; + font-size: 14px; letter-spacing: 1px; + color:${txtClr} } -.robomx-visit { +.robomx-visit{ background: none; border: none; - font-size: 16px; + font-size: 14px; letter-spacing: 1px; } - +.robomx-wba-href { + color:${txtClr} +} @media only screen and (max-width: 354px) { .robomx-card { - background: ` + bgClr + `; + background: ` + + bgClr + + `; width: 515px; height: 215px; display: flex; @@ -170,13 +192,13 @@ button { margin-left: -4px; } } -@media screen and (-webkit-min-device-pixel-ratio:0){ - .robomx-card-img { - flex: 1; - padding: 6px; - height: 200px; - width: 200px; -} +// @media screen and (-webkit-min-device-pixel-ratio:0){ +// .robomx-card-img { +// flex: 1; +// padding: 6px; +// height: 200px; +// width: 200px; +// } } @-moz-document url-prefix() { .robomx-card-img { @@ -196,7 +218,9 @@ button { } @media only screen and (max-width: 600px) { .robomx-card { - background: ` + bgClr + `; + background: ` + + bgClr + + `; width: 100%; height: 200px; display: flex; @@ -217,7 +241,9 @@ button { overflow: hidden; height: 4.8em; line-height: 1.2; - color: ` + txtClr + `; + color: ` + + txtClr + + `; font-weight: lighter; } .robomx-buttons { @@ -249,21 +275,27 @@ button { } `; - // set keyframe - if (position.includes('right')) { - style.innerHTML = style.innerHTML.replace('translate(-1000px)', 'translate(1000px)'); - } - // render the dialog inside the main element - if (!sessionStorage.getItem('roboMxWebDialog')) { - shadow.appendChild(style); - shadow.appendChild(dlg); - } + // set keyframe + if (position.includes("right")) { + style.innerHTML = style.innerHTML.replace( + "translate(-1000px)", + "translate(1000px)" + ); } + // render the dialog inside the main element + if (!sessionStorage.getItem("roboMxWebDialog")) { + shadow.appendChild(style); + shadow.appendChild(div); + } + } } +function roboMxWebDialogInit() {} + function roboMxDialogDismiss() { - document.getElementsByTagName('robomx-webdialogalert')[0].style.display = "none"; - sessionStorage.setItem('roboMxWebDialog', false); + document.getElementsByTagName("robomx-webdialogalert")[0].style.display = + "none"; + sessionStorage.setItem("roboMxWebDialog", false); } -customElements.define('robomx-webdialogalert', RoboMxWebDialogAlert); \ No newline at end of file +customElements.define("robomx-webdialogalert", RoboMxWebDialogAlert); From 1fdb1d289f95c24fadfd052c859ee6e320150315 Mon Sep 17 00:00:00 2001 From: "Rahul Sharma(Angular)" Date: Sat, 1 Oct 2022 18:12:47 +0530 Subject: [PATCH 5/5] Readme file update --- README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e360a18..7ce0390 100644 --- a/README.md +++ b/README.md @@ -29,10 +29,9 @@ Inspired from paper dialog seen on YouTube during COVID-19 outbreak. title="Dialog title" description="Dialog description" imgSrc="sample.png" - imgWidth="300px" - imgHeight="200px" position="bottom-left" link="example.com" + txtColor="red" > @@ -44,11 +43,9 @@ Inspired from paper dialog seen on YouTube during COVID-19 outbreak. | `title` | `Dialog title` | `string content` | Specify title of the dialog | | `description` | `Dialog description ` | `string content` | Give brief information about the dialog. | | `imgSrc` | `null` | `Image path` | Specify image source url or relative path. | -| `imgWidth` | `300px` | `px, em, %` | Specify width of the image. | -| `imgHeight` | `200px` | `px, em, %` | Specify height of the image. | | `position` | `bottom-left` | `top-left, top-right, bottom-left, bottom-right, center` | Specify position of the dialog box. | | `darkMode` | `false` | `boolean` | Dark mode setup. | | `bgColor` | `Hex Code, RGB` | `#fff` | Backgroung color of dialog box. | | `txtColor` | `Hex Code, RGB` | `#373737` | Text color of dialog content. | -| `btnColor` | `Hex Code, RGB` | `#6c6b6b` | Button color of 'Later'. | +