jekyll-theme-glueckkanja 0.8.3 → 0.8.5

data/assets/js/components/hs.flickr.js

@@ -0,0 +1,180 @@
+/**
+ * Flickr wrapper.
+ *
+ * @author Htmlstream
+ * @version 1.0
+ * @requires
+ *
+ */
+;(function ($) {
+  'use strict';
+
+  $.HSCore.components.HSFlickr = {
+    /**
+     *
+     *
+     * @var Object _baseConfig
+     */
+    _baseConfig: {
+      autoplay: true,
+      infinite: true
+    },
+
+    /**
+     *
+     *
+     * @var jQuery pageCollection
+     */
+    pageCollection: $(),
+
+    /**
+     * Initialization of Flickr wrapper.
+     *
+     * @param String selector (optional)
+     * @param Object config (optional)
+     *
+     * @return jQuery pageCollection - collection of initialized items.
+     */
+
+    init: function (selector, config) {
+
+      this.collection = selector && $(selector).length ? $(selector) : $();
+      if (!$(selector).length) return;
+
+      this.config = config && $.isPlainObject(config) ?
+          $.extend({}, this._baseConfig, config) : this._baseConfig;
+
+      this.config.itemSelector = selector;
+
+      this.flickrInit();
+
+      return this.pageCollection;
+
+    },
+
+    flickrInit: function () {
+      //Variables
+      var $self, config, collection;
+      //Variables values
+      $self = this;
+      config = $self.config;
+      collection = $self.pageCollection;
+
+      //Actions
+      this.collection.each(function (i, el) {
+        //Variables
+        var $this;
+        //Variables values
+        $this = $(el);
+
+        //Type of content
+        if ($this.data('photoset-id')) {
+          $self.photosetInit($this);
+        } else if ($this.data('gallery-id')) {
+          $self.galleryInit($this);
+        } else {
+          return;
+        }
+
+        //Actions
+        collection = collection.add($this);
+      });
+    },
+
+    photosetInit: function (el) {
+      //Variables
+      var $self, apiKey, userID, photosetID;
+      //Variables values
+      $self = this;
+      apiKey = el.data('key');
+      userID = el.data('user-id');
+      photosetID = el.data('photoset-id');
+
+      $.getJSON('https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=' +
+          apiKey +
+          '&photoset_id=' +
+          photosetID +
+          '&user_id=' +
+          userID +
+          '&format=json&nojsoncallback=1', function (data) {
+        //Variables
+        var elLength, i;
+        //Variables values
+        elLength = data.photoset.photo.length;
+
+        for (i = 0; i < elLength; i++) {
+          var item, photoURL, itemMarkup;
+          item = data.photoset.photo[i];
+          photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg';
+          itemMarkup = '<div class="col-md-2"><div class="js-block-square g-bg-size-cover g-brd-around g-brd-gray-light-v1 g-mb-20" style="background-image: url(' +
+              photoURL +
+              ');"></div><h4 class="text-uppercase g-font-size-14">' +
+              item.title +
+              '</h4></div>';
+          el.append(itemMarkup);
+        }
+      }).done(function () {
+        $self.squareBlocks('.js-block-square');
+
+        $(window).on('resize', function () {
+          $self.squareBlocks('.js-block-square');
+        });
+      });
+    },
+
+    galleryInit: function (el) {
+      //Variables
+      var $self, apiKey, galleryID;
+      //Variables values
+      $self = this;
+      apiKey = el.data('key');
+      galleryID = el.data('gallery-id');
+
+      $.getJSON('https://api.flickr.com/services/rest/?method=flickr.galleries.getPhotos&api_key=' +
+          apiKey +
+          '&gallery_id=' +
+          galleryID +
+          '&format=json&nojsoncallback=1', function (data) {
+        //Variables
+        var elLength, i;
+        //Variables values
+        elLength = data.photos.total;
+
+        for (i = 0; i < elLength; i++) {
+          var item, photoURL, itemMarkup, photoURLFull;
+          item = data.photos.photo[i];
+          photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg';
+          photoURLFull = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_b.jpg';
+          itemMarkup = '<div class="col-md-2"><a class="js-fancy-link js-block-square d-block g-bg-pos-center g-bg-size-cover g-brd-around g-brd-gray g-mb-20" href="' +
+              photoURLFull +
+              '" style="background-image: url(' +
+              photoURL +
+              ');" rel="flickr-popup" title="' +
+              item.title +
+              '"></a><h4 class="text-uppercase g-font-size-14">' +
+              item.title +
+              '</h4></div>';
+          el.append(itemMarkup);
+        }
+      }).done(function () {
+        $self.squareBlocks('.js-block-square');
+
+        $(window).on('resize', function () {
+          $self.squareBlocks('.js-block-square');
+        });
+      });
+    },
+
+    squareBlocks: function (selector) {
+      $(selector).each(function () {
+        var $item, itemWidth;
+        $item = $(this);
+        itemWidth = $item.width();
+
+        $item.css('height', itemWidth);
+      });
+    }
+
+  }
+
+})(jQuery);

