Repository navigation
Expand file tree
/
Copy pathpositions-stack.json
More file actions
1 lines (1 loc) · 10.3 KB
/
Copy pathpositions-stack.json
File metadata and controls
1 lines (1 loc) · 10.3 KB
1
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section toast-pos-section\">\n <div class=\"e-sample-resize-container\" id=\"toast_pos_target\">\n <div id=\"toast_pos\"> </div>\n <div id=\"toast_pos_property\">\n <table style=\"width: 100%\">\n <tbody><tr>\n <td>\n <div style=\"padding:25px 0 0 0;\">\n <input id=\"dropdownRadio\" type=\"radio\">\n </div>\n </td>\n <td>\n <div style=\"padding:25px 0 0 0;\">\n <input id=\"customRedio\" type=\"radio\">\n </div>\n </td>\n </tr>\n <tr>\n <td id=\"dropdownChoose\" colspan=\"2\">\n <div id=\"dropdown\" style=\"padding-top:25px;\">\n <select id=\"position\">\n <option value=\"topleft\">Top Left</option>\n <option value=\"topright\">Top Right</option>\n <option value=\"topcenter\">Top Center</option>\n <option value=\"topfullwidth\">Top Full Width</option>\n <option value=\"bottomleft\">Bottom Left</option>\n <option value=\"bottomright\">Bottom Right</option>\n <option value=\"bottomcenter\">Bottom Center</option>\n <option value=\"bottomfullwidth\">Bottom Full Width</option>\n </select>\n </div>\n </td>\n </tr>\n <tr>\n <td colspan=\"2\" id=\"customChoose\" style=\"display: none\">\n <form id=\"formId\" class=\"form-horizontal\">\n <div class=\"e-row\">\n <div class=\"e-float-input\">\n <input class=\"e-input\" id=\"xPos\" name=\"Digits\" value=\"50\" digits=\"true\" data-digits-message=\"Please enter digits only.\" required>\n <span class=\"e-float-line\"></span>\n <label class=\"e-float-text\" for=\"Digits\">X Position</label>\n </div>\n </div>\n <div class=\"e-row\">\n <div class=\"e-float-input\">\n <input class=\"e-input\" id=\"yPos\" name=\"Digits\" value=\"50\" digits=\"true\" data-digits-message=\"Please enter digits only.\" required>\n <span class=\"e-float-line\"></span>\n <label class=\"e-float-text\" for=\"Digits\">Y Position</label>\n </div>\n </div>\n </form>\n </td>\n </tr>\n <tr>\n <td>\n <div style=\"padding:25px 0 0 0;\">\n <input id=\"radio1\" type=\"radio\">\n </div>\n </td>\n <td>\n <div style=\"padding:25px 0 0 0;\">\n <input id=\"radio2\" type=\"radio\">\n </div>\n </td>\n </tr>\n </tbody></table>\n <div id=\"toast_btn\" style=\"padding-top: 25px\">\n <button class=\"e-btn e-control\" id=\"show_Toast\" style=\"margin-right: 15px\"> Show Toasts </button>\n <button class=\"e-btn e-control\" id=\"hideTosat\"> Hide All </button>\n </div>\n </div>\n </div>\n</div>\n\n\n\n\n<style>\n #toast_pos_property td {\n width: 50%;\n }\n\n .e-toast-icon.e-laura.e-icons {\n border-radius: 50%;\n background-image: url('//npmci.syncfusion.com/production/demos/src/toast/resource/laura.png');\n background-repeat: no-repeat;\n background-size: cover;\n height: 50px !important;\n width: 100px !important;\n background-size: 50px 50px;\n margin: 0;\n }\n\n\n @media (min-width: 740px) {\n #toast_pos_property {\n width: 450px;\n }\n }\n</style>\n\n","index.js":"{{ripple}}/**\n * Sample for Positioning options in Toast\n */\n\n var toastObj = new ej.notifications.Toast({\n title: 'Matt sent you a friend request',\n content: 'You have a friend request yet to accept.',\n icon: 'e-laura',\n target: document.body,\n position: { X: 'Right', Y: 'Bottom' },\n close: onclose,\n beforeOpen: onBeforeOpen\n });\n\n if (!ej.base.isDevice) {\n toastObj.width = 350;\n toastObj.dataBind();\n }\n var listObj = new ej.dropdowns.DropDownList({\n index: 5,\n placeholder: 'Select a position',\n popupHeight: '200px',\n change: valueChange\n });\n listObj.appendTo('#position');\n var radioButton = new ej.buttons.RadioButton({ label: 'Target', name: 'toast', value: 'Target', change: checkboxChange });\n radioButton.appendTo('#radio1');\n radioButton = new ej.buttons.RadioButton({ label: 'Global', name: 'toast', value: 'Global', checked: true, change: checkboxChange1 });\n radioButton.appendTo('#radio2');\n radioButton = new ej.buttons.RadioButton({ label: 'Position', name: 'toastPos', value: 'Position', checked: true, change: checkboxChange2 });\n radioButton.appendTo('#dropdownRadio');\n radioButton = new ej.buttons.RadioButton({ label: 'Custom', name: 'toastPos', value: 'Custom', change: checkboxChange3 });\n radioButton.appendTo('#customRedio');\n var initialWid = toastObj.width.toString();\n toastObj.appendTo('#toast_pos');\n toastShow(200);\n function toastShow(timeOutDelay) {\n setTimeout(function () {\n toastObj.show();\n }, timeOutDelay);\n }\n var btnEle = document.getElementById('show_Toast');\n var hideBtn = document.getElementById('hideTosat');\n btnEle.onclick = function () {\n if (customFlag) {\n setcustomPosValue();\n }\n toastObj.show();\n };\n document.getElementById('hideTosat').onclick = function () {\n toastObj.hide('All');\n };\n document.onclick = function (e) {\n if (e.target !== btnEle && toastObj.target === document.body) {\n toastObj.hide('All');\n }\n };\n\n function onclose(e) {\n if (e.toastContainer.childElementCount === 0) {\n hideBtn.style.display = 'none';\n }\n }\n\n function onBeforeOpen() {\n hideBtn.style.display = 'inline-block';\n }\n\n var customFlag = false;\n function checkboxChange(e) {\n if (this.checked) {\n toastObj.hide('All');\n toastObj.target = '#toast_pos_target';\n toastShow(1000);\n }\n }\n function checkboxChange1(e) {\n if (this.checked) {\n toastObj.hide('All');\n toastObj.target = document.body;\n toastShow(1000);\n }\n }\n function checkboxChange2(e) {\n if (this.checked) {\n toastObj.hide('All');\n document.getElementById('dropdownChoose').style.display = 'table-cell';\n document.getElementById('customChoose').style.display = 'none';\n setToastPosValue(listObj.value.toString());\n customFlag = false;\n toastShow(1000);\n }\n }\n function checkboxChange3(e) {\n if (this.checked) {\n toastObj.hide('All');\n document.getElementById('dropdownChoose').style.display = 'none';\n document.getElementById('customChoose').style.display = 'table-cell';\n setcustomPosValue();\n customFlag = true;\n toastShow(1000);\n }\n }\n //To set custom position values\n function setcustomPosValue() {\n toastObj.width = initialWid;\n toastObj.position.X = parseInt(document.getElementById('xPos').value, 10);\n toastObj.position.Y = parseInt(document.getElementById('yPos').value, 10);\n }\n //Pre defined postions available based on target\n function setToastPosValue(value) {\n toastObj.width = initialWid;\n switch (value) {\n case 'topleft':\n toastObj.position.X = 'Left';\n toastObj.position.Y = 'Top';\n break;\n case 'topright':\n toastObj.position.X = 'Right';\n toastObj.position.Y = 'Top';\n break;\n case 'topcenter':\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Top';\n break;\n case 'topfullwidth':\n toastObj.width = '100%';\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Top';\n break;\n case 'bottomleft':\n toastObj.position.X = 'Left';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomright':\n toastObj.position.X = 'Right';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomcenter':\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Bottom';\n break;\n case 'bottomfullwidth':\n toastObj.width = '100%';\n toastObj.position.X = 'Center';\n toastObj.position.Y = 'Bottom';\n break;\n }\n }\n function valueChange(e) {\n toastObj.hide('All');\n setToastPosValue(e.value.toString());\n toastShow(1000);\n }\n"}