ui.file_manager.toolbar.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. /**
  2. * DevExtreme (ui/file_manager/ui.file_manager.toolbar.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. function _typeof(obj) {
  11. "@babel/helpers - typeof";
  12. return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) {
  13. return typeof obj
  14. } : function(obj) {
  15. return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj
  16. }, _typeof(obj)
  17. }
  18. var _renderer = require("../../core/renderer");
  19. var _renderer2 = _interopRequireDefault(_renderer);
  20. var _extend = require("../../core/utils/extend");
  21. var _type = require("../../core/utils/type");
  22. var _common = require("../../core/utils/common");
  23. var _ui = require("../widget/ui.widget");
  24. var _ui2 = _interopRequireDefault(_ui);
  25. var _toolbar = require("../toolbar");
  26. var _toolbar2 = _interopRequireDefault(_toolbar);
  27. function _interopRequireDefault(obj) {
  28. return obj && obj.__esModule ? obj : {
  29. "default": obj
  30. }
  31. }
  32. function _classCallCheck(instance, Constructor) {
  33. if (!(instance instanceof Constructor)) {
  34. throw new TypeError("Cannot call a class as a function")
  35. }
  36. }
  37. function _defineProperties(target, props) {
  38. for (var i = 0; i < props.length; i++) {
  39. var descriptor = props[i];
  40. descriptor.enumerable = descriptor.enumerable || false;
  41. descriptor.configurable = true;
  42. if ("value" in descriptor) {
  43. descriptor.writable = true
  44. }
  45. Object.defineProperty(target, descriptor.key, descriptor)
  46. }
  47. }
  48. function _createClass(Constructor, protoProps, staticProps) {
  49. if (protoProps) {
  50. _defineProperties(Constructor.prototype, protoProps)
  51. }
  52. if (staticProps) {
  53. _defineProperties(Constructor, staticProps)
  54. }
  55. Object.defineProperty(Constructor, "prototype", {
  56. writable: false
  57. });
  58. return Constructor
  59. }
  60. function _get() {
  61. if ("undefined" !== typeof Reflect && Reflect.get) {
  62. _get = Reflect.get.bind()
  63. } else {
  64. _get = function(target, property, receiver) {
  65. var base = _superPropBase(target, property);
  66. if (!base) {
  67. return
  68. }
  69. var desc = Object.getOwnPropertyDescriptor(base, property);
  70. if (desc.get) {
  71. return desc.get.call(arguments.length < 3 ? target : receiver)
  72. }
  73. return desc.value
  74. }
  75. }
  76. return _get.apply(this, arguments)
  77. }
  78. function _superPropBase(object, property) {
  79. while (!Object.prototype.hasOwnProperty.call(object, property)) {
  80. object = _getPrototypeOf(object);
  81. if (null === object) {
  82. break
  83. }
  84. }
  85. return object
  86. }
  87. function _inherits(subClass, superClass) {
  88. if ("function" !== typeof superClass && null !== superClass) {
  89. throw new TypeError("Super expression must either be null or a function")
  90. }
  91. subClass.prototype = Object.create(superClass && superClass.prototype, {
  92. constructor: {
  93. value: subClass,
  94. writable: true,
  95. configurable: true
  96. }
  97. });
  98. Object.defineProperty(subClass, "prototype", {
  99. writable: false
  100. });
  101. if (superClass) {
  102. _setPrototypeOf(subClass, superClass)
  103. }
  104. }
  105. function _setPrototypeOf(o, p) {
  106. _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
  107. o.__proto__ = p;
  108. return o
  109. };
  110. return _setPrototypeOf(o, p)
  111. }
  112. function _createSuper(Derived) {
  113. var hasNativeReflectConstruct = _isNativeReflectConstruct();
  114. return function() {
  115. var result, Super = _getPrototypeOf(Derived);
  116. if (hasNativeReflectConstruct) {
  117. var NewTarget = _getPrototypeOf(this).constructor;
  118. result = Reflect.construct(Super, arguments, NewTarget)
  119. } else {
  120. result = Super.apply(this, arguments)
  121. }
  122. return _possibleConstructorReturn(this, result)
  123. }
  124. }
  125. function _possibleConstructorReturn(self, call) {
  126. if (call && ("object" === _typeof(call) || "function" === typeof call)) {
  127. return call
  128. } else {
  129. if (void 0 !== call) {
  130. throw new TypeError("Derived constructors may only return object or undefined")
  131. }
  132. }
  133. return _assertThisInitialized(self)
  134. }
  135. function _assertThisInitialized(self) {
  136. if (void 0 === self) {
  137. throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
  138. }
  139. return self
  140. }
  141. function _isNativeReflectConstruct() {
  142. if ("undefined" === typeof Reflect || !Reflect.construct) {
  143. return false
  144. }
  145. if (Reflect.construct.sham) {
  146. return false
  147. }
  148. if ("function" === typeof Proxy) {
  149. return true
  150. }
  151. try {
  152. Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
  153. return true
  154. } catch (e) {
  155. return false
  156. }
  157. }
  158. function _getPrototypeOf(o) {
  159. _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(o) {
  160. return o.__proto__ || Object.getPrototypeOf(o)
  161. };
  162. return _getPrototypeOf(o)
  163. }
  164. var FILE_MANAGER_TOOLBAR_CLASS = "dx-filemanager-toolbar";
  165. var FILE_MANAGER_GENERAL_TOOLBAR_CLASS = "dx-filemanager-general-toolbar";
  166. var FILE_MANAGER_FILE_TOOLBAR_CLASS = "dx-filemanager-file-toolbar";
  167. var FILE_MANAGER_TOOLBAR_SEPARATOR_ITEM_CLASS = FILE_MANAGER_TOOLBAR_CLASS + "-separator-item";
  168. var FILE_MANAGER_TOOLBAR_VIEWMODE_ITEM_CLASS = FILE_MANAGER_TOOLBAR_CLASS + "-viewmode-item";
  169. var DEFAULT_TOOLBAR_FILE_ITEMS = [{
  170. commandName: "download",
  171. location: "before",
  172. compactMode: {
  173. showText: "inMenu",
  174. locateInMenu: "auto"
  175. }
  176. }, {
  177. commandName: "separator",
  178. location: "before"
  179. }, {
  180. commandName: "move",
  181. location: "before",
  182. compactMode: {
  183. locateInMenu: "auto"
  184. }
  185. }, {
  186. commandName: "copy",
  187. location: "before",
  188. compactMode: {
  189. locateInMenu: "auto"
  190. }
  191. }, {
  192. commandName: "rename",
  193. location: "before",
  194. compactMode: {
  195. locateInMenu: "auto"
  196. }
  197. }, {
  198. commandName: "separator",
  199. location: "before"
  200. }, {
  201. commandName: "delete",
  202. location: "before",
  203. compactMode: {
  204. showText: "inMenu"
  205. }
  206. }, {
  207. commandName: "clear",
  208. location: "after",
  209. locateInMenu: "never",
  210. compactMode: {
  211. showText: "inMenu"
  212. }
  213. }];
  214. var DEFAULT_TOOLBAR_GENERAL_ITEMS = [{
  215. commandName: "showDirsPanel",
  216. location: "before"
  217. }, {
  218. commandName: "create",
  219. location: "before",
  220. compactMode: {
  221. showText: "inMenu",
  222. locateInMenu: "auto"
  223. }
  224. }, {
  225. commandName: "upload",
  226. location: "before",
  227. compactMode: {
  228. showText: "inMenu",
  229. locateInMenu: "auto"
  230. }
  231. }, {
  232. commandName: "refresh",
  233. location: "after",
  234. showText: "inMenu",
  235. compactMode: {
  236. showText: "inMenu",
  237. locateInMenu: "auto"
  238. }
  239. }, {
  240. commandName: "separator",
  241. location: "after"
  242. }, {
  243. commandName: "viewMode",
  244. location: "after"
  245. }];
  246. var ALWAYS_VISIBLE_TOOLBAR_ITEMS = ["separator", "viewMode"];
  247. var FileManagerToolbar = function(_Widget) {
  248. _inherits(FileManagerToolbar, _Widget);
  249. var _super = _createSuper(FileManagerToolbar);
  250. function FileManagerToolbar() {
  251. _classCallCheck(this, FileManagerToolbar);
  252. return _super.apply(this, arguments)
  253. }
  254. _createClass(FileManagerToolbar, [{
  255. key: "_initMarkup",
  256. value: function() {
  257. this._commandManager = this.option("commandManager");
  258. this._generalToolbarVisible = true;
  259. this._generalToolbar = this._createToolbar(DEFAULT_TOOLBAR_GENERAL_ITEMS);
  260. this._fileToolbar = this._createToolbar(DEFAULT_TOOLBAR_FILE_ITEMS, true);
  261. this.$element().addClass(FILE_MANAGER_TOOLBAR_CLASS + " " + FILE_MANAGER_GENERAL_TOOLBAR_CLASS)
  262. }
  263. }, {
  264. key: "_render",
  265. value: function() {
  266. _get(_getPrototypeOf(FileManagerToolbar.prototype), "_render", this).call(this);
  267. var toolbar = this._getVisibleToolbar();
  268. this._checkCompactMode(toolbar)
  269. }
  270. }, {
  271. key: "_dimensionChanged",
  272. value: function(dimension) {
  273. if (!dimension || "height" !== dimension) {
  274. var toolbar = this._getVisibleToolbar();
  275. this._checkCompactMode(toolbar)
  276. }
  277. }
  278. }, {
  279. key: "_getVisibleToolbar",
  280. value: function() {
  281. return this._generalToolbarVisible ? this._generalToolbar : this._fileToolbar
  282. }
  283. }, {
  284. key: "_createToolbar",
  285. value: function(items, hidden) {
  286. var toolbarItems = this._getToolbarItems(items);
  287. var $toolbar = (0, _renderer2.default)("<div>").appendTo(this.$element());
  288. var result = this._createComponent($toolbar, _toolbar2.default, {
  289. items: toolbarItems,
  290. visible: !hidden
  291. });
  292. result.compactMode = false;
  293. return result
  294. }
  295. }, {
  296. key: "_getToolbarItems",
  297. value: function(items) {
  298. var _this = this;
  299. var groupHasItems = false;
  300. return items.map(function(item) {
  301. var commandName = (0, _type.isString)(item) ? item : item.commandName;
  302. var config = _this._getItemConfigByCommandName(commandName);
  303. if (!(0, _type.isObject)(item)) {
  304. item = {
  305. commandName: commandName
  306. }
  307. }
  308. var preparedItem = (0, _extend.extend)(true, config, item);
  309. if ("separator" === commandName) {
  310. preparedItem.visible = groupHasItems;
  311. groupHasItems = false
  312. } else {
  313. preparedItem.available = _this._isCommandAvailable(commandName);
  314. var itemVisible = preparedItem.available && (0, _common.ensureDefined)(preparedItem.visible, true);
  315. preparedItem.visible = itemVisible;
  316. groupHasItems = groupHasItems || itemVisible
  317. }
  318. return preparedItem
  319. })
  320. }
  321. }, {
  322. key: "_getItemConfigByCommandName",
  323. value: function(commandName) {
  324. var command = this._commandManager.getCommandByName(commandName);
  325. if (command) {
  326. return this._createCommandItem(command)
  327. }
  328. switch (commandName) {
  329. case "separator":
  330. return this._createSeparatorItem();
  331. case "viewMode":
  332. return this._createViewModeItem()
  333. }
  334. return {}
  335. }
  336. }, {
  337. key: "_createCommandItem",
  338. value: function(command) {
  339. var _this2 = this;
  340. return {
  341. widget: "dxButton",
  342. options: {
  343. text: command.text,
  344. commandText: command.text,
  345. icon: command.icon,
  346. stylingMode: "text",
  347. onClick: function(e) {
  348. return _this2._executeCommand(command)
  349. }
  350. }
  351. }
  352. }
  353. }, {
  354. key: "_createSeparatorItem",
  355. value: function() {
  356. return {
  357. template: function(data, index, element) {
  358. (0, _renderer2.default)(element).addClass(FILE_MANAGER_TOOLBAR_SEPARATOR_ITEM_CLASS)
  359. }
  360. }
  361. }
  362. }, {
  363. key: "_createViewModeItem",
  364. value: function() {
  365. var _this3 = this;
  366. var commandItems = ["thumbnails", "details"].map(function(name) {
  367. var _this3$_commandManage = _this3._commandManager.getCommandByName(name),
  368. text = _this3$_commandManage.text;
  369. return {
  370. name: name,
  371. text: text
  372. }
  373. });
  374. var selectedIndex = "thumbnails" === this.option("itemViewMode") ? 0 : 1;
  375. return {
  376. cssClass: FILE_MANAGER_TOOLBAR_VIEWMODE_ITEM_CLASS,
  377. widget: "dxSelectBox",
  378. options: {
  379. items: commandItems,
  380. value: commandItems[selectedIndex],
  381. displayExpr: "text",
  382. stylingMode: "filled",
  383. onValueChanged: function(e) {
  384. return _this3._executeCommand(e.value.name)
  385. }
  386. }
  387. }
  388. }
  389. }, {
  390. key: "_checkCompactMode",
  391. value: function(toolbar) {
  392. if (toolbar.compactMode) {
  393. this._toggleCompactMode(toolbar, false)
  394. }
  395. var toolbarWidth = toolbar.$element().width();
  396. var itemsWidth = toolbar._getItemsWidth();
  397. var useCompactMode = toolbarWidth < itemsWidth;
  398. if (toolbar.compactMode !== useCompactMode) {
  399. if (!toolbar.compactMode) {
  400. this._toggleCompactMode(toolbar, useCompactMode)
  401. }
  402. toolbar.compactMode = useCompactMode
  403. } else {
  404. if (toolbar.compactMode) {
  405. this._toggleCompactMode(toolbar, true)
  406. }
  407. }
  408. }
  409. }, {
  410. key: "_toggleCompactMode",
  411. value: function(toolbar, useCompactMode) {
  412. var _this4 = this;
  413. toolbar.beginUpdate();
  414. var items = toolbar.option("items");
  415. items.forEach(function(item, index) {
  416. if (item.compactMode) {
  417. var optionsSource = null;
  418. if (useCompactMode) {
  419. item.saved = _this4._getCompactModeOptions(item, item.available);
  420. optionsSource = item.compactMode
  421. } else {
  422. optionsSource = item.saved
  423. }
  424. var options = _this4._getCompactModeOptions(optionsSource, item.available);
  425. toolbar.option("items[".concat(index, "]"), options)
  426. }
  427. });
  428. toolbar.endUpdate()
  429. }
  430. }, {
  431. key: "_getCompactModeOptions",
  432. value: function(_ref, available) {
  433. var visible = _ref.visible,
  434. showText = _ref.showText,
  435. locateInMenu = _ref.locateInMenu;
  436. return {
  437. visible: available && (0, _common.ensureDefined)(visible, true),
  438. showText: (0, _common.ensureDefined)(showText, "always"),
  439. locateInMenu: (0, _common.ensureDefined)(locateInMenu, "never")
  440. }
  441. }
  442. }, {
  443. key: "_ensureAvailableCommandsVisible",
  444. value: function(toolbar, fileItems) {
  445. var _this5 = this;
  446. toolbar.beginUpdate();
  447. var groupHasItems = false;
  448. var items = toolbar.option("items");
  449. items.forEach(function(item, index) {
  450. var itemVisible = item.available;
  451. var showItem = false;
  452. if ("separator" === item.commandName) {
  453. showItem = groupHasItems;
  454. groupHasItems = false
  455. } else {
  456. item.available = _this5._isCommandAvailable(item.commandName, fileItems);
  457. showItem = item.available;
  458. groupHasItems = groupHasItems || showItem
  459. }
  460. if (showItem !== itemVisible) {
  461. var optionName = "items[".concat(index, "].visible");
  462. toolbar.option(optionName, showItem)
  463. }
  464. });
  465. toolbar.endUpdate()
  466. }
  467. }, {
  468. key: "_fileToolbarHasEffectiveItems",
  469. value: function(fileItems) {
  470. var _this6 = this;
  471. var items = this._fileToolbar.option("items");
  472. return items.some(function(_ref2) {
  473. var commandName = _ref2.commandName;
  474. return "clear" !== commandName && _this6._commandManager.isCommandAvailable(commandName, fileItems)
  475. })
  476. }
  477. }, {
  478. key: "_executeCommand",
  479. value: function(command) {
  480. this._commandManager.executeCommand(command)
  481. }
  482. }, {
  483. key: "_isCommandAvailable",
  484. value: function(commandName, fileItems) {
  485. return ALWAYS_VISIBLE_TOOLBAR_ITEMS.indexOf(commandName) > -1 || this._commandManager.isCommandAvailable(commandName, fileItems)
  486. }
  487. }, {
  488. key: "_getDefaultOptions",
  489. value: function() {
  490. return (0, _extend.extend)(_get(_getPrototypeOf(FileManagerToolbar.prototype), "_getDefaultOptions", this).call(this), {
  491. commandManager: null,
  492. itemViewMode: "details"
  493. })
  494. }
  495. }, {
  496. key: "_optionChanged",
  497. value: function(args) {
  498. var name = args.name;
  499. switch (name) {
  500. case "commandManager":
  501. case "itemViewMode":
  502. this.repaint();
  503. break;
  504. default:
  505. _get(_getPrototypeOf(FileManagerToolbar.prototype), "_optionChanged", this).call(this, args)
  506. }
  507. }
  508. }, {
  509. key: "update",
  510. value: function(fileItems) {
  511. fileItems = (0, _common.ensureDefined)(fileItems, []);
  512. var showGeneralToolbar = 0 === fileItems.length || !this._fileToolbarHasEffectiveItems(fileItems);
  513. if (this._generalToolbarVisible !== showGeneralToolbar) {
  514. this._generalToolbar.option("visible", showGeneralToolbar);
  515. this._fileToolbar.option("visible", !showGeneralToolbar);
  516. this._generalToolbarVisible = showGeneralToolbar;
  517. this.$element().toggleClass(FILE_MANAGER_GENERAL_TOOLBAR_CLASS, showGeneralToolbar);
  518. this.$element().toggleClass(FILE_MANAGER_FILE_TOOLBAR_CLASS, !showGeneralToolbar)
  519. }
  520. var toolbar = this._getVisibleToolbar();
  521. this._ensureAvailableCommandsVisible(toolbar, fileItems);
  522. this._checkCompactMode(toolbar)
  523. }
  524. }]);
  525. return FileManagerToolbar
  526. }(_ui2.default);
  527. module.exports = FileManagerToolbar;