ZeroClipboard.js // Simple Set Clipboard System // 작성자: Joseph Huckaby var ZeroClipboard = { version: "1.0.7", 클라이언트: {}, // 페이지에 등록된 업로드 클라이언트, ID로 색인 moviePath: 'ZeroClipboard.swf', // 영화 URL nextId: 1, // 다음 영화 ID $: function( thingy) { // 단순 DOM 조회 유틸리티 함수 if (typeof(thingy) == 'string') thingy = document.getElementById(thingy); if (!thingy.addClass) { // 몇 가지 유용한 메소드로 요소 확장 thingy.hide = function() { this.style.display = 'none'; }; thingy.show = function() { this.style.display = ''; }; thingy.addClass = function(이름) { this.removeClass(이름); this.className = ' ' 이름; }; thingy.removeClass = function(name) { varclasses = this.className.split(/s /); var idx = -1; for (var k = 0; k if (classes[k] == name) { idx = k; k = 클래스.길이; } } if (idx > -1) { classes.splice( idx, 1 ); this.className = class.join(' '); } 이것을 반환하세요. }; thingy.hasClass = function(name) { return !!this.className.match( new RegExp("\s*" name "\s*") ); }; } 반환하세요; }, setMoviePath: function(path) { // ZeroClipboard.swf에 경로 설정 this.moviePath = path; }, dispatch: function(id, eventName, args) { // 플래시 무비에서 이벤트 수신, 클라이언트로 보내기 var client = this.clients[id]; if (클라이언트) { client.receiveEvent(eventName, args); } }, register: function(id, client) { // 이벤트를 수신할 새 클라이언트 등록 this.clients[id] = client; }, getDOMObjectPosition: function(obj, stopObj) { // dom 요소의 절대 좌표 가져오기 var info = { left: 0, top: 0, 너비: obj.width ? obj.width : obj.offsetWidth, 높이: obj.height ? obj.height : obj.offsetHeight }; while (obj && (obj != stopObj)) { info.left = obj.offsetLeft; info.top = obj.offsetTop; obj = obj.offsetParent; } 반품 정보; }, 클라이언트: function(elem) { // 새로운 단순 업로드 클라이언트용 생성자 this.handlers = {}; // 고유 ID this.id = ZeroClipboard.nextId ; this.movieId = 'ZeroClipboardMovie_' this.id; // 플래시 이벤트를 수신하려면 싱글톤으로 클라이언트를 등록하세요. ZeroClipboard.register(this.id, this); // 영화 만들기 if (elem) this.glue(elem); } }; ZeroClipboard.Client.prototype = { id: 0, // 고유 ID ready: false, // 영화가 이벤트를 수신할 준비가 되었는지 여부 movie: null, // 영화 객체 참조 clipText: '', // 클립보드에 복사할 텍스트 handCursorEnabled: true, // 손 모양 커서를 표시할지 기본 포인터 커서를 표시할지 여부 cssEffects: true, // CSS 마우스 활성화 DOM 컨테이너에 미치는 영향 handlers: null, // 사용자 이벤트 핸들러 glue: function(elem, appendElem, stylesToAdd) { // DOM 요소에 대한 붙임 // elem은 ID 또는 실제일 수 있음 DOM 요소 객체 this.domElement = ZeroClipboard.$(elem); // 객체 바로 위에 떠 있거나 dom 요소가 설정되지 않은 경우 zIndex 99 var zIndex = 99; if (this.domElement.style.zIndex) { zIndex =parseInt(this.domElement.style.zIndex, 10) 1; } if (typeof(appendElem) == 'string') { appendElem = ZeroClipboard.$(appendElem); } else if (typeof(appendElem) == '정의되지 않음') { appendElem = document.getElementsByTagName('body')[0]; } // domElement의 X/Y 위치 찾기 var box = ZeroClipboard.getDOMObjectPosition(this.domElement,appendElem); // 요소 위에 부동 DIV 생성 this.div = document.createElement('div'); var 스타일 = this.div.style; style.position = '절대'; style.left = '' box.left 'px'; style.top = '' box.top 'px'; style.width = '' box.width 'px'; style.height = '' box.height 'px'; style.zIndex = zIndex; if (typeof(stylesToAdd) == 'object') { for ( addedStyle in stylesToAdd) { style[ addedStyle] = stylesToAdd[ addedStyle]; } } // style.BackgroundColor = '#f00'; // 디버그 appendElem.appendChild(this.div); this.div.innerHTML = this.getHTML( box.width, box.height ); }, getHTML: function(width, height) { // 영화에 대한 HTML 반환 var html = ''; var flashvars = 'id=' this.id '&width=' 너비 '&height=' 높이; if (navigator.userAgent.match(/MSIE/)) { // IE가 OBJECT 태그를 가져옴 var 프로토콜 = location.href.match(/^https/i) ? 'https://' : 'http://'; html = ''; } else { // 다른 모든 브라우저는 EMBED 태그를 얻습니다. html = ' '; } html을 반환합니다. }, hide: function() { // 일시적으로 화면 밖에서 플로터 숨기기 if (this.div) { this.div.style.left = '-2000px'; } }, show: function() { // hide() 호출 후 자신을 표시합니다 this.reposition(); }, destroy: function() { // 컨트롤 및 플로터 제거 if (this.domElement && this.div) { this.hide(); this.div.innerHTML = ''; var body = document.getElementsByTagName('body')[0]; { body.removeChild( this.div );를 시도해보세요. } catch(e) {;} this.domElement = null; this.div = null; } }, reposition: function(elem) { // 플로팅 div의 위치를 변경하고 선택적으로 새 컨테이너로 변경 // 경고: 컨테이너는 크기를 변경할 수 없으며 위치만 변경할 수 있습니다 if (elem) { this.domElement = ZeroClipboard.$(elem); if (!this.domElement) this.hide(); } if (this.domElement && this.div) { var box = ZeroClipboard.getDOMObjectPosition(this.domElement); var 스타일 = this.div.style; style.left = '' box.left 'px'; style.top = '' box.top 'px'; } }, setText: function(newText) { // 클립보드에 복사할 텍스트 설정 this.clipText = newText; if (this.ready) this.movie.setText(newText); }, addEventListener: function(eventName, func) { // 이벤트에 대한 사용자 이벤트 리스너 추가 // 이벤트 유형: load, queueStart, fileStart, fileComplete, queueComplete, Progress, error, 취소 eventName = eventName.toString().toLowerCase().replace(/^on/, ''); if (!this.handlers[eventName]) this.handlers[eventName] = []; this.handlers[이벤트 이름].push(func); }, setHandCursor: function(enabled) { // 손 모양 커서 활성화(true) 또는 기본 화살표 커서(false) this.handCursorEnabled = 활성화됨; if (this.ready) this.movie.setHandCursor(활성화); }, setCSSEffects: function(enabled) { // DOM 컨테이너에서 CSS 효과 활성화 또는 비활성화 this.cssEffects = !!enabled; }, receiveEvent: function(eventName, args) { // 플래시에서 이벤트 수신 eventName = eventName.toString().toLowerCase().replace(/^on/, '' ); // 특정 이벤트에 대한 특수 동작 switch (eventName) { case 'load': // 영화는 준비가 되었다고 주장하지만 IE에서는 항상 그런 것은 아닙니다... // 버그 수정: Firefox에서는 EMBED DOM 요소를 확장할 수 없으며 기존 기능을 사용해야 합니다. this.movie = document.getElementById(this.movieId); if (!this.movie) { var self = this; setTimeout( function() { self.receiveEvent('load', null); }, 1 ); 반환; } // 특정 경우에 이를 설정하려면 PC의 Firefox에서 "킥"이 필요합니다. if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent. match(/Windows/)) { var self = this; setTimeout( function() { self.receiveEvent('load', null); }, 100 ); this.ready = true; 반환; } this.ready = true; this.movie.setText( this.clipText ); this.movie.setHandCursor( this.handCursorEnabled ); 휴식; case 'mouseover': if (this.domElement && this.cssEffects) { this.domElement.addClass('hover'); if (this.recoverActive) this.domElement.addClass('active'); } 휴식; case 'mouseout': if (this.domElement && this.cssEffects) { this.recoverActive = false; if (this.domElement.hasClass('active')) { this.domElement.removeClass('active'); this.recoverActive = true; } this.domElement.removeClass('hover'); } 휴식; case 'mousedown': if (this.domElement && this.cssEffects) { this.domElement.addClass('active'); } 휴식; case 'mouseup': if (this.domElement && this.cssEffects) { this.domElement.removeClass('active'); this.recoverActive = false; } 휴식; } // 이벤트 이름 전환 if (this.handlers[eventName]) { for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx ) { var func = this.handlers[eventName][idx]; if (typeof(func) == 'function') { // 실제 함수 참조 func(this, args); } else if ((typeof(func) == 'object') && (func.length == 2)) { // PHP 스타일 객체 메소드, 즉 [myObject, 'myMethod'] func[0][ func[1] ](this, args); } else if (typeof(func) == 'string') { // 함수 이름 window[func](this, args); } } // foreach 이벤트 핸들러 정의 } // 이벤트에 대한 사용자 정의 핸들러 } };