diff --git a/src/js/widgets/kidoju.widgets.speechrecognizer.es6 b/src/js/widgets/kidoju.widgets.speechrecognizer.es6
index 6a2f7b540..288063bf2 100644
--- a/src/js/widgets/kidoju.widgets.speechrecognizer.es6
+++ b/src/js/widgets/kidoju.widgets.speechrecognizer.es6
@@ -5,13 +5,13 @@
import $ from 'jquery';
import 'kendo.binder';
-import 'kendo.tooltip'; // TODO: replace tooltip with notification
+import 'kendo.tooltip';
+// TODO import assert from '../window.assert.es6';
+import CONSTANTS from '../window.constants.es6';
+// TODO: import Logger from '../window.logger.es6';
-const { kendo } = window;
-const { ui } = kendo;
-const UNDEFINED = 'undefined'; // TODO use constants
-const CHANGE = 'change';
-const CLICK = 'click';
+const { destroy } = window.kendo;
+const { plugin, Widget } = window.kendo.ui;
const NS = '.kendoSpeechRecognizer';
const SpeechRecognition =
@@ -36,59 +36,46 @@ const MIC_ERROR =
* @see https://w3c.github.io/speech-api/speechapi.html#examples
* @see https://www.google.com/intl/en/chrome/demos/speech.html
*/
-class SpeechRecognizer extends ui.Widget {
+const SpeechRecognizer = Widget.extend({
/**
* SpeechRecognizer constructor
* @param element
* @param options
*/
- constructor(element, options) {
- super(element, Object.assign({}, SpeechRecognizer.options, options));
- // logger.debug({ method: 'init', message: 'widget initialized' });
- this.events = SpeechRecognizer.events;
+ init(element, options) {
+ Widget.fn.init.call(this, element, options);
this.wrapper = this.element;
this._initSpeechRecognition();
this._render();
this.enable(this.options.enable);
// this.value(this.options.value);
- }
+ },
/**
- * fn static getter
+ * Widget events
*/
- static get fn() {
- return this;
- }
+ events: [CONSTANTS.CHANGE],
/**
- * Default events
+ * Widget options
*/
- static get events() {
- return [CHANGE];
- }
-
- /**
- * Default options
- */
- static get options() {
- return Object.assign({}, this.prototype.options, {
- name: 'SpeechRecognizer',
- enable: true,
- locale: 'en-US',
- messages: {
- alt: 'Microphone',
- denied: 'Denied',
- noEvent: 'No event triggered',
- noMicrophone: 'No microphone',
- noSpeech: 'No speech',
- speakNow: 'Speak now!',
- unknown: 'Unknown error',
- upgrade: 'Upgrade your browser'
- },
- multiline: true,
- value: ''
- });
- }
+ options: {
+ name: 'SpeechRecognizer',
+ enable: true,
+ locale: 'en-US',
+ messages: {
+ alt: 'Microphone',
+ denied: 'Denied',
+ noEvent: 'No event triggered',
+ noMicrophone: 'No microphone',
+ noSpeech: 'No speech',
+ speakNow: 'Speak now!',
+ unknown: 'Unknown error',
+ upgrade: 'Upgrade your browser'
+ },
+ multiline: true,
+ value: ''
+ },
/**
* Value
@@ -97,7 +84,7 @@ class SpeechRecognizer extends ui.Widget {
*/
value() {
return this._value;
- }
+ },
/**
* Initialize speech recognition
@@ -117,7 +104,7 @@ class SpeechRecognizer extends ui.Widget {
} else {
// Microsoft Edge
}
- }
+ },
/**
* Render the widget
@@ -155,31 +142,31 @@ class SpeechRecognizer extends ui.Widget {
showOn: 'click'
})
.data('kendoTooltip');
- }
+ },
/**
* Enable/disable the widget
* @param enable
*/
enable(enable) {
- const isEnabled = $.type(enable) === UNDEFINED ? true : !!enable;
+ const isEnabled = $.type(enable) === CONSTANTS.UNDEFINED ? true : !!enable;
this.image.off(NS);
if ($.isFunction(this._refreshHandler)) {
- this.unbind(CHANGE, this._refreshHandler);
+ this.unbind(CONSTANTS.CHANGE, this._refreshHandler);
}
if (isEnabled) {
- this.image.on(CLICK + NS, this._onClick.bind(this));
+ this.image.on(CONSTANTS.CLICK + NS, this._onClick.bind(this));
this._refreshHandler = this.refresh.bind(this);
- this.bind(CHANGE, this._refreshHandler);
+ this.bind(CONSTANTS.CHANGE, this._refreshHandler);
}
- }
+ },
/**
* Refresh
*/
refresh() {
this.textarea.val(this._value || '');
- }
+ },
/**
* Display tooltip
@@ -188,7 +175,7 @@ class SpeechRecognizer extends ui.Widget {
showInfo(text) {
this.image.attr('title', text);
this.tooltip.show(this.image);
- }
+ },
/**
* Click event handler
@@ -217,7 +204,7 @@ class SpeechRecognizer extends ui.Widget {
// This is for Microsoft Edge and other browsers that do not implement SpeechRecognition
this._onError({ error: 'no-speech' });
}
- }
+ },
/**
* Start event handler
@@ -228,8 +215,8 @@ class SpeechRecognizer extends ui.Widget {
this.image.prop({ ariaPressed: true }).attr({ src: MIC_ANIMATED });
this.showInfo(this.options.messages.speakNow);
this._value = '';
- this.trigger(CHANGE);
- }
+ this.trigger(CONSTANTS.CHANGE);
+ },
/**
* Error event handler
@@ -257,7 +244,7 @@ class SpeechRecognizer extends ui.Widget {
this.showInfo(this.options.messages.unknown);
break;
}
- }
+ },
/**
* Result event handler
@@ -265,7 +252,7 @@ class SpeechRecognizer extends ui.Widget {
* @private
*/
_onResult(e) {
- if ($.type(e.results) === UNDEFINED) {
+ if ($.type(e.results) === CONSTANTS.UNDEFINED) {
this.speechRecognition.onend = null;
this.speechRecognition.stop();
this._errored = true;
@@ -276,8 +263,8 @@ class SpeechRecognizer extends ui.Widget {
for (let i = e.resultIndex; i < e.results.length; i++) {
this._value += e.results[i][0].transcript;
}
- this.trigger(CHANGE);
- }
+ this.trigger(CONSTANTS.CHANGE);
+ },
/**
* End event handler
@@ -290,15 +277,16 @@ class SpeechRecognizer extends ui.Widget {
return;
}
this.image.prop({ ariaPressed: false }).attr({ src: MIC_STATIC });
- }
+ },
/**
* Destroy
*/
destroy() {
- super.destroy();
+ Widget.fn.destroy.call(this);
+ destroy(this.element);
}
-}
+});
// Create a jQuery plugin, this calls SpeechRecognizer.fn.options.name
-ui.plugin(SpeechRecognizer);
+plugin(SpeechRecognizer);
diff --git a/src/js/widgets/kidoju.widgets.speechrecognizer.html b/src/js/widgets/kidoju.widgets.speechrecognizer.html
index b97f1e120..418e7e634 100644
--- a/src/js/widgets/kidoju.widgets.speechrecognizer.html
+++ b/src/js/widgets/kidoju.widgets.speechrecognizer.html
@@ -5,7 +5,7 @@
-
+