if (!moduleEl) return; var root = moduleEl.querySelector('[data-listingsearch-root]'); if (!root) return; /* __chl_hide_empty_filters_v1__ */ /* ?? CHL: hide the "Filters" button when there are no passing filters ???????? The add-filter menu's

s are server-rendered via Mustache from listings.schemas.filters_passing (MLS-summary driven). When an MLS maps none of the optional amenity filters (e.g. NWMLS / 509 has them all unmapped), the menu is empty — so showing the Filters button opens an empty dropdown. Hide the whole add-filter control when its menu has no options. */ (function () { var addFilter = root.querySelector('[data-ls-add-filter]'); if (!addFilter) return; var menu = addFilter.querySelector('[data-ls-add-filter-menu]'); var count = menu ? menu.querySelectorAll('li').length : 0; if (count === 0) { addFilter.hidden = true; addFilter.style.display = 'none'; } })(); // ?? Client item-block card rendering ?????????????????????????????????????? // The server resolves the `listing` item block once and writes its raw // Mustache template (icon-rewritten, braces entity-encoded) into the // text/template host element [data-ch-card-template-for="listing"]. We read // it, decode the braces, and render one card per row on every refetch — so the // client cards are byte-identical to the SSR item-block cards (same classes, // same icons, same favorite/gallery widgets) and track edits to the item block. // Replaces the old hand-written buildCard() string-builder. // (Note: avoid the literal script-tag spelling in this comment — customScriptRun // treats any " 0; return !!v && v !== 0 && v !== '0'; } function chRender(tpl, ctx) { var out = '', i = 0, len = tpl.length; while (i < len) { var open = tpl.indexOf('{{', i); if (open === -1) { out += tpl.slice(i); break; } out += tpl.slice(i, open); var triple = tpl.charAt(open + 2) === '{'; var close = tpl.indexOf(triple ? '}}}' : '}}', open + 2); if (close === -1) { out += tpl.slice(open); break; } var tag = tpl.slice(open + (triple ? 3 : 2), close).trim(); var after = close + (triple ? 3 : 2); var sigil = tag.charAt(0); if (sigil === '#' || sigil === '^') { var name = tag.slice(1).trim(); var endTag = '{{/' + name + '}}'; var endIdx = tpl.indexOf(endTag, after); if (endIdx === -1) { i = after; continue; } var inner = tpl.slice(after, endIdx); var val = chLookup(ctx, name); if (sigil === '#') { if (Array.isArray(val)) { for (var k = 0; k < val.length; k++) out += chRender(inner, val[k]); } else if (chTruthy(val)) { out += chRender(inner, (val && typeof val === 'object') ? val : ctx); } } else { if (!chTruthy(val)) out += chRender(inner, ctx); } i = endIdx + endTag.length; continue; } var raw = chLookup(ctx, tag); raw = raw == null ? '' : String(raw); out += triple ? raw : escapeHtml(raw); i = after; } return out; } /* __chl_card_tpl_prime_v1__ */ // Read the card template ONCE, now, while the SSR DOM is still intact. // getCardTemplate() latches its result forever, so if its first call were // deferred to the first renderCard() it could land after a results-list // innerHTML rewrite had already removed the host — caching null and // rendering every subsequent card as an empty string. try { getCardTemplate(); } catch (e) {} function renderCard(l) { var tpl = getCardTemplate(); if (tpl == null) return ''; // no template — render nothing rather than hand-built DOM return '

' + chRender(tpl, l) + '

