Genuine (wearegenuine.com)
Dev(up); podcast (developingup.com)
All the internet places: mikemiles86
TYPES OF FLEXIBILITIES AND CLASSIFICATION OF FLEXIBLE MANUFACTURING SYSTEMS
"Expansion Flexibility - The capability of building a system, and expanding it as needed, easily and modularly."
- Jim Browne, 1984
"Could you change the menu things on the homepage?"
attributes:
class:
label: ''
description: ''
target:
label: ''
description: ''
options:
_blank: 'New window (_blank)'
_self: 'Same window (_self)'
style:
label: ''
description: ''
_core:
default_config_hash: 9nRDOclwSlz2Os9mJXM1LXNbV2q-bADV0zipiWPXymk
<!-- THEME DEBUG -->
<!-- END OUTPUT from 'core/themes/classy/templates/navigation/menu.html.twig'
{# ... #}
{% if items %}
{# ... #}
{% for item in items %}
{# ... #}
<li{{ item.attributes.addClass(classes) }}>
{% if item.title == 'Twig' %}
{% set style = 'background:#0F0;color:#F00' %}
{{ link(item.title ~ ' Alt', item.url, { 'style': style }) }}
{% else %}
{{ link(item.title, item.url) }}
{% endif %}
{# ... #}
</li>
{% endfor %}
</ul>
{% endif %}
flex_theme/templates/menu--main.html.twig
.menu--main .menu li:nth-child(5) a {
background: #0000FF;
color: #FFF;
}
themes/flex_theme/css/menu_alter.css
menu-alter:
version: VERSION
css:
component:
css/menu_alter.css: {}
themes/flex_theme/flex_theme.libraries.yml
name: Flex Theme
type: theme
description: An theme to demo the flexibility of Drupal 8.
package: Core
version: VERSION
core: 8.x
base theme: bartik
libraries:
- flex_theme/menu-alter
themes/flex_theme/flex_theme.info.yml
(function ($, Drupal) {
"use strict";
Drupal.behaviors.flexThemeMenuAlterMain = {
attach: function (context) {
$('.menu--main ul.menu li a').each(function(){
if ($(this).attr('href') == '/node/5') {
$(this).addClass('yellow-menu');
$(this).attr('style', 'color: #000;');
$(this).attr('target', '_blank');
$(this).text($(this).text() + Drupal.t(' Alt'));
}
});
}
}
})(jQuery, Drupal);
themes/flex_theme/js/menu_alter_main.js
.yellow-menu {
background: #FFFF00;
}
themes/flex_theme/css/menu_alter_main.css
menu-alter:
version: VERSION
css:
component:
css/menu_alter.css: {}
menu-alter-main:
version: VERSION
css:
component:
css/menu_alter_main.css: {}
js:
js/menu_alter_main.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/drupal
themes/flex_theme/flex_theme.libraries.yml
{{ attach_library('flex_theme/menu-alter-main') }}
{# ... #}
{% if items %}
{# ... #}
{% for item in items %}
{# ... #}
<li{{ item.attributes.addClass(classes) }}>
{% if item.title == 'Twig' %}
{% set style = 'background:#0F0;color:#F00' %}
{{ link(item.title ~ ' Alt', item.url, { 'style': style }) }}
{% else %}
{{ link(item.title, item.url) }}
{% endif %}
{# ... #}
themes/flex_theme/templates/menu--main.html.twig
<!-- THEME DEBUG -->
<!-- END OUTPUT from 'themes/flex_theme/templates/menu--main.html.twig'
// Implements hook_preprocess_HOOK().
function flex_module_preprocess_menu__main(&$variables) {
// Loop through all menu tabs.
foreach ($variables['items'] as &$menu_tab) {
// Current tab pointing to node/6 ?
if ($menu_tab['url']->toString() == '/node/6') {
// Alter Title
$menu_tab['title'] .= ' Alt';
// Existing attributes?
$attributes = $menu_tab['url']->getOption('attributes');
// Add custom styling.
$attributes['style'] .= 'color:#FFF;background:#F00;';
// Add back modified attributes.
$menu_tab['url']->setOption('attributes', $attributes);
}
}
}
module/custom/flex_module/flex_module.module
namespace Drupal\flex_module;
use Drupal\Core\DependencyInjection\ServiceProviderBase;
use Drupal\Core\DependencyInjection\ContainerBuilder;
class FlexModuleServiceProvider extends ServiceProviderBase {
/**
* {@inheritdoc}
*/
public function alter(ContainerBuilder $container) {
// Override menu_link_tree class with custom.
$definition = $container->getDefinition('menu.link_tree');
$definition->setClass('Drupal\flex_module\FlexModuleMenuLinkTree');
}
}
modules/custom/flex_module/src/FlexModuleServiceProvider.php
namespace Drupal\flex_module;
use Drupal\Core\Menu\MenuLinkTree;
class FlexModuleMenuLinkTree extends MenuLinkTree {
// Overrides \Drupal\Core\Menu\MenuLinkTree::build().
public function build(array $tree) {
$build = parent::build($tree);
if (isset($build['#items']) && $build['#theme'] == 'menu__main') {
$n = 0;
foreach ($build['#items'] as &$item ) {
if (++$n == 8) {
// Change Title, path and add styling.
$item['title'] .= ' Alt';
$item['url']->setOption('attributes', array(
'style' => 'color:#00F;background:#FFA500;',
));
}
}
}
return $build;
}
}
modules/custom/flex_module/src/FlexModuleMenuLinkTree.php
"Could you change the menu things on the homepage?"
"Could you make Drupal (8) do X, Y and Z?"
...but I need more details
This presentation
Annotated Slides
Demo code (theme and module)
Drupal Brain Diagram
My podcast
Questions?