From 0d36c99564ecdc8e1ad672aa1e48513089018b1b Mon Sep 17 00:00:00 2001 From: wallenium Date: Fri, 17 Mar 2017 09:30:39 +0100 Subject: [PATCH 1/7] Fix for jquery.UI 1.12 --- src/MonthPicker.js | 52 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/src/MonthPicker.js b/src/MonthPicker.js index d885db5..f6aa528 100644 --- a/src/MonthPicker.js +++ b/src/MonthPicker.js @@ -39,7 +39,7 @@ along with this program. If not, see var _eventsNs = '.MonthPicker'; var _textfieldClass = 'month-year-input'; var _clearHint = 'month-picker-clear-hint'; - var _iconClass = '.ui-button-icon-primary'; + var _iconClass = ($.ui.version >= '1.12') ? '.ui-button-icon' : '.ui-button-icon-primary'; var _disabledClass = 'month-picker-disabled'; var _todayClass = 'ui-state-highlight'; var _selectedClass = 'ui-state-active'; @@ -143,7 +143,15 @@ along with this program. If not, see function _makeDefaultButton(options) { // this refers to the associated input field. - return $('' + options.i18n.buttonText + '') + if($.ui.version >= '1.12'){ + return $('' + options.i18n.buttonText + '') + .jqueryUIButton({ + showLabel: false, + // Defaults to 'ui-icon-calculator'. + icon: options.ButtonIcon + }); + }else{ + return $('' + options.i18n.buttonText + '') .jqueryUIButton({ text: false, icons: { @@ -151,14 +159,21 @@ along with this program. If not, see primary: options.ButtonIcon } }); + } } function _applyArrowButton($el, dir) { - $el.jqueryUIButton('option', { - icons: { - primary: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e') - } + if($.ui.version >= '1.12'){ + $el.jqueryUIButton('option', { + icon: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e') }); + }else{ + $el.jqueryUIButton('option', { + icons: { + primary: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e') + } + }) + } } function _isInline(elem) { @@ -256,7 +271,7 @@ along with this program. If not, see function _setDisabled(_button, _value) { var _btnWidget = _button.data('ui-button'); - if (_btnWidget.option('disabled') !== _value) { + if (_value !== null && _btnWidget.option('disabled') !== _value) { _btnWidget.option('disabled', _value); } } @@ -416,13 +431,24 @@ along with this program. If not, see this._applyJumpYearsHint(); this._createValidationMessage(); - this._prevButton = $('.month-picker-previous>a', _menu) - .jqueryUIButton({ text: false }) - .removeClass(_defaultClass); + if($.ui.version >= '1.12'){ + this._prevButton = $('.month-picker-previous>a', _menu) + .jqueryUIButton({ showLabel: false }) + .removeClass(_defaultClass); + + this._nextButton = $('.month-picker-next>a', _menu) + .jqueryUIButton({ showLabel: false }) + .removeClass(_defaultClass); + }else{ + this._prevButton = $('.month-picker-previous>a', _menu) + .jqueryUIButton({ text: false }) + .removeClass(_defaultClass); - this._nextButton = $('.month-picker-next>a', _menu) - .jqueryUIButton({ text: false }) - .removeClass(_defaultClass); + this._nextButton = $('.month-picker-next>a', _menu) + .jqueryUIButton({ text: false }) + .removeClass(_defaultClass); + } + this._setRTL(_opts.IsRTL); //Assigns icons to the next/prev buttons. From 87cbe7ceae3447bf605529aef8185463981c328a Mon Sep 17 00:00:00 2001 From: wallenium Date: Fri, 17 Mar 2017 09:32:24 +0100 Subject: [PATCH 2/7] Update demo --- demo/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/demo/index.html b/demo/index.html index 0e3dd01..7b90626 100755 --- a/demo/index.html +++ b/demo/index.html @@ -6,16 +6,16 @@ - + - - + + - + From 723b2ad9c774d88b76da602dd11fa52111b87856 Mon Sep 17 00:00:00 2001 From: wallenium Date: Thu, 23 Mar 2017 08:53:51 +0100 Subject: [PATCH 3/7] Better implementation with less code --- src/MonthPicker.js | 87 +++++++++++++++++++++------------------------- 1 file changed, 39 insertions(+), 48 deletions(-) diff --git a/src/MonthPicker.js b/src/MonthPicker.js index f6aa528..b230e72 100644 --- a/src/MonthPicker.js +++ b/src/MonthPicker.js @@ -141,39 +141,41 @@ along with this program. If not, see } } + var _isNewApi = $.ui.version >= '1.12'; + function _prepareButtonOptions(opts) { + if (_isNewApi) { + var newOpts = opts; + }else{ + var newOpts = {}; + if (opts.showLabel !== void 0) newOpts.text = opts.showLabel; + if (opts.icon !== void 0) newOpts.icons.primary = opts.icon; + if (opts.label !== void 0) newOpts.label = opts.label; + if (opts.disabled !== void 0) newOpts.disabled = opts.disabled; + } + return newOpts; + } + + $.fn.monthPickerButton = function(opts) { + return this.jqueryUIButton(_prepareButtonOptions(opts)); + }; + + $.fn.monthPickerButtonOption = function(opts) { + return this.jqueryUIButton('option', _prepareButtonOptions(opts)) + }; + function _makeDefaultButton(options) { // this refers to the associated input field. - if($.ui.version >= '1.12'){ - return $('' + options.i18n.buttonText + '') - .jqueryUIButton({ + return $('' + options.i18n.buttonText + '') + .monthPickerButton({ showLabel: false, - // Defaults to 'ui-icon-calculator'. icon: options.ButtonIcon }); - }else{ - return $('' + options.i18n.buttonText + '') - .jqueryUIButton({ - text: false, - icons: { - // Defaults to 'ui-icon-calculator'. - primary: options.ButtonIcon - } - }); - } } function _applyArrowButton($el, dir) { - if($.ui.version >= '1.12'){ - $el.jqueryUIButton('option', { - icon: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e') + $el.monthPickerButtonOption({ + icon: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e') }); - }else{ - $el.jqueryUIButton('option', { - icons: { - primary: 'ui-icon-circle-triangle-' + (dir ? 'w' : 'e') - } - }) - } } function _isInline(elem) { @@ -425,30 +427,19 @@ along with this program. If not, see this._titleButton = $('.month-picker-title', _menu) .click($proxy(this._showYearsClickHandler, this)) - .find('a').jqueryUIButton() + .find('a').monthPickerButton() .removeClass(_defaultClass); this._applyJumpYearsHint(); this._createValidationMessage(); - if($.ui.version >= '1.12'){ - this._prevButton = $('.month-picker-previous>a', _menu) - .jqueryUIButton({ showLabel: false }) + this._prevButton = $('.month-picker-previous>a', _menu) + .monthPickerButton({ showLabel: false }) .removeClass(_defaultClass); - this._nextButton = $('.month-picker-next>a', _menu) - .jqueryUIButton({ showLabel: false }) + this._nextButton = $('.month-picker-next>a', _menu) + .monthPickerButton({ showLabel: false }) .removeClass(_defaultClass); - }else{ - this._prevButton = $('.month-picker-previous>a', _menu) - .jqueryUIButton({ text: false }) - .removeClass(_defaultClass); - - this._nextButton = $('.month-picker-next>a', _menu) - .jqueryUIButton({ text: false }) - .removeClass(_defaultClass); - } - this._setRTL(_opts.IsRTL); //Assigns icons to the next/prev buttons. @@ -464,7 +455,7 @@ along with this program. If not, see $tr.append(''); } - this._buttons = $('a', $table).jqueryUIButton(); + this._buttons = $('a', $table).monthPickerButton(); _menu.on('mousedown' + _eventsNs, function (event) { event.preventDefault(); @@ -722,8 +713,8 @@ along with this program. If not, see // a function. See Button option: Img tag tests for // more details. var _button = this._monthPickerButton; - try { - _button.jqueryUIButton('option', 'disabled', isDisabled); + try { + _button.monthPickerButtonOption({'disabled': isDisabled}); } catch (e) { _button.filter('button,input').prop('disabled', isDisabled); } @@ -873,7 +864,7 @@ along with this program. If not, see _setPickerYear: function (year) { this._pickerYear = year || new Date().getFullYear(); - this._titleButton.jqueryUIButton({ label: this._i18n('year') + ' ' + this._pickerYear }); + this._titleButton.monthPickerButton({ label: this._i18n('year') + ' ' + this._pickerYear }); }, // When calling this method with a falsy (undefined) date @@ -929,7 +920,7 @@ along with this program. If not, see $.each(_months, function(index, monthName) { $(me._buttons[index]) .on(click, {month: index+1}, _onMonthClick ) - .jqueryUIButton('option', 'label', monthName); + .monthPickerButtonOption({'label': monthName}); }); this._decorateButtons(); @@ -942,7 +933,7 @@ along with this program. If not, see this._showYears(); var _label = this._i18n('backTo') + ' ' + this._getPickerYear(); - this._titleButton.jqueryUIButton({ label: _label }).data( _clearHint )(); + this._titleButton.monthPickerButton({ label: _label }).data( _clearHint )(); _event('OnAfterChooseYears', this)(); } else { @@ -989,7 +980,7 @@ along with this program. If not, see for (var _counter = 0; _counter < 12; _counter++) { var _year = _currYear + _yearDifferential; - var _btn = $( this._buttons[_counter] ).jqueryUIButton({ + var _btn = $( this._buttons[_counter] ).monthPickerButton({ disabled: !_between(_year, _minYear, _maxYear), label: _year }) @@ -1065,7 +1056,7 @@ along with this program. If not, see var _month = (_curYear * 12) + i, _isBetween = _between(_month, _minDate, _maxDate); $(this._buttons[i]) - .jqueryUIButton({ disabled: !_isBetween }) + .monthPickerButton({ disabled: !_isBetween }) .toggleClass(_todayClass, _isBetween && _month == _todaysMonth); // Highlights today's month. } } From b66eb7b48816c906c5e06047b5184e46be1351d8 Mon Sep 17 00:00:00 2001 From: wallenium Date: Thu, 23 Mar 2017 11:20:52 +0100 Subject: [PATCH 4/7] Fixed some bugs with implementation for ui 1.12 --- src/MonthPicker.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/MonthPicker.js b/src/MonthPicker.js index b230e72..b46f814 100644 --- a/src/MonthPicker.js +++ b/src/MonthPicker.js @@ -35,11 +35,12 @@ along with this program. If not, see // conflict with Bootstrap.js button (#35) $.widget.bridge('jqueryUIButton', $.ui.button); + var _isNewApi = $.ui.version >= '1.12'; var _speeds = $.fx.speeds; var _eventsNs = '.MonthPicker'; var _textfieldClass = 'month-year-input'; var _clearHint = 'month-picker-clear-hint'; - var _iconClass = ($.ui.version >= '1.12') ? '.ui-button-icon' : '.ui-button-icon-primary'; + var _iconClass = (_isNewApi) ? '.ui-button-icon' : '.ui-button-icon-primary'; var _disabledClass = 'month-picker-disabled'; var _todayClass = 'ui-state-highlight'; var _selectedClass = 'ui-state-active'; @@ -141,14 +142,13 @@ along with this program. If not, see } } - var _isNewApi = $.ui.version >= '1.12'; function _prepareButtonOptions(opts) { - if (_isNewApi) { + if (_isNewApi || opts == undefined) { var newOpts = opts; }else{ var newOpts = {}; if (opts.showLabel !== void 0) newOpts.text = opts.showLabel; - if (opts.icon !== void 0) newOpts.icons.primary = opts.icon; + if (opts.icon !== void 0) newOpts.icons = {primary: opts.icon }; if (opts.label !== void 0) newOpts.label = opts.label; if (opts.disabled !== void 0) newOpts.disabled = opts.disabled; } @@ -864,7 +864,11 @@ along with this program. If not, see _setPickerYear: function (year) { this._pickerYear = year || new Date().getFullYear(); - this._titleButton.monthPickerButton({ label: this._i18n('year') + ' ' + this._pickerYear }); + if(_isNewApi){ + this._titleButton.monthPickerButton({ label: '' +this._i18n('year') + ' ' + this._pickerYear + '' }); + }else{ + this._titleButton.monthPickerButton({ label: this._i18n('year') + ' ' + this._pickerYear }); + } }, // When calling this method with a falsy (undefined) date From 23184a14205c90e34c6c8f6116cf3fb6b0661c94 Mon Sep 17 00:00:00 2001 From: wallenium Date: Thu, 23 Mar 2017 12:19:12 +0100 Subject: [PATCH 5/7] fix button disable problem --- src/MonthPicker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/MonthPicker.js b/src/MonthPicker.js index b46f814..dfe8783 100644 --- a/src/MonthPicker.js +++ b/src/MonthPicker.js @@ -969,8 +969,8 @@ along with this program. If not, see .off(click) .on(click, $proxy(this._addToYears, this, AMOUNT_TO_ADD)); - _setDisabled(this._prevButton, _minYear && (_firstYear - 1) < _minYear); - _setDisabled(this._nextButton, _maxYear && (_firstYear + 12) -1 > _maxYear); + _setDisabled(this._prevButton, _minYear > 0 && (_firstYear - 1) < _minYear); + _setDisabled(this._nextButton, _maxYear > 0 && (_firstYear + 12) -1 > _maxYear); this._buttons.off(_eventsNs); From c6c433faf3a4596a15365822ed0543574676c89c Mon Sep 17 00:00:00 2001 From: Simon W Date: Thu, 23 Mar 2017 22:53:36 +0100 Subject: [PATCH 6/7] Revert "Update demo" This reverts commit 87cbe7ceae3447bf605529aef8185463981c328a. --- demo/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/demo/index.html b/demo/index.html index 7b90626..0e3dd01 100755 --- a/demo/index.html +++ b/demo/index.html @@ -6,16 +6,16 @@ - + - - + + - + From 7b3eb33d713d32ba208e91498b027f906ce4635f Mon Sep 17 00:00:00 2001 From: Simon W Date: Thu, 23 Mar 2017 23:51:31 +0100 Subject: [PATCH 7/7] fix glitch with jqUI 1.12 button themes --- src/MonthPicker.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/MonthPicker.css b/src/MonthPicker.css index bab158f..0353586 100644 --- a/src/MonthPicker.css +++ b/src/MonthPicker.css @@ -112,8 +112,9 @@ the button. This rule removes the unnecessary padding so the text in the jump years button will be vericaly centred. */ -.month-picker-year-table .ui-button-text { +.month-picker-year-table .ui-button-text, .month-picker-year-table .ui-button { padding: 0; + background: transparent; } .month-picker-month-table td {