https://www.savills.com.vn/_js/blog-listing.js

1// Get reference to Blog Filters form
2var listingForm = function listingForm() {
3  return document.getElementById('js-blog-listing');
4};
5
6// Get reference to Blog Listing container
7var listingResults = function listingResults() {
8  return document.getElementById('BlogListingContainer');
9};
10
11// Get reference to Pagination container
12var paginationContainer = function paginationContainer() {
13  return document.getElementById('js-blog-pagination');
14};
15
16// Get reference to AuthorFilter
17var authorFilter = function authorFilter() {
18  return document.getElementById('AuthorFilter');
19};
20
21// Get reference to AuthorFilterOverlay
22var authorFilterOverlay = function authorFilterOverlay() {
23  return document.getElementById('AuthorFilterOverlay');
24};
25
26// Get selectedIndex of given (select) element
27var dropdownValue = function dropdownValue(element) {
28  var e = document.getElementById(element);
29  return e.options[e.selectedIndex].value;
30};
31
32var dropdownOverlayValue = function dropdownValue(element) {
33  var e = document.getElementById(element);
34  return e.options[e.selectedIndex].value;
35};
36
37// Generate a querystring based on filter selections and the given page
38var generateQuery = function generateQuery (page) {
39  // Grab selected values from our dropdowns plus any query entered
40  var selected_category = dropdownValue('PrimaryCategoryFilter');
41  var author = dropdownValue('AuthorFilter');
42  var query = document.getElementById('QueryFilter');
43
44  // Build array of QueryString values
45  var output = [];
46
47  if (selected_category)
48    output.push('p=' + encodeURIComponent(selected_category));
49
50  if (author)
51    output.push('a=' + encodeURIComponent(author));
52
53  if (query.value)
54    output.push('q=' + encodeURIComponent(query.value));
55
56  if (page > 1)
57    output.push('page=' + page);
58
59  // Complete QueryString syntax if not empty
60  return (output.length) ? '?' + output.join('&') : '';
61};
62
63// Fetch results for a given page and update the author pool at the same time
64var updateBlogListing = function updateBlogListing (page, reload) {
65  if (reload && 'replaceState' in history)
66    history.replaceState(null, null, '/insight-and-opinion/the-savills-blog.aspx' + generateQuery(page));
67
68  listingResults().innerHTML = '<div class="sv-loading"><span class="sv-busy">Loading</span></div>';
69
70  var queryString = generateQuery(page);
71
72  authorFilter().innerHTML = '<div class="sv-loading"><span class="sv-busy">Loading</span></div>';
73  authorFilterOverlay().innerHTML = '<div class="sv-loading"><span class="sv-busy">Loading</span></div>';
74
75  fetch('/_vx/sv-BlogListingFilterAuthors.aspx' + queryString)
76  .then(function (r) { return r.text(); })
77  .then(function (t) {
78    authorFilter().innerHTML = t;
79  });
80
81  fetch('/_vx/sv-BlogListingFilterAuthorsOverlay.aspx' + queryString)
82  .then(function (r) { return r.text(); })
83  .then(function (t) {
84    authorFilterOverlay().innerHTML = t;
85  });
86
87  fetch('/_vx/sv-BlogListing.aspx' + queryString)
88  .then(function (r) { return r.text(); })
89  .then(function (t) {
90    listingResults().innerHTML = t;
91    updatePagination();
92  });
93};
94
95var updateResultCount = function updateResultCount (count, displayed) {
96  var counters = document.querySelectorAll('.js-result-count');
97  for (var i = 0, j = counters.length; i < j; i++) {
98    counters[i].textContent = 'Displaying ' + displayed + ' of ' + count;
99  }
100};
101
102var updatePagination = function updatePagination () {
103  var pages = paginationContainer();
104  if (pages) {
105    pages.addEventListener('click', function (event) {
106      event.preventDefault();
107      var link = event.target,
108      page = link.getAttribute('data-pageno');
109
110      if (page) {
111        updateBlogListing(page, true);
112        document.getElementById('js-blog-listing').scrollIntoView();
113      }
114    }, true);
115
116    var total = pages.getAttribute('data-result-count'),
117    displayed = listingResults().querySelectorAll('div.sv-result-item').length;
118
119    updateResultCount(total, displayed);
120  }
121}
122
123listingForm().addEventListener('submit', function (event) {
124  event.preventDefault();
125  updateBlogListing(1, true);
126}, false);
127
128document.getElementById('AuthorFilter').addEventListener('change', function (event) {
129  updateBlogListing(1, true);
130}, false);
131
132document.getElementById('PrimaryCategoryFilterOverlay').addEventListener('click', function (e) {
133  var selected_category = e.target.getAttribute('data-sv-value');
134
135  var queryString = (selected_category) ? 
136    '?p=' + encodeURIComponent(selected_category)
137    : '';
138
139  authorFilter().innerHTML = '<div class="sv-loading"><span class="sv-busy">Loading</span></div>';
140  authorFilterOverlay().innerHTML = '<div class="sv-loading"><span class="sv-busy">Loading</span></div>';
141
142  fetch('/_vx/sv-BlogListingFilterAuthors.aspx' + queryString)
143  .then(function (r) { return r.text(); })
144  .then(function (t) {
145    authorFilter().innerHTML = t;
146  });
147
148  fetch('/_vx/sv-BlogListingFilterAuthorsOverlay.aspx' + queryString)
149  .then(function (r) { return r.text(); })
150  .then(function (t) {
151    authorFilterOverlay().innerHTML = t;
152  });
153}, false);
154
155updateBlogListing(1, false);
156
157//if (!Array.from) Array.from = function (enumerable) { return [].slice.call(enumerable); };
158
159//Array.from(document.querySelectorAll('.sv-select__options')).forEac

159h(function (dropdown) {
160    //var label = dropdown.parentNode.querySelector('.sv-select__value');
161    //Array.from(dropdown.querySelectorAll('.sv-select__option.sv--active')).forEach(function (opt) {
162    //  return label.textContent = opt.textContent;
163    //});
164//});