ngx-edu-sharing-ui 0.7.0

package/src/lib/util/ui-animation.ts

@@ -0,0 +1,154 @@
+import { style, animate, transition, trigger, state } from '@angular/animations';
+export class UIAnimation {
+    public static ANIMATION_TIME_FAST = 100;
+    public static ANIMATION_TIME_NORMAL = 200;
+    public static ANIMATION_TIME_SLOW = 300;
+    public static fade(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [style({ opacity: 0 }), animate(time, style({ opacity: 1 }))]),
+            transition(':leave', [animate(time, style({ opacity: 0 }))]),
+        ];
+    }
+    public static fromBottom(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({ transform: 'translateY(100%)' }),
+                animate(time, style({ transform: 'translateY(0)' })),
+            ]),
+            transition(':leave', [
+                style({ transform: 'translateY(0)' }),
+                animate(time, style({ transform: 'translateY(100%)' })),
+            ]),
+        ];
+    }
+    public static fromLeft(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({ transform: 'translateX(-100%)' }),
+                animate(time, style({ transform: 'translateX(0)' })),
+            ]),
+            transition(':leave', [
+                style({ transform: 'translateX(0)' }),
+                animate(time, style({ transform: 'translateX(-100%)' })),
+            ]),
+        ];
+    }
+    public static fromRight(time: number | string = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({ transform: 'translateX(100%)' }),
+                animate(time, style({ transform: 'translateX(0)' })),
+            ]),
+            transition(':leave', [
+                style({ transform: 'translateX(0)' }),
+                animate(time, style({ transform: 'translateX(100%)' })),
+            ]),
+        ];
+    }
+    public static infobarBottom(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({ bottom: '-70px' }),
+                animate(time + 'ms ease', style({ bottom: '0' })),
+            ]),
+            transition(':leave', [
+                style({ bottom: '0' }),
+                animate(time + 'ms ease', style({ bottom: '-70px' })),
+            ]),
+        ];
+    }
+    /**
+     * Useful animation for opening any overflow menus
+     * @param time
+     * @returns {AnimationStateTransitionMetadata[]}
+     */
+    public static openOverlay(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({ 'transform-origin': '50% 0%', transform: 'scaleY(0.5)', opacity: 0 }),
+                animate(time, style({ transform: 'scaleY(1)', opacity: 1 })),
+            ]),
+            transition(':leave', [
+                style({ 'transform-origin': '50% 0%', transform: 'scaleY(1)', opacity: 1 }),
+                animate(time, style({ transform: 'scaleY(0.5)', opacity: 0 })),
+            ]),
+        ];
+    }
+    /**
+     * Useful animation for opening any overflow menus - inverted (from bottom to top)
+     * @param time
+     * @returns {AnimationStateTransitionMetadata[]}
+     */
+    public static openOverlayBottom(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({ 'transform-origin': '50% 100%', transform: 'scaleY(0.5)', opacity: 0 }),
+                animate(time, style({ transform: 'scaleY(1)', opacity: 1 })),
+            ]),
+            transition(':leave', [
+                style({ 'transform-origin': '50% 100%', transform: 'scaleY(1)', opacity: 1 }),
+                animate(time, style({ transform: 'scaleY(0.5)', opacity: 0 })),
+            ]),
+        ];
+    }
+    /**
+     * Useful animation to switch different content insides a dialog (navigating between contents)
+     * @param time
+     * @returns {AnimationStateTransitionMetadata[]}
+     */
+    public static switchDialog(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({ 'transform-origin': '50% 0%', transform: 'scaleY(0)', opacity: 0 }),
+                animate(time, style({ transform: 'scaleY(1)', opacity: 1 })),
+            ]),
+        ];
+    }
+    /**
+     * Useful animation to switch different content insides a dialog (navigating between contents)
+     * This is a special variant which does work without ngIf fields, it will remove display states
+     */
+    public static switchDialogBoolean(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            state(
+                'false',
+                style({
+                    opacity: 0,
+                    'transform-origin': '50% 0%',
+                    transform: 'scaleY(0)',
+                    display: 'none',
+                }),
+            ),
+            state(
+                'true',
+                style({ opacity: 1, 'transform-origin': '50% 0%', transform: 'scaleY(100%)' }),
+            ),
+            transition('false => true', [style({ display: '' }), animate(time + 'ms ease-in-out')]),
+            transition('true => false', [animate(time + 'ms ease-in-out')]),
+        ];
+    }
+    /**
+     * Useful animation for showing any modal cards
+     * @param time
+     * @returns {AnimationStateTransitionMetadata[]}
+     */
+    public static cardAnimation(time = UIAnimation.ANIMATION_TIME_NORMAL) {
+        return [
+            transition(':enter', [
+                style({
+                    'transform-origin': '50% 0%',
+                    transform: 'scaleY(0.5) translateY(-100%)',
+                    opacity: 0,
+                }),
+                animate(
+                    time + 'ms ease',
+                    style({ transform: 'scaleY(1) translateY(0)', opacity: 1 }),
+                ),
+            ]),
+            transition(':leave', [
+                style({ 'transform-origin': '50% 0%', opacity: 1 }),
+                animate(time + 'ms ease', style({ opacity: 0 })),
+            ]),
+        ];
+    }
+}

