https://empop.online/bundles/empopclient/js/article_loader.js

1/*jslint browser: true, devel: true, ass: true, continue: true, eqeq: true, plusplus: true, vars: true, white: true */
2
3vxJS.event.addDomReadyListener(function() {
4
5	"use strict";
6
7	var entries, l, 
8		moreButton = document.getElementById("loadMore"),
9		xhr = vxJS.xhr(), throbberSize,
10		throbber = (function() {
11			var d = "div".setProp("className", "vxJS_xhrThrobber").create();
12			vxJS.dom.getBody().appendChild(d);
13			return d;
14		}());
15
16	var disableButton = function() {
17		moreButton.disabled = true;
18		vxJS.dom.addClassName(moreButton, "disabled");
19	};
20	
21	var appendReadMore = function(elem) {
22		var more, listenerId;
23
24		elem = elem.firstElementChild;
25
26		if(elem.scrollHeight > vxJS.dom.getElementSize(elem).y) {
27
28			// add button
29
30			more = "a".setProp("class", "readMore").create("read more");
31
32			elem.parentNode.insertBefore(more, elem.nextSibling);
33
34			// remove element and clean up listener upon click
35
36			listenerId = vxJS.event.addListener(more, "click", function() {
37				vxJS.event.removeListener(listenerId);
38				more.parentNode.removeChild(more);
39				elem.style.maxHeight = "none";
40			});
41		}
42	};
43
44	var renderResponse = function() {
45		var r = this.response, articles, i, l, appendAfter, className = Object.keys(r)[0];
46
47		if(r.noMore) {
48			disableButton();
49		}
50
51		if((articles  = r[className]) && (l = articles.length)) {
52
53			for(i = 0; i < l; ++i) {
54				appendAfter = vxJS.dom.getElementsByClassName(className).pop();
55				appendAfter.parentNode.insertBefore(
56					"div".setProp("class", className).create(
57						vxJS.dom.parse(articles[i])
58					),
59					appendAfter.nextSibling
60				);
61				appendReadMore(appendAfter.nextSibling);
62			}
63
64		}
65	};
66
67	var locateThrobber = function(elem) {
68		var	p = vxJS.dom.getElementOffset(elem), s = vxJS.dom.getElementSize(elem);
69
70		if(!throbberSize) {
71			throbber.style.display = "block";
72			throbberSize = vxJS.dom.getElementSize(throbber);
73			throbber.style.display = "";
74		}
75
76		p.x += s.x+4;
77		p.y += (s.y-throbberSize.y)/2;
78		vxJS.dom.setElementPosition(throbber, p);
79	};
80
81	if(moreButton) {
82		vxJS.event.addListener(moreButton, "click", function() {
83			var count = vxJS.dom.getElementsByClassName("newsEntry").length;
84			if(count) {
85				locateThrobber(this);
86				xhr.use(null, { from: count }, { node: throbber }).submit();
87			}
88			else {
89				disableButton();
90			}
91		});
92
93		vxJS.event.addListener(xhr, "complete", renderResponse);
94	}
95	
96	// prime initial list of articles on page
97
98	entries = document.querySelectorAll(".newsEntry");
99	l = entries.length;
100	
101	while(l--) {
102		appendReadMore(entries[l]);
103	}
104	
105});