Skip to content

Commit

Permalink
Added 'node' and 'widget' property to moduel chapter
Browse files Browse the repository at this point in the history
  • Loading branch information
Florian committed Jun 13, 2016
1 parent 1c38b31 commit a6b3b67
Showing 1 changed file with 50 additions and 1 deletion.
51 changes: 50 additions & 1 deletion developer-basics/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,11 @@ Key | Description | More
`events` | Listen to events from Pagekit or other modules | [Details](#listen-to-events)
`config` | Default module configuration | [Details](#default-module-configuration)
`nodes` | Register Nodes for the Site Tree | [Details](#register-nodes-for-site-tree)
`node` | Default options for node configuration | [Details](#node-options)
`settings` | Link to a settings screen | [Details](#link-to-a-settings-screen)
`menu` | Add menu items to the admin panel | [Details](#add-menu-items-to-the-admin-panel)
`widgets` | Register Widgets | [Details](#register-widgets)
`widget` | Default options for widget configuration | [Details](#widget-options)

## Bootstrap code

Expand Down Expand Up @@ -216,6 +218,31 @@ For more information on nodes, check out the [Routing section](../developer-basi
]
```

## Node options

If your module wants to add a configuration screen to the content editor in the Site Tree, you can use the `node` property to add default options to the node object (complete explanation for configuration screen in the [Theme guide](../developer-guides/how-to-theme.md#adding-position-options)).


In the following example, a theme defines a `top_style` property which is automatically added to every node object that is rendered. By default, the property will have the value `uk-block-muted`, which is a CSS class that we want to render for the `top` position, in this example.

```php
'node' => [

'top_style' => 'uk-block-muted'

],
```

When rendering a page in the `template.php` of the theme, you can then access that property from the `$params` array.

```php
<?php echo $params['top_style'] ?>
```

With the `node` property, you set the default value for every node. To allow the user to change these values, you will want to add an interface to the admin area (typically in the form of an addition _Theme_ tab when editing a page's content).

To allow the user to change the values of the default widget options that you have defined here, you can add an interface to the admin area. To achieve that, you define a JavaScript component to display the editing screen ([Example](https://github.com/pagekit/example-theme/blob/master/app/components/node-theme.vue)), register that JavaScript file on the content editor page ([Example](https://github.com/pagekit/example-theme/blob/master/index.php#L43)) and optionally update your Webpack configuration, if you are using Webpack ([Example](https://github.com/pagekit/example-theme/blob/master/webpack.config.js#L5)). A complete explanation for this can be found in the [Theme guide](../developer-guides/how-to-theme.md#adding-position-options).

## Add menu items to the admin panel
You can add menu items to the admin panel's main navigation. These can link to any registered route and be limited to certain access permissions. The `access` property determines if the menu item is visible or not.

Expand Down Expand Up @@ -272,4 +299,26 @@ A Widget is also a module. With the `widgets` property you can register all widg
'widgets/form.php'

],
```
```

## Widget options

If your module wants to add a configuration screen to the Widget editor (which is often the case when developing a theme), you can use the `widget` property to add default options to the widget object (a complete example for a widget configuration screen is in the [Theme guide](../developer-guides/how-to-theme.md#adding-widget-options)).

In the following example, a theme defines a `panel` property which is automatically added to every widget object that is rendered. By default, the property will have the empty string as its value.

```php
'widget' => [

'panel' => ''

],
```

When rendering the widget, you can then access that property from the `$widget->theme` array.

```php
<?php echo $widget->theme['panel'] ?>
```

To allow the user, to change the values of the default widget options that you have defined here, you can add an interface to the admin area. To achieve that, you define a JavaScript component to display the editing screen ([Example](https://github.com/pagekit/example-theme/blob/master/app/components/widget-theme.vue)), register that JavaScript file on the widget editor page ([Example](https://github.com/pagekit/example-theme/blob/master/index.php#L47)) and optionally update your Webpack configuration, if you are using Webpack ([Example](https://github.com/pagekit/example-theme/blob/master/webpack.config.js#L7)). A complete explanation for this can be found in the [Theme guide](../developer-guides/how-to-theme.md#adding-widget-options).

0 comments on commit a6b3b67

Please sign in to comment.