'; } var INITIAL_FETCH = { limit: 24, offset: 0, photo_required: 1, property_status_ids: '3,6,7,18', property_type_statuses: '(26,3),(26,6),(26,7),(26,18),(27,3),(27,6),(27,7),(27,18),(28,3),(28,6),(28,7),(28,18)', sort_field: 'date_listed_mls', sort_direction: 'desc' }; var rootMlsIds = root.getAttribute('data-ls-mls-ids') || ''; var rootWebsiteId = root.getAttribute('data-ls-website-id') || ''; /* __chl_card_template_from_server_v1__ */ var presetSourceId = ''; try { presetSourceId = (moduleEl && moduleEl.getAttribute && moduleEl.getAttribute('data-ch-preset-source-id')) || ''; if (!presetSourceId) { var _srcEl = root.closest && root.closest('[data-ch-preset-source-id]'); if (_srcEl) presetSourceId = _srcEl.getAttribute('data-ch-preset-source-id') || ''; } } catch (e) { presetSourceId = ''; } if (rootMlsIds) INITIAL_FETCH.mls_ids = rootMlsIds; // ?? Per-instance properties ??????????????????????????????????????????????? // Operator-configured drop-time values ride the section root as // data-ch-prop- (stamped by the builder; seeded with the block's // `properties` schema defaults by WebsitePage::resolveBuilderProps so they // are never bare). chProp() reads one; chPropList() splits a CSV. We fold the // SELECTED scope sets into INITIAL_FETCH so the very first user interaction // re-fetches the same scope the server already rendered (the affects:"fetch" // props also fold into fetches.listings server-side — same stamp, two // consumers). Location / search overrides + the _available picker gates are // applied later in init (once state.searchTags and the pickers exist). function chProp(k) { var v = root.getAttribute('data-ch-prop-' + k); return v == null ? '' : v; } function chPropList(k) { return chProp(k).split(',').map(function (s) { return s.trim(); }).filter(Boolean); } // chScopedProp/List: read a per-instance value from the resolved // [data-ls-initial-params] JSON blob (the single source of truth the server // folds properties -> fetches -> params into) first, falling back to the // legacy data-ch-prop-* attribute only when the blob lacks the key (ISR // caches rendered before the blob shipped). Per-instance state now lives in // clean columns (fetch_filter_props/section_block_props), NOT DOM attributes. var _lsScopedParams = null, _lsScopedParamsRead = false; function chScopedParams() { if (_lsScopedParamsRead) return _lsScopedParams; _lsScopedParamsRead = true; try { var h = root.querySelector('script[data-ls-initial-params]'); if (h) { var p = JSON.parse(h.textContent || 'null'); if (p && typeof p === 'object') _lsScopedParams = p; } } catch (e) { _lsScopedParams = null; } return _lsScopedParams; } function chScopedProp(k) { var sp = chScopedParams(); if (sp && sp[k] !== undefined && sp[k] !== null && sp[k] !== '') return String(sp[k]); return chProp(k); } function chScopedPropList(k) { return chScopedProp(k).split(',').map(function (s) { return s.trim(); }).filter(Boolean); } (function applyPropScope() { // Single source of truth: the server stamps the RESOLVED listing fetch // params (properties -> fetches -> listingFetch) into the // [data-ls-initial-params] JSON host. Seed INITIAL_FETCH from it so // state.params and every picker (couple, structure, price, beds) start // from the EXACT scope the SSR results were fetched with. The // data-ch-prop-* reads below remain as fallback for ISR caches rendered // before the host shipped. var serverParams = null; try { var spHost = root.querySelector('script[data-ls-initial-params]'); if (spHost) { var spParsed = JSON.parse(spHost.textContent || 'null'); if (spParsed && typeof spParsed === 'object' && Object.keys(spParsed).length) serverParams = spParsed; } } catch (e) { serverParams = null; } if (serverParams) { // Seed EVERY key the server resolved, not a hand-maintained subset. // listingParamsClientJson() (WebsitePage.php) is ALREADY a server-side // allowlist, so a second client-side allowlist can only ever LOSE scope. // It previously dropped search/search_type/city_ids/zip_code_ids/ // areas_major_ids/subdivision_ids/mls_ids/sort, so a page whose SSR pool // was defined by any of them (e.g. search="11414" + search_type="zip", // 5 results) silently widened to an unscoped MLS-wide query (5030) on the // first client refetch. Copy-everything keeps CSR identical to SSR. Object.keys(serverParams).forEach(function (k) { var v = serverParams[k]; if (v === undefined || v === null || v === '') return; INITIAL_FETCH[k] = String(v); }); var spLimit = parseInt(serverParams.limit, 10); if (spLimit > 0) INITIAL_FETCH.limit = spLimit; // Derive the couple pairs from the resolved type x status scope (the // resolved params rarely carry explicit pairs). Both sides present -> // cross them; otherwise keep the default and let buildFetchParams fill // the empty side (never stamp a partial couple). if (!serverParams.property_type_statuses) { var spTypes = String(serverParams.property_type_ids || '').split(',').map(function (s) { return s.trim(); }).filter(Boolean); var spStatuses = String(serverParams.property_status_ids || '').split(',').map(function (s) { return s.trim(); }).filter(Boolean); if (spTypes.length && spStatuses.length) { var spPairs = []; spTypes.forEach(function (t) { spStatuses.forEach(function (s) { spPairs.push('(' + t + ',' + s + ')'); }); }); INITIAL_FETCH.property_type_statuses = spPairs.join(','); } } return; } ['property_status_ids', 'property_structure_ids', 'property_zone_ids', 'property_type_ids'].forEach(function (k) { var v = chProp(k); if (v) INITIAL_FETCH[k] = v; }); var pLimit = parseInt(chProp('limit'), 10); if (pLimit > 0) INITIAL_FETCH.limit = pLimit; // Substructure has no fetch allowlist slot — JS-only, takes effect on first // interaction. Seed it so the param is present in state.params. var pSub = chProp('property_substructure_ids'); if (pSub) INITIAL_FETCH.property_substructure_ids = pSub; // Derive the couple form (property_type_statuses = OR of (type,status) pairs) // from the configured types — statuses so the couple picker + grid agree. // Only when BOTH sides are non-empty — otherwise leave the INITIAL_FETCH // default and let buildFetchParams fill the empty side with the all/default // scope (never stamp a partial couple). var initTypes = chPropList('property_type_ids'); var initStatuses = chPropList('property_status_ids'); if (initTypes.length && initStatuses.length) { var pairs = []; initTypes.forEach(function (t) { initStatuses.forEach(function (s) { pairs.push('(' + t + ',' + s + ')'); }); }); INITIAL_FETCH.property_type_statuses = pairs.join(','); } })(); var state = { params: Object.assign({}, INITIAL_FETCH), debounceT: null, locationLabel: '' }; // Boolean amenity features are derived from the server-rendered Filters menu // (each

is gated by MLS-summary filters_passing), so the HTML is the single // source of truth — a newly-passing filter needs no JS change. { key: 'Label' }. var BOOLEAN_FEATURES = (function () { var map = {}; root.querySelectorAll('[data-ls-add-filter-menu] [data-ls-feature]').forEach(function (btn) { var k = btn.getAttribute('data-ls-feature'); if (k) map[k] = btn.getAttribute('data-ls-feature-label') || k; }); return map; })(); // Amenity SELECT pickers (waterfront type, etc.), also server-gated. Maps the // submitted param name -> trigger label, from the rendered pickers. var AMENITY_SELECTS = (function () { var map = {}; root.querySelectorAll('[data-ls-amenity-picker]').forEach(function (picker) { var param = picker.getAttribute('data-ls-amenity-picker'); var labelEl = picker.querySelector('[data-ls-picker-label]'); if (param) map[param] = labelEl ? (labelEl.textContent || '').trim() : param; }); return map; })(); var PILL_LABELS = { property_type_statuses: function (v) { return couplePillText(v); }, property_structure_ids: function (v) { return ptpsPillText('property_structure', v); }, beds_min: function (v) { return v + '+ beds'; }, baths_min: function (v) { return v + '+ baths'; }, area_min: function (v) { return fmtInt(v) + '+ sqft'; }, area_max: function (v) { return 'up to ' + fmtInt(v) + ' sqft'; }, cost_min: function (v) { return '$' + fmtMoney(v) + '+'; }, cost_max: function (v) { return 'up to $' + fmtMoney(v); }, city_ids: function (v, label) { return label || 'Selected city'; }, zip_code_ids: function (v, label) { return label || 'Selected zip'; }, areas_major_ids: function (v, label) { return label || 'Selected area'; }, subdivision_ids: function (v, label) { return label || 'Subdivision'; }, school_district_ids: function (v, label) { return label || 'School district'; }, school_high_ids: function (v, label) { return label || 'High school'; }, school_elementary_ids: function (v, label) { return label || 'Elementary'; }, date_created_min_units: function (v) { return 'Listed within ' + fmtTimeWithin(v, state.params.date_created_min_unit); }, date_updated_min_units: function (v) { return 'Updated within ' + fmtTimeWithin(v, state.params.date_updated_min_unit); }, date_audit_log_change_cost_min_units: function (v) { return 'Price drop within ' + fmtTimeWithin(v, state.params.date_audit_log_change_cost_min_unit); }, search: function (v) { return '" ' + v + ' "'; }, gps_polygon: function () { return 'Drawn area'; } }; function fmtTimeWithin(units, unit) { var u = unit || 'day'; return units + ' ' + u + (String(units) === '1' ? '' : 's'); } function fmtInt(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ','); } function fmtParamLabel(k) { return k.replace(/_/g, ' ').replace(/\b[a-z]/g, function (c) { return c.toUpperCase(); }); } function fmtMoney(n) { var x = Number(n); if (x >= 1000000) return (x / 1000000).toFixed(x % 1000000 === 0 ? 0 : 1) + 'M'; if (x >= 1000) return Math.round(x / 1000) + 'k'; return String(x); } function escapeHtml(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return ({"&":"&","<":"<",">":">",'"':"""})[c]; }); } // ??? autocomplete with inline tag pills ???????????????????????????????? // Ports _ui/lib/components/modules/listing-search/search-input-v2.tsx to // vanilla JS. Selecting a suggestion adds an inline tag inside the input // shell (pushes input rightward, wraps to next row when dense). Each tag // carries the resolved {id, type} so the filter call gets the structural // `_ids` param. Multiple tags of the same type collapse to "Austin // +2 more" with an expandable dropdown that lets the user remove just one. var input = root.querySelector('[data-ls-search-input]'); var typeInput = root.querySelector('[data-ls-search-type]'); var suggestList = root.querySelector('[data-ls-search-suggestions]'); var tagsHost = root.querySelector('[data-ls-search-tags]'); var searchShell = root.querySelector('[data-ls-search-shell]'); var mlsIds = input ? (input.getAttribute('data-ls-search-mls-ids') || '') : rootMlsIds; var websiteId = input ? (input.getAttribute('data-ls-search-website-id') || '') : rootWebsiteId; // Map suggestion.type ? filter key prefix. Maps 1:1 to the SimpleV2 prepValues // fn at search-input-v2.tsx:245. Address picks navigate to /listings/{id} // directly and skip tagging entirely. var TYPE_TO_PARAM = { city: 'city_ids', zip: 'zip_code_ids', area: 'areas_major_ids', subdivision: 'subdivision_ids', school_district: 'school_district_ids', school_high: 'school_high_ids', school_elementary: 'school_elementary_ids', address: 'listing_ids', // Address picks become listing_ids tags. Same as SimpleV2 prepValues. listing: 'listing_ids' // OpenSearch returns 'listing' for MLS-number matches; treat as address. }; var TYPE_TO_PARAM_INVERSE = {}; Object.keys(TYPE_TO_PARAM).forEach(function (t) { TYPE_TO_PARAM_INVERSE[TYPE_TO_PARAM[t]] = t; }); // state.searchTags is the ordered list of selected suggestions. Each entry // is { id, type, name, type_title }. Filter params (state.params.city_ids etc) // are derived from this list whenever it changes. state.searchTags = []; var autoT = null, autoLastQ = ''; var groupDropdownOpenFor = null; // tag type currently showing the expanded list // ?? Per-city facet override ??????????????????????????????????????????????? // When one or more CITY tags are selected, the price histogram + count matrix // dropdowns swap from the global (MLS-wide) facets to the SUM of the selected // cities' facets (fetched from /handlers/front/listings-city-facets, cached per // city). Clearing all city tags reverts to the global facets. The price IIFE and // the matrix-reading code each listen for chl:listings-city-facets-changed and // rebuild their local data from cityFacets (or the global JSON host when null). var cityFacets = { hist: null, matrix: null }; // null => use globals var cityFacetCache = {}; // city_id -> { price_histogram, count_matrix } function refreshCityFacets() { var cityTags = state.searchTags.filter(function (t) { return t.type === 'city'; }); if (!cityTags.length) { if (cityFacets.hist !== null || cityFacets.matrix !== null) { cityFacets.hist = null; cityFacets.histRental = null; cityFacets.matrix = null; document.dispatchEvent(new CustomEvent('chl:listings-city-facets-changed')); } return; } // Fetch any not-yet-cached cities in parallel, then merge all selected cities. var need = cityTags.filter(function (t) { return !cityFacetCache[t.id]; }); var fetches = need.map(function (t) { return fetch('/handlers/front/listings-city-facets', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ city_id: t.id, mls_ids: mlsIds, website_id: websiteId }) }).then(function (r) { return r.json(); }).then(function (data) { cityFacetCache[t.id] = { price_histogram: (data && data.price_histogram) || [], rental_price_histogram: (data && data.rental_price_histogram) || [], count_matrix: (data && data.count_matrix) || [] }; }).catch(function () { cityFacetCache[t.id] = { price_histogram: [], rental_price_histogram: [], count_matrix: [] }; }); }); Promise.all(fetches).then(function () { // Merge (sum) across all currently-selected city tags. var histAcc = {}; // bucket_index -> count (sale) var histRentalAcc = {}; // bucket_index -> count (rental) var matrixAcc = {}; // "t-s-st" -> [t,s,st,count] state.searchTags.filter(function (t) { return t.type === 'city'; }).forEach(function (t) { var f = cityFacetCache[t.id]; if (!f) return; (f.price_histogram || []).forEach(function (r) { if (!r || r.length < 4) return; histAcc[r[0]] = (histAcc[r[0]] || 0) + (r[3] || 0); }); (f.rental_price_histogram || []).forEach(function (r) { if (!r || r.length < 4) return; histRentalAcc[r[0]] = (histRentalAcc[r[0]] || 0) + (r[3] || 0); }); (f.count_matrix || []).forEach(function (r) { if (!r || r.length < 4) return; var k = r[0] + '-' + r[1] + '-' + r[2]; if (!matrixAcc[k]) matrixAcc[k] = [r[0], r[1], r[2], 0]; matrixAcc[k][3] += (r[3] || 0); }); }); cityFacets.hist = histAcc; cityFacets.histRental = histRentalAcc; cityFacets.matrix = Object.keys(matrixAcc).map(function (k) { return matrixAcc[k]; }); document.dispatchEvent(new CustomEvent('chl:listings-city-facets-changed')); }); } if (input && suggestList && typeInput) { input.addEventListener('input', function () { // Typing updates the suggestion dropdown ONLY — it does NOT run a search. // The primary path is picking a dropdown suggestion (which becomes a tag); // a raw free-text search is committed only on Enter (see keydown below). // We do NOT clear existing tags here — those persist until the user — them. var q = input.value.trim(); if (q === autoLastQ) return; autoLastQ = q; clearTimeout(autoT); if (q.length < 2) { suggestList.hidden = true; suggestList.innerHTML = ''; // Emptying the box clears a previously-committed free-text search (tags survive). if (state.params.search) { delete state.params.search; delete state.params.search_type; renderPills(); scheduleRefetch(); } return; } // Only refresh the suggestion dropdown — no state.params.search, no refetch. autoT = setTimeout(function () { fetchSuggestions(q); }, 300); }); input.addEventListener('keydown', function (e) { // Backspace on an empty input pops the most recent tag — matches the // common pill-input UX (Gmail recipients, Slack channel pickers, etc). if (e.key === 'Backspace' && input.value === '' && state.searchTags.length > 0) { removeSearchTag(state.searchTags[state.searchTags.length - 1]); } else if (e.key === 'Escape') { suggestList.hidden = true; } else if (e.key === 'Enter') { e.preventDefault(); // Enter = explicit submit (desktop Enter / mobile "Go"/"Search" key). // Commit the typed text as a raw free-text search NOW, then refetch. var q = input.value.trim(); suggestList.hidden = true; if (q.length >= 2) { state.params.search = q; delete state.params.search_type; // raw free-text, not a typed entity renderPills(); scheduleRefetch(); } else if (state.params.search) { delete state.params.search; delete state.params.search_type; renderPills(); scheduleRefetch(); } } }); input.addEventListener('blur', function () { setTimeout(function () { suggestList.hidden = true; }, 150); }); // Clicking anywhere in the shell focuses the actual input — matches // SimpleV2's "onClick on the content wrapper" behavior. if (searchShell) { searchShell.addEventListener('click', function (e) { // Don't steal focus when the click was on a tag's — or a tag itself if ((e.target).closest && (e.target).closest('[data-ls-search-tag],[data-ls-save-search],[data-ls-search-suggestions]')) return; input.focus(); }); } } function fetchSuggestions(q) { fetch('/handlers/front/listings-search-autocomplete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ search: q, mls_ids: mlsIds, website_id: websiteId, // Pass current filter state so the server can score / scope correctly. filters: state.params, }) }).then(function (r) { return r.json(); }).then(function (data) { if (!data || data.result !== 1 || !Array.isArray(data.results)) return; renderSuggestions(data.results); }).catch(function () { }); } function renderSuggestions(results) { suggestList.innerHTML = ''; // Filter out anything already selected. var selectedIds = {}; state.searchTags.forEach(function (t) { selectedIds[t.type + ':' + t.id] = 1; }); var filtered = results.filter(function (s) { return !selectedIds[s.type + ':' + s.id]; }); if (!filtered.length) { suggestList.hidden = true; return; } filtered.slice(0, 8).forEach(function (s) { var li = document.createElement('li'); li.setAttribute('role', 'option'); var header = document.createElement('div'); header.setAttribute('data-suggestion-header', ''); var n = document.createElement('span'); n.setAttribute('data-suggestion-name', ''); n.textContent = s.name; header.appendChild(n); if (s.listings_count != null || s.listings_count_prime != null) { var c = document.createElement('span'); c.setAttribute('data-suggestion-count', ''); var count = s.listings_count_prime != null ? s.listings_count_prime : s.listings_count; c.textContent = fmtInt(count) + ' homes'; header.appendChild(c); } li.appendChild(header); if (s.type_title || s.listing_mls) { var sub = document.createElement('div'); sub.setAttribute('data-suggestion-sub', ''); var t = document.createElement('span'); t.setAttribute('data-suggestion-type', ''); t.textContent = s.type_title || s.type || ''; sub.appendChild(t); if (s.listing_mls) { var mls = document.createElement('span'); // Needs an attribute or no rule can reach it — it previously rendered // at the inherited body size next to the 11px [data-suggestion-type]. mls.setAttribute('data-suggestion-mls', ''); mls.textContent = ' · MLS #' + s.listing_mls; sub.appendChild(mls); } li.appendChild(sub); } li.addEventListener('mousedown', function (e) { e.preventDefault(); handleSelectSuggestion(s); }); suggestList.appendChild(li); }); suggestList.hidden = false; } /* __chl_search_pills_v1__ */ /* ?? CHL search pill-tabs + focus-shows-featured (injected) ?????????????????? Inserted INSIDE the block's search closure, right after renderSuggestions is defined, so `renderSuggestions` and `input` are in scope. Adds focus-shows- featured (Cities|Areas|Zips pills, Cities default) and, on typed results, an All| pill row with per-type counts. Wraps renderSuggestions so the pill layer applies to the block's own item rendering (works for both the ListingSearch and Hero search implementations). */ (function () { var _input = (typeof input !== 'undefined' && input) ? input : document.querySelector('[data-ls-search-input]'); if (!_input) return; var _list = _input.parentNode.querySelector('[data-ls-search-suggestions]') || (_input.closest('[data-listingsearch-root],form,label') || document).querySelector('[data-ls-search-suggestions]'); if (!_list || typeof renderSuggestions !== 'function') return; var _mlsIds = _input.getAttribute('data-ls-search-mls-ids') || ''; var _websiteId = _input.getAttribute('data-ls-search-website-id') || ''; // The pill row lives INSIDE the suggestions