package/src/lib/util/ui-constants.ts

@@ -0,0 +1,20 @@
+export class UIConstants {
+    public static ROUTER_PREFIX = 'components/';
+    // also declared in scss!
+    public static MOBILE_WIDTH = 700;
+    public static MOBILE_HEIGHT = 750;
+    public static MOBILE_HEIGHT_WITH_KEYBOARD = 550;
+    public static MOBILE_STAGE = 100;
+    public static MOBILE_TAB_SWITCH_WIDTH = UIConstants.MOBILE_WIDTH + UIConstants.MOBILE_STAGE * 2;
+    public static MEDIA_QUERY_MIN_WIDTH = 'min-width';
+    public static MEDIA_QUERY_MAX_WIDTH = 'max-width';
+    public static MEDIA_QUERY_MIN_HEIGHT = 'min-height';
+    public static MEDIA_QUERY_MAX_HEIGHT = 'max-height';
+
+    public static QUERY_PARAM_LIST_VIEW_TYPE = 'displayType';
+}
+export enum OPEN_URL_MODE {
+    Current, // Current Window, or In App browser on cordova
+    Blank, // New Window, or In App browser on cordova
+    BlankSystemBrowser, // New Window, or system browser on cordova
+}

package/src/module.ts

@@ -0,0 +1,76 @@
+/*
+ * Public API Surface of edu-sharing-ui
+ */
+
+export * from './lib/edu-sharing-ui.module';
+export * from './lib/edu-sharing-ui-configuration';
+export * from './lib/translations/fallback-translation-handler';
+export * from './lib/translations/translation-loader';
+export * from './lib/common/edu-sharing-ui-common.module';
+export * from './lib/translations/translations.module';
+export * from './lib/translations/translations.service';
+export * from './lib/node-entries/node-data-source';
+export * from './lib/node-entries/node-data-source-remote';
+export * from './lib/node-entries/items-cap';
+export * from './lib/node-entries/combined-data-source';
+export * from './lib/node-entries/entries-model';
+export * from './lib/node-entries/node-entries-global.service';
+export * from './lib/node-entries/node-cache';
+export * from './lib/node-entries/node-entries.module';
+export * from './lib/node-entries/node-entries-wrapper.component';
+export * from './lib/node-entries/list-item-label.pipe';
+export * from './lib/directives/icon.directive';
+export * from './lib/directives/border-box-observer.directive';
+export * from './lib/directives/drag-nodes/drag-nodes';
+export * from './lib/directives/drag-nodes/nodes-drop-target.directive';
+export * from './lib/directives/drag-nodes/nodes-drag-source.directive';
+export * from './lib/directives/drag-nodes/nodes-drag.directive';
+export * from './lib/directives/check-text-overflow.directive';
+export * from './lib/directives/focus-state.directive';
+export * from './lib/sort-dropdown/sort-dropdown.component';
+export * from './lib/actionbar/actionbar.component';
+export * from './lib/list-items/list-items.module';
+export * from './lib/list-items/list-text/list-text.component';
+export * from './lib/list-items/list-base/list-base.component';
+export * from './lib/list-items/list-counts/list-counts.component';
+export * from './lib/list-items/format-duration.pipe';
+export * from './lib/list-items/node-row/node-row.component';
+export * from './lib/pipes/format-date.pipe';
+export * from './lib/pipes/vcard-name.pipe';
+export * from './lib/pipes/node-icon.pipe';
+export * from './lib/pipes/node-image.pipe';
+export * from './lib/pipes/node-image-size.pipe';
+export * from './lib/pipes/file-size.pipe';
+export * from './lib/pipes/node-person-name.pipe';
+export * from './lib/pipes/node-title.pipe';
+export * from './lib/services/abstract/app.service';
+export * from './lib/services/abstract/options-helper.service';
+export * from './lib/services/abstract/keyboard-shortcuts.service';
+export * from './lib/services/abstract/toast.service';
+export * from './lib/services/local-events.service';
+export * from './lib/services/ui.service';
+export * from './lib/services/accessibility.service';
+export * from './lib/services/nodes-drag-drop.service';
+export * from './lib/services/options-helper-data.service';
+export * from './lib/services/temporary-storage.service';
+export * from './lib/services/node-helper.service';
+export * from './lib/services/repo-url.service';
+export * from './lib/types/workflow';
+export * from './lib/types/drag-drop';
+export * from './lib/types/option-item';
+export * from './lib/types/keyboard-shortcuts';
+export * from './lib/types/list-item';
+export * from './lib/types/accessibillity';
+export * from './lib/util/color-helper';
+export * from './lib/util/VCard';
+export * from './lib/util/functions';
+export * from './lib/util/DateHelper';
+export * from './lib/util/helper';
+export * from './lib/util/rest-helper';
+export * from './lib/util/duration-helper';
+export * from './lib/util/ui-animation';
+export * from './lib/util/ui-constants';
+export * from './lib/util/isNumeric';
+export * from './lib/spinner/spinner.component';
+export * from './lib/node-url/node-url.component';
+export * from './lib/dropdown/dropdown.component';

package/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+    context(
+        path: string,
+        deep?: boolean,
+        filter?: RegExp,
+    ): {
+        <T>(id: string): T;
+        keys(): string[];
+    };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}