' +
+ '
' +
+ '' +
+ ''
+ );
+ a.dropdownTemplate = t7.compile(a.params.dropdownTemplate ||
+ '
' +
+ '
' +
+ '{{#if preloader}}' +
+ '
' +
+ '{{/if}}' +
+ '
'
+ );
+ }
+
+ // Define popup
+ a.popup = undefined;
+
+ // Define Dropdown
+ a.dropdown = undefined;
+
+ // Handle Input Value Change
+ a.handleInputValue = function (e) {
+ var query = a.input.val();
+ if (a.params.source) {
+ a.params.source(a, query, function (items) {
+ var itemsHTML = '';
+ var limit = a.params.limit ? Math.min(a.params.limit, items.length) : items.length;
+ a.items = items;
+ var i, j;
+ var regExp = new RegExp('('+query+')', 'i');
+ for (i = 0; i < limit; i++) {
+ var itemValue = typeof items[i] === 'object' ? items[i][a.params.valueProperty] : items[i];
+ itemsHTML += a.dropdownItemTemplate({
+ value: itemValue,
+ text: (typeof items[i] !== 'object' ? items[i] : items[i][a.params.textProperty]).replace(regExp, '
$1')
+ });
+ }
+ if (itemsHTML === '' && query === '' && a.params.dropdownPlaceholderText) {
+ itemsHTML += a.dropdownPlaceholderTemplate({
+ text: a.params.dropdownPlaceholderText,
+ });
+ }
+ a.dropdown.find('ul').html(itemsHTML);
+ });
+ }
+ };
+ // Handle Drop Down Click
+ a.handleDropdownClick = function (e) {
+ var clicked = $(this);
+ var clickedItem;
+ for (var i = 0; i < a.items.length; i++) {
+ var itemValue = typeof a.items[i] === 'object' ? a.items[i][a.params.valueProperty] : a.items[i];
+ var value = clicked.attr('data-value');
+ if (itemValue === value || itemValue * 1 === value * 1) {
+ clickedItem = a.items[i];
+ }
+ }
+ if (a.params.updateInputValueOnSelect) {
+ a.input.val(typeof clickedItem === 'object' ? clickedItem[a.params.textProperty] : clickedItem);
+ a.input.trigger('input change');
+ }
+
+ if (a.params.onChange) {
+ a.params.onChange(a, clickedItem);
+ }
+
+ a.close();
+ };
+ a.positionDropDown = function () {
+ var listBlock = a.input.parents('.list-block'),
+ pageContent = a.input.parents('.page-content'),
+ paddingTop = parseInt(pageContent.css('padding-top'), 10),
+ paddingBottom = parseInt(pageContent.css('padding-top'), 10),
+ inputOffset = a.input.offset(),
+ listBlockOffset = listBlock.length > 0 ? listBlock.offset() : 0,
+ maxHeight = pageContent[0].scrollHeight - paddingBottom - (inputOffset.top + pageContent[0].scrollTop) - a.input[0].offsetHeight;
+
+ a.dropdown.css({
+ left: (listBlock.length > 0 ? listBlockOffset.left : inputOffset.left) + 'px',
+ top: inputOffset.top + pageContent[0].scrollTop + a.input[0].offsetHeight + 'px',
+ width: (listBlock.length > 0 ? listBlock[0].offsetWidth : a.input[0].offsetWidth) + 'px'
+ });
+ a.dropdown.children('.autocomplete-dropdown-inner').css({
+ maxHeight: maxHeight + 'px',
+ paddingLeft: listBlock.length > 0 && !a.params.expandInput ? inputOffset.left - (material ? 16 : 15) + 'px' : ''
+ });
+ };
+
+ // Event Listeners on new page
+ a.pageInit = function (e) {
+ var page = e.detail.page;
+ if (page.name !== pageName) {
+ return;
+ }
+ var container = $(page.container);
+ // Init Search Bar
+ var searchBar = app.searchbar(container.find('.searchbar'), {
+ customSearch: true,
+ onSearch: function (searchbar, data) {
+ if (data.query.length === 0) {
+ searchbar.overlay.addClass('searchbar-overlay-active');
+ }
+ else {
+ searchbar.overlay.removeClass('searchbar-overlay-active');
+ }
+
+ var i, j, k;
+
+ if (a.params.source) {
+ a.params.source(a, data.query, function(items) {
+ var itemsHTML = '';
+ var limit = a.params.limit ? Math.min(a.params.limit, items.length) : items.length;
+ a.items = items;
+ for (i = 0; i < limit; i++) {
+ var selected = false;
+ var itemValue = typeof items[i] === 'object' ? items[i][a.params.valueProperty] : items[i];
+ for (j = 0; j < a.value.length; j++) {
+ var aValue = typeof a.value[j] === 'object' ? a.value[j][a.params.valueProperty] : a.value[j];
+ if (aValue === itemValue || aValue * 1 === itemValue * 1) selected = true;
+ }
+ itemsHTML += a.itemTemplate({
+ value: itemValue,
+ text: typeof items[i] !== 'object' ? items[i] : items[i][a.params.textProperty],
+ inputType: a.inputType,
+ id: a.id,
+ inputName: a.inputName,
+ selected: selected,
+ checkbox: a.inputType === 'checkbox',
+ material: material
+ });
+ }
+ container.find('.autocomplete-found ul').html(itemsHTML);
+ if (items.length === 0) {
+ if (data.query.length !== 0) {
+ container.find('.autocomplete-not-found').show();
+ container.find('.autocomplete-found, .autocomplete-values').hide();
+ }
+ else {
+ container.find('.autocomplete-values').show();
+ container.find('.autocomplete-found, .autocomplete-not-found').hide();
+ }
+ }
+ else {
+ container.find('.autocomplete-found').show();
+ container.find('.autocomplete-not-found, .autocomplete-values').hide();
+ }
+ });
+ }
+ }
+ });
+
+ function updateValues() {
+ var valuesHTML = '';
+ var i;
+ for (i = 0; i < a.value.length; i++) {
+
+ valuesHTML += a.itemTemplate({
+ value: typeof a.value[i] === 'object' ? a.value[i][a.params.valueProperty] : a.value[i],
+ text: typeof a.value[i] === 'object' ? a.value[i][a.params.textProperty]: a.value[i],
+ inputType: a.inputType,
+ id: a.id,
+ inputName: a.inputName + '-checked',
+ checkbox: a.inputType === 'checkbox',
+ material: material,
+ selected: true
+ });
+ }
+ container.find('.autocomplete-values ul').html(valuesHTML);
+ }
+
+ // Handle Inputs
+ container.on('change', 'input[type="radio"], input[type="checkbox"]', function () {
+ var i;
+ var input = this;
+ var value = input.value;
+ var text = $(input).parents('li').find('.item-title').text();
+ var isValues = $(input).parents('.autocomplete-values').length > 0;
+ var item, itemValue, aValue;
+ if (isValues) {
+ if (a.inputType === 'checkbox' && !input.checked) {
+ for (i = 0; i < a.value.length; i++) {
+ aValue = typeof a.value[i] === 'string' ? a.value[i] : a.value[i][a.params.valueProperty];
+ if (aValue === value || aValue * 1 === value * 1) {
+ a.value.splice(i, 1);
+ }
+ }
+ updateValues();
+ if (a.params.onChange) a.params.onChange(a, a.value);
+ }
+ return;
+ }
+
+ // Find Related Item
+ for (i = 0; i < a.items.length; i++) {
+ itemValue = typeof a.items[i] === 'string' ? a.items[i] : a.items[i][a.params.valueProperty];
+ if (itemValue === value || itemValue * 1 === value * 1) item = a.items[i];
+ }
+ // Update Selected Value
+ if (a.inputType === 'radio') {
+ a.value = [item];
+ }
+ else {
+ if (input.checked) {
+ a.value.push(item);
+ }
+ else {
+ for (i = 0; i < a.value.length; i++) {
+ aValue = typeof a.value[i] === 'string' ? a.value[i] : a.value[i][a.params.valueProperty];
+ if (aValue === value || aValue * 1 === value * 1) {
+ a.value.splice(i, 1);
+ }
+ }
+ }
+ }
+
+ // Update Values Block
+ updateValues();
+
+ // On Select Callback
+ if ((a.inputType === 'radio' && input.checked || a.inputType === 'checkbox') && a.params.onChange ) {
+ a.params.onChange(a, a.value);
+ }
+ if (backOnSelect && a.inputType === 'radio') {
+ if (a.params.openIn === 'popup') app.closeModal(a.popup);
+ else view.router.back();
+ }
+ });
+
+ // Update Values On Page Init
+ updateValues();
+
+ if (a.params.onOpen) a.params.onOpen(a);
+ };
+
+ // Show Hide Preloader
+ a.showPreloader = function () {
+ if (a.params.openIn === 'dropdown') {
+ if (a.dropdown) a.dropdown.find('.autocomplete-preloader').addClass('autocomplete-preloader-visible');
+ }
+ else $('.autocomplete-preloader').addClass('autocomplete-preloader-visible');
+ };
+
+ a.hidePreloader = function () {
+ if (a.params.openIn === 'dropdown') {
+ if (a.dropdown) a.dropdown.find('.autocomplete-preloader').removeClass('autocomplete-preloader-visible');
+ }
+ else $('.autocomplete-preloader').removeClass('autocomplete-preloader-visible');
+ };
+
+ // Open Autocomplete Page/Popup
+ a.open = function () {
+ if (a.opened) return;
+ a.opened = true;
+ if (a.params.openIn === 'dropdown') {
+ if (!a.dropdown) {
+ a.dropdown = $(a.dropdownTemplate({
+ preloader: a.params.preloader,
+ preloaderColor: a.params.preloaderColor,
+ }));
+ a.dropdown.on('click', 'label', a.handleDropdownClick);
+
+ }
+ var listBlock = a.input.parents('.list-block');
+ if (listBlock.length && a.input.parents('.item-content').length > 0 && a.params.expandInput) {
+ a.input.parents('.item-content').addClass('item-content-dropdown-expand');
+ }
+ a.positionDropDown();
+ a.input.parents('.page-content').append(a.dropdown);
+ a.dropdown.addClass('autocomplete-dropdown-in');
+ a.input.trigger('input');
+ $(window).on('resize', a.positionDropDown);
+ if (a.params.onOpen) a.params.onOpen(a);
+ }
+ else {
+ $(document).once('pageInit', '.autocomplete-page', a.pageInit);
+ if (a.params.openIn === 'popup') {
+ a.popup = app.popup(
+ ''
+ );
+ a.popup = $(a.popup);
+ a.popup.once('closed', function () {
+ a.popup = undefined;
+ a.opened = false;
+ if (a.params.onClose) a.params.onClose(a);
+ });
+ }
+ else {
+ view.router.load({
+ content: pageHTML
+ });
+ $(document).once('pageBack', '.autocomplete-page', function () {
+ a.opened = false;
+ if (a.params.onClose) a.params.onClose(a);
+ });
+ }
+ }
+ };
+ a.close = function (e) {
+ if (!a.opened) return;
+ if (a.params.openIn === 'dropdown') {
+ if (e && e.type === 'blur' && a.dropdown.find('label.active-state').length > 0) return;
+ a.dropdown.removeClass('autocomplete-dropdown-in').remove();
+ a.input.parents('.item-content-dropdown-expand').removeClass('item-content-dropdown-expand');
+ a.opened = false;
+ $(window).off('resize', a.positionDropDown);
+ if (a.params.onClose) a.params.onClose(a);
+ }
+ if (a.params.openIn === 'popup') {
+ if (a.popup) app.closeModal(a.popup);
+ }
+ };
+
+ // Init Events
+ a.initEvents = function (detach) {
+ var method = detach ? 'off' : 'on';
+ if (a.params.openIn !== 'dropdown' && a.opener) {
+ a.opener[method]('click', a.open);
+ }
+ if (a.params.openIn === 'dropdown' && a.input) {
+ a.input[method]('focus', a.open);
+ a.input[method]('input', a.handleInputValue);
+ a.input[method]('blur', a.close);
+ }
+ if (detach && a.dropdown) {
+ a.dropdown = null;
+ }
+ };
+
+ // Init/Destroy Methods
+ a.init = function () {
+ a.initEvents();
+ };
+ a.destroy = function () {
+ a.initEvents(true);
+ a = null;
+ };
+
+ // Init
+ a.init();
+
+ return a;
+};
+app.autocomplete = function (params) {
+ return new Autocomplete(params);
+};
\ No newline at end of file
diff --git a/src/less/ios/autocomplete.less b/src/less/ios/autocomplete.less
new file mode 100644
index 0000000000..c35bbfe7e7
--- /dev/null
+++ b/src/less/ios/autocomplete.less
@@ -0,0 +1,78 @@
+/* === Autocomplete === */
+.autocomplete-page {
+ .autocomplete-found {
+ display: block;
+ }
+ .autocomplete-not-found {
+ display: none;
+ }
+ .autocomplete-values {
+ display: block;
+ }
+ .list-block ul:empty {
+ display: none;
+ }
+}
+.autocomplete-preloader:not(.autocomplete-preloader-visible) {
+ -webkit-animation: none;
+ animation: none;
+ visibility: hidden;
+}
+
+.autocomplete-dropdown {
+ background: #fff;
+ box-sizing: border-box;
+ position: absolute;
+ z-index: 500;
+ box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
+ width: 100%;
+ left: 0;
+ .autocomplete-dropdown-inner {
+ position: relative;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ height: 100%;
+ z-index: 1;
+ }
+ .autocomplete-preloader {
+ display: none;
+ position: absolute;
+ right: 15px;
+ bottom: 100%;
+ margin-bottom: 12px;
+ }
+ .autocomplete-preloader-visible {
+ display: block;
+ }
+ .autocomplete-dropdown-placeholder {
+ color: #a9a9a9;
+ }
+ .list-block {
+ margin: 0;
+ ul {
+ .hairline-remove(top);
+ .hairline-remove(bottom);
+ background: none !important;
+ }
+ b {
+ font-weight: 500;
+ html.ios-gt-8 & {
+ font-weight: 600;
+ }
+ }
+ }
+}
+.list-block {
+ .item-content-dropdown-expand {
+ .item-title.label {
+ width: 0;
+ .flex-shrink(10);
+ + .item-input {
+ margin-left: 0;
+ }
+ }
+ .item-input {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/less/ios/framework7.ios.colors.less b/src/less/ios/framework7.ios.colors.less
index b2329f1f8b..9c4c7b1cb1 100644
--- a/src/less/ios/framework7.ios.colors.less
+++ b/src/less/ios/framework7.ios.colors.less
@@ -277,6 +277,12 @@ Framework7 Layouts Themes
background: none;
}
}
+ .autocomplete-dropdown {
+ background: @blockBg;
+ .list-block b {
+ color: #fff;
+ }
+ }
.card {
background: @blockBg;
}
diff --git a/src/less/ios/framework7.ios.less b/src/less/ios/framework7.ios.less
index 6ea6d97f89..9dbdb5e5db 100644
--- a/src/less/ios/framework7.ios.less
+++ b/src/less/ios/framework7.ios.less
@@ -25,6 +25,7 @@
@import url('preloader.less');
@import url('progressbar.less');
@import url('pull-to-refresh.less');
+@import url('autocomplete.less');
@import url('swiper.less');
@import url('photo-browser.less');
@import url('picker.less');
diff --git a/src/less/ios/lists.less b/src/less/ios/lists.less
index 97f8e8e228..9d3dc7edc4 100644
--- a/src/less/ios/lists.less
+++ b/src/less/ios/lists.less
@@ -115,11 +115,12 @@
.flexbox();
max-height: 28px;
}
- .smart-select .item-after {
+ .smart-select .item-after, .autocomplete-opener .item-after {
max-width: 70%;
overflow: hidden;
- text-overflow:ellipsis;
+ text-overflow: ellipsis;
position: relative;
+ display: block;
}
.item-link {
.transition(300ms);
diff --git a/src/less/material/autocomplete.less b/src/less/material/autocomplete.less
new file mode 100644
index 0000000000..d87642fed9
--- /dev/null
+++ b/src/less/material/autocomplete.less
@@ -0,0 +1,65 @@
+/* === Autocomplete === */
+.autocomplete-page {
+ .autocomplete-found {
+ display: block;
+ }
+ .autocomplete-not-found {
+ display: none;
+ }
+ .autocomplete-values {
+ display: block;
+ }
+ .list-block ul:empty {
+ display: none;
+ }
+}
+.autocomplete-preloader:not(.autocomplete-preloader-visible) {
+ -webkit-animation: none;
+ animation: none;
+ visibility: hidden;
+}
+
+.autocomplete-dropdown {
+ background: #fff;
+ box-sizing: border-box;
+ position: absolute;
+ z-index: 500;
+ // box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
+ .depth(1);
+ width: 100%;
+ left: 0;
+ // margin-top: -2px;
+ .autocomplete-dropdown-inner {
+ position: relative;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ height: 100%;
+ z-index: 1;
+ }
+ .autocomplete-preloader {
+ display: none;
+ position: absolute;
+ right: 15px;
+ bottom: 100%;
+ margin-bottom: 12px;
+ }
+ .autocomplete-preloader-visible {
+ display: block;
+ }
+ .autocomplete-dropdown-placeholder {
+ color: #a9a9a9;
+ }
+ .list-block {
+ margin: 0;
+ color: rgba(0,0,0,0.54);
+ ul {
+ .hairline-remove(top);
+ .hairline-remove(bottom);
+ background: none !important;
+ }
+ b {
+ font-weight: normal;
+ color: #212121;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/less/material/framework7.material.colors.less b/src/less/material/framework7.material.colors.less
index 42e2a72512..9bee7ff293 100644
--- a/src/less/material/framework7.material.colors.less
+++ b/src/less/material/framework7.material.colors.less
@@ -89,6 +89,15 @@ Framework7 Layouts Themes
.contacts-block .list-group-title {
background: none;
}
+ .autocomplete-dropdown {
+ background: @blockBg;
+ .list-block {
+ color: rgba(255,255,255,0.54);
+ }
+ .list-block b {
+ color: rgba(255,255,255,0.87);
+ }
+ }
// Forms
.item-link, label.label-checkbox, label.label-radio {
html:not(.watch-active-state) &:active, &.active-state {
diff --git a/src/less/material/framework7.material.less b/src/less/material/framework7.material.less
index 3ae2223ee0..fce939bb0d 100644
--- a/src/less/material/framework7.material.less
+++ b/src/less/material/framework7.material.less
@@ -27,6 +27,7 @@
@import url('preloader.less');
@import url('progressbar.less');
@import url('pull-to-refresh.less');
+@import url('autocomplete.less');
@import url('swiper.less');
@import url('photo-browser.less');
@import url('picker.less');
diff --git a/src/less/material/lists.less b/src/less/material/lists.less
index 46d5980fbd..9daabce8df 100644
--- a/src/less/material/lists.less
+++ b/src/less/material/lists.less
@@ -104,7 +104,7 @@
text-overflow: ellipsis;
max-width: 100%;
}
-
+
.item-after {
white-space: nowrap;
color: #757575;
@@ -114,11 +114,12 @@
max-height: 28px;
font-size: 14px;
}
- .smart-select .item-after {
+ .smart-select .item-after, .autocomplete-opener .item-after {
max-width: 70%;
overflow: hidden;
- text-overflow:ellipsis;
+ text-overflow: ellipsis;
position: relative;
+ display: block;
}
.item-link {
.transition(300ms);