tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

datepicker working

Browse Source
This commit is contained in:
Micha 2025-03-09 12:19:33 +01:00
parent 8d6ea5e084
commit fa96bccbf3
33 changed files with 37966 additions and 7024 deletions

15
Gruntfile.js

@ -32,7 +32,7 @@ function getFiles() {
form: [forms+'editable-form-bootstrap3.js'], form: [forms+'editable-form-bootstrap3.js'],
container: [containers+'editable-popover3.js'], container: [containers+'editable-popover3.js'],
inputs: [ inputs: [
inputs+'date/bootstrap-datepicker/js/bootstrap-datepicker.js', // inputs+'date/bootstrap-datepicker/js/bootstrap-datepicker.js',
inputs+'date/date.js', inputs+'date/date.js',
inputs+'date/datefield.js', inputs+'date/datefield.js',
inputs+'datetime/datetime.js', inputs+'datetime/datetime.js',
@ -49,7 +49,7 @@ function getFiles() {
] ]
}, },
bootstrap5: { bootstrap5: {
filePrefix: 'bootstrap', //to have bootstrap-editable.js instead of bootstrap3-editable filePrefix: 'bootstrap', //to have bootstrap-editable.js instead of bootstrap5-editable
form: [forms+'editable-form-bootstrap5.js'], form: [forms+'editable-form-bootstrap5.js'],
container: [containers+'editable-popover5.js'], container: [containers+'editable-popover5.js'],
inputs: [ inputs: [
@ -197,7 +197,7 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'), pkg: grunt.file.readJSON('package.json'),
dist: 'dist', dist: 'dist',
clean: ['<%= dist %>'], // clean: ['<%= dist %>'],
concat: files.concat_files, concat: files.concat_files,
@ -267,7 +267,8 @@ module.exports = function(grunt) {
browser: true, browser: true,
evil: false, evil: false,
globals: { globals: {
jQuery: true jQuery: true,
console: true
}, },
}, },
js: [ 'Gruntfile.js', js: [ 'Gruntfile.js',
@ -333,8 +334,10 @@ module.exports = function(grunt) {
grunt.registerTask('testover', ['jshint', 'connect', 'qunit:testover']); grunt.registerTask('testover', ['jshint', 'connect', 'qunit:testover']);
// Default task. // Default task.
grunt.registerTask('default', ['clean', 'jshint', 'concat', 'uglify', 'copy']); // fixme clean on real build
// grunt.registerTask('default', ['clean', 'jshint', 'concat', 'uglify', 'copy']);
grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'copy']);
// alive server // alive server
grunt.registerTask('server', 'connect:server:keepalive'); grunt.registerTask('server', 'connect:server:keepalive');

24853
dist/app.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/app.js.map vendored Normal file

File diff suppressed because one or more lines are too long

450
dist/bootstrap-editable/css/bootstrap-editable.css vendored

@ -222,453 +222,3 @@ a.editable-click.editable-disabled:hover {
display:inline-block; display:inline-block;
} }
/*!
* Datepicker for Bootstrap
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.datepicker {
padding: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
/*.dow {
border-top: 1px solid #ddd !important;
}*/
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.datepicker > div {
display: none;
}
.datepicker.days div.datepicker-days {
display: block;
}
.datepicker.months div.datepicker-months {
display: block;
}
.datepicker.years div.datepicker-years {
display: block;
}
.datepicker table {
margin: 0;
}
.datepicker td,
.datepicker th {
text-align: center;
width: 20px;
height: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover {
background: #eeeeee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
background-image: linear-gradient(top, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eeeeee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
background-image: linear-gradient(top, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
background-image: -o-linear-gradient(top, #b3b3b3, #808080);
background-image: linear-gradient(top, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker table tr td span:hover {
background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #999999;
}
.datepicker th.datepicker-switch {
width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
background: #eeeeee;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
cursor: default;
background-color: transparent;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
background-color: #eeeeee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}

1752
dist/bootstrap-editable/js/bootstrap-editable.js vendored

File diff suppressed because it is too large Load Diff

2
dist/bootstrap-editable/js/bootstrap-editable.min.js vendored

File diff suppressed because one or more lines are too long

450
dist/bootstrap3-editable/css/bootstrap-editable.css vendored

@ -222,453 +222,3 @@ a.editable-click.editable-disabled:hover {
display:inline-block; display:inline-block;
} }
/*!
* Datepicker for Bootstrap
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.datepicker {
padding: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
/*.dow {
border-top: 1px solid #ddd !important;
}*/
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.datepicker > div {
display: none;
}
.datepicker.days div.datepicker-days {
display: block;
}
.datepicker.months div.datepicker-months {
display: block;
}
.datepicker.years div.datepicker-years {
display: block;
}
.datepicker table {
margin: 0;
}
.datepicker td,
.datepicker th {
text-align: center;
width: 20px;
height: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover {
background: #eeeeee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
background-image: linear-gradient(top, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eeeeee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
background-image: linear-gradient(top, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
background-image: -o-linear-gradient(top, #b3b3b3, #808080);
background-image: linear-gradient(top, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker table tr td span:hover {
background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #999999;
}
.datepicker th.datepicker-switch {
width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
background: #eeeeee;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
cursor: default;
background-color: transparent;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
background-color: #eeeeee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}

1752
dist/bootstrap3-editable/js/bootstrap-editable.js vendored

File diff suppressed because it is too large Load Diff

2
dist/bootstrap3-editable/js/bootstrap-editable.min.js vendored

File diff suppressed because one or more lines are too long

450
dist/bootstrap5-editable/css/bootstrap-editable.css vendored

@ -222,453 +222,3 @@ a.editable-click.editable-disabled:hover {
display:inline-block; display:inline-block;
} }
/*!
* Datepicker for Bootstrap
*
* Copyright 2012 Stefan Petre
* Improvements by Andrew Rowls
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.datepicker {
padding: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
direction: ltr;
/*.dow {
border-top: 1px solid #ddd !important;
}*/
}
.datepicker-inline {
width: 220px;
}
.datepicker.datepicker-rtl {
direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.datepicker > div {
display: none;
}
.datepicker.days div.datepicker-days {
display: block;
}
.datepicker.months div.datepicker-months {
display: block;
}
.datepicker.years div.datepicker-years {
display: block;
}
.datepicker table {
margin: 0;
}
.datepicker td,
.datepicker th {
text-align: center;
width: 20px;
height: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover {
background: #eeeeee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
background-color: #fde19a;
background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
background-image: linear-gradient(top, #fdd49a, #fdf59a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
border-color: #fdf59a #fdf59a #fbed50;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
color: #000;
}
.datepicker table tr td.today.active:hover {
color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eeeeee;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
background-color: #f3d17a;
background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
background-image: linear-gradient(top, #f3c17a, #f3e97a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
border-color: #f3e97a #f3e97a #edde34;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
background-color: #9e9e9e;
background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
background-image: -o-linear-gradient(top, #b3b3b3, #808080);
background-image: linear-gradient(top, #b3b3b3, #808080);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
border-color: #808080 #808080 #595959;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
background-color: #666666 \9;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker table tr td span:hover {
background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: #999999;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: #0044cc;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: #999999;
}
.datepicker th.datepicker-switch {
width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
background: #eeeeee;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
cursor: default;
background-color: transparent;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
background-color: #eeeeee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}

153
dist/bootstrap5-editable/css/editable-form.css vendored Normal file

@ -0,0 +1,153 @@
.editableform {
margin-bottom: 0; /* overwrites bootstrap margin */
}
.editableform .control-group {
margin-bottom: 0; /* overwrites bootstrap margin */
white-space: nowrap; /* prevent wrapping buttons on new line */
line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}
/*
BS3 fix: stop css from breaking when the form is inside a popup and inside a form with the class .form-horizontal
See: https://github.com/vitalets/x-editable/issues/682
*/
.form-horizontal .editable-popup .editableform .form-group {
margin-left:0;
margin-right:0;
}
/*
BS3 width:1005 for inputs breaks editable form in popup
See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform .form-control {
width: auto;
}
.editable-buttons {
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
vertical-align: top;
margin-left: 7px;
/* inline-block emulation for IE7*/
zoom: 1;
*display: inline;
}
.editable-buttons.editable-buttons-bottom {
display: block;
margin-top: 7px;
margin-left: 0;
}
.editable-input {
vertical-align: top;
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
white-space: normal; /* reset white-space decalred in parent*/
/* display-inline emulation for IE7*/
zoom: 1;
*display: inline;
}
.editable-buttons .editable-cancel {
margin-left: 7px;
}
/*for jquery-ui buttons need set height to look more pretty*/
.editable-buttons button.ui-button-icon-only {
height: 24px;
width: 30px;
}
.editableform-loading {
background: url('../img/loading.gif') center center no-repeat;
height: 25px;
width: auto;
min-width: 25px;
}
.editable-inline .editableform-loading {
background-position: left 5px;
}
.editable-error-block {
max-width: 300px;
margin: 5px 0 0 0;
width: auto;
white-space: normal;
}
/*add padding for jquery ui*/
.editable-error-block.ui-state-error {
padding: 3px;
}
.editable-error {
color: red;
}
/* ---- For specific types ---- */
.editableform .editable-date {
padding: 0;
margin: 0;
float: left;
}
/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
.editable-inline .add-on .icon-th {
margin-top: 3px;
margin-left: 1px;
}
/* checklist vertical alignment */
.editable-checklist label input[type="checkbox"],
.editable-checklist label span {
vertical-align: middle;
margin: 0;
}
.editable-checklist label {
white-space: nowrap;
}
/* set exact width of textarea to fit buttons toolbar */
.editable-wysihtml5 {
width: 566px;
height: 250px;
}
/* clear button shown as link in date inputs */
.editable-clear {
clear: both;
font-size: 0.9em;
text-decoration: none;
text-align: right;
}
/* IOS-style clear button for text inputs */
.editable-clear-x {
background: url('../img/clear.png') center center no-repeat;
display: block;
width: 13px;
height: 13px;
position: absolute;
opacity: 0.6;
z-index: 100;
top: 50%;
right: 6px;
margin-top: -6px;
}
.editable-clear-x:hover {
opacity: 1;
}
.editable-pre-wrapped {
white-space: pre-wrap;
}

2045
dist/bootstrap5-editable/js/bootstrap-editable.js vendored

File diff suppressed because it is too large Load Diff

1
dist/bootstrap5-editable/js/bootstrap-editable.js.map vendored Normal file

File diff suppressed because one or more lines are too long

2
dist/bootstrap5-editable/js/bootstrap-editable.min.js vendored

File diff suppressed because one or more lines are too long

BIN
dist/fonts/bootstrap-icons.woff vendored Normal file

Binary file not shown.

BIN
dist/fonts/bootstrap-icons.woff2 vendored Normal file

Binary file not shown.

497
dist/jquery-editable/js/jquery-editable-poshytip.js vendored

@ -889,24 +889,24 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
}(window.jQuery)); }(window.jQuery));
/** /**
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br> Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br> This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
Final realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.<br> Final realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.<br>
Applied as jQuery method. Applied as jQuery method.
@class editableContainer @class editableContainer
@uses editableform @uses editableform
**/ **/
(function ($) { (function ($) {
"use strict"; "use strict";
var Popup = function (element, options) { var Popup = function (element, options) {
this.init(element, options); this.init(element, options);
}; };
var Inline = function (element, options) { var Inline = function (element, options) {
this.init(element, options); this.init(element, options);
}; };
//methods //methods
Popup.prototype = { Popup.prototype = {
@ -915,98 +915,104 @@ Applied as jQuery method.
innerCss: null, //tbd in child class innerCss: null, //tbd in child class
containerClass: 'editable-container editable-popup', //css class applied to container element containerClass: 'editable-container editable-popup', //css class applied to container element
defaults: {}, //container itself defaults defaults: {}, //container itself defaults
init: function(element, options) { init: function(element, options) {
this.$element = $(element); this.$element = $(element);
//since 1.4.1 container do not use data-* directly as they already merged into options. //since 1.4.1 container do not use data-* directly as they already merged into options.
this.options = $.extend({}, $.fn.editableContainer.defaults, options); this.options = $.extend({}, $.fn.editableContainer.defaults, options);
this.splitOptions(); this.splitOptions();
//set scope of form callbacks to element //set scope of form callbacks to element
this.formOptions.scope = this.$element[0]; this.formOptions.scope = this.$element[0];
this.initContainer(); this.initContainer();
//flag to hide container, when saving value will finish //flag to hide container, when saving value will finish
this.delayedHide = false; this.delayedHide = false;
//bind 'destroyed' listener to destroy container when element is removed from dom //bind 'destroyed' listener to destroy container when element is removed from dom
this.$element.on('destroyed', $.proxy(function(){ this.$element.on('destroyed', $.proxy(function(){
this.destroy(); this.destroy();
}, this)); }, this));
//attach document handler to close containers on click / escape //attach document handler to close containers on click / escape
if(!$(document).data('editable-handlers-attached')) { if(!$(document).data('editable-handlers-attached')) {
//close all on escape //close all on escape
$(document).on('keyup.editable', function (e) { $(document).on('keyup.editable', function (e) {
if (e.which === 27) { if (e.which === 27) {
$('.editable-open').editableContainer('hide'); $('.editable-open').editableContainer('hide', 'cancel');
//todo: return focus on element //todo: return focus on element
} }
}); });
//close containers when click outside //close containers when click outside
//(mousedown could be better than click, it closes everything also on drag drop) //(mousedown could be better than click, it closes everything also on drag drop)
$(document).on('click.editable', function(e) { $(document).on('click.editable', function(e) {
var $target = $(e.target), i, var $target = $(e.target), i,
exclude_classes = ['.editable-container', exclude_classes = ['.editable-container',
'.ui-datepicker-header', '.ui-datepicker-header',
'.datepicker', //in inline mode datepicker is rendered into body '.datepicker', //in inline mode datepicker is rendered into body
'.modal-backdrop', '.modal-backdrop',
'.bootstrap-wysihtml5-insert-image-modal', '.bootstrap-wysihtml5-insert-image-modal',
'.bootstrap-wysihtml5-insert-link-modal' '.bootstrap-wysihtml5-insert-link-modal'
]; ];
// select2 has extra body click in IE
// see: https://github.com/ivaynberg/select2/issues/1058
if ($('.select2-drop-mask').is(':visible')) {
return;
}
//check if element is detached. It occurs when clicking in bootstrap datepicker //check if element is detached. It occurs when clicking in bootstrap datepicker
if (!$.contains(document.documentElement, e.target)) { if (!$.contains(document.documentElement, e.target)) {
return; return;
} }
//for some reason FF 20 generates extra event (click) in select2 widget with e.target = document //for some reason FF 20 generates extra event (click) in select2 widget with e.target = document
//we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199 //we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199
//Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec //Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec
if($target.is(document)) { if($target.is(document)) {
return; return;
} }
//if click inside one of exclude classes --> no nothing //if click inside one of exclude classes --> no nothing
for(i=0; i<exclude_classes.length; i++) { for(i=0; i<exclude_classes.length; i++) {
if($target.is(exclude_classes[i]) || $target.parents(exclude_classes[i]).length) { if($target.is(exclude_classes[i]) || $target.parents(exclude_classes[i]).length) {
return; return;
} }
} }
//close all open containers (except one - target) //close all open containers (except one - target)
Popup.prototype.closeOthers(e.target); Popup.prototype.closeOthers(e.target);
}); });
$(document).data('editable-handlers-attached', true); $(document).data('editable-handlers-attached', true);
} }
}, },
//split options on containerOptions and formOptions //split options on containerOptions and formOptions
splitOptions: function() { splitOptions: function() {
this.containerOptions = {}; this.containerOptions = {};
this.formOptions = {}; this.formOptions = {};
if(!$.fn[this.containerName]) { if(!$.fn[this.containerName]) {
throw new Error(this.containerName + ' not found. Have you included corresponding js file?'); throw new Error(this.containerName + ' not found. Have you included corresponding js file?');
} }
//keys defined in container defaults go to container, others go to form //keys defined in container defaults go to container, others go to form
for(var k in this.options) { for(var k in this.options) {
if(k in this.defaults) { if(k in this.defaults) {
this.containerOptions[k] = this.options[k]; this.containerOptions[k] = this.options[k];
} else { } else {
this.formOptions[k] = this.options[k]; this.formOptions[k] = this.options[k];
} }
} }
}, },
/* /*
Returns jquery object of container Returns jquery object of container
@method tip() @method tip()
*/ */
tip: function() { tip: function() {
return this.container() ? this.container().$tip : null; return this.container() ? this.container().$tip : null;
}, },
@ -1025,239 +1031,239 @@ Applied as jQuery method.
return container; return container;
}, },
/* call native method of underlying container, e.g. this.$element.popover('method') */ /* call native method of underlying container, e.g. this.$element.popover('method') */
call: function() { call: function() {
this.$element[this.containerName].apply(this.$element, arguments); this.$element[this.containerName].apply(this.$element, arguments);
}, },
initContainer: function(){ initContainer: function(){
this.call(this.containerOptions); this.call(this.containerOptions);
}, },
renderForm: function() { renderForm: function() {
this.$form this.$form
.editableform(this.formOptions) .editableform(this.formOptions)
.on({ .on({
save: $.proxy(this.save, this), //click on submit button (value changed) save: $.proxy(this.save, this), //click on submit button (value changed)
nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed) nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed)
cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on cancel button cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on cancel button
show: $.proxy(function() { show: $.proxy(function() {
if(this.delayedHide) { if(this.delayedHide) {
this.hide(this.delayedHide.reason); this.hide(this.delayedHide.reason);
this.delayedHide = false; this.delayedHide = false;
} else { } else {
this.setPosition(); this.setPosition();
} }
}, this), //re-position container every time form is shown (occurs each time after loading state) }, this), //re-position container every time form is shown (occurs each time after loading state)
rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed
rendered: $.proxy(function(){ rendered: $.proxy(function(){
/** /**
Fired when container is shown and form is rendered (for select will wait for loading dropdown options). Fired when container is shown and form is rendered (for select will wait for loading dropdown options).
**Note:** Bootstrap popover has own `shown` event that now cannot be separated from x-editable's one. **Note:** Bootstrap popover has own `shown` event that now cannot be separated from x-editable's one.
The workaround is to check `arguments.length` that is always `2` for x-editable. The workaround is to check `arguments.length` that is always `2` for x-editable.
@event shown @event shown
@param {Object} event event object @param {Object} event event object
@example @example
$('#username').on('shown', function(e, editable) { $('#username').on('shown', function(e, editable) {
editable.input.$input.val('overwriting value of input..'); editable.input.$input.val('overwriting value of input..');
}); });
**/ **/
/* /*
TODO: added second param mainly to distinguish from bootstrap's shown event. It's a hotfix that will be solved in future versions via namespaced events. TODO: added second param mainly to distinguish from bootstrap's shown event. It's a hotfix that will be solved in future versions via namespaced events.
*/ */
this.$element.triggerHandler('shown', $(this.options.scope).data('editable')); this.$element.triggerHandler('shown', $(this.options.scope).data('editable'));
}, this) }, this)
}) })
.editableform('render'); .editableform('render');
}, },
/** /**
Shows container with form Shows container with form
@method show() @method show()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
**/ **/
/* Note: poshytip owerwrites this method totally! */ /* Note: poshytip owerwrites this method totally! */
show: function (closeAll) { show: function (closeAll) {
this.$element.addClass('editable-open'); this.$element.addClass('editable-open');
if(closeAll !== false) { if(closeAll !== false) {
//close all open containers (except this) //close all open containers (except this)
this.closeOthers(this.$element[0]); this.closeOthers(this.$element[0]);
} }
//show container itself //show container itself
this.innerShow(); this.innerShow();
this.tip().addClass(this.containerClass); this.tip().addClass(this.containerClass);
/* /*
Currently, form is re-rendered on every show. Currently, form is re-rendered on every show.
The main reason is that we dont know, what will container do with content when closed: The main reason is that we dont know, what will container do with content when closed:
remove(), detach() or just hide() - it depends on container. remove(), detach() or just hide() - it depends on container.
Detaching form itself before hide and re-insert before show is good solution, Detaching form itself before hide and re-insert before show is good solution,
but visually it looks ugly --> container changes size before hide. but visually it looks ugly --> container changes size before hide.
*/ */
//if form already exist - delete previous data //if form already exist - delete previous data
if(this.$form) { if(this.$form) {
//todo: destroy prev data! //todo: destroy prev data!
//this.$form.destroy(); this.$form.remove();
} }
this.$form = $('<div>'); this.$form = $('<div>');
//insert form into container body //insert form into container body
if(this.tip().is(this.innerCss)) { if(this.tip().is(this.innerCss)) {
//for inline container //for inline container
this.tip().append(this.$form); this.tip().append(this.$form);
} else { } else {
this.tip().find(this.innerCss).append(this.$form); this.tip().find(this.innerCss).append(this.$form);
} }
//render form //render form
this.renderForm(); this.renderForm();
}, },
/** /**
Hides container with form Hides container with form
@method hide() @method hide()
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|undefined (=manual)</code> @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|undefined (=manual)</code>
**/ **/
hide: function(reason) { hide: function(reason) {
if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) { if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) {
return; return;
} }
//if form is saving value, schedule hide //if form is saving value, schedule hide
if(this.$form.data('editableform').isSaving) { if(this.$form.data('editableform').isSaving) {
this.delayedHide = {reason: reason}; this.delayedHide = {reason: reason};
return; return;
} else { } else {
this.delayedHide = false; this.delayedHide = false;
} }
this.$element.removeClass('editable-open'); this.$element.removeClass('editable-open');
this.innerHide(); this.innerHide();
/** /**
Fired when container was hidden. It occurs on both save or cancel. Fired when container was hidden. It occurs on both save or cancel.
**Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one. **Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one.
The workaround is to check `arguments.length` that is always `2` for x-editable. The workaround is to check `arguments.length` that is always `2` for x-editable.
@event hidden @event hidden
@param {object} event event object @param {object} event event object
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|manual</code> @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|manual</code>
@example @example
$('#username').on('hidden', function(e, reason) { $('#username').on('hidden', function(e, reason) {
if(reason === 'save' || reason === 'cancel') { if(reason === 'save' || reason === 'cancel') {
//auto-open next editable //auto-open next editable
$(this).closest('tr').next().find('.editable').editable('show'); $(this).closest('tr').next().find('.editable').editable('show');
} }
}); });
**/ **/
this.$element.triggerHandler('hidden', reason || 'manual'); this.$element.triggerHandler('hidden', reason || 'manual');
}, },
/* internal show method. To be overwritten in child classes */ /* internal show method. To be overwritten in child classes */
innerShow: function () { innerShow: function () {
}, },
/* internal hide method. To be overwritten in child classes */ /* internal hide method. To be overwritten in child classes */
innerHide: function () { innerHide: function () {
}, },
/** /**
Toggles container visibility (show / hide) Toggles container visibility (show / hide)
@method toggle() @method toggle()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
**/ **/
toggle: function(closeAll) { toggle: function(closeAll) {
if(this.container() && this.tip() && this.tip().is(':visible')) { if(this.container() && this.tip() && this.tip().is(':visible')) {
this.hide(); this.hide();
} else { } else {
this.show(closeAll); this.show(closeAll);
} }
}, },
/* /*
Updates the position of container when content changed. Updates the position of container when content changed.
@method setPosition() @method setPosition()
*/ */
setPosition: function() { setPosition: function() {
//tbd in child class //tbd in child class
}, },
save: function(e, params) { save: function(e, params) {
/** /**
Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance
@event save @event save
@param {Object} event event object @param {Object} event event object
@param {Object} params additional params @param {Object} params additional params
@param {mixed} params.newValue submitted value @param {mixed} params.newValue submitted value
@param {Object} params.response ajax response @param {Object} params.response ajax response
@example @example
$('#username').on('save', function(e, params) { $('#username').on('save', function(e, params) {
//assuming server response: '{success: true}' //assuming server response: '{success: true}'
var pk = $(this).data('editableContainer').options.pk; var pk = $(this).data('editableContainer').options.pk;
if(params.response && params.response.success) { if(params.response && params.response.success) {
alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!'); alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!');
} else { } else {
alert('error!'); alert('error!');
} }
}); });
**/ **/
this.$element.triggerHandler('save', params); this.$element.triggerHandler('save', params);
//hide must be after trigger, as saving value may require methods of plugin, applied to input //hide must be after trigger, as saving value may require methods of plugin, applied to input
this.hide('save'); this.hide('save');
}, },
/** /**
Sets new option Sets new option
@method option(key, value) @method option(key, value)
@param {string} key @param {string} key
@param {mixed} value @param {mixed} value
**/ **/
option: function(key, value) { option: function(key, value) {
this.options[key] = value; this.options[key] = value;
if(key in this.containerOptions) { if(key in this.containerOptions) {
this.containerOptions[key] = value; this.containerOptions[key] = value;
this.setContainerOption(key, value); this.setContainerOption(key, value);
} else { } else {
this.formOptions[key] = value; this.formOptions[key] = value;
if(this.$form) { if(this.$form) {
this.$form.editableform('option', key, value); this.$form.editableform('option', key, value);
} }
} }
}, },
setContainerOption: function(key, value) { setContainerOption: function(key, value) {
this.call('option', key, value); this.call('option', key, value);
}, },
/** /**
Destroys the container instance Destroys the container instance
@method destroy() @method destroy()
**/ **/
destroy: function() { destroy: function() {
this.hide(); this.hide();
this.innerDestroy(); this.innerDestroy();
this.$element.off('destroyed'); this.$element.off('destroyed');
this.$element.removeData('editableContainer'); this.$element.removeData('editableContainer');
}, },
/* to be overwritten in child classes */ /* to be overwritten in child classes */
innerDestroy: function() { innerDestroy: function() {
}, },
/* /*
Closes other containers except one related to passed element. Closes other containers except one related to passed element.
Other containers can be cancelled or submitted (depends on onblur option) Other containers can be cancelled or submitted (depends on onblur option)
*/ */
closeOthers: function(element) { closeOthers: function(element) {
@ -1267,14 +1273,14 @@ Applied as jQuery method.
return; return;
} }
//otherwise cancel or submit all open containers //otherwise cancel or submit all open containers
var $el = $(el), var $el = $(el),
ec = $el.data('editableContainer'); ec = $el.data('editableContainer');
if(!ec) { if(!ec) {
return; return;
} }
if(ec.options.onblur === 'cancel') { if(ec.options.onblur === 'cancel') {
$el.data('editableContainer').hide('onblur'); $el.data('editableContainer').hide('onblur');
} else if(ec.options.onblur === 'submit') { } else if(ec.options.onblur === 'submit') {
@ -1283,50 +1289,50 @@ Applied as jQuery method.
}); });
}, },
/** /**
Activates input of visible container (e.g. set focus) Activates input of visible container (e.g. set focus)
@method activate() @method activate()
**/ **/
activate: function() { activate: function() {
if(this.tip && this.tip().is(':visible') && this.$form) { if(this.tip && this.tip().is(':visible') && this.$form) {
this.$form.data('editableform').input.activate(); this.$form.data('editableform').input.activate();
} }
} }
}; };
/** /**
jQuery method to initialize editableContainer. jQuery method to initialize editableContainer.
@method $().editableContainer(options) @method $().editableContainer(options)
@params {Object} options @params {Object} options
@example @example
$('#edit').editableContainer({ $('#edit').editableContainer({
type: 'text', type: 'text',
url: '/post', url: '/post',
pk: 1, pk: 1,
value: 'hello' value: 'hello'
}); });
**/ **/
$.fn.editableContainer = function (option) { $.fn.editableContainer = function (option) {
var args = arguments; var args = arguments;
return this.each(function () { return this.each(function () {
var $this = $(this), var $this = $(this),
dataKey = 'editableContainer', dataKey = 'editableContainer',
data = $this.data(dataKey), data = $this.data(dataKey),
options = typeof option === 'object' && option, options = typeof option === 'object' && option,
Constructor = (options.mode === 'inline') ? Inline : Popup; Constructor = (options.mode === 'inline') ? Inline : Popup;
if (!data) { if (!data) {
$this.data(dataKey, (data = new Constructor(this, options))); $this.data(dataKey, (data = new Constructor(this, options)));
} }
if (typeof option === 'string') { //call method if (typeof option === 'string') { //call method
data[option].apply(data, Array.prototype.slice.call(args, 1)); data[option].apply(data, Array.prototype.slice.call(args, 1));
} }
}); });
}; };
//store constructors //store constructors
$.fn.editableContainer.Popup = Popup; $.fn.editableContainer.Popup = Popup;
@ -1335,62 +1341,62 @@ Applied as jQuery method.
//defaults //defaults
$.fn.editableContainer.defaults = { $.fn.editableContainer.defaults = {
/** /**
Initial value of form input Initial value of form input
@property value @property value
@type mixed @type mixed
@default null @default null
@private @private
**/ **/
value: null, value: null,
/** /**
Placement of container relative to element. Can be <code>top|right|bottom|left</code>. Not used for inline container. Placement of container relative to element. Can be <code>top|right|bottom|left</code>. Not used for inline container.
@property placement @property placement
@type string @type string
@default 'top' @default 'top'
**/ **/
placement: 'top', placement: 'top',
/** /**
Whether to hide container on save/cancel. Whether to hide container on save/cancel.
@property autohide @property autohide
@type boolean @type boolean
@default true @default true
@private @private
**/ **/
autohide: true, autohide: true,
/** /**
Action when user clicks outside the container. Can be <code>cancel|submit|ignore</code>. Action when user clicks outside the container. Can be <code>cancel|submit|ignore</code>.
Setting <code>ignore</code> allows to have several containers open. Setting <code>ignore</code> allows to have several containers open.
@property onblur @property onblur
@type string @type string
@default 'cancel' @default 'cancel'
@since 1.1.1 @since 1.1.1
**/ **/
onblur: 'cancel', onblur: 'cancel',
/** /**
Animation speed (inline mode only) Animation speed (inline mode only)
@property anim @property anim
@type string @type string
@default false @default false
**/ **/
anim: false, anim: false,
/** /**
Mode of editable, can be `popup` or `inline` Mode of editable, can be `popup` or `inline`
@property mode @property mode
@type string @type string
@default 'popup' @default 'popup'
@since 1.4.0 @since 1.4.0
**/ **/
mode: 'popup' mode: 'popup'
}; };
/* /*
* workaround to have 'destroyed' event to destroy popover when element is destroyed * workaround to have 'destroyed' event to destroy popover when element is destroyed
* see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom * see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom
*/ */
@ -1400,10 +1406,9 @@ Applied as jQuery method.
o.handler(); o.handler();
} }
} }
}; };
}(window.jQuery)); }(window.jQuery));
/** /**
* Editable Inline * Editable Inline
* --------------------- * ---------------------

2
dist/jquery-editable/js/jquery-editable-poshytip.min.js vendored

File diff suppressed because one or more lines are too long

10766
dist/jquery.js vendored Normal file

File diff suppressed because it is too large Load Diff

1
dist/jquery.js.map vendored Normal file

File diff suppressed because one or more lines are too long

497
dist/jqueryui-editable/js/jqueryui-editable.js vendored

@ -889,24 +889,24 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
}(window.jQuery)); }(window.jQuery));
/** /**
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br> Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br> This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
Final realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.<br> Final realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.<br>
Applied as jQuery method. Applied as jQuery method.
@class editableContainer @class editableContainer
@uses editableform @uses editableform
**/ **/
(function ($) { (function ($) {
"use strict"; "use strict";
var Popup = function (element, options) { var Popup = function (element, options) {
this.init(element, options); this.init(element, options);
}; };
var Inline = function (element, options) { var Inline = function (element, options) {
this.init(element, options); this.init(element, options);
}; };
//methods //methods
Popup.prototype = { Popup.prototype = {
@ -915,98 +915,104 @@ Applied as jQuery method.
innerCss: null, //tbd in child class innerCss: null, //tbd in child class
containerClass: 'editable-container editable-popup', //css class applied to container element containerClass: 'editable-container editable-popup', //css class applied to container element
defaults: {}, //container itself defaults defaults: {}, //container itself defaults
init: function(element, options) { init: function(element, options) {
this.$element = $(element); this.$element = $(element);
//since 1.4.1 container do not use data-* directly as they already merged into options. //since 1.4.1 container do not use data-* directly as they already merged into options.
this.options = $.extend({}, $.fn.editableContainer.defaults, options); this.options = $.extend({}, $.fn.editableContainer.defaults, options);
this.splitOptions(); this.splitOptions();
//set scope of form callbacks to element //set scope of form callbacks to element
this.formOptions.scope = this.$element[0]; this.formOptions.scope = this.$element[0];
this.initContainer(); this.initContainer();
//flag to hide container, when saving value will finish //flag to hide container, when saving value will finish
this.delayedHide = false; this.delayedHide = false;
//bind 'destroyed' listener to destroy container when element is removed from dom //bind 'destroyed' listener to destroy container when element is removed from dom
this.$element.on('destroyed', $.proxy(function(){ this.$element.on('destroyed', $.proxy(function(){
this.destroy(); this.destroy();
}, this)); }, this));
//attach document handler to close containers on click / escape //attach document handler to close containers on click / escape
if(!$(document).data('editable-handlers-attached')) { if(!$(document).data('editable-handlers-attached')) {
//close all on escape //close all on escape
$(document).on('keyup.editable', function (e) { $(document).on('keyup.editable', function (e) {
if (e.which === 27) { if (e.which === 27) {
$('.editable-open').editableContainer('hide'); $('.editable-open').editableContainer('hide', 'cancel');
//todo: return focus on element //todo: return focus on element
} }
}); });
//close containers when click outside //close containers when click outside
//(mousedown could be better than click, it closes everything also on drag drop) //(mousedown could be better than click, it closes everything also on drag drop)
$(document).on('click.editable', function(e) { $(document).on('click.editable', function(e) {
var $target = $(e.target), i, var $target = $(e.target), i,
exclude_classes = ['.editable-container', exclude_classes = ['.editable-container',
'.ui-datepicker-header', '.ui-datepicker-header',
'.datepicker', //in inline mode datepicker is rendered into body '.datepicker', //in inline mode datepicker is rendered into body
'.modal-backdrop', '.modal-backdrop',
'.bootstrap-wysihtml5-insert-image-modal', '.bootstrap-wysihtml5-insert-image-modal',
'.bootstrap-wysihtml5-insert-link-modal' '.bootstrap-wysihtml5-insert-link-modal'
]; ];
// select2 has extra body click in IE
// see: https://github.com/ivaynberg/select2/issues/1058
if ($('.select2-drop-mask').is(':visible')) {
return;
}
//check if element is detached. It occurs when clicking in bootstrap datepicker //check if element is detached. It occurs when clicking in bootstrap datepicker
if (!$.contains(document.documentElement, e.target)) { if (!$.contains(document.documentElement, e.target)) {
return; return;
} }
//for some reason FF 20 generates extra event (click) in select2 widget with e.target = document //for some reason FF 20 generates extra event (click) in select2 widget with e.target = document
//we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199 //we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199
//Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec //Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec
if($target.is(document)) { if($target.is(document)) {
return; return;
} }
//if click inside one of exclude classes --> no nothing //if click inside one of exclude classes --> no nothing
for(i=0; i<exclude_classes.length; i++) { for(i=0; i<exclude_classes.length; i++) {
if($target.is(exclude_classes[i]) || $target.parents(exclude_classes[i]).length) { if($target.is(exclude_classes[i]) || $target.parents(exclude_classes[i]).length) {
return; return;
} }
} }
//close all open containers (except one - target) //close all open containers (except one - target)
Popup.prototype.closeOthers(e.target); Popup.prototype.closeOthers(e.target);
}); });
$(document).data('editable-handlers-attached', true); $(document).data('editable-handlers-attached', true);
} }
}, },
//split options on containerOptions and formOptions //split options on containerOptions and formOptions
splitOptions: function() { splitOptions: function() {
this.containerOptions = {}; this.containerOptions = {};
this.formOptions = {}; this.formOptions = {};
if(!$.fn[this.containerName]) { if(!$.fn[this.containerName]) {
throw new Error(this.containerName + ' not found. Have you included corresponding js file?'); throw new Error(this.containerName + ' not found. Have you included corresponding js file?');
} }
//keys defined in container defaults go to container, others go to form //keys defined in container defaults go to container, others go to form
for(var k in this.options) { for(var k in this.options) {
if(k in this.defaults) { if(k in this.defaults) {
this.containerOptions[k] = this.options[k]; this.containerOptions[k] = this.options[k];
} else { } else {
this.formOptions[k] = this.options[k]; this.formOptions[k] = this.options[k];
} }
} }
}, },
/* /*
Returns jquery object of container Returns jquery object of container
@method tip() @method tip()
*/ */
tip: function() { tip: function() {
return this.container() ? this.container().$tip : null; return this.container() ? this.container().$tip : null;
}, },
@ -1025,239 +1031,239 @@ Applied as jQuery method.
return container; return container;
}, },
/* call native method of underlying container, e.g. this.$element.popover('method') */ /* call native method of underlying container, e.g. this.$element.popover('method') */
call: function() { call: function() {
this.$element[this.containerName].apply(this.$element, arguments); this.$element[this.containerName].apply(this.$element, arguments);
}, },
initContainer: function(){ initContainer: function(){
this.call(this.containerOptions); this.call(this.containerOptions);
}, },
renderForm: function() { renderForm: function() {
this.$form this.$form
.editableform(this.formOptions) .editableform(this.formOptions)
.on({ .on({
save: $.proxy(this.save, this), //click on submit button (value changed) save: $.proxy(this.save, this), //click on submit button (value changed)
nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed) nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed)
cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on cancel button cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on cancel button
show: $.proxy(function() { show: $.proxy(function() {
if(this.delayedHide) { if(this.delayedHide) {
this.hide(this.delayedHide.reason); this.hide(this.delayedHide.reason);
this.delayedHide = false; this.delayedHide = false;
} else { } else {
this.setPosition(); this.setPosition();
} }
}, this), //re-position container every time form is shown (occurs each time after loading state) }, this), //re-position container every time form is shown (occurs each time after loading state)
rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed
rendered: $.proxy(function(){ rendered: $.proxy(function(){
/** /**
Fired when container is shown and form is rendered (for select will wait for loading dropdown options). Fired when container is shown and form is rendered (for select will wait for loading dropdown options).
**Note:** Bootstrap popover has own `shown` event that now cannot be separated from x-editable's one. **Note:** Bootstrap popover has own `shown` event that now cannot be separated from x-editable's one.
The workaround is to check `arguments.length` that is always `2` for x-editable. The workaround is to check `arguments.length` that is always `2` for x-editable.
@event shown @event shown
@param {Object} event event object @param {Object} event event object
@example @example
$('#username').on('shown', function(e, editable) { $('#username').on('shown', function(e, editable) {
editable.input.$input.val('overwriting value of input..'); editable.input.$input.val('overwriting value of input..');
}); });
**/ **/
/* /*
TODO: added second param mainly to distinguish from bootstrap's shown event. It's a hotfix that will be solved in future versions via namespaced events. TODO: added second param mainly to distinguish from bootstrap's shown event. It's a hotfix that will be solved in future versions via namespaced events.
*/ */
this.$element.triggerHandler('shown', $(this.options.scope).data('editable')); this.$element.triggerHandler('shown', $(this.options.scope).data('editable'));
}, this) }, this)
}) })
.editableform('render'); .editableform('render');
}, },
/** /**
Shows container with form Shows container with form
@method show() @method show()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
**/ **/
/* Note: poshytip owerwrites this method totally! */ /* Note: poshytip owerwrites this method totally! */
show: function (closeAll) { show: function (closeAll) {
this.$element.addClass('editable-open'); this.$element.addClass('editable-open');
if(closeAll !== false) { if(closeAll !== false) {
//close all open containers (except this) //close all open containers (except this)
this.closeOthers(this.$element[0]); this.closeOthers(this.$element[0]);
} }
//show container itself //show container itself
this.innerShow(); this.innerShow();
this.tip().addClass(this.containerClass); this.tip().addClass(this.containerClass);
/* /*
Currently, form is re-rendered on every show. Currently, form is re-rendered on every show.
The main reason is that we dont know, what will container do with content when closed: The main reason is that we dont know, what will container do with content when closed:
remove(), detach() or just hide() - it depends on container. remove(), detach() or just hide() - it depends on container.
Detaching form itself before hide and re-insert before show is good solution, Detaching form itself before hide and re-insert before show is good solution,
but visually it looks ugly --> container changes size before hide. but visually it looks ugly --> container changes size before hide.
*/ */
//if form already exist - delete previous data //if form already exist - delete previous data
if(this.$form) { if(this.$form) {
//todo: destroy prev data! //todo: destroy prev data!
//this.$form.destroy(); this.$form.remove();
} }
this.$form = $('<div>'); this.$form = $('<div>');
//insert form into container body //insert form into container body
if(this.tip().is(this.innerCss)) { if(this.tip().is(this.innerCss)) {
//for inline container //for inline container
this.tip().append(this.$form); this.tip().append(this.$form);
} else { } else {
this.tip().find(this.innerCss).append(this.$form); this.tip().find(this.innerCss).append(this.$form);
} }
//render form //render form
this.renderForm(); this.renderForm();
}, },
/** /**
Hides container with form Hides container with form
@method hide() @method hide()
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|undefined (=manual)</code> @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|undefined (=manual)</code>
**/ **/
hide: function(reason) { hide: function(reason) {
if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) { if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) {
return; return;
} }
//if form is saving value, schedule hide //if form is saving value, schedule hide
if(this.$form.data('editableform').isSaving) { if(this.$form.data('editableform').isSaving) {
this.delayedHide = {reason: reason}; this.delayedHide = {reason: reason};
return; return;
} else { } else {
this.delayedHide = false; this.delayedHide = false;
} }
this.$element.removeClass('editable-open'); this.$element.removeClass('editable-open');
this.innerHide(); this.innerHide();
/** /**
Fired when container was hidden. It occurs on both save or cancel. Fired when container was hidden. It occurs on both save or cancel.
**Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one. **Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one.
The workaround is to check `arguments.length` that is always `2` for x-editable. The workaround is to check `arguments.length` that is always `2` for x-editable.
@event hidden @event hidden
@param {object} event event object @param {object} event event object
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|manual</code> @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|manual</code>
@example @example
$('#username').on('hidden', function(e, reason) { $('#username').on('hidden', function(e, reason) {
if(reason === 'save' || reason === 'cancel') { if(reason === 'save' || reason === 'cancel') {
//auto-open next editable //auto-open next editable
$(this).closest('tr').next().find('.editable').editable('show'); $(this).closest('tr').next().find('.editable').editable('show');
} }
}); });
**/ **/
this.$element.triggerHandler('hidden', reason || 'manual'); this.$element.triggerHandler('hidden', reason || 'manual');
}, },
/* internal show method. To be overwritten in child classes */ /* internal show method. To be overwritten in child classes */
innerShow: function () { innerShow: function () {
}, },
/* internal hide method. To be overwritten in child classes */ /* internal hide method. To be overwritten in child classes */
innerHide: function () { innerHide: function () {
}, },
/** /**
Toggles container visibility (show / hide) Toggles container visibility (show / hide)
@method toggle() @method toggle()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
**/ **/
toggle: function(closeAll) { toggle: function(closeAll) {
if(this.container() && this.tip() && this.tip().is(':visible')) { if(this.container() && this.tip() && this.tip().is(':visible')) {
this.hide(); this.hide();
} else { } else {
this.show(closeAll); this.show(closeAll);
} }
}, },
/* /*
Updates the position of container when content changed. Updates the position of container when content changed.
@method setPosition() @method setPosition()
*/ */
setPosition: function() { setPosition: function() {
//tbd in child class //tbd in child class
}, },
save: function(e, params) { save: function(e, params) {
/** /**
Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance
@event save @event save
@param {Object} event event object @param {Object} event event object
@param {Object} params additional params @param {Object} params additional params
@param {mixed} params.newValue submitted value @param {mixed} params.newValue submitted value
@param {Object} params.response ajax response @param {Object} params.response ajax response
@example @example
$('#username').on('save', function(e, params) { $('#username').on('save', function(e, params) {
//assuming server response: '{success: true}' //assuming server response: '{success: true}'
var pk = $(this).data('editableContainer').options.pk; var pk = $(this).data('editableContainer').options.pk;
if(params.response && params.response.success) { if(params.response && params.response.success) {
alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!'); alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!');
} else { } else {
alert('error!'); alert('error!');
} }
}); });
**/ **/
this.$element.triggerHandler('save', params); this.$element.triggerHandler('save', params);
//hide must be after trigger, as saving value may require methods of plugin, applied to input //hide must be after trigger, as saving value may require methods of plugin, applied to input
this.hide('save'); this.hide('save');
}, },
/** /**
Sets new option Sets new option
@method option(key, value) @method option(key, value)
@param {string} key @param {string} key
@param {mixed} value @param {mixed} value
**/ **/
option: function(key, value) { option: function(key, value) {
this.options[key] = value; this.options[key] = value;
if(key in this.containerOptions) { if(key in this.containerOptions) {
this.containerOptions[key] = value; this.containerOptions[key] = value;
this.setContainerOption(key, value); this.setContainerOption(key, value);
} else { } else {
this.formOptions[key] = value; this.formOptions[key] = value;
if(this.$form) { if(this.$form) {
this.$form.editableform('option', key, value); this.$form.editableform('option', key, value);
} }
} }
}, },
setContainerOption: function(key, value) { setContainerOption: function(key, value) {
this.call('option', key, value); this.call('option', key, value);
}, },
/** /**
Destroys the container instance Destroys the container instance
@method destroy() @method destroy()
**/ **/
destroy: function() { destroy: function() {
this.hide(); this.hide();
this.innerDestroy(); this.innerDestroy();
this.$element.off('destroyed'); this.$element.off('destroyed');
this.$element.removeData('editableContainer'); this.$element.removeData('editableContainer');
}, },
/* to be overwritten in child classes */ /* to be overwritten in child classes */
innerDestroy: function() { innerDestroy: function() {
}, },
/* /*
Closes other containers except one related to passed element. Closes other containers except one related to passed element.
Other containers can be cancelled or submitted (depends on onblur option) Other containers can be cancelled or submitted (depends on onblur option)
*/ */
closeOthers: function(element) { closeOthers: function(element) {
@ -1267,14 +1273,14 @@ Applied as jQuery method.
return; return;
} }
//otherwise cancel or submit all open containers //otherwise cancel or submit all open containers
var $el = $(el), var $el = $(el),
ec = $el.data('editableContainer'); ec = $el.data('editableContainer');
if(!ec) { if(!ec) {
return; return;
} }
if(ec.options.onblur === 'cancel') { if(ec.options.onblur === 'cancel') {
$el.data('editableContainer').hide('onblur'); $el.data('editableContainer').hide('onblur');
} else if(ec.options.onblur === 'submit') { } else if(ec.options.onblur === 'submit') {
@ -1283,50 +1289,50 @@ Applied as jQuery method.
}); });
}, },
/** /**
Activates input of visible container (e.g. set focus) Activates input of visible container (e.g. set focus)
@method activate() @method activate()
**/ **/
activate: function() { activate: function() {
if(this.tip && this.tip().is(':visible') && this.$form) { if(this.tip && this.tip().is(':visible') && this.$form) {
this.$form.data('editableform').input.activate(); this.$form.data('editableform').input.activate();
} }
} }
}; };
/** /**
jQuery method to initialize editableContainer. jQuery method to initialize editableContainer.
@method $().editableContainer(options) @method $().editableContainer(options)
@params {Object} options @params {Object} options
@example @example
$('#edit').editableContainer({ $('#edit').editableContainer({
type: 'text', type: 'text',
url: '/post', url: '/post',
pk: 1, pk: 1,
value: 'hello' value: 'hello'
}); });
**/ **/
$.fn.editableContainer = function (option) { $.fn.editableContainer = function (option) {
var args = arguments; var args = arguments;
return this.each(function () { return this.each(function () {
var $this = $(this), var $this = $(this),
dataKey = 'editableContainer', dataKey = 'editableContainer',
data = $this.data(dataKey), data = $this.data(dataKey),
options = typeof option === 'object' && option, options = typeof option === 'object' && option,
Constructor = (options.mode === 'inline') ? Inline : Popup; Constructor = (options.mode === 'inline') ? Inline : Popup;
if (!data) { if (!data) {
$this.data(dataKey, (data = new Constructor(this, options))); $this.data(dataKey, (data = new Constructor(this, options)));
} }
if (typeof option === 'string') { //call method if (typeof option === 'string') { //call method
data[option].apply(data, Array.prototype.slice.call(args, 1)); data[option].apply(data, Array.prototype.slice.call(args, 1));
} }
}); });
}; };
//store constructors //store constructors
$.fn.editableContainer.Popup = Popup; $.fn.editableContainer.Popup = Popup;
@ -1335,62 +1341,62 @@ Applied as jQuery method.
//defaults //defaults
$.fn.editableContainer.defaults = { $.fn.editableContainer.defaults = {
/** /**
Initial value of form input Initial value of form input
@property value @property value
@type mixed @type mixed
@default null @default null
@private @private
**/ **/
value: null, value: null,
/** /**
Placement of container relative to element. Can be <code>top|right|bottom|left</code>. Not used for inline container. Placement of container relative to element. Can be <code>top|right|bottom|left</code>. Not used for inline container.
@property placement @property placement
@type string @type string
@default 'top' @default 'top'
**/ **/
placement: 'top', placement: 'top',
/** /**
Whether to hide container on save/cancel. Whether to hide container on save/cancel.
@property autohide @property autohide
@type boolean @type boolean
@default true @default true
@private @private
**/ **/
autohide: true, autohide: true,
/** /**
Action when user clicks outside the container. Can be <code>cancel|submit|ignore</code>. Action when user clicks outside the container. Can be <code>cancel|submit|ignore</code>.
Setting <code>ignore</code> allows to have several containers open. Setting <code>ignore</code> allows to have several containers open.
@property onblur @property onblur
@type string @type string
@default 'cancel' @default 'cancel'
@since 1.1.1 @since 1.1.1
**/ **/
onblur: 'cancel', onblur: 'cancel',
/** /**
Animation speed (inline mode only) Animation speed (inline mode only)
@property anim @property anim
@type string @type string
@default false @default false
**/ **/
anim: false, anim: false,
/** /**
Mode of editable, can be `popup` or `inline` Mode of editable, can be `popup` or `inline`
@property mode @property mode
@type string @type string
@default 'popup' @default 'popup'
@since 1.4.0 @since 1.4.0
**/ **/
mode: 'popup' mode: 'popup'
}; };
/* /*
* workaround to have 'destroyed' event to destroy popover when element is destroyed * workaround to have 'destroyed' event to destroy popover when element is destroyed
* see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom * see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom
*/ */
@ -1400,10 +1406,9 @@ Applied as jQuery method.
o.handler(); o.handler();
} }
} }
}; };
}(window.jQuery)); }(window.jQuery));
/** /**
* Editable Inline * Editable Inline
* --------------------- * ---------------------

2
dist/jqueryui-editable/js/jqueryui-editable.min.js vendored

File diff suppressed because one or more lines are too long

263
package-lock.json generated

@ -1,22 +1,24 @@
{ {
"name": "@24unix/x-editable", "name": "@24unix/x-editable",
"version": "1.5.1", "version": "1.5.2",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@24unix/x-editable", "name": "@24unix/x-editable",
"version": "1.5.1", "version": "1.5.2",
"dependencies": { "dependencies": {
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"bootstrap-datepicker": "^1.10.0",
"bootstrap-icons": "^1.11.3", "bootstrap-icons": "^1.11.3",
"copy-webpack-plugin": "^13.0.0",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"jquery-ui": "^1.14.1",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"webpack": "^5.98.0" "webpack": "^5.98.0"
}, },
"devDependencies": { "devDependencies": {
"css-loader": "^7.1.2", "css-loader": "^7.1.2",
"file-loader": "^6.2.0",
"grunt": "^1.6.1", "grunt": "^1.6.1",
"grunt-contrib-clean": "^2.0.1", "grunt-contrib-clean": "^2.0.1",
"grunt-contrib-concat": "^2.1.0", "grunt-contrib-concat": "^2.1.0",
@ -744,6 +746,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/big.js": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": "*"
}
},
"node_modules/bootstrap": { "node_modules/bootstrap": {
"version": "5.3.3", "version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
@ -763,6 +775,15 @@
"@popperjs/core": "^2.11.8" "@popperjs/core": "^2.11.8"
} }
}, },
"node_modules/bootstrap-datepicker": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/bootstrap-datepicker/-/bootstrap-datepicker-1.10.0.tgz",
"integrity": "sha512-lWxtSYddAQOpbAO8UhYhHLcK6425eWoSjb5JDvZU3ePHEPF6A3eUr51WKaFy4PccU19JRxUG6wEU3KdhtKfvpg==",
"license": "Apache-2.0",
"dependencies": {
"jquery": ">=3.4.0 <4.0.0"
}
},
"node_modules/bootstrap-icons": { "node_modules/bootstrap-icons": {
"version": "1.11.3", "version": "1.11.3",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz", "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
@ -1076,6 +1097,29 @@
"date-now": "^0.1.4" "date-now": "^0.1.4"
} }
}, },
"node_modules/copy-webpack-plugin": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-13.0.0.tgz",
"integrity": "sha512-FgR/h5a6hzJqATDGd9YG41SeDViH+0bkHn6WNXCi5zKAZkeESeSxLySSsFLHqLEVCh0E+rITmCf0dusXWYukeQ==",
"license": "MIT",
"dependencies": {
"glob-parent": "^6.0.1",
"normalize-path": "^3.0.0",
"schema-utils": "^4.2.0",
"serialize-javascript": "^6.0.2",
"tinyglobby": "^0.2.12"
},
"engines": {
"node": ">= 18.12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^5.1.0"
}
},
"node_modules/core-util-is": { "node_modules/core-util-is": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@ -1380,6 +1424,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 4"
}
},
"node_modules/encodeurl": { "node_modules/encodeurl": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@ -1699,6 +1753,13 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/fast-json-stable-stringify": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
"dev": true,
"license": "MIT"
},
"node_modules/fast-uri": { "node_modules/fast-uri": {
"version": "3.0.6", "version": "3.0.6",
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz", "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
@ -1751,6 +1812,80 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/file-loader": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
"dev": true,
"license": "MIT",
"dependencies": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/file-loader/node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"license": "MIT",
"dependencies": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/file-loader/node_modules/ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"ajv": "^6.9.1"
}
},
"node_modules/file-loader/node_modules/json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true,
"license": "MIT"
},
"node_modules/file-loader/node_modules/schema-utils": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/file-sync-cmp": { "node_modules/file-sync-cmp": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/file-sync-cmp/-/file-sync-cmp-0.1.1.tgz", "resolved": "https://registry.npmjs.org/file-sync-cmp/-/file-sync-cmp-0.1.1.tgz",
@ -2004,6 +2139,18 @@
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
} }
}, },
"node_modules/glob-parent": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
"license": "ISC",
"dependencies": {
"is-glob": "^4.0.3"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/glob-to-regexp": { "node_modules/glob-to-regexp": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@ -2791,7 +2938,6 @@
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -2811,7 +2957,6 @@
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"is-extglob": "^2.1.1" "is-extglob": "^2.1.1"
@ -2961,15 +3106,6 @@
"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==", "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/jquery-ui": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.14.1.tgz",
"integrity": "sha512-DhzsYH8VeIvOaxwi+B/2BCsFFT5EGjShdzOcm5DssWjtcpGWIMsn66rJciDA6jBruzNiLf1q0KvwMoX1uGNvnQ==",
"license": "MIT",
"dependencies": {
"jquery": ">=1.12.0 <5.0.0"
}
},
"node_modules/js-tokens": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -3029,6 +3165,19 @@
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/json5": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"dev": true,
"license": "MIT",
"bin": {
"json5": "lib/cli.js"
},
"engines": {
"node": ">=6"
}
},
"node_modules/kind-of": { "node_modules/kind-of": {
"version": "6.0.3", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@ -3091,6 +3240,21 @@
"node": ">=6.11.5" "node": ">=6.11.5"
} }
}, },
"node_modules/loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"license": "MIT",
"dependencies": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/locate-path": { "node_modules/locate-path": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@ -3332,6 +3496,15 @@
"nopt": "bin/nopt.js" "nopt": "bin/nopt.js"
} }
}, },
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/object.defaults": { "node_modules/object.defaults": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz", "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
@ -3967,6 +4140,16 @@
"once": "^1.3.1" "once": "^1.3.1"
} }
}, },
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/puppeteer": { "node_modules/puppeteer": {
"version": "22.15.0", "version": "22.15.0",
"resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-22.15.0.tgz", "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-22.15.0.tgz",
@ -4762,6 +4945,48 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/tinyglobby": {
"version": "0.2.12",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
"integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
"license": "MIT",
"dependencies": {
"fdir": "^6.4.3",
"picomatch": "^4.0.2"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/tinyglobby/node_modules/fdir": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
"license": "MIT",
"peerDependencies": {
"picomatch": "^3 || ^4"
},
"peerDependenciesMeta": {
"picomatch": {
"optional": true
}
}
},
"node_modules/tinyglobby/node_modules/picomatch": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/to-regex-range": { "node_modules/to-regex-range": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -4893,6 +5118,16 @@
"browserslist": ">= 4.21.0" "browserslist": ">= 4.21.0"
} }
}, },
"node_modules/uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
"dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"punycode": "^2.1.0"
}
},
"node_modules/uri-path": { "node_modules/uri-path": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz", "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",

4
package.json

@ -34,14 +34,16 @@
"style": "dist/bootstrap5-editable/css/bootstrap-editable.css", "style": "dist/bootstrap5-editable/css/bootstrap-editable.css",
"dependencies": { "dependencies": {
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"bootstrap-datepicker": "^1.10.0",
"bootstrap-icons": "^1.11.3", "bootstrap-icons": "^1.11.3",
"copy-webpack-plugin": "^13.0.0",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"jquery-ui": "^1.14.1",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"webpack": "^5.98.0" "webpack": "^5.98.0"
}, },
"devDependencies": { "devDependencies": {
"css-loader": "^7.1.2", "css-loader": "^7.1.2",
"file-loader": "^6.2.0",
"grunt": "^1.6.1", "grunt": "^1.6.1",
"grunt-contrib-clean": "^2.0.1", "grunt-contrib-clean": "^2.0.1",
"grunt-contrib-concat": "^2.1.0", "grunt-contrib-concat": "^2.1.0",

498
src/containers/editable-container.js

@ -1,22 +1,22 @@
/** /**
Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br> Attaches stand-alone container with editable-form to HTML element. Element is used only for positioning, value is not stored anywhere.<br>
This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br> This method applied internally in <code>$().editable()</code>. You should subscribe on it's events (save / cancel) to get profit of it.<br>
Final realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.<br> Final realization can be different: bootstrap-popover, jqueryui-tooltip, poshytip, inline-div. It depends on which js file you include.<br>
Applied as jQuery method. Applied as jQuery method.
@class editableContainer @class editableContainer
@uses editableform @uses editableform
**/ **/
(function ($) { (function ($) {
"use strict"; "use strict";
var Popup = function (element, options) { var Popup = function (element, options) {
this.init(element, options); this.init(element, options);
}; };
var Inline = function (element, options) { var Inline = function (element, options) {
this.init(element, options); this.init(element, options);
}; };
//methods //methods
Popup.prototype = { Popup.prototype = {
@ -25,98 +25,104 @@ Applied as jQuery method.
innerCss: null, //tbd in child class innerCss: null, //tbd in child class
containerClass: 'editable-container editable-popup', //css class applied to container element containerClass: 'editable-container editable-popup', //css class applied to container element
defaults: {}, //container itself defaults defaults: {}, //container itself defaults
init: function(element, options) { init: function(element, options) {
this.$element = $(element); this.$element = $(element);
//since 1.4.1 container do not use data-* directly as they already merged into options. //since 1.4.1 container do not use data-* directly as they already merged into options.
this.options = $.extend({}, $.fn.editableContainer.defaults, options); this.options = $.extend({}, $.fn.editableContainer.defaults, options);
this.splitOptions(); this.splitOptions();
//set scope of form callbacks to element //set scope of form callbacks to element
this.formOptions.scope = this.$element[0]; this.formOptions.scope = this.$element[0];
this.initContainer(); this.initContainer();
//flag to hide container, when saving value will finish //flag to hide container, when saving value will finish
this.delayedHide = false; this.delayedHide = false;
//bind 'destroyed' listener to destroy container when element is removed from dom //bind 'destroyed' listener to destroy container when element is removed from dom
this.$element.on('destroyed', $.proxy(function(){ this.$element.on('destroyed', $.proxy(function(){
this.destroy(); this.destroy();
}, this)); }, this));
//attach document handler to close containers on click / escape //attach document handler to close containers on click / escape
if(!$(document).data('editable-handlers-attached')) { if(!$(document).data('editable-handlers-attached')) {
//close all on escape //close all on escape
$(document).on('keyup.editable', function (e) { $(document).on('keyup.editable', function (e) {
if (e.which === 27) { if (e.which === 27) {
$('.editable-open').editableContainer('hide'); $('.editable-open').editableContainer('hide', 'cancel');
//todo: return focus on element //todo: return focus on element
} }
}); });
//close containers when click outside //close containers when click outside
//(mousedown could be better than click, it closes everything also on drag drop) //(mousedown could be better than click, it closes everything also on drag drop)
$(document).on('click.editable', function(e) { $(document).on('click.editable', function(e) {
var $target = $(e.target), i, var $target = $(e.target), i,
exclude_classes = ['.editable-container', exclude_classes = ['.editable-container',
'.ui-datepicker-header', '.ui-datepicker-header',
'.datepicker', //in inline mode datepicker is rendered into body '.datepicker', //in inline mode datepicker is rendered into body
'.modal-backdrop', '.modal-backdrop',
'.bootstrap-wysihtml5-insert-image-modal', '.bootstrap-wysihtml5-insert-image-modal',
'.bootstrap-wysihtml5-insert-link-modal' '.bootstrap-wysihtml5-insert-link-modal'
]; ];
// select2 has extra body click in IE
// see: https://github.com/ivaynberg/select2/issues/1058
if ($('.select2-drop-mask').is(':visible')) {
return;
}
//check if element is detached. It occurs when clicking in bootstrap datepicker //check if element is detached. It occurs when clicking in bootstrap datepicker
if (!$.contains(document.documentElement, e.target)) { if (!$.contains(document.documentElement, e.target)) {
return; return;
} }
//for some reason FF 20 generates extra event (click) in select2 widget with e.target = document //for some reason FF 20 generates extra event (click) in select2 widget with e.target = document
//we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199 //we need to filter it via construction below. See https://github.com/vitalets/x-editable/issues/199
//Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec //Possibly related to http://stackoverflow.com/questions/10119793/why-does-firefox-react-differently-from-webkit-and-ie-to-click-event-on-selec
if($target.is(document)) { if($target.is(document)) {
return; return;
} }
//if click inside one of exclude classes --> no nothing //if click inside one of exclude classes --> no nothing
for(i=0; i<exclude_classes.length; i++) { for(i=0; i<exclude_classes.length; i++) {
if($target.is(exclude_classes[i]) || $target.parents(exclude_classes[i]).length) { if($target.is(exclude_classes[i]) || $target.parents(exclude_classes[i]).length) {
return; return;
} }
} }
//close all open containers (except one - target) //close all open containers (except one - target)
Popup.prototype.closeOthers(e.target); Popup.prototype.closeOthers(e.target);
}); });
$(document).data('editable-handlers-attached', true); $(document).data('editable-handlers-attached', true);
} }
}, },
//split options on containerOptions and formOptions //split options on containerOptions and formOptions
splitOptions: function() { splitOptions: function() {
this.containerOptions = {}; this.containerOptions = {};
this.formOptions = {}; this.formOptions = {};
if(!$.fn[this.containerName]) { if(!$.fn[this.containerName]) {
throw new Error(this.containerName + ' not found. Have you included corresponding js file?'); throw new Error(this.containerName + ' not found. Have you included corresponding js file?');
} }
//keys defined in container defaults go to container, others go to form //keys defined in container defaults go to container, others go to form
for(var k in this.options) { for(var k in this.options) {
if(k in this.defaults) { if(k in this.defaults) {
this.containerOptions[k] = this.options[k]; this.containerOptions[k] = this.options[k];
} else { } else {
this.formOptions[k] = this.options[k]; this.formOptions[k] = this.options[k];
} }
} }
}, },
/* /*
Returns jquery object of container Returns jquery object of container
@method tip() @method tip()
*/ */
tip: function() { tip: function() {
return this.container() ? this.container().$tip : null; return this.container() ? this.container().$tip : null;
}, },
@ -135,239 +141,239 @@ Applied as jQuery method.
return container; return container;
}, },
/* call native method of underlying container, e.g. this.$element.popover('method') */ /* call native method of underlying container, e.g. this.$element.popover('method') */
call: function() { call: function() {
this.$element[this.containerName].apply(this.$element, arguments); this.$element[this.containerName].apply(this.$element, arguments);
}, },
initContainer: function(){ initContainer: function(){
this.call(this.containerOptions); this.call(this.containerOptions);
}, },
renderForm: function() { renderForm: function() {
this.$form this.$form
.editableform(this.formOptions) .editableform(this.formOptions)
.on({ .on({
save: $.proxy(this.save, this), //click on submit button (value changed) save: $.proxy(this.save, this), //click on submit button (value changed)
nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed) nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed)
cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on cancel button cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on cancel button
show: $.proxy(function() { show: $.proxy(function() {
if(this.delayedHide) { if(this.delayedHide) {
this.hide(this.delayedHide.reason); this.hide(this.delayedHide.reason);
this.delayedHide = false; this.delayedHide = false;
} else { } else {
this.setPosition(); this.setPosition();
} }
}, this), //re-position container every time form is shown (occurs each time after loading state) }, this), //re-position container every time form is shown (occurs each time after loading state)
rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed
rendered: $.proxy(function(){ rendered: $.proxy(function(){
/** /**
Fired when container is shown and form is rendered (for select will wait for loading dropdown options). Fired when container is shown and form is rendered (for select will wait for loading dropdown options).
**Note:** Bootstrap popover has own `shown` event that now cannot be separated from x-editable's one. **Note:** Bootstrap popover has own `shown` event that now cannot be separated from x-editable's one.
The workaround is to check `arguments.length` that is always `2` for x-editable. The workaround is to check `arguments.length` that is always `2` for x-editable.
@event shown @event shown
@param {Object} event event object @param {Object} event event object
@example @example
$('#username').on('shown', function(e, editable) { $('#username').on('shown', function(e, editable) {
editable.input.$input.val('overwriting value of input..'); editable.input.$input.val('overwriting value of input..');
}); });
**/ **/
/* /*
TODO: added second param mainly to distinguish from bootstrap's shown event. It's a hotfix that will be solved in future versions via namespaced events. TODO: added second param mainly to distinguish from bootstrap's shown event. It's a hotfix that will be solved in future versions via namespaced events.
*/ */
this.$element.triggerHandler('shown', $(this.options.scope).data('editable')); this.$element.triggerHandler('shown', $(this.options.scope).data('editable'));
}, this) }, this)
}) })
.editableform('render'); .editableform('render');
}, },
/** /**
Shows container with form Shows container with form
@method show() @method show()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
**/ **/
/* Note: poshytip owerwrites this method totally! */ /* Note: poshytip owerwrites this method totally! */
show: function (closeAll) { show: function (closeAll) {
this.$element.addClass('editable-open'); this.$element.addClass('editable-open');
if(closeAll !== false) { if(closeAll !== false) {
//close all open containers (except this) //close all open containers (except this)
this.closeOthers(this.$element[0]); this.closeOthers(this.$element[0]);
} }
//show container itself //show container itself
this.innerShow(); this.innerShow();
this.tip().addClass(this.containerClass); this.tip().addClass(this.containerClass);
/* /*
Currently, form is re-rendered on every show. Currently, form is re-rendered on every show.
The main reason is that we dont know, what will container do with content when closed: The main reason is that we dont know, what will container do with content when closed:
remove(), detach() or just hide() - it depends on container. remove(), detach() or just hide() - it depends on container.
Detaching form itself before hide and re-insert before show is good solution, Detaching form itself before hide and re-insert before show is good solution,
but visually it looks ugly --> container changes size before hide. but visually it looks ugly --> container changes size before hide.
*/ */
//if form already exist - delete previous data //if form already exist - delete previous data
if(this.$form) { if(this.$form) {
//todo: destroy prev data! //todo: destroy prev data!
//this.$form.destroy(); this.$form.remove();
} }
this.$form = $('<div>'); this.$form = $('<div>');
//insert form into container body //insert form into container body
if(this.tip().is(this.innerCss)) { if(this.tip().is(this.innerCss)) {
//for inline container //for inline container
this.tip().append(this.$form); this.tip().append(this.$form);
} else { } else {
this.tip().find(this.innerCss).append(this.$form); this.tip().find(this.innerCss).append(this.$form);
} }
//render form //render form
this.renderForm(); this.renderForm();
}, },
/** /**
Hides container with form Hides container with form
@method hide() @method hide()
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|undefined (=manual)</code> @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|undefined (=manual)</code>
**/ **/
hide: function(reason) { hide: function(reason) {
if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) { if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) {
return; return;
} }
//if form is saving value, schedule hide //if form is saving value, schedule hide
if(this.$form.data('editableform').isSaving) { if(this.$form.data('editableform').isSaving) {
this.delayedHide = {reason: reason}; this.delayedHide = {reason: reason};
return; return;
} else { } else {
this.delayedHide = false; this.delayedHide = false;
} }
this.$element.removeClass('editable-open'); this.$element.removeClass('editable-open');
this.innerHide(); this.innerHide();
/** /**
Fired when container was hidden. It occurs on both save or cancel. Fired when container was hidden. It occurs on both save or cancel.
**Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one. **Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one.
The workaround is to check `arguments.length` that is always `2` for x-editable. The workaround is to check `arguments.length` that is always `2` for x-editable.
@event hidden @event hidden
@param {object} event event object @param {object} event event object
@param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|manual</code> @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|nochange|manual</code>
@example @example
$('#username').on('hidden', function(e, reason) { $('#username').on('hidden', function(e, reason) {
if(reason === 'save' || reason === 'cancel') { if(reason === 'save' || reason === 'cancel') {
//auto-open next editable //auto-open next editable
$(this).closest('tr').next().find('.editable').editable('show'); $(this).closest('tr').next().find('.editable').editable('show');
} }
}); });
**/ **/
this.$element.triggerHandler('hidden', reason || 'manual'); this.$element.triggerHandler('hidden', reason || 'manual');
}, },
/* internal show method. To be overwritten in child classes */ /* internal show method. To be overwritten in child classes */
innerShow: function () { innerShow: function () {
}, },
/* internal hide method. To be overwritten in child classes */ /* internal hide method. To be overwritten in child classes */
innerHide: function () { innerHide: function () {
}, },
/** /**
Toggles container visibility (show / hide) Toggles container visibility (show / hide)
@method toggle() @method toggle()
@param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true. @param {boolean} closeAll Whether to close all other editable containers when showing this one. Default true.
**/ **/
toggle: function(closeAll) { toggle: function(closeAll) {
if(this.container() && this.tip() && this.tip().is(':visible')) { if(this.container() && this.tip() && this.tip().is(':visible')) {
this.hide(); this.hide();
} else { } else {
this.show(closeAll); this.show(closeAll);
} }
}, },
/* /*
Updates the position of container when content changed. Updates the position of container when content changed.
@method setPosition() @method setPosition()
*/ */
setPosition: function() { setPosition: function() {
//tbd in child class //tbd in child class
}, },
save: function(e, params) { save: function(e, params) {
/** /**
Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance
@event save @event save
@param {Object} event event object @param {Object} event event object
@param {Object} params additional params @param {Object} params additional params
@param {mixed} params.newValue submitted value @param {mixed} params.newValue submitted value
@param {Object} params.response ajax response @param {Object} params.response ajax response
@example @example
$('#username').on('save', function(e, params) { $('#username').on('save', function(e, params) {
//assuming server response: '{success: true}' //assuming server response: '{success: true}'
var pk = $(this).data('editableContainer').options.pk; var pk = $(this).data('editableContainer').options.pk;
if(params.response && params.response.success) { if(params.response && params.response.success) {
alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!'); alert('value: ' + params.newValue + ' with pk: ' + pk + ' saved!');
} else { } else {
alert('error!'); alert('error!');
} }
}); });
**/ **/
this.$element.triggerHandler('save', params); this.$element.triggerHandler('save', params);
//hide must be after trigger, as saving value may require methods of plugin, applied to input //hide must be after trigger, as saving value may require methods of plugin, applied to input
this.hide('save'); this.hide('save');
}, },
/** /**
Sets new option Sets new option
@method option(key, value) @method option(key, value)
@param {string} key @param {string} key
@param {mixed} value @param {mixed} value
**/ **/
option: function(key, value) { option: function(key, value) {
this.options[key] = value; this.options[key] = value;
if(key in this.containerOptions) { if(key in this.containerOptions) {
this.containerOptions[key] = value; this.containerOptions[key] = value;
this.setContainerOption(key, value); this.setContainerOption(key, value);
} else { } else {
this.formOptions[key] = value; this.formOptions[key] = value;
if(this.$form) { if(this.$form) {
this.$form.editableform('option', key, value); this.$form.editableform('option', key, value);
} }
} }
}, },
setContainerOption: function(key, value) { setContainerOption: function(key, value) {
this.call('option', key, value); this.call('option', key, value);
}, },
/** /**
Destroys the container instance Destroys the container instance
@method destroy() @method destroy()
**/ **/
destroy: function() { destroy: function() {
this.hide(); this.hide();
this.innerDestroy(); this.innerDestroy();
this.$element.off('destroyed'); this.$element.off('destroyed');
this.$element.removeData('editableContainer'); this.$element.removeData('editableContainer');
}, },
/* to be overwritten in child classes */ /* to be overwritten in child classes */
innerDestroy: function() { innerDestroy: function() {
}, },
/* /*
Closes other containers except one related to passed element. Closes other containers except one related to passed element.
Other containers can be cancelled or submitted (depends on onblur option) Other containers can be cancelled or submitted (depends on onblur option)
*/ */
closeOthers: function(element) { closeOthers: function(element) {
@ -377,14 +383,14 @@ Applied as jQuery method.
return; return;
} }
//otherwise cancel or submit all open containers //otherwise cancel or submit all open containers
var $el = $(el), var $el = $(el),
ec = $el.data('editableContainer'); ec = $el.data('editableContainer');
if(!ec) { if(!ec) {
return; return;
} }
if(ec.options.onblur === 'cancel') { if(ec.options.onblur === 'cancel') {
$el.data('editableContainer').hide('onblur'); $el.data('editableContainer').hide('onblur');
} else if(ec.options.onblur === 'submit') { } else if(ec.options.onblur === 'submit') {
@ -393,50 +399,50 @@ Applied as jQuery method.
}); });
}, },
/** /**
Activates input of visible container (e.g. set focus) Activates input of visible container (e.g. set focus)
@method activate() @method activate()
**/ **/
activate: function() { activate: function() {
if(this.tip && this.tip().is(':visible') && this.$form) { if(this.tip && this.tip().is(':visible') && this.$form) {
this.$form.data('editableform').input.activate(); this.$form.data('editableform').input.activate();
} }
} }
}; };
/** /**
jQuery method to initialize editableContainer. jQuery method to initialize editableContainer.
@method $().editableContainer(options) @method $().editableContainer(options)
@params {Object} options @params {Object} options
@example @example
$('#edit').editableContainer({ $('#edit').editableContainer({
type: 'text', type: 'text',
url: '/post', url: '/post',
pk: 1, pk: 1,
value: 'hello' value: 'hello'
}); });
**/ **/
$.fn.editableContainer = function (option) { $.fn.editableContainer = function (option) {
var args = arguments; var args = arguments;
return this.each(function () { return this.each(function () {
var $this = $(this), var $this = $(this),
dataKey = 'editableContainer', dataKey = 'editableContainer',
data = $this.data(dataKey), data = $this.data(dataKey),
options = typeof option === 'object' && option, options = typeof option === 'object' && option,
Constructor = (options.mode === 'inline') ? Inline : Popup; Constructor = (options.mode === 'inline') ? Inline : Popup;
if (!data) { if (!data) {
$this.data(dataKey, (data = new Constructor(this, options))); $this.data(dataKey, (data = new Constructor(this, options)));
} }
if (typeof option === 'string') { //call method if (typeof option === 'string') { //call method
data[option].apply(data, Array.prototype.slice.call(args, 1)); data[option].apply(data, Array.prototype.slice.call(args, 1));
} }
}); });
}; };
//store constructors //store constructors
$.fn.editableContainer.Popup = Popup; $.fn.editableContainer.Popup = Popup;
@ -445,62 +451,62 @@ Applied as jQuery method.
//defaults //defaults
$.fn.editableContainer.defaults = { $.fn.editableContainer.defaults = {
/** /**
Initial value of form input Initial value of form input
@property value @property value
@type mixed @type mixed
@default null @default null
@private @private
**/ **/
value: null, value: null,
/** /**
Placement of container relative to element. Can be <code>top|right|bottom|left</code>. Not used for inline container. Placement of container relative to element. Can be <code>top|right|bottom|left</code>. Not used for inline container.
@property placement @property placement
@type string @type string
@default 'top' @default 'top'
**/ **/
placement: 'top', placement: 'top',
/** /**
Whether to hide container on save/cancel. Whether to hide container on save/cancel.
@property autohide @property autohide
@type boolean @type boolean
@default true @default true
@private @private
**/ **/
autohide: true, autohide: true,
/** /**
Action when user clicks outside the container. Can be <code>cancel|submit|ignore</code>. Action when user clicks outside the container. Can be <code>cancel|submit|ignore</code>.
Setting <code>ignore</code> allows to have several containers open. Setting <code>ignore</code> allows to have several containers open.
@property onblur @property onblur
@type string @type string
@default 'cancel' @default 'cancel'
@since 1.1.1 @since 1.1.1
**/ **/
onblur: 'cancel', onblur: 'cancel',
/** /**
Animation speed (inline mode only) Animation speed (inline mode only)
@property anim @property anim
@type string @type string
@default false @default false
**/ **/
anim: false, anim: false,
/** /**
Mode of editable, can be `popup` or `inline` Mode of editable, can be `popup` or `inline`
@property mode @property mode
@type string @type string
@default 'popup' @default 'popup'
@since 1.4.0 @since 1.4.0
**/ **/
mode: 'popup' mode: 'popup'
}; };
/* /*
* workaround to have 'destroyed' event to destroy popover when element is destroyed * workaround to have 'destroyed' event to destroy popover when element is destroyed
* see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom * see http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom
*/ */
@ -510,6 +516,6 @@ Applied as jQuery method.
o.handler(); o.handler();
} }
} }
}; };
}(window.jQuery)); }(window.jQuery));

