← All changes | assets/js/script.js +12 -52 3.1.13 → 3.1.9 View file →

		@@ -165,9 +165,9 @@
165	165	*
166	166	* @param element
167	167	* @param animation Either "fade" or "slide"
168	168	*/
169		-function toggle(element, animation, callbackFn) {
	169	+function toggle(element, animation) {
170	170	var nowVisible = element.style.display != 'none' || element.offsetLeft > 0;
171	171
172	172	// create clone for reference
173	173	var clone = element.cloneNode(true);
		@@ -174,11 +174,8 @@
174	174	var cleanup = function cleanup() {
175	175	element.removeAttribute('data-animated');
176	176	element.setAttribute('style', clone.getAttribute('style'));
177	177	element.style.display = nowVisible ? 'none' : '';
178		- if (callbackFn) {
179		- callbackFn();
180		- }
181	178	};
182	179
183	180	// store attribute so everyone knows we're animating this element
184	181	element.setAttribute('data-animated', "true");
		@@ -292,9 +289,9 @@
292	289	'rehide': false,
293	290	'content': '',
294	291	'cookie': null,
295	292	'icon': '&times',
296		- 'screenWidthCondition': null,
	293	+ 'minimumScreenWidth': 0,
297	294	'position': 'center',
298	295	'testMode': false,
299	296	'trigger': false,
300	297	'closable': true
		@@ -349,9 +346,8 @@
349	346	this.triggered = false;
350	347	this.triggerHeight = 0;
351	348	this.cookieSet = false;
352	349	this.element = null;
353		- this.contentElement = null;
354	350	this.closeIcon = null;
355	351
356	352	// if a trigger was given, calculate values once and store
357	353	if (this.config.trigger) {
		@@ -413,17 +409,14 @@
413	409
414	410	// remove <script> from box content and append them to the document body
415	411	var scripts = content.querySelectorAll('script');
416	412	if (scripts.length) {
	413	+ var script = document.createElement('script');
417	414	for (var i = 0; i < scripts.length; i++) {
418		- var script = document.createElement('script');
419		- if (scripts[i].src) {
420		- script.src = scripts[i].src;
421		- }
422	415	script.appendChild(document.createTextNode(scripts[i].text));
423	416	scripts[i].parentNode.removeChild(scripts[i]);
424		- document.body.appendChild(script);
425	417	}
	418	+ document.body.appendChild(script);
426	419	}
427	420
428	421	if (this.config.closable && this.config.icon) {
429	422	var closeIcon = document.createElement('span');
		@@ -433,9 +426,8 @@
433	426	this.closeIcon = closeIcon;
434	427	}
435	428
436	429	document.body.appendChild(wrapper);
437		- this.contentElement = content;
438	430	this.element = box;
439	431	};
440	432
441	433	// set (calculate) custom box styling depending on box options
		@@ -504,14 +496,9 @@
504	496	this.overlay.classList.toggle('boxzilla-' + this.id + '-overlay');
505	497	Animator.toggle(this.overlay, "fade");
506	498	}
507	499
508		- Animator.toggle(this.element, this.config.animation, function () {
509		- if (this.visible) {
510		- return;
511		- }
512		- this.contentElement.innerHTML = this.contentElement.innerHTML;
513		- }.bind(this));
	500	+ Animator.toggle(this.element, this.config.animation);
514	501
515	502	return true;
516	503	};
517	504
		@@ -559,21 +546,13 @@
559	546	return false;
560	547	};
561	548
562	549	Box.prototype.fits = function () {
563		- if (!this.config.screenWidthCondition || !this.config.screenWidthCondition.value) {
	550	+ if (this.config.minimumScreenWidth <= 0) {
564	551	return true;
565	552	}
566	553
567		- switch (this.config.screenWidthCondition.condition) {
568		- case "larger":
569		- return window.innerWidth > this.config.screenWidthCondition.value;
570		- case "smaller":
571		- return window.innerWidth < this.config.screenWidthCondition.value;
572		- }
573		-
574		- // meh.. condition should be "smaller" or "larger", just return true.
575		- return true;
	554	+ return window.innerWidth > this.config.minimumScreenWidth;
576	555	};
577	556
578	557	// is this box enabled?
579	558	Box.prototype.mayAutoShow = function () {
		@@ -761,8 +740,9 @@
761	740	function checkHeightCriteria() {
762	741
763	742	var scrollY = scrollElement.hasOwnProperty('scrollY') ? scrollElement.scrollY : scrollElement.scrollTop;
764	743	scrollY = scrollY + window.innerHeight * 0.75;
	744	+ console.log(scrollY);
765	745
766	746	boxes.forEach(function (box) {
767	747	if (!box.mayAutoShow() || box.triggerHeight <= 0) {
768	748	return;
		@@ -792,12 +772,12 @@
792	772	function onOverlayClick(e) {
793	773	var x = e.offsetX;
794	774	var y = e.offsetY;
795	775
796		- // calculate if click was less than 40px outside box to avoid closing it by accident
	776	+ // calculate if click was near a box to avoid closing it (click error margin)
797	777	boxes.forEach(function (box) {
798	778	var rect = box.element.getBoundingClientRect();
799		- var margin = 40;
	779	+ var margin = 100 + window.innerWidth * 0.05;
800	780
801	781	// if click was not anywhere near box, dismiss it.
802	782	if (x < rect.left - margin || x > rect.right + margin || y < rect.top - margin || y > rect.bottom + margin) {
803	783	box.dismiss();
		@@ -849,21 +829,11 @@
849	829	}
850	830	}
851	831
852	832	function onElementClick(e) {
853		- // find <a> element in up to 3 parent elements
854	833	var el = e.target || e.srcElement;
855		- var depth = 3;
856		- for (var i = 0; i <= depth; i++) {
857		- if (!el || el.tagName === 'A') {
858		- break;
859		- }
860		-
861		- el = el.parentElement;
862		- }
863		-
864		- if (el && el.tagName === 'A' && el.getAttribute('href').toLowerCase().indexOf('#boxzilla-') === 0) {
865		- var boxId = el.getAttribute('href').toLowerCase().substring("#boxzilla-".length);
	834	+ if (el && el.tagName === 'A' && el.getAttribute('href').indexOf('#boxzilla-') === 0) {
	835	+ var boxId = e.target.getAttribute('href').substring("#boxzilla-".length);
866	836	Boxzilla.toggle(boxId);
867	837	}
868	838	}
869	839
		@@ -940,17 +910,8 @@
940	910	*
941	911	* @returns Box
942	912	*/
943	913	Boxzilla.create = function (id, opts) {
944		-
945		- // preserve backwards compat for minimumScreenWidth option
946		- if (typeof opts.minimumScreenWidth !== "undefined") {
947		- opts.screenWidthCondition = {
948		- condition: "larger",
949		- value: opts.minimumScreenWidth
950		- };
951		- }
952		-
953	914	var box = new Box(id, opts);
954	915	boxes.push(box);
955	916	return box;
956	917	};
		@@ -1010,9 +971,8 @@
1010	971
1011	972	// expose each individual box.
1012	973	Boxzilla.boxes = boxes;
1013	974
1014		-// expose boxzilla object
1015	975	window.Boxzilla = Boxzilla;
1016	976
1017	977	if (typeof module !== 'undefined' && module.exports) {
1018	978	module.exports = Boxzilla;