Scroll.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601
  1. if (typeof window.RadControlsNamespace == "undefined")
  2. {
  3. window.RadControlsNamespace = {};
  4. }
  5. RadControlsNamespace.ScrollButtonsPosition = {Left : 0, Middle : 1, Right : 2 };
  6. RadControlsNamespace.Scroll = function (element, vertical, scrollOptionsObject)
  7. {
  8. this.Owner = scrollOptionsObject;
  9. this.Element = element;
  10. this.IsVertical = vertical;
  11. this.ScrollButtonsPosition = scrollOptionsObject.ScrollButtonsPosition;
  12. this.ScrollPosition = scrollOptionsObject.ScrollPosition;
  13. this.PerTabScrolling = scrollOptionsObject.PerTabScrolling;
  14. this.ScrollOnHover = false;
  15. this.WrapNeeded = false;
  16. this.LeaveGapsForArrows = true;
  17. this.LeftArrowClass = "leftArrow";
  18. this.LeftArrowClassDisabled = "leftArrowDisabled";
  19. this.RightArrowClass = "rightArrow";
  20. this.RightArrowClassDisabled = "rightArrowDisabled";
  21. this.Initialized = false;
  22. };
  23. RadControlsNamespace.Scroll.Create = function (element, vertical, scrollOptionsObject)
  24. {
  25. return new RadControlsNamespace.Scroll(element, vertical, scrollOptionsObject);
  26. }
  27. RadControlsNamespace.Scroll.prototype.Initialize = function ()
  28. {
  29. if (this.Initialized)
  30. {
  31. this.ApplyOverflow();
  32. this.CalculateMinMaxPosition();
  33. this.EvaluateArrowStatus();
  34. return false;
  35. }
  36. if (
  37. (this.Element.offsetWidth == 0 && !this.IsVertical)
  38. ||
  39. (this.Element.offsetHeight == 0 && this.IsVertical)
  40. )
  41. {
  42. return false;
  43. }
  44. this.Initialized = true;
  45. this.ScrollAmount = 2;
  46. this.Direction = 0;
  47. if (this.WrapNeeded)
  48. {
  49. var scrollWrap = this.CreateScrollWrap();
  50. }
  51. this.ApplyOverflow();
  52. this.Element.style.position = "relative";
  53. this.AttachArrows();
  54. this.CalculateMinMaxPosition();
  55. if (this.PerTabScrolling)
  56. {
  57. this.CalculateInitialTab();
  58. }
  59. this.AttachScrollMethods();
  60. this.EvaluateArrowStatus();
  61. this.AttachEventHandlers();
  62. this.ScrollTo(this.ScrollPosition);
  63. this.ApplyOverflow();
  64. return scrollWrap;
  65. };
  66. RadControlsNamespace.Scroll.prototype.ApplyOverflow = function ()
  67. {
  68. if (RadControlsNamespace.Browser.IsIE)
  69. {
  70. this.Element.parentNode.style.overflow = "visible";
  71. if (this.IsVertical)
  72. {
  73. this.Element.parentNode.style.overflowX = "";
  74. this.Element.parentNode.style.overflowY = "hidden";
  75. }
  76. else
  77. {
  78. this.Element.parentNode.style.overflowX = "hidden";
  79. this.Element.parentNode.style.overflowY = "hidden";
  80. }
  81. }
  82. else
  83. {
  84. this.Element.parentNode.style.overflow = "hidden";
  85. }
  86. if (!this.ScrollNeeded())
  87. {
  88. this.Element.parentNode.style.overflow = "visible";
  89. this.Element.parentNode.style.overflowX = "visible";
  90. this.Element.parentNode.style.overflowY = "visible";
  91. }
  92. }
  93. RadControlsNamespace.Scroll.prototype.ResizeHandler = function ()
  94. {
  95. if (this.Disposed)
  96. {
  97. return;
  98. }
  99. if (!this.Initialized)
  100. {
  101. this.Initialize();
  102. }
  103. if (!this.Initialized)
  104. {
  105. return;
  106. }
  107. if (!this.Element.offsetHeight || !this.Element.offsetWidth)
  108. {
  109. return;
  110. }
  111. this.CalculateMinMaxPosition();
  112. if (this.Element.offsetWidth < this.Element.parentNode.offsetWidth)
  113. {
  114. this.ScrollTo(0);
  115. }
  116. var stylePosition = parseInt(this.IsVertical ? this.Element.style.top : this.Element.style.left);
  117. if (isNaN(stylePosition))
  118. {
  119. stylePosition = 0;
  120. }
  121. var instance = this;
  122. /*
  123. this.intervalPointer = setTimeout(function ()
  124. {
  125. if (instance.Disposed)
  126. {
  127. return;
  128. }
  129. instance.ApplyOverflow();
  130. instance.ScrollTo(stylePosition);
  131. instance.EvaluateArrowStatus();
  132. }, 100);*/
  133. }
  134. RadControlsNamespace.Scroll.prototype.AttachEventHandlers = function ()
  135. {
  136. var element = this.Element;
  137. var instance = this;
  138. this.resizeClosure = function()
  139. {
  140. instance.ResizeHandler();
  141. }
  142. if (window.addEventListener)
  143. {
  144. window.addEventListener("resize", this.resizeClosure, false);
  145. }
  146. else
  147. {
  148. window.attachEvent("onresize", this.resizeClosure);
  149. }
  150. }
  151. RadControlsNamespace.Scroll.prototype.Dispose = function()
  152. {
  153. this.Disposed = true;
  154. this.Element = null;
  155. clearTimeout(this.intervalPointer);
  156. if (window.removeEventListener)
  157. {
  158. window.removeEventListener("resize", this.resizeClosure, false);
  159. }
  160. else
  161. {
  162. window.detachEvent("onresize", this.resizeClosure);
  163. }
  164. }
  165. RadControlsNamespace.Scroll.prototype.AttachArrows = function ()
  166. {
  167. // arrow creations
  168. var leftArrow = this.CreateArrow("&laquo;", 1, this.LeftArrowClass);
  169. var rightArrow = this.CreateArrow("&raquo;", -1, this.RightArrowClass);
  170. this.LeftArrow = leftArrow;
  171. this.RightArrow = rightArrow;
  172. if (this.IsVertical)
  173. {
  174. leftArrow.style.left = "0px";
  175. rightArrow.style.left = "0px";
  176. if (this.ScrollButtonsPosition == RadControlsNamespace.ScrollButtonsPosition.Middle)
  177. {
  178. leftArrow.style.top = "0px";
  179. rightArrow.style.bottom = "0px";
  180. }
  181. else if (this.ScrollButtonsPosition == RadControlsNamespace.ScrollButtonsPosition.Left)
  182. {
  183. leftArrow.style.top = "0px";
  184. rightArrow.style.top = leftArrow.offsetHeight + "px";
  185. }
  186. else
  187. {
  188. rightArrow.style.bottom = "0px";
  189. leftArrow.style.bottom = leftArrow.offsetHeight + "px";
  190. }
  191. }
  192. else
  193. {
  194. leftArrow.style.top = "0px";
  195. rightArrow.style.top = "0px";
  196. if (this.ScrollButtonsPosition == RadControlsNamespace.ScrollButtonsPosition.Middle)
  197. {
  198. leftArrow.style.left = "-1px";
  199. rightArrow.style.right = "-1px";
  200. }
  201. else if (this.ScrollButtonsPosition == RadControlsNamespace.ScrollButtonsPosition.Left)
  202. {
  203. leftArrow.style.left = "-1px";
  204. rightArrow.style.left = (leftArrow.offsetWidth -1) + "px";
  205. }
  206. else
  207. {
  208. rightArrow.style.right = "-1px";
  209. leftArrow.style.right = (rightArrow.offsetWidth - 1) + "px";
  210. }
  211. }
  212. }
  213. RadControlsNamespace.Scroll.prototype.CreateArrow = function(arrowText, scrollDirection, cssClass)
  214. {
  215. var arrow = document.createElement('a');
  216. arrow.href = "#";
  217. arrow.className = cssClass;
  218. arrow.style.zIndex = "2000";
  219. arrow.appendChild(document.createTextNode("&nbsp;"));
  220. this.Element.parentNode.appendChild(arrow);
  221. var instance = this;
  222. arrow.ScrollDirection = scrollDirection;
  223. if (this.ScrollOnHover)
  224. {
  225. arrow.onmousedown = function ()
  226. {
  227. if (this.disabled)
  228. {
  229. return false;
  230. }
  231. instance.ScrollAmount = 3;
  232. return true;
  233. }
  234. arrow.onmouseup = function ()
  235. {
  236. instance.ScrollAmount = 1;
  237. }
  238. arrow.onmouseover = function ()
  239. {
  240. if (this.disabled)
  241. {
  242. return false;
  243. }
  244. instance.ScrollAmount = 1;
  245. instance.Scroll(this.ScrollDirection);
  246. return true;
  247. }
  248. arrow.onmouseout = function ()
  249. {
  250. instance.scrollAmount = 0;
  251. instance.Stop();
  252. return false;
  253. }
  254. }
  255. else
  256. {
  257. arrow.onmousedown = function ()
  258. {
  259. instance.Scroll(this.ScrollDirection);
  260. }
  261. arrow.onmouseup = function ()
  262. {
  263. instance.Stop();
  264. }
  265. }
  266. arrow.onclick = function ()
  267. {
  268. return false;
  269. }
  270. return arrow;
  271. }
  272. RadControlsNamespace.Scroll.prototype.SetHeight = function (value)
  273. {
  274. if (parseInt(value) == 0)
  275. {
  276. return;
  277. }
  278. this.Element.parentNode.style.height = value;
  279. this.Initialize();
  280. }
  281. RadControlsNamespace.Scroll.prototype.SetWidth = function (value)
  282. {
  283. if (parseInt(value) == 0)
  284. {
  285. return;
  286. }
  287. this.Element.parentNode.style.width = value;
  288. this.Initialize();
  289. }
  290. RadControlsNamespace.Scroll.prototype.CreateScrollWrap = function ()
  291. {
  292. var scrollWrap = document.createElement('div');
  293. var originalContainer = this.Element.parentNode;
  294. scrollWrap.appendChild(this.Element);
  295. scrollWrap.style.position = "relative";
  296. scrollWrap.align = "left"; // WTF??
  297. originalContainer.appendChild(scrollWrap);
  298. if (this.IsVertical)
  299. {
  300. scrollWrap.style.styleFloat = "left";
  301. scrollWrap.style.cssFloat = "left";
  302. this.Element.style.display = "none";
  303. scrollWrap.style.height = scrollWrap.parentNode.parentNode.offsetHeight + "px";
  304. this.Element.style.display = "block";
  305. }
  306. else
  307. {
  308. var realWidth = 0;
  309. for (var i = 0; i < this.Element.childNodes.length; i ++)
  310. {
  311. var node = this.Element.childNodes[i];
  312. if (!node.tagName) continue;
  313. realWidth += node.offsetWidth;
  314. }
  315. this.Element.style.width = (realWidth + 3) + "px";
  316. }
  317. return scrollWrap;
  318. };
  319. RadControlsNamespace.Scroll.prototype.CalculateMinMaxPosition = function ()
  320. {
  321. if (!this.Initialized)
  322. {
  323. return;
  324. }
  325. if (this.IsVertical)
  326. {
  327. var scrollSize = this.Element.parentNode.offsetHeight - this.Element.offsetHeight;
  328. var leftSize = this.LeftArrow.offsetHeight;
  329. var rightSize = this.RightArrow.offsetHeight;
  330. }
  331. else
  332. {
  333. var scrollSize = this.Element.parentNode.offsetWidth - this.Element.offsetWidth;
  334. var leftSize = this.LeftArrow.offsetWidth;
  335. var rightSize = this.RightArrow.offsetWidth;
  336. }
  337. if (!this.LeaveGapsForArrows)
  338. {
  339. leftSize = 0;
  340. rightSize = 0;
  341. }
  342. this.MaxScrollPosition = 0;
  343. this.MinScrollPosition = scrollSize - rightSize - leftSize;
  344. if (this.ScrollButtonsPosition ==
  345. RadControlsNamespace.ScrollButtonsPosition.Middle)
  346. {
  347. this.Offset = leftSize;
  348. }
  349. else if (this.ScrollButtonsPosition ==
  350. RadControlsNamespace.ScrollButtonsPosition.Left)
  351. {
  352. this.Offset = leftSize + rightSize;
  353. }
  354. else
  355. {
  356. this.Offset = 0;
  357. }
  358. }
  359. RadControlsNamespace.Scroll.prototype.CalculateInitialTab = function ()
  360. {
  361. // calculate the selected tab
  362. var lis = this.Element.getElementsByTagName('li');
  363. if (lis.length > 0)
  364. {
  365. var i = 0;
  366. while (this.ScrollPosition < - (this.IsVertical ? lis[i].offsetTop : lis[i].offsetLeft))
  367. {
  368. i ++;
  369. }
  370. this.CurrentTab = i;
  371. }
  372. }
  373. RadControlsNamespace.Scroll.prototype.AttachScrollMethods = function ()
  374. {
  375. if (this.PerTabScrolling)
  376. {
  377. this.Scroll = RadControlsNamespace.Scroll.StartPerTabScroll;
  378. this.Stop = RadControlsNamespace.Scroll.StopPerTabScroll;
  379. }
  380. else
  381. {
  382. this.Scroll = RadControlsNamespace.Scroll.StartSmoothScroll;
  383. this.Stop = RadControlsNamespace.Scroll.StopSmoothScroll;
  384. }
  385. };
  386. RadControlsNamespace.Scroll.prototype.EvaluateArrowStatus = function ()
  387. {
  388. var rightEndReached = ! (this.ScrollPosition > this.MinScrollPosition);
  389. var leftEndReached = ! (this.ScrollPosition < this.MaxScrollPosition);
  390. this.RightArrow.disabled = rightEndReached;
  391. this.LeftArrow.disabled = leftEndReached;
  392. if (leftEndReached)
  393. {
  394. if (this.LeftArrow.className != this.LeftArrowClassDisabled)
  395. {
  396. this.LeftArrow.className = this.LeftArrowClassDisabled;
  397. }
  398. }
  399. else
  400. {
  401. if (this.LeftArrow.className != this.LeftArrowClass)
  402. {
  403. this.LeftArrow.className = this.LeftArrowClass;
  404. }
  405. }
  406. if (rightEndReached)
  407. {
  408. if (this.RightArrow.className != this.RightArrowClassDisabled)
  409. {
  410. this.RightArrow.className = this.RightArrowClassDisabled;
  411. }
  412. }
  413. else
  414. {
  415. if (this.RightArrow.className != this.RightArrowClass)
  416. {
  417. this.RightArrow.className = this.RightArrowClass;
  418. }
  419. }
  420. }
  421. RadControlsNamespace.Scroll.StartSmoothScroll = function (direction)
  422. {
  423. this.Stop();
  424. this.Direction = direction;
  425. var instance = this;
  426. var scrollActivity = function ()
  427. {
  428. instance.ScrollBy(instance.Direction * instance.ScrollAmount);
  429. }
  430. scrollActivity();
  431. this.scrollInterval = setInterval(scrollActivity, 10);
  432. };
  433. RadControlsNamespace.Scroll.prototype.ScrollTo = function (position)
  434. {
  435. position = Math.max(position, this.MinScrollPosition);
  436. position = Math.min(position, this.MaxScrollPosition);
  437. position += this.Offset;
  438. if (this.IsVertical)
  439. {
  440. this.Element.style.top = position + "px";
  441. }
  442. else
  443. {
  444. this.Element.style.left = position + "px";
  445. }
  446. this.Owner.ScrollPosition = this.ScrollPosition = position - this.Offset;
  447. this.EvaluateArrowStatus();
  448. }
  449. RadControlsNamespace.Scroll.prototype.ScrollBy = function (amount)
  450. {
  451. var newScrollPosition = this.ScrollPosition;
  452. this.ScrollTo(newScrollPosition + amount);
  453. }
  454. /*Static methods, transformed in the AttachScrollMethods */
  455. RadControlsNamespace.Scroll.StartPerTabScroll = function (direction)
  456. {
  457. this.Stop();
  458. var lis = this.Element.getElementsByTagName('li');
  459. var nextTab = this.CurrentTab - direction;
  460. if (nextTab < 0 || nextTab > lis.length)
  461. {
  462. return;
  463. }
  464. var dimDiv = direction == -1 ? this.CurrentTab : nextTab;
  465. this.CurrentTab = nextTab;
  466. if (this.IsVertical)
  467. {
  468. var newPosition = lis[dimDiv].offsetHeight;
  469. }
  470. else
  471. {
  472. var newPosition = lis[dimDiv].offsetWidth;
  473. }
  474. this.ScrollBy(newPosition * direction);
  475. this.EvaluateArrowStatus();
  476. };
  477. RadControlsNamespace.Scroll.prototype.ScrollNeeded = function ()
  478. {
  479. return true;
  480. if (this.IsVertical)
  481. {
  482. return this.Element.offsetHeight > this.Element.parentNode.offsetHeight;
  483. }
  484. return this.Element.offsetWidth > this.Element.parentNode.offsetWidth;
  485. }
  486. RadControlsNamespace.Scroll.StopSmoothScroll = function (direction)
  487. {
  488. if (this.OnScrollStop)
  489. {
  490. this.OnScrollStop();
  491. }
  492. clearInterval(this.scrollInterval);
  493. };
  494. RadControlsNamespace.Scroll.StopPerTabScroll = function (direction)
  495. {
  496. if (this.OnScrollStop)
  497. {
  498. this.OnScrollStop();
  499. }
  500. };
  501. //BEGIN_ATLAS_NOTIFY
  502. if (typeof(Sys) != "undefined")
  503. {
  504. if (Sys.Application != null && Sys.Application.notifyScriptLoaded != null)
  505. {
  506. Sys.Application.notifyScriptLoaded();
  507. }
  508. }
  509. //END_ATLAS_NOTIFY