Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added lazy loading for iframes #1001

Merged
merged 5 commits into from
Feb 8, 2019
Merged

Added lazy loading for iframes #1001

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7946179
Added lazy loading for iframes.
Feb 6, 2019
e3378c2
Renamed date-sample-src to data-sample-src.
Feb 6, 2019
ec9e706
Merge branch 'master' into tiliev/lazy-loading-iframes
Feb 7, 2019
3622c63
Merge branch 'master' into tiliev/lazy-loading-iframes
Feb 7, 2019
84d2a11
Updated igniteui-docfx-template to 2.0.10.
Feb 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions en/components/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ The Button directive within Ignite UI for Angular is intended to be used on any

### Button Demo

<div class="sample-container" style="height: 436px">
<div class="sample-container loading" style="height: 436px">
<iframe id="buttons-sample-iframe" seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-1" onload="onSampleIframeContentLoaded(this);">
</div>
<div>
Expand Down Expand Up @@ -46,8 +46,8 @@ Setting a simple [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondire
```

Result:
<div class="sample-container" style="height: 48px">
<iframe seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-2">
<div class="sample-container loading" style="height: 48px">
<iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-2">
</div>

You can add a Ripple effect. And also set its color `igxRipple="blue"`.
Expand All @@ -57,8 +57,8 @@ You can add a Ripple effect. And also set its color `igxRipple="blue"`.
```

Default ripple color. Custom ripple color:
<div class="sample-container" style="height: 48px">
<iframe seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-3">
<div class="sample-container loading" style="height: 48px">
<iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-3">
</div>

Using [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html) to turn a `span` element into a Ignite UI for Angular styled button.
Expand All @@ -68,8 +68,8 @@ Using [`igxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html)
```

The span now looks like:
<div class="sample-container" style="height: 54px">
<iframe seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-4">
<div class="sample-container loading" style="height: 54px">
<iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-4">
</div>

You can create a rased button.
Expand All @@ -78,8 +78,8 @@ You can create a rased button.
<button igxButton="raised" igxRipple="white">Raised</button>
```

<div class="sample-container" style="height: 54px">
<iframe seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-5">
<div class="sample-container loading" style="height: 54px">
<iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-5">
</div>

A floating action button and use an icon to display:
Expand All @@ -89,8 +89,8 @@ A floating action button and use an icon to display:
<igx-icon fontSet="material">edit</igx-icon>
</button>
```
<div class="sample-container" style="height: 74px">
<iframe seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-6">
<div class="sample-container loading" style="height: 74px">
<iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-6">
</div>

Or use icons as buttons:
Expand All @@ -106,8 +106,8 @@ Or use icons as buttons:
</button>
```
Icon results:
<div class="sample-container" style="height: 54px">
<iframe seamless width="100%" height="100%" frameborder="0" src="{environment:demosBaseUrl}/data-entries/buttons-sample-7">
<div class="sample-container loading" style="height: 54px">
<iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-7">
</div>

<div class="divider--half"></div>
Expand Down
16 changes: 8 additions & 8 deletions en/components/input_group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
Input groups in the Ignite UI for Angular controls allow developers to create easy-to-use and aesthetic forms. The user experiences simplicity with inputting data, and the inputs also provide mitigation for handling validation and errors.

### Input Group Demo
<div class="sample-container" style="height:750px">
<iframe id="input-group-sample-6-frame" src='{environment:demosBaseUrl}/data-entries/input-group-sample-6' width="100%" height="100%" seamless frameBorder="0"></iframe>
<div class="sample-container loading" style="height:750px">
<iframe id="input-group-sample-6-frame" src='{environment:demosBaseUrl}/data-entries/input-group-sample-6' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
</div>
<div>
<button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="input-group-sample-6-frame" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
Expand Down Expand Up @@ -60,8 +60,8 @@ If you want to have an input prefix or suffix, you can use Ignite UI for Angular
```

Here is how the sample looks:
<div class="sample-container" style="height:100px">
<iframe id="input-group-sample-3-frame" src='{environment:demosBaseUrl}/data-entries/input-group-sample-3' width="100%" height="100%" seamless frameBorder="0"></iframe>
<div class="sample-container loading" style="height:100px">
<iframe class="lazyload" id="input-group-sample-3-frame" data-src='{environment:demosBaseUrl}/data-entries/input-group-sample-3' width="100%" height="100%" seamless frameBorder="0"></iframe>
</div>
<div class="divider--half"></div>

Expand All @@ -81,16 +81,16 @@ Ignite UI for Angular Hint provides a helper text placed below the input. The hi
```

This is how the phone field with hint looks:
<div class="sample-container" style="height:110px">
<iframe id="input-group-sample-4-frame" src='{environment:demosBaseUrl}/data-entries/input-group-sample-4' width="100%" height="100%" seamless frameBorder="0"></iframe>
<div class="sample-container loading" style="height:110px">
<iframe class="lazyload" id="input-group-sample-4-frame" data-src='{environment:demosBaseUrl}/data-entries/input-group-sample-4' width="100%" height="100%" seamless frameBorder="0"></iframe>
</div>
<div class="divider--half"></div>

#### Styling
Our inputs could be styled differently by using the [`type`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html#type) property of the [`igxInputGroup`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) component. Currently we support four different ways of styling: line (the default one), box, border and search. This is how they look:

<div class="sample-container" style="height:520px">
<iframe id="input-group-sample-5-frame" src='{environment:demosBaseUrl}/data-entries/input-group-sample-5' width="100%" height="100%" seamless frameBorder="0"></iframe>
<div class="sample-container loading" style="height:520px">
<iframe class="lazyload" id="input-group-sample-5-frame" data-src='{environment:demosBaseUrl}/data-entries/input-group-sample-5' width="100%" height="100%" seamless frameBorder="0"></iframe>
</div>
<div>
<button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="input-group-sample-5-frame" data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz</button>
Expand Down
4 changes: 2 additions & 2 deletions en/components/localization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ for (const key of Object.keys(currentRS)) {
changei18n(currentRS);
```
<div>
<button data-localize="stackblitz" class="stackblitz-btn" date-sample-src="{environment:demosBaseUrl}/services/localization-sample-2"
<button data-localize="stackblitz" class="stackblitz-btn" data-sample-src="{environment:demosBaseUrl}/services/localization-sample-2"
data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz
</button>
</div>
Expand All @@ -51,7 +51,7 @@ currentRS.igx_grid_filter_row_close = '[Localized]Close';
```

<div>
<button data-localize="stackblitz" class="stackblitz-btn" date-sample-src="{environment:demosBaseUrl}/services/localization-sample-3"
<button data-localize="stackblitz" class="stackblitz-btn" data-sample-src="{environment:demosBaseUrl}/services/localization-sample-3"
data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions jp/components/localization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ for (const key of Object.keys(currentRS)) {
changei18n(currentRS);
```
<div>
<button data-localize="stackblitz" class="stackblitz-btn" date-sample-src="{environment:demosBaseUrl}/services/localization-sample-2"
<button data-localize="stackblitz" class="stackblitz-btn" data-sample-src="{environment:demosBaseUrl}/services/localization-sample-2"
data-demos-base-url="{environment:demosBaseUrl}">stackblitz で表示
</button>
</div>
Expand All @@ -52,7 +52,7 @@ currentRS.igx_grid_filter_row_close = '[Localized]Close';
```

<div>
<button data-localize="stackblitz" class="stackblitz-btn" date-sample-src="{environment:demosBaseUrl}/services/localization-sample-3"
<button data-localize="stackblitz" class="stackblitz-btn" data-sample-src="{environment:demosBaseUrl}/services/localization-sample-3"
data-demos-base-url="{environment:demosBaseUrl}">stackblitz で表示
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions kr/components/localization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ for (const key of Object.keys(currentRS)) {
changei18n(currentRS);
```
<div>
<button data-localize="stackblitz" class="stackblitz-btn" date-sample-src="{environment:demosBaseUrl}/services/localization-sample-2"
<button data-localize="stackblitz" class="stackblitz-btn" data-sample-src="{environment:demosBaseUrl}/services/localization-sample-2"
data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz
</button>
</div>
Expand All @@ -51,7 +51,7 @@ currentRS.igx_grid_filter_row_close = '[Localized]Close';
```

<div>
<button data-localize="stackblitz" class="stackblitz-btn" date-sample-src="{environment:demosBaseUrl}/services/localization-sample-3"
<button data-localize="stackblitz" class="stackblitz-btn" data-sample-src="{environment:demosBaseUrl}/services/localization-sample-3"
data-demos-base-url="{environment:demosBaseUrl}">view on stackblitz
</button>
</div>
Expand Down
Loading