Typeaheads

src/__celerity_resource_map__.php

@@ -17,7 +17,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-form-view-css' =>
   array(
-    'path' => '/res/20ebc99b/rsrc/css/aphront/form-view.css',
+    'path' => '/res/17285e65/rsrc/css/aphront/form-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -47,6 +47,23 @@ celerity_register_resource_map(array(
     array(
     ),
   ),
+  'aphront-tokenizer-control-css' =>
+  array(
+    'path' => '/res/a3d23074/rsrc/css/aphront/tokenizer.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+      0 => 'aphront-typeahead-control-css',
+    ),
+  ),
+  'aphront-typeahead-control-css' =>
+  array(
+    'path' => '/res/928df9f0/rsrc/css/aphront/typeahead.css',
+    'type' => 'css',
+    'requires' =>
+    array(
+    ),
+  ),
   'phabricator-standard-page-view' =>
   array(
     'path' => '/res/0eef6905/rsrc/css/application/base/standard-page-view.css',
@@ -111,6 +128,14 @@ celerity_register_resource_map(array(
     array(
     ),
   ),
+  'javelin-behavior-aphront-basic-tokenizer' =>
+  array(
+    'path' => '/res/12de8502/rsrc/js/application/core/behavior-tokenizer.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+    ),
+  ),
   'javelin-behavior-differential-populate' =>
   array(
     'path' => '/res/b419291a/rsrc/js/application/differential/behavior-populate.js',
@@ -151,4 +176,20 @@ celerity_register_resource_map(array(
     array(
     ),
   ),
+  'javelin-typeahead-dev' =>
+  array(
+    'path' => '/res/c81c0f01/rsrc/js/javelin/typeahead.dev.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+    ),
+  ),
+  'javelin-typeahead-prod' =>
+  array(
+    'path' => '/res/871c9b0f/rsrc/js/javelin/typeahead.min.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+    ),
+  ),
 ));

src/__phutil_library_map__.php

@@ -27,6 +27,7 @@ phutil_register_library_map(array(
     'AphrontFormSubmitControl' => 'view/form/control/submit',
     'AphrontFormTextAreaControl' => 'view/form/control/textarea',
     'AphrontFormTextControl' => 'view/form/control/text',
+    'AphrontFormTokenizerControl' => 'view/form/control/tokenizer',
     'AphrontFormView' => 'view/form/base',
     'AphrontMySQLDatabaseConnection' => 'storage/connection/mysql',
     'AphrontNullView' => 'view/null',
@@ -122,6 +123,8 @@ phutil_register_library_map(array(
     'PhabricatorPeopleListController' => 'applications/people/controller/list',
     'PhabricatorPeopleProfileController' => 'applications/people/controller/profile',
     'PhabricatorStandardPageView' => 'view/page/standard',
+    'PhabricatorTypeaheadCommonDatasourceController' => 'applications/typeahead/controller/common',
+    'PhabricatorTypeaheadDatasourceController' => 'applications/typeahead/controller/base',
     'PhabricatorUser' => 'applications/people/storage/user',
     'PhabricatorUserDAO' => 'applications/people/storage/base',
   ),
@@ -159,6 +162,7 @@ phutil_register_library_map(array(
     'AphrontFormSubmitControl' => 'AphrontFormControl',
     'AphrontFormTextAreaControl' => 'AphrontFormControl',
     'AphrontFormTextControl' => 'AphrontFormControl',
+    'AphrontFormTokenizerControl' => 'AphrontFormControl',
     'AphrontFormView' => 'AphrontView',
     'AphrontMySQLDatabaseConnection' => 'AphrontDatabaseConnection',
     'AphrontNullView' => 'AphrontView',
@@ -233,6 +237,8 @@ phutil_register_library_map(array(
     'PhabricatorPeopleListController' => 'PhabricatorPeopleController',
     'PhabricatorPeopleProfileController' => 'PhabricatorPeopleController',
     'PhabricatorStandardPageView' => 'AphrontPageView',
+    'PhabricatorTypeaheadCommonDatasourceController' => 'PhabricatorTypeaheadDatasourceController',
+    'PhabricatorTypeaheadDatasourceController' => 'PhabricatorController',
     'PhabricatorUser' => 'PhabricatorUserDAO',
     'PhabricatorUserDAO' => 'PhabricatorLiskDAO',
   ),

src/aphront/default/configuration/AphrontDefaultApplicationConfiguration.php

@@ -87,6 +87,11 @@ class AphrontDefaultApplicationConfiguration
         '(?<hash>[a-f0-9]{8})/(?<path>.+\.(?:css|js))$'
           => 'CelerityResourceController',
       ),
+
+      '/typeahead/' => array(
+        'common/(?<type>\w+)/$'
+          => 'PhabricatorTypeaheadCommonDatasourceController',
+      ),
     );
   }
 

src/applications/differential/controller/revisionedit/DifferentialRevisionEditController.php

@@ -63,14 +63,20 @@ class DifferentialRevisionEditController extends DifferentialController {
     }
 */
     $e_name = true;
+    $e_testplan = true;
 
     $form = new AphrontFormView();
     if ($revision->getID()) {
-      $form->setAction('/differential/revision/edit/'.$category->getID().'/');
+      $form->setAction('/differential/revision/edit/'.$revision->getID().'/');
     } else {
       $form->setAction('/differential/revision/edit/');
     }
 
+    $reviewer_map = array(
+      1 => 'A Zebra',
+      2 => 'Pie Messenger',
+    );
+
     $form
       ->appendChild(
         id(new AphrontFormTextAreaControl())
@@ -90,13 +96,17 @@ class DifferentialRevisionEditController extends DifferentialController {
           ->setValue($revision->getTestPlan())
           ->setError($e_testplan))
       ->appendChild(
-        id(new AphrontFormTextAreaControl())
+        id(new AphrontFormTokenizerControl())
           ->setLabel('Reviewers')
-          ->setName('reviewers'))
+          ->setName('reviewers')
+          ->setDatasource('/typeahead/common/user/')
+          ->setValue($reviewer_map))
       ->appendChild(
-        id(new AphrontFormTextAreaControl())
+        id(new AphrontFormTokenizerControl())
           ->setLabel('CC')
-          ->setName('cc'))
+          ->setName('cc')
+          ->setDatasource('/typeahead/common/user/')
+          ->setValue($reviewer_map))
       ->appendChild(
         id(new AphrontFormTextControl())
           ->setLabel('Blame Revision')

src/applications/typeahead/controller/base/PhabricatorTypeaheadDatasourceController.php

@@ -0,0 +1,26 @@
+<?php
+
+/*
+ * Copyright 2011 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+abstract class PhabricatorTypeaheadDatasourceController
+  extends PhabricatorController {
+
+  public function getApplicationName() {
+    return 'typeahead';
+  }
+
+}

src/applications/typeahead/controller/base/__init__.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * This file is automatically generated. Lint this module to rebuild it.
+ * @generated
+ */
+
+
+
+phutil_require_module('phabricator', 'applications/base/controller/base');
+
+
+phutil_require_source('PhabricatorTypeaheadDatasourceController.php');

src/applications/typeahead/controller/common/PhabricatorTypeaheadCommonDatasourceController.php

@@ -0,0 +1,45 @@
+<?php
+
+/*
+ * Copyright 2011 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class PhabricatorTypeaheadCommonDatasourceController
+  extends PhabricatorTypeaheadDatasourceController {
+
+  public function willProcessRequest(array $data) {
+    $this->type = $data['type'];
+  }
+
+  public function processRequest() {
+
+    $data = array();
+
+    $users = id(new PhabricatorUser())->loadAll();
+
+    $data = array();
+    foreach ($users as $user) {
+      $data[] = array(
+        $user->getUsername().' ('.$user->getRealName().')',
+        '/p/'.$user->getUsername(),
+        $user->getPHID(),
+      );
+    }
+
+    return id(new AphrontAjaxResponse())
+      ->setContent($data);
+  }
+
+}

src/applications/typeahead/controller/common/__init__.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * This file is automatically generated. Lint this module to rebuild it.
+ * @generated
+ */
+
+
+
+phutil_require_module('phabricator', 'aphront/response/ajax');
+phutil_require_module('phabricator', 'applications/people/storage/user');
+phutil_require_module('phabricator', 'applications/typeahead/controller/base');
+
+phutil_require_module('phutil', 'utils');
+
+
+phutil_require_source('PhabricatorTypeaheadCommonDatasourceController.php');

src/view/form/control/tokenizer/AphrontFormTokenizerControl.php

@@ -0,0 +1,106 @@
+<?php
+
+/*
+ * Copyright 2011 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class AphrontFormTokenizerControl extends AphrontFormControl {
+
+  private $datasource;
+
+  public function setDatasource($datasource) {
+    $this->datasource = $datasource;
+    return $this;
+  }
+
+  protected function getCustomControlClass() {
+    return 'aphront-form-control-tokenizer';
+  }
+
+  protected function renderInput() {
+    require_celerity_resource('aphront-tokenizer-control-css');
+    require_celerity_resource('javelin-typeahead-dev');
+
+    $tokens = array();
+    $values = nonempty($this->getValue(), array());
+    foreach ($values as $key => $value) {
+      $tokens[] = $this->renderToken($key, $value);
+    }
+
+    $name = $this->getName();
+
+    $input = javelin_render_tag(
+      'input',
+      array(
+        'mustcapture' => true,
+        'name'        => $name,
+        'class'       => 'jx-tokenizer-input',
+        'sigil'       => 'tokenizer',
+        'style'       => 'width: 0px;',
+        'disabled'    => 'disabled',
+        'type'        => 'text',
+      ));
+
+    $id = celerity_generate_unique_node_id();
+
+    Javelin::initBehavior('aphront-basic-tokenizer', array(
+      'id'    => $id,
+      'src'   => $this->datasource,
+      'value' => $values,
+    ));
+
+    return phutil_render_tag(
+      'div',
+      array(
+        'id' => $id,
+        'class' => 'jx-tokenizer-container',
+      ),
+      implode('', $tokens).
+      $input.
+      '<div style="clear: both;"></div>');
+
+    return phutil_render_tag(
+      'input',
+      array(
+        'type'      => 'text',
+        'name'      => $this->getName(),
+        'value'     => $this->getValue(),
+        'disabled'  => $this->getDisabled() ? 'disabled' : null,
+      ));
+  }
+
+  private function renderToken($key, $value) {
+    $input_name = $this->getName();
+    if ($input_name) {
+      $input_name .= '[]';
+    }
+    return phutil_render_tag(
+      'a',
+      array(
+        'class' => 'jx-tokenizer-token',
+      ),
+      phutil_escape_html($value).
+      phutil_render_tag(
+        'input',
+        array(
+          'type'  => 'hidden',
+          'name'  => $input_name,
+          'value' => $key,
+        )).
+      '<span class="jx-tokenizer-x-placeholder"></span>');
+  }
+
+
+}

src/view/form/control/tokenizer/__init__.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * This file is automatically generated. Lint this module to rebuild it.
+ * @generated
+ */
+
+
+
+phutil_require_module('phabricator', 'infratructure/celerity/api');
+phutil_require_module('phabricator', 'infratructure/javelin/api');
+phutil_require_module('phabricator', 'infratructure/javelin/markup');
+phutil_require_module('phabricator', 'view/form/control/base');
+
+phutil_require_module('phutil', 'markup');
+phutil_require_module('phutil', 'utils');
+
+
+phutil_require_source('AphrontFormTokenizerControl.php');

webroot/rsrc/css/aphront/tokenizer.css

@@ -0,0 +1,64 @@
+/**
+ * @provides aphront-tokenizer-control-css
+ * @requires aphront-typeahead-control-css
+ */
+
+div.jx-tokenizer {
+  background: transparent;
+  position:   relative;
+  display:    block;
+  width:      100%;
+}
+
+div.jx-tokenizer-container {
+  background: #fff;
+  border: 1px solid #96A6C5;
+  position: relative;
+}
+
+var.jx-tokenizer-metrics {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+}
+
+input.jx-tokenizer-input {
+  border: 1px solid transparent;
+  border-width: 1px 0px;
+  padding: 4px 4px 4px 3px;
+  outline: none;
+  float: left;
+}
+
+span.jx-tokenizer-x-placeholder {
+  padding: 0 2px;
+}
+
+a.jx-tokenizer-token {
+  padding: 1px 0 1px 4px;
+  border:  1px solid #a4bdec;
+  margin: 3px 2px 0 4px;
+  background: #dee7f8;
+  float: left;
+  cursor: text;
+  font-size: 12px;
+}
+
+a.jx-tokenizer-token:hover {
+  text-decoration: none;
+  background: #bbcef1;
+  cursor: text;
+}
+
+a.jx-tokenizer-token a.jx-tokenizer-x {
+  color: #627aad;
+  font-family: Arial, sans-serif;
+  font-weight: normal;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+a.jx-tokenizer-token a.jx-tokenizer-x:hover {
+  text-decoration: none;
+}
+

webroot/rsrc/css/aphront/typeahead.css

@@ -0,0 +1,44 @@
+/**
+ * @provides aphront-typeahead-control-css
+ */
+
+div.jx-typeahead-hardpoint {
+  position: relative;
+  _zoom: 1; /* Some kind of IE6 fix? */
+}
+
+div.jx-typeahead-results {
+  z-index: 8;
+  position: absolute;
+  border-bottom: 1px solid #203b75;
+  padding: 0;
+  background: #ffffff;
+  width: 100%;
+}
+
+div.jx-typeahead-results a.jx-result {
+  color: #222;
+  display: block;
+  padding: .4em .5em .45em;
+  font-size: 11px;
+  border-width: 0px 1px 1px;
+  border-style: solid;
+  border-color: #dddddd #203b75;
+}
+
+div.jx-typeahead-results a.jx-result:hover,
+div.jx-typeahead-results a.focused {
+  display: block;
+  background: #3b5998;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+table.jx-typeahead button {
+  margin-left: 3px;
+}
+
+table.jx-typeahead input {
+  font-size: 13px;
+  padding: 2px;
+}

webroot/rsrc/js/application/core/behavior-tokenizer.js

@@ -0,0 +1,27 @@
+/**
+ * @provides javelin-behavior-aphront-basic-tokenizer
+ */
+
+JX.behavior('aphront-basic-tokenizer', function(config) {
+  var root = JX.$(config.id);
+
+  var datasource = new JX.TypeaheadPreloadedSource(config.src);
+
+  var typeahead = new JX.Typeahead(
+    root,
+    JX.DOM.find(root, 'input', 'tokenizer'));
+  typeahead.setDatasource(datasource);
+
+  var tokenizer = new JX.Tokenizer(root);
+  tokenizer.setTypeahead(typeahead);
+
+  if (config.limit) {
+    tokenizer.setLimit(config.limit);
+  }
+
+  if (config.value) {
+    tokenizer.setInitialValue(config.value);
+  }
+
+  tokenizer.start();
+});