Rev. 2.73

날짜 또는 시간을 한글로 입력해 보세요

추천 단어: 오늘, 내일, 작년, 내년, 저번 달, 다음 달, 2008년 8월 12일, 10월 1일, 2009.8.15, 다음주 목요일, 저번주 수요일, 36시간 후, 5시간 전, 30분 후, 그끄저께, 그글피, 100일 후, 열흘 전, 닷세 후, 보름 전, 스무여드레, 삼십일일, 오후 5시, 16시 30분, 모레 오후 3시, 내일밤 11시, 5월 9일 밤 10시

위 예제는 일전에 소개했던 Datejs 자바스크립트 라이브러리의 한글입력 부분을 확장한 것입니다. Datejs는 영어로 입력할 때와는 달리 한글로 날짜 및 시간을 입력할 때에 나타나는 특징들이 고려되지 않는 점과 더욱 다양한 키워드를 인식하도록 보강하기 위해 이와같은 작업을 시도하게 되었습니다. 현재 진행중인 프로젝트에 위 UI를 적용시키기위한 사전작업의 일부분이기도 합니다. 원본 Datejs 라이브러리를 왜곡하지 않고 확장하는 모습으로 한글입력을 지원하기 위해 클래스를 추가하고 ko-KR.js파일을 교정하였습니다. 아래의 예제를 봅시다.

/**
 * Korean date/time format parser 
 *   for Datejs <http://www.datejs.com/>
 * 
 * @version   0.1.2a
 * @license   MIT Style
 * @author    firejune <to [at] firejune [dot] com>
 * @url       http://www.firejune.com/1343
 *
 * @usage:    Date.parseHangul(value); 
 *
 */

new (Class.create({
  initialize: function() {
    this.datePatterns = {
      '-3':/^그끄제|그끄저께/i,'-2':/^그제|그저께/i,'+2':/^모레/i,'+3':/^글피/i,'+4':/^그글피/i,
      '1':/^하루|일일/i,'2':/^이틀|이일/i,'3':/^사흘|삼일/i,'4':/^나흘|사일/i,'5':/^닷세|오일/i,
      '6':/^엿세|육일/i,'7':/^이레|칠일/i,'8':/^여드레|팔일/i,'9':/^아흐레|구일/i,
      '10':/^열흘|십일/i,'11':/^열하루|열하레|십일일/i,'12':/^열이틀|십이일/i,
      '13':/^열사흘|열산날|십삼일/i,'14':/^열나흘|열낫날|십사일/i,'15':/^보름|열닷세|십오일/i,
      '16':/^열엿세|십육일/i,'17':/^열이레|십칠일/i,'18':/^열여드레|십팔일/i,
      '19':/^열아흐레|십구일/i,'20':/^스무날|이십일/i,'21':/^스무하루|스무하레|이십일일/i,
      '22':/^스무이틀|이십이일/i,'23':/^스무사흘|이십삼일/i,'24':/^스무나흘|스무낫날|이십사일/i,
      '25':/^스무닷세|이십오일/i,'26':/^스무엿세|이십육일/i,'27':/^스무이레|이십칠일/i,
      '28':/^스무여드레|이십팔일/i,'29':/^스무아흐레|이십구일/i,'30':/^설흔날|서른날|삼십일/i,
      '31':/^서른하루|삼십일일/i
    };

    this.regex = {
      time: /[0-9]+시|[0-9]+분|[0-9]+초|오후|저녁|밤/g,
      date: /[0-9]+년|[0-9]+월|[0-9]+일/g,
      years: /[0-9]+년/i,
      months: /[0-9]+월/i,
      days: /[0-9]+일/i,
      second: /^[0-9]+초/i,
      minute: /^[0-9]+분/i,
      hour: /^[0-9]+시(간)?/i,
      pm: /^오후|저녁|밤/i,
      am: /^오전|아침/i,
      after: /(이|\s)?후/i,
      befroe: /(이|\s)?전/i
    };

    Date.parseHangul = this.analyze.bind(this);
  },
  analyze: function(value) {
    value = value.strip();
    if (!value) return null;

    var time = this.searchTime(value);
    var date = this.searchDate(value);

    if (time) {
      if (!date) {
        date = new Date();
        date = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate());
      }
      date = new Date(date.getTime() + time);
    }

    return isNaN(date) ? null : date;
  },
  searchTime: function(str) {
    var pattern = str.match(this.regex.time), times = 0;
    if (pattern && pattern.length > 1 || 
      (str.match(this.regex.am) || str.match(this.regex.pm)) && str.match(this.regex.time)) {
      for (var i = 0; i < pattern.length; i++) {
        if (pattern[i].match(this.regex.pm)) times += 43200000;
        if (pattern[i].match(this.regex.hour)) times += parseInt(pattern[i]) * 3600000;
        if (pattern[i].match(this.regex.minute)) times += parseInt(pattern[i]) * 60000;
        if (pattern[i].match(this.regex.second)) times += parseInt(pattern[i]) * 1000;
      }

      return times || null;
    } else return null;
  },
  searchDate: function(str) {
    var pattern = str.match(this.regex.date);
    if (pattern && pattern.length == 3)
      for (var i = 0; i < pattern.length; i++)
        pattern[i] = parseInt(pattern[i]);
    else {
      pattern = [];
      var years = str.match(this.regex.years),
      months = str.match(this.regex.months),
      days = str.match(this.regex.days);
      
      pattern.push(years ? parseInt(years[0]) : new Date().getFullYear());
      pattern.push(months ? parseInt(months[0]) : new Date().getMonth() + 1);
      days = days ? parseInt(days[0]) : null;

      if (!days)
        for (var regex in this.datePatterns)
          if (str.match(this.datePatterns[regex])) days = regex;

      if (!days) return null;
      else if (str.match(this.regex.befroe) || str.match(this.regex.after)) {
        if (str.match(this.regex.befroe)) days = - days;
        pattern.push(new Date().getDate() + days  * 1);
      } else {
        if (typeof days == 'string' && days.match(/\+|\-/))
          days = new Date().getDate() + days * 1;
        pattern.push(days);
      }
    }

    return new Date(pattern[0], pattern[1] - 1, pattern[2]);
  }
}))();

Examples:

var input = $('input'), result = $('result');
var parsed = Date.parseHangul(input.value) || Date.parse(input.value);
result.innerHTML = parsed.toString(Date.CultureInfo.formatPatterns.fullDateTime);

Downloads:

* original - date.js (31.06kb)
* minified - date.js (30.00kb)

Updates:

* 모레, 글피, 그글피 키워드의 날짜 계산 오류를 수정하였습니다.
* "오후 5시"와 같은 시간 값을 사용할 수 있습니다.

Comments


Hello!
I'm a flip-box!
:)

Luca Manno씨는 jQuery를 이용해서 매우 흥미로운 자바스크립트 애니메이션 효과인 Flip!을 만들었습니다. 위 예제는 실행가능한 예제입니다. 직접 실행해 보세요. 저 사선은 어떻게 그려지는 것일까요? 저는 당연히 Canvas태그를 사용했으려니 했답니다. 소스를 뜯어보고 그 기발한 발상에 무릎을 쳤습니다. 보더에서 만들어지는 사선을 이용해서 만들어낸 것이었습니다. 캬~

내친 김에 PrototypeScriptaculous에서도 사용할 수 있도록 만들었습니다. 'Flip'이란 클래스를 만들고 Effect.Morph 메서드를 사용하여 애니메이션을 구현했습니다. 시작/끝으로 구분된 Transition 효과와 빠르기를 구분 설정하도록 하여 조금 더 세부적으로 커스토마이즈 할 수 있게 한 것이 특징입니다. 다음 예제코드를 참고하세요.

Examples :

// Flip the flipbox from bottom to top
$("flipBT").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'bt',
    color: '#D46419',
    content: '<div class="demo-one">Hello!<br/>I\'m a flip-box!<br/> :) </div>'
  });
});

// Flip the flipbox from top to bottom
$("flipTB").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'tb',
    color: '#B34212',
    startSpeed: 0.6,
    endSpeed: 0.4,
    content: '<div class="demo-two">Hey!<br/><span style="font-size:14px">You can change me with<br/><code style="font-family:monospace;padding-left:10px">content: $("myId").innerHTML</code></span><br/><br/>Enjoy!</div>'
  });
});

// Flip the flipbox from left to right
$("flipLR").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'lr',
    color: '#341405',
    content: '<div class="demo-three">I\'m simple html!</div>'
  });
});

// Flip the flipbox from right to left
$("flipRL").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'rl',
    startSpeed: 1.0,
    endSpeed: 1.0,
    color: '#166665',
    content: '<div class="demo-four">' + $('logo').up('a').title + '<br/><span style="font-size:11px">This is a taken directly from this page<code style="display:block;color:#fff;padding:5px;font-family:monospace">$("logo").up("a").title</code></span></div>'
  });
});

// Example 1
$("flipEx1").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'tb',
    startFx: Effect.Transitions.pulse,
    endFx: Prototype.Browser.IE ? Effect.Transitions.linear : Effect.Transitions.spring,
    startSpeed: 0.8,
    endSpeed: 0.3,
    color: '#341405',
    content: '<div class="demo-one">Example 1</div>'
  });
});

// Example 2
$("flipEx2").observe('click', function(){
  new Flip($("flipBox"), {
    direction: 'bt',
    startFx: Effect.Transitions.circIn,
    endFx: Effect.Transitions.circOut,
    color: '#341405',
    content: '<div class="demo-two">Example 2</div>'
  });
});

// Example 3
$("flipEx2").observe('click', function(){
  new Flip($("flipBox"), {
    startFx: Effect.Transitions.backIn,
    endFx: Effect.Transitions.backOut,
    startSpeed: 0.3,
    endSpeed: 0.3,
    color: '#166665',
    content: '<div class="demo-three">Example 3</div>'
  });
});

오래전에 보더가지고 하드코딩 하던 분들(Triangles in Javascript, 3D Renderring via CSS, DHTML Polygon Rendering Demo, CSS House)이 문득 떠오릅니다.

Downloads :

* original - flip.js (5.82kb)
* minified - flip.js (4.93kb)

Updates :

* 2008.10.15 - IE에서 발생하는 Transition 오류를 수정하였습니다.
* 2008.10.15 - 구글 크롬에서 발생하는 보더 배경색 문제를 수정하였습니다.
* 2008.10.15 - 애니메이션이 일어나는 중에 클래스를 호출하는 경우 초기화하지 않습니다.

Comments

Volll

Volll.jpg

SWFObject

NOFRKS

NOFRKS.png

MooTools

Css Brigit

CssBrigit.jpg

jQuery, Interface Elements, LightBox

Baltic Producers

BalticProducers.png

jQuery, Tween, SWFAddress

WeBleedDesign

WeBleedDesign.png

Prototype, Scriptaculous, Lightbox, Shelf

tatTAPtap

tatTAPtap.jpg

MooTools

SourceBits

SourceBits.jpg

jQuery

Komodo Media

KomodoMedia.jpg

jQuery

Playground Blues

PlaygroundBlues.png

jQuery

Lucuma

Lucuma.jpg

MooTools, iCarousel, Slimbox, siFR

YouLoveUs

YouLoveUs.jpg

jQuery, FancyZoom

Dibusoft

Dibusoft.png

MooTools, iCarousel, siFR

Melissahie

Melissahie.jpg

MooTools

Marius Roosendaal

MariusRoosendaal.png

MooTools

OmniTech

OmniTech.png

MooTools, LyteBox

Danny Blackman

DannyBlackman.jpg

MooTools

Viva Video

VivaVideo.jpg

CodaEffects

IJsfontein

IJsfontein.jpg

Prototype, Scriptaculous, siFR

TurboTax

TurboTax.png

jQuery

Good Works Media

GoodWorksMedia.jpg

MooTools, Shadowbox

자료 참조: http://dzineblog.com

Comments