common.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. $(function()
  2. {
  3. 'use strict';
  4. var NAME = 'zui.splitRow'; // model name
  5. // File input list
  6. // The SplitRow model class
  7. var SplitRow = function(element, options)
  8. {
  9. var that = this;
  10. that.name = NAME;
  11. var $element = that.$ = $(element);
  12. options = that.options = $.extend({}, SplitRow.DEFAULTS, this.$.data(), options);
  13. var id = options.id || $element.attr('id') || $.zui.uuid();
  14. var $cols = $element.children('.side-col,.main-col');
  15. var $firstCol = $cols.first();
  16. var $secondCol = $cols.eq(1);
  17. var $spliter = $firstCol.next('.col-spliter');
  18. if (!$spliter.length)
  19. {
  20. $spliter = $(options.spliter);
  21. if (!$spliter.parent().length)
  22. {
  23. $spliter.insertAfter($firstCol);
  24. }
  25. }
  26. var spliterWidth = $spliter.width();
  27. var minFirstColWidth = $firstCol.data('minWidth');
  28. var minSecondColWidth = $secondCol.data('minWidth');
  29. var setFirstColWidth = function(width)
  30. {
  31. var rowWidth = $element.width();
  32. var maxFirstWidth = rowWidth - minSecondColWidth - spliterWidth;
  33. width = Math.max(minFirstColWidth, Math.min(width, maxFirstWidth));
  34. $firstCol.width(width);
  35. $.zui.store.set('splitRowFirstSize:' + id, width);
  36. };
  37. var defaultWidth = $.zui.store.get('splitRowFirstSize:' + id);
  38. if(typeof(defaultWidth) == 'undefined')
  39. {
  40. defaultWidth = 0;
  41. $firstCol.find('.tabs ul.nav-tabs li').each(function(){defaultWidth += $(this).outerWidth()});
  42. defaultWidth += ($firstCol.find('.tabs ul.nav-tabs li').length - 1) * 10;
  43. defaultWidth += 30;
  44. }
  45. setFirstColWidth(defaultWidth);
  46. var documentEventName = '.' + id;
  47. var mouseDownX, isMouseDown, startFirstWidth;
  48. $spliter.on('mousedown', function(e)
  49. {
  50. startFirstWidth = $firstCol.width();
  51. mouseDownX = e.pageX;
  52. isMouseDown = true;
  53. $element.addClass('row-spliting');
  54. e.preventDefault();
  55. $(document).on('mousemove' + documentEventName, function(e)
  56. {
  57. if (isMouseDown)
  58. {
  59. var deltaX = e.pageX - mouseDownX;
  60. setFirstColWidth(startFirstWidth + deltaX);
  61. e.preventDefault();
  62. } else {
  63. $(document).off(documentEventName);
  64. $element.removeClass('row-spliting');
  65. }
  66. }).on('mouseup' + documentEventName + ' mouseleave' + documentEventName, function(e)
  67. {
  68. isMouseDown = false;
  69. $(document).off(documentEventName);
  70. $element.removeClass('row-spliting');
  71. });
  72. });
  73. var fixColClass = function($col)
  74. {
  75. if (options.smallSize) $col.toggleClass('col-sm-size', $col.width() < options.smallSize);
  76. if (options.middleSize) $col.toggleClass('col-md-size', $col.width() < options.middleSize);
  77. };
  78. var resizeCols = function() {
  79. var cellHeight = $(window).height() - $('#footer').outerHeight() - $('#header').outerHeight() - 42;
  80. $cols.children('.panel').height(cellHeight).css('maxHeight', cellHeight).find('.panel-body').css('position', 'absolute');
  81. var sideHeight = cellHeight - $cols.find('.nav-tabs').height() - $cols.find('.side-footer').height() - 35;
  82. $cols.find('.tab-content').height(sideHeight).css('maxHeight', sideHeight).css('overflow-y', 'auto');
  83. };
  84. $(window).on('resize', resizeCols);
  85. $firstCol.on('resize', function(e) {fixColClass($firstCol);});
  86. $secondCol.on('resize', function(e) {fixColClass($secondCol);});
  87. fixColClass($firstCol);
  88. fixColClass($secondCol);
  89. resizeCols();
  90. };
  91. // default options
  92. SplitRow.DEFAULTS =
  93. {
  94. spliter: '<div class="col-spliter"></div>',
  95. smallSize: 700,
  96. middleSize: 850
  97. };
  98. // Extense jquery element
  99. $.fn.splitRow = function(option)
  100. {
  101. return this.each(function()
  102. {
  103. var $this = $(this);
  104. var data = $this.data(NAME);
  105. var options = typeof option == 'object' && option;
  106. if(!data) $this.data(NAME, (data = new SplitRow(this, options)));
  107. });
  108. };
  109. SplitRow.NAME = NAME;
  110. $.fn.splitRow.Constructor = SplitRow;
  111. // Auto call splitRow after document load complete
  112. $(function()
  113. {
  114. $('.split-row').splitRow();
  115. });
  116. var $pageSetting = $('#pageSetting');
  117. if($pageSetting.length)
  118. {
  119. $pageSetting.on('click', '.close-dropdown', function()
  120. {
  121. $pageSetting.parent().removeClass('open');
  122. }).on('click', function(e){e.stopPropagation()});
  123. }
  124. });