From: Samuel Guimarães <sguimaraes943@gmail.com>
This commit enables multiple selection with wok.list.js widget. It also features some enhancements for mobile and keyboard navigation.
Signed-off-by: Samuel Guimarães <sguimaraes943@gmail.com>
---
ui/css/bootstrap.custom.css | 8 +-
ui/css/src/modules/_buttons.scss | 8 ++
ui/css/src/modules/_wok-forms.scss | 1 +
ui/css/src/modules/_wok-grid.scss | 250 +++++++++++++++++++++++++++-----
ui/css/src/modules/_wok-variables.scss | 4 +-
ui/css/wok.css | 254 ++++++++++++++++++++++++++++-----
ui/js/src/wok.list.js | 174 +++++++++++-----------
7 files changed, 531 insertions(+), 168 deletions(-)
diff --git a/ui/css/bootstrap.custom.css b/ui/css/bootstrap.custom.css
index 13869da..c69939c 100644
--- a/ui/css/bootstrap.custom.css
+++ b/ui/css/bootstrap.custom.css
@@ -2996,7 +2996,7 @@ fieldset[disabled] .btn-link:focus {
}
.btn-xs, .btn-group-xs > .btn {
- padding: 1px 5px;
+ padding: 2px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
@@ -3460,9 +3460,9 @@ tbody.collapse.in {
display: table-cell;
}
-.input-group-addon:not(:first-child):not(:last-child),
-.input-group-btn:not(:first-child):not(:last-child),
-.input-group .form-control:not(:first-child):not(:last-child) {
+.input-group-addon:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child),
+.input-group-btn:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child),
+.input-group .form-control:not(:first-child, :first-child, :first-child):not(:last-child, :last-child, :last-child) {
border-radius: 0;
}
diff --git a/ui/css/src/modules/_buttons.scss b/ui/css/src/modules/_buttons.scss
index 85d9531..077a21f 100644
--- a/ui/css/src/modules/_buttons.scss
+++ b/ui/css/src/modules/_buttons.scss
@@ -23,6 +23,14 @@
font-size: 13pt;
}
+.btn-xs, .btn-group-xs > .btn {
+ font-size: 10.5pt;
+}
+
+.btn-sm, .btn-group-sm > .btn {
+ font-size: 11.5pt;
+}
+
.btn-login {
@include button-variant($btn-login-color, $btn-login-bg, $btn-login-border);
}
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-forms.scss b/ui/css/src/modules/_wok-forms.scss
index d426a60..c3f722a 100644
--- a/ui/css/src/modules/_wok-forms.scss
+++ b/ui/css/src/modules/_wok-forms.scss
@@ -75,6 +75,7 @@ input[type=checkbox].wok-checkbox + label:before {
input[type=checkbox].wok-checkbox:checked + label:before {
content: "\f14a";
letter-spacing: 8px;
+ margin-right: 0.9px // Sub-pixel unit for Chrome and Firefox anti-alias
}
input[type=radio].wok-radio + label:before {
diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss
index 730d224..152811d 100644
--- a/ui/css/src/modules/_wok-grid.scss
+++ b/ui/css/src/modules/_wok-grid.scss
@@ -36,23 +36,17 @@
top: 37px !important;
}
-.wok-list-cell {
- position: relative;
- padding-left: 45px;
+.wok-list-content {
+ border-top: 1px solid $table-first-row-border-color;
}
-.wok-repository-status {
- position: absolute;
- left: 6px;
- top: 0;
-}
-
-.wok-repository-status .fa {
- font-size: 23px;
- color: $fa-green;
+.wok-list-cell {
+ position: relative;
+ padding-left: 10px;
}
-.wok-list-name, .wok-list-description {
+.wok-list-name,
+.wok-list-description {
display: block;
}
@@ -67,47 +61,231 @@
overflow: hidden;
}
-.wok-list-content tbody tr, .wok-list-content tbody tr * {
+.wok-list-item-status {
+ float: left;
+ margin-top: 12px;
+ margin-right: 8px;
+ margin-bottom: 6px;
+ height: 25px;
+}
+
+.wok-list-item-status > .fa {
+ font-size: 23px;
+ color: $fa-green;
+}
+
+.wok-list-item-status.disabled > .fa:before {
+ display: block;
+ width: 19px;
+ height: 23px;
+ padding: 0;
+ border: 0;
+ content: "";
+}
+
+.wok-list-cell.disabled span {
+ color: $gray-light;
+}
+
+.wok-list-action-button-container {
+ padding-bottom: 16px;
+}
+
+.wok-list-loading-icon-inline {
+ background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
+ @include animation(spin 3s infinite linear);
+ height: 16px;
+ width: 16px;
+ background-size: 100%;
+ display: none;
+ position: absolute;
+}
+
+.generating .wok-list-description {
+ padding-left: 24px;
+}
+
+.generating .wok-list-loading-icon-inline {
+ display: block;
+ position: absolute;
+ top: 27px;
+ left: 14px;
+}
+
+.wok-list > ul {
+ list-style: none;
+ padding: 0;
+}
+
+.wok-list > ul > li,
+.wok-list > ul > li * {
@include user-select(none);
}
-.wok-list-content tbody tr:hover {
+.wok-list > ul > li,
+.wok-list > ul > li > label {
+ width: 100%;
+}
+
+.wok-list > ul > li {
+ border-top: 1px solid $table-border-color;
+ background: $table-bg;
+ position: relative;
+ @include transition(background .1s ease-in-out);
+}
+
+.wok-list > ul > li:first-child {
+ border: 0;
+}
+
+.wok-list > ul > li:nth-of-type(even) {
+ background: $table-bg-accent;
+}
+
+.wok-list > ul > li.selected {
+ background: $table-bg-hover;
+}
+
+.wok-list > ul > li > label {
+ cursor: pointer !important;
+ text-decoration: none;
+ margin-bottom: 0;
+ padding-bottom: 5px;
+}
+
+.wok-list > ul > li > label:hover {
text-decoration: underline;
- cursor: pointer;
}
-.wok-list-content tbody tr.generating:hover {
+.wok-list > ul > li.generating > label:hover {
text-decoration: none;
cursor: default;
}
-.wok-list-content tbody tr.selected {
- background: #ddd;
+.wok-list > ul > li > input[type=checkbox] {
+ left: -15px;
}
-span.wok-repository-status.disabled {
- display: none;
+.wok-list > ul > li > input[type=checkbox].wok-checkbox + label:before {
+ float: left;
+ height: 30px;
+ margin-top: 13px;
}
-.wok-list-cell.disabled span {
- color: #999;
+// Mobile first
+
+.wok-list-action-button-container {
+ background: $body-bg;
+ z-index: 1;
+ position: relative;
+ @include box-shadow(0 20px 20px -20px rgba(0,0,0,.4));
}
-.wok-single-button {
- padding-bottom: 16px;
- margin-top: -11px;
+.mobile-action {
+ width: 100%;
}
-.generating .wok-list-description {
- padding-left: 24px;
+.mobile-action .btn {
+ width: 100%;
+ height: 40px;
+ border-radius: 0;
}
-.generating .wok-list-loading-icon-inline {
- background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
- @include animation(spin 3s infinite linear);
- height: 16px;
- width: 16px;
- background-size: 100%;
- display: block;
- position: absolute;
+.mobile-action > .btn {
+ border-radius: $border-radius-base;
}
+
+.mobile-action.open > .btn {
+ border-radius: $border-radius-base $border-radius-base 0 0;
+}
+
+.mobile-action .btn span.mobile-action-label {
+ font-weight: 600;
+}
+
+.mobile-action .btn span.mobile-action-count {
+ font-weight: 300;
+}
+
+.mobile-action .btn span.mobile-action-count strong {
+ font-weight: 600;
+ font-size: 11pt;
+}
+
+.mobile-action .dropdown-menu {
+ width: 100%;
+ border: 0;
+ box-shadow: none;
+ background: transparent;
+ padding: 0;
+ margin: 0;
+ border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu .btn {
+ border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu li:last-child .btn {
+ border-radius: 0 0 $border-radius-base $border-radius-base;
+}
+
+.mobile-action .dropdown-menu li > .btn.disabled,
+.mobile-action .dropdown-menu li > .btn[disabled] {
+ opacity: 1;
+ background: #585758;
+ border-color: #585758;
+ color: #ddd;
+}
+
+// Reset Mobile styles to mimic desktop when min-width is bigger than 768px wide
+
+@media (min-width: $screen-md-min) {
+
+ .wok-list-action-button-container {
+ @include box-shadow(none);
+ }
+
+ .wok-list-action-button-container .dropdown-toggle {
+ display: none;
+ }
+
+ .wok-list-action-button-container .mobile-action {
+ position: static;
+ height: 40px;
+ }
+
+ .wok-list-action-button-container .mobile-action .btn {
+ width: auto;
+ }
+
+ .wok-list-action-button-container .mobile-action li:first-child .btn {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+
+
+ .wok-list-action-button-container .mobile-action li:last-child .btn {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0 !important;
+ border-top-right-radius: $border-radius-base !important;
+ border-bottom-right-radius: $border-radius-base;
+ }
+
+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu {
+ display: block;
+ vertical-align: middle;
+ position: absolute;
+ top: 0;
+ }
+
+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu > li {
+ display: inline-block;
+ }
+
+ .wok-list > ul > li > input[type=checkbox].wok-checkbox:focus + label {
+ outline: auto 5px $input-border-focus; // Accessibility
+ outline: auto 5px -webkit-focus-ring-color; // Set default webkit focus ring color for webkit browsers
+ }
+
+}
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss
index 9f53cb2..c58feba 100644
--- a/ui/css/src/modules/_wok-variables.scss
+++ b/ui/css/src/modules/_wok-variables.scss
@@ -164,8 +164,8 @@ $padding-large-horizontal: 16px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 10px !default;
-$padding-xs-vertical: 1px !default;
-$padding-xs-horizontal: 5px !default;
+$padding-xs-vertical: 2px !default;
+$padding-xs-horizontal: 10px !default;
$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
$line-height-small: 1.5 !default;
diff --git a/ui/css/wok.css b/ui/css/wok.css
index 615cdea..d296167 100644
--- a/ui/css/wok.css
+++ b/ui/css/wok.css
@@ -336,6 +336,14 @@ body {
font-size: 13pt;
}
+.btn-xs, .btn-group-xs > .btn {
+ font-size: 10.5pt;
+}
+
+.btn-sm, .btn-group-sm > .btn {
+ font-size: 11.5pt;
+}
+
.btn-login {
color: #fff;
background-color: #008abf;
@@ -676,23 +684,17 @@ fieldset[disabled] .btn-login.active {
top: 37px !important;
}
-.wok-list-cell {
- position: relative;
- padding-left: 45px;
+.wok-list-content {
+ border-top: 1px solid #e3e3e3;
}
-.wok-repository-status {
- position: absolute;
- left: 6px;
- top: 0;
-}
-
-.wok-repository-status .fa {
- font-size: 23px;
- color: #a8d46f;
+.wok-list-cell {
+ position: relative;
+ padding-left: 10px;
}
-.wok-list-name, .wok-list-description {
+.wok-list-name,
+.wok-list-description {
display: block;
}
@@ -707,54 +709,227 @@ fieldset[disabled] .btn-login.active {
overflow: hidden;
}
-.wok-list-content tbody tr, .wok-list-content tbody tr * {
+.wok-list-item-status {
+ float: left;
+ margin-top: 12px;
+ margin-right: 8px;
+ margin-bottom: 6px;
+ height: 25px;
+}
+
+.wok-list-item-status > .fa {
+ font-size: 23px;
+ color: #a8d46f;
+}
+
+.wok-list-item-status.disabled > .fa:before {
+ display: block;
+ width: 19px;
+ height: 23px;
+ padding: 0;
+ border: 0;
+ content: "";
+}
+
+.wok-list-cell.disabled span {
+ color: #999;
+}
+
+.wok-list-action-button-container {
+ padding-bottom: 16px;
+}
+
+.wok-list-loading-icon-inline {
+ background: transparent url("/images/theme-default/spin5.svg") no-repeat 50% 50%;
+ -webkit-animation: spin 3s infinite linear;
+ -o-animation: spin 3s infinite linear;
+ animation: spin 3s infinite linear;
+ height: 16px;
+ width: 16px;
+ background-size: 100%;
+ display: none;
+ position: absolute;
+}
+
+.generating .wok-list-description {
+ padding-left: 24px;
+}
+
+.generating .wok-list-loading-icon-inline {
+ display: block;
+ position: absolute;
+ top: 27px;
+ left: 14px;
+}
+
+.wok-list > ul {
+ list-style: none;
+ padding: 0;
+}
+
+.wok-list > ul > li,
+.wok-list > ul > li * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
-.wok-list-content tbody tr:hover {
+.wok-list > ul > li,
+.wok-list > ul > li > label {
+ width: 100%;
+}
+
+.wok-list > ul > li {
+ border-top: 1px solid #eee;
+ background: #fff;
+ position: relative;
+ -webkit-transition: background 0.1s ease-in-out;
+ -o-transition: background 0.1s ease-in-out;
+ transition: background 0.1s ease-in-out;
+}
+
+.wok-list > ul > li:first-child {
+ border: 0;
+}
+
+.wok-list > ul > li:nth-of-type(even) {
+ background: #fcfcfc;
+}
+
+.wok-list > ul > li.selected {
+ background: #ddd;
+}
+
+.wok-list > ul > li > label {
+ cursor: pointer !important;
+ text-decoration: none;
+ margin-bottom: 0;
+ padding-bottom: 5px;
+}
+
+.wok-list > ul > li > label:hover {
text-decoration: underline;
- cursor: pointer;
}
-.wok-list-content tbody tr.generating:hover {
+.wok-list > ul > li.generating > label:hover {
text-decoration: none;
cursor: default;
}
-.wok-list-content tbody tr.selected {
- background: #ddd;
+.wok-list > ul > li > input[type=checkbox] {
+ left: -15px;
}
-span.wok-repository-status.disabled {
- display: none;
+.wok-list > ul > li > input[type=checkbox].wok-checkbox + label:before {
+ float: left;
+ height: 30px;
+ margin-top: 13px;
}
-.wok-list-cell.disabled span {
- color: #999;
+.wok-list-action-button-container {
+ background: #fff;
+ z-index: 1;
+ position: relative;
+ -webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.4);
}
-.wok-single-button {
- padding-bottom: 16px;
- margin-top: -11px;
+.mobile-action {
+ width: 100%;
}
-.generating .wok-list-description {
- padding-left: 24px;
+.mobile-action .btn {
+ width: 100%;
+ height: 40px;
+ border-radius: 0;
}
-.generating .wok-list-loading-icon-inline {
- background: transparent url("/images/theme-default/spin5.svg") no-repeat 50% 50%;
- -webkit-animation: spin 3s infinite linear;
- -o-animation: spin 3s infinite linear;
- animation: spin 3s infinite linear;
- height: 16px;
- width: 16px;
- background-size: 100%;
- display: block;
- position: absolute;
+.mobile-action > .btn {
+ border-radius: 3px;
+}
+
+.mobile-action.open > .btn {
+ border-radius: 3px 3px 0 0;
+}
+
+.mobile-action .btn span.mobile-action-label {
+ font-weight: 600;
+}
+
+.mobile-action .btn span.mobile-action-count {
+ font-weight: 300;
+}
+
+.mobile-action .btn span.mobile-action-count strong {
+ font-weight: 600;
+ font-size: 11pt;
+}
+
+.mobile-action .dropdown-menu {
+ width: 100%;
+ border: 0;
+ box-shadow: none;
+ background: transparent;
+ padding: 0;
+ margin: 0;
+ border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu .btn {
+ border-radius: 0;
+}
+
+.mobile-action.open .dropdown-menu li:last-child .btn {
+ border-radius: 0 0 3px 3px;
+}
+
+.mobile-action .dropdown-menu li > .btn.disabled,
+.mobile-action .dropdown-menu li > .btn[disabled] {
+ opacity: 1;
+ background: #585758;
+ border-color: #585758;
+ color: #ddd;
+}
+
+@media (min-width: 992px) {
+ .wok-list-action-button-container {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+ .wok-list-action-button-container .dropdown-toggle {
+ display: none;
+ }
+ .wok-list-action-button-container .mobile-action {
+ position: static;
+ height: 40px;
+ }
+ .wok-list-action-button-container .mobile-action .btn {
+ width: auto;
+ }
+ .wok-list-action-button-container .mobile-action li:first-child .btn {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ .wok-list-action-button-container .mobile-action li:last-child .btn {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0 !important;
+ border-top-right-radius: 3px !important;
+ border-bottom-right-radius: 3px;
+ }
+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu {
+ display: block;
+ vertical-align: middle;
+ position: absolute;
+ top: 0;
+ }
+ .wok-list-action-button-container > .dropdown.mobile-action > .dropdown-menu > li {
+ display: inline-block;
+ }
+ .wok-list > ul > li > input[type=checkbox].wok-checkbox:focus + label {
+ outline: auto 5px #66afe9;
+ outline: auto 5px -webkit-focus-ring-color;
+ }
}
.grid-control {
@@ -948,6 +1123,7 @@ input[type=checkbox].wok-checkbox + label:before {
input[type=checkbox].wok-checkbox:checked + label:before {
content: "\f14a";
letter-spacing: 8px;
+ margin-right: 0.9px;
}
input[type=radio].wok-radio + label:before {
@@ -1105,7 +1281,7 @@ input[type=radio].wok-radio + label {
/*
* Project Wok
*
-* Copyright IBM Corp, 2015-2016
+* Copyright IBM Corp, 2016
*
* Code derived from Project Kimchi
*
diff --git a/ui/js/src/wok.list.js b/ui/js/src/wok.list.js
index 7d8e27c..f40b2e2 100644
--- a/ui/js/src/wok.list.js
+++ b/ui/js/src/wok.list.js
@@ -24,6 +24,7 @@ wok.widget.List = function(opts) {
wok.widget.List.prototype = (function() {
"use strict";
+
var htmlStr = [
'<div id="{id}-section" class="panel panel-default">',
'<div class="panel-heading">',
@@ -39,13 +40,19 @@ wok.widget.List.prototype = (function() {
'</button></p>',
'</div>',
'</div>',
- '<div id="{id}-btn-group" class="btn-group wok-single-button hidden">',
-
+ '<div id="{id}-action-group" class="wok-list-action-button-container">',
+ '<div class="dropdown mobile-action">',
+ '<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">',
+ '<span class="mobile-action-label">Actions</span>', // TODO: Replace with i18n string
+ '</button>',
+ '<ul class="dropdown-menu" role="menu">',
+ '</ul>',
+ '</div>',
'</div>',
'<div id="{id}" class="row clearfix">',
'<div class="wok-list-content">',
- '<table class="wok-list-table table table-striped" id="list">',
- '</table>',
+ '<div class="wok-list" id="list">',
+ '</div>',
'</div>',
'</div>',
'<div class="wok-list-mask hidden">',
@@ -80,112 +87,95 @@ wok.widget.List.prototype = (function() {
return (result);
};
-
- var fillButton = function(btnContainer){
- var addOrGenerateBtn = this.opts.toolbarButtons[0];
- var singleBtnHTML = [
- '<a class="btn btn-primary" href="#"', (addOrGenerateBtn.id ? (' id="' + addOrGenerateBtn.id + '"') : ''),' role="button">',
- addOrGenerateBtn.class ? ('<i class="' + addOrGenerateBtn.class) + '"></i> ' : '',
- addOrGenerateBtn.label,
- '</a>'
- ].join('');
- var singleBtn = $(singleBtnHTML).appendTo(btnContainer);
- $(singleBtn).click(function(e) {
- e.preventDefault();
- });
- addOrGenerateBtn.onClick && singleBtn.on('click', addOrGenerateBtn.onClick);
+ var fillButtons = function(btnContainer){
+ var toolbarButtons = this.opts.toolbarButtons;
+ $.each(toolbarButtons, function(i, button) {
+ var btnHTML = [
+ '<li class="',
+ (button.critical === true ? 'critical' : ''),
+ ,'">',
+ '<btn data-dismiss="modal"',
+ (button.id ? (' id="' + button.id + '"') : ''),
+ ' class="btn btn-primary"',
+ (button.disabled === true ? ' disabled="disabled"' : ''),
+ '">',
+ button.class ? ('<i class="' + button.class) + '"></i> ' : ' ',
+ button.label,
+ '</btn>',
+ '</li>'
+ ].join('');
+ var btnNode = $(btnHTML).appendTo(btnContainer);
+ button.onClick && btnNode.on('click', button.onClick);
+ });
};
var fillBody = function(container, fields) {
-
- var toolbarButtons = this.opts.toolbarButtons;
- var actionDropdownHtml;
var data = this.data;
- var tbody = ($('tbody', container).length && $('tbody', container)) || $('<tbody></tbody>').appendTo(container);
+ var tbody = ($('ul', container).length && $('ul', container)) || $('<ul></ul>').appendTo(container);
tbody.empty();
if (typeof data !== 'undefined' && data.length > 0) {
$.each(data, function(i, row) {
- var rowNode = $('<tr></tr>').appendTo(tbody);
+ var rowNode = $('<li></li>').appendTo(tbody);
var columnNodeHTML;
var columnData = '';
var state = '';
var styleClass = '';
- if (toolbarButtons) {
- actionDropdownHtml = [
- '<td>',
- '<div class="dropdown menu-flat">',
- '<button id="wok-dropdown-button-', i, '" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">',
- '<span class="edit-alt"></span>Actions<span class="caret"></span>',
- '</button>',
- '<ul class="dropdown-menu" role="menu" aria-labelledby="action-dropdown-menu-', i, '">',
- '</ul>',
- '</div>',
- '</td>'
- ].join('');
- }
+ var checkboxName = $('ul', container).parent().parent().parent().attr('id') + '-check' || $(container).parent().parent().parent().attr('id') + '-check';
$.each(fields, function(fi, field) {
var value = getValue(field.name, row);
if (field.type === 'status' && field.name === 'enabled') {
styleClass = (value === true ? '' : ' disabled');
state = [
- '<span class="wok-repository-status ',
+ '<span class="wok-list-item-status ',
value === true ? 'enabled' : 'disabled',
- '"><i class="fa fa-power-off"></i></span>'
+ '"><i class="fa fa-power-off"></i><span class="sr-only">',
+ value === true ? 'Enabled' : 'Disabled',
+ '</span></span>'
].join('');
}
- columnData += (field.type === 'name') ? ('<span class="wok-list-name">' + value.toString() + '</span>') : (field.type !== 'status' ? '<span class="wok-list-loading-icon-inline"></span><span class="wok-list-description">' + value.toString() + '</span>' : '');
-
- });
- columnNodeHTML = [
- '<td>',
- '<div class="wok-list-cell', styleClass, '">', state,
- columnData,
- '</div>',
- '</td>'
- ].join('');
- $(columnNodeHTML).appendTo(rowNode);
-
- var actionMenuNode = $(actionDropdownHtml).appendTo(rowNode);
-
- $.each(toolbarButtons, function(i, button) {
- var btnHTML = [
- '<li role="presentation"', button.critical === true ? ' class="critical"' : '', '>',
- '<a role="menuitem" tabindex="-1" data-dismiss="modal"', (button.id ? (' id="' + button.id + '"') : ''), (button.disabled === true ? ' class="disabled"' : ''),
- '>',
- button.class ? ('<i class="' + button.class) + '"></i>' : '',
- button.label,
- '</a></li>'
+ columnData += (field.type === 'name') ? ('<span role="status" class="wok-list-loading-icon-inline"></span><span class="wok-list-name '+field.cssClass+'" title="'+field.label+'">'+value.toString()+'</span>') : (field.type !== 'status' ? '<span class="wok-list-description '+field.cssClass+'" title="'+field.label+'">' + value.toString() + '</span>' : '');
+ columnNodeHTML = [
+ '<input class="wok-checkbox" type="checkbox" name="'+checkboxName+'" id="wok-list-',i+1,'-check" />',
+ '<label for="wok-list-',i+1,'-check" class="wok-list-cell', styleClass, '">',
+ state,
+ columnData,
+ '</div>',
+ '</label>'
].join('');
- var btnNode = $(btnHTML).appendTo($('.dropdown-menu', rowNode));
- button.onClick && btnNode.on('click', button.onClick);
});
+ $(columnNodeHTML).appendTo(rowNode);
});
}
};
- var stylingRow = function(row, className, add) {
- var index = $(row).index() + 1;
- $('tr', this.bodyContainer)
- .removeClass(className);
- if (add === false) {
- return;
- }
- $('tr:nth-child(' + index + ')', this.bodyContainer)
- .addClass(className);
+ var stylingRow = function(grid, className) {
+ $('li',grid.bodyContainer).removeClass(className);
+ $.each(grid.selectedIndex, function(){
+ var nth = this + 1;
+ $('li:nth-child('+nth+')',grid.bodyContainer).addClass(className);
+ });
};
var setBodyListeners = function() {
- if (this['opts']['rowSelection'] != 'disabled') {
-
- $('tr', this.bodyContainer).on('click', {
+ if (this['opts']['rowSelection'] !== 'disabled') {
+ $('li:not(.generating) input[type="checkbox"]', this.bodyContainer).on('change', {
grid: this
- }, function(event) {
+ },function(event) {
var grid = event.data.grid;
- if (!$(this).hasClass('generating')) {
- grid.selectedIndex = $(this).index();
- stylingRow.call(grid, this, 'selected');
- grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();
+ grid.selectedIndex = [];
+ $("li :checkbox:checked", this.bodyContainer).map(function() {
+ return $(this).parent().index();
+ }).each(function() {
+ grid.selectedIndex.push(this);
+ });
+ if ($('.mobile-action-count',grid.buttonActionContainer).length) {
+ $('.mobile-action-count',grid.buttonActionContainer).remove();
}
+ if(grid.selectedIndex.length){
+ $(grid.buttonActionContainer).append('<span class="mobile-action-count"> ( <strong>'+grid.selectedIndex.length+' item(s)</strong> selected )</span>');
+ }
+ stylingRow.call(grid, grid, 'selected');
+ grid['opts']['onRowSelected'] && grid['opts']['onRowSelected']();
});
}
};
@@ -197,7 +187,13 @@ wok.widget.List.prototype = (function() {
};
var getSelected = function() {
- return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;
+ var selectedItems = [];
+ for (var i = 0; i < this.selectedIndex.length; i++ ){
+ var value = this.selectedIndex[i];
+ selectedItems.push(this.data[value]);
+ }
+ // return this.selectedIndex >= 0 ? this.data[this.selectedIndex] : null;
+ return selectedItems;
};
var showMessage = function(msg) {
@@ -255,11 +251,17 @@ wok.widget.List.prototype = (function() {
titleNode = $('<h3 class="panel-title">' + title + '</h3>').appendTo(titleContainer);
}
- var bodyContainer = $('.wok-list-table.table.table-striped', domNode);
+ var bodyContainer = $('.wok-list', domNode);
this.bodyContainer = bodyContainer;
- var singleButtonContainer = $('.wok-single-button', domNode);
- this.singleButtonContainer = singleButtonContainer;
+ var selectButtonContainer = $('.wok-list-action-button-container', domNode);
+ this.selectButtonContainer = selectButtonContainer;
+
+ var buttonActionGroupContainer = $('.wok-list-action-button-container .dropdown-menu', domNode);
+ this.buttonActionGroupContainer = buttonActionGroupContainer;
+
+ var buttonActionContainer = $('.mobile-action .dropdown-toggle.btn', domNode);
+ this.buttonActionContainer = buttonActionContainer;
var gridBody = $('.wok-list-content', domNode);
this.gridBody = gridBody;
@@ -270,8 +272,7 @@ wok.widget.List.prototype = (function() {
var messageNode = $('.wok-list-message', domNode);
this.messageNode = messageNode;
-
- fillButton.call(this,this.singleButtonContainer);
+ fillButtons.call(this,this.buttonActionGroupContainer);
$('.retry-button', domNode).on('click', {
grid: this
@@ -279,7 +280,6 @@ wok.widget.List.prototype = (function() {
event.data.grid.reload();
});
-
};
return {
@@ -299,4 +299,4 @@ wok.widget.List.prototype = (function() {
reload: reload,
showMessage: showMessage
};
-})();
+})();
\ No newline at end of file