slide.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. /**
  6. * @api
  7. */
  8. define([
  9. 'jquery',
  10. 'jquery/ui'
  11. ], function ($) {
  12. 'use strict';
  13. $.widget('mage.slide', {
  14. options: {
  15. slideSpeed: 1500,
  16. slideSelector: '#bundle-slide',
  17. slideBackSelector: '.bundle-slide-back',
  18. bundleProductSelector: '#bundleProduct',
  19. bundleOptionsContainer: '#options-container',
  20. productViewContainer: '#productView',
  21. slidedown: true
  22. },
  23. /** @inheritdoc */
  24. _create: function () {
  25. if (this.options.slidedown === true) {
  26. $(this.options.slideSelector).on('click', $.proxy(this._show, this));
  27. $(this.options.slideBackSelector).on('click', $.proxy(this._hide, this));
  28. this.options.autostart && this._show();
  29. } else {
  30. $(this.options.slideSelector).on('click', $.proxy(this._slide, this));
  31. $(this.options.slideBackSelector).on('click', $.proxy(this._slideBack, this));
  32. this.options.autostart && this._slide();
  33. }
  34. },
  35. /**
  36. * slide bundleOptionsContainer over to the main view area
  37. * @private
  38. */
  39. _slide: function () {
  40. $(this.options.bundleProductSelector).css('top', '0px');
  41. $(this.options.bundleOptionsContainer).show();
  42. this.element.css('height', $(this.options.productViewContainer).height() + 'px');
  43. $(this.options.bundleProductSelector).css('left', '0px').animate(
  44. {
  45. 'left': '-' + this.element.width() + 'px'
  46. },
  47. this.options.slideSpeed,
  48. $.proxy(function () {
  49. this.element.css('height', 'auto');
  50. $(this.options.productViewContainer).hide();
  51. }, this)
  52. );
  53. },
  54. /**
  55. * slideback productViewContainer to main view area
  56. * @private
  57. */
  58. _slideBack: function () {
  59. $(this.options.bundleProductSelector).css('top', '0px');
  60. $(this.options.productViewContainer).show();
  61. this.element.css('height', $(this.options.bundleOptionsContainer).height() + 'px');
  62. $(this.options.bundleProductSelector).animate(
  63. {
  64. 'left': '0px'
  65. },
  66. this.options.slideSpeed,
  67. $.proxy(function () {
  68. $(this.options.bundleOptionsContainer).hide();
  69. this.element.css('height', 'auto');
  70. }, this)
  71. );
  72. },
  73. /**
  74. * @private
  75. */
  76. _show: function () {
  77. $(this.options.bundleOptionsContainer).slideDown(800);
  78. $('html, body').animate({
  79. scrollTop: $(this.options.bundleOptionsContainer).offset().top
  80. }, 600);
  81. $('#product-options-wrapper > fieldset').focus();
  82. },
  83. /**
  84. * @private
  85. */
  86. _hide: function () {
  87. $('html, body').animate({
  88. scrollTop: 0
  89. }, 600);
  90. $(this.options.bundleOptionsContainer).slideUp(800);
  91. }
  92. });
  93. return $.mage.slide;
  94. });