| 1 |
"use strict"; |
| 2 |
|
| 3 |
/* |
| 4 |
Item Name: Winter Treefield |
| 5 |
Author: wpdirectorykit |
| 6 |
Author URI: https://wpdirectorykit.com/ |
| 7 |
Version: 1.0 |
| 8 |
*/ |
| 9 |
jQuery.fn.wdkTreefield = function (options) { |
| 10 |
var defaults = { |
| 11 |
ajax_url: null, |
| 12 |
ajax_param: {}, |
| 13 |
text_search: 'Search term', |
| 14 |
text_no_results: 'No results found', |
| 15 |
per_page: 10, |
| 16 |
offset: 0, |
| 17 |
attribute_id: 'id', |
| 18 |
attribute_value: 'value', |
| 19 |
language_id: null, |
| 20 |
skip_id: null, |
| 21 |
empty_value: ' - ', |
| 22 |
callback_selected: function callback_selected(key) { |
| 23 |
console.log('called callback: ' + key); |
| 24 |
} |
| 25 |
}; |
| 26 |
var options = jQuery.extend(defaults, options); |
| 27 |
var jqxhr; |
| 28 |
var is_loading = false; |
| 29 |
var request; |
| 30 |
/* Public API */ |
| 31 |
|
| 32 |
/* |
| 33 |
this.getCurrent = function() |
| 34 |
{ |
| 35 |
return options.currElImg; |
| 36 |
} |
| 37 |
this.getIndex = function(){ |
| 38 |
return options.currIndex; |
| 39 |
}; |
| 40 |
*/ |
| 41 |
|
| 42 |
return this.each(function () { |
| 43 |
options.obj = jQuery(this); |
| 44 |
options.firstLoad = true; |
| 45 |
options.endLoad = false; |
| 46 |
options.currValue = options.empty_value; |
| 47 |
if (options.obj.val() != '') options.currValue = options.obj.val(); |
| 48 |
generateHtml(); // Add loading indicator |
| 49 |
|
| 50 |
options.obj.parent().find(".circle-loading-bar").addClass(options.progressBar); // open scroll part |
| 51 |
|
| 52 |
options.obj.parent().find('.btn-group:first button').on('click', function () { |
| 53 |
var container = options.obj.parent().find('.list_container'); |
| 54 |
|
| 55 |
if (container.hasClass('win_visible')) { |
| 56 |
container.hide(); |
| 57 |
container.removeClass('win_visible'); |
| 58 |
container.parent().removeClass('win_open'); |
| 59 |
} else { |
| 60 |
container.show(); |
| 61 |
container.parent().addClass('win_open'); |
| 62 |
container.addClass('win_visible'); |
| 63 |
if (options.firstLoad) options.obj.parent().find('.list_scroll').scrollTop(0); |
| 64 |
options.firstLoad = false; |
| 65 |
jQuery(options.obj.parent().find('.search_term')).focus(); |
| 66 |
} |
| 67 |
|
| 68 |
return false; |
| 69 |
}); // hide when click outside |
| 70 |
|
| 71 |
jQuery(document).mouseup(function (e) { |
| 72 |
var container = options.obj.parent().find('.wdk_dropdown_tree'); |
| 73 |
var container_hidder = options.obj.parent().find('.list_container'); |
| 74 |
|
| 75 |
if (!container.is(e.target) // if the target of the click isn't the container... |
| 76 |
&& container.has(e.target).length === 0) // ... nor a descendant of the container |
| 77 |
{ |
| 78 |
container_hidder.hide(); |
| 79 |
container_hidder.parent().removeClass('win_open'); |
| 80 |
container_hidder.removeClass('win_visible'); |
| 81 |
} |
| 82 |
}); // load first n values |
| 83 |
|
| 84 |
loadMore(); // scroll |
| 85 |
|
| 86 |
var scroll_container = options.obj.parent().find('.list_scroll'); |
| 87 |
var list_items = options.obj.parent().find('.list_items'); |
| 88 |
jQuery(scroll_container).scroll(function () { |
| 89 |
if (jQuery(scroll_container).scrollTop() + jQuery(scroll_container).height() == jQuery(list_items).height()) { |
| 90 |
if (!options.endLoad) loadMore(); |
| 91 |
} |
| 92 |
}); // keypress/typing event |
| 93 |
|
| 94 |
jQuery(options.obj.parent().find('.search_term')).keyup(function () { |
| 95 |
options.endLoad = false; |
| 96 |
options.offset = 0; //if(is_loading === false) |
| 97 |
|
| 98 |
loadMore(); |
| 99 |
}).keypress(function (event) { |
| 100 |
if (event.which == 13) { |
| 101 |
return false; |
| 102 |
} |
| 103 |
}); |
| 104 |
jQuery(options.obj.parent().find('span.input-group-addon')).on('click', function () { |
| 105 |
options.endLoad = false; |
| 106 |
options.offset = 0; |
| 107 |
if (is_loading === false) loadMore(); |
| 108 |
}); |
| 109 |
return this; |
| 110 |
}); |
| 111 |
|
| 112 |
function loadMore() { |
| 113 |
showSpinner(); |
| 114 |
var search_term_val = options.obj.parent().find('.search_term').val(); |
| 115 |
if (options.offset == 0) options.obj.parent().find('ul').html(''); |
| 116 |
var param = { |
| 117 |
offset: options.offset, |
| 118 |
per_page: options.per_page, |
| 119 |
curr_id: options.obj.val(), |
| 120 |
attribute_id: options.attribute_id, |
| 121 |
attribute_value: options.attribute_value, |
| 122 |
search_term: search_term_val, |
| 123 |
language_id: options.language_id, |
| 124 |
skip_id: options.skip_id |
| 125 |
}; |
| 126 |
jQuery.extend(param, options.ajax_param); // Assign handlers immediately after making the request, |
| 127 |
// and remember the jqxhr object for this request |
| 128 |
|
| 129 |
if (jqxhr != null) jqxhr.abort(); |
| 130 |
options.callback_selected(options.obj.val()); |
| 131 |
is_loading = true; |
| 132 |
jqxhr = jQuery.post(options.ajax_url, param, function (data) { |
| 133 |
hideSpinner(); |
| 134 |
var list_items = options.obj.parent().find('ul'); |
| 135 |
|
| 136 |
if (data.success == false) { |
| 137 |
options.endLoad = true; |
| 138 |
list_items.html('<span class="no_results">' + options.text_no_results + '</span>'); |
| 139 |
alert(data.message); |
| 140 |
} else { |
| 141 |
jQuery.each(data.results, function (key, row) { |
| 142 |
if (key == 'lang_id') return true; |
| 143 |
list_items.append("<li key='" + row.key + "'>" + row.value + "</li>"); |
| 144 |
}); |
| 145 |
if (options.offset == 0) options.obj.parent().find('.list_scroll').scrollTop(0); |
| 146 |
options.obj.parent().find('button:first-child').html(data.curr_val); |
| 147 |
if (data.results.length == 0) options.endLoad = true; |
| 148 |
if (options.offset == 0 && data.results.length == 0) list_items.html('<span class="no_results">' + options.text_no_results + '</span>'); |
| 149 |
options.offset += options.per_page; |
| 150 |
resetElements(); |
| 151 |
} |
| 152 |
|
| 153 |
is_loading = false; |
| 154 |
}).fail(function () { |
| 155 |
//alert( "error" ); |
| 156 |
console.log("abort"); |
| 157 |
hideSpinner(); |
| 158 |
is_loading = false; |
| 159 |
}); |
| 160 |
} |
| 161 |
|
| 162 |
function hideSpinner() { |
| 163 |
options.obj.parent().find('.loader-spiner').removeClass('fa-spinner'); |
| 164 |
options.obj.parent().find('.loader-spiner').removeClass('fa-spin'); |
| 165 |
options.obj.parent().find('.loader-spiner').addClass('fa-search'); |
| 166 |
} |
| 167 |
|
| 168 |
function showSpinner() { |
| 169 |
options.obj.parent().find('.loader-spiner').addClass('fa-spinner'); |
| 170 |
options.obj.parent().find('.loader-spiner').addClass('fa-spin'); |
| 171 |
options.obj.parent().find('.loader-spiner').removeClass('fa-search'); |
| 172 |
} |
| 173 |
|
| 174 |
function resetElements() { |
| 175 |
options.obj.parent().find("li *").off(); |
| 176 |
options.obj.parent().find("li").on('click', function () { |
| 177 |
options.obj.parent().find('button:first-child').html(jQuery(this).html()); |
| 178 |
options.obj.val(jQuery(this).attr('key')); |
| 179 |
options.obj.parent().find('.list_container').hide(); |
| 180 |
options.obj.parent().find('.list_container').parent().removeClass('win_open'); |
| 181 |
options.obj.parent().find('.list_container').removeClass('win_visible'); |
| 182 |
options.callback_selected(jQuery(this).attr('key')); |
| 183 |
}); |
| 184 |
} |
| 185 |
|
| 186 |
function generateHtml() { |
| 187 |
// hide input element |
| 188 |
options.obj.css('display', 'none'); |
| 189 |
options.obj.before('<div class="wdk_dropdown_tree">' + // showing value, always visible |
| 190 |
'<div class="btn-group ">' + '<button class="btn btn-default" type="button">' + options.currValue + ' ' + '</button>' + '<button type="button" class="btn btn-default dropdown-toggle"> <i class="fa fa-angle-down"></i> </button>' + '</div>' + // hidden part with scroll and search |
| 191 |
'<div class="list_container color-primary">' + '<div class="list_scroll">' + '<ul class="list_items">' + // '<li key="key_1">test text adr 1</li>'+ |
| 192 |
'</ul>' + '</div>' + // search input and loading indicator |
| 193 |
'<div class="input-group">' + '<input type="text" class="form-control search_term" placeholder="' + options.text_search + '" aria-describedby="basic-addon2" autocomplete="off">' + '<span class="input-group-addon"><i class="loader-spiner fa fa-spinner fa-spin"></i></span>' + '</div>' + '</div>' + '</div>'); |
| 194 |
} |
| 195 |
}; |
