Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/js/application/diff/DiffPathView.js
| /** | /** | ||||
| * @provides phabricator-diff-path-view | * @provides phabricator-diff-path-view | ||||
| * @requires javelin-dom | * @requires javelin-dom | ||||
| * @javelin | * @javelin | ||||
| */ | */ | ||||
| JX.install('DiffPathView', { | JX.install('DiffPathView', { | ||||
| construct: function() { | construct: function() { | ||||
| }, | }, | ||||
| properties: { | |||||
| changeset: null | |||||
| }, | |||||
| members: { | members: { | ||||
| _node: null, | _node: null, | ||||
| _path: null, | _path: null, | ||||
| _depth: 0, | _depth: 0, | ||||
| _selected: false, | _selected: false, | ||||
| _focused: false, | |||||
| _icon: null, | |||||
| _indentNode: null, | |||||
| _pathNode: null, | |||||
| _changeset: null, | |||||
| getNode: function() { | getNode: function() { | ||||
| if (!this._node) { | if (!this._node) { | ||||
| this._node = JX.$N('li'); | var attrs = { | ||||
| className: 'diff-tree-path' | |||||
| }; | |||||
| this._node = JX.$N('li', attrs, this._getIndentNode()); | |||||
| var onclick = JX.bind(this, this._onclick); | var onclick = JX.bind(this, this._onclick); | ||||
| JX.DOM.listen(this._node, 'click', null, onclick); | JX.DOM.listen(this._node, 'click', null, onclick); | ||||
| } | } | ||||
| return this._node; | return this._node; | ||||
| }, | }, | ||||
| getIcon: function() { | |||||
| if (!this._icon) { | |||||
| this._icon = new JX.PHUIXIconView(); | |||||
| } | |||||
| return this._icon; | |||||
| }, | |||||
| setPath: function(path) { | setPath: function(path) { | ||||
| this._path = path; | this._path = path; | ||||
| this._redraw(); | |||||
| var display = this._path[this._path.length - 1]; | |||||
| JX.DOM.setContent(this._getPathNode(), display); | |||||
| return this; | return this; | ||||
| }, | }, | ||||
| setChangeset: function(changeset) { | |||||
| this._changeset = changeset; | |||||
| var node = this.getNode(); | |||||
| JX.DOM.alterClass(node, 'diff-tree-path-changeset', !!changeset); | |||||
| return this; | |||||
| }, | |||||
| getChangeset: function() { | |||||
| return this._changeset; | |||||
| }, | |||||
| getPath: function() { | getPath: function() { | ||||
| return this._path; | return this._path; | ||||
| }, | }, | ||||
| setDepth: function(depth) { | setDepth: function(depth) { | ||||
| this._depth = depth; | this._depth = depth; | ||||
| this._redraw(); | |||||
| this._getIndentNode().style.marginLeft = (8 * this._depth) + 'px'; | |||||
| return this; | return this; | ||||
| }, | }, | ||||
| setIsSelected: function(selected) { | setIsSelected: function(selected) { | ||||
| this._selected = selected; | this._selected = selected; | ||||
| this._redraw(); | |||||
| var node = this.getNode(); | |||||
| JX.DOM.alterClass(node, 'diff-tree-path-selected', this._selected); | |||||
| return this; | |||||
| }, | |||||
| setIsFocused: function(focused) { | |||||
| this._focused = focused; | |||||
| var node = this.getNode(); | |||||
| JX.DOM.alterClass(node, 'diff-tree-path-focused', this._focused); | |||||
| return this; | return this; | ||||
| }, | }, | ||||
| _onclick: function(e) { | _onclick: function(e) { | ||||
| if (!e.isNormalClick()) { | if (!e.isNormalClick()) { | ||||
| return; | return; | ||||
| } | } | ||||
| var changeset = this.getChangeset(); | var changeset = this.getChangeset(); | ||||
| if (changeset) { | if (changeset) { | ||||
| changeset.select(true); | changeset.select(true); | ||||
| } | } | ||||
| e.kill(); | e.kill(); | ||||
| }, | }, | ||||
| _redraw: function() { | _getIndentNode: function() { | ||||
| var node = this.getNode(); | if (!this._indentNode) { | ||||
| var content = [ | |||||
| this._getIconNode(), | |||||
| this._getPathNode(), | |||||
| ]; | |||||
| node.style.paddingLeft = (8 * this._depth) + 'px'; | this._indentNode = JX.$N('div', {}, content); | ||||
| } | |||||
| var display = this._path[this._path.length - 1]; | return this._indentNode; | ||||
| }, | |||||
| if (this._selected) { | _getPathNode: function() { | ||||
| display = ['*', display]; | if (!this._pathNode) { | ||||
| var attrs = { | |||||
| className: 'diff-tree-path-name' | |||||
| }; | |||||
| this._pathNode = JX.$N('div', attrs); | |||||
| } | } | ||||
| return this._pathNode; | |||||
| }, | |||||
| JX.DOM.setContent(node, display); | _getIconNode: function() { | ||||
| if (!this._iconNode) { | |||||
| var attrs = { | |||||
| className: 'diff-tree-path-icon', | |||||
| }; | |||||
| this._iconNode = JX.$N('div', attrs, this.getIcon().getNode()); | |||||
| } | |||||
| return this._iconNode; | |||||
| } | } | ||||
| } | } | ||||
| }); | }); | ||||