demo.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. (function() {
  2. 'use strict';
  3. var $window = $(window),
  4. $languages = $('#languages div'),
  5. $linkTitle = $('link[title]'),
  6. $categoryContainer = $('#categories'),
  7. $styleContainer = $('#styles');
  8. function resizeLists() {
  9. var screenHeight = $window.height()
  10. $categoryContainer.css('max-height', screenHeight / 4);
  11. $categoryContainer.perfectScrollbar('update');
  12. $styleContainer.height(
  13. screenHeight - $styleContainer.position().top - 20
  14. );
  15. $styleContainer.perfectScrollbar('update');
  16. }
  17. function selectCategory(category) {
  18. $languages.each(function(i, language) {
  19. var $language = $(language);
  20. if ($language.hasClass(category)) {
  21. var code = $language.find('code');
  22. if (!code.hasClass('hljs')) {
  23. hljs.highlightBlock(code.get(0));
  24. }
  25. $language.show();
  26. } else {
  27. $language.hide();
  28. }
  29. });
  30. $(document).scrollTop(0);
  31. }
  32. function categoryKey(c) {
  33. return c === 'common' ? '' : c === 'misc' ? 'z' : c === 'all' ? 'zz' : c;
  34. }
  35. function initCategories() {
  36. var $categories, categoryNames;
  37. var categories = {};
  38. $languages.each(function(i, div) {
  39. if (!div.className) {
  40. div.className += 'misc';
  41. }
  42. div.className += ' all';
  43. div.className.split(' ').forEach(function(c) {
  44. categories[c] = (categories[c] || 0) + 1;
  45. });
  46. });
  47. categoryNames = Object.keys(categories);
  48. categoryNames.sort(function(a, b) {
  49. a = categoryKey(a);
  50. b = categoryKey(b);
  51. return a < b ? -1 : a > b ? 1 : 0;
  52. });
  53. categoryNames.forEach(function(c) {
  54. $categoryContainer.append(
  55. '<li data-category="' + c + '">' + c + ' (' + categories[c] +')</li>'
  56. );
  57. });
  58. $categories = $categoryContainer.find('li');
  59. $categories.click(function() {
  60. var $category = $(this);
  61. $categories.removeClass('current');
  62. $category.addClass('current');
  63. selectCategory($category.data('category'));
  64. });
  65. $categories.first().click();
  66. $categoryContainer.perfectScrollbar();
  67. }
  68. function selectStyle(style) {
  69. $linkTitle.each(function(i, link) {
  70. link.disabled = (link.title !== style);
  71. });
  72. }
  73. function initStyles() {
  74. var $styles;
  75. $linkTitle.each(function(i, link) {
  76. $styleContainer.append('<li>' + link.title + '</li>');
  77. });
  78. $styles = $styleContainer.find('li');
  79. $styles.click(function() {
  80. var $style = $(this);
  81. $styles.removeClass('current');
  82. $style.addClass('current');
  83. selectStyle($style.text());
  84. });
  85. $styles.first().click();
  86. $styleContainer.perfectScrollbar();
  87. }
  88. $(function() {
  89. initCategories();
  90. initStyles();
  91. $window.resize(resizeLists);
  92. resizeLists();
  93. });
  94. }).call(this);