Rev. 2.73

Script.aculo.us 1.6.2 릴리즈드

Script.aculo.us 1.6.2가 릴리즈 되었습니다. 이번 업데이트는 기능 추가없이 주로 버그픽스가 이루어졌습니다. draggable의 논리 문제, slider handle이 출력되지 않는 문제, Effect.Move 효과중에 엘리먼트가 튀는 문제 등이 수정되었다고 합니다. 자세한 패치 내역은 아래와 같습니다.

* Fix a problem in the drag and drop logic if an reverting/drag ending draggable was initialized for a new drag (for example by clicking repeatedly) for all cases where the default start/revert/end-effects are used, fixes
* Fix possible memory leaks with Draggables, fixes
* Throw nicer errors when requires script.aculo.us libraries are not loaded, fixes
* Make slider handles work when not displayed initially by using CSS width/height, fixes
* Update sortable functional test with onUpdate counter
* Make more Element extensions unit tests work on Safari
* Add the assertMatch unit test assertion for asserts with RegExps
* Fix a problem with Effect.Move causing "jumping" elements because of very low float numbers in some situations
* Fix a missing semicolon in dragdrop.js, fixes
* Fix a slight inaccuracy with Effect.Scale that could lead the scaling to be one pixel off
* Be more prototypish with Effect.Transitions.linear
* Make Effect.Scale recognize font sizes that use the pt unit, fixes
* Fix IE hack in Effect.Opacity, fixes
* Fix IFRAME layout fix for IE and Autocompleter, fixes
* Fix only option in onEmptyHover, fiex
* Fix Effect.BlindDown and SwitchOff handling of supplied callbacks, fixes
* Fix a problem with field focus on Ajax.InPlaceEditor and loading external text, fixes
* Do not attempt to scroll if scrollspeed is 0/0, fixes
* Fix a problem with Sortable Tree serialization, fixes
* Fix an endless loop with sliders, fixes
* Make autocompleter work with update DIVs that have scrollbars, fixes
* Corrected options parsing on switchoff effect, fixes

Comments

비-프로그래머를 위한 AJAX 구현 - LaCo

Spotty 블로그는 비-프로그래머를 위한 AJAX 기능추가 툴킷인 LaCo를 공개하였다. 자바스크립트를 잘 모르는 사용자를 위해 Ajax를 손쉽게 다루는 방법을 제시한다. <A> 또는 <DIV> 태그에 임의의 애트리뷰트(attribute)를 사용함으로 자바스크립트는 손댈 필요도 없이 Ajax가 구현된다. 다음의 4가지방법으로 적용할 수 있다.

자동(페이지 로딩) - <DIV>태그에 'laco_src' 애트리뷰트를 추가하여 해당 페이지 로딩과 동시에 발동한다.
마우스 클릭 - A태그에 'laco_target' 애트리뷰트를 추가하여 사용자가 클릭할 때 발동한다.
마우스 토글 - 마우스 클릭과 동일하지만 다시한번 클릭하여 숨길 수 있다. 그리고 두번째 토글 부터는 다시금 Ajax요청을 하지 않는다.
마우스 오버 - 마우스 토글과 동일하지만 클릭되는 시점이 아니라 오버되는 시점에 발동한다.

// 자동(페이지 로딩)
<div laco_src="less_important_content.html" ></div>
// 마우스 클릭
<a href="content.html" laco_target="myDiv">Show Me The Content</a>
<div id="myDiv"></div>
// 마우스 토글
<a href="content.html" laco_target="myDiv" laco_toggle="true">View</a>
<div id="myDiv"></div>
// 마우스 오버
<a href="content.html" laco_target="myDiv" laco_toggle="true" laco_mouseover="true">View</a>
<div id="myDiv"></div>

주의할 점은 Prototype 프레임웍 라이브러리를 기반으로 제작되었으며 LaCo라이브러리 상단에 prototype.js가 로드되어 있어야 한다. 그리고 이것은 W3C의 웹표준을 따르지 않는 구현방법이다.

<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="laco.js"></script>
</head>

라이브러리의 다운로드는 이 곳에서 할 수 있다.

Comments

검색엔진 키워드 하이라이트

자바스크립트로 만들어진 검색엔진 키워드 하이라트입니다. UTF-8 유니코드를 지원하는 검색엔진에서 링크되어 온 경우 방문객이 키워드를 알아보기 쉽도록 리퍼러를 분석하여 하이라이트(강조)합니다. 외국 사이트에서는 심심찮게 사용되고 있으며, 구글검색의 '저장된 페이지'에서 경험해 보셨을 겁니다.

국내 대표 포털사이트 네이버, 다음, 야후코리아, 엠파스, MSN한국 등은 하나같이 EUC-KR을 사용하고 있으므로 자바스크립트로는 분석이 어려운 실정입니다. 영문이야 상관없습니다만,(귀찮은 짓은 안하겠습니다.) 구글, 야후닷컴, MSN, AOL, Altavista, feedster, lycos 등은 UTF-8 URI를 사용함으로 이를 통해 연결된 경우에 스크립트가 발동합니다. 아래의 링크에서 직접 확인해 보세요.