tags. x.innerHTML = ''; x.setAttribute('aria-label', 'Remove filter'); x.addEventListener('click', function (e) { e.stopPropagation(); removeParam(k); }); pill.appendChild(x); pillsHost.appendChild(pill); }); // Map-search bounds render as ONE "Map Search" pill (not four // separate gps_* pills). Its x clears all four bounds at once. if (state.params.gps_nw_lat != null && state.params.gps_se_lat != null) { var mPill = document.createElement('span'); mPill.setAttribute('data-ls-pill', ''); mPill.setAttribute('data-ls-pill-key', 'gps_bounds'); mPill.appendChild(document.createTextNode('Map Boundary')); var mx = document.createElement('span'); mx.setAttribute('data-ls-pill-x', ''); mx.innerHTML = ''; mx.setAttribute('aria-label', 'Clear map boundary'); mx.addEventListener('click', function (e) { e.stopPropagation(); clearMapBounds(); }); mPill.appendChild(mx); pillsHost.appendChild(mPill); } // Clear-all link once the row gets dense. Threshold = 3 because with 1 or // 2 pills the individual — buttons are still the natural action. The link // iterates removeParam() over every non-baseline key, which already // resets each picker label + debounces the refetch — net result is a // single refetch tick despite the loop. // Threshold 2: with a single pill its own x IS the clear action, so the link // beside it is redundant. if (pillsHost.childElementCount >= 2) { var clearLink = document.createElement('button'); clearLink.type = 'button'; clearLink.setAttribute('data-ls-pills-clear', ''); clearLink.textContent = 'Clear filters'; clearLink.addEventListener('click', function (e) { e.stopPropagation(); var keep = { limit: 1, offset: 1, photo_required: 1, property_status_ids: 1, sort_field: 1, sort_direction: 1, mls_ids: 1, search_type: 1, website_id: 1, scopes: 1, scopes_available: 1, website_id_featured: 1, agent_id: 1 }; Object.keys(state.params).slice().forEach(function (k) { if (!keep[k]) removeParam(k); }); }); pillsHost.appendChild(clearLink); } } function removeParam(k) { delete state.params[k]; if (k === 'property_type_statuses') { // Reset the whole couple selection to default (all types x default // statuses) — buildFetchParams supplies that when coupleUI is empty. if (typeof coupleSync === 'function') coupleSync([], []); if (typeof ptpsRefreshAll === 'function') ptpsRefreshAll(); return; } if (k === 'property_structure_ids') { if (typeof ptpsRefreshAll === 'function') ptpsRefreshAll(); return; } if (k === 'beds_min' || k === 'baths_min') { document.dispatchEvent(new CustomEvent('chl:listings-bb-refresh')); } else if (k === 'area_min' || k === 'area_max') { // The sqft slider owns area_min/area_max; let it re-sync thumbs, inputs, // suggestions and the trigger label after the param is cleared. document.dispatchEvent(new CustomEvent('chl:listings-sqft-refresh')); } else if (k === 'cost_min' || k === 'cost_max') { // The price slider owns cost_min/cost_max now; let it re-sync its thumbs, // inputs, bars, and the trigger label after the param is cleared. document.dispatchEvent(new CustomEvent('chl:listings-price-refresh')); } else if (k === 'date_created_min_units' || k === 'date_updated_min_units' || k === 'date_audit_log_change_cost_min_units') { delete state.params[k.replace('_units', '_unit')]; var tSel = root.querySelector('[data-ls-time-select="' + k.replace('_min_units', '') + '"]'); if (tSel) tSel.value = ''; } else if (BOOLEAN_FEATURES[k]) { var menuBtn = root.querySelector('[data-ls-feature="' + k + '"]'); if (menuBtn && menuBtn.parentElement) menuBtn.parentElement.style.display = ''; } else if (AMENITY_SELECTS[k]) { amenitySelectReset(k); } else if (TYPE_TO_PARAM_INVERSE[k]) { // Pill row — on a location filter ? clear ALL inline tags of that type. var tagType = TYPE_TO_PARAM_INVERSE[k]; state.searchTags = state.searchTags.filter(function (t) { return t.type !== tagType; }); applySearchTagsToParams(); renderSearchTags(); } else if (k === 'search') { if (input) input.value = ''; autoLastQ = ''; delete state.params.search; delete state.params.search_type; if (typeInput) typeInput.value = ''; } else if (k === 'gps_polygon') { // Removing the polygon pill (the "Drawn area" pill's X) tells the map // widget to clear the drawn shape. The widget synchronously writes its // CURRENT viewport corners into req.bounds (dispatchEvent is sync), so we // can replace the drawn area with a "Map Search" filter anchored to where // the map sits right now — the map holds still instead of re-fitting. var req = { bounds: null }; document.dispatchEvent(new CustomEvent('chl:listings-map-clear-shape', { detail: req })); if (req.bounds && req.bounds.gps_nw_lat != null && req.bounds.gps_se_lat != null) { state.params.gps_nw_lat = req.bounds.gps_nw_lat; state.params.gps_nw_lng = req.bounds.gps_nw_lng; state.params.gps_se_lat = req.bounds.gps_se_lat; state.params.gps_se_lng = req.bounds.gps_se_lng; _lsBoundsActive = true; } } renderPills(); scheduleRefetch(); } // ??? mobile view toggle ????????????????????????????????????????????????? root.querySelectorAll('[data-ls-mobile-view-set]').forEach(function (btn) { btn.addEventListener('click', function () { var v = btn.getAttribute('data-ls-mobile-view-set'); root.setAttribute('data-ls-mobile-view', v); root.querySelectorAll('[data-ls-mobile-view-set]').forEach(function (b) { b.setAttribute('data-active', b === btn ? '1' : '0'); }); }); }); // ??? refetch ???????????????????????????????????????????????????????????? function scheduleRefetch() { clearTimeout(state.debounceT); state.debounceT = setTimeout(refetch, 250); } /* __chl_filters_extra_v1__ */ /* ?? CHL: Featured (website-scoped) toggle + numeric range filters ??????????? Featured checkbox sets state.params.website_id = the block's website id, which scopes the listings-filter to this website's listings (presence of website_id is what the backend keys on after initial load). Range rows (Year Built / Acres / Stories) write {field}_min / {field}_max into state.params. All ride buildFetchParams()'s Object.assign(state.params) automatically. The range rows are server-gated by listings.schemas.filters_passing. (present-count driven), so they only render when the MLS actually populates the field. */ (function () { if (typeof state === 'undefined' || typeof scheduleRefetch !== 'function') return; var wid = (typeof rootWebsiteId !== 'undefined' && rootWebsiteId) ? rootWebsiteId : (root.getAttribute('data-ls-website-id') || ''); /* Form-input adapter. The filter fields are authored as data-ch-input placeholders and server-rendered by the website_inputs system, which REPLACES the placeholder markup wholesale — only name= survives onto the control. Re-stamp the data-ls-* hooks by name here so every existing binder, clear-pill path, and prefill below works unchanged, and translate the select option codes back into the "units|unit" values the time binder expects (pipe can't ride the pipe-delimited options attrs). */ var TIME_CODES = { '1d': '1|day', '3d': '3|day', '5d': '5|day', '7d': '7|day', '14d': '14|day', '30d': '30|day', '60d': '60|day', '90d': '90|day', '6m': '6|month', '1y': '1|year', '2y': '2|year' }; ['date_created', 'date_updated', 'date_audit_log_change_cost'].forEach(function (field) { var sel = root.querySelector('select[name="ls_time_' + field + '"]'); if (!sel) return; sel.setAttribute('data-ls-time-select', field); for (var i = 0; i < sel.options.length; i++) { var o = sel.options[i]; if (o.value === 'any') o.value = ''; else if (TIME_CODES[o.value]) o.value = TIME_CODES[o.value]; } }); ['year_built_min', 'year_built_max', 'acres_min', 'acres_max', 'stories_min', 'stories_max'].forEach(function (key) { var input = root.querySelector('input[name="' + key + '"]'); if (!input) return; input.setAttribute('data-ls-range-input', key); input.setAttribute('inputmode', key.indexOf('acres') === 0 ? 'decimal' : 'numeric'); }); var featEl = root.querySelector('[data-ls-featured-row] input[name="ls_featured"]'); if (featEl) featEl.setAttribute('data-ls-featured-input', ''); // Featured / website-scoped toggle. var featuredInput = root.querySelector('[data-ls-featured-input]'); if (featuredInput && wid) { // Reflect any pre-existing scope. featuredInput.checked = !!state.params.website_id; featuredInput.addEventListener('change', function () { if (featuredInput.checked) { state.params.website_id = wid; } else { delete state.params.website_id; } if (typeof renderPills === 'function') renderPills(); scheduleRefetch(); }); } // Numeric range inputs: year_built / acres / stories (min + max). function commitRange(input) { var key = input.getAttribute('data-ls-range-input'); if (!key) return; var raw = (input.value || '').replace(/[^0-9.]/g, ''); if (raw === '' || isNaN(parseFloat(raw))) { delete state.params[key]; } else { state.params[key] = raw; } if (typeof renderPills === 'function') renderPills(); scheduleRefetch(); } root.querySelectorAll('[data-ls-range-input]').forEach(function (input) { // Pre-fill from existing state. var key = input.getAttribute('data-ls-range-input'); if (key && state.params[key] != null) input.value = state.params[key]; input.addEventListener('change', function () { commitRange(input); }); input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); commitRange(input); } }); // Don't let clicks inside the inputs bubble up and close the menu. input.addEventListener('mousedown', function (e) { e.stopPropagation(); }); input.addEventListener('click', function (e) { e.stopPropagation(); }); }); // Time filters: Listed / Updated / Price Drop Within. Each

Properties in Kihei

No listings match those filters

Properties in Kihei

No listings match those filters