Skip to content

Commit

Permalink
feat(md-datepicker): add showIcon option and expose simple open/close…
Browse files Browse the repository at this point in the history 
… functions

chore(md-datepicker): add example of advanced options show icon
  • Loading branch information
acamilleri committed Jun 28, 2016
1 parent 9bc8e9b commit 9608fab
Show file tree
Hide file tree
Showing 16 changed files with 420 additions and 316 deletions.
34 changes: 19 additions & 15 deletions dist/amd/aurelia-materialize-bridge.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,14 @@ declare module 'aurelia-materialize-bridge' {
export class InstructionFilterValueConverter {
toView(navigationInstructions: any): any;
}
export class MdCard {
mdImage: any;
mdReveal: any;
mdSize: any;
mdTitle: any;
constructor(element: any);
attached(): any;
}
export class MdButton {
disabled: any;
flat: any;
Expand All @@ -132,14 +140,6 @@ declare module 'aurelia-materialize-bridge' {
disabledChanged(newValue: any): any;
flatChanged(newValue: any): any;
}
export class MdCard {
mdImage: any;
mdReveal: any;
mdSize: any;
mdTitle: any;
constructor(element: any);
attached(): any;
}

// @customElement('md-carousel-item')
export class MdCarouselItem {
Expand Down Expand Up @@ -200,6 +200,14 @@ declare module 'aurelia-materialize-bridge' {
isSelectedChanged(newValue: any): any;
}

/* eslint-enable */
export class DarkenValueConverter {
toView(value: any, steps: any): any;
}
export class LightenValueConverter {
toView(value: any, steps: any): any;
}

/**
* Adds css classes to a given element only if these classes are not already
* present. Keeps a record of css classes which actually have been added.
Expand Down Expand Up @@ -245,6 +253,8 @@ declare module 'aurelia-materialize-bridge' {
constructor(element: any, taskQueue: any);
bind(): any;
detached(): any;
openDatePicker(): any;
closeDatePicker(): any;
onClose(): any;
onCalendarIconClick(event: any): any;
onSet(value: any): any;
Expand All @@ -253,13 +263,7 @@ declare module 'aurelia-materialize-bridge' {
valueChanged(newValue: any): any;
}

/* eslint-enable */
export class DarkenValueConverter {
toView(value: any, steps: any): any;
}
export class LightenValueConverter {
toView(value: any, steps: any): any;
}
// });
export class MdDropdownElement {
static id: any;
alignment: any;
Expand Down
22 changes: 16 additions & 6 deletions dist/amd/datepicker/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,22 +127,24 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
var parsedDate = new Date(rawDate);
_this.picker.set('select', parsedDate);
} else {
_this.onCalendarIconClick();
_this.openDatePicker();
}
}
});
} else {
$(this.element).on('focusin', function () {
_this.openDatePicker();
});
}

if (this.options.showIcon) {
this.element.classList.add('left');
var calendarIcon = document.createElement('i');
calendarIcon.classList.add('right');
calendarIcon.classList.add('material-icons');
calendarIcon.textContent = 'today';
this.element.parentNode.insertBefore(calendarIcon, this.element.nextSibling);
$(calendarIcon).on('click', this.onCalendarIconClick.bind(this));
} else {
$(this.element).on('focusin', function () {
$(_this.element).pickadate('open');
});
}
};

Expand All @@ -152,14 +154,22 @@ define(['exports', 'aurelia-templating', 'aurelia-binding', 'aurelia-task-queue'
}
};

MdDatePicker.prototype.openDatePicker = function openDatePicker() {
$(this.element).pickadate('open');
};

MdDatePicker.prototype.closeDatePicker = function closeDatePicker() {
$(this.element).pickadate('close');
};

MdDatePicker.prototype.onClose = function onClose() {
var selected = this.picker.get('select');
this.value = selected ? selected.obj : null;
};

MdDatePicker.prototype.onCalendarIconClick = function onCalendarIconClick(event) {
event.stopPropagation();
$(this.element).pickadate('open');
this.openDatePicker();
};

