Skip to content

Commit

Permalink
forcing drops/opens config
Browse files Browse the repository at this point in the history
  • Loading branch information
@vlio20
vlio20 committed Oct 14, 2017
1 parent a4cb2ce commit c26d168
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 22 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ Here are the available configurations:
| appendTo | `String\|HTMLElement` | `undefined` | All | The selector/element to which the calendar popup will append to (this is useful for `overflow: hidden` container issues). Please note that the `appendTo` element will be set with position `absolute` if it has position `static` (the default position). |
| locale | `String` | [`moment.locale()`](https://momentjs.com/docs/#/i18n/getting-locale/) | All | Localisation of language (see in the demo all supported locales) |
| disableKeypress | `Boolean` | `false` | All | Disables the possibility to change the date value by typing it - changing the date would be possible only from the picker |
| drops | `'up'\|'down'` | `down` | All | Whether the picker appears below or above the input element. |
| format | `String` | `"DD-MM-YYYY"` | All | If ngModel provided as `String` the format is required, this format also will be used as the input format style. |
| onOpenDelay | `Number` | `0` | All | The delay (in ms) between the date picker focusing and the date-picker popup apparel |
| opens | `'right'\|'left'` | `right` | All | Whether the picker appears aligned to the left or to the right the input element. |
| drops | `'up'\|'down'` | `undefined` down if possible | All | Whether the picker appears below or above the input element. |
| opens | `'right'\|'left'` | `undefined` right if possible | All | Whether the picker appears aligned to the left or to the right the input element. |
| closeOnSelect | `Boolean` | `true` | `day\|month` | If set to `true` will close the date-picker after choosing a date from the calender, otherwise, won't. |
| openOnClick | `Boolean` | `true` | `day\|month\|daytime` | If set to `false` will not open the date-picker when input gets clicked, otherwise, will. |
| openOnFocus | `Boolean` | `true` | `day\|month\|daytime` | If set to `false` will not open the date-picker when input gets focused, otherwise, will. |
Expand Down
34 changes: 19 additions & 15 deletions src/app/common/services/dom-appender/dom-appender.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,23 +70,27 @@ export class DomHelper {
}

setElementPosition({element, container, anchor, dimElem, drops, opens}: IAppendToArgs) {
DomHelper.setYAxisPosition(element, container, anchor, drops);
DomHelper.setXAxisPosition(element, container, anchor, dimElem, opens);

if (drops === 'down' && !DomHelper.isBottomInView(dimElem)) {
DomHelper.setYAxisPosition(element, container, anchor, 'up');
}

if (drops === 'up' && !DomHelper.isTopInView(dimElem)) {
DomHelper.setYAxisPosition(element, container, anchor, 'down');
}

if (opens === 'right' && !DomHelper.isRightInView(dimElem)) {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'left');
DomHelper.setYAxisPosition(element, container, anchor, 'down');
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');

if (drops !== 'down' && drops !== 'up') {
if (DomHelper.isBottomInView(dimElem)) {
DomHelper.setYAxisPosition(element, container, anchor, 'down');
} else if (DomHelper.isTopInView(dimElem)) {
DomHelper.setYAxisPosition(element, container, anchor, 'up');
}
} else {
DomHelper.setYAxisPosition(element, container, anchor, drops);
}

if (opens === 'left' && !DomHelper.isLeftInView(dimElem)) {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');
if (opens !== 'left' && opens !== 'right') {
if (DomHelper.isRightInView(dimElem)) {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');
} else if (DomHelper.isLeftInView(dimElem)) {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'left');
}
} else {
DomHelper.setXAxisPosition(element, container, anchor, dimElem, opens);
}
}
}
Expand Down
2 changes: 0 additions & 2 deletions src/app/date-picker/date-picker.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ export class DatePickerService {
onOpenDelay: 0,
disableKeypress: false,
showNearMonthDays: true,
drops: 'down',
opens: 'right',
showWeekNumbers: false,
enableMonthSelector: true,
showGoToCurrent: true,
Expand Down
17 changes: 16 additions & 1 deletion src/app/demo/demo/demo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -856,9 +856,17 @@ <h3 class="dp-options-section">Config options</h3>
<label>Up
<input type="radio"
[(ngModel)]="config.drops"
name="drops" value="up"
name="drops"
value="up"
(ngModelChange)="configChanged('drops', 'up')">
</label>
<label>Auto
<input type="radio"
[(ngModel)]="config.drops"
name="drops"
value="null"
(ngModelChange)="configChanged('drops', null)">
</label>
</div>
</div>

Expand All @@ -881,6 +889,13 @@ <h3 class="dp-options-section">Config options</h3>
value="left"
(ngModelChange)="configChanged('opens', 'left')">
</label>
<label>Auto
<input type="radio"
[(ngModel)]="config.opens"
name="opens"
value="null"
(ngModelChange)="configChanged('opens', null)">
</label>
</div>
</div>

Expand Down
2 changes: 0 additions & 2 deletions src/app/demo/demo/demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,8 +190,6 @@ export class DemoComponent {
onOpenDelay: 0,
weekDayFormat: 'ddd',
appendTo: document.body,
drops: 'down',
opens: 'right',
showNearMonthDays: true,
showWeekNumbers: false,
enableMonthSelector: true,
Expand Down

0 comments on commit c26d168

Please sign in to comment.