From 24c1c8f89d85dae5d1eb8471302d3ea10ab3c1e7 Mon Sep 17 00:00:00 2001 From: t1m0n Date: Mon, 12 Oct 2015 14:48:15 +0300 Subject: [PATCH] add navigation module --- dist/css/datepicker.css | 24 ++++++- dist/js/datepicker.js | 92 ++++++++++++++++++++------ gulpfile.js | 6 +- js/datepicker/body.js | 6 +- js/datepicker/datepicker.js | 48 +++++++++----- js/datepicker/i18n.js | 3 +- js/datepicker/navigation.js | 34 ++++++++++ sass/datepicker.scss | 1 + sass/datepicker/_datepicker.scss | 3 +- sass/datepicker/_navigation.scss | 28 ++++++++ sass/datepicker/datepicker-config.scss | 10 ++- 11 files changed, 209 insertions(+), 46 deletions(-) create mode 100644 js/datepicker/navigation.js create mode 100644 sass/datepicker/_navigation.scss diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index 0903e98..7c5359a 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -2,7 +2,8 @@ Datepicker ------------------------------------------------- */ .datepicker { - border: 1px solid #dddddd; + border: 1px solid #ddd; + border-radius: 2px; box-sizing: content-box; width: 224px; } @@ -18,6 +19,27 @@ height: 32px; text-align: center; } +/* ------------------------------------------------- + Navigation + ------------------------------------------------- */ +.datepicker--nav { + border-bottom: 1px solid #ddd; + display: flex; + justify-content: space-between; + height: 32px; } + +.datepicker--nav-title, +.datepicker--nav-action { + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; } + +.datepicker--nav-action { + width: 32px; } + .datepicker--nav-action:hover { + background: #f6f6f6; } + /* ------------------------------------------------- Datepicker cells ------------------------------------------------- */ diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js index f541e36..d17b5f2 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -5,7 +5,7 @@ var Datepicker; $body, $datepickersContainer, baseTemplate = '' + '
' + - '
' + + '' + '
' + '
', defaults = { @@ -14,7 +14,11 @@ var Datepicker; firstDay: 1, // Week's first day start: '', // Start date weekends: [6, 0], - format: 'dd.mm.yyyy' + format: 'dd.mm.yyyy', + + // navigation + prevHtml: '«', + nextHtml: '»' }; Datepicker = function (el, options) { @@ -35,28 +39,19 @@ var Datepicker; $body = $('body'); } + this.currentDate = this.opts.start; + this.init() }; - Datepicker.getDaysCount = function (date) { - return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); - }; - - Datepicker.getParsedDate = function (date) { - return { - year: date.getUTCFullYear(), - month: date.getUTCMonth(), - day: date.getUTCDay() - } - }; Datepicker.prototype = { containerBuilt: false, init: function () { this._buildBaseHtml(); - this.days = new Datepicker.Body(this, 'days', this.opts) - + this.nav = new Datepicker.Navigation(this, this.opts); + this.days = new Datepicker.Body(this, 'days', this.opts); }, isWeekend: function (day) { @@ -77,7 +72,7 @@ var Datepicker; } this.$datepicker = $(baseTemplate).appendTo($appendTarget); this.$content = $('.datepicker--content', this.$datepicker); - this.$header = $('.datepicker--header', this.$datepicker); + this.$nav = $('.datepicker--nav', this.$datepicker); }, _defineDOM: function () { @@ -85,6 +80,27 @@ var Datepicker; } }; + + Datepicker.getDaysCount = function (date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); + }; + + Datepicker.getParsedDate = function (date) { + return { + year: date.getUTCFullYear(), + month: date.getUTCMonth(), + day: date.getUTCDay() + } + }; + + Datepicker.template = function (str, data) { + return str.replace(/#\{([\w]+)\}/g, function (source, match) { + if (data[match] || data[match] === 0) { + return data[match] + } + }); + }; + $.fn[pluginName] = function ( options ) { if (Datepicker.prototype[options]) { Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1)); @@ -109,11 +125,47 @@ var Datepicker; ;(function () { Datepicker.region = { 'ru': { - days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'] + days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'], + months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'] } } })(); +;(function () { + var template = '' + + '
#{prevHtml}
' + + '
#{title}
' + + '
#{nextHtml}
'; + + Datepicker.Navigation = function (d, opts) { + this.d = d; + this.opts = opts; + + this.init(); + }; + + Datepicker.Navigation.prototype = { + init: function () { + this._buildBaseHtml(); + }, + + _buildBaseHtml: function () { + var title = this._getTitle(this.d.currentDate); + html = Datepicker.template(template, $.extend({title: title}, this.opts)); + + this.d.$nav.html(html); + }, + + _getTitle: function (date) { + var month = this.d.loc.months[date.getUTCMonth()], + year = date.getUTCFullYear(); + + return month + ', ' + year; + } + } + +})(); + Datepicker.Cell = function () { }; @@ -131,8 +183,6 @@ Datepicker.Cell = function () { this.type = type; this.opts = opts; - this.viewDate = opts.start; - this.init(); }; @@ -192,14 +242,14 @@ Datepicker.Cell = function () { var _class = "datepicker--cell datepicker--cell-day"; if (this.d.isWeekend(date.getDay())) _class += " -weekend-"; - if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-"; + if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-"; return '
' + date.getDate() + '
'; }, _renderDays: function () { var dayNames = this._getDayNamesHtml(this.opts.firstDay), - days = this._getDaysHtml(this.viewDate); + days = this._getDaysHtml(this.d.currentDate); this.$cells.html(days); this.$names.html(dayNames) diff --git a/gulpfile.js b/gulpfile.js index 31443f7..cd84212 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,7 +6,11 @@ var gulp = require('gulp'), concat = require('gulp-concat'); gulp.task('js', function () { - gulp.src(['js/datepicker/datepicker.js', 'js/datepicker/i18n.js', 'js/datepicker/cell.js', 'js/datepicker/body.js']) + gulp.src(['js/datepicker/datepicker.js', + 'js/datepicker/i18n.js', + 'js/datepicker/navigation.js', + 'js/datepicker/cell.js', + 'js/datepicker/body.js']) .pipe(concat('datepicker.js')) .pipe(gulp.dest('dist/js/')) .pipe(livereload()) diff --git a/js/datepicker/body.js b/js/datepicker/body.js index d3c3e19..de90e9e 100644 --- a/js/datepicker/body.js +++ b/js/datepicker/body.js @@ -12,8 +12,6 @@ this.type = type; this.opts = opts; - this.viewDate = opts.start; - this.init(); }; @@ -73,14 +71,14 @@ var _class = "datepicker--cell datepicker--cell-day"; if (this.d.isWeekend(date.getDay())) _class += " -weekend-"; - if (date.getMonth() != this.viewDate.getMonth()) _class += " -another-month-"; + if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-"; return '
' + date.getDate() + '
'; }, _renderDays: function () { var dayNames = this._getDayNamesHtml(this.opts.firstDay), - days = this._getDaysHtml(this.viewDate); + days = this._getDaysHtml(this.d.currentDate); this.$cells.html(days); this.$names.html(dayNames) diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js index a475f1d..7578ba3 100644 --- a/js/datepicker/datepicker.js +++ b/js/datepicker/datepicker.js @@ -5,7 +5,7 @@ var Datepicker; $body, $datepickersContainer, baseTemplate = '' + '
' + - '
' + + '' + '
' + '
', defaults = { @@ -14,7 +14,11 @@ var Datepicker; firstDay: 1, // Week's first day start: '', // Start date weekends: [6, 0], - format: 'dd.mm.yyyy' + format: 'dd.mm.yyyy', + + // navigation + prevHtml: '«', + nextHtml: '»' }; Datepicker = function (el, options) { @@ -35,28 +39,19 @@ var Datepicker; $body = $('body'); } + this.currentDate = this.opts.start; + this.init() }; - Datepicker.getDaysCount = function (date) { - return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); - }; - - Datepicker.getParsedDate = function (date) { - return { - year: date.getUTCFullYear(), - month: date.getUTCMonth(), - day: date.getUTCDay() - } - }; Datepicker.prototype = { containerBuilt: false, init: function () { this._buildBaseHtml(); - this.days = new Datepicker.Body(this, 'days', this.opts) - + this.nav = new Datepicker.Navigation(this, this.opts); + this.days = new Datepicker.Body(this, 'days', this.opts); }, isWeekend: function (day) { @@ -77,7 +72,7 @@ var Datepicker; } this.$datepicker = $(baseTemplate).appendTo($appendTarget); this.$content = $('.datepicker--content', this.$datepicker); - this.$header = $('.datepicker--header', this.$datepicker); + this.$nav = $('.datepicker--nav', this.$datepicker); }, _defineDOM: function () { @@ -85,6 +80,27 @@ var Datepicker; } }; + + Datepicker.getDaysCount = function (date) { + return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); + }; + + Datepicker.getParsedDate = function (date) { + return { + year: date.getUTCFullYear(), + month: date.getUTCMonth(), + day: date.getUTCDay() + } + }; + + Datepicker.template = function (str, data) { + return str.replace(/#\{([\w]+)\}/g, function (source, match) { + if (data[match] || data[match] === 0) { + return data[match] + } + }); + }; + $.fn[pluginName] = function ( options ) { if (Datepicker.prototype[options]) { Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1)); diff --git a/js/datepicker/i18n.js b/js/datepicker/i18n.js index 2ed4221..4b61fd0 100644 --- a/js/datepicker/i18n.js +++ b/js/datepicker/i18n.js @@ -1,7 +1,8 @@ ;(function () { Datepicker.region = { 'ru': { - days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'] + days: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'], + months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'] } } })(); diff --git a/js/datepicker/navigation.js b/js/datepicker/navigation.js new file mode 100644 index 0000000..ff2be68 --- /dev/null +++ b/js/datepicker/navigation.js @@ -0,0 +1,34 @@ +;(function () { + var template = '' + + '
#{prevHtml}
' + + '
#{title}
' + + '
#{nextHtml}
'; + + Datepicker.Navigation = function (d, opts) { + this.d = d; + this.opts = opts; + + this.init(); + }; + + Datepicker.Navigation.prototype = { + init: function () { + this._buildBaseHtml(); + }, + + _buildBaseHtml: function () { + var title = this._getTitle(this.d.currentDate); + html = Datepicker.template(template, $.extend({title: title}, this.opts)); + + this.d.$nav.html(html); + }, + + _getTitle: function (date) { + var month = this.d.loc.months[date.getUTCMonth()], + year = date.getUTCFullYear(); + + return month + ', ' + year; + } + } + +})(); diff --git a/sass/datepicker.scss b/sass/datepicker.scss index f8edb83..31103d0 100644 --- a/sass/datepicker.scss +++ b/sass/datepicker.scss @@ -1,2 +1,3 @@ @import "datepicker/datepicker"; +@import "datepicker/navigation"; @import "datepicker/cell"; \ No newline at end of file diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss index f83c7f9..406b7b4 100644 --- a/sass/datepicker/_datepicker.scss +++ b/sass/datepicker/_datepicker.scss @@ -5,7 +5,8 @@ ------------------------------------------------- */ .datepicker { - border: 1px solid #dddddd; + border: 1px solid $colorGrey; + border-radius: 2px; box-sizing: content-box; width: $datepickerWidth; } diff --git a/sass/datepicker/_navigation.scss b/sass/datepicker/_navigation.scss new file mode 100644 index 0000000..cb3c711 --- /dev/null +++ b/sass/datepicker/_navigation.scss @@ -0,0 +1,28 @@ +@import "datepicker-config"; + +/* ------------------------------------------------- + Navigation + ------------------------------------------------- */ + +.datepicker--nav { + border-bottom: 1px solid $colorGrey; + display: flex; + justify-content: space-between; + height: $navigationHeight; +} + +.datepicker--nav-title, +.datepicker--nav-action { + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; +} + +.datepicker--nav-action { + width: $dayCellSize; + + &:hover { + background: #f6f6f6; + } +} \ No newline at end of file diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss index c74aac9..1688202 100644 --- a/sass/datepicker/datepicker-config.scss +++ b/sass/datepicker/datepicker-config.scss @@ -1,5 +1,13 @@ $dayCellSize: 32px; $datepickerWidth: 7 * $dayCellSize; -$colorAnotherMonth: #ddd; +$navigationHeight: 32px; +// Colors +$colorGrey: #ddd; + +$colorAnotherMonth: #ddd; +$colorCellHover: ''; +$colorCellCurrent: ''; +$colorCellSelected: ''; +$colorCellWeekend: '';