1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-05 05:02:44 +01:00
phorge-phorge/webroot/rsrc/js/application/conpherence/behavior-durable-column.js

365 lines
9.8 KiB
JavaScript
Raw Normal View History

/**
* @provides javelin-behavior-durable-column
* @requires javelin-behavior
* javelin-dom
* javelin-stratcom
* javelin-behavior-device
* javelin-scrollbar
Quicksand, an ignoble successor to Quickling Summary: Ref T2086. Ref T7014. With the persistent column, there is significant value in retaining chrome state through navigation events, because the user may have a lot of state in the chat window (scroll position, text selection, room juggling, partially entered text, etc). We can do this by capturing navigation events and faking them with Javascript. (This can also improve performance, albeit slightly, and I believe there are better approaches to tackle performance any problems which exist with the chrome in many cases). At Facebook, this system was "Photostream" in photos and then "Quickling" in general, and the technical cost of the system was //staggering//. I am loathe to pursue it again. However: - Browsers are less junky now, and we target a smaller set of browsers. A large part of the technical cost of Quickling was the high complexity of emulating nagivation events in IE, where we needed to navigate a hidden iframe to make history entries. All desktop browsers which we might want to use this system on support the History API (although this prototype does not yet implement it). - Javelin and Phabricator's architecture are much cleaner than Facebook's was. A large part of the technical cost of Quickling was inconsistency, inlined `onclick` handlers, and general lack of coordination and abstraction. We will have //some// of this, but "correctly written" behaviors are mostly immune to it by design, and many of Javelin's architectural decisions were influenced by desire to avoid issues we encountered building this stuff for Facebook. - Some of the primitives which Quickling required (like loading resources over Ajax) have existed in a stable state in our codebase for a year or more, and adoption of these primitives was trivial and uneventful (vs a huge production at Facebook). - My hubris is bolstered by recent success with WebSockets and JX.Scrollbar, both of which I would have assessed as infeasibly complex to develop in this project a few years ago. To these points, the developer cost to prototype Photostream was several weeks; the developer cost to prototype this was a bit less than an hour. It is plausible to me that implementing and maintaining this system really will be hundreds of times less complex than it was at Facebook. Test Plan: My plan for this and D11497 is: - Get them in master. - Some secret key / relatively-hidden preference activates the column. - Quicksand activates //only// when the column is open. - We can use column + quicksand for a long period of time (i.e., over the course of Conpherence v2 development) and hammer out the long tail of issues. - When it derps up, you just hide the column and you're good to go. Reviewers: btrahan, chad Reviewed By: chad Subscribers: epriestley Maniphest Tasks: T2086, T7014 Differential Revision: https://secure.phabricator.com/D11507
2015-01-27 23:52:09 +01:00
* javelin-quicksand
* phabricator-keyboard-shortcut
* conpherence-thread-manager
*/
JX.behavior('durable-column', function(config, statics) {
// TODO: Currently, updating the column sends the entire column back. This
// includes the `durable-column` behavior itself, which tries to re-initialize
// the column. Detect this and bail.
//
// If ThreadManager gets separated into a UI part and a thread part (which
// seems likely), responses may no longer ship back the entire column. This
// might let us remove this check.
if (statics.initialized) {
return;
} else {
statics.initialized = true;
}
var userVisible = config.visible;
var show = null;
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
var loadThreadID = null;
var scrollbar = null;
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
var margin = JX.Scrollbar.getScrollbarControlMargin();
var columnWidth = (300 + margin);
// This is the smallest window size where we'll enable the column.
var minimumViewportWidth = (768 - margin);
Quicksand, an ignoble successor to Quickling Summary: Ref T2086. Ref T7014. With the persistent column, there is significant value in retaining chrome state through navigation events, because the user may have a lot of state in the chat window (scroll position, text selection, room juggling, partially entered text, etc). We can do this by capturing navigation events and faking them with Javascript. (This can also improve performance, albeit slightly, and I believe there are better approaches to tackle performance any problems which exist with the chrome in many cases). At Facebook, this system was "Photostream" in photos and then "Quickling" in general, and the technical cost of the system was //staggering//. I am loathe to pursue it again. However: - Browsers are less junky now, and we target a smaller set of browsers. A large part of the technical cost of Quickling was the high complexity of emulating nagivation events in IE, where we needed to navigate a hidden iframe to make history entries. All desktop browsers which we might want to use this system on support the History API (although this prototype does not yet implement it). - Javelin and Phabricator's architecture are much cleaner than Facebook's was. A large part of the technical cost of Quickling was inconsistency, inlined `onclick` handlers, and general lack of coordination and abstraction. We will have //some// of this, but "correctly written" behaviors are mostly immune to it by design, and many of Javelin's architectural decisions were influenced by desire to avoid issues we encountered building this stuff for Facebook. - Some of the primitives which Quickling required (like loading resources over Ajax) have existed in a stable state in our codebase for a year or more, and adoption of these primitives was trivial and uneventful (vs a huge production at Facebook). - My hubris is bolstered by recent success with WebSockets and JX.Scrollbar, both of which I would have assessed as infeasibly complex to develop in this project a few years ago. To these points, the developer cost to prototype Photostream was several weeks; the developer cost to prototype this was a bit less than an hour. It is plausible to me that implementing and maintaining this system really will be hundreds of times less complex than it was at Facebook. Test Plan: My plan for this and D11497 is: - Get them in master. - Some secret key / relatively-hidden preference activates the column. - Quicksand activates //only// when the column is open. - We can use column + quicksand for a long period of time (i.e., over the course of Conpherence v2 development) and hammer out the long tail of issues. - When it derps up, you just hide the column and you're good to go. Reviewers: btrahan, chad Reviewed By: chad Subscribers: epriestley Maniphest Tasks: T2086, T7014 Differential Revision: https://secure.phabricator.com/D11507
2015-01-27 23:52:09 +01:00
var quick = JX.$('phabricator-standard-page-body');
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
function _getColumnNode() {
return JX.$('conpherence-durable-column');
}
function _getColumnScrollNode() {
var column = _getColumnNode();
return JX.DOM.find(column, 'div', 'conpherence-durable-column-main');
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
}
function _isViewportWideEnoughForColumn() {
var viewport = JX.Vector.getViewport();
if (viewport.x < minimumViewportWidth) {
return false;
} else {
return true;
}
}
function _updateColumnVisibility() {
var new_value = (userVisible && _isViewportWideEnoughForColumn());
if (new_value !== show) {
show = new_value;
_drawColumn(show);
}
}
function _toggleColumn() {
userVisible = !userVisible;
_updateColumnVisibility();
new JX.Request(config.settingsURI)
.setData({value: (show ? 1 : 0)})
.send();
}
function _drawColumn(visible) {
JX.DOM.alterClass(
document.body,
'with-durable-column',
visible);
JX.DOM.alterClass(
document.body,
'with-durable-margin',
visible && !!margin);
var column = _getColumnNode();
if (visible) {
JX.DOM.show(column);
threadManager.loadThreadByID(loadThreadID);
} else {
JX.DOM.hide(column);
}
JX.Quicksand.setFrame(visible ? quick : null);
// When we activate the column, adjust the tablet breakpoint so that we
// convert the left side of the screen to tablet mode on narrow displays.
var breakpoint;
if (visible) {
breakpoint = minimumViewportWidth + columnWidth;
} else {
breakpoint = minimumViewportWidth;
}
JX.Device.setTabletBreakpoint(breakpoint);
JX.Stratcom.invoke('resize');
}
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
new JX.KeyboardShortcut('\\', 'Toggle Conpherence Column')
.setHandler(_toggleColumn)
.register();
scrollbar = new JX.Scrollbar(_getColumnScrollNode());
JX.Quicksand.setFrame(userVisible ? quick : null);
JX.Quicksand.start(config.quicksandConfig);
/* Conpherence Thread Manager configuration - lots of display
* callbacks.
*/
var threadManager = new JX.ConpherenceThreadManager();
threadManager.setMinimalDisplay(true);
threadManager.setMessagesRootCallback(function() {
return _getColumnMessagesNode();
});
threadManager.setLoadThreadURI('/conpherence/columnview/');
threadManager.setWillLoadThreadCallback(function() {
_markLoading(true);
});
threadManager.setDidLoadThreadCallback(function(r) {
var column = _getColumnNode();
var new_column = JX.$H(r.content);
JX.DOM.replace(column, new_column);
if (show) {
JX.DOM.show(_getColumnNode());
} else {
JX.DOM.hide(_getColumnNode());
}
var messages = _getColumnMessagesNode();
scrollbar = new JX.Scrollbar(_getColumnScrollNode());
scrollbar.scrollTo(messages.scrollHeight);
_markLoading(false);
loadThreadID = threadManager.getLoadedThreadID();
});
threadManager.setDidUpdateThreadCallback(function(r) {
var messages = _getColumnMessagesNode();
scrollbar.scrollTo(messages.scrollHeight);
});
threadManager.setWillSendMessageCallback(function() {
// Wipe the textarea immediately so the user can start typing more text.
var textarea = _getColumnTextareaNode();
textarea.value = '';
_focusColumnTextareaNode();
});
threadManager.setDidSendMessageCallback(function(r, non_update) {
if (non_update) {
return;
}
var messages = _getColumnMessagesNode();
scrollbar.scrollTo(messages.scrollHeight);
});
threadManager.setWillUpdateWorkflowCallback(function() {
JX.Stratcom.invoke('notification-panel-close');
});
threadManager.setDidUpdateWorkflowCallback(function(r) {
var messages = _getColumnMessagesNode();
scrollbar.scrollTo(messages.scrollHeight);
JX.DOM.setContent(_getColumnTitleNode(), r.conpherence_title);
});
threadManager.start();
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
JX.Stratcom.listen(
'click',
'conpherence-durable-column-header-action',
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
function (e) {
e.kill();
var data = e.getNodeData('conpherence-durable-column-header-action');
var action = data.action;
var link = e.getNode('tag:a');
var params = null;
switch (action) {
case 'metadata':
threadManager.runUpdateWorkflowFromLink(
link,
{
action: action,
force_ajax: true,
stage: 'submit'
});
break;
case 'add_person':
threadManager.runUpdateWorkflowFromLink(
link,
{
action: action,
stage: 'submit'
});
break;
case 'go_conpherence':
JX.$U(link.href).go();
break;
case 'hide_column':
JX.Stratcom.invoke('notification-panel-close');
_toggleColumn();
break;
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
}
});
JX.Stratcom.listen(
'click',
'conpherence-durable-column-thread-icon',
function (e) {
e.kill();
var icons = JX.DOM.scry(
JX.$('conpherence-durable-column'),
'a',
'conpherence-durable-column-thread-icon');
var data = e.getNodeData('conpherence-durable-column-thread-icon');
var cdata = null;
for (var i = 0; i < icons.length; i++) {
cdata = JX.Stratcom.getData(icons[i]);
JX.DOM.alterClass(
icons[i],
'selected',
cdata.threadID == data.threadID);
}
JX.DOM.setContent(_getColumnTitleNode(), JX.$H(data.threadTitle));
threadManager.loadThreadByID(data.threadID);
});
JX.Stratcom.listen('resize', null, _updateColumnVisibility);
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
function _getColumnBodyNode() {
var column = JX.$('conpherence-durable-column');
return JX.DOM.find(
column,
'div',
'conpherence-durable-column-body');
}
function _getColumnMessagesNode() {
var column = JX.$('conpherence-durable-column');
return JX.DOM.find(
column,
'div',
'conpherence-durable-column-transactions');
}
function _getColumnTitleNode() {
var column = JX.$('conpherence-durable-column');
return JX.DOM.find(
column,
'div',
'conpherence-durable-column-header-text');
}
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
function _getColumnFormNode() {
var column = JX.$('conpherence-durable-column');
return JX.DOM.find(
column,
'form',
'conpherence-message-form');
}
function _getColumnTextareaNode() {
var column = JX.$('conpherence-durable-column');
return JX.DOM.find(
column,
'textarea',
'conpherence-durable-column-textarea');
}
function _focusColumnTextareaNode() {
var textarea = _getColumnTextareaNode();
setTimeout(function() { JX.DOM.focus(textarea); }, 1);
}
function _markLoading(loading) {
var column = _getColumnNode();
JX.DOM.alterClass(column, 'loading', loading);
}
function _sendMessage(e) {
e.kill();
var form = _getColumnFormNode();
threadManager.sendMessage(form, { minimal_display: true });
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
}
JX.Stratcom.listen(
'click',
'conpherence-send-message',
_sendMessage);
Conpherence - make the durable column kind of work and stuff Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
2015-03-05 19:33:39 +01:00
JX.Stratcom.listen(
['submit', 'didSyntheticSubmit'],
'conpherence-message-form',
_sendMessage);
// Send on enter if the shift key is not held.
JX.Stratcom.listen(
'keydown',
'conpherence-message-form',
function(e) {
if (e.getSpecialKey() != 'return') {
return;
}
var raw = e.getRawEvent();
if (raw.shiftKey) {
// If the shift key is pressed, let the browser write a newline into
// the textarea.
return;
}
// From here on, interpret this as a "send" action, not a literal
// newline.
e.kill();
_sendMessage(e);
});
JX.Stratcom.listen(
['keydown'],
'conpherence-durable-column-textarea',
function (e) {
threadManager.handleDraftKeydown(e);
});
// HTML5 placeholders are rendered as long as the input is empty, even if the
// input is currently focused. This is undesirable for the chat input,
// especially immediately after sending a message. Hide the placeholder while
// the input is focused.
JX.Stratcom.listen(
['focus', 'blur'],
'conpherence-durable-column-textarea',
function (e) {
var node = e.getTarget();
if (e.getType() == 'focus') {
if (node.placeholder) {
node.placeholderStorage = node.placeholder;
node.placeholder = '';
}
} else {
if (node.placeholderStorage) {
node.placeholder = node.placeholderStorage;
node.placeholderStorage = '';
}
}
});
JX.Stratcom.listen(
'quicksand-redraw',
null,
function (e) {
var new_data = e.getData().newResponse;
JX.Title.setTitle(new_data.title);
});
_updateColumnVisibility();
});