Commit 68305f16 authored by tim.plunkett's avatar tim.plunkett

Issue #1781406 by tim.plunkett: Use the new Core dropbutton.

parent 22644347
/**
* @file
* Base RTL styles for dropbuttons.
*/
/**
* The dropbutton arrow.
*/
.dropbutton-link {
left: 0;
right: auto;
}
.dropbutton-arrow {
left: 0.6667em;
right: auto;
}
.dropbutton-multiple .dropbutton-widget {
left: auto;
padding-left: 2em;
padding-right: 0;
right: 0;
}
/**
* @file
* Base styles for dropbuttons.
*/
/**
* When a dropbutton has only one option, it is simply a button.
*/
.dropbutton-wrapper,
.dropbutton-wrapper div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.dropbutton-wrapper,
.dropbutton-widget {
max-width: 100%;
}
.dropbutton-wrapper {
min-height: 1em;
position: relative;
}
.dropbutton-widget {
display: block;
position: absolute;
right: 0; /* LTR */
}
/* UL styles are over-scoped in core, so this selector needs weight parity. */
.dropbutton-widget .dropbutton-content {
list-style-image: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.dropbutton-content li,
.dropbutton-content a {
display: block;
}
/**
* 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.
*/
.dropbutton-multiple .dropbutton-widget {
padding-right: 2em; /* LTR */
}
.dropbutton-multiple.open,
.dropbutton-multiple.open .dropbutton-widget {
max-width: none;
}
.dropbutton-multiple.open {
z-index: 100;
}
.dropbutton-multiple .dropbutton-content .secondary-actions {
display: none;
}
.dropbutton-multiple.open .dropbutton-content .secondary-actions {
display: block;
}
.dropbutton-link {
bottom: 0;
display: block;
overflow: hidden;
position: absolute;
right: 0; /* LTR */
text-indent: 110%;
top: 0;
white-space: nowrap;
width: 2em;
}
.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: 0.6667em; /* LTR */
top: 0.767em;
width: 0;
}
.dropbutton-multiple.open .dropbutton-arrow {
border-bottom: 0.3333em solid;
border-top-color: transparent;
top: 0.333em;
}
(function ($, Drupal) {
"use strict";
/**
* Process elements with the .dropbutton class on page load.
*/
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-link', dropbuttonClickHandler);
}
// Initialize all buttons.
for (var i = 0, il = $dropbuttons.length; i < il; i++) {
DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
}
}
}
};
/**
* Delegated callback for for opening and closing dropbutton secondary actions.
*/
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.
*
* @param {jQuery} $dropbutton
* A jQuery element.
*
* @param {Object} settings
* A list of options including:
* - {String} 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('More')}, settings);
var $dropbutton = $(dropbutton);
this.$dropbutton = $dropbutton;
this.$list = $dropbutton.find('.dropbutton');
this.$actions = this.$list.find('li');
// Move the classes from .dropbutton up to .dropbutton-wrapper
this.$dropbutton.addClass(this.$list[0].className);
this.$dropbutton.attr('id', this.$list[0].id);
this.$list.attr({id: '', 'class': 'dropbutton-content'});
// Add the special dropdown only if there are hidden actions.
if (this.$actions.length > 1) {
// Remove the first element of the collection and create a new jQuery
// collection for the secondary actions.
$(this.$actions.splice(1)).addClass('secondary-actions');
// Add toggle link.
this.$list.before(Drupal.theme('dropbuttonToggle', options));
// Bind mouse events.
this.$dropbutton.addClass('dropbutton-multiple')
.on({
/**
* Adds a timeout to close the dropdown on mouseleave.
*/
'mouseleave.dropbutton': $.proxy(this.hoverOut, this),
/**
* Clears timeout when mouseout of the dropdown.
*/
'mouseenter.dropbutton': $.proxy(this.hoverIn, this)
});
}
}
/**
* Extend the DropButton constructor.
*/
$.extend(DropButton, {
/**
* Store all processed DropButtons.
*
* @type {Array}
*/
dropbuttons: []
});
/**
* Extend the DropButton prototype.
*/
$.extend(DropButton.prototype, {
/**
* Toggle the dropbutton open and closed.
*
* @param {Boolean} show
* (optional) 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);
},
hoverIn: function () {
// Clear any previous timer we were using.
if (this.timerID) {
window.clearTimeout(this.timerID);
}
},
hoverOut: function () {
// Wait half a second before closing.
this.timerID = window.setTimeout($.proxy(this, 'close'), 500);
},
open: function () {
this.toggle(true);
},
close: function () {
this.toggle(false);
}
});
$.extend(Drupal.theme, {
/**
* A toggle is an interactive element often bound to a click handler.
*
* @param {Object} options
* - {String} title: (optional) The HTML anchor title attribute and text for the
* inner span element.
*
* @return {String}
* A string representing a DOM fragment.
*/
dropbuttonToggle: function (options) {
return '<a href="#" class="dropbutton-link" title="' + options.title + '"><span class="dropbutton-arrow"><span class="element-invisible">' + options.title + '</span></span></a>';
}
});
// Expose constructor in the public space.
Drupal.DropButton = DropButton;
})(jQuery, Drupal);
/**
* @file
* General RTL styles for dropbuttons.
*/
.dropbutton-multiple .dropbutton-content {
border-left: 1px solid #e8e8e8;
border-right: 0 none;
}
.dropbutton-multiple .dropbutton-content li > * {
margin-left: 0.25em;
margin-right: 0;
}
/**
* @file
* General styles for dropbuttons.
*/
.dropbutton-wrapper {
cursor: pointer;
min-height: 2em;
}
.dropbutton-widget {
background-color: white;
border: 1px solid #cccccc;
}
.dropbutton-widget:hover {
border-color: #b8b8b8;
}
.dropbutton-content li > * {
overflow: hidden;
padding: 0.2em 0.5em;
white-space: nowrap;
}
.dropbutton-content li + li {
border-top: 1px solid #e8e8e8;
}
.dropbutton-multiple .dropbutton-content {
border-right: 1px solid #e8e8e8; /* LTR */
}
.dropbutton-multiple .dropbutton-content li > * {
margin-right: 0.25em; /* LTR */
}
name = Views Dropbutton
description = A temporary copy of the work-in-progress dropbutton.
package = Views
core = 8.x
<?php
/**
* Implements hook_theme().
*/
function views_dropbutton_theme($existing, $type, $theme, $path) {
return array(
'dropbutton_wrapper' => array(
'render element' => 'element',
),
);
}
/**
* Implements hook_library_info().
*/
function views_dropbutton_library_info() {
$path = drupal_get_path('module', 'views_dropbutton');
$libraries['drupal.dropbutton'] = array(
'title' => 'Dropbutton',
'website' => 'http://drupal.org/node/1608878',
'version' => '1.0',
'js' => array(
"$path/dropbutton.js" => array(),
),
'css' => array(
"$path/dropbutton.base.css" => array(),
"$path/dropbutton.theme.css" => array(),
),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
),
);
return $libraries;
}
/**
* Implements hook_element_info().
*/
function views_dropbutton_element_info() {
$types['dropbutton'] = array(
'#theme' => 'links__dropbutton',
'#pre_render' => array('drupal_pre_render_dropbutton'),
);
return $types;
}
/**
* Pre-render callback: Attaches the dropbutton library and required markup.
*/
function drupal_pre_render_dropbutton($element) {
$element['#attached']['library'][] = array('views_dropbutton', 'drupal.dropbutton');
$element['#attributes']['class'][] = 'dropbutton';
if (!isset($element['#theme_wrappers'])) {
$element['#theme_wrappers'] = array();
}
array_unshift($element['#theme_wrappers'], 'dropbutton_wrapper');
// Enable targeted theming of specific dropbuttons (e.g., 'operations' or
// 'operations__node').
if (isset($element['#subtype'])) {
$element['#theme'] .= '__' . $element['#subtype'];
}
return $element;
}
/**
* Returns HTML for wrapping a dropbutton menu.
*
* @param array $variables
* An associative array containing:
* - element: An associative array containing the properties and children of
* the dropbutton menu. Properties used: #children.
*/
function theme_dropbutton_wrapper($variables) {
return '<div class="dropbutton-wrapper"><div class="dropbutton-widget">' . $variables['element']['#children'] . '</div></div>';
}
......@@ -19,10 +19,10 @@
.dropbutton-multiple.open .dropbutton-widget:hover {
background-color: #fff;
}
.dropbutton-content li:first-child > * {
.dropbutton li:first-child > * {
text-overflow: ellipsis;
}
.dropbutton-multiple.open .dropbutton-content li:first-child > * {
.dropbutton-multiple.open .dropbutton li:first-child > * {
text-overflow: clip;
}
......@@ -392,7 +392,7 @@ table th {
/* @end */
.views-ui-display-tab-actions .dropbutton input {
.views-ui-display-tab-actions .dropbutton-wrapper input {
color: #0074BD;
}
......
......@@ -1100,7 +1100,7 @@ div.messages {
/* @group Buttons */
.dropbutton,
.dropbutton input {
.dropbutton-wrapper input {
text-transform: lowercase;
}
.dropbutton-multiple {
......@@ -1112,32 +1112,32 @@ div.messages {
.dropbutton-arrow {
top: 0.567em;
}
.dropbutton-content {
.dropbutton {
font-size: 11px;
line-height: 1.333em;
}
.dropbutton-content li > * {
.dropbutton li > * {
margin: 0;
padding: 0.2em 0.75em;
}
.views-display-top .dropbutton {
.views-display-top .dropbutton-wrapper {
position: absolute;
right: 12px;
top: 7px;
}
.views-display-top .dropbutton a {
.views-display-top .dropbutton-wrapper a {
font-size: 12px;
}
.views-ui-display-tab-bucket .dropbutton {
.views-ui-display-tab-bucket .dropbutton-wrapper {
position: absolute;
right: 5px;
top: 4px;
}
.views-ui-display-tab-actions .dropbutton li a,
.views-ui-display-tab-actions .dropbutton input {
.views-ui-display-tab-actions .dropbutton-wrapper li a,
.views-ui-display-tab-actions .dropbutton-wrapper input {
background: none;
border: medium;
font-family: inherit;
......@@ -1146,7 +1146,7 @@ div.messages {
margin-bottom: 0;
}
.views-ui-display-tab-actions .dropbutton input:hover {
.views-ui-display-tab-actions .dropbutton-wrapper input:hover {
background: none;
border: none;
}
......
......@@ -4,4 +4,3 @@ package = Views
core = 8.x
configure = admin/structure/views
dependencies[] = views
dependencies[] = views_dropbutton
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment