Primer Commit
This commit is contained in:
LuisAngelSalinasl
File diff suppressed because one or more lines are too long
@@ -0,0 +1,567 @@
|
||||
.lobilists .lobilist-wrapper,
|
||||
.lobilists .lobilist-placeholder {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 16px;
|
||||
width: 360px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist {
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
background-color: #FFF;
|
||||
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.lobilists .lobilist:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.ui-sortable-helper {
|
||||
-webkit-transform: rotate(2deg);
|
||||
-ms-transform: rotate(2deg);
|
||||
-o-transform: rotate(2deg);
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
.lobilists .lobilist:hover .lobilist-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default {
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default .lobilist-header {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default .lobilist-header input {
|
||||
background-color: transparent;
|
||||
border-color: #555555;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default .lobilist-title {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default .lobilist-actions .btn {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default .btn-show-form {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default .lobilist-form-footer {
|
||||
border-top: 1px solid #dddddd;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-default .lobilist-footer {
|
||||
border-top: 1px solid #dddddd;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger {
|
||||
border: 1px solid #dc5f5c;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger .lobilist-header {
|
||||
border-bottom: 1px solid #dc5f5c;
|
||||
background-color: #e27c79;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger .lobilist-header input {
|
||||
background-color: transparent;
|
||||
border-color: #FFF;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger .lobilist-title {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger .lobilist-actions .btn {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger .btn-show-form {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger .lobilist-form-footer {
|
||||
border-top: 1px solid #dc5f5c;
|
||||
background-color: #e27c79;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-danger .lobilist-footer {
|
||||
border-top: 1px solid #dc5f5c;
|
||||
background-color: #e27c79;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success {
|
||||
border: 1px solid #49a749;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success .lobilist-header {
|
||||
border-bottom: 1px solid #49a749;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success .lobilist-header input {
|
||||
background-color: transparent;
|
||||
border-color: #FFF;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success .lobilist-title {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success .lobilist-actions .btn {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success .btn-show-form {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success .lobilist-form-footer {
|
||||
border-top: 1px solid #49a749;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-success .lobilist-footer {
|
||||
border-top: 1px solid #49a749;
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning {
|
||||
border: 1px solid #ed9e2d;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning .lobilist-header {
|
||||
border-bottom: 1px solid #ed9e2d;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning .lobilist-header input {
|
||||
background-color: transparent;
|
||||
border-color: #FFF;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning .lobilist-title {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning .lobilist-actions .btn {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning .btn-show-form {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning .lobilist-form-footer {
|
||||
border-top: 1px solid #ed9e2d;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-warning .lobilist-footer {
|
||||
border-top: 1px solid #ed9e2d;
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info {
|
||||
border: 1px solid #3db5d8;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info .lobilist-header {
|
||||
border-bottom: 1px solid #3db5d8;
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info .lobilist-header input {
|
||||
background-color: transparent;
|
||||
border-color: #FFF;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info .lobilist-title {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info .lobilist-actions .btn {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info .btn-show-form {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info .lobilist-form-footer {
|
||||
border-top: 1px solid #3db5d8;
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-info .lobilist-footer {
|
||||
border-top: 1px solid #3db5d8;
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary {
|
||||
border: 1px solid #2c689c;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary .lobilist-header {
|
||||
border-bottom: 1px solid #2c689c;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary .lobilist-header input {
|
||||
background-color: transparent;
|
||||
border-color: #FFF;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary .lobilist-title {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary .lobilist-actions .btn {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary .btn-show-form {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary .lobilist-form-footer {
|
||||
border-top: 1px solid #2c689c;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.lobilists .lobilist.lobilist-primary .lobilist-footer {
|
||||
border-top: 1px solid #2c689c;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.lobilists .btn-finish-title-editing,
|
||||
.lobilists .btn-cancel-title-editing {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-header {
|
||||
position: relative;
|
||||
min-height: 38px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-header input {
|
||||
background-color: transparent;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-header.title-editing .lobilist-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-header.title-editing .lobilist-actions .btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-header.title-editing .lobilist-actions .btn-finish-title-editing,
|
||||
.lobilists .lobilist-header.title-editing .lobilist-actions .btn-cancel-title-editing {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-header:before,
|
||||
.lobilists .lobilist-header:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-header:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 8px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions>.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu {
|
||||
height: 70px;
|
||||
width: 100px;
|
||||
box-sizing: content-box;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-default,
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-danger,
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-success,
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-warning,
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-info,
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-primary {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin: 4px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-default {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-default:hover {
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-danger {
|
||||
background-color: #e27c79;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-danger:hover {
|
||||
background-color: #de6764;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-success:hover {
|
||||
background-color: #4cae4c;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-warning {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-warning:hover {
|
||||
background-color: #eea236;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-info {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-info:hover {
|
||||
background-color: #46b8da;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-primary {
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .dropdown-menu .lobilist-primary:hover {
|
||||
background-color: #2e6da4;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .btn {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-actions .btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.lobilists .lobilist-title {
|
||||
padding-left: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-items {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item,
|
||||
.lobilists .lobilist-item-placeholder {
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 5px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 35px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
-webkit-transition: background-color 0.2s;
|
||||
-o-transition: background-color 0.2s;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item .drag-handler {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 5px;
|
||||
border-left: 2px dotted #dddddd;
|
||||
border-right: 2px dotted #dddddd;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item .drag-handler:hover {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item .todo-actions {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
color: #9d9d9d;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item .todo-action {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item .todo-action:hover {
|
||||
cursor: pointer;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item-description {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item-duedate {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 12px;
|
||||
font-style: italic;
|
||||
color: #777777;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-check {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-check.lobicheck {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item,
|
||||
.lobilists .lobilist-item-placeholder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item.item-done {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.lobilists .btn-show-form {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-footer,
|
||||
.lobilists .lobilist-form-footer {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-form-footer {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-add-todo-form {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-add-todo-form .form-group {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-add-todo-form .btn-add-todo {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-add-todo-form .btn-add-todo,
|
||||
.lobilists .lobilist-add-todo-form .btn-discard-todo {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-placeholder {
|
||||
background-color: #f9f5d1;
|
||||
border: 1px dashed #777777;
|
||||
}
|
||||
|
||||
.lobilists .lobilist-item-placeholder {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border: 1px dashed #dddddd;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.lobilists .lobilist {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.lobilists.single-line {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.lobilists.single-line .lobilist-wrapper,
|
||||
.lobilists.single-line .lobilist-placeholder {
|
||||
float: none;
|
||||
white-space: normal;
|
||||
vertical-align: top;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.lobilists.no-sortable .lobilist-item .drag-handler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lobilists:before,
|
||||
.lobilists:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.lobilists:after {
|
||||
clear: both;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"onSingleLine": true,
|
||||
"lists": [
|
||||
{
|
||||
"title": "todo",
|
||||
"defaultStyle": "lobilist-danger",
|
||||
"items": [
|
||||
{
|
||||
"title": "beforeItemDelete is never called",
|
||||
"description": "even in your \"Event handling\" example"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "doing",
|
||||
"defaultStyle": "lobilist-info",
|
||||
"items": [
|
||||
{
|
||||
"title": "Function to get all lobilist info (lists, items) as object"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "done",
|
||||
"defaultStyle": "lobilist-success",
|
||||
"items": [
|
||||
{
|
||||
"title": "List style change event"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,328 @@
|
||||
/**
|
||||
* Created by Zura on 4/5/2016.
|
||||
*/
|
||||
$(function () {
|
||||
Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, {
|
||||
size: 'mini',
|
||||
// delay: false,
|
||||
position: 'right top'
|
||||
});
|
||||
|
||||
//Basic example
|
||||
$('#todo-lists-basic-demo').lobiList({
|
||||
lists: [
|
||||
{
|
||||
id: 'todo',
|
||||
title: 'TODO',
|
||||
defaultStyle: 'lobilist-info',
|
||||
items: [
|
||||
{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
},
|
||||
{
|
||||
title: 'Periods pride',
|
||||
description: 'Accepted was mollis',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
title: 'Flags better burns pigeon',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.'
|
||||
},
|
||||
{
|
||||
title: 'Accepted was mollis',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.',
|
||||
dueDate: '2015-02-02'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'DOING',
|
||||
items: [
|
||||
{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
|
||||
},
|
||||
{
|
||||
title: 'Chic leafy'
|
||||
},
|
||||
{
|
||||
title: 'Guessed interdum armies chirp writhes most',
|
||||
description: 'Came champlain live leopards twilight whenever warm read wish squirrel rock.',
|
||||
dueDate: '2015-02-04',
|
||||
done: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
//Custom datepicker
|
||||
$('#todo-lists-demo-datepicker').lobiList({
|
||||
lists: [
|
||||
{
|
||||
title: 'TODO',
|
||||
defaultStyle: 'lobilist-info',
|
||||
items: [
|
||||
{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
afterListAdd: function(lobilist, list){
|
||||
var $dueDateInput = list.$el.find('form [name=dueDate]');
|
||||
$dueDateInput.datepicker();
|
||||
}
|
||||
});
|
||||
// Event handling
|
||||
(function () {
|
||||
var list;
|
||||
|
||||
$('#todo-lists-initialize-btn').click(function () {
|
||||
list = $('#todo-lists-demo-events')
|
||||
.lobiList({
|
||||
init: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'init'
|
||||
});
|
||||
},
|
||||
beforeDestroy: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeDestroy'
|
||||
});
|
||||
},
|
||||
afterDestroy: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterDestroy'
|
||||
});
|
||||
},
|
||||
beforeListAdd: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeListAdd'
|
||||
});
|
||||
},
|
||||
afterListAdd: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterListAdd'
|
||||
});
|
||||
},
|
||||
beforeListRemove: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeListRemove'
|
||||
});
|
||||
},
|
||||
afterListRemove: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterListRemove'
|
||||
});
|
||||
},
|
||||
beforeItemAdd: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemAdd'
|
||||
});
|
||||
},
|
||||
afterItemAdd: function () {
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemAdd'
|
||||
});
|
||||
},
|
||||
beforeItemUpdate: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemUpdate'
|
||||
});
|
||||
},
|
||||
afterItemUpdate: function () {
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemUpdate'
|
||||
});
|
||||
},
|
||||
beforeItemDelete: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemDelete'
|
||||
});
|
||||
},
|
||||
afterItemDelete: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemDelete'
|
||||
});
|
||||
},
|
||||
beforeListDrop: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeListDrop'
|
||||
});
|
||||
},
|
||||
afterListReorder: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterListReorder'
|
||||
});
|
||||
},
|
||||
beforeItemDrop: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemDrop'
|
||||
});
|
||||
},
|
||||
afterItemReorder: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemReorder'
|
||||
});
|
||||
},
|
||||
afterMarkAsDone: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterMarkAsDone'
|
||||
});
|
||||
},
|
||||
afterMarkAsUndone: function () {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterMarkAsUndone'
|
||||
});
|
||||
},
|
||||
styleChange: function(list, oldStyle, newStyle){
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'styleChange: Old style - "'+oldStyle+'". New style - "'+ newStyle +'"'
|
||||
});
|
||||
},
|
||||
titleChange: function(list, oldTitle, newTitle){
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'titleChange: Old title - "'+oldTitle+'". New title - "'+ newTitle + '"'
|
||||
});
|
||||
},
|
||||
lists: [
|
||||
{
|
||||
title: 'TODO',
|
||||
defaultStyle: 'lobilist-info',
|
||||
items: [
|
||||
{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
},
|
||||
{
|
||||
title: 'Periods pride',
|
||||
description: 'Accepted was mollis',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
title: 'Flags better burns pigeon',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
|
||||
'treacherously darkling.'
|
||||
},
|
||||
{
|
||||
title: 'Accepted was mollis',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
|
||||
'treacherously darkling.',
|
||||
dueDate: '2015-02-02'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
.data('lobiList');
|
||||
});
|
||||
|
||||
$('#todo-lists-destroy-btn').click(function () {
|
||||
list.destroy();
|
||||
});
|
||||
})();
|
||||
// Custom controls
|
||||
$('#todo-lists-demo-controls').lobiList({
|
||||
lists: [
|
||||
{
|
||||
title: 'TODO',
|
||||
defaultStyle: 'lobilist-info',
|
||||
controls: ['edit', 'styleChange'],
|
||||
items: [
|
||||
{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Disabled custom checkboxes',
|
||||
defaultStyle: 'lobilist-danger',
|
||||
controls: ['edit', 'add', 'remove'],
|
||||
useLobicheck: false,
|
||||
items: [
|
||||
{
|
||||
title: 'Periods pride',
|
||||
description: 'Accepted was mollis',
|
||||
done: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Controls disabled',
|
||||
controls: false,
|
||||
items: [
|
||||
{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
|
||||
'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
|
||||
'celerities gales beams.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Disabled todo edit/remove',
|
||||
enableTodoRemove: false,
|
||||
enableTodoEdit: false,
|
||||
items: [
|
||||
{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
|
||||
'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
|
||||
'celerities gales beams.'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
// Disabled drag & drop
|
||||
$('#todo-lists-demo-sorting').lobiList({
|
||||
sortable: false,
|
||||
lists: [
|
||||
{
|
||||
title: 'TODO',
|
||||
defaultStyle: 'lobilist-info',
|
||||
controls: ['edit', 'styleChange'],
|
||||
items: [
|
||||
{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Controls disabled',
|
||||
controls: false,
|
||||
items: [
|
||||
{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#actions-by-ajax').lobiList({
|
||||
actions: {
|
||||
load: 'demo/example1/load.json',
|
||||
insert: 'demo/example1/insert.php',
|
||||
delete: 'demo/example1/delete.php',
|
||||
update: 'demo/example1/update.php'
|
||||
},
|
||||
afterItemAdd: function(){
|
||||
console.log(arguments);
|
||||
}
|
||||
});
|
||||
});
|
||||
+13
File diff suppressed because one or more lines are too long
@@ -0,0 +1,196 @@
|
||||
/*!
|
||||
* jQuery UI Touch Punch Improved 0.3.1
|
||||
*
|
||||
*
|
||||
* Copyright 2013, Chris Hutchinson <chris@brushd.com>
|
||||
* Original jquery-ui-touch-punch Copyright 2011, Dave Furfero
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
*
|
||||
* Depends:
|
||||
* jquery.ui.widget.js
|
||||
* jquery.ui.mouse.js
|
||||
*/
|
||||
(function ($) {
|
||||
var pointerEnabled = window.navigator.pointerEnabled
|
||||
|| window.navigator.msPointerEnabled;
|
||||
|
||||
// Detect touch support
|
||||
$.support.touch = 'ontouchend' in document || pointerEnabled;
|
||||
|
||||
// Ignore browsers without touch support or mouse support
|
||||
if (!$.support.touch || !$.ui.mouse) {
|
||||
return;
|
||||
}
|
||||
|
||||
var mouseProto = $.ui.mouse.prototype,
|
||||
_mouseInit = mouseProto._mouseInit,
|
||||
touchHandled;
|
||||
|
||||
// see http://stackoverflow.com/a/12714084/220825
|
||||
function fixTouch(touch) {
|
||||
var winPageX = window.pageXOffset,
|
||||
winPageY = window.pageYOffset,
|
||||
x = touch.clientX,
|
||||
y = touch.clientY;
|
||||
|
||||
if (touch.pageY === 0 && Math.floor(y) > Math.floor(touch.pageY) || touch.pageX === 0 && Math.floor(x) > Math.floor(touch.pageX)) {
|
||||
// iOS4 clientX/clientY have the value that should have been
|
||||
// in pageX/pageY. While pageX/page/ have the value 0
|
||||
x = x - winPageX;
|
||||
y = y - winPageY;
|
||||
} else if (y < (touch.pageY - winPageY) || x < (touch.pageX - winPageX)) {
|
||||
// Some Android browsers have totally bogus values for clientX/Y
|
||||
// when scrolling/zooming a page. Detectable since clientX/clientY
|
||||
// should never be smaller than pageX/pageY minus page scroll
|
||||
x = touch.pageX - winPageX;
|
||||
y = touch.pageY - winPageY;
|
||||
}
|
||||
|
||||
return {
|
||||
clientX: x,
|
||||
clientY: y
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulate a mouse event based on a corresponding touch event
|
||||
* @param {Object} event A touch event
|
||||
* @param {String} simulatedType The corresponding mouse event
|
||||
*/
|
||||
function simulateMouseEvent (event, simulatedType) {
|
||||
// Ignore multi-touch events
|
||||
if ((!pointerEnabled && event.originalEvent.touches.length > 1) || (pointerEnabled && !event.isPrimary)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var touch = pointerEnabled ? event.originalEvent : event.originalEvent.changedTouches[0],
|
||||
simulatedEvent = document.createEvent('MouseEvents'),
|
||||
coord = fixTouch(touch);
|
||||
|
||||
// Check if element is an input or a textarea
|
||||
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
// Initialize the simulated mouse event using the touch event's coordinates
|
||||
simulatedEvent.initMouseEvent(
|
||||
simulatedType, // type
|
||||
true, // bubbles
|
||||
true, // cancelable
|
||||
window, // view
|
||||
1, // detail
|
||||
event.screenX || touch.screenX, // screenX
|
||||
event.screenY || touch.screenY, // screenY
|
||||
event.clientX || coord.clientX, // clientX
|
||||
event.clientY || coord.clientY, // clientY
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
);
|
||||
|
||||
// Dispatch the simulated event to the target element
|
||||
event.target.dispatchEvent(simulatedEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchstart events
|
||||
* @param {Object} event The widget element's touchstart event
|
||||
*/
|
||||
mouseProto._touchStart = function (event) {
|
||||
var self = this;
|
||||
|
||||
// Ignore the event if another widget is already being handled
|
||||
if (touchHandled || (!pointerEnabled && !self._mouseCapture(event.originalEvent.changedTouches[0]))) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the flag to prevent other widgets from inheriting the touch event
|
||||
touchHandled = true;
|
||||
|
||||
// Track movement to determine if interaction was a click
|
||||
self._touchMoved = false;
|
||||
|
||||
// Simulate the mouseover event
|
||||
simulateMouseEvent(event, 'mouseover');
|
||||
|
||||
// Simulate the mousemove event
|
||||
simulateMouseEvent(event, 'mousemove');
|
||||
|
||||
// Simulate the mousedown event
|
||||
simulateMouseEvent(event, 'mousedown');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchmove events
|
||||
* @param {Object} event The document's touchmove event
|
||||
*/
|
||||
mouseProto._touchMove = function (event) {
|
||||
// Ignore event if not handled
|
||||
if (!touchHandled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Interaction was not a click
|
||||
this._touchMoved = true;
|
||||
|
||||
// Simulate the mousemove event
|
||||
simulateMouseEvent(event, 'mousemove');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchend events
|
||||
* @param {Object} event The document's touchend event
|
||||
*/
|
||||
mouseProto._touchEnd = function (event) {
|
||||
// Ignore event if not handled
|
||||
if (!touchHandled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate the mouseup event
|
||||
simulateMouseEvent(event, 'mouseup');
|
||||
|
||||
// Simulate the mouseout event
|
||||
simulateMouseEvent(event, 'mouseout');
|
||||
|
||||
// If the touch interaction did not move, it should trigger a click
|
||||
if (!this._touchMoved) {
|
||||
// Simulate the click event
|
||||
simulateMouseEvent(event, 'click');
|
||||
}
|
||||
|
||||
// Unset the flag to allow other widgets to inherit the touch event
|
||||
touchHandled = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* A duck punch of the $.ui.mouse _mouseInit method to support touch events.
|
||||
* This method extends the widget with bound touch event handlers that
|
||||
* translate touch events to mouse events and pass them to the widget's
|
||||
* original mouse event handling methods.
|
||||
*/
|
||||
mouseProto._mouseInit = function () {
|
||||
var self = this;
|
||||
|
||||
self.element.on({
|
||||
'touchstart': $.proxy(self, '_touchStart'),
|
||||
'touchmove': $.proxy(self, '_touchMove'),
|
||||
'touchend': $.proxy(self, '_touchEnd'),
|
||||
'pointerDown': $.proxy(self, '_touchStart'),
|
||||
'pointerMove': $.proxy(self, '_touchMove'),
|
||||
'pointerUp': $.proxy(self, '_touchEnd'),
|
||||
'MSPointerDown': $.proxy(self, '_touchStart'),
|
||||
'MSPointerMove': $.proxy(self, '_touchMove'),
|
||||
'MSPointerUp': $.proxy(self, '_touchEnd')
|
||||
});
|
||||
|
||||
// Call the original $.ui.mouse init method
|
||||
_mouseInit.call(self);
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,333 @@
|
||||
$(function() {
|
||||
/**
|
||||
* Created by Zura on 4/5/2016.
|
||||
*/
|
||||
$(function() {
|
||||
Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, {
|
||||
size: 'mini',
|
||||
// delay: false,
|
||||
position: 'right top'
|
||||
});
|
||||
|
||||
//Basic example
|
||||
$('#todo-lists-basic-demo').lobiList({
|
||||
lists: [{
|
||||
id: 'todo',
|
||||
title: 'Todo',
|
||||
defaultStyle: 'lobilist-danger',
|
||||
items: [{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
},
|
||||
{
|
||||
title: 'Periods pride',
|
||||
description: 'Accepted was mollis',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
title: 'Flags better burns pigeon',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.'
|
||||
},
|
||||
{
|
||||
title: 'Accepted was mollis',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.',
|
||||
dueDate: '2015-02-02'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'doing',
|
||||
title: 'Doing',
|
||||
defaultStyle: 'lobilist-primary',
|
||||
items: [{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
|
||||
},
|
||||
{
|
||||
title: 'Chic leafy'
|
||||
},
|
||||
{
|
||||
title: 'Guessed interdum armies chirp writhes most',
|
||||
description: 'Came champlain live leopards twilight whenever warm read wish squirrel rock.',
|
||||
dueDate: '2015-02-04',
|
||||
done: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'Done',
|
||||
title: 'Done',
|
||||
defaultStyle: 'lobilist-success',
|
||||
items: [{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
|
||||
},
|
||||
{
|
||||
title: 'Chic leafy'
|
||||
},
|
||||
{
|
||||
title: 'Guessed interdum armies chirp writhes most',
|
||||
description: 'Came champlain live leopards twilight whenever warm read wish squirrel rock.',
|
||||
dueDate: '2015-02-04',
|
||||
done: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
//Custom datepicker
|
||||
$('#todo-lists-demo-datepicker').lobiList({
|
||||
lists: [{
|
||||
title: 'Todo',
|
||||
defaultStyle: 'lobilist-info',
|
||||
items: [{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
}]
|
||||
}],
|
||||
afterListAdd: function(lobilist, list) {
|
||||
var $dueDateInput = list.$el.find('form [name=dueDate]');
|
||||
$dueDateInput.datepicker();
|
||||
}
|
||||
});
|
||||
// Event handling
|
||||
(function() {
|
||||
var list;
|
||||
|
||||
$('#todo-lists-initialize-btn').click(function() {
|
||||
list = $('#todo-lists-demo-events')
|
||||
.lobiList({
|
||||
init: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'init'
|
||||
});
|
||||
},
|
||||
beforeDestroy: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeDestroy'
|
||||
});
|
||||
},
|
||||
afterDestroy: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterDestroy'
|
||||
});
|
||||
},
|
||||
beforeListAdd: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeListAdd'
|
||||
});
|
||||
},
|
||||
afterListAdd: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterListAdd'
|
||||
});
|
||||
},
|
||||
beforeListRemove: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeListRemove'
|
||||
});
|
||||
},
|
||||
afterListRemove: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterListRemove'
|
||||
});
|
||||
},
|
||||
beforeItemAdd: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemAdd'
|
||||
});
|
||||
},
|
||||
afterItemAdd: function() {
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemAdd'
|
||||
});
|
||||
},
|
||||
beforeItemUpdate: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemUpdate'
|
||||
});
|
||||
},
|
||||
afterItemUpdate: function() {
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemUpdate'
|
||||
});
|
||||
},
|
||||
beforeItemDelete: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemDelete'
|
||||
});
|
||||
},
|
||||
afterItemDelete: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemDelete'
|
||||
});
|
||||
},
|
||||
beforeListDrop: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeListDrop'
|
||||
});
|
||||
},
|
||||
afterListReorder: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterListReorder'
|
||||
});
|
||||
},
|
||||
beforeItemDrop: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'beforeItemDrop'
|
||||
});
|
||||
},
|
||||
afterItemReorder: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterItemReorder'
|
||||
});
|
||||
},
|
||||
afterMarkAsDone: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterMarkAsDone'
|
||||
});
|
||||
},
|
||||
afterMarkAsUndone: function() {
|
||||
Lobibox.notify('default', {
|
||||
msg: 'afterMarkAsUndone'
|
||||
});
|
||||
},
|
||||
styleChange: function(list, oldStyle, newStyle) {
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'styleChange: Old style - "' + oldStyle + '". New style - "' + newStyle + '"'
|
||||
});
|
||||
},
|
||||
titleChange: function(list, oldTitle, newTitle) {
|
||||
console.log(arguments);
|
||||
Lobibox.notify('default', {
|
||||
msg: 'titleChange: Old title - "' + oldTitle + '". New title - "' + newTitle + '"'
|
||||
});
|
||||
},
|
||||
lists: [{
|
||||
title: 'Todo',
|
||||
defaultStyle: 'lobilist-info',
|
||||
items: [{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
},
|
||||
{
|
||||
title: 'Periods pride',
|
||||
description: 'Accepted was mollis',
|
||||
done: true
|
||||
},
|
||||
{
|
||||
title: 'Flags better burns pigeon',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
|
||||
'treacherously darkling.'
|
||||
},
|
||||
{
|
||||
title: 'Accepted was mollis',
|
||||
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
|
||||
'treacherously darkling.',
|
||||
dueDate: '2015-02-02'
|
||||
}
|
||||
]
|
||||
}]
|
||||
})
|
||||
.data('lobiList');
|
||||
});
|
||||
|
||||
$('#todo-lists-destroy-btn').click(function() {
|
||||
list.destroy();
|
||||
});
|
||||
})();
|
||||
// Custom controls
|
||||
$('#todo-lists-demo-controls').lobiList({
|
||||
lists: [{
|
||||
title: 'Todo',
|
||||
defaultStyle: 'lobilist-info',
|
||||
controls: ['edit', 'styleChange'],
|
||||
items: [{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: 'Disabled checkboxes',
|
||||
defaultStyle: 'lobilist-danger',
|
||||
controls: ['edit', 'add', 'remove'],
|
||||
useLobicheck: false,
|
||||
items: [{
|
||||
title: 'Periods pride',
|
||||
description: 'Accepted was mollis',
|
||||
done: true
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: 'Controls disabled',
|
||||
controls: false,
|
||||
items: [{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
|
||||
'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
|
||||
'celerities gales beams.'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: 'No edit/remove',
|
||||
enableTodoRemove: false,
|
||||
enableTodoEdit: false,
|
||||
items: [{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
|
||||
'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
|
||||
'celerities gales beams.'
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
// Disabled drag & drop
|
||||
$('#todo-lists-demo-sorting').lobiList({
|
||||
sortable: false,
|
||||
lists: [{
|
||||
title: 'Todo',
|
||||
defaultStyle: 'lobilist-info',
|
||||
controls: ['edit', 'styleChange'],
|
||||
items: [{
|
||||
title: 'Floor cool cinders',
|
||||
description: 'Thunder fulfilled travellers folly, wading, lake.',
|
||||
dueDate: '2015-01-31'
|
||||
}]
|
||||
},
|
||||
{
|
||||
title: 'Controls disabled',
|
||||
controls: false,
|
||||
items: [{
|
||||
title: 'Composed trays',
|
||||
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#actions-by-ajax').lobiList({
|
||||
actions: {
|
||||
load: '../example1/load.json',
|
||||
insert: '../example1/insert.php',
|
||||
delete: '../example1/delete.php',
|
||||
update: '../example1/update.php'
|
||||
},
|
||||
afterItemAdd: function() {
|
||||
console.log(arguments);
|
||||
}
|
||||
});
|
||||
|
||||
$('.datepicker').datepicker({
|
||||
autoclose: true,
|
||||
todayHighlight: true
|
||||
});
|
||||
$('.lobilist').perfectScrollbar();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,297 @@
|
||||
@import "../../bower_components/bootstrap/less/variables.less";
|
||||
@import "../../bower_components/bootstrap/less/mixins.less";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
.lobilists {
|
||||
.lobilist-wrapper {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: @lobilist-wrapper-margin-bottom;
|
||||
width: @lobilist-wrapper-width;
|
||||
margin-right: @lobilist-margin-right;
|
||||
}
|
||||
.lobilist{
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
background-color: @lobilist-bg;
|
||||
.box-shadow(@lobilist-box-shadow);
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.ui-sortable-helper {
|
||||
.rotate(2deg);
|
||||
}
|
||||
&:hover {
|
||||
.lobilist-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.lobilist-default {
|
||||
.lobilist-variant(@lobilist-default-header-bg, @lobilist-default-title-color);
|
||||
}
|
||||
|
||||
&.lobilist-danger {
|
||||
.lobilist-variant(@lobilist-danger-header-bg, @lobilist-danger-title-color);
|
||||
}
|
||||
&.lobilist-success {
|
||||
.lobilist-variant(@lobilist-success-header-bg, @lobilist-success-title-color);
|
||||
}
|
||||
&.lobilist-warning {
|
||||
.lobilist-variant(@lobilist-warning-header-bg, @lobilist-warning-title-color);
|
||||
}
|
||||
&.lobilist-info {
|
||||
.lobilist-variant(@lobilist-info-header-bg, @lobilist-info-title-color);
|
||||
}
|
||||
&.lobilist-primary {
|
||||
.lobilist-variant(@lobilist-primary-header-bg, @lobilist-primary-title-color);
|
||||
}
|
||||
}
|
||||
.btn-finish-title-editing,
|
||||
.btn-cancel-title-editing {
|
||||
display: none;
|
||||
}
|
||||
.lobilist-header {
|
||||
position: relative;
|
||||
min-height: @lobilist-header-min-height;
|
||||
padding: @lobilist-header-padding-vertical @lobilist-header-padding-horizontal;
|
||||
input {
|
||||
background-color: transparent;
|
||||
height: @lobilist-title-edit-input-height;
|
||||
}
|
||||
&.title-editing {
|
||||
.lobilist-actions {
|
||||
opacity: 1;
|
||||
.btn {
|
||||
display: none;
|
||||
}
|
||||
.btn-finish-title-editing,
|
||||
.btn-cancel-title-editing {
|
||||
display: inline-block;
|
||||
font-size: @lobilist-actions-finish-cancel-btn-font-size;
|
||||
line-height: @lobilist-actions-finish-cancel-btn-size;
|
||||
.square(@lobilist-actions-finish-cancel-btn-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix();
|
||||
}
|
||||
.lobilist-actions {
|
||||
position: absolute;
|
||||
top: @lobilist-header-padding-vertical;
|
||||
right: @lobilist-header-padding-horizontal;
|
||||
opacity: 0;
|
||||
> .dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
.dropdown-menu {
|
||||
height: 70px;
|
||||
width: 100px;
|
||||
box-sizing: content-box;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.lobilist-default,
|
||||
.lobilist-danger,
|
||||
.lobilist-success,
|
||||
.lobilist-warning,
|
||||
.lobilist-info,
|
||||
.lobilist-primary {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin: @lobilist-actions-list-style-picker-item-margin;
|
||||
.square(@lobilist-actions-list-style-picker-item-size);
|
||||
|
||||
}
|
||||
.lobilist-default {
|
||||
background-color: @lobilist-default-header-bg;
|
||||
&:hover {
|
||||
background-color: darken(@lobilist-default-header-bg, 5%);
|
||||
}
|
||||
}
|
||||
.lobilist-danger {
|
||||
background-color: @lobilist-danger-header-bg;
|
||||
&:hover {
|
||||
background-color: darken(@lobilist-danger-header-bg, 5%);
|
||||
}
|
||||
}
|
||||
.lobilist-success {
|
||||
background-color: @lobilist-success-header-bg;
|
||||
&:hover {
|
||||
background-color: darken(@lobilist-success-header-bg, 5%);
|
||||
}
|
||||
}
|
||||
.lobilist-warning {
|
||||
background-color: @lobilist-warning-header-bg;
|
||||
&:hover {
|
||||
background-color: darken(@lobilist-warning-header-bg, 5%);
|
||||
}
|
||||
}
|
||||
.lobilist-info {
|
||||
background-color: @lobilist-info-header-bg;
|
||||
&:hover {
|
||||
background-color: darken(@lobilist-info-header-bg, 5%);
|
||||
}
|
||||
}
|
||||
.lobilist-primary {
|
||||
background-color: @lobilist-primary-header-bg;
|
||||
&:hover {
|
||||
background-color: darken(@lobilist-primary-header-bg, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.btn-default {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
.square(@lobilist-actions-btn-size);
|
||||
&:hover {
|
||||
background-color: @lobilist-actions-btn-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lobilist-title {
|
||||
padding-left: @lobilist-title-padding-left;
|
||||
font-size: @lobilist-title-font-size;
|
||||
}
|
||||
.lobilist-items {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding: @lobilist-items-padding;
|
||||
}
|
||||
.lobilist-item {
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: @lobilist-item-margin-bottom;
|
||||
padding-top: @lobilist-item-padding-top;
|
||||
padding-bottom: @lobilist-item-padding-bottom;
|
||||
padding-left: @lobilist-item-padding-left;
|
||||
border-bottom: 1px solid @lobilist-item-border-color;
|
||||
.transition(background-color 0.2s);
|
||||
|
||||
.drag-handler {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: @lobilist-item-drag-handler-width;
|
||||
border-left: @lobilist-item-drag-handler-border;
|
||||
border-right: @lobilist-item-drag-handler-border;
|
||||
&:hover {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
.todo-actions {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-size: @lobilist-item-edit-btn-font-size;
|
||||
color: @lobilist-item-edit-btn-color;
|
||||
line-height: @lobilist-item-edit-btn-size;
|
||||
|
||||
}
|
||||
.todo-action {
|
||||
display: inline-block;
|
||||
.square(@lobilist-item-edit-btn-size);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: darken(@lobilist-item-edit-btn-color, 25%);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: @lobilist-item-hover-bg;
|
||||
}
|
||||
}
|
||||
.lobilist-item-title {
|
||||
font-weight: 600;
|
||||
font-size: @lobilist-item-title-font-size;
|
||||
}
|
||||
.lobilist-item-description {
|
||||
font-style: italic;
|
||||
}
|
||||
.lobilist-item-duedate {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: @lobilist-item-drag-handler-width + @lobilist-item-check-left-offset;
|
||||
font-style: italic;
|
||||
color: @gray-light;
|
||||
font-size: 85%;
|
||||
}
|
||||
.lobilist-check {
|
||||
position: absolute;
|
||||
left: @lobilist-item-drag-handler-width + @lobilist-item-check-left-offset;
|
||||
top: @lobilist-item-padding-top;
|
||||
&.lobicheck {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.lobilist-item {
|
||||
position: relative;
|
||||
&.item-done {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
.btn-show-form {
|
||||
outline: 0;
|
||||
}
|
||||
.lobilist-footer,
|
||||
.lobilist-form-footer {
|
||||
padding: @lobilist-footer-padding-vertical @lobilist-footer-padding-horizontal;
|
||||
}
|
||||
.lobilist-form-footer {
|
||||
margin-left: -@lobilist-form-padding;
|
||||
margin-right: -@lobilist-form-padding;
|
||||
margin-bottom: -@lobilist-form-padding;
|
||||
}
|
||||
.lobilist-add-todo-form {
|
||||
padding: @lobilist-form-padding;
|
||||
.form-group {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.btn-add-todo {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.btn-add-todo,
|
||||
.btn-discard-todo {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.lobilist-placeholder {
|
||||
&:extend(.lobilists .lobilist-wrapper);
|
||||
background-color: #f9f5d1;
|
||||
border: 1px dashed @gray-light;
|
||||
}
|
||||
.lobilist-item-placeholder {
|
||||
&:extend(.lobilists .lobilist-item);
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border: 1px dashed darken(@gray-lighter, 7%);
|
||||
}
|
||||
@media (max-width: @screen-xs-min) {
|
||||
.lobilist {
|
||||
width: @lobilist-xxs-width;
|
||||
}
|
||||
}
|
||||
&.single-line {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
height: 400px;
|
||||
.lobilist-wrapper,
|
||||
.lobilist-placeholder {
|
||||
float: none;
|
||||
white-space: normal;
|
||||
vertical-align: top;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.no-sortable{
|
||||
.lobilist-item{
|
||||
.drag-handler{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix();
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.lobilist-variant(@header-bg, @color){
|
||||
border: 1px solid darken(@header-bg, 7%);
|
||||
.lobilist-header{
|
||||
border-bottom: 1px solid darken(@header-bg, 7%);
|
||||
background-color: @header-bg;
|
||||
input{
|
||||
background-color: transparent;
|
||||
border-color: @color;
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
.lobilist-title{
|
||||
color: @color;
|
||||
}
|
||||
.lobilist-actions{
|
||||
.btn{
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
.btn-show-form{
|
||||
color: @color;
|
||||
}
|
||||
.lobilist-form-footer{
|
||||
border-top: 1px solid darken(@header-bg, 7%);
|
||||
background-color: @header-bg;
|
||||
}
|
||||
.lobilist-footer{
|
||||
border-top: 1px solid darken(@header-bg, 7%);
|
||||
background-color: @header-bg;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
@lobilist-wrapper-margin-bottom: 16px;
|
||||
@lobilist-wrapper-width: 360px;
|
||||
@lobilist-bg: #FFF;
|
||||
@lobilist-xxs-width : 100%;
|
||||
@lobilist-margin-right : 16px;
|
||||
@lobilist-box-shadow : 2px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@lobilist-header-min-height : 38px;
|
||||
@lobilist-header-padding-vertical : 6px;
|
||||
@lobilist-header-padding-horizontal : 8px;
|
||||
@lobilist-title-font-size : 18px;
|
||||
@lobilist-title-line-height : 26px;
|
||||
@lobilist-title-padding-left : 15px;
|
||||
@lobilist-title-edit-input-height : 30px;
|
||||
|
||||
@lobilist-actions-btn-bg : rgba(0, 0, 0, 0.04);
|
||||
@lobilist-actions-btn-size : @lobilist-title-line-height;
|
||||
@lobilist-actions-finish-cancel-btn-size : @lobilist-title-edit-input-height;
|
||||
@lobilist-actions-finish-cancel-btn-font-size : 18px;
|
||||
@lobilist-actions-list-style-picker-width : 70px;
|
||||
@lobilist-actions-list-style-picker-item-margin : 4px;
|
||||
@lobilist-actions-list-style-picker-item-size : 25px;
|
||||
|
||||
|
||||
@lobilist-form-padding : 10px;
|
||||
@lobilist-items-padding : 10px;
|
||||
@lobilist-items-border-bottom : 1px solid darken(@gray-lighter, 5%);
|
||||
|
||||
@lobilist-item-margin-bottom : 5px;
|
||||
@lobilist-item-padding-left : 35px;
|
||||
@lobilist-item-title-font-size : 16px;
|
||||
@lobilist-item-border-color : @gray-lighter;
|
||||
@lobilist-item-padding-top: 16px;
|
||||
@lobilist-item-padding-bottom: 4px;
|
||||
@lobilist-item-drag-handler-width : 5px;
|
||||
@lobilist-item-drag-handler-border : 2px dotted darken(@gray-lighter, 7%);
|
||||
@lobilist-item-check-left-offset : 7px;
|
||||
@lobilist-item-hover-bg : rgba(0, 0, 0, 0.02);
|
||||
|
||||
@lobilist-item-edit-btn-color : lighten(@gray-light, 15%);
|
||||
@lobilist-item-edit-btn-font-size : 10px;
|
||||
@lobilist-item-edit-btn-size : 16px;
|
||||
|
||||
@lobilist-footer-padding-vertical : @lobilist-header-padding-vertical;
|
||||
@lobilist-footer-padding-horizontal : @lobilist-header-padding-horizontal;
|
||||
|
||||
|
||||
|
||||
@lobilist-default-header-bg : @gray-lighter;
|
||||
@lobilist-default-title-color : @gray;
|
||||
|
||||
@lobilist-danger-header-bg : lighten(@brand-danger, 10%);
|
||||
@lobilist-danger-title-color : #FFF;
|
||||
|
||||
@lobilist-success-header-bg : @brand-success;
|
||||
@lobilist-success-title-color : #FFF;
|
||||
|
||||
@lobilist-warning-header-bg : @brand-warning;
|
||||
@lobilist-warning-title-color : #FFF;
|
||||
|
||||
@lobilist-info-header-bg : @brand-info;
|
||||
@lobilist-info-title-color : #FFF;
|
||||
|
||||
@lobilist-primary-header-bg : @brand-primary;
|
||||
@lobilist-primary-title-color : #FFF;
|
||||
Reference in New Issue
Block a user