yaffs.net Git - yaffs-website/blob - web/core/modules/contextual/js/views/VisualView.js

   1 /**
   2  * @file
   3  * A Backbone View that provides the visual view of a contextual link.
   4  */
   5
   6 (function (Drupal, Backbone, Modernizr) {
   7
   8   'use strict';
   9
  10   Drupal.contextual.VisualView = Backbone.View.extend(/** @lends Drupal.contextual.VisualView# */{
  11
  12     /**
  13      * Events for the Backbone view.
  14      *
  15      * @return {object}
  16      *   A mapping of events to be used in the view.
  17      */
  18     events: function () {
  19       // Prevents delay and simulated mouse events.
  20       var touchEndToClick = function (event) {
  21         event.preventDefault();
  22         event.target.click();
  23       };
  24       var mapping = {
  25         'click .trigger': function () { this.model.toggleOpen(); },
  26         'touchend .trigger': touchEndToClick,
  27         'click .contextual-links a': function () { this.model.close().blur(); },
  28         'touchend .contextual-links a': touchEndToClick
  29       };
  30       // We only want mouse hover events on non-touch.
  31       if (!Modernizr.touchevents) {
  32         mapping.mouseenter = function () { this.model.focus(); };
  33       }
  34       return mapping;
  35     },
  36
  37     /**
  38      * Renders the visual view of a contextual link. Listens to mouse & touch.
  39      *
  40      * @constructs
  41      *
  42      * @augments Backbone.View
  43      */
  44     initialize: function () {
  45       this.listenTo(this.model, 'change', this.render);
  46     },
  47
  48     /**
  49      * @inheritdoc
  50      *
  51      * @return {Drupal.contextual.VisualView}
  52      *   The current contextual visual view.
  53      */
  54     render: function () {
  55       var isOpen = this.model.get('isOpen');
  56       // The trigger should be visible when:
  57       //  - the mouse hovered over the region,
  58       //  - the trigger is locked,
  59       //  - and for as long as the contextual menu is open.
  60       var isVisible = this.model.get('isLocked') || this.model.get('regionIsHovered') || isOpen;
  61
  62       this.$el
  63         // The open state determines if the links are visible.
  64         .toggleClass('open', isOpen)
  65         // Update the visibility of the trigger.
  66         .find('.trigger').toggleClass('visually-hidden', !isVisible);
  67
  68       // Nested contextual region handling: hide any nested contextual triggers.
  69       if ('isOpen' in this.model.changed) {
  70         this.$el.closest('.contextual-region')
  71           .find('.contextual .trigger:not(:first)')
  72           .toggle(!isOpen);
  73       }
  74
  75       return this;
  76     }
  77
  78   });
  79
  80 })(Drupal, Backbone, Modernizr);