Rev. 2.73

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

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