77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
|
/**
|
||
|
|
* @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);
|