data/assets/js/components/hs.go-to.js

@@ -0,0 +1,121 @@
+/**
+ * Go To wrapper.
+ *
+ * @author Htmlstream
+ * @version 1.0
+ *
+ */
+;(function ($) {
+  'use strict';
+  $.HSCore.components.HSGoTo = {
+    /**
+     *
+     *
+     * @var Object _baseConfig
+     */
+    _baseConfig: {},
+
+    /**
+     *
+     *
+     * @var jQuery pageCollection
+     */
+    pageCollection: $(),
+
+    /**
+     * Initialization of Go To wrapper.
+     *
+     * @param String selector (optional)
+     * @param Object config (optional)
+     *
+     * @return jQuery pageCollection - collection of initialized items.
+     */
+
+    init: function (selector, config) {
+      this.collection = selector && $(selector).length ? $(selector) : $();
+      if (!$(selector).length) return;
+
+      this.config = config && $.isPlainObject(config) ?
+        $.extend({}, this._baseConfig, config) : this._baseConfig;
+
+      this.config.itemSelector = selector;
+
+      this.initGoTo();
+
+      return this.pageCollection;
+    },
+
+    initGoTo: function () {
+      //Variables
+      var $self = this,
+        collection = $self.pageCollection;
+
+      //Actions
+      this.collection.each(function (i, el) {
+        //Variables
+        var $this = $(el),
+          $target = $this.data('target'),
+          type = $this.data('type'),
+          showEffect = $this.data('show-effect'),
+          position = JSON.parse(el.getAttribute('data-position')),
+          compensation = $($this.data('compensation')).outerHeight(),
+          offsetTop = $this.data('offset-top');
+
+        $this.addClass('animated').css({
+          'display': 'inline-block',
+          'position': type,
+          'opacity': 0
+        });
+
+        if (type == 'fixed' || type == 'absolute') {
+          $this.css(position);
+        }
+
+        $this.on('click', function (e) {
+          e.preventDefault();
+
+          $('html, body').stop().animate({
+            'scrollTop': $target ? $($target).offset().top - compensation : 0
+          }, 800);
+        });
+
+        if (!$this.data('offset-top') && !$this.hasClass('u-animation-was-fired')) {
+          if ($this.offset().top <= $(window).height()) {
+            $this.addClass('u-animation-was-fired ' + showEffect).css({
+              'opacity': ''
+            });
+          }
+        }
+
+        $(window).on('scroll', function () {
+          if ($this.data('offset-top')) {
+            if ($(window).scrollTop() >= offsetTop && !$this.hasClass('u-animation-was-fired')) {
+              $this.addClass('u-animation-was-fired ' + showEffect).css({
+                'opacity': ''
+              });
+            } else if ($(window).scrollTop() <= offsetTop && $this.hasClass('u-animation-was-fired')) {
+              $this.removeClass('u-animation-was-fired ' + showEffect).css({
+                'opacity': 0
+              });
+            }
+          } else {
+            var thisOffsetTop = $this.offset().top;
+
+            if (!$this.hasClass('u-animation-was-fired')) {
+              if ($(window).scrollTop() >= thisOffsetTop - $(window).height()) {
+                $this.addClass('u-animation-was-fired ' + showEffect).css({
+                  'opacity': ''
+                });
+              }
+            }
+          }
+        });
+
+        $(window).trigger('scroll');
+
+        //Actions
+        collection = collection.add($this);
+      });
+    }
+  };
+})(jQuery);

data/assets/js/components/hs.header-fullscreen.js

