Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/js/application/diff/DiffInline.js
| Show First 20 Lines • Show All 45 Lines • ▼ Show 20 Lines | members: { | ||||
| _draftRequest: null, | _draftRequest: null, | ||||
| _skipFocus: false, | _skipFocus: false, | ||||
| _menu: null, | _menu: null, | ||||
| _startOffset: null, | _startOffset: null, | ||||
| _endOffset: null, | _endOffset: null, | ||||
| _isSelected: false, | _isSelected: false, | ||||
| _canSuggestEdit: false, | |||||
| bindToRow: function(row) { | bindToRow: function(row) { | ||||
| this._row = row; | this._row = row; | ||||
| var row_data = JX.Stratcom.getData(row); | var row_data = JX.Stratcom.getData(row); | ||||
| row_data.inline = this; | row_data.inline = this; | ||||
| this._isCollapsed = row_data.hidden || false; | this._isCollapsed = row_data.hidden || false; | ||||
| Show All 9 Lines | bindToRow: function(row) { | ||||
| this._displaySide = 'right'; | this._displaySide = 'right'; | ||||
| } else { | } else { | ||||
| this._displaySide = 'left'; | this._displaySide = 'left'; | ||||
| } | } | ||||
| this._number = parseInt(data.number, 10); | this._number = parseInt(data.number, 10); | ||||
| this._length = parseInt(data.length, 10); | this._length = parseInt(data.length, 10); | ||||
| this._originalState = data.contentState; | |||||
| this._isNewFile = data.isNewFile; | this._isNewFile = data.isNewFile; | ||||
| this._replyToCommentPHID = data.replyToCommentPHID; | this._replyToCommentPHID = data.replyToCommentPHID; | ||||
| this._isDraft = data.isDraft; | this._isDraft = data.isDraft; | ||||
| this._isFixed = data.isFixed; | this._isFixed = data.isFixed; | ||||
| this._isGhost = data.isGhost; | this._isGhost = data.isGhost; | ||||
| this._isSynthetic = data.isSynthetic; | this._isSynthetic = data.isSynthetic; | ||||
| ▲ Show 20 Lines • Show All 509 Lines • ▼ Show 20 Lines | _oncreateresponse: function(response) { | ||||
| var rows = JX.$H(response.view).getNode(); | var rows = JX.$H(response.view).getNode(); | ||||
| this._readInlineState(response.inline); | this._readInlineState(response.inline); | ||||
| this._drawEditRows(rows); | this._drawEditRows(rows); | ||||
| }, | }, | ||||
| _readInlineState: function(state) { | _readInlineState: function(state) { | ||||
| this._id = state.id; | this._id = state.id; | ||||
| this._originalState = state.contentState; | |||||
| this._canSuggestEdit = state.canSuggestEdit; | |||||
| }, | }, | ||||
| _ondeleteresponse: function() { | _ondeleteresponse: function() { | ||||
| // If there's an existing "unedit" undo element, remove it. | // If there's an existing "unedit" undo element, remove it. | ||||
| if (this._undoRow) { | if (this._undoRow) { | ||||
| JX.DOM.remove(this._undoRow); | JX.DOM.remove(this._undoRow); | ||||
| this._undoRow = null; | this._undoRow = null; | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 46 Lines • ▼ Show 20 Lines | members: { | ||||
| _drawContentRows: function(rows) { | _drawContentRows: function(rows) { | ||||
| return this._drawRows(rows, null, 'content'); | return this._drawRows(rows, null, 'content'); | ||||
| }, | }, | ||||
| _drawEditRows: function(rows) { | _drawEditRows: function(rows) { | ||||
| this.setEditing(true); | this.setEditing(true); | ||||
| this._editRow = this._drawRows(rows, null, 'edit'); | this._editRow = this._drawRows(rows, null, 'edit'); | ||||
| this._drawSuggestionState(this._editRow); | |||||
| JX.log(this._originalState); | |||||
| this.setHasSuggestion(this._originalState.hasSuggestion); | |||||
| }, | }, | ||||
| _drawRows: function(rows, cursor, type) { | _drawRows: function(rows, cursor, type) { | ||||
| var first_row = JX.DOM.scry(rows, 'tr')[0]; | var first_row = JX.DOM.scry(rows, 'tr')[0]; | ||||
| var row = first_row; | var row = first_row; | ||||
| var anchor = cursor || this._row; | var anchor = cursor || this._row; | ||||
| cursor = cursor || this._row.nextSibling; | cursor = cursor || this._row.nextSibling; | ||||
| Show All 39 Lines | _drawRows: function(rows, cursor, type) { | ||||
| row = next_row; | row = next_row; | ||||
| } | } | ||||
| JX.Stratcom.invoke('resize'); | JX.Stratcom.invoke('resize'); | ||||
| return result_row; | return result_row; | ||||
| }, | }, | ||||
| _drawSuggestionState: function(row) { | |||||
| if (this._canSuggestEdit) { | |||||
| var button = this._getSuggestionButton(); | |||||
| var node = button.getNode(); | |||||
| // As a side effect of form submission, the button may become | |||||
| // visually disabled. Re-enable it. This is a bit hacky. | |||||
| JX.DOM.alterClass(node, 'disabled', false); | |||||
| node.disabled = false; | |||||
| var container = JX.DOM.find(row, 'div', 'inline-edit-buttons'); | |||||
| container.appendChild(node); | |||||
| } | |||||
| }, | |||||
| _getSuggestionButton: function() { | |||||
| if (!this._suggestionButton) { | |||||
| var button = new JX.PHUIXButtonView() | |||||
| .setIcon('fa-pencil-square-o') | |||||
| .setColor('grey'); | |||||
| var node = button.getNode(); | |||||
| JX.DOM.alterClass(node, 'inline-button-left', true); | |||||
| var onclick = JX.bind(this, this._onSuggestEdit); | |||||
| JX.DOM.listen(node, 'click', null, onclick); | |||||
| this._suggestionButton = button; | |||||
| } | |||||
| return this._suggestionButton; | |||||
| }, | |||||
| _onSuggestEdit: function(e) { | |||||
| e.kill(); | |||||
| this.setHasSuggestion(!this.getHasSuggestion()); | |||||
| // The first time the user actually clicks the button and enables | |||||
| // suggestions for a given editor state, fill the input with the | |||||
| // underlying text if there isn't any text yet. | |||||
| if (this.getHasSuggestion()) { | |||||
| if (this._editRow) { | |||||
| var node = this._getSuggestionNode(this._editRow); | |||||
| if (node) { | |||||
| if (!node.value.length) { | |||||
| var data = JX.Stratcom.getData(node); | |||||
| if (!data.hasSetDefault) { | |||||
| data.hasSetDefault = true; | |||||
| node.value = data.defaultText; | |||||
| node.rows = Math.max(3, node.value.split('\n').length); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // Save the "hasSuggestion" part of the content state. | |||||
| this.triggerDraft(); | |||||
| }, | |||||
| setHasSuggestion: function(has_suggestion) { | |||||
| this._hasSuggestion = has_suggestion; | |||||
| var button = this._getSuggestionButton(); | |||||
| var pht = this.getChangeset().getChangesetList().getTranslations(); | |||||
| if (has_suggestion) { | |||||
| button | |||||
| .setIcon('fa-times') | |||||
| .setText(pht('Discard Edit')); | |||||
| } else { | |||||
| button | |||||
| .setIcon('fa-plus') | |||||
| .setText(pht('Suggest Edit')); | |||||
| } | |||||
| if (this._editRow) { | |||||
| JX.DOM.alterClass(this._editRow, 'has-suggestion', has_suggestion); | |||||
| } | |||||
| }, | |||||
| getHasSuggestion: function() { | |||||
| return this._hasSuggestion; | |||||
| }, | |||||
| save: function() { | save: function() { | ||||
| var handler = JX.bind(this, this._onsubmitresponse); | var handler = JX.bind(this, this._onsubmitresponse); | ||||
| this.setLoading(true); | this.setLoading(true); | ||||
| var uri = this._getInlineURI(); | var uri = this._getInlineURI(); | ||||
| var data = this._newRequestData('save', this._getContentState()); | var data = this._newRequestData('save', this._getContentState()); | ||||
| ▲ Show 20 Lines • Show All 90 Lines • ▼ Show 20 Lines | _readFormState: function(row) { | ||||
| try { | try { | ||||
| node = JX.DOM.find(row, 'textarea', 'inline-content-text'); | node = JX.DOM.find(row, 'textarea', 'inline-content-text'); | ||||
| state.text = node.value; | state.text = node.value; | ||||
| } catch (ex) { | } catch (ex) { | ||||
| // Ignore. | // Ignore. | ||||
| } | } | ||||
| try { | node = this._getSuggestionNode(row); | ||||
| node = JX.DOM.find(row, 'textarea', 'inline-content-suggestion'); | if (node) { | ||||
| state.suggestionText = node.value; | state.suggestionText = node.value; | ||||
| } catch (ex) { | |||||
| // Ignore. | |||||
| } | } | ||||
| state.hasSuggestion = this.getHasSuggestion(); | |||||
| return state; | return state; | ||||
| }, | }, | ||||
| _getSuggestionNode: function(row) { | |||||
| try { | |||||
| return JX.DOM.find(row, 'textarea', 'inline-content-suggestion'); | |||||
| } catch (ex) { | |||||
| return null; | |||||
| } | |||||
| }, | |||||
| _onsubmitresponse: function(response) { | _onsubmitresponse: function(response) { | ||||
| if (this._editRow) { | if (this._editRow) { | ||||
| JX.DOM.remove(this._editRow); | JX.DOM.remove(this._editRow); | ||||
| this._editRow = null; | this._editRow = null; | ||||
| } | } | ||||
| this.setLoading(false); | this.setLoading(false); | ||||
| this.setInvisible(false); | this.setInvisible(false); | ||||
| ▲ Show 20 Lines • Show All 212 Lines • ▼ Show 20 Lines | _closeMenu: function() { | ||||
| this._menu.close(); | this._menu.close(); | ||||
| } | } | ||||
| }, | }, | ||||
| _newContentState: function() { | _newContentState: function() { | ||||
| return { | return { | ||||
| text: '', | text: '', | ||||
| suggestionText: '', | suggestionText: '', | ||||
| hasSuggestion: true | hasSuggestion: false | ||||
| }; | }; | ||||
| }, | }, | ||||
| _isVoidContentState: function(state) { | _isVoidContentState: function(state) { | ||||
| return (!state.text.length && !state.suggestionText.length); | return (!state.text.length && !state.suggestionText.length); | ||||
| }, | }, | ||||
| _isSameContentState: function(u, v) { | _isSameContentState: function(u, v) { | ||||
| return ( | return ( | ||||
| ((u === null) === (v === null)) && | |||||
| (u.text === v.text) && | (u.text === v.text) && | ||||
| (u.suggestionText === v.suggestionText) && | (u.suggestionText === v.suggestionText) && | ||||
| (u.hasSuggestion === v.hasSuggestion)); | (u.hasSuggestion === v.hasSuggestion)); | ||||
| } | } | ||||
| } | } | ||||
| }); | }); | ||||