feat(): configure exturl button to navigate to an external url also i…

…n a new tab, instead of only in the current one #116
Ks89 · Jan 15, 2018 · dbdca46 · dbdca46
1 parent 091023e
commit dbdca46
Show file tree

Hide file tree

Showing 16 changed files with 300 additions and 18 deletions.
diff --git a/apps/main/src/app/app.component.html b/apps/main/src/app/app.component.html
@@ -95,7 +95,8 @@ <h3>Z6 - full custom plain gallery (row) with descriptions</h3>
       <figure class="my-app-custom-image-with-desc">
         <img [src]="img.modal.img"
              (click)="openImageModalRowDescription(img)"/>
-        <figcaption class="description">{{img.modal.description ? img.modal.description : 'No description available'}}</figcaption>
+        <figcaption class="description">{{img.modal.description ? img.modal.description : 'No description available'}}
+        </figcaption>
       </figure>
     </ng-container>
   </div>
@@ -250,7 +251,7 @@ <h3>B16 - Simple demo - buttons config SIMPLE strategy (close and download)</h3>
                     [buttonsConfig]="buttonsConfigSimple"></ks-modal-gallery>
 </section>
 <section>
-  <h3>B17 - Simple demo - buttons config ADVANCED strategy (close, download and exturl)</h3>
+  <h3>B17 - Simple demo - buttons config ADVANCED strategy (close, download and exturl in the current tab)</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [buttonsConfig]="buttonsConfigAdvanced"></ks-modal-gallery>
@@ -265,7 +266,14 @@ <h3>B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for
                     (buttonAfterHook)="onButtonAfterHook($event)"></ks-modal-gallery>
 </section>
 <section>
-  <h3>B19 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
+  <h3>B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')</h3>
+  <br>
+  <ks-modal-gallery [modalImages]="images"
+                    [downloadable]="true"
+                    [buttonsConfig]="customButtonsConfigExtUrlNewTab"></ks-modal-gallery>
+</section>
+<section>
+  <h3>B20 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [downloadable]="true"
@@ -352,18 +360,35 @@ <h4>This library and this example are created by <a href="https://github.com/Ks8
 <section>
   <h4>A special thank to all authors of icons used in this library:</h4>
   <ul>
-    <li>Icons made by <a href="https://www.flaticon.com/authors/smartline" title="Smartline">Smartline</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
-    <li>Icons made by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
-    <li>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
-    <li>Icons made by <a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
-    <li>Icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></li>
+    <li>Icons made by <a href="https://www.flaticon.com/authors/smartline" title="Smartline">Smartline</a> from <a
+      href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a
+      href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+    </li>
+    <li>Icons made by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a
+      href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a
+      href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+    </li>
+    <li>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a
+      href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a
+      href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+    </li>
+    <li>Icons made by <a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a> from <a
+      href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a
+      href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+    </li>
+    <li>Icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor
+      Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a
+      href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+    </li>
   </ul>
 </section>
 
 <section>
   <h4>A special thanks to all authors of spinners used in this library:</h4>
   <ul>
-    <li><a href="https://github.com/lukehaas">Luke Haas (@lukehaas)</a> - <a href="https://github.com/lukehaas/css-loaders">lukehaas/css-loaders</a></li>
-    <li><a href="https://github.com/martinvd">Martin van Driel (@martinvd)</a> - <a href="https://codepen.io/martinvd/pen/xbQJom">martinvd example on codepen.io</a></li>
+    <li><a href="https://github.com/lukehaas">Luke Haas (@lukehaas)</a> - <a
+      href="https://github.com/lukehaas/css-loaders">lukehaas/css-loaders</a></li>
+    <li><a href="https://github.com/martinvd">Martin van Driel (@martinvd)</a> - <a
+      href="https://codepen.io/martinvd/pen/xbQJom">martinvd example on codepen.io</a></li>
   </ul>
 </section>
diff --git 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
@@ -298,7 +298,14 @@ <h3>B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for
                     (buttonAfterHook)="onButtonAfterHook($event)"></ks-modal-gallery>
 </section>
 <section>
-  <h3>B19 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
+  <h3>B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')</h3>
+  <br>
+  <ks-modal-gallery [modalImages]="images"
+                    [downloadable]="true"
+                    [buttonsConfig]="customButtonsConfigExtUrlNewTab"></ks-modal-gallery>
+</section>
+<section>
+  <h3>B20 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [downloadable]="true"

diff --git a/examples/angular-cli-material/src/app/app.component.ts b/examples/angular-cli-material/src/app/app.component.ts
@@ -307,6 +307,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/src/app/app.component.html b/examples/angular-cli/src/app/app.component.html
@@ -265,7 +265,14 @@ <h3>B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for
                     (buttonAfterHook)="onButtonAfterHook($event)"></ks-modal-gallery>
 </section>
 <section>
-  <h3>B19 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
+  <h3>B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')</h3>
+  <br>
+  <ks-modal-gallery [modalImages]="images"
+                    [downloadable]="true"
+                    [buttonsConfig]="customButtonsConfigExtUrlNewTab"></ks-modal-gallery>
+</section>
+<section>
+  <h3>B20 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [downloadable]="true"

diff --git a/examples/angular-cli/src/app/app.component.ts b/examples/angular-cli/src/app/app.component.ts
@@ -295,6 +295,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/systemjs/app/app.component.ts b/examples/systemjs/app/app.component.ts
@@ -295,6 +295,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/systemjs/app/app.html b/examples/systemjs/app/app.html
@@ -265,7 +265,14 @@ <h3>B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for
                     (buttonAfterHook)="onButtonAfterHook($event)"></ks-modal-gallery>
 </section>
 <section>
-  <h3>B19 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
+  <h3>B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')</h3>
+  <br>
+  <ks-modal-gallery [modalImages]="images"
+                    [downloadable]="true"
+                    [buttonsConfig]="customButtonsConfigExtUrlNewTab"></ks-modal-gallery>
+</section>
+<section>
+  <h3>B20 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [downloadable]="true"

diff --git a/examples/universal/src/app/home/home.component.ts b/examples/universal/src/app/home/home.component.ts
@@ -295,6 +295,36 @@ export class HomeComponent {
     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/universal/src/app/home/home.html b/examples/universal/src/app/home/home.html
@@ -265,7 +265,14 @@ <h3>B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for
                     (buttonAfterHook)="onButtonAfterHook($event)"></ks-modal-gallery>
 </section>
 <section>
-  <h3>B19 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
+  <h3>B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')</h3>
+  <br>
+  <ks-modal-gallery [modalImages]="images"
+                    [downloadable]="true"
+                    [buttonsConfig]="customButtonsConfigExtUrlNewTab"></ks-modal-gallery>
+</section>
+<section>
+  <h3>B20 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
   <br>
   <ks-modal-gallery [modalImages]="images"
                     [downloadable]="true"

diff --git a/examples/webpack/src/app/pages/home/home.component.ts b/examples/webpack/src/app/pages/home/home.component.ts
@@ -295,6 +295,36 @@ export class HomeComponent {
     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/webpack/src/app/pages/home/home.html b/examples/webpack/src/app/pages/home/home.html
@@ -269,7 +269,14 @@ <h3>B18 - Simple demo - buttons config FULL strategy (all buttons) + listen for
                             (buttonAfterHook)="onButtonAfterHook($event)"></ks-modal-gallery>
         </section>
         <section>
-          <h3>B19 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
+          <h3>B19 - Simple demo - buttons config CUSTOM strategy with exturl in ANOTHER TAB ('_blank')</h3>
+          <br>
+          <ks-modal-gallery [modalImages]="images"
+                            [downloadable]="true"
+                            [buttonsConfig]="customButtonsConfigExtUrlNewTab"></ks-modal-gallery>
+        </section>
+        <section>
+          <h3>B20 - Simple demo - buttons config CUSTOM strategy with font-awesome</h3>
           <br>
           <ks-modal-gallery [modalImages]="images"
                             [downloadable]="true"