Permalink
Browse files

Working on interactive actions

1 parent a0d348a commit e2b272835cf995e9f4fc55ed67c598644b239e0e @sergeche sergeche committed Apr 29, 2014
Showing with 155 additions and 4 deletions.
  1. +17 −3 main.js
  2. +1 −1 preferences.js
  3. +105 −0 prompt.js
  4. +6 −0 ui/panel.html
  5. 0 { → ui}/preferences.html
  6. +26 −0 ui/style.css
View
@@ -1,8 +1,9 @@
define(function(require, exports, module) {
var fs = require('./brackets-fs');
var preferences = require('./preferences');
- var editor = require('./editor');
- var path = require('./path');
+ var editor = require('./editor');
+ var path = require('./path');
+ var prompt = require('./prompt');
var emmet = require('emmet/emmet');
var resources = require('emmet/assets/resources');
@@ -17,6 +18,8 @@ define(function(require, exports, module) {
var EditorManager = brackets.getModule('editor/EditorManager');
var Dialogs = brackets.getModule('widgets/Dialogs');
var FileSystem = brackets.getModule('filesystem/FileSystem');
+ var ExtensionUtils = brackets.getModule('utils/ExtensionUtils');
+ var AppInit = brackets.getModule('utils/AppInit');
var skippedActions = ['update_image_size', 'encode_decode_data_url'];
// actions that should be performed in single selection mode
@@ -189,6 +192,14 @@ define(function(require, exports, module) {
menu.addMenuDivider();
+ // debug panel
+ CommandManager.register('Show Emmet panel', 'io.emmet.show_panel', function() {
+ prompt.show({
+ editor: EditorManager.getFocusedEditor()
+ });
+ });
+ KeyBindingManager.addBinding('io.emmet.show_panel', 'Alt-F1');
+
// Allow enable and disable Emmet
var cmdEnable = CommandManager.register('Enable Emmet', 'io.emmet.enabled', function() {
this.setChecked(!this.getChecked());
@@ -210,5 +221,8 @@ define(function(require, exports, module) {
menu.addMenuItem(cmdPreferences);
}
- loadExtensions(init);
+ AppInit.appReady(function() {
+ ExtensionUtils.loadStyleSheet(module, 'ui/style.css');
+ loadExtensions(init);
+ });
});
View
@@ -5,7 +5,7 @@ define(function (require, exports, module) {
PreferencesManager = brackets.getModule("preferences/PreferencesManager"),
ProjectManager = brackets.getModule("project/ProjectManager"),
Strings = brackets.getModule("strings"),
- PrefsTemplate = require("text!preferences.html");
+ PrefsTemplate = require("text!ui/preferences.html");
var preferenceKeyId = 'io.emmet.preferences';
View
@@ -0,0 +1,105 @@
+/**
+ * Interactive prompt: create panel at the bottom of the editor
+ * and provies basic features for performing interactive editor actions
+ */
+define(function(require, exports, module) {
+ var panelHtml = require('text!ui/panel.html');
+
+ var PanelManager = brackets.getModule('view/PanelManager');
+ var ExtensionUtils = brackets.getModule('utils/ExtensionUtils');
+ var AppInit = brackets.getModule('utils/AppInit');
+
+ var ENTER_KEY = 13;
+ var ESC_KEY = 27;
+ var $panel = $(panelHtml);
+ var panel = null;
+
+ function hidePanel() {
+ $panel.off('.emmet');
+ panel.hide();
+ }
+
+ function noop() {}
+
+ function method(delegate, method) {
+ if (delegate && delegate[method]) {
+ return delegate[method].bind(delegate);
+ }
+
+ return noop;
+ }
+
+ AppInit.appReady(function() {
+ panel = PanelManager.createBottomPanel('io.emmet.interactive-prompt', $panel);
+
+ // register keyboard handlers
+ $panel.find('.emmet-prompt__input')
+ .on('keyup', function(evt) {
+ if (evt.keyCode === ENTER_KEY) {
+ $panel.triggerHandler('confirm.emmet', [this.value]);
+ hidePanel();
+ return evt.preventDefault();
+ }
+
+ if (evt.keyCode === ESC_KEY) {
+ $panel.triggerHandler('cancel.emmet');
+ hidePanel();
+ return evt.preventDefault();
+ }
+ })
+ .on('input', function() {
+ $panel.triggerHandler('update.emmet', [this.value]);
+ });
+
+ });
+
+ return {
+ show: function(delegate) {
+ delegate = delegate || {};
+
+ this.hide();
+
+ var label = $panel.find('.emmet-prompt__label');
+ label.text(delegate.label || label.data('default'));
+
+ var input = $panel.find('.emmet-prompt__input');
+ if (delegate.placeholder) {
+ input.val(delegate.placeholder);
+ }
+
+ var update = method(delegate, 'update');
+ var updated = false;
+
+ panel.show();
+
+ $panel
+ .on('update.emmet', function(evt, value) {
+ console.log('update', value);
+ updated = true;
+ delegate.editor.undo();
+ delegate.editor.document.batchOperation(function() {
+ update(value);
+ });
+ })
+ .on('confirm.emmet', function(evt, value) {
+ console.log('confirm', evt);
+ })
+ .on('cancel.emmet', function(evt) {
+ console.log('cancel', evt);
+ if (updated) {
+ delegate.editor.undo();
+ }
+ });
+
+ input.focus();
+
+ method(delegate, 'show')();
+
+ if (input.val()) {
+ update(input.val());
+ }
+ },
+
+ hide: hidePanel
+ };
+});
View
@@ -0,0 +1,6 @@
+<div id="emmet-interactive-prompt">
+ <div class="emmet-prompt">
+ <label class="emmet-prompt__label" data-default="Enter Abbreviation:"></label>
+ <input class="emmet-prompt__input" type="text" value="" />
+ </div>
+</div>
File renamed without changes.
View
@@ -0,0 +1,26 @@
+.emmet-prompt {
+ display: -webkit-flex;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+.emmet-prompt .emmet-prompt__label {
+ display: inline-block;
+ white-space: nowrap;
+ min-width: -webkit-min-content;
+ min-width: min-content;
+ padding-right: 10px;
+ margin: 0;
+}
+
+.emmet-prompt .emmet-prompt__input {
+ flex: 1 100%;
+ margin: 0;
+}
+
+.emmet-prompt .vert-resizer {
+ display: none;
+}

0 comments on commit e2b2728

Please sign in to comment.