jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 02:49:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

add visual tests, change mousemove instead of mouseenter in timepicker

Browse Source
This commit is contained in:
t1m0n 2016-05-05 16:35:54 +03:00
parent 001894484b
commit 920bab5032
9 changed files with 172 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/js/datepicker.js vendored
View File

@ -1029,7 +1029,6 @@
},
_onShowEvent: function (e) {
console.log(e.type);
if (!this.visible) {
this.show();
}
@ -1884,7 +1883,7 @@
this.d.$el.on('selectDate', this._onSelectDate.bind(this));
this.$ranges.on(input, this._onChangeRange.bind(this));
this.$ranges.on('mouseup', this._onMouseUpRange.bind(this));
this.$ranges.on('mouseenter focus ', this._onMouseEnterRange.bind(this));
this.$ranges.on('mousemove focus ', this._onMouseEnterRange.bind(this));
this.$ranges.on('mouseout blur', this._onMouseOutRange.bind(this));
},

4
dist/js/datepicker.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/css/style.css
View File

File diff suppressed because one or more lines are too long

68
docs/sass/_docs.scss
View File

@ -438,4 +438,72 @@ a {
background: #fff;
opacity: .5;
}
}
// Visual tests
// -------------------------------------------------
.visual-tests {
padding-top: 12px;
padding-bottom: 120px;
h1 {
color: #555;
font-size: 20px;
margin: 0;
padding-left: 16px;
}
.row {
border-bottom: 1px solid #eee;
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
}
article:last-child {
.row {
border: none;
}
}
}
.vt-tile {
padding: 16px;
width: 284px;
input {
width: 100%;
}
h2 {
font-family: monospace;
font-size: 14px;
margin: 0 0 8px;
text-align: center;
}
}
.v-log {
position: fixed;
padding: 8px;
font-size: 12px;
font-family: monospace;
background: rgba(0, 0, 0, .7);
height: 100px;
width: 100%;
bottom: 0;
overflow: auto;
z-index: 10;
p {
margin: 0;
color: greenyellow;
}
span {
color: #ddd;
}
}

3
package.json
View File

@ -19,6 +19,7 @@
"gulp-watch": "^4.3.5",
"gulp-wrap": "^0.11.0",
"jade": "^1.11.0",
"mocha": "^2.3.4"
"mocha": "^2.3.4",
"node-static": "^0.7.7"
}
}

1
src/js/datepicker.js
View File

@ -1029,7 +1029,6 @@
},
_onShowEvent: function (e) {
console.log(e.type);
if (!this.visible) {
this.show();
}

2
src/js/timepicker.js
View File

@ -37,7 +37,7 @@
this.d.$el.on('selectDate', this._onSelectDate.bind(this));
this.$ranges.on(input, this._onChangeRange.bind(this));
this.$ranges.on('mouseup', this._onMouseUpRange.bind(this));
this.$ranges.on('mouseenter focus ', this._onMouseEnterRange.bind(this));
this.$ranges.on('mousemove focus ', this._onMouseEnterRange.bind(this));
this.$ranges.on('mouseout blur', this._onMouseOutRange.bind(this));
},

10
static-server.js Normal file
View File

@ -0,0 +1,10 @@
var static = require('node-static'),
http = require('http');
var file = new static.Server('.');
http.createServer(function (request, response) {
request.addListener('end', function () {
file.serve(request, response);
}).resume();
}).listen(3000);

87
visual-tests.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Air datepicker visual tests</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/datepicker.js"></script>
<link rel="stylesheet" href="dist/css/datepicker.css"/>
<link rel="stylesheet" href="docs/css/style.css"/>
<script type="text/javascript">
var log;
function logger (el) {
var $el = $(el);
return function(text) {
var count = $('p', $el).length;
$el.append('<p><span>' + count++ + '.</span> ' + text + '</p>').scrollTop(100000)
}
}
$(function () {
log = logger('#v-log');
})
</script>
</head>
<body>
<div class="v-log" id="v-log"></div>
<div class="visual-tests">
<article>
<h1>Basic</h1>
<div class="row">
<div class="vt-tile">
<h2>Default</h2>
<div class="datepicker-here"></div>
</div>
</div>
</article>
<article>
<h1>Range</h1>
<div class="row">
<div class="vt-tile">
<h2>{range: true}</h2>
<div class="datepicker-here" data-range="true"></div>
</div>
<div class="vt-tile">
<h2>{range: true, onSelect: ...}</h2>
<div class="datepicker-here" id="dp-3" data-range="true"></div>
<script type="text/javascript">
$('#dp-3').datepicker({
onSelect: function (fd) {
log(fd)
}
})
</script>
</div>
<div class="vt-tile">
<h2>{range: true, onSelect: ...}</h2>
<input class="datepicker-here" id="dp-4" data-range="true"/>
<script type="text/javascript">
$('#dp-4').datepicker({
onSelect: function (fd) {
log(fd)
}
})
</script>
</div>
</div>
</article>
<article>
<h1>Timepicker</h1>
<div class="row">
<div class="vt-tile">
<h2>{timepicker: true}</h2>
<div class="datepicker-here" data-timepicker="true"></div>
</div>
<div class="vt-tile">
<h2>{timepicker: true}</h2>
<input class="datepicker-here" data-timepicker="true" />
</div>
</div>
</article>
</div>
</body>
</html>