Yes. OK, let's do it. Let's assume you have setup a workbench directory, your extension is named colorize and you have a line like:
"ramon/colorize": "dev-master",
in the "require": { } part of your composer.json file in the flarum root directory. A value of *@dev is recommanded and probably better, but it works with dev-master too, I don't remember where I got that from.
Now we need a folder colorize inside your workbench folder. This folder needs a composer.json file and a bootstrap.php file.
composer.json:
{
"name": "ramon/colorize",
"type": "flarum-extension",
"description": "...",
"require": {
"flarum/core": "^0.1.0-beta.7"
},
"extra": {
"flarum-extension": {
"title": "...",
"icon": {
"image": "...",
"backgroundColor": "...",
"backgroundSize": "cover",
"backgroundPosition": "center"
}
}
}
}
The bootstrap.php file sets up your CSS and JS ressources.
<?php
use Flarum\Event\ConfigureClientView;
use Illuminate\Contracts\Events\Dispatcher;
return function (Dispatcher $events) {
$events->listen(ConfigureClientView::class, function (ConfigureClientView $event) {
if ($event->isForum()) {
$event->addAssets([
__DIR__ . '/js/forum/dist/extension.js',
__DIR__ . '/less/forum/extension.less',
]);
$event->addBootstrapper('ramon/colorize/main');
}
});
};
This means, you need a js/forum folder and a less/forum folder within your colorize folder.
We will keep the less/forum folder empty for the time being, we will add content here later.
Inside the js/forum folder, there is a package.json file:
{
"private": true,
"devDependencies": {
"gulp": "^3.8.11",
"flarum-gulp": "^0.1.0"
}
}
... a Gulpfile.js file:
var flarum = require('flarum-gulp');
flarum({
modules: {
'ramon/colorize': [
'src/*.js'
]
}
});
... and a srcfolder with a main.js file inside.
This file contains our Javascripts.
import {extend, override} from 'flarum/extend';
import app from 'flarum/app';
import WelcomeHero from 'flarum/components/WelcomeHero';
import UserPage from 'flarum/components/UserPage';
import PageHero from 'sijad/pages/components/PageHero';
import UserDirectoryList from 'flagrow/user-directory/components/UserDirectoryList';
import TagHero from 'flarum/tags/components/TagHero';
import DiscussionHero from 'flarum/components/DiscussionHero';
function removeBodyClasses(hero) {
extend(hero.prototype, 'view', function(view) {
$('body').removeClass (function (index, className) {
return (className.match (/(^|\s)col\S+/g) || []).join(' ');
});
});
}
app.initializers.add('colorize', function() {
// Update the class of the <body> element with the first tag to enable restyling page elements
removeBodyClasses(WelcomeHero);
removeBodyClasses(UserPage);
removeBodyClasses(PageHero);
if (UserDirectoryList) {
removeBodyClasses(UserDirectoryList);
}
extend(TagHero.prototype, 'view', function(vdom) {
var hero = document.querySelector(".Hero");
if (hero) {
//console.log(hero.style.backgroundColor);
$('body')
.removeClass (function (index, className) {
return (className.match (/(^|\s)col\S+/g) || []).join(' ');
})
.addClass('col-'+hero.style.backgroundColor
.replace('rgb(', '')
.replace(', ', '-')
.replace(', ', '-')
.replace(')', '')
);
}
});
extend(DiscussionHero.prototype, 'view', function (view) {
var hero = document.querySelector(".Hero");
if (hero) {
//console.log(hero.style.backgroundColor);
$('body')
.removeClass (function (index, className) {
return (className.match (/(^|\s)col\S+/g) || []).join(' ');
})
.addClass('col-'+hero.style.backgroundColor
.replace('rgb(', '')
.replace(', ', '-')
.replace(', ', '-')
.replace(')', '')
);
}
});
});
The content inside the js/forum/src folder needs to be compiled, that's done via Gulp. Gulp needs to be installed on your development machine and called from within the js/forum folder. Just type gulp, Gulp will know from the Gulpfil.js file what to do. After that, call php flarum cache:clear from within the Flarum root folder to clear your cache.
Now you should find your extension in the admin section, activate it.
Hopefully your forum works as before. Now use inspect element in your browser to see, whether classes are added to the body element and changed whenever you change the tags. When that works fine, we will work on the CSS part (or LESS to be precise).