186
src/containers/editable-popover5.js

@ -1,123 +1,79 @@
/* /**
* Editable Popover (for Bootstrap 5, No jQuery) * Editable Popover for Bootstrap 5 based on Popper.js
* ---------------------
* requires bootstrap-popover.js
*/ */
import { Popover } from "bootstrap"; import { Popover } from "bootstrap";
class EditablePopover { (function ($) {
constructor(element, options = {}) { "use strict";
this.element = element;
this.options = Object.assign({
placement: "top",
trigger: "manual",
content: " ",
container: "body"
}, options);
this.popoverInstance = null; //extend methods
this.initPopover(); $.extend($.fn.editableContainer.Popup.prototype, {
} containerName: 'popover',
containerDataName: 'bs.popover',
innerCss: '.popover-body',
defaults: Popover.Default,
initPopover() { initContainer: function(){
this.popoverInstance = new Popover(this.element, { $.extend(this.containerOptions, {
placement: this.options.placement, trigger: 'manual',
trigger: this.options.trigger, selector: false,
content: this.options.content, content: ' ',
html: true template: this.defaults.template
}); });
if (this.element.dataset.template) { //as template property is used in inputs, hide it from popover
this.template = this.element.dataset.template; var t;
this.element.removeAttribute("data-template"); if(this.$element.data('template')) {
t = this.$element.data('template');
this.$element.removeData('template');
}
this.call(this.containerOptions);
if(t) {
//restore data('template')
this.$element.data('template', t);
}
},
/* show */
innerShow: function () {
this.call('show');
},
/* hide */
innerHide: function () {
this.call('hide');
},
/* destroy */
innerDestroy: function() {
this.call('dispose');
},
setContainerOption: function(key, value) {
this.container().options[key] = value;
},
setPosition: function () {
(function() {}).call(this.container());
},
call: function() {
if ( ! $(this.$element).data(this.containerDataName)) {
$(this.$element).data(this.containerDataName,
Popover.getOrCreateInstance(this.$element, this.containerOptions)
);
}
return this.$element[this.containerName].apply(this.$element, arguments);
},
tip: function() {
return this.container() ? $(this.container().tip) : null;
} }
});
this.show(); }(window.jQuery));
}
show() {
if (this.popoverInstance) {
this.popoverInstance.show();
}
}
hide() {
if (this.popoverInstance) {
this.popoverInstance.hide();
}
}
destroy() {
if (this.popoverInstance) {
this.popoverInstance.dispose();
this.popoverInstance = null;
}
}
setOption(key, value) {
if (this.popoverInstance) {
this.popoverInstance._config[key] = value;
}
}
setPosition() {
if (!this.popoverInstance) {
return;
}
const tip = this.element.nextElementSibling; // Popover element
if (!tip) {
return;
}
let placement = typeof this.options.placement === "function" ? this.options.placement(tip, this.element) : this.options.placement;
const autoToken = /\s?auto?\s?/i;
const autoPlace = autoToken.test(placement);
if (autoPlace) {
placement = placement.replace(autoToken, "") || "top";
}
const pos = this.element.getBoundingClientRect();
const actualWidth = tip.offsetWidth;
const actualHeight = tip.offsetHeight;
if (autoPlace) {
const parent = this.element.parentElement || document.body;
const docScroll = document.documentElement.scrollTop || document.body.scrollTop;
const parentWidth = parent === document.body ? window.innerWidth : parent.offsetWidth;
const parentHeight = parent === document.body ? window.innerHeight : parent.offsetHeight;
const parentLeft = parent === document.body ? 0 : parent.getBoundingClientRect().left;
placement = placement === "bottom" && pos.top + pos.height + actualHeight - docScroll > parentHeight ? "top" :
placement === "top" && pos.top - docScroll - actualHeight < 0 ? "bottom" :
placement === "right" && pos.right + actualWidth > parentWidth ? "left" :
placement === "left" && pos.left - actualWidth < parentLeft ? "right" :
placement;
tip.classList.remove(...["top", "bottom", "left", "right"]);
tip.classList.add(placement);
}
const calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
this.applyPlacement(tip, calculatedOffset, placement);
}
getCalculatedOffset(placement, pos, actualWidth, actualHeight) {
switch (placement) {
case "bottom":
return { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 };
case "top":
return { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 };
case "left":
return { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth };
case "right":
return { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width };
}
}
applyPlacement(tip, offset, placement) {
tip.style.top = `${offset.top}px`;
tip.style.left = `${offset.left}px`;
tip.classList.add("show", placement);
}
}

106
src/editable-form/editable-form-bootstrap5.js

@ -1,71 +1,61 @@
/* /*
Editableform based on Bootstrap 5 (No jQuery) Editableform based on Twitter Bootstrap 5
*/ */
(() => { import $ from "jquery";
(function ($) {
"use strict"; "use strict";
class EditableForm { //store parent methods
constructor(formElement, inputOptions = {}) { const pInitInput = $.fn.editableform.Constructor.prototype.initInput;
this.formElement = formElement;
this.inputOptions = inputOptions;
this.inputType = inputOptions.type || "text";
this.initInput();
}
initInput() { console.log("EditableForm:", $.fn.editableform);
// Supported input types $.extend($.fn.editableform.Constructor.prototype, {
const stdTypes = ["text", "select", "textarea", "password", "email", "url", "tel", "number", "range", "time", "typeaheadjs"]; initTemplate: function() {
this.$form = $($.fn.editableform.template);
this.$form.find('.control-group').removeClass('control-group');
this.$form.find('.editable-error-block').removeClass('help-block').addClass('invalid-feedback');
},
initInput: function() {
pInitInput.apply(this);
if (stdTypes.includes(this.inputType)) { //for bs5 set default class `form-select-sm` to standard inputs
this.formElement.classList.add("form-control", "editable"); var emptyInputClass = this.input.options.inputclass === null || this.input.options.inputclass === false;
var defaultClass = 'form-select-sm';
//bs5 add `form-select` class to standard inputs
var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time,typeaheadjs'.split(',');
if(~$.inArray(this.input.type, stdtypes)) {
this.input.$input.addClass('form-select');
if(emptyInputClass) {
this.input.options.inputclass = defaultClass;
this.input.$input.addClass(defaultClass);
}
} }
// Automatically open select dropdown when clicked //apply bs3 size class also to buttons (to fit size of control)
if (this.inputType === "select") { var $btn = this.$form.find('.editable-buttons');
setTimeout(() => { var classes = emptyInputClass ? [defaultClass] : this.input.options.inputclass.split(' ');
this.formElement.focus(); for(var i=0; i<classes.length; i++) {
this.formElement.click(); if(classes[i].toLowerCase() === 'input-lg') {
}, 50); $btn.find('button').removeClass('btn-sm').addClass('btn-lg');
}
// Apply Bootstrap 5 button size classes
const buttonContainer = this.formElement.closest(".editable-buttons");
if (buttonContainer) {
if (this.inputOptions.inputClass && this.inputOptions.inputClass.includes("input-lg")) {
buttonContainer.querySelectorAll("button").forEach(btn => btn.classList.add("btn-lg"));
} }
} }
} }
} });
// Create buttons dynamically //buttons
function createEditableButtons() { $.fn.editableform.buttons =
const btnContainer = document.createElement("div"); '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
btnContainer.classList.add("editable-buttons"); '<i class="bi bi-check"></i>'+
'</button>'+
'<button type="button" class="btn btn-secondary btn-sm editable-cancel">'+
'<i class="bi bi-x"></i>'+
'</button>';
const submitButton = document.createElement("button"); //error classes
submitButton.type = "submit"; $.fn.editableform.errorGroupClass = 'has-error';
submitButton.classList.add("btn", "btn-primary", "btn-sm", "editable-submit"); $.fn.editableform.errorBlockClass = null;
submitButton.innerHTML = '<i class="bi bi-check"></i>'; //engine
$.fn.editableform.engine = 'bs5';
const cancelButton = document.createElement("button"); }(window.jQuery));
cancelButton.type = "button";
cancelButton.classList.add("btn", "btn-secondary", "btn-sm", "editable-cancel");
cancelButton.innerHTML = '<i class="bi bi-x"></i>';
btnContainer.appendChild(submitButton);
btnContainer.appendChild(cancelButton);
return btnContainer;
}
// Apply Bootstrap 5 validation classes
function applyErrorStyles(element) {
element.classList.add("is-invalid");
const errorBlock = document.createElement("div");
errorBlock.classList.add("invalid-feedback");
errorBlock.innerText = "Invalid input"; // You can dynamically update this message
element.after(errorBlock);
}
})();

