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

##----------------->>  ReClassify 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 Recipe
  # 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 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
##  foldmark1.png is black for light backgrounds, if you change it to foldmark2.png you get a yellow mark for dark backgrounds.
##  I intend to also have foldmark3.png in cyan, and foldmark4.png in pale green, foldmark5.png in white and foldmark6.png in red.
Markup('foldmark1', 'directives',
  '/\\(:foldmark1:\\)/',
  Keep("<img src='https://www.cybertamer.com/vbapex/media/foldmark1.png' alt='text pleat marker' style='display: inline-block;' class='toggle'>") );