• View
• Edit
• History
• Attach
• Print
• Backlinks

ClassTags

 It has been pointed out that this code may be redundant, as these features are already built into PMWiki:
   When I wrote this I had not found the existing style / block markups.  
   As always I enjoy the learning experience of getting things to work for me with PMWiki, thus ClassTags was born.
   However, having now been shown the built-in markups, I find on my server, with my other code runnning, the built-in markups 
   don't always work for me; while ClassTags has remained reliable across my dozen or so pmwiki sites.
   Most likely there is still something for me to learn, some setting to change, but until I get there... this works.

   I will leave it up to the reader if you want to use my method or the built-in functions.
   Please see WikiStyles#blocks. For standard (:div ..:) markup
   See also BlockMarkup.

Questions answered by this recipe:

• How do I apply styles and java-script to a block of text in my page, from Edit-Mode?
• How can I make page content fold-able (hide or un-hide with a mouse-click) while in Edit-Mode?
• How can I use Markup to insert images with the "toggle" class, -
  specifically for use with UnToggle to make a toggle-button?

This is a Swiss Army Knife for CSS, HTML and JS:

• Wiki-editors can use simple Markup to put selected text into a div with a user defined class.
• Once you have loaded CSS or javascript to your wiki installation, you may call it/apply it at using the normal wiki Edit!
• This makes more code available from Edit while still preventing the Editor from inserting their own js.

Applications:

• Use this to Make the UnToggle recipe or my image enabled variant Toggler recipe work on-the-fly for text-folding, code-folding etc. from any page.
• In fact, you can put any block of text or other content, inside of a div with a User Named Class: for custom styling using css.
• Likewise, by inserting a div with a specific ID or Classname, you can interact with it using already loaded JS.
• See the notes below on updating the UnToggle recipe to work from Markup,

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.

Description

Adds Markup to allow a selected block of content to be given a user-defined class name from Edit Mode.
Usefull with UnToggle or Toggler to create folded-content!
More specifically, the selected block is placed inside a <div>, which optionally, can be given any name you like!

Thus, if you have css or javascript code that references a class name , from edit-mode in your Wiki, you can create a <div>
with that class name, so it will now be governed by the css or script. Such as the toggle mode, or to create a block with a
special background or font, or maybe one that stays in one place on the screen, use your imagination!

The nice thing here is the Editor can only use code you have already built-in, they cannot add any dangerous code.

Installation

If you just want to add the ClassTag Markup you need the following PHP:
Either, download the full file classtags.phpΔ, or Make a text file named "classtags.php" and Copy and Paste the ClassTag PHP Code below into that file

Place the classtags.php file in your cookbook directory

e.g. https://www.mywikisite.org/pmwiki/cookbook/classtags.php

Now add a line to your {pmwiki}/local/config.php file

include_once("$FarmD/cookbook/classtags.php");

<?php if (!defined('PmWiki')) exit(); 

##----------------->>  ClassTags for PmWiki  <<--------------------------- 
  # Written for PmWiki in 2020 by Kirk Siqveland - www.CyberTamer.com
  # The following text is into the Public domain.
  # This code will add Markup to your normal Edit interface
#
  # This can stand alone, or be used with the UnToggle and Toggler Recipes
  # To create folding Text and Content


## Re-class-ify PHP code:
## This will enclose Marked-Up Content in a <div> named 'class-tag' by adding markup at the beginning 
## and end of the selection just like we use for bold or italics, but instead of quote marks we 
## Open with  {|  and then close with  |}
## From your PMWiki edit mode you would enter something something like this:
##    {|Click Me!|}

Markup( 'classtag',
    'directives',
    '/\\{\\|(.*?)\\|\\}/',
    "<div class='class-tag'>$1</div>"); 
## Then if you inspect the page in View mode for its html it would look something like this: 
##
##    <div class='class-tag'>Click Me!</div>


## For a custom class name, which allows direct application of CSS or JS, we use the same code but with a twist:
## To make it work, we add a segment to the Markup declaring the Custom Class-Name:
## We start with  {|  but add a name - with no spaces, followed by two pipes || after that it is the same as ClassTag.
##
##    {|MyNewClass||Click Me!|}

## By running this second Markup routine, we replace the newly inserted "class-tag" class name with the user declared name.
Markup( 'classmod',
    'directives',
    "/'class-tag'>(.*?)\\|\\|/",
    '"$1">');
## Now the html for the page would end up like this: 
##
##    <div class='MyNewClass'>Click Me!</div>


## Finally if you are using UnToggle or Toggler for Folding Text / Content we bracket the Content we want to fold with  {:|  and  |:}
## Note this must be IMMEDIATELY after the Click Me! (or whatever toggle-text you use for the toggle)
## Again, from the Edit Mode, we place the text/Content inside the markup block:
## {:|Lorem ipsum ... est laborum.|:}
Markup( 'toggleclass',
    'directives',
    '/\\{:\\|(.*?)\\|:\\}/',
    "<div class='toggle'>$1</div>");

## If we put it all together it would look like this in the Edit Mode:

##      {|toggle||Click Me!|}{:|First-Click: you see me... Next-Click: You don't!|:}
## Notice you can not add a line break in Edit mode or it won't work, but we will add one for you in View mode.


## Finally we can Toggle with an Image: - the address I use here points to what I call a foldmark
##  foldmark.png is black for light backgrounds, if you change it to fm_yellow.png you get a yellow mark for dark backgrounds.
##  There are a number of foldmarks available now in different colors.
Markup('foldmark', 'directives',
  '/\\(:foldmark:\\)/',
  Keep("<img src='https://www.snippetspub.com/media/foldmarks/foldmark.png' alt='text pleat marker' style='display: inline-block;' class='toggle'>") );

... and you are done!

Configuration

None needed, but if you want the default class name to be something other than 'class-tag' just change the php code.

Usage

On any page, in Edit mode, use the markup "{|" to start a block and "|}" to end a block. e.g.:

{|Here is the text I want placed in a <div> and given the class name 'class-tag'|}

Now if you want a custom name for a similar block of text use the same End Markup, and the same Start Markup but
followed immediately by the new class name to use ending with "||" e.g.:

{|foldingtext||Here is the text I want placed in a <div> and given the class name 'foldingtext'|}

And Finally if you are using UnToggle or Toggler to make your folding content:

• Start by using the markup "{:|" and "|:}" to surround the content you want folded.
• Then immediately before that content add either,
  • Toggle Text by typing the following: {|toggle||The Visible Text to Click|:}
  • Or: Add a toggle icon with, using following: (:foldmark1:)
  Actually, you still need one more tweak to get that last bit to work, see Notes:

Notes

I wrote this code to be able to add content folding from an icon to my Wiki.
Since the UnToggle recipe already existed,

I just need to make this ClassTags Markup for hyper-text creation from the Edit Mode!

But, to add an image button, you need one more line in the javascript from UnToggle:
Add this to the bottom of the untoggle.js file, which you already added to your /pub directory.
Or use the Toggler recipe.

toggleNextByTagAndClassName("img",'toggle');

NB! You will notice I hard coded the address of the image in the code above, you are welcome to use my images,
but it would be nice if you copy them to your own server.

I have made several of the foldmark 'icons', really images to use with the "toggle" class.\\ They have transparent backgrounds to blend with your page better.
* Foldmark1 is grayscale for use on a light background.

• I'm making more to use on dark backgrounds, and with different colors.

They are available in my https://www.snippetspub.com/Snippets/Wiki-CodeFolding page
The images on that directory are now public domain.

To do / some day / maybe

If you have future plans or wishes for this recipe.

Change log / Release notes

Submitted to PmWiki 2020-09-26

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

Toggler

UnToggle

Contributors

Comments

See discussion at ClassTags-Talk