← All changes | assets/js/script.js +30 -69 3.1.14 → 3.1.9 View file →

		@@ -11,8 +11,16 @@
11	11
12	12	// expose Boxzilla object to window
13	13	window.Boxzilla = Boxzilla;
14	14
	15	+ function ready(fn) {
	16	+ if (document.readyState != 'loading') {
	17	+ fn();
	18	+ } else {
	19	+ document.addEventListener('DOMContentLoaded', fn);
	20	+ }
	21	+ }
	22	+
15	23	// helper function for setting CSS styles
16	24	function css(element, styles) {
17	25	if (styles.background_color) {
18	26	element.style.background = styles.background_color;
		@@ -80,9 +88,15 @@
80	88	box.element.firstChild.firstChild.className += " first-child";
81	89	box.element.firstChild.lastChild.className += " last-child";
82	90	}
83	91
84		- // set flag to prevent initialising twice
	92	+ /**
	93	+ * If a MailChimp for WordPress form was submitted, open the box containing that form (if any)
	94	+ *
	95	+ * TODO: Just set location hash from MailChimp for WP?
	96	+ */
	97	+ window.addEventListener('load', openMailChimpForWordPressBox);
	98	+
85	99	options.inited = true;
86	100
87	101	// trigger "done" event.
88	102	Boxzilla.trigger('done');
		@@ -104,10 +118,10 @@
104	118	}
105	119	}
106	120	}
107	121
108		- window.addEventListener('load', openMailChimpForWordPressBox);
109		- createBoxesFromConfig();
	122	+ // create boxes as soon as document.ready fires
	123	+ ready(createBoxesFromConfig);
