ImageDialog.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. define([
  2. 'summernote/core/key'
  3. ], function (key) {
  4. var ImageDialog = function (handler) {
  5. /**
  6. * toggle button status
  7. *
  8. * @private
  9. * @param {jQuery} $btn
  10. * @param {Boolean} isEnable
  11. */
  12. var toggleBtn = function ($btn, isEnable) {
  13. $btn.toggleClass('disabled', !isEnable);
  14. $btn.attr('disabled', !isEnable);
  15. };
  16. /**
  17. * bind enter key
  18. *
  19. * @private
  20. * @param {jQuery} $input
  21. * @param {jQuery} $btn
  22. */
  23. var bindEnterKey = function ($input, $btn) {
  24. $input.on('keypress', function (event) {
  25. if (event.keyCode === key.code.ENTER) {
  26. $btn.trigger('click');
  27. }
  28. });
  29. };
  30. this.show = function (layoutInfo) {
  31. var $dialog = layoutInfo.dialog(),
  32. $editable = layoutInfo.editable();
  33. handler.invoke('editor.saveRange', $editable);
  34. this.showImageDialog($editable, $dialog).then(function (data) {
  35. handler.invoke('editor.restoreRange', $editable);
  36. if (typeof data === 'string') {
  37. // image url
  38. handler.invoke('editor.insertImage', $editable, data);
  39. } else {
  40. // array of files
  41. handler.insertImages(layoutInfo, data);
  42. }
  43. }).fail(function () {
  44. handler.invoke('editor.restoreRange', $editable);
  45. });
  46. };
  47. /**
  48. * show image dialog
  49. *
  50. * @param {jQuery} $editable
  51. * @param {jQuery} $dialog
  52. * @return {Promise}
  53. */
  54. this.showImageDialog = function ($editable, $dialog) {
  55. return $.Deferred(function (deferred) {
  56. var $imageDialog = $dialog.find('.note-image-dialog');
  57. var $imageInput = $dialog.find('.note-image-input'),
  58. $imageUrl = $dialog.find('.note-image-url'),
  59. $imageBtn = $dialog.find('.note-image-btn');
  60. $imageDialog.one('shown.bs.modal', function () {
  61. // Cloning imageInput to clear element.
  62. $imageInput.replaceWith($imageInput.clone()
  63. .on('change', function () {
  64. deferred.resolve(this.files || this.value);
  65. $imageDialog.modal('hide');
  66. })
  67. .val('')
  68. );
  69. $imageBtn.click(function (event) {
  70. event.preventDefault();
  71. deferred.resolve($imageUrl.val());
  72. $imageDialog.modal('hide');
  73. });
  74. $imageUrl.on('keyup paste', function (event) {
  75. var url;
  76. if (event.type === 'paste') {
  77. url = event.originalEvent.clipboardData.getData('text');
  78. } else {
  79. url = $imageUrl.val();
  80. }
  81. toggleBtn($imageBtn, url);
  82. }).val('').trigger('focus');
  83. bindEnterKey($imageUrl, $imageBtn);
  84. }).one('hidden.bs.modal', function () {
  85. $imageInput.off('change');
  86. $imageUrl.off('keyup paste keypress');
  87. $imageBtn.off('click');
  88. if (deferred.state() === 'pending') {
  89. deferred.reject();
  90. }
  91. }).modal('show');
  92. });
  93. };
  94. };
  95. return ImageDialog;
  96. });