@@ -0,0 +1,397 @@
+/**
+ * HSHeaderFullscreen Component.
+ *
+ * @author Htmlstream
+ * @version 1.0
+ * @requires HSScrollBar component (hs.scrollbar.js v1.0.0)
+ */
+;(function ($) {
+  'use strict';
+
+  $.HSCore.components.HSHeaderFullscreen = {
+
+    /**
+     * Base configuration.
+     *
+     * @private
+     */
+    _baseConfig: {
+      afterOpen: function(){},
+      afterClose: function(){},
+      overlayClass: 'u-header__overlay',
+      sectionsContainerSelector: '.u-header__sections-container'
+    },
+
+
+    /**
+     * Contains all initialized items on the page.
+     * 
+     * @private 
+     */
+    _pageCollection: $(),
+
+    /**
+     * Initializes collection.
+     * 
+     * @param {jQuery|HTMLElement} collection
+     * @param {Object} config
+     * @return {jQuery}
+     */
+    init: function( collection, config ) {
+      
+      var _self = this;
+
+      if(!collection) return $();
+      collection = $(collection)
+
+      if(!collection.length) return $();
+
+      config = config && $.isPlainObject(config) ? config : {};
+
+      this._bindGlobalEvents();
+
+
+      return collection.each(function(i,el){
+
+        var $this = $(this),
+            itemConfig = $.extend(true, {}, _self._baseConfig, config, $this.data());
+
+        if( $this.data('HSHeaderFullscreen') ) return;
+
+        $this.data('HSHeaderFullscreen', new HSHeaderFullscreen(
+          $this,
+          itemConfig,
+          new HSHeaderFullscreenOverlayEffect()
+        ));
+
+        _self._pageCollection = _self._pageCollection.add($this);
+
+      });
+
+    },
+
+    /**
+     * Binds necessary global events.
+     * 
+     * @private
+     */
+    _bindGlobalEvents: function() {
+
+      var _self = this;
+
+
+       $(window).on('resize.HSHeaderFullscreen', function() {
+
+        if(_self.resizeTimeOutId) clearTimeout(_self.resizeTimeOutId);
+
+        _self.resizeTimeOutId = setTimeout(function(){
+
+          _self._pageCollection.each(function(i,el){
+
+            var $this = $(el),
+                HSHeaderFullscreen = $this.data('HSHeaderFullscreen');
+
+            if(!HSHeaderFullscreen) return;
+
+            HSHeaderFullscreen.update();
+
+          });
+
+        }, 50);
+
+      });
+
+      $(document).on('keyup.HSHeaderFullscreen', function(e){
+
+        if(e.keyCode && e.keyCode == 27) {
+
+          _self._pageCollection.each(function(i,el){
+
+            var $this = $(el),
+                HSHeaderFullscreen = $this.data('HSHeaderFullscreen');
+
+            if(!HSHeaderFullscreen) return;
+
+            HSHeaderFullscreen.hide();
+
+          });
+
+        }
+
+      });
+
+    }
+  };
+
+  /**
+   * HSHeaderFullscreen.
+   * 
+   * @param {jQuery} element
+   * @param {Object} config
+   * @param {Object} effect
+   * @constructor
+   */
+  function HSHeaderFullscreen( element, config, effect ) {
+
+    /**
+     * Contains link to the current object.
+     * @private 
+     */
+    var _self = this;
+
+    /**
+     * Contains link to the current jQuery element.
+     * @public 
+     */
+    this.element = element;
+
+    /**
+     * Configuration object.
+     * @public
+     */
+    this.config = config;
+
+    /**
+     * Object that describes animation of the element.
+     * @public
+     */
+    this.effect = effect;
+
+    /**
+     * Contains link to the overlay element.
+     * @public 
+     */
+    this.overlay = $('<div></div>', {
+      class: _self.config.overlayClass
+    });
+
+    Object.defineProperty(this, 'isShown', {
+      get: function() {
+        return _self.effect.isShown();
+      }
+    });
+
+    Object.defineProperty(this, 'sections', {
+      get: function() {
+        return _self.element.find(_self.config.sectionsContainerSelector);
+      }
+    });
+
+    this.element.append( this.overlay );
+    this.effect.init( this.element, this.overlay, this.config.afterOpen, this.config.afterClose );
+    this._bindEvents();
+
+    if($.HSCore.components.HSScrollBar && this.sections.length) {
+
+      $.HSCore.components.HSScrollBar.init( this.sections );
+      
+    }
+  };
+
+  /**
+   * Binds necessary events.
+   *
+   * @public
+   * @return {HSHeaderFullscreen}
+   */
+  HSHeaderFullscreen.prototype._bindEvents = function() {
+
+    var _self = this;
+
+    this.invoker = $('[data-target="#'+ this.element.attr('id') +'"]');
+
+    if(this.invoker.length) {
+
+      this.invoker.off('click.HSHeaderFullscreen').on('click.HSHeaderFullscreen', function(e){ 
+
+        _self[ _self.isShown ? 'hide' : 'show' ]();
+
+        e.preventDefault();
+
+      });
+
+    }
+
+    return this;
+
+  };
+
+  /**
+   * Updates the header.
+   * 
+   * @public
+   * @return {HSHeaderFullscreen}
+   */
+  HSHeaderFullscreen.prototype.update = function() {
+
+    if(!this.effect) return false;
+
+    this.effect.update();
+
+    return this;
+  };
+
+  /**
+   * Shows the header.
+   *
+   * @public
+   * @return {HSHeaderFullscreen}
+   */
+  HSHeaderFullscreen.prototype.show = function() {
+
+    if(!this.effect) return false;
+
+    this.effect.show();
+
+    return this;
+
+  };
+
+  /**
+   * Hides the header.
+   *
+   * @public
+   * @return {HSHeaderFullscreen}
+   */
+  HSHeaderFullscreen.prototype.hide = function() {
+
+    // if(this.invoker && this.invoker.length) {
+    //   var hamburgers = this.invoker.find('.is-active');
+    //   if(hamburgers.length) hamburgers.removeClass('is-active');
+    // }
+
+    if(!this.effect) return false;
+
+    this.effect.hide();
+
+    return this;
+
+  };
+
+  /**
+   * HSHeaderFullscreenOverlayEffect.
+   *
+   * @constructor
+   */
+  function HSHeaderFullscreenOverlayEffect() {
+    this._isShown = false;
+  };
+
+  /**
+   * Initialization of HSHeaderFullscreenOverlayEffect.
+   * 
+   * @param {jQuery} element
+   * @param {jQuery} overlay
+   * @param {Function} afterOpen
+   * @param {Function} afterClose
+   * @public
+   * @return {HSHeaderFullscreenOverlayEffect}
+   */
+  HSHeaderFullscreenOverlayEffect.prototype.init = function(element, overlay, afterOpen, afterClose) {
+
+    var _self = this;
+
+    this.element = element;
+    this.overlay = overlay;
+    this.afterOpen = afterOpen;
+    this.afterClose = afterClose;
+
+    this.overlay.on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(e){
+
+      if(_self.isShown() && e.originalEvent.propertyName == 'transform') {
+        _self.afterOpen.call(_self.element, _self.overlay);
+      }
+      else if(!_self.isShown() && e.originalEvent.propertyName == 'transform') {
+        _self.afterClose.call(_self.element, _self.overlay); 
+      }
+
+      e.stopPropagation();
+      e.preventDefault();
+
+    });
+
+    this.update();
+
+    this.overlay.addClass( this.element.data('overlay-classes') );
+
+    return this;
+  };
+
+  /**
+   * Detroys the overlay effect.
+   * 
+   * @public
+   * @return {HSHeaderFullscreenOverlayEffect}
+   */
+  HSHeaderFullscreenOverlayEffect.prototype.destroy = function() {
+
+    this.overlay.css({
+      'width': 'auto',
+      'height': 'auto',
+    });
+
+    this.element.removeClass('u-header--fullscreen-showed');
+
+    return this;
+  };
+
+  /**
+   * Necessary updates which will be applied when window has been resized.
+   * 
+   * @public
+   * @return {HSHeaderFullscreenOverlayEffect}
+   */
+  HSHeaderFullscreenOverlayEffect.prototype.update = function() {
+
+    var $w = $(window),
+        $wW = $w.width(),
+        $wH = $w.height();
+
+    this.overlay.css({
+      width: $wW > $wH ? $wW * 1.5 : $wH * 1.5,
+      height: $wW > $wH ? $wW * 1.5 : $wH * 1.5
+    });
+
+    return this;
+  };
+
+  /**
+   * Describes appear of the overlay.
+   * 
+   * @public
+   * @return {HSHeaderFullscreenOverlayEffect}
+   */
+  HSHeaderFullscreenOverlayEffect.prototype.show = function() {
+
+    this.element.addClass('u-header--fullscreen-showed');
+    this._isShown = true;
+
+    return this;
+  };
+
+  /**
+   * Describes disappearance of the overlay.
+   * 
+   * @public
+   * @return {HSHeaderFullscreenOverlayEffect}
+   */
+  HSHeaderFullscreenOverlayEffect.prototype.hide = function() {
+
+    this.element.removeClass('u-header--fullscreen-showed');
+    this._isShown = false;
+
+    return this;
+  };
+
+  /**
+   * Returns true if header has been opened, otherwise returns false.
+   * 
+   * @public
+   * @return {Boolean}
+   */
+  HSHeaderFullscreenOverlayEffect.prototype.isShown = function() {
+
+    return this._isShown;
+  };
+
+})(jQuery);