'<div class="{{CSS.LIBRARY}}">' +
'<ul>' +
'{{#each library}}' +
- '<li><a href="#{{elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}{{@key}}">{{get_string groupname ../component}}</a></li>' +
+ '<li><a href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
+ '{{get_string groupname ../component}}' +
+ '</a></li>' +
'{{/each}}' +
'</ul>' +
- '<div>' +
+ '<div class="{{CSS.LIBRARY_GROUPS}}">' +
'{{#each library}}' +
- '<div id="{{elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}{{@key}}">' +
- '{{#split "\n" elements}}' +
- '<button data-tex="{{this}}" title="{{this}}">{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}</button>' +
- '{{/split}}' +
+ '<div id="{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}">' +
+ '<div role="toolbar">' +
+ '{{#split "\n" elements}}' +
- '<button tabindex="-1" data-tex="{{this}}" aria-label="{{this}}" title="{{this}}">$${{this}}$$</button>' +
++ '<button tabindex="-1" data-tex="{{this}}" aria-label="{{this}}" title="{{this}}">' +
++ '{{../../DELIMITERS.START}}{{this}}{{../../DELIMITERS.END}}' +
++ '</button>' +
+ '{{/split}}' +
+ '</div>' +
'</div>' +
'{{/each}}' +
'</div>' +
*/
_content: null,
+ /**
+ * The source equation we are editing in the text.
+ *
+ * @property _sourceEquation
+ * @type String
+ * @private
+ */
+ _sourceEquation: '',
+
+ /**
+ * A reference to the tab focus set on each group.
+ *
+ * The keys are the IDs of the group, the value is the Node on which the focus is set.
+ *
+ * @property _groupFocus
+ * @type Object
+ * @private
+ */
+ _groupFocus: null,
+
initializer: function() {
+ this._groupFocus = {};
++
+ // If there is a tex filter active - enable this button.
if (this.get('texfilteractive')) {
// Add the button to the toolbar.
this.addButton({
CSS: CSS
}));
+ // Sets the default focus.
+ this._content.all(SELECTORS.LIBRARY_GROUP).each(function(group) {
+ // The first button gets the focus.
+ this._setGroupTabFocus(group, group.one('button'));
+ // Sometimes the filter adds an anchor in the button, no tabindex on that.
+ group.all('button a').setAttribute('tabindex', '-1');
+ }, this);
+
+ // Keyboard navigation in groups.
+ this._content.delegate('key', this._groupNavigation, 'down:37,39', SELECTORS.LIBRARY_BUTTON, this);
+
this._content.one(SELECTORS.SUBMIT).on('click', this._setEquation, this);
- this._content.one(SELECTORS.EQUATION_TEXT).on('valuechange', this._updatePreview, this);
- this._content.one(SELECTORS.EQUATION_TEXT).on('mouseup', this._updatePreview, this);
- this._content.one(SELECTORS.EQUATION_TEXT).on('keyup', this._updatePreview, this);
+ this._content.one(SELECTORS.EQUATION_TEXT).on('valuechange', this._throttle(this._updatePreview, 500), this);
+ this._content.one(SELECTORS.EQUATION_TEXT).on('mouseup', this._throttle(this._updatePreview, 500), this);
+ this._content.one(SELECTORS.EQUATION_TEXT).on('keyup', this._throttle(this._updatePreview, 500), this);
this._content.delegate('click', this._selectLibraryItem, SELECTORS.LIBRARY_BUTTON, this);
return this._content;
