Groups

What are Groups?

Groups are individual <div> in a View. Basically, they are part of a view. Unlike Views, Groups can't be switched to another Group.

Default Structure

Here is the default structure of a Group:

class Group extends P.Group {
	init() {
		// Action triggered when a View Controller is mounting the group
	}
	changeHandler(e) {
		// Will be toggled when a change happens to the state of the class
	}
}

Methods and Properties

Methods and properties of the class can be accessed using this. Here is a list of the default methods and properties:

• this.group: It's the element where your group is. You can search within this element using .querySelector().
• this.viewName: The name of the parent View.
• this.state: A JSON object that will store the data of your group
• this.setState(data, handler): This method will help us change the state of the group, and toggle the changeHandler() method.

Define a Group

To define a group, you will first need to create a <div> in a view element, like:

<div protype="myView">
    <!-- View Content -->
    <div class="group">
        <!-- Group Content -->
    </div>
</div>

⚠️ Note that while we can define a View without the protype="" attribute, we don't require a name for groups

Now, we'll need to mount our Group into our View Controller using the mountGroup() method:

// Our Group
class Group {
	init() {
		// Action triggered when a View Controller is mounting the group
	}
	changeHandler(e) {
		// Will be toggled when a change happens to the state of the class
	}
}

// Our Controller
class MainController extends P.ViewController { // name your controller as you want
	willShow() {
		// perform action when the controller is showing up
		this.mountGroup(
			this.view.querySelector(".group"), // The Group element
			Group // The Group class
		)
	}
	willDisappear() {
		// perform action when the controller is disappearing
	}
}

You can also mount multiple groups using mountGroups():

// in your View Controller
this.mountGroups(
	this.view.querySelectorAll(".group"), // All groups element
	Group // The Group class
)

External Groups

If you have a menu or something you want to always be here, you can mount external groups that will be part of the main process and not the current View.

Here is how you should do it (in code):

P.mountExternalGroup(
    document.querySelector(".myGroup"),
    myGroup
)

Next: Components