timeline.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. (function () {
  2. 'use strict';
  3. var Timeline = function (options) {
  4. this.options = options;
  5. var self = this;
  6. this.init = function () {
  7. if (this.options.$focus) {
  8. this.options.$focus.focus();
  9. delete this.options.$focus;
  10. }
  11. self.options.$timeline.find('.debug-timeline-panel__item a')
  12. .on('show.bs.tooltip', function () {
  13. var data = $(this).data('memory');
  14. if (data) {
  15. self.options.$memory.text(data[0]).css({'bottom': data[1]+'%'});
  16. }
  17. })
  18. .tooltip();
  19. return self;
  20. };
  21. this.setFocus = function ($elem) {
  22. this.options.$focus = $elem;
  23. return $elem;
  24. };
  25. this.affixTop = function (refresh) {
  26. if (!this.options.affixTop || refresh) {
  27. this.options.affixTop = self.options.$header.offset().top;
  28. }
  29. return this.options.affixTop;
  30. };
  31. $(document).on('pjax:success', function () {
  32. self.init()
  33. });
  34. $(window).on('resize', function () {
  35. self.affixTop(true);
  36. });
  37. self.options.$header
  38. .on('dblclick', function () {
  39. self.options.$timeline.toggleClass('inline');
  40. })
  41. .on('click', 'button', function () {
  42. self.options.$timeline.toggleClass('inline');
  43. });
  44. self.options.$search.on('change', function () {
  45. self.setFocus($(this)).submit();
  46. });
  47. self.options.$timeline.affix({
  48. offset: {
  49. top: function () {
  50. return self.affixTop()
  51. }
  52. }
  53. });
  54. this.init();
  55. };
  56. (new Timeline({
  57. '$timeline': $('.debug-timeline-panel'),
  58. '$header': $('.debug-timeline-panel__header'),
  59. '$search': $('.debug-timeline-panel__search input'),
  60. '$memory': $('.debug-timeline-panel__memory .scale')
  61. }));
  62. })();