').addClass(className.table).addClass(tempMode).addClass(numberText[columns] + ' column').appendTo(container);
+ if(isInverted){
+ table.addClass(className.inverted);
+ }
+ var textColumns = columns;
+ //no header for time-only mode
+ if (!isTimeOnly) {
+ var thead = $('
').appendTo(table);
+
+ row = $('
|
').appendTo(thead);
+ cell = $('
| ').attr('colspan', '' + columns).appendTo(row);
+
+ var headerDate = isYear || isMonth ? new Date(year, 0, 1) :
+ isDay ? new Date(year, month, 1) : new Date(year, month, day, hour, minute);
+ var headerText = $('
').addClass(className.link).appendTo(cell);
+ headerText.text(formatter.header(headerDate, mode, settings));
+ var newMode = isMonth ? (settings.disableYear ? 'day' : 'year') :
+ isDay ? (settings.disableMonth ? 'year' : 'month') : 'day';
+ headerText.data(metadata.mode, newMode);
+
+ if (p === 0) {
+ var prev = $('
').addClass(className.prev).appendTo(cell);
+ prev.data(metadata.focusDate, prevDate);
+ prev.toggleClass(className.disabledCell, !module.helper.isDateInRange(prevLast, mode));
+ $('
').addClass(className.prevIcon).appendTo(prev);
+ }
+
+ if (p === pages - 1) {
+ var next = $('
').addClass(className.next).appendTo(cell);
+ next.data(metadata.focusDate, nextDate);
+ next.toggleClass(className.disabledCell, !module.helper.isDateInRange(nextFirst, mode));
+ $('
').addClass(className.nextIcon).appendTo(next);
+ }
+ if (isDay) {
+ row = $('
|
').appendTo(thead);
+ if(settings.showWeekNumbers) {
+ cell = $('
| ').appendTo(row);
+ cell.text(settings.text.weekNo);
+ cell.addClass(className.weekCell);
+ textColumns--;
+ }
+ for (i = 0; i < textColumns; i++) {
+ cell = $('
| ').appendTo(row);
+ cell.text(formatter.dayColumnHeader((i + settings.firstDayOfWeek) % 7, settings));
+ }
+ }
+ }
+
+ var tbody = $('
').appendTo(table);
+ i = isYear ? Math.ceil(year / 10) * 10 - 9 : isDay ? 1 - firstMonthDayColumn : 0;
+ for (r = 0; r < rows; r++) {
+ row = $('
|
').appendTo(tbody);
+ if(isDay && settings.showWeekNumbers){
+ cell = $('
| ').appendTo(row);
+ cell.text(module.get.weekOfYear(year,month,i+1-settings.firstDayOfWeek));
+ cell.addClass(className.weekCell);
+ }
+ for (c = 0; c < textColumns; c++, i++) {
+ var cellDate = isYear ? new Date(i, month, 1, hour, minute) :
+ isMonth ? new Date(year, i, 1, hour, minute) : isDay ? new Date(year, month, i, hour, minute) :
+ isHour ? new Date(year, month, day, i) : new Date(year, month, day, hour, i * settings.minTimeGap);
+ var cellText = isYear ? i :
+ isMonth ? settings.text.monthsShort[i] : isDay ? cellDate.getDate() :
+ formatter.time(cellDate, settings, true);
+ cell = $('
| ').addClass(className.cell).appendTo(row);
+ cell.text(cellText);
+ cell.data(metadata.date, cellDate);
+ var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12);
+ var disabled = (!settings.selectAdjacentDays && adjacent) || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode) || !module.helper.isEnabled(cellDate, mode);
+ var eventDate;
+ if (disabled) {
+ var disabledDate = module.helper.findDayAsObject(cellDate, mode, settings.disabledDates);
+ if (disabledDate !== null && disabledDate[metadata.message]) {
+ cell.attr("data-tooltip", disabledDate[metadata.message]);
+ cell.attr("data-position", disabledDate[metadata.position] || tooltipPosition);
+ if(disabledDate[metadata.inverted] || (isInverted && disabledDate[metadata.inverted] === undefined)) {
+ cell.attr("data-inverted", '');
+ }
+ if(disabledDate[metadata.variation]) {
+ cell.attr("data-variation", disabledDate[metadata.variation]);
+ }
+ }
+ } else {
+ eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates);
+ if (eventDate !== null) {
+ cell.addClass(eventDate[metadata.class] || settings.eventClass);
+ if (eventDate[metadata.message]) {
+ cell.attr("data-tooltip", eventDate[metadata.message]);
+ cell.attr("data-position", eventDate[metadata.position] || tooltipPosition);
+ if(eventDate[metadata.inverted] || (isInverted && eventDate[metadata.inverted] === undefined)) {
+ cell.attr("data-inverted", '');
+ }
+ if(eventDate[metadata.variation]) {
+ cell.attr("data-variation", eventDate[metadata.variation]);
+ }
+ }
+ }
+ }
+ var active = module.helper.dateEqual(cellDate, date, mode);
+ var isToday = module.helper.dateEqual(cellDate, today, mode);
+ cell.toggleClass(className.adjacentCell, adjacent && !eventDate);
+ cell.toggleClass(className.disabledCell, disabled);
+ cell.toggleClass(className.activeCell, active && !(adjacent && disabled));
+ if (!isHour && !isMinute) {
+ cell.toggleClass(className.todayCell, !adjacent && isToday);
+ }
+
+ // Allow for external modifications of each cell
+ var cellOptions = {
+ mode: mode,
+ adjacent: adjacent,
+ disabled: disabled,
+ active: active,
+ today: isToday
+ };
+ formatter.cell(cell, cellDate, cellOptions);
+
+ if (module.helper.dateEqual(cellDate, focusDate, mode)) {
+ //ensure that the focus date is exactly equal to the cell date
+ //so that, if selected, the correct value is set
+ module.set.focusDate(cellDate, false, false);
+ }
+ }
+ }
+
+ if (settings.today) {
+ var todayRow = $('
|
').appendTo(tbody);
+ var todayButton = $('
| ').attr('colspan', '' + columns).addClass(className.today).appendTo(todayRow);
+ todayButton.text(formatter.today(settings));
+ todayButton.data(metadata.date, today);
+ }
+
+ module.update.focus(false, table);
+
+ if(settings.inline){
+ module.refreshTooltips();
+ }
+ }
+ }
+ },
+
+ update: {
+ focus: function (updateRange, container) {
+ container = container || $container;
+ var mode = module.get.mode();
+ var date = module.get.date();
+ var focusDate = module.get.focusDate();
+ var startDate = module.get.startDate();
+ var endDate = module.get.endDate();
+ var rangeDate = (updateRange ? focusDate : null) || date || (!isTouch ? focusDate : null);
+
+ container.find('td').each(function () {
+ var cell = $(this);
+ var cellDate = cell.data(metadata.date);
+ if (!cellDate) {
+ return;
+ }
+ var disabled = cell.hasClass(className.disabledCell);
+ var active = cell.hasClass(className.activeCell);
+ var adjacent = cell.hasClass(className.adjacentCell);
+ var focused = module.helper.dateEqual(cellDate, focusDate, mode);
+ var inRange = !rangeDate ? false :
+ ((!!startDate && module.helper.isDateInRange(cellDate, mode, startDate, rangeDate)) ||
+ (!!endDate && module.helper.isDateInRange(cellDate, mode, rangeDate, endDate)));
+ cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && (!adjacent || (settings.selectAdjacentDays && adjacent)) && !disabled);
+
+ if (module.helper.isTodayButton(cell)) {
+ return;
+ }
+ cell.toggleClass(className.rangeCell, inRange && !active && !disabled);
+ });
+ }
+ },
+
+ refresh: function () {
+ module.create.calendar();
+ },
+
+ refreshTooltips: function() {
+ var winWidth = $(window).width();
+ $container.find('td[data-position]').each(function () {
+ var cell = $(this);
+ var tooltipWidth = window.getComputedStyle(cell[0], ':after').width.replace(/[^0-9\.]/g,'');
+ var tooltipPosition = cell.attr('data-position');
+ // use a fallback width of 250 (calendar width) for IE/Edge (which return "auto")
+ var calcPosition = (winWidth - cell.width() - (parseInt(tooltipWidth,10) || 250)) > cell.offset().left ? 'right' : 'left';
+ if(tooltipPosition.indexOf(calcPosition) === -1) {
+ cell.attr('data-position',tooltipPosition.replace(/(left|right)/,calcPosition));
+ }
+ });
+ },
+
+ bind: {
+ events: function () {
+ module.debug('Binding events');
+ $container.on('mousedown' + eventNamespace, module.event.mousedown);
+ $container.on('touchstart' + eventNamespace, module.event.mousedown);
+ $container.on('mouseup' + eventNamespace, module.event.mouseup);
+ $container.on('touchend' + eventNamespace, module.event.mouseup);
+ $container.on('mouseover' + eventNamespace, module.event.mouseover);
+ if ($input.length) {
+ $input.on('input' + eventNamespace, module.event.inputChange);
+ $input.on('focus' + eventNamespace, module.event.inputFocus);
+ $input.on('blur' + eventNamespace, module.event.inputBlur);
+ $input.on('keydown' + eventNamespace, module.event.keydown);
+ } else {
+ $container.on('keydown' + eventNamespace, module.event.keydown);
+ }
+ }
+ },
+
+ unbind: {
+ events: function () {
+ module.debug('Unbinding events');
+ $container.off(eventNamespace);
+ if ($input.length) {
+ $input.off(eventNamespace);
+ }
+ }
+ },
+
+ event: {
+ mouseover: function (event) {
+ var target = $(event.target);
+ var date = target.data(metadata.date);
+ var mousedown = event.buttons === 1;
+ if (date) {
+ module.set.focusDate(date, false, true, mousedown);
+ }
+ },
+ mousedown: function (event) {
+ if ($input.length) {
+ //prevent the mousedown on the calendar causing the input to lose focus
+ event.preventDefault();
+ }
+ isTouchDown = event.type.indexOf('touch') >= 0;
+ var target = $(event.target);
+ var date = target.data(metadata.date);
+ if (date) {
+ module.set.focusDate(date, false, true, true);
+ }
+ },
+ mouseup: function (event) {
+ //ensure input has focus so that it receives keydown events for calendar navigation
+ module.focus();
+ event.preventDefault();
+ event.stopPropagation();
+ isTouchDown = false;
+ var target = $(event.target);
+ if (target.hasClass("disabled")) {
+ return;
+ }
+ var parent = target.parent();
+ if (parent.data(metadata.date) || parent.data(metadata.focusDate) || parent.data(metadata.mode)) {
+ //clicked on a child element, switch to parent (used when clicking directly on prev/next
icon element)
+ target = parent;
+ }
+ var date = target.data(metadata.date);
+ var focusDate = target.data(metadata.focusDate);
+ var mode = target.data(metadata.mode);
+ if (date && settings.onSelect.call(element, date, module.get.mode()) !== false) {
+ var forceSet = target.hasClass(className.today);
+ module.selectDate(date, forceSet);
+ }
+ else if (focusDate) {
+ module.set.focusDate(focusDate);
+ }
+ else if (mode) {
+ module.set.mode(mode);
+ }
+ },
+ keydown: function (event) {
+ var keyCode = event.which;
+ if (keyCode === 27 || keyCode === 9) {
+ //esc || tab
+ module.popup('hide');
+ }
+
+ if (module.popup('is visible')) {
+ if (keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {
+ //arrow keys
+ var mode = module.get.mode();
+ var bigIncrement = mode === 'day' ? 7 : mode === 'hour' ? 4 : mode === 'minute' ? timeGap['column'] : 3;
+ var increment = keyCode === 37 ? -1 : keyCode === 38 ? -bigIncrement : keyCode == 39 ? 1 : bigIncrement;
+ increment *= mode === 'minute' ? settings.minTimeGap : 1;
+ var focusDate = module.get.focusDate() || module.get.date() || new Date();
+ var year = focusDate.getFullYear() + (mode === 'year' ? increment : 0);
+ var month = focusDate.getMonth() + (mode === 'month' ? increment : 0);
+ var day = focusDate.getDate() + (mode === 'day' ? increment : 0);
+ var hour = focusDate.getHours() + (mode === 'hour' ? increment : 0);
+ var minute = focusDate.getMinutes() + (mode === 'minute' ? increment : 0);
+ var newFocusDate = new Date(year, month, day, hour, minute);
+ if (settings.type === 'time') {
+ newFocusDate = module.helper.mergeDateTime(focusDate, newFocusDate);
+ }
+ if (module.helper.isDateInRange(newFocusDate, mode)) {
+ module.set.focusDate(newFocusDate);
+ }
+ } else if (keyCode === 13) {
+ //enter
+ var mode = module.get.mode();
+ var date = module.get.focusDate();
+ if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) {
+ module.selectDate(date);
+ }
+ //disable form submission:
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ if (keyCode === 38 || keyCode === 40) {
+ //arrow-up || arrow-down
+ event.preventDefault(); //don't scroll
+ module.popup('show');
+ }
+ },
+ inputChange: function () {
+ var val = $input.val();
+ var date = parser.date(val, settings);
+ module.set.date(date, false);
+ },
+ inputFocus: function () {
+ $container.addClass(className.active);
+ },
+ inputBlur: function () {
+ $container.removeClass(className.active);
+ if (settings.formatInput) {
+ var date = module.get.date();
+ var text = formatter.datetime(date, settings);
+ $input.val(text);
+ }
+ if(selectionComplete){
+ module.trigger.change();
+ selectionComplete = false;
+ }
+ },
+ class: {
+ mutation: function(mutations) {
+ mutations.forEach(function(mutation) {
+ if(mutation.attributeName === "class") {
+ module.check.disabled();
+ }
+ });
+ }
+ }
+ },
+
+ observeChanges: function() {
+ if('MutationObserver' in window) {
+ classObserver = new MutationObserver(module.event.class.mutation);
+ module.debug('Setting up mutation observer', classObserver);
+ module.observe.class();
+ }
+ },
+
+ disconnect: {
+ classObserver: function() {
+ if($input.length && classObserver) {
+ classObserver.disconnect();
+ }
+ }
+ },
+
+ observe: {
+ class: function() {
+ if($input.length && classObserver) {
+ classObserver.observe($module[0], {
+ attributes : true
+ });
+ }
+ }
+ },
+
+ is: {
+ disabled: function() {
+ return $module.hasClass(className.disabled);
+ }
+ },
+
+ check: {
+ disabled: function(){
+ $input.attr('tabindex',module.is.disabled() ? -1 : 0);
+ }
+ },
+
+ get: {
+ weekOfYear: function(weekYear,weekMonth,weekDay) {
+ // adapted from http://www.merlyn.demon.co.uk/weekcalc.htm
+ var ms1d = 864e5, // milliseconds in a day
+ ms7d = 7 * ms1d; // milliseconds in a week
+
+ return function() { // return a closure so constants get calculated only once
+ var DC3 = Date.UTC(weekYear, weekMonth, weekDay + 3) / ms1d, // an Absolute Day Number
+ AWN = Math.floor(DC3 / 7), // an Absolute Week Number
+ Wyr = new Date(AWN * ms7d).getUTCFullYear();
+
+ return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
+ }();
+ },
+ date: function () {
+ return module.helper.sanitiseDate($module.data(metadata.date)) || null;
+ },
+ inputDate: function() {
+ return $input.val();
+ },
+ focusDate: function () {
+ return $module.data(metadata.focusDate) || null;
+ },
+ startDate: function () {
+ var startModule = module.get.calendarModule(settings.startCalendar);
+ return (startModule ? startModule.get.date() : $module.data(metadata.startDate)) || null;
+ },
+ endDate: function () {
+ var endModule = module.get.calendarModule(settings.endCalendar);
+ return (endModule ? endModule.get.date() : $module.data(metadata.endDate)) || null;
+ },
+ minDate: function() {
+ return $module.data(metadata.minDate) || null;
+ },
+ maxDate: function() {
+ return $module.data(metadata.maxDate) || null;
+ },
+ monthOffset: function () {
+ return $module.data(metadata.monthOffset) || 0;
+ },
+ mode: function () {
+ //only returns valid modes for the current settings
+ var mode = $module.data(metadata.mode) || settings.startMode;
+ return module.get.validatedMode(mode);
+ },
+ validatedMode: function(mode){
+ var validModes = module.get.validModes();
+ if ($.inArray(mode, validModes) >= 0) {
+ return mode;
+ }
+ return settings.type === 'time' ? 'hour' :
+ settings.type === 'month' ? 'month' :
+ settings.type === 'year' ? 'year' : 'day';
+ },
+ type: function() {
+ return $module.data(metadata.type) || settings.type;
+ },
+ validModes: function () {
+ var validModes = [];
+ if (settings.type !== 'time') {
+ if (!settings.disableYear || settings.type === 'year') {
+ validModes.push('year');
+ }
+ if (!(settings.disableMonth || settings.type === 'year') || settings.type === 'month') {
+ validModes.push('month');
+ }
+ if (settings.type.indexOf('date') >= 0) {
+ validModes.push('day');
+ }
+ }
+ if (settings.type.indexOf('time') >= 0) {
+ validModes.push('hour');
+ if (!settings.disableMinute) {
+ validModes.push('minute');
+ }
+ }
+ return validModes;
+ },
+ isTouch: function () {
+ try {
+ document.createEvent('TouchEvent');
+ return true;
+ }
+ catch (e) {
+ return false;
+ }
+ },
+ calendarModule: function (selector) {
+ if (!selector) {
+ return null;
+ }
+ if (!(selector instanceof $)) {
+ selector = $(selector).first();
+ }
+ //assume range related calendars are using the same namespace
+ return selector.data(moduleNamespace);
+ }
+ },
+
+ set: {
+ date: function (date, updateInput, fireChange) {
+ updateInput = updateInput !== false;
+ fireChange = fireChange !== false;
+ date = module.helper.sanitiseDate(date);
+ date = module.helper.dateInRange(date);
+
+ var mode = module.get.mode();
+ var text = formatter.datetime(date, settings);
+
+ if (fireChange && settings.onBeforeChange.call(element, date, text, mode) === false) {
+ return false;
+ }
+
+ module.set.focusDate(date);
+
+ if (settings.isDisabled(date, mode)) {
+ return false;
+ }
+
+ var endDate = module.get.endDate();
+ if (!!endDate && !!date && date > endDate) {
+ //selected date is greater than end date in range, so clear end date
+ module.set.endDate(undefined);
+ }
+ module.set.dataKeyValue(metadata.date, date);
+
+ if (updateInput && $input.length) {
+ $input.val(text);
+ }
+
+ if (fireChange) {
+ settings.onChange.call(element, date, text, mode);
+ }
+ },
+ startDate: function (date, refreshCalendar) {
+ date = module.helper.sanitiseDate(date);
+ var startModule = module.get.calendarModule(settings.startCalendar);
+ if (startModule) {
+ startModule.set.date(date);
+ }
+ module.set.dataKeyValue(metadata.startDate, date, refreshCalendar);
+ },
+ endDate: function (date, refreshCalendar) {
+ date = module.helper.sanitiseDate(date);
+ var endModule = module.get.calendarModule(settings.endCalendar);
+ if (endModule) {
+ endModule.set.date(date);
+ }
+ module.set.dataKeyValue(metadata.endDate, date, refreshCalendar);
+ },
+ focusDate: function (date, refreshCalendar, updateFocus, updateRange) {
+ date = module.helper.sanitiseDate(date);
+ date = module.helper.dateInRange(date);
+ var isDay = module.get.mode() === 'day';
+ var oldFocusDate = module.get.focusDate();
+ if (isDay && date && oldFocusDate) {
+ var yearDelta = date.getFullYear() - oldFocusDate.getFullYear();
+ var monthDelta = yearDelta * 12 + date.getMonth() - oldFocusDate.getMonth();
+ if (monthDelta) {
+ var monthOffset = module.get.monthOffset() - monthDelta;
+ module.set.monthOffset(monthOffset, false);
+ }
+ }
+ var changed = module.set.dataKeyValue(metadata.focusDate, date, !!date && refreshCalendar);
+ updateFocus = (updateFocus !== false && changed && refreshCalendar === false) || focusDateUsedForRange != updateRange;
+ focusDateUsedForRange = updateRange;
+ if (updateFocus) {
+ module.update.focus(updateRange);
+ }
+ },
+ minDate: function (date) {
+ date = module.helper.sanitiseDate(date);
+ if (settings.maxDate !== null && settings.maxDate <= date) {
+ module.verbose('Unable to set minDate variable bigger that maxDate variable', date, settings.maxDate);
+ } else {
+ module.setting('minDate', date);
+ module.set.dataKeyValue(metadata.minDate, date);
+ }
+ },
+ maxDate: function (date) {
+ date = module.helper.sanitiseDate(date);
+ if (settings.minDate !== null && settings.minDate >= date) {
+ module.verbose('Unable to set maxDate variable lower that minDate variable', date, settings.minDate);
+ } else {
+ module.setting('maxDate', date);
+ module.set.dataKeyValue(metadata.maxDate, date);
+ }
+ },
+ monthOffset: function (monthOffset, refreshCalendar) {
+ var multiMonth = Math.max(settings.multiMonth, 1);
+ monthOffset = Math.max(1 - multiMonth, Math.min(0, monthOffset));
+ module.set.dataKeyValue(metadata.monthOffset, monthOffset, refreshCalendar);
+ },
+ mode: function (mode, refreshCalendar) {
+ module.set.dataKeyValue(metadata.mode, mode, refreshCalendar);
+ },
+ dataKeyValue: function (key, value, refreshCalendar) {
+ var oldValue = $module.data(key);
+ var equal = oldValue === value || (oldValue <= value && oldValue >= value); //equality test for dates and string objects
+ if (value) {
+ $module.data(key, value);
+ } else {
+ $module.removeData(key);
+ }
+ refreshCalendar = refreshCalendar !== false && !equal;
+ if (refreshCalendar) {
+ module.refresh();
+ }
+ return !equal;
+ }
+ },
+
+ selectDate: function (date, forceSet) {
+ module.verbose('New date selection', date);
+ var mode = module.get.mode();
+ var complete = forceSet || mode === 'minute' ||
+ (settings.disableMinute && mode === 'hour') ||
+ (settings.type === 'date' && mode === 'day') ||
+ (settings.type === 'month' && mode === 'month') ||
+ (settings.type === 'year' && mode === 'year');
+ if (complete) {
+ var canceled = module.set.date(date) === false;
+ if (!canceled) {
+ selectionComplete = true;
+ if(settings.closable) {
+ module.popup('hide');
+ //if this is a range calendar, focus the container or input. This will open the popup from its event listeners.
+ var endModule = module.get.calendarModule(settings.endCalendar);
+ if (endModule) {
+ if (endModule.setting('on') !== 'focus') {
+ endModule.popup('show');
+ }
+ endModule.focus();
+ }
+ }
+ }
+ } else {
+ var newMode = mode === 'year' ? (!settings.disableMonth ? 'month' : 'day') :
+ mode === 'month' ? 'day' : mode === 'day' ? 'hour' : 'minute';
+ module.set.mode(newMode);
+ if (mode === 'hour' || (mode === 'day' && module.get.date())) {
+ //the user has chosen enough to consider a valid date/time has been chosen
+ module.set.date(date, true, false);
+ } else {
+ module.set.focusDate(date);
+ }
+ }
+ },
+
+ changeDate: function (date) {
+ module.set.date(date);
+ },
+
+ clear: function () {
+ module.set.date(undefined);
+ },
+
+ popup: function () {
+ return $activator.popup.apply($activator, arguments);
+ },
+
+ focus: function () {
+ if ($input.length) {
+ $input.focus();
+ } else {
+ $container.focus();
+ }
+ },
+ blur: function () {
+ if ($input.length) {
+ $input.blur();
+ } else {
+ $container.blur();
+ }
+ },
+
+ helper: {
+ isDisabled: function(date, mode) {
+ return (mode === 'day' || mode === 'month' || mode === 'year') && ((mode === 'day' && settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){
+ if(typeof d === 'string') {
+ d = module.helper.sanitiseDate(d);
+ }
+ if (d instanceof Date) {
+ return module.helper.dateEqual(date, d, mode);
+ }
+ if (d !== null && typeof d === 'object') {
+ if (d[metadata.year]) {
+ if (typeof d[metadata.year] === 'number') {
+ return date.getFullYear() == d[metadata.year];
+ } else if (Array.isArray(d[metadata.year])) {
+ return d[metadata.year].indexOf(date.getFullYear()) > -1;
+ }
+ } else if (d[metadata.month]) {
+ if (typeof d[metadata.month] === 'number') {
+ return date.getMonth() == d[metadata.month];
+ } else if (Array.isArray(d[metadata.month])) {
+ return d[metadata.month].indexOf(date.getMonth()) > -1;
+ } else if (d[metadata.month] instanceof Date) {
+ var sdate = module.helper.sanitiseDate(d[metadata.month]);
+ return (date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear())
+ }
+ } else if (d[metadata.date] && mode === 'day') {
+ if (d[metadata.date] instanceof Date) {
+ return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode);
+ } else if (Array.isArray(d[metadata.date])) {
+ return d[metadata.date].some(function(idate) {
+ return module.helper.dateEqual(date, idate, mode);
+ });
+ }
+ }
+ }
+ }));
+ },
+ isEnabled: function(date, mode) {
+ if (mode === 'day') {
+ return settings.enabledDates.length === 0 || settings.enabledDates.some(function(d){
+ if(typeof d === 'string') {
+ d = module.helper.sanitiseDate(d);
+ }
+ if (d instanceof Date) {
+ return module.helper.dateEqual(date, d, mode);
+ }
+ if (d !== null && typeof d === 'object' && d[metadata.date]) {
+ return module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode);
+ }
+ });
+ } else {
+ return true;
+ }
+ },
+ findDayAsObject: function(date, mode, dates) {
+ if (mode === 'day' || mode === 'month' || mode === 'year') {
+ var d;
+ for (var i = 0; i < dates.length; i++) {
+ d = dates[i];
+ if(typeof d === 'string') {
+ d = module.helper.sanitiseDate(d);
+ }
+ if (d instanceof Date && module.helper.dateEqual(date, d, mode)) {
+ var dateObject = {};
+ dateObject[metadata.date] = d;
+ return dateObject;
+ }
+ else if (d !== null && typeof d === 'object') {
+ if (d[metadata.year]) {
+ if (typeof d[metadata.year] === 'number' && date.getFullYear() == d[metadata.year]) {
+ return d;
+ } else if (Array.isArray(d[metadata.year])) {
+ if (d[metadata.year].indexOf(date.getFullYear()) > -1) {
+ return d;
+ }
+ }
+ } else if (d[metadata.month]) {
+ if (typeof d[metadata.month] === 'number' && date.getMonth() == d[metadata.month]) {
+ return d;
+ } else if (Array.isArray(d[metadata.month])) {
+ if (d[metadata.month].indexOf(date.getMonth()) > -1) {
+ return d;
+ }
+ } else if (d[metadata.month] instanceof Date) {
+ var sdate = module.helper.sanitiseDate(d[metadata.month]);
+ if ((date.getMonth() == sdate.getMonth()) && (date.getFullYear() == sdate.getFullYear())) {
+ return d;
+ }
+ }
+ } else if (d[metadata.date] && mode === 'day') {
+ if (d[metadata.date] instanceof Date && module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]), mode)) {
+ return d;
+ } else if (Array.isArray(d[metadata.date])) {
+ if(d[metadata.date].some(function(idate) { return module.helper.dateEqual(date, idate, mode); })) {
+ return d;
+ }
+ }
+ }
+ }
+ }
+ }
+ return null;
+ },
+ sanitiseDate: function (date) {
+ if (!(date instanceof Date)) {
+ date = parser.date('' + date, settings);
+ }
+ if (!date || isNaN(date.getTime())) {
+ return null;
+ }
+ return date;
+ },
+ dateDiff: function (date1, date2, mode) {
+ mode = mode || 'day';
+ var isTimeOnly = settings.type === 'time';
+ var isYear = mode === 'year';
+ var isYearOrMonth = isYear || mode === 'month';
+ var isMinute = mode === 'minute';
+ var isHourOrMinute = isMinute || mode === 'hour';
+ //only care about a minute accuracy of settings.minTimeGap
+ date1 = new Date(
+ isTimeOnly ? 2000 : date1.getFullYear(),
+ isTimeOnly ? 0 : isYear ? 0 : date1.getMonth(),
+ isTimeOnly ? 1 : isYearOrMonth ? 1 : date1.getDate(),
+ !isHourOrMinute ? 0 : date1.getHours(),
+ !isMinute ? 0 : settings.minTimeGap * Math.floor(date1.getMinutes() / settings.minTimeGap));
+ date2 = new Date(
+ isTimeOnly ? 2000 : date2.getFullYear(),
+ isTimeOnly ? 0 : isYear ? 0 : date2.getMonth(),
+ isTimeOnly ? 1 : isYearOrMonth ? 1 : date2.getDate(),
+ !isHourOrMinute ? 0 : date2.getHours(),
+ !isMinute ? 0 : settings.minTimeGap * Math.floor(date2.getMinutes() / settings.minTimeGap));
+ return date2.getTime() - date1.getTime();
+ },
+ dateEqual: function (date1, date2, mode) {
+ return !!date1 && !!date2 && module.helper.dateDiff(date1, date2, mode) === 0;
+ },
+ isDateInRange: function (date, mode, minDate, maxDate) {
+ if (!minDate && !maxDate) {
+ var startDate = module.get.startDate();
+ minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate;
+ maxDate = settings.maxDate;
+ }
+ minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap));
+ return !(!date ||
+ (minDate && module.helper.dateDiff(date, minDate, mode) > 0) ||
+ (maxDate && module.helper.dateDiff(maxDate, date, mode) > 0));
+ },
+ dateInRange: function (date, minDate, maxDate) {
+ if (!minDate && !maxDate) {
+ var startDate = module.get.startDate();
+ minDate = startDate && settings.minDate ? new Date(Math.max(startDate, settings.minDate)) : startDate || settings.minDate;
+ maxDate = settings.maxDate;
+ }
+ minDate = minDate && new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), minDate.getHours(), settings.minTimeGap * Math.ceil(minDate.getMinutes() / settings.minTimeGap));
+ var isTimeOnly = settings.type === 'time';
+ return !date ? date :
+ (minDate && module.helper.dateDiff(date, minDate, 'minute') > 0) ?
+ (isTimeOnly ? module.helper.mergeDateTime(date, minDate) : minDate) :
+ (maxDate && module.helper.dateDiff(maxDate, date, 'minute') > 0) ?
+ (isTimeOnly ? module.helper.mergeDateTime(date, maxDate) : maxDate) :
+ date;
+ },
+ mergeDateTime: function (date, time) {
+ return (!date || !time) ? time :
+ new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes());
+ },
+ isTodayButton: function(element) {
+ return element.text() === settings.text.today;
+ }
+ },
+
+ setting: function (name, value) {
+ module.debug('Changing setting', name, value);
+ if ($.isPlainObject(name)) {
+ $.extend(true, settings, name);
+ }
+ else if (value !== undefined) {
+ if ($.isPlainObject(settings[name])) {
+ $.extend(true, settings[name], value);
+ }
+ else {
+ settings[name] = value;
+ }
+ }
+ else {
+ return settings[name];
+ }
+ },
+ internal: function (name, value) {
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
+ }
+ else {
+ return module[name];
+ }
+ },
+ debug: function () {
+ if (!settings.silent && settings.debug) {
+ if (settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.debug.apply(console, arguments);
+ }
+ }
+ },
+ verbose: function () {
+ if (!settings.silent && settings.verbose && settings.debug) {
+ if (settings.performance) {
+ module.performance.log(arguments);
+ }
+ else {
+ module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+ module.verbose.apply(console, arguments);
+ }
+ }
+ },
+ error: function () {
+ if (!settings.silent) {
+ module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+ module.error.apply(console, arguments);
+ }
+ },
+ performance: {
+ log: function (message) {
+ var
+ currentTime,
+ executionTime,
+ previousTime
+ ;
+ if (settings.performance) {
+ currentTime = new Date().getTime();
+ previousTime = time || currentTime;
+ executionTime = currentTime - previousTime;
+ time = currentTime;
+ performance.push({
+ 'Name': message[0],
+ 'Arguments': [].slice.call(message, 1) || '',
+ 'Element': element,
+ 'Execution Time': executionTime
+ });
+ }
+ clearTimeout(module.performance.timer);
+ module.performance.timer = setTimeout(module.performance.display, 500);
+ },
+ display: function () {
+ var
+ title = settings.name + ':',
+ totalTime = 0
+ ;
+ time = false;
+ clearTimeout(module.performance.timer);
+ $.each(performance, function (index, data) {
+ totalTime += data['Execution Time'];
+ });
+ title += ' ' + totalTime + 'ms';
+ if (moduleSelector) {
+ title += ' \'' + moduleSelector + '\'';
+ }
+ if ((console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+ console.groupCollapsed(title);
+ if (console.table) {
+ console.table(performance);
+ }
+ else {
+ $.each(performance, function (index, data) {
+ console.log(data['Name'] + ': ' + data['Execution Time'] + 'ms');
+ });
+ }
+ console.groupEnd();
+ }
+ performance = [];
+ }
+ },
+ invoke: function (query, passedArguments, context) {
+ var
+ object = instance,
+ maxDepth,
+ found,
+ response
+ ;
+ passedArguments = passedArguments || queryArguments;
+ context = element || context;
+ if (typeof query == 'string' && object !== undefined) {
+ query = query.split(/[\. ]/);
+ maxDepth = query.length - 1;
+ $.each(query, function (depth, value) {
+ var camelCaseValue = (depth != maxDepth)
+ ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+ : query
+ ;
+ if ($.isPlainObject(object[camelCaseValue]) && (depth != maxDepth)) {
+ object = object[camelCaseValue];
+ }
+ else if (object[camelCaseValue] !== undefined) {
+ found = object[camelCaseValue];
+ return false;
+ }
+ else if ($.isPlainObject(object[value]) && (depth != maxDepth)) {
+ object = object[value];
+ }
+ else if (object[value] !== undefined) {
+ found = object[value];
+ return false;
+ }
+ else {
+ module.error(error.method, query);
+ return false;
+ }
+ });
+ }
+ if ($.isFunction(found)) {
+ response = found.apply(context, passedArguments);
+ }
+ else if (found !== undefined) {
+ response = found;
+ }
+ if (Array.isArray(returnedValue)) {
+ returnedValue.push(response);
+ }
+ else if (returnedValue !== undefined) {
+ returnedValue = [returnedValue, response];
+ }
+ else if (response !== undefined) {
+ returnedValue = response;
+ }
+ return found;
+ }
+ };
+
+ if (methodInvoked) {
+ if (instance === undefined) {
+ module.initialize();
+ }
+ module.invoke(query);
+ }
+ else {
+ if (instance !== undefined) {
+ instance.invoke('destroy');
+ }
+ module.initialize();
+ }
+ })
+ ;
+ return (returnedValue !== undefined)
+ ? returnedValue
+ : this
+ ;
+};
+
+$.fn.calendar.settings = {
+
+ name : 'Calendar',
+ namespace : 'calendar',
+
+ silent: false,
+ debug: false,
+ verbose: false,
+ performance: false,
+
+ type : 'datetime', // picker type, can be 'datetime', 'date', 'time', 'month', or 'year'
+ firstDayOfWeek : 0, // day for first day column (0 = Sunday)
+ constantHeight : true, // add rows to shorter months to keep day calendar height consistent (6 rows)
+ today : false, // show a 'today/now' button at the bottom of the calendar
+ closable : true, // close the popup after selecting a date/time
+ monthFirst : true, // month before day when parsing/converting date from/to text
+ touchReadonly : true, // set input to readonly on touch devices
+ inline : false, // create the calendar inline instead of inside a popup
+ on : null, // when to show the popup (defaults to 'focus' for input, 'click' for others)
+ initialDate : null, // date to display initially when no date is selected (null = now)
+ startMode : false, // display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day')
+ minDate : null, // minimum date/time that can be selected, dates/times before are disabled
+ maxDate : null, // maximum date/time that can be selected, dates/times after are disabled
+ ampm : true, // show am/pm in time mode
+ disableYear : false, // disable year selection mode
+ disableMonth : false, // disable month selection mode
+ disableMinute : false, // disable minute selection mode
+ formatInput : true, // format the input text upon input blur and module creation
+ startCalendar : null, // jquery object or selector for another calendar that represents the start date of a date range
+ endCalendar : null, // jquery object or selector for another calendar that represents the end date of a date range
+ multiMonth : 1, // show multiple months when in 'day' mode
+ minTimeGap : 5,
+ showWeekNumbers : null, // show Number of Week at the very first column of a dayView
+ disabledDates : [], // specific day(s) which won't be selectable and contain additional information.
+ disabledDaysOfWeek : [], // day(s) which won't be selectable(s) (0 = Sunday)
+ enabledDates : [], // specific day(s) which will be selectable, all other days will be disabled
+ eventDates : [], // specific day(s) which will be shown in a different color and using tooltips
+ centuryBreak : 60, // starting short year until 99 where it will be assumed to belong to the last century
+ currentCentury : 2000, // century to be added to 2-digit years (00 to {centuryBreak}-1)
+ selectAdjacentDays : false, // The calendar can show dates from adjacent month. These adjacent month dates can also be made selectable.
+ // popup options ('popup', 'on', 'hoverable', and show/hide callbacks are overridden)
+ popupOptions: {
+ position: 'bottom left',
+ lastResort: 'bottom left',
+ prefer: 'opposite',
+ hideOnScroll: false
+ },
+
+ text: {
+ days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+ months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+ monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+ today: 'Today',
+ now: 'Now',
+ am: 'AM',
+ pm: 'PM',
+ weekNo: 'Week'
+ },
+
+ formatter: {
+ header: function (date, mode, settings) {
+ return mode === 'year' ? settings.formatter.yearHeader(date, settings) :
+ mode === 'month' ? settings.formatter.monthHeader(date, settings) :
+ mode === 'day' ? settings.formatter.dayHeader(date, settings) :
+ mode === 'hour' ? settings.formatter.hourHeader(date, settings) :
+ settings.formatter.minuteHeader(date, settings);
+ },
+ yearHeader: function (date, settings) {
+ var decadeYear = Math.ceil(date.getFullYear() / 10) * 10;
+ return (decadeYear - 9) + ' - ' + (decadeYear + 2);
+ },
+ monthHeader: function (date, settings) {
+ return date.getFullYear();
+ },
+ dayHeader: function (date, settings) {
+ var month = settings.text.months[date.getMonth()];
+ var year = date.getFullYear();
+ return month + ' ' + year;
+ },
+ hourHeader: function (date, settings) {
+ return settings.formatter.date(date, settings);
+ },
+ minuteHeader: function (date, settings) {
+ return settings.formatter.date(date, settings);
+ },
+ dayColumnHeader: function (day, settings) {
+ return settings.text.days[day];
+ },
+ datetime: function (date, settings) {
+ if (!date) {
+ return '';
+ }
+ var day = settings.type === 'time' ? '' : settings.formatter.date(date, settings);
+ var time = settings.type.indexOf('time') < 0 ? '' : settings.formatter.time(date, settings, false);
+ var separator = settings.type === 'datetime' ? ' ' : '';
+ return day + separator + time;
+ },
+ date: function (date, settings) {
+ if (!date) {
+ return '';
+ }
+ var day = date.getDate();
+ var month = settings.text.months[date.getMonth()];
+ var year = date.getFullYear();
+ return settings.type === 'year' ? year :
+ settings.type === 'month' ? month + ' ' + year :
+ (settings.monthFirst ? month + ' ' + day : day + ' ' + month) + ', ' + year;
+ },
+ time: function (date, settings, forCalendar) {
+ if (!date) {
+ return '';
+ }
+ var hour = date.getHours();
+ var minute = date.getMinutes();
+ var ampm = '';
+ if (settings.ampm) {
+ ampm = ' ' + (hour < 12 ? settings.text.am : settings.text.pm);
+ hour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+ }
+ return hour + ':' + (minute < 10 ? '0' : '') + minute + ampm;
+ },
+ today: function (settings) {
+ return settings.type === 'date' ? settings.text.today : settings.text.now;
+ },
+ cell: function (cell, date, cellOptions) {
+ }
+ },
+
+ parser: {
+ date: function (text, settings) {
+ if (text instanceof Date) {
+ return text;
+ }
+ if (!text) {
+ return null;
+ }
+ text = String(text).trim();
+ if (text.length === 0) {
+ return null;
+ }
+ if(text.match(/^[0-9]{4}[\/\-\.][0-9]{1,2}[\/\-\.][0-9]{1,2}$/)){
+ text = text.replace(/[\/\-\.]/g,'/') + ' 00:00:00';
+ }
+ // Reverse date and month in some cases
+ text = settings.monthFirst || !text.match(/^[0-9]{1,2}[\/\-\.]/) ? text : text.replace(/[\/\-\.]/g,'/').replace(/([0-9]+)\/([0-9]+)/,'$2/$1');
+ var textDate = new Date(text);
+ var numberOnly = text.match(/^[0-9]+$/) !== null;
+ if(!numberOnly && !isNaN(textDate.getDate())) {
+ return textDate;
+ }
+ text = text.toLowerCase();
+
+ var i, j, k;
+ var minute = -1, hour = -1, day = -1, month = -1, year = -1;
+ var isAm = undefined;
+
+ var isTimeOnly = settings.type === 'time';
+ var isDateOnly = settings.type.indexOf('time') < 0;
+
+ var words = text.split(settings.regExp.dateWords), word;
+ var numbers = text.split(settings.regExp.dateNumbers), number;
+
+ var parts;
+ var monthString;
+
+ if (!isDateOnly) {
+ //am/pm
+ isAm = $.inArray(settings.text.am.toLowerCase(), words) >= 0 ? true :
+ $.inArray(settings.text.pm.toLowerCase(), words) >= 0 ? false : undefined;
+
+ //time with ':'
+ for (i = 0; i < numbers.length; i++) {
+ number = numbers[i];
+ if (number.indexOf(':') >= 0) {
+ if (hour < 0 || minute < 0) {
+ parts = number.split(':');
+ for (k = 0; k < Math.min(2, parts.length); k++) {
+ j = parseInt(parts[k]);
+ if (isNaN(j)) {
+ j = 0;
+ }
+ if (k === 0) {
+ hour = j % 24;
+ } else {
+ minute = j % 60;
+ }
+ }
+ }
+ numbers.splice(i, 1);
+ }
+ }
+ }
+
+ if (!isTimeOnly) {
+ //textual month
+ for (i = 0; i < words.length; i++) {
+ word = words[i];
+ if (word.length <= 0) {
+ continue;
+ }
+ for (j = 0; j < settings.text.months.length; j++) {
+ monthString = settings.text.months[j];
+ monthString = monthString.substring(0, word.length).toLowerCase();
+ if (monthString === word) {
+ month = j + 1;
+ break;
+ }
+ }
+ if (month >= 0) {
+ break;
+ }
+ }
+
+ //year > settings.centuryBreak
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (j >= settings.centuryBreak && i === numbers.length-1) {
+ if (j <= 99) {
+ j += settings.currentCentury - 100;
+ }
+ year = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+
+ //numeric month
+ if (month < 0) {
+ for (i = 0; i < numbers.length; i++) {
+ k = i > 1 || settings.monthFirst ? i : i === 1 ? 0 : 1;
+ j = parseInt(numbers[k]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (1 <= j && j <= 12) {
+ month = j;
+ numbers.splice(k, 1);
+ break;
+ }
+ }
+ }
+
+ //day
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (1 <= j && j <= 31) {
+ day = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+
+ //year <= settings.centuryBreak
+ if (year < 0) {
+ for (i = numbers.length - 1; i >= 0; i--) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (j <= 99) {
+ j += settings.currentCentury;
+ }
+ year = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+ }
+
+ if (!isDateOnly) {
+ //hour
+ if (hour < 0) {
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (0 <= j && j <= 23) {
+ hour = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+ }
+
+ //minute
+ if (minute < 0) {
+ for (i = 0; i < numbers.length; i++) {
+ j = parseInt(numbers[i]);
+ if (isNaN(j)) {
+ continue;
+ }
+ if (0 <= j && j <= 59) {
+ minute = j;
+ numbers.splice(i, 1);
+ break;
+ }
+ }
+ }
+ }
+
+ if (minute < 0 && hour < 0 && day < 0 && month < 0 && year < 0) {
+ return null;
+ }
+
+ if (minute < 0) {
+ minute = 0;
+ }
+ if (hour < 0) {
+ hour = 0;
+ }
+ if (day < 0) {
+ day = 1;
+ }
+ if (month < 0) {
+ month = 1;
+ }
+ if (year < 0) {
+ year = new Date().getFullYear();
+ }
+
+ if (isAm !== undefined) {
+ if (isAm) {
+ if (hour === 12) {
+ hour = 0;
+ }
+ } else if (hour < 12) {
+ hour += 12;
+ }
+ }
+
+ var date = new Date(year, month - 1, day, hour, minute);
+ if (date.getMonth() !== month - 1 || date.getFullYear() !== year) {
+ //month or year don't match up, switch to last day of the month
+ date = new Date(year, month, 0, hour, minute);
+ }
+ return isNaN(date.getTime()) ? null : date;
+ }
+ },
+
+ // callback before date is changed, return false to cancel the change
+ onBeforeChange: function (date, text, mode) {
+ return true;
+ },
+
+ // callback when date changes
+ onChange: function (date, text, mode) {
+ },
+
+ // callback before show animation, return false to prevent show
+ onShow: function () {
+ },
+
+ // callback after show animation
+ onVisible: function () {
+ },
+
+ // callback before hide animation, return false to prevent hide
+ onHide: function () {
+ },
+
+ // callback after hide animation
+ onHidden: function () {
+ },
+
+ // callback before item is selected, return false to prevent selection
+ onSelect: function (date, mode) {
+ },
+
+ // is the given date disabled?
+ isDisabled: function (date, mode) {
+ return false;
+ },
+
+ selector: {
+ popup: '.ui.popup',
+ input: 'input',
+ activator: 'input',
+ append: '.inline.field,.inline.fields'
+ },
+
+ regExp: {
+ dateWords: /[^A-Za-z\u00C0-\u024F]+/g,
+ dateNumbers: /[^\d:]+/g
+ },
+
+ error: {
+ popup: 'UI Popup, a required component is not included in this page',
+ method: 'The method you called is not defined.'
+ },
+
+ className: {
+ calendar: 'calendar',
+ active: 'active',
+ popup: 'ui popup',
+ grid: 'ui equal width grid',
+ column: 'column',
+ table: 'ui celled center aligned unstackable table',
+ inverted: 'inverted',
+ prev: 'prev link',
+ next: 'next link',
+ prevIcon: 'chevron left icon',
+ nextIcon: 'chevron right icon',
+ link: 'link',
+ cell: 'link',
+ disabledCell: 'disabled',
+ weekCell: 'disabled',
+ adjacentCell: 'adjacent',
+ activeCell: 'active',
+ rangeCell: 'range',
+ focusCell: 'focus',
+ todayCell: 'today',
+ today: 'today link',
+ disabled: 'disabled'
+ },
+
+ metadata: {
+ date: 'date',
+ focusDate: 'focusDate',
+ startDate: 'startDate',
+ endDate: 'endDate',
+ minDate: 'minDate',
+ maxDate: 'maxDate',
+ mode: 'mode',
+ type: 'type',
+ monthOffset: 'monthOffset',
+ message: 'message',
+ class: 'class',
+ inverted: 'inverted',
+ variation: 'variation',
+ position: 'position',
+ month: 'month',
+ year: 'year'
+ },
+
+ eventClass: 'blue'
+};
+
+})(jQuery, window, document);
diff --git a/ui/semantic/src/definitions/modules/calendar.less b/ui/semantic/src/definitions/modules/calendar.less
new file mode 100644
index 0000000..5866880
--- /dev/null
+++ b/ui/semantic/src/definitions/modules/calendar.less
@@ -0,0 +1,195 @@
+/*!
+ * # Fomantic-UI - Calendar
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'module';
+@element : 'calendar';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Popup
+*******************************/
+
+.ui.calendar .ui.popup {
+ max-width: none;
+ padding: 0;
+ border: none;
+ user-select: none;
+}
+
+/*******************************
+ Calendar
+*******************************/
+
+.ui.calendar .calendar:focus {
+ outline: 0;
+}
+
+/*******************************
+ Grid
+*******************************/
+
+.ui.calendar .ui.popup .ui.grid {
+ display: block;
+ white-space: nowrap;
+}
+
+.ui.calendar .ui.popup .ui.grid > .column {
+ width: auto;
+}
+
+/*******************************
+ Table
+*******************************/
+
+.ui.calendar .ui.table.year,
+.ui.calendar .ui.table.month,
+.ui.calendar .ui.table.minute {
+ min-width: 15em;
+}
+
+.ui.calendar .ui.table.day {
+ min-width: 18em;
+}
+
+.ui.calendar .ui.table.day.andweek {
+ min-width: 22em;
+}
+
+.ui.calendar .ui.table.hour {
+ min-width: 20em;
+}
+
+.ui.calendar .ui.table tr th,
+.ui.calendar .ui.table tr td {
+ padding: 0.5em;
+ white-space: nowrap;
+}
+
+.ui.calendar .ui.table tr th {
+ border-left: none;
+}
+
+.ui.calendar .ui.table tr th i.icon {
+ margin: 0;
+}
+
+.ui.calendar .ui.table tr:first-child th {
+ position: relative;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.ui.calendar .ui.table.day tr:first-child th {
+ border: none;
+}
+
+.ui.calendar .ui.table.day tr:nth-child(2) th {
+ padding-top: 0.2em;
+ padding-bottom: 0.3em;
+}
+
+.ui.calendar .ui.table tr td {
+ padding-left: 0.1em;
+ padding-right: 0.1em;
+}
+
+.ui.calendar .ui.table tr .link {
+ cursor: pointer;
+}
+
+.ui.calendar .ui.table tr .prev.link {
+ width: 14.28571429%;
+ position: absolute;
+ left: 0;
+}
+
+.ui.calendar .ui.table tr .next.link {
+ width: 14.28571429%;
+ position: absolute;
+ right: 0;
+}
+
+.ui.ui.calendar .ui.table tr .disabled {
+ pointer-events: auto;
+ cursor: default;
+ color: @disabledTextColor;
+}
+
+.ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active) {
+ color: @adjacentTextColor;
+ background: @adjacentBackground;
+}
+
+/*--------------
+ States
+---------------*/
+
+.ui.calendar .ui.table tr td.today {
+ font-weight: @todayFontWeight;
+}
+
+.ui.calendar .ui.table tr td.range {
+ background: @rangeBackground;
+ color: @rangeTextColor;
+ box-shadow: @rangeBoxShadow;
+}
+
+.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
+.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
+ box-shadow: @focusBoxShadow;
+}
+
+& when (@variationCalendarInverted) {
+ .ui.inverted.calendar .ui.table.inverted tr td.range {
+ background: @rangeInvertedBackground;
+ color: @rangeInvertedTextColor;
+ box-shadow: @rangeInvertedBoxShadow;
+ }
+
+ .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
+ .ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
+ box-shadow: @focusInvertedBoxShadow;
+ }
+ .ui.inverted.calendar .ui.inverted.table tr .disabled {
+ color: @invertedDisabledTextColor;
+ }
+
+ .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active) {
+ color: @adjacentInvertedTextColor;
+ background: @adjacentInvertedBackground;
+ }
+}
+
+/*******************************
+ States
+*******************************/
+
+& when (@variationCalendarDisabled) {
+ /*--------------------
+ Disabled
+ ---------------------*/
+
+ .ui.disabled.calendar {
+ opacity: @disabledOpacity;
+ }
+
+ .ui.disabled.calendar > .input,
+ .ui.disabled.calendar .ui.table tr .link {
+ pointer-events: none;
+ }
+}
+
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/checkbox.js b/ui/semantic/src/definitions/modules/checkbox.js
similarity index 88%
rename from semantic/src/definitions/modules/checkbox.js
rename to ui/semantic/src/definitions/modules/checkbox.js
index f88c4d0..c5540ba 100644
--- a/semantic/src/definitions/modules/checkbox.js
+++ b/ui/semantic/src/definitions/modules/checkbox.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Checkbox
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Checkbox
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -170,7 +174,19 @@ $.fn.checkbox = function(parameters) {
}
},
+ preventDefaultOnInputTarget: function() {
+ if(typeof event !== 'undefined' && event !== null && $(event.target).is(selector.input)) {
+ module.verbose('Preventing default check action after manual check action');
+ event.preventDefault();
+ }
+ },
+
event: {
+ change: function(event) {
+ if( !module.should.ignoreCallbacks() ) {
+ settings.onChange.call(input);
+ }
+ },
click: function(event) {
var
$target = $(event.target)
@@ -193,15 +209,42 @@ $.fn.checkbox = function(parameters) {
keyCode = {
enter : 13,
space : 32,
- escape : 27
+ escape : 27,
+ left : 37,
+ up : 38,
+ right : 39,
+ down : 40
}
;
+
+ var r = module.get.radios(),
+ rIndex = r.index($module),
+ rLen = r.length,
+ checkIndex = false;
+
+ if(key == keyCode.left || key == keyCode.up) {
+ checkIndex = (rIndex === 0 ? rLen : rIndex) - 1;
+ } else if(key == keyCode.right || key == keyCode.down) {
+ checkIndex = rIndex === rLen-1 ? 0 : rIndex+1;
+ }
+
+ if (!module.should.ignoreCallbacks() && checkIndex !== false) {
+ if(settings.beforeUnchecked.apply(input)===false) {
+ module.verbose('Option not allowed to be unchecked, cancelling key navigation');
+ return false;
+ }
+ if (settings.beforeChecked.apply($(r[checkIndex]).children(selector.input)[0])===false) {
+ module.verbose('Next option should not allow check, cancelling key navigation');
+ return false;
+ }
+ }
+
if(key == keyCode.escape) {
module.verbose('Escape key pressed blurring field');
$input.blur();
shortcutPressed = true;
}
- else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {
+ else if(!event.ctrlKey && ( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey)) ) {
module.verbose('Enter/space key pressed, toggling checkbox');
module.toggle();
shortcutPressed = true;
@@ -225,8 +268,9 @@ $.fn.checkbox = function(parameters) {
module.set.checked();
if( !module.should.ignoreCallbacks() ) {
settings.onChecked.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
+ module.preventDefaultOnInputTarget();
},
uncheck: function() {
@@ -237,8 +281,9 @@ $.fn.checkbox = function(parameters) {
module.set.unchecked();
if( !module.should.ignoreCallbacks() ) {
settings.onUnchecked.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
+ module.preventDefaultOnInputTarget();
},
indeterminate: function() {
@@ -250,7 +295,7 @@ $.fn.checkbox = function(parameters) {
module.set.indeterminate();
if( !module.should.ignoreCallbacks() ) {
settings.onIndeterminate.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
},
@@ -263,7 +308,7 @@ $.fn.checkbox = function(parameters) {
module.set.determinate();
if( !module.should.ignoreCallbacks() ) {
settings.onDeterminate.call(input);
- settings.onChange.call(input);
+ module.trigger.change();
}
},
@@ -274,9 +319,12 @@ $.fn.checkbox = function(parameters) {
}
module.debug('Enabling checkbox');
module.set.enabled();
- settings.onEnable.call(input);
- // preserve legacy callbacks
- settings.onEnabled.call(input);
+ if( !module.should.ignoreCallbacks() ) {
+ settings.onEnable.call(input);
+ // preserve legacy callbacks
+ settings.onEnabled.call(input);
+ module.trigger.change();
+ }
},
disable: function() {
@@ -286,9 +334,12 @@ $.fn.checkbox = function(parameters) {
}
module.debug('Disabling checkbox');
module.set.disabled();
- settings.onDisable.call(input);
- // preserve legacy callbacks
- settings.onDisabled.call(input);
+ if( !module.should.ignoreCallbacks() ) {
+ settings.onDisable.call(input);
+ // preserve legacy callbacks
+ settings.onDisabled.call(input);
+ module.trigger.change();
+ }
},
get: {
@@ -335,52 +386,49 @@ $.fn.checkbox = function(parameters) {
should: {
allowCheck: function() {
- if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {
+ if(module.is.determinate() && module.is.checked() && !module.is.initialLoad() ) {
module.debug('Should not allow check, checkbox is already checked');
return false;
}
- if(settings.beforeChecked.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeChecked.apply(input) === false) {
module.debug('Should not allow check, beforeChecked cancelled');
return false;
}
return true;
},
allowUncheck: function() {
- if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {
+ if(module.is.determinate() && module.is.unchecked() && !module.is.initialLoad() ) {
module.debug('Should not allow uncheck, checkbox is already unchecked');
return false;
}
- if(settings.beforeUnchecked.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeUnchecked.apply(input) === false) {
module.debug('Should not allow uncheck, beforeUnchecked cancelled');
return false;
}
return true;
},
allowIndeterminate: function() {
- if(module.is.indeterminate() && !module.should.forceCallbacks() ) {
+ if(module.is.indeterminate() && !module.is.initialLoad() ) {
module.debug('Should not allow indeterminate, checkbox is already indeterminate');
return false;
}
- if(settings.beforeIndeterminate.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeIndeterminate.apply(input) === false) {
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
return false;
}
return true;
},
allowDeterminate: function() {
- if(module.is.determinate() && !module.should.forceCallbacks() ) {
+ if(module.is.determinate() && !module.is.initialLoad() ) {
module.debug('Should not allow determinate, checkbox is already determinate');
return false;
}
- if(settings.beforeDeterminate.apply(input) === false) {
+ if(!module.should.ignoreCallbacks() && settings.beforeDeterminate.apply(input) === false) {
module.debug('Should not allow determinate, beforeDeterminate cancelled');
return false;
}
return true;
},
- forceCallbacks: function() {
- return (module.is.initialLoad() && settings.fireOnInit);
- },
ignoreCallbacks: function() {
return (initialLoad && !settings.fireOnInit);
}
@@ -420,7 +468,6 @@ $.fn.checkbox = function(parameters) {
.prop('indeterminate', false)
.prop('checked', true)
;
- module.trigger.change();
},
unchecked: function() {
module.verbose('Removing checked class');
@@ -437,7 +484,6 @@ $.fn.checkbox = function(parameters) {
.prop('indeterminate', false)
.prop('checked', false)
;
- module.trigger.change();
},
indeterminate: function() {
module.verbose('Setting class to indeterminate');
@@ -452,7 +498,6 @@ $.fn.checkbox = function(parameters) {
$input
.prop('indeterminate', true)
;
- module.trigger.change();
},
determinate: function() {
module.verbose('Removing indeterminate class');
@@ -481,7 +526,6 @@ $.fn.checkbox = function(parameters) {
$input
.prop('disabled', 'disabled')
;
- module.trigger.change();
},
enabled: function() {
module.verbose('Removing disabled class');
@@ -494,7 +538,6 @@ $.fn.checkbox = function(parameters) {
$input
.prop('disabled', false)
;
- module.trigger.change();
},
tabbable: function() {
module.verbose('Adding tabindex to checkbox');
@@ -513,10 +556,10 @@ $.fn.checkbox = function(parameters) {
trigger: {
change: function() {
var
- events = document.createEvent('HTMLEvents'),
inputElement = $input[0]
;
if(inputElement) {
+ var events = document.createEvent('HTMLEvents');
module.verbose('Triggering native change event');
events.initEvent('change', true, false);
inputElement.dispatchEvent(events);
@@ -549,6 +592,7 @@ $.fn.checkbox = function(parameters) {
module.verbose('Attaching checkbox events');
$module
.on('click' + eventNamespace, module.event.click)
+ .on('change' + eventNamespace, module.event.change)
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
.on('keyup' + eventNamespace, selector.input, module.event.keyup)
;
@@ -738,7 +782,7 @@ $.fn.checkbox = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -785,6 +829,7 @@ $.fn.checkbox.settings = {
// delegated event context
uncheckable : 'auto',
fireOnInit : false,
+ enableEnterKey : true,
onChange : function(){},
diff --git a/ui/semantic/src/definitions/modules/checkbox.less b/ui/semantic/src/definitions/modules/checkbox.less
new file mode 100644
index 0000000..43a5376
--- /dev/null
+++ b/ui/semantic/src/definitions/modules/checkbox.less
@@ -0,0 +1,864 @@
+/*!
+ * # Fomantic-UI - Checkbox
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'module';
+@element : 'checkbox';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Checkbox
+*******************************/
+
+
+/*--------------
+ Content
+---------------*/
+
+.ui.checkbox {
+ position: relative;
+ display: inline-block;
+ backface-visibility: hidden;
+ outline: none;
+ vertical-align: baseline;
+ font-style: normal;
+
+ min-height: @checkboxSize;
+ font-size: @relativeMedium;
+ line-height: @checkboxLineHeight;
+ min-width: @checkboxSize;
+}
+
+/* HTML Checkbox */
+.ui.checkbox input[type="checkbox"],
+.ui.checkbox input[type="radio"] {
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0 !important;
+ outline: none;
+ z-index: 3;
+ width: @checkboxSize;
+ height: @checkboxSize;
+}
+
+
+& when (@variationCheckboxBox) {
+ /*--------------
+ Box
+ ---------------*/
+
+ /* .box selector is deprecated and will be removed in v3 */
+ .ui.checkbox .box {
+ &:extend(.ui.checkbox label all);
+ }
+ .ui.checkbox + .box {
+ &:extend(.ui.checkbox + label all);
+ }
+ .ui.checkbox input:focus ~ .box {
+ &:extend(.ui.checkbox input:focus ~ label all);
+ }
+ .ui.checkbox input:checked ~ .box {
+ &:extend(.ui.checkbox input:checked ~ label all);
+ }
+ & when (@variationCheckboxIndeterminate) {
+ .ui.checkbox input:not([type=radio]):indeterminate ~ .box {
+ &:extend(.ui.checkbox input:not([type=radio]):indeterminate ~ label all);
+ }
+ .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box {
+ &:extend(.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label all);
+ }
+ }
+ .ui.checkbox input:checked:focus ~ .box {
+ &:extend(.ui.checkbox input:checked:focus ~ label all);
+ }
+ & when (@variationCheckboxDisabled) {
+ .ui.disabled.checkbox .box {
+ &:extend(.ui.disabled.checkbox label all);
+ }
+
+ .ui.checkbox input[disabled] ~ .box {
+ &:extend(.ui.checkbox input[disabled] ~ label all);
+ }
+ }
+ & when (@variationCheckboxRadio) {
+ .ui.radio.checkbox .box {
+ &:extend(.ui.radio.checkbox label all);
+ }
+ .ui.radio.checkbox input:focus ~ .box {
+ &:extend(.ui.radio.checkbox input:focus ~ label all);
+ }
+ .ui.radio.checkbox input:indeterminate ~ .box {
+ &:extend(.ui.radio.checkbox input:indeterminate ~ label all);
+ }
+ .ui.radio.checkbox input:checked ~ .box {
+ &:extend(.ui.radio.checkbox input:checked ~ label all);
+ }
+ .ui.radio.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.radio.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxSlider) {
+ .ui.slider.checkbox .box {
+ &:extend(.ui.slider.checkbox label all);
+ }
+ .ui.slider.checkbox input:focus ~ .box {
+ &:extend(.ui.slider.checkbox input:focus ~ label all);
+ }
+ .ui.slider.checkbox input:checked ~ .box {
+ &:extend(.ui.slider.checkbox input:checked ~ label all);
+ }
+ .ui.slider.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.slider.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxToggle) {
+ .ui.toggle.checkbox .box {
+ &:extend(.ui.toggle.checkbox label all);
+ }
+ .ui.toggle.checkbox input ~ .box {
+ &:extend(.ui.toggle.checkbox input ~ label all);
+ }
+ .ui.toggle.checkbox input:focus ~ .box {
+ &:extend(.ui.toggle.checkbox input:focus ~ label all);
+ }
+ .ui.toggle.checkbox input:checked ~ .box {
+ &:extend(.ui.toggle.checkbox input:checked ~ label all);
+ }
+ .ui.toggle.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.toggle.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxFitted) {
+ .ui.fitted.checkbox .box {
+ &:extend(.ui.fitted.checkbox label all);
+ }
+ }
+ & when (@variationCheckboxInverted) {
+ .ui.inverted.checkbox .box {
+ &:extend(.ui.inverted.checkbox label all);
+ }
+ & when (@variationCheckboxSlider) {
+ .ui.inverted.slider.checkbox .box {
+ &:extend(.ui.inverted.slider.checkbox label all);
+ }
+ .ui.inverted.slider.checkbox input:checked ~ .box {
+ &:extend(.ui.inverted.slider.checkbox input:checked ~ label all);
+ }
+ .ui.inverted.slider.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.inverted.slider.checkbox input:focus:checked ~ label all);
+ }
+ }
+ & when (@variationCheckboxToggle) {
+ .ui.inverted.toggle.checkbox .box {
+ &:extend(.ui.inverted.toggle.checkbox label all);
+ }
+ .ui.inverted.toggle.checkbox input:checked ~ .box {
+ &:extend(.ui.inverted.toggle.checkbox input:checked ~ label all);
+ }
+ .ui.inverted.toggle.checkbox input:focus:checked ~ .box {
+ &:extend(.ui.inverted.toggle.checkbox input:focus:checked ~ label all);
+ }
+ }
+ }
+}
+
+.ui.checkbox label {
+ cursor: auto;
+ position: relative;
+ display: block;
+ padding-left: @labelDistance;
+ outline: none;
+ font-size: @labelFontSize;
+}
+
+.ui.checkbox label:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ width: @checkboxSize;
+ height: @checkboxSize;
+ content: '';
+
+ background: @checkboxBackground;
+ border-radius: @checkboxBorderRadius;
+
+ transition: @checkboxTransition;
+ border: @checkboxBorder;
+}
+
+/*--------------
+ Checkmark
+---------------*/
+
+.ui.checkbox label:after {
+ position: absolute;
+ font-size: @checkboxCheckFontSize;
+ top: @checkboxCheckTop;
+ left: @checkboxCheckLeft;
+ width: @checkboxCheckSize;
+ height: @checkboxCheckSize;
+ text-align: center;
+
+ opacity: 0;
+ color: @checkboxColor;
+ transition: @checkboxTransition;
+}
+& when (@variationCheckboxRightAligned) {
+ .ui.right.aligned.checkbox label {
+ padding-left: 0;
+ padding-right: @labelDistance;
+ &:after,
+ &:before {
+ right: 0;
+ left: auto;
+ }
+ }
+}
+/*--------------
+ Label
+---------------*/
+
+/* Inside */
+.ui.checkbox label,
+.ui.checkbox + label {
+ color: @labelColor;
+ transition: @labelTransition;
+}
+
+/* Outside */
+.ui.checkbox + label {
+ vertical-align: middle;
+}
+
+
+/*******************************
+ States
+*******************************/
+
+
+/*--------------
+ Hover
+---------------*/
+
+.ui.checkbox label:hover::before {
+ background: @checkboxHoverBackground;
+ border-color: @checkboxHoverBorderColor;
+}
+.ui.checkbox label:hover,
+.ui.checkbox + label:hover {
+ color: @labelHoverColor;
+}
+
+/*--------------
+ Down
+---------------*/
+
+.ui.checkbox label:active::before {
+ background: @checkboxPressedBackground;
+ border-color: @checkboxPressedBorderColor;
+}
+.ui.checkbox label:active::after {
+ color: @checkboxPressedColor;
+}
+.ui.checkbox input:active ~ label {
+ color: @labelPressedColor;
+}
+
+/*--------------
+ Focus
+---------------*/
+
+.ui.checkbox input:focus ~ label:before {
+ background: @checkboxFocusBackground;
+ border-color: @checkboxFocusBorderColor;
+}
+.ui.checkbox input:focus ~ label:after {
+ color: @checkboxFocusCheckColor;
+}
+.ui.checkbox input:focus ~ label {
+ color: @labelFocusColor;
+}
+
+/*--------------
+ Active
+---------------*/
+
+.ui.checkbox input:checked ~ label:before {
+ background: @checkboxActiveBackground;
+ border-color: @checkboxActiveBorderColor;
+}
+.ui.checkbox input:checked ~ label:after {
+ opacity: @checkboxActiveCheckOpacity;
+ color: @checkboxActiveCheckColor;
+}
+
+& when (@variationCheckboxIndeterminate){
+ /*--------------
+ Indeterminate
+ ---------------*/
+
+ .ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
+ background: @checkboxIndeterminateBackground;
+ border-color: @checkboxIndeterminateBorderColor;
+ }
+ .ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
+ opacity: @checkboxIndeterminateCheckOpacity;
+ color: @checkboxIndeterminateCheckColor;
+ }
+ .ui.indeterminate.toggle.checkbox {
+ & input:not([type=radio]):indeterminate ~ label:before {
+ background: @toggleCenterLaneBackground;
+ }
+ & input:not([type=radio]) ~ label:after {
+ left: @toggleCenterOffset;
+ }
+ }
+ & when (@variationCheckboxRightAligned) {
+ .ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after {
+ left: auto;
+ right: @toggleCenterOffset;
+ }
+ }
+}
+
+/*--------------
+ Active Focus
+---------------*/
+
+.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
+.ui.checkbox input:checked:focus ~ label:before {
+ background: @checkboxActiveFocusBackground;
+ border-color: @checkboxActiveFocusBorderColor;
+}
+.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
+.ui.checkbox input:checked:focus ~ label:after {
+ color: @checkboxActiveFocusCheckColor;
+}
+
+& when (@variationCheckboxReadonly) {
+ /*--------------
+ Read-Only
+ ---------------*/
+
+ .ui.read-only.checkbox,
+ .ui.read-only.checkbox label {
+ cursor: default;
+ pointer-events: none;
+ }
+}
+
+& when (@variationCheckboxDisabled) {
+ /*--------------
+ Disabled
+ ---------------*/
+
+ .ui.disabled.checkbox label,
+ .ui.checkbox input[disabled] ~ label {
+ cursor: default;
+ opacity: @disabledCheckboxOpacity;
+ color: @disabledCheckboxLabelColor;
+ pointer-events: none;
+ }
+}
+
+/*--------------
+ Hidden
+---------------*/
+
+/* Initialized checkbox moves input below element
+ to prevent manually triggering */
+.ui.checkbox input.hidden {
+ z-index: -1;
+}
+
+/* Selectable Label */
+.ui.checkbox input.hidden + label {
+ cursor: pointer;
+ user-select: none;
+}
+
+
+/*******************************
+ Types
+*******************************/
+
+& when (@variationCheckboxRadio) {
+ /*--------------
+ Radio
+ ---------------*/
+
+ .ui.radio.checkbox {
+ min-height: @radioSize;
+ }
+
+ .ui.radio.checkbox label {
+ padding-left: @radioLabelDistance;
+ }
+
+ /* Box */
+ .ui.radio.checkbox label:before {
+ content: '';
+ transform: none;
+
+ width: @radioSize;
+ height: @radioSize;
+ border-radius: @circularRadius;
+ top: @radioTop;
+ left: @radioLeft;
+ }
+
+ /* Bullet */
+ .ui.radio.checkbox label:after {
+ border: none;
+ content: '' !important;
+ line-height: @radioSize;
+ top: @bulletTop;
+ left: @bulletLeft;
+ width: @radioSize;
+ height: @radioSize;
+ border-radius: @bulletRadius;
+ transform: scale(@bulletScale);
+ background-color: @bulletColor;
+ }
+
+ /* Focus */
+ .ui.radio.checkbox input:focus ~ label:before {
+ background-color: @radioFocusBackground;
+ }
+ .ui.radio.checkbox input:focus ~ label:after {
+ background-color: @radioFocusBulletColor;
+ }
+
+ /* Indeterminate */
+ .ui.radio.checkbox input:indeterminate ~ label:after {
+ opacity: 0;
+ }
+
+ /* Active */
+ .ui.radio.checkbox input:checked ~ label:before {
+ background-color: @radioActiveBackground;
+ }
+ .ui.radio.checkbox input:checked ~ label:after {
+ background-color: @radioActiveBulletColor;
+ }
+
+ /* Active Focus */
+ .ui.radio.checkbox input:focus:checked ~ label:before {
+ background-color: @radioActiveFocusBackground;
+ }
+ .ui.radio.checkbox input:focus:checked ~ label:after {
+ background-color: @radioActiveFocusBulletColor;
+ }
+}
+
+& when (@variationCheckboxSlider) {
+ /*--------------
+ Slider
+ ---------------*/
+
+ .ui.slider.checkbox {
+ min-height: @sliderHeight;
+ }
+
+ /* Input */
+ .ui.slider.checkbox input {
+ width: @sliderWidth;
+ height: @sliderHeight;
+ }
+
+ /* Label */
+ .ui.slider.checkbox label {
+ padding-left: @sliderLabelDistance;
+ line-height: @sliderLabelLineHeight;
+ color: @sliderOffLabelColor;
+ }
+
+ /* Line */
+ .ui.slider.checkbox label:before {
+ display: block;
+ position: absolute;
+ content: '';
+ transform: none;
+ border: none !important;
+ left: 0;
+ z-index: 1;
+
+ top: @sliderLineVerticalOffset;
+
+ background-color: @sliderLineColor;
+ width: @sliderLineWidth;
+ height: @sliderLineHeight;
+
+ border-radius: @sliderLineRadius;
+ transition: @sliderLineTransition;
+
+ }
+
+ /* Handle */
+ .ui.slider.checkbox label:after {
+ background: @handleBackground;
+ position: absolute;
+ content: '' !important;
+ opacity: 1;
+ z-index: 2;
+
+ border: none;
+ box-shadow: @handleBoxShadow;
+ width: @sliderHandleSize;
+ height: @sliderHandleSize;
+ top: @sliderHandleOffset;
+ left: 0;
+ transform: none;
+
+ border-radius: @circularRadius;
+ transition: @sliderHandleTransition;
+ }
+
+ /* Focus */
+ .ui.slider.checkbox input:focus ~ label:before {
+ background-color: @toggleFocusColor;
+ border: none;
+ }
+
+ /* Hover */
+ .ui.slider.checkbox label:hover {
+ color: @sliderHoverLabelColor;
+ }
+ .ui.slider.checkbox label:hover::before {
+ background: @sliderHoverLaneBackground;
+ }
+
+ /* Active */
+ .ui.slider.checkbox input:checked ~ label {
+ color: @sliderOnLabelColor !important;
+ }
+ .ui.slider.checkbox input:checked ~ label:before {
+ background-color: @sliderOnLineColor !important;
+ }
+ .ui.slider.checkbox input:checked ~ label:after {
+ left: @sliderTravelDistance;
+ }
+
+ /* Active Focus */
+ .ui.slider.checkbox input:focus:checked ~ label {
+ color: @sliderOnFocusLabelColor !important;
+ }
+ .ui.slider.checkbox input:focus:checked ~ label:before {
+ background-color: @sliderOnFocusLineColor !important;
+ }
+
+ & when (@variationCheckboxRightAligned) {
+ .ui.right.aligned.slider.checkbox label {
+ padding-left: 0;
+ padding-right: @sliderLabelDistance;
+ }
+ .ui.right.aligned.slider.checkbox label:after {
+ left: auto;
+ right: @sliderTravelDistance;
+ transition: @sliderHandleTransitionRightAligned;
+ }
+ .ui.right.aligned.slider.checkbox input:checked ~ label:after {
+ left: auto;
+ right: 0;
+ }
+ }
+}
+
+& when (@variationCheckboxToggle) {
+ /*--------------
+ Toggle
+ ---------------*/
+
+ .ui.toggle.checkbox {
+ min-height: @toggleHeight;
+ }
+
+ /* Input */
+ .ui.toggle.checkbox input {
+ width: @toggleWidth;
+ height: @toggleHeight;
+ }
+
+ /* Label */
+ .ui.toggle.checkbox label {
+ min-height: @toggleHandleSize;
+ padding-left: @toggleLabelDistance;
+ color: @toggleOffLabelColor;
+ }
+ .ui.toggle.checkbox label {
+ padding-top: @toggleLabelOffset;
+ }
+
+ /* Switch */
+ .ui.toggle.checkbox label:before {
+ display: block;
+ position: absolute;
+ content: '';
+ z-index: 1;
+ transform: none;
+ border: none;
+
+ top: @toggleLaneVerticalOffset;
+
+ background: @toggleLaneBackground;
+ box-shadow: @toggleLaneBoxShadow;
+ width: @toggleLaneWidth;
+ height: @toggleLaneHeight;
+ border-radius: @toggleHandleRadius;
+ }
+
+ /* Handle */
+ .ui.toggle.checkbox label:after {
+ background: @handleBackground;
+ position: absolute;
+ content: '' !important;
+ opacity: 1;
+ z-index: 2;
+
+ border: none;
+ box-shadow: @handleBoxShadow;
+ width: @toggleHandleSize;
+ height: @toggleHandleSize;
+ top: @toggleHandleOffset;
+ left: 0;
+
+ border-radius: @circularRadius;
+ transition: @toggleHandleTransition;
+ }
+
+ .ui.toggle.checkbox input ~ label:after {
+ left: @toggleOffOffset;
+ box-shadow: @toggleOffHandleBoxShadow;
+ }
+
+ /* Focus */
+ .ui.toggle.checkbox input:focus ~ label:before {
+ background-color: @toggleFocusColor;
+ border: none;
+ }
+
+ /* Hover */
+ .ui.toggle.checkbox label:hover::before {
+ background-color: @toggleHoverColor;
+ border: none;
+ }
+
+ /* Active */
+ .ui.toggle.checkbox input:checked ~ label {
+ color: @toggleOnLabelColor !important;
+ }
+ .ui.toggle.checkbox input:checked ~ label:before {
+ background-color: @toggleOnLaneColor !important;
+ }
+ .ui.toggle.checkbox input:checked ~ label:after {
+ left: @toggleOnOffset;
+ box-shadow: @toggleOnHandleBoxShadow;
+ }
+
+
+ /* Active Focus */
+ .ui.toggle.checkbox input:focus:checked ~ label {
+ color: @toggleOnFocusLabelColor !important;
+ }
+ .ui.toggle.checkbox input:focus:checked ~ label:before {
+ background-color: @toggleOnFocusLaneColor !important;
+ }
+
+ & when (@variationCheckboxRightAligned) {
+ .ui.right.aligned.toggle.checkbox label {
+ padding-left: 0;
+ padding-right: @toggleLabelDistance;
+ }
+ .ui.right.aligned.toggle.checkbox input ~ label:after {
+ left: auto;
+ right: @toggleOnOffset;
+ transition: @toggleHandleTransitionRightAligned;
+ }
+ .ui.right.aligned.toggle.checkbox input:checked ~ label:after {
+ left: auto;
+ right: @toggleOffOffset;
+ }
+ }
+}
+
+/*******************************
+ Variations
+*******************************/
+& when (@variationCheckboxFitted) {
+ /*--------------
+ Fitted
+ ---------------*/
+
+ .ui.fitted.checkbox label {
+ padding-left: 0 !important;
+ }
+
+ .ui.fitted.toggle.checkbox {
+ width: @toggleWidth;
+ }
+
+ .ui.fitted.slider.checkbox {
+ width: @sliderWidth;
+ }
+}
+
+& when (@variationCheckboxInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
+ .ui.inverted.checkbox label,
+ .ui.inverted.checkbox + label {
+ color: @invertedTextColor !important;
+ }
+
+ /* Hover */
+ .ui.inverted.checkbox label:hover {
+ color: @invertedHoveredTextColor !important;
+ }
+ .ui.inverted.checkbox label:hover::before {
+ border-color: @strongSelectedBorderColor;
+ }
+ & when (@variationCheckboxSlider) {
+ /*Slider Label */
+ .ui.inverted.slider.checkbox label {
+ color: @invertedUnselectedTextColor;
+ }
+
+ /* Slider Line */
+ .ui.inverted.slider.checkbox label:before {
+ background-color: @invertedUnselectedTextColor !important;
+ }
+
+ /* Slider Hover */
+ .ui.inverted.slider.checkbox label:hover::before {
+ background: @invertedLightTextColor !important;
+ }
+
+ /* Slider Active */
+ .ui.inverted.slider.checkbox input:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.slider.checkbox input:checked ~ label:before {
+ background-color: @selectedWhiteBorderColor !important;
+ }
+
+ /* Slider Active Focus */
+ .ui.inverted.slider.checkbox input:focus:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.slider.checkbox input:focus:checked ~ label:before {
+ background-color: @selectedWhiteBorderColor !important;
+ }
+ }
+ & when (@variationCheckboxToggle) {
+ /* Toggle Switch */
+ .ui.inverted.toggle.checkbox label:before {
+ background-color: @invertedTextColor !important;
+ }
+
+ /* Toggle Hover */
+ .ui.inverted.toggle.checkbox label:hover::before {
+ background: @invertedHoveredTextColor !important;
+ }
+
+ /* Toggle Active */
+ .ui.inverted.toggle.checkbox input:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.toggle.checkbox input:checked ~ label:before {
+ background-color: @toggleOnLaneColor !important;
+ }
+
+ /* Toggle Active Focus */
+ .ui.inverted.toggle.checkbox input:focus:checked ~ label {
+ color: @invertedSelectedTextColor !important;
+ }
+ .ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
+ background-color: @toggleOnFocusLaneColor !important;
+ }
+ }
+}
+
+/*--------------------
+ Size
+---------------------*/
+
+each(@variationCheckboxSizes, {
+ @raw: @{value}Raw;
+ @size: @{value}CheckboxSize;
+ @circleScale: @{value}CheckboxCircleScale;
+ @circleLeft: @{value}CheckboxCircleLeft;
+
+ .ui.@{value}.checkbox {
+ font-size: @@size;
+ }
+
+ & when (@@raw > 1) {
+ .ui.@{value}.form .checkbox,
+ .ui.@{value}.checkbox {
+ &:not(.slider):not(.toggle):not(.radio) {
+ &
+ label:after,
+ label:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ }
+ &.radio when (@variationCheckboxRadio) {
+ &
+ label:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ &
+ label:after {
+ transform:scale(@@circleScale);
+ transform-origin:left;
+ left: @@circleLeft;
+ }
+ }
+ }
+ }
+ & when (@@raw > 1) and (@variationCheckboxBox) {
+ .ui.@{value}.form .checkbox,
+ .ui.@{value}.checkbox {
+ &:not(.slider):not(.toggle):not(.radio) {
+ &
+ .box:after,
+ .box:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ }
+ &.radio when (@variationCheckboxRadio) {
+ &
+ .box:before {
+ transform: scale(@@raw);
+ transform-origin:left;
+ }
+ &
+ .box:after {
+ transform:scale(@@circleScale);
+ transform-origin:left;
+ left: @@circleLeft;
+ }
+ }
+ }
+ }
+})
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/dimmer.js b/ui/semantic/src/definitions/modules/dimmer.js
old mode 100755
new mode 100644
similarity index 92%
rename from semantic/src/definitions/modules/dimmer.js
rename to ui/semantic/src/definitions/modules/dimmer.js
index 49bf63e..f3678b5
--- a/semantic/src/definitions/modules/dimmer.js
+++ b/ui/semantic/src/definitions/modules/dimmer.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Dimmer
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Dimmer
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -151,12 +155,12 @@ $.fn.dimmer = function(parameters) {
event: {
click: function(event) {
- module.verbose('Determining if event occured on dimmer', event);
+ module.verbose('Determining if event occurred on dimmer', event);
if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
module.hide();
event.stopImmediatePropagation();
}
- },
+ }
},
addContent: function(element) {
@@ -171,7 +175,7 @@ $.fn.dimmer = function(parameters) {
create: function() {
var
- $element = $( settings.template.dimmer() )
+ $element = $( settings.template.dimmer(settings) )
;
if(settings.dimmerName) {
module.debug('Creating named dimmer', settings.dimmerName);
@@ -222,7 +226,9 @@ $.fn.dimmer = function(parameters) {
module.show();
}
else {
- module.hide();
+ if ( module.is.closable() ) {
+ module.hide();
+ }
}
},
@@ -249,7 +255,7 @@ $.fn.dimmer = function(parameters) {
displayType : settings.useFlex
? 'flex'
: 'block',
- animation : settings.transition + ' in',
+ animation : (settings.transition.showMethod || settings.transition) + ' in',
queue : false,
duration : module.get.duration(),
useFailSafe : true,
@@ -296,14 +302,12 @@ $.fn.dimmer = function(parameters) {
displayType : settings.useFlex
? 'flex'
: 'block',
- animation : settings.transition + ' out',
+ animation : (settings.transition.hideMethod || settings.transition) + ' out',
queue : false,
duration : module.get.duration(),
useFailSafe : true,
- onStart : function() {
- module.remove.dimmed();
- },
onComplete : function() {
+ module.remove.dimmed();
module.remove.variation();
module.remove.active();
callback();
@@ -313,10 +317,10 @@ $.fn.dimmer = function(parameters) {
}
else {
module.verbose('Hiding dimmer with javascript');
- module.remove.dimmed();
$dimmer
.stop()
.fadeOut(module.get.duration(), function() {
+ module.remove.dimmed();
module.remove.active();
$dimmer.removeAttr('style');
callback();
@@ -331,15 +335,12 @@ $.fn.dimmer = function(parameters) {
return $dimmer;
},
duration: function() {
- if(typeof settings.duration == 'object') {
- if( module.is.active() ) {
- return settings.duration.hide;
- }
- else {
- return settings.duration.show;
- }
+ if( module.is.active() ) {
+ return settings.transition.hideDuration || settings.duration.hide || settings.duration;
+ }
+ else {
+ return settings.transition.showDuration || settings.duration.show || settings.duration;
}
- return settings.duration;
}
},
@@ -404,11 +405,11 @@ $.fn.dimmer = function(parameters) {
var
color = $dimmer.css('background-color'),
colorArray = color.split(','),
- isRGB = (colorArray && colorArray.length == 3),
- isRGBA = (colorArray && colorArray.length == 4)
+ isRGB = (colorArray && colorArray.length >= 3)
;
opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity;
- if(isRGB || isRGBA) {
+ if(isRGB) {
+ colorArray[2] = colorArray[2].replace(')','');
colorArray[3] = opacity + ')';
color = colorArray.join(',');
}
@@ -620,7 +621,7 @@ $.fn.dimmer = function(parameters) {
else if(found !== undefined) {
response = found;
}
- if($.isArray(returnedValue)) {
+ if(Array.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
@@ -695,6 +696,10 @@ $.fn.dimmer.settings = {
show : 500,
hide : 500
},
+// whether the dynamically created dimmer should have a loader
+ displayLoader: false,
+ loaderText : false,
+ loaderVariation : '',
onChange : function(){},
onShow : function(){},
@@ -714,7 +719,8 @@ $.fn.dimmer.settings = {
hide : 'hide',
legacy : 'legacy',
pageDimmer : 'page',
- show : 'show'
+ show : 'show',
+ loader : 'ui loader'
},
selector: {
@@ -723,8 +729,19 @@ $.fn.dimmer.settings = {
},
template: {
- dimmer: function() {
- return $('').attr('class', 'ui dimmer');
+ dimmer: function(settings) {
+ var d = $('').addClass('ui dimmer'),l;
+ if(settings.displayLoader) {
+ l = $('')
+ .addClass(settings.className.loader)
+ .addClass(settings.loaderVariation);
+ if(!!settings.loaderText){
+ l.text(settings.loaderText);
+ l.addClass('text');
+ }
+ d.append(l);
+ }
+ return d;
}
}
diff --git a/ui/semantic/src/definitions/modules/dimmer.less b/ui/semantic/src/definitions/modules/dimmer.less
new file mode 100644
index 0000000..04c3f54
--- /dev/null
+++ b/ui/semantic/src/definitions/modules/dimmer.less
@@ -0,0 +1,390 @@
+/*!
+ * # Fomantic-UI - Dimmer
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+ Theme
+*******************************/
+
+@type : 'module';
+@element : 'dimmer';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+ Dimmer
+*******************************/
+
+.dimmable:not(body) {
+ position: @dimmablePosition;
+}
+
+.ui.dimmer {
+ display: none;
+ position: @dimmerPosition;
+ top: 0 !important;
+ left: 0 !important;
+
+ width: 100%;
+ height: 100%;
+
+ text-align: @textAlign;
+ vertical-align: @verticalAlign;
+ padding: @padding;
+
+ background: @backgroundColor;
+ opacity: @hiddenOpacity;
+ line-height: @lineHeight;
+
+ animation-fill-mode: both;
+ animation-duration: @duration;
+ transition: @transition;
+
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ user-select: none;
+ will-change: opacity;
+ z-index: @zIndex;
+}
+
+/* Dimmer Content */
+.ui.dimmer > .content {
+ user-select: text;
+ color: @textColor;
+}
+
+
+/* Loose Coupling */
+.ui.segment > .ui.dimmer:not(.page) {
+ border-radius: inherit;
+}
+
+/* Scrollbars */
+.addScrollbars() when (@useCustomScrollbars) {
+ .ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
+ background: @trackInvertedBackground;
+ }
+ .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
+ background: @thumbInvertedBackground;
+ }
+ .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
+ background: @thumbInvertedInactiveBackground;
+ }
+ .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
+ background: @thumbInvertedHoverBackground;
+ }
+}
+.addScrollbars();
+
+/*******************************
+ States
+*******************************/
+
+/* Animating */
+.animating.dimmable:not(body),
+.dimmed.dimmable:not(body) {
+ overflow: @overflow;
+}
+
+/* Animating / Active / Visible */
+.dimmed.dimmable > .ui.animating.dimmer,
+.dimmed.dimmable > .ui.visible.dimmer,
+.ui.active.dimmer {
+ display: flex;
+ opacity: @visibleOpacity;
+}
+
+& when (@variationDimmerDisabled) {
+ /* Disabled */
+ .ui.disabled.dimmer {
+ width: 0 !important;
+ height: 0 !important;
+ }
+}
+
+
+/*******************************
+ Variations
+*******************************/
+
+& when (@variationDimmerLegacy) {
+ /*--------------
+ Legacy
+ ---------------*/
+
+ /* Animating / Active / Visible */
+ .dimmed.dimmable > .ui.animating.legacy.dimmer,
+ .dimmed.dimmable > .ui.visible.legacy.dimmer,
+ .ui.active.legacy.dimmer {
+ display: block;
+ }
+}
+
+& when (@variationDimmerAligned) {
+ /*--------------
+ Alignment
+ ---------------*/
+
+ .ui[class*="top aligned"].dimmer {
+ justify-content: flex-start;
+ }
+ .ui[class*="bottom aligned"].dimmer {
+ justify-content: flex-end;
+ }
+}
+
+& when (@variationDimmerPage) {
+ /*--------------
+ Page
+ ---------------*/
+
+ .ui.page.dimmer {
+ position: @pageDimmerPosition;
+ transform-style: @transformStyle;
+ perspective: @perspective;
+ transform-origin: center center;
+ &.modals {
+ -moz-perspective: none;
+ }
+ }
+}
+
+body.animating.in.dimmable,
+body.dimmed.dimmable {
+ overflow: hidden;
+}
+
+body.dimmable > .dimmer {
+ position: fixed;
+}
+
+& when (@variationDimmerBlurring) {
+ /*--------------
+ Blurring
+ ---------------*/
+
+ .blurring.dimmable > :not(.dimmer) {
+ filter: @blurredStartFilter;
+ transition: @blurredTransition;
+ }
+ .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
+ filter: @blurredEndFilter;
+ }
+
+ /* Dimmer Color */
+ .blurring.dimmable > .dimmer {
+ background: @blurredBackgroundColor;
+ }
+ .blurring.dimmable > .inverted.dimmer {
+ background: @blurredInvertedBackgroundColor;
+ }
+}
+& when (@variationDimmerAligned) {
+ /*--------------
+ Aligned
+ ---------------*/
+
+ .ui.dimmer > .top.aligned.content > * {
+ vertical-align: top;
+ }
+ .ui.dimmer > .bottom.aligned.content > * {
+ vertical-align: bottom;
+ }
+}
+
+& when (@variationDimmerShades) {
+ /*--------------
+ Shades
+ ---------------*/
+
+ .medium.medium.medium.medium.medium.dimmer {
+ background: @mediumBackgroundColor;
+ }
+ .light.light.light.light.light.dimmer {
+ background: @lightBackgroundColor;
+ }
+ .very.light.light.light.light.dimmer {
+ background: @veryLightBackgroundColor;
+ }
+}
+
+& when (@variationDimmerInverted) {
+ /*--------------
+ Inverted
+ ---------------*/
+
+ .ui.inverted.dimmer {
+ background: @invertedBackgroundColor;
+ }
+ .ui.inverted.dimmer > .content,
+ .ui.inverted.dimmer > .content > * {
+ color: @invertedTextColor;
+ }
+
+ & when (@variationDimmerShades) {
+ /*--------------
+ Inverted Shades
+ ---------------*/
+
+ .medium.medium.medium.medium.medium.inverted.dimmer {
+ background: @mediumInvertedBackgroundColor;
+ }
+ .light.light.light.light.light.inverted.dimmer {
+ background: @lightInvertedBackgroundColor;
+ }
+ .very.light.light.light.light.inverted.dimmer {
+ background: @veryLightInvertedBackgroundColor;
+ }
+ }
+}
+
+& when (@variationDimmerSimple) {
+ /*--------------
+ Simple
+ ---------------*/
+
+ /* Displays without javascript */
+ .ui.simple.dimmer {
+ display: block;
+ overflow: hidden;
+ opacity: 0;
+ width: 0;
+ height: 0;
+ z-index: -100;
+ background: @simpleStartBackgroundColor;
+ }
+ .dimmed.dimmable > .ui.simple.dimmer {
+ overflow: visible;
+ opacity: 1;
+ width: 100%;
+ height: 100%;
+ background: @simpleEndBackgroundColor;
+ z-index: @simpleZIndex;
+ }
+
+ .ui.simple.inverted.dimmer {
+ background: @simpleInvertedStartBackgroundColor;
+ }
+ .dimmed.dimmable > .ui.simple.inverted.dimmer {
+ background: @simpleInvertedEndBackgroundColor;
+ }
+}
+
+& when (@variationDimmerPartially) {
+ /*--------------
+ Partially
+ ----------------*/
+
+ .ui[class*="top dimmer"],
+ .ui[class*="center dimmer"],
+ .ui[class*="bottom dimmer"] {
+ height: auto;
+ }
+ .ui[class*="bottom dimmer"] {
+ top: auto !important;
+ bottom: 0;
+ }
+ .ui[class*="center dimmer"] {
+ top:50% !important;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+
+ .ui.segment > .ui.ui[class*="top dimmer"] {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ .ui.segment > .ui.ui[class*="center dimmer"] {
+ border-radius: 0;
+ }
+ .ui.segment > .ui.ui[class*="bottom dimmer"] {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ .ui[class*="center dimmer"].transition[class*="fade up"].in {
+ animation-name: fadeInUpCenter;
+ }
+ .ui[class*="center dimmer"].transition[class*="fade down"].in {
+ animation-name: fadeInDownCenter;
+ }
+ .ui[class*="center dimmer"].transition[class*="fade up"].out {
+ animation-name: fadeOutUpCenter;
+ }
+ .ui[class*="center dimmer"].transition[class*="fade down"].out {
+ animation-name: fadeOutDownCenter;
+ }
+ .ui[class*="center dimmer"].bounce.transition {
+ animation-name: bounceCenter;
+ }
+ @keyframes fadeInUpCenter {
+ 0% {
+ opacity: 0;
+ transform: translateY(-40%);
+ -webkit-transform: translateY(calc(-40% - .5px));
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ }
+ @keyframes fadeInDownCenter {
+ 0% {
+ opacity: 0;
+ transform: translateY(-60%);
+ -webkit-transform: translateY(calc(-60% - .5px));
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ }
+ @keyframes fadeOutUpCenter {
+ 0% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(-45%);
+ -webkit-transform: translateY(calc(-45% - .5px));
+ }
+ }
+ @keyframes fadeOutDownCenter {
+ 0% {
+ opacity: 1;
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ 100% {
+ opacity: 0;
+ transform: translateY(-55%);
+ -webkit-transform: translateY(calc(-55% - .5px));
+ }
+ }
+ @keyframes bounceCenter {
+ 0%, 20%, 50%, 80%, 100% {
+ transform: translateY(-50%);
+ -webkit-transform: translateY(calc(-50% - .5px));
+ }
+ 40% {
+ transform: translateY(calc(-50% - 30px));
+ }
+ 60% {
+ transform: translateY(calc(-50% - 15px));
+ }
+ }
+}
+
+.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/dropdown.js b/ui/semantic/src/definitions/modules/dropdown.js
similarity index 80%
rename from semantic/src/definitions/modules/dropdown.js
rename to ui/semantic/src/definitions/modules/dropdown.js
index 04da799..c307885 100644
--- a/semantic/src/definitions/modules/dropdown.js
+++ b/ui/semantic/src/definitions/modules/dropdown.js
@@ -1,6 +1,6 @@
/*!
- * # Semantic UI - Dropdown
- * http://github.com/semantic-org/semantic-ui/
+ * # Fomantic-UI - Dropdown
+ * http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
@@ -12,6 +12,10 @@
'use strict';
+$.isFunction = $.isFunction || function(obj) {
+ return typeof obj === "function" && typeof obj.nodeType !== "number";
+};
+
window = (typeof window != 'undefined' && window.Math == Math)
? window
: (typeof self != 'undefined' && self.Math == Math)
@@ -27,6 +31,10 @@ $.fn.dropdown = function(parameters) {
moduleSelector = $allModules.selector || '',
hasTouch = ('ontouchstart' in document.documentElement),
+ clickEvent = hasTouch
+ ? 'touchstart'
+ : 'click',
+
time = new Date().getTime(),
performance = [],
@@ -64,6 +72,7 @@ $.fn.dropdown = function(parameters) {
$sizer = $module.find(selector.sizer),
$input = $module.find(selector.input),
$icon = $module.find(selector.icon),
+ $clear = $module.find(selector.clearIcon),
$combo = ($module.prev().find(selector.text).length > 0)
? $module.prev().find(selector.text)
@@ -71,13 +80,17 @@ $.fn.dropdown = function(parameters) {
$menu = $module.children(selector.menu),
$item = $menu.find(selector.item),
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $(),
activated = false,
itemActivated = false,
internalChange = false,
+ iconClicked = false,
element = this,
+ focused = false,
instance = $module.data(moduleNamespace),
+ selectActionActive,
initialLoad,
pageLostFocus,
willRefocus,
@@ -85,6 +98,7 @@ $.fn.dropdown = function(parameters) {
id,
selectObserver,
menuObserver,
+ classObserver,
module
;
@@ -97,11 +111,17 @@ $.fn.dropdown = function(parameters) {
module.setup.reference();
}
else {
+ if (settings.ignoreDiacritics && !String.prototype.normalize) {
+ settings.ignoreDiacritics = false;
+ module.error(error.noNormalize, element);
+ }
module.setup.layout();
if(settings.values) {
+ module.set.initialLoad();
module.change.values(settings.values);
+ module.remove.initialLoad();
}
module.refreshData();
@@ -129,6 +149,9 @@ $.fn.dropdown = function(parameters) {
destroy: function() {
module.verbose('Destroying previous dropdown', $module);
module.remove.tabbable();
+ module.remove.active();
+ $menu.transition('stop all');
+ $menu.removeClass(className.visible).addClass(className.hidden);
$module
.off(eventNamespace)
.removeData(moduleNamespace)
@@ -141,15 +164,18 @@ $.fn.dropdown = function(parameters) {
;
module.disconnect.menuObserver();
module.disconnect.selectObserver();
+ module.disconnect.classObserver();
},
observeChanges: function() {
if('MutationObserver' in window) {
selectObserver = new MutationObserver(module.event.select.mutation);
menuObserver = new MutationObserver(module.event.menu.mutation);
- module.debug('Setting up mutation observer', selectObserver, menuObserver);
+ classObserver = new MutationObserver(module.event.class.mutation);
+ module.debug('Setting up mutation observer', selectObserver, menuObserver, classObserver);
module.observe.select();
module.observe.menu();
+ module.observe.class();
}
},
@@ -163,11 +189,16 @@ $.fn.dropdown = function(parameters) {
if(selectObserver) {
selectObserver.disconnect();
}
+ },
+ classObserver: function() {
+ if(classObserver) {
+ classObserver.disconnect();
+ }
}
},
observe: {
select: function() {
- if(module.has.input()) {
+ if(module.has.input() && selectObserver) {
selectObserver.observe($module[0], {
childList : true,
subtree : true
@@ -175,12 +206,19 @@ $.fn.dropdown = function(parameters) {
}
},
menu: function() {
- if(module.has.menu()) {
+ if(module.has.menu() && menuObserver) {
menuObserver.observe($menu[0], {
childList : true,
subtree : true
});
}
+ },
+ class: function() {
+ if(module.has.search() && classObserver) {
+ classObserver.observe($module[0], {
+ attributes : true
+ });
+ }
}
},
@@ -201,7 +239,7 @@ $.fn.dropdown = function(parameters) {
if(!values) {
return false;
}
- values = $.isArray(values)
+ values = Array.isArray(values)
? values
: [values]
;
@@ -259,11 +297,13 @@ $.fn.dropdown = function(parameters) {
: module.get.query()
;
module.verbose('Searching for query', query);
- if(module.has.minCharacters(query)) {
+ if(settings.fireOnInit === false && module.is.initialLoad()) {
+ module.verbose('Skipping callback on initial load', settings.onSearch);
+ } else if(module.has.minCharacters(query) && settings.onSearch.call(element, query) !== false) {
module.filter(query);
}
else {
- module.hide();
+ module.hide(null,true);
}
},
@@ -321,11 +361,18 @@ $.fn.dropdown = function(parameters) {
if( !module.has.menu() ) {
module.create.menu();
}
+ if ( module.is.clearable() && !module.has.clearItem() ) {
+ module.verbose('Adding clear icon');
+ $clear = $('')
+ .addClass('remove icon')
+ .insertBefore($text)
+ ;
+ }
if( module.is.search() && !module.has.search() ) {
module.verbose('Adding search input');
$search = $('')
.addClass(className.search)
- .prop('autocomplete', 'off')
+ .prop('autocomplete', module.is.chrome() ? 'fomantic-search' : 'off')
.insertBefore($text)
;
}
@@ -360,7 +407,7 @@ $.fn.dropdown = function(parameters) {
.attr('class', $input.attr('class') )
.addClass(className.selection)
.addClass(className.dropdown)
- .html( templates.dropdown(selectValues) )
+ .html( templates.dropdown(selectValues, fields, settings.preserveHTML, settings.className) )
.insertBefore($input)
;
if($input.hasClass(className.multiple) && $input.prop('multiple') === false) {
@@ -375,6 +422,7 @@ $.fn.dropdown = function(parameters) {
$module.addClass(className.disabled);
}
$input
+ .removeAttr('required')
.removeAttr('class')
.detach()
.prependTo($module)
@@ -383,8 +431,9 @@ $.fn.dropdown = function(parameters) {
module.refresh();
},
menu: function(values) {
- $menu.html( templates.menu(values, fields));
- $item = $menu.find(selector.item);
+ $menu.html( templates.menu(values, fields,settings.preserveHTML,settings.className));
+ $item = $menu.find(selector.item);
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
},
reference: function() {
module.debug('Dropdown behavior was called on select, replacing with closest dropdown');
@@ -411,7 +460,8 @@ $.fn.dropdown = function(parameters) {
},
refreshItems: function() {
- $item = $menu.find(selector.item);
+ $item = $menu.find(selector.item);
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
},
refreshSelectors: function() {
@@ -426,6 +476,7 @@ $.fn.dropdown = function(parameters) {
;
$menu = $module.children(selector.menu);
$item = $menu.find(selector.item);
+ $divider = settings.hideDividers ? $item.parent().children(selector.divider) : $();
},
refreshData: function() {
@@ -449,6 +500,11 @@ $.fn.dropdown = function(parameters) {
;
},
+ clearItems: function() {
+ $menu.empty();
+ module.refreshItems();
+ },
+
toggle: function() {
module.verbose('Toggling menu visibility');
if( !module.is.active() ) {
@@ -459,14 +515,17 @@ $.fn.dropdown = function(parameters) {
}
},
- show: function(callback) {
+ show: function(callback, preventFocus) {
callback = $.isFunction(callback)
? callback
: function(){}
;
+ if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache()) {
+ module.clearItems();
+ }
if(!module.can.show() && module.is.remote()) {
module.debug('No API results retrieved, searching before show');
- module.queryRemote(module.get.query(), module.show);
+ module.queryRemote(module.get.query(), module.show, [callback, preventFocus]);
}
if( module.can.show() && !module.is.active() ) {
module.debug('Showing dropdown');
@@ -481,7 +540,7 @@ $.fn.dropdown = function(parameters) {
if( module.can.click() ) {
module.bind.intent();
}
- if(module.has.menuSearch()) {
+ if(module.has.search() && !preventFocus) {
module.focusSearch();
}
module.set.visible();
@@ -491,7 +550,7 @@ $.fn.dropdown = function(parameters) {
}
},
- hide: function(callback) {
+ hide: function(callback, preventBlur) {
callback = $.isFunction(callback)
? callback
: function(){}
@@ -501,10 +560,18 @@ $.fn.dropdown = function(parameters) {
if(settings.onHide.call(element) !== false) {
module.animate.hide(function() {
module.remove.visible();
+ // hidding search focus
+ if ( module.is.focusedOnSearch() && preventBlur !== true ) {
+ $search.blur();
+ }
callback.call(element);
});
}
+ } else if( module.can.click() ) {
+ module.unbind.intent();
}
+ iconClicked = false;
+ focused = false;
},
hideOthers: function() {
@@ -533,27 +600,10 @@ $.fn.dropdown = function(parameters) {
bind: {
events: function() {
- if(hasTouch) {
- module.bind.touchEvents();
- }
module.bind.keyboardEvents();
module.bind.inputEvents();
module.bind.mouseEvents();
},
- touchEvents: function() {
- module.debug('Touch device detected binding additional touch events');
- if( module.is.searchSelection() ) {
- // do nothing special yet
- }
- else if( module.is.single() ) {
- $module
- .on('touchstart' + eventNamespace, module.event.test.toggle)
- ;
- }
- $menu
- .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter)
- ;
- },
keyboardEvents: function() {
module.verbose('Binding keyboard events');
$module
@@ -580,8 +630,8 @@ $.fn.dropdown = function(parameters) {
module.verbose('Binding mouse events');
if(module.is.multiple()) {
$module
- .on('click' + eventNamespace, selector.label, module.event.label.click)
- .on('click' + eventNamespace, selector.remove, module.event.remove.click)
+ .on(clickEvent + eventNamespace, selector.label, module.event.label.click)
+ .on(clickEvent + eventNamespace, selector.remove, module.event.remove.click)
;
}
if( module.is.searchSelection() ) {
@@ -590,22 +640,25 @@ $.fn.dropdown = function(parameters) {
.on('mouseup' + eventNamespace, module.event.mouseup)
.on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown)
.on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup)
- .on('click' + eventNamespace, selector.icon, module.event.icon.click)
+ .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
+ .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
.on('focus' + eventNamespace, selector.search, module.event.search.focus)
- .on('click' + eventNamespace, selector.search, module.event.search.focus)
+ .on(clickEvent + eventNamespace, selector.search, module.event.search.focus)
.on('blur' + eventNamespace, selector.search, module.event.search.blur)
- .on('click' + eventNamespace, selector.text, module.event.text.focus)
+ .on(clickEvent + eventNamespace, selector.text, module.event.text.focus)
;
if(module.is.multiple()) {
$module
- .on('click' + eventNamespace, module.event.click)
+ .on(clickEvent + eventNamespace, module.event.click)
+ .on(clickEvent + eventNamespace, module.event.search.focus)
;
}
}
else {
if(settings.on == 'click') {
$module
- .on('click' + eventNamespace, module.event.test.toggle)
+ .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
+ .on(clickEvent + eventNamespace, module.event.test.toggle)
;
}
else if(settings.on == 'hover') {
@@ -620,10 +673,10 @@ $.fn.dropdown = function(parameters) {
;
}
$module
- .on('click' + eventNamespace, selector.icon, module.event.icon.click)
.on('mousedown' + eventNamespace, module.event.mousedown)
.on('mouseup' + eventNamespace, module.event.mouseup)
.on('focus' + eventNamespace, module.event.focus)
+ .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
;
if(module.has.menuSearch() ) {
$module
@@ -637,7 +690,7 @@ $.fn.dropdown = function(parameters) {
}
}
$menu
- .on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter)
+ .on((hasTouch ? 'touchstart' : 'mouseenter') + eventNamespace, selector.item, module.event.item.mouseenter)
.on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave)
.on('click' + eventNamespace, selector.item, module.event.item.click)
;
@@ -651,7 +704,7 @@ $.fn.dropdown = function(parameters) {
;
}
$document
- .on('click' + elementNamespace, module.event.test.hide)
+ .on(clickEvent + elementNamespace, module.event.test.hide)
;
}
},
@@ -666,7 +719,7 @@ $.fn.dropdown = function(parameters) {
;
}
$document
- .off('click' + elementNamespace)
+ .off(clickEvent + elementNamespace)
;
}
},
@@ -707,7 +760,7 @@ $.fn.dropdown = function(parameters) {
module.remove.message();
}
if(settings.allowAdditions) {
- module.add.userSuggestion(query);
+ module.add.userSuggestion(module.escape.htmlEntities(query));
}
if(module.is.searchSelection() && module.can.show() && module.is.focusedOnSearch() ) {
module.show();
@@ -723,6 +776,18 @@ $.fn.dropdown = function(parameters) {
if(settings.filterRemoteData) {
module.filterItems(searchTerm);
}
+ var preSelected = $input.val();
+ if(!Array.isArray(preSelected)) {
+ preSelected = preSelected && preSelected!=="" ? preSelected.split(settings.delimiter) : [];
+ }
+ if (module.is.multiple()) {
+ $.each(preSelected,function(index,value){
+ $item.filter('[data-value="'+value+'"]')
+ .addClass(className.filtered)
+ ;
+ });
+ }
+ module.focusSearch(true);
afterFiltered();
});
}
@@ -736,7 +801,10 @@ $.fn.dropdown = function(parameters) {
}
},
- queryRemote: function(query, callback) {
+ queryRemote: function(query, callback, callbackParameters) {
+ if(!Array.isArray(callbackParameters)){
+ callbackParameters = [callbackParameters];
+ }
var
apiSettings = {
errorDuration : false,
@@ -747,27 +815,41 @@ $.fn.dropdown = function(parameters) {
},
onError: function() {
module.add.message(message.serverError);
- callback();
+ iconClicked = false;
+ focused = false;
+ callback.apply(null, callbackParameters);
},
onFailure: function() {
module.add.message(message.serverError);
- callback();
+ iconClicked = false;
+ focused = false;
+ callback.apply(null, callbackParameters);
},
onSuccess : function(response) {
var
- values = response[fields.remoteValues],
- hasRemoteValues = ($.isArray(values) && values.length > 0)
+ values = response[fields.remoteValues]
;
- if(hasRemoteValues) {
- module.remove.message();
- module.setup.menu({
- values: response[fields.remoteValues]
- });
+ if (!Array.isArray(values)){
+ values = [];
}
- else {
+ module.remove.message();
+ var menuConfig = {};
+ menuConfig[fields.values] = values;
+ module.setup.menu(menuConfig);
+
+ if(values.length===0 && !settings.allowAdditions) {
module.add.message(message.noResults);
}
- callback();
+ else {
+ var value = module.is.multiple() ? module.get.values() : module.get.value();
+ if (value !== '') {
+ module.verbose('Value(s) present after click icon, select value(s) in items');
+ module.set.selected(value, null, null, true);
+ }
+ }
+ iconClicked = false;
+ focused = false;
+ callback.apply(null, callbackParameters);
}
}
;
@@ -783,12 +865,14 @@ $.fn.dropdown = function(parameters) {
filterItems: function(query) {
var
- searchTerm = (query !== undefined)
+ searchTerm = module.remove.diacritics(query !== undefined
? query
- : module.get.query(),
+ : module.get.query()
+ ),
results = null,
escapedTerm = module.escape.string(searchTerm),
- beginsWithRegExp = new RegExp('^' + escapedTerm, 'igm')
+ regExpFlags = (settings.ignoreSearchCase ? 'i' : '') + 'gm',
+ beginsWithRegExp = new RegExp('^' + escapedTerm, regExpFlags)
;
// avoid loop if we're matching nothing
if( module.has.query() ) {
@@ -802,8 +886,12 @@ $.fn.dropdown = function(parameters) {
text,
value
;
- if(settings.match == 'both' || settings.match == 'text') {
- text = String(module.get.choiceText($choice, false));
+ if($choice.hasClass(className.unfilterable)) {
+ results.push(this);
+ return true;
+ }
+ if(settings.match === 'both' || settings.match === 'text') {
+ text = module.remove.diacritics(String(module.get.choiceText($choice, false)));
if(text.search(beginsWithRegExp) !== -1) {
results.push(this);
return true;
@@ -817,8 +905,8 @@ $.fn.dropdown = function(parameters) {
return true;
}
}
- if(settings.match == 'both' || settings.match == 'value') {
- value = String(module.get.choiceValue($choice, text));
+ if(settings.match === 'both' || settings.match === 'value') {
+ value = module.remove.diacritics(String(module.get.choiceValue($choice, text)));
if(value.search(beginsWithRegExp) !== -1) {
results.push(this);
return true;
@@ -843,6 +931,30 @@ $.fn.dropdown = function(parameters) {
.addClass(className.filtered)
;
}
+
+ if(!module.has.query()) {
+ $divider
+ .removeClass(className.hidden);
+ } else if(settings.hideDividers === true) {
+ $divider
+ .addClass(className.hidden);
+ } else if(settings.hideDividers === 'empty') {
+ $divider
+ .removeClass(className.hidden)
+ .filter(function() {
+ // First find the last divider in this divider group
+ // Dividers which are direct siblings are considered a group
+ var lastDivider = $(this).nextUntil(selector.item);
+
+ return (lastDivider.length ? lastDivider : $(this))
+ // Count all non-filtered items until the next divider (or end of the dropdown)
+ .nextUntil(selector.divider)
+ .filter(selector.item + ":not(." + className.filtered + ")")
+ // Hide divider if no items are found
+ .length === 0;
+ })
+ .addClass(className.hidden);
+ }
},
fuzzySearch: function(query, term) {
@@ -850,8 +962,8 @@ $.fn.dropdown = function(parameters) {
termLength = term.length,
queryLength = query.length
;
- query = query.toLowerCase();
- term = term.toLowerCase();
+ query = (settings.ignoreSearchCase ? query.toLowerCase() : query);
+ term = (settings.ignoreSearchCase ? term.toLowerCase() : term);
if(queryLength > termLength) {
return false;
}
@@ -872,12 +984,10 @@ $.fn.dropdown = function(parameters) {
return true;
},
exactSearch: function (query, term) {
- query = query.toLowerCase();
- term = term.toLowerCase();
- if(term.indexOf(query) > -1) {
- return true;
- }
- return false;
+ query = (settings.ignoreSearchCase ? query.toLowerCase() : query);
+ term = (settings.ignoreSearchCase ? term.toLowerCase() : term);
+ return term.indexOf(query) > -1;
+
},
filterActive: function() {
if(settings.useLabels) {
@@ -900,6 +1010,12 @@ $.fn.dropdown = function(parameters) {
}
},
+ blurSearch: function() {
+ if( module.has.search() ) {
+ $search.blur();
+ }
+ },
+
forceSelection: function() {
var
$currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
@@ -909,19 +1025,12 @@ $.fn.dropdown = function(parameters) {
: $activeItem,
hasSelected = ($selectedItem.length > 0)
;
- if(hasSelected && !module.is.multiple()) {
+ if(settings.allowAdditions || (hasSelected && !module.is.multiple())) {
module.debug('Forcing partial selection to selected item', $selectedItem);
module.event.item.click.call($selectedItem, {}, true);
- return;
}
else {
- if(settings.allowAdditions) {
- module.set.selected(module.get.query());
- module.remove.searchTerm();
- }
- else {
- module.remove.searchTerm();
- }
+ module.remove.searchTerm();
}
},
@@ -931,14 +1040,35 @@ $.fn.dropdown = function(parameters) {
module.clear();
}
module.debug('Creating dropdown with specified values', values);
- module.setup.menu({values: values});
+ var menuConfig = {};
+ menuConfig[fields.values] = values;
+ module.setup.menu(menuConfig);
$.each(values, function(index, item) {
if(item.selected == true) {
- module.debug('Setting initial selection to', item.value);
- module.set.selected(item.value);
- return true;
+ module.debug('Setting initial selection to', item[fields.value]);
+ module.set.selected(item[fields.value]);
+ if(!module.is.multiple()) {
+ return false;
+ }
}
});
+
+ if(module.has.selectInput()) {
+ module.disconnect.selectObserver();
+ $input.html('');
+ $input.append('');
+ $.each(values, function(index, item) {
+ var
+ value = settings.templates.deQuote(item[fields.value]),
+ name = settings.templates.escape(
+ item[fields.name] || '',
+ settings.preserveHTML
+ )
+ ;
+ $input.append('');
+ });
+ module.observe.select();
+ }
}
},
@@ -951,6 +1081,7 @@ $.fn.dropdown = function(parameters) {
},
focus: function() {
if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) {
+ focused = true;
module.show();
}
},
@@ -995,12 +1126,13 @@ $.fn.dropdown = function(parameters) {
}
},
search: {
- focus: function() {
+ focus: function(event) {
activated = true;
if(module.is.multiple()) {
module.remove.activeLabel();
}
- if(settings.showOnFocus) {
+ if(!focused && !module.is.active() && (settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin'))) {
+ focused = true;
module.search();
}
},
@@ -1010,6 +1142,8 @@ $.fn.dropdown = function(parameters) {
if(!itemActivated && !pageLostFocus) {
if(settings.forceSelection) {
module.forceSelection();
+ } else if(!settings.allowAdditions){
+ module.remove.searchTerm();
}
module.hide();
}
@@ -1017,14 +1151,33 @@ $.fn.dropdown = function(parameters) {
willRefocus = false;
}
},
+ clearIcon: {
+ click: function(event) {
+ module.clear();
+ if(module.is.searchSelection()) {
+ module.remove.searchTerm();
+ }
+ module.hide();
+ event.stopPropagation();
+ }
+ },
icon: {
click: function(event) {
- if($icon.hasClass(className.clear)) {
- module.clear();
- }
- else if (module.can.click()) {
+ iconClicked=true;
+ if(module.has.search()) {
+ if(!module.is.active()) {
+ if(settings.showOnFocus){
+ module.focusSearch();
+ } else {
+ module.toggle();
+ }
+ } else {
+ module.blurSearch();
+ }
+ } else {
module.toggle();
}
+ event.stopPropagation();
}
},
text: {
@@ -1064,10 +1217,11 @@ $.fn.dropdown = function(parameters) {
$label.addClass(className.active);
}
settings.onLabelSelect.apply(this, $labels.filter('.' + className.active));
+ event.stopPropagation();
}
},
remove: {
- click: function() {
+ click: function(event) {
var
$label = $(this).parent()
;
@@ -1079,6 +1233,7 @@ $.fn.dropdown = function(parameters) {
// remove this label only
module.remove.activeLabels( $label );
}
+ event.stopPropagation();
}
},
test: {
@@ -1091,6 +1246,9 @@ $.fn.dropdown = function(parameters) {
if(module.is.bubbledLabelClick(event) || module.is.bubbledIconClick(event)) {
return;
}
+ if (!module.is.multiple() || (module.is.multiple() && !module.is.active())) {
+ focused = true;
+ }
if( module.determine.eventOnElement(event, toggleBehavior) ) {
event.preventDefault();
}
@@ -1109,22 +1267,26 @@ $.fn.dropdown = function(parameters) {
event.stopPropagation();
},
hide: function(event) {
- module.determine.eventInModule(event, module.hide);
+ if(module.determine.eventInModule(event, module.hide)){
+ if(element.id && $(event.target).attr('for') === element.id){
+ event.preventDefault();
+ }
+ }
+ }
+ },
+ class: {
+ mutation: function(mutations) {
+ mutations.forEach(function(mutation) {
+ if(mutation.attributeName === "class") {
+ module.check.disabled();
+ }
+ });
}
},
select: {
mutation: function(mutations) {
module.debug('