mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
Add a "toggle-class" behavior
Summary: The new menu stuff needs this but it was easy to pull out on its own. Test Plan: Cliked UI example buttons. Reviewers: btrahan, chad Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3104
This commit is contained in:
parent
c8afc741fa
commit
998d43e828
5 changed files with 125 additions and 4 deletions
|
@ -1462,7 +1462,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'javelin-behavior-placeholder' =>
|
||||
array(
|
||||
'uri' => '/res/7dc26990/rsrc/js/application/core/behavior-placeholder.js',
|
||||
'uri' => '/res/85f097cb/rsrc/js/application/core/behavior-placeholder.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
|
@ -1526,6 +1526,18 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'disk' => '/rsrc/js/application/phortune/behavior-stripe-payment-form.js',
|
||||
),
|
||||
'javelin-behavior-toggle-class' =>
|
||||
array(
|
||||
'uri' => '/res/35b86b96/rsrc/js/application/core/behavior-toggle-class.js',
|
||||
'type' => 'js',
|
||||
'requires' =>
|
||||
array(
|
||||
0 => 'javelin-behavior',
|
||||
1 => 'javelin-stratcom',
|
||||
2 => 'javelin-dom',
|
||||
),
|
||||
'disk' => '/rsrc/js/application/core/behavior-toggle-class.js',
|
||||
),
|
||||
'javelin-behavior-view-placeholder' =>
|
||||
array(
|
||||
'uri' => '/res/5b89bdf5/rsrc/js/javelin/ext/view/ViewPlaceholder.js',
|
||||
|
@ -2383,7 +2395,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'phabricator-ui-example-css' =>
|
||||
array(
|
||||
'uri' => '/res/0cef078b/rsrc/css/application/uiexample/example.css',
|
||||
'uri' => '/res/376ab671/rsrc/css/application/uiexample/example.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
|
@ -30,6 +30,8 @@ final class JavelinUIExample extends PhabricatorUIExample {
|
|||
$request = $this->getRequest();
|
||||
$user = $request->getUser();
|
||||
|
||||
// placeholder
|
||||
|
||||
$placeholder_id = celerity_generate_unique_node_id();
|
||||
|
||||
Javelin::initBehavior(
|
||||
|
@ -54,6 +56,55 @@ final class JavelinUIExample extends PhabricatorUIExample {
|
|||
$panel->setWidth(AphrontPanelView::WIDTH_FORM);
|
||||
$panel->appendChild($form);
|
||||
|
||||
return $panel;
|
||||
|
||||
|
||||
// toggle-class
|
||||
|
||||
$container_id = celerity_generate_unique_node_id();
|
||||
$button_red_id = celerity_generate_unique_node_id();
|
||||
$button_blue_id = celerity_generate_unique_node_id();
|
||||
|
||||
$button_red = javelin_render_tag(
|
||||
'a',
|
||||
array(
|
||||
'class' => 'button',
|
||||
'sigil' => 'jx-toggle-class',
|
||||
'href' => '#',
|
||||
'id' => $button_red_id,
|
||||
'meta' => array(
|
||||
'map' => array(
|
||||
$container_id => 'jxui-red-border',
|
||||
$button_red_id => 'jxui-active',
|
||||
),
|
||||
),
|
||||
),
|
||||
'Toggle Red Border');
|
||||
|
||||
$button_blue = javelin_render_tag(
|
||||
'a',
|
||||
array(
|
||||
'class' => 'button jxui-active',
|
||||
'sigil' => 'jx-toggle-class',
|
||||
'href' => '#',
|
||||
'id' => $button_blue_id,
|
||||
'meta' => array(
|
||||
'state' => true,
|
||||
'map' => array(
|
||||
$container_id => 'jxui-blue-background',
|
||||
$button_blue_id => 'jxui-active',
|
||||
),
|
||||
),
|
||||
),
|
||||
'Toggle Blue Background');
|
||||
|
||||
$div = phutil_render_tag(
|
||||
'div',
|
||||
array(
|
||||
'id' => $container_id,
|
||||
'class' => 'jxui-example-container jxui-blue-background',
|
||||
),
|
||||
$button_red.$button_blue);
|
||||
|
||||
return array($panel, $div);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -163,6 +163,7 @@ final class PhabricatorStandardPageView extends AphrontPageView {
|
|||
}
|
||||
|
||||
Javelin::initBehavior('workflow', array());
|
||||
Javelin::initBehavior('toggle-class', array());
|
||||
Javelin::initBehavior(
|
||||
'refresh-csrf',
|
||||
array(
|
||||
|
|
|
@ -19,4 +19,29 @@
|
|||
|
||||
.phabricator-ui-example-description {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.jxui-example-container {
|
||||
padding: 2em;
|
||||
margin: 4em auto;
|
||||
border: 4px solid black;
|
||||
background: #dfdfdf;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.jxui-example-container a {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.jxui-example-container a.jxui-active {
|
||||
box-shadow: 0 0 30px #ffff00;
|
||||
}
|
||||
|
||||
.jxui-blue-background {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.jxui-red-border {
|
||||
border-color: red;
|
||||
}
|
||||
|
|
32
webroot/rsrc/js/application/core/behavior-toggle-class.js
Normal file
32
webroot/rsrc/js/application/core/behavior-toggle-class.js
Normal file
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* @provides javelin-behavior-toggle-class
|
||||
* @requires javelin-behavior
|
||||
* javelin-stratcom
|
||||
* javelin-dom
|
||||
*/
|
||||
|
||||
/**
|
||||
* Toggle CSS classes when an element is clicked. This behavior is activated
|
||||
* by adding the sigil `jx-toggle-class` to an element, and a key `map` to its
|
||||
* data. The `map` should be a map from element IDs to the classes that should
|
||||
* be toggled on them.
|
||||
*
|
||||
* Optionally, you may provide a `state` key to set the default state of the
|
||||
* element.
|
||||
*
|
||||
* @group ui
|
||||
*/
|
||||
JX.behavior('toggle-class', function() {
|
||||
JX.Stratcom.listen(
|
||||
'click',
|
||||
'jx-toggle-class',
|
||||
function(e) {
|
||||
e.kill();
|
||||
|
||||
var t = e.getNodeData('jx-toggle-class');
|
||||
t.state = !t.state;
|
||||
for (var k in t.map) {
|
||||
JX.DOM.alterClass(JX.$(k), t.map[k], t.state);
|
||||
}
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue