assets-compress-setting.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. const utils = Editor.require('packages://build-helper/core/libs/utils.js');
  2. let ListItem;
  3. (() => {
  4. 'use strict';
  5. return function init ( panel ) {
  6. let viewEL = panel.$.view;
  7. let tmpl = 'packages://build-helper/panel/assets-compress-setting.tmpl';
  8. Editor.import(tmpl).then(content => {
  9. viewEL.innerHTML = content;
  10. let assetsCompress = `assetsCompress`;
  11. let compress = panel.getSettingItem(assetsCompress) || {};
  12. // 压缩开关
  13. let checkboxEle = viewEL.querySelector('ui-checkbox');
  14. checkboxEle.value = compress.enable;
  15. checkboxEle.addEventListener('change', (event) => {
  16. compress.enable = event.target.value;
  17. panel.setSettingItem(assetsCompress, compress);
  18. });
  19. // 压缩品质
  20. let qualityEle = viewEL.querySelector('#quality');
  21. qualityEle.value = compress.quality;
  22. qualityEle.addEventListener('confirm', (event) => {
  23. compress.quality = event.target.value;
  24. panel.setSettingItem(assetsCompress, compress);
  25. });
  26. // 需要压缩的后缀
  27. let extsEle = viewEL.querySelector('#exts');
  28. extsEle.value = compress.exts;
  29. extsEle.addEventListener('confirm', (event) => {
  30. compress.exts = event.target.value;
  31. panel.setSettingItem(assetsCompress, compress);
  32. });
  33. // 支持压缩平台
  34. let platformEle = viewEL.querySelector('#platform');
  35. platformEle.value = compress.platform;
  36. platformEle.addEventListener('confirm', (event) => {
  37. compress.platform = event.target.value;
  38. panel.setSettingItem(assetsCompress, compress);
  39. });
  40. // 忽略的资源
  41. let ignores = compress.ignores || [];
  42. let listEle = viewEL.querySelector('#list');
  43. if (!ListItem) {
  44. ListItem = Editor.UI.registerElement('compress-ignore-list-item', {
  45. template: `
  46. <div class="item"">
  47. <ui-input id="path" class="path" disabled></ui-input>
  48. <ui-button id="del" class="tiny red">删除</ui-button>
  49. </div>
  50. `,
  51. style: `
  52. .item {
  53. display: flex;
  54. background-color: black;
  55. padding: 2px;
  56. }
  57. .path {
  58. flex: 1;
  59. }
  60. `,
  61. factoryImpl ( text ) {
  62. this.$ = {
  63. path: this.shadowRoot.querySelector('#path'),
  64. del: this.shadowRoot.querySelector('#del')
  65. };
  66. this.$.path.value = text;
  67. this.$.del.addEventListener('click', (event) => {
  68. listEle.removeChild(this);
  69. // 配置中删除
  70. for (let i = 0; i < ignores.length; i++) {
  71. const path = ignores[i];
  72. if (path == text) {
  73. ignores.splice(i, 1);
  74. break;
  75. }
  76. }
  77. });
  78. }
  79. });
  80. }
  81. // 资源列表
  82. ignores.forEach(path => {
  83. let el = new ListItem(path);
  84. listEle.appendChild(el);
  85. });
  86. // 添加资源
  87. let addEle = viewEL.querySelector('#add');
  88. addEle.addEventListener('click', (event) => {
  89. event.stopPropagation();
  90. let res = Editor.Dialog.openFile({
  91. title: '选择需要忽略的资源目录文件',
  92. defaultPath: Editor.Project.path + '/assets',
  93. properties: ['openDirectory', 'openFile']
  94. });
  95. if (res !== -1) {
  96. let newPath = res[0];
  97. let relative = utils.getRelative(Editor.Project.path, newPath);
  98. for (const path of ignores) {
  99. if (path === relative) {
  100. Editor.log(relative + '已经存在!');
  101. return;
  102. }
  103. }
  104. let el = new ListItem(relative);
  105. listEle.appendChild(el);
  106. ignores.push(relative);
  107. compress.ignores = ignores;
  108. panel.setSettingItem(assetsCompress, compress);
  109. }
  110. });
  111. });
  112. };
  113. })();