0
src/inputs/date/bootstrap-datepicker/css/datepicker.css → src/inputs/date/_bootstrap-datepicker/css/datepicker.css

0
src/inputs/date/bootstrap-datepicker/js/bootstrap-datepicker.js → src/inputs/date/_bootstrap-datepicker/js/bootstrap-datepicker.js vendored

66
test.html

@ -3,47 +3,53 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./dist/bootstrap3-editable/css/bootstrap-editable.css">
<script src="./node_modules/jquery/dist/jquery.js"></script>
<title>jQuery 3.7.1 & Bootstrap 5.3.3 Test</title> <link rel="stylesheet" href="./dist/bootstrap5-editable/css/bootstrap-editable.css">
<!-- <script src="./dist/bootstrap5-editable/js/bootstrap-editable.js"></script>-->
<!-- <script src="./dist/jquery.js"></script>-->
<script src="./dist/app.js" type="module"></script>
<title>Bootstrap 5.3.3 Test</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1 class="text-primary">jQuery 3.7.1 & Bootstrap 5.3.3 Test</h1> <h1 class="text-primary">jQuery 3.7.1 & Bootstrap 5.3.3 Test</h1>
</div> </div>
<div class="container"> <form id="test-form" action="test.php" method="post">
<h3>Test X-Editable Yes/No Switch</h3>
<p>Click on the text below to toggle Yes/No:</p>
<a href="#" id="yes-no-switch" class="editable editable-click" data-type="select" data-pk="1" data-url="/post" data-title="Select Yes/No"> <div class="container mb-3">
Yes <h3>Test X-Editable Yes/No Switch</h3>
</a> <p>Click on the text below to toggle Yes/No:</p>
</div>
<div id="debug"></div> <a
<script src="dist/bundle.js"></script> href="#"
id="yes-no-switch"
class="editable editable-click"
data-type="select"
data-pk="1"
data-title="Select Yes/No"
>
Yes
</a>
</div>
<script type="module"> <div class="container">
import './node_modules/bootstrap/dist/js/bootstrap.js'; <h3>Test X-Editable Datepicker</h3>
import './dist/bootstrap5-editable/js/bootstrap-editable.js'; <p>Click to select a date:</p>
$(function() { <a
$.fn.editable.defaults.mode = 'inline'; // You can change to 'inline' if needed href="#"
id="datepicker"
class="editable editable-click"
data-type="date"
data-pk="1"
data-title="Select Date"
>
Yes
</a>
</div>
$('#yes-no-switch').editable({ </form>
type: 'select',
source: [
{value: 'yes', text: 'Yes'},
{value: 'no', text: 'No'}
],
success: function(response, newValue) {
console.log("New value selected:", newValue);
}
});
});
</script>
</body> </body>
</html> </html>

