From 6fe15d2534536e75968806f5338280aa0d16e0a7 Mon Sep 17 00:00:00 2001 From: Stefano Cappa Date: Tue, 30 Oct 2018 00:21:48 +0100 Subject: [PATCH] feat(): update all examples with the new gui based on official doc website #144 --- CHANGELOG.md | 1 + examples/angular-cli-6/angular.json | 4 +- .../src/app/app-routing.module.ts | 3 +- .../angular-cli-6/src/app/app.component.html | 19 +- .../angular-cli-6/src/app/app.component.scss | 5 + .../angular-cli-6/src/app/app.component.ts | 2 +- examples/angular-cli-6/src/app/app.module.ts | 12 +- .../carousel-ie11/carousel-ie11.component.ts | 2 +- .../src/app/carousel-ie11/carousel-ie11.html | 12 +- .../src/app/carousel-ie11/carousel-ie11.scss | 4 + .../src/app/carousel/carousel.html | 8 +- .../src/app/carousel/carousel.scss | 4 + .../src/app/home/home.component.ts | 176 +++++++++++++ examples/angular-cli-6/src/app/home/home.html | 12 + examples/angular-cli-6/src/app/home/home.scss | 143 ++++++++++ .../intro-header/intro-header.component.ts | 32 +++ .../src/app/intro-header/intro-header.html | 8 + .../src/app/intro-header/intro-header.scss | 73 ++++++ .../src/app/modal-gallery/modal-gallery.html | 2 +- .../src/app/modal-gallery/modal-gallery.scss | 4 + .../src/app/navbar/navbar.component.ts | 62 +++++ .../angular-cli-6/src/app/navbar/navbar.html | 74 ++++++ .../angular-cli-6/src/app/navbar/navbar.scss | 248 ++++++++++++++++++ .../src/app/plain-gallery/plain-gallery.html | 2 +- .../src/app/plain-gallery/plain-gallery.scss | 4 + examples/angular-cli-6/src/assets/menu.svg | 3 + examples/angular-cli-6/src/favicon.ico | Bin 5430 -> 0 bytes examples/angular-cli-6/src/favicon.png | Bin 0 -> 11671 bytes examples/angular-cli-6/src/index.html | 8 +- examples/angular-cli-6/src/styles.scss | 62 +++-- examples/angular-cli-6/src/tslint.json | 4 +- examples/angular-cli-material/angular.json | 4 +- .../src/app/app-routing.module.ts | 4 +- .../src/app/app.component.html | 32 +-- .../src/app/app.component.scss | 5 + .../src/app/app.component.ts | 2 +- .../src/app/app.module.ts | 15 +- .../src/app/carousel-ie11/carousel-ie11.html | 12 +- .../src/app/carousel-ie11/carousel-ie11.scss | 4 + .../src/app/carousel/carousel.html | 8 +- .../src/app/carousel/carousel.scss | 4 + .../src/app/home/home.component.ts | 176 +++++++++++++ .../src/app/home/home.html | 12 + .../src/app/home/home.scss | 143 ++++++++++ .../intro-header/intro-header.component.ts | 32 +++ .../src/app/intro-header/intro-header.html | 8 + .../src/app/intro-header/intro-header.scss | 73 ++++++ .../src/app/modal-gallery/modal-gallery.html | 2 +- .../src/app/modal-gallery/modal-gallery.scss | 4 + .../src/app/navbar/navbar.component.ts | 62 +++++ .../src/app/navbar/navbar.html | 74 ++++++ .../src/app/navbar/navbar.scss | 248 ++++++++++++++++++ .../src/app/plain-gallery/plain-gallery.html | 2 +- .../src/app/plain-gallery/plain-gallery.scss | 4 + .../angular-cli-material/src/assets/menu.svg | 4 + examples/angular-cli-material/src/favicon.ico | Bin 5430 -> 0 bytes examples/angular-cli-material/src/favicon.png | Bin 0 -> 11671 bytes examples/angular-cli-material/src/index.html | 11 +- examples/angular-cli-material/src/styles.scss | 62 +++-- examples/angular-cli-material/src/tslint.json | 4 +- examples/angular-cli/angular.json | 4 +- .../angular-cli/src/app/app-routing.module.ts | 3 +- .../angular-cli/src/app/app.component.html | 19 +- .../angular-cli/src/app/app.component.scss | 5 + examples/angular-cli/src/app/app.component.ts | 2 +- examples/angular-cli/src/app/app.module.ts | 12 +- .../carousel-ie11/carousel-ie11.component.ts | 2 +- .../src/app/carousel-ie11/carousel-ie11.html | 12 +- .../src/app/carousel-ie11/carousel-ie11.scss | 4 + .../src/app/carousel/carousel.html | 8 +- .../src/app/carousel/carousel.scss | 4 + .../src/app/home/home.component.ts | 176 +++++++++++++ examples/angular-cli/src/app/home/home.html | 12 + examples/angular-cli/src/app/home/home.scss | 143 ++++++++++ .../intro-header/intro-header.component.ts | 32 +++ .../src/app/intro-header/intro-header.html | 8 + .../src/app/intro-header/intro-header.scss | 73 ++++++ .../src/app/modal-gallery/modal-gallery.html | 2 +- .../src/app/modal-gallery/modal-gallery.scss | 4 + .../src/app/navbar/navbar.component.ts | 62 +++++ .../angular-cli/src/app/navbar/navbar.html | 74 ++++++ .../angular-cli/src/app/navbar/navbar.scss | 248 ++++++++++++++++++ .../src/app/plain-gallery/plain-gallery.html | 2 +- .../src/app/plain-gallery/plain-gallery.scss | 4 + examples/angular-cli/src/assets/menu.svg | 3 + examples/angular-cli/src/favicon.ico | Bin 5430 -> 0 bytes examples/angular-cli/src/favicon.png | Bin 0 -> 11671 bytes examples/angular-cli/src/index.html | 8 +- examples/angular-cli/src/styles.scss | 62 +++-- examples/angular-cli/src/tslint.json | 4 +- examples/systemjs/app/app-routing.module.ts | 3 +- examples/systemjs/app/app.component.css | 13 +- examples/systemjs/app/app.component.html | 21 +- examples/systemjs/app/app.component.ts | 2 +- examples/systemjs/app/app.module.ts | 14 +- .../app/carousel-ie11/carousel-ie11.css | 27 ++ .../app/carousel-ie11/carousel-ie11.html | 12 +- examples/systemjs/app/carousel/carousel.css | 27 ++ examples/systemjs/app/carousel/carousel.html | 8 +- examples/systemjs/app/home/home.component.ts | 176 +++++++++++++ .../systemjs/app/{main.css => home/home.css} | 66 ++--- examples/systemjs/app/home/home.html | 12 + .../intro-header/intro-header.component.ts | 32 +++ .../app/intro-header/intro-header.css | 55 ++++ .../app/intro-header/intro-header.html | 8 + .../modal-gallery/modal-gallery.component.ts | 36 +-- .../app/modal-gallery/modal-gallery.css | 49 ++-- .../app/modal-gallery/modal-gallery.html | 23 +- .../systemjs/app/navbar/navbar.component.ts | 62 +++++ examples/systemjs/app/navbar/navbar.css | 212 +++++++++++++++ examples/systemjs/app/navbar/navbar.html | 74 ++++++ .../plain-gallery.component.js.map | 1 - .../app/plain-gallery/plain-gallery.css | 49 ++-- .../app/plain-gallery/plain-gallery.html | 2 +- examples/systemjs/assets/favicon.png | Bin 0 -> 11671 bytes examples/systemjs/assets/menu.svg | 4 + examples/systemjs/index.html | 30 ++- examples/universal/angular.json | 4 +- .../universal/src/app/app-routing.module.ts | 3 +- examples/universal/src/app/app.component.html | 22 +- examples/universal/src/app/app.component.scss | 5 + examples/universal/src/app/app.component.ts | 2 +- examples/universal/src/app/app.module.ts | 14 +- .../src/app/carousel-ie11/carousel-ie11.html | 12 +- .../src/app/carousel-ie11/carousel-ie11.scss | 4 + .../universal/src/app/carousel/carousel.html | 8 +- .../universal/src/app/carousel/carousel.scss | 4 + .../universal/src/app/home/home.component.ts | 176 +++++++++++++ examples/universal/src/app/home/home.html | 12 + examples/universal/src/app/home/home.scss | 143 ++++++++++ .../intro-header/intro-header.component.ts | 32 +++ .../src/app/intro-header/intro-header.html | 8 + .../src/app/intro-header/intro-header.scss | 73 ++++++ .../src/app/modal-gallery/modal-gallery.html | 2 +- .../src/app/modal-gallery/modal-gallery.scss | 4 + .../src/app/navbar/navbar.component.ts | 62 +++++ examples/universal/src/app/navbar/navbar.html | 74 ++++++ examples/universal/src/app/navbar/navbar.scss | 248 ++++++++++++++++++ .../src/app/plain-gallery/plain-gallery.html | 2 +- .../src/app/plain-gallery/plain-gallery.scss | 4 + examples/universal/src/assets/menu.svg | 3 + examples/universal/src/favicon.ico | Bin 5430 -> 0 bytes examples/universal/src/favicon.png | Bin 0 -> 11671 bytes examples/universal/src/index.html | 8 +- examples/universal/src/styles.css | 7 + examples/universal/src/tslint.json | 4 +- examples/universal/tslint.json | 2 +- src/_variables.scss | 21 -- .../{app.component.scss => app.component.css} | 5 + src/app/app.component.html | 8 +- src/app/app.component.ts | 2 +- src/app/app.module.ts | 12 +- src/app/carousel-ie11/carousel-ie11.scss | 4 + src/app/carousel/carousel.scss | 4 + src/app/home/home.html | 5 +- src/app/home/home.scss | 5 + .../intro-header/intro-header.component.ts | 32 +++ src/app/intro-header/intro-header.html | 8 + src/app/intro-header/intro-header.scss | 73 ++++++ src/app/modal-gallery/modal-gallery.scss | 4 + src/app/navbar/navbar.html | 16 -- src/app/navbar/navbar.scss | 8 + src/app/plain-gallery/plain-gallery.scss | 4 + src/styles.scss | 4 +- 164 files changed, 4742 insertions(+), 429 deletions(-) create mode 100644 examples/angular-cli-6/src/app/home/home.component.ts create mode 100644 examples/angular-cli-6/src/app/home/home.html create mode 100644 examples/angular-cli-6/src/app/home/home.scss create mode 100644 examples/angular-cli-6/src/app/intro-header/intro-header.component.ts create mode 100644 examples/angular-cli-6/src/app/intro-header/intro-header.html create mode 100644 examples/angular-cli-6/src/app/intro-header/intro-header.scss create mode 100644 examples/angular-cli-6/src/app/navbar/navbar.component.ts create mode 100644 examples/angular-cli-6/src/app/navbar/navbar.html create mode 100644 examples/angular-cli-6/src/app/navbar/navbar.scss create mode 100644 examples/angular-cli-6/src/assets/menu.svg delete mode 100644 examples/angular-cli-6/src/favicon.ico create mode 100644 examples/angular-cli-6/src/favicon.png create mode 100644 examples/angular-cli-material/src/app/home/home.component.ts create mode 100644 examples/angular-cli-material/src/app/home/home.html create mode 100644 examples/angular-cli-material/src/app/home/home.scss create mode 100644 examples/angular-cli-material/src/app/intro-header/intro-header.component.ts create mode 100644 examples/angular-cli-material/src/app/intro-header/intro-header.html create mode 100644 examples/angular-cli-material/src/app/intro-header/intro-header.scss create mode 100644 examples/angular-cli-material/src/app/navbar/navbar.component.ts create mode 100644 examples/angular-cli-material/src/app/navbar/navbar.html create mode 100644 examples/angular-cli-material/src/app/navbar/navbar.scss create mode 100644 examples/angular-cli-material/src/assets/menu.svg delete mode 100644 examples/angular-cli-material/src/favicon.ico create mode 100644 examples/angular-cli-material/src/favicon.png create mode 100644 examples/angular-cli/src/app/home/home.component.ts create mode 100644 examples/angular-cli/src/app/home/home.html create mode 100644 examples/angular-cli/src/app/home/home.scss create mode 100644 examples/angular-cli/src/app/intro-header/intro-header.component.ts create mode 100644 examples/angular-cli/src/app/intro-header/intro-header.html create mode 100644 examples/angular-cli/src/app/intro-header/intro-header.scss create mode 100644 examples/angular-cli/src/app/navbar/navbar.component.ts create mode 100644 examples/angular-cli/src/app/navbar/navbar.html create mode 100644 examples/angular-cli/src/app/navbar/navbar.scss create mode 100644 examples/angular-cli/src/assets/menu.svg delete mode 100644 examples/angular-cli/src/favicon.ico create mode 100644 examples/angular-cli/src/favicon.png create mode 100644 examples/systemjs/app/home/home.component.ts rename examples/systemjs/app/{main.css => home/home.css} (58%) create mode 100644 examples/systemjs/app/home/home.html create mode 100644 examples/systemjs/app/intro-header/intro-header.component.ts create mode 100644 examples/systemjs/app/intro-header/intro-header.css create mode 100644 examples/systemjs/app/intro-header/intro-header.html create mode 100644 examples/systemjs/app/navbar/navbar.component.ts create mode 100644 examples/systemjs/app/navbar/navbar.css create mode 100644 examples/systemjs/app/navbar/navbar.html delete mode 100644 examples/systemjs/app/plain-gallery/plain-gallery.component.js.map create mode 100644 examples/systemjs/assets/favicon.png create mode 100644 examples/systemjs/assets/menu.svg create mode 100644 examples/universal/src/app/home/home.component.ts create mode 100644 examples/universal/src/app/home/home.html create mode 100644 examples/universal/src/app/home/home.scss create mode 100644 examples/universal/src/app/intro-header/intro-header.component.ts create mode 100644 examples/universal/src/app/intro-header/intro-header.html create mode 100644 examples/universal/src/app/intro-header/intro-header.scss create mode 100644 examples/universal/src/app/navbar/navbar.component.ts create mode 100644 examples/universal/src/app/navbar/navbar.html create mode 100644 examples/universal/src/app/navbar/navbar.scss create mode 100644 examples/universal/src/assets/menu.svg delete mode 100644 examples/universal/src/favicon.ico create mode 100644 examples/universal/src/favicon.png delete mode 100644 src/_variables.scss rename src/app/{app.component.scss => app.component.css} (96%) create mode 100644 src/app/intro-header/intro-header.component.ts create mode 100644 src/app/intro-header/intro-header.html create mode 100644 src/app/intro-header/intro-header.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index da9adee2..4a4f443a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - write full internal documentation (npm run docs) ### Demos +- create a new GUI for all examples based on the official documentation website v7 - update all examples, adding @angular/cdk (also to SystemJS example), because it was missing diff --git a/examples/angular-cli-6/angular.json b/examples/angular-cli-6/angular.json index 17cf437f..63c70809 100644 --- a/examples/angular-cli-6/angular.json +++ b/examples/angular-cli-6/angular.json @@ -22,7 +22,7 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", - "assets": ["src/favicon.ico", "src/assets"], + "assets": ["src/favicon.png", "src/assets"], "styles": ["src/styles.scss"], "scripts": [] }, @@ -72,7 +72,7 @@ "karmaConfig": "src/karma.conf.js", "styles": ["styles.scss"], "scripts": [], - "assets": ["src/favicon.ico", "src/assets"] + "assets": ["src/favicon.png", "src/assets"] } }, "lint": { diff --git a/examples/angular-cli-6/src/app/app-routing.module.ts b/examples/angular-cli-6/src/app/app-routing.module.ts index f1d1cf68..e2391d18 100644 --- a/examples/angular-cli-6/src/app/app-routing.module.ts +++ b/examples/angular-cli-6/src/app/app-routing.module.ts @@ -5,9 +5,10 @@ import { ModalGalleryComponent } from './modal-gallery/modal-gallery.component'; import { PlainGalleryComponent } from './plain-gallery/plain-gallery.component'; import { CarouselComponent } from './carousel/carousel.component'; import { CarouselIe11Component } from './carousel-ie11/carousel-ie11.component'; +import { HomeComponent } from './home/home.component'; const routes: Routes = [ - { path: '', component: CarouselComponent }, + { path: '', component: HomeComponent }, { path: 'carousel', component: CarouselComponent }, { path: 'carousel-ie11', component: CarouselIe11Component }, { path: 'modal', component: ModalGalleryComponent }, diff --git a/examples/angular-cli-6/src/app/app.component.html b/examples/angular-cli-6/src/app/app.component.html index f2845a0d..018ca03d 100644 --- a/examples/angular-cli-6/src/app/app.component.html +++ b/examples/angular-cli-6/src/app/app.component.html @@ -1,19 +1,14 @@ -

@ks89/angular-modal-gallery

-
- -
+ + +



-

This library and these examples are created by Stefano Cappa (@Ks89)

+
+

This library and these examples are created by Stefano Cappa (@Ks89)

-
+

A special thank to all authors of icons used in this library:

-
+

A special thanks to all authors of spinners used in this library:

@@ -19,8 +19,8 @@

D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews


