Added the checkbox cell processor
This commit is contained in:
alekseybobkov
parent
a73ef52d36
commit
d03370c5bf
|
|
@ -68,6 +68,7 @@ class Table extends WidgetBase
|
|||
$this->addJs('js/table.datasource.client.js', 'core');
|
||||
$this->addJs('js/table.processor.base.js', 'core');
|
||||
$this->addJs('js/table.processor.string.js', 'core');
|
||||
$this->addJs('js/table.processor.checkbox.js', 'core');
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 28px;
|
||||
}
|
||||
.table-control table.headers:after {
|
||||
content: ' ';
|
||||
|
|
@ -60,16 +61,16 @@
|
|||
padding: 1px;
|
||||
}
|
||||
.table-control table.data td.active {
|
||||
border-color: #2f99da;
|
||||
border-color: #5fb6f5;
|
||||
}
|
||||
.table-control table.data td.active .content-container {
|
||||
padding: 0;
|
||||
border: 1px solid #2f99da;
|
||||
border: 1px solid #5fb6f5;
|
||||
}
|
||||
.table-control table.data td.active .content-container:before,
|
||||
.table-control table.data td.active .content-container:after {
|
||||
content: ' ';
|
||||
background: #2f99da;
|
||||
background: #5fb6f5;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
|
|
@ -108,3 +109,43 @@
|
|||
border: none;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
/*
|
||||
* Checkbox editor
|
||||
*/
|
||||
.table-control td[data-column-type=checkbox] div[data-checkbox-element] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #999999;
|
||||
margin: 5px 5px 5px 10px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.table-control td[data-column-type=checkbox] div[data-checkbox-element]:hover {
|
||||
border-color: #808080;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.table-control td[data-column-type=checkbox] div[data-checkbox-element].checked {
|
||||
border-width: 2px;
|
||||
}
|
||||
.table-control td[data-column-type=checkbox] div[data-checkbox-element].checked:before {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
content: "\f00c";
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
top: -4px;
|
||||
}
|
||||
.table-control td[data-column-type=checkbox] div[data-checkbox-element]:focus {
|
||||
border-color: #5fb6f5;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
// The data source object
|
||||
this.dataSource = null
|
||||
|
||||
// The cell processors array
|
||||
this.cellProcessors = []
|
||||
// The cell processors list
|
||||
this.cellProcessors = {}
|
||||
|
||||
// A reference to the currently active cell processor
|
||||
this.activeCellProcessor = null
|
||||
|
|
@ -351,7 +351,9 @@
|
|||
if (this.activeCell !== cellElement) {
|
||||
this.setActiveProcessor(processor)
|
||||
this.activeCell = cellElement
|
||||
this.activeCell.setAttribute('class', 'active')
|
||||
|
||||
if (processor.isCellFocusable())
|
||||
this.activeCell.setAttribute('class', 'active')
|
||||
}
|
||||
|
||||
// If the cell belongs to other row than the currently edited,
|
||||
|
|
@ -466,6 +468,12 @@
|
|||
if (this.navigation.onClick(ev) === false)
|
||||
return
|
||||
|
||||
for (var i = 0, len = this.options.columns.length; i < len; i++) {
|
||||
var column = this.options.columns[i].key
|
||||
|
||||
this.cellProcessors[column].onClick(ev)
|
||||
}
|
||||
|
||||
var target = this.getEventTarget(ev, 'TD')
|
||||
|
||||
if (!target)
|
||||
|
|
@ -499,6 +507,12 @@
|
|||
return
|
||||
}
|
||||
|
||||
for (var i = 0, len = this.options.columns.length; i < len; i++) {
|
||||
var column = this.options.columns[i].key
|
||||
|
||||
this.cellProcessors[column].onKeyDown(ev)
|
||||
}
|
||||
|
||||
if (this.navigation.onKeydown(ev) === false)
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,6 +77,20 @@
|
|||
Base.prototype.onUnfocus = function() {
|
||||
}
|
||||
|
||||
/*
|
||||
* Event handler for the keydown event. The table class calls this method
|
||||
* for all processors.
|
||||
*/
|
||||
Base.prototype.onKeyDown = function(ev) {
|
||||
}
|
||||
|
||||
/*
|
||||
* Event handler for the click event. The table class calls this method
|
||||
* for all processors.
|
||||
*/
|
||||
Base.prototype.onClick = function(ev) {
|
||||
}
|
||||
|
||||
/*
|
||||
* Determines if the keyboard navigation in the specified direction is allowed
|
||||
* by the cell processor. Some processors could reject the navigation, for example
|
||||
|
|
@ -87,6 +101,13 @@
|
|||
return true
|
||||
}
|
||||
|
||||
/*
|
||||
* Determines if the processor's cell is focusable.
|
||||
*/
|
||||
Base.prototype.isCellFocusable = function() {
|
||||
return true
|
||||
}
|
||||
|
||||
/*
|
||||
* Returns the content container element of a cell
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
* Checkbox cell processor for the table control.
|
||||
*/
|
||||
+function ($) { "use strict";
|
||||
|
||||
// NAMESPACE CHECK
|
||||
// ============================
|
||||
|
||||
if ($.oc.table === undefined)
|
||||
throw new Error("The $.oc.table namespace is not defined. Make sure that the table.js script is loaded.");
|
||||
|
||||
if ($.oc.table.processor === undefined)
|
||||
throw new Error("The $.oc.table.processor namespace is not defined. Make sure that the table.processor.base.js script is loaded.");
|
||||
|
||||
// CLASS DEFINITION
|
||||
// ============================
|
||||
|
||||
var Base = $.oc.table.processor.base,
|
||||
BaseProto = Base.prototype
|
||||
|
||||
var CheckboxProcessor = function(tableObj, columnName) {
|
||||
//
|
||||
// Parent constructor
|
||||
//
|
||||
|
||||
Base.call(this, tableObj, columnName)
|
||||
}
|
||||
|
||||
CheckboxProcessor.prototype = Object.create(BaseProto)
|
||||
CheckboxProcessor.prototype.constructor = CheckboxProcessor
|
||||
|
||||
CheckboxProcessor.prototype.dispose = function() {
|
||||
BaseProto.dispose.call(this)
|
||||
}
|
||||
|
||||
/*
|
||||
* Determines if the processor's cell is focusable.
|
||||
*/
|
||||
CheckboxProcessor.prototype.isCellFocusable = function() {
|
||||
return false
|
||||
}
|
||||
|
||||
/*
|
||||
* Renders the cell in the normal (no edit) mode
|
||||
*/
|
||||
CheckboxProcessor.prototype.renderCell = function(value, cellContentContainer) {
|
||||
var checkbox = document.createElement('div')
|
||||
checkbox.setAttribute('data-checkbox-element', 'true')
|
||||
checkbox.setAttribute('tabindex', '0')
|
||||
|
||||
if (value && value != 0 && value != "false")
|
||||
checkbox.setAttribute('class', 'checked')
|
||||
|
||||
cellContentContainer.appendChild(checkbox)
|
||||
}
|
||||
|
||||
/*
|
||||
* This method is called when the cell managed by the processor
|
||||
* is focused (clicked or navigated with the keyboard).
|
||||
*/
|
||||
CheckboxProcessor.prototype.onFocus = function(cellElement, isClick) {
|
||||
cellElement.querySelector('div[data-checkbox-element]').focus()
|
||||
}
|
||||
|
||||
/*
|
||||
* Event handler for the keydown event. The table class calls this method
|
||||
* for all processors.
|
||||
*/
|
||||
CheckboxProcessor.prototype.onKeyDown = function(ev) {
|
||||
if (ev.keyCode == 32)
|
||||
this.onClick(ev)
|
||||
}
|
||||
|
||||
/*
|
||||
* Event handler for the click event. The table class calls this method
|
||||
* for all processors.
|
||||
*/
|
||||
CheckboxProcessor.prototype.onClick = function(ev) {
|
||||
var target = this.tableObj.getEventTarget(ev, 'DIV')
|
||||
|
||||
if (target.getAttribute('data-checkbox-element')) {
|
||||
this.changeState(target)
|
||||
}
|
||||
}
|
||||
|
||||
CheckboxProcessor.prototype.changeState = function(divElement) {
|
||||
var cell = divElement.parentNode.parentNode
|
||||
|
||||
if (divElement.getAttribute('class') == 'checked') {
|
||||
divElement.setAttribute('class', '')
|
||||
this.tableObj.setCellValue(cell, 0)
|
||||
} else {
|
||||
divElement.setAttribute('class', 'checked')
|
||||
this.tableObj.setCellValue(cell, 1)
|
||||
}
|
||||
}
|
||||
|
||||
$.oc.table.processor.checkbox = CheckboxProcessor;
|
||||
}(window.jQuery);
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,15 +71,15 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
border-color: #2f99da;
|
||||
border-color: @color-focus;
|
||||
|
||||
.content-container {
|
||||
padding: 0;
|
||||
border: 1px solid #2f99da;
|
||||
border: 1px solid @color-focus;
|
||||
|
||||
&:before, &:after {
|
||||
content: ' ';
|
||||
background: #2f99da;
|
||||
background: @color-focus;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
|
|
@ -140,4 +141,46 @@
|
|||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Checkbox editor
|
||||
*/
|
||||
|
||||
.table-control {
|
||||
td[data-column-type=checkbox] {
|
||||
div[data-checkbox-element] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid @color-custom-input-border;
|
||||
margin: 5px 5px 5px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.user-select(none);
|
||||
|
||||
&:hover {
|
||||
border-color: darken(@color-custom-input-border, 10%);
|
||||
color: darken(@color-custom-input-icon, 10%);
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-width: 2px;
|
||||
|
||||
&:before {
|
||||
.icon(@check);
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: @color-focus;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
$data = [
|
||||
[
|
||||
'name' => 'City',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Vancouver',
|
||||
'description' => 'City name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => false,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -291,7 +291,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'Country',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'Canada',
|
||||
'description' => 'Country name',
|
||||
'details' => 'Details string',
|
||||
|
|
@ -315,7 +315,7 @@
|
|||
],
|
||||
[
|
||||
'name' => 'State',
|
||||
'type' => 'String',
|
||||
'type' => true,
|
||||
'default' => 'BC',
|
||||
'description' => 'British columbia',
|
||||
'details' => 'Details string',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<?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'
|
||||
];
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
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.
|
After Width: | Height: | Size: 8.4 KiB |
|
|
@ -0,0 +1,54 @@
|
|||
<?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');
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!-- 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>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<?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'
|
||||
],
|
||||
];
|
||||
?>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<?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'
|
||||
],
|
||||
];
|
||||
?>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
# 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/
|
||||
|
|
@ -0,0 +1 @@
|
|||
1.0.1: First version
|
||||
Loading…
Reference in New Issue