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'. | + 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 274578c..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' }); - - 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 = ` + 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"; + + div.innerHTML = + `
- +
-

` + t + `

-

` + d + `

-
- - -
+

` + + title + + `

+

` + + desc + + `

+
+ + +
+
-`; + `; + // 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"; + } - // 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'; - } - - 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'; - } - - style.innerHTML = ` + var style = document.createElement("STYLE"); + + // 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 = + ` :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; @@ -149,6 +171,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; @@ -164,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 { @@ -180,9 +208,19 @@ 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 + `; + background: ` + + bgClr + + `; width: 100%; height: 200px; display: flex; @@ -203,7 +241,9 @@ button { overflow: hidden; height: 4.8em; line-height: 1.2; - color: ` + txtClr + `; + color: ` + + txtClr + + `; font-weight: lighter; } .robomx-buttons { @@ -235,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);