Skip to content

Commit

Permalink
merged develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Johannes Moser HM committed Sep 17, 2015
2 parents 0fb9540 + 7b2ce96 commit 8ea2967
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 106 deletions.
4 changes: 1 addition & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
_build/

# IntelliJ IDEA
*.iml
.idea
sulu-docs.iml
.idea
23 changes: 6 additions & 17 deletions bundles/admin/javascript-hooks/header.rst
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The header-hook in such a component could look something like:
url: 'url/to/tabsData'
},
toolbar: {
languageChanger: true
languageChanger: true,
buttons: {
save: {},
settings: {
Expand All @@ -28,8 +28,8 @@ The header-hook in such a component could look something like:
}
}
}
}
title: 'My title',
},
title: 'My title'
}
What this hook does is essentially the following:
Expand All @@ -39,12 +39,12 @@ What this hook does is essentially the following:
tabs component is handled automatically if the data returned by ``tabs.url`` has
the right format.
* It initializes the toolbar with the defined buttons. For information on how to configure buttons
and even how to create your own buttons have look :doc:`here </bundles/admin/sulu-buttons>`.
and even how to create your own buttons have look :doc:`/bundles/admin/sulu-buttons`.
* It injects the title into every tab (or into your current component if no tabs specified)

.. note::
The header-hook can also be a function which returns the object seen in the example. Within this function
you have access on things like ``this.options``
you have access to things like ``this.options``


List of all available options:
Expand Down Expand Up @@ -83,7 +83,7 @@ List of all available options:
- contains configuration-properties about the toolbar
* - toolbar.buttons
- Object
- an object of sulu-buttons. For the documentation on sulu-buttons have a look :doc:`here </bundles/admin/sulu-buttons>`.
- an object of sulu-buttons. For the documentation on sulu-buttons have a look :doc:`/bundles/admin/sulu-buttons`.
* - toolbar.options
- Object
- an object of options to pass to the husky-toolbar-component
Expand All @@ -97,14 +97,3 @@ List of all available options:
* - toolbar.languageChanger.callback
- Function
- a callback function which gets executed when the language-changer-dropdown gets changed











3 changes: 1 addition & 2 deletions bundles/admin/javascript-hooks/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,12 @@ Javascript-Hooks
================

Javascript-hooks are just special-name-properties placed in the return-object of
javascript-components. The AdminBundle recognizes the hooks and does stuff, like rendering
javascript-components. The AdminBundle recognizes the hooks and executes functionality, like rendering
a header with tabs or just manipulating the column-layout.

.. toctree::
:maxdepth: 1

layout
view
header
load-component-data
34 changes: 27 additions & 7 deletions bundles/admin/javascript-hooks/layout.rst
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ List of all available options:
- contains properties affecting the navigation-column
* - navigation.collapsed
- Boolean
- If true the navigation merges to collapsed state
- If true the navigation transitions to collapsed state
* - navigation.hidden
- Boolean
- If true the navigation gets hidden
Expand All @@ -49,7 +49,7 @@ List of all available options:
- contains properties affecting the content-column
* - content.width
- String
- 'fixed' to keep the column at a fixed width or 'max' to make the column take the maximum of the available space
- ``fixed` to keep the column at a fixed width or ``max`` to make the column take the maximum of the available space
* - content.leftSpace
- Boolean
- If false the content-column has no padding on the left
Expand All @@ -59,20 +59,40 @@ List of all available options:
* - content.topSpace
- Boolean
- If false the content-column has no padding on the top
* - sidebar
* - sidebar'
- Object|Boolean
- contains properties affecting the sidebar-column. If false the sidebar gets hidden.
- Contains properties affecting the sidebar-column. If false the sidebar gets hidden.
* - sidebar.width
- String
- 'fixed' to keep the column at a fixed width or 'max' to make the column take the maximum of the available space
- ``fixed`` to keep the column at a fixed width or ``max`` to make the column take the maximum of the available space
* - sidebar.url
- String
- Url from which markup gets fetched and placed inside the sidebar
* - extendExisting
- Boolean
- If true the passed configurations for navigation, column and sidebar won't be merged with the defaults. So the existing layout stays the same and only the explicitly passed properties take effect.

.. note::
Either the sidebar-column or the content-column must have a 'fixed' width. If the width
of both columns is of type 'max' the behaviour is not specified.
Either the sidebar-column or the content-column must have a ``fixed`` width. If the width
of both columns is of type ``max`` the behaviour is not specified.

The defaults of the layout-hook are:

.. code-block:: javascript
layout: {
extendExisting: false,
navigation: {
collapsed: false,
hidden: false
},
content: {
width: 'fixed',
leftSpace: true,
rightSpace: true,
topSpace: true
},
sidebar: false
}
To get the default layout just write ``layout: {}``.
2 changes: 1 addition & 1 deletion bundles/admin/javascript-hooks/load-component-data.rst
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ of your component startup and continuing only after the data has been loaded.
The load-component-data-hook simplifies this task. Within the return-object of a
javascript-component, you can specify a ``loadComponentData`` method where you load your data. This method must
return a promise or your desired data straight away. If such a method is specified
the AdminBundle delays the startup of your component and sets ``this.data`` with your laoded data.
the AdminBundle delays the startup of your component and sets ``this.data`` with your laoded data
(where ``this`` is the context of your component). So when your components ``initialize`` method
gets called you can conveniently access your data via ``this.data`` and don't have to worry
about asynchronicity.
Expand Down
23 changes: 0 additions & 23 deletions bundles/admin/javascript-hooks/view.rst

This file was deleted.

106 changes: 54 additions & 52 deletions bundles/admin/sulu-buttons.rst
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
Sulu-Buttons
============

The husky-toolbar-component needs to be passed data to which defines what buttons it should render or what happens
when somebody clicks on a button. Essentially Sulu-buttons are simply about how do I pass buttons to the
toolbar-component more easily and elegantly than just copying the same buttons all over the place.
The husky-toolbar-component needs to be passed data, which defines what buttons it should render or what happens
when somebody clicks on a button. Essentially Sulu-Buttons are about passing buttons to the toolbar-component in an
easier and more elegant way than just copying the same buttons all over the place.
With Sulu-buttons you can define buttons in a specific place, extend other buttons and override properties really easily.

Where and what?
---------------
Introduction
------------

The admin-bundle contains an aura-extension in which all default buttons are specified as well as methods to get buttons
and add buttons to the pool of default buttons.
Expand All @@ -28,7 +28,7 @@ An example for such a button is:
}
}
As you can see a button gets registered with a name and a template which is the actual button meeting the specifications
As you can see a button gets registered with a name and a template, which is the actual button meeting the specifications
of the husky-framework.

The same holds for dropdown-items, for which also defaults are specified in the admin-bundle. For example:
Expand All @@ -45,68 +45,70 @@ The same holds for dropdown-items, for which also defaults are specified in the
}
}
How to get buttons?
-------------------
Retrieve buttons
----------------

The aura-extension in the admin-bundle extends every sandbox of a javascript-component with the method
``sulu.buttons.get``. In your own component you can call this function like for example:

.. code-block:: javascript
var generatedButtons = this.sandbox.sulu.buttons.get({
edit: {},
save: {
options: {
callback: function(){//do something//}
}
},
settings: {
options: {
dropdownItems: {
delete: {}
}
}
}
});
edit: {},
save: {
options: {
callback: function() {//do something//}
}
},
settings: {
options: {
dropdownItems: {
delete: {}
}
}
}
}
});
The ``sulu.buttons.get`` method returns an array of buttons which meet the specification of the husky-framework. In
our example this return-array contains the template of the 'edit'-button, the template of the 'save'-button but with the
callback-property replaced with our own one and the template of the 'settings'-button which has the template of the
'delete'-dropdownItem as the only dropdown-item.
our example this array contains the template of the ``edit``-button, the template of the ``save`-button but with the
callback-property replaced with our own one and the template of the ``settings``-button which has the template of the
``delete``-dropdownItem as the only dropdown-item.

If you want the settings-button two times in the same toolbar with - let's say - different dropdown-items you can make
use of the ``parent`` property;

.. code-block:: javascript
var generatedButtons = this.sandbox.sulu.buttons.get({
settings1: {
parent: 'settings'
options: {
dropdownItems: {
delete: {}
}
}
},
settings2: {
parent: 'settings'
options: {
dropdownItems: {
table: {}
}
}
}
});
How to add your own buttons?
----------------------------
Additionally to the ``sulu.buttons.get`` method the aura-extension provides the following methods
* ``sulu.buttons.add`` which takes a name and a button-template
* ``sulu.buttons.dropdownItems.add`` which takes a name and a dropdownItem-template
* ``sulu.buttons.push`` takes an array of objects which all must contain a name and a template property
* ``sulu.buttons.dropdownItems.push`` takes an array of objects which all must contain a name and a template property
settings1: {
parent: 'settings',
options: {
dropdownItems: {
delete: {}
}
}
},
settings2: {
parent: 'settings',
options: {
dropdownItems: {
table: {}
}
}
}
});
Add your own buttons
--------------------

Additionally to the ``sulu.buttons.get`` method the aura-extension provides the following methods:

* ``sulu.buttons.add``: takes a name and a button-template
* ``sulu.buttons.dropdownItems.add``: takes a name and a dropdownItem-template
* ``sulu.buttons.push``: takes an array of objects which all must contain a name and a template property
* ``sulu.buttons.dropdownItems.push``: takes an array of objects which all must contain a name and a template property
* ``sulu.buttons.getApiButton``: takes the name of a button-template and returns the actual template. Can be used to extend an existing button-template.

So with this methods you can easily add your own buttons and dropdown-items to the pool. These buttons are then
globally available via the ``sulu.buttons.get`` method.
Expand Down
13 changes: 12 additions & 1 deletion reference/content-types/text_line.rst
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@ Shows a simple text line, the inserted content will be saved as simple string.
Parameters
----------

No parameters available
.. list-table::
:header-rows: 1

* - Parameter
- Type
- Description
* - headline
- boolean
- If true the height and font size of the text line get increased.

Example
-------
Expand All @@ -20,4 +28,7 @@ Example
<meta>
<title lang="en">Title</title>
</meta>
<params>
<param name="headline" value="true"/>
</params>
</property>

0 comments on commit 8ea2967

Please sign in to comment.