Initial commit

lib/assets/javascripts/builder/components/icon/icon-view.js

@@ -0,0 +1,58 @@
+var $ = require('jquery');
+var CoreView = require('backbone/core-view');
+var iconTemplates = {};
+
+var importAllIconTemplates = function () {
+  var templates = require.context('./templates', false, /\.tpl$/);
+
+  templates.keys().forEach(function (template) {
+    iconTemplates[template] = templates(template);
+  });
+};
+
+importAllIconTemplates();
+
+module.exports = CoreView.extend({
+  constructor: function (opts) {
+    this.placeholder = this._preinitializeWithPlaceholder(opts && opts.placeholder);
+    CoreView.prototype.constructor.call(this, opts);
+  },
+
+  initialize: function (opts) {
+    if (!opts || !opts.icon) throw new Error('An icon is required to render IconView');
+
+    this.icon = opts.icon;
+    this.iconTemplate = this._getIconTemplate(this.icon);
+
+    if (!this.iconTemplate) {
+      throw new Error('The selected icon does not have any available template');
+    }
+  },
+
+  render: function () {
+    this.$el.html(this.iconTemplate);
+
+    if (this.placeholder) {
+      this.placeholder.replaceWith(this.$el);
+    }
+
+    return this;
+  },
+
+  _getIconTemplate: function (icon) {
+    var iconTemplate = './' + this.icon + '.tpl';
+    return iconTemplates[iconTemplate];
+  },
+
+  _preinitializeWithPlaceholder: function (placeholderNode) {
+    if (!placeholderNode) {
+      return;
+    }
+
+    var placeholder = $(placeholderNode);
+    this.tagName = placeholder.prop('tagName');
+    this.className = placeholder.attr('class');
+
+    return placeholder;
+  }
+});