Skip to content

Commit 72ce9ec

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 4e11d40 commit 72ce9ec

File tree

4 files changed

+222
-127
lines changed

4 files changed

+222
-127
lines changed

‎docs/api/javascript/ui/breadcrumb.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ The root icon is clickable and resets the value of the component.
203203
});
204204
</script>
205205

206-
## size `String` *(default: "medium")*
206+
### size `String` *(default: "medium")*
207207

208208
Sets a value controlling size of the component. Can also be set to the following string values:
209209

‎src/kendo.pager.js‎

Lines changed: 205 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ var __meta__ = {
1414
ui = kendo.ui,
1515
Widget = ui.Widget,
1616
keys = kendo.keys,
17+
mediaQuery = kendo.mediaQuery,
18+
support = kendo.support,
1719
encode = kendo.htmlEncode,
1820
template = kendo.template,
1921
FIRST = "caret-alt-to-left",
@@ -24,7 +26,6 @@ var __meta__ = {
2426
LAST_CONST = "caret-alt-to-right",
2527
PREV_CONST = "caret-alt-left",
2628
NEXT_CONST = "caret-alt-right",
27-
SIZE = "k-pager-mobile-md k-pager-mobile-sm",
2829
FOCUSABLE = ":kendoFocusable:not([tabindex='-1'])",
2930
CHANGE = "change",
3031
NS = ".kendoPager",
@@ -34,7 +35,7 @@ var __meta__ = {
3435
MOUSEDOWN = "down",
3536
MAX_VALUE = Number.MAX_VALUE,
3637
isRtl = false,
37-
iconTemplate = ({ text, wrapClassName, className, size }) => `<button role="button" title="${text}" aria-label="${text}" class="k-pager-nav k-button k-button-flat k-button-flat-base k-icon-button ${wrapClassName} ${size}">${kendo.ui.icon(className)}</button>`;
38+
iconTemplate = ({ text, wrapClassName, className, size }) => `<button role="button" title="${text}" aria-label="${text}" class="k-pager-nav k-button k-button-flat k-button-flat-base k-icon-button ${wrapClassName} ${size}">${kendo.ui.icon($('<span class="k-button-icon"></span>'),className)}</button>`;
3839

3940
function button(options) {
4041
return options.template( {
@@ -95,9 +96,10 @@ var __meta__ = {
9596
var Pager = Widget.extend( {
9697
init: function(element, options) {
9798
var that = this, page, totalPages;
98-
var sizeClassName = null;
9999
var buttonSize = "";
100100
var dropDownClasses = "";
101+
var width;
102+
var info;
101103

102104
Widget.fn.init.call(that, element, options);
103105

@@ -129,7 +131,6 @@ var __meta__ = {
129131
NEXT = NEXT_CONST;
130132
}
131133

132-
133134
if (options.size) {
134135
buttonSize = kendo.getValidCssClass("k-button-", "size", options.size);
135136
dropDownClasses = "k-rounded-md " + kendo.getValidCssClass("k-picker-", "size", options.size);
@@ -168,7 +169,7 @@ var __meta__ = {
168169
that._numericSelect = that._numericWrap.find(".k-dropdown");
169170

170171
if (that._numericSelect.length === 0) {
171-
that._numericSelect = $("<select aria-label='" + that.options.messages.numbersSelectLabel + "' class='k-dropdown k-picker k-dropdown-list " + dropDownClasses + "' />").appendTo(that._numericWrap);
172+
that._numericSelect = $("<select aria-label='" + that.options.messages.numbersSelectLabel + "' class='k-dropdown k-picker k-picker-solid k-dropdown-list " + dropDownClasses + "' />").appendTo(that._numericWrap);
172173
}
173174
}
174175

@@ -223,7 +224,7 @@ var __meta__ = {
223224
return "<option>" + size + "</option>";
224225
});
225226

226-
$('<span class="k-pager-sizes k-label"><select></select>' + encode(options.messages.itemsPerPage) + "</span>")
227+
$('<span class="k-pager-sizes"><select></select><span>' + encode(options.messages.itemsPerPage) + "</span></span>")
227228
.appendTo(that.element)
228229
.find("select").html(pageItems.join("")).end()
229230
.appendTo(that.element);
@@ -265,18 +266,29 @@ var __meta__ = {
265266
that._resizeHandler = that.resize.bind(that, true);
266267
$(window).on("resize" + NS, that._resizeHandler);
267268

268-
sizeClassName = that._getWidthSizeClass(that.element.outerWidth());
269-
270-
if (sizeClassName) {
271-
that.element.addClass(sizeClassName);
272-
}
273-
274269
if (options.size) {
275270
that.element.addClass(kendo.getValidCssClass("k-pager-", "size", options.size));
276271
}
277272

278273
that._navigatable();
279274

275+
if (that.options.responsive) {
276+
width = that.element.outerWidth();
277+
info = that.element.find(".k-pager-info");
278+
if (width <= 480) {
279+
info.hide();
280+
that.element.find(".k-pager-sizes").children().hide();
281+
if (options.numeric) {
282+
that._numericSelect.show();
283+
that.list.hide();
284+
}
285+
} else if (width <= 600) {
286+
info.hide();
287+
} else if (options.numeric) {
288+
that._numericSelect.hide();
289+
}
290+
}
291+
280292
kendo.notify(that);
281293
},
282294

@@ -301,8 +313,8 @@ var __meta__ = {
301313
options: {
302314
name: "Pager",
303315
ARIATemplate: ({ page, totalPages }) => `Page navigation, page ${page} of ${totalPages}`,
304-
selectTemplate: ({ text, title, tabindex, size }) => `<button role="button" aria-current="page" tabindex="${tabindex}" aria-label="${title}" class="k-button ${size} k-button-flat k-button-flat-primary k-selected">${encode(text)}</span>`,
305-
linkTemplate: ({ ns, idx, text, title, tabindex, size }) => `<button class="k-button ${size} k-button-flat k-button-flat-primary" tabindex="${tabindex}" href="#" data-${ns}page="${idx}" ${title !== "" ? `title="${title}"` : ''}>${encode(text)}</button>`,
316+
selectTemplate: ({ text, title, tabindex, size }) => `<button role="button" aria-current="page" tabindex="${tabindex}" aria-label="${title}" class="k-button ${size} k-button-flat k-button-flat-primary k-selected"><span class="k-button-text">${encode(text)}</span></button>`,
317+
linkTemplate: ({ ns, idx, text, title, tabindex, size }) => `<button class="k-button ${size} k-button-flat k-button-flat-primary" tabindex="${tabindex}" href="#" data-${ns}page="${idx}" ${title !== "" ? `title="${title}"` : ''}><span class="k-button-text">${encode(text)}</span></button>`,
306318
numericSelectItemTemplate: ({ idx, selected, text }) => `<option value="${idx}" ${selected ? 'selected="selected"' : '' }>${encode(text)}</option>`,
307319
buttonCount: 10,
308320
autoBind: true,
@@ -354,18 +366,180 @@ var __meta__ = {
354366
});
355367
},
356368

369+
_adaptiveStep: function(step, hide, availableWidth) {
370+
var that = this;
371+
switch (step) {
372+
case 0:
373+
return that._toggleButtons(hide, availableWidth);
374+
case 1:
375+
return that._toggleRefresh(hide, availableWidth);
376+
case 2:
377+
return that._togglePagerInfo(hide, availableWidth);
378+
case 3:
379+
return that._toggleInputSizesLabel(hide, availableWidth);
380+
case 4:
381+
return that._togglePageSizesLabel(hide, availableWidth);
382+
case 5:
383+
return that._togglePageSizesDropDown(hide, availableWidth);
384+
case 6:
385+
return that._togglePageInputs(hide, availableWidth);
386+
default:
387+
break;
388+
}
389+
},
390+
391+
_calculateNeededWidth: function() {
392+
var sumWidth = 0;
393+
var gap = parseInt(this.element.css("gap"));
394+
this.element.children().each(function() {
395+
const element = $(this);
396+
const pagerInfo = element.hasClass("k-pager-info");
397+
if (pagerInfo) {
398+
element.removeClass("k-pager-info k-label");
399+
}
400+
sumWidth += element.is(":visible") ? element.width() : 0;
401+
sumWidth += gap;
402+
if (pagerInfo) {
403+
element.addClass("k-pager-info k-label");
404+
}
405+
});
406+
return sumWidth;
407+
},
408+
357409
_resize: function(size) {
358-
if (size.width) {
359-
var sizeClassName = this._getWidthSizeClass(size.width);
360-
var el = this.element;
410+
var that = this;
411+
if (!that._lastWidth || !that.options.responsive) {
412+
return;
413+
}
361414

362-
if (!sizeClassName) {
363-
el.removeClass(SIZE);
364-
} else if (!el.hasClass(sizeClassName)) {
365-
el.removeClass(SIZE);
366-
el.addClass(sizeClassName);
415+
if (that._lastWidth < size.width) {
416+
for (let i = 6; i >= 0; i--) {
417+
const availableWidth = that._calculateNeededWidth();
418+
if (size.width < availableWidth) {
419+
break;
420+
}
421+
const shouldBreak = that._adaptiveStep(i, false, size.width - availableWidth);
422+
if (shouldBreak) {
423+
break;
424+
}
425+
}
426+
} else if (that._lastWidth > size.width) {
427+
for (let i = 0; i < 7; i++) {
428+
if (size.width > that._calculateNeededWidth()) {
429+
break;
430+
}
431+
that._adaptiveStep(i, true);
367432
}
368433
}
434+
that._lastWidth = size.width;
435+
},
436+
437+
_toggleButtons: function(hide, availableWidth) {
438+
if (!this._numericWrap || !this.list || !this._numericSelect) {
439+
return;
440+
}
441+
442+
if (hide) {
443+
this._numericSelect.show();
444+
this.list.hide();
445+
} else if (availableWidth && ((this.list.width() - this._numericSelect.width()) < availableWidth)) {
446+
this._numericSelect.hide();
447+
this.list.show();
448+
}
449+
},
450+
451+
_toggleRefresh: function(hide, availableWidth) {
452+
if (!this.options.refresh) {
453+
return;
454+
}
455+
const refreshContainer = this.element.find(".k-pager-refresh");
456+
457+
if (hide) {
458+
refreshContainer.hide();
459+
} else if (availableWidth && (refreshContainer.width() < availableWidth)) {
460+
refreshContainer.show();
461+
} else {
462+
return true;
463+
}
464+
},
465+
466+
_togglePagerInfo: function(hide, availableWidth) {
467+
if (!this.options.info) {
468+
return;
469+
}
470+
const infoBox = this.element.find(".k-pager-info");
471+
if (hide) {
472+
infoBox.hide();
473+
} else if (availableWidth && (infoBox.width() < availableWidth)) {
474+
infoBox.show();
475+
} else if (!infoBox.is(":visible")) {
476+
return true;
477+
}
478+
},
479+
480+
_toggleInputSizesLabel: function(hide, availableWidth) {
481+
if (!this.options.input) {
482+
return;
483+
}
484+
const inputElements = this.element.find(".k-pager-input").children();
485+
const labels = inputElements.eq(0).add(inputElements.eq(2));
486+
487+
if (hide) {
488+
labels.hide();
489+
} else if (availableWidth && ((inputElements.eq(0).width() + inputElements.eq(2).width()) < availableWidth)) {
490+
labels.show();
491+
} else {
492+
return true;
493+
}
494+
},
495+
496+
497+
_togglePageSizesLabel: function(hide, availableWidth) {
498+
if (!this.options.pageSizes) {
499+
return;
500+
}
501+
const label = this.element.find(".k-pager-sizes").children().eq(1);
502+
503+
if (hide) {
504+
label.hide();
505+
} else if (availableWidth && (label.width() < availableWidth)) {
506+
label.show();
507+
} else {
508+
return true;
509+
}
510+
},
511+
512+
_togglePageSizesDropDown: function(hide, availableWidth) {
513+
if (!this.options.pageSizes) {
514+
return;
515+
}
516+
517+
const picker = this.element.find(".k-pager-sizes .k-picker");
518+
519+
if (hide) {
520+
picker.hide();
521+
} else if (availableWidth && (picker.width() < availableWidth)) {
522+
picker.show();
523+
} else {
524+
return true;
525+
}
526+
},
527+
528+
529+
_togglePageInputs: function(hide, availableWidth) {
530+
var options = this.options;
531+
532+
if (!options.input || !this._numericSelect) {
533+
return;
534+
}
535+
536+
if (hide) {
537+
this._numericSelect.hide();
538+
} else if (availableWidth && (this._numericSelect.width() < availableWidth) && !this.list.is(":visible")) {
539+
this._numericSelect.show();
540+
} else {
541+
return true;
542+
}
369543
},
370544

371545
_createDataSource: function(options) {
@@ -469,9 +643,9 @@ var __meta__ = {
469643
if (options.input) {
470644
that.element
471645
.find(".k-pager-input")
472-
.html(that.options.messages.page +
646+
.html('<span>' + encode(that.options.messages.page) + '</span>' +
473647
'<span class="k-textbox k-input k-input-md k-rounded-md k-input-solid"><input class="k-input-inner" aria-label="' + that.options.messages.page + " " + page + '"></span>' +
474-
encode(kendo.format(options.messages.of, totalPages)))
648+
'<span>' + encode(kendo.format(options.messages.of, totalPages)) + '</span>')
475649
.find("input")
476650
.val(page)
477651
.attr(DISABLED, total < 1)
@@ -509,6 +683,13 @@ var __meta__ = {
509683
that._restoreFocus(start, end, totalPages);
510684
that._excludeChildrenFromTab();
511685
that._updateAria();
686+
687+
if (totalPages) {
688+
that._lastWidth = kendo._outerWidth(that.element) + 12;
689+
that.resize(true);
690+
} else if (that._lastWidth) {
691+
that._lastWidth = kendo._outerWidth(that.element);
692+
}
512693
},
513694

514695
_excludeChildrenFromTab: function() {
@@ -744,20 +925,6 @@ var __meta__ = {
744925
}
745926
}
746927
},
747-
748-
_getWidthSizeClass: function(width) {
749-
var that = this,
750-
sizes = SIZE.split(" ");
751-
752-
if (!that.options.responsive) {
753-
return null;
754-
} else if (width <= 480) {
755-
return sizes[1];
756-
} else if (width <= 600) {
757-
return sizes[0];
758-
}
759-
return null;
760-
}
761928
});
762929

763930
ui.plugin(Pager);

‎tests/pager/navigatable.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
pager._keyDown(enter);
6262
var activeElement = $(document.activeElement);
6363
assert.isOk(activeElement.hasClass("k-button"));
64-
assert.equal(activeElement.text(), "1");
64+
assert.equal(activeElement.find(".k-button-text").text(), "1");
6565
assert.isOk(!element.hasClass("k-focus"));
6666
});
6767

0 commit comments

Comments
 (0)