Move into nested docroot
This commit is contained in:
Rob Davies
parent
83a0d3a149
commit
c8b70abde9
13405 changed files with 0 additions and 0 deletions
web/core/misc/dropbutton
164
web/core/misc/dropbutton/dropbutton.css
Normal file
164
web/core/misc/dropbutton/dropbutton.css
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
|
||||
/**
|
||||
* @file
|
||||
* Base styles for dropbuttons.
|
||||
*/
|
||||
|
||||
/**
|
||||
* When a dropbutton has only one option, it is simply a button.
|
||||
*/
|
||||
.dropbutton-wrapper,
|
||||
.dropbutton-wrapper div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.js .dropbutton-wrapper,
|
||||
.js .dropbutton-widget {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.js .dropbutton-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Splitbuttons */
|
||||
@media screen and (min-width:600px) {
|
||||
.form-actions .dropbutton-wrapper {
|
||||
float: left; /* LTR */
|
||||
}
|
||||
[dir="rtl"] .form-actions .dropbutton-wrapper {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.js .form-actions .dropbutton-widget {
|
||||
position: static;
|
||||
}
|
||||
.js td .dropbutton-widget {
|
||||
position: absolute;
|
||||
}
|
||||
.js td .dropbutton-wrapper {
|
||||
min-height: 2em;
|
||||
}
|
||||
.js td .dropbutton-multiple {
|
||||
padding-right: 10em; /* LTR */
|
||||
margin-right: 2em; /* LTR */
|
||||
max-width: 100%;
|
||||
}
|
||||
[dir="rtl"].js td .dropbutton-multiple {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 10em;
|
||||
margin-left: 2em;
|
||||
}
|
||||
.js td .dropbutton-multiple .dropbutton-action a,
|
||||
.js td .dropbutton-multiple .dropbutton-action input,
|
||||
.js td .dropbutton-multiple .dropbutton-action button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* UL styles are over-scoped in core, so this selector needs weight parity. */
|
||||
.js .dropbutton-widget .dropbutton {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.js .dropbutton li,
|
||||
.js .dropbutton a {
|
||||
display: block;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.js .dropbutton li:hover,
|
||||
.js .dropbutton li:focus,
|
||||
.js .dropbutton a:hover,
|
||||
.js .dropbutton a:focus {
|
||||
outline: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
* The dropbutton styling.
|
||||
*
|
||||
* A dropbutton is a widget that displays a list of action links as a button
|
||||
* with a primary action. Secondary actions are hidden behind a click on a
|
||||
* twisty arrow.
|
||||
*
|
||||
* The arrow is created using border on a zero-width, zero-height span.
|
||||
* The arrow inherits the link color, but can be overridden with border colors.
|
||||
*/
|
||||
.js .dropbutton-multiple .dropbutton-widget {
|
||||
padding-right: 2em; /* LTR */
|
||||
}
|
||||
.js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
|
||||
padding-left: 2em;
|
||||
padding-right: 0;
|
||||
}
|
||||
.dropbutton-multiple.open,
|
||||
.dropbutton-multiple.open .dropbutton-widget {
|
||||
max-width: none;
|
||||
}
|
||||
.dropbutton-multiple.open {
|
||||
z-index: 100;
|
||||
}
|
||||
.dropbutton-multiple .dropbutton .secondary-action {
|
||||
display: none;
|
||||
}
|
||||
.dropbutton-multiple.open .dropbutton .secondary-action {
|
||||
display: block;
|
||||
}
|
||||
.dropbutton-toggle {
|
||||
bottom: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0; /* LTR */
|
||||
text-indent: 110%;
|
||||
top: 0;
|
||||
white-space: nowrap;
|
||||
width: 2em;
|
||||
}
|
||||
[dir="rtl"] .dropbutton-toggle {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
.dropbutton-toggle button {
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.dropbutton-toggle button:hover,
|
||||
.dropbutton-toggle button:focus {
|
||||
outline: initial;
|
||||
}
|
||||
.dropbutton-arrow {
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 0.3333em 0.3333em 0;
|
||||
display: block;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
right: 40%; /* 0.6667em; */ /* LTR */
|
||||
top: 50%;
|
||||
margin-top: -0.1666em;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
[dir="rtl"] .dropbutton-arrow {
|
||||
left: 0.6667em;
|
||||
right: auto;
|
||||
}
|
||||
.dropbutton-multiple.open .dropbutton-arrow {
|
||||
border-bottom: 0.3333em solid;
|
||||
border-top-color: transparent;
|
||||
top: 0.6667em;
|
||||
}
|
||||
233
web/core/misc/dropbutton/dropbutton.js
Normal file
233
web/core/misc/dropbutton/dropbutton.js
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
/**
|
||||
* @file
|
||||
* Dropbutton feature.
|
||||
*/
|
||||
|
||||
(function ($, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Process elements with the .dropbutton class on page load.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches dropButton behaviors.
|
||||
*/
|
||||
Drupal.behaviors.dropButton = {
|
||||
attach: function (context, settings) {
|
||||
var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
|
||||
if ($dropbuttons.length) {
|
||||
// Adds the delegated handler that will toggle dropdowns on click.
|
||||
var $body = $('body').once('dropbutton-click');
|
||||
if ($body.length) {
|
||||
$body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
|
||||
}
|
||||
// Initialize all buttons.
|
||||
var il = $dropbuttons.length;
|
||||
for (var i = 0; i < il; i++) {
|
||||
DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Delegated callback for opening and closing dropbutton secondary actions.
|
||||
*
|
||||
* @function Drupal.DropButton~dropbuttonClickHandler
|
||||
*
|
||||
* @param {jQuery.Event} e
|
||||
* The event triggered.
|
||||
*/
|
||||
function dropbuttonClickHandler(e) {
|
||||
e.preventDefault();
|
||||
$(e.target).closest('.dropbutton-wrapper').toggleClass('open');
|
||||
}
|
||||
|
||||
/**
|
||||
* A DropButton presents an HTML list as a button with a primary action.
|
||||
*
|
||||
* All secondary actions beyond the first in the list are presented in a
|
||||
* dropdown list accessible through a toggle arrow associated with the button.
|
||||
*
|
||||
* @constructor Drupal.DropButton
|
||||
*
|
||||
* @param {HTMLElement} dropbutton
|
||||
* A DOM element.
|
||||
* @param {object} settings
|
||||
* A list of options including:
|
||||
* @param {string} settings.title
|
||||
* The text inside the toggle link element. This text is hidden
|
||||
* from visual UAs.
|
||||
*/
|
||||
function DropButton(dropbutton, settings) {
|
||||
// Merge defaults with settings.
|
||||
var options = $.extend({title: Drupal.t('List additional actions')}, settings);
|
||||
var $dropbutton = $(dropbutton);
|
||||
|
||||
/**
|
||||
* @type {jQuery}
|
||||
*/
|
||||
this.$dropbutton = $dropbutton;
|
||||
|
||||
/**
|
||||
* @type {jQuery}
|
||||
*/
|
||||
this.$list = $dropbutton.find('.dropbutton');
|
||||
|
||||
/**
|
||||
* Find actions and mark them.
|
||||
*
|
||||
* @type {jQuery}
|
||||
*/
|
||||
this.$actions = this.$list.find('li').addClass('dropbutton-action');
|
||||
|
||||
// Add the special dropdown only if there are hidden actions.
|
||||
if (this.$actions.length > 1) {
|
||||
// Identify the first element of the collection.
|
||||
var $primary = this.$actions.slice(0, 1);
|
||||
// Identify the secondary actions.
|
||||
var $secondary = this.$actions.slice(1);
|
||||
$secondary.addClass('secondary-action');
|
||||
// Add toggle link.
|
||||
$primary.after(Drupal.theme('dropbuttonToggle', options));
|
||||
// Bind mouse events.
|
||||
this.$dropbutton
|
||||
.addClass('dropbutton-multiple')
|
||||
.on({
|
||||
|
||||
/**
|
||||
* Adds a timeout to close the dropdown on mouseleave.
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
|
||||
|
||||
/**
|
||||
* Clears timeout when mouseout of the dropdown.
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
'mouseenter.dropbutton': $.proxy(this.hoverIn, this),
|
||||
|
||||
/**
|
||||
* Similar to mouseleave/mouseenter, but for keyboard navigation.
|
||||
*
|
||||
* @ignore
|
||||
*/
|
||||
'focusout.dropbutton': $.proxy(this.focusOut, this),
|
||||
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
'focusin.dropbutton': $.proxy(this.focusIn, this)
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.$dropbutton.addClass('dropbutton-single');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extend the DropButton constructor.
|
||||
*/
|
||||
$.extend(DropButton, /** @lends Drupal.DropButton */{
|
||||
/**
|
||||
* Store all processed DropButtons.
|
||||
*
|
||||
* @type {Array.<Drupal.DropButton>}
|
||||
*/
|
||||
dropbuttons: []
|
||||
});
|
||||
|
||||
/**
|
||||
* Extend the DropButton prototype.
|
||||
*/
|
||||
$.extend(DropButton.prototype, /** @lends Drupal.DropButton# */{
|
||||
|
||||
/**
|
||||
* Toggle the dropbutton open and closed.
|
||||
*
|
||||
* @param {bool} [show]
|
||||
* Force the dropbutton to open by passing true or to close by
|
||||
* passing false.
|
||||
*/
|
||||
toggle: function (show) {
|
||||
var isBool = typeof show === 'boolean';
|
||||
show = isBool ? show : !this.$dropbutton.hasClass('open');
|
||||
this.$dropbutton.toggleClass('open', show);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
*/
|
||||
hoverIn: function () {
|
||||
// Clear any previous timer we were using.
|
||||
if (this.timerID) {
|
||||
window.clearTimeout(this.timerID);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
*/
|
||||
hoverOut: function () {
|
||||
// Wait half a second before closing.
|
||||
this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
*/
|
||||
open: function () {
|
||||
this.toggle(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method
|
||||
*/
|
||||
close: function () {
|
||||
this.toggle(false);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {jQuery.Event} e
|
||||
* The event triggered.
|
||||
*/
|
||||
focusOut: function (e) {
|
||||
this.hoverOut.call(this, e);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {jQuery.Event} e
|
||||
* The event triggered.
|
||||
*/
|
||||
focusIn: function (e) {
|
||||
this.hoverIn.call(this, e);
|
||||
}
|
||||
});
|
||||
|
||||
$.extend(Drupal.theme, /** @lends Drupal.theme */{
|
||||
|
||||
/**
|
||||
* A toggle is an interactive element often bound to a click handler.
|
||||
*
|
||||
* @param {object} options
|
||||
* Options object.
|
||||
* @param {string} [options.title]
|
||||
* The HTML anchor title attribute and text for the inner span element.
|
||||
*
|
||||
* @return {string}
|
||||
* A string representing a DOM fragment.
|
||||
*/
|
||||
dropbuttonToggle: function (options) {
|
||||
return '<li class="dropbutton-toggle"><button type="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
|
||||
}
|
||||
});
|
||||
|
||||
// Expose constructor in the public space.
|
||||
Drupal.DropButton = DropButton;
|
||||
|
||||
})(jQuery, Drupal);
|
||||
Reference in a new issue