구글의 테스트 주소(키워드 : firejune, 자바스크립트, 하이라이트, 웹표준, HTML)

이 자바스크립트는 Scott Yang씨가 최초로 작성하였으며 현재 'Search Engine Keyword Highlight'라는 이름으로 배포되고 있습니다. 이 곳에 소개된 코드는 한글을 지원하게 하고 아무곳에나 쑤셔넣기(?) 좋게 커스터마이징 한것이며 기본설계는 동일합니다. 별도의 라이브러리를 필요로 하지 않으며, 스타일시트와 몇몇 변수를 조정해주면 쉽게 추가할 수 있습니다. (당연히 UTF-8환경에서만 작동합니다.)

// Search Engine Keyword Highlight (http://fucoder.com/code/se-hilite/)
// @author Scott Yang <http://scott.yang.id.au/ > @version 1.3
// @after customized by Firejune <http://firejune.com >
var Hilite = {
max_nodes: 1000, // 하이라이트 될 노드의 최고 수
style_name: 'hilite', // 스타일시트의 이름
debug_referrer: '',
search_engines: [
['^http://(www)?\\.?google.*', 'q='],
['^http://search\\.yahoo.*', 'p='],
['^http://search\\.msn.*', 'q='],
['^http://search\\.aol.*', 'userQuery='],
['^http://(www\\.)?altavista.*', 'q='],
['^http://(www\\.)?feedster.*', 'q='],
['^http://search\\.lycos.*', 'query=']
],
hilite: function(elementid){
if(document.referrer.indexOf(document.domain) != -1
|| !document.referrer) return
var q = this.debug_referrer ? this.debug_referrer : document.referrer
var e = null
q = this.decodeReferrer(q)
if (q && ((elementid && (e = document.getElementById(elementid)))
|| (e = document.body)))
this.hiliteElement(e, q)
},
decodeReferrer: function(referrer){
var query = null
var match = new RegExp('')
for (var i = 0; i < this.search_engines.length; i ++) {
match.compile(this.search_engines[i][0], 'i')
if (referrer.match(match)) {
match.compile('^.*'+this.search_engines[i][1]+'([^&]+)&?.*$')
query = referrer.replace(match, '$1')
if (query) {
query = decodeURIComponent(query)
query = query.replace(/\'|"/, '')
query = query.split(/[\s,\+\.]+/)
return query
}
}
}
return null
},
hiliteElement: function(elm, query){
if (!query || elm.childNodes.length == 0) return
var qre = new Array()
for (var i = 0; i < query.length; i ++) {
query[i] = query[i].toLowerCase()
qre.push(query[i])
}
qre = new RegExp(qre.join("|"), "i")
var stylemapper = {}
for (var i = 0; i < query.length; i ++)
stylemapper[query[i]] = this.style_name+(i+1)
var textproc = function(node) {
var match = qre.exec(node.data)
if (match) {
var val = match[0]
var k = ''
var node2 = node.splitText(match.index)
var node3 = node2.splitText(val.length)
var span = node.ownerdocument.createElement('SPAN')
node.parentNode.replaceChild(span, node2)
span.className = stylemapper[val.toLowerCase()]
span.appendChild(node2)
return span
} else return node
}
this.walkElements(elm.childNodes[0], 1, textproc);
},
walkElements: function(node, depth, textproc){
var skipre = /^(script|style|textarea)/i
var count = 0
while (node && depth > 0) {
count ++
if (count >= this.max_nodes) {
var handler = function() {Hilite.walkElements(node, depth, textproc)}
setTimeout(handler, 50)
return
}
if (node.nodeType == 1) {
if (!skipre.test(node.tagName) && node.childNodes.length > 0) {
node = node.childNodes[0]
depth ++
continue
}
} else if (node.nodeType == 3) node = textproc(node)
if (node.nextSibling) node = node.nextSibling
else {
while (depth > 0) {
node = node.parentNode
depth --
if (node.nextSibling) {
node = node.nextSibling
break
}
}
}
}
}
}

// 사용하기
Hilite.hilite('content') // 컨텐츠를 둘러싸고 있는 엘리먼트의 ID(온로드 이벤트 핸들러에 추가)

// 스타일 시트
.hilite1 { background: #fcc }
.hilite2 { background: #cfc }
.hilite3 { background: #ccf }
.hilite4 { background: #ffc }
.hilite5 { background: #fcf }
.hilite6 { background: #cff }

덧(2007-5-12). 코드가 업데이트 되었습니다.
1. 무한 루프 버그수정.
2. 영문과 한글이 섞인경우 키워드를 발췌하지 못하던 버그 수정
3. 검색엔진 추가 : live.com, ask.com, alltheweb.com, technorati.com, dogpile.com, eolin.com
4. 함수 클래스화
5. euc-kr 지원(Ajax 사용)
6. euc-kr 기반 검색엔진 추가 : naver.com, empas.com, daum.net, paran.com
7. 자체사이트 검색 추가

다운로드 : http://firejune.com/javascripts/hilight.js

Comments