added svcapi ui and camunda code

[it/otf.git] / otf-frontend / client / src / app / router.animations.ts

diff --git a/otf-frontend/client/src/app/router.animations.ts b/otf-frontend/client/src/app/router.animations.ts
new file mode 100644 (file)
index 0000000..30cf59f
--- /dev/null
+++ b/otf-frontend/client/src/app/router.animations.ts
@@ -0,0 +1,178 @@
+/*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
+#                                                                              #\r
+#   Licensed under the Apache License, Version 2.0 (the "License");            #\r
+#   you may not use this file except in compliance with the License.           #\r
+#   You may obtain a copy of the License at                                    #\r
+#                                                                              #\r
+#       http://www.apache.org/licenses/LICENSE-2.0                             #\r
+#                                                                              #\r
+#   Unless required by applicable law or agreed to in writing, software        #\r
+#   distributed under the License is distributed on an "AS IS" BASIS,          #\r
+#   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
+#   See the License for the specific language governing permissions and        #\r
+#   limitations under the License.                                             #\r
+##############################################################################*/\r
+\r
+\r
+import { animate, group, query, state, style, transition, trigger } from '@angular/animations';\r
+\r
+export function routerTransition() {\r
+    return slideToTop();\r
+}\r
+\r
+export function routerLeftTransition() {\r
+    return slideToLeft();\r
+}\r
+\r
+export function slideToRight() {\r
+    return trigger('routerTransition', [\r
+        state('void', style({})),\r
+        state('*', style({})),\r
+        transition(':enter', [\r
+            style({ transform: 'translateX(-100%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))\r
+        ]),\r
+        transition(':leave', [\r
+            style({ transform: 'translateX(0%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))\r
+        ])\r
+    ]);\r
+}\r
+\r
+export function slideToLeft() {\r
+    return trigger('routerTransition', [\r
+        state('void', style({})),\r
+        state('*', style({})),\r
+        transition(':enter', [\r
+            style({ transform: 'translateX(100%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))\r
+        ]),\r
+        transition(':leave', [\r
+            style({ transform: 'translateX(0%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))\r
+        ])\r
+    ]);\r
+}\r
+\r
+export function slideToBottom() {\r
+    return trigger('routerTransition', [\r
+        state('void', style({})),\r
+        state('*', style({})),\r
+        transition(':enter', [\r
+            style({ transform: 'translateY(-100%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))\r
+        ]),\r
+        transition(':leave', [\r
+            style({ transform: 'translateY(0%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))\r
+        ])\r
+    ]);\r
+}\r
+\r
+export function slideToTop() {\r
+    return trigger('routerTransition', [\r
+        state('void', style({})),\r
+        state('*', style({})),\r
+        transition(':enter', [\r
+            style({ transform: 'translateY(100%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))\r
+        ]),\r
+        transition(':leave', [\r
+            style({ transform: 'translateY(0%)' }),\r
+            animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))\r
+        ])\r
+    ]);\r
+}\r
+\r
+  \r
+export function routerTransitionCustom() {\r
+    alert("");\r
+    return trigger('routerAnimation', [\r
+        state('void', style({})),\r
+        state('*', style({})),\r
+      // LEFT TO RIGHT AKA RESET\r
+      transition('* => 0', [\r
+    // Initial state of new route\r
+    query(':enter',\r
+        style({\r
+        position: 'fixed',\r
+        width: '100%',\r
+        transform: 'translateX(-100%)'\r
+        }), { optional: true }),\r
+    // move page off screen right on leave\r
+    query(':leave',\r
+        animate('500ms ease',\r
+        style({\r
+            position: 'fixed',\r
+            width: '100%',\r
+            transform: 'translateX(100%)',\r
+        })\r
+        ), { optional: true }),\r
+    // move page in screen from left to right\r
+    query(':enter',\r
+        animate('500ms ease',\r
+        style({\r
+            opacity: 1,\r
+            transform: 'translateX(0%)'\r
+        })\r
+        ), { optional: true }),\r
+    ]),\r
+    // LEFT TO RIGHT AKA PREVIOUS\r
+    transition('* => 1', [\r
+    // Initial state of new route\r
+    query(':enter',\r
+        style({\r
+        position: 'fixed',\r
+        width: '100%',\r
+        transform: 'translateX(-100%)'\r
+        }), { optional: true }),\r
+    // move page off screen right on leave\r
+    query(':leave',\r
+        animate('500ms ease',\r
+        style({\r
+            position: 'fixed',\r
+            width: '100%',\r
+            transform: 'translateX(100%)',\r
+        })\r
+        ), { optional: true }),\r
+    // move page in screen from left to right\r
+    query(':enter',\r
+        animate('500ms ease',\r
+        style({\r
+            opacity: 1,\r
+            transform: 'translateX(0%)'\r
+        })\r
+        ), { optional: true }),\r
+    ]),\r
+    // RIGHT TO LEFT AKA NEXT\r
+    transition('* => 2', [\r
+    // Initial state of new route\r
+    query(':enter',\r
+        style({\r
+        position: 'fixed',\r
+        width: '100%',\r
+        transform: 'translateX(100%)'\r
+        }), { optional: true }),\r
+    // move page off screen right on leave\r
+    query(':leave',\r
+        animate('500ms ease',\r
+        style({\r
+            position: 'fixed',\r
+            width: '100%',\r
+            transform: 'translateX(-100%)',\r
+        })\r
+        ), { optional: true }),\r
+    // move page in screen from left to right\r
+    query(':enter',\r
+        animate('500ms ease',\r
+        style({\r
+            opacity: 1,\r
+            transform: 'translateX(0%)'\r
+        })\r
+        ), { optional: true }),\r
+    ])\r
+    \r
+    ]);\r
+   \r
+}\r
+  
\ No newline at end of file