From d03370c5bfb297173023d2953729926b604a2079 Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Tue, 2 Dec 2014 21:46:54 -0800 Subject: [PATCH] Added the checkbox cell processor --- modules/backend/widgets/Table.php | 1 + .../widgets/table/assets/css/table.css | 47 ++++++++- .../backend/widgets/table/assets/js/table.js | 20 +++- .../table/assets/js/table.processor.base.js | 21 ++++ .../assets/js/table.processor.checkbox.js | 99 ++++++++++++++++++ .../widgets/table/assets/less/table.less | 51 ++++++++- .../backend/widgets/table/partials/_table.htm | 54 +++++----- plugins/cggstudio/loading/Plugin.php | 22 ++++ .../cggstudio/loading/assets/css/default.css | 26 +++++ .../cggstudio/loading/assets/img/loading.gif | Bin 0 -> 8581 bytes .../cggstudio/loading/components/Loading.php | 54 ++++++++++ .../loading/components/loading/default.htm | 23 ++++ plugins/cggstudio/loading/lang/en/lang.php | 16 +++ plugins/cggstudio/loading/lang/es/lang.php | 16 +++ plugins/cggstudio/loading/readme.md | 23 ++++ .../cggstudio/loading/updates/version.yaml | 1 + 16 files changed, 437 insertions(+), 37 deletions(-) create mode 100644 modules/backend/widgets/table/assets/js/table.processor.checkbox.js create mode 100755 plugins/cggstudio/loading/Plugin.php create mode 100755 plugins/cggstudio/loading/assets/css/default.css create mode 100755 plugins/cggstudio/loading/assets/img/loading.gif create mode 100755 plugins/cggstudio/loading/components/Loading.php create mode 100755 plugins/cggstudio/loading/components/loading/default.htm create mode 100755 plugins/cggstudio/loading/lang/en/lang.php create mode 100755 plugins/cggstudio/loading/lang/es/lang.php create mode 100755 plugins/cggstudio/loading/readme.md create mode 100755 plugins/cggstudio/loading/updates/version.yaml 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 0000000000000000000000000000000000000000..f4ff40edab88c7df20db106d35c641723d125f56 GIT binary patch literal 8581 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 '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