MOBILE-3320 core: Move animation helpers

src/core/classes/animations.ts

@@ -1,65 +0,0 @@
-// (C) Copyright 2015 Moodle Pty Ltd.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { trigger, style, transition, animate, keyframes } from '@angular/animations';
-
-export const coreShowHideAnimation = trigger('coreShowHideAnimation', [
-    transition(':enter', [
-        style({ opacity: 0 }),
-        animate('500ms ease-in-out', style({ opacity: 1 })),
-    ]),
-    transition(':leave', [
-        style({ opacity: 1 }),
-        animate('500ms ease-in-out', style({ opacity: 0 })),
-    ]),
-]);
-
-export const coreSlideInOut = trigger('coreSlideInOut', [
-    // Enter animation.
-    transition('void => fromLeft', [
-        style({ transform: 'translateX(0)', opacity: 1 }),
-        animate(300, keyframes([
-            style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
-            style({ opacity: 1, transform: 'translateX(5%)',  offset: 0.7 }),
-            style({ opacity: 1, transform: 'translateX(0)',     offset: 1.0 }),
-        ])),
-    ]),
-    // Leave animation.
-    transition('fromLeft => void', [
-        style({ transform: 'translateX(-100%)', opacity: 0 }),
-        animate(300, keyframes([
-            style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
-            style({ opacity: 1, transform: 'translateX(5%)',  offset: 0.3 }),
-            style({ opacity: 0, transform: 'translateX(-100%)',     offset: 1.0 }),
-        ])),
-    ]),
-    // Enter animation.
-    transition('void => fromRight', [
-        style({ transform: 'translateX(0)', opacity: 1 }),
-        animate(300, keyframes([
-            style({ opacity: 0, transform: 'translateX(100%)',     offset: 0 }),
-            style({ opacity: 1, transform: 'translateX(-5%)', offset: 0.7 }),
-            style({ opacity: 1, transform: 'translateX(0)',  offset: 1.0 }),
-        ])),
-    ]),
-    // Leave animation.
-    transition('fromRight => void', [
-        style({ transform: 'translateX(-100%)', opacity: 0 }),
-        animate(300, keyframes([
-            style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
-            style({ opacity: 1, transform: 'translateX(-5%)',  offset: 0.3 }),
-            style({ opacity: 0, transform: 'translateX(100%)',     offset: 1.0 }),
-        ])),
-    ]),
-]);

src/core/components/animations.ts

@@ -0,0 +1,72 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { trigger, style, transition, animate, keyframes } from '@angular/animations';
+
+/**
+ * Defines core animations.
+ */
+export class CoreAnimations {
+
+    static readonly SHOW_HIDE = trigger('coreShowHideAnimation', [
+        transition(':enter', [
+            style({ opacity: 0 }),
+            animate('500ms ease-in-out', style({ opacity: 1 })),
+        ]),
+        transition(':leave', [
+            style({ opacity: 1 }),
+            animate('500ms ease-in-out', style({ opacity: 0 })),
+        ]),
+    ]);
+
+    static readonly SLIDE_IN_OUT = trigger('coreSlideInOut', [
+        // Enter animation.
+        transition('void => fromLeft', [
+            style({ transform: 'translateX(0)', opacity: 1 }),
+            animate(300, keyframes([
+                style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
+                style({ opacity: 1, transform: 'translateX(5%)',  offset: 0.7 }),
+                style({ opacity: 1, transform: 'translateX(0)',     offset: 1.0 }),
+            ])),
+        ]),
+        // Leave animation.
+        transition('fromLeft => void', [
+            style({ transform: 'translateX(-100%)', opacity: 0 }),
+            animate(300, keyframes([
+                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
+                style({ opacity: 1, transform: 'translateX(5%)',  offset: 0.3 }),
+                style({ opacity: 0, transform: 'translateX(-100%)',     offset: 1.0 }),
+            ])),
+        ]),
+        // Enter animation.
+        transition('void => fromRight', [
+            style({ transform: 'translateX(0)', opacity: 1 }),
+            animate(300, keyframes([
+                style({ opacity: 0, transform: 'translateX(100%)',     offset: 0 }),
+                style({ opacity: 1, transform: 'translateX(-5%)', offset: 0.7 }),
+                style({ opacity: 1, transform: 'translateX(0)',  offset: 1.0 }),
+            ])),
+        ]),
+        // Leave animation.
+        transition('fromRight => void', [
+            style({ transform: 'translateX(-100%)', opacity: 0 }),
+            animate(300, keyframes([
+                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
+                style({ opacity: 1, transform: 'translateX(-5%)',  offset: 0.3 }),
+                style({ opacity: 0, transform: 'translateX(100%)',     offset: 1.0 }),
+            ])),
+        ]),
+    ]);
+
+}

src/core/components/download-refresh/download-refresh.ts

@@ -14,7 +14,7 @@
 
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CoreConstants } from '@/core/constants';
-import { coreShowHideAnimation } from '@classes/animations';
+import { CoreAnimations } from '@components/animations';
 
 /**
  * Component to show a download button with refresh option, the spinner and the status of it.
@@ -26,7 +26,7 @@ import { coreShowHideAnimation } from '@classes/animations';
     selector: 'core-download-refresh',
     templateUrl: 'core-download-refresh.html',
     styleUrls: ['download-refresh.scss'],
-    animations: [coreShowHideAnimation],
+    animations: [CoreAnimations.SHOW_HIDE],
 })
 export class CoreDownloadRefreshComponent {
 

src/core/components/loading/loading.ts

@@ -16,7 +16,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChange, ViewChild, ElementRe
 
 import { CoreEventLoadingChangedData, CoreEvents } from '@singletons/events';
 import { CoreUtils } from '@services/utils/utils';
-import { coreShowHideAnimation } from '@classes/animations';
+import { CoreAnimations } from '@components/animations';
 import { Translate } from '@singletons';
 
 /**
@@ -43,7 +43,7 @@ import { Translate } from '@singletons';
     selector: 'core-loading',
     templateUrl: 'core-loading.html',
     styleUrls: ['loading.scss'],
-    animations: [coreShowHideAnimation],
+    animations: [CoreAnimations.SHOW_HIDE],
 })
 export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {