Skip to content

GitLab

D
drupal
Commit 6d5c2113 authored by Dries's avatar Dries
Browse files
Options

Issue #1874664 by Wim Leers, jessebeach, tkoleary, Gábor Hojtsy, quicksketch,... 

Issue #1874664 by Wim Leers, jessebeach, tkoleary, Gábor Hojtsy, quicksketch, Bojhan: Reconcile 'Edit' toolbar option with local tasks (tabs) and contextual links for editing.
parent 878a4162
Hide whitespace changes
Inline Side-by-side
Showing with 566 additions and 632 deletions
core/modules/contextual/contextual.js
View file @ 6d5c2113
......@@ -7,6 +7,8 @@
"use strict";
var contextuals = [];
/**
* Attaches outline behavior for regions associated with contextual links.
*/
......@@ -14,7 +16,14 @@ Drupal.behaviors.contextual = {
attach: function (context) {
$('ul.contextual-links', context).once('contextual', function () {
var $this = $(this);
$this.data('drupal-contextual', new Drupal.contextual($this, $this.closest('.contextual-region')));
var contextual = new Drupal.contextual($this, $this.closest('.contextual-region'));
contextuals.push(contextual);
$this.data('drupal-contextual', contextual);
});
// Bind to edit mode changes.
$('body').once('contextual', function () {
$(document).on('drupalEditModeChanged.contextual', toggleEditMode);
});
}
};
......@@ -54,16 +63,33 @@ Drupal.contextual.prototype.init = function() {
.attr('aria-pressed', false)
.prependTo(this.$wrapper);
// The trigger behaviors are never detached or mutated.
this.$region
.on('click.contextual', '.contextual .trigger', $.proxy(this.triggerClickHandler, this))
.on('mouseleave.contextual', '.contextual', {show: false}, $.proxy(this.triggerLeaveHandler, this));
// Attach highlight behaviors.
this.attachHighlightBehaviors();
};
/**
* Attaches highlight-on-mouseenter behaviors.
*/
Drupal.contextual.prototype.attachHighlightBehaviors = function () {
// Bind behaviors through delegation.
var highlightRegion = $.proxy(this.highlightRegion, this);
this.$region
.on('click.contextual', '.contextual .trigger', $.proxy(this.triggerClickHandler, this))
.on('mouseenter.contextual', {highlight: true}, highlightRegion)
.on('mouseleave.contextual', {highlight: false}, highlightRegion)
.on('mouseleave.contextual', '.contextual', {show: false}, $.proxy(this.triggerLeaveHandler, this))
.on('click.contextual', '.contextual-links a', {highlight: false}, highlightRegion)
.on('focus.contextual', '.contextual-links a, .contextual .trigger', {highlight: true}, highlightRegion)
.on('blur.contextual', '.contextual-links a, .contextual .trigger', {highlight: false}, highlightRegion);
.on('mouseenter.contextual.highlight', {highlight: true}, highlightRegion)
.on('mouseleave.contextual.highlight', {highlight: false}, highlightRegion)
.on('click.contextual.highlight', '.contextual-links a', {highlight: false}, highlightRegion)
.on('focus.contextual.highlight', '.contextual-links a, .contextual .trigger', {highlight: true}, highlightRegion)
.on('blur.contextual.highlight', '.contextual-links a, .contextual .trigger', {highlight: false}, highlightRegion);
};
/**
* Detaches unhighlight-on-mouseleave behaviors.
*/
Drupal.contextual.prototype.detachHighlightBehaviors = function () {
this.$region.off('.contextual.highlight');
};
/**
......@@ -139,6 +165,16 @@ Drupal.contextual.prototype.showLinks = function(show) {
};
/**
* Shows or hides all pencil icons and corresponding contextual regions.
*/
function toggleEditMode (event, data) {
for (var i = contextuals.length - 1; i >= 0; i--) {
contextuals[i][(data.status) ? 'detachHighlightBehaviors' : 'attachHighlightBehaviors']();
contextuals[i].$region.toggleClass('contextual-region-active', data.status);
}
}
/**
* Wraps contextual links.
*
......
core/modules/contextual/contextual.module
View file @ 6d5c2113
......@@ -5,6 +5,41 @@
* Adds contextual links to perform actions related to elements on a page.
*/
/**
* Implements hook_toolbar().
*/
function contextual_toolbar() {
if (!user_access('access contextual links')) {
return;
}
$tab['contextual'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'#type' => 'html_tag',
'#tag' => 'button',
'#value' => t('Edit'),
'#attributes' => array(
'class' => array('icon', 'icon-edit'),
'role' => 'button',
'aria-pressed' => 'false',
),
// @todo remove this once http://drupal.org/node/1908906 lands.
'#options' => array('attributes' => array()),
),
'#wrapper_attributes' => array(
'class' => array('element-hidden', 'contextual-toolbar-tab'),
),
'#attached' => array(
'library' => array(
array('contextual', 'drupal.contextual-toolbar'),
),
),
);
return $tab;
}
/**
* Implements hook_help().
*/
......@@ -45,7 +80,9 @@ function contextual_library_info() {
'website' => 'http://drupal.org/node/473268',
'version' => VERSION,
'js' => array(
$path . '/contextual.js' => array(),
// Add the JavaScript, with a group and weight such that it will run
// before modules/contextual/contextual.toolbar.js.
$path . '/contextual.js' => array('group' => JS_LIBRARY, 'weight' => -2),
),
'css' => array(
$path . '/contextual.base.css' => array(),
......@@ -57,6 +94,23 @@ function contextual_library_info() {
array('system', 'jquery.once'),
),
);
$libraries['drupal.contextual-toolbar'] = array(
'title' => 'Contextual Links Toolbar Tab',
'version' => VERSION,
'js' => array(
// Add the JavaScript, with a group and weight such that it will run
// before modules/overlay/overlay-parent.js.
$path . '/contextual.toolbar.js' => array('group' => JS_LIBRARY, 'weight' => -1),
),
'css' => array(
$path . '/contextual.toolbar.css' => array(),
),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'jquery.once'),
array('system', 'backbone'),
),
);
return $libraries;
}
......
core/modules/contextual/contextual.theme-rtl.css
View file @ 6d5c2113
......@@ -16,6 +16,8 @@
*/
.contextual .trigger {
float: left;
right: 0;
left: 2px;
}
/**
......
core/modules/contextual/contextual.theme.css
View file @ 6d5c2113
......@@ -10,39 +10,39 @@
position: absolute;
right: 0; /* LTR */
top: 2px;
z-index: 999;
}
.contextual-region-active {
outline: 1px dashed #d6d6d6;
outline-offset: 1px;
z-index: 500;
}
/**
* Contextual trigger.
*/
.contextual .trigger {
background: transparent url("images/gear-select.png") no-repeat 2px 0;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
background-attachment: scroll;
background-color: #fff;
background-image: url("../../misc/edit.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 16px 16px;
border: 1px solid #ddd;
border-radius: 13px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
/* Override the .element-focusable height: auto */
height: 18px !important;
height: 28px !important;
float: right; /* LTR */
margin: 0;
overflow: hidden;
padding: 0 2px;
position: relative;
width: 34px;
right: 2px; /* LTR */
width: 28px;
text-indent: -9999px;
z-index: 2;
cursor: pointer;
}
.no-touch .contextual .trigger:hover,
.contextual-links-active .trigger {
background-position: 2px -18px;
}
.contextual-links-active .trigger {
background-color: #fff;
border-bottom: none;
border-color: #d6d6d6;
border-bottom-color: transparent;
border-radius: 13px 13px 0 0;
box-shadow: none;
}
/**
......@@ -52,7 +52,7 @@
*/
.contextual-region .contextual .contextual-links {
background-color: #fff;
border: 1px solid #d6d6d6;
border: 1px solid #ddd;
border-radius: 4px 0 4px 4px; /* LTR */
clear: both;
float: right; /* LTR */
......@@ -90,5 +90,7 @@
text-decoration: none;
}
.no-touch .contextual-region .contextual .contextual-links li a:hover {
background-color: #bfdcee;
color: white;
background-image: -webkit-linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
background-image: linear-gradient(rgb(78,159,234) 0%,rgb(65,126,210) 100%);
}
core/modules/contextual/contextual.toolbar-rtl.css 0 → 100644
View file @ 6d5c2113
/**
* @file
* RTL styling for contextual module's toolbar tab.
*/
.js .toolbar .bar .contextual-toolbar-tab.tab {
float: left;
}
.js .toolbar .bar .contextual-toolbar-tab button {
padding-right: 1.3333em;
}
core/modules/contextual/contextual.toolbar.css 0 → 100644
View file @ 6d5c2113
/**
* @file
* Styling for contextual module's toolbar tab.
*/
/* Tab icon. */
.icon-edit:before {
background-image: url("../../misc/edit.png");
}
.icon-edit:active:before,
.active.icon-edit:before {
background-image: url("../../misc/edit-active.png");
}
/* Tab appearance. */
.js .toolbar .bar .contextual-toolbar-tab.tab {
float: right; /* LTR */
}
.js .toolbar .bar .contextual-toolbar-tab button {
padding-bottom: 1em;
padding-top: 1em;
/* Hide tab text. */
padding-left: 1.3333em; /* LTR */
text-indent: -9999px;
}
.js .toolbar .bar .contextual-toolbar-tab button.active {
background-image:-moz-linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
background-image:-webkit-gradient(linear,color-stop(0, rgb(78,159,234)),color-stop(1, rgb(69,132,221)));
background-image: -webkit-linear-gradient(top, rgb(78,159,234) 0%, rgb(69,132,221) 100%);
background-image:linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
}
/* @todo get rid of this declaration by making toolbar.module's CSS less specific */
.js .toolbar .bar .contextual-toolbar-tab.tab.element-hidden {
display: none;
}
core/modules/contextual/contextual.toolbar.js 0 → 100644
View file @ 6d5c2113
/**
* @file
* Attaches behaviors for the Contextual module's edit toolbar tab.
*/
(function ($, Backbone, Drupal, document, localStorage) {
"use strict";
/**
* Attaches contextual's edit toolbar tab behavior.
*
* Events
* Contextual triggers an event that can be used by other scripts.
* - drupalEditModeChanged: Triggered when the edit mode changes.
*/
Drupal.behaviors.contextualToolbar = {
attach: function (context) {
$('body').once('contextualToolbar-init', function () {
var $contextuals = $(context).find('.contextual-links');
var $tab = $('.js .toolbar .bar .contextual-toolbar-tab');
var model = new Drupal.contextualToolbar.models.EditToggleModel({
isViewing: true
});
var view = new Drupal.contextualToolbar.views.EditToggleView({
el: $tab,
model: model
});
// Update the model based on overlay events.
$(document)
.on('drupalOverlayOpen.contextualToolbar', function () {
model.set('isVisible', false);
})
.on('drupalOverlayClose.contextualToolbar', function () {
model.set('isVisible', true);
});
// Update the model to show the edit tab if there's >=1 contextual link.
if ($contextuals.length > 0) {
model.set('isVisible', true);
}
// Allow other scripts to respond to edit mode changes.
model.on('change:isViewing', function (model, value) {
$(document).trigger('drupalEditModeChanged', { status: !value });
});
// Checks whether localStorage indicates we should start in edit mode
// rather than view mode.
// @see Drupal.contextualToolbar.views.EditToggleView.persist()
if (localStorage.getItem('Drupal.contextualToolbar.isViewing') !== null) {
model.set('isViewing', false);
}
});
}
};
Drupal.contextualToolbar = Drupal.contextualToolbar || { models: {}, views: {}};
/**
* Backbone Model for the edit toggle.
*/
Drupal.contextualToolbar.models.EditToggleModel = Backbone.Model.extend({
defaults: {
// Indicates whether the toggle is currently in "view" or "edit" mode.
isViewing: true,
// Indicates whether the toggle should be visible or hidden.
isVisible: false
}
});
/**
* Handles edit mode toggle interactions.
*/
Drupal.contextualToolbar.views.EditToggleView = Backbone.View.extend({
events: { 'click': 'onClick' },
/**
* Implements Backbone Views' initialize().
*/
initialize: function () {
this.model.on('change', this.render, this);
this.model.on('change:isViewing', this.persist, this);
},
/**
* Implements Backbone Views' render().
*/
render: function () {
var args = arguments;
// Render the visibility.
this.$el.toggleClass('element-hidden', !this.model.get('isVisible'));
// Render the state.
var isViewing = this.model.get('isViewing');
this.$el.find('button')
.toggleClass('active', !isViewing)
.attr('aria-pressed', !isViewing);
return this;
},
/**
* Model change handler; persists the isViewing value to localStorage.
*
* isViewing === true is the default, so only stores in localStorage when
* it's not the default value (i.e. false).
*
* @param Drupal.contextualToolbar.models.EditToggleModel model
* An EditToggleModel Backbone model.
* @param bool isViewing
* The value of the isViewing attribute in the model.
*/
persist: function (model, isViewing) {
if (!isViewing) {
localStorage.setItem('Drupal.contextualToolbar.isViewing', 'false');
}
else {
localStorage.removeItem('Drupal.contextualToolbar.isViewing');
}
},
onClick: function (event) {
this.model.set('isViewing', !this.model.get('isViewing'));
event.preventDefault();
event.stopPropagation();
}
});
})(jQuery, Backbone, Drupal, document, localStorage);
core/modules/edit/css/edit.css
View file @ 6d5c2113
......@@ -71,47 +71,14 @@
/**
* Toolbar.
*/
.icon-edit:before {
background-image: url("../images/icon-edit.png");
}
.icon-edit:active:before,
.active .icon-edit:before {
background-image: url("../images/icon-edit-active.png");
}
.js .toolbar .bar .edit-toolbar-tab.tab {
float: right;
}
.toolbar .icon-edit.edit-nothing-editable-hidden {
display: none;
}
/* In-place editing doesn't work in the overlay, so always hide the tab. */
.overlay-open .toolbar .icon-edit {
display: none;
}
/**
* Edit mode: overlay + candidate editables + editables being edited.
* Candidate editables + editables being edited.
*
* Note: every class is prefixed with "edit-" to prevent collisions with modules
* or themes. In IPE-specific DOM subtrees, this is not necessary.
*/
#edit_overlay {
position: fixed;
z-index: 250;
width: 100%;
height: 100%;
background-color: #fff;
background-color: rgba(255,255,255,.5);
top: 0;
left: 0;
}
/* Editable. */
.edit-editable {
z-index: 300;
......@@ -127,6 +94,7 @@
/* Highlighted (hovered) editable. */
.edit-editable.edit-highlighted {
z-index: 305;
min-width: 200px;
}
.edit-field.edit-editable.edit-highlighted,
......@@ -184,16 +152,6 @@
background: #f5f5f5;
}
/* Modal active: prevent user from interacting with toolbar & editables. */
.edit-form-container.edit-belowoverlay,
.edit-toolbar-container.edit-belowoverlay,
.edit-validation-errors.edit-belowoverlay {
z-index: 210;
}
.edit-editable.edit-belowoverlay {
z-index: 200;
}
......@@ -279,6 +237,10 @@
bottom: 1px;
box-shadow: 0 0 1px 1px #0199ff, 0 0 3px 3px rgba(153, 153, 153, .5);
background: #fff;
display: none;
}
.edit-highlighted .edit-toolbar-heightfaker {
display: block;
}
/* The toolbar; these are not necessarily visible. */
......
core/modules/edit/edit.info
View file @ 6d5c2113
......@@ -3,4 +3,5 @@ description = In-place content editing.
package = Core
core = 8.x
version = VERSION
dependencies[] = contextual
dependencies[] = field
core/modules/edit/edit.module
View file @ 6d5c2113
......@@ -39,42 +39,23 @@ function edit_permission() {
}
/**
* Implements hook_toolbar().
* Implements hook_contextual_links_view_alter().
*
* In-place editing builds upon contextual.module, but doesn't actually add its
* "Quick edit" contextual link in PHP (i.e. here) because:
* - that would require to add a local task menu item in the menu system, which
* doesn't make any sense, since there is no corresponding page;
* - it should only work when JavaScript is enabled, because only then in-place
* editing is possible.
*/
function edit_toolbar() {
function edit_contextual_links_view_alter(&$element, $items) {
if (!user_access('access in-place editing')) {
return;
}
$tab['edit'] = array(
'#type' => 'toolbar_item',
'tab' => array(
'#type' => 'link',
'#title' => t('Edit'),
'#href' => '',
'#options' => array(
'html' => FALSE,
'attributes' => array(
'id' => 'toolbar-tab-edit',
'class' => array('icon', 'icon-edit', 'edit-nothing-editable-hidden'),
),
),
),
'#wrapper_attributes' => array(
'class' => array('edit-toolbar-tab'),
),
'#attached' => array(
'library' => array(
array('edit', 'edit'),
),
),
);
// Include the attachments and settings for all available editors.
$attachments = drupal_container()->get('edit.editor.selector')->getAllEditorAttachments();
$tab['edit']['#attached'] = NestedArray::mergeDeep($tab['edit']['#attached'], $attachments);
return $tab;
$element['#attached'] = NestedArray::mergeDeep($element['#attached'], $attachments);
}
/**
......@@ -94,15 +75,12 @@ function edit_library_info() {
// Core.
$path . '/js/edit.js' => $options,
$path . '/js/app.js' => $options,
// Routers.
$path . '/js/routers/edit-router.js' => $options,
// Models.
$path . '/js/models/edit-app-model.js' => $options,
// Views.
$path . '/js/views/propertyeditordecoration-view.js' => $options,
$path . '/js/views/menu-view.js' => $options,
$path . '/js/views/contextuallink-view.js' => $options,
$path . '/js/views/modal-view.js' => $options,
$path . '/js/views/overlay-view.js' => $options,
$path . '/js/views/toolbar-view.js' => $options,
// Backbone.sync implementation on top of Drupal forms.
$path . '/js/backbone.drupalform.js' => $options,
......@@ -173,6 +151,16 @@ function edit_preprocess_field(&$variables) {
$variables['attributes']['data-edit-id'] = $entity->entityType() . '/' . $entity->id() . '/' . $element['#field_name'] . '/' . $element['#language'] . '/' . $element['#view_mode'];
}
/**
* Implements hook_preprocess_HOOK() for node.tpl.php.
*
* @todo Move towards hook_preprocess_entity() once that's available.
*/
function edit_preprocess_node(&$variables) {
$node = $variables['elements']['#node'];
$variables['attributes']['data-edit-entity'] = 'node/' . $node->nid;
}
/**
* Form constructor for the field editing form.
*
......
core/modules/edit/js/app.js
View file @ 6d5c2113
......@@ -47,20 +47,8 @@
editableNs: 'createeditable'
});
// Instantiate OverlayView.
var overlayView = new Drupal.edit.views.OverlayView({
el: (Drupal.theme('editOverlay', {})),
model: this.model
});
// Instantiate MenuView.
var editMenuView = new Drupal.edit.views.MenuView({