Skip to content

Commit 37db046

Browse files
Harpushbeeman
Harpush
authored and
beeman
committed
feat: integrate iframe fix
1 parent 3c30521 commit 37db046

File tree

3 files changed

+45
-59
lines changed

3 files changed

+45
-59
lines changed

‎projects/angular-split/src/lib/component/split.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,14 @@
4242
overflow-x: hidden;
4343
overflow-y: hidden;
4444
}
45+
46+
.iframe-fix {
47+
position: absolute;
48+
top: 0;
49+
left: 0;
50+
width: 100%;
51+
height: 100%;
52+
}
4553
}
4654

4755
&.as-horizontal {

‎projects/angular-split/src/lib/directive/split-area.directive.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core'
2-
2+
import { Subscription } from 'rxjs'
33
import { SplitComponent } from '../component/split.component'
44
import { getInputBoolean, getInputPositiveNumber } from '../utils'
55

@@ -87,6 +87,8 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
8787
}
8888

8989
private transitionListener: Function
90+
private dragStartSubscription: Subscription
91+
private dragEndSubscription: Subscription
9092
private readonly lockListeners: Array<Function> = []
9193

9294
constructor(
@@ -113,6 +115,19 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
113115
},
114116
)
115117
})
118+
119+
const iframeFixDiv = this.renderer.createElement('div')
120+
this.renderer.addClass(iframeFixDiv, 'iframe-fix')
121+
122+
this.dragStartSubscription = this.split.dragStart.subscribe(() => {
123+
this.renderer.setStyle(this.elRef.nativeElement, 'position', 'relative')
124+
this.renderer.appendChild(this.elRef.nativeElement, iframeFixDiv)
125+
})
126+
127+
this.dragEndSubscription = this.split.dragEnd.subscribe(() => {
128+
this.renderer.removeStyle(this.elRef.nativeElement, 'position')
129+
this.renderer.removeChild(this.elRef.nativeElement, iframeFixDiv)
130+
})
116131
}
117132

118133
public setStyleOrder(value: number): void {
@@ -161,6 +176,9 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
161176
this.transitionListener()
162177
}
163178

179+
this.dragStartSubscription?.unsubscribe()
180+
this.dragEndSubscription?.unsubscribe()
181+
164182
this.split.removeArea(this)
165183
}
166184

‎src/app/examples/iframes/iframes.component.ts‎

Lines changed: 18 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'
2-
import { IOutputData, SplitComponent } from 'angular-split'
3-
1+
import { ChangeDetectionStrategy, Component } from '@angular/core'
42
import { AComponent } from '../../ui/components/AComponent'
53

64
@Component({
@@ -9,72 +7,34 @@ import { AComponent } from '../../ui/components/AComponent'
97
host: {
108
class: 'split-example-page',
119
},
12-
styles: [
13-
`
14-
.as-split-area > div {
15-
position: relative;
16-
height: 100%;
17-
overflow: hidden;
18-
}
19-
20-
.hack-iframe-hider {
21-
background: rgba(0, 0, 0, 0.2);
22-
position: absolute;
23-
top: 0;
24-
left: 0;
25-
width: 100%;
26-
height: 100%;
27-
}
28-
`,
29-
],
3010
template: `
3111
{{ testChangeDetectorRun() }}
3212
<div class="container">
3313
<sp-example-title [type]="exampleEnum.IFRAME"></sp-example-title>
3414
<div class="split-example" style="height: 400px;">
35-
<as-split
36-
#split
37-
direction="horizontal"
38-
(dragStart)="dragStartHandler($event)"
39-
(dragEnd)="dragEndHandler($event)"
40-
(gutterClick)="splitGutterClick($event)"
41-
>
15+
<as-split #split direction="horizontal">
4216
<as-split-area size="40">
43-
<div>
44-
<iframe src="https://angular-split.github.io" frameborder="0" width="100%" height="100%"></iframe>
45-
<div [hidden]="showIframeHider === false" class="hack-iframe-hider"></div>
46-
</div>
17+
<iframe
18+
src="https://angular-split.github.io"
19+
frameborder="0"
20+
scrolling="no"
21+
width="100%"
22+
height="100%"
23+
></iframe>
4724
</as-split-area>
4825
<as-split-area size="60">
49-
<div>
50-
<iframe src="https://angular-split.github.io" frameborder="0" width="100%" height="100%"></iframe>
51-
<div [hidden]="showIframeHider === false" class="hack-iframe-hider"></div>
52-
</div>
26+
<iframe
27+
src="https://angular-split.github.io"
28+
frameborder="0"
29+
scrolling="no"
30+
width="100%"
31+
height="100%"
32+
></iframe>
5333
</as-split-area>
5434
</as-split>
35+
<br />
5536
</div>
5637
</div>
5738
`,
5839
})
59-
export class IframesComponent extends AComponent {
60-
showIframeHider = false
61-
@ViewChild(SplitComponent) split: SplitComponent
62-
63-
dragStartHandler($event: IOutputData) {
64-
console.log('dragStartHandler', { event: $event })
65-
this.showIframeHider = true
66-
}
67-
68-
dragEndHandler($event: IOutputData) {
69-
console.log('dragEndHandler', { event: $event })
70-
this.showIframeHider = false
71-
}
72-
73-
splitGutterClick({ gutterNum }: IOutputData) {
74-
// By default, clicking the gutter without changing position does not trigger the 'dragEnd' event
75-
// This can be fixed by manually notifying the component
76-
// See issue: https://github.com/angular-split/angular-split/issues/186
77-
// TODO: Create custom example for this, and document it
78-
this.split.notify('end', gutterNum)
79-
}
80-
}
40+
export class IframesComponent extends AComponent {}

0 commit comments

Comments
 (0)