1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-29 18:22:41 +01:00

Add a class to the Tokenizer container while it is focused

Summary: For some evil design purpose.

Test Plan: Focused, blurred tokenizers.

Reviewers: chad

Reviewed By: chad

CC: aran

Differential Revision: https://secure.phabricator.com/D5780
This commit is contained in:
epriestley 2013-04-25 08:51:27 -07:00
parent 1e2f01efc2
commit 897274eed6
3 changed files with 85 additions and 63 deletions

View file

@ -858,7 +858,7 @@ celerity_register_resource_map(array(
), ),
'aphront-tokenizer-control-css' => 'aphront-tokenizer-control-css' =>
array( array(
'uri' => '/res/207105f0/rsrc/css/aphront/tokenizer.css', 'uri' => '/res/6e14867e/rsrc/css/aphront/tokenizer.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -2525,7 +2525,7 @@ celerity_register_resource_map(array(
), ),
'javelin-tokenizer' => 'javelin-tokenizer' =>
array( array(
'uri' => '/res/731a958c/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js', 'uri' => '/res/8bccdb9e/rsrc/externals/javelin/lib/control/tokenizer/Tokenizer.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
@ -3961,7 +3961,7 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'fbb09f9f' => 'dbf66141' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
@ -4003,7 +4003,7 @@ celerity_register_resource_map(array(
34 => 'phabricator-object-item-list-view-css', 34 => 'phabricator-object-item-list-view-css',
35 => 'global-drag-and-drop-css', 35 => 'global-drag-and-drop-css',
), ),
'uri' => '/res/pkg/fbb09f9f/core.pkg.css', 'uri' => '/res/pkg/dbf66141/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'26980a1c' => '26980a1c' =>
@ -4135,7 +4135,7 @@ celerity_register_resource_map(array(
'uri' => '/res/pkg/f96657b8/diffusion.pkg.js', 'uri' => '/res/pkg/f96657b8/diffusion.pkg.js',
'type' => 'js', 'type' => 'js',
), ),
'41f3916d' => 'c9168ae3' =>
array( array(
'name' => 'javelin.pkg.js', 'name' => 'javelin.pkg.js',
'symbols' => 'symbols' =>
@ -4160,7 +4160,7 @@ celerity_register_resource_map(array(
17 => 'javelin-typeahead-ondemand-source', 17 => 'javelin-typeahead-ondemand-source',
18 => 'javelin-tokenizer', 18 => 'javelin-tokenizer',
), ),
'uri' => '/res/pkg/41f3916d/javelin.pkg.js', 'uri' => '/res/pkg/c9168ae3/javelin.pkg.js',
'type' => 'js', 'type' => 'js',
), ),
'6b1fccc6' => '6b1fccc6' =>
@ -4194,16 +4194,16 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => '6b1fccc6', 'aphront-attached-file-view-css' => '6b1fccc6',
'aphront-dialog-view-css' => 'fbb09f9f', 'aphront-dialog-view-css' => 'dbf66141',
'aphront-error-view-css' => 'fbb09f9f', 'aphront-error-view-css' => 'dbf66141',
'aphront-form-view-css' => 'fbb09f9f', 'aphront-form-view-css' => 'dbf66141',
'aphront-list-filter-view-css' => 'fbb09f9f', 'aphront-list-filter-view-css' => 'dbf66141',
'aphront-pager-view-css' => 'fbb09f9f', 'aphront-pager-view-css' => 'dbf66141',
'aphront-panel-view-css' => 'fbb09f9f', 'aphront-panel-view-css' => 'dbf66141',
'aphront-table-view-css' => 'fbb09f9f', 'aphront-table-view-css' => 'dbf66141',
'aphront-tokenizer-control-css' => 'fbb09f9f', 'aphront-tokenizer-control-css' => 'dbf66141',
'aphront-tooltip-css' => 'fbb09f9f', 'aphront-tooltip-css' => 'dbf66141',
'aphront-typeahead-control-css' => 'fbb09f9f', 'aphront-typeahead-control-css' => 'dbf66141',
'differential-changeset-view-css' => '8aaacd1b', 'differential-changeset-view-css' => '8aaacd1b',
'differential-core-view-css' => '8aaacd1b', 'differential-core-view-css' => '8aaacd1b',
'differential-inline-comment-editor' => '27c55b30', 'differential-inline-comment-editor' => '27c55b30',
@ -4217,10 +4217,10 @@ celerity_register_resource_map(array(
'differential-table-of-contents-css' => '8aaacd1b', 'differential-table-of-contents-css' => '8aaacd1b',
'diffusion-commit-view-css' => 'c8ce2d88', 'diffusion-commit-view-css' => 'c8ce2d88',
'diffusion-icons-css' => 'c8ce2d88', 'diffusion-icons-css' => 'c8ce2d88',
'global-drag-and-drop-css' => 'fbb09f9f', 'global-drag-and-drop-css' => 'dbf66141',
'inline-comment-summary-css' => '8aaacd1b', 'inline-comment-summary-css' => '8aaacd1b',
'javelin-aphlict' => '26980a1c', 'javelin-aphlict' => '26980a1c',
'javelin-behavior' => '41f3916d', 'javelin-behavior' => 'c9168ae3',
'javelin-behavior-aphlict-dropdown' => '26980a1c', 'javelin-behavior-aphlict-dropdown' => '26980a1c',
'javelin-behavior-aphlict-listen' => '26980a1c', 'javelin-behavior-aphlict-listen' => '26980a1c',
'javelin-behavior-aphront-basic-tokenizer' => '26980a1c', 'javelin-behavior-aphront-basic-tokenizer' => '26980a1c',
@ -4271,66 +4271,66 @@ celerity_register_resource_map(array(
'javelin-behavior-repository-crossreference' => '27c55b30', 'javelin-behavior-repository-crossreference' => '27c55b30',
'javelin-behavior-toggle-class' => '26980a1c', 'javelin-behavior-toggle-class' => '26980a1c',
'javelin-behavior-workflow' => '26980a1c', 'javelin-behavior-workflow' => '26980a1c',
'javelin-dom' => '41f3916d', 'javelin-dom' => 'c9168ae3',
'javelin-event' => '41f3916d', 'javelin-event' => 'c9168ae3',
'javelin-install' => '41f3916d', 'javelin-install' => 'c9168ae3',
'javelin-json' => '41f3916d', 'javelin-json' => 'c9168ae3',
'javelin-mask' => '41f3916d', 'javelin-mask' => 'c9168ae3',
'javelin-request' => '41f3916d', 'javelin-request' => 'c9168ae3',
'javelin-resource' => '41f3916d', 'javelin-resource' => 'c9168ae3',
'javelin-stratcom' => '41f3916d', 'javelin-stratcom' => 'c9168ae3',
'javelin-tokenizer' => '41f3916d', 'javelin-tokenizer' => 'c9168ae3',
'javelin-typeahead' => '41f3916d', 'javelin-typeahead' => 'c9168ae3',
'javelin-typeahead-normalizer' => '41f3916d', 'javelin-typeahead-normalizer' => 'c9168ae3',
'javelin-typeahead-ondemand-source' => '41f3916d', 'javelin-typeahead-ondemand-source' => 'c9168ae3',
'javelin-typeahead-preloaded-source' => '41f3916d', 'javelin-typeahead-preloaded-source' => 'c9168ae3',
'javelin-typeahead-source' => '41f3916d', 'javelin-typeahead-source' => 'c9168ae3',
'javelin-uri' => '41f3916d', 'javelin-uri' => 'c9168ae3',
'javelin-util' => '41f3916d', 'javelin-util' => 'c9168ae3',
'javelin-vector' => '41f3916d', 'javelin-vector' => 'c9168ae3',
'javelin-workflow' => '41f3916d', 'javelin-workflow' => 'c9168ae3',
'lightbox-attachment-css' => 'fbb09f9f', 'lightbox-attachment-css' => 'dbf66141',
'maniphest-task-summary-css' => '6b1fccc6', 'maniphest-task-summary-css' => '6b1fccc6',
'maniphest-transaction-detail-css' => '6b1fccc6', 'maniphest-transaction-detail-css' => '6b1fccc6',
'phabricator-busy' => '26980a1c', 'phabricator-busy' => '26980a1c',
'phabricator-content-source-view-css' => '8aaacd1b', 'phabricator-content-source-view-css' => '8aaacd1b',
'phabricator-core-buttons-css' => 'fbb09f9f', 'phabricator-core-buttons-css' => 'dbf66141',
'phabricator-core-css' => 'fbb09f9f', 'phabricator-core-css' => 'dbf66141',
'phabricator-crumbs-view-css' => 'fbb09f9f', 'phabricator-crumbs-view-css' => 'dbf66141',
'phabricator-directory-css' => 'fbb09f9f', 'phabricator-directory-css' => 'dbf66141',
'phabricator-drag-and-drop-file-upload' => '27c55b30', 'phabricator-drag-and-drop-file-upload' => '27c55b30',
'phabricator-dropdown-menu' => '26980a1c', 'phabricator-dropdown-menu' => '26980a1c',
'phabricator-file-upload' => '26980a1c', 'phabricator-file-upload' => '26980a1c',
'phabricator-filetree-view-css' => 'fbb09f9f', 'phabricator-filetree-view-css' => 'dbf66141',
'phabricator-flag-css' => 'fbb09f9f', 'phabricator-flag-css' => 'dbf66141',
'phabricator-form-view-css' => 'fbb09f9f', 'phabricator-form-view-css' => 'dbf66141',
'phabricator-header-view-css' => 'fbb09f9f', 'phabricator-header-view-css' => 'dbf66141',
'phabricator-jump-nav' => 'fbb09f9f', 'phabricator-jump-nav' => 'dbf66141',
'phabricator-keyboard-shortcut' => '26980a1c', 'phabricator-keyboard-shortcut' => '26980a1c',
'phabricator-keyboard-shortcut-manager' => '26980a1c', 'phabricator-keyboard-shortcut-manager' => '26980a1c',
'phabricator-main-menu-view' => 'fbb09f9f', 'phabricator-main-menu-view' => 'dbf66141',
'phabricator-menu-item' => '26980a1c', 'phabricator-menu-item' => '26980a1c',
'phabricator-nav-view-css' => 'fbb09f9f', 'phabricator-nav-view-css' => 'dbf66141',
'phabricator-notification' => '26980a1c', 'phabricator-notification' => '26980a1c',
'phabricator-notification-css' => 'fbb09f9f', 'phabricator-notification-css' => 'dbf66141',
'phabricator-notification-menu-css' => 'fbb09f9f', 'phabricator-notification-menu-css' => 'dbf66141',
'phabricator-object-item-list-view-css' => 'fbb09f9f', 'phabricator-object-item-list-view-css' => 'dbf66141',
'phabricator-object-selector-css' => '8aaacd1b', 'phabricator-object-selector-css' => '8aaacd1b',
'phabricator-phtize' => '26980a1c', 'phabricator-phtize' => '26980a1c',
'phabricator-prefab' => '26980a1c', 'phabricator-prefab' => '26980a1c',
'phabricator-project-tag-css' => '6b1fccc6', 'phabricator-project-tag-css' => '6b1fccc6',
'phabricator-remarkup-css' => 'fbb09f9f', 'phabricator-remarkup-css' => 'dbf66141',
'phabricator-shaped-request' => '27c55b30', 'phabricator-shaped-request' => '27c55b30',
'phabricator-side-menu-view-css' => 'fbb09f9f', 'phabricator-side-menu-view-css' => 'dbf66141',
'phabricator-standard-page-view' => 'fbb09f9f', 'phabricator-standard-page-view' => 'dbf66141',
'phabricator-textareautils' => '26980a1c', 'phabricator-textareautils' => '26980a1c',
'phabricator-tooltip' => '26980a1c', 'phabricator-tooltip' => '26980a1c',
'phabricator-transaction-view-css' => 'fbb09f9f', 'phabricator-transaction-view-css' => 'dbf66141',
'phabricator-zindex-css' => 'fbb09f9f', 'phabricator-zindex-css' => 'dbf66141',
'sprite-apps-large-css' => 'fbb09f9f', 'sprite-apps-large-css' => 'dbf66141',
'sprite-gradient-css' => 'fbb09f9f', 'sprite-gradient-css' => 'dbf66141',
'sprite-icon-css' => 'fbb09f9f', 'sprite-icon-css' => 'dbf66141',
'sprite-menu-css' => 'fbb09f9f', 'sprite-menu-css' => 'dbf66141',
'syntax-highlighting-css' => 'fbb09f9f', 'syntax-highlighting-css' => 'dbf66141',
), ),
)); ));

