├── demo ├── example1 │ ├── insert.php │ └── load.json ├── demo.css ├── basic.html └── demo.js ├── lib ├── lobibox │ ├── sounds │ │ ├── sound1.ogg │ │ ├── sound2.ogg │ │ ├── sound3.ogg │ │ ├── sound4.ogg │ │ ├── sound5.ogg │ │ └── sound6.ogg │ ├── js │ │ ├── notifications.min.js │ │ ├── messageboxes.min.js │ │ └── notifications.js │ └── css │ │ └── lobibox.min.css ├── bootstrap │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2 │ ├── js │ │ └── npm.js │ └── css │ │ └── bootstrap-theme.min.css ├── highlight │ ├── github.css │ └── highlight.pack.js └── jquery │ └── jquery.ui.touch-punch-improved.js ├── .gitignore ├── src ├── less │ ├── mixins.less │ ├── variables.less │ └── lobilist.less └── css │ └── lobilist.css ├── package.json ├── bower.json ├── LICENSE ├── gulpfile.js ├── README.md ├── index.html └── dist ├── lobilist.min.css ├── lobilist.css └── lobilist.min.js /demo/example1/insert.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/lobibox/sounds/sound1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/lobibox/sounds/sound1.ogg -------------------------------------------------------------------------------- /lib/lobibox/sounds/sound2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/lobibox/sounds/sound2.ogg -------------------------------------------------------------------------------- /lib/lobibox/sounds/sound3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/lobibox/sounds/sound3.ogg -------------------------------------------------------------------------------- /lib/lobibox/sounds/sound4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/lobibox/sounds/sound4.ogg -------------------------------------------------------------------------------- /lib/lobibox/sounds/sound5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/lobibox/sounds/sound5.ogg -------------------------------------------------------------------------------- /lib/lobibox/sounds/sound6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/lobibox/sounds/sound6.ogg -------------------------------------------------------------------------------- /lib/bootstrap/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/bootstrap/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /lib/bootstrap/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/bootstrap/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /lib/bootstrap/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/bootstrap/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /lib/bootstrap/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodeholic/lobilist/HEAD/lib/bootstrap/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /lib/bootstrap/js/npm.js: -------------------------------------------------------------------------------- 1 | // This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment. 2 | require('../../js/transition.js') 3 | require('../../js/alert.js') 4 | require('../../js/button.js') 5 | require('../../js/carousel.js') 6 | require('../../js/collapse.js') 7 | require('../../js/dropdown.js') 8 | require('../../js/modal.js') 9 | require('../../js/tooltip.js') 10 | require('../../js/popover.js') 11 | require('../../js/scrollspy.js') 12 | require('../../js/tab.js') 13 | require('../../js/affix.js') -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | 3 | # Logs 4 | logs 5 | *.log 6 | 7 | # Runtime data 8 | pids 9 | *.pid 10 | *.seed 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 19 | .grunt 20 | 21 | # node-waf configuration 22 | .lock-wscript 23 | 24 | # Compiled binary addons (http://nodejs.org/api/addons.html) 25 | build/Release 26 | 27 | # Dependency directory 28 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 29 | node_modules 30 | 31 | bower_components 32 | -------------------------------------------------------------------------------- /src/less/mixins.less: -------------------------------------------------------------------------------- 1 | .lobilist-variant(@header-bg, @color){ 2 | border: 1px solid darken(@header-bg, 7%); 3 | .lobilist-header{ 4 | border-bottom: 1px solid darken(@header-bg, 7%); 5 | background-color: @header-bg; 6 | input{ 7 | background-color: transparent; 8 | border-color: @color; 9 | color: @color; 10 | } 11 | } 12 | .lobilist-title{ 13 | color: @color; 14 | } 15 | .lobilist-actions{ 16 | .btn{ 17 | color: @color; 18 | } 19 | } 20 | .btn-show-form{ 21 | color: @color; 22 | } 23 | .lobilist-form-footer{ 24 | border-top: 1px solid darken(@header-bg, 7%); 25 | background-color: @header-bg; 26 | } 27 | .lobilist-footer{ 28 | border-top: 1px solid darken(@header-bg, 7%); 29 | background-color: @header-bg; 30 | } 31 | 32 | } -------------------------------------------------------------------------------- /demo/example1/load.json: -------------------------------------------------------------------------------- 1 | { 2 | "onSingleLine": true, 3 | "lists": [ 4 | { 5 | "title": "todo", 6 | "defaultStyle": "lobilist-danger", 7 | "items": [ 8 | { 9 | "title": "beforeItemDelete is never called", 10 | "description": "even in your \"Event handling\" example" 11 | } 12 | ] 13 | }, 14 | { 15 | "title": "doing", 16 | "defaultStyle": "lobilist-info", 17 | "items": [ 18 | { 19 | "title": "Function to get all lobilist info (lists, items) as object" 20 | } 21 | ] 22 | }, 23 | { 24 | "title": "done", 25 | "defaultStyle": "lobilist-success", 26 | "items": [ 27 | { 28 | "title": "List style change event" 29 | } 30 | ] 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lobilist", 3 | "version": "1.0.0", 4 | "description": "jQuery plugin for todo lists. Supports drag & drop of todos. Multiple lists with different colors. Support for communication to backend", 5 | "license": "MIT", 6 | "keywords": [ 7 | "jQuery", 8 | "jQuery plugin", 9 | "Bootstrap todo lists", 10 | "drag & drop todos", 11 | "different color todo lists" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/arboshiki/lobilist" 16 | }, 17 | "author": { 18 | "name": "Zura Sekhniashvili", 19 | "email": "zurasekhniashvili@gmail.com", 20 | "url": "https://github.com/arboshiki" 21 | }, 22 | "devDependencies": { 23 | "gulp": "^3.9.1", 24 | "gulp-clean-css": "^3.9.0", 25 | "gulp-concat": "^2.6.1", 26 | "gulp-copy": "^1.0.1", 27 | "gulp-cssnano": "^2.1.2", 28 | "gulp-less": "^3.3.2", 29 | "gulp-rename": "^1.2.2", 30 | "gulp-uglify": "^3.0.0", 31 | "path": "^0.12.7" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lobilist", 3 | "description": "jQuery plugin for todo lists. Supports drag & drop issues. Multiple lists with different colors. Support for communication to backend", 4 | "main": [ 5 | "dist/lobilist.css", 6 | "dist/lobilist.js" 7 | ], 8 | "authors": [ 9 | { 10 | "name": "Zura Sekhniashvili", 11 | "email": "zurasekhniashvili@gmail.com", 12 | "homepage": "https://github.com/arboshiki" 13 | } 14 | ], 15 | "license": "MIT", 16 | "keywords": [ 17 | "jQuery", 18 | "jQuery plugin", 19 | "Bootstrap todo lists", 20 | "drag & drop todos", 21 | "different color todo lists" 22 | ], 23 | "homepage": "https://github.com/arboshiki/lobilist", 24 | "moduleType": [], 25 | "ignore": [ 26 | "**/.*", 27 | "node_modules", 28 | "bower_components", 29 | "test", 30 | "tests" 31 | ], 32 | "dependencies": { 33 | "bootstrap": "^3.3.6", 34 | "jquery-ui": "^1.11.4", 35 | "jquery-ui-touch-punch-improved": "^0.3.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Zura Sekhniashvili 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by zura on 12/10/2017. 3 | */ 4 | 5 | 'use strict'; 6 | 7 | var pjson = require('./package.json'); 8 | 9 | var less = require('gulp-less'); 10 | var path = require('path'); 11 | var gulp = require('gulp'); 12 | var copy = require('gulp-copy'); 13 | var uglify = require('gulp-uglify'); 14 | var rename = require('gulp-rename'); 15 | var cleanCSS = require('gulp-clean-css'); 16 | // var pump = require('pump'); 17 | 18 | 19 | gulp.task('less', function () { 20 | return gulp.src('./src/less/lobilist.less') 21 | .pipe(less({ 22 | paths: [path.join(__dirname, 'less', 'includes')] 23 | })) 24 | .pipe(gulp.dest('./src/css')); 25 | }); 26 | 27 | gulp.task('copy', function () { 28 | gulp.src('./src/js/**/*.js') 29 | .pipe(gulp.dest('./dist')); 30 | gulp.src('./src/css/**/*.css') 31 | .pipe(gulp.dest('./dist')); 32 | 33 | }); 34 | 35 | gulp.task('cssmin', function () { 36 | return gulp.src('./src/css/lobilist.css') 37 | .pipe(cleanCSS({compatibility: 'ie8'})) 38 | .pipe(rename({suffix: '.min'})) 39 | .pipe(gulp.dest('./dist')); 40 | }); 41 | 42 | gulp.task('scripts', function () { 43 | gulp.src([ 44 | './src/js/lobilist.js' 45 | ]) 46 | 47 | .pipe(gulp.dest('./dist')) 48 | .pipe(uglify()) 49 | .pipe(rename({suffix: '.min'})) 50 | .pipe(gulp.dest('./dist')) 51 | }); 52 | 53 | gulp.task('watch', function () { 54 | gulp.watch('./src/less/**/*.less', ['less', 'cssmin', 'copy']); 55 | gulp.watch('./src/js/**/*.js', ['scripts', 'copy']); 56 | }); 57 | 58 | gulp.task('default', ['less', 'copy', 'cssmin', 'scripts'], function () { 59 | gulp.start('watch'); 60 | }); -------------------------------------------------------------------------------- /lib/highlight/github.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .diff .hljs-header, 18 | .hljs-javadoc { 19 | color: #998; 20 | font-style: italic; 21 | } 22 | 23 | .hljs-keyword, 24 | .css .rule .hljs-keyword, 25 | .hljs-winutils, 26 | .nginx .hljs-title, 27 | .hljs-subst, 28 | .hljs-request, 29 | .hljs-status { 30 | color: #333; 31 | font-weight: bold; 32 | } 33 | 34 | .hljs-number, 35 | .hljs-hexcolor, 36 | .ruby .hljs-constant { 37 | color: #008080; 38 | } 39 | 40 | .hljs-string, 41 | .hljs-tag .hljs-value, 42 | .hljs-phpdoc, 43 | .hljs-dartdoc, 44 | .tex .hljs-formula { 45 | color: #d14; 46 | } 47 | 48 | .hljs-title, 49 | .hljs-id, 50 | .scss .hljs-preprocessor { 51 | color: #900; 52 | font-weight: bold; 53 | } 54 | 55 | .hljs-list .hljs-keyword, 56 | .hljs-subst { 57 | font-weight: normal; 58 | } 59 | 60 | .hljs-class .hljs-title, 61 | .hljs-type, 62 | .vhdl .hljs-literal, 63 | .tex .hljs-command { 64 | color: #458; 65 | font-weight: bold; 66 | } 67 | 68 | .hljs-tag, 69 | .hljs-tag .hljs-title, 70 | .hljs-rules .hljs-property, 71 | .django .hljs-tag .hljs-keyword { 72 | color: #000080; 73 | font-weight: normal; 74 | } 75 | 76 | .hljs-attribute, 77 | .hljs-variable, 78 | .lisp .hljs-body { 79 | color: #008080; 80 | } 81 | 82 | .hljs-regexp { 83 | color: #009926; 84 | } 85 | 86 | .hljs-symbol, 87 | .ruby .hljs-symbol .hljs-string, 88 | .lisp .hljs-keyword, 89 | .clojure .hljs-keyword, 90 | .scheme .hljs-keyword, 91 | .tex .hljs-special, 92 | .hljs-prompt { 93 | color: #990073; 94 | } 95 | 96 | .hljs-built_in { 97 | color: #0086b3; 98 | } 99 | 100 | .hljs-preprocessor, 101 | .hljs-pragma, 102 | .hljs-pi, 103 | .hljs-doctype, 104 | .hljs-shebang, 105 | .hljs-cdata { 106 | color: #999; 107 | font-weight: bold; 108 | } 109 | 110 | .hljs-deletion { 111 | background: #fdd; 112 | } 113 | 114 | .hljs-addition { 115 | background: #dfd; 116 | } 117 | 118 | .diff .hljs-change { 119 | background: #0086b3; 120 | } 121 | 122 | .hljs-chunk { 123 | color: #aaa; 124 | } 125 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LobiList 2 | jQuery plugin for todo lists. Supports drag & drop of todos. Multiple lists with different colors. Support for communication to backend 3 | 4 | [View Demo](http://lobianijs.com/site/lobilist) 5 | 6 | ### Features 7 | 8 | - Multiple list support 9 | - Different styles 10 | - Drag & drop list 11 | - Drag & drop todos 12 | - Ajax configuration urls for todo CRUD 13 | - Checkboxes to mark/unmark todo as done 14 | - Powerful event management 15 | 16 | ### Installation and dependencies 17 | 18 | LobiList is depended on jQuery, jQuery ui and bootstrap. 19 | 20 | - Download plugin source files or 21 | - run `bower install lobilist --save` to install using `bower` 22 | 23 | #### 1. Include necessary css/js files 24 | 25 | ```html 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | ``` 57 | 58 | #### 2. Initialize plugin and use it 59 | 60 | ### For documentation and examples visit the plugin's [home page](http://lobianijs.com/site/lobilist) 61 | 62 | -------------------------------------------------------------------------------- /src/less/variables.less: -------------------------------------------------------------------------------- 1 | @lobilist-wrapper-margin-bottom: 16px; 2 | @lobilist-wrapper-width: 360px; 3 | @lobilist-bg: #FFF; 4 | @lobilist-xxs-width : 100%; 5 | @lobilist-margin-right : 16px; 6 | @lobilist-box-shadow : 2px 2px 5px rgba(0, 0, 0, 0.1); 7 | 8 | @lobilist-header-min-height : 38px; 9 | @lobilist-header-padding-vertical : 6px; 10 | @lobilist-header-padding-horizontal : 8px; 11 | @lobilist-title-font-size : 18px; 12 | @lobilist-title-line-height : 26px; 13 | @lobilist-title-padding-left : 15px; 14 | @lobilist-title-edit-input-height : 30px; 15 | 16 | @lobilist-actions-btn-bg : rgba(0, 0, 0, 0.04); 17 | @lobilist-actions-btn-size : @lobilist-title-line-height; 18 | @lobilist-actions-finish-cancel-btn-size : @lobilist-title-edit-input-height; 19 | @lobilist-actions-finish-cancel-btn-font-size : 18px; 20 | @lobilist-actions-list-style-picker-width : 70px; 21 | @lobilist-actions-list-style-picker-item-margin : 4px; 22 | @lobilist-actions-list-style-picker-item-size : 25px; 23 | 24 | 25 | @lobilist-form-padding : 10px; 26 | @lobilist-items-padding : 10px; 27 | @lobilist-items-border-bottom : 1px solid darken(@gray-lighter, 5%); 28 | 29 | @lobilist-item-margin-bottom : 5px; 30 | @lobilist-item-padding-left : 35px; 31 | @lobilist-item-title-font-size : 16px; 32 | @lobilist-item-border-color : @gray-lighter; 33 | @lobilist-item-padding-top: 16px; 34 | @lobilist-item-padding-bottom: 4px; 35 | @lobilist-item-drag-handler-width : 5px; 36 | @lobilist-item-drag-handler-border : 2px dotted darken(@gray-lighter, 7%); 37 | @lobilist-item-check-left-offset : 7px; 38 | @lobilist-item-hover-bg : rgba(0, 0, 0, 0.02); 39 | 40 | @lobilist-item-edit-btn-color : lighten(@gray-light, 15%); 41 | @lobilist-item-edit-btn-font-size : 10px; 42 | @lobilist-item-edit-btn-size : 16px; 43 | 44 | @lobilist-footer-padding-vertical : @lobilist-header-padding-vertical; 45 | @lobilist-footer-padding-horizontal : @lobilist-header-padding-horizontal; 46 | 47 | 48 | 49 | @lobilist-default-header-bg : @gray-lighter; 50 | @lobilist-default-title-color : @gray; 51 | 52 | @lobilist-danger-header-bg : lighten(@brand-danger, 10%); 53 | @lobilist-danger-title-color : #FFF; 54 | 55 | @lobilist-success-header-bg : @brand-success; 56 | @lobilist-success-title-color : #FFF; 57 | 58 | @lobilist-warning-header-bg : @brand-warning; 59 | @lobilist-warning-title-color : #FFF; 60 | 61 | @lobilist-info-header-bg : @brand-info; 62 | @lobilist-info-title-color : #FFF; 63 | 64 | @lobilist-primary-header-bg : @brand-primary; 65 | @lobilist-primary-title-color : #FFF; 66 | -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | position: relative; 3 | padding-top: 60px 4 | } 5 | .navbar-brand { 6 | padding-top: 8px 7 | } 8 | #sidebar { 9 | height: 90%; 10 | border-left: 1px solid #EEE; 11 | padding-left: 25px; 12 | overflow-y: auto; 13 | min-width: 240px 14 | } 15 | .docs-sidenav li>a { 16 | padding: 5px 10px 17 | } 18 | .docs-sidenav li .active { 19 | border-left: 2px solid #346b99; 20 | background-color: rgba(0,0,0,.02) 21 | } 22 | .docs-sidenav li .active>a { 23 | text-shadow: 2px 2px 3px rgba(0,0,0,.4) 24 | } 25 | .docs-sidenav li .active .nav { 26 | height: auto; 27 | opacity: 1 28 | } 29 | .docs-sidenav li .active .nav>li .active { 30 | border-left: none 31 | } 32 | .docs-sidenav .nav { 33 | height: 0; 34 | overflow: hidden; 35 | opacity: 0 36 | } 37 | .docs-sidenav .nav>li>a { 38 | padding-left: 30px 39 | } 40 | 41 | 42 | 43 | .bs-example { 44 | background-color: #FFF; 45 | position: relative; 46 | padding: 15px; 47 | margin-bottom: 15px; 48 | border-color: #e5e5e5 #eee #eee; 49 | border-style: solid; 50 | border-width: 1px 0; 51 | -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05); 52 | box-shadow: inset 0 3px 6px rgba(0,0,0,.05) 53 | } 54 | 55 | .bs-example>.list-group { 56 | max-width: 400px 57 | } 58 | 59 | .bs-example .modal { 60 | position: relative; 61 | top: auto; 62 | right: auto; 63 | bottom: auto; 64 | left: auto; 65 | z-index: 1; 66 | display: block 67 | } 68 | 69 | .bs-example .modal-dialog { 70 | width: auto; 71 | min-width: 200px; 72 | left: auto; 73 | margin-right: auto; 74 | margin-left: auto 75 | } 76 | 77 | .bs-example-type .table tr:first-child td { 78 | border-top: none 79 | } 80 | 81 | .bs-example-type .table td { 82 | padding: 15px 0; 83 | border-color: #eee 84 | } 85 | 86 | @media screen and (min-width: 768px) { 87 | .bs-example { 88 | margin-right:0; 89 | margin-left: 0; 90 | background-color: #fff; 91 | border-color: #ddd; 92 | border-width: 1px; 93 | border-radius: 4px 4px 0 0; 94 | -webkit-box-shadow: none; 95 | box-shadow: none 96 | } 97 | } 98 | 99 | .bs-example-modal { 100 | background-color: #f5f5f5 101 | } 102 | 103 | .bs-example+.highlight { 104 | margin-top: -16px; 105 | border-top-right-radius: 0; 106 | border-top-left-radius: 0; 107 | } 108 | .bs-example+.highlight pre { 109 | border-radius: 0; 110 | } 111 | .bs-example+.highlight pre .hljs { 112 | background-color: transparent; 113 | } 114 | #todo-lists-demo-events{ 115 | margin-top: 20px; 116 | } 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | .plugin-documentation .row{margin-left:0;margin-right:0;border-bottom:1px solid #ddd}.plugin-documentation .row-header .cell{text-transform:uppercase;font-size:.8em;color:#999;background-color:#eee}.plugin-documentation .cell{float:left;font-size:.95em;padding:6px 9px;width:100%}.plugin-documentation .cell pre{min-width:320px}.plugin-documentation .text-mobile{display:none}@media screen and (max-width:767px){.plugin-documentation .row{padding-left:0;padding-right:0}.plugin-documentation .row-header{display:none}.plugin-documentation .cell{width:100%!important;padding:0;margin-bottom:3px}.plugin-documentation .text-mobile{font-weight:400;display:inline}}.plugin-documentation.plugin-options .cell-name{width:16.66666667%}.plugin-documentation.plugin-options .cell-type{width:8.33333333%}.plugin-documentation.plugin-options .cell-default{width:25%}.plugin-documentation.plugin-options .cell-descr{width:50%}.plugin-documentation.plugin-methods .cell-name{width:16.66666667%}.plugin-documentation.plugin-methods .cell-params{width:33.33333333%}.plugin-documentation.plugin-methods .cell-params>div>i{font-weight:700}.plugin-documentation.plugin-methods .cell-return{width:16.66666667%}.plugin-documentation.plugin-methods .cell-descr{width:33.33333333%}.plugin-documentation.plugin-events .cell-name,.plugin-documentation.plugin-events .cell-params{width:25%}.plugin-documentation.plugin-events .cell-params>div>code{font-style:italic;font-weight:700}.plugin-documentation.plugin-events .cell-descr{width:50%}@media screen and (max-width:767px){.plugin-documentation .cell-name{font-size:102%;font-weight:700}.plugin-documentation .cell-default,.plugin-documentation .cell-descr,.plugin-documentation .cell-params,.plugin-documentation .cell-return{padding-left:30px}.plugin-documentation .cell-params>div{padding-left:20px}.plugin-documentation.plugin-options .cell-type{display:none}.plugin-documentation.plugin-methods .cell-params>div>i{font-weight:700}.plugin-documentation.plugin-methods .cell-return{display:none}} -------------------------------------------------------------------------------- /demo/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lobilist - jQuery plugin for todo lists. Supports drag & drop issues. Multiple lists with different colors. 6 | Support for communication to backend 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 |

Examples

26 |
27 | 28 |
29 |
30 |

Basic example

31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 107 | 108 | -------------------------------------------------------------------------------- /lib/jquery/jquery.ui.touch-punch-improved.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI Touch Punch Improved 0.3.1 3 | * 4 | * 5 | * Copyright 2013, Chris Hutchinson 6 | * Original jquery-ui-touch-punch Copyright 2011, Dave Furfero 7 | * Dual licensed under the MIT or GPL Version 2 licenses. 8 | * 9 | * Depends: 10 | * jquery.ui.widget.js 11 | * jquery.ui.mouse.js 12 | */ 13 | (function ($) { 14 | var pointerEnabled = window.navigator.pointerEnabled 15 | || window.navigator.msPointerEnabled; 16 | 17 | // Detect touch support 18 | $.support.touch = 'ontouchend' in document || pointerEnabled; 19 | 20 | // Ignore browsers without touch support or mouse support 21 | if (!$.support.touch || !$.ui.mouse) { 22 | return; 23 | } 24 | 25 | var mouseProto = $.ui.mouse.prototype, 26 | _mouseInit = mouseProto._mouseInit, 27 | touchHandled; 28 | 29 | // see http://stackoverflow.com/a/12714084/220825 30 | function fixTouch(touch) { 31 | var winPageX = window.pageXOffset, 32 | winPageY = window.pageYOffset, 33 | x = touch.clientX, 34 | y = touch.clientY; 35 | 36 | if (touch.pageY === 0 && Math.floor(y) > Math.floor(touch.pageY) || touch.pageX === 0 && Math.floor(x) > Math.floor(touch.pageX)) { 37 | // iOS4 clientX/clientY have the value that should have been 38 | // in pageX/pageY. While pageX/page/ have the value 0 39 | x = x - winPageX; 40 | y = y - winPageY; 41 | } else if (y < (touch.pageY - winPageY) || x < (touch.pageX - winPageX)) { 42 | // Some Android browsers have totally bogus values for clientX/Y 43 | // when scrolling/zooming a page. Detectable since clientX/clientY 44 | // should never be smaller than pageX/pageY minus page scroll 45 | x = touch.pageX - winPageX; 46 | y = touch.pageY - winPageY; 47 | } 48 | 49 | return { 50 | clientX: x, 51 | clientY: y 52 | }; 53 | } 54 | 55 | /** 56 | * Simulate a mouse event based on a corresponding touch event 57 | * @param {Object} event A touch event 58 | * @param {String} simulatedType The corresponding mouse event 59 | */ 60 | function simulateMouseEvent (event, simulatedType) { 61 | // Ignore multi-touch events 62 | if ((!pointerEnabled && event.originalEvent.touches.length > 1) || (pointerEnabled && !event.isPrimary)) { 63 | return; 64 | } 65 | 66 | var touch = pointerEnabled ? event.originalEvent : event.originalEvent.changedTouches[0], 67 | simulatedEvent = document.createEvent('MouseEvents'), 68 | coord = fixTouch(touch); 69 | 70 | // Check if element is an input or a textarea 71 | if ($(touch.target).is("input") || $(touch.target).is("textarea")) { 72 | event.stopPropagation(); 73 | } else { 74 | event.preventDefault(); 75 | } 76 | 77 | // Initialize the simulated mouse event using the touch event's coordinates 78 | simulatedEvent.initMouseEvent( 79 | simulatedType, // type 80 | true, // bubbles 81 | true, // cancelable 82 | window, // view 83 | 1, // detail 84 | event.screenX || touch.screenX, // screenX 85 | event.screenY || touch.screenY, // screenY 86 | event.clientX || coord.clientX, // clientX 87 | event.clientY || coord.clientY, // clientY 88 | false, // ctrlKey 89 | false, // altKey 90 | false, // shiftKey 91 | false, // metaKey 92 | 0, // button 93 | null // relatedTarget 94 | ); 95 | 96 | // Dispatch the simulated event to the target element 97 | event.target.dispatchEvent(simulatedEvent); 98 | } 99 | 100 | /** 101 | * Handle the jQuery UI widget's touchstart events 102 | * @param {Object} event The widget element's touchstart event 103 | */ 104 | mouseProto._touchStart = function (event) { 105 | var self = this; 106 | 107 | // Ignore the event if another widget is already being handled 108 | if (touchHandled || (!pointerEnabled && !self._mouseCapture(event.originalEvent.changedTouches[0]))) { 109 | return; 110 | } 111 | 112 | // Set the flag to prevent other widgets from inheriting the touch event 113 | touchHandled = true; 114 | 115 | // Track movement to determine if interaction was a click 116 | self._touchMoved = false; 117 | 118 | // Simulate the mouseover event 119 | simulateMouseEvent(event, 'mouseover'); 120 | 121 | // Simulate the mousemove event 122 | simulateMouseEvent(event, 'mousemove'); 123 | 124 | // Simulate the mousedown event 125 | simulateMouseEvent(event, 'mousedown'); 126 | }; 127 | 128 | /** 129 | * Handle the jQuery UI widget's touchmove events 130 | * @param {Object} event The document's touchmove event 131 | */ 132 | mouseProto._touchMove = function (event) { 133 | // Ignore event if not handled 134 | if (!touchHandled) { 135 | return; 136 | } 137 | 138 | // Interaction was not a click 139 | this._touchMoved = true; 140 | 141 | // Simulate the mousemove event 142 | simulateMouseEvent(event, 'mousemove'); 143 | }; 144 | 145 | /** 146 | * Handle the jQuery UI widget's touchend events 147 | * @param {Object} event The document's touchend event 148 | */ 149 | mouseProto._touchEnd = function (event) { 150 | // Ignore event if not handled 151 | if (!touchHandled) { 152 | return; 153 | } 154 | 155 | // Simulate the mouseup event 156 | simulateMouseEvent(event, 'mouseup'); 157 | 158 | // Simulate the mouseout event 159 | simulateMouseEvent(event, 'mouseout'); 160 | 161 | // If the touch interaction did not move, it should trigger a click 162 | if (!this._touchMoved) { 163 | // Simulate the click event 164 | simulateMouseEvent(event, 'click'); 165 | } 166 | 167 | // Unset the flag to allow other widgets to inherit the touch event 168 | touchHandled = false; 169 | }; 170 | 171 | /** 172 | * A duck punch of the $.ui.mouse _mouseInit method to support touch events. 173 | * This method extends the widget with bound touch event handlers that 174 | * translate touch events to mouse events and pass them to the widget's 175 | * original mouse event handling methods. 176 | */ 177 | mouseProto._mouseInit = function () { 178 | var self = this; 179 | 180 | self.element.on({ 181 | 'touchstart': $.proxy(self, '_touchStart'), 182 | 'touchmove': $.proxy(self, '_touchMove'), 183 | 'touchend': $.proxy(self, '_touchEnd'), 184 | 'pointerDown': $.proxy(self, '_touchStart'), 185 | 'pointerMove': $.proxy(self, '_touchMove'), 186 | 'pointerUp': $.proxy(self, '_touchEnd'), 187 | 'MSPointerDown': $.proxy(self, '_touchStart'), 188 | 'MSPointerMove': $.proxy(self, '_touchMove'), 189 | 'MSPointerUp': $.proxy(self, '_touchEnd') 190 | }); 191 | 192 | // Call the original $.ui.mouse init method 193 | _mouseInit.call(self); 194 | }; 195 | 196 | })(jQuery); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lobilist - jQuery plugin for todo lists. Supports drag & drop issues. Multiple lists with different colors. 6 | Support for communication to backend 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 |
28 |

Lobilist

29 |

30 | jQuery plugin for todo lists. Supports drag & drop issues. Multiple lists with different colors. Support 31 | for communication to backend 32 |

33 |
34 | 35 |
36 |

Features

37 |
    38 |
  • Multiple list support
    • 39 |
  • Load lists and todos by ajax
    • 40 |
  • List style support
    • 41 |
  • Custom Checkboxes
    • 42 |
  • Drag & drop support of lists and todos
    • 43 |
  • Ajax support for TODO Add, Edit and Delete actions
    • 44 |
45 |
46 | 47 |
48 |

Usage

49 |

LobiList initialization is simple. Just create an empty <div> and call plugin.

50 |
51 | 
<div id="todo-lists-demo"></div>
 52 | <script>    $(function(){
 53 |         $('#todo-lists-demo').lobiList({
 54 |             //Options
 55 |         });
 56 |     });</script>
 57 |
58 |
59 |

Plugin contains 2 internal classes: LobiList and List.

60 |

You have option to set defaults for LobiList and all List instances will take 61 | these options. 62 | But if you want different option for List you can override LobiList 63 | option by specifying different options for List.

64 |
65 | 
$('selector').lobiList({
 66 |     //Every list will have default style 'lobilist-info'
 67 |     defaultStyle: 'lobilist-info',
 68 |     lists: [
 69 |         {
 70 |             //This list will have style 'lobilist-danger' instead of 'lobilist-info'
 71 |             defaultStyle: 'lobilist-danger',
 72 |             ...
 73 |         },
 74 |         ... //other lists
 75 |     ]
 76 | });
 77 |
78 |
79 |
80 | 81 |
82 |

Examples

83 |
84 | 85 |
86 |
87 |

Basic example

88 |
89 |
90 |
91 | 92 |
93 |
94 |

Custom datepicker

95 |

This example uses Bootstrap datepicker

96 |
97 |
98 |
99 | 100 |
101 |
102 |

Event handling

103 | 104 | 105 |
106 |
107 |
108 | 109 |
110 |
111 |

Custom controls

112 |
113 |
114 |
115 | 116 |
117 |
118 |

Disabled drag & drop

119 |
120 |
121 |
122 | 123 |
124 |
125 |

Actions by ajax

126 |
127 |
128 |
129 |
130 |
131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /lib/lobibox/js/notifications.min.js: -------------------------------------------------------------------------------- 1 | Math.randomString=function(n){for(var text="",possible="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",i=0;n>i;i++)text+=possible.charAt(Math.floor(Math.random()*possible.length));return text};var Lobibox=Lobibox||{};!function(){var LobiboxNotify=function(type,options){this.$type=null,this.$options=null,this.$el=null;var me=this,_processInput=function(options){return("mini"===options.size||"large"===options.size)&&(options=$.extend({},Lobibox.notify.OPTIONS[options.size],options)),options=$.extend({},Lobibox.notify.OPTIONS[me.$type],Lobibox.notify.DEFAULTS,options),"mini"!==options.size&&options.title===!0?options.title=Lobibox.notify.OPTIONS[me.$type].title:"mini"===options.size&&options.title===!0&&(options.title=!1),options.icon===!0&&(options.icon=Lobibox.notify.OPTIONS.icons[options.iconSource][me.$type]),options.sound===!0&&(options.sound=Lobibox.notify.OPTIONS[me.$type].sound),options.sound&&(options.sound=options.soundPath+options.sound+options.soundExt),options},_init=function(){var $notify=_createNotify();if("mini"===me.$options.size&&$notify.addClass("notify-mini"),"string"==typeof me.$options.position){var $wrapper=_createNotifyWrapper();_appendInWrapper($notify,$wrapper),$wrapper.hasClass("center")&&$wrapper.css("margin-left","-"+$wrapper.width()/2+"px")}else $("body").append($notify),$notify.css({position:"fixed",left:me.$options.position.left,top:me.$options.position.top});if(me.$el=$notify,me.$options.sound){var snd=new Audio(me.$options.sound);snd.play()}me.$options.rounded&&me.$el.addClass("rounded")},_appendInWrapper=function($el,$wrapper){if("normal"===me.$options.size)$wrapper.hasClass("bottom")?$wrapper.prepend($el):$wrapper.append($el);else if("mini"===me.$options.size)$wrapper.hasClass("bottom")?$wrapper.prepend($el):$wrapper.append($el);else if("large"===me.$options.size){var tabPane=_createTabPane().append($el),$li=_createTabControl(tabPane.attr("id"));$wrapper.find(".lb-notify-wrapper").append(tabPane),$wrapper.find(".lb-notify-tabs").append($li),_activateTab($li),$li.find(">a").click(function(){_activateTab($li)})}},_activateTab=function($li){$li.closest(".lb-notify-tabs").find(">li").removeClass("active"),$li.addClass("active");var $current=$($li.find(">a").attr("href"));$current.closest(".lb-notify-wrapper").find(">.lb-tab-pane").removeClass("active"),$current.addClass("active")},_createTabControl=function(tabPaneId){var $li=$("
  • ",{"class":Lobibox.notify.OPTIONS[me.$type]["class"]});return $("",{href:"#"+tabPaneId}).append('').appendTo($li),$li},_createTabPane=function(){return $("
    ",{"class":"lb-tab-pane",id:Math.randomString(10)})},_createNotifyWrapper=function(){var $wrapper,selector=("large"===me.$options.size?".lobibox-notify-wrapper-large":".lobibox-notify-wrapper")+"."+me.$options.position.replace(/\s/gi,".");return $wrapper=$(selector),0===$wrapper.length&&($wrapper=$("
    ").addClass(selector.replace(/\./g," ").trim()).appendTo($("body")),"large"===me.$options.size&&$wrapper.append($('')).append($('
    '))),$wrapper},_createNotify=function(){var $iconEl,$innerIconEl,$iconWrapper,$body,$msg,OPTS=Lobibox.notify.OPTIONS,$notify=$("
    ",{"class":"lobibox-notify "+OPTS[me.$type]["class"]+" "+OPTS["class"]+" "+me.$options.showClass});return $iconWrapper=$('
    ').appendTo($notify),$iconEl=$('
    ').appendTo($iconWrapper),$innerIconEl=$("
    ").appendTo($iconEl),me.$options.img?$innerIconEl.append(''):me.$options.icon?$innerIconEl.append('
    '):$notify.addClass("without-icon"),$msg=$('
    '+me.$options.msg+"
    "),me.$options.messageHeight!==!1&&$msg.css("max-height",me.$options.messageHeight),$body=$("
    ",{"class":"lobibox-notify-body"}).append($msg).appendTo($notify),me.$options.title&&$body.prepend('
    '+me.$options.title+"
    "),_addCloseButton($notify),("normal"===me.$options.size||"mini"===me.$options.size)&&(_addCloseOnClick($notify),_addDelay($notify)),me.$options.width&&$notify.css("width",_calculateWidth(me.$options.width)),$notify},_addCloseButton=function($el){me.$options.closable&&$('×').click(function(){me.remove()}).appendTo($el)},_addCloseOnClick=function($el){me.$options.closeOnClick&&$el.click(function(){me.remove()})},_addDelay=function($el){if(me.$options.delay){if(me.$options.delayIndicator){var delay=$('
    ');$el.append(delay)}var time=0,interval=1e3/30,timer=setInterval(function(){time+=interval;var width=100*time/me.$options.delay;width>=100&&(width=100,me.remove(),timer=clearInterval(timer)),me.$options.delayIndicator&&delay.find("div").css("width",width+"%")},interval)}},_findTabToActivate=function($li){var $itemToActivate=$li.prev();return 0===$itemToActivate.length&&($itemToActivate=$li.next()),0===$itemToActivate.length?null:$itemToActivate},_calculateWidth=function(width){return width=Math.min($(window).outerWidth(),width)};this.remove=function(){me.$el.removeClass(me.$options.showClass).addClass(me.$options.hideClass);var parent=me.$el.parent(),wrapper=parent.closest(".lobibox-notify-wrapper-large"),href="#"+parent.attr("id"),$li=wrapper.find('>.lb-notify-tabs>li:has(a[href="'+href+'"])');return $li.addClass(Lobibox.notify.OPTIONS["class"]).addClass(me.$options.hideClass),setTimeout(function(){if("normal"===me.$options.size||"mini"===me.$options.size)me.$el.remove();else if("large"===me.$options.size){var $newLi=_findTabToActivate($li);$newLi&&_activateTab($newLi),$li.remove(),parent.remove()}},500),me},this.$type=type,this.$options=_processInput(options),_init()};Lobibox.notify=function(type,options){if(["default","info","warning","error","success"].indexOf(type)>-1){var lobibox=new LobiboxNotify(type,options);return lobibox.$el.data("lobibox",lobibox),lobibox}},Lobibox.notify.closeAll=function(){var ll=$(".lobibox-notify");ll.each(function(ind,el){$(el).data("lobibox").remove()})},Lobibox.notify.DEFAULTS={title:!0,size:"normal",soundPath:"sounds/",soundExt:".ogg",showClass:"fadeInDown",hideClass:"zoomOut",icon:!0,msg:"",img:null,closable:!0,hideCloseButton:!1,delay:5e3,delayIndicator:!0,closeOnClick:!0,width:400,sound:!0,position:"bottom right",iconSource:"bootstrap",rounded:!1,messageHeight:60},Lobibox.notify.OPTIONS={"class":"animated-fast",large:{width:500,messageHeight:96},mini:{"class":"notify-mini",messageHeight:32},"default":{"class":"lobibox-notify-default",title:"Default",sound:!1},success:{"class":"lobibox-notify-success",title:"Success",sound:"sound2"},error:{"class":"lobibox-notify-error",title:"Error",sound:"sound4"},warning:{"class":"lobibox-notify-warning",title:"Warning",sound:"sound5"},info:{"class":"lobibox-notify-info",title:"Information",sound:"sound6"},icons:{bootstrap:{success:"glyphicon glyphicon-ok-sign",error:"glyphicon glyphicon-remove-sign",warning:"glyphicon glyphicon-exclamation-sign",info:"glyphicon glyphicon-info-sign"},fontAwesome:{success:"fa fa-check-circle",error:"fa fa-times-circle",warning:"fa fa-exclamation-circle",info:"fa fa-info-circle"}}}}(); -------------------------------------------------------------------------------- /lib/highlight/highlight.pack.js: -------------------------------------------------------------------------------- 1 | !function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.className:"")).split(/\s+/);return n=n.map(function(e){return e.replace(/^lang(uage)?-/,"")}),n.filter(function(e){return N(e)||/no(-?)highlight/.test(e)})[0]}function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[r]=n[r];return t}function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o=o.nextSibling)3==o.nodeType?a+=o.nodeValue.length:1==o.nodeType&&(n.push({event:"start",offset:a,node:o}),a=r(o,a),t(o).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:o}));return a}(e,0),n}function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function c(e){l+=""}function u(e){("start"==e.event?i:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=o();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=o();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(i)}else"start"==g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function u(e){function n(e){return e&&e.source||e}function t(t,r){return RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var c={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");c[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):Object.keys(a.k).forEach(function(e){u(e,a.k[e])}),a.k=c}a.lR=t(a.l||/\b[A-Za-z0-9_]+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function s(e,t,a,o){function i(e,n){for(var t=0;t";return o+=e+'">',o+n+i}function d(){if(!w.k)return n(y);var e="",t=0;w.lR.lastIndex=0;for(var r=w.lR.exec(y);r;){e+=n(y.substr(t,r.index-t));var a=g(w,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=w.lR.lastIndex,r=w.lR.exec(y)}return e+n(y.substr(t))}function h(){if(w.sL&&!R[w.sL])return n(y);var e=w.sL?s(w.sL,y,!0,L[w.sL]):l(y);return w.r>0&&(B+=e.r),"continuous"==w.subLanguageMode&&(L[w.sL]=e.top),p(e.language,e.value,!1,!0)}function v(){return void 0!==w.sL?h():d()}function b(e,t){var r=e.cN?p(e.cN,"",!0):"";e.rB?(M+=r,y=""):e.eB?(M+=n(t)+r,y=""):(M+=r,y=t),w=Object.create(e,{parent:{value:w}})}function m(e,t){if(y+=e,void 0===t)return M+=v(),0;var r=i(t,w);if(r)return M+=v(),b(r,t),r.rB?0:t.length;var a=c(w,t);if(a){var o=w;o.rE||o.eE||(y+=t),M+=v();do w.cN&&(M+=""),B+=w.r,w=w.parent;while(w!=a.parent);return o.eE&&(M+=n(t)),y="",a.starts&&b(a.starts,""),o.rE?0:t.length}if(f(t,w))throw new Error('Illegal lexeme "'+t+'" for mode "'+(w.cN||"")+'"');return y+=t,t.length||1}var x=N(e);if(!x)throw new Error('Unknown language: "'+e+'"');u(x);for(var w=o||x,L={},M="",k=w;k!=x;k=k.parent)k.cN&&(M=p(k.cN,"",!0)+M);var y="",B=0;try{for(var C,j,I=0;;){if(w.t.lastIndex=I,C=w.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}m(t.substr(I));for(var k=w;k.parent;k=k.parent)k.cN&&(M+="");return{r:B,value:M,language:e,top:w}}catch(A){if(-1!=A.message.indexOf("Illegal"))return{r:0,value:n(t)};throw A}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(N(n)){var t=s(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
    ")),e}function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs(\s|$)/)||a.push("hljs"),r&&a.push(r),a.join(" ").trim()}function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?s(n,r,!0):l(r),u=i(t);if(u.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(u,i(p),r)}o.value=f(o.value),e.innerHTML=o.value,e.className=g(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener("load",h,!1)}function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function m(){return Object.keys(R)}function N(e){return R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=s,e.highlightAuto=l,e.fixMarkup=f,e.highlightBlock=p,e.configure=d,e.initHighlighting=h,e.initHighlightingOnLoad=v,e.registerLanguage=b,e.listLanguages=m,e.getLanguage=N,e.inherit=o,e.IR="[a-zA-Z][a-zA-Z0-9_]*",e.UIR="[a-zA-Z_][a-zA-Z0-9_]*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/},e.CLCM={cN:"comment",b:"//",e:"$",c:[e.PWM]},e.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[e.PWM]},e.HCM={cN:"comment",b:"#",e:"$",c:[e.PWM]},e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\\(",rB:!0,eE:!0,e:"\\("};return{cI:!0,i:"[=/|']",c:[e.CBCM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[e.CBCM,{cN:"rule",b:"[^\\s]",rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("xml",function(){var t="[A-Za-z0-9\\._:-]+",e={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"},c={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[c],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[c],starts:{e:"",rE:!0,sL:"javascript"}},e,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},c]}]}});hljs.registerLanguage("javascript",function(r){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document"},c:[{cN:"pi",r:10,v:[{b:/^\s*('|")use strict('|")/},{b:/^\s*('|")use asm('|")/}]},r.ASM,r.QSM,r.CLCM,r.CBCM,r.CNM,{b:"("+r.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[r.CLCM,r.CBCM,r.RM,{b:/;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[r.inherit(r.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[r.CLCM,r.CBCM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+r.IR,r:0}]}}); -------------------------------------------------------------------------------- /dist/lobilist.min.css: -------------------------------------------------------------------------------- 1 | .lobilists .lobilist-placeholder,.lobilists .lobilist-wrapper{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,.1);box-shadow:2px 2px 5px rgba(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 #ddd}.lobilists .lobilist.lobilist-default .lobilist-header{border-bottom:1px solid #ddd;background-color:#eee}.lobilists .lobilist.lobilist-default .lobilist-header input{background-color:transparent;border-color:#555;color:#555}.lobilists .lobilist.lobilist-default .lobilist-title{color:#555}.lobilists .lobilist.lobilist-default .lobilist-actions .btn{color:#555}.lobilists .lobilist.lobilist-default .btn-show-form{color:#555}.lobilists .lobilist.lobilist-default .lobilist-form-footer{border-top:1px solid #ddd;background-color:#eee}.lobilists .lobilist.lobilist-default .lobilist-footer{border-top:1px solid #ddd;background-color:#eee}.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-cancel-title-editing,.lobilists .btn-finish-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-cancel-title-editing,.lobilists .lobilist-header.title-editing .lobilist-actions .btn-finish-title-editing{display:inline-block;font-size:18px;line-height:30px;width:30px;height:30px}.lobilists .lobilist-header:after,.lobilists .lobilist-header:before{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-danger,.lobilists .lobilist-actions .dropdown-menu .lobilist-default,.lobilists .lobilist-actions .dropdown-menu .lobilist-info,.lobilists .lobilist-actions .dropdown-menu .lobilist-primary,.lobilists .lobilist-actions .dropdown-menu .lobilist-success,.lobilists .lobilist-actions .dropdown-menu .lobilist-warning{display:inline-block;cursor:pointer;margin:4px;width:25px;height:25px}.lobilists .lobilist-actions .dropdown-menu .lobilist-default{background-color:#eee}.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.btn-default{background-color:transparent;border-color:transparent;width:26px;height:26px}.lobilists .lobilist-actions .btn.btn-default:hover{background-color:rgba(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 #eee;-webkit-transition:background-color .2s;-o-transition:background-color .2s;transition:background-color .2s}.lobilists .lobilist-item .drag-handler{position:absolute;left:0;top:0;bottom:0;width:5px;border-left:2px dotted #ddd;border-right:2px dotted #ddd}.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,.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:#777;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 #777}.lobilists .lobilist-item-placeholder{background-color:rgba(0,0,0,.03);border:1px dashed #ddd}@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-placeholder,.lobilists.single-line .lobilist-wrapper{float:none;white-space:normal;vertical-align:top;height:100%}.lobilists.no-sortable .lobilist-item .drag-handler{display:none}.lobilists:after,.lobilists:before{content:" ";display:table}.lobilists:after{clear:both} -------------------------------------------------------------------------------- /src/less/lobilist.less: -------------------------------------------------------------------------------- 1 | @import "../../bower_components/bootstrap/less/variables.less"; 2 | @import "../../bower_components/bootstrap/less/mixins.less"; 3 | @import "variables"; 4 | @import "mixins"; 5 | 6 | .lobilists { 7 | .lobilist-wrapper { 8 | display: inline-block; 9 | float: left; 10 | border: 1px solid transparent; 11 | margin-bottom: @lobilist-wrapper-margin-bottom; 12 | width: @lobilist-wrapper-width; 13 | margin-right: @lobilist-margin-right; 14 | } 15 | .lobilist{ 16 | max-height: 100%; 17 | overflow: auto; 18 | background-color: @lobilist-bg; 19 | .box-shadow(@lobilist-box-shadow); 20 | &:last-child { 21 | margin-right: 0; 22 | } 23 | &.ui-sortable-helper { 24 | .rotate(2deg); 25 | } 26 | &:hover { 27 | .lobilist-actions { 28 | opacity: 1; 29 | } 30 | } 31 | &.lobilist-default { 32 | .lobilist-variant(@lobilist-default-header-bg, @lobilist-default-title-color); 33 | } 34 | 35 | &.lobilist-danger { 36 | .lobilist-variant(@lobilist-danger-header-bg, @lobilist-danger-title-color); 37 | } 38 | &.lobilist-success { 39 | .lobilist-variant(@lobilist-success-header-bg, @lobilist-success-title-color); 40 | } 41 | &.lobilist-warning { 42 | .lobilist-variant(@lobilist-warning-header-bg, @lobilist-warning-title-color); 43 | } 44 | &.lobilist-info { 45 | .lobilist-variant(@lobilist-info-header-bg, @lobilist-info-title-color); 46 | } 47 | &.lobilist-primary { 48 | .lobilist-variant(@lobilist-primary-header-bg, @lobilist-primary-title-color); 49 | } 50 | } 51 | .btn-finish-title-editing, 52 | .btn-cancel-title-editing { 53 | display: none; 54 | } 55 | .lobilist-header { 56 | position: relative; 57 | min-height: @lobilist-header-min-height; 58 | padding: @lobilist-header-padding-vertical @lobilist-header-padding-horizontal; 59 | input { 60 | background-color: transparent; 61 | height: @lobilist-title-edit-input-height; 62 | } 63 | &.title-editing { 64 | .lobilist-actions { 65 | opacity: 1; 66 | .btn { 67 | display: none; 68 | } 69 | .btn-finish-title-editing, 70 | .btn-cancel-title-editing { 71 | display: inline-block; 72 | font-size: @lobilist-actions-finish-cancel-btn-font-size; 73 | line-height: @lobilist-actions-finish-cancel-btn-size; 74 | .square(@lobilist-actions-finish-cancel-btn-size); 75 | } 76 | } 77 | } 78 | .clearfix(); 79 | } 80 | .lobilist-actions { 81 | position: absolute; 82 | top: @lobilist-header-padding-vertical; 83 | right: @lobilist-header-padding-horizontal; 84 | opacity: 0; 85 | > .dropdown { 86 | display: inline-block; 87 | } 88 | .dropdown-menu { 89 | height: 70px; 90 | width: 100px; 91 | box-sizing: content-box; 92 | min-width: 0; 93 | padding: 0; 94 | margin: 0; 95 | .lobilist-default, 96 | .lobilist-danger, 97 | .lobilist-success, 98 | .lobilist-warning, 99 | .lobilist-info, 100 | .lobilist-primary { 101 | display: inline-block; 102 | cursor: pointer; 103 | margin: @lobilist-actions-list-style-picker-item-margin; 104 | .square(@lobilist-actions-list-style-picker-item-size); 105 | 106 | } 107 | .lobilist-default { 108 | background-color: @lobilist-default-header-bg; 109 | &:hover { 110 | background-color: darken(@lobilist-default-header-bg, 5%); 111 | } 112 | } 113 | .lobilist-danger { 114 | background-color: @lobilist-danger-header-bg; 115 | &:hover { 116 | background-color: darken(@lobilist-danger-header-bg, 5%); 117 | } 118 | } 119 | .lobilist-success { 120 | background-color: @lobilist-success-header-bg; 121 | &:hover { 122 | background-color: darken(@lobilist-success-header-bg, 5%); 123 | } 124 | } 125 | .lobilist-warning { 126 | background-color: @lobilist-warning-header-bg; 127 | &:hover { 128 | background-color: darken(@lobilist-warning-header-bg, 5%); 129 | } 130 | } 131 | .lobilist-info { 132 | background-color: @lobilist-info-header-bg; 133 | &:hover { 134 | background-color: darken(@lobilist-info-header-bg, 5%); 135 | } 136 | } 137 | .lobilist-primary { 138 | background-color: @lobilist-primary-header-bg; 139 | &:hover { 140 | background-color: darken(@lobilist-primary-header-bg, 5%); 141 | } 142 | } 143 | } 144 | .btn.btn-default { 145 | background-color: transparent; 146 | border-color: transparent; 147 | .square(@lobilist-actions-btn-size); 148 | &:hover { 149 | background-color: @lobilist-actions-btn-bg; 150 | } 151 | } 152 | } 153 | .lobilist-title { 154 | padding-left: @lobilist-title-padding-left; 155 | font-size: @lobilist-title-font-size; 156 | } 157 | .lobilist-items { 158 | list-style: none; 159 | margin-bottom: 0; 160 | padding: @lobilist-items-padding; 161 | } 162 | .lobilist-item { 163 | border: 1px solid transparent; 164 | margin-bottom: @lobilist-item-margin-bottom; 165 | padding-top: @lobilist-item-padding-top; 166 | padding-bottom: @lobilist-item-padding-bottom; 167 | padding-left: @lobilist-item-padding-left; 168 | border-bottom: 1px solid @lobilist-item-border-color; 169 | .transition(background-color 0.2s); 170 | 171 | .drag-handler { 172 | position: absolute; 173 | left: 0; 174 | top: 0; 175 | bottom: 0; 176 | width: @lobilist-item-drag-handler-width; 177 | border-left: @lobilist-item-drag-handler-border; 178 | border-right: @lobilist-item-drag-handler-border; 179 | &:hover { 180 | cursor: move; 181 | } 182 | } 183 | 184 | .todo-actions { 185 | position: absolute; 186 | top: 2px; 187 | right: 4px; 188 | text-align: center; 189 | white-space: nowrap; 190 | font-size: @lobilist-item-edit-btn-font-size; 191 | color: @lobilist-item-edit-btn-color; 192 | line-height: @lobilist-item-edit-btn-size; 193 | 194 | } 195 | .todo-action { 196 | display: inline-block; 197 | .square(@lobilist-item-edit-btn-size); 198 | &:hover { 199 | cursor: pointer; 200 | color: darken(@lobilist-item-edit-btn-color, 25%); 201 | } 202 | } 203 | &:hover { 204 | background-color: @lobilist-item-hover-bg; 205 | } 206 | } 207 | .lobilist-item-title { 208 | font-weight: 600; 209 | font-size: @lobilist-item-title-font-size; 210 | } 211 | .lobilist-item-description { 212 | font-style: italic; 213 | } 214 | .lobilist-item-duedate { 215 | position: absolute; 216 | top: 2px; 217 | left: @lobilist-item-drag-handler-width + @lobilist-item-check-left-offset; 218 | font-style: italic; 219 | color: @gray-light; 220 | font-size: 85%; 221 | } 222 | .lobilist-check { 223 | position: absolute; 224 | left: @lobilist-item-drag-handler-width + @lobilist-item-check-left-offset; 225 | top: @lobilist-item-padding-top; 226 | &.lobicheck { 227 | margin-top: 3px; 228 | } 229 | } 230 | .lobilist-item { 231 | position: relative; 232 | &.item-done { 233 | text-decoration: line-through; 234 | } 235 | } 236 | .btn-show-form { 237 | outline: 0; 238 | } 239 | .lobilist-footer, 240 | .lobilist-form-footer { 241 | padding: @lobilist-footer-padding-vertical @lobilist-footer-padding-horizontal; 242 | } 243 | .lobilist-form-footer { 244 | margin-left: -@lobilist-form-padding; 245 | margin-right: -@lobilist-form-padding; 246 | margin-bottom: -@lobilist-form-padding; 247 | } 248 | .lobilist-add-todo-form { 249 | padding: @lobilist-form-padding; 250 | .form-group { 251 | margin-bottom: 5px; 252 | } 253 | .btn-add-todo { 254 | margin-right: 5px; 255 | } 256 | .btn-add-todo, 257 | .btn-discard-todo { 258 | height: 30px; 259 | } 260 | } 261 | .lobilist-placeholder { 262 | &:extend(.lobilists .lobilist-wrapper); 263 | background-color: #f9f5d1; 264 | border: 1px dashed @gray-light; 265 | } 266 | .lobilist-item-placeholder { 267 | &:extend(.lobilists .lobilist-item); 268 | background-color: rgba(0, 0, 0, 0.03); 269 | border: 1px dashed darken(@gray-lighter, 7%); 270 | } 271 | @media (max-width: @screen-xs-min) { 272 | .lobilist { 273 | width: @lobilist-xxs-width; 274 | } 275 | } 276 | &.single-line { 277 | overflow-x: auto; 278 | overflow-y: hidden; 279 | white-space: nowrap; 280 | height: 400px; 281 | .lobilist-wrapper, 282 | .lobilist-placeholder { 283 | float: none; 284 | white-space: normal; 285 | vertical-align: top; 286 | height: 100%; 287 | } 288 | } 289 | &.no-sortable{ 290 | .lobilist-item{ 291 | .drag-handler{ 292 | display: none; 293 | } 294 | } 295 | } 296 | .clearfix(); 297 | } -------------------------------------------------------------------------------- /dist/lobilist.css: -------------------------------------------------------------------------------- 1 | .lobilists .lobilist-wrapper, 2 | .lobilists .lobilist-placeholder { 3 | display: inline-block; 4 | float: left; 5 | border: 1px solid transparent; 6 | margin-bottom: 16px; 7 | width: 360px; 8 | margin-right: 16px; 9 | } 10 | .lobilists .lobilist { 11 | max-height: 100%; 12 | overflow: auto; 13 | background-color: #FFF; 14 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 15 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 16 | } 17 | .lobilists .lobilist:last-child { 18 | margin-right: 0; 19 | } 20 | .lobilists .lobilist.ui-sortable-helper { 21 | -webkit-transform: rotate(2deg); 22 | -ms-transform: rotate(2deg); 23 | -o-transform: rotate(2deg); 24 | transform: rotate(2deg); 25 | } 26 | .lobilists .lobilist:hover .lobilist-actions { 27 | opacity: 1; 28 | } 29 | .lobilists .lobilist.lobilist-default { 30 | border: 1px solid #dddddd; 31 | } 32 | .lobilists .lobilist.lobilist-default .lobilist-header { 33 | border-bottom: 1px solid #dddddd; 34 | background-color: #eeeeee; 35 | } 36 | .lobilists .lobilist.lobilist-default .lobilist-header input { 37 | background-color: transparent; 38 | border-color: #555555; 39 | color: #555555; 40 | } 41 | .lobilists .lobilist.lobilist-default .lobilist-title { 42 | color: #555555; 43 | } 44 | .lobilists .lobilist.lobilist-default .lobilist-actions .btn { 45 | color: #555555; 46 | } 47 | .lobilists .lobilist.lobilist-default .btn-show-form { 48 | color: #555555; 49 | } 50 | .lobilists .lobilist.lobilist-default .lobilist-form-footer { 51 | border-top: 1px solid #dddddd; 52 | background-color: #eeeeee; 53 | } 54 | .lobilists .lobilist.lobilist-default .lobilist-footer { 55 | border-top: 1px solid #dddddd; 56 | background-color: #eeeeee; 57 | } 58 | .lobilists .lobilist.lobilist-danger { 59 | border: 1px solid #dc5f5c; 60 | } 61 | .lobilists .lobilist.lobilist-danger .lobilist-header { 62 | border-bottom: 1px solid #dc5f5c; 63 | background-color: #e27c79; 64 | } 65 | .lobilists .lobilist.lobilist-danger .lobilist-header input { 66 | background-color: transparent; 67 | border-color: #FFF; 68 | color: #FFF; 69 | } 70 | .lobilists .lobilist.lobilist-danger .lobilist-title { 71 | color: #FFF; 72 | } 73 | .lobilists .lobilist.lobilist-danger .lobilist-actions .btn { 74 | color: #FFF; 75 | } 76 | .lobilists .lobilist.lobilist-danger .btn-show-form { 77 | color: #FFF; 78 | } 79 | .lobilists .lobilist.lobilist-danger .lobilist-form-footer { 80 | border-top: 1px solid #dc5f5c; 81 | background-color: #e27c79; 82 | } 83 | .lobilists .lobilist.lobilist-danger .lobilist-footer { 84 | border-top: 1px solid #dc5f5c; 85 | background-color: #e27c79; 86 | } 87 | .lobilists .lobilist.lobilist-success { 88 | border: 1px solid #49a749; 89 | } 90 | .lobilists .lobilist.lobilist-success .lobilist-header { 91 | border-bottom: 1px solid #49a749; 92 | background-color: #5cb85c; 93 | } 94 | .lobilists .lobilist.lobilist-success .lobilist-header input { 95 | background-color: transparent; 96 | border-color: #FFF; 97 | color: #FFF; 98 | } 99 | .lobilists .lobilist.lobilist-success .lobilist-title { 100 | color: #FFF; 101 | } 102 | .lobilists .lobilist.lobilist-success .lobilist-actions .btn { 103 | color: #FFF; 104 | } 105 | .lobilists .lobilist.lobilist-success .btn-show-form { 106 | color: #FFF; 107 | } 108 | .lobilists .lobilist.lobilist-success .lobilist-form-footer { 109 | border-top: 1px solid #49a749; 110 | background-color: #5cb85c; 111 | } 112 | .lobilists .lobilist.lobilist-success .lobilist-footer { 113 | border-top: 1px solid #49a749; 114 | background-color: #5cb85c; 115 | } 116 | .lobilists .lobilist.lobilist-warning { 117 | border: 1px solid #ed9e2d; 118 | } 119 | .lobilists .lobilist.lobilist-warning .lobilist-header { 120 | border-bottom: 1px solid #ed9e2d; 121 | background-color: #f0ad4e; 122 | } 123 | .lobilists .lobilist.lobilist-warning .lobilist-header input { 124 | background-color: transparent; 125 | border-color: #FFF; 126 | color: #FFF; 127 | } 128 | .lobilists .lobilist.lobilist-warning .lobilist-title { 129 | color: #FFF; 130 | } 131 | .lobilists .lobilist.lobilist-warning .lobilist-actions .btn { 132 | color: #FFF; 133 | } 134 | .lobilists .lobilist.lobilist-warning .btn-show-form { 135 | color: #FFF; 136 | } 137 | .lobilists .lobilist.lobilist-warning .lobilist-form-footer { 138 | border-top: 1px solid #ed9e2d; 139 | background-color: #f0ad4e; 140 | } 141 | .lobilists .lobilist.lobilist-warning .lobilist-footer { 142 | border-top: 1px solid #ed9e2d; 143 | background-color: #f0ad4e; 144 | } 145 | .lobilists .lobilist.lobilist-info { 146 | border: 1px solid #3db5d8; 147 | } 148 | .lobilists .lobilist.lobilist-info .lobilist-header { 149 | border-bottom: 1px solid #3db5d8; 150 | background-color: #5bc0de; 151 | } 152 | .lobilists .lobilist.lobilist-info .lobilist-header input { 153 | background-color: transparent; 154 | border-color: #FFF; 155 | color: #FFF; 156 | } 157 | .lobilists .lobilist.lobilist-info .lobilist-title { 158 | color: #FFF; 159 | } 160 | .lobilists .lobilist.lobilist-info .lobilist-actions .btn { 161 | color: #FFF; 162 | } 163 | .lobilists .lobilist.lobilist-info .btn-show-form { 164 | color: #FFF; 165 | } 166 | .lobilists .lobilist.lobilist-info .lobilist-form-footer { 167 | border-top: 1px solid #3db5d8; 168 | background-color: #5bc0de; 169 | } 170 | .lobilists .lobilist.lobilist-info .lobilist-footer { 171 | border-top: 1px solid #3db5d8; 172 | background-color: #5bc0de; 173 | } 174 | .lobilists .lobilist.lobilist-primary { 175 | border: 1px solid #2c689c; 176 | } 177 | .lobilists .lobilist.lobilist-primary .lobilist-header { 178 | border-bottom: 1px solid #2c689c; 179 | background-color: #337ab7; 180 | } 181 | .lobilists .lobilist.lobilist-primary .lobilist-header input { 182 | background-color: transparent; 183 | border-color: #FFF; 184 | color: #FFF; 185 | } 186 | .lobilists .lobilist.lobilist-primary .lobilist-title { 187 | color: #FFF; 188 | } 189 | .lobilists .lobilist.lobilist-primary .lobilist-actions .btn { 190 | color: #FFF; 191 | } 192 | .lobilists .lobilist.lobilist-primary .btn-show-form { 193 | color: #FFF; 194 | } 195 | .lobilists .lobilist.lobilist-primary .lobilist-form-footer { 196 | border-top: 1px solid #2c689c; 197 | background-color: #337ab7; 198 | } 199 | .lobilists .lobilist.lobilist-primary .lobilist-footer { 200 | border-top: 1px solid #2c689c; 201 | background-color: #337ab7; 202 | } 203 | .lobilists .btn-finish-title-editing, 204 | .lobilists .btn-cancel-title-editing { 205 | display: none; 206 | } 207 | .lobilists .lobilist-header { 208 | position: relative; 209 | min-height: 38px; 210 | padding: 6px 8px; 211 | } 212 | .lobilists .lobilist-header input { 213 | background-color: transparent; 214 | height: 30px; 215 | } 216 | .lobilists .lobilist-header.title-editing .lobilist-actions { 217 | opacity: 1; 218 | } 219 | .lobilists .lobilist-header.title-editing .lobilist-actions .btn { 220 | display: none; 221 | } 222 | .lobilists .lobilist-header.title-editing .lobilist-actions .btn-finish-title-editing, 223 | .lobilists .lobilist-header.title-editing .lobilist-actions .btn-cancel-title-editing { 224 | display: inline-block; 225 | font-size: 18px; 226 | line-height: 30px; 227 | width: 30px; 228 | height: 30px; 229 | } 230 | .lobilists .lobilist-header:before, 231 | .lobilists .lobilist-header:after { 232 | content: " "; 233 | display: table; 234 | } 235 | .lobilists .lobilist-header:after { 236 | clear: both; 237 | } 238 | .lobilists .lobilist-actions { 239 | position: absolute; 240 | top: 6px; 241 | right: 8px; 242 | opacity: 0; 243 | } 244 | .lobilists .lobilist-actions > .dropdown { 245 | display: inline-block; 246 | } 247 | .lobilists .lobilist-actions .dropdown-menu { 248 | height: 70px; 249 | width: 100px; 250 | box-sizing: content-box; 251 | min-width: 0; 252 | padding: 0; 253 | margin: 0; 254 | } 255 | .lobilists .lobilist-actions .dropdown-menu .lobilist-default, 256 | .lobilists .lobilist-actions .dropdown-menu .lobilist-danger, 257 | .lobilists .lobilist-actions .dropdown-menu .lobilist-success, 258 | .lobilists .lobilist-actions .dropdown-menu .lobilist-warning, 259 | .lobilists .lobilist-actions .dropdown-menu .lobilist-info, 260 | .lobilists .lobilist-actions .dropdown-menu .lobilist-primary { 261 | display: inline-block; 262 | cursor: pointer; 263 | margin: 4px; 264 | width: 25px; 265 | height: 25px; 266 | } 267 | .lobilists .lobilist-actions .dropdown-menu .lobilist-default { 268 | background-color: #eeeeee; 269 | } 270 | .lobilists .lobilist-actions .dropdown-menu .lobilist-default:hover { 271 | background-color: #e2e2e2; 272 | } 273 | .lobilists .lobilist-actions .dropdown-menu .lobilist-danger { 274 | background-color: #e27c79; 275 | } 276 | .lobilists .lobilist-actions .dropdown-menu .lobilist-danger:hover { 277 | background-color: #de6764; 278 | } 279 | .lobilists .lobilist-actions .dropdown-menu .lobilist-success { 280 | background-color: #5cb85c; 281 | } 282 | .lobilists .lobilist-actions .dropdown-menu .lobilist-success:hover { 283 | background-color: #4cae4c; 284 | } 285 | .lobilists .lobilist-actions .dropdown-menu .lobilist-warning { 286 | background-color: #f0ad4e; 287 | } 288 | .lobilists .lobilist-actions .dropdown-menu .lobilist-warning:hover { 289 | background-color: #eea236; 290 | } 291 | .lobilists .lobilist-actions .dropdown-menu .lobilist-info { 292 | background-color: #5bc0de; 293 | } 294 | .lobilists .lobilist-actions .dropdown-menu .lobilist-info:hover { 295 | background-color: #46b8da; 296 | } 297 | .lobilists .lobilist-actions .dropdown-menu .lobilist-primary { 298 | background-color: #337ab7; 299 | } 300 | .lobilists .lobilist-actions .dropdown-menu .lobilist-primary:hover { 301 | background-color: #2e6da4; 302 | } 303 | .lobilists .lobilist-actions .btn.btn-default { 304 | background-color: transparent; 305 | border-color: transparent; 306 | width: 26px; 307 | height: 26px; 308 | } 309 | .lobilists .lobilist-actions .btn.btn-default:hover { 310 | background-color: rgba(0, 0, 0, 0.04); 311 | } 312 | .lobilists .lobilist-title { 313 | padding-left: 15px; 314 | font-size: 18px; 315 | } 316 | .lobilists .lobilist-items { 317 | list-style: none; 318 | margin-bottom: 0; 319 | padding: 10px; 320 | } 321 | .lobilists .lobilist-item, 322 | .lobilists .lobilist-item-placeholder { 323 | border: 1px solid transparent; 324 | margin-bottom: 5px; 325 | padding-top: 16px; 326 | padding-bottom: 4px; 327 | padding-left: 35px; 328 | border-bottom: 1px solid #eeeeee; 329 | -webkit-transition: background-color 0.2s; 330 | -o-transition: background-color 0.2s; 331 | transition: background-color 0.2s; 332 | } 333 | .lobilists .lobilist-item .drag-handler { 334 | position: absolute; 335 | left: 0; 336 | top: 0; 337 | bottom: 0; 338 | width: 5px; 339 | border-left: 2px dotted #dddddd; 340 | border-right: 2px dotted #dddddd; 341 | } 342 | .lobilists .lobilist-item .drag-handler:hover { 343 | cursor: move; 344 | } 345 | .lobilists .lobilist-item .todo-actions { 346 | position: absolute; 347 | top: 2px; 348 | right: 4px; 349 | text-align: center; 350 | white-space: nowrap; 351 | font-size: 10px; 352 | color: #9d9d9d; 353 | line-height: 16px; 354 | } 355 | .lobilists .lobilist-item .todo-action { 356 | display: inline-block; 357 | width: 16px; 358 | height: 16px; 359 | } 360 | .lobilists .lobilist-item .todo-action:hover { 361 | cursor: pointer; 362 | color: #5e5e5e; 363 | } 364 | .lobilists .lobilist-item:hover { 365 | background-color: rgba(0, 0, 0, 0.02); 366 | } 367 | .lobilists .lobilist-item-title { 368 | font-weight: 600; 369 | font-size: 16px; 370 | } 371 | .lobilists .lobilist-item-description { 372 | font-style: italic; 373 | } 374 | .lobilists .lobilist-item-duedate { 375 | position: absolute; 376 | top: 2px; 377 | left: 12px; 378 | font-style: italic; 379 | color: #777777; 380 | font-size: 85%; 381 | } 382 | .lobilists .lobilist-check { 383 | position: absolute; 384 | left: 12px; 385 | top: 16px; 386 | } 387 | .lobilists .lobilist-check.lobicheck { 388 | margin-top: 3px; 389 | } 390 | .lobilists .lobilist-item, 391 | .lobilists .lobilist-item-placeholder { 392 | position: relative; 393 | } 394 | .lobilists .lobilist-item.item-done { 395 | text-decoration: line-through; 396 | } 397 | .lobilists .btn-show-form { 398 | outline: 0; 399 | } 400 | .lobilists .lobilist-footer, 401 | .lobilists .lobilist-form-footer { 402 | padding: 6px 8px; 403 | } 404 | .lobilists .lobilist-form-footer { 405 | margin-left: -10px; 406 | margin-right: -10px; 407 | margin-bottom: -10px; 408 | } 409 | .lobilists .lobilist-add-todo-form { 410 | padding: 10px; 411 | } 412 | .lobilists .lobilist-add-todo-form .form-group { 413 | margin-bottom: 5px; 414 | } 415 | .lobilists .lobilist-add-todo-form .btn-add-todo { 416 | margin-right: 5px; 417 | } 418 | .lobilists .lobilist-add-todo-form .btn-add-todo, 419 | .lobilists .lobilist-add-todo-form .btn-discard-todo { 420 | height: 30px; 421 | } 422 | .lobilists .lobilist-placeholder { 423 | background-color: #f9f5d1; 424 | border: 1px dashed #777777; 425 | } 426 | .lobilists .lobilist-item-placeholder { 427 | background-color: rgba(0, 0, 0, 0.03); 428 | border: 1px dashed #dddddd; 429 | } 430 | @media (max-width: 480px) { 431 | .lobilists .lobilist { 432 | width: 100%; 433 | } 434 | } 435 | .lobilists.single-line { 436 | overflow-x: auto; 437 | overflow-y: hidden; 438 | white-space: nowrap; 439 | height: 400px; 440 | } 441 | .lobilists.single-line .lobilist-wrapper, 442 | .lobilists.single-line .lobilist-placeholder { 443 | float: none; 444 | white-space: normal; 445 | vertical-align: top; 446 | height: 100%; 447 | } 448 | .lobilists.no-sortable .lobilist-item .drag-handler { 449 | display: none; 450 | } 451 | .lobilists:before, 452 | .lobilists:after { 453 | content: " "; 454 | display: table; 455 | } 456 | .lobilists:after { 457 | clear: both; 458 | } 459 | -------------------------------------------------------------------------------- /src/css/lobilist.css: -------------------------------------------------------------------------------- 1 | .lobilists .lobilist-wrapper, 2 | .lobilists .lobilist-placeholder { 3 | display: inline-block; 4 | float: left; 5 | border: 1px solid transparent; 6 | margin-bottom: 16px; 7 | width: 360px; 8 | margin-right: 16px; 9 | } 10 | .lobilists .lobilist { 11 | max-height: 100%; 12 | overflow: auto; 13 | background-color: #FFF; 14 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 15 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); 16 | } 17 | .lobilists .lobilist:last-child { 18 | margin-right: 0; 19 | } 20 | .lobilists .lobilist.ui-sortable-helper { 21 | -webkit-transform: rotate(2deg); 22 | -ms-transform: rotate(2deg); 23 | -o-transform: rotate(2deg); 24 | transform: rotate(2deg); 25 | } 26 | .lobilists .lobilist:hover .lobilist-actions { 27 | opacity: 1; 28 | } 29 | .lobilists .lobilist.lobilist-default { 30 | border: 1px solid #dddddd; 31 | } 32 | .lobilists .lobilist.lobilist-default .lobilist-header { 33 | border-bottom: 1px solid #dddddd; 34 | background-color: #eeeeee; 35 | } 36 | .lobilists .lobilist.lobilist-default .lobilist-header input { 37 | background-color: transparent; 38 | border-color: #555555; 39 | color: #555555; 40 | } 41 | .lobilists .lobilist.lobilist-default .lobilist-title { 42 | color: #555555; 43 | } 44 | .lobilists .lobilist.lobilist-default .lobilist-actions .btn { 45 | color: #555555; 46 | } 47 | .lobilists .lobilist.lobilist-default .btn-show-form { 48 | color: #555555; 49 | } 50 | .lobilists .lobilist.lobilist-default .lobilist-form-footer { 51 | border-top: 1px solid #dddddd; 52 | background-color: #eeeeee; 53 | } 54 | .lobilists .lobilist.lobilist-default .lobilist-footer { 55 | border-top: 1px solid #dddddd; 56 | background-color: #eeeeee; 57 | } 58 | .lobilists .lobilist.lobilist-danger { 59 | border: 1px solid #dc5f5c; 60 | } 61 | .lobilists .lobilist.lobilist-danger .lobilist-header { 62 | border-bottom: 1px solid #dc5f5c; 63 | background-color: #e27c79; 64 | } 65 | .lobilists .lobilist.lobilist-danger .lobilist-header input { 66 | background-color: transparent; 67 | border-color: #FFF; 68 | color: #FFF; 69 | } 70 | .lobilists .lobilist.lobilist-danger .lobilist-title { 71 | color: #FFF; 72 | } 73 | .lobilists .lobilist.lobilist-danger .lobilist-actions .btn { 74 | color: #FFF; 75 | } 76 | .lobilists .lobilist.lobilist-danger .btn-show-form { 77 | color: #FFF; 78 | } 79 | .lobilists .lobilist.lobilist-danger .lobilist-form-footer { 80 | border-top: 1px solid #dc5f5c; 81 | background-color: #e27c79; 82 | } 83 | .lobilists .lobilist.lobilist-danger .lobilist-footer { 84 | border-top: 1px solid #dc5f5c; 85 | background-color: #e27c79; 86 | } 87 | .lobilists .lobilist.lobilist-success { 88 | border: 1px solid #49a749; 89 | } 90 | .lobilists .lobilist.lobilist-success .lobilist-header { 91 | border-bottom: 1px solid #49a749; 92 | background-color: #5cb85c; 93 | } 94 | .lobilists .lobilist.lobilist-success .lobilist-header input { 95 | background-color: transparent; 96 | border-color: #FFF; 97 | color: #FFF; 98 | } 99 | .lobilists .lobilist.lobilist-success .lobilist-title { 100 | color: #FFF; 101 | } 102 | .lobilists .lobilist.lobilist-success .lobilist-actions .btn { 103 | color: #FFF; 104 | } 105 | .lobilists .lobilist.lobilist-success .btn-show-form { 106 | color: #FFF; 107 | } 108 | .lobilists .lobilist.lobilist-success .lobilist-form-footer { 109 | border-top: 1px solid #49a749; 110 | background-color: #5cb85c; 111 | } 112 | .lobilists .lobilist.lobilist-success .lobilist-footer { 113 | border-top: 1px solid #49a749; 114 | background-color: #5cb85c; 115 | } 116 | .lobilists .lobilist.lobilist-warning { 117 | border: 1px solid #ed9e2d; 118 | } 119 | .lobilists .lobilist.lobilist-warning .lobilist-header { 120 | border-bottom: 1px solid #ed9e2d; 121 | background-color: #f0ad4e; 122 | } 123 | .lobilists .lobilist.lobilist-warning .lobilist-header input { 124 | background-color: transparent; 125 | border-color: #FFF; 126 | color: #FFF; 127 | } 128 | .lobilists .lobilist.lobilist-warning .lobilist-title { 129 | color: #FFF; 130 | } 131 | .lobilists .lobilist.lobilist-warning .lobilist-actions .btn { 132 | color: #FFF; 133 | } 134 | .lobilists .lobilist.lobilist-warning .btn-show-form { 135 | color: #FFF; 136 | } 137 | .lobilists .lobilist.lobilist-warning .lobilist-form-footer { 138 | border-top: 1px solid #ed9e2d; 139 | background-color: #f0ad4e; 140 | } 141 | .lobilists .lobilist.lobilist-warning .lobilist-footer { 142 | border-top: 1px solid #ed9e2d; 143 | background-color: #f0ad4e; 144 | } 145 | .lobilists .lobilist.lobilist-info { 146 | border: 1px solid #3db5d8; 147 | } 148 | .lobilists .lobilist.lobilist-info .lobilist-header { 149 | border-bottom: 1px solid #3db5d8; 150 | background-color: #5bc0de; 151 | } 152 | .lobilists .lobilist.lobilist-info .lobilist-header input { 153 | background-color: transparent; 154 | border-color: #FFF; 155 | color: #FFF; 156 | } 157 | .lobilists .lobilist.lobilist-info .lobilist-title { 158 | color: #FFF; 159 | } 160 | .lobilists .lobilist.lobilist-info .lobilist-actions .btn { 161 | color: #FFF; 162 | } 163 | .lobilists .lobilist.lobilist-info .btn-show-form { 164 | color: #FFF; 165 | } 166 | .lobilists .lobilist.lobilist-info .lobilist-form-footer { 167 | border-top: 1px solid #3db5d8; 168 | background-color: #5bc0de; 169 | } 170 | .lobilists .lobilist.lobilist-info .lobilist-footer { 171 | border-top: 1px solid #3db5d8; 172 | background-color: #5bc0de; 173 | } 174 | .lobilists .lobilist.lobilist-primary { 175 | border: 1px solid #2c689c; 176 | } 177 | .lobilists .lobilist.lobilist-primary .lobilist-header { 178 | border-bottom: 1px solid #2c689c; 179 | background-color: #337ab7; 180 | } 181 | .lobilists .lobilist.lobilist-primary .lobilist-header input { 182 | background-color: transparent; 183 | border-color: #FFF; 184 | color: #FFF; 185 | } 186 | .lobilists .lobilist.lobilist-primary .lobilist-title { 187 | color: #FFF; 188 | } 189 | .lobilists .lobilist.lobilist-primary .lobilist-actions .btn { 190 | color: #FFF; 191 | } 192 | .lobilists .lobilist.lobilist-primary .btn-show-form { 193 | color: #FFF; 194 | } 195 | .lobilists .lobilist.lobilist-primary .lobilist-form-footer { 196 | border-top: 1px solid #2c689c; 197 | background-color: #337ab7; 198 | } 199 | .lobilists .lobilist.lobilist-primary .lobilist-footer { 200 | border-top: 1px solid #2c689c; 201 | background-color: #337ab7; 202 | } 203 | .lobilists .btn-finish-title-editing, 204 | .lobilists .btn-cancel-title-editing { 205 | display: none; 206 | } 207 | .lobilists .lobilist-header { 208 | position: relative; 209 | min-height: 38px; 210 | padding: 6px 8px; 211 | } 212 | .lobilists .lobilist-header input { 213 | background-color: transparent; 214 | height: 30px; 215 | } 216 | .lobilists .lobilist-header.title-editing .lobilist-actions { 217 | opacity: 1; 218 | } 219 | .lobilists .lobilist-header.title-editing .lobilist-actions .btn { 220 | display: none; 221 | } 222 | .lobilists .lobilist-header.title-editing .lobilist-actions .btn-finish-title-editing, 223 | .lobilists .lobilist-header.title-editing .lobilist-actions .btn-cancel-title-editing { 224 | display: inline-block; 225 | font-size: 18px; 226 | line-height: 30px; 227 | width: 30px; 228 | height: 30px; 229 | } 230 | .lobilists .lobilist-header:before, 231 | .lobilists .lobilist-header:after { 232 | content: " "; 233 | display: table; 234 | } 235 | .lobilists .lobilist-header:after { 236 | clear: both; 237 | } 238 | .lobilists .lobilist-actions { 239 | position: absolute; 240 | top: 6px; 241 | right: 8px; 242 | opacity: 0; 243 | } 244 | .lobilists .lobilist-actions > .dropdown { 245 | display: inline-block; 246 | } 247 | .lobilists .lobilist-actions .dropdown-menu { 248 | height: 70px; 249 | width: 100px; 250 | box-sizing: content-box; 251 | min-width: 0; 252 | padding: 0; 253 | margin: 0; 254 | } 255 | .lobilists .lobilist-actions .dropdown-menu .lobilist-default, 256 | .lobilists .lobilist-actions .dropdown-menu .lobilist-danger, 257 | .lobilists .lobilist-actions .dropdown-menu .lobilist-success, 258 | .lobilists .lobilist-actions .dropdown-menu .lobilist-warning, 259 | .lobilists .lobilist-actions .dropdown-menu .lobilist-info, 260 | .lobilists .lobilist-actions .dropdown-menu .lobilist-primary { 261 | display: inline-block; 262 | cursor: pointer; 263 | margin: 4px; 264 | width: 25px; 265 | height: 25px; 266 | } 267 | .lobilists .lobilist-actions .dropdown-menu .lobilist-default { 268 | background-color: #eeeeee; 269 | } 270 | .lobilists .lobilist-actions .dropdown-menu .lobilist-default:hover { 271 | background-color: #e2e2e2; 272 | } 273 | .lobilists .lobilist-actions .dropdown-menu .lobilist-danger { 274 | background-color: #e27c79; 275 | } 276 | .lobilists .lobilist-actions .dropdown-menu .lobilist-danger:hover { 277 | background-color: #de6764; 278 | } 279 | .lobilists .lobilist-actions .dropdown-menu .lobilist-success { 280 | background-color: #5cb85c; 281 | } 282 | .lobilists .lobilist-actions .dropdown-menu .lobilist-success:hover { 283 | background-color: #4cae4c; 284 | } 285 | .lobilists .lobilist-actions .dropdown-menu .lobilist-warning { 286 | background-color: #f0ad4e; 287 | } 288 | .lobilists .lobilist-actions .dropdown-menu .lobilist-warning:hover { 289 | background-color: #eea236; 290 | } 291 | .lobilists .lobilist-actions .dropdown-menu .lobilist-info { 292 | background-color: #5bc0de; 293 | } 294 | .lobilists .lobilist-actions .dropdown-menu .lobilist-info:hover { 295 | background-color: #46b8da; 296 | } 297 | .lobilists .lobilist-actions .dropdown-menu .lobilist-primary { 298 | background-color: #337ab7; 299 | } 300 | .lobilists .lobilist-actions .dropdown-menu .lobilist-primary:hover { 301 | background-color: #2e6da4; 302 | } 303 | .lobilists .lobilist-actions .btn.btn-default { 304 | background-color: transparent; 305 | border-color: transparent; 306 | width: 26px; 307 | height: 26px; 308 | } 309 | .lobilists .lobilist-actions .btn.btn-default:hover { 310 | background-color: rgba(0, 0, 0, 0.04); 311 | } 312 | .lobilists .lobilist-title { 313 | padding-left: 15px; 314 | font-size: 18px; 315 | } 316 | .lobilists .lobilist-items { 317 | list-style: none; 318 | margin-bottom: 0; 319 | padding: 10px; 320 | } 321 | .lobilists .lobilist-item, 322 | .lobilists .lobilist-item-placeholder { 323 | border: 1px solid transparent; 324 | margin-bottom: 5px; 325 | padding-top: 16px; 326 | padding-bottom: 4px; 327 | padding-left: 35px; 328 | border-bottom: 1px solid #eeeeee; 329 | -webkit-transition: background-color 0.2s; 330 | -o-transition: background-color 0.2s; 331 | transition: background-color 0.2s; 332 | } 333 | .lobilists .lobilist-item .drag-handler { 334 | position: absolute; 335 | left: 0; 336 | top: 0; 337 | bottom: 0; 338 | width: 5px; 339 | border-left: 2px dotted #dddddd; 340 | border-right: 2px dotted #dddddd; 341 | } 342 | .lobilists .lobilist-item .drag-handler:hover { 343 | cursor: move; 344 | } 345 | .lobilists .lobilist-item .todo-actions { 346 | position: absolute; 347 | top: 2px; 348 | right: 4px; 349 | text-align: center; 350 | white-space: nowrap; 351 | font-size: 10px; 352 | color: #9d9d9d; 353 | line-height: 16px; 354 | } 355 | .lobilists .lobilist-item .todo-action { 356 | display: inline-block; 357 | width: 16px; 358 | height: 16px; 359 | } 360 | .lobilists .lobilist-item .todo-action:hover { 361 | cursor: pointer; 362 | color: #5e5e5e; 363 | } 364 | .lobilists .lobilist-item:hover { 365 | background-color: rgba(0, 0, 0, 0.02); 366 | } 367 | .lobilists .lobilist-item-title { 368 | font-weight: 600; 369 | font-size: 16px; 370 | } 371 | .lobilists .lobilist-item-description { 372 | font-style: italic; 373 | } 374 | .lobilists .lobilist-item-duedate { 375 | position: absolute; 376 | top: 2px; 377 | left: 12px; 378 | font-style: italic; 379 | color: #777777; 380 | font-size: 85%; 381 | } 382 | .lobilists .lobilist-check { 383 | position: absolute; 384 | left: 12px; 385 | top: 16px; 386 | } 387 | .lobilists .lobilist-check.lobicheck { 388 | margin-top: 3px; 389 | } 390 | .lobilists .lobilist-item, 391 | .lobilists .lobilist-item-placeholder { 392 | position: relative; 393 | } 394 | .lobilists .lobilist-item.item-done { 395 | text-decoration: line-through; 396 | } 397 | .lobilists .btn-show-form { 398 | outline: 0; 399 | } 400 | .lobilists .lobilist-footer, 401 | .lobilists .lobilist-form-footer { 402 | padding: 6px 8px; 403 | } 404 | .lobilists .lobilist-form-footer { 405 | margin-left: -10px; 406 | margin-right: -10px; 407 | margin-bottom: -10px; 408 | } 409 | .lobilists .lobilist-add-todo-form { 410 | padding: 10px; 411 | } 412 | .lobilists .lobilist-add-todo-form .form-group { 413 | margin-bottom: 5px; 414 | } 415 | .lobilists .lobilist-add-todo-form .btn-add-todo { 416 | margin-right: 5px; 417 | } 418 | .lobilists .lobilist-add-todo-form .btn-add-todo, 419 | .lobilists .lobilist-add-todo-form .btn-discard-todo { 420 | height: 30px; 421 | } 422 | .lobilists .lobilist-placeholder { 423 | background-color: #f9f5d1; 424 | border: 1px dashed #777777; 425 | } 426 | .lobilists .lobilist-item-placeholder { 427 | background-color: rgba(0, 0, 0, 0.03); 428 | border: 1px dashed #dddddd; 429 | } 430 | @media (max-width: 480px) { 431 | .lobilists .lobilist { 432 | width: 100%; 433 | } 434 | } 435 | .lobilists.single-line { 436 | overflow-x: auto; 437 | overflow-y: hidden; 438 | white-space: nowrap; 439 | height: 400px; 440 | } 441 | .lobilists.single-line .lobilist-wrapper, 442 | .lobilists.single-line .lobilist-placeholder { 443 | float: none; 444 | white-space: normal; 445 | vertical-align: top; 446 | height: 100%; 447 | } 448 | .lobilists.no-sortable .lobilist-item .drag-handler { 449 | display: none; 450 | } 451 | .lobilists:before, 452 | .lobilists:after { 453 | content: " "; 454 | display: table; 455 | } 456 | .lobilists:after { 457 | clear: both; 458 | } 459 | -------------------------------------------------------------------------------- /demo/demo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Zura on 4/5/2016. 3 | */ 4 | $(function () { 5 | Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, { 6 | size: 'mini', 7 | // delay: false, 8 | position: 'right top' 9 | }); 10 | 11 | //Basic example 12 | $('#todo-lists-basic-demo').lobiList({ 13 | lists: [ 14 | { 15 | id: 'todo', 16 | title: 'TODO', 17 | defaultStyle: 'lobilist-info', 18 | items: [ 19 | { 20 | title: 'Floor cool cinders', 21 | description: 'Thunder fulfilled travellers folly, wading, lake.', 22 | dueDate: '2015-01-31' 23 | }, 24 | { 25 | title: 'Periods pride', 26 | description: 'Accepted was mollis', 27 | done: true 28 | }, 29 | { 30 | title: 'Flags better burns pigeon', 31 | description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.' 32 | }, 33 | { 34 | title: 'Accepted was mollis', 35 | description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.', 36 | dueDate: '2015-02-02' 37 | } 38 | ] 39 | }, 40 | { 41 | title: 'DOING', 42 | items: [ 43 | { 44 | title: 'Composed trays', 45 | 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.' 46 | }, 47 | { 48 | title: 'Chic leafy' 49 | }, 50 | { 51 | title: 'Guessed interdum armies chirp writhes most', 52 | description: 'Came champlain live leopards twilight whenever warm read wish squirrel rock.', 53 | dueDate: '2015-02-04', 54 | done: true 55 | } 56 | ] 57 | } 58 | ] 59 | }); 60 | //Custom datepicker 61 | $('#todo-lists-demo-datepicker').lobiList({ 62 | lists: [ 63 | { 64 | title: 'TODO', 65 | defaultStyle: 'lobilist-info', 66 | items: [ 67 | { 68 | title: 'Floor cool cinders', 69 | description: 'Thunder fulfilled travellers folly, wading, lake.', 70 | dueDate: '2015-01-31' 71 | } 72 | ] 73 | } 74 | ], 75 | afterListAdd: function(lobilist, list){ 76 | var $dueDateInput = list.$el.find('form [name=dueDate]'); 77 | $dueDateInput.datepicker(); 78 | } 79 | }); 80 | // Event handling 81 | (function () { 82 | var list; 83 | 84 | $('#todo-lists-initialize-btn').click(function () { 85 | list = $('#todo-lists-demo-events') 86 | .lobiList({ 87 | init: function () { 88 | Lobibox.notify('default', { 89 | msg: 'init' 90 | }); 91 | }, 92 | beforeDestroy: function () { 93 | Lobibox.notify('default', { 94 | msg: 'beforeDestroy' 95 | }); 96 | }, 97 | afterDestroy: function () { 98 | Lobibox.notify('default', { 99 | msg: 'afterDestroy' 100 | }); 101 | }, 102 | beforeListAdd: function () { 103 | Lobibox.notify('default', { 104 | msg: 'beforeListAdd' 105 | }); 106 | }, 107 | afterListAdd: function () { 108 | Lobibox.notify('default', { 109 | msg: 'afterListAdd' 110 | }); 111 | }, 112 | beforeListRemove: function () { 113 | Lobibox.notify('default', { 114 | msg: 'beforeListRemove' 115 | }); 116 | }, 117 | afterListRemove: function () { 118 | Lobibox.notify('default', { 119 | msg: 'afterListRemove' 120 | }); 121 | }, 122 | beforeItemAdd: function () { 123 | Lobibox.notify('default', { 124 | msg: 'beforeItemAdd' 125 | }); 126 | }, 127 | afterItemAdd: function () { 128 | console.log(arguments); 129 | Lobibox.notify('default', { 130 | msg: 'afterItemAdd' 131 | }); 132 | }, 133 | beforeItemUpdate: function () { 134 | Lobibox.notify('default', { 135 | msg: 'beforeItemUpdate' 136 | }); 137 | }, 138 | afterItemUpdate: function () { 139 | console.log(arguments); 140 | Lobibox.notify('default', { 141 | msg: 'afterItemUpdate' 142 | }); 143 | }, 144 | beforeItemDelete: function () { 145 | Lobibox.notify('default', { 146 | msg: 'beforeItemDelete' 147 | }); 148 | }, 149 | afterItemDelete: function () { 150 | Lobibox.notify('default', { 151 | msg: 'afterItemDelete' 152 | }); 153 | }, 154 | beforeListDrop: function () { 155 | Lobibox.notify('default', { 156 | msg: 'beforeListDrop' 157 | }); 158 | }, 159 | afterListReorder: function () { 160 | Lobibox.notify('default', { 161 | msg: 'afterListReorder' 162 | }); 163 | }, 164 | beforeItemDrop: function () { 165 | Lobibox.notify('default', { 166 | msg: 'beforeItemDrop' 167 | }); 168 | }, 169 | afterItemReorder: function () { 170 | Lobibox.notify('default', { 171 | msg: 'afterItemReorder' 172 | }); 173 | }, 174 | afterMarkAsDone: function () { 175 | Lobibox.notify('default', { 176 | msg: 'afterMarkAsDone' 177 | }); 178 | }, 179 | afterMarkAsUndone: function () { 180 | Lobibox.notify('default', { 181 | msg: 'afterMarkAsUndone' 182 | }); 183 | }, 184 | styleChange: function(list, oldStyle, newStyle){ 185 | console.log(arguments); 186 | Lobibox.notify('default', { 187 | msg: 'styleChange: Old style - "'+oldStyle+'". New style - "'+ newStyle +'"' 188 | }); 189 | }, 190 | titleChange: function(list, oldTitle, newTitle){ 191 | console.log(arguments); 192 | Lobibox.notify('default', { 193 | msg: 'titleChange: Old title - "'+oldTitle+'". New title - "'+ newTitle + '"' 194 | }); 195 | }, 196 | lists: [ 197 | { 198 | title: 'TODO', 199 | defaultStyle: 'lobilist-info', 200 | items: [ 201 | { 202 | title: 'Floor cool cinders', 203 | description: 'Thunder fulfilled travellers folly, wading, lake.', 204 | dueDate: '2015-01-31' 205 | }, 206 | { 207 | title: 'Periods pride', 208 | description: 'Accepted was mollis', 209 | done: true 210 | }, 211 | { 212 | title: 'Flags better burns pigeon', 213 | description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' + 214 | 'treacherously darkling.' 215 | }, 216 | { 217 | title: 'Accepted was mollis', 218 | description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' + 219 | 'treacherously darkling.', 220 | dueDate: '2015-02-02' 221 | } 222 | ] 223 | } 224 | ] 225 | }) 226 | .data('lobiList'); 227 | }); 228 | 229 | $('#todo-lists-destroy-btn').click(function () { 230 | list.destroy(); 231 | }); 232 | })(); 233 | // Custom controls 234 | $('#todo-lists-demo-controls').lobiList({ 235 | lists: [ 236 | { 237 | title: 'TODO', 238 | defaultStyle: 'lobilist-info', 239 | controls: ['edit', 'styleChange'], 240 | items: [ 241 | { 242 | title: 'Floor cool cinders', 243 | description: 'Thunder fulfilled travellers folly, wading, lake.', 244 | dueDate: '2015-01-31' 245 | } 246 | ] 247 | }, 248 | { 249 | title: 'Disabled custom checkboxes', 250 | defaultStyle: 'lobilist-danger', 251 | controls: ['edit', 'add', 'remove'], 252 | useLobicheck: false, 253 | items: [ 254 | { 255 | title: 'Periods pride', 256 | description: 'Accepted was mollis', 257 | done: true 258 | } 259 | ] 260 | }, 261 | { 262 | title: 'Controls disabled', 263 | controls: false, 264 | items: [ 265 | { 266 | title: 'Composed trays', 267 | description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' + 268 | 'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' + 269 | 'celerities gales beams.' 270 | } 271 | ] 272 | }, 273 | { 274 | title: 'Disabled todo edit/remove', 275 | enableTodoRemove: false, 276 | enableTodoEdit: false, 277 | items: [ 278 | { 279 | title: 'Composed trays', 280 | description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' + 281 | 'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' + 282 | 'celerities gales beams.' 283 | } 284 | ] 285 | } 286 | ] 287 | }); 288 | // Disabled drag & drop 289 | $('#todo-lists-demo-sorting').lobiList({ 290 | sortable: false, 291 | lists: [ 292 | { 293 | title: 'TODO', 294 | defaultStyle: 'lobilist-info', 295 | controls: ['edit', 'styleChange'], 296 | items: [ 297 | { 298 | title: 'Floor cool cinders', 299 | description: 'Thunder fulfilled travellers folly, wading, lake.', 300 | dueDate: '2015-01-31' 301 | } 302 | ] 303 | }, 304 | { 305 | title: 'Controls disabled', 306 | controls: false, 307 | items: [ 308 | { 309 | title: 'Composed trays', 310 | 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.' 311 | } 312 | ] 313 | } 314 | ] 315 | }); 316 | 317 | $('#actions-by-ajax').lobiList({ 318 | actions: { 319 | load: 'demo/example1/load.json', 320 | insert: 'demo/example1/insert.php', 321 | delete: 'demo/example1/delete.php', 322 | update: 'demo/example1/update.php' 323 | }, 324 | afterItemAdd: function(){ 325 | console.log(arguments); 326 | } 327 | }); 328 | }); -------------------------------------------------------------------------------- /lib/lobibox/js/messageboxes.min.js: -------------------------------------------------------------------------------- 1 | var Lobibox=Lobibox||{};!function(){function LobiboxPrompt(type,options){this.$input=null,this.$type="prompt",this.$promptType=type,options=$.extend({},Lobibox.prompt.DEFAULT_OPTIONS,options),this.$options=this._processInput(options),this._init(),this.debug(this)}function LobiboxConfirm(options){this.$type="confirm",this.$options=this._processInput(options),this._init(),this.debug(this)}function LobiboxAlert(type,options){this.$type=type,this.$options=this._processInput(options),this._init(),this.debug(this)}function LobiboxProgress(options){this.$type="progress",this.$progressBarElement=null,this.$options=this._processInput(options),this.$progress=0,this._init(),this.debug(this)}function LobiboxWindow(type,options){this.$type=type,this.$options=this._processInput(options),this._init(),this.debug(this)}Lobibox.counter=0,Lobibox.prompt=function(type,options){return new LobiboxPrompt(type,options)},Lobibox.confirm=function(options){return new LobiboxConfirm(options)},Lobibox.progress=function(options){return new LobiboxProgress(options)},Lobibox.error={},Lobibox.success={},Lobibox.warning={},Lobibox.info={},Lobibox.alert=function(type,options){return["success","error","warning","info"].indexOf(type)>-1?new LobiboxAlert(type,options):void 0},Lobibox.window=function(options){return new LobiboxWindow("window",options)};var LobiboxBase={$type:null,$el:null,$options:null,debug:function(){this.$options.debug&&window.console.debug.apply(window.console,arguments)},_processInput:function(options){if($.isArray(options.buttons)){for(var btns={},i=0;i").addClass(op["class"]).attr("data-type",type).html(op.text);return me.$options.callback&&"function"==typeof me.$options.callback&&btn.on("click.lobibox",function(ev){var bt=$(this);me._onButtonClick(me.$options.buttons[type],type),me.$options.callback(me,bt.data("type"),ev)}),btn.click(function(){me._onButtonClick(me.$options.buttons[type],type)}),btn},_onButtonClick:function(buttonOptions,type){var me=this;("ok"===type&&"prompt"===me.$type&&me.isValid()||"prompt"!==me.$type||"ok"!==type)&&buttonOptions&&buttonOptions.closeOnClick&&me.destroy()},_generateButtons:function(){var me=this,btns=[];for(var i in me.$options.buttons)if(me.$options.buttons.hasOwnProperty(i)){var op=me.$options.buttons[i],btn=me._createButton(i,op);btns.push(btn)}return btns},_createMarkup:function(){var me=this,lobibox=$('
    ');lobibox.attr("data-is-modal",me.$options.modal);var header=$('
    ').append(''),body=$('
    ');if(lobibox.append(header),lobibox.append(body),me.$options.buttons&&!$.isEmptyObject(me.$options.buttons)){var footer=$('
    ');footer.append(me._generateButtons()),lobibox.append(footer),Lobibox.base.OPTIONS.buttonsAlign.indexOf(me.$options.buttonsAlign)>-1&&footer.addClass("text-"+me.$options.buttonsAlign)}me.$el=lobibox.addClass(Lobibox.base.OPTIONS.modalClasses[me.$type])},_setSize:function(){var me=this;me.setWidth(me.$options.width),me.setHeight("auto"===me.$options.height?me.$el.outerHeight():me.$options.height)},_calculateBodyHeight:function(height){var me=this,headerHeight=me.$el.find(".lobibox-header").outerHeight(),footerHeight=me.$el.find(".lobibox-footer").outerHeight();return height-(headerHeight?headerHeight:0)-(footerHeight?footerHeight:0)},_addBackdrop:function(){0===$(".lobibox-backdrop").length&&$("body").append('
    ')},_triggerEvent:function(type){var me=this;me.$options[type]&&"function"==typeof me.$options[type]&&me.$options[type](me)},_calculateWidth:function(width){var me=this;return width=Math.min(Math.max(width,me.$options.width),$(window).outerWidth()),width===$(window).outerWidth()&&(width-=2*me.$options.horizontalOffset),width},_calculateHeight:function(height){var me=this;return console.log(me.$options.height),height=Math.min(Math.max(height,me.$options.height),$(window).outerHeight()),height===$(window).outerHeight()&&(height-=2*me.$options.verticalOffset),height},_addCloseButton:function(){var me=this,closeBtn=$('×');me.$el.find(".lobibox-header").append(closeBtn),closeBtn.on("mousedown",function(ev){ev.stopPropagation()}),closeBtn.on("click.lobibox",function(){me.destroy()})},_position:function(){var me=this;me._setSize();var pos=me._calculatePosition();me.setPosition(pos.left,pos.top)},_isMobileScreen:function(){return $(window).outerWidth()<768},_enableDrag:function(){var el=this.$el,heading=el.find(".lobibox-header");heading.on("mousedown.lobibox",function(ev){el.attr("offset-left",ev.offsetX),el.attr("offset-top",ev.offsetY),el.attr("allow-drag","true")}),$(document).on("mouseup.lobibox",function(){el.attr("allow-drag","false")}),$(document).on("mousemove.lobibox",function(ev){if("true"===el.attr("allow-drag")){var left=ev.clientX-parseInt(el.attr("offset-left"),10)-parseInt(el.css("border-left-width"),10),top=ev.clientY-parseInt(el.attr("offset-top"),10)-parseInt(el.css("border-top-width"),10);el.css({left:left,top:top})}})},_setContent:function(msg){var me=this;return me.$el.find(".lobibox-body").html(msg),me},_beforeShow:function(){var me=this;me._triggerEvent("onShow")},_afterShow:function(){var me=this;Lobibox.counter++,me.$el.attr("data-nth",Lobibox.counter),me.$options.draggable||$(window).on("resize.lobibox-"+me.$el.attr("data-nth"),function(){me.refreshWidth(),me.refreshHeight(),me.$el.css("left","50%").css("margin-left","-"+me.$el.width()/2+"px"),me.$el.css("top","50%").css("margin-top","-"+me.$el.height()/2+"px")}),me._triggerEvent("shown")},_beforeClose:function(){var me=this;me._triggerEvent("beforeClose")},_afterClose:function(){var me=this;me.$options.draggable||$(window).off("resize.lobibox-"+me.$el.attr("data-nth")),me._triggerEvent("closed")},hide:function(){function callback(){me.$el.addClass("lobibox-hidden"),0===$(".lobibox[data-is-modal=true]:not(.lobibox-hidden)").length&&($(".lobibox-backdrop").remove(),$("body").removeClass(Lobibox.base.OPTIONS.bodyClass))}var me=this;return me.$options.hideClass?(me.$el.removeClass(me.$options.showClass),me.$el.addClass(me.$options.hideClass),setTimeout(function(){callback()},me.$options.delayToRemove)):callback(),this},destroy:function(){function callback(){me.$el.remove(),0===$(".lobibox[data-is-modal=true]").length&&($(".lobibox-backdrop").remove(),$("body").removeClass(Lobibox.base.OPTIONS.bodyClass)),me._afterClose()}var me=this;return me._beforeClose(),me.$options.hideClass?(me.$el.removeClass(me.$options.showClass).addClass(me.$options.hideClass),setTimeout(function(){callback()},me.$options.delayToRemove)):callback(),this},setWidth:function(width){var me=this;return me.$el.css("width",me._calculateWidth(width)),me},refreshWidth:function(){this.setWidth(this.$el.width())},refreshHeight:function(){this.setHeight(this.$el.height())},setHeight:function(height){var me=this;return me.$el.css("height",me._calculateHeight(height)).find(".lobibox-body").css("height",me._calculateBodyHeight(me.$el.innerHeight())),me},setSize:function(width,height){var me=this;return me.setWidth(width),me.setHeight(height),me},setPosition:function(left,top){var pos;return"number"==typeof left&&"number"==typeof top?pos={left:left,top:top}:"string"==typeof left&&(pos=this._calculatePosition(left)),this.$el.css(pos),this},setTitle:function(title){return this.$el.find(".lobibox-title").html(title)},getTitle:function(){return this.$el.find(".lobibox-title").html()},show:function(){var me=this,$body=$("body");if(me._beforeShow(),me.$el.removeClass("lobibox-hidden"),$body.append(me.$el),me.$options.buttons){var buttons=me.$el.find(".lobibox-footer").children();buttons[0].focus()}return me.$options.modal&&($body.addClass(Lobibox.base.OPTIONS.bodyClass),me._addBackdrop()),me.$options.delay!==!1&&setTimeout(function(){me.destroy()},me.$options.delay),me._afterShow(),me}};Lobibox.base={},Lobibox.base.OPTIONS={bodyClass:"lobibox-open",modalClasses:{error:"lobibox-error",success:"lobibox-success",info:"lobibox-info",warning:"lobibox-warning",confirm:"lobibox-confirm",progress:"lobibox-progress",prompt:"lobibox-prompt","default":"lobibox-default",window:"lobibox-window"},buttonsAlign:["left","center","right"],buttons:{ok:{"class":"lobibox-btn lobibox-btn-default",text:"OK",closeOnClick:!0},cancel:{"class":"lobibox-btn lobibox-btn-cancel",text:"Cancel",closeOnClick:!0},yes:{"class":"lobibox-btn lobibox-btn-yes",text:"Yes",closeOnClick:!0},no:{"class":"lobibox-btn lobibox-btn-no",text:"No",closeOnClick:!0}},icons:{bootstrap:{confirm:"glyphicon glyphicon-question-sign",success:"glyphicon glyphicon-ok-sign",error:"glyphicon glyphicon-remove-sign",warning:"glyphicon glyphicon-exclamation-sign",info:"glyphicon glyphicon-info-sign"},fontAwesome:{confirm:"fa fa-question-circle",success:"fa fa-check-circle",error:"fa fa-times-circle",warning:"fa fa-exclamation-circle",info:"fa fa-info-circle"}}},Lobibox.base.DEFAULTS={horizontalOffset:5,verticalOffset:5,width:600,height:"auto",closeButton:!0,draggable:!1,customBtnClass:"lobibox-btn lobibox-btn-default",modal:!0,debug:!1,buttonsAlign:"center",closeOnEsc:!0,delayToRemove:200,delay:!1,baseClass:"animated-super-fast",showClass:"zoomIn",hideClass:"zoomOut",iconSource:"bootstrap",onShow:null,shown:null,beforeClose:null,closed:null},LobiboxPrompt.prototype=$.extend({},LobiboxBase,{constructor:LobiboxPrompt,_processInput:function(options){var me=this,mergedOptions=LobiboxBase._processInput.call(me,options);return mergedOptions.buttons={ok:Lobibox.base.OPTIONS.buttons.ok,cancel:Lobibox.base.OPTIONS.buttons.cancel},options=$.extend({},mergedOptions,LobiboxPrompt.DEFAULT_OPTIONS,options)},_init:function(){var me=this;LobiboxBase._init.call(me),me.show()},_afterShow:function(){var me=this;me._setContent(me._createInput())._position(),me.$input.focus(),LobiboxBase._afterShow.call(me)},_createInput:function(){var label,me=this;return me.$input=me.$options.multiline?$("").attr("rows",me.$options.lines):$(''),me.$input.addClass("lobibox-input").attr(me.$options.attrs),me.$options.value&&me.setValue(me.$options.value),me.$options.label&&(label=$("")),$("
    ").append(label,me.$input)},setValue:function(val){return this.$input.val(val),this},getValue:function(){return this.$input.val()},isValid:function(){var me=this,$error=me.$el.find(".lobibox-input-error-message");return me.$options.required&&!me.getValue()?(me.$input.addClass("invalid"),0===$error.length&&(me.$el.find(".lobibox-body").append('

    '+me.$options.errorMessage+"

    "),me._position(),me.$input.focus()),!1):(me.$input.removeClass("invalid"),$error.remove(),me._position(),me.$input.focus(),!0)}}),LobiboxPrompt.DEFAULT_OPTIONS={width:400,attrs:{},value:"",multiline:!1,lines:3,type:"text",label:"",required:!0,errorMessage:"The field is required"},LobiboxConfirm.prototype=$.extend({},LobiboxBase,{constructor:LobiboxConfirm,_processInput:function(options){var me=this,mergedOptions=LobiboxBase._processInput.call(me,options);return mergedOptions.buttons={yes:Lobibox.base.OPTIONS.buttons.yes,no:Lobibox.base.OPTIONS.buttons.no},options=$.extend({},mergedOptions,Lobibox.confirm.DEFAULTS,options)},_init:function(){var me=this;LobiboxBase._init.call(me),me.show()},_afterShow:function(){var me=this,d=$("
    ");me.$options.iconClass&&d.append($('
    ').append('')),d.append('
    '+me.$options.msg+"
    "),me._setContent(d.html()),me._position(),LobiboxBase._afterShow.call(me)}}),Lobibox.confirm.DEFAULTS={title:"Question",width:500},LobiboxAlert.prototype=$.extend({},LobiboxBase,{constructor:LobiboxAlert,_processInput:function(options){var me=this,mergedOptions=LobiboxBase._processInput.call(me,options);return mergedOptions.buttons={ok:Lobibox.base.OPTIONS.buttons.ok},options=$.extend({},mergedOptions,Lobibox.alert.OPTIONS[me.$type],Lobibox.alert.DEFAULTS,options)},_init:function(){var me=this;LobiboxBase._init.call(me),me.show()},_afterShow:function(){var me=this,d=$("
    ");me.$options.iconClass&&d.append($('
    ').append('')),d.append('
    '+me.$options.msg+"
    "),me._setContent(d.html()),me._position(),LobiboxBase._afterShow.call(me)}}),Lobibox.alert.OPTIONS={warning:{title:"Warning"},info:{title:"Information"},success:{title:"Success"},error:{title:"Error"}},Lobibox.alert.DEFAULTS={},LobiboxProgress.prototype=$.extend({},LobiboxBase,{constructor:LobiboxProgress,_processInput:function(options){var me=this,mergedOptions=LobiboxBase._processInput.call(me,options);return options=$.extend({},mergedOptions,Lobibox.progress.DEFAULTS,options)},_init:function(){var me=this;LobiboxBase._init.call(me),me.show()},_afterShow:function(){var me=this;me.$progressBarElement=me.$options.progressTpl?$(me.$options.progressTpl):me._createProgressbar();var label;me.$options.label&&(label=$(""));var innerHTML=$("
    ").append(label,me.$progressBarElement);me._setContent(innerHTML),me._position(),LobiboxBase._afterShow.call(me)},_createProgressbar:function(){var me=this,outer=$('
    ').append('
    ');return me.$options.showProgressLabel&&outer.append(''),outer},setProgress:function(progress){var me=this;if(100!==me.$progress)return progress=Math.min(100,Math.max(0,progress)),me.$progress=progress,me._triggerEvent("progressUpdated"),100===me.$progress&&me._triggerEvent("progressCompleted"),me.$el.find(".lobibox-progress-element").css("width",progress.toFixed(1)+"%"),me.$el.find('[data-role="progress-text"]').html(progress.toFixed(1)+"%"),me},getProgress:function(){return this.$progress}}),Lobibox.progress.DEFAULTS={width:500,showProgressLabel:!0,label:"",progressTpl:!1,progressUpdated:null,progressCompleted:null},LobiboxWindow.prototype=$.extend({},LobiboxBase,{constructor:LobiboxWindow,_processInput:function(options){var me=this,mergedOptions=LobiboxBase._processInput.call(me,options);return options.content&&"function"==typeof options.content&&(options.content=options.content()),options.content instanceof jQuery&&(options.content=options.content.clone()),options=$.extend({},mergedOptions,Lobibox.window.DEFAULTS,options)},_init:function(){var me=this;LobiboxBase._init.call(me),me.setContent(me.$options.content),me.$options.url&&me.$options.autoload?(me.$options.showAfterLoad||me.show(),me.load(function(){me.$options.showAfterLoad&&me.show()})):me.show()},_afterShow:function(){var me=this;me._position(),LobiboxBase._afterShow.call(me)},setParams:function(params){var me=this;return me.$options.params=params,me},getParams:function(){var me=this;return me.$options.params},setLoadMethod:function(method){var me=this;return me.$options.loadMethod=method,me},getLoadMethod:function(){var me=this;return me.$options.loadMethod},setContent:function(content){var me=this;return me.$options.content=content,me.$el.find(".lobibox-body").html("").append(content),me},getContent:function(){var me=this;return me.$options.content},setUrl:function(url){return this.$options.url=url,this},getUrl:function(){return this.$options.url},load:function(callback){var me=this;return me.$options.url?($.ajax(me.$options.url,{method:me.$options.loadMethod,data:me.$options.params}).done(function(res){me.setContent(res),callback&&"function"==typeof callback&&callback(res)}),me):me}}),Lobibox.window.DEFAULTS={width:480,height:600,content:"",url:"",draggable:!0,autoload:!0,loadMethod:"GET",showAfterLoad:!0,params:{}}}(); -------------------------------------------------------------------------------- /lib/lobibox/js/notifications.js: -------------------------------------------------------------------------------- 1 | //Author : @arboshiki 2 | /** 3 | * Generates random string of n length. 4 | * String contains only letters and numbers 5 | * 6 | * @param {int} n 7 | * @returns {String} 8 | */ 9 | Math.randomString = function (n) { 10 | var text = ""; 11 | var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; 12 | 13 | for (var i = 0; i < n; i++) 14 | text += possible.charAt(Math.floor(Math.random() * possible.length)); 15 | 16 | return text; 17 | }; 18 | var Lobibox = Lobibox || {}; 19 | (function () { 20 | 21 | var LobiboxNotify = function (type, options) { 22 | //------------------------------------------------------------------------------ 23 | //----------------PROTOTYPE VARIABLES------------------------------------------- 24 | //------------------------------------------------------------------------------ 25 | this.$type = null; 26 | this.$options = null; 27 | this.$el = null; 28 | //------------------------------------------------------------------------------ 29 | //-----------------PRIVATE VARIABLES-------------------------------------------- 30 | //------------------------------------------------------------------------------ 31 | var me = this; 32 | //------------------------------------------------------------------------------ 33 | //-----------------PRIVATE FUNCTIONS-------------------------------------------- 34 | //------------------------------------------------------------------------------ 35 | var _processInput = function (options) { 36 | 37 | if (options.size === 'mini' || options.size === 'large') { 38 | options = $.extend({}, Lobibox.notify.OPTIONS[options.size], options); 39 | } 40 | options = $.extend({}, Lobibox.notify.OPTIONS[me.$type], Lobibox.notify.DEFAULTS, options); 41 | 42 | if (options.size !== 'mini' && options.title === true) { 43 | options.title = Lobibox.notify.OPTIONS[me.$type].title; 44 | } else if (options.size === 'mini' && options.title === true) { 45 | options.title = false; 46 | } 47 | if (options.icon === true) { 48 | options.icon = Lobibox.notify.OPTIONS.icons[options.iconSource][me.$type]; 49 | } 50 | if (options.sound === true) { 51 | options.sound = Lobibox.notify.OPTIONS[me.$type].sound; 52 | } 53 | if (options.sound) { 54 | options.sound = options.soundPath + options.sound + options.soundExt; 55 | } 56 | return options; 57 | }; 58 | var _init = function () { 59 | // Create notification 60 | var $notify = _createNotify(); 61 | if (me.$options.size === 'mini'){ 62 | $notify.addClass('notify-mini'); 63 | } 64 | 65 | if (typeof me.$options.position === 'string'){ 66 | var $wrapper = _createNotifyWrapper(); 67 | _appendInWrapper($notify, $wrapper); 68 | if ($wrapper.hasClass('center')){ 69 | $wrapper.css('margin-left', '-'+($wrapper.width()/2)+"px"); 70 | } 71 | } else { 72 | $('body').append($notify); 73 | $notify.css({ 74 | 'position': 'fixed', 75 | left: me.$options.position.left, 76 | top: me.$options.position.top, 77 | }) 78 | } 79 | 80 | me.$el = $notify; 81 | if (me.$options.sound) { 82 | var snd = new Audio(me.$options.sound); // buffers automatically when created 83 | snd.play(); 84 | } 85 | if (me.$options.rounded){ 86 | me.$el.addClass('rounded'); 87 | } 88 | }; 89 | var _appendInWrapper = function ($el, $wrapper) { 90 | if (me.$options.size === 'normal') { 91 | if ($wrapper.hasClass('bottom')){ 92 | $wrapper.prepend($el); 93 | } else { 94 | $wrapper.append($el); 95 | } 96 | 97 | } else if (me.$options.size === 'mini') { 98 | if ($wrapper.hasClass('bottom')){ 99 | $wrapper.prepend($el); 100 | } else { 101 | $wrapper.append($el); 102 | } 103 | } else if (me.$options.size === 'large') { 104 | var tabPane = _createTabPane().append($el); 105 | var $li = _createTabControl(tabPane.attr('id')); 106 | $wrapper.find('.lb-notify-wrapper').append(tabPane); 107 | $wrapper.find('.lb-notify-tabs').append($li); 108 | _activateTab($li); 109 | $li.find('>a').click(function () { 110 | _activateTab($li); 111 | }); 112 | } 113 | }; 114 | var _activateTab = function ($li) { 115 | $li.closest('.lb-notify-tabs').find('>li').removeClass('active'); 116 | $li.addClass('active'); 117 | var $current = $($li.find('>a').attr('href')); 118 | $current.closest('.lb-notify-wrapper').find('>.lb-tab-pane').removeClass('active'); 119 | $current.addClass('active') 120 | }; 121 | var _createTabControl = function (tabPaneId) { 122 | var $li = $('
  • ', { 123 | 'class': Lobibox.notify.OPTIONS[me.$type]['class'] 124 | }); 125 | $('', { 126 | 'href': '#' + tabPaneId 127 | }).append('') 128 | .appendTo($li); 129 | return $li; 130 | }; 131 | var _createTabPane = function () { 132 | return $('
    ', { 133 | 'class': 'lb-tab-pane', 134 | 'id': Math.randomString(10) 135 | }) 136 | }; 137 | var _createNotifyWrapper = function () { 138 | var selector = (me.$options.size === 'large' ? '.lobibox-notify-wrapper-large' : '.lobibox-notify-wrapper') 139 | + "." + me.$options.position.replace(/\s/gi, '.'), 140 | $wrapper; 141 | 142 | //var classes = me.$options.position.split(" "); 143 | $wrapper = $(selector); 144 | if ($wrapper.length === 0) { 145 | $wrapper = $('
    ') 146 | .addClass(selector.replace(/\./g, ' ').trim()) 147 | .appendTo($('body')); 148 | if (me.$options.size === 'large') { 149 | $wrapper.append($('
      ')) 150 | .append($('
      ')); 151 | } 152 | } 153 | return $wrapper; 154 | }; 155 | var _createNotify = function () { 156 | var OPTS = Lobibox.notify.OPTIONS, 157 | $iconEl, 158 | $innerIconEl, 159 | $iconWrapper, 160 | $body, 161 | $msg, 162 | $notify = $('
      ', { 163 | 'class': 'lobibox-notify ' + OPTS[me.$type]['class'] + ' ' + OPTS['class'] + ' ' + me.$options.showClass 164 | }); 165 | 166 | $iconWrapper = $('
      ').appendTo($notify); 167 | $iconEl = $('
      ').appendTo($iconWrapper); 168 | $innerIconEl = $('
      ').appendTo($iconEl); 169 | 170 | // Add image or icon depending on given parameters 171 | if (me.$options.img) { 172 | $innerIconEl.append(''); 173 | } else if (me.$options.icon) { 174 | $innerIconEl.append('
      '); 175 | } else { 176 | $notify.addClass('without-icon'); 177 | } 178 | // Create body, append title and message in body and append body in notification 179 | $msg = $('
      ' + me.$options.msg + '
      '); 180 | 181 | if (me.$options.messageHeight !== false){ 182 | $msg.css('max-height', me.$options.messageHeight); 183 | } 184 | 185 | $body = $('
      ', { 186 | 'class': 'lobibox-notify-body' 187 | }).append($msg).appendTo($notify); 188 | 189 | if (me.$options.title) { 190 | $body.prepend('
      ' + me.$options.title + '
      '); 191 | } 192 | _addCloseButton($notify); 193 | if (me.$options.size === 'normal' || me.$options.size === 'mini') { 194 | _addCloseOnClick($notify); 195 | _addDelay($notify); 196 | } 197 | 198 | // Give width to notification 199 | if (me.$options.width) { 200 | $notify.css('width', _calculateWidth(me.$options.width)); 201 | } 202 | 203 | return $notify; 204 | }; 205 | var _addCloseButton = function ($el) { 206 | if (!me.$options.closable) { 207 | return; 208 | } 209 | $('×').click(function () { 210 | me.remove(); 211 | }).appendTo($el); 212 | }; 213 | var _addCloseOnClick = function ($el) { 214 | if (!me.$options.closeOnClick) { 215 | return; 216 | } 217 | $el.click(function () { 218 | me.remove(); 219 | }); 220 | }; 221 | var _addDelay = function ($el) { 222 | if (!me.$options.delay) { 223 | return; 224 | } 225 | if (me.$options.delayIndicator) { 226 | var delay = $('
      '); 227 | $el.append(delay); 228 | } 229 | var time = 0; 230 | var interval = 1000 / 30; 231 | var timer = setInterval(function () { 232 | time += interval; 233 | var width = 100 * time / me.$options.delay; 234 | if (width >= 100) { 235 | width = 100; 236 | me.remove(); 237 | timer = clearInterval(timer); 238 | } 239 | if (me.$options.delayIndicator) { 240 | delay.find('div').css('width', width + "%"); 241 | } 242 | 243 | }, interval); 244 | }; 245 | var _findTabToActivate = function ($li) { 246 | var $itemToActivate = $li.prev(); 247 | if ($itemToActivate.length === 0) { 248 | $itemToActivate = $li.next(); 249 | } 250 | if ($itemToActivate.length === 0) { 251 | return null; 252 | } 253 | return $itemToActivate; 254 | }; 255 | var _calculateWidth = function (width) { 256 | width = Math.min($(window).outerWidth(), width); 257 | return width; 258 | }; 259 | //------------------------------------------------------------------------------ 260 | //----------------PROTOTYPE FUNCTIONS------------------------------------------- 261 | //------------------------------------------------------------------------------ 262 | /** 263 | * Delete the notification 264 | * 265 | * @returns {LobiboxNotify} 266 | */ 267 | this.remove = function () { 268 | me.$el.removeClass(me.$options.showClass) 269 | .addClass(me.$options.hideClass); 270 | var parent = me.$el.parent(); 271 | var wrapper = parent.closest('.lobibox-notify-wrapper-large'); 272 | 273 | var href = '#' + parent.attr('id'); 274 | 275 | var $li = wrapper.find('>.lb-notify-tabs>li:has(a[href="' + href + '"])'); 276 | $li.addClass(Lobibox.notify.OPTIONS['class']) 277 | .addClass(me.$options.hideClass); 278 | setTimeout(function () { 279 | if (me.$options.size === 'normal' || me.$options.size === 'mini') { 280 | me.$el.remove(); 281 | } else if (me.$options.size === 'large') { 282 | 283 | var $newLi = _findTabToActivate($li); 284 | if ($newLi) { 285 | _activateTab($newLi); 286 | } 287 | $li.remove(); 288 | parent.remove(); 289 | } 290 | }, 500); 291 | return me; 292 | }; 293 | //------------------------------------------------------------------------------ 294 | //------------------------------------------------------------------------------ 295 | //------------------------------------------------------------------------------ 296 | this.$type = type; 297 | this.$options = _processInput(options); 298 | _init(); 299 | }; 300 | 301 | Lobibox.notify = function (type, options) { 302 | if (["default", "info", "warning", "error", "success"].indexOf(type) > -1) { 303 | var lobibox = new LobiboxNotify(type, options); 304 | lobibox.$el.data('lobibox', lobibox); 305 | return lobibox; 306 | } 307 | }; 308 | Lobibox.notify.closeAll = function(){ 309 | var ll = $('.lobibox-notify'); 310 | ll.each(function(ind, el){ 311 | var notify =$(el).data('lobibox') .remove(); 312 | }); 313 | }; 314 | //User can set default options to this variable 315 | Lobibox.notify.DEFAULTS = { 316 | title: true, // Title of notification. If you do not include the title in options it will automatically takes its value 317 | //from Lobibox.notify.OPTIONS object depending of the type of the notifications or set custom string. Set this false to disable title 318 | size: 'normal', // normal, mini, large 319 | soundPath: 'sounds/', // The folder path where sounds are located 320 | soundExt: '.ogg', // Default extension for all sounds 321 | showClass: 'fadeInDown', // Show animation class. 322 | hideClass: 'zoomOut', // Hide animation class. 323 | icon: true, // Icon of notification. Leave as is for default icon or set custom string 324 | msg: '', // Message of notification 325 | img: null, // Image source string 326 | closable: true, // Make notifications closable 327 | hideCloseButton: false, // Notification may be closable but you can hide close button and it will be closed by clicking on notification itsef 328 | delay: 5000, // Hide notification after this time (in miliseconds) 329 | delayIndicator: true, // Show timer indicator 330 | closeOnClick: true, // Close notifications by clicking on them 331 | width: 400, // Width of notification box 332 | sound: true, // Sound of notification. Set this false to disable sound. Leave as is for default sound or set custom soud path 333 | // Place to show notification. Available options: "top left", "top right", "bottom left", "bottom right", "center top", "center bottom" 334 | // It can also be object {left: number, top: number} to position notification at any place 335 | position: "bottom right", 336 | iconSource: 'bootstrap', // "bootstrap" or "fontAwesome" the library which will be used for icons 337 | rounded: false, // Whether to make notification corners rounded 338 | messageHeight: 60 // Notification message maximum height 339 | }; 340 | //This variable is necessary. 341 | Lobibox.notify.OPTIONS = { 342 | 'class': 'animated-fast', 343 | large: { 344 | width: 500, 345 | messageHeight: 96 346 | }, 347 | mini: { 348 | 'class': 'notify-mini', 349 | messageHeight: 32 350 | }, 351 | default: { 352 | 'class': 'lobibox-notify-default', 353 | 'title': 'Default', 354 | sound: false 355 | }, 356 | success: { 357 | 'class': 'lobibox-notify-success', 358 | 'title': 'Success', 359 | sound: 'sound2' 360 | }, 361 | error: { 362 | 'class': 'lobibox-notify-error', 363 | 'title': 'Error', 364 | sound: 'sound4' 365 | }, 366 | warning: { 367 | 'class': 'lobibox-notify-warning', 368 | 'title': 'Warning', 369 | sound: 'sound5' 370 | }, 371 | info: { 372 | 'class': 'lobibox-notify-info', 373 | 'title': 'Information', 374 | sound: 'sound6' 375 | }, 376 | icons: { 377 | bootstrap: { 378 | success: 'glyphicon glyphicon-ok-sign', 379 | error: 'glyphicon glyphicon-remove-sign', 380 | warning: 'glyphicon glyphicon-exclamation-sign', 381 | info: 'glyphicon glyphicon-info-sign' 382 | }, 383 | fontAwesome: { 384 | success: 'fa fa-check-circle', 385 | error: 'fa fa-times-circle', 386 | warning: 'fa fa-exclamation-circle', 387 | info: 'fa fa-info-circle' 388 | } 389 | } 390 | }; 391 | })(); 392 | 393 | 394 | -------------------------------------------------------------------------------- /dist/lobilist.min.js: -------------------------------------------------------------------------------- 1 | $(function(){var t=function(t,e){this.$lobiList=t,this.$options=e,this.$globalOptions=t.$options,this.$items={},this._init()};t.prototype={$lobiList:null,$el:null,$elWrapper:null,$options:{},$items:{},$globalOptions:{},$ul:null,$header:null,$title:null,$form:null,$footer:null,$body:null,$hasGeneratedId:!1,storageObject:null,eventsSuppressed:!1,isStateful:function(){return!!this.$el.attr("id")&&this.$lobiList.storageObject},_init:function(){this.suppressEvents(),this.$options.id||(this.$options.id=this.$lobiList.getNextListId(),this.$hasGeneratedId=!0),this.$elWrapper=$('
      '),this.$el=$('
      ').appendTo(this.$elWrapper),this.$hasGeneratedId||this.$el.attr("data-db-id",this.$options.id),this.isStateful()&&(this.$options.title=void 0===this.getSavedProperty("title")?this.$options.title:this.getSavedProperty("title"),this.$options.defaultStyle=void 0===this.getSavedProperty("style")?this.$options.defaultStyle:this.getSavedProperty("style")),this.$options.defaultStyle&&this.$el.addClass(this.$options.defaultStyle),this.$header=this._createHeader(),this.$title=this._createTitle(),this.$body=this._createBody(),this.$ul=this._createList(),this.$options.items&&this._createItems(this.$options.items),this.$form=this._createForm(),this.$body.append(this.$ul,this.$form),this.$footer=this._createFooter(),this.$globalOptions.sortable&&this._enableSorting(),this.resumeEvents()},getSavedProperty:function(t){return this.isStateful()?this.$lobiList.storageObject.getListProperty(this.$lobiList.getId(),this.getId(),t):(console.error("object is not stateful"),!1)},saveProperty:function(t,e){return this.isStateful()?this.$lobiList.storageObject.setListProperty(this.$lobiList.getId(),this.getId(),t,e):(console.error("object is not stateful"),!1)},addItem:function(t,e){var i=this;return!1===i._triggerEvent("beforeItemAdd",[i,t])?i:(t=i._processItemData(t),i.$globalOptions.actions.insert?$.ajax(i.$globalOptions.actions.insert,{data:t,method:"POST"}).done(function(s){s.success?(t.id=s.id,i._addItemToList(t)):e&&"function"==typeof e&&e(s)}):(t.id=i.$lobiList.getNextId(),i._addItemToList(t)),i)},updateItem:function(t,e){var i=this;return!1===i._triggerEvent("beforeItemUpdate",[i,t])?i:(i.$globalOptions.actions.update?$.ajax(i.$globalOptions.actions.update,{data:t,method:"POST"}).done(function(s){s.success?i._updateItemInList(t):e&&"function"==typeof e&&e(s)}):i._updateItemInList(t),i)},deleteItem:function(t,e){var i=this;return!1===i._triggerEvent("beforeItemDelete",[i,t])?i:i.$globalOptions.actions.delete?i._sendAjax(i.$globalOptions.actions.delete,{data:t,method:"POST"}).done(function(s){s.success?i._removeItemFromList(t):e&&"function"==typeof e&&e(s)}):(i._removeItemFromList(t),i)},saveOrUpdateItem:function(t,e){return t.id?this.updateItem(t,e):this.addItem(t,e),this},startTitleEditing:function(){var t=this._createInput();return this.$title.attr("data-old-title",this.$title.html()),t.val(this.$title.html()),t.insertAfter(this.$title),this.$title.addClass("hide"),this.$header.addClass("title-editing"),t[0].focus(),t[0].select(),this},finishTitleEditing:function(){var t=this.$header.find("input"),e=this.$title.attr("data-old-title");return this.$title.html(t.val()).removeClass("hide").removeAttr("data-old-title"),this.isStateful()&&this.saveProperty("title",t.val()),t.remove(),this.$header.removeClass("title-editing"),this._triggerEvent("titleChange",[this,e,t.val()]),this},cancelTitleEditing:function(){var t=this.$header.find("input");return 0===t.length?this:(this.$title.html(this.$title.attr("data-old-title")).removeClass("hide"),t.remove(),this.$header.removeClass("title-editing"),this)},remove:function(){return this.$lobiList.$lists.splice(this.$el.index(),1),this.$elWrapper.remove(),this},editItem:function(t){var e=this.$lobiList.$el.find("li[data-id="+t+"]"),i=e.closest(".lobilist").find(".lobilist-add-todo-form").removeClass("hide");e.closest(".lobilist").find(".lobilist-footer").addClass("hide");var s=e.data("lobiListItem");for(var o in s)i[0][o]&&(i[0][o].value=s[o]);return this},getPosition:function(){return this.$elWrapper.index()},getId:function(){return this.$options.id},setId:function(t){return this.$el.attr("id",t),this.$options.id=t,this.$el.attr("data-db-id",this.$options.id),this},getItemPositions:function(){var t={};return this.$el.find(".lobilist-item").each(function(e,i){var s=$(i);t[s.attr("data-id")]=s.index()+1}),t},getTitle:function(){return this.$title.html()},getStyle:function(){for(var t=this.$el[0].className.split(/\s+/),e=0;e-1)return t[e];return null},suppressEvents:function(){return this.eventsSuppressed=!0,this},resumeEvents:function(){return this.eventsSuppressed=!1,this},_processItemData:function(t){return t.listId=this.$options.id,$.extend({},this.$globalOptions.itemOptions,t)},_createHeader:function(){var t=$("
      ",{class:"lobilist-header"}),e=$("
      ",{class:"lobilist-actions"}).appendTo(t);return this.$options.controls&&this.$options.controls.length>0&&(this.$options.controls.indexOf("styleChange")>-1&&e.append(this._createDropdownForStyleChange()),this.$options.controls.indexOf("edit")>-1&&(e.append(this._createEditTitleButton()),e.append(this._createFinishTitleEditing()),e.append(this._createCancelTitleEditing())),this.$options.controls.indexOf("add")>-1&&e.append(this._createAddNewButton()),this.$options.controls.indexOf("remove")>-1&&e.append(this._createCloseButton())),this.$el.append(t),t},_createTitle:function(){var t=this,e=$("
      ",{class:"lobilist-title",html:t.$options.title}).appendTo(t.$header);return t.$options.controls&&t.$options.controls.indexOf("edit")>-1&&e.on("dblclick",function(){t.startTitleEditing()}),e},_createBody:function(){return $("
      ",{class:"lobilist-body"}).appendTo(this.$el)},_createForm:function(){var t=this,e=$("
      ",{class:"lobilist-add-todo-form hide"});$('').appendTo(e),$('
      ').append($("",{type:"text",name:"title",class:"form-control",placeholder:"TODO title"})).appendTo(e),$('
      ').append($("