Implemented server-side drop-down event, updated documentation.
This commit is contained in:
alekseybobkov
parent
9377bcf7c1
commit
baee9edcd2
|
|
@ -101,22 +101,11 @@ class Table extends WidgetBase
|
|||
$columnName = Input::get('column');
|
||||
$rowData = Input::get('rowData');
|
||||
|
||||
traceLog($columnName);
|
||||
traceLog($rowData);
|
||||
$eventResults = $this->fireEvent('table.getDropdownOptions', [$columnName, $rowData]);
|
||||
|
||||
if ($rowData['billable'] == 'yes' || $rowData['billable'] == 'no') {
|
||||
$options = [
|
||||
'string'=>'String - '.$rowData['billable'],
|
||||
'checkbox'=>'Checkbox - '.$rowData['billable'],
|
||||
'dropdown'=>'Dropdown - '.$rowData['billable']
|
||||
];
|
||||
} else {
|
||||
$options = [
|
||||
'who-knows'=>'Who knows?',
|
||||
'whatever'=>'Whatever',
|
||||
'sometimes'=>'Sometimes'
|
||||
];
|
||||
}
|
||||
$options = [];
|
||||
if (count($eventResults))
|
||||
$options = $eventResults[0];
|
||||
|
||||
return [
|
||||
'options' => $options
|
||||
|
|
|
|||
|
|
@ -137,9 +137,21 @@ If the `options` element is not presented in the configuration, the options will
|
|||
|
||||
**TODO:** Document the AJAX interface
|
||||
|
||||
**TODO:** Plan the option caching. Requirements:
|
||||
- a) options could depend on other values in the current row.
|
||||
- b) options could always be cached regardless of other values in the row.
|
||||
The drop-down options could depend on other columns. This works only with AJAX-based drop-downs. The column a drop-down depends on are defined with the `depends_on` property:
|
||||
|
||||
state:
|
||||
title: State
|
||||
type: dropdown
|
||||
depends_on: country
|
||||
|
||||
Multiple fields are allowed as well:
|
||||
|
||||
state:
|
||||
title: State
|
||||
type: dropdown
|
||||
depends_on: [country, language]
|
||||
|
||||
**Note:** Dependent drop-down should always be defined after their master columns.
|
||||
|
||||
# Server-side table widget (Backend\Widgets\Table)
|
||||
|
||||
|
|
@ -151,4 +163,22 @@ Columns are defined as array with the `columns` property. The array keys corresp
|
|||
- `type` (string, checkbox, dropdown, autocomplete)
|
||||
- `width` - sets the column width, can be specified in percents (10%) or pixels (50px). There could be a single column without the width specified. It will be stretched to take the available space.
|
||||
- `readonly`
|
||||
- `options` (for drop-down elements and autocomplete types)
|
||||
- `options` (for drop-down elements and autocomplete types)
|
||||
- `depends_on` (from drop-down elements)
|
||||
|
||||
## Events
|
||||
|
||||
### table.getDropdownOptions
|
||||
|
||||
table.getDropdownOptions - triggered when drop-down options are requested by the client. Parameters:
|
||||
|
||||
- `$columnName` - specifies the drop-down column name.
|
||||
- `$rowData` - an array containing values of all columns in the table row.
|
||||
|
||||
Example event handler:
|
||||
|
||||
$table->bindEvent('table.getDropdownOptions', function ($columnName, $rowData) {
|
||||
if ($columnName == 'state')
|
||||
return ['ca'=>'California', 'wa'=>'Washington'];
|
||||
...
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<?php namespace CGGStudio\Loading;
|
||||
|
||||
class Plugin extends \System\Classes\PluginBase
|
||||
{
|
||||
public function pluginDetails()
|
||||
{
|
||||
return [
|
||||
'name' => 'cggstudio.loading::lang.plugin.name',
|
||||
'description' => "cggstudio.loading::lang.plugin.description",
|
||||
'author' => 'Carlos González Gurrea',
|
||||
'icon' => 'icon-refresh'
|
||||
];
|
||||
}
|
||||
|
||||
public function registerComponents()
|
||||
{
|
||||
return [
|
||||
'\CGGStudio\Loading\Components\Loading' => 'Loading'
|
||||
];
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#preloader {
|
||||
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
background-color:#fff; /* Seleccionar el color */
|
||||
z-index:999; /* Poner en la capa superior */
|
||||
position:fixed;
|
||||
}
|
||||
|
||||
#status {
|
||||
background-image:url('../img/loading.gif');
|
||||
width:200px;
|
||||
height:200px;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center;
|
||||
margin:-100px 0 0 -100px;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
|
|
@ -1,54 +0,0 @@
|
|||
<?php namespace CGGStudio\Loading\Components;
|
||||
|
||||
use Lang;
|
||||
use Cms\Classes\ComponentBase;
|
||||
use \stdClass;
|
||||
|
||||
|
||||
class Loading extends ComponentBase
|
||||
{
|
||||
public function componentDetails()
|
||||
{
|
||||
return [
|
||||
'name' => 'Page loading indicator',
|
||||
'description' => "Adds a 'loading' to the page"
|
||||
];
|
||||
}
|
||||
|
||||
public function defineProperties()
|
||||
{
|
||||
return [
|
||||
'speedCGGStudio' => [
|
||||
'title' => 'cggstudio.loading::lang.messages.Speed',
|
||||
'description' => 'cggstudio.loading::lang.messages.Speed_description',
|
||||
'default' => 300,
|
||||
'type' => 'string',
|
||||
'validationPattern' => '^[0-9]*$',
|
||||
'validationMessage' => 'cggstudio.loading::lang.messages.Speed_validation',
|
||||
'showExternalParameter' => false
|
||||
],
|
||||
'backgroundColorCGGStudio' => [
|
||||
'title' => 'cggstudio.loading::lang.messages.Background',
|
||||
'description' => 'cggstudio.loading::lang.messages.Background_description',
|
||||
'default' => '#FFF',
|
||||
'type' => 'string',
|
||||
'validationPattern' => '#([a-fA-F0-9]){3}(([a-fA-F0-9]){3})?\b',
|
||||
'validationMessage' => 'cggstudio.loading::lang.messages.Background_validation',
|
||||
'showExternalParameter' => false
|
||||
],
|
||||
|
||||
];
|
||||
}
|
||||
|
||||
public function onRun()
|
||||
{
|
||||
$this->Loading = new stdClass();
|
||||
$this->Loading->backgroundColor = $this->propertyOrParam('backgroundColorCGGStudio');
|
||||
$this->Loading->speed = $this->propertyOrParam('speedCGGStudio');
|
||||
$this->page['loading'] = $this->Loading;
|
||||
|
||||
// Add css
|
||||
$this->addCss('assets/css/default.css');
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!-- Preloader -->
|
||||
<div id="preloader">
|
||||
<div id="status"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
$('#status').fadeOut(); // will first fade out the loading animation
|
||||
$('#preloader').delay({{ loading.speed }}).fadeOut('slow'); // will fade out the white DIV that covers the website.
|
||||
$('body').delay({{ loading.speed }}).css({'overflow':'visible'});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#preloader {
|
||||
background-color:{{ preload.backgroundColor }}; /* Seleccionar el color */
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<?php
|
||||
return [
|
||||
'plugin' => [
|
||||
'name' => 'Page loading indicator',
|
||||
'description' => 'Adds a "loading" to the pages.',
|
||||
],
|
||||
'messages' => [
|
||||
'Speed' => 'Speed',
|
||||
'Speed_description' => 'Time taken for loading logo once the page load disappear',
|
||||
'Speed_validation' => 'The "Speed" property can contain only numeric symbols',
|
||||
'Background' => 'Background Color',
|
||||
'Background_description' => 'CSS color attribute of the background',
|
||||
'Background_validation' => 'The "Background Color" needs to be a hex color code'
|
||||
],
|
||||
];
|
||||
?>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<?php
|
||||
return [
|
||||
'plugin' => [
|
||||
'name' => 'Cargando',
|
||||
'description' => 'Añade una logo de carga a la página',
|
||||
],
|
||||
'messages' => [
|
||||
'Speed' => 'Velocidad',
|
||||
'Speed_description' => 'Tiempo que tarda en minisegungos en quitarse el icono de cargando una vez cargada la página',
|
||||
'Speed_validation' => 'La velocidad solo puede contener numeros',
|
||||
'Background' => 'Color de fondo',
|
||||
'Background_description' => 'Color de fondo de la precargar',
|
||||
'Background_validation' => 'El color tiene que ser hexadecimal'
|
||||
],
|
||||
];
|
||||
?>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
# Loading
|
||||
This plugin adds a 'Loading' integration features to [OctoberCMS](http://octobercms.com).
|
||||
|
||||
|
||||
### Available options:
|
||||
* **Speed**: Time taken for loading logo once the page load disappear
|
||||
* **Background**: Color Background
|
||||
|
||||
## Documentation
|
||||
In many templates or pages we wait for this all information loaded to display the page. This is what makes this plugin, put the logo of loading until it has completed the full page load.
|
||||
It adds the **Loading** object to the page, which contains all the information the Component needs to function as you customized it.
|
||||
|
||||
### Quickstart guide:
|
||||
1. Go to the 'System' tab in October, and install the plugin using the **CGGStudio.Loading** code.
|
||||
2. After installation has finished a new component will appear in under Octobers 'CMS > Components' tab. You have the option to add this to only one page, or add it to a layout making it appear on all pages that use the layout. Whichever you chose the instructions are the same.
|
||||
3. Open the your selected page/layout, and add the component to it.
|
||||
4. Add this small code anywhere on the page/layout:
|
||||
``` {% component 'Loading' %} ``` Be sure to use the correct alias, if you haven't changed it, then it should be 'Loading'. The position of the code doesn't really count, since the arrow has a fixed position.
|
||||
5. That's it. You now have a working 'Loading' button on your page. It has no outside dependencies, so you don't have to worry about anything else.
|
||||
|
||||
### Colors:
|
||||
The Component requires you to add the hex color codes you prefer.
|
||||
This free online application can help you with that: http://www.colorpicker.com/
|
||||
|
|
@ -1 +0,0 @@
|
|||
1.0.1: First version
|
||||
Loading…
Reference in New Issue