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

refactor project structure, begin design

Browse Source
This commit is contained in:
t1m0n 2015-11-19 14:54:23 +03:00
parent d92f4ccad5
commit 9f1c522138
26 changed files with 462 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
css/style.css
View File

@ -1,70 +0,0 @@
/* -------------------------------------------------
Reset
------------------------------------------------- */
applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, u, i, center, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
body {
margin: 0; }
html, body {
width: 100%;
height: 100%; }
* {
box-sizing: border-box; }
*:after, *:before {
box-sizing: border-box; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block; }
b, strong {
font-weight: bold; }
i {
font-style: italic; }
a {
outline: none; }
textarea {
overflow: auto; }
/* -------------------------------------------------
Page styles
------------------------------------------------- */
html {
font-family: Tahoma, sans-serif;
font-size: 13px; }
.contents {
width: 960px;
margin: 0 auto;
padding: 1px 0; }
.contents article {
margin: 60px 0 30px; }

240
dist/css/datepicker.css vendored
View File

@ -8,6 +8,107 @@
background: none;
border: none; }
/* -------------------------------------------------
Datepicker cells
------------------------------------------------- */
.datepicker--cells {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.datepicker--cell {
border-radius: 2px;
cursor: pointer;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 32px;
z-index: 1; }
.datepicker--cell:hover {
background: #eee; }
.datepicker--cell.-current- {
color: #60C4F5; }
.datepicker--cell.-current-:hover {
background: rgba(96, 196, 245, 0.05); }
.datepicker--cell.-disabled- {
cursor: default;
color: #ddd;
background: none; }
.datepicker--cell.-selected- {
color: #fff;
background: skyblue; }
.datepicker--cell.-selected-.-current- {
color: #fff;
background: skyblue; }
.datepicker--days-names {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.datepicker--day-name {
color: #f5a33a;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
height: 32px;
text-align: center;
text-transform: uppercase;
font-size: 13px; }
.datepicker--cell-day {
border-radius: 50%;
width: 14.28571%; }
.datepicker--cells-months {
height: 170px; }
.datepicker--cell-month {
width: 33.33%;
height: 25%; }
.datepicker--years {
height: 170px; }
.datepicker--cells-years {
height: 170px; }
.datepicker--cell-year {
width: 25%;
height: 33.33%; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
.-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
color: #fff;
background: #def2fa; }
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
/* -------------------------------------------------
Datepicker
------------------------------------------------- */
@ -21,30 +122,46 @@
border: 1px solid #ddd;
border-radius: 2px;
box-sizing: content-box;
width: 224px;
font-family: Tahoma, sans-serif;
font-size: 14px;
color: #4a4a4a;
width: 232px;
position: absolute;
left: -100000px;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s; }
transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease; }
.datepicker.-from-top- {
transform: translateY(-8px); }
-webkit-transform: translateY(-8px);
transform: translateY(-8px); }
.datepicker.-from-right- {
transform: translateX(8px); }
-webkit-transform: translateX(8px);
transform: translateX(8px); }
.datepicker.-from-bottom- {
transform: translateY(8px); }
-webkit-transform: translateY(8px);
transform: translateY(8px); }
.datepicker.-from-left- {
transform: translateX(-8px); }
-webkit-transform: translateX(-8px);
transform: translateX(-8px); }
.datepicker.active {
opacity: 1;
transform: translate(0);
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; }
-webkit-transform: translate(0);
transform: translate(0);
transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
.datepicker-inline .datepicker {
position: static;
left: auto;
right: auto;
opacity: 1;
transform: none; }
-webkit-transform: none;
transform: none; }
.datepicker-inline .datepicker--pointer {
display: none; }
.datepicker--content {
padding: 2px; }
@ -58,16 +175,20 @@
height: 10px; }
.-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
top: calc(100% - 4px);
transform: rotate(135deg); }
-webkit-transform: rotate(135deg);
transform: rotate(135deg); }
.-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
right: calc(100% - 4px);
transform: rotate(225deg); }
-webkit-transform: rotate(225deg);
transform: rotate(225deg); }
.-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
bottom: calc(100% - 4px);
transform: rotate(315deg); }
-webkit-transform: rotate(315deg);
transform: rotate(315deg); }
.-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
left: calc(100% - 4px);
transform: rotate(45deg); }
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
left: 8px; }
.-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
@ -86,19 +207,6 @@
.datepicker--body.active {
display: block; }
.datepicker--days-names {
display: flex;
flex-wrap: wrap; }
.datepicker--day-name {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 32px;
height: 32px;
text-align: center; }
.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
color: #ddd;
font-size: .9em; }
@ -113,18 +221,27 @@
Navigation
------------------------------------------------- */
.datepicker--nav {
border-bottom: 1px solid #ddd;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 2px;
height: 32px; }
.datepicker--nav-title,
.datepicker--nav-action {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center; }
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.datepicker--nav-action {
width: 32px;
@ -144,6 +261,8 @@
background: none; }
.datepicker--buttons {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 1px 2px; }
@ -152,10 +271,18 @@
cursor: pointer;
border-radius: 2px;
margin: 0 1px;
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
justify-content: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 24px; }
.datepicker--button:hover {
background: #eaeaea; }
@ -169,50 +296,3 @@
.datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
background: none;
border: none; }
/* -------------------------------------------------
Datepicker cells
------------------------------------------------- */
.datepicker--cells {
display: flex;
flex-wrap: wrap; }
.datepicker--cell {
border-radius: 2px;
color: #333;
cursor: pointer;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
z-index: 1; }
.datepicker--cell:hover {
background: #eee; }
.datepicker--cell.-current- {
color: #60C4F5; }
.datepicker--cell.-current-:hover {
background: rgba(96, 196, 245, 0.05); }
.datepicker--cell.-disabled- {
cursor: default;
color: #ddd;
background: none; }
.datepicker--cell.-selected- {
color: #fff;
background: skyblue; }
.datepicker--cell.-selected-.-current- {
color: #fff;
background: skyblue; }
.datepicker--cell-day {
border-radius: 50%;
width: 14.28571%; }
.datepicker--cell-month {
width: 33.33%;
height: 40px; }
.datepicker--cell-year {
width: 25%;
height: 40px; }

1
dist/css/datepicker.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

282
dist/js/datepicker.js vendored
View File

@ -711,147 +711,6 @@ var Datepicker;
};
})(window, jQuery);
;(function () {
var template = '' +
'<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
'<div class="datepicker--nav-title">#{title}</div>' +
'<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
Datepicker.Navigation = function (d, opts) {
this.d = d;
this.opts = opts;
this.$buttonsContainer = '';
this.init();
};
Datepicker.Navigation.prototype = {
init: function () {
this._buildBaseHtml();
this._bindEvents();
},
_bindEvents: function () {
this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this));
this.d.$datepicker.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this));
},
_buildBaseHtml: function () {
this._render();
this._addButtonsIfNeed();
},
_addButtonsIfNeed: function () {
if (this.opts.todayButton) {
this._addButton('today')
}
if (this.opts.clearButton) {
this._addButton('clear')
}
},
_render: function () {
var title = this._getTitle(this.d.currentDate),
html = Datepicker.template(template, $.extend({title: title}, this.opts));
this.d.$nav.html(html);
if (this.d.view == 'years') {
$('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
}
this.setNavStatus();
},
_getTitle: function (date) {
return this.d.formatDate(this.opts.navTitles[this.d.view], date)
},
_addButton: function (type) {
if (!this.$buttonsContainer.length) {
this._addButtonsContainer();
}
var data = {
action: type,
label: this.d.loc[type]
},
html = Datepicker.template(button, data);
this.$buttonsContainer.append(html);
},
_addButtonsContainer: function () {
this.d.$datepicker.append(buttonsContainerTemplate);
this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker);
},
setNavStatus: function () {
if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
var date = this.d.parsedDate,
m = date.month,
y = date.year,
d = date.date;
switch (this.d.view) {
case 'days':
if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
this._disableNav('next')
}
break;
case 'months':
if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
this._disableNav('next')
}
break;
case 'years':
if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
this._disableNav('next')
}
break;
}
},
_disableNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
},
_activateNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
},
_onClickNavButton: function (e) {
var $el = $(e.target),
action = $el.data('action');
this.d[action]();
},
_onClickNavTitle: function (e) {
if ($(e.target).hasClass('-disabled-')) return;
if (this.d.view == 'days') {
return this.d.view = 'months'
}
this.d.view = 'years';
}
}
})();
;(function () {
var templates = {
days:'' +
@ -1131,3 +990,144 @@ var Datepicker;
}
};
})();
;(function () {
var template = '' +
'<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
'<div class="datepicker--nav-title">#{title}</div>' +
'<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
Datepicker.Navigation = function (d, opts) {
this.d = d;
this.opts = opts;
this.$buttonsContainer = '';
this.init();
};
Datepicker.Navigation.prototype = {
init: function () {
this._buildBaseHtml();
this._bindEvents();
},
_bindEvents: function () {
this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this));
this.d.$datepicker.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this));
},
_buildBaseHtml: function () {
this._render();
this._addButtonsIfNeed();
},
_addButtonsIfNeed: function () {
if (this.opts.todayButton) {
this._addButton('today')
}
if (this.opts.clearButton) {
this._addButton('clear')
}
},
_render: function () {
var title = this._getTitle(this.d.currentDate),
html = Datepicker.template(template, $.extend({title: title}, this.opts));
this.d.$nav.html(html);
if (this.d.view == 'years') {
$('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
}
this.setNavStatus();
},
_getTitle: function (date) {
return this.d.formatDate(this.opts.navTitles[this.d.view], date)
},
_addButton: function (type) {
if (!this.$buttonsContainer.length) {
this._addButtonsContainer();
}
var data = {
action: type,
label: this.d.loc[type]
},
html = Datepicker.template(button, data);
this.$buttonsContainer.append(html);
},
_addButtonsContainer: function () {
this.d.$datepicker.append(buttonsContainerTemplate);
this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker);
},
setNavStatus: function () {
if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
var date = this.d.parsedDate,
m = date.month,
y = date.year,
d = date.date;
switch (this.d.view) {
case 'days':
if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
this._disableNav('next')
}
break;
case 'months':
if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
this._disableNav('next')
}
break;
case 'years':
if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
this._disableNav('next')
}
break;
}
},
_disableNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
},
_activateNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
},
_onClickNavButton: function (e) {
var $el = $(e.target),
action = $el.data('action');
this.d[action]();
},
_onClickNavTitle: function (e) {
if ($(e.target).hasClass('-disabled-')) return;
if (this.d.view == 'days') {
return this.d.view = 'months'
}
this.d.view = 'years';
}
}
})();

