Add a keybinding start helper

css/helios.css

@@ -239,4 +239,18 @@ a {
     color: white;
     font-weight: bold;
     text-shadow: 0 -1px 0 #666;
-}
+}
+
+#keybinding-start-helper {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    background: rgba(0,0,0, 0.6);
+    color: #fff;
+    width: 300px;
+    margin-left: -150px;
+    text-align: center;
+    padding: 50px 0;
+    font-size: 16px;
+    border-radius: 20px;
+}

js/Helios-KeyBindings.deploy.js

@@ -339,6 +339,17 @@ return smalltalk.withContext(function($ctx1) { 
return (32);
 messageSends: []}),
 smalltalk.HLKeyBinder);
 
+smalltalk.addMethod(
+"_activationKeyLabel",
+smalltalk.method({
+selector: "activationKeyLabel",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
return "ctrl + space";
+}, function($ctx1) {$ctx1.fill(self,"activationKeyLabel",{}, smalltalk.HLKeyBinder)})},
+messageSends: []}),
+smalltalk.HLKeyBinder);
+
 smalltalk.addMethod(
 "_applyBinding_",
 smalltalk.method({
@@ -517,17 +528,11 @@ smalltalk.method({
 selector: "helper",
 fn: function (){
 var self=this;
-return smalltalk.withContext(function($ctx1) { 
var $2,$1;
-$2=self["@helper"];
-if(($receiver = $2) == nil || $receiver == undefined){
-self["@helper"]=_st((smalltalk.HLKeyBinderHelper || HLKeyBinderHelper))._on_(self);
+return smalltalk.withContext(function($ctx1) { 
var $1;
 $1=self["@helper"];
-} else {
-$1=$2;
-};
 return $1;
 }, function($ctx1) {$ctx1.fill(self,"helper",{}, smalltalk.HLKeyBinder)})},
-messageSends: ["ifNil:", "on:"]}),
+messageSends: []}),
 smalltalk.HLKeyBinder);
 
 smalltalk.addMethod(
@@ -537,9 +542,11 @@ selector: "initialize",
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
smalltalk.Object.fn.prototype._initialize.apply(_st(self), []);
+self["@helper"]=_st((smalltalk.HLKeyBinderHelper || HLKeyBinderHelper))._on_(self);
+_st(self["@helper"])._renderStart();
 self["@active"]=false;
 return self}, function($ctx1) {$ctx1.fill(self,"initialize",{}, smalltalk.HLKeyBinder)})},
-messageSends: ["initialize"]}),
+messageSends: ["initialize", "on:", "renderStart"]}),
 smalltalk.HLKeyBinder);
 
 smalltalk.addMethod(
@@ -745,6 +752,26 @@ return self}, function($ctx1) {$ctx1.fill(self,"renderSelectionOn:",{html:html},
 messageSends: ["class:", "span", "with:", "ifNil:", "label", "selectedBinding"]}),
 smalltalk.HLKeyBinderHelper);
 
+smalltalk.addMethod(
+"_renderStart",
+smalltalk.method({
+selector: "renderStart",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+_st((function(html){
+return smalltalk.withContext(function($ctx2) {
$1=_st(html)._div();
+_st($1)._id_("keybinding-start-helper");
+$2=_st($1)._with_(_st(_st("Press ").__comma(_st(_st(self)._keyBinder())._activationKeyLabel())).__comma(" to start"));
+return $2;
+}, function($ctx2) {$ctx2.fillBlock({html:html},$ctx1)})}))._appendToJQuery_(_st("body")._asJQuery());
+_st((function(){
+return smalltalk.withContext(function($ctx2) {
return _st(_st(window)._jQuery_("#keybinding-start-helper"))._fadeOut_((1000));
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}))._valueWithTimeout_((2000));
+return self}, function($ctx1) {$ctx1.fill(self,"renderStart",{}, smalltalk.HLKeyBinderHelper)})},
+messageSends: ["appendToJQuery:", "asJQuery", "id:", "div", "with:", ",", "activationKeyLabel", "keyBinder", "valueWithTimeout:", "fadeOut:", "jQuery:"]}),
+smalltalk.HLKeyBinderHelper);
+
 smalltalk.addMethod(
 "_selectedBinding",
 smalltalk.method({

js/Helios-KeyBindings.js

@@ -469,6 +469,22 @@ referencedClasses: []
 }),
 smalltalk.HLKeyBinder);
 
+smalltalk.addMethod(
+"_activationKeyLabel",
+smalltalk.method({
+selector: "activationKeyLabel",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
return "ctrl + space";
+}, function($ctx1) {$ctx1.fill(self,"activationKeyLabel",{}, smalltalk.HLKeyBinder)})},
+args: [],
+source: "activationKeyLabel\x0a\x09^ 'ctrl + space'",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.HLKeyBinder);
+
 smalltalk.addMethod(
 "_applyBinding_",
 smalltalk.method({
@@ -703,20 +719,14 @@ selector: "helper",
 category: 'accessing',
 fn: function (){
 var self=this;
-return smalltalk.withContext(function($ctx1) { 
var $2,$1;
-$2=self["@helper"];
-if(($receiver = $2) == nil || $receiver == undefined){
-self["@helper"]=_st((smalltalk.HLKeyBinderHelper || HLKeyBinderHelper))._on_(self);
+return smalltalk.withContext(function($ctx1) { 
var $1;
 $1=self["@helper"];
-} else {
-$1=$2;
-};
 return $1;
 }, function($ctx1) {$ctx1.fill(self,"helper",{}, smalltalk.HLKeyBinder)})},
 args: [],
-source: "helper\x0a\x09^ helper ifNil: [ helper := HLKeyBinderHelper on: self ]",
-messageSends: ["ifNil:", "on:"],
-referencedClasses: ["HLKeyBinderHelper"]
+source: "helper\x0a\x09^ helper",
+messageSends: [],
+referencedClasses: []
 }),
 smalltalk.HLKeyBinder);
 
@@ -728,12 +738,14 @@ category: 'initialization',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
smalltalk.Object.fn.prototype._initialize.apply(_st(self), []);
+self["@helper"]=_st((smalltalk.HLKeyBinderHelper || HLKeyBinderHelper))._on_(self);
+_st(self["@helper"])._renderStart();
 self["@active"]=false;
 return self}, function($ctx1) {$ctx1.fill(self,"initialize",{}, smalltalk.HLKeyBinder)})},
 args: [],
-source: "initialize\x0a\x09super initialize.\x0a    active := false",
-messageSends: ["initialize"],
-referencedClasses: []
+source: "initialize\x0a\x09super initialize.\x0a\x09helper := HLKeyBinderHelper on: self.\x0a\x09helper renderStart.\x0a    active := false",
+messageSends: ["initialize", "on:", "renderStart"],
+referencedClasses: ["HLKeyBinderHelper"]
 }),
 smalltalk.HLKeyBinder);
 
@@ -1005,6 +1017,31 @@ referencedClasses: []
 }),
 smalltalk.HLKeyBinderHelper);
 
+smalltalk.addMethod(
+"_renderStart",
+smalltalk.method({
+selector: "renderStart",
+category: 'rendering',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+_st((function(html){
+return smalltalk.withContext(function($ctx2) {
$1=_st(html)._div();
+_st($1)._id_("keybinding-start-helper");
+$2=_st($1)._with_(_st(_st("Press ").__comma(_st(_st(self)._keyBinder())._activationKeyLabel())).__comma(" to start"));
+return $2;
+}, function($ctx2) {$ctx2.fillBlock({html:html},$ctx1)})}))._appendToJQuery_(_st("body")._asJQuery());
+_st((function(){
+return smalltalk.withContext(function($ctx2) {
return _st(_st(window)._jQuery_("#keybinding-start-helper"))._fadeOut_((1000));
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}))._valueWithTimeout_((2000));
+return self}, function($ctx1) {$ctx1.fill(self,"renderStart",{}, smalltalk.HLKeyBinderHelper)})},
+args: [],
+source: "renderStart\x0a\x09[ :html |\x0a\x09\x09html div \x0a\x09\x09\x09id: 'keybinding-start-helper';\x0a\x09\x09\x09with: 'Press ', self keyBinder activationKeyLabel, ' to start' ] appendToJQuery: 'body' asJQuery.\x0a\x09\x0a\x09[ (window jQuery: '#keybinding-start-helper') fadeOut: 1000 ] \x0a\x09\x09valueWithTimeout: 2000",
+messageSends: ["appendToJQuery:", "asJQuery", "id:", "div", "with:", ",", "activationKeyLabel", "keyBinder", "valueWithTimeout:", "fadeOut:", "jQuery:"],
+referencedClasses: []
+}),
+smalltalk.HLKeyBinderHelper);
+
 smalltalk.addMethod(
 "_selectedBinding",
 smalltalk.method({

st/Helios-KeyBindings.st

@@ -152,6 +152,10 @@ activationKey
 	^ 32
 !
 
+activationKeyLabel
+	^ 'ctrl + space'
+!
+
 bindings
 	^ bindings ifNil: [ bindings := HLBindingGroup new ]
 !
@@ -162,7 +166,7 @@ escapeKey
 !
 
 helper
-	^ helper ifNil: [ helper := HLKeyBinderHelper on: self ]
+	^ helper
 !
 
 selectedBinding
@@ -249,6 +253,8 @@ setupEvents
 
 initialize
 	super initialize.
+	helper := HLKeyBinderHelper on: self.
+	helper renderStart.
     active := false
 ! !
 
@@ -329,6 +335,16 @@ renderSelectionOn: html
 		html span 
         	class: 'selected'; 
             with: (self selectedBinding label ifNil: [ 'Action' ])
+!
+
+renderStart
+	[ :html |
+		html div 
+			id: 'keybinding-start-helper';
+			with: 'Press ', self keyBinder activationKeyLabel, ' to start' ] appendToJQuery: 'body' asJQuery.
+	
+	[ (window jQuery: '#keybinding-start-helper') fadeOut: 1000 ] 
+		valueWithTimeout: 2000
 ! !
 
 !HLKeyBinderHelper class methodsFor: 'instance creation'!