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