jekyll-theme-glueckkanja 0.8.3 → 0.8.5

data/assets/js/components/hs.modal-window.js

@@ -0,0 +1,422 @@
+/**
+ * ModalWindow wrapper.
+ *
+ * @author Htmlstream
+ * @version 1.0
+ * @requires appear.js (v1.0.3), custombox.js (v4.0.1)
+ *
+ */
+;(function($){
+	'use strict';
+
+	$.HSCore.components.HSModalWindow = {
+
+		/**
+		 *
+		 *
+		 * @var Object _baseConfig
+		 */
+		_baseConfig : {
+			bounds: 100,
+			debounce: 50,
+			overlayOpacity: .48,
+			overlayColor: '#000000',
+			speed: 400,
+			type: 'onscroll', // onscroll, beforeunload, hashlink, ontarget, aftersometime
+			effect: 'fadein',
+			onOpen: function() {},
+			onClose: function() {},
+			onComplete: function() {},
+		},
+
+		/**
+		 *
+		 *
+		 * @var jQuery _pageCollection
+		 */
+		_pageCollection : $(),
+
+		/**
+		 * Initialization of ModalWindow wrapper.
+		 *
+		 * @param String selector (optional)
+		 * @param Object config (optional)
+		 *
+		 * @return jQuery - collection of initialized items.
+		 */
+		init: function(selector, config) {
+
+			var collection = $(selector);
+			if(!collection.length) return;
+
+			config = config && $.isPlainObject(config) ? $.extend({}, this._baseConfig, config) : this._baseConfig;
+			config.selector = selector;
+
+			this._pageCollection = this._pageCollection.add( collection.not(this._pageCollection) );
+
+			if(config.autonomous) {
+
+				return this.initAutonomousModalWindows(collection, config);
+
+			}
+
+			return this.initBaseModalWindows(collection, config);
+
+		},
+
+		/**
+		 * Initialization of each Autonomous Modal Window of the page.
+		 *
+		 * @param jQuery collection
+		 * @param Object config
+		 *
+		 * @return jQuery collection
+		 */
+		initBaseModalWindows: function(collection, config){
+
+			return collection.on('click', function(e){
+
+				if(!('Custombox' in window)) return;
+
+	      var $this = $(this),
+	          target = $this.data('modal-target'),
+	          effect = $this.data('modal-effect') || config['effect'];
+
+	      if(!target || !$(target).length) return;
+
+	      new Custombox.modal(
+	      	{
+						content: {
+							target: target,
+							effect: effect,
+							onOpen: function() {
+								config['onOpen'].call($(target));
+							},
+							onClose: function() {
+								config['onClose'].call($(target));
+							},
+							onComplete: function() {
+								config['onComplete'].call($(target));
+							}
+						},
+						overlay: {
+							color: $this.data('overlay-color') || config['overlayColor'],
+							opacity: $this.data('overlay-opacity') || config['overlayOpacity'],
+							speedIn: $this.data('speed') || config['speed'],
+							speedOut: $this.data('speed') || config['speed']
+						}
+					}
+	      ).open();
+
+	      e.preventDefault();
+
+			});
+
+		},
+
+		/**
+		 * Initialization of each Autonomous Modal Window of the page.
+		 *
+		 * @param jQuery collection
+		 * @param Object config
+		 *
+		 * @return jQuery collection
+		 */
+		initAutonomousModalWindows: function(collection, config) {
+
+			var self = this;
+
+			return collection.each(function(i, el) {
+
+				var $this = $(el),
+						type = $this.data('modal-type');
+
+				switch(type) {
+
+					case 'hashlink' :
+
+						self.initHashLinkPopup($this, config);
+
+					break;
+
+					case 'onscroll' :
+
+						self.initOnScrollPopup($this, config);
+
+					break;
+
+					case 'beforeunload' :
+
+						self.initBeforeUnloadPopup($this, config);
+
+					break;
+
+					case 'ontarget' :
+
+						self.initOnTargetPopup($this, config);
+
+					break;
+
+					case 'aftersometime' :
+
+						self.initAfterSomeTimePopup($this, config);
+
+					break;
+
+				}
+
+			});
+
+		},
+
+		/**
+		 *
+		 *
+		 * @param jQuery popup
+		 *
+		 * @return undefined
+		 */
+		initHashLinkPopup: function(popup, config) {
+
+			var self = this,
+					hashItem = $(window.location.hash),
+					target = $('#' + popup.attr('id'));
+
+			if(hashItem.length && hashItem.attr('id') ==  popup.attr('id')){
+
+				new Custombox.modal(
+					{
+						content: {
+							target: '#' + popup.attr('id'),
+							effect: popup.data('effect') || config['effect'],
+							onOpen: function() {
+								config['onOpen'].call($(target));
+							},
+							onClose: function() {
+								config['onClose'].call($(target));
+							},
+							onComplete: function() {
+								config['onComplete'].call($(target));
+							}
+						},
+						overlay: {
+							color: popup.data('overlay-color') || config['overlayColor'],
+							opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
+							speedIn: popup.data('speed') || config['speed'],
+							speedOut: popup.data('speed') || config['speed']
+						}
+					}
+				).open();
+
+			}
+
+		},
+
+		/**
+		 *
+		 *
+		 * @param jQuery popup
+		 *
+		 * @return undefined
+		 */
+		initOnScrollPopup: function(popup, config) {
+
+			var self = this,
+					$window = $(window),
+					breakpoint = popup.data('breakpoint') ? popup.data('breakpoint') : 0,
+					target = $('#' + popup.attr('id'));
+
+
+			$window.on('scroll.popup', function() {
+
+				var scrolled = $window.scrollTop() + $window.height();
+
+				if(scrolled >= breakpoint) {
+
+					new Custombox.modal(
+						{
+							content: {
+								target: '#' + popup.attr('id'),
+								effect: popup.data('effect') || config['effect'],
+								onOpen: function() {
+									config['onOpen'].call($(target));
+								},
+								onClose: function() {
+									config['onClose'].call($(target));
+								},
+								onComplete: function() {
+									config['onComplete'].call($(target));
+								}
+							},
+							overlay: {
+								color: popup.data('overlay-color') || config['overlayColor'],
+								opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
+								speedIn: popup.data('speed') || config['speed'],
+								speedOut: popup.data('speed') || config['speed']
+							}
+						}
+					).open();
+
+					$window.off('scroll.popup');
+
+				}
+
+			});
+
+			$window.trigger('scroll.popup');
+
+		},
+
+		/**
+		 *
+		 *
+		 * @param jQuery popup
+		 *
+		 * @return undefined
+		 */
+		initBeforeUnloadPopup: function(popup, config) {
+
+			var self = this,
+					count = 0,
+					target = $('#' + popup.attr('id')),
+					timeoutId;
+
+			window.addEventListener('mousemove', function(e) {
+
+				if(timeoutId) clearTimeout(timeoutId);
+
+		    timeoutId = setTimeout(function() {
+
+		    	if (e.clientY < 10 && !count) {
+
+				    count++;
+
+				    new Custombox.modal(
+							{
+								content: {
+									target: '#' + popup.attr('id'),
+									effect: popup.data('effect') || config['effect'],
+									onOpen: function() {
+										config['onOpen'].call($(target));
+									},
+									onClose: function() {
+										config['onClose'].call($(target));
+									},
+									onComplete: function() {
+										config['onComplete'].call($(target));
+									}
+								},
+								overlay: {
+									color: popup.data('overlay-color') || config['overlayColor'],
+									opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
+									speedIn: popup.data('speed') || config['speed'],
+									speedOut: popup.data('speed') || config['speed']
+								}
+							}
+						).open();
+				    
+		  		}
+
+		  	}, 10);
+
+			});
+			
+
+		},
+
+		/**
+		 *
+		 *
+		 * @param jQuery popup
+		 *
+		 * @return undefined
+		 */
+		initOnTargetPopup: function(popup, config) {
+
+			var self = this,
+					target = popup.data('target');
+
+			if(!target || !$(target).length) return;
+
+			appear({
+				bounds: config['bounds'],
+				debounce: config['debounce'],
+				elements: function() {
+					return document.querySelectorAll(target);
+				},
+				appear: function(element) {
+
+					new Custombox.modal(
+						{
+							content: {
+								target: '#' + popup.attr('id'),
+								effect: popup.data('effect') || config['effect'],
+								onOpen: function() {
+									config['onOpen'].call($(target));
+								},
+								onClose: function() {
+									config['onClose'].call($(target));
+								},
+								onComplete: function() {
+									config['onComplete'].call($(target));
+								}
+							},
+							overlay: {
+								color: popup.data('overlay-color') || config['overlayColor'],
+								opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
+								speedIn: popup.data('speed') || config['speed'],
+								speedOut: popup.data('speed') || config['speed']
+							}
+						}
+					).open();
+
+				}
+			});
+
+		},
+
+		/**
+		 *
+		 *
+		 * @param jQuery popup
+		 *
+		 * @return undefined
+		 */
+		initAfterSomeTimePopup: function(popup, config) {
+
+			var self = this,
+				target = $('#' + popup.attr('id'));
+
+			setTimeout(function() {
+
+				new Custombox.modal(
+					{
+						content: {
+							target: '#' + popup.attr('id'),
+							effect: popup.data('effect') || config['effect'],
+							onOpen: function() {
+								config['onOpen'].call($(target));
+							},
+							onClose: function() {
+								config['onClose'].call($(target));
+							},
+							onComplete: function() {
+								config['onComplete'].call($(target));
+							}
+						},
+						overlay: {
+							color: popup.data('overlay-color') || config['overlayColor'],
+							opacity: popup.data('overlay-opacity') || config['overlayOpacity'],
+							speedIn: popup.data('speed') || config['speed'],
+							speedOut: popup.data('speed') || config['speed']
+						}
+					}
+				).open();
+
+			}, popup.data('delay') ? popup.data('delay') : 10)
+
+		}
+
+	};
+
+})(jQuery);