revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-01 02:10:59 +01:00
Code Issues Releases Wiki Activity

Conpherence - make the JS layer a bit better

Browse source 
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 2013-05-29 12:46:06 -07:00
parent 0f070236bd
commit d0b9b6c908
13 changed files with 602 additions and 259 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/__celerity_resource_map__.php
View file

@ -918,7 +918,7 @@ celerity_register_resource_map(array(
), ),
'conpherence-menu-css' => 'conpherence-menu-css' =>
array( array(
'uri' => '/res/c955650e/rsrc/css/application/conpherence/menu.css', 'uri' => '/res/60f38fbd/rsrc/css/application/conpherence/menu.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -927,7 +927,7 @@ celerity_register_resource_map(array(
), ),
'conpherence-message-pane-css' => 'conpherence-message-pane-css' =>
array( array(
'uri' => '/res/383af93e/rsrc/css/application/conpherence/message-pane.css', 'uri' => '/res/d9e90066/rsrc/css/application/conpherence/message-pane.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -945,7 +945,7 @@ celerity_register_resource_map(array(
), ),
'conpherence-widget-pane-css' => 'conpherence-widget-pane-css' =>
array( array(
'uri' => '/res/6f836b19/rsrc/css/application/conpherence/widget-pane.css', 'uri' => '/res/b218398a/rsrc/css/application/conpherence/widget-pane.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -1294,25 +1294,24 @@ celerity_register_resource_map(array(
), ),
'javelin-behavior-conpherence-menu' => 'javelin-behavior-conpherence-menu' =>
array( array(
'uri' => '/res/7181099a/rsrc/js/application/conpherence/behavior-menu.js', 'uri' => '/res/478fc4f3/rsrc/js/application/conpherence/behavior-menu.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
0 => 'javelin-behavior', 0 => 'javelin-behavior',
1 => 'javelin-dom', 1 => 'javelin-dom',
2 => 'javelin-util', 2 => 'javelin-util',
3 => 'javelin-request', 3 => 'javelin-stratcom',
4 => 'javelin-stratcom', 4 => 'javelin-workflow',
5 => 'javelin-workflow', 5 => 'javelin-behavior-device',
6 => 'javelin-behavior-device', 6 => 'javelin-history',
7 => 'javelin-history', 7 => 'javelin-vector',
8 => 'javelin-vector',
), ),
'disk' => '/rsrc/js/application/conpherence/behavior-menu.js', 'disk' => '/rsrc/js/application/conpherence/behavior-menu.js',
), ),
'javelin-behavior-conpherence-pontificate' => 'javelin-behavior-conpherence-pontificate' =>
array( array(
'uri' => '/res/88ac3361/rsrc/js/application/conpherence/behavior-pontificate.js', 'uri' => '/res/d6c5860f/rsrc/js/application/conpherence/behavior-pontificate.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
@ -1326,7 +1325,7 @@ celerity_register_resource_map(array(
), ),
'javelin-behavior-conpherence-widget-pane' => 'javelin-behavior-conpherence-widget-pane' =>
array( 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', 'type' => 'js',
'requires' => 'requires' =>
array( array(

11
src/applications/conpherence/controller/ConpherenceController.php
View file

@ -50,7 +50,16 @@ abstract class ConpherenceController extends PhabricatorController {
->setHref($this->getApplicationURI('update/'.$conpherence->getID().'/')) ->setHref($this->getApplicationURI('update/'.$conpherence->getID().'/'))
->setWorkflow(true)); ->setWorkflow(true));
return $crumbs; return hsprintf(
'%s',
array(
phutil_tag(
'div',
array(
'class' => 'header-loading-mask'
),
''),
$crumbs));
} }
protected function renderConpherenceTransactions( protected function renderConpherenceTransactions(

6
src/applications/conpherence/controller/ConpherenceListController.php
View file

@ -154,7 +154,13 @@ final class ConpherenceListController
->setThreadView($thread_view) ->setThreadView($thread_view)
->setRole('list'); ->setRole('list');
if ($conpherence) { if ($conpherence) {
$layout->setHeader($this->buildHeaderPaneContent($conpherence));
$layout->setThread($conpherence); $layout->setThread($conpherence);
} else {
$layout->setHeader(
$this->buildHeaderPaneContent(
id(new ConpherenceThread())
->makeEphemeral()));
} }
$response = $this->buildApplicationPage( $response = $this->buildApplicationPage(
$layout, $layout,

11
src/applications/conpherence/controller/ConpherenceViewController.php
View file

@ -70,7 +70,7 @@ final class ConpherenceViewController extends
$form = null; $form = null;
$content = array('messages' => $messages); $content = array('messages' => $messages);
} else { } else {
$header = $this->renderHeaderPaneContent(); $header = $this->buildHeaderPaneContent($conpherence);
$form = $this->renderFormContent($data['latest_transaction_id']); $form = $this->renderFormContent($data['latest_transaction_id']);
$content = array( $content = array(
'header' => $header, '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( private function renderMessagePaneContent(
array $transactions, array $transactions,
$oldest_transaction_id) { $oldest_transaction_id) {
require_celerity_resource('conpherence-message-pane-css');
$scrollbutton = ''; $scrollbutton = '';
if ($oldest_transaction_id) { if ($oldest_transaction_id) {
$scrollbutton = javelin_tag( $scrollbutton = javelin_tag(

3
src/applications/conpherence/controller/ConpherenceWidgetController.php
View file

@ -61,7 +61,6 @@ final class ConpherenceWidgetController extends
} }
private function renderWidgetPaneContent() { private function renderWidgetPaneContent() {
require_celerity_resource('conpherence-widget-pane-css');
require_celerity_resource('sprite-conpherence-css'); require_celerity_resource('sprite-conpherence-css');
$conpherence = $this->getConpherence(); $conpherence = $this->getConpherence();
@ -73,7 +72,7 @@ final class ConpherenceWidgetController extends
), ),
id(new PhabricatorActionHeaderView()) id(new PhabricatorActionHeaderView())
->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY) ->setHeaderColor(PhabricatorActionHeaderView::HEADER_GREY)
->setHeaderTitle('') ->setHeaderTitle(pht('Participants'))
->setHeaderHref('#') ->setHeaderHref('#')
->setDropdown(true) ->setDropdown(true)
->addHeaderSigil('widgets-selector')); ->addHeaderSigil('widgets-selector'));

61
src/applications/conpherence/view/ConpherenceLayoutView.php
View file

@ -51,14 +51,23 @@ final class ConpherenceLayoutView extends AphrontView {
public function render() { public function render() {
require_celerity_resource('conpherence-menu-css'); 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(); $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', Javelin::initBehavior('conpherence-menu',
array( array(
'base_uri' => $this->baseURI, 'baseURI' => $this->baseURI,
'layoutID' => $layout_id, 'layoutID' => $layout_id,
'selectedID' => ($this->thread ? $this->thread->getID() : null), 'selectedID' => $selected_id,
'selectedThreadID' => $selected_thread_id,
'role' => $this->role, 'role' => $this->role,
'hasThreadList' => (bool)$this->threadView, 'hasThreadList' => (bool)$this->threadView,
'hasThread' => (bool)$this->messages, '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( return javelin_tag(
'div', 'div',
array( array(
@ -114,7 +126,14 @@ final class ConpherenceLayoutView extends AphrontView {
'class' => 'conpherence-menu-pane phabricator-side-menu', 'class' => 'conpherence-menu-pane phabricator-side-menu',
'sigil' => 'conpherence-menu-pane', 'sigil' => 'conpherence-menu-pane',
), ),
nonempty($this->threadView, '')), nonempty(
$this->threadView,
phutil_tag(
'div',
array(
'class' => 'menu-loading-icon',
'style' => $loading_style),
''))),
javelin_tag( javelin_tag(
'div', 'div',
array( array(
@ -159,12 +178,32 @@ final class ConpherenceLayoutView extends AphrontView {
'id' => 'conpherence-widget-pane', 'id' => 'conpherence-widget-pane',
'sigil' => '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( javelin_tag(
'div', 'div',
array( array(
'class' => 'conpherence-message-pane', 'class' => 'conpherence-message-pane',
'id' => 'conpherence-message-pane' 'id' => 'conpherence-message-pane',
'sigil' => 'conpherence-message-pane'
), ),
array( array(
javelin_tag( javelin_tag(
@ -175,6 +214,18 @@ final class ConpherenceLayoutView extends AphrontView {
'sigil' => 'conpherence-messages', 'sigil' => 'conpherence-messages',
), ),
nonempty($this->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( javelin_tag(
'div', 'div',
array( array(

4
src/applications/conpherence/view/ConpherenceThreadListView.php
View file

@ -84,6 +84,7 @@ final class ConpherenceThreadListView extends AphrontView {
$unread_count = $data['unread_count']; $unread_count = $data['unread_count'];
$epoch = $data['epoch']; $epoch = $data['epoch'];
$image = $data['image']; $image = $data['image'];
$dom_id = $thread->getPHID().'-nav-item';
return id(new ConpherenceMenuItemView()) return id(new ConpherenceMenuItemView())
->setUser($user) ->setUser($user)
@ -98,7 +99,8 @@ final class ConpherenceThreadListView extends AphrontView {
->setMetadata( ->setMetadata(
array( array(
'title' => $data['js_title'], 'title' => $data['js_title'],
'id' => $thread->getID(), 'id' => $dom_id,
'threadID' => $thread->getID(),
)); ));
} }

21
webroot/rsrc/css/application/conpherence/menu.css
View file

@ -21,7 +21,13 @@
margin: 0px 0px 16px 0px; 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%; width: 100%;
position: absolute; position: absolute;
overflow-x: hidden; overflow-x: hidden;
@ -30,7 +36,8 @@
bottom: 0; bottom: 0;
} }
.device-desktop .conpherence-layout .conpherence-menu-pane, .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; width: 280px;
} }
.device .conpherence-menu-pane { .device .conpherence-menu-pane {
@ -63,10 +70,16 @@
} }
.conpherence-content-pane { .conpherence-content-pane {
display: none;
margin-left: 0px; margin-left: 0px;
position: relative; position: relative;
} }
.device-desktop .conpherence-content-pane,
.device .conpherence-role-thread .conpherence-content-pane {
display: block;
}
.conpherence-menu .conpherence-menu-item-view { .conpherence-menu .conpherence-menu-item-view {
display: block; display: block;
height: 55px; height: 55px;
@ -85,6 +98,10 @@
border-left: 2px solid #66CCFF; border-left: 2px solid #66CCFF;
} }
.conpherence-menu .loading {
font-style: italic;
}
.device-desktop .conpherence-menu .conpherence-menu-item-view:hover { .device-desktop .conpherence-menu .conpherence-menu-item-view:hover {
background-image: url('/rsrc/image/texture/dark-menu-hover.png'); background-image: url('/rsrc/image/texture/dark-menu-hover.png');
} }

40
webroot/rsrc/css/application/conpherence/message-pane.css
View file

@ -2,23 +2,26 @@
* @provides conpherence-message-pane-css * @provides conpherence-message-pane-css
*/ */
.conpherence-message-pane { .conpherence-message-pane,
.loading .messages-loading-mask,
.loading .messages-loading-icon {
position: fixed; position: fixed;
left: 280px; left: 280px;
right: 241px; right: 241px;
top: 76px; top: 76px;
bottom: 0px;
min-width: 300px; min-width: 300px;
width: auto; width: auto;
height: 100%;
} }
.device .conpherence-message-pane { .device .conpherence-message-pane,
.device .loading .messages-loading-mask,
.device .loading .messages-loading-icon {
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
} }
.conpherence-show-older-messages { .conpherence-show-older-messages {
display: block; display: block;
background: #e0e3ec; background: #e0e3ec;
@ -28,6 +31,10 @@
color: #18559D; color: #18559D;
} }
.conpherence-show-older-messages-loading {
font-style: italic;
}
.conpherence-message-pane .conpherence-messages { .conpherence-message-pane .conpherence-messages {
position: fixed; position: fixed;
left: 280px; left: 280px;
@ -47,6 +54,31 @@
box-shadow: none; 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 { .conpherence-message-pane .phabricator-form-view {
border-width: 0; border-width: 0;
background: none; background: none;

30
webroot/rsrc/css/application/conpherence/widget-pane.css
View file

@ -2,12 +2,14 @@
* @provides conpherence-widget-pane-css * @provides conpherence-widget-pane-css
*/ */
.conpherence-widget-pane { .conpherence-widget-pane,
.loading .widgets-loading-mask,
.loading .widgets-loading-icon {
position: fixed; position: fixed;
right: 0px; right: 0px;
top: 74px; top: 74px;
bottom: 0px;
width: 240px; width: 240px;
height: 100%;
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
border-color: #CCC; border-color: #CCC;
border-style: solid; border-style: solid;
@ -15,11 +17,29 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.device .conpherence-widget-pane { .device .conpherence-widget-pane,
.device .loading .widgets-loading-mask,
.device .loading .widgets-loading-icon {
top: 44px; top: 44px;
width: 100%; 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 { .conpherence-widget-pane .aphront-form-input {
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -80,6 +100,10 @@
text-align: center; text-align: center;
color: #555; color: #555;
} }
.device .conpherence-widget-pane #widgets-files .no-files {
width: 60px;
margin: 0px auto 0px auto;
}
.conpherence-widget-pane #widgets-files .file-entry { .conpherence-widget-pane #widgets-files .file-entry {
padding: 10px 0; padding: 10px 0;
margin: 0 5px 0 10px; margin: 0 5px 0 10px;

405
webroot/rsrc/js/application/conpherence/behavior-menu.js
View file

@ -3,7 +3,6 @@
* @requires javelin-behavior * @requires javelin-behavior
* javelin-dom * javelin-dom
* javelin-util * javelin-util
* javelin-request
* javelin-stratcom * javelin-stratcom
* javelin-workflow * javelin-workflow
* javelin-behavior-device * javelin-behavior-device
@ -13,27 +12,66 @@
JX.behavior('conpherence-menu', function(config) { JX.behavior('conpherence-menu', function(config) {
var thread = { /**
* State for displayed thread.
*/
var _thread = {
selected: null, 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'); * Current role of this behavior. The two possible roles are to show a 'list'
for (var ii = 0; ii < threads.length; ii++) { * of threads or a specific 'thread'. On devices, this behavior stays in the
var data = JX.Stratcom.getData(threads[ii]); * 'list' role indefinitely, treating clicks normally and the next page
if (data.id == id) { * loads the behavior with role = 'thread'. On desktop, this behavior
selectthread(threads[ii], updatePageData); * auto-loads a thread as part of the 'list' role. As the thread loads the
return; * 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) { function selectThread(node, update_page_data) {
if (_thread.node) {
if (thread.node) { JX.DOM.alterClass(_thread.node, 'conpherence-selected', false);
JX.DOM.alterClass(thread.node, 'conpherence-selected', false);
// keep the unread-count hidden still. big TODO once we ajax in updates // 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 / // to threads to make this work right and move threads between read /
// unread // unread
@ -42,37 +80,28 @@ JX.behavior('conpherence-menu', function(config) {
JX.DOM.alterClass(node, 'conpherence-selected', true); JX.DOM.alterClass(node, 'conpherence-selected', true);
JX.DOM.alterClass(node, 'hide-unread-count', true); JX.DOM.alterClass(node, 'hide-unread-count', true);
thread.node = node; _thread.node = node;
var data = JX.Stratcom.getData(node); var data = JX.Stratcom.getData(node);
thread.selected = data.id; _thread.selected = data.threadID;
if (updatePageData) { if (update_page_data) {
updatepagedata(data); updatePageData(data);
} }
redrawthread(); redrawThread();
} }
JX.Stratcom.listen( function updatePageData(data) {
'conpherence-selectthread', var uri_suffix = _thread.selected + '/';
null,
function (e) {
var node = JX.$(e.getData().id);
selectthread(node);
}
);
function updatepagedata(data) {
var uri_suffix = thread.selected + '/';
if (data.use_base_uri) { if (data.use_base_uri) {
uri_suffix = ''; uri_suffix = '';
} }
JX.History.replace(config.base_uri + uri_suffix); JX.History.replace(config.baseURI + uri_suffix);
if (data.title) { if (data.title) {
document.title = data.title; document.title = data.title;
} else if (thread.node) { } else if (_thread.node) {
var threadData = JX.Stratcom.getData(thread.node); var threadData = JX.Stratcom.getData(_thread.node);
document.title = threadData.title; document.title = threadData.title;
} }
} }
@ -81,60 +110,110 @@ JX.behavior('conpherence-menu', function(config) {
'conpherence-update-page-data', 'conpherence-update-page-data',
null, null,
function (e) { function (e) {
updatepagedata(e.getData()); updatePageData(e.getData());
} }
); );
function redrawthread() { function redrawThread() {
if (!thread.node) { if (!_thread.node) {
return; return;
} }
if (thread.visible == thread.selected) { if (_thread.visible == _thread.selected) {
return; return;
} }
var data = JX.Stratcom.getData(thread.node); var data = JX.Stratcom.getData(_thread.node);
if (thread.visible !== null || !config.hasThread) { if (_thread.visible !== null || !config.hasThread) {
var uri = config.base_uri + data.id + '/'; markThreadLoading(true);
var uri = config.baseURI + data.threadID + '/';
new JX.Workflow(uri, {}) new JX.Workflow(uri, {})
.setHandler(onloadthreadresponse) .setHandler(JX.bind(null, onLoadThreadResponse, data.threadID))
.start(); .start();
} else if (config.hasThread) {
_scrollMessageWindow();
} else { } else {
didredrawthread(); didRedrawThread();
} }
if (thread.visible !== null || !config.hasWidgets) { if (_thread.visible !== null || !config.hasWidgets) {
var widget_uri = config.base_uri + 'widget/' + data.id + '/'; markWidgetLoading(true);
var widget_uri = config.baseURI + 'widget/' + data.threadID + '/';
new JX.Workflow(widget_uri, {}) new JX.Workflow(widget_uri, {})
.setHandler(onwidgetresponse) .setHandler(JX.bind(null, onWidgetResponse, data.threadID))
.start(); .start();
} else { } else {
updatetoggledwidget(); JX.Stratcom.invoke(
} 'conpherence-update-widgets',
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',
null, null,
{ {
widget : getdefaultwidget(), widget : getDefaultWidget(),
no_toggle : no_toggle 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 device = JX.Device.getDevice();
var widget = 'conpherence-message-pane'; var widget = 'conpherence-message-pane';
if (device == 'desktop') { if (device == 'desktop') {
@ -143,48 +222,55 @@ JX.behavior('conpherence-menu', function(config) {
return widget; 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 header = JX.$H(response.header);
var messages = JX.$H(response.messages); var messages = JX.$H(response.messages);
var form = JX.$H(response.form); var form = JX.$H(response.form);
var root = JX.DOM.find(document, 'div', 'conpherence-layout'); var root = JX.DOM.find(document, 'div', 'conpherence-layout');
var headerRoot = JX.DOM.find(root, 'div', 'conpherence-header-pane'); var header_root = JX.DOM.find(root, 'div', 'conpherence-header-pane');
var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages'); var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages');
var formRoot = JX.DOM.find(root, 'div', 'conpherence-form'); var form_root = JX.DOM.find(root, 'div', 'conpherence-form');
JX.DOM.setContent(headerRoot, header); JX.DOM.setContent(header_root, header);
JX.DOM.setContent(messagesRoot, messages); JX.DOM.setContent(messages_root, messages);
JX.DOM.setContent(formRoot, form); 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 root = JX.DOM.find(document, 'div', 'conpherence-layout');
var messagesRoot = JX.DOM.find(root, 'div', 'conpherence-messages'); var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages');
messagesRoot.scrollTop = messagesRoot.scrollHeight; messages_root.scrollTop = messages_root.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
}
} }
JX.Stratcom.listen( JX.Stratcom.listen(
'conpherence-redraw-thread', 'conpherence-redraw-thread',
null, null,
function (e) { function (e) {
didredrawthread(); _scrollMessageWindow();
} }
); );
@ -202,7 +288,7 @@ JX.behavior('conpherence-menu', function(config) {
} }
e.kill(); 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) { JX.Stratcom.listen('click', 'conpherence-edit-metadata', function (e) {
@ -241,126 +327,145 @@ JX.behavior('conpherence-menu', function(config) {
.start(); .start();
}); });
var _loadingTransactionID = null;
JX.Stratcom.listen('click', 'show-older-messages', function(e) { JX.Stratcom.listen('click', 'show-older-messages', function(e) {
e.kill(); e.kill();
var data = e.getNodeData('show-older-messages'); var data = e.getNodeData('show-older-messages');
var oldest_transaction_id = data.oldest_transaction_id; if (data.oldest_transaction_id == _loadingTransactionID) {
var conf_id = thread.selected; return;
JX.DOM.remove(e.getNode('show-older-messages')); }
_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 root = JX.DOM.find(document, 'div', 'conpherence-layout');
var messages_root = JX.DOM.find(root, 'div', 'conpherence-messages'); 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); var messages = JX.$H(r.messages);
JX.DOM.prependContent( JX.DOM.prependContent(
messages_root, messages_root,
JX.$H(messages)); 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 * On devices, we just show a thread list, so we don't want to automatically
// thread. * select or load any threads. On desktop, we automatically select the first
var old_device = null; * thread, changing the _currentRole from list to thread.
function ondevicechange() { */
function onDeviceChange() {
var new_device = JX.Device.getDevice(); var new_device = JX.Device.getDevice();
if (new_device === old_device) { if (new_device === _oldDevice) {
return; return;
} }
if (old_device === null) { if (_oldDevice === null) {
old_device = new_device; _oldDevice = new_device;
if (config.role == 'list') { if (_currentRole == 'list') {
if (new_device != 'desktop') { if (new_device != 'desktop') {
return; return;
} }
} else { } else {
loadthreads(); loadThreads();
return; return;
} }
} }
var update_toggled_widget = var update_toggled_widget =
new_device == 'desktop' || old_device == 'desktop'; new_device == 'desktop' || _oldDevice == 'desktop';
old_device = new_device; _oldDevice = new_device;
if (thread.visible !== null && update_toggled_widget) { if (_thread.visible !== null && update_toggled_widget) {
updatetoggledwidget(); JX.Stratcom.invoke(
'conpherence-did-redraw-thread',
null,
{
widget : getDefaultWidget(),
threadID : _thread.selected
});
} }
if (config.role == 'list') { if (_currentRole == 'list' && new_device == 'desktop') {
didloadthreads(); // this selects a thread and loads it
config.role = 'thread'; didLoadThreads();
_currentRole = 'thread';
var root = JX.DOM.find(document, 'div', 'conpherence-layout'); var root = JX.DOM.find(document, 'div', 'conpherence-layout');
JX.DOM.alterClass(root, 'conpherence-role-list', false); JX.DOM.alterClass(root, 'conpherence-role-list', false);
JX.DOM.alterClass(root, 'conpherence-role-thread', true); JX.DOM.alterClass(root, 'conpherence-role-thread', true);
} }
} }
JX.Stratcom.listen('phabricator-device-change', null, onDeviceChange);
JX.Stratcom.listen('phabricator-device-change', null, ondevicechange); function loadThreads() {
ondevicechange(); markThreadsLoading(true);
var uri = config.baseURI + 'thread/' + config.selectedThreadID + '/';
function loadthreads() {
var uri = config.base_uri + 'thread/' + config.selectedID + '/';
new JX.Workflow(uri) new JX.Workflow(uri)
.setHandler(onloadthreadsresponse) .setHandler(onLoadThreadsResponse)
.start(); .start();
} }
function onloadthreadsresponse(r) { function onLoadThreadsResponse(r) {
var layout = JX.$(config.layoutID); var layout = JX.$(config.layoutID);
var menu = JX.DOM.find(layout, 'div', 'conpherence-menu-pane'); var menu = JX.DOM.find(layout, 'div', 'conpherence-menu-pane');
JX.DOM.setContent(menu, JX.$H(r)); 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 // If there's no thread selected yet, select the current thread or the
// first thread. // first thread.
if (!thread.selected) { if (!_thread.selected) {
if (config.selectedID) { if (config.selectedID) {
selectthreadid(config.selectedID, true); selectThreadByID(config.selectedID, true);
} else { } else {
var layout = JX.$(config.layoutID); var layout = JX.$(config.layoutID);
var threads = JX.DOM.scry(layout, 'a', 'conpherence-menu-click'); var threads = JX.DOM.scry(layout, 'a', 'conpherence-menu-click');
if (threads.length) { if (threads.length) {
selectthread(threads[0]); selectThread(threads[0]);
} else { } else {
var nothreads = JX.DOM.find(layout, 'div', 'conpherence-no-threads'); var nothreads = JX.DOM.find(layout, 'div', 'conpherence-no-threads');
nothreads.style.display = 'block'; nothreads.style.display = 'block';
} }
} }
} }
redrawthread();
} }
var handlethreadscrollers = function (e) { var handleThreadScrollers = function (e) {
e.kill(); e.kill();
var data = e.getNodeData('conpherence-menu-scroller'); var data = e.getNodeData('conpherence-menu-scroller');
var scroller = e.getNode('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) new JX.Workflow(scroller.href, data)
.setHandler( .setHandler(
JX.bind(null, threadscrollerresponse, scroller, data.direction)) JX.bind(null, threadScrollerResponse, scroller, data.direction))
.start(); .start();
}; };
var threadscrollerresponse = function (scroller, direction, r) { var threadScrollerResponse = function (scroller, direction, r) {
var html = JX.$H(r.html); var html = JX.$H(r.html);
var threadPhids = r.phids; var thread_phids = r.phids;
var reselectId = null; var reselect_id = null;
// remove any threads that are in the list that we just got back // 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 // in the result set; things have changed and they'll be in the
// right place soon // right place soon
for (var ii = 0; ii < threadPhids.length; ii++) { for (var ii = 0; ii < thread_phids.length; ii++) {
try { try {
var nodeId = threadPhids[ii] + '-nav-item'; var node_id = thread_phids[ii] + '-nav-item';
var node = JX.$(nodeId); var node = JX.$(node_id);
var nodeData = JX.Stratcom.getData(node); var node_data = JX.Stratcom.getData(node);
if (nodeData.id == thread.selected) { if (node_data.id == _thread.selected) {
reselectId = nodeId; reselect_id = node_id;
} }
JX.DOM.remove(node); JX.DOM.remove(node);
} catch (ex) { } catch (ex) {
@ -369,8 +474,8 @@ JX.behavior('conpherence-menu', function(config) {
} }
var root = JX.DOM.find(document, 'div', 'conpherence-layout'); var root = JX.DOM.find(document, 'div', 'conpherence-layout');
var menuRoot = JX.DOM.find(root, 'div', 'conpherence-menu-pane'); var menu_root = JX.DOM.find(root, 'div', 'conpherence-menu-pane');
var scrollY = 0; var scroll_y = 0;
// we have to do some hyjinx in the up case to make the menu scroll to // we have to do some hyjinx in the up case to make the menu scroll to
// where it should // where it should
if (direction == 'up') { if (direction == 'up') {
@ -382,16 +487,16 @@ JX.behavior('conpherence-menu', function(config) {
document.body.appendChild(test_size); document.body.appendChild(test_size);
var html_size = JX.Vector.getDim(test_size); var html_size = JX.Vector.getDim(test_size);
JX.DOM.remove(test_size); JX.DOM.remove(test_size);
scrollY = html_size.y; scroll_y = html_size.y;
} }
JX.DOM.replace(scroller, html); JX.DOM.replace(scroller, html);
menuRoot.scrollTop += scrollY; menu_root.scrollTop += scroll_y;
if (reselectId) { if (reselect_id) {
JX.Stratcom.invoke( JX.Stratcom.invoke(
'conpherence-selectthread', 'conpherence-selectthread',
null, null,
{ id : reselectId } { id : reselect_id }
); );
} }
}; };
@ -399,7 +504,7 @@ JX.behavior('conpherence-menu', function(config) {
JX.Stratcom.listen( JX.Stratcom.listen(
['click'], ['click'],
'conpherence-menu-scroller', 'conpherence-menu-scroller',
handlethreadscrollers handleThreadScrollers
); );
}); });

14
webroot/rsrc/js/application/conpherence/behavior-pontificate.js
View file

@ -14,13 +14,19 @@ JX.behavior('conpherence-pontificate', function(config) {
var form = e.getNode('tag:form'); var form = e.getNode('tag:form');
var root = e.getNode('conpherence-layout'); 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; var fileWidget = null;
try { try {
fileWidget = JX.DOM.find(root, 'div', 'widgets-files'); fileWidget = JX.DOM.find(root, 'div', 'widgets-files');
} catch (ex) { } catch (ex) {
// Ignore; maybe no files widget // 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) JX.Workflow.newFromForm(form)
.setHandler(JX.bind(this, function(r) { .setHandler(JX.bind(this, function(r) {
@ -49,7 +55,11 @@ JX.behavior('conpherence-pontificate', function(config) {
'conpherence-selectthread', 'conpherence-selectthread',
null, null,
{ id : r.conpherence_phid + '-nav-item' } { 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(); .start();
}; };

232
webroot/rsrc/js/application/conpherence/behavior-widget-pane.js
View file

@ -13,80 +13,173 @@
JX.behavior('conpherence-widget-pane', function(config) { 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 root = JX.DOM.find(document, 'div', 'conpherence-layout');
var widgetPane = JX.DOM.find(root, 'div', 'conpherence-widget-pane'); var widget_pane = JX.DOM.find(root, 'div', 'conpherence-widget-pane');
var widgetHeader = JX.DOM.find(widgetPane, 'a', 'widgets-selector'); var widget_header = JX.DOM.find(widget_pane, 'a', 'widgets-selector');
var mobileWidgetHeader = null; 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 { try {
mobileWidgetHeader = JX.DOM.find( device_header = JX.DOM.find(
root, root,
'a', 'a',
'device-widgets-selector'); 'device-widgets-selector');
} catch (ex) { } catch (ex) {
// is okay - no mobileWidgetHeader yet... // is okay - no deviceWidgetHeader yet... but bail time
} }
var widgetData = widgets[data.widget]; return device_header;
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);
}; };
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 widgets = config.widgetRegistry;
var widgetData = widgets[data.widget]; var widget_data = widgets[data.widget];
var device = JX.Device.getDevice(); var device = JX.Device.getDevice();
var is_desktop = device == 'desktop'; var is_desktop = device == 'desktop';
if (widgetData.deviceOnly && is_desktop) { if (widget_data.deviceOnly && is_desktop) {
return; 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) { for (var widget in config.widgetRegistry) {
widgetData = widgets[widget]; widget_data = widgets[widget];
if (widgetData.deviceOnly && is_desktop) { if (widget_data.deviceOnly && is_desktop) {
// some one off code for conpherence messages which are device-only // some one off code for conpherence messages which are device-only
// as a widget, but shown always on the desktop // as a widget, but shown always on the desktop
if (widget == 'conpherence-message-pane') { if (widget == 'conpherence-message-pane') {
@ -109,13 +202,18 @@ JX.behavior('conpherence-widget-pane', function(config) {
}; };
JX.Stratcom.listen( JX.Stratcom.listen(
'conpherence-toggle-widget', 'conpherence-update-widgets',
null, null,
function (e) { 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 */ /* people widget */
JX.Stratcom.listen( JX.Stratcom.listen(
@ -126,19 +224,19 @@ JX.behavior('conpherence-widget-pane', function(config) {
var root = e.getNode('conpherence-layout'); var root = e.getNode('conpherence-layout');
var form = e.getNode('tag:form'); var form = e.getNode('tag:form');
var data = e.getNodeData('add-person'); var data = e.getNodeData('add-person');
var peopleRoot = e.getNode('widgets-people'); var people_root = e.getNode('widgets-people');
var messages = null; var messages = null;
try { try {
messages = JX.DOM.find(root, 'div', 'conpherence-messages'); messages = JX.DOM.find(root, 'div', 'conpherence-messages');
} catch (ex) { } catch (ex) {
} }
var latestTransactionData = JX.Stratcom.getData( var latest_transaction_data = JX.Stratcom.getData(
JX.DOM.find( JX.DOM.find(
root, root,
'input', 'input',
'latest-transaction-id' 'latest-transaction-id'
)); ));
data.latest_transaction_id = latestTransactionData.id; data.latest_transaction_id = latest_transaction_data.id;
JX.Workflow.newFromForm(form, data) JX.Workflow.newFromForm(form, data)
.setHandler(JX.bind(this, function (r) { .setHandler(JX.bind(this, function (r) {
if (messages) { if (messages) {
@ -148,7 +246,7 @@ JX.behavior('conpherence-widget-pane', function(config) {
// update the people widget // update the people widget
JX.DOM.setContent( JX.DOM.setContent(
peopleRoot, people_root,
JX.$H(r.people_widget) JX.$H(r.people_widget)
); );
})) }))
@ -160,7 +258,7 @@ JX.behavior('conpherence-widget-pane', function(config) {
['touchstart', 'mousedown'], ['touchstart', 'mousedown'],
'remove-person', 'remove-person',
function (e) { function (e) {
var peopleRoot = e.getNode('widgets-people'); var people_root = e.getNode('widgets-people');
var form = JX.DOM.find(peopleRoot, 'form'); var form = JX.DOM.find(peopleRoot, 'form');
var data = e.getNodeData('remove-person'); var data = e.getNodeData('remove-person');
// we end up re-directing to conpherence home // we end up re-directing to conpherence home