Adding UIkit to Pinegrow: Pt. 4

Namaste!!

    Edited July 24th to add in another basic input type: the ‘slider’. Added section marked with red asterix. Sorry!

    Thanks for sticking with me on this arduous journey. In this installment, we will learn about the three (see edit above, there are four more) other basic input types – the ‘checkbox‘, ‘text‘, and ‘image‘ types, briefly examine (right Bo, like anything you type is brief) the ‘element_attribute‘ action, and look at a case for a more complex selector field. Just as a warning – I try to test everything, but I am basically wading through the Pinegrow code – a blind squirrel trying to find a nut – to understand how things work. I will point out where I’m just guessing near the end about selector usage. I typically like to teach from example, but some of what I will describe today is a little more abstract – sorry!

    In the last tutorial, I ended with some code that went unexplained. Let’s take a look at one of those sections:

//Alert close button
	var uikit_alert_close_button = new PgComponentType('ui-alert-button', 'Alert Close Button', {
		selector: 'button.uk-alert-close',
		code: '<button class="uk-alert-close">Close</button>',
		sections: {
			ui_alert_close_button: {
				name: 'Close Options',
				fields: {
					add_icon_button: {
						type: 'checkbox',
						name: 'Add close icon?',
						action: 'element_attribute',
						attribute: 'uk-close',
						empty_attribute: true,
						value: '1'
					},
					make_icon_button_large: {
						type: 'checkbox',
						name: 'Make icon larger?',
						action: 'apply_class',
						value: 'uk-close-large'
					}
				}
			}
		}
	});
	framework.addComponentType(uikit_alert_close_button);

    Just as a review, we start by assigning a new ‘PgComponentType‘ object to our variable ‘uikit_alert_close_button‘. We assign that object a type of ‘ui-alert-button‘ and a name of ‘Alert Close Button‘.  As you can see from the code key field, it is a simple button with a class of ‘uk-alert-close‘. So, our selector is ‘button.uk-alert-close‘, letting Pinegrow know that anytime it sees a button with that class it should pull up the action sections we are defining in this object. This is a simple case, but more about selectors at the end of the tutorial.

    Within our action sections, we have two options – first to add a close icon, and second to make the close icon larger. If you highlight the close button on the Pinegrow edit screen or in the tree, you will see these actions pop up. In addition, since this is just a button, the actions for that HTML element will also pop up.

    Back to the code. In both cases, the control element ‘type‘ is a ‘checkbox‘. This is used for binary decisions, as opposed to the ‘select‘, which give a list of possibilities to choose from (thanks, Mr. Bo Obvious). Next up we name the checkbox – I usually try to frame ‘checkbox‘ names as questions. For the ‘action‘ this control uses ‘element_attribute‘, telling Pinegrow to add the value of the ‘attribute‘ key to the element if the checkbox is clicked, in this case, ‘uk-close‘. This attribute doesn’t take any modifying value, so we also pass in the ‘key: value‘ pair, ‘empty_attribute: true‘. Finally, for some reason, I have found that Pinegrow sometimes throws an error if there isn’t a ‘value’ key.

    With respect to attributes, there will also be cases where you don’t want to retain the empty attribute. In that case, just pass ’empty_attribute: false’. There might also be the case where the attribute can take a value, but also is valid without value, you can add the ‘key:value' pair, ‘attribute_keep_if_empty:true‘.

    Moving on to the next-to-last basic control element the ‘text‘ type. This element is used to add custom values to a number of different HTML elements. In the screenshot earlier in the article we could see a number of fields for the ‘<button>‘ tag, including “Name”, “Value”, and “Type”.  Implementing an action field of this type is much like the others.

ui_grid_parallax: {
    type: 'text',
    name: 'Parallax Value',
    action: 'element_attribute',
    attribute: 'parallax',
    attribute_keep_if_empty: true
}

    Not really much to explain here. Basically, anything that the user enters into the text field will be added to the element as either a class or attribute value, depending on your ‘action‘ value.

Pinegrow 'image' picker    The last common action type is ‘image‘. It pulls up both a file picker and displays a small thumbnail of the selected image in the action panel. This action is typically accompanied in the same object with two additional ‘key:value‘ pairs- ‘file_picker: true‘ and ‘file_picker_no_proxy: true‘. ***As a variant, you can also bring up a file picker without thumbnail simply by including those ‘key:value‘ pairs without any ‘type‘ value.*** Edit: This doesn’t seem to work anymore. Leaving out a ‘type’ results in the filepicker not being shown.

 

 

*******************************

    I know I said it was the last input type in the last paragraph, but in my wanders through the Pinegrow code I found another type. Sorry!!! Another input type that I had missed before is the ‘slider‘. You can see it in use with a lot of the HTML elements that recieve a sliding scale number, like columns or SVG sizing. Slider input exampleTypically it is used with a ‘element_attribute‘ action and can recieve a special key of ‘slider_def_unit‘. This can recieve any value that you want to tag onto the displayed number, but is usually either left blank or set to ‘px’. It can also take a ‘placeholder’ key for the starting number. Here is an example:

height: {
                            name: 'Height',
                            type: 'slider',
                            slider_def_unit: '',
                            action: 'element_attribute',
                            attribute: 'height',
                            placeholder: '100'
                        },

********************************

 

 

    Okay, so that covers the basic action types and action values baked into Pinegrow. Just to briefly mention, there is one other somewhat common action, ‘custom‘. This action value requires that the object contains ‘get_value‘ and ‘set_value‘ keys that pass functions as values. I may or may not include this in a future tutorial depending on whether implementing the UIkit in Pinegrow requires it. 

    There are three additional topics to cover with regards to the ‘selector’ key. First, you can target more than one element. For example, if you want to target a list item ‘<li>‘ if it is part of an ordered OR unordered list with a particular attribute, you can chain selectors by separating them with commas.

selector: 'ul[attribute] li, ol[attribute] li' 

    This (I believe, but I’m guessing from trying to read code soup) that can also be accomplished by using a different ‘key:value‘ pair – ‘parent_selector‘ and passing in the parental selector.

selector: 'li',
parent_selector: 'ul[attribute], ol[attribute]'

    The odd thing is that I can comment this out without impact in some instances, but not others. Use at your own risk! Stay tuned to the comments section for potential updates. 

    Finally, your selector can be a function. Off the top of my head, I can’t think of a common use for this, but it is good to keep in mind.

    That brings us to the end of another tutorial. In the upcoming tutorial, I will return to more hands-on programming, walking you through a couple of helper functions and a more complex element – the UIkit icon set! Feel free to reach out to me in the comments or by email with questions or comments good and bad!

Metta!

Update: I have now finished a full-length version of the UIkit plugin for Pinegrow. Purchase of this plugin not only adds the UIkit framework to Pinegrow for unlimited sites, but it also gives you access to the completed code for learning purposes! As a bonus, I’ll give you access to a Facebook page to discuss coding for Pinegrow. Click here to learn more!!

Published: 07.08.2019

In: Pinegrow, Programming

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.