/** * @file * A Backbone View that provides the visual view of a contextual link. */ (function (Drupal, Backbone, Modernizr) { "use strict"; Drupal.contextual.VisualView = Backbone.View.extend(/** @lends Drupal.contextual.VisualView# */{ /** * @return {object} */ events: function () { // Prevents delay and simulated mouse events. var touchEndToClick = function (event) { event.preventDefault(); event.target.click(); }; var mapping = { 'click .trigger': function () { this.model.toggleOpen(); }, 'touchend .trigger': touchEndToClick, 'click .contextual-links a': function () { this.model.close().blur(); }, 'touchend .contextual-links a': touchEndToClick }; // We only want mouse hover events on non-touch. if (!Modernizr.touch) { mapping.mouseenter = function () { this.model.focus(); }; } return mapping; }, /** * Renders the visual view of a contextual link. Listens to mouse & touch. * * @constructs * * @augments Backbone.View */ initialize: function () { this.listenTo(this.model, 'change', this.render); }, /** * @inheritdoc * * @return {Drupal.contextual.VisualView} */ render: function () { var isOpen = this.model.get('isOpen'); // The trigger should be visible when: // - the mouse hovered over the region, // - the trigger is locked, // - and for as long as the contextual menu is open. var isVisible = this.model.get('isLocked') || this.model.get('regionIsHovered') || isOpen; this.$el // The open state determines if the links are visible. .toggleClass('open', isOpen) // Update the visibility of the trigger. .find('.trigger').toggleClass('visually-hidden', !isVisible); // Nested contextual region handling: hide any nested contextual triggers. if ('isOpen' in this.model.changed) { this.$el.closest('.contextual-region') .find('.contextual .trigger:not(:first)') .toggle(!isOpen); } return this; } }); })(Drupal, Backbone, Modernizr);