Skip to content

Commit

Permalink
Separate calendar from popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@tadatuta
AsTex authored and tadatuta committed May 7, 2017
1 parent 725c319 commit 3aec1a4
Show file tree
Hide file tree
Showing 10 changed files with 187 additions and 122 deletions.
15 changes: 5 additions & 10 deletions common.blocks/calendar/calendar.bemhtml.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
block('calendar').mix()(function() {
return {
block: 'popup',
mods: {
'has-calendar': true,
target: 'anchor',
theme: this.mods.theme
}
};
});
block('calendar')(
js()(function() {
return { val: this.ctx.val };
})
);

This comment has been minimized.

Sign in to view

Copy link
@rtemision

rtemision Sep 10, 2017

Contributor

@tadatuta
I don't understand why this is. On project-sub with this bemhtml html generated with emty data-bem attribute:

<div class="calendar calendar_theme_islands popup popup_has-calendar popup_theme_islands popup_target_anchor i-bem popup_js_inited calendar_js_inited" data-bem="{&quot;calendar&quot;:{}}"></div>

We have all of needed in bemjson:

{
  block: 'input',
  mods: {
      'has-calendar': true,
      size: 'm',
      theme: 'islands'
  },
  weekdays: ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'],
  months: ['Январь', 'Февраль', 'Март',
      'Апрель', 'Май', 'Июнь',
      'Июль', 'Август', 'Сентябрь',
      'Октябрь', 'Ноябрь', 'Декабрь'],
  val: '11.11.2015'
}

On project level fixed this with:

block('calendar')(
    js()(function(){
        return this.ctx.js || true
    })
);

This comment has been minimized.

Sign in to view

Copy link
@tadatuta

tadatuta Sep 10, 2017

Member

@rteamx that's 'coz project-stub uses new version of bem-xjst where one should use addJs() (and addAttrs()) modes instead of js() and attrs().

This comment has been minimized.

Sign in to view

Copy link
@tadatuta

tadatuta Sep 10, 2017

Member

There's an issue #29 to support new bem-xjst.
11 changes: 1 addition & 10 deletions common.blocks/calendar/calendar.bh.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,5 @@
module.exports = function(bh) {
bh.match('calendar', function(ctx) {
var mods = ctx.mods();

ctx.mix({
block: 'popup',
mods: {
'has-calendar': true,
target: 'anchor',
theme: mods.theme
}
});
ctx.js({ val: ctx.json().val });
});
};
10 changes: 2 additions & 8 deletions common.blocks/calendar/calendar.deps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,9 @@
block: 'i-bem-dom'
},
shouldDeps: [
{ block: 'jquery', elem: 'event', mods: { type: 'pointer' } },
{
elems: ['arrow', 'day', 'dayname']
},
{
block: 'popup',
mods: {
theme: 'islands',
target: 'anchor'
}
elem: ['arrow', 'day', 'dayname']
}
]
},
Expand Down
115 changes: 39 additions & 76 deletions common.blocks/calendar/calendar.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* @module calendar
*/
modules.define('calendar', ['i-bem-dom', 'BEMHTML', 'jquery', 'popup'], function(provide, bemDom, BEMHTML, $, Popup) {
modules.define('calendar', ['i-bem-dom', 'BEMHTML', 'jquery'], function(provide, bemDom, BEMHTML, $) {

function compareMonths(a, b) {
return (a.getFullYear() - b.getFullYear()) * 100 + a.getMonth() - b.getMonth();
Expand All @@ -21,20 +21,22 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{
js: {
inited: function() {
this._val = null;
this._selectedDayElem = null;
this._firstDayIndex = -1;
var today = this._getToday(),
params = this.params;

this._popup = this.findMixedBlock(Popup);

this._month = this._getToday();
this._month = today;
this._month.setDate(1);

this.setLimits(
this.params.earlierLimit,
this.params.laterLimit
);
},
this.setLimits(params.earlierLimit, params.laterLimit);

this.setVal(this._isValidDate(params.val) ? params.val : today);

if(!this._elem('container')) {
this._build();
}

'': function() {
this._popup && bemDom.destruct(this._popup.domElem);
}
}
},
Expand All @@ -58,47 +60,25 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{
var date = this.parseDate(val);
this._val = this._isValidDate(date) ? date : null;

if(this._val) {
if(this._val) {
var shouldRebuild = this._month.getMonth() !== date.getMonth() ||
this._month.getFullYear() !== date.getFullYear();

this._month = new Date(this._val.getTime());
this._month.setDate(1);
}

return this;
},

/**
* Show calendar
*
* @returns {calendar} this
*/
show: function() {
this._build();

this._popup.setMod('visible', true);

return this;
},

/**
* Hide calendar
*
* @returns {calendar} this
*/
hide: function() {
this._popup.delMod('visible');

if(!this._elem('container') || shouldRebuild) {
this._build();
} else {
this._selectDayElem(
this._elems('day')
.get(this._firstDayIndex + this._val.getDate() - 1)
);
}
}
return this;
},

/**
* Is shown calendar?
*
* @returns {boolean}
*/
isShown: function() {
return this._popup.hasMod('visible');
},

/**
* Switch month
*
Expand Down Expand Up @@ -140,30 +120,6 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{
return null;
},

/**
* Set target
*
* @param {jQuery|Function} anchor - DOM elem or anchor Bem block.
* @returns {calendar} this
*/
setAnchor: function(anchor) {
this._popup.setAnchor(anchor);

return this;
},

/**
* Sets directions for calendar.
*
* @param {Array<String>} directions - @see Popup.directions
* @returns {calendar} this
*/
setDirections: function(directions) {
this._popup.params.directions = directions;

return this;
},

/**
* Sets limits
*
Expand Down Expand Up @@ -248,7 +204,6 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{
},
_build: function() {
var rows = [];

rows.push(this._buildShortWeekdays());
rows = rows.concat(this._buildMonth(this._month));

Expand All @@ -270,8 +225,8 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{
}
]
}));

this._popup.setContent(calendar);
bemDom.update(this.domElem, calendar);
this._selectedDayElem = this.findChildElem({ elem: 'day', modName: 'state', modVal: 'current' });
},

_calcWeeks: function(month) {
Expand Down Expand Up @@ -311,7 +266,6 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{
},
_buildMonth: function(month) {
var rows = [];

this._calcWeeks(month).forEach(function(week) {
var row = [],
_this = this;
Expand All @@ -332,6 +286,9 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{

if(day && !off) {
dayElem.attrs['data-day'] = _this._formatDate(day);
if(_this._firstDayIndex === -1) {
_this._firstDayIndex = i;
}
}

if(weekend) {
Expand All @@ -352,7 +309,6 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{

return rows;
},

_buildShortWeekdays: function() {
var row = [];

Expand Down Expand Up @@ -408,20 +364,27 @@ provide(bemDom.declBlock(this.name, /** @lends calendar.prototype */{
if(!arrow.hasMod('disabled')) {
this.switchMonth(arrow.hasMod('direction', 'left') ? -1 : 1);
}

},

_onDayClick: function(e) {
var date = $(e.currentTarget).data('day');
if(!date) return;

this.setVal(date);
this.hide();

var val = this.getVal();
this._emit('change', {
value: val,
formated: this._formatDate(val)
});
},
_selectDayElem: function(element) {
if(this._selectedDayElem) {
this._selectedDayElem.delMod('state');
}
element.setMod('state', 'current');
this._selectedDayElem = element;
}
}, /** @lends calendar */ {
lazyInit: false,
Expand Down
2 changes: 1 addition & 1 deletion common.blocks/calendar/calendar.tmpl-specs/10-calendar.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="calendar calendar_theme_islands i-bem popup popup_has-calendar popup_target_anchor popup_theme_islands" data-bem="{&quot;calendar&quot;:{&quot;months&quot;:[&quot;Январь&quot;,&quot;Февраль&quot;,&quot;Март&quot;,&quot;Апрель&quot;,&quot;Май&quot;,&quot;Июнь&quot;,&quot;Июль&quot;,&quot;Август&quot;,&quot;Сентябрь&quot;,&quot;Октябрь&quot;,&quot;Ноябрь&quot;,&quot;Декабрь&quot;],&quot;weekdays&quot;:[&quot;пн&quot;,&quot;вт&quot;,&quot;ср&quot;,&quot;чт&quot;,&quot;пт&quot;,&quot;сб&quot;,&quot;вс&quot;]}}"></div>
<div class="calendar calendar_theme_islands i-bem" data-bem="{&quot;calendar&quot;:{&quot;months&quot;:[&quot;Январь&quot;,&quot;Февраль&quot;,&quot;Март&quot;,&quot;Апрель&quot;,&quot;Май&quot;,&quot;Июнь&quot;,&quot;Июль&quot;,&quot;Август&quot;,&quot;Сентябрь&quot;,&quot;Октябрь&quot;,&quot;Ноябрь&quot;,&quot;Декабрь&quot;],&quot;weekdays&quot;:[&quot;пн&quot;,&quot;вт&quot;,&quot;ср&quot;,&quot;чт&quot;,&quot;пт&quot;,&quot;сб&quot;,&quot;вс&quot;]}}"></div>
14 changes: 13 additions & 1 deletion common.blocks/input/_has-calendar/input_has-calendar.bemhtml.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ block('input').mod('has-calendar', true)(
earlierLimit: ctx.earlierLimit,
laterLimit: ctx.laterLimit,
weekdays: ctx.weekdays,
months: ctx.months
months: ctx.months,
val: ctx.val
} });
}),
elem('box').content()(function() {
Expand All @@ -16,6 +17,17 @@ block('input').mod('has-calendar', true)(
{
block: 'calendar',
mods: { theme: this.mods.theme, format: this.mods['calendar-format'] },
mix: [
{
block: 'popup',
mods:
{
'has-calendar': true,
theme: 'islands',
target: 'anchor'
}
}
],
js: this._calendar
}
];
Expand Down
14 changes: 13 additions & 1 deletion common.blocks/input/_has-calendar/input_has-calendar.bh.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ module.exports = function(bh) {
earlierLimit: json.earlierLimit,
laterLimit: json.laterLimit,
weekdays: json.weekdays,
months: json.months
months: json.months,
val: json.val
});
});

Expand All @@ -16,6 +17,17 @@ module.exports = function(bh) {
{ elem: 'calendar' },
{
block: 'calendar',
mix: [
{
block: 'popup',
mods:
{
'has-calendar': true,
theme: 'islands',
target: 'anchor'
}
}
],
mods: {
theme: ctx.node.mods.theme,
format: ctx.node.mods && ctx.node.mods['calendar-format']
Expand Down
7 changes: 7 additions & 0 deletions common.blocks/input/_has-calendar/input_has-calendar.deps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,13 @@
{
elems: 'calendar'
},
{
block: 'popup',
mods: {
theme: 'islands',
target: 'anchor'
}
},
'ua',
'calendar'
]
Expand Down
Loading

0 comments on commit 3aec1a4

Please sign in to comment.