--- /dev/null
+/**
+ * @file
+ * A Backbone View that provides a dynamic contextual link.
+ */
+
+(function ($, Backbone, Drupal) {
+ Drupal.quickedit.ContextualLinkView = Backbone.View.extend(/** @lends Drupal.quickedit.ContextualLinkView# */{
+
+ /**
+ * Define all events to listen to.
+ *
+ * @return {object}
+ * A map of events.
+ */
+ events() {
+ // Prevents delay and simulated mouse events.
+ function touchEndToClick(event) {
+ event.preventDefault();
+ event.target.click();
+ }
+
+ return {
+ 'click a': function (event) {
+ event.preventDefault();
+ this.model.set('state', 'launching');
+ },
+ 'touchEnd a': touchEndToClick,
+ };
+ },
+
+ /**
+ * Create a new contextual link view.
+ *
+ * @constructs
+ *
+ * @augments Backbone.View
+ *
+ * @param {object} options
+ * An object with the following keys:
+ * @param {Drupal.quickedit.EntityModel} options.model
+ * The associated entity's model.
+ * @param {Drupal.quickedit.AppModel} options.appModel
+ * The application state model.
+ * @param {object} options.strings
+ * The strings for the "Quick edit" link.
+ */
+ initialize(options) {
+ // Insert the text of the quick edit toggle.
+ this.$el.find('a').text(options.strings.quickEdit);
+ // Initial render.
+ this.render();
+ // Re-render whenever this entity's isActive attribute changes.
+ this.listenTo(this.model, 'change:isActive', this.render);
+ },
+
+ /**
+ * Render function for the contextual link view.
+ *
+ * @param {Drupal.quickedit.EntityModel} entityModel
+ * The associated `EntityModel`.
+ * @param {bool} isActive
+ * Whether the in-place editor is active or not.
+ *
+ * @return {Drupal.quickedit.ContextualLinkView}
+ * The `ContextualLinkView` in question.
+ */
+ render(entityModel, isActive) {
+ this.$el.find('a').attr('aria-pressed', isActive);
+
+ // Hides the contextual links if an in-place editor is active.
+ this.$el.closest('.contextual').toggle(!isActive);
+
+ return this;
+ },
+
+ });
+}(jQuery, Backbone, Drupal));