<filename>src/dialog/animation-stack.json
{"index.html":"<html><head><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}}\">\n<div id=\"target\" class=\"col-lg-12 control-section\" style=\"height:100%; width:100%;\">\n    <div id=\"customization\">\n        <div class=\"animate\">\n            <button class=\"text btn-animate\" id=\"Zoom\">Zoom in/out</button>\n        </div>\n        <div class=\"animate\">\n            <button class=\"text btn-animate\" id=\"FlipXDown\">FlipX Down</button>\n        </div>\n        <div class=\"animate\">\n            <button class=\"text btn-animate\" id=\"FlipXUp\">FlipX Up</button>\n        </div>\n        <div class=\"animate\">\n            <button class=\"text btn-animate\" id=\"FlipYLeft\">FlipY Left</button>\n        </div>\n        <div class=\"animate\">\n            <button class=\"text btn-animate\" id=\"FlipYRight\">FlipY Right</button>\n        </div>\n        <div id=\"dialog\"></div>\n      </div>\n</div>\n\n  \n<style>\n    html,\n    body,    \n    #container {\n        height: 100%;\n        overflow: hidden;\n        width: 100%;\n        position: relative;\n        min-height: 400px;\n    }\n\n    .text {\n        text-transform: capitalize;\n    }\n            \n    #customization {\n        display: inline-block;\n        margin: 0 auto;\n    }\n\n    .animate {\n        display: inline-block;\n        padding: 10px;\n    }\n    .control-wrapper{\n        text-align: center;\n    }\n</style>\n\n\n</div></body></html>","index.ts":"{{ripple}}\r\nimport { Dialog, DialogEffect } from '@syncfusion/ej2-popups';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\nimport { Button } from '@syncfusion/ej2-buttons';\r\n/**\r\n * Animation Dialog sample\r\n */\r\n\r\n    \r\n  //Render Button components\r\n  let zoom: Button = new Button({ cssClass: 'e-outline', isPrimary: true });\r\n  zoom.appendTo('#Zoom');\r\n\r\n  let flipXDown: Button = new Button({ cssClass: 'e-outline', isPrimary: true });\r\n  flipXDown.appendTo('#FlipXDown');\r\n\r\n  let flipXUp: Button = new Button({ cssClass: 'e-outline', isPrimary: true });\r\n  flipXUp.appendTo('#FlipXUp');\r\n\r\n  let flipYLeft : Button = new Button({ cssClass: 'e-outline', isPrimary: true });\r\n  flipYLeft.appendTo('#FlipYLeft');\r\n\r\n  let flipYRight: Button = new Button({ cssClass: 'e-outline', isPrimary: true });\r\n  flipYRight.appendTo('#FlipYRight');\r\n\r\n  enableRipple(true);\r\n  // Initialization of Dialog component\r\n  let dialog: Dialog = new Dialog({\r\n      // Enables the header\r\n      header: 'Animation Dialog',\r\n      // Enables the close icon button in header\r\n      showCloseIcon: true,\r\n      // Dialog content\r\n      content: '<span>The dialog is configured with animation effect. It is opened or closed with \"Zoom In or Out\" animation.</span>',\r\n      // The Dialog shows within the target element\r\n      target: document.getElementById('target'),\r\n      width: '285px',\r\n      isModal: true,\r\n      animationSettings: { effect: 'Zoom' },\r\n      buttons: [{\r\n        click: dlgButtonClick,\r\n        buttonModel: { content: 'Hide', isPrimary: true }\r\n    }],\r\n  });\r\n  // Render initialized Dialog\r\n  dialog.appendTo('#dialog');\r\n\r\n  function dlgButtonClick(): void {\r\n      dialog.hide();\r\n  }\r\n  let list: NodeList  = document.getElementsByClassName('btn-animate');\r\n\r\n  for (let i: number = 0 ; i < list.length; i++) {\r\n      list[i].addEventListener('click', (e: any): void => {\r\n          onAnimationChange(e);\r\n      });\r\n  }\r\n  function onAnimationChange(e: any): void {\r\n    let effects: DialogEffect = e.target.id;\r\n    let txt: string = e.target.parentElement.innerText;\r\n    txt = (txt === 'Zoom In/Out') ? 'Zoom In or Out' : txt;\r\n    dialog.content = 'The dialog is configured with animation effect. It is opened or closed with \"' + txt + '\" animation.';\r\n    dialog.animationSettings = { effect: effects, duration: 400 };\r\n    dialog.show();\r\n  }\r\n"}