OLD | NEW |
1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 //////////////////////////////////////////////////////////////////////////////// | 5 //////////////////////////////////////////////////////////////////////////////// |
6 // DirectoryTreeBase | 6 // DirectoryTreeBase |
7 | 7 |
8 /** | 8 /** |
9 * Implementation of methods for DirectoryTree and DirectoryItem. These classes | 9 * Implementation of methods for DirectoryTree and DirectoryItem. These classes |
10 * inherits cr.ui.Tree/TreeItem so we can't make them inherit this class. | 10 * inherits cr.ui.Tree/TreeItem so we can't make them inherit this class. |
(...skipping 329 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
340 * @constructor | 340 * @constructor |
341 */ | 341 */ |
342 function SubDirectoryItem(label, dirEntry, parentDirItem, tree) { | 342 function SubDirectoryItem(label, dirEntry, parentDirItem, tree) { |
343 var item = new DirectoryItem(label, tree); | 343 var item = new DirectoryItem(label, tree); |
344 item.__proto__ = SubDirectoryItem.prototype; | 344 item.__proto__ = SubDirectoryItem.prototype; |
345 | 345 |
346 item.dirEntry_ = dirEntry; | 346 item.dirEntry_ = dirEntry; |
347 | 347 |
348 // Sets up icons of the item. | 348 // Sets up icons of the item. |
349 var icon = item.querySelector('.icon'); | 349 var icon = item.querySelector('.icon'); |
350 icon.classList.add('volume-icon'); | 350 icon.classList.add('item-icon'); |
351 var location = tree.volumeManager.getLocationInfo(item.entry); | 351 var location = tree.volumeManager.getLocationInfo(item.entry); |
352 if (location && location.rootType && location.isRootEntry) { | 352 if (location && location.rootType && location.isRootEntry) { |
353 icon.setAttribute('volume-type-icon', location.rootType); | 353 icon.setAttribute('volume-type-icon', location.rootType); |
354 } else { | 354 } else { |
355 icon.setAttribute('file-type-icon', 'folder'); | 355 icon.setAttribute('file-type-icon', 'folder'); |
356 item.updateSharedStatusIcon(); | 356 item.updateSharedStatusIcon(); |
357 } | 357 } |
358 | 358 |
359 // Sets up context menu of the item. | 359 // Sets up context menu of the item. |
360 if (tree.contextMenuForSubitems) | 360 if (tree.contextMenuForSubitems) |
(...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
498 volumeType === VolumeManagerCommon.VolumeType.PROVIDED; | 498 volumeType === VolumeManagerCommon.VolumeType.PROVIDED; |
499 }; | 499 }; |
500 | 500 |
501 /** | 501 /** |
502 * Set up icon of this volume item. | 502 * Set up icon of this volume item. |
503 * @param {Element} icon Icon element to be setup. | 503 * @param {Element} icon Icon element to be setup. |
504 * @param {VolumeInfo} volumeInfo VolumeInfo determines the icon type. | 504 * @param {VolumeInfo} volumeInfo VolumeInfo determines the icon type. |
505 * @private | 505 * @private |
506 */ | 506 */ |
507 VolumeItem.prototype.setupIcon_ = function(icon, volumeInfo) { | 507 VolumeItem.prototype.setupIcon_ = function(icon, volumeInfo) { |
508 icon.classList.add('volume-icon'); | 508 icon.classList.add('item-icon'); |
509 if (volumeInfo.volumeType === VolumeManagerCommon.VolumeType.PROVIDED) { | 509 if (volumeInfo.volumeType === VolumeManagerCommon.VolumeType.PROVIDED) { |
510 var backgroundImage = '-webkit-image-set(' + | 510 var backgroundImage = '-webkit-image-set(' + |
511 'url(chrome://extension-icon/' + volumeInfo.extensionId + | 511 'url(chrome://extension-icon/' + volumeInfo.extensionId + |
512 '/16/1) 1x, ' + | 512 '/16/1) 1x, ' + |
513 'url(chrome://extension-icon/' + volumeInfo.extensionId + | 513 'url(chrome://extension-icon/' + volumeInfo.extensionId + |
514 '/32/1) 2x);'; | 514 '/32/1) 2x);'; |
515 // The icon div is not yet added to DOM, therefore it is impossible to | 515 // The icon div is not yet added to DOM, therefore it is impossible to |
516 // use style.backgroundImage. | 516 // use style.backgroundImage. |
517 icon.setAttribute( | 517 icon.setAttribute( |
518 'style', 'background-image: ' + backgroundImage); | 518 'style', 'background-image: ' + backgroundImage); |
(...skipping 163 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
682 var item = new cr.ui.TreeItem(); | 682 var item = new cr.ui.TreeItem(); |
683 item.__proto__ = ShortcutItem.prototype; | 683 item.__proto__ = ShortcutItem.prototype; |
684 | 684 |
685 item.parentTree_ = tree; | 685 item.parentTree_ = tree; |
686 item.dirEntry_ = modelItem.entry; | 686 item.dirEntry_ = modelItem.entry; |
687 item.modelItem_ = modelItem; | 687 item.modelItem_ = modelItem; |
688 | 688 |
689 item.innerHTML = TREE_ITEM_INNTER_HTML; | 689 item.innerHTML = TREE_ITEM_INNTER_HTML; |
690 | 690 |
691 var icon = item.querySelector('.icon'); | 691 var icon = item.querySelector('.icon'); |
692 icon.classList.add('volume-icon'); | 692 icon.classList.add('item-icon'); |
693 icon.setAttribute('volume-type-icon', VolumeManagerCommon.VolumeType.DRIVE); | 693 icon.setAttribute('volume-type-icon', VolumeManagerCommon.VolumeType.DRIVE); |
694 | 694 |
695 if (tree.contextMenuForRootItems) | 695 if (tree.contextMenuForRootItems) |
696 item.setContextMenu(tree.contextMenuForRootItems); | 696 item.setContextMenu(tree.contextMenuForRootItems); |
697 | 697 |
698 item.label = modelItem.entry.name; | 698 item.label = modelItem.entry.name; |
699 return item; | 699 return item; |
700 } | 700 } |
701 | 701 |
702 ShortcutItem.prototype = { | 702 ShortcutItem.prototype = { |
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
775 onEntryResolved, | 775 onEntryResolved, |
776 function() { | 776 function() { |
777 // Error, the entry can't be re-resolved. It may happen for shortcuts | 777 // Error, the entry can't be re-resolved. It may happen for shortcuts |
778 // which targets got removed after resolving the Entry during | 778 // which targets got removed after resolving the Entry during |
779 // initialization. | 779 // initialization. |
780 this.parentTree_.dataModel.onItemNotFoundError(this.modelItem); | 780 this.parentTree_.dataModel.onItemNotFoundError(this.modelItem); |
781 }.bind(this)); | 781 }.bind(this)); |
782 }; | 782 }; |
783 | 783 |
784 //////////////////////////////////////////////////////////////////////////////// | 784 //////////////////////////////////////////////////////////////////////////////// |
| 785 // CommandItem |
| 786 |
| 787 /** |
| 788 * A TreeItem which represents a command button. |
| 789 * Command items are displayed as top-level children of DirectoryTree. |
| 790 * |
| 791 * @param {NavigationModelCommandItem} modelItem |
| 792 * @param {DirectoryTree} tree Current tree, which contains this item. |
| 793 * @extends {cr.ui.TreeItem} |
| 794 * @constructor |
| 795 */ |
| 796 function CommandItem(modelItem, tree) { |
| 797 var item = new cr.ui.TreeItem(); |
| 798 item.__proto__ = CommandItem.prototype; |
| 799 |
| 800 item.parentTree_ = tree; |
| 801 item.modelItem_ = modelItem; |
| 802 |
| 803 item.innerHTML = TREE_ITEM_INNTER_HTML; |
| 804 |
| 805 var icon = item.querySelector('.icon'); |
| 806 icon.classList.add('item-icon'); |
| 807 icon.setAttribute('command-icon', modelItem.command.id); |
| 808 |
| 809 item.label = modelItem.label; |
| 810 return item; |
| 811 } |
| 812 |
| 813 CommandItem.prototype = { |
| 814 __proto__: cr.ui.TreeItem.prototype, |
| 815 get entry() { |
| 816 return null; |
| 817 }, |
| 818 get modelItem() { |
| 819 return this.modelItem_; |
| 820 }, |
| 821 get labelElement() { |
| 822 return this.firstElementChild.querySelector('.label'); |
| 823 } |
| 824 }; |
| 825 |
| 826 /** |
| 827 * @param {!DirectoryEntry|!FakeEntry} entry |
| 828 * @return {boolean} True if the parent item is found. |
| 829 */ |
| 830 CommandItem.prototype.searchAndSelectByEntry = function(entry) { |
| 831 return false; |
| 832 }; |
| 833 |
| 834 /** |
| 835 * @override |
| 836 */ |
| 837 CommandItem.prototype.handleClick = function(e) { |
| 838 this.activate(); |
| 839 }; |
| 840 |
| 841 /** |
| 842 * @param {!DirectoryEntry} entry |
| 843 */ |
| 844 CommandItem.prototype.selectByEntry = function(entry) { |
| 845 }; |
| 846 |
| 847 /** |
| 848 * Executes the command. |
| 849 */ |
| 850 CommandItem.prototype.activate = function() { |
| 851 this.modelItem_.command.execute(); |
| 852 }; |
| 853 |
| 854 |
| 855 //////////////////////////////////////////////////////////////////////////////// |
785 // DirectoryTree | 856 // DirectoryTree |
786 | 857 |
787 /** | 858 /** |
788 * Tree of directories on the middle bar. This element is also the root of | 859 * Tree of directories on the middle bar. This element is also the root of |
789 * items, in other words, this is the parent of the top-level items. | 860 * items, in other words, this is the parent of the top-level items. |
790 * | 861 * |
791 * @constructor | 862 * @constructor |
792 * @extends {cr.ui.Tree} | 863 * @extends {cr.ui.Tree} |
793 */ | 864 */ |
794 function DirectoryTree() {} | 865 function DirectoryTree() {} |
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
880 * @param {boolean} recursive True if the all visible sub-directories are | 951 * @param {boolean} recursive True if the all visible sub-directories are |
881 * updated recursively including left arrows. If false, the update walks | 952 * updated recursively including left arrows. If false, the update walks |
882 * only immediate child directories without arrows. | 953 * only immediate child directories without arrows. |
883 */ | 954 */ |
884 DirectoryTree.prototype.updateSubElementsFromList = function(recursive) { | 955 DirectoryTree.prototype.updateSubElementsFromList = function(recursive) { |
885 // First, current items which is not included in the dataModel should be | 956 // First, current items which is not included in the dataModel should be |
886 // removed. | 957 // removed. |
887 for (var i = 0; i < this.items.length;) { | 958 for (var i = 0; i < this.items.length;) { |
888 var found = false; | 959 var found = false; |
889 for (var j = 0; j < this.dataModel.length; j++) { | 960 for (var j = 0; j < this.dataModel.length; j++) { |
890 if (NavigationModelItem.isSame(this.items[i].modelItem, | 961 // Comparison by references, which is safe here, as model items are long |
891 this.dataModel.item(j))) { | 962 // living. |
| 963 if (this.items[i].modelItem === this.dataModel.item(j)) { |
892 found = true; | 964 found = true; |
893 break; | 965 break; |
894 } | 966 } |
895 } | 967 } |
896 if (!found) { | 968 if (!found) { |
897 if (this.items[i].selected) | 969 if (this.items[i].selected) |
898 this.items[i].selected = false; | 970 this.items[i].selected = false; |
899 this.remove(this.items[i]); | 971 this.remove(this.items[i]); |
900 } else { | 972 } else { |
901 i++; | 973 i++; |
902 } | 974 } |
903 } | 975 } |
904 | 976 |
905 // Next, insert items which is in dataModel but not in current items. | 977 // Next, insert items which is in dataModel but not in current items. |
906 var modelIndex = 0; | 978 var modelIndex = 0; |
907 var itemIndex = 0; | 979 var itemIndex = 0; |
908 while (modelIndex < this.dataModel.length) { | 980 while (modelIndex < this.dataModel.length) { |
909 if (itemIndex < this.items.length && | 981 if (itemIndex < this.items.length && |
910 NavigationModelItem.isSame(this.items[itemIndex].modelItem, | 982 this.items[itemIndex].modelItem === this.dataModel.item(modelIndex)) { |
911 this.dataModel.item(modelIndex))) { | |
912 if (recursive && this.items[itemIndex] instanceof VolumeItem) | 983 if (recursive && this.items[itemIndex] instanceof VolumeItem) |
913 this.items[itemIndex].updateSubDirectories(true); | 984 this.items[itemIndex].updateSubDirectories(true); |
914 } else { | 985 } else { |
915 var modelItem = this.dataModel.item(modelIndex); | 986 var modelItem = this.dataModel.item(modelIndex); |
916 if (modelItem.isVolume) { | 987 switch (modelItem.type) { |
917 if (modelItem.volumeInfo.volumeType === | 988 case NavigationModelItem.Type.VOLUME: |
918 VolumeManagerCommon.VolumeType.DRIVE) { | 989 if (modelItem.volumeInfo.volumeType === |
919 this.addAt(new DriveVolumeItem(modelItem, this), itemIndex); | 990 VolumeManagerCommon.VolumeType.DRIVE) { |
920 } else { | 991 this.addAt(new DriveVolumeItem(modelItem, this), itemIndex); |
921 this.addAt(new VolumeItem(modelItem, this), itemIndex); | 992 } else { |
922 } | 993 this.addAt(new VolumeItem(modelItem, this), itemIndex); |
923 } else { | 994 } |
924 this.addAt(new ShortcutItem(modelItem, this), itemIndex); | 995 break; |
| 996 case NavigationModelItem.Type.SHORTCUT: |
| 997 this.addAt(new ShortcutItem(modelItem, this), itemIndex); |
| 998 break; |
| 999 case NavigationModelItem.Type.COMMAND: |
| 1000 this.addAt(new CommandItem(modelItem, this), itemIndex); |
| 1001 break; |
925 } | 1002 } |
926 } | 1003 } |
927 itemIndex++; | 1004 itemIndex++; |
928 modelIndex++; | 1005 modelIndex++; |
929 } | 1006 } |
930 | 1007 |
931 if (itemIndex !== 0) | 1008 if (itemIndex !== 0) |
932 this.hasChildren = true; | 1009 this.hasChildren = true; |
933 }; | 1010 }; |
934 | 1011 |
(...skipping 192 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1127 } | 1204 } |
1128 }.bind(this)); | 1205 }.bind(this)); |
1129 }; | 1206 }; |
1130 | 1207 |
1131 /** | 1208 /** |
1132 * Updates the UI after the layout has changed. | 1209 * Updates the UI after the layout has changed. |
1133 */ | 1210 */ |
1134 DirectoryTree.prototype.relayout = function() { | 1211 DirectoryTree.prototype.relayout = function() { |
1135 cr.dispatchSimpleEvent(this, 'relayout', true); | 1212 cr.dispatchSimpleEvent(this, 'relayout', true); |
1136 }; | 1213 }; |
OLD | NEW |