From dbdca46e39acc5a842729a8df66d448b7b3efa76 Mon Sep 17 00:00:00 2001 From: Stefano Cappa Date: Mon, 15 Jan 2018 23:01:19 +0100 Subject: [PATCH] feat(): configure exturl button to navigate to an external url also in a new tab, instead of only in the current one #116 --- apps/main/src/app/app.component.html | 45 ++++++++++++++----- apps/main/src/app/app.component.ts | 30 +++++++++++++ .../src/app/app.component.html | 9 +++- .../src/app/app.component.ts | 30 +++++++++++++ .../angular-cli/src/app/app.component.html | 9 +++- examples/angular-cli/src/app/app.component.ts | 30 +++++++++++++ examples/systemjs/app/app.component.ts | 30 +++++++++++++ examples/systemjs/app/app.html | 9 +++- .../universal/src/app/home/home.component.ts | 30 +++++++++++++ examples/universal/src/app/home/home.html | 9 +++- .../src/app/pages/home/home.component.ts | 30 +++++++++++++ examples/webpack/src/app/pages/home/home.html | 9 +++- .../src/app/pages/lazy/lazy.component.ts | 30 +++++++++++++ examples/webpack/src/app/pages/lazy/lazy.html | 9 +++- .../modal-gallery/modal-gallery.component.ts | 8 +++- .../src/model/buttons-config.interface.ts | 1 + 16 files changed, 300 insertions(+), 18 deletions(-) diff --git a/apps/main/src/app/app.component.html b/apps/main/src/app/app.component.html index e39e25fa..663a0fa2 100644 --- a/apps/main/src/app/app.component.html +++ b/apps/main/src/app/app.component.html @@ -95,7 +95,8 @@

Z6 - full custom plain gallery (row) with descriptions

-
{{img.modal.description ? img.modal.description : 'No description available'}}
+
{{img.modal.description ? img.modal.description : 'No description available'}} +
@@ -250,7 +251,7 @@

B16 - Simple demo - buttons config SIMPLE strategy (close and download)

[buttonsConfig]="buttonsConfigSimple">
-

B17 - Simple demo - buttons config ADVANCED strategy (close, download and exturl)

+

B17 - Simple demo - buttons config ADVANCED strategy (close, download and exturl in the current tab)


@@ -265,7 +266,14 @@

B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for (buttonAfterHook)="onButtonAfterHook($event)">

-

B19 - Simple demo - buttons config CUSTOM strategy with font-awesome

+

B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')

+
+ +
+
+

B20 - Simple demo - buttons config CUSTOM strategy with font-awesome


This library and this example are created by Smartline from www.flaticon.com is licensed by CC 3.0 BY -
  • Icons made by Dave Gandy from www.flaticon.com is licensed by CC 3.0 BY
    • -
  • Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
    • -
  • Icons made by Those Icons from www.flaticon.com is licensed by CC 3.0 BY
    • -
  • Icons made by Gregor Cresnar from www.flaticon.com is licensed by CC 3.0 BY
    • +
  • Icons made by Smartline from www.flaticon.com is licensed by CC 3.0 BY +
    • +
  • Icons made by Dave Gandy from www.flaticon.com is licensed by CC 3.0 BY +
    • +
  • Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY +
    • +
  • Icons made by Those Icons from www.flaticon.com is licensed by CC 3.0 BY +
    • +
  • Icons made by Gregor + Cresnar from www.flaticon.com is licensed by CC 3.0 BY +

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

    diff --git a/apps/main/src/app/app.component.ts b/apps/main/src/app/app.component.ts index 2ff6aac8..da593e81 100644 --- a/apps/main/src/app/app.component.ts +++ b/apps/main/src/app/app.component.ts @@ -298,6 +298,36 @@ export class AppComponent { strategy: ButtonsStrategy.FULL }; + // default buttons but extUrl will open the link in a new tab instead of the current one + // this requires to specify all buttons manually (also if they are not really custom) + customButtonsConfigExtUrlNewTab: ButtonsConfig = { + visible: true, + strategy: ButtonsStrategy.CUSTOM, + buttons: [ + { + className: 'refresh-image', + type: ButtonType.REFRESH + }, + { + className: 'delete-image', + type: ButtonType.DELETE + }, + { + className: 'ext-url-image', + type: ButtonType.EXTURL, + extUrlInNewTab: true // <--- this is the important thing to understand this example + }, + { + className: 'download-image', + type: ButtonType.DOWNLOAD + }, + { + className: 'close-image', + type: ButtonType.CLOSE + } + ] + }; + customButtonsConfig: ButtonsConfig = { visible: true, strategy: ButtonsStrategy.CUSTOM, diff --git a/examples/angular-cli-material/src/app/app.component.html b/examples/angular-cli-material/src/app/app.component.html index 9a0a525a..fdf65fa1 100644 --- a/examples/angular-cli-material/src/app/app.component.html +++ b/examples/angular-cli-material/src/app/app.component.html @@ -298,7 +298,14 @@

    B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for (buttonAfterHook)="onButtonAfterHook($event)">
    -

    B19 - Simple demo - buttons config CUSTOM strategy with font-awesome

    +

    B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')

    +
    + +
    +
    +

    B20 - Simple demo - buttons config CUSTOM strategy with font-awesome


    B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for (buttonAfterHook)="onButtonAfterHook($event)">
    -

    B19 - Simple demo - buttons config CUSTOM strategy with font-awesome

    +

    B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')

    +
    + +
    +
    +

    B20 - Simple demo - buttons config CUSTOM strategy with font-awesome


    B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for (buttonAfterHook)="onButtonAfterHook($event)">
    -

    B19 - Simple demo - buttons config CUSTOM strategy with font-awesome

    +

    B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')

    +
    + +
    +
    +

    B20 - Simple demo - buttons config CUSTOM strategy with font-awesome


    B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for (buttonAfterHook)="onButtonAfterHook($event)">
    -

    B19 - Simple demo - buttons config CUSTOM strategy with font-awesome

    +

    B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')

    +
    + +
    +
    +

    B20 - Simple demo - buttons config CUSTOM strategy with font-awesome


    B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for (buttonAfterHook)="onButtonAfterHook($event)">
    -

    B19 - Simple demo - buttons config CUSTOM strategy with font-awesome

    +

    B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')

    +
    + +
    +
    +

    B20 - Simple demo - buttons config CUSTOM strategy with font-awesome


    B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for (buttonAfterHook)="onButtonAfterHook($event)">
    -

    B19 - Simple demo - buttons config CUSTOM strategy with font-awesome

    +

    B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')

    +
    + +
    +
    +

    B20 - Simple demo - buttons config CUSTOM strategy with font-awesome