/js/jquery.dialogelfinder.js

http://github.com/Studio-42/elFinder · JavaScript · 102 lines · 73 code · 14 blank · 15 comment · 16 complexity · e64e126810cef9f9f0f4ec9d8029081a MD5 · raw file

  1. /**
  2. * @class dialogelfinder - open elFinder in dialog window
  3. *
  4. * @param Object elFinder options with dialog options
  5. * @example
  6. * $(selector).dialogelfinder({
  7. * // some elfinder options
  8. * title : 'My files', // dialog title, default = "Files"
  9. * width : 850, // dialog width, default 840
  10. * autoOpen : false, // if false - dialog will not be opened after init, default = true
  11. * destroyOnClose : true // destroy elFinder on close dialog, default = false
  12. * })
  13. * @author Dmitry (dio) Levashov
  14. **/
  15. $.fn.dialogelfinder = function(opts, opts2) {
  16. var position = 'elfinderPosition',
  17. destroy = 'elfinderDestroyOnClose',
  18. node, pos;
  19. if ($.isPlainObject(opts)) {
  20. this.not('.elfinder').each(function() {
  21. opts.handlers = opts.handlers || {};
  22. var node = $(this),
  23. doc = $(document),
  24. toolbar = $('<div class="ui-widget-header dialogelfinder-drag ui-corner-top">'+(opts.title || 'Files')+'</div>'),
  25. button = $('<a href="#" class="dialogelfinder-drag-close ui-corner-all"><span class="ui-icon ui-icon-closethick"> </span></a>')
  26. .appendTo(toolbar)
  27. .on('click', function(e) {
  28. e.preventDefault();
  29. node.dialogelfinder('close');
  30. }),
  31. init = opts.handlers.init,
  32. elfinder;
  33. opts.handlers.init = function(e, fm) {
  34. node.prepend(toolbar);
  35. init && init(e, fm);
  36. };
  37. elfinder = node.addClass('elfinder dialogelfinder touch-punch')
  38. .css('position', 'absolute')
  39. .hide()
  40. .appendTo('body')
  41. .draggable({
  42. handle : '.dialogelfinder-drag',
  43. containment : 'window',
  44. stop : function() {
  45. node.trigger('resize');
  46. elfinder.trigger('resize');
  47. }
  48. })
  49. .elfinder(opts, opts2)
  50. .elfinder('instance');
  51. elfinder.reloadCallback = function(o, o2) {
  52. elfinder.destroy();
  53. o.handlers.init = init;
  54. node.dialogelfinder(o, o2).dialogelfinder('open');
  55. };
  56. node.width(parseInt(node.width()) || 840) // fix width if set to "auto"
  57. .data(destroy, !!opts.destroyOnClose)
  58. .find('.elfinder-toolbar').removeClass('ui-corner-top');
  59. opts.position && node.data(position, opts.position);
  60. opts.autoOpen !== false && $(this).dialogelfinder('open');
  61. });
  62. } else {
  63. if (opts === 'open') {
  64. node = $(this);
  65. pos = node.data(position) || {
  66. top : parseInt($(document).scrollTop() + ($(window).height() < node.height() ? 2 : ($(window).height() - node.height())/2)),
  67. left : parseInt($(document).scrollLeft() + ($(window).width() < node.width() ? 2 : ($(window).width() - node.width())/2))
  68. };
  69. if (node.is(':hidden')) {
  70. node.addClass('ui-front').css(pos).show().trigger('resize');
  71. setTimeout(function() {
  72. // fix resize icon position and make elfinder active
  73. node.trigger('resize').trigger('mousedown');
  74. }, 200);
  75. }
  76. } else if (opts === 'close') {
  77. node = $(this).removeClass('ui-front');
  78. if (node.is(':visible')) {
  79. !!node.data(destroy)
  80. ? node.elfinder('destroy').remove()
  81. : node.elfinder('close');
  82. }
  83. } else if (opts === 'instance') {
  84. return $(this).getElFinder();
  85. }
  86. }
  87. return this;
  88. };