1
dist/js/datepicker.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

0
js/datepicker/i18n/datepicker.en.js → dist/js/i18n/datepicker.en.js vendored
View File

48
gulpfile.js
View File

@ -1,56 +1,30 @@
var gulp = require('gulp'),
watch = require('gulp-watch'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
livereload = require('gulp-livereload'),
concat = require('gulp-concat');
livereload = require('gulp-livereload');
gulp.task('js', function () {
gulp.src(['js/datepicker/datepicker.js',
'js/datepicker/navigation.js',
'js/datepicker/body.js'])
.pipe(concat('datepicker.js'))
.pipe(gulp.dest('dist/js/'))
.pipe(livereload())
});
gulp.task('css', require('./tasks/css'));
gulp.task('js', require('./tasks/js'));
gulp.task('i18n', require('./tasks/i18n'));
gulp.task('cssPage', require('./tasks/cssPage'));
gulp.task('sass', function () {
gulp.src('sass/datepicker.scss')
.pipe(sass().on('error', sass.logError))
.pipe(rename('datepicker.css'))
.pipe(gulp.dest('dist/css/'))
.pipe(livereload())
});
gulp.task('locale', function () {
gulp.src('js/datepicker/i18n/*.js')
.pipe(gulp.dest('dist/js/i18n'))
});
gulp.task('build', ['js', 'sass', 'locale']);
gulp.task('pageSass', function () {
gulp.src('sass/page-init.scss')
.pipe(sass().on('error', sass.logError))
.pipe(rename('style.css'))
.pipe(gulp.dest('css/'))
.pipe(livereload())
});
gulp.task('watch', function () {
livereload.listen();
gulp.watch('sass/**/*.scss', ['pageSass', 'sass']).on('change', function (file) {
gulp.watch('src/sass/*.scss', ['css']).on('change', function (file) {
livereload.changed(file)
});
gulp.watch('js/**/*.js', ['js']).on('change', function (file) {
gulp.watch('src/js/**/*.js', ['js']).on('change', function (file) {
livereload.changed(file)
});
gulp.watch('page/sass/*.scss', ['cssPage']).on('change', function (file) {
livereload.changed(file)
});
});
gulp.task('default', ['build', 'pageSass', 'watch']);

7
index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Datepicker</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="page/css/style.css"/>
<link rel="stylesheet" href="dist/css/datepicker.css"/>
<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
</head>
@ -40,14 +40,15 @@
<script type="text/javascript" src="dist/js/i18n/datepicker.en.js"></script>
<script type="text/javascript">
var $start = $('[name="start"]'),
$end = $('[name="end"]');
$end = $('[name="end"]').hide();
$start.datepicker({
inline: true,
onSelect: function (format, date) {
$end.data('datepicker')
.update('minDate', date)
}
})
}).data('datepicker').show()
$end.datepicker({
position: 'right top',
onSelect: function (format, date) {

4
package.json
View File

@ -2,9 +2,13 @@
"name": "datepicker",
"version": "0.0.1",
"devDependencies": {
"autoprefixer": "^6.1.0",
"gulp": "^3.9.0",
"gulp-clone": "^1.0.0",
"gulp-concat": "^2.6.0",
"gulp-livereload": "^3.8.0",
"gulp-minify-css": "^1.2.1",
"gulp-postcss": "^6.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.2.0",

1
page/css/style.css Normal file
View File

@ -0,0 +1 @@
html{font-family:Tahoma,sans-serif;font-size:13px}.contents{width:960px;margin:0 auto;padding:1px 0}.contents article{margin:60px 0 30px}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0}textarea{overflow:auto}

0
sass/_page.scss → page/sass/page.scss
View File

0
sass/_reset.scss → page/sass/reset.scss
View File

3
sass/datepicker.scss
View File

@ -1,3 +0,0 @@
@import "datepicker/datepicker";
@import "datepicker/navigation";
@import "datepicker/cell";

2
sass/page-init.scss
View File

@ -1,2 +0,0 @@
@import "reset";
@import "page";

0
js/datepicker/body.js → src/js/body.js
View File

0
js/datepicker/datepicker.js → src/js/datepicker.js
View File

11
src/js/i18n/datepicker.en.js Normal file
View File

@ -0,0 +1,11 @@
Datepicker.language['en'] = {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
today: 'Today',
clear: 'Clear',
dateFormat: 'mm/dd/yy',
firstDay: 0
};

0
js/datepicker/navigation.js → src/js/navigation.js
View File

12
sass/datepicker/datepicker-config.scss → src/sass/_datepicker-config.scss
View File

@ -1,9 +1,17 @@
$dayCellSize: 32px;
$datepickerWidth: 7 * $dayCellSize;
$datepickerWidth: 232px;
$datepickerMinBodyHeight: 170px;
$datepickerBorderRadius: 2px;
$datepickerPadding: 2px;
$fontFamily: Tahoma;
$fontSize: 14px;
$yearsPerRow: 4;
$textColor: #333;
$textColor: (
common: #4a4a4a,
dayNames: #f5a33a,
);
$navigationHeight: 32px;
$navigationButtonsOffset: 1px;

41
sass/datepicker/_cell.scss → src/sass/cell.scss
View File

@ -11,13 +11,11 @@
.datepicker--cell {
border-radius: $datepickerBorderRadius;
color: $textColor;
cursor: pointer;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: $dayCellSize;
height: $dayCellSize;
z-index: 1;
@ -50,6 +48,26 @@
}
}
// Day names
// -------------------------------------------------
.datepicker--days-names {
display: flex;
flex-wrap: wrap;
}
.datepicker--day-name {
color: map_get($textColor, dayNames);
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: $dayCellSize;
text-align: center;
text-transform: uppercase;
font-size: 13px;
}
// Day cell
// -------------------------------------------------
@ -68,25 +86,34 @@
.datepicker--months {}
// Month cells
.datepicker--cells-months {
height: $datepickerMinBodyHeight;
}
// Month cell
// -------------------------
.datepicker--cell-month {
width: 33.33%;
height: 40px;
height: 25%;
}
// Years
// -------------------------------------------------
.datepicker--years {}
.datepicker--years {
height: $datepickerMinBodyHeight;
}
// Month cells
.datepicker--cells-years {
height: $datepickerMinBodyHeight;
}
// Year cell
// -------------------------
.datepicker--cell-year {
width: 100% / $yearsPerRow;
height: 40px;
height: 33.33%;
&.-other-decade- {
@extend %otherMonth;

29
sass/datepicker/_datepicker.scss → src/sass/datepicker.scss
View File

@ -15,6 +15,9 @@
border: 1px solid $borderColor;
border-radius: $datepickerBorderRadius;
box-sizing: content-box;
font-family: $fontFamily, sans-serif;
font-size: $fontSize;
color: map_get($textColor, common);
width: $datepickerWidth;
position: absolute;
left: -100000px;
@ -50,6 +53,10 @@
opacity: 1;
transform: none;
}
.datepicker--pointer {
display: none;
}
}
.datepicker--content {
@ -125,24 +132,4 @@ $pointerHalfSize: $pointerSize / 2 - 1;
&.active {
display: block;
}
}
// Day names
// -------------------------
.datepicker--days-names {
display: flex;
flex-wrap: wrap;
}
.datepicker--day-name {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: $dayCellSize;
height: $dayCellSize;
text-align: center;
}
}

1
sass/datepicker/_navigation.scss → src/sass/navigation.scss
View File

@ -5,7 +5,6 @@
------------------------------------------------- */
.datepicker--nav {
border-bottom: 1px solid $colorGrey;
display: flex;
justify-content: space-between;
padding: $datepickerPadding;

24
tasks/css.js Normal file
View File

@ -0,0 +1,24 @@
var gulp = require('gulp'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer')({ browsers: ['last 2 versions'] }),
clone = require('gulp-clone'),
minify = require('gulp-minify-css'),
concat = require('gulp-concat');
module.exports = function () {
var stream = gulp.src('src/sass/*.scss')
.pipe(concat('datepicker.scss'))
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer]));
stream.pipe(clone())
.pipe(minify())
.pipe(rename('datepicker.min.css'))
.pipe(gulp.dest('dist/css'));
stream.pipe(clone())
.pipe(rename('datepicker.css'))
.pipe(gulp.dest('dist/css'))
};

17
tasks/cssPage.js Normal file
View File

@ -0,0 +1,17 @@
var gulp = require('gulp'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer')({ browsers: ['last 2 versions'] }),
clone = require('gulp-clone'),
minify = require('gulp-minify-css'),
concat = require('gulp-concat');
module.exports = function () {
gulp.src('page/sass/*.scss')
.pipe(concat('style.css'))
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer]))
.pipe(minify())
.pipe(gulp.dest('page/css'))
};

11
tasks/i18n.js Normal file
View File

@ -0,0 +1,11 @@
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
clone = require('gulp-clone'),
concat = require('gulp-concat');
module.exports = function () {
gulp.src('src/js/i18n/*.js')
.pipe(gulp.dest('dist/js/i18n'))
};

24
tasks/js.js Normal file
View File

@ -0,0 +1,24 @@
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
clone = require('gulp-clone'),
concat = require('gulp-concat');
module.exports = function () {
var stream = gulp.src([
'src/js/datepicker.js',
'src/js/body.js',
'src/js/navigation.js'
])
.pipe(concat('datepicker.js'));
stream.pipe(clone())
.pipe(gulp.dest('dist/js'));
stream.pipe(clone())
.pipe(uglify())
.pipe(rename('datepicker.min.js'))
.pipe(gulp.dest('dist/js'))
};