MdDatePicker.prototype.onSet = function onSet(value) {
Expand Down
34 changes: 19 additions & 15 deletions dist/aurelia-materialize-bridge.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,14 @@ declare module 'aurelia-materialize-bridge' {
export class InstructionFilterValueConverter {
toView(navigationInstructions: any): any;
}
export class MdCard {
mdImage: any;
mdReveal: any;
mdSize: any;
mdTitle: any;
constructor(element: any);
attached(): any;
}
export class MdButton {
disabled: any;
flat: any;
Expand All @@ -132,14 +140,6 @@ declare module 'aurelia-materialize-bridge' {
disabledChanged(newValue: any): any;
flatChanged(newValue: any): any;
}
export class MdCard {
mdImage: any;
mdReveal: any;
mdSize: any;
mdTitle: any;
constructor(element: any);
attached(): any;
}

// @customElement('md-carousel-item')
export class MdCarouselItem {
Expand Down Expand Up @@ -200,6 +200,14 @@ declare module 'aurelia-materialize-bridge' {
isSelectedChanged(newValue: any): any;
}

/* eslint-enable */
export class DarkenValueConverter {
toView(value: any, steps: any): any;
}
export class LightenValueConverter {
toView(value: any, steps: any): any;
}

/**
* Adds css classes to a given element only if these classes are not already
* present. Keeps a record of css classes which actually have been added.
Expand Down Expand Up @@ -245,6 +253,8 @@ declare module 'aurelia-materialize-bridge' {
constructor(element: any, taskQueue: any);
bind(): any;
detached(): any;
openDatePicker(): any;
closeDatePicker(): any;
onClose(): any;
onCalendarIconClick(event: any): any;
onSet(value: any): any;
Expand All @@ -253,13 +263,7 @@ declare module 'aurelia-materialize-bridge' {
valueChanged(newValue: any): any;
}

/* eslint-enable */
export class DarkenValueConverter {
toView(value: any, steps: any): any;
}
export class LightenValueConverter {
toView(value: any, steps: any): any;
}
// });
export class MdDropdownElement {
static id: any;
alignment: any;
Expand Down
146 changes: 78 additions & 68 deletions dist/aurelia-materialize-bridge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -390,6 +390,31 @@ export class InstructionFilterValueConverter {
}
}

@customElement('md-card')
@inject(Element)
export class MdCard {
@bindable({
defaultBindingMode: bindingMode.oneTime
}) mdImage = null;
@bindable({
defaultBindingMode: bindingMode.oneTime
}) mdReveal = false;
@bindable({
defaultBindingMode: bindingMode.oneWay
}) mdSize = '';
@bindable({
defaultBindingMode: bindingMode.oneTime
}) mdTitle;
constructor(element) {
this.element = element;
}
attached() {
this.mdReveal = getBooleanFromAttributeValue(this.mdReveal);
}
}
@customAttribute('md-button')
@inject(Element)
export class MdButton {
Expand Down Expand Up @@ -452,31 +477,6 @@ export class MdButton {
}
}
@customElement('md-card')
@inject(Element)
export class MdCard {
@bindable({
defaultBindingMode: bindingMode.oneTime
}) mdImage = null;
@bindable({
defaultBindingMode: bindingMode.oneTime
}) mdReveal = false;
@bindable({
defaultBindingMode: bindingMode.oneWay
}) mdSize = '';
@bindable({
defaultBindingMode: bindingMode.oneTime
}) mdTitle;
constructor(element) {
this.element = element;
}
attached() {
this.mdReveal = getBooleanFromAttributeValue(this.mdReveal);
}
}
// @customElement('md-carousel-item')
@inject(Element)
export class MdCarouselItem {
Expand Down Expand Up @@ -702,6 +702,42 @@ export class MdlListSelector {
}
}
/* eslint-disable */
// http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
function shadeBlendConvert(p, from, to) {
if(typeof(p)!="number"||p<-1||p>1||typeof(from)!="string"||(from[0]!='r'&&from[0]!='#')||(typeof(to)!="string"&&typeof(to)!="undefined"))return null; //ErrorCheck
// if(!this.sbcRip)this.sbcRip=function(d){
let sbcRip=function(d){
var l=d.length,RGB=new Object();
if(l>9){
d=d.split(",");
if(d.length<3||d.length>4)return null;//ErrorCheck
RGB[0]=i(d[0].slice(4)),RGB[1]=i(d[1]),RGB[2]=i(d[2]),RGB[3]=d[3]?parseFloat(d[3]):-1;
}else{
switch(l){case 8:case 6:case 3:case 2:case 1:return null;} //ErrorCheck
if(l<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(l>4?d[4]+""+d[4]:""); //3 digit
d=i(d.slice(1),16),RGB[0]=d>>16&255,RGB[1]=d>>8&255,RGB[2]=d&255,RGB[3]=l==9||l==5?r(((d>>24&255)/255)*10000)/10000:-1;
}
return RGB;}
var i=parseInt,r=Math.round,h=from.length>9,h=typeof(to)=="string"?to.length>9?true:to=="c"?!h:false:h,b=p<0,p=b?p*-1:p,to=to&&to!="c"?to:b?"#000000":"#FFFFFF",f=sbcRip(from),t=sbcRip(to);
if(!f||!t)return null; //ErrorCheck
if(h)return "rgb("+r((t[0]-f[0])*p+f[0])+","+r((t[1]-f[1])*p+f[1])+","+r((t[2]-f[2])*p+f[2])+(f[3]<0&&t[3]<0?")":","+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*10000)/10000:t[3]<0?f[3]:t[3])+")");
else return "#"+(0x100000000+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*255):t[3]>-1?r(t[3]*255):f[3]>-1?r(f[3]*255):255)*0x1000000+r((t[0]-f[0])*p+f[0])*0x10000+r((t[1]-f[1])*p+f[1])*0x100+r((t[2]-f[2])*p+f[2])).toString(16).slice(f[3]>-1||t[3]>-1?1:3);
}
/* eslint-enable */
export class DarkenValueConverter {
toView(value, steps) {
return shadeBlendConvert(-0.3 * parseFloat(steps, 10), value);
}
}
export class LightenValueConverter {
toView(value, steps) {
return shadeBlendConvert(0.3 * parseFloat(steps, 10), value);
}
}
/**
* Adds css classes to a given element only if these classes are not already
* present. Keeps a record of css classes which actually have been added.
Expand Down Expand Up @@ -889,23 +925,25 @@ export class MdDatePicker {
rawDate = rawDate.split('/').join('-');
let parsedDate = new Date(rawDate);
this.picker.set('select', parsedDate);
}else {
this.onCalendarIconClick();
} else {
this.openDatePicker();
}
}
});
} else {
$(this.element).on('focusin', () => {
this.openDatePicker();
});
}

if (this.options.showIcon) {
this.element.classList.add('left');
let calendarIcon = document.createElement('i');
calendarIcon.classList.add('right');
calendarIcon.classList.add('material-icons');
calendarIcon.textContent = 'today';
this.element.parentNode.insertBefore(calendarIcon, this.element.nextSibling);
$(calendarIcon).on('click', this.onCalendarIconClick.bind(this));
} else {
$(this.element).on('focusin', () => {
$(this.element).pickadate('open');
});
}
}

Expand All @@ -915,14 +953,22 @@ export class MdDatePicker {
}
}

openDatePicker() {
$(this.element).pickadate('open');
}

closeDatePicker() {
$(this.element).pickadate('close');
}

onClose() {
let selected = this.picker.get('select');
this.value = selected ? selected.obj : null;
}

onCalendarIconClick(event) {
event.stopPropagation();
$(this.element).pickadate('open');
this.openDatePicker();
}

onSet(value) {
Expand All @@ -943,42 +989,6 @@ export class MdDatePicker {

}

/* eslint-disable */
// http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
function shadeBlendConvert(p, from, to) {
if(typeof(p)!="number"||p<-1||p>1||typeof(from)!="string"||(from[0]!='r'&&from[0]!='#')||(typeof(to)!="string"&&typeof(to)!="undefined"))return null; //ErrorCheck
// if(!this.sbcRip)this.sbcRip=function(d){
let sbcRip=function(d){
var l=d.length,RGB=new Object();
if(l>9){
d=d.split(",");
if(d.length<3||d.length>4)return null;//ErrorCheck
RGB[0]=i(d[0].slice(4)),RGB[1]=i(d[1]),RGB[2]=i(d[2]),RGB[3]=d[3]?parseFloat(d[3]):-1;
}else{
switch(l){case 8:case 6:case 3:case 2:case 1:return null;} //ErrorCheck
if(l<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(l>4?d[4]+""+d[4]:""); //3 digit
d=i(d.slice(1),16),RGB[0]=d>>16&255,RGB[1]=d>>8&255,RGB[2]=d&255,RGB[3]=l==9||l==5?r(((d>>24&255)/255)*10000)/10000:-1;
}
return RGB;}
var i=parseInt,r=Math.round,h=from.length>9,h=typeof(to)=="string"?to.length>9?true:to=="c"?!h:false:h,b=p<0,p=b?p*-1:p,to=to&&to!="c"?to:b?"#000000":"#FFFFFF",f=sbcRip(from),t=sbcRip(to);
if(!f||!t)return null; //ErrorCheck
if(h)return "rgb("+r((t[0]-f[0])*p+f[0])+","+r((t[1]-f[1])*p+f[1])+","+r((t[2]-f[2])*p+f[2])+(f[3]<0&&t[3]<0?")":","+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*10000)/10000:t[3]<0?f[3]:t[3])+")");
else return "#"+(0x100000000+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*255):t[3]>-1?r(t[3]*255):f[3]>-1?r(f[3]*255):255)*0x1000000+r((t[0]-f[0])*p+f[0])*0x10000+r((t[1]-f[1])*p+f[1])*0x100+r((t[2]-f[2])*p+f[2])).toString(16).slice(f[3]>-1||t[3]>-1?1:3);
}
/* eslint-enable */

export class DarkenValueConverter {
toView(value, steps) {
return shadeBlendConvert(-0.3 * parseFloat(steps, 10), value);
}
}

export class LightenValueConverter {
toView(value, steps) {
return shadeBlendConvert(0.3 * parseFloat(steps, 10), value);
}
}

@customElement('md-dropdown')
@inject(Element)
export class MdDropdownElement {
Expand Down
Loading

0 comments on commit 9608fab

Please sign in to comment.