backbone-modal.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /*global jQuery, Backbone, _ */
  2. ( function( $, Backbone, _ ) {
  3. 'use strict';
  4. /**
  5. * WooCommerce Backbone Modal plugin
  6. *
  7. * @param {object} options
  8. */
  9. $.fn.WCBackboneModal = function( options ) {
  10. return this.each( function() {
  11. ( new $.WCBackboneModal( $( this ), options ) );
  12. });
  13. };
  14. /**
  15. * Initialize the Backbone Modal
  16. *
  17. * @param {object} element [description]
  18. * @param {object} options [description]
  19. */
  20. $.WCBackboneModal = function( element, options ) {
  21. // Set settings
  22. var settings = $.extend( {}, $.WCBackboneModal.defaultOptions, options );
  23. if ( settings.template ) {
  24. new $.WCBackboneModal.View({
  25. target: settings.template,
  26. string: settings.variable
  27. });
  28. }
  29. };
  30. /**
  31. * Set default options
  32. *
  33. * @type {object}
  34. */
  35. $.WCBackboneModal.defaultOptions = {
  36. template: '',
  37. variable: {}
  38. };
  39. /**
  40. * Create the Backbone Modal
  41. *
  42. * @return {null}
  43. */
  44. $.WCBackboneModal.View = Backbone.View.extend({
  45. tagName: 'div',
  46. id: 'wc-backbone-modal-dialog',
  47. _target: undefined,
  48. _string: undefined,
  49. events: {
  50. 'click .modal-close': 'closeButton',
  51. 'click #btn-ok' : 'addButton',
  52. 'touchstart #btn-ok': 'addButton',
  53. 'keydown' : 'keyboardActions'
  54. },
  55. resizeContent: function() {
  56. var $content = $( '.wc-backbone-modal-content' ).find( 'article' );
  57. var max_h = $( window ).height() * 0.75;
  58. $content.css({
  59. 'max-height': max_h + 'px'
  60. });
  61. },
  62. initialize: function( data ) {
  63. var view = this;
  64. this._target = data.target;
  65. this._string = data.string;
  66. _.bindAll( this, 'render' );
  67. this.render();
  68. $( window ).resize(function() {
  69. view.resizeContent();
  70. });
  71. },
  72. render: function() {
  73. var template = wp.template( this._target );
  74. this.$el.append(
  75. template( this._string )
  76. );
  77. $( document.body ).css({
  78. 'overflow': 'hidden'
  79. }).append( this.$el );
  80. this.resizeContent();
  81. this.$( '.wc-backbone-modal-content' ).attr( 'tabindex' , '0' ).focus();
  82. $( document.body ).trigger( 'init_tooltips' );
  83. $( document.body ).trigger( 'wc_backbone_modal_loaded', this._target );
  84. },
  85. closeButton: function( e ) {
  86. e.preventDefault();
  87. $( document.body ).trigger( 'wc_backbone_modal_before_remove', this._target );
  88. this.undelegateEvents();
  89. $( document ).off( 'focusin' );
  90. $( document.body ).css({
  91. 'overflow': 'auto'
  92. });
  93. this.remove();
  94. $( document.body ).trigger( 'wc_backbone_modal_removed', this._target );
  95. },
  96. addButton: function( e ) {
  97. $( document.body ).trigger( 'wc_backbone_modal_response', [ this._target, this.getFormData() ] );
  98. this.closeButton( e );
  99. },
  100. getFormData: function() {
  101. var data = {};
  102. $( document.body ).trigger( 'wc_backbone_modal_before_update', this._target );
  103. $.each( $( 'form', this.$el ).serializeArray(), function( index, item ) {
  104. if ( item.name.indexOf( '[]' ) !== -1 ) {
  105. item.name = item.name.replace( '[]', '' );
  106. data[ item.name ] = $.makeArray( data[ item.name ] );
  107. data[ item.name ].push( item.value );
  108. } else {
  109. data[ item.name ] = item.value;
  110. }
  111. });
  112. return data;
  113. },
  114. keyboardActions: function( e ) {
  115. var button = e.keyCode || e.which;
  116. // Enter key
  117. if ( 13 === button && ! ( e.target.tagName && ( e.target.tagName.toLowerCase() === 'input' || e.target.tagName.toLowerCase() === 'textarea' ) ) ) {
  118. this.addButton( e );
  119. }
  120. // ESC key
  121. if ( 27 === button ) {
  122. this.closeButton( e );
  123. }
  124. }
  125. });
  126. }( jQuery, Backbone, _ ));