PHP Dosya Yöneticisi

/*
 * HS Mega Menu - jQuery Plugin
 * @version: 1.0.0 (Sun, 26 Feb 2017)
 * @requires: jQuery v1.6 or later
 * @author: HtmlStream
 * @event-namespace: .HSMegaMenu
 * @browser-support: IE9+
 * @license:
 *
 * Copyright 2017 HtmlStream
 *
 */
;(function ($) {
  'use strict';

/**
   * Creates a mega menu.
   *
   * @constructor
   * @param {HTMLElement|jQuery} element - The element to create the mega menu for.
   * @param {Object} options - The options
   */

var MegaMenu = window.MegaMenu || {};

MegaMenu = (function () {

function MegaMenu(element, options) {

var self = this;

/**
       * Current element.
       *
       * @public
       */
      this.$element = $(element);

/**
       * Current options set by the caller including defaults.
       *
       * @public
       */
      this.options = $.extend(true, {}, MegaMenu.defaults, options);

/**
       * Collection of menu elements.
       *
       * @private
       */
      this._items = $();

Object.defineProperties(this, {

/**
         * Contains composed selector of menu items.
         *
         * @public
         */
        itemsSelector: {
          get: function () {
            return self.options.classMap.hasSubMenu + ',' +
              self.options.classMap.hasMegaMenu;
          }
        },

/**
         * Contains chain of active items.
         *
         * @private
         */
        _tempChain: {
          value: null,
          writable: true
        },

/**
         * Contains current behavior state.
         *
         * @public
         */
        state: {
          value: null,
          writable: true
        }

});

this.initialize();

}

return MegaMenu;

}());

/**
   * Default options of the mega menu.
   *
   * @public
   */
  MegaMenu.defaults = {
    event: 'hover',
    direction: 'horizontal',
    breakpoint: 991,
    animationIn: false,
    animationOut: false,

rtl: false,
    hideTimeOut: 300,

// For 'vertical' direction only
    sideBarRatio: 1 / 4,
    pageContainer: $('body'),

classMap: {
      initialized: '.hs-menu-initialized',
      mobileState: '.hs-mobile-state',

subMenu: '.hs-sub-menu',
      hasSubMenu: '.hs-has-sub-menu',
      hasSubMenuActive: '.hs-sub-menu-opened',

megaMenu: '.hs-mega-menu',
      hasMegaMenu: '.hs-has-mega-menu',
      hasMegaMenuActive: '.hs-mega-menu-opened'
    },

mobileSpeed: 400,
    mobileEasing: 'linear',

isMenuOpened: false,

beforeOpen: function () {},
    beforeClose: function () {},
    afterOpen: function () {},
    afterClose: function () {}
  };

/**
   * Initialization of the plugin.
   *
   * @protected
   */
  MegaMenu.prototype.initialize = function () {
    var self = this,
      $w = $(window);

if (this.options.rtl) this.$element.addClass('hs-rtl');

this.$element
      .addClass(this.options.classMap.initialized.slice(1))
      .addClass('hs-menu-' + this.options.direction);

// Independent events
    $w.on('resize.HSMegaMenu', function (e) {

if (self.resizeTimeOutId) clearTimeout(self.resizeTimeOutId);

self.resizeTimeOutId = setTimeout(function () {

if (window.innerWidth <= self.options.breakpoint && self.state === 'desktop') self.initMobileBehavior();
        else if (window.innerWidth > self.options.breakpoint && self.state === 'mobile') self.initDesktopBehavior();

self.refresh();

}, 50);

});

if(window.innerWidth >= 768) {

$(document).on('click.HSMegaMenu touchstart.HSMegaMenu', 'body', function (e) {

var $parents = $(e.target).parents(self.itemsSelector);

self.closeAll($parents.add($(e.target)));

});

}

$w.on('keyup.HSMegaMenu', function (e) {

if (e.keyCode && e.keyCode === 27) {

self.closeAll();

self.options.isMenuOpened = false;
      }

});

if (window.innerWidth <= this.options.breakpoint) this.initMobileBehavior();
    else if (window.innerWidth > this.options.breakpoint) this.initDesktopBehavior();

this.smartPositions();

return this;

};

MegaMenu.prototype.smartPositions = function () {

var self = this,
      $submenus = this.$element.find(this.options.classMap.subMenu);

$submenus.each(function (i, el) {

MenuItem.smartPosition($(el), self.options);

});

};

/**
   * Binding events to menu elements.
   *
   * @protected
   */
  MegaMenu.prototype.bindEvents = function () {

var self = this,
      selector;

// Hover case
    if (this.options.event === 'hover' && !_isTouch()) {
      this.$element
        .on(
          'mouseenter.HSMegaMenu',
          this.options.classMap.hasMegaMenu + ':not([data-event="click"]),' +
          this.options.classMap.hasSubMenu + ':not([data-event="click"])',
          function (e) {

var $this = $(this),
              $chain = $this.parents(self.itemsSelector);

// Lazy initialization
            if (!$this.data('HSMenuItem')) {
              self.initMenuItem($this, self.getType($this));
            }

$chain = $chain.add($this);

self.closeAll($chain);

$chain.each(function (i, el) {

var HSMenuItem = $(el).data('HSMenuItem');

if (HSMenuItem.hideTimeOutId) clearTimeout(HSMenuItem.hideTimeOutId);
              HSMenuItem.desktopShow();

});

self._items = self._items.not($chain);
            self._tempChain = $chain;

e.preventDefault();
            e.stopPropagation();
          }
        )
        .on(
          'mouseleave.HSMegaMenu',
          this.options.classMap.hasMegaMenu + ':not([data-event="click"]),' +
          this.options.classMap.hasSubMenu + ':not([data-event="click"])',
          function (e) {

if (!$(this).data('HSMenuItem')) return;

var $this = $(this),
              HSMenuItem = $this.data('HSMenuItem'),
              $chain = $(e.relatedTarget).parents(self.itemsSelector);

HSMenuItem.hideTimeOutId = setTimeout(function () {
              self.closeAll($chain);
            }, self.options.hideTimeOut);

self._items = self._items.add(self._tempChain);
            self._tempChain = null;

e.preventDefault();
            e.stopPropagation();
          }
        )
        .on(
          'click.HSMegaMenu touchstart.HSMegaMenu',
          this.options.classMap.hasMegaMenu + '[data-event="click"] > a, ' +
          this.options.classMap.hasSubMenu + '[data-event="click"] > a',
          function (e) {

var $this = $(this).parent('[data-event="click"]'),
              HSMenuItem;

// Lazy initialization
            if (!$this.data('HSMenuItem')) {
              self.initMenuItem($this, self.getType($this));
            }

self.closeAll($this.add(
              $this.parents(self.itemsSelector)
            ));

HSMenuItem = $this
              .data('HSMenuItem');

if (HSMenuItem.isOpened) {
              HSMenuItem.desktopHide();
            } else {
              HSMenuItem.desktopShow();
            }

e.preventDefault();
            e.stopPropagation();

}
        );
    }
    // Click case
    else {

this.$element
        .on(
          'click.HSMegaMenu',
          (_isTouch() ?
            this.options.classMap.hasMegaMenu + ' > a, ' +
            this.options.classMap.hasSubMenu + ' > a' :
            this.options.classMap.hasMegaMenu + ':not([data-event="hover"]) > a,' +
            this.options.classMap.hasSubMenu + ':not([data-event="hover"]) > a'),
          function (e) {

var $this = $(this).parent(),
              HSMenuItem,
              $parents = $this.parents(self.itemsSelector);

// Lazy initialization
            if (!$this.data('HSMenuItem')) {
              self.initMenuItem($this, self.getType($this));
            }

self.closeAll($this.add(
              $this.parents(self.itemsSelector)
            ));

HSMenuItem = $this
              .addClass('hs-event-prevented')
              .data('HSMenuItem');

if (HSMenuItem.isOpened) {
              HSMenuItem.desktopHide();
            } else {
              HSMenuItem.desktopShow();
            }

e.preventDefault();
            e.stopPropagation();
          }
        );

if (!_isTouch()) {
        this.$element
          .on(
            'mouseenter.HSMegaMenu',
            this.options.classMap.hasMegaMenu + '[data-event="hover"],' +
            this.options.classMap.hasSubMenu + '[data-event="hover"]',
            function (e) {

var $this = $(this),
                $parents = $this.parents(self.itemsSelector);

// Lazy initialization
              if (!$this.data('HSMenuItem')) {
                self.initMenuItem($this, self.getType($this));
              }

self.closeAll($this.add($parents));

$parents.add($this).each(function (i, el) {

var HSMenuItem = $(el).data('HSMenuItem');

if (HSMenuItem.hideTimeOutId) clearTimeout(HSMenuItem.hideTimeOutId);
                HSMenuItem.desktopShow();

});

e.preventDefault();
              e.stopPropagation();
            }
          )
          .on(
            'mouseleave.HSMegaMenu',
            this.options.classMap.hasMegaMenu + '[data-event="hover"],' +
            this.options.classMap.hasSubMenu + '[data-event="hover"]',
            function (e) {

var $this = $(this),
                HSMenuItem = $this.data('HSMenuItem');

HSMenuItem.hideTimeOutId = setTimeout(function () {

self.closeAll(
                  $(e.relatedTarget).parents(self.itemsSelector)
                );

}, self.options.hideTimeOut);

e.preventDefault();
              e.stopPropagation();
            }
          )
      }
    }

this.$element.on('keydown.HSMegaMenu',
      this.options.classMap.hasMegaMenu + ' > a,' +
      this.options.classMap.hasSubMenu + ' > a',
      function (e) {

var $this = $(this),
          $parent = $this.parent(),
          HSMenuItem;

// Lazy initialization
        if (!$parent.data('HSMenuItem')) {

self.initMenuItem($parent, self.getType($parent));

}

HSMenuItem = $parent.data('HSMenuItem');

if ($this.is(':focus')) {

if (e.keyCode && e.keyCode === 40) {

e.preventDefault();

HSMenuItem.desktopShow();

self.options.isMenuOpened = true;

}

if (e.keyCode && e.keyCode === 13) {

if (self.options.isMenuOpened === true) {

HSMenuItem.desktopHide();

self.options.isMenuOpened = false;

} else {

HSMenuItem.desktopShow();

self.options.isMenuOpened = true;

}

$this.on('focusout', function () {

self.options.isMenuOpened = false;

});

HSMenuItem.menu.find('a').on('focusout', function () {

setTimeout(function () {

if (!HSMenuItem.menu.find('a').is(':focus')) {

HSMenuItem.desktopHide();

self.options.isMenuOpened = false;

}

});

})
  };

/**
   * Initialization of certain menu item.
   *
   * @protected
   */
  MegaMenu.prototype.initMenuItem = function (element, type) {

var self = this,
      Item = new MenuItem(
        element,
        element.children(
          self.options.classMap[type === 'mega-menu' ? 'megaMenu' : 'subMenu']
        ),
        $.extend(true, {type: type}, self.options, element.data()),
        self.$element
      );

element.data('HSMenuItem', Item);
    this._items = this._items.add(element);

};

/**
   * Destroys of desktop behavior, then makes initialization of mobile behavior.
   *
   * @protected
   */
  MegaMenu.prototype.initMobileBehavior = function () {

var self = this;

this.state = 'mobile';

this.$element
      .off('.HSMegaMenu')
      .addClass(this.options.classMap.mobileState.slice(1))
      .on('click.HSMegaMenu', self.options.classMap.hasSubMenu + ' > a, ' + self.options.classMap.hasMegaMenu + ' > a', function (e) {

var $this = $(this).parent(),
          MenuItemInstance;

// Lazy initialization
        if (!$this.data('HSMenuItem')) {
          self.initMenuItem($this, self.getType($this));
        }

self.closeAll($this.parents(self.itemsSelector).add($this));

MenuItemInstance = $this
          .data('HSMenuItem');

if (MenuItemInstance.isOpened) {
          MenuItemInstance.mobileHide();
        } else {
          MenuItemInstance.mobileShow();
        }

e.preventDefault();
        e.stopPropagation();

})
      .find(this.itemsSelector)
      .not(
        this.options.classMap.hasSubMenuActive + ',' +
        this.options.classMap.hasMegaMenuActive
      )
      .children(
        this.options.classMap.subMenu + ',' +
        this.options.classMap.megaMenu
      )
      .hide();

};

/**
   * Destroys of mobile behavior, then makes initialization of desktop behavior.
   *
   * @protected
   */
  MegaMenu.prototype.initDesktopBehavior = function () {

this.state = 'desktop';

this.$element
      .removeClass(this.options.classMap.mobileState.slice(1))
      .off('.HSMegaMenu')
      .find(this.itemsSelector)
      .not(
        this.options.classMap.hasSubMenuActive + ',' +
        this.options.classMap.hasMegaMenuActive
      )
      .children(
        this.options.classMap.subMenu + ',' +
        this.options.classMap.megaMenu
      )
      .hide();

this.bindEvents();

};

/**
   * Hides all of opened submenus/megamenus.
   *
   * @param {jQuery} except - collection of elements, which shouldn't be closed.
   * @return {jQuery}
   * @public
   */
  MegaMenu.prototype.closeAll = function (except) {

var self = this;

return this._items.not(except && except.length ? except : $()).each(function (i, el) {

$(el)
        .removeClass('hs-event-prevented')
        .data('HSMenuItem')[self.state === 'mobile' ? 'mobileHide' : 'desktopHide']();

});

};

/**
   * Returns type of sub menu based on specified menu item.
   *
   * @param {jQuery} item
   * @return {String|null}
   * @public
   */
  MegaMenu.prototype.getType = function (item) {

if (!item || !item.length) return null;

return item.hasClass(this.options.classMap.hasSubMenu.slice(1)) ? 'sub-menu' :
      (item.hasClass(this.options.classMap.hasMegaMenu.slice(1)) ? 'mega-menu' : null);

};

/**
   * Returns current menu state.
   *
   * @return {String}
   * @public
   */
  MegaMenu.prototype.getState = function () {
    return this.state;
  };

/**
   * Updates bounds of all menu items.
   *
   * @return {jQuery}
   * @public
   */
  MegaMenu.prototype.refresh = function () {

return this._items.add(this._tempChain).each(function (i, el) {
      $(el).data('HSMenuItem')._updateMenuBounds();
    });

};

/**
   * Creates a mega-menu element.
   *
   * @param {jQuery} element
   * @param {jQuery} menu
   * @param {Object} options
   * @param {jQuery} container
   * @constructor
   */
  function MenuItem(element, menu, options, container) {

var self = this;

/**
     * Current menu item element.
     *
     * @public
     */
    this.$element = element;

/**
     * Current mega menu element.
     *
     * @public
     */
    this.menu = menu;

/**
     * Item options.
     *
     * @public
     */
    this.options = options;

/**
     * MegaMenu container.
     *
     * @public
     */
    this.$container = container;

Object.defineProperties(this, {

/**
       * Contains css class of menu item element.
       *
       * @public
       */
      itemClass: {
        get: function () {
          return self.options.type === 'mega-menu' ?
            self.options.classMap.hasMegaMenu :
            self.options.classMap.hasSubMenu;
        }
      },

/**
       * Contains css active-class of menu item element.
       *
       * @public
       */
      activeItemClass: {
        get: function () {
          return self.options.type === 'mega-menu' ?
            self.options.classMap.hasMegaMenuActive :
            self.options.classMap.hasSubMenuActive;
        }
      },

/**
       * Contains css class of menu element.
       *
       * @public
       */
      menuClass: {
        get: function () {
          return self.options.type === 'mega-menu' ?
            self.options.classMap.megaMenu :
            self.options.classMap.subMenu;
        }
      },

isOpened: {
        get: function () {
          return this.$element.hasClass(this.activeItemClass.slice(1));
        }
      }

});

this.menu.addClass('animated').on('click.HSMegaMenu', function (e) {
      self._updateMenuBounds();
    });

if (this.$element.data('max-width')) this.menu.css('max-width', this.$element.data('max-width'));
    if (this.$element.data('position')) this.menu.addClass('hs-position-' + this.$element.data('position'));

if (this.options.animationOut) {

this.menu.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function (e) {

if (self.menu.hasClass(self.options.animationOut)) {
          self.$element.removeClass(self.activeItemClass.slice(1));
          self.options.afterClose.call(self, self.$element, self.menu);
        }

if (self.menu.hasClass(self.options.animationIn)) {
          self.options.afterOpen.call(self, self.$element, self.menu);
        }

e.stopPropagation();
        e.preventDefault();
      });
    }

}

/**
   * Shows the mega-menu item.
   *
   * @public
   * @return {MenuItem}
   */
  MenuItem.prototype.desktopShow = function () {
    if (!this.menu.length) return this;

this.$element.addClass(this.activeItemClass.slice(1));

this._updateMenuBounds();

this.menu.show();

if (this.options.direction === 'horizontal') this.smartPosition(this.menu, this.options);

if (this.options.animationOut) {
      this.menu.removeClass(this.options.animationOut);
    } else {
      this.options.afterOpen.call(this, this.$element, this.menu);
    }

if (this.options.animationIn) {
      this.menu.addClass(this.options.animationIn)
    }

return this;
  }

/**
   * Hides the mega-menu item.
   *
   * @public
   * @return {MenuItem}
   */
  MenuItem.prototype.desktopHide = function () {

var self = this;

if (!this.menu.length) return this;

this.$element.removeClass(this.activeItemClass.slice(1));

this.menu.hide();

if (this.options.animationIn) {
      this.menu.removeClass(this.options.animationIn);
    }
    if (this.options.animationOut) {
      this.menu.addClass(this.options.animationOut);
    } else {
      this.options.afterClose.call(this, this.$element, this.menu);
    }

return this;
  }

/**
   * Shows the mega-menu item.
   *
   * @public
   * @return {MenuItem}
   */
  MenuItem.prototype.mobileShow = function () {
    var self = this;

if (!this.menu.length) return this;

this.menu
      .removeClass(this.options.animationIn)
      .removeClass(this.options.animationOut)
      .stop()
      .slideDown({
        duration: self.options.mobileSpeed,
        easing: self.options.mobileEasing,
        complete: function () {
          self.options.afterOpen.call(self, self.$element, self.menu);
        }
      });

this.$element.addClass(this.activeItemClass.slice(1));

return this;
  };

/**
   * Hides the mega-menu item.
   *
   * @public
   * @return {MenuItem}
   */
  MenuItem.prototype.mobileHide = function () {
    var self = this;

if (!this.menu.length) return this;

this.menu.stop().slideUp({
      duration: self.options.mobileSpeed,
      easing: self.options.mobileEasing,
      complete: function () {
        self.options.afterClose.call(self, self.$element, self.menu);
      }
    });

this.$element.removeClass(this.activeItemClass.slice(1));

return this;
  };

/**
   * Check, if element is in viewport.
   *
   * @param {jQuery} element
   * @param {Object} options
   * @public
   */
  MenuItem.prototype.smartPosition = function (element, options) {

MenuItem.smartPosition(element, options);

};

/**
   * Check, if element is in viewport.
   *
   * @param {jQuery} element
   * @param {Object} options
   * @static
   * @public
   */
  MenuItem.smartPosition = function (element, options) {
    if (!element && !element.length) return;

var $w = $(window);

element.removeClass('hs-reversed');

if (!options.rtl) {

if (element.offset().left + element.outerWidth() > window.innerWidth) {
        element.addClass('hs-reversed');
      }

} else {

if (element.offset().left < 0) {
        element.addClass('hs-reversed');
      }

}
  };

/**
   * Updates bounds of current opened menu.
   *
   * @private
   */
  MenuItem.prototype._updateMenuBounds = function () {

var width = 'auto';

if (this.options.direction === 'vertical' && this.options.type === 'mega-menu') {

if (this.$container && this.$container.data('HSMegaMenu').getState() === 'desktop') {
        if (!this.options.pageContainer.length) this.options.pageContainer = $('body');
        width = this.options.pageContainer.outerWidth() * (1 - this.options.sideBarRatio);
      } else {
        width = 'auto';
      }

this.menu.css({
        'width': width,
        'height': 'auto'
      });

if (this.menu.outerHeight() > this.$container.outerHeight()) {
        return;
      }

this.menu.css('height', '100%');
    }

};

/**
   * The jQuery plugin for the MegaMenu.
   *
   * @public
   */

$.fn.HSMegaMenu = function () {
    var _ = this,
      opt = arguments[0],
      args = Array.prototype.slice.call(arguments, 1),
      l = _.length,
      i,
      ret;
    for (i = 0; i < l; i++) {
      if (typeof opt === 'object' || typeof opt === 'undefined')
        _[i].MegaMenu = new MegaMenu(_[i], opt);
      else
        ret = _[i].MegaMenu[opt].apply(_[i].MegaMenu, args);
      if (typeof ret != 'undefined') return ret;
    }
    return _;
  };

/**
   * Helper function for detect touch events in the environment.
   *
   * @return {Boolean}
   * @private
   */
  function _isTouch() {
    return ('ontouchstart' in window);
  }

})(jQuery);

İptal

📁 PHP Dosya Yöneticisi

📝 hs.megamenu.js

📝 hs.megamenu.js

📝 Yeniden Adlandır

🔐 Dosya İzinleri (chmod)