fixed.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. define(function(require, exports, module) {
  2. "use strict";
  3. var Util = require('../util');
  4. var Base = require('../base');
  5. var transform = Util.prefixStyle("transform");
  6. var Fixed = function(cfg) {
  7. Fixed.superclass.constructor.call(this, cfg);
  8. this.userConfig = Util.mix({
  9. fixedRenderTo: undefined,
  10. fixedElements: ".xs-fixed",
  11. prefix: "xs-fixed-container",
  12. zoomType: "y"
  13. }, cfg);
  14. this.init();
  15. }
  16. Util.extend(Fixed, Base, {
  17. fixedElements: [],
  18. init: function() {
  19. var self = this,
  20. userConfig = self.userConfig,
  21. xscroll = self.xscroll = userConfig.xscroll,
  22. xscrollConfig = self.xscrollConfig = xscroll.userConfig;
  23. self.isY = !!(userConfig.zoomType == "y");
  24. self._ = self.isY ? {
  25. top: "top",
  26. height: "height",
  27. width: "width",
  28. offsetTop:"offsetTop"
  29. } : {
  30. top: "left",
  31. height: "width",
  32. width: "height",
  33. offsetTop:"offsetLeft"
  34. };
  35. self.fixedRenderTo = Util.getNode(userConfig.fixedRenderTo);
  36. return self;
  37. },
  38. render: function() {
  39. var self = this;
  40. var xscroll = self.xscroll;
  41. self.infinite = xscroll.getPlugin("infinite");
  42. if (!self.fixedRenderTo) {
  43. self.fixedRenderTo = document.createElement('div');
  44. xscroll.renderTo.appendChild(self.fixedRenderTo);
  45. }
  46. Util.addClass(self.fixedRenderTo, self.userConfig.prefix);
  47. var originalFixedElements = self.originalFixedElements = self.getFixedElements();
  48. for (var i = 0, l = originalFixedElements.length; i < l; i++) {
  49. self.renderFixedElement(originalFixedElements[i], i,self.fixedRenderTo);
  50. }
  51. return self;
  52. },
  53. getFixedElements: function() {
  54. var self = this;
  55. var infinite = self.infinite;
  56. var userConfig = self.userConfig;
  57. if (infinite) {
  58. var els = [];
  59. for (var i in infinite.__serializedData) {
  60. var data = infinite.__serializedData[i];
  61. if (data && data.style && data.style.position == "fixed") {
  62. els.push(data);
  63. }
  64. }
  65. return els;
  66. } else {
  67. return Util.getNodes(userConfig.fixedElements, self.xscroll.content);
  68. }
  69. },
  70. renderFixedElement: function(el, fixedIndex,fixedRenderTo) {
  71. var self = this;
  72. var isRender = true;
  73. var _ = self._;
  74. var xscroll = self.xscroll;
  75. var userConfig = self.userConfig;
  76. var xscrollConfig = self.xscrollConfig;
  77. var useOriginScroll = xscrollConfig.useOriginScroll;
  78. var infinite = self.infinite;
  79. var fixedElement = self.fixedElements[fixedIndex];
  80. if (!self.fixedElements[fixedIndex]) {
  81. isRender = false;
  82. if (useOriginScroll && !infinite) {
  83. //use original position:fixed stylesheet
  84. el.style.position = "fixed";
  85. el.style.display = "block";
  86. } else {
  87. //deep clone fixed nodes and hide original nodes
  88. fixedElement = document.createElement("div");
  89. if (infinite) {
  90. fixedElement.setAttribute("style", Util.stringifyStyle(Util.mix(el.style, {
  91. display: "block",
  92. width: "100%"
  93. })));
  94. fixedElement.style[_.top] = (el.style[_.top] >= 0 ? el.style[_.top] : el._top) + "px";
  95. if (el.style[_.height]) {
  96. fixedElement.style[_.height] = el.style[_.height] + "px";
  97. }
  98. infinite.userConfig.renderHook.call(self, fixedElement, el);
  99. } else {
  100. fixedElement.style.display = "block";
  101. fixedElement.style.position = "absolute";
  102. fixedElement.style[_.width] = "100%";
  103. fixedElement.innerHTML = el.innerHTML;
  104. fixedElement.className = el.className;
  105. fixedElement.setAttribute("style", el.getAttribute("style"));
  106. fixedElement.style[_.top] = el[_.offsetTop] + "px";
  107. el.style.display = "none";
  108. }
  109. fixedRenderTo.appendChild(fixedElement);
  110. self.fixedElements.push(fixedElement);
  111. }
  112. }
  113. xscroll.trigger("fixedchange", {
  114. fixedIndex: fixedIndex,
  115. fixedElement: useOriginScroll ? el : fixedElement,
  116. originalFixedElement: el,
  117. isRender: isRender
  118. });
  119. },
  120. destroy: function() {
  121. var self = this;
  122. self.fixedElements = undefined;
  123. }
  124. });
  125. if (typeof module == 'object' && module.exports) {
  126. module.exports = Fixed;
  127. }
  128. /** ignored by jsdoc **/
  129. else {
  130. return Fixed;
  131. }
  132. });