1
0
Fork 0
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:
epriestley 2012-07-30 16:08:42 -07:00
parent c8afc741fa
commit 998d43e828
5 changed files with 125 additions and 4 deletions

View file

@ -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(

View file

@ -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);
}
}

View file

@ -163,6 +163,7 @@ final class PhabricatorStandardPageView extends AphrontPageView {
}
Javelin::initBehavior('workflow', array());
Javelin::initBehavior('toggle-class', array());
Javelin::initBehavior(
'refresh-csrf',
array(

View file

@ -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;
}

View 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);
}
});
});