jekyll-theme-glueckkanja 0.8.3 → 0.8.5

data/assets/js/components/hs.progress-bar.js

@@ -0,0 +1,353 @@
+/**
+ * Progress Bar wrapper.
+ * 
+ * @author Htmlstream 
+ * @version 1.0
+ * @requires appear.js (v1.0.3)
+ *
+ */
+;(function($){
+	'use strict';
+
+	$.HSCore.components.HSProgressBar = {
+
+		/**
+		 * 
+		 * 
+		 * @var Object _baseConfig
+		 */
+		_baseConfig : {
+			bounds: -100,
+			debounce: 10,
+			time: 1000,
+			fps: 60,
+			rtl: false,
+			direction: 'horizontal',
+			useProgressElement: false,
+			indicatorSelector: 'progress-bar-indicator',
+			moveElementSelector: false,
+			moveElementTo: 'currentPosition',
+			onChange: function(value){},
+			beforeUpdate: function(){},
+			afterUpdate: function(){},
+			onMoveElementChange: function(value){},
+			beforeMoveElementUpdate: function(){},
+			afterMoveElementUpdate: function(){}
+		},
+
+		/**
+		 * 
+		 * 
+		 * @var jQuery _pageCollection
+		 */
+		_pageCollection : $(),
+
+		/**
+		 * Initialization of Progress Bar wrapper.
+		 * 
+		 * @param String selector (optional)
+		 * @param Object config (optional)
+		 *
+		 * @return jQuery currentCollection - collection of initialized items.
+		 */
+		init: function(selector, config){
+
+			if(!(selector && $(selector).length)) return;
+
+			this.extendHorizontalProgressBar();
+			this.extendVerticalProgressBar();
+
+			return this._initProgressBar(selector, config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig);
+
+		},
+
+		/**
+		 * 
+		 * Initialization of each Progress Bar of the page.
+		 *
+		 * @return undefined
+		 */
+		_initProgressBar: function(selector, config) {
+
+			var self = this,
+					currentCollection = $();
+
+			appear({
+
+				bounds: config['bounds'],
+				debounce: config['debounce'],
+
+				init: function() {
+
+					$(selector).each(function(i, el) {
+
+						var $this = $(el);
+
+						if(config['direction'] === 'horizontal') {
+
+							$this.data('ProgressBar', new self.HorizontalProgressBar($this, config));
+
+						}
+						else {
+
+							$this.data('ProgressBar', new self.VerticalProgressBar($this, config));
+
+						}
+
+						currentCollection = currentCollection.add($this);
+						self._pageCollection = self._pageCollection.add($this);
+
+					});
+
+				},
+
+				elements: function() {
+
+					return document.querySelectorAll(selector);
+
+				},
+
+				appear: function(el) {
+
+					// console.log( $(el).data('ProgressBar'), $(el).data('value') );
+
+					$(el).data('ProgressBar').update($(el).data('value'));
+
+				}
+
+			});
+
+			return currentCollection;
+
+		},
+
+		/**
+		 * Constructor Function of Horizontal Progress Bar
+		 * 
+		 * @param jQuery element
+		 * @param Object config
+		 *
+		 */
+		HorizontalProgressBar: function(element, config) {
+
+			this.element = element;
+			this.indicator = this.element.find( config.indicatorSelector );
+
+			this.config = config;
+			this.moveElement = config['moveElementSelector'] ? element.parent().find(config['moveElementSelector']) : $();
+
+			if(this.moveElement.length) {
+
+				if(config['rtl']) {
+					this.moveElement.css({
+						'left': 'auto',
+					 	'right': 0,
+					 	'margin-right': this.moveElement.outerWidth() / -2
+					});
+				}
+				else {
+					this.moveElement.css({
+					 	'left': 0,
+					 	'margin-left': this.moveElement.outerWidth() / -2
+					});
+				}
+
+			}
+
+			if(this.config.useProgressElement) {
+				this.element.data( 'value', this.element.attr( 'value' ) );
+				this.element.attr('value', 0);
+			}
+			else {
+				this.element.data(
+					'value', 
+					this.indicator.length ? Math.round( this.indicator.outerWidth() / this.element.outerWidth() * 100 ) : 0
+				);
+				this.indicator.css('width', '0%');
+			}
+
+		},
+
+		/**
+		 * Constructor Function of Vertical Progress Bar
+		 * 
+		 * @param jQuery element
+		 * @param Object config
+		 *
+		 */
+		VerticalProgressBar: function(element, config) {
+
+			this.element = element;
+			this.config = config;
+			this.indicator = element.find(config['indicatorSelector']);
+
+			if(!this.indicator.length) return;
+
+			element.data('value', parseInt(this.indicator.css('height'), 10) / this.indicator.parent().outerHeight() * 100);
+			this.indicator.css('height', 0);
+
+		},
+
+		/**
+		 * Extends HorizontalProgressBar.
+		 *
+		 * @return undefined
+		 */
+		extendHorizontalProgressBar: function() {
+
+			/**
+			 * Sets new value of the Progress Bar.
+			 * 
+			 * @param Number value
+			 *
+			 * @return undefined
+			 */
+			this.HorizontalProgressBar.prototype.update = function(value) {
+
+				var self = this;
+
+				if( this.config.useProgressElement ) {
+
+					var fps = (this.config['time'] / this.config['fps']),
+							iterationValue = parseInt(value / fps, 10),
+							counter = 0,
+							self = this;
+
+					if(iterationValue == 0) iterationValue = 1;
+
+					this.config.beforeUpdate.call(this.element);
+					if(this.moveElement.length) this.config.beforeMoveElementUpdate.call(this.moveElement);
+
+					if(self.config.moveElementSelector && self.config['moveElementTo'] == 'end') {
+
+						var mCounter = 0,
+								mIterationValue = parseInt(100 / fps, 10);
+
+						if(mIterationValue == 0) mIterationValue = 1;
+
+						var mCounterId = setInterval(function() {
+
+							self.moveSubElement(mCounter+=mIterationValue);
+							if(self.moveElement.length) self.config.onMoveElementChange.call(self.moveElement, mCounter+=mIterationValue);
+
+							if(mCounter > 100) {
+								clearInterval(mCounterId);
+								self.moveSubElement(100);
+								if(self.moveElement.length) self.config.afterMoveElementUpdate.call(self.moveElement);
+							}
+
+						}, fps);
+
+					}
+
+					this.element.data('intervalId', setInterval(function(){
+
+						var currentValue = counter += iterationValue;
+
+						self.element.attr('value', currentValue);
+						self.config.onChange.call(self.element, currentValue);
+
+						if(self.config.moveElementSelector && self.config['moveElementTo'] == 'currentPosition') self.moveSubElement(currentValue);
+
+						if(counter > value) {
+
+							self.element.attr('value', value);
+							if(self.config.moveElementSelector && self.config['moveElementTo'] == 'currentPosition') self.moveSubElement(value);
+							clearInterval(self.element.data('intervalId'));
+							self.config.afterUpdate.call(self.element);
+
+						}
+
+					}, fps));
+				}
+				else {
+					if( this.indicator.length ) {
+						this.indicator.stop().animate({
+							'width': value + '%'
+						}, {
+							duration: self.config.time,
+							complete: function() {
+								self.config.afterUpdate.call(self.element);
+							}
+						});
+					}
+				}
+
+			};
+
+			/**
+			 * 
+			 * 
+			 * @param 
+			 *
+			 * @return 
+			 */
+			this.HorizontalProgressBar.prototype.moveSubElement = function(value, duration) {
+
+				if(!this.moveElement.length) return;
+
+				var self = this;
+
+				this.moveElement.css(this.config['rtl'] ? 'right' : 'left', value + '%');
+
+			};
+
+		},
+
+		/**
+		 * Extends VerticalProgressBars.
+		 * 
+		 *
+		 * @return undefined
+		 */
+		extendVerticalProgressBar: function() {
+
+			/**
+			 * Sets new value of the Progress Bar.
+			 * 
+			 * @param Number value
+			 *
+			 * @return undefined
+			 */
+			this.VerticalProgressBar.prototype.update = function(value) {
+
+				this.indicator.stop().animate({
+					height: value + '%'
+				});
+				
+			}
+
+		},
+
+
+		/**
+		 * Returns full collection of all initialized progress bars.
+		 * 
+		 *
+		 * @return jQuery _pageCollection
+		 */
+		get: function() {
+
+			return this._pageCollection;
+
+		},
+
+		/**
+		 * Returns API of the progress bar by index in collection.
+		 * 
+		 * @param Number index
+		 *
+		 * @return HorizontalProgressBar | VerticalProgressBar
+		 */
+		getAPI: function(index) {
+
+			if(this._pageCollection.eq(index).length) return this._pageCollection.eq(index).data('ProgressBar');
+
+			return null;
+
+		}
+
+		
+	};
+
+})(jQuery);

data/assets/js/components/hs.rating.js

@@ -0,0 +1,153 @@
+/**
+ * Rating wrapper.
+ * 
+ * @author Htmlstream 
+ * @version 1.0
+ *
+ */
+;(function($){
+	'use strict';
+
+	$.HSCore.components.HSRating = {
+
+		/**
+		 * Base rating configuration.
+		 * 
+		 * @var Object _baseConfig
+		 */
+		_baseConfig : {
+			rtl: false,
+			containerClass: 'g-rating',
+			backwardClass: 'g-rating-backward',
+			forwardClass: 'g-rating-forward',
+			spacing: 0
+		},
+
+		/**
+		 * Collection of all initialized items.
+		 * 
+		 * @var jQuery _pageCollection
+		 */
+		_pageCollection : $(),
+
+		/**
+		 * Initializes rating items.
+		 * 
+		 * @param jQuery collection
+		 *
+		 * @return jQuery|undefined
+		 */
+		init: function(collection, config) {
+
+			if(!collection || !collection.length) return;
+
+			config = config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig;
+
+			var self = this;
+
+			return collection.each(function(i, el){
+
+				var $this = $(el);
+
+				config = $.extend(true, {}, config, $this.data());
+
+
+				if(!$this.data('rating-instance')) {
+
+					$this.data('rating-instance',new Rating( $this, $this.data('rating'), config ));
+
+					self._pageCollection = self._pageCollection.add($this);
+
+				}
+
+			});
+
+		}
+
+		
+	};
+
+	/**
+	 * Rating constructor function.
+	 * 
+	 * @param jQuery element
+	 * @param Number value
+	 */
+	function Rating( element, value, config ) {
+
+		this.value = value;
+		this.element = element;
+		this.config = config;
+
+		this.init();
+
+	}
+
+	/**
+	 * Initializes single rating item.
+	 * 
+	 * @return undefined
+	 */
+	Rating.prototype.init = function() {
+
+		var self = this;
+
+		this.container = $('<div></div>', {
+			class: self.config.containerClass,
+			style: 'display: inline-block; position: relative; z-index: 1; white-space: nowrap;'
+		});
+
+		this.forward = $('<div></div>', {
+			class: self.config.forwardClass,
+			style: 'position: absolute; left: 0; top: 0; height: 100%; overflow: hidden;'
+		});
+
+		this.backward = $('<div></div>', {
+			class: self.config.backwardClass,
+			style: 'position: relative; z-index: 1;'
+		});
+
+		for(var i = 0; i < 5; i++) {
+
+			var starEmpty = $('<i></i>', {
+						class: self.element.data('backward-icons-classes') ? self.element.data('backward-icons-classes') : 'fa fa-star-o'
+					}),
+					starFilled = $('<i></i>', {
+						class: self.element.data('forward-icons-classes') ? self.element.data('forward-icons-classes') : 'fa fa-star'
+					});
+
+
+			this.forward.append(starFilled);
+			this.backward.append(starEmpty);
+
+		}
+
+		this.container.append(this.forward);
+		this.container.append(this.backward);
+
+		this.element.append(this.container);
+
+		this.forward.css('width',  this.value / 5 * 100 + '%');
+
+		this.makeSpacing();
+
+	};
+
+	Rating.prototype.makeSpacing = function() {
+
+		var self = this;
+
+		this.forward.children().add(this.backward.children()).css({
+			'margin-left': self.config.spacing,
+			'margin-right': self.config.spacing
+		});
+
+		this.container.css({
+			'margin-left': self.config.spacing * -1,
+			'margin-right': self.config.spacing * -1
+		});
+
+	}
+
+
+})(jQuery);