71
test.js

@ -1,10 +1,67 @@
// debugger
import $ from 'jquery'; import $ from 'jquery';
window.jQuery = window.$ = $; window.$ = window.jQuery = $;
//
console.log("jQuery version:", $.fn?.jquery);
// // import $ from './dist/jquery';
import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-icons/font/bootstrap-icons.min.css"
import 'bootstrap/dist/css/bootstrap.min.css'; import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js";
import 'bootstrap'; import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";
import 'bootstrap-icons/font/bootstrap-icons.css';
$(function () { const Editable = require("bootstrap5-editable/js/bootstrap-editable");
// do stuff console.log("Editable:", Editable);
}); $.fn.editable.defaults.mode = 'inline';
// import("bootstrap5-editable/js/bootstrap-editable")
// .then((module) => {
// console.log("Loaded bootstrap-editable:", module);
// console.log("Module exports:", Object.keys(module)); // Log what is actually exported
// window.EditableForm = module.default || module;
// console.log("Window.EditableForm:", window.EditableForm);
// })
// .catch((err) => console.error("Error loading module:", err));
$(function() {
console.log("hello world");
$('#yes-no-switch').editable({
type: 'select',
url: 'test.php', // URL to send the POST request
source: 'test.php', // URL to fetch select options
value: 1,
success: function(response, newValue) {
console.log("Saved successfully:", response);
},
error: function(response) {
console.error("Save error:", response);
}
});
$('#datepicker').editable({
type: 'date',
url: 'test.php', // URL to send the POST request
format: 'yyyy-mm-dd', // Date format
viewformat: 'dd/mm/yyyy', // How the user sees it
datepicker: {
weekStart: 1,
autoclose: true,
todayHighlight: true
},
success: (response, newValue)=> {
console.log("Date saved successfully:", response);
},
error: (response) => {
console.error("Date save error:", response);
}
}).on('shown', (e, editable)=> {
console.log("Datepicker shown:", editable);
$(editable.input.$input).datepicker({
weekStart: 1,
autoclose: true,
todayHighlight: true
}).datepicker('show')
});
})

