xscroll-master.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. define(function(require, exports, module) {
  2. "use strict";
  3. var Util = require('./util'),
  4. Base = require('./base'),
  5. XScroll = require('./xscroll');
  6. /**
  7. * A master for multi-scrollers.
  8. * @constructor
  9. * @param {object} cfg - config for master.
  10. * @extends Base
  11. */
  12. var XScrollMaster = function(cfg) {
  13. XScrollMaster.superclass.constructor.call(this, cfg);
  14. this.init(cfg);
  15. }
  16. Util.extend(XScrollMaster, Base, {
  17. /**
  18. * init the master
  19. * @memberof XScrollMaster
  20. * @param {object} cfg config for master
  21. * @param {string} selector xscroll root elements,it will be set to xscroll.renderTo
  22. * @return {XScrollMaster}
  23. */
  24. init: function(cfg) {
  25. var self = this;
  26. self.userConfig = Util.mix({
  27. selector: ".xscroll"
  28. }, cfg)
  29. return self;
  30. },
  31. /**
  32. * find xscroll instance
  33. * @memberof XScrollMaster
  34. * @param {string} id element id for xscroll instance
  35. * @return {XScroll} xscroll instance
  36. */
  37. get: function(id) {
  38. var self = this;
  39. if (!id) return;
  40. for (var i = 0, l = self.xscrolls.length; i < l; i++) {
  41. if (self.xscrolls[i].renderTo.id === id) {
  42. return self.xscrolls[i];
  43. }
  44. }
  45. return;
  46. },
  47. getElPos: function() {
  48. var self = this;
  49. var elpos = [];
  50. var els = document.querySelectorAll(self.userConfig.selector);
  51. for (var i = 0; i < els.length; i++) {
  52. var content = els[i].querySelector('.xs-content');
  53. elpos.push({
  54. el: els[i],
  55. containerWidth: content.offsetWidth,
  56. containerHeight: content.offsetHeight,
  57. width: els[i].offsetWidth,
  58. height: els[i].offsetHeight
  59. })
  60. }
  61. return elpos;
  62. },
  63. /**
  64. * render xscrolls
  65. * @memberof XScrollMaster
  66. * @return {XScrollMaster}
  67. */
  68. render: function() {
  69. var self = this;
  70. var findByEl = function(el, xscrolls) {
  71. if (!el || !xscrolls) return;
  72. for (var i = 0, l = xscrolls.length; i < l; i++) {
  73. if (xscrolls[i].renderTo === el) {
  74. return xscrolls[i];
  75. }
  76. }
  77. }
  78. var els = document.querySelectorAll(self.userConfig.selector);
  79. var elpos = self.getElPos();
  80. for(var i in self.xscrolls){
  81. //destroy
  82. self.xscrolls[i].destroy();
  83. }
  84. self.xscrolls = [];
  85. for (var i = 0; i < els.length; i++) {
  86. self.xscrolls.push(new XScroll({
  87. renderTo: els[i],
  88. containerWidth: elpos[i].containerWidth,
  89. containerHeight: elpos[i].containerHeight,
  90. width: elpos[i].width,
  91. height: elpos[i].height
  92. }).render());
  93. }
  94. for (var i = 0, l = self.xscrolls.length; i < l; i++) {
  95. var innerEls = self.xscrolls[i].renderTo.querySelectorAll(self.userConfig.selector);
  96. for (var j = 0; j < innerEls.length; j++) {
  97. var xscroll = findByEl(innerEls[j], self.xscrolls);
  98. if (xscroll && self.xscrolls[i].controller) {
  99. self.xscrolls[i].controller.add(xscroll);
  100. }
  101. }
  102. }
  103. self._bindEvt();
  104. return self;
  105. },
  106. _bindEvt: function() {
  107. var self = this;
  108. window.addEventListener("resize", function(e) {
  109. setTimeout(function() {
  110. var elpos = self.getElPos();
  111. for (var i = 0, l = self.xscrolls.length; i < l; i++) {
  112. var xscroll = self.xscrolls[i];
  113. xscroll.userConfig.containerWidth = elpos[i].containerWidth;
  114. xscroll.userConfig.containerHeight = elpos[i].containerHeight;
  115. xscroll.userConfig.width = elpos[i].width;
  116. xscroll.userConfig.height = elpos[i].height;
  117. xscroll.boundry.refresh({
  118. width: xscroll.userConfig.width,
  119. height: xscroll.userConfig.height
  120. });
  121. xscroll.boundryCheck(0);
  122. xscroll.render();
  123. }
  124. }, 0);
  125. }, self);
  126. }
  127. });
  128. if (typeof module == 'object' && module.exports) {
  129. module.exports = XScrollMaster;
  130. }
  131. /** ignored by jsdoc **/
  132. else {
  133. return window.XScrollMaster = XScrollMaster;
  134. }
  135. });