Commit 2018f014 authored by tim.plunkett's avatar tim.plunkett

Issue #1781406 by tim.plunkett, dead_arm: Move a copy of the work-in-progress...

Issue #1781406 by tim.plunkett, dead_arm: Move a copy of the work-in-progress core dropbutton as a temporary submodule.
parent 92f9c916
......@@ -101,7 +101,7 @@
href = href.substring(3, href.length);
}
var chars = ['#', '?', '&'];
for (i in chars) {
for (var i in chars) {
if (href.indexOf(chars[i]) > -1) {
href = href.substr(0, href.indexOf(chars[i]));
}
......
......@@ -3,7 +3,6 @@ description = Create customized lists and queries from your database.
package = Views
core = 8.x
php = 5.2
dependencies[] = ctools
dependencies[] = config
; Always available CSS
......
/**
* @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' => array(
'variables' => array('title' => NULL, 'links' => array(), 'attributes' => array()),
),
);
}
/**
* 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;
}
/**
* Builds a render array for theme_dropbutton().
*/
function template_preprocess_dropbutton(&$variables) {
$variables['attributes']['class'][] = 'dropbutton';
$variables['element'] = array(
'#theme' => 'links',
'#links' => $variables['links'],
'#attributes' => $variables['attributes'],
'#attached' => array(
'library' => array(
array('views_dropbutton', 'drupal.dropbutton'),
),
),
);
if (!empty($variables['links'])) {
$variables['element']['#prefix'] = '<div class="dropbutton-wrapper"><div class="dropbutton-widget">';
$variables['element']['#suffix'] = '</div></div>';
}
// Pass through title to the dropbutton options.
if (isset($variables['title'])) {
$variables['element']['#attached']['js'][] = array(
'type' => 'setting',
'data' => array('dropbutton' => array('title' => $variables['title'])),
);
}
}
/**
* Creates a dropbutton menu.
*
* @param array $variables
* An associative array containing:
* - title: (optional) The text placed in the clickable area to activate the
* dropbutton. Defaults to 'Open dropbutton'.
* - links: An array of links to provide in the dropbutton.
* - attributes: (optional) An associative array of HTML attributes to apply
* to the dropbutton.
*/
function theme_dropbutton($variables) {
return render($variables['element']);
}
......@@ -3,6 +3,20 @@
* in the Bartik theme.
*/
/* ---------- Dropbutton ----------- */
.dropbutton-widget {
background-color: white;
border-radius: 5px;
}
.dropbutton-widget:hover {
background-color: #f8f8f8;
border-color: #b8b8b8;
}
.dropbutton-multiple.open .dropbutton-widget:hover {
background-color: white;
}
/* @group Lists */
.views-display-top .secondary .action-list {
......@@ -71,127 +85,6 @@
/* @end */
/* @group CTools */
/* @group Buttons */
.ctools-button-processed {
background-image:
-moz-linear-gradient(
-90deg,
#ffffff 0,
#f9f9f9 100%);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.0, rgba(255, 255, 255, 1.0)),
color-stop(1.0, rgba(249, 249, 249, 1.0))
);
background-image:
-webkit-linear-gradient(
-90deg,
#ffffff 0,
#f9f9f9 100%);
background-image:
linear-gradient(
-90deg,
#ffffff 0,
#f9f9f9 100%);
border-radius: 5px;
padding-bottom: 1px;
padding-top: 1px;
}
.ctools-button-processed:hover {
background-image:
-moz-linear-gradient(
-90deg,
#ffffff 0,
#f1f1f1 100%);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.0, rgba(255, 255, 255, 1.0)),
color-stop(1.0, rgba(241, 241, 241, 1.0))
);
background-image:
-webkit-linear-gradient(
-90deg,
#ffffff 0,
#f1f1f1 100%);
background-image:
linear-gradient(
-90deg,
#ffffff 0,
#f1f1f1 100%);
}
.ctools-button-processed li a,
.views-ui-display-tab-actions .ctools-button-processed input {
padding-left: 9px;
padding-right: 9px;
}
.ctools-content ul.actions {
padding-bottom: 0;
}
.ctools-dropbutton-processed.open:hover {
background-image:
-moz-linear-gradient(
-90deg,
#ffffff 0,
#f9f9f9 100%);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.0, rgba(255, 255, 255, 1.0)),
color-stop(1.0, rgba(249, 249, 249, 1.0))
);
background-image:
-webkit-linear-gradient(
-90deg,
#ffffff 0,
#f9f9f9 100%);
background-image:
linear-gradient(
-90deg,
#ffffff 0,
#f9f9f9 100%);
}
.ctools-dropbutton-processed.open {
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
.ctools-twisty {
top: 0.6667em;
}
.ctools-dropbutton-processed.open .ctools-twisty {
top: 0.3333em;
}
.ctools-dropbutton-processed li a,
.views-ui-display-tab-actions .ctools-dropbutton-processed input {
padding-right: 7px;
}
.views-ui-display-tab-actions .ctools-button-processed input.form-submit {
margin-right: 0;
margin-top: 0;
}
/* @end */
.views-display-column .fieldset-wrapper {
margin-top: 0;
}
......@@ -224,15 +117,20 @@
color: #018FE2;
}
.views-ui-display-tab-actions .ctools-button input {
/* @group Dropbutton */
.views-ui-display-tab-actions .dropbutton input {
color: #0071B3;
}
.views-ui-display-tab-actions .ctools-button input:hover,
.views-ui-display-tab-actions .ctools-button input:focus {
.views-ui-display-tab-actions .dropbutton input:hover,
.views-ui-display-tab-actions .dropbutton input:focus {
color: #018FE2;
}
/* @end */
.views-ui-display-tab-actions .dropbutton input.form-submit {
margin-right: 0;
margin-top: 0;
}
/* @end */
/* @group Buttons */
.ctools-dropbutton .ctools-content {
border-left: 1px solid #e8e8e8;
}
.ctools-content ul.actions {
padding-left: auto;
padding-right: 0;
}
.ctools-dropbutton .ctools-link {
border-right: 1px solid #ffffff;
}
.ctools-dropbutton li {
padding-left: 9px;
padding-left: auto;
}
.views-display-top .ctools-button {
left: 12px;
right: auto;
}
.views-ui-display-tab-bucket .ctools-button {
left: 5px;
right: auto;
}
/* @end */
/* @group Buttons */
.ctools-button-processed {
background-color: #ffffff;
border-color: #cccccc;
font-size: 11px;