mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-24 13:49:56 +09:00
merge sandbox to trunk for 1.4.4
git-svn-id: http://xe-core.googlecode.com/svn/trunk@7723 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ngleader
parent
200d63636c
commit
b8299c8a65
683 changed files with 70982 additions and 69716 deletions
|
|
@ -1,368 +1,368 @@
|
|||
/**
|
||||
* @brief XE Calendar
|
||||
* @author gony (http://mygony.com)
|
||||
*
|
||||
* 사용법
|
||||
*
|
||||
**/
|
||||
(function($){
|
||||
|
||||
if (!$.ui) $.ui = {};
|
||||
$.extend($.ui, { calendar: { version:'0.3' } });
|
||||
|
||||
var PROP_NAME = 'calendar';
|
||||
var index = 0;
|
||||
var calendars = {};
|
||||
var template = {calendar:'',month:''};
|
||||
|
||||
function Calendar() {
|
||||
}
|
||||
|
||||
$.extend(Calendar.prototype, {
|
||||
_activeCalendar : null,
|
||||
_getuid : function(obj) {
|
||||
var uid = obj.attr('class').match(/ui-calendar-(\d+-\d+)/);
|
||||
|
||||
if (!uid) return -1;
|
||||
return uid[1];
|
||||
},
|
||||
_show : function(obj) {
|
||||
if (this._activeCalendar) this._hide(this._activeCalendar);
|
||||
|
||||
// disabled?
|
||||
if (obj.hasClass('ui-calendar-disabled')) return;
|
||||
|
||||
// Active Calendar
|
||||
this._activeCalendar = obj.show(300);
|
||||
},
|
||||
_hide : function(obj) {
|
||||
if (this._activeCalendar && this._activeCalendar.get(0) == obj.get(0)) this._activeCalendar = null;
|
||||
obj.hide(300);
|
||||
},
|
||||
_toggle : function(obj) {
|
||||
(obj.css('display' ) == 'none')?this._show(obj):this._hide(obj);
|
||||
},
|
||||
_attachCalendar : function(obj, options) {
|
||||
if ((obj=$(obj)).hasClass('ui-calendar')) return;
|
||||
|
||||
var uid = $.calendar.uuid+'-'+(index++);
|
||||
var c = calendars[uid] = {};
|
||||
|
||||
// uid 추가
|
||||
obj.addClass('ui-calendar-'+uid).mousedown(function(){return false});
|
||||
|
||||
// default options
|
||||
c.options = $.extend({
|
||||
type : 'day',
|
||||
activeDate : ''
|
||||
}, options||{});
|
||||
c.lang = $.extend({
|
||||
weekdays : 'Sun,Mon,Tue,Wed,Thu,Fri,Sat',
|
||||
today : 'Today',
|
||||
prevmonth : 'Prev Month',
|
||||
nextmonth : 'Next Month',
|
||||
prevyear : 'Prev Year',
|
||||
nextyear : 'Next Year',
|
||||
close : 'Close'
|
||||
}, options.lang||{});
|
||||
|
||||
c.lang.weekdays = c.lang.weekdays.split(',');
|
||||
|
||||
// 날짜 설정
|
||||
var d;
|
||||
if (typeof c.options.activeDate == 'string' && c.options.activeDate) {
|
||||
var s = c.options.activeDate.split('/');
|
||||
d = new Date(s[0], s[1]-1, s[2]-0);
|
||||
} else {
|
||||
d = new Date();
|
||||
}
|
||||
this._setDate(obj, d);
|
||||
|
||||
// 토글 버튼
|
||||
if (c.options.button) {
|
||||
(c.button=$(c.options.button)).click(function(){ obj.calendar('toggle') });
|
||||
}
|
||||
|
||||
// 클래스 추가
|
||||
obj.addClass('ui-calendar');
|
||||
|
||||
// position 설정한 후, 좌표를 (0,0)으로 변경
|
||||
var pos = obj.css({position:'absolute',top:0,left:0}).show().offset();
|
||||
|
||||
// 버튼의 위치 구해서 좌표 조정
|
||||
var bpos = c.button.offset();
|
||||
var dx = bpos.left - pos.left;
|
||||
var dy = bpos.top - pos.top;
|
||||
|
||||
// 좌표 조정 후 레이어 숨김
|
||||
obj.css({top:(dy+c.button.height())+'px',left:dx+'px'}).hide();
|
||||
},
|
||||
_checkExternalClick : function(e) {
|
||||
if ($.calendar._activeCalendar) $.calendar._hide($.calendar._activeCalendar);
|
||||
},
|
||||
_processTemplate : function(tpl, vars) {
|
||||
tpl = (' '+tpl+' ').split(/[\{\}]/g);
|
||||
|
||||
for(var i=0; i < tpl.length; i++) {
|
||||
if (i%2) {
|
||||
if (/^[\w\.\[\]]+$/.test(tpl[i])) tpl[i] = 'try{v=vv.'+tpl[i]+'}catch(e){v=""};ret.push(v);';
|
||||
else if (/^@(\w+)\s+in\s+(\w+)$/.test(tpl[i])) tpl[i] = 'for(i=0,l=vv.'+RegExp.$2+'.length;i<l;i++) { vv.'+RegExp.$1+'=vv.'+RegExp.$2+'[i];';
|
||||
else if (tpl[i] == '/') tpl[i] = '};';
|
||||
else tpl[i] = 'ret.push("{'+tpl[i]+'}");';
|
||||
} else {
|
||||
tpl[i] = 'ret.push("'+tpl[i].replace(/"/g, '\\"')+'");'; //"
|
||||
}
|
||||
}
|
||||
|
||||
tpl.push('return ret.join("");');
|
||||
tpl = (['var i,l,v,t,ret=[];'].concat(tpl)).join('');
|
||||
|
||||
return (new Function('vv',tpl))(vars);
|
||||
},
|
||||
_draw : function(obj) {
|
||||
var uid = this._getuid(obj);
|
||||
if (uid < 0) return;
|
||||
|
||||
var cal = calendars[uid];
|
||||
var tpl = (cal.options.type == 'month')?template.month:template.calendar;
|
||||
var v = {lang:cal.lang};
|
||||
|
||||
// 날짜 관련 변수
|
||||
v['yyyy'] = cal.date.getFullYear();
|
||||
v['yy'] = (v['yyyy']+'').substring(2);
|
||||
v['m'] = cal.date.getMonth() + 1;
|
||||
v['mm'] = v['m'] > 9?v['m']:'0'+v['m'];
|
||||
|
||||
// 연간 달력이 아니라면 이 달의 날짜를 구한다.
|
||||
if (cal.options.type != 'month') {
|
||||
// 날짜에 사용할 달력
|
||||
v['weeks'] = [];
|
||||
|
||||
var d = new Date(cal.date.getTime()), w = [];
|
||||
var last = (v.m!=2)? ((v.m+(v.m>7?1:0))%2?31:30) : ((new Date(v.yyyy,v.m-1,29)).getMonth()==v.m?29:28); // 마지막 날
|
||||
|
||||
d.setDate(1); // 1일로 설정 후 1일의 요일을 가져온다.
|
||||
var start = d.getDay(), end = last+start;
|
||||
|
||||
for(var i=0,len=end+(7-(end%7||7));i<len;i++) {
|
||||
if (i%7 == 0) v['weeks'].push(w=[]);
|
||||
if (i < start || i >= end) w.push(' ');
|
||||
else w.push('<button type="button" class="day'+v.yyyy+'-'+v.m+'-'+(i+1-start)+'">'+(i+1-start)+'</button>');
|
||||
}
|
||||
}
|
||||
|
||||
// 템플릿 처리
|
||||
tpl = this._processTemplate(tpl, v);
|
||||
obj.html(tpl);
|
||||
|
||||
// 선택한 날짜
|
||||
if (cal.options.type == 'month') {
|
||||
|
||||
} else {
|
||||
var t = new Date();
|
||||
obj.find('td>button.day'+t.getFullYear()+'-'+(t.getMonth()+1)+'-'+t.getDate()).addClass('today');
|
||||
|
||||
t = cal.activeDate;
|
||||
obj.find('td>button.day'+t.getFullYear()+'-'+(t.getMonth()+1)+'-'+t.getDate()).addClass('active');
|
||||
}
|
||||
|
||||
// 이벤트 핸들러
|
||||
obj.find('button.close').click(function(){ $.calendar._hide(obj); });
|
||||
obj.find('button.today').click(function(){ $.calendar._moveToday(obj); });
|
||||
if (cal.options.type == 'month') {
|
||||
obj.find('button.prev').click(function(){ $.calendar._prevYear(obj) });
|
||||
obj.find('button.next').click(function(){ $.calendar._nextYear(obj) });
|
||||
} else {
|
||||
obj.find('button.prev').click(function(){ $.calendar._prevMonth(obj) });
|
||||
obj.find('button.next').click(function(){ $.calendar._nextMonth(obj) });
|
||||
obj.find('button.prev_year').click(function(){ $.calendar._prevYear(obj) });
|
||||
obj.find('button.next_year').click(function(){ $.calendar._nextYear(obj) });
|
||||
}
|
||||
obj.find('td>button').click(function(){ $.calendar._selectDate(obj, $(this)) });
|
||||
},
|
||||
_selectDate : function(obj, btn) {
|
||||
var cal = calendars[ this._getuid(obj) ];
|
||||
var date = btn.attr('class').match(/day([\d\-]+)/);
|
||||
if (!date) return;
|
||||
|
||||
date = date[1].split('-');
|
||||
|
||||
var ad = cal.activeDate;
|
||||
ad.setFullYear(date[0]-0);
|
||||
ad.setMonth(date[1]-1);
|
||||
ad.setDate(date[2]-0);
|
||||
|
||||
this._setDate(obj, ad);
|
||||
},
|
||||
_setDate : function(obj, newDate) {
|
||||
var uid = this._getuid(obj);
|
||||
if (uid < 0) return null;
|
||||
if (!newDate || !(newDate instanceof Date)) newDate = new Date();
|
||||
|
||||
var cal = calendars[uid];
|
||||
cal.activeDate = new Date(newDate.getTime());
|
||||
cal.date = new Date(newDate.getTime());
|
||||
this._draw(obj);
|
||||
|
||||
if ($.isFunction(cal.options.select) && obj.hasClass('ui-calendar')) {
|
||||
cal.options.select(newDate.getFullYear(), newDate.getMonth()+1, newDate.getDate());
|
||||
}
|
||||
},
|
||||
_getDate : function(obj, format) {
|
||||
var uid = this._getuid(obj);
|
||||
if (uid < 0) return null;
|
||||
if (typeof format != 'string') return calendars[uid].activeDate;
|
||||
|
||||
// format string
|
||||
},
|
||||
_moveToday : function(obj) {
|
||||
calendars[this._getuid(obj)].date = new Date();
|
||||
this._draw(obj);
|
||||
},
|
||||
_prevMonth : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
var m = cal.date.getMonth();
|
||||
|
||||
cal.date.setDate(1);
|
||||
if (m == 0) {
|
||||
cal.date.setFullYear(cal.date.getFullYear()-1);
|
||||
cal.date.setMonth(11);
|
||||
} else {
|
||||
cal.date.setMonth(m-1);
|
||||
}
|
||||
|
||||
this._draw(obj);
|
||||
},
|
||||
_nextMonth : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
var m = cal.date.getMonth();
|
||||
|
||||
cal.date.setDate(1);
|
||||
if (m == 11) {
|
||||
cal.date.setFullYear(cal.date.getFullYear()+1);
|
||||
cal.date.setMonth(0);
|
||||
} else {
|
||||
cal.date.setMonth(m+1);
|
||||
}
|
||||
|
||||
this._draw(obj);
|
||||
},
|
||||
_prevYear : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
|
||||
cal.date.setFullYear(cal.date.getFullYear()-1);
|
||||
this._draw(obj);
|
||||
},
|
||||
_nextYear : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
|
||||
cal.date.setFullYear(cal.date.getFullYear()+1);
|
||||
this._draw(obj);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Invoke the calednar functionallity
|
||||
* @return jQuery object
|
||||
*/
|
||||
$.fn.calendar = function(options) {
|
||||
var args = $.makeArray(arguments);
|
||||
|
||||
if (!$.calendar.initialized) {
|
||||
$(document).mousedown($.calendar._checkExternalClick);
|
||||
$.calendar.initialized = true;
|
||||
}
|
||||
|
||||
if (typeof options == 'string' && $.inArray(options, ['getDate'])) {
|
||||
args.shift();
|
||||
return $.calendar['_'+options].apply($.calendar, [$(this[0])].concat(args) );
|
||||
}
|
||||
|
||||
return this.each(function(){
|
||||
if (typeof options == 'string') {
|
||||
args.shift();
|
||||
$.calendar['_'+ options].apply($.calendar, [$(this)].concat(args));
|
||||
} else {
|
||||
$.calendar._attachCalendar($(this), options);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.calendar = new Calendar(); // singleton instance
|
||||
$.calendar.initialized = false;
|
||||
$.calendar.uuid = new Date().getTime();
|
||||
$.calendar.version = $.ui.calendar.version;
|
||||
|
||||
// template
|
||||
template.calendar = '<button type="button" class="close"><span>{lang.close_layer}</span></button>\
|
||||
<table border="1" cellspacing="0" summary="달력에서 날짜를 선택하기">\
|
||||
<caption>\
|
||||
<span>\
|
||||
{yyyy}.{mm}.\
|
||||
<button type="button" class="today">{lang.today}</button>\
|
||||
<button type="button" class="navi prev"><span>{lang.prevmonth}</span></button>\
|
||||
<button type="button" class="navi next"><span>{lang.nextmonth}</span></button>\
|
||||
<button type="button" class="navi prev_year"><span>{lang.prevyear}</span></button>\
|
||||
<button type="button" class="navi next_year"><span>{lang.nextyear}</span></button>\
|
||||
</span>\
|
||||
</caption>\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th scope="col" class="sun">{lang.weekdays[0]}</th>\
|
||||
<th scope="col">{lang.weekdays[1]}</th>\
|
||||
<th scope="col">{lang.weekdays[2]}</th>\
|
||||
<th scope="col">{lang.weekdays[3]}</th>\
|
||||
<th scope="col">{lang.weekdays[4]}</th>\
|
||||
<th scope="col">{lang.weekdays[5]}</th>\
|
||||
<th scope="col">{lang.weekdays[6]}</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
{@week in weeks}\
|
||||
<tr class="ui-calenar-repeat">\
|
||||
<td class="sun">{week[0]}</td>\
|
||||
<td>{week[1]}</td>\
|
||||
<td>{week[2]}</td>\
|
||||
<td>{week[3]}</td>\
|
||||
<td>{week[4]}</td>\
|
||||
<td>{week[5]}</td>\
|
||||
<td>{week[6]}</td>\
|
||||
</tr>\
|
||||
{/}\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<button type="button" class="close"><span>{lang.close_layer}</span></button>';
|
||||
|
||||
template.month = '<button type="button" class="close"><span>{lang.close_layer}</span></button>\
|
||||
<table border="1" cellspacing="0" summary="달력에서 날짜를 선택하기" class="month">\
|
||||
<caption>\
|
||||
<span>\
|
||||
{yyyy}.{mm} <button type="button" class="today">{lang.today}</button>\
|
||||
<button type="button" class="navi prev"><span>{lang.prevyear}</span></button>\
|
||||
<button type="button" class="navi next"><span>{lang.nextyear}</span></button>\
|
||||
</span>\
|
||||
</caption>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
<td><button type="button" class="past"><strong>1</strong><br />January</button></td>\
|
||||
<td><button type="button" class="past"><strong>2</strong><br />Februry</button></td>\
|
||||
<td><button type="button" class="past"><strong>3</strong><br />March</button></td>\
|
||||
<td><button type="button" class="past"><strong>4</strong><br />April</button></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><button type="button" class="past"><strong>5</strong><br />May</button></td>\
|
||||
<td><button type="button" class="active"><strong>6</strong><br />June</button></td>\
|
||||
<td><button type="button"><strong>7</strong><br />July</button></td>\
|
||||
<td><button type="button"><strong>8</strong><br />August</button></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><button type="button"><strong>9</strong><br />September</button></td>\
|
||||
<td><button type="button"><strong>10</strong><br />October</button></td>\
|
||||
<td><button type="button"><strong>11</strong><br />Nobember</button></td>\
|
||||
<td><button type="button"><strong>12</strong><br />December</button></td>\
|
||||
</tr>\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<button type="button" class="close"><span>{lang.close_layer}</span></button>';
|
||||
|
||||
/**
|
||||
* @brief XE Calendar
|
||||
* @author NHN (developers@xpressengine.com)
|
||||
*
|
||||
* 사용법
|
||||
*
|
||||
**/
|
||||
(function($){
|
||||
|
||||
if (!$.ui) $.ui = {};
|
||||
$.extend($.ui, { calendar: { version:'0.3' } });
|
||||
|
||||
var PROP_NAME = 'calendar';
|
||||
var index = 0;
|
||||
var calendars = {};
|
||||
var template = {calendar:'',month:''};
|
||||
|
||||
function Calendar() {
|
||||
}
|
||||
|
||||
$.extend(Calendar.prototype, {
|
||||
_activeCalendar : null,
|
||||
_getuid : function(obj) {
|
||||
var uid = obj.attr('class').match(/ui-calendar-(\d+-\d+)/);
|
||||
|
||||
if (!uid) return -1;
|
||||
return uid[1];
|
||||
},
|
||||
_show : function(obj) {
|
||||
if (this._activeCalendar) this._hide(this._activeCalendar);
|
||||
|
||||
// disabled?
|
||||
if (obj.hasClass('ui-calendar-disabled')) return;
|
||||
|
||||
// Active Calendar
|
||||
this._activeCalendar = obj.show(300);
|
||||
},
|
||||
_hide : function(obj) {
|
||||
if (this._activeCalendar && this._activeCalendar.get(0) == obj.get(0)) this._activeCalendar = null;
|
||||
obj.hide(300);
|
||||
},
|
||||
_toggle : function(obj) {
|
||||
(obj.css('display' ) == 'none')?this._show(obj):this._hide(obj);
|
||||
},
|
||||
_attachCalendar : function(obj, options) {
|
||||
if ((obj=$(obj)).hasClass('ui-calendar')) return;
|
||||
|
||||
var uid = $.calendar.uuid+'-'+(index++);
|
||||
var c = calendars[uid] = {};
|
||||
|
||||
// uid 추가
|
||||
obj.addClass('ui-calendar-'+uid).mousedown(function(){return false});
|
||||
|
||||
// default options
|
||||
c.options = $.extend({
|
||||
type : 'day',
|
||||
activeDate : ''
|
||||
}, options||{});
|
||||
c.lang = $.extend({
|
||||
weekdays : 'Sun,Mon,Tue,Wed,Thu,Fri,Sat',
|
||||
today : 'Today',
|
||||
prevmonth : 'Prev Month',
|
||||
nextmonth : 'Next Month',
|
||||
prevyear : 'Prev Year',
|
||||
nextyear : 'Next Year',
|
||||
close : 'Close'
|
||||
}, options.lang||{});
|
||||
|
||||
c.lang.weekdays = c.lang.weekdays.split(',');
|
||||
|
||||
// 날짜 설정
|
||||
var d;
|
||||
if (typeof c.options.activeDate == 'string' && c.options.activeDate) {
|
||||
var s = c.options.activeDate.split('/');
|
||||
d = new Date(s[0], s[1]-1, s[2]-0);
|
||||
} else {
|
||||
d = new Date();
|
||||
}
|
||||
this._setDate(obj, d);
|
||||
|
||||
// 토글 버튼
|
||||
if (c.options.button) {
|
||||
(c.button=$(c.options.button)).click(function(){ obj.calendar('toggle') });
|
||||
}
|
||||
|
||||
// 클래스 추가
|
||||
obj.addClass('ui-calendar');
|
||||
|
||||
// position 설정한 후, 좌표를 (0,0)으로 변경
|
||||
var pos = obj.css({position:'absolute',top:0,left:0}).show().offset();
|
||||
|
||||
// 버튼의 위치 구해서 좌표 조정
|
||||
var bpos = c.button.offset();
|
||||
var dx = bpos.left - pos.left;
|
||||
var dy = bpos.top - pos.top;
|
||||
|
||||
// 좌표 조정 후 레이어 숨김
|
||||
obj.css({top:(dy+c.button.height())+'px',left:dx+'px'}).hide();
|
||||
},
|
||||
_checkExternalClick : function(e) {
|
||||
if ($.calendar._activeCalendar) $.calendar._hide($.calendar._activeCalendar);
|
||||
},
|
||||
_processTemplate : function(tpl, vars) {
|
||||
tpl = (' '+tpl+' ').split(/[\{\}]/g);
|
||||
|
||||
for(var i=0; i < tpl.length; i++) {
|
||||
if (i%2) {
|
||||
if (/^[\w\.\[\]]+$/.test(tpl[i])) tpl[i] = 'try{v=vv.'+tpl[i]+'}catch(e){v=""};ret.push(v);';
|
||||
else if (/^@(\w+)\s+in\s+(\w+)$/.test(tpl[i])) tpl[i] = 'for(i=0,l=vv.'+RegExp.$2+'.length;i<l;i++) { vv.'+RegExp.$1+'=vv.'+RegExp.$2+'[i];';
|
||||
else if (tpl[i] == '/') tpl[i] = '};';
|
||||
else tpl[i] = 'ret.push("{'+tpl[i]+'}");';
|
||||
} else {
|
||||
tpl[i] = 'ret.push("'+tpl[i].replace(/"/g, '\\"')+'");'; //"
|
||||
}
|
||||
}
|
||||
|
||||
tpl.push('return ret.join("");');
|
||||
tpl = (['var i,l,v,t,ret=[];'].concat(tpl)).join('');
|
||||
|
||||
return (new Function('vv',tpl))(vars);
|
||||
},
|
||||
_draw : function(obj) {
|
||||
var uid = this._getuid(obj);
|
||||
if (uid < 0) return;
|
||||
|
||||
var cal = calendars[uid];
|
||||
var tpl = (cal.options.type == 'month')?template.month:template.calendar;
|
||||
var v = {lang:cal.lang};
|
||||
|
||||
// 날짜 관련 변수
|
||||
v['yyyy'] = cal.date.getFullYear();
|
||||
v['yy'] = (v['yyyy']+'').substring(2);
|
||||
v['m'] = cal.date.getMonth() + 1;
|
||||
v['mm'] = v['m'] > 9?v['m']:'0'+v['m'];
|
||||
|
||||
// 연간 달력이 아니라면 이 달의 날짜를 구한다.
|
||||
if (cal.options.type != 'month') {
|
||||
// 날짜에 사용할 달력
|
||||
v['weeks'] = [];
|
||||
|
||||
var d = new Date(cal.date.getTime()), w = [];
|
||||
var last = (v.m!=2)? ((v.m+(v.m>7?1:0))%2?31:30) : ((new Date(v.yyyy,v.m-1,29)).getMonth()==v.m?29:28); // 마지막 날
|
||||
|
||||
d.setDate(1); // 1일로 설정 후 1일의 요일을 가져온다.
|
||||
var start = d.getDay(), end = last+start;
|
||||
|
||||
for(var i=0,len=end+(7-(end%7||7));i<len;i++) {
|
||||
if (i%7 == 0) v['weeks'].push(w=[]);
|
||||
if (i < start || i >= end) w.push(' ');
|
||||
else w.push('<button type="button" class="day'+v.yyyy+'-'+v.m+'-'+(i+1-start)+'">'+(i+1-start)+'</button>');
|
||||
}
|
||||
}
|
||||
|
||||
// 템플릿 처리
|
||||
tpl = this._processTemplate(tpl, v);
|
||||
obj.html(tpl);
|
||||
|
||||
// 선택한 날짜
|
||||
if (cal.options.type == 'month') {
|
||||
|
||||
} else {
|
||||
var t = new Date();
|
||||
obj.find('td>button.day'+t.getFullYear()+'-'+(t.getMonth()+1)+'-'+t.getDate()).addClass('today');
|
||||
|
||||
t = cal.activeDate;
|
||||
obj.find('td>button.day'+t.getFullYear()+'-'+(t.getMonth()+1)+'-'+t.getDate()).addClass('active');
|
||||
}
|
||||
|
||||
// 이벤트 핸들러
|
||||
obj.find('button.close').click(function(){ $.calendar._hide(obj); });
|
||||
obj.find('button.today').click(function(){ $.calendar._moveToday(obj); });
|
||||
if (cal.options.type == 'month') {
|
||||
obj.find('button.prev').click(function(){ $.calendar._prevYear(obj) });
|
||||
obj.find('button.next').click(function(){ $.calendar._nextYear(obj) });
|
||||
} else {
|
||||
obj.find('button.prev').click(function(){ $.calendar._prevMonth(obj) });
|
||||
obj.find('button.next').click(function(){ $.calendar._nextMonth(obj) });
|
||||
obj.find('button.prev_year').click(function(){ $.calendar._prevYear(obj) });
|
||||
obj.find('button.next_year').click(function(){ $.calendar._nextYear(obj) });
|
||||
}
|
||||
obj.find('td>button').click(function(){ $.calendar._selectDate(obj, $(this)) });
|
||||
},
|
||||
_selectDate : function(obj, btn) {
|
||||
var cal = calendars[ this._getuid(obj) ];
|
||||
var date = btn.attr('class').match(/day([\d\-]+)/);
|
||||
if (!date) return;
|
||||
|
||||
date = date[1].split('-');
|
||||
|
||||
var ad = cal.activeDate;
|
||||
ad.setFullYear(date[0]-0);
|
||||
ad.setMonth(date[1]-1);
|
||||
ad.setDate(date[2]-0);
|
||||
|
||||
this._setDate(obj, ad);
|
||||
},
|
||||
_setDate : function(obj, newDate) {
|
||||
var uid = this._getuid(obj);
|
||||
if (uid < 0) return null;
|
||||
if (!newDate || !(newDate instanceof Date)) newDate = new Date();
|
||||
|
||||
var cal = calendars[uid];
|
||||
cal.activeDate = new Date(newDate.getTime());
|
||||
cal.date = new Date(newDate.getTime());
|
||||
this._draw(obj);
|
||||
|
||||
if ($.isFunction(cal.options.select) && obj.hasClass('ui-calendar')) {
|
||||
cal.options.select(newDate.getFullYear(), newDate.getMonth()+1, newDate.getDate());
|
||||
}
|
||||
},
|
||||
_getDate : function(obj, format) {
|
||||
var uid = this._getuid(obj);
|
||||
if (uid < 0) return null;
|
||||
if (typeof format != 'string') return calendars[uid].activeDate;
|
||||
|
||||
// format string
|
||||
},
|
||||
_moveToday : function(obj) {
|
||||
calendars[this._getuid(obj)].date = new Date();
|
||||
this._draw(obj);
|
||||
},
|
||||
_prevMonth : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
var m = cal.date.getMonth();
|
||||
|
||||
cal.date.setDate(1);
|
||||
if (m == 0) {
|
||||
cal.date.setFullYear(cal.date.getFullYear()-1);
|
||||
cal.date.setMonth(11);
|
||||
} else {
|
||||
cal.date.setMonth(m-1);
|
||||
}
|
||||
|
||||
this._draw(obj);
|
||||
},
|
||||
_nextMonth : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
var m = cal.date.getMonth();
|
||||
|
||||
cal.date.setDate(1);
|
||||
if (m == 11) {
|
||||
cal.date.setFullYear(cal.date.getFullYear()+1);
|
||||
cal.date.setMonth(0);
|
||||
} else {
|
||||
cal.date.setMonth(m+1);
|
||||
}
|
||||
|
||||
this._draw(obj);
|
||||
},
|
||||
_prevYear : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
|
||||
cal.date.setFullYear(cal.date.getFullYear()-1);
|
||||
this._draw(obj);
|
||||
},
|
||||
_nextYear : function(obj) {
|
||||
var cal = calendars[this._getuid(obj)];
|
||||
|
||||
cal.date.setFullYear(cal.date.getFullYear()+1);
|
||||
this._draw(obj);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Invoke the calednar functionallity
|
||||
* @return jQuery object
|
||||
*/
|
||||
$.fn.calendar = function(options) {
|
||||
var args = $.makeArray(arguments);
|
||||
|
||||
if (!$.calendar.initialized) {
|
||||
$(document).mousedown($.calendar._checkExternalClick);
|
||||
$.calendar.initialized = true;
|
||||
}
|
||||
|
||||
if (typeof options == 'string' && $.inArray(options, ['getDate'])) {
|
||||
args.shift();
|
||||
return $.calendar['_'+options].apply($.calendar, [$(this[0])].concat(args) );
|
||||
}
|
||||
|
||||
return this.each(function(){
|
||||
if (typeof options == 'string') {
|
||||
args.shift();
|
||||
$.calendar['_'+ options].apply($.calendar, [$(this)].concat(args));
|
||||
} else {
|
||||
$.calendar._attachCalendar($(this), options);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$.calendar = new Calendar(); // singleton instance
|
||||
$.calendar.initialized = false;
|
||||
$.calendar.uuid = new Date().getTime();
|
||||
$.calendar.version = $.ui.calendar.version;
|
||||
|
||||
// template
|
||||
template.calendar = '<button type="button" class="close"><span>{lang.close_layer}</span></button>\
|
||||
<table border="1" cellspacing="0" summary="달력에서 날짜를 선택하기">\
|
||||
<caption>\
|
||||
<span>\
|
||||
{yyyy}.{mm}.\
|
||||
<button type="button" class="today">{lang.today}</button>\
|
||||
<button type="button" class="navi prev"><span>{lang.prevmonth}</span></button>\
|
||||
<button type="button" class="navi next"><span>{lang.nextmonth}</span></button>\
|
||||
<button type="button" class="navi prev_year"><span>{lang.prevyear}</span></button>\
|
||||
<button type="button" class="navi next_year"><span>{lang.nextyear}</span></button>\
|
||||
</span>\
|
||||
</caption>\
|
||||
<thead>\
|
||||
<tr>\
|
||||
<th scope="col" class="sun">{lang.weekdays[0]}</th>\
|
||||
<th scope="col">{lang.weekdays[1]}</th>\
|
||||
<th scope="col">{lang.weekdays[2]}</th>\
|
||||
<th scope="col">{lang.weekdays[3]}</th>\
|
||||
<th scope="col">{lang.weekdays[4]}</th>\
|
||||
<th scope="col">{lang.weekdays[5]}</th>\
|
||||
<th scope="col">{lang.weekdays[6]}</th>\
|
||||
</tr>\
|
||||
</thead>\
|
||||
<tbody>\
|
||||
{@week in weeks}\
|
||||
<tr class="ui-calenar-repeat">\
|
||||
<td class="sun">{week[0]}</td>\
|
||||
<td>{week[1]}</td>\
|
||||
<td>{week[2]}</td>\
|
||||
<td>{week[3]}</td>\
|
||||
<td>{week[4]}</td>\
|
||||
<td>{week[5]}</td>\
|
||||
<td>{week[6]}</td>\
|
||||
</tr>\
|
||||
{/}\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<button type="button" class="close"><span>{lang.close_layer}</span></button>';
|
||||
|
||||
template.month = '<button type="button" class="close"><span>{lang.close_layer}</span></button>\
|
||||
<table border="1" cellspacing="0" summary="달력에서 날짜를 선택하기" class="month">\
|
||||
<caption>\
|
||||
<span>\
|
||||
{yyyy}.{mm} <button type="button" class="today">{lang.today}</button>\
|
||||
<button type="button" class="navi prev"><span>{lang.prevyear}</span></button>\
|
||||
<button type="button" class="navi next"><span>{lang.nextyear}</span></button>\
|
||||
</span>\
|
||||
</caption>\
|
||||
<tbody>\
|
||||
<tr>\
|
||||
<td><button type="button" class="past"><strong>1</strong><br />January</button></td>\
|
||||
<td><button type="button" class="past"><strong>2</strong><br />Februry</button></td>\
|
||||
<td><button type="button" class="past"><strong>3</strong><br />March</button></td>\
|
||||
<td><button type="button" class="past"><strong>4</strong><br />April</button></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><button type="button" class="past"><strong>5</strong><br />May</button></td>\
|
||||
<td><button type="button" class="active"><strong>6</strong><br />June</button></td>\
|
||||
<td><button type="button"><strong>7</strong><br />July</button></td>\
|
||||
<td><button type="button"><strong>8</strong><br />August</button></td>\
|
||||
</tr>\
|
||||
<tr>\
|
||||
<td><button type="button"><strong>9</strong><br />September</button></td>\
|
||||
<td><button type="button"><strong>10</strong><br />October</button></td>\
|
||||
<td><button type="button"><strong>11</strong><br />Nobember</button></td>\
|
||||
<td><button type="button"><strong>12</strong><br />December</button></td>\
|
||||
</tr>\
|
||||
</tbody>\
|
||||
</table>\
|
||||
<button type="button" class="close"><span>{lang.close_layer}</span></button>';
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -1,366 +1,366 @@
|
|||
/**
|
||||
* @brief XE Colorpicker
|
||||
* @author mygony (http://mygony.com)
|
||||
**/
|
||||
jQuery(function($){
|
||||
var ready = false;
|
||||
var tmp = $('<span>').hide();
|
||||
// var panel = null;
|
||||
|
||||
$.fn.xe_colorpicker = function(settings){
|
||||
var selection = this;
|
||||
|
||||
if (!ready) {
|
||||
ColorPicker.init(settings);
|
||||
ready = true;
|
||||
}
|
||||
|
||||
this.each(function(){
|
||||
var col = color($(this).val());
|
||||
|
||||
$(this).val( col ).css('background-color', col );
|
||||
setTextColor( $(this) );
|
||||
}).focus(function(event){
|
||||
var t = this;
|
||||
$(this).select();
|
||||
|
||||
// show color picker
|
||||
ColorPicker.show(this);
|
||||
}).keypress(function(event){
|
||||
if (!ColorPicker.is(':visible')) return;
|
||||
|
||||
if (/^#?[0-9a-f]{6}$/i.test( event.target.value )) {
|
||||
ColorPicker.color( event.target.value );
|
||||
}
|
||||
});
|
||||
|
||||
$(document).mousedown(function(event){
|
||||
var target = event.target;
|
||||
|
||||
if (selection.index(target) > -1) return;
|
||||
if ($(target).parents().add(target).index(ColorPicker.element) > -1) return;
|
||||
if ($(target).parents().add(target).index(ColorPicker.buttons) > -1) return;
|
||||
|
||||
ColorPicker.hide();
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
var ColorPicker = {
|
||||
element : null,
|
||||
picker : null,
|
||||
colpane: null,
|
||||
buttons : null,
|
||||
_target : null,
|
||||
_backup : null,
|
||||
_hsv : null,
|
||||
_mode : 'none',
|
||||
|
||||
init : function() {
|
||||
var cp = this;
|
||||
|
||||
this.element = $('<div class="xe_colorpicker"><div class="colorpicker"><div class="colortable"><div class="background"><div class="indicator"></div></div></div><div class="huebar"><div class="background"><div class="indicator"></div></div></div></div><div class="buttons"><button type="button" class="ok">OK</button><button type="button" class="cancel">Cancel</button><button type="button" class="none">None</button></div></div>');
|
||||
|
||||
this.picker = this.element.find('> div.colorpicker');
|
||||
this.colpane = this.picker.find('div.colortable > div.background');
|
||||
this.colpoint = this.colpane.find('> .indicator');
|
||||
this.buttons = this.element.find('> div.buttons');
|
||||
this.huepane = this.element.find('div.huebar > .background');
|
||||
this.huepoint = this.huepane.find('> .indicator');
|
||||
|
||||
this._mousedown = method(this.onmousedown, this);
|
||||
this._mousemove = method(this.onmousemove, this);
|
||||
this._mouseup = method(this.onmouseup, this);
|
||||
|
||||
this.picker.find('.background').mousedown(this._mousedown);
|
||||
|
||||
this.buttons.find('button.ok').click(method(this.ok,this));
|
||||
this.buttons.find('button.cancel').click(method(this.cancel,this));
|
||||
this.buttons.find('button.none').click(method(this.none,this));
|
||||
|
||||
// only for IE6
|
||||
if ($.browser.msie && parseInt($.browser.version) < 7) {
|
||||
this.element.append( $('<iframe>').css({position:'absolute','z-index':-1,left:0,top:0,width:9999,height:9999}) );
|
||||
}
|
||||
},
|
||||
show : function(input) {
|
||||
var pos = (input=$(input)).offset(), pos_panel;
|
||||
//var par = input.get(0).offsetParent;
|
||||
var par = $("body").get(0);
|
||||
var btn = this.buttons.hide();
|
||||
var col = color(input.val());
|
||||
|
||||
this._target = input;
|
||||
this._backup = col;
|
||||
|
||||
this.color(col);
|
||||
this._target.val(col);
|
||||
|
||||
pos_panel = this.element.hide().css({'z-index':99999,left:0,top:0}).appendTo( par ).show(300,function(){btn.slideDown(150)}).offset();
|
||||
this.element.css({left:pos.left-pos_panel.left,top:pos.top-pos_panel.top+input.get(0).offsetHeight});
|
||||
},
|
||||
hide : function() {
|
||||
var e = this.element;
|
||||
|
||||
this._target = null;
|
||||
this.buttons.slideUp(100, function(){e.hide(200)});
|
||||
},
|
||||
visible : function() {
|
||||
return this.element.is(':visible');
|
||||
},
|
||||
color : function(sColor) {
|
||||
if (typeof sColor == 'string') {
|
||||
var col = color(sColor);
|
||||
var hsv = _hsv(rgb2hsv(hex2rgb(col)));
|
||||
|
||||
this.hsv(hsv.h, hsv.s, hsv.v);
|
||||
} else if (this._target) {
|
||||
return color(this._target.val());
|
||||
}
|
||||
},
|
||||
hsv : function(h, s, v) {
|
||||
var col = rgb2hex(hsv2rgb(h, s, v));
|
||||
|
||||
this._hsv = _hsv(h, s, v);
|
||||
|
||||
// background color and text color
|
||||
this._target.val(col).css('background-color', col);
|
||||
setTextColor(this._target);
|
||||
|
||||
// hue bar indicator
|
||||
if (this._hue_h) this.huepoint.css('top', limit(0, Math.round((360-this._hsv.h)/360*this._hue_h), this._hue_h-1) - 3 );
|
||||
|
||||
// color - background
|
||||
this.colpane.css('background-color', rgb2hex(hsv2rgb(h, 100, 100)) );
|
||||
|
||||
// color - indicator
|
||||
if (this._col_h && this._col_w) {
|
||||
this.colpoint.css({
|
||||
top : limit(0, Math.round((100-this._hsv.v)/100*this._col_h), this._col_h-1) - 5,
|
||||
left : limit(0, Math.round(this._hsv.s/100*this._col_w), this._col_w-1 ) - 5
|
||||
});
|
||||
}
|
||||
},
|
||||
onmousedown : function(event) {
|
||||
var cur = $(event.target);
|
||||
var par = cur.parent();
|
||||
var pos = cur.offset();
|
||||
var hue, sat, val; // hue, saturation, value
|
||||
|
||||
this._height = cur.height();
|
||||
this._width = cur.width();
|
||||
this._top = pos.top;
|
||||
this._left = pos.left;
|
||||
|
||||
this._col_w = this.colpane.width();
|
||||
this._col_h = this.colpane.width();
|
||||
this._hue_h = this.huepane.height();
|
||||
|
||||
if (par.is('.colortable')) {
|
||||
this._mode = 'color';
|
||||
hue = this._hsv.h;
|
||||
sat = ( limit(0, (event.pageX - this._left), this._width ) / this._width * 100);
|
||||
val = ( limit(0, (this._height - event.pageY + this._top), this._height ) / this._height * 100);
|
||||
} else if (par.is('.huebar')) {
|
||||
this._mode = 'hue';
|
||||
hue = limit(0, (this._height - event.pageY + this._top), this._height) / this._height * 360;
|
||||
sat = this._hsv.s;
|
||||
val = this._hsv.v;
|
||||
}
|
||||
|
||||
this.hsv( hue, sat, val );
|
||||
|
||||
$(document).bind('mousemove', this._mousemove).bind('mouseup', this._mouseup);
|
||||
},
|
||||
onmousemove : function(event) {
|
||||
var hue, sat, val; // hue, saturation, value
|
||||
|
||||
switch(this._mode) {
|
||||
case 'color':
|
||||
hue = this._hsv.h;
|
||||
sat = ( limit(0, (event.pageX - this._left), this._width ) / this._width * 100);
|
||||
val = ( limit(0, (this._height - event.pageY + this._top), this._height ) / this._height * 100);
|
||||
break;
|
||||
case 'hue':
|
||||
hue = limit(0, (this._height - event.pageY + this._top), this._height) / this._height * 360;
|
||||
sat = this._hsv.s;
|
||||
val = this._hsv.v;
|
||||
break;
|
||||
}
|
||||
|
||||
this.hsv( hue, sat, val );
|
||||
},
|
||||
onmouseup : function(event) {
|
||||
this._mode = 'none';
|
||||
$(document).unbind('mousemove', this._mousemove).unbind('mouseup', this._mouseup);
|
||||
},
|
||||
ok : function() {
|
||||
this.hide();
|
||||
},
|
||||
cancel : function() {
|
||||
this.color(this._backup);
|
||||
this.hide();
|
||||
},
|
||||
none : function() {
|
||||
this._target.attr('value','transparent').css('background','').css('color','#000000');
|
||||
this.hide();
|
||||
}
|
||||
};
|
||||
|
||||
function setTextColor(input) {
|
||||
var hex = input.css('color', '').val(), hsv, rgb;
|
||||
|
||||
if (hex == 'transparent' || hex == '') return;
|
||||
|
||||
rgb = hex2rgb(hex);
|
||||
hsv = rgb2hsv(255-rgb.r, 255-rgb.g, 255-rgb.b); // 보색을 구한 뒤
|
||||
hex = rgb2hex(hsv2rgb(0, 0, hsv.v>50?100:0)); // 보색에 해당하는 흑백으로 결정
|
||||
|
||||
input.css('color', hex);
|
||||
}
|
||||
|
||||
function method(func, thisObj) {
|
||||
return function() { return func.apply(thisObj, arguments) }
|
||||
}
|
||||
|
||||
function color(str) {
|
||||
var col = $.trim(str);
|
||||
var regHex1 = /^#[0-9a-f]{6}$/i;
|
||||
var regHex2 = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i; // short hex
|
||||
|
||||
if (regHex1.test(col)) return col.toUpperCase();
|
||||
if (regHex2.test(col)) return col.replace(regHex2, '#$1$1$2$2$3$3').toUpperCase();
|
||||
|
||||
try {
|
||||
col = tmp.appendTo($('<body>')).css('background-color', col).css('background-color');
|
||||
} catch(e) {
|
||||
col = 'transparent';
|
||||
} finally {
|
||||
tmp.css('background-color','').remove();
|
||||
}
|
||||
|
||||
if (/^rgb\(([0-9, ]+)\)$/i.test(col)) col = rgb2hex(RegExp.$1.split(/,\s*/));
|
||||
if (!/#[0-9a-f]{6}/i.test(col)) col = 'transparent';
|
||||
|
||||
return col;
|
||||
}
|
||||
|
||||
function _rgb(rgb, _g, _b) {
|
||||
var r, g, b;
|
||||
|
||||
if (typeof arguments[2] == "number") {
|
||||
r = rgb;
|
||||
g = _g;
|
||||
b = _b;
|
||||
} else if (typeof rgb == "object") {
|
||||
if (rgb.constructor == Array) {
|
||||
r = rgb[0] || 0; g = rgb[1] || 0; b = rgb[2] || 0;
|
||||
} else {
|
||||
r = rgb.r || 0; g = rgb.g || 0; b = rgb.b || 0;
|
||||
}
|
||||
}
|
||||
|
||||
rgb = [];
|
||||
|
||||
rgb.r = rgb[0] = r = parseInt(r, 10);
|
||||
rgb.g = rgb[1] = g = parseInt(g, 10);
|
||||
rgb.b = rgb[2] = b = parseInt(b, 10);
|
||||
|
||||
return rgb;
|
||||
}
|
||||
|
||||
function _hsv(hsv, _s, _v) {
|
||||
var h, s, v;
|
||||
|
||||
if (typeof arguments[2] == "number") {
|
||||
h = hsv; s = _s; v = _v;
|
||||
} else if (typeof hsv == "object") {
|
||||
if (hsv.constructor == Array) {
|
||||
h = hsv[0] || 0; s = hsv[1] || 0; v = hsv[2] || 0;
|
||||
} else {
|
||||
h = hsv.h || 0; s = hsv.s || 0; v = hsv.v || 0;
|
||||
}
|
||||
}
|
||||
|
||||
hsv = [];
|
||||
|
||||
hsv.h = hsv[0] = h = parseInt(h, 10);
|
||||
hsv.s = hsv[1] = s = parseInt(s, 10);
|
||||
hsv.v = hsv[2] = v = parseInt(v, 10);
|
||||
|
||||
return hsv;
|
||||
}
|
||||
|
||||
function rgb2hex(rgb, _g, _b) {
|
||||
var rgb = _rgb(rgb, _g, _b);
|
||||
|
||||
for(var i=0; i < rgb.length; i++) {
|
||||
(rgb[i] = Number(rgb[i]).toString(16)).length<2?rgb[i]='0'+rgb[i]:0;
|
||||
}
|
||||
|
||||
return '#'+rgb.join('').toUpperCase();
|
||||
}
|
||||
|
||||
function hex2rgb(hex) {
|
||||
var r=0, g=0, b=0;
|
||||
|
||||
if (/^#?([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})$/i.test(hex)) {
|
||||
r = parseInt(RegExp.$1, 16);
|
||||
g = parseInt(RegExp.$2, 16);
|
||||
b = parseInt(RegExp.$3, 16);
|
||||
}
|
||||
|
||||
return _rgb(r, g, b);
|
||||
}
|
||||
|
||||
function hsv2rgb(hsv, _s, _v) {
|
||||
var r=0, g=0, b=0;
|
||||
var h=0, s=0, v=0;
|
||||
var i, f, p, q, t;
|
||||
|
||||
hsv = _hsv(hsv, _s, _v);
|
||||
|
||||
h = (hsv[0] % 360) / 60; s = hsv[1] / 100; v = hsv[2] / 100;
|
||||
|
||||
i = Math.floor(h);
|
||||
f = h-i;
|
||||
p = v*(1-s);
|
||||
q = v*(1-s*f);
|
||||
t = v*(1-s*(1-f));
|
||||
|
||||
switch (i) {
|
||||
case 0: r=v; g=t; b=p; break;
|
||||
case 1: r=q; g=v; b=p; break;
|
||||
case 2: r=p; g=v; b=t; break;
|
||||
case 3: r=p; g=q; b=v; break;
|
||||
case 4: r=t; g=p; b=v; break;
|
||||
case 5: r=v; g=p; b=q; break;
|
||||
case 6: break;
|
||||
}
|
||||
|
||||
return _rgb(Math.floor(r*255), Math.floor(g*255), Math.floor(b*255));
|
||||
}
|
||||
|
||||
function rgb2hsv(rgb, _g, _b) {
|
||||
var rgb = _rgb(rgb, _g, _b);
|
||||
var r = rgb[0], g = rgb[1], b = rgb[2];
|
||||
var h = 0, s = 0, v = Math.max(r,g,b), min = Math.min(r,g,b), delta = v - min;
|
||||
|
||||
if (s = v?delta/v:0) {
|
||||
if (r == v) h = 60 * (g - b) / delta;
|
||||
else if (g == v) h = 120 + 60 * (b - r) / delta;
|
||||
else if (b == v) h = 240 + 60 * (r - g) / delta;
|
||||
|
||||
if (h < 0) h += 360;
|
||||
}
|
||||
|
||||
return _hsv(Math.floor(h), Math.floor(s*100), Math.floor(v/255*100));
|
||||
}
|
||||
|
||||
function limit(min, val, max){
|
||||
return Math.min(Math.max(min, val), max);
|
||||
}
|
||||
|
||||
$('input.color-indicator').xe_colorpicker();
|
||||
});
|
||||
/**
|
||||
* @brief XE Colorpicker
|
||||
* @author NHN (developers@xpressengine.com)
|
||||
**/
|
||||
jQuery(function($){
|
||||
var ready = false;
|
||||
var tmp = $('<span>').hide();
|
||||
// var panel = null;
|
||||
|
||||
$.fn.xe_colorpicker = function(settings){
|
||||
var selection = this;
|
||||
|
||||
if (!ready) {
|
||||
ColorPicker.init(settings);
|
||||
ready = true;
|
||||
}
|
||||
|
||||
this.each(function(){
|
||||
var col = color($(this).val());
|
||||
|
||||
$(this).val( col ).css('background-color', col );
|
||||
setTextColor( $(this) );
|
||||
}).focus(function(event){
|
||||
var t = this;
|
||||
$(this).select();
|
||||
|
||||
// show color picker
|
||||
ColorPicker.show(this);
|
||||
}).keypress(function(event){
|
||||
if (!ColorPicker.is(':visible')) return;
|
||||
|
||||
if (/^#?[0-9a-f]{6}$/i.test( event.target.value )) {
|
||||
ColorPicker.color( event.target.value );
|
||||
}
|
||||
});
|
||||
|
||||
$(document).mousedown(function(event){
|
||||
var target = event.target;
|
||||
|
||||
if (selection.index(target) > -1) return;
|
||||
if ($(target).parents().add(target).index(ColorPicker.element) > -1) return;
|
||||
if ($(target).parents().add(target).index(ColorPicker.buttons) > -1) return;
|
||||
|
||||
ColorPicker.hide();
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
var ColorPicker = {
|
||||
element : null,
|
||||
picker : null,
|
||||
colpane: null,
|
||||
buttons : null,
|
||||
_target : null,
|
||||
_backup : null,
|
||||
_hsv : null,
|
||||
_mode : 'none',
|
||||
|
||||
init : function() {
|
||||
var cp = this;
|
||||
|
||||
this.element = $('<div class="xe_colorpicker"><div class="colorpicker"><div class="colortable"><div class="background"><div class="indicator"></div></div></div><div class="huebar"><div class="background"><div class="indicator"></div></div></div></div><div class="buttons"><button type="button" class="ok">OK</button><button type="button" class="cancel">Cancel</button><button type="button" class="none">None</button></div></div>');
|
||||
|
||||
this.picker = this.element.find('> div.colorpicker');
|
||||
this.colpane = this.picker.find('div.colortable > div.background');
|
||||
this.colpoint = this.colpane.find('> .indicator');
|
||||
this.buttons = this.element.find('> div.buttons');
|
||||
this.huepane = this.element.find('div.huebar > .background');
|
||||
this.huepoint = this.huepane.find('> .indicator');
|
||||
|
||||
this._mousedown = method(this.onmousedown, this);
|
||||
this._mousemove = method(this.onmousemove, this);
|
||||
this._mouseup = method(this.onmouseup, this);
|
||||
|
||||
this.picker.find('.background').mousedown(this._mousedown);
|
||||
|
||||
this.buttons.find('button.ok').click(method(this.ok,this));
|
||||
this.buttons.find('button.cancel').click(method(this.cancel,this));
|
||||
this.buttons.find('button.none').click(method(this.none,this));
|
||||
|
||||
// only for IE6
|
||||
if ($.browser.msie && parseInt($.browser.version) < 7) {
|
||||
this.element.append( $('<iframe>').css({position:'absolute','z-index':-1,left:0,top:0,width:9999,height:9999}) );
|
||||
}
|
||||
},
|
||||
show : function(input) {
|
||||
var pos = (input=$(input)).offset(), pos_panel;
|
||||
//var par = input.get(0).offsetParent;
|
||||
var par = $("body").get(0);
|
||||
var btn = this.buttons.hide();
|
||||
var col = color(input.val());
|
||||
|
||||
this._target = input;
|
||||
this._backup = col;
|
||||
|
||||
this.color(col);
|
||||
this._target.val(col);
|
||||
|
||||
pos_panel = this.element.hide().css({'z-index':99999,left:0,top:0}).appendTo( par ).show(300,function(){btn.slideDown(150)}).offset();
|
||||
this.element.css({left:pos.left-pos_panel.left,top:pos.top-pos_panel.top+input.get(0).offsetHeight});
|
||||
},
|
||||
hide : function() {
|
||||
var e = this.element;
|
||||
|
||||
this._target = null;
|
||||
this.buttons.slideUp(100, function(){e.hide(200)});
|
||||
},
|
||||
visible : function() {
|
||||
return this.element.is(':visible');
|
||||
},
|
||||
color : function(sColor) {
|
||||
if (typeof sColor == 'string') {
|
||||
var col = color(sColor);
|
||||
var hsv = _hsv(rgb2hsv(hex2rgb(col)));
|
||||
|
||||
this.hsv(hsv.h, hsv.s, hsv.v);
|
||||
} else if (this._target) {
|
||||
return color(this._target.val());
|
||||
}
|
||||
},
|
||||
hsv : function(h, s, v) {
|
||||
var col = rgb2hex(hsv2rgb(h, s, v));
|
||||
|
||||
this._hsv = _hsv(h, s, v);
|
||||
|
||||
// background color and text color
|
||||
this._target.val(col).css('background-color', col);
|
||||
setTextColor(this._target);
|
||||
|
||||
// hue bar indicator
|
||||
if (this._hue_h) this.huepoint.css('top', limit(0, Math.round((360-this._hsv.h)/360*this._hue_h), this._hue_h-1) - 3 );
|
||||
|
||||
// color - background
|
||||
this.colpane.css('background-color', rgb2hex(hsv2rgb(h, 100, 100)) );
|
||||
|
||||
// color - indicator
|
||||
if (this._col_h && this._col_w) {
|
||||
this.colpoint.css({
|
||||
top : limit(0, Math.round((100-this._hsv.v)/100*this._col_h), this._col_h-1) - 5,
|
||||
left : limit(0, Math.round(this._hsv.s/100*this._col_w), this._col_w-1 ) - 5
|
||||
});
|
||||
}
|
||||
},
|
||||
onmousedown : function(event) {
|
||||
var cur = $(event.target);
|
||||
var par = cur.parent();
|
||||
var pos = cur.offset();
|
||||
var hue, sat, val; // hue, saturation, value
|
||||
|
||||
this._height = cur.height();
|
||||
this._width = cur.width();
|
||||
this._top = pos.top;
|
||||
this._left = pos.left;
|
||||
|
||||
this._col_w = this.colpane.width();
|
||||
this._col_h = this.colpane.width();
|
||||
this._hue_h = this.huepane.height();
|
||||
|
||||
if (par.is('.colortable')) {
|
||||
this._mode = 'color';
|
||||
hue = this._hsv.h;
|
||||
sat = ( limit(0, (event.pageX - this._left), this._width ) / this._width * 100);
|
||||
val = ( limit(0, (this._height - event.pageY + this._top), this._height ) / this._height * 100);
|
||||
} else if (par.is('.huebar')) {
|
||||
this._mode = 'hue';
|
||||
hue = limit(0, (this._height - event.pageY + this._top), this._height) / this._height * 360;
|
||||
sat = this._hsv.s;
|
||||
val = this._hsv.v;
|
||||
}
|
||||
|
||||
this.hsv( hue, sat, val );
|
||||
|
||||
$(document).bind('mousemove', this._mousemove).bind('mouseup', this._mouseup);
|
||||
},
|
||||
onmousemove : function(event) {
|
||||
var hue, sat, val; // hue, saturation, value
|
||||
|
||||
switch(this._mode) {
|
||||
case 'color':
|
||||
hue = this._hsv.h;
|
||||
sat = ( limit(0, (event.pageX - this._left), this._width ) / this._width * 100);
|
||||
val = ( limit(0, (this._height - event.pageY + this._top), this._height ) / this._height * 100);
|
||||
break;
|
||||
case 'hue':
|
||||
hue = limit(0, (this._height - event.pageY + this._top), this._height) / this._height * 360;
|
||||
sat = this._hsv.s;
|
||||
val = this._hsv.v;
|
||||
break;
|
||||
}
|
||||
|
||||
this.hsv( hue, sat, val );
|
||||
},
|
||||
onmouseup : function(event) {
|
||||
this._mode = 'none';
|
||||
$(document).unbind('mousemove', this._mousemove).unbind('mouseup', this._mouseup);
|
||||
},
|
||||
ok : function() {
|
||||
this.hide();
|
||||
},
|
||||
cancel : function() {
|
||||
this.color(this._backup);
|
||||
this.hide();
|
||||
},
|
||||
none : function() {
|
||||
this._target.attr('value','transparent').css('background','').css('color','#000000');
|
||||
this.hide();
|
||||
}
|
||||
};
|
||||
|
||||
function setTextColor(input) {
|
||||
var hex = input.css('color', '').val(), hsv, rgb;
|
||||
|
||||
if (hex == 'transparent' || hex == '') return;
|
||||
|
||||
rgb = hex2rgb(hex);
|
||||
hsv = rgb2hsv(255-rgb.r, 255-rgb.g, 255-rgb.b); // 보색을 구한 뒤
|
||||
hex = rgb2hex(hsv2rgb(0, 0, hsv.v>50?100:0)); // 보색에 해당하는 흑백으로 결정
|
||||
|
||||
input.css('color', hex);
|
||||
}
|
||||
|
||||
function method(func, thisObj) {
|
||||
return function() { return func.apply(thisObj, arguments) }
|
||||
}
|
||||
|
||||
function color(str) {
|
||||
var col = $.trim(str);
|
||||
var regHex1 = /^#[0-9a-f]{6}$/i;
|
||||
var regHex2 = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i; // short hex
|
||||
|
||||
if (regHex1.test(col)) return col.toUpperCase();
|
||||
if (regHex2.test(col)) return col.replace(regHex2, '#$1$1$2$2$3$3').toUpperCase();
|
||||
|
||||
try {
|
||||
col = tmp.appendTo($('<body>')).css('background-color', col).css('background-color');
|
||||
} catch(e) {
|
||||
col = 'transparent';
|
||||
} finally {
|
||||
tmp.css('background-color','').remove();
|
||||
}
|
||||
|
||||
if (/^rgb\(([0-9, ]+)\)$/i.test(col)) col = rgb2hex(RegExp.$1.split(/,\s*/));
|
||||
if (!/#[0-9a-f]{6}/i.test(col)) col = 'transparent';
|
||||
|
||||
return col;
|
||||
}
|
||||
|
||||
function _rgb(rgb, _g, _b) {
|
||||
var r, g, b;
|
||||
|
||||
if (typeof arguments[2] == "number") {
|
||||
r = rgb;
|
||||
g = _g;
|
||||
b = _b;
|
||||
} else if (typeof rgb == "object") {
|
||||
if (rgb.constructor == Array) {
|
||||
r = rgb[0] || 0; g = rgb[1] || 0; b = rgb[2] || 0;
|
||||
} else {
|
||||
r = rgb.r || 0; g = rgb.g || 0; b = rgb.b || 0;
|
||||
}
|
||||
}
|
||||
|
||||
rgb = [];
|
||||
|
||||
rgb.r = rgb[0] = r = parseInt(r, 10);
|
||||
rgb.g = rgb[1] = g = parseInt(g, 10);
|
||||
rgb.b = rgb[2] = b = parseInt(b, 10);
|
||||
|
||||
return rgb;
|
||||
}
|
||||
|
||||
function _hsv(hsv, _s, _v) {
|
||||
var h, s, v;
|
||||
|
||||
if (typeof arguments[2] == "number") {
|
||||
h = hsv; s = _s; v = _v;
|
||||
} else if (typeof hsv == "object") {
|
||||
if (hsv.constructor == Array) {
|
||||
h = hsv[0] || 0; s = hsv[1] || 0; v = hsv[2] || 0;
|
||||
} else {
|
||||
h = hsv.h || 0; s = hsv.s || 0; v = hsv.v || 0;
|
||||
}
|
||||
}
|
||||
|
||||
hsv = [];
|
||||
|
||||
hsv.h = hsv[0] = h = parseInt(h, 10);
|
||||
hsv.s = hsv[1] = s = parseInt(s, 10);
|
||||
hsv.v = hsv[2] = v = parseInt(v, 10);
|
||||
|
||||
return hsv;
|
||||
}
|
||||
|
||||
function rgb2hex(rgb, _g, _b) {
|
||||
var rgb = _rgb(rgb, _g, _b);
|
||||
|
||||
for(var i=0; i < rgb.length; i++) {
|
||||
(rgb[i] = Number(rgb[i]).toString(16)).length<2?rgb[i]='0'+rgb[i]:0;
|
||||
}
|
||||
|
||||
return '#'+rgb.join('').toUpperCase();
|
||||
}
|
||||
|
||||
function hex2rgb(hex) {
|
||||
var r=0, g=0, b=0;
|
||||
|
||||
if (/^#?([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})$/i.test(hex)) {
|
||||
r = parseInt(RegExp.$1, 16);
|
||||
g = parseInt(RegExp.$2, 16);
|
||||
b = parseInt(RegExp.$3, 16);
|
||||
}
|
||||
|
||||
return _rgb(r, g, b);
|
||||
}
|
||||
|
||||
function hsv2rgb(hsv, _s, _v) {
|
||||
var r=0, g=0, b=0;
|
||||
var h=0, s=0, v=0;
|
||||
var i, f, p, q, t;
|
||||
|
||||
hsv = _hsv(hsv, _s, _v);
|
||||
|
||||
h = (hsv[0] % 360) / 60; s = hsv[1] / 100; v = hsv[2] / 100;
|
||||
|
||||
i = Math.floor(h);
|
||||
f = h-i;
|
||||
p = v*(1-s);
|
||||
q = v*(1-s*f);
|
||||
t = v*(1-s*(1-f));
|
||||
|
||||
switch (i) {
|
||||
case 0: r=v; g=t; b=p; break;
|
||||
case 1: r=q; g=v; b=p; break;
|
||||
case 2: r=p; g=v; b=t; break;
|
||||
case 3: r=p; g=q; b=v; break;
|
||||
case 4: r=t; g=p; b=v; break;
|
||||
case 5: r=v; g=p; b=q; break;
|
||||
case 6: break;
|
||||
}
|
||||
|
||||
return _rgb(Math.floor(r*255), Math.floor(g*255), Math.floor(b*255));
|
||||
}
|
||||
|
||||
function rgb2hsv(rgb, _g, _b) {
|
||||
var rgb = _rgb(rgb, _g, _b);
|
||||
var r = rgb[0], g = rgb[1], b = rgb[2];
|
||||
var h = 0, s = 0, v = Math.max(r,g,b), min = Math.min(r,g,b), delta = v - min;
|
||||
|
||||
if (s = v?delta/v:0) {
|
||||
if (r == v) h = 60 * (g - b) / delta;
|
||||
else if (g == v) h = 120 + 60 * (b - r) / delta;
|
||||
else if (b == v) h = 240 + 60 * (r - g) / delta;
|
||||
|
||||
if (h < 0) h += 360;
|
||||
}
|
||||
|
||||
return _hsv(Math.floor(h), Math.floor(s*100), Math.floor(v/255*100));
|
||||
}
|
||||
|
||||
function limit(min, val, max){
|
||||
return Math.min(Math.max(min, val), max);
|
||||
}
|
||||
|
||||
$('input.color-indicator').xe_colorpicker();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,61 +1,61 @@
|
|||
/**
|
||||
* @brief Watch Input box
|
||||
* @author taggon (http://mygony.com)
|
||||
**/
|
||||
(function($){
|
||||
|
||||
var class_name = '_watch_input';
|
||||
|
||||
$.fn.watch_input = function(settings)
|
||||
{
|
||||
if (this.length == 0) return false;
|
||||
if (this.length > 1) {
|
||||
this.each(function(){ $(this).watch_input(settings) });
|
||||
return true;
|
||||
}
|
||||
if (!$.isFunction(settings.oninput)) return false;
|
||||
if (this.hasClass(class_name)) return false;
|
||||
|
||||
this[0].__wi_oninput = settings.oninput;
|
||||
this.addClass(class_name).keydown(_onkeydown).focus(_onfocus).blur(_onblur);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
var timer = null, val = '', ie=$.browser.msie;
|
||||
|
||||
function _onkeydown(event)
|
||||
{
|
||||
if ($(this).val() != val) {
|
||||
val = $(this).val();
|
||||
this.__wi_oninput();
|
||||
}
|
||||
}
|
||||
|
||||
function _onfocus(event)
|
||||
{
|
||||
var self = $(this);
|
||||
|
||||
val = self.val();
|
||||
if (ie) return true;
|
||||
|
||||
(function fn() {
|
||||
if ( (self.val() != val) && $.isFunction(self[0].__wi_oninput) ) {
|
||||
val = self.val();
|
||||
self[0].__wi_oninput();
|
||||
}
|
||||
|
||||
timer = setTimeout(arguments.callee, 100);
|
||||
})();
|
||||
}
|
||||
|
||||
function _onblur(event)
|
||||
{
|
||||
val = '';
|
||||
if (!ie && timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
/**
|
||||
* @brief Watch Input box
|
||||
* @author NHN (developers@xpresseingine.com)
|
||||
**/
|
||||
(function($){
|
||||
|
||||
var class_name = '_watch_input';
|
||||
|
||||
$.fn.watch_input = function(settings)
|
||||
{
|
||||
if (this.length == 0) return false;
|
||||
if (this.length > 1) {
|
||||
this.each(function(){ $(this).watch_input(settings) });
|
||||
return true;
|
||||
}
|
||||
if (!$.isFunction(settings.oninput)) return false;
|
||||
if (this.hasClass(class_name)) return false;
|
||||
|
||||
this[0].__wi_oninput = settings.oninput;
|
||||
this.addClass(class_name).keydown(_onkeydown).focus(_onfocus).blur(_onblur);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
var timer = null, val = '', ie=$.browser.msie;
|
||||
|
||||
function _onkeydown(event)
|
||||
{
|
||||
if ($(this).val() != val) {
|
||||
val = $(this).val();
|
||||
this.__wi_oninput();
|
||||
}
|
||||
}
|
||||
|
||||
function _onfocus(event)
|
||||
{
|
||||
var self = $(this);
|
||||
|
||||
val = self.val();
|
||||
if (ie) return true;
|
||||
|
||||
(function fn() {
|
||||
if ( (self.val() != val) && $.isFunction(self[0].__wi_oninput) ) {
|
||||
val = self.val();
|
||||
self[0].__wi_oninput();
|
||||
}
|
||||
|
||||
timer = setTimeout(arguments.callee, 100);
|
||||
})();
|
||||
}
|
||||
|
||||
function _onblur(event)
|
||||
{
|
||||
val = '';
|
||||
if (!ie && timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue