mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-29 08:50:58 +01:00
Conpherence - make the JS layer a bit better
Summary: this diff tries to polish the poo out of the JS layer while achieving fixes T3157 accolades. Test Plan: introduced sleeps in the various controllers and clicked about. verified good "loading" UI in the menu / message / widget section as appropros. Loaded up in device size and resize and desktop sized and resized and all was good. Reviewers: epriestley Reviewed By: epriestley CC: chad, aran, Korvin Maniphest Tasks: T3164, T3157 Differential Revision: https://secure.phabricator.com/D6069
This commit is contained in:
Bob Trahan
parent
0f070236bd
commit
d0b9b6c908
13 changed files with 602 additions and 259 deletions
|
|
@ -918,7 +918,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'conpherence-menu-css' =>
|
||||
array(
|
||||
'uri' => '/res/c955650e/rsrc/css/application/conpherence/menu.css',
|
||||
'uri' => '/res/60f38fbd/rsrc/css/application/conpherence/menu.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -927,7 +927,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'conpherence-message-pane-css' =>
|
||||
array(
|
||||
'uri' => '/res/383af93e/rsrc/css/application/conpherence/message-pane.css',
|
||||
'uri' => '/res/d9e90066/rsrc/css/application/conpherence/message-pane.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -945,7 +945,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'conpherence-widget-pane-css' =>
|
||||
array(
|
||||
'uri' => '/res/6f836b19/rsrc/css/application/conpherence/widget-pane.css',
|
||||
'uri' => '/res/b218398a/rsrc/css/application/conpherence/widget-pane.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -1294,25 +1294,24 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-conpherence-menu' =>
|
||||
array(
|
||||
'uri' => '/res/7181099a/rsrc/js/application/conpherence/behavior-menu.js',
|
||||
'uri' => '/res/478fc4f3/rsrc/js/application/conpherence/behavior-menu.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-dom',
|
||||
2 => 'javelin-util',
|
||||
3 => 'javelin-request',
|
||||
4 => 'javelin-stratcom',
|
||||
5 => 'javelin-workflow',
|
||||
6 => 'javelin-behavior-device',
|
||||
7 => 'javelin-history',
|
||||
8 => 'javelin-vector',
|
||||
3 => 'javelin-stratcom',
|
||||
4 => 'javelin-workflow',
|
||||
5 => 'javelin-behavior-device',
|
||||
6 => 'javelin-history',
|
||||
7 => 'javelin-vector',
|
||||
),
|
||||
'disk' => '/rsrc/js/application/conpherence/behavior-menu.js',
|
||||
),
|
||||
'javelin-behavior-conpherence-pontificate' =>
|
||||
array(
|
||||
'uri' => '/res/88ac3361/rsrc/js/application/conpherence/behavior-pontificate.js',
|
||||
'uri' => '/res/d6c5860f/rsrc/js/application/conpherence/behavior-pontificate.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
@ -1326,7 +1325,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-conpherence-widget-pane' =>
|
||||
array(
|
||||
'uri' => '/res/3d426c01/rsrc/js/application/conpherence/behavior-widget-pane.js',
|
||||
'uri' => '/res/232893cf/rsrc/js/application/conpherence/behavior-widget-pane.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
|
|||
|
|
@ -50,7 +50,16 @@ abstract class ConpherenceController extends PhabricatorController {
|
|||
->setHref($this->getApplicationURI('update/'.$conpherence->getID().'/'))
|
||||
->setWorkflow(true));
|
||||
|
||||
return $crumbs;
|
||||
return hsprintf(
|
||||
'%s',
|
||||
array(
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'header-loading-mask'
|
||||
),
|
||||
''),
|
||||
$crumbs));
|
||||
}
|
||||
|
||||
protected function renderConpherenceTransactions(
|
||||
|
|
|
|||
|
|
@ -154,7 +154,13 @@ final class ConpherenceListController
|
|||
->setThreadView($thread_view)
|
||||
->setRole('list');
|
||||
if ($conpherence) {
|
||||
$layout->setHeader($this->buildHeaderPaneContent($conpherence));
|
||||
$layout->setThread($conpherence);
|
||||
} else {
|
||||
$layout->setHeader(
|
||||
$this->buildHeaderPaneContent(
|
||||
id(new ConpherenceThread())
|
||||
->makeEphemeral()));
|
||||
}
|
||||
$response = $this->buildApplicationPage(
|
||||
$layout,
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ final class ConpherenceViewController extends
|
|||
$form = null;
|
||||
$content = array('messages' => $messages);
|
||||
} else {
|
||||
$header = $this->renderHeaderPaneContent();
|
||||
$header = $this->buildHeaderPaneContent($conpherence);
|
||||
$form = $this->renderFormContent($data['latest_transaction_id']);
|
||||
$content = array(
|
||||
'header' => $header,
|
||||
|
|
@ -103,19 +103,10 @@ final class ConpherenceViewController extends
|
|||
));
|
||||
}
|
||||
|
||||
private function renderHeaderPaneContent() {
|
||||
$conpherence = $this->getConpherence();
|
||||
$header = $this->buildHeaderPaneContent($conpherence);
|
||||
return hsprintf('%s', $header);
|
||||
}
|
||||
|
||||
|
||||
private function renderMessagePaneContent(
|
||||
array $transactions,
|
||||
$oldest_transaction_id) {
|
||||
|
||||
require_celerity_resource('conpherence-message-pane-css');
|
||||
|
||||
$scrollbutton = '';
|
||||
if ($oldest_transaction_id) {
|
||||
$scrollbutton = javelin_tag(
|
||||
|
|
|
|||
|
|
@ -61,7 +61,6 @@ final class ConpherenceWidgetController extends
|
|||
}
|
||||
|
||||
private function renderWidgetPaneContent() {
|
||||
require_celerity_resource('conpherence-widget-pane-css');
|
||||
require_celerity_resource('sprite-conpherence-css');
|
||||
$conpherence = $this->getConpherence();
|
||||
|
||||
|
|
@ -73,7 +72,7 @@ final class ConpherenceWidgetController extends
|
|||
),
|
||||
id(new PhabricatorActionHeaderView())
|
||||
->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
|
||||
->setHeaderTitle('')
|
||||
->setHeaderTitle(pht('Participants'))
|
||||
->setHeaderHref('#')
|
||||
->setDropdown(true)
|
||||
->addHeaderSigil('widgets-selector'));
|
||||
|
|
|
|||
|
|
@ -51,14 +51,23 @@ final class ConpherenceLayoutView extends AphrontView {
|
|||
|
||||
public function render() {
|
||||
require_celerity_resource('conpherence-menu-css');
|
||||
require_celerity_resource('conpherence-message-pane-css');
|
||||
require_celerity_resource('conpherence-widget-pane-css');
|
||||
|
||||
$layout_id = celerity_generate_unique_node_id();
|
||||
|
||||
$selected_id = null;
|
||||
$selected_thread_id = null;
|
||||
if ($this->thread) {
|
||||
$selected_id = $this->thread->getPHID() . '-nav-item';
|
||||
$selected_thread_id = $this->thread->getID();
|
||||
}
|
||||
Javelin::initBehavior('conpherence-menu',
|
||||
array(
|
||||
'base_uri' => $this->baseURI,
|
||||
'baseURI' => $this->baseURI,
|
||||
'layoutID' => $layout_id,
|
||||
'selectedID' => ($this->thread ? $this->thread->getID() : null),
|
||||
'selectedID' => $selected_id,
|
||||
'selectedThreadID' => $selected_thread_id,
|
||||
'role' => $this->role,
|
||||
'hasThreadList' => (bool)$this->threadView,
|
||||
'hasThread' => (bool)$this->messages,
|
||||
|
|
@ -92,6 +101,9 @@ final class ConpherenceLayoutView extends AphrontView {
|
|||
),
|
||||
)));
|
||||
|
||||
|
||||
$icon_48 = celerity_get_resource_uri('/rsrc/image/loading/loading_48.gif');
|
||||
$loading_style = 'background-image: url('.$icon_48.');';
|
||||
return javelin_tag(
|
||||
'div',
|
||||
array(
|
||||
|
|
@ -114,7 +126,14 @@ final class ConpherenceLayoutView extends AphrontView {
|
|||
'class' => 'conpherence-menu-pane phabricator-side-menu',
|
||||
'sigil' => 'conpherence-menu-pane',
|
||||
),
|
||||
nonempty($this->threadView, '')),
|
||||
nonempty(
|
||||
$this->threadView,
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'menu-loading-icon',
|
||||
'style' => $loading_style),
|
||||
''))),
|
||||
javelin_tag(
|
||||
'div',
|
||||
array(
|
||||
|
|
@ -159,12 +178,32 @@ final class ConpherenceLayoutView extends AphrontView {
|
|||
'id' => 'conpherence-widget-pane',
|
||||
'sigil' => 'conpherence-widget-pane',
|
||||
),
|
||||
''),
|
||||
array(
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'widgets-loading-mask'
|
||||
),
|
||||
''),
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'widgets-loading-icon',
|
||||
'style' => $loading_style,
|
||||
),
|
||||
''),
|
||||
javelin_tag(
|
||||
'div',
|
||||
array(
|
||||
'sigil' => 'conpherence-widgets-holder'
|
||||
),
|
||||
''))),
|
||||
javelin_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'conpherence-message-pane',
|
||||
'id' => 'conpherence-message-pane'
|
||||
'id' => 'conpherence-message-pane',
|
||||
'sigil' => 'conpherence-message-pane'
|
||||
),
|
||||
array(
|
||||
javelin_tag(
|
||||
|
|
@ -175,6 +214,18 @@ final class ConpherenceLayoutView extends AphrontView {
|
|||
'sigil' => 'conpherence-messages',
|
||||
),
|
||||
nonempty($this->messages, '')),
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'messages-loading-mask',
|
||||
),
|
||||
''),
|
||||
phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'messages-loading-icon',
|
||||
'style' => $loading_style,
|
||||
)),
|
||||
javelin_tag(
|
||||
'div',
|
||||
array(
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ final class ConpherenceThreadListView extends AphrontView {
|
|||
$unread_count = $data['unread_count'];
|
||||
$epoch = $data['epoch'];
|
||||
$image = $data['image'];
|
||||
$dom_id = $thread->getPHID().'-nav-item';
|
||||
|
||||
return id(new ConpherenceMenuItemView())
|
||||
->setUser($user)
|
||||
|
|
@ -98,7 +99,8 @@ final class ConpherenceThreadListView extends AphrontView {
|
|||
->setMetadata(
|
||||
array(
|
||||
'title' => $data['js_title'],
|
||||
'id' => $thread->getID(),
|
||||
'id' => $dom_id,
|
||||
'threadID' => $thread->getID(),
|
||||
));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,13 @@
|
|||
margin: 0px 0px 16px 0px;
|
||||
}
|
||||
|
||||
.conpherence-menu-pane {
|
||||
.conpherence-menu-pane .menu-loading-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.conpherence-menu-pane,
|
||||
.loading .menu-loading-icon {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -30,7 +36,8 @@
|
|||
bottom: 0;
|
||||
}
|
||||
.device-desktop .conpherence-layout .conpherence-menu-pane,
|
||||
.device-desktop .conpherence-layout .phabricator-nav-column-background {
|
||||
.device-desktop .conpherence-layout .phabricator-nav-column-background,
|
||||
.device-desktop .loading .menu-loading-icon {
|
||||
width: 280px;
|
||||
}
|
||||
.device .conpherence-menu-pane {
|
||||
|
|
@ -63,10 +70,16 @@
|
|||
}
|
||||
|
||||
.conpherence-content-pane {
|
||||
display: none;
|
||||
margin-left: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.device-desktop .conpherence-content-pane,
|
||||
.device .conpherence-role-thread .conpherence-content-pane {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.conpherence-menu .conpherence-menu-item-view {
|
||||
display: block;
|
||||
height: 55px;
|
||||
|
|
@ -85,6 +98,10 @@
|
|||
border-left: 2px solid #66CCFF;
|
||||
}
|
||||
|
||||
.conpherence-menu .loading {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.device-desktop .conpherence-menu .conpherence-menu-item-view:hover {
|
||||
background-image: url('/rsrc/image/texture/dark-menu-hover.png');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,23 +2,26 @@
|
|||
* @provides conpherence-message-pane-css
|
||||
*/
|
||||
|
||||
.conpherence-message-pane {
|
||||
.conpherence-message-pane,
|
||||
.loading .messages-loading-mask,
|
||||
.loading .messages-loading-icon {
|
||||
position: fixed;
|
||||
left: 280px;
|
||||
right: 241px;
|
||||
top: 76px;
|
||||
bottom: 0px;
|
||||
min-width: 300px;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.device .conpherence-message-pane {
|
||||
.device .conpherence-message-pane,
|
||||
.device .loading .messages-loading-mask,
|
||||
.device .loading .messages-loading-icon {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.conpherence-show-older-messages {
|
||||
display: block;
|
||||
background: #e0e3ec;
|
||||
|
|
@ -28,6 +31,10 @@
|
|||
color: #18559D;
|
||||
}
|
||||
|
||||
.conpherence-show-older-messages-loading {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.conpherence-message-pane .conpherence-messages {
|
||||
position: fixed;
|
||||
left: 280px;
|
||||
|
|
@ -47,6 +54,31 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.conpherence-message-pane .messages-loading-mask {
|
||||
opacity: .22;
|
||||
background: #222;
|
||||
display: none;
|
||||
}
|
||||
.conpherence-message-pane .messages-loading-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.loading .messages-loading-mask,
|
||||
.loading .messages-loading-icon {
|
||||
display: block;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.loading .header-loading-mask {
|
||||
height: 31px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
background: #222;
|
||||
opacity: .22;
|
||||
}
|
||||
|
||||
.conpherence-message-pane .phabricator-form-view {
|
||||
border-width: 0;
|
||||
background: none;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
* @provides conpherence-widget-pane-css
|
||||
*/
|
||||
|
||||
.conpherence-widget-pane {
|
||||
.conpherence-widget-pane,
|
||||
.loading .widgets-loading-mask,
|
||||
.loading .widgets-loading-icon {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 74px;
|
||||
bottom: 0px;
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
border-width: 0 0 0 1px;
|
||||
border-color: #CCC;
|
||||
border-style: solid;
|
||||
|
|
@ -15,11 +17,29 @@
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.device .conpherence-widget-pane {
|
||||
.device .conpherence-widget-pane,
|
||||
.device .loading .widgets-loading-mask,
|
||||
.device .loading .widgets-loading-icon {
|
||||
top: 44px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.conpherence-widget-pane .widgets-loading-mask {
|
||||
opacity: .22;
|
||||
background: #222;
|
||||
display: none;
|
||||
}
|
||||
.conpherence-widget-pane .widgets-loading-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.loading .widgets-loading-mask,
|
||||
.loading .widgets-loading-icon {
|
||||
display: block;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.conpherence-widget-pane .aphront-form-input {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
|
@ -80,6 +100,10 @@
|
|||
text-align: center;
|
||||
color: #555;
|
||||
}
|
||||
.device .conpherence-widget-pane #widgets-files .no-files {
|
||||
width: 60px;
|
||||
margin: 0px auto 0px auto;
|
||||
}
|
||||
.conpherence-widget-pane #widgets-files .file-entry {
|
||||
padding: 10px 0;
|
||||
margin: 0 5px 0 10px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* @requires javelin-behavior
|
||||
* javelin-dom
|
||||
* javelin-util
|
||||
* javelin-request
|
||||
* javelin-stratcom
|
||||
* javelin-workflow
|
||||
* javelin-behavior-device
|
||||
|
|
@ -13,27 +12,66 @@
|
|||
|
||||
JX.behavior('conpherence-menu', function(config) {
|
||||
|
||||
var thread = {
|
||||
/**
|
||||
* State for displayed thread.
|
||||
*/
|
||||
var _thread = {
|
||||
selected: null,
|
||||
node: null,
|
||||
visible: null
|
||||
visible: null,
|
||||
node: null
|
||||
};
|
||||
|
||||
function selectthreadid(id, updatePageData) {
|
||||
var threads = JX.DOM.scry(document.body, 'a', 'conpherence-menu-click');
|
||||
for (var ii = 0; ii < threads.length; ii++) {
|
||||
var data = JX.Stratcom.getData(threads[ii]);
|
||||
if (data.id == id) {
|
||||
selectthread(threads[ii], updatePageData);
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* Current role of this behavior. The two possible roles are to show a 'list'
|
||||
* of threads or a specific 'thread'. On devices, this behavior stays in the
|
||||
* 'list' role indefinitely, treating clicks normally and the next page
|
||||
* loads the behavior with role = 'thread'. On desktop, this behavior
|
||||
* auto-loads a thread as part of the 'list' role. As the thread loads the
|
||||
* role is changed to 'thread'.
|
||||
*/
|
||||
var _currentRole = null;
|
||||
|
||||
/**
|
||||
* When _oldDevice is null the code is executing for the first time.
|
||||
*/
|
||||
var _oldDevice = null;
|
||||
|
||||
/**
|
||||
* Initializes this behavior based on all the configuraton jonx and the
|
||||
* result of JX.Device.getDevice();
|
||||
*/
|
||||
function init() {
|
||||
_currentRole = config.role;
|
||||
|
||||
if (_currentRole == 'thread') {
|
||||
markThreadsLoading(true);
|
||||
} else {
|
||||
markThreadLoading(true);
|
||||
}
|
||||
markWidgetLoading(true);
|
||||
onDeviceChange();
|
||||
}
|
||||
init();
|
||||
|
||||
/**
|
||||
* Selecting threads
|
||||
*/
|
||||
JX.Stratcom.listen(
|
||||
'conpherence-selectthread',
|
||||
null,
|
||||
function (e) {
|
||||
selectThreadByID(e.getData().id);
|
||||
}
|
||||
);
|
||||
|
||||
function selectThreadByID(id, update_page_data) {
|
||||
var thread = JX.$(id);
|
||||
selectThread(thread, update_page_data);
|
||||
}
|
||||
|
||||
function selectthread(node, updatePageData) {
|
||||
|
||||
if (thread.node) {
|
||||
JX.DOM.alterClass(thread.node, 'conpherence-selected', false);
|
||||
function selectThread(node, update_page_data) {
|
||||
if (_thread.node) {
|
||||
JX.DOM.alterClass(_thread.node, 'conpherence-selected', false);
|
||||
// keep the unread-count hidden still. big TODO once we ajax in updates
|
||||
// to threads to make this work right and move threads between read /
|
||||
// unread
|
||||
|
|
@ -42,37 +80,28 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
JX.DOM.alterClass(node, 'conpherence-selected', true);
|
||||
JX.DOM.alterClass(node, 'hide-unread-count', true);
|
||||
|
||||
thread.node = node;
|
||||
_thread.node = node;
|
||||
|
||||
var data = JX.Stratcom.getData(node);
|
||||
thread.selected = data.id;
|
||||
_thread.selected = data.threadID;
|
||||
|
||||
if (updatePageData) {
|
||||
updatepagedata(data);
|
||||
if (update_page_data) {
|
||||
updatePageData(data);
|
||||
}
|
||||
|
||||
redrawthread();
|
||||
redrawThread();
|
||||
}
|
||||
|
||||
JX.Stratcom.listen(
|
||||
'conpherence-selectthread',
|
||||
null,
|
||||
function (e) {
|
||||
var node = JX.$(e.getData().id);
|
||||
selectthread(node);
|
||||
}
|
||||
);
|
||||
|
||||
function updatepagedata(data) {
|
||||
var uri_suffix = thread.selected + '/';
|
||||
function updatePageData(data) {
|
||||
var uri_suffix = _thread.selected + '/';
|
||||
if (data.use_base_uri) {
|
||||
uri_suffix = '';
|
||||
}
|
||||
JX.History.replace(config.base_uri + uri_suffix);
|
||||
JX.History.replace(config.baseURI + uri_suffix);
|
||||
if (data.title) {
|
||||
document.title = data.title;
|
||||
} else if (thread.node) {
|
||||
var threadData = JX.Stratcom.getData(thread.node);
|
||||
} else if (_thread.node) {
|
||||
var threadData = JX.Stratcom.getData(_thread.node);
|
||||
document.title = threadData.title;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,60 +110,110 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
'conpherence-update-page-data',
|
||||
null,
|
||||
function (e) {
|
||||
updatepagedata(e.getData());
|
||||
updatePageData(e.getData());
|
||||
}
|
||||
);
|
||||
|
||||
function redrawthread() {
|
||||
if (!thread.node) {
|
||||
function redrawThread() {
|
||||
if (!_thread.node) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (thread.visible == thread.selected) {
|
||||
if (_thread.visible == _thread.selected) {
|
||||
return;
|
||||
}
|
||||
|
||||
var data = JX.Stratcom.getData(thread.node);
|
||||
var data = JX.Stratcom.getData(_thread.node);
|
||||
|
||||
if (thread.visible !== null || !config.hasThread) {
|
||||
var uri = config.base_uri + data.id + '/';
|
||||
if (_thread.visible !== null || !config.hasThread) {
|
||||
markThreadLoading(true);
|
||||
var uri = config.baseURI + data.threadID + '/';
|
||||
new JX.Workflow(uri, {})
|
||||
.setHandler(onloadthreadresponse)
|
||||
.setHandler(JX.bind(null, onLoadThreadResponse, data.threadID))
|
||||
.start();
|
||||
} else if (config.hasThread) {
|
||||
_scrollMessageWindow();
|
||||
} else {
|
||||
didredrawthread();
|
||||
didRedrawThread();
|
||||
}
|
||||
|
||||
if (thread.visible !== null || !config.hasWidgets) {
|
||||
var widget_uri = config.base_uri + 'widget/' + data.id + '/';
|
||||
if (_thread.visible !== null || !config.hasWidgets) {
|
||||
markWidgetLoading(true);
|
||||
var widget_uri = config.baseURI + 'widget/' + data.threadID + '/';
|
||||
new JX.Workflow(widget_uri, {})
|
||||
.setHandler(onwidgetresponse)
|
||||
.setHandler(JX.bind(null, onWidgetResponse, data.threadID))
|
||||
.start();
|
||||
} else {
|
||||
updatetoggledwidget();
|
||||
}
|
||||
|
||||
thread.visible = thread.selected;
|
||||
}
|
||||
|
||||
function onwidgetresponse(response) {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var widgetsRoot = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
|
||||
JX.DOM.setContent(widgetsRoot, JX.$H(response.widgets));
|
||||
updatetoggledwidget();
|
||||
}
|
||||
|
||||
function updatetoggledwidget(no_toggle) {
|
||||
JX.Stratcom.invoke(
|
||||
'conpherence-toggle-widget',
|
||||
JX.Stratcom.invoke(
|
||||
'conpherence-update-widgets',
|
||||
null,
|
||||
{
|
||||
widget : getdefaultwidget(),
|
||||
no_toggle : no_toggle
|
||||
widget : getDefaultWidget(),
|
||||
buildSelectors : false,
|
||||
toggleWidget : true,
|
||||
threadID : _thread.selected
|
||||
});
|
||||
}
|
||||
|
||||
_thread.visible = _thread.selected;
|
||||
}
|
||||
|
||||
function getdefaultwidget() {
|
||||
function markThreadsLoading(loading) {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var menu = JX.DOM.find(root, 'div', 'conpherence-menu-pane');
|
||||
JX.DOM.alterClass(menu, 'loading', loading);
|
||||
}
|
||||
|
||||
function markThreadLoading(loading) {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var header_root = JX.DOM.find(root, 'div', 'conpherence-header-pane');
|
||||
var messages_root = JX.DOM.find(root, 'div', 'conpherence-message-pane');
|
||||
var form_root = JX.DOM.find(root, 'div', 'conpherence-form');
|
||||
|
||||
JX.DOM.alterClass(header_root, 'loading', loading);
|
||||
JX.DOM.alterClass(messages_root, 'loading', loading);
|
||||
JX.DOM.alterClass(form_root, 'loading', loading);
|
||||
|
||||
try {
|
||||
var textarea = JX.DOM.find(form, 'textarea');
|
||||
textarea.disabled = loading;
|
||||
var button = JX.DOM.find(form, 'button');
|
||||
button.disabled = loading;
|
||||
} catch (ex) {
|
||||
// haven't loaded it yet!
|
||||
}
|
||||
}
|
||||
|
||||
function markWidgetLoading(loading) {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var widgets_root = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
|
||||
|
||||
JX.DOM.alterClass(widgets_root, 'loading', loading);
|
||||
}
|
||||
|
||||
function onWidgetResponse(thread_id, response) {
|
||||
// we got impatient and this is no longer the right answer :/
|
||||
if (_thread.selected != thread_id) {
|
||||
return;
|
||||
}
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var widgets_root = JX.DOM.find(root, 'div', 'conpherence-widgets-holder');
|
||||
JX.DOM.setContent(widgets_root, JX.$H(response.widgets));
|
||||
|
||||
JX.Stratcom.invoke(
|
||||
'conpherence-update-widgets',
|
||||
null,
|
||||
{
|
||||
widget : getDefaultWidget(),
|
||||
buildSelectors : true,
|
||||
toggleWidget : true,
|
||||
threadID : _thread.selected
|
||||
});
|
||||
|
||||
markWidgetLoading(false);
|
||||
}
|
||||
|
||||
function getDefaultWidget() {
|
||||
var device = JX.Device.getDevice();
|
||||
var widget = 'conpherence-message-pane';
|
||||
if (device == 'desktop') {
|
||||
|
|
@ -143,48 +222,55 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
return widget;
|
||||
}
|
||||
|
||||
function onloadthreadresponse(response) {
|
||||
function onLoadThreadResponse(thread_id, response) {
|
||||
// we got impatient and this is no longer the right answer :/
|
||||
if (_thread.selected != thread_id) {
|
||||
return;
|
||||
}
|
||||
var header = JX.$H(response.header);
|
||||
var messages = JX.$H(response.messages);
|
||||
var form = JX.$H(response.form);
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var headerRoot = JX.DOM.find(root, 'div', 'conpherence-header-pane');
|
||||
var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages');
|
||||
var formRoot = JX.DOM.find(root, 'div', 'conpherence-form');
|
||||
JX.DOM.setContent(headerRoot, header);
|
||||
JX.DOM.setContent(messagesRoot, messages);
|
||||
JX.DOM.setContent(formRoot, form);
|
||||
var header_root = JX.DOM.find(root, 'div', 'conpherence-header-pane');
|
||||
var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages');
|
||||
var form_root = JX.DOM.find(root, 'div', 'conpherence-form');
|
||||
JX.DOM.setContent(header_root, header);
|
||||
JX.DOM.setContent(messages_root, messages);
|
||||
JX.DOM.setContent(form_root, form);
|
||||
|
||||
didredrawthread();
|
||||
markThreadLoading(false);
|
||||
|
||||
didRedrawThread(true);
|
||||
}
|
||||
|
||||
function didredrawthread() {
|
||||
/**
|
||||
* This function is a wee bit tricky. Internally, we want to scroll the
|
||||
* message window and let other stuff - notably widgets - redraw / build if
|
||||
* necessary. Externally, we want a hook to scroll the message window
|
||||
* - notably when the widget selector is used to invoke the message pane.
|
||||
* The following three functions get 'er done.
|
||||
*/
|
||||
function didRedrawThread(build_device_widget_selector) {
|
||||
_scrollMessageWindow();
|
||||
JX.Stratcom.invoke(
|
||||
'conpherence-did-redraw-thread',
|
||||
null,
|
||||
{
|
||||
widget : getDefaultWidget(),
|
||||
threadID : _thread.selected,
|
||||
buildDeviceWidgetSelector : build_device_widget_selector
|
||||
});
|
||||
}
|
||||
function _scrollMessageWindow() {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages');
|
||||
messagesRoot.scrollTop = messagesRoot.scrollHeight;
|
||||
|
||||
try {
|
||||
var device = JX.Device.getDevice();
|
||||
var deviceWidgetSelector = JX.DOM.find(
|
||||
root,
|
||||
'a',
|
||||
'device-widgets-selector');
|
||||
if (device != 'desktop') {
|
||||
JX.DOM.show(deviceWidgetSelector);
|
||||
updatetoggledwidget(true);
|
||||
} else {
|
||||
JX.DOM.hide(deviceWidgetSelector);
|
||||
}
|
||||
} catch (ex) {
|
||||
// not here yet
|
||||
}
|
||||
var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages');
|
||||
messages_root.scrollTop = messages_root.scrollHeight;
|
||||
}
|
||||
|
||||
JX.Stratcom.listen(
|
||||
'conpherence-redraw-thread',
|
||||
null,
|
||||
function (e) {
|
||||
didredrawthread();
|
||||
_scrollMessageWindow();
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -202,7 +288,7 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
}
|
||||
|
||||
e.kill();
|
||||
selectthread(e.getNode('conpherence-menu-click'), true);
|
||||
selectThread(e.getNode('conpherence-menu-click'), true);
|
||||
});
|
||||
|
||||
JX.Stratcom.listen('click', 'conpherence-edit-metadata', function (e) {
|
||||
|
|
@ -241,126 +327,145 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
.start();
|
||||
});
|
||||
|
||||
var _loadingTransactionID = null;
|
||||
JX.Stratcom.listen('click', 'show-older-messages', function(e) {
|
||||
e.kill();
|
||||
var data = e.getNodeData('show-older-messages');
|
||||
var oldest_transaction_id = data.oldest_transaction_id;
|
||||
var conf_id = thread.selected;
|
||||
JX.DOM.remove(e.getNode('show-older-messages'));
|
||||
if (data.oldest_transaction_id == _loadingTransactionID) {
|
||||
return;
|
||||
}
|
||||
_loadingTransactionID = data.oldest_transaction_id;
|
||||
var node = e.getNode('show-older-messages');
|
||||
JX.DOM.setContent(node, 'Loading...');
|
||||
JX.DOM.alterClass(node, 'conpherence-show-older-messages-loading', true);
|
||||
|
||||
var conf_id = _thread.selected;
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages');
|
||||
new JX.Request(config.base_uri + conf_id + '/', function(r) {
|
||||
new JX.Workflow(config.baseURI + conf_id + '/', data)
|
||||
.setHandler(function(r) {
|
||||
JX.DOM.remove(node);
|
||||
var messages = JX.$H(r.messages);
|
||||
JX.DOM.prependContent(
|
||||
messages_root,
|
||||
JX.$H(messages));
|
||||
}).setData({ oldest_transaction_id : oldest_transaction_id }).send();
|
||||
}).start();
|
||||
});
|
||||
|
||||
// On mobile, we just show a thread list, so we don't want to automatically
|
||||
// select or load any threads. On Desktop, we automatically select the first
|
||||
// thread.
|
||||
var old_device = null;
|
||||
function ondevicechange() {
|
||||
/**
|
||||
* On devices, we just show a thread list, so we don't want to automatically
|
||||
* select or load any threads. On desktop, we automatically select the first
|
||||
* thread, changing the _currentRole from list to thread.
|
||||
*/
|
||||
function onDeviceChange() {
|
||||
var new_device = JX.Device.getDevice();
|
||||
if (new_device === old_device) {
|
||||
if (new_device === _oldDevice) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (old_device === null) {
|
||||
old_device = new_device;
|
||||
if (config.role == 'list') {
|
||||
if (_oldDevice === null) {
|
||||
_oldDevice = new_device;
|
||||
if (_currentRole == 'list') {
|
||||
if (new_device != 'desktop') {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
loadthreads();
|
||||
loadThreads();
|
||||
return;
|
||||
}
|
||||
}
|
||||
var update_toggled_widget =
|
||||
new_device == 'desktop' || old_device == 'desktop';
|
||||
old_device = new_device;
|
||||
new_device == 'desktop' || _oldDevice == 'desktop';
|
||||
_oldDevice = new_device;
|
||||
|
||||
if (thread.visible !== null && update_toggled_widget) {
|
||||
updatetoggledwidget();
|
||||
if (_thread.visible !== null && update_toggled_widget) {
|
||||
JX.Stratcom.invoke(
|
||||
'conpherence-did-redraw-thread',
|
||||
null,
|
||||
{
|
||||
widget : getDefaultWidget(),
|
||||
threadID : _thread.selected
|
||||
});
|
||||
}
|
||||
|
||||
if (config.role == 'list') {
|
||||
didloadthreads();
|
||||
config.role = 'thread';
|
||||
if (_currentRole == 'list' && new_device == 'desktop') {
|
||||
// this selects a thread and loads it
|
||||
didLoadThreads();
|
||||
_currentRole = 'thread';
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
JX.DOM.alterClass(root, 'conpherence-role-list', false);
|
||||
JX.DOM.alterClass(root, 'conpherence-role-thread', true);
|
||||
}
|
||||
}
|
||||
JX.Stratcom.listen('phabricator-device-change', null, onDeviceChange);
|
||||
|
||||
JX.Stratcom.listen('phabricator-device-change', null, ondevicechange);
|
||||
ondevicechange();
|
||||
|
||||
function loadthreads() {
|
||||
var uri = config.base_uri + 'thread/' + config.selectedID + '/';
|
||||
function loadThreads() {
|
||||
markThreadsLoading(true);
|
||||
var uri = config.baseURI + 'thread/' + config.selectedThreadID + '/';
|
||||
new JX.Workflow(uri)
|
||||
.setHandler(onloadthreadsresponse)
|
||||
.setHandler(onLoadThreadsResponse)
|
||||
.start();
|
||||
}
|
||||
|
||||
function onloadthreadsresponse(r) {
|
||||
function onLoadThreadsResponse(r) {
|
||||
var layout = JX.$(config.layoutID);
|
||||
var menu = JX.DOM.find(layout, 'div', 'conpherence-menu-pane');
|
||||
JX.DOM.setContent(menu, JX.$H(r));
|
||||
|
||||
config.selectedID && selectthreadid(config.selectedID);
|
||||
config.selectedID && selectThreadByID(config.selectedID);
|
||||
|
||||
thread.node.scrollIntoView();
|
||||
_thread.node.scrollIntoView();
|
||||
|
||||
markThreadsLoading(false);
|
||||
}
|
||||
|
||||
function didloadthreads() {
|
||||
function didLoadThreads() {
|
||||
// If there's no thread selected yet, select the current thread or the
|
||||
// first thread.
|
||||
if (!thread.selected) {
|
||||
if (!_thread.selected) {
|
||||
if (config.selectedID) {
|
||||
selectthreadid(config.selectedID, true);
|
||||
selectThreadByID(config.selectedID, true);
|
||||
} else {
|
||||
var layout = JX.$(config.layoutID);
|
||||
var threads = JX.DOM.scry(layout, 'a', 'conpherence-menu-click');
|
||||
if (threads.length) {
|
||||
selectthread(threads[0]);
|
||||
selectThread(threads[0]);
|
||||
} else {
|
||||
var nothreads = JX.DOM.find(layout, 'div', 'conpherence-no-threads');
|
||||
nothreads.style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
redrawthread();
|
||||
}
|
||||
|
||||
var handlethreadscrollers = function (e) {
|
||||
var handleThreadScrollers = function (e) {
|
||||
e.kill();
|
||||
|
||||
var data = e.getNodeData('conpherence-menu-scroller');
|
||||
var scroller = e.getNode('conpherence-menu-scroller');
|
||||
JX.DOM.alterClass(scroller, 'loading', true);
|
||||
JX.DOM.setContent(scroller.firstChild, 'Loading...');
|
||||
new JX.Workflow(scroller.href, data)
|
||||
.setHandler(
|
||||
JX.bind(null, threadscrollerresponse, scroller, data.direction))
|
||||
JX.bind(null, threadScrollerResponse, scroller, data.direction))
|
||||
.start();
|
||||
};
|
||||
|
||||
var threadscrollerresponse = function (scroller, direction, r) {
|
||||
var threadScrollerResponse = function (scroller, direction, r) {
|
||||
var html = JX.$H(r.html);
|
||||
|
||||
var threadPhids = r.phids;
|
||||
var reselectId = null;
|
||||
var thread_phids = r.phids;
|
||||
var reselect_id = null;
|
||||
// remove any threads that are in the list that we just got back
|
||||
// in the result set; things have changed and they'll be in the
|
||||
// right place soon
|
||||
for (var ii = 0; ii < threadPhids.length; ii++) {
|
||||
for (var ii = 0; ii < thread_phids.length; ii++) {
|
||||
try {
|
||||
var nodeId = threadPhids[ii] + '-nav-item';
|
||||
var node = JX.$(nodeId);
|
||||
var nodeData = JX.Stratcom.getData(node);
|
||||
if (nodeData.id == thread.selected) {
|
||||
reselectId = nodeId;
|
||||
var node_id = thread_phids[ii] + '-nav-item';
|
||||
var node = JX.$(node_id);
|
||||
var node_data = JX.Stratcom.getData(node);
|
||||
if (node_data.id == _thread.selected) {
|
||||
reselect_id = node_id;
|
||||
}
|
||||
JX.DOM.remove(node);
|
||||
} catch (ex) {
|
||||
|
|
@ -369,8 +474,8 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
}
|
||||
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var menuRoot = JX.DOM.find(root, 'div', 'conpherence-menu-pane');
|
||||
var scrollY = 0;
|
||||
var menu_root = JX.DOM.find(root, 'div', 'conpherence-menu-pane');
|
||||
var scroll_y = 0;
|
||||
// we have to do some hyjinx in the up case to make the menu scroll to
|
||||
// where it should
|
||||
if (direction == 'up') {
|
||||
|
|
@ -382,16 +487,16 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
document.body.appendChild(test_size);
|
||||
var html_size = JX.Vector.getDim(test_size);
|
||||
JX.DOM.remove(test_size);
|
||||
scrollY = html_size.y;
|
||||
scroll_y = html_size.y;
|
||||
}
|
||||
JX.DOM.replace(scroller, html);
|
||||
menuRoot.scrollTop += scrollY;
|
||||
menu_root.scrollTop += scroll_y;
|
||||
|
||||
if (reselectId) {
|
||||
if (reselect_id) {
|
||||
JX.Stratcom.invoke(
|
||||
'conpherence-selectthread',
|
||||
null,
|
||||
{ id : reselectId }
|
||||
{ id : reselect_id }
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -399,7 +504,7 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
JX.Stratcom.listen(
|
||||
['click'],
|
||||
'conpherence-menu-scroller',
|
||||
handlethreadscrollers
|
||||
handleThreadScrollers
|
||||
);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,13 +14,19 @@ JX.behavior('conpherence-pontificate', function(config) {
|
|||
var form = e.getNode('tag:form');
|
||||
|
||||
var root = e.getNode('conpherence-layout');
|
||||
var messages = JX.DOM.find(root, 'div', 'conpherence-messages');
|
||||
var messages_root = JX.DOM.find(root, 'div', 'conpherence-message-pane');
|
||||
var header_root = JX.DOM.find(root, 'div', 'conpherence-header-pane');
|
||||
var form_root = JX.DOM.find(root, 'div', 'conpherence-form');
|
||||
var messages = JX.DOM.find(messages_root, 'div', 'conpherence-messages');
|
||||
var fileWidget = null;
|
||||
try {
|
||||
fileWidget = JX.DOM.find(root, 'div', 'widgets-files');
|
||||
} catch (ex) {
|
||||
// Ignore; maybe no files widget
|
||||
}
|
||||
JX.DOM.alterClass(header_root, 'loading', true);
|
||||
JX.DOM.alterClass(messages_root, 'loading', true);
|
||||
JX.DOM.alterClass(form_root, 'loading', true);
|
||||
|
||||
JX.Workflow.newFromForm(form)
|
||||
.setHandler(JX.bind(this, function(r) {
|
||||
|
|
@ -49,7 +55,11 @@ JX.behavior('conpherence-pontificate', function(config) {
|
|||
'conpherence-selectthread',
|
||||
null,
|
||||
{ id : r.conpherence_phid + '-nav-item' }
|
||||
);
|
||||
);
|
||||
|
||||
JX.DOM.alterClass(header_root, 'loading', false);
|
||||
JX.DOM.alterClass(messages_root, 'loading', false);
|
||||
JX.DOM.alterClass(form_root, 'loading', false);
|
||||
}))
|
||||
.start();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,80 +13,173 @@
|
|||
|
||||
JX.behavior('conpherence-widget-pane', function(config) {
|
||||
|
||||
var build_widget_selector = function (data) {
|
||||
var widgets = config.widgetRegistry;
|
||||
/**
|
||||
* There can be race conditions around loading the messages or the widgets
|
||||
* first. Keep track of what widgets we've loaded with this variable.
|
||||
*/
|
||||
var _loadedWidgetsID = null;
|
||||
|
||||
/**
|
||||
* At any given time there can be only one selected widget. Keep track of
|
||||
* which one it is by the user-facing name for ease of use with
|
||||
* PhabricatorDropdownMenuItems.
|
||||
*/
|
||||
var _selectedWidgetName = null;
|
||||
|
||||
/**
|
||||
* This is potentially built each time the user switches conpherence threads
|
||||
* or when the result JX.Device.getDevice() changes from desktop to some
|
||||
* other value.
|
||||
*/
|
||||
var buildDeviceWidgetSelector = function (data) {
|
||||
var device_header = _getDeviceWidgetHeader();
|
||||
if (!device_header) {
|
||||
return;
|
||||
}
|
||||
JX.DOM.show(device_header);
|
||||
var device_menu = new JX.PhabricatorDropdownMenu(device_header);
|
||||
data.deviceMenu = true;
|
||||
_buildWidgetSelector(device_menu, data);
|
||||
};
|
||||
|
||||
/**
|
||||
* This is potentially built each time the user switches conpherence threads
|
||||
* or when the result JX.Device.getDevice() changes from mobile or tablet to
|
||||
* desktop.
|
||||
*/
|
||||
var buildDesktopWidgetSelector = function (data) {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
|
||||
var widgetHeader = JX.DOM.find(widgetPane, 'a', 'widgets-selector');
|
||||
var mobileWidgetHeader = null;
|
||||
var widget_pane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
|
||||
var widget_header = JX.DOM.find(widget_pane, 'a', 'widgets-selector');
|
||||
var menu = new JX.PhabricatorDropdownMenu(widget_header);
|
||||
menu.toggleAlignDropdownRight(false);
|
||||
data.deviceMenu = false;
|
||||
_buildWidgetSelector(menu, data);
|
||||
};
|
||||
|
||||
/**
|
||||
* Workhorse that actually builds the widget selector. Note some fancy bits
|
||||
* where we listen for the "open" event and enable / disable widgets as
|
||||
* appropos.
|
||||
*/
|
||||
var _buildWidgetSelector = function (menu, data) {
|
||||
_loadedWidgetsID = data.threadID;
|
||||
var widgets = config.widgetRegistry;
|
||||
for (var widget in widgets) {
|
||||
var widget_data = widgets[widget];
|
||||
if (widget_data.deviceOnly && data.deviceMenu === false) {
|
||||
continue;
|
||||
}
|
||||
menu.addItem(new JX.PhabricatorMenuItem(
|
||||
widget_data.name,
|
||||
JX.bind(null, toggleWidget, { widget : widget }),
|
||||
'#'
|
||||
).setDisabled(widget == data.widget));
|
||||
}
|
||||
|
||||
menu.listen(
|
||||
'open',
|
||||
JX.bind(menu, function () {
|
||||
for (var ii = 0; ii < this._items.length; ii++) {
|
||||
var item = this._items[ii];
|
||||
var name = item.getName();
|
||||
if (name == _selectedWidgetName) {
|
||||
item.setDisabled(true);
|
||||
} else {
|
||||
item.setDisabled(false);
|
||||
}
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
/**
|
||||
* Since this is not always on the page, avoid having a repeat
|
||||
* try / catch block and consolidate into this helper function.
|
||||
*/
|
||||
var _getDeviceWidgetHeader = function () {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var device_header = null;
|
||||
try {
|
||||
mobileWidgetHeader = JX.DOM.find(
|
||||
device_header = JX.DOM.find(
|
||||
root,
|
||||
'a',
|
||||
'device-widgets-selector');
|
||||
} catch (ex) {
|
||||
// is okay - no mobileWidgetHeader yet...
|
||||
// is okay - no deviceWidgetHeader yet... but bail time
|
||||
}
|
||||
var widgetData = widgets[data.widget];
|
||||
JX.DOM.setContent(
|
||||
widgetHeader,
|
||||
widgetData.name);
|
||||
JX.DOM.appendContent(
|
||||
widgetHeader,
|
||||
JX.$N('span', { className : 'caret' }));
|
||||
if (mobileWidgetHeader) {
|
||||
// this is fragile but adding a sigil to this element is awkward
|
||||
var mobileWidgetHeaderSpans = JX.DOM.scry(mobileWidgetHeader, 'span');
|
||||
var mobileWidgetHeaderSpan = mobileWidgetHeaderSpans[1];
|
||||
JX.DOM.setContent(
|
||||
mobileWidgetHeaderSpan,
|
||||
widgetData.name);
|
||||
}
|
||||
|
||||
var menu = new JX.PhabricatorDropdownMenu(widgetHeader);
|
||||
menu.toggleAlignDropdownRight(false);
|
||||
var deviceMenu = null;
|
||||
if (mobileWidgetHeader) {
|
||||
deviceMenu = new JX.PhabricatorDropdownMenu(mobileWidgetHeader);
|
||||
}
|
||||
|
||||
for (var widget in widgets) {
|
||||
widgetData = widgets[widget];
|
||||
if (mobileWidgetHeader) {
|
||||
deviceMenu.addItem(new JX.PhabricatorMenuItem(
|
||||
widgetData.name,
|
||||
JX.bind(null, build_widget_selector, { widget : widget }),
|
||||
'#'
|
||||
).setDisabled(widget == data.widget));
|
||||
}
|
||||
if (widgetData.deviceOnly) {
|
||||
continue;
|
||||
}
|
||||
menu.addItem(new JX.PhabricatorMenuItem(
|
||||
widgetData.name,
|
||||
JX.bind(null, build_widget_selector, { widget : widget }),
|
||||
'#'
|
||||
).setDisabled(widget == data.widget));
|
||||
}
|
||||
if (data.no_toggle) {
|
||||
return;
|
||||
}
|
||||
toggle_widget(data);
|
||||
return device_header;
|
||||
};
|
||||
|
||||
var toggle_widget = function (data) {
|
||||
/**
|
||||
* Responder to the 'conpherence-did-redraw-thread' event, this bad boy
|
||||
* hides or shows the device widget selector as appropros.
|
||||
*/
|
||||
var _didRedrawThread = function (data) {
|
||||
if (_loadedWidgetsID === null || _loadedWidgetsID != data.threadID) {
|
||||
return;
|
||||
}
|
||||
var device = JX.Device.getDevice();
|
||||
var device_selector = _getDeviceWidgetHeader();
|
||||
if (device == 'desktop') {
|
||||
JX.DOM.hide(device_selector);
|
||||
} else {
|
||||
JX.DOM.show(device_selector);
|
||||
}
|
||||
if (data.buildDeviceWidgetSelector) {
|
||||
buildDeviceWidgetSelector(data);
|
||||
}
|
||||
toggleWidget(data);
|
||||
};
|
||||
JX.Stratcom.listen(
|
||||
'conpherence-did-redraw-thread',
|
||||
null,
|
||||
function (e) {
|
||||
_didRedrawThread(e.getData());
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Toggling a widget involves showing / hiding the appropriate widget
|
||||
* bodies as well as updating the selectors to have the label on the
|
||||
* newly selected widget.
|
||||
*/
|
||||
var toggleWidget = function (data) {
|
||||
var widgets = config.widgetRegistry;
|
||||
var widgetData = widgets[data.widget];
|
||||
var widget_data = widgets[data.widget];
|
||||
var device = JX.Device.getDevice();
|
||||
var is_desktop = device == 'desktop';
|
||||
|
||||
if (widgetData.deviceOnly && is_desktop) {
|
||||
if (widget_data.deviceOnly && is_desktop) {
|
||||
return;
|
||||
}
|
||||
_selectedWidgetName = widget_data.name;
|
||||
|
||||
var device_header = _getDeviceWidgetHeader();
|
||||
if (device_header) {
|
||||
// this is fragile but adding a sigil to this element is awkward
|
||||
var device_header_spans = JX.DOM.scry(device_header, 'span');
|
||||
var device_header_span = device_header_spans[1];
|
||||
JX.DOM.setContent(
|
||||
device_header_span,
|
||||
widget_data.name);
|
||||
}
|
||||
|
||||
// don't update the non-device selector with device only widget stuff
|
||||
if (!widget_data.deviceOnly) {
|
||||
var root = JX.DOM.find(document, 'div', 'conpherence-layout');
|
||||
var widget_pane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
|
||||
var widget_header = JX.DOM.find(widget_pane, 'a', 'widgets-selector');
|
||||
JX.DOM.setContent(
|
||||
widget_header,
|
||||
widget_data.name);
|
||||
JX.DOM.appendContent(
|
||||
widget_header,
|
||||
JX.$N('span', { className : 'caret' }));
|
||||
}
|
||||
|
||||
for (var widget in config.widgetRegistry) {
|
||||
widgetData = widgets[widget];
|
||||
if (widgetData.deviceOnly && is_desktop) {
|
||||
widget_data = widgets[widget];
|
||||
if (widget_data.deviceOnly && is_desktop) {
|
||||
// some one off code for conpherence messages which are device-only
|
||||
// as a widget, but shown always on the desktop
|
||||
if (widget == 'conpherence-message-pane') {
|
||||
|
|
@ -109,13 +202,18 @@ JX.behavior('conpherence-widget-pane', function(config) {
|
|||
};
|
||||
|
||||
JX.Stratcom.listen(
|
||||
'conpherence-toggle-widget',
|
||||
'conpherence-update-widgets',
|
||||
null,
|
||||
function (e) {
|
||||
build_widget_selector(e.getData());
|
||||
}
|
||||
);
|
||||
|
||||
var data = e.getData();
|
||||
if (data.buildSelectors) {
|
||||
buildDesktopWidgetSelector(data);
|
||||
buildDeviceWidgetSelector(data);
|
||||
}
|
||||
if (data.toggleWidget) {
|
||||
toggleWidget(data);
|
||||
}
|
||||
});
|
||||
|
||||
/* people widget */
|
||||
JX.Stratcom.listen(
|
||||
|
|
@ -126,19 +224,19 @@ JX.behavior('conpherence-widget-pane', function(config) {
|
|||
var root = e.getNode('conpherence-layout');
|
||||
var form = e.getNode('tag:form');
|
||||
var data = e.getNodeData('add-person');
|
||||
var peopleRoot = e.getNode('widgets-people');
|
||||
var people_root = e.getNode('widgets-people');
|
||||
var messages = null;
|
||||
try {
|
||||
messages = JX.DOM.find(root, 'div', 'conpherence-messages');
|
||||
} catch (ex) {
|
||||
}
|
||||
var latestTransactionData = JX.Stratcom.getData(
|
||||
var latest_transaction_data = JX.Stratcom.getData(
|
||||
JX.DOM.find(
|
||||
root,
|
||||
'input',
|
||||
'latest-transaction-id'
|
||||
));
|
||||
data.latest_transaction_id = latestTransactionData.id;
|
||||
data.latest_transaction_id = latest_transaction_data.id;
|
||||
JX.Workflow.newFromForm(form, data)
|
||||
.setHandler(JX.bind(this, function (r) {
|
||||
if (messages) {
|
||||
|
|
@ -148,7 +246,7 @@ JX.behavior('conpherence-widget-pane', function(config) {
|
|||
|
||||
// update the people widget
|
||||
JX.DOM.setContent(
|
||||
peopleRoot,
|
||||
people_root,
|
||||
JX.$H(r.people_widget)
|
||||
);
|
||||
}))
|
||||
|
|
@ -160,7 +258,7 @@ JX.behavior('conpherence-widget-pane', function(config) {
|
|||
['touchstart', 'mousedown'],
|
||||
'remove-person',
|
||||
function (e) {
|
||||
var peopleRoot = e.getNode('widgets-people');
|
||||
var people_root = e.getNode('widgets-people');
|
||||
var form = JX.DOM.find(peopleRoot, 'form');
|
||||
var data = e.getNodeData('remove-person');
|
||||
// we end up re-directing to conpherence home
|
||||
|
|
|
|||
Loading…
Reference in a new issue