113 lines
3.3 KiB
JavaScript
Executable File
113 lines
3.3 KiB
JavaScript
Executable File
/**
|
|
* Copyright © Magento, Inc. All rights reserved.
|
|
* See COPYING.txt for license details.
|
|
*/
|
|
|
|
define([
|
|
'jquery',
|
|
'jquery/ui'
|
|
], function ($) {
|
|
'use strict';
|
|
|
|
$.widget('mage.floatingHeader', {
|
|
options: {
|
|
placeholderAttrs: {
|
|
'class': 'page-actions-placeholder'
|
|
},
|
|
fixedClass: '_fixed',
|
|
hiddenClass: '_hidden',
|
|
title: '.page-title-wrapper .page-title',
|
|
pageMainActions: '.page-main-actions',
|
|
contains: '[data-role=modal]'
|
|
},
|
|
|
|
/**
|
|
* Widget initialization
|
|
* @private
|
|
*/
|
|
_create: function () {
|
|
var title = $(this.options.title).text(),
|
|
wrapped = this.element.find('.page-actions-buttons').children();
|
|
|
|
if (this.element.parents(this.options.contains).length) {
|
|
return this;
|
|
}
|
|
|
|
this._setVars();
|
|
this._bind();
|
|
this.element.find('script').remove();
|
|
|
|
if (wrapped.length) {
|
|
wrapped
|
|
.unwrap() // .page-actions-buttons
|
|
.unwrap(); // .page-actions-inner
|
|
}
|
|
this.element.wrapInner($('<div></div>', {
|
|
'class': 'page-actions-buttons'
|
|
}));
|
|
this.element.wrapInner($('<div></div>', {
|
|
'class': 'page-actions-inner', 'data-title': title
|
|
}));
|
|
this.element.removeClass('floating-header');
|
|
},
|
|
|
|
/**
|
|
* Set privat variables on load, for performance purposes
|
|
* @private
|
|
*/
|
|
_setVars: function () {
|
|
this._placeholder = this.element.before($('<div/>', this.options.placeholderAttrs)).prev();
|
|
this._offsetTop = this._placeholder.offset().top;
|
|
this._height = this.element
|
|
.parents(this.options.pageMainActions)
|
|
.outerHeight();
|
|
},
|
|
|
|
/**
|
|
* Event binding, will monitor scroll and resize events (resize events left for backward compat)
|
|
* @private
|
|
*/
|
|
_bind: function () {
|
|
this._on(window, {
|
|
scroll: this._handlePageScroll,
|
|
resize: this._handlePageScroll
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Event handler for setting fixed positioning
|
|
* @private
|
|
*/
|
|
_handlePageScroll: function () {
|
|
var isActive = $(window).scrollTop() > this._offsetTop;
|
|
|
|
if (isActive) {
|
|
this.element
|
|
.addClass(this.options.fixedClass)
|
|
.parents(this.options.pageMainActions)
|
|
.addClass(this.options.hiddenClass);
|
|
} else {
|
|
this.element
|
|
.removeClass(this.options.fixedClass)
|
|
.parents(this.options.pageMainActions)
|
|
.removeClass(this.options.hiddenClass);
|
|
}
|
|
|
|
this._placeholder.height(isActive ? this._height : '');
|
|
},
|
|
|
|
/**
|
|
* Widget destroy functionality
|
|
* @private
|
|
*/
|
|
_destroy: function () {
|
|
if (this._placeholder) {
|
|
this._placeholder.remove();
|
|
}
|
|
this._off($(window));
|
|
}
|
|
});
|
|
|
|
return $.mage.floatingHeader;
|
|
});
|