View file

@ -20,6 +20,10 @@ div.jx-tokenizer-container {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
} }
div.jx-tokenizer-container-focused {
border-color: #0099ff;
}
var.jx-tokenizer-metrics { var.jx-tokenizer-metrics {
position: absolute; position: absolute;
left: 20px; left: 20px;

View file

@ -28,6 +28,9 @@
* If you do this correctly, the input should suggest items and enter them as * If you do this correctly, the input should suggest items and enter them as
* tokens as the user types. * tokens as the user types.
* *
* When the tokenizer is focused, the CSS class `jx-tokenizer-container-focused`
* is added to the container node.
*
* @group control * @group control
*/ */
JX.install('Tokenizer', { JX.install('Tokenizer', {
@ -205,8 +208,7 @@ JX.install('Tokenizer', {
} else if (e.getType() == 'keydown') { } else if (e.getType() == 'keydown') {
this._onkeydown(e); this._onkeydown(e);
} else if (e.getType() == 'blur') { } else if (e.getType() == 'blur') {
this._focus.value = ''; this._didblur();
this._redraw();
// Explicitly update the placeholder since we just wiped the field // Explicitly update the placeholder since we just wiped the field
// value. // value.
@ -378,7 +380,23 @@ JX.install('Tokenizer', {
focus : function() { focus : function() {
var focus = this._focus; var focus = this._focus;
JX.DOM.show(focus); JX.DOM.show(focus);
JX.DOM.alterClass(
this._containerNode,
'jx-tokenizer-container-focused',
true);
setTimeout(function() { JX.DOM.focus(focus); }, 0); setTimeout(function() { JX.DOM.focus(focus); }, 0);
},
_didblur: function() {
JX.DOM.alterClass(
this._containerNode,
'jx-tokenizer-container-focused',
false);
this._focus.value = '';
this._redraw();
} }
} }
}); });