/*
*
*/
/*
* @(#) du_ext.js
* build version : 1.0.0 $Revision: 15341 $
*
* Copyright ⓒ LG CNS, Inc. All rights reserved.
*
* devon@lgcns.com
* http://www.dev-on.com
*
* Do Not Erase This Comment!!! (이 주석문을 지우지 말것)
*
* dujsf/license.txt를 반드시 읽어보고 사용하시기 바랍니다.
*
* 1. 사내 사용시 KAMS를 통해 요청하여 사용허가를 받아야만 소프트웨어 라이센스 계약서에 동의하는 것으로 간주됩니다.
* 2. DevOn RUI가 포함된 제품을 판매할 경우에도 KAMS를 통해 요청하여 사용허가를 받아야만 합니다.
* 3. KAMS를 통해 사용허가를 받지 않은 경우 소프트웨어 라이센스 계약을 위반한 것으로 간주됩니다.
* 4. 별도로 판매될 경우 LGCNS의 소프트웨어 판매정책을 따릅니다. (KAMS에 문의 바랍니다.)
*
* (주의!) 원저자의 허락없이 재배포 할 수 없으며
* LG CNS 외부로의 유출을 하여서는 안 된다.
*/
/**
* Form
* @module widget_form
* @title Form
* @requires DU
*/
DU.namespace("DU.widget");
/**
* LForm
* @namespace DU.widget
* @class LForm
* @extends DU.widget.LUIComponent
* @constructor LForm
* @param {Object} oConfig The intial LForm.
*/
DU.widget.LForm = function(id, oConfig){
this.id = id;
DU.widget.LForm.superclass.constructor.call(this, oConfig);
var config = oConfig ||
{};
/**
* @description DU.validate.LValidatorManager 객체
*
* @config decimalPrecision
* @type {Int}
* @default 0
*/
/**
* @description 소수점 허용 자리수
* @property decimalPrecision
* @private
* @type {Int}
*/
decimalPrecision : 0,
/**
* @description 입력 가능 최소값 정의 (미지원)
* @config minValue
* @type {Int}
* @default null
*/
/**
* @description 입력 가능 최소값 정의
* @property minValue
* @private
* @type {Int}
*/
minValue : null,
/**
* @description 입력 가능 최대값 정의 (미지원)
* @config maxValue
* @type {Int}
* @default null
*/
/**
* @description 입력 가능 최대값 정의
* @property maxValue
* @private
* @type {Int}
*/
maxValue : null,
/**
* @description 천단위 구분자 출력 여부
* @config thousandsSeparator
* @type {boolean}
* @default true
*/
/**
* @description 입력 가능 최대값 정의
* @property thousandsSeparator
* @private
* @type {boolean}
*/
thousandsSeparator: true,
/**
* @description 값 변경을 할 수 있는 spin 기능 출력 여부
* @config isShowSpin
* @type {boolean}
* @default false
*/
/**
* @description 값 변경을 할 수 있는 spin 기능 출력 여부
* @property isShowSpin
* @private
* @type {boolean}
*/
isShowSpin: false,
/**
* @description Dom객체 생성 및 초기화하는 메소드
* @method initComponent
* @protected
* @param {String|Object} el 객체의 아이디나 객체
* @param {Object} oConfig 환경정보 객체
* @return void
*/
initComponent : function(oConfig) {
if(this.decimalPrecision > 0) this.allowChars += '.';
if (this.minValue != null && this.minValue < 0)
this.allowChars += "-";
},
/**
* @description Dom객체 생성
* @method createTimeTemplete
* @private
* @param {String|Object} el 객체의 아이디나 객체
* @return {DU.LElement} Element 객체
*/
createTemplete : function(el) {
DU.widget.LNumberBox.superclass.createTemplete.call(this, el);
var elContainer = el;
var hiddenInput = document.createElement('input');
hiddenInput.name = this.id;
hiddenInput.style.display = "none";
hiddenInput.className = DU.widget.LNumberBox.CSS_HIDDEN_NUMBERBOX;
hiddenInput.instance = this;
el.appendChild(hiddenInput);
this.hiddenInputEl = DU.get(hiddenInput);
if(this.isShowSpin) {
var iconDiv = document.createElement('div');
iconDiv.className = 'icon';
iconDiv.id = DU.id();
this.iconDivEl = DU.get(iconDiv);
elContainer.appendChild(iconDiv);
var spinUpDiv = document.createElement('div');
spinUpDiv.className = "L-spin-up";
this.spinUpDivEl = DU.get(spinUpDiv);
this.iconDivEl.appendChild(spinUpDiv);
var spinDownDiv = document.createElement('div');
spinDownDiv.className = "L-spin-down";
this.spinDownDivEl = DU.get(spinDownDiv);
this.iconDivEl.appendChild(spinDownDiv);
}
return elContainer;
},
/**
* @description width 속성에 따른 실제 적용 메소드
* @method _setWidth
* @protected
* @param {String} type 속성의 이름
* @param {Array} args 속성의 값 배열
* @param {Object} obj 적용된 객체
* @return void
*/
_setWidth : function(type, args, obj) {
if(this.isShowSpin) {
var width = args[0];
if (!DU.isBorderBox) {
this.el.setWidth(width);
this.getDisplayEl().setWidth(width - 16);
this.iconDivEl.setLeft(width - 16);
} else {
this.el.setWidth(width - 4);
this.getDisplayEl().setWidth(width - 20);
this.iconDivEl.setLeft(width - 20);
}
this.width = width;
this.cfg.setProperty('width', this.width, true);
} else
DU.widget.LNumberBox.superclass._setWidth.call(this, type, args, obj);
},
/**
* @description render 후 호출하는 메소드
* @method afterRender
* @protected
* @param {HttpElement} container 부모 객체
* @return {String}
*/
afterRender : function(container) {
DU.widget.LNumberBox.superclass.afterRender.call(this, container);
if(this.isShowSpin) {
this.spinUpDivEl.on('mousedown', function(e){
this.spinUpDivEl.addClass('L-spin-up-click');
}, this, true);
this.spinUpDivEl.on('mouseup', function(e){
this.spinUpDivEl.removeClass('L-spin-up-click');
}, this, true);
this.spinDownDivEl.on('mousedown', function(e){
this.spinDownDivEl.addClass('L-spin-down-click');
}, this, true);
this.spinDownDivEl.on('mouseup', function(e){
this.spinDownDivEl.removeClass('L-spin-down-click');
}, this, true);
this.spinUpDivEl.on('click', function(e){
this.upValue();
DU.util.LEvent.stopEvent(e);
}, this, true);
this.spinDownDivEl.on('click', function(e){
this.downValue();
DU.util.LEvent.stopEvent(e);
}, this, true);
}
},
/**
* @description 값을 올리는 메소드
* @method upValue
* @protected
* @return void
*/
upValue: function() {
var value = parseFloat(this.getValue(), 10) || 0;
if(!DU.isUndefined(this.maxValue) && this.maxValue <= value) return;
this.setValue(++value);
},
/**
* @description 값을 내리는 메소드
* @method downValue
* @protected
* @return void
*/
downValue: function() {
var value = parseFloat(this.getValue(), 10) || 0;
if(!DU.isUndefined(this.minValue) && this.minValue >= value) return;
this.setValue(--value);
},
/**
* @description 유효성을 검증하는 메소드
* @method validateValue
* @protected
* @param {object} value 값
* @return {Boolean}
*/
validateValue : function(value) {
if(value === this.lastValue) return true;
value = String(value);
value = value.replace(/,/g, '');
var isValid = true;
isValid = new DU.validate.LNumberValidator({id: this.id}).validate(value);
if(isValid == false) return false;
if(!DU.isUndefined(value) && !DU.isNull(value)) {
if(this.isNumberValue(value) == false) return false;
if(this.minValue != null && this.minValue > value) {
this.invalid(DU.getMessageManager().get("$.base.msg011", [this.minValue]));
this.setValue(this.lastValue);
return false;
}
if(this.maxValue != null && this.maxValue < value) {
this.invalid(DU.getMessageManager().get("$.base.msg012", [this.maxValue]));
this.setValue(this.lastValue);
return false;
}
}
this.valid();
return isValid;
},
/**
* @description 숫자 유효성을 검증하는 메소드
* @method isNumberValue
* @protected
* @param {object} value 값
* @return {Boolean}
*/
isNumberValue: function(value) {
if(DU.isUndefined(value) || DU.isNull(value) || value === false) return false;
value = value == '' ? 0 : value;
if(value != parseFloat(value, 10)) return false;
return true;
},
/**
* @description 값을 리턴하는 메소드
* @method getValue
* @return {Int|Float}
*/
getValue : function() {
var value = this.hiddenInputEl.getValue();
if(DU.isUndefined(this.lastValue) || value == this.lastValue) return value;
if(DU.isEmpty(value)) return null;
return parseFloat(value, 10);
},
/**
* @description decimal값을 리턴하는 메소드
* @method getDecimalValue
* @return {Int|Float}
*/
getDecimalValue: function(value) {
var newValue = value;
var sValue = value + '';
var pos = sValue.indexOf(".") || 0;
if (pos > 0) {
var dpValue = sValue.substring(pos + 1);
if (dpValue.length > this.decimalPrecision)
dpValue = dpValue.substring(0, this.decimalPrecision);
dpValue = DU.util.LString.rPad(dpValue, '0', this.decimalPrecision);
newValue = value.substring(0, pos + 1) + dpValue;
}
else
newValue += '.' + DU.util.LString.rPad('', '0', this.decimalPrecision);
return newValue;
},
/**
* @description 출력데이터가 변경되면 호출되는 메소드
* @method doChangedDisplayValue
* @private
* @param {String} o 적용할 값
* @return void
*/
doChangedDisplayValue : function(o) {
var val = String(o);
val = val.replace(/,/g, '');
if(this.isNumberValue(val)) this.setValue(val);
},
/**
* @description 값을 변경한다.
* @method setValue
* @public
* @param {Int} val 반영할 값
* @return {void}
*/
setValue : function(val) {
if(DU.isUndefined(val) == true || DU.isNull(val)) return;
this.hiddenInputEl.setValue(val);
if(!DU.isEmpty(val)) {
if(this.thousandsSeparator === true)
val = DU.util.LNumber.format(parseFloat(val, 10), {thousandsSeparator: ','});
if (this.decimalPrecision > 0)
val = this.getDecimalValue(val);
}
this.getDisplayEl().setValue(val);
this.fireEvent('changed', {target:this, value:this.getValue(), displayValue:this.getDisplayValue()});
}
});
DU.widget.LNumberBox.CSS_HIDDEN_NUMBERBOX = "L-number-hidden";
})();
/**
* DateBox
* @module widget_form
* @title LDateBox
* @requires DU
*/
DU.namespace("DU.widget");
/**
* LDateBox
* @namespace DU.widget
* @class LDateBox
* @extends DU.widget.LField
* @constructor LDateBox
* @param {Object} oConfig The intial LDateBox.
*/
DU.widget.LDateBox = function(oConfig){
var config = oConfig ||{};
config = DU.util.LDom.applyIfProperties(config, '$.ext.dateBox');
this.onIconClickDelegate = DU.util.LFunction.createDelegate(this.onIconClick, this);
DU.widget.LDateBox.superclass.constructor.call(this, config);
}
DU.extend(DU.widget.LDateBox, DU.widget.LTextBox, {
/**
* @description 객체의 문자열
* @property otype
* @private
* @type {String}
*/
otype : 'DU.widget.LDateBox',
/**
* @description 기본 CSS명
* @property CSS_BASE
* @private
* @type {String}
*/
CSS_BASE : 'L-datebox',
/**
* @description 입출력 type
* @property dateType
* @private
* @type {String}
*/
dateType : 'date',
/**
* @description 편집시, form submit시 적용되는 format
* @property valueFormat
* @private
* @type {String}
*/
valueFormat : '%q',
/**
* @description calendar show할때 입력된 날짜를 calendar에서 선택할지 여부
* @property selectingInputDate
* @type {boolean}
*/
selectingInputDate : true,
/**
* @description width
* @property width
* @type {int}
* @default 100
*/
width : 100,
/**
* @description height
* @property height
* @type {int}
* @default 21
*/
height : 21,
/**
* @description iconWidth
* @property iconWidth
* @type {int}
* @default 18
*/
iconWidth : 18,
/**
* @description iconMarginLeft, input과 달력 icon간의 간격
* @property iconMarginLeft
* @type {int}
* @default 2
*/
iconMarginLeft : 2,
/**
* @description editableTextbox, 사용자가 input text box를 편집할 수 있는지 여부, 즉 달력으로만 입력할 것인가 여부
* @config editableTextbox
* @type {boolean}
* @default true
*/
/**
* @description editableTextbox, 사용자가 input text box를 편집할 수 있는지 여부, 즉 달력으로만 입력할 것인가 여부
* @property editableTextbox
* @type {boolean}
* @default true
*/
editableTextbox : true,
/**
* @description mask 적용
* @config mask
* @type {String}
* @default null
*/
/**
* @description mask 적용
* new DU.form.LTextBox({ mask: '999999-9999999' });
* @property mask
* @private
* @type {String}
*/
mask: '9999-99-99',
/**
* @description afterRender
* @method afterRender
* @private
* @return void
*/
afterRender : function(container) {
DU.widget.LDateBox.superclass.afterRender.call(this, container);
this.doRenderCalendar();
if(!this.editableTextbox) this.getDisplayEl().dom.readOnly = true;
},
/**
* @description doRenderCalendar
* @method doRenderCalendar
* @private
* @return void
*/
doRenderCalendar : function(){
var config = this.calendarConfig || {width:150};
config.applyTo = this.calendarDivEl.id;
this.calendarDivEl.addClass('L-dateBox-calendar');
this.calendar = new DU.widget.LCalendar(config);
this.calendar.render();
this.calendar.hide();
this.iconDivEl.on('click', this.onIconClickDelegate);
},
/**
* @description blur 이벤트 발생시 defer를 연결하는 메소드
* @method deferOnBlur
* @protected
* @param {Object} e Event 객체
* @return {void}
*/
deferOnBlur : function(e) {
if (this.calendarDivEl.isAncestor(e.target)) {
var el = DU.get(e.target);
if (el.dom.tagName.toLowerCase() == "a" && el.hasClass("selector")) {
var selectedDate = this.calendar.getProperty("pagedate");
selectedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), parseInt(el.getHtml()));
this.setValue(selectedDate);
this.calendar.hide();
}
}
var checkBlur = function(e) {
if(e.deferCancelBubble == true) return;
var target = e.target;
if (target !== this.el.dom && !this.el.isAncestor(target) && target !== this.calendarDivEl.dom && !this.calendarDivEl.isAncestor(target)) {
DU.util.LEvent.removeListener(DU.browser.msie ? document.body : document, "mousedown", this.deferOnBlurDelegate, this);
this.onBlur.call(this, e);
this.isFocus = false;
}
else {
e.deferCancelBubble = true;
}
}
DU.util.LFunction.defer(checkBlur, 10, this, [e]);
},
/**
* @description onBlur
* @method onBlur
* @param {Object} e event object
* @private
* @return void
*/
onBlur : function(e){
DU.widget.LDateBox.superclass.onBlur.call(this, e);
this.calendar.hide();
},
/**
* @description 출력데이터가 변경되면 호출되는 메소드
* @method doChangedDisplayValue
* @private
* @param {String} o 적용할 값
* @return void
*/
doChangedDisplayValue : function(o) {
this.setValue(o);
},
/**
* @description string convert to date object
* @method getDate
* @param {string} sDate
* @private
* @return {Date}
*/
getDate : function(sDate){
if (sDate instanceof Date) {
return sDate;
}
var formatType = this.displayValue ? this.displayValue : "%x";
var oDate = DU.util.LFormat.stringToDate(sDate,{format:formatType});
if (!(oDate instanceof Date)) {
oDate = DU.util.LFormat.stringToDate(sDate,{format:"%q"});
}
if (!(oDate instanceof Date)) {
oDate = DU.util.LFormat.stringToDate(sDate,{format:"%Q"});
}
if (oDate instanceof Date) {
return oDate;
}
else
{
return false;
}
},
/**
* @description date convert to formatted string
* @method getDateString
* @param {Date} oDate
* @param {String} format
* @private
* @return {String}
*/
getDateString : function(oDate, format){
//mask를 사용하므로 구분자가 없는 날짜 8자가 기본이다.
format = format ? format : '%Y%m%d';
var value = oDate ? DU.util.LFormat.dateToString(oDate, {
format: format
}) : "";
return value ? value : "";
},
/**
* @description calendar 전시 위치 설정
* @method setCalendarXY
* @private
*/
setCalendarXY : function(){
var h = this.calendarDivEl.getHeight() || 0;
var t = this.getDisplayEl().getTop() + this.getDisplayEl().getHeight();
var l = this.getDisplayEl().getLeft();
var visible = DU.util.LDom.isVisibleSide(h+t-40);//padding+border 빼기(22), ie borderbox 처리 필요.
if(!visible){
t = this.getDisplayEl().getTop() - h;
}
this.calendarDivEl.setTop(t);
this.calendarDivEl.setLeft(l);
},
/**
* @description onIconClick
* @method onIconClick
* @private
* @param {Object} e
*/
onIconClick : function(e) {
this.showCalendar();
this.inputEl.focus();
},
/**
* @description
* @method showCalendar
* @private
*/
showCalendar : function(){
if(this.editable === false || this.disabled === true) return;
this.setCalendarXY();
if (this.selectingInputDate)
this.selectCalendarDate();
this.calendar.show();
this.setCalendarXY();
},
/**
* @description 입력된 날짜 선택하기
* @method selectCalendarDate
* @param {string} date
*/
selectCalendarDate : function(date){
date = date ? date : this.getDateString(this.getValue(),"%x");
if (date) {
this.calendar.clear();
var selDates = this.calendar.select(date,false);
if (selDates.length > 0) {
var firstDate = selDates[0];
this.calendar.cfg.setProperty("pagedate", firstDate.getFullYear() + this.calendar.cfg.getProperty(DU.widget.LCalendar._DEFAULT_CONFIG.DATE_FIELD_DELIMITER.key) + (firstDate.getMonth() + 1));
this.calendar.render();
}
}
},
/**
* @description Dom객체 생성
* @method createTemplete
* @private
* @param {String|Object} el 객체의 아이디나 객체
* @return {DU.LElement} Element 객체
*/
createTemplete : function(el) {
var elContainer = DU.get(el);
elContainer.addClass(this.CSS_BASE);
elContainer.addClass("L-fixed");
var input = document.createElement('input');
elContainer.appendChild(input);
this.inputEl = DU.get(input);
var iconDiv = document.createElement('div');
iconDiv.className = 'icon';
elContainer.appendChild(iconDiv);
this.iconDivEl = DU.get(iconDiv);
//form submit
var hiddenInput = document.createElement('input');
hiddenInput.name = this.name || this.id;
hiddenInput.instance = this;
hiddenInput.className = "hiddenInput";
elContainer.appendChild(hiddenInput);
this.hiddenInputEl = DU.get(hiddenInput);
//calendar container 만들기
var calendarDiv = document.createElement('div');
calendarDiv.className = "L-cal-container";
this.calendarDivEl = DU.get(calendarDiv);
//ie의 layer z-index문제로 body에 붙임
document.body.appendChild(calendarDiv);
return elContainer;
},
/**
* @description width 속성에 따른 실제 적용 메소드
* @method _setWidth
* @protected
* @param {String} type 속성의 이름
* @param {Array} args 속성의 값 배열
* @param {Object} obj 적용된 객체
* @return void
*/
_setWidth : function(type, args, obj) {
this.width = DU.util.LDom.toPixelNumber(args[0]);
this._computeWidth();
},
/**
* @description 넓이 계산, space는 input과 달력아이콘간의 간격이다.
* @method _computeWidth
* @protected
*/
_computeWidth : function(){
this.el.setWidth(this.width);
this.iconDivEl.setWidth(this.iconWidth);
var inputWidth = this.width - this.iconWidth - this.iconMarginLeft;
this.getDisplayEl().setWidth(inputWidth);
this.iconDivEl.setStyle("left",(inputWidth + this.iconMarginLeft) + "px");
},
/**
* @description height 속성에 따른 실제 적용 메소드
* @method _setHeight
* @protected
* @param {String} type 속성의 이름
* @param {Array} args 속성의 값 배열
* @param {Object} obj 적용된 객체
* @return void
*/
_setHeight : function(type, args, obj) {
if(args[0] != "auto" && args[0] != "") {
this.height = DU.util.LDom.toPixelNumber(args[0]);
this._computeHeight();
}
else
{
this._computeHeight(true);
}
},
/**
* @description 높이 계산
* @method _computeHeight
* @protected
* @param {boolean} isAuto
*/
_computeHeight : function(isAuto) {
if (!isAuto) {
this.el.setHeight(this.height);
this.getDisplayEl().setHeight(this.height-2);
this.iconDivEl.setHeight(this.height);
}
else
{
this.el.setStyle("height","");
this.getDisplayEl().setStyle("height","");
this.iconDivEl.setStyle("height","");
}
},
/**
* @description disabled 속성에 따른 실제 적용 메소드
* @method _setDisabled
* @protected
* @param {String} type 속성의 이름
* @param {Array} args 속성의 값 배열
* @param {Object} obj 적용된 객체
* @return void
*/
_setDisabled : function(type, args, obj) {
args = args[0];
if(args === false) {
this.disabled = false;
this.inputEl.enable();
this.hiddenInputEl.enable();
this.iconDivEl.enable();
this.calendarDivEl.enable();
} else {
this.disabled = true;
this.inputEl.disable();
this.hiddenInputEl.disable();
this.iconDivEl.disable();
this.calendarDivEl.disable();
}
},
/**
* @description 날짜 설정
* @method setValue
* @param {Date} oDate
* @return void
*/
setValue : function(oDate){
//빈값을 입력하면 null, 잘못입력하면 이전값을 넣는다.
if(typeof oDate === "string"){
//getUnMaskValue는 자리수로 검사하므로 mask안된 값이 들어오면 값을 잘라낸다.
oDate = oDate.length == 8 ? oDate : this.getUnMaskValue(oDate);
oDate = DU.isEmpty(oDate) ? null : this.getDate(oDate);
}
if (oDate === false) {
this.getDisplayEl().dom.value = this.lastDisplayValue;
} else {
var hiddenValue = oDate === null ? "" : this.getDateString(oDate, this.valueFormat);
var displayValue = oDate === null ? "" : this.getDateString(oDate);
this.getDisplayEl().dom.value = displayValue;
displayValue = this.checkVal().displayValue;
this.getDisplayEl().dom.value = displayValue;
if (this.hiddenInputEl.dom.value !== hiddenValue) {
this.hiddenInputEl.setValue(hiddenValue);
this.lastDisplayValue = displayValue;
//값이 달라질 경우만 발생.
this.fireEvent('changed', {
target: this,
value: this.getValue(),
displayValue: this.getDisplayValue()
});
}
}
},
/**
* @description 입력된 날짜 가져오기
* @method getValue
* @return {Date}
*/
getValue : function(){
var value = DU.widget.LDateBox.superclass.getValue.call(this);
var oDate = this.getDate(value);
return this.dateType == "date" ? (oDate ? oDate : null) : this.getDateString(oDate, this.valueFormat);
},
/**
* @description 달력 숨기기
* @method hide
* @return void
*/
hide : function(anim) {
this.calendar.hide();
DU.widget.LDateBox.superclass.hide.call(this,anim);
},
/**
* @description 객체를 destroy하는 메소드
* @method destroy
* @public
* @return void
*/
destroy : function() {
DU.widget.LDateBox.superclass.destroy.call(this);
this.iconDivEl.unOnAll();
this.inputEl = null;
this.hiddenInputEl = null;
this.iconDivEl = null;
this.calendar.destroy();
this.calendarDivEl = null;
}
});
/**
* Form
* @module widget_form
* @title LTimeBox
* @requires DU
*/
DU.namespace("DU.widget");
/**
* LTimeBox
* @namespace DU.widget
* @class LTimeBox
* @extends DU.widget.LTextBox
* @constructor LTimeBox
* @param {HTMLElement | String} id The html element that represents the Element.
* @param {Object} oConfig The intial LTimeBox.
*/
DU.widget.LTimeBox = function(oConfig){
var config = oConfig ||
{};
config = DU.util.LDom.applyIfProperties(config, '$.ext.timeBox');
DU.widget.LTimeBox.superclass.constructor.call(this, oConfig);
}
DU.extend(DU.widget.LTimeBox, DU.widget.LTextBox, {
/**
* @description 객체의 문자열
* @property otype
* @private
* @type {String}
*/
otype : 'DU.widget.LTimeBox',
/**
* @description 기본 CSS명
* @property CSS_BASE
* @private
* @type {String}
*/
CSS_BASE : 'L-timeBox',
/**
* @description 입력 가능한 문자열
* @config allowChars
* @type {String}
* @default '0123456789'
*/
/**
* @description 입력 가능한 문자열
* @property allowChars
* @private
* @type {String}
*/
allowChars : '0123456789',
/**
* @description mask 적용
* @property mask
* @private
* @type {String}
*/
mask: '99:99',
/**
* @description 가로 길이
* @config width
* @type {Int}
* @default 60
*/
/**
* @description 가로 길이
* @property width
* @private
* @type {String}
*/
width: 60,
/**
* @description Dom객체 생성
* @method createTimeTemplete
* @private
* @param {String|Object} el 객체의 아이디나 객체
* @return {DU.LElement} Element 객체
*/
createTemplete : function(el) {
DU.widget.LTimeBox.superclass.createTemplete.call(this, el);
var elContainer = el;
var iconDiv = document.createElement('div');
iconDiv.className = 'icon';
iconDiv.id = DU.id();
this.iconDivEl = DU.get(iconDiv);
elContainer.appendChild(iconDiv);
var spinUpDiv = document.createElement('div');
spinUpDiv.className = "L-spin-up";
this.spinUpDivEl = DU.get(spinUpDiv);
this.iconDivEl.appendChild(spinUpDiv);
var spinDownDiv = document.createElement('div');
spinDownDiv.className = "L-spin-down";
this.spinDownDivEl = DU.get(spinDownDiv);
this.iconDivEl.appendChild(spinDownDiv);
return elContainer;
},
/**
* @description render 후 호출하는 메소드
* @method afterRender
* @protected
* @param {HttpElement} container 부모 객체
* @return {String}
*/
afterRender : function(container) {
DU.widget.LTimeBox.superclass.afterRender.call(this, container);
this.spinUpDivEl.on('mousedown', function(){
this.spinUpDivEl.addClass('L-spin-up-click');
}, this, true);
this.spinUpDivEl.on('mouseup', function(){
this.spinUpDivEl.removeClass('L-spin-up-click');
}, this, true);
this.spinDownDivEl.on('mousedown', function(){
this.spinDownDivEl.addClass('L-spin-down-click');
}, this, true);
this.spinDownDivEl.on('mouseup', function(){
this.spinDownDivEl.removeClass('L-spin-down-click');
}, this, true);
this.spinUpDivEl.on('click', function(){
this.upValue();
}, this, true);
this.spinDownDivEl.on('click', function(){
this.downValue();
}, this, true);
},
/**
* @description 1분 올리는 메소드
* @method upValue
* @protected
* @return void
*/
upValue: function() {
if(this.disabled) return;
var value = this.getValue() || '0000';
var hh = parseInt(value.substring(0, 2), 10);
var mm = parseInt(value.substring(2, 4), 10);
if(mm == 59) {
hh = hh == 23 ? 0: (hh + 1);
mm = 0;
} else mm++;
this.setValue(DU.util.LString.lPad(hh, '0', 2) + DU.util.LString.lPad(mm, '0', 2));
},
/**
* @description 1분 내리는 메소드
* @method downValue
* @protected
* @return void
*/
downValue: function() {
if(this.disabled) return;
var value = this.getValue() || '0000';
var hh = parseInt(value.substring(0, 2), 10);
var mm = parseInt(value.substring(2, 4), 10);
if(mm == 00) {
hh = hh == 0 ? 23: (hh - 1);
mm = 59;
} else mm--;
this.setValue(DU.util.LString.lPad(hh, '0', 2) + DU.util.LString.lPad(mm, '0', 2));
},
/**
* @description width 속성에 따른 실제 적용 메소드
* @method _setWidth
* @protected
* @param {String} type 속성의 이름
* @param {Array} args 속성의 값 배열
* @param {Object} obj 적용된 객체
* @return void
*/
_setWidth : function(type, args, obj) {
var width = args[0];
if (!DU.isBorderBox) {
this.el.setWidth(width);
this.getDisplayEl().setWidth(width - 16);
this.iconDivEl.setLeft(width - 16);
} else {
this.el.setWidth(width - 4);
this.getDisplayEl().setWidth(width - 20);
this.iconDivEl.setLeft(width - 20);
}
this.width = width;
this.cfg.setProperty('width', this.width, true);
},
/**
* @description 유효성을 검증하는 메소드
* @method validateValue
* @protected
* @param {object} value 값
* @return {Boolean}
*/
validateValue : function(val) {
return DU.isEmpty(val) ? true : DU.util.LString.isTime(val);
},
/**
* @description 값을 변경한다.
* @method setValue
* @public
* @param {String} o 반영할 값
* @return {void}
*/
setValue: function(val) {
DU.widget.LTimeBox.superclass.setValue.call(this, val);
if(this.getDisplayValue().length > 0 && this.getDisplayValue().length != 5)
this.setDisplayValue(val.substring(0, 2) + ":" + val.substring(2, 4));
}
});
/**
* The LCalendar component
* @module widget_calendar
* @title LCalendar
* @namespace DU.widget
* @requires DU,dom,event
*/
(function() {
var Dom = DU.util.LDom,
Event = DU.util.LEvent,
Lang = DU;
/**
* 달력
* @namespace DU.widget
* @class LCalendar
* @constructor
* @param {String} id [optional] 달력 아이디
* @param {String | HTMLElement} container 달력 컨테이너 dom 객체 아이디
* @param {Object} config [optional] config 객체
*/
function LCalendar(id, containerId, config) {
this.init.apply(this, arguments);
config = config || {};
}
/**
* The path to be used for images loaded for the LCalendar
* @property DU.widget.LCalendar.IMG_ROOT
* @static
* @deprecated You can now customize images by overriding the calclose, calnavleft and calnavright default CSS classes for the close icon, left arrow and right arrow respectively
* @type String
*/
LCalendar.IMG_ROOT = null;
/**
* Type constant used for renderers to represent an individual date (M/D/Y)
* @property DU.widget.LCalendar.DATE
* @static
* @final
* @type String
*/
LCalendar.DATE = "D";
/**
* Type constant used for renderers to represent an individual date across any year (M/D)
* @property DU.widget.LCalendar.MONTH_DAY
* @static
* @final
* @type String
*/
LCalendar.MONTH_DAY = "MD";
/**
* Type constant used for renderers to represent a weekday
* @property DU.widget.LCalendar.WEEKDAY
* @static
* @final
* @type String
*/
LCalendar.WEEKDAY = "WD";
/**
* Type constant used for renderers to represent a range of individual dates (M/D/Y-M/D/Y)
* @property DU.widget.LCalendar.RANGE
* @static
* @final
* @type String
*/
LCalendar.RANGE = "R";
/**
* Type constant used for renderers to represent a month across any year
* @property DU.widget.LCalendar.MONTH
* @static
* @final
* @type String
*/
LCalendar.MONTH = "M";
/**
* Constant that represents the total number of date cells that are displayed in a given month
* @property DU.widget.LCalendar.DISPLAY_DAYS
* @static
* @final
* @type Number
*/
LCalendar.DISPLAY_DAYS = 42;
/**
* Constant used for halting the execution of the remainder of the render stack
* @property DU.widget.LCalendar.STOP_RENDER
* @static
* @final
* @type String
*/
LCalendar.STOP_RENDER = "S";
/**
* Constant used to represent short date field string formats (e.g. Tu or Feb)
* @property DU.widget.LCalendar.SHORT
* @static
* @final
* @type String
*/
LCalendar.SHORT = "short";
/**
* Constant used to represent long date field string formats (e.g. Monday or February)
* @property DU.widget.LCalendar.LONG
* @static
* @final
* @type String
*/
LCalendar.LONG = "long";
/**
* Constant used to represent medium date field string formats (e.g. Mon)
* @property DU.widget.LCalendar.MEDIUM
* @static
* @final
* @type String
*/
LCalendar.MEDIUM = "medium";
/**
* Constant used to represent single character date field string formats (e.g. M, T, W)
* @property DU.widget.LCalendar.ONE_CHAR
* @static
* @final
* @type String
*/
LCalendar.ONE_CHAR = "1char";
/**
* The set of default Config property keys and values for the LCalendar
* @property DU.widget.LCalendar._DEFAULT_CONFIG
* @final
* @static
* @private
* @type Object
*/
LCalendar._DEFAULT_CONFIG = {
// Default values for pagedate and selected are not class level constants - they are set during instance creation
PAGEDATE: { key: "pagedate", value: null },
SELECTED: { key: "selected", value: null },
TITLE: { key: "title", value: "" },
CLOSE: { key: "close", value: false },
IFRAME: { key: "iframe", value: (DU.browser.msie && DU.browser.msie <= 6) ? true : false },
MINDATE: { key: "mindate", value: null },
MAXDATE: { key: "maxdate", value: null },
MULTI_SELECT: { key: "multi_select", value: false },
START_WEEKDAY: { key: "start_weekday", value: 0 },
SHOW_WEEKDAYS: { key: "show_weekdays", value: true },
SHOW_WEEK_HEADER: { key: "show_week_header", value: false },
SHOW_WEEK_FOOTER: { key: "show_week_footer", value: false },
HIDE_BLANK_WEEKS: { key: "hide_blank_weeks", value: false },
NAV_ARROW_LEFT: { key: "nav_arrow_left", value: null },
NAV_ARROW_RIGHT: { key: "nav_arrow_right", value: null },
MONTHS_SHORT: { key: "months_short", value: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] },
MONTHS_LONG: { key: "months_long", value: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] },
WEEKDAYS_1CHAR: { key: "weekdays_1char", value: ["S", "M", "T", "W", "T", "F", "S"] },
WEEKDAYS_SHORT: { key: "weekdays_short", value: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] },
WEEKDAYS_MEDIUM: { key: "weekdays_medium", value: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] },
WEEKDAYS_LONG: { key: "weekdays_long", value: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] },
LOCALE_MONTHS: { key: "locale_months", value: "long" },
LOCALE_WEEKDAYS: { key: "locale_weekdays", value: "short" },
DATE_DELIMITER: { key: "date_delimiter", value: "," },
DATE_FIELD_DELIMITER: { key: "date_field_delimiter", value: "/" },
DATE_RANGE_DELIMITER: { key: "date_range_delimiter", value: "~" },
MY_MONTH_POSITION: { key: "my_month_position", value: 1 },
MY_YEAR_POSITION: { key: "my_year_position", value: 2 },
MD_MONTH_POSITION: { key: "md_month_position", value: 1 },
MD_DAY_POSITION: { key: "md_day_position", value: 2 },
MDY_MONTH_POSITION: { key: "mdy_month_position", value: 1 },
MDY_DAY_POSITION: { key: "mdy_day_position", value: 2 },
MDY_YEAR_POSITION: { key: "mdy_year_position", value: 3 },
MY_LABEL_MONTH_POSITION: { key: "my_label_month_position", value: 1 },
MY_LABEL_YEAR_POSITION: { key: "my_label_year_position", value: 2 },
MY_LABEL_MONTH_SUFFIX: { key: "my_label_month_suffix", value: " " },
MY_LABEL_YEAR_SUFFIX: { key: "my_label_year_suffix", value: "" },
NAV: { key: "navigator", value: null },
STRINGS: {
key: "strings",
value: {
previousMonth: "Previous Month",
nextMonth: "Next Month",
previousYear: "Previous Year",
nextYear: "Next Year",
close: "Close"
},
supercedes: ["close", "title"]
}
};
var DEF_CFG = LCalendar._DEFAULT_CONFIG;
/**
* The set of Custom Event types supported by the LCalendar
* @property DU.widget.LCalendar._EVENT_TYPES
* @final
* @static
* @private
* @type Object
*/
LCalendar._EVENT_TYPES = {
BEFORE_SELECT: "beforeSelect",
SELECT: "select",
BEFORE_DESELECT: "beforeDeselect",
DESELECT: "deselect",
CHANGE_PAGE: "changePage",
BEFORE_RENDER: "beforeRender",
RENDER: "render",
RENDER_CELL: "renderCell",
BEFORE_DESTROY: "beforeDestroy",
DESTROY: "destroy",
RESET: "reset",
CLEAR: "clear",
BEFORE_HIDE: "beforeHide",
HIDE: "hide",
BEFORE_SHOW: "beforeShow",
SHOW: "show",
BEFORE_HIDE_NAV: "beforeHideNav",
HIDE_NAV: "hideNav",
BEFORE_SHOW_NAV: "beforeShowNav",
SHOW_NAV: "showNav",
BEFORE_RENDER_NAV: "beforeRenderNav",
RENDER_NAV: "renderNav"
};
/**
* The set of default style constants for the LCalendar
* @property DU.widget.LCalendar._STYLES
* @final
* @static
* @private
* @type Object
*/
LCalendar._STYLES = {
CSS_ROW_HEADER: "calrowhead",
CSS_ROW_FOOTER: "calrowfoot",
CSS_CELL: "calcell",
CSS_CELL_SELECTOR: "selector",
CSS_CELL_SELECTED: "selected",
CSS_CELL_SELECTABLE: "selectable",
CSS_CELL_RESTRICTED: "restricted",
CSS_CELL_TODAY: "today",
CSS_CELL_OOM: "oom",
CSS_CELL_OOB: "previous",
CSS_HEADER: "calheader",
CSS_HEADER_TEXT: "calhead",
CSS_BODY: "calbody",
CSS_WEEKDAY_CELL: "calweekdaycell",
CSS_WEEKDAY_ROW: "calweekdayrow",
CSS_FOOTER: "calfoot",
CSS_CALENDAR: "L-calendar",
CSS_SINGLE: "single",
CSS_CONTAINER: "L-calcontainer",
CSS_NAV_YEAR_LEFT: "calnavyearleft",
CSS_NAV_YEAR_RIGHT: "calnavyearright",
CSS_NAV_LEFT: "calnavleft",
CSS_NAV_RIGHT: "calnavright",
CSS_NAV: "calnav",
CSS_CLOSE: "calclose",
CSS_CELL_TOP: "calcelltop",
CSS_CELL_LEFT: "calcellleft",
CSS_CELL_RIGHT: "calcellright",
CSS_CELL_BOTTOM: "calcellbottom",
CSS_CELL_HOVER: "calcellhover",
CSS_CELL_HIGHLIGHT1: "highlight1",
CSS_CELL_HIGHLIGHT2: "highlight2",
CSS_CELL_HIGHLIGHT3: "highlight3",
CSS_CELL_HIGHLIGHT4: "highlight4"
};
LCalendar.prototype = {
/**
* config 객체
* @property Config
* @private
* @deprecated LConfiguration properties should be set by calling LCalendar.cfg.setProperty.
* @type Object
*/
Config: null,
/**
* parent LCalendarGroup
* @property parent
* @type LCalendarGroup
*/
parent: null,
/**
* calendar group의 index
* @property index
* @type Number
*/
index: -1,
/**
* calendar table의 배열
* @property cells
* @type HTMLTableCellElement[]
*/
cells: null,
/**
* calendar table의 배열의 날짜값, format은 [YYYY, M, D].
* @property cellDates
* @type Array[](Number[])
*/
cellDates: null,
/**
* 아이디
* @property id
* @type String
*/
id: null,
/**
* 컨테이너 아이디
* @property containerId
* @type String
*/
containerId: null,
/**
* 컨테이너 dom 객체
* @property oDomContainer
* @type HTMLElement
*/
oDomContainer: null,
/**
* 오늘 날짜
* @property today
* @type Date
*/
today: null,
/**
* cells을 render할 때 사용하는 내부배열
* @property renderStack
* @type Array[]
*/
renderStack: null,
/**
* cells을 render할 때 사용하는 내부배열 사본
* @property _renderStack
* @private
* @type Array
*/
_renderStack: null,
/**
* LCalendarNavigator 객체
* @property oNavigator
* @type LCalendarNavigator
*/
oNavigator: null,
/**
* 선택된 날짜 배열
* @property _selectedDates
* @private
* @type Array
*/
_selectedDates: null,
/**
* 이벤트 맵
* @property domEventMap
* @type Object
*/
domEventMap: null,
/**
* 생성자 파라미터 파서
* @protected
* @method _parseArgs
* @param {Array} Function "arguments" array
* @return {Object} Object with id, container, config properties containing
* the reconciled argument values.
**/
_parseArgs: function(args) {
/*
2.4.0 Constructors signatures
new LCalendar(String)
new LCalendar(HTMLElement)
new LCalendar(String, ConfigObject)
new LCalendar(HTMLElement, ConfigObject)
Pre 2.4.0 Constructor signatures
new LCalendar(String, String)
new LCalendar(String, HTMLElement)
new LCalendar(String, String, ConfigObject)
new LCalendar(String, HTMLElement, ConfigObject)
*/
var nArgs = { id: null, container: null, config: null };
if (args && args.length && args.length > 0) {
switch (args.length) {
case 1:
nArgs.id = args[0].id ? args[0].id : null;
nArgs.container = args[0].applyTo ? args[0].applyTo : args[0];
nArgs.config = typeof args[0] == 'object' ? args[0] : null;
break;
case 2:
if (Lang.isObject(args[1]) && !args[1].tagName && !(args[1] instanceof String)) {
nArgs.id = null;
nArgs.container = args[0];
nArgs.config = args[1];
} else {
nArgs.id = args[0];
nArgs.container = args[1];
nArgs.config = null;
}
break;
default: // 3+
nArgs.id = args[0];
nArgs.container = args[1];
nArgs.config = args[2];
break;
}
} else {
}
return nArgs;
},
/**
* LCalendar init 메소드.
* @method init
* @private
* @param {String} id optional The id of the table element that will represent the LCalendar widget. As of 2.4.0, this argument is optional.
* @param {String | HTMLElement} container The id of the container div element that will wrap the LCalendar table, or a reference to a DIV element which exists in the document.
* @param {Object} config optional The configuration object containing the initial configuration values for the LCalendar.
*/
init: function(id, container, config) {
// Normalize 2.4.0, pre 2.4.0 args
var nArgs = this._parseArgs(arguments);
id = nArgs.id;
container = nArgs.container;
config = nArgs.config;
//du_config설정
config = DU.util.LDom.applyIfProperties(config, '$.ext.calendar');
this.oDomContainer = Dom.get(container);
if (!this.oDomContainer.id) {
this.oDomContainer.id = Dom.generateId();
}
if (!id) {
id = this.oDomContainer.id + "_t";
}
this.id = id;
this.containerId = this.oDomContainer.id;
this.initEvents();
this.today = new Date();
DU.util.LDate.clearTime(this.today);
/**
* The Config object used to hold the configuration variables for the LCalendar
* @property cfg
* @type DU.widget.LConfig
*/
this.cfg = new DU.widget.LConfig(this);
/**
* The local object which contains the LCalendar's options
* @property Options
* @type Object
*/
this.Options = {};
/**
* The local object which contains the LCalendar's locale settings
* @property Locale
* @type Object
*/
this.Locale = {};
this.initStyles();
Dom.addClass(this.oDomContainer, this.Style.CSS_CONTAINER);
Dom.addClass(this.oDomContainer, this.Style.CSS_SINGLE);
Dom.addClass(this.oDomContainer, "L-fixed");
this.cellDates = [];
this.cells = [];
this.renderStack = [];
this._renderStack = [];
this.setupConfig();
if (config) {
this.cfg.applyConfig(config, true);
}
this.cfg.fireQueue();
//du_config읽어서 local 설정하기
this._setDefaultLocale();
},
/**
* @description 사용자가 직접 .cfg.setProperty 를 호출하지 않도록 사용성을 위해 wrapping
* @method setProperty
* @param key {object}
* @param value {object}
*/
setProperty : function(key,value){
this.cfg.setProperty(key,value);
},
/**
* @description 사용자가 직접 .cfg.setProperty 를 호출하지 않도록 사용성을 위해 wrapping
* @method getProperty
* @param key {object}
* @return {object}
*/
getProperty : function(key){
return this.cfg.getProperty(key);
},
_setDefaultLocale: function(config) {
var locale = DU.getConfig().getFirst("$.core.defaultLocale");
//LDateLocale값을 사용.
var aLocale = DU.util.LDate.getLocale(locale);
var configLocale = DU.getConfig().getFirst('$.ext.calendar.locale.' + locale);
var x = aLocale["x"];
var order = x.split('%');
var posY = 1;
var posM = 2;
var posD = 3;
var c = "";
for(var i=1;i -1) {
d = cal.cellDates[index];
if (d) {
date = DU.util.LDate.getDate(d[0], d[1] - 1, d[2]);
var link;
if (cal.Options.MULTI_SELECT) {
link = cell.getElementsByTagName("a")[0];
if (link) {
link.blur();
}
var cellDate = cal.cellDates[index];
var cellDateIndex = cal._indexOfSelectedFieldArray(cellDate);
if (cellDateIndex > -1) {
cal.deselectCell(index);
} else {
cal.selectCell(index);
}
} else {
link = cell.getElementsByTagName("a")[0];
if (link) {
link.blur();
}
cal.selectCell(index);
}
}
}
}
},
/**
* cell의 mouseover 메소드
* @method doCellMouseOver
* @protected
* @param {DOMEvent} e The event
* @param {DU.widget.LCalendar} cal A reference to the calendar passed by the Event utility
*/
doCellMouseOver: function(e, cal) {
var target;
if (e) {
target = Event.getTarget(e);
} else {
target = this;
}
while (target.tagName && target.tagName.toLowerCase() != "td") {
target = target.parentNode;
if (!target.tagName || target.tagName.toLowerCase() == "html") {
return;
}
}
if (Dom.hasClass(target, cal.Style.CSS_CELL_SELECTABLE)) {
Dom.addClass(target, cal.Style.CSS_CELL_HOVER);
}
},
/**
* cell의 mouseout 메소드
* @method doCellMouseOut
* @protected
* @param {DOMEvent} e The event
* @param {DU.widget.LCalendar} cal A reference to the calendar passed by the Event utility
*/
doCellMouseOut: function(e, cal) {
var target;
if (e) {
target = Event.getTarget(e);
} else {
target = this;
}
while (target.tagName && target.tagName.toLowerCase() != "td") {
target = target.parentNode;
if (!target.tagName || target.tagName.toLowerCase() == "html") {
return;
}
}
if (Dom.hasClass(target, cal.Style.CSS_CELL_SELECTABLE)) {
Dom.removeClass(target, cal.Style.CSS_CELL_HOVER);
}
},
setupConfig: function() {
var cfg = this.cfg;
/**
* The month/year representing the current visible LCalendar date (mm/yyyy)
* @config pagedate
* @type String | Date
* @default today's date
*/
cfg.addProperty(DEF_CFG.PAGEDATE.key, { value: new Date(), handler: this.configPageDate });
/**
* The date or range of dates representing the current LCalendar selection
* @config selected
* @type String
* @default []
*/
cfg.addProperty(DEF_CFG.SELECTED.key, { value: [], handler: this.configSelected });
/**
* The title to display above the LCalendar's month header
* @config title
* @type String
* @default ""
*/
cfg.addProperty(DEF_CFG.TITLE.key, { value: DEF_CFG.TITLE.value, handler: this.configTitle });
/**
* Whether or not a close button should be displayed for this LCalendar
* @config close
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.CLOSE.key, { value: DEF_CFG.CLOSE.value, handler: this.configClose });
/**
* Whether or not an iframe shim should be placed under the LCalendar to prevent select boxes from bleeding through in Internet Explorer 6 and below.
* This property is enabled by default for IE6 and below. It is disabled by default for other browsers for performance reasons, but can be
* enabled if required.
*
* @config iframe
* @type Boolean
* @default true for IE6 and below, false for all other browsers
*/
cfg.addProperty(DEF_CFG.IFRAME.key, { value: DEF_CFG.IFRAME.value, handler: this.configIframe, validator: cfg.checkBoolean });
/**
* The minimum selectable date in the current LCalendar (mm/dd/yyyy)
* @config mindate
* @type String | Date
* @default null
*/
cfg.addProperty(DEF_CFG.MINDATE.key, { value: DEF_CFG.MINDATE.value, handler: this.configMinDate });
/**
* The maximum selectable date in the current LCalendar (mm/dd/yyyy)
* @config maxdate
* @type String | Date
* @default null
*/
cfg.addProperty(DEF_CFG.MAXDATE.key, { value: DEF_CFG.MAXDATE.value, handler: this.configMaxDate });
// Options properties
/**
* True if the LCalendar should allow multiple selections. False by default.
* @config MULTI_SELECT
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.MULTI_SELECT.key, { value: DEF_CFG.MULTI_SELECT.value, handler: this.configOptions, validator: cfg.checkBoolean });
/**
* The weekday the week begins on. Default is 0 (Sunday = 0, Monday = 1 ... Saturday = 6).
* @config START_WEEKDAY
* @type number
* @default 0
*/
cfg.addProperty(DEF_CFG.START_WEEKDAY.key, { value: DEF_CFG.START_WEEKDAY.value, handler: this.configOptions, validator: cfg.checkNumber });
/**
* True if the LCalendar should show weekday labels. True by default.
* @config SHOW_WEEKDAYS
* @type Boolean
* @default true
*/
cfg.addProperty(DEF_CFG.SHOW_WEEKDAYS.key, { value: DEF_CFG.SHOW_WEEKDAYS.value, handler: this.configOptions, validator: cfg.checkBoolean });
/**
* True if the LCalendar should show week row headers. False by default.
* @config SHOW_WEEK_HEADER
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.SHOW_WEEK_HEADER.key, { value: DEF_CFG.SHOW_WEEK_HEADER.value, handler: this.configOptions, validator: cfg.checkBoolean });
/**
* True if the LCalendar should show week row footers. False by default.
* @config SHOW_WEEK_FOOTER
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.SHOW_WEEK_FOOTER.key, { value: DEF_CFG.SHOW_WEEK_FOOTER.value, handler: this.configOptions, validator: cfg.checkBoolean });
/**
* True if the LCalendar should suppress weeks that are not a part of the current month. False by default.
* @config HIDE_BLANK_WEEKS
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.HIDE_BLANK_WEEKS.key, { value: DEF_CFG.HIDE_BLANK_WEEKS.value, handler: this.configOptions, validator: cfg.checkBoolean });
/**
* The image that should be used for the left navigation arrow.
* @config NAV_ARROW_LEFT
* @type String
* @deprecated You can customize the image by overriding the default CSS class for the left arrow - "calnavleft"
* @default null
*/
cfg.addProperty(DEF_CFG.NAV_ARROW_LEFT.key, { value: DEF_CFG.NAV_ARROW_LEFT.value, handler: this.configOptions });
/**
* The image that should be used for the right navigation arrow.
* @config NAV_ARROW_RIGHT
* @type String
* @deprecated You can customize the image by overriding the default CSS class for the right arrow - "calnavright"
* @default null
*/
cfg.addProperty(DEF_CFG.NAV_ARROW_RIGHT.key, { value: DEF_CFG.NAV_ARROW_RIGHT.value, handler: this.configOptions });
// Locale properties
/**
* The short month labels for the current locale.
* @config MONTHS_SHORT
* @type String[]
* @default ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
*/
cfg.addProperty(DEF_CFG.MONTHS_SHORT.key, { value: DEF_CFG.MONTHS_SHORT.value, handler: this.configLocale });
/**
* The long month labels for the current locale.
* @config MONTHS_LONG
* @type String[]
* @default ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
*/
cfg.addProperty(DEF_CFG.MONTHS_LONG.key, { value: DEF_CFG.MONTHS_LONG.value, handler: this.configLocale });
/**
* The 1-character weekday labels for the current locale.
* @config WEEKDAYS_1CHAR
* @type String[]
* @default ["S", "M", "T", "W", "T", "F", "S"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_1CHAR.key, { value: DEF_CFG.WEEKDAYS_1CHAR.value, handler: this.configLocale });
/**
* The short weekday labels for the current locale.
* @config WEEKDAYS_SHORT
* @type String[]
* @default ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_SHORT.key, { value: DEF_CFG.WEEKDAYS_SHORT.value, handler: this.configLocale });
/**
* The medium weekday labels for the current locale.
* @config WEEKDAYS_MEDIUM
* @type String[]
* @default ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_MEDIUM.key, { value: DEF_CFG.WEEKDAYS_MEDIUM.value, handler: this.configLocale });
/**
* The long weekday labels for the current locale.
* @config WEEKDAYS_LONG
* @type String[]
* @default ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_LONG.key, { value: DEF_CFG.WEEKDAYS_LONG.value, handler: this.configLocale });
/**
* Refreshes the locale values used to build the LCalendar.
* @method refreshLocale
* @private
*/
var refreshLocale = function() {
cfg.refireEvent(DEF_CFG.LOCALE_MONTHS.key);
cfg.refireEvent(DEF_CFG.LOCALE_WEEKDAYS.key);
};
cfg.subscribeToConfigEvent(DEF_CFG.START_WEEKDAY.key, refreshLocale, this, true);
cfg.subscribeToConfigEvent(DEF_CFG.MONTHS_SHORT.key, refreshLocale, this, true);
cfg.subscribeToConfigEvent(DEF_CFG.MONTHS_LONG.key, refreshLocale, this, true);
cfg.subscribeToConfigEvent(DEF_CFG.WEEKDAYS_1CHAR.key, refreshLocale, this, true);
cfg.subscribeToConfigEvent(DEF_CFG.WEEKDAYS_SHORT.key, refreshLocale, this, true);
cfg.subscribeToConfigEvent(DEF_CFG.WEEKDAYS_MEDIUM.key, refreshLocale, this, true);
cfg.subscribeToConfigEvent(DEF_CFG.WEEKDAYS_LONG.key, refreshLocale, this, true);
/**
* The setting that determines which length of month labels should be used. Possible values are "short" and "long".
* @config LOCALE_MONTHS
* @type String
* @default "long"
*/
cfg.addProperty(DEF_CFG.LOCALE_MONTHS.key, { value: DEF_CFG.LOCALE_MONTHS.value, handler: this.configLocaleValues });
/**
* The setting that determines which length of weekday labels should be used. Possible values are "1char", "short", "medium", and "long".
* @config LOCALE_WEEKDAYS
* @type String
* @default "short"
*/
cfg.addProperty(DEF_CFG.LOCALE_WEEKDAYS.key, { value: DEF_CFG.LOCALE_WEEKDAYS.value, handler: this.configLocaleValues });
/**
* The value used to delimit individual dates in a date string passed to various LCalendar functions.
* @config DATE_DELIMITER
* @type String
* @default ","
*/
cfg.addProperty(DEF_CFG.DATE_DELIMITER.key, { value: DEF_CFG.DATE_DELIMITER.value, handler: this.configLocale });
/**
* The value used to delimit date fields in a date string passed to various LCalendar functions.
* @config DATE_FIELD_DELIMITER
* @type String
* @default "/"
*/
cfg.addProperty(DEF_CFG.DATE_FIELD_DELIMITER.key, { value: DEF_CFG.DATE_FIELD_DELIMITER.value, handler: this.configLocale });
/**
* The value used to delimit date ranges in a date string passed to various LCalendar functions.
* @config DATE_RANGE_DELIMITER
* @type String
* @default "-"
*/
cfg.addProperty(DEF_CFG.DATE_RANGE_DELIMITER.key, { value: DEF_CFG.DATE_RANGE_DELIMITER.value, handler: this.configLocale });
/**
* The position of the month in a month/year date string
* @config MY_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MY_MONTH_POSITION.key, { value: DEF_CFG.MY_MONTH_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the year in a month/year date string
* @config MY_YEAR_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MY_YEAR_POSITION.key, { value: DEF_CFG.MY_YEAR_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the month in a month/day date string
* @config MD_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MD_MONTH_POSITION.key, { value: DEF_CFG.MD_MONTH_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the day in a month/year date string
* @config MD_DAY_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MD_DAY_POSITION.key, { value: DEF_CFG.MD_DAY_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the month in a month/day/year date string
* @config MDY_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MDY_MONTH_POSITION.key, { value: DEF_CFG.MDY_MONTH_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the day in a month/day/year date string
* @config MDY_DAY_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MDY_DAY_POSITION.key, { value: DEF_CFG.MDY_DAY_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the year in a month/day/year date string
* @config MDY_YEAR_POSITION
* @type Number
* @default 3
*/
cfg.addProperty(DEF_CFG.MDY_YEAR_POSITION.key, { value: DEF_CFG.MDY_YEAR_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the month in the month year label string used as the LCalendar header
* @config MY_LABEL_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MY_LABEL_MONTH_POSITION.key, { value: DEF_CFG.MY_LABEL_MONTH_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The position of the year in the month year label string used as the LCalendar header
* @config MY_LABEL_YEAR_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MY_LABEL_YEAR_POSITION.key, { value: DEF_CFG.MY_LABEL_YEAR_POSITION.value, handler: this.configLocale, validator: cfg.checkNumber });
/**
* The suffix used after the month when rendering the LCalendar header
* @config MY_LABEL_MONTH_SUFFIX
* @type String
* @default " "
*/
cfg.addProperty(DEF_CFG.MY_LABEL_MONTH_SUFFIX.key, { value: DEF_CFG.MY_LABEL_MONTH_SUFFIX.value, handler: this.configLocale });
/**
* The suffix used after the year when rendering the LCalendar header
* @config MY_LABEL_YEAR_SUFFIX
* @type String
* @default ""
*/
cfg.addProperty(DEF_CFG.MY_LABEL_YEAR_SUFFIX.key, { value: DEF_CFG.MY_LABEL_YEAR_SUFFIX.value, handler: this.configLocale });
/**
* LConfiguration for the Month/Year LCalendarNavigator UI which allows the user to jump directly to a
* specific Month/Year without having to scroll sequentially through months.
*
* Setting this property to null (default value) or false, will disable the LCalendarNavigator UI.
*
*
* Setting this property to true will enable the CalendarNavigatior UI with the default LCalendarNavigator configuration values.
*
*
* This property can also be set to an object literal containing configuration properties for the LCalendarNavigator UI.
* The configuration object expects the the following case-sensitive properties, with the "strings" property being a nested object.
* Any properties which are not provided will use the default values (defined in the LCalendarNavigator class).
*
*
*
strings
*
Object : An object with the properties shown below, defining the string labels to use in the Navigator's UI
*
*
month
String : The string to use for the month label. Defaults to "Month".
*
year
String : The string to use for the year label. Defaults to "Year".
*
submit
String : The string to use for the submit button label. Defaults to "Okay".
*
cancel
String : The string to use for the cancel button label. Defaults to "Cancel".
*
invalidYear
String : The string to use for invalid year values. Defaults to "Year needs to be a number".
*
*
*
monthFormat
String : The month format to use. Either DU.widget.LCalendar.LONG, or DU.widget.LCalendar.SHORT. Defaults to DU.widget.LCalendar.LONG
*
initialFocus
String : Either "year" or "month" specifying which input control should get initial focus. Defaults to "year"
* @config navigator
* @type {Object|Boolean}
* @default null
*/
cfg.addProperty(DEF_CFG.NAV.key, { value: DEF_CFG.NAV.value, handler: this.configNavigator });
/**
* The map of UI strings which the LCalendar UI uses.
*
* @config strings
* @type {Object}
* @default An object with the properties shown below:
*
*
previousMonth
String : The string to use for the "Previous Month" navigation UI. Defaults to "Previous Month".
*
nextMonth
String : The string to use for the "Next Month" navigation UI. Defaults to "Next Month".
*
close
String : The string to use for the close button label. Defaults to "Close".
*
*/
cfg.addProperty(DEF_CFG.STRINGS.key, {
value: DEF_CFG.STRINGS.value,
handler: this.configStrings,
validator: function(val) {
return Lang.isObject(val);
},
supercedes: DEF_CFG.STRINGS.supercedes
});
},
/**
* strings 파라미터 사용시 수행하는 메소드
* @method configStrings
* @protected
*/
configStrings: function(type, args, obj) {
var val = Lang.merge(DEF_CFG.STRINGS.value, args[0]);
this.cfg.setProperty(DEF_CFG.STRINGS.key, val, true);
},
/**
* pagedate 파라미터 사용시 수행하는 메소드
* @method configPageDate
* @protected
*/
configPageDate: function(type, args, obj) {
this.cfg.setProperty(DEF_CFG.PAGEDATE.key, this._parsePageDate(args[0]), true);
},
/**
* mindate 파라미터 사용시 수행하는 메소드
* @method configMinDate
* @protected
*/
configMinDate: function(type, args, obj) {
var val = args[0];
if (Lang.isString(val)) {
val = this._parseDate(val);
this.cfg.setProperty(DEF_CFG.MINDATE.key, DU.util.LDate.getDate(val[0], (val[1] - 1), val[2]));
}
},
/**
* maxdate 파라미터 사용시 수행하는 메소드
* @method configMaxDate
* @protected
*/
configMaxDate: function(type, args, obj) {
var val = args[0];
if (Lang.isString(val)) {
val = this._parseDate(val);
this.cfg.setProperty(DEF_CFG.MAXDATE.key, DU.util.LDate.getDate(val[0], (val[1] - 1), val[2]));
}
},
/**
* selected 파라미터 사용시 수행하는 메소드
* @method configSelected
* @protected
*/
configSelected: function(type, args, obj) {
var selected = args[0],
cfgSelected = DEF_CFG.SELECTED.key;
if (selected) {
if (Lang.isString(selected)) {
this.cfg.setProperty(cfgSelected, this._parseDates(selected), true);
}
}
if (!this._selectedDates) {
this._selectedDates = this.cfg.getProperty(cfgSelected);
}
},
/**
* options 파라미터 사용시 수행하는 메소드
* @method configOptions
* @protected
*/
configOptions: function(type, args, obj) {
this.Options[type.toUpperCase()] = args[0];
},
/**
* locale 파라미터 사용시 수행하는 메소드
* @method configLocale
* @protected
*/
configLocale: function(type, args, obj) {
this.Locale[type.toUpperCase()] = args[0];
this.cfg.refireEvent(DEF_CFG.LOCALE_MONTHS.key);
this.cfg.refireEvent(DEF_CFG.LOCALE_WEEKDAYS.key);
},
/**
* locale 길이에 따라 수행하는 메소드
* @method configLocaleValues
* @protected
*/
configLocaleValues: function(type, args, obj) {
type = type.toLowerCase();
var val = args[0],
cfg = this.cfg,
Locale = this.Locale;
switch (type) {
case DEF_CFG.LOCALE_MONTHS.key:
switch (val) {
case LCalendar.SHORT:
Locale.LOCALE_MONTHS = cfg.getProperty(DEF_CFG.MONTHS_SHORT.key).concat();
break;
case LCalendar.LONG:
Locale.LOCALE_MONTHS = cfg.getProperty(DEF_CFG.MONTHS_LONG.key).concat();
break;
}
break;
case DEF_CFG.LOCALE_WEEKDAYS.key:
switch (val) {
case LCalendar.ONE_CHAR:
Locale.LOCALE_WEEKDAYS = cfg.getProperty(DEF_CFG.WEEKDAYS_1CHAR.key).concat();
break;
case LCalendar.SHORT:
Locale.LOCALE_WEEKDAYS = cfg.getProperty(DEF_CFG.WEEKDAYS_SHORT.key).concat();
break;
case LCalendar.MEDIUM:
Locale.LOCALE_WEEKDAYS = cfg.getProperty(DEF_CFG.WEEKDAYS_MEDIUM.key).concat();
break;
case LCalendar.LONG:
Locale.LOCALE_WEEKDAYS = cfg.getProperty(DEF_CFG.WEEKDAYS_LONG.key).concat();
break;
}
var START_WEEKDAY = cfg.getProperty(DEF_CFG.START_WEEKDAY.key);
if (START_WEEKDAY > 0) {
for (var w = 0; w < START_WEEKDAY; ++w) {
Locale.LOCALE_WEEKDAYS.push(Locale.LOCALE_WEEKDAYS.shift());
}
}
break;
}
},
/**
* navigator 파라미터 사용시 수행하는 메소드
* @method configNavigator
* @protected
*/
configNavigator: function(type, args, obj) {
var val = args[0];
if (DU.widget.LCalendarNavigator && (val === true || Lang.isObject(val))) {
if (!this.oNavigator) {
this.oNavigator = new DU.widget.LCalendarNavigator(this);
// Cleanup DOM Refs/Events before innerHTML is removed.
this.beforeRenderEvent.on(function() {
if (!this.pages) {
this.oNavigator.erase();
}
}, this, true);
}
} else {
if (this.oNavigator) {
this.oNavigator.destroy();
this.oNavigator = null;
}
}
},
/**
* styles을 초기화하는 메소드
* @method initStyles
* @protected
*/
initStyles: function() {
var defStyle = LCalendar._STYLES;
this.Style = {
/**
* @property Style.CSS_ROW_HEADER
*/
CSS_ROW_HEADER: defStyle.CSS_ROW_HEADER,
/**
* @property Style.CSS_ROW_FOOTER
*/
CSS_ROW_FOOTER: defStyle.CSS_ROW_FOOTER,
/**
* @property Style.CSS_CELL
*/
CSS_CELL: defStyle.CSS_CELL,
/**
* @property Style.CSS_CELL_SELECTOR
*/
CSS_CELL_SELECTOR: defStyle.CSS_CELL_SELECTOR,
/**
* @property Style.CSS_CELL_SELECTED
*/
CSS_CELL_SELECTED: defStyle.CSS_CELL_SELECTED,
/**
* @property Style.CSS_CELL_SELECTABLE
*/
CSS_CELL_SELECTABLE: defStyle.CSS_CELL_SELECTABLE,
/**
* @property Style.CSS_CELL_RESTRICTED
*/
CSS_CELL_RESTRICTED: defStyle.CSS_CELL_RESTRICTED,
/**
* @property Style.CSS_CELL_TODAY
*/
CSS_CELL_TODAY: defStyle.CSS_CELL_TODAY,
/**
* @property Style.CSS_CELL_OOM
*/
CSS_CELL_OOM: defStyle.CSS_CELL_OOM,
/**
* @property Style.CSS_CELL_OOB
*/
CSS_CELL_OOB: defStyle.CSS_CELL_OOB,
/**
* @property Style.CSS_HEADER
*/
CSS_HEADER: defStyle.CSS_HEADER,
/**
* @property Style.CSS_HEADER_TEXT
*/
CSS_HEADER_TEXT: defStyle.CSS_HEADER_TEXT,
/**
* @property Style.CSS_BODY
*/
CSS_BODY: defStyle.CSS_BODY,
/**
* @property Style.CSS_WEEKDAY_CELL
*/
CSS_WEEKDAY_CELL: defStyle.CSS_WEEKDAY_CELL,
/**
* @property Style.CSS_WEEKDAY_ROW
*/
CSS_WEEKDAY_ROW: defStyle.CSS_WEEKDAY_ROW,
/**
* @property Style.CSS_FOOTER
*/
CSS_FOOTER: defStyle.CSS_FOOTER,
/**
* @property Style.CSS_CALENDAR
*/
CSS_CALENDAR: defStyle.CSS_CALENDAR,
/**
* @property Style.CSS_SINGLE
*/
CSS_SINGLE: defStyle.CSS_SINGLE,
/**
* @property Style.CSS_CONTAINER
*/
CSS_CONTAINER: defStyle.CSS_CONTAINER,
/**
* @property Style.CSS_NAV_YEAR_LEFT
*/
CSS_NAV_YEAR_LEFT: defStyle.CSS_NAV_YEAR_LEFT,
/**
* @property Style.CSS_NAV_YEAR_RIGHT
*/
CSS_NAV_YEAR_RIGHT: defStyle.CSS_NAV_YEAR_RIGHT,
/**
* @property Style.CSS_NAV_LEFT
*/
CSS_NAV_LEFT: defStyle.CSS_NAV_LEFT,
/**
* @property Style.CSS_NAV_RIGHT
*/
CSS_NAV_RIGHT: defStyle.CSS_NAV_RIGHT,
/**
* @property Style.CSS_NAV
*/
CSS_NAV: defStyle.CSS_NAV,
/**
* @property Style.CSS_CLOSE
*/
CSS_CLOSE: defStyle.CSS_CLOSE,
/**
* @property Style.CSS_CELL_TOP
*/
CSS_CELL_TOP: defStyle.CSS_CELL_TOP,
/**
* @property Style.CSS_CELL_LEFT
*/
CSS_CELL_LEFT: defStyle.CSS_CELL_LEFT,
/**
* @property Style.CSS_CELL_RIGHT
*/
CSS_CELL_RIGHT: defStyle.CSS_CELL_RIGHT,
/**
* @property Style.CSS_CELL_BOTTOM
*/
CSS_CELL_BOTTOM: defStyle.CSS_CELL_BOTTOM,
/**
* @property Style.CSS_CELL_HOVER
*/
CSS_CELL_HOVER: defStyle.CSS_CELL_HOVER,
/**
* @property Style.CSS_CELL_HIGHLIGHT1
*/
CSS_CELL_HIGHLIGHT1: defStyle.CSS_CELL_HIGHLIGHT1,
/**
* @property Style.CSS_CELL_HIGHLIGHT2
*/
CSS_CELL_HIGHLIGHT2: defStyle.CSS_CELL_HIGHLIGHT2,
/**
* @property Style.CSS_CELL_HIGHLIGHT3
*/
CSS_CELL_HIGHLIGHT3: defStyle.CSS_CELL_HIGHLIGHT3,
/**
* @property Style.CSS_CELL_HIGHLIGHT4
*/
CSS_CELL_HIGHLIGHT4: defStyle.CSS_CELL_HIGHLIGHT4
};
},
/**
* Builds the date label that will be displayed in the calendar header or
* footer, depending on configuration.
* @method buildMonthLabel
* @protected
* @return {String} The formatted calendar month label
*/
buildMonthLabel: function() {
return this._buildMonthLabel(this.cfg.getProperty(DEF_CFG.PAGEDATE.key));
},
/**
* Helper method, to format a Month Year string, given a JavaScript Date, based on the
* LCalendar localization settings
*
* @method _buildMonthLabel
* @private
* @param {Date} date
* @return {String} Formated month, year string
*/
_buildMonthLabel: function(date) {
var monthLabel = this.Locale.LOCALE_MONTHS[date.getMonth()] + this.Locale.MY_LABEL_MONTH_SUFFIX,
yearLabel = date.getFullYear() + this.Locale.MY_LABEL_YEAR_SUFFIX;
if (this.Locale.MY_LABEL_MONTH_POSITION == 2 || this.Locale.MY_LABEL_YEAR_POSITION == 1) {
return yearLabel + monthLabel;
} else {
return monthLabel + yearLabel;
}
},
/**
* Helper method, to format a Month Year string, given a JavaScript Date, based on the
* LCalendar localization settings
*
* @method _buildYearLabel
* @private
* @param {Date} date
* @return {String} Formated month, year string
*/
_buildYearLabel: function(date) {
var monthLabel = this.Locale.LOCALE_MONTHS[date.getMonth()] + this.Locale.MY_LABEL_MONTH_SUFFIX,
yearLabel = date.getFullYear() + this.Locale.MY_LABEL_YEAR_SUFFIX;
if (this.Locale.MY_LABEL_MONTH_POSITION == 2 || this.Locale.MY_LABEL_YEAR_POSITION == 1) {
return yearLabel + monthLabel;
} else {
return monthLabel + yearLabel;
}
},
/**
* Builds the date digit that will be displayed in calendar cells
* @method buildDayLabel
* @protected
* @param {Date} workingDate The current working date
* @return {String} The formatted day label
*/
buildDayLabel: function(workingDate) {
return workingDate.getDate();
},
/**
* Creates the title bar element and adds it to LCalendar container DIV
* @method createTitleBar
* @protected
* @param {String} strTitle The title to display in the title bar
* @return The title bar element
*/
createTitleBar: function(strTitle) {
var tDiv = Dom.getElementsByClassName(DU.widget.LCalendarGroup.CSS_2UPTITLE, "div", this.oDomContainer)[0] || document.createElement("div");
tDiv.className = DU.widget.LCalendarGroup.CSS_2UPTITLE;
tDiv.innerHTML = strTitle;
this.oDomContainer.insertBefore(tDiv, this.oDomContainer.firstChild);
Dom.addClass(this.oDomContainer, "withtitle");
return tDiv;
},
/**
* Removes the title bar element from the DOM
* @method removeTitleBar
* @protected
*/
removeTitleBar: function() {
var tDiv = Dom.getElementsByClassName(DU.widget.LCalendarGroup.CSS_2UPTITLE, "div", this.oDomContainer)[0] || null;
if (tDiv) {
Event.purgeElement(tDiv);
this.oDomContainer.removeChild(tDiv);
}
Dom.removeClass(this.oDomContainer, "withtitle");
},
/**
* Creates the close button HTML element and adds it to LCalendar container DIV
* @method createCloseButton
* @protected
* @return The close HTML element created
*/
createCloseButton: function() {
var cssClose = DU.widget.LCalendarGroup.CSS_2UPCLOSE,
DEPR_CLOSE_PATH = "us/my/bn/x_d.gif",
lnk = Dom.getElementsByClassName("link-close", "a", this.oDomContainer)[0],
strings = this.cfg.getProperty(DEF_CFG.STRINGS.key),
closeStr = (strings && strings.close) ? strings.close : "";
if (!lnk) {
lnk = document.createElement("a");
Event.addListener(lnk, "click", function(e, cal) {
cal.hide();
Event.preventDefault(e);
}, this);
}
lnk.href = "#";
lnk.className = "link-close";
if (LCalendar.IMG_ROOT !== null) {
var img = Dom.getElementsByClassName(cssClose, "img", lnk)[0] || document.createElement("img");
img.src = LCalendar.IMG_ROOT + DEPR_CLOSE_PATH;
img.className = cssClose;
lnk.appendChild(img);
} else {
lnk.innerHTML = '' + closeStr + '';
}
this.oDomContainer.appendChild(lnk);
return lnk;
},
/**
* Removes the close button HTML element from the DOM
* @method removeCloseButton
* @protected
*/
removeCloseButton: function() {
var btn = Dom.getElementsByClassName("link-close", "a", this.oDomContainer)[0] || null;
if (btn) {
Event.purgeElement(btn);
this.oDomContainer.removeChild(btn);
}
},
/**
* Renders the calendar header.
* @method renderHeader
* @param {Array} html The current working HTML array
* @return {Array} The current working HTML array
*/
renderHeader: function(html) {
var colSpan = 7,
DEPR_NAV_LEFT = "us/tr/callt.gif",
DEPR_NAV_RIGHT = "us/tr/calrt.gif",
cfg = this.cfg,
pageDate = cfg.getProperty(DEF_CFG.PAGEDATE.key),
strings = cfg.getProperty(DEF_CFG.STRINGS.key),
prevStr = (strings && strings.previousMonth) ? strings.previousMonth : "",
nextStr = (strings && strings.nextMonth) ? strings.nextMonth : "",
monthLabel,
prevYearStr = (strings && strings.previousYear) ? strings.previousYear : "",
nextYearStr = (strings && strings.nextYear) ? strings.nextYear : "",
yearLabel;
if (cfg.getProperty(DEF_CFG.SHOW_WEEK_HEADER.key)) {
colSpan += 1;
}
if (cfg.getProperty(DEF_CFG.SHOW_WEEK_FOOTER.key)) {
colSpan += 1;
}
html[html.length] = "";
html[html.length] = "
";
html[html.length] = '
';
html[html.length] = '
';
var renderLeft, renderRight = false;
if (this.parent) {
if (this.index === 0) {
renderLeft = true;
}
if (this.index == (this.parent.cfg.getProperty("pages") - 1)) {
renderRight = true;
}
} else {
renderLeft = true;
renderRight = true;
}
if (renderLeft) {
monthLabel = this._buildMonthLabel(DU.util.LDate.subtract(pageDate, DU.util.LDate.MONTH, 1));
yearLabel = this._buildYearLabel(DU.util.LDate.subtract(pageDate, DU.util.LDate.YEAR, 1));
var leftArrow = cfg.getProperty(DEF_CFG.NAV_ARROW_LEFT.key);
// Check for deprecated customization - If someone set IMG_ROOT, but didn't set NAV_ARROW_LEFT, then set NAV_ARROW_LEFT to the old deprecated value
if (leftArrow === null && LCalendar.IMG_ROOT !== null) {
leftArrow = LCalendar.IMG_ROOT + DEPR_NAV_LEFT;
}
var leftStyle = (leftArrow === null) ? "" : ' style="background-image:url(' + leftArrow + ')"';
var navLeftHtml = '' + prevYearStr + ' (' + yearLabel + ')' + '';
navLeftHtml += '' + prevStr + ' (' + monthLabel + ')' + '';
html[html.length] = navLeftHtml
}
var lbl = this.buildMonthLabel();
var cal = this.parent || this;
if (cal.cfg.getProperty("navigator")) {
lbl = "" + lbl + "";
}
html[html.length] = lbl;
if (renderRight) {
monthLabel = this._buildMonthLabel(DU.util.LDate.add(pageDate, DU.util.LDate.MONTH, 1));
yearLabel = this._buildYearLabel(DU.util.LDate.add(pageDate, DU.util.LDate.YEAR, 1));
var rightArrow = cfg.getProperty(DEF_CFG.NAV_ARROW_RIGHT.key);
if (rightArrow === null && LCalendar.IMG_ROOT !== null) {
rightArrow = LCalendar.IMG_ROOT + DEPR_NAV_RIGHT;
}
var rightStyle = (rightArrow === null) ? "" : ' style="background-image:url(' + rightArrow + ')"';
var navRightHtml = '' + nextStr + ' (' + monthLabel + ')' + '';
navRightHtml += '' + nextYearStr + ' (' + yearLabel + ')' + '';
html[html.length] = navRightHtml;
}
html[html.length] = '
\n
\n
';
if (cfg.getProperty(DEF_CFG.SHOW_WEEKDAYS.key)) {
html = this.buildWeekdays(html);
}
html[html.length] = '';
return html;
},
/**
* Renders the LCalendar's weekday headers.
* @method buildWeekdays
* @param {Array} html The current working HTML array
* @return {Array} The current working HTML array
*/
buildWeekdays: function(html) {
html[html.length] = '
';
if (this.cfg.getProperty(DEF_CFG.SHOW_WEEK_HEADER.key)) {
html[html.length] = '
';
}
for (var i = 0; i < this.Locale.LOCALE_WEEKDAYS.length; ++i) {
html[html.length] = '
' + this.Locale.LOCALE_WEEKDAYS[i] + '
';
}
if (this.cfg.getProperty(DEF_CFG.SHOW_WEEK_FOOTER.key)) {
html[html.length] = '
';
}
html[html.length] = '
';
return html;
},
/**
* Renders the calendar body.
* @method renderBody
* @param {Date} workingDate The current working Date being used for the render process
* @param {Array} html The current working HTML array
* @return {Array} The current working HTML array
*/
renderBody: function(workingDate, html) {
var startDay = this.cfg.getProperty(DEF_CFG.START_WEEKDAY.key);
this.preMonthDays = workingDate.getDay();
if (startDay > 0) {
this.preMonthDays -= startDay;
}
if (this.preMonthDays < 0) {
this.preMonthDays += 7;
}
this.monthDays = DU.util.LDate.getLastDayOfMonth(workingDate).getDate();
this.postMonthDays = LCalendar.DISPLAY_DAYS - this.preMonthDays - this.monthDays;
workingDate = DU.util.LDate.subtract(workingDate, DU.util.LDate.DAY, this.preMonthDays);
var weekNum,
weekClass,
weekPrefix = "w",
cellPrefix = "_cell",
workingDayPrefix = "wd",
dayPrefix = "d",
cellRenderers,
renderer,
t = this.today,
cfg = this.cfg,
todayYear = t.getFullYear(),
todayMonth = t.getMonth(),
todayDate = t.getDate(),
useDate = cfg.getProperty(DEF_CFG.PAGEDATE.key),
hideBlankWeeks = cfg.getProperty(DEF_CFG.HIDE_BLANK_WEEKS.key),
showWeekFooter = cfg.getProperty(DEF_CFG.SHOW_WEEK_FOOTER.key),
showWeekHeader = cfg.getProperty(DEF_CFG.SHOW_WEEK_HEADER.key),
mindate = cfg.getProperty(DEF_CFG.MINDATE.key),
maxdate = cfg.getProperty(DEF_CFG.MAXDATE.key);
if (mindate) {
mindate = DU.util.LDate.clearTime(mindate);
}
if (maxdate) {
maxdate = DU.util.LDate.clearTime(maxdate);
}
html[html.length] = '';
var i = 0,
tempDiv = document.createElement("div"),
cell = document.createElement("td");
tempDiv.appendChild(cell);
var cal = this.parent || this;
for (var r = 0; r < 6; r++) {
weekNum = DU.util.LDate.getWeekNumber(workingDate, startDay);
weekClass = weekPrefix + weekNum;
// Local OOM check for performance, since we already have pagedate
if (r !== 0 && hideBlankWeeks === true && workingDate.getMonth() != useDate.getMonth()) {
break;
} else {
html[html.length] = '
';
if (showWeekHeader) { html = this.renderRowHeader(weekNum, html); }
for (var d = 0; d < 7; d++) { // Render actual days
cellRenderers = [];
this.clearElement(cell);
cell.className = this.Style.CSS_CELL;
cell.id = this.id + cellPrefix + i;
if (workingDate.getDate() == todayDate &&
workingDate.getMonth() == todayMonth &&
workingDate.getFullYear() == todayYear) {
cellRenderers[cellRenderers.length] = cal.renderCellStyleToday;
}
var workingArray = [workingDate.getFullYear(), workingDate.getMonth() + 1, workingDate.getDate()];
this.cellDates[this.cellDates.length] = workingArray; // Add this date to cellDates
// Local OOM check for performance, since we already have pagedate
if (workingDate.getMonth() != useDate.getMonth()) {
cellRenderers[cellRenderers.length] = cal.renderCellNotThisMonth;
} else {
Dom.addClass(cell, workingDayPrefix + workingDate.getDay());
Dom.addClass(cell, dayPrefix + workingDate.getDate());
for (var s = 0; s < this.renderStack.length; ++s) {
renderer = null;
var rArray = this.renderStack[s],
type = rArray[0],
month,
day,
year;
switch (type) {
case LCalendar.DATE:
month = rArray[1][1];
day = rArray[1][2];
year = rArray[1][0];
if (workingDate.getMonth() + 1 == month && workingDate.getDate() == day && workingDate.getFullYear() == year) {
renderer = rArray[2];
this.renderStack.splice(s, 1);
}
break;
case LCalendar.MONTH_DAY:
month = rArray[1][0];
day = rArray[1][1];
if (workingDate.getMonth() + 1 == month && workingDate.getDate() == day) {
renderer = rArray[2];
this.renderStack.splice(s, 1);
}
break;
case LCalendar.RANGE:
var date1 = rArray[1][0],
date2 = rArray[1][1],
d1month = date1[1],
d1day = date1[2],
d1year = date1[0],
d1 = DU.util.LDate.getDate(d1year, d1month - 1, d1day),
d2month = date2[1],
d2day = date2[2],
d2year = date2[0],
d2 = DU.util.LDate.getDate(d2year, d2month - 1, d2day);
if (workingDate.getTime() >= d1.getTime() && workingDate.getTime() <= d2.getTime()) {
renderer = rArray[2];
if (workingDate.getTime() == d2.getTime()) {
this.renderStack.splice(s, 1);
}
}
break;
case LCalendar.WEEKDAY:
var weekday = rArray[1][0];
if (workingDate.getDay() + 1 == weekday) {
renderer = rArray[2];
}
break;
case LCalendar.MONTH:
month = rArray[1][0];
if (workingDate.getMonth() + 1 == month) {
renderer = rArray[2];
}
break;
}
if (renderer) {
cellRenderers[cellRenderers.length] = renderer;
}
}
}
if (this._indexOfSelectedFieldArray(workingArray) > -1) {
cellRenderers[cellRenderers.length] = cal.renderCellStyleSelected;
}
if ((mindate && (workingDate.getTime() < mindate.getTime())) ||
(maxdate && (workingDate.getTime() > maxdate.getTime()))
) {
cellRenderers[cellRenderers.length] = cal.renderOutOfBoundsDate;
} else {
cellRenderers[cellRenderers.length] = cal.styleCellDefault;
cellRenderers[cellRenderers.length] = cal.renderCellDefault;
}
var eventParam = {date:workingDate, cell: cell, stop: false};
this.renderCellEvent.fire(eventParam);
if(eventParam.stop !== true) {
for (var x = 0; x < cellRenderers.length; ++x) {
if (cellRenderers[x].call(cal, workingDate, cell) == LCalendar.STOP_RENDER) {
break;
}
}
}
workingDate.setTime(workingDate.getTime() + DU.util.LDate.ONE_DAY_MS);
// Just in case we crossed DST/Summertime boundaries
workingDate = DU.util.LDate.clearTime(workingDate);
if (i >= 0 && i <= 6) {
Dom.addClass(cell, this.Style.CSS_CELL_TOP);
}
if ((i % 7) === 0) {
Dom.addClass(cell, this.Style.CSS_CELL_LEFT);
}
if (((i + 1) % 7) === 0) {
Dom.addClass(cell, this.Style.CSS_CELL_RIGHT);
}
var postDays = this.postMonthDays;
if (hideBlankWeeks && postDays >= 7) {
var blankWeeks = Math.floor(postDays / 7);
for (var p = 0; p < blankWeeks; ++p) {
postDays -= 7;
}
}
if (i >= ((this.preMonthDays + postDays + this.monthDays) - 7)) {
Dom.addClass(cell, this.Style.CSS_CELL_BOTTOM);
}
html[html.length] = tempDiv.innerHTML;
i++;
}
if (showWeekFooter) { html = this.renderRowFooter(weekNum, html); }
html[html.length] = '
';
}
}
html[html.length] = '';
return html;
},
/**
* Renders the calendar footer. In the default implementation, there is
* no footer.
* @method renderFooter
* @param {Array} html The current working HTML array
* @return {Array} The current working HTML array
*/
renderFooter: function(html) { return html; },
/**
* Renders the calendar after it has been configured. The render() method has a specific call chain that will execute
* when the method is called: renderHeader, renderBody, renderFooter.
* Refer to the documentation for those methods for information on
* individual render tasks.
* @method render
*/
render: function() {
this.beforeRenderEvent.fire();
// Find starting day of the current month
var workingDate = DU.util.LDate.getFirstDayOfMonth(this.cfg.getProperty(DEF_CFG.PAGEDATE.key));
this.resetRenderers();
this.cellDates.length = 0;
Event.purgeElement(this.oDomContainer, true);
var html = [];
html[html.length] = '
';
html = this.renderHeader(html);
html = this.renderBody(workingDate, html);
html = this.renderFooter(html);
html[html.length] = '
';
this.oDomContainer.innerHTML = html.join("\n");
this.applyListeners();
this.cells = this.oDomContainer.getElementsByTagName("td");
this.cfg.refireEvent(DEF_CFG.TITLE.key);
this.cfg.refireEvent(DEF_CFG.CLOSE.key);
this.cfg.refireEvent(DEF_CFG.IFRAME.key);
this.renderEvent.fire();
},
/**
* Applies the LCalendar's DOM listeners to applicable elements.
* @method applyListeners
*/
applyListeners: function() {
var root = this.oDomContainer,
cal = this.parent || this,
anchor = "a",
click = "click";
var linkLeft = Dom.getElementsByClassName(this.Style.CSS_NAV_LEFT, anchor, root),
linkRight = Dom.getElementsByClassName(this.Style.CSS_NAV_RIGHT, anchor, root),
yearLinkLeft = Dom.getElementsByClassName(this.Style.CSS_NAV_YEAR_LEFT, anchor, root),
yearLinkRight = Dom.getElementsByClassName(this.Style.CSS_NAV_YEAR_RIGHT, anchor, root);
if (linkLeft && linkLeft.length > 0) {
this.linkLeft = linkLeft[0];
Event.addListener(this.linkLeft, click, this.doPreviousMonthNav, cal, true);
}
if (linkRight && linkRight.length > 0) {
this.linkRight = linkRight[0];
Event.addListener(this.linkRight, click, this.doNextMonthNav, cal, true);
}
if (yearLinkLeft && yearLinkLeft.length > 0) {
this.yearLinkLeft = yearLinkLeft[0];
Event.addListener(this.yearLinkLeft, click, this.doPreviousYearNav, cal, true);
}
if (yearLinkRight && yearLinkRight.length > 0) {
this.yearLinkRight = yearLinkRight[0];
Event.addListener(this.yearLinkRight, click, this.doNextYearNav, cal, true);
}
if (cal.cfg.getProperty("navigator") !== null) {
this.applyNavListeners();
}
if (this.domEventMap) {
var el, elements;
for (var cls in this.domEventMap) {
if (Lang.hasOwnProperty(this.domEventMap, cls)) {
var items = this.domEventMap[cls];
if (!(items instanceof Array)) {
items = [items];
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
elements = Dom.getElementsByClassName(cls, item.tag, this.oDomContainer);
for (var c = 0; c < elements.length; c++) {
el = elements[c];
Event.addListener(el, item.event, item.handler, item.scope, item.correct);
}
}
}
}
}
//grid의 blur 전에 발생 시키기 위해 body에 event 탑제 => LEditorGridPanel에서 view.on("blur"...삭제로 원복
//Event.addListener(DU.getBody(true), "mousedown", this.doSelectCell, this);
Event.addListener(this.oDomContainer, "click", this.doSelectCell, this);
Event.addListener(this.oDomContainer, "mouseover", this.doCellMouseOver, this);
Event.addListener(this.oDomContainer, "mouseout", this.doCellMouseOut, this);
},
applyNavListeners: function() {
var calParent = this.parent || this,
cal = this,
navBtns = Dom.getElementsByClassName(this.Style.CSS_NAV, "a", this.oDomContainer);
if (navBtns.length > 0) {
Event.addListener(navBtns, "click", function(e, obj) {
var target = Event.getTarget(e);
// this == navBtn
if (this === target || Dom.isAncestor(this, target)) {
Event.preventDefault(e);
}
var navigator = calParent.oNavigator;
if (navigator) {
var pgdate = cal.cfg.getProperty("pagedate");
navigator.setYear(pgdate.getFullYear());
navigator.setMonth(pgdate.getMonth());
navigator.show();
}
});
}
},
/**
* Retrieves the Date object for the specified LCalendar cell
* @method getDateByCellId
* @param {String} id The id of the cell
* @return {Date} The Date object for the specified LCalendar cell
*/
getDateByCellId: function(id) {
var date = this.getDateFieldsByCellId(id);
return (date) ? DU.util.LDate.getDate(date[0], date[1] - 1, date[2]) : null;
},
/**
* Retrieves the Date object for the specified LCalendar cell
* @method getDateFieldsByCellId
* @param {String} id The id of the cell
* @return {Array} The array of Date fields for the specified LCalendar cell
*/
getDateFieldsByCellId: function(id) {
id = this.getIndexFromId(id);
return (id > -1) ? this.cellDates[id] : null;
},
/**
* Find the LCalendar's cell index for a given date.
* If the date is not found, the method returns -1.
*
* The returned index can be used to lookup the cell HTMLElement
* using the LCalendar's cells array or passed to selectCell to select
* cells by index.
*
*
* See cells, selectCell.
*
* @method getCellIndex
* @param {Date} date JavaScript Date object, for which to find a cell index.
* @return {Number} The index of the date in Calendars cellDates/cells arrays, or -1 if the date
* is not on the curently rendered LCalendar page.
*/
getCellIndex: function(date) {
var idx = -1;
if (date) {
var m = date.getMonth(),
y = date.getFullYear(),
d = date.getDate(),
dates = this.cellDates;
for (var i = 0; i < dates.length; ++i) {
var cellDate = dates[i];
if (cellDate[0] === y && cellDate[1] === m + 1 && cellDate[2] === d) {
idx = i;
break;
}
}
}
return idx;
},
/**
* Given the id used to mark each LCalendar cell, this method
* extracts the index number from the id.
*
* @param {String} strId The cell id
* @return {Number} The index of the cell, or -1 if id does not contain an index number
*/
getIndexFromId: function(strId) {
var idx = -1,
li = strId.lastIndexOf("_cell");
if (li > -1) {
idx = parseInt(strId.substring(li + 5), 10);
}
return idx;
},
// BEGIN BUILT-IN TABLE CELL RENDERERS
/**
* Renders a cell that falls before the minimum date or after the maximum date.
* widget class.
* @method renderOutOfBoundsDate
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
* @return {String} DU.widget.LCalendar.STOP_RENDER if rendering should stop with this style, null or nothing if rendering
* should not be terminated
*/
renderOutOfBoundsDate: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_OOB);
cell.innerHTML = workingDate.getDate();
return LCalendar.STOP_RENDER;
},
/**
* Renders the row header for a week.
* @method renderRowHeader
* @param {Number} weekNum The week number of the current row
* @param {Array} cell The current working HTML array
*/
renderRowHeader: function(weekNum, html) {
html[html.length] = '
' + weekNum + '
';
return html;
},
/**
* Renders the row footer for a week.
* @method renderRowFooter
* @param {Number} weekNum The week number of the current row
* @param {Array} cell The current working HTML array
*/
renderRowFooter: function(weekNum, html) {
html[html.length] = '
' + weekNum + '
';
return html;
},
/**
* Renders a single standard calendar cell in the calendar widget table.
* All logic for determining how a standard default cell will be rendered is
* encapsulated in this method, and must be accounted for when extending the
* widget class.
* @method renderCellDefault
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
*/
renderCellDefault: function(workingDate, cell) {
cell.innerHTML = '' + this.buildDayLabel(workingDate) + "";
},
/**
* Styles a selectable cell.
* @method styleCellDefault
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
*/
styleCellDefault: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_SELECTABLE);
},
/**
* Renders a single standard calendar cell using the CSS hightlight1 style
* @method renderCellStyleHighlight1
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
*/
renderCellStyleHighlight1: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_HIGHLIGHT1);
},
/**
* Renders a single standard calendar cell using the CSS hightlight2 style
* @method renderCellStyleHighlight2
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
*/
renderCellStyleHighlight2: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_HIGHLIGHT2);
},
/**
* Renders a single standard calendar cell using the CSS hightlight3 style
* @method renderCellStyleHighlight3
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
*/
renderCellStyleHighlight3: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_HIGHLIGHT3);
},
/**
* Renders a single standard calendar cell using the CSS hightlight4 style
* @method renderCellStyleHighlight4
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
*/
renderCellStyleHighlight4: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_HIGHLIGHT4);
},
/**
* Applies the default style used for rendering today's date to the current calendar cell
* @method renderCellStyleToday
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
*/
renderCellStyleToday: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_TODAY);
},
/**
* Applies the default style used for rendering selected dates to the current calendar cell
* @method renderCellStyleSelected
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
* @return {String} DU.widget.LCalendar.STOP_RENDER if rendering should stop with this style, null or nothing if rendering
* should not be terminated
*/
renderCellStyleSelected: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_SELECTED);
},
/**
* Applies the default style used for rendering dates that are not a part of the current
* month (preceding or trailing the cells for the current month)
* @method renderCellNotThisMonth
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
* @return {String} DU.widget.LCalendar.STOP_RENDER if rendering should stop with this style, null or nothing if rendering
* should not be terminated
*/
renderCellNotThisMonth: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL_OOM);
cell.innerHTML = workingDate.getDate();
return LCalendar.STOP_RENDER;
},
/**
* Renders the current calendar cell as a non-selectable "black-out" date using the default
* restricted style.
* @method renderBodyCellRestricted
* @param {Date} workingDate The current working Date object being used to generate the calendar
* @param {HTMLTableCellElement} cell The current working cell in the calendar
* @return {String} DU.widget.LCalendar.STOP_RENDER if rendering should stop with this style, null or nothing if rendering
* should not be terminated
*/
renderBodyCellRestricted: function(workingDate, cell) {
Dom.addClass(cell, this.Style.CSS_CELL);
Dom.addClass(cell, this.Style.CSS_CELL_RESTRICTED);
cell.innerHTML = workingDate.getDate();
return LCalendar.STOP_RENDER;
},
// END BUILT-IN TABLE CELL RENDERERS
// BEGIN MONTH NAVIGATION METHODS
/**
* Adds the designated number of months to the current calendar month, and sets the current
* calendar page date to the new month.
* @method addMonths
* @param {Number} count The number of months to add to the current calendar
*/
addMonths: function(count) {
var cfgPageDate = DEF_CFG.PAGEDATE.key;
this.cfg.setProperty(cfgPageDate, DU.util.LDate.add(this.cfg.getProperty(cfgPageDate), DU.util.LDate.MONTH, count));
this.resetRenderers();
this.changePageEvent.fire();
},
/**
* Subtracts the designated number of months from the current calendar month, and sets the current
* calendar page date to the new month.
* @method subtractMonths
* @param {Number} count The number of months to subtract from the current calendar
*/
subtractMonths: function(count) {
var cfgPageDate = DEF_CFG.PAGEDATE.key;
this.cfg.setProperty(cfgPageDate, DU.util.LDate.subtract(this.cfg.getProperty(cfgPageDate), DU.util.LDate.MONTH, count));
this.resetRenderers();
this.changePageEvent.fire();
},
/**
* Adds the designated number of years to the current calendar, and sets the current
* calendar page date to the new month.
* @method addYears
* @param {Number} count The number of years to add to the current calendar
*/
addYears: function(count) {
var cfgPageDate = DEF_CFG.PAGEDATE.key;
this.cfg.setProperty(cfgPageDate, DU.util.LDate.add(this.cfg.getProperty(cfgPageDate), DU.util.LDate.YEAR, count));
this.resetRenderers();
this.changePageEvent.fire();
},
/**
* Subtcats the designated number of years from the current calendar, and sets the current
* calendar page date to the new month.
* @method subtractYears
* @param {Number} count The number of years to subtract from the current calendar
*/
subtractYears: function(count) {
var cfgPageDate = DEF_CFG.PAGEDATE.key;
this.cfg.setProperty(cfgPageDate, DU.util.LDate.subtract(this.cfg.getProperty(cfgPageDate), DU.util.LDate.YEAR, count));
this.resetRenderers();
this.changePageEvent.fire();
},
/**
* Navigates to the next month page in the calendar widget.
* @method nextMonth
*/
nextMonth: function() {
this.addMonths(1);
},
/**
* Navigates to the previous month page in the calendar widget.
* @method previousMonth
*/
previousMonth: function() {
this.subtractMonths(1);
},
/**
* Navigates to the next year in the currently selected month in the calendar widget.
* @method nextYear
*/
nextYear: function() {
this.addYears(1);
},
/**
* Navigates to the previous year in the currently selected month in the calendar widget.
* @method previousYear
*/
previousYear: function() {
this.subtractYears(1);
},
// END MONTH NAVIGATION METHODS
// BEGIN SELECTION METHODS
/**
* Resets the calendar widget to the originally selected month and year, and
* sets the calendar to the initial selection(s).
* @method reset
*/
reset: function() {
this.cfg.resetProperty(DEF_CFG.SELECTED.key);
this.cfg.resetProperty(DEF_CFG.PAGEDATE.key);
this.resetEvent.fire();
},
/**
* Clears the selected dates in the current calendar widget and sets the calendar
* to the current month and year.
* @method clear
*/
clear: function() {
this.cfg.setProperty(DEF_CFG.SELECTED.key, []);
this.cfg.setProperty(DEF_CFG.PAGEDATE.key, new Date(this.today.getTime()));
this.clearEvent.fire();
},
/**
* Selects a date or a collection of dates on the current calendar. This method, by default,
* does not call the render method explicitly. Once selection has completed, render must be
* called for the changes to be reflected visually.
*
* Any dates which are OOB (out of bounds, not selectable) will not be selected and the array of
* selected dates passed to the selectEvent will not contain OOB dates.
*
* If all dates are OOB, the no state change will occur; beforeSelect and select events will not be fired.
*
* @method select
* @param {String/Date/Date[]} date The date string of dates to select in the current calendar. Valid formats are
* individual date(s) (12/24/2005,12/26/2005) or date range(s) (12/24/2005-1/1/2006).
* Multiple comma-delimited dates can also be passed to this method (12/24/2005,12/11/2005-12/13/2005).
* This method can also take a JavaScript Date object or an array of Date objects.
* @param {bool} fireEvent event를 발생시킬지 여부, 기본값 true, 단순히 값만 변경할 경우 false 설정.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
select: function(date,fireEvent) {
fireEvent = fireEvent == null ? true : fireEvent;
var aToBeSelected = this._toFieldArray(date),
validDates = [],
selected = [],
cfgSelected = DEF_CFG.SELECTED.key;
for (var a = 0; a < aToBeSelected.length; ++a) {
var toSelect = aToBeSelected[a];
var date = this._toDate(toSelect);
if (!this.isDateOOB(date)) {
if (validDates.length === 0) {
if(fireEvent)
this.beforeSelectEvent.fire();
selected = this.cfg.getProperty(cfgSelected);
}
validDates.push(date);
if (this._indexOfSelectedFieldArray(toSelect) == -1) {
selected[selected.length] = toSelect;
}
}
}
if (validDates.length > 0) {
if (this.parent) {
this.parent.cfg.setProperty(cfgSelected, selected);
} else {
this.cfg.setProperty(cfgSelected, selected);
}
if(fireEvent)
this.selectEvent.fire({
date: this.MULTI_SELECT ? validDates : validDates[0]
});
}
return this.getSelectedDates();
},
/**
* Selects a date on the current calendar by referencing the index of the cell that should be selected.
* This method is used to easily select a single cell (usually with a mouse click) without having to do
* a full render. The selected style is applied to the cell directly.
*
* If the cell is not marked with the CSS_CELL_SELECTABLE class (as is the case by default for out of month
* or out of bounds cells), it will not be selected and in such a case beforeSelect and select events will not be fired.
*
* @method selectCell
* @param {Number} cellIndex The index of the cell to select in the current calendar.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
selectCell: function(cellIndex) {
var cell = this.cells[cellIndex],
cellDate = this.cellDates[cellIndex],
dCellDate = this._toDate(cellDate),
selectable = Dom.hasClass(cell, this.Style.CSS_CELL_SELECTABLE);
if (selectable) {
this.beforeSelectEvent.fire();
var cfgSelected = DEF_CFG.SELECTED.key;
var selected = this.cfg.getProperty(cfgSelected);
var selectDate = cellDate.concat();
if (this._indexOfSelectedFieldArray(selectDate) == -1) {
selected[selected.length] = selectDate;
}
if (this.parent) {
this.parent.cfg.setProperty(cfgSelected, selected);
} else {
this.cfg.setProperty(cfgSelected, selected);
}
this.renderCellStyleSelected(dCellDate, cell);
var date = this.toDate(selectDate);
this.selectEvent.fire({date: this.MULTI_SELECT ? [date] : date});
this.doCellMouseOut.call(cell, null, this);
}
return this.getSelectedDates();
},
/**
* Deselects a date or a collection of dates on the current calendar. This method, by default,
* does not call the render method explicitly. Once deselection has completed, render must be
* called for the changes to be reflected visually.
*
* The method will not attempt to deselect any dates which are OOB (out of bounds, and hence not selectable)
* and the array of deselected dates passed to the deselectEvent will not contain any OOB dates.
*
* If all dates are OOB, beforeDeselect and deselect events will not be fired.
*
* @method deselect
* @param {String/Date/Date[]} date The date string of dates to deselect in the current calendar. Valid formats are
* individual date(s) (12/24/2005,12/26/2005) or date range(s) (12/24/2005-1/1/2006).
* Multiple comma-delimited dates can also be passed to this method (12/24/2005,12/11/2005-12/13/2005).
* This method can also take a JavaScript Date object or an array of Date objects.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
deselect: function(date) {
var aToBeDeselected = this._toFieldArray(date),
validDates = [],
selected = [],
cfgSelected = DEF_CFG.SELECTED.key;
for (var a = 0; a < aToBeDeselected.length; ++a) {
var toDeselect = aToBeDeselected[a];
var date = this._toDate(toDeselect);
if (!this.isDateOOB(date)) {
if (validDates.length === 0) {
this.beforeDeselectEvent.fire();
selected = this.cfg.getProperty(cfgSelected);
}
validDates.push(date);
var index = this._indexOfSelectedFieldArray(toDeselect);
if (index != -1) {
selected.splice(index, 1);
}
}
}
if (validDates.length > 0) {
if (this.parent) {
this.parent.cfg.setProperty(cfgSelected, selected);
} else {
this.cfg.setProperty(cfgSelected, selected);
}
this.deselectEvent.fire({date: this.MULTI_SELECT ? validDates:validDates[0]});
}
return this.getSelectedDates();
},
/**
* Deselects a date on the current calendar by referencing the index of the cell that should be deselected.
* This method is used to easily deselect a single cell (usually with a mouse click) without having to do
* a full render. The selected style is removed from the cell directly.
*
* If the cell is not marked with the CSS_CELL_SELECTABLE class (as is the case by default for out of month
* or out of bounds cells), the method will not attempt to deselect it and in such a case, beforeDeselect and
* deselect events will not be fired.
*
* @method deselectCell
* @param {Number} cellIndex The index of the cell to deselect in the current calendar.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
deselectCell: function(cellIndex) {
var cell = this.cells[cellIndex],
cellDate = this.cellDates[cellIndex],
cellDateIndex = this._indexOfSelectedFieldArray(cellDate);
var selectable = Dom.hasClass(cell, this.Style.CSS_CELL_SELECTABLE);
if (selectable) {
this.beforeDeselectEvent.fire();
var selected = this.cfg.getProperty(DEF_CFG.SELECTED.key),
dCellDate = this._toDate(cellDate),
selectDate = cellDate.concat();
if (cellDateIndex > -1) {
if (this.cfg.getProperty(DEF_CFG.PAGEDATE.key).getMonth() == dCellDate.getMonth() &&
this.cfg.getProperty(DEF_CFG.PAGEDATE.key).getFullYear() == dCellDate.getFullYear()) {
Dom.removeClass(cell, this.Style.CSS_CELL_SELECTED);
}
selected.splice(cellDateIndex, 1);
}
if (this.parent) {
this.parent.cfg.setProperty(DEF_CFG.SELECTED.key, selected);
} else {
this.cfg.setProperty(DEF_CFG.SELECTED.key, selected);
}
var date = this.toDate(selectDate);
this.deselectEvent.fire({
date: this.MULTI_SELECT ? [date]:date
});
}
return this.getSelectedDates();
},
/**
* Deselects all dates on the current calendar.
* @method deselectAll
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
* Assuming that this function executes properly, the return value should be an empty array.
* However, the empty array is returned for the sake of being able to check the selection status
* of the calendar.
*/
deselectAll: function() {
this.beforeDeselectEvent.fire();
var cfgSelected = DEF_CFG.SELECTED.key,
selected = this.cfg.getProperty(cfgSelected),
count = selected.length,
sel = selected.concat();
if (this.parent) {
this.parent.cfg.setProperty(cfgSelected, []);
} else {
this.cfg.setProperty(cfgSelected, []);
}
var dateList = [];
for(var i = 0 ; i < sel.length ; i++)
dateList.push(this.toDate(sel[i]));
if (count > 0) {
this.deselectEvent.fire({date: this.MULTI_SELECT ? dateList: dateList[0]});
}
return this.getSelectedDates();
},
// END SELECTION METHODS
// BEGIN TYPE CONVERSION METHODS
/**
* Converts a date (either a JavaScript Date object, or a date string) to the internal data structure
* used to represent dates: [[yyyy,mm,dd],[yyyy,mm,dd]].
* @method _toFieldArray
* @private
* @param {String/Date/Date[]} date The date string of dates to deselect in the current calendar. Valid formats are
* individual date(s) (12/24/2005,12/26/2005) or date range(s) (12/24/2005-1/1/2006).
* Multiple comma-delimited dates can also be passed to this method (12/24/2005,12/11/2005-12/13/2005).
* This method can also take a JavaScript Date object or an array of Date objects.
* @return {Array[](Number[])} Array of date field arrays
*/
_toFieldArray: function(date) {
var returnDate = [];
if (date instanceof Date) {
returnDate = [[date.getFullYear(), date.getMonth() + 1, date.getDate()]];
} else if (Lang.isString(date)) {
returnDate = this._parseDates(date);
} else if (Lang.isArray(date)) {
for (var i = 0; i < date.length; ++i) {
var d = date[i];
returnDate[returnDate.length] = [d.getFullYear(), d.getMonth() + 1, d.getDate()];
}
}
return returnDate;
},
/**
* Converts a date field array [yyyy,mm,dd] to a JavaScript Date object. The date field array
* is the format in which dates are as provided as arguments to selectEvent and deselectEvent listeners.
*
* @method toDate
* @param {Number[]} dateFieldArray The date field array to convert to a JavaScript Date.
* @return {Date} JavaScript Date object representing the date field array.
*/
toDate: function(dateFieldArray) {
return this._toDate(dateFieldArray);
},
/**
* Converts a date field array [yyyy,mm,dd] to a JavaScript Date object.
* @method _toDate
* @private
* @deprecated Made public, toDate
* @param {Number[]} dateFieldArray The date field array to convert to a JavaScript Date.
* @return {Date} JavaScript Date object representing the date field array
*/
_toDate: function(dateFieldArray) {
if (dateFieldArray instanceof Date) {
return dateFieldArray;
} else {
return DU.util.LDate.getDate(dateFieldArray[0], dateFieldArray[1] - 1, dateFieldArray[2]);
}
},
// END TYPE CONVERSION METHODS
// BEGIN UTILITY METHODS
/**
* Converts a date field array [yyyy,mm,dd] to a JavaScript Date object.
* @method _fieldArraysAreEqual
* @private
* @param {Number[]} array1 The first date field array to compare
* @param {Number[]} array2 The first date field array to compare
* @return {Boolean} The boolean that represents the equality of the two arrays
*/
_fieldArraysAreEqual: function(array1, array2) {
var match = false;
if (array1[0] == array2[0] && array1[1] == array2[1] && array1[2] == array2[2]) {
match = true;
}
return match;
},
/**
* Gets the index of a date field array [yyyy,mm,dd] in the current list of selected dates.
* @method _indexOfSelectedFieldArray
* @private
* @param {Number[]} find The date field array to search for
* @return {Number} The index of the date field array within the collection of selected dates.
* -1 will be returned if the date is not found.
*/
_indexOfSelectedFieldArray: function(find) {
var selected = -1,
seldates = this.cfg.getProperty(DEF_CFG.SELECTED.key);
for (var s = 0; s < seldates.length; ++s) {
var sArray = seldates[s];
if (find[0] == sArray[0] && find[1] == sArray[1] && find[2] == sArray[2]) {
selected = s;
break;
}
}
return selected;
},
/**
* Determines whether a given date is OOM (out of month).
* @method isDateOOM
* @param {Date} date The JavaScript Date object for which to check the OOM status
* @return {Boolean} true if the date is OOM
*/
isDateOOM: function(date) {
return (date.getMonth() != this.cfg.getProperty(DEF_CFG.PAGEDATE.key).getMonth());
},
/**
* Determines whether a given date is OOB (out of bounds - less than the mindate or more than the maxdate).
*
* @method isDateOOB
* @param {Date} date The JavaScript Date object for which to check the OOB status
* @return {Boolean} true if the date is OOB
*/
isDateOOB: function(date) {
var minDate = this.cfg.getProperty(DEF_CFG.MINDATE.key),
maxDate = this.cfg.getProperty(DEF_CFG.MAXDATE.key),
dm = DU.util.LDate;
if (minDate) {
minDate = dm.clearTime(minDate);
}
if (maxDate) {
maxDate = dm.clearTime(maxDate);
}
var clearedDate = new Date(date.getTime());
clearedDate = dm.clearTime(clearedDate);
return ((minDate && clearedDate.getTime() < minDate.getTime()) || (maxDate && clearedDate.getTime() > maxDate.getTime()));
},
/**
* Parses a pagedate configuration property value. The value can either be specified as a string of form "mm/yyyy" or a Date object
* and is parsed into a Date object normalized to the first day of the month. If no value is passed in, the month and year from today's date are used to create the Date object
* @method _parsePageDate
* @private
* @param {Date|String} date Pagedate value which needs to be parsed
* @return {Date} The Date object representing the pagedate
*/
_parsePageDate: function(date) {
var parsedDate;
if (date) {
if (date instanceof Date) {
parsedDate = DU.util.LDate.getFirstDayOfMonth(date);
} else {
var month, year, aMonthYear;
aMonthYear = date.split(this.cfg.getProperty(DEF_CFG.DATE_FIELD_DELIMITER.key));
month = parseInt(aMonthYear[this.cfg.getProperty(DEF_CFG.MY_MONTH_POSITION.key) - 1], 10) - 1;
year = parseInt(aMonthYear[this.cfg.getProperty(DEF_CFG.MY_YEAR_POSITION.key) - 1], 10);
parsedDate = DU.util.LDate.getDate(year, month, 1);
}
} else {
parsedDate = DU.util.LDate.getDate(this.today.getFullYear(), this.today.getMonth(), 1);
}
return parsedDate;
},
// END UTILITY METHODS
// BEGIN EVENT HANDLERS
/**
* Event executed before a date is selected in the calendar widget.
* @deprecated Event handlers for this event should be susbcribed to beforeSelectEvent.
*/
onBeforeSelect: function() {
if (this.cfg.getProperty(DEF_CFG.MULTI_SELECT.key) === false) {
if (this.parent) {
this.parent.callChildFunction("clearAllBodyCellStyles", this.Style.CSS_CELL_SELECTED);
this.parent.deselectAll();
} else {
this.clearAllBodyCellStyles(this.Style.CSS_CELL_SELECTED);
this.deselectAll();
}
}
},
/**
* Event executed when a date is selected in the calendar widget.
* @param {Array} selected An array of date field arrays representing which date or dates were selected. Example: [ [2006,8,6],[2006,8,7],[2006,8,8] ]
* @deprecated Event handlers for this event should be susbcribed to selectEvent.
*/
onSelect: function(selected) {},
/**
* Event executed before a date is deselected in the calendar widget.
* @deprecated Event handlers for this event should be susbcribed to beforeDeselectEvent.
*/
onBeforeDeselect: function() { },
/**
* Event executed when a date is deselected in the calendar widget.
* @param {Array} selected An array of date field arrays representing which date or dates were deselected. Example: [ [2006,8,6],[2006,8,7],[2006,8,8] ]
* @deprecated Event handlers for this event should be susbcribed to deselectEvent.
*/
onDeselect: function(deselected) { },
/**
* Event executed when the user navigates to a different calendar page.
* @deprecated Event handlers for this event should be susbcribed to changePageEvent.
*/
onChangePage: function() {
this.render();
},
/**
* Event executed when the calendar widget is rendered.
* @deprecated Event handlers for this event should be susbcribed to renderEvent.
*/
onRender: function() { },
/**
* Event executed when the calendar widget is reset to its original state.
* @deprecated Event handlers for this event should be susbcribed to resetEvemt.
*/
onReset: function() { this.render(); },
/**
* Event executed when the calendar widget is completely cleared to the current month with no selections.
* @deprecated Event handlers for this event should be susbcribed to clearEvent.
*/
onClear: function() { this.render(); },
/**
* Validates the calendar widget. This method has no default implementation
* and must be extended by subclassing the widget.
* @return Should return true if the widget validates, and false if
* it doesn't.
* @type Boolean
*/
validate: function() { return true; },
// END EVENT HANDLERS
// BEGIN DATE PARSE METHODS
/**
* Converts a date string to a date field array
* @private
* @param {String} sDate Date string. Valid formats are mm/dd and mm/dd/yyyy.
* @return A date field array representing the string passed to the method
* @type Array[](Number[])
*/
_parseDate: function(sDate) {
var aDate = sDate.split(this.Locale.DATE_FIELD_DELIMITER),
rArray;
if (aDate.length == 2) {
rArray = [aDate[this.Locale.MD_MONTH_POSITION - 1], aDate[this.Locale.MD_DAY_POSITION - 1]];
rArray.type = LCalendar.MONTH_DAY;
} else {
rArray = [aDate[this.Locale.MDY_YEAR_POSITION - 1], aDate[this.Locale.MDY_MONTH_POSITION - 1], aDate[this.Locale.MDY_DAY_POSITION - 1]];
rArray.type = LCalendar.DATE;
}
for (var i = 0; i < rArray.length; i++) {
rArray[i] = parseInt(rArray[i], 10);
}
return rArray;
},
/**
* Converts a multi or single-date string to an array of date field arrays
* @private
* @param {String} sDates Date string with one or more comma-delimited dates. Valid formats are mm/dd, mm/dd/yyyy, mm/dd/yyyy-mm/dd/yyyy
* @return An array of date field arrays
* @type Array[](Number[])
*/
_parseDates: function(sDates) {
var aReturn = [],
aDates = sDates.split(this.Locale.DATE_DELIMITER);
for (var d = 0; d < aDates.length; ++d) {
var sDate = aDates[d];
if (sDate.indexOf(this.Locale.DATE_RANGE_DELIMITER) != -1) {
// This is a range
var aRange = sDate.split(this.Locale.DATE_RANGE_DELIMITER),
dateStart = this._parseDate(aRange[0]),
dateEnd = this._parseDate(aRange[1]),
fullRange = this._parseRange(dateStart, dateEnd);
aReturn = aReturn.concat(fullRange);
} else {
// This is not a range
var aDate = this._parseDate(sDate);
aReturn.push(aDate);
}
}
return aReturn;
},
/**
* Converts a date range to the full list of included dates
* @private
* @param {Number[]} startDate Date field array representing the first date in the range
* @param {Number[]} endDate Date field array representing the last date in the range
* @return An array of date field arrays
* @type Array[](Number[])
*/
_parseRange: function(startDate, endDate) {
var dCurrent = DU.util.LDate.add(DU.util.LDate.getDate(startDate[0], startDate[1] - 1, startDate[2]), DU.util.LDate.DAY, 1),
dEnd = DU.util.LDate.getDate(endDate[0], endDate[1] - 1, endDate[2]),
results = [];
results.push(startDate);
while (dCurrent.getTime() <= dEnd.getTime()) {
results.push([dCurrent.getFullYear(), dCurrent.getMonth() + 1, dCurrent.getDate()]);
dCurrent = DU.util.LDate.add(dCurrent, DU.util.LDate.DAY, 1);
}
return results;
},
// END DATE PARSE METHODS
// BEGIN RENDERER METHODS
/**
* Resets the render stack of the current calendar to its original pre-render value.
*/
resetRenderers: function() {
this.renderStack = this._renderStack.concat();
},
/**
* Removes all custom renderers added to the LCalendar through the addRenderer, addMonthRenderer and
* addWeekdayRenderer methods. LCalendar's render method needs to be called after removing renderers
* to re-render the LCalendar without custom renderers applied.
*/
removeRenderers: function() {
this._renderStack = [];
this.renderStack = [];
},
/**
* Clears the inner HTML, CSS class and style information from the specified cell.
* @method clearElement
* @param {HTMLTableCellElement} cell The cell to clear
*/
clearElement: function(cell) {
cell.innerHTML = " ";
cell.className = "";
},
/**
* Adds a renderer to the render stack. The function reference passed to this method will be executed
* when a date cell matches the conditions specified in the date string for this renderer.
* @method addRenderer
* @param {String} sDates A date string to associate with the specified renderer. Valid formats
* include date (12/24/2005), month/day (12/24), and range (12/1/2004-1/1/2005)
* @param {Function} fnRender The function executed to render cells that match the render rules for this renderer.
*/
addRenderer: function(sDates, fnRender) {
var aDates = this._parseDates(sDates);
for (var i = 0; i < aDates.length; ++i) {
var aDate = aDates[i];
if (aDate.length == 2) { // this is either a range or a month/day combo
if (aDate[0] instanceof Array) { // this is a range
this._addRenderer(LCalendar.RANGE, aDate, fnRender);
} else { // this is a month/day combo
this._addRenderer(LCalendar.MONTH_DAY, aDate, fnRender);
}
} else if (aDate.length == 3) {
this._addRenderer(LCalendar.DATE, aDate, fnRender);
}
}
},
/**
* The private method used for adding cell renderers to the local render stack.
* This method is called by other methods that set the renderer type prior to the method call.
* @method _addRenderer
* @private
* @param {String} type The type string that indicates the type of date renderer being added.
* Values are DU.widget.LCalendar.DATE, DU.widget.LCalendar.MONTH_DAY, DU.widget.LCalendar.WEEKDAY,
* DU.widget.LCalendar.RANGE, DU.widget.LCalendar.MONTH
* @param {Array} aDates An array of dates used to construct the renderer. The format varies based
* on the renderer type
* @param {Function} fnRender The function executed to render cells that match the render rules for this renderer.
*/
_addRenderer: function(type, aDates, fnRender) {
var add = [type, aDates, fnRender];
this.renderStack.unshift(add);
this._renderStack = this.renderStack.concat();
},
/**
* Adds a month to the render stack. The function reference passed to this method will be executed
* when a date cell matches the month passed to this method.
* @method addMonthRenderer
* @param {Number} month The month (1-12) to associate with this renderer
* @param {Function} fnRender The function executed to render cells that match the render rules for this renderer.
*/
addMonthRenderer: function(month, fnRender) {
this._addRenderer(LCalendar.MONTH, [month], fnRender);
},
/**
* Adds a weekday to the render stack. The function reference passed to this method will be executed
* when a date cell matches the weekday passed to this method.
* @method addWeekdayRenderer
* @param {Number} weekday The weekday (Sunday = 1, Monday = 2 ... Saturday = 7) to associate with this renderer
* @param {Function} fnRender The function executed to render cells that match the render rules for this renderer.
*/
addWeekdayRenderer: function(weekday, fnRender) {
this._addRenderer(LCalendar.WEEKDAY, [weekday], fnRender);
},
// END RENDERER METHODS
// BEGIN CSS METHODS
/**
* Removes all styles from all body cells in the current calendar table.
* @method clearAllBodyCellStyles
* @param {style} style The CSS class name to remove from all calendar body cells
*/
clearAllBodyCellStyles: function(style) {
for (var c = 0; c < this.cells.length; ++c) {
Dom.removeClass(this.cells[c], style);
}
},
// END CSS METHODS
// BEGIN GETTER/SETTER METHODS
/**
* Sets the calendar's month explicitly
* @method setMonth
* @param {Number} month The numeric month, from 0 (January) to 11 (December)
*/
setMonth: function(month) {
var cfgPageDate = DEF_CFG.PAGEDATE.key,
current = this.cfg.getProperty(cfgPageDate);
current.setMonth(parseInt(month, 10));
this.cfg.setProperty(cfgPageDate, current);
},
/**
* Sets the calendar's year explicitly.
* @method setYear
* @param {Number} year The numeric 4-digit year
*/
setYear: function(year) {
var cfgPageDate = DEF_CFG.PAGEDATE.key,
current = this.cfg.getProperty(cfgPageDate);
current.setFullYear(parseInt(year, 10));
this.cfg.setProperty(cfgPageDate, current);
},
/**
* Gets the list of currently selected dates from the calendar.
* @method getSelectedDates
* @return {Date[]} An array of currently selected JavaScript Date objects.
*/
getSelectedDates: function() {
var returnDates = [],
selected = this.cfg.getProperty(DEF_CFG.SELECTED.key);
for (var d = 0; d < selected.length; ++d) {
var dateArray = selected[d];
var date = DU.util.LDate.getDate(dateArray[0], dateArray[1] - 1, dateArray[2]);
returnDates.push(date);
}
returnDates.sort(function(a, b) { return a - b; });
return returnDates;
},
/// END GETTER/SETTER METHODS ///
/**
* Hides the LCalendar's outer container from view.
* @method hide
*/
hide: function() {
if (this.beforeHideEvent.fire()) {
this.oDomContainer.style.display = "none";
this.hideEvent.fire();
}
},
/**
* Shows the LCalendar's outer container.
* @method show
*/
show: function() {
if (this.beforeShowEvent.fire()) {
this.oDomContainer.style.display = "block";
//size 조정
if(!this.isSyncIframeSize){
this._syncIframeSize();
}
this.showEvent.fire();
}
},
/**
* container의 크기에 맞추어 iframe size 조절하기, 최초 한번만 조절된다.
* @method _syncIframeSize
* @private
*/
_syncIframeSize : function(){
if(this.iframe && this.oDomContainer){
//iframe의 크기가 커서 LDateBox시 blur가 먹지 않음
var containerEl = DU.get(this.oDomContainer);
this.iframe.style.width = containerEl.getWidth() + "px";
this.iframe.style.height = containerEl.getHeight() + "px";
this.isSyncIframeSize = true;
}
},
/**
* Returns a string representing the current browser.
* @deprecated As of 2.3.0, environment information is available in DU.browser
* @see DU.browser
* @property browser
* @type String
*/
browser: (function() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('opera') != -1) { // Opera (check first in case of spoof)
return 'opera';
} else if (ua.indexOf('msie 7') != -1) { // IE7
return 'ie7';
} else if (ua.indexOf('msie') != -1) { // IE
return 'ie';
} else if (ua.indexOf('safari') != -1) { // Safari (check before Gecko because it includes "like Gecko")
return 'safari';
} else if (ua.indexOf('gecko') != -1) { // Gecko
return 'gecko';
} else {
return false;
}
})(),
/**
* Returns a string representation of the object.
* @method toString
* @return {String} A string representation of the LCalendar object.
*/
toString: function() {
return "LCalendar " + this.id;
},
/**
* Destroys the LCalendar instance. The method will remove references
* to HTML elements, remove any event listeners added by the LCalendar,
* and destroy the Config and LCalendarNavigator instances it has created.
*
* @method destroy
*/
destroy: function() {
if (this.beforeDestroyEvent.fire()) {
var cal = this;
// Child objects
if (cal.navigator) {
cal.navigator.destroy();
}
if (cal.cfg) {
cal.cfg.destroy();
}
// DOM event listeners
Event.purgeElement(cal.oDomContainer, true);
// Generated markup/DOM - Not removing the container DIV since we didn't create it.
Dom.removeClass(cal.oDomContainer, "withtitle");
Dom.removeClass(cal.oDomContainer, cal.Style.CSS_CONTAINER);
Dom.removeClass(cal.oDomContainer, cal.Style.CSS_SINGLE);
cal.oDomContainer.innerHTML = "";
// JS-to-DOM references
cal.oDomContainer = null;
cal.cells = null;
this.destroyEvent.fire();
}
},
/**
* Subscribe to a LCustomEvent by event type
*
* @method on
* @param {string} p_type the type, or name of the event
* @param {function} p_fn the function to exectute when the event fires
* @param {Object} p_obj An object to be passed along when the event
* fires
* @param {boolean} p_override If true, the obj passed in becomes the
* execution scope of the listener
*/
on: function(p_type, p_fn, p_obj, p_override) {
var ce = this[p_type + 'Event'];
if(!ce) return;
ce.on(p_fn, p_obj || this, DU.isUndefined(p_override) ? true : p_override);
}
};
DU.widget.LCalendar = LCalendar;
/**
* @namespace DU.widget
* @class Calendar_Core
* @extends DU.widget.LCalendar
* @deprecated The old Calendar_Core class is no longer necessary.
*/
DU.widget.Calendar_Core = DU.widget.LCalendar;
DU.widget.Cal_Core = DU.widget.LCalendar;
})();
(function() {
var Dom = DU.util.LDom,
LDateMath = DU.widget.LDate,
Event = DU.util.LEvent,
Lang = DU,
LCalendar = DU.widget.LCalendar;
/**
* DU.widget.LCalendarGroup is a special container class for DU.widget.LCalendar. This class facilitates
* the ability to have multi-page calendar views that share a single dataset and are
* dependent on each other.
*
* The calendar group instance will refer to each of its elements using a 0-based index.
* For example, to construct the placeholder for a calendar group widget with id "cal1" and
* containerId of "cal1Container", the markup would be as follows:
*
* <div id="cal1Container_0"></div>
* <div id="cal1Container_1"></div>
*
* The tables for the calendars ("cal1_0" and "cal1_1") will be inserted into those containers.
*
*
* NOTE: As of 2.4.0, the constructor's ID argument is optional.
* The LCalendarGroup can be constructed by simply providing a container ID string,
* or a reference to a container DIV HTMLElement (the element needs to exist
* in the document).
*
* E.g.:
*
* var c = new DU.widget.LCalendarGroup("calContainer", configOptions);
*
* or:
*
* var containerDiv = DU.util.LDom.get("calContainer");
* var c = new DU.widget.LCalendarGroup(containerDiv, configOptions);
*
*
*
* If not provided, the ID will be generated from the container DIV ID by adding an "_t" suffix.
* For example if an ID is not provided, and the container's ID is "calContainer", the LCalendarGroup's ID will be set to "calContainer_t".
*
*
* @module widget_calendar
* @namespace DU.widget
* @class LCalendarGroup
* @constructor
* @param {String} id optional The id of the table element that will represent the LCalendarGroup widget. As of 2.4.0, this argument is optional.
* @param {String | HTMLElement} container The id of the container div element that will wrap the LCalendarGroup table, or a reference to a DIV element which exists in the document.
* @param {Object} config optional The configuration object containing the initial configuration values for the LCalendarGroup.
*/
function LCalendarGroup(id, containerId, config) {
if (arguments.length > 0) {
this.init.apply(this, arguments);
}
}
/**
* The set of default Config property keys and values for the LCalendarGroup
* @property DU.widget.LCalendarGroup._DEFAULT_CONFIG
* @final
* @static
* @private
* @type Object
*/
LCalendarGroup._DEFAULT_CONFIG = LCalendar._DEFAULT_CONFIG;
LCalendarGroup._DEFAULT_CONFIG.PAGES = { key: "pages", value: 2 };
var DEF_CFG = LCalendarGroup._DEFAULT_CONFIG;
LCalendarGroup.prototype = {
/**
* Initializes the calendar group. All subclasses must call this method in order for the
* group to be initialized properly.
* @method init
* @param {String} id optional The id of the table element that will represent the LCalendarGroup widget. As of 2.4.0, this argument is optional.
* @param {String | HTMLElement} container The id of the container div element that will wrap the LCalendarGroup table, or a reference to a DIV element which exists in the document.
* @param {Object} config optional The configuration object containing the initial configuration values for the LCalendarGroup.
*/
init: function(id, container, config) {
// Normalize 2.4.0, pre 2.4.0 args
var nArgs = this._parseArgs(arguments);
id = nArgs.id;
container = nArgs.container;
config = nArgs.config;
this.oDomContainer = Dom.get(container);
if (!this.oDomContainer.id) {
this.oDomContainer.id = Dom.generateId();
}
if (!id) {
id = this.oDomContainer.id + "_t";
}
/**
* The unique id associated with the LCalendarGroup
* @property id
* @type String
*/
this.id = id;
/**
* The unique id associated with the LCalendarGroup container
* @property containerId
* @type String
*/
this.containerId = this.oDomContainer.id;
this.initEvents();
this.initStyles();
/**
* The collection of LCalendar pages contained within the LCalendarGroup
* @property pages
* @type DU.widget.LCalendar[]
*/
this.pages = [];
Dom.addClass(this.oDomContainer, LCalendarGroup.CSS_CONTAINER);
Dom.addClass(this.oDomContainer, LCalendarGroup.CSS_MULTI_UP);
Dom.addClass(this.oDomContainer, "L-fixed");
/**
* The Config object used to hold the configuration variables for the LCalendarGroup
* @property cfg
* @type DU.widget.LConfig
*/
this.cfg = new DU.widget.LConfig(this);
/**
* The local object which contains the LCalendarGroup's options
* @property Options
* @type Object
*/
this.Options = {};
/**
* The local object which contains the LCalendarGroup's locale settings
* @property Locale
* @type Object
*/
this.Locale = {};
this.setupConfig();
if (config) {
this.cfg.applyConfig(config, true);
}
this.cfg.fireQueue();
// OPERA HACK FOR MISWRAPPED FLOATS
if (DU.browser.opera) {
this.renderEvent.on(this._fixWidth, this, true);
this.showEvent.on(this._fixWidth, this, true);
}
},
setupConfig: function() {
var cfg = this.cfg;
/**
* The number of pages to include in the LCalendarGroup. This value can only be set once, in the LCalendarGroup's constructor arguments.
* @config pages
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.PAGES.key, { value: DEF_CFG.PAGES.value, validator: cfg.checkNumber, handler: this.configPages });
/**
* The month/year representing the current visible LCalendar date (mm/yyyy)
* @config pagedate
* @type String | Date
* @default today's date
*/
cfg.addProperty(DEF_CFG.PAGEDATE.key, { value: new Date(), handler: this.configPageDate });
/**
* The date or range of dates representing the current LCalendar selection
*
* @config selected
* @type String
* @default []
*/
cfg.addProperty(DEF_CFG.SELECTED.key, { value: [], handler: this.configSelected });
/**
* The title to display above the LCalendarGroup's month header
* @config title
* @type String
* @default ""
*/
cfg.addProperty(DEF_CFG.TITLE.key, { value: DEF_CFG.TITLE.value, handler: this.configTitle });
/**
* Whether or not a close button should be displayed for this LCalendarGroup
* @config close
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.CLOSE.key, { value: DEF_CFG.CLOSE.value, handler: this.configClose });
/**
* Whether or not an iframe shim should be placed under the LCalendar to prevent select boxes from bleeding through in Internet Explorer 6 and below.
* This property is enabled by default for IE6 and below. It is disabled by default for other browsers for performance reasons, but can be
* enabled if required.
*
* @config iframe
* @type Boolean
* @default true for IE6 and below, false for all other browsers
*/
cfg.addProperty(DEF_CFG.IFRAME.key, { value: DEF_CFG.IFRAME.value, handler: this.configIframe, validator: cfg.checkBoolean });
/**
* The minimum selectable date in the current LCalendar (mm/dd/yyyy)
* @config mindate
* @type String | Date
* @default null
*/
cfg.addProperty(DEF_CFG.MINDATE.key, { value: DEF_CFG.MINDATE.value, handler: this.delegateConfig });
/**
* The maximum selectable date in the current LCalendar (mm/dd/yyyy)
* @config maxdate
* @type String | Date
* @default null
*/
cfg.addProperty(DEF_CFG.MAXDATE.key, { value: DEF_CFG.MAXDATE.value, handler: this.delegateConfig });
// Options properties
/**
* True if the LCalendar should allow multiple selections. False by default.
* @config MULTI_SELECT
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.MULTI_SELECT.key, { value: DEF_CFG.MULTI_SELECT.value, handler: this.delegateConfig, validator: cfg.checkBoolean });
/**
* The weekday the week begins on. Default is 0 (Sunday).
* @config START_WEEKDAY
* @type number
* @default 0
*/
cfg.addProperty(DEF_CFG.START_WEEKDAY.key, { value: DEF_CFG.START_WEEKDAY.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* True if the LCalendar should show weekday labels. True by default.
* @config SHOW_WEEKDAYS
* @type Boolean
* @default true
*/
cfg.addProperty(DEF_CFG.SHOW_WEEKDAYS.key, { value: DEF_CFG.SHOW_WEEKDAYS.value, handler: this.delegateConfig, validator: cfg.checkBoolean });
/**
* True if the LCalendar should show week row headers. False by default.
* @config SHOW_WEEK_HEADER
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.SHOW_WEEK_HEADER.key, { value: DEF_CFG.SHOW_WEEK_HEADER.value, handler: this.delegateConfig, validator: cfg.checkBoolean });
/**
* True if the LCalendar should show week row footers. False by default.
* @config SHOW_WEEK_FOOTER
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.SHOW_WEEK_FOOTER.key, { value: DEF_CFG.SHOW_WEEK_FOOTER.value, handler: this.delegateConfig, validator: cfg.checkBoolean });
/**
* True if the LCalendar should suppress weeks that are not a part of the current month. False by default.
* @config HIDE_BLANK_WEEKS
* @type Boolean
* @default false
*/
cfg.addProperty(DEF_CFG.HIDE_BLANK_WEEKS.key, { value: DEF_CFG.HIDE_BLANK_WEEKS.value, handler: this.delegateConfig, validator: cfg.checkBoolean });
/**
* The image that should be used for the left navigation arrow.
* @config NAV_ARROW_LEFT
* @type String
* @deprecated You can customize the image by overriding the default CSS class for the left arrow - "calnavleft"
* @default null
*/
cfg.addProperty(DEF_CFG.NAV_ARROW_LEFT.key, { value: DEF_CFG.NAV_ARROW_LEFT.value, handler: this.delegateConfig });
/**
* The image that should be used for the right navigation arrow.
* @config NAV_ARROW_RIGHT
* @type String
* @deprecated You can customize the image by overriding the default CSS class for the right arrow - "calnavright"
* @default null
*/
cfg.addProperty(DEF_CFG.NAV_ARROW_RIGHT.key, { value: DEF_CFG.NAV_ARROW_RIGHT.value, handler: this.delegateConfig });
// Locale properties
/**
* The short month labels for the current locale.
* @config MONTHS_SHORT
* @type String[]
* @default ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
*/
cfg.addProperty(DEF_CFG.MONTHS_SHORT.key, { value: DEF_CFG.MONTHS_SHORT.value, handler: this.delegateConfig });
/**
* The long month labels for the current locale.
* @config MONTHS_LONG
* @type String[]
* @default ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
*/
cfg.addProperty(DEF_CFG.MONTHS_LONG.key, { value: DEF_CFG.MONTHS_LONG.value, handler: this.delegateConfig });
/**
* The 1-character weekday labels for the current locale.
* @config WEEKDAYS_1CHAR
* @type String[]
* @default ["S", "M", "T", "W", "T", "F", "S"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_1CHAR.key, { value: DEF_CFG.WEEKDAYS_1CHAR.value, handler: this.delegateConfig });
/**
* The short weekday labels for the current locale.
* @config WEEKDAYS_SHORT
* @type String[]
* @default ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_SHORT.key, { value: DEF_CFG.WEEKDAYS_SHORT.value, handler: this.delegateConfig });
/**
* The medium weekday labels for the current locale.
* @config WEEKDAYS_MEDIUM
* @type String[]
* @default ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_MEDIUM.key, { value: DEF_CFG.WEEKDAYS_MEDIUM.value, handler: this.delegateConfig });
/**
* The long weekday labels for the current locale.
* @config WEEKDAYS_LONG
* @type String[]
* @default ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
*/
cfg.addProperty(DEF_CFG.WEEKDAYS_LONG.key, { value: DEF_CFG.WEEKDAYS_LONG.value, handler: this.delegateConfig });
/**
* The setting that determines which length of month labels should be used. Possible values are "short" and "long".
* @config LOCALE_MONTHS
* @type String
* @default "long"
*/
cfg.addProperty(DEF_CFG.LOCALE_MONTHS.key, { value: DEF_CFG.LOCALE_MONTHS.value, handler: this.delegateConfig });
/**
* The setting that determines which length of weekday labels should be used. Possible values are "1char", "short", "medium", and "long".
* @config LOCALE_WEEKDAYS
* @type String
* @default "short"
*/
cfg.addProperty(DEF_CFG.LOCALE_WEEKDAYS.key, { value: DEF_CFG.LOCALE_WEEKDAYS.value, handler: this.delegateConfig });
/**
* The value used to delimit individual dates in a date string passed to various LCalendar functions.
* @config DATE_DELIMITER
* @type String
* @default ","
*/
cfg.addProperty(DEF_CFG.DATE_DELIMITER.key, { value: DEF_CFG.DATE_DELIMITER.value, handler: this.delegateConfig });
/**
* The value used to delimit date fields in a date string passed to various LCalendar functions.
* @config DATE_FIELD_DELIMITER
* @type String
* @default "/"
*/
cfg.addProperty(DEF_CFG.DATE_FIELD_DELIMITER.key, { value: DEF_CFG.DATE_FIELD_DELIMITER.value, handler: this.delegateConfig });
/**
* The value used to delimit date ranges in a date string passed to various LCalendar functions.
* @config DATE_RANGE_DELIMITER
* @type String
* @default "-"
*/
cfg.addProperty(DEF_CFG.DATE_RANGE_DELIMITER.key, { value: DEF_CFG.DATE_RANGE_DELIMITER.value, handler: this.delegateConfig });
/**
* The position of the month in a month/year date string
* @config MY_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MY_MONTH_POSITION.key, { value: DEF_CFG.MY_MONTH_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the year in a month/year date string
* @config MY_YEAR_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MY_YEAR_POSITION.key, { value: DEF_CFG.MY_YEAR_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the month in a month/day date string
* @config MD_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MD_MONTH_POSITION.key, { value: DEF_CFG.MD_MONTH_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the day in a month/year date string
* @config MD_DAY_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MD_DAY_POSITION.key, { value: DEF_CFG.MD_DAY_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the month in a month/day/year date string
* @config MDY_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MDY_MONTH_POSITION.key, { value: DEF_CFG.MDY_MONTH_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the day in a month/day/year date string
* @config MDY_DAY_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MDY_DAY_POSITION.key, { value: DEF_CFG.MDY_DAY_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the year in a month/day/year date string
* @config MDY_YEAR_POSITION
* @type Number
* @default 3
*/
cfg.addProperty(DEF_CFG.MDY_YEAR_POSITION.key, { value: DEF_CFG.MDY_YEAR_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the month in the month year label string used as the LCalendar header
* @config MY_LABEL_MONTH_POSITION
* @type Number
* @default 1
*/
cfg.addProperty(DEF_CFG.MY_LABEL_MONTH_POSITION.key, { value: DEF_CFG.MY_LABEL_MONTH_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The position of the year in the month year label string used as the LCalendar header
* @config MY_LABEL_YEAR_POSITION
* @type Number
* @default 2
*/
cfg.addProperty(DEF_CFG.MY_LABEL_YEAR_POSITION.key, { value: DEF_CFG.MY_LABEL_YEAR_POSITION.value, handler: this.delegateConfig, validator: cfg.checkNumber });
/**
* The suffix used after the month when rendering the LCalendar header
* @config MY_LABEL_MONTH_SUFFIX
* @type String
* @default " "
*/
cfg.addProperty(DEF_CFG.MY_LABEL_MONTH_SUFFIX.key, { value: DEF_CFG.MY_LABEL_MONTH_SUFFIX.value, handler: this.delegateConfig });
/**
* The suffix used after the year when rendering the LCalendar header
* @config MY_LABEL_YEAR_SUFFIX
* @type String
* @default ""
*/
cfg.addProperty(DEF_CFG.MY_LABEL_YEAR_SUFFIX.key, { value: DEF_CFG.MY_LABEL_YEAR_SUFFIX.value, handler: this.delegateConfig });
/**
* LConfiguration for the Month Year Navigation UI. By default it is disabled
* @config NAV
* @type Object
* @default null
*/
cfg.addProperty(DEF_CFG.NAV.key, { value: DEF_CFG.NAV.value, handler: this.configNavigator });
/**
* The map of UI strings which the LCalendarGroup UI uses.
*
* @config strings
* @type {Object}
* @default An object with the properties shown below:
*
*
previousMonth
String : The string to use for the "Previous Month" navigation UI. Defaults to "Previous Month".
*
nextMonth
String : The string to use for the "Next Month" navigation UI. Defaults to "Next Month".
*
close
String : The string to use for the close button label. Defaults to "Close".
*
*/
cfg.addProperty(DEF_CFG.STRINGS.key, {
value: DEF_CFG.STRINGS.value,
handler: this.configStrings,
validator: function(val) {
return Lang.isObject(val);
},
supercedes: DEF_CFG.STRINGS.supercedes
});
},
/**
* Initializes LCalendarGroup's built-in CustomEvents
* @method initEvents
*/
initEvents: function() {
var me = this,
strEvent = "Event",
CE = DU.util.LCustomEvent;
/**
* Proxy subscriber to subscribe to the LCalendarGroup's child Calendars' CustomEvents
* @method sub
* @private
* @param {Function} fn The function to subscribe to this LCustomEvent
* @param {Object} obj The LCustomEvent's scope object
* @param {Boolean} bOverride Whether or not to apply scope correction
*/
var sub = function(fn, obj, bOverride) {
for (var p = 0; p < me.pages.length; ++p) {
var cal = me.pages[p];
cal[this.type + strEvent].on(fn, obj, bOverride);
}
};
/**
* Proxy unsubscriber to unsubscribe from the LCalendarGroup's child Calendars' CustomEvents
* @method unsub
* @private
* @param {Function} fn The function to subscribe to this LCustomEvent
* @param {Object} obj The LCustomEvent's scope object
*/
var unsub = function(fn, obj) {
for (var p = 0; p < me.pages.length; ++p) {
var cal = me.pages[p];
cal[this.type + strEvent].unOn(fn, obj);
}
};
var defEvents = LCalendar._EVENT_TYPES;
/**
* Fired before a date selection is made
* @event beforeSelectEvent
*/
me.beforeSelectEvent = new CE(defEvents.BEFORE_SELECT);
me.beforeSelectEvent.on = sub; me.beforeSelectEvent.unOn = unsub;
/**
* Fired when a date selection is made
* @event selectEvent
* @param {Array} Array of Date field arrays in the format [YYYY, MM, LDD].
*/
me.selectEvent = new CE(defEvents.SELECT);
me.selectEvent.on = sub; me.selectEvent.unOn = unsub;
/**
* Fired before a date or set of dates is deselected
* @event beforeDeselectEvent
*/
me.beforeDeselectEvent = new CE(defEvents.BEFORE_DESELECT);
me.beforeDeselectEvent.on = sub; me.beforeDeselectEvent.unOn = unsub;
/**
* Fired when a date or set of dates has been deselected
* @event deselectEvent
* @param {Array} Array of Date field arrays in the format [YYYY, MM, LDD].
*/
me.deselectEvent = new CE(defEvents.DESELECT);
me.deselectEvent.on = sub; me.deselectEvent.unOn = unsub;
/**
* Fired when the LCalendar page is changed
* @event changePageEvent
*/
me.changePageEvent = new CE(defEvents.CHANGE_PAGE);
me.changePageEvent.on = sub; me.changePageEvent.unOn = unsub;
/**
* Fired before the LCalendar is rendered
* @event beforeRenderEvent
*/
me.beforeRenderEvent = new CE(defEvents.BEFORE_RENDER);
me.beforeRenderEvent.on = sub; me.beforeRenderEvent.unOn = unsub;
/**
* Fired when the LCalendar is rendered
* @event renderEvent
*/
me.renderEvent = new CE(defEvents.RENDER);
me.renderEvent.on = sub; me.renderEvent.unOn = unsub;
/**
* Fired when the LCalendar is reset
* @event resetEvent
*/
me.resetEvent = new CE(defEvents.RESET);
me.resetEvent.on = sub; me.resetEvent.unOn = unsub;
/**
* Fired when the LCalendar is cleared
* @event clearEvent
*/
me.clearEvent = new CE(defEvents.CLEAR);
me.clearEvent.on = sub; me.clearEvent.unOn = unsub;
/**
* Fired just before the LCalendarGroup is to be shown
* @event beforeShowEvent
*/
me.beforeShowEvent = new CE(defEvents.BEFORE_SHOW);
/**
* Fired after the LCalendarGroup is shown
* @event showEvent
*/
me.showEvent = new CE(defEvents.SHOW);
/**
* Fired just before the LCalendarGroup is to be hidden
* @event beforeHideEvent
*/
me.beforeHideEvent = new CE(defEvents.BEFORE_HIDE);
/**
* Fired after the LCalendarGroup is hidden
* @event hideEvent
*/
me.hideEvent = new CE(defEvents.HIDE);
/**
* Fired just before the LCalendarNavigator is to be shown
* @event beforeShowNavEvent
*/
me.beforeShowNavEvent = new CE(defEvents.BEFORE_SHOW_NAV);
/**
* Fired after the LCalendarNavigator is shown
* @event showNavEvent
*/
me.showNavEvent = new CE(defEvents.SHOW_NAV);
/**
* Fired just before the LCalendarNavigator is to be hidden
* @event beforeHideNavEvent
*/
me.beforeHideNavEvent = new CE(defEvents.BEFORE_HIDE_NAV);
/**
* Fired after the LCalendarNavigator is hidden
* @event hideNavEvent
*/
me.hideNavEvent = new CE(defEvents.HIDE_NAV);
/**
* Fired just before the LCalendarNavigator is to be rendered
* @event beforeRenderNavEvent
*/
me.beforeRenderNavEvent = new CE(defEvents.BEFORE_RENDER_NAV);
/**
* Fired after the LCalendarNavigator is rendered
* @event renderNavEvent
*/
me.renderNavEvent = new CE(defEvents.RENDER_NAV);
/**
* Fired just before the LCalendarGroup is to be destroyed
* @event beforeDestroyEvent
*/
me.beforeDestroyEvent = new CE(defEvents.BEFORE_DESTROY);
/**
* Fired after the LCalendarGroup is destroyed. This event should be used
* for notification only. When this event is fired, important LCalendarGroup instance
* properties, dom references and event listeners have already been
* removed/dereferenced, and hence the LCalendarGroup instance is not in a usable
* state.
*
* @event destroyEvent
*/
me.destroyEvent = new CE(defEvents.DESTROY);
},
/**
* The default Config handler for the "pages" property
* @method configPages
* @param {String} type The LCustomEvent type (usually the property name)
* @param {Object[]} args The LCustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
* @param {Object} obj The scope object. For configuration handlers, this will usually equal the owner.
*/
configPages: function(type, args, obj) {
var pageCount = args[0],
cfgPageDate = DEF_CFG.PAGEDATE.key,
sep = "_",
caldate,
firstPageDate = null,
groupCalClass = "groupcal",
firstClass = "first-of-type",
lastClass = "last-of-type";
for (var p = 0; p < pageCount; ++p) {
var calId = this.id + sep + p,
calContainerId = this.containerId + sep + p,
childConfig = this.cfg.getConfig();
childConfig.close = false;
childConfig.title = false;
childConfig.navigator = null;
if (p > 0) {
caldate = new Date(firstPageDate);
this._setMonthOnDate(caldate, caldate.getMonth() + p);
childConfig.pageDate = caldate;
}
var cal = this.constructChild(calId, calContainerId, childConfig);
Dom.removeClass(cal.oDomContainer, this.Style.CSS_SINGLE);
Dom.addClass(cal.oDomContainer, groupCalClass);
if (p === 0) {
firstPageDate = cal.cfg.getProperty(cfgPageDate);
Dom.addClass(cal.oDomContainer, firstClass);
}
if (p == (pageCount - 1)) {
Dom.addClass(cal.oDomContainer, lastClass);
}
cal.parent = this;
cal.index = p;
this.pages[this.pages.length] = cal;
}
},
/**
* The default Config handler for the "pagedate" property
* @method configPageDate
* @param {String} type The LCustomEvent type (usually the property name)
* @param {Object[]} args The LCustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
* @param {Object} obj The scope object. For configuration handlers, this will usually equal the owner.
*/
configPageDate: function(type, args, obj) {
var val = args[0],
firstPageDate;
var cfgPageDate = DEF_CFG.PAGEDATE.key;
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
if (p === 0) {
firstPageDate = cal._parsePageDate(val);
cal.cfg.setProperty(cfgPageDate, firstPageDate);
} else {
var pageDate = new Date(firstPageDate);
this._setMonthOnDate(pageDate, pageDate.getMonth() + p);
cal.cfg.setProperty(cfgPageDate, pageDate);
}
}
},
/**
* The default Config handler for the LCalendarGroup "selected" property
* @method configSelected
* @param {String} type The LCustomEvent type (usually the property name)
* @param {Object[]} args The LCustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
* @param {Object} obj The scope object. For configuration handlers, this will usually equal the owner.
*/
configSelected: function(type, args, obj) {
var cfgSelected = DEF_CFG.SELECTED.key;
this.delegateConfig(type, args, obj);
var selected = (this.pages.length > 0) ? this.pages[0].cfg.getProperty(cfgSelected) : [];
this.cfg.setProperty(cfgSelected, selected, true);
},
/**
* Delegates a configuration property to the CustomEvents associated with the LCalendarGroup's children
* @method delegateConfig
* @param {String} type The LCustomEvent type (usually the property name)
* @param {Object[]} args The LCustomEvent arguments. For configuration handlers, args[0] will equal the newly applied value for the property.
* @param {Object} obj The scope object. For configuration handlers, this will usually equal the owner.
*/
delegateConfig: function(type, args, obj) {
var val = args[0];
var cal;
for (var p = 0; p < this.pages.length; p++) {
cal = this.pages[p];
cal.cfg.setProperty(type, val);
}
},
/**
* @description 사용자가 직접 .cfg.setProperty 를 호출하지 않도록 사용성을 위해 wrapping
* @method setProperty
* @param key {object}
* @param value {object}
*/
setProperty : function(key,value){
this.cfg.setProperty(key,value);
},
/**
* Adds a function to all child Calendars within this LCalendarGroup.
* @method setChildFunction
* @param {String} fnName The name of the function
* @param {Function} fn The function to apply to each LCalendar page object
*/
setChildFunction: function(fnName, fn) {
var pageCount = this.cfg.getProperty(DEF_CFG.PAGES.key);
for (var p = 0; p < pageCount; ++p) {
this.pages[p][fnName] = fn;
}
},
/**
* Calls a function within all child Calendars within this LCalendarGroup.
* @method callChildFunction
* @param {String} fnName The name of the function
* @param {Array} args The arguments to pass to the function
*/
callChildFunction: function(fnName, args) {
var pageCount = this.cfg.getProperty(DEF_CFG.PAGES.key);
for (var p = 0; p < pageCount; ++p) {
var page = this.pages[p];
if (page[fnName]) {
var fn = page[fnName];
fn.call(page, args);
}
}
},
/**
* Constructs a child calendar. This method can be overridden if a subclassed version of the default
* calendar is to be used.
* @method constructChild
* @param {String} id The id of the table element that will represent the calendar widget
* @param {String} containerId The id of the container div element that will wrap the calendar table
* @param {Object} config The configuration object containing the LCalendar's arguments
* @return {DU.widget.LCalendar} The DU.widget.LCalendar instance that is constructed
*/
constructChild: function(id, containerId, config) {
var container = document.getElementById(containerId);
if (!container) {
container = document.createElement("div");
container.id = containerId;
this.oDomContainer.appendChild(container);
}
return new LCalendar(id, containerId, config);
},
/**
* Sets the calendar group's month explicitly. This month will be set into the first
* page of the multi-page calendar, and all other months will be iterated appropriately.
* @method setMonth
* @param {Number} month The numeric month, from 0 (January) to 11 (December)
*/
setMonth: function(month) {
month = parseInt(month, 10);
var currYear;
var cfgPageDate = DEF_CFG.PAGEDATE.key;
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
var pageDate = cal.cfg.getProperty(cfgPageDate);
if (p === 0) {
currYear = pageDate.getFullYear();
} else {
pageDate.setFullYear(currYear);
}
this._setMonthOnDate(pageDate, month + p);
cal.cfg.setProperty(cfgPageDate, pageDate);
}
},
/**
* Sets the calendar group's year explicitly. This year will be set into the first
* page of the multi-page calendar, and all other months will be iterated appropriately.
* @method setYear
* @param {Number} year The numeric 4-digit year
*/
setYear: function(year) {
var cfgPageDate = DEF_CFG.PAGEDATE.key;
year = parseInt(year, 10);
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
var pageDate = cal.cfg.getProperty(cfgPageDate);
if ((pageDate.getMonth() + 1) == 1 && p > 0) {
year += 1;
}
cal.setYear(year);
}
},
/**
* Calls the render function of all child calendars within the group.
* @method render
*/
render: function() {
this.renderHeader();
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.render();
}
this.renderFooter();
},
/**
* Selects a date or a collection of dates on the current calendar. This method, by default,
* does not call the render method explicitly. Once selection has completed, render must be
* called for the changes to be reflected visually.
* @method select
* @param {String/Date/Date[]} date The date string of dates to select in the current calendar. Valid formats are
* individual date(s) (12/24/2005,12/26/2005) or date range(s) (12/24/2005-1/1/2006).
* Multiple comma-delimited dates can also be passed to this method (12/24/2005,12/11/2005-12/13/2005).
* This method can also take a JavaScript Date object or an array of Date objects.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
select: function(date) {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.select(date);
}
return this.getSelectedDates();
},
/**
* Selects dates in the LCalendarGroup based on the cell index provided. This method is used to select cells without having to do a full render. The selected style is applied to the cells directly.
* The value of the MULTI_SELECT LConfiguration attribute will determine the set of dates which get selected.
*
*
If MULTI_SELECT is false, selectCell will select the cell at the specified index for only the last displayed LCalendar page.
*
If MULTI_SELECT is true, selectCell will select the cell at the specified index, on each displayed LCalendar page.
*
* @method selectCell
* @param {Number} cellIndex The index of the cell to be selected.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
selectCell: function(cellIndex) {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.selectCell(cellIndex);
}
return this.getSelectedDates();
},
/**
* Deselects a date or a collection of dates on the current calendar. This method, by default,
* does not call the render method explicitly. Once deselection has completed, render must be
* called for the changes to be reflected visually.
* @method deselect
* @param {String/Date/Date[]} date The date string of dates to deselect in the current calendar. Valid formats are
* individual date(s) (12/24/2005,12/26/2005) or date range(s) (12/24/2005-1/1/2006).
* Multiple comma-delimited dates can also be passed to this method (12/24/2005,12/11/2005-12/13/2005).
* This method can also take a JavaScript Date object or an array of Date objects.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
deselect: function(date) {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.deselect(date);
}
return this.getSelectedDates();
},
/**
* Deselects all dates on the current calendar.
* @method deselectAll
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
* Assuming that this function executes properly, the return value should be an empty array.
* However, the empty array is returned for the sake of being able to check the selection status
* of the calendar.
*/
deselectAll: function() {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.deselectAll();
}
return this.getSelectedDates();
},
/**
* Deselects dates in the LCalendarGroup based on the cell index provided. This method is used to select cells without having to do a full render. The selected style is applied to the cells directly.
* deselectCell will deselect the cell at the specified index on each displayed LCalendar page.
*
* @method deselectCell
* @param {Number} cellIndex The index of the cell to deselect.
* @return {Date[]} Array of JavaScript Date objects representing all individual dates that are currently selected.
*/
deselectCell: function(cellIndex) {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.deselectCell(cellIndex);
}
return this.getSelectedDates();
},
/**
* Resets the calendar widget to the originally selected month and year, and
* sets the calendar to the initial selection(s).
* @method reset
*/
reset: function() {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.reset();
}
},
/**
* Clears the selected dates in the current calendar widget and sets the calendar
* to the current month and year.
* @method clear
*/
clear: function() {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.clear();
}
this.cfg.setProperty(DEF_CFG.SELECTED.key, []);
this.cfg.setProperty(DEF_CFG.PAGEDATE.key, new Date(this.pages[0].today.getTime()));
this.render();
},
/**
* Navigates to the next month page in the calendar widget.
* @method nextMonth
*/
nextMonth: function() {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.nextMonth();
}
},
/**
* Navigates to the previous month page in the calendar widget.
* @method previousMonth
*/
previousMonth: function() {
for (var p = this.pages.length - 1; p >= 0; --p) {
var cal = this.pages[p];
cal.previousMonth();
}
},
/**
* Navigates to the next year in the currently selected month in the calendar widget.
* @method nextYear
*/
nextYear: function() {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.nextYear();
}
},
/**
* Navigates to the previous year in the currently selected month in the calendar widget.
* @method previousYear
*/
previousYear: function() {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.previousYear();
}
},
/**
* Gets the list of currently selected dates from the calendar.
* @return An array of currently selected JavaScript Date objects.
* @type Date[]
*/
getSelectedDates: function() {
var returnDates = [];
var selected = this.cfg.getProperty(DEF_CFG.SELECTED.key);
for (var d = 0; d < selected.length; ++d) {
var dateArray = selected[d];
var date = LDateMath.getDate(dateArray[0], dateArray[1] - 1, dateArray[2]);
returnDates.push(date);
}
returnDates.sort(function(a, b) { return a - b; });
return returnDates;
},
/**
* Adds a renderer to the render stack. The function reference passed to this method will be executed
* when a date cell matches the conditions specified in the date string for this renderer.
* @method addRenderer
* @param {String} sDates A date string to associate with the specified renderer. Valid formats
* include date (12/24/2005), month/day (12/24), and range (12/1/2004-1/1/2005)
* @param {Function} fnRender The function executed to render cells that match the render rules for this renderer.
*/
addRenderer: function(sDates, fnRender) {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.addRenderer(sDates, fnRender);
}
},
/**
* Adds a month to the render stack. The function reference passed to this method will be executed
* when a date cell matches the month passed to this method.
* @method addMonthRenderer
* @param {Number} month The month (1-12) to associate with this renderer
* @param {Function} fnRender The function executed to render cells that match the render rules for this renderer.
*/
addMonthRenderer: function(month, fnRender) {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.addMonthRenderer(month, fnRender);
}
},
/**
* Adds a weekday to the render stack. The function reference passed to this method will be executed
* when a date cell matches the weekday passed to this method.
* @method addWeekdayRenderer
* @param {Number} weekday The weekday (1-7) to associate with this renderer. 1=Sunday, 2=Monday etc.
* @param {Function} fnRender The function executed to render cells that match the render rules for this renderer.
*/
addWeekdayRenderer: function(weekday, fnRender) {
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
cal.addWeekdayRenderer(weekday, fnRender);
}
},
/**
* Removes all custom renderers added to the LCalendarGroup through the addRenderer, addMonthRenderer and
* addWeekRenderer methods. LCalendarGroup's render method needs to be called to after removing renderers
* to see the changes applied.
*
* @method removeRenderers
*/
removeRenderers: function() {
this.callChildFunction("removeRenderers");
},
/**
* Renders the header for the LCalendarGroup.
* @method renderHeader
*/
renderHeader: function() {
// EMPTY DEFAULT IMPL
},
/**
* Renders a footer for the 2-up calendar container. By default, this method is
* unimplemented.
* @method renderFooter
*/
renderFooter: function() {
// EMPTY DEFAULT IMPL
},
/**
* Adds the designated number of months to the current calendar month, and sets the current
* calendar page date to the new month.
* @method addMonths
* @param {Number} count The number of months to add to the current calendar
*/
addMonths: function(count) {
this.callChildFunction("addMonths", count);
},
/**
* Subtracts the designated number of months from the current calendar month, and sets the current
* calendar page date to the new month.
* @method subtractMonths
* @param {Number} count The number of months to subtract from the current calendar
*/
subtractMonths: function(count) {
this.callChildFunction("subtractMonths", count);
},
/**
* Adds the designated number of years to the current calendar, and sets the current
* calendar page date to the new month.
* @method addYears
* @param {Number} count The number of years to add to the current calendar
*/
addYears: function(count) {
this.callChildFunction("addYears", count);
},
/**
* Subtcats the designated number of years from the current calendar, and sets the current
* calendar page date to the new month.
* @method subtractYears
* @param {Number} count The number of years to subtract from the current calendar
*/
subtractYears: function(count) {
this.callChildFunction("subtractYears", count);
},
/**
* Returns the LCalendar page instance which has a pagedate (month/year) matching the given date.
* Returns null if no match is found.
*
* @method getCalendarPage
* @param {Date} date The JavaScript Date object for which a LCalendar page is to be found.
* @return {LCalendar} The LCalendar page instance representing the month to which the date
* belongs.
*/
getCalendarPage: function(date) {
var cal = null;
if (date) {
var y = date.getFullYear(),
m = date.getMonth();
var pages = this.pages;
for (var i = 0; i < pages.length; ++i) {
var pageDate = pages[i].cfg.getProperty("pagedate");
if (pageDate.getFullYear() === y && pageDate.getMonth() === m) {
cal = pages[i];
break;
}
}
}
return cal;
},
/**
* Sets the month on a Date object, taking into account year rollover if the month is less than 0 or greater than 11.
* The Date object passed in is modified. It should be cloned before passing it into this method if the original value needs to be maintained
* @method _setMonthOnDate
* @private
* @param {Date} date The Date object on which to set the month index
* @param {Number} iMonth The month index to set
*/
_setMonthOnDate: function(date, iMonth) {
// Bug in Safari 1.3, 2.0 (WebKit build < 420), Date.setMonth does not work consistently if iMonth is not 0-11
if (DU.browser.webkit && DU.browser.webkit < 420 && (iMonth < 0 || iMonth > 11)) {
var newDate = LDateMath.add(date, LDateMath.MONTH, iMonth - date.getMonth());
date.setTime(newDate.getTime());
} else {
date.setMonth(iMonth);
}
},
/**
* Fixes the width of the LCalendarGroup container element, to account for miswrapped floats
* @method _fixWidth
* @private
*/
_fixWidth: function() {
var w = 0;
for (var p = 0; p < this.pages.length; ++p) {
var cal = this.pages[p];
w += cal.oDomContainer.offsetWidth;
}
if (w > 0) {
this.oDomContainer.style.width = w + "px";
}
},
/**
* Returns a string representation of the object.
* @method toString
* @return {String} A string representation of the LCalendarGroup object.
*/
toString: function() {
return "LCalendarGroup " + this.id;
},
/**
* Destroys the LCalendarGroup instance. The method will remove references
* to HTML elements, remove any event listeners added by the LCalendarGroup.
*
* It will also destroy the Config and LCalendarNavigator instances created by the
* LCalendarGroup and the individual LCalendar instances created for each page.
*
* @method destroy
*/
destroy: function() {
if (this.beforeDestroyEvent.fire()) {
var cal = this;
// Child objects
if (cal.navigator) {
cal.navigator.destroy();
}
if (cal.cfg) {
cal.cfg.destroy();
}
// DOM event listeners
Event.purgeElement(cal.oDomContainer, true);
// Generated markup/DOM - Not removing the container DIV since we didn't create it.
Dom.removeClass(cal.oDomContainer, LCalendarGroup.CSS_CONTAINER);
Dom.removeClass(cal.oDomContainer, LCalendarGroup.CSS_MULTI_UP);
for (var i = 0, l = cal.pages.length; i < l; i++) {
cal.pages[i].destroy();
cal.pages[i] = null;
}
cal.oDomContainer.innerHTML = "";
// JS-to-DOM references
cal.oDomContainer = null;
this.destroyEvent.fire();
}
}
};
/**
* CSS class representing the container for the calendar
* @property DU.widget.LCalendarGroup.CSS_CONTAINER
* @static
* @final
* @type String
*/
LCalendarGroup.CSS_CONTAINER = "L-calcontainer";
/**
* CSS class representing the container for the calendar
* @property DU.widget.LCalendarGroup.CSS_MULTI_UP
* @static
* @final
* @type String
*/
LCalendarGroup.CSS_MULTI_UP = "multi";
/**
* CSS class representing the title for the 2-up calendar
* @property DU.widget.LCalendarGroup.CSS_2UPTITLE
* @static
* @final
* @type String
*/
LCalendarGroup.CSS_2UPTITLE = "title";
/**
* CSS class representing the close icon for the 2-up calendar
* @property DU.widget.LCalendarGroup.CSS_2UPCLOSE
* @static
* @final
* @deprecated Along with LCalendar.IMG_ROOT and NAV_ARROW_LEFT, NAV_ARROW_RIGHT configuration properties.
* LCalendar's Style.CSS_CLOSE property now represents the CSS class used to render the close icon
* @type String
*/
LCalendarGroup.CSS_2UPCLOSE = "close-icon";
DU.applyPrototype(LCalendarGroup, LCalendar, "buildDayLabel",
"buildMonthLabel",
"renderOutOfBoundsDate",
"renderRowHeader",
"renderRowFooter",
"renderCellDefault",
"styleCellDefault",
"renderCellStyleHighlight1",
"renderCellStyleHighlight2",
"renderCellStyleHighlight3",
"renderCellStyleHighlight4",
"renderCellStyleToday",
"renderCellStyleSelected",
"renderCellNotThisMonth",
"renderBodyCellRestricted",
"initStyles",
"configTitle",
"configClose",
"configIframe",
"configStrings",
"configNavigator",
"createTitleBar",
"createCloseButton",
"removeTitleBar",
"removeCloseButton",
"hide",
"show",
"toDate",
"_toDate",
"_parseArgs",
"browser");
DU.widget.CalGrp = LCalendarGroup;
DU.widget.LCalendarGroup = LCalendarGroup;
/**
* @class LCalendar2up
* @extends DU.widget.LCalendarGroup
* @deprecated The old LCalendar2up class is no longer necessary, since LCalendarGroup renders in a 2up view by default.
*/
DU.widget.LCalendar2up = function(id, containerId, config) {
this.init(id, containerId, config);
};
DU.extend(DU.widget.LCalendar2up, LCalendarGroup);
/**
* @deprecated The old LCalendar2up class is no longer necessary, since LCalendarGroup renders in a 2up view by default.
*/
DU.widget.LCal2up = DU.widget.LCalendar2up;
})();
/**
* The LCalendarNavigator is used along with a LCalendar/LCalendarGroup to
* provide a Month/Year popup navigation control, allowing the user to navigate
* to a specific month/year in the LCalendar/LCalendarGroup without having to
* scroll through months sequentially
*
* @module widget_calendar
* @namespace DU.widget
* @class LCalendarNavigator
* @constructor
* @param {LCalendar|LCalendarGroup} cal The instance of the LCalendar or LCalendarGroup to which this LCalendarNavigator should be attached.
*/
DU.widget.LCalendarNavigator = function(cal) {
this.init(cal);
};
(function() {
// Setup static properties (inside anon fn, so that we can use shortcuts)
var CN = DU.widget.LCalendarNavigator;
/**
* DU.widget.LCalendarNavigator.CLASSES contains constants
* for the class values applied to the CalendarNaviatgator's
* DOM elements
* @property DU.widget.LCalendarNavigator.CLASSES
* @type Object
* @static
*/
CN.CLASSES = {
/**
* Class applied to the LCalendar Navigator's bounding box
* @property DU.widget.LCalendarNavigator.CLASSES.NAV
* @type String
* @static
*/
NAV: "L-cal-nav",
/**
* Class applied to the LCalendar/LCalendarGroup's bounding box to indicate
* the Navigator is currently visible
* @property DU.widget.LCalendarNavigator.CLASSES.NAV_VISIBLE
* @type String
* @static
*/
NAV_VISIBLE: "L-cal-nav-visible",
/**
* Class applied to the Navigator mask's bounding box
* @property DU.widget.LCalendarNavigator.CLASSES.MASK
* @type String
* @static
*/
MASK: "L-cal-nav-mask",
/**
* Class applied to the year label/control bounding box
* @property DU.widget.LCalendarNavigator.CLASSES.YEAR
* @type String
* @static
*/
YEAR: "L-cal-nav-y",
/**
* Class applied to the month label/control bounding box
* @property DU.widget.LCalendarNavigator.CLASSES.MONTH
* @type String
* @static
*/
MONTH: "L-cal-nav-m",
/**
* Class applied to the submit/cancel button's bounding box
* @property DU.widget.LCalendarNavigator.CLASSES.BUTTONS
* @type String
* @static
*/
BUTTONS: "L-cal-nav-b",
/**
* Class applied to buttons wrapping element
* @property DU.widget.LCalendarNavigator.CLASSES.BUTTON
* @type String
* @static
*/
BUTTON: "L-cal-nav-btn",
/**
* Class applied to the validation error area's bounding box
* @property DU.widget.LCalendarNavigator.CLASSES.ERROR
* @type String
* @static
*/
ERROR: "L-cal-nav-e",
/**
* Class applied to the year input control
* @property DU.widget.LCalendarNavigator.CLASSES.YEAR_CTRL
* @type String
* @static
*/
YEAR_CTRL: "L-cal-nav-yc",
/**
* Class applied to the month input control
* @property DU.widget.LCalendarNavigator.CLASSES.MONTH_CTRL
* @type String
* @static
*/
MONTH_CTRL: "L-cal-nav-mc",
/**
* Class applied to controls with invalid data (e.g. a year input field with invalid an year)
* @property DU.widget.LCalendarNavigator.CLASSES.INVALID
* @type String
* @static
*/
INVALID: "L-invalid",
/**
* Class applied to default controls
* @property DU.widget.LCalendarNavigator.CLASSES.DEFAULT
* @type String
* @static
*/
DEFAULT: "L-default"
};
/**
* Object literal containing the default configuration values for the LCalendarNavigator
* The configuration object is expected to follow the format below, with the properties being
* case sensitive.
*
*
strings
*
Object : An object with the properties shown below, defining the string labels to use in the Navigator's UI
*
*
month
String : The string to use for the month label. Defaults to "Month".
*
year
String : The string to use for the year label. Defaults to "Year".
*
submit
String : The string to use for the submit button label. Defaults to "Okay".
*
cancel
String : The string to use for the cancel button label. Defaults to "Cancel".
*
invalidYear
String : The string to use for invalid year values. Defaults to "Year needs to be a number".
*
*
*
monthFormat
String : The month format to use. Either DU.widget.LCalendar.LONG, or DU.widget.LCalendar.SHORT. Defaults to DU.widget.LCalendar.LONG
*
initialFocus
String : Either "year" or "month" specifying which input control should get initial focus. Defaults to "year"
*
* @property _DEFAULT_CFG
* @protected
* @type Object
* @static
*/
CN._DEFAULT_CFG = {
strings: {
month: "Month",
year: "Year",
submit: "Okay",
cancel: "Cancel",
invalidYear: "Year needs to be a number"
},
monthFormat: DU.widget.LCalendar.LONG,
initialFocus: "year"
};
/**
* The suffix added to the LCalendar/LCalendarGroup's ID, to generate
* a unique ID for the Navigator and it's bounding box.
* @property DU.widget.LCalendarNavigator.ID_SUFFIX
* @static
* @type String
* @final
*/
CN.ID_SUFFIX = "_nav";
/**
* The suffix added to the Navigator's ID, to generate
* a unique ID for the month control.
* @property DU.widget.LCalendarNavigator.MONTH_SUFFIX
* @static
* @type String
* @final
*/
CN.MONTH_SUFFIX = "_month";
/**
* The suffix added to the Navigator's ID, to generate
* a unique ID for the year control.
* @property DU.widget.LCalendarNavigator.YEAR_SUFFIX
* @static
* @type String
* @final
*/
CN.YEAR_SUFFIX = "_year";
/**
* The suffix added to the Navigator's ID, to generate
* a unique ID for the error bounding box.
* @property DU.widget.LCalendarNavigator.ERROR_SUFFIX
* @static
* @type String
* @final
*/
CN.ERROR_SUFFIX = "_error";
/**
* The suffix added to the Navigator's ID, to generate
* a unique ID for the "Cancel" button.
* @property DU.widget.LCalendarNavigator.CANCEL_SUFFIX
* @static
* @type String
* @final
*/
CN.CANCEL_SUFFIX = "_cancel";
/**
* The suffix added to the Navigator's ID, to generate
* a unique ID for the "Submit" button.
* @property DU.widget.LCalendarNavigator.SUBMIT_SUFFIX
* @static
* @type String
* @final
*/
CN.SUBMIT_SUFFIX = "_submit";
/**
* The number of digits to which the year input control is to be limited.
* @property DU.widget.LCalendarNavigator.YR_MAX_DIGITS
* @static
* @type Number
*/
CN.YR_MAX_DIGITS = 4;
/**
* The amount by which to increment the current year value,
* when the arrow up/down key is pressed on the year control
* @property DU.widget.LCalendarNavigator.YR_MINOR_INC
* @static
* @type Number
*/
CN.YR_MINOR_INC = 1;
/**
* The amount by which to increment the current year value,
* when the page up/down key is pressed on the year control
* @property DU.widget.LCalendarNavigator.YR_MAJOR_INC
* @static
* @type Number
*/
CN.YR_MAJOR_INC = 10;
/**
* Artificial delay (in ms) between the time the Navigator is hidden
* and the LCalendar/LCalendarGroup state is updated. Allows the user
* the see the LCalendar/LCalendarGroup page changing. If set to 0
* the LCalendar/LCalendarGroup page will be updated instantly
* @property DU.widget.LCalendarNavigator.UPDATE_DELAY
* @static
* @type Number
*/
CN.UPDATE_DELAY = 50;
/**
* Regular expression used to validate the year input
* @property DU.widget.LCalendarNavigator.YR_PATTERN
* @static
* @type RegExp
*/
CN.YR_PATTERN = /^\d+$/;
/**
* Regular expression used to trim strings
* @property DU.widget.LCalendarNavigator.TRIM
* @static
* @type RegExp
*/
CN.TRIM = /^\s*(.*?)\s*$/;
})();
DU.widget.LCalendarNavigator.prototype = {
/**
* The unique ID for this LCalendarNavigator instance
* @property id
* @type String
*/
id: null,
/**
* The LCalendar/LCalendarGroup instance to which the navigator belongs
* @property cal
* @type {LCalendar|LCalendarGroup}
*/
cal: null,
/**
* Reference to the HTMLElement used to render the navigator's bounding box
* @property navEl
* @type HTMLElement
*/
navEl: null,
/**
* Reference to the HTMLElement used to render the navigator's mask
* @property maskEl
* @type HTMLElement
*/
maskEl: null,
/**
* Reference to the HTMLElement used to input the year
* @property yearEl
* @type HTMLElement
*/
yearEl: null,
/**
* Reference to the HTMLElement used to input the month
* @property monthEl
* @type HTMLElement
*/
monthEl: null,
/**
* Reference to the HTMLElement used to display validation errors
* @property errorEl
* @type HTMLElement
*/
errorEl: null,
/**
* Reference to the HTMLElement used to update the LCalendar/LCalendar group
* with the month/year values
* @property submitEl
* @type HTMLElement
*/
submitEl: null,
/**
* Reference to the HTMLElement used to hide the navigator without updating the
* LCalendar/LCalendar group
* @property cancelEl
* @type HTMLElement
*/
cancelEl: null,
/**
* Reference to the first focusable control in the navigator (by default monthEl)
* @property firstCtrl
* @type HTMLElement
*/
firstCtrl: null,
/**
* Reference to the last focusable control in the navigator (by default cancelEl)
* @property lastCtrl
* @type HTMLElement
*/
lastCtrl: null,
/**
* The document containing the LCalendar/LCalendar group instance
* @protected
* @property _doc
* @type HTMLDocument
*/
_doc: null,
/**
* Internal state property for the current year displayed in the navigator
* @protected
* @property _year
* @type Number
*/
_year: null,
/**
* Internal state property for the current month index displayed in the navigator
* @protected
* @property _month
* @type Number
*/
_month: 0,
/**
* Private internal state property which indicates whether or not the
* Navigator has been rendered.
* @private
* @property __rendered
* @type Boolean
*/
__rendered: false,
/**
* Init lifecycle method called as part of construction
*
* @method init
* @param {LCalendar} cal The instance of the LCalendar or LCalendarGroup to which this LCalendarNavigator should be attached
*/
init: function(cal) {
var calBox = cal.oDomContainer;
this.cal = cal;
this.id = calBox.id + DU.widget.LCalendarNavigator.ID_SUFFIX;
this._doc = calBox.ownerDocument;
/**
* Private flag, to identify IE Quirks
* @private
* @property __isIEQuirks
*/
var ie = DU.browser.msie;
this.__isIEQuirks = (ie && ((ie <= 6) || (this._doc.compatMode == "BackCompat")));
},
/**
* Displays the navigator and mask, updating the input controls to reflect the
* currently set month and year. The show method will invoke the render method
* if the navigator has not been renderered already, allowing for lazy rendering
* of the control.
*
* The show method will fire the LCalendar/LCalendarGroup's beforeShowNav and showNav events
*
* @method show
*/
show: function() {
var CLASSES = DU.widget.LCalendarNavigator.CLASSES;
if (this.cal.beforeShowNavEvent.fire()) {
if (!this.__rendered) {
this.render();
}
this.clearErrors();
this._updateMonthUI();
this._updateYearUI();
this._show(this.navEl, true);
this.setInitialFocus();
this.showMask();
DU.util.LDom.addClass(this.cal.oDomContainer, CLASSES.NAV_VISIBLE);
this.cal.showNavEvent.fire();
}
},
/**
* Hides the navigator and mask
*
* The show method will fire the LCalendar/LCalendarGroup's beforeHideNav event and hideNav events
* @method hide
*/
hide: function() {
var CLASSES = DU.widget.LCalendarNavigator.CLASSES;
if (this.cal.beforeHideNavEvent.fire()) {
this._show(this.navEl, false);
this.hideMask();
DU.util.LDom.removeClass(this.cal.oDomContainer, CLASSES.NAV_VISIBLE);
this.cal.hideNavEvent.fire();
}
},
/**
* Displays the navigator's mask element
*
* @method showMask
*/
showMask: function() {
this._show(this.maskEl, true);
if (this.__isIEQuirks) {
this._syncMask();
}
},
/**
* Hides the navigator's mask element
*
* @method hideMask
*/
hideMask: function() {
this._show(this.maskEl, false);
},
/**
* Returns the current month set on the navigator
*
* Note: This may not be the month set in the UI, if
* the UI contains an invalid value.
*
* @method getMonth
* @return {Number} The Navigator's current month index
*/
getMonth: function() {
return this._month;
},
/**
* Returns the current year set on the navigator
*
* Note: This may not be the year set in the UI, if
* the UI contains an invalid value.
*
* @method getYear
* @return {Number} The Navigator's current year value
*/
getYear: function() {
return this._year;
},
/**
* Sets the current month on the Navigator, and updates the UI
*
* @method setMonth
* @param {Number} nMonth The month index, from 0 (Jan) through 11 (Dec).
*/
setMonth: function(nMonth) {
if (nMonth >= 0 && nMonth < 12) {
this._month = nMonth;
}
this._updateMonthUI();
},
/**
* Sets the current year on the Navigator, and updates the UI. If the
* provided year is invalid, it will not be set.
*
* @method setYear
* @param {Number} nYear The full year value to set the Navigator to.
*/
setYear: function(nYear) {
var yrPattern = DU.widget.LCalendarNavigator.YR_PATTERN;
if (DU.isNumber(nYear) && yrPattern.test(nYear + "")) {
this._year = nYear;
}
this._updateYearUI();
},
/**
* Renders the HTML for the navigator, adding it to the
* document and attaches event listeners if it has not
* already been rendered.
*
* @method render
*/
render: function() {
this.cal.beforeRenderNavEvent.fire();
if (!this.__rendered) {
this.createNav();
this.createMask();
this.applyListeners();
this.__rendered = true;
}
this.cal.renderNavEvent.fire();
},
/**
* Creates the navigator's containing HTMLElement, it's contents, and appends
* the containg element to the LCalendar/LCalendarGroup's container.
*
* @method createNav
*/
createNav: function() {
var NAV = DU.widget.LCalendarNavigator;
var doc = this._doc;
var d = doc.createElement("div");
d.className = NAV.CLASSES.NAV;
var htmlBuf = this.renderNavContents([]);
d.innerHTML = htmlBuf.join('');
this.cal.oDomContainer.appendChild(d);
this.navEl = d;
this.yearEl = doc.getElementById(this.id + NAV.YEAR_SUFFIX);
this.monthEl = doc.getElementById(this.id + NAV.MONTH_SUFFIX);
this.errorEl = doc.getElementById(this.id + NAV.ERROR_SUFFIX);
this.submitEl = doc.getElementById(this.id + NAV.SUBMIT_SUFFIX);
this.cancelEl = doc.getElementById(this.id + NAV.CANCEL_SUFFIX);
if (DU.browser.gecko && this.yearEl && this.yearEl.type == "text") {
// Avoid XUL error on focus, select [ https://bugzilla.mozilla.org/show_bug.cgi?id=236791,
// supposedly fixed in 1.8.1, but there are reports of it still being around for methods other than blur ]
this.yearEl.setAttribute("autocomplete", "off");
}
this._setFirstLastElements();
},
/**
* Creates the Mask HTMLElement and appends it to the LCalendar/CalendarGroups
* container.
*
* @method createMask
*/
createMask: function() {
var C = DU.widget.LCalendarNavigator.CLASSES;
var d = this._doc.createElement("div");
d.className = C.MASK;
this.cal.oDomContainer.appendChild(d);
this.maskEl = d;
},
/**
* Used to set the width/height of the mask in pixels to match the LCalendar Container.
* Currently only used for IE6 or IE in quirks mode. The other A-Grade browser are handled using CSS (width/height 100%).
*
* The method is also registered as an HTMLElement resize listener on the Calendars container element.
*
* @protected
* @method _syncMask
*/
_syncMask: function() {
var c = this.cal.oDomContainer;
if (c && this.maskEl) {
var r = DU.util.LDom.getRegion(c);
DU.util.LDom.setStyle(this.maskEl, "width", r.right - r.left + "px");
DU.util.LDom.setStyle(this.maskEl, "height", r.bottom - r.top + "px");
}
},
/**
* Renders the contents of the navigator
*
* @method renderNavContents
*
* @param {Array} html The HTML buffer to append the HTML to.
* @return {Array} A reference to the buffer passed in.
*/
renderNavContents: function(html) {
var NAV = DU.widget.LCalendarNavigator,
C = NAV.CLASSES,
h = html; // just to use a shorter name
h[h.length] = '
';
this.renderMonth(h);
h[h.length] = '
';
h[h.length] = '
';
this.renderYear(h);
h[h.length] = '
';
h[h.length] = '
';
this.renderButtons(h);
h[h.length] = '
';
h[h.length] = '';
return h;
},
/**
* Renders the month label and control for the navigator
*
* @method renderMonth
* @param {Array} html The HTML buffer to append the HTML to.
* @return {Array} A reference to the buffer passed in.
*/
renderMonth: function(html) {
var NAV = DU.widget.LCalendarNavigator,
C = NAV.CLASSES;
var id = this.id + NAV.MONTH_SUFFIX,
mf = this.__getCfg("monthFormat"),
months = this.cal.cfg.getProperty((mf == DU.widget.LCalendar.SHORT) ? "MONTHS_SHORT" : "MONTHS_LONG"),
h = html;
if (months && months.length > 0) {
h[h.length] = '';
h[h.length] = '';
}
return h;
},
/**
* Renders the year label and control for the navigator
*
* @method renderYear
* @param {Array} html The HTML buffer to append the HTML to.
* @return {Array} A reference to the buffer passed in.
*/
renderYear: function(html) {
var NAV = DU.widget.LCalendarNavigator,
C = NAV.CLASSES;
var id = this.id + NAV.YEAR_SUFFIX,
size = NAV.YR_MAX_DIGITS,
h = html;
h[h.length] = '';
h[h.length] = '';
return h;
},
/**
* Renders the submit/cancel buttons for the navigator
*
* @method renderButton
* @return {String} The HTML created for the LButton UI
*/
renderButtons: function(html) {
var C = DU.widget.LCalendarNavigator.CLASSES;
var h = html;
h[h.length] = '';
h[h.length] = '';
h[h.length] = '';
h[h.length] = '';
h[h.length] = '';
h[h.length] = '';
return h;
},
/**
* Attaches DOM event listeners to the rendered elements
*
* The method will call applyKeyListeners, to setup keyboard specific
* listeners
*
* @method applyListeners
*/
applyListeners: function() {
var E = DU.util.LEvent;
function yearUpdateHandler() {
if (this.validate()) {
this.setYear(this._getYearFromUI());
}
}
function monthUpdateHandler() {
this.setMonth(this._getMonthFromUI());
}
E.on(this.submitEl, "click", this.submit, this, true);
E.on(this.cancelEl, "click", this.cancel, this, true);
E.on(this.yearEl, "blur", yearUpdateHandler, this, true);
E.on(this.monthEl, "change", monthUpdateHandler, this, true);
if (this.__isIEQuirks) {
DU.util.LEvent.on(this.cal.oDomContainer, "resize", this._syncMask, this, true);
}
this.applyKeyListeners();
},
/**
* Removes/purges DOM event listeners from the rendered elements
*
* @method purgeListeners
*/
purgeListeners: function() {
var E = DU.util.LEvent;
E.removeListener(this.submitEl, "click", this.submit);
E.removeListener(this.cancelEl, "click", this.cancel);
E.removeListener(this.yearEl, "blur");
E.removeListener(this.monthEl, "change");
if (this.__isIEQuirks) {
E.removeListener(this.cal.oDomContainer, "resize", this._syncMask);
}
this.purgeKeyListeners();
},
/**
* Attaches DOM listeners for keyboard support.
* Tab/Shift-Tab looping, Enter Key Submit on Year element,
* Up/Down/PgUp/PgDown year increment on Year element
*
* NOTE: MacOSX Safari 2.x doesn't let you tab to buttons and
* MacOSX Gecko does not let you tab to buttons or select controls,
* so for these browsers, Tab/Shift-Tab looping is limited to the
* elements which can be reached using the tab key.
*
* @method applyKeyListeners
*/
applyKeyListeners: function() {
var E = DU.util.LEvent,
ua = DU.browser;
// IE/Safari 3.1 doesn't fire keypress for arrow/pg keys (non-char keys)
var arrowEvt = (ua.ie || ua.webkit) ? "keydown" : "keypress";
// - IE/Safari 3.1 doesn't fire keypress for non-char keys
// - Opera doesn't allow us to cancel keydown or keypress for tab, but
// changes focus successfully on keydown (keypress is too late to change focus - opera's already moved on).
var tabEvt = (ua.ie || ua.opera || ua.webkit) ? "keydown" : "keypress";
// Everyone likes keypress for Enter (char keys) - whoo hoo!
E.on(this.yearEl, "keypress", this._handleEnterKey, this, true);
E.on(this.yearEl, arrowEvt, this._handleDirectionKeys, this, true);
E.on(this.lastCtrl, tabEvt, this._handleTabKey, this, true);
E.on(this.firstCtrl, tabEvt, this._handleShiftTabKey, this, true);
},
/**
* Removes/purges DOM listeners for keyboard support
*
* @method purgeKeyListeners
*/
purgeKeyListeners: function() {
var E = DU.util.LEvent,
ua = DU.browser;
var arrowEvt = (ua.ie || ua.webkit) ? "keydown" : "keypress";
var tabEvt = (ua.ie || ua.opera || ua.webkit) ? "keydown" : "keypress";
E.removeListener(this.yearEl, "keypress", this._handleEnterKey);
E.removeListener(this.yearEl, arrowEvt, this._handleDirectionKeys);
E.removeListener(this.lastCtrl, tabEvt, this._handleTabKey);
E.removeListener(this.firstCtrl, tabEvt, this._handleShiftTabKey);
},
/**
* Updates the LCalendar/LCalendarGroup's pagedate with the currently set month and year if valid.
*
* If the currently set month/year is invalid, a validation error will be displayed and the
* LCalendar/LCalendarGroup's pagedate will not be updated.
*
* @method submit
*/
submit: function() {
if (this.validate()) {
this.hide();
this.setMonth(this._getMonthFromUI());
this.setYear(this._getYearFromUI());
var cal = this.cal;
// Artificial delay, just to help the user see something changed
var delay = DU.widget.LCalendarNavigator.UPDATE_DELAY;
if (delay > 0) {
var nav = this;
window.setTimeout(function() { nav._update(cal); }, delay);
} else {
this._update(cal);
}
}
},
/**
* Updates the LCalendar rendered state, based on the state of the LCalendarNavigator
* @method _update
* @param cal The LCalendar instance to update
* @protected
*/
_update: function(cal) {
cal.setYear(this.getYear());
cal.setMonth(this.getMonth());
cal.render();
},
/**
* Hides the navigator and mask, without updating the LCalendar/LCalendarGroup's state
*
* @method cancel
*/
cancel: function() {
this.hide();
},
/**
* Validates the current state of the UI controls
*
* @method validate
* @return {Boolean} true, if the current UI state contains valid values, false if not
*/
validate: function() {
if (this._getYearFromUI() !== null) {
this.clearErrors();
return true;
} else {
this.setYearError();
this.setError(this.__getCfg("invalidYear", true));
return false;
}
},
/**
* Displays an error message in the Navigator's error panel
* @method setError
* @param {String} msg The error message to display
*/
setError: function(msg) {
if (this.errorEl) {
this.errorEl.innerHTML = msg;
this._show(this.errorEl, true);
}
},
/**
* Clears the navigator's error message and hides the error panel
* @method clearError
*/
clearError: function() {
if (this.errorEl) {
this.errorEl.innerHTML = "";
this._show(this.errorEl, false);
}
},
/**
* Displays the validation error UI for the year control
* @method setYearError
*/
setYearError: function() {
DU.util.LDom.addClass(this.yearEl, DU.widget.LCalendarNavigator.CLASSES.INVALID);
},
/**
* Removes the validation error UI for the year control
* @method clearYearError
*/
clearYearError: function() {
DU.util.LDom.removeClass(this.yearEl, DU.widget.LCalendarNavigator.CLASSES.INVALID);
},
/**
* Clears all validation and error messages in the UI
* @method clearErrors
*/
clearErrors: function() {
this.clearError();
this.clearYearError();
},
/**
* Sets the initial focus, based on the configured value
* @method setInitialFocus
*/
setInitialFocus: function() {
var el = this.submitEl,
f = this.__getCfg("initialFocus");
if (f && f.toLowerCase) {
f = f.toLowerCase();
if (f == "year") {
el = this.yearEl;
try {
this.yearEl.select();
} catch (selErr) {
// Ignore;
}
} else if (f == "month") {
el = this.monthEl;
}
}
if (el && DU.isFunction(el.focus)) {
try {
el.focus();
} catch (focusErr) {
// TODO: Fall back if focus fails?
}
}
},
/**
* Removes all renderered HTML elements for the Navigator from
* the DOM, purges event listeners and clears (nulls) any property
* references to HTML references
* @method erase
*/
erase: function() {
if (this.__rendered) {
this.purgeListeners();
// Clear out innerHTML references
this.yearEl = null;
this.monthEl = null;
this.errorEl = null;
this.submitEl = null;
this.cancelEl = null;
this.firstCtrl = null;
this.lastCtrl = null;
if (this.navEl) {
this.navEl.innerHTML = "";
}
var p = this.navEl.parentNode;
if (p) {
p.removeChild(this.navEl);
}
this.navEl = null;
var pm = this.maskEl.parentNode;
if (pm) {
pm.removeChild(this.maskEl);
}
this.maskEl = null;
this.__rendered = false;
}
},
/**
* Destroys the Navigator object and any HTML references
* @method destroy
*/
destroy: function() {
this.erase();
this._doc = null;
this.cal = null;
this.id = null;
},
/**
* Protected implementation to handle how UI elements are
* hidden/shown.
*
* @method _show
* @protected
*/
_show: function(el, bShow) {
if (el) {
DU.util.LDom.setStyle(el, "display", (bShow) ? "block" : "none");
}
},
/**
* Returns the month value (index), from the month UI element
* @protected
* @method _getMonthFromUI
* @return {Number} The month index, or 0 if a UI element for the month
* is not found
*/
_getMonthFromUI: function() {
if (this.monthEl) {
return this.monthEl.selectedIndex;
} else {
return 0; // Default to Jan
}
},
/**
* Returns the year value, from the Navitator's year UI element
* @protected
* @method _getYearFromUI
* @return {Number} The year value set in the UI, if valid. null is returned if
* the UI does not contain a valid year value.
*/
_getYearFromUI: function() {
var NAV = DU.widget.LCalendarNavigator;
var yr = null;
if (this.yearEl) {
var value = this.yearEl.value;
value = value.replace(NAV.TRIM, "$1");
if (NAV.YR_PATTERN.test(value)) {
yr = parseInt(value, 10);
}
}
return yr;
},
/**
* Updates the Navigator's year UI, based on the year value set on the Navigator object
* @protected
* @method _updateYearUI
*/
_updateYearUI: function() {
if (this.yearEl && this._year !== null) {
this.yearEl.value = this._year;
}
},
/**
* Updates the Navigator's month UI, based on the month value set on the Navigator object
* @protected
* @method _updateMonthUI
*/
_updateMonthUI: function() {
if (this.monthEl) {
this.monthEl.selectedIndex = this._month;
}
},
/**
* Sets up references to the first and last focusable element in the Navigator's UI
* in terms of tab order (Naviagator's firstEl and lastEl properties). The references
* are used to control modality by looping around from the first to the last control
* and visa versa for tab/shift-tab navigation.
*
* @protected
* @method _setFirstLastElements
*/
_setFirstLastElements: function() {
this.firstCtrl = this.monthEl;
this.lastCtrl = this.cancelEl;
// Special handling for MacOSX.
// - Safari 2.x can't focus on buttons
// - Gecko can't focus on select boxes or buttons
if (this.__isMac) {
if (DU.browser.webkit && DU.browser.webkit < 420) {
this.firstCtrl = this.monthEl;
this.lastCtrl = this.yearEl;
}
if (DU.browser.gecko) {
this.firstCtrl = this.yearEl;
this.lastCtrl = this.yearEl;
}
}
},
/**
* Default Keyboard event handler to capture Enter
* on the Navigator's year control (yearEl)
*
* @method _handleEnterKey
* @protected
* @param {Event} e The DOM event being handled
*/
_handleEnterKey: function(e) {
var KEYS = DU.util.LKeyListener.KEY;
if (DU.util.LEvent.getCharCode(e) == KEYS.ENTER) {
DU.util.LEvent.preventDefault(e);
this.submit();
}
},
/**
* Default Keyboard event handler to capture up/down/pgup/pgdown
* on the Navigator's year control (yearEl).
*
* @method _handleDirectionKeys
* @protected
* @param {Event} e The DOM event being handled
*/
_handleDirectionKeys: function(e) {
var E = DU.util.LEvent,
KEYS = DU.util.LKeyListener.KEY,
NAV = DU.widget.LCalendarNavigator;
var value = (this.yearEl.value) ? parseInt(this.yearEl.value, 10) : null;
if (isFinite(value)) {
var dir = false;
switch (E.getCharCode(e)) {
case KEYS.UP:
this.yearEl.value = value + NAV.YR_MINOR_INC;
dir = true;
break;
case KEYS.DOWN:
this.yearEl.value = Math.max(value - NAV.YR_MINOR_INC, 0);
dir = true;
break;
case KEYS.PAGE_UP:
this.yearEl.value = value + NAV.YR_MAJOR_INC;
dir = true;
break;
case KEYS.PAGE_DOWN:
this.yearEl.value = Math.max(value - NAV.YR_MAJOR_INC, 0);
dir = true;
break;
default:
break;
}
if (dir) {
E.preventDefault(e);
try {
this.yearEl.select();
} catch (err) {
// Ignore
}
}
}
},
/**
* Default Keyboard event handler to capture Tab
* on the last control (lastCtrl) in the Navigator.
*
* @method _handleTabKey
* @protected
* @param {Event} e The DOM event being handled
*/
_handleTabKey: function(e) {
var E = DU.util.LEvent,
KEYS = DU.util.LKeyListener.KEY;
if (E.getCharCode(e) == KEYS.TAB && !e.shiftKey) {
try {
E.preventDefault(e);
this.firstCtrl.focus();
} catch (err) {
// Ignore - mainly for focus edge cases
}
}
},
/**
* Default Keyboard event handler to capture Shift-Tab
* on the first control (firstCtrl) in the Navigator.
*
* @method _handleShiftTabKey
* @protected
* @param {Event} e The DOM event being handled
*/
_handleShiftTabKey: function(e) {
var E = DU.util.LEvent,
KEYS = DU.util.LKeyListener.KEY;
if (e.shiftKey && E.getCharCode(e) == KEYS.TAB) {
try {
E.preventDefault(e);
this.lastCtrl.focus();
} catch (err) {
// Ignore - mainly for focus edge cases
}
}
},
/**
* Retrieve Navigator configuration values from
* the parent LCalendar/LCalendarGroup's config value.
*
* If it has not been set in the user provided configuration, the method will
* return the default value of the configuration property, as set in _DEFAULT_CFG
*
";
var tdDom = divDom.getElementsByTagName("td")[0];
currentCellDom.parentNode.replaceChild(tdDom, currentCellDom);
}
},
/**
* @description row 와 col의 위치값의 html 내용을 리턴한다.
* @method getValue
* @public
* @param {int} row row index
* @param {int} col col index
* @return {String}
*/
getValue: function(row, col) {
var currentCellDom = this.getCell(row, col);
return currentCellDom ? currentCellDom.innerHTML : null;
},
/**
* @description row 위치값의 html 내용을 바꾼다.
* @method setRowValue
* @public
* @param {int} row row index
* @param {String} html 변경할 html 값
* @return {void}
*/
setRowValue: function(row, html) {
var currentRowDom = this.getRow(row);
if(currentRowDom) {
// row 전체를 갱신하면 성능 저하 및 값 변경시 해당 객체가 사라지므로 다른 이벤트들도 다 제거되어 처리가 안됨.
var newRowDom = document.createElement("div");
newRowDom.innerHTML = html;
currentRowDom.innerHTML = newRowDom.firstChild.innerHTML;
}
},
/**
* @description grid LElement return
* @method getGridEl
* @public
* @return {DU.LElement}
*/
getGridEl : function() {
return this.el;
},
/**
* @description grid body LElement return
* @method getBodyEl
* @public
* @return {DU.LElement}
*/
getBodyEl : function() {
return this.bodyEl;
},
/**
* @description grid body scroller LElement return
* @method getScrollerEl
* @public
* @return {DU.LElement}
*/
getScrollerEl : function() {
return this.scrollerEl;
},
/**
* @description grid column model return
* @method getColumnModel
* @public
* @return {DU.widget.LColumnModel}
*/
getColumnModel : function() {
return this.columnModel;
},
/**
* @description grid border width return
* @method getBorderWidth
* @public
* @return {int}
*/
getBorderWidth : function() {
return this.borderWidth;
},
/**
* @description row에 focus주기
* @method focusRow
* @private
* @param {int} row row index
* @param {int} col column index
* @return {void}
*/
focusRow : function(row,col) {
//방향키 사용시 IE의 경우 event의한 scroll을 한 후에 방향키에 의한 IE자체 메커니즘에 의해 스크롤바가 이동됨. 따라서 좌표가 맞지 않을 수 있음
//IE자체 메커니즘에 의한 스크롤바 이동후 event에 의한 scroll bar이동을 설정하기 위해 0.001초 늦게 작동을 시킴.
//이동후 focus를 줘야함.
if (!this.delayTask) {
this.delayTask = new DU.util.LDelayedTask(function(){
this.syncFocusRow(row, col);
//if(!DU.browser.msie)//ie에서 이상없음. 해제함. 문제있음 연락바람 - 채민철K
this.focusEl.focus();
this.delayTask = null;
}, this);
this.delayTask.delay(50);
}
},
/**
* @description focus된 row에 focusEl 이동하기
* @method syncFocusRow
* @protected
* @param {int} row row index
* @param {int} col column index
* @return {void}
*/
syncFocusRow : function(row,col) {
var xy = this.moveBodyScroll(row, col);
if (xy.x != false) {
this.focusEl.setX(xy.x);
}
if (xy.y != false) {
this.focusEl.setY(xy.y);
}
},
/**
* DOM에서 패널 엘리먼트를 제거하고 모든 자식 엘리먼트들을 null로 설정한다.
* @method destroy
*/
destroy: function () {
this.doUnSyncDataSet();
this.renderEvent.unOn(this.onRender, this);
if(this.gridPanel)
this.gridPanel.unOn("widthResize",this.onWidthResize, this);
if (this.enableColumnResize) {
for (var i = 0; i < this.columnModel.getColumnCount(); i++) {
this.columnModel.getColumnAt(i).unOn("columnresize", this.onColumnResizeDelegate, this);
}
}
if(this.enableColumnDD)
this.columnModel.unOn("columnmove",this.onColumnMoveDelegate, this);
DU.widget.LGridView.superclass.destroy.call(this);
},
/**
* @description 객체의 toString
* @method toString
* @public
* @return {String}
*/
toString : function() {
return 'DU.widget.LGridView ' + this.id;
}
});
})();
(function() {
var Dom = DU.util.LDom;
var Ev = DU.util.LEvent;
var GV = DU.widget.LGridView;
var VM = 'L-grid-cell-vertical-merge';
var VMF = 'L-grid-cell-vertical-merge-first';
var VMM = 'L-grid-cell-vertical-merge-normal';
var VML = 'L-grid-cell-vertical-merge-last';
DU.widget.LGridView.VM = VM;
DU.widget.LGridView.VMF = VMF;
DU.widget.LGridView.VMM = VMM;
DU.widget.LGridView.VML = VML;
DU.applyObject(DU.widget.LGridView.prototype, {
/**
* @description template 생성
* @method createTemplate
* @protected
* @return {void}
*/
createTemplate: function() {
var ts = this.templates || {};
if (!ts.master) {
ts.master = new DU.LTemplate(
'
',
'
{header}
',
'
▼
',
'
',
'
',
'',
'
',
'
',
'
',
'
',
''
);
}
if (!ts.header) {
ts.header = new DU.LTemplate(
'
',
'{colgroup}',
'{hrow}',
"
"
);
}
if (!ts.hrow) {
ts.hrow = new DU.LTemplate(
'
{hcells}
'
);
}
if (!ts.hcell) {
//{css}는 config를 통해 개발자가 th에 대한 css class name을 지정하는 용도로 사용된다.
//{style}도 마찬가지로 custom한 style을 지정하는 용도이다. 내부 + custom
ts.hcell = new DU.LTemplate(
'
* @config selectionModel
* @type {DU.widget.LSelectionModel}
* @default null
*/
/**
* @description selectionModel 객체
* @property selectionModel
* @type {DU.widget.LSelectionModel}
* @private
*/
selectionModel: null,
/**
* @description 객체를 Config정보를 초기화하는 메소드
* @method initDefaultConfig
* @protected
* @return void
*/
initDefaultConfig: function () {
DU.widget.LGridPanel.superclass.initDefaultConfig.call(this);
},
/**
* @description 객체를 초기화하는 메소드
* @method init
* @private
* @param {Object} oConfig 환경정보 객체
* @return void
*/
init: function(el, userConfig){
/*
Note that we don't pass the user config in here yet because
we only want it executed once, at the lowest subclass level
*/
DU.widget.LGridPanel.superclass.init.call(this, el/*, userConfig*/);
this.beforeInitEvent.fire(DU.widget.LGridPanel);
Dom.addClass(this.element, GV.CLASS_GRID_PANEL);
if (userConfig) {
this.cfg.applyConfig(userConfig, true);
}
this.setBody("");
this.initEvent.fire(DU.widget.LGridPanel);
},
/**
* override 구현시 사용자 이벤트 초기화 메소드
* @method initEvents
*/
initEvents: function(){
DU.widget.LGridPanel.superclass.initEvents.call(this);
},
/**
* @description render시 호출되는 메소드
* @method doRender
* @protected
* @param {HTMLElement} container 부모 객체
* @return void
*/
doRender : function(container) {
//header footer가 먼저 render 되어야 gridview에서 height를 계산할 수 있다.
var view = this.getView();
//buffered grid의 onRowPosChanged event가 먼저 작동해야 하므로 view.render 이후에 selection model 탑제
this.getSelectionModel().init(this);
var bodyEl = DU.get(this.body);
bodyEl.on("mousedown", this.onMouseDown, this, true);
bodyEl.on("click", this.onClick, this, true);
bodyEl.on("dblclick", this.onDblClick, this, true);
bodyEl.on("contextmenu", this.onContextMenu, this, true);
bodyEl.on("keydown", this.onKeyDown, this, true);
bodyEl.on("keypress", this.onKeypress, this, true);
bodyEl.on("keydown", this.onCopyPaste, this, true);
view.setPanel(this);
//config.width가 render후에 발생하므로,
//render시 header/scroller width에 의해 width가 늘어난 상태에서 계산하므로 원하는 width가 생성되지 않는다.
//따라서 render전에 config.width/height/fillHeight 처리를 해야한다.
this.updateSizes();
view.render(this.body);
this.columnModel.bindEvent(this);
//100%일 경우 필요.
if (this.autoWidth !== false) {
this.onWidthResizeDelegate = DU.util.LFunction.createDelegate(this.onWidthResize, this);
this.resizeMonitor = new DU.util.LResizeMonitor();
this.resizeMonitor.monitor(this.element);
this.resizeMonitor.on("resized",this.onWidthResizeDelegate);
//IE의 width auto일때 content size이하로 container width가 안줄어드는 버그(?) 해결
this.onWindowResizeDelegate = DU.util.LFunction.createDelegate(this.onWindowResize, this);
DU.util.LEvent.removeListener(window, "resize", this.onWindowResizeDelegate);
DU.util.LEvent.addListener(window, "resize", this.onWindowResizeDelegate);
}
},
/**
* @description autoWidth !== false시 gridView header, scroller width 재계산 용도
* @private
* @method onWidthResize
* @return void
*/
onWidthResize : function(e){
if (!this.widthResizeEventLock) {
//widthResize가 windowResize보다 먼저 작동되는 문제 해결위해 delay 설정.
if (!this.delayTask) {
this.delayTask = new DU.util.LDelayedTask(function(){
//안보였다가 보일때 처리.
this.updateWidth();
this.fillHeight();
this.fireEvent("widthResize", {
target: this,
event: e
});
this.delayTask = null;
}, this);
this.delayTask.delay(1);
}
}
},
/**
* @description window resize시 header, body, footer의 width를 100%일때의 px값으로 설정. IE문제 해결.
* @private
* @method onWidthResize
* @return void
*/
onWindowResize : function(){
this.updateWidth();
},
/**
*
* Overlay fillHeight에서 container = this.element || this.innerElement, this.element가 우선이 되도록 순서 변경.
* panel을 height를 부모의 나머지 공간까지 채우는 메소드
*
*
NOTE: This method is not designed to work if an explicit
* height has not been set on the container, since for an "auto" height container,
* the heights of the header/body/footer will drive the height of the container.
*
* @method fillHeight
* @param {HTMLElement} el The element which should be resized to fill out the height
* of the container element.
*/
fillHeight : function(el) {
el = el ? el : this.body;
var borderWidth = 1;
if (el) {
var container = this.element || this.innerElement,
containerEls = [this.header, this.body, this.footer],
containerEl,
total = 0,
filled = 0,
remaining = 0,
validEl = false;
for (var i = 0, l = containerEls.length; i < l; i++) {
containerEl = containerEls[i];
if (containerEl) {
if (el !== containerEl) {
filled += this._getPreciseHeight(containerEl);
} else {
validEl = true;
}
}
}
if (validEl) {
if (DU.browser.msie || DU.browser.opera) {
// Need to set height to 0, to allow height to be reduced
Dom.setStyle(el, 'height', 0 + 'px');
}
total = this._getComputedHeight(container);
// Fallback, if we can't get computed value for content height
if (total === null) {
Dom.addClass(container, "L-override-padding");
total = container.clientHeight; // Content, No Border, 0 Padding (set by L-override-padding)
Dom.removeClass(container, "L-override-padding");
}
remaining = total - filled - borderWidth * 2;//border를 빼줘야 한다.
remaining = remaining < 0 ? 0 : remaining;
Dom.setStyle(el, "height", remaining + "px");
// Re-adjust height if required, to account for el padding and border
//rendering 방식의 변화로 offsetHeight를 구할 수 없음. body rendering은 나중에 이루어지기 때문, 0일때 계산하지 않음
if (el.offsetHeight != 0 && el.offsetHeight != remaining) {
remaining = remaining - (el.offsetHeight - remaining);
Dom.setStyle(el, "height", remaining + "px");
}
}
}
},
/**
* LGridPanel Size를 재계산
* @method updateSizes
* @public
* @return void
*/
updateSizes : function(){
var el = DU.get(this.element);
if(this.autoWidth !== false){
this.updateWidth();
}else{
var width = this.cfg.getProperty("width");
if (width) {
el.setWidth(width);
width = width - 2;//border를 뺀다.
if (this.header) {
hd = DU.get(this.header);
hd.setWidth(width);
}
if (this.footer) {
ft = DU.get(this.footer);
ft.setWidth(width);
}
if (this.body) {
bd = DU.get(this.body);
bd.setWidth(width);
}
}
}
var height = this.cfg.getProperty("height");
if (height) {
el.setHeight(height);
//ie6에서 하단 선이 안나오는 버그 해결. border width 고려 필요.
Dom.setStyle(this.innerElement, "height", (height-2) + "px");
}
this.fillHeight();
},
/**
* LGridPanel autoWidth !== false일 경우 동작 IE의 size 안 줄어드는 버그 해결.
* @method updateSizes
* @private
* @return void
*/
updateWidth : function(){
//100%일 경우 이상증상으로 overflow되어 panel right border가 가려짐. 100%때의 width로 설정하면 해결됨.
if (this.autoWidth !== false) {
this.widthResizeEventLock = true;
var hd, ft, bd;
var width = 0;
if (this.header) {
hd = DU.get(this.header);
hd.setStyle("width","100%");
}
if (this.footer) {
ft = DU.get(this.footer);
ft.setStyle("width","100%");
}
if (this.body) {
bd = DU.get(this.body);
bd.setStyle("width","100%");
width = bd.getWidth();
}
if(hd) hd.setWidth(width);
if(ft) ft.setWidth(width);
this.widthResizeEventLock = false;
if(bd) bd.setWidth(width);
}
},
/**
* config의 height값을 적용하는 메소드
* LPanel처럼 innerElement로 계산하면 sizing이 안된다.
* @method configHeight
* @protected
* @param {String} type 이벤트 종류 값
* @param {Object[]} args 이벤트 인수
* @param {Object} obj 호출할 scope 객체
*/
configHeight: function (type, args, obj) {
var height = args[0],
el = this.element;
Dom.setStyle(el, "height", height + "px");
this.cfg.refireEvent("iframe");
if(this._rendered) this.updateSizes();
this.getView().setHeight(height);
},
/**
* config의 width값을 적용하는 메소드
* @method configWidth
* @protected
* @param {String} type 이벤트 종류 값
* @param {Object[]} args 이벤트 인수
* @param {Object} obj 호출할 scope 객체
*/
configWidth: function (type, args, obj) {
var width = args[0],
el = this.element;
width = (typeof width == 'string' && DU.util.LString.endsWith(width, 'px'))? width: width + 'px';
Dom.setStyle(el, "width", width);
this.cfg.refireEvent("iframe");
if(this._rendered) this.updateSizes();
this.getView().setWidth(width);
},
/**
* @description 엘리먼트의 넓이를 설정한다.
* @method setWidth
* @public
* @param {Mixed} width 새로운 넓이. 다음 중 하나:
*
Number : 엘리먼트의 {@link #defaultUnit}s (by default, pixels)에서 새로운 넓이를 나타냄
*
String : 넓이와 관련된 CSS 스타일을 설정하는 데 사용된다. 애니메이션은 사용되지 않을 수있다.
.getFirst('$.core.contextPath') + DU.getConfig().getFirst('$.core.dujsfRootPath') + DU.BLANK_IMAGE_URL + ')
',
'