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('item-icon'); | 350 icon.classList.add('volume-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('item-icon'); | 508 icon.classList.add('volume-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('item-icon'); | 692 icon.classList.add('volume-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 //////////////////////////////////////////////////////////////////////////////// | |
856 // DirectoryTree | 785 // DirectoryTree |
857 | 786 |
858 /** | 787 /** |
859 * Tree of directories on the middle bar. This element is also the root of | 788 * Tree of directories on the middle bar. This element is also the root of |
860 * items, in other words, this is the parent of the top-level items. | 789 * items, in other words, this is the parent of the top-level items. |
861 * | 790 * |
862 * @constructor | 791 * @constructor |
863 * @extends {cr.ui.Tree} | 792 * @extends {cr.ui.Tree} |
864 */ | 793 */ |
865 function DirectoryTree() {} | 794 function DirectoryTree() {} |
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
951 * @param {boolean} recursive True if the all visible sub-directories are | 880 * @param {boolean} recursive True if the all visible sub-directories are |
952 * updated recursively including left arrows. If false, the update walks | 881 * updated recursively including left arrows. If false, the update walks |
953 * only immediate child directories without arrows. | 882 * only immediate child directories without arrows. |
954 */ | 883 */ |
955 DirectoryTree.prototype.updateSubElementsFromList = function(recursive) { | 884 DirectoryTree.prototype.updateSubElementsFromList = function(recursive) { |
956 // First, current items which is not included in the dataModel should be | 885 // First, current items which is not included in the dataModel should be |
957 // removed. | 886 // removed. |
958 for (var i = 0; i < this.items.length;) { | 887 for (var i = 0; i < this.items.length;) { |
959 var found = false; | 888 var found = false; |
960 for (var j = 0; j < this.dataModel.length; j++) { | 889 for (var j = 0; j < this.dataModel.length; j++) { |
961 // Comparison by references, which is safe here, as model items are long | 890 if (NavigationModelItem.isSame(this.items[i].modelItem, |
962 // living. | 891 this.dataModel.item(j))) { |
963 if (this.items[i].modelItem === this.dataModel.item(j)) { | |
964 found = true; | 892 found = true; |
965 break; | 893 break; |
966 } | 894 } |
967 } | 895 } |
968 if (!found) { | 896 if (!found) { |
969 if (this.items[i].selected) | 897 if (this.items[i].selected) |
970 this.items[i].selected = false; | 898 this.items[i].selected = false; |
971 this.remove(this.items[i]); | 899 this.remove(this.items[i]); |
972 } else { | 900 } else { |
973 i++; | 901 i++; |
974 } | 902 } |
975 } | 903 } |
976 | 904 |
977 // Next, insert items which is in dataModel but not in current items. | 905 // Next, insert items which is in dataModel but not in current items. |
978 var modelIndex = 0; | 906 var modelIndex = 0; |
979 var itemIndex = 0; | 907 var itemIndex = 0; |
980 while (modelIndex < this.dataModel.length) { | 908 while (modelIndex < this.dataModel.length) { |
981 if (itemIndex < this.items.length && | 909 if (itemIndex < this.items.length && |
982 this.items[itemIndex].modelItem === this.dataModel.item(modelIndex)) { | 910 NavigationModelItem.isSame(this.items[itemIndex].modelItem, |
| 911 this.dataModel.item(modelIndex))) { |
983 if (recursive && this.items[itemIndex] instanceof VolumeItem) | 912 if (recursive && this.items[itemIndex] instanceof VolumeItem) |
984 this.items[itemIndex].updateSubDirectories(true); | 913 this.items[itemIndex].updateSubDirectories(true); |
985 } else { | 914 } else { |
986 var modelItem = this.dataModel.item(modelIndex); | 915 var modelItem = this.dataModel.item(modelIndex); |
987 switch (modelItem.type) { | 916 if (modelItem.isVolume) { |
988 case NavigationModelItem.Type.VOLUME: | 917 if (modelItem.volumeInfo.volumeType === |
989 if (modelItem.volumeInfo.volumeType === | 918 VolumeManagerCommon.VolumeType.DRIVE) { |
990 VolumeManagerCommon.VolumeType.DRIVE) { | 919 this.addAt(new DriveVolumeItem(modelItem, this), itemIndex); |
991 this.addAt(new DriveVolumeItem(modelItem, this), itemIndex); | 920 } else { |
992 } else { | 921 this.addAt(new VolumeItem(modelItem, this), itemIndex); |
993 this.addAt(new VolumeItem(modelItem, this), itemIndex); | 922 } |
994 } | 923 } else { |
995 break; | 924 this.addAt(new ShortcutItem(modelItem, this), itemIndex); |
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; | |
1002 } | 925 } |
1003 } | 926 } |
1004 itemIndex++; | 927 itemIndex++; |
1005 modelIndex++; | 928 modelIndex++; |
1006 } | 929 } |
1007 | 930 |
1008 if (itemIndex !== 0) | 931 if (itemIndex !== 0) |
1009 this.hasChildren = true; | 932 this.hasChildren = true; |
1010 }; | 933 }; |
1011 | 934 |
(...skipping 192 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1204 } | 1127 } |
1205 }.bind(this)); | 1128 }.bind(this)); |
1206 }; | 1129 }; |
1207 | 1130 |
1208 /** | 1131 /** |
1209 * Updates the UI after the layout has changed. | 1132 * Updates the UI after the layout has changed. |
1210 */ | 1133 */ |
1211 DirectoryTree.prototype.relayout = function() { | 1134 DirectoryTree.prototype.relayout = function() { |
1212 cr.dispatchSimpleEvent(this, 'relayout', true); | 1135 cr.dispatchSimpleEvent(this, 'relayout', true); |
1213 }; | 1136 }; |
OLD | NEW |