diff --git a/modules/backend/widgets/Table.php b/modules/backend/widgets/Table.php
index b86e7d0f8..1fc6a6365 100644
--- a/modules/backend/widgets/Table.php
+++ b/modules/backend/widgets/Table.php
@@ -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');
}
/**
diff --git a/modules/backend/widgets/table/assets/css/table.css b/modules/backend/widgets/table/assets/css/table.css
index 030dc432e..f3c87d6bf 100644
--- a/modules/backend/widgets/table/assets/css/table.css
+++ b/modules/backend/widgets/table/assets/css/table.css
@@ -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;
+}
diff --git a/modules/backend/widgets/table/assets/js/table.js b/modules/backend/widgets/table/assets/js/table.js
index 188dfbb66..a2cc56122 100644
--- a/modules/backend/widgets/table/assets/js/table.js
+++ b/modules/backend/widgets/table/assets/js/table.js
@@ -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
}
diff --git a/modules/backend/widgets/table/assets/js/table.processor.base.js b/modules/backend/widgets/table/assets/js/table.processor.base.js
index 5ac4a647b..4bf55409d 100644
--- a/modules/backend/widgets/table/assets/js/table.processor.base.js
+++ b/modules/backend/widgets/table/assets/js/table.processor.base.js
@@ -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
*/
diff --git a/modules/backend/widgets/table/assets/js/table.processor.checkbox.js b/modules/backend/widgets/table/assets/js/table.processor.checkbox.js
new file mode 100644
index 000000000..327d7ffc4
--- /dev/null
+++ b/modules/backend/widgets/table/assets/js/table.processor.checkbox.js
@@ -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);
\ No newline at end of file
diff --git a/modules/backend/widgets/table/assets/less/table.less b/modules/backend/widgets/table/assets/less/table.less
index 16a872cdc..e6b66b98a 100644
--- a/modules/backend/widgets/table/assets/less/table.less
+++ b/modules/backend/widgets/table/assets/less/table.less
@@ -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;
}
}
-}
\ No newline at end of file
+}
+
+/*
+ * 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;
+ }
+ }
+ }
+}
diff --git a/modules/backend/widgets/table/partials/_table.htm b/modules/backend/widgets/table/partials/_table.htm
index 2226bb852..630f81e4a 100644
--- a/modules/backend/widgets/table/partials/_table.htm
+++ b/modules/backend/widgets/table/partials/_table.htm
@@ -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',
diff --git a/plugins/cggstudio/loading/Plugin.php b/plugins/cggstudio/loading/Plugin.php
new file mode 100755
index 000000000..ba68982c6
--- /dev/null
+++ b/plugins/cggstudio/loading/Plugin.php
@@ -0,0 +1,22 @@
+ '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'
+ ];
+ }
+}
+?>
\ No newline at end of file
diff --git a/plugins/cggstudio/loading/assets/css/default.css b/plugins/cggstudio/loading/assets/css/default.css
new file mode 100755
index 000000000..4ada0389e
--- /dev/null
+++ b/plugins/cggstudio/loading/assets/css/default.css
@@ -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;
+}
\ No newline at end of file
diff --git a/plugins/cggstudio/loading/assets/img/loading.gif b/plugins/cggstudio/loading/assets/img/loading.gif
new file mode 100755
index 000000000..f4ff40eda
Binary files /dev/null and b/plugins/cggstudio/loading/assets/img/loading.gif differ
diff --git a/plugins/cggstudio/loading/components/Loading.php b/plugins/cggstudio/loading/components/Loading.php
new file mode 100755
index 000000000..e064337ba
--- /dev/null
+++ b/plugins/cggstudio/loading/components/Loading.php
@@ -0,0 +1,54 @@
+ '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');
+
+ }
+}
\ No newline at end of file
diff --git a/plugins/cggstudio/loading/components/loading/default.htm b/plugins/cggstudio/loading/components/loading/default.htm
new file mode 100755
index 000000000..6238fd175
--- /dev/null
+++ b/plugins/cggstudio/loading/components/loading/default.htm
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/plugins/cggstudio/loading/lang/en/lang.php b/plugins/cggstudio/loading/lang/en/lang.php
new file mode 100755
index 000000000..5dc597830
--- /dev/null
+++ b/plugins/cggstudio/loading/lang/en/lang.php
@@ -0,0 +1,16 @@
+ [
+'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'
+],
+];
+?>
\ No newline at end of file
diff --git a/plugins/cggstudio/loading/lang/es/lang.php b/plugins/cggstudio/loading/lang/es/lang.php
new file mode 100755
index 000000000..8527a229e
--- /dev/null
+++ b/plugins/cggstudio/loading/lang/es/lang.php
@@ -0,0 +1,16 @@
+ [
+'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'
+],
+];
+?>
\ No newline at end of file
diff --git a/plugins/cggstudio/loading/readme.md b/plugins/cggstudio/loading/readme.md
new file mode 100755
index 000000000..4d5e1200c
--- /dev/null
+++ b/plugins/cggstudio/loading/readme.md
@@ -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/
\ No newline at end of file
diff --git a/plugins/cggstudio/loading/updates/version.yaml b/plugins/cggstudio/loading/updates/version.yaml
new file mode 100755
index 000000000..51bc2be6d
--- /dev/null
+++ b/plugins/cggstudio/loading/updates/version.yaml
@@ -0,0 +1 @@
+1.0.1: First version
\ No newline at end of file