+ [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
This is my projected content!
@@ -29,8 +29,8 @@

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac

D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled


+ [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [carouselImageConfig]="{description: {strategy: 2}}">
This is my projected content!
diff --git a/examples/angular-cli-6/src/app/carousel-ie11/carousel-ie11.scss b/examples/angular-cli-6/src/app/carousel-ie11/carousel-ie11.scss index 829c2846..8318bad9 100644 --- a/examples/angular-cli-6/src/app/carousel-ie11/carousel-ie11.scss +++ b/examples/angular-cli-6/src/app/carousel-ie11/carousel-ie11.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-6/src/app/carousel/carousel.html b/examples/angular-cli-6/src/app/carousel/carousel.html index 6cc22977..aa2042bb 100644 --- a/examples/angular-cli-6/src/app/carousel/carousel.html +++ b/examples/angular-cli-6/src/app/carousel/carousel.html @@ -1,5 +1,5 @@

Carousel

-
+

ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode. For more info, please check the official documentation @@ -87,9 +87,9 @@

A9 - (id=108) - carousel example with buttons to enable/disable autoplay, ar

A10 - (id=109) - carousel example (minimal with all defaults) with outputs


+ (show)="onShow($event)" + (firstImage)="onFirstImage($event)" + (lastImage)="onLastImage($event)">

diff --git a/examples/angular-cli-6/src/app/carousel/carousel.scss b/examples/angular-cli-6/src/app/carousel/carousel.scss index 829c2846..8318bad9 100644 --- a/examples/angular-cli-6/src/app/carousel/carousel.scss +++ b/examples/angular-cli-6/src/app/carousel/carousel.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-6/src/app/home/home.component.ts b/examples/angular-cli-6/src/app/home/home.component.ts new file mode 100644 index 00000000..eb43eeb0 --- /dev/null +++ b/examples/angular-cli-6/src/app/home/home.component.ts @@ -0,0 +1,176 @@ +/* + The MIT License (MIT) + + Copyright (c) 2017-2018 Stefano Cappa (Ks89) + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + +import { Component } from '@angular/core'; + +import { AccessibilityConfig, Image, ImageEvent } from '@ks89/angular-modal-gallery'; + +@Component({ + selector: 'ks-home-page', + templateUrl: './home.html', + styleUrls: ['./home.scss'] +}) +export class HomeComponent { + imageIndex = 1; + galleryId = 1; + autoPlay = true; + showArrows = true; + showDots = true; + + imagesRect: Image[] = [ + new Image( + 0, + { + img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg', + description: 'Description 1' + }, + { + img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg', + title: 'First image title', + alt: 'First image alt', + ariaLabel: 'First image aria-label' + } + ), + new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }), + new Image( + 2, + { + img: '/assets/images/gallery/pexels-photo-52062.jpeg', + description: 'Description 3', + title: 'Third image title', + alt: 'Third image alt', + ariaLabel: 'Third image aria-label' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg', + description: 'Description 3' + } + ), + new Image( + 3, + { + img: '/assets/images/gallery/pexels-photo-66943.jpeg', + description: 'Description 4', + title: 'Fourth image title (modal obj)', + alt: 'Fourth image alt (modal obj)', + ariaLabel: 'Fourth image aria-label (modal obj)' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg', + title: 'Fourth image title (plain obj)', + alt: 'Fourth image alt (plain obj)', + ariaLabel: 'Fourth image aria-label (plain obj)' + } + ), + new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }), + new Image( + 5, + { + img: '/assets/images/gallery/pexels-photo-94420.jpeg', + description: 'Description 6' + }, + { img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' } + ), + new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' }) + ]; + + accessibilityConfig: AccessibilityConfig = { + backgroundAriaLabel: 'CUSTOM Modal gallery full screen background', + backgroundTitle: 'CUSTOM background title', + + plainGalleryContentAriaLabel: 'CUSTOM Plain gallery content', + plainGalleryContentTitle: 'CUSTOM plain gallery content title', + + modalGalleryContentAriaLabel: 'CUSTOM Modal gallery content', + modalGalleryContentTitle: 'CUSTOM modal gallery content title', + + loadingSpinnerAriaLabel: 'CUSTOM The current image is loading. Please be patient.', + loadingSpinnerTitle: 'CUSTOM The current image is loading. Please be patient.', + + mainContainerAriaLabel: 'CUSTOM Current image and navigation', + mainContainerTitle: 'CUSTOM main container title', + mainPrevImageAriaLabel: 'CUSTOM Previous image', + mainPrevImageTitle: 'CUSTOM Previous image', + mainNextImageAriaLabel: 'CUSTOM Next image', + mainNextImageTitle: 'CUSTOM Next image', + + dotsContainerAriaLabel: 'CUSTOM Image navigation dots', + dotsContainerTitle: 'CUSTOM dots container title', + dotAriaLabel: 'CUSTOM Navigate to image number', + + previewsContainerAriaLabel: 'CUSTOM Image previews', + previewsContainerTitle: 'CUSTOM previews title', + previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', + previewScrollPrevTitle: 'CUSTOM Scroll previous previews', + previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' + }; + + addRandomImage() { + const imageToCopy: Image = this.imagesRect[Math.floor(Math.random() * this.imagesRect.length)]; + const newImage: Image = new Image(this.imagesRect.length - 1 + 1, imageToCopy.modal, imageToCopy.plain); + this.imagesRect = [...this.imagesRect, newImage]; + } + + onChangeAutoPlay() { + this.autoPlay = !this.autoPlay; + } + + onChangeShowArrows() { + this.showArrows = !this.showArrows; + } + + onChangeShowDots() { + this.showDots = !this.showDots; + } + + // output evets + onShow(event: ImageEvent) { + console.log('show', event); + } + + onFirstImage(event: ImageEvent) { + console.log('firstImage', event); + } + + onLastImage(event: ImageEvent) { + console.log('lastImage', event); + } +} diff --git a/examples/angular-cli-6/src/app/home/home.html b/examples/angular-cli-6/src/app/home/home.html new file mode 100644 index 00000000..3f745f57 --- /dev/null +++ b/examples/angular-cli-6/src/app/home/home.html @@ -0,0 +1,12 @@ + +
+ +
+

Welcome

+

This is the official live example of @ks89/angular-modal-gallery. + To get started quickly you can try and check the sourcecode of this example.

+

If you need the full documentation with all apis, this is the official documentation website.

+ +

The official documentation is available at ks89.github.io/angular-modal-gallery-2018-v7.github.io

+
+ diff --git a/examples/angular-cli-6/src/app/home/home.scss b/examples/angular-cli-6/src/app/home/home.scss new file mode 100644 index 00000000..9bfe7ee6 --- /dev/null +++ b/examples/angular-cli-6/src/app/home/home.scss @@ -0,0 +1,143 @@ +// The MIT License (MIT) +// +// Copyright (c) 2017-2018 Stefano Cappa (Ks89) +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +$text-color: #fff; +$background: rgba(0, 0, 0, .7); + +.container { + margin-left: 15px; + margin-right: 15px; +} + +.my-app-custom-plain-container-row { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + .my-app-custom-image-row { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-column { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + + .my-app-custom-image-column { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-with-desc { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + figure { + margin: 0; + position: relative; + + img { + max-width: 100%; + height: auto; + cursor: pointer; + } + + figcaption { + background: rgba(0, 0, 0, .5); + color: #fff; + font-size: 85%; + padding: 5px; + position: absolute; + bottom: 3px; + left: 0; + right: 0; + } + } + + .description { + font-weight: bold; + text-align: center; + } + + .my-app-custom-image-with-desc { + height: auto; + margin-right: 2px; + width: 200px; + align-self: start; + } +} + +.more { + background: $background; + cursor: pointer; + color: $text-color; + padding-top: 4px; + height: 46px; + position: absolute; + text-align: center; + width: 50px; +} + + +.projected { + color: white; + font-weight: 600; + font-size: 24px; + text-align: center; + position: absolute; + top: 50%; + width: 100%; + pointer-events: none; +} diff --git a/examples/angular-cli-6/src/app/intro-header/intro-header.component.ts b/examples/angular-cli-6/src/app/intro-header/intro-header.component.ts new file mode 100644 index 00000000..2d781d74 --- /dev/null +++ b/examples/angular-cli-6/src/app/intro-header/intro-header.component.ts @@ -0,0 +1,32 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'ks-intro-header', + templateUrl: 'intro-header.html', + styleUrls: ['intro-header.scss'] +}) +export class IntroHeaderComponent {} diff --git a/examples/angular-cli-6/src/app/intro-header/intro-header.html b/examples/angular-cli-6/src/app/intro-header/intro-header.html new file mode 100644 index 00000000..5eec3f6a --- /dev/null +++ b/examples/angular-cli-6/src/app/intro-header/intro-header.html @@ -0,0 +1,8 @@ +
+ @ks89/angular-modal-gallery icon +

@ks89/angular-modal-gallery

+

Image gallery for Angular >=6

+

Currently v7

+
+
diff --git a/examples/angular-cli-6/src/app/intro-header/intro-header.scss b/examples/angular-cli-6/src/app/intro-header/intro-header.scss new file mode 100644 index 00000000..15547baa --- /dev/null +++ b/examples/angular-cli-6/src/app/intro-header/intro-header.scss @@ -0,0 +1,73 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +.intro-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: $color-primary; + background: linear-gradient(135deg, $color-primary, $color-secondary); + margin-top: 10px; + padding-bottom: 1px; + color: $color-white; + + h1 { + color: $color-white; + font-size: 3rem; + } +} + +.project-title { + margin-top: 20px; + font-size: 2.8rem; + text-align: center; +} + +img { + margin-top: 25px; + border-radius: 10px +} + +.lead { + font-size: 1rem; + text-align: center; + color: #d4d4d4; +} diff --git a/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.html b/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.html index 80a0893f..042d58d1 100644 --- a/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.html +++ b/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.html @@ -1,5 +1,5 @@

Modal Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.scss b/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.scss +++ b/examples/angular-cli-6/src/app/modal-gallery/modal-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-6/src/app/navbar/navbar.component.ts b/examples/angular-cli-6/src/app/navbar/navbar.component.ts new file mode 100644 index 00000000..7b54ea23 --- /dev/null +++ b/examples/angular-cli-6/src/app/navbar/navbar.component.ts @@ -0,0 +1,62 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { BreakpointObserver } from '@angular/cdk/layout'; + +@Component({ + selector: 'ks-navbar', + templateUrl: 'navbar.html', + styleUrls: ['navbar.scss'] +}) +export class NavbarComponent { + navbarHeight = '56px'; + // path: string = PATH + '/assets/amg.svg'; + + collapsed = false; + + constructor(private router: Router, breakpointObserver: BreakpointObserver) { + breakpointObserver.observe(['(min-width: 990px)']).subscribe(result => { + if (result.matches) { + console.log('min width 990px'); + this.collapsed = false; + } + }); + } + + isNavItemActive(location: string) { + return this.router.url.includes(location) ? 'active' : ''; + } + + onNavigateTo(path: string) { + this.collapsed = false; + this.router.navigate([path]); + } + + onToggle() { + this.collapsed = !this.collapsed; + this.navbarHeight = this.collapsed ? '56px' : '150px'; + } +} diff --git a/examples/angular-cli-6/src/app/navbar/navbar.html b/examples/angular-cli-6/src/app/navbar/navbar.html new file mode 100644 index 00000000..2fe67450 --- /dev/null +++ b/examples/angular-cli-6/src/app/navbar/navbar.html @@ -0,0 +1,74 @@ +

+ + + + diff --git a/examples/angular-cli-6/src/app/navbar/navbar.scss b/examples/angular-cli-6/src/app/navbar/navbar.scss new file mode 100644 index 00000000..706da1ce --- /dev/null +++ b/examples/angular-cli-6/src/app/navbar/navbar.scss @@ -0,0 +1,248 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +nav { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; +} + +ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +nav.nav-expanded { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: 990px) { + display: none; + } + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + cursor: pointer; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } + + > #githubButtons { + margin-right: 30px; + @media only screen and (max-width: 1059px) { + display: none; + } + + > .github-badge { + margin-left: 8px; + } + } +} + + +// cexpanded on mobile devices after pressing the hamburger button +nav.nav-collapsed { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-top: 8px; + width: 100%; + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + margin-top: 8px; + margin-bottom: 8px; + cursor: pointer; + width: 100%; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + width: 100%; + margin-top: 8px; + margin-bottom: 8px; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } +} + + + diff --git a/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.html b/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.html index 51851af0..9fc5f49a 100644 --- a/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.html +++ b/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.html @@ -1,5 +1,5 @@

Plain Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.scss b/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.scss +++ b/examples/angular-cli-6/src/app/plain-gallery/plain-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-6/src/assets/menu.svg b/examples/angular-cli-6/src/assets/menu.svg new file mode 100644 index 00000000..65fc9003 --- /dev/null +++ b/examples/angular-cli-6/src/assets/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/angular-cli-6/src/favicon.ico b/examples/angular-cli-6/src/favicon.ico deleted file mode 100644 index 8081c7ceaf2be08bf59010158c586170d9d2d517..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5430 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 TSZ~8n_o?M&RHQ2;&BFc%y(M80 literal 0 HcmV?d00001 diff --git a/examples/angular-cli-6/src/index.html b/examples/angular-cli-6/src/index.html index e709ff26..1c10a834 100644 --- a/examples/angular-cli-6/src/index.html +++ b/examples/angular-cli-6/src/index.html @@ -6,9 +6,13 @@ - + + + - + diff --git a/examples/angular-cli-6/src/styles.scss b/examples/angular-cli-6/src/styles.scss index 853fe932..1f4cfc54 100644 --- a/examples/angular-cli-6/src/styles.scss +++ b/examples/angular-cli-6/src/styles.scss @@ -1,35 +1,43 @@ -/* - The MIT License (MIT) - - Copyright (c) 2017-2018 Stefano Cappa (Ks89) - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - */ - -/* You can add global styles to this file, and also import other style files */ - +// The MIT License (MIT) +// +// Copyright (c) 2017-2018 Stefano Cappa (Ks89) +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +// You can add global styles to this file, and also import other style files + +body { + font-family: "Montserrat", sans-serif; + margin: 0; + padding: 0; +} -/* Not required by angular-modal-gallery. Used only in this demo */ +// Not required by angular-modal-gallery. Used only in this demo .red-text { color: red; } +.title { + text-align: center; + color: red; +} + .center-text { text-align: center; } diff --git a/examples/angular-cli-6/src/tslint.json b/examples/angular-cli-6/src/tslint.json index 52e2c1a5..0a734d04 100644 --- a/examples/angular-cli-6/src/tslint.json +++ b/examples/angular-cli-6/src/tslint.json @@ -4,13 +4,13 @@ "directive-selector": [ true, "attribute", - "app", + "ks", "camelCase" ], "component-selector": [ true, "element", - "app", + "ks", "kebab-case" ] } diff --git a/examples/angular-cli-material/angular.json b/examples/angular-cli-material/angular.json index 905d68cc..446eba55 100644 --- a/examples/angular-cli-material/angular.json +++ b/examples/angular-cli-material/angular.json @@ -22,7 +22,7 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", - "assets": ["src/favicon.ico", "src/assets"], + "assets": ["src/favicon.png", "src/assets"], "styles": [ { "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css" @@ -82,7 +82,7 @@ "styles.scss" ], "scripts": [], - "assets": ["src/favicon.ico", "src/assets"] + "assets": ["src/favicon.png", "src/assets"] } }, "lint": { diff --git a/examples/angular-cli-material/src/app/app-routing.module.ts b/examples/angular-cli-material/src/app/app-routing.module.ts index 73db3500..e2391d18 100644 --- a/examples/angular-cli-material/src/app/app-routing.module.ts +++ b/examples/angular-cli-material/src/app/app-routing.module.ts @@ -5,12 +5,12 @@ import { ModalGalleryComponent } from './modal-gallery/modal-gallery.component'; import { PlainGalleryComponent } from './plain-gallery/plain-gallery.component'; import { CarouselComponent } from './carousel/carousel.component'; import { CarouselIe11Component } from './carousel-ie11/carousel-ie11.component'; +import { HomeComponent } from './home/home.component'; const routes: Routes = [ - { path: '', component: CarouselComponent }, + { path: '', component: HomeComponent }, { path: 'carousel', component: CarouselComponent }, { path: 'carousel-ie11', component: CarouselIe11Component }, - { path: 'carousel', component: CarouselComponent }, { path: 'modal', component: ModalGalleryComponent }, { path: 'plain', component: PlainGalleryComponent } ]; diff --git a/examples/angular-cli-material/src/app/app.component.html b/examples/angular-cli-material/src/app/app.component.html index 896835ca..b372fca4 100644 --- a/examples/angular-cli-material/src/app/app.component.html +++ b/examples/angular-cli-material/src/app/app.component.html @@ -1,17 +1,11 @@ -

@ks89/angular-modal-gallery

-
- -
+ -
-
-
-
+

+ + + + +

Example of Angular Material

Example of Angular Material
-
-
-
- -

-

This library and these examples are created by Stefano Cappa (@Ks89)

+
+

This library and these examples are created by Stefano Cappa (@Ks89)

-
+

A special thank to all authors of icons used in this library:

-
+

A special thanks to all authors of spinners used in this library:

@@ -19,8 +19,8 @@

D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews


+ [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
This is my projected content!
@@ -29,8 +29,8 @@

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac

D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled


+ [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [carouselImageConfig]="{description: {strategy: 2}}">
This is my projected content!
diff --git a/examples/angular-cli-material/src/app/carousel-ie11/carousel-ie11.scss b/examples/angular-cli-material/src/app/carousel-ie11/carousel-ie11.scss index 829c2846..8318bad9 100644 --- a/examples/angular-cli-material/src/app/carousel-ie11/carousel-ie11.scss +++ b/examples/angular-cli-material/src/app/carousel-ie11/carousel-ie11.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-material/src/app/carousel/carousel.html b/examples/angular-cli-material/src/app/carousel/carousel.html index 6cc22977..aa2042bb 100644 --- a/examples/angular-cli-material/src/app/carousel/carousel.html +++ b/examples/angular-cli-material/src/app/carousel/carousel.html @@ -1,5 +1,5 @@

Carousel

-
+

ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode. For more info, please check the official documentation @@ -87,9 +87,9 @@

A9 - (id=108) - carousel example with buttons to enable/disable autoplay, ar

A10 - (id=109) - carousel example (minimal with all defaults) with outputs


+ (show)="onShow($event)" + (firstImage)="onFirstImage($event)" + (lastImage)="onLastImage($event)">

diff --git a/examples/angular-cli-material/src/app/carousel/carousel.scss b/examples/angular-cli-material/src/app/carousel/carousel.scss index 829c2846..8318bad9 100644 --- a/examples/angular-cli-material/src/app/carousel/carousel.scss +++ b/examples/angular-cli-material/src/app/carousel/carousel.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-material/src/app/home/home.component.ts b/examples/angular-cli-material/src/app/home/home.component.ts new file mode 100644 index 00000000..eb43eeb0 --- /dev/null +++ b/examples/angular-cli-material/src/app/home/home.component.ts @@ -0,0 +1,176 @@ +/* + The MIT License (MIT) + + Copyright (c) 2017-2018 Stefano Cappa (Ks89) + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + +import { Component } from '@angular/core'; + +import { AccessibilityConfig, Image, ImageEvent } from '@ks89/angular-modal-gallery'; + +@Component({ + selector: 'ks-home-page', + templateUrl: './home.html', + styleUrls: ['./home.scss'] +}) +export class HomeComponent { + imageIndex = 1; + galleryId = 1; + autoPlay = true; + showArrows = true; + showDots = true; + + imagesRect: Image[] = [ + new Image( + 0, + { + img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg', + description: 'Description 1' + }, + { + img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg', + title: 'First image title', + alt: 'First image alt', + ariaLabel: 'First image aria-label' + } + ), + new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }), + new Image( + 2, + { + img: '/assets/images/gallery/pexels-photo-52062.jpeg', + description: 'Description 3', + title: 'Third image title', + alt: 'Third image alt', + ariaLabel: 'Third image aria-label' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg', + description: 'Description 3' + } + ), + new Image( + 3, + { + img: '/assets/images/gallery/pexels-photo-66943.jpeg', + description: 'Description 4', + title: 'Fourth image title (modal obj)', + alt: 'Fourth image alt (modal obj)', + ariaLabel: 'Fourth image aria-label (modal obj)' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg', + title: 'Fourth image title (plain obj)', + alt: 'Fourth image alt (plain obj)', + ariaLabel: 'Fourth image aria-label (plain obj)' + } + ), + new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }), + new Image( + 5, + { + img: '/assets/images/gallery/pexels-photo-94420.jpeg', + description: 'Description 6' + }, + { img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' } + ), + new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' }) + ]; + + accessibilityConfig: AccessibilityConfig = { + backgroundAriaLabel: 'CUSTOM Modal gallery full screen background', + backgroundTitle: 'CUSTOM background title', + + plainGalleryContentAriaLabel: 'CUSTOM Plain gallery content', + plainGalleryContentTitle: 'CUSTOM plain gallery content title', + + modalGalleryContentAriaLabel: 'CUSTOM Modal gallery content', + modalGalleryContentTitle: 'CUSTOM modal gallery content title', + + loadingSpinnerAriaLabel: 'CUSTOM The current image is loading. Please be patient.', + loadingSpinnerTitle: 'CUSTOM The current image is loading. Please be patient.', + + mainContainerAriaLabel: 'CUSTOM Current image and navigation', + mainContainerTitle: 'CUSTOM main container title', + mainPrevImageAriaLabel: 'CUSTOM Previous image', + mainPrevImageTitle: 'CUSTOM Previous image', + mainNextImageAriaLabel: 'CUSTOM Next image', + mainNextImageTitle: 'CUSTOM Next image', + + dotsContainerAriaLabel: 'CUSTOM Image navigation dots', + dotsContainerTitle: 'CUSTOM dots container title', + dotAriaLabel: 'CUSTOM Navigate to image number', + + previewsContainerAriaLabel: 'CUSTOM Image previews', + previewsContainerTitle: 'CUSTOM previews title', + previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', + previewScrollPrevTitle: 'CUSTOM Scroll previous previews', + previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' + }; + + addRandomImage() { + const imageToCopy: Image = this.imagesRect[Math.floor(Math.random() * this.imagesRect.length)]; + const newImage: Image = new Image(this.imagesRect.length - 1 + 1, imageToCopy.modal, imageToCopy.plain); + this.imagesRect = [...this.imagesRect, newImage]; + } + + onChangeAutoPlay() { + this.autoPlay = !this.autoPlay; + } + + onChangeShowArrows() { + this.showArrows = !this.showArrows; + } + + onChangeShowDots() { + this.showDots = !this.showDots; + } + + // output evets + onShow(event: ImageEvent) { + console.log('show', event); + } + + onFirstImage(event: ImageEvent) { + console.log('firstImage', event); + } + + onLastImage(event: ImageEvent) { + console.log('lastImage', event); + } +} diff --git a/examples/angular-cli-material/src/app/home/home.html b/examples/angular-cli-material/src/app/home/home.html new file mode 100644 index 00000000..3f745f57 --- /dev/null +++ b/examples/angular-cli-material/src/app/home/home.html @@ -0,0 +1,12 @@ + +
+ +
+

Welcome

+

This is the official live example of @ks89/angular-modal-gallery. + To get started quickly you can try and check the sourcecode of this example.

+

If you need the full documentation with all apis, this is the official documentation website.

+ +

The official documentation is available at ks89.github.io/angular-modal-gallery-2018-v7.github.io

+
+ diff --git a/examples/angular-cli-material/src/app/home/home.scss b/examples/angular-cli-material/src/app/home/home.scss new file mode 100644 index 00000000..9bfe7ee6 --- /dev/null +++ b/examples/angular-cli-material/src/app/home/home.scss @@ -0,0 +1,143 @@ +// The MIT License (MIT) +// +// Copyright (c) 2017-2018 Stefano Cappa (Ks89) +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +$text-color: #fff; +$background: rgba(0, 0, 0, .7); + +.container { + margin-left: 15px; + margin-right: 15px; +} + +.my-app-custom-plain-container-row { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + .my-app-custom-image-row { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-column { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + + .my-app-custom-image-column { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-with-desc { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + figure { + margin: 0; + position: relative; + + img { + max-width: 100%; + height: auto; + cursor: pointer; + } + + figcaption { + background: rgba(0, 0, 0, .5); + color: #fff; + font-size: 85%; + padding: 5px; + position: absolute; + bottom: 3px; + left: 0; + right: 0; + } + } + + .description { + font-weight: bold; + text-align: center; + } + + .my-app-custom-image-with-desc { + height: auto; + margin-right: 2px; + width: 200px; + align-self: start; + } +} + +.more { + background: $background; + cursor: pointer; + color: $text-color; + padding-top: 4px; + height: 46px; + position: absolute; + text-align: center; + width: 50px; +} + + +.projected { + color: white; + font-weight: 600; + font-size: 24px; + text-align: center; + position: absolute; + top: 50%; + width: 100%; + pointer-events: none; +} diff --git a/examples/angular-cli-material/src/app/intro-header/intro-header.component.ts b/examples/angular-cli-material/src/app/intro-header/intro-header.component.ts new file mode 100644 index 00000000..2d781d74 --- /dev/null +++ b/examples/angular-cli-material/src/app/intro-header/intro-header.component.ts @@ -0,0 +1,32 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'ks-intro-header', + templateUrl: 'intro-header.html', + styleUrls: ['intro-header.scss'] +}) +export class IntroHeaderComponent {} diff --git a/examples/angular-cli-material/src/app/intro-header/intro-header.html b/examples/angular-cli-material/src/app/intro-header/intro-header.html new file mode 100644 index 00000000..5eec3f6a --- /dev/null +++ b/examples/angular-cli-material/src/app/intro-header/intro-header.html @@ -0,0 +1,8 @@ +
+ @ks89/angular-modal-gallery icon +

@ks89/angular-modal-gallery

+

Image gallery for Angular >=6

+

Currently v7

+
+
diff --git a/examples/angular-cli-material/src/app/intro-header/intro-header.scss b/examples/angular-cli-material/src/app/intro-header/intro-header.scss new file mode 100644 index 00000000..15547baa --- /dev/null +++ b/examples/angular-cli-material/src/app/intro-header/intro-header.scss @@ -0,0 +1,73 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +.intro-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: $color-primary; + background: linear-gradient(135deg, $color-primary, $color-secondary); + margin-top: 10px; + padding-bottom: 1px; + color: $color-white; + + h1 { + color: $color-white; + font-size: 3rem; + } +} + +.project-title { + margin-top: 20px; + font-size: 2.8rem; + text-align: center; +} + +img { + margin-top: 25px; + border-radius: 10px +} + +.lead { + font-size: 1rem; + text-align: center; + color: #d4d4d4; +} diff --git a/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.html b/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.html index 80a0893f..042d58d1 100644 --- a/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.html +++ b/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.html @@ -1,5 +1,5 @@

Modal Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.scss b/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.scss +++ b/examples/angular-cli-material/src/app/modal-gallery/modal-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-material/src/app/navbar/navbar.component.ts b/examples/angular-cli-material/src/app/navbar/navbar.component.ts new file mode 100644 index 00000000..7b54ea23 --- /dev/null +++ b/examples/angular-cli-material/src/app/navbar/navbar.component.ts @@ -0,0 +1,62 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { BreakpointObserver } from '@angular/cdk/layout'; + +@Component({ + selector: 'ks-navbar', + templateUrl: 'navbar.html', + styleUrls: ['navbar.scss'] +}) +export class NavbarComponent { + navbarHeight = '56px'; + // path: string = PATH + '/assets/amg.svg'; + + collapsed = false; + + constructor(private router: Router, breakpointObserver: BreakpointObserver) { + breakpointObserver.observe(['(min-width: 990px)']).subscribe(result => { + if (result.matches) { + console.log('min width 990px'); + this.collapsed = false; + } + }); + } + + isNavItemActive(location: string) { + return this.router.url.includes(location) ? 'active' : ''; + } + + onNavigateTo(path: string) { + this.collapsed = false; + this.router.navigate([path]); + } + + onToggle() { + this.collapsed = !this.collapsed; + this.navbarHeight = this.collapsed ? '56px' : '150px'; + } +} diff --git a/examples/angular-cli-material/src/app/navbar/navbar.html b/examples/angular-cli-material/src/app/navbar/navbar.html new file mode 100644 index 00000000..2fe67450 --- /dev/null +++ b/examples/angular-cli-material/src/app/navbar/navbar.html @@ -0,0 +1,74 @@ +

+ + + + diff --git a/examples/angular-cli-material/src/app/navbar/navbar.scss b/examples/angular-cli-material/src/app/navbar/navbar.scss new file mode 100644 index 00000000..706da1ce --- /dev/null +++ b/examples/angular-cli-material/src/app/navbar/navbar.scss @@ -0,0 +1,248 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +nav { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; +} + +ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +nav.nav-expanded { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: 990px) { + display: none; + } + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + cursor: pointer; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } + + > #githubButtons { + margin-right: 30px; + @media only screen and (max-width: 1059px) { + display: none; + } + + > .github-badge { + margin-left: 8px; + } + } +} + + +// cexpanded on mobile devices after pressing the hamburger button +nav.nav-collapsed { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-top: 8px; + width: 100%; + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + margin-top: 8px; + margin-bottom: 8px; + cursor: pointer; + width: 100%; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + width: 100%; + margin-top: 8px; + margin-bottom: 8px; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } +} + + + diff --git a/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.html b/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.html index 51851af0..9fc5f49a 100644 --- a/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.html +++ b/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.html @@ -1,5 +1,5 @@

Plain Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.scss b/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.scss +++ b/examples/angular-cli-material/src/app/plain-gallery/plain-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli-material/src/assets/menu.svg b/examples/angular-cli-material/src/assets/menu.svg new file mode 100644 index 00000000..d74ea2e5 --- /dev/null +++ b/examples/angular-cli-material/src/assets/menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/examples/angular-cli-material/src/favicon.ico b/examples/angular-cli-material/src/favicon.ico deleted file mode 100644 index 8081c7ceaf2be08bf59010158c586170d9d2d517..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5430 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 TSZ~8n_o?M&RHQ2;&BFc%y(M80 literal 0 HcmV?d00001 diff --git a/examples/angular-cli-material/src/index.html b/examples/angular-cli-material/src/index.html index 1fe22240..07ea50be 100644 --- a/examples/angular-cli-material/src/index.html +++ b/examples/angular-cli-material/src/index.html @@ -1,16 +1,19 @@ - - + AngularModalGalleryAngularcliMaterialDemo - + + + - + diff --git a/examples/angular-cli-material/src/styles.scss b/examples/angular-cli-material/src/styles.scss index 853fe932..1f4cfc54 100644 --- a/examples/angular-cli-material/src/styles.scss +++ b/examples/angular-cli-material/src/styles.scss @@ -1,35 +1,43 @@ -/* - The MIT License (MIT) - - Copyright (c) 2017-2018 Stefano Cappa (Ks89) - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - */ - -/* You can add global styles to this file, and also import other style files */ - +// The MIT License (MIT) +// +// Copyright (c) 2017-2018 Stefano Cappa (Ks89) +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +// You can add global styles to this file, and also import other style files + +body { + font-family: "Montserrat", sans-serif; + margin: 0; + padding: 0; +} -/* Not required by angular-modal-gallery. Used only in this demo */ +// Not required by angular-modal-gallery. Used only in this demo .red-text { color: red; } +.title { + text-align: center; + color: red; +} + .center-text { text-align: center; } diff --git a/examples/angular-cli-material/src/tslint.json b/examples/angular-cli-material/src/tslint.json index 52e2c1a5..0a734d04 100644 --- a/examples/angular-cli-material/src/tslint.json +++ b/examples/angular-cli-material/src/tslint.json @@ -4,13 +4,13 @@ "directive-selector": [ true, "attribute", - "app", + "ks", "camelCase" ], "component-selector": [ true, "element", - "app", + "ks", "kebab-case" ] } diff --git a/examples/angular-cli/angular.json b/examples/angular-cli/angular.json index 17eb205a..392869d2 100644 --- a/examples/angular-cli/angular.json +++ b/examples/angular-cli/angular.json @@ -22,7 +22,7 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", - "assets": ["src/favicon.ico", "src/assets"], + "assets": ["src/favicon.png", "src/assets"], "styles": ["src/styles.scss"], "scripts": [] }, @@ -72,7 +72,7 @@ "karmaConfig": "src/karma.conf.js", "styles": ["styles.scss"], "scripts": [], - "assets": ["src/favicon.ico", "src/assets"] + "assets": ["src/favicon.png", "src/assets"] } }, "lint": { diff --git a/examples/angular-cli/src/app/app-routing.module.ts b/examples/angular-cli/src/app/app-routing.module.ts index f1d1cf68..e2391d18 100644 --- a/examples/angular-cli/src/app/app-routing.module.ts +++ b/examples/angular-cli/src/app/app-routing.module.ts @@ -5,9 +5,10 @@ import { ModalGalleryComponent } from './modal-gallery/modal-gallery.component'; import { PlainGalleryComponent } from './plain-gallery/plain-gallery.component'; import { CarouselComponent } from './carousel/carousel.component'; import { CarouselIe11Component } from './carousel-ie11/carousel-ie11.component'; +import { HomeComponent } from './home/home.component'; const routes: Routes = [ - { path: '', component: CarouselComponent }, + { path: '', component: HomeComponent }, { path: 'carousel', component: CarouselComponent }, { path: 'carousel-ie11', component: CarouselIe11Component }, { path: 'modal', component: ModalGalleryComponent }, diff --git a/examples/angular-cli/src/app/app.component.html b/examples/angular-cli/src/app/app.component.html index f2845a0d..018ca03d 100644 --- a/examples/angular-cli/src/app/app.component.html +++ b/examples/angular-cli/src/app/app.component.html @@ -1,19 +1,14 @@ -

@ks89/angular-modal-gallery

-
- -
+ + +



-

This library and these examples are created by Stefano Cappa (@Ks89)

+
+

This library and these examples are created by Stefano Cappa (@Ks89)

-
+

A special thank to all authors of icons used in this library:

-
+

A special thanks to all authors of spinners used in this library:

@@ -19,8 +19,8 @@

D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews


+ [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
This is my projected content!
@@ -29,8 +29,8 @@

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac

D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled


+ [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [carouselImageConfig]="{description: {strategy: 2}}">
This is my projected content!
diff --git a/examples/angular-cli/src/app/carousel-ie11/carousel-ie11.scss b/examples/angular-cli/src/app/carousel-ie11/carousel-ie11.scss index 829c2846..8318bad9 100644 --- a/examples/angular-cli/src/app/carousel-ie11/carousel-ie11.scss +++ b/examples/angular-cli/src/app/carousel-ie11/carousel-ie11.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli/src/app/carousel/carousel.html b/examples/angular-cli/src/app/carousel/carousel.html index 6cc22977..aa2042bb 100644 --- a/examples/angular-cli/src/app/carousel/carousel.html +++ b/examples/angular-cli/src/app/carousel/carousel.html @@ -1,5 +1,5 @@

Carousel

-
+

ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode. For more info, please check the official documentation @@ -87,9 +87,9 @@

A9 - (id=108) - carousel example with buttons to enable/disable autoplay, ar

A10 - (id=109) - carousel example (minimal with all defaults) with outputs


+ (show)="onShow($event)" + (firstImage)="onFirstImage($event)" + (lastImage)="onLastImage($event)">

diff --git a/examples/angular-cli/src/app/carousel/carousel.scss b/examples/angular-cli/src/app/carousel/carousel.scss index 829c2846..8318bad9 100644 --- a/examples/angular-cli/src/app/carousel/carousel.scss +++ b/examples/angular-cli/src/app/carousel/carousel.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli/src/app/home/home.component.ts b/examples/angular-cli/src/app/home/home.component.ts new file mode 100644 index 00000000..eb43eeb0 --- /dev/null +++ b/examples/angular-cli/src/app/home/home.component.ts @@ -0,0 +1,176 @@ +/* + The MIT License (MIT) + + Copyright (c) 2017-2018 Stefano Cappa (Ks89) + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + +import { Component } from '@angular/core'; + +import { AccessibilityConfig, Image, ImageEvent } from '@ks89/angular-modal-gallery'; + +@Component({ + selector: 'ks-home-page', + templateUrl: './home.html', + styleUrls: ['./home.scss'] +}) +export class HomeComponent { + imageIndex = 1; + galleryId = 1; + autoPlay = true; + showArrows = true; + showDots = true; + + imagesRect: Image[] = [ + new Image( + 0, + { + img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg', + description: 'Description 1' + }, + { + img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg', + title: 'First image title', + alt: 'First image alt', + ariaLabel: 'First image aria-label' + } + ), + new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }), + new Image( + 2, + { + img: '/assets/images/gallery/pexels-photo-52062.jpeg', + description: 'Description 3', + title: 'Third image title', + alt: 'Third image alt', + ariaLabel: 'Third image aria-label' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg', + description: 'Description 3' + } + ), + new Image( + 3, + { + img: '/assets/images/gallery/pexels-photo-66943.jpeg', + description: 'Description 4', + title: 'Fourth image title (modal obj)', + alt: 'Fourth image alt (modal obj)', + ariaLabel: 'Fourth image aria-label (modal obj)' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg', + title: 'Fourth image title (plain obj)', + alt: 'Fourth image alt (plain obj)', + ariaLabel: 'Fourth image aria-label (plain obj)' + } + ), + new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }), + new Image( + 5, + { + img: '/assets/images/gallery/pexels-photo-94420.jpeg', + description: 'Description 6' + }, + { img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' } + ), + new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' }) + ]; + + accessibilityConfig: AccessibilityConfig = { + backgroundAriaLabel: 'CUSTOM Modal gallery full screen background', + backgroundTitle: 'CUSTOM background title', + + plainGalleryContentAriaLabel: 'CUSTOM Plain gallery content', + plainGalleryContentTitle: 'CUSTOM plain gallery content title', + + modalGalleryContentAriaLabel: 'CUSTOM Modal gallery content', + modalGalleryContentTitle: 'CUSTOM modal gallery content title', + + loadingSpinnerAriaLabel: 'CUSTOM The current image is loading. Please be patient.', + loadingSpinnerTitle: 'CUSTOM The current image is loading. Please be patient.', + + mainContainerAriaLabel: 'CUSTOM Current image and navigation', + mainContainerTitle: 'CUSTOM main container title', + mainPrevImageAriaLabel: 'CUSTOM Previous image', + mainPrevImageTitle: 'CUSTOM Previous image', + mainNextImageAriaLabel: 'CUSTOM Next image', + mainNextImageTitle: 'CUSTOM Next image', + + dotsContainerAriaLabel: 'CUSTOM Image navigation dots', + dotsContainerTitle: 'CUSTOM dots container title', + dotAriaLabel: 'CUSTOM Navigate to image number', + + previewsContainerAriaLabel: 'CUSTOM Image previews', + previewsContainerTitle: 'CUSTOM previews title', + previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', + previewScrollPrevTitle: 'CUSTOM Scroll previous previews', + previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' + }; + + addRandomImage() { + const imageToCopy: Image = this.imagesRect[Math.floor(Math.random() * this.imagesRect.length)]; + const newImage: Image = new Image(this.imagesRect.length - 1 + 1, imageToCopy.modal, imageToCopy.plain); + this.imagesRect = [...this.imagesRect, newImage]; + } + + onChangeAutoPlay() { + this.autoPlay = !this.autoPlay; + } + + onChangeShowArrows() { + this.showArrows = !this.showArrows; + } + + onChangeShowDots() { + this.showDots = !this.showDots; + } + + // output evets + onShow(event: ImageEvent) { + console.log('show', event); + } + + onFirstImage(event: ImageEvent) { + console.log('firstImage', event); + } + + onLastImage(event: ImageEvent) { + console.log('lastImage', event); + } +} diff --git a/examples/angular-cli/src/app/home/home.html b/examples/angular-cli/src/app/home/home.html new file mode 100644 index 00000000..3f745f57 --- /dev/null +++ b/examples/angular-cli/src/app/home/home.html @@ -0,0 +1,12 @@ + +
+ +
+

Welcome

+

This is the official live example of @ks89/angular-modal-gallery. + To get started quickly you can try and check the sourcecode of this example.

+

If you need the full documentation with all apis, this is the official documentation website.

+ +

The official documentation is available at ks89.github.io/angular-modal-gallery-2018-v7.github.io

+
+ diff --git a/examples/angular-cli/src/app/home/home.scss b/examples/angular-cli/src/app/home/home.scss new file mode 100644 index 00000000..9bfe7ee6 --- /dev/null +++ b/examples/angular-cli/src/app/home/home.scss @@ -0,0 +1,143 @@ +// The MIT License (MIT) +// +// Copyright (c) 2017-2018 Stefano Cappa (Ks89) +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +$text-color: #fff; +$background: rgba(0, 0, 0, .7); + +.container { + margin-left: 15px; + margin-right: 15px; +} + +.my-app-custom-plain-container-row { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + .my-app-custom-image-row { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-column { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + + .my-app-custom-image-column { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-with-desc { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + figure { + margin: 0; + position: relative; + + img { + max-width: 100%; + height: auto; + cursor: pointer; + } + + figcaption { + background: rgba(0, 0, 0, .5); + color: #fff; + font-size: 85%; + padding: 5px; + position: absolute; + bottom: 3px; + left: 0; + right: 0; + } + } + + .description { + font-weight: bold; + text-align: center; + } + + .my-app-custom-image-with-desc { + height: auto; + margin-right: 2px; + width: 200px; + align-self: start; + } +} + +.more { + background: $background; + cursor: pointer; + color: $text-color; + padding-top: 4px; + height: 46px; + position: absolute; + text-align: center; + width: 50px; +} + + +.projected { + color: white; + font-weight: 600; + font-size: 24px; + text-align: center; + position: absolute; + top: 50%; + width: 100%; + pointer-events: none; +} diff --git a/examples/angular-cli/src/app/intro-header/intro-header.component.ts b/examples/angular-cli/src/app/intro-header/intro-header.component.ts new file mode 100644 index 00000000..2d781d74 --- /dev/null +++ b/examples/angular-cli/src/app/intro-header/intro-header.component.ts @@ -0,0 +1,32 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'ks-intro-header', + templateUrl: 'intro-header.html', + styleUrls: ['intro-header.scss'] +}) +export class IntroHeaderComponent {} diff --git a/examples/angular-cli/src/app/intro-header/intro-header.html b/examples/angular-cli/src/app/intro-header/intro-header.html new file mode 100644 index 00000000..5eec3f6a --- /dev/null +++ b/examples/angular-cli/src/app/intro-header/intro-header.html @@ -0,0 +1,8 @@ +
+ @ks89/angular-modal-gallery icon +

@ks89/angular-modal-gallery

+

Image gallery for Angular >=6

+

Currently v7

+
+
diff --git a/examples/angular-cli/src/app/intro-header/intro-header.scss b/examples/angular-cli/src/app/intro-header/intro-header.scss new file mode 100644 index 00000000..15547baa --- /dev/null +++ b/examples/angular-cli/src/app/intro-header/intro-header.scss @@ -0,0 +1,73 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +.intro-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: $color-primary; + background: linear-gradient(135deg, $color-primary, $color-secondary); + margin-top: 10px; + padding-bottom: 1px; + color: $color-white; + + h1 { + color: $color-white; + font-size: 3rem; + } +} + +.project-title { + margin-top: 20px; + font-size: 2.8rem; + text-align: center; +} + +img { + margin-top: 25px; + border-radius: 10px +} + +.lead { + font-size: 1rem; + text-align: center; + color: #d4d4d4; +} diff --git a/examples/angular-cli/src/app/modal-gallery/modal-gallery.html b/examples/angular-cli/src/app/modal-gallery/modal-gallery.html index 80a0893f..042d58d1 100644 --- a/examples/angular-cli/src/app/modal-gallery/modal-gallery.html +++ b/examples/angular-cli/src/app/modal-gallery/modal-gallery.html @@ -1,5 +1,5 @@

Modal Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/angular-cli/src/app/modal-gallery/modal-gallery.scss b/examples/angular-cli/src/app/modal-gallery/modal-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/angular-cli/src/app/modal-gallery/modal-gallery.scss +++ b/examples/angular-cli/src/app/modal-gallery/modal-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli/src/app/navbar/navbar.component.ts b/examples/angular-cli/src/app/navbar/navbar.component.ts new file mode 100644 index 00000000..7b54ea23 --- /dev/null +++ b/examples/angular-cli/src/app/navbar/navbar.component.ts @@ -0,0 +1,62 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { BreakpointObserver } from '@angular/cdk/layout'; + +@Component({ + selector: 'ks-navbar', + templateUrl: 'navbar.html', + styleUrls: ['navbar.scss'] +}) +export class NavbarComponent { + navbarHeight = '56px'; + // path: string = PATH + '/assets/amg.svg'; + + collapsed = false; + + constructor(private router: Router, breakpointObserver: BreakpointObserver) { + breakpointObserver.observe(['(min-width: 990px)']).subscribe(result => { + if (result.matches) { + console.log('min width 990px'); + this.collapsed = false; + } + }); + } + + isNavItemActive(location: string) { + return this.router.url.includes(location) ? 'active' : ''; + } + + onNavigateTo(path: string) { + this.collapsed = false; + this.router.navigate([path]); + } + + onToggle() { + this.collapsed = !this.collapsed; + this.navbarHeight = this.collapsed ? '56px' : '150px'; + } +} diff --git a/examples/angular-cli/src/app/navbar/navbar.html b/examples/angular-cli/src/app/navbar/navbar.html new file mode 100644 index 00000000..2fe67450 --- /dev/null +++ b/examples/angular-cli/src/app/navbar/navbar.html @@ -0,0 +1,74 @@ +

+ + + + diff --git a/examples/angular-cli/src/app/navbar/navbar.scss b/examples/angular-cli/src/app/navbar/navbar.scss new file mode 100644 index 00000000..706da1ce --- /dev/null +++ b/examples/angular-cli/src/app/navbar/navbar.scss @@ -0,0 +1,248 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +nav { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; +} + +ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +nav.nav-expanded { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: 990px) { + display: none; + } + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + cursor: pointer; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } + + > #githubButtons { + margin-right: 30px; + @media only screen and (max-width: 1059px) { + display: none; + } + + > .github-badge { + margin-left: 8px; + } + } +} + + +// cexpanded on mobile devices after pressing the hamburger button +nav.nav-collapsed { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-top: 8px; + width: 100%; + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + margin-top: 8px; + margin-bottom: 8px; + cursor: pointer; + width: 100%; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + width: 100%; + margin-top: 8px; + margin-bottom: 8px; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } +} + + + diff --git a/examples/angular-cli/src/app/plain-gallery/plain-gallery.html b/examples/angular-cli/src/app/plain-gallery/plain-gallery.html index 51851af0..9fc5f49a 100644 --- a/examples/angular-cli/src/app/plain-gallery/plain-gallery.html +++ b/examples/angular-cli/src/app/plain-gallery/plain-gallery.html @@ -1,5 +1,5 @@

Plain Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/angular-cli/src/app/plain-gallery/plain-gallery.scss b/examples/angular-cli/src/app/plain-gallery/plain-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/angular-cli/src/app/plain-gallery/plain-gallery.scss +++ b/examples/angular-cli/src/app/plain-gallery/plain-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/angular-cli/src/assets/menu.svg b/examples/angular-cli/src/assets/menu.svg new file mode 100644 index 00000000..65fc9003 --- /dev/null +++ b/examples/angular-cli/src/assets/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/angular-cli/src/favicon.ico b/examples/angular-cli/src/favicon.ico deleted file mode 100644 index 8081c7ceaf2be08bf59010158c586170d9d2d517..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc-YX3<2dfuJ+A9|j_ZzAQ+a#~hXMzIK-`j-lh%O$+faY8ufx9@Gfr3t1e&6~ zmY%1cvXZc+t24W~m8*p{yN|OQ{2YN0758y7w{*1jq_(iOwRaJt-Dzy4rM9;cqt)e8 z=2Ui*vbM9A^K-Y>^i$EY^mDWnvZ577;)wbP!vN0Kp61j(&Q2~K!aicO{~1>pUZdXT zpr!uLM?4+HXdj^-NUf)=MlI#)ZcWX{&d+Aa#mh-8AjHna&&kWj#Y)Z1$tA$S$;ZLT z&&J6m%qb|$%|-p+KeR|3YEgG98(|G;+5bKaz7wOh^YnBR=HT%5_Gb6yVRv=6<=_$$ z65`?rq(4mI--!Y`EJuKbr-8}7GU8qrGnp?O&^%SF}<@0tcQ{T<-=;>AK=eDk{7Pp5o z8t)j>G^F*DoThXvSU$1-By{dFu$NDf=33+@icegl=LuYu%2?*=RWjM1lowh1cxd%L z)9Qy(#=8p2?gW`)uaD9q)(O=A0!_Cs#8-oZT0+_|=_Nusc6h>vB?*qu1y_zlT5BAF zcEj&Ww=eKA2_we+<}ji(IiC5=A)+)@Kcl;)Q&b?{zK>)<6c#VwwAnlSKW`P^rHH#; z%}PfaOOr7unLk{1D&~ecKN@Gmj+H;ho z=hC!3+x07){QQx)WbE_nW2JAhvLa>kLr2!0QDdtS7uX!-1TH1(w&>RAuDFp(l#WTJ zSQ|C@+`hQDn5=aq%L+QR_w@FrOYEJ$yg2Jwa_3A_s%^xA>H6i3tWn3%B2QQ8%1m3S zoSmIlS6ACsR~Z``8s_&;cIVr#$-TxarsSTC#SspR#0oOj0oyEo#ve61b9(T_I`Ky zX4A68}eT-F60yz#>pP4W7T{P;Xrd618vHQRKRuC=%C*8Y{0wS+xExI(DJdy2-e_=e zkurrNG*t1OEBkDxMkOrRQJo}P=%|^*Qe(pb!}p4Qm)|l)XygfTB07FlR?TEAx}}8Y zF}||C6Cr8d9>vAFm6$bJe z#iOq)YwbrEWW;l_|?J#Oijy8({@19{hUZ)LAsv!Ay81+UkFEXNb&1$Al0jf~&s@JM-`(NpM#K#AB;$-z$Nmo4^(gWQTo5|)E zwk7%`8pHf-8CObO_(zvt`Yn_k9;NnLeIFnHRQ6TxBc1$fjAoN~PvJN%<_IT#L(di? z63m?N*JBP5u*5vZr$m<;qkTDJ4(8lxX1o*${Yx=PXm;O>Ly>nAdog0W(93mVC3DqA zydv5Gl(6NcNb@}q+`?JH zt0z{}S1$T~F=d-=JpP+7zMJe^YRaAEubT$3lKIyT_Y>zte zH`>e;TW!A?w0Wb%usl*ZA*4)z@vPH)bGG>|X>7soxgn?%5t528sdTl`APQjXIv0GL zB3g+LE2!lOMFdO5nTb+td9oHodItYL!VXgj!_(2JgrR9@MbQrcz2W7iq5*|>3im8 zdq&1XRBh6 zW%uOdWVLD3`(CZrqII;GIc&)RC2_3hF?oQl+z;Yl_sJ!3a!4tdf6>(yc3GH@$fu+` z82Sa)zDnd)oBklIsBKK7IHY@}f7-Av9?H>&C!=nK55>k4KMq|cU~x}S<*lIlliwNX zrMi{0iM?$$HEbsYt?(eL2Z_C-Zugy-KK}JiO`j-l(~wL$gTU9_hJ3Q(j#gs? zNQOuNT*Qg(>Uj24h~;T9_p1-+rhh&Z#dfZ#v-c-ceRLcSSHNFu=KXz?4=C2ZL~!#u z7chuhcllY*YBh?9D~ua;5_Ye#s38=1s}0I;WzI@qlI;0VvZvzi`MkaH+`wmyih#LW z^X#>?zAQC?1U=y+L&Lj3400wmbVcWVt45t`g=$`*C$W$@OXog>jbliB#7X|8CGhNn z$I3U7=GoCvV%h|30Cbt%Dkq>2!EucstR?ns-(b-}>(l+*`=(AEZ=D7}@X^b6EObV3iHbJ;p19a@4emF}PG-j-VUfsH3mJ28UX`lM zV`N?2X%EL5_&RRK>sD`MXK&x$oA|KG|HuXEMRg??CuiHt69Jc*wyX1@t9kt3<7=B< zB8p^k^n`EH(%MfCHyn|}0p)bq=&%d0nb)zfs)DaBV{nc8o@`C?88!Qn02%3@#$?ez zRG$snct};AYbA+^h~Ubo!#P1w;1m&wb^iHjVW!^0&e_@c@5U{Bd`qBNbaZsbYpTHp ze@<|&hkwvxwR3fS%$)47`Z3Bc2jXSW<~Cjw0L%y1Ii%>>W{tM*mKx(T)2q{o4^vJu zza*K>dvPSFh}<>#{yG#+Y)plw4rEPD>A!gKV!mtUPbn4wxUDH(@kJnGOpu$OzjkUmF=06+Qr|oz^QP5QAPTgMW95XfZ$h z+k#zXB){Cde|0-NJRE4mnkR*ahX*-1 zxsQ_)jW8~nS$kVVj?o$9juStwI`Q!Mcx0xCx5dVIxtnmNcB6od`mXEMKUeJQ;jjm$ z3D?Zzab69rnDbJ=*Ik`sv=3%O5QVq_BsiE5BLOQSbNXIE@=REGlx+~1TI z*g;yBj>UZX^vPP8*`B^9VtQ^a-irH1-A`cnbvYKXdDw})&t_*$JiWZ~T3hc21_rWF zSsKK!_8(6KU+B)X2H(%j%w+i!eBP4BR%;yv$^eXq(&YWaR>VBn^S&jP0C;i#r| z^LV|-%5GioS)E+r$Se9A2IZtKbx_eGd?Uu0|KP9_;|RLVBVYr6Zpn&Lag-#ym#YWV z1mx{pC`ymkd%(w_Z4z_Me>E{DnKRNs73}uND89<&P;99Y9ftvi)N%mE5nDJPQKdas3 z(!MW{9a4mYR?+j$C3liEWV;!G?YFo3I_6y(K8tYzAAI+1KlX`0i?gnPbOcJ$VuM*%Gvv?=xbVtCfaQW;P=gU>iGQ?5jDyLQ6X%PYlNOqTXGKq>0< zi|YwAsJ9m5#cjGIAl9l`JJ&obiisoKi$suT0Z60PpnJ${eA#?RpnQgjCXW?7&?VPU z0tdASXXo-X@AAz%A?PNK?FR|gC$}qA1t}{^CTzK81NN1T8a!{nVj!tmC2VS@<~@ZI zR0=0NokB2%7Tj{w80VJNGzNKn@HJwr_cX zn63IFMR;zIF&oc_SUMK)tB7wmli;NY{IUV$Hmq(g$bW3d-pmXEGy8J3(;DC2{%G~k z@0|wIGKs_Jkh{=#T6y-N0Azfl_s(xvo0Ce&upR6Axw2J_K7<&2!AHmC+U0YB|^*%j?0F_9d}06kx{n4b=I0pbj;*<4d#Hb(5;t1>~E0{suPJ^qa(Z(fw9>9dv=&>;Sl&CEg~%5)8H^c=|3 z6TYI4#!UXV{VR5Ocv!nRH5t(J$@YxUm>`F3a!LEU5>`vUG_tA>jcyq+DG&e((7V z|7kYJ!}B@02pS)!C%=h`P-WO2r(X>uXaBZ3H#b>f;*7vI2zULO9jA#6;{I*dO6wJQ z)v7U4XAD|ET7dk1-o40ryCfxP{}hA+xIaotN&^|zldDaK}C8zNjZ@`pdLeue#jK_ESWU8IjU#pFE)P^Krm zk+OUaUe4yPMzWuEu9dxfy4S+nL!zT^obN`7TS*l%RhMTCjoB5gFu~S*vEbro))AwP zp}^5p^gZ2P^^NPv`}&Y6R5rhzNL93b`bF8hyAuHesmqi&5#MKLXJ4UJD)|2GeOTqa zV{-nluGM<*DG*$MYCk_e3KcZDUAhEph(h50!!tbdv02$kt*Upj84_>sXWa5?%;dY} z$eZ$K?j8S~YF5krR}TQmQI6_)s+4+hog zCpJ>Wv1Ey@Lv^es6Th_rKIhXU3r=#k<$*iEwE2x*QTVCzg!xH&wLnST`dN27S{m#z zMavZHJD_?1!l>e-#DMq#6Y*DlM*!~~ZU16%NASiFYW)cwvEyYmXtM4nML|H7-c6m- zr!va~X~+WmZ=d8_h}-*xr{@ItUG@N_GT%xy8sb^2rG zocRq0v0_=jRudzRC2t(~T~z<)K#vY@L`XvD9GAA9mUbf*rbkAuLDD!*R8;X(_gcLk zG&U)E6I4|tUofP<>QB>p0a&SLi;DnKK3V5_zhy7ZRcq!{`ZYaD7wD9d1Osmc$7%8? zO^E?`Fm;TDvGF^WKKFdmY1k6e(;um3wFXlIPU5Qe1&UrYoWCr8*pW`1^G!hvcGHq_lD zTiBb)sRnu@okf{dv$BbeDhT|UCSRgZiIC>uAI|z)hq=7AeTVk0uHDf@4@;gHI>w+5 z6L9`(1TNY4iHUCJc}OKV=ihsRU~9pPyVK6R6jR@k8n4|gwd`|z*;6e=fWtnfO)y*A zri#acFa;|M{L-DH#b4fY07>&%td4mMIFuh<3kBA{mND@6d4tTBAEPH$$9fYz9&CFp_~5s6UFB< z2EQuNrMoH-Ei2wXxJuHr=1!Y@332cpNKIPWozF(>;D3Yb11~mb>WN&N4|TNXvO&4B z_J4L;Kt=CI12#}N#4_O0m&KxM)&7VGvxWs^@H0j$QQr|9}C-zmMVQ*FEB~s2Vd=jdFOR-!fBHgs$zHmmR04r1JOefpyS7_ z(miTV{-(CR_|@ob>EePHM%`vnHUDqx=VzZiS|tX}F^p&HCF1A1QUFRRHox~z-2VRQ zjd^dU69z~CBIFI>c%#xshT4~&oGOJQt6N)LyStnsqw483(;Gzb-2k8Ue3@jX%HOiY za6$U$v0i^f06x<0T48pzeG-c{I)!HtSpPGP-tk@3pfJ2PCqv0h1FD2wt*H22W}d^T zfp)0EsRtDm-(9oLtyW`UdRR2@@+Drtnxbh~mqj}WBk-r`-VcFncYMm?h}Zb*B>+Xo z%05@rBj`Uo%nm?Dun-bb_>y2_xSjm9PFV&+KWAjk!R9o{eRGlvEPHD5o21Fn6<(5N zgQdSnWT33smg^RgzimQ7NN9^YiQzTvcHp8KDTWW6`R^jH&OMA8y_{tl5lfq<&}E61 zMhCJF#u!BC;^HDy&a%HEO!15{g8u)U)YFQDY20d+a<$bF(B%Q^K~?-B=_D^awB;tW3(AT!txmyZ4?jG7IAZ(rlQR@1)3{lAUs+k%-5-h^Bu@u&p0$l} zM>td<4!VpRJfm;D$VrJrQH`D+xpG(Y!5=7r#&1$_(vZ1o z*s1Ks7WF4k3hyaxv_ndMhdKZNk<_-bFGh%2Ny4X%&`*I7ciWj2`}8z%qOh^??nBkA zvZbZ_xF!L6GN?EQNreD|m=h3pW1_MXTq}KvA_YeW2b^KMBNI=Jcv_$G=D;3Zo;NR)@(RKn8dKkg`Y6>za(YI{TXZA99eH)h84kTpCJ z=RsGmm1tzt&FX$W*%)V=X$j02^Ym{vahj^e1lg@u;H{BWm>oo6deW!+hDmE0>r=|; zD6W=64LbgQ9{^cAo8hO?^&j!~wzjr>Hp=T_nk3gFtZ6jm)QKUN0O^&Km8+7h(ygF- zSs$}w6@4g}&NQl@_Dh|KN=J4m0FvXGmBfdTyRG$t$HBM_+IS-lxtu9lAil2qq9_Z3+E zq~xFdlMm2|X*yZXciIKCUaJ=QfRq0diWPqNg9vsq;FI; zCS)USmQF?qa|mlcVA*Hy9V*}xeL9q_b0`G|itG7QmT)E>^tE!;R;wsz3>-}Y54D|s zekzA98Q25oCqu#Pe{qI!{9r8*0sKN9P+?FaaDLwG*KDWc$GSSpfPlA5^^7rqJp;rg zUV{>2#6ZnX{v@itnRu9~BBf4DDIWB8sqTA54iYRi>@=nK26cZYd4z;|8+;O(JlB3a zU|99M-speCu6fhoIlt3n2;JkCqi1Za*j-WJ3@GN@jF1F#K|B7ImNMEX8V7TvIx!|P zJAUc(`#WO3kItZE=?SA9etol4*3~6@Nh#Ffg~t7q-J}T{+D|o8FTiV6Ol9ZdxLxo_ zRY_^InWR^Pnusk^rRGTu{{d4_DWS1m($GWs&C#cyug`b z)}J5xi9v{z(p8YM=!AeC(qhJplMRO>tO-czqS#ya6b7OWA;LOZo4)@F43F`zSwFBZ z&sW43Q63_Y;#k@pV9Q{Q={397)8bKyK3C4*Z(rFTEAz4G!h!CdM|Uw@Vo>XSl#jK$ z>!v?qi!3tYCdPS^Xm=Z8_sQ|D`6q?+K^qjWJm2dsGX^-80wiW1t^NAt3&w`~qxS@H z8RfEHS3#0*9oBno86;%;_NTDr(8 zP_yaZw4)>c-xh$U7jbbUBtzdnPdU8BOesfLox-8ejyz0Lk|dS^sY!O?!4jdAXT;v^ z9WL|c?OQ9hSi9{{2n6mK>MnpLqk}@Tc4I>WClYD0V`y~yaXghwaIknrmF%KTDVL@5 z6pn<+{X=s_bz<1Brpwa}atex)o`W=ehquy=kLdorsT6=dxgaoRM}_M-MWdeO5AQkD z8h{F;PE(?V9!y#~xBCArnD5_N=5A zsDflJ0cgrjWi5TC(Tym-)1v#(shu57$iCRLW!;HkSRbt(O-gr5_8*Pe+k4{a>4^d^ zlA$jaRn}NN%(Egr2SUM@qJZr{KK7?U=;Oe;z!c%TSE1~D3DgrJ>gM%pj_V(F)Nq9^ zGEdJ3CU&AoiL3XDb&kDT&+f4sH$1z%41!iAocVc|>AB3*zoq0H9ofS`Hu}|df357t zt5t+{A9~`04(P@uU;Fjrfh}G-rt{WNCjq^u`exyXeo~}j<~`ZRkN4I~E31pSY9j|| zYiZ?Pe~~@nC0x?+q+oyC@$Q>Pn(Ko}akq^2N)S7DHKL$Ge^Q!*g@^;JE^)0FuAGy&VIRKp#!v znu*mZuob;>on`x+oB@Yioo8CiUDemu)Z_oH@29aB7-yxP2_=ZA6^<;3UoMJ6n-j(8 z+yrk%b%u6E;n(zutoN&C3M$a#nyw;KH@a9NNYT@8NH93tGi+F(_7s%JBYHw`vaP## zMzKE=KJI@8p-$|2a>KOk=N}Uc6VBXeR!1L_c6xxyjTUP{`GX50cCWB} zqf`8L6b-0~-yeYPEBl;D>)z;JndUOz9K_~sD;7@;OL7pA$bng#|$GZs{ee73rJOm%liN9ae z&LOlCYki|+M-^Hw=1lv0Gaf?=@xkXPqVobA@Nta?KjBk}qOPhy zBP|rp*l(-U@tR!DsPpLEwX;0`T$xynd!rtG3PK*sH!DnAU;2pRL1+090Rc7!Xpbmp z7Ws&NTc=)D{$kV@r`{rzh6I@jiYE&1o}{j>uCa2qf?5X6x-nFMn#h)d_yD9Sz1;d- zWklKs0tnoK0?h2de|NrRi^oGJ80s17{>K)<=jT86iNwF$~ro-v>cYZwmb3j9MwRFlZwkhXcC*~4od_w zxRy34otLBefDn>VzXlQ86~>}l!FgwEd)sC)zmH9CUtv4oJvh&@(EoaQPvk3J$lI}Y zEAEAf)=NI{e*3301I~WV$wJF7qf*JmtomXi{d;P@)@_ASESOk-B(4V8i@B@IBe-fZ z`N{b%D5f|RHwf5OHD&7ebj(}mQi!(%K`|h z@xB(2W1t*lILV(4+XZZ5v=YCr1=4c85`oY1=OvX`AM>B0gMS?nxIHWT(4OfAJ~nkz zM7Yv{H~lY;TKa}m1gIdgA@M8GEdOnx@%{u&f5yc@+DDbGm%=;|MR)(fJg%y2+Q5r?O>Yh& zot%=ARR>|<4C<>>I2tXad$C=&^;COvx)wKA?K$ohvqW>EwE7qE^GcScsi*fcJ3U>JIoYBU0qtb& zv~x)mA#?a3eIXiuUmOn_XL9r%x|tL?pBB~z#-OncZ8Ou0b=~8P)|0zV(;uTN&toM9 zJF)`)$~PVVjxEcej0=OduPSH^s;A*48AT-`(Z0!P`S~+T`qxHF#jKrw(18j% zYP}LeRS9T=R)tfMT}I?;r2dEc?2qfh15WW)Acj)|0cIWewa_Cnh_X8+lQp(WoM z8XLh@;N;`Ogt&kUft3?yoDqMZb+f6}G!v9HC~a@9B(xt{c@TF^d+Q#wX6_2OJR4dG zhn9Y?RR_p6oJY>5W$&_A7Uk-L1n77FH0N3nu^+_U!0ho9zK2p`Eg}A)0Wn(qzFtS+|j`{<{D_$ZgQwF!UGT)uq%mKezA~5nxwZT3TvvtV|WL zj`qG_?o`nAuGP=4FkF&s{RDk2xRo+U306FQt0vUggoN9`Jj+i+6HhRjw0g#{v<=3_ zI#i75Mlt^w%}?+iT!9M*(h~nM(tNWNW7c`YkhsE!%D3pQlia>OIMoDZXP8O)Y!lmzQbLgJXUE* zwimcJHY|cuE}JPmo!RH#j)fT*I7sHc(x})Q2|zcBPWytHKGMS&gZ@jSyMI?Zeg8Au z0?1iJAGEij7+D)yC?kY>g37nx!lPyYf TSZ~8n_o?M&RHQ2;&BFc%y(M80 literal 0 HcmV?d00001 diff --git a/examples/angular-cli/src/index.html b/examples/angular-cli/src/index.html index 5aa35abc..0a8161ab 100644 --- a/examples/angular-cli/src/index.html +++ b/examples/angular-cli/src/index.html @@ -6,9 +6,13 @@ - + + + - + diff --git a/examples/angular-cli/src/styles.scss b/examples/angular-cli/src/styles.scss index 853fe932..1f4cfc54 100644 --- a/examples/angular-cli/src/styles.scss +++ b/examples/angular-cli/src/styles.scss @@ -1,35 +1,43 @@ -/* - The MIT License (MIT) - - Copyright (c) 2017-2018 Stefano Cappa (Ks89) - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - */ - -/* You can add global styles to this file, and also import other style files */ - +// The MIT License (MIT) +// +// Copyright (c) 2017-2018 Stefano Cappa (Ks89) +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +// You can add global styles to this file, and also import other style files + +body { + font-family: "Montserrat", sans-serif; + margin: 0; + padding: 0; +} -/* Not required by angular-modal-gallery. Used only in this demo */ +// Not required by angular-modal-gallery. Used only in this demo .red-text { color: red; } +.title { + text-align: center; + color: red; +} + .center-text { text-align: center; } diff --git a/examples/angular-cli/src/tslint.json b/examples/angular-cli/src/tslint.json index 52e2c1a5..0a734d04 100644 --- a/examples/angular-cli/src/tslint.json +++ b/examples/angular-cli/src/tslint.json @@ -4,13 +4,13 @@ "directive-selector": [ true, "attribute", - "app", + "ks", "camelCase" ], "component-selector": [ true, "element", - "app", + "ks", "kebab-case" ] } diff --git a/examples/systemjs/app/app-routing.module.ts b/examples/systemjs/app/app-routing.module.ts index f1d1cf68..e2391d18 100644 --- a/examples/systemjs/app/app-routing.module.ts +++ b/examples/systemjs/app/app-routing.module.ts @@ -5,9 +5,10 @@ import { ModalGalleryComponent } from './modal-gallery/modal-gallery.component'; import { PlainGalleryComponent } from './plain-gallery/plain-gallery.component'; import { CarouselComponent } from './carousel/carousel.component'; import { CarouselIe11Component } from './carousel-ie11/carousel-ie11.component'; +import { HomeComponent } from './home/home.component'; const routes: Routes = [ - { path: '', component: CarouselComponent }, + { path: '', component: HomeComponent }, { path: 'carousel', component: CarouselComponent }, { path: 'carousel-ie11', component: CarouselIe11Component }, { path: 'modal', component: ModalGalleryComponent }, diff --git a/examples/systemjs/app/app.component.css b/examples/systemjs/app/app.component.css index a42984e8..c5bf7993 100644 --- a/examples/systemjs/app/app.component.css +++ b/examples/systemjs/app/app.component.css @@ -21,7 +21,6 @@ SOFTWARE. */ - #main-title { text-align: center; width: 100%; @@ -32,12 +31,16 @@ flex-direction: row; justify-content: center; align-items: center; - - > .menu-item { - margin-left: 10px; - } +} +#menu > .menu-item { + margin-left: 10px; } .copyright { text-align: center; } + +.margin { + margin-left: 15px; + margin-right: 15px; +} diff --git a/examples/systemjs/app/app.component.html b/examples/systemjs/app/app.component.html index f2845a0d..d53d122e 100644 --- a/examples/systemjs/app/app.component.html +++ b/examples/systemjs/app/app.component.html @@ -1,19 +1,14 @@ -

@ks89/angular-modal-gallery

-
- -
+ + +



-

This library and these examples are created by Stefano Cappa (@Ks89)

+
+

This library and these examples are created by Stefano Cappa (@Ks89)

-
+

A special thank to all authors of icons used in this library:

-
+

A special thanks to all authors of spinners used in this library:

@@ -19,8 +19,8 @@

D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews


+ [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
This is my projected content!
@@ -29,8 +29,8 @@

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac

D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled


+ [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [carouselImageConfig]="{description: {strategy: 2}}">
This is my projected content!
diff --git a/examples/systemjs/app/carousel/carousel.css b/examples/systemjs/app/carousel/carousel.css index ad6d28b5..a80855db 100644 --- a/examples/systemjs/app/carousel/carousel.css +++ b/examples/systemjs/app/carousel/carousel.css @@ -1,3 +1,26 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ .my-app-custom-plain-container-row { align-items: center; display: flex; @@ -101,3 +124,7 @@ width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/systemjs/app/carousel/carousel.html b/examples/systemjs/app/carousel/carousel.html index 6cc22977..aa2042bb 100644 --- a/examples/systemjs/app/carousel/carousel.html +++ b/examples/systemjs/app/carousel/carousel.html @@ -1,5 +1,5 @@

Carousel

-
+

ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode. For more info, please check the official documentation @@ -87,9 +87,9 @@

A9 - (id=108) - carousel example with buttons to enable/disable autoplay, ar

A10 - (id=109) - carousel example (minimal with all defaults) with outputs


+ (show)="onShow($event)" + (firstImage)="onFirstImage($event)" + (lastImage)="onLastImage($event)">

diff --git a/examples/systemjs/app/home/home.component.ts b/examples/systemjs/app/home/home.component.ts new file mode 100644 index 00000000..c38ab5c2 --- /dev/null +++ b/examples/systemjs/app/home/home.component.ts @@ -0,0 +1,176 @@ +/* + The MIT License (MIT) + + Copyright (c) 2017-2018 Stefano Cappa (Ks89) + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + +import { Component } from '@angular/core'; + +import { AccessibilityConfig, Image, ImageEvent } from '@ks89/angular-modal-gallery'; + +@Component({ + selector: 'ks-home-page', + templateUrl: './home.html', + styleUrls: ['./home.css'] +}) +export class HomeComponent { + imageIndex = 1; + galleryId = 1; + autoPlay = true; + showArrows = true; + showDots = true; + + imagesRect: Image[] = [ + new Image( + 0, + { + img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg', + description: 'Description 1' + }, + { + img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg', + title: 'First image title', + alt: 'First image alt', + ariaLabel: 'First image aria-label' + } + ), + new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }), + new Image( + 2, + { + img: '/assets/images/gallery/pexels-photo-52062.jpeg', + description: 'Description 3', + title: 'Third image title', + alt: 'Third image alt', + ariaLabel: 'Third image aria-label' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg', + description: 'Description 3' + } + ), + new Image( + 3, + { + img: '/assets/images/gallery/pexels-photo-66943.jpeg', + description: 'Description 4', + title: 'Fourth image title (modal obj)', + alt: 'Fourth image alt (modal obj)', + ariaLabel: 'Fourth image aria-label (modal obj)' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg', + title: 'Fourth image title (plain obj)', + alt: 'Fourth image alt (plain obj)', + ariaLabel: 'Fourth image aria-label (plain obj)' + } + ), + new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }), + new Image( + 5, + { + img: '/assets/images/gallery/pexels-photo-94420.jpeg', + description: 'Description 6' + }, + { img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' } + ), + new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' }) + ]; + + accessibilityConfig: AccessibilityConfig = { + backgroundAriaLabel: 'CUSTOM Modal gallery full screen background', + backgroundTitle: 'CUSTOM background title', + + plainGalleryContentAriaLabel: 'CUSTOM Plain gallery content', + plainGalleryContentTitle: 'CUSTOM plain gallery content title', + + modalGalleryContentAriaLabel: 'CUSTOM Modal gallery content', + modalGalleryContentTitle: 'CUSTOM modal gallery content title', + + loadingSpinnerAriaLabel: 'CUSTOM The current image is loading. Please be patient.', + loadingSpinnerTitle: 'CUSTOM The current image is loading. Please be patient.', + + mainContainerAriaLabel: 'CUSTOM Current image and navigation', + mainContainerTitle: 'CUSTOM main container title', + mainPrevImageAriaLabel: 'CUSTOM Previous image', + mainPrevImageTitle: 'CUSTOM Previous image', + mainNextImageAriaLabel: 'CUSTOM Next image', + mainNextImageTitle: 'CUSTOM Next image', + + dotsContainerAriaLabel: 'CUSTOM Image navigation dots', + dotsContainerTitle: 'CUSTOM dots container title', + dotAriaLabel: 'CUSTOM Navigate to image number', + + previewsContainerAriaLabel: 'CUSTOM Image previews', + previewsContainerTitle: 'CUSTOM previews title', + previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', + previewScrollPrevTitle: 'CUSTOM Scroll previous previews', + previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' + }; + + addRandomImage() { + const imageToCopy: Image = this.imagesRect[Math.floor(Math.random() * this.imagesRect.length)]; + const newImage: Image = new Image(this.imagesRect.length - 1 + 1, imageToCopy.modal, imageToCopy.plain); + this.imagesRect = [...this.imagesRect, newImage]; + } + + onChangeAutoPlay() { + this.autoPlay = !this.autoPlay; + } + + onChangeShowArrows() { + this.showArrows = !this.showArrows; + } + + onChangeShowDots() { + this.showDots = !this.showDots; + } + + // output evets + onShow(event: ImageEvent) { + console.log('show', event); + } + + onFirstImage(event: ImageEvent) { + console.log('firstImage', event); + } + + onLastImage(event: ImageEvent) { + console.log('lastImage', event); + } +} diff --git a/examples/systemjs/app/main.css b/examples/systemjs/app/home/home.css similarity index 58% rename from examples/systemjs/app/main.css rename to examples/systemjs/app/home/home.css index a67fe2a1..a51087fc 100644 --- a/examples/systemjs/app/main.css +++ b/examples/systemjs/app/home/home.css @@ -1,26 +1,30 @@ /* - The MIT License (MIT) - - Copyright (c) 2017-2018 Stefano Cappa (Ks89) - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. */ +.container { + margin-left: 15px; + margin-right: 15px; +} .my-app-custom-plain-container-row { align-items: center; @@ -28,14 +32,12 @@ flex-direction: row; justify-content: flex-start; } - .my-app-custom-plain-container-row .my-app-custom-image-row { cursor: pointer; height: auto; margin-right: 2px; width: 50px; } - .my-app-custom-plain-container-row .my-app-custom-image-row.after { border-top: 2px; cursor: pointer; @@ -53,14 +55,12 @@ flex-direction: column; justify-content: flex-start; } - .my-app-custom-plain-container-column .my-app-custom-image-column { cursor: pointer; height: auto; margin-right: 2px; width: 50px; } - .my-app-custom-plain-container-column .my-app-custom-image-column.after { border-top: 2px; cursor: pointer; @@ -78,18 +78,15 @@ flex-direction: row; justify-content: flex-start; } - .my-app-custom-plain-container-with-desc figure { margin: 0; position: relative; } - .my-app-custom-plain-container-with-desc figure img { max-width: 100%; height: auto; cursor: pointer; } - .my-app-custom-plain-container-with-desc figure figcaption { background: rgba(0, 0, 0, 0.5); color: #fff; @@ -100,12 +97,10 @@ left: 0; right: 0; } - .my-app-custom-plain-container-with-desc .description { font-weight: bold; text-align: center; } - .my-app-custom-plain-container-with-desc .my-app-custom-image-with-desc { height: auto; margin-right: 2px; @@ -123,3 +118,14 @@ text-align: center; width: 50px; } + +.projected { + color: white; + font-weight: 600; + font-size: 24px; + text-align: center; + position: absolute; + top: 50%; + width: 100%; + pointer-events: none; +} diff --git a/examples/systemjs/app/home/home.html b/examples/systemjs/app/home/home.html new file mode 100644 index 00000000..3f745f57 --- /dev/null +++ b/examples/systemjs/app/home/home.html @@ -0,0 +1,12 @@ + +
+ +
+

Welcome

+

This is the official live example of @ks89/angular-modal-gallery. + To get started quickly you can try and check the sourcecode of this example.

+

If you need the full documentation with all apis, this is the official documentation website.

+ +

The official documentation is available at ks89.github.io/angular-modal-gallery-2018-v7.github.io

+
+ diff --git a/examples/systemjs/app/intro-header/intro-header.component.ts b/examples/systemjs/app/intro-header/intro-header.component.ts new file mode 100644 index 00000000..f45932c5 --- /dev/null +++ b/examples/systemjs/app/intro-header/intro-header.component.ts @@ -0,0 +1,32 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'ks-intro-header', + templateUrl: './intro-header.html', + styleUrls: ['./intro-header.css'] +}) +export class IntroHeaderComponent {} diff --git a/examples/systemjs/app/intro-header/intro-header.css b/examples/systemjs/app/intro-header/intro-header.css new file mode 100644 index 00000000..744ebca2 --- /dev/null +++ b/examples/systemjs/app/intro-header/intro-header.css @@ -0,0 +1,55 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +.intro-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: #101010; + background: linear-gradient(135deg, #101010, #9e9e9e); + margin-top: 10px; + padding-bottom: 1px; + color: #FFF; +} +.intro-header h1 { + color: #FFF; + font-size: 3rem; +} + +.project-title { + margin-top: 20px; + font-size: 2.8rem; + text-align: center; +} + +img { + margin-top: 25px; + border-radius: 10px; +} + +.lead { + font-size: 1rem; + text-align: center; + color: #d4d4d4; +} diff --git a/examples/systemjs/app/intro-header/intro-header.html b/examples/systemjs/app/intro-header/intro-header.html new file mode 100644 index 00000000..c2b7af00 --- /dev/null +++ b/examples/systemjs/app/intro-header/intro-header.html @@ -0,0 +1,8 @@ +
+ @ks89/angular-modal-gallery icon +

@ks89/angular-modal-gallery

+

Image gallery for Angular >=6

+

Currently v7

+
+
diff --git a/examples/systemjs/app/modal-gallery/modal-gallery.component.ts b/examples/systemjs/app/modal-gallery/modal-gallery.component.ts index 6037f7bd..0a3c9c9b 100644 --- a/examples/systemjs/app/modal-gallery/modal-gallery.component.ts +++ b/examples/systemjs/app/modal-gallery/modal-gallery.component.ts @@ -43,6 +43,7 @@ import { KS_DEFAULT_BTN_DOWNLOAD, KS_DEFAULT_BTN_EXTURL, KS_DEFAULT_BTN_FULL_SCREEN, + // KS_DEFAULT_BTN_ROTATE, PreviewConfig, LoadingConfig, LoadingType, @@ -286,32 +287,6 @@ export class ModalGalleryComponent { ) ]; - imagesRotated: Image[] = [ - new Image(0, { - img: '../assets/images/gallery/pexels-photo-135230.png', - description: 'Description 1', - angle: 180 - }), - new Image(1, { - img: '../assets/images/gallery/pexels-photo-547115.jpeg', - angle: 90 - }), - new Image(2, { - img: '../assets/images/gallery/pexels-photo-556664.jpeg', - description: 'Description 3', - angle: 270 - }), - new Image(3, { - img: '../assets/images/gallery/pexels-photo-787594.jpeg', - description: 'Description 4', - angle: 0 - }), - new Image(4, { - img: '../assets/images/gallery/pexels-photo-803105.jpeg', - angle: 90 - }) - ]; - // array with a single image inside (the first one) singleImage: Image[] = [this.images[0]]; @@ -399,7 +374,14 @@ export class ModalGalleryComponent { buttonsConfigCustom: ButtonsConfig = { visible: true, strategy: ButtonsStrategy.CUSTOM, - buttons: [KS_DEFAULT_BTN_FULL_SCREEN, KS_DEFAULT_BTN_DELETE, KS_DEFAULT_BTN_EXTURL, KS_DEFAULT_BTN_DOWNLOAD, KS_DEFAULT_BTN_CLOSE] + buttons: [ + // KS_DEFAULT_BTN_ROTATE, + KS_DEFAULT_BTN_FULL_SCREEN, + KS_DEFAULT_BTN_DELETE, + KS_DEFAULT_BTN_EXTURL, + KS_DEFAULT_BTN_DOWNLOAD, + KS_DEFAULT_BTN_CLOSE + ] }; // default buttons but extUrl will open the link in a new tab instead of the current one diff --git a/examples/systemjs/app/modal-gallery/modal-gallery.css b/examples/systemjs/app/modal-gallery/modal-gallery.css index 62d60c2f..464192c6 100644 --- a/examples/systemjs/app/modal-gallery/modal-gallery.css +++ b/examples/systemjs/app/modal-gallery/modal-gallery.css @@ -1,25 +1,26 @@ -// The MIT License (MIT) -// -// Copyright (c) 2017-2018 Stefano Cappa (Ks89) -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in all -// copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -// SOFTWARE. - +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ .my-app-custom-plain-container-row { align-items: center; display: flex; @@ -123,3 +124,7 @@ width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/systemjs/app/modal-gallery/modal-gallery.html b/examples/systemjs/app/modal-gallery/modal-gallery.html index 8d467eeb..042d58d1 100644 --- a/examples/systemjs/app/modal-gallery/modal-gallery.html +++ b/examples/systemjs/app/modal-gallery/modal-gallery.html @@ -1,5 +1,5 @@

Modal Gallery

-
+

If you want, you can add a random image to every example @@ -364,23 +364,23 @@

D1 - (id=49) - Other demo - base64 images

D2 - (id=50) - Other demo - custom file name, used when downloaded


+ [currentImageConfig]="{downloadable: true}" + [buttonsConfig]="buttonsConfigSimple">

D3 - (id=51) - Other demo - invert touchscreen swipe direction


+ [currentImageConfig]="{invertSwipe: true}">

D4 - (id=52) - Other demo - infinite sliding and automatic add of images when the gallery is visible


+ [slideConfig]="{infinite: true, sidePreviews: {show: true, size: {width: '100px', height: 'auto'}}}" + (show)="autoAddImage()">
@@ -398,12 +398,7 @@

Experimental examples*

E1 - (id=54) - Experimental demo - infinite sliding with only one image to see if side arrows are hidden


-
-
-

E2 - (id=55) - Other demo - load images already rotated

-
- + [keyboardConfig]="null" + [currentImageConfig]="currentImageConfigExperimental" + [slideConfig]="{infinite: false}">
diff --git a/examples/systemjs/app/navbar/navbar.component.ts b/examples/systemjs/app/navbar/navbar.component.ts new file mode 100644 index 00000000..65346a50 --- /dev/null +++ b/examples/systemjs/app/navbar/navbar.component.ts @@ -0,0 +1,62 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { BreakpointObserver } from '@angular/cdk/layout'; + +@Component({ + selector: 'ks-navbar', + templateUrl: './navbar.html', + styleUrls: ['./navbar.css'] +}) +export class NavbarComponent { + navbarHeight = '56px'; + // path: string = PATH + '/assets/amg.svg'; + + collapsed = false; + + constructor(private router: Router, breakpointObserver: BreakpointObserver) { + breakpointObserver.observe(['(min-width: 990px)']).subscribe(result => { + if (result.matches) { + console.log('min width 990px'); + this.collapsed = false; + } + }); + } + + isNavItemActive(location: string) { + return this.router.url.includes(location) ? 'active' : ''; + } + + onNavigateTo(path: string) { + this.collapsed = false; + this.router.navigate([path]); + } + + onToggle() { + this.collapsed = !this.collapsed; + this.navbarHeight = this.collapsed ? '56px' : '150px'; + } +} diff --git a/examples/systemjs/app/navbar/navbar.css b/examples/systemjs/app/navbar/navbar.css new file mode 100644 index 00000000..e909afab --- /dev/null +++ b/examples/systemjs/app/navbar/navbar.css @@ -0,0 +1,212 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +nav { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; +} + +ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +nav.nav-expanded { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: #343A40; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} +nav.nav-expanded > .navbar-hamburger { + display: none; + background-color: #343A40; + border-color: rgba(255, 255, 255, 0.1); +} +@media screen and (max-width: 990px) { + nav.nav-expanded > .navbar-hamburger { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } +} +nav.nav-expanded > .navbar-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; +} +@media screen and (max-width: 990px) { + nav.nav-expanded > .navbar-wrapper { + display: none; + } +} +nav.nav-expanded > .navbar-wrapper > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + cursor: pointer; +} +nav.nav-expanded > .navbar-wrapper > .navbar-brand > img { + border-radius: 3px; +} +nav.nav-expanded > .navbar-wrapper > .navbar-brand:hover { + color: #bdbdbd; +} +nav.nav-expanded > .navbar-wrapper > .navbar-nav { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + list-style: none; +} +nav.nav-expanded > .navbar-wrapper > .navbar-nav > .nav-item { + cursor: pointer; + color: #e2e2e2; +} +nav.nav-expanded > .navbar-wrapper > .navbar-nav > .nav-item > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; +} +nav.nav-expanded > .navbar-wrapper > .navbar-nav > .nav-item > a.nav-link:hover { + color: #E2E2E2; +} +nav.nav-expanded > #githubButtons { + margin-right: 30px; +} +@media only screen and (max-width: 1059px) { + nav.nav-expanded > #githubButtons { + display: none; + } +} +nav.nav-expanded > #githubButtons > .github-badge { + margin-left: 8px; +} + +nav.nav-collapsed { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + background-color: #343A40; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} +nav.nav-collapsed > .navbar-hamburger { + display: none; + background-color: #343A40; + border-color: rgba(255, 255, 255, 0.1); +} +@media screen and (max-width: 990px) { + nav.nav-collapsed > .navbar-hamburger { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } +} +nav.nav-collapsed > .navbar-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-top: 8px; + width: 100%; +} +nav.nav-collapsed > .navbar-wrapper > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + margin-top: 8px; + margin-bottom: 8px; + cursor: pointer; + width: 100%; +} +nav.nav-collapsed > .navbar-wrapper > .navbar-brand > img { + border-radius: 3px; +} +nav.nav-collapsed > .navbar-wrapper > .navbar-brand:hover { + color: #bdbdbd; +} +nav.nav-collapsed > .navbar-wrapper > .navbar-nav { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + list-style: none; +} +nav.nav-collapsed > .navbar-wrapper > .navbar-nav > .nav-item { + cursor: pointer; + color: #e2e2e2; + width: 100%; + margin-top: 8px; + margin-bottom: 8px; +} +nav.nav-collapsed > .navbar-wrapper > .navbar-nav > .nav-item > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; +} +nav.nav-collapsed > .navbar-wrapper > .navbar-nav > .nav-item > a.nav-link:hover { + color: #E2E2E2; +} diff --git a/examples/systemjs/app/navbar/navbar.html b/examples/systemjs/app/navbar/navbar.html new file mode 100644 index 00000000..9aa90c62 --- /dev/null +++ b/examples/systemjs/app/navbar/navbar.html @@ -0,0 +1,74 @@ + + + + + diff --git a/examples/systemjs/app/plain-gallery/plain-gallery.component.js.map b/examples/systemjs/app/plain-gallery/plain-gallery.component.js.map deleted file mode 100644 index 509197cb..00000000 --- a/examples/systemjs/app/plain-gallery/plain-gallery.component.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"plain-gallery.component.js","sourceRoot":"","sources":["plain-gallery.component.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/examples/systemjs/app/plain-gallery/plain-gallery.css b/examples/systemjs/app/plain-gallery/plain-gallery.css index 62d60c2f..464192c6 100644 --- a/examples/systemjs/app/plain-gallery/plain-gallery.css +++ b/examples/systemjs/app/plain-gallery/plain-gallery.css @@ -1,25 +1,26 @@ -// The MIT License (MIT) -// -// Copyright (c) 2017-2018 Stefano Cappa (Ks89) -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in all -// copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -// SOFTWARE. - +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ .my-app-custom-plain-container-row { align-items: center; display: flex; @@ -123,3 +124,7 @@ width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/systemjs/app/plain-gallery/plain-gallery.html b/examples/systemjs/app/plain-gallery/plain-gallery.html index 51851af0..9fc5f49a 100644 --- a/examples/systemjs/app/plain-gallery/plain-gallery.html +++ b/examples/systemjs/app/plain-gallery/plain-gallery.html @@ -1,5 +1,5 @@

Plain Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/systemjs/assets/favicon.png b/examples/systemjs/assets/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..8db05d03946939318553faf1da0cd73923d35a82 GIT binary patch literal 11671 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 TSZ~8n_o?M&RHQ2;&BFc%y(M80 literal 0 HcmV?d00001 diff --git a/examples/systemjs/assets/menu.svg b/examples/systemjs/assets/menu.svg new file mode 100644 index 00000000..d74ea2e5 --- /dev/null +++ b/examples/systemjs/assets/menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/examples/systemjs/index.html b/examples/systemjs/index.html index f7d6f5e8..032b5736 100644 --- a/examples/systemjs/index.html +++ b/examples/systemjs/index.html @@ -1,7 +1,7 @@ - Systemjs demo for angular-modal-gallery + Systemjs demo for @ks89/angular-modal-gallery @@ -17,10 +17,36 @@ console.error(err); }); + + + + + - Loading... + Loading... diff --git a/examples/universal/angular.json b/examples/universal/angular.json index 3b7f2c4b..d96aeb24 100644 --- a/examples/universal/angular.json +++ b/examples/universal/angular.json @@ -22,7 +22,7 @@ "output": "/assets" }, { - "glob": "favicon.ico", + "glob": "favicon.png", "input": "src", "output": "/" } @@ -83,7 +83,7 @@ "output": "/assets" }, { - "glob": "favicon.ico", + "glob": "favicon.png", "input": "src", "output": "/" } diff --git a/examples/universal/src/app/app-routing.module.ts b/examples/universal/src/app/app-routing.module.ts index 7bc0f9f4..e95198a8 100644 --- a/examples/universal/src/app/app-routing.module.ts +++ b/examples/universal/src/app/app-routing.module.ts @@ -5,9 +5,10 @@ import { ModalGalleryComponent } from './modal-gallery/modal-gallery.component'; import { PlainGalleryComponent } from './plain-gallery/plain-gallery.component'; import { CarouselComponent } from './carousel/carousel.component'; import { CarouselIe11Component } from './carousel-ie11/carousel-ie11.component'; +import { HomeComponent } from './home/home.component'; const routes: Routes = [ - { path: '', component: CarouselComponent }, + { path: '', component: HomeComponent }, { path: 'carousel', component: CarouselComponent }, { path: 'carousel-ie11', component: CarouselIe11Component }, { path: 'modal', component: ModalGalleryComponent }, diff --git a/examples/universal/src/app/app.component.html b/examples/universal/src/app/app.component.html index 3ccf3935..d53d122e 100644 --- a/examples/universal/src/app/app.component.html +++ b/examples/universal/src/app/app.component.html @@ -1,20 +1,14 @@ -

@ks89/angular-modal-gallery

-
- -
+ + +



-

This library and these examples are created by Stefano Cappa (@Ks89)

+
+

This library and these examples are created by Stefano Cappa (@Ks89)

-
+

A special thank to all authors of icons used in this library:

-
+

A special thanks to all authors of spinners used in this library:

@@ -19,8 +19,8 @@

D1 - (id=300) - carousel example for IE11 (minimal with all defaults, but le

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legacyMode enabled and custom previews


+ [carouselConfig]="{maxWidth: '766px', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [previewConfig]="{visible: true, number: 5, width: 'auto', maxHeight: '100px'}">
This is my projected content!
@@ -29,8 +29,8 @@

D2 - (id=301) - carousel example for IE11 with fixed maxWidth (766px), legac

D3 - (id=302) - carousel example for IE11 with description and legacyMode enabled


+ [carouselConfig]="{maxWidth: '100%', maxHeight: '400px', showArrows: true, objectFit: 'cover', keyboardEnable: true, modalGalleryEnable: false, legacyIE11Mode: true}" + [carouselImageConfig]="{description: {strategy: 2}}">
This is my projected content!
diff --git a/examples/universal/src/app/carousel-ie11/carousel-ie11.scss b/examples/universal/src/app/carousel-ie11/carousel-ie11.scss index 829c2846..8318bad9 100644 --- a/examples/universal/src/app/carousel-ie11/carousel-ie11.scss +++ b/examples/universal/src/app/carousel-ie11/carousel-ie11.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/universal/src/app/carousel/carousel.html b/examples/universal/src/app/carousel/carousel.html index 6cc22977..aa2042bb 100644 --- a/examples/universal/src/app/carousel/carousel.html +++ b/examples/universal/src/app/carousel/carousel.html @@ -1,5 +1,5 @@

Carousel

-
+

ATTENTION! Carousel supports Internet Explorer 11 only if you enable legacy mode. For more info, please check the official documentation @@ -87,9 +87,9 @@

A9 - (id=108) - carousel example with buttons to enable/disable autoplay, ar

A10 - (id=109) - carousel example (minimal with all defaults) with outputs


+ (show)="onShow($event)" + (firstImage)="onFirstImage($event)" + (lastImage)="onLastImage($event)">

diff --git a/examples/universal/src/app/carousel/carousel.scss b/examples/universal/src/app/carousel/carousel.scss index 829c2846..8318bad9 100644 --- a/examples/universal/src/app/carousel/carousel.scss +++ b/examples/universal/src/app/carousel/carousel.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/universal/src/app/home/home.component.ts b/examples/universal/src/app/home/home.component.ts new file mode 100644 index 00000000..eb43eeb0 --- /dev/null +++ b/examples/universal/src/app/home/home.component.ts @@ -0,0 +1,176 @@ +/* + The MIT License (MIT) + + Copyright (c) 2017-2018 Stefano Cappa (Ks89) + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + */ + +import { Component } from '@angular/core'; + +import { AccessibilityConfig, Image, ImageEvent } from '@ks89/angular-modal-gallery'; + +@Component({ + selector: 'ks-home-page', + templateUrl: './home.html', + styleUrls: ['./home.scss'] +}) +export class HomeComponent { + imageIndex = 1; + galleryId = 1; + autoPlay = true; + showArrows = true; + showDots = true; + + imagesRect: Image[] = [ + new Image( + 0, + { + img: '/assets/images/gallery/milan-pegasus-gallery-statue.jpg', + description: 'Description 1' + }, + { + img: '/assets/images/gallery/thumbs/t-milan-pegasus-gallery-statue.jpg', + title: 'First image title', + alt: 'First image alt', + ariaLabel: 'First image aria-label' + } + ), + new Image(1, { img: '/assets/images/gallery/pexels-photo-47223.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-47223.jpg' }), + new Image( + 2, + { + img: '/assets/images/gallery/pexels-photo-52062.jpeg', + description: 'Description 3', + title: 'Third image title', + alt: 'Third image alt', + ariaLabel: 'Third image aria-label' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-52062.jpg', + description: 'Description 3' + } + ), + new Image( + 3, + { + img: '/assets/images/gallery/pexels-photo-66943.jpeg', + description: 'Description 4', + title: 'Fourth image title (modal obj)', + alt: 'Fourth image alt (modal obj)', + ariaLabel: 'Fourth image aria-label (modal obj)' + }, + { + img: '/assets/images/gallery/thumbs/t-pexels-photo-66943.jpg', + title: 'Fourth image title (plain obj)', + alt: 'Fourth image alt (plain obj)', + ariaLabel: 'Fourth image aria-label (plain obj)' + } + ), + new Image(4, { img: '/assets/images/gallery/pexels-photo-93750.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-93750.jpg' }), + new Image( + 5, + { + img: '/assets/images/gallery/pexels-photo-94420.jpeg', + description: 'Description 6' + }, + { img: '/assets/images/gallery/thumbs/t-pexels-photo-94420.jpg' } + ), + new Image(6, { img: '/assets/images/gallery/pexels-photo-96947.jpeg' }, { img: '/assets/images/gallery/thumbs/t-pexels-photo-96947.jpg' }) + ]; + + accessibilityConfig: AccessibilityConfig = { + backgroundAriaLabel: 'CUSTOM Modal gallery full screen background', + backgroundTitle: 'CUSTOM background title', + + plainGalleryContentAriaLabel: 'CUSTOM Plain gallery content', + plainGalleryContentTitle: 'CUSTOM plain gallery content title', + + modalGalleryContentAriaLabel: 'CUSTOM Modal gallery content', + modalGalleryContentTitle: 'CUSTOM modal gallery content title', + + loadingSpinnerAriaLabel: 'CUSTOM The current image is loading. Please be patient.', + loadingSpinnerTitle: 'CUSTOM The current image is loading. Please be patient.', + + mainContainerAriaLabel: 'CUSTOM Current image and navigation', + mainContainerTitle: 'CUSTOM main container title', + mainPrevImageAriaLabel: 'CUSTOM Previous image', + mainPrevImageTitle: 'CUSTOM Previous image', + mainNextImageAriaLabel: 'CUSTOM Next image', + mainNextImageTitle: 'CUSTOM Next image', + + dotsContainerAriaLabel: 'CUSTOM Image navigation dots', + dotsContainerTitle: 'CUSTOM dots container title', + dotAriaLabel: 'CUSTOM Navigate to image number', + + previewsContainerAriaLabel: 'CUSTOM Image previews', + previewsContainerTitle: 'CUSTOM previews title', + previewScrollPrevAriaLabel: 'CUSTOM Scroll previous previews', + previewScrollPrevTitle: 'CUSTOM Scroll previous previews', + previewScrollNextAriaLabel: 'CUSTOM Scroll next previews', + previewScrollNextTitle: 'CUSTOM Scroll next previews', + + carouselContainerAriaLabel: 'Current image and navigation', + carouselContainerTitle: '', + carouselPrevImageAriaLabel: 'Previous image', + carouselPrevImageTitle: 'Previous image', + carouselNextImageAriaLabel: 'Next image', + carouselNextImageTitle: 'Next image', + carouselDotsContainerAriaLabel: 'Image navigation dots', + carouselDotsContainerTitle: '', + carouselDotAriaLabel: 'Navigate to image number', + carouselPreviewsContainerAriaLabel: 'Image previews', + carouselPreviewsContainerTitle: '', + carouselPreviewScrollPrevAriaLabel: 'Scroll previous previews', + carouselPreviewScrollPrevTitle: 'Scroll previous previews', + carouselPreviewScrollNextAriaLabel: 'Scroll next previews', + carouselPreviewScrollNextTitle: 'Scroll next previews' + }; + + addRandomImage() { + const imageToCopy: Image = this.imagesRect[Math.floor(Math.random() * this.imagesRect.length)]; + const newImage: Image = new Image(this.imagesRect.length - 1 + 1, imageToCopy.modal, imageToCopy.plain); + this.imagesRect = [...this.imagesRect, newImage]; + } + + onChangeAutoPlay() { + this.autoPlay = !this.autoPlay; + } + + onChangeShowArrows() { + this.showArrows = !this.showArrows; + } + + onChangeShowDots() { + this.showDots = !this.showDots; + } + + // output evets + onShow(event: ImageEvent) { + console.log('show', event); + } + + onFirstImage(event: ImageEvent) { + console.log('firstImage', event); + } + + onLastImage(event: ImageEvent) { + console.log('lastImage', event); + } +} diff --git a/examples/universal/src/app/home/home.html b/examples/universal/src/app/home/home.html new file mode 100644 index 00000000..3f745f57 --- /dev/null +++ b/examples/universal/src/app/home/home.html @@ -0,0 +1,12 @@ + +
+ +
+

Welcome

+

This is the official live example of @ks89/angular-modal-gallery. + To get started quickly you can try and check the sourcecode of this example.

+

If you need the full documentation with all apis, this is the official documentation website.

+ +

The official documentation is available at ks89.github.io/angular-modal-gallery-2018-v7.github.io

+
+ diff --git a/examples/universal/src/app/home/home.scss b/examples/universal/src/app/home/home.scss new file mode 100644 index 00000000..9bfe7ee6 --- /dev/null +++ b/examples/universal/src/app/home/home.scss @@ -0,0 +1,143 @@ +// The MIT License (MIT) +// +// Copyright (c) 2017-2018 Stefano Cappa (Ks89) +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. + +$text-color: #fff; +$background: rgba(0, 0, 0, .7); + +.container { + margin-left: 15px; + margin-right: 15px; +} + +.my-app-custom-plain-container-row { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + .my-app-custom-image-row { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-column { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + + .my-app-custom-image-column { + cursor: pointer; + height: auto; + margin-right: 2px; + width: 50px; + + &.after { + border-top: 2px; + cursor: pointer; + display: none; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } + } +} + +.my-app-custom-plain-container-with-desc { + align-items: center; + display: flex; + flex-direction: row; + justify-content: flex-start; + + figure { + margin: 0; + position: relative; + + img { + max-width: 100%; + height: auto; + cursor: pointer; + } + + figcaption { + background: rgba(0, 0, 0, .5); + color: #fff; + font-size: 85%; + padding: 5px; + position: absolute; + bottom: 3px; + left: 0; + right: 0; + } + } + + .description { + font-weight: bold; + text-align: center; + } + + .my-app-custom-image-with-desc { + height: auto; + margin-right: 2px; + width: 200px; + align-self: start; + } +} + +.more { + background: $background; + cursor: pointer; + color: $text-color; + padding-top: 4px; + height: 46px; + position: absolute; + text-align: center; + width: 50px; +} + + +.projected { + color: white; + font-weight: 600; + font-size: 24px; + text-align: center; + position: absolute; + top: 50%; + width: 100%; + pointer-events: none; +} diff --git a/examples/universal/src/app/intro-header/intro-header.component.ts b/examples/universal/src/app/intro-header/intro-header.component.ts new file mode 100644 index 00000000..2d781d74 --- /dev/null +++ b/examples/universal/src/app/intro-header/intro-header.component.ts @@ -0,0 +1,32 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'ks-intro-header', + templateUrl: 'intro-header.html', + styleUrls: ['intro-header.scss'] +}) +export class IntroHeaderComponent {} diff --git a/examples/universal/src/app/intro-header/intro-header.html b/examples/universal/src/app/intro-header/intro-header.html new file mode 100644 index 00000000..5eec3f6a --- /dev/null +++ b/examples/universal/src/app/intro-header/intro-header.html @@ -0,0 +1,8 @@ +
+ @ks89/angular-modal-gallery icon +

@ks89/angular-modal-gallery

+

Image gallery for Angular >=6

+

Currently v7

+
+
diff --git a/examples/universal/src/app/intro-header/intro-header.scss b/examples/universal/src/app/intro-header/intro-header.scss new file mode 100644 index 00000000..15547baa --- /dev/null +++ b/examples/universal/src/app/intro-header/intro-header.scss @@ -0,0 +1,73 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +.intro-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: $color-primary; + background: linear-gradient(135deg, $color-primary, $color-secondary); + margin-top: 10px; + padding-bottom: 1px; + color: $color-white; + + h1 { + color: $color-white; + font-size: 3rem; + } +} + +.project-title { + margin-top: 20px; + font-size: 2.8rem; + text-align: center; +} + +img { + margin-top: 25px; + border-radius: 10px +} + +.lead { + font-size: 1rem; + text-align: center; + color: #d4d4d4; +} diff --git a/examples/universal/src/app/modal-gallery/modal-gallery.html b/examples/universal/src/app/modal-gallery/modal-gallery.html index 80a0893f..042d58d1 100644 --- a/examples/universal/src/app/modal-gallery/modal-gallery.html +++ b/examples/universal/src/app/modal-gallery/modal-gallery.html @@ -1,5 +1,5 @@

Modal Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/universal/src/app/modal-gallery/modal-gallery.scss b/examples/universal/src/app/modal-gallery/modal-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/universal/src/app/modal-gallery/modal-gallery.scss +++ b/examples/universal/src/app/modal-gallery/modal-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/universal/src/app/navbar/navbar.component.ts b/examples/universal/src/app/navbar/navbar.component.ts new file mode 100644 index 00000000..7b54ea23 --- /dev/null +++ b/examples/universal/src/app/navbar/navbar.component.ts @@ -0,0 +1,62 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; +import { BreakpointObserver } from '@angular/cdk/layout'; + +@Component({ + selector: 'ks-navbar', + templateUrl: 'navbar.html', + styleUrls: ['navbar.scss'] +}) +export class NavbarComponent { + navbarHeight = '56px'; + // path: string = PATH + '/assets/amg.svg'; + + collapsed = false; + + constructor(private router: Router, breakpointObserver: BreakpointObserver) { + breakpointObserver.observe(['(min-width: 990px)']).subscribe(result => { + if (result.matches) { + console.log('min width 990px'); + this.collapsed = false; + } + }); + } + + isNavItemActive(location: string) { + return this.router.url.includes(location) ? 'active' : ''; + } + + onNavigateTo(path: string) { + this.collapsed = false; + this.router.navigate([path]); + } + + onToggle() { + this.collapsed = !this.collapsed; + this.navbarHeight = this.collapsed ? '56px' : '150px'; + } +} diff --git a/examples/universal/src/app/navbar/navbar.html b/examples/universal/src/app/navbar/navbar.html new file mode 100644 index 00000000..2fe67450 --- /dev/null +++ b/examples/universal/src/app/navbar/navbar.html @@ -0,0 +1,74 @@ +

+ + + + diff --git a/examples/universal/src/app/navbar/navbar.scss b/examples/universal/src/app/navbar/navbar.scss new file mode 100644 index 00000000..706da1ce --- /dev/null +++ b/examples/universal/src/app/navbar/navbar.scss @@ -0,0 +1,248 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +nav { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; +} + +ul { + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +nav.nav-expanded { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: 990px) { + display: none; + } + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + cursor: pointer; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } + + > #githubButtons { + margin-right: 30px; + @media only screen and (max-width: 1059px) { + display: none; + } + + > .github-badge { + margin-left: 8px; + } + } +} + + +// cexpanded on mobile devices after pressing the hamburger button +nav.nav-collapsed { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + flex-wrap: wrap; + background-color: $color-light-black; + padding-top: 8px; + padding-left: 16px; + padding-bottom: 8px; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + + > .navbar-hamburger { + display: none; + background-color: $color-light-black; + border-color: rgba(255, 255, 255, .1); + + @media screen and (max-width: 990px) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + cursor: pointer; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 12px; + padding-right: 12px; + } + } + + > .navbar-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-top: 8px; + width: 100%; + + > .navbar-brand { + font-size: 16px; + color: #ffffff; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + margin-top: 8px; + margin-bottom: 8px; + cursor: pointer; + width: 100%; + + > img { + border-radius: 3px + } + + &:hover { + color: #bdbdbd; + } + } + + > .navbar-nav { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + list-style: none; + + > .nav-item { + cursor: pointer; + color: #e2e2e2; + width: 100%; + margin-top: 8px; + margin-bottom: 8px; + + > a.nav-link { + color: #b9b9b9; + font-size: 14px; + font-weight: 400; + margin-left: 8px; + margin-right: 8px; + + &:hover { + color: #E2E2E2; + } + } + } + } + } +} + + + diff --git a/examples/universal/src/app/plain-gallery/plain-gallery.html b/examples/universal/src/app/plain-gallery/plain-gallery.html index 51851af0..9fc5f49a 100644 --- a/examples/universal/src/app/plain-gallery/plain-gallery.html +++ b/examples/universal/src/app/plain-gallery/plain-gallery.html @@ -1,5 +1,5 @@

Plain Gallery

-
+

If you want, you can add a random image to every example diff --git a/examples/universal/src/app/plain-gallery/plain-gallery.scss b/examples/universal/src/app/plain-gallery/plain-gallery.scss index c5f93da1..34f4eda1 100644 --- a/examples/universal/src/app/plain-gallery/plain-gallery.scss +++ b/examples/universal/src/app/plain-gallery/plain-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/examples/universal/src/assets/menu.svg b/examples/universal/src/assets/menu.svg new file mode 100644 index 00000000..65fc9003 --- /dev/null +++ b/examples/universal/src/assets/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/examples/universal/src/favicon.ico b/examples/universal/src/favicon.ico deleted file mode 100644 index 8081c7ceaf2be08bf59010158c586170d9d2d517..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc-YX3<2dfuJ+A9|j_ZzAQ+a#~hXMzIK-`j-lh%O$+faY8ufx9@Gfr3t1e&6~ zmY%1cvXZc+t24W~m8*p{yN|OQ{2YN0758y7w{*1jq_(iOwRaJt-Dzy4rM9;cqt)e8 z=2Ui*vbM9A^K-Y>^i$EY^mDWnvZ577;)wbP!vN0Kp61j(&Q2~K!aicO{~1>pUZdXT zpr!uLM?4+HXdj^-NUf)=MlI#)ZcWX{&d+Aa#mh-8AjHna&&kWj#Y)Z1$tA$S$;ZLT z&&J6m%qb|$%|-p+KeR|3YEgG98(|G;+5bKaz7wOh^YnBR=HT%5_Gb6yVRv=6<=_$$ z65`?rq(4mI--!Y`EJuKbr-8}7GU8qrGnp?O&^%SF}<@0tcQ{T<-=;>AK=eDk{7Pp5o z8t)j>G^F*DoThXvSU$1-By{dFu$NDf=33+@icegl=LuYu%2?*=RWjM1lowh1cxd%L z)9Qy(#=8p2?gW`)uaD9q)(O=A0!_Cs#8-oZT0+_|=_Nusc6h>vB?*qu1y_zlT5BAF zcEj&Ww=eKA2_we+<}ji(IiC5=A)+)@Kcl;)Q&b?{zK>)<6c#VwwAnlSKW`P^rHH#; z%}PfaOOr7unLk{1D&~ecKN@Gmj+H;ho z=hC!3+x07){QQx)WbE_nW2JAhvLa>kLr2!0QDdtS7uX!-1TH1(w&>RAuDFp(l#WTJ zSQ|C@+`hQDn5=aq%L+QR_w@FrOYEJ$yg2Jwa_3A_s%^xA>H6i3tWn3%B2QQ8%1m3S zoSmIlS6ACsR~Z``8s_&;cIVr#$-TxarsSTC#SspR#0oOj0oyEo#ve61b9(T_I`Ky zX4A68}eT-F60yz#>pP4W7T{P;Xrd618vHQRKRuC=%C*8Y{0wS+xExI(DJdy2-e_=e zkurrNG*t1OEBkDxMkOrRQJo}P=%|^*Qe(pb!}p4Qm)|l)XygfTB07FlR?TEAx}}8Y zF}||C6Cr8d9>vAFm6$bJe z#iOq)YwbrEWW;l_|?J#Oijy8({@19{hUZ)LAsv!Ay81+UkFEXNb&1$Al0jf~&s@JM-`(NpM#K#AB;$-z$Nmo4^(gWQTo5|)E zwk7%`8pHf-8CObO_(zvt`Yn_k9;NnLeIFnHRQ6TxBc1$fjAoN~PvJN%<_IT#L(di? z63m?N*JBP5u*5vZr$m<;qkTDJ4(8lxX1o*${Yx=PXm;O>Ly>nAdog0W(93mVC3DqA zydv5Gl(6NcNb@}q+`?JH zt0z{}S1$T~F=d-=JpP+7zMJe^YRaAEubT$3lKIyT_Y>zte zH`>e;TW!A?w0Wb%usl*ZA*4)z@vPH)bGG>|X>7soxgn?%5t528sdTl`APQjXIv0GL zB3g+LE2!lOMFdO5nTb+td9oHodItYL!VXgj!_(2JgrR9@MbQrcz2W7iq5*|>3im8 zdq&1XRBh6 zW%uOdWVLD3`(CZrqII;GIc&)RC2_3hF?oQl+z;Yl_sJ!3a!4tdf6>(yc3GH@$fu+` z82Sa)zDnd)oBklIsBKK7IHY@}f7-Av9?H>&C!=nK55>k4KMq|cU~x}S<*lIlliwNX zrMi{0iM?$$HEbsYt?(eL2Z_C-Zugy-KK}JiO`j-l(~wL$gTU9_hJ3Q(j#gs? zNQOuNT*Qg(>Uj24h~;T9_p1-+rhh&Z#dfZ#v-c-ceRLcSSHNFu=KXz?4=C2ZL~!#u z7chuhcllY*YBh?9D~ua;5_Ye#s38=1s}0I;WzI@qlI;0VvZvzi`MkaH+`wmyih#LW z^X#>?zAQC?1U=y+L&Lj3400wmbVcWVt45t`g=$`*C$W$@OXog>jbliB#7X|8CGhNn z$I3U7=GoCvV%h|30Cbt%Dkq>2!EucstR?ns-(b-}>(l+*`=(AEZ=D7}@X^b6EObV3iHbJ;p19a@4emF}PG-j-VUfsH3mJ28UX`lM zV`N?2X%EL5_&RRK>sD`MXK&x$oA|KG|HuXEMRg??CuiHt69Jc*wyX1@t9kt3<7=B< zB8p^k^n`EH(%MfCHyn|}0p)bq=&%d0nb)zfs)DaBV{nc8o@`C?88!Qn02%3@#$?ez zRG$snct};AYbA+^h~Ubo!#P1w;1m&wb^iHjVW!^0&e_@c@5U{Bd`qBNbaZsbYpTHp ze@<|&hkwvxwR3fS%$)47`Z3Bc2jXSW<~Cjw0L%y1Ii%>>W{tM*mKx(T)2q{o4^vJu zza*K>dvPSFh}<>#{yG#+Y)plw4rEPD>A!gKV!mtUPbn4wxUDH(@kJnGOpu$OzjkUmF=06+Qr|oz^QP5QAPTgMW95XfZ$h z+k#zXB){Cde|0-NJRE4mnkR*ahX*-1 zxsQ_)jW8~nS$kVVj?o$9juStwI`Q!Mcx0xCx5dVIxtnmNcB6od`mXEMKUeJQ;jjm$ z3D?Zzab69rnDbJ=*Ik`sv=3%O5QVq_BsiE5BLOQSbNXIE@=REGlx+~1TI z*g;yBj>UZX^vPP8*`B^9VtQ^a-irH1-A`cnbvYKXdDw})&t_*$JiWZ~T3hc21_rWF zSsKK!_8(6KU+B)X2H(%j%w+i!eBP4BR%;yv$^eXq(&YWaR>VBn^S&jP0C;i#r| z^LV|-%5GioS)E+r$Se9A2IZtKbx_eGd?Uu0|KP9_;|RLVBVYr6Zpn&Lag-#ym#YWV z1mx{pC`ymkd%(w_Z4z_Me>E{DnKRNs73}uND89<&P;99Y9ftvi)N%mE5nDJPQKdas3 z(!MW{9a4mYR?+j$C3liEWV;!G?YFo3I_6y(K8tYzAAI+1KlX`0i?gnPbOcJ$VuM*%Gvv?=xbVtCfaQW;P=gU>iGQ?5jDyLQ6X%PYlNOqTXGKq>0< zi|YwAsJ9m5#cjGIAl9l`JJ&obiisoKi$suT0Z60PpnJ${eA#?RpnQgjCXW?7&?VPU z0tdASXXo-X@AAz%A?PNK?FR|gC$}qA1t}{^CTzK81NN1T8a!{nVj!tmC2VS@<~@ZI zR0=0NokB2%7Tj{w80VJNGzNKn@HJwr_cX zn63IFMR;zIF&oc_SUMK)tB7wmli;NY{IUV$Hmq(g$bW3d-pmXEGy8J3(;DC2{%G~k z@0|wIGKs_Jkh{=#T6y-N0Azfl_s(xvo0Ce&upR6Axw2J_K7<&2!AHmC+U0YB|^*%j?0F_9d}06kx{n4b=I0pbj;*<4d#Hb(5;t1>~E0{suPJ^qa(Z(fw9>9dv=&>;Sl&CEg~%5)8H^c=|3 z6TYI4#!UXV{VR5Ocv!nRH5t(J$@YxUm>`F3a!LEU5>`vUG_tA>jcyq+DG&e((7V z|7kYJ!}B@02pS)!C%=h`P-WO2r(X>uXaBZ3H#b>f;*7vI2zULO9jA#6;{I*dO6wJQ z)v7U4XAD|ET7dk1-o40ryCfxP{}hA+xIaotN&^|zldDaK}C8zNjZ@`pdLeue#jK_ESWU8IjU#pFE)P^Krm zk+OUaUe4yPMzWuEu9dxfy4S+nL!zT^obN`7TS*l%RhMTCjoB5gFu~S*vEbro))AwP zp}^5p^gZ2P^^NPv`}&Y6R5rhzNL93b`bF8hyAuHesmqi&5#MKLXJ4UJD)|2GeOTqa zV{-nluGM<*DG*$MYCk_e3KcZDUAhEph(h50!!tbdv02$kt*Upj84_>sXWa5?%;dY} z$eZ$K?j8S~YF5krR}TQmQI6_)s+4+hog zCpJ>Wv1Ey@Lv^es6Th_rKIhXU3r=#k<$*iEwE2x*QTVCzg!xH&wLnST`dN27S{m#z zMavZHJD_?1!l>e-#DMq#6Y*DlM*!~~ZU16%NASiFYW)cwvEyYmXtM4nML|H7-c6m- zr!va~X~+WmZ=d8_h}-*xr{@ItUG@N_GT%xy8sb^2rG zocRq0v0_=jRudzRC2t(~T~z<)K#vY@L`XvD9GAA9mUbf*rbkAuLDD!*R8;X(_gcLk zG&U)E6I4|tUofP<>QB>p0a&SLi;DnKK3V5_zhy7ZRcq!{`ZYaD7wD9d1Osmc$7%8? zO^E?`Fm;TDvGF^WKKFdmY1k6e(;um3wFXlIPU5Qe1&UrYoWCr8*pW`1^G!hvcGHq_lD zTiBb)sRnu@okf{dv$BbeDhT|UCSRgZiIC>uAI|z)hq=7AeTVk0uHDf@4@;gHI>w+5 z6L9`(1TNY4iHUCJc}OKV=ihsRU~9pPyVK6R6jR@k8n4|gwd`|z*;6e=fWtnfO)y*A zri#acFa;|M{L-DH#b4fY07>&%td4mMIFuh<3kBA{mND@6d4tTBAEPH$$9fYz9&CFp_~5s6UFB< z2EQuNrMoH-Ei2wXxJuHr=1!Y@332cpNKIPWozF(>;D3Yb11~mb>WN&N4|TNXvO&4B z_J4L;Kt=CI12#}N#4_O0m&KxM)&7VGvxWs^@H0j$QQr|9}C-zmMVQ*FEB~s2Vd=jdFOR-!fBHgs$zHmmR04r1JOefpyS7_ z(miTV{-(CR_|@ob>EePHM%`vnHUDqx=VzZiS|tX}F^p&HCF1A1QUFRRHox~z-2VRQ zjd^dU69z~CBIFI>c%#xshT4~&oGOJQt6N)LyStnsqw483(;Gzb-2k8Ue3@jX%HOiY za6$U$v0i^f06x<0T48pzeG-c{I)!HtSpPGP-tk@3pfJ2PCqv0h1FD2wt*H22W}d^T zfp)0EsRtDm-(9oLtyW`UdRR2@@+Drtnxbh~mqj}WBk-r`-VcFncYMm?h}Zb*B>+Xo z%05@rBj`Uo%nm?Dun-bb_>y2_xSjm9PFV&+KWAjk!R9o{eRGlvEPHD5o21Fn6<(5N zgQdSnWT33smg^RgzimQ7NN9^YiQzTvcHp8KDTWW6`R^jH&OMA8y_{tl5lfq<&}E61 zMhCJF#u!BC;^HDy&a%HEO!15{g8u)U)YFQDY20d+a<$bF(B%Q^K~?-B=_D^awB;tW3(AT!txmyZ4?jG7IAZ(rlQR@1)3{lAUs+k%-5-h^Bu@u&p0$l} zM>td<4!VpRJfm;D$VrJrQH`D+xpG(Y!5=7r#&1$_(vZ1o z*s1Ks7WF4k3hyaxv_ndMhdKZNk<_-bFGh%2Ny4X%&`*I7ciWj2`}8z%qOh^??nBkA zvZbZ_xF!L6GN?EQNreD|m=h3pW1_MXTq}KvA_YeW2b^KMBNI=Jcv_$G=D;3Zo;NR)@(RKn8dKkg`Y6>za(YI{TXZA99eH)h84kTpCJ z=RsGmm1tzt&FX$W*%)V=X$j02^Ym{vahj^e1lg@u;H{BWm>oo6deW!+hDmE0>r=|; zD6W=64LbgQ9{^cAo8hO?^&j!~wzjr>Hp=T_nk3gFtZ6jm)QKUN0O^&Km8+7h(ygF- zSs$}w6@4g}&NQl@_Dh|KN=J4m0FvXGmBfdTyRG$t$HBM_+IS-lxtu9lAil2qq9_Z3+E zq~xFdlMm2|X*yZXciIKCUaJ=QfRq0diWPqNg9vsq;FI; zCS)USmQF?qa|mlcVA*Hy9V*}xeL9q_b0`G|itG7QmT)E>^tE!;R;wsz3>-}Y54D|s zekzA98Q25oCqu#Pe{qI!{9r8*0sKN9P+?FaaDLwG*KDWc$GSSpfPlA5^^7rqJp;rg zUV{>2#6ZnX{v@itnRu9~BBf4DDIWB8sqTA54iYRi>@=nK26cZYd4z;|8+;O(JlB3a zU|99M-speCu6fhoIlt3n2;JkCqi1Za*j-WJ3@GN@jF1F#K|B7ImNMEX8V7TvIx!|P zJAUc(`#WO3kItZE=?SA9etol4*3~6@Nh#Ffg~t7q-J}T{+D|o8FTiV6Ol9ZdxLxo_ zRY_^InWR^Pnusk^rRGTu{{d4_DWS1m($GWs&C#cyug`b z)}J5xi9v{z(p8YM=!AeC(qhJplMRO>tO-czqS#ya6b7OWA;LOZo4)@F43F`zSwFBZ z&sW43Q63_Y;#k@pV9Q{Q={397)8bKyK3C4*Z(rFTEAz4G!h!CdM|Uw@Vo>XSl#jK$ z>!v?qi!3tYCdPS^Xm=Z8_sQ|D`6q?+K^qjWJm2dsGX^-80wiW1t^NAt3&w`~qxS@H z8RfEHS3#0*9oBno86;%;_NTDr(8 zP_yaZw4)>c-xh$U7jbbUBtzdnPdU8BOesfLox-8ejyz0Lk|dS^sY!O?!4jdAXT;v^ z9WL|c?OQ9hSi9{{2n6mK>MnpLqk}@Tc4I>WClYD0V`y~yaXghwaIknrmF%KTDVL@5 z6pn<+{X=s_bz<1Brpwa}atex)o`W=ehquy=kLdorsT6=dxgaoRM}_M-MWdeO5AQkD z8h{F;PE(?V9!y#~xBCArnD5_N=5A zsDflJ0cgrjWi5TC(Tym-)1v#(shu57$iCRLW!;HkSRbt(O-gr5_8*Pe+k4{a>4^d^ zlA$jaRn}NN%(Egr2SUM@qJZr{KK7?U=;Oe;z!c%TSE1~D3DgrJ>gM%pj_V(F)Nq9^ zGEdJ3CU&AoiL3XDb&kDT&+f4sH$1z%41!iAocVc|>AB3*zoq0H9ofS`Hu}|df357t zt5t+{A9~`04(P@uU;Fjrfh}G-rt{WNCjq^u`exyXeo~}j<~`ZRkN4I~E31pSY9j|| zYiZ?Pe~~@nC0x?+q+oyC@$Q>Pn(Ko}akq^2N)S7DHKL$Ge^Q!*g@^;JE^)0FuAGy&VIRKp#!v znu*mZuob;>on`x+oB@Yioo8CiUDemu)Z_oH@29aB7-yxP2_=ZA6^<;3UoMJ6n-j(8 z+yrk%b%u6E;n(zutoN&C3M$a#nyw;KH@a9NNYT@8NH93tGi+F(_7s%JBYHw`vaP## zMzKE=KJI@8p-$|2a>KOk=N}Uc6VBXeR!1L_c6xxyjTUP{`GX50cCWB} zqf`8L6b-0~-yeYPEBl;D>)z;JndUOz9K_~sD;7@;OL7pA$bng#|$GZs{ee73rJOm%liN9ae z&LOlCYki|+M-^Hw=1lv0Gaf?=@xkXPqVobA@Nta?KjBk}qOPhy zBP|rp*l(-U@tR!DsPpLEwX;0`T$xynd!rtG3PK*sH!DnAU;2pRL1+090Rc7!Xpbmp z7Ws&NTc=)D{$kV@r`{rzh6I@jiYE&1o}{j>uCa2qf?5X6x-nFMn#h)d_yD9Sz1;d- zWklKs0tnoK0?h2de|NrRi^oGJ80s17{>K)<=jT86iNwF$~ro-v>cYZwmb3j9MwRFlZwkhXcC*~4od_w zxRy34otLBefDn>VzXlQ86~>}l!FgwEd)sC)zmH9CUtv4oJvh&@(EoaQPvk3J$lI}Y zEAEAf)=NI{e*3301I~WV$wJF7qf*JmtomXi{d;P@)@_ASESOk-B(4V8i@B@IBe-fZ z`N{b%D5f|RHwf5OHD&7ebj(}mQi!(%K`|h z@xB(2W1t*lILV(4+XZZ5v=YCr1=4c85`oY1=OvX`AM>B0gMS?nxIHWT(4OfAJ~nkz zM7Yv{H~lY;TKa}m1gIdgA@M8GEdOnx@%{u&f5yc@+DDbGm%=;|MR)(fJg%y2+Q5r?O>Yh& zot%=ARR>|<4C<>>I2tXad$C=&^;COvx)wKA?K$ohvqW>EwE7qE^GcScsi*fcJ3U>JIoYBU0qtb& zv~x)mA#?a3eIXiuUmOn_XL9r%x|tL?pBB~z#-OncZ8Ou0b=~8P)|0zV(;uTN&toM9 zJF)`)$~PVVjxEcej0=OduPSH^s;A*48AT-`(Z0!P`S~+T`qxHF#jKrw(18j% zYP}LeRS9T=R)tfMT}I?;r2dEc?2qfh15WW)Acj)|0cIWewa_Cnh_X8+lQp(WoM z8XLh@;N;`Ogt&kUft3?yoDqMZb+f6}G!v9HC~a@9B(xt{c@TF^d+Q#wX6_2OJR4dG zhn9Y?RR_p6oJY>5W$&_A7Uk-L1n77FH0N3nu^+_U!0ho9zK2p`Eg}A)0Wn(qzFtS+|j`{<{D_$ZgQwF!UGT)uq%mKezA~5nxwZT3TvvtV|WL zj`qG_?o`nAuGP=4FkF&s{RDk2xRo+U306FQt0vUggoN9`Jj+i+6HhRjw0g#{v<=3_ zI#i75Mlt^w%}?+iT!9M*(h~nM(tNWNW7c`YkhsE!%D3pQlia>OIMoDZXP8O)Y!lmzQbLgJXUE* zwimcJHY|cuE}JPmo!RH#j)fT*I7sHc(x})Q2|zcBPWytHKGMS&gZ@jSyMI?Zeg8Au z0?1iJAGEij7+D)yC?kY>g37nx!lPyYf TSZ~8n_o?M&RHQ2;&BFc%y(M80 literal 0 HcmV?d00001 diff --git a/examples/universal/src/index.html b/examples/universal/src/index.html index 9d970fba..36fd3392 100644 --- a/examples/universal/src/index.html +++ b/examples/universal/src/index.html @@ -6,9 +6,13 @@ - + + + - + diff --git a/examples/universal/src/styles.css b/examples/universal/src/styles.css index 2dc10f3a..4393ec65 100644 --- a/examples/universal/src/styles.css +++ b/examples/universal/src/styles.css @@ -1,5 +1,12 @@ /* You can add global styles to this file, and also import other style files */ +body { + font-family: "Montserrat", sans-serif; + margin: 0; + padding: 0; +} + +/* Not required by angular-modal-gallery. Used only in this demo */ .red-text { color: red; } diff --git a/examples/universal/src/tslint.json b/examples/universal/src/tslint.json index 52e2c1a5..0a734d04 100644 --- a/examples/universal/src/tslint.json +++ b/examples/universal/src/tslint.json @@ -4,13 +4,13 @@ "directive-selector": [ true, "attribute", - "app", + "ks", "camelCase" ], "component-selector": [ true, "element", - "app", + "ks", "kebab-case" ] } diff --git a/examples/universal/tslint.json b/examples/universal/tslint.json index ef7f6b4b..a03a1dec 100644 --- a/examples/universal/tslint.json +++ b/examples/universal/tslint.json @@ -30,7 +30,7 @@ "label-position": true, "max-line-length": [ true, - 140 + 240 ], "member-access": false, "member-ordering": [ diff --git a/src/_variables.scss b/src/_variables.scss deleted file mode 100644 index 51b6bd26..00000000 --- a/src/_variables.scss +++ /dev/null @@ -1,21 +0,0 @@ -// The MIT License (MIT) -// -// Copyright (c) 2017-2018 Stefano Cappa (Ks89) -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in all -// copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -// SOFTWARE. diff --git a/src/app/app.component.scss b/src/app/app.component.css similarity index 96% rename from src/app/app.component.scss rename to src/app/app.component.css index 72378144..df93ddae 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.css @@ -40,3 +40,8 @@ .copyright { text-align: center; } + +.margin { + margin-left: 15px; + margin-right: 15px; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 41bd93f8..018ca03d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,14 +1,14 @@ -



+



-

This library and these examples are created by Stefano Cappa (@Ks89)

+

This library and these examples are created by Stefano Cappa (@Ks89)

-
+

A special thank to all authors of icons used in this library:

-
+

A special thanks to all authors of spinners used in this library:

  • Luke Haas (@lukehaas) - tags and replacing with @ks89/angular-modal-gallery +
    @@ -6,6 +6,7 @@

    Welcome

    This is the official live example of @ks89/angular-modal-gallery. To get started quickly you can try and check the sourcecode of this example.

    If you need the full documentation with all apis, this is the official documentation website.

    + +

    The official documentation is available at ks89.github.io/angular-modal-gallery-2018-v7.github.io

    -

    The official documentation is available at ks89.github.io/angular-modal-gallery-2018-v7.github.io

    diff --git a/src/app/home/home.scss b/src/app/home/home.scss index 829c2846..9bfe7ee6 100644 --- a/src/app/home/home.scss +++ b/src/app/home/home.scss @@ -23,6 +23,11 @@ $text-color: #fff; $background: rgba(0, 0, 0, .7); +.container { + margin-left: 15px; + margin-right: 15px; +} + .my-app-custom-plain-container-row { align-items: center; display: flex; diff --git a/src/app/intro-header/intro-header.component.ts b/src/app/intro-header/intro-header.component.ts new file mode 100644 index 00000000..2d781d74 --- /dev/null +++ b/src/app/intro-header/intro-header.component.ts @@ -0,0 +1,32 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'ks-intro-header', + templateUrl: 'intro-header.html', + styleUrls: ['intro-header.scss'] +}) +export class IntroHeaderComponent {} diff --git a/src/app/intro-header/intro-header.html b/src/app/intro-header/intro-header.html new file mode 100644 index 00000000..5eec3f6a --- /dev/null +++ b/src/app/intro-header/intro-header.html @@ -0,0 +1,8 @@ +
    + @ks89/angular-modal-gallery icon +

    @ks89/angular-modal-gallery

    +

    Image gallery for Angular >=6

    +

    Currently v7

    +
    +
    diff --git a/src/app/intro-header/intro-header.scss b/src/app/intro-header/intro-header.scss new file mode 100644 index 00000000..15547baa --- /dev/null +++ b/src/app/intro-header/intro-header.scss @@ -0,0 +1,73 @@ +/* + * MIT License + * + * Copyright (c) 2017-2018 Stefano Cappa + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +// search all occurrences in all code, also html, because it's everywhere +$color-primary: #101010; +$color-secondary: #9e9e9e; +$color-white: #FFF; +$color-black: #000; +$color-light-black: #343A40; +$color-code: #c100e0; +$color-url: #0060b7; +$color-warning: #880012; + +//$font-huge: 24px; +$font-big: 18px; +$font-middle: 14px; +$font-small: 12px; +$font-very-small: 10px; + +.intro-header { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: $color-primary; + background: linear-gradient(135deg, $color-primary, $color-secondary); + margin-top: 10px; + padding-bottom: 1px; + color: $color-white; + + h1 { + color: $color-white; + font-size: 3rem; + } +} + +.project-title { + margin-top: 20px; + font-size: 2.8rem; + text-align: center; +} + +img { + margin-top: 25px; + border-radius: 10px +} + +.lead { + font-size: 1rem; + text-align: center; + color: #d4d4d4; +} diff --git a/src/app/modal-gallery/modal-gallery.scss b/src/app/modal-gallery/modal-gallery.scss index c5f93da1..34f4eda1 100644 --- a/src/app/modal-gallery/modal-gallery.scss +++ b/src/app/modal-gallery/modal-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/src/app/navbar/navbar.html b/src/app/navbar/navbar.html index eb4ef7f2..2fe67450 100644 --- a/src/app/navbar/navbar.html +++ b/src/app/navbar/navbar.html @@ -26,14 +26,6 @@
  • Plain Gallery
    • -
  • -
    - - - - -
    -
@@ -76,14 +68,6 @@
  • Plain Gallery
    • -
  • -
    - - - - -
    -
    • diff --git a/src/app/navbar/navbar.scss b/src/app/navbar/navbar.scss index ef8741d7..706da1ce 100644 --- a/src/app/navbar/navbar.scss +++ b/src/app/navbar/navbar.scss @@ -102,6 +102,10 @@ nav.nav-expanded { margin-right: 8px; cursor: pointer; + > img { + border-radius: 3px + } + &:hover { color: #bdbdbd; } @@ -200,6 +204,10 @@ nav.nav-collapsed { cursor: pointer; width: 100%; + > img { + border-radius: 3px + } + &:hover { color: #bdbdbd; } diff --git a/src/app/plain-gallery/plain-gallery.scss b/src/app/plain-gallery/plain-gallery.scss index c5f93da1..34f4eda1 100644 --- a/src/app/plain-gallery/plain-gallery.scss +++ b/src/app/plain-gallery/plain-gallery.scss @@ -136,3 +136,7 @@ $background: rgba(0, 0, 0, .7); width: 100%; pointer-events: none; } + +.title { + margin-top: 40px; +} diff --git a/src/styles.scss b/src/styles.scss index 46cbc42d..1f4cfc54 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -22,10 +22,10 @@ // You can add global styles to this file, and also import other style files -@import "variables"; - body { font-family: "Montserrat", sans-serif; + margin: 0; + padding: 0; } // Not required by angular-modal-gallery. Used only in this demo