Creating Admin Buttons - abeyang/a2f-Medium-Hatch GitHub Wiki

Step 1

If you want to create a new button you need to start by going to a2f-Medium-Hatch/site/panel/blueprints and whichever page you want to add the button to you need to put the name of the button in the file for example I want to add a event button into post page so I open post.php and add -event into the button. It would look something like below.

text:
	label: content
	type: textarea
	size: large
	required: true
	buttons: 
		- h2
		- h3
		- bold
		- italic
		- email
		- link
		- event

At this point nothing should happen because we don't have anything coded for event yet. Adding and removing the text -event will toggle displaying it or not if it is coded.

Step 2

Now we want to go into a2f-Medium-Hatch/panel/lib/form.php and add event into the array of buttons and format the way we want it to look following the example of the other buttons. It would look something like below.

$available = array(
  'h1'     => '<a href="#h1" rel="tag" data-tag-open="# ">' . l::get('form.buttons.h1') . '</a>',
  'link'   => '<a href="#form-overlay-link" rel="overlay">' . l::get('form.buttons.link') . '</a>',
  'email'  => '<a href="#form-overlay-email" rel="overlay">' . l::get('form.buttons.email') . '</a>',
  'event'  => '<a href="#form-overlay-event" rel="overlay">' . l::get('form.buttons.event') . '</a>',

In the array where we called event we call form-overlay-event and l::get(form.buttons.event) which are the layout of the pop-up that we enter the information in and the text of the actual clickable button. l::get() is a function in kirby that gets the text that we want to insert into the button. The form.buttons.event needs to be added in the a2f-Medium-Hatch/panel/languages/en.php. You want it to look like something below. The en.php is a file with one array in it that has a lot of things in it.

'form.overlay.event.title' => 'Insert Event',
'form.overlay.event.name' => 'Insert event name',
'form.overlay.event.date' => 'Insert event date',
'form.overlay.event.time' => 'Insert event time',
'form.overlay.event.location' => 'Insert event location',
'form.overlay.event.miscinfo' => 'Insert misc info',
'form.overlay.event.button' => 'Insert Event',

form-overlay-event needs to be put in a2f-Medium-Hatch/panel/snippets/form.overlays.php here we call l::get() again and for each field we want in the button we need to add it to a2f-Medium-Hatch/panel/languages.en.php. You want to add something like what is below.

<div id="form-overlay-event" class="form-overlay overlay modal" data-tag="event">
  <form method="post">
    <fieldset>
      <h3><?php echo l::get('form.overlay.event.title') ?></h3>

      <div class="field">
        <label><?php echo l::get('form.overlay.event.name') ?></label>
     <input type="event" name="name" class="input" />      
      </div>  
      <div class="field">
        <label><?php echo l::get('form.overlay.event.date') ?></label>
        <input type="date" name="date" class="input" />      
      </div>  
      <div class="field">
        <label><?php echo l::get('form.overlay.event.time') ?></label>
     <input type="time" name="time" class="input" />      
      </div>  
      <div class="field">
        <label><?php echo l::get('form.overlay.event.location') ?></label>
        <input type="text" name="location" class="input" />      
      </div>  
      <div class="field">
        <label><?php echo l::get('form.overlay.event.miscinfo') ?></label>
        <input type="text" name="misc" class="input" />      
      </div>  
      <div class="buttons">
        <input type="submit" name="ok" value="<?php echo l::get('form.overlay.event.button') ?>" />
        <input class="cancel" type="submit" value="<?php echo l::get('cancel') ?>" />
      </div>
    </fieldset>
  </form>
</div>

At this point your button should be working and showing on the site. What we might want to do now is change how the kirby tag is formated when the user presses the button. For example if the user presses the event button now it might show (event: Myevent time: 7:30) but we might want to add a possibility for a date or even text. If we want to change that information we have to go in a2f-Medium-Hatch/panel/assets/js/panel.js and edit a function here called $this.link = function(modal) and add code that would incorporate the new features you want.

Now that you created a button that lets you create your very own kirby tag we need to convert that into html for the actual site. For that we go into a2f-Medium-Hatch/site/plugins/kirbytext.extended.php. The code below is what I have for the event button. If we wanted to add another button we would just define custom tags and attributes that the button would use. Then create a function for the button that returns the html code you want to use.

<?php

class kirbytextExtended extends kirbytext {
    function __construct($text, $markdown=true) {
       	    parent::__construct($text, $markdown);

	
		    // dfine custom tags
		    $this->addTags('event');

		    //define custom attributes
		    $this->addAttributes('date');
		    $this->addAttributes('time');
		    $this->addAttributes('location');
		    $this->addAttributes('misc');

    }



    // define a function for each new tag you specify
    function event($params) {
	    // do something with the passed params here.
	    $name = $params['event'];
	    $date = $params['date'];
	    $time = $params['time'];
	    $location = $params['location'];
	    $misc = $params['misc'];

	    //define default values for attributes

	    return '<div class="event">
	      		    <h3> ' . $name . '</h3>
	     		    <div> ' . $date . ' ' . $time . '</div>
      			    <div> ' . $location . '</div>
				    <div> ' . $misc . '</div>
			    </div>';
    }



}

?>
⚠️ **GitHub.com Fallback** ⚠️