Last active
August 4, 2019 14:50
-
-
Save mortenson/776ba1407daa0bf48ad3b3e6e7a48cad to your computer and use it in GitHub Desktop.
Thinking about single file Drupal frontend components... Edit: Now live at https://drupal.org/project/sfc !
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
class SayHello implements ComponentInterface { | |
const name = 'sayhello'; | |
const template = <<<TWIG | |
{% embed "@components/bigtext" %} | |
{% block content Hello {{ name }}! %} | |
{% endembed %} | |
TWIG; | |
function preProcess($variables) { | |
if (!isset($variables['name'])) { | |
$variables['name'] = \Drupal::currentUser()->getDisplayName(); | |
} | |
} | |
} | |
class BigText implements ComponentInterface { | |
const name = 'bigtext'; | |
const template = <<<TWIG | |
<p class="component-big-text">{% block content %}{% endblock %}</p> | |
TWIG; | |
// Use inline library definitions to make development easier. | |
// Paths are relative to file. | |
const library = [ | |
'css' => [ | |
'theme' => [ | |
'big-text.css' => [], | |
], | |
], | |
'dependencies' => [ | |
'drupal/core', | |
'drupal/jquery', | |
], | |
]; | |
// Or maybe do everything inline? | |
const dependencies = [ | |
'drupal/core', | |
'drupal/jquery', | |
]; | |
const css = <<<CSS | |
.component-big-text { font-size: 100px; } | |
CSS; | |
const js = <<<JS | |
(function($, Drupal) { | |
Drupal.behaviors.copyFieldValue = { | |
attach: function attach(context) { | |
$('.component-big-text', context).once(function () { | |
$(this).on('click', function () {}); | |
}); | |
} | |
}; | |
})(jQuery, Drupal); | |
JS; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment