Primer Commit

This commit is contained in:
LuisAngelSalinasl
2025-08-04 18:51:41 -06:00
commit 8fcbb98114
8990 changed files with 1407288 additions and 0 deletions

View File

File diff suppressed because one or more lines are too long

View File

@@ -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

View File

@@ -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"
}
]
}
]
}

View File

@@ -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);
}
});
});

File diff suppressed because one or more lines are too long

View File

@@ -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

View File

@@ -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();
});
});

View File

@@ -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();
}

View File

@@ -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;
}
}

View File

@@ -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;