110	124	})();
111	125
112	126	},{"boxzilla":4}],2:[function(require,module,exports){
113	127	'use strict';
		@@ -151,9 +165,9 @@
151	165	*
152	166	* @param element
153	167	* @param animation Either "fade" or "slide"
154	168	*/
155		-function toggle(element, animation, callbackFn) {
	169	+function toggle(element, animation) {
156	170	var nowVisible = element.style.display != 'none' || element.offsetLeft > 0;
157	171
158	172	// create clone for reference
159	173	var clone = element.cloneNode(true);
		@@ -160,11 +174,8 @@
160	174	var cleanup = function cleanup() {
161	175	element.removeAttribute('data-animated');
162	176	element.setAttribute('style', clone.getAttribute('style'));
163	177	element.style.display = nowVisible ? 'none' : '';
164		- if (callbackFn) {
165		- callbackFn();
166		- }
167	178	};
168	179
169	180	// store attribute so everyone knows we're animating this element
170	181	element.setAttribute('data-animated', "true");
		@@ -183,14 +194,8 @@
183	194
184	195	if (!nowVisible) {
185	196	var computedStyles = window.getComputedStyle(element);
186	197	visibleStyles = copyObjectProperties(["height", "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"], computedStyles);
187		-
188		- // in some browsers, getComputedStyle returns "auto" value. this falls back to getBoundingClientRect() in those browsers since we need an actual height.
189		- if (!isFinite(visibleStyles.height)) {
190		- var clientRect = element.getBoundingClientRect();
191		- visibleStyles.height = clientRect.height;
192		- }
193	198	css(element, hiddenStyles);
194	199	}
195	200
196	201	// don't show a scrollbar during animation
		@@ -284,9 +289,9 @@
284	289	'rehide': false,
285	290	'content': '',
286	291	'cookie': null,
287	292	'icon': '&times',
288		- 'screenWidthCondition': null,
	293	+ 'minimumScreenWidth': 0,
289	294	'position': 'center',
290	295	'testMode': false,
291	296	'trigger': false,
292	297	'closable': true
		@@ -341,9 +346,8 @@
341	346	this.triggered = false;
342	347	this.triggerHeight = 0;
343	348	this.cookieSet = false;
344	349	this.element = null;
345		- this.contentElement = null;
346	350	this.closeIcon = null;
347	351
348	352	// if a trigger was given, calculate values once and store
349	353	if (this.config.trigger) {
		@@ -405,17 +409,14 @@
405	409
406	410	// remove <script> from box content and append them to the document body
407	411	var scripts = content.querySelectorAll('script');
408	412	if (scripts.length) {
	413	+ var script = document.createElement('script');
409	414	for (var i = 0; i < scripts.length; i++) {
410		- var script = document.createElement('script');
411		- if (scripts[i].src) {
412		- script.src = scripts[i].src;
413		- }
414	415	script.appendChild(document.createTextNode(scripts[i].text));
415	416	scripts[i].parentNode.removeChild(scripts[i]);
416		- document.body.appendChild(script);
417	417	}
	418	+ document.body.appendChild(script);
418	419	}
419	420
420	421	if (this.config.closable && this.config.icon) {
421	422	var closeIcon = document.createElement('span');
		@@ -425,9 +426,8 @@
425	426	this.closeIcon = closeIcon;
426	427	}
427	428
428	429	document.body.appendChild(wrapper);
429		- this.contentElement = content;
430	430	this.element = box;
431	431	};
432	432
433	433	// set (calculate) custom box styling depending on box options
		@@ -496,14 +496,9 @@
496	496	this.overlay.classList.toggle('boxzilla-' + this.id + '-overlay');
497	497	Animator.toggle(this.overlay, "fade");
498	498	}
499	499
500		- Animator.toggle(this.element, this.config.animation, function () {
501		- if (this.visible) {
502		- return;
503		- }
504		- this.contentElement.innerHTML = this.contentElement.innerHTML;
505		- }.bind(this));
	500	+ Animator.toggle(this.element, this.config.animation);
506	501
507	502	return true;
508	503	};
509	504
		@@ -541,15 +536,8 @@
541	536	return false;
542	537	}
543	538
544	539	var elementId = window.location.hash.substring(1);
545		-
546		- // only attempt on strings looking like an ID or classname
547		- var regex = /^[a-zA-Z\-\_0-9]{1,}$/;
548		- if (regex.test(elementId)) {
549		- return false;
550		- }
551		-
552	540	if (elementId === this.element.id) {
553	541	return true;
554	542	} else if (this.element.querySelector('#' + elementId)) {
555	543	return true;
		@@ -558,21 +546,13 @@
558	546	return false;
559	547	};
560	548
561	549	Box.prototype.fits = function () {
562		- if (!this.config.screenWidthCondition || !this.config.screenWidthCondition.value) {
	550	+ if (this.config.minimumScreenWidth <= 0) {
563	551	return true;
564	552	}
565	553
566		- switch (this.config.screenWidthCondition.condition) {
567		- case "larger":
568		- return window.innerWidth > this.config.screenWidthCondition.value;
569		- case "smaller":
570		- return window.innerWidth < this.config.screenWidthCondition.value;
571		- }
572		-
573		- // meh.. condition should be "smaller" or "larger", just return true.
574		- return true;
	554	+ return window.innerWidth > this.config.minimumScreenWidth;
575	555	};
576	556
577	557	// is this box enabled?
578	558	Box.prototype.mayAutoShow = function () {
		@@ -759,9 +739,10 @@
759	739	// check triggerHeight criteria for all boxes
760	740	function checkHeightCriteria() {
761	741
762	742	var scrollY = scrollElement.hasOwnProperty('scrollY') ? scrollElement.scrollY : scrollElement.scrollTop;
763		- scrollY = scrollY + window.innerHeight * 0.9;
	743	+ scrollY = scrollY + window.innerHeight * 0.75;
	744	+ console.log(scrollY);
764	745
765	746	boxes.forEach(function (box) {
766	747	if (!box.mayAutoShow() || box.triggerHeight <= 0) {
767	748	return;
		@@ -791,12 +772,12 @@
791	772	function onOverlayClick(e) {
792	773	var x = e.offsetX;
793	774	var y = e.offsetY;
794	775
795		- // 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)
796	777	boxes.forEach(function (box) {
797	778	var rect = box.element.getBoundingClientRect();
798		- var margin = 40;
	779	+ var margin = 100 + window.innerWidth * 0.05;
799	780
800	781	// if click was not anywhere near box, dismiss it.
801	782	if (x < rect.left - margin || x > rect.right + margin || y < rect.top - margin || y > rect.bottom + margin) {
802	783	box.dismiss();
		@@ -848,21 +829,11 @@
848	829	}
849	830	}
850	831
851	832	function onElementClick(e) {
852		- // find <a> element in up to 3 parent elements
853	833	var el = e.target || e.srcElement;
854		- var depth = 3;
855		- for (var i = 0; i <= depth; i++) {
856		- if (!el || el.tagName === 'A') {
857		- break;
858		- }
859		-
860		- el = el.parentElement;
861		- }
862		-
863		- if (el && el.tagName === 'A' && el.getAttribute('href').toLowerCase().indexOf('#boxzilla-') === 0) {
864		- 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);
865	836	Boxzilla.toggle(boxId);
866	837	}
867	838	}
868	839
		@@ -939,17 +910,8 @@
939	910	*
940	911	* @returns Box
941	912	*/
942	913	Boxzilla.create = function (id, opts) {
943		-
944		- // preserve backwards compat for minimumScreenWidth option
945		- if (typeof opts.minimumScreenWidth !== "undefined") {
946		- opts.screenWidthCondition = {
947		- condition: "larger",
948		- value: opts.minimumScreenWidth
949		- };
950		- }
951		-
952	914	var box = new Box(id, opts);
953	915	boxes.push(box);
954	916	return box;
955	917	};
		@@ -1009,9 +971,8 @@
1009	971
1010	972	// expose each individual box.
1011	973	Boxzilla.boxes = boxes;
1012	974
1013		-// expose boxzilla object
1014	975	window.Boxzilla = Boxzilla;
1015	976
1016	977	if (typeof module !== 'undefined' && module.exports) {
1017	978	module.exports = Boxzilla;