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

src/__celerity_resource_map__.php

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

src/applications/uiexample/examples/JavelinUIExample.php

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

src/view/page/PhabricatorStandardPageView.php

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

webroot/rsrc/css/application/uiexample/example.css

@@ -20,3 +20,28 @@
 .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;
+}

webroot/rsrc/js/application/core/behavior-toggle-class.js

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