Commit aad2d4a6 authored by webchick's avatar webchick

Issue #1971108 by Wim Leers, jessebeach, nod_: Convert contextual.js to use...

Issue #1971108 by Wim Leers, jessebeach, nod_: Convert contextual.js to use Backbone (and support dynamic contextual links).
parent 594c849d
/** /**
* @file * @file
* Generic base styles for contextual module. * Generic base styles for contextual module.
...@@ -7,33 +6,13 @@ ...@@ -7,33 +6,13 @@
.contextual-region { .contextual-region {
position: relative; position: relative;
} }
.touch .contextual .trigger { .contextual .trigger:focus {
display: block; /* Override the .element-focusable position: static */
position: relative !important;
} }
.contextual .contextual-links { .contextual-links {
display: none; display: none;
} }
.contextual-links-active .contextual-links { .contextual.open .contextual-links {
display: block; display: block;
} }
/**
* The .element-focusable class extends the .element-invisible class to allow
* the element to be focusable when navigated to via the keyboard.
*
* Add support for hover.
*/
.touch .contextual-region .element-invisible.element-focusable,
.contextual-region:hover .element-invisible.element-focusable {
clip: auto;
overflow: visible;
height: auto;
}
/* Override the position for contextual links. */
.contextual-region .element-invisible.element-focusable:active,
.contextual-region .element-invisible.element-focusable:focus,
.contextual-region:hover .element-invisible.element-focusable,
.contextual-region-active .element-invisible.element-focusable,
.touch .contextual-region .element-invisible.element-focusable {
position: relative !important;
}
This diff is collapsed.
...@@ -91,6 +91,9 @@ function contextual_library_info() { ...@@ -91,6 +91,9 @@ function contextual_library_info() {
'dependencies' => array( 'dependencies' => array(
array('system', 'jquery'), array('system', 'jquery'),
array('system', 'drupal'), array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'backbone'),
array('system', 'modernizr'),
array('system', 'jquery.once'), array('system', 'jquery.once'),
), ),
); );
...@@ -107,8 +110,9 @@ function contextual_library_info() { ...@@ -107,8 +110,9 @@ function contextual_library_info() {
), ),
'dependencies' => array( 'dependencies' => array(
array('system', 'jquery'), array('system', 'jquery'),
array('system', 'jquery.once'), array('system', 'drupal'),
array('system', 'backbone'), array('system', 'backbone'),
array('system', 'jquery.once'),
array('system', 'drupal.tabbingmanager'), array('system', 'drupal.tabbingmanager'),
array('system', 'drupal.announce'), array('system', 'drupal.announce'),
), ),
......
...@@ -16,15 +16,17 @@ ...@@ -16,15 +16,17 @@
*/ */
.contextual .trigger { .contextual .trigger {
float: left; float: left;
right: 0; right: auto;
left: 2px; left: 2px;
} }
/** /**
* Contextual links. * Contextual links.
*/ */
.contextual .contextual-links { .contextual-region .contextual .contextual-links {
border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px;
float: left; float: left;
left: 2px;
right: auto;
text-align: right; text-align: right;
} }
...@@ -13,6 +13,14 @@ ...@@ -13,6 +13,14 @@
z-index: 500; z-index: 500;
} }
/**
* Contextual region.
*/
.contextual-region.focus {
outline: 1px dashed #d6d6d6;
outline-offset: 1px;
}
/** /**
* Contextual trigger. * Contextual trigger.
*/ */
...@@ -34,15 +42,16 @@ ...@@ -34,15 +42,16 @@
padding: 0 2px; padding: 0 2px;
position: relative; position: relative;
right: 2px; /* LTR */ right: 2px; /* LTR */
width: 28px; /* Override the .element-focusable height: auto */
width: 28px !important;
text-indent: -9999px; text-indent: -9999px;
z-index: 2;
cursor: pointer; cursor: pointer;
} }
.contextual-links-active .trigger { .contextual.open .trigger {
border-bottom-color: transparent; border-bottom-color: transparent;
border-radius: 13px 13px 0 0; border-radius: 13px 13px 0 0;
box-shadow: none; box-shadow: none;
z-index: 2;
} }
/** /**
...@@ -59,10 +68,10 @@ ...@@ -59,10 +68,10 @@
margin: 0; margin: 0;
padding: 0.25em 0; padding: 0.25em 0;
position: relative; position: relative;
right: 2px; /* LTR */
text-align: left; /* LTR */ text-align: left; /* LTR */
top: -1px; top: -1px;
white-space: nowrap; white-space: nowrap;
z-index: 1;
} }
.contextual-region .contextual .contextual-links li { .contextual-region .contextual .contextual-links li {
background-color: #fff; background-color: #fff;
......
...@@ -14,6 +14,49 @@ ...@@ -14,6 +14,49 @@
use Drupal\Core\Entity\EntityInterface; use Drupal\Core\Entity\EntityInterface;
use Drupal\edit\Form\EditFieldForm; use Drupal\edit\Form\EditFieldForm;
use Drupal\Component\Utility\NestedArray; use Drupal\Component\Utility\NestedArray;
use Drupal\field\Plugin\views\field\Field;
/**
* Implements hook_preprocess_views_view_fields().
*
* Still a lot of handwaving for marking up views fields as in-place editable.
*/
function edit_preprocess_views_view_field(&$variables) {
if (user_access('access in-place editing')) {
// Early-return if output is empty.
if (empty($variables['output'])) {
return;
}
$views_field = $variables['field'];
// If this Views Field is hidden from display, then don't alter its output.
if ($views_field->options['exclude']) {
return;
}
// Only annotate Field API View Fields
if ($views_field instanceof Field) {
// Entity/Field metadata.
$entity = $variables['row']->_entity;
$field_name = $views_field->field_info->id;
$langcode = $views_field->field_info->langcode;
// Views metadata.
$view_name = $variables['view']->storage->id;
$view_display = $variables['view']->current_display;
$view_row = $variables['view']->row_index;
// Build edit ID; the view mode is now a hybrid that contains the
// necessary metadata for Views.
$edit_id = $entity->entityType() . '/' . $entity->id() . '/' . $field_name . '/' . $langcode . "/views-$view_name-$view_display-$view_row";
// @todo Push the rendering of the data-edit-id attribute deeper into the
// Views rendering pipeline instead of wrapping content in <span> tags.
$variables['output'] = '<span data-edit-id="' . $edit_id . '">' . $variables['output'] . '</span>';
}
}
}
/** /**
* Implements hook_custom_theme(). * Implements hook_custom_theme().
......
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