Skip to content

Commit 0f96828

Browse files
author
Mesut Talebi
committed
updated to add html template for header
1 parent d80e2cd commit 0f96828

9 files changed

+74
-54
lines changed

‎MT.BootstrapLazyLoader.js.1.4.0.nupkg‎

-5.58 KB
Binary file not shown.

‎MT.BootstrapLazyLoader.js.1.4.1.nupkg‎

5.74 KB
Binary file not shown.

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,12 @@ Id + "Modal". with adding id to the toggle you can open multiple inner modals.
5656

5757
C6) **(New)** to prevent modal from closing by clicking the close button, pressing 'Esc' key or by clicking outside of the modal, you just need to add **data-closedisabled='false'**.
5858

59+
C7) **(New)** Now you can define a header template target for modal, this is useful if you want to place a customized html in header. for this you should replace **data-header** with **data-header-template** attribute and the value should be a css selector like '#idOfDomElementsThatContainsHtml' or any css selector.
60+
61+
Exmaple Result:
62+
63+
![sample modal with html template header](./images/sample-header-template.png)
64+
5965
**Note: Modal's Markup will automatically append to body, and you don't need to add Modal's markup to body manually.**
6066

6167
**Callback function after Ajax Loaded**

‎Scripts/MT.BootstrapLazyloader.js‎

Lines changed: 64 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
Nuget Package: MT.BootstrapLazyLoader.js
3-
Version: 1.4.0
3+
Version: 1.4.1
44
55
Created By: Mesut Talebi (mesut.talebi@gmail.com)
66
@@ -68,7 +68,7 @@ var MTLazyloader = function () {
6868
"</div>" +
6969
"</div>" +
7070
"</div>";
71-
71+
7272
var modal = $('#' + currHandleId);
7373
if (modal.length === 0) {
7474
$('body').append(modalHtml);
@@ -77,7 +77,7 @@ var MTLazyloader = function () {
7777
}
7878
else {
7979
$('body').append(modal);
80-
}
80+
}
8181

8282
//Ajax Get
8383
$(modal).find(modalContentId).html('');
@@ -113,7 +113,7 @@ var MTLazyloadBootstrapVersion = 3;
113113
$(function () {
114114
$(document).on('shown.bs.tab', '.nav-tabs.lazyload a[data-toggle="tab"]:not(.loaded)', function (e) {
115115
var loader = '<div class="text-center"><i class="fa fa-spin fa-spinner fa-2x text-muted"></i></div>';
116-
116+
117117
var pane = $(e.target).attr('href');
118118

119119
var url = $(e.target).data('url');
@@ -128,15 +128,15 @@ $(function () {
128128
$(pane).html(data);
129129
$(caller).addClass('loaded');
130130
})
131-
.fail(function () {
132-
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
133-
$(pane).html(alertDiv);
134-
})
135-
.done(function () {
136-
if (callback) {
137-
eval(callback);
138-
}
139-
});
131+
.fail(function () {
132+
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
133+
$(pane).html(alertDiv);
134+
})
135+
.done(function () {
136+
if (callback) {
137+
eval(callback);
138+
}
139+
});
140140
}
141141
});
142142

@@ -157,19 +157,19 @@ $(function () {
157157
$(pane).html(data);
158158
$(caller).addClass('loaded');
159159
})
160-
.fail(function () {
161-
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
162-
$(pane).html(alertDiv);
163-
})
164-
.done(function () {
165-
if (callback) {
166-
eval(callback);
167-
}
168-
});
160+
.fail(function () {
161+
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
162+
$(pane).html(alertDiv);
163+
})
164+
.done(function () {
165+
if (callback) {
166+
eval(callback);
167+
}
168+
});
169169
}
170170
});
171171

172-
$(document).on('click', '.lazyload.showModal', function (e) {
172+
$(document).on('click', '.lazyload.showModal', function (e) {
173173
var currHandle = $(this);
174174
var url = $(currHandle).data('url');
175175
if ($(this).prop("tagName") === "A" && url === undefined) {
@@ -187,35 +187,52 @@ $(function () {
187187
} else {
188188
currHandleId += "Modal";
189189
}
190-
190+
191191
var disableClose = $(currHandle).data('closedisabled');
192-
var modalHeader = $(currHandle).data('header');
192+
var modalHeaderTemplate = $(currHandle).data('headerTemplate');
193193
var modalClass = $(currHandle).data('size');
194194

195195
var modalHtml = "<!--Lazyloaded Modal -->" +
196-
"<div class='modal " + (MTLazyloadBootstrapVersion !== 4 ? "fade" : "") + "' id='" + currHandleId + "' role='dialog' aria-labelledby='" + currHandleId + "'>" +
197-
"<div class='modal-dialog " + modalClass + "' role='document'>" +
198-
"<div class='modal-content'>" +
196+
"<div class='modal " + (MTLazyloadBootstrapVersion !== 4 ? "fade" : "") + "' id='" + currHandleId + "' role='dialog' aria-labelledby='" + currHandleId + "'>" +
197+
"<div class='modal-dialog " + modalClass + "' role='document'>" +
198+
"<div class='modal-content'>" +
199199
"<div class='modal-header'>";
200200

201+
202+
var modalHeaderHtml = "";
203+
var isheaderTemaplate = modalHeaderTemplate !== undefined && modalHeaderTemplate.length > 0;
204+
var modalHeader = $(currHandle).data('header');
205+
201206
if (MTLazyloadBootstrapVersion === 4) {
202-
modalHtml += "<h5 class='modal-title'>" + modalHeader + "</h5>";
207+
if (isheaderTemaplate) {
208+
modalHeaderHtml = $(modalHeaderTemplate).html();
209+
}
210+
else {
211+
modalHeaderHtml = "<h5 class='modal-title'>" + modalHeader + "</h5>";
212+
}
203213
}
204214

205215
if (disableClose === undefined || disableClose === 'false') {
206-
modalHtml += "<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";
216+
modalHeaderHtml += "<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>";
207217
}
208218

209219
if (MTLazyloadBootstrapVersion !== 4) {
210-
modalHtml += "<h4 class='modal-title' id='LazyloadModalLabel'>" + modalHeader + "</h4>";
220+
if (isheaderTemaplate) {
221+
modalHeaderHtml = $(modalHeaderTemplate).html();
222+
}
223+
else {
224+
modalHeaderHtml += "<h4 class='modal-title' id='LazyloadModalLabel'>" + modalHeader + "</h4>";
225+
}
211226
}
212227

213-
modalHtml +="</div>" +
214-
"<div id='LazyloadModalContent'></div>" +
215-
"</div>" +
216-
"</div>" +
217-
"</div>";
218-
228+
modalHtml += modalHeaderHtml;
229+
230+
modalHtml += "</div>" +
231+
"<div id='LazyloadModalContent'></div>" +
232+
"</div>" +
233+
"</div>" +
234+
"</div>";
235+
219236
var callback = $(currHandle).data('callback');
220237

221238
var modal = $('#' + currHandleId);
@@ -228,9 +245,6 @@ $(function () {
228245
$('body').append(modal);
229246
}
230247

231-
//$(modal).find('.modal-header #LazyloadModalLabel').html(modalHeader);
232-
//$(modal).find('.modal-dialog').removeAttr("class").addClass('modal-dialog').addClass(modalClass);
233-
234248
//Ajax Get
235249
$(modal).find('#LazyloadModalContent').html('');
236250
$(currHandle).append(loader);
@@ -278,15 +292,15 @@ $(function () {
278292
$(pane).html(data);
279293
$(caller).addClass('loaded');
280294
})
281-
.fail(function () {
282-
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
283-
$(pane).html(alertDiv);
284-
})
285-
.done(function () {
286-
if (callback) {
287-
eval(callback);
288-
}
289-
});
295+
.fail(function () {
296+
var alertDiv = '<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> Error!!!</div>';
297+
$(pane).html(alertDiv);
298+
})
299+
.done(function () {
300+
if (callback) {
301+
eval(callback);
302+
}
303+
});
290304
}
291305
});
292-
});
306+
});

‎Scripts/MT.BootstrapLazyloader.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mt-bootstraplazyloader",
3-
"version": "1.4.0",
3+
"version": "1.4.1",
44
"homepage": "https://github.com/mesuttalebi/MT.BootstrapLazyloader.js",
55
"authors": [
66
"mesut talebi <mesut.talebi@gmail.com>"

‎images/sample-header-template.png‎

14.5 KB
Loading

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mt.bootstraplazyloader",
3-
"version": "1.4.0",
3+
"version": "1.4.1",
44
"description": "Lazy Loader for Bootstrap Tabs,Pills and Modals,This package adds lazyloading option to bootstrap tabs,pills, and Modals so content will load when the user clicks it.",
55
"main": "Scripts/MT.BootstrapLazyloader.js",
66
"scripts": {

0 commit comments

Comments
 (0)