diff --git a/src/block_manager/view/CategoryView.js b/src/block_manager/view/CategoryView.js index e0aa27ec2..c086fa032 100644 --- a/src/block_manager/view/CategoryView.js +++ b/src/block_manager/view/CategoryView.js @@ -1,20 +1,20 @@ -import { template } from 'underscore'; -import Backbone from 'backbone'; +import { View } from 'backbone'; +import html from 'utils/html'; -export default Backbone.View.extend({ - template: template(` -
- - <%= label %> -
-
- `), - - events: {}, +export default class CategoryView extends View { + template({ pfx, label }) { + return html` +
+ + ${label} +
+
+ `; + } attributes() { return this.model.get('attributes'); - }, + } initialize(o = {}, config = {}) { this.config = config; @@ -26,33 +26,34 @@ export default Backbone.View.extend({ this.iconClass = `${pfx}caret-icon`; this.activeClass = `${pfx}open`; this.className = `${pfx}block-category`; + this.events = {}; this.events[`click .${pfx}title`] = 'toggle'; this.listenTo(this.model, 'change:open', this.updateVisibility); this.delegateEvents(); this.model.view = this; - }, + } updateVisibility() { if (this.model.get('open')) this.open(); else this.close(); - }, + } open() { this.$el.addClass(this.activeClass); this.getIconEl().className = `${this.iconClass} ${this.caretD}`; this.getBlocksEl().style.display = ''; - }, + } close() { this.$el.removeClass(this.activeClass); this.getIconEl().className = `${this.iconClass} ${this.caretR}`; this.getBlocksEl().style.display = 'none'; - }, + } toggle() { var model = this.model; model.set('open', !model.get('open')); - }, + } getIconEl() { if (!this.iconEl) { @@ -60,7 +61,7 @@ export default Backbone.View.extend({ } return this.iconEl; - }, + } getBlocksEl() { if (!this.blocksEl) { @@ -68,24 +69,21 @@ export default Backbone.View.extend({ } return this.blocksEl; - }, + } append(el) { this.getBlocksEl().appendChild(el); - }, + } render() { - const { em, el, $el, model } = this; + const { em, el, $el, model, pfx } = this; const label = em.t(`blockManager.categories.${model.id}`) || model.get('label'); - el.innerHTML = this.template({ - pfx: this.pfx, - label - }); + el.innerHTML = this.template({ pfx, label }); $el.addClass(this.className); $el.css({ order: model.get('order') }); this.updateVisibility(); return this; } -}); +}