Jump to content

HappyCssClasses - let you dynamically add/remove (body)classes on the go


Can
 Share

Recommended Posts

Hey guys,

I finally got my first module ready to publish :)

It's called HappyCssClasses.

I know there is BodyClass module, which I used a lot, thanks to Kay Seliger! But lately I needed more flexibility.
First thought about a class in prepended template file like $bodyClass = "lang{$user->language->name}";
and then could extend it in template files using $bodyClass .= " blog"; of course. But there is no fun.
I want and need to learn more about classes and php so figured this could be a good use case.

So what is this module doing?

After installation (see readme) it will instantiate $bodyClasses variable which will be available in your template files (should work almost everywhere)

Then you will be able to add/remove classes as needed

Like

$bodyClasses->add("className");
$bodyClasses->add("className", 'key'); // the key is only necessary to remove a class later
$bodyClasses->add("className secondClass third-class");
$bodyClasses->add(array('first-class', 'secondClass'));
$bodyClasses->add(array('key1' => 'first-class', 'key2' => 'secondClass'));

$bodyClasses->remove('keyDos');
$bodyClasses->remove('key1 keyDos');
$bodyClasses->remove(array('key1', 'keyDos'));

There are some dynamic classes build in which you can enable by just adding the key

$bodyClasses->add("language") to add "lang-{langname}"
$bodyClasses->add("template") = "template-{templatename}"
$bodyClasses->add("published") = "published" / "unpublished"
$bodyClasses->add("pageNum") = "page-1" for pages greater than 1 it also adds "not-first"
or
$bodyClasses->add("defaults") = adds all of the 4 above (language, template, published, pageNum)
or
you could define multiple like
$bodyClasses->add("language template")

Could be in prepended template file, e.g. _init.php, or your appended template file, or of course in specific template files lice article.php

I would love to get feedback
For example, I just added the possibility to get all defaults by adding "defaults"
Is there a better way? Because I conditionally check if the added class is one of the 4 (or defaults) and need to cancel after one of thos got added.
But because the "defaults" would add all I need to make sure only to return if not defaults..

if (in_array($class, array('language', 'defaults'))) {
$this->classes['language'] = 'lang-'.$this->wire('user')->language->subtitle;
if ($class !== 'defaults') return;
}

As I said, every hint, feedback, suggestion, request, idea or anything constructive is highly appreciated :)

Check out on Github

https://github.com/CanRau/HappyCssClasses

I'm planning (like mentioned in the readme) that one can enter custom names to instantiate a second (or more) time so you could have e.g. $bodyClasses, $articleClasses, $blogClasses..thinking about implementation. And need to do some other stuff today too ;-)


One question to github, I'm using the Github app for os x at the moment. I made a seperate Repositories folder for it. And then I symlinked the module into my modules folder, otherwise I would have to copy/paste everytime I change something.
How'r you handling this? Are there better ways?

Saludos
Can

CHANGELOG

0.0.6 - Changed module name from HappyClasses to HappyCssClasses

         - Added second parameter to $bodyClasses->add("language", "fieldname")

Edited by Can
  • Like 4
Link to comment
Share on other sites

Thanks guys! Fixed it.

It started as HappyClasses, as all my modules are prefixed with Happy as in HappyGaia.com ;-)

Then I thought I should give it a more generic name..but that didn't feel right so I changed back but forgot in the topic here and didn't think about the name of the repo as I'm still quite new to github.. :)

Good job! Starting to write modules is like a rebirth - a few lines and suddenly you are a programmer. Congrats!

I also mentioned inconsistency in naming. Better pick one name and go with it.

Totally :D Finally my code starts to get more beautiful and clean..

Link to comment
Share on other sites

Okay you got me.. I changed the name to HappyCssClasses :)

Tried to add a devns branch, but I don't know how to add the corresponding files using Github Desktop (OS X)

My local folder structure is as follows

/Repositories/HappyCssClasses/master/HappyCssClasses/

/Repositories/HappyCssClasses/devns/HappyCssClasses/

How to tell devns branch that the files of this branch are at another location?

It's my first time setting up branches..if you got another folder structure?

By the way, I'm just installing the command line dev tools, so then I would be able to use terminal instead of the gui

Would be nice to get some hints, even how to google, because I got nothing on this..?!

Link to comment
Share on other sites

Sourcetree (and I believe other clients) handle the folders for the branches for you behind the scenes. Using Sourcetree I have only 1 main project folder per project (with sub-folders and files inside, of course). I start off with a master branch which I then clone to become  a 'dev' branch. My dev branch then becomes my 'working' branch. Every time I edit my files, I am working on the dev branch. When I am ready to share the code, I push the dev branch to 'origin' which in many cases is GitHub (but can be BitBucket as well). Sourcetree will ask which branches in the origin I am pushing to. I push local 'dev' to origin (i.e. remote) dev. When the code is stable enough, I merge dev to master. If I switch to master as the working branch, and edit my files, Sourcetree makes sure that my text editor is editing master files and not dev. So, it is important to ensure you have the correct branch set as the working branch. 

Earlier in the days I used to have separate folders for master and dev branches and it was just too tedious...

I suggest you Google some intro to GitHub or Git. There's some nice resources out there

Edit: Check out your repository settings RE linking your local and remote branches..

Edited by kongondo
  • Like 4
Link to comment
Share on other sites

Thanks for your little tut kongondo!

This time I created the branch using github.com, I'll dig into this a little later.

So now there is a devns branch for those using PW3. master should work with PW3 too thanks to FileCompiler, but I haven't tried it yet..

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

Hola amigos,

I had the need for some changes and now I'd like to make it completely more meaningful and useful..

So it now implements Countable, I would say the whole management of default classes is optimized and it'll optionally wrap all class names in class="class names" attribute markup which you can also customize so you could use it to define your data-processwirelove="forever and ever" or whatever you can imagine..
and as you can define only one of them you could even use it to output, actually don't have any example in mind right now, but doesn't has to limited to html attributes
uh, maybe some basic shop outputting all available t-shirt colors like "Available colors: blue green yellow"

For this I consider changing the name to something like

  • SpacedString - as it actually is exactly this a space separated string, optionally with prefix/suffix
  • SpaceSeparatedValues - like the first
  • HtmlAttributeBuilder - That's the main use case so far (at least for me) 
  • AttributeBuilder - Maybe better then HtmlAttributeBuilder as it's not limited to HTML
  • or better to keep the existing name for any reason
  • your suggestions?

would even be possible to include an option for another delimiter?! but actually I don't need that for now, so if no one requests this..

I would love to get your guys cents on this :) 

If nobody complains I would publish only a namespaced version for now as I'm only using pw 3, if really needed one could easily strip namespace and required flag

This version I'm finally planning to publish to mod directory ;) 

EDIT:
another question, should it autoload and prepopulate wire("bodyClass") or ist it better to always init manually like $itemClasses = new HappyCssClasses(); (still autoloaded), as non autoload you would have to $modules->get("HappyCssClasses") to load it before init (which isn't too bad) but when installed I guess people are actually interested in using it right?!
I might even be able to let the user decide in module settings...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...