30
test.php Normal file

@ -0,0 +1,30 @@
<?php
header("Content-Type: application/json");
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
// Sample data for select dropdown
echo json_encode([
["value" => 1, "text" => "Yes"],
["value" => 0, "text" => "No"]
]);
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Simulate saving the data and returning success response
$input = json_decode(file_get_contents("php://input"), true);
// If JSON is empty, try to read form-encoded data
if (!$input) {
$input = $_POST;
}
if (!isset($input['name']) || !isset($input['value'])) {
http_response_code(400);
echo json_encode(["error" => "Invalid request"]);
exit;
}
// Normally, you would store this in a database, but for testing, just return success
echo json_encode(["success" => true, "newValue" => $input['value']]);
} else {
http_response_code(405); // Method Not Allowed
echo json_encode(["error" => "Method Not Allowed"]);
}

73
webpack.config.js

@ -1,46 +1,73 @@
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path"); const path = require("path");
module.exports = [ module.exports = [
// CommonJS Build // Main bundle (jQuery, Bootstrap, App)
{ {
entry: "./src/editable-form/editable-form-bootstrap5.js", entry: {
jquery: "jquery",
app: "./test.js",
},
output: { output: {
path: path.resolve(__dirname, "dist/bootstrap5-editable/js"), path: path.resolve(__dirname, "dist"), // Place them directly in dist/
filename: "bootstrap-editable.js", filename: "[name].js", // app.js, jquery.js, bootstrap.js
library: { },
type: "commonjs2" resolve: {
alias: {
jquery: path.resolve(__dirname, "node_modules/jquery"),
bootstrap: path.resolve(__dirname, "node_modules/bootstrap"),
"bootstrap5-editable": path.resolve(__dirname, "dist/bootstrap5-editable")
} }
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.css$/i, test: /\.css$/,
use: ["style-loader", "css-loader"], use: ["style-loader", "css-loader"]
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
type: "asset/resource",
generator: {
filename: "fonts/[name][ext]"
}
} }
] ]
} },
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
bootstrap: "bootstrap",
"window.bootstrap": "bootstrap"
}),
new CopyWebpackPlugin({
patterns: [
{ from: "src/editable-form/editable-form.css", to: path.resolve(__dirname, "dist/bootstrap5-editable/css") },
{ from: "node_modules/bootstrap-icons/font/fonts", to: path.resolve(__dirname, "dist/fonts") }
]
})
]
}, },
// ES Module Build // X-Editable Plugin (Bootstrap 5)
{ {
entry: "./src/editable-form/editable-form-bootstrap5.js", entry: "./src/editable-form/editable-form-bootstrap5.js",
output: { output: {
path: path.resolve(__dirname, "dist/bootstrap5-editable/js"), path: path.resolve(__dirname, "dist/bootstrap5-editable/js"), // X-Editable stays here
filename: "bootstrap-editable.esm.js", filename: "bootstrap-editable.js",
library: { library: {
type: "module" name: "EditableForm",
type: "umd"
} }
}, },
experiments: { resolve: {
outputModule: true, // Ensures Webpack treats this as an ES module alias: {
}, jquery: path.resolve(__dirname, "node_modules/jquery"),
module: { bootstrap: path.resolve(__dirname, "node_modules/bootstrap")
rules: [ }
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
]
} }
} }
]; ];