Merge pull request #3 from sebgroup/feature/reload

Feature/reload
seb-oss · Apr 14, 2020 · 6903fdf · 6903fdf
2 parents 5b03146 + 94d74a2
commit 6903fdf
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -34,6 +34,10 @@ export namespace Components {
     */
     'minWidth': string;
     /**
+    * Force reload of iframe when source changes, useful for SPA:s that won't refresh otherwise.
+    */
+    'reloadOnChange': boolean;
+    /**
     * Debounce time in milliseconds for resize event.
     */
     'resizeDebounce': number;
@@ -104,6 +108,10 @@ declare namespace LocalJSX {
     */
     'onMagicIframeEvent'?: (event: CustomEvent<MagicIframeEvent>) => void;
     /**
+    * Force reload of iframe when source changes, useful for SPA:s that won't refresh otherwise.
+    */
+    'reloadOnChange'?: boolean;
+    /**
     * Debounce time in milliseconds for resize event.
     */
     'resizeDebounce'?: number;

diff --git a/src/components/seb-magic-iframe/readme.md b/src/components/seb-magic-iframe/readme.md
@@ -30,6 +30,7 @@ magicIframe.styleUrls = ['/css/external-stylesheet.css', '/css/fonts.css']
 | `matchContentWidth` | `match-content-width` | Set width of magic iframe to width of iframe content, useful when iframing fixed width pages.                                                                          | `"auto" \| boolean` | `false`     |
 | `maxHeight`         | `max-height`          | Prevent the iframe from growing infinitely by setting a max height i.e. prevent infinite loop for height value when iframe content height depends on container height. | `string`            | `'10000vh'` |
 | `minWidth`          | `min-width`           | Set a min width for the iframe.                                                                                                                                        | `string`            | `undefined` |
+| `reloadOnChange`    | `reload-on-change`    | Force reload of iframe when source changes, useful for SPA:s that won't refresh otherwise.                                                                             | `boolean`           | `false`     |
 | `resizeDebounce`    | `resize-debounce`     | Debounce time in milliseconds for resize event.                                                                                                                        | `number`            | `0`         |
 | `sanitizeSource`    | `sanitize-source`     | Sanitize url:s (both for iframe and external stylesheets) to prevent XSS attacks.                                                                                      | `boolean`           | `true`      |
 | `scaleContent`      | `scale-content`       | Scale content inside iframe to match with of iframe, useful when iframing fixed width pages.                                                                           | `boolean`           | `false`     |

diff --git a/src/components/seb-magic-iframe/seb-magic-iframe.tsx b/src/components/seb-magic-iframe/seb-magic-iframe.tsx
@@ -78,6 +78,11 @@ export class SebMagicIframe {
    */
   @Prop() maxHeight: string = '10000vh';
 
+  /**
+   * Force reload of iframe when source changes, useful for SPA:s that won't refresh otherwise.
+   */
+  @Prop() reloadOnChange: boolean = false;
+
   /**
    * Print debug log (console log).
    */
@@ -88,8 +93,12 @@ export class SebMagicIframe {
    *
    */
   @Watch('source')
-  sourceChangeHandler(newValue: boolean, oldValue: boolean) {
-    if(newValue !== oldValue){ this.loaded = false; }
+  sourceChangeHandler(newValue: string, oldValue: string) {
+    if(newValue.split('?')[0] !== oldValue.split('?')[0]){
+      this.loaded = false;
+    } else if(this.reloadOnChange && newValue !== oldValue) {
+      setTimeout(()=>this.iframe.contentDocument.location.reload(),200);
+    }
   }
 
   @Watch('scaleContent')