include-theme.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. (function() {
  2. var url = getUrl(),
  3. thisDir = getDir(url),
  4. params = getMergedQueryParams(url),
  5. theme = getTheme(params),
  6. css = getCss(theme),
  7. js = getJs(theme);
  8. document.write(Ext.String.format('<link rel="stylesheet" type="text/css" href="{0}/../../resources/css/ext-{1}.css" />', thisDir, css));
  9. if (js) {
  10. document.write(Ext.String.format('<script type="text/javascript" src="{0}/../../ext-{1}.js"></script>', thisDir, js));
  11. }
  12. if (params.themes_combo != null) {
  13. Ext.require('Ext.panel.Panel');
  14. Ext.require('Ext.data.ArrayStore');
  15. Ext.require('Ext.form.field.ComboBox');
  16. Ext.onReady(function() {
  17. Ext.create('Ext.panel.Panel', {
  18. autoShow: true,
  19. frame: true,
  20. renderTo: Ext.getBody(),
  21. items: {
  22. editable: false,
  23. fieldLabel: 'Theme',
  24. labelWidth: 50,
  25. value: theme,
  26. width: 180,
  27. xtype: 'combo',
  28. listeners: {
  29. change: function(combo, value) {
  30. params.theme = value;
  31. location.search = Ext.Object.toQueryString(params);
  32. }
  33. },
  34. store: [
  35. ['classic', 'Classic'],
  36. ['gray', 'Gray'],
  37. ['access', 'Accessibility'],
  38. ['neptune', 'Neptune']
  39. ],
  40. style: {
  41. margin: '2px'
  42. }
  43. },
  44. style: {
  45. position: 'absolute',
  46. right: '10px',
  47. top: '10px'
  48. }
  49. });
  50. });
  51. }
  52. // Extract the URL used to load this script file
  53. function getUrl() {
  54. var scripts = document.getElementsByTagName('script'),
  55. thisScript = scripts[scripts.length - 1];
  56. return thisScript.src;
  57. }
  58. // The directory of this script file
  59. function getDir(url) {
  60. return url.slice(0, url.lastIndexOf('/'));
  61. }
  62. // Combines the query parameters from the page URL and the script URL
  63. function getMergedQueryParams(url) {
  64. var searchIndex = url.indexOf('?'),
  65. parse = Ext.Object.fromQueryString;
  66. return Ext.apply(searchIndex === -1 ? {} : parse(url.slice(searchIndex)), parse(location.search));
  67. }
  68. // Get the canonical theme name from the query parameters
  69. function getTheme(params) {
  70. return {
  71. access: 'access',
  72. accessibility: 'access',
  73. gray: 'gray',
  74. grey: 'gray',
  75. neptune: 'neptune'
  76. }[params.theme || params.css] || 'classic';
  77. }
  78. // Get the CSS file name from the theme name
  79. function getCss(theme) {
  80. return {
  81. access: 'all-access',
  82. classic: 'all',
  83. gray: 'all-gray',
  84. neptune: 'neptune'
  85. }[theme];
  86. }
  87. // Get the JS file name from the theme name
  88. function getJs(theme) {
  89. return {
  90. neptune: 'neptune'
  91. }[theme];
  92. }
  93. })();