Initial commit

lib/assets/javascripts/builder/editor/layers/basemap-content-views/basemap-mosaic-remove-view.js

@@ -0,0 +1,86 @@
+var CoreView = require('backbone/core-view');
+var template = require('./basemap-mosaic-remove.tpl');
+var CustomListCollection = require('builder/components/custom-list/custom-list-collection');
+var ContextMenuView = require('builder/components/context-menu/context-menu-view');
+
+module.exports = CoreView.extend({
+
+  tagName: 'span',
+  className: 'Mosaic-remove CDB-Shape-threePoints is-white is-small js-Mosaic-remove',
+
+  events: {
+    'click': '_onToggleContextMenuClicked'
+  },
+
+  initialize: function (opts) {
+    if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
+
+    this._basemapsCollection = opts.basemapsCollection;
+  },
+
+  render: function () {
+    this.$el.html(template());
+
+    return this;
+  },
+
+  _hasContextMenu: function () {
+    return this._menuView;
+  },
+
+  _hideContextMenu: function () {
+    this.removeView(this._menuView);
+    this._menuView.clean();
+    delete this._menuView;
+  },
+
+  _showContextMenu: function (position) {
+    this._menuItems = new CustomListCollection([{
+      label: _t('editor.layers.basemap.remove-baselayer'),
+      val: 'remove-baselayer',
+      destructive: true
+    }]);
+
+    var triggerElementID = 'context-menu-trigger-' + this.model.cid;
+    this.$('.js-Mosaic-remove').attr('id', triggerElementID);
+    this._menuView = new ContextMenuView({
+      collection: this._menuItems,
+      triggerElementID: triggerElementID,
+      position: position
+    });
+
+    this._menuItems.bind('change:selected', function (menuItem) {
+      if (menuItem.get('val') === 'remove-baselayer') {
+        this._deleteBaselayer();
+      }
+    }, this);
+    this.add_related_model(this._menuItems);
+
+    this._menuView.model.bind('change:visible', function (model, isContextMenuVisible) {
+      if (this._hasContextMenu() && !isContextMenuVisible) {
+        this._hideContextMenu();
+      }
+    }, this);
+
+    this._menuView.show();
+    this.addView(this._menuView);
+  },
+
+  _deleteBaselayer: function () {
+    this._basemapsCollection.remove(this.model);
+  },
+
+  _onToggleContextMenuClicked: function (e) {
+    this.killEvent(e);
+
+    if (this._hasContextMenu()) {
+      this._hideContextMenu();
+    } else {
+      this._showContextMenu({
+        x: e.pageX + 215, // CustomList--small width
+        y: e.pageY
+      });
